/*!
 * applesama V13 の土台(body.is-v13)と容量ページ(/iphone/{機種}/{容量}gb/)— ソフトカード(2026-09-16〜)
 *
 * このファイルは容量ページ専用ではない。functions.php が 容量ページ / 機種一覧 /iphone/ /
 * 業者ページ /shop/ / 業者一覧 /shops/ / 総合順の基準 /ranking-criteria/ で読み込み、次の土台を共有している:
 *   地の色(body.is-v13)・パンくず(.cap-crumb)・h1(.cap-h1)・節(.cap-sec)・見出し(.cap-h2)・
 *   ランキング(.cap-rank)・推移の線(.cap-chart)・日ごとの最高値の表(.cap-hist)・冒頭の 1 文(.cap-lede)・
 *   他の機種(.cap-models)・折り返し止め(.cap-nw)
 * → ここを直すと 5 ページに効く。ページ固有の差分は hub.css / shop.css。
 *
 * 読み込み順: main.css → top.css → このファイル(→ hub.css / shop.css)。
 * デザインの正は design/0916/SOFT-SPEC.md(Claude Design のアートボード「A ソフトカード」の実寸)。
 * 色・角丸・影・書体は main.css の :root の変数を必ず経由する(px の寸法だけ直に書く)。
 * top.css から使う部品: 答えのカード(.top-answer / .top-cell)・前世代のカード(.top-card / .top-row)・
 * 並びの切り替え(.total-switch)。
 *
 * 面の作り: 白いカード(角丸 + 影)を左右 18px の余白の中に置き、カードの中の行は 1px の罫線で区切る。
 * 影と罫線は二重にしない(カードの外は影、中は罫線)。行の罫線が角丸から飛び出すカードは overflow: hidden。
 *
 * 書体は Zen Kaku Gothic New 一本(main.css で --f-* が全部これを指す)。2 つの注意:
 *   - **等幅数字(tnum)が無い**。桁数で幅が変わるので、数値は右寄せか等分グリッドで受ける
 *   - **line-height: normal が約 1.44em**。行の高さを決めたい所は px か数値で明示する
 *
 * 幅:
 *   〜699px   スマホ。390px が基準。上から パンくず・h1・容量タブ・答えのカード・ランキング・推移・冒頭文・他の機種
 *   700px〜   h1 28px。ランキングに列の見出し(順位 / 業者 / 買取価格)、1 行 52px
 *   769px〜   左右の余白 18px → 28px(ヘッダー・.frame・フッターと同じ)
 *   1024px〜  左 1fr(パンくず・h1・容量タブ → すぐ下にランキング)| 右 400px(答えのカード → 推移)。追従しない
 */

/* ---------------------------------------------------------------- 全体 */
body.is-v13 {
  background: var(--paper);
}

html:has(> body.is-v13) { background: var(--paper); }

.is-v13 .page { background: var(--paper); }

.cap-main {
  display: block;
  padding-bottom: 8px;
  color: var(--ink);
  font-family: var(--f-body);
  line-height: normal;
  letter-spacing: normal;
}

/* 作者の display 指定より hidden を優先する(日ごとの最高値のボタン) */
.cap-main [hidden] { display: none !important; }

.cap-main :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}

.cap-nw { display: inline-block; }

/* ---------------------------------------------------------------- 上段: パンくず・h1・容量タブ */
.cap-crumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 18px 0;
  list-style: none;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.cap-crumb li + li::before {
  content: "›";
  margin: 0 6px;
  color: var(--chev);
}

.cap-crumb a { color: var(--muted); }
.cap-crumb [aria-current] { color: var(--ink); font-weight: 700; }

/* h1 2 行(機種 容量 / 買取価格を N 社で比較(新品未開封))。折り返しは語のまとまりの間だけ */
.cap-h1 {
  margin: 0;
  padding: 6px 18px 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
  font-feature-settings: "palt";
  color: var(--ink);
}

.cap-h1__name,
.cap-h1__sub { display: block; }

/*
 * 副題(買取価格比較(N社・新品未開封・容量別))は **機種名と同じ太さにしない**。
 * 2026-09-18 に運営者の指摘「3 行の太字が気になる・デザインとしていまいち」で変更。
 * 語は h1 の中に残すので SEO は変わらない(docs/HANDOFF_MODELPAGE_2026-09-18.md §8)。
 */
.cap-h1__sub {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--muted);
}

.cap-h1__ph { display: inline-block; }

.cap-tabwrap {
  margin-top: 14px;
  padding: 0 18px;
}

/*
 * 容量タブ: 容量の文字だけ・等分(5 容量以上は 4 列で折り返す。列数はインラインの --cap-gbtabs-n)。
 * 白いカードの中を 1px の罫線で割り、選んでいる容量は下に 3px の赤い線(TOP のシリーズタブと同じ描き方。
 * border だと切り替えで 3px 分の段差が出るので box-shadow で描く)。本物のリンクで押せる高さは 48px
 */
.cap-gbtabs {
  display: grid;
  grid-template-columns: repeat(var(--cap-gbtabs-n, 4), minmax(0, 1fr));
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-flat);
  /* 中の罫線と選択中の下線を角丸で切る */
  overflow: hidden;
}

.cap-gbtabs__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 0 6px;
  border-left: 1px solid var(--hairline);
  color: var(--faint);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* 行の頭(1 つ目と、4 列で折り返した 5 つ目)は左の罫線を消す */
.cap-gbtabs__tab:first-child,
.cap-gbtabs__tab:nth-child(4n + 1) { border-left: 0; }

