@charset "utf-8";
/* =========================================================================
   CINEMA ── "A ride through the film"
   サイト全体を、ファンタジー大作映画の中を巡るアトラクションにする層。
   site.css の上に重ねて読み込み、色・書体・光の演出をまとめて置き換える。

   色   : 真夜中の藍（地）／金属の金（タイトル）／月光の青（リムライト・フレア）
          羊皮紙の白（本文）／ローズ（協会の旧来のワインレッドをひと雫だけ）
   書体 : Cinzel ＝ ハリウッドのタイトル文字（Trajan 系）
          Shippori Mincho B1 800 ＝ 邦題の金文字
          Cormorant Garamond italic ＝ 欧文の添え書き
          Oswald ＝ ポスター最下部のクレジット（ビリング）だけ
   ========================================================================= */

:root{
  --night:      #080c1c;   /* 地：真夜中の藍 */
  --night-2:    #0d1428;
  --night-3:    #121a33;
  --night-4:    #1a2445;
  --moon:       #bfd8f2;   /* 月光・レンズフレア */
  --parchment:  #f3ebda;   /* 本文 */
  --rose:       #e0607a;

  --au-hi:      #fff3cf;   /* 金属の金：ハイライト→地金→影 */
  --au:         #e3b860;
  --au-mid:     #c4913f;
  --au-lo:      #8a5a1c;

  /* 既存の役割名へ流し込む（インライン指定もこの色で揃う） */
  --black:#080c1c; --ink:#080c1c; --ink-a:#0d1428; --ink-b:#121a33; --ink-c:#1a2445;
  --ink-2:#0d1428; --ink-3:#121a33;
  --ivory:#f7f0e0; --ivory-2:#e6dcc6; --slate:#f7f0e0;
  --champagne:#e3b860; --champagne-l:#f6dc9c; --champagne-d:#a8782f;
  --gold:#e3b860; --gold-lt:#f6dc9c; --gold-dk:#a8782f;
  --crimson:#f08da0; --crimson-dk:#b3304c; --wine:#b3304c; --bordeaux:#c2334f;
  --line:rgba(227,184,96,.16); --line-2:rgba(227,184,96,.40);
  --text:#f3ebda; --text-dim:rgba(232,224,207,.70); --text-dark:#f3ebda; --text-dark-dim:rgba(232,224,207,.70);

  --title-en: "Cinzel", "Trajan Pro", "Shippori Mincho B1", serif;
  --title-jp: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --italic:   "Cormorant Garamond", "Shippori Mincho B1", serif;
  --credit:   "Oswald", "Arial Narrow", sans-serif;

  --serif-jp: var(--title-jp);
  --serif-en: var(--italic);
  --sans-en:  var(--title-en);
  --sans-jp:  "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --engrave:  var(--title-en);
  --didone:   var(--title-en);
  --deco:     var(--title-en);
  --deco-jp:  var(--title-jp);
  --script:   var(--italic);

  /* 金属の文字：上から光を受け、中央に地平線の映り込みが走る */
  --metal: linear-gradient(180deg,
      #fffaf0 0%, #fbe6b0 18%, #e8c273 38%, #9c6a24 50%, #c99a4a 56%, #f4d690 74%, #fff1c9 88%, #b88638 100%);
  --metal-flat: linear-gradient(180deg, #fff4d6 0%, #f0cf86 45%, #c89646 100%);
  --sweep: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%);

  --shadow-m: 0 24px 60px rgba(2,4,12,.6);
  --shadow-l: 0 40px 100px rgba(2,4,12,.72);
}

body{
  background:var(--night);
  font-family:var(--sans-jp); font-weight:400; letter-spacing:.05em;
}
::selection{background:var(--au); color:var(--night)}
:focus-visible{outline:2px solid var(--au); outline-offset:3px}

/* フィルムの粒子を少しだけ強く */
body::before{opacity:.075}

/* ─────────────────────────────────────────────────────────────
   0. 旧テーマの装飾を外す（電球・サーチライト・大理石・筆記体・花飾り）
   ───────────────────────────────────────────────────────────── */
.hero::before, .hero::after, .phero::before, .ticker__label::after,
.sec-head--center .h-sec::after{content:none !important; animation:none !important}
.hero__bg::before{animation:none}
.btn--solid::after{animation:none; opacity:0}
.h-sec em{animation:none}
.quote{animation:none}
#spot{display:none}

/* ─────────────────────────────────────────────────────────────
   1. 書体と見出し
   ───────────────────────────────────────────────────────────── */
.metal, .h-sec em, .phero__ttl, .poster__jp, .poster__en, .hero__meta b, .stats b,
.tl__yr, .run__d, .laurel b, .cine-intro__title{
  background-image:var(--sweep), var(--metal);
  background-size:260% 100%, 100% 100%;
  background-position:160% 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.shine{animation:sweep 1.6s cubic-bezier(.3,.1,.3,1) both}
@keyframes sweep{from{background-position:160% 0, 0 0} to{background-position:-60% 0, 0 0}}

.kicker{
  font-family:var(--italic); font-style:italic; font-weight:500;
  font-size:clamp(17px,1.5vw,21px); letter-spacing:.04em; text-transform:none;
  color:var(--champagne-l); gap:14px;
}
.kicker::before, .kicker--center::after, .sec-head--center .kicker::after{
  width:44px; height:1px; opacity:1;
  background:linear-gradient(90deg, transparent, var(--au));
}
.kicker--center::after, .sec-head--center .kicker::after{background:linear-gradient(270deg, transparent, var(--au))}

.h-sec{
  font-family:var(--title-jp); font-weight:800; letter-spacing:.06em; line-height:1.5;
  color:var(--ivory);
  text-shadow:0 0 1px rgba(255,240,210,.25), 0 0 40px rgba(191,216,242,.12), 0 6px 30px rgba(0,0,0,.55);
}
.h-sec em{filter:drop-shadow(0 0 18px rgba(255,206,120,.28))}
.split .h-sec{font-size:clamp(26px,2.9vw,42px)}

/* 背景の大きな欧文：闇に彫り込まれた金の題字 */
.h-en{
  font-family:var(--title-en); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:clamp(54px,9vw,150px); top:-.42em;
  color:transparent; -webkit-text-stroke:0;
  background:linear-gradient(180deg, rgba(246,220,156,.20), rgba(246,220,156,.02) 78%);
  -webkit-background-clip:text; background-clip:text;
}

.lead{font-family:var(--title-jp); font-weight:500; color:rgba(240,232,214,.8)}
.body-txt, .prose p{font-weight:400; color:var(--text-dim)}
.body-txt strong, .lead strong{color:var(--champagne-l) !important}

/* 見出しは予告編のタイトルのように、ぼけからピントが合う */
.js .rv.mask{
  clip-path:none; opacity:0; filter:blur(12px); transform:scale(1.05);
  transition:opacity 1s var(--ease), filter 1.1s var(--ease), transform 1.8s var(--ease);
}
.js .rv.mask.is-in{opacity:1; filter:blur(0); transform:none; clip-path:none}

/* ─────────────────────────────────────────────────────────────
   2. ボタン：金の地金と、夜のガラス
   ───────────────────────────────────────────────────────────── */
.btn{
  font-family:var(--title-en); font-weight:700; font-size:12.5px; letter-spacing:.2em;
  padding:18px 32px; border-radius:2px;
  color:var(--champagne-l); border:1px solid rgba(227,184,96,.55);
  background:rgba(8,12,28,.42);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,243,207,.05), 0 10px 30px rgba(0,0,0,.25);
  transition:color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), transform .35s var(--ease);
}
.btn::before{background:var(--metal)}
.btn:hover{color:var(--night); border-color:var(--au-hi); box-shadow:0 0 34px rgba(227,184,96,.35), 0 10px 30px rgba(0,0,0,.3)}
.btn--solid{
  color:#1b1204; border:0; font-weight:800;
  background:var(--metal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(90,55,10,.5),
             0 0 0 1px rgba(255,236,190,.35), 0 14px 36px rgba(0,0,0,.45), 0 0 40px rgba(227,184,96,.28);
  text-shadow:0 1px 0 rgba(255,245,215,.6);
}
.btn--solid::before{background:linear-gradient(180deg,#fffaf0,#fbe6b0)}
.btn--solid:hover{color:#1b1204; box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(255,236,190,.6), 0 18px 44px rgba(0,0,0,.5), 0 0 60px rgba(255,214,130,.55)}
.btn--gold{border-color:rgba(227,184,96,.7)}
.btn:active{transform:scale(.96)}

.hdr__cta .mini{font-family:var(--title-en); font-weight:700; letter-spacing:.14em; border-radius:2px; background:rgba(8,12,28,.4)}
.hdr__cta .mini--gold{background:var(--metal); color:#1b1204; box-shadow:0 0 24px rgba(227,184,96,.3)}

/* ─────────────────────────────────────────────────────────────
   3. ヘッダー
   ───────────────────────────────────────────────────────────── */
.hdr.is-stuck{
  background:linear-gradient(180deg, rgba(8,12,28,.92), rgba(8,12,28,.78));
  box-shadow:0 1px 0 rgba(227,184,96,.28), 0 20px 40px rgba(0,0,0,.35);
}
.brand__en{font-family:var(--title-en); font-weight:700; letter-spacing:.16em; color:var(--champagne-l)}
.brand__jp{font-family:var(--title-jp)}
.nav a{font-family:var(--title-jp); font-weight:600; font-size:13px; color:rgba(240,232,214,.72)}
.nav a::after{background:linear-gradient(90deg, transparent, var(--au-hi), transparent); height:1px; box-shadow:0 0 8px var(--au)}
.drawer{background:radial-gradient(90% 60% at 50% 0%, rgba(191,216,242,.12), transparent 70%), rgba(8,12,28,.97)}
.drawer a{font-family:var(--title-jp); font-weight:700}
.drawer a small{font-family:var(--italic); font-style:italic; font-size:14px; letter-spacing:.02em; text-transform:none}
.burger{background:rgba(8,12,28,.55)}
.burger::after{font-family:var(--title-en) !important; font-weight:700}

/* ─────────────────────────────────────────────────────────────
   4. HERO ── 一枚のポスター
   ───────────────────────────────────────────────────────────── */
.hero--poster{align-items:stretch; min-height:max(100svh, 760px); background:var(--night)}
.hero--poster .hero__bg{will-change:transform}
.hero--poster .hero__bg video{
  object-position:center 40%;
  filter:contrast(1.22) saturate(1.08) brightness(.6);
  transform:scale(calc(1.08 + var(--zoom,0)));
  transition:transform .6s linear;
}
/* 色調補正：影を藍へ、光を琥珀へ（ハリウッドのティール＆オレンジ） */
.hero--poster .hero__bg::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  left:0; right:0; top:0; height:auto; filter:none; transform:none;
  background:linear-gradient(180deg, rgba(40,70,140,.55) 0%, rgba(30,60,120,.25) 40%, rgba(255,150,60,.22) 78%, rgba(40,50,110,.4) 100%);
  mix-blend-mode:soft-light;
}
.hero--poster .hero__bg::after{
  z-index:2;
  background:
    radial-gradient(56% 42% at 50% 50%, rgba(6,9,22,.6), transparent 78%),
    radial-gradient(110% 85% at 50% 45%, transparent 38%, rgba(4,6,16,.94) 100%),
    linear-gradient(180deg, rgba(8,12,28,.82) 0%, rgba(8,12,28,.12) 26%, rgba(8,12,28,.2) 58%, rgba(8,12,28,.9) 86%, var(--night) 100%);
}

.onesheet{
  position:relative; z-index:4; width:min(100% - 40px, 1180px); margin-inline:auto;
  min-height:inherit; padding:104px 0 28px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.poster__top{display:flex; flex-direction:column; align-items:center; gap:14px}
.poster__presents{
  font-family:var(--title-en); font-weight:600; font-size:clamp(11px,1vw,13px); letter-spacing:.34em;
  color:rgba(240,228,200,.82);
}
.poster__presents i{font-family:var(--italic); font-style:italic; font-weight:500; font-size:1.35em; letter-spacing:.06em; color:var(--champagne-l); margin-left:.2em}
.poster__tagline{
  font-family:var(--title-jp); font-weight:600; font-size:clamp(15px,1.6vw,21px);
  letter-spacing:.5em; padding-left:.5em; color:var(--ivory);
  text-shadow:0 2px 20px rgba(0,0,0,.8);
}

.poster__title{
  position:relative;
  margin:auto 0 0; padding-top:clamp(28px,5vh,64px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(4px,1.2vh,14px);
  font-weight:400; line-height:1;
}
.poster__jp{
  position:relative; display:block;
  font-family:var(--title-jp); font-weight:800;
  font-size:clamp(46px,7.4vw,124px); letter-spacing:.06em; padding-left:.06em; line-height:1.12; white-space:nowrap;
  filter:
    drop-shadow(0 1px 0 rgba(255,244,214,.55))
    drop-shadow(0 3px 0 rgba(70,40,6,.95))
    drop-shadow(0 0 30px rgba(255,200,110,.35))
    drop-shadow(0 22px 40px rgba(0,0,0,.75));
}
.poster__en{
  display:block; font-family:var(--title-en); font-weight:600; text-transform:uppercase;
  font-size:clamp(15px,2.35vw,38px); letter-spacing:.42em; padding-left:.42em;
  filter:drop-shadow(0 2px 0 rgba(60,34,4,.9)) drop-shadow(0 10px 24px rgba(0,0,0,.7));
}
/* タイトルの上をかすめる、横長のレンズフレア */
.poster__title::after{
  content:""; position:absolute; left:50%; top:52%; width:min(92vw,1200px); height:120px;
  transform:translate(-50%,-50%); pointer-events:none; mix-blend-mode:screen; z-index:2;
  background:
    radial-gradient(ellipse 50% 2.4% at 50% 50%, rgba(255,255,255,.95), rgba(191,216,242,.5) 40%, transparent 100%),
    radial-gradient(ellipse 18% 30% at 50% 50%, rgba(191,216,242,.28), transparent 70%);
  opacity:0;
}
.cine-ready .poster__title::after{animation:titleflare 3.4s var(--ease) .9s both}
@keyframes titleflare{0%{opacity:0; transform:translate(-50%,-50%) scaleX(.2)} 30%{opacity:1} 100%{opacity:0; transform:translate(-50%,-50%) scaleX(1.25)}}

.poster__acts{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:clamp(28px,4.6vh,48px)}

/* 月桂冠（映画祭のローレル） */
.laurels{
  display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(8px,2.6vw,40px);
  margin-top:clamp(30px,5vh,56px);
}
.laurel{
  position:relative; width:clamp(140px,12vw,172px); padding:6px 30px 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:84px;
}
.laurel::before, .laurel::after{
  content:""; position:absolute; top:50%; width:30px; height:78px; transform:translateY(-50%);
  background:var(--metal);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -8 52 132'><path d='M34 118C8 96 4 40 26 4' fill='none' stroke='black' stroke-width='2.2'/><g fill='black'><ellipse cx='18.9' cy='108.3' rx='8.7' ry='3.2' transform='rotate(-165 18.9 108.3)'/><ellipse cx='27.0' cy='102.2' rx='8.7' ry='3.2' transform='rotate(-89 27.0 102.2)'/><ellipse cx='12.9' cy='95.2' rx='8.3' ry='3.0' transform='rotate(-153 12.9 95.2)'/><ellipse cx='21.7' cy='91.1' rx='8.3' ry='3.0' transform='rotate(-77 21.7 91.1)'/><ellipse cx='9.1' cy='80.7' rx='7.9' ry='2.9' transform='rotate(-143 9.1 80.7)'/><ellipse cx='18.0' cy='78.3' rx='7.9' ry='2.9' transform='rotate(-67 18.0 78.3)'/><ellipse cx='7.4' cy='65.1' rx='7.5' ry='2.8' transform='rotate(-134 7.4 65.1)'/><ellipse cx='16.1' cy='64.2' rx='7.5' ry='2.8' transform='rotate(-58 16.1 64.2)'/><ellipse cx='7.8' cy='49.0' rx='7.1' ry='2.6' transform='rotate(-126 7.8 49.0)'/><ellipse cx='16.1' cy='49.3' rx='7.1' ry='2.6' transform='rotate(-50 16.1 49.3)'/><ellipse cx='10.4' cy='32.8' rx='6.8' ry='2.5' transform='rotate(-118 10.4 32.8)'/><ellipse cx='18.2' cy='34.2' rx='6.8' ry='2.5' transform='rotate(-42 18.2 34.2)'/><ellipse cx='15.3' cy='17.3' rx='6.4' ry='2.3' transform='rotate(-110 15.3 17.3)'/><ellipse cx='22.3' cy='19.6' rx='6.4' ry='2.3' transform='rotate(-34 22.3 19.6)'/><ellipse cx='22.5' cy='2.8' rx='6.0' ry='2.2' transform='rotate(-100 22.5 2.8)'/><ellipse cx='28.7' cy='6.1' rx='6.0' ry='2.2' transform='rotate(-24 28.7 6.1)'/></g></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -8 52 132'><path d='M34 118C8 96 4 40 26 4' fill='none' stroke='black' stroke-width='2.2'/><g fill='black'><ellipse cx='18.9' cy='108.3' rx='8.7' ry='3.2' transform='rotate(-165 18.9 108.3)'/><ellipse cx='27.0' cy='102.2' rx='8.7' ry='3.2' transform='rotate(-89 27.0 102.2)'/><ellipse cx='12.9' cy='95.2' rx='8.3' ry='3.0' transform='rotate(-153 12.9 95.2)'/><ellipse cx='21.7' cy='91.1' rx='8.3' ry='3.0' transform='rotate(-77 21.7 91.1)'/><ellipse cx='9.1' cy='80.7' rx='7.9' ry='2.9' transform='rotate(-143 9.1 80.7)'/><ellipse cx='18.0' cy='78.3' rx='7.9' ry='2.9' transform='rotate(-67 18.0 78.3)'/><ellipse cx='7.4' cy='65.1' rx='7.5' ry='2.8' transform='rotate(-134 7.4 65.1)'/><ellipse cx='16.1' cy='64.2' rx='7.5' ry='2.8' transform='rotate(-58 16.1 64.2)'/><ellipse cx='7.8' cy='49.0' rx='7.1' ry='2.6' transform='rotate(-126 7.8 49.0)'/><ellipse cx='16.1' cy='49.3' rx='7.1' ry='2.6' transform='rotate(-50 16.1 49.3)'/><ellipse cx='10.4' cy='32.8' rx='6.8' ry='2.5' transform='rotate(-118 10.4 32.8)'/><ellipse cx='18.2' cy='34.2' rx='6.8' ry='2.5' transform='rotate(-42 18.2 34.2)'/><ellipse cx='15.3' cy='17.3' rx='6.4' ry='2.3' transform='rotate(-110 15.3 17.3)'/><ellipse cx='22.3' cy='19.6' rx='6.4' ry='2.3' transform='rotate(-34 22.3 19.6)'/><ellipse cx='22.5' cy='2.8' rx='6.0' ry='2.2' transform='rotate(-100 22.5 2.8)'/><ellipse cx='28.7' cy='6.1' rx='6.0' ry='2.2' transform='rotate(-24 28.7 6.1)'/></g></svg>") center/contain no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.laurel::before{left:0}
.laurel::after{right:0; transform:translateY(-50%) scaleX(-1)}
.laurel b{
  font-family:var(--title-en); font-weight:700; font-size:clamp(20px,1.9vw,27px); line-height:1; letter-spacing:.02em;
  filter:drop-shadow(0 2px 0 rgba(50,28,4,.9));
}
.laurel b sup{font-size:.55em; vertical-align:.5em}
.laurel span{font-family:var(--title-jp); font-weight:600; font-size:10.5px; letter-spacing:.08em; line-height:1.45; color:rgba(246,232,200,.86)}

/* 最下部のクレジット（ビリング・ブロック） */
.billing{
  margin-top:clamp(26px,4.4vh,48px); max-width:900px;
  font-family:var(--credit), var(--title-jp); font-weight:300; text-transform:uppercase;
  font-size:clamp(10.5px,.85vw,12.5px); line-height:1.4; letter-spacing:.06em; color:rgba(236,226,206,.62);
  transform:scaleY(1.18); transform-origin:50% 0; margin-bottom:12px;
}
.billing p + p{margin-top:.35em}
.billing small{font-size:.72em; letter-spacing:.14em; opacity:.8; margin:0 .35em}

.poster__release{
  margin-top:clamp(18px,3vh,30px); display:inline-flex; align-items:baseline; gap:16px; flex-wrap:wrap; justify-content:center;
  padding:10px 4px; border-top:1px solid rgba(227,184,96,.35); border-bottom:1px solid rgba(227,184,96,.35);
  transition:letter-spacing .5s var(--ease), border-color .5s var(--ease);
}
.poster__release-date{font-family:var(--title-en); font-weight:700; font-size:clamp(17px,1.7vw,24px); letter-spacing:.14em; color:var(--champagne-l)}
.poster__release-ttl{font-family:var(--title-jp); font-weight:700; font-size:clamp(12.5px,1.1vw,15px); letter-spacing:.14em; color:var(--ivory)}
.poster__release:hover{border-color:var(--au-hi)}
.poster__release:hover .poster__release-date{text-shadow:0 0 20px rgba(255,214,130,.8)}

.hero--poster .scrollcue{font-family:var(--title-en); font-weight:700}

/* ポスターの登場：幕が上がったあと、上から順に */
.js .onesheet > *{opacity:0; transform:translateY(18px); filter:blur(8px)}
.js .poster__jp{opacity:0; transform:scale(1.18); filter:blur(22px)}
.js .poster__en{opacity:0; letter-spacing:1.1em}
.cine-ready .onesheet > *{opacity:1; transform:none; filter:none; transition:opacity 1.4s var(--ease), transform 1.6s var(--ease), filter 1.4s var(--ease)}
.cine-ready .poster__top{transition-delay:.1s}
.cine-ready .poster__title{transition-delay:.3s}
.cine-ready .poster__jp{opacity:1; transform:none; filter:
    drop-shadow(0 1px 0 rgba(255,244,214,.55)) drop-shadow(0 3px 0 rgba(70,40,6,.95))
    drop-shadow(0 0 30px rgba(255,200,110,.35)) drop-shadow(0 22px 40px rgba(0,0,0,.75));
  transition:opacity 1.8s var(--ease) .35s, transform 3.2s var(--ease) .35s, filter 2s var(--ease) .35s}
.cine-ready .poster__en{opacity:1; letter-spacing:.42em; transition:opacity 2s var(--ease) 1s, letter-spacing 3s var(--ease) 1s}
.cine-ready .poster__acts{transition-delay:1.5s}
.cine-ready .laurels{transition-delay:1.75s}
.cine-ready .billing{transform:scaleY(1.18); transition-delay:2s}
.cine-ready .poster__release{transition-delay:2.2s}
.js .billing{transform:translateY(18px) scaleY(1.18)}

/* ─────────────────────────────────────────────────────────────
   5. 光のレイヤー（JS が差し込む）
   ───────────────────────────────────────────────────────────── */
.fx{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.fx-rays{
  z-index:3; mix-blend-mode:screen; opacity:.75;
  transform:translate3d(calc(var(--px,0) * -14px), calc(var(--py,0) * -10px), 0);
}
.fx-rays::before{
  content:""; position:absolute; left:-30%; right:-30%; top:-20%; height:150%;
  background:repeating-conic-gradient(from 145deg at var(--fx,70%) -6%,
      rgba(255,226,170,.16) 0deg 1.2deg, transparent 1.2deg 4.6deg,
      rgba(191,216,242,.10) 4.6deg 5.4deg, transparent 5.4deg 9.5deg);
  -webkit-mask-image:radial-gradient(70% 80% at var(--fx,70%) 0%, #000, transparent 80%);
          mask-image:radial-gradient(70% 80% at var(--fx,70%) 0%, #000, transparent 80%);
  filter:blur(5px);
  transform-origin:var(--fx,70%) 0;
  animation:rays 18s ease-in-out infinite alternate;
}
@keyframes rays{from{transform:rotate(-3deg); opacity:.7} to{transform:rotate(3deg); opacity:1}}

.fx-fog{z-index:3; mix-blend-mode:screen; opacity:.55}
.fx-fog::before, .fx-fog::after{
  content:""; position:absolute; left:-50%; width:200%; bottom:-10%; height:55%;
  background:
    radial-gradient(30% 50% at 20% 70%, rgba(191,216,242,.22), transparent 70%),
    radial-gradient(26% 44% at 55% 80%, rgba(246,220,156,.16), transparent 70%),
    radial-gradient(34% 50% at 85% 75%, rgba(191,216,242,.18), transparent 70%);
  filter:blur(24px); animation:fog 38s ease-in-out infinite alternate;
}
.fx-fog::after{bottom:-20%; opacity:.7; animation-duration:52s; animation-direction:alternate-reverse}
@keyframes fog{from{transform:translateX(-12%)} to{transform:translateX(12%)}}

.fx-dust{position:absolute; inset:0; z-index:3; pointer-events:none; width:100%; height:100%; mix-blend-mode:screen}

.fx-flare{
  z-index:5; mix-blend-mode:screen; opacity:.9;
  --fx:78%; --fy:9%;
}
.fx-flare::before{          /* 光源と横に伸びるアナモルフィックの筋 */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle 70px at var(--fx) var(--fy), rgba(255,246,225,.55), rgba(255,210,140,.18) 45%, transparent 72%),
    radial-gradient(ellipse 58% 5px at var(--fx) var(--fy), rgba(255,255,255,.85), rgba(170,210,255,.45) 45%, transparent 100%),
    radial-gradient(ellipse 30% 26px at var(--fx) var(--fy), rgba(150,195,255,.16), transparent 100%);
  animation:flarebreath 6s ease-in-out infinite alternate;
}
.fx-flare::after{           /* 光源の反対側に写るゴースト（レンズの映り込み） */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle 26px at calc(100% - var(--fx)) calc(100% - var(--fy)), rgba(150,200,255,.14), transparent 70%),
    radial-gradient(circle 60px at calc(100% - var(--fx) * .7) calc(100% - var(--fy) * .7), transparent 60%, rgba(255,200,140,.10) 66%, transparent 74%),
    radial-gradient(circle 12px at calc(50% + (50% - var(--fx)) * .4) calc(50% + (50% - var(--fy)) * .4), rgba(200,255,230,.18), transparent 70%);
}
@keyframes flarebreath{from{opacity:.75} to{opacity:1}}

/* ─────────────────────────────────────────────────────────────
   6. 開幕 ── スタジオロゴ
   ───────────────────────────────────────────────────────────── */
#curtain{display:none !important}
.cine-intro{
  position:fixed; inset:0; z-index:10000; background:#03050c; overflow:hidden;
  display:grid; place-items:center; cursor:pointer;
  transition:opacity 1.2s var(--ease), visibility 1.2s;
}
.cine-intro.is-out{opacity:0; visibility:hidden; pointer-events:none}
.cine-intro__bar{position:absolute; left:0; right:0; height:12vh; background:#000; z-index:3; transition:transform 1.4s var(--ease-io)}
.cine-intro__bar--t{top:0}
.cine-intro__bar--b{bottom:0}
.cine-intro.is-out .cine-intro__bar--t{transform:translateY(-100%)}
.cine-intro.is-out .cine-intro__bar--b{transform:translateY(100%)}
.cine-intro__streak{
  position:absolute; left:50%; top:50%; width:140vw; height:160px; transform:translate(-50%,-50%) scaleX(0);
  background:
    radial-gradient(ellipse 50% 2% at 50% 50%, #fff, rgba(170,210,255,.7) 40%, transparent 100%),
    radial-gradient(ellipse 24% 22% at 50% 50%, rgba(150,195,255,.25), transparent 100%),
    radial-gradient(circle 60px at 50% 50%, rgba(255,240,210,.7), transparent 70%);
  mix-blend-mode:screen;
  animation:streak 2.6s cubic-bezier(.2,.7,.2,1) .25s both;
}
@keyframes streak{0%{transform:translate(-50%,-50%) scaleX(0); opacity:0} 25%{opacity:1} 60%{transform:translate(-50%,-50%) scaleX(1); opacity:1} 100%{transform:translate(-50%,-50%) scaleX(1.3); opacity:0}}
.cine-intro__logo{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px}
.cine-intro__pre{
  font-family:var(--title-en); font-weight:600; font-size:clamp(10px,1vw,12.5px); letter-spacing:.5em; padding-left:.5em;
  color:rgba(236,226,206,.7); opacity:0; animation:introfade 1.4s var(--ease) .9s both;
}
.cine-intro__title{
  font-family:var(--title-en); font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,5.2vw,78px); letter-spacing:.16em; padding-left:.16em; line-height:1.1;
  filter:drop-shadow(0 2px 0 rgba(60,34,4,.9)) drop-shadow(0 0 30px rgba(255,200,110,.35));
  animation:introtitle 2.4s var(--ease) .5s both, sweep 1.8s cubic-bezier(.3,.1,.3,1) 1.3s both;
}
.cine-intro__jp{
  font-family:var(--title-jp); font-weight:700; font-size:clamp(12px,1.2vw,15px); letter-spacing:.6em; padding-left:.6em;
  color:var(--champagne-l); opacity:0; animation:introfade 1.4s var(--ease) 1.5s both;
}
.cine-intro__skip{
  position:absolute; right:22px; bottom:calc(12vh + 18px); z-index:4;
  font-family:var(--italic); font-style:italic; font-size:15px; color:rgba(236,226,206,.55);
}
@keyframes introtitle{from{opacity:0; transform:scale(1.14); filter:blur(16px)} to{opacity:1; transform:none}}
@keyframes introfade{from{opacity:0} to{opacity:1}}
.cine-intro--short .cine-intro__logo, .cine-intro--short .cine-intro__streak, .cine-intro--short .cine-intro__skip{display:none}

/* ─────────────────────────────────────────────────────────────
   7. セクション ── 夜の光だまり
   ───────────────────────────────────────────────────────────── */
.sec{
  background-color:var(--night);
  background-image:
    radial-gradient(60% 50% at 50% 0%, rgba(191,216,242,.07), transparent 70%),
    radial-gradient(40% 40% at 90% 100%, rgba(227,184,96,.06), transparent 70%);
}
.sec--alt{
  background-color:var(--night-2);
  background-image:
    radial-gradient(50% 60% at 0% 20%, rgba(227,184,96,.09), transparent 70%),
    radial-gradient(55% 55% at 100% 90%, rgba(191,216,242,.07), transparent 70%);
}
/* 場面の切り替わり：水平線に光が走る */
.sec--alt::before, .band::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(191,216,242,.25) 30%, rgba(255,246,220,.85) 50%, rgba(191,216,242,.25) 70%, transparent);
  box-shadow:0 0 18px rgba(191,216,242,.5);
}
.band::before{z-index:3}
.rule{background:linear-gradient(90deg, transparent, rgba(255,246,220,.7), transparent); opacity:.6; box-shadow:0 0 14px rgba(191,216,242,.4)}

/* ティッカー */
.ticker{background:#060914; border-block:1px solid rgba(227,184,96,.2)}
.ticker__label{
  background:var(--metal); color:#1b1204; box-shadow:none;
  font-family:var(--title-en); font-weight:800; letter-spacing:.24em;
}
.ticker__track span{font-family:var(--title-jp); font-weight:500; color:rgba(236,226,206,.75)}
.ticker__track span b{font-family:var(--title-en); font-weight:700; color:var(--champagne-l)}

/* ─────────────────────────────────────────────────────────────
   8. カード ── 光るコレクターカード（ホログラム）
   ───────────────────────────────────────────────────────────── */
.card, .plate, .run, .offsite, .prices div, .roles div, .scredit{
  border-radius:4px;
}
.card{
  background:linear-gradient(180deg, #111a33, #090e1e);
  border:1px solid rgba(227,184,96,.22);
  box-shadow:0 30px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,243,207,.08);
}
.card:hover{border-color:rgba(255,236,190,.75); box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 50px rgba(227,184,96,.22)}
.card__img{aspect-ratio:2/3}
.card__img img{filter:saturate(1.02) brightness(.92) contrast(1.05)}
.card__img::after{background:linear-gradient(180deg, transparent 50%, rgba(9,14,30,.85))}
.card__no{
  font-family:var(--title-en); font-weight:700; background:var(--metal); color:#1b1204; letter-spacing:.14em;
}
.card__cat{font-family:var(--italic); font-style:italic; font-size:15px; letter-spacing:.03em; text-transform:none; color:var(--champagne-l)}
.card__ttl{font-family:var(--title-jp); font-weight:800}
.card__more{font-family:var(--title-en); font-weight:700}
.card::after{background:var(--metal)}

.tilt .glare{
  mix-blend-mode:color-dodge; opacity:0;
  background:
    radial-gradient(260px circle at var(--gx,50%) var(--gy,50%), rgba(255,244,214,.45), transparent 60%),
    linear-gradient(115deg, transparent 20%, rgba(255,120,200,.16) 35%, rgba(120,220,255,.18) 45%, rgba(255,240,150,.18) 55%, transparent 70%);
  background-size:100% 100%, 220% 220%;
  background-position:0 0, calc(var(--gx,50%)) calc(var(--gy,50%));
}
.tilt.is-tilting .glare{opacity:.9}

.plate{
  background:linear-gradient(170deg, rgba(26,36,69,.72), rgba(13,20,40,.9));
  border:1px solid rgba(227,184,96,.18);
  box-shadow:inset 0 1px 0 rgba(255,243,207,.06);
}
.plate:hover{border-color:rgba(227,184,96,.5); box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 40px rgba(191,216,242,.08)}
.plate--gold{background:linear-gradient(160deg, rgba(227,184,96,.13), transparent 60%), linear-gradient(170deg, #16203f, #0d1428); box-shadow:inset 0 0 0 5px #0d1428, inset 0 0 0 6px rgba(227,184,96,.3)}
.plate h3{font-family:var(--title-jp) !important; font-weight:800 !important}

.offsite{
  background:linear-gradient(120deg, #111a33, #0a1022);
  border:1px solid rgba(227,184,96,.3);
  box-shadow:0 40px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,243,207,.08);
}
.offsite:hover{border-color:rgba(255,236,190,.7)}
.offsite h3{font-family:var(--title-jp); font-weight:800}
.offsite__media::after{background:linear-gradient(90deg, #0f1730, transparent 40%)}
.offsite__media--flyer{background:radial-gradient(80% 70% at 50% 45%, rgba(227,184,96,.18), transparent 70%), #070b18 !important}

.tag{font-family:var(--title-jp); font-weight:600; letter-spacing:.1em; border-radius:2px; text-transform:none}
.tag--gold{background:rgba(227,184,96,.14); border-color:rgba(227,184,96,.6)}
.tag--live{background:var(--rose); border-color:var(--rose)}

/* 数字 */
.sched__date, .news__date, .prices dd, .hero__meta b, .tl__yr, .run__d, .stats b{
  font-family:var(--title-en) !important; font-style:normal !important; font-weight:700 !important; letter-spacing:.04em !important;
}
.sched__date{color:var(--champagne-l)}
.sched__ttl, .tl__ttl, .run__t, .dl__row dt, .prices dt, .roles dd, .prose h3, .prose h4, .mem-h, .ctabar__t, .cta__ttl{font-family:var(--title-jp); font-weight:800}
.sched__row:hover, .news__item:hover{background:linear-gradient(90deg, rgba(227,184,96,.08), transparent 70%)}
.sched__row::before, .news__item::before, .run::before{background:var(--metal); box-shadow:0 0 12px rgba(227,184,96,.6)}

.stats, .prices, .roles{background:rgba(227,184,96,.14); border-color:rgba(227,184,96,.14)}
.stats div, .prices div, .roles div{background:#0b1122}
.stats div:hover, .prices div:hover, .roles div:hover{background:#121b36}

/* 帯と引用 ── 字幕のように、読むところに光が当たる */
.band__bg img{opacity:.55; filter:saturate(.8) brightness(.6) contrast(1.1)}
.band__bg::after{background:linear-gradient(90deg, rgba(8,12,28,.95) 6%, rgba(8,12,28,.62) 50%, rgba(8,12,28,.35) 100%), linear-gradient(180deg, var(--night), transparent 20%, transparent 80%, var(--night))}
.quote{
  font-family:var(--title-jp); font-weight:800; color:var(--ivory);
  background:none; -webkit-text-fill-color:currentColor;
}
.quote .gold{color:var(--champagne-l); -webkit-text-fill-color:var(--champagne-l)}
.quote .qw{transition:color .5s ease, text-shadow .5s ease, opacity .5s ease; opacity:.18}
.quote .qw.is-lit{opacity:1; text-shadow:0 0 24px rgba(255,214,140,.35)}

/* マーキー帯：予告編のクレジット */
.mq{background:linear-gradient(90deg, #05080f, #0d1428 50%, #05080f); border-block:1px solid rgba(227,184,96,.18)}
.mq::before{background:linear-gradient(90deg, #05080f, transparent)}
.mq::after{background:linear-gradient(270deg, #05080f, transparent)}
.mq__t{font-family:var(--title-en); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:clamp(28px,4.8vw,72px)}
.mq__t span{-webkit-text-stroke:1px rgba(246,220,156,.55)}
.mq__t span i{font-family:var(--title-jp); font-weight:800; color:var(--champagne-l); text-transform:none}
.mq__t span b{color:var(--au)}

/* CTA */
.cta{background:var(--night)}
.cta__bg{background:radial-gradient(60% 70% at 50% 0%, rgba(191,216,242,.14), transparent 70%), radial-gradient(50% 60% at 50% 100%, rgba(227,184,96,.16), transparent 70%), linear-gradient(180deg, #0d1428, var(--night))}
.cta__ttl{font-weight:800; text-shadow:0 0 40px rgba(191,216,242,.15)}

/* フッター ── エンドロール */
.ftr{background:linear-gradient(180deg, #0a1020 0%, #04060d 100%); box-shadow:inset 0 1px 0 rgba(227,184,96,.3)}
.ftr h5{font-family:var(--title-en); font-weight:700; letter-spacing:.24em}
.ftr li a{font-family:var(--title-jp)}
.ftr__sns a{border-radius:50%}
.ftr__sns a:hover{background:var(--metal); color:#1b1204}
.ftr__skyline{opacity:.14}
.totop{background:rgba(8,12,28,.85); border-radius:50%}
.ctabar{background:rgba(8,12,28,.94); box-shadow:0 -1px 0 rgba(227,184,96,.35), 0 -20px 40px rgba(0,0,0,.4)}
#prog{background:var(--metal); height:2px; box-shadow:0 0 14px rgba(255,214,140,.8)}

.split__media img{box-shadow:0 40px 90px rgba(0,0,0,.6)}
.split__media::before{border-color:rgba(227,184,96,.35)}
.js .wipe::after{background:linear-gradient(120deg, #fffaf0, var(--au) 40%, var(--au-lo))}

.scredit{background:linear-gradient(150deg, rgba(227,184,96,.08), transparent 62%), #0b1122}

/* ─────────────────────────────────────────────────────────────
   9. 下層ページの題字（タイトルカード）
   ───────────────────────────────────────────────────────────── */
.phero{
  min-height:min(78svh, 760px); display:flex; align-items:center; text-align:center;
  padding:clamp(130px,14vw,190px) 0 clamp(70px,8vw,110px);
  background:var(--night);
}
.phero .wrap-wide{position:relative; z-index:4; display:flex; flex-direction:column; align-items:center}
.phero__bg img{opacity:.8; filter:saturate(1) contrast(1.12) brightness(.7); animation:kenburns 30s ease-in-out infinite alternate}
.phero__bg::after, .p-nut .phero__bg::after{
  background:
    radial-gradient(56% 50% at 50% 52%, rgba(8,12,28,.55), transparent 75%),
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(4,6,16,.92) 100%),
    linear-gradient(180deg, rgba(8,12,28,.85) 0%, rgba(8,12,28,.2) 35%, rgba(8,12,28,.35) 70%, var(--night) 100%);
}
.phero__bg::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(40,70,140,.5), rgba(255,150,60,.2) 80%);
  mix-blend-mode:soft-light;
}
.p-nut .phero::after{content:none}
.phero .kicker{justify-content:center}
.phero .kicker::after{content:""; width:44px; height:1px; background:linear-gradient(270deg, transparent, var(--au))}
.phero__ttl{
  font-weight:800; letter-spacing:.08em; line-height:1.3;
  font-size:clamp(38px,6.6vw,104px);
  filter:drop-shadow(0 1px 0 rgba(255,244,214,.5)) drop-shadow(0 3px 0 rgba(70,40,6,.9)) drop-shadow(0 0 26px rgba(255,200,110,.3)) drop-shadow(0 20px 36px rgba(0,0,0,.7));
}
.phero__en{
  font-family:var(--title-en); font-style:normal; font-weight:600; text-transform:uppercase;
  font-size:clamp(12px,1.35vw,18px); letter-spacing:.36em; padding-left:.36em; line-height:1.8;
  color:var(--champagne-l); text-shadow:0 2px 14px rgba(0,0,0,.8); margin-top:1.2em;
}
.crumbs{justify-content:center; font-family:var(--title-jp)}
.js .phero .rv.mask{transition-delay:.2s}
.phero--full{min-height:92svh; align-items:flex-end}
.phero--full .phero__bg img{opacity:1; filter:contrast(1.08) saturate(1.05) brightness(.9)}

/* ─────────────────────────────────────────────────────────────
   10. くるみ割り人形：緑の照明を、月光と金へ
   ───────────────────────────────────────────────────────────── */
.sec--stage{background:#0a0f22}
.sec--stage::before{background:repeating-conic-gradient(from 196deg at 50% 0%, rgba(255,226,170,.12) 0deg 2.4deg, transparent 2.4deg 11deg)}
.sec--stage::after{background:radial-gradient(58% 100% at 50% 104%, rgba(191,216,242,.12), transparent 68%), radial-gradient(40% 74% at 86% 108%, rgba(227,184,96,.08), transparent 72%)}
.stagebg::after{background:linear-gradient(180deg, #0a0f22 0%, rgba(10,15,34,.3) 26%, rgba(10,15,34,.34) 72%, #0a0f22 100%), radial-gradient(78% 62% at 50% 46%, transparent 40%, rgba(10,15,34,.62) 100%)}
.stageshot{border-color:rgba(227,184,96,.35)}
.stageshot::after{background:radial-gradient(120% 56% at 50% 0%, rgba(191,216,242,.18), transparent 62%), linear-gradient(to top, rgba(8,12,28,.9) 0%, rgba(8,12,28,.3) 30%, transparent 52%)}
.stageshot figcaption{color:var(--champagne-l); font-family:var(--title-en); font-weight:700}
.stageshot:hover{border-color:rgba(255,236,190,.6); box-shadow:0 32px 78px rgba(0,0,0,.62), 0 0 48px rgba(227,184,96,.2)}
.plate--velvet{background:radial-gradient(120% 90% at 50% 0%, rgba(224,96,122,.18), transparent 60%), linear-gradient(168deg, #3a1230, #150a22 72%)}
.p-nut .ftr::before{background:radial-gradient(58% 100% at 50% 100%, rgba(191,216,242,.08), transparent 66%)}
.flyermotion{border-color:rgba(227,184,96,.35); background:#070b18}
.tabs button{font-family:var(--title-jp); font-weight:700; border-radius:2px}
.tabs button[aria-selected="true"]{background:var(--metal); color:#1b1204}

/* ─────────────────────────────────────────────────────────────
   11. アトラクションの仕掛け
   ───────────────────────────────────────────────────────────── */
/* 魔法の粉：ポインターの軌跡とクリックの星 */
.magic{position:fixed; inset:0; z-index:9996; pointer-events:none; width:100vw; height:100vh}

/* 指先の光（カーソルの輪） */
.wand{
  position:fixed; left:0; top:0; z-index:10003; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid rgba(255,236,190,.7);
  box-shadow:0 0 18px rgba(255,214,140,.45), inset 0 0 10px rgba(255,214,140,.25);
  transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s var(--ease), opacity .3s;
  mix-blend-mode:screen; opacity:0;
}
.wand.is-on{opacity:1}
.wand.is-hot{width:64px; height:64px; margin:-32px 0 0 -32px; background:radial-gradient(circle, rgba(255,236,190,.22), transparent 70%)}
@media (hover:none){.wand, .magic--trail{display:none}}

/* フィルムリール：場面の目次 */
.reel{
  position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:940;
  display:flex; flex-direction:column; gap:6px; padding:12px 7px;
  border:1px solid rgba(227,184,96,.28); border-radius:14px;
  background:rgba(8,12,28,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .6s var(--ease);
}
.reel.is-on{opacity:1; pointer-events:auto}
.reel::before, .reel::after{   /* フィルムの送り穴 */
  content:""; position:absolute; top:10px; bottom:10px; width:3px;
  background:radial-gradient(circle, rgba(227,184,96,.35) 0 1px, transparent 1.6px) 0 0/3px 7px repeat-y;
}
.reel::before{left:2px}
.reel::after{right:2px}
.reel a{
  position:relative; display:block; width:14px; height:18px; border-radius:2px;
  background:rgba(227,184,96,.14); border:1px solid rgba(227,184,96,.35);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.reel a.is-now{background:var(--metal); height:28px; box-shadow:0 0 14px rgba(255,214,140,.7)}
.reel a span{
  position:absolute; right:26px; top:50%; transform:translate(8px,-50%); white-space:nowrap;
  font-family:var(--title-jp); font-weight:700; font-size:12.5px; letter-spacing:.1em; color:var(--ivory);
  padding:7px 12px; background:rgba(8,12,28,.92); border:1px solid rgba(227,184,96,.35); border-radius:2px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.reel a span small{display:block; font-family:var(--italic); font-style:italic; font-weight:500; font-size:12px; letter-spacing:.04em; color:var(--champagne-l)}
.reel a:hover span, .reel a:focus-visible span{opacity:1; transform:translate(0,-50%)}
@media (max-width:980px){.reel{display:none}}

/* 磁石のボタン */
.magnet{transition:transform .35s var(--ease), color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease)}

/* ─────────────────────────────────────────────────────────────
   12. スマホ
   ───────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .onesheet{padding-top:96px}
  .poster__tagline{letter-spacing:.3em; padding-left:.3em}
  .poster__jp{font-size:clamp(34px,10.6vw,64px); letter-spacing:.03em; padding-left:.03em}
  .poster__en{letter-spacing:.26em !important; padding-left:.26em}
  .laurels{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 0; width:100%; max-width:360px}
  .laurel{width:auto; padding:4px 26px; min-height:76px}
  .laurel::before, .laurel::after{width:24px; height:64px}
  .billing{font-size:10px}
  .poster__acts .btn{padding:16px 22px}
  .phero{min-height:62svh}
}

/* ─────────────────────────────────────────────────────────────
   13. 動きを減らす設定
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .cine-intro, .fx-rays::before, .fx-fog::before, .fx-fog::after, .fx-flare::before,
  .phero__bg img, .poster__title::after{animation:none !important}
  .cine-intro{display:none}
  .js .onesheet > *, .js .poster__jp, .js .poster__en{opacity:1 !important; transform:none !important; filter:none !important; letter-spacing:inherit}
  .js .rv.mask{opacity:1; filter:none; transform:none}
  .quote .qw{opacity:1}
  .magic, .wand{display:none}
}

/* ─────────────────────────────────────────────────────────────
   14. 夜空 ── サイト全体の背後に広がる星空（JS の canvas）
   セクションを半透明にして、スクロールしても空がつながって見えるように。
   ───────────────────────────────────────────────────────────── */
.sky{position:fixed; inset:0; z-index:-1; pointer-events:none; width:100vw; height:100vh}
body{background:radial-gradient(120% 80% at 50% 0%, #121c3c 0%, #080c1c 55%, #05070f 100%) fixed var(--night)}
.sec{background-color:transparent}
.sec--alt{background-color:rgba(13,20,40,.55)}
.sec--stage{background-color:rgba(10,15,34,.7)}
.band{background-color:#0b1122}

/* ── 上演作品：壁にポスターが立ち上がる ── */
.js .card.rv{opacity:0; transform:perspective(1100px) rotateX(28deg) translateY(70px) scale(.94); transform-origin:50% 100%;
  transition:opacity 1s var(--ease), transform 1.4s cubic-bezier(.2,.9,.25,1.15)}
.js .card.rv.is-in{opacity:1; transform:none}

/* ── 公演日程：金のチケット ── */
.sched{border-top:0; display:flex; flex-direction:column; gap:14px}
.sched__row{
  grid-template-columns:236px 1fr 230px 120px;
  border:1px solid rgba(227,184,96,.28); border-radius:6px; padding:26px 30px;
  background:
    linear-gradient(90deg, rgba(227,184,96,.13), rgba(227,184,96,.03) 40%, rgba(191,216,242,.04)),
    #0d1428;
  -webkit-mask:radial-gradient(circle 11px at 0 50%, transparent 97%, #000) left/51% 100% no-repeat,
               radial-gradient(circle 11px at 100% 50%, transparent 97%, #000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 11px at 0 50%, transparent 97%, #000) left/51% 100% no-repeat,
               radial-gradient(circle 11px at 100% 50%, transparent 97%, #000) right/51% 100% no-repeat;
  transition:transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.sched__row::before{content:none}
.sched__date{position:relative; padding-right:24px}
.sched__date::after{     /* もぎり線 */
  content:""; position:absolute; right:0; top:-14px; bottom:-14px; width:0;
  border-right:2px dashed rgba(227,184,96,.35);
}
.sched__row:hover{
  padding-left:30px; transform:translateY(-4px) rotate(-.4deg); border-color:rgba(255,236,190,.7);
  background:linear-gradient(90deg, rgba(227,184,96,.24), rgba(227,184,96,.06) 45%, rgba(191,216,242,.06)), #111a33;
}
@media (max-width:1180px){ .sched__row{grid-template-columns:236px 1fr 200px} }
@media (max-width:640px){
  .sched__row{padding:22px 24px; grid-template-columns:1fr}
  .sched__row:hover{padding-left:24px}
  .sched__date::after{display:none}
}

/* ── 図版の登場：金の縁が光るシャッター ── */
.js .wipe::after{
  background:linear-gradient(90deg, #080c1c 0%, #0d1428 94%, #fff3cf 98%, #e3b860 100%);
  box-shadow:0 0 40px rgba(255,214,140,.5);
}

/* ── 背景の大きな欧文にも光が走る ── */
.h-en{background-image:var(--sweep), linear-gradient(180deg, rgba(246,220,156,.22), rgba(246,220,156,.02) 78%);
  background-size:260% 100%, 100% 100%; background-position:160% 0, 0 0; background-repeat:no-repeat}
.h-en.shine{animation:sweep 2.4s cubic-bezier(.3,.1,.3,1) both}
@media (prefers-reduced-motion:reduce){ .sky{display:none} .js .card.rv{opacity:1; transform:none} }

/* パネルの中のリンク色（site.css の .plate a）に、金のボタンの文字色が負けないように */
.btn.btn--solid, .btn.btn--solid:hover{color:#1b1204}

/* 和文の見出しは文節で折り返し、一文字だけ行に残らないように */
.h-sec, .phero__ttl, .cta__ttl, .lead, .quote, .offsite h3, .card__ttl, .sched__ttl, .poster__tagline{word-break:auto-phrase}

/* ─────────────────────────────────────────────────────────────
   15. キャラクターポスター ── 出演者インタビュー
   触れると映像が動きだし、選ぶと劇場の灯りが落ちて本編が始まる。
   ───────────────────────────────────────────────────────────── */
.castwall{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,26px)}
.castcard{
  position:relative; display:block; width:100%; aspect-ratio:2/3; padding:0; text-align:center;
  overflow:hidden; isolation:isolate; border-radius:4px; cursor:pointer;
  background:#05070f; border:1px solid rgba(227,184,96,.28);
  box-shadow:0 40px 80px rgba(0,0,0,.55);
  transition:border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.castcard:hover, .castcard:focus-visible{border-color:rgba(255,236,190,.8); box-shadow:0 50px 100px rgba(0,0,0,.65), 0 0 60px rgba(227,184,96,.25)}
.castcard__media{position:absolute; inset:0; z-index:0}
.castcard__media img, .castcard__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%;
  filter:contrast(1.12) saturate(.92) brightness(.9);
  transition:transform 2.4s var(--ease), opacity .8s var(--ease), filter .8s var(--ease);
}
.castcard__media video{opacity:0}
.castcard.is-playing .castcard__media video{opacity:1}
.castcard:hover .castcard__media img{transform:scale(1.06)}
/* 二人のポスター：左右に並ぶツーショット、下は闇へ溶ける */
.castcard__media img.castcard__half{
  width:50%; height:66%; left:0; right:auto; object-position:50% 30%;
  -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent);
          mask-image:linear-gradient(180deg, #000 70%, transparent);
}
.castcard__media img.castcard__half--r{left:50%}
.castcard__media::before{      /* ふたりの間に立つ金の光 */
  content:""; position:absolute; left:50%; top:0; height:62%; width:1px; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(255,240,200,.9), transparent); box-shadow:0 0 12px rgba(255,214,140,.7);
}
.castcard__media:has(.castcard__half)::before{opacity:1}
.castcard:hover .castcard__media img.castcard__half{transform:scale(1.04)}
/* 色調補正と、下からの闇 */
.castcard__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,12,28,.55) 0%, transparent 18%, transparent 42%, rgba(8,12,28,.7) 64%, #05070f 96%),
    linear-gradient(180deg, rgba(40,70,140,.35), rgba(255,150,60,.18)) ;
  mix-blend-mode:normal;
}
.castcard__top{
  position:absolute; left:0; right:0; top:clamp(12px,1.4vw,20px); z-index:2;
  font-family:var(--title-jp); font-weight:700; font-size:11px; letter-spacing:.3em; color:rgba(246,232,200,.85);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.castcard__body{
  position:absolute; left:0; right:0; bottom:clamp(54px,5vw,70px); z-index:2; padding:0 clamp(12px,1.4vw,20px);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.castcard__en{
  font-family:var(--title-en); font-weight:700; text-transform:uppercase; line-height:1;
  font-size:clamp(24px,2.5vw,40px); letter-spacing:.12em; padding-left:.12em;
  background-image:var(--sweep), var(--metal); background-size:260% 100%, 100% 100%; background-position:160% 0, 0 0; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(50,28,4,.9)) drop-shadow(0 8px 20px rgba(0,0,0,.8));
}
.castcard:hover .castcard__en{animation:sweep 1.6s cubic-bezier(.3,.1,.3,1) both}
.castcard__jp{font-family:var(--title-jp); font-weight:700; font-size:12px; letter-spacing:.3em; padding-left:.3em; color:var(--champagne-l)}
.castcard__name{font-family:var(--title-jp); font-weight:800; font-size:clamp(16px,1.4vw,20px); letter-spacing:.14em; color:var(--ivory)}
.castcard__name:empty{display:none}
.castcard__tag{
  margin-top:8px; font-family:var(--title-jp); font-weight:700; font-size:clamp(13px,1.1vw,15.5px); line-height:1.7; letter-spacing:.08em;
  color:var(--ivory); text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.castcard__topics{
  max-height:0; overflow:hidden; opacity:0;
  font-family:var(--title-jp); font-size:11px; line-height:1.75; letter-spacing:.04em; color:rgba(236,226,206,.78);
  transition:max-height .7s var(--ease), opacity .6s var(--ease), margin .7s var(--ease);
}
.castcard:hover .castcard__topics, .castcard:focus-visible .castcard__topics{max-height:6em; opacity:1; margin-top:4px}
.castcard__play{
  position:absolute; left:50%; bottom:clamp(16px,1.6vw,22px); z-index:2; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-family:var(--title-jp); font-weight:700; font-size:12px; letter-spacing:.14em; color:var(--champagne-l);
}
.castcard__play i{
  width:30px; height:30px; border-radius:50%; flex:none; position:relative;
  border:1px solid rgba(255,236,190,.75); box-shadow:0 0 16px rgba(255,214,140,.35);
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.castcard__play i::after{content:""; position:absolute; left:11px; top:9px; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent}
.castcard:hover .castcard__play i{background:var(--metal); color:#1b1204; box-shadow:0 0 26px rgba(255,214,140,.7)}
.castcard:hover .castcard__play i::after{border-left-color:#1b1204}
/* ポスターも立ち上がって登場 */
.js .castcard.rv{opacity:0; transform:perspective(1100px) rotateX(24deg) translateY(70px) scale(.94); transform-origin:50% 100%;
  transition:opacity 1s var(--ease), transform 1.4s cubic-bezier(.2,.9,.25,1.15), border-color .6s var(--ease), box-shadow .6s var(--ease)}
.js .castcard.rv.is-in{opacity:1; transform:none}

@media (max-width:1080px){ .castwall{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .castwall{grid-template-columns:1fr; max-width:360px; margin-inline:auto}
  .castcard__topics{max-height:6em; opacity:1; margin-top:4px}
}

/* ── 劇場：灯りが落ち、幕の帯が閉じて本編が始まる ── */
.theater{
  position:fixed; inset:0; z-index:10001; display:grid; place-items:center;
  background:rgba(2,3,8,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0);
  transition:background .9s var(--ease), backdrop-filter .9s var(--ease);
}
.theater.is-open{background:rgba(2,3,8,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.theater__bar{position:absolute; left:0; right:0; height:9vh; background:#000; z-index:1; transition:transform 1s var(--ease-io)}
.theater__bar--t{top:0; transform:translateY(-100%)}
.theater__bar--b{bottom:0; transform:translateY(100%)}
.theater.is-open .theater__bar{transform:none}
.theater__screen{
  position:relative; z-index:2; width:min(92vw, calc(78vh * 16 / 9)); aspect-ratio:16/9;
  opacity:0; transform:scale(.92); transition:opacity .8s var(--ease) .35s, transform 1.1s var(--ease) .35s;
  box-shadow:0 0 0 1px rgba(227,184,96,.35), 0 0 120px rgba(191,216,242,.12), 0 40px 120px rgba(0,0,0,.8);
}
.theater.is-open .theater__screen{opacity:1; transform:none}
.theater__screen video{width:100%; height:100%; display:block; background:#000}
.theater__ttl{
  position:absolute; left:0; right:0; top:calc(9vh - 34px); z-index:3; text-align:center;
  font-family:var(--title-jp); font-weight:700; font-size:13px; letter-spacing:.24em; color:var(--champagne-l);
  opacity:0; transition:opacity .8s var(--ease) .6s;
}
.theater.is-open .theater__ttl{opacity:1}
.theater__close{
  position:absolute; right:22px; top:calc(9vh + 14px); z-index:3; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(227,184,96,.6); color:var(--champagne-l); background:rgba(8,12,28,.6);
  font-family:var(--title-en); font-size:22px; line-height:1; transition:background .4s var(--ease), color .4s var(--ease);
}
.theater__close:hover{background:var(--metal); color:#1b1204}
@media (max-width:640px){ .theater__bar{height:6vh} .theater__ttl{top:calc(6vh + 16px); font-size:11.5px; padding:0 60px} .theater__close{top:calc(6vh + 10px)} }

/* ─────────────────────────────────────────────────────────────
   16. 本番の舞台 ── 場面のモザイクと、スクリーンで観る拡大表示
   ───────────────────────────────────────────────────────────── */
.scenes{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:clamp(130px,13vw,230px);
  gap:clamp(8px,1vw,14px); margin-top:clamp(34px,4vw,56px);
}
.sc{
  position:relative; grid-column:span 2; padding:0; overflow:hidden; border-radius:3px; cursor:zoom-in;
  background:#05070f; border:1px solid rgba(227,184,96,.2);
  box-shadow:0 24px 50px rgba(0,0,0,.45);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.sc--hero{grid-column:span 4; grid-row:span 2}
.sc--3{grid-column:span 3}
.sc--wide{grid-column:1 / -1; grid-row:span 2}
.sc img{width:100%; height:100%; object-fit:cover; filter:contrast(1.06) saturate(1.05) brightness(.92); transition:transform 3s var(--ease), filter .8s var(--ease)}
.sc--wide img{object-position:50% 45%}
.sc::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4,6,16,.55) 100%);
  transition:opacity .6s var(--ease);
}
.sc:hover, .sc:focus-visible{border-color:rgba(255,236,190,.75); box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 44px rgba(227,184,96,.2)}
.sc:hover img, .sc:focus-visible img{transform:scale(1.08); filter:contrast(1.08) saturate(1.1) brightness(1.02)}
.sc:hover::after{opacity:.4}
/* モザイクの一枚一枚が、順にスクリーンへ映し出される */
.js .scenes.rv{opacity:1; transform:none}
.js .scenes.rv .sc{opacity:0; transform:scale(.9); filter:brightness(2.2) blur(6px); transition:opacity .9s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease)}
.js .scenes.rv.is-in .sc{opacity:1; transform:none; filter:none}
.js .scenes.rv.is-in .sc:nth-child(2){transition-delay:.08s} .js .scenes.rv.is-in .sc:nth-child(3){transition-delay:.16s}
.js .scenes.rv.is-in .sc:nth-child(4){transition-delay:.24s} .js .scenes.rv.is-in .sc:nth-child(5){transition-delay:.32s}
.js .scenes.rv.is-in .sc:nth-child(6){transition-delay:.4s}  .js .scenes.rv.is-in .sc:nth-child(7){transition-delay:.48s}
.js .scenes.rv.is-in .sc:nth-child(8){transition-delay:.56s} .js .scenes.rv.is-in .sc:nth-child(9){transition-delay:.64s}
@media (max-width:760px){
  .scenes{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(120px,34vw,200px)}
  .sc, .sc--3{grid-column:span 1}
  .sc--hero, .sc--wide{grid-column:1 / -1; grid-row:span 2}
}

.lightbox{
  position:fixed; inset:0; z-index:10001; display:grid; grid-template-rows:1fr auto; place-items:center;
  padding:clamp(56px,7vh,80px) clamp(10px,5vw,90px) clamp(16px,3vh,30px);
  background:rgba(2,3,8,0); transition:background .7s var(--ease);
}
.lightbox.is-open{background:rgba(2,3,8,.95)}
.lightbox__img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; min-height:0;
  box-shadow:0 0 0 1px rgba(227,184,96,.3), 0 40px 120px rgba(0,0,0,.8);
  opacity:0; transform:scale(.94); transition:opacity .6s var(--ease), transform .9s var(--ease);
}
.lightbox.is-open .lightbox__img.is-shown{opacity:1; transform:none}
.lightbox__cap{margin-top:16px; text-align:center; font-family:var(--title-jp); font-weight:600; font-size:13px; letter-spacing:.16em; color:var(--champagne-l)}
.lightbox__cap small{display:block; margin-top:4px; font-family:var(--title-en); font-size:11px; letter-spacing:.3em; color:rgba(236,226,206,.55)}
.lightbox__nav, .lightbox__close{
  position:absolute; z-index:2; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(227,184,96,.55); background:rgba(8,12,28,.6); color:var(--champagne-l);
  font-family:var(--title-en); font-size:22px; transition:background .4s var(--ease), color .4s var(--ease);
}
.lightbox__nav:hover, .lightbox__close:hover{background:var(--metal); color:#1b1204}
.lightbox__nav--prev{left:clamp(8px,2vw,28px); top:50%; transform:translateY(-50%)}
.lightbox__nav--next{right:clamp(8px,2vw,28px); top:50%; transform:translateY(-50%)}
.lightbox__close{right:clamp(8px,2vw,28px); top:clamp(8px,2vh,20px)}
@media (max-width:640px){ .lightbox__nav{top:auto; bottom:14px; transform:none} }

@media (prefers-reduced-motion:reduce){
  .js .castcard.rv, .js .scenes.rv .sc{opacity:1; transform:none; filter:none}
  .theater__bar, .theater__screen, .lightbox__img{transition:none}
}
.sc[data-full$="stage-01.jpg"] img{object-position:72% 50%}
@media (max-width:760px){ .scenes .sc:nth-child(8){grid-column:1 / -1} }
/* バーガーの MENU は字幅の広い Cinzel でも線と重ならないように */
@media (max-width:1180px){ .burger::after{font-size:9.5px; letter-spacing:.1em; left:11px} .burger i{right:11px; width:16px} }
/* 二人のポスター：ダイジェスト映像も、静止画と同じ位置にふたり並べて流す */
.castcard--duo .castcard__media video{
  height:66%; object-position:50% 0;
  -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent);
          mask-image:linear-gradient(180deg, #000 70%, transparent);
}

/* ティッカー：流れる文字が見出しの下をくぐらないよう、見出しを前面に固定 */
.ticker{position:relative}
.ticker__label{position:relative; z-index:2}
.ticker__track{position:relative; z-index:1}

/* スマホ：見出しを上段の細い帯にし、流れる文字は下段で独立させる */
@media (max-width:760px){
  .ticker{flex-direction:column; align-items:stretch}
  .ticker__label{
    height:auto; padding:7px 16px; justify-content:center;
    font-size:10px; letter-spacing:.32em;
  }
  .ticker__track{padding:13px 0 13px 16px; gap:44px; animation-duration:40s}
  .ticker__track span{font-size:12.5px}
  .ticker__track span b{margin-right:10px}
}

/* チケット購入ボックス（くるみ割り人形 特設サイトと同じ構成） */
.tixbuy{margin:20px 0 18px; padding:18px 16px 20px; border:1px solid rgba(227,184,96,.45); background:rgba(6,9,20,.55); text-align:center}
.tixbuy--wide{max-width:760px; margin:clamp(28px,3vw,42px) auto 0}
.tixbuy__t{font-family:var(--title-jp); font-weight:700; letter-spacing:.2em; font-size:15px; color:var(--ivory); margin:0 0 14px}
.tixbuy__t small{display:block; margin-top:5px; font-size:11px; font-weight:400; letter-spacing:.08em; opacity:.75}
.tixbuy__btns{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.tixbtn{
  position:relative; overflow:hidden; display:grid; justify-items:center; gap:4px; padding:15px 10px;
  background:var(--metal); color:#1b1204; border-radius:3px;
  font-family:var(--title-jp); font-weight:700; font-size:15px; letter-spacing:.1em;
  box-shadow:0 6px 22px rgba(0,0,0,.35); transition:transform .3s var(--ease), filter .3s var(--ease);
}
.tixbtn em{font-style:normal; font-weight:500; font-size:11px; letter-spacing:.1em; opacity:.8}
.tixbtn::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; transform:skewX(-20deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transition:left .7s var(--ease)}
.tixbtn:hover{transform:translateY(-2px); filter:brightness(1.07)}
.tixbtn:hover::after{left:120%}
@media (max-width:560px){.tixbuy__btns{grid-template-columns:1fr}}

/* 公演記録 詳細（活動の歩み） */
.perf{border:1px solid rgba(227,184,96,.35); background:rgba(6,9,20,.45)}
.perf summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:18px; padding:20px 24px; flex-wrap:wrap}
.perf summary::-webkit-details-marker{display:none}
.perf summary b{font-family:var(--title-jp); font-weight:700; font-size:clamp(16px,1.6vw,19px); letter-spacing:.08em; color:var(--ivory)}
.perf summary i{margin-left:auto; font-style:normal; font-size:12px; letter-spacing:.2em; color:var(--champagne-l); border:1px solid rgba(227,184,96,.5); padding:6px 14px}
.perf[open] summary i{font-size:0}
.perf[open] summary i::after{content:"閉じる"; font-size:12px}
.perf__head, .perf__list li{display:grid; grid-template-columns:150px 1.3fr 1fr 1fr; gap:16px; padding:12px 24px}
.perf__head{font-size:11px; letter-spacing:.2em; color:var(--champagne-l); border-top:1px solid rgba(227,184,96,.25); border-bottom:1px solid rgba(227,184,96,.25)}
.perf__list{list-style:none; margin:0; padding:0 0 10px}
.perf__list li{font-size:13px; line-height:1.7; color:rgba(236,226,206,.82); border-bottom:1px solid rgba(255,255,255,.06)}
.perf__d{font-family:var(--title-jp); font-weight:600; color:var(--champagne-l)}
.perf__v small{display:inline-block; font-size:11px; color:rgba(236,226,206,.6); margin-left:4px}
.perf__p{color:var(--ivory)}
.perf__n{font-size:12px; color:rgba(236,226,206,.6)}
@media (max-width:760px){
  .perf summary{padding:16px}
  .perf__head{display:none}
  .perf__list li{grid-template-columns:1fr; gap:2px; padding:12px 16px}
}