{"version":3,"file":"5274e5c9fbebeaa6689fee4fd04b24a69620a9bf-4a7a85c3fb865f8508fe.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/officialCommonBtn.tsx","webpack://beaver-help/./src/components/atoms/scrollTop.tsx","webpack://beaver-help/./src/components/atoms/topicPath.tsx","webpack://beaver-help/./src/components/molecules/downloadBtnArea.tsx","webpack://beaver-help/./src/components/organisms/officialFooter.tsx","webpack://beaver-help/./src/components/atoms/loginBtn.tsx","webpack://beaver-help/./src/components/organisms/officialHeader.tsx"],"sourcesContent":["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'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n .page-top {\n position: fixed;\n right: 30px;\n bottom: 70px;\n z-index: 100;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #3ec7b3;\n border: solid 4px #9aece0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n color: transparent;\n &:before {\n content: '';\n width: 12px;\n height: 12px;\n margin-bottom: -6px;\n border-top: solid 3px #fff;\n border-right: solid 3px #fff;\n transform: rotate(-45deg);\n position: absolute;\n }\n &:hover {\n transform: scale(1.1);\n }\n }\n ${BreakPoints.medium} {\n }\n`\n\n/**\n * ページ上部スクロール\n * @constructor\n */\nconst ScrollTop = () => (\n \n \n TOP\n \n \n)\n\nexport default ScrollTop\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React, { ReactNode } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n font-size: 15px;\n padding: 20px 0 30px;\n\n p,\n span {\n max-width: 390px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n line-height: 1em;\n vertical-align: baseline;\n }\n\n a {\n color: #00bfaf;\n }\n\n .arrow {\n padding: 0 5px;\n }\n\n ${BreakPoints.medium} {\n padding: 5px 10px 15px;\n\n p,\n span {\n max-width: 90vw;\n }\n }\n`\n\nexport type ITopicPath = {\n /** タイトル */\n title: string\n /** リンク */\n link?: string\n}\ntype IProps = {\n paths: ITopicPath[]\n}\n\n/**\n * パンくず\n * @constructor\n */\nconst TopicPath = ({ paths }: IProps) => (\n \n {paths.map(({ title, link }, index) => {\n let node: ReactNode\n if (link) node = {title}\n else node = {title}\n return (\n

\n {node}\n {index < paths.length - 1 && >}\n

\n )\n })}\n \n)\n\nexport default TopicPath\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\n\nconst Wrapper = styled.div`\n width: 100%;\n text-align: center;\n margin: 0 auto 50px;\n a {\n img {\n width: 220px;\n height: auto;\n }\n }\n img {\n width: 220px;\n height: auto;\n }\n p {\n font-size: 0.875em;\n color: #78828d;\n max-width: 540px;\n padding: 0 20px;\n margin: 0 auto;\n }\n`\n/**\n * アプリダウンロードボタンエリア\n * @constructor\n */\nconst DownloadBtnArea = () => (\n \n \n \n \n \n \n \n\n {/* \n */}\n

\n ※AppleとAppleのロゴは、米国およびその他の国で登録されたApple\n Inc.の商標です。\n

\n

※Google Play および Google Play ロゴは、Google LLC の商標です。

\n \n)\nexport default DownloadBtnArea\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 DownloadBtnArea from '../molecules/downloadBtnArea'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.footer`\n width: 100%;\n background: #1e3041;\n text-align: center;\n position: relative;\n\n .p-foot-inner {\n max-width: 1366px;\n margin: 0 auto;\n padding: 40px 10px 20px;\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n\n .p-nav-area {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n margin-bottom: 50px;\n\n a {\n color: #ffffff;\n display: block;\n font-weight: 600;\n margin: 0 60px 0 0;\n text-decoration: none;\n position: relative;\n\n &:hover {\n text-decoration: none;\n }\n\n &:last-child {\n margin-right: 0;\n }\n }\n\n &.sub {\n a {\n font-size: 0.875em;\n color: #78828d;\n font-weight: 400;\n margin: 0 40px 0 0;\n }\n }\n }\n\n .p-logo-copy {\n width: 100%;\n margin: 0 0 -5px;\n color: #ffffff;\n font-size: 0.875em;\n text-align: center;\n }\n\n .p-logo-link {\n height: 64px;\n width: 200px;\n display: flex;\n align-items: center;\n margin: 0 auto 20px;\n\n .logo {\n margin: 0 5px 0 0;\n padding: 0;\n width: 200px;\n\n svg {\n .logo-txt {\n fill: #ffffff;\n }\n }\n }\n }\n\n .p-copyright {\n width: 100%;\n font-size: 0.875em;\n color: #78828d;\n }\n }\n\n ${BreakPoints.xLarge} {\n .p-foot-inner {\n .p-nav-area {\n display: block;\n text-align: center;\n\n a {\n display: inline-block;\n margin: 0;\n padding: 0 15px 10px;\n }\n\n &.sub {\n a {\n margin: 0;\n }\n }\n }\n }\n }\n\n ${BreakPoints.medium} {\n }\n`\n\n/**\n * サービスサイトフッター\n * @constructor\n */\nconst OfficialFooter = () => (\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 ©2021 CLINKS Co., Ltd. All Rights Reserved.\n

\n
\n \n)\n\nexport default OfficialFooter\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\n\nconst StyledLink = styled(Link)`\n display: block;\n text-align: center;\n font-size: 12px;\n border-left: solid 2px #efefef;\n border-right: solid 2px #efefef;\n padding: 10px 15px;\n margin: 0 10px;\n font-weight: 600;\n img {\n display: block;\n width: 16px;\n height: 16px;\n margin: 0 auto 3px;\n }\n`\n\n/**\n * ヘッダーログインボタン\n */\nconst LoginBtn = (): JSX.Element => (\n \n \"ログイン\"\n ログイン\n \n)\nexport default LoginBtn\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport { navigate } from 'gatsby-link'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport LoginBtn from '../atoms/loginBtn'\nimport LogoSvg from '../atoms/logoSvg'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.header`\n font-size: 16px;\n width: 100vw;\n background: #ffffff;\n position: fixed;\n top: 0;\n z-index: 100;\n border-bottom: solid 2px #f8f8f8;\n\n &.low {\n background: #f8f8f8;\n }\n\n .p-head-inner {\n max-width: 1366px;\n height: 80px;\n margin: 0 auto;\n padding: 10px 20px 10px 10px;\n display: flex;\n align-items: center;\n\n .logo-wrap {\n margin: 0 auto 0 0;\n\n .p-header-logo {\n height: auto;\n display: flex;\n align-items: center;\n\n .logo {\n margin: 0 5px 0 0;\n padding: 0;\n width: 210px;\n }\n }\n\n h1 {\n font-weight: 400;\n font-size: 12px;\n margin: 5px 0 0;\n color: #153758;\n }\n }\n\n .p-nav-area {\n display: flex;\n align-items: center;\n position: relative;\n padding: 10px 0 0;\n\n .nav-input {\n display: none;\n }\n\n #nav-content {\n display: contents;\n position: relative;\n\n .free-badge {\n width: 32px;\n height: auto;\n position: absolute;\n right: -7px;\n top: 7px;\n }\n }\n\n button {\n padding: 0 15px;\n min-width: 30px;\n }\n\n a.p-link {\n color: #313a38;\n display: flex;\n justify-content: center;\n font-weight: 600;\n padding: 0 25px;\n text-decoration: none;\n position: relative;\n\n &:after {\n display: block;\n z-index: -1;\n position: absolute;\n background-color: #efefef;\n content: '';\n width: calc(100% - 50px);\n height: 4px;\n bottom: -10px;\n border-radius: 3px;\n transition: 0.4s;\n }\n\n &:hover {\n opacity: 1;\n color: #ffffff;\n text-decoration: none;\n\n &:after {\n height: 44px;\n background-color: #3ec7b3;\n width: calc(100% - 10px);\n transition: 0.2s;\n }\n }\n }\n\n button {\n width: 162px;\n\n &.p-btn-download {\n margin-right: 20px;\n }\n }\n }\n }\n\n &.p-page-feature {\n // 特徴\n .p-nav-area {\n a.p-link.p-now-feature {\n &:after {\n background-color: #3ec7b3;\n }\n\n &:hover {\n color: #313a38;\n\n &:after {\n height: 4px;\n width: calc(100% - 50px);\n }\n }\n }\n }\n }\n\n &.p-page-benefit {\n // 導入効果\n .p-nav-area {\n a.p-link.p-now-benefit {\n &:after {\n background-color: #3ec7b3;\n }\n\n &:hover {\n color: #313a38;\n\n &:after {\n height: 4px;\n width: calc(100% - 50px);\n }\n }\n }\n }\n }\n\n &.p-page-function {\n // 機能\n .p-nav-area {\n a.p-link.p-now-function {\n &:after {\n background-color: #3ec7b3;\n }\n\n &:hover {\n color: #313a38;\n\n &:after {\n height: 4px;\n width: calc(100% - 50px);\n }\n }\n }\n }\n }\n\n &.p-page-plan {\n // 料金\n .p-nav-area {\n a.p-link.p-now-plan {\n &:after {\n background-color: #3ec7b3;\n }\n\n &:hover {\n color: #313a38;\n\n &:after {\n height: 4px;\n width: calc(100% - 50px);\n }\n }\n }\n }\n }\n\n ${BreakPoints.xxLarge} {\n .p-head-inner {\n .p-nav-area {\n #nav-content {\n display: contents;\n position: relative;\n\n .free-badge {\n top: 420px;\n right: 20px;\n }\n }\n\n #nav-open {\n display: inline-block;\n width: 34px;\n height: 34px;\n vertical-align: middle;\n cursor: pointer;\n }\n\n #nav-open span,\n #nav-open span:before,\n #nav-open span:after {\n position: absolute;\n height: 3px; /*線の太さ*/\n width: 25px; /*長さ*/\n border-radius: 3px;\n background: #3ec7b3;\n display: block;\n content: '';\n z-index: 10000;\n transition: 0.1s;\n }\n\n #nav-open span:before {\n bottom: -8px;\n transition: 0.3s ease-in-out;\n }\n\n #nav-open span:after {\n bottom: -16px;\n transition: 0.3s ease-in-out;\n }\n\n /*閉じる用の薄黒箇所*/\n\n #nav-close {\n display: none;\n position: fixed;\n z-index: 99;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: black;\n opacity: 0;\n transition: 0.3s ease-in-out;\n }\n\n /*メニューの中身*/\n\n #nav-content {\n display: block;\n overflow: auto;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 9999;\n width: 90%;\n max-width: 330px;\n height: 100%;\n background: #fff;\n transition: 0.3s ease-in-out;\n -webkit-transform: translateX(-105%);\n transform: translateX(-105%);\n\n a,\n button {\n display: none;\n }\n }\n\n #nav-input:checked {\n + #nav-open span {\n width: 0;\n }\n\n + #nav-open span:before {\n width: 25px;\n transform-origin: 50% 50%;\n transform: rotate(45deg) translate(-20%, 325%);\n left: 14px;\n }\n\n + #nav-open span:after {\n width: 25px;\n transform-origin: 50% 50%;\n transform: rotate(-45deg) translate(-20%, 325%);\n top: 0;\n }\n }\n\n /*チェックがついたら表示させる*/\n\n #nav-input:checked ~ #nav-close {\n display: block;\n opacity: 0.5;\n }\n\n #nav-input:checked ~ #nav-content {\n -webkit-transform: translateX(0%);\n transform: translateX(0%);\n box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);\n\n a,\n button {\n display: block;\n height: 50px;\n width: 80%;\n margin: 0 auto;\n\n &.login-btn {\n border: solid 2px #efefef;\n border-radius: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: unset;\n\n img {\n margin: 0 15px 0 0;\n }\n }\n }\n\n a.p-link {\n padding: 10px;\n margin: 20px auto;\n padding: 10px;\n\n &:after {\n background-color: rgba(0, 255, 218, 0.1);\n width: 110%;\n left: -5%;\n height: 50px;\n bottom: 3px;\n }\n\n &:hover {\n color: #313a38;\n\n &:after {\n background-color: rgba(43, 213, 188, 0.3);\n }\n }\n }\n\n button {\n margin: 15px auto;\n }\n }\n }\n }\n\n &.p-page-feature {\n // 特徴\n .p-nav-area {\n a.p-link.p-now-feature {\n color: #ffffff;\n\n &:after {\n background-color: #3ec7b3 !important;\n }\n }\n }\n }\n\n &.p-page-benefit {\n // 導入効果\n .p-nav-area {\n a.p-link.p-now-benefit {\n color: #ffffff;\n\n &:after {\n background-color: #3ec7b3 !important;\n }\n }\n }\n }\n\n &.p-page-function {\n // 機能\n .p-nav-area {\n a.p-link.p-now-function {\n color: #ffffff;\n\n &:after {\n background-color: #3ec7b3 !important;\n }\n }\n }\n }\n\n &.p-page-plan {\n // 料金\n .p-nav-area {\n a.p-link.p-now-plan {\n color: #ffffff;\n\n &:after {\n background-color: #3ec7b3 !important;\n }\n }\n }\n }\n }\n`\ntype Props = {\n /** クラス名 */\n className?: string\n}\n\n/**\n * サービスサイトヘッダー\n * 画面側のファイルでOfficialLayoutへ画面に対応したclass名を指定するとメニューリンクに下線が表示される\n * @constructor\n */\nconst OfficialHeader = (props: Props): JSX.Element => {\n const { className = '' } = props\n const routeParam1 = useRouteParam('/download/')\n const routeParam2 = useRouteParam('https://sign-up.kintaicloud.jp/sign-up')\n return (\n \n
\n
\n \n \n \n

客先常駐特化型のクラウド勤怠管理システム

\n
\n \n
\n \n )\n}\n\nexport default OfficialHeader\n"],"names":["Button","BreakPoints","props","className","size","level","children","Wrapper","href","paths","map","index","node","title","link","Link","to","key","length","target","rel","src","alt","useRouteParam","StyledLink","routeParam1","routeParam2","id","type","htmlFor","onClick","navigate","window","open"],"sourceRoot":""}