/* ============================================================
   2026-08-26 クライアント修正指示（支給素材/0826/0826サイト修正.pptx）

   fix_20260819.css / fix_20260821.css と同じ方針：
   special.css は minify 済みのため触らず、別ファイルで上書きする。
   読み込みは fix_20260821.css の直後（無いページは fix_20260819.css の直後）。

   【重要】ブレークポイントは **800px**（48em=768px ではない）。
   SP専用の指定は max-width 側に閉じ込め、「素で書いてPCで打ち消す」書き方はしない。

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

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

/* --- slide1：賞品の部位ラベルを「部位名 500g」の1行にして大きく ----------------
   ご指示＝「『焼き肉カット』という文字はトリで／(当選部位) 500g と改行なしで大きく」。
   `.cut` は index.html から削除済み。残る `.title`（部位名）と `.weight`（内容量）が
   既存CSSでは 2行グリッド（1行目=title が2カラムぶち抜き／2行目=cut+weight）だったため、
   **1行2カラムのグリッドに組み替えて中央に寄せる**。
   ⚠️ 既存は `.prize .prize-info{grid-template-rows:auto auto;grid-template-columns:60% 40%}`。
      列を % で持つと部位名の長さ（「ミスジ」〜「ミスジ＋三角バラ」）で中央がずれるため
      `auto auto` + `justify-content:center` にする。 */
.prize .prize-info {
  grid-template-rows: auto;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: baseline;
}
.prize .prize-info .title { grid-column: 1 / 2; }
.prize .prize-info .weight { grid-column: 2 / 3; justify-self: start; }
/* 1行を保証する。折り返すと「改行なしで」というご指示に反するため。
   ⚠️ 曜日によっては最長の「ミスジ＋三角バラ 500g」がメイン枠に入る（data-dow="4,5,6"）。
      SPは枠幅が固定（1fr 1fr）なので実測で余白を確認済み、
      PCは枠幅が中身に追従する（grid が max-content 基準）ので溢れない。
      → 2026-08-26 に 360〜1920px × 曜日0〜6 の全組み合わせで折り返し0・はみ出し0を実測。 */
.prize .prize-info .title,
.prize .prize-info .weight { white-space: nowrap; }

