:root {
  --sky1: #0a7fc4;
  --sky2: #4fc3ed;
  --sky3: #bfeaff;
  --ink: #12365e;
  --white: #fff;
  --coral: #e8604c;
  --m-pink: #f5dbe3;
  --k-blue: #dbe6f5;
  /* 節の下側の余白。つなぎの帯を廃止したので、以前より詰めてある */
  --section-space: clamp(80px, 9vw, 116px);
  /* 大見出しの上だけは--section-spaceの半分。下（次のセクションとの間）は据え置き */
  --section-space-top: clamp(60px, 7vw, 90px);
  --content-width: 1180px;
  --font-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif: "Zen Old Mincho", "Yu Mincho", serif;
  /* 大見出しの英字。SP/PCで別式にすると680pxで段差が出るので1本の連続式にする。
     第2項は「最長のCHARACTERが容器に収まる上限」＝はみ出し防止のブレーキ */
  --heading-size: clamp(40px, min(6.15vw + 38px, 18.9vw - 8px), 120px);
  --synopsis-top-composite: #0c3465;
  --world-bridge-start: #0a5f96;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  /* clipにする理由: hiddenだとbodyがスクロールコンテナになり、中のposition:stickyが効かなくなる */
  overflow-x: clip;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky3) 0%, var(--sky2) 59%, var(--sky1) 100%);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 2;
}
body.is-opening { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
ruby rt { letter-spacing: 0; ruby-align: center; }
a { color: inherit; }
button { font: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
/* ヘッダーのSNSは丸枠に赤いリングが出て汚いので、塗りでフォーカスを示す */
.header-social:focus-visible {
  outline: none;
  background: rgba(255,255,255,.32);
}
.container { width: min(var(--content-width), calc(100% - 64px)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-space-top) var(--section-space); }
.photo-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.photo-layer > img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Header */
.site-header {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.6vw, 40px);
  padding: clamp(18px, 2.6vw, 24px) clamp(20px, 4vw, 64px);
  color: var(--white);
}
.header-socials { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); }
.header-social {
  display: grid;
  place-items: center;
  opacity: .92;
  transition: opacity .25s ease, transform .25s ease;
}
.header-social:hover { opacity: 1; transform: translateY(-1px); }
.header-social img {
  width: auto;
  height: 15px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(6,44,78,.5));
}
.menu-toggle { display: none; }
.global-nav { display: flex; align-items: center; gap: clamp(12px, 2.6vw, 40px); }
.global-nav a {
  position: relative;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-decoration: none;
}
.global-nav a::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.global-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Opening animation retained */
/* オープニング: 深海の青から水泡と共に浮上し、水面（白）でホームへクロスフェード */
.opening {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  background: #041f3d;
}
/* 白幕が全面を覆いきった瞬間に即座に消す（フェードさせない＝白の裏で入れ替わる） */
.opening.is-finished { display: none; }
/* ホワイトアウト → ホワイトイン。openingの外側・最前面 */
.opening-flash {
  position: fixed;
  z-index: 101;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  animation: white-out-in 3.8s linear 5.2s forwards;
}
.opening-flash.is-finished { animation: none; opacity: 0; }
/* 水中の色は「1枚の縦長グラデをスクロールさせる」＝GPU合成で60fpsの滑らかな変化
   イージングは加速（ease-in）＝カメラのパンアップがだんだん速くなる */
