/*!
 * applesama 機種ページ /iphone/{機種}/ — V13(ソフトカード)。2026-09-18 に作り替え。
 *
 * 読み込み順: main.css → top.css → capacity.css → **このファイル**(functions.php の applesama_is_v13_model())。
 * 土台は容量ページと同じ(capacity.css の body.is-v13・.cap-crumb・.cap-h1・.cap-sec・.cap-h2・.cap-chart・
 * .cap-models・.cap-kv と、top.css の .top-card / .top-row / .top-answer / .top-cell / .total-switch)。
 * ここに書くのは機種ページ固有の差分だけ:
 *   .model-rank__px  ランキングの価格の右の余白(capacity.css の .cap-rank をそのまま使うため)
 *   .model-trend__*  容量ごとの 30 日の線(JS があるときは選んだ 1 つだけ)
 *   .cap-h3          比較の中の小見出し(旧 .compare__sub。main.css から移した)
 *   .model-matrix    業者 × 容量のマトリクス(〜699px は 1 業者 1 ブロック、700px〜 はふつうの表)
 *   .model-compare__* 「業者 × 容量の比較」の畳み
 *   .model-tablecard 表を載せる白いカード(.shoplist の負の margin と対で padding 16 / 22px)
 *   .model-fold__btn 畳むボタン(.cap-hist__btn と同じ形)
 *
 * **構成は容量ページと同じ**(2026-09-18 運営者「容量ページの形が理想」):
 *   パンくず → h1 → 容量タブ → 答えのカード → ランキング → 推移 →「業者 × 容量の比較」(畳む)→ 冒頭の 1 文 → 他の機種。
 * 容量タブ(本物のリンク)を押すと、答え・ランキング・推移が同時にその容量へ変わる(assets/js/model.js)。
 *
 * 2026-09-18 に撤去したもの(main.css からも削除): 機種写真の HERO(.model-hero)・価格つき容量タブ(.cap-tabs)・
 * 大きな価格の表(.model-hero__price)・Chart.js の 30 日グラフ(.chart)・容量別ベスト価格のマス(.cap-compare)・
 * 容量ごとの業者別ランキング TOP5(.rank-more)・他の機種のチップ(.model-siblings → .cap-models__list へ)。
 *
 * 色・角丸・影・書体は main.css の :root の変数を経由する。Zen Kaku Gothic New は等幅数字を持たないので
 * 数値は右寄せか等分グリッドで受ける(docs/DESIGN.md §19)。
 *
 * 幅:
 *   〜699px   1 列。マトリクスは 1 業者 1 ブロック
 *   700px〜   マトリクスはふつうの表(器だけ横スクロール)。ページ本体は横スクロールさせない
 *   769px〜   左右の余白 28px(capacity.css の .cap-main が持つ)
 *   1024px〜  **容量ページの格子をそのまま使う**(左 = 容量タブ → ランキング | 右 400px = 答えのカード → 推移)。
 *             「業者 × 容量の比較」だけ全幅で下に置く(7 列の表が入るように)
 */

/* ---------------------------------------------------------------- 全体 */
.model-main {
  /* .cap-main と同じ土台(capacity.css)。機種ページだけの余白はここで足す */
  padding-bottom: 8px;
}

/* ---------------------------------------------------------------- ランキング(JS が「業者 × 容量の比較」の表から描く) */
/*
 * 見た目は容量ページのランキング(capacity.css の .cap-rank)そのまま。
 * 違いは、新品未開封の表から描く行は価格が /go/ のリンクではないこと(.cap-rank__go が持っていた右の余白を
 * ここで持つ)。中古の段(と、主役が中古の機種の新品未開封)の行は 2026-09-24 から容量ページと同じ ↗ つきのリンク
 * (context は model_rank_{段}。C-12 / §3b #25 の前半)。段のチップと取得時刻は 2026-09-24 夕方から出さない(§3b #53。どの段も新品未開封と同じ行)。
 */
.model-rank__px { padding-right: 16px; }

@media (max-width: 359px) {
  .model-rank__px { padding-right: 12px; }
}

