{"version":3,"file":"component---src-pages-service-faq-tsx-c621b85c1c1ef3e5f4a3.js","mappings":"qLAMA,IAAMA,GAAO,+oBAgFb,IA1B8B,WAC5B,IAAMC,GAAaC,EAAAA,EAAAA,GAAc,aACjC,OACE,QAACF,EAAD,MACE,eAAKG,UAAU,oBACb,eAAKA,UAAU,mCACb,aAAGA,UAAU,yCAAb,uBAGA,eACEC,IAAI,4CACJC,IAAI,cAGR,QAAC,IAAD,CACEC,KAAK,OACLC,QAAS,YACPC,EAAAA,EAAAA,IAASP,KAHb,a,6JCrEFD,GAAO,4MAaTS,EAAAA,EAAAA,QAbS,KAeTA,EAAAA,EAAAA,OAfS,uHAkGb,EAnEyB,kBACvB,QAACT,EAAD,MACE,eAAKG,UAAU,oBACb,eAAKA,UAAU,kBACb,QAAC,IAAD,CACEO,SAAS,4BACTC,OACE,iIAEFR,UAAU,UACVS,OAAO,eAET,QAAC,IAAD,CACEF,SAAS,qBACTC,OAAO,oFACPC,OAAO,eAET,QAAC,IAAD,CACEF,SAAS,2BACTC,OAAO,oDACPC,OAAO,eAET,QAAC,IAAD,CACEF,SAAS,yBACTC,OAAQ,IACRC,OAAO,aAHT,2CAME,mBANF,yCAQE,gCACA,uCATF,qBAWE,mBAXF,uBAaE,mBAbF,sBAeE,mCAfF,cAiBE,mBAjBF,qBAmBE,gCAnBF,uBAqBE,gCArBF,4BAuBE,gCACA,4CAxBF,eA0BE,mBA1BF,eA4BE,mBA5BF,+BA8BE,sCA9BF,kBAgCE,mBAhCF,uBAmCA,QAAC,IAAD,CACEF,SAAS,wBACTC,OAAO,uBACPC,OAAO,kB,iCCrFjB,IAAMZ,GAAO,iOAsDb,EA/BuB,SAAC,GAA0B,IAAxBa,EAAuB,EAAvBA,SAClBZ,GAAaC,EAAAA,EAAAA,GAAc,SACjC,OACE,QAAC,IAAD,CAAgBW,SAAUA,EAAUV,UAAU,eAC5C,QAAC,IAAD,CAAKW,MAAM,aACX,QAAC,EAAD,MACE,QAAC,IAAD,CACEC,MAAM,UACNC,YAAY,2BAEd,QAAC,EAAD,OACA,eAAKb,UAAU,oBACb,yDAGA,QAAC,IAAD,CACEG,KAAK,QACLW,MAAM,OACNV,QAAS,WACPW,OAAOC,KAAKlB,KAJhB,SAUF,QAAC,IAAD","sources":["webpack://beaver-help/./src/components/molecules/officialGalleryBtnSet.tsx","webpack://beaver-help/./src/components/organisms/officialLowFaq01.tsx","webpack://beaver-help/./src/pages/service-faq.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport { navigate } from 'gatsby-link'\nimport React from 'react'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.div`\n  width: 100%;\n  background: #ffffff;\n  text-align: center;\n  position: relative;\n\n  .p-section-inner {\n    max-width: 480px;\n    padding: 60px 0;\n    margin: 0 auto;\n    position: relative;\n\n    .p-section-gallery {\n      width: 100%;\n      margin: 0 auto 60px;\n      padding: 30px 0;\n      background: #ffffff;\n      position: relative;\n      border-bottom: solid 4px #ffc60c;\n\n      &:after {\n        display: block;\n        position: absolute;\n        content: '';\n        width: 60px;\n        height: 60px;\n        background: #ffffff;\n        border-bottom: solid 4px #ffc60c;\n        border-right: solid 4px #ffc60c;\n        transform: rotate(45deg);\n        bottom: -32px;\n        left: 44%;\n      }\n\n      p {\n        position: relative;\n        z-index: 2;\n      }\n\n      img {\n        display: block;\n        position: absolute;\n        width: 40px;\n        height: auto;\n        top: 0;\n        left: -40px;\n      }\n    }\n  }\n`\n/**\n * ギャラリー誘導ボタンセット\n * @constructor\n */\nconst OfficialGalleryBtnSet = () => {\n  const routeParam = useRouteParam('/gallery/')\n  return (\n    <Wrapper>\n      <div className=\"p-section-inner\">\n        <div className=\"p-section-gallery anim-fade-up\">\n          <p className=\"txt-center txt-size-26 txt-bold-green\">\n            ご好評いただいている機能を公開中です\n          </p>\n          <img\n            src=\"/images/official/common/iconSupport01.png\"\n            alt=\"最大2ヶ月無料\"\n          />\n        </div>\n        <OfficialCommonBtn\n          size=\"mega\"\n          onClick={() => {\n            navigate(routeParam)\n          }}\n        >\n          ギャラリー\n        </OfficialCommonBtn>\n      </div>\n    </Wrapper>\n  )\n}\nexport default OfficialGalleryBtnSet\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialFaqItems from '../molecules/officialFaqItems'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  position: relative;\n  .p-section-inner {\n    max-width: 1080px;\n    padding: 80px 0;\n    margin: 0 auto;\n    .p-section-function {\n      width: 100%;\n      margin: 0 auto 20px;\n      text-align: center;\n    }\n  }\n  ${BreakPoints.largest} {\n  }\n  ${BreakPoints.medium} {\n    .p-section-inner {\n      max-width: calc(100vw - 40px);\n      padding: 40px 0;\n      .p-section-function {\n        width: 100%;\n        margin: 0 auto 10px;\n      }\n    }\n  }\n`\n\n/**\n * サービスサイト下層よくあるご質問01\n * @constructor\n */\nconst OfficialLowFaq01 = () => (\n  <Wrapper>\n    <div className=\"p-section-inner\">\n      <div className=\"p-section-faq\">\n        <OfficialFaqItems\n          question=\"試しに使ってみたいのですが、デモサイトはありますか\"\n          answer={\n            '無料トライアルからアカウントを作成していただくと、すぐに無料で利用が可能です。\\nユーザー数２０名以下の企業様は永久無料となり、費用発生の心配はございません。ユーザー権限にいくつかの種類がございますので、複数のユーザー様でのご利用をおすすめいたします。'\n          }\n          className=\"is-show\"\n          idName=\"matter-01\"\n        />\n        <OfficialFaqItems\n          question=\"給与ソフトへの連携は対応していますか\"\n          answer=\"はい、対応しております。エクスポートの際、どのデータをエクスポートするのかを選択可能ですので、導入されている給与ソフトに合わせてエクスポートcsvを出力できます。\"\n          idName=\"matter-02\"\n        />\n        <OfficialFaqItems\n          question=\"社員データを一括で登録したいのですが、可能ですか\"\n          answer=\"CSVでのインポートが可能です。大量の社員データを更新する場合もインポートにて一括変更が可能です。\"\n          idName=\"matter-03\"\n        />\n        <OfficialFaqItems\n          question=\"利用するためには、どのような環境が必要ですか\"\n          answer={' '}\n          idName=\"matter-04\"\n        >\n          キンクラを快適にご利用いただくために、以下の環境でのご利用を推奨しております。\n          <br />\n          また、JavaScript、Cookieが使用できる状態でご利用ください。\n          <h3>WEB版の推奨環境</h3>\n          <h4>Windows OSをご利用の場合</h4>\n          ・Google Chrome最新版\n          <br />\n          ・Mozilla Firefox最新版\n          <br />\n          ・Microsoft Edge最新版\n          <h4>Mac OSをご利用の場合</h4>\n          ・Safari最新版\n          <br />\n          ・Google Chrome最新版\n          <h4>iOSをご利用の場合</h4>\n          ・iOS 13以降の標準ブラウザ最新版\n          <h4>AndroidOS </h4>\n          ・Android 9.0以降の標準ブラウザ最新版\n          <h3>アプリ版の推奨環境</h3>\n          <h4>iOS端末（iPhoneなど）をご利用の場合</h4>\n          ・iOS 13.0以上\n          <br />\n          ・iPhone 8以降\n          <br />\n          ・iPad 第8世代、iPad mini 第5世代以降\n          <h4>Android端末をご利用の場合</h4>\n          ・Android 9.0以上\n          <br />\n          ・メモリ(RAM)：3GB 以上搭載\n        </OfficialFaqItems>\n        <OfficialFaqItems\n          question=\"料金の支払い方法にはどんなものがありますか\"\n          answer=\"クレジットカードでのお支払いが可能です。\"\n          idName=\"matter-05\"\n        />\n      </div>\n    </div>\n  </Wrapper>\n)\n\nexport default OfficialLowFaq01\n","import styled from '@emotion/styled'\nimport { graphql, PageProps } from 'gatsby'\nimport React from 'react'\nimport OfficialCommonBtn from '../components/atoms/officialCommonBtn'\nimport SEO from '../components/atoms/seo'\nimport OfficialLayout from '../components/organisms/officialLayout'\nimport OfficialLowFaq01 from '../components/organisms/officialLowFaq01'\nimport OfficialLowHeader from '../components/organisms/officialLowHeader'\nimport OfficialGalleryBtnSet from '../components/molecules/officialGalleryBtnSet'\nimport useRouteParam from '../hooks/useRouteParam'\n\nconst Wrapper = styled.main`\n  .p-top-data-wrap {\n    background: #f9f3c4;\n    max-width: 1090px;\n    border-radius: 8px;\n    margin: -60px auto 60px;\n    padding: 20px;\n    text-align: center;\n    p {\n      margin: 0 0 20px;\n    }\n    button {\n      margin: 0;\n    }\n  }\n`\n\ntype IProps = PageProps<GatsbyTypes.IndexPageQuery>\n\n/**\n * よくあるご質問ページ[サービスサイト質問]\n * @constructor\n */\nconst ServiceFaqPage = ({ location }: IProps) => {\n  const routeParam = useRouteParam('/help')\n  return (\n    <OfficialLayout location={location} className=\"p-page-faq\">\n      <SEO title=\"よくあるご質問\" />\n      <Wrapper>\n        <OfficialLowHeader\n          label=\"よくあるご質問\"\n          description=\"キンクラに関する主要なご質問をまとめました\"\n        />\n        <OfficialLowFaq01 />\n        <div className=\"p-top-data-wrap\">\n          <p>\n            キンクラをご利用中に困った時は、こちらのヘルプページをご確認ください。\n          </p>\n          <OfficialCommonBtn\n            size=\"small\"\n            level=\"weak\"\n            onClick={() => {\n              window.open(routeParam)\n            }}\n          >\n            ヘルプ\n          </OfficialCommonBtn>\n        </div>\n        <OfficialGalleryBtnSet />\n      </Wrapper>\n    </OfficialLayout>\n  )\n}\n\nexport default ServiceFaqPage\n\nexport const pageQuery = graphql`\n  query ServiceFaqPage {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["Wrapper","routeParam","useRouteParam","className","src","alt","size","onClick","navigate","BreakPoints","question","answer","idName","location","title","label","description","level","window","open"],"sourceRoot":""}