{"version":3,"file":"js/components/service_site/index-71b853f61e59322a3c9a.js","mappings":";;;;;;;;;;;;;;;AA8pBA;AAcA;AACA;;;;;;AACA;;;;;;;;;;;;;;;;;;AA0BA;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AA8BA;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA;;;;;;;;;;;;;;;;;AAmBA;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA","sources":["webpack://azukaruko/./app/frontend/packs/components/service_site/parent/index.tsx"],"sourcesContent":["/** @jsx jsx */\nimport * as React from 'react'\nimport { jsx } from '@emotion/core'\nimport styled from '@emotion/styled'\nimport { imagePath } from '../../../utils/ImagePath'\nimport { InViewFadeIn } from './InViewFadeIn'\nimport { easing } from './easing'\nimport { useInView } from 'react-intersection-observer'\n\nexport const Index: React.FC = () => {\n  const { ref: logoRef, inView: logoInView } = useInView({\n    threshold: 0,\n    initialInView: true,\n    rootMargin: '50px 0px',\n  })\n\n  return (\n    <React.Fragment>\n      <script src=\"https://webfont.fontplus.jp/accessor/script/fontplus.js?wr~4NdEndlE%3D&amp;box=1-xqeEWAYxY%3D&amp;timeout=30&amp;pm=1&amp;aa=1&amp;ab=1\"></script>\n\n      <svg className=\"svg-defs\">\n        <symbol viewBox=\"0 0 34 34\" id=\"icon--arrow-in-circle\">\n          <path\n            className=\"cls-1\"\n            d=\"M17,0A17,17,0,0,0,0,17c0,.31,0,.61.05.91h21.6L16.48,14a1,1,0,1,1,1.2-1.57l7.51,5.69a1,1,0,0,1-.6,1.78H.26A17,17,0,1,0,17,0Z\"\n          />\n        </symbol>\n        <symbol viewBox=\"0 0 30 30\" id=\"icon--line\">\n          <path\n            className=\"cls-1\"\n            d=\"M14.94,2C6.9,2,.37,7.3.37,13.82c0,5.84,5.18,10.73,12.18,11.65.48.1,1.12.32,1.29.72a3.09,3.09,0,0,1,0,1.32s-.16,1-.2,1.25-.3,1.44,1.26.78,8.38-4.94,11.44-8.45a10.54,10.54,0,0,0,3.12-7.27C29.5,7.3,23,2,14.94,2ZM9.8,17.3a.28.28,0,0,1-.28.28H5.44a.33.33,0,0,1-.19-.08h0a.26.26,0,0,1-.08-.19V11a.27.27,0,0,1,.28-.28h1a.28.28,0,0,1,.28.28v5H9.51a.29.29,0,0,1,.29.29Zm2.46,0a.29.29,0,0,1-.28.28H11a.28.28,0,0,1-.28-.28V10.94a.28.28,0,0,1,.28-.28h1a.29.29,0,0,1,.28.28Zm7.06,0a.29.29,0,0,1-.28.28H17.88s0,0,0,0a.24.24,0,0,1-.08-.06l-2.91-3.94v3.77a.29.29,0,0,1-.28.28h-1a.28.28,0,0,1-.28-.28V10.94a.28.28,0,0,1,.28-.28h1.15v0h0v0h0l0,0,0,0,2.91,3.93V10.94a.29.29,0,0,1,.28-.28h1a.34.34,0,0,1,.31.28Zm5.62-2.65a.28.28,0,0,1-.28.28H21.88V16h2.78a.29.29,0,0,1,.28.29v1a.29.29,0,0,1-.28.28H20.58a.3.3,0,0,1-.2-.08h0a.3.3,0,0,1-.08-.2V11a.3.3,0,0,1,.08-.2h0a.26.26,0,0,1,.19-.08h4.08a.28.28,0,0,1,.28.28v1a.29.29,0,0,1-.28.28H21.88v1.07h2.78a.29.29,0,0,1,.28.28Z\"\n          />\n        </symbol>\n        <symbol viewBox=\"0 0 20 20\" id=\"icon--facebook\">\n          <path d=\"M20 10C20 4.47715 15.5229 0 10 0C4.47715 0 0 4.47715 0 10C0 14.9912 3.65684 19.1283 8.4375 19.8785V12.8906H5.89844V10H8.4375V7.79688C8.4375 5.29063 9.93047 3.90625 12.2146 3.90625C13.3084 3.90625 14.4531 4.10156 14.4531 4.10156V6.5625H13.1922C11.95 6.5625 11.5625 7.3334 11.5625 8.125V10H14.3359L13.8926 12.8906H11.5625V19.8785C16.3432 19.1283 20 14.9912 20 10Z\" />\n        </symbol>\n        <symbol viewBox=\"0 0 20 20\" id=\"icon--twitter\">\n          <path d=\"M20.0002 3.91899C19.2515 4.25087 18.4572 4.46861 17.6439 4.56495C18.5003 4.05276 19.1414 3.24681 19.4479 2.29713C18.6425 2.77537 17.7612 3.11212 16.8421 3.29278C16.2788 2.6938 15.5485 2.27778 14.746 2.09863C13.9435 1.91947 13.1056 1.98543 12.341 2.28797C11.5764 2.5905 10.9203 3.11566 10.4576 3.79542C9.99493 4.47518 9.74703 5.27821 9.74603 6.10049C9.74574 6.41438 9.78108 6.7273 9.85137 7.03322C8.21966 6.95161 6.62334 6.52778 5.16604 5.78923C3.70875 5.05069 2.42304 4.01395 1.3924 2.74631C0.86803 3.64973 0.707477 4.71897 0.943392 5.73656C1.17931 6.75415 1.79397 7.64366 2.66238 8.22419C2.01097 8.20446 1.37378 8.02886 0.804225 7.7121C0.804225 7.72966 0.804225 7.74649 0.804225 7.76404C0.804348 8.71158 1.13222 9.62991 1.73224 10.3633C2.33226 11.0966 3.16747 11.5998 4.09622 11.7876C3.49207 11.9521 2.85844 11.9771 2.24319 11.8608C2.50452 12.6767 3.01454 13.3905 3.70181 13.9021C4.38908 14.4137 5.21918 14.6976 6.07581 14.7138C4.6224 15.8545 2.8274 16.473 0.979798 16.4696C0.652687 16.4698 0.325846 16.4507 0.000976562 16.4125C1.87767 17.6181 4.06175 18.2581 6.29235 18.256C13.8398 18.256 17.9672 12.0034 17.9672 6.58112C17.9672 6.40335 17.9629 6.22631 17.9555 6.05074C18.7584 5.46734 19.4508 4.74546 20.0002 3.91899V3.91899Z\" />\n        </symbol>\n        <symbol viewBox=\"0 0 24 24\" id=\"user\">\n          <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n          />\n          <path d=\"M8.25 13.5C8.94 13.5 9.5 12.94 9.5 12.25C9.5 11.56 8.94 11 8.25 11C7.56 11 7 11.56 7 12.25C7 12.94 7.56 13.5 8.25 13.5Z\" />\n          <path d=\"M15.75 13.5C16.44 13.5 17 12.94 17 12.25C17 11.56 16.44 11 15.75 11C15.06 11 14.5 11.56 14.5 12.25C14.5 12.94 15.06 13.5 15.75 13.5Z\" />\n          <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M9.20501 6.95201C8.47607 5.73711 8.42075 4.06612 9.16795 2.94531L10.8321 4.05471C10.5793 4.43391 10.5239 5.26292 10.92 5.92302C11.0983 6.22024 11.3504 6.44696 11.6828 6.56992C11.9157 6.65604 12.228 6.70585 12.638 6.65871C12.9672 6.62086 13.2991 6.79678 13.3901 7.1154L13.6099 7.88462C13.7009 8.20324 13.5168 8.53935 13.1906 8.59771C12.3824 8.7423 11.6419 8.68721 10.989 8.44573C10.1809 8.14681 9.58918 7.59228 9.20501 6.95201Z\"\n          />\n          <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M10.0778 15.3379C9.80729 15.3379 9.60353 15.5882 9.71172 15.8361C10.0966 16.718 10.9763 17.3343 12 17.3343C13.0237 17.3343 13.9034 16.718 14.2883 15.8361C14.3965 15.5882 14.1927 15.3379 13.9223 15.3379H13.5504C13.375 15.3379 13.2225 15.449 13.1246 15.5945C12.8813 15.9558 12.4684 16.1935 12 16.1935C11.5316 16.1935 11.1188 15.9558 10.8755 15.5945C10.7775 15.449 10.625 15.3379 10.4496 15.3379H10.0778Z\"\n            stroke=\"#EB2D23\"\n            strokeWidth=\"0.230232\"\n          />\n        </symbol>\n        <symbol viewBox=\"0 0 37 9\" id=\"arrow\">\n          <path d=\"M36,8.25H1a1,1,0,0,1,0-2H32.9L26.72,1.81A1,1,0,0,1,26.49.42a1,1,0,0,1,1.4-.23l8.69,6.25A1,1,0,0,1,36,8.25Z\" />\n        </symbol>\n        <symbol viewBox=\"0 0 8 8\" id=\"blank\">\n          <path\n            className=\"cls-1\"\n            d=\"M6,1.17H1.58V0H8V6.42H6.83V2l-6,6L0,7.17Z\"\n          />\n        </symbol>\n      </svg>\n\n      <header className=\"Header\">\n        <img\n          src={imagePath('service_site_index/common/logo.svg')}\n          alt=\"あずかるこちゃん 病児保育ネット予約サービス\"\n          width=\"280px\"\n          height=\"60px\"\n          className={`HeaderLogo${logoInView ? ' -hidden' : ''}`}\n        />\n        <div className=\"HeaderNav\">\n          <div className=\"HeaderNavItem\">\n            <LoginLink href=\"/users/sign_in\">\n              <svg role=\"img\" aria-hidden=\"true\">\n                <use xlinkHref=\"#user\" />\n              </svg>\n              <span>ログイン</span>\n            </LoginLink>\n          </div>\n          <div className=\"HeaderNavItem\">\n            <a className=\"TextLink\" href=\"/for-facility\">\n              <span>病児保育室運営者向けサイト</span>\n              <svg className=\"TextLink__arrow\" aria-hidden=\"true\">\n                <use xlinkHref=\"#arrow\" />\n              </svg>\n            </a>\n          </div>\n        </div>\n      </header>\n\n      <main>\n        <InViewFadeIn as=\"div\" className=\"Firstview\">\n          <InViewFadeIn as=\"div\" delay={300} className=\"Copy Firstview__copy\">\n            <img\n              width=\"360\"\n              height=\"98\"\n              src={imagePath('service_site_index/home/copy.svg')}\n              alt=\"病児保育を、てのひらに。\"\n            />\n          </InViewFadeIn>\n          <InViewFadeIn className=\"Logo\" as=\"h1\">\n            <img\n              src={imagePath('service_site_index/common/logo.svg')}\n              alt=\"あずかるこちゃん 病児保育ネット予約サービス\"\n              width=\"480px\"\n              height=\"106px\"\n              ref={logoRef}\n            />\n          </InViewFadeIn>\n          <div className=\"Img--01\">\n            <img\n              src={imagePath('service_site_index/home/img--01.jpg')}\n              alt=\"\"\n              width=\"1257\"\n              height=\"892\"\n            />\n          </div>\n\n          <InViewFadeIn\n            as=\"div\"\n            delay={400}\n            className=\"BtnWrap BtnWrap--vertical BtnWrap--w-340 Firstview__btns\"\n          >\n            <div className=\"BtnWrap__item\">\n              <a\n                href=\"/map_facilities\"\n                className=\"RoundedBtn RoundedBtn--c-red RoundedBtn--h-86 RoundedBtn--w-340\"\n              >\n                <div className=\"RoundedBtnBody\">\n                  <div className=\"RoundedBtnBody__line\">\n                    <span className=\"fs-14\">あずかるこちゃんを</span>\n                  </div>\n                  <div className=\"RoundedBtnBody__line\">\n                    <span className=\"fs-20\">今すぐ無料で使う</span>\n                  </div>\n                </div>\n                <span className=\"RoundedBtn__icon RoundedBtn__icon--arrow-in-circle\">\n                  <svg aria-hidden=\"true\">\n                    <use xlinkHref=\"#icon--arrow-in-circle\" />\n                  </svg>\n                </span>\n              </a>\n            </div>\n            <div className=\"BtnWrap__item\">\n              <LINELink href=\"https://lin.ee/BL5woF8\" target=\"_blank\">\n                <span>LINEの友だち追加からも利用できます</span>\n                <svg role=\"img\" aria-hidden=\"true\">\n                  <use xlinkHref=\"#icon--line\" />\n                </svg>\n              </LINELink>\n            </div>\n          </InViewFadeIn>\n\n          <div className=\"Firstview__sp-admin\">\n            <a className=\"TextLink\" href=\"/for-facility\">\n              <span>病児保育室運営者向けサイト</span>\n              <svg className=\"TextLink__arrow\">\n                <use xlinkHref=\"#arrow\" />\n              </svg>\n            </a>\n          </div>\n        </InViewFadeIn>\n\n        <Section className=\"Section--overview\">\n          <SectionOverView__1>\n            <InViewFadeIn as=\"p\" className=\"Section__title\">\n              あずかるこちゃんは、\n              <br />\n              病児保育室の予約をスマホひとつで\n              <br />\n              24時間いつでも簡単に申し込める\n              <br className=\"show-sp\" />\n              サービスです。\n            </InViewFadeIn>\n            <InViewFadeIn as=\"div\" rootMargin=\"-300px\" className=\"Img--02\">\n              <div className=\"Img--02__1\"></div>\n              <div className=\"Img--02__2\"></div>\n              <img\n                src={imagePath('service_site_index/home/img--02.jpg')}\n                alt=\"\"\n              />\n            </InViewFadeIn>\n            <InViewFadeIn as=\"ul\" className=\"LargeIconList\">\n              <li className=\"LargeIconListItem\">\n                <img\n                  className=\"LargeIconListItem__figure\"\n                  src={imagePath('service_site_index/home/largeicon--free.svg')}\n                  alt=\"\"\n                />\n                <p className=\"LargeIconListItem__label\">\n                  システム利用は\n                  <br />\n                  無料\n                </p>\n              </li>\n              <li className=\"LargeIconListItem\">\n                <img\n                  className=\"LargeIconListItem__figure\"\n                  src={imagePath('service_site_index/home/largeicon--line.svg')}\n                  alt=\"\"\n                />\n                <p className=\"LargeIconListItem__label\">\n                  LINEからも\n                  <br />\n                  予約＆キャンセル\n                </p>\n              </li>\n              <li className=\"LargeIconListItem\">\n                <img\n                  className=\"LargeIconListItem__figure\"\n                  src={imagePath('service_site_index/home/largeicon--dx.svg')}\n                  alt=\"\"\n                />\n                <p className=\"LargeIconListItem__label\">\n                  面倒な手続きを\n                  <br />\n                  オンライン化\n                </p>\n              </li>\n            </InViewFadeIn>\n          </SectionOverView__1>\n          <SectionOverView__Wrapper>\n            <SectionOverView__2>\n              <InViewFadeIn\n                as=\"p\"\n                className=\"Section__text\"\n                rootMargin=\"-200px\"\n              >\n                お近くの病児保育室をマップや\n                <br />\n                名称から手軽に検索。\n                <br />\n                利用の登録・予約もスムーズに。\n              </InViewFadeIn>\n              <InViewFadeIn\n                as=\"div\"\n                className=\"OverviewImg OverviewImg--01\"\n                rootMargin=\"-200px\"\n              >\n                <span className=\"Shape Shape--overview-01-1\"></span>\n                <span className=\"Shape Shape--overview-01-2\"></span>\n                <img\n                  width=\"512\"\n                  height=\"537\"\n                  src={imagePath('service_site_index/home/overview--01.svg')}\n                  alt=\"\"\n                />\n              </InViewFadeIn>\n            </SectionOverView__2>\n            <SectionOverView__3>\n              <InViewFadeIn\n                as=\"p\"\n                className=\"Section__text\"\n                rootMargin=\"-200px\"\n              >\n                予約などの操作はLINEからも可能。\n                <br />\n                病児保育室からの\n                <br />\n                リマインド機能も便利です。\n              </InViewFadeIn>\n              <InViewFadeIn\n                as=\"div\"\n                className=\"OverviewImg OverviewImg--02\"\n                rootMargin=\"-200px\"\n              >\n                <span className=\"Shape Shape--overview-02-1\"></span>\n                <span className=\"Shape Shape--overview-02-2\"></span>\n                <img\n                  src={imagePath('service_site_index/home/overview--02.svg')}\n                  alt=\"\"\n                />\n              </InViewFadeIn>\n            </SectionOverView__3>\n            <SectionOverView__4>\n              <InViewFadeIn\n                as=\"p\"\n                className=\"Section__text\"\n                rootMargin=\"-200px\"\n              >\n                手書きして提出しなければ\n                <br />\n                いけなかった用紙も\n                <br />\n                スマホから記入・提出できます。\n              </InViewFadeIn>\n              <InViewFadeIn\n                as=\"div\"\n                className=\"OverviewImg OverviewImg--03\"\n                rootMargin=\"-200px\"\n              >\n                <span className=\"Shape Shape--overview-03-1\"></span>\n                <span className=\"Shape Shape--overview-03-2\"></span>\n                <img\n                  src={imagePath('service_site_index/home/overview--03.svg')}\n                  alt=\"\"\n                />\n              </InViewFadeIn>\n            </SectionOverView__4>\n          </SectionOverView__Wrapper>\n        </Section>\n\n        <section className=\"Section Section--other\">\n          <InViewFadeIn as=\"h2\" className=\"Section__title\" rootMargin=\"-200px\">\n            ほかにも、\n            <br className=\"show-pc\" />\n            安心で便利な\n            <br className=\"show-sp\" />\n            機能を増やしています。\n          </InViewFadeIn>\n          <div className=\"Grid Grid--other\">\n            <InViewFadeIn\n              as=\"div\"\n              className=\"Grid__col Card\"\n              rootMargin=\"-150px\"\n              threshold={50}\n            >\n              <img\n                src={imagePath('service_site_index/home/other--01.svg')}\n                className=\"Card__figure\"\n                alt=\"\"\n              />\n              <p className=\"Card__title\">子どもの過ごす環境を事前に把握</p>\n              <p className=\"Card__text\">\n                病児保育室の写真やスタッフ紹介など、\n                <br />\n                情報ページから詳しく確認できます。\n              </p>\n            </InViewFadeIn>\n            <InViewFadeIn\n              as=\"div\"\n              className=\"Grid__col Card\"\n              rootMargin=\"-150px\"\n              threshold={100}\n            >\n              <img\n                src={imagePath('service_site_index/home/other--02.svg')}\n                className=\"Card__figure\"\n                alt=\"\"\n              />\n              <p className=\"Card__title\">細かいやりとりもスマホで簡単</p>\n              <p className=\"Card__text\">\n                子どもの様子の共有やお迎え時間変更の相談など、\n                <br />\n                細かい連絡もスマホでリアルタイムに行えます。\n              </p>\n            </InViewFadeIn>\n          </div>\n        </section>\n\n        <section className=\"Section Section--how\">\n          <InViewFadeIn as=\"h2\" className=\"Section__title\">\n            あずかるこちゃんの使い方\n          </InViewFadeIn>\n          <InViewFadeIn as=\"p\" className=\"Section__intro\">\n            あずかるこちゃんを使っての予約はアカウント作成が必要です。\n            <br />\n            アカウント作成から予約まで、システムのご利用にお金は一切かかりません。\n          </InViewFadeIn>\n\n          <section className=\"ChildSection\">\n            <InViewFadeIn as=\"h3\" className=\"ChildSection__title\">\n              <span>病児・病後児保育室を利用する前</span>\n            </InViewFadeIn>\n\n            <div className=\"Grid Grid--how-01\">\n              <div className=\"Grid__col Card\">\n                <InViewFadeIn as=\"div\" className=\"Label\">\n                  <span className=\"NumIcon\">1</span>\n                  <p>あずかるこちゃんのアカウントを作成</p>\n                </InViewFadeIn>\n                <InViewFadeIn\n                  as=\"img\"\n                  src={imagePath('service_site_index/home/how--01-01.png')}\n                  alt=\"あずかるこちゃんのアカウント作成画面のスクリーンショット。5つのステップでアカウント作成が完了し、画面には3ステップ目の利用者情報入力が表示されています。\"\n                  rootMargin=\"-300px\"\n                />\n              </div>\n              <div className=\"Grid__col Card\">\n                <div className=\"Arrow\">\n                  <svg className=\"Arrow__img\" aria-hidden=\"true\">\n                    <use xlinkHref=\"#arrow\" />\n                  </svg>\n                </div>\n                <InViewFadeIn as=\"div\" className=\"Label\">\n                  <span className=\"NumIcon\">2</span>\n                  <p>利用する施設を検索して利用登録</p>\n                  <img\n                    className=\"Label__attention\"\n                    src={imagePath('service_site_index/home/attention--01.png')}\n                    alt=\"これだけ！\"\n                  />\n                </InViewFadeIn>\n                <InViewFadeIn\n                  as=\"img\"\n                  src={imagePath('service_site_index/home/how--01-02.png')}\n                  alt=\"あずかるこちゃんの施設検索画面のスクリーンショット。マップ上に施設の所在地と、今日または明日の混み具合などが表示されています。\"\n                  rootMargin=\"-300px\"\n                />\n              </div>\n            </div>\n          </section>\n\n          <section className=\"ChildSection\">\n            <InViewFadeIn as=\"h3\" className=\"ChildSection__title\">\n              <span>病児・病後児保育室を利用したいとき</span>\n            </InViewFadeIn>\n\n            <ol className=\"Grid Grid--how-02\">\n              <li className=\"Grid__col Card\">\n                <InViewFadeIn as=\"div\" className=\"Label Label--multiline\">\n                  <span className=\"NumIcon\">1</span>\n                  <p>\n                    あずかるこちゃんから\n                    <br />\n                    施設を予約\n                  </p>\n                </InViewFadeIn>\n                <InViewFadeIn\n                  as=\"img\"\n                  src={imagePath('service_site_index/home/how--02-01.svg')}\n                  alt=\"あずかるこちゃんから施設を予約\"\n                  rootMargin=\"-300px\"\n                />\n              </li>\n              <li className=\"Grid__col Card\">\n                <div className=\"Arrow\">\n                  <svg className=\"Arrow__img\" aria-hidden=\"true\">\n                    <use xlinkHref=\"#arrow\" />\n                  </svg>\n                </div>\n                <InViewFadeIn as=\"div\" className=\"Label Label--multiline\">\n                  <span className=\"NumIcon\">2</span>\n                  <p>\n                    医療機関を受診して\n                    <br />\n                    用紙に記入\n                  </p>\n                </InViewFadeIn>\n                <InViewFadeIn\n                  as=\"img\"\n                  src={imagePath('service_site_index/home/how--02-02.svg')}\n                  alt=\"医療機関を受診して用紙に記入\"\n                  rootMargin=\"-300px\"\n                />\n              </li>\n              <li className=\"Grid__col Card\">\n                <div className=\"Arrow\">\n                  <svg className=\"Arrow__img\" aria-hidden=\"true\">\n                    <use xlinkHref=\"#arrow\" />\n                  </svg>\n                </div>\n                <InViewFadeIn as=\"div\" className=\"Label Label--multiline\">\n                  <span className=\"NumIcon\">3</span>\n                  <p>施設に入室</p>\n                </InViewFadeIn>\n                <InViewFadeIn\n                  as=\"img\"\n                  src={imagePath('service_site_index/home/how--02-03.svg')}\n                  alt=\"施設に入室\"\n                  rootMargin=\"-300px\"\n                />\n              </li>\n            </ol>\n          </section>\n        </section>\n\n        <section className=\"Section Section--what\">\n          <InViewFadeIn as=\"h2\" className=\"Section__title\">\n            知ってますか？ 病児保育。\n          </InViewFadeIn>\n          <InViewFadeIn as=\"p\" className=\"Section__intro\">\n            病児とは、風邪などの「入院するほど重篤ではないものの、保育園・学校などを休まなければならない子ども」のこと。病児保育は、そんな病児・病後児が安全に1\n            日を過ごし、保護者のみなさんも安心してご利用いただけるサービスです。\n          </InViewFadeIn>\n          <InViewFadeIn as=\"p\" className=\"Section__annotation\">\n            ※病気が回復期にある子どものことを病後児といいます。\n          </InViewFadeIn>\n\n          <div className=\"Grid Grid--what\">\n            <InViewFadeIn\n              as=\"div\"\n              className=\"Grid__col Card\"\n              rootMargin=\"-150px\"\n              threshold={100}\n            >\n              <p className=\"Card__title\">どんなときに使える？</p>\n              <img\n                src={imagePath('service_site_index/home/what--01.svg')}\n                className=\"Card__figure\"\n                alt=\"\"\n              />\n              <p className=\"Card__text\">\n                子どもが急病のときや、保護者が仕事を休めず看病できないときなどにご利用いただけます。\n              </p>\n            </InViewFadeIn>\n            <InViewFadeIn\n              as=\"div\"\n              className=\"Grid__col Card\"\n              rootMargin=\"-150px\"\n              threshold={100}\n            >\n              <p className=\"Card__title\">だれがいるの？</p>\n              <img\n                src={imagePath('service_site_index/home/what--02.svg')}\n                className=\"Card__figure\"\n                alt=\"\"\n              />\n              <p className=\"Card__text\">\n                病児保育の専門家である保育士や看護師が常駐し、病気の子どもの体調をしっかりみながら保育します。\n              </p>\n            </InViewFadeIn>\n            <InViewFadeIn\n              as=\"div\"\n              className=\"Grid__col Card\"\n              rootMargin=\"-150px\"\n              threshold={100}\n            >\n              <p className=\"Card__title\">病気はうつらない？</p>\n              <img\n                src={imagePath('service_site_index/home/what--03.svg')}\n                className=\"Card__figure\"\n                alt=\"\"\n              />\n              <p className=\"Card__text\">\n                インフルエンザなどの感染症の場合、他の子どもに感染しないよう、部屋を分けて保育を行います。\n              </p>\n            </InViewFadeIn>\n          </div>\n        </section>\n      </main>\n\n      <div className=\"Conversion\">\n        <InViewFadeIn as=\"div\" className=\"BtnWrap BtnWrap--vertical\">\n          <div className=\"BtnWrap__item\">\n            <a\n              href=\"/map_facilities\"\n              className=\"RoundedBtn RoundedBtn--c-red RoundedBtn--h-86 RoundedBtn--w-498\"\n            >\n              <div className=\"RoundedBtnBody\">\n                <div className=\"RoundedBtnBody__line RoundedBtnBody__line--sp-multiline\">\n                  <span className=\"fs-20 sp-fs-12\">\n                    あずかるこちゃん<span className=\"fs-14\">を</span>\n                  </span>\n                  <span className=\"fs-20\">今すぐ無料で使う</span>\n                </div>\n                <span className=\"RoundedBtn__icon RoundedBtn__icon--arrow-in-circle\">\n                  <svg aria-hidden=\"true\">\n                    <use xlinkHref=\"#icon--arrow-in-circle\" />\n                  </svg>\n                </span>\n              </div>\n            </a>\n          </div>\n          <div className=\"BtnWrap__item\">\n            <LINELink href=\"https://lin.ee/BL5woF8\" target=\"_blank\">\n              <span>LINEの友だち追加からも利用できます</span>\n              <svg role=\"img\" aria-hidden=\"true\">\n                <use xlinkHref=\"#icon--line\" />\n              </svg>\n            </LINELink>\n          </div>\n        </InViewFadeIn>\n      </div>\n\n      <footer className=\"Footer\">\n        <div className=\"FooterNav\">\n          <ul className=\"FooterNavList FooterNavList--primary\">\n            <li className=\"FooterNavListItem\">\n              <a href=\"/\" className=\"Logo Logo--footer\">\n                <img\n                  src={imagePath('service_site_index/common/logo--type.svg')}\n                  alt=\"あずかるこちゃん 病児保育ネット予約サービス\"\n                />\n              </a>\n            </li>\n            <li className=\"FooterNavListItem\">\n              <a className=\"FooterNavListItemBtn\" href=\"/terms\">\n                利用規約\n              </a>\n            </li>\n            <li className=\"FooterNavListItem\">\n              <a className=\"FooterNavListItemBtn\" href=\"/policy\">\n                プライバシーポリシー\n              </a>\n            </li>\n            <li className=\"FooterNavListItem\">\n              <a\n                className=\"FooterNavListItemBtn\"\n                href=\"https://docs.google.com/forms/d/e/1FAIpQLSd4L0WHr4KmmEC1mGADaV3EF0l9kPI6Dwai09my-Zx5RIxvmw/viewform\"\n              >\n                お問い合わせ\n                <svg\n                  className=\"icon--blank\"\n                  role=\"img\"\n                  aria-label=\"お問い合わせ\"\n                >\n                  <use xlinkHref=\"#blank\" />\n                </svg>\n              </a>\n            </li>\n            <li className=\"FooterNavListItem\">\n              <a\n                className=\"FooterNavListItemBtn\"\n                href=\"https://goodbaton.jp/\"\n                target=\"_blank\"\n              >\n                運営会社\n                <svg className=\"icon--blank\" role=\"img\" aria-label=\"運営会社\">\n                  <use xlinkHref=\"#blank\" />\n                </svg>\n              </a>\n            </li>\n          </ul>\n        </div>\n        <div className=\"FooterNav\">\n          <ul className=\"FooterNavList FooterNavList--secondary\">\n            <li className=\"FooterNavListItem\">\n              <a\n                className=\"FooterNavListItemBtn FooterNavListItemBtn--twitter\"\n                href=\"https://twitter.com/azukaruko\"\n                target=\"_blank\"\n              >\n                <svg className=\"icon--twitter\" role=\"img\" aria-label=\"Twitter\">\n                  <use xlinkHref=\"#icon--twitter\" />\n                </svg>\n                @azukaruko\n              </a>\n            </li>\n            <li className=\"FooterNavListItem\">\n              <a\n                className=\"FooterNavListItemBtn FooterNavListItemBtn--facebook\"\n                href=\"https://www.facebook.com/azukaruko/\"\n                target=\"_blank\"\n              >\n                <svg\n                  className=\"icon--facebook\"\n                  role=\"img\"\n                  aria-label=\"Facebook\"\n                >\n                  <use xlinkHref=\"#icon--facebook\" />\n                </svg>\n                facebook.com/azukaruko\n              </a>\n            </li>\n            <li className=\"FooterNavListItem\">\n              <a\n                className=\"FooterNavListItemBtn\"\n                href=\"https://goodbaton.jp/\"\n                target=\"_blank\"\n              >\n                &copy; Goodbaton Inc.\n              </a>\n            </li>\n          </ul>\n        </div>\n      </footer>\n    </React.Fragment>\n  )\n}\n\nconst LoginLink = styled.a`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 16px 9px 15px;\n  border-radius: 1000px;\n\n  color: #e01a27;\n  border: 1px solid #e01a27;\n  background-color: #fff;\n  font-size: clamp(15px, 1.5vw, 15px);\n  font-weight: 700;\n  letter-spacing: -0.0517em;\n\n  transition: color 0.4s ${easing.easeOutSine},\n    background-color 0.4s ${easing.easeOutSine},\n    box-shadow 0.4s ${easing.easeOutSine};\n\n  & > svg {\n    fill: currentColor;\n    width: 24px;\n    height: 24px;\n    transition: fill 0.4s ${easing.easeOutSine};\n  }\n\n  &:hover,\n  &:focus {\n    color: white;\n    background-color: #e01a27;\n    box-shadow: 0px 1px 4px 0px #00000066;\n\n    & > svg {\n      fill: white;\n    }\n  }\n\n  @media screen and (max-width: 750px) {\n    padding-top: 4px;\n    padding-bottom: 4px;\n  }\n`\n\nconst LINELink = styled.a`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75em;\n  padding: 0.85em 1.45em 0.85em 2.1em;\n  border-radius: 1000px;\n\n  background-color: #00b900;\n  color: white;\n  font-size: 0.9375vw;\n  box-shadow: 0px 4px 12px 0px #0000002e;\n\n  transition: box-shadow 0.8s ${easing.easeOutExpo};\n\n  & > span {\n    white-space: nowrap;\n  }\n\n  & > svg {\n    fill: currentColor;\n    width: 2.5em;\n    height: 2.5em;\n  }\n\n  @media (max-width: 750px) {\n    font-size: 3.2vw;\n  }\n`\n\nconst Section = styled.section`\n  position: relative;\n`\n\nconst SectionOverView__1 = styled.div`\n  display: grid;\n  padding: 0 20px;\n  gap: 25px;\n\n  @media (min-width: 751px) {\n    padding: 0 4.86vw 0 8.2vw;\n    grid-template-areas:\n      'a b'\n      'a c';\n    gap: 10px 5vw;\n\n    .Section__title {\n      grid-area: b;\n      padding-top: 48px;\n      padding-left: 0;\n    }\n\n    .Img--02 {\n      grid-area: a;\n      justify-content: flex-end;\n    }\n\n    .LargeIconList {\n      grid-area: c;\n    }\n  }\n`\n\nconst SectionOverView__Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin-top: 66px;\n  font-weight: bold;\n  padding: 0 86px;\n\n  @media (max-width: 750px) {\n    padding: 4px 24px 0;\n\n    &::before {\n      content: '';\n      height: 1px;\n      width: 100%;\n      background-color: rgb(178, 172, 159);\n    }\n  }\n`\n\nconst SectionOverView__2 = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: calc(75 / 1440 * 100vw);\n\n  @media (max-width: 750px) {\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 44px;\n  }\n\n  .Section__text {\n    margin-top: 60px;\n\n    @media (max-width: 750px) {\n      margin-top: 40px;\n    }\n  }\n`\n\nconst SectionOverView__3 = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: flex-end;\n  align-items: top;\n  margin-top: 10px;\n  padding-left: 40px;\n  column-gap: calc(146 / 1440 * 100vw);\n\n  @media (max-width: 750px) {\n    flex-wrap: wrap;\n    justify-content: center;\n    margin-top: 108px;\n    padding-left: 0;\n    gap: 13px;\n  }\n\n  .Section__text {\n    margin-top: 145px;\n    z-index: 2;\n\n    @media (max-width: 750px) {\n      margin-top: 0;\n    }\n  }\n`\n\nconst SectionOverView__4 = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin-top: 84px;\n  padding-right: calc(33 / 1440 * 100vw);\n  gap: calc(119 / 1440 * 100vw);\n\n  @media (max-width: 750px) {\n    flex-wrap: wrap;\n    justify-content: center;\n    margin-top: 120px;\n    padding-right: 0;\n    gap: 13px;\n  }\n\n  .Section__text {\n    z-index: 2;\n  }\n`\n"],"names":[],"sourceRoot":""}