/*!
 * applesama TOP(ソフトカード・2026-09-16〜)と、V13 系ページが共有する部品。
 *
 * このファイルは TOP 専用ではない。functions.php が TOP / 容量ページ / 機種一覧 /iphone/ /
 * 業者ページ / 業者一覧 / 総合順の基準ページで読み込み、次の部品を共有している:
 *   .top-card / .top-row(一覧カードと容量行)・.top-answer(答えのカード)・.top-cell(マス)・
 *   .top-tabs(シリーズタブ)・.total-switch(並びの切り替え)
 * → ここを直すと 6 ページに効く。ページ固有の差分は capacity.css / hub.css / shop.css。
 *
 * デザインの正は design/0916/SOFT-SPEC.md(Claude Design のアートボード「A ソフトカード」の実寸)。
 * 色・角丸・影・書体は main.css の :root の変数を必ず経由する。
 *
 * 書体は Zen Kaku Gothic New 一本(main.css で --f-* が全部これを指す)。2 つの注意:
 *   - **等幅数字(tnum)が無い**。桁数で幅が変わるので、数値は右寄せか等分グリッドで受ける
 *   - **line-height: normal が約 1.44em**(Archivo は約 1.11em)。行の高さを決めたい所は px か数値で明示する
 *
 * マークアップ: front-page.php(SSR)と assets/js/top.js(まとめのカードの切替・1024px 以上の右の列の答えのカード)。
 */

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

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

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

/* ---------------------------------------------------------------- 本文 */
.top-main {
  display: block;
}

/* ページ主題の h1(小さく 1 行。デザインを主張しない) */
.top-h1 {
  margin: 0;
  padding: 14px 18px 0;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.top-module {
  padding-bottom: 20px;
  color: var(--ink);
  font-family: var(--f-body);
}

/* 作者の display 指定より hidden を優先する(チップ列・カード・黒帯の切替) */
.top-module [hidden] { display: none !important; }

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

/* ① シリーズタブ(白い面。選択中は下に 3px の赤い線) */
.top-tabs {
  display: flex;
  margin-top: 12px;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}

.top-tabs__tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 6px 11px;
  background: transparent;
  color: var(--faint);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
}

/* 下線は box-shadow で描く(border だと選択の切り替えで 3px 分の段差が出る) */
.top-tabs__tab.is-active {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--up);
}

/*
 * ② 選ぶカード(.top-select = タブ + 写真タイル + まとめの 1 行)。2026-09-16 の M2 / T1 / P1-R で全幅とも 1 枚の白いカード。
 * タイルは ALL(黒い四角)+ 機種(写真 + 機種名)を flex: 1 1 0 で等分(横スクロールは使わない)。
 * 寸法はスマホ(写真 40×49・文字 11px)。700px 以上は写真 60×74・文字 13.5px(下の「幅」)
 */
.top-select {
  margin: 12px 18px 0;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.top-select .top-tabs {
  margin: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
}

.top-chips {
  display: flex;
  padding: 0 2px;
}

.top-chips__chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 2px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.top-chips__chip.is-active {
  color: var(--ink);
  font-weight: 900;
}

.top-chips__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 49px;
}

/* <picture> は CSS の箱として高さを子に伝えない(CLAUDE.md の既知の罠) */
.top-chips__photo picture { display: contents; }

.top-chips__img {
  display: block;
  width: 40px;
  height: 49px;
  object-fit: contain;
}

/* ALL は写真の代わりに黒い角丸の四角。外の高さは写真にそろえる */
.top-chips__photo--all {
  width: 34px;
  height: 34px;
  margin: 7.5px 0;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* 機種名。選択中は下に 3px の赤い線(タブと同じ)。狭い画面では折り返してよい */
.top-chips__label {
  padding-bottom: 4px;
  text-align: center;
}

.top-chips__chip.is-active .top-chips__label { box-shadow: inset 0 -3px 0 var(--up); }

/* まとめのカード → 選ぶカードの最後の 1〜2 行(文字だけ。値はラベルの右) */
.top-select .top-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 14px;
  margin: 0;
  padding: 11px 14px 12px;
  border-top: 1px solid var(--hairline-soft);
  border-radius: 0;
  box-shadow: none;
}

.top-select .top-band__head {
  align-items: center;
  gap: 12px;
}

.top-select .top-band__title {
  font-size: 12px;
  letter-spacing: 0;
}

.top-select .top-band__count { font-size: 12px; }

.top-select .top-band__cells {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin: 0;
}

.top-select .top-band .top-cell {
  display: flex;
  flex-direction: row-reverse; /* HTML は 値 → ラベル。見せるのは ラベル → 値 */
  align-items: baseline;
  gap: 5px;
  padding: 0;
  border: 0;
}