.opening-water {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300%;
  /* 下1/3（＝開幕時に見える帯）は深海の紺。上1/3は全部ライトブルー＝浮上後に長く留まる層。
     白は白幕（.opening-flash）が担当するので、グラデの最上部は白にしない */
  background: linear-gradient(180deg,
    #cfeeff 0%, #bce8fc 7%, #a3ddf8 14%, #85cff0 21%, #63b9e2 29%, #3f97c9 38%,
    #2276a8 47%, #0e5285 57%, #073f6a 68%, #052f52 79%, #04223f 90%, #041f3d 100%);
  /* 高さ300vhの帯を、下端を画面下に合わせた位置(-200vh = 自身の-66.667%)から0まで流す */
  transform: translate3d(0, -66.667%, 0);
  will-change: transform;
  /* 最初の1秒は深海に静止（泡だけが湧く）→ 加速して浮上 → 減速してライトブルーに長く留まる */
  animation: opening-ascend 4.6s cubic-bezier(.62,.02,.35,1) 1s forwards;
}
/* 泡の層そのものをカメラと同じ加速曲線で「下へ」流す＝終盤にカメラが泡を追い越す */
.opening-bubbles {
  position: absolute;
  inset: 0;
  will-change: transform;
  /* 水と完全に同じカーブ・同じ尺＝ひとつのカメラ。移動量は泡の上昇より小さくしてあるので
     追い越さず、終始「泡を追いかけている」状態になる */
  animation: opening-camera 4.6s cubic-bezier(.62,.02,.35,1) 1s forwards;
}
/* 終盤（ライトブルー停留中）に湧く粒。この時点でカメラは止まっているので押し下げない */
.opening-bubbles-late { position: absolute; inset: 0; }

/* --- 水中のきらめき：ライトイエローの十字星 --- */
.opening-sparks { position: absolute; inset: 0; pointer-events: none; }
.spark {
  position: absolute;
  width: var(--s, 16px);
  height: var(--s, 16px);
  opacity: 0;
  /* 中心の芯（丸い光）。十字の光条は疑似要素で重ねる */
  background: radial-gradient(circle,
    rgba(255,253,235,.95) 0%, rgba(255,240,178,.45) 32%, transparent 66%) center / 40% 40% no-repeat;
  filter: drop-shadow(0 0 2px rgba(255,238,170,.7));
  will-change: opacity, transform;
  animation: spark-twinkle var(--d, 2.4s) ease-in-out infinite;
}
.spark::before,
.spark::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  /* 中央がいちばん明るく、両端に向かって消える＝光条 */
  background: linear-gradient(var(--dir, 90deg),
    rgba(255,244,194,0) 0%, rgba(255,244,194,.75) 42%, #fffdf0 50%, rgba(255,244,194,.75) 58%, rgba(255,244,194,0) 100%);
  transform: translate(-50%, -50%);
}
.spark::before { width: 100%; height: 1.4px; }
.spark::after  { width: 1.4px; height: 100%; --dir: 180deg; }
/* 泡が上がってくる帯（左36〜61%）の中だけに配置。
   開幕直後から光るが、最初はぽつんと1粒ずつ・後半ほど頻度が上がって重なるように、
   1回目の点灯時刻を 0.7 → 1.3 → 1.95 → 2.5 → 2.95 → 3.3 → 3.6 → 3.85 → 4.05s と詰めていく。
   周期も後半ほど短く（3.4s→2.0s）＝2巡目以降も自然に密度が増す。
   遅延の負値は「サイクルの途中から開始」の意味で、開幕時点ではどれも消灯している。
   位置は早い粒ほど下＝そのとき泡がいる高さに合わせてある。 */
.k1 { left: 44%; top: 80%; --s:  9px; --d: 3.4s; animation-delay: -1.88s; }
.k2 { left: 55%; top: 74%; --s: 10px; --d: 3.2s; animation-delay: -1.13s; }
.k3 { left: 39%; top: 68%; --s: 11px; --d: 3.0s; animation-delay:  -.33s; }
.k4 { left: 58%; top: 62%; --s: 12px; --d: 2.8s; animation-delay:  .37s; }
.k5 { left: 47%; top: 55%; --s: 13px; --d: 2.6s; animation-delay:  .97s; }
.k6 { left: 36%; top: 47%; --s: 14px; --d: 2.4s; animation-delay: 1.48s; }
.k7 { left: 61%; top: 40%; --s: 15px; --d: 2.2s; animation-delay: 1.93s; }
.k8 { left: 42%; top: 32%; --s: 16px; --d: 2.0s; animation-delay: 2.33s; }
.k9 { left: 52%; top: 24%; --s: 17px; --d: 2.1s; animation-delay: 2.45s; }
/* 外側＝上昇、内側＝左右のゆらぎ（振幅・周期をずらして自然な揺れに） */
.bubble {
  position: absolute;
  /* 湧く高さを粒ごとにバラす。全部同じだと画面下端に「発生線」ができて一斉に湧いて見える */
  bottom: var(--y, 6%);
  /* 等速で上がる（終端速度）。イーズアウトだと出た瞬間だけ速くて跳ねて見える。
     fill-modeはboth＝遅延中も0%（透明）が効く。forwardsだと出番前の粒が不透明のまま並ぶ */
  animation: bubble-rise 3s linear both;
}
/* 大泡（ガラス玉）だけ、消え際を1.5倍速く。上がり方は共通のまま */
.bubble:not(.tiny) { animation-name: bubble-rise-big; }
/* 半透明のガラス玉＝中央は水が透けて、縁とハイライトだけが白く光る */
.bubble i {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,.08) 66%,
    rgba(255,255,255,.26) 84%,
    rgba(255,255,255,.62) 93%,
    rgba(255,255,255,.18) 100%);
  box-shadow: inset 0 0 3px rgba(255,255,255,.30);
  /* 横揺れ(translate)と縦横比の伸縮(scale)を別プロパティ・別周期で回す＝水中の泡の不定形な揺らぎ */
  animation:
    bubble-sway 1.6s ease-in-out infinite alternate,
    bubble-squash .22s ease-in-out infinite alternate;
  will-change: translate, scale;
}
/* 小さい白泡＝細かいディテールが潰れるサイズなので、輪郭でなく白い塊として描く */
.bubble.tiny i {
  background: radial-gradient(circle at 40% 34%,
    rgba(255,255,255,.98), rgba(255,255,255,.8) 52%, rgba(255,255,255,.38) 78%, rgba(255,255,255,.08) 100%);
  box-shadow: none;
}
.bubble.tiny i::before,
.bubble.tiny i::after { display: none; }
/* 主ハイライト（左上）と反射（右下） */
.bubble i::before,
.bubble i::after { content: ""; position: absolute; border-radius: 50%; }
.bubble i::before { left: 20%; top: 16%; width: 34%; height: 27%; background: rgba(255,255,255,.95); }
.bubble i::after  { right: 22%; bottom: 18%; width: 18%; height: 13%; background: rgba(255,255,255,.5); }
/* 3回に分けて「ブクブクッ」と湧く（第1波→第2波→第3波） */
/* 発生タイミングは1粒ずつ全部ずらす（小粒と大粒を交互に）。尺が長い＝ゆっくり上がる */
.opening .b1  { left: 47%; width: 12px; height: 12px; animation-delay: 1.62s; animation-duration: 3.70s; --sway: 32px; --y: 3%; --rise: 100vh; }
.opening .b3  { left: 43%; width: 17px; height: 17px; animation-delay: 1.90s; animation-duration: 3.50s; --sway: 38px; --y: 17%; --rise: 108vh; }
.opening .b5  { left: 51%; width: 14px; height: 14px; animation-delay: 1.80s; animation-duration: 3.60s; --sway: 28px; --y: 21%; --rise:  96vh; }
.opening .b11 { left: 56%; width: 10px; height: 10px; animation-delay: 1.10s; animation-duration: 3.90s; --sway: 35px; --y: 14%; --rise:  88vh; }
.opening .b7  { left: 39%; width: 8px; height: 8px; animation-delay: .96s; animation-duration: 4.00s; --sway: 24px; --y: 19%; --rise:  78vh; }
.opening .b2  { left: 52%; width: 10px; height: 10px; animation-delay: 1.39s; animation-duration: 3.80s; --sway: 36px; --y: 12%; --rise:  92vh; }
.opening .b6  { left: 58%; width: 13px; height: 13px; animation-delay: 1.71s; animation-duration: 3.55s; --sway: 31px; --y: 10%; --rise: 102vh; }
.opening .b8  { left: 49%; width: 7px;  height: 7px;  animation-delay: .62s; animation-duration: 4.30s; --sway: 23px; --y: 4%; --rise:  74vh; }
.opening .b9  { left: 42%; width: 10px; height: 10px; animation-delay: 1.24s; animation-duration: 4.05s; --sway: 34px; --y: 22%; --rise:  86vh; }
.opening .b10 { left: 54%; width: 7px;  height: 7px;  animation-delay: .84s; animation-duration: 4.25s; --sway: 26px; --y: 15%; --rise:  70vh; }
.opening .b12 { left: 48%; width: 11px; height: 11px; animation-delay: 1.54s; animation-duration: 3.75s; --sway: 30px; --y: 18%; --rise:  94vh; }
/* 揺れと伸縮の周期をバラす（値は 横揺れ, 伸縮 の順）。伸縮は横揺れよりずっと速い */
.opening .b2 i, .opening .b6 i, .opening .b10 i { animation-duration: 1.05s, .15s; }
.opening .b3 i, .opening .b7 i, .opening .b11 i { animation-duration: 1.85s, .26s; }
.opening .b9 i                { animation-duration: 1.3s, .12s; }
.opening .b5 i, .opening .b8 i         { animation-duration: 1.5s, .19s; }

