{"version":3,"file":"678478badaecd6aa24da84bad7fb978683b5ac78-df8062688df56f2d6315.js","mappings":"qJAGA,IAAMA,GAAO,mnBAwEb,IAduB,SAACC,GAAD,OACrB,QAACD,EAAD,MACE,iBAAOE,UAAU,iCACf,iBACEC,KAAK,WACLC,QAASH,EAAMG,QACfC,SAAUJ,EAAMI,YAElB,gBAAMH,UAAU,UAChB,iBAAID,EAAMK,c,+EClEVC,GAAM,uiCA4ERC,EAAAA,EAAAA,OA5EQ,mQAkGRA,EAAAA,EAAAA,MAlGQ,uDA0GRA,EAAAA,EAAAA,SA1GQ,i6CA8PZ,IAR0B,SAACP,GACzB,MAA2DA,EAAnDC,UAAAA,OAAR,MAAoB,GAApB,IAA2DD,EAAnCQ,KAAAA,OAAxB,MAA+B,QAA/B,IAA2DR,EAAnBS,MAAAA,OAAxC,MAAgD,OAAhD,EACA,OACE,QAACH,GAAD,UAAYN,EAAZ,CAAmBC,UAAcO,EAAL,IAAaC,EAAb,IAAsBR,IAC/CD,EAAMK,Y,0DC3Pb,IAAMN,GAAO,+HA4Bb,IAZwB,SAACC,GACvB,MAA2BA,EAAnBC,UAAAA,OAAR,MAAoB,GAApB,EAEA,OACE,QAACF,EAAD,CAASE,UAAcA,EAAL,mBAAlB,gCAEE,mBAFF,oB,qECnBEF,GAAO,yPAqBTQ,EAAAA,EAAAA,QArBS,kJAwCTA,EAAAA,EAAAA,OAxCS,KA0CTA,EAAAA,EAAAA,MA1CS,MAqEb,IAnBmB,kBACjB,yBACE,QAACR,EAAD,MACE,mBAASE,UAAU,UACjB,eACES,IAAI,iCACJC,IAAI,wBACJV,UAAU,eAEZ,eACES,IAAI,iCACJC,IAAI,6BACJV,UAAU,mB,0FC5DdF,GAAO,qSAyBTQ,EAAAA,EAAAA,OAzBS,oEAsCTA,EAAAA,EAAAA,OAtCS,2MAkETA,EAAAA,EAAAA,MAlES,MA6Hb,IA/CmC,SAACP,GAAD,OACjC,QAACD,EAAD,MACE,mBAASE,UAAU,UACjB,mBACE,eACES,IAAI,8BACJC,IAAI,iBACJV,UAAU,aAGd,eAAKA,UAAU,oBACb,eACES,IAAI,8BACJC,IAAI,qBACJV,UAAU,YAEZ,QAAC,EAAAW,KAAD,CACEC,IAAIC,EAAAA,EAAAA,GAAcd,EAAMe,YACxBC,OAAO,SACPf,UAAU,gCAEV,eACES,IAAI,iCACJC,IAAI,sBAIV,eAAKV,UAAU,oBACb,eACES,IAAI,8BACJC,IAAI,wBACJV,UAAU,YAEZ,QAAC,EAAAW,KAAD,CACEC,IAAIC,EAAAA,EAAAA,GAAc,gBAClBb,UAAU,iCAEV,eACES,IAAI,iCACJC,IAAI,yB,qECvHVZ,GAAO,+6BA8DTQ,EAAAA,EAAAA,OA9DS,2nBAwHTA,EAAAA,EAAAA,MAxHS,0HAuITA,EAAAA,EAAAA,OAvIS,4DAkJTA,EAAAA,EAAAA,MAlJS,MA6Nb,IAnEoB,kBAClB,QAACR,EAAD,MACE,mBAASE,UAAU,UACjB,mBACE,eACES,IAAI,qCACJC,IAAI,UACJV,UAAU,gBAGd,eAAKA,UAAU,kBACb,eAAKA,UAAU,mBACb,eACES,IAAI,kCACJC,IAAI,eACJV,UAAU,mBAEZ,cAAIA,UAAU,UAAd,YAEE,mBAFF,WAKA,kBACE,6CACA,mBAFF,yBAMF,eAAKA,UAAU,mBACb,eACES,IAAI,kCACJC,IAAI,oBAEN,+BAEE,mBAFF,UAKA,iEAEE,wDAKJ,eAAKV,UAAU,mBACb,eACES,IAAI,kCACJC,IAAI,mBAEN,4BAEE,mBAFF,YAKA,4CAEE,4CAFF,+BAMF,eAAKV,UAAU,qB,sGCpNjBF,GAAO,oQAmBTQ,EAAAA,EAAAA,OAnBS,KAqBTA,EAAAA,EAAAA,OArBS,KAuBTA,EAAAA,EAAAA,MAvBS,MA4Cb,IAbmB,kBACjB,QAACR,EAAD,MACE,mBACE,QAAC,EAAAa,KAAD,CAAMC,IAAIC,EAAAA,EAAAA,GAAc,KAAMb,UAAU,cACtC,QAAC,IAAD,SAGJ,aAAGA,UAAU,aAAb,kD,qECzCEF,GAAO,29DA2GTQ,EAAAA,EAAAA,OA3GS,oWAmJTA,EAAAA,EAAAA,OAnJS,KAqJTA,EAAAA,EAAAA,MArJS,MAkQb,IArGqB,kBACnB,yBACE,QAACR,EAAD,MACE,mBAASE,UAAU,UACjB,mBACE,eACES,IAAI,qCACJC,IAAI,iBAGR,eAAKV,UAAU,8BACb,8BACA,eAAKA,UAAU,oBACb,eAAKA,UAAU,UACb,eAAKS,IAAI,uCAAuCC,IAAI,QACpD,yBACA,+CAEF,eAAKV,UAAU,UACb,eAAKS,IAAI,uCAAuCC,IAAI,SACpD,0BACA,2CAEF,eAAKV,UAAU,UACb,eAAKS,IAAI,uCAAuCC,IAAI,UACpD,2BACA,6CAEF,eAAKV,UAAU,UACb,eAAKS,IAAI,uCAAuCC,IAAI,UACpD,2BACA,2CAKN,eAAKV,UAAU,8BACb,8BACA,eAAKA,UAAU,oBACb,eAAKA,UAAU,UACb,eAAKS,IAAI,uCAAuCC,IAAI,UACpD,2BACA,wCAGF,eAAKV,UAAU,UACb,eAAKS,IAAI,uCAAuCC,IAAI,UACpD,2BACA,6CAGF,eAAKV,UAAU,UACb,eACES,IAAI,uCACJC,IAAI,YAEN,6BACA,2CAGF,eAAKV,UAAU,UACb,eAAKS,IAAI,uCAAuCC,IAAI,QACpD,6BACA,iDAKN,eAAKV,UAAU,8BACb,+BACA,eAAKA,UAAU,oBACb,eAAKA,UAAU,UACb,eAAKS,IAAI,uCAAuCC,IAAI,UACpD,2BACA,4CAGF,eAAKV,UAAU,UACb,eACES,IAAI,uCACJC,IAAI,aAEN,8BACA,6CAGF,eAAKV,UAAU,UACb,eACES,IAAI,uCACJC,IAAI,YAEN,6BACA,mD,sGCtPRZ,GAAO,i7BAsETQ,EAAAA,EAAAA,MAtES,2IA0FTA,EAAAA,EAAAA,MA1FS,kNAwHTA,EAAAA,EAAAA,MAxHS,MAgKb,IA5ByC,SAACP,GAAD,OACvC,QAACD,EAAD,MACE,eAAKE,UAAU,UACb,mBACE,QAAC,EAAAW,KAAD,CAAMC,IAAIC,EAAAA,EAAAA,GAAc,KAAMb,UAAU,cACtC,QAAC,IAAD,SAGJ,eAAKA,UAAU,aACb,QAAC,EAAAW,KAAD,CACEC,IAAIC,EAAAA,EAAAA,GAAcd,EAAMe,YACxBC,OAAO,SACPf,UAAU,eAHZ,cAOA,QAAC,EAAAW,KAAD,CACEC,IAAIC,EAAAA,EAAAA,GAAc,gBAClBE,OAAO,SACPf,UAAU,kCAHZ,mB,oECvJFF,GAAO,ihCA6ETQ,EAAAA,EAAAA,QA7ES,qoBAqITA,EAAAA,EAAAA,OArIS,kMAiKTA,EAAAA,EAAAA,OAjKS,4VAiMTA,EAAAA,EAAAA,MAjMS,MAsRb,IA7EkB,kBAChB,yBACE,QAACR,EAAD,MACE,mBAASE,UAAU,UACjB,mBACE,eACES,IAAI,qCACJC,IAAI,cACJV,UAAU,kBAGd,eAAKA,UAAU,wBACb,eAAKA,UAAU,wBACb,8BACU,oCAEV,kLAGA,eACES,IAAI,mCACJC,IAAI,yBAGR,eACED,IAAI,gCACJC,IAAI,YACJV,UAAU,sBAGd,eAAKA,UAAU,wBACb,eAAKA,UAAU,wBACb,iCACa,oCAEb,4JAGA,eACES,IAAI,mCACJC,IAAI,yBAGR,eACED,IAAI,gCACJC,IAAI,YACJV,UAAU,sBAGd,eAAKA,UAAU,wBACb,eAAKA,UAAU,wBACb,gCACY,sCAEZ,oEAEE,mBAFF,4CAIE,mBAJF,2DAOA,eACES,IAAI,mCACJC,IAAI,6BAGR,eACED,IAAI,gCACJC,IAAI,YACJV,UAAU,0B,qEC9QhBF,GAAO,03BA+ETQ,EAAAA,EAAAA,OA/ES,+ZA4HTA,EAAAA,EAAAA,OA5HS,uOAwJTA,EAAAA,EAAAA,MAxJS,MAyNb,IAzDiB,kBACf,yBACE,QAACR,EAAD,MACE,mBAASE,UAAU,UACjB,mBACE,eACES,IAAI,qCACJC,IAAI,iBAGR,eAAKV,UAAU,cACb,eAAKA,UAAU,sBACb,8BACA,mEAEE,oBACA,qBAEF,kBACE,eACES,IAAI,+BACJC,IAAI,oBAIV,eAAKV,UAAU,sBACb,kCACA,kEAEE,oBACA,qBAEF,kBACE,eACES,IAAI,+BACJC,IAAI,wBAIV,eAAKV,UAAU,sBACb,oCACA,wEAGA,kBACE,eACES,IAAI,+BACJC,IAAI,+B,qEC/MdZ,GAAO,4iBAyCTQ,EAAAA,EAAAA,MAzCS,oPAkETA,EAAAA,EAAAA,OAlES,KAoETA,EAAAA,EAAAA,MApES,MAiIb,IArDqB,kBACnB,yBACE,QAACR,EAAD,MACE,mBAASE,UAAU,UACjB,mBACE,eACES,IAAI,qCACJC,IAAI,iBACJV,UAAU,kBAGd,eAAKA,UAAU,kBACb,eAAKA,UAAU,YACb,eAAKS,IAAI,mCAAmCC,IAAI,aAChD,8BACA,mEAIF,eAAKV,UAAU,YACb,eAAKS,IAAI,mCAAmCC,IAAI,YAChD,6BACA,qEAIF,eAAKV,UAAU,YACb,eAAKS,IAAI,mCAAmCC,IAAI,YAChD,6BACA,oEAKF,eAAKV,UAAU,YACb,eACES,IAAI,mCACJC,IAAI,cAEN,+BACA,oDAGJ,eACED,IAAI,sCACJT,UAAU,cACVU,IAAI,mB,qEC1HRZ,GAAO,gNAeTQ,EAAAA,EAAAA,OAfS,8GA4BTA,EAAAA,EAAAA,OA5BS,KA8BTA,EAAAA,EAAAA,MA9BS,MAmDb,IAboB,kBAClB,yBACE,QAACR,EAAD,MACE,mBAASE,UAAU,UACjB,eACES,IAAI,kCACJC,IAAI,oC,oGC5CRZ,GAAO,0SAmBTQ,EAAAA,EAAAA,MAnBS,2HAoCTA,EAAAA,EAAAA,OApCS,KAsCTA,EAAAA,EAAAA,MAtCS,MAqEb,EAvBwB,kBACtB,QAACR,EAAD,MACE,mBAASE,UAAU,UACjB,mBACE,eAAKS,IAAI,iCAAiCC,IAAI,UAC9C,mBAFF,yBAKA,eAAKV,UAAU,eACb,kBACEgB,MAAM,MACNC,OAAO,MACPR,IAAI,4CACJS,MAAM,uBACNC,YAAY,IACZC,MAAM,2FACNC,iBAAe,QC7DnBvB,GAAO,uVA2BTQ,EAAAA,EAAAA,OA3BS,4NAqDTA,EAAAA,EAAAA,OArDS,wDA6DTA,EAAAA,EAAAA,MA7DS,MAgGb,EA3BmB,kBACjB,yBACE,QAAC,EAAD,MACE,mBAASN,UAAU,UACjB,mBACE,eAAKS,IAAI,qCAAqCC,IAAI,aAEpD,0GAIA,eACED,IAAI,mCACJC,IAAI,gBACJV,UAAU,iBAEZ,eACES,IAAI,mCACJC,IAAI,gBACJV,UAAU,mBAIhB,QAAC,EAAD,S,8EC9FEsB,EAAYC,EAAQ,OA0C1B,IAhCe,SAAiBC,GA6B9B,YA7B2E,IAA7CA,IAAAA,EAAS,SACvCC,EAAAA,EAAAA,YAAU,WACRC,EAAAA,EAAAA,UAAcJ,EAAUK,WACvB,IA0BI,CAAEC,QAvB8B,mCAAG,WACxCC,EACAC,EACAC,EACAC,GAJwC,yEAMlCC,EAAU,iBACVC,EAAS,CACbJ,KAAAA,GARsC,cAW9BN,EAX8B,OAYhC,QAZgC,mCAalCO,EAbkC,SAapBL,EAAAA,EAAAA,IAAQO,EAASJ,EAAMK,GAbH,kFAgBlCH,EAhBkC,UAgBpBL,EAAAA,EAAAA,KAASO,EAASJ,EAAMK,GAhBJ,yHAoBtCF,GAASA,IApB6B,0DAAH,+D,2FCXnCG,EAAgC,CACpCC,QAAS,GACTC,MAAO,GACPC,KAAM,GACNC,IAAK,GACLC,OAAO,EACPC,eAAgB,GAChBC,UAAW,GACXC,SAAU,IAyFZ,IA/DoB,WAClB,OAA8BC,EAAAA,EAAAA,UAA2BT,GAAlDU,EAAP,KAAgBC,EAAhB,KACA,GAA4BF,EAAAA,EAAAA,WAAS,GAA9BG,EAAP,KAAgBC,EAAhB,KACA,GAA8BJ,EAAAA,EAAAA,WAAS,GAAhCK,EAAP,KAAgBC,EAAhB,KACA,GAA4BN,EAAAA,EAAAA,WAAS,GAA9BO,EAAP,KAAeC,EAAf,KACMC,GAAcC,EAAAA,EAAAA,GAAYC,EAAAA,GAC1BC,GAAkBF,EAAAA,EAAAA,GAAYG,EAAAA,GAC5B7B,GAAY8B,EAAAA,EAAAA,KAAZ9B,QA8CR,MAAO,CACLiB,QAAAA,EACAE,QAAAA,EACAE,QAAAA,EACAE,OAAAA,EACAQ,gBAhDwC,SAACC,GAAD,OAAS,SAACC,GAAO,IAAD,EACpDC,EAAwBD,EAAE9C,OAAOgD,MACzB,QAARH,EAAeE,EAAME,EAAAA,EAAAA,iBAA4BF,GACpC,UAARF,GAAmBC,EAAE9C,kBAAkBkD,mBAC9CH,EAAMD,EAAE9C,OAAOb,SACjB4C,EAAW,OAAD,UAAMD,IAAN,MAAgBe,GAAME,EAAtB,OA4CVI,aAtCmB,SAACvB,GACpB,GACGE,EAAQT,SACRS,EAAQP,MACRO,EAAQN,KACRM,EAAQR,OACRQ,EAAQJ,gBACRuB,EAAAA,EAAAA,gBAA2BnB,EAAQR,QACnCQ,EAAQL,MAPX,CAYAU,GAAW,GACX,IAAMiB,EAAO,iBACRtB,EADQ,CAEXJ,eAAgBY,EAAYR,EAAQJ,gBACpCC,UAAW0B,OAAOC,SAASC,OAC3B3B,SAAUa,EAAgBb,KAG5Bf,EACE,UACAuC,GACA,WACEf,GAAU,MAEZ,WACEF,GAAW,WAlBbF,GAAS,O,oBC9Df,IARE,SACEuB,GADF,OAGA,SAACC,GACC,IAAMC,EAASF,EAASG,MAAK,SAACC,GAAD,OAAUA,EAAKC,OAASJ,KACrD,YAAkBK,IAAXJ,EAAuBA,EAAOnC,KAAO,M,sDCLzC,IAiBMiB,EAGP,CACJ,CAAEjB,KAAM,aAAcsC,KAlBD,eAmBrB,CAAEtC,KAAM,mBAAoBsC,KAjBpB,eAkBR,CAAEtC,KAAM,gBAAiBsC,KAhBlB,gBAiBP,CAAEtC,KAAM,YAAasC,KAfZ,aAgBT,CAAEtC,KAAM,QAASsC,KAdV,W,6ECXF,IAAME,EAAW,CACtBC,KAAM,GACNC,QAAS,UACTC,IAAK,OACLC,IAAK,OACLC,SAAU,YAIC1B,EAGP,CACJ,CAAEnB,KAAM,QAASsC,KAAME,EAASE,SAChC,CAAE1C,KAAM,OAAQsC,KAAME,EAASG,KAC/B,CAAE3C,KAAM,QAASsC,KAAME,EAASI,KAChC,CAAE5C,KAAM,QAASsC,KAAME,EAASK,Y,oBChBlC,KAKEC,YALa,SAKDC,GACV,OAAOA,EAAMC,QAAQ,UAAU,SAACC,GAAD,OAC7BC,OAAOC,aAAaF,EAAOG,WAAW,GAAK,WAQ/CC,iBAfa,SAeO5B,GAClB,IAAI6B,EAAM,GAEV,GAAqB,iBAAV7B,EAAoB,CAC7B,IAAM8B,EAAM9B,EAAMuB,QAAQ,cAAe,IACrCO,IACFD,EAAME,KAAKV,YAAYS,QAEC,iBAAV9B,IAChB6B,EAAM7B,EAAMgC,YAEd,OAAOH,GAMTI,gBAhCa,SAgCGC,GACd,IAAKA,EAAM,OAAO,EAGlB,MADE,0EACSC,KAAKD","sources":["webpack://beaver-help/./src/components/atoms/commonCheckbox.tsx","webpack://beaver-help/./src/components/atoms/officialCommonBtn.tsx","webpack://beaver-help/./src/components/atoms/policyUnderText.tsx","webpack://beaver-help/./src/components/organisms/lpBottom01.tsx","webpack://beaver-help/./src/components/organisms/lpCta01.tsx","webpack://beaver-help/./src/components/organisms/lpFeature01.tsx","webpack://beaver-help/./src/components/organisms/lpFooter01.tsx","webpack://beaver-help/./src/components/organisms/lpFunction01.tsx","webpack://beaver-help/./src/components/organisms/lpHeader01.tsx","webpack://beaver-help/./src/components/organisms/lpMerit01.tsx","webpack://beaver-help/./src/components/organisms/lpPlan01.tsx","webpack://beaver-help/./src/components/organisms/lpSecurity01.tsx","webpack://beaver-help/./src/components/organisms/lpSupport01.tsx","webpack://beaver-help/./src/components/atoms/lpWhatisMovie01.tsx","webpack://beaver-help/./src/components/organisms/lpWhatis01.tsx","webpack://beaver-help/./src/hooks/useApi.ts","webpack://beaver-help/./src/hooks/useDownload.ts","webpack://beaver-help/./src/hooks/useKindName.ts","webpack://beaver-help/./src/types/ManagementKind.ts","webpack://beaver-help/./src/types/SiteKind.ts","webpack://beaver-help/./src/utils/StringUtil.ts"],"sourcesContent":["import styled from '@emotion/styled'\nimport React, { ChangeEvent, ReactNode } from 'react'\n\nconst Wrapper = styled.div`\n padding: 8px 0;\n .atm-checkbox {\n display: flex;\n width: 100%;\n position: relative;\n cursor: pointer;\n user-select: none;\n padding: 0 0 10px 34px;\n input {\n display: none;\n }\n p {\n padding: 2px 0 0;\n }\n }\n .mark {\n position: absolute;\n top: 0;\n left: 0;\n height: 26px;\n width: 26px;\n border: solid 2px #3abd9e;\n border-radius: 5px;\n box-sizing: border-box;\n &:after {\n content: '';\n position: absolute;\n border: solid #3abd9e;\n border-width: 0 2px 2px 0;\n left: 7px;\n top: 1px;\n width: 8px;\n height: 14px;\n transform: rotate(45deg);\n opacity: 0;\n }\n }\n .atm-checkbox {\n input:checked + .mark {\n background: transparent;\n border-color: #3abd9e;\n }\n input:checked + .mark:after {\n opacity: 1;\n }\n }\n`\ntype IProps = {\n children: ReactNode\n checked?: boolean\n onChange?: (e: ChangeEvent) => void\n}\n\n/**\n * 共通チェックボックスとラベルテキストのセット\n * @param props\n */\nconst CommonCheckbox = (props: IProps): JSX.Element => (\n \n \n \n)\n\nexport default CommonCheckbox\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Button = styled.button`\n clear: both;\n position: relative;\n overflow: hidden;\n transform: translate3d(0, 0, 0);\n transition: ease 0.2s;\n\n :after {\n content: '';\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n background-image: radial-gradient(circle, #fff 10%, transparent 11%);\n background-repeat: no-repeat;\n background-position: 50%;\n transform: scale(10, 10);\n opacity: 0;\n transition: transform 0.4s, opacity 1s;\n }\n\n :active:after {\n transform: scale(0, 0);\n opacity: 0.5;\n transition: 0s;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &.small {\n /* サービスサイト用調整中 */\n display: inline-flex;\n min-width: 90px;\n height: 34px;\n font-size: 16px;\n font-weight: 600;\n border-radius: 100vh;\n line-height: 16px;\n padding: 0 20px;\n justify-content: center;\n align-items: center;\n }\n\n &.medium {\n /* サービスサイト用調整中 */\n display: inline-flex;\n min-width: 120px;\n height: 48px;\n font-size: 16px;\n font-weight: 600;\n border-radius: 100vh;\n line-height: 16px;\n padding: 0 20px;\n justify-content: center;\n align-items: center;\n }\n\n &.large {\n /* サービスサイト用調整中 */\n display: inline-flex;\n min-width: 120px;\n height: 48px;\n font-size: 16px;\n font-weight: 600;\n border-radius: 100vh;\n line-height: 16px;\n padding: 0 20px;\n justify-content: center;\n align-items: center;\n }\n\n ${BreakPoints.medium} {\n &.large {\n min-width: 50px;\n font-size: 16px;\n height: 34px;\n padding: 0 10px;\n }\n }\n\n &.mega {\n /* サービスサイト用調整済 */\n display: inline-flex;\n height: 85px;\n font-size: 30px;\n font-weight: 600;\n border-radius: 100vh;\n padding: 0 40px;\n justify-content: center;\n align-items: center;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n }\n\n ${BreakPoints.large} {\n &.mega {\n height: 60px;\n font-size: 26px;\n padding: 0 10px;\n }\n }\n\n ${BreakPoints.smallest} {\n &.mega {\n height: 60px;\n font-size: 24px;\n }\n }\n\n &.weak {\n /* サービスサイト用調整済 */\n color: #00b5a6;\n background-color: #ffffff;\n border: solid 2px #19ba9b;\n overflow: hidden;\n transition: 0.2s;\n\n :before {\n content: '';\n z-index: -1;\n position: absolute;\n width: 110%;\n height: 101%;\n top: 0;\n right: -110%;\n background-color: #19ba9b;\n transition: 0.2s;\n }\n\n :hover {\n color: #ffffff;\n background-position: 0 105%;\n background-color: #19ba9b;\n transition: 0.22s;\n\n :hover:before {\n right: 0;\n }\n }\n }\n\n &.normal {\n /* サービスサイト用調整済 */\n color: #ffffff;\n background: #19ba9b;\n border: solid 2px #19ba9b;\n overflow: hidden;\n\n :before {\n content: '';\n z-index: -1;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n right: -100%;\n background-color: #ffffff;\n transition: 0.2s;\n }\n\n :hover {\n color: #19ba9b;\n background-position: 0 100%;\n\n :hover:before {\n right: 0;\n }\n }\n }\n\n &.strong {\n /* サービスサイト用調整中 */\n color: #ffffff;\n background: #ff9900;\n background: linear-gradient(\n to bottom right,\n #ff860d 15%,\n #ffbf00 75%,\n #ffff00 95%\n );\n background-size: 110% 110%;\n background-position: -2px -2px;\n border: solid 2px #ffbf00;\n\n :before {\n content: '';\n z-index: -1;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n right: -100%;\n background-color: #ff860d;\n transition: 0.2s;\n }\n\n :hover {\n transform: scale(1.1, 1.1);\n border-color: #ff860d;\n\n :hover:before {\n right: 0;\n }\n }\n }\n\n &.weak-caution {\n color: #ff5454;\n background-color: #ffffff;\n border: solid 1px #ff5454;\n }\n\n &.caution {\n color: #ffffff;\n background: #d62d2d;\n border: solid 1px #f78787;\n }\n\n &.disabled {\n color: rgba(210, 210, 210, 1);\n background: rgba(220, 220, 220, 0.3);\n border: solid 1px rgba(220, 220, 220, 1);\n\n &:hover {\n border-color: rgba(220, 220, 220, 0.8);\n }\n }\n`\n\nexport type ICommonBtnProps = React.DetailedHTMLProps<\n React.ButtonHTMLAttributes,\n HTMLButtonElement\n> & {\n size?: 'small' | 'medium' | 'large' | 'mega'\n level?: 'weak' | 'normal' | 'strong' | 'weak-caution' | 'caution' | 'disabled'\n}\n/**\n * サービスサイト用共通ボタン\n * 強弱/大小で組み合わせて使うぞ\n * 立体感を出したくないときは各画面から.no-shadowを指定するようにする\n * @param props\n */\nconst OfficialCommonBtn = (props: ICommonBtnProps): JSX.Element => {\n const { className = '', size = 'small', level = 'weak' } = props\n return (\n \n )\n}\nexport default OfficialCommonBtn\n","import styled from '@emotion/styled'\nimport React from 'react'\n\nconst Wrapper = styled.p`\n margin: -10px 0 30px 34px;\n opacity: 0.5;\n text-align: left;\n font-size: 15px;\n`\n\ntype Props = {\n /** クラス名 */\n className?: string\n}\n\n/**\n * プラポリ同意チェックボックス直下テキスト\n * @constructor\n */\nconst PolicyUnderText = (props: Props): JSX.Element => {\n const { className = '' } = props\n\n return (\n \n 当社製品、サービスに関するご案内を入力メールアドレス宛に\n
\n お送りする可能性があります。\n \n )\n}\n\nexport default PolicyUnderText\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: #eeeeeb;\n flex-wrap: wrap;\n .inner {\n position: relative;\n width: 1200px;\n height: 420px;\n img {\n position: absolute;\n &.bottom-01 {\n left: 0;\n top: -34px;\n }\n &.bottom-02 {\n right: 30px;\n bottom: 0;\n }\n }\n }\n ${BreakPoints.xxLarge} {\n .inner {\n width: 100vw;\n height: auto;\n img {\n position: relative;\n &.bottom-01 {\n width: 38%;\n left: 0;\n top: -24px;\n }\n &.bottom-02 {\n width: 55%;\n right: 10px;\n bottom: -5px;\n }\n }\n }\n }\n ${BreakPoints.medium} {\n }\n ${BreakPoints.small} {\n }\n`\n\n/**\n * LP01用コンテンツ部下部\n * @constructor\n */\nconst LpBottom01 = (): JSX.Element => (\n <>\n \n
\n \n \n
\n \n \n)\n\nexport default LpBottom01\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React, { VFC } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.article`\n display: flex;\n justify-content: center;\n background: #00afd6;\n padding: 0 0 15px 0;\n\n .inner {\n position: relative;\n width: 1020px;\n\n h1 {\n width: 100%;\n position: absolute;\n text-align: center;\n top: -50px;\n }\n\n .btn-area {\n width: 50%;\n padding: 55px 0 0;\n display: inline-block;\n text-align: center;\n }\n }\n\n ${BreakPoints.xLarge} {\n .inner {\n width: 100vw;\n\n .btn-area {\n img {\n width: 45vw;\n max-width: 352px;\n }\n }\n }\n }\n\n ${BreakPoints.medium} {\n .inner {\n h1 {\n top: -20px;\n\n img {\n width: 80vw;\n }\n }\n\n .btn-area {\n width: 100%;\n display: block;\n text-align: center;\n\n img {\n width: 80vw;\n max-width: 352px;\n }\n\n &.btn-02 {\n padding-top: 20px;\n border-top: dashed 2px rgba(255, 255, 255, 0.5);\n }\n }\n }\n }\n\n ${BreakPoints.small} {\n }\n`\n\ntype LpCta01Props = {\n signUpLink: string\n}\n\n/**\n * LP01用CTA\n * @constructor\n */\nconst LpCta01: VFC = (props): JSX.Element => (\n \n
\n

\n \n

\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n)\n\nexport default LpCta01\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.article`\n margin-top: -2px;\n display: flex;\n justify-content: center;\n background: url(/images/lp/lp01/lpBg02.png) #ffffff;\n background-size: 100%;\n background-position: center bottom;\n background-repeat: no-repeat;\n .inner {\n position: relative;\n width: 1100px;\n h1 {\n text-align: center;\n }\n .features-wrap {\n display: flex;\n position: relative;\n .features-inner {\n width: 340px;\n margin: 120px auto 70px;\n padding: 120px 30px 30px;\n position: relative;\n text-align: center;\n font-weight: bold;\n background: #ffffff;\n border-top: 5px solid #00afd6;\n box-shadow: 5px 5px 30px rgb(0 0 0 / 25%);\n z-index: 1;\n img {\n position: absolute;\n top: -110px;\n left: 25%;\n }\n h2 {\n font-size: 30px;\n margin-bottom: 20px;\n }\n p {\n text-align: left;\n font-size: 18px;\n line-height: 1.8em;\n span {\n color: #ff4c4d;\n }\n }\n }\n .features-bg {\n width: 50%;\n height: 130px;\n position: absolute;\n background: linear-gradient(\n to right,\n #00afd6 14%,\n #7ef2db 20%,\n #00afd6 80%,\n #7ef2db 86%\n );\n left: 25%;\n top: 43%;\n }\n }\n }\n ${BreakPoints.xLarge} {\n .inner {\n width: 100vw;\n h1 {\n width: 100%;\n text-align: center;\n img {\n width: 80%;\n }\n }\n .features-wrap {\n display: block;\n .features-inner {\n width: 70%;\n margin: 50px auto;\n padding: 30px 40px;\n text-align: left;\n overflow: hidden;\n img {\n position: relative;\n top: unset;\n left: unset;\n display: block;\n float: left;\n margin: -20px 30px 20px 0;\n }\n h2 {\n font-size: 28px;\n margin-bottom: 20px;\n br {\n display: none;\n }\n }\n p {\n text-align: left;\n font-size: 18px;\n line-height: 1.8em;\n span {\n color: #ff4c4d;\n }\n }\n }\n .features-bg {\n width: 140px;\n height: 50%;\n position: absolute;\n background: linear-gradient(\n #00afd6 14%,\n #7ef2db 20%,\n #00afd6 83%,\n #7ef2db 90%\n );\n left: 40vw;\n top: 25%;\n }\n }\n }\n }\n ${BreakPoints.large} {\n background-size: 160%;\n .inner {\n .features-wrap {\n .features-inner {\n width: 90%;\n margin: 30px auto;\n padding: 30px;\n img {\n width: 30%;\n }\n }\n }\n }\n }\n ${BreakPoints.medium} {\n .inner {\n .features-wrap {\n .features-inner {\n p {\n clear: both;\n }\n }\n }\n }\n }\n ${BreakPoints.small} {\n }\n`\n\n/**\n * LP01用コンテンツ部キンクラの特徴\n * @constructor\n */\nconst LpFeature01 = (): JSX.Element => (\n \n
\n

\n \n

\n
\n
\n \n

\n 導入・利用開始が\n
\n ラクラク管理\n

\n

\n 初期費用が掛からず専用の機器などは不要。\n
\n PCやスマホからいつでもアクセスOK。\n

\n
\n
\n \n

\n 十人十色のシフトも\n
\n スグできる\n

\n

\n 従業員が自分自身のシフトを自由に作成することができ、労務管理者は承認するだけで良いため、\n \n 日勤・夜勤・時短などバラバラのシフトも簡単に管理できます。\n \n

\n
\n
\n \n

\n 最大5段階の\n
\n 承認フロー設定\n

\n

\n 申請の種類ごとに承認のルール設定が可能なので、\n 部署間のバラバラなワークフローにも対応。\n 画面上で現在の段階や対応担当者も確認いただけます。\n

\n
\n
\n
\n
\n \n)\n\nexport default LpFeature01\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport LogoSvg from '../atoms/logoSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.footer`\n background: #ffffff;\n text-align: center;\n padding: 15px 0 10px;\n .logo-link {\n height: 35px;\n display: inline-flex;\n align-items: center;\n .logo {\n margin: 0 5px 0 0;\n padding: 0;\n width: 170px;\n }\n }\n .copyright {\n padding: 0 0;\n font-size: 12px;\n color: #333333;\n }\n ${BreakPoints.xLarge} {\n }\n ${BreakPoints.medium} {\n }\n ${BreakPoints.small} {\n }\n`\n\n/**\n * LP01フッター\n * @constructor\n */\nconst LpFooter01 = (): JSX.Element => (\n \n

