{"version":3,"file":"64b47865a45e6ff2afa8f30a8dfb66ba9ae50abc-f73b0e0d4841f3536871.js","mappings":"wKAGO,IAAMA,GAAO,yR,yDCwBpB,IAdwB,SAACC,GACvB,MAA2BA,EAAnBC,UAAAA,OAAR,MAAoB,GAApB,EAEA,OACE,QAAC,IAAD,CAASA,UAAS,kBAAoBA,IACpC,aAAGC,KAAMF,EAAMG,SACb,eACEC,IAAI,iDACJC,IAAI,yB,yDCMd,IAdwB,SAACL,GACvB,MAA2BA,EAAnBC,UAAAA,OAAR,MAAoB,GAApB,EAEA,OACE,QAAC,IAAD,CAASA,UAAS,kBAAoBA,IACpC,aAAGC,KAAMF,EAAMG,SACb,eACEC,IAAI,iDACJC,IAAI,oB,qECjBRN,GAAO,sgBAkDTO,EAAAA,EAAAA,OAlDS,qHAiETA,EAAAA,EAAAA,SAjES,qBAoGb,IAd4B,SAACN,GAC3B,MAA2BA,EAAnBC,UAAAA,OAAR,MAAoB,GAApB,EAEA,OACE,QAACF,EAAD,CAASE,UAAWA,IAClB,eAAKA,UAAU,MAAMD,EAAMO,QAC3B,iBAAIP,EAAMQ,cACV,eAAKP,UAAU,cACb,yB,0FC5FR,IAAMF,GAAO,+oBAgFb,IA1B8B,WAC5B,IAAMU,GAAaC,EAAAA,EAAAA,GAAc,aACjC,OACE,QAACX,EAAD,MACE,eAAKE,UAAU,oBACb,eAAKA,UAAU,mCACb,aAAGA,UAAU,yCAAb,uBAGA,eACEG,IAAI,4CACJC,IAAI,cAGR,QAAC,IAAD,CACEM,KAAK,OACLC,QAAS,YACPC,EAAAA,EAAAA,IAASJ,KAHb,a,gHCvER,IAAMV,GAAO,2xCA4Jb,EAtB4B,SAACC,GAAD,OAC1B,QAACD,EAAD,MACE,aAAGE,UAAU,aAAb,QACA,eAAKA,UAAU,mBACb,eAAKA,UAAU,kBAEb,eACEG,IAAG,6BAA+BJ,EAAMc,KAArC,OACHT,IAAKL,EAAMO,UAGf,eAAKN,UAAU,oBAEb,eAAKA,UAAU,YAAYD,EAAMO,QAEjC,aAAGN,UAAU,eAAeD,EAAMQ,eAIrCR,EAAMe,W,iCCnJLhB,GAAO,ikBAuCTO,EAAAA,EAAAA,OAvCS,MAwFb,EApCgC,SAACN,GAC/B,MAA2BA,EAAnBC,UAAAA,OAAR,MAAoB,GAApB,EACA,OACE,yBACE,QAAC,EAAD,CAASA,UAAWA,IAClB,eAAKA,UAAU,6BACb,QAAC,EAAD,CACEM,MAAM,OACNC,YAAY,gDACZM,KAAK,kBAEL,QAAC,IAAD,CAAiBX,OAAO,mBAE1B,QAAC,EAAD,CACEI,MAAM,YACNC,YAAY,mDACZM,KAAK,kBAEL,QAAC,IAAD,CAAiBX,OAAO,qBAW9B,QAAC,IAAD,CAAqBA,OAAO,iBAC5B,QAAC,IAAD,CAAqBA,OAAO","sources":["webpack://beaver-help/./src/components/atoms/updateInfoBnr.tsx","webpack://beaver-help/./src/components/atoms/updateInfoBnrV3.tsx","webpack://beaver-help/./src/components/atoms/updateInfoBnrV4.tsx","webpack://beaver-help/./src/components/molecules/officialCommonH3Set.tsx","webpack://beaver-help/./src/components/molecules/officialGalleryBtnSet.tsx","webpack://beaver-help/./src/components/atoms/officialNewFunction.tsx","webpack://beaver-help/./src/components/organisms/officialNewFunctionItem.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\n\nexport const Wrapper = styled.div`\n  display: block;\n  max-width: 480px;\n  margin: 0 30px;\n  width: 50vw;\n\n  a {\n    transition: 0.3s;\n    display: block;\n    width: 100%;\n\n    img {\n      filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));\n      width: 100%;\n    }\n\n    &:hover {\n      transform: scale(1.05);\n      opacity: 1;\n      transition: 0.6s;\n    }\n  }\n`\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** リンク先 */\n  idName?: string\n}\n\n/**\n * アップデート情報バナー\n */\nconst UpdateInfoBnr = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={`function-banner${className}`}>\n      <a href={props.idName}>\n        <img\n          src=\"/images/official/feature/bnrTopUpdateVer02.png\"\n          alt=\"ver2.0アップデート情報\"\n        />\n      </a>\n    </Wrapper>\n  )\n}\nexport default UpdateInfoBnr\n","import React from 'react'\nimport { Wrapper } from './updateInfoBnr'\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** リンク先 */\n  idName?: string\n}\n\n/**\n * アップデート情報バナー\n */\nconst UpdateInfoBnrV3 = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={`function-banner${className}`}>\n      <a href={props.idName}>\n        <img\n          src=\"/images/official/feature/bnrTopUpdateVer03.png\"\n          alt=\"ver3.0 SES案件管理機能\"\n        />\n      </a>\n    </Wrapper>\n  )\n}\nexport default UpdateInfoBnrV3\n","import React from 'react'\nimport { Wrapper } from './updateInfoBnr'\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** リンク先 */\n  idName?: string\n}\n\n/**\n * アップデート情報バナー\n */\nconst UpdateInfoBnrV4 = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={`function-banner${className}`}>\n      <a href={props.idName}>\n        <img\n          src=\"/images/official/feature/bnrTopUpdateVer04.png\"\n          alt=\"ver4.0 経費精算\"\n        />\n      </a>\n    </Wrapper>\n  )\n}\nexport default UpdateInfoBnrV4\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  width: 100%;\n  text-align: center;\n  margin: 0 0 60px;\n\n  .h3 {\n    font-size: 2.5em;\n    margin: 0 0 20px;\n    white-space: pre-wrap;\n    font-weight: bold;\n  }\n\n  p {\n    white-space: pre-wrap;\n    font-weight: 600;\n    opacity: 0.6;\n  }\n\n  .p-h3-line {\n    width: 48px;\n    height: 4px;\n    margin: 20px auto;\n    position: relative;\n\n    &:before,\n    &:after {\n      display: block;\n      content: '';\n      position: absolute;\n      width: 4px;\n      height: 4px;\n      border-radius: 2px;\n      background: #3ec7b3;\n      top: 0;\n    }\n\n    &:after {\n      left: 8px;\n    }\n\n    span {\n      display: block;\n      background: #3ec7b3;\n      width: 32px;\n      margin-left: auto;\n      height: 4px;\n      border-radius: 2px;\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .h3 {\n      font-size: 2em;\n    }\n\n    margin: 0 auto 30px;\n    width: calc(100vw - 80px);\n    word-break: break-word;\n\n    p {\n      width: 70%;\n      margin: 0 auto;\n    }\n  }\n\n  ${BreakPoints.smallest} {\n    p {\n      width: 260px;\n    }\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** タイトル */\n  label?: string\n  /** 補足テキスト */\n  description?: string\n}\n\n/**\n * 共通H3タグ:h3→divタグへ変更\n * @param props\n * @constructor\n */\nconst OfficialCommonH3Set = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={className}>\n      <div className=\"h3\">{props.label}</div>\n      <p>{props.description}</p>\n      <div className=\"p-h3-line\">\n        <span />\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default OfficialCommonH3Set\n","import styled from '@emotion/styled'\nimport { navigate } from 'gatsby-link'\nimport React from 'react'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.div`\n  width: 100%;\n  background: #ffffff;\n  text-align: center;\n  position: relative;\n\n  .p-section-inner {\n    max-width: 480px;\n    padding: 60px 0;\n    margin: 0 auto;\n    position: relative;\n\n    .p-section-gallery {\n      width: 100%;\n      margin: 0 auto 60px;\n      padding: 30px 0;\n      background: #ffffff;\n      position: relative;\n      border-bottom: solid 4px #ffc60c;\n\n      &:after {\n        display: block;\n        position: absolute;\n        content: '';\n        width: 60px;\n        height: 60px;\n        background: #ffffff;\n        border-bottom: solid 4px #ffc60c;\n        border-right: solid 4px #ffc60c;\n        transform: rotate(45deg);\n        bottom: -32px;\n        left: 44%;\n      }\n\n      p {\n        position: relative;\n        z-index: 2;\n      }\n\n      img {\n        display: block;\n        position: absolute;\n        width: 40px;\n        height: auto;\n        top: 0;\n        left: -40px;\n      }\n    }\n  }\n`\n/**\n * ギャラリー誘導ボタンセット\n * @constructor\n */\nconst OfficialGalleryBtnSet = () => {\n  const routeParam = useRouteParam('/gallery/')\n  return (\n    <Wrapper>\n      <div className=\"p-section-inner\">\n        <div className=\"p-section-gallery anim-fade-up\">\n          <p className=\"txt-center txt-size-26 txt-bold-green\">\n            ご好評いただいている機能を公開中です\n          </p>\n          <img\n            src=\"/images/official/common/iconSupport01.png\"\n            alt=\"最大2ヶ月無料\"\n          />\n        </div>\n        <OfficialCommonBtn\n          size=\"mega\"\n          onClick={() => {\n            navigate(routeParam)\n          }}\n        >\n          ギャラリー\n        </OfficialCommonBtn>\n      </div>\n    </Wrapper>\n  )\n}\nexport default OfficialGalleryBtnSet\n","import styled from '@emotion/styled'\nimport React, { ReactNode } from 'react'\n\nconst Wrapper = styled.div`\n  width: 90vw;\n  max-width: 480px;\n  position: relative;\n  z-index: 1;\n  background: #ffffff;\n  padding: 40px 30px 20px;\n  border-radius: 10px;\n  box-shadow: 5px 5px 0 #ffee81;\n\n  .new-label {\n    position: absolute;\n    border-radius: 5px 0 5px 0;\n    background: #189b6e;\n    color: #ffffff;\n    font-weight: 600;\n    font-size: 1.325em;\n    top: 0;\n    left: 0;\n    padding: 5px;\n  }\n\n  .function-inner {\n    display: flex;\n    margin-bottom: 20px;\n\n    .function-icon {\n      margin-right: 10px;\n\n      img {\n        max-width: 140px;\n        margin-top: 20px;\n      }\n    }\n\n    .function-detail {\n      .name-txt {\n        margin: 0 auto 10px;\n        font-weight: 600;\n        font-size: 1.625em;\n        color: #ff9600;\n      }\n\n      .description {\n        width: 100%;\n        white-space: pre-wrap;\n      }\n    }\n  }\n\n  /** 関連バナーclassName */\n\n  .function-banner {\n    width: 90%;\n    margin: 0 auto;\n\n    a {\n      transition: 0.2s;\n\n      img {\n        filter: unset;\n      }\n\n      &:hover {\n        transform: scale(1);\n        opacity: 0.6;\n      }\n    }\n  }\n\n  @media (max-width: 990px) {\n    margin: 20px auto;\n    position: relative;\n    z-index: 1;\n    background: #ffffff;\n    padding: 40px 30px 20px;\n    border-radius: 10px;\n    box-shadow: 5px 5px 0 #ffee81;\n\n    .new-label {\n      position: absolute;\n      border-radius: 5px 0 5px 0;\n      background: #189b6e;\n      color: #ffffff;\n      font-weight: 600;\n      font-size: 1.325em;\n      top: 0;\n      left: 0;\n      padding: 5px;\n    }\n\n    .function-inner {\n      display: flex;\n      margin-bottom: 20px;\n\n      .function-icon {\n        margin-right: 10px;\n\n        img {\n          max-width: 140px;\n          margin-top: 20px;\n        }\n      }\n\n      .function-detail {\n        .name-txt {\n          margin: 0 auto 10px;\n          font-weight: 600;\n          font-size: 1.625em;\n          color: #ff9600;\n        }\n\n        .description {\n          width: 100%;\n          white-space: pre-wrap;\n        }\n      }\n    }\n  }\n`\ntype Props = {\n  /** タイトル */\n  label: string\n  /** 画像ファイル名 */\n  icon: string\n  /** 内容（画像） */\n  children: ReactNode\n  /** 補足テキスト */\n  description: string\n}\n\n/**\n * アップデート情報表示コンテンツ（ポップアップ表示）\n */\nconst OfficialNewFunction = (props: Props): JSX.Element => (\n  <Wrapper>\n    <p className=\"new-label\">新機能</p>\n    <div className=\"function-inner\">\n      <div className=\"function-icon\">\n        {/** 機能アイコン */}\n        <img\n          src={`/images/official/function/${props.icon}.png`}\n          alt={props.label}\n        />\n      </div>\n      <div className=\"function-detail\">\n        {/** 機能名 */}\n        <div className=\"name-txt\">{props.label}</div>\n        {/** 機能説明 */}\n        <p className=\"description\">{props.description}</p>\n      </div>\n    </div>\n    {/** 関連バナー */}\n    {props.children}\n  </Wrapper>\n)\nexport default OfficialNewFunction\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport UpdateInfoBnrV3 from '../atoms/updateInfoBnrV3'\nimport OfficialNewFunction from '../atoms/officialNewFunction'\nimport UpdateInfoContentV3 from '../atoms/updateInfoContentV3'\nimport UpdateInfoContentV4 from '../atoms/updateInfoContentV4'\nimport UpdateInfoBnrV4 from '../atoms/updateInfoBnrV4'\n\nconst Wrapper = styled.div`\n  background: #cdebe4;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  margin-bottom: 45px;\n  padding: 80px 0;\n\n  &:after {\n    display: block;\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-right: 65px solid transparent;\n    border-left: 65px solid transparent;\n    border-top: 45px solid #cdebe4;\n    border-bottom: 0;\n    bottom: -45px;\n  }\n\n  .p-new-inner {\n    display: flex;\n    width: 100%;\n    max-width: 1080px;\n    margin: 0 auto;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n  }\n\n  @media (max-width: 990px) {\n    padding: 40px 0;\n    .p-new-inner {\n      flex-direction: column;\n    }\n  }\n\n  ${BreakPoints.medium} {\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n}\n\n/**\n * サービスサイト新機能紹介エリア\n * @constructor\n */\nconst OfficialNewFunctionItem = (props: Props): JSX.Element => {\n  const { className = '' } = props\n  return (\n    <>\n      <Wrapper className={className}>\n        <div className=\"p-new-inner anim-fade-up\">\n          <OfficialNewFunction\n            label=\"経費精算\"\n            description=\"電子帳簿保存法に対応した、シンプルで低コストな経費精算をキンクラからそのままご利用できます\"\n            icon=\"imgFunction06\"\n          >\n            <UpdateInfoBnrV4 idName=\"#modal-bnr03\" />\n          </OfficialNewFunction>\n          <OfficialNewFunction\n            label=\"SES案件管理機能\"\n            description=\"契約期間や単価情報などSES案件に関する様々なデータをキンクラ上で容易に管理することができます。\"\n            icon=\"imgFunction47\"\n          >\n            <UpdateInfoBnrV3 idName=\"#modal-bnr02\" />\n          </OfficialNewFunction>\n          {/* <OfficialNewFunction */}\n          {/*   label=\"代理申請機能\" */}\n          {/*   description=\"代理申請モードに切り替えることで、本人の代わりに各種申請の修正が可能になります。\" */}\n          {/*   icon=\"imgFunction48\" */}\n          {/* > */}\n          {/*   <UpdateInfoBnr idName=\"#modal-bnr01\" /> */}\n          {/* </OfficialNewFunction> */}\n        </div>\n      </Wrapper>\n      <UpdateInfoContentV4 idName=\"modal-bnr03\" />\n      <UpdateInfoContentV3 idName=\"modal-bnr02\" />\n      {/* <UpdateInfoContent idName=\"modal-bnr01\" /> */}\n    </>\n  )\n}\n\nexport default OfficialNewFunctionItem\n"],"names":["Wrapper","props","className","href","idName","src","alt","BreakPoints","label","description","routeParam","useRouteParam","size","onClick","navigate","icon","children"],"sourceRoot":""}