@charset 'UTF-8';

/* common
------------------------------------------------ */
.lenis.lenis-smooth { scroll-behavior: auto; }
html.lenis { height: auto; }
.page-home { position: fixed; top: 0; left: 0; }
.body-visual-move { position: relative; top: auto; left: auto; }
.hd-logo { pointer-events: none; transition: opacity 0.4s ease; opacity: 0; }

@media screen and (max-width: 768px) {
  .hd-logo-show--mobile .hd-logo { pointer-events: inherit; opacity: 1; }
  .ft-pagetop { bottom: 80px; }
}

@media screen and (min-width: 769px) {
  .page-home .l-main { padding-top: 0; }
  .hd-visual-hidden .hd-logo,
  .hd-content-show .hd-logo { pointer-events: inherit; opacity: 1; }
  /*
  .hd-visual-hidden { transition: background-color 0.4s ease; background: none; }
  .hd-visual-hidden .hd-info,
  .hd-visual-hidden .l-gnav { pointer-events: none; transition: opacity 0.4s ease; opacity: 0; }
  .hd-content-show { transition: background-color 0.4s ease; background-color: #fff; }
  .hd-content-show .hd-info,
  .hd-content-show .l-gnav { transition: opacity 0.4s ease; opacity: 1; }
  */
  .ft-pagetop.is-show { pointer-events: none; opacity: 0; }
  .ft-pagetop.ft-content-show { pointer-events: inherit; opacity: 1; }
}

/* loading
------------------------------------------------ */
.top-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #3E3A39; z-index: 100; }
.top-loading-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48.2666666667%; }

@media screen and (min-width: 769px) {
  .top-loading-logo { width: 200px; }
}

