/* ============================================================
   ALEEZA AICHI — Rebranding Site
   Figma: PC 14316-605 / SP 14316-1012 / SP Nav 10013-1998
   PC styles are the default; SP overrides live in the
   single @media (max-width: 767px) block at the bottom.
============================================================ */

/* ===== Design Tokens ===== */
:root {
  --purple: #462777;
  --purple-dark: #2a1747;
  --platinum: #eaeef1;
  --platinum-light: #ece9f1;
  --breeze: #78e7d5;
  --breeze-alt: #7ee6d6;
  --white: #fffff9;

  --font-inter: "Inter", sans-serif;
  --font-noto: "YakuHanJP", "Noto Sans JP", sans-serif;
  --font-instrument: "Instrument Sans", sans-serif;

  --nav-height: 80px;
}

/* ===== Reset / Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--purple);
  color: var(--platinum);
  font-family: var(--font-inter);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}
a {
  text-decoration: none;
  color: inherit;
}
ul,
ol {
  list-style: none;
}
button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Figma text-box-trim (cap height trim) — used on display text */
.cap-trim {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Responsive visibility helpers */
.sp-only {
  display: none !important;
}

/* ===== Section Heading (120px / SP 64px) ===== */
.section-title {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(64px, 8.33vw, 120px);
  line-height: normal;
  color: var(--platinum);
}

/* ===== Section Label ("Brand Statement" / "New Team Name") ===== */
.section-label {
  position: relative;
  display: block;
  height: 24px;
  overflow: hidden;
  width: 180px;
  text-align: center;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 20px;
  color: var(--platinum);
  line-height: 24px;
}
/* sliding band that fills from the left (static here) */
.section-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 100%;
  height: 24px;
  background: var(--platinum);
  transform: translateY(-50%);
}

/* ===========================
   HEADER / PC NAVIGATION
=========================== */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
  /* hidden over the KV — fades in once scrolled past it */
  opacity: 0;
  transition: opacity 0.4s ease;
}
#site-header.is-visible {
  opacity: 1;
}
#site-header:not(.is-visible) .nav-inner {
  pointer-events: none;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 32px 48px;
  pointer-events: auto;
}

.pc-nav {
  display: flex;
  gap: 40px;
  align-items: center;
}

.pc-nav a {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--platinum);
  transition: color 0.25s;
  white-space: nowrap;
}

/* On light sections nav text goes purple */
#site-header.on-light .pc-nav a {
  color: var(--purple);
}

/* On logo/movie sections nav text gets a dark-purple outline with white fill */
#site-header.on-outlined .pc-nav a {
  color: var(--platinum);
  -webkit-text-stroke: 1px #2a1747;
  paint-order: stroke fill;
}

/* ===========================
   SP HAMBURGER BUTTON
=========================== */
.hamburger-btn {
  display: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 200;
  width: 60px;
  height: 60px;
  padding: 0;
  /* hidden over the KV — fades in once scrolled past it */
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  pointer-events: none;
}
.hamburger-btn.is-visible,
.hamburger-btn.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.hamburger-btn .btn-open-icon,
.hamburger-btn .btn-bg {
  position: absolute;
  inset: 0;
  width: 60px;
  height: 60px;
  max-width: none;
}
.hamburger-btn .btn-bg {
  display: none;
}
.hamburger-btn.is-open .btn-open-icon {
  display: none;
}
.hamburger-btn.is-open .btn-bg {
  display: block;
}

/* ===========================
   SP NAVIGATION OVERLAY
=========================== */
#sp-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--purple);
  z-index: 150;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#sp-nav.is-open {
  opacity: 1;
  pointer-events: auto;
}
.sp-nav-symbol {
  position: absolute;
  left: -75px;
  top: 50px;
  width: 794px;
  height: 717px;
  max-width: none;
  pointer-events: none;
}
.sp-nav-list {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 60px 32px;
}
.sp-nav-list a {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 32px;
  color: var(--platinum);
}

/* ===========================
   KV — always fills 100dvh.
   --kv-u is "one design pixel": the Figma KV was authored
   at 900px inner height on a 1440px artboard, so everything
   inside scales by min(height ratio, width ratio) and keeps
   its proportions on any device height.
=========================== */
#kv {
  position: relative;
  z-index: 1; /* keep scroll indicator above the next section */
  padding: 20px 20px 0;
  --kv-u: min(calc((100dvh - 20px) / 900), calc(100vw / 1440));
}

.kv-inner {
  position: relative;
  background: var(--platinum);
  height: calc(100vh - 20px); /* fallback */
  overflow: hidden;
}

.kv-symbol {
  position: absolute;
  /* bottom: calc(var(--kv-u) * 20); */
  top: 50%;
  transform: translateY(-50%);
  right: calc(var(--kv-u) * -46);
  width: calc(var(--kv-u) * 996);
  height: calc(var(--kv-u) * 900);
  max-width: none; /* override global img { max-width: 100% } */
  pointer-events: none;
}

.kv-symbol-pc {
  display: block;
}
.kv-symbol-sp {
  display: none;
}

.kv-draw-path {
  fill: none;
  stroke-dasharray: 0 0.334 0 0.333 0 0.333;
  transition: stroke-dasharray 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s;
}
body.kv-ready .kv-draw-path {
  stroke-dasharray: 0.334 0 0.333 0 0.333 0;
}

.kv-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - var(--kv-u) * 9.5));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--kv-u) * 64);
}

.kv-logo-mark {
  width: calc(var(--kv-u) * 215);
  height: calc(var(--kv-u) * 258);
}