\n \n \n \n

\n

\n ©2021 CLINKS Co., Ltd. All Rights Reserved.\n

\n \n)\n\nexport default LpFooter01\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 flex-wrap: wrap;\n background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%2C%20.cls-3%20%7B%20fill%3A%20none%3B%20%7D%20.cls-1%20%7B%20stroke%3A%20%230000000a%3B%20%7D%20.cls-2%20%7B%20stroke%3A%20none%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_23613%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2023613%22%20class%3D%22cls-1%22%3E%20%3Crect%20class%3D%22cls-2%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%20%3Crect%20class%3D%22cls-3%22%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2211%22%20height%3D%2211%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');\n background-repeat: repeat;\n background-color: #ffffff;\n .inner {\n width: 1024px;\n padding: 70px 0 110px;\n background: url(/images/lp/lp01/lpBg03.png);\n background-size: 100%;\n background-position: center -80px;\n background-repeat: no-repeat;\n h1 {\n text-align: center;\n }\n .function-wrap {\n position: relative;\n margin: 80px auto 70px;\n background: #ffffff;\n border-radius: 30px;\n box-shadow: 5px 5px 30px rgb(0 0 0 / 25%);\n h2 {\n border-radius: 100vh;\n position: relative;\n width: 300px;\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0 auto;\n color: #ffffff;\n font-size: 30px;\n font-weight: bold;\n top: -25px;\n }\n .function-innner {\n display: flex;\n justify-content: space-between;\n padding: 30px;\n text-align: center;\n .items {\n position: relative;\n width: 208px;\n font-weight: bold;\n img {\n display: inline-block;\n margin-top: -50px;\n }\n h3 {\n font-size: 22px;\n margin-bottom: 15px;\n }\n p {\n }\n &:after {\n content: '';\n display: block;\n position: absolute;\n height: 200px;\n width: 1px;\n border-right: dotted 2px #cccccc;\n top: 0;\n right: -30px;\n }\n &:last-child {\n &:after {\n display: none;\n }\n }\n }\n }\n &.function-01 {\n h2 {\n background: #00afd6;\n }\n .items {\n h3 {\n color: #00afd6;\n }\n }\n }\n &.function-02 {\n h2 {\n background: #3ec7b3;\n }\n .items {\n h3 {\n color: #3ec7b3;\n }\n }\n }\n &.function-03 {\n width: 825px;\n margin: 0 auto;\n h2 {\n background: #243650;\n }\n .items {\n h3 {\n color: #243650;\n }\n }\n }\n }\n }\n ${BreakPoints.xLarge} {\n .inner {\n width: 90vw;\n padding: 70px 0;\n h1 {\n width: 100%;\n img {\n width: 80%;\n }\n }\n .function-wrap {\n margin: 80px auto 70px;\n .function-innner {\n justify-content: space-around;\n flex-wrap: wrap;\n padding: 0 30px 30px;\n .items {\n width: 190px;\n margin: 0 10px 20px;\n img {\n display: inline-block;\n margin-top: 0;\n }\n h3 {\n font-size: 22px;\n margin-bottom: 15px;\n }\n p {\n }\n &:after {\n display: none;\n }\n }\n }\n &.function-03 {\n width: 90vw;\n }\n }\n }\n }\n ${BreakPoints.medium} {\n }\n ${BreakPoints.small} {\n }\n`\n\n/**\n * LP01用コンテンツ部機能\n * @constructor\n */\nconst LpFunction01 = (): JSX.Element => (\n <>\n \n
\n