/* --- slide6：Q2の最終行の乱れ → **CSSではなくHTML側の作法で解決した** ----------------
   「友人」「知人」を「家族・友人・知人」に統合して選択肢が9個→8個になり、
   PC（3列・`justify-content:space-between`）の最終行が左右に散る問題があった。

   🔴 2026-08-26 に `#fq2 .item.-narrow:nth-last-child(2){margin-right:auto}` で左詰めにしたが、これは誤り。
      `space-between` の隙間は「余った幅」から作られるため、余りを margin が全部吸ってしまい
      **「広告」と「家族・友人・知人」がぴったり隣接して1つの箱に見える**不具合になった
      （越野さんのご指摘・2026-08-27）。このルールは撤去済み。

   ✅ 正解は **既存サイトの作法**：`<li class="item -narrow -empty">` の空き枠を足して選択肢数を3の倍数に戻す。
      `.item.-empty` は special.css で **SP＝display:none／PC＝visibility:hidden** になる既存クラスで、
      Q3・Q4・Q6・Q9 でも同じ使い方をしている。`input.html` の Q2 に1つ追加した。
      → CSSでの上書きは不要になったのでこのファイルには何も書かない。 */

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

  /* 「もっと大きく主張させたい」（越野さん 2026-08-26 追加指示）。
     SPの黒帯は**枠幅が固定（1fr / 1fr）**で、最長の「ミスジ＋三角バラ 500g」でも
     左右に 86.5px 余っていた（2026-08-26 実測 390px）。そのぶんを使い切る。
       メイン  部位名 5.64vw → 8.3vw ／ 内容量 2.8267vw → 5.6vw
     ⚠️ 上限は最長の「ミスジ＋三角バラ 500g」（data-dow="4,5,6"）で決まる。
        360〜799px × 曜日0〜6 の全組み合わせで折り返し0・枠外0になる値を実測して決めた
        （メインの残り余白 12.2〜30.6px）。これ以上は上げないこと。
     ⚠️ **サブ枠（半幅）は拡大の余地がない**ので原寸（3.5867vw / 2.8267vw）のまま。
        3.85vw まで上げただけで余白が 2.8px、4.2vw では 0.0px になり、端末のフォント差で溢れる。 */
  .prize .prize-list_item--main .prize-info .title { font-size: 8.3vw; }
  .prize .prize-list_item--main .prize-info .weight { font-size: 5.6vw; }

  /* --- slide1：A賞リード文の改行を「狙おう！」までにする ------------------------
     ご指示＝「改行は固定でしょうか？／狙おう！　までしたく」。
     `<br>` は元から「狙おう！」の前（＝1行目のあと）に入っているが、
     fix_20260819.css でSP本文を 4.8vw に拡大したため 2行目
     「毎日応募して、お気に入りの部位を狙おう！」(20文字) が収まらず
     「う！」だけ3行目に落ちていた（2026-08-26 実測 390px）。
     ⚠️ 文字を小さくすると他の説明文と不揃いになるので、**字送りを詰めて**1行に収める。
        `-palt`（既存サイトのツメ組みクラス）と同じ考え方。
        和文は1文字＝1emで端末差が出ないため、20文字×0.945em＝18.9em＝354px（390px時）で確定的に収まる。
     ⚠️ ご指摘のあったA賞側だけに限定する（B賞のリードは元から2行に収まっているため触らない）。 */
  .prize .prize-a .prize-list_description .text-container {
    letter-spacing: -0.055em;
    white-space: nowrap;
  }

  /* --- slide2・3：抽選画面／当選画面の説明文をトップページと同じ大きさに ----------
     ご指示＝「文字サイズは上記（トップページ）と同等程度におねがいします。」
     実測（修正前）: トップの説明文 18.72px（4.8vw・fix_20260819.css で拡大済み）に対し
                    抽選画面・当選画面は **13.52px**（text-md 3.4667vw）のまま取り残されていた。
     PCは両方とも16pxで一致しているため **SPのみ**そろえる。 */
  .raffle-movie > p > .text-container,
  .raffle-result > p > .text-container { font-size: 4.8vw; }

  /* 拡大にともなう改行の破綻を防ぐ（fix_20260819.css の .apply-caption と同じ対処）。
     元の <br> は 13.5px を前提に置かれており、18.72px では行が収まらず
     句点だけが行頭に落ちる。禁則処理つきの自然折り返しに任せる。 */
  .raffle-movie > p > .text-container br,
  .raffle-result > p > .text-container br { display: none; }

  /* --- slide6：Q1の自由記入欄が選択肢とズレている ------------------------------
     ご指示＝「ズレているため修正」。
     🔴 原因は 2026-08-20 に入れた `#q1_free{width:auto}`。
        **textarea の `width:auto` は `cols="30"` × フォント実測幅**で決まるため、
        Chrome では 268px に収まるが iOS Safari では約 328px になり右へはみ出す
        （先方スクリーンショット 786px/DPR2 から実測）。端末とフォントに依存する。
     → 幅を親から決める指定に変え、**上の選択肢ボックスと左右を揃える**（PC版と同じ見え方）。
        `width:auto` は使わない。 */
  #q1_free {
    width: 100% !important;
    margin-inline: 0 !important;
    display: block;
    box-sizing: border-box;
  }
}

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

  /* --- slide1：部位ラベルを1行にして大きくする -----------------------------------
     💡 PCの賞品タイルは **grid の列幅が中身（＝このラベル）に追従**する。行の総幅は約409pxで固定なので、
        メインを大きくするとサブ枠が同じぶん縮む。SPのような「余白を使い切る」余地は無い。
        そこで **メインの左右パディングを 24px → 12px に詰めて**、その24pxぶんを文字に回す。
     メイン 部位名 24px → 27px ／ 内容量 14px → 19px。サブは原寸（12px / 11px）を維持。
     ⚠️ サブ枠の幅は「三角バラ 500g」の実寸で決まる。メインを上げすぎるとサブが潰れるので、
        360〜1920px × 曜日0〜6 で折り返し0・枠外0を実測して決めた値。これ以上上げないこと。 */
  .prize .prize-list_item--main .prize-info { padding-inline: 12px; }
  .prize .prize-list_item--main .prize-info .title { font-size: 27px; }
  .prize .prize-list_item--main .prize-info .weight { font-size: 19px; }
}