{"version":3,"file":"component---src-pages-index-tsx-cdbd16e425eb72e821a7.js","mappings":"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","sources":["webpack://beaver-help/./src/components/molecules/officialFunctionItems.tsx","webpack://beaver-help/./src/components/atoms/animLoading.tsx","webpack://beaver-help/./src/components/atoms/movieBtn.tsx","webpack://beaver-help/./src/components/atoms/movieContent.tsx","webpack://beaver-help/./src/components/molecules/awardBadgeArea.tsx","webpack://beaver-help/./src/components/organisms/officialTopMain.tsx","webpack://beaver-help/./src/components/organisms/officialTopSection01.tsx","webpack://beaver-help/./src/components/organisms/officialTopSection02.tsx","webpack://beaver-help/./src/components/organisms/officialTopSection03.tsx","webpack://beaver-help/./src/pages/index.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React, { ReactNode } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: calc(100% / 3);\n  height: 300px;\n  padding: 25px 40px;\n  margin: 0 0 50px;\n  text-align: center;\n  letter-spacing: -0.03em;\n  border-right: solid 1px #dcdee1;\n  &:nth-of-type(3n),\n  &:last-child {\n    border: none;\n  }\n  .name-txt {\n    margin: 0 auto 40px;\n    font-weight: 600;\n    font-size: 1.625em;\n    color: #ff9600;\n  }\n  &:last-child {\n    margin-bottom: 40px;\n  }\n  img {\n    display: inline-block;\n    width: 130px;\n    height: 80px;\n    margin-bottom: 30px;\n  }\n  .description {\n    width: 100%;\n    white-space: pre-wrap;\n  }\n  ${BreakPoints.large} {\n    padding: 20px;\n  }\n  ${BreakPoints.medium} {\n    width: calc(100vw - 80px);\n    display: block;\n    overflow: hidden;\n    border-right: none;\n    border-bottom: solid 1px #dcdee1;\n    padding: 20px 0;\n    margin: 0;\n    height: auto;\n    &:nth-of-type(3n) {\n      border-bottom: solid 1px #dcdee1;\n    }\n    &:last-child {\n      margin-bottom: 0;\n    }\n    .name-txt {\n      margin-bottom: 20px;\n    }\n    img {\n      float: left;\n      margin-bottom: 0;\n    }\n    .description {\n      padding: 0 20px 0 150px;\n      text-align: left;\n    }\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** タイトル */\n  label: string\n  /** 内容（画像） */\n  children: ReactNode\n  /** 補足テキスト */\n  description: string\n}\n\n/**\n * 機能1つ分コンポーネント\n * @param props\n * @constructor\n */\nconst OfficialFunctionItems = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={`function-items ${className}`}>\n      <div className=\"name-txt\">{props.label}</div>\n      {props.children}\n      <p className=\"description\">{props.description}</p>\n    </Wrapper>\n  )\n}\n\nexport default OfficialFunctionItems\n","import styled from '@emotion/styled'\nimport React from 'react'\n\nconst Wrapper = styled.div`\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  background-color: #f8f8f8;\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  animation: hide-loader 1s forwards; /* forwards */\n  animation-delay: 0.5s;\n  transition: 0.5s;\n\n  .p-anim-loading {\n    width: 100px;\n    height: 100px;\n    margin: 200px auto;\n    background-color: transparent;\n    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2228%22%20viewBox%3D%220%200%2030%2028%22%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip-Logomark%22%3E%20%3Crect%20width%3D%2230%22%20height%3D%2228%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22Logomark%22%20clip-path%3D%22url(%23clip-Logomark)%22%3E%20%3Cpath%20id%3D%22%E5%90%88%E4%BD%93_1%22%20data-name%3D%22%E5%90%88%E4%BD%93%201%22%20d%3D%22M7.657%2C25.663a.59.59%2C0%2C0%2C1-.51-.294L.078%2C13.127a.592.592%2C0%2C0%2C1%2C0-.589L7.147.294A.59.59%2C0%2C0%2C1%2C7.657%2C0H21.794a.584.584%2C0%2C0%2C1%2C.266.064L15.788%2C4.749l-8.32%2C6.214h-.04V.219h0V25.445h0V14.7H27.238a.638.638%2C0%2C0%2C1%2C.1.009.592.592%2C0%2C0%2C1%2C.315.163l.131.131a.59.59%2C0%2C0%2C1%2C.094.711L22.3%2C25.369a.588.588%2C0%2C0%2C1-.51.294Zm8.135-4.729L11.61%2C23.19l4.183-2.255L7.447%2C14.7ZM7.468%2C10.964l8.32-6.215%2C11.465%2C6.214H7.468Zm8.32-6.215L22.06.064a.59.59%2C0%2C0%2C1%2C.212.18.6.6%2C0%2C0%2C1%2C.032.05l.535.928L27.878%2C9.95a.588.588%2C0%2C0%2C1-.094.71l-.131.131a.6.6%2C0%2C0%2C1-.4.172Z%22%20transform%3D%22translate(1%201.168)%22%20fill%3D%22%233ec7b3%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_1%22%20data-name%3D%22%E3%83%91%E3%82%B9%201%22%20d%3D%22M671.044%2C219.771V194.545l8.36%2C4.53%2C6.272-4.685a.592.592%2C0%2C0%2C0-.266-.064H671.273a.59.59%2C0%2C0%2C0-.51.294l-7.068%2C12.243a.589.589%2C0%2C0%2C0%2C0%2C.589l7.068%2C12.243a.59.59%2C0%2C0%2C0%2C.51.294H685.41a.585.585%2C0%2C0%2C0%2C.252-.057l-6.253-4.671Z%22%20transform%3D%22translate(-662.616%20-193.158)%22%20fill%3D%22%233ec7b3%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_2%22%20data-name%3D%22%E3%83%91%E3%82%B9%202%22%20d%3D%22M687.045%2C199.3l-8.359-4.53v10.744h.04Z%22%20transform%3D%22translate(-670.257%20-193.383)%22%20fill%3D%22%237ad8cb%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_3%22%20data-name%3D%22%E3%83%91%E3%82%B9%203%22%20d%3D%22M678.685%2C224.148v10.744l8.365-4.51-8.347-6.235Z%22%20transform%3D%22translate(-670.257%20-208.279)%22%20fill%3D%22%237ad8cb%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_4%22%20data-name%3D%22%E3%83%91%E3%82%B9%204%22%20d%3D%22M702.165%2C234.826l5.574-9.655a.589.589%2C0%2C0%2C0-.094-.711l-.131-.131a.589.589%2C0%2C0%2C0-.314-.163l-11.547%2C6.225%2C6.253%2C4.671A.587.587%2C0%2C0%2C0%2C702.165%2C234.826Z%22%20transform%3D%22translate(-678.861%20-208.289)%22%20fill%3D%22%236cd4c5%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_5%22%20data-name%3D%22%E3%83%91%E3%82%B9%205%22%20d%3D%22M678.722%2C224.148l8.346%2C6.235%2C11.547-6.225a.586.586%2C0%2C0%2C0-.1-.009Z%22%20transform%3D%22translate(-670.276%20-208.279)%22%20fill%3D%22%239ae1d7%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_6%22%20data-name%3D%22%E3%83%91%E3%82%B9%206%22%20d%3D%22M707.734%2C204.34l-5.039-8.727-.535-.928c-.01-.017-.021-.034-.033-.05a.589.589%2C0%2C0%2C0-.211-.18l-6.272%2C4.685%2C11.465%2C6.214a.59.59%2C0%2C0%2C0%2C.4-.172l.131-.131A.589.589%2C0%2C0%2C0%2C707.734%2C204.34Z%22%20transform%3D%22translate(-678.856%20-193.223)%22%20fill%3D%22%236cd4c5%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_9%22%20data-name%3D%22%E3%83%91%E3%82%B9%209%22%20d%3D%22M698.536%2C210.175h.016l-11.465-6.214-8.319%2C6.215Z%22%20transform%3D%22translate(-670.299%20-198.043)%22%20fill%3D%22%239ae1d7%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_7%22%20data-name%3D%22%E3%83%91%E3%82%B9%207%22%20d%3D%22M718.888%2C216.566h0Z%22%20transform%3D%22translate(-690.634%20-204.434)%22%20fill%3D%22%237ad8cb%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_8%22%20data-name%3D%22%E3%83%91%E3%82%B9%208%22%20d%3D%22M718.888%2C216.566h0Z%22%20transform%3D%22translate(-690.634%20-204.434)%22%20fill%3D%22%23fff%22%20opacity%3D%220.24%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');\n    border-radius: 100%;\n    background-size: 100px 100px;\n    animation: whirly-loader 1.5s infinite ease-in-out;\n  }\n\n  @-moz-keyframes whirly-loader {\n    0% {\n      -moz-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    30% {\n      -moz-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -moz-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n  @-webkit-keyframes whirly-loader {\n    0% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    30% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes whirly-loader {\n    0% {\n      -moz-transform: rotate(0deg);\n      -ms-transform: rotate(0deg);\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    30% {\n      -moz-transform: rotate(0deg);\n      -ms-transform: rotate(0deg);\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -moz-transform: rotate(360deg);\n      -ms-transform: rotate(360deg);\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes hide-loader {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n      z-index: -1000;\n    }\n  }\n`\n\n/**\n * 画面ローディングアニメーション\n * @constructor\n */\n\nconst AnimLoading = (): JSX.Element => (\n  <Wrapper className=\"p-wrapper-loading\">\n    <div className=\"p-anim-loading\" />\n  </Wrapper>\n)\n\nexport default AnimLoading\n","import styled from '@emotion/styled'\nimport React from 'react'\n\nconst Wrapper = styled.div`\n  position: fixed;\n  bottom: 0;\n  right: 30px;\n  z-index: 1;\n  a {\n    background: #f785a8;\n    display: flex;\n    width: 290px;\n    height: 60px;\n    justify-content: center;\n    align-items: center;\n    text-decoration: none !important;\n    font-weight: 600;\n    color: #ffffff;\n    border-radius: 20px 20px 0 0;\n    border: solid 4px #ffc7df;\n    border-bottom: none;\n    font-size: 1.2em;\n    img {\n      width: 28px;\n      height: 21px;\n      margin: 0 6px 1px 0;\n    }\n    &:hover {\n      transform: scale(1.05);\n    }\n  }\n`\ntype Props = {\n  /** クラス名 */\n  className?: string\n}\n\n/**\n * 動画フル版表示用ボタン\n */\nconst MovieBtn = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <Wrapper className={className}>\n      <a href=\"#movie-full\">\n        <img\n          src=\"/images/official/top/iconMovie01.png\"\n          alt=\"キンクラの紹介動画を見る\"\n        />\n        キンクラの紹介動画を見る\n      </a>\n    </Wrapper>\n  )\n}\nexport default MovieBtn\n","import styled from '@emotion/styled'\nimport React, { useRef } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  &.modal-wrapper {\n    .modal-window {\n      width: 90vw;\n      max-width: 880px;\n      .modal-content {\n        position: relative;\n        width: 100%;\n        padding-top: 56.25%;\n        iframe {\n          position: absolute;\n          top: 0;\n          right: 0;\n          width: 100%;\n          height: 100%;\n        }\n      }\n    }\n  }\n  ${BreakPoints.medium} {\n    &.modal-wrapper {\n      .modal-window {\n        .modal-content {\n        }\n      }\n    }\n  }\n`\ntype Props = {\n  /** クラス名 */\n  className?: string\n}\n\n/**\n * 動画フル版表示用コンテンツ\n */\nconst MovieContent = (props: Props): JSX.Element => {\n  const { className = '' } = props\n  const youtubeRef = useRef<HTMLIFrameElement>(null)\n  const onStop = () => {\n    youtubeRef.current?.contentWindow?.postMessage(\n      '{\"event\":\"command\",\"func\":\"pauseVideo\",\"args\":\"\"}',\n      '*'\n    )\n  }\n\n  return (\n    <Wrapper className={`modal-wrapper${className}`} id=\"movie-full\">\n      <div className=\"modal-overlay\" />\n      <div className=\"modal-window\">\n        <div className=\"modal-content\">\n          <iframe\n            ref={youtubeRef}\n            width=\"828\"\n            height=\"466\"\n            src=\"https://www.youtube.com/embed/LYobNX9P-BU?enablejsapi=1\"\n            title=\"YouTube video player\"\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n          />\n        </div>\n        <a href=\"#!\" className=\"modal-close\" onClick={onStop}>\n          ×\n        </a>\n      </div>\n    </Wrapper>\n  )\n}\nexport default MovieContent\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n  position: absolute;\n  width: 120px;\n  top: -60px;\n  right: -50px;\n\n  .img-wrap {\n    width: 100%;\n  }\n\n  .img-wrap2 {\n    width: 140%;\n  }\n\n  @media screen and (max-width: 1420px) {\n    right: 0;\n  }\n\n  ${BreakPoints.xxLarge} {\n    width: 90px;\n    top: -20px;\n    right: -40px;\n  }\n\n  ${BreakPoints.xLarge} {\n    width: 80px;\n    top: -10px;\n    right: -50px;\n  }\n\n  ${BreakPoints.large} {\n    top: -15px;\n  }\n\n  ${BreakPoints.medium} {\n    width: 80px;\n    top: -10px;\n    right: -40px;\n  }\n`\ntype Props = {\n  /** クラス名 */\n  className?: string\n}\n\n/**\n * アワードバッジ／アワードリボン\n * @constructor\n */\nconst AwardBadgeArea = (props: Props) => {\n  const { className = '' } = props\n  return (\n    <Wrapper className={className}>\n      <img\n        src=\"/images/logo_jiima_circle.png\"\n        className=\"img-wrap2\"\n        alt=\"JIIMA認証\"\n        style={{ position: 'relative', left: '-20%' }}\n      />\n      <img\n        src=\"/images/official/award/smartus2023spring.png\"\n        className=\"img-wrap\"\n        alt=\"スマータスアワード2023\"\n      />\n    </Wrapper>\n  )\n}\n\nexport default AwardBadgeArea\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport UpdateInfoBnrV3 from '../atoms/updateInfoBnrV3'\nimport UpdateInfoContentV3 from '../atoms/updateInfoContentV3'\nimport AwardBadgeArea from '../molecules/awardBadgeArea'\nimport UpdateInfoBnrV4 from '../atoms/updateInfoBnrV4'\nimport UpdateInfoContentV4 from '../atoms/updateInfoContentV4'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  position: relative;\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  border-bottom: solid 4px #313a38;\n  z-index: 1;\n\n  &:before,\n  &:after {\n    display: block;\n    content: '';\n    position: absolute;\n    width: 20%;\n    border-bottom: solid 4px #bbc0c6;\n    bottom: -16px;\n  }\n\n  &:after {\n    right: 0;\n  }\n\n  .p-main-inner {\n    display: flex;\n    max-width: 1500px;\n    padding: 80px 0;\n    margin: 0 auto;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n\n    .p-inner-txt {\n      padding: 0 10px;\n\n      h2 {\n        font-weight: 800;\n        font-size: 3.75em;\n        line-height: 1.2em;\n        text-align: center;\n        margin: 0 auto 40px;\n\n        span {\n          color: #0b6f7a;\n        }\n      }\n\n      h3 {\n        margin: 0 auto 60px;\n        font-size: 1.625em;\n        font-weight: bold;\n      }\n\n      button {\n        display: flex;\n        margin: 0 auto 20px;\n      }\n\n      .p-inner-ribbon {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 5px 0 0 0;\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%233EC7B3%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        width: 522px;\n        height: 88px;\n        color: #ffffff;\n        font-weight: 600;\n        font-size: 2.125em;\n        filter: drop-shadow(0 2px 2px rgb(0 0 0 / 30%));\n      }\n    }\n\n    .p-inner-movie {\n      position: relative;\n      box-shadow: 0 2px 5px rgb(0 0 0 / 20%);\n      background: #ffffff;\n      padding: 10px;\n      border-radius: 3px;\n      width: 52%;\n      min-width: 320px;\n      height: fit-content;\n      margin: 0 auto;\n    }\n\n    .bnr-update {\n      position: absolute;\n      bottom: -105px;\n      z-index: 1;\n      width: 97vw;\n      max-width: 1500px;\n      display: flex;\n      justify-content: center;\n    }\n  }\n\n  .div-modal {\n    &.modal-wrapper {\n      .modal-window {\n        padding-top: 0;\n\n        .modal-content {\n          display: flex;\n          position: relative;\n\n          img {\n            width: 100%;\n            height: 100%;\n            margin: 54px 0 0;\n            border: solid 2px #cccccc;\n          }\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.xxLarge} {\n    ${BreakPoints.xxLarge} {\n      overflow: visible;\n\n      .p-main-inner {\n        justify-content: center;\n        padding-top: 120px;\n\n        .p-inner-txt {\n          display: contents;\n\n          h2 {\n            position: absolute;\n            top: 10px;\n            font-size: 2.75em;\n\n            br {\n              display: none;\n            }\n          }\n\n          h3 {\n            position: absolute;\n            top: 70px;\n            font-size: 1.425em;\n          }\n\n          button {\n            position: absolute;\n            bottom: 10px;\n          }\n\n          .p-inner-ribbon {\n            position: absolute;\n            bottom: -70px;\n            z-index: 1;\n          }\n        }\n\n        .bnr-update {\n          right: unset;\n          bottom: -300px;\n        }\n      }\n\n      .award-position {\n        //position: unset;\n        //left: unset;\n        z-index: 1;\n      }\n    }\n  }\n\n  ${BreakPoints.xLarge} {\n    .p-main-inner {\n      .bnr-update {\n        bottom: -220px;\n      }\n    }\n  }\n\n  ${BreakPoints.large} {\n    .p-main-inner {\n      padding-top: 110px;\n\n      .p-inner-txt {\n        h2 {\n          top: 15px;\n          font-size: 2.45em;\n        }\n\n        h3 {\n          font-size: 1.25em;\n        }\n\n        button {\n          bottom: 5px;\n        }\n\n        .p-inner-ribbon {\n          transform-origin: top center;\n          transform: scale(0.7);\n          bottom: -80px;\n        }\n      }\n\n      .bnr-update {\n        bottom: -180px;\n      }\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .p-main-inner {\n      padding-top: 170px;\n\n      .p-inner-txt {\n        h2 {\n          br {\n            display: block;\n          }\n        }\n\n        h3 {\n          top: 122px;\n        }\n      }\n\n      .bnr-update {\n        margin: 0 auto;\n        right: unset;\n        top: 125%;\n        flex-direction: column;\n        justify-content: center;\n        gap: 10px;\n        align-items: center;\n      }\n    }\n  }\n\n  ${BreakPoints.small} {\n    .p-main-inner {\n      .p-inner-txt {\n        h3 {\n          top: 112px;\n          white-space: pre-wrap;\n          text-align: center;\n          font-size: 1em;\n        }\n      }\n    }\n  }\n`\n\n/**\n * サービスサイトTOPメインエリア\n * @constructor\n */\nconst OfficialTopMain = () => {\n  const routeParam1 = useRouteParam('https://sign-up.kintaicloud.jp/sign-up')\n  return (\n    <>\n      <Wrapper>\n        <div className=\"p-main-inner\">\n          <div className=\"p-inner-txt\">\n            <h2>\n              多彩な勤務形態に\n              <br />\n              <span>ピタッ</span>とハマる\n            </h2>\n            <h3>{'誰でも簡単に使える\\nクラウド勤怠管理システム'}</h3>\n            <OfficialCommonBtn\n              size=\"mega\"\n              level=\"strong\"\n              className=\"award-position\"\n              onClick={() => window.open(routeParam1)}\n            >\n              無料トライアルはこちら\n            </OfficialCommonBtn>\n            <div className=\"p-inner-ribbon\">翌月末まで無料</div>\n          </div>\n          <div className=\"p-inner-movie\">\n            <video loop autoPlay muted playsInline width=\"100%\" height=\"100%\">\n              <source id=\"video\" src=\"/movies/movieShort.mp4#t=[27]\" />\n            </video>\n            <AwardBadgeArea />\n          </div>\n          <div className=\"bnr-update\">\n            <UpdateInfoBnrV4 idName=\"#modal-bnr03\" />\n            <UpdateInfoBnrV3 idName=\"#modal-bnr02\" />\n            {/* <UpdateInfoBnr idName=\"#modal-bnr01\" /> */}\n          </div>\n        </div>\n      </Wrapper>\n      <UpdateInfoContentV4 idName=\"modal-bnr03\" />\n      <UpdateInfoContentV3 idName=\"modal-bnr02\" />\n      {/* <UpdateInfoContent idName=\"modal-bnr01\" /> */}\n    </>\n  )\n}\n\nexport default OfficialTopMain\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 OfficialCommonH3Set from '../molecules/officialCommonH3Set'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  background: #ffffff;\n  position: relative;\n\n  .p-section-inner {\n    display: flex;\n    max-width: 1200px;\n    padding: 150px 0 80px 0;\n    margin: 0 auto;\n    flex-wrap: wrap;\n    justify-content: space-between;\n\n    .p-section-feature {\n      width: 100%;\n      display: flex;\n      margin: 0 auto 60px;\n      justify-content: space-around;\n\n      .p-feature-01,\n      .p-feature-02,\n      .p-feature-03 {\n        width: calc(100% / 3.3);\n        position: relative;\n        text-align: center;\n\n        h4 {\n          width: 100%;\n          max-width: 240px;\n          color: #ff9602;\n          background-image: url(/images/official/top/bgFeature01.png);\n          background-repeat: no-repeat;\n          background-size: 100% auto;\n          background-position: bottom right;\n          margin: 0 auto 20px;\n        }\n\n        .img-wrap {\n          width: 100%;\n          max-width: 280px;\n          height: auto;\n          margin-bottom: 20px;\n        }\n\n        p {\n        }\n      }\n    }\n\n    button {\n      display: flex;\n      margin: 0 auto;\n    }\n  }\n\n  .award-wrap {\n    padding: 100px 0 0;\n    margin-bottom: -80px;\n  }\n\n  ${BreakPoints.xxLarge} {\n    .p-section-inner {\n      padding: 360px 0 80px 0;\n    }\n\n    .award-wrap {\n      padding: 340px 0 0;\n      margin-bottom: -320px;\n    }\n  }\n\n  ${BreakPoints.xLarge} {\n    .p-section-inner {\n      padding: 240px 0 80px 0;\n\n      .p-section-feature {\n        .p-feature-01,\n        .p-feature-02,\n        .p-feature-03 {\n          .img-wrap {\n          }\n\n          > p {\n            top: 12%;\n            font-size: 1.25em;\n          }\n        }\n      }\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .p-section-inner {\n      padding: 270px 0 60px;\n\n      .p-section-feature {\n        display: block;\n\n        .p-feature-01,\n        .p-feature-02,\n        .p-feature-03 {\n          align-items: center;\n          width: 90%;\n          margin: 0 auto;\n\n          .img-wrap {\n            width: 30%;\n          }\n\n          > p {\n            top: unset;\n            position: relative;\n            width: 100%;\n            text-align: center;\n            padding: 0 0 30px 0;\n\n            br {\n              display: none;\n            }\n          }\n\n          &:last-child {\n            > p {\n              padding: 0;\n            }\n          }\n        }\n      }\n    }\n\n    .award-wrap {\n      padding: 220px 0 0;\n      margin-bottom: -180px;\n    }\n  }\n`\n\n/**\n * サービスサイトTOPセクション01\n * @constructor\n */\nconst OfficialTopSection01 = () => {\n  const routeParam = useRouteParam('/feature')\n  return (\n    <Wrapper>\n      {/** 今後受賞が増えたらここを使う\n             <AwardBnrArea className=\"award-wrap\" />\n             */}\n      <div className=\"p-section-inner anim-fade-up\">\n        <OfficialCommonH3Set label=\"特徴\" />\n        <div className=\"p-section-feature\">\n          <div className=\"p-feature-01\">\n            <h4 className=\"txt-size-26 txt-bold\">\n              すぐに導入、\n              <br />\n              利用開始できる！\n            </h4>\n            <img\n              src=\"/images/official/feature/imgTopFeature01.png\"\n              className=\"img-wrap\"\n              alt=\"すぐに導入、利用開始できる！\"\n            />\n            <p className=\"txt-size-22 txt-bold\">\n              初期費用ゼロ\n              <br />\n              専用機器も不要\n            </p>\n          </div>\n          <div className=\"p-feature-02\">\n            <h4 className=\"txt-size-26 txt-bold\">\n              各種情報\n              <br />\n              リアルタイム把握\n            </h4>\n            <img\n              src=\"/images/official/feature/imgTopFeature02.png\"\n              className=\"img-wrap\"\n              alt=\"各種情報リアルタイム把握\"\n            />\n            <p className=\"txt-size-22 txt-bold\">\n              勤務状況の把握や\n              <br />\n              ステータス確認\n            </p>\n          </div>\n          <div className=\"p-feature-03\">\n            <h4 className=\"txt-size-26 txt-bold\">\n              細かい\n              <br />\n              承認フロー設定\n            </h4>\n            <img\n              src=\"/images/official/feature/imgTopFeature03.png\"\n              className=\"img-wrap\"\n              alt=\"細かい承認フロー設定\"\n            />\n            <p className=\"txt-size-22 txt-bold\">\n              最大５段階を\n              <br />\n              個人レベルで設定可能\n            </p>\n          </div>\n        </div>\n        <OfficialCommonBtn\n          size=\"mega\"\n          onClick={() => {\n            navigate(routeParam)\n          }}\n        >\n          特徴をもっと見る\n        </OfficialCommonBtn>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default OfficialTopSection01\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  position: relative;\n  background: rgba(249, 255, 244, 0.6);\n  border-right: solid 100px #ffffff;\n  border-left: solid 100px #ffffff;\n  .p-section-inner {\n    display: flex;\n    max-width: 1200px;\n    padding: 80px 0;\n    margin: 0 auto;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    .p-section-feature {\n      width: 100%;\n      display: flex;\n      margin: 0 auto 60px;\n      .p-feature-01,\n      .p-feature-02,\n      .p-feature-03 {\n        width: 100%;\n        position: relative;\n        display: flex;\n        justify-content: center;\n        .img-wrap {\n          width: 100%;\n          max-width: 330px !important;\n          height: 100%;\n        }\n        > p {\n          position: absolute;\n          height: 75px;\n          display: flex;\n          align-items: center;\n          top: 45px;\n          font-weight: 600;\n          font-size: 1.625em;\n          line-height: 1.2em;\n          text-align: center;\n          color: #00ac93;\n        }\n      }\n    }\n    button {\n      display: flex;\n      margin: 0 auto;\n    }\n  }\n  ${BreakPoints.xLarge} {\n    border: none;\n    .p-section-inner {\n      .p-section-feature {\n        .p-feature-01,\n        .p-feature-02,\n        .p-feature-03 {\n          .img-wrap {\n          }\n          > p {\n            top: 12%;\n            font-size: 1.25em;\n          }\n        }\n      }\n    }\n  }\n  ${BreakPoints.medium} {\n    .p-section-inner {\n      padding: 80px 0 60px;\n      .p-section-feature {\n        display: block;\n        .p-feature-01,\n        .p-feature-02,\n        .p-feature-03 {\n          align-items: center;\n          width: 90%;\n          margin: 0 auto;\n          .img-wrap {\n            width: 30%;\n          }\n          > p {\n            top: unset;\n            position: relative;\n            width: 70%;\n            text-align: left;\n            padding: 0 0 0 20px;\n            br {\n              display: none;\n            }\n          }\n        }\n      }\n    }\n  }\n`\n\n/**\n * サービスサイトTOPセクション02\n * 導入効果\n * @constructor\n */\nconst OfficialTopSection02 = () => {\n  const routeParam = useRouteParam('/benefit')\n  return (\n    <Wrapper>\n      <div className=\"p-section-inner\">\n        <div className=\"p-section-feature\">\n          <div className=\"p-feature-01 anim-fade-up\">\n            <img\n              className=\"img-wrap\"\n              src=\"/images/official/top/imgFeature01.png\"\n              alt=\"キンクラの強み1\"\n            />\n            <p>\n              SESに最適化された\n              <br />\n              勤怠システム\n            </p>\n          </div>\n          <div className=\"p-feature-02 anim-fade-up\">\n            <img\n              className=\"img-wrap\"\n              src=\"/images/official/top/imgFeature02.png\"\n              alt=\"キンクラの強み2\"\n            />\n            <p>\n              自由度が高く\n              <br />\n              簡単なシフト作成\n            </p>\n          </div>\n          <div className=\"p-feature-03 anim-fade-up\">\n            <img\n              className=\"img-wrap\"\n              src=\"/images/official/top/imgFeature03.png\"\n              alt=\"キンクラの強み3\"\n            />\n            <p>\n              細かく行き届いた\n              <br />\n              管理アラートの通知\n            </p>\n          </div>\n        </div>\n        <OfficialCommonBtn\n          size=\"mega\"\n          onClick={() => {\n            navigate(routeParam)\n          }}\n        >\n          導入効果をもっと見る\n        </OfficialCommonBtn>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default OfficialTopSection02\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 OfficialCommonH3Set from '../molecules/officialCommonH3Set'\nimport OfficialFunctionItems from '../molecules/officialFunctionItems'\nimport OfficialNewFunctionItem from './officialNewFunctionItem'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.section`\n  width: 100%;\n  background: rgba(233, 245, 241, 0.6);\n  position: relative;\n\n  .p-section-section-label {\n    padding: 80px 0 0;\n  }\n\n  .p-section-inner {\n    max-width: 1080px;\n    padding: 20px 0 80px;\n    margin: 0 auto;\n\n    .p-section-function {\n      padding: 30px 10px 0;\n      background: #ffffff;\n      border-radius: 10px;\n      width: 100%;\n      margin: 0 auto 60px;\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n\n    button {\n      display: flex;\n      margin: 0 auto;\n    }\n  }\n\n  ${BreakPoints.large} {\n    .p-section-inner {\n      .p-section-function {\n      }\n    }\n  }\n\n  ${BreakPoints.medium} {\n    .p-section-inner {\n      padding: 60px 0;\n\n      .p-section-function {\n        padding: 10px 10px 0;\n      }\n    }\n  }\n`\n\n/**\n * サービスサイトTOPセクション03\n * 機能\n * @constructor\n */\nconst OfficialTopSection03 = () => {\n  const routeParam = useRouteParam('/function')\n  return (\n    <Wrapper>\n      <OfficialCommonH3Set\n        label=\"機能一覧\"\n        className=\"anim-fade-up p-section-section-label\"\n      />\n      <OfficialNewFunctionItem />\n      <div className=\"p-section-inner\">\n        <div className=\"p-section-function anim-fade-up\">\n          <OfficialFunctionItems\n            label=\"打刻\"\n            description=\"PC・タブレット・スマホから簡単に打刻ができます\"\n          >\n            <img\n              src=\"/images/official/top/imgFunction01.png\"\n              alt=\"キンクラの打刻\"\n            />\n          </OfficialFunctionItems>\n          <OfficialFunctionItems\n            label=\"勤怠管理\"\n            description=\"勤怠申請の提出から承認も集計も一元管理\"\n          >\n            <img\n              src=\"/images/official/top/imgFunction02.png\"\n              alt=\"キンクラの勤怠管理\"\n            />\n          </OfficialFunctionItems>\n          <OfficialFunctionItems\n            label=\"シフト管理\"\n            description=\"作成から提出まで数クリックで完結する簡単設計\"\n          >\n            <img\n              src=\"/images/official/top/imgFunction03.png\"\n              alt=\"キンクラのシフト管理\"\n            />\n          </OfficialFunctionItems>\n          <OfficialFunctionItems\n            label=\"給与ソフト連携\"\n            description=\"給与ソフトに合わせてエクスポートデータを生成\"\n          >\n            <img\n              src=\"/images/official/top/imgFunction04.png\"\n              alt=\"キンクラの給与ソフト連携\"\n            />\n          </OfficialFunctionItems>\n          <OfficialFunctionItems\n            label=\"アラート機能\"\n            description={'出退勤や残業集計などなど\\nアラートを通知します'}\n          >\n            <img\n              src=\"/images/official/top/imgFunction05.png\"\n              alt=\"キンクラのアラート機能\"\n            />\n          </OfficialFunctionItems>\n          <OfficialFunctionItems\n            label=\"経費精算\"\n            description=\"電子帳簿保存法対応！キンクラで簡単清算\"\n          >\n            <img\n              src=\"/images/official/top/imgFunction06.png\"\n              alt=\"キンクラの経費精算\"\n            />\n          </OfficialFunctionItems>\n          <OfficialFunctionItems\n            label=\"36協定\"\n            description=\"各企業で定めている労働時間を設定できます\"\n          >\n            <img\n              src=\"/images/official/top/imgFunction07.png\"\n              alt=\"キンクラの36協定\"\n            />\n          </OfficialFunctionItems>\n          <OfficialFunctionItems\n            label=\"CSV出力\"\n            description=\"勤務表や各種申請などのデータ出力が可能です\"\n          >\n            <img\n              src=\"/images/official/top/imgFunction08.png\"\n              alt=\"キンクラのCSV出力\"\n            />\n          </OfficialFunctionItems>\n        </div>\n        <OfficialCommonBtn\n          size=\"mega\"\n          onClick={() => {\n            navigate(routeParam)\n          }}\n        >\n          機能一覧をもっと見る\n        </OfficialCommonBtn>\n      </div>\n    </Wrapper>\n  )\n}\n\nexport default OfficialTopSection03\n","import styled from '@emotion/styled'\nimport { graphql, PageProps } from 'gatsby'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\nimport AnimLoading from '../components/atoms/animLoading'\nimport MovieBtn from '../components/atoms/movieBtn'\nimport MovieContent from '../components/atoms/movieContent'\nimport SEO from '../components/atoms/seo'\nimport OfficialGalleryBtnSet from '../components/molecules/officialGalleryBtnSet'\nimport OfficialLayout from '../components/organisms/officialLayout'\nimport OfficialTopMain from '../components/organisms/officialTopMain'\nimport OfficialTopSection01 from '../components/organisms/officialTopSection01'\nimport OfficialTopSection02 from '../components/organisms/officialTopSection02'\nimport OfficialTopSection03 from '../components/organisms/officialTopSection03'\n\nconst Wrapper = styled.main`\n  position: relative;\n  .bg {\n    display: block;\n    width: 100vw;\n    height: auto;\n    position: fixed;\n    top: 60px;\n  }\n`\n\ntype IProps = PageProps<GatsbyTypes.IndexPageQuery>\n/**\n * Indexページ【サービスサイトTOP】\n * @constructor\n */\nconst IndexPage = ({ location }: IProps) => (\n  <>\n    <OfficialLayout location={location}>\n      <SEO />\n      <Helmet>\n        <title>キンクラ - 客先常駐特化型のクラウド勤怠管理システム</title>\n        <script>\n          {`\n        document.querySelector('video').playbackRate = 0.80;\n        document.querySelector('video').currentTime = 29\n        `}\n        </script>\n      </Helmet>\n      <Wrapper>\n        <img\n          src=\"/images/official/common/bgPublic01.png\"\n          alt=\"キンクラ\"\n          className=\"bg\"\n        />\n        <OfficialTopMain />\n        <OfficialTopSection01 />\n        <OfficialTopSection02 />\n        <OfficialGalleryBtnSet />\n        <OfficialTopSection03 />\n      </Wrapper>\n      <AnimLoading />\n    </OfficialLayout>\n    <MovieBtn />\n    <MovieContent />\n  </>\n)\n\nexport default IndexPage\n\nexport const pageQuery = graphql`\n  query IndexPage {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["Wrapper","BreakPoints","props","className","label","children","description","href","src","alt","youtubeRef","useRef","id","ref","width","height","title","frameBorder","allow","allowFullScreen","onClick","current","contentWindow","postMessage","style","position","left","routeParam1","useRouteParam","size","level","window","open","loop","autoPlay","muted","playsInline","idName","routeParam","navigate","location","Helmet"],"sourceRoot":""}