\n \n

\n
\n

従業員向け機能

\n
\n
\n \"打刻\"\n

打刻

\n

PC・タブレット・スマホから簡単に打刻ができます

\n
\n
\n \"勤務表\"\n

勤務表

\n

自社だけでなく、常駐先の勤務表も自動生成

\n
\n
\n \"履歴確認\"\n

履歴確認

\n

各種申請の履歴や自身の有給残日数など確認可能

\n
\n
\n \"各種申請\"\n

各種申請

\n

残業申請、休暇申請等の各種申請が可能

\n
\n
\n
\n\n
\n

管理職向け機能

\n
\n
\n \"申請承認\"\n

申請承認

\n

各種申請の承認、差し戻し、一括操作

\n
\n\n
\n \"出勤管理\"\n

出勤管理

\n

出退勤時刻や勤務地、休憩取得時間を一覧で表示

\n
\n\n
\n \n

勤務実態集計

\n

残業時間や有給取得など勤務実態を自動集計

\n
\n\n
\n \"打刻\"\n

管理アラート

\n

設定された閾値を元に、キンクラからアラートを通知

\n
\n
\n
\n\n
\n

人事労務向け機能

\n
\n
\n \"休暇付与\"\n

休暇付与

\n

有給の自動付与や独自の特別休暇を任意に付与