.cap-gbtabs__tab:nth-child(n + 5) { border-top: 1px solid var(--hairline); }

.cap-gbtabs__tab.is-active {
  color: var(--ink);
  font-weight: 900;
  box-shadow: inset 0 -3px 0 var(--up);
}

/* ---------------------------------------------------------------- 答えのカード(top.css の .top-answer) */
/* スマホ〜768px は左右 18px の余白の中に置く(769px 以上は .cap-main の余白が受ける) */
.cap-grid__answer { margin: 16px 18px 0; }

.cap-answer .top-answer__meta {
  flex-wrap: wrap;
  row-gap: 6px;
}

/*
 * 価格と前日比の右に機種の写真(2026-09-18。top.css の .top-answer__row / __lead / __photo / __img を共有)。
 * 検索から来た人が「どの機種の話か」を文字を読む前に掴めるようにする。
 * 〜699px は 72×89(前日比・N 社・時点の 3 つが入る幅を残す)、700px 以上は TOP と同じ 88×109
 */
.cap-answer .top-answer__photo,
.cap-answer .top-answer__img {
  width: 72px;
  height: 89px;
}

@media (min-width: 700px) {
  .cap-answer .top-answer__photo,
  .cap-answer .top-answer__img {
    width: 88px;
    height: 109px;
  }
}

/* 買取受付前(価格のまだ無い容量)。top.css の .top-answer__status と同じ見た目 */
.cap-answer__status {
  margin: 8px 0 0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--ink);
}

/* 受付前のマスは 1〜3 個(定価 / 発売 / 予約開始。数はインラインの --cap-cells-n) */
.cap-answer__cells--pending { grid-template-columns: repeat(var(--cap-cells-n, 3), minmax(0, 1fr)); }

/* ---------------------------------------------------------------- 節と見出し */
.cap-sec { padding: 28px 18px 0; }

.cap-h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
  font-feature-settings: "palt";
  color: var(--ink);
}

/* ---------------------------------------------------------------- ランキング(1 業者 1 行) */
.cap-rank__card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  /* 行の罫線が角丸からはみ出さないように */
  overflow: hidden;
}

.cap-rank__head { display: none; }

.cap-rank__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 順位・業者名・価格は文字のベースラインでそろえる(中央ぞろえだと数字が日本語より上に浮く) */
.cap-rank__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 6px;
  min-height: 56px;
  padding: 4px 0 4px 16px;
}

/* 区切りの 1px の分だけ上の余白を減らし、どの行も 56px(700px 以上は 52px)にそろえる */
.cap-rank__row + .cap-rank__row {
  border-top: 1px solid var(--hairline-soft);
  padding-top: 3px;
}

.cap-rank__no {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--faint);
}

.cap-rank__row:first-child .cap-rank__no { color: var(--ink); }

/* 業者名は業者ページへの内部リンク */
.cap-rank__name {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  font-feature-settings: "palt";
  color: var(--ink);
}

/* 価格 + ↗ がまとめて 1 つのリンク(/go/)。枠は描かず、押せる高さだけ 44px */
.cap-rank__go {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-height: 44px;
  padding: 0 16px 0 10px;
  color: var(--ink);
}

/*
 * 価格と「1 位との差」を縦に積む(2026-09-18)。行の高さ(56px / 700px 以上 52px)は変わらない。
 * flex の箱のベースラインは最初の子(価格)なので、.cap-rank__row の baseline ぞろえもそのまま効く
 */
.cap-rank__pxwrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}

.cap-rank__px {
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/*
 * 1 位との差(総合順のときは最高値との差)。同額・1 位の行には出さない。
 * 「2 位といくら違うのか」は比較サイトにしか出せない納得の材料(docs/HANDOFF_MODELPAGE_2026-09-18.md §3.2)
 */
.cap-rank__gap {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}

.cap-go__icon {
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .cap-rank__row:hover { background: var(--card-2); }
  /* a に限る: 業者ページが無い業者(中古専業)は span で名前だけ出す(2026-09-24 C-20)。押せない文字に下線を出さない */
  a.cap-rank__name:hover,
  .cap-rank__go:hover .cap-rank__px {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .cap-rank__go:hover .cap-go__icon { stroke: var(--ink); }
  .cap-gbtabs__tab:not(.is-active):hover { color: var(--ink); }
  .cap-hist__btn:hover { color: var(--ink); }
  .cap-models__list a:hover { border-color: var(--ink); }
}

/* 総合順(inc/total-order.php): 見出しの下に「総合順 | 高値順」+ 基準。行に順位の数字を出さない(.total-plain) */
.cap-rank .total-switch { margin: 0 0 12px; }

.total-plain .cap-rank__row { grid-template-columns: minmax(0, 1fr) auto; }

/* 取得停止(7 日以上更新なし): 最後に 1 行でまとめる */
.cap-stale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  margin-top: 6px;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.cap-stale__h {
  margin: 0;
  font-weight: 700;
}

.cap-stale__list {
  display: contents;
  list-style: none;
}

.cap-stale__list li {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.cap-stale__list a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--chev);
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- 推移(白いカードの中に線だけ + 線の上のラベル。プロットの高さ 150px 固定) */
.cap-chart {
  margin: 0;
  padding: 16px 16px 14px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-flat);
  color: var(--muted);
}

.cap-chart.is-up { --cap-line: var(--up); }
.cap-chart.is-down { --cap-line: var(--down); }

/*
 * プロットの高さと、下の点線の位置(viewBox 0 0 320 78 の y=10 / y=70)は対で成り立っている。
 * SVG の座標はテンプレートが y = 70 - (v-lo)/span*60 で出しているので、高さを変えるときも
 * --hi / --lo の calc(100% * n / 78) はそのまま保つ(業者ページの複数の線も同じ CSS を使う)
 */
.cap-chart__plot {
  position: relative;
  height: 150px;
}

.cap-chart__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 線は最高値〜最安値の幅いっぱいに描くので、高くしすぎると小さな値動きが暴落に見える */
.cap-chart__line {
  fill: none;
  stroke: var(--cap-line, var(--muted));
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* 高値・安値の点線(viewBox の y=10 / y=70) */
.cap-chart__guide {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--border);
}

.cap-chart__guide--hi { top: calc(100% * 10 / 78); }
.cap-chart__guide--lo { top: calc(100% * 70 / 78); }

/*
 * ラベル。高値は高値の点線の上、安値は安値の点線の下に置くので線とは重ならない。
 * 横位置はその日の x に寄せる: left:x% + translateX(-x%) で、端の日でも枠の中に収まる
 */
.cap-chart__lbl {
  position: absolute;
  left: var(--x, 0%);
  transform: translateX(calc(-1 * var(--x, 0%)));
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}

.cap-chart__lbl--hi { bottom: calc(100% * 68 / 78 + 5px); }
.cap-chart__lbl--lo { top: calc(100% * 70 / 78 + 5px); }

.cap-chart__lbl b,
.cap-chart__end b {
  font-weight: 900;
  color: var(--ink);
}

.cap-chart__lbl time,
.cap-chart__end time {
  font-weight: 500;
}

/* 始点(30 日の初日)と今日: 線の左下・右下。安値のラベルの行の下 */
.cap-chart__ends {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}

/* 日ごとの最高値(同じ最高値が続く日を 1 行に畳む。新しい順)。JS があるときだけ畳む(JS なしでは表が見える) */
.cap-hist { margin-top: 8px; }

.cap-hist__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);
}