/* --- 小さい白泡（本編用12粒）--- */
.t1  { left: 46%; width: 5px; height: 5px; animation-delay: .09s; animation-duration: 3.80s; --sway: 20px; --y: 11%; --rise:  90vh; }
.t2  { left: 53%; width: 4px; height: 4px; animation-delay: .25s; animation-duration: 4.00s; --sway: 26px; --y: 6%; --rise:  82vh; }
.t4  { left: 57%; width: 4px; height: 4px; animation-delay: .45s; animation-duration: 4.15s; --sway: 30px; --y: 2%; --rise:  76vh; }
.t5  { left: 49%; width: 3px; height: 3px; animation-delay: .21s; animation-duration: 4.30s; --sway: 23px; --y: 7%; --rise:  70vh; }
.t6  { left: 44%; width: 5px; height: 5px; animation-delay: .78s; animation-duration: 3.85s; --sway: 27px; --y: 23%; --rise:  88vh; }
.t8  { left: 51%; width: 6px; height: 6px; animation-delay: .90s; animation-duration: 3.70s; --sway: 33px; --y: 20%; --rise: 100vh; }
/* 先頭グループ（0〜0.6秒）に差し込む細かい粒。既存の遅延の隙間を全部埋める */
.t13 { left: 49%; width: 3px; height: 3px; animation-delay: .00s; animation-duration: 4.10s; --sway: 22px; --y:  8%; --rise: 74vh; }
.t14 { left: 44%; width: 4px; height: 4px; animation-delay: .17s; animation-duration: 3.75s; --sway: 28px; --y: 15%; --rise: 94vh; }
.t15 { left: 54%; width: 2px; height: 2px; animation-delay: .05s; animation-duration: 4.40s; --sway: 19px; --y:  4%; --rise: 64vh; }
.t16 { left: 40%; width: 5px; height: 5px; animation-delay: .33s; animation-duration: 3.85s; --sway: 31px; --y: 20%; --rise: 88vh; }
.t17 { left: 58%; width: 3px; height: 3px; animation-delay: .37s; animation-duration: 4.20s; --sway: 17px; --y: 11%; --rise: 70vh; }
.t18 { left: 47%; width: 4px; height: 4px; animation-delay: .49s; animation-duration: 3.95s; --sway: 25px; --y:  2%; --rise: 84vh; }
.t20 { left: 37%; width: 5px; height: 5px; animation-delay: .57s; animation-duration: 3.80s; --sway: 20px; --y:  6%; --rise: 92vh; }
.t21 { left: 61%; width: 7px; height: 7px; animation-delay: .53s; animation-duration: 4.05s; --sway: 26px; --y: 13%; --rise: 80vh; }
.t21 i { --sq: .18; }
.tiny i { animation-duration: 1.2s, .11s; }
.t8 i { animation-duration: 1.6s, .17s; }
.t5 i                { animation-duration: .95s, .09s; }
.tiny i { --sq: .28; }