\n
\n\n
\n \n

給与ソフト連携

\n

給与ソフトに合わせてエクスポートデータを生成

\n
\n\n
\n \n

お知らせ投稿

\n

全従業員に向けた通達など、お知らせが掲載可能

\n
\n
\n
\n
\n \n \n)\n\nexport default LpFunction01\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React, { VFC } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport LogoSvg from '../atoms/logoSvg'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.header`\n height: 80px;\n background: #ffffff;\n display: flex;\n\n .inner {\n width: 1100px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n\n .logo-link {\n height: 35px;\n display: inline-flex;\n align-items: center;\n\n .logo {\n margin: 0 5px 0 0;\n padding: 0;\n width: 170px;\n }\n }\n\n .btn-wrap {\n width: 540px;\n margin: 0 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-around;\n\n a {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 260px;\n height: 46px;\n padding: 0 20px 1px 0;\n color: #ffffff;\n background: #00afd6;\n border-radius: 100vh;\n font-weight: 800;\n font-size: 1.142em;\n text-decoration: underline solid rgba(255, 255, 255, 0) !important;\n\n &:before {\n content: '';\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 6px 0 6px 8px;\n border-color: transparent transparent transparent #ffffff;\n position: absolute;\n top: 50%;\n right: 30px;\n margin-top: -6px;\n }\n\n &.head-link02 {\n color: #243650;\n background: #b2e7f3;\n\n &:before {\n border-color: transparent transparent transparent #243650;\n }\n }\n }\n }\n }\n\n ${BreakPoints.large} {\n .inner {\n width: 100vw;\n\n .btn-wrap {\n width: calc(100vw - 200px);\n justify-content: flex-end;\n\n a {\n width: 40%;\n margin: 0 20px 0 0;\n\n &:before {\n right: 15px;\n }\n }\n }\n }\n }\n\n ${BreakPoints.large} {\n height: 50px;\n\n .inner {\n align-items: center;\n\n .logo-link {\n .logo {\n width: 130px;\n }\n }\n\n .btn-wrap {\n width: calc(100vw - 150px);\n\n a {\n font-size: 0.942em;\n width: 50%;\n max-width: 200px;\n height: 30px;\n margin: 0 10px 0 0;\n\n &:before {\n right: 10px;\n }\n }\n }\n }\n }\n\n ${BreakPoints.small} {\n }\n`\n\ntype LpHeader01Props = {\n signUpLink: string\n}\n\n/**\n * LP01ヘッダー\n * @constructor\n */\nconst LpHeader01: VFC = (props): JSX.Element => (\n \n
\n

\n \n \n \n

\n
\n \n 無料アカウント作成\n \n \n 無料資料ダウンロード\n \n
\n
\n \n)\n\nexport default LpHeader01\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: #ffffff;\n flex-wrap: wrap;\n .inner {\n position: relative;\n width: 1300px;\n h1 {\n margin: 68px auto;\n text-align: center;\n }\n .merit-wrap {\n position: relative;\n margin-bottom: 80px;\n .merit-inner-content {\n width: 791px;\n height: 637px;\n font-weight: bold;\n padding: 70px 170px 35px;\n h2 {\n color: #243650;\n font-size: 32px;\n line-height: 1.4em;\n margin-bottom: 30px;\n span {\n font-size: 38px;\n display: block;\n }\n }\n p {\n font-size: 18px;\n line-height: 1.8em;\n margin-bottom: 20px;\n }\n img {\n display: block;\n margin: auto;\n }\n }\n .merit-inner-img {\n position: absolute;\n top: 30px;\n width: 45vw;\n max-width: 645px;\n }\n &.merit-01 {\n .merit-inner-content {\n background: url(/images/lp/lp01/lpMeritBg01.png) no-repeat #ffffff\n 100% center;\n }\n .merit-inner-img {\n right: 0;\n }\n }\n &.merit-02 {\n .merit-inner-content {\n margin-left: auto;\n background: url(/images/lp/lp01/lpMeritBg02.png) no-repeat #ffffff\n 100% center;\n }\n .merit-inner-img {\n left: 0;\n }\n }\n &.merit-03 {\n margin-bottom: 140px;\n .merit-inner-content {\n background: url(/images/lp/lp01/lpMeritBg03.png) no-repeat #ffffff\n 100% center;\n }\n .merit-inner-img {\n right: 0;\n }\n }\n }\n }\n ${BreakPoints.xxLarge} {\n .inner {\n width: 100vw;\n overflow: hidden;\n .merit-wrap {\n .merit-inner-content {\n width: 100%;\n height: auto;\n font-weight: bold;\n padding: 70px 45vw 35px 30px;\n h2 {\n color: #243650;\n font-size: 32px;\n line-height: 1.4em;\n margin-bottom: 30px;\n span {\n font-size: 38px;\n display: block;\n }\n }\n p {\n font-size: 18px;\n line-height: 1.8em;\n margin-bottom: 20px;\n }\n img {\n display: block;\n margin: auto;\n }\n }\n .merit-inner-img {\n position: absolute;\n top: 100px;\n width: 45vw;\n max-width: 645px;\n }\n &.merit-01 {\n .merit-inner-content {\n background-position: -10% top;\n }\n }\n &.merit-02 {\n .merit-inner-content {\n padding: 70px 30px 35px 45vw;\n background-position: 110% top;\n }\n }\n &.merit-03 {\n margin-bottom: 100px;\n .merit-inner-content {\n background-position: -10% top;\n }\n }\n }\n }\n }\n ${BreakPoints.xLarge} {\n .inner {\n width: 100vw;\n h1 {\n width: 100%;\n text-align: center;\n img {\n width: 80%;\n }\n }\n .merit-wrap {\n .merit-inner-content {\n h2 {\n font-size: 27px;\n span {\n font-size: 30px;\n }\n }\n p {\n font-size: 16px;\n }\n }\n .merit-inner-img {\n top: 130px;\n }\n }\n }\n }\n ${BreakPoints.medium} {\n .inner {\n .merit-wrap {\n position: relative;\n margin-bottom: 40px;\n .merit-inner-content {\n h2 {\n width: 50vw;\n }\n width: 100vw;\n height: auto;\n padding: 150px 30px 35px 20px;\n background-position: -65vw top !important ;\n }\n .merit-inner-img {\n top: 0;\n }\n &.merit-02 {\n .merit-inner-content {\n padding: 150px 30px 35px 20px;\n }\n .merit-inner-img {\n left: unset;\n right: 0;\n }\n }\n &.merit-03 {\n margin-bottom: 80px;\n }\n }\n }\n }\n ${BreakPoints.small} {\n }\n`\n\n/**\n * LP01用コンテンツ部メリット\n * @constructor\n */\nconst LpMerit01 = (): JSX.Element => (\n <>\n \n
\n