/* visual
------------------------------------------------ */
.top-visual { position: relative; }
.top-visual-sticky { position: relative; }
.top-visual-body { position: relative; }
.top-visual-wrap { position: relative; }
.top-visual .title-en { margin-bottom: 16px; font-family: 'Gilda Display', serif; font-size: 3rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.2; }
.top-visual .title-ja { font-family: 'Noto Serif JP', serif; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.2em; line-height: 1.2; }
.top-visual .text { font-family: 'Noto Serif JP', serif; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2.83333333333; }
.top-visual .text + .text { margin-top: 2.83333333333em; }
.top-visual .photo { position: relative; }
.top-visual .column { display: flex; }
.top-visual-scroll { position: fixed; bottom: 22px; right: 0; padding-right: 72px; font-family: 'Gilda Display', serif; font-size: 1.6rem; font-weight: 400; line-height: 1.2; }
.top-visual-scroll::after { content: ''; position: absolute; bottom: 4px; right: 0; width: 63px; height: 1px; background-color: #000; }
.top-visual-scroll.is-hidden { pointer-events: none; transition: 0.4s ease; right: 40px; opacity: 0; }

@media screen and (max-width: 768px) {
  .top-visual { height: auto !important; }
  .top-visual-sticky { transform: none !important; }
  .top-visual-body { width: 100% !important; }
  .top-visual-wrap { padding: 90px 20px 100px; }
  .top-visual .title-en,
  .top-visual .title-ja,
  .top-visual .text { text-align: center; }
  .top-visual .title-ja { margin-bottom: 30px; }
  .top-visual-logo { margin: 0 auto 50px; width: 173px; }
  .top-visual .photo-1,
  .top-visual .photo-2 { margin-bottom: 20px; }
  .top-visual .info-1 { padding: 74px 0; }
  .top-visual .photo-4 { margin: 0 auto 70px; width: 61.4925373134%; }
  .top-visual .photo-5 { margin-bottom: 80px; }
  .top-visual .column-1 { justify-content: space-between; }
  .top-visual .photo-6,
  .top-visual .photo-7 { width: 48.3582089552%; }
  .top-visual .info-2 { padding: 56px 0 74px; }
  .top-visual .photo-8 { display: none; }
  .top-visual .photo-9 { margin-bottom: 20px; }
  .top-visual .info-3 { padding: 56px 0 76px; }
  .top-visual-scroll { display: none; }
}

@media screen and (min-width: 769px) {
  .top-visual { overflow: clip; }
  .top-visual-sticky { position: sticky; top: 0; left: 0; transition: linear 0.2s; }
  .top-visual-body { width: 100%; height: 100dvh; min-height: 768px; overflow: hidden; }
  .top-visual-wrap { display: inline-flex; align-items: flex-start; height: 100%; }
  .top-visual .lazy,
  .top-visual .lazy-done { transform: translateX(40px); opacity: 0; }
  .top-visual .lazy-x-done { transform: translateX(0); opacity: 1; }
  .top-visual .title-en { margin-bottom: 20px; font-size: 3.4rem; }
  .top-visual .title-ja { font-size: 1.6rem; }
  .top-visual .text { font-size: 1.4rem; line-height: 3.57142857143; }
  .top-visual .text + .text { margin-top: 2.92825768668vh; }
  .top-visual .photo { overflow: hidden; }
  .top-visual .photo img { position: absolute; top: 0; left: 0; }
  .top-visual-first { position: relative; width: 31.4787701318vw; height: 100%; }
  .top-visual-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46.511627907%; }
  .top-visual .photo-1,
  .top-visual .photo-2,
  .top-visual .photo-3,
  .top-visual .photo-9,
  .top-visual .photo-10 { margin-top: 98px; width: 29.2825768668vw; height: calc(100% - 170px); }
  .top-visual .photo-1,
  .top-visual .photo-2,
  .top-visual .photo-9 { margin-right: 2.34260614934vw; }
  .top-visual .photo-5,
  .top-visual .photo-11 { margin-top: 98px; width: 37.4816983895vw; height: calc(100% - 98px); }
  .top-visual .info-1 { display: flex; flex-flow: column; justify-content: flex-end; margin-top: 98px; padding-left: 7.32064421669vw; width: 49.1947291362vw; height: calc(100% - 170px); }
  .top-visual .info-1 .text { margin: 60px 0 0 auto; }
  .top-visual .photo-4 { margin: 98px 6.73499267936vw 0 0; width: 15.0805270864vw; }
  .top-visual .photo-4 img { position: relative; top: auto; left: auto; }
  .top-visual .column-1 { justify-content: space-between; align-items: flex-start; margin: 98px 0 0 6.73499267936vw; width: 32.7232796486vw; height: calc(100% - 170px); }
  .top-visual .photo-6 { margin-top: calc(115px - 98px); width: 38.255033557%; }
  .top-visual .photo-7 { margin-top: calc(320px - 98px); width: 49.4407158837%; }
  .top-visual .photo-6 img,
  .top-visual .photo-7 img { position: relative; top: auto; left: auto; }
  .top-visual .info-2 { display: flex; flex-flow: column; justify-content: center; margin-top: 98px; padding: 0 11.420204978vw 0 7.32064421669vw; width: 64.2752562225vw; height: calc(100% - 170px); }
  .top-visual .info-2 .text + .text { margin-left: auto; }
  .top-visual .photo-8 { margin: calc(21.2239583333vh - 98px) 6.73499267936vw 0 0; width: 15.0805270864vw; }
  .top-visual .photo-8 img { position: relative; top: auto; left: auto; }
  .top-visual .info-3 { display: flex; flex-flow: column; justify-content: center; margin-top: 98px; width: 41.8740849195vw; height: calc(100% - 98px); text-align: center; }
}

@media screen and (min-width: 769px) and (min-height: 769px) {
  .top-visual .photo-6 { margin-top: calc(14.9739583333vh - 98px); width: 38.255033557%; }
  .top-visual .photo-7 { margin-top: calc(41.6666666667vh - 98px); width: 49.4407158837%; }
}

/* content
------------------------------------------------ */
.top-content { position: relative; }

@media screen and (max-width: 768px) {
  .top-content { display: flex; flex-flow: column; }
  .top-content .top-concept { order: 1; }
  .top-content .top-category { order: 3; }
  .top-content .top-story { order: 2; }
  .top-content .top-pickup { order: 4; }
  .top-content .top-journal { order: 5; }
  .top-content .top-faq { order: 6; }
}

/* concept
------------------------------------------------ */
.top-concept { position: relative; padding-bottom: 56.2666666667%; width: 100%; height: 0; overflow: hidden; }
.top-concept-info { display: flex; flex-flow: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; z-index: 2; }
.top-concept-title { margin-bottom: 4px; text-align: center; font-family: 'Gilda Display', serif; font-size: 3rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; }
.top-concept-copy { margin-bottom: 26px; text-align: center; font-family: 'Barlow', sans-serif; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.2; }
.top-concept-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.top-concept-bg video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.top-concept-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #9B9B9B; mix-blend-mode: multiply; opacity: 0.8; z-index: 2; }

@media screen and (min-width: 769px) {
  .top-concept-title { margin-bottom: 10px; font-size: 6rem; }
  .top-concept-copy { margin-bottom: 126px; font-size: 1.8rem; }
 
}

/* category
------------------------------------------------ */
.top-category { position: relative; margin-top: 74px; }

@media screen and (max-width: 768px) {
  .top-category > .wrap { padding: 0 20px; }
}

@media screen and (min-width: 769px) {
  .top-category { margin-top: 132px; }
}

/* story
------------------------------------------------ */
.top-story { position: relative; margin-top: 80px; padding-bottom: 56.2666666667%; width: 100%; height: 0; overflow: hidden; }
.top-story-info { display: flex; flex-flow: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; z-index: 2; }
.top-story-title { margin-bottom: 10px; text-align: center; font-family: 'Gilda Display', serif; font-size: 3rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; }
.top-story-copy { margin-bottom: 26px; text-align: center; font-family: 'Noto Serif JP', serif; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.2em; line-height: 1.2; }
.top-story-photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.top-story-photo::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #9B9B9B; mix-blend-mode: multiply; opacity: 0.8; }

@media screen and (min-width: 769px) {
  .top-story { margin: 146px auto 0; padding-bottom: 45.2930728242%; max-width: 1126px; }
  .top-story-title { margin-bottom: 12px; font-size: 6rem; }
  .top-story-copy { margin-bottom: 104px; font-size: 1.6rem; }
}

/* pickup
------------------------------------------------ */
.top-pickup { position: relative; margin-top: 68px; }

@media screen and (max-width: 768px) {
  .top-pickup > .wrap { padding: 0 20px; }
}

@media screen and (min-width: 769px) {
  .top-pickup { margin-top: 158px; }
}

/* journal
------------------------------------------------ */
.top-journal { position: relative; margin-top: 70px; padding: 38px 0 70px; background-color: #F7F7F7; }

@media screen and (max-width: 768px) {
  .top-journal > .wrap { padding: 0 20px; }
}

@media screen and (min-width: 769px) {
  .top-journal { margin-top: 120px; padding: 80px 0 96px; }
}

/* faq
------------------------------------------------ */
.top-faq { position: relative; margin-top: 74px; }

@media screen and (max-width: 768px) {
  .top-faq > .wrap { padding: 0 20px; }
  .top-faq .btn-1 { margin-top: 60px; }
}

@media screen and (min-width: 769px) {
  .top-faq { margin-top: 92px; }
  .top-faq > .wrap { display: flex; }
  .top-faq .title-1 { width: 23.2172470978%; }
  .top-faq #top-faq-wploade { width: 76.7827529022%; }
  .top-faq .btn-1 { position: absolute; bottom: 0; left: 20px; }
}