{"version":3,"file":"3f7a3ff7b9028fe2889ac5811a5c38f627566739-7866f01d6e509a1e07fa.js","mappings":"gMAGA,IAAMA,GAAO,gkBAyDb,EANkB,SAACC,GACjB,MAA2BA,EAAnBC,UAAAA,OAAR,MAAoB,GAApB,EAEA,OAAO,QAACF,EAAD,CAASE,UAAWA,KCpDvBC,GAAE,0kCA2GJC,EAAAA,EAAAA,OA3GI,oEAsJR,EAvBoB,SAACH,GACnB,MAA2BA,EAAnBC,UAAAA,OAAR,MAAoB,GAApB,EACA,OACE,QAACC,EAAD,CAAID,UAAWA,IACb,cAAIA,UAAU,YACZ,0BACA,QAAC,EAAD,CAAWA,UAAU,WACrB,yBAEF,cAAIA,UAAU,YACZ,0BACA,QAAC,EAAD,CAAWA,UAAU,WACrB,2BAEF,cAAIA,UAAU,YACZ,0BACA,QAAC,EAAD,CAAWA,UAAU,WACrB,2B,4HC5IFF,GAAO,wDAGTI,EAAAA,EAAAA,MAHS,MAyDb,IAvC8B,SAAC,GAAD,IAAGC,EAAH,EAAGA,MAAOC,EAAV,EAAUA,SAAV,OAC5B,eAAKC,GAAG,YACN,QAAC,IAAD,MACE,gBACEC,KAAK,WACLC,QAAQ,6FAEV,4vBAqBF,QAAC,IAAD,OACA,sDACA,QAACT,EAAD,KACGK,IAAS,QAAC,IAAD,CAAWA,MAAOA,IAC3BC,IAEH,QAAC,IAAD,OACA,QAAC,IAAD,S,qEC1DEN,GAAO,woBAgDTI,EAAAA,EAAAA,QAhDS,KAmDTA,EAAAA,EAAAA,OAnDS,MAuFb,IAhB0B,SAACH,GACzB,MAA2BA,EAAnBC,UAAAA,OAAR,MAAoB,GAApB,EAEA,OACE,QAACF,EAAD,CAASE,UAAWA,IAClB,eAAKA,UAAU,qBACb,eAAKA,UAAU,eACZD,EAAMS,QAAS,iBAAIT,EAAMS,OACzBT,EAAMU,cAAe,kBAAKV,EAAMU,aAChCV,EAAMK","sources":["webpack://beaver-help/./src/components/atoms/animPulse.tsx","webpack://beaver-help/./src/components/molecules/contactFlow.tsx","webpack://beaver-help/./src/components/organisms/officialContactLayout.tsx","webpack://beaver-help/./src/components/organisms/officialLowHeader.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\n\nconst Wrapper = styled.div`\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  z-index: 1;\n  border-radius: 50%;\n  background-color: #3ec7b3;\n  box-shadow: 0 0 20px #3ec7b3;\n  &:before,\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    margin: auto;\n    width: 100%;\n    height: 100%;\n    border: 1px solid #3ec7b3;\n    border-radius: 50%;\n    box-sizing: border-box;\n    pointer-events: none;\n    animation: pulsate 3s linear infinite;\n  }\n  &:after {\n    animation-delay: 1.5s;\n  }\n  @keyframes pulsate {\n    0% {\n      transform: scale(1);\n      opacity: 1;\n    }\n\n    100% {\n      transform: scale(2.5);\n      opacity: 0;\n    }\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n}\n\n/**\n * 波紋アニメーション\n * @constructor\n */\n\nconst AnimPulse = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return <Wrapper className={className} />\n}\n\nexport default AnimPulse\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport AnimPulse from '../atoms/animPulse'\n\nconst Ol = styled.ol`\n  display: flex;\n  width: 500px;\n  margin: 30px auto 80px;\n\n  li {\n    list-style: none;\n    position: relative;\n    width: calc(100% / 3);\n    text-align: center;\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n\n    &:after {\n      background: #dcdee1;\n      content: '';\n      width: calc(100% - 24px);\n      height: 4px;\n      position: absolute;\n      left: -72px;\n      top: 11px;\n    }\n\n    &:first-child:after {\n      display: none;\n    }\n\n    span {\n      display: flex;\n      position: relative;\n      align-items: center;\n      justify-content: center;\n      line-height: 26px;\n      border-radius: 50%;\n      color: #dcdee1;\n      z-index: 1;\n      margin: 0 auto;\n      text-align: center;\n      border: solid 3px #dcdee1;\n      background: #f8f8f8;\n      width: 28px;\n      height: 28px;\n    }\n\n    .pulse {\n      display: none;\n      justify-content: center;\n    }\n\n    p {\n      margin: 10px 0 0;\n      width: 100%;\n    }\n  }\n\n  &.now-01 {\n    li.step-01 {\n      span {\n        width: 24px;\n        height: 24px;\n        color: #ffffff;\n        background: rgba(62, 199, 179, 0.1);\n        border: none;\n        z-index: 2;\n      }\n\n      .pulse {\n        display: flex;\n      }\n    }\n  }\n\n  &.now-02 {\n    li.step-02 {\n      span {\n        width: 24px;\n        height: 24px;\n        color: #ffffff;\n        background: rgba(62, 199, 179, 0.1);\n        border: none;\n        z-index: 2;\n      }\n\n      .pulse {\n        display: flex;\n      }\n    }\n  }\n\n  &.now-03 {\n    li.step-03 {\n      span {\n        width: 24px;\n        height: 24px;\n        color: #ffffff;\n        background: rgba(62, 199, 179, 0.1);\n        border: none;\n        z-index: 2;\n      }\n\n      .pulse {\n        display: flex;\n      }\n    }\n  }\n\n  ${BreakPoints.medium} {\n    width: 80%;\n    min-width: 300px;\n\n    li {\n      &:after {\n        width: calc(100% - 4px);\n      }\n    }\n  }\n`\ntype Props = {\n  /** クラス名 */\n  className?: string\n}\n\n/**\n * メールフォーム上部フロー図コンポーネント\n * @constructor\n */\nconst ContactFlow = (props: Props) => {\n  const { className = '' } = props\n  return (\n    <Ol className={className}>\n      <li className=\"step-01\">\n        <span>１</span>\n        <AnimPulse className=\"pulse\" />\n        <p>入力</p>\n      </li>\n      <li className=\"step-02\">\n        <span>２</span>\n        <AnimPulse className=\"pulse\" />\n        <p>内容確認</p>\n      </li>\n      <li className=\"step-03\">\n        <span>3</span>\n        <AnimPulse className=\"pulse\" />\n        <p>完了</p>\n      </li>\n    </Ol>\n  )\n}\n\nexport default ContactFlow\n","import styled from '@emotion/styled'\nimport React, { ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\nimport BreakPoints from '../../styles/breakPoints'\nimport ScrollTop from '../atoms/scrollTop'\nimport TopicPath, { ITopicPath } from '../atoms/topicPath'\nimport OfficialFooter from './officialFooter'\nimport OfficialHeader from './officialHeader'\n\nconst Wrapper = styled.article`\n  font-size: 16px;\n\n  ${BreakPoints.small} {\n  }\n`\n\ntype Props = {\n  /** パンくずパス */\n  paths?: ITopicPath[]\n  /** ページ内容 */\n  children: ReactNode\n}\n\n/**\n * サービスサイト問い合わせ用レイアウト\n * @constructor\n */\nconst OfficialContactLayout = ({ paths, children }: Props) => (\n  <div id=\"pageTop\">\n    <Helmet>\n      <meta\n        name=\"viewport\"\n        content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no\"\n      />\n      <script>\n        {`\n            function showElementAnimation() {\n\n              var element = document.querySelectorAll('.anim-fade-up');\n              if(!element) return;\n\n              var showTiming = window.innerHeight > 768 ? 120 : 40;\n              var scrollY = window.pageYOffset;\n              var windowH = window.innerHeight;\n\n              for(var i=0;i<element.length;i++) { var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if(scrollY + windowH - showTiming > elemY) {\n                element[i].classList.add('is-show');\n              }\n            }\n          }\n          showElementAnimation();\n          window.addEventListener('scroll', showElementAnimation);\n        `}\n      </script>\n    </Helmet>\n    <OfficialHeader />\n    <noscript>Javascriptが無効なため有効にしてください</noscript>\n    <Wrapper>\n      {paths && <TopicPath paths={paths} />}\n      {children}\n    </Wrapper>\n    <OfficialFooter />\n    <ScrollTop />\n  </div>\n)\n\nexport default OfficialContactLayout\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"],"names":["Wrapper","props","className","Ol","BreakPoints","paths","children","id","name","content","label","description"],"sourceRoot":""}