/* --- 終盤の一拍を埋める5粒（ライトブルー停留中に静かに湧く）--- */
.l1 { left: 45%; width: 5px;  height: 5px;  animation-delay: 3.60s; animation-duration: 2.90s; --sway: 21px; --y: 5%; --rise: 42vh; }
.l2 { left: 52%; width: 4px;  height: 4px;  animation-delay: 4.06s; animation-duration: 3.10s; --sway: 27px; --y: 12%; --rise: 36vh; }
.l3 { left: 48%; width: 6px;  height: 6px;  animation-delay: 4.24s; animation-duration: 2.75s; --sway: 18px; --y: 2%; --rise: 48vh; }
.l4 { left: 56%; width: 3px;  height: 3px;  animation-delay: 4.45s; animation-duration: 3.20s; --sway: 30px; --y: 16%; --rise: 30vh; }
.l5 { left: 42%; width: 9px; height: 9px; animation-delay: 4.62s; animation-duration: 2.95s; --sway: 24px; --y: 8%; --rise: 40vh; --sq: .24; }
.l5 i { animation-duration: 1.4s, .20s; }
/* 伸縮の強さも粒ごとに。大きい泡ほど大きく歪む */
.opening .b3 i, .opening .b5 i, .opening .b6 i  { --sq: .26; }
.opening .b1 i, .opening .b2 i, .opening .b12 i { --sq: .21; }
.opening .b8 i, .opening .b10 i        { --sq: .13; }
/* --- 縦書きキャッチ「この夏、青春が浮上する。」--- */
.opening-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: 0;
  writing-mode: vertical-rl;
  color: #fff;
  /* 明朝。淡い水色の上でも沈まないよう、紺のにじみを二重に敷く */
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.9vw, 38px);
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(4,31,61,.55), 0 6px 26px rgba(4,31,61,.6);
  pointer-events: none;
  transform: translate(-50%, -50%);
  /* 消えるときは文字ごとではなく、この親でまとめてフェードアウトする */
  animation: copy-out 1.1s ease 5s forwards;
}
.opening-copy span {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform;
  animation: copy-in .6s cubic-bezier(.2,.6,.3,1) both;
}
/* 現れるときだけ順送り。「いま、」の3文字を出したあと約1秒の間を置いて残り8文字 */
.opening-copy span:nth-child(1)  { animation-delay: 1.50s; }
.opening-copy span:nth-child(2)  { animation-delay: 1.56s; }
.opening-copy span:nth-child(3)  { animation-delay: 1.62s; }
.opening-copy span:nth-child(4)  { animation-delay: 2.70s; }
.opening-copy span:nth-child(5)  { animation-delay: 2.76s; }
.opening-copy span:nth-child(6)  { animation-delay: 2.82s; }
.opening-copy span:nth-child(7)  { animation-delay: 2.88s; }
.opening-copy span:nth-child(8)  { animation-delay: 2.94s; }
.opening-copy span:nth-child(9)  { animation-delay: 3.00s; }
.opening-copy span:nth-child(10) { animation-delay: 3.06s; }
.opening-copy span:nth-child(11) { animation-delay: 3.12s; }
.opening-skip {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 5px 0;
  border: 0;
  color: rgba(255,255,255,.85);
  background: none;
  font-size: 10px;
  letter-spacing: .2em;
  cursor: pointer;
}
@keyframes opening-ascend {
  from { transform: translate3d(0, -66.667%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
/* カメラの上昇＝画面内の泡は相対的に下へ流れる。
   移動量40vhは泡の上昇量(66〜108vh)より常に小さい＝追い越しは起きない */
@keyframes opening-camera {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 40vh, 0); }
}
/* 膨らみながらフェードインで現れ、上がりながら次第に薄れて消える。
   上昇(translate)は0%と100%だけで定義＝途中に制御点を置かないので速度変化が起きない＝跳ねない。
   大きさ(scale)は別プロパティなので、上昇を乱さずに膨らませられる */
@keyframes bubble-rise {
  0%   { opacity: 0;   scale: .5;   translate: 0 0; }
  9%   { opacity: .32; scale: .8; }
  24%  { opacity: .95; scale: 1; }
  52%  { opacity: .9; }
  76%  { opacity: .5; }
  100% { opacity: 0;   scale: 1.06; translate: 0 calc(var(--rise, 95vh) * -1); }
}
/* 大泡用。減衰区間を 52%→100%（48%分）から 52%→84%（32%分）へ圧縮＝1.5倍速く消える。
   上昇と膨らみのキーフレームは共通と完全に同じなので、動きは変わらない */
@keyframes bubble-rise-big {
  0%   { opacity: 0;   scale: .5;   translate: 0 0; }
  9%   { opacity: .32; scale: .8; }
  24%  { opacity: .95; scale: 1; }
  52%  { opacity: .88; }
  68%  { opacity: .5; }
  84%  { opacity: 0; }
  100% { opacity: 0;   scale: 1.06; translate: 0 calc(var(--rise, 95vh) * -1); }
}
/* 左右のゆらぎ */
@keyframes bubble-sway {
  from { translate: calc(var(--sway, 20px) * -1) 0; }
  to   { translate: var(--sway, 20px) 0; }
}
/* 縦横比の伸縮＝横に潰れる⇄縦に伸びるを繰り返す（表面張力で形が定まらない感じ） */
@keyframes bubble-squash {
  from { scale: calc(1 + var(--sq, .2)) calc(1 - var(--sq, .2)); }
  to   { scale: calc(1 - var(--sq, .2)) calc(1 + var(--sq, .2)); }
}
/* 3.8s×[遅延5.2s] ＝ ホワイトアウト0.76s → 完全な白を0.5s保持 → ホームへのフェードイン2.55s */
/* ほとんどの時間は消えていて、一瞬だけ「キラッ」と鋭く光ってすぐ落ちる。
   点灯しているのはサイクルの12%だけ（2.0〜3.4s周期なら0.24〜0.41秒） */
@keyframes spark-twinkle {
  0%, 76% { opacity: 0;   transform: scale(.12) rotate(0deg); }
  79%     { opacity: 1;   transform: scale(1.25) rotate(5deg); }
  84%     { opacity: .4;  transform: scale(.7) rotate(10deg); }
  88%     { opacity: 0;   transform: scale(.3) rotate(14deg); }
  100%    { opacity: 0;   transform: scale(.12) rotate(0deg); }
}
/* 1文字ずつ、下から浮き上がって定位置に止まる */
@keyframes copy-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 消えるときは全文字そろってフェードアウト。同時に白→ライトブルーへ色が抜けていき、
   紺のにじみも水色の淡いにじみに置き換わる＝水の色に溶けて消える */
@keyframes copy-out {
  0% {
    opacity: 1;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(4,31,61,.55), 0 6px 26px rgba(4,31,61,.6);
  }
  38% {
    opacity: .88;
    color: #d2efff;
    text-shadow: 0 1px 3px rgba(4,31,61,.22), 0 6px 26px rgba(116,199,238,.55);
  }
  100% {
    opacity: 0;
    color: #8fd4f2;
    text-shadow: 0 1px 3px rgba(4,31,61,0), 0 6px 26px rgba(150,220,250,.3);
  }
}
@keyframes white-out-in {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  33%  { opacity: 1; animation-timing-function: cubic-bezier(.32,0,.5,1); }
  100% { opacity: 0; }
}

/* Hero: the established key visual stays dominant */
.hero {
  position: relative;
  /* 画角保持: KVの縦横比にヒーローを固定する。横に広げても構図は一切変わらない（アオのハコ方式） */
  width: 100%;
  aspect-ratio: 3885 / 2125;
  overflow: hidden;
  color: var(--white);
  background: var(--sky1);
}
.hero-kv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center;
  animation: hero-breathe 18s ease-in-out infinite alternate;
}
.hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    /* 下端＝次セクションへの繋ぎ（維持） */
    linear-gradient(0deg, var(--sky3) 0, rgba(191,234,255,.94) 42px, transparent 128px),
    /* コピー背後だけを局所的に暗く（左側の全面グラデは羊の顔を暗くするため廃止） */
    radial-gradient(120% 78% at 82% 92%, rgba(8,57,95,.42), rgba(8,57,95,.16) 42%, transparent 68%);
  pointer-events: none;
}
.hero-inner {
  position: absolute;
  z-index: 3;
  top: 64.7%;
  bottom: auto;
  right: clamp(16px, 5vw, 88px);
  left: auto;
  /* 文字が下限サイズに達する幅761pxから下では、ありあのソックス上端(画像の82.5%)まで塊を下げる。
     壁の縦中央64.7%からの差を、幅に比例させて連続的に足す（段差を出さないため） */
  transform: translateY(calc(-50% + clamp(0px, 209.2px - 27.49vw, 102px)));
  width: max-content;
  max-width: min(94vw, 1100px);
  text-align: right;
}
.hero-kicker { margin: 0 0 20px; font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.hero-catch {
  margin: 0;
  font-family: var(--font-serif);
  /* 2026-07-27: 下限を20.5pxに。390pxのスマホでコピーが画面幅の約70%(273px)を占める大きさ。
     これ以上は小さくしない（下限に達するのは幅761px以下） */
  font-size: clamp(20.5px, calc(3.05vw - 2.7px), 44px);
  line-height: 1.45;
  letter-spacing: .03em;
  text-shadow: 0 2px 16px rgba(7,55,90,.25);
  white-space: nowrap;
}
.hero-catch rt { font-family: var(--font-sans); font-size: max(8px, .18em); letter-spacing: 0; ruby-align: center; }
.hero-sub {
  /* 案A: キャッチ直下に右揃えで添えるロックアップ */
  position: static;
  margin: 14px 0 0;
  font-size: clamp(10px, .9vw, 13px);
  letter-spacing: .03em;
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(8,38,72,.8), 0 0 2px rgba(8,38,72,.6);
}
.hero-logo {
  position: absolute;
  z-index: 4;
  top: calc(clamp(18px, 2.6vw, 24px) + 2px);
  left: clamp(20px, 4vw, 64px);
  width: clamp(179px, min(56vw, max(230px, 22vw)), 330px);
  max-width: calc(100% - 40px);
}
.hero-flower-left { display: none; }
.cloud, .island-horizon, .water-glints, .sea-glint, .sea-bubble { display: none; }
.scroll-prompt {
  position: fixed;
  z-index: 40;
  right: clamp(14px, 2vw, 34px);
  bottom: -26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--white);
  transition: opacity .5s ease;
  pointer-events: none;
}
.scroll-prompt.is-hidden { opacity: 0; }
.scroll-flower {
  width: 15px;
  height: 15px;
  background: url("assets/deco-hibiscus-icon.webp") center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(6,44,78,.4));
  animation: scroll-in 1.4s 2.9s ease both;
}
.scroll-text {
  font-size: 9px;
  letter-spacing: .24em;
  writing-mode: vertical-rl;
  text-shadow: 0 1px 4px rgba(6,44,78,.45);
  animation: scroll-in 1.4s 3.5s ease both;
}
.scroll-line {
  position: relative;
  overflow: hidden;
  width: 1px;
  height: 78px;
  background: rgba(255,255,255,.38);
  transform-origin: top;
  animation: scroll-line-grow 1.6s 4.1s ease both;
}
.scroll-line::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 34%;
  content: "";
  background: var(--white);
  animation: scroll-travel 3.6s 5.6s ease-in-out infinite;
}
@keyframes scroll-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes scroll-line-grow { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes scroll-travel {
  0% { opacity: 0; transform: translateY(-110%); }
  18% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(300%); }
}
@media (max-width: 360px) {
  .scroll-prompt { display: none; }
}
/* 1400px以下は「高さを連続的に縮める」＝KVは左右が滑らかに見切れていく。
   SP/PCで式を分けないので境界での段差が発生しない（1400pxで画角保持と一致） */