.kv-tagline {
  width: calc(var(--kv-u) * 832);
  height: auto;
  max-width: none;
  opacity: 0;
  transition: opacity 2.4s ease;
}
body.kv-ready .kv-tagline {
  opacity: 1;
}

/* Straddles the KV bottom edge (Figma: 23.5px overflow) */
.kv-scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--kv-u) * 66);
  height: calc(var(--kv-u) * 81.5);
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--kv-u) * 20);
  transition: opacity 0.3s;
}
.kv-scroll:hover {
  opacity: 0.8;
}
.kv-scroll span {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: calc(var(--kv-u) * 24);
  color: var(--purple);
  line-height: 1.2;
  animation: kv-scroll-text-shift 2.5s ease-in-out infinite;
}
.kv-scroll-line {
  width: 1px;
  height: calc(var(--kv-u) * 40);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  transform: translateZ(0);
}
.kv-scroll-line::before,
.kv-scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--purple);
  transform: translateY(-100%);
  animation: kv-line-drop 2.5s ease-in-out infinite;
  will-change: transform;
}
.kv-scroll-line::before {
  animation-delay: -1.25s;
}
@keyframes kv-line-drop {
  /* テキストが押し出した後に棒が登場 */
  0% {
    transform: translateY(-100%);
    opacity: 1;
  }
  10% {
    transform: translateY(-100%);
    opacity: 1;
  }
  30% {
    transform: translateY(0%);
    opacity: 1;
  }
  48% {
    transform: translateY(0%);
    opacity: 1;
  }
  /* ふわっと消えながら下へ */
  65% {
    transform: translateY(45%);
    opacity: 0;
  }
  75% {
    transform: translateY(100%);
    opacity: 0;
  }
  /* 間（残り25%はアイドル） */
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes kv-scroll-text-shift {
  /* テキストが先に下がって棒を押し出す */
  0% {
    transform: translateY(0px);
  }
  18% {
    transform: translateY(5px);
  }
  48% {
    transform: translateY(5px);
  }
  /* 棒が消えたらテキスト戻る */
  68% {
    transform: translateY(0px);
  }
  /* 間 */
  100% {
    transform: translateY(0px);
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .kv-scroll-line {
    width: 0.5px;
  }
}

/* ===========================
   STORY + IDENTITY (light bg)
=========================== */
#story-identity {
  position: relative;
  background: var(--purple);
  padding: 0 20px;
  margin-top: -2px;
}

/* Story scroll track */
.story-scroll-track {
  position: relative;
  background: var(--platinum);
  padding: clamp(80px, 12.5vw, 180px) 0;
}

.story-sticky-pane {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Identity-only area below the story track */
.story-identity-inner {
  background: var(--platinum);
  padding: clamp(80px, 12.5vw, 180px) 0 clamp(100px, 16.67vw, 240px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
}

/* Story */
.story-header {
  display: flex;
  gap: clamp(40px, 18.37vw, 226px);
  align-items: flex-start;
  color: var(--purple);
  max-width: calc(100% - 80px);
  width: 1062px;
}

.story-title {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(64px, 8.33vw, 120px);
  line-height: normal;
  color: var(--purple);
  flex-shrink: 0;
}

/* Story title SVG stroke-draw animation */
.story-title.has-svg-anim {
  line-height: 0;
  font-size: 0;
}

.story-title-svg {
  display: block;
  overflow: visible;
}

.story-char {
  fill: transparent;
  stroke: var(--purple);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition:
    stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1) var(--draw-delay, 0s),
    fill 0.4s ease var(--fill-delay, 1.2s);
}

.story-title-svg.is-animated .story-char {
  stroke-dashoffset: 0;
  fill: var(--purple);
}

/* Section title SVG draw animation — all non-Story section headings */
.section-title-svg {
  display: block;
  overflow: visible;
  width: fit-content !important;
}

.section-char {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition:
    stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1) var(--draw-delay, 0s),
    fill 0.4s ease var(--fill-delay, 1.2s);
}

.section-title-svg.is-animated .section-char {
  stroke-dashoffset: 0;
  fill: currentColor;
}

.identity-title.has-svg-anim,
.logo-title.has-svg-anim,
.color-title.has-svg-anim,
.mascot-title.has-svg-anim,
.schedule-title.has-svg-anim,
.movie-title.has-svg-anim {
  font-size: 0;
  line-height: 0;
}

.uniform-title-v.has-svg-anim {
  font-size: 0;
  line-height: 0;
  writing-mode: initial;
  transform: none;
  overflow: visible;
}

/* Story text scroll-color animation */
.scroll-char {
  display: inline;
  color: rgba(70, 39, 119, 0.22);
  transition: color 0.12s ease;
}

.scroll-char.is-lit {
  color: var(--purple);
}

/* club-name-body: white text on dark background */
.club-name-body .scroll-char,
.color-body .scroll-char {
  color: rgba(236, 233, 241, 0.2);
}
.club-name-body .scroll-char.is-lit,
.color-body .scroll-char.is-lit {
  color: var(--platinum-light);
}

.story-body {
  flex: 1;
  min-width: 0;
  max-width: 517px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* invisible spacer reserving one title line (Figma ghost text) */
.story-body .ghost {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(64px, 8.33vw, 120px);
  line-height: normal;
  opacity: 0;
  width: 100%;
}

.story-text {
  font-family: var(--font-noto);
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  color: var(--purple);
  width: 100%;
}

/* Identity */
.identity-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 6.94vw, 100px);
  align-items: center;
  width: min(926px, calc(100vw - 80px));
}

