@charset "UTF-8";

/* ==========================================================
   Base
   ========================================================== */
:root {
  --c-black: #000;
  --c-white: #fff;
  --c-blue: #0062b1;
  --c-pink: #e85298;
  --ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --ff-en: "Oswald", var(--ff-base);

  /* 背景素材（PC：1920×1080 書き出し）。画面に収まる比率で縮小し、各パーツを四隅に固定 */
  --bg-cw: 1920;
  --bg-ch: 1080;
  --bg-scale: min(calc(100vw / 1920), calc(100vh / 1080));
  --bg-paper: url("../images/bg/bg03_paper.webp");
  /* shadow：PSD の shadow グループから書き出した素材 */
  --shadow-mul: url("../images/bg/shadow_mul_corner_pc.jpg");       /* べた塗り（乗算）のうちノート周りの影 2 枚：四隅用 */
  --shadow-mul-center: url("../images/bg/shadow_mul_center_pc.jpg"); /* べた塗り（乗算）のうち光の帯・周辺の青み 2 枚をぼかしたもの：全面用 */
  --shadow-blur: url("../images/bg/shadow_blur_pc.png");     /* レイヤー6（通常 62%・マスク込み） */
  --shadow-exposure: url("../images/bg/shadow_exposure_pc.png"); /* 露光量のマスク */
  --bg-brightness: 1.04;   /* 明るさ・コントラスト：明るさ +12 */
  --bg-exposure: 1.3;      /* 露光量 +0.59 */
  /* shadow を四隅で切り出す楕円の半径（素材 px 基準）。ノート＋ぼかしが収まる大きさ */
  --shadow-r-tl: calc(1100 * var(--bg-scale)) calc(520 * var(--bg-scale));
  --shadow-r-tr: calc(800 * var(--bg-scale)) calc(750 * var(--bg-scale));
  --shadow-r-bl: calc(500 * var(--bg-scale)) calc(750 * var(--bg-scale));
  --shadow-r-br: calc(900 * var(--bg-scale)) calc(560 * var(--bg-scale)); /* レイヤー8（右下のぼかし）が収まる大きさ */

  /* BOUKYAKU BATTERY：文字サイズ（画像幅）。デザイン 377px / 1728×972 基準、画面幅に合わせて縮小（100〜440px） */
  --deco-w: clamp(100px, min(21.82vw, 38.79vh), 440px);
  /* 1枚あたりの縦送り量（画像の縦長＋余白）とループ速度 */
  --deco-item-h: calc(var(--deco-w) * 2000 / 377);
  --deco-duration: 60s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--c-black);
  font-family: var(--ff-base);
  font-weight: 500;
  line-height: 1.2;
  background: #c9d3da;
  overflow-x: clip;
}

h1, h2, p, dl, dt, dd, ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================
   ローディング
   ========================================================== */
.is-loading {
  overflow: hidden;
}

.loading {
  --progress: 0%;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f3f1ea var(--bg-paper) center / cover no-repeat;
  filter: brightness(var(--bg-brightness));
  transition: opacity 0.8s ease, visibility 0.8s;
}

/* ページ背景と同じ「光の帯・周辺の青み」（shadow の中央用素材）を紙に乗算。
   左上・右下の角の青みはマスクで消し、光の帯と右上・左下の青みだけ残す */
.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shadow-mul-center) 0 0 / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(135deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(135deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  pointer-events: none;
}

/* 斜めの光がゆっくり揺らぐ（スクリーン） */
.loading::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 252, 238, 0.55) 50%, transparent 65%);
  mix-blend-mode: screen;
  animation: loading-light 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes loading-light {
  from { transform: translateX(-6%); opacity: 0.6; }
  to   { transform: translateX(6%);  opacity: 1; }
}

.loading__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.39vw, 36px);
  width: clamp(220px, 23.15vw, 600px);
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s ease;
}

