/* ============================================================
   ALT FV「Media Block Spectrum」専用スタイル（index-fv-alt.html だけが読む）
   現行 FV（.cluster / .kvc）の CSS には触らない。右側の 3D は js/fv-alt.js（Three.js）が描く。
   ============================================================ */

/* ----- 右側の 3D 置き場：現行 .cluster と同じ位置・幅に置く（左のコピーの操作は遮らない） ----- */
/* 第2調整：キューブの世界を画面全体に広げるため、3D はヒーロー全幅（ガター込み）。左のコピー（z-index:3）より後ろに置く */
.mbs{
  position:absolute;left:-80px;right:-80px;top:-24px;bottom:-30px;
  z-index:1;pointer-events:none;
}
.mbs canvas{display:block;width:100%;height:100%}

/* ----- WebGL が使えない／描画前のフォールバック（静止ポスター） ----- */
/* ★ポスターは picture（PC / SP で中身が違う）。中の img に面を合わせる。
   画像は背景透過の「3D の中身だけ」。ページの文字は含めない（含めると DOM と二重に見える） */
.mbs__poster{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .4s;
}
.mbs__poster img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.mbs.is-fallback .mbs__poster{opacity:1}
.mbs.is-fallback canvas{display:none}

/* 描画が始まるまで canvas を隠し、初回フレームでふわっと出す */
.mbs canvas{opacity:0;transition:opacity .9s var(--ease-soft)}
.mbs.is-ready canvas{opacity:1}

/* ----- SP：メッセージ → 3D → NOW ON AIR の縦積み（現行と同じ順） ----- */
@media (max-width:860px){
  /* SP：3D の枠をリード文の下端まで引き上げ（負のマージン）、枠の上側に橋渡しの小キューブ、下側にメインのフィールドを置く。
     枠は左右 14px ずつはみ出すが、.hero の overflow:hidden と html/body の overflow-x:clip で横スクロールは出ない */
  .mbs{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;translate:none;
    /* ★2026-09-21 SP の FV を圧縮（ユーザー指示）：縦長で間延びしていたため、枠の縦横比を 1:1.62→1:1.02 に。
         引き上げ量も −64→−104px にしてリード文のすぐ下から始め、H1 群と一体に見せる */
    /* ★高さは aspect-ratio ではなく直接指定する（2026-09-21）。
         幅から縦横比で高さを決めると、FV の高さを変えたときにページ全体の再レイアウトが走り、
         初期化中の JS が 1.3 秒ほど待たされることを実測で確認した */
    /* ★2026-09-21 第2版：横は画面幅いっぱい＋はみ出し（見切れてよい）、縦はさらに圧縮。
         枠を広げてカメラを近づけることで「画面の中に置かれた絵」ではなく「FV 空間の一部」に見せる */
    /* ★2026-09-22 下部をトリミング：描画（カメラ・配置）はそのままに、表示だけ下 60px を切る。
         縦を「圧縮」すると塊全体が小さくなるが、トリミングなら塊の大きさは変わらない */
    width:calc(100% + 96px);margin:-112px -48px -70px;order:2;height:min(438px,114vw);   /* ★2026-09-21 20周年の下のキューブが切れないよう +28px（縦長には戻さない） */
    /* ★2026-09-22 下端のフェードは外した（ユーザー指示）。上端だけわずかに抜いて、リード文との境目を柔らかくする */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 100%);
  }
  .hero__copy{position:relative;z-index:3}   /* コピーは常に 3D の前（念のため明示） */
}
/* タブレット幅：枠を少し低くし、引き上げ量も控えめに（フィールドはカメラを引いて px サイズを抑える） */
@media (min-width:600px) and (max-width:860px){
  .mbs{aspect-ratio:1/1.22;margin-top:-40px}
}