.identity-pattern {
  position: absolute;
  left: 50%;
  top: -68px;
  width: clamp(926px, 97.22vw, 1400px);
  height: calc(100% + 125px);
  pointer-events: none;
  transform: translateX(-50%);
}
.identity-pattern svg,
.identity-pattern-sp svg {
  width: 100%;
  height: 100%;
  display: block;
}
.identity-pattern .draw-path,
.identity-pattern-sp .draw-path {
  transition-duration: 4s;
}
.identity-pattern-sp {
  display: none;
}

.identity-title {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(64px, 8.33vw, 120px);
  color: var(--purple);
  text-align: center;
  line-height: normal;
  position: relative;
  z-index: 1;
}

.identity-blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 9.72vw, 140px);
  align-items: center;
  width: 100%;
}

/* Mission / Vision shared */
.mv-block {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.26vw, 47px);
  align-items: center;
  width: 100%;
}

.mv-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  color: var(--purple);
  text-align: center;
  width: 171px;
}
.mv-header .num {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 14px;
}
.mv-header .en-title {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(28px, 2.78vw, 40px);
  line-height: normal;
}
.mv-header .ja-sub {
  font-family: var(--font-noto);
  font-weight: 700;
  font-size: 16px;
  line-height: 2;
}

/* statement rows: one line on PC, stacked (and allowed to
   overflow-center) on SP */
.mv-statement {
  display: flex;
  column-gap: 4px;
  row-gap: 16px;
  align-items: center;
  justify-content: center;
}
.mv-row {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.mv-statement .plain {
  font-family: var(--font-noto);
  font-weight: 700;
  font-size: clamp(26px, 3.33vw, 48px);
  line-height: 1.5;
  color: var(--purple);
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.keyword-highlight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--purple);
  padding: 16px 8px;
  /* Sweep-in animation: initially clipped from the left, reveals left→right */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.keyword-highlight.is-active {
  clip-path: inset(0 0% 0 0);
}
.keyword-highlight span {
  font-family: var(--font-noto);
  font-weight: 700;
  font-size: clamp(26px, 3.33vw, 48px);
  line-height: 1.5;
  color: var(--platinum);
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ===========================
   SPLIT-CHAR FLICKER ANIMATION (Club Name)
=========================== */
.split-char {
  display: inline-flex;
  min-width: 0.2em;
  min-height: 0.2em;
  opacity: 0;
}

/* ===========================
   BRAND STATEMENT WIPE ANIMATION
=========================== */
@keyframes brand-wipe {
  0% {
    transform: translateX(-105%);
  }
  42% {
    transform: translateX(0%);
  }
  58% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(105%);
  }
}

.wipe-anim {
  position: relative;
  overflow: hidden;
}

.wipe-anim__content {
  position: relative;
  z-index: 1;
  opacity: 0;
}

/* Bar at centre: snap text to purple immediately — visible on white bar */
.wipe-anim.is-mid .wipe-anim__content {
  opacity: 1;
}

.wipe-anim.is-mid:not(.is-revealed) .wipe-anim__content {
  color: var(--purple);
  transition: none;
}

/* Bar exiting: smoothly fade text from purple to its natural white */
.wipe-anim.is-mid.is-revealed .wipe-anim__content {
  transition: color 0.35s ease;
}

.wipe-anim__bg {
  position: absolute;
  inset: -2px 0;
  background: var(--platinum);
  transform: translateX(-105%);
  pointer-events: none;
}

.wipe-anim.is-animating .wipe-anim__bg {
  animation: brand-wipe 0.75s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* Vision-specific sizes / gaps */
.vision-block {
  gap: clamp(32px, 3.33vw, 48px);
}
.vision-content {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.33vw, 48px);
  align-items: center;
  width: 100%;
}
.vision-content .mv-statement .plain {
  font-size: clamp(26px, 3.75vw, 54px);
}
.vision-content .keyword-highlight span {
  font-size: clamp(26px, 3.33vw, 48px);
}

.vision-text {
  font-family: var(--font-noto);
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  color: var(--purple);
  width: min(626px, 100%);
}

/* ===========================
   DECORATIVE LINE DRAWINGS
   (Figma wave vectors — slots are
   built and positioned by main.js)
=========================== */
body {
  position: relative;
}

#page-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.wave-slot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wave-slot svg {
  flex: none;
  display: block;
}

/* Scroll-triggered line drawing */
.draw-path {
  stroke-dasharray: 1;
  stroke-dashoffset: var(--wave-hidden-offset, 1);
  transition: stroke-dashoffset 3.5s cubic-bezier(0.33, 0, 0.2, 1);
}
.is-drawn .draw-path {
  stroke-dashoffset: 0;
}
/* Loop cycles use a slightly faster transition than the initial draw */
.wave-slot.is-looping .draw-path {
  transition-duration: 2.5s;
}

@media (prefers-reduced-motion: reduce) {
  .draw-path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* SP / tablet: stroke-dashoffset is not GPU-composited and drops on iOS Safari.
   clip-path sweep (GPU composited) gives the drawing feel; opacity handles fade. */
@media (max-width: 1024px) {
  .wave-slot {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 2.2s cubic-bezier(0.33, 0, 0.2, 1);
  }
  .wave-slot.is-drawn {
    clip-path: inset(0 0% 0 0);
  }
  .wave-slot .draw-path {
    stroke-dashoffset: 0 !important;
    opacity: 0;
    transition: opacity 0.6s ease !important;
    transition-delay: 0s !important;
  }
  .wave-slot.is-drawn .draw-path {
    opacity: 0.3;
  }
}

/* ===========================
   BRAND STATEMENT
=========================== */
#brand-statement {
  position: relative;
  overflow: hidden;
  padding-top: clamp(100px, 16.67vw, 240px);
}

