{"version":3,"file":"component---src-pages-feature-tsx-7344e9d42be4a06aa0d5.js","mappings":"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","sources":["webpack://beaver-help/./src/components/organisms/officialLowHeader.tsx","webpack://beaver-help/./src/components/organisms/officialLowFeature01.tsx","webpack://beaver-help/./src/components/organisms/officialLowFeature02.tsx","webpack://beaver-help/./src/components/organisms/officialLowFeature03.tsx","webpack://beaver-help/./src/pages/feature.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React, { ReactNode } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  position: relative;\n  background-image: url(/images/official/common/bgPublic02.png);\n  background-color: #ffffff;\n  background-size: cover;\n  border-bottom: solid 4px #dcdee1;\n\n  &:before,\n  &:after {\n    display: block;\n    content: '';\n    position: absolute;\n    width: 20%;\n    border-bottom: solid 4px #dcdee1;\n    bottom: -16px;\n  }\n\n  &:after {\n    right: 0;\n  }\n\n  .p-low-head-inner {\n    display: flex;\n    max-width: 1366px;\n    margin: 0 auto;\n    padding: 34px 0;\n    justify-content: center;\n\n    .p-inner-txt {\n      p {\n        font-weight: 800;\n        font-size: 2.5em;\n        text-align: center;\n        margin: 0 auto 20px;\n        white-space: pre-wrap;\n      }\n\n      h2 {\n        font-size: 1em;\n        font-weight: 400;\n        margin: 0 auto 10px;\n        text-align: center;\n        width: calc(100vw - 80px);\n      }\n    }\n  }\n\n  ${BreakPoints.largest} {\n  }\n\n  ${BreakPoints.medium} {\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** タイトル */\n  label?: string\n  /** 補足テキスト */\n  description?: string\n  /** 内容（画像） */\n  children?: ReactNode\n}\n\n/**\n * サービスサイト下層用ヘッダー\n * @param props\n * @constructor\n */\nconst OfficialLowHeader = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={className}>\n      <div className=\"p-low-head-inner\">\n        <div className=\"p-inner-txt\">\n          {props.label && <p>{props.label}</p>}\n          {props.description && <h2>{props.description}</h2>}\n          {props.children}\n        </div>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default OfficialLowHeader\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\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: 1200px;\n    padding: 100px 0 30px;\n    margin: 0 auto;\n    position: relative;\n    .p-section-feature {\n      display: flex;\n      width: 100%;\n      max-width: 840px;\n      margin: 0 auto 70px;\n      padding: 45px 45px 40px;\n      background: #d7f2ed;\n      position: relative;\n      border-radius: 10px;\n      border: solid 3px #748681;\n      box-shadow: 5px 5px 0 #ffee81;\n      .img-wrap {\n        position: absolute;\n        bottom: 0;\n      }\n      .txt-wrap {\n        width: min-content;\n        text-align: center;\n        .label-txt {\n          width: 468px;\n          height: 60px;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background: #ffffff;\n          margin: 0 0 30px;\n        }\n        .detail-txt {\n          font-weight: 600;\n          opacity: 0.9;\n          line-height: 1.7;\n        }\n      }\n      &.strong01 {\n        margin-left: 0;\n        .img-wrap {\n          position: absolute;\n          width: 240px;\n          left: 40px;\n        }\n        .txt-wrap {\n          margin: 0 0 0 auto;\n        }\n      }\n      &.strong02 {\n        .img-wrap {\n          position: absolute;\n          width: 240px;\n          right: 30px;\n        }\n        .txt-wrap {\n          margin: 0 auto 0 0;\n        }\n      }\n      &.strong03 {\n        margin-right: 0;\n        .img-wrap {\n          position: absolute;\n          width: 320px;\n          left: 30px;\n          bottom: 30px;\n        }\n        .txt-wrap {\n          margin: 0 0 0 auto;\n          width: 468px;\n          .label-txt {\n            width: 388px;\n            height: 60px;\n            margin-left: auto;\n            margin-right: 30px;\n          }\n        }\n      }\n    }\n    .foot-copy {\n      margin-top: 80px;\n    }\n  }\n  ${BreakPoints.large} {\n    .p-section-inner {\n      max-width: calc(100vw - 40px);\n      margin: 0 auto;\n      &:after {\n      }\n      .p-section-feature {\n        width: calc(100vw - 40px);\n        padding: 20px 10px;\n        .img-wrap {\n        }\n        .txt-wrap {\n          .label-txt {\n          }\n        }\n        &.strong01 {\n          margin: 0 auto 40px;\n          .img-wrap {\n            width: 26vw;\n            left: 2vw;\n          }\n          .txt-wrap {\n          }\n        }\n        &.strong02 {\n          margin: 0 auto 40px;\n          .img-wrap {\n            width: 27vw;\n            right: 2vw;\n          }\n          .txt-wrap {\n            margin: 0 auto 0 0;\n          }\n        }\n        &.strong03 {\n          margin: 0 auto 40px;\n          .img-wrap {\n            width: 32vw;\n            bottom: 15vw;\n            left: 1vw;\n          }\n          .txt-wrap {\n            .label-txt {\n            }\n          }\n        }\n      }\n      .foot-copy {\n      }\n    }\n  }\n  ${BreakPoints.medium} {\n    .p-section-inner {\n      padding: 60px 0;\n      .p-section-feature {\n        width: calc(100vw - 40px);\n        padding: 20px 10px;\n        .img-wrap {\n          z-index: 3;\n        }\n        .txt-wrap {\n          position: relative;\n          z-index: 2;\n          margin: 0 auto;\n          width: 100%;\n          .label-txt {\n            margin: 0 auto 15px;\n            width: 100%;\n            border-radius: 5px;\n            font-size: 1.325em;\n          }\n        }\n        &.strong01 {\n          .img-wrap {\n            width: 90px;\n            bottom: 60%;\n            left: 16px;\n          }\n          .txt-wrap {\n          }\n        }\n        &.strong02 {\n          .img-wrap {\n            width: 90px;\n            right: 10px;\n            bottom: 60%;\n          }\n          .txt-wrap {\n          }\n        }\n        &.strong03 {\n          .img-wrap {\n            width: 90px;\n            bottom: 60%;\n            left: 16px;\n          }\n          .txt-wrap {\n            width: 100%;\n            .label-txt {\n              width: 100%;\n            }\n          }\n        }\n      }\n      .foot-copy {\n        margin-top: 60px;\n      }\n    }\n  }\n  ${BreakPoints.small} {\n    .p-section-inner {\n      padding-bottom: 5px;\n      .p-section-feature {\n        .img-wrap {\n        }\n        .txt-wrap {\n          br {\n            display: none;\n          }\n          .label-txt {\n          }\n        }\n        &.strong01 {\n          .img-wrap {\n            display: none;\n          }\n          .txt-wrap {\n            .label-txt {\n            }\n          }\n        }\n        &.strong02 {\n          .img-wrap {\n            display: none;\n          }\n          .txt-wrap {\n            .label-txt {\n            }\n          }\n        }\n        &.strong03 {\n          .img-wrap {\n            display: none;\n          }\n          .txt-wrap {\n            .label-txt {\n            }\n          }\n        }\n      }\n    }\n  }\n`\n\n/**\n * サービスサイト下層特徴1\n * @constructor\n */\nconst OfficialLowFeature01 = () => (\n  <Wrapper>\n    <div className=\"p-section-inner\">\n      {/** 特徴1 */}\n      <div className=\"p-section-feature strong01 fade-in-auto\">\n        <img\n          src=\"/images/official/feature/imgLowFeature02.png\"\n          alt=\"キンクラはすぐに導入&amp;利用開始できる！\"\n          className=\"img-wrap\"\n          placeholder=\"none\"\n        />\n        <div className=\"txt-wrap\">\n          <h4 className=\"label-txt txt-size-26 txt-bold-orange\">\n            すぐに導入&amp;利用開始できる！\n          </h4>\n          <div className=\"detail-txt\">\n            キンクラの導入には初期費用ゼロ、専用機器も不要。\n            <br />\n            たったの1分でスマホとPCからいつでもアクセス可能な\n            <br />\n            貴社だけのクラウド型勤怠管理システムの利用を開始できます。\n          </div>\n        </div>\n      </div>\n\n      {/** 特徴2 */}\n      <div className=\"p-section-feature strong02 fade-in-auto\">\n        <img\n          src=\"/images/official/feature/imgLowFeature03.png\"\n          alt=\"キンクラはリアルタイムに情報を把握\"\n          className=\"img-wrap\"\n          placeholder=\"none\"\n        />\n        <div className=\"txt-wrap\">\n          <h4 className=\"label-txt txt-size-26 txt-bold-orange\">\n            リアルタイムに情報を把握\n          </h4>\n          <div className=\"detail-txt\">\n            出社・常駐先・リモートワークなど当日の勤務地は <br />\n            打刻する際に登録されるため、社員の勤務状況を <br />\n            キンクラを通じてリアルタイムに確認できます。\n          </div>\n        </div>\n      </div>\n\n      {/** 特徴3 */}\n      <div className=\"p-section-feature strong03 anim-fade-up is-show\">\n        <img\n          src=\"/images/official/feature/imgLowFeature04.png\"\n          alt=\"キンクラで詳細な承認ルール設定\"\n          className=\"img-wrap\"\n          placeholder=\"none\"\n        />\n        <div className=\"txt-wrap\">\n          <h4 className=\"label-txt txt-size-26 txt-bold-orange\">\n            詳細な承認ルール設定\n          </h4>\n          <div className=\"detail-txt\">\n            申請の種類ごとに最大5段階の承認ルールを設定可能です。\n            <br />\n            承認ルールはグループ単位で設定できるから\n            <br />\n            部署によって複雑でバラバラなワークフローでも大丈夫。\n            <br />\n            承認画面ではどの段階で誰が対応中なのかも確認できます。\n          </div>\n        </div>\n      </div>\n    </div>\n  </Wrapper>\n)\n\nexport default OfficialLowFeature01\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  background-image: url(/images/official/feature/bgFeature05.png);\n  background-size: contain;\n  background-repeat: repeat;\n  background-position-y: center;\n  background-color: #fbfbfb;\n  .p-section-inner {\n    max-width: 1366px;\n    padding: 80px 0;\n    margin: 0 auto;\n    position: relative;\n    .p-section-feature {\n      width: 100%;\n      margin: 0 auto;\n      position: relative;\n      ul {\n        display: flex;\n        width: 100%;\n        flex-wrap: wrap;\n        justify-content: space-around;\n        .txt-wrap {\n          width: 340px;\n          min-width: 340px;\n          height: 378px;\n          white-space: pre-wrap;\n          background-image: url(/images/official/feature/bgFeature04.png);\n          background-size: contain;\n          background-position: bottom;\n          text-align: center;\n          margin: 0 20px;\n          .label-txt {\n            margin: 20px 0 30px;\n          }\n          p {\n            margin: 0 15px;\n            font-weight: 600;\n            line-height: 1.6;\n          }\n        }\n      }\n    }\n  }\n  ${BreakPoints.largest} {\n  }\n  ${BreakPoints.medium} {\n  }\n`\n\n/**\n * サービスサイト下層特徴4\n * @constructor\n */\nconst OfficialLowFeature02 = () => (\n  <Wrapper>\n    <div className=\"p-section-inner\">\n      <p className=\"foot-copy txt-center txt-size-26 txt-bold anim-fade-up mb-040\">\n        「効率が上がった」「楽になった」等の声が寄せられています\n      </p>\n      <div className=\"p-section-feature\">\n        <ul>\n          <li className=\"txt-wrap anim-fade-up\">\n            <h5 className=\"label-txt txt-size-26 txt-bold-green\">\n              データ管理工数激減！\n            </h5>\n            <p>\n              毎月提出される勤務表の数が膨大で\n              <br />\n              保存するのも一苦労だったのが\n              <br />\n              キンクラを利用することで\n              <br />\n              ファイル保存の作業が無くなりました。\n              <br />\n              <br />\n              勝手に個人ごとに分けて管理されるので\n              <br />\n              勤務データを確認したい時も\n              <br />\n              欲しい情報がすぐに見つけれられます。\n            </p>\n          </li>\n          <li className=\"txt-wrap anim-fade-up\">\n            <h5 className=\"label-txt txt-size-26 txt-bold-green\">\n              アラートで事前察知\n            </h5>\n            <p>\n              36協定の警告基準に達した段階で\n              <br />\n              アラートが通知されるので\n              <br />\n              残業時間が増えている社員を\n              <br />\n              日々一人ひとりチェックする\n              <br />\n              必要がなくなりました。\n              <br />\n              <br />\n              6ヵ月平均の残業時間など\n              <br />\n              見落としがちだった勤務状況のアラートも\n              <br />\n              設定できるので助かっています。\n            </p>\n          </li>\n          <li className=\"txt-wrap anim-fade-up\">\n            <h5 className=\"label-txt txt-size-26 txt-bold-green\">\n              人為的ミス軽減\n            </h5>\n            <p>\n              給与計算のたびに手作業で <br />\n              勤務表からコピぺしていたのが <br />\n              エクスポートしたCSVを使えば <br />\n              一発で給与ソフトに入力されるので <br />\n              数字の打ち間違いがなくなりました <br />\n              <br />\n              提出される勤務表は打刻情報をもとに <br />\n              自動で生成されるので <br />\n              従業員の記入ミスも減りました。\n            </p>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </Wrapper>\n)\n\nexport default OfficialLowFeature02\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonH3Set from '../molecules/officialCommonH3Set'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  background-image: url(/images/official/feature/bgSecurity01.png);\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center top;\n  .p-section-inner {\n    max-width: 1080px;\n    padding: 80px 0;\n    margin: 0 auto;\n    position: relative;\n    .p-section-feature {\n      width: 100%;\n      padding: 60px;\n      background: rgba(255, 255, 255, 0.85);\n      border-radius: 10px;\n      margin: 0 auto;\n      position: relative;\n      .security-area {\n        display: inline-block;\n        width: 50%;\n        overflow: hidden;\n        .img-wrap {\n          float: left;\n          img {\n            width: 150px;\n            margin-right: 15px;\n          }\n        }\n        .txt-wrap {\n          font-weight: 600;\n          p {\n            margin-bottom: 25px;\n            color: #2074d6;\n          }\n        }\n        &.part-01 {\n          padding: 10px 20px 50px 5px;\n          border-right: solid 1px #dcdee1;\n          border-bottom: solid 1px #dcdee1;\n        }\n        &.part-02 {\n          padding: 10px 5px 50px 40px;\n          border-bottom: solid 1px #dcdee1;\n        }\n        &.part-03 {\n          padding: 50px 20px 10px 5px;\n          border-right: solid 1px #dcdee1;\n        }\n        &.part-04 {\n          padding: 50px 5px 10px 40px;\n        }\n      }\n    }\n  }\n  ${BreakPoints.xxLarge} {\n    .p-section-inner {\n      width: 96vw;\n      .p-section-feature {\n        padding: 20px;\n        .security-area {\n          display: inline-flex;\n          flex-wrap: wrap;\n          justify-content: center;\n          text-align: center;\n          padding: 20px !important;\n          height: 330px;\n          .img-wrap {\n            float: unset;\n            width: 100%;\n            img {\n              margin-right: 0;\n            }\n          }\n          .txt-wrap {\n            width: 100%;\n            p {\n            }\n          }\n          &.part-01 {\n          }\n          &.part-02 {\n          }\n          &.part-03 {\n          }\n          &.part-04 {\n          }\n        }\n      }\n    }\n  }\n  ${BreakPoints.medium} {\n    .p-section-inner {\n      padding: 60px 0 30px;\n      .p-section-feature {\n        padding-bottom: 0;\n        .security-area {\n          display: flex;\n          width: 100%;\n          border: none !important;\n          border-bottom: solid 1px #dcdee1 !important;\n          .img-wrap {\n            img {\n            }\n          }\n          .txt-wrap {\n            p {\n            }\n          }\n          &.part-01 {\n          }\n          &.part-02 {\n          }\n          &.part-03 {\n          }\n          &.part-04 {\n          }\n          &:last-child {\n            border: none !important;\n          }\n        }\n      }\n    }\n  }\n`\n\n/**\n * サービスサイト下層特徴3\n * セキュリティ\n * @constructor\n */\nconst OfficialLowFeature03 = () => (\n  <Wrapper>\n    <div className=\"p-section-inner\">\n      <OfficialCommonH3Set\n        label=\"安心のセキュリティ\"\n        description=\"お預かりしているデータの安全性を確保する万全なセキュリティ体制を整えています\"\n        className=\"anim-fade-up\"\n      />\n      <div className=\"p-section-feature anim-fade-up\">\n        <div className=\"security-area part-01\">\n          <div className=\"img-wrap\">\n            <img\n              src=\"/images/official/feature/iconSecurity02.png\"\n              alt=\"情報資産の管理\"\n            />\n          </div>\n          <div className=\"txt-wrap\">\n            <p className=\"txt-size-26\">情報資産の管理</p>\n            重要な情報は暗号化して保存。\n            <br />\n            万一障害発生時もデータは\n            <br />\n            バックアップされているので安心です。\n          </div>\n        </div>\n        <div className=\"security-area part-02\">\n          <div className=\"img-wrap\">\n            <img\n              src=\"/images/official/feature/iconSecurity01.png\"\n              alt=\"通信の暗号化\"\n            />\n          </div>\n          <div className=\"txt-wrap\">\n            <p className=\"txt-size-26\">通信の暗号化</p>\n            ネットワーク通信はSSLで暗号化。\n            <br />\n            盗聴・漏えい等の脅威に対し\n            <br />\n            データの機密性を確保しています。\n          </div>\n        </div>\n        <div className=\"security-area part-03\">\n          <div className=\"img-wrap\">\n            <img\n              src=\"/images/official/feature/iconSecurity03.png\"\n              alt=\"ISMS認証\"\n            />\n          </div>\n          <div className=\"txt-wrap\">\n            <p className=\"txt-size-26\">ISMS認証</p>\n            ISMS認証（ISO27001）と <br />\n            プライバシーマークを取得した <br />\n            企業がキンクラを開発・運営\n          </div>\n        </div>\n        <div className=\"security-area part-04\">\n          <div className=\"img-wrap\">\n            <img\n              src=\"/images/official/feature/iconSecurity04.png\"\n              alt=\"脆弱性診断クリア\"\n            />\n          </div>\n          <div className=\"txt-wrap\">\n            <p className=\"txt-size-26\">脆弱性診断クリア</p>\n            キンクラは第三者企業による <br />\n            脆弱性診断をクリアしています。\n          </div>\n        </div>\n      </div>\n    </div>\n  </Wrapper>\n)\n\nexport default OfficialLowFeature03\n","import styled from '@emotion/styled'\nimport { graphql, PageProps } from 'gatsby'\nimport React from 'react'\nimport SEO from '../components/atoms/seo'\nimport OfficialGalleryBtnSet from '../components/molecules/officialGalleryBtnSet'\nimport OfficialLayout from '../components/organisms/officialLayout'\nimport OfficialLowFeature01 from '../components/organisms/officialLowFeature01'\nimport OfficialLowFeature02 from '../components/organisms/officialLowFeature02'\nimport OfficialLowFeature03 from '../components/organisms/officialLowFeature03'\nimport OfficialLowHeader from '../components/organisms/officialLowHeader'\nimport OfficialNewFunctionItem from '../components/organisms/officialNewFunctionItem'\n\nconst Wrapper = styled.main`\n  .no-arrow {\n    margin-bottom: 0 !important;\n\n    &:after {\n      display: none !important;\n    }\n  }\n`\n\ntype IProps = PageProps<GatsbyTypes.IndexPageQuery>\n\n/**\n * 特徴ページ[サービスサイト特徴]\n * @constructor\n */\nconst FeaturePage = ({ location }: IProps) => (\n  <OfficialLayout location={location} className=\"p-page-feature\">\n    <SEO title=\"特徴\" />\n    <Wrapper>\n      <OfficialLowHeader\n        label=\"特徴\"\n        description=\"クラウド型勤怠管理システムのキンクラだからおすすめできることがあります。\"\n      />\n      <OfficialLowFeature01 />\n      <OfficialLowFeature02 />\n      <OfficialGalleryBtnSet />\n      <OfficialLowFeature03 />\n      <OfficialNewFunctionItem className=\"no-arrow\" />\n    </Wrapper>\n  </OfficialLayout>\n)\n\nexport default FeaturePage\n\nexport const pageQuery = graphql`\n  query FeaturePage {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["Wrapper","BreakPoints","props","className","label","description","children","src","alt","placeholder","location","title"],"sourceRoot":""}