@media (max-width: 1400px) {
  .hero {
    aspect-ratio: auto;
    height: min(100svh, calc(100vw * 1.52), calc(19.12vw + 498.3px));
    min-height: 380px;
  }
}
@keyframes hero-breathe { to { transform: scale(1.025); } }

/* Shared heading: large italic English + small Japanese */
.section-heading {
  display: flex;
  /* 箱を中身（英字見出し）の幅ぴったりにする。ミンサー線をその幅に合わせるため。
     はみ出す幅では max-width で止める（英字が容器より長くなるSPのCHARACTER等） */
  width: fit-content;
  max-width: 100%;
  margin: 0 0 clamp(64px, 8vw, 104px) auto;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.section-heading .en {
  display: block;
  font-size: var(--heading-size);
  font-style: italic;
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.055em;
}
.section-heading h2 {
  margin: 22px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .3em;
}
/* ミンサー織りの下線（英字見出しの直下・日本語の上。高さ24pxで柄が読める） */
.minsa-line {
  width: 100%;
  height: 24px;
  margin-top: 16px;
  background: url("assets/deco-minsa-about.svg") left center / auto 100% repeat-x;
}
.section-heading .minsa-line + h2 { margin-top: 14px; }
/* セクションの背景に合わせて配色を変える */
.about .minsa-line { background-image: url("assets/deco-minsa-about.svg"); background-position: center; }
.synopsis .minsa-line { background-image: url("assets/deco-minsa-synopsis.svg"); background-position: right center; }
.characters .minsa-line { background-image: url("assets/deco-minsa-character.svg"); background-position: right center; }
.world .minsa-line { background-image: url("assets/deco-minsa-world.svg"); background-position: right center; }

/* About: just sky and the story */
/* 高さを盛って上下中央寄せにすると、画面が縦に高いほど見出しの上の余白が膨らんで
   他セクションと揃わなくなる（1200px高で264px vs 他184px）。素の.sectionのパディングに任せる */
.about {
  overflow: clip;
  background: linear-gradient(180deg, var(--sky3), var(--sky2));
}
.about-layout { max-width: 820px; margin-inline: auto; }
.about .container { position: relative; z-index: 1; }
/* 選手2名の立ち絵を左右に薄く敷く。本文は中央に幅339pxで固定なので、
   中央から左右200pxより外側に置けばどの画面幅でも文字に掛からない。
   外側にはみ出すぶんは節のclipで切る（背景として自然に見切れる） */
.about-figures {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
/* サイズ・見切れ方・二人の距離はVS KV(1600x900)の実測比率に合わせる。
   KVでは 真琴=左端で見切れて0〜36%（バット先端64%）／ありあ=71〜99%／縦は上下とも見切れ。
   幅を節の幅に対する%で持たせているので、画面幅が変わっても比率は保たれる */
/* 大きさは節の高さ基準で固定する（縦の見切れ方を最優先）。横位置は中央からのpx指定なので、
   画面幅を変えても2人の大きさと間隔は変わらず、画面の端が削る／広がるだけになる。
   1280px幅でVS KVの比率と一致する値を基準にしている */
.about-fig {
  position: absolute;
  /* 見出しのミンサー線に顔が掛からない高さまで下げる。上端は切らない（真琴のヘルメット・ありあの腕） */
  /* 2026-07-27: さらに50px上げた */
  top: clamp(80px, calc(15.5vw - 50px), 155px);
  width: auto;
  /* 共通の img{max-width:100%} が効くと、狭い幅で横だけ潰れて比率が崩れる */
  max-width: none;
  /* 淡さは画像側に焼き込み済み（背景グラデと34%で合成）。CSSのopacityを使わないので、
     2人が重なっても濃くならず、上に来た方がそのまま見える */
}
/* 横位置は「顔をどこに置くか」で決める。顔の位置は実測（真琴=画像の44.8%、ありあ=45.7%）。
   広い画面ではVS KVの比率どおり、狭くなると顔が画面外へ出ないよう内側へ寄る。
   max/minで1本の式にしてあるので、切り替わりで飛ばない（交差は約1140px） */
/* 横位置は「顔をどこに置くか」で決める。顔の範囲は行ごとの肌色分布から実測した“顔だけ”の箱
   （真琴=左から476〜568px／ありあ=80〜180px。腕や首の肌は除外）。
   髪・帽子・体には本文が掛かってよいので、制約は顔の箱にだけ掛けている。
   1本目=VS KV準拠の位置、2本目=顔が画面外に出ないための止め、3本目=本文から8px離す上限。
   min/maxで1本の式にしてあるので、どの幅でも飛ばない */
/* 2026-07-27: 2人を計100pxずつ内側へ寄せた（各項から100px。式の形は同じ） */
.about-fig-left  { z-index: 1; height: 1227px; right: auto;
  left: min(max(50vw - 783px, -376px), 50vw - 644px); }
.about-fig-right { height: 1024px;
  left: max(min(50vw + 123px, 100vw - 280px), 50vw - 4px); }
/* 見出しの箱を中身（英字ABOUT）の幅ぴったりにして中央へ。ミンサー線をその幅に合わせるため */
.about .section-heading {
  width: fit-content;
  margin-inline: auto;
  /* 2026-07-27: 見出しの塊を30px上へ。本文との間隔は元の64pxから+40pxで104px */
  margin-top: -30px;
  margin-bottom: 104px;
  align-items: center;
  text-align: center;
}
.about .section-heading .en { color: var(--ink); }

.about-copy p {
  margin: 0;
  /* PC/SP共通。幅で変えると境界で段差が出るし、このブロックは字を詰めない方が読みやすい */
  font-size: 14px;
  line-height: 2.5;
  letter-spacing: .01em;
  text-align: center;
}

/* Synopsis: full stadium, local darkening only at the top */
.synopsis {
  position: relative;
  min-height: 100svh;
  /* 横だけclip。hiddenはスクロールコンテナになり中のstickyが効かなくなる。
     両軸clipにするとiOS Safariで「下りは正常・上りで背景が追従しない」不具合が出るため縦は触らない */
  overflow-x: clip;
  color: var(--white);
  background: var(--sky1);
}
/* 背景を画面に貼り付け、その上を情報がスクロールしていく。
   絶対配置ではなくstickyにするのは、background-attachment:fixedがiOSで機能しないため。
   高さ100vhぶんの場所を取ってしまうので、同じだけ負のマージンで引き戻して内容に重ねる */
.synopsis-photo {
  position: sticky;
  inset: auto;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
}
/* 見出しを読ませるための暗がり。背景と一緒に貼り付ける（節に置くと背景だけ残って先に流れてしまう） */
.synopsis-photo::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(7,40,71,.78) 0%, rgba(7,40,71,.44) 34%, rgba(7,40,71,.12) 64%, transparent 82%);
  pointer-events: none;
}
.synopsis-inner {
  position: relative;
  z-index: 2;
  /* 見出しと本文を横に並べると、幅を縮めた時に必ずぶつかる。縦積みにして
     見出し=右上／本文=その下の左、に固定する（どの幅でも重ならない） */
  display: block;
  width: min(var(--content-width), calc(100% - 64px));
  min-height: 100svh;
  margin-inline: auto;
  padding-block: var(--section-space-top) max(160px, var(--section-space));
}
.synopsis .section-heading { margin: 0 0 0 auto; color: var(--white); }
.synopsis .minsa-line { box-shadow: 0 1px 7px rgba(7,40,71,.22); }
.vertical-story {
  position: relative;
  isolation: isolate;
  display: flex;
  /* 幅を中身に合わせる＝暗いスクリム(::before)が本文にぴったり付く。左端に寄せる */
  width: fit-content;
  min-height: 480px;
  /* 見出しとの間隔。スクリム(::before)が上に28pxはみ出すぶんを見込んで多めに取る */
  margin-top: clamp(68px, 7vw, 100px);
  margin-right: auto;
  flex-direction: column;
  align-items: flex-start;
}
.vertical-story::before {
  position: absolute;
  z-index: -1;
  inset: -28px -32px;
  content: "";
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.3));
  box-shadow: 0 0 26px rgba(0,0,0,.2);
  pointer-events: none;
}
.vertical-story p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-serif);
  /* PC/SP共通。縦書きは「行数＝列数」なので横幅は 列数×文字サイズ×行間 で決まる。
     文字サイズは固定にし、狭い画面では列の間隔だけ詰めて13列を容器に収める */
  font-size: 15px;
  /* 2026-07-27: 行間を約5px詰めた（2.3em=34.5px → 1.97em=29.5px）。縦書きなのでこれが列の間隔 */
  line-height: min(1.97em, (100vw - 48px) / 13);
  letter-spacing: .02em;
  writing-mode: vertical-rl;
}
.synopsis-link,
.footer-note-link {
  display: inline-flex;
  min-height: 44px;
  margin-top: 34px;
  padding: 8px 18px;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  transition: color .25s ease, background .25s ease;
}
.synopsis-link:hover { color: var(--ink); background: var(--white); }
.synopsis-link {
  position: absolute;
  z-index: 4;
  bottom: 56px;
  left: 50%;
  min-width: 154px;
  margin: 0;
  justify-content: center;
  border-color: var(--ink);
  color: var(--white);
  background: var(--ink);
  writing-mode: horizontal-tb;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Character: functional grid on a full-width school background */
.characters {
  /* 横だけclip。hiddenはスクロールコンテナになり中のstickyが効かなくなる。
     両軸clipにするとiOS Safariで「下りは正常・上りで背景が追従しない」不具合が出るため縦は触らない */
  overflow-x: clip;
  background: var(--sky3);
}
/* 背景は「下端に校舎＋グラウンド、その上は空でつなぐ」構成。
   このセクションは縦3600px超あるので、横長写真をcoverにすると4倍近く拡大され
   横幅の2割（中央）しか映らない＝校舎もグラウンドも枠外に消える。実際にそうなっていた。
   なので画像は横幅いっぱい・原寸比で下端に敷き、その上は画像上端と同じ空色のグラデで埋める */
.characters-photo {
  /* 背景を画面に貼り付け、その上を情報がスクロールしていく（SYNOPSISと同じ方式）。
     上マージンは節の上パディングの打ち消し（これが無いと節の上端に隙間が空く） */
  position: sticky;
  inset: auto;
  top: 0;
  height: 100vh;
  margin-top: calc(var(--section-space-top) * -1);
  margin-bottom: calc(var(--section-space-top) - 100vh);
  background:
    /* 2026-07-27: 水色トーンを薄くした（.58/.58/.62 → .42/.42/.46） */
    linear-gradient(180deg, rgba(191,234,255,.42), rgba(79,195,237,.42) 55%, rgba(10,127,196,.46)),
    url("assets/bg-minamishima-school.webp?v=2") center bottom / 100% auto no-repeat,
    /* 画像の上端色と同じ単色で埋める。グラデにすると画面上端に細い帯が常駐して見えるうえ、
       画面幅で画像の高さだけが変わるため接合位置の色がズレる */
    #0066da;
}
.characters .container { position: relative; z-index: 2; }
.school-block { margin-top: clamp(96px, 11vw, 148px); }
.school-header {
  display: flex;
  width: 100%;
  margin-bottom: 54px;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
}
/* 校章は横幅で揃える。元画像は余白の量がバラバラなので、余白を切り落とした版を使う
   （美波島は1000pxのキャンバスに絵柄が588pxしかなく、41%が余白だった） */
.school-uniform { display: grid; width: 74px; flex: 0 0 auto; place-items: center; }
.school-uniform img { width: 100%; height: auto; object-fit: contain; }
.mystery-emblem { height: 74px; }
.school-label { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.school-header h3 { margin: 0; font-size: clamp(23px, 2.8vw, 36px); line-height: 1.3; letter-spacing: .04em; }
.school-header h3 small { display: block; margin-top: 8px; font-size: 9px; font-weight: 500; letter-spacing: .18em; }
.character-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 64px 24px; }
.character-card { min-width: 0; }
.character-card > a { position: relative; display: block; text-decoration: none; cursor: pointer; }
.character-card > a::after {
  display: block;
  margin-top: 12px;
  color: var(--ink);
  content: "VIEW →";
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.character-card > a:hover::after,
.character-card > a:focus-visible::after { opacity: 1; transform: none; }
.portrait-wrap {
  position: relative;
  overflow: hidden;
  /* 2026-07-27: 上下+10pxずつ広げた（背の高いキャラの追加に備える）。元は 4/5 */
  aspect-ratio: 217 / 291.25;
  background: rgba(255,255,255,.86);
}
.portrait { width: 100%; height: 100%; overflow: hidden; }
.portrait img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--face-x,50%) var(--face-y,20%);
  transform: scale(var(--zoom,1.2));
  transform-origin: var(--face-x,50%) var(--face-y,20%);
  transition: filter .4s ease;
}
.character-card a:hover .portrait img { filter: saturate(1.08) contrast(1.02); }
.staff-badge { position: absolute; z-index: 2; top: 0; right: 0; padding: 5px 8px; color: var(--white); background: var(--ink); font-size: 8px; letter-spacing: .12em; }
.character-card h4 { margin: 17px 0 2px; font-size: 17px; line-height: 1.45; letter-spacing: .04em; }
.character-card .roman { display: block; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.character-card .catch {
  display: inline;
  margin: 10px 0 0;
  border-bottom: 1px solid rgba(18,54,94,.58);
  color: var(--ink);
  font-size: 11px;
  line-height: 2.2;
  text-decoration: none;
}
.portrait-wrap.is-coming { display: grid; place-items: center; background: rgba(255,255,255,.48); }
.portrait-wrap.is-coming .mystery-mark { line-height: 1; }
.mystery-mark { color: rgba(18,54,94,.45); font-size: 70px; font-weight: 700; }
.mystery-emblem {
  border: 2px solid rgba(18,54,94,.55);
  border-radius: 50%;
  /* COMING SOONカードの?と同じ薄い白を敷く */
  background: rgba(255,255,255,.48);
}
.mystery-emblem .mystery-mark { font-size: 42px; line-height: 1; }
.coming-soon {
  display: block;
  margin-top: 8px;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-shadow: 0 1px 8px rgba(7,40,71,.5);
}

/* World: image, text, no cards */
.world {
  min-height: 100svh;
  /* 横だけclip。hiddenはスクロールコンテナになり中のstickyが効かなくなる。
     両軸clipにするとiOS Safariで「下りは正常・上りで背景が追従しない」不具合が出るため縦は触らない */
  overflow-x: clip;
  color: var(--white);
}
/* 背景を画面に貼り付け、その上を情報がスクロールしていく（SYNOPSIS/CHARACTERと同じ方式）。
   上マージンは節の上パディングの打ち消し（これが無いと節の上端に隙間が空く） */
.world-photo {
  position: sticky;
  inset: auto;
  top: 0;
  height: 100vh;
  margin-top: calc(var(--section-space-top) * -1);
  margin-bottom: calc(var(--section-space-top) - 100vh);
}
.world-photo::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse at 82% 18%, rgba(5,32,58,.54), transparent 34%),
    radial-gradient(ellipse at 50% 72%, rgba(5,32,58,.64), rgba(5,32,58,.22) 52%, transparent 76%);
  pointer-events: none;
}
.world .container { position: relative; z-index: 2; }
.world-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 5vw, 72px); }
.world-item {
  position: relative;
  isolation: isolate;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.65);
}
.world-item::before {
  position: absolute;
  z-index: -1;
  inset: -34px -28px -42px;
  content: "";
  background: radial-gradient(ellipse at 50% 48%, rgba(0,0,0,.34), rgba(0,0,0,.27) 58%, transparent 78%);
  pointer-events: none;
}
.world-num { display: block; margin-bottom: 38px; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; letter-spacing: .18em; }
/* 装飾モチーフは配給制だが、WORLDは番号だけで単調になるためアイコンを出す（2026-07-27 山口P判断） */
.world-icon { display: block; margin-bottom: 18px; }
.world-icon svg { width: 44px; height: 44px; stroke: currentColor; }
.world-item h3 { margin: 0 0 22px; font-size: clamp(20px, 2vw, 27px); letter-spacing: .04em; }
.world-item p { margin: 0; font-size: 14px; line-height: 2.15; letter-spacing: .02em; text-wrap: pretty; }
.keep-word { white-space: nowrap; }