.cap-hist__btn[hidden] { display: none; }

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

.cap-hist.is-closed .cap-hist__chev { transform: none; }
.cap-hist.is-closed .cap-hist__body { display: none; }

/*
 * 表の器。角丸で罫線を切りつつ、万一表が入りきらない幅(長い期間 + 6 桁 + 変化)でも
 * ページ全体を横スクロールさせず、この器の中だけで横に送る
 */
.cap-hist__box {
  margin-top: 2px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-flat);
  overflow-x: auto;
  overflow-y: hidden;
}

.cap-hist__table {
  width: 100%;
  border-collapse: collapse;
}

.cap-hist__table thead th {
  padding: 11px 8px 9px;
  border-bottom: 1px solid var(--hairline);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--faint);
  text-align: left;
  white-space: nowrap;
}

.cap-hist__table tbody th,
.cap-hist__table tbody td {
  height: 36px;
  padding: 6px 8px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  vertical-align: middle;
}

.cap-hist__table tbody tr:first-child > * { border-top: 0; }

.cap-hist__table thead th:first-child,
.cap-hist__table tbody th { padding-left: 14px; }

.cap-hist__table thead th:last-child,
.cap-hist__table tbody td:last-child { padding-right: 14px; }

.cap-hist__period { white-space: nowrap; }

.cap-hist__to {
  margin: 0 1px;
  color: var(--muted);
}

.cap-hist__table .cap-hist__px,
.cap-hist__table .cap-hist__dx {
  text-align: right;
  white-space: nowrap;
}

.cap-hist__table tbody .cap-hist__px {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.cap-hist__table tbody .cap-hist__dx {
  font-weight: 700;
  color: var(--faint);
}

.cap-hist__table tbody .cap-hist__dx.is-up { color: var(--up); }
.cap-hist__table tbody .cap-hist__dx.is-down { color: var(--down); }

/* ---------------------------------------------------------------- 冒頭の 1 文(推移の後ろに小さく。検索結果・AI の引用向けに HTML には残す) */
.cap-lede {
  margin: 0;
  padding: 26px 18px 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------------------------------------------------------------- 他の機種(2026-09-16 までの TOP の文字チップと同じ形。TOP は同日に写真タイルへ変えたが、ここは文字チップのまま。押せる高さ 44px) */
.cap-models .cap-h2 { margin-bottom: 10px; }

.cap-models__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap-models__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-chip);
  background: var(--card);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- 買取受付前(発売前の 18 系) */
.cap-kv {
  margin: 0;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.cap-kv__row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  min-height: 50px;
  padding: 9px 16px;
}

.cap-kv__row + .cap-kv__row { border-top: 1px solid var(--hairline-soft); }

.cap-kv__row dt {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.cap-kv__row dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

.cap-kv__row .cap-kv__num {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.cap-kv__row .cap-kv__pending { color: var(--warn); }

/* 前世代の同じ容量(TOP の一覧カードの部品) */
.cap-prev__card.top-card {
  display: block;
  width: auto;
  margin: 0;
}

.cap-prev__card .top-row__sub { white-space: normal; }

/* カードの足に 3 マス(定価 / 定価との差 / 買取率)。答えのカードの 3 マスと同じ作り(1px の隙間を地の色で見せる) */
.cap-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--cell-gap);
  border-top: 1px solid var(--hairline-soft);
}

/* マークアップは 値 → ラベルの順。答えのカードにそろえてラベルを上に見せる */
.cap-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  min-width: 0;
  padding: 11px 8px 10px;
  background: var(--card-2);
  text-align: center;
}

.cap-stat__v {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
}

