{"version":3,"file":"component---src-pages-function-ses-management-tsx-69e9f54a20f476d57a84.js","mappings":"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","sources":["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/organisms/ses-managementTopItem.tsx","webpack://beaver-help/./src/components/organisms/ses-managementTop.tsx","webpack://beaver-help/./src/components/organisms/ses-managementRecommend.tsx","webpack://beaver-help/./src/components/organisms/ses-managementFunctionArea.tsx","webpack://beaver-help/./src/components/organisms/ses-managementFunction.tsx","webpack://beaver-help/./src/components/organisms/ses-managementHowto.tsx","webpack://beaver-help/./src/components/organisms/ses-managementOptionPriceTable.tsx","webpack://beaver-help/./src/components/organisms/ses-managementOptionPrice.tsx","webpack://beaver-help/./src/components/organisms/ses-managementMeritArea.tsx","webpack://beaver-help/./src/components/organisms/ses-managementMerit.tsx","webpack://beaver-help/./src/components/organisms/ses-managementFaq.tsx","webpack://beaver-help/./src/pages/function/ses-management.tsx"],"sourcesContent":["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'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.section`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 30px 30px 80px;\n\n  .image-wrap {\n    width: 220px;\n    height: 140px;\n    z-index: 3;\n\n    img {\n      width: inherit;\n      height: inherit;\n    }\n  }\n\n  .text-wrap {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    p {\n      z-index: 2;\n      font-size: 23px;\n      font-weight: bold;\n      color: #09485c;\n      margin-top: 10px;\n      width: max-content;\n      white-space: pre-wrap;\n      min-width: 250px;\n      text-align: center;\n    }\n\n    .hexagon {\n      opacity: 0.4;\n      position: absolute;\n      top: -25px;\n      left: -15px;\n      z-index: -1;\n    }\n\n    .hexagon::before {\n      content: '';\n      width: 250px;\n      position: absolute;\n      top: 0;\n      border-bottom: 60px solid #a0cbbf;\n      border-left: 50px solid transparent;\n      border-right: 50px solid transparent;\n      box-sizing: border-box;\n    }\n\n    .hexagon::after {\n      content: '';\n      width: 250px;\n      position: absolute;\n      top: 59.7px;\n      border-top: 60px solid #a0cbbf;\n      border-left: 50px solid transparent;\n      border-right: 50px solid transparent;\n      box-sizing: border-box;\n    }\n  }\n\n  ${BreakPoints.xLarge} {\n  }\n\n  ${BreakPoints.large} {\n  }\n\n  ${BreakPoints.medium} {\n  }\n\n  ${BreakPoints.smallest} {\n  }\n`\n\ntype Props = {\n  /** タイトル */\n  label: string\n  /** アイコン */\n  img: string\n}\n\n/**\n * 案件管理機能紹介ページ-TOP部アイテムコンポーネント\n * @constructor\n */\n\nconst SesManagementTopItem = (props: Props): JSX.Element => {\n  const { label, img } = props\n\n  return (\n    <Wrapper className=\"section item-area\">\n      <div className=\"image-wrap\">\n        <img\n          src={`/images/official/function/${img}.png`}\n          alt=\"キンクラ_SES案件管理機能\"\n        />\n        <div className=\"text-wrap\">\n          <p>{label}</p>\n          <div className=\"hexagon\" />\n        </div>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default SesManagementTopItem\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport SesManagementTopItem from './ses-managementTopItem'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  margin-bottom: 80px;\n\n  .p-section-inner {\n    max-width: 1200px;\n    padding: 80px 0 80px;\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\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\n    .catch-top {\n      color: #1d4a5d;\n      font-weight: bold;\n      font-size: 34px;\n      width: fit-content;\n\n      .balloon {\n        width: fit-content;\n        background-color: #176a7e;\n        padding: 0 60px;\n        border-radius: 8px;\n        color: #fff;\n        position: relative;\n        margin-bottom: 30px;\n\n        .triangle {\n          position: absolute;\n          bottom: -14px;\n          left: 45%;\n          right: 0;\n          content: '';\n          width: 0;\n          height: 0;\n          border-left: 15px solid transparent;\n          border-right: 15px solid transparent;\n          border-top: 15px solid #176a7e;\n          margin-top: -5vw;\n        }\n      }\n    }\n\n    .catch-image {\n      position: absolute;\n      z-index: 2;\n      top: 0;\n      right: -75px;\n      height: 120px;\n      width: 120px;\n\n      img {\n        height: inherit;\n        width: inherit;\n      }\n    }\n  }\n\n  .item-wrap {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ${BreakPoints.xxLarge} {\n  }\n\n  ${BreakPoints.xLarge} {\n  }\n\n  ${BreakPoints.medium} {\n    .catch {\n      .catch-image {\n        width: 70px;\n        height: 70px;\n        right: -30px;\n      }\n\n      .catch-top {\n        font-size: 24px;\n      }\n    }\n  }\n`\n\n/**\n * 案件管理機能紹介ページ-最上部キャッチ\n * @constructor\n */\nconst SesManagementTop = () => (\n  <Wrapper>\n    <div className=\"p-section-inner\">\n      {/** キャッチ部分 */}\n      <div className=\"catch\">\n        <div className=\"catch-image\">\n          <img\n            src=\"/images/official/function/sesManagementFunctionCatch.png\"\n            alt=\"キンクラ_SES案件管理機能\"\n          />\n        </div>\n        <div className=\"catch-top\">\n          <p>膨大な量の案件情報を</p>\n          <div className=\"balloon\">\n            <p>クラウド上で一元管理</p>\n            <div className=\"triangle\" />\n          </div>\n        </div>\n        <div className=\"catch-bottom\">\n          <p>\n            契約期間や単価情報などSES案件に関する様々なデータ\n            <br />\n            をキンクラ上で容易に管理することができます。\n          </p>\n        </div>\n      </div>\n      {/** 紹介アイテム */}\n      <div className=\"item-wrap\">\n        <SesManagementTopItem\n          label={'契約内容と請求情報を\\n一元管理'}\n          img=\"sesManagementFunctionTop01\"\n        />\n        <SesManagementTopItem\n          label={'顧客別の売上額も\\nグラフ化して見やすい'}\n          img=\"sesManagementFunctionTop02\"\n        />\n        <SesManagementTopItem\n          label={'契約更新のアラートで\\n確認漏れを防止'}\n          img=\"sesManagementFunctionTop03\"\n        />\n        <SesManagementTopItem\n          label={'業務負荷を軽減し\\n営業効率を向上'}\n          img=\"sesManagementFunctionTop04\"\n        />\n      </div>\n    </div>\n  </Wrapper>\n)\n\nexport default SesManagementTop\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  font-weight: bold;\n  background-color: #fff;\n  margin-bottom: 60px;\n\n  .top-explanation {\n    font-weight: normal;\n    margin-bottom: 80px;\n  }\n\n  .p-section-inner {\n    max-width: 1080px;\n    padding: 80px 0 80px;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n\n    .p-section-function {\n      padding: 20px 0;\n      border-radius: 10px;\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      position: relative;\n    }\n\n    .bg-agent-function {\n      width: 100%;\n      background-image: url(/images/official/function/bgAgentMode01.png);\n      background-size: cover;\n      overflow: hidden;\n      z-index: -1;\n    }\n\n    .bg-agent-function:before {\n      content: '';\n      background: inherit;\n      background-color: rgba(255, 255, 255, 0.3);\n      background-blend-mode: lighten;\n      filter: blur(5px);\n      position: absolute;\n      top: -20px;\n      left: -20px;\n      right: -20px;\n      bottom: -20px;\n      z-index: -1;\n    }\n\n    // おすすめ要素\n\n    .recommend-area {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      filter: drop-shadow(0px 3px 6px #666);\n    }\n\n    .circle-area:nth-of-type(1) {\n      margin-right: -10px;\n    }\n\n    .circle-area:nth-of-type(2) {\n      margin-left: -10px;\n    }\n\n    .circle-area {\n      background-color: #FFFFFF;\n      height: 480px;\n      width: 480px;\n      border-radius: 50%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex-direction: column;\n\n      .text-area {\n        height: 120px;\n        margin-bottom: 20px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        p {\n          font-size: 28px;\n\n          span {\n            background: linear-gradient(transparent 60%, rgb(255, 255, 102) 60%);\n            padding: 0 5px;\n          }\n        }\n      }\n\n      img {\n        height: 170px;\n        width: auto;\n      }\n    }\n\n    ${BreakPoints.xxLarge} {\n    }\n\n    ${BreakPoints.xLarge} {\n      .circle-area {\n        background-color: #FFFFFF;\n        height: 360px;\n        width: 360px;\n\n        .text-area {\n          height: 90px;\n          margin-bottom: 10px;\n\n          p {\n            font-size: 21px;\n          }\n        }\n\n        img {\n          height: 127px;\n          width: auto;\n        }\n      }\n    }\n\n    ${BreakPoints.medium} {\n      .circle-area {\n        background-color: #FFFFFF;\n        height: 240px;\n        width: 240px;\n\n        .text-area {\n          height: 60px;\n          margin-bottom: 10px;\n\n          p {\n            font-size: 14px;\n          }\n        }\n\n        img {\n          height: 85px;\n          width: auto;\n        }\n      }\n    }\n`\n\n/**\n * 案件管理機能紹介ページ-こんな企業におすすめ\n * @constructor\n */\nconst SesManagementRecommend = () => (\n  <Wrapper>\n    <div className=\"p-section-inner fade-in-auto\">\n      <OfficialCommonH3Set\n        label=\"こんな企業におすすめ\"\n        className=\"fade-in-auto\"\n      />\n      <div className=\"top-explanation\">\n        <p>\n          契約期間や単価情報などSES案件に関する様々なデータをキンクラ上で容易に管理することができます。\n        </p>\n      </div>\n      <div className=\"p-section-function fade-in-auto\">\n        <div className=\"bg-agent-function\" />\n        <div className=\"recommend-area\">\n          <div className=\"circle-area\">\n            <div className=\"text-area\">\n              <p>\n                案件情報を\n                <br />\n                <span>Excelやスプレッドシート</span>で\n                <br />\n                管理している\n              </p>\n            </div>\n            <img\n              src=\"/images/official/function/sesManagementRecommend01.png\"\n              alt=\"キンクラ案件管理機能\"\n            />\n          </div>\n          <div className=\"circle-area\">\n            <div className=\"text-area\">\n              <p>\n                単価交渉を進めたいが\n                <br />\n                <span>営業担当の動きが鈍い</span>\n              </p>\n            </div>\n            <img\n              src=\"/images/official/function/sesManagementRecommend02.png\"\n              alt=\"キンクラ案件管理機能\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </Wrapper>\n)\n\nexport default SesManagementRecommend\n","import styled from '@emotion/styled'\nimport React, { ReactNode } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.section`\n  display: flex;\n  margin: 30px;\n  flex-direction: column;\n  width: 400px;\n  height: 480px;\n  background-color: #ffffff;\n  justify-content: space-between;\n  align-items: center;\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\n  .image-area {\n    border-top-left-radius: 5px;\n    border-top-right-radius: 5px;\n    height: 250px;\n    overflow: hidden;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  .text-area {\n    flex: 1;\n    padding: 35px 50px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .label-area {\n    width: fit-content;\n  }\n\n  h3 {\n    font-size: 40px;\n    color: #313a38;\n    position: relative;\n    margin-bottom: 40px;\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  .icon-wrap {\n    height: 120px;\n    width: 120px;\n    position: absolute;\n    top: -45px;\n    right: -30px;\n\n    img {\n      height: 100%;\n      width: 100%;\n    }\n  }\n\n  ${BreakPoints.xLarge} {\n    height: 360px;\n    width: 300px;\n    margin: 10px;\n\n    .image-area {\n      height: 178px;\n    }\n\n    .text-area {\n      height: 115px;\n      padding: 20px 25px;\n\n      p {\n        font-size: 14px;\n      }\n    }\n\n    h3 {\n      font-size: 20px;\n      margin-bottom: 25px;\n    }\n\n    .icon-wrap {\n      height: 90px;\n      width: 90px;\n      top: -30px;\n      right: -20px;\n    }\n  }\n\n  ${BreakPoints.smallest} {\n  }\n`\n\ntype Props = {\n  /** タイトル */\n  label: string\n  /** 内容 */\n  children: ReactNode\n  /** スクリーンショット */\n  img: string\n  /** アイコン */\n  icon: string\n}\n\n/**\n * 案件管理機能紹介ページ-主な機能_機能1つ分コンポーネント\n * @constructor\n */\n\nconst SesManagementFunctionArea = (props: Props): JSX.Element => {\n  const { children, label, img, icon = '' } = props\n\n  return (\n    <Wrapper>\n      <div className=\"icon-wrap\">\n        <img\n          src={`/images/official/function/${icon}.png`}\n          alt=\"キンクラ_SES案件管理機能\"\n        />\n      </div>\n      <div className=\"image-area\">\n        <img\n          src={`/images/official/function/${img}.png`}\n          alt=\"キンクラ_SES案件管理機能\"\n        />\n      </div>\n      <div className=\"text-area\">\n        <div className=\"label-area\">\n          <h3>{label}</h3>\n        </div>\n        <p>{children}</p>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default SesManagementFunctionArea\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonH3Set from '../molecules/officialCommonH3Set'\nimport SesManagementFunctionArea from './ses-managementFunctionArea'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  background: #deeff0;\n  // overflow: hidden;\n  padding: 80px 0;\n  font-weight: bold;\n  position: relative;\n  .background {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    // 背景画像\n    img {\n      border-style: none;\n      width: 100%;\n      height: auto;\n      mix-blend-mode: soft-light;\n    }\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}  }\n\n  ${BreakPoints.xxLarge} {\n  }\n\n  ${BreakPoints.large} {\n  }\n\n  ${BreakPoints.medium} {\n    .p-section-inner {\n      padding: 60px 0 0;\n      .p-section-function {\n        .function-items {\n          width: calc(100vw - 80px);\n          height: auto;\n          .description {\n          }\n        }\n      }\n    }\n  }\n`\n\n/**\n * 案件管理機能紹介ページ-主な機能\n * @constructor\n */\nconst SesManagementFunction = () => (\n  <Wrapper>\n    <OfficialCommonH3Set label=\"主な機能\" />\n    <div className=\"background\">\n      <img src=\"/images/official/function/bg.png\" alt=\"キンクラ-案件管理機能\" />\n    </div>\n    <div className=\"p-section-inner\">\n      <SesManagementFunctionArea\n        img=\"sesManagementFunction01\"\n        icon=\"sesIcon01\"\n        label=\"案件情報の管理\"\n      >\n        取引先や契約期間、単価などの\n        <br />\n        多岐にわたる案件情報を登録できます\n      </SesManagementFunctionArea>\n      <SesManagementFunctionArea\n        img=\"sesManagementFunction02\"\n        icon=\"sesIcon02\"\n        label=\"契約更新通知\"\n      >\n        契約更新日が近づくとお知らせされ、\n        <br />\n        単価アップなどの契約更新も容易です{' '}\n      </SesManagementFunctionArea>\n      <SesManagementFunctionArea\n        img=\"sesManagementFunction03\"\n        icon=\"sesIcon03\"\n        label=\"営業情報の共有\"\n      >\n        全社共有メモ、部門限定の共有メモは\n        <br />\n        一覧表上で簡単に更新できます{' '}\n      </SesManagementFunctionArea>\n      <SesManagementFunctionArea\n        img=\"sesManagementFunction04\"\n        icon=\"sesIcon04\"\n        label=\"単価管理\"\n      >\n        経験年数/年齢に応じた最低単価や\n        <br />\n        目標単価を設定でき 目標未達の案件を\n        <br />\n        洗い出すことができます\n      </SesManagementFunctionArea>\n      <SesManagementFunctionArea\n        img=\"sesManagementFunction05\"\n        icon=\"sesIcon05\"\n        label=\"データ分析\"\n      >\n        会社全体の売上や取引先、 部門単位の売上、個人の単価推移など\n        グラフィカルな表示で売上傾向を 直感的に把握できます\n      </SesManagementFunctionArea>\n    </div>\n  </Wrapper>\n)\n\nexport default SesManagementFunction\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  .image-wrap {\n    position: absolute;\n    top: 40px;\n    right: 15px;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n\n    img {\n      border: 2px solid #ffce00;\n    }\n\n    img:nth-of-type(1) {\n      height: 35px;\n      width: fit-content;\n    }\n\n    img:nth-of-type(2) {\n      height: 60px;\n      width: fit-content;\n    }\n\n    img:nth-of-type(3) {\n      height: 40px;\n      width: fit-content;\n      margin-left: -315px;\n    }\n\n    .triangle {\n      margin: 10px 0;\n      width: 20px;\n      border-top: 20px solid #e2e2e2;\n      border-right: 20px solid transparent;\n      border-left: 20px solid transparent;\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 SesManagementHowto = () => (\n  <Wrapper id=\"ses-management-how-to\">\n    <OfficialCommonH3Set label=\"利用方法\" />\n    <div className=\"p-section-inner\">\n      <div className=\"top-explanation\">\n        <p>\n          SES案件管理機能はオプション機能です。\n          <br />\n          下記手順でオプションを有効化することで機能のご利用が可能です。\n        </p>\n      </div>\n      <div className=\"howto-area\">\n        <SesManagementHowtoLabel number=\"1\" label=\"企業設定の確認\" />\n        <div className=\"text-wrap\">\n          <p>\n            <span>システム設定</span> ＞ <span>企業設定</span> ＞\n            <span>特定業種向け機能設定</span> で <br />\n            <span>\n              「派遣」「客先常駐/SES」が事業内容に含まれるため、拡張機能を利用する\n            </span>\n            に設定します\n          </p>\n          <a\n            href=\"https://app.kintaicloud.jp/manage/company\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"company-setting-link\"\n          >\n            ▶ 企業設定\n          </a>\n        </div>\n        <div className=\"image-wrap\">\n          <img\n            src=\"/images/official/function/sesManagementHowto01.png\"\n            alt=\"キンクラ_SES案件管理機能\"\n          />\n          <div className=\"triangle\" />\n          <img\n            src=\"/images/official/function/sesManagementHowto02.png\"\n            alt=\"キンクラ_SES案件管理機能\"\n          />\n          <div className=\"triangle\" />\n          <img\n            src=\"/images/official/function/sesManagementHowto03.png\"\n            alt=\"キンクラ_SES案件管理機能\"\n          />\n        </div>\n      </div>\n      <div className=\"howto-area\">\n        <SesManagementHowtoLabel number=\"2\" 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>SES案件管理オプション</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 SesManagementHowto\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\n  ul {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    // border: 1px solid #ababab;\n  }\n\n  li {\n    flex: 1;\n    // border: 1px solid #ff0000;\n    height: 60px;\n    border-top: 1px solid #ebebeb;\n    border-right: 1px dashed #ebebeb;\n  }\n\n  p {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 10px;\n    // border: 1px solid #0000ff;\n    border-radius: 5px;\n    height: calc(100% - 20px);\n    text-align: center;\n    line-height: 38px;\n  }\n\n  .left-cell {\n    flex: 2;\n    min-width: 205px;\n\n    p {\n      justify-content: flex-start;\n      background-color: #f0f0f0;\n      padding-left: 10px;\n      margin-left: 0;\n    }\n  }\n\n  .employees {\n    margin: 10px 10px 10px 0;\n    display: flex;\n    // border: 1px solid #0000ff;\n    border-radius: 5px;\n    height: calc(100% - 10px);\n    background-color: #f0f0f0;\n  }\n\n  .employees-cell {\n    flex: 2;\n    height: 100%;\n    border-bottom: none;\n    min-width: 205px;\n  }\n\n  .line-1 {\n    li {\n      border: none;\n    }\n\n    margin-bottom: 5px;\n\n    .null-cell p {\n      background-color: #ffffff;\n    }\n\n    .business-cell p {\n      background-color: #ffebb5;\n      font-size: 20px;\n    }\n\n    .enterprise-cell p {\n      background-color: #ffd167;\n      font-size: 20px;\n    }\n\n    p {\n      margin: 0 5px;\n      height: 100%;\n      line-height: 58px;\n      border-radius: 2px;\n    }\n  }\n\n  .line-4 {\n    height: 120px;\n\n    div {\n      flex: 1;\n      border-bottom: 1px solid #ebebeb;\n    }\n  }\n\n  .employees-left {\n    flex: 1;\n    margin: 0;\n    padding-left: 10px;\n    // border: 1px solid #adff2f;\n    height: 100%;\n    padding-top: 16px;\n    align-items: start;\n    text-align: start;\n    border-radius: 0;\n    justify-content: flex-start;\n  }\n\n  .employees-right {\n    width: 170px;\n\n    p {\n      padding-left: 10px;\n      padding-top: 8px;\n      height: 50%;\n      margin: 0;\n      border-radius: 0;\n      align-items: start;\n      text-align: start;\n      justify-content: flex-start;\n      border-left: 2px solid #ffffff;\n    }\n\n    p:nth-of-type(1) {\n      border-bottom: 2px solid #ffffff;\n    }\n  }\n\n  // テキストが2行あるときの行の高さ\n  .text-2line {\n    line-height: 19px;\n  }\n\n  ${BreakPoints.large} {\n    p {\n      font-size: 12px;\n    }\n  }\n\n  ${BreakPoints.medium} {\n    margin: 0 20px;\n\n    p {\n      font-size: 10px;\n    }\n\n    .line-1 {\n      li {\n        height: 40px;\n      }\n\n      .business-cell p,\n      .enterprise-cell p {\n        font-size: 12px;\n      }\n    }\n\n    .employees-left {\n      max-width: 80px;\n      padding-right: 10px;\n    }\n  }\n\n  ${BreakPoints.smallest} {\n  }\n`\n\n/**\n * 代理申請機能紹介ページ-利用方法ラベル\n * @constructor\n */\n\nconst SesManagementOptionPriceTable = (): JSX.Element => (\n  // const {  = '' } = props\n\n  <Wrapper>\n    <ul className=\"line-1\">\n      <li className=\"left-cell null-cell\">\n        <p />\n      </li>\n      <li className=\"business-cell\">\n        <p>Business</p>\n      </li>\n      <li className=\"enterprise-cell\">\n        <p>Enterprise</p>\n      </li>\n    </ul>\n    <ul className=\"line-2\">\n      <li className=\"left-cell\">\n        <p>オプション基本料金（月額）</p>\n      </li>\n      <li>\n        <p>10,000円</p>\n      </li>\n      <li>\n        <p>無料</p>\n      </li>\n    </ul>\n    <ul className=\"line-3\">\n      <li className=\"left-cell\">\n        <p>社員の案件管理</p>\n      </li>\n      <li>\n        <p>無料</p>\n      </li>\n      <li>\n        <p>無料</p>\n      </li>\n    </ul>\n    <ul className=\"line-4\">\n      <li className=\"employees-cell\">\n        <div className=\"employees\">\n          <p className=\"employees-left text-2line\">\n            パートナー/個人事業主の\n            <br />\n            案件管理\n          </p>\n          <div className=\"employees-right\">\n            <p>社員数まで</p>\n            <p className=\"text-2line\">\n              101人以上または\n              <br />\n              社員数を超えた人数\n            </p>\n          </div>\n        </div>\n      </li>\n      <div>\n        <li>\n          <p>無料</p>\n        </li>\n        <li>\n          <p>-</p>\n        </li>\n      </div>\n      <div>\n        <li>\n          <p>無料</p>\n        </li>\n        <li>\n          <p>100円/人</p>\n        </li>\n      </div>\n    </ul>\n  </Wrapper>\n)\n\nexport default SesManagementOptionPriceTable\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonH3Set from '../molecules/officialCommonH3Set'\nimport SesManagementOptionPriceTable from './ses-managementOptionPriceTable'\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: 910px;\n    padding: 0 20px;\n    margin: 0 auto;\n    text-align: center;\n    // overflow: hidden;\n  }\n\n  .img-agent-function {\n    margin-top: 40px;\n  }\n\n  .margin-bottom {\n    margin-bottom: 0;\n  }\n\n  .ribbon {\n    margin: 30px 0;\n    display: inline-block;\n    position: relative;\n    height: 26px;\n    line-height: 26px;\n    text-align: center;\n    padding: 0 30px;\n    font-size: 18px;\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: 13px 0 13px 10px;\n    border-color: transparent transparent transparent #f0f0f0;\n    border-style: solid;\n  }\n\n  .ribbon:after {\n    top: 0;\n    right: 0;\n    border-width: 13px 10px 13px 0;\n    border-color: transparent #f0f0f0 transparent transparent;\n    border-style: solid;\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 SesManagementOptionPrice = () => (\n  <Wrapper id=\"ses-management-option-price\">\n    <OfficialCommonH3Set label=\"オプション利用料金\" className=\"margin-bottom\" />\n    <div className=\"p-section-inner\">\n      <div className=\"img-agent-function\">\n        {/* <div className=\"ribbon\"> */}\n        {/*   <p>2023年12月末まではβ版のため、無料でご利用いただけます</p> */}\n        {/* </div> */}\n        <SesManagementOptionPriceTable />\n        <div className=\"caution-text\">\n          <p>\n            {'※上記利用料金は税抜価格です。\\n' +\n              '※Businessプランでは、パートナー/個人事業主は100人まで登録可能です。\\n' +\n              '※上記利用料金や内容は予告なく変更になる可能性があります。予めご了承ください。'}\n          </p>\n        </div>\n      </div>\n    </div>\n  </Wrapper>\n)\n\nexport default SesManagementOptionPrice\n","import styled from '@emotion/styled'\nimport React, { ReactNode } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.section`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  width: 100%;\n  margin: 150px 0;\n  .text-wrap {\n    position: relative;\n    flex: 1;\n    color: #1d4a5d;\n    padding: 0 30px;\n    white-space: pre-wrap;\n    p {\n      font-size: 20px;\n      opacity: 0.7;\n    }\n  }\n  .number-wrap {\n    position: absolute;\n    top: -140px;\n    left: 10px;\n    z-index: -1;\n    opacity: 0.1;\n    p {\n      font-size: 170px;\n    }\n  }\n  .label-area h3 {\n    font-weight: bolder;\n    font-size: 34px;\n    margin-bottom: 20px;\n    white-space: pre-wrap;\n    text-shadow: 0 3px 1px rgb(235, 255, 0, 0.4);\n  }\n\n  .image-area {\n    flex: 1.2;\n    height: fit-content;\n    padding: 0 20px;\n    position: relative;\n    img {\n      width: 100%;\n    }\n  }\n\n  // 吹き出し\n  .merit-comment {\n    z-index: 2;\n    position: absolute;\n    height: 260px;\n    width: 260px;\n    border-radius: 130px;\n    background-color: #fff;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    // filter: drop-shadow(0px 3px 6px #666);\n    .comment-icon {\n      height: 70px;\n      width: fit-content;\n      margin-bottom: 15px;\n      img {\n        height: inherit;\n      }\n    }\n    .comment-text {\n      text-align: center;\n      white-space: pre-wrap;\n      z-index: 2;\n    }\n  }\n  .image-right {\n    .merit-comment {\n      top: -75px;\n      right: -20px;\n      .tail {\n        position: absolute;\n        bottom: 0px;\n        left: 0px;\n        content: '';\n        width: 0;\n        height: 0;\n        border-left: 15px solid transparent;\n        border-right: 35px solid transparent;\n        border-top: 50px solid #fff;\n        margin-top: -5vw;\n        transform: rotate(45deg);\n      }\n    }\n  }\n  .image-left {\n    .merit-comment {\n      top: -75px;\n      left: -20px;\n      .tail {\n        position: absolute;\n        bottom: 0px;\n        right: 0px;\n        content: '';\n        width: 0;\n        height: 0;\n        border-right: 15px solid transparent;\n        border-left: 35px solid transparent;\n        border-top: 50px solid #fff;\n        margin-top: -5vw;\n        transform: rotate(-45deg);\n      }\n    }\n  }\n\n  // 吹き出しの影\n  .merit-shadow {\n    position: absolute;\n    height: 260px;\n    width: 260px;\n    border-radius: 130px;\n    background-color: #ababab;\n    filter: drop-shadow(0px 3px 6px #ababab);\n    mix-blend-mode: multiply;\n  }\n  .image-left {\n    .merit-shadow {\n      top: -75px;\n      left: -20px;\n      .tail {\n        position: absolute;\n        bottom: 0px;\n        right: 0px;\n        content: '';\n        width: 0;\n        height: 0;\n        border-right: 15px solid transparent;\n        border-left: 35px solid transparent;\n        border-top: 50px solid #ababab;\n        margin-top: -5vw;\n        transform: rotate(-45deg);\n      }\n    }\n  }\n  .image-right {\n    .merit-shadow {\n      top: -75px;\n      right: -20px;\n      .tail {\n        position: absolute;\n        bottom: 0px;\n        left: 0px;\n        content: '';\n        width: 0;\n        height: 0;\n        border-left: 15px solid transparent;\n        border-right: 35px solid transparent;\n        border-top: 50px solid #ababab;\n        margin-top: -5vw;\n        transform: rotate(45deg);\n      }\n    }\n  }\n\n  ${BreakPoints.xLarge} {\n    .text-wrap {\n      p {\n        font-size: 14px;\n      }\n    }\n    .number-wrap {\n      top: -100px;\n      left: 20px;\n      p {\n        font-size: 120px;\n      }\n    }\n    .label-area h3 {\n      font-size: 20px;\n      margin-bottom: 20px;\n    }\n    .merit-shadow {\n      height: 160px;\n      width: 160px;\n      border-radius: 80px;\n      .tail {\n      }\n    }\n    .merit-comment {\n      height: 160px;\n      width: 160px;\n      border-radius: 80px;\n      .tail {\n      }\n      .comment-icon {\n        height: 50px;\n        margin-bottom: 5px;\n      }\n      p {\n        font-size: 12px;\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n    .text-wrap {\n      padding: 0 15px;\n    }\n    .number-wrap {\n      top: -100px;\n      left: -10px;\n    }\n  }\n  ${BreakPoints.medium} {\n    flex-direction: column;\n    margin: 100px 0;\n    .text-wrap {\n      padding: 0 30px 30px 15px;\n    }\n    .merit-shadow {\n      top: -10px !important;\n      right: -20px !important;\n      left: auto !important;\n      height: 120px;\n      width: 120px;\n      border-radius: 60px;\n      .tail {\n      }\n    }\n    .merit-comment {\n      top: -10px !important;\n      right: -20px !important;\n      left: auto !important;\n      height: 120px;\n      width: 120px;\n      border-radius: 60px;\n      .tail {\n        left: 0px !important;\n        border-right: 15px solid transparent;\n        border-left: 35px solid transparent;\n        border-top: 50px solid #ababab;\n        margin-top: -5vw;\n        transform: rotate(-45deg);\n      }\n      .comment-icon {\n        display: none;\n      }\n      p {\n        font-size: 8px;\n      }\n    }\n  }\n  ${BreakPoints.smallest} {\n  }\n`\n\ntype Props = {\n  /** タイトル */\n  label: string\n  /** 内容 */\n  children: ReactNode\n  /** メリット番号 */\n  number: string\n  /** スクリーンショット */\n  img: string\n  /** 吹き出し内アイコン */\n  icon: string\n  /** 吹き出し内テキスト */\n  merit: string\n  /** 右に画像 */\n  imageRight?: boolean\n  /** 左に画像 */\n  imageLeft?: boolean\n}\n\n/**\n * 案件管理機能紹介ページ-導入メリット_メリット1つ分コンポーネント\n * @constructor\n */\n\nconst SesManagementMeritArea = (props: Props): JSX.Element => {\n  const {\n    children,\n    label,\n    number,\n    img,\n    imageRight,\n    imageLeft,\n    icon,\n    merit = '',\n  } = props\n\n  return (\n    <Wrapper className=\"anim-fade-up merit-area\">\n      {imageLeft && (\n        <div className=\"image-area image-left\">\n          <img\n            src={`/images/official/function/${img}.png`}\n            alt=\"キンクラ_SES案件管理機能\"\n          />\n          {/** 吹き出しの影 */}\n          <div className=\"merit-shadow\">\n            <div className=\"tail\" />\n          </div>\n          {/** 吹き出し */}\n          <div className=\"merit-comment\">\n            <div className=\"tail\" />\n            <div className=\"comment-icon\">\n              <img\n                src={`/images/official/function/${icon}.png`}\n                alt=\"キンクラ_SES案件管理機能\"\n              />\n            </div>\n            <p className=\"comment-text\">{merit}</p>\n          </div>\n        </div>\n      )}\n      <div className=\"text-wrap\">\n        <div className=\"number-wrap\">\n          <p>{number}</p>\n        </div>\n        <div className=\"text-area\">\n          <div className=\"label-area\">\n            <h3>{label}</h3>\n          </div>\n          <p>{children}</p>\n        </div>\n      </div>\n      {imageRight && (\n        <div className=\"image-area image-right\">\n          <img\n            src={`/images/official/function/${img}.png`}\n            alt=\"キンクラ_SES案件管理機能\"\n          />\n\n          {/** 吹き出しの影 */}\n          <div className=\"merit-shadow\">\n            <div className=\"tail\" />\n          </div>\n          {/** 吹き出し */}\n          <div className=\"merit-comment\">\n            <div className=\"tail\" />\n            <div className=\"comment-icon\">\n              <img\n                src={`/images/official/function/${icon}.png`}\n                alt=\"キンクラ_SES案件管理機能\"\n              />\n            </div>\n            <p className=\"comment-text\">{merit}</p>\n          </div>\n        </div>\n      )}\n    </Wrapper>\n  )\n}\n\nexport default SesManagementMeritArea\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport SesManagementMeritArea from './ses-managementMeritArea'\nimport OfficialCommonH3Set from '../molecules/officialCommonH3Set'\n\nconst Wrapper = styled.section`\n  font-weight: bold;\n  max-width: 1120px;\n  margin: 0 auto;\n  .content-area {\n    position: relative;\n  }\n  .back-ground {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    .triangle {\n      content: '';\n      width: 0;\n      height: 0;\n      border-left: 600px solid transparent;\n      border-right: 600px solid transparent;\n      border-top: 600px solid #deefee;\n      margin-top: -5vw;\n      &:nth-of-type(1) {\n        opacity: 0.3;\n      }\n      &:nth-of-type(2) {\n        opacity: 0.6;\n      }\n      &:nth-of-type(3) {\n        opacity: 0.9;\n      }\n    }\n  }\n  ${BreakPoints.largest} {\n    .back-ground {\n      .triangle {\n        border-left: 500px solid transparent;\n        border-right: 500px solid transparent;\n        border-top: 500px solid #deefee;\n        margin-top: -5vw;\n      }\n    }\n  }\n  ${BreakPoints.xxLarge} {\n    margin: 0 30px;\n  }\n\n  ${BreakPoints.xLarge} {\n    .back-ground {\n      .triangle {\n        border-left: 40vw solid transparent;\n        border-right: 40vw solid transparent;\n        border-top: 40vw solid #deefee;\n        margin-top: -5vw;\n      }\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .merit-area:nth-of-type(2) {\n      flex-direction: column-reverse;\n    }\n  }\n`\n\n/**\n * 案件管理機能紹介ページ-導入メリット\n * @constructor\n */\nconst SesManagementMerit = () => (\n  <Wrapper>\n    <OfficialCommonH3Set label=\"導入メリット\" className=\"fade-in-auto\" />\n\n    <div className=\"p-section-inner content-area\">\n      <div className=\"back-ground\">\n        <div className=\"triangle\" />\n        <div className=\"triangle\" />\n        <div className=\"triangle\" />\n      </div>\n\n      <SesManagementMeritArea\n        number=\"01\"\n        label={'案件に関する膨大な情報を\\n1つにまとめて管理業務の負荷を軽減'}\n        img=\"sesManagementMerit01\"\n        imageRight\n        icon=\"sesManagementMeritIcon01\"\n        merit={\n          '注視したい技術者に\\nウォッチャー機能で\\nマークをつけて\\nさらに便利！'\n        }\n      >\n        {\n          'バラバラに管理しがちな情報を一括で登録できるので案件情報ごとに細かい契約内容と請求情報を1画面で確認できます。\\n類似案件があれば、コピー機能を使って案件情報を登録できるので0から情報を入力する必要がありません。'\n        }{' '}\n      </SesManagementMeritArea>\n      <SesManagementMeritArea\n        number=\"02\"\n        label={'単価目標管理で単価アップ交渉の\\nタイミングも簡単に把握'}\n        img=\"sesManagementMerit02\"\n        imageLeft\n        icon=\"sesManagementMeritIcon02\"\n        merit={\n          '業界の経験年数や\\n技術者本人の年齢で\\n細かく単価目標を\\n設定可能！'\n        }\n      >\n        {\n          '予め経験年数や年齢別にモデル単価設定ができ、各技術者の実単価を一覧で比較することができます。\\n\\nモデル単価を下回っている場合、そこが自動的にクローズアップされるので、次に取るべきアクションが策定しやすくなります。'\n        }{' '}\n      </SesManagementMeritArea>\n      <SesManagementMeritArea\n        number=\"03\"\n        label={'売上データを集計し\\n自動でグラフを生成'}\n        img=\"sesManagementMerit03\"\n        imageRight\n        icon=\"sesManagementMeritIcon03\"\n        merit={\n          '生成されたグラフへ\\nフィルター機能を使えば\\n自分の見たい情報の\\nグラフに変身！'\n        }\n      >\n        {\n          '登録されている案件情報から、会社全体の売上や取引先、部門単位の売上個人の単価推移のグラフを自動で生成します。\\nデータを分析するための、煩わしいグラフ作成の手間もなくなります。'\n        }\n      </SesManagementMeritArea>\n    </div>\n  </Wrapper>\n)\n\nexport default SesManagementMerit\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 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  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 SesManagementFaq = () => {\n  const routeParam = useRouteParam('/function')\n  return (\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=\"SES案件管理機能では、以下のように”SES(客先常駐)”に関わる様々な情報を管理することが可能です。\"\n            idName=\"matter-01\"\n          >\n            <p>\n              ・SES案件及び契約の情報登録、検索、出力\n              <br />\n              ・契約更新の通知\n              <br />\n              ・営業情報の共有、単価履歴の管理\n              <br />\n              ・単価目標の設定および管理\n              <br />\n              ・全社売上や顧客単位の売上、個人の売上推移などのデータ分析\n              <br />\n            </p>\n          </OfficialFaqItems>\n          <OfficialFaqItems\n            question=\"パートナーの案件も管理できますか？\"\n            answer={\n              'パートナーの案件も管理可能です。\\n案件の新規登録時に「所属」の項目で「パートナー」または「個人事業主」を選択してください。'\n            }\n            idName=\"matter-02\"\n          />\n          <OfficialFaqItems\n            question=\"どの権限のユーザがSES案件管理機能を利用できますか？\"\n            answer={\n              '既存権限では「アカウントオーナー」「システム管理者」「上位管理者」「マネージャー」の権限を持つユーザがご利用いただけます。\\nまたオプションを有効化すると「SES営業」権限を新たに設定することができます。'\n            }\n            idName=\"matter-03\"\n          />\n          <OfficialFaqItems\n            question=\"SES案件管理機能を試してみたいです。\"\n            answer={\n              '無料トライアル期間中でもSES案件管理機能をご利用いただくことは可能です。\\nお試しでのご利用を希望される場合は、「お支払い」より「SES案件管理オプション」の利用開始手続きをしてください。'\n            }\n            idName=\"matter-04\"\n          >\n            <p>\n              ※オプション利用の詳細は「\n              <Link to=\"#ses-management-how-to\">利用方法</Link>\n              」をご確認ください。\n            </p>\n          </OfficialFaqItems>\n          <OfficialFaqItems\n            question=\"SES案件管理機能の利用に費用は掛かりますか？\"\n            answer=\"Enterpriseプランをご利用中の場合、オプション基本料金は無料でご利用いただくことができます。\n          Businessプランご利用の場合は月額10,000円(税抜)でご利用いただけます。。\"\n            idName=\"matter-05\"\n          >\n            <p>\n              詳細は「\n              <Link to=\"#ses-management-option-price\">オプション利用料金</Link>\n              」をご確認ください。\n            </p>\n          </OfficialFaqItems>\n          <OfficialFaqItems\n            question=\"お支払いにオプション機能の表示がありません。どうしたらいいですか？\"\n            answer=\"「企業設定」で「「派遣」「客先常駐/SES」が事業内容に含まれるため、拡張機能を利用する」に設定されている企業に限り、お支払いに「オプション」が表示されます。\"\n            idName=\"matter-06\"\n          >\n            <p>\n              ※オプション利用の詳細は「\n              <Link to=\"#ses-management-how-to\">利用方法</Link>\n              」をご確認ください。\n            </p>\n            {/* <div className=\"text-wrap\"> */}\n            {/*   <p> */}\n            {/*     <span>各種設定</span> ＞ <span>企業設定</span> ＞{' '} */}\n            {/*     <span>特定業種向け機能設定</span> で <br /> */}\n            {/*     <span> */}\n            {/*       「派遣」「客先常駐/SES」が事業内容に含まれるため、拡張機能を利用する */}\n            {/*     </span> */}\n            {/*     に設定します */}\n            {/*   </p> */}\n            {/*   <a */}\n            {/*     href=\"https://app.kintaicloud.jp/manage/company\" */}\n            {/*     target=\"_blank\" */}\n            {/*     rel=\"noreferrer\" */}\n            {/*     className=\"company-setting-link\" */}\n            {/*   > */}\n            {/*     ▶ 企業設定 */}\n            {/*   </a> */}\n            {/* </div> */}\n          </OfficialFaqItems>\n          <OfficialFaqItems\n            question=\"常駐者の請求書の発行はできますか？\"\n            answer={\n              'β版では請求書の発行機能はございませんが、2024年のリリースを目指し、現在鋭意開発中です。\\n※リリース時期は予告なく変更される可能性があります。'\n            }\n            idName=\"matter-07\"\n          />\n          <OfficialFaqItems\n            question=\"オプションを解除はすぐにできますか？\"\n            answer=\"オプション機能は「お支払い」からいつでも解除することが可能です。\"\n            idName=\"matter-08\"\n          />\n        </div>\n        <div className=\"common-button\">\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}\n\nexport default SesManagementFaq\n","import styled from '@emotion/styled'\nimport { graphql, PageProps } from 'gatsby'\nimport React from 'react'\nimport OfficialLayout from '../../components/organisms/officialLayout'\nimport OfficialLowHeader from '../../components/organisms/officialLowHeader'\nimport SEO from '../../components/atoms/seo'\nimport SesManagementTop from '../../components/organisms/ses-managementTop'\nimport SesManagementRecommend from '../../components/organisms/ses-managementRecommend'\nimport SesManagementFunction from '../../components/organisms/ses-managementFunction'\nimport SesManagementHowto from '../../components/organisms/ses-managementHowto'\nimport SesManagementOptionPrice from '../../components/organisms/ses-managementOptionPrice'\nimport SesManagementMerit from '../../components/organisms/ses-managementMerit'\nimport SesManagementFaq from '../../components/organisms/ses-managementFaq'\n\nconst Wrapper = styled.main``\n\ntype IProps = PageProps<GatsbyTypes.IndexPageQuery>\n\n/**\n * 機能紹介ページ[SES案件管理]\n * @constructor\n */\nconst SesManagement = ({ location }: IProps) => (\n  <OfficialLayout location={location} className=\"p-page-function\">\n    <SEO title=\"SES案件管理機能\" />\n    <Wrapper>\n      <OfficialLowHeader\n        label=\"SES案件管理機能\"\n        description=\"SES案件に関する情報管理、SES営業のための営業支援ツール。\"\n      />\n      <SesManagementTop />\n      <SesManagementRecommend />\n      <SesManagementMerit />\n      <SesManagementFunction />\n      <SesManagementOptionPrice />\n      <SesManagementHowto />\n      <SesManagementFaq />\n    </Wrapper>\n  </OfficialLayout>\n)\n\nexport default SesManagement\n\nexport const pageQuery = graphql`\n  query SesManagement {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["Wrapper","BreakPoints","props","className","label","description","number","img","src","alt","children","icon","id","href","target","rel","imageRight","imageLeft","merit","routeParam","useRouteParam","question","answer","idName","Link","to","size","onClick","navigate","location","title"],"sourceRoot":""}