/* CTA and footer */
/* READ ON NOTEセクションと合体したフッター。背景は海の帯だけ */
.site-footer {
  position: relative;
  overflow: clip;
  min-height: 360px;
  padding: 56px 24px 26px;
  color: var(--ink);
  background: var(--sky2);
  text-align: center;
}
.footer-sea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.footer-inner { position: relative; z-index: 2; }
/* 背景が海〜砂浜で明るいので、文字とアイコンは紺の実色で置く（膜は敷かない） */
.footer-logo-link { display: block; }
.footer-social {
  display: flex;
  margin-top: 30px;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
}
.footer-company img { width: clamp(112px, 13vw, 150px); height: auto; }
.footer-sns img { width: 18px; height: auto; object-fit: contain; }
.footer-company, .footer-sns {
  display: grid;
  place-items: center;
  opacity: .88;
  transition: opacity .25s ease, transform .25s ease;
}
.footer-company:hover, .footer-sns:hover { opacity: 1; transform: translateY(-2px); }
.footer-note-link {
  margin-top: 24px;
  gap: 35px;
  border-color: var(--white);
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 10px 24px rgba(7,47,79,.28);
  transition: box-shadow .25s ease, transform .25s ease, background .25s ease;
}
.footer-note-link:hover { color: var(--white); background: var(--ink); box-shadow: 0 16px 30px rgba(7,47,79,.36); transform: translateY(-4px); }
.footer-logo { width: clamp(170px, 25vw, 280px); margin-inline: auto; }
.copyright { margin: 26px 0 0; color: rgba(18,54,94,.62); font-size: 9px; letter-spacing: .12em; }