\n \n

\n
\n
\n

\n 打刻も勤怠申請も全ての勤務情報を集約\n

\n

\n 日々の打刻や残業、遅刻欠勤等の各種勤怠申請から毎月自動的に勤務表が作成されるため、従業員は内容を確認して提出ボタンを押すだけで簡単に勤務表を提出することができます。管理職はキンクラ上で勤務表を確認。詳細を知りたければ勤務情報をその場で確認できるため、月末月初に発生する勤務表の回収、確認効率が飛躍的に向上します。\n

\n \n
\n \n
\n
\n
\n

\n 有給取得や残業時間など社員の状況を一元管理\n

\n

\n キンクラを導入すれば、年間の有給取得義務の管理や毎月の時間外労働・休日出勤などの勤怠データはシステムで一元管理できます。さらに一定の基準を超えた働き方をしている従業員が確認されると、自動アラートで本人と管理職へお知らせされるので、問題の発生を未然に防ぐことができます。\n

\n \n
\n \n
\n
\n
\n

\n 「自社」と「常駐先」2つの勤務時間を個別管理\n

\n

\n 客先常駐している社員が多く在籍していると、自社と常駐先それぞれの勤務表を管理するのも大変・・・\n
\n キンクラでは「自社」と「常駐先」2つの勤務時間をまとめて管理することが可能です。\n
\n 勤務地をもとにそれぞれの勤務時間をキンクラが自動集計するので、”労務管理の手間と工数を大幅に削減”できます。\n

