{"version":3,"file":"component---src-pages-function-request-expense-tsx-c542a2ba3d75250afda0.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/updateInfoBnr.tsx","webpack://beaver-help/./src/components/molecules/officialCommonH3Set.tsx","webpack://beaver-help/./src/components/organisms/ses-managementHowtoButtonLabel.tsx","webpack://beaver-help/./src/components/organisms/ses-managementHowtoLabel.tsx","webpack://beaver-help/./src/components/atoms/pageBottomArrowSvg.tsx","webpack://beaver-help/./src/components/organisms/expense/requestExpenseTop01.tsx","webpack://beaver-help/./src/components/organisms/expense/requestExpenseFeature01.tsx","webpack://beaver-help/./src/components/organisms/expense/functionPopupCard.tsx","webpack://beaver-help/./src/components/organisms/expense/functionPopupContent.tsx","webpack://beaver-help/./src/components/organisms/expense/requestExpenseFunction01.tsx","webpack://beaver-help/./src/components/atoms/crownSvg.tsx","webpack://beaver-help/./src/components/organisms/expense/requestExpenseReason01.tsx","webpack://beaver-help/./src/components/organisms/expense/requestExpenseOptionPriceTable.tsx","webpack://beaver-help/./src/components/organisms/expense/requestExpenseOptionPrice.tsx","webpack://beaver-help/./src/components/organisms/expense/requestExpenseHowto.tsx","webpack://beaver-help/./src/components/organisms/expense/requestExpenseFaq.tsx","webpack://beaver-help/./src/pages/function/request-expense.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\n\nexport const Wrapper = styled.div`\n  display: block;\n  max-width: 480px;\n  margin: 0 30px;\n  width: 50vw;\n\n  a {\n    transition: 0.3s;\n    display: block;\n    width: 100%;\n\n    img {\n      filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));\n      width: 100%;\n    }\n\n    &:hover {\n      transform: scale(1.05);\n      opacity: 1;\n      transition: 0.6s;\n    }\n  }\n`\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** リンク先 */\n  idName?: string\n}\n\n/**\n * アップデート情報バナー\n */\nconst UpdateInfoBnr = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={`function-banner${className}`}>\n      <a href={props.idName}>\n        <img\n          src=\"/images/official/feature/bnrTopUpdateVer02.png\"\n          alt=\"ver2.0アップデート情報\"\n        />\n      </a>\n    </Wrapper>\n  )\n}\nexport default UpdateInfoBnr\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 React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.section`\n  display: inline-block;\n  font-weight: bold;\n  text-align: center;\n  color: #ffffff;\n  background-color: #3ec7b3;\n  border: 2px solid #8bdcd0;\n  width: fit-content;\n  padding: 3px 20px;\n  border-radius: 8px;\n  margin: 0 5px;\n\n  ${BreakPoints.medium} {\n  }\n  ${BreakPoints.smallest} {\n  }\n`\n\ntype Props = {\n  /** タイトル */\n  label: string\n}\n\n/**\n * 代理申請機能紹介ページ-利用方法ラベル\n * @constructor\n */\n\nconst SesManagementHowtoButtonLabel = (props: Props): JSX.Element => {\n  const { label = '' } = props\n\n  return (\n    <Wrapper>\n      <p>{label}</p>\n    </Wrapper>\n  )\n}\n\nexport default SesManagementHowtoButtonLabel\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.section`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  font-weight: bold;\n  text-align: start;\n  color: #ffffff;\n\n  h1 {\n    font-size: 40px;\n    margin-top: -3px;\n  }\n\n  h3 {\n    font-size: 24px;\n  }\n\n  .number-area {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: #1cb98f;\n    border-radius: 50%;\n    height: 60px;\n    width: 60px;\n  }\n\n  .label-area {\n    padding: 0 15px;\n    margin-left: -10px;\n    background-color: #1cb98f;\n    position: relative;\n    height: 44px;\n    line-height: 42px;\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: -22.9px;\n      border: 22px solid transparent;\n      border-left: 23px solid #1cb98f;\n      border-right: none;\n    }\n\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: -0.7px;\n      border: 22px solid #1cb98f;\n      border-right: none;\n      z-index: -1;\n    }\n  }\n\n  ${BreakPoints.medium} {\n    h1 {\n      font-size: 30px;\n      margin-top: -3px;\n    }\n\n    h3 {\n      font-size: 16px;\n    }\n\n    .number-area {\n      height: 40px;\n      width: 40px;\n    }\n\n    .label-area {\n      height: 30px;\n      line-height: 30px;\n\n      &:before {\n        right: -16.9px;\n        border: 15px solid transparent;\n        border-left: 17px solid #1cb98f;\n        border-right: none;\n      }\n\n      &:after {\n        border: 15px solid #1cb98f;\n      }\n    }\n  }\n\n  ${BreakPoints.smallest} {\n  }\n`\n\ntype Props = {\n  // /** クラス名 */\n  // className?: string\n  /** 番号 */\n  number: string\n  /** タイトル */\n  label: string\n}\n\n/**\n * 代理申請機能紹介ページ-利用方法ラベル\n * @constructor\n */\n\nconst SesManagementHowtoLabel = (props: Props): JSX.Element => {\n  const { number, label = '' } = props\n\n  return (\n    <Wrapper>\n      <div className=\"number-area\">\n        <h1>{number}</h1>\n      </div>\n      <div className=\"label-area\">\n        <h3>{label}</h3>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default SesManagementHowtoLabel\n","import styled from '@emotion/styled'\nimport React from 'react'\n\nconst Wrapper = styled.div`\n  padding: 0;\n  fill: #addaff;\n`\n\n/**\n * SVGアイコンコンポーネント\n * 製品サイトページ下部遷移用矢印アイコン\n */\nconst PageBottomArrowSvg = (): JSX.Element => (\n  <Wrapper>\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"144\"\n      height=\"54\"\n      viewBox=\"0 0 144 54\"\n    >\n      <path\n        id=\"多角形_40\"\n        data-name=\"多角形 40\"\n        d=\"M72,0l72,54H0Z\"\n        transform=\"translate(144 54) rotate(180)\"\n        stroke=\"none\"\n      />\n    </svg>\n  </Wrapper>\n)\nexport default PageBottomArrowSvg\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../../styles/breakPoints'\nimport PageBottomArrowSvg from '../../atoms/pageBottomArrowSvg'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  margin-bottom: 50px;\n\n  .p-section-inner {\n    max-width: 1200px;\n    padding: 80px 0 0;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    .p-section-function {\n      padding: 30px 60px 30px 60px;\n      background: #ffffff;\n      border-radius: 10px;\n      width: 100%;\n      max-width: 1092px;\n      margin: 0 auto 60px;\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n  }\n\n  .catch {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    position: relative;\n    width: fit-content;\n    margin-bottom: 30px;\n\n    .catch-top {\n      color: #003777;\n      font-weight: bold;\n      font-size: 30px;\n      width: fit-content;\n\n      span {\n        width: fit-content;\n        background: #004098;\n        padding: 0 34px;\n        height: 74px;\n        margin: 0 10px;\n        border-radius: 100vh;\n        color: #fff;\n        position: relative;\n      }\n    }\n\n    .catch-bottom {\n      color: #004098;\n      font-weight: bold;\n      font-size: 43px;\n      width: fit-content;\n\n      span {\n        background: linear-gradient(transparent 70%, rgb(255, 255, 102) 70%);\n        padding: 0 5px;\n        font-size: 60px;\n      }\n    }\n  }\n\n  .item-wrap {\n    width: 100%;\n    overflow: hidden;\n    padding-right: 120px;\n\n    .worries {\n      float: left;\n      background: #efefef;\n      border-radius: 8px;\n      padding: 20px 30px;\n      color: #272d2c;\n      font-size: 22px;\n      font-weight: bold;\n      height: 110px;\n      margin-right: 20px;\n      margin-bottom: 20px;\n      text-align: left;\n\n      span {\n        font-size: 26px;\n        color: #dd4834;\n      }\n    }\n\n    .worries-etc {\n      margin-top: 35px;\n      height: 75px;\n    }\n  }\n\n  .worries-bottom {\n    width: 100%;\n    text-align: left;\n  }\n\n  .worries-img {\n    position: absolute;\n    width: 50vw;\n    max-width: 400px;\n    right: -30px;\n    bottom: 20px;\n  }\n\n  ${BreakPoints.xLarge} {\n    margin-bottom: 20px;\n\n    .p-section-inner {\n      padding: 40px 0 0;\n\n      .p-section-function {\n        padding: 30px 20px;\n        margin: 0 auto 30px;\n      }\n    }\n\n    .catch {\n      margin-bottom: 30px;\n\n      .catch-top {\n        font-size: 24px;\n\n        span {\n          padding: 0 20px;\n          margin: 0 5px;\n        }\n      }\n\n      .catch-bottom {\n        font-size: 28px;\n\n        span {\n          font-size: 40px;\n        }\n      }\n    }\n\n    .item-wrap {\n      padding-right: 0;\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      align-items: flex-end;\n      gap: 15px;\n      margin-bottom: 20px;\n      width: 100%;\n\n      .worries {\n        float: unset;\n        width: auto;\n        margin: 0;\n        padding: 15px 20px;\n        font-size: 18px;\n        height: auto;\n\n        span {\n          font-size: 22px;\n        }\n      }\n\n      .worries-etc {\n        margin-top: 0;\n        height: 75px;\n      }\n    }\n\n    .worries-bottom {\n      text-align: center;\n    }\n\n    .worries-img {\n      display: none;\n    }\n  }\n\n  ${BreakPoints.medium} {\n  }\n`\n\n/**\n * 経費精算-お困りごと解決\n * @constructor\n */\nconst RequestExpenseTop01 = () => (\n  <Wrapper>\n    <div className=\"p-section-inner\">\n      <div className=\"p-section-function\">\n        {/** キャッチ部分 */}\n        <div className=\"catch\">\n          <div className=\"catch-top\">\n            このような<span>経費精算</span>に関する\n          </div>\n          <div className=\"catch-bottom\">\n            お困りごとを<span>一気に解決！</span>\n          </div>\n        </div>\n        {/** 事例 */}\n        <div className=\"item-wrap\">\n          <div className=\"worries worries-0\">\n            紙の領収書の\n            <br />\n            <span>保管が大変</span>\n          </div>\n          <div className=\"worries worries-02\">\n            入力作業に\n            <span>\n              時間を\n              <br />\n              取られている\n            </span>\n          </div>\n          <div className=\"worries worries-02\">\n            支社・遠隔地の社員の\n            <br />\n            経費も\n            <span>一括管理したい</span>\n          </div>\n          <div className=\"worries worries-02\">\n            領収書の提出のための\n            <br />\n            <span>出社を無くしたい</span>\n          </div>\n          <div className=\"worries worries-02\">\n            <span>ペーパーレス化</span>を\n            <br />\n            進めたい\n          </div>\n          <div className=\"worries worries-etc\">etc...</div>\n        </div>\n        <div className=\"worries-bottom\">\n          自社・在宅・客先常駐など勤務体系を問わずに一括管理できる\n          <br />\n          便利な経費精算システムです。\n          <br />\n          紙での管理の不安や、紙での作業を煩わしく感じている皆さまをサポートします。\n        </div>\n      </div>\n      <img\n        className=\"worries-img\"\n        src=\"/images/official/function/expense/expenseFunctionWorries01.png\"\n        alt=\"経費精算のお悩み\"\n      />\n    </div>\n    <div className=\"text-center\">\n      <PageBottomArrowSvg />\n    </div>\n  </Wrapper>\n)\n\nexport default RequestExpenseTop01\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../../styles/breakPoints'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  padding: 50px 0;\n  background-image: url(/images/official/function/expense/expenseFunctionFeatureBg01.png);\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center top;\n\n  .p-section-inner {\n    max-width: 1200px;\n    padding: 40px 40px 30px;\n    margin: 0 auto;\n    border-radius: 10px;\n    border: solid 2px #ffffff;\n    text-align: center;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    background-image: url(/images/official/function/expense/expenseFunctionFeatureBg02.png);\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: center top;\n\n    .title {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex-direction: column;\n      position: relative;\n      width: 100%;\n      max-width: 1000px;\n      margin-bottom: 30px;\n      text-shadow: -1px -3px 3px #ffffff;\n\n      .title-top {\n        color: #004098;\n        font-weight: bold;\n        font-size: 75px;\n        width: fit-content;\n\n        span {\n          font-size: 34px;\n          display: block;\n          margin: -15px 0 0;\n        }\n      }\n\n      &:before,\n      &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        width: calc((100% - 300px) / 2);\n        height: 10px;\n        left: 0;\n        top: 50%;\n        border-radius: 2px;\n        background: #ffda41;\n        z-index: 0;\n      }\n\n      &:after {\n        left: unset;\n        right: 0;\n      }\n    }\n\n    .p-section-function {\n      padding: 30px 40px;\n      background: #ffffff;\n      border-radius: 10px;\n      width: 100%;\n      max-width: 1000px;\n      margin: 0 auto 20px;\n      display: flex;\n      flex-wrap: wrap;\n      flex-direction: column;\n      align-items: flex-start;\n\n      .feature-area {\n        display: flex;\n        margin: 0 0 10px 0;\n        justify-content: flex-start;\n        align-items: center;\n\n        .img-wrap {\n          img {\n            width: 30px;\n            height: auto;\n            margin: 6px 10px 0 0;\n          }\n        }\n\n        .txt-wrap {\n          font-weight: 600;\n          color: #272d2c;\n          font-size: 28px;\n        }\n      }\n\n      .detail {\n        font-size: 20px;\n        text-align: left;\n\n        span {\n          background: linear-gradient(transparent 60%, rgb(255, 255, 102) 60%);\n          padding: 0 5px;\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.xLarge} {\n    padding: 0;\n\n    .p-section-inner {\n      padding: 20px 20px 10px;\n      border-radius: 10px;\n\n      .title {\n        margin-bottom: 15px;\n\n        .title-top {\n          font-size: 45px;\n\n          span {\n            font-size: 18px;\n            margin: -8px 0 0;\n          }\n        }\n\n        &:before,\n        &:after {\n          width: calc((100% - 180px) / 2);\n          height: 5px;\n        }\n      }\n\n      .p-section-function {\n        padding: 10px 20px;\n        width: 90vw;\n        margin: 0 auto 15px;\n\n        .feature-area {\n          .img-wrap {\n            img {\n              width: 20px;\n            }\n          }\n\n          .txt-wrap {\n            font-size: 22px;\n            text-align: left;\n          }\n        }\n\n        .detail {\n          font-size: 14px;\n\n          span {\n            background: linear-gradient(\n              transparent 60%,\n              rgb(255, 255, 102) 60%\n            );\n            padding: 0 5px;\n          }\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.medium} {\n  }\n`\n\n/**\n * 案件管理機能紹介ページ-最上部キャッチ\n * @constructor\n */\nconst RequestExpenseFeature01 = () => (\n  <Wrapper>\n    <div className=\"p-section-inner fade-in-auto delay-3\">\n      <div className=\"title\">\n        <div className=\"title-top\">\n          特長<span>キンクラ経費精算</span>\n        </div>\n      </div>\n      {/** 特長 */}\n      <div className=\"p-section-function\">\n        <div className=\"feature-area\">\n          <p className=\"img-wrap\">\n            <img\n              src=\"/images/official/function/expense/expenseFunctionFeatureCheck01.png\"\n              alt=\"よくあるお悩み\"\n              className=\"img-wrap\"\n            />\n          </p>\n          <p className=\"txt-wrap txt-size-26\">\n            シンプルな機能で、導入・利用が簡単！\n          </p>\n        </div>\n        <div className=\"detail\">\n          複雑になりがちな経費精算システムを、必要最低限の機能で\n          <span>簡単に利用が開始できます。</span>\n        </div>\n      </div>\n      {/** 特長 */}\n      <div className=\"p-section-function\">\n        <div className=\"feature-area\">\n          <p className=\"img-wrap\">\n            <img\n              src=\"/images/official/function/expense/expenseFunctionFeatureCheck01.png\"\n              alt=\"キンクラ経費精算の特長\"\n              className=\"img-wrap\"\n            />\n          </p>\n          <p className=\"txt-wrap txt-size-26\">\n            勤怠管理と経費精算両方使えて、追加料金０円\n          </p>\n        </div>\n        <div className=\"detail\">\n          勤務表と交通費の提出等の勤怠管理だけではなく\n          <br />\n          案件管理と経費精算管理も<span>キンクラだけで完結</span>します。\n        </div>\n      </div>\n      {/** 特長 */}\n      <div className=\"p-section-function\">\n        <div className=\"feature-area\">\n          <p className=\"img-wrap\">\n            <img\n              src=\"/images/official/function/expense/expenseFunctionFeatureCheck01.png\"\n              alt=\"キンクラ経費精算の特長\"\n              className=\"img-wrap\"\n            />\n          </p>\n          <p className=\"txt-wrap txt-size-26\">\n            電子帳簿保存法に対応した経費精算機能\n          </p>\n        </div>\n        <div className=\"detail\">\n          スマホ撮影やスキャナから取り込んだデータの保存にも対応しているので\n          <br />\n          今まで発生していた<span>書類管理の手間を軽減</span>\n          し、申請／承認／管理が簡単に行なえます。\n        </div>\n      </div>\n    </div>\n  </Wrapper>\n)\n\nexport default RequestExpenseFeature01\n","import React from 'react'\nimport styled from '@emotion/styled'\nimport { Wrapper } from '../../atoms/updateInfoBnr'\nimport BreakPoints from '../../../styles/breakPoints'\n\nconst Card = styled.div`\n  a {\n    width: 400px;\n    background-color: #ffffff;\n    font-weight: bold;\n    text-align: center;\n    border-radius: 5px;\n    // overflow: hidden;\n    box-shadow: 0 2px 10px #ababab;\n    position: relative;\n    overflow: hidden;\n\n    .icon-wrap {\n      height: 90px;\n      width: 110px;\n      position: absolute;\n      top: 0;\n      right: 0;\n      background: #ffffff;\n      border-radius: 0 5px 0 5px;\n      box-shadow: -2px 1px 3px rgba(0, 0, 0, 0.3);\n      padding: 15px 5px 10px;\n\n      img {\n        height: 90%;\n        width: auto;\n      }\n    }\n  }\n\n  img {\n    filter: none !important;\n  }\n\n  &:hover * {\n    text-decoration: rgba(0, 0, 0, 0) none !important;\n  }\n\n  .image-area {\n    height: 250px;\n    overflow: hidden;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  .wrap {\n    display: flex;\n    justify-content: space-around;\n    align-items: center;\n    flex-direction: column;\n    height: 225px;\n  }\n\n  .label-area {\n    width: fit-content;\n\n    h3 {\n      font-size: 33px;\n      color: #313a38;\n      position: relative;\n\n      &:after {\n        content: '';\n        position: absolute;\n        height: 3px;\n        width: 100%;\n        background-color: #51d3c7;\n        bottom: -10px;\n        left: 0;\n      }\n    }\n  }\n\n  .text-area {\n    display: flex;\n    height: 60px;\n    color: #272d2c;\n    white-space: pre-wrap;\n    font-size: 18px;\n    align-items: center;\n    padding-bottom: 30px;\n  }\n\n  ${BreakPoints.xLarge} {\n    a {\n      width: 45vw;\n      max-width: 400px;\n\n      .icon-wrap {\n        height: 80px;\n        width: 100px;\n        padding: 10px 0 0;\n\n        img {\n          height: 80%;\n        }\n      }\n    }\n\n    .image-area {\n      height: auto;\n    }\n\n    .wrap {\n      height: 180px;\n    }\n\n    .label-area {\n      h3 {\n        font-size: 20px;\n      }\n    }\n\n    .text-area {\n      display: flex;\n      height: auto;\n      font-size: 16px;\n      padding: 0 10px 20px;\n      white-space: unset;\n    }\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** リンク先 */\n  idName?: string\n  /** 機能名 */\n  label?: string\n  /** 説明 */\n  description?: string\n  /** 画像 */\n  fullImg?: string\n  /** アイコン */\n  icon: string\n}\n\n/**\n * 主な機能；ホバー用カード\n */\nconst FunctionPopupCard = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={`function-card${className}`}>\n      <Card>\n        <a href={props.idName}>\n          <div className=\"icon-wrap\">\n            <img\n              src={`/images/official/function/expense/${props.icon}.png`}\n              alt=\"キンクラ経費精算の主な機能\"\n            />\n          </div>\n          <div className=\"image-area\">\n            <img\n              src={`/images/official/gallery/${props.fullImg}.png`}\n              alt=\"キンクラ経費精算の主な機能\"\n            />\n          </div>\n          <div className=\"wrap\">\n            <div className=\"label-area\">\n              <h3>{props.label}</h3>\n            </div>\n            <div className=\"text-area\">{props.description}</div>\n          </div>\n        </a>\n      </Card>\n    </Wrapper>\n  )\n}\nexport default FunctionPopupCard\n","import styled from '@emotion/styled'\nimport React from 'react'\n\nconst Wrapper = styled.div`\n  &.modal-wrapper {\n    padding: 15px 10px;\n\n    .modal-window {\n      max-width: 1000px;\n      padding: 10px;\n\n      .modal-content {\n        position: relative;\n        max-height: calc(100vh - 40px);\n\n        h4 {\n          padding: 10px 0 20px;\n        }\n\n        img {\n          width: 100%;\n          height: 100%;\n          margin: 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  fullImg?: string\n}\n\n/**\n * アップデート情報表示コンテンツ（ポップアップ表示）\n */\nconst FunctionPopupContent = (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        </div>\n        <a href=\"#!\" className=\"modal-close\">\n          ×\n        </a>\n      </div>\n    </Wrapper>\n  )\n}\nexport default FunctionPopupContent\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../../styles/breakPoints'\nimport OfficialCommonH3Set from '../../molecules/officialCommonH3Set'\nimport FunctionPopupCard from './functionPopupCard'\nimport FunctionPopupContent from './functionPopupContent'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  background: #deeff0;\n  padding: 80px 0;\n  font-weight: bold;\n  position: relative;\n\n  .p-section-inner {\n    max-width: 1400px;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 35px 25px;\n  }\n\n  ${BreakPoints.xLarge} {\n    padding: 30px 0;\n\n    .p-section-inner {\n      gap: 25px;\n    }\n  }\n\n  ${BreakPoints.medium} {\n  }\n`\n\n/**\n * 経費精算-主な機能\n * @constructor\n */\nconst RequestExpenseFunction01 = () => (\n  <>\n    <Wrapper>\n      <OfficialCommonH3Set label=\"主な機能\" />\n      <div className=\"p-section-inner\">\n        <FunctionPopupCard\n          label=\"タイムスタンプの付与\"\n          idName=\"#modal-01\"\n          fullImg=\"thum18_card\"\n          icon=\"functionIcon01\"\n          description={'領収書アップロート時に\\n自動的にタイムスタンプを付与'}\n        />\n        <FunctionPopupCard\n          label=\"検索機能\"\n          idName=\"#modal-02\"\n          fullImg=\"thum19_card\"\n          icon=\"functionIcon02\"\n          description={'申請データは日付・金額・利用先で\\n検索が可能'}\n        />\n        <FunctionPopupCard\n          label=\"領収書のデータ管理\"\n          idName=\"#modal-03\"\n          fullImg=\"thum20_card\"\n          icon=\"functionIcon03\"\n          description=\"データの訂正・追加・削除履歴を管理\"\n        />\n        <FunctionPopupCard\n          label=\"ファイル要件の自動判定\"\n          idName=\"#modal-04\"\n          fullImg=\"thum21_card\"\n          icon=\"functionIcon04\"\n          description={\n            '保存要件に適合したファイルか\\n自動判定し、要件を満たしていない\\n場合は警告を表示'\n          }\n        />\n        <FunctionPopupCard\n          label=\"帳票出力\"\n          idName=\"#modal-05\"\n          fullImg=\"thum22_card\"\n          icon=\"functionIcon05\"\n          description={'経費精算の申請内容\\n領収書ファイルを出力可能'}\n        />\n        <FunctionPopupCard\n          label=\"支払ステータス管理\"\n          idName=\"#modal-06\"\n          fullImg=\"thum23_card\"\n          icon=\"functionIcon06\"\n          description={'支払状況のステータスを管理し\\n対応状況を残すことが可能'}\n        />\n      </div>\n    </Wrapper>\n    <FunctionPopupContent\n      label=\"タイムスタンプの付与\"\n      idName=\"modal-01\"\n      fullImg=\"thum18\"\n    />\n    <FunctionPopupContent label=\"検索機能\" idName=\"modal-02\" fullImg=\"thum19\" />\n    <FunctionPopupContent\n      label=\"領収書のデータ管理\"\n      idName=\"modal-03\"\n      fullImg=\"thum20\"\n    />\n    <FunctionPopupContent\n      label=\"ファイル要件の自動判定\"\n      idName=\"modal-04\"\n      fullImg=\"thum21\"\n    />\n    <FunctionPopupContent label=\"帳票出力\" idName=\"modal-05\" fullImg=\"thum22\" />\n    <FunctionPopupContent\n      label=\"支払ステータス管理\"\n      idName=\"modal-06\"\n      fullImg=\"thum23\"\n    />\n  </>\n)\n\nexport default RequestExpenseFunction01\n","import styled from '@emotion/styled'\nimport React from 'react'\n\nconst Wrapper = styled.div`\n  padding: 0;\n  height: 27px;\n  width: 42px;\n`\n\n/**\n * SVGアイコンコンポーネント\n * 王冠\n */\nconst CrownSvg = (): JSX.Element => (\n  <Wrapper className=\"svg-icon\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"42\"\n      height=\"27.004\"\n      viewBox=\"0 0 42 27.004\"\n    >\n      <path\n        id=\"合体_74\"\n        data-name=\"合体 74\"\n        d=\"M12789.821,20214H12753v-23.732l12.292,7.924,8.705-11.2,8.723,11.215,12.28-7.943V20214Z\"\n        transform=\"translate(-12753.001 -20186.998)\"\n        fill=\"#fff1b7\"\n      />\n    </svg>\n  </Wrapper>\n)\nexport default CrownSvg\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../../styles/breakPoints'\nimport OfficialCommonH3Set from '../../molecules/officialCommonH3Set'\nimport CrownSvg from '../../atoms/crownSvg'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  background: #ffffff;\n  position: relative;\n\n  .p-section-inner {\n    display: flex;\n    max-width: 1200px;\n    padding: 80px 0;\n    margin: 0 auto;\n    flex-wrap: wrap;\n    justify-content: space-between;\n\n    .p-section-feature {\n      width: 100%;\n      display: flex;\n      margin: 0 auto 60px;\n      justify-content: center;\n      gap: 35px;\n\n      .p-feature-01,\n      .p-feature-02,\n      .p-feature-03 {\n        width: calc(100% / 3);\n        height: 530px;\n        position: relative;\n        text-align: center;\n        border-radius: 20px;\n        border: solid 2px #baf2ed;\n        background: #fcffed;\n        padding: 10px;\n        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n        z-index: 1;\n\n        .svg-icon {\n          position: absolute;\n          left: calc(50% - 21px);\n          top: -20px;\n        }\n\n        .reason-title {\n          width: 100%;\n          color: #ffffff;\n          margin: 0 auto 20px;\n          background: #f2a109;\n          height: 108px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          text-align: center;\n          border-radius: 10px;\n          font-size: 30px;\n          flex-direction: column;\n\n          span {\n            display: block;\n            font-size: 22px;\n          }\n        }\n\n        .detail {\n          font-size: 18px;\n          line-height: 1.8em;\n          padding: 0 30px 30px;\n          text-align: left;\n\n          span {\n            color: #ff0000;\n          }\n        }\n\n        .img-wrap {\n          position: absolute;\n          z-index: 2;\n\n          &.img-01 {\n            width: 350px;\n            bottom: -30px;\n            left: -360px;\n          }\n\n          &.img-02 {\n            width: 140px;\n            bottom: -30px;\n            left: -80px;\n          }\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.xLarge} {\n    .p-section-inner {\n      padding: 30px 0 0;\n\n      .p-section-feature {\n        flex-direction: column;\n        gap: 20px;\n        margin-top: -20px;\n\n        .p-feature-01,\n        .p-feature-02,\n        .p-feature-03 {\n          width: 90%;\n          margin: 0 auto;\n          height: auto;\n          text-align: left;\n\n          .svg-icon {\n            display: none;\n          }\n\n          .reason-title {\n            height: auto;\n            font-size: 24px;\n            margin-bottom: 10px;\n            padding: 5px;\n\n            span {\n              font-size: 18px;\n            }\n          }\n\n          .detail {\n            font-size: 16px;\n            padding: 0 10px 10px;\n            text-align: left;\n          }\n\n          .img-wrap {\n            display: none;\n          }\n        }\n      }\n    }\n  }\n`\n\n/**\n * 経費精算-選ばれる理由\n * @constructor\n */\nconst RequestExpenseReason01 = () => (\n  <Wrapper>\n    <div className=\"p-section-inner anim-fade-up\">\n      <OfficialCommonH3Set label=\"選ばれる理由\" />\n      <div className=\"p-section-feature\">\n        <div className=\"p-feature-01\">\n          <CrownSvg />\n          <p className=\"reason-title txt-bold\">電子帳簿保存法に対応</p>\n          <p className=\"detail\">\n            電子帳簿保存法の要件を満たしているシステムのため、解像度や履歴管理、検索など申請の度に\n            <span>電帳法の要件適合をチェックする必要はありません。</span>\n          </p>\n        </div>\n        <div className=\"p-feature-02\">\n          <CrownSvg />\n          <p className=\"reason-title txt-bold\">\n            <span>経費精算の承認ルールを</span>\n            細かく設定可能\n          </p>\n          <p className=\"detail\">\n            申請から承認、管理までの煩雑なフローを簡略化し負担を軽減するだけでなく、\n            <span>企業独自の承認ルールに合わせて設定可能</span>\n            なので、システム導入に伴って従来の運用ルールを変更する必要がありません。\n            システム導入時の現場の混乱や担当者の負担を軽減することができます。\n          </p>\n          <img\n            src=\"/images/official/function/expense/imgReason01.png\"\n            className=\"img-wrap img-01\"\n            alt=\"すぐに導入、利用開始できる！\"\n          />\n        </div>\n        <div className=\"p-feature-03\">\n          <CrownSvg />\n          <p className=\"reason-title txt-bold\">\n            <span>自宅や外出先から</span>\n            いつでも申請可能\n          </p>\n          <p className=\"detail\">\n            <span>\n              スマートフォンを使ってレシートや領収証をその場で撮影して申請\n            </span>\n            することができます。\n            <br />\n            従業員自身が領収証を管理する負担及び紛失するリスクを減らすことができ、出社して経費精算を提出する手間を省きます。{' '}\n          </p>\n          <img\n            src=\"/images/official/function/expense/imgReason02.png\"\n            className=\"img-wrap img-02\"\n            alt=\"すぐに導入、利用開始できる！\"\n          />\n        </div>\n      </div>\n    </div>\n  </Wrapper>\n)\n\nexport default RequestExpenseReason01\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../../styles/breakPoints'\n\nconst Wrapper = styled.section`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-weight: bold;\n  text-align: start;\n  background-color: #ffffff;\n  padding: 15px;\n  border-radius: 5px;\n  box-shadow: 0 3px 6px #d7d7d7;\n  width: fit-content;\n\n  ul {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    gap: 5px;\n  }\n\n  li {\n    // border: 1px solid #ff0000;\n    height: 80px;\n    border-top: 1px solid #ebebeb;\n    border-right: 1px dashed #ebebeb;\n    //width: 260px;\n    div {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: 10px 10px 10px 0;\n      // border: 1px solid #0000ff;\n      border-radius: 5px;\n      height: calc(100% - 20px);\n      text-align: center;\n      line-height: 38px;\n      flex-direction: column;\n      width: 265px;\n      font-size: 18px;\n      color: #454f63;\n\n      .free {\n        font-size: 24px;\n      }\n\n      .alpha {\n        margin: -15px 0 0;\n        display: block;\n        font-size: 16px;\n        opacity: 0.5;\n        font-weight: normal;\n      }\n    }\n\n    &.left-cell {\n      div {\n        background-color: #f0f0f0;\n        width: 280px;\n        color: #505050;\n        text-align: left;\n        align-items: self-start;\n        padding: 20px;\n        font-size: 16px;\n      }\n    }\n  }\n\n  .line-1 {\n    margin-bottom: 5px;\n\n    li {\n      border: none;\n      height: 60px;\n\n      div {\n        width: 272px;\n      }\n    }\n\n    .null-cell div {\n      background-color: #ffffff;\n      width: 280px;\n    }\n\n    .business-cell div {\n      background-color: #ffebb5;\n      font-size: 28px;\n    }\n\n    .enterprise-cell div {\n      background-color: #ffd167;\n      font-size: 28px;\n    }\n\n    div {\n      margin: 0 5px;\n      height: 100%;\n      line-height: 58px;\n      border-radius: 2px;\n    }\n  }\n\n  .line-2,\n  .line-3 {\n    margin-left: 15px;\n  }\n\n  // テキストが2行あるときの行の高さ\n  .text-2line {\n    line-height: 19px;\n  }\n\n  .ribbon {\n    margin: -4px 0 0;\n    display: block;\n    position: relative;\n    height: 20px;\n    line-height: 20px;\n    text-align: center;\n    padding: 0 20px;\n    font-size: 14px;\n    background: #ff5c9a;\n    color: #fff;\n    box-sizing: border-box;\n  }\n\n  .ribbon:before,\n  .ribbon:after {\n    position: absolute;\n    content: '';\n    width: 0;\n    height: 0;\n    z-index: 1;\n  }\n\n  .ribbon:before {\n    top: 0;\n    left: 0;\n    border-width: 10px 0 10px 7px;\n    border-color: transparent transparent transparent #ffffff;\n    border-style: solid;\n  }\n\n  .ribbon:after {\n    top: 0;\n    right: 0;\n    border-width: 10px 7px 10px 0;\n    border-color: transparent #ffffff transparent transparent;\n    border-style: solid;\n  }\n\n  ${BreakPoints.xLarge} {\n    width: 100vw;\n\n    ul {\n      flex-wrap: wrap;\n\n      li {\n        width: 49%;\n        border-top: none;\n\n        &:last-child {\n          border-right: none;\n        }\n\n        div {\n          width: 100%;\n          margin-top: 0;\n        }\n\n        &.left-cell {\n          width: 98%;\n          height: auto;\n          border: none;\n\n          div {\n            width: 100%;\n            display: block;\n            height: auto;\n            padding: 0;\n            text-align: center;\n            margin-bottom: 5px;\n            margin-top: 3px;\n            border: none;\n          }\n        }\n\n        &.null-cell {\n          display: none;\n        }\n\n        &.business-cell,\n        &.enterprise-cell {\n          div {\n            width: 100%;\n          }\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n    p {\n      font-size: 14px;\n    }\n  }\n`\n\n/**\n * 経費精算-料金表\n * @constructor\n */\n\nconst RequestExpenseOptionPriceTable = (): JSX.Element => (\n  // const {  = '' } = props\n\n  <Wrapper>\n    <ul className=\"line-1\">\n      <li className=\"left-cell null-cell\">\n        <div />\n      </li>\n      <li className=\"business-cell\">\n        <div>Business</div>\n      </li>\n      <li className=\"enterprise-cell\">\n        <div>Enterprise</div>\n      </li>\n    </ul>\n    <ul className=\"line-2\">\n      <li className=\"left-cell\">\n        <div>オプション基本料金（月額）</div>\n      </li>\n      <li>\n        <div>\n          10,000円/月\n          <p className=\"ribbon\">初月無料</p>\n        </div>\n      </li>\n      <li>\n        <div>\n          <span className=\"free\">無料</span>\n        </div>\n      </li>\n    </ul>\n    <ul className=\"line-2\">\n      <li className=\"left-cell\">\n        <div>社員の案件管理</div>\n      </li>\n      <li>\n        <div>50件/月</div>\n      </li>\n      <li>\n        <div>\n          20件/月～<span className=\"alpha\">※社員50人毎に10件追加</span>\n        </div>\n      </li>\n    </ul>\n    <ul className=\"line-3\">\n      <li className=\"left-cell\">\n        <div>追加料金（税抜）</div>\n      </li>\n      <li>\n        <div>1,500円/10件</div>\n      </li>\n      <li>\n        <div>1,000円/10件</div>\n      </li>\n    </ul>\n  </Wrapper>\n)\n\nexport default RequestExpenseOptionPriceTable\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../../styles/breakPoints'\nimport OfficialCommonH3Set from '../../molecules/officialCommonH3Set'\nimport RequestExpenseOptionPriceTable from './requestExpenseOptionPriceTable'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  background: #f0f0f0;\n  overflow: hidden;\n  padding: 80px 0;\n  font-weight: bold;\n\n  .p-section-inner {\n    max-width: 900px;\n    padding: 30px 0 0;\n    margin: 0 auto;\n    text-align: center;\n    // overflow: hidden;\n  }\n\n  .margin-bottom {\n    margin-bottom: 0;\n  }\n\n  .caution-text {\n    font-weight: normal;\n    text-align: start;\n    margin-top: 20px;\n    white-space: pre-wrap;\n  }\n\n  ${BreakPoints.large} {\n    p {\n      font-size: 12px;\n    }\n\n    .p-section-inner {\n      .p-section-function {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n\n        .function-items {\n          float: unset;\n\n          .description {\n          }\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .p-section-inner {\n      padding: 0;\n\n      .p-section-function {\n        .function-items {\n          width: calc(100vw - 80px);\n          height: auto;\n\n          .description {\n          }\n        }\n      }\n    }\n  }\n`\n\n/**\n * 経費精算-オプション利用料金\n * @constructor\n */\nconst RequestExpenseOptionPrice = () => (\n  <Wrapper id=\"option-price\">\n    <OfficialCommonH3Set label=\"オプション利用料金\" className=\"margin-bottom\" />\n    <div className=\"p-section-inner\">\n      <div className=\"img-agent-function\">\n        <RequestExpenseOptionPriceTable />\n        <div className=\"caution-text\">\n          <p>\n            {'※上記利用料金は税抜価格です。\\n' +\n              '※基本申請数までは追加料金は発生しません。\\n' +\n              '※上記利用料金や内容は予告なく変更になる可能性があります。予めご了承ください。'}\n          </p>\n        </div>\n      </div>\n    </div>\n  </Wrapper>\n)\n\nexport default RequestExpenseOptionPrice\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../../styles/breakPoints'\nimport OfficialCommonH3Set from '../../molecules/officialCommonH3Set'\nimport SesManagementHowtoLabel from '../ses-managementHowtoLabel'\nimport SesManagementHowtoButtonLabel from '../ses-managementHowtoButtonLabel'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  background: #ffffff;\n  overflow: hidden;\n  padding: 80px 0 45px;\n  font-weight: bold;\n\n  .top-explanation {\n    font-weight: normal;\n    margin-bottom: 50px;\n  }\n\n  .p-section-inner {\n    max-width: 980px;\n    padding: 0 20px;\n    margin: 0 auto;\n    text-align: center;\n    // overflow: hidden;\n  }\n\n  .howto-area {\n    background-color: #f7f7f7;\n    box-shadow: 0 3px 6px #e8e8e8;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    width: 100%;\n    padding: 20px 25px;\n    margin-bottom: 35px;\n    position: relative;\n  }\n\n  .text-wrap {\n    text-align: start;\n    margin: 30px 20px;\n\n    p {\n      line-height: 30px;\n    }\n\n    span {\n      color: #f2784c;\n    }\n\n    .company-setting-link {\n      display: block;\n      margin: 20px 0;\n    }\n  }\n\n  .notice {\n    margin-top: 20px;\n\n    p {\n      font-weight: normal;\n    }\n  }\n\n  ${BreakPoints.xLarge} {\n    .image-wrap {\n      display: none;\n    }\n\n    .text-wrap {\n      .company-setting-link {\n        margin: 20px 0 0 0;\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n    .p-section-inner {\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .p-section-inner {\n      .p-section-function {\n        .function-items {\n          width: calc(100vw - 80px);\n          height: auto;\n\n          .description {\n          }\n        }\n      }\n    }\n  }\n`\n\n/**\n * 経費精算-利用方法\n * @constructor\n */\nconst RequestExpenseHowto = () => (\n  <Wrapper id=\"how-to\">\n    <OfficialCommonH3Set label=\"利用方法\" />\n    <div className=\"p-section-inner\">\n      <div className=\"top-explanation\">\n        <p>\n          経費精算機能はオプション機能です。\n          <br />\n          下記手順でオプションを有効化することで機能のご利用が可能です。\n        </p>\n      </div>\n      <div className=\"howto-area\">\n        <SesManagementHowtoLabel number=\"!\" label=\"オプションの有効化\" />\n        <div className=\"text-wrap\">\n          <p>\n            1.\n            <a\n              href=\"https://app.kintaicloud.jp/manage/payment\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              お支払い\n            </a>\n            にアクセス\n          </p>\n          <p>\n            2. <span>オプション機能</span> ＞ <span>経費精算オプション</span>\n            の<SesManagementHowtoButtonLabel label=\"オプション利用開始\" />\n            ボタンをクリック\n          </p>\n          <p>\n            3. 表示内容を確認の上\n            <SesManagementHowtoButtonLabel label=\"利用開始\" />\n            ボタンをクリック\n          </p>\n          <div className=\"notice\">\n            <p>\n              ※オプション機能はBusiness/Enterpriseプランをご利用中の企業様に限り利用可能です。\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </Wrapper>\n)\n\nexport default RequestExpenseHowto\n","import styled from '@emotion/styled'\nimport { navigate } from 'gatsby-link'\nimport React from 'react'\nimport { Link } from 'gatsby'\nimport BreakPoints from '../../../styles/breakPoints'\nimport OfficialCommonH3Set from '../../molecules/officialCommonH3Set'\nimport OfficialFaqItems from '../../molecules/officialFaqItems'\nimport OfficialCommonBtn from '../../atoms/officialCommonBtn'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  text-align: center;\n  padding: 80px 20px;\n\n  .p-section-faq {\n    text-align: left;\n    max-width: 1080px;\n    margin: 0 auto;\n  }\n\n  .modal-btn {\n    position: relative;\n    margin: 5px 0 0 20px;\n\n    &:before {\n      display: block;\n      content: '';\n      position: absolute;\n      width: 0;\n      height: 0;\n      top: 7px;\n      left: -15px;\n      border-left: 8px solid #3ec7b3;\n      border-top: 3px solid transparent;\n      border-bottom: 3px solid transparent;\n    }\n\n    a {\n      text-decoration: underline solid rgba(255, 255, 255, 0);\n      transition: 0.3s all;\n      display: inline-block;\n      width: unset;\n      height: unset;\n      padding: 0;\n      opacity: 1;\n\n      span {\n        font-size: 15px;\n        font-weight: normal;\n      }\n\n      &:before {\n        display: none;\n      }\n\n      &:hover {\n        opacity: 0.6;\n        text-decoration: underline solid #3abd9e !important;\n\n        &:before {\n          display: none;\n        }\n      }\n    }\n\n    img {\n      display: none !important;\n    }\n  }\n\n  .text-wrap {\n    font-weight: bold;\n    text-align: start;\n    margin: 30px 20px;\n\n    p {\n      line-height: 30px;\n    }\n\n    span {\n      color: #f2784c;\n    }\n\n    .company-setting-link {\n      display: block;\n      margin: 20px 0;\n    }\n  }\n\n  ${BreakPoints.xxLarge} {\n    .p-section-inner {\n      .p-section-function {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n\n        .function-items {\n          float: unset;\n\n          .description {\n          }\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .p-section-inner {\n      padding: 60px 0 0;\n\n      .p-section-function {\n        .function-items {\n          width: calc(100vw - 80px);\n          height: auto;\n\n          .description {\n          }\n        }\n      }\n    }\n  }\n`\n\n/**\n * 経費精算紹介ページ-FAQ\n * @constructor\n */\nconst RequestExpenseFaq = () => (\n  <>\n    <Wrapper>\n      <OfficialCommonH3Set label=\"FAQ\" className=\"anim-fade-up\" />\n      <div className=\"p-section-faq anim-fade-up\">\n        <OfficialFaqItems\n          question=\"経費精算機能を試してみたいです。\"\n          answer={\n            '無料トライアル期間中でも経費精算機能をご利用いただくことは可能です。\\n' +\n            'お試しでのご利用を希望される場合は、「お支払い」より「経費精算オプション」の利用開始手続きをしてください。'\n          }\n          idName=\"matter-01\"\n        >\n          <p>\n            ※オプション利用の詳細は「\n            <Link to=\"#how-to\">利用方法</Link>\n            」をご確認ください。\n          </p>\n        </OfficialFaqItems>\n        <OfficialFaqItems\n          question=\"経費精算機能の利用に費用は掛かりますか？\"\n          answer=\"Enterpriseプランをご利用中の場合、オプション基本料金は無料でご利用いただくことができます。\n          Businessプランご利用の場合は月額10,000円(税抜)でご利用いただけます。\"\n          idName=\"matter-02\"\n        >\n          <p>\n            詳細は「\n            <Link to=\"#option-price\">オプション利用料金</Link>\n            」をご確認ください。\n          </p>\n        </OfficialFaqItems>\n        <OfficialFaqItems\n          question=\"オプションを解除はすぐにできますか？\"\n          answer=\"オプション機能は「お支払い」からいつでも解除することが可能です。\"\n          idName=\"matter-03\"\n        />\n      </div>\n      <div className=\"common-button\">\n        <OfficialCommonBtn\n          size=\"mega\"\n          className=\"anim-fade-up\"\n          onClick={() => {\n            navigate('/function')\n          }}\n        >\n          その他の機能を見る\n        </OfficialCommonBtn>\n      </div>\n    </Wrapper>\n  </>\n)\n\nexport default RequestExpenseFaq\n","import styled from '@emotion/styled'\nimport { graphql, PageProps } from 'gatsby'\nimport React from 'react'\nimport OfficialLayout from '../../components/organisms/officialLayout'\nimport SEO from '../../components/atoms/seo'\nimport OfficialLowHeader from '../../components/organisms/officialLowHeader'\nimport RequestExpenseTop01 from '../../components/organisms/expense/requestExpenseTop01'\nimport RequestExpenseFeature01 from '../../components/organisms/expense/requestExpenseFeature01'\nimport RequestExpenseFunction01 from '../../components/organisms/expense/requestExpenseFunction01'\nimport RequestExpenseReason01 from '../../components/organisms/expense/requestExpenseReason01'\nimport RequestExpenseOptionPrice from '../../components/organisms/expense/requestExpenseOptionPrice'\nimport RequestExpenseHowto from '../../components/organisms/expense/requestExpenseHowto'\nimport RequestExpenseFaq from '../../components/organisms/expense/requestExpenseFaq'\n\nconst Wrapper = styled.main`\n  .top-img {\n    max-width: 1100px;\n    width: 98vw;\n  }\n\n  .function-card {\n    display: flex;\n    max-width: 400px;\n    margin: 0;\n    width: auto;\n  }\n`\n\ntype IProps = PageProps<GatsbyTypes.IndexPageQuery>\n\n/**\n * 機能紹介ページ[経費精算]\n * @constructor\n */\nconst RequestExpense = ({ location }: IProps) => (\n  <OfficialLayout location={location} className=\"p-page-function\">\n    <SEO title=\"経費精算機能\" />\n    <Wrapper className=\"main\">\n      <OfficialLowHeader>\n        <img\n          className=\"top-img\"\n          src=\"/images/official/function/expense/expenseFunctionTop01.png\"\n          alt=\"キンクラ_SES案件管理機能\"\n        />\n      </OfficialLowHeader>\n      <RequestExpenseTop01 />\n      <RequestExpenseFeature01 />\n      <RequestExpenseFunction01 />\n      <RequestExpenseReason01 />\n      <RequestExpenseOptionPrice />\n      <RequestExpenseHowto />\n      <RequestExpenseFaq />\n    </Wrapper>\n  </OfficialLayout>\n)\n\nexport default RequestExpense\n\nexport const pageQuery = graphql`\n  query RequestExpense {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["Wrapper","BreakPoints","props","className","label","description","number","xmlns","width","height","viewBox","id","d","transform","stroke","src","alt","Card","href","idName","icon","fullImg","fill","target","rel","question","answer","Link","to","size","onClick","navigate","location","title"],"sourceRoot":""}