.top-select .top-band .top-cell__v {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.top-select .top-band .top-cell__k {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
}

/*
 * 上段(.top-hero__main = h1・選ぶカード(.top-select = タブ・チップ・まとめのカード)| .top-hero__side = 右の答えのカード)。
 * 1023px までは 1 列で、右の列は出さない(1024px 以上だけ。下の「幅」)
 */
.top-hero__side { display: none; }

.top-body { padding-top: 16px; }

/*
 * ---------------------------------------------------------------- まとめ(前日比の集計・旧「黒帯」)
 * 2026-09-16 に 4 マスの大きな数字は廃止し、全幅で選ぶカードの最後の文字の行にした(上の .top-select .top-band*)。
 * HTML(見出し・件数・4 マス)は変えていないので、ここは土台の最小限だけ
 */
.top-band { margin: 0; }

/*
 * URL のハッシュでシリーズ・機種を開くとき、front-page.php のインラインスクリプトがハッシュを当て終わるまでモジュールを隠す
 * (<html> の top-hash は functions.php の head のスクリプトが付け、インラインスクリプトが外す)
 */
html.top-hash .top-module { visibility: hidden; }

.top-band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.top-band__title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
}

.top-band__count {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
}

.top-band__cells { display: flex; }

/* マス(答えのカードの 3 マス。まとめの 4 マスは .top-select .top-band .top-cell で文字の行にする) */
.top-cell {
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid var(--hairline);
}

.top-cell:first-child {
  padding-left: 0;
  padding-right: 10px;
  border-left: 0;
}

.top-cell__v {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}

.top-cell__v.is-up { color: var(--up); }
.top-cell__v.is-down { color: var(--down); }

.top-cell__k {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- 一覧カード */
.top-cards { padding: 0 18px; }

.top-card {
  margin: 0 0 13px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  /* 行の罫線が角丸からはみ出さないように */
  overflow: hidden;
}

/*
 * 見出し: 左に h2「iPhone 17 Pro Max」(「iPhone」は小さく灰色)+ その下に機種ページへの「買取比較 →」、右に機種の写真。
 * 写真は 60×74(元画像 300×372 と同じ比。白背景の JPEG なので白いカードの上で縁が出ない)。
 * 「買取比較 →」は文字の位置を変えずに padding + 負 margin で押せる高さ 44px にする
 */
.top-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 6px 16px;
}

.top-card__title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.top-card__name {
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
  /* 320px 未満・Web フォントが読めないときに写真をカードの外へ押し出さない */
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-card__series {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.top-card__detail {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  padding: 12px 0;
  margin: -10px 0 -12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.top-card__photo {
  flex: 0 0 auto;
  display: block;
  width: 60px;
  height: 74px;
}

/* <picture> は CSS の箱として高さを子に伝えない(CLAUDE.md の既知の罠) */
.top-card__photo picture { display: contents; }

.top-card__img {
  display: block;
  width: 60px;
  height: 74px;
  object-fit: contain;
}

/* 買取受付前(価格の無い機種): 容量表記は 1 つずつ容量ページへのリンク */
.top-card__pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--hairline);
}

.top-card__gbs {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.top-card__gbs a { color: inherit; }

.top-card__status {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--warn);
  white-space: nowrap;
}

/* 容量行(容量ページへの普通のリンク。JS の有無で変わらない) */
.top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 13px 16px;
  border-top: 1px solid var(--hairline-soft);
  color: var(--ink);
  text-align: left;
}

/* 見出しのすぐ下の 1 本目だけ、少し濃い罫線 */
.top-card__head + .top-row { border-top-color: var(--hairline); }

.top-row__gb {
  flex: 0 0 auto;
  min-width: 58px;
  font-size: 15px;
  font-weight: 700;
}