\n \n
\n \n
\n
\n \n \n)\n\nexport default LpMerit01\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 flex-wrap: wrap;\n background: #ffffff;\n .inner {\n position: relative;\n width: 100vw;\n max-width: 1100px;\n padding: 60px 0 120px;\n h1 {\n text-align: center;\n margin-bottom: 45px;\n width: 100%;\n img {\n width: 100%;\n }\n }\n .plan-wrap {\n display: flex;\n justify-content: space-between;\n .plan-inner {\n width: calc(98% / 3);\n max-width: 346px;\n border-radius: 25px;\n border: solid 2px;\n overflow: hidden;\n h2 {\n margin: 0 20px;\n padding: 20px 0;\n border-radius: 0 0 29px 29px;\n color: #ffffff;\n text-align: center;\n font-size: 32px;\n font-weight: bold;\n }\n h3 {\n margin: 25px 32px;\n font-size: 18px;\n font-weight: bold;\n line-height: 1.8em;\n }\n p {\n height: 141px;\n text-align: center;\n img {\n margin-top: -2px;\n }\n }\n &.plan01 {\n border-color: #00afd6;\n h2 {\n background: #00afd6;\n }\n p {\n background: #e5f7fb;\n }\n }\n &.plan02 {\n border-color: #3ec7b3;\n h2 {\n background: #3ec7b3;\n }\n p {\n background: #ecf9f7;\n }\n }\n &.plan03 {\n border-color: #243650;\n h2 {\n background: #243650;\n }\n p {\n background: #e9ebed;\n }\n }\n }\n }\n }\n ${BreakPoints.xLarge} {\n .inner {\n padding: 60px 0 50px;\n .plan-wrap {\n display: flex;\n justify-content: space-between;\n .plan-inner {\n width: calc(98% / 3);\n max-width: 346px;\n border-radius: 25px;\n border: solid 2px;\n overflow: hidden;\n h2 {\n margin: 0 10px;\n font-size: 24px;\n }\n h3 {\n margin: 15px 25px;\n font-size: 16px;\n }\n p {\n height: auto;\n padding: 0 0 20px;\n text-align: center;\n img {\n width: 80%;\n }\n }\n }\n }\n }\n }\n @media screen and (max-width: 915px) {\n .inner {\n .plan-wrap {\n .plan-inner {\n h3 {\n br {\n display: none;\n }\n }\n }\n }\n }\n }\n ${BreakPoints.medium} {\n .inner {\n .plan-wrap {\n display: block;\n .plan-inner {\n width: 80%;\n max-width: unset;\n margin: 0 auto 20px;\n h2 {\n margin: 0 10px;\n font-size: 24px;\n }\n h3 {\n margin: 15px 25px;\n font-size: 16px;\n }\n p {\n height: auto;\n padding: 0 0 20px;\n text-align: center;\n img {\n width: 80%;\n }\n }\n }\n }\n }\n }\n ${BreakPoints.small} {\n }\n`\n\n/**\n * LP01用コンテンツ部プラン\n * @constructor\n */\nconst LpPlan01 = (): JSX.Element => (\n <>\n \n
\n