.brand-statement-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.44vw, 64px);
  align-items: center;
  margin: 0 auto;
  width: min(1062px, calc(100vw - 80px));
}

.brand-statement-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(32px, 3.89vw, 56px);
  color: var(--platinum-light);
  line-height: 1.21; /* Figma "normal" (68px line box) */
  text-align: center;
  padding-left: 32px;
  width: min(846px, 100%);
}
/* SP staggered 3-line variant (kept centered, spaces preserved) */
.brand-statement-text--sp {
  display: none;
  white-space: pre;
  font-family: var(--font-noto);
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--platinum-light);
  text-align: center;
}

/* ===========================
   CLUB NAME
=========================== */
#club-name {
  position: relative;
  overflow: hidden;
  padding-top: clamp(120px, 20.83vw, 300px);
}

.club-name-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.44vw, 64px);
  align-items: center;
  margin: 0 auto;
  width: min(1056px, calc(100vw - 80px));
}

.club-name-body-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5.56vw, 80px);
  align-items: center;
  width: min(848px, 100%);
}

.club-name-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  width: 100%;
}

.club-name-title {
  font-family: var(--font-instrument);
  font-weight: 600;
  font-size: clamp(64px, 8.61vw, 124px);
  color: var(--platinum-light);
  line-height: 1.21; /* Figma "normal" (151px line box) */
  white-space: nowrap;
}

.club-name-ja {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(18px, 2.78vw, 40px);
  color: var(--platinum-light);
  line-height: 1.2; /* Figma "normal" (48px line box) */
}

.club-name-body {
  font-family: var(--font-noto);
  font-weight: 400;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--platinum-light);
  width: 100%;
}

/* ===========================
   LOGO
=========================== */
#logo {
  position: relative;
  overflow: hidden;
  padding-top: clamp(120px, 20.83vw, 300px);
}

.logo-title {
  width: min(1280px, calc(100vw - 80px));
  margin: 0 auto 48px;
}

.logo-grid {
  display: flex;
  gap: 1px;
  width: min(1280px, calc(100vw - 80px));
  margin: 0 auto;
  will-change: transform;
}

.logo-card {
  position: relative;
  background: var(--platinum);
  overflow: hidden;
}

.logo-card--primary {
  flex: 0 0 min(640.5px, calc(50% - 0.5px));
  aspect-ratio: 1 / 1;
}

.logo-card--right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.logo-card--secondary,
.logo-card--tertiary {
  width: 100%;
  aspect-ratio: 2 / 1;
}

/* Card labels: primary stacks en/ja, secondary & tertiary are one row */
.logo-card-label {
  position: absolute;
  top: 26.5px;
  left: 29px;
  color: var(--purple);
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
.logo-card-label .en {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 30px;
  line-height: normal;
}
.logo-card-label .ja {
  font-family: var(--font-noto);
  font-weight: 700;
  font-size: 14px;
  line-height: 2;
}

.logo-card--secondary .logo-card-label,
.logo-card--tertiary .logo-card-label {
  left: 31px;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.logo-card--secondary .logo-card-label .en,
.logo-card--tertiary .logo-card-label .en {
  font-size: 18px;
}
.logo-card--secondary .logo-card-label .ja,
.logo-card--tertiary .logo-card-label .ja {
  font-size: 12px;
}

.logo-card-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.logo-card--primary .logo-card-img {
  width: 263.3px;
  height: 316.3px;
  margin-top: 11.9px;
}
.logo-card--secondary .logo-card-img {
  width: 284.7px;
  height: 110.5px;
  margin-top: 18.8px;
}
.logo-card--tertiary .logo-card-img {
  width: 143.6px;
  height: 129.8px;
  margin-top: 1.2px;
}

/* Logo meaning */
.logo-meaning {
  width: min(1058px, calc(100vw - 80px));
  margin: 100px auto 0;
  display: flex;
  flex-direction: column;
  gap: 66px;
  align-items: flex-start;
}

.logo-meaning-title {
  font-family: var(--font-noto);
  font-weight: 700;
  font-size: clamp(28px, 3.06vw, 44px);
  line-height: 1.5;
  color: var(--platinum);
}

.logo-meaning-layout {
  display: flex;
  gap: clamp(40px, 8.33vw, 120px);
  align-items: flex-start;
  width: 100%;
}

.logo-meaning-img-box {
  width: 371px;
  height: 371px;
  flex-shrink: 0;
  border: 1px solid var(--efeff-0, #efeff0);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo-meaning-img {
  width: 137px;
}

.logo-meaning-items {
  flex: 1;
  padding-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.logo-meaning-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logo-meaning-item-hd {
  display: flex;
  gap: 12px;
  align-items: center;
}

.logo-meaning-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 33px;
  background: var(--platinum);
  border-radius: 50%;
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 15px;
  color: var(--purple);
  flex-shrink: 0;
}

.logo-meaning-item-title {
  font-family: var(--font-noto);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--platinum);
  flex: 1;
}

.logo-meaning-item-text {
  font-family: var(--font-noto);
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--platinum);
}

.logo-meaning-summary {
  font-family: var(--font-noto);
  font-weight: 700;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--platinum);
}

/* wipe-anim inside logo-meaning-item: maintain flex column layout */
.logo-meaning-item .wipe-anim__content,
.logo-meaning-summary .wipe-anim__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===========================
   COLOR
=========================== */
#color {
  position: relative;
  overflow: hidden;
  padding-top: clamp(80px, 13.89vw, 200px);
}

