/* 2026-11-02(月) 21:00 解禁: 前編本サイトの追加スタイル（header.php が解禁後だけ読み込む。styles.css／teaser.css は 6th・ティザーのまま） */

/* FV: 紺地に前編ロゴを大きく、その下に公演日程と劇場（FAB 様ご依頼書のレイアウト指定） */
.s-fv--final {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 90px 5% 110px;
  text-align: center;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(ellipse at 50% 0%, #0d2272 0%, var(--c-black) 70%);
}
.s-fv--final:before { display: none; }
.s-fv__front { max-width: min(900px, 80vw); margin: 0 auto; }
.s-fv__front img { display: block; width: 100%; height: auto; }
.s-fv__dates { display: flex; justify-content: center; gap: 6%; max-width: 1040px; margin: 60px auto 0; color: #fff; }
.s-fv__date-item { flex: 1 1 0; min-width: 0; margin: 0; }
.s-fv__date-item img { display: block; width: 100%; height: auto; }
@media (max-width: 959px) {
  .s-fv--final { padding: 14vw 5vw 16vw; }
  .s-fv__front { max-width: 100%; }
  .s-fv__dates { display: block; margin-top: 10vw; }
  .s-fv__date-item + .s-fv__date-item { margin-top: 7vw; }
}

/* NEWS と SNS の 2 カラム（6th は NEWS／X／TikTok の 3 カラム） */
.s-topics--final .s-topics__blocks { grid-template-columns: 1fr 1fr; }
@media (max-width: 959px) { .s-topics--final .s-topics__blocks { display: block; } }
.s-topics--final .s-sns { max-width: none; margin: 0; text-align: left; }
.s-topics--final .s-sns__btn { margin: 20px 0 0; color: var(--c-black); border-color: var(--c-black); }
.s-topics--final .s-sns__btn:first-child { margin-top: 0; }
.s-topics--final .s-sns__btn:hover { background: var(--c-black); color: #fff; }

/* STORY: 前編のみ 1 カラム */
.s-trilogy--single { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.s-trilogy--single > div { border: 0; background: none; padding: 0; }
.s-trilogy--single p.s-trilogy__text { font-size: 1.7rem; line-height: 2.1; }

/* CAST: ソロビジュアル（4:3）を六角形の枠に収める。6th は専用の正方形サムネだったため、人物の位置に合わせて object-position を個別指定している */
.s-cast--final figure a img { object-fit: cover; }

/* ノヴァ前キャスト（横井翔二郎さん）のコメント入口。キャラカラー（黒と白）ベース */
.s-nova-prev { margin: 60px 0 0; text-align: center; }
.s-nova-prev__btn { display: block; max-width: 560px; margin: 0 auto; padding: 22px 28px 20px; background: #031417; color: #fff; border: 2px solid #fff; box-shadow: 7px 7px 0 #fff; text-align: center; transition: transform .25s ease, box-shadow .25s ease; }
.s-nova-prev__btn span { display: block; font-size: 1.8rem; font-weight: 900; letter-spacing: .06em; line-height: 1.5; }
.s-nova-prev__btn small { display: block; margin-top: .5em; font-size: 1.3rem; font-weight: 500; letter-spacing: .04em; line-height: 1.6; opacity: .9; }
@media (hover: hover) { .s-nova-prev__btn:hover { transform: translate(4px, 4px); box-shadow: 3px 3px 0 #fff; } }
@media (max-width: 959px) { .s-nova-prev { margin-top: 12vw; } .s-nova-prev__btn { margin: 0 2vw; max-width: none; } .s-nova-prev__btn span { font-size: 4.2vw; } .s-nova-prev__btn small { font-size: 3.2vw; } }

/* 中編・後編ティザー（8th／9th）: ロゴ＋日程、あらすじ 2 カラム、PV、SNS */
.s-fv--teaser2 .s-fv__dates { max-width: 900px; }
.s-fv__ttl { margin: 0 0 14px; font-family: futura-pt-bold, sans-serif; font-style: italic; font-size: 4rem; font-weight: 700; letter-spacing: .06em; line-height: 1.2; }
.s-fv__term2 { margin: 0; font-size: 3.2rem; font-weight: 900; letter-spacing: .08em; line-height: 1.3; }
.s-trilogy--duo { grid-template-columns: 1fr 1fr; max-width: 1000px; margin: 0 auto; }
@media (max-width: 959px) { .s-fv__term2 { font-size: 7vw; } .s-fv__ttl { font-size: 8vw; } .s-trilogy--duo { display: block; } }
.s-movie { max-width: 760px; margin: 0 auto; }
.s-movie .s-fv__movie { display: block; }

/* スマホ: 長い役名（ヴィクター・ヴァレンタイン等）のラベルが折り返さないよう、字と余白を詰める */
@media (max-width: 959px) {
  .s-cast--final li > dl dt { padding-left: .9em; padding-right: .9em; font-size: 1.05rem; letter-spacing: -.02em; white-space: nowrap; }
}

/* 横井さんのメッセージ: 役名の次の行に名前（ご要望） */
.c-comment__cont dl.-stack { display: block; }
.c-comment__cont dl.-stack dt { margin: 0 0 .3em; }

/* CAST: 顔の大きさを揃える（FAB 様ご要望。マリオン〜ガスト相当＝顔幅 約58px に統一。ガストは見切れないよう引いて内側へ）。
   --z: 拡大率、--o: 拡大の起点（顔の中心）、--tx/--ty: 顔の位置の補正。数値は STG の六角形（251px 幅）での顔検出の実測から算出 */
.s-cast--final li figure a img { top: 0; transform-origin: var(--o, 50% 50%); transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--z, 1.12)); }
.cm-marion { --z: 1.020; --o: 52.9% 28.0%; --tx: 0.9px; --ty: -7.1px; }
.cm-victor { --z: 1.000; --o: 50.5% 26.9%; --tx: 0.2px; --ty: -7.5px; }
.cm-ren { --z: 1.050; --o: 51.6% 26.5%; --tx: 0.5px; --ty: -7.6px; }
.cm-gast { --z: 1.08; --o: 74.4% 25.7%; --tx: 0px; --ty: 0px; } /* ガストは顔が元写真の右端に寄っている。正方形の写真ではなく横長（3rd の拡大用 1600x1200 を縮小した mem-gast-w）を右寄せで使い、顔を枠の内側へ。拡大なしで顔幅は他と同じ約 57px */
.cm-gast figure a img { object-position: 100% 50%; }
.cm-keith { --z: 1.274; --o: 49.3% 30.0%; --tx: -0.2px; --ty: -6.5px; }
.cm-dino { --z: 1.274; --o: 43.8% 28.3%; --tx: -1.8px; --ty: -7.0px; }
.cm-faith { --z: 1.299; --o: 48.0% 28.5%; --tx: -0.6px; --ty: -7.0px; }
.cm-nova { --z: 1.180; --o: 49.2% 24.6%; --tx: 1.9px; --ty: 5.9px; } /* FIX SV（10/30）で顔を再検出して調整 */
.cm-sirius { --z: 1.140; --o: 66.4% 26.7%; --tx: 4.8px; --ty: 7.4px; }
.cm-shin { --z: 1.160; --o: 34.1% 31.2%; --tx: -4.7px; --ty: 8.9px; }
.cm-shams { --z: 1.326; --o: 49.6% 27.3%; --tx: -0.1px; --ty: -7.3px; }
.cm-jay { --z: 1.350; --o: 50.4% 27.3%; --tx: 0.1px; --ty: -7.3px; }
@media (min-width: 960px) { .s-cast--final figure a:hover img { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(calc(var(--z, 1.12) + .18)); } }

/* 2026-10-26 FAB 様ご要望: 顔の大きさの印象を揃える（マリオン・ヴィクター・レン・ノヴァは髪を含む頭が大きく見える→少し引く／ガスト・ジェイは引き気味→少し寄る） */

/* キャラカラーが見分けにくい（ノヴァの黒など）ため、六角形の外縁に薄い白の縁取り */
.s-cast--final li figure::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='50,0 100,25 100,75 50,100 0,75 0,25' fill='none' stroke='white' stroke-opacity='.75' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* 2026-10-28 FAB 様ご要望（原作監修） */
/* メニューバー（右端の MENU）にカーソルを置いた時の色: 上から #F78F35（オレンジ）→ #9D0039（ローズレッド） */
@media (min-width: 960px) { .l-drawer__btn:before { background: linear-gradient(to bottom, #F78F35, #9D0039); } }

/* 中編・後編のタイトル: ローマ数字（Ⅱ・Ⅲ）が斜体の合成で傾くため、数字部分だけ正立にする */
.rn { font-style: normal; font-family: futura-pt-bold, "Noto Sans JP", sans-serif; letter-spacing: .08em; margin-left: .05em; }

/* 中編・後編: ロゴ（-THE FINAL Ⅱ-／Ⅲ-）を各日程の上に */
.s-fv__logo2 { margin: 0 0 18px; }
.s-fv__logo2 img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.s-fv--teaser2 .s-fv__dates { margin-top: 0; }

@media (min-width: 960px) { .s-fv__logo2 img { max-width: 560px; } }

/* 8th/9th スマホ: スポットライト（上端中心の放射グラデ）が中編ロゴだけに当たって見えるため、2 つのロゴの中間へ */
@media (max-width: 959px) {
  .s-fv--teaser2 {
    background:
      linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
      radial-gradient(ellipse 120% 55% at 50% 50%, #0d2272 0%, var(--c-black) 75%);
  }
}

/* SCHEDULE: 日替わりパフォーマンス楽曲 組み合わせ（FAB 様 2026-10-30 追加） */
.s-schedule__table tbody em .s-schedule__song { font-family: "Noto Sans JP", sans-serif; font-size: .8em; font-weight: 700; letter-spacing: 0; display: inline; white-space: nowrap; margin: 0; padding: 0; max-width: none; background: none; color: inherit; }
.s-schedule__table tbody em { letter-spacing: 0; }
.s-schedule__song { max-width: 680px; margin: 36px auto 0; padding: 22px 24px 18px; background: #fff; color: var(--c-black); font-weight: 700; }
.s-schedule__song h4 { margin: 0 0 12px; font-size: 1.7rem; letter-spacing: .06em; text-align: center; }
.s-schedule__song ul { margin: 0; padding: 0; list-style: none; font-size: 1.5rem; line-height: 1.8; }
.s-schedule__song li { display: flex; text-align: left; }
.s-schedule__song li b { flex: none; width: 3.4em; color: var(--c-red); font-weight: 900; }
.s-schedule__song p { margin: 10px 0 0; font-size: 1.3rem; line-height: 1.6; }
.s-schedule__song-link { text-align: center; }
.s-schedule__song-link a { display: inline-block; padding: .55em 1.6em; color: #fff; background: var(--c-navy); border-radius: 2em; box-shadow: 1px 3px 0 0 var(--c-red); text-decoration: none; }