@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap");
.f_white { color: #FFFFFF; }

.f_border { font-size: 28px; font-size: min(6.5vw, 36px); font-weight: 500; }

body { color: #000000; font-family: "Hiragino UD Sans", "Hiragino Sans", 'Noto Sans JP', "ヒラギノ角ゴ",sans-serif; font-size: 16px; overflow-x: hidden; }

.ls01 { letter-spacing: -5px; }

.ls02 { position: relative; letter-spacing: -7px; left: -7px; }

.fs-30 { font-size: 30px; }

.fs-28 { font-size: 28px; }

.fs-26 { font-size: 26px; }

.fs-18 { font-size: 18px; }

.fs-17 { font-size: 17px; }

.fs-16 { font-size: 16px; }

.fs-15 { font-size: 15px; }

.fs-13 { font-size: 13px; }

.fs-12 { font-size: 12px; }

.fs-10 { font-size: 10px; }

.fs-9 { font-size: 9px; }

.fw-300 { font-weight: 300; }

.fw-400 { font-weight: 400; }

.fw-500 { font-weight: 500; }

.fw-600 { font-weight: 600; }

.fw-700 { font-weight: 700; }

.fw-800 { font-weight: 800; }

.f-white { color: #FFFFFF; }

.sp { display: none; }

img { max-width: 100%; }

.flex { display: flex; flex-wrap: wrap; }

.button { transition: 0.5s; opacity: 1; text-decoration: none; color: #222; }

.button:hover { opacity: 0.5; }

.button2 { display: inline-flex; justify-content: center; align-items: center; background-color: #F0D374; border-radius: 40px; padding: 10px 24px 10px; line-height: 1.1; width: 246px; margin: auto; color: #000000; text-decoration: none; }

.arrow { position: relative; }
.arrow::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: #000000; width: 8px; height: 11px; clip-path: polygon(0 0, 100% 50%, 0 100%); transition-duration: 0.4s; }
.arrow:hover::after { right: 12px; }

@keyframes show { 0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; } }
@keyframes spin { from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } }
.main__fv { min-height: 100vh; }

.sequence { min-width: 100vw; min-height: 100vh; position: relative; z-index: -1; }
.sequence__container:not(:first-child) { opacity: 0; }
.sequence .sequence--1 { animation: show 2s 0.25s forwards; opacity: 0; }
.sequence--2 { background-color: white; }
.sequence__bubble, .sequence__photo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); opacity: 0; z-index: 1; }
.sequence__bubble-green { width: 305px; height: 295px; opacity: 1; }
.sequence__bubble-blue { top: 34%; left: 43%; width: 200px; height: 190px; z-index: 5; }
.sequence__bubble-pink { top: 67%; left: 55%; width: 198px; height: 198px; z-index: 4; }
.sequence__bubble-yellow { top: 40%; left: 56%; width: 236px; height: 250px; z-index: 3; }
.sequence__bubble-green-2 { top: 59%; left: 43%; width: 176px; height: 170px; z-index: 2; }
.sequence__bubble-blue-2 { top: 50%; left: 50%; width: 300px; height: 300px; z-index: 2; }
.sequence__photo { z-index: 99; }
.sequence__photo-1 { top: 35%; left: 43%; }
.sequence__photo-1 img { width: 90px; height: 90px; }
.sequence__photo-2 { top: 67%; left: 55%; }
.sequence__photo-2 img { width: 90px; height: 90px; }
.sequence__photo-3 { top: 40%; left: 56%; }
.sequence__photo-3 img { width: 108px; height: 108px; }
.sequence__photo-4 { top: 59%; left: 43%; }
.sequence__photo-4 img { width: 90px; height: 90px; }
.sequence__photo-5 { top: 45%; left: 43%; }
.sequence__photo-5 img { width: 53px; height: 53px; }
.sequence__photo-6 { top: 47%; left: 55%; }
.sequence__photo-6 img { width: 44px; height: 44px; }
.sequence__photo-7 { top: 65%; left: 48%; }
.sequence__photo-7 img { width: 67px; height: 67px; }
.sequence__photo-8 { top: 49%; left: 40%; }
.sequence__photo-8 img { width: 64px; height: 64px; }
.sequence__photo-9 { top: 50%; left: 65%; }
.sequence__photo-9 img { width: 85px; height: 85px; }
.sequence__photo-10 { top: 60%; left: 45%; }
.sequence__photo-10 img { width: 75px; height: 75px; }
.sequence__photo-11 { top: 60%; left: 55%; }
.sequence__photo-11 img { width: 67px; height: 67px; }
.sequence__photo-12 { top: 50%; left: 55%; }
.sequence__photo-12 img { width: 67px; height: 67px; }
.sequence__title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 160px; }
.sequence__title__final { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50%)); width: 225px; z-index: 101; }
.sequence__white { opacity: 0; position: absolute; background: #FFFFFF; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 500px; width: 250px; height: 250px; z-index: 100; }

.placeholder { width: 100vw; height: 100vh; background-color: aliceblue; position: relative; z-index: 2; }

@keyframes fuwa2 { 0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(0, -3px) scale(1.01); }
  66% { transform: translate(0, 3px) scale(1.01); }
  100% { transform: translate(0, 0) scale(1); } }