.color-inner {
  position: relative;
  z-index: 1;
  width: min(1054px, calc(100vw - 80px));
  margin: 0 auto;
}

.color-title {
  margin-bottom: 64px;
}

.color-content {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: flex-end;
  width: 100%;
}

.color-swatches {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ===========================
   COLOR SWATCH APPEAR ANIMATION
=========================== */
.color-swatch--main,
.color-swatch--breeze,
.color-swatch--platinum-chip {
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
  transition: clip-path 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: clip-path;
}

.color-swatch--main.is-visible,
.color-swatch--breeze.is-visible,
.color-swatch--platinum-chip.is-visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.color-swatch--main {
  background: var(--purple);
  border: 1px solid var(--platinum-light);
  padding: 24px 32px 32px;
  width: 100%;
  height: 240px;
  display: flex;
  margin-bottom: -1px;
}

.color-swatch-row {
  display: flex;
  width: 100%;
  height: 120px;
}

.color-swatch--breeze {
  flex: 1;
  background: var(--breeze-alt);
  padding: 32px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.color-swatch--platinum-chip {
  flex: 1;
  background: var(--platinum);
  padding: 24px 32px 32px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.swatch-inner {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.swatch-name {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 28px;
  line-height: 2;
  color: var(--platinum-light);
}
.swatch-name--small {
  font-size: 24px;
}
.swatch-name--purple {
  color: var(--purple);
}
.swatch-specs {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  color: var(--platinum-light);
  width: 173px;
  align-self: flex-end;
}
.swatch-specs--purple {
  color: var(--purple);
}

/* BREEZE / PLATINUM chip: name and specs sit side by side on PC */
.color-swatch--breeze .swatch-inner,
.color-swatch--platinum-chip .swatch-inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.color-swatch--breeze .swatch-name,
.color-swatch--platinum-chip .swatch-name {
  align-self: flex-start;
}
.color-swatch--breeze .swatch-specs,
.color-swatch--platinum-chip .swatch-specs {
  align-self: center;
}

.color-body {
  font-family: var(--font-noto);
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--platinum);
}

/* ===========================
   UNIFORM
=========================== */
#uniform {
  position: relative;
  margin-top: 150px;
  height: clamp(542px, 70.52vw, 1015.5px);
}

.uniform-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: clamp(480px, 62.5vw, 900px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  pointer-events: none;
}
.uniform-bg picture {
  display: block;
  height: clamp(365px, 49vw, 708px);
  flex-shrink: 0;
}
.uniform-bg img {
  display: block;
  height: 100%;
  width: auto;
}

.uniform-title-v {
  position: absolute;
  left: calc(10% + 20px);
  top: 0;
  height: clamp(247px, 32.22vw, 464px);
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: clamp(64px, 8.33vw, 120px);
  line-height: normal;
  color: var(--platinum);
}
.uniform-title-h {
  display: none;
}

.uniform-photo {
  position: absolute;
  top: clamp(86px, 11.18vw, 161px);
  left: 50%;
  transform: translateX(calc(-50% + clamp(58px, 7.53vw, 108.5px)));
  width: clamp(567px, 73.82vw, 1063px);
  height: clamp(309px, 40.28vw, 580px);
  overflow: hidden;
}
.uniform-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uniform-text {
  position: absolute;
  top: clamp(422px, 54.97vw, 791.5px);
  left: calc(8.33% + 73px);
  width: clamp(217px, 28.19vw, 406px);
  font-family: var(--font-noto);
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--platinum);
}

/* ===========================
   MASCOT
=========================== */
#mascot {
  position: relative;
  padding-top: 300px;
}

.mascot-content {
  position: relative;
  z-index: 1;
  width: min(1054px, calc(100vw - 80px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--platinum);
}
.mascot-text {
  font-family: var(--font-noto);
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
}

/* dotted swoosh, right side */
.mascot-graphics-wrap {
  position: absolute;
  top: 142px;
  left: 0;
  right: 0;
  height: 601px;
  overflow: visible;
  pointer-events: none;
}
.mascot-graphics {
  position: absolute;
  left: calc(50% + 6px);
  top: 0;
  width: 783px;
  overflow: visible;
}

/* FOOTPRINT WALKING ANIMATION */
.footprint {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.footprint.is-visible {
  opacity: 1;
}

/* ===========================
   SCHEDULE
=========================== */
#schedule {
  position: relative;
  overflow: hidden;
  padding-top: 500px;
}

.schedule-title {
  text-align: center;
  margin-bottom: 72px;
}

.schedule-title svg {
  margin: 0 auto;
}

.schedule-list {
  position: relative;
  z-index: 1;
  width: min(848px, calc(100vw - 80px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.schedule-divider {
  width: 100%;
  height: 1px;
  background: var(--purple-dark);
}

.schedule-item {
  display: flex;
  gap: 48px;
  align-items: center;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  color: var(--platinum);
}
.schedule-item .date {
  font-family: var(--font-inter);
  width: 140px;
  flex-shrink: 0;
}
.schedule-item .event {
  font-family: var(--font-noto);
  white-space: nowrap;
}

/* ===========================
   MOVIE
=========================== */
#movie {
  position: relative;
  overflow: hidden;
  padding: 200px 0 150px;
}

.movie-content {
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
  width: min(1062px, calc(100vw - 80px));
  margin: 0 auto;
}

.movie-main {
  display: flex;
  flex-direction: column;
  gap: 72px;
  align-items: center;
  width: 100%;
}

.movie-title {
  text-align: center;
  width: 100%;
}

.movie-title svg {
  margin: 0 auto;
}

.movie-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  overflow: hidden;
}

.movie-thumbnail-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.movie-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.3s ease;
  width: 150px;
}

.movie-thumbnail:hover .movie-play-icon {
  transform: translate(-50%, -50%) scale(1.15);
}

/* Modal open — hide header and hamburger */
body.modal-open #site-header,
body.modal-open .hamburger-btn {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Movie Modal */
.movie-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.movie-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.movie-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.movie-modal-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: 40px clamp(16px, 3vw, 40px);
}

.movie-modal-inner {
  position: relative;
  z-index: 1;
  /* 1062px = video width at 1440px design → 73.75vw scales proportionally */
  width: clamp(320px, 73.75vw, 1062px);
  flex-shrink: 0;
}

.movie-modal-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.movie-modal-video iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.movie-modal-close {
  position: absolute;
  top: clamp(16px, 5.56vw, 80px);
  right: clamp(16px, 5.56vw, 80px);
  width: clamp(24px, 3.33vw, 48px);
  height: clamp(24px, 3.33vw, 48px);
  z-index: 2;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.movie-modal-close svg {
  display: block;
  width: 100%;
  height: 100%;
}

.movie-modal-close:hover {
  opacity: 0.7;
}

.movie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-dark);
  border-radius: 4px;
  padding: 14px 28px;
  font-family: var(--font-noto);
  font-weight: 400;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--platinum);
  transition: all 0.3s ease !important;
}

