*{box-sizing:border-box}
/* 横のはみ出しは html 側で止める。
hidden にすると position:sticky が死ぬので clip（ワザ帳 J3）。
ただし body に書くと、片方が clip でもう片方が visible のとき
visible が auto になり、body 自身がスクロールコンテナになる。
すると子の animation-timeline:view() が「スクロールしない容器」を掴んで
丸ごと無効になる。スクロール連動を使うなら、ここは html に置く。 */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overscroll-behavior-y:none;
overflow-x:clip}
body{
margin:0; background:var(--ink); color:var(--fg);
font-family:var(--sans); font-size:var(--t-body); line-height:1.95;
letter-spacing:.02em; min-height:100svh;
}
img{max-width:100%; display:block}
a{color:inherit}
/* BudouX が語の途中で切ってしまう語に付ける。
「購入方法」を「購入方／法は」で割っていた */
.nb{white-space:nowrap}
/* ── キーボードで辿るとき ──
既定の輪郭はボタンの文字色を継ぐので、闇の上では地とほぼ同じ色になって見えない。
光の色で縁取り、紙の上でも闇の上でも分かるよう外側に暗い縁を添える */
:focus-visible{outline:2px solid var(--c1); outline-offset:3px;
box-shadow:0 0 0 5px rgba(12,8,18,.35)}
::selection{background:rgba(255,46,136,.28)}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.label{font-family:var(--serif); font-size:12px; letter-spacing:.36em;
text-transform:uppercase; color:var(--fg-faint); margin:0 0 1.1em;
font-variant-numeric:lining-nums}
.h2{font-family:var(--min); font-weight:600; font-size:var(--t-h2);
letter-spacing:.12em; line-height:1.5; margin:0}
.note{font-size:var(--t-small); color:var(--fg-faint); letter-spacing:.06em;
margin:2.2em 0 0; max-width:34em}
.lead{font-family:var(--min); font-size:var(--t-lead); line-height:2.05;
letter-spacing:.06em; margin:0 0 1.6em; max-width:30em}
.body{color:var(--fg-soft); max-width:34em; margin:0}
/* 見出しは上から落ちてくる。JSが無い環境では最初から見えている */
.mask{display:block; overflow:hidden; padding-bottom:.06em}
.mask>span{display:block; transition:transform 1.15s var(--ease)}
.js .mask>span{transform:translateY(-118%)}
.js .is-in .mask>span,.js .overture .mask>span{transform:none}
/* 節も上から落ちてくる。ページ全体の筋が「落下」なので、
本文だけ下から上げるとここだけ逆を向く */
.js [data-fall]{opacity:0; transform:translateY(-26px);
transition:opacity 1.1s var(--ease), transform 1.15s var(--ease)}
.js [data-fall].is-in{opacity:1; transform:none}
/* ══ 序：紙 ═══════════════════════════════════════ */
.overture{
position:relative; min-height:100svh; display:flex; flex-direction:column;
justify-content:center; color:var(--paper-ink);
padding-block:clamp(40px,7vh,88px);
/* 人物は right:0 に付いたまま 1.05 倍まで寄る。中心から拡げるので、
幅の 2.5% が右端からはみ出してページを横へ伸ばしていた。ここで切る。
切るのは横だけ。縦も切ると、スクロールで沈んでいく文字の塊（最大 15vh 下がる）が
箱の下端で切られ、ヒーローの協賛が途中から欠けて消えていった */
overflow-x:clip; overflow-y:visible;
}
.overture__in{position:relative; z-index:2; max-width:var(--maxw);
margin-inline:auto; width:100%; padding-inline:var(--pad)}
.overture .kicker{font-family:var(--serif); font-size:clamp(10px,.9vw + 6px,13px);
letter-spacing:.4em; text-transform:uppercase; color:var(--paper-soft);
margin:0 0 1.1em; font-variant-numeric:lining-nums}
/* 2行。団体と催しの種類、その下に催しの名前と読み。和文は欧文ほど字間を開けない */
.kicker__org,.kicker__ttl{display:block}
/* 1行目（団体と催しの種類）が主。大きく濃く。2行目の読みは添えるだけ */
.overture .kicker__org{font-size:clamp(14px,.9vw + 9px,20px); letter-spacing:.2em; color:var(--paper-ink)}
.kicker__org .kicker__ja{font-weight:600; letter-spacing:.12em}
/* 和文は1つの塊で折る（狭い画面で「行」だけが次の行へ落ちた） */
.kicker__ja{display:inline-block; white-space:nowrap}
.kicker__ttl{margin-top:.7em; color:var(--paper-soft)}
.kicker__ja{font-family:var(--min); letter-spacing:.16em; text-transform:none}
.kicker__org .kicker__ja{margin-left:.6em}
.wordmark{margin:0; position:relative; z-index:2; font-weight:400}
/* 題字はロゴの絵。絵は PARADISE の左右いっぱいで切ってあるので、絵の幅＝題字の幅。
ロゴの字形は旧来の組みより縦に長い。同じ幅で置くと協賛が画面の外へ落ちるので、
幅は級数 × 3.6（旧来は約 4.75）に絞る（上に2行のキッカー、下に時間と住所が足されたぶんも詰めた）。下の帯と絵のサインは測った幅（--wm-w）に付いてくる */
.wm-txt{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.wm-art{position:relative; display:block; width:calc(var(--t-display) * 3.6); max-width:100%;
aspect-ratio:1340/978}
.wm-art img{position:absolute; inset:0; display:block; width:100%; height:100%}
/* 左から満ちる。境目はぼかしたマスクを横へ送る。
既定は見えている状態。隠すのは JS が動く環境だけ（ワザ帳 J12） */
.js .wm-art img{
-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
-webkit-mask-size:260% 100%; mask-size:260% 100%;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:100% 0; mask-position:100% 0;
transition:-webkit-mask-position 2.7s cubic-bezier(.34,.06,.16,1) var(--d,0ms),
mask-position 2.7s cubic-bezier(.34,.06,.16,1) var(--d,0ms)}
.js .is-lit .wm-art img{-webkit-mask-position:0 0; mask-position:0 0}
/* 読み込みで、上の情報から順に出す。
ロゴに塗りが満ちきるのを待ってから、章・日程が続く */
.js .overture__in > *{opacity:0; transform:translateY(-16px);
transition:opacity 1.5s var(--ease), transform 1.7s var(--ease)}
.js .overture__in > *:nth-child(1){transition-delay:.3s}
.js .overture__in > *:nth-child(2){transition-delay:.1s}
.js .overture__in > *:nth-child(3){transition-delay:2.1s}
.js .is-lit .overture__in > *{opacity:1; transform:none}
/* ── 絵のサイン ──
LOST の右、題字の右端（JSが測る --wm-w）をまたぐ位置に大きく置き、
章の行の高さまで垂らす。寸法は題字の幅と級数に比例させて、画面幅が変わっても据わりを保つ。
題字と同じく、墨に飲まれるにつれて沈む */
.sign{position:absolute; z-index:2; pointer-events:none;
left:calc(var(--wm-w,600px) * 1.16); top:calc(100% + var(--t-display) * .14);
translate:-50% -50%;
width:calc(var(--wm-w,600px) * .9); height:auto;
opacity:calc(.92 - var(--q,0) * 1.2)}
/* ── ページをまたぐ遷移（View Transitions）──
トップのサインと Rui のページのサインに同じ名前を付け、押すとサインがそのまま伸びて移る。
戻るときは逆向きに縮む。非対応のブラウザでは何も起きず、普通に切り替わるだけ */
@view-transition{navigation:auto}
.sign-link .sign{view-transition-name:rui-sign}
::view-transition-group(rui-sign){animation-duration:.95s;
animation-timing-function:cubic-bezier(.6,.05,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s}
@media (prefers-reduced-motion:reduce){
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}
/* サインは Rui のページへの入口。触れると桃色に灯り、少し起き上がる */
.sign-link .sign{pointer-events:auto; cursor:pointer;
transition:filter .6s var(--ease), scale .6s var(--ease)}
@media (hover:hover){
.sign-link:hover .sign{scale:1.04;
filter:drop-shadow(0 0 10px rgba(255,46,136,.55)) drop-shadow(0 0 30px rgba(255,46,136,.3))}
}
.sign-link:focus-visible{outline:none; box-shadow:none}
.sign-link:focus-visible .sign{outline:2px solid var(--c1); outline-offset:6px}
/* 狭い画面は題字が組の幅いっぱいなので、右へは出せない。題字の右端に合わせて LOST の行に添える */
/* 題字はスマホでは半分の大きさで左に置き、空いた右へサインを大きく出す（LOST の行に添える） */
@media (max-width:640px){
.sign{left:calc(var(--wm-w,48%) * .8); top:auto; bottom:calc(var(--t-display) * -.62);
translate:0 0; width:min(52vw,260px)}
}
/* ── ヒーローの人物 ─────────────────────────────────
第壱章のポスターと同じ切り方。顔を右端で見切る。
絵の地はほぼ白なので、明るさを持ち上げてから multiply で置くと
四角い枠が消えて、墨と髪と目だけが紙に残る（羽の映像と同じ手）。
合成もマスクも .hero-fig 自体に掛ける。子に掛けると、
この層の中だけで合成されて紙に効かない（ワザ帳 Y1）。
左端と下端はマスクで紙へ溶かす。左は題字とぶつかる帯を作らないため、
下は肩のあたりで紙に還すため。2枚重ねて重なりだけ残す（intersect）。
旧WebKit用に source-in も併記。
下のフェードを直線のグラデーションで書くと、始点で傾きが折れて
そこが薄い帯の縁として見える。減衰を多段のストップで寝かせて、
どこから薄くなったのか分からないようにしてある。 */
.hero-fig{position:absolute; right:0; top:0; bottom:0; z-index:1;
width:min(64vw,960px); pointer-events:none; overflow:clip;
mix-blend-mode:multiply;
/* 墨に飲まれるにつれて一緒に沈む */
opacity:calc(1 - var(--q,0) * 1.35);
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 36%),
linear-gradient(180deg,
#000 72.0%, rgba(0,0,0,0.985) 74.5%, rgba(0,0,0,0.945) 77.1%,
rgba(0,0,0,0.87) 79.6%, rgba(0,0,0,0.75) 82.2%, rgba(0,0,0,0.6) 84.7%,
rgba(0,0,0,0.44) 87.3%, rgba(0,0,0,0.29) 89.8%, rgba(0,0,0,0.165) 92.4%,
rgba(0,0,0,0.07) 94.9%, rgba(0,0,0,0.02) 97.5%, transparent 100.0%);
mask-image:linear-gradient(90deg, transparent 0%, #000 36%),
linear-gradient(180deg,
#000 72.0%, rgba(0,0,0,0.985) 74.5%, rgba(0,0,0,0.945) 77.1%,
rgba(0,0,0,0.87) 79.6%, rgba(0,0,0,0.75) 82.2%, rgba(0,0,0,0.6) 84.7%,
rgba(0,0,0,0.44) 87.3%, rgba(0,0,0,0.29) 89.8%, rgba(0,0,0,0.165) 92.4%,
rgba(0,0,0,0.07) 94.9%, rgba(0,0,0,0.02) 97.5%, transparent 100.0%);
-webkit-mask-composite:source-in;
mask-composite:intersect}
/* 枠を広げて人物を左へ出し、顔から肩まで見えるようにした（64vw / 最大960px）。
広げたぶん枠は絵より横長になったので、cover の切り落としは縦側で起きる。
下端で揃えているので、切れるのは頭のてっぺん側。そこは切れてよい。
下端は肩のあたりでフェードに入る。 */
.hero-fig img{position:absolute; left:0; bottom:0; width:100%; height:100%;
object-fit:cover; object-position:50% 100%;
filter:brightness(1.07) contrast(1.03)}
/* 目の炎（assets/js/eyefire.js）。人物の層の中に置くので、寄りも沈みも一緒に掛かる。
位置と大きさは JS が絵の座標から出す */
.eyefire{position:absolute; z-index:1; pointer-events:none}
/* 闇から始まる回は出さない。地が黒いと multiply では何も残らない */
.is-night .hero-fig{display:none}
/* 題字の下の帯。章は左、開催情報は右へ振って、組の幅を使い切る */
/* 開催情報はサインより手前に置く（サインが Takasaki の T にかぶるため） */
.overture__foot{position:relative; z-index:3; display:flex; flex-wrap:wrap; align-items:baseline;
justify-content:space-between; gap:clamp(12px,2vh,26px) clamp(16px,3vw,56px);
margin:clamp(22px,3.4vh,48px) 0 0;
/* 幅は題字に合わせる。JSが測って --wm-w に入れる。
ただし日程と会場（時間・住所つき）が1行に並ぶ幅は確保する。狭いと会場が下の段へ落ち、協賛が画面の外へ押し出される */
max-width:max(var(--wm-w,0px), 560px)}
.overture__ch{font-family:var(--min); font-weight:400;
font-size:clamp(15px,1.4vw + 10px,23px); letter-spacing:.3em;
margin:0; color:var(--paper-ink)}
.overture__ch span{color:#C2185B}
.overture__meta{display:flex; flex-wrap:wrap; gap:clamp(24px,3vw,56px); margin:0}
.overture__meta div{display:block}
.overture__meta dt{font-family:var(--serif); font-size:11px; letter-spacing:.3em;
color:var(--paper-soft); margin:0 0 .5em}
/* 日付と会場は途中で折らない。折れると「2026.12.26」と「SAT」が
別の行に落ちて、書き損じのように見える */
.overture__meta dd{margin:0; font-size:clamp(17px,1vw + 11px,21px); letter-spacing:.08em; font-weight:500;
font-variant-numeric:lining-nums; white-space:nowrap}
.overture__meta dd span{font-family:var(--serif); font-size:.8em; letter-spacing:.2em;
color:var(--paper-soft); margin-left:.5em}
/* 見出しは欧文（Date・Venue、2026-10-15 に和文から変更）。題字と同じディドーの大文字で */
.overture__meta dt{font-family:var(--serif); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:#C2185B}
/* 時間と住所。本行の下に小さく添える */
.overture__sub{display:block; margin-top:.45em; font-family:var(--min);
font-size:max(13px,.72em); letter-spacing:.1em; font-weight:400; color:var(--paper-ink)}
/* ══ 舞い落ちる羽 ═══════════════════════════════════
支給の実写ループ（白い羽／黒地）を2面ぶん敷く。
闇の上は screen で乗せて金に寄せ、紙の上は反転して multiply で沈める。
地の明るさに合わせて、この2面を入れ替える。 */
.veil{position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden}
.veil__v{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
pointer-events:none; transform:scale(var(--v-scale,1.15)); transform-origin:52% 44%}
/* 合成は .veil 自体に掛ける。子に掛けると、この層の中だけで合成されて効かない */
.veil--paper{opacity:var(--paper-mix,1); mix-blend-mode:multiply}
.veil--night{opacity:calc(1 - var(--paper-mix,1)); mix-blend-mode:screen}
.veil.is-off{display:none}
.veil--night{--v-scale:1.32}
/* 中央は抜く。羽は画面のまわりを流れるだけにして、量を減らす */
.veil--night{
-webkit-mask-image:radial-gradient(ellipse 74% 66% at 50% 46%,
rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.62) 68%, #000 92%);
mask-image:radial-gradient(ellipse 74% 66% at 50% 46%,
rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.62) 68%, #000 92%)}
.veil--paper{
-webkit-mask-image:radial-gradient(ellipse 92% 84% at 46% 44%,
rgba(0,0,0,.12) 0%, rgba(0,0,0,.5) 52%, #000 88%);
mask-image:radial-gradient(ellipse 92% 84% at 46% 44%,
rgba(0,0,0,.12) 0%, rgba(0,0,0,.5) 52%, #000 88%)}
.veil--paper{--v-scale:1.5}
.veil__v{transition:opacity .9s ease}
.veil--night .veil__v{opacity:calc(.34 * var(--veil-strength,1));
filter:contrast(1.25) brightness(.96) sepia(.62) saturate(2.1) hue-rotate(-14deg)}
/* 紙の上は密度が勝ちすぎるので、弱い羽を飛ばして芯だけ残す */
.veil--paper .veil__v{opacity:calc(.54 * var(--veil-strength,1));
filter:invert(1) brightness(1.22) contrast(2.1) sepia(.45) saturate(1.7) hue-rotate(-12deg)}
/* ══ ノイズ（闇に入ってから出る） ═══════════════════
支給の古いフィルムの素材を反転して screen で乗せる。
反転すると地は黒に落ちるので、埃と傷の筋だけが光として足される。
暗さは減らず、文字の上に被る面積も小さい。
反転で明るくなってしまう四隅は、マスクで抜く。 */
.film{position:fixed; inset:0; z-index:4; pointer-events:none; overflow:hidden;
mix-blend-mode:screen; opacity:calc((1 - var(--paper-mix,1)) * .72);
-webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 48%,
#000 0%, rgba(0,0,0,.9) 58%, rgba(0,0,0,.42) 82%, rgba(0,0,0,0) 98%);
mask-image:radial-gradient(ellipse 78% 72% at 50% 48%,
#000 0%, rgba(0,0,0,.9) 58%, rgba(0,0,0,.42) 82%, rgba(0,0,0,0) 98%)}
.film video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:invert(1) grayscale(1) brightness(1.5) contrast(1.7)}
/* ══ 紙から闇へ落ちる区間 ═══════════════════════════ */
.dawn{position:relative; z-index:1; background:var(--paper); isolation:isolate}
/* 落ちていく区間。地は紙のまま。墨は .wash が覆っていく */
/* 水滴が落ちているあいだのスクロールを長く取る。
コピーは下寄りに置く。中央に置くと、読める濃さになった頃には
もう画面の上へ抜けていて、読む時間が残らない */
.descent{min-height:clamp(980px,190vh,2000px); display:flex; flex-direction:column; justify-content:flex-start;
padding-block:clamp(40px,8vh,110px) clamp(70px,20vh,230px);
position:relative; z-index:2}
/* ── 墨に飲まれる ─────────────────────────────────
グラデーションではなく、支給の水墨の映像を multiply で重ねる。
白い紙は素通しになり、墨の広がったところだけが黒くなる。
再生はスクロール量で送るので、指を止めれば墨も止まる。 */
/* 層の出は生の進み具合(--t)で。暗さ(--q)に紐づけると、
水滴のあいだ --q が 0 なので、肝心の水滴が見えない */
.wash{position:fixed; inset:0; z-index:1; pointer-events:none;
mix-blend-mode:multiply; opacity:clamp(0, var(--t,0) * 14, 1)}
.wash img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
image-rendering:auto}
/* ── 縦画面では墨を寝かせて敷く ─────────────────────
素材は16:9。縦長の画面に cover で敷くと 1.5倍に伸びて横幅の3/4が切れ、
はじけた墨の「芯」だけが画面を覆う。紙から一足飛びに真っ黒になり、
広がっていく様子が丸ごと画面の外で起きてしまう。
画面の長辺へ90°寝かせると、素材の横幅がまるごと画面の縦に収まる。
墨は丸く、紙の目も方向を持たないので、回したことは見えない。
箱は回す前の寸法で書くので、縦横が入れ替わる。素材の紙は真っ白ではなく
（203〜238）ムラもあるため、1pxでも足りないとそこに継ぎ目が出る。
ビューポート単位は層の実寸とずれることがあるので、JS が層を測って渡す。
img の既定の max-width:100% は、回す前の「横に長い箱」を潰すので外す。 */
@media (max-aspect-ratio:4/5){
.wash img{max-width:none; inset:auto; top:50%; left:50%;
width:var(--wash-w,100vh); height:var(--wash-h,100vw);
transform:translate(-50%,-50%) rotate(90deg)}
}
/* 墨の最後は真っ黒ではないので、この下の地とぴったり同じ色で締める。
合成を掛けずに重ねないと、映像の終わりに継ぎ目が出る */
.washfill{position:fixed; inset:0; z-index:1; pointer-events:none; background:var(--ink);
opacity:clamp(0, (var(--q,0) - .58) * 3.2, 1)}
/* ══ 闇 ═══════════════════════════════════════════ */
/* z-index を持たせない。持たせると重ね順の入れ物になり、
中の節をいくら上げても羽（固定・z3）より上へ出られない */
.night{position:relative; background:var(--ink)}
.night__light{position:sticky; top:0; z-index:2; height:100svh;
margin-bottom:-100svh; pointer-events:none; overflow:hidden}
.glow{position:absolute; left:50%; top:-14vmax; width:88vmax; height:88vmax;
transform:translateX(-50%); border-radius:50%; mix-blend-mode:screen;
opacity:0; transition:opacity 1.4s ease; animation:pulse 5.4s ease-in-out infinite}
/* 球体が中心へ来るのに合わせて、そのまま闇の光になる */
.glow--1{opacity:var(--q,0); background:radial-gradient(circle at 50% 50%,
rgba(255,46,136,.26) 0%, rgba(170,30,116,.14) 26%, rgba(70,14,62,.08) 47%, rgba(0,0,0,0) 68%)}
body.ch-2 .glow--1,body.ch-3 .glow--1{opacity:0}
/* まだ来ていない二章の前では、壱章の光を落とす。
面の光を引くと、弐章の水色と参章の金だけが闇に残る */
body.is-soon .glow--1{opacity:calc(var(--q,0) * .1)}
.glow--2{background:radial-gradient(circle at 50% 50%,
rgba(55,214,198,.20) 0%, rgba(24,118,118,.11) 26%, rgba(10,50,58,.07) 47%, rgba(0,0,0,0) 68%)}
.glow--3{background:radial-gradient(circle at 50% 50%,
rgba(217,178,92,.22) 0%, rgba(148,108,40,.12) 26%, rgba(58,42,12,.07) 47%, rgba(0,0,0,0) 68%)}
body.ch-2 .glow--1,body.ch-3 .glow--1{opacity:0}
/* 弐章・参章の光。いまは三章を貼り重ねていないので点かない
（body.ch-2 / ch-3 を立てるものが無い）。日程が決まって、
それぞれが自分の節を持ったときにここへ戻ってくる */
body.ch-2 .glow--2{opacity:.82}
body.ch-3 .glow--3{opacity:.46}
/* 参章だけ、まわりを追加で締める */
.night__light::after{content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
opacity:0; transition:opacity 1.4s ease;
background:radial-gradient(ellipse 94% 88% at 50% 44%,
rgba(0,0,0,0) 54%, rgba(3,1,5,.46) 84%, rgba(3,1,5,.82) 100%)}
body.ch-3 .night__light::after{opacity:1}
/* ドクン、ドクン。二拍打って、あとは間 */
@keyframes pulse{
0% {transform:translateX(-50%) scale(1); filter:brightness(.78);
animation-timing-function:cubic-bezier(.2,.9,.3,1)}
7% {transform:translateX(-50%) scale(1.07); filter:brightness(1.42);
animation-timing-function:cubic-bezier(.4,0,.6,1)}
16% {transform:translateX(-50%) scale(1.005); filter:brightness(.88);
animation-timing-function:cubic-bezier(.2,.9,.3,1)}
24% {transform:translateX(-50%) scale(1.045); filter:brightness(1.2);
animation-timing-function:cubic-bezier(.35,0,.5,1)}
40% {transform:translateX(-50%) scale(1); filter:brightness(.78)}
100%{transform:translateX(-50%) scale(1); filter:brightness(.78)}
}
/* 締めるのは四隅だけ。落ち始めを外へ押し出して、読める面積を先に確保する */
.vig{position:absolute; inset:0; z-index:1;
background:radial-gradient(ellipse 96% 92% at 50% 40%, rgba(0,0,0,0) 58%,
rgba(4,2,6,.34) 84%, rgba(3,1,5,.68) 100%)}
/* z-index は外さないこと。外すと節の中身が「並びの層」へ落ち、
墨の締め（.washfill＝画面いっぱいの不透明な面）に隠れて文字ごと消える。
写真をエフェクトより上に出したい節は、節ごと上へ上げる（下の #card ほか） */
.sec{position:relative; z-index:1; padding-block:var(--sec)}
.sec--lead{padding-block:var(--sec-lg) var(--sec)}
.head{margin-bottom:clamp(32px,5vh,64px)}
/* ── 三章：面が貼りついて、次が上から覆う ───────────
章が進むほど、面を狭く・暗く・静かにする。終焉を文字で言わず、枠で言う。
壱章は横いっぱいにポスターを開き、参章は中央の細い柱まで潰れる。
貼りつきは純CSSの sticky（ワザ帳 A8）。次の章が上から覆うので、
面には必ず不透明な地を持たせる。狭い画面では貼りつきを解く。 */
/* ── 第壱章：開催概要 ───────────────────────────────
三章を1枚ずつ貼り重ねる作りはやめた。日程が決まっているのは壱章だけで、
決まっていない二章に同じ面積を与えると「決まっている」ように見えてしまう。
ここは興行そのものの節。左に文字、右にポスター。
第弐章・第参章はページの下で COMING SOON として文字だけ残す。 */
.sec--open{padding-block:var(--sec-lg) var(--sec)}
.open{display:grid; grid-template-columns:1fr auto; gap:clamp(28px,5vw,88px);
align-items:center}
/* グリッドの子は既定の min-width:auto で中身に押し広げられる（ワザ帳 J5） */
.open > *{min-width:0}
.open__txt{max-width:34em}
.open__no{font-family:var(--serif); font-size:12px; letter-spacing:.34em;
margin:0; color:var(--c1)}
.open__ttl{font-family:var(--min); font-weight:400; font-size:var(--t-ch);
letter-spacing:.13em; line-height:1.4; margin:.45em 0 .3em;
/* 折り返すときは行を均す。「混沌 〜」だけ落とさない */
text-wrap:balance}
.open__ttl b{font-weight:600; color:var(--c1-soft); text-shadow:0 0 34px rgba(255,46,136,.5)}
/* 欧文は章題に連れて縮む。和文の章題より前に出させない */
.open__en{font-family:var(--serif); font-weight:400;
font-size:clamp(13px, calc(var(--t-ch) * .54), 26px);
letter-spacing:.3em; color:var(--fg-soft); margin:0}
.open__copy{margin:1.4em 0 0; font-family:var(--min); letter-spacing:.12em;
font-size:var(--t-lead); color:var(--fg)}
.open__meta{display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,48px);
margin:clamp(28px,4vh,48px) 0 0}
.open__meta dt{font-family:var(--serif); font-size:11px; letter-spacing:.28em;
color:var(--fg-faint); margin:0 0 .45em}
.open__meta dd{margin:0; font-size:var(--t-small); letter-spacing:.14em;
color:var(--fg); font-variant-numeric:lining-nums}
.open__cta{margin:0}
/* ポスターは高さで決める。幅は絵柄の比率に任せる */
.open__fig{margin:0; display:flex; height:min(74svh,660px)}
.open__fig img{height:100%; width:auto;
border:1px solid var(--rule); filter:saturate(.9) brightness(.92)}
/* ── COMING SOON：第弐章・第参章 ────────────────────
日程が決まるまではコピーだけを置く。図版は持たせない
（参章の絵柄が調整中で、片方だけ絵があると片方は決まっているように見える）。
壱章の節より一段静かにして、面積も与えない。分けるのは章の光の色だけ。 */
.sec--soon{background:linear-gradient(180deg, rgba(12,8,18,0), var(--ink-deep))}
.soon{list-style:none; margin:0; padding:0; display:grid;
grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,88px)}
.soon__item{margin:0; padding-top:clamp(20px,3vh,34px); border-top:1px solid var(--rule)}
.soon__no{font-family:var(--serif); font-size:12px; letter-spacing:.34em; margin:0}
.soon__item--2 .soon__no{color:var(--c2)}
.soon__item--3 .soon__no{color:var(--c3)}
.soon__ttl{font-family:var(--min); font-weight:400;
font-size:clamp(20px,2.1vw + 10px,34px);
letter-spacing:.13em; line-height:1.4; margin:.5em 0 .3em; text-wrap:balance}
.soon__ttl b{font-weight:600}
.soon__item--2 .soon__ttl b{color:var(--c2-soft); text-shadow:0 0 34px rgba(55,214,198,.45)}
.soon__item--3 .soon__ttl b{color:var(--c3-soft); text-shadow:0 0 34px rgba(217,178,92,.45)}
.soon__en{font-family:var(--serif); font-weight:400; font-size:clamp(12px,.9vw + 8px,18px);
letter-spacing:.3em; color:var(--fg-soft); margin:0}
.soon__copy{margin:1.3em 0 0; font-family:var(--min); letter-spacing:.12em;
font-size:var(--t-h3); color:var(--fg)}
/* 日程が入る場所に、状態だけを置く。罫は開催概要の Date と同じ高さに来る */
.soon__state{margin:clamp(24px,3.4vh,42px) 0 0; font-family:var(--serif);
font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--fg-faint);
display:flex; align-items:center; gap:.9em}
.soon__state::before{content:''; width:26px; height:1px; background:currentColor; opacity:.5}
.sec--soon .note{margin-top:clamp(88px,11vh,140px)} /* ずれで追い越されない逃げ場 */
/* 節の終わりに置くチケットの導線。注記の下 */
.sec__cta{margin:0}
/* ── ボタン ──────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:.9em; margin-top:2.2em;
background:none; font-family:inherit; -webkit-appearance:none;
padding:.95em 1.9em; border:1px solid var(--rule-strong); text-decoration:none;
font-size:var(--t-small); letter-spacing:.18em; color:var(--fg);
transition:border-color .5s var(--ease), background-color .5s var(--ease), color .5s var(--ease)}
.btn::after{content:""; width:22px; height:1px; background:currentColor; opacity:.6}
.btn:hover{border-color:var(--accent); color:var(--c1-soft); background:rgba(255,46,136,.07)}
.btn--lg{padding:1.25em 2.6em; font-size:calc(var(--t-small) + 1px); letter-spacing:.22em}
/* チケットの導線だけはベタ塗り。闇の中で一番強い面にする。
文字は白でなく地の闇。桃色の上に白を置くと読みづらい（4.5:1 に届かない） */
.btn[data-buy]{border-color:var(--c1-btn); background:var(--c1-btn); color:#140a11;
box-shadow:0 0 26px rgba(255,46,136,.22), 0 0 64px rgba(255,46,136,.12)}
.btn[data-buy]:hover{border-color:#f58cb4; background:#f58cb4; color:#140a11;
box-shadow:0 0 30px rgba(255,46,136,.34), 0 0 80px rgba(255,46,136,.18)}
.btn[data-buy]::after{opacity:.5}
/* 右下に出る小さいほうも同じ扱いにそろえる */
.pill{color:#140a11 !important; background:var(--c1-btn) !important;
border-color:var(--c1-btn) !important;
box-shadow:0 0 22px rgba(255,46,136,.2)}
.pill:hover{background:#f58cb4 !important; border-color:#f58cb4 !important}
/* 発売前。押せないことを見た目でも伝える */
.btn:disabled{color:var(--fg-soft); border-color:var(--rule); background:none; cursor:default}
.btn:disabled::after{opacity:.3}
.btn:disabled:hover{color:var(--fg-soft); border-color:var(--rule); background:none}
/* 写真を持つ節は、節ごとエフェクト（羽 z3・粒 z4・光 z2）より上へ。
写真だけを上げることはできない。節が重ね順の入れ物になっているため */
#chapter-1,#goods{z-index:5}
/* ══ 対戦カード ══════════════════════════════════
中身は先方が作った画像4枚。順番に積むだけにして、
ページ側では枠も光も足さない（画像がすでに枠を持っている） */
#card{z-index:5; padding-inline:0}
#card > .wrap{padding-inline:var(--pad)}
.card{list-style:none; margin:0 auto; padding:0;
display:grid; gap:clamp(10px,1.6vh,22px);
width:min(1180px, 100% - var(--pad) * 2)}
.card img{display:block; width:100%; height:auto}
/* ── グッズ ──────────────────────────────────── */
/* 2点。横いっぱいに引き伸ばすと現物より大きく見えるので、組の幅を絞る */
.goods{list-style:none; margin:0; padding:0; display:grid;
grid-template-columns:repeat(2,1fr); gap:clamp(20px,4vw,64px); align-items:start;
max-width:min(100%,860px)}
.goods__item{margin:0}
.goods__item figure{margin:0 0 1.3em; aspect-ratio:1/1; display:grid; place-items:center;
overflow:hidden;
padding:clamp(16px,2.4vw,34px); border:1px solid var(--rule);
background:rgba(237,232,224,.035)}
.goods__item img{max-width:100%; max-height:100%; width:auto; height:auto;
min-width:0; min-height:0; filter:saturate(.92) brightness(.96)}
.goods__item h3{font-family:var(--min); font-weight:600; font-size:var(--t-h3);
letter-spacing:.1em; margin:0 0 .5em}
.goods__item p{margin:0; color:var(--fg-soft); font-size:var(--t-small)}
/* ── チケット ────────────────────────────────── */
.sec--ticket{background:linear-gradient(180deg,rgba(255,46,136,.045),rgba(12,8,18,0) 62%)}
.ticket__spec div{display:grid; grid-template-columns:6.5em 1fr;
border-top:1px solid var(--rule); padding:1.15em 0}
.ticket__spec dt{font-family:var(--serif); font-size:11px; letter-spacing:.24em;
color:var(--fg-faint); text-transform:uppercase}
.ticket__spec dd{margin:0; color:var(--fg-soft)}
.ticket__spec dd b{font-weight:500; color:var(--fg); font-size:1.08em;
letter-spacing:.06em; font-variant-numeric:lining-nums}
/* ── カウントダウン ──
チケットの節の主役。日数だけを巨大に、時分秒はその下に小さく刻む。
数字は1桁ずつ同じ幅の箱に入れる。Bodoni は「1」だけ細く、
秒が変わるたびに隣の桁が左右に揺れるため */
/* 落ちるコピーの直後、闇に入っていちばん最初に出る節 */
.sec--count{padding-block:clamp(80px,14vh,170px)}
.sec--count .wrap{text-align:center}
.count[hidden]{display:none}
.count{margin:0 auto}
.count p{margin:0}
.count__lead{font-family:var(--min); font-size:clamp(13px,.5vw + 11px,17px);
letter-spacing:.42em; text-indent:.42em; color:var(--fg-soft)}
.count__days{text-align:center; margin-top:clamp(2px,1vh,12px) !important}
/* DAYS は数字の右肩の外へぶら下げる。並べて中央揃えにすると、
DAYS のぶん数字が左へずれて、時分秒と軸が合わない */
.count__big{position:relative; display:inline-block}
.count__days .count__num{font-family:var(--serif); font-weight:400;
font-size:clamp(112px,27vw,400px); line-height:.86; letter-spacing:0; color:#fff;
font-variant-numeric:lining-nums;
text-shadow:0 0 22px rgba(255,46,136,.5), 0 0 70px rgba(255,46,136,.28),
0 0 140px rgba(255,46,136,.16)}
.count__num b{display:inline-block; width:.62em; text-align:center; font-weight:inherit}
.count__unit{position:absolute; left:100%; bottom:.35em; margin-left:clamp(6px,1vw,16px);
font-family:var(--serif); font-style:italic; font-size:clamp(15px,2.2vw,34px);
letter-spacing:.14em; text-transform:uppercase; color:var(--c1-soft)}
.count__clock{display:flex; justify-content:center; align-items:baseline;
gap:.12em; margin-top:clamp(10px,2vh,24px) !important;
font-family:var(--serif); font-size:clamp(26px,3.6vw,54px); line-height:1;
letter-spacing:.02em; color:var(--fg); font-variant-numeric:lining-nums}
.count__clock i{font-style:normal; color:var(--fg-faint); transform:translateY(-.06em)}
/* 当日、開演前は数字の代わりに TODAY。開演後は数字ごと畳む */
.count.is-today .count__unit{display:none}
.count__days .count__word{font-family:var(--serif); font-style:italic; font-weight:400;
font-size:clamp(84px,17vw,260px); line-height:.9; letter-spacing:.02em; color:#fff;
text-shadow:0 0 22px rgba(255,46,136,.5), 0 0 70px rgba(255,46,136,.28)}
.count.is-live .count__days,.count.is-live .count__clock{display:none}
.count.is-live .count__lead{font-size:clamp(24px,3.4vw,48px); letter-spacing:.3em; text-indent:.3em;
color:#fff; text-shadow:0 0 18px rgba(255,46,136,.55), 0 0 60px rgba(255,46,136,.3)}
/* 読み上げ用。見た目には出さない */
.sr{position:absolute !important; width:1px; height:1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap}
/* ── 開催情報 ────────────────────────────────── */
/* COMING SOON が地を ink-deep まで落とすので、そのまま受ける */
.sec--info{padding-bottom:clamp(48px,7vh,90px); background:var(--ink-deep)}
.info div{display:grid; grid-template-columns:6.5em 1fr;
border-top:1px solid var(--rule); padding:1.05em 0}
.info dt{font-family:var(--serif); font-size:11px; letter-spacing:.24em; color:var(--fg-faint)}
.info dd{margin:0; color:var(--fg-soft)}
/* ポスターのクレジット。開催情報の表とは別の組みにして、
事実の一覧と、関わった人の並びを取り違えないようにする。
語彙は開催概要の Date / Venue と同じ（欧文の小さい見出しの下に名前） */
/* ── 協賛 ──
ロゴと社名が混ざる列。目で見た大きさを揃えたいので、高さは1枚ずつ決める
（同じ高さに揃えると、字だけのロゴが大きく見える） */
.spon{margin-top:clamp(30px,5vh,58px); padding-top:clamp(22px,4vh,40px);
border-top:1px solid var(--rule)}
.spon__ttl{margin:0 0 clamp(16px,2.6vh,28px); font-family:var(--serif);
font-size:11px; letter-spacing:.24em; color:var(--fg-faint)}
.spon__list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
align-items:center; gap:clamp(20px,3vw,48px) clamp(24px,3.4vw,54px)}
.spon__item{font-size:var(--t-small); letter-spacing:.1em; color:var(--fg-soft)}
.spon__logo{display:block; width:auto; opacity:.86;
transition:opacity .4s var(--ease)}
.spon__logo:hover{opacity:1}
.spon__logo--ishida{height:clamp(13px,1.1vw + 6px,18px)}
.spon__logo--yonehara{height:clamp(19px,1.7vw + 9px,27px)}
.spon__logo--install{height:clamp(13px,1.2vw + 6px,19px)}
.spon__logo--aitec{height:clamp(16px,1.4vw + 8px,23px)}
.spon__logo--macolab{height:clamp(15px,1.3vw + 7px,21px)}
.spon__logo--takasho{height:clamp(19px,1.7vw + 9px,27px)}
.spon__logo--hamajiri{height:clamp(16px,1.4vw + 8px,23px)}
.spon__logo--earthwork{height:clamp(14px,1.2vw + 7px,20px)}
.spon__logo--rimopla{height:clamp(14px,1.2vw + 7px,20px)}
.spon__logo--otani{height:clamp(13px,1.1vw + 6px,18px)}
/* ヒーローの中（紙の上）にも同じ並びを出す。ロゴは白1色なので、
ここでは反転して墨にする（アルファはそのまま残る） */
.spon--hero{margin-top:clamp(14px,2.4vh,30px); padding-top:clamp(12px,2vh,22px);
border-top:1px solid var(--paper-rule)}
.spon--hero .spon__ttl{margin-bottom:clamp(10px,1.6vh,16px); font-size:10px;
letter-spacing:.3em; color:var(--paper-soft)}
.spon--hero .spon__list{gap:clamp(10px,1.2vh,16px) clamp(12px,1.1vw,18px)}
.spon--hero .spon__item{font-size:11px; color:var(--paper-soft)}
.spon--hero .spon__logo{filter:invert(1); opacity:.78}
.spon--hero .spon__logo--ishida{height:clamp(11px,.7vw + 5px,14px)}
.spon--hero .spon__logo--yonehara{height:clamp(15px,1vw + 7px,20px)}
.spon--hero .spon__logo--install{height:clamp(11px,.8vw + 5px,15px)}
.spon--hero .spon__logo--aitec{height:clamp(13px,.9vw + 6px,18px)}
.spon--hero .spon__logo--macolab{height:clamp(12px,.8vw + 6px,16px)}
.spon--hero .spon__logo--takasho{height:clamp(15px,1vw + 7px,20px)}
.spon--hero .spon__logo--hamajiri{height:clamp(13px,.9vw + 6px,18px)}
.spon--hero .spon__logo--earthwork{height:clamp(11px,.8vw + 5px,16px)}
.spon--hero .spon__logo--rimopla{height:clamp(11px,.8vw + 5px,16px)}
.spon--hero .spon__logo--otani{height:clamp(11px,.7vw + 5px,14px)}
.credit{display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,52px);
margin:clamp(36px,5vh,64px) 0 0; padding-top:clamp(28px,4vh,44px);
border-top:1px solid var(--rule)}
.credit div{display:block}
.credit dt{font-family:var(--serif); font-size:11px; letter-spacing:.28em;
color:var(--fg-faint); margin:0 0 .5em}
.credit dd{margin:0; font-size:var(--t-small); letter-spacing:.1em; color:var(--fg-soft)}
.copy{margin:clamp(40px,6vh,80px) 0 0; font-family:var(--serif); font-size:11px;
letter-spacing:.3em; color:var(--fg-faint); text-transform:uppercase}
.copy > span:first-child{color:var(--fg-soft); margin-right:1.2em}
/* ── 常駐のチケット導線 ──────────────────────── */
.pill{position:fixed; right:clamp(16px,2.5vw,34px); bottom:clamp(16px,2.5vw,34px); z-index:50;
display:inline-flex; align-items:center; gap:.7em; padding:.85em 1.5em;
font-family:var(--serif); font-size:12px; letter-spacing:.28em; text-decoration:none;
color:var(--fg); background:rgba(14,8,20,.72); border:1px solid rgba(255,46,136,.4);
backdrop-filter:blur(8px); opacity:0; transform:translateY(14px); pointer-events:none;
transition:opacity .6s var(--ease), transform .6s var(--ease), border-color .4s}
.pill.is-on{opacity:1; transform:none; pointer-events:auto}
.pill i{display:block; width:7px; height:7px; border-radius:50%;
background:currentColor; box-shadow:none} /* ベタの上では、同系色の点は沈む */
.pill:hover{border-color:var(--c1)}
@media (max-width:940px){
.open{grid-template-columns:1fr; gap:clamp(24px,4vh,40px)}
.open__fig{height:auto; width:min(330px,46vw)}
.open__fig img{height:auto; width:100%}
.soon{grid-template-columns:1fr; gap:clamp(34px,6vh,60px)}
.ticket{grid-template-columns:1fr}
}
@media (max-width:640px){
.sec--open{padding-block:var(--sec) var(--sec)}
/* 狭い画面では第壱章のポスターを出さない。ヒーローで同じ絵を見たあとなので、
ここでもう一度大きく出すと、開催概要が読み始めるまで遠くなる */
.open__fig{display:none}
.goods{grid-template-columns:1fr}
.ticket__spec div,.info div{grid-template-columns:1fr; gap:.2em}
/* 狭い画面では帯を解いて、章の下に開催情報を戻す */
.overture__foot{display:block; max-width:none}
/* 人物は上、題字は下。ポスターと同じ縦の関係に戻す。
題字は組みの幅ぎりぎりまで出すと端で切れるので、少し引く */
:root{--t-display:clamp(38px, min(16.4vw, 20svh), 130px)}
/* 背の低い端末では、題字を下げたぶんだけ顔が出る。下の余白を詰める */
.overture{justify-content:flex-end; padding-block:clamp(28px,5vh,70px) clamp(30px,7vh,110px)}
/* 文字の塊が画面より背が高いと上へ伸び、左上の音のボタンに重なる。ボタンの下から始める */
.overture__in{padding-top:clamp(64px,10svh,88px)}
/* 縦画面で顔を大きく見せるには、絵を画面より広く取って左へ逃がすしかない。
右端で顔を切る関係はそのまま。下端だけマスクで紙へ溶かす */
/* 元の組み。顔を大きく見せる。下のぼかしは顎を過ぎてから掛ける */
/* 文字が絵に重なりすぎて読めなかったので、絵を小さくして下のぼかしを長くとる（2026-10-02） */
.hero-fig{width:min(128vw,560px); bottom:auto; height:min(50svh,430px);
-webkit-mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.5) 82%, transparent 100%);
mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.5) 82%, transparent 100%)}
/* 題字が絵の濃いところに重なる。地を敷くと絵まで白く飛ぶので、
文字のまわりだけに紙をにじませる。闇に落ちるとこのにじみも消える */
.overture__in{text-shadow:
0 0 10px color-mix(in srgb, var(--paper) calc(var(--paper-mix,1) * 95%), transparent),
0 0 26px color-mix(in srgb, var(--paper) calc(var(--paper-mix,1) * 80%), transparent),
0 0 60px color-mix(in srgb, var(--paper) calc(var(--paper-mix,1) * 55%), transparent)}
/* 題字の絵も同じ。細い線が髪に埋もれるので、紙のにじみを敷く */
.wm-art{filter:
drop-shadow(0 0 2px color-mix(in srgb, var(--paper) calc(var(--paper-mix,1) * 100%), transparent))
drop-shadow(0 0 3px color-mix(in srgb, var(--paper) calc(var(--paper-mix,1) * 100%), transparent))
drop-shadow(0 0 8px color-mix(in srgb, var(--paper) calc(var(--paper-mix,1) * 100%), transparent))
drop-shadow(0 0 18px color-mix(in srgb, var(--paper) calc(var(--paper-mix,1) * 85%), transparent))}
.wm-art{width:calc(var(--t-display) * 3.2)}
/* 小さい字は絵の濃いところに埋もれる。にじみを詰めて濃くする */
.overture .kicker,.overture__foot{text-shadow:
0 0 5px color-mix(in srgb, var(--paper) calc(var(--paper-mix,1) * 100%), transparent),
0 0 11px color-mix(in srgb, var(--paper) calc(var(--paper-mix,1) * 100%), transparent),
0 0 22px color-mix(in srgb, var(--paper) calc(var(--paper-mix,1) * 92%), transparent),
0 0 44px color-mix(in srgb, var(--paper) calc(var(--paper-mix,1) * 70%), transparent)}
/* 狭い画面は引きで見せる。枠を絵の縦横比に近づけて、頭のてっぺんまで入れる。
（音のボタンは左上へ移したので、顔を下へ逃がす必要はなくなった） */
/* 額から顎まで、顔がぜんぶ入る位置。頭のてっぺんは切れてよい */
.hero-fig img{position:static; height:100%; object-position:50% 72%}
.overture__meta{gap:20px; margin-top:clamp(26px,4vh,40px)}
/* 字間を .4em のまま持ってくると、キッカーが1行に収まらず右へ抜ける */
.overture .kicker{letter-spacing:.24em; color:var(--paper-ink)}
.overture .kicker__org{font-size:clamp(12px,3.35vw,16px); letter-spacing:.1em}
.overture .kicker__ttl{color:var(--paper-ink)}
.pill{padding:.75em 1.15em; letter-spacing:.2em}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{animation:none !important; transition-duration:.01ms !important}
.js .mask>span{transform:none !important}
.js [data-fall]{opacity:1 !important; transform:none !important}
.veil__v,.film{display:none}
.wash{opacity:1}
.js .wm-art img{-webkit-mask-image:none; mask-image:none}
.js .overture__in > *{opacity:1 !important; transform:none !important}
.band__row{animation:none}
}
/* ══ 落下区間のコピー ═══════════════════════════════ */
/* 白い文字なので、紙のうちは見えない。墨が覆うのに合わせて出す。
出現を別々のきっかけ（交差監視）で動かすと、墨とずれて継ぎ目になる。
ゆっくり濃くすると、薄いグレーのまま長く居座って読みづらい。
地が十分黒くなってから、短い距離で一気に出し切る */
.descent__copy{opacity:clamp(0, (var(--q,0) - .26) * 6.5, 1);
transition:opacity .4s linear;
/* 墨は一様に黒くない。白く抜けたところに文字が乗ると消えるので、
字のまわりに暗がりを持たせる。地が黒い場所では見えない */
text-shadow:0 0 16px rgba(6,3,10,.94), 0 0 40px rgba(6,3,10,.85),
0 0 88px rgba(6,3,10,.6);
margin:0 auto; width:100%; max-width:var(--maxw);
padding-inline:var(--pad); color:var(--fg);
font-family:var(--min); font-weight:400;
font-size:clamp(23px,3.1vw + 10px,54px); line-height:1.68; letter-spacing:.14em}
.descent__copy .mask:nth-child(2){padding-left:2.2em}
/* コピーと解説は区間の頭に置き、画面の中ほどに貼りつける。墨が覆いきる頃に、ちょうど真ん中で読める */
.descent__in{position:sticky; top:clamp(48px,20vh,200px);
display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:clamp(28px,4.5vw,80px);
width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
/* コピーと解説は組の中の右段に入るので、単独で置いていたときの幅と余白を外す */
.descent__in .descent__copy,.descent__in .descent__about{max-width:none; padding-inline:0; margin-inline:0}
/* 右段は狭いので、コピーは一回り小さく。1行ずつ折り返さない */
.descent__in .descent__copy{font-size:clamp(22px,2.4vw + 8px,44px)}
.descent__in .descent__copy .mask{white-space:nowrap}
/* レーベルのエンブレム。白で使う。紙の上では見えないので、コピーと同じく墨が覆ってから出す */
.descent__mark{margin:0; width:clamp(240px,30vw,470px);
opacity:clamp(0, (var(--q,0) - .22) * 6, 1); transition:opacity .4s linear;
filter:drop-shadow(0 0 30px rgba(6,3,10,.9))}
.descent__mark img{display:block; width:100%; height:auto}
@media (max-width:640px){
.descent__in{grid-template-columns:1fr; gap:clamp(20px,4vh,32px)}
/* スマホはエンブレムを中央に大きく。文章のまとまりも中央に置き、字は左寄せのまま */
.descent__mark{justify-self:center; width:clamp(240px,80vw,340px)}
.descent__body{justify-self:center; width:fit-content; max-width:100%}
/* 解説の1行をコピーの幅に近づけて、まとまりを細くする（そうしないと幅いっぱいで中央寄せが効かない） */
.descent__in .descent__about p{max-width:20.5em}
/* 1行ずつ折り返さないので、字の大きさを画面幅に合わせる（320px でもはみ出さない）。2行目の字下げはしない */
.descent__in .descent__copy{font-size:clamp(18px,6vw,26px)}
.descent__in .descent__copy .mask:nth-child(2){padding-left:0}
}
/* レーベルの解説。コピーより少し遅れて濃くなる */
.descent__about{opacity:clamp(0, (var(--q,0) - .34) * 6.5, 1); transition:opacity .4s linear;
text-shadow:0 0 14px rgba(6,3,10,.94), 0 0 36px rgba(6,3,10,.8);
margin:clamp(30px,5vh,56px) auto 0; width:100%; max-width:var(--maxw); padding-inline:var(--pad)}
.descent__about p{margin:0; max-width:31em; font-family:var(--min); font-size:clamp(14px,.35vw + 12px,17px);
line-height:2.1; letter-spacing:.1em; color:var(--fg-soft); word-break:auto-phrase}
.js .descent__copy .mask>span{transition-duration:1.35s}
.js .descent__copy .mask:nth-child(2)>span{transition-delay:.16s}
/* ══ 概要：左右でずらす ═════════════════════════════ */
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,90px); align-items:start}
.about__body{padding-top:clamp(24px,7vh,90px)}
.about__body .body + .body{margin-top:1.5em; color:var(--fg);
font-family:var(--min); letter-spacing:.08em}
.sec--about{padding-block:var(--sec-lg) var(--sec)}
/* ══ 見出しの二段組み ═══════════════════════════════ */
.head--split{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,5vw,90px);
align-items:end}
.head__copy{margin:0 0 .4em; font-family:var(--min); letter-spacing:.1em;
font-size:var(--t-h3); color:var(--fg-soft); text-align:right}
/* ══ ノベルティ：高さをずらす ═══════════════════════ */
/* 2点なので、右を下げて水平に並ばないようにする */
.goods__item--b{margin-top:clamp(24px,6vw,96px)}
/* カードは縦長、キーホルダーは正方形。枠は現物の形に合わせる */
.goods__item--a figure{aspect-ratio:5/7}
/* 来場者配布カードは表裏の2枚。表を手前・裏を奥に、互い違いに傾けて重ねる。
枠の余白（padding）の内側に収まる寸法にしてあり、回転ぶんも枠で切れない */
.goods__item--a figure.goods__pair{display:block; position:relative; aspect-ratio:1/1.12}
/* 現物のカードと同じく角を丸める（名刺判の角R3 ≒ 幅の約5%）。
縁に細い光を一本入れて、紙の厚みに見せる */
.goods__pair img{position:absolute; width:56%; max-width:none; max-height:none; height:auto;
border-radius:clamp(7px,1.15vw,13px);
box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 2px 4px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.55);
transition:translate .9s var(--ease), rotate .9s var(--ease)}
/* 裏（全身と翼）を左奥・表を右手前に置き、裏の左上の翼と顔を見せる */
.goods__back{left:8%; top:8%; rotate:-6deg}
.goods__front{right:8%; bottom:8%; rotate:4deg}
@media (hover:hover){
.goods__pair:hover .goods__back{translate:-4% -2%; rotate:-8deg}
.goods__pair:hover .goods__front{translate:4% 2%; rotate:6deg}
}
.goods__item--b figure{aspect-ratio:1/1}
/* キーホルダーは支給の商品写真（明るい灰色の地に影つき）。地を抜くと透明なアクリルまで抜けるので、
写真のまま枠いっぱいに敷いて、角を丸めた1枚の写真として見せる */
.goods__item--b figure{padding:0; border:0; background:#f1f1f1; border-radius:12px;
box-shadow:0 34px 80px rgba(0,0,0,.6)}
.goods__item--b figure img{width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; filter:none}
/* ══ 巨大タイポの帯 ═════════════════════════════════ */
.band{position:relative; z-index:1; overflow:hidden;
padding-block:clamp(28px,6vh,72px)}
.band__row{display:flex; align-items:center; gap:.5em; width:max-content;
white-space:nowrap; will-change:transform;
animation:band 52s linear infinite}
.band__row span{font-family:var(--serif); font-weight:400;
font-size:clamp(34px,6.4vw,96px); letter-spacing:.06em; color:var(--fg-faint)}
.band__row span:nth-child(3n+2){font-family:var(--min); font-size:clamp(20px,3.4vw,48px);
letter-spacing:.16em}
.band__row i{font-style:normal; font-size:clamp(12px,1.4vw,20px); color:var(--accent); opacity:.7}
@keyframes band{to{transform:translate3d(-50%,0,0)}}
/* ══ チケット：ここだけ画面いっぱいの一場面にする ═══ */
.sec--ticket{padding-block:clamp(96px,17vh,200px);
background:
radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255,46,136,.13), rgba(12,8,18,0) 72%),
linear-gradient(180deg, rgba(12,8,18,0), rgba(255,46,136,.05) 50%, rgba(12,8,18,0))}
/* 満ちる光は inset:0 を 1.14 倍まで広げる。節の外へ出たぶんが
ページを横へ 7% 伸ばしていた（html の overflow-x:clip は
WebKit では viewport へ伝播せず、指で横へ引けてしまう）。ここで切る */
.sec--ticket{overflow:clip}
/* 節に入るにつれて満ちる光。強さは下の --c で決める */
.sec--ticket::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
transform-origin:50% 44%; mix-blend-mode:screen;
background:radial-gradient(ellipse 52% 44% at 50% 44%,
rgba(255,46,136,.22), rgba(12,8,18,0) 70%)}
.sec--ticket .wrap{position:relative; z-index:1; text-align:center}
/* コピーの行を外したので、その下の余白はラベルが持つ */
.sec--ticket .label{margin-bottom:clamp(30px,5.5vh,64px)}
.ticket__spec{max-width:34em; margin-inline:auto; text-align:left}
.ticket__cta{margin:clamp(30px,5vh,56px) 0 0}
.sec--ticket .note{margin-inline:auto; text-align:center}
/* ══ スクロールに連れて動く層 ═══════════════════════
要素が画面のどこにいるかを JS が -1〜1 の数にして --p に、
画面の中心にどれだけ近いかを 0〜1 にして --c に入れてくる。
どちらへどれだけ動かすかは、ここ（CSS）が決める（ワザ帳 A13）。
CSS だけで書ける animation-timeline:view() は Firefox が未対応で、
ここは「動きがあること」自体が目的なので3エンジンで同じに出す方を採った。
語彙は2つ。どちらも筋は「落下と光」。
1 ずれ … 同じ節の中で、要素ごとに落ちる速さを変える
2 沈み … ヒーローを抜けるとき、題字だけ遅れて沈む
帯はスクロールに連れて速度が変わらない。等速のマーキーだけにしてある
（スクロールで速度が動くと、読んでいる最中に文字が逃げる）
位置は translate で持つ。出現の transform と別プロパティにして取り合わせない。 */
/* 1 ずれ。量は要素側の --drift だけで決まる */
.descent__copy .mask,.goods__item,.open__fig,.soon__item{
translate:0 calc(var(--drift,6%) * var(--p,0))}
/* 開催概要のポスターは、文字より少し遅れて落ちる */
.open__fig{--drift:40px}
/* COMING SOON の二章は、落ちる速さで前後を分ける */
.soon__item--2{--drift:44px}
.soon__item--3{--drift:16px}
/* 落下のコピー。二行目が遅れて落ちる */
.descent__copy .mask:nth-child(1){--drift:5%}
.descent__copy .mask:nth-child(2){--drift:11%}
/* ノベルティ。2点の奥行きを分ける。
**ずれ幅は px で持つ。** 写真が大きいので % にすると下の注記・ボタンを
追い越して読めなくなる（要素の高さに比例してしまう） */
.goods__item--a{--drift:22px}
.goods__item--b{--drift:52px}
/* 追い越したぶんの逃げ場。ずれの最大は --drift の 1.6 倍 */
#goods .rui-link{margin-top:clamp(112px,14vh,160px)} /* 注記を消したので、カードとの間はこちらで取る */
/* 2 沈み。ヒーローを抜けるとき、題字は遅れて沈み、下の帯は先に抜ける。
--s はページ先頭からの進み具合（0〜1）。opacity は触らない。
読み込みの出現（transition）と取り合いになる */
/* 文字どうしを別々の速さで動かすと、抜けるまでに必ずぶつかる。
動かすのは「文字ブロックごと」と「人物」の2枚。奥行きはこの差で出す。
ぶつかりようがないので、読みづらくならない */
.overture__in{translate:0 calc(15vh * var(--s,0))}
/* 人物は動かさず、わずかに寄る。上下に動かすと、絵の端が紙の上に出て境目になる。
拡大なら端が出ない */
.hero-fig{scale:calc(1 + var(--s,0) * .05)}
/* チケットの節は、近づくほど光が満ちる。ここが最後の見せ場 */
.sec--ticket::before{opacity:var(--c,1);
scale:calc(.72 + .42 * var(--c,1))}
/* ══ 狭い画面（新しい規則の打ち消しは、必ずこの位置で） ══ */
@media (max-width:940px){
.about{grid-template-columns:1fr; gap:clamp(18px,3vh,32px)}
.about__body{padding-top:0}
.head--split{grid-template-columns:1fr; gap:1em; align-items:start}
.head__copy{text-align:left; margin:0}
.open{grid-template-columns:1fr; gap:clamp(22px,4vh,44px)}
.open__txt{max-width:none}
.open__fig{height:auto; width:min(300px,62vw)}
.open__fig img{height:auto; width:100%}
.open__copy{font-size:var(--t-h3)}
.goods__item--b{margin-top:clamp(16px,3vw,40px)}
.descent__copy .mask:nth-child(2){padding-left:1.4em}
}
@media (max-width:640px){
.band__row span{font-size:clamp(26px,9vw,44px)}
.band__row span:nth-child(3n+2){font-size:clamp(16px,5.4vw,26px)}
}
@media (max-width:940px){
}
/* ══ 音の切り替え ═══════════════════════════════════ */
/* 地の明暗が変わる位置に置くので、線と文字の色も一緒に動かす */
.sound{display:none}
.js .sound{position:fixed; left:clamp(16px,2.5vw,34px); top:clamp(16px,2.5vw,34px); z-index:50;
display:inline-flex; align-items:center; gap:.7em; padding:.45em .5em;
background:none; border:0; cursor:pointer; -webkit-appearance:none;
color:color-mix(in srgb, var(--paper-ink) calc(var(--paper-mix,1) * 100%), var(--fg));
/* 枠も敷きも持たない。人物の髪や墨の上に乗るので、影だけで浮かせる */
filter:drop-shadow(0 1px 3px color-mix(in srgb,
rgba(239,234,227,.9) calc(var(--paper-mix,1) * 100%), rgba(12,8,18,.9)));
transition:color .4s var(--ease)}
/* 指で押す端末では :hover が押したあとも残り、文字が薄い桃色のまま読みにくくなる。
マウスのある環境だけに絞る */
@media (hover:hover){
.sound:hover{color:var(--c1)}
}
/* 中身はスピーカーの絵と、その横のスペクトラム。文字は置かない */
.sound__ic{width:22px; height:22px; flex:none; display:block; overflow:visible}
.sound__ic-body{fill:currentColor}
.sound__ic-wave{stroke:currentColor; opacity:0}
.sound__ic-x{stroke:currentColor; fill:none}
.sound.is-on .sound__ic-wave{opacity:1}
.sound.is-on .sound__ic-x{opacity:0}
/* スペクトラム。高さは JS が --v0〜--v13 に実際の音から入れる。
鳴っていないときは平らな線のまま（動かすと、鳴っていないのに鳴って見える） */
.sound__eq{display:flex; align-items:center; gap:2px; height:22px; flex:none}
/* 棒は高さを持ったまま、上下に縮めて置く。動かすのは transform だけ
（height を毎フレーム変えると、その都度組み直しになる） */
.sound__eq i{display:block; width:2px; height:100%; border-radius:1px; background:var(--c1);
transform:scaleY(.09); transform-origin:50% 50%;
opacity:.3; transition:opacity .5s var(--ease), transform .5s var(--ease)}
/* 鳴っている間は、左から右へゆっくり波が渡る。
1本ずつ位相をずらすだけで波になる（負の遅れ＝途中から始める） */
.sound.is-on .sound__eq i{opacity:1; transition:opacity .5s var(--ease);
box-shadow:0 0 7px rgba(255,46,136,.75);
animation:eqwave 2.6s cubic-bezier(.45,0,.55,1) infinite;
animation-delay:calc(var(--i, 0) * -.17s)}
@keyframes eqwave{
0%,100%{transform:scaleY(.16)}
50%{transform:scaleY(1)}}
/* ── 音の案内。その日の初回だけ、音のボタンの下に出す ──
位置は JS がボタンを測って入れる。紙の上では人物に重なるので、
ボタンと同じで紙の色を薄く敷く。地の明暗に合わせて色も動かす。 */
.soundhint{position:fixed; z-index:49; margin:0; max-width:min(62vw,320px);
left:clamp(16px,2.5vw,34px); /* ボタンと同じ値。左端を揃える */
padding:.62em 1.05em; font-family:var(--sans); font-size:11.5px;
letter-spacing:.14em; line-height:1.5; white-space:nowrap; pointer-events:none;
color:color-mix(in srgb, var(--paper-soft) calc(var(--paper-mix,1) * 100%), var(--fg-soft));
background:color-mix(in srgb, rgba(239,234,227,.8) calc(var(--paper-mix,1) * 100%), rgba(12,8,18,.7));
border:1px solid color-mix(in srgb, rgba(21,17,27,.16) calc(var(--paper-mix,1) * 100%), var(--rule));
backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
opacity:0; translate:0 -8px;
transition:opacity .9s var(--ease), translate 1s var(--ease)}
.soundhint.is-on{opacity:1; translate:0}
/* ボタンを指す細い縦線。SCROLL の罫と同じ語彙 */
.soundhint::before{content:''; position:absolute; left:22px; top:-13px;
width:1px; height:13px; background:currentColor; opacity:.45}
@media (max-width:640px){
.soundhint{font-size:10.5px; letter-spacing:.1em; padding:.58em .9em}
}
#bgmEl{display:none}
@media (max-width:640px){
/* 実体の指定は .js .sound に付いている。ここを .sound と書いていたので
詳細度で負けて、狭い画面用の級数がずっと効いていなかった。
指で押す的は44px角が目安。級数を落とすぶん、高さは min-height で確保する */
.js .sound{padding:.45em .5em; min-height:44px}
.sound__ic{width:20px; height:20px}
.sound__eq{height:19px}
}
@media (prefers-reduced-motion:reduce){
.sound.is-on .sound__eq i{animation:none; transform:scaleY(.5)}
}
/* ══ 2回目以降。最初から闇で始める ═══════════════════
その日の初回だけ紙から堕ちる。以降はここが効いて、
ヒーローがそのまま闇になる。 */
.glow--dawn{display:none}
/* 闇では、輪も光条も材が入れ替わる。地が黒くなったぶん、光だけが残る */
.is-night .dawn{background:var(--ink)}
.is-night .wash,.is-night .washfill,.is-night .veil--paper{display:none !important}
.is-night .overture{color:var(--fg)}
.is-night .overture .kicker,
.is-night .overture__meta dt,
.is-night .overture__meta dd span,
.is-night .overture__ch{color:var(--fg)}
.is-night .wm-art__a{filter:invert(.93)}
.is-night .descent{min-height:clamp(300px,58vh,560px)}
/* 一部だけ灯す */
.is-night .overture__ch span{color:var(--c1-soft);
text-shadow:0 0 22px rgba(255,46,136,.6), 0 0 56px rgba(255,46,136,.28)}
/* ヒーローの奥で脈を打つ光。闇で始まる回だけ出す */
.is-night .glow--dawn{display:block; position:fixed; z-index:0; pointer-events:none;
left:calc(50% + (1 - var(--q,0)) * 22vw); top:50%;
width:min(120vmin,1180px); height:min(120vmin,1180px);
translate:-50% -50%; border-radius:50%; mix-blend-mode:screen;
opacity:calc(1 - var(--q,0) * .55);
background:radial-gradient(circle at 50% 50%,
rgba(255,46,136,.26) 0%, rgba(170,30,116,.14) 26%, rgba(70,14,62,.08) 47%, rgba(0,0,0,0) 68%);
animation:pulse 5.4s ease-in-out infinite}
/* ══ 改稿案（redesign/）から移した部品（2026-10-02）═════════════════
開演までの時計／配布カードの裏返り／Rui への入口／紙の券・第弐章第参章の扉・開催情報。
節の外枠（.sec の余白・闇の光・出現）は本番のまま。中身だけを差し替えている */
/* ── 開演まで：欠けた輪の時計 ──
外周の目盛り60本は残りの秒（JS が灯す）、桃色の弧はその時間のうちの残りの分。
数字は輪の中に収める（本番の大きさ 最大400px のままだと輪を突き抜ける） */
.count--dial{position:relative; width:min(84vw, 66svh, 600px); aspect-ratio:1; margin-inline:auto}
.count__ring{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.count__track{fill:none; stroke:var(--rule); stroke-width:1; stroke-dasharray:860 140; stroke-dashoffset:-70}
.count__ticks line{stroke:var(--fg); stroke-opacity:.18; stroke-width:1.2}
.count__ticks line.is-five{stroke-width:2}
.count__ticks line.is-past{stroke:var(--c1); stroke-opacity:.95}
.count__arc{fill:none; stroke:var(--c1); stroke-width:1.5; stroke-linecap:round; opacity:.7;
transform:rotate(-90deg); transform-origin:300px 300px; stroke-dasharray:0 1000;
transition:stroke-dasharray .9s var(--ease)}
.count__face{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.count--dial .count__days .count__num{font-size:clamp(84px,14vw,190px); line-height:.9}
.count--dial .count__days .count__word{font-size:clamp(56px,9vw,120px)}
.count--dial .count__unit{font-size:clamp(13px,1.4vw,22px)}
.count--dial .count__clock{font-size:clamp(18px,1.4vw + 10px,30px); color:var(--fg-soft); margin-top:clamp(8px,1.6vh,18px) !important}
.count--dial.is-live .count__ring{opacity:.5}
.count__when{display:flex; justify-content:center; align-items:center; gap:1em; margin:clamp(20px,3.6vh,40px) 0 0;
font-family:var(--serif); font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--fg-faint);
font-variant-numeric:lining-nums}
.count__when i{width:22px; height:1px; background:var(--rule-strong)}
/* ── 配布カード：スクロールで裏返る（--flip 0→1） ── */
.goods__item--a .flip{width:min(100%, 360px); aspect-ratio:822/1151; perspective:1600px; margin:0 auto 1.3em}
.flip__in{position:relative; width:100%; height:100%; transform-style:preserve-3d;
transform:rotateY(calc(var(--flip,0) * 180deg)) rotateX(calc(var(--tilt,0) * 6deg)) rotateZ(calc(-3deg + var(--flip,0) * 4deg))}
.goods__item .flip__face{position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none;
object-fit:cover; border-radius:12px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
box-shadow:0 34px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06)}
.flip__back{transform:rotateY(180deg)}
/* WebKit は backface-visibility が効かず、表を向いている段階でも裏が上に描かれた。
回転が半分（真横）を越えた瞬間に、表と裏の見え方を入れ替えて、どのエンジンでも同じに出す */
.flip__front{opacity:clamp(0, (.5 - var(--flip,0)) * 1000, 1)}
.flip__back{opacity:clamp(0, (var(--flip,0) - .5) * 1000, 1)}
/* 押すと裏返る。押せることが分かるよう、指すと少し浮く */
.flip{cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:12px}
.flip:focus-visible{outline:2px solid var(--c1); outline-offset:8px}
@media (hover:hover){
.flip .flip__in{transition:scale .5s var(--ease)}
.flip:hover .flip__in{scale:1.03}
}
.goods__item .flip__hint{margin-top:.5em; font-size:11px; letter-spacing:.14em; color:var(--fg-faint)}
/* ── ノベルティの下：Rui への入口。サインに欠けた輪を被せる ── */
.rui-link{position:relative; display:flex; align-items:center; gap:clamp(18px,3vw,40px); width:max-content;
max-width:100%; margin:clamp(50px,9vh,110px) auto 0; text-decoration:none; color:var(--fg)}
.rui-link img{width:clamp(140px,14vw,200px); height:auto; transition:filter .6s var(--ease)}
.rui-link__halo{position:absolute; left:calc(clamp(140px,14vw,200px) / 2); top:50%; width:clamp(150px,13vw,190px);
aspect-ratio:1; translate:-50% -50%; border-radius:50%; border:1px solid rgba(237,232,224,.22);
-webkit-mask-image:conic-gradient(#000 0 82%, transparent 82% 100%); mask-image:conic-gradient(#000 0 82%, transparent 82% 100%);
animation:rui-spin 40s linear infinite}
@keyframes rui-spin{to{rotate:360deg}}
.rui-link__txt{display:flex; align-items:center; gap:1em; font-family:var(--min); font-size:clamp(14px,.4vw + 12px,16px);
letter-spacing:.2em; color:var(--fg-soft); transition:color .4s}
.rui-link__txt i{width:28px; height:1px; background:currentColor; transition:width .5s var(--ease)}
.rui-link:hover .rui-link__txt{color:var(--c1-soft)}
.rui-link:hover .rui-link__txt i{width:48px}
.rui-link:hover img{filter:drop-shadow(0 0 12px rgba(255,46,136,.6))}
/* ── チケット：支給の券面（Ticket.ai から書き出した1枚）──
闇の中で浮かせる。マウスに合わせて少し傾く */
.tix{position:relative; width:min(980px,100%); margin-inline:auto;
transform:perspective(1400px) rotateX(calc(var(--ry,0) * -5deg)) rotateY(calc(var(--rx,0) * 7deg)) rotateZ(-1.2deg);
transition:transform .6s var(--ease);
filter:drop-shadow(0 40px 60px rgba(0,0,0,.55)) drop-shadow(0 0 50px rgba(255,46,136,.12))}
.tix img{display:block; width:100%; height:auto}
.sec--ticket .ticket__cta{margin:clamp(40px,7vh,70px) 0 0}
.sec--ticket .note{margin-top:1.4em}
/* ── 第弐章・第参章：章の色で灯る2枚の扉 ──
指すと扉の奥から章の色が差し、闇の光もその章の色に変わる（body.ch-2 / ch-3） */
.doors{list-style:none; margin:clamp(30px,6vh,64px) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr;
gap:clamp(16px,2vw,32px)}
.door{--dc:var(--c2); --dcs:var(--c2-soft); --rgb:55 214 198;
position:relative; overflow:hidden; min-height:clamp(380px,62vh,620px); padding:clamp(26px,3.4vw,52px);
display:flex; flex-direction:column; justify-content:flex-end;
border:1px solid rgb(var(--rgb) / .26);
background:linear-gradient(180deg, rgb(var(--rgb) / .03) 20%, rgb(var(--rgb) / .14));
transition:border-color .8s var(--ease)}
.door--3{--dc:var(--c3); --dcs:var(--c3-soft); --rgb:217 178 92}
.door::before{content:""; position:absolute; left:50%; bottom:-30%; width:140%; aspect-ratio:1; translate:-50% 0;
border-radius:50%; background:radial-gradient(circle, rgb(var(--rgb) / .26), transparent 62%);
opacity:.6; scale:.85; transition:opacity 1s var(--ease), scale 1.2s var(--ease)}
.door:hover::before{opacity:1; scale:1}
.door:hover{border-color:rgb(var(--rgb) / .5)}
.door p{margin:0}
.door__k{position:absolute; right:-.06em; top:-.14em; font-family:var(--min); font-weight:600;
font-size:clamp(220px,26vw,420px); line-height:1; color:rgb(var(--rgb) / .16); pointer-events:none;
transition:color 1s var(--ease)}
.door:hover .door__k{color:rgb(var(--rgb) / .26)}
.door > *:not(.door__k){position:relative}
.door__no{font-family:var(--serif); font-size:12px; letter-spacing:.4em; text-transform:uppercase; color:var(--dc)}
.door__ttl{margin:.6em 0 0; font-family:var(--min); font-weight:600; font-size:clamp(22px,1.4vw + 12px,34px); letter-spacing:.14em; line-height:1.4}
.door__ttl b{display:block; font-weight:600; color:var(--dcs); text-shadow:0 0 34px rgb(var(--rgb) / .45)}
.door__en{margin-top:.3em !important; font-family:var(--serif); font-style:italic; font-size:clamp(18px,1vw + 12px,26px); color:var(--fg-faint)}
.door__copy{margin-top:1.2em !important; font-family:var(--min); letter-spacing:.12em; color:var(--fg-soft)}
.door__state{display:flex; align-items:center; gap:.8em; margin-top:1.8em !important; font-family:var(--serif); font-size:11px;
letter-spacing:.36em; text-transform:uppercase; color:var(--dc)}
.door__state::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--dc);
box-shadow:0 0 12px var(--dc); animation:door-blink 2.4s ease-in-out infinite}
@keyframes door-blink{50%{opacity:.25}}
.sec--soon .note{margin-top:1.6em}
/* ── 開催情報：見出しと一覧を左右に。結びに題字 ── */
.info-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:clamp(24px,5vw,90px)}
.info-grid .info{margin:0}
.info-grid .info div{padding:1em 0; border-top:1px solid var(--rule)}
.info-grid .info div:last-child{border-bottom:1px solid var(--rule)}
.info-grid .info dt{font-family:var(--min); font-size:inherit; letter-spacing:.2em}
/* 締めのロゴ。支給の白版（黒地に白文字＋LOSTの光）を、黒を消す合成で闇に置く */
.info__end{margin:clamp(60px,10vh,120px) auto 0; width:min(100%, 980px)}
.info__end img{display:block; width:100%; height:auto; mix-blend-mode:screen}
.sec--info .copy{text-align:center; margin-top:clamp(24px,4vh,40px)}
/* 締めのロゴの下に、レーベルのエンブレムを小さく置く */
.label-mark{margin:clamp(40px,7vh,72px) auto 0; width:clamp(150px,13vw,210px); opacity:.92}
.label-mark img{display:block; width:100%; height:auto}
.sec--info .label-mark + .copy{margin-top:clamp(18px,3vh,28px)}
@media (max-width:940px){
.info-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
.rui-link{flex-direction:column; gap:14px}
.rui-link__halo{left:50%; top:calc(clamp(140px,14vw,200px) * .25)}
.doors{grid-template-columns:1fr}
.door{min-height:clamp(300px,48vh,440px)}
.info-grid .info div{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.rui-link__halo,.door__state::before{animation:none}
.tix{transition:none}
}
/* ── レーベルの公式アカウント（最下部） ── */
.sns{list-style:none; margin:clamp(22px,4vh,36px) 0 0; padding:0; display:flex; justify-content:center; gap:clamp(18px,3vw,36px)}
.sns a{display:inline-flex; align-items:center; gap:.6em; padding:.55em 1.2em; border:1px solid rgba(237,232,224,.22); border-radius:999px;
font-family:var(--serif); font-size:12px; letter-spacing:.2em; color:var(--fg-soft); text-decoration:none;
transition:color .4s, border-color .4s, background .4s}
.sns svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6}
.sns svg .dot{fill:currentColor; stroke:none}
.sns a:hover{color:var(--fg); border-color:rgba(255,46,136,.6); background:rgba(255,46,136,.08)}
.sns + .copy{margin-top:clamp(18px,3vh,28px)}