.top-row__sub {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500; /* 400 だと Windows の ClearType で細く別の書体に見える(運営者の指摘 2026-09-16) */
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-row__price {
  flex: 0 0 auto;
  text-align: right;
}

.top-row__px {
  display: block;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

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

.top-row__dx.is-up { color: var(--up); }
.top-row__dx.is-down { color: var(--down); }

.top-row__chev {
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: var(--chev);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .top-row:hover .top-row__chev { stroke: var(--muted); }
  .top-card__detail:hover,
  .top-card__gbs a:hover { color: var(--ink); }
}

/* ---------------------------------------------------------------- 答えのカード(最高値。TOP は 1024px 以上の右の列・容量ページと業者ページは 1 画面目) */
.top-answer {
  padding: 21px 20px 20px;
  background: var(--card);
  border-radius: var(--r-card-lg);
  box-shadow: var(--sh-raised);
  color: var(--ink);
}

/*
 * 文字の行の高さは px で固定する。line-height: normal はブラウザがフォントの値から決めるので、
 * 1024px 以上の 2 列で左右の釣り合いが環境ごとにずれる(Firefox は Zen Kaku で 5px 高い)
 */
.top-answer__title {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 21px;
  color: var(--muted);
}

.top-answer__best {
  margin: 0 0 13px;
  font-size: 19px;
  font-weight: 900;
  line-height: 27px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.top-answer__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
}

.top-answer__yen {
  font-size: 23px;
  font-weight: 700;
  line-height: 30px;
  color: var(--muted);
}

.top-answer__px {
  font-size: 46px;
  font-weight: 900;
  line-height: 46px;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.top-answer__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
}

.top-answer__n {
  font-size: 13px;
  line-height: 19px;
  color: var(--muted);
}

.top-answer__sep {
  width: 1px;
  height: 13px;
  background: var(--border);
}

.top-answer__dx {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 20px;
  color: var(--muted);
}

.top-answer__dx.is-up { color: var(--up); }
.top-answer__dx.is-down { color: var(--down); }

/*
 * TOP の答えのカード(top.js が描く)だけ: 価格と前日比の左に対して、右に機種の写真 88×109(一覧カードの 60×74 と同じ画像)。
 * 写真の下端を前日比の行にそろえる。容量ページ・業者ページの答えのカードには無い
 */
.top-answer__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.top-answer__lead { min-width: 0; }

.top-answer__photo {
  flex: 0 0 auto;
  display: block;
  width: 88px;
  height: 109px;
  margin-bottom: -4px;
}

.top-answer__photo picture { display: contents; }

.top-answer__img {
  display: block;
  width: 88px;
  height: 109px;
  object-fit: contain;
}

/*
 * 答えのカードの中の 3 マス(定価 / 定価との差 / 買取率)。
 * 1px の隙間を地の色で見せる作り(gap + 親の背景)。等分にして、数字の幅に頼らない
 * (Zen Kaku は等幅数字が無いため)
 */
.top-answer__cells {
  display: grid;
  /*
   * 列は「マスの数だけ」作る。repeat(3, 1fr) だと、マスが 2 つ以下のとき
   * 余った列が隙間の地(--cell-gap)の灰色の塊として残る
   * (総合順のとき・取得停止の店・発売前の容量で実際に起きる)
   */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: 16px;
  padding-top: 0;
  background: var(--cell-gap);
  border-radius: var(--r-cell);
  overflow: hidden;
}

.top-answer__cells .top-cell {
  padding: 12px 8px;
  border-left: 0;
  background: var(--card-2);
  text-align: center;
}

.top-answer__cells .top-cell:first-child {
  padding-right: 8px;
}

.top-answer__cells .top-cell__v {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.top-answer__cells .top-cell__k {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--muted);
}

/* マスは「ラベル → 値」の順に見せる(HTML は 値 → ラベル) */
.top-answer__cells .top-cell {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
}

.top-answer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  margin-top: 16px;
  padding: 0 18px;
  border-radius: var(--r-btn);
  background: var(--cta);
  color: var(--cta-ink);
}

.top-answer__cta-label {
  font-size: 16px;
  font-weight: 700;
}

.top-answer__cta-icon {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .top-answer__cta:hover { background: #f04f16; }
}

/*
 * 定価の注記(2026-09-25 運営者の決定)。「※ 定価 ¥112,800(発売時 ¥134,800・2024年9月に変更)」。
 * 発売後に定価が変わった容量だけに出る。マスの中は狭く(390px で 88px)、マスの下に置くと 390×667 で
 * ボタンが折り目の下に落ちる(余裕 11px)ので、ボタンの下に置く。行の高さは px で固定(Zen Kaku の normal は約 1.44em)
 */
.top-answer__list {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}

/* 価格の無いシリーズ・機種(発売前の iPhone 18 など): 「買取受付前」だけのカード */
.top-answer__status {
  margin: 8px 0 0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--ink);
}

/*
 * ---------------------------------------------------------------- 並びの切り替え(総合順 | 高値順 + 基準。inc/total-order.php)
 * 管理画面のスイッチがオンのときだけ出る。TOP・容量ページで同じ部品。
 * 2 つの <a href>。選んでいる方は黒地に白字、押せる高さ 44px
 */
.total-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
}

.total-switch__tabs {
  display: flex;
  padding: 3px;
  border-radius: var(--r-chip);
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--border);
}

.total-switch__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.total-switch__tab.is-active {
  background: var(--ink);
  color: #fff;
}