.movie-btn:hover {
  opacity: 0.8 !important;
}

/* ===========================
   FOOTER
=========================== */
#site-footer {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

.footer-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: clamp(700px, 73.68vw, 1061px);
}

.footer-text-img {
  width: clamp(306px, 34.78vw, 501px);
  height: auto;
}

.footer-logo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: clamp(160px, 16.3vw, 235px);
}

.footer-logo {
  width: 112px;
  height: 133px;
}

.footer-copy {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 14px;
  color: var(--platinum);
  text-align: center;
}

/* SP footer wave layer (Figma _レイヤー_1, 369x186) */
.footer-waves {
  display: none;
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 369px;
  height: 186px;
  overflow: hidden;
  pointer-events: none;
}
.footer-waves .line-draw {
  position: absolute;
  display: block;
}
.footer-waves .line-draw svg {
  width: 100%;
  height: 100%;
  display: block;
}
.footer-waves .fw-1 {
  top: 7.41%;
  left: 0.81%;
  width: 84%;
  aspect-ratio: 310 / 31.83;
}
.footer-waves .fw-2 {
  top: 29.44%;
  left: 8.49%;
  width: 91.4%;
  aspect-ratio: 337.46 / 59.48;
}
.footer-waves .fw-3 {
  top: 65.33%;
  left: 0;
  width: 100%;
  aspect-ratio: 369 / 61.1;
}

/* ============================================================
   Nav breakpoint — switches to hamburger at 870px
============================================================ */
@media (max-width: 870px) {
  .pc-nav {
    display: none;
  }
  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #sp-nav {
    display: block;
  }
}

