@charset "utf-8";
/* =============================================================================
   v5 の見た目の手直し — **v5 の原本には触らずに直す**ためのファイル
   -----------------------------------------------------------------------------
   `assets/css/style.css` などの v5 の CSS は1バイトも変えない約束になっている
   （tests/v5-regression.test.mjs が sha256 で見張っている）。
   公開後に見つかった「v5 の中だけでは直せない不具合」だけを、ここへ足す。

   置いてよいもの
     - 実機で確認された不具合の手直し（何がどう重なっていたかを必ず書く）
   置いてはいけないもの
     - デザインの変更、演出の追加、CMS の都合による調整
       （CMS 由来の見た目は functions/_lib/render.js が差し込む）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トップの写真の焼き込み文字が、フィルムの送り穴の帯と重なる
   --------------------------------------------------------------------------
   `.perf`（左右のパーフォレーション帯）は position:fixed で画面の左右に
   26px 幅で貼り付いている（style.css 209行〜。**1180px 以上でだけ出る**）。
   一方 `.hero-burn`（SHOT 001 … の焼き込み文字）は
   `inset-inline-start:0` で枠の左端から始まる。
   その結果、1180px 以上の画面では**文字の先頭 26px が帯の下に潜り**、
   「SHOT」の S が欠けて見えていた（2026-08-07、本人からの指摘で実測）。

   帯と同じ幅だけ内側から始める。帯が出ない 1180px 未満では位置を変えない
   （スマートフォンでは元のまま）。文字の折り返し位置も変えないよう、
   最大幅も帯のぶんだけ詰める。 */
@media (min-width: 1180px) {
  .hero-burn {
    inset-inline-start: var(--perf, 26px);
    max-width: min(30em, calc(92% - var(--perf, 26px)));
  }
}

/* --------------------------------------------------------------------------
   2. 紹介（REEL 01）に出す SNS リンクの並び
   --------------------------------------------------------------------------
   v5 は SNS をエンドロールにしか置いていない。本人の要望で紹介の文の直後にも
   出すことにしたが、v5 の HTML は触れないので差し込みで足している
   （functions/_lib/render.js）。見た目は v5 の .ag-cta--ghost をそのまま借り、
   並べ方だけをここで決める。**新しい色・新しい形は作らない。** */
.sns-row {
  margin-block-start: var(--sp-s, 1.2rem);
  gap: .6em;
}
.sns-row .sns-link {
  /* 文字数が短いので、CTA の既定より詰める（押せる高さ 44px は .ag-cta が持つ） */
  padding-inline: 1.1em;
  font-size: var(--step--1);
}
.sns-row .ext { margin-inline-start: .4em }