{"version":3,"file":"component---src-pages-plan-list-tsx-2d8d40e5fd1f096b0fb9.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/commonH3.tsx","webpack://beaver-help/./src/components/organisms/officialLowHeader.tsx","webpack://beaver-help/./src/components/atoms/officialPlanEnterpriseDetail.tsx","webpack://beaver-help/./src/components/atoms/officialPlanIDetail.tsx","webpack://beaver-help/./src/components/atoms/officialPlanIName.tsx","webpack://beaver-help/./src/components/atoms/officialPlanItem.tsx","webpack://beaver-help/./src/components/atoms/planFunctionType.tsx","webpack://beaver-help/./src/components/molecules/officialPlanIMoreListWrap01.tsx","webpack://beaver-help/./src/components/molecules/officialPlanIMoreListWrap02.tsx","webpack://beaver-help/./src/components/molecules/officialPlanIMoreListWrap03.tsx","webpack://beaver-help/./src/components/molecules/officialPlanIMoreListWrap04.tsx","webpack://beaver-help/./src/components/molecules/officialPlanIMoreListWrap05.tsx","webpack://beaver-help/./src/components/molecules/officialPlanIMoreListWrap06.tsx","webpack://beaver-help/./src/components/molecules/officialPlanIMoreList.tsx","webpack://beaver-help/./src/components/molecules/officialPlanOptionList.tsx","webpack://beaver-help/./src/components/organisms/officialLowPlan01.tsx","webpack://beaver-help/./src/components/atoms/updateInfoContent.tsx","webpack://beaver-help/./src/pages/plan-list.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\n\nconst H3 = styled.h3`\n  font-size: 1em;\n  margin: 0 0 15px;\n  border: none;\n  display: inline-block;\n  span {\n    margin: 0 0 3px;\n    display: inline-block;\n    position: relative;\n    border-bottom: solid 2px #e5e5e5;\n    &:before {\n      position: absolute;\n      bottom: -2px;\n      left: 0;\n      width: 16px;\n      height: 2px;\n      content: '';\n      background: #3ec7b3;\n    }\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** タイトル */\n  label: string\n}\n\n/**\n * 共通H3タグ\n * @param props\n * @constructor\n */\nconst CommonH3 = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <H3 className={className}>\n      <span>{props.label}</span>\n    </H3>\n  )\n}\n\nexport default CommonH3\n","import styled from '@emotion/styled'\nimport React, { ReactNode } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  position: relative;\n  background-image: url(/images/official/common/bgPublic02.png);\n  background-color: #ffffff;\n  background-size: cover;\n  border-bottom: solid 4px #dcdee1;\n\n  &:before,\n  &:after {\n    display: block;\n    content: '';\n    position: absolute;\n    width: 20%;\n    border-bottom: solid 4px #dcdee1;\n    bottom: -16px;\n  }\n\n  &:after {\n    right: 0;\n  }\n\n  .p-low-head-inner {\n    display: flex;\n    max-width: 1366px;\n    margin: 0 auto;\n    padding: 34px 0;\n    justify-content: center;\n\n    .p-inner-txt {\n      p {\n        font-weight: 800;\n        font-size: 2.5em;\n        text-align: center;\n        margin: 0 auto 20px;\n        white-space: pre-wrap;\n      }\n\n      h2 {\n        font-size: 1em;\n        font-weight: 400;\n        margin: 0 auto 10px;\n        text-align: center;\n        width: calc(100vw - 80px);\n      }\n    }\n  }\n\n  ${BreakPoints.largest} {\n  }\n\n  ${BreakPoints.medium} {\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** タイトル */\n  label?: string\n  /** 補足テキスト */\n  description?: string\n  /** 内容（画像） */\n  children?: ReactNode\n}\n\n/**\n * サービスサイト下層用ヘッダー\n * @param props\n * @constructor\n */\nconst OfficialLowHeader = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={className}>\n      <div className=\"p-low-head-inner\">\n        <div className=\"p-inner-txt\">\n          {props.label && <p>{props.label}</p>}\n          {props.description && <h2>{props.description}</h2>}\n          {props.children}\n        </div>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default OfficialLowHeader\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  text-align: center;\n  padding: 20px;\n  height: 310px;\n\n  .price-txt {\n    font-weight: 600;\n    font-size: 44px;\n\n    span {\n      font-size: 24px;\n\n      &.sub-txt {\n        font-size: 14px;\n        padding: 0 5px;\n      }\n    }\n  }\n\n  .txt-color-label {\n    width: 100%;\n    margin: 0 auto 15px;\n    color: #272d2c;\n    font-size: 14px;\n    font-weight: 500;\n    height: 50px;\n    border-bottom: solid 1px #cdd6dd;\n\n    &.narrow-only {\n      display: none;\n      border: none;\n      height: 15px;\n    }\n  }\n\n  .number-txt {\n    font-weight: 600;\n    font-size: 16px;\n  }\n\n  .detail-txt {\n    max-width: 268px;\n    min-height: 156px;\n    margin: 20px 5px 0;\n    text-align: left;\n    white-space: pre-wrap;\n    line-height: 1.8;\n  }\n\n  ${BreakPoints.xLarge} {\n    padding: 10px;\n    height: 370px;\n\n    .detail-txt {\n      height: 100px;\n    }\n\n    @media screen and (max-width: 920px) {\n      .price-txt {\n        span {\n          &.sub-txt {\n            display: none;\n          }\n        }\n      }\n\n      .txt-color-label {\n        &.narrow-only {\n          display: block;\n        }\n\n        > span {\n          display: none;\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n    height: 120px;\n\n    .txt-color-label {\n      border-bottom: none;\n    }\n\n    .price-txt {\n      font-size: 30px;\n\n      span {\n        font-size: 16px;\n      }\n    }\n\n    .detail-txt {\n      display: none;\n    }\n  }\n\n  ${BreakPoints.medium} {\n    padding: 10px 5px;\n  }\n\n  ${BreakPoints.small} {\n    height: 90px;\n\n    .price-txt {\n      font-size: 18px;\n\n      span {\n        font-size: 10px;\n      }\n    }\n\n    .txt-color-label {\n      font-size: 10px;\n\n      &.narrow-only {\n        height: 5px;\n      }\n    }\n  }\n`\n\ntype Props = {\n  /** 金額 */\n  price: string\n  /** 概要 */\n  description?: string\n}\n\n/**\n * エンタープライズ情報概要コンポーネント\n * @param props\n * @constructor\n */\nconst officialPlanEnterpriseDetail = (props: Props): JSX.Element => (\n  <Wrapper>\n    <p className=\"price-txt\">\n      <span className=\"sub-txt\">月額</span>\n      300\n      <span>円</span>\n      <span className=\"sub-txt\">(税抜)</span>\n    </p>\n    <p className=\"txt-color-label narrow-only\">月額（税抜）</p>\n    <p className=\"txt-color-label\">\n      （<span>最低利用料：</span>30,000円~）\n    </p>\n    <p className=\"detail-txt\">{props.description}</p>\n  </Wrapper>\n)\n\nexport default officialPlanEnterpriseDetail\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  text-align: center;\n  padding: 20px;\n  height: 310px;\n\n  .price-txt {\n    font-weight: 600;\n    font-size: 44px;\n\n    span {\n      font-size: 24px;\n\n      &.sub-txt {\n        font-size: 14px;\n        padding: 0 5px;\n      }\n    }\n  }\n\n  .txt-color-label {\n    width: 100%;\n    margin: 0 auto 15px;\n    color: #272d2c;\n    font-size: 14px;\n    font-weight: 500;\n    height: 50px;\n    border-bottom: solid 1px #cdd6dd;\n\n    &.narrow-only {\n      display: none;\n      border: none;\n      height: 15px;\n    }\n  }\n\n  .number-txt {\n    font-weight: 600;\n    font-size: 16px;\n  }\n\n  .detail-txt {\n    max-width: 268px;\n    min-height: 156px;\n    margin: 20px 5px 0;\n    text-align: left;\n    white-space: pre-wrap;\n    line-height: 1.8;\n  }\n\n  ${BreakPoints.xLarge} {\n    padding: 10px;\n    height: 370px;\n\n    .detail-txt {\n      height: 100px;\n    }\n\n    @media screen and (max-width: 920px) {\n      .price-txt {\n        span {\n          &.sub-txt {\n            display: none;\n          }\n        }\n      }\n\n      .txt-color-label {\n        &.narrow-only {\n          display: block;\n        }\n\n        > span {\n          display: none;\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n    height: 120px;\n\n    .txt-color-label {\n      border-bottom: none;\n    }\n\n    .price-txt {\n      font-size: 30px;\n\n      span {\n        font-size: 16px;\n      }\n    }\n\n    .detail-txt {\n      display: none;\n    }\n  }\n\n  ${BreakPoints.medium} {\n    padding: 10px 5px;\n  }\n\n  ${BreakPoints.small} {\n    height: 90px;\n\n    .price-txt {\n      font-size: 18px;\n\n      span {\n        font-size: 10px;\n      }\n    }\n\n    .txt-color-label {\n      font-size: 10px;\n\n      &.narrow-only {\n        height: 5px;\n      }\n    }\n  }\n`\n\ntype Props = {\n  /** 金額 */\n  price: string\n  /** 概要 */\n  description?: string\n}\n\n/**\n * フリー、ビジネス情報概要コンポーネント\n * @param props\n * @constructor\n */\nconst OfficialPlanDetail = (props: Props): JSX.Element => (\n  <Wrapper>\n    <p className=\"price-txt\">\n      <span className=\"sub-txt\">月額</span>\n      {props.price}\n      <span>円</span>\n      <span className=\"sub-txt\">(税抜)</span>\n    </p>\n    <p className=\"txt-color-label narrow-only\">月額（税抜）</p>\n    <p className=\"txt-color-label\">\n      （<span>最低利用料：</span>4,500円~）\n    </p>\n    <p className=\"detail-txt\">{props.description}</p>\n  </Wrapper>\n)\n\nexport default OfficialPlanDetail\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  justify-content: center;\n  align-items: center;\n  border-radius: 2px;\n  width: 100%;\n  height: 58px;\n  font-size: 28px;\n  font-weight: 600;\n  color: #454f63;\n  padding: 0 15px;\n  &.plan-enterprise {\n    background: #ffd167;\n  }\n  &.plan-business {\n    background: #ffebb5;\n  }\n  &.plan-free {\n    background: #f1f1f1;\n  }\n  ${BreakPoints.medium} {\n    font-size: 24px;\n  }\n  ${BreakPoints.small} {\n    font-size: 18px;\n    word-break: break-all;\n    line-height: 1em;\n    padding: 0 5px;\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className: string\n  /** ラベル(プラン名) */\n  label: string\n}\n\n/**\n * プラン名コンポーネント\n * @param props\n * @constructor\n */\nconst OfficialPlanName = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={`${className} plan-name low`}>{props.label}</Wrapper>\n  )\n}\n\nexport default OfficialPlanName\n","import styled from '@emotion/styled'\nimport React, { ReactNode } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  border-bottom: 1px solid #ebebeb;\n  height: 45px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0 0 4px;\n\n  &.caution-item {\n    .info-txt {\n      width: 100%;\n      position: relative;\n\n      span {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n        width: 12px;\n        padding-left: 1px;\n        font-weight: 600;\n        height: 12px;\n        top: -3px;\n        right: 6px;\n        border-radius: 100vh;\n        border: solid 1px #00b5a6;\n        font-size: 10px;\n        text-align: center;\n        color: #00b5a6;\n      }\n\n      &:after {\n        display: block;\n        opacity: 0;\n        position: absolute;\n        top: -27px;\n        left: 77%;\n        content: attr(data-text);\n        width: max-content;\n        font-weight: 300;\n        padding: 5px;\n        border-radius: 5px;\n        font-size: 14px;\n        color: #ffffff;\n        background: rgba(0, 0, 0, 0);\n        z-index: 10;\n        transition: 0.4s;\n      }\n\n      &:hover {\n        transition: 0.2s;\n\n        &:after {\n          opacity: 1;\n          background: rgba(0, 0, 0, 0.7);\n        }\n      }\n    }\n  }\n\n  &.disabled-item {\n    font-weight: 400;\n    color: #dadce0;\n  }\n\n  ${BreakPoints.medium} {\n    font-weight: 400;\n    word-break: break-all;\n    font-size: 12px;\n\n    &.caution-item {\n      .info-txt {\n        width: 100%;\n        position: relative;\n\n        span {\n          display: none;\n        }\n      }\n    }\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** 機能名 */\n  label?: string\n  /** 説明 */\n  info?: string\n  /** 内容 */\n  children?: ReactNode\n}\n\n/**\n * プラン用機能1つ分コンポーネント\n * @param props\n * @constructor\n */\nconst OfficialPlanItem = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={className}>\n      {props.info ? (\n        <div className=\"info-txt\" data-text={props.info}>\n          {props.label}\n          <span>i</span>\n        </div>\n      ) : (\n        <>\n          {!props.label ? (\n            <div>{props.children}</div>\n          ) : (\n            <div>{props.label}</div>\n          )}\n        </>\n      )}\n    </Wrapper>\n  )\n}\n\nexport default OfficialPlanItem\n","import styled from '@emotion/styled'\nimport React, { ReactNode } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  border-bottom: 1px solid #ebebeb;\n  height: 45px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0 0 4px;\n  font-weight: 600;\n  color: #454f63;\n  justify-content: center;\n\n  img {\n    width: 23px;\n    height: auto;\n  }\n\n  .notes {\n    font-size: 12px;\n    margin-left: 3px;\n    margin-top: -5px;\n  }\n\n  ${BreakPoints.medium} {\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** 機能名 */\n  mark?: boolean\n  /** 説明 */\n  info?: string\n  /** 注釈フラグ */\n  notes?: boolean\n  /** 注釈内容 */\n  notesLabel?: string\n  /** 子要素 */\n  children?: ReactNode\n}\n\n/**\n * プラン用機能1つ分コンポーネント\n * @param props\n * @constructor\n */\nconst PlanFunctionType = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={className}>\n      {props.mark ? (\n        <img src=\"/images/official/common/imgCheck01.png\" alt=\"利用可能機能\" />\n      ) : (\n        props.info\n      )}\n      {props.notes && <p className=\"notes\">{props.notesLabel}</p>}\n      {props.children}\n    </Wrapper>\n  )\n}\n\nexport default PlanFunctionType\n","import React from 'react'\nimport CommonH3 from '../atoms/commonH3'\nimport OfficialPlanName from '../atoms/officialPlanIName'\nimport OfficialPlanItem from '../atoms/officialPlanItem'\nimport PlanFunctionType from '../atoms/planFunctionType'\n\n/**\n * プラン別機能-基本機能\n * @constructor\n */\nconst OfficialPlanMoreListWrap01 = (): JSX.Element => (\n  <>\n    <div className=\"ac-menu-inside\">\n      {/** 機能名 */}\n      <div className=\"p-section-plan\">\n        <div className=\"p-function-wrap wrap-02\">\n          <CommonH3 label=\"基本機能\" />\n        </div>\n        <div className=\"p-plan-list\">\n          <OfficialPlanItem label=\"PC-WEB打刻\" />\n          <OfficialPlanItem label=\"スマホ-WEB打刻\" />\n          <OfficialPlanItem label=\"アプリ打刻\" />\n          <OfficialPlanItem label=\"打刻防止通知\" />\n          <OfficialPlanItem label=\"休憩の自動追加\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"勤務地変更\" />\n          <OfficialPlanItem label=\"残業申請\" />\n          <OfficialPlanItem label=\"休暇申請\" />\n          <OfficialPlanItem label=\"勤怠申請\" />\n          <OfficialPlanItem label=\"MTG申請\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"通勤交通費申請\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"シフト作成\" />\n          <OfficialPlanItem label=\"シフトマスタ設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"自社勤務表\" />\n          <OfficialPlanItem label=\"客先勤務表\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"勤怠アラート\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"勤務表PDF出力\" />\n          <OfficialPlanItem label=\"交通費精算\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"社員検索\" />\n          <OfficialPlanItem label=\"セルフアラート\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"管理アラート\" className=\"caution-item\" />\n          <OfficialPlanItem\n            label=\"Googleチャット通知\"\n            className=\"caution-item\"\n          />\n        </div>\n      </div>\n      {/** フリー */}\n      <div className=\"p-section-plan plan03\">\n        <OfficialPlanName label=\"Free\" className=\"plan-free\" />\n        <div className=\"p-plan-list mt-040\">\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"－\" />\n        </div>\n      </div>\n      {/** ビジネス */}\n      <div className=\"p-section-plan plan02\">\n        <OfficialPlanName label=\"Business\" className=\"plan-business\" />\n        <div className=\"p-plan-list mt-040\">\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n        </div>\n      </div>\n      {/** エンタープライズ */}\n      <div className=\"p-section-plan plan01\">\n        <OfficialPlanName label=\"Enterprise\" className=\"plan-enterprise\" />\n        <div className=\"p-plan-list mt-040\">\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n        </div>\n      </div>\n    </div>\n  </>\n)\n\nexport default OfficialPlanMoreListWrap01\n","import React from 'react'\nimport CommonH3 from '../atoms/commonH3'\nimport OfficialPlanItem from '../atoms/officialPlanItem'\nimport PlanFunctionType from '../atoms/planFunctionType'\n\n/**\n * プラン別機能-管理職機能\n * @constructor\n */\nconst OfficialPlanMoreListWrap02 = (): JSX.Element => (\n  <>\n    <div className=\"ac-menu-inside\">\n      {/** 機能名 */}\n      <div className=\"p-section-plan\">\n        <div className=\"p-function-wrap wrap-03\">\n          <CommonH3 label=\"管理職機能\" />\n        </div>\n        <div className=\"p-plan-list\">\n          <OfficialPlanItem label=\"提出状況確認\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"出勤者管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"打刻情報管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"有給管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"休暇の取得管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"休暇の残日数管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"残業警告\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"月間の残業管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"年間の残業管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"勤務実態集計\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"一覧カスタマイズ\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"一覧エクスポート\" className=\"caution-item\" />\n          <OfficialPlanItem\n            label=\"帳票出力/データエクスポート\"\n            className=\"caution-item\"\n          />\n        </div>\n      </div>\n\n      {/** フリー */}\n      <div className=\"p-section-plan plan03\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType info=\"最大3ヵ月を表示\" />\n          <PlanFunctionType info=\"当日分を表示\" />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"最大3ヵ月を表示\" />\n          <PlanFunctionType info=\"最大2年分を表示\" />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType mark />\n        </div>\n      </div>\n\n      {/** ビジネス */}\n      <div className=\"p-section-plan plan02\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType info=\"最大5年分を表示\" />\n          <PlanFunctionType info=\"最大5年分を表示\" />\n          <PlanFunctionType info=\"最大5年分を表示\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"最大5年分を表示\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"最大5年分を表示\" />\n          <PlanFunctionType info=\"最大6年分を表示\" />\n          <PlanFunctionType info=\"最大5年分を表示\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n        </div>\n      </div>\n\n      {/** エンタープライズ */}\n      <div className=\"p-section-plan plan01\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n        </div>\n      </div>\n    </div>\n  </>\n)\n\nexport default OfficialPlanMoreListWrap02\n","import React from 'react'\nimport CommonH3 from '../atoms/commonH3'\nimport OfficialPlanItem from '../atoms/officialPlanItem'\nimport PlanFunctionType from '../atoms/planFunctionType'\n\n/**\n * プラン別機能-人事労務機能\n * @constructor\n */\nconst OfficialPlanMoreListWrap03 = (): JSX.Element => (\n  <>\n    <div className=\"ac-menu-inside\">\n      {/** 機能名 */}\n      <div className=\"p-section-plan\">\n        <div className=\"p-function-wrap wrap-03\">\n          <CommonH3 label=\"人事労務機能\" />\n        </div>\n        <div className=\"p-plan-list\">\n          <OfficialPlanItem label=\"社員基本情報設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"拡張情報設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"権限設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"休職設定\" className=\"caution-item\" />\n          <OfficialPlanItem className=\"caution-item\">\n            <a href=\"#modal-bnr01\">代理申請</a>\n          </OfficialPlanItem>\n          <OfficialPlanItem label=\"組織管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"お知らせ投稿\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"給与ソフト連携\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"有給自動付与\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"休暇付与\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"データ移行\" className=\"caution-item\" />\n        </div>\n      </div>\n      {/** フリー */}\n      <div className=\"p-section-plan plan03\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType info=\"一部制限有り\" />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"最大5グループ\" />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n        </div>\n      </div>\n      {/** ビジネス */}\n      <div className=\"p-section-plan plan02\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"最大15グループ\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n        </div>\n      </div>\n      {/** エンタープライズ */}\n      <div className=\"p-section-plan plan01\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n        </div>\n      </div>\n    </div>\n  </>\n)\n\nexport default OfficialPlanMoreListWrap03\n","import React from 'react'\nimport CommonH3 from '../atoms/commonH3'\nimport OfficialPlanItem from '../atoms/officialPlanItem'\nimport PlanFunctionType from '../atoms/planFunctionType'\n\n/**\n * プラン別機能-システム管理\n * @constructor\n */\nconst OfficialPlanMoreListWrap04 = (): JSX.Element => (\n  <>\n    <div className=\"ac-menu-inside\">\n      {/** 機能名 */}\n      <div className=\"p-section-plan\">\n        <div className=\"p-function-wrap wrap-03\">\n          <CommonH3 label=\"システム管理\" />\n        </div>\n        <div className=\"p-plan-list\">\n          <OfficialPlanItem label=\"企業設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"承認ルール設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"36協定設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"時間まるめ設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"有給休暇設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"特別休暇設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"祝日設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"勤務形態管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"役職管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"事業所管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"勤務地管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"アラート設定\" className=\"caution-item\" />\n        </div>\n      </div>\n      {/** フリー */}\n      <div className=\"p-section-plan plan03\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType info=\"一部制限有り\" />\n          <PlanFunctionType info=\"最大2種/2段階\" />\n          <PlanFunctionType info=\"基本設定のみ\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"最大8種\" />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"最大3種\" />\n          <PlanFunctionType info=\"最大5種\" />\n          <PlanFunctionType info=\"本社のみ\" />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"－\" />\n        </div>\n      </div>\n      {/** ビジネス */}\n      <div className=\"p-section-plan plan02\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"最大3段階\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"最大4拠点\" />\n          <PlanFunctionType info=\"最大6地点\" />\n          <PlanFunctionType info=\"一部制限有り\" />\n        </div>\n      </div>\n      {/** エンタープライズ */}\n      <div className=\"p-section-plan plan01\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"最大5段階\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n        </div>\n      </div>\n    </div>\n  </>\n)\n\nexport default OfficialPlanMoreListWrap04\n","import React from 'react'\nimport CommonH3 from '../atoms/commonH3'\nimport OfficialPlanItem from '../atoms/officialPlanItem'\nimport PlanFunctionType from '../atoms/planFunctionType'\n\n/**\n * プラン別機能-サポート\n * @constructor\n */\nconst OfficialPlanMoreListWrap05 = (): JSX.Element => (\n  <>\n    <div className=\"ac-menu-inside mb-020\">\n      {/** 機能名 */}\n      <div className=\"p-section-plan\">\n        <div className=\"p-function-wrap wrap-03\">\n          <CommonH3 label=\"サポート\" />\n        </div>\n        <div className=\"p-plan-list\">\n          <OfficialPlanItem label=\"機能カスタマイズ\" className=\"caution-item\" />\n          <OfficialPlanItem\n            label=\"カスタマーサポート\"\n            className=\"caution-item\"\n          />\n        </div>\n      </div>\n\n      {/** フリー */}\n      <div className=\"p-section-plan plan03\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"メール\" />\n        </div>\n      </div>\n\n      {/** ビジネス */}\n      <div className=\"p-section-plan plan02\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"メール\" />\n        </div>\n      </div>\n\n      {/** エンタープライズ */}\n      <div className=\"p-section-plan plan01\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"メール\" />\n        </div>\n      </div>\n    </div>\n  </>\n)\n\nexport default OfficialPlanMoreListWrap05\n","import React from 'react'\nimport CommonH3 from '../atoms/commonH3'\nimport PlanFunctionType from '../atoms/planFunctionType'\nimport OfficialPlanItem from '../atoms/officialPlanItem'\n\n/**\n * プラン別機能-オプション\n * @constructor\n */\nconst OfficialPlanMoreListWrap06 = (): JSX.Element => (\n  <>\n    <div className=\"ac-menu-inside\">\n      {/** 機能名 */}\n      <div className=\"p-section-plan\">\n        <div className=\"p-function-wrap wrap-03\">\n          <CommonH3 label=\"オプション機能\" />\n        </div>\n        <div className=\"p-plan-list\">\n          <OfficialPlanItem className=\"caution-item h-60\">\n            <a href=\"#modal-bnr03\">経費精算</a>\n          </OfficialPlanItem>\n          <OfficialPlanItem className=\"caution-item h-60\">\n            <a href=\"#modal-bnr02\">案件管理機能</a>\n          </OfficialPlanItem>\n        </div>\n      </div>\n      {/** フリー */}\n      <div className=\"p-section-plan plan03\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType className=\"h-60\" info=\"－\" />\n          <PlanFunctionType className=\"h-60\" info=\"－\" />\n        </div>\n      </div>\n      {/** ビジネス */}\n      <div className=\"p-section-plan plan02\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType className=\"h-60\" info=\"月額無料で利用可能\">\n            <div className=\"tooltip5\">\n              <img src=\"/images/info.png\" alt=\"キンクラの経費精算機能\" />\n              <div className=\"description5\">\n                <img\n                  src=\"/images/official/plan/ImgPlanOptionExpense001.png\"\n                  alt=\"キンクラの経費精算機能オプション料金\"\n                />\n              </div>\n            </div>\n          </PlanFunctionType>\n          <PlanFunctionType className=\"h-60\" info=\"月額無料で利用可能\">\n            <div className=\"tooltip5\">\n              <img\n                src=\"/images/info.png\"\n                alt=\"キンクラのSES案件管理機能オプション料金\"\n              />\n              <div className=\"description5\">\n                <img\n                  src=\"/images/official/plan/ImgPlanOptionProject001.png\"\n                  alt=\"キンクラのSES案件管理機能オプション料金\"\n                />\n              </div>\n            </div>\n          </PlanFunctionType>\n        </div>\n      </div>\n      {/** エンタープライズ */}\n      <div className=\"p-section-plan plan01\">\n        <div className=\"p-plan-list mt-090\">\n          <PlanFunctionType className=\"h-60\" info=\"利用可能\">\n            <div className=\"tooltip5\">\n              <img src=\"/images/info.png\" alt=\"キンクラの経費精算機能\" />\n              <div className=\"description5\">\n                <img\n                  src=\"/images/official/plan/ImgPlanOptionExpense001.png\"\n                  alt=\"キンクラの経費精算機能オプション料金\"\n                />\n              </div>\n            </div>\n          </PlanFunctionType>\n          <PlanFunctionType className=\"h-60\" info=\"利用可能\">\n            <div className=\"tooltip5\">\n              <img\n                src=\"/images/info.png\"\n                alt=\"キンクラのSES案件管理機能オプション料金\"\n              />\n              <div className=\"description5\">\n                <img\n                  src=\"/images/official/plan/ImgPlanOptionProject001.png\"\n                  alt=\"キンクラのSES案件管理機能オプション料金\"\n                />\n              </div>\n            </div>\n          </PlanFunctionType>\n        </div>\n      </div>\n    </div>\n    {/* <div className=\"ac-menu-inside mb-020\"> */}\n    {/*   <div className=\"annotation-wrap\"> */}\n    {/*     <p> */}\n    {/*       ※1 */}\n    {/*       Businessプランでのご利用には月額10,000円(税抜)のオプション基本料金が発生します。詳細は */}\n    {/*       <a */}\n    {/*         href=\"https://develop.d6n6ncnzc2qmb.amplifyapp.com/function/stg/ses-management#ses-management-option-price\" */}\n    {/*         target=\"_blank\" */}\n    {/*         rel=\"noreferrer\" */}\n    {/*       > */}\n    {/*         こちら */}\n    {/*       </a> */}\n    {/*       をご確認ください。 */}\n    {/*     </p> */}\n    {/*     <p> */}\n    {/*       ※2 */}\n    {/*       Enterpriseプランのオプション基本料金は無料ですが、利用状況に応じて追加料金が発生する可能性があります。詳細は */}\n    {/*       <a */}\n    {/*         href=\"https://develop.d6n6ncnzc2qmb.amplifyapp.com/function/stg/ses-management#ses-management-option-price\" */}\n    {/*         target=\"_blank\" */}\n    {/*         rel=\"noreferrer\" */}\n    {/*       > */}\n    {/*         こちら */}\n    {/*       </a> */}\n    {/*       をご確認ください。 */}\n    {/*     </p> */}\n    {/*   </div> */}\n    {/* </div> */}\n  </>\n)\n\nexport default OfficialPlanMoreListWrap06\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialPlanMoreListWrap01 from './officialPlanIMoreListWrap01'\nimport OfficialPlanMoreListWrap02 from './officialPlanIMoreListWrap02'\nimport OfficialPlanMoreListWrap03 from './officialPlanIMoreListWrap03'\nimport OfficialPlanMoreListWrap04 from './officialPlanIMoreListWrap04'\nimport OfficialPlanMoreListWrap05 from './officialPlanIMoreListWrap05'\nimport OfficialPlanMoreListWrap06 from './officialPlanIMoreListWrap06'\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  .ac-menu input {\n    display: none;\n  }\n\n  .ac-menu label {\n    max-width: 640px;\n    margin: 25px auto 0;\n    height: 50px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: #3ec7b3;\n    cursor: pointer;\n    position: relative;\n    z-index: 0;\n    border-radius: 25px;\n    color: #ffffff;\n    font-size: 16px;\n    font-weight: 600;\n    transition: 0.3s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  .ac-menu label:after {\n    position: absolute;\n    right: 20px; /* 左からの距離 */\n    top: 50%; /* 上下中央配置 */\n    -webkit-transform: translateY(-50%);\n    transform: translateY(-50%);\n    content: '＋'; /* アイコン */\n    font-size: 1.8em;\n    font-weight: 300;\n  }\n\n  .ac-menu input:checked ~ label::after {\n    content: '−'; /* クリック後のアイコン */\n  }\n\n  .ac-menu .ac-menu-inside {\n    height: 0;\n    opacity: 0;\n    transition: 0.2s; /* 開閉スピード */\n\n    .p-section-plan {\n      display: none;\n    }\n  }\n\n  .ac-menu input:checked ~ .ac-menu-inside {\n    padding: 15px 0 0 0;\n    height: auto;\n    opacity: 1;\n\n    .p-section-plan {\n      display: block;\n      width: 100%;\n    }\n  }\n\n  .ac-menu input:checked ~ label {\n    background: #fafafa;\n    color: #cccccc;\n    margin-bottom: 20px;\n  }\n\n  .ac-menu-inside {\n    display: flex;\n    justify-content: space-between;\n\n    .p-section-plan {\n      width: 100%;\n    }\n  }\n\n  ${BreakPoints.xLarge} {\n    .p-section-inner,\n    .p-more-wrap {\n      .p-section-plan {\n        .p-function-wrap {\n          h3 {\n            span {\n              &:before {\n              }\n            }\n          }\n\n          // 高さを合わせるためのdiv\n          &.wrap-01 {\n            height: 430px;\n          }\n\n          &.wrap-02 {\n          }\n\n          &.wrap-03 {\n          }\n        }\n\n        &.plan03 {\n          .price-txt {\n            span {\n            }\n          }\n\n          .txt-color-label {\n          }\n        }\n\n        .p-plan-list {\n        }\n\n        &.plan01,\n        &.plan02,\n        &.plan03 {\n          .p-plan-list {\n          }\n        }\n      }\n    }\n\n    .p-more-wrap {\n    }\n  }\n\n  ${BreakPoints.large} {\n    .p-section-inner,\n    .p-more-wrap {\n      justify-content: center;\n\n      .p-section-plan {\n        .p-function-wrap {\n          // 高さを合わせるためのdiv\n          &.wrap-01 {\n            width: 170px;\n            height: 180px;\n          }\n        }\n\n        &.plan01,\n        &.plan02,\n        &.plan03 {\n          width: calc(90vw / 4) !important;\n\n          .p-plan-list {\n          }\n        }\n      }\n    }\n\n    .p-more-wrap {\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .p-section-inner,\n    .p-more-wrap {\n      justify-content: center;\n      padding: 10px 10px 0;\n\n      .p-section-plan {\n        .p-function-wrap {\n          // 高さを合わせるためのdiv\n          &.wrap-01 {\n            width: 100%;\n            height: 180px;\n          }\n        }\n\n        &.plan01,\n        &.plan02,\n        &.plan03 {\n          width: calc(90vw / 4) !important;\n        }\n      }\n    }\n\n    .p-more-wrap {\n    }\n  }\n\n  ${BreakPoints.small} {\n    .p-section-inner,\n    .p-more-wrap {\n      justify-content: center;\n      padding: 10px 10px 0;\n\n      .p-section-plan {\n        .p-function-wrap {\n          // 高さを合わせるためのdiv\n          &.wrap-01 {\n            width: 100%;\n            height: 150px;\n          }\n        }\n\n        &.plan01,\n        &.plan02,\n        &.plan03 {\n          width: calc(90vw / 4);\n        }\n      }\n    }\n  }\n`\n\n/**\n * プラン別機能をもっと見るコンポーネント\n * @constructor\n */\nconst OfficialPlanMoreList = (): JSX.Element => (\n  <Wrapper>\n    <div className=\"ac-menu\">\n      <input id=\"ac-1\" type=\"checkbox\" />\n      <label htmlFor=\"ac-1\">機能をすべて表示する</label>\n      {/** 基本機能 */}\n      <OfficialPlanMoreListWrap01 />\n      {/** 管理職機能 */}\n      <OfficialPlanMoreListWrap02 />\n      {/** 人事労務機能 */}\n      <OfficialPlanMoreListWrap03 />\n      {/** システム管理 */}\n      <OfficialPlanMoreListWrap04 />\n      {/** サポート */}\n      <OfficialPlanMoreListWrap05 />\n      {/** オプション */}\n      <OfficialPlanMoreListWrap06 />\n    </div>\n  </Wrapper>\n)\n\nexport default OfficialPlanMoreList\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialPlanMoreListWrap06 from './officialPlanIMoreListWrap06'\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  .ac-menu-inside {\n    display: flex;\n    justify-content: center;\n\n    .wrap-03 {\n      width: 230px;\n    }\n\n    .p-section-plan {\n      //width: 100%;\n      //max-width: 230px;\n\n      &.plan01,\n      &.plan02,\n      &.plan03 {\n        max-width: unset;\n        width: 100%;\n      }\n    }\n  }\n\n  ${BreakPoints.xLarge} {\n    .p-section-inner,\n    .p-more-wrap {\n      .p-section-plan {\n        .p-function-wrap {\n          h3 {\n            span {\n              &:before {\n              }\n            }\n          }\n\n          // 高さを合わせるためのdiv\n          &.wrap-01 {\n            height: 430px;\n          }\n\n          &.wrap-02 {\n          }\n\n          &.wrap-03 {\n          }\n        }\n\n        &.plan03 {\n          .price-txt {\n            span {\n            }\n          }\n\n          .txt-color-label {\n          }\n        }\n\n        .p-plan-list {\n        }\n\n        &.plan01,\n        &.plan02,\n        &.plan03 {\n          .p-plan-list {\n          }\n        }\n      }\n    }\n\n    .p-more-wrap {\n    }\n  }\n\n  ${BreakPoints.large} {\n    .ac-menu-inside {\n      // 高さを合わせるためのdiv\n      .wrap-03 {\n        width: 170px;\n        height: 180px;\n      }\n\n      .p-more-wrap {\n        justify-content: center;\n      }\n\n      .p-more-wrap {\n      }\n    }\n\n    .plan01,\n    .plan02,\n    .plan03 {\n      max-width: calc(90vw / 4) !important;\n\n      .p-plan-list {\n      }\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .p-section-inner,\n    .p-more-wrap {\n      justify-content: center;\n      //padding: 10px 10px 0;\n\n      .p-section-plan {\n        .p-function-wrap {\n          // 高さを合わせるためのdiv\n        }\n      }\n    }\n\n    .wrap-03 {\n      min-width: 110px !important;\n      width: calc(90vw / 4) !important;\n      height: 180px;\n    }\n\n    .plan01,\n    .plan02,\n    .plan03 {\n      max-width: calc(90vw / 4) !important;\n    }\n\n    .p-more-wrap {\n    }\n\n    .h-60 {\n      height: 60px;\n      line-height: 14px;\n    }\n  }\n\n  ${BreakPoints.small} {\n    .p-section-inner,\n    .p-more-wrap {\n      justify-content: center;\n      padding: 10px 10px 0;\n\n      .p-section-plan {\n        .p-function-wrap {\n          // 高さを合わせるためのdiv\n          &.wrap-01 {\n            width: 100%;\n            height: 150px;\n          }\n        }\n      }\n    }\n\n    .plan01,\n    .plan02,\n    .plan03 {\n      max-width: calc(90vw / 4);\n    }\n  }\n`\n\n/**\n * プラン一覧オプション表示\n * @constructor\n */\nconst OfficialPlanOptionList = (): JSX.Element => (\n  <Wrapper>\n    {/** オプション */}\n    <OfficialPlanMoreListWrap06 />\n  </Wrapper>\n)\n\nexport default OfficialPlanOptionList\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport CommonH3 from '../atoms/commonH3'\nimport OfficialPlanEnterpriseDetail from '../atoms/officialPlanEnterpriseDetail'\nimport OfficialPlanDetail from '../atoms/officialPlanIDetail'\nimport OfficialPlanName from '../atoms/officialPlanIName'\nimport OfficialPlanItem from '../atoms/officialPlanItem'\nimport PlanFunctionType from '../atoms/planFunctionType'\nimport OfficialPlanMoreList from '../molecules/officialPlanIMoreList'\nimport OfficialPlanOptionList from '../molecules/officialPlanOptionList'\n\nconst Wrapper = styled.section`\n  width: 100%;\n\n  .p-section-inner,\n  .p-more-wrap {\n    max-width: 1090px;\n    display: flex;\n    justify-content: space-between;\n    margin: 80px auto 0;\n    padding: 20px 20px 0;\n    background-color: #ffffff;\n    border-radius: 10px 10px 0 0;\n\n    .p-section-plan {\n      .p-function-wrap {\n        display: flex;\n        align-items: flex-end;\n\n        h3 {\n          display: block;\n          font-size: 18px;\n          margin: 0;\n          width: 100%;\n\n          span {\n            display: block;\n            margin: 0;\n            padding: 0 0 5px;\n\n            &:before {\n              width: 20%;\n            }\n          }\n        }\n\n        // 高さを合わせるためのdiv\n        &.wrap-01 {\n          height: 370px;\n          width: 230px;\n        }\n\n        &.wrap-02 {\n          height: 100px;\n        }\n\n        &.wrap-03 {\n          height: 92px;\n        }\n      }\n\n      border-right: dotted 1px #e9e9e9;\n\n      &.plan03 {\n        .price-txt {\n          margin-bottom: 36px;\n\n          span {\n            display: none;\n          }\n        }\n\n        .txt-color-label {\n          height: 0;\n          overflow: hidden;\n          margin: 16px auto 15px;\n        }\n      }\n\n      .p-plan-list {\n        padding: 0 4px 0 0;\n        margin: 0 0 0 4px;\n      }\n\n      &.plan01,\n      &.plan02,\n      &.plan03 {\n        .p-plan-list {\n          border-top: solid 2px #e5e5e5;\n        }\n      }\n    }\n  }\n\n  .p-more-wrap {\n    margin: 0 auto 80px;\n    padding: 0 20px 10px;\n    background-color: #ffffff;\n    border-radius: 0 0 10px 10px;\n    transition: 0.4s;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .annotation-wrap {\n    margin-top: 10px;\n    font-size: 14px;\n    width: 100%;\n    text-align: start;\n  }\n\n  ${BreakPoints.xLarge} {\n    .p-section-inner,\n    .p-more-wrap {\n      .p-section-plan {\n        .p-function-wrap {\n          h3 {\n            span {\n              &:before {\n              }\n            }\n          }\n\n          // 高さを合わせるためのdiv\n          &.wrap-01 {\n            height: 430px;\n          }\n\n          &.wrap-02 {\n          }\n\n          &.wrap-03 {\n          }\n        }\n\n        &.plan03 {\n          .price-txt {\n            span {\n            }\n          }\n\n          .txt-color-label {\n          }\n        }\n\n        .p-plan-list {\n        }\n\n        &.plan01,\n        &.plan02,\n        &.plan03 {\n          .p-plan-list {\n          }\n        }\n      }\n    }\n\n    .p-more-wrap {\n    }\n\n    @media screen and (max-width: 920px) {\n      .p-section-inner,\n      .p-more-wrap {\n        .p-section-plan {\n          .p-function-wrap {\n            // 高さを合わせるためのdiv\n            &.wrap-01 {\n              height: 430px;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n    .p-section-inner,\n    .p-more-wrap {\n      justify-content: center;\n\n      .p-section-plan {\n        .p-function-wrap {\n          h3 {\n            font-size: 14px;\n\n            span {\n              &:before {\n              }\n            }\n          }\n\n          // 高さを合わせるためのdiv\n          &.wrap-01 {\n            width: 170px;\n            height: 180px;\n          }\n\n          &.wrap-02 {\n          }\n\n          &.wrap-03 {\n          }\n        }\n\n        &.plan03 {\n          .price-txt {\n            span {\n            }\n          }\n\n          .txt-color-label {\n          }\n        }\n\n        .p-plan-list {\n        }\n\n        &.plan01,\n        &.plan02,\n        &.plan03 {\n          width: calc(90vw / 4);\n\n          .p-plan-list {\n          }\n        }\n      }\n    }\n\n    .p-more-wrap {\n    }\n\n    .annotation-wrap {\n      font-size: 12px;\n      margin: 0 15px;\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .p-section-inner,\n    .p-more-wrap {\n      justify-content: center;\n      //padding: 10px 10px 0;\n\n      .p-section-plan {\n        .p-function-wrap {\n          h3 {\n            span {\n              &:before {\n              }\n            }\n          }\n\n          // 高さを合わせるためのdiv\n          &.wrap-01 {\n            min-width: 110px;\n            width: calc(90vw / 4);\n          }\n\n          &.wrap-02 {\n          }\n\n          &.wrap-03 {\n          }\n        }\n\n        &.plan03 {\n          .price-txt {\n            span {\n            }\n          }\n\n          .txt-color-label {\n          }\n        }\n\n        .p-plan-list {\n        }\n\n        &.plan01,\n        &.plan02,\n        &.plan03 {\n          width: calc(90vw / 4);\n\n          .p-plan-list {\n          }\n        }\n      }\n    }\n\n    .p-more-wrap {\n    }\n  }\n\n  ${BreakPoints.small} {\n    .p-section-inner,\n    .p-more-wrap {\n      justify-content: center;\n      //padding: 10px 10px 0;\n\n      .p-section-plan {\n        .p-function-wrap {\n          // 高さを合わせるためのdiv\n          &.wrap-01 {\n            min-width: 110px !important;\n            width: calc(90vw / 4) !important;\n            height: 150px;\n          }\n        }\n\n        .p-plan-list {\n          // 高さを合わせるためのdiv\n          &.wrap-01 {\n            min-width: 110px !important;\n            width: calc(90vw / 4) !important;\n            height: 150px;\n            margin: 0;\n          }\n        }\n\n        &.plan01,\n        &.plan02,\n        &.plan03 {\n          width: calc(90vw / 4);\n        }\n      }\n    }\n  }\n`\n\n/**\n * サービスサイト料金-プラン表\n * @constructor\n */\nconst OfficialLowPlan01 = () => (\n  <Wrapper>\n    <div className=\"p-section-inner\">\n      {/** 機能名 */}\n      <div className=\"p-section-plan\">\n        <div className=\"p-function-wrap wrap-01\">\n          <CommonH3 label=\" \" />\n        </div>\n        <div className=\"p-plan-list wrap-01\">\n          <OfficialPlanItem label=\"利用可能人数\" />\n          <OfficialPlanItem label=\"PC/スマホでの打刻\" />\n          <OfficialPlanItem label=\"残業/休暇申請\" />\n          <OfficialPlanItem label=\"オリジナルシフト\" />\n          <OfficialPlanItem label=\"客先勤務表対応\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"交通費精算\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"36協定の残業管理\" className=\"caution-item\" />\n          <OfficialPlanItem\n            label=\"年5日の有給取得管理\"\n            className=\"caution-item\"\n          />\n          <OfficialPlanItem label=\"出勤者管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"勤務実態集計\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"システム通知\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"管理アラート\" className=\"caution-item\" />\n          <OfficialPlanItem\n            label=\"従業員へのお知らせ\"\n            className=\"caution-item\"\n          />\n          <OfficialPlanItem label=\"組織管理\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"承認ルール設定\" className=\"caution-item\" />\n          <OfficialPlanItem label=\"給与ソフト連携\" className=\"caution-item\" />\n          <OfficialPlanItem className=\"caution-item\">\n            <a href=\"#modal-bnr01\">代理申請</a>\n          </OfficialPlanItem>\n          <OfficialPlanItem label=\"機能カスタマイズ\" className=\"caution-item\" />\n        </div>\n      </div>\n      {/** フリー */}\n      <div className=\"p-section-plan plan03\">\n        <OfficialPlanName label=\"Free\" className=\"plan-free\" />\n        <OfficialPlanDetail\n          price=\"無料\"\n          description=\"スタートアップ・特定のグループ内で従業員向け勤怠機能を利用したい場合におすすめのプランです\"\n        />\n        <div className=\"p-plan-list\">\n          <PlanFunctionType info=\"20名まで\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"当日分を表示\" />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"最大5グループ\" />\n          <PlanFunctionType info=\"最大2種/2段階\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"－\" />\n        </div>\n      </div>\n      {/** ビジネス */}\n      <div className=\"p-section-plan plan02\">\n        <OfficialPlanName label=\"Business\" className=\"plan-business\" />\n        <OfficialPlanDetail\n          price=\"150\"\n          description=\"管理職向け機能も活用し、勤怠業務効率を改善されたい中・小規模の企業におすすめのプランです\"\n        />\n        <div className=\"p-plan-list\">\n          <PlanFunctionType info=\"100名まで\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"最大5年分を表示\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"最大15グループ\" />\n          <PlanFunctionType info=\"最大3段階\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"－\" />\n          <PlanFunctionType info=\"－\" />\n        </div>\n      </div>\n      {/** エンタープライズ */}\n      <div className=\"p-section-plan plan01\">\n        <OfficialPlanName label=\"Enterprise\" className=\"plan-enterprise\" />\n        <OfficialPlanEnterpriseDetail\n          price=\"300\"\n          description=\"キンクラをフル活用されたい大規模企業または自社独自の機能をご利用されたい場合におすすめのプランです\"\n        />\n        <div className=\"p-plan-list\">\n          <PlanFunctionType info=\"無制限\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType info=\"最大5段階\" />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n          <PlanFunctionType mark />\n        </div>\n      </div>\n    </div>\n    <div className=\"p-more-wrap\">\n      <OfficialPlanOptionList />\n      <OfficialPlanMoreList />\n    </div>\n  </Wrapper>\n)\n\nexport default OfficialLowPlan01\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport OfficialCommonBtn from './officialCommonBtn'\n\nconst Wrapper = styled.div`\n  &.modal-wrapper {\n    padding: 15px 10px;\n\n    .modal-window {\n      max-width: 710px;\n      padding: 10px;\n\n      .modal-content {\n        position: relative;\n        max-height: calc(100vh - 40px);\n\n        img {\n          margin: 0 0 10px;\n          width: 100%;\n          height: auto;\n        }\n      }\n    }\n  }\n`\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** ID名 */\n  idName?: string\n}\n\n/**\n * アップデート情報表示コンテンツ（ポップアップ表示）\n */\nconst UpdateInfoContent = (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          <img\n            src=\"/images/official/feature/imgUpdateVer02.png\"\n            alt=\"2.0アップデート内容\"\n          />\n          <OfficialCommonBtn\n            size=\"mega\"\n            onClick={() => {\n              // navigate('/function/agent-mode')\n              window.open('/function/agent-mode', '_blank')\n            }}\n          >\n            代理申請の詳細を見る\n          </OfficialCommonBtn>\n        </div>\n        <a href=\"#!\" className=\"modal-close\">\n          ×\n        </a>\n      </div>\n    </Wrapper>\n  )\n}\nexport default UpdateInfoContent\n","import styled from '@emotion/styled'\nimport { graphql, PageProps } from 'gatsby'\nimport { navigate } from 'gatsby-link'\nimport React from 'react'\nimport OfficialCommonBtn from '../components/atoms/officialCommonBtn'\nimport SEO from '../components/atoms/seo'\nimport OfficialLayout from '../components/organisms/officialLayout'\nimport OfficialLowHeader from '../components/organisms/officialLowHeader'\nimport OfficialLowPlan01 from '../components/organisms/officialLowPlan01'\nimport BreakPoints from '../styles/breakPoints'\nimport UpdateInfoContentV4 from '../components/atoms/updateInfoContentV4'\nimport UpdateInfoContentV3 from '../components/atoms/updateInfoContentV3'\nimport UpdateInfoContent from '../components/atoms/updateInfoContent'\nimport useRouteParam from '../hooks/useRouteParam'\n\nconst Wrapper = styled.main`\n  .p-top-data-wrap {\n    max-width: 1090px;\n    border-radius: 8px;\n    margin: -20px auto 60px;\n    padding: 20px;\n    text-align: center;\n    position: relative;\n    width: 90vw;\n\n    &:before {\n      content: '';\n      display: block;\n      position: absolute;\n      width: 90%;\n      height: 3px;\n      left: 5%;\n      top: 33px;\n      border-radius: 2px;\n      background: #3ec7b3;\n      z-index: 0;\n    }\n\n    p {\n      margin: 0 auto 20px;\n      padding: 3px 10px;\n      width: max-content;\n      background: #f8f8f8;\n      position: relative;\n      z-index: 1;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      word-break: break-all;\n    }\n\n    button {\n      margin: 0;\n    }\n  }\n\n  .tooltip5 {\n    position: relative;\n    cursor: pointer;\n    display: inline-block;\n    z-index: 100;\n\n    img {\n      width: 20px;\n    }\n\n    .description5 {\n      display: none;\n      position: absolute;\n      padding: 10px;\n      font-size: 12px;\n      line-height: 1.6em;\n      color: #fff;\n      border-radius: 5px;\n      background: rgba(50, 50, 50, 0.9);\n      width: auto;\n      z-index: 200;\n\n      img {\n        width: 90vw;\n        max-width: 700px;\n      }\n    }\n\n    &:hover .description5 {\n      display: inline-block;\n      bottom: 20px;\n      right: 0;\n    }\n  }\n\n  .div-modal {\n    &.modal-wrapper {\n      .modal-window {\n        padding-top: 0;\n\n        .modal-content {\n          display: flex;\n          position: relative;\n\n          img {\n            width: 100%;\n            height: 100%;\n            margin: 54px 0 0;\n            border: solid 2px #cccccc;\n          }\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .p-top-data-wrap {\n      p {\n        width: 100%;\n      }\n    }\n  }\n`\n\ntype IProps = PageProps<GatsbyTypes.IndexPageQuery>\n\n/**\n * 料金ページ[サービスサイト料金]\n * @constructor\n */\nconst PlanListPage = ({ location }: IProps) => {\n  const routeParam = useRouteParam('/service-faq')\n  return (\n    <OfficialLayout location={location} className=\"p-page-plan\">\n      <SEO title=\"料金プラン\" />\n      <Wrapper>\n        <OfficialLowHeader\n          label=\"料金プラン\"\n          description=\"企業規模に合わせた3つの料金プランをご案内します\"\n        />\n        <OfficialLowPlan01 />\n        <div className=\"p-top-data-wrap\">\n          <p>\n            お客様からよくお問い合わせいただくご質問を、Q&amp;A形式でご案内しています。\n          </p>\n          <OfficialCommonBtn\n            size=\"large\"\n            level=\"weak\"\n            onClick={() => {\n              navigate(routeParam)\n            }}\n          >\n            よくあるご質問\n          </OfficialCommonBtn>\n        </div>\n      </Wrapper>\n      <UpdateInfoContentV4 idName=\"modal-bnr03\" />\n      <UpdateInfoContentV3 idName=\"modal-bnr02\" />\n      <UpdateInfoContent idName=\"modal-bnr01\" />\n    </OfficialLayout>\n  )\n}\n\nexport default PlanListPage\n\nexport const pageQuery = graphql`\n  query PlanListPage {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["H3","props","className","label","Wrapper","BreakPoints","description","children","price","info","mark","src","alt","notes","notesLabel","href","id","type","htmlFor","idName","size","onClick","window","open","location","routeParam","useRouteParam","title","level","navigate"],"sourceRoot":""}