\n \n

\n
\n
\n

Freeプラン

\n

\n スタートアップ・特定のグループ内で従業員向け勤怠機能を利用したい場合におすすめのプランです\n
\n
\n

\n

\n \n

\n
\n
\n

Businessプラン

\n

\n 管理職向け機能も活用し、勤怠業務効率を改善されたい中・小規模の企業におすすめのプランです\n
\n
\n

\n

\n \n

\n
\n
\n

Enterpriseプラン

\n

\n キンクラをフル活用されたい大規模企業または自社独自の機能をご利用されたい場合におすすめのプランです\n

\n

\n \n

\n
\n
\n
\n \n \n)\n\nexport default LpPlan01\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: #d9f3f9;\n .inner {\n width: 1024px;\n position: relative;\n background: #ffffff;\n border-radius: 0 0 196px 196px;\n padding: 0 0 150px;\n margin-bottom: 150px;\n h1 {\n text-align: center;\n margin-bottom: 10px;\n }\n .security-wrap {\n display: flex;\n justify-content: space-evenly;\n .item-01 {\n width: calc(100% / 4);\n text-align: center;\n font-weight: bold;\n img {\n margin-bottom: 15px;\n }\n h2 {\n font-size: 26px;\n color: #243650;\n margin-bottom: 10px;\n }\n p {\n padding: 0 12px 0 15px;\n text-align: left;\n }\n }\n }\n .security-01 {\n display: block;\n margin: 50px auto -250px;\n }\n }\n ${BreakPoints.large} {\n .inner {\n width: 100vw;\n padding: 0 0 100px;\n margin-bottom: 100px;\n h1 {\n width: 100%;\n img {\n width: 70%;\n }\n }\n .security-wrap {\n flex-wrap: wrap;\n justify-content: space-around;\n .item-01 {\n min-width: 230px;\n margin-bottom: 20px;\n }\n }\n .security-01 {\n width: 80vw;\n margin: 0 auto -170px;\n }\n }\n }\n ${BreakPoints.medium} {\n }\n ${BreakPoints.small} {\n }\n`\n\n/**\n * LP01用コンテンツ部セキュリティ\n * @constructor\n */\nconst LpSecurity01 = (): JSX.Element => (\n <>\n \n
\n

\n \n

\n
\n
\n \"情報資産の管理\"\n

情報資産の管理

\n

\n 重要な情報は暗号化して保存。万一障害発生時もデータはバックアップされているので安心です。\n

\n
\n
\n \"通信の暗号化\"\n

通信の暗号化

\n

\n ネットワーク通信はSSLで暗号化。盗聴・漏えい等の脅威に対しデータの機密性を確保しています。\n

\n
\n
\n \"ISMS認証\"\n

ISMS認証

\n

\n ISMS認証（ISO27001）とプライバシーマークを取得した企業がキンクラを\n 開発・運営\n

\n
\n
\n \n

脆弱性診断クリア

\n

キンクラは第三者企業による脆弱性診断をクリアしています。