/* ============================================================
   SP (max-width: 767px)
============================================================ */
@media (max-width: 767px) {
  .sp-only {
    display: block !important;
  }
  .pc-only {
    display: none !important;
  }

  .section-title {
    font-size: 64px;
  }

  /* Section label */
  .section-label {
    font-size: 14px;
  }

  /* KV — fills 100dvh inside an 8px frame.
     SP design unit: 702px inner height on a 375px artboard.
     Width divisor = 375 (artboard width, NOT symbol SVG width). */
  #kv {
    padding: 8px 8px 0;
    --kv-u: min(calc((100svh - 8px) / 702), calc(100vw / 375)); /* svh: stable, no shift when URL bar hides */
  }
  .kv-inner {
    height: calc(100vh - 8px); /* fallback */
    height: calc(100svh - 8px); /* svh: stable, prevents KV height change from shifting sections below */
  }
  .kv-symbol {
    left: calc(var(--kv-u) * -83);
    top: auto;
    bottom: 0;
    transform: none;
    right: auto;
    width: calc(var(--kv-u) * 794);
    height: calc(100% + var(--kv-u) * 15);
  }
  .kv-symbol-pc {
    display: none;
  }
  .kv-symbol-sp {
    display: block;
  }
  .kv-content {
    transform: translate(-50%, -50%);
    gap: calc(var(--kv-u) * 48);
    width: calc(100% - 24px);
  }
  .kv-logo-mark {
    width: calc(var(--kv-u) * 101);
    height: calc(var(--kv-u) * 122);
    flex-shrink: 0;
  }
  .kv-tagline {
    width: calc(var(--kv-u) * 295);
  }
  .kv-scroll {
    bottom: calc(var(--kv-u) * 20);
    width: calc(var(--kv-u) * 38);
    height: calc(var(--kv-u) * 82);
  }
  .kv-scroll span {
    font-size: calc(var(--kv-u) * 14);
  }

  /* Story / Identity */
  #story-identity {
    padding: 0 8px;
  }
  /* .story-title-svg {
    width: fit-content !important;
  } */
  .story-sticky-pane {
    align-items: flex-start;
    padding: 80px 24px 100px;
  }
  .story-identity-inner {
    padding: 100px 24px 120px;
    margin-top: -120px;
  }
  .story-header {
    flex-direction: column;
    gap: 56px;
    width: 100%;
    max-width: 100%;
    align-items: start;
    justify-content: start;
  }
  .story-title {
    font-size: 64px;
  }
  .story-body {
    width: 100%;
  }
  .story-body .ghost {
    display: none;
  }
  .story-text {
    font-size: 14px;
  }

  .identity-section {
    width: 100%;
    gap: 100px;
  }
  .identity-pattern {
    display: none;
  }
  .identity-pattern-sp {
    display: block;
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(375px, 134vw, 1027px);
    height: calc(100% + 120px);
    pointer-events: none;
  }
  .identity-title {
    font-size: 64px;
    line-height: 1;
  }
  .identity-blocks {
    gap: 100px;
  }

  .mv-block {
    gap: 40px;
  }
  .mv-header {
    gap: 2px;
  }
  .mv-header .num {
    font-size: 12px;
  }
  .mv-header .en-title {
    font-size: 28px;
  }
  .mv-header .ja-sub {
    font-size: 14px;
  }

  .mv-statement {
    flex-direction: column;
  }
  .mv-statement .plain {
    font-size: 26px;
  }
  .keyword-highlight {
    padding: 12px 6px;
  }
  .keyword-highlight span {
    font-size: 26px;
  }

  .vision-block {
    gap: 40px;
  }
  .vision-content {
    gap: 32px;
  }
  .vision-content .mv-statement .plain {
    font-size: 26px;
  }
  .vision-content .keyword-highlight span {
    font-size: 26px;
  }
  .vision-text {
    font-size: 14px;
    width: 100%;
  }

  /* Brand Statement — vertically centered in an 812px band */
  #brand-statement {
    padding-top: 0;
    height: 812px;
    display: flex;
    align-items: center;
  }
  .brand-statement-content {
    gap: 33px;
    width: 310px;
  }
  .brand-statement-text {
    display: none;
  }
  .brand-statement-text--sp {
    display: block;
  }

  /* Club Name — flows right after the statement band */
  #club-name {
    padding: 0 32px;
  }
  .club-name-content {
    width: 100%;
    gap: 32px;
  }
  .club-name-body-wrap {
    width: 100%;
    gap: 48px;
  }
  .club-name-header {
    gap: 24px;
  }
  .club-name-title {
    font-size: 64px;
    line-height: 0.8;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .club-name-title .split-char:nth-child(7) {
    flex-basis: 100%;
    min-width: 0;
  }
  .club-name-ja {
    font-size: 18px;
  }
  .club-name-body {
    font-size: 14px;
  }

  /* Logo */
  #logo {
    padding: 200px 16px 0;
  }
  .logo-title {
    font-size: 64px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .logo-title svg {
    margin: 0 auto;
  }
  .logo-grid {
    flex-direction: column;
    width: 341px;
    gap: 1px;
  }
  .logo-card--primary {
    flex: none;
    width: 100%;
  }
  .logo-card--right {
    flex: none;
    width: 100%;
  }

  .logo-card-label {
    top: 16.5px;
    left: 18px;
  }
  .logo-card-label .en {
    font-size: 20px;
    margin-bottom: -2px;
  }
  .logo-card-label .ja {
    font-size: 12px;
  }
  .logo-card--secondary .logo-card-label,
  .logo-card--tertiary .logo-card-label {
    left: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .logo-card--secondary .logo-card-label .en,
  .logo-card--tertiary .logo-card-label .en {
    font-size: 16px;
  }
  .logo-card--secondary .logo-card-label .ja,
  .logo-card--tertiary .logo-card-label .ja {
    font-size: 10px;
  }

  .logo-card--primary .logo-card-img {
    width: 169px;
    height: 202px;
    margin-top: 14.5px;
  }
  .logo-card--secondary .logo-card-img {
    width: 169px;
    height: 65px;
    margin-top: 12px;
  }
  .logo-card--tertiary .logo-card-img {
    width: 95px;
    height: 85px;
    margin-top: 5px;
  }

  .logo-meaning {
    gap: 48px;
    width: 100%;
    max-width: calc(100% - 32px);
    margin: 64px auto 0;
  }
  .logo-meaning-title {
    font-size: 28px;
  }
  .logo-meaning-layout {
    flex-direction: column;
    gap: 48px;
    align-items: center;
  }
  .logo-meaning-img-box {
    width: 263px;
    height: 263px;
  }
  .logo-meaning-img {
    width: 150px;
  }
  .logo-meaning-items {
    padding-top: 0;
    gap: 32px;
    width: 100%;
  }
  .logo-meaning-item-title {
    font-size: 18px;
  }
  .logo-meaning-item-text {
    font-size: 14px;
    letter-spacing: 0.04em;
  }
  .logo-meaning-summary {
    font-size: 16px;
  }

  /* Color */
  #color {
    padding: 200px 31px 0;
  }
  #color .color-inner {
    width: 100%;
    margin: 0 auto;
  }
  .swatch-inner {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    flex: 1;
  }
  .color-inner {
    width: 311px;
    margin: 0;
  }
  .color-title {
    font-size: 64px;
    margin-bottom: 40px;
  }
  .color-content {
    gap: 48px;
    align-items: center;
  }
  .color-swatches {
    width: 263px;
  }
  .color-swatch--main {
    height: 304px;
    padding: 16px 24px 24px;
  }
  .color-swatch-row {
    flex-direction: column;
    height: auto;
  }
  .color-swatch--breeze {
    flex: none;
    height: 134px;
    padding: 12px 24px 24px;
    gap: 0;
    align-items: stretch;
  }
  .color-swatch--platinum-chip {
    flex: none;
    height: 134px;
    padding: 12px 24px 24px;
    gap: 0;
    align-items: stretch;
  }
  .color-swatch--breeze .swatch-inner,
  .color-swatch--platinum-chip .swatch-inner {
    flex-direction: column;
    justify-content: flex-start;
  }
  .color-swatch--breeze .swatch-name,
  .color-swatch--platinum-chip .swatch-name {
    align-self: flex-start;
  }
  .color-swatch--breeze .swatch-specs,
  .color-swatch--platinum-chip .swatch-specs {
    align-self: flex-end;
  }
  .swatch-name {
    font-size: 22px;
  }
  .swatch-name--small {
    font-size: 22px;
  }
  .swatch-specs {
    font-size: 12px;
  }
  .color-body {
    font-size: 14px;
  }

  /* Uniform */
  #uniform {
    margin-top: 140px;
    height: auto;
  }
  .uniform-bg {
    width: 100%;
    height: auto;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
  }
  .uniform-bg--back {
    /* top: 510px;
    left: 100%;
    transform: translateX(-50%); */
    position: absolute;
    top: 510px;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
  }
  .uniform-bg--back img {
    transform: rotate(0deg);
    /* width: 375px;
    height: 100%; */
    display: block;
    width: 100%;
    height: auto;
  }
  .uniform-title-v {
    display: none;
  }
  .uniform-title-h {
    display: block;
    position: relative;
    font-size: 64px;
    text-align: center;
    margin-bottom: 80px;
  }
  .uniform-photo {
    position: relative;
    top: 16px;
    left: auto;
    transform: none;
    width: 100%;
    height: 403px;
  }
  .uniform-photo.sp-secondary {
    top: 70px;
  }
  /* uniform.png holds front & back side by side — crop halves on SP */
  .uniform-photo img {
    position: absolute;
    top: 0;
    height: 100%;
    /* width: 196.85%; */
    max-width: none;
    object-fit: contain;
    object-position: center;
  }
  .uniform-photo--front img {
    left: 0;
  }
  .uniform-photo--back {
    margin-top: 36px;
  }

  .uniform-text {
    display: none;
  }

  /* Mascot */
  #mascot {
    padding-top: 216px;
    min-height: 424px;
  }
  .mascot-content {
    width: 311px;
    margin: 0 auto;
  }
  .mascot-text {
    font-size: 14px;
    text-align: center;
  }
  .mascot-graphics-wrap {
    top: unset;
    bottom: -30%;
    height: 280px;
  }
  .mascot-graphics {
    left: -1px;
    width: 376.7px;
  }

  /* Schedule */
  #schedule {
    padding-top: 265px;
  }
  .schedule-title {
    font-size: 64px;
    margin-bottom: 40px;
  }
  .schedule-list {
    width: 310px;
  }
  .schedule-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    font-size: 14px;
  }
  .schedule-item .date {
    width: auto;
    margin-bottom: -4px;
  }
  .schedule-item .event {
    white-space: normal;
  }

  /* Movie */
  #movie {
    padding: 140px 0 120px;
  }
  .movie-content {
    width: 310px;
    gap: 48px;
  }
  .movie-main {
    gap: 40px;
  }
  .movie-title {
    font-size: 64px;
  }
  .movie-btn {
    font-size: 14px;
    padding: 10px 24px;
  }
  .movie-modal-inner {
    width: calc(100vw - 32px);
  }
  .movie-play-icon {
    width: 48px;
    height: 48px;
  }

  /* Footer */
  .footer-inner {
    inset: 0;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .footer-text-img {
    position: absolute;
    bottom: 96px;
    left: 24px;
    height: 176px;
  }
  .footer-logo-group {
    position: absolute;
    top: 56px;
    right: 24px;
    height: auto;
    justify-content: flex-start;
    gap: 12px;
  }
  .footer-logo {
    width: 70px;
    height: 83px;
  }
  .footer-copy {
    font-size: 10px;
  }
  .footer-waves {
    display: block;
  }
}