.hannan { overflow: hidden; }

.hannan__top { position: relative; background: #FFFFFF; margin: auto; z-index: 2; padding: 50px 0; }
.hannan__top__container { max-width: 1000px; margin: auto; }
.hannan__top__title { text-align: center; margin-bottom: 50px; }
.hannan__top__title h2 { margin-bottom: 50px; }
.hannan__top__title h2 img { width: 245px; }
.hannan__top__content__left { max-width: 460px; }
.hannan__top__content__right { position: relative; align-self: center; max-width: 520px; padding: 30px 20px 0; margin-left: 60px; z-index: 2; }
.hannan__top__content__right::before { content: ""; position: absolute; background: url(../images/top-content-border.svg); background-size: 535px; width: 535px; height: 404px; top: 5px; left: -50px; }
.hannan__top__content__right__image { width: 45px; height: auto; margin-right: 30px; align-self: center; }
.hannan__top__content__right li:not(:last-child) { margin-bottom: 25px; }
.hannan__top__content__right p { font-size: 11px; margin-top: 10px; }

.hannan__vision { background: url(../images/vision-bg.jpg) no-repeat; background-size: cover; padding: 50px 0 0; }
.hannan__vision__container { position: relative; }
.hannan__vision__container.active { background: linear-gradient(180deg, #06b7ce 0%, #006e4f 100%); }
.hannan__vision .accordion { max-width: 190px; margin: 30px auto 0; padding: 20px 0; position: relative; z-index: 2; }
.hannan__vision .accordion::before { content: ""; position: absolute; background: url(../images/bubble-blue.svg) no-repeat; background-size: contain; width: 125%; height: 100%; top: -5px; left: -20px; animation: spin 10s linear infinite; z-index: -1; }
.hannan__vision .accordion.active::before { display: none; }
.hannan__vision .accordion-open { padding-bottom: 100px; }
.hannan__vision .accordion-open h2 { text-align: center; margin-top: 30px; }
.hannan__vision .accordion:hover { opacity: 0.5; transition: 0.5s; cursor: pointer; }
.hannan__vision .accordion__content { margin-top: 25px; justify-content: center; }
.hannan__vision .accordion__content__left { max-width: 285px; position: relative; text-align: center; }
.hannan__vision .accordion__content__left__cake { position: relative; justify-self: center; opacity: 0; }
.hannan__vision .accordion__content__left .cl-1 { max-width: 164px; z-index: 4; }
.hannan__vision .accordion__content__left .cl-2 { margin-top: -45px; max-width: 196px; z-index: 3; }
.hannan__vision .accordion__content__left .cl-3 { margin-top: -55px; max-width: 236px; z-index: 2; }
.hannan__vision .accordion__content__left .cl-4 { margin-top: -65px; max-width: 284px; z-index: 1; }
.hannan__vision .accordion__content__right { max-width: 530px; align-content: center; margin-left: 80px; opacity: 0; }
.hannan__vision .accordion__content__right h3 { margin-bottom: 10px; }
.hannan__vision .accordion__content__right__row:not(:last-child) { margin-bottom: 30px; }

.hannan__history { margin-top: -50px; padding-bottom: 50px; }
.hannan__history__content { margin-top: -50px; margin-left: 11vw; }
.hannan__history__content p { margin: 20px 0 30px; }
.hannan__history__content a img { max-width: 200px; }

.hannan__challenge { margin-top: -50px; }
.hannan__challenge__content { justify-content: center; gap: 50px; }
.hannan__challenge__content p { margin: 20px 0 30px; }
.hannan__challenge__content a img { max-width: 200px; }
.hannan__challenge__content__left { align-content: center; }
.hannan__challenge__content__right { max-width: 320px; }
.hannan__challenge__content__right img { width: 100%; }

@media (max-width: 768px) { .sequence__title__final { width: 176px; } }

/*# sourceMappingURL=style.css.map */