\n
\n
\n \n
\n \n \n)\n\nexport default LpSecurity01\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: #00afd6;\n flex-wrap: wrap;\n .inner {\n width: 1024px;\n height: 210px;\n position: relative;\n img {\n position: absolute;\n top: -30px;\n width: 100%;\n }\n }\n ${BreakPoints.xLarge} {\n .inner {\n width: 100vw;\n height: auto;\n padding: 30px 0 0;\n img {\n position: relative;\n top: unset;\n bottom: -3px;\n width: 100%;\n }\n }\n }\n ${BreakPoints.medium} {\n }\n ${BreakPoints.small} {\n }\n`\n\n/**\n * LP01用コンテンツ部サポート\n * @constructor\n */\nconst LpSupport01 = (): JSX.Element => (\n <>\n \n
\n \n
\n \n \n)\n\nexport default LpSupport01\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-image: linear-gradient(to bottom, #243650 65%, #ffffff 65.1%);\n .inner {\n position: relative;\n width: 900px;\n text-align: center;\n h1 {\n font-size: 38px;\n margin: -20px auto 20px;\n color: #ffffff;\n img {\n margin-bottom: 10px;\n }\n }\n .movie-wrap {\n }\n }\n ${BreakPoints.large} {\n .inner {\n width: 100vw;\n h1 {\n font-size: 32px;\n margin: -20px 20px 20px;\n img {\n margin-bottom: 10px;\n }\n }\n .movie-wrap {\n iframe {\n width: 90vw;\n }\n }\n }\n }\n ${BreakPoints.medium} {\n }\n ${BreakPoints.small} {\n }\n`\n\n/**\n * LP01用コンテンツ部キンクラとは -動画-\n * @constructor\n */\nconst LpWhatisMovie01 = (): JSX.Element => (\n \n
\n

\n \"などなど\"\n
\n 様々なご要望にお応えすることができます！\n

\n
\n \n
\n
\n \n)\n\nexport default LpWhatisMovie01\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport LpWhatisMovie01 from '../atoms/lpWhatisMovie01'\n\nconst Wrapper = styled.article`\n display: flex;\n justify-content: center;\n background: #e5f7ff;\n flex-wrap: wrap;\n .inner {\n position: relative;\n width: 1024px;\n h1 {\n text-align: center;\n }\n p {\n width: 820px;\n font-weight: 800;\n font-size: 18px;\n margin: 30px auto 50px;\n text-align: center;\n padding: 0 40px 0 0;\n }\n .whatis-01-p {\n display: block;\n width: 100%;\n }\n .whatis-01-s {\n display: none;\n }\n }\n ${BreakPoints.xLarge} {\n .inner {\n width: 100vw;\n h1 {\n width: 100%;\n text-align: center;\n img {\n width: 80%;\n }\n }\n p {\n width: 80%;\n margin: 30px auto 30px;\n text-align: center;\n padding: 0;\n }\n .whatis-01-p {\n display: none;\n }\n .whatis-01-s {\n display: block;\n width: 60%;\n margin: 0 auto 40px;\n }\n }\n }\n ${BreakPoints.medium} {\n .inner {\n .whatis-01-s {\n width: 80%;\n margin: 0 auto 40px;\n }\n }\n }\n ${BreakPoints.small} {\n }\n`\n\n/**\n * LP01用コンテンツ部キンクラとは\n * @constructor\n */\nconst LpWhatis01 = (): JSX.Element => (\n <>\n \n
\n

\n \"キンクラとは\"\n

\n

\n これから社員数を増やそうと思っている企業の経営者様や、人事・総務部門の管理者様に向けた\n 「自社と常駐先それぞれ別の勤務時間を一括管理できる便利な勤怠管理システム」です。\n

\n \n \n
\n \n \n \n)\n\nexport default LpWhatis01\n","import { useEffect } from 'react'\nimport { API } from 'aws-amplify'\n\nconst awsmobile = require('../aws-exports')\n\ntype IExecApi = (\n path: string,\n body: Body,\n success: (response: Response) => void,\n error?: () => void\n) => void\n\ntype IReturn = { execApi: IExecApi }\nconst useApi = (method = 'post'): IReturn => {\n useEffect(() => {\n API.configure(awsmobile.default)\n }, [])\n\n /** APIを実行 */\n const execApi: IExecApi = async (\n path,\n body,\n success,\n error\n ) => {\n const APIName = 'beaverOfficial'\n const params = {\n body,\n }\n try {\n switch (method) {\n case'get':\n success(await API.get(APIName, path, params))\n break\n default:\n success(await API.post(APIName, path, params))\n break\n }\n } catch (e) {\n error && error()\n }\n }\n return { execApi }\n}\n\nexport default useApi\n","import { ChangeEvent, useState } from 'react'\nimport { IContactDownload } from '../types/Contact'\nimport useKindName from './useKindName'\nimport { ManagementKindList } from '../types/ManagementKind'\nimport useApi from './useApi'\nimport StringUtil from '../utils/StringUtil'\nimport { SiteKindList, SiteKindType } from '../types/SiteKind'\n\nconst InitContact: IContactDownload = {\n company: '',\n email: '',\n name: '',\n tel: '',\n agree: false,\n managementType: '',\n parameter: '',\n siteKind: '',\n}\ntype IOnChangeContact = (\n key: keyof IContactDownload\n) => (\n e: ChangeEvent\n) => void\n\ntype IReturn = {\n /** 問い合わせ内容 */\n contact: IContactDownload\n /** エラーフラグ */\n isError: boolean\n /** ローディングフラグ */\n loading: boolean\n /** 終了フラグ */\n finish: boolean\n /** 問い合わせ変更時コールバック */\n onChangeContact: IOnChangeContact\n /** 資料ダウンロード */\n execDownload: (siteKind: SiteKindType) => void\n}\n\n/**\n * 資料ダウンロード関連のフック関数\n */\nconst useDownload = (): IReturn => {\n const [contact, setContact] = useState(InitContact)\n const [isError, setError] = useState(false)\n const [loading, setLoading] = useState(false)\n const [finish, setFinish] = useState(false)\n const getKindName = useKindName(ManagementKindList)\n const getSiteKindName = useKindName(SiteKindList)\n const { execApi } = useApi()\n\n /** データ変更時処理 */\n const onChangeContact: IOnChangeContact = (key) => (e) => {\n let val: string | boolean = e.target.value\n if (key === 'tel') val = StringUtil.pickNumberHyphen(val)\n else if (key === 'agree' && e.target instanceof HTMLInputElement)\n val = e.target.checked\n setContact({ ...contact, [key]: val })\n }\n\n /**\n * ダウンロードボタンクリック時処理\n */\n const execDownload = (siteKind: SiteKindType) => {\n if (\n !contact.company ||\n !contact.name ||\n !contact.tel ||\n !contact.email ||\n !contact.managementType ||\n !StringUtil.checkFormatMail(contact.email) ||\n !contact.agree\n ) {\n setError(true)\n return\n }\n setLoading(true)\n const request = {\n ...contact,\n managementType: getKindName(contact.managementType),\n parameter: window.location.search,\n siteKind: getSiteKindName(siteKind),\n }\n\n execApi(\n '/dl2022',\n request,\n () => {\n setFinish(true)\n },\n () => {\n setLoading(false)\n }\n )\n }\n return {\n contact,\n isError,\n loading,\n finish,\n onChangeContact,\n execDownload,\n }\n}\n\nexport default useDownload\n","export type ICommonKind = { name: string; kind: T }\n/** Kind名の取得 */\nconst useKindName =\n (\n kindList: ICommonKind[]\n ): ((status: T) => string) =>\n (status: T): string => {\n const result = kindList.find((data) => data.kind === status)\n return result !== undefined ? result.name : ''\n }\n\nexport default useKindName\n","/**\n * 現在の勤怠管理方法\n */\nexport const ManagementKind = {\n NONE: '',\n /** Excel・紙を利用 */\n INTRODUCTION_METHOD: 'excel-paper',\n /** 他社のクラウドサービスを導入済み */\n DETAIL: 'other-cloud',\n /** パッケージソフトを導入済み */\n PRICE: 'package-soft',\n /** 自社システムで運用 */\n PARTNER: 'my-system',\n /** その他管理 */\n OTHER: 'other',\n} as const\n\nexport type ManagementKindType =\n typeof ManagementKind[keyof typeof ManagementKind]\n\nexport const ManagementKindList: {\n name: string\n kind: ManagementKindType\n}[] = [\n { name: 'Excel・紙を利用', kind: ManagementKind.INTRODUCTION_METHOD },\n { name: '他社のクラウドサービスを導入済み', kind: ManagementKind.DETAIL },\n { name: 'パッケージソフトを導入済み', kind: ManagementKind.PRICE },\n { name: '自社システムで運用', kind: ManagementKind.PARTNER },\n { name: 'その他管理', kind: ManagementKind.OTHER },\n]\n","/**\n * サイト種別\n */\nexport const SiteKind = {\n NONE: '',\n PRODUCT: 'product',\n LPA: 'lp-a',\n LPB: 'lp-b',\n EXPENSES: 'expenses',\n} as const\nexport type SiteKindType = typeof SiteKind[keyof typeof SiteKind]\n\nexport const SiteKindList: {\n name: string\n kind: SiteKindType\n}[] = [\n { name: '製品サイト', kind: SiteKind.PRODUCT },\n { name: 'LP-A', kind: SiteKind.LPA },\n { name: ' LP-B', kind: SiteKind.LPB },\n { name: ' 経費LP', kind: SiteKind.EXPENSES },\n]\n","/**\n * 文字列操作系の共通クラス\n */\nexport default {\n /**\n * 全角を全角に変換\n * @param input\n */\n toHalfWidth(input: string): string {\n return input.replace(/[！-～]/g, (_input) =>\n String.fromCharCode(_input.charCodeAt(0) - 0xfee0),\n )\n },\n\n /**\n * ハイフン込の数字を抽出\n * @param value\n */\n pickNumberHyphen(value: T): string {\n let num = ''\n // 数字のみ抽出\n if (typeof value === 'string') {\n const rep = value.replace(/[^0-9０-９-]/g, '')\n if (rep) {\n num = this.toHalfWidth(rep)\n }\n } else if (typeof value === 'number') {\n num = value.toString()\n }\n return num\n },\n /**\n * メールフォーマットかどうかチェックする\n * @param mail\n */\n checkFormatMail(mail: string): boolean {\n if (!mail) return false\n const reg =\n /^[A-Za-z0-9]{1}[A-Za-z0-9_.+-]*@{1}[A-Za-z0-9_.-]{1,}\\.[A-Za-z0-9]{1,}$/\n return reg.test(mail)\n },\n}\n"],"names":["Wrapper","props","className","type","checked","onChange","children","Button","BreakPoints","size","level","src","alt","Link","to","useRouteParam","signUpLink","target","width","height","title","frameBorder","allow","allowFullScreen","awsmobile","require","method","useEffect","API","default","execApi","path","body","success","error","APIName","params","InitContact","company","email","name","tel","agree","managementType","parameter","siteKind","useState","contact","setContact","isError","setError","loading","setLoading","finish","setFinish","getKindName","useKindName","ManagementKindList","getSiteKindName","SiteKindList","useApi","onChangeContact","key","e","val","value","StringUtil","HTMLInputElement","execDownload","request","window","location","search","kindList","status","result","find","data","kind","undefined","SiteKind","NONE","PRODUCT","LPA","LPB","EXPENSES","toHalfWidth","input","replace","_input","String","fromCharCode","charCodeAt","pickNumberHyphen","num","rep","this","toString","checkFormatMail","mail","test"],"sourceRoot":""}