.cap-stat__k {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- 狭い画面 */
@media (max-width: 375px) {
  .cap-h1 { font-size: 19px; }
}

@media (max-width: 369px) {
  .cap-rank__row { padding-left: 14px; }
  .cap-rank__go { padding-right: 14px; }
}

@media (max-width: 359px) {
  .cap-h1 { font-size: 17px; }
  .cap-h1__sub { font-size: 12.5px; }
  /*
   * 答えのカードの 3 マス(6 桁の定価・差・3 桁の買取率)を 320px まで収める。
   * 実測(359px): マスの中は 81px あり、いちばん長い「−¥19,300」は 15px/700 で 65.6px。
   * Zen Kaku は旧デザインの Archivo より字幅が狭いので、文字は小さくせず左右の余白だけ詰める
   */
  .cap-answer .top-answer__cells .top-cell { padding-left: 4px; padding-right: 4px; }
  .cap-rank__row {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    padding-left: 12px;
  }
  .total-plain .cap-rank__row { grid-template-columns: minmax(0, 1fr) auto; }
  .cap-rank__name {
    font-size: 14px;
    letter-spacing: -0.01em;
  }
  .cap-rank__px { font-size: 17px; }
  .cap-rank__go {
    gap: 4px;
    padding: 0 12px 0 8px;
  }
  /* 答えのカードの小さい行は 2 段に(時点を 2 段目に)。区切りの線は行頭に来るので消す */
  .cap-answer__sep2 { display: none; }
  .cap-answer__time { flex-basis: 100%; }
  .cap-hist__table tbody th,
  .cap-hist__table tbody td {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11.5px;
  }
  .cap-hist__table thead th:first-child,
  .cap-hist__table tbody th { padding-left: 12px; }
  .cap-hist__table thead th:last-child,
  .cap-hist__table tbody td:last-child { padding-right: 12px; }
  .cap-stat { padding-left: 4px; padding-right: 4px; }
}

/* ---------------------------------------------------------------- 700px〜 ランキングに列の見出し */
@media (min-width: 700px) {
  .cap-h1 { font-size: 28px; }

  .cap-h1__sub {
    margin-top: 7px;
    font-size: 14px;
  }

  .cap-rank__head,
  .cap-rank__row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    column-gap: 8px;
    padding-left: 16px;
  }

  .cap-rank__head {
    display: grid;
    align-items: center;
    min-height: 34px;
    border-bottom: 1px solid var(--hairline);
  }

  .cap-rank__head > span {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: var(--faint);
    white-space: nowrap;
  }

  /* 見出しの「買取価格」を価格の右端(↗ 12px + 間 5px + 余白 16px の左)にそろえる */
  .cap-rank__head .cap-rank__px {
    justify-self: end;
    padding-right: 33px;
  }

  .cap-rank__row {
    min-height: 52px;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .cap-rank__row + .cap-rank__row { padding-top: 1px; }

  .total-plain .cap-rank__head,
  .total-plain .cap-rank__row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------------------------------------------------------------- 769px〜 左右の余白 28px */
@media (min-width: 769px) {
  .cap-main { padding: 0 28px 8px; }

  .cap-crumb ol { padding: 18px 0 0; }

  .cap-h1,
  .cap-lede,
  .cap-sec,
  .cap-tabwrap {
    padding-left: 0;
    padding-right: 0;
  }

  .cap-grid__answer {
    margin-left: 0;
    margin-right: 0;
  }

  .cap-sec { padding-top: 36px; }
}

/*
 * ---------------------------------------------------------------- 1024px〜 左 1fr | 右 400px
 * 左の列 = パンくず・h1・容量タブ(.cap-grid__main)→ そのすぐ下にランキング、右の列 = 答えのカード → 推移。
 * マークアップはスマホと同じ順(main・答えのカード・ランキング・推移)で、grid の行で並べ替える。
 * 答えのカードは 1〜2 行目、ランキングは 2〜3 行目にまたがる: 1 行目の高さは左の列の上段だけで決まるので、
 * 容量タブのすぐ下からランキングが始まり、答えのカードの下から推移が始まる。追従しない。
 * grid-template-areas は .cap-grid の直下の子が前提(カード化のために section を新しいラッパでくくらない)
 */
@media (min-width: 1024px) {
  /*
   * 格子(2026-09-16 に組み直し): パンくずと h1 は全幅、その下を 左 = 容量タブ → ランキング | 右 = 答えのカード → 推移。
   * 答えのカードの上端を容量タブの上端にそろえる(運営者: 右のカードが上すぎる)。
   * .cap-grid__main は display: contents にして、中のパンくず・h1・容量タブを格子の直接の子にする(中身は div だけなので読み上げに影響しない)
   *
   *   行 1: crumb (1 / -1)
   *   行 2: h1    (1 / -1)
   *   行 3: tabs  | answer(行 3〜4)
   *   行 4: rank(行 4〜5)| (answer の続き)
   *   行 5: (rank の続き)| trend
   *
   * 状態タブ(.cap-condtabs)が**見えているときだけ**、下の `:has()` のブロックで行を 1 つ足して
   * 容量タブの直下(行 4)に入れる(C-05 / 運営者の決定 §3b #21。2026-09-24)。
   * ⚠️ 行の足し方を既定にしてはいけない: 状態タブの無いページ(16 128GB・17 Pro Max 1TB・
   * 機種ページの多く)で空の行 4 が答えのカードの高さを半分受け持ち、ランキングが 182px 下がる。
   * 機種ページでは、行の指定の無い節(#tradein)が空いた行 4 に自動配置されてランキングの上に来る
   * (2026-09-24 のレビューで実測。この版の既定は 9/23 までと 1 行も変わらない)。
   */
  .cap-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 28px;
    align-items: start;
  }

  .cap-grid__main { display: contents; }

  .cap-grid .cap-crumb {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .cap-grid .cap-h1 {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .cap-grid .cap-tabwrap {
    grid-column: 1;
    grid-row: 3;
  }

  /* 上 18px は容量タブ(.cap-tabwrap)と同じ = 上端がそろう */
  .cap-grid__answer {
    grid-column: 2;
    grid-row: 3 / span 2;
    margin-top: 18px;
  }

  .cap-grid > .cap-rank,
  .cap-grid > .cap-pre-info {
    grid-column: 1;
    grid-row: 4 / span 2;
  }

  .cap-grid > .cap-trend,
  .cap-grid > .cap-pre-prev {
    grid-column: 2;
    grid-row: 5;
  }

  /*
   * 状態タブが見えているページだけ(C-05 / §3b #21。2026-09-24):
   *
   *   行 3: tabs  | answer(行 3〜5)
   *   行 4: 状態タブ | (answer の続き)
   *   行 5: rank(行 5〜6)| (answer の続き)
   *   行 6: (rank の続き)| trend
   *
   * 9/23 までは .cap-condtabs に行の割り当てが無く、自動配置で格子の最後(ページ最下部。
   * 17 Pro Max 256GB で top=5,542px)に落ちていた。
   * `:not([hidden])`: 機種ページは容量を切り替えると状態タブごと隠す(model.js の syncTabs)。
   * 隠れた瞬間に既定の割り当てへ戻さないと、空の行 4 ができる。
   * `:has()` の効かない古いブラウザでは既定の割り当てのまま(状態タブは下に落ちるが、重ならない)。
   * 機種ページの compare・発売前の節・#tradein の行は model.css で同じようにずらす。
   */
  .cap-grid:has(.cap-condtabs:not([hidden])) {
    grid-template-rows: auto auto auto auto auto 1fr;
  }

  /* .cap-grid__main が display: contents なので、状態タブは格子の直接の子になる */
  .cap-grid:has(.cap-condtabs:not([hidden])) .cap-condtabs {
    grid-column: 1;
    grid-row: 4;
  }

  .cap-grid:has(.cap-condtabs:not([hidden])) > .cap-grid__answer {
    grid-row: 3 / span 3;
  }

  .cap-grid:has(.cap-condtabs:not([hidden])) > .cap-rank,
  .cap-grid:has(.cap-condtabs:not([hidden])) > .cap-pre-info {
    grid-row: 5 / span 2;
  }

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

  /* ランキングは容量タブの下 28px から、推移は答えのカードの下 28px から */
  .cap-grid > .cap-rank,
  .cap-grid > .cap-trend,
  .cap-grid > .cap-pre-info,
  .cap-grid > .cap-pre-prev { padding-top: 28px; }

  .cap-h1 {
    padding-top: 8px;
    font-size: 32px;
    line-height: 1.28;
  }

  .cap-h1__sub {
    margin-top: 8px;
    font-size: 15px;
  }

  .cap-tabwrap { margin-top: 18px; }
}

/* ---------------------------------------------------------------- 節の中の小見出しと、表を載せる白いカード
 * 2026-09-21: model.css から移動(容量ページにも「業者の買取条件」表を出すため)。2026-09-24 に買取条件は .cap-terms に
 * 作り直したので、.model-tablecard を使うのは機種ページの比較の表(inc/model-compare.php)と発売前の表(inc/prelaunch.php)。
 * capacity.css は容量・機種・ハブ・業者の 4 面が読む。
 */
/* 節の中の小見出し(h3)。旧 .compare__sub(main.css)をここへ移した */
.cap-h3 {
  margin: 26px 0 10px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
  color: var(--ink);
}

/* 表を載せる白いカード。.shoplist が margin-inline: -16px(769px 以上 -22px)で padding を打ち消す前提 */
.model-tablecard {
  padding: 4px 16px 10px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

/* ---------------------------------------------------------------- 業者の買取条件(.cap-terms。2026-09-24 作り直し)
 * applesama_render_shop_terms_table()(inc/shop-compare.php)。容量ページのランキングの下と、機種ページの「詳しいデータ」の中。
 * 業者 | 宅配 | 店頭 | 送料 | 入金まで の 5 列だけ。どの幅でも同じ列の位置に並べ、縦に目を走らせて見比べる。
 * 行と罫線はカードの端まで(ランキングのカードと同じ)。左右の余白は最初と最後のマスが持つ。
 *
 * 組み方は置き場(.cap-terms)の幅で決める(@container。表の置き場は 1440px で 796px・1024px で 540px・機種ページは全幅)。
 * **既定はスマホの組み方**で、置き場 480px 以上で割合の列幅と「買取」「まで」を足す。@container が効かないブラウザ
 * (Safari 15 以前など)はどの幅でもスマホの組み方になる(割合を既定にすると、狭い幅で見出しがくっつき値が切れる。2026-09-24 の検証)。
 * 列幅は実測(Zen Kaku 13px): 「条件付き」52px・「最短 5 日」52.4px(word-spacing で約 49px)・最長の業者名「トゥインクルモバイル」13.5px/700 で 135px。
 */
.cap-terms {
  container-type: inline-size;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  /* 行の地・罫線が角丸からはみ出さないように */
  overflow: hidden;
}

.cap-terms__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-feature-settings: "palt";
}

.cap-terms__table th,
.cap-terms__table td {
  padding: 0 0 0 6px;
  vertical-align: middle;
  text-align: left;
  font-weight: 500;
}

.cap-terms__table tr > :first-child { padding-left: 14px; }
.cap-terms__table tr > :last-child { padding-right: 12px; }

/* 列の見出し。幅はここで決める(table-layout: fixed。業者名の列は残り) */
.cap-terms__table thead th {
  height: 36px;
  border-bottom: 1px solid var(--hairline);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
}

.cap-terms__table thead .cap-terms__c--method-mail,
.cap-terms__table thead .cap-terms__c--method-store { width: 34px; }
.cap-terms__table thead .cap-terms__c--shipping-fee { width: 60px; }
.cap-terms__table thead .cap-terms__c--payout-days-min { width: 68px; }

.cap-terms__table tbody tr + tr > * { border-top: 1px solid var(--hairline-soft); }

/* 業者名(業者ページへ)。押せる高さ 44px。業者ページが無い業者は span で文字だけ */
.cap-terms__name > a,
.cap-terms__name > span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 3px 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
  /* 折れるときは 2 行の長さをそろえる(1 文字だけ次の行に残さない) */
  text-wrap: balance;
}

.cap-terms__c {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ○ × — は列の中央。送料・入金は頭をそろえる(左) */
.cap-terms__table .cap-terms__c--method-mail,
.cap-terms__table .cap-terms__c--method-store {
  padding-left: 0;
  text-align: center;
}

/* 「条件付き無料」は語の間(wbr)だけで 2 行に折る(nowrap だと WebKit は wbr でも折らない) */
.cap-terms__c--shipping-fee {
  white-space: normal;
  word-break: keep-all;
}

/* 「最短 5 日」の空白を詰めて 1 行に(語は変えない) */
.cap-terms__c--payout-days-min { word-spacing: -0.12em; }

.cap-terms__table .cap-terms__c.is-good { font-weight: 700; color: var(--ink); }
/* × は読める濃さ(--muted。白地で 4.8:1)、— は空欄の印なので薄く */
.cap-terms__table .cap-terms__c.is-no { color: var(--muted); }
.cap-terms__table .cap-terms__c.is-na { color: var(--faint); }

/*
 * 4 項目とも未確認の業者: 4 マスを 1 つにして「条件は未確認」を 1 回だけ。
 * 宅配の列の頭から左ぞろえ(中央ぞろえだと、どの幅でも送料の列の中に来て「送料 = 未確認」と読めた)
 */
.cap-terms__table .cap-terms__none {
  font-size: 12.5px;
  color: var(--muted);
}

/* 広い置き場だけ見せる見出しの語(「宅配買取」の「買取」・「入金まで」の「まで」)。狭い幅でも HTML には残る */
.cap-terms__wide { display: none; }

/*
 * 畳む(容量ページ。JS があるときだけ上位 10 社、幅 1023px まで = タブレット・スマホは上位 5 社。2026-09-25 の運営者の指示)。
 * どの行を隠すかとボタンの「残り N 社」は幅で CSS が出し分ける(JS は開け閉めだけ。applesama_render_shop_terms_table())
 */
.cap-terms.is-folded [data-terms-rest] { display: none; }

/* 「1023px まで」は min-width: 1024px の否定で書く(max-width: 1023px だと拡大率 125% の幅 1023.2px でどちらにも当たらない) */
@media not all and (min-width: 1024px) {
  .cap-terms.is-folded [data-terms-rest-sm] { display: none; }
  /* 幅ごとの文が 2 つあるときだけ、広い幅の文を隠す(1 つだけならどの幅でもそれを出す) */
  .cap-terms__n-lg:not(:only-child) { display: none; }
}

@media (min-width: 1024px) {
  /* 1024px 以上では畳まない社数(12 社以下)のとき、ボタンは狭い幅だけ */
  .cap-terms__more.cap-terms__more--sm { display: none; }
  .cap-terms__n-sm { display: none; }
}

.cap-terms__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 12px 0 14px;
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  background: transparent;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.cap-terms__more[hidden] { display: none; }

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

.cap-terms.is-folded .cap-terms__chev { transform: none; }

/* 外した項目(出張・査定料・返送料・店舗の所在など)は /shops/ の比較へ */
.cap-terms__all {
  margin: 0;
  padding: 11px 12px 13px 14px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.cap-terms__all a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

/* リンクの文は「・」の後でだけ折る(inline-block だと下線が消えるので nowrap の inline) */
.cap-terms__seg { white-space: nowrap; }

@media (hover: hover) {
  .cap-terms__table tbody tr:hover > * { background: var(--card-2); }
  .cap-terms__name > a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .cap-terms__more:hover,
  .cap-terms__all a:hover { color: var(--ink); }
}

/*
 * 置き場 350px 未満(385px 以下の端末): さらに詰める。
 * 境目を 350px にしたのは、340〜349px(376〜385px の端末)で既定の組み方に戻すと業者名の列が 11px 狭まり、
 * 「トゥインクルモバイ / ル」と折れたため(画面を広げると名前の列が狭まる逆転。2026-09-24 の検証)
 */
@container (max-width: 349px) {
  .cap-terms__table tr > :first-child { padding-left: 10px; }
  .cap-terms__table tr > :last-child { padding-right: 10px; }
  .cap-terms__table thead .cap-terms__c--method-mail,
  .cap-terms__table thead .cap-terms__c--method-store { width: 30px; }
  .cap-terms__table thead .cap-terms__c--shipping-fee { width: 58px; }
  .cap-terms__table thead .cap-terms__c--payout-days-min { width: 66px; }
  .cap-terms__name > a,
  .cap-terms__name > span { font-size: 12.5px; }
  .cap-terms__more,
  .cap-terms__all { padding-left: 10px; padding-right: 10px; }
}

/* 置き場 480px 以上(タブレット・PC・機種ページ): 列幅を割合に、見出しを「宅配買取」「入金まで」に */
@container (min-width: 480px) {
  .cap-terms__table th,
  .cap-terms__table td { padding-left: 8px; }
  .cap-terms__table tr > :first-child { padding-left: 16px; }
  .cap-terms__table tr > :last-child { padding-right: 16px; }

  .cap-terms__table thead th { font-size: 12px; }
  .cap-terms__table thead .cap-terms__c--method-mail,
  .cap-terms__table thead .cap-terms__c--method-store { width: 13%; }
  .cap-terms__table thead .cap-terms__c--shipping-fee { width: 20%; }
  .cap-terms__table thead .cap-terms__c--payout-days-min { width: 17%; }

  .cap-terms__wide { display: inline; }

  .cap-terms__name > a,
  .cap-terms__name > span { font-size: 14px; }

  .cap-terms__c { font-size: 13.5px; }

  .cap-terms__c--shipping-fee {
    white-space: nowrap;
    word-break: normal;
  }

  .cap-terms__c--payout-days-min { word-spacing: normal; }

  .cap-terms__more,
  .cap-terms__all { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------------------
   状態別のランキング(.cap-cond。U3-3 / 2026-09-22)

   **新品未開封の面(h1・容量タブ・答えのカード・.cap-rank)は触らない。**
   ここは .cap-rank__card の後ろに足す節だけ。
   表示ゲート(段ごと 3 社)を通った段しか出ないので、1〜2 社の段は DOM ごと無い。
   JS が無くても全部読める(全部 SSR・段へのリンクはページ内アンカー)。JS があるときだけ状態タブが段を入れ替え、一覧を畳む。
--------------------------------------------------------------------------- */
.cap-cond {
  margin-top: 18px;
}

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

/*
 * 段ごとの節(2026-09-24 夕方に作り直し。§3b #53)。節は入れ物だけで、一覧は新品未開封と同じ .cap-rank__card
 * (列の見出し「順位 / 業者 / 買取価格」+ 1 業者 1 行)。それまでは節そのものを白いカードにし、業者自身の段名のチップと
 * 行ごとの取得時刻を持つ別の作り(.cap-cond__row)だった。
 * JS 無しでは段が縦に並ぶので、節の見出し・定義文を一覧の上に出す。
 */
.cap-cond__sec {
  margin-top: 22px;
}

.cap-cond__sec > .cap-rank__card { margin-top: 10px; }

.cap-cond__h {
  margin: 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.cap-cond__n {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

/* 段の定義(手続き定義)。畳まない・本文より少し小さく。 */
.cap-cond__def {
  margin: 4px 2px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* 損傷の節から /iphone/damaged/ へ送る 1 行(2026-09-24 C-10)。定義文のすぐ下・一覧の上。
   定義文と違い JS で隠さない(condtabs.js が隠すのは .cap-cond__def だけ)。 */
.cap-cond__more {
  margin: 4px 2px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/*
 * タブで 1 段だけ見せているあいだ(condtabs.js が .cap-cond に is-tabbed を付ける)。
 * 見出し「業者別の買取価格ランキング(N社)」の直下に一覧が来るように、余白を新品未開封の一覧と同じにし、
 * 段の見出しは読み上げ用に残して見た目から隠す(タブ・h1 の副題・見出しの社数が段を言っている)。
 */
.cap-cond.is-tabbed,
.cap-cond.is-tabbed .cap-cond__sec,
.cap-cond.is-tabbed .cap-cond__sec > .cap-rank__card { margin-top: 0; }

.cap-cond.is-tabbed .cap-cond__more { margin: 0 2px 10px; }

/*
 * /iphone/used/ や業者ページの「ランキングに戻る」から #ranking-{段} で来たとき、ブラウザは節(= 一覧の上端)を画面の頭に置く。
 * 段の見出しは隠れているので、そのままだと見出し「業者別の買取価格ランキング(N社)」が画面の上に消え、何の一覧か分からない
 * (2026-09-24 夕方の検証)。見出しの分だけ手前で止める: 見出し 2 行(320〜360px)50px + 間 12px + 余白 10px
 */
.cap-cond.is-tabbed .cap-cond__sec { scroll-margin-top: 72px; }

.cap-cond.is-tabbed .cap-cond__h {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 業者が実際に使っている段の呼び名。applesama の区分と違うことがあるので、
   「これは業者の言葉である」と分かる見た目にする。
   2026-09-24 夕方から容量ページ・機種ページのランキングには出さない(§3b #53)。使うのは業者ページの中古の表(inc/shop-compare.php)。 */
.cap-cond__tier {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: var(--r-chip);
  background: var(--card-2);
  font-size: 11.5px;
  color: var(--muted);
}

/*
 * 業者の更新日が 30 日以上前の行(§3b #17)。母集合の一覧の**後ろ**に注記 1 行 + 行。
 * 1 位・「(N社)」・答えのカードには入っていないことを、注記と薄い価格で示す。
 */
.cap-rank__srcnote {
  margin: 0;
  padding: 8px 16px 4px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.cap-rank__row.is-src-stale .cap-rank__px {
  color: var(--muted);
}

/*
 * ランキングを畳む(2026-09-25 の運営者の指示。容量ページの新品未開封の一覧と段ごとの一覧)。
 * PC(1024px 以上)は上位 10 社、タブレット・スマホ(1023px まで)は上位 5 社。行は全部 HTML にあり、JS がカードに
 * is-folded を付けたときだけ隠す(JS 無しでは全社が見える)。ボタンの見た目は機種ページの .model-fold__btn.model-rank__fold と同じ
 * (機種ページは model.js が行を描いて隠す。数と文も同じ)
 */
.cap-rank__card.is-folded [data-rank-rest] { display: none; }

.cap-rank__fold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  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);
}

/* 状態タブで一覧(カード)が隠れたら、そのボタンも隠す(condtabs.js はカードに hidden を付ける) */
.cap-rank__fold[hidden],
.cap-rank__card[hidden] + .cap-rank__fold { display: none; }

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

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

@media not all and (min-width: 1024px) {
  .cap-rank__card.is-folded [data-rank-rest-sm] { display: none; }
  .cap-rank__fold-lg { display: none; }
}

@media (min-width: 1024px) {
  /* 8〜12 社の一覧は 1024px 以上では畳まない(残りが 3 社未満)ので、ボタンは狭い幅だけ */
  .cap-rank__fold.cap-rank__fold--sm { display: none; }
  .cap-rank__fold-sm { display: none; }
}

@media (hover: hover) {
  .cap-rank__fold:hover { color: var(--ink); }
}

/* ===========================================================================
   状態タブ(2026-09-22 の運営者の指示。容量タブの直下)
   ===========================================================================

   2026-09-21 の設計は「状態タブ禁止・1 画面目は 1px も変えない」だった。
   反証レビューが退けた理由(390px で溢れる・1024px の格子がずれる・
   390×667 で CTA が折り目の下に落ちる)は消えていないので:

     ① **折り返す**(横スクロールにしない。隠れたタブは押されない)
     ② 押せる高さ 44px(design/0916/verify.mjs が測る)
     ③ 390×667 で CTA が見えることを firstscreen.mjs で毎回測る

   容量タブ(白いカードの等分グリッド)とは**別の見た目**にする。同じ形にすると
   「容量を選んだつもりで状態を変えた」が起きる。 */

.cap-condtabs {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0 18px;
}

/* 「状態」の見出し。タブと同じ行に置き、1 行目のタブと高さを合わせる。 */
.cap-condtabs__k {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--faint);
}

.cap-condtabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.cap-condtabs__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* 指で押せる高さ */
  padding: 0 12px;
  border-radius: var(--r-chip);
  background: var(--card);
  box-shadow: var(--sh-flat);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.cap-condtabs__tab.is-active {
  background: var(--ink);
  box-shadow: none;
  color: var(--card);
}

/* 段の手続き定義。タブのすぐ下に本文より小さく。**畳まない**(法務の must と同じ扱い)。 */
.cap-condtabs__def {
  margin: 8px 0 0;
  padding: 0 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/*
 * 「3 社未満の状態は出していない」の 1 文(C-11 (3))。法務の注記の後ろ。
 * 色は定義文と同じ --muted(打消しの文なので読めることが要件。--faint #9aa0ab は地に対し約 2.5:1 で
 * WCAG AA の 4.5:1 に届かない。2026-09-24 のレビュー)。控えめさは 12px で出す。
 */
.cap-condtabs__note {
  margin: 4px 0 0;
  padding: 0 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/*
 * 〜699px: 状態タブを 1 行に収める(C-11 (4) / 運営者の決定 §3b #24。2026-09-24)。
 *
 * 6 段が 2 行(44 + 6 + 44px)に折り返し、390×667 で CTA の下端が 689px(折り目の 22px 下)に
 * 落ちていた。答えのカードは承認済みで触れないので、タブの側を詰める:
 *   - 「状態」の見出しをタブの**上**に小さく(横の 34px をタブに回す)
 *   - タブの文字は短形(「・」から後ろの .cap-condtabs__rest を隠す。読み上げ名は aria-label で正式名)
 *   - 左右の余白 12 → 6px、間 6 → 4px
 * 1 行の幅: 文字 234px + 6px × 12 + 4px × 5 = 326px ≤ 内容幅 354px(390)/ 339px(375)。
 * 320px では 2 行に折り返す(横スクロールにはしない。押せる高さ 44px は変えない)。
 * 700px 以上は今までどおり(見出しは横・正式名・12px)。
 */
.cap-condtabs__rest { display: none; }

@media (max-width: 699px) {
  .cap-condtabs {
    display: block;
    margin-top: 8px;
  }

  .cap-condtabs__k {
    display: block;
    min-height: 0;
    margin: 0 0 4px;
    font-size: 11.5px;
    line-height: 1.3;
  }

  .cap-condtabs__list { gap: 4px; }

  .cap-condtabs__tab { padding: 0 6px; }
}

/*
 * 正式名を見せるのは 700〜1023px と 1180px 以上。1024〜1179px は 2 列の格子で左の列が 540px しかなく、
 * 正式名の 6 段が 2 行に折り返す(「損傷・ジャンク」だけが 2 行目。2026-09-24 のレビューで実測)ので短形のまま。
 */
@media (min-width: 700px) and (max-width: 1023px), (min-width: 1180px) {
  .cap-condtabs__rest { display: inline; }
}

@media (hover: hover) {
  .cap-condtabs__tab:hover { color: var(--ink); }
  .cap-condtabs__tab.is-active:hover { color: var(--card); }
}

/* 769px 以上ではカードの左右の余白が外側に移るので、タブも合わせる(.cap-tabwrap と同じ行を見る) */
@media (min-width: 769px) {
  .cap-condtabs,
  .cap-condtabs__def,
  .cap-condtabs__note {
    padding-left: 0;
    padding-right: 0;
  }
}