/* ============================================================
   2026-08-28 クライアント修正指示（Kaen宛メール・トップ「応募方法」イントロの Step1）

   fix_20260819/0821/0826 と同じ方針：special.css は minify 済みのため触らず、別ファイルで上書きする。
   読み込みは fix_20260826.css の直後。**このセクションは index.html にしか無い**ので index.html のみ。

   【重要】ブレークポイントは 800px（48em=768px ではない）。

   ------------------------------------------------------------
   ■ 先方メールのご指示（原文）
   ------------------------------------------------------------
   ・「動画をみる」の文字サイズを「抽選結果をみる！」と合わせてほしい
   ・可能であれば上の「抽選ボタンを押して」も少し大きく
   ＋ 越野さん追加指示：「この2行の間の余白をトルツメで中央寄せ」

   ------------------------------------------------------------
   ■ 直したもの（原因は3つとも別）
   ------------------------------------------------------------
   ① 🔴 Step1 のバッジ（シールド）がSPで画面左に切れていた ＝ **先方支給CSSの不具合**
      SP: `.campaign-entry.intro .step-badge{position:absolute; left:-3.08vw}` ← 枠の外へ出す意匠
      PC: `.campaign-entry.intro .step-badge{left:14px}`                      ← 枠の内側
      SPだけ「枠の外へ 3.08vw 出す」のに `.step-list` は左右パディング0で、
      プレート2枚＋gap＝96.88vw ＝ **画面の左右に 1.56vw しか余白が無い**。
      はみ出し 3.08vw > 余白 1.56vw なので**1枚目だけ画面外にあふれて切れる**。
      実測：320〜799px の**全幅**で -4.8〜-12.1px 欠けていた。
      ⚠️ 8/26の当方の文言変更とは無関係。共通CSS適用時から存在していた。

   ② Step1 の文字が Step2 より小さかった ＝ **当方の 8/26 変更の見落とし**
      `.campaign-entry.intro .step-heading:has(.step-heading_lead){font-size:4vw}` という
      「リード文を持つ見出しは本体も小さくする」ルールがある。元の長いリード文
      （「『抽選に参加』ボタンを押して」＝14文字）を収めるための措置だった。
      8/26 に「抽選ボタンを押して」（9文字）へ短縮したのに**この縮小ルールを見直さなかった**。

   ③ 2行の間が空いていた ＝ **`.intro .text-container` の行高**
      `.intro .text-container{line-height:1.8}`（PC 1.67）が効いていた。
      `.campaign-entry .step-heading>.text-container` は font-size / font-weight しか inherit させて
      おらず、**行高だけ 1.8 のまま**だったのが原因。
      ⚠️ `.step-heading` 側に line-height を当てても効かない。`.text-container` が自前で持っているため。
         （2026-08-28 に実際にハマった。computed で 53.44px と出て気づいた）
   ============================================================ */

/* =========================== SP（800px 未満） =========================== */
@media (max-width: 799.98px) {

  /* --- ① バッジのはみ出しぶんの余白を画面の左右に作る -------------------------
     💡 **「バッジを枠から出す」意匠は先方デザインなので壊さない**。足りないのは置き場所のほう。
     → プレートを 44.6133vw → 43vw に詰め、はみ出しも -3.08vw → -2.5vw に浅くする。
        合計 43×2 + gap 7.6533 ＝ 93.65vw ／ 左右余白 3.17vw > はみ出し 2.5vw ＝ **0.67vw 余る**。
     ⚠️ gap を詰める案は不可。gap の中に Step1→Step2 の「▶」
        （`:first-of-type:before`・left:100% から 1.5467vw ＋ 幅4.8667vw ＝ 6.41vw）が入っている。
     ⚠️ バッジの `left` を 0 にする案も不可。Step2 のバッジまで内側へ寄って
        「抽選結果を」の文字に重なる（一度やって現物で確認した）。 */
  .campaign-entry.intro .step-list_item { width: 43vw; }
  .campaign-entry.intro .step-badge { left: -2.5vw; }

  /* プレートを詰めたぶん、本文の開始位置も右へ送る。これをしないと本文領域が狭くなり、
     中央寄せの文字が左（バッジ側）へ寄って **Step2 の「抽選結果を」がバッジに 1.7〜4.3px 重なる**。
     💡 15.19vw ＝ **バッジの右端とちょうど同じ位置**。文字は中央寄せなので、本文領域の左端を
        バッジ右端に合わせると左右の余裕が釣り合い、1行に入る文字幅が最大（27.81vw）になる。 */
  .campaign-entry.intro .step-list_item { padding-left: 15.19vw; }

  /* --- ② 文字サイズを Step2 にそろえる -------------------------------------
     本体：4vw → 4.8667vw（Step2と同値）／リード：2.56vw → 3.15vw（＋23%）
     💡 リード拡大の余地は **字間** から作った。`.campaign-entry.intro .step-heading{letter-spacing:.1em}`
        をリードも継承しており、9文字ぶんで **0.9em ＝ 幅の約1割**を字間が占めていた。
     ⚠️ リードは `white-space:nowrap` ＋ `transform:scale(.96)` で折り返せない。
        本文領域 15.19〜43vw（幅27.81vw）に9文字を入れる上限は
        fs ≦ 27.81 /(9 × 0.96) ≒ **3.21vw**。**3.15vw が安全上限**。これ以上は上げないこと。 */
  .campaign-entry.intro .step-heading:has(.step-heading_lead) { font-size: 4.8667vw; }
  .campaign-entry.intro .step-heading_lead { font-size: 3.15vw; letter-spacing: 0; }

  /* --- ③ 2行の間をトルツメして上下中央に --------------------------------------
     行高を詰めるとブロックの高さが縮み、`.step-list_item{display:grid; align-items:center}` により
     自動的に上下中央へ戻る。**Step1（リード有り）だけに効かせる**（Step2 の行送りは触らない）。 */
  .campaign-entry.intro .step-heading:has(.step-heading_lead) > .text-container { line-height: 1.05; }
  .campaign-entry.intro .step-heading_lead { line-height: 1.1; }
}

/* =========================== PC（800px 以上） =========================== */
@media (min-width: 800px) {

  /* PCはバッジが元から枠の内側（left:14px）なので①の対処は不要。②と③だけ。
     本体：29px → 32px（Step2と同値）／リード：20px → 24px
     本文幅は 382px − padding 70px ＝ 312px。リード 9文字×24px＝216px で収まる。 */
  .campaign-entry.intro .step-heading:has(.step-heading_lead) { font-size: 32px; }
  .campaign-entry.intro .step-heading_lead { font-size: 24px; }

  /* ③ トルツメ。PCは `.intro .text-container{line-height:1.67}` が効いており、
     2行ブロックがプレートの高さいっぱい（実測82.2px／プレート84px）まで広がって
     **上の余白 6.0px／下 12.0px** と上寄りになっていた（Step2 は 28.3／26.0）。 */
  .campaign-entry.intro .step-heading:has(.step-heading_lead) > .text-container { line-height: 1.05; }
  .campaign-entry.intro .step-heading_lead { line-height: 1.0; }
}