/* 文字は小さいまま、左右の padding と同じ幅の負の margin で押せる幅を 44px にする(文字の位置は変えない) */
.total-switch__about {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 10px;
  margin-inline: -10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

/*
 * 総合順の先頭が最高値でないときの、答えのカードの「最高値 ¥」(高値順のランキングへ)。
 * 押せる高さを 44px にし、上下 12px の負の margin でメタ行の高さ(20px)は変えない
 */
.top-answer__dx.total-max {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -12px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .total-switch__tab:not(.is-active):hover { color: var(--ink); }
  .total-switch__about:hover { color: var(--ink); }
  .top-answer__dx.total-max:hover { text-decoration-color: currentColor; }
}

/* TOP の置き場所: 一覧の上(まとめのカードの下)。左右はカードと同じ */
.top-body > .total-switch { padding: 0 18px 14px; }

/*
 * ---------------------------------------------------------------- 最新ニュース
 * 699px まで(スマホ): .frame の白いカードの中に、サムネ 96×60 + カテゴリ + 題 + 日付 の行 × 3(2026-09-16 M2)。
 * HTML は 画像 → カテゴリ → 日付 → 題 の順(main.css の .news-list は 日付 | 題 の格子)。ここで格子を組み直す。
 * 700px 以上は画像つきの 3 枚のカード(下の「幅」)
 */
.top-news { margin-top: 28px; }

.top-news .news-list { padding: 0 0 4px; }

.top-news .news-list__item a {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  padding: 12px 0;
}

.top-news__media {
  grid-column: 1;
  grid-row: 1 / 4;
  display: block;
  position: relative;
  width: 96px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-2);
}

.top-news__media img,
.top-news__media .nxph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* アイキャッチが無い記事のプレースホルダー(news.css は TOP で読まないので最小限) */
.top-news__media .nxph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.top-news__media .nxph__cat { display: none; }

.top-news__cat {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  justify-self: start;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
}

/* 特価(deal)を最新ニュースに混ぜたときのバッジの箱(2026-09-18)。
   カテゴリのピル 1 つ分の場所に置く。中身は「特価」だけ
   (「PR」は同日に外した。出すのは広告リンクそのものだけ。docs/AFFILIATE.md §4)。
   TOP は news.css を読み込まないので、バッジの見た目はここに持つ。 */
.top-news__badges {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 5px;
}

.top-news__badges .top-news__cat {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
}

/* 「特価」は緑。**news.css の --nx-cat-sale と同じ #15803d** に揃える
   (ニュース面のバッジと色が違うと別物に見える)。値を変えるときは両方直す。
   価格の上下(--up / --down)とは別の意味づけなので、それらのトークンは使わない。 */
.top-news__cat--sale {
  background: #15803d;
  color: #fff;
}

/* 「PR」バッジは 2026-09-18 に一覧から外した(運営者)。出すのは広告リンクそのもの
   (記事末尾の .nxbuy__pr / .nxgift__pr)だけ。docs/AFFILIATE.md §4 */

/* 箇条書きの行(4 本目以降)に置くとき。**題の <span> の中・文の後ろ**に置く。
   行の別の flex 子にすると題の桁を 21〜40% 削って 320〜480px で折り返しが 3〜4 行に増え、
   さらに下の @media のカード用の指定を拾ってベースラインから 7〜10px 落ちた
   (2026-09-18 の検証で確認)。**文の流れに乗せる**のが正解なので inline-flex のまま
   grid / flex の指定を全部打ち消し、下の @media でも上書きされないように
   カード側のセレクタを .news-list__item 配下に絞ってある。 */
.top-news__badges--row {
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  justify-self: auto;
  /* 左だけ空ける(題の文字に接しないように)。縦の margin は 0
     — 700px 以上のカード用の margin-top 12px を拾うと行の高さが増える */
  margin: 0 0 0 6px;
  gap: 4px;
  /* 文字のベースラインにそろえる。inline-flex の箱は既定で中身のベースラインに乗るが、
     ピルの padding のぶん下がって見えるので少しだけ持ち上げる */
  vertical-align: -0.05em;
  white-space: nowrap;
}

.top-news__badges--row .top-news__cat {
  /* 700px 以上の `.top-news__cat { margin: 12px 14px 0 }`(カード用)を打ち消す。
     これが残ると行の高さが 7px 増える(2026-09-18 の検証で確認) */
  margin: 0;
  padding: 1px 6px;
  font-size: 10px;
}

.top-news .news-list__title {
  grid-column: 2;
  grid-row: 2;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.top-news .news-list__date {
  grid-column: 2;
  grid-row: 3;
  font-size: 11.5px;
  color: var(--faint);
}

/* 4 本目からの見出しだけの箇条書き(日付 + 題)。スマホは 3 本の下に罫線で続ける */
.top-news__more {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  border-top: 1px solid var(--hairline);
}

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

.top-news__more-item a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  color: var(--ink);
}

.top-news__more-date {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--faint);
  white-space: nowrap;
}

.top-news__more-title {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
}

@media (hover: hover) {
  .top-news__more-item a:hover .top-news__more-title { color: var(--muted); }
}

