/* ============================================================
   2026-08-19 クライアント修正指示（支給素材/0819/0819キャンペーンサイト修正依頼.pptx）

   既存の special.css は minify 済みのため壊さないよう、別ファイルに上書きルールとして書く。
   読み込みは special.css の直後。

   【重要】このサイトのブレークポイントは **800px**（48em=768px ではない）。
   既存が `@media (min-width:800px)` と `@media not all and (min-width:800px)` で分けているため、
   ここでも 800px を境にする。SP専用の指定は必ず max-width 側に閉じ込め、
   「素で書いてPCで打ち消す」書き方はしない（打ち消しで既存値を壊すため）。

   数値はすべて 2026-08-20 に prod で実測した値にもとづく。
   ============================================================ */

/* =========================== PC・SP 共通 =========================== */

/* --- スライド2：「個人情報の取り扱いについて」の上に間隔をとる ---------------
   原因＝この見出しだけ .track-content の“2つ目”にあり、直前の text-box に密着していた（実測 gap 0px）。
   「応募要項」「推奨環境」は各 track-content の先頭にあるため track 間の隙間ぶん空いている
   （実測 SP 59px / PC 64px）。同じ間隔を与えて揃える。 */
.track-content .text-box + .heading { margin-block-start: 59px; }

@media (min-width: 800px) {
  .track-content .text-box + .heading { margin-block-start: 64px; }
}

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

  /* --- スライド4：Q1の自由記入欄が右にはみ出していた ---------------------
     原因＝HTMLに style="width:100%" が直書きされており、インデント（margin-left）の
     ぶんが考慮されていなかった。インラインに勝つため !important が要る。
     ⚠️ margin-left は **10.667vw（幅に比例）** で、390pxでは41.6px・768pxでは81.9px。
     固定pxで引くと画面幅が広いほど足りず、600〜799pxで15〜37px はみ出す（2026-08-20 実測）。
     そこで固定値を使わず、width:auto + display:block で
     「親幅 − margin」を自動で幅にする。どの画面幅でも収まる。 */
  #q1_free { width: auto !important; display: block; margin-right: 0; box-sizing: border-box; }

  /* --- スライド5：抽選画面の動画を大きく（実測 312px → 約367px） ---------
     ⚠️ 2026-08-21 修正：もとは `.video-container` と `.video-js`（＝video本体）の**両方**に
        94% を当てていた。video は枠の中に入るため 94%×94% となり、**枠が6%ぶん右にはみ出して
        枠の黒背景が縦線に見える**不具合になっていた（0821 slide2 のご指摘）。
        枠だけ94%にし、video 側は fix_20260821.css で 100%（＝枠いっぱい）にする。 */
  .raffle-movie .video-container { width: 94% !important; max-width: none; }
  .raffle-movie .video-container { margin-inline: auto; }

  /* --- スライド6：ハズレ画面のボタン2つを150%に -------------------------
     既存は img ではなく a.button-link に幅がある（51.0667vw＝実測199px）。
     150% ＝ 76.6vw（390px 換算で約299px）。
     ⚠️ **当選画面の「当選者登録フォームへ」も同じ幅で定義されている**
     （既存 `.raffle-result .raffle-resuilt_link .button-link, .navigation .button-link{width:51.0667vw}`）。
     ハズレ画面だけ大きくすると当選画面が取り残されるため、あわせて同じ150%にする
     （2026-08-20 越野さん指示「ボタンを他と合わせて大きくして」）。 */
  .navigation .button-link,
  .raffle-result .raffle-resuilt_link .button-link { width: 76.6vw; }

  /* --- スライド7：「抽選に参加」ボタンを150%に（実測 210px → 315px） -----
     差し替えた高解像度画像（SP 715px）により拡大しても劣化しない。
     ⚠️ 幅は img ではなく **a.apply-link（display:grid）** に与えること。
     img だけ広げると grid コンテナ（210px のまま）からはみ出し、
     ボタンが中心から (315-210)/2 = 52px 右へずれる（2026-08-20 実測）。 */
  .apply .apply-link { width: 315px; max-width: 92vw; }
  .apply .apply-link img { width: 100%; max-width: none; }

  /* --- スライド10：TOPの本文をハズレ画面と同じ大きさに ------------------
     ハズレ画面の本文は text-2xl（4.8vw＝実測18.72px）。TOPの説明文は
     text-md 13.52px / text-lg 14.56px / text-sm 12.48px とばらついていたため 4.8vw に統一。 */
  .apply-caption .text-container,
  .prize-list_description .text-container,
  .step-body .text-container,
  .prize p.text-container.text-xl { font-size: 4.8vw; }

  /* 上の拡大にともなう改行の破綻を防ぐ。
     元の <br> は小さい文字（13.5px）を前提に置かれているため、4.8vw に上げると
     行が収まらず「す。」「い。」だけが行頭に落ちる（2026-08-20 実測）。
     文章量の多いこの2つは明示改行を解除し、ブラウザの禁則処理つき自然折り返しに任せる。
     ※賞品の説明文・リード文は短く2行に収まるので <br> を残す。 */
  .apply-caption br,
  .step-body br { display: none; }
}

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

  /* --- スライド3：「配達希望日」が3行に折り返していた --------------------
     原因＝既存が `grid-template-columns: 5.5em auto auto`（ラベル列を想定した3列）で、
     見出しラベルを持たないこの項目では1列目にラジオが入り 88px に潰れていた（実測）。
     3列構成は活かしたまま、1・2列目を内容幅にする。
     既存セレクタの詳細度が高い（ID×2＋class×3）ため、同じ形で上書きする。 */
  #f-form .section-input .u-field .u-body#f-delivery.grid-container {
    grid-template-columns: max-content max-content auto;
  }
  #f-form .section-input .u-field .u-body#f-delivery.grid-container > label {
    white-space: nowrap;
  }

  /* --- スライド6：ハズレ画面のボタン2つを150%に（実測 290px → 435px） ---
     当選画面の「当選者登録フォームへ」も既存で同じ290px。あわせて435pxに揃える。 */
  .navigation .button-link,
  .raffle-result .raffle-resuilt_link .button-link { width: 435px; }

  /* --- スライド7：「抽選に参加」ボタンを200%に ---------------------------
     SPと同じく **a.apply-link に幅を与える**（img だけだと中心から115pxずれる）。
     ⚠️ PCは2つのボタンで元の幅が違う（既存CSSに下記2本があるため）。それぞれを200%にする。
        `.apply .apply-link { width:210px }`（応募方法の下）        → 420px
        `.campaign-entry.intro + .apply .apply-link { width:229px }`（トップ） → 458px
     後者は詳細度が高い専用ルールなので、同じ形で上書きしないと効かない（2026-08-20 実測）。 */
  .apply .apply-link { width: 420px; max-width: none; }
  .campaign-entry.intro + .apply .apply-link { width: 458px; max-width: none; }
  .apply .apply-link img { width: 100%; max-width: none; }
}