{"version":3,"file":"component---src-pages-lpa-index-tsx-3e22245a8157da680c8e.js","mappings":"+UAYMA,GAAO,qlDAoJTC,EAAAA,EAAAA,MApJS,4CAiVb,EAjLqB,WACnB,OAOIC,EAAAA,EAAAA,KANFC,EADF,EACEA,QACAC,EAFF,EAEEA,QACAC,EAHF,EAGEA,OACAC,EAJF,EAIEA,QACiBC,EALnB,EAKEC,gBACcC,EANhB,EAMEC,aAaF,OAVAC,EAAAA,EAAAA,YAAU,WACJN,IACFO,OAAOC,KAAK,QAAS,QAAS,CAC5BC,eAAgB,WAChBC,YAAa,WAEfC,EAAAA,EAAAA,IAAS,mBAEV,CAACX,KAGF,QAACL,EAAD,MACE,eAAKiB,GAAG,cAAcC,UAAU,oBAC9B,mBACE,eACEC,IAAI,qCACJC,IAAI,eAGR,eAAKF,UAAU,sBAEb,eAAKA,UAAU,cACb,aAAGA,UAAU,eACX,gBAAMA,UAAU,YAAhB,QACA,gBAAMA,UAAU,0CAAhB,OAGCd,IAAYD,EAAQkB,UACnB,gBAAMH,UAAU,sCAAhB,kBAKJ,iBACEI,MAAOnB,EAAQkB,QACfE,YAAY,SACZhB,SAAUA,EAAS,eAIvB,eAAKW,UAAU,cACb,aAAGA,UAAU,eACX,gBAAMA,UAAU,YAAhB,UACA,gBAAMA,UAAU,0CAAhB,OAGCd,IAAYD,EAAQqB,OACnB,gBAAMN,UAAU,sCAAhB,iBAKJ,iBACEI,MAAOnB,EAAQqB,KACfD,YAAY,OACZhB,SAAUA,EAAS,YAIvB,eAAKW,UAAU,cACb,aAAGA,UAAU,eACX,gBAAMA,UAAU,YAAhB,YACA,gBAAMA,UAAU,0CAAhB,OAGCd,IAAYD,EAAQsB,QACnB,gBAAMP,UAAU,sCAAhB,oBAIDd,GACCD,EAAQsB,QACPC,EAAAA,EAAAA,gBAA2BvB,EAAQsB,SAClC,gBAAMP,UAAU,sCAAhB,wBAKN,iBACEI,MAAOnB,EAAQsB,MACfF,YAAY,iBACZhB,SAAUA,EAAS,aAIvB,eAAKW,UAAU,cACb,aAAGA,UAAU,eACX,gBAAMA,UAAU,YAAhB,SACA,gBAAMA,UAAU,0CAAhB,OAGCd,IAAYD,EAAQwB,MACnB,gBAAMT,UAAU,sCAAhB,mBAKJ,iBACEI,MAAOnB,EAAQwB,IACfJ,YAAY,aACZhB,SAAUA,EAAS,WAIvB,eAAKW,UAAU,cACb,aAAGA,UAAU,eACX,gBAAMA,UAAU,YAAhB,cACA,gBAAMA,UAAU,0CAAhB,OAGCd,IAAYD,EAAQyB,iBACnB,gBAAMV,UAAU,sCAAhB,wBAKJ,eAAKA,UAAU,aACb,kBACEW,UAAQ,EACRP,MAAOnB,EAAQyB,eACfrB,SAAUA,EAAS,oBAEnB,kBAAQe,MAAM,GAAGQ,QAAM,GAAvB,YAGCC,EAAAA,EAAAA,KAAuB,SAACC,GAAD,OACtB,kBAAQC,IAAKD,EAAIE,KAAMZ,MAAOU,EAAIE,MAC/BF,EAAIR,aAOf,eAAKN,UAAU,eACb,QAAC,IAAD,CACEiB,QAAShC,EAAQiC,MACjB7B,SAAUA,EAAS,WAEnB,aAAG8B,KAAK,WAAWC,OAAO,UAA1B,cAJF,UASA,QAAC,IAAD,MACClC,IAAYD,EAAQiC,QACnB,gBAAMlB,UAAU,sCAAhB,0BAMJ,QAAC,IAAD,CACEqB,KAAK,QACLC,MAAM,SACNtB,UAAU,4BACVT,QAAS,kBAAMA,EAAQgC,EAAAA,EAAAA,MACvBC,SAAUpC,GALZ,gB,iCC1UJN,GAAO,qWA4BTC,EAAAA,EAAAA,QA5BS,2GA4CTA,EAAAA,EAAAA,OA5CS,8JAqETA,EAAAA,EAAAA,MArES,MA+Fb,EAlBgB,kBACd,QAAC,EAAD,MACE,eAAKiB,UAAU,UACb,eACEC,IAAI,8BACJC,IAAI,mCACJF,UAAU,YAEZ,eACEC,IAAI,8BACJC,IAAI,mCACJF,UAAU,YAEZ,eAAKC,IAAI,yBAAyBD,UAAU,YAAYE,IAAI,e,gEC1E5DpB,GAAO,iJAaTC,EAAAA,EAAAA,OAbS,2CAgEb,EArCuB,kBACrB,QAAC,EAAD,MAEE,QAAC,IAAD,CACE0C,YAAY,gFAGd,QAACC,EAAA,EAAD,MACE,kEAKF,QAAC,IAAD,CAAYC,WAAW,6FACvB,QAAC,EAAD,OACA,QAAC,IAAD,CAASA,WAAW,6FACpB,eAAK3B,UAAU,aACb,eACEC,IAAI,8BACJC,IAAI,8BAGR,QAAC,IAAD,OACA,QAAC,IAAD,OACA,QAAC,IAAD,OACA,QAAC,IAAD,CAASyB,WAAW,6FACpB,QAAC,IAAD,OACA,QAAC,IAAD,OACA,QAAC,IAAD,OACA,QAAC,IAAD,OACA,QAAC,IAAD,OACA,QAAC,IAAD,CAASA,WAAW,6FACpB,QAAC,EAAD,OACA,QAAC,IAAD","sources":["webpack://beaver-help/./src/components/organisms/lpDownload01.tsx","webpack://beaver-help/./src/components/organisms/lpFv01A.tsx","webpack://beaver-help/./src/pages/lpa/index.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport { navigate } from 'gatsby-link'\nimport React, { useEffect } from 'react'\nimport useDownload from '../../hooks/useDownload'\nimport BreakPoints from '../../styles/breakPoints'\nimport { ManagementKindList } from '../../types/ManagementKind'\nimport StringUtil from '../../utils/StringUtil'\nimport CommonCheckbox from '../atoms/commonCheckbox'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport { SiteKind } from '../../types/SiteKind'\nimport PolicyUnderText from '../atoms/policyUnderText'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  padding: 80px 0;\n\n  .p-section-inner {\n    h1 {\n      img {\n        display: block;\n        width: 100%;\n        margin-bottom: 40px;\n      }\n    }\n\n    max-width: 700px;\n    padding: 50px 80px;\n    margin: 0 auto;\n    background: #ffffff;\n    border-radius: 30px;\n\n    .p-section-contact {\n      width: 100%;\n      margin: 0 auto;\n      text-align: center;\n\n      .item-wrap {\n        margin: 0 0 20px;\n\n        &.name-wrap {\n          display: flex;\n\n          div {\n            width: 50%;\n            margin: 0;\n          }\n        }\n\n        .label-area {\n          display: flex;\n          flex-wrap: wrap;\n          padding: 0 0 2px;\n\n          .txt-color-alert {\n            margin: 0 5px;\n\n            &.require {\n              opacity: 0.6;\n            }\n\n            &.err {\n              margin-left: auto;\n              word-break: keep-all;\n            }\n          }\n        }\n\n        textarea {\n          min-height: 120px;\n        }\n      }\n    }\n\n    .p-top-data-wrap {\n      background: #f9f3c4;\n      width: 100%;\n      border-radius: 8px;\n      margin: -30px auto 60px;\n      padding: 20px;\n      text-align: center;\n\n      p {\n        margin: 0 0 20px;\n      }\n\n      button {\n        margin: 0;\n      }\n    }\n\n    .p-sub-data-wrap {\n      border: solid 2px #dbdee1;\n      background: #f7fbfa;\n      width: 100%;\n      border-radius: 8px;\n      margin: 30px auto 0;\n      padding: 20px;\n    }\n\n    .p-select {\n      overflow: hidden;\n      text-align: center;\n      position: relative;\n      border: solid 2px #ebebeb;\n      background: #ffffff;\n      width: 100%;\n      min-height: 40px;\n      border-radius: 8px;\n      transition: 0.3s;\n\n      &:hover {\n        border-color: #3ec7b3;\n      }\n\n      &:before {\n        position: absolute;\n        top: 45%;\n        right: 0.8em;\n        width: 0;\n        height: 0;\n        padding: 0;\n        content: '';\n        border-left: 6px solid transparent;\n        border-right: 6px solid transparent;\n        border-top: 6px solid #272d2c;\n        pointer-events: none;\n      }\n\n      select {\n        width: 100%;\n        cursor: pointer;\n        text-indent: 0.01px;\n        text-overflow: ellipsis;\n        border: none;\n        outline: none;\n        background: transparent none;\n        box-shadow: none;\n        -webkit-appearance: none;\n        appearance: none;\n        padding: 8px 38px 8px 8px;\n\n        &::-ms-expand {\n          display: none;\n        }\n      }\n    }\n\n    .p-btn-download {\n      font-size: 24px;\n      height: 60px;\n      padding: 0 40px;\n      border: #ffffff 2px solid;\n      box-shadow: 0 0 0 2px rgb(255 141 10);\n\n      &:hover {\n        border: #ffffff 2px solid;\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n    .p-section-inner {\n      .p-section-contact {\n      }\n    }\n  }\n`\n\n/**\n * LP用ダウンロードフォーム-入力画面\n * @constructor\n */\nconst LpDownload01 = () => {\n  const {\n    contact,\n    isError,\n    finish,\n    loading,\n    onChangeContact: onChange,\n    execDownload: onClick,\n  } = useDownload()\n\n  useEffect(() => {\n    if (finish) {\n      window.gtag('event', 'click', {\n        event_category: 'download',\n        event_label: 'd-lpa',\n      })\n      navigate('/lpa/thanks/')\n    }\n  }, [finish])\n\n  return (\n    <Wrapper>\n      <div id=\"lp-download\" className=\"p-section-inner\">\n        <h1>\n          <img\n            src=\"/images/lp/lp01/lpContentTtl07.png\"\n            alt=\"資料ダウンロード\"\n          />\n        </h1>\n        <div className=\"p-section-contact\">\n          {/** 会社名 */}\n          <div className=\"item-wrap\">\n            <p className=\"label-area\">\n              <span className=\"txt-bold\">会社名</span>\n              <span className=\"txt-color-alert txt-size-small require\">\n                *必須\n              </span>\n              {isError && !contact.company && (\n                <span className=\"txt-color-alert txt-size-small err\">\n                  会社名を入力してください\n                </span>\n              )}\n            </p>\n            <input\n              value={contact.company}\n              placeholder=\"○○株式会社\"\n              onChange={onChange('company')}\n            />\n          </div>\n          {/** 氏名 */}\n          <div className=\"item-wrap\">\n            <p className=\"label-area\">\n              <span className=\"txt-bold\">ご担当者名</span>\n              <span className=\"txt-color-alert txt-size-small require\">\n                *必須\n              </span>\n              {isError && !contact.name && (\n                <span className=\"txt-color-alert txt-size-small err\">\n                  氏名を入力してください\n                </span>\n              )}\n            </p>\n            <input\n              value={contact.name}\n              placeholder=\"田中太郎\"\n              onChange={onChange('name')}\n            />\n          </div>\n          {/** メールアドレス */}\n          <div className=\"item-wrap\">\n            <p className=\"label-area\">\n              <span className=\"txt-bold\">メールアドレス</span>\n              <span className=\"txt-color-alert txt-size-small require\">\n                *必須\n              </span>\n              {isError && !contact.email && (\n                <span className=\"txt-color-alert txt-size-small err\">\n                  メールアドレスを入力してください\n                </span>\n              )}\n              {isError &&\n                contact.email &&\n                !StringUtil.checkFormatMail(contact.email) && (\n                  <span className=\"txt-color-alert txt-size-small err\">\n                    メールアドレスの形式が間違っています\n                  </span>\n                )}\n            </p>\n            <input\n              value={contact.email}\n              placeholder=\"info@sample.jp\"\n              onChange={onChange('email')}\n            />\n          </div>\n          {/** 電話番号 */}\n          <div className=\"item-wrap\">\n            <p className=\"label-area\">\n              <span className=\"txt-bold\">電話番号</span>\n              <span className=\"txt-color-alert txt-size-small require\">\n                *必須\n              </span>\n              {isError && !contact.tel && (\n                <span className=\"txt-color-alert txt-size-small err\">\n                  電話番号を入力してください\n                </span>\n              )}\n            </p>\n            <input\n              value={contact.tel}\n              placeholder=\"0312345678\"\n              onChange={onChange('tel')}\n            />\n          </div>\n          {/** 現在の勤怠管理方法 */}\n          <div className=\"item-wrap\">\n            <p className=\"label-area\">\n              <span className=\"txt-bold\">現在の勤怠管理方法</span>\n              <span className=\"txt-color-alert txt-size-small require\">\n                *必須\n              </span>\n              {isError && !contact.managementType && (\n                <span className=\"txt-color-alert txt-size-small err\">\n                  現在の勤怠管理方法を選択してください\n                </span>\n              )}\n            </p>\n            <div className=\"p-select\">\n              <select\n                required\n                value={contact.managementType}\n                onChange={onChange('managementType')}\n              >\n                <option value=\"\" hidden>\n                  選択してください\n                </option>\n                {ManagementKindList.map((val) => (\n                  <option key={val.kind} value={val.kind}>\n                    {val.name}\n                  </option>\n                ))}\n              </select>\n            </div>\n          </div>\n          {/** プラポリ同意 */}\n          <div className=\"txt-center\">\n            <CommonCheckbox\n              checked={contact.agree}\n              onChange={onChange('agree')}\n            >\n              <a href=\"/policy/\" target=\"_blank\">\n                プライバシーポリシー\n              </a>\n              に同意する\n            </CommonCheckbox>\n            <PolicyUnderText />\n            {isError && !contact.agree && (\n              <span className=\"txt-color-alert txt-size-small err\">\n                プライバシーポリシーに同意してください。\n              </span>\n            )}\n          </div>\n          {/** ダウンロード */}\n          <OfficialCommonBtn\n            size=\"large\"\n            level=\"strong\"\n            className=\"p-btn-download done-lp01A\"\n            onClick={() => onClick(SiteKind.LPA)}\n            disabled={loading}\n          >\n            資料ダウンロード\n          </OfficialCommonBtn>\n        </div>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default LpDownload01\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.article`\n  display: flex;\n  justify-content: center;\n  background-size: 100%;\n  background: #ffffff url(/images/lp/lp01/lpBg01.png) no-repeat center -80px;\n\n  .inner {\n    width: 1380px;\n    padding: 30px 0 20px 100px;\n    position: relative;\n\n    img {\n      display: block;\n      width: 100%;\n\n      &.img-sp {\n        display: none;\n      }\n\n      &.img-jiima {\n        position: absolute;\n        width: 200px;\n        right: 50px;\n        bottom: 50px;\n      }\n    }\n  }\n\n  ${BreakPoints.xxLarge} {\n    .inner {\n      width: 100vw;\n      padding: 10px 0 20px 40px;\n      overflow: hidden;\n\n      img {\n        width: 120%;\n\n        &.img-jiima {\n          width: 130px;\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .inner {\n      padding: 20px 0 0 20px;\n\n      img {\n        width: 110%;\n\n        &.img-pc {\n          display: none;\n        }\n\n        &.img-sp {\n          display: block;\n        }\n\n        &.img-jiima {\n          width: 100px;\n          right: -15px;\n          bottom: unset;\n          top: 100px;\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.small} {\n  }\n`\n\n/**\n * LP01用ファーストビューAパターン\n * @constructor\n */\nconst LpFv01A = (): JSX.Element => (\n  <Wrapper>\n    <div className=\"inner\">\n      <img\n        src=\"/images/lp/lp01/lpFvAPc.png\"\n        alt=\"多彩なシフトもテレワークも[クラウド勤怠管理システムのキンクラ]\"\n        className=\"img-pc\"\n      />\n      <img\n        src=\"/images/lp/lp01/lpFvASp.png\"\n        alt=\"多彩なシフトもテレワークも[クラウド勤怠管理システムのキンクラ]\"\n        className=\"img-sp\"\n      />\n      <img src=\"/images/logo_jiima.png\" className=\"img-jiima\" alt=\"JIIMA認証\" />\n    </div>\n  </Wrapper>\n)\n\nexport default LpFv01A\n","import styled from '@emotion/styled'\nimport { graphql } from 'gatsby'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\nimport SEO from '../../components/atoms/seo'\nimport LpBottom01 from '../../components/organisms/lpBottom01'\nimport LpCta01 from '../../components/organisms/lpCta01'\nimport LpDownload01 from '../../components/organisms/lpDownload01'\nimport LpFeature01 from '../../components/organisms/lpFeature01'\nimport LpFooter01 from '../../components/organisms/lpFooter01'\nimport LpFunction01 from '../../components/organisms/lpFunction01'\nimport LpFv01A from '../../components/organisms/lpFv01A'\nimport LpHeader01 from '../../components/organisms/lpHeader01'\nimport LpMerit01 from '../../components/organisms/lpMerit01'\nimport LpPlan01 from '../../components/organisms/lpPlan01'\nimport LpSecurity01 from '../../components/organisms/lpSecurity01'\nimport LpSupport01 from '../../components/organisms/lpSupport01'\nimport LpWhatis01 from '../../components/organisms/lpWhatis01'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  .arr-down {\n    display: flex;\n    position: relative;\n    justify-content: center;\n\n    img {\n      position: absolute;\n      top: -40px;\n      z-index: 1;\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .arr-down {\n      img {\n        top: -20px;\n        width: 12px;\n      }\n    }\n  }\n`\n\n/**\n * キンクラLP-01-A\n * @constructor\n */\nconst Lp01AIndexPage = () => (\n  <Wrapper>\n    {/** ファーストビューA */}\n    <SEO\n      description=\"客先常駐特化型のクラウド勤怠管理システムならキンクラ。多種多様なシフトもテレワークも、キンクラなら従業員の勤務状況を一元管理することができます。\n\"\n    />\n    <Helmet>\n      <title>\n        勤務状況を一元管理できるキンクラ -\n        客先常駐特化型のクラウド勤怠管理システム\n      </title>\n    </Helmet>\n    <LpHeader01 signUpLink=\"https://sign-up.kintaicloud.jp/sign-up/?utm_source=lp&utm_medium=button&tran_source=lpa\" />\n    <LpFv01A />\n    <LpCta01 signUpLink=\"https://sign-up.kintaicloud.jp/sign-up/?utm_source=lp&utm_medium=button&tran_source=lpa\" />\n    <div className=\"arr-down\">\n      <img\n        src=\"/images/lp/lp01/lpArr01.png\"\n        alt=\"下にスクロールしてキンクラの詳細をご覧ください\"\n      />\n    </div>\n    <LpWhatis01 />\n    <LpFeature01 />\n    <LpMerit01 />\n    <LpCta01 signUpLink=\"https://sign-up.kintaicloud.jp/sign-up/?utm_source=lp&utm_medium=button&tran_source=lpa\" />\n    <LpFunction01 />\n    <LpSupport01 />\n    <LpSecurity01 />\n    <LpPlan01 />\n    <LpBottom01 />\n    <LpCta01 signUpLink=\"https://sign-up.kintaicloud.jp/sign-up/?utm_source=lp&utm_medium=button&tran_source=lpa\" />\n    <LpDownload01 />\n    <LpFooter01 />\n  </Wrapper>\n)\n\nexport default Lp01AIndexPage\n\nexport const pageQuery = graphql`\n  query Lp01AIndexPages {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["Wrapper","BreakPoints","useDownload","contact","isError","finish","loading","onChange","onChangeContact","onClick","execDownload","useEffect","window","gtag","event_category","event_label","navigate","id","className","src","alt","company","value","placeholder","name","email","StringUtil","tel","managementType","required","hidden","ManagementKindList","val","key","kind","checked","agree","href","target","size","level","SiteKind","disabled","description","Helmet","signUpLink"],"sourceRoot":""}