@media (max-width: 900px) {
  .character-grid { grid-template-columns: repeat(3, 1fr); }
  .world-grid { gap: 30px; }
}
@media (max-width: 680px) {
  .menu-toggle {
    position: relative;
    z-index: 120;
    display: grid;
    width: 34px;
    height: 34px;
    padding: 9px 5px;
    align-content: space-between;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle > span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(6,44,78,.5);
    transition: transform .25s ease, opacity .25s ease;
  }
  .menu-toggle[aria-expanded='true'] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] > span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded='true'] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .global-nav {
    position: fixed;
    z-index: 110;
    inset: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    opacity: 0;
    background: linear-gradient(165deg, rgba(10,63,110,.97), rgba(18,54,94,.98));
    transition: opacity .25s ease, visibility .25s ease;
  }
  .menu-toggle[aria-expanded='true'] + .global-nav { visibility: visible; opacity: 1; }
  /* リサイズ中はトランジションを切る（中身の一瞬のフェードイン・アウトを防ぐ） */
  .is-resizing .global-nav { transition: none; }
  .global-nav a { font-size: 15px; letter-spacing: .22em; }
  .header-socials { position: relative; z-index: 120; }
  body.menu-open { overflow: hidden; }
  .container, .synopsis-inner { width: min(100% - 40px, var(--content-width)); }
  .hero-logo { filter: drop-shadow(0 3px 12px rgba(6,44,78,.42)); }
  .section-heading { margin-bottom: 60px; }
  .about { min-height: auto; }
  .about-copy p { letter-spacing: 0; text-align: center; line-height: 2.3; }
  .synopsis { min-height: 820px; }
  .synopsis-inner { min-height: 820px; padding-block: 60px 150px; }
  .vertical-story { min-height: 470px; }
  .synopsis-link { bottom: 46px; }
  .character-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 14px; }
  .school-header { gap: 14px; }
  .school-uniform { width: 58px; height: 58px; }
  .character-card h4 { font-size: 15px; }
  .character-card .catch { color: var(--ink); font-size: 10px; border-bottom-color: var(--ink); }
      .world-grid { grid-template-columns: 1fr; gap: 56px; }
  .world-item { max-width: 520px; }
  .world-item p { font-size: 13px; }
      }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .opening, .opening-flash { display: none; }
  .hero-kv { transform: none; }
}