{"version":3,"file":"component---src-pages-benefit-tsx-90946f0d8897d6585495.js","mappings":"qLAMA,IAAMA,GAAO,+oBAgFb,IA1B8B,WAC5B,IAAMC,GAAaC,EAAAA,EAAAA,GAAc,aACjC,OACE,QAACF,EAAD,MACE,eAAKG,UAAU,oBACb,eAAKA,UAAU,mCACb,aAAGA,UAAU,yCAAb,uBAGA,eACEC,IAAI,4CACJC,IAAI,cAGR,QAAC,IAAD,CACEC,KAAK,OACLC,QAAS,YACPC,EAAAA,EAAAA,IAASP,KAHb,a,sKCnEFD,GAAO,q6DA2CTS,EAAAA,EAAAA,OA3CS,6hDAsHb,EAzCoB,WAClB,IAAMR,GAAaC,EAAAA,EAAAA,GAAc,0CAC3BQ,GAAcR,EAAAA,EAAAA,GAAc,aAC5BS,GAAcT,EAAAA,EAAAA,GAAc,YAClC,OACE,QAACF,EAAD,CAASG,UAAU,yBACjB,eAAKA,UAAU,qCACb,mCACA,eAAKA,UAAU,gBAAf,OACK,8BADL,SAGA,QAAC,IAAD,CACEG,KAAK,OACLM,MAAM,SACNL,QAAS,kBAAMM,OAAOC,KAAKb,KAH7B,gBAOA,eAAKE,UAAU,eACb,QAAC,IAAD,CACEG,KAAK,QACLC,QAAS,YACPC,EAAAA,EAAAA,IAASE,KAHb,aAQA,QAAC,IAAD,CACEJ,KAAK,QACLC,QAAS,YACPC,EAAAA,EAAAA,IAASG,KAHb,c,sBCpGJX,GAAO,wDAETS,EAAAA,EAAAA,MAFS,oBAKTA,EAAAA,EAAAA,MALS,MA4Eb,EApDuB,SAAC,GAAqD,IAGvEM,EAHoBC,EAAkD,EAAlDA,SAAUC,EAAwC,EAAxCA,MAAOC,EAAiC,EAAjCA,SAAUf,EAAuB,EAAvBA,UAWnD,OALEY,EALe,MACEC,EAASG,UAIjB,QAAC,IAAD,CAAgBhB,UAAWA,KAE3B,QAAC,IAAD,CAAgBA,UAAcA,EAAL,UAIlC,eAAKiB,GAAG,YACN,QAACC,EAAA,EAAD,MACE,gBACEC,KAAK,WACLC,QAAQ,6FAEV,4vBAqBDR,GACD,sDACA,QAAC,EAAD,KACGE,IAAS,QAAC,IAAD,CAAWA,MAAOA,IAC3BC,IAEH,QAAC,EAAD,OACA,QAAC,IAAD,OACA,QAAC,IAAD,S,qEC9EAlB,GAAO,woBAgDTS,EAAAA,EAAAA,QAhDS,KAmDTA,EAAAA,EAAAA,OAnDS,MAuFb,IAhB0B,SAACe,GACzB,MAA2BA,EAAnBrB,UAAAA,OAAR,MAAoB,GAApB,EAEA,OACE,QAACH,EAAD,CAASG,UAAWA,IAClB,eAAKA,UAAU,qBACb,eAAKA,UAAU,eACZqB,EAAMC,QAAS,iBAAID,EAAMC,OACzBD,EAAME,cAAe,kBAAKF,EAAME,aAChCF,EAAMN,c,mJChFXlB,GAAO,ukCAoGTS,EAAAA,EAAAA,OApGS,4KAuITA,EAAAA,EAAAA,OAvIS,yRAsLTA,EAAAA,EAAAA,OAtLS,iGAoQb,EA1D6B,kBAC3B,QAACT,EAAD,MACE,eAAKG,UAAU,oBACb,eAAKA,UAAU,mCACb,eACEC,IAAI,+CACJC,IAAI,aACJF,UAAU,kBAEZ,aAAGA,UAAU,mDAAb,uBAGA,mBACE,mBACE,aAAGA,UAAU,aACX,eACEC,IAAI,oDACJC,IAAI,UACJF,UAAU,eAGd,aAAGA,UAAU,wBAAb,iCAIF,mBACE,aAAGA,UAAU,aACX,eACEC,IAAI,oDACJC,IAAI,UACJF,UAAU,eAGd,aAAGA,UAAU,wBAAb,4BAIF,mBACE,aAAGA,UAAU,aACX,eACEC,IAAI,oDACJC,IAAI,UACJF,UAAU,eAGd,aAAGA,UAAU,wBAAb,+BAMN,aAAGA,UAAU,6CAAb,qCC7PAH,GAAO,guBAkBTS,EAAAA,EAAAA,OAlBS,oDAsBTA,EAAAA,EAAAA,SAtBS,2BAkDb,EAX0B,SAACe,GACzB,MAA2BA,EAAnBrB,UAAAA,OAAR,MAAoB,GAApB,EAEA,OACE,QAAC,EAAD,CAASA,UAAWA,IAClB,8BACA,iBAAIqB,EAAMC,SC5CVzB,GAAO,ujFA+ETS,EAAAA,EAAAA,OA/ES,ixBA2HTA,EAAAA,EAAAA,MA3HS,oHA0ITA,EAAAA,EAAAA,OA1IS,sIA4JTA,EAAAA,EAAAA,SA5JS,oLAqQb,EAhF6B,kBAC3B,QAAC,EAAD,MAEE,eAAKN,UAAU,iDACb,eAAKA,UAAU,+BACb,eAAKA,UAAU,eACb,QAAC,EAAD,CAAmBsB,MAAM,OACzB,cAAItB,UAAU,wCAAd,gBAEE,mBAFF,SAKA,aAAGA,UAAU,cAAb,qDAEE,mBAFF,gGAIE,sBAGJ,eAAKA,UAAU,mBACb,eACEC,IAAI,kDACJC,IAAI,kBAOZ,eAAKF,UAAU,iDACb,eAAKA,UAAU,+BACb,eAAKA,UAAU,eACb,QAAC,EAAD,CAAmBsB,MAAM,OACzB,cAAItB,UAAU,wCAAd,aAEE,mBAFF,WAKA,aAAGA,UAAU,cAAb,+EAEE,mBAFF,8EAMF,eAAKA,UAAU,mBACb,eACEC,IAAI,kDACJC,IAAI,kBAOZ,eAAKF,UAAU,iDACb,eAAKA,UAAU,gCACb,eAAKA,UAAU,eACb,QAAC,EAAD,CAAmBsB,MAAM,OACzB,cAAItB,UAAU,wCAAd,iBAGA,aAAGA,UAAU,cAAb,oCAEE,mBAFF,gEAIE,mBAJF,gFAQF,eAAKA,UAAU,mBACb,eACEC,IAAI,kDACJC,IAAI,gB,WCxPVL,GAAO,uCAuBb,EAfoB,SAAC,GAAD,IAAGgB,EAAH,EAAGA,SAAH,OAClB,QAAC,IAAD,CAAgBA,SAAUA,EAAUb,UAAU,mBAC5C,QAAC,IAAD,CAAKwB,MAAM,UACX,QAAC,EAAD,MACE,QAAC,IAAD,CACEF,MAAM,OACNC,YAAY,4BAEd,QAAC,EAAD,OACA,QAAC,EAAD,OACA,QAAC,IAAD","sources":["webpack://beaver-help/./src/components/molecules/officialGalleryBtnSet.tsx","webpack://beaver-help/./src/components/organisms/officialCta.tsx","webpack://beaver-help/./src/components/organisms/officialLayout.tsx","webpack://beaver-help/./src/components/organisms/officialLowHeader.tsx","webpack://beaver-help/./src/components/organisms/officialLowBenefit01.tsx","webpack://beaver-help/./src/components/atoms/commonPointRibbon.tsx","webpack://beaver-help/./src/components/organisms/officialLowBenefit02.tsx","webpack://beaver-help/./src/pages/benefit.tsx"],"sourcesContent":["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 \n
\n
\n

\n ご好評いただいている機能を公開中です\n

\n \n
\n {\n navigate(routeParam)\n }}\n >\n ギャラリー\n \n
\n
\n )\n}\nexport default OfficialGalleryBtnSet\n","import styled from '@emotion/styled'\nimport { navigate } from 'gatsby-link'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.section`\n width: 100%;\n background: linear-gradient(to bottom right, #41c9b3 0%, #3de8dc 100%);\n text-align: center;\n position: relative;\n .p-cta-inner {\n max-width: 1366px;\n margin: 0 auto;\n padding: 60px 0;\n h3 {\n font-size: 2.5em;\n color: #005e6a;\n }\n .p-cta-ribbon {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px 0 0 0;\n width: 476px;\n height: 60px;\n margin: 20px auto 10px;\n background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22522.004%22%20height%3D%2288.367%22%20viewBox%3D%220%200%20522.004%2088.367%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23009893%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_2240%22%20data-name%3D%22%E3%83%91%E3%82%B9%202240%22%20class%3D%22cls-1%22%20d%3D%22M687.13%2C549.26c-.1-.106-10.287-10.71-14.332-24.91a96.34%2C96.34%2C0%2C0%2C1-3.3-26.006%2C1.383%2C1.383%2C0%2C0%2C0-1.189-1.512H647.051L643.02%2C478.28a1.3%2C1.3%2C0%2C0%2C0-1.205-1.1H216.928l-3.194-12.708a1.366%2C1.366%2C0%2C0%2C0-.838-.981%2C1%2C1%2C0%2C0%2C0-.358-.056H166.787a1.367%2C1.367%2C0%2C0%2C0-1.24%2C1.464%2C1.574%2C1.574%2C0%2C0%2C0%2C.415%2C1.079c.1.1%2C10.287%2C10.709%2C14.332%2C24.908a96.389%2C96.389%2C0%2C0%2C1%2C3.3%2C26.006%2C1.382%2C1.382%2C0%2C0%2C0%2C1.194%2C1.512l.049%2C0h21.212l4.031%2C18.549a1.3%2C1.3%2C0%2C0%2C0%2C1.207%2C1.1H636.166l3.194%2C12.707a1.366%2C1.366%2C0%2C0%2C0%2C.838.98%2C1.06%2C1.06%2C0%2C0%2C0%2C.356.062h45.753a1.365%2C1.365%2C0%2C0%2C0%2C1.243-1.458%2C1.571%2C1.571%2C0%2C0%2C0-.422-1.092Zm-472.8-72.072H202.078l9.808-9.737Zm424.427%2C60.874h12.257l-9.808%2C9.737Z%22%20transform%3D%22translate(-165.547%20-463.439)%22%2F%3E%3C%2Fsvg%3E');\n background-size: 476px 60px;\n color: #ffffff;\n font-weight: 600;\n span {\n color: #fffb8e;\n display: flex;\n font-size: 1.625em;\n padding: 0 2px 5px;\n }\n }\n .p-cta-btns {\n display: flex;\n justify-content: space-between;\n width: 400px;\n margin: 20px auto 0;\n button {\n width: 180px;\n margin: 0;\n }\n }\n }\n ${BreakPoints.medium} {\n .p-cta-inner {\n h3 {\n font-size: 2em;\n }\n .p-cta-ribbon {\n width: 360px;\n background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22522.004%22%20height%3D%2288.367%22%20viewBox%3D%220%200%20522.004%2088.367%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23009893%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_2240%22%20data-name%3D%22%E3%83%91%E3%82%B9%202240%22%20class%3D%22cls-1%22%20d%3D%22M687.13%2C549.26c-.1-.106-10.287-10.71-14.332-24.91a96.34%2C96.34%2C0%2C0%2C1-3.3-26.006%2C1.383%2C1.383%2C0%2C0%2C0-1.189-1.512H647.051L643.02%2C478.28a1.3%2C1.3%2C0%2C0%2C0-1.205-1.1H216.928l-3.194-12.708a1.366%2C1.366%2C0%2C0%2C0-.838-.981%2C1%2C1%2C0%2C0%2C0-.358-.056H166.787a1.367%2C1.367%2C0%2C0%2C0-1.24%2C1.464%2C1.574%2C1.574%2C0%2C0%2C0%2C.415%2C1.079c.1.1%2C10.287%2C10.709%2C14.332%2C24.908a96.389%2C96.389%2C0%2C0%2C1%2C3.3%2C26.006%2C1.382%2C1.382%2C0%2C0%2C0%2C1.194%2C1.512l.049%2C0h21.212l4.031%2C18.549a1.3%2C1.3%2C0%2C0%2C0%2C1.207%2C1.1H636.166l3.194%2C12.707a1.366%2C1.366%2C0%2C0%2C0%2C.838.98%2C1.06%2C1.06%2C0%2C0%2C0%2C.356.062h45.753a1.365%2C1.365%2C0%2C0%2C0%2C1.243-1.458%2C1.571%2C1.571%2C0%2C0%2C0-.422-1.092Zm-472.8-72.072H202.078l9.808-9.737Zm424.427%2C60.874h12.257l-9.808%2C9.737Z%22%20transform%3D%22translate(-165.547%20-463.439)%22%2F%3E%3C%2Fsvg%3E');\n background-size: cover;\n span {\n display: flex;\n font-size: 1.625em;\n padding: 0 2px 5px;\n }\n }\n .p-cta-btns {\n width: 100vw;\n max-width: 400px;\n button {\n padding: 0;\n margin: 0 5px;\n &.mega {\n padding: 0 40px;\n }\n }\n }\n }\n }\n`\n\n/**\n * サービスサイトCTAエリア\n * @constructor\n */\nconst OfficialCta = () => {\n const routeParam = useRouteParam('https://sign-up.kintaicloud.jp/sign-up')\n const routeParam2 = useRouteParam('/download')\n const routeParam3 = useRouteParam('/contact')\n return (\n \n
\n

今すぐキンクラを利用開始

\n
\n 今なら全機能が無料で使える\n
\n window.open(routeParam)}\n >\n 無料トライアルはこちら\n \n
\n {\n navigate(routeParam2)\n }}\n >\n 資料ダウンロード\n \n {\n navigate(routeParam3)\n }}\n >\n お問い合わせ\n \n
\n
\n
\n )\n}\n\nexport default OfficialCta\n","import styled from '@emotion/styled'\nimport { WindowLocation } from '@reach/router'\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 OfficialCta from './officialCta'\nimport OfficialFooter from './officialFooter'\nimport OfficialHeader from './officialHeader'\n\nconst Wrapper = styled.article`\n font-size: 16px;\n ${BreakPoints.large} {\n font-size: 14px;\n }\n ${BreakPoints.small} {\n }\n`\n\ntype Props = {\n /** window.location */\n location: WindowLocation\n /** パンくずパス */\n paths?: ITopicPath[]\n /** ページ内容 */\n children: ReactNode\n /** クラス名 */\n className?: string\n}\n\n/**\n * サービスサイトメインレイアウト\n * @constructor\n */\nconst OfficialLayout = ({ location, paths, children, className }: Props) => {\n const rootPath = '/'\n const isRootPath = location.pathname === rootPath\n let header\n\n if (isRootPath) {\n header = \n } else {\n header = \n }\n\n return (\n
\n \n \n \n \n {header}\n \n \n {paths && }\n {children}\n \n \n \n \n
\n )\n}\n\nexport default OfficialLayout\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 \n
\n
\n {props.label &&

{props.label}

}\n {props.description &&

{props.description}

}\n {props.children}\n
\n
\n
\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.section`\n width: 100%;\n\n .p-section-inner {\n max-width: 1080px;\n padding: 80px 0;\n margin: 0 auto;\n position: relative;\n\n &:after {\n display: block;\n position: absolute;\n content: '';\n width: 70px;\n height: 70px;\n background: #f8f8f8;\n transform: rotate(45deg);\n bottom: -38px;\n left: 45%;\n }\n\n .p-section-feature {\n width: 100%;\n margin: 0 auto 60px;\n padding: 40px;\n background: #ffffff;\n position: relative;\n border-bottom: solid 4px #3ec7b3;\n\n &:after {\n display: block;\n position: absolute;\n content: '';\n width: 70px;\n height: 70px;\n background: #ffffff;\n border-bottom: solid 4px #3ec7b3;\n border-right: solid 4px #3ec7b3;\n transform: rotate(45deg);\n bottom: -38px;\n left: 45%;\n }\n\n .head-copy {\n margin-bottom: 40px;\n }\n\n ul {\n width: 100%;\n background: #fff6a8;\n padding: 36px;\n border-radius: 10px;\n position: relative;\n z-index: 1;\n\n li {\n display: flex;\n margin: 0 0 20px 0;\n\n .img-wrap {\n img {\n width: 45px;\n height: auto;\n }\n }\n\n .txt-wrap {\n max-width: 980px;\n margin: -5px 0 0 15px;\n white-space: pre-wrap;\n font-weight: 600;\n color: #7a4a2a;\n }\n\n &:last-child {\n margin: 0;\n\n p.txt-wrap {\n margin-bottom: 0;\n }\n }\n }\n }\n\n .img-man-wrap {\n position: absolute;\n width: 165px;\n right: 100px;\n z-index: 2;\n bottom: -30px;\n }\n }\n\n .foot-copy {\n margin-top: 100px;\n position: relative;\n z-index: 2;\n }\n }\n\n ${BreakPoints.xLarge} {\n .p-section-inner {\n &:after {\n }\n\n .p-section-feature {\n &:after {\n }\n\n .head-copy {\n }\n\n ul {\n padding-right: 200px;\n\n li {\n .img-wrap {\n padding: 0;\n }\n\n .txt-wrap {\n }\n }\n }\n\n .img-man-wrap {\n width: 140px;\n }\n }\n\n .foot-copy {\n }\n }\n }\n\n ${BreakPoints.medium} {\n .p-section-inner {\n padding: 80px 0;\n\n &:after {\n }\n\n .p-section-feature {\n &:after {\n }\n\n .head-copy {\n padding-right: 130px;\n text-align: left;\n }\n\n ul {\n padding-right: 36px;\n\n li {\n .img-wrap {\n }\n\n .txt-wrap {\n }\n\n &:last-child {\n .txt-wrap {\n }\n }\n }\n }\n\n .img-man-wrap {\n width: 120px;\n right: 40px;\n bottom: unset;\n top: -10px;\n z-index: 1;\n }\n }\n\n .foot-copy {\n }\n }\n }\n\n ${BreakPoints.medium} {\n .p-section-inner {\n padding: 20px;\n\n .p-section-feature {\n .head-copy {\n }\n }\n\n .foot-copy {\n margin-top: 80px;\n }\n }\n }\n`\n\n/**\n * サービスサイト下層導入効果1\n * @constructor\n */\nconst OfficialLowBenefit01 = () => (\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 Excel・紙での勤怠データの管理が限界に‥‥\n

    \n
  • \n
\n
\n

\n キンクラ(勤怠管理クラウド)が、これらのお悩みを解決します!\n

\n
\n
\n)\n\nexport default OfficialLowBenefit01\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n width: 86px;\n height: 120px;\n background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2286%22%20height%3D%22120%22%20viewBox%3D%220%200%2086%20120%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_2372%22%20data-name%3D%22%E3%83%91%E3%82%B9%202372%22%20d%3D%22M0%2C.357H86v120L42.506%2C93.04%2C0%2C120.357Z%22%20transform%3D%22translate(0%20-0.357)%22%20fill%3D%22%23fc5f6f%22%2F%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-size: 100% auto;\n position: absolute;\n top: -5px;\n left: 10px;\n filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.5));\n text-align: center;\n padding: 12px 0 0;\n font-weight: 600;\n color: #ffffff;\n p {\n font-size: 3.125em;\n line-height: 1em;\n }\n ${BreakPoints.medium} {\n transform-origin: top left;\n transform: scale(0.8);\n }\n ${BreakPoints.smallest} {\n transform: scale(0.5);\n }\n`\n\ntype Props = {\n /** クラス名 */\n className?: string\n /** タイトル */\n label: string\n}\n\n/**\n * 共通ナビボタン風リンクタグ\n * @param props\n * @constructor\n */\nconst CommonPointRibbon = (props: Props): JSX.Element => {\n const { className = '' } = props\n\n return (\n \n POINT\n