/* ===========================
   LOADING SCREEN
=========================== */
body.loading-active {
  overflow: hidden;
  padding-right: var(--scrollbar-w, 0px);
}

#loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--purple);
  transition: opacity 1.2s ease;
}
#loading.is-done {
  opacity: 0;
  pointer-events: none;
}

#loading-logo-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  /* width / height / transform set by JS */
}

#loading-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ghost: 「A」mark stroke outline — drawn from 3 points simultaneously at stage 1 */
.loading-ghost-path {
  fill: none;
  stroke: rgba(234, 238, 241, 0.65);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  /* 3 zero-length dashes at positions 0, 1/3, 2/3 — visually hidden */
  stroke-dasharray: 0 0.334 0 0.333 0 0.333;
  transition: stroke-dasharray 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
#loading.is-stage-1 .loading-ghost-path,
#loading.is-stage-2 .loading-ghost-path {
  /* 3 segments grow to fill each third — all close at the same time */
  stroke-dasharray: 0.334 0 0.333 0 0.333 0;
}
#loading.is-stage-3 .loading-ghost-path {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Fill: 「A」mark cream fill, fades in over the outline in stage 2 */
.loading-fill-path {
  fill: #eaeef1;
  opacity: 0;
  transition: opacity 1.1s ease;
}
#loading.is-stage-2 .loading-fill-path,
#loading.is-stage-3 .loading-fill-path {
  opacity: 1;
}

/* Wordmark: 「ALEEZA AICHI」hidden until stage 3, drifts in from bottom-right */
#loading-wordmark-g {
  opacity: 0;
  transform: translate(14px, 18px);
  transition:
    opacity 0.65s ease 0.55s,
    transform 0.65s cubic-bezier(0.25, 0.1, 0.25, 1) 0.55s;
}
.loading-wordmark-path {
  fill: #eaeef1;
}
#loading.is-stage-3 #loading-wordmark-g {
  opacity: 1;
  transform: translate(0, 0);
}