/* ランキングを 5 社(1024px 以上は 10 社)に畳むボタン(JS があるときだけ出る) */
.model-rank__fold {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

/* ---------------------------------------------------------------- 推移(容量ごと。JS があるときは 1 つだけ) */
.model-trend__fig + .model-trend__fig { margin-top: 14px; }

/* 容量の名前。JS があるときは見出しに出るので、ここでは出さない */
.model-trend__cap {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

/* ---------------------------------------------------------------- 他の機種の買取比較(.cap-models の中) */
.model-siblings__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

/* 文字の位置は変えずに当たり判定だけ 44px にする */
.model-siblings__foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 700;
}

@media (hover: hover) {
  .model-siblings__foot a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ---------------------------------------------------------------- 答えのカード(top.css の .top-answer・capacity.css の .cap-answer) */
/* 写真は容量カードの見出しに 1 枚だけ置くので、機種ページの答えのカードには出さない */

/* ---------------------------------------------------------------- 比較セクション(inc/model-compare.php) */
/* .cap-h3 は capacity.css へ移動(2026-09-21。容量ページも買取条件表で使うため) */

/*
 * 他の機種のシリーズ見出し。`class="cap-h3 model-siblings__h3"` と両方付くので、
 * **必ず .cap-h3 より後に書く**(どちらもクラス 1 つで詳細度が同じ = 後勝ち)。
 * .cap-h3 は capacity.css にあり、capacity.css → model.css の順で読むので順序は保たれている
 */
.model-siblings__h3 {
  margin: 20px 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.model-siblings__h3:first-of-type { margin-top: 0; }

/* 冒頭の 1 文(検索スニペット・AI の引用向け。容量ページの .cap-lede と同じ小ささ) */
.compare .compare__lede {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
}

.compare .compare__lede + .cap-h3 { margin-top: 18px; }

/* ---------------------------------------------------------------- 表を載せる白いカード */
/* .model-tablecard は capacity.css へ移動(2026-09-21。同上) */

/* ---------------------------------------------------------------- 畳むボタン(マトリクスの残りと、詳しい比較) */
.model-fold__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.model-fold__btn[hidden] { display: none; }

.model-fold__chev {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(180deg);
}

/* 閉じているときは ∨(開くと ∧) */
.model-fold__btn.is-closed .model-fold__chev { transform: none; }

@media (hover: hover) {
  .model-fold__btn:hover { color: var(--ink); }
}

/* ---------------------------------------------------------------- 業者 × 容量のマトリクス */
.model-matrix {
  padding: 4px 16px 6px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

/* 700px 以上: ふつうの表(列が入りきらないときは .shoplist の器だけ横に送る) */
.model-matrix .compare__matrix th[scope="row"] { white-space: nowrap; }

/* 30 日で最高値だった日数。赤は「その容量の最高値」専用なので、ここは太さだけで示す */
.model-matrix .compare__matrix tbody td.model-mx__win {
  font-weight: 700;
  color: var(--ink);
}

.model-matrix .compare__matrix tbody td.model-mx__win .compare__none {
  font-weight: 400;
  color: var(--faint);
}

/*
 * 〜699px: 1 業者 = 1 ブロック。
 *   1 行目: 業者名(1 / -2)+ 右に「30日で最高値 N日」(-2 / -1)
 *   2 行目: 容量ごとの価格のマス(容量の数 = インラインの --mx-n 列)
 *   3 行目: 取得停止の業者だけ「最終取得 MM/DD HH:MM 取得停止」
 * 列の多い表を横スクロールさせない(運営者方針)。ラベルは data-label を ::before で出す。
 */
@media (max-width: 699px) {
  /*
   * 左右の余白は行(tr)に持たせ、カードと .shoplist は 0 にする。
   * main.css の `.shoplist { margin-inline: -16px }`(表のセルの余白を .frame に合わせる指定)が
   * カードの padding を打ち消すので、カード側で左右の余白を持つと中身がカードの端に張り付き、
   * ≤359px(カード 14px / .shoplist -16px)ではカードの外へ 2px はみ出す(実測)。
   * 行の罫線はカードの端まで伸ばす(.cap-rank__row と同じ作り)
   */
  .model-matrix { padding: 2px 0 6px; }

  .model-matrix .shoplist {
    margin-inline: 0;
    overflow-x: visible;
  }

  .model-matrix .compare__matrix,
  .model-matrix .compare__matrix thead,
  .model-matrix .compare__matrix tbody,
  .model-matrix .compare__matrix tr,
  .model-matrix .compare__matrix th,
  .model-matrix .compare__matrix td { display: block; width: 100%; }

  .model-matrix .compare__matrix thead { display: none; }

  .model-matrix .compare__matrix tbody tr {
    display: grid;
    grid-template-columns: repeat(var(--mx-n, 4), minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 9px;
    /* 1 行目の業者名リンクが当たり判定 44px を持つので、上の余白はその分だけ減らす */
    padding: 4px 16px 14px;
    border-bottom: 1px solid var(--hairline-soft);
  }

  .model-matrix .compare__matrix tbody tr:last-child { border-bottom: 0; }

  /* 業者名(業者ページへの内部リンク)。ブロックの主な行き先なので当たり判定を 44px にする */
  .model-matrix .compare__matrix tbody th[scope="row"] {
    grid-column: 1 / -2;
    grid-row: 1;
    padding: 0;
    border: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .model-matrix .compare__matrix tbody th[scope="row"] a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 容量ごとの価格のマス: 上に容量ラベル、下に価格 */
  .model-matrix .compare__matrix tbody td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
  }

  .model-matrix .compare__matrix tbody td::before {
    content: attr(data-label);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--faint);
  }

  /* その容量で最高値。地の色は付けず、文字だけ赤く太く(マスが小さいので面で塗ると重い) */
  .model-matrix .compare__matrix tbody td.is-best {
    background: none;
    font-weight: 900;
    color: var(--up);
  }

  /* 30 日で最高値だった日数: 1 行目の右端に小さく */
  .model-matrix .compare__matrix tbody td.model-mx__win {
    grid-column: -2 / -1;
    grid-row: 1;
    align-items: flex-end;
    /* 業者名のリンク(44px)と同じ行なので、中身を縦の中央に置く */
    justify-content: center;
    text-align: right;
    font-size: 13px;
  }

  .model-matrix .compare__matrix tbody td.model-mx__win::before { text-align: right; }

  /* 最終取得は取得停止の業者だけ 3 行目に出す(健全な業者の分は行を増やさない) */
  .model-matrix .compare__matrix tbody td.compare__fetched { display: none; }

  .model-matrix .compare__matrix tbody tr.is-stale td.compare__fetched {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    grid-column: 1 / -1;
    font-size: 11.5px;
    font-weight: 500;
  }

  .model-matrix .compare__matrix tbody tr.is-stale td.compare__fetched::before { font-size: 10.5px; }
}

/* ---------------------------------------------------------------- 「業者 × 容量の比較」の畳み */
.model-compare__btn { margin-bottom: 4px; }

/* 開いたときの 1 つ目の見出しは、ボタンとの間を詰める */
.model-compare__body > .cap-h3:first-child { margin-top: 12px; }

/* ---------------------------------------------------------------- 発売前(iPhone Duo など。inc/prelaunch.php) */
/* 「定価(256GB)」が入るので、容量ページ(80px)より項目名の列を広く取る */
.model-main .cap-kv__row { grid-template-columns: 116px minmax(0, 1fr); }

.model-kv__note {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

/* 「買取受付前」の下に添える 1 文は改行して受ける */
.cap-kv__pending .model-kv__note {
  display: block;
  margin-left: 0;
  margin-top: 2px;
}

/* ---------------------------------------------------------------- 狭い画面 */
@media (max-width: 359px) {
  .model-card .top-card__head { padding-left: 14px; padding-right: 12px; }

  .model-card__h2 { font-size: 16px; }

  /* 余白は行(tr)側。カードに持たせると .shoplist の負の margin に打ち消されてはみ出す(上の 〜699px のコメント) */
  .model-matrix .compare__matrix tbody tr {
    padding-left: 14px;
    padding-right: 14px;
  }

  .model-main .cap-kv__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
}

/* ---------------------------------------------------------------- 700px〜 */
@media (min-width: 700px) {
  /*
   * top.css の段組み用の組み替え(inline-block・透明の下ボーダー・背景なし・filter の影・子に角丸)を打ち消して、
   * ふつうの白いカードに戻す。model.css は top.css より後に読むので、同じ詳細度なら後勝ち
   */
  .model-card.top-card {
    display: block;
    width: auto;
    margin: 0;
    border-bottom: 0;
    background: var(--card);
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    filter: none;
    overflow: hidden;
  }

  .model-card.top-card > * {
    background: transparent;
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------- 769px〜 左右の余白 28px(表のカードの内側も 22px に) */
@media (min-width: 769px) {
  .model-tablecard { padding: 6px 22px 14px; }

  .model-matrix { padding: 6px 22px 10px; }
}

/*
 * ---------------------------------------------------------------- 1024px〜 左 1fr | 右 400px
 * capacity.css の .cap-grid に乗せる。行の割り当ては容量ページと同じ考え方:
 *   行 1: パンくず(全幅)/ 行 2: h1(全幅)
 *   行 3: 左 = 容量カード | 右 = 答えのカード(行 3〜4)
 *   行 4: 左 = 比較(行 4〜5)/ 行 5: 右 = 推移
 * 状態タブが見えているときだけ、容量タブの直下に行を 1 つ足して 1 行ずつずらす
 * (capacity.css の `.cap-grid:has(.cap-condtabs:not([hidden]))`。C-05 / §3b #21。2026-09-24)。
 * 容量カードと答えのカードの上端がそろうように、両方とも上の余白を 18px にする
 * (答えのカードの margin-top: 18px は capacity.css の .cap-grid__answer が持つ)。
 */
@media (min-width: 1024px) {
  /*
   * 容量タブ・答えのカード・ランキング・推移は capacity.css の .cap-grid の割り当て
   * (行 3 タブ | 答え / 行 4 ランキング / 行 5 推移)がそのまま効く。
   * 「業者 × 容量の比較」は 7 列の表が入るので **全幅で 6 行目**(左の列 540px には収まらない)。
   */
  .model-grid > .compare {
    grid-column: 1 / -1;
    grid-row: 6;
    padding-top: 28px;
  }

  /*
   * 発売前の 2 節は **7 行目**(比較・推移の下)に置く。
   * capacity.css の `.cap-grid > .cap-pre-info { grid-row: 4 / span 2 }` /
   * `.cap-grid > .cap-pre-prev { grid-row: 5 }` は容量ページ用(価格があるときは出ない = 排他)だが、
   * 機種ページは「発売日前でも業者が予約買取価格を出したら」比較セクションと同時に出るので、
   * そのままだと比較・推移とまったく同じマスに重なって読めなくなる(inc/prelaunch.php の想定する状態)。
   * 価格が 1 件も無いふつうの発売前の機種では 4・5 行目が空(高さ 0)なので、見た目は変わらない。
   */
  .model-grid > .cap-pre-info {
    grid-column: 1;
    grid-row: 7;
    padding-top: 28px;
  }

  .model-grid > .cap-pre-prev {
    grid-column: 2;
    grid-row: 7;
    padding-top: 28px;
  }

  /*
   * 「公式の下取りと比べる」(#tradein)は **8 行目の左**(比較・発売前の節の下)。
   * 9/23 までは行の指定が無く自動配置で 7 行目の左に入っていた。自動配置は**空いたマスに吸い込まれる**
   * (2026-09-24 のレビューで、空の行 4 に入ってランキングの上に来たのを実測)ので明示する。
   * 発売前の節が無いページでは 7 行目が高さ 0 なので、位置は 9/23 と同じ。
   */
  .model-grid > .tradein {
    grid-column: 1;
    grid-row: 8;
  }

  /* 状態タブが見えているとき(capacity.css と同じ条件)は 1 行ずつ下へ */
  .model-grid:has(.cap-condtabs:not([hidden])) > .compare { grid-row: 7; }

  .model-grid:has(.cap-condtabs:not([hidden])) > .cap-pre-info,
  .model-grid:has(.cap-condtabs:not([hidden])) > .cap-pre-prev { grid-row: 8; }

  .model-grid:has(.cap-condtabs:not([hidden])) > .tradein { grid-row: 9; }
}

}

/* ===========================================================================
   状態(condition)のチップと、段ごとの「業者 × 容量」(U3-4 / 2026-09-22)

   **承認済みの 1 画面目より下にしか出ない。** 答えのカード・容量タブ・h1 は触らない。
   =========================================================================== */

/*
 * 段のチップ。`.cap-gbtabs`(等分・折り返さない容量タブ)も TOP の `.top-chips`
 * (等分・写真つき)も流用しない —— 「新品未開封」89px / 「開封済・未使用」は
 * さらに長く、等分では 390px の内容幅 354px に収まらない(4 等分 88.5px に
 * 「細かなキズ 2社」が溢れた実測がある)。**内容の幅で置いて折り返す。**
 */
.cap-condchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.cap-condchips__chip {
  flex: 0 0 auto;
  min-height: 44px;          /* 指で押せる高さ(design/0916/verify.mjs の 44px 検査) */
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-chip);
  background: var(--card-2);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.cap-condchips__chip.is-active {
  background: var(--ink);
  color: var(--card);
}

/* 段の手続き定義。チップのすぐ下に本文より小さく。畳まない。 */
.model-rank__def {
  margin: 8px 2px 0;
}

/* 段ごとのマトリクスの上に置く定義文(畳んだ比較節の中)。 */
.model-mx__def {
  margin: 0 2px 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* 「業者の段」の列。業者自身の呼び名なので、価格の列と見分けがつく地にする。 */
.model-mx__tier {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

/*
 * ⚠️ **≤699px では「業者の段」を 1 行目の右端に明示配置する。**
 *
 * この幅の `tbody tr` は `repeat(var(--mx-n), 1fr)` の格子で、`th[scope="row"]` が
 * `1 / -2` を占めるので **1 行目の最終列が必ず 1 マス空く**。新品の表はそこを
 * `.model-mx__win`(30 日で最高値)が明示配置で埋めるため、価格のマスは 2 行目から並ぶ。
 * 中古の表には `.model-mx__win` が無いので、**空いた 1 マスに最初の容量の価格が吸い込まれ**、
 * 以降の容量が 1 つずつ繰り上がる(2026-09-22 に実測。256GB だけ業者名の右へ飛び、
 * 512GB が業者名の真下に来ていた)。
 *
 * `--mx-n` を増やしても直らない(`th` が `1 / -2` を占める以上、空くのは常に最終列 1 マス)。
 * **埋める側を明示配置する**のが正しい直し方。
 */
@media (max-width: 699px) {
  .model-matrix .compare__matrix tbody td.model-mx__tier {
    grid-column: -2 / -1;
    grid-row: 1;
    align-items: flex-end;
    text-align: right;
  }

  .model-matrix .compare__matrix tbody td.model-mx__tier::before {
    text-align: right;
  }
}

/*
 * 順位の行で、業者名と段のバッジを **1 つのマス**にまとめる入れ物。
 *
 * ⚠️ `.cap-rank__row` は 3 列固定(capacity.css:227)。段のバッジを li の直下に置くと
 * 4 つ目の子になり、価格が暗黙の 2 行目・22px の順位列へ落ちて切れる。
 */
.model-rank .cap-rank__namewrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.model-rank .cap-rank__namewrap .cap-rank__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 中古の表の、業者の更新日が 30 日以上前のマス(§3b #17。2026-09-24)。価格は薄く、下に「業者更新 M/D」 */
.compare__matrix td.is-src-stale { color: var(--muted); }

.model-mx__src {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
}

/* ===========================================================================
   公式の下取りと比べる(2026-09-22)
   ===========================================================================

   ⚠️ **金額だけを大きく見せない。** 受け取り方(ポイント/ギフトカード)と
   「新機種の購入」の列は金額と同じ視界に必ず入れる(消費者庁「打消し表示」)。
   〜699px では表を縦に畳むが、その 2 列も必ず一緒に畳む。 */

.tradein__lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.tradein__wrap {
  overflow-x: auto;          /* 表だけは横スクロールしてよい(本文は絶対にしない) */
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

.tradein__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tradein__table th,
.tradein__table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
}

.tradein__table thead th {
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
  white-space: nowrap;
}

.tradein__table tbody tr + tr { border-top: 1px solid var(--hairline-soft); }

.tradein__table tbody th {
  font-weight: 700;
  color: var(--ink);
}

/* applesama の行。ここだけ地を変えて「基準」だと分かるようにする(赤は使わない = 値上がり専用) */
.tradein__table tbody tr.is-buy { background: var(--card-2); }

.tradein__sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--faint);
}

.tradein__table .num {
  text-align: right;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.tradein__no { color: var(--faint); }

.tradein__note {
  margin: 10px 2px 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* 〜699px: 1 行 = 1 ブロックに畳む(横スクロールを読ませない) */
@media (max-width: 699px) {
  .tradein__wrap { overflow-x: visible; }
  .tradein__table,
  .tradein__table tbody,
  .tradein__table tr { display: block; }
  .tradein__table thead { display: none; }

  .tradein__table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    padding: 12px 14px;
  }

  .tradein__table tbody th,
  .tradein__table tbody td { padding: 0; }

  .tradein__table tbody th { grid-column: 1; grid-row: 1; }
  .tradein__table tbody .num { grid-column: 2; grid-row: 1; align-self: center; font-size: 17px; }

  /* 受け取り方と購入条件は 2 行目に「ラベル: 値」で並べる(金額と同じブロックの中) */
  .tradein__table tbody td[data-label] {
    grid-column: 1 / -1;
    font-size: 12.5px;
    color: var(--muted);
  }
  .tradein__table tbody td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--faint);
  }
  .tradein__table tbody td[data-label]:first-of-type { margin-top: 6px; }
}