{props.label}

\n
\n )\n}\n\nexport default CommonPointRibbon\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport CommonPointRibbon from '../atoms/commonPointRibbon'\n\nconst Wrapper = styled.section`\n width: 100%;\n background-color: #ffffff;\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 padding: 120px 0 1px;\n border-bottom: solid 4px #00dac5;\n .p-section-inner {\n width: 100%;\n margin: 0 auto 40px;\n &.p-feature-img01 {\n background: url(/images/official/feature/bgFeature01.png);\n background-repeat: no-repeat;\n background-size: contain;\n background-position: right top;\n }\n &.p-feature-img02 {\n background: url(/images/official/feature/bgFeature02.png);\n background-repeat: no-repeat;\n background-size: contain;\n background-position: left top;\n }\n &.p-feature-img03 {\n background: url(/images/official/feature/bgFeature03.png);\n background-repeat: no-repeat;\n background-size: contain;\n background-position: right top;\n }\n .p-section-feature {\n width: 100%;\n margin: 0 auto;\n padding: 10px 0 80px;\n position: relative;\n max-width: 1300px;\n &:last-child {\n margin-bottom: 0;\n }\n .point-wrap {\n width: 700px;\n background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22335.234%22%20height%3D%22246.074%22%20viewBox%3D%220%200%20335.234%20246.074%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_2415%22%20data-name%3D%22%E3%83%91%E3%82%B9%202415%22%20d%3D%22M-14306.3%2C650.521l110.393%2C116.884%2C181.818-181.82%22%20transform%3D%22translate(14328.107%20-564.373)%22%20fill%3D%22none%22%20stroke%3D%22%23fffce4%22%20stroke-width%3D%2260%22%2F%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat;\n background-position: 120% 120%;\n background-color: #ffffff;\n border-radius: 10px;\n border: solid 4px #bef1e5;\n padding: 40px 54px;\n margin: 20px 0 0;\n position: relative;\n .label-txt {\n margin: 0 auto 35px;\n text-align: center;\n white-space: pre-line;\n line-height: 1.2em;\n }\n .detail-txt {\n line-height: 1.9em;\n }\n }\n &.point-02 {\n .point-wrap,\n .point-img-wrap {\n margin-left: auto;\n }\n }\n .point-img-wrap {\n width: 700px;\n overflow: hidden;\n border-radius: 10px;\n border: solid 4px #e5e5e5;\n background-color: #ffffff;\n padding: 0;\n margin: 40px 0 0;\n img {\n display: block;\n width: 100%;\n }\n }\n }\n }\n ${BreakPoints.xLarge} {\n padding: 80px 0 20px;\n .p-section-inner {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);\n &.p-feature-img01 {\n background: url(/images/official/feature/bgFeature01.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center bottom;\n }\n &.p-feature-img02 {\n background: url(/images/official/feature/bgFeature02.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center bottom;\n }\n &.p-feature-img03 {\n background: url(/images/official/feature/bgFeature03.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center bottom;\n }\n .p-section-feature {\n padding-bottom: 40px;\n .point-wrap {\n width: calc(100vw - 40px);\n margin: 20px auto 0;\n .label-txt {\n }\n .detail-txt {\n }\n }\n &.point-02 {\n .point-wrap,\n .point-img-wrap {\n }\n }\n .point-img-wrap {\n width: calc(100vw - 40px);\n margin: 40px auto 0;\n }\n }\n }\n }\n ${BreakPoints.large} {\n .p-section-inner {\n .p-section-feature {\n .point-wrap {\n .label-txt {\n padding-left: 40px;\n }\n .detail-txt {\n }\n }\n .point-img-wrap {\n }\n }\n }\n }\n ${BreakPoints.medium} {\n padding-bottom: 1px;\n .p-section-inner {\n .p-section-feature {\n .point-wrap {\n .label-txt {\n }\n .detail-txt {\n br {\n display: none;\n }\n }\n }\n .point-img-wrap {\n }\n }\n }\n }\n ${BreakPoints.smallest} {\n .p-section-inner {\n .p-section-feature {\n .point-wrap {\n padding: 20px;\n .label-txt {\n font-size: 1.175em;\n margin-bottom: 20px;\n }\n .detail-txt {\n line-height: 1.5em;\n }\n }\n .point-img-wrap {\n display: none;\n }\n }\n }\n }\n`\n\n/**\n * サービスサイト下層導入効果2\n * @constructor\n */\nconst OfficialLowBenefit02 = () => (\n \n {/** ポイント1 */}\n
\n
\n
\n \n

\n 自社と常駐先の勤務時間を\n
\n 両軸管理\n

\n

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

\n
\n
\n \n
\n
\n
\n\n {/** ポイント2 */}\n
\n
\n
\n \n

\n 十人十色のシフトも\n
\n ラクラク管理\n

\n

\n 変形労働時間制を採用していて夜勤、日勤、時短など…シフトが全員バラバラだと、労務管理者が従業員全員のシフトスケジュールを用意するには限界がありました。\n
\n キンクラなら、従業員が自分自身のシフトを自由に作成することができ、労務管理者は承認するだけで良いため、シフト管理の業務効率が飛躍的に向上します。\n

\n
\n
\n \n
\n
\n
\n\n {/** ポイント3 */}\n
\n
\n
\n \n

\n 有給取得も残業も一元管理\n

\n

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

\n
\n
\n \n
\n
\n
\n
\n)\n\nexport default OfficialLowBenefit02\n","import styled from '@emotion/styled'\nimport { graphql, PageProps } from 'gatsby'\nimport React from 'react'\nimport SEO from '../components/atoms/seo'\nimport OfficialGalleryBtnSet from '../components/molecules/officialGalleryBtnSet'\nimport OfficialLayout from '../components/organisms/officialLayout'\nimport OfficialLowBenefit01 from '../components/organisms/officialLowBenefit01'\nimport OfficialLowBenefit02 from '../components/organisms/officialLowBenefit02'\nimport OfficialLowHeader from '../components/organisms/officialLowHeader'\n\nconst Wrapper = styled.main``\n\ntype IProps = PageProps\n\n/**\n * 導入効果ページ[サービスサイト導入効果]\n * @constructor\n */\nconst BenefitPage = ({ location }: IProps) => (\n \n \n \n \n \n \n \n \n \n)\n\nexport default BenefitPage\n\nexport const pageQuery = graphql`\n query BenefitPage {\n site {\n siteMetadata {\n title\n }\n }\n }\n`\n"],"names":["Wrapper","routeParam","useRouteParam","className","src","alt","size","onClick","navigate","BreakPoints","routeParam2","routeParam3","level","window","open","header","location","paths","children","pathname","id","Helmet","name","content","props","label","description","title"],"sourceRoot":""}