{"version":3,"file":"component---src-pages-gallery-tsx-7a8b58ef94ae418dee8e.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/galleryBtn.tsx","webpack://beaver-help/./src/components/atoms/galleryContent.tsx","webpack://beaver-help/./src/components/molecules/officialCommonH3Set.tsx","webpack://beaver-help/./src/components/organisms/officialDownloadCta.tsx","webpack://beaver-help/./src/components/organisms/officialLowGallery01.tsx","webpack://beaver-help/./src/components/organisms/officialTopSection04.tsx","webpack://beaver-help/./src/pages/gallery.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints';\n\nconst Wrapper = styled.div`\n  a {\n    display: flex;\n    width: 250px;\n    height: 250px;\n    padding: 20px;\n    justify-content: center;\n    align-items: center;\n    flex-wrap: wrap;\n    opacity: 1;\n    position: relative;\n    text-decoration: none !important;\n    word-break: keep-all;\n    white-space: pre;\n    img {\n      display: block;\n      width: 166px;\n      height: 116px;\n      margin-top: 20px;\n      border: solid 3px #646d6a;\n      border-radius: 10px;\n      opacity: 1;\n      overflow: hidden;\n      position: relative;\n      z-index: 2;\n    }\n    span {\n      width: 100%;\n      display: block;\n      text-align: center;\n      position: relative;\n      font-size: 18px;\n      z-index: 2;\n      font-weight: 600;\n    }\n    &:before {\n      display: block;\n      content: '';\n      width: 160px;\n      height: 160px;\n      background: #ebe7d6;\n      position: absolute;\n      border-radius: 100vh;\n      transition: 0.2s;\n      z-index: 1;\n      opacity: 0;\n    }\n    &:hover {\n      &:before {\n        width: 250px;\n        height: 250px;\n        opacity: 0.5;\n      }\n    }\n  }\n    ${BreakPoints.medium} {\n    a {\n      width: 200px;\n    }\n  }\n`\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** リンク先 */\n  idName?: string\n  /** ボタンラベル */\n  label?: string\n  /** 画像 */\n  fullImg?: string\n}\n\n/**\n * ギャラリー用ボタン\n */\nconst GalleryBtn = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={className}>\n      <a href={props.idName}>\n        <img\n          src={`/images/official/gallery/${props.fullImg}.png`}\n          alt=\"キンクラ画面\"\n        />\n        <span className=\"txt-size-26\">{props.label}</span>\n      </a>\n    </Wrapper>\n  )\n}\nexport default GalleryBtn\n","import styled from '@emotion/styled'\nimport React from 'react'\n\nconst Wrapper = styled.div`\n  &.modal-wrapper {\n    .modal-window {\n      padding-top: 0;\n      .modal-content {\n        display: flex;\n        position: relative;\n        h4 {\n          padding: 20px 0 10px;\n          position: fixed;\n          background: #ffffff;\n          width: calc(90vw - 60px);\n          max-width: 1200px;\n        }\n        img {\n          width: 100%;\n          height: 100%;\n          margin: 54px 0 0;\n          border: solid 2px #cccccc;\n        }\n      }\n    }\n  }\n`\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** ID名 */\n  idName?: string\n  /** ボタンラベル */\n  label?: string\n  /** 説明文 */\n  description?: string\n  /** 画像 */\n  fullImg?: string\n}\n\n/**\n * ギャラリー用コンテンツ\n */\nconst GalleryContent = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={`modal-wrapper${className}`} id={props.idName}>\n      <a href=\"#!\" className=\"modal-overlay\">\n        &nbsp;\n      </a>\n      <div className=\"modal-window\">\n        <div className=\"modal-content\">\n          {props.label ? <h4>{props.label}</h4> : ' '}\n          {props.fullImg && (\n            <img\n              src={`/images/official/gallery/${props.fullImg}.png`}\n              alt=\"キンクラ画面\"\n            />\n          )}\n          {props.description && <p>{props.description}</p>}\n        </div>\n        <a href=\"#!\" className=\"modal-close\">\n          ×\n        </a>\n      </div>\n    </Wrapper>\n  )\n}\nexport default GalleryContent\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  width: 100%;\n  text-align: center;\n  margin: 0 0 60px;\n\n  .h3 {\n    font-size: 2.5em;\n    margin: 0 0 20px;\n    white-space: pre-wrap;\n    font-weight: bold;\n  }\n\n  p {\n    white-space: pre-wrap;\n    font-weight: 600;\n    opacity: 0.6;\n  }\n\n  .p-h3-line {\n    width: 48px;\n    height: 4px;\n    margin: 20px auto;\n    position: relative;\n\n    &:before,\n    &:after {\n      display: block;\n      content: '';\n      position: absolute;\n      width: 4px;\n      height: 4px;\n      border-radius: 2px;\n      background: #3ec7b3;\n      top: 0;\n    }\n\n    &:after {\n      left: 8px;\n    }\n\n    span {\n      display: block;\n      background: #3ec7b3;\n      width: 32px;\n      margin-left: auto;\n      height: 4px;\n      border-radius: 2px;\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .h3 {\n      font-size: 2em;\n    }\n\n    margin: 0 auto 30px;\n    width: calc(100vw - 80px);\n    word-break: break-word;\n\n    p {\n      width: 70%;\n      margin: 0 auto;\n    }\n  }\n\n  ${BreakPoints.smallest} {\n    p {\n      width: 260px;\n    }\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** タイトル */\n  label?: string\n  /** 補足テキスト */\n  description?: string\n}\n\n/**\n * 共通H3タグ:h3→divタグへ変更\n * @param props\n * @constructor\n */\nconst OfficialCommonH3Set = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={className}>\n      <div className=\"h3\">{props.label}</div>\n      <p>{props.description}</p>\n      <div className=\"p-h3-line\">\n        <span />\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default OfficialCommonH3Set\n","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.section`\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  .btn-wrap {\n    position: relative;\n  }\n\n  .p-btn-download {\n    width: 470px;\n\n    p {\n      margin-right: 100px;\n    }\n  }\n\n  .img-wrap {\n    position: absolute;\n    width: 100%;\n    height: 120px;\n    bottom: 10px;\n    right: 3px;\n    border-radius: 42.5px;\n    overflow: hidden;\n    pointer-events: none;\n\n    img {\n      height: 84px;\n      border: 2px #01b5a6 solid;\n      position: absolute;\n      bottom: 0;\n      right: 10px;\n      transform: rotate(7deg);\n    }\n  }\n\n  .intro-wrap {\n    margin: 30px 0;\n\n    span {\n      background: linear-gradient(transparent 50%, #ffff7f 50%);\n      padding: 0 5px;\n    }\n  }\n`\n\n/**\n * サービスサイトCTAエリア\n * @constructor\n */\nconst OfficialDownloadCta = () => {\n  const routeParam = useRouteParam('/download')\n  return (\n    <Wrapper className=\"anim-fade-up left-in\">\n      <div className=\"p-cta-inner anim-fade-up delay-1\">\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=\"キンクラ\"\n            />\n          </div>\n          <div className=\"intro-wrap\">\n            <p>\n              <span>ほぼすべての画面</span>をまとめた資料をご用意しています\n            </p>\n          </div>\n          <div className=\"btn-wrap\">\n            <OfficialCommonBtn\n              size=\"mega\"\n              level=\"normal\"\n              className=\"p-btn-download\"\n              onClick={() => {\n                navigate(routeParam)\n              }}\n            >\n              <p>資料ダウンロード</p>\n            </OfficialCommonBtn>\n            <div className=\"img-wrap\">\n              <img\n                src=\"/images/official/feature/imgDownload03.png\"\n                alt=\"キンクラ\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default OfficialDownloadCta\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport GalleryBtn from '../atoms/galleryBtn'\nimport GalleryContent from '../atoms/galleryContent'\nimport OfficialCommonH3Set from '../molecules/officialCommonH3Set'\nimport OfficialDownloadCta from './officialDownloadCta';\n\nconst Wrapper = styled.section`\n  width: 100%;\n  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%2C%20.cls-3%20%7B%20fill%3A%20none%3B%20%7D%20.cls-1%20%7B%20stroke%3A%20%230000000a%3B%20%7D%20.cls-2%20%7B%20stroke%3A%20none%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_23613%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2023613%22%20class%3D%22cls-1%22%3E%20%3Crect%20class%3D%22cls-2%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%20%3Crect%20class%3D%22cls-3%22%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2211%22%20height%3D%2211%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');\n  background-repeat: repeat;\n  .p-section-inner {\n    max-width: 1024px;\n    padding: 60px 0 80px;\n    margin: 0 auto;\n    position: relative;\n    .p-section-gallery {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n  }\n\n  ${BreakPoints.large} {\n    .p-section-inner {\n      .p-section-gallery {\n      }\n    }\n  }\n`\n\n/**\n * サービスサイト下層特徴3\n * @constructor\n */\nconst OfficialLowGallery01 = () => (\n  <>\n    <Wrapper>\n      <div className=\"p-section-inner\">\n        <OfficialCommonH3Set\n          description=\"クリックで大きな画像をご確認いただけます\"\n          className=\"fade-in-auto\"\n        />\n        {/** サムネイルボタン */}\n        <div className=\"p-section-gallery fade-in-auto delay-3\">\n          <GalleryBtn label=\"打刻\" idName=\"#modal-01\" fullImg=\"thum01\" />\n          <GalleryBtn label=\"自社勤務表\" idName=\"#modal-02\" fullImg=\"thum02\" />\n          <GalleryBtn\n            label=\"常駐先勤務表\"\n            idName=\"#modal-03\"\n            fullImg=\"thum03\"\n          />\n          <GalleryBtn label=\"交通費精算\" idName=\"#modal-04\" fullImg=\"thum04\" />\n          <GalleryBtn\n            label=\"シフト（PC版）\"\n            idName=\"#modal-16\"\n            fullImg=\"thum16\"\n          />\n          <GalleryBtn\n            label=\"シフト（アプリ版）\"\n            idName=\"#modal-05\"\n            fullImg=\"thum05\"\n          />\n          <GalleryBtn label=\"残業申請\" idName=\"#modal-06\" fullImg=\"thum06\" />\n          <GalleryBtn\n            label=\"システムアラート\"\n            idName=\"#modal-07\"\n            fullImg=\"thum07\"\n          />\n          <GalleryBtn\n            label=\"代理申請機能\"\n            idName=\"#modal-17\"\n            fullImg=\"thum17\"\n          />\n          <GalleryBtn label=\"承認画面\" idName=\"#modal-08\" fullImg=\"thum08\" />\n          <GalleryBtn label=\"データ集計\" idName=\"#modal-09\" fullImg=\"thum09\" />\n          <GalleryBtn label=\"社員マスタ\" idName=\"#modal-10\" fullImg=\"thum10\" />\n          <GalleryBtn label=\"組織マスタ\" idName=\"#modal-11\" fullImg=\"thum11\" />\n          <GalleryBtn\n            label=\"承認ルール設定\"\n            idName=\"#modal-12\"\n            fullImg=\"thum12\"\n          />\n          <GalleryBtn label=\"36協定設定\" idName=\"#modal-13\" fullImg=\"thum13\" />\n          <GalleryBtn label=\"勤務地管理\" idName=\"#modal-14\" fullImg=\"thum14\" />\n          <GalleryBtn\n            label=\"アラート設定\"\n            idName=\"#modal-15\"\n            fullImg=\"thum15\"\n          />\n        </div>\n      </div>\n        <OfficialDownloadCta />\n    </Wrapper>\n\n    {/** GalleryBtnに対応したGalleryContentを配置する */}\n    <GalleryContent label=\"打刻\" idName=\"modal-01\" fullImg=\"thum01\" />\n    <GalleryContent label=\"自社勤務表\" idName=\"modal-02\" fullImg=\"thum02\" />\n    <GalleryContent label=\"常駐先勤務表\" idName=\"modal-03\" fullImg=\"thum03\" />\n    <GalleryContent label=\"交通費精算\" idName=\"modal-04\" fullImg=\"thum04\" />\n    <GalleryContent label=\"シフト（PC版）\" idName=\"modal-16\" fullImg=\"thum16\" />\n    <GalleryContent\n      label=\"シフト（アプリ版）\"\n      idName=\"modal-05\"\n      fullImg=\"thum05\"\n    />\n    <GalleryContent label=\"残業申請\" idName=\"modal-06\" fullImg=\"thum06\" />\n    <GalleryContent\n      label=\"システムアラート\"\n      idName=\"modal-07\"\n      fullImg=\"thum07\"\n    />\n    <GalleryContent label=\"承認画面\" idName=\"modal-08\" fullImg=\"thum08\" />\n    <GalleryContent label=\"データ集計\" idName=\"modal-09\" fullImg=\"thum09\" />\n    <GalleryContent label=\"社員マスタ\" idName=\"modal-10\" fullImg=\"thum10\" />\n    <GalleryContent label=\"組織マスタ\" idName=\"modal-11\" fullImg=\"thum11\" />\n    <GalleryContent label=\"承認ルール設定\" idName=\"modal-12\" fullImg=\"thum12\" />\n    <GalleryContent label=\"36協定設定\" idName=\"modal-13\" fullImg=\"thum13\" />\n    <GalleryContent label=\"勤務地管理\" idName=\"modal-14\" fullImg=\"thum14\" />\n    <GalleryContent label=\"アラート設定\" idName=\"modal-15\" fullImg=\"thum15\" />\n    <GalleryContent label=\"代理申請機能\" idName=\"modal-17\" fullImg=\"thum17\" />\n  </>\n)\n\nexport default OfficialLowGallery01\n","import styled from '@emotion/styled'\nimport { navigate } from 'gatsby-link'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport OfficialCommonH3Set from '../molecules/officialCommonH3Set'\nimport OfficialFaqItems from '../molecules/officialFaqItems'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  background: rgba(172, 216, 213, 0.4);\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    button {\n      display: flex;\n      margin: 60px auto 0;\n    }\n  }\n  ${BreakPoints.largest} {\n  }\n  ${BreakPoints.medium} {\n    .p-section-inner {\n      padding: 60px 0;\n    }\n  }\n`\n\n/**\n * サービスサイトTOPセクション04\n * よくあるご質問\n * @constructor\n */\nconst OfficialTopSection04 = () => {\n  const routeParam = useRouteParam('/service-faq')\n  return (\n    <Wrapper>\n      <div className=\"p-section-inner\">\n        <OfficialCommonH3Set label=\"よくあるご質問\" className=\"anim-fade-up\" />\n        <div className=\"p-section-faq anim-fade-up\">\n          <OfficialFaqItems\n            question=\"社員データを一括で登録したいのですが、可能ですか\"\n            answer=\"CSVでのインポートが可能です。大量の社員データを更新する場合もインポートにて一括変更が可能です。\"\n          />\n          <OfficialFaqItems\n            question=\"給与ソフトへの連携は対応していますか\"\n            answer=\"はい、対応しております。エクスポートの際、どのデータをエクスポートするのかを選択可能ですので、導入されている給与ソフトに合わせてエクスポートcsvを出力できます。\"\n          />\n          <OfficialFaqItems\n            question=\"試しに使ってみたいのですが、デモサイトはありますか\"\n            answer={\n              '無料トライアルからアカウントを作成していただくと、すぐに無料で利用が可能です。\\nユーザー数２０名以下の企業様は永久無料となり、費用発生の心配はございません。ユーザー権限にいくつかの種類がございますので、複数のユーザー様でのご利用をおすすめいたします。'\n            }\n          />\n        </div>\n        <OfficialCommonBtn\n          size=\"mega\"\n          className=\"anim-fade-up\"\n          onClick={() => {\n            navigate(routeParam)\n          }}\n        >\n          質問をもっと見る\n        </OfficialCommonBtn>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default OfficialTopSection04\n","import styled from '@emotion/styled'\nimport { graphql, PageProps } from 'gatsby'\nimport React from 'react'\nimport SEO from '../components/atoms/seo'\nimport OfficialLayout from '../components/organisms/officialLayout'\nimport OfficialLowGallery01 from '../components/organisms/officialLowGallery01'\nimport OfficialLowHeader from '../components/organisms/officialLowHeader'\nimport OfficialTopSection04 from '../components/organisms/officialTopSection04'\n\nconst Wrapper = styled.main``\n\ntype IProps = PageProps<GatsbyTypes.IndexPageQuery>\n\n/**\n * ギャラリーページ[サービスサイトギャラリー]\n * @constructor\n */\nconst GalleryPage = ({ location }: IProps) => (\n  <OfficialLayout location={location}>\n    <SEO title=\"ギャラリー\" />\n    <Wrapper>\n      <OfficialLowHeader\n        label=\"ギャラリー\"\n        description=\"いくつかの機能について画面イメージを公開しています。\"\n      />\n      <OfficialLowGallery01 />\n      <OfficialTopSection04 />\n    </Wrapper>\n  </OfficialLayout>\n)\n\nexport default GalleryPage\n\nexport const pageQuery = graphql`\n  query GalleryPage {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["Wrapper","BreakPoints","props","className","href","idName","src","fullImg","alt","label","id","description","routeParam","useRouteParam","size","level","onClick","navigate","question","answer","location","title"],"sourceRoot":""}