{"version":3,"file":"component---src-pages-help-manual-download-tsx-f529bc30766f5946b664.js","mappings":"gKAIMA,GAAE,6dAgCJC,EAAAA,EAAAA,MAhCI,kDAsCJA,EAAAA,EAAAA,OAtCI,0BAmER,IAViB,SAACC,GAChB,MAA2BA,EAAnBC,UAAAA,OAAR,MAAoB,GAApB,EAEA,OACE,QAACH,EAAD,CAAIG,UAAWA,IACb,oBAAOD,EAAME,U,0DC/DnB,IAAMC,GAAE,0TA4CR,IAViB,SAACH,GAChB,MAA2BA,EAAnBC,UAAAA,OAAR,MAAoB,GAApB,EAEA,OACE,QAACE,EAAD,CAAIF,UAAWA,IACb,oBAAOD,EAAME,U,mIC/BbE,GAAO,kyBA4ETL,EAAAA,EAAAA,MA5ES,+BA2Kb,UApF2B,SAAC,GAA0B,IAAxBM,EAAuB,EAAvBA,SAQ5B,OACE,QAAC,IAAD,CAAQA,SAAUA,EAAUC,MALF,CAC1B,CAAEC,MAAO,MAAOC,KAAM,SACtB,CAAED,MAAO,gBAGiCE,aAAcC,EAAAA,EAAAA,QACtD,QAAC,IAAD,CAAKH,MAAM,iBACX,QAAC,IAAD,CAAUL,MAAM,iBAChB,aAAGD,UAAU,4BAAb,yBAEE,mBAFF,wBAIE,gBACEU,MAAO,CAAEC,QAAS,GAAKC,OAAQ,kBAAmBC,QAAS,UAD7D,gDAMF,QAACV,EAAD,CAASH,UAAU,cACjB,QAACG,EAAD,CAASH,UAAU,kBACjB,QAAC,IAAD,CAAUC,MAAM,aAAaD,UAAU,oBACvC,cAAIA,UAAU,kBACZ,mBACE,aAAGc,KAAK,4CAAR,aAIF,mBACE,aAAGA,KAAK,yDAAR,aAIF,mBACE,aAAGA,KAAK,6CAAR,gBAMN,QAACX,EAAD,CAASH,UAAU,kBACjB,QAAC,IAAD,CAAUC,MAAM,aAAaD,UAAU,oBACvC,cAAIA,UAAU,kBACZ,mBACE,aAAGc,KAAK,gDAAR,kBAMN,QAACX,EAAD,CAASH,UAAU,kBACjB,QAAC,IAAD,CAAUC,MAAM,YAAYD,UAAU,oBACtC,cAAIA,UAAU,kBACZ,mBACE,aAAGc,KAAK,gDAAR","sources":["webpack://beaver-help/./src/components/atoms/commonH2.tsx","webpack://beaver-help/./src/components/atoms/commonH3.tsx","webpack://beaver-help/./src/pages/help/manual-download.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst H2 = styled.h2`\n  width: 100%;\n  font-weight: bold;\n  font-size: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: sticky;\n  left: 0;\n  span {\n    margin: 0 0 15px 0;\n    display: flex;\n    align-items: center;\n    position: relative;\n    &:before,\n    &:after {\n      display: block;\n      content: '';\n      width: 22px;\n      height: 14px;\n      border-left: solid 8px rgba(128, 219, 191, 0.5);\n      border-right: solid 8px rgba(128, 219, 191, 0.5);\n      transform: skewX(306deg);\n      position: absolute;\n    }\n    &:before {\n      left: -40px;\n    }\n    &:after {\n      right: -40px;\n    }\n  }\n  ${BreakPoints.large} {\n    &.nav-enable {\n      width: calc(100vw - 8px);\n      left: 0;\n    }\n  }\n  ${BreakPoints.medium} {\n    span {\n      margin: 10px 0;\n    }\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** タイトル */\n  label: string\n}\n\n/**\n * 共通H2タグ\n * @param props\n * @constructor\n */\nconst CommonH2 = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <H2 className={className}>\n      <span>{props.label}</span>\n    </H2>\n  )\n}\n\nexport default CommonH2\n","import styled from '@emotion/styled'\nimport React from 'react'\n\nconst H3 = styled.h3`\n  font-size: 1em;\n  margin: 0 0 15px;\n  border: none;\n  display: inline-block;\n  span {\n    margin: 0 0 3px;\n    display: inline-block;\n    position: relative;\n    border-bottom: solid 2px #e5e5e5;\n    &:before {\n      position: absolute;\n      bottom: -2px;\n      left: 0;\n      width: 16px;\n      height: 2px;\n      content: '';\n      background: #3ec7b3;\n    }\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** タイトル */\n  label: string\n}\n\n/**\n * 共通H3タグ\n * @param props\n * @constructor\n */\nconst CommonH3 = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <H3 className={className}>\n      <span>{props.label}</span>\n    </H3>\n  )\n}\n\nexport default CommonH3\n","import { graphql, PageProps } from 'gatsby'\nimport React from 'react'\nimport styled from '@emotion/styled'\nimport CommonH2 from '../../components/atoms/commonH2'\nimport SEO from '../../components/atoms/seo'\nimport { ITopicPath } from '../../components/atoms/topicPath'\nimport Layout from '../../components/organisms/layout'\nimport { CategoryKind } from '../../types/CategoryKind'\nimport CommonH3 from '../../components/atoms/commonH3'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  &.item-wrap {\n    margin-bottom: 50px;\n  }\n\n  .category-card {\n    background: #ffffff;\n    border-radius: 10px;\n    padding: 25px 30px;\n    max-width: 650px;\n    width: 90vw;\n    margin: 15px auto;\n    // float: left;\n  }\n\n  h3 {\n    span {\n      font-size: 1.6em;\n      border: none;\n\n      &:before {\n        display: none;\n      }\n    }\n  }\n\n  .category-list {\n    margin-top: 15px;\n    display: flex;\n    gap: 10px 50px;\n    padding: 0 20px;\n    flex-wrap: wrap;\n\n    li {\n      display: block;\n      min-width: 120px;\n      position: relative;\n\n      &:before {\n        display: block;\n        content: '';\n        position: absolute;\n        width: 0;\n        height: 0;\n        top: 7px;\n        left: -14px;\n        border-left: 8px solid #3ec7b3;\n        border-top: 3px solid transparent;\n        border-bottom: 3px solid transparent;\n      }\n\n      a {\n        max-width: 100%;\n        // overflow: hidden;\n        // text-overflow: ellipsis;\n        // white-space: nowrap;\n        display: inline-block;\n      }\n    }\n  }\n\n  .all-link {\n    display: block;\n    width: fit-content;\n    margin: 0 0 0 auto;\n    text-align: right;\n    color: #00b5a6;\n  }\n\n  @media screen and (max-width: 1074px) {\n    margin: 15px auto;\n    width: 80vw;\n    float: unset;\n    min-height: unset;\n  }\n\n  ${BreakPoints.large} {\n    width: calc(100vw - 45px);\n  }\n`\n\ntype IProps = PageProps<GatsbyTypes.HelpIndexPageQuery>\n\n/**\n * マニュアルダウンロード\n * @constructor\n */\nconst ManualDownloadPage = ({ location }: IProps) => {\n  // GraphQLで取得したデータを保持\n  // const items = data.awsGraphQL.listHelpCategories?.items || []\n\n  const paths: ITopicPath[] = [\n    { title: 'TOP', link: '/help' },\n    { title: 'マニュアルダウンロード' },\n  ]\n  return (\n    <Layout location={location} paths={paths} categoryKind={CategoryKind.FIRST}>\n      <SEO title=\"マニュアルダウンロード\" />\n      <CommonH2 label=\"マニュアルダウンロード\" />\n      <p className=\"txt-center mt-020 mb-020\">\n        キンクラの使い方に関してのマニュアルです。\n        <br />\n        キンクラ導入の際に、せひご活用ください。\n        <span\n          style={{ opacity: 0.5, margin: '30px 30px -10px', display: 'block' }}\n        >\n          ※以下のリンクをクリックするとマニュアルファイル(pptx)がダウンロードできます。\n        </span>\n      </p>\n      <Wrapper className=\"item-wrap\">\n        <Wrapper className=\"category-card\">\n          <CommonH3 label=\"従業員向けマニュアル\" className=\"category-title\" />\n          <ul className=\"category-list\">\n            <li>\n              <a href=\"/downloads/howto_kintaicloud_fix_v1.pptx\">\n                固定労働時間制\n              </a>\n            </li>\n            <li>\n              <a href=\"/downloads/howto_kintaicloud_transformational_v1.pptx\">\n                変形労働時間制\n              </a>\n            </li>\n            <li>\n              <a href=\"/downloads/howto_kintaicloud_flex_v1.pptx\">\n                フレックス時間制\n              </a>\n            </li>\n          </ul>\n        </Wrapper>\n        <Wrapper className=\"category-card\">\n          <CommonH3 label=\"管理職向けマニュアル\" className=\"category-title\" />\n          <ul className=\"category-list\">\n            <li>\n              <a href=\"/downloads/howto_kintaicloud_manager_v1.pptx\">\n                管理職向けマニュアル\n              </a>\n            </li>\n          </ul>\n        </Wrapper>\n        <Wrapper className=\"category-card\">\n          <CommonH3 label=\"総務向けマニュアル\" className=\"category-title\" />\n          <ul className=\"category-list\">\n            <li>\n              <a href=\"/downloads/howto_kintaicloud_general_v1.pptx\">\n                総務向けマニュアル\n              </a>\n            </li>\n          </ul>\n        </Wrapper>\n        {/* <Wrapper className=\"category-card\"> */}\n        {/*   <CommonH3 label=\"管理職向けマニュアル\" className=\"category-title\" /> */}\n        {/*   <ul className=\"category-list\"> */}\n        {/*     <li> */}\n        {/*       <Link href=\"#\">管理職向けマニュアル</Link> */}\n        {/*     </li> */}\n        {/*   </ul> */}\n        {/* </Wrapper> */}\n        {/* <Wrapper className=\"category-card\"> */}\n        {/*   <CommonH3 label=\"総務向けマニュアル\" className=\"category-title\" /> */}\n        {/*   <ul className=\"category-list\"> */}\n        {/*     <li> */}\n        {/*       <Link>総務向けマニュアル</Link> */}\n        {/*     </li> */}\n        {/*   </ul> */}\n        {/* </Wrapper> */}\n      </Wrapper>\n    </Layout>\n  )\n}\n\nexport default ManualDownloadPage\n\nexport const pageQuery = graphql`\n  query ManualDownloadPage {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["H2","BreakPoints","props","className","label","H3","Wrapper","location","paths","title","link","categoryKind","CategoryKind","style","opacity","margin","display","href"],"sourceRoot":""}