/* 裏方界隈 — スクロールストーリー（2026-10 実装要件定義書）
   「派手だから動かす」のではなく「情報が解禁されたから動く」。
   動く状態は .has-js:not(.reduce-motion) のときだけ。JSが無い／読み込みに失敗した／動きを減らす設定では、
   固定（pin）も透明のままの要素も作らず、すべて完成状態で縦に並べる。
   スクロール量に連動する値（--s1 など 0→1）はJSが渡す。 */

/* ============ 入口：ACCESSING… → ACCESS GRANTED → 黒い扉が開く ============ */
.gate__door, .gate__stamp, .gate__seal { transition: transform 1.15s cubic-bezier(.76,0,.2,1), background-color .25s, opacity .25s; }
.gate.is-accessing .gate__door { background: #000; box-shadow: none; }
.gate.is-accessing .gate__stamp, .gate.is-accessing .gate__seal, .gate.is-accessing .gate__noise, .gate.is-accessing .gate__log { opacity: 0; }
.gate__acc { display: block; font-family: var(--font-mono); font-size: clamp(14px, 1.8vw, 18px); letter-spacing: .3em; color: #9FA3A9; }
.gate__acc i { font-style: normal; animation: caret .5s steps(2) infinite; }
.gate__result .gate__shadow { display: block; margin-bottom: 8px; font-family: var(--font-num); font-weight: 800; font-size: clamp(20px, 3.4vw, 38px); letter-spacing: .12em; color: var(--paper); }
.gate__result b { animation: granted .5s steps(1) both; }
@keyframes granted { 0% { opacity: 0; } 20% { opacity: 1; } 35% { opacity: .3; } 50%, 100% { opacity: 1; } }
.reduce-motion .gate__result b { animation: none; }

/* ============ 01 HERO：固定した画面のまま、コピーが切り替わる ============ */
.hero__story { display: none; }
.has-js:not(.reduce-motion) .hero { --hero-pin: calc(var(--mvh, 1vh) * 200); }
.has-js:not(.reduce-motion) .hero__pin { top: var(--hero-top, 0px); }
.has-js:not(.reduce-motion) .hero .deco-en { display: none; }          /* 欄外の英字は、ストーリーとして中央に出す */
.has-js:not(.reduce-motion) .hero__story {
  display: block; position: absolute; z-index: 5; left: 0; right: 0; top: var(--story-top, 0px); height: var(--story-h, 100vh);
  background: rgba(8,9,11, var(--dim, 0)); pointer-events: none;
}
.hero.is-settled .hero__en { transition: none; opacity: calc(1 - var(--hb, 0)); letter-spacing: calc(.1em + var(--hb, 0) * 1.6em); }
.hero__stmt {
  position: absolute; left: max(20px, calc(50% - var(--wrap) / 2 + var(--u) * 60)); right: 20px; top: 50%; margin: 0;
  font-family: var(--font-num); font-weight: 800; line-height: .94; letter-spacing: -0.03em; color: var(--paper);
}
.hero__stmt--1 { font-size: clamp(56px, 11vw, 172px); transform: translateY(calc(-50% - var(--s1o, 0) * 60px)); opacity: calc(1 - var(--s1o, 0)); }
.hero__stmt--2 { font-size: clamp(36px, 6.8vw, 108px); transform: translateY(-50%); }
.hero__stmt .w { display: inline-block; opacity: var(--t); transform: translateY(calc((1 - var(--t)) * .45em));
  clip-path: inset(-.1em -.06em calc((1 - var(--t)) * 100% - .1em) -.06em); }
.hero__stmt--1 .w { --t: clamp(0, calc(var(--s1, 0) * 6 - var(--i) * 1.2), 1); }
.hero__stmt--2 .w { --t: clamp(0, calc(var(--s2, 0) * 11.5 - var(--i) * 1.2), 1); }
.hero__stmt .w--red { color: #C0473A; }
@media (max-width: 700px) {
  .has-js:not(.reduce-motion) .hero { --hero-pin: calc(var(--mvh, 1vh) * 110); }
  .hero__stmt--1 { font-size: clamp(54px, 17vw, 84px); }
  .hero__stmt--2 { font-size: clamp(28px, 8.6vw, 46px); line-height: 1; }
}

/* ============ 02 RESONANCE：仲間の目元が、1人ずつスキャンされて増えていく ============ */
.reso { position: relative; z-index: 2; background: #060709; overflow-x: clip; }
.reso__pin { position: relative; overflow: hidden; }
.reso__ghost { position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; pointer-events: none;
  font-family: var(--font-num); font-weight: 800; font-size: 15.5vw; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; color: rgba(234,229,217,.045); }
.reso__inner { position: relative; z-index: 2; width: var(--wrap); margin-inline: auto; padding: calc(var(--u) * 50) calc(var(--u) * 60) calc(var(--u) * 50); }
.reso__head { display: flex; align-items: center; gap: calc(var(--u) * 26); }
.reso__head .label__name { padding-left: calc(var(--u) * 16); border-left: 1px solid rgba(234,229,217,.35); }
.reso__title { font-weight: 700; font-size: calc(var(--u) * 26.5); line-height: 1.45; }
.eyes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 11) calc(var(--u) * 12); margin-top: calc(var(--u) * 26); }
.eye { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
.eye__meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: #C0473A; }
.eye__name { font-weight: 700; font-size: 12.5px; color: #C9C5BB; white-space: nowrap; }
.eye__frame { position: relative; flex-basis: 100%; margin-top: 4px; aspect-ratio: 3 / 1; overflow: hidden; background: #030304; border: 1px solid rgba(234,229,217,.14); }
.eye__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eye__frame::after { /* 走査線 */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #E9604F; box-shadow: 0 0 10px 2px rgba(233,96,79,.65); opacity: 0; }
.reso__end { margin-top: calc(var(--u) * 30); text-align: center; }
.reso__en { margin: 0; font-family: var(--font-num); font-weight: 800; font-size: clamp(34px, 6.4vw, 92px); line-height: .95; letter-spacing: -0.03em; }
.reso__en span { display: block; }
.reso__en span:nth-child(2) { color: #C0473A; }
.reso__ja { margin-top: 16px; font-weight: 700; font-size: clamp(16px, 1.9vw, 22px); letter-spacing: .06em; }
.reso__more { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--muted); }
.reso__rest { color: #D7C36A; font-weight: 700; }

/* 動く状態：画面に固定し、--hy（見出しの位置）・各目元の --t・終幕の --e をJSが渡す */
.has-js:not(.reduce-motion) .reso { height: calc(var(--mvh, 1vh) * 340); }
.has-js:not(.reduce-motion) .reso__pin { position: sticky; top: 0; height: calc(var(--mvh, 1vh) * 100); display: grid; align-items: center; }
.has-js:not(.reduce-motion) .reso__inner { padding-top: calc(var(--hud-h) + 8px); padding-bottom: 16px; }
.has-js:not(.reduce-motion) .reso__head { transform: translate3d(0, var(--hy, 0px), 0) scale(var(--hs, 1)); transform-origin: left center; will-change: transform; opacity: calc(1 - var(--e, 0) * .97); }
.has-js:not(.reduce-motion) .eyes { opacity: calc(1 - var(--e, 0) * .72); transform: scale(calc(.98 + var(--e, 0) * .02)); }
.has-js:not(.reduce-motion) .eye { --t: 0; }
.has-js:not(.reduce-motion) .eye__meta, .has-js:not(.reduce-motion) .eye__name { opacity: clamp(0, calc(var(--t) * 3 - 2), 1); }
.has-js:not(.reduce-motion) .eye__frame { opacity: clamp(0, calc(var(--t) * 8), 1); clip-path: inset(0 calc((1 - var(--t)) * 100%) 0 0); border-color: rgba(233,96,79, calc(.6 - var(--t) * .46)); }
.has-js:not(.reduce-motion) .eye__img { filter: grayscale(calc(1 - var(--t))) brightness(calc(.55 + var(--t) * .45)); }
.has-js:not(.reduce-motion) .eye.is-scanning .eye__frame::after { left: calc(var(--t) * 100%); opacity: 1; }
.has-js:not(.reduce-motion) .reso__end { position: absolute; z-index: 3; inset: 0; margin: 0; display: grid; place-content: center; padding: 0 20px; pointer-events: none;
  opacity: var(--e, 0); background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(6,7,9,.9) 30%, rgba(6,7,9,0) 80%); }
.has-js:not(.reduce-motion) .reso__en span { transform: translateY(calc((1 - var(--e, 0)) * 30px)); }
.has-js:not(.reduce-motion) .reso__en span:nth-child(2) { transform: translateY(calc((1 - var(--e, 0)) * 50px)); }
.has-js:not(.reduce-motion) .reso__en span:nth-child(3) { transform: translateY(calc((1 - var(--e, 0)) * 70px)); }

/* 20〜30人を超えたら：2段の帯を、スクロール量に応じて左右逆に流す（自動では動かない） */
.eyes.eyes--rows { grid-template-columns: none; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: clamp(170px, 21vw, 270px); overflow: hidden; }
.eyes--rows .eye:nth-child(odd) { transform: translate3d(var(--x0, 0px), 0, 0); }
.eyes--rows .eye:nth-child(even) { transform: translate3d(var(--x1, 0px), 0, 0); }
html:not(.has-js) .eyes--rows, .reduce-motion .eyes--rows { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

@media (max-width: 1023px) and (min-width: 701px) { .eyes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .reso__inner { padding: 56px 20px 48px; }
  .reso__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .reso__head .label__name { padding-left: 0; border-left: 0; }
  .reso__title { font-size: 21px; }
  .eyes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
  .eye__meta { font-size: 9.5px; letter-spacing: .06em; }
  .eye__name { font-size: 11.5px; }
  .eye__frame { margin-top: 2px; }
  .reso__ghost { font-size: 16vw; top: 62%; }
  .has-js:not(.reduce-motion) .reso { height: calc(var(--mvh, 1vh) * 280); }
  .has-js:not(.reduce-motion) .eyes:not(.eyes--rows) .eye:nth-child(n+9) { display: none; }   /* スマホは8人まで */
  .reso__ja { font-size: 16px; }
}

/* ============ 03 CHECK SHEET → IDENTIFICATION PROCESS ============ */
.idp { display: none; }
.has-js .idp {
  position: sticky; z-index: 4; top: calc(var(--hud-h) + 6px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px;
  margin-top: calc(var(--u) * 20); padding: 10px 14px 12px; background: rgba(8,9,11,.94); border: 1px solid rgba(234,229,217,.22);
}
.idp__q { margin: 0; font-family: var(--font-num); font-weight: 800; font-size: 15px; letter-spacing: .08em; }
.idp__q b { color: #C0473A; font-weight: 800; }
.idp__rate { margin: 0; display: flex; align-items: baseline; gap: 6px; font-family: var(--font-num); font-weight: 800; }
.idp__label { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .16em; color: var(--muted); }
.idp__num { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; }
.idp__pct { font-size: 14px; }
.idp__bar { flex-basis: 100%; display: flex; gap: 3px; height: 4px; }
.idp__bar i { flex: 1; background: rgba(234,229,217,.16); transition: background-color .25s; }
.idp__bar i.is-on { background: #C0473A; }
.idp.is-full .idp__bar i { background: #D7C36A; }
.idp.is-full .idp__num { color: #D7C36A; }
.idp.is-bump .idp__num { animation: idp-bump .35s ease-out; }
@keyframes idp-bump { 0% { transform: translateY(-4px); opacity: .4; } 100% { transform: none; opacity: 1; } }
.check__stamp { display: table; margin: 0 0 12px; padding: 3px 12px; border: 3px solid #C0473A; color: #D9564A; font-family: var(--font-num); font-weight: 800; font-size: 20px; letter-spacing: .22em; line-height: 1.2; transform: rotate(-6deg); }
.check:has(.check__box:checked) .check__stamp { animation: stamp .42s cubic-bezier(.2,1.4,.4,1) both; }
.reduce-motion .check:has(.check__box:checked) .check__stamp, .reduce-motion .idp.is-bump .idp__num { animation: none; }
@media (max-width: 700px) { .idp__q { font-size: 13px; } .idp__num { font-size: 24px; } .has-js .idp { padding: 8px 12px 10px; } }

/* ============ MISSION：縦スクロールで、MISSION FILE が右から左へめくれる ============ */
.has-js:not(.reduce-motion) .mission__roll { margin-left: calc(-1 * var(--m-off, 0px)); width: var(--m-vw, 100vw); }
.has-js:not(.reduce-motion) .mission__list { display: flex; width: max-content; }
.has-js:not(.reduce-motion) .mission__item { flex: 0 0 var(--m-vw, 100vw); padding-inline: var(--m-off, 0px); box-sizing: border-box; }

/* ============ 04 GATHER：大きく動いた直後なので、静かに順番に出すだけ ============ */
.js [data-reveal] .about__list > div { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.js [data-reveal].is-in .about__list > div { opacity: 1; transform: none; }
.js [data-reveal].is-in .about__list > div:nth-child(1) { transition-delay: .3s; }
.js [data-reveal].is-in .about__list > div:nth-child(2) { transition-delay: .45s; }
.js [data-reveal].is-in .about__list > div:nth-child(3) { transition-delay: .6s; }
.js [data-reveal].is-in .about__list > div:nth-child(4) { transition-delay: .75s; }
.js [data-reveal].is-in .about__list > div:nth-child(5) { transition-delay: .9s; }
.js [data-reveal].is-in .about__list > div:nth-child(6) { transition-delay: 1.05s; }

/* ============ 05 MEMBER DATABASE：走査線が1回走ってから IDENTIFIED ============ */
.has-js:not(.reduce-motion) .agents--carousel > li:not(.is-center) { transform: scale(.92); opacity: .5; }
.agent__scan { display: none; color: #E9604F; }
.agent.is-scan .agent__off { display: none; }
.agent.is-scan .agent__scan { display: inline; animation: caret .3s steps(2) infinite; }
.agent__scanline { position: absolute; z-index: 3; left: 0; right: 0; top: -44px; height: 44px; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(233,96,79,0), rgba(233,96,79,.22)); border-bottom: 2px solid #E9604F; box-shadow: 0 6px 14px -4px rgba(233,96,79,.7); }
.agent.is-scan .agent__scanline { animation: scanline .46s cubic-bezier(.45,0,.55,1) both; }
@keyframes scanline { 0% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--stage-h) + 44px)); } }
.agent.is-scan .agent__img { filter: brightness(.35) saturate(0) drop-shadow(0 0 1px rgba(233,96,79,.6)); }
.reduce-motion .agent__scanline { display: none; }

/* ============ 名鑑のあと：ONE MORE FILE. → FILE ?? UNKNOWN → YOU. ============ */
.nextfile { position: relative; z-index: 2; background: #000; overflow-x: clip; }
.nextfile__inner { position: relative; width: var(--wrap); margin-inline: auto; padding: 96px calc(var(--u) * 60) 96px;
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 28px calc(var(--u) * 50); }
.nf__one { grid-column: 1 / -1; margin: 0; font-family: var(--font-num); font-weight: 800; font-size: clamp(48px, 9vw, 140px); line-height: .92; letter-spacing: -0.03em; }
.nf__file { display: grid; gap: 10px; width: clamp(210px, 22vw, 290px); padding: 14px 16px 16px; border: 2px dashed rgba(234,229,217,.4); background: #060709; }
.nf__top, .nf__name { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: #8A8E95; white-space: nowrap; }
.nf__status, .nf__name i { font-style: normal; }
.nf__status i { font-style: normal; }
.nf__unk { color: #C0473A; }
.nf__you-st { display: none; color: #D7C36A; }
.nf__frame { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid rgba(234,229,217,.18);
  background: radial-gradient(ellipse 60% 45% at 50% 42%, rgba(234,229,217,.07), transparent 70%); }
.nf__q { font-family: var(--font-num); font-weight: 800; font-size: clamp(80px, 9vw, 130px); line-height: 1; color: rgba(234,229,217,.24); }
.nf__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #E9604F; box-shadow: 0 0 12px 2px rgba(233,96,79,.7); opacity: 0; }
.nf__name { font-size: 12px; }
.nf__big { margin: 0; font-family: var(--font-num); font-weight: 800; font-size: clamp(80px, 13vw, 200px); line-height: .85; letter-spacing: -0.04em; color: var(--paper); }
.nf__title { margin-top: 18px; font-weight: 900; font-size: clamp(22px, 2.8vw, 36px); line-height: 1.4; }
.nf__you .cta-wrap { margin-top: 22px; }
.nf__note { margin-top: 12px; }
.nf__how { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(234,229,217,.5); }
.nextfile.is-matched .nf__unk, html:not(.has-js) .nf__unk, .reduce-motion .nf__unk { display: none; }
.nextfile.is-matched .nf__you-st, html:not(.has-js) .nf__you-st, .reduce-motion .nf__you-st { display: inline; }
.nextfile.is-matched .nf__file, html:not(.has-js) .nf__file, .reduce-motion .nf__file { border-style: solid; border-color: rgba(215,195,106,.8); }
.nextfile.is-matched .nf__q, html:not(.has-js) .nf__q, .reduce-motion .nf__q { color: #D7C36A; }

/* 動く状態：--a（ONE MORE FILE.）--b（ファイルのスキャン）--c（YOU.）をJSが渡す */
.has-js:not(.reduce-motion) .nextfile { height: calc(var(--mvh, 1vh) * 280); }
.has-js:not(.reduce-motion) .nextfile__pin { position: sticky; top: 0; height: calc(var(--mvh, 1vh) * 100); display: grid; align-items: center; overflow: hidden; }
.has-js:not(.reduce-motion) .nextfile__inner { padding-top: calc(var(--hud-h) + 12px); padding-bottom: 24px; }
.has-js:not(.reduce-motion) .nf__one { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; text-align: center;
  opacity: calc(var(--a, 0) - var(--b, 0) * 2.6); transform: translateY(calc(-50% + (1 - var(--a, 0)) * 40px)) scale(calc(1 - var(--b, 0) * .12)); letter-spacing: calc(-0.03em + (1 - var(--a, 0)) * .2em); pointer-events: none; }
.has-js:not(.reduce-motion) .nf__file { opacity: clamp(0, calc(var(--b, 0) * 3 - .6), 1); clip-path: inset(0 0 calc((1 - clamp(0, var(--b, 0) * 1.6, 1)) * 100%) 0); }
.has-js:not(.reduce-motion) .nf__scan { opacity: calc(var(--b, 0) * 8 * (1 - var(--b, 0))); transform: translateY(calc(var(--scan, 0) * var(--fh, 300px))); }
.has-js:not(.reduce-motion) .nf__you { opacity: var(--c, 0); transform: translateX(calc((1 - var(--c, 0)) * 40px)); pointer-events: none; }
.has-js:not(.reduce-motion) .nextfile.is-you .nf__you { pointer-events: auto; }   /* 見えないあいだは押せない（キーボードで来たらJSが最後の画面を見せる） */
.has-js:not(.reduce-motion) .nf__big { letter-spacing: calc(-0.04em + (1 - var(--c, 0)) * .3em); }
@media (max-width: 700px) {
  .nextfile__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 72px 20px; gap: 22px; }
  .nf__file { width: min(56vw, 220px); }
  .nf__frame { aspect-ratio: 1 / 1; }
  .nf__q { font-size: 76px; }
  .nf__big { font-size: clamp(64px, 22vw, 96px); }
  .nf__title { font-size: 21px; margin-top: 12px; }
  .nf__you .cta-wrap { display: flex; justify-content: center; }
  .has-js:not(.reduce-motion) .nextfile { height: calc(var(--mvh, 1vh) * 230); }
  .has-js:not(.reduce-motion) .nextfile__inner { gap: 16px; }
  .has-js:not(.reduce-motion) .nf__you { transform: translateY(calc((1 - var(--c, 0)) * 24px)); }
}
#next-title:focus { outline: none; }

/* ============ 06 HOW TO JOIN → MISSION START ============ */
.steps__start { display: flex; align-items: center; gap: 10px; margin: calc(var(--u) * 20) 0 0 calc(var(--u) * 64); font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .26em; color: #8E3A31; }
.steps__caret { font-size: 10px; animation: caret 1.1s steps(2) infinite; }
.steps__txt { display: block; }
.steps__mission { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .2em; color: #8E3A31; }
.steps { margin-top: calc(var(--u) * 12); }
.js [data-reveal] .steps li, .js [data-reveal] .steps__start { opacity: 0; transform: translateX(-18px); transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
.js [data-reveal].is-in .steps__start { opacity: 1; transform: none; transition-delay: .25s; }
.js [data-reveal].is-in .steps li { opacity: 1; transform: none; }
.js [data-reveal].is-in .steps li:nth-child(1) { transition-delay: .5s; }
.js [data-reveal].is-in .steps li:nth-child(2) { transition-delay: .75s; }
.reduce-motion .steps__caret { animation: none; }
@media (max-width: 700px) { .steps__start { margin-left: 0; margin-top: 18px; font-size: 12px; } .steps { margin-top: 10px; } }

/* ============ 07 FINAL：エンディング ============ */
.manifesto { margin: 0 0 calc(var(--u) * 34); padding-left: calc(var(--u) * 40); font-family: var(--font-num); font-weight: 800; letter-spacing: -0.02em; }
.manifesto__line { margin: 0; font-size: clamp(30px, 5.2vw, 76px); line-height: 1; color: var(--paper); }
.manifesto__line--2 { margin-top: calc(var(--u) * 14); color: #8A8E95; }
.manifesto__line .mw--y { color: #D7C36A; }
.manifesto__join { margin: calc(var(--u) * 30) 0 0; line-height: 1; }
.manifesto__join .mw:first-child { font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: .4em; color: #C0473A; }
.manifesto__join .mw--big { margin-top: 8px; font-size: clamp(38px, 7.4vw, 112px); letter-spacing: -0.03em; color: var(--paper); }
.mw { display: inline-block; }
.js .manifesto .mw { opacity: 0; transform: translateY(.35em); clip-path: inset(-.1em -.05em 100% -.05em); transition: opacity .5s, transform .6s cubic-bezier(.22,1,.36,1), clip-path .6s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * .12s); }
.js .manifesto.is-in .mw { opacity: 1; transform: none; clip-path: inset(-.1em -.05em -.1em -.05em); }
@media (max-width: 700px) {
  .manifesto { padding: 0 20px; margin-bottom: 28px; }
  .manifesto__line { font-size: clamp(28px, 9vw, 40px); }
  .manifesto__join .mw--big { font-size: clamp(34px, 11vw, 48px); }
}

/* 背の低いスマホ（iPhone SE など）：目元は6人まで・見出しを小さく */
@media (max-width: 700px) and (max-height: 720px) {
  .has-js:not(.reduce-motion) .eyes:not(.eyes--rows) .eye:nth-child(n+7) { display: none; }
  .has-js:not(.reduce-motion) .reso__title { font-size: 18px; }
}

/* 名鑑の目次：横に流さず、1行4人までの一覧で全員を見せる（スクロールなしで目当ての人へ飛べる） */
.carousel__index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 760px; margin: 16px auto 0; padding: 0 20px; overflow: visible; }
.carousel__index li { min-width: 0; }
.carousel__index button { width: 100%; min-width: 0; height: 40px; justify-content: flex-start; padding: 0 10px; overflow: hidden; }
.carousel__index button > .carousel__nm { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .carousel__index { gap: 5px; padding: 0 16px; overflow: visible; }
  .carousel__index button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; height: 44px; padding: 0 6px; }
  .carousel__no { font-size: 9px; }
  .carousel__nm { font-size: 11.5px; }
}
.carousel__index, .carousel__ctrl { position: relative; z-index: 3; }   /* 両端の暗いぼかしを目次・矢印に重ねない */
.carousel__index button { align-items: center; }
@media (max-width: 700px) { .carousel__index button { align-items: flex-start; } }

/* 02 共鳴：メンバー全員を並べる（2026-10-04〜）。人数が増えたら列を増やして1画面に収める */
.eyes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * 9) calc(var(--u) * 9); }
.eye__meta { font-size: 9.5px; letter-spacing: .08em; }
.eye__name { font-size: 11.5px; }
@media (max-width: 1023px) and (min-width: 701px) { .eyes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .eyes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 7px; margin-top: 14px; }
  .has-js:not(.reduce-motion) .eyes:not(.eyes--rows) .eye:nth-child(n+7),
  .has-js:not(.reduce-motion) .eyes:not(.eyes--rows) .eye:nth-child(n+9) { display: flex; }
  .eye { gap: 0 5px; }
  .eye__meta { font-size: 8.5px; letter-spacing: 0; }
  .eye__name { font-size: 10.5px; }
}
/* 背の低いスマホ：4列にして、番号は省く */
@media (max-width: 700px) and (max-height: 720px) {
  .eyes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 5px; }
  .has-js:not(.reduce-motion) .eye__meta { display: none; }
  .eye__name { font-size: 10px; }
}
/* 共鳴の目元には名前・番号を付けない（目元だけを並べる。名前は画像の代替テキストに入れている） */
.eye__frame { margin-top: 0; }