.loading__logo {
  width: 100%;
  animation: loading-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ピンクのブラシ線：進捗に合わせて左から引かれる */
.loading__bar {
  display: block;
  width: 100%;
  clip-path: inset(0 calc(100% - var(--progress)) 0 0);
}

.loading__bar img {
  width: 100%;
  height: auto;
}

.loading__num {
  color: var(--c-pink);
  font-family: var(--ff-en);
  font-size: clamp(12px, 0.81vw, 21px);
  font-weight: 700;
  letter-spacing: 0.1em;
  animation: loading-in 0.8s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes loading-in {
  from { opacity: 0; transform: translateY(0.6em); }
  to   { opacity: 1; transform: none; }
}

/* 閉じるとき：ロゴが少し上に抜けながら全体がフェードアウト */
.is-loaded .loading {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.is-loaded .loading__inner {
  opacity: 0;
  transform: translateY(-2vw);
}

/* 開いたあと：FV のロゴ・日付をふわっと表示 */
.is-loading .fv__title,
.is-loading .fv__date {
  opacity: 0;
}

.is-loaded .fv__title,
.is-loaded .fv__date {
  animation: loading-in 1s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.is-loaded .fv__date {
  animation-delay: 0.5s;
}

@media (max-width: 767px), (max-aspect-ratio: 1 / 1) {
  .loading__inner {
    width: 60vw;
    gap: 3.2vw;
  }

  .loading__num {
    font-size: 3.2vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading::before,
  .loading,
  .loading__inner,
  .loading__logo,
  .loading__num,
  .is-loaded .fv__title,
  .is-loaded .fv__date {
    animation: none;
    transition-duration: 0.01s;
  }
}

/* ==========================================================
   Layer 1：背景（最背面・固定）
   ノート紙 → 四隅のノート → shadow（PSD の shadow グループ）の順に重ねる
   ========================================================== */
.l-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #f3f1ea var(--bg-paper) center / cover no-repeat;
  /* 明るさ・コントラスト調整レイヤー（背景全体にかかる） */
  filter: brightness(var(--bg-brightness));
  pointer-events: none;
}

/* 四隅のノート：素材はキャンバス全面の透過PNG。同じ縮尺で各隅に固定して追従させる */
.l-bg__note {
  position: absolute;
  width: calc(var(--bg-cw) * var(--bg-scale));
  max-width: none;
  height: auto;
}

.l-bg__note--tl { top: 0;    left: 0;  }
.l-bg__note--tr { top: 0;    right: 0; }
.l-bg__note--bl { bottom: 0; left: 0;  }
.l-bg__note--br { bottom: 0; right: 0; }

/* shadow：各レイヤーを「中央（全面に引き伸ばし）」＋「四隅（ノートと同じ縮尺・位置）」に分割。
   四隅は角から楕円で切り出し、中央は同じ楕円をくり抜いて境目をなじませる */
.l-bg__shadow,
.l-bg__exposure {
  position: absolute;
  inset: 0;
}

.l-bg__shadow--mul  { --shadow-img: var(--shadow-mul); }
.l-bg__shadow--blur { --shadow-img: var(--shadow-blur); }

.l-bg__shadow-part {
  position: absolute;
  background: var(--shadow-img) 0 0 / 100% 100% no-repeat;
}

/* 乗算はパーツごとに指定（ラッパーで isolation すると下の紙・ノートと混ざらないため） */
.l-bg__shadow--mul .l-bg__shadow-part {
  mix-blend-mode: multiply;
}

/* 乗算は役割で素材を分ける：中央＝光の帯・周辺の青み（全面にそのまま）、四隅＝ノート周りの影のみ。
   乗算同士は重ね順に関係なく結果が同じなので、中央をくり抜かなくても継ぎ目が出ない */
.l-bg__shadow--mul .l-bg__shadow-part--c {
  background-image: var(--shadow-mul-center);
  -webkit-mask-image: none;
  mask-image: none;
}

.l-bg__shadow--blur .l-bg__shadow-part--c {
  display: none;
}

.l-bg__shadow-part--c {
  inset: 0;
  -webkit-mask-image:
    radial-gradient(var(--shadow-r-tl) at 0 0, transparent 70%, #000),
    radial-gradient(var(--shadow-r-tr) at 100% 0, transparent 70%, #000),
    radial-gradient(var(--shadow-r-bl) at 0 100%, transparent 70%, #000),
    radial-gradient(var(--shadow-r-br) at 100% 100%, transparent 70%, #000);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(var(--shadow-r-tl) at 0 0, transparent 70%, #000),
    radial-gradient(var(--shadow-r-tr) at 100% 0, transparent 70%, #000),
    radial-gradient(var(--shadow-r-bl) at 0 100%, transparent 70%, #000),
    radial-gradient(var(--shadow-r-br) at 100% 100%, transparent 70%, #000);
  mask-composite: intersect;
}

.l-bg__shadow-part--tl,
.l-bg__shadow-part--tr,
.l-bg__shadow-part--bl,
.l-bg__shadow-part--br {
  width: calc(var(--bg-cw) * var(--bg-scale));
  height: calc(var(--bg-ch) * var(--bg-scale));
}

.l-bg__shadow-part--tl {
  top: 0;
  left: 0;
  -webkit-mask-image: radial-gradient(var(--shadow-r-tl) at 0 0, #000 70%, transparent);
  mask-image: radial-gradient(var(--shadow-r-tl) at 0 0, #000 70%, transparent);
}

.l-bg__shadow-part--tr {
  top: 0;
  right: 0;
  -webkit-mask-image: radial-gradient(var(--shadow-r-tr) at 100% 0, #000 70%, transparent);
  mask-image: radial-gradient(var(--shadow-r-tr) at 100% 0, #000 70%, transparent);
}

.l-bg__shadow-part--bl {
  bottom: 0;
  left: 0;
  -webkit-mask-image: radial-gradient(var(--shadow-r-bl) at 0 100%, #000 70%, transparent);
  mask-image: radial-gradient(var(--shadow-r-bl) at 0 100%, #000 70%, transparent);
}

.l-bg__shadow-part--br {
  bottom: 0;
  right: 0;
  -webkit-mask-image: radial-gradient(var(--shadow-r-br) at 100% 100%, #000 70%, transparent);
  mask-image: radial-gradient(var(--shadow-r-br) at 100% 100%, #000 70%, transparent);
}

/* 露光量：マスク範囲だけ下の背景を明るくする（左上・右下） */
.l-bg__exposure-part {
  position: absolute;
  width: calc(var(--bg-cw) * var(--bg-scale));
  height: calc(var(--bg-ch) * var(--bg-scale));
  -webkit-backdrop-filter: brightness(var(--bg-exposure));
  backdrop-filter: brightness(var(--bg-exposure));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.l-bg__exposure-part--tl {
  top: 0;
  left: 0;
  -webkit-mask-image: var(--shadow-exposure), radial-gradient(var(--shadow-r-tl) at 0 0, #000 70%, transparent);
  mask-image: var(--shadow-exposure), radial-gradient(var(--shadow-r-tl) at 0 0, #000 70%, transparent);
}

.l-bg__exposure-part--br {
  bottom: 0;
  right: 0;
  -webkit-mask-image: var(--shadow-exposure), radial-gradient(var(--shadow-r-br) at 100% 100%, #000 70%, transparent);
  mask-image: var(--shadow-exposure), radial-gradient(var(--shadow-r-br) at 100% 100%, #000 70%, transparent);
}

/* ==========================================================
   Layer 2：左右の BOUKYAKU BATTERY（固定・縦にゆっくりループ）
   ========================================================== */
.l-deco {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: var(--deco-w);
  opacity: 0.7;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.l-deco--l {
  left: calc(var(--deco-w) * -120 / 377);
  /* 左は上下反転（下から上に読む） */
  transform: rotate(180deg);
}

.l-deco--r {
  right: calc(var(--deco-w) * -120 / 377);
}

.l-deco__track {
  animation: deco-loop var(--deco-duration) linear infinite;
  will-change: transform;
}

.l-deco__item {
  position: relative;
  height: var(--deco-item-h);
}

/* 画像自体が傾いているので回転で縦に起こす */
.l-deco__item img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  max-width: none;
  transform: translateY(-50%) rotate(7.15deg);
}

@keyframes deco-loop {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(-1 * var(--deco-item-h)), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .l-deco__track { animation: none; }
}

/* 非表示にする条件は SP 切り替えと共通（下部「SP」参照） */

/* ==========================================================
   Layer 3：テキストゾーン（装飾文字はフッターも含めて最前面）
   ========================================================== */
.l-contents {
  position: relative;
}

.l-contents main {
  position: relative;
  z-index: 2;
}

.footer {
  position: relative;
  z-index: 2;
}

/* ==========================================================
   サイズ指定：px ではなく vw 制御
   PC：デザイン幅 1728px 基準（px ÷ 17.28 = vw）
   SP：375px 基準（px ÷ 3.75 = vw）
   文字・小さい画像は clamp() で下限／上限を設定
   ========================================================== */

/* ---------- FV ---------- */
.fv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(4.05vw, 7.2vh);
  min-height: 100vh;
  min-height: 100svh;
  padding: 2.31vw 1.16vw 0;
}

.fv__title {
  width: min(53.24vw, 94.6vh);
}

.fv__title img {
  width: 100%;
}

.fv__date {
  width: min(63.14vw, 112vh);
}

.fv__date-pc {
  width: 100%;
}

.fv__date-sp {
  display: none;
}

/* ---------- STAFF ---------- */
.staff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.45vw;
  padding: 0 1.16vw;
  text-align: center;
  font-weight: 700;
}

.staff__paren {
  font-size: clamp(14px, 1.16vw, 30px);
}

.staff__item dt {
  color: var(--c-blue);
  font-size: clamp(13px, 1.04vw, 27px);
}

.staff__item dd {
  font-size: clamp(19px, 1.62vw, 42px);
}

.staff__bracket {
  letter-spacing: -0.36em;
}

.staff__item small {
  font-size: clamp(12px, 0.93vw, 24px);
}

/* ---------- CAST ---------- */
.cast {
  display: flex;
  justify-content: center;
  padding: 6.37vw 1.16vw;
}

/* ドットパターン（Figma：4px 角・#ebebeb・24px 間隔）を敷いた枠 */
.cast__inner {
  --dot: 0.23vw;
  --dot-gap: 1.39vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.45vw;
  padding: 1.16vw 2.03vw;
  background: conic-gradient(at var(--dot) var(--dot), transparent 75%, #ebebeb 0) 0 0 / var(--dot-gap) var(--dot-gap);
}

.cast__heading {
  line-height: 0;
}

.cast__heading-img {
  width: clamp(140px, 13.43vw, 348px);
  height: auto;
}

.cast__list {
  display: flex;
  flex-direction: column;
  gap: 1.04vw;
}

/* 1行ずつ、キャラ名＋キャスト名のかたまりを左右中央に置き、2つの文字は縦方向の中央でそろえる */
.cast__item {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.cast__role {
  margin-right: 1.45vw;
  color: var(--c-pink);
  font-size: clamp(16px, 1.27vw, 33px);
  font-weight: 600;
}

.cast__role-suffix {
  margin-left: 0.5em;
  font-size: clamp(13px, 1.04vw, 27px);
}

.cast__name {
  font-size: clamp(21px, 1.85vw, 48px);
  font-weight: 700;
}

/* 「他」はキャラ名と同じサイズ・太さ */
.cast__other {
  margin-top: 0.46vw;
  font-size: clamp(16px, 1.27vw, 33px);
  font-weight: 600;
}

/* ---------- 主催 ---------- */
.organizer {
  padding: 0 1.16vw 6.94vw;
  font-size: clamp(14px, 1.16vw, 30px);
  line-height: 1.4;
  text-align: center;
}

/* ---------- FOOTER ---------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5.21vw 1.16vw;
  background: var(--c-pink);
}

.footer__sns {
  display: flex;
  flex-direction: column;
  gap: 1.04vw;
  width: clamp(240px, 19.73vw, 512px);
}

/* SNS ボタン：ベース／テキスト／アイコンのパーツ合成（Figma レイヤー構成どおり） */
.sns-btn {
  --sns-ease-wipe: cubic-bezier(0.65, 0, 0.35, 1);
  --sns-ease-potten: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: block;
  aspect-ratio: 340.958 / 63.398;
  /* アイコンの移動量を cqw（ボタン幅基準）で指定するため */
  container-type: inline-size;
}

.sns-btn--x {
  aspect-ratio: 340.958 / 62.6249;
}

.sns-btn img,
.sns-btn__icon {
  position: absolute;
  max-width: none;
}

.sns-btn__base {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* テキスト：ホバーで右から左に消える */
.sns-btn__text {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.45s var(--sns-ease-wipe);
}

/* アイコン：ホバーで右からセンターへ、ぽてんと着地 */
.sns-btn__icon {
  translate: 0 0;
  transition: translate 0.6s var(--sns-ease-potten);
}

.sns-btn__icon img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.sns-btn:hover .sns-btn__text,
.sns-btn:focus-visible .sns-btn__text {
  clip-path: inset(0 100% 0 0);
}

.sns-btn:hover .sns-btn__icon,
.sns-btn:focus-visible .sns-btn__icon {
  /* アイコン中心（ボタン幅の約90%）→ 50% */
  translate: -40cqw 0;
}

@media (prefers-reduced-motion: reduce) {
  .sns-btn__text,
  .sns-btn__icon {
    transition-duration: 0.01s;
  }
}

/* X */
.sns-btn--x .sns-btn__text  { top: 32.91%; left: 34.41%; width: 31.08%; height: 34.37%; }
.sns-btn--x .sns-btn__icon  { top: 13.34%; left: 83.17%; width: 13.55%; height: 73.33%; }
.sns-btn--x .sns-btn--x__logo { inset: auto; top: 22.17%; left: 26.2%; width: 47.53%; height: 55.83%; }

/* Instagram */
.sns-btn--instagram .sns-btn__text { top: 32.12%; left: 12.34%; width: 65.88%; height: 34.43%; }
.sns-btn--instagram .sns-btn__icon { top: 11.93%; left: 83.28%; width: 13.49%; height: 74.6%; }

/* YouTube */
.sns-btn--youtube .sns-btn__text { top: 32.14%; left: 17.15%; width: 57.96%; height: 34.38%; }
.sns-btn--youtube .sns-btn__icon { top: 11.93%; left: 83.28%; width: 13.49%; height: 74.6%; }

.footer__bnr {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 0.87vw;
  padding: 2.89vw 0;
}

.footer__bnr a {
  display: block;
  box-shadow: 0 0 clamp(2px, 0.23vw, 6px) rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s;
}

.footer__bnr a:hover {
  opacity: 0.8;
}

.footer__bnr img {
  width: clamp(200px, 15.1vw, 392px);
}

/* 舞台2025バナーは他のバナーの上の段に、間隔をあけて置く */
.footer__bnr-stage {
  order: -1;
  display: flex;
  justify-content: center;
  flex-basis: 100%;
  margin-bottom: 1.45vw;
}

.footer__copy {
  color: var(--c-white);
  font-size: clamp(10px, 0.58vw, 15px);
  text-align: center;
}

.footer__copy small {
  font-size: inherit;
}

/* ==========================================================
   SP：幅 767px 以下 または 正方形以下（幅 ≦ 高さ）で切り替え
   左右の BOUKYAKU BATTERY も同じタイミングで非表示
   ========================================================== */
@media (max-width: 767px), (max-aspect-ratio: 1 / 1) {
  .l-deco {
    display: none;
  }

  /* 背景素材（SP：750×1334 書き出し） */
  :root {
    --bg-cw: 750;
    --bg-ch: 1334;
    --bg-scale: min(calc(100vw / 750), calc(100vh / 1334));
    --bg-paper: url("../images/bg/bg03_paper_sp.webp");
    /* SP の shadow グループは べた塗り（乗算）×4 ＋ 露光量 +0.09（ほぼ影響なしのため省略） */
    --shadow-mul: url("../images/bg/shadow_mul_corner_sp.jpg");
    --shadow-mul-center: url("../images/bg/shadow_mul_center_sp.jpg");
    --bg-brightness: 1;
    --shadow-r-tl: calc(550 * var(--bg-scale)) calc(420 * var(--bg-scale));
    --shadow-r-tr: calc(450 * var(--bg-scale)) calc(620 * var(--bg-scale));
    --shadow-r-bl: calc(650 * var(--bg-scale)) calc(600 * var(--bg-scale));
    --shadow-r-br: calc(300 * var(--bg-scale)) calc(380 * var(--bg-scale));
  }

  .l-bg__shadow--blur,
  .l-bg__exposure {
    display: none;
  }

  /* SP の四隅用の影は右上・左下のノートにしかない。
     左上・右下のパーツを残すと、右上ノートの影の端が左上ノートの横に離れて出るため非表示 */
  .l-bg__shadow--mul .l-bg__shadow-part--tl,
  .l-bg__shadow--mul .l-bg__shadow-part--br {
    display: none;
  }

  .fv {
    gap: 6.4vw;
    padding: 10.67vw 5.33vw 0;
  }

  .fv__title { width: 90vw; }

  .fv__date {
    width: 67.5vw;
  }

  .fv__date-pc {
    display: none;
  }

  /* SP版キャッチ：文字＋ブラシ線の2パーツ合成（Figma レイヤー構成どおり） */
  .fv__date-sp {
    position: relative;
    display: block;
    aspect-ratio: 507 / 271;
  }

  .fv__date-sp img {
    position: absolute;
    max-width: none;
  }

  .fv__date-sp-line { top: 86.18%; left: 0;     width: 100.03%; height: 17.07%; }
  .fv__date-sp-text { top: 0;      left: 4.49%; width: 90.58%;  height: 99.71%; }

  .staff { gap: 5.33vw; padding: 0 5.33vw; }
  .staff__item dt { font-size: 3.47vw; }
  .staff__item dd { font-size: 5.33vw; }
  .staff__item small { display: block; font-size: 3.2vw; }
  .staff__paren { font-size: inherit; }

  .cast {
    padding: 18.67vw 5.33vw;
  }

  /* Figma SP（750px 幅）：4px 角・24px 間隔 */
  .cast__inner {
    --dot: 0.53vw;
    --dot-gap: 3.2vw;
    gap: 5.33vw;
    padding: 2.67vw 0;
  }

  .cast__heading-img { width: 36vw; }

  .cast__list { gap: 3.73vw; }
  .cast__role { margin-right: 4.27vw; font-size: 4.27vw; }
  .cast__role-suffix { font-size: 2.93vw; } /* Figma SP（750px 幅）：キャラ名 32px／役 22px */
  .cast__name { font-size: 4.8vw; }
  .cast__other { margin-top: 2.13vw; font-size: 4.27vw; }

  .organizer {
    padding: 0 5.33vw 21.33vw;
    font-size: 3.73vw;
    line-height: 1.6;
  }

  .footer {
    padding: 16vw 5.33vw;
  }

  .footer__sns {
    width: 80vw;
    gap: 3.73vw;
  }

  .footer__bnr {
    flex-direction: column;
    gap: 3.2vw;
    padding: 0;
    margin: 10.67vw 0;
  }

  .footer__bnr img {
    width: 69.6vw;
  }

  .footer__bnr-stage {
    flex-basis: auto;
    margin-bottom: 4.8vw;
  }

  .footer__copy {
    font-size: clamp(9px, 2.67vw, 14px);
  }
}