/* ---------------------------------------------------------------- 幅 */
/*
 * 699px まではスマホの画面。広い画面では 1 列を中央に置くだけだと左右が空くので、次の 3 段で並べ方を変える。
 * マークアップは幅で変えない(front-page.php)。
 *
 *   700px〜   タブレット(2026-09-16 の T1): h1 22px、写真タイルを 60×74 に、一覧カードを段組み(column-width 336px。機種チップで 1 枚だけのときは
 *             段組みにしない)、容量行の「N社中 最高 業者名」は 3 行まで折り返す、最新ニュースは画像つきの 3 枚のカード
 *   769px〜   左右の余白を 18px → 28px(ヘッダー・.frame・フッターと同じ)
 *   1024px〜  PC 版(2026-09-16。design/0916/pc-top/ の P1-R + S1): h1 32px、その下を 左 = 一覧カード 2 段 | 右 = 答えのカード
 *             (320px。1280px 以上は 380px)。選ぶカード・ニュースは 700px〜 と同じ部品
 *
 * 右の列を出す境目(1024px)は、この下の @media (min-width: 1024px) と top.js の HERO_QUERY。変えるときは両方。
 */

@media (min-width: 700px) {
  /*
   * 一覧カードの段組み。カードは inline-block にする(block + margin だと、WebKit が段の切れ目で下マージンを捨てずに
   * 次の段の頭へ持ち越し、2 段目以降が下がって段の釣り合いも崩れる)。
   * 影が段の境目で切れないよう、段の間(column-gap)は影の広がり(18px)より広く取る
   */
  .top-cards {
    column-width: 336px;
    column-gap: 22px;
    padding: 0 18px;
    orphans: 1;
    widows: 1;
  }

  /*
   * 段の間隔(18px)は下マージンではなく **透明の下ボーダー** で作る。WebKit(Safari と、iPad / iPhone の Chrome も同じエンジン)は
   * 段の切れ目で最後のカードの下マージンを次の段の頭へ持ち越し、2 段目以降が 20px 下がる(2026-09-16 に iPad mini で実際に起きた。
   * inline-block でも、上マージンにしても残る)。ボーダーはカードの箱の一部なので持ち越されない。
   * ボーダー(18px)が角丸(16px)より太いと白い面の下の角が四角くなるので、白い面と角丸はカードではなく子(見出し・容量行)に持たせ、
   * 影は描かれた形に沿う filter: drop-shadow(--ds-card)にする(box-shadow だと透明のボーダーの外側に付く)。overflow: hidden は要らない
   */
  .top-card {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0;
    border-bottom: 18px solid transparent;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    filter: var(--ds-card);
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .top-card > * { background: var(--card); }

  .top-card > :first-child { border-radius: var(--r-card) var(--r-card) 0 0; }

  .top-card > :last-child { border-radius: 0 0 var(--r-card) var(--r-card); }

  /*
   * 機種チップで 1 枚だけ見えるとき(front-page.php のインラインスクリプトと top.js が付ける)は段組みをやめ、
   * カードを一覧の幅いっぱいにする。横に長くなるので「N社中 最高 業者名」は価格の隣に寄せる
   */
  .top-cards.is-single { columns: auto; }

  .top-cards.is-single .top-row__sub {
    padding-right: 8px;
    text-align: right;
  }

  /* h1 は 1 行の小さな文字から見出しらしい大きさに(1024px 以上は 32px) */
  .top-module .top-h1 {
    padding-top: 18px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.35;
  }

  .top-select { margin-top: 14px; }

  /* 写真タイルを PC と同じ寸法に(Apple 公式の iPhone ナビと同じ形) */
  .top-chips { padding: 0 8px; }

  .top-chips__chip {
    gap: 8px;
    padding: 14px 8px 12px;
    font-size: 13.5px;
  }

  .top-chips__photo {
    width: 64px;
    height: 74px;
  }

  .top-chips__img {
    width: 60px;
    height: 74px;
  }

  .top-chips__photo--all {
    width: 52px;
    height: 52px;
    margin: 11px 0;
    border-radius: 14px;
    font-size: 12px;
  }

  .top-chips__label {
    padding-bottom: 5px;
    white-space: nowrap;
  }

  .top-select .top-band { padding: 11px 16px 12px; }

  .top-select .top-band__title,
  .top-select .top-band__count,
  .top-select .top-band .top-cell__k { font-size: 12.5px; }

  .top-select .top-band .top-cell__v { font-size: 13px; }

  /*
   * 段組みの 1 段(302〜480px)では「N社中 最高 業者名」が 1 行に入らないことがあるので、3 行まで折り返す
   * (2 行 = 35px は行の高さの中に収まる。10 字の業者名〈トゥインクルモバイル〉が最高値のときだけ 3 行目を使い、その行が少し伸びる)。
   * 折り返しは空白の所を優先し(keep-all)、長い業者名だけ字の途中で折る(overflow-wrap)。容量と価格の間も少し詰める。
   * 1 段 400px になる 1280px 以上(JS あり)と、JS 無しの 1024px 以上(全幅の段組み)は 1 行に戻す(下)
   */
  .top-cards:not(.is-single) .top-row { gap: 8px; }

  .top-cards:not(.is-single) .top-row__gb { min-width: 52px; }

  .top-cards:not(.is-single) .top-row__sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.4;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* ---- 最新ニュース(700px〜): 画像つきの 3 枚のカード(地の上。.frame の白い枠はやめる) ---- */
  .top-news {
    margin: 36px 18px 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .top-news .frame__head { padding: 0 0 12px; }

  .top-news .frame__head h2 .idx { display: none; }

  .top-news .news-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
  }

  .top-news .news-list__item + .news-list__item { border-top: 0; }

  .top-news .news-list__item a {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* main.css の罫線のリストの baseline を戻す。stretch でないと画像の箱の幅が 0 になる */
    gap: 0; /* 699px までの格子の row-gap 4px を戻す(gap は flex にも効く) */
    height: 100%;
    padding: 0;
    background: var(--card);
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    overflow: hidden;
  }

  .top-news__media {
    width: auto;
    height: auto;
    aspect-ratio: 1.91 / 1;
    border-radius: 0;
  }

  .top-news__media .nxph { font-size: 11px; }

  .top-news__cat {
    align-self: flex-start; /* 縦の flex で横いっぱいに伸びない */
    margin: 12px 14px 0;
    padding: 3px 8px;
    line-height: 1.3;
  }

  /* 特価のバッジの箱も、カテゴリのピルと同じ位置・余白で置く(カードは縦の flex)。
     **必ず .news-list__item 配下に絞る**。絞らないと箇条書きの
     .top-news__badges--row にも当たって、バッジが題のベースラインから 7〜10px 落ち、
     その行だけ 6〜8px 高くなる(2026-09-18 の検証で確認) */
  .top-news .news-list__item .top-news__badges {
    align-self: flex-start;
    margin: 12px 14px 0;
  }

  /* 箱の中のピルの margin は**絞らない**(カードでも行でも 0 にしたい) */
  .top-news__badges .top-news__cat {
    margin: 0;
  }

  /* HTML は 日付 → 題。カードでは 題 → 日付 */
  .top-news .news-list__title {
    order: 1;
    display: block;
    margin: 6px 14px 0;
    font-size: 14px;
    line-height: 1.5;
  }

  .top-news .news-list__date {
    order: 2;
    margin: 6px 14px 14px;
    font-size: 11.5px;
  }

  /* 見出しだけの 5 本は 3 枚のカードの下に白いカードで */
  .top-news__more {
    margin-top: 16px;
    padding: 2px 18px;
    background: var(--card);
    border: 0;
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
  }

  .top-news__more-item a { padding: 12px 0; }

  .top-news__more-title { font-size: 14px; }
}

/* 左右の余白を 28px にする。タブは角丸のカードにする */
@media (min-width: 769px) {
  .top-h1 { padding: 20px 28px 0; }

  .top-module { padding: 0 28px 20px; }

  /* 上段の h1 はモジュールの内側なので、左右の余白はモジュールの 28px だけ */
  .top-module .top-h1 {
    padding-left: 0;
    padding-right: 0;
  }

  .top-tabs {
    border-bottom: 0;
    border-radius: var(--r-card);
    box-shadow: var(--sh-flat);
    overflow: hidden;
  }

  .top-select { margin-left: 0; margin-right: 0; }

  .top-news { margin-left: 28px; margin-right: 28px; }

  .top-cards { padding: 0; }

  .top-body > .total-switch { padding: 0 0 16px; }

  /* 最新ニュースの見出しが一覧(機種名 17px)より大きくならないように */
  .top-news .frame__head h2 { font-size: 20px; }
}

/*
 * 1024px 以上(PC):
 *   h1(32px)と選ぶカード(.top-select)は全幅。
 *   JS あり(html.top-js): .top-module を格子にして、その下を 左 = 一覧カード 2 段 | 右 = 答えのカード。
 *   .top-hero は display: contents(h1 側と右の列を格子の直接の子にするため。中身は div だけなので読み上げに影響しない)。
 *   JS 無し: 右の列は無く、一覧は全幅の段組み(column-width 350px)。
 */
@media (min-width: 1024px) {
  .top-module .top-h1 {
    padding-top: 26px;
    padding-bottom: 0;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.35;
  }

  .top-select { margin-top: 18px; }

  /* ---- 格子(JS あり): 上段は全幅、下は 左 = 一覧 | 右 = 答えのカード(1279px までは 320px、1280px 以上は 380px) ---- */
  .top-js .top-module {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
  }

  .top-js .top-hero { display: contents; }

  .top-js .top-hero__main {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
  }

  .top-js .top-body {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    padding-top: 0;
  }

  .top-js .top-hero .top-hero__side {
    display: block;
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  .top-body { padding-top: 22px; }

  /* 一覧: JS あり = 左の列に 2 段(段の間 22px を引いて、1024px で 1 段 302px・1279px で 430px、1280px 以上で 400px)。JS 無し = 全幅の段組み */
  .top-cards { column-width: 350px; }

  .top-js .top-cards {
    column-width: auto;
    column-count: 2;
  }

  /* JS 無し(全幅の段組み・1 段 400px 前後)は「N社中 最高 業者名」を 1 行に戻す(折り返しは 700px〜 の規則) */
  html:not(.top-js) .top-cards:not(.is-single) .top-row { gap: 10px; }

  html:not(.top-js) .top-cards:not(.is-single) .top-row__gb { min-width: 58px; }

  html:not(.top-js) .top-cards:not(.is-single) .top-row__sub {
    display: block;
    white-space: nowrap;
    line-height: normal;
  }

  /*
   * 機種チップで 1 枚だけのときは段組みをやめる。1279px までは左の列いっぱい(626〜881px。1 段の幅 302〜430px だと
   * 「N社中 最高 業者名」が右寄せ 1 行のまま切れる)、1280px 以上は 1 段と同じ幅(下の @media)
   */
  .top-js .top-cards.is-single {
    columns: auto;
    max-width: none;
  }

  /* ---- 最新ニュース: 700px〜 のカードを少し大きく ---- */
  .top-news { margin-top: 44px; }

  .top-news .frame__head { padding-bottom: 14px; }

  .top-news .news-list { gap: 22px; }

  .top-news__cat { margin: 14px 18px 0; }

  .top-news .news-list__item .top-news__badges { margin: 14px 18px 0; }

  .top-news__badges .top-news__cat { margin: 0; }

  .top-news .news-list__title {
    margin: 8px 18px 0;
    font-size: 16px;
  }

  .top-news .news-list__date { margin: 8px 18px 18px; font-size: 12px; }
}

/*
 * 1279px までの右の列(320px)では、答えのカードの「前日比 … | N 社を比較」が写真の横に入らない。
 * 写真を 72×89 に小さくし、メタの行は区切り線を消して折り返す(1280px 以上は 88×109 で 1 行)
 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .top-hero__side .top-answer__photo,
  .top-hero__side .top-answer__img {
    width: 72px;
    height: 89px;
  }

  .top-hero__side .top-answer__meta {
    flex-wrap: wrap;
    gap: 2px 10px;
  }

  .top-hero__side .top-answer__dx,
  .top-hero__side .top-answer__n { white-space: nowrap; }

  .top-hero__side .top-answer__sep { display: none; }
}

/* 1280px 以上は中身の幅が 1224px で一定(.page の最大幅)。右の列を 380px にして、一覧の 1 段は 400px(行の文字は 1 行に戻す) */
@media (min-width: 1280px) {
  .top-js .top-module { grid-template-columns: minmax(0, 1fr) 380px; }

  .top-js .top-cards:not(.is-single) .top-row { gap: 10px; }

  .top-js .top-cards:not(.is-single) .top-row__gb { min-width: 58px; }

  .top-js .top-cards:not(.is-single) .top-row__sub {
    display: block;
    white-space: nowrap;
    line-height: normal;
  }

  /* 機種チップで 1 枚だけのときは 1 段(400px)と同じ幅 */
  .top-js .top-cards.is-single { max-width: calc(50% - 11px); }
}

@media (min-width: 1024px) and (hover: hover) {
  .top-row:hover { background: var(--card-2); }
  .top-row__chev { transition: transform 0.12s ease-out; }
  .top-row:hover .top-row__chev { transform: translateX(2px); }
}

@media (min-width: 700px) and (hover: hover) {
  .top-chips__chip:not(.is-active):hover { color: var(--ink); }
  .top-news .news-list__item a:hover { box-shadow: var(--sh-raised); }
}

/* 375px 以下: 写真タイルの機種名を 10px に(6 本並ぶ 16 / 17 系の「Pro Max」「17e」が 1 行に入る)。320px では折り返す */
@media (max-width: 375px) {
  .top-chips__chip { font-size: 10px; }
}

/* ---------------------------------------------------------------------------
   価格の注記(.cap-caveat。U3-1 / 2026-09-22)

   法務の must。**畳まない・下へ動かさない・本文サイズ**で、答えのカードの
   直下・外側に 1 行置く(消費者庁「打消し表示に関する表示方法…留意点」)。
   運営者方針「SEO の要素は畳む・下へ・小さく」の**唯一の例外**(docs/DESIGN.md §7)。

   - 14.5px …「小さく」ではないが本文(16px)より控えめ。2 行に収める寸法
   - --ink …「薄い灰色にして読ませない」を避けるため **--muted は使わない**
   - 390px で 2 行に収まる(実測: 全角 41 字で 2 行)
   TOP(PC・1024px 以上)では top.js が [data-top-caveat] の中身を
   .top-answer の後ろに足す。スマホ・タブレットの TOP には答えのカードが無いので出ない。
--------------------------------------------------------------------------- */
.cap-caveat {
  margin: 10px 2px 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}

.cap-caveat a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* ================================================================ 「条件検索」のボタン(2026-09-26。inc/search.php の applesama_search_button())
   TOP の見出しの右と、容量ページのランキングの下。押すと「条件で買取業者を探す」のウィンドウ(find-dialog.js)。
   色は検索窓と同じ青緑(--find は main.css)。橙は「〇〇で売る」だけなので使わない。見た目は 32px、押せる範囲は 44px */
.find-open {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1.5px solid var(--find);
  border-radius: var(--r-find-field);
  background: var(--card);
  color: var(--find-deep);
  font: 900 13.5px/1 var(--f-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.find-open::after { content: ""; position: absolute; inset: -6px -4px; }
.find-open__icon { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.find-open[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.find-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (hover: hover) {
  .find-open:hover { background: var(--find); color: var(--card); }
}

/* TOP: 見出しの行の右端(見出しの高さを変えないよう 32px。見出しの左右の余白にそろえる) */
.top-headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.top-headrow .top-h1 { flex: 1 1 auto; min-width: 0; padding-right: 0; }   /* 右の余白は間(gap)とボタンの 18px で足りる(付けたままだと 365px 以下で見出しが 2 行に折れた) */
/* ボタンの真ん中を見出しの文字の行の真ん中にそろえる(運営者「見出しと同じ位置に」)。
   margin-bottom = (見出しの行の高さ − 32px) ÷ 2。マイナスのときは見出しの下へはみ出すだけで、行の高さ(= 1 画面目の位置)は変わらない */
.top-headrow .find-open { flex: 0 0 auto; margin-right: 18px; margin-bottom: -6px; }   /* 13px × 1.5 = 19.5px */

/* 347px 以下(Galaxy Fold のカバー画面・iPhone SE 初代)は虫めがねを外して文字だけ(見出しを 1 行に保つ) */
@media (max-width: 347px) {
  .top-headrow .find-open { padding: 0 7px; font-size: 13px; }
  .top-headrow .find-open__icon { display: none; }
}

@media (min-width: 700px) {
  .top-headrow .find-open { margin-bottom: -1px; }   /* 22px × 1.35 = 29.7px */
}

@media (min-width: 1024px) {
  .top-headrow .find-open { margin-bottom: 6px; }    /* 32px × 1.35 = 43.2px */
}

@media (min-width: 769px) {
  .top-module .top-headrow .find-open { margin-right: 0; }
}

/* 容量ページ: 見出しの 2 行目「買取価格比較(N社・状態)」の右端(TOP と同じ「条件検索」)。
   h1 の直後の高さ 0 の置き場(.cap-findtop)から上へ絶対配置する = 見出し・容量タブ・答えのカードを動かさない。
   ボタンの真ん中を 2 行目の真ん中にそろえる(bottom = (2 行目の行の高さ − ボタンの高さ) ÷ 2。1 行目の機種名の行に掛からないように少し下げている幅もある)。
   2 行目は状態タブで「(6社・開封済・未使用)」などに書き替わる。いちばん長い文でも、375px で右端 235px・320px で 227px なので、
   360px 以上は 虫めがね + 文字(95px)、359px 以下は文字だけ(69px)で重ならない */
.cap-findtop { position: relative; height: 0; }
.cap-findtop .find-open { position: absolute; right: 18px; bottom: -5px; min-height: 30px; padding: 0 8px; gap: 4px; }
.cap-findtop .find-open::after { inset: -3px -4px; }

@media (max-width: 359px) {
  .cap-findtop .find-open { bottom: -7px; min-height: 28px; padding: 0 7px; font-size: 13px; }
  .cap-findtop .find-open__icon { display: none; }
}

@media (min-width: 700px) {
  .cap-findtop .find-open { bottom: -5px; min-height: 32px; padding: 0 12px; gap: 6px; }
  .cap-findtop .find-open::after { inset: -6px -4px; }
}

@media (min-width: 769px) {
  .cap-findtop .find-open { right: 0; }
}

/* 1024px 以上は見出しと同じ格子の行(2 行目)の下端に置き場を置く(格子の行を増やさない) */
@media (min-width: 1024px) {
  .cap-grid .cap-findtop { grid-column: 1 / -1; grid-row: 2; align-self: end; }
  .cap-findtop .find-open { bottom: -4px; }
}

/* 容量ページ: ランキングの下。スマホは幅いっぱいの 48px */
.cap-rank__find { margin: 14px 0 0; }
.cap-rank__find .find-open { width: 100%; min-height: 48px; padding: 8px 12px; font-size: 14.5px; line-height: 1.35; white-space: normal; text-align: center; }
.find-open__sub { display: inline-block; }   /* 補足の「(送料・入金・店舗の場所)」は語の途中で割らず、ひとまとまりで次の行へ */

@media (min-width: 700px) {
  .cap-rank__find .find-open { width: auto; min-height: 44px; padding: 0 18px; }
}