/* デザイン案② / Section 1 / B — 1440pxを基準とするトップページ。 */
.home-page {
  background: #e5edf7;
  overflow-x: clip;
}

/* Opening: the header's navy background and a centered crest. */
.opening { display: none; }
.opening-active,
.opening-active body { overflow: hidden; }
.opening-active:not(.opening-revealing) .home-page > :not(.opening) { visibility: hidden; }
.opening-active .opening {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-header-bg);
  opacity: 1;
  transition: opacity 600ms ease;
}
.opening__logo {
  position: relative;
  width: clamp(160px, 18vw, 260px);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 4px 24px #0009);
}
.opening.is-ready .opening__logo { animation: opening-logo-in 825ms 135ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.opening-active .opening.is-leaving { opacity: 0; pointer-events: none; }
@keyframes opening-logo-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .opening-active .opening { display: none; }
  .opening-active:not(.opening-revealing) .home-page > :not(.opening) { visibility: visible; }
}

.home-page .container {
  width: calc(100% - 240px);
  max-width: 1200px;
  padding: 0;
}

.home-page .section-title {
  margin: 0;
  font-size: 36px;
  line-height: 60px;
}

.home-page .hero__bg {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.home-page .hero { display: block; margin: 0; background: #000; }

.home-page .hero::after { content: none; }

.home-page .hero__eyebrow {
  top: 17.2%;
  right: 15.35%;
  font: 700 clamp(12px, 1.389vw, 20px)/1 var(--font-serif-jp);
  letter-spacing: 0.15em;
}

.home-page .hero__title {
  top: 22%;
  right: 18%;
  display: block;
  font: 700 clamp(22px, 2.778vw, 40px)/1.4 var(--font-serif-jp);
  letter-spacing: 0.1em;
}

.home-page .hero__title span { display: block; }
.home-page .hero__title .hero__char { display: inline-block; }
.home-page .hero-copy-pending .hero__char,
.home-page .hero-copy-pending .hero__eyebrow { opacity: 0; }
.home-page .hero-copy-playing .hero__char { animation: hero-character-in 400ms var(--char-delay) ease-out both; }
.home-page .hero-copy-playing .hero__eyebrow { animation: hero-name-in 700ms var(--name-delay) ease-out both; }
@keyframes hero-character-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-name-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.home-page .news {
  position: relative;
  padding: 120px 0 32px;
  min-height: 763px;
  overflow: clip;
  /* Match About's first color regardless of the news list's rendered height. */
  background: linear-gradient(180deg, #e2e5e880 0%, #f2f4f7 18%, #e6eaef 70%, #d7dfe9 100%);
}

.home-page .news > .container { position: relative; }
.home-page .news .section-title { margin-bottom: 16px; }
.home-page .chip-row { gap: 10px; margin-bottom: 16px; }
.home-page .news-item { padding: 24px 0; }
.home-page .news-item__main { gap: 16px; width: 100%; }
.home-page .news-item__date { flex: 0 0 150px; line-height: 30px; color: var(--color-text-primary); }
.home-page .news-item__main > .chip { flex-shrink: 0; }
.home-page .news-item__title { font-size: 24px; line-height: 36px; }
.home-page .news__more { margin-top: 16px; padding: 8px; }

/* The illustrated backgrounds overlap by 471px in Figma. These art layers
   use proportional positions within one shared canvas. */
.home-page .about {
  display: block;
  aspect-ratio: 1440 / 1477;
  padding: 0;
  isolation: isolate;
  z-index: 1;
  background: #c6cedb linear-gradient(180deg, #d7dfe9, #a8b7cd 55%, #6f83a0) 0 0 / 100% clamp(260px, 29.3vw, 422px) no-repeat;
  overflow: visible;
}

.home-page .about::before,
.home-page .about::after { content: none; }

/* Each panel owns its background, photo and text so all layers reveal together. */
.home-page .about__panel {
  position: absolute;
  left: 0;
  width: 100%;
}
.home-page .about__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  pointer-events: none;
}
.home-page .about__panel--intro { top: 0; height: 75.339%; z-index: 1; }
.home-page .about__panel--intro::before {
  background-image: url("assets/background.png");
  mask-image: linear-gradient(#000 calc(100% - 180px), transparent);
}
.home-page .about__panel--join { top: 43.466%; height: 56.534%; z-index: 2; }
.home-page .about__panel--join::before {
  background-image: url("assets/background-pink.png");
  /* Fade only the backdrop into Schedule; retain the photos and copy. */
  mask-image: linear-gradient(#000 calc(100% - clamp(120px, 12vw, 180px)), transparent);
}

.home-page .about__intro {
  position: absolute;
  top: 40%;
  left: 9.722%;
  width: 40.278%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 20px;
  z-index: 1;
}

.home-page .about__intro .section-title { white-space: nowrap; }
.home-page .about__lead { font: 600 20px/22px var(--font-mincho); white-space: nowrap; }
.home-page .about__intro .view-more-link { margin-top: 3px; }
.home-page .about__photo { margin: 0; max-width: none; border-radius: 0; }
.home-page .about__photo--main {
  position: absolute;
  top: 19%;
  left: 50%;
  width: 44%;
  height: auto;
  object-fit: contain;
  mask-image: linear-gradient(#000 calc(100% - clamp(40px, 8vw, 100px)), transparent);
  z-index: 1;
}

.home-page .about__photo--sub {
  position: absolute;
  top: 0;
  left: 9.722%;
  width: 63.125%;
  height: auto;
  object-fit: contain;
  z-index: 3;
}

.home-page .about__join {
  position: absolute;
  top: 54.012%;
  left: 63.125%;
  width: 36.875%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  z-index: 4;
}

.home-page .about__join-title { font-size: 36px; line-height: 60px; white-space: nowrap; }
.home-page .about__join-lead { font: 600 20px/22px var(--font-mincho); white-space: nowrap; }
.home-page .about__join .view-more-link { margin-top: 15px; }

.home-page .schedule-wrap { padding: 64px 0 56px; background: #c6cedb; }
.home-page .schedule-card {
  height: 172px;
  gap: 0;
  background: #f9f6f2;
  border: 3px solid var(--color-accent-gold);
  border-radius: 10px;
  box-shadow: 0 1px 4px #0000001a, 0 1px 1px #0003;
  transition: box-shadow 300ms ease;
}
.home-page .schedule-card:is(:hover, :focus-visible) {
  transform: none;
  background-color: #f9f6f2;
  box-shadow: var(--shadow-document);
}
.home-page .schedule-card:focus-visible { outline: 3px solid var(--color-accent-blue); outline-offset: 5px; }
.home-page .schedule-card:active { transform: none; }
.home-page .schedule-card__text { flex: 1; padding: 0 40px; min-width: 0; }
.home-page .schedule-card__title { font-size: 36px; line-height: 60px; }
.home-page .schedule-card__lead { font: 600 20px/22px var(--font-mincho); white-space: nowrap; }
.home-page .schedule-card__media { width: 60%; flex-shrink: 0; overflow: hidden; }
.home-page .schedule-card__thumb { width: 100%; height: 100%; object-position: center 12.9%; transition: transform 500ms ease; }
.home-page .schedule-card:is(:hover, :focus-visible) .schedule-card__thumb { transform: scale(1.05); }

.home-page .faq {
  position: relative;
  overflow-x: clip;
  min-height: 604px;
  padding: 72px 0 117px;
  background: linear-gradient(180deg, #c6cedb, #e3e7e9 16%, #dde2e7 86%, #b4c3d4);
}
.home-page .faq::before {
  content: "";
  position: absolute;
  top: -128px;
  right: 0;
  width: min(628px, 100%);
  height: 368px;
  background: url("assets/decoration-schedule-river-sakura.png") center / contain no-repeat;
  pointer-events: none;
}
.home-page .faq .container { width: calc(100% - 256px); max-width: 1184px; position: relative; }
.home-page .faq .section-title { font-family: var(--font-mincho); font-weight: 600; }
.home-page .qa-item { padding: 24px 0 32px; border-color: var(--color-border-strong); }
.home-page .qa-item:last-child { padding-bottom: 0; }
.home-page .qa-item__question { padding: 0; min-height: 40px; align-items: flex-end; }
.home-page .qa-item__text { font-weight: 400; line-height: 40px; }
.home-page .qa-badge--q { font-weight: 400; }
.home-page .qa-item__toggle { width: 40px; height: 40px; }
.home-page .qa-item__answer { padding: 16px 0 0; }
.home-page .qa-item__answer-wrap { visibility: hidden; transition: grid-template-rows 300ms ease-out, visibility 0s linear 300ms; }
.home-page .qa-item.is-open .qa-item__answer-wrap { visibility: visible; transition-delay: 0s; }

.home-page .site-footer { overflow: visible; }
.home-page .site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  top: -126px;
  width: 100%;
  height: 260px;
  background: url("assets/decoration-faq-river-sakura.png") center / cover no-repeat;
  pointer-events: none;
}



@media (min-width: 901px) and (max-width: 1300px) {
  .home-page .container { width: calc(100% - 120px); }
  .home-page .news-item__title { font-size: clamp(16px, 1.667vw, 24px); white-space: normal; }
  .home-page .about .section-title,
  .home-page .about__join-title { font-size: 2.5vw; line-height: 4.167vw; }
  .home-page .about__lead,
  .home-page .about__join-lead { font-size: 1.389vw; }
  .home-page .about__intro { gap: 1.389vw; }
  .home-page .about .view-more-link { font-size: 1.389vw; height: auto; line-height: 1.5; }
  .home-page .schedule-card__lead { font-size: 16px; }
}

@media (max-width: 900px) {
  .home-page .container,
  .home-page .faq .container { width: calc(100% - 40px); }
  .home-page .section-title { font-size: 28px; line-height: 1.7; }
  .home-page .hero { aspect-ratio: 1440 / 800; }
  .home-page .hero__title { top: 18%; right: 13%; font-size: clamp(18px, 3.2vw, 28px); }
  .home-page .hero__eyebrow { top: 13%; right: 8%; font-size: clamp(10px, 1.6vw, 14px); }
  .home-page .news { min-height: 0; padding: 48px 0 72px; background-size: 100% 100%; }
  .home-page .chip-row { gap: 12px; }
  .home-page .news-item__main { flex-wrap: wrap; gap: 10px 12px; }
  .home-page .news-item__date { flex-basis: auto; font-size: 16px; }
  .home-page .news-item__title { order: 1; width: 100%; white-space: normal; font-size: 18px; line-height: 1.8; }
  .home-page .about { display: block; aspect-ratio: auto; padding: 0; }
  .home-page .about__panel { position: relative; top: auto; height: auto; display: flex; flex-direction: column; }
  .home-page .about__panel--intro { padding: calc(clamp(240px, 40vw, 320px) + 56px) 20px 0; }
  .home-page .about__panel--join { margin-top: -160px; padding: calc(clamp(280px, 58vw, 460px) + 24px) 20px 48px; }
  .home-page .about__intro,
  .home-page .about__join { position: relative; top: auto; left: auto; width: 100%; padding: 0; gap: 16px; }
  .home-page .about__intro { order: 0; }
  .home-page .about__photo--main { position: relative; top: auto; left: auto; order: 1; width: min(68%, 460px); height: auto; max-height: none; object-fit: contain; margin: 24px 0 0 auto !important; }
  .home-page .about__join { order: 2; margin-top: 0; }
  .home-page .about__photo--sub { position: relative; top: auto; left: auto; order: 3; width: min(100%, 720px); height: auto; align-self: center; margin: 0 0 -48px !important; }
  .home-page .about__intro .section-title,
  .home-page .about__join-title { font-size: 25px; line-height: 1.6; white-space: normal; }
  .home-page .about__lead,
  .home-page .about__join-lead { white-space: normal; font-size: 16px; line-height: 1.8; }
  .home-page .schedule-wrap { padding: 40px 0; }
  .home-page .schedule-card { height: auto; align-items: stretch; }
  .home-page .schedule-card__text { padding: 20px; }
  .home-page .schedule-card__title { font-size: 28px; line-height: 1.6; }
  .home-page .schedule-card__lead { font-size: 14px; white-space: normal; line-height: 1.8; }
  .home-page .schedule-card__media { width: 100%; height: 140px; flex: none; }
  .home-page .schedule-card__thumb { width: 100%; height: 100%; }
  .home-page .faq { padding: 48px 0 120px; min-height: 0; }
  .home-page .faq::before { top: -40px; width: 45%; height: 180px; }
  .home-page .qa-item__question { align-items: center; gap: 12px; }
  .home-page .qa-item__text { font-size: 18px; line-height: 1.8; }
  .home-page .qa-item__answer-text { font-size: 16px; }
  .home-page .site-footer::after { top: -72px; height: 120px; }
}

/* JS adds the pending state only when animation can run. */
.home-page [data-reveal].reveal-pending {
  opacity: 0;
  transform: translate3d(0, 72px, 0);
}
.home-page [data-reveal].reveal-pending.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-property: opacity, transform;
  transition-duration: 700ms, 1600ms;
  transition-timing-function: ease, cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll progress controls each layer, without timed delays or layout shifts. */
.home-page .about__panel.scroll-reveal { opacity: 1; transform: none; transition: none; }
.home-page .about__panel.scroll-reveal::before {
  opacity: var(--about-bg-opacity, 0);
  transform: translateY(var(--about-bg-y, 72px));
}
.home-page .about__panel.scroll-reveal > .about__photo {
  opacity: var(--about-photo-opacity, 0);
  transform: translateY(var(--about-photo-y, 56px));
}
.home-page .about__panel.scroll-reveal > :is(.about__intro, .about__join) {
  opacity: var(--about-text-opacity, 0);
  transform: translateY(var(--about-text-y, 36px));
}
.home-page .about__panel.scroll-reveal > .sakura-drift { opacity: calc(0.7 * var(--about-bg-opacity, 0)); }
.home-page .about__panel.scroll-reveal > :is(.about__intro, .about__join):focus-within { opacity: 1; transform: none; }
.home-page .qa-list.reveal-pending { transform: translateY(24px); }
.home-page .qa-list.reveal-pending.is-visible {
  transition-duration: 300ms, 800ms;
}
.home-page .qa-list.reveal-pending:focus-within { opacity: 1; transform: none; transition: none; }

/* The local petal layer sits between each panel's backdrop and its content. */
.home-page .about__panel::before { z-index: 0; }
.home-page .about__intro,
.home-page .about__photo--main { z-index: 2; }
.home-page .hero__bg { z-index: 2; }
.home-page .hero__eyebrow,
.home-page .hero__title,
.home-page .news > .container,
.home-page .schedule-wrap > .container,
.home-page .faq > .container { position: relative; z-index: 2; }
.home-page .hero__eyebrow,
.home-page .hero__title { position: absolute; }
.home-page .faq::before,
.home-page .site-footer::after { z-index: 0; }

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-copy-pending .hero__char,
  .home-page .hero-copy-pending .hero__eyebrow { opacity: 1; animation: none; transform: none; }
  .home-page [data-reveal].reveal-pending { opacity: 1; transform: none; transition: none; }
  .home-page .schedule-card,
  .home-page .schedule-card__text,
  .home-page .schedule-card__thumb { transition: none; }
  .home-page .schedule-card:is(:hover, :focus-visible),
  .home-page .schedule-card:is(:hover, :focus-visible) .schedule-card__text,
  .home-page .schedule-card:is(:hover, :focus-visible) .schedule-card__thumb { transform: none; }
}

/* Phone copy is readable immediately, including after rotating/resizing. */
@media (max-width: 767px) {
  .home-page .hero { aspect-ratio: 4 / 3; }
  .home-page .hero__title { top: 19%; right: 14%; font-size: clamp(18px, 4.6vw, 28px); }
  .home-page .hero-copy-pending .hero__char,
  .home-page .hero-copy-pending .hero__eyebrow { opacity: 1; animation: none; transform: none; }
}

@media (max-width: 767px) {
  .home-page .news { padding-bottom: 112px; }
}

/* Section 1 / B: the three visible cloud shapes use the supplied PNGs.
   Their slots scale from the 1440px Figma canvas; the lower pair stays
   anchored to the news/About boundary when the list wraps. */
.home-page .cloud-parallax {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, var(--cloud-offset, 0px), 0);
}
.home-page .news__cloud {
  position: relative;
  width: 100%;
  z-index: 0;
  display: block;
  max-width: none;
  height: auto;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}
.home-page .cloud-parallax--top {
  left: 79.791667%;
  top: 3.472222vw;
  width: 20.208333vw;
  --decoration-x: 122.4px;
}
.home-page .about-shell { position: relative; margin-top: -6vw; padding-top: 6vw; overflow: clip; pointer-events: none; }
.home-page .about-shell > * { pointer-events: auto; }
.home-page .cloud-parallax--left { left: -3.75vw; top: -3.263889vw; width: 25.32vw; --decoration-x: -122.4px; }
.home-page .cloud-parallax--right { left: 65.324514%; top: 3.472222vw; width: 28.298611vw; --decoration-x: 122.4px; }
.home-page .news__cloud.decoration-pending { opacity: 0; transform: translate(var(--decoration-x), 48px); }
.home-page .news__cloud.decoration-pending.is-decoration-visible {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease 120ms, transform 1400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}
.home-page .schedule-wrap > .container.reveal-pending { transform: translateY(40px); }
.home-page .schedule-wrap > .container.reveal-pending.is-visible {
  transform: none;
  transition-duration: 400ms, 1000ms;
  transition-delay: 160ms;
}
.home-page .faq.decoration-pending::before,
.home-page .site-footer.decoration-pending::after { opacity: 0; transform: translate(80px, 56px); }
.home-page .site-footer.decoration-pending::after { transform: translateY(56px); }
.home-page .faq.decoration-pending.is-decoration-visible::before,
.home-page .site-footer.decoration-pending.is-decoration-visible::after {
  opacity: 1;
  transform: none;
  transition: opacity 600ms ease 120ms, transform 1600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}
@media (prefers-reduced-motion: reduce) {
  .home-page .news__cloud.decoration-pending { opacity: 1; transform: none; transition: none; }
  .home-page .faq.decoration-pending::before,
  .home-page .site-footer.decoration-pending::after { opacity: 1; transform: none; transition: none; }
  .home-page .schedule-wrap > .container.reveal-pending { transform: none; transition: none; }
}


/* In the stacked layout, reveal each layer once as it reaches the viewport. */
.home-page .about__panel.stacked-reveal::before { opacity: 0; transform: translateY(40px); }
.home-page .about__panel.stacked-reveal.is-background-visible::before {
  opacity: 1;
  transform: none;
  transition: opacity 450ms ease, transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.home-page .about__panel.stacked-reveal > :is(.about__photo, .about__intro, .about__join) { opacity: 0; transform: translateY(32px); }
.home-page .about__panel.stacked-reveal > .is-layer-visible {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.home-page .about__panel.stacked-reveal > .sakura-drift { opacity: 0; }
.home-page .about__panel.stacked-reveal.is-background-visible > .sakura-drift { opacity: 0.7; transition: opacity 450ms ease; }
.home-page .about__panel.stacked-reveal > :is(.about__intro, .about__join):focus-within { opacity: 1; transform: none; }

/* Balance intermediate widths without the tall phone layout's empty areas. */
@media (min-width: 601px) and (max-width: 900px) {
  .home-page .about__panel { display: grid; align-items: center; gap: 24px; }
  .home-page .about__panel--intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding: clamp(190px, 25vw, 225px) 24px 0; }
  .home-page .about__intro { grid-area: 1 / 1; }
  .home-page .about__photo--main { grid-area: 1 / 2; width: 100%; margin: 0 !important; }
  .home-page .about__panel--join { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-top: -120px; padding: clamp(220px, 28vw, 260px) 24px 40px; }
  .home-page .about__join { grid-area: 1 / 2; }
  .home-page .about__photo--sub { grid-area: 1 / 1; width: min(130%, 560px); margin: 0 0 0 -24px !important; }
}