/*!
 * applesama 業者ページ(/shop/{slug}/)と業者一覧(/shops/・ファイルの末尾の .buyers-*)— ソフトカード(2026-09-16〜)
 *
 * 読み込み順: main.css → top.css → capacity.css → hub.css → このファイル(業者ページと業者一覧だけ enqueue)。
 * デザインの正は design/0916/SOFT-SPEC.md(Claude Design のアートボード「A ソフトカード」の実寸)。
 * 色・角丸・影・書体は main.css の :root の変数を必ず経由する(px の寸法だけ直に書く)。
 * ここに書くのは、先に読み込む 4 ファイルの部品との差分だけ。新しいクラスは .buyer-* / .buyers-* だけ。
 *
 * 借りている部品:
 *   capacity.css … 土台(body.is-v13)・パンくず .cap-crumb・h1 .cap-h1・節 .cap-sec・見出し .cap-h2・
 *                  推移の線 .cap-chart・冒頭の 1 文 .cap-lede・他の機種のチップ .cap-models__list・折り返し止め .cap-nw
 *   top.css      … 答えのカード .top-answer(+ マス .top-cell)・一覧カード .top-card / .top-row・シリーズタブ .top-tabs
 *   hub.css      … /shops/ の h1 .hub-h1・メタ 1 行 .hub-meta・一覧の足のボタン .hub-foot
 *
 * 面の作り(全ページ共通): 白いカード(角丸 + 影)を左右 18px(769px 以上は 28px)の余白の中に置き、
 * カードの中は 1px の罫線で区切る。影と罫線は二重にしない(カードの外は影、中は罫線)。
 * 行の罫線やマスの地が角丸から飛び出すカードは overflow: hidden(押せる範囲がカードの外へ出る所は下の注意を読む)。
 *
 * 書体は Zen Kaku Gothic New 一本(main.css で --f-* が全部これを指す)。2 つの注意:
 *   - **等幅数字(tnum)が無い**。桁数で幅が変わるので、数値は右寄せか等分グリッドで受ける
 *   - **line-height: normal が約 1.44em**。行の高さを決めたい所は px か数値で明示する
 *
 * 幅:
 *   〜699px   1 列。左右 18px の余白の中にカードを置く(画面の端まで伸ばす負のマージンは使わない)
 *   700px〜   条件のマスを 1 段(マスの数だけ)。一覧のカードは段組み(top.css)
 *   769px〜   左右の余白 28px(capacity.css の .cap-main)
 *   1024px〜  .buyer-grid = 左 1fr | 右 400px。ランキングから = "head answer" "terms answer" "terms trend" "voices trend"
 *             指定なし = "head answer" "list answer" "list terms" "list voices"。追従しない
 */

/* ---------------------------------------------------------------- 全体 */
/* 作者の display 指定より hidden を優先する(畳む・口コミの切替)。範囲付き */
.buyer-fold [hidden],
.buyer-voices [hidden],
.buyers-terms [hidden] { display: none !important; }

/* ブラウザ既定の余白だけ消す(:where で詳細度 0。部品の margin を上書きしない) */
:where(.buyer-main) :where(dl, dd, p) { margin: 0; }

.buyer-ext {
  flex: 0 0 auto;
  display: inline-block;
  margin-left: 2px;
  vertical-align: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.buyer-chev {
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[aria-expanded="true"] > .buyer-chev { transform: rotate(180deg); }

/* ---------------------------------------------------------------- 答えのカード(top.css の .top-answer。容量ページと同じ場所・同じ形) */
/* スマホ〜768px は左右 18px の余白の中に置く(capacity.css の .cap-grid__answer と同じ) */
.buyer-grid__answer { margin: 16px 18px 0; }

/* 1 位でないときの 1 行目。最高値のときは容量ページと同じ .top-answer__best(19px/900) */
.buyer-answer__lead {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  color: var(--ink);
}

/*
 * 容量ページのメタ行は前日比(行 20px)を含み、業者ページは取得の時点だけ(行 19px)。
 * 実測(1440px・iPhone 17 Pro 512GB・最高値の店): この 1px を足すと答えのカードが容量ページと同じ 330.7px になり、
 * メタ行の位置(y=233)もそろう。足さないと 329.7px になり、カードの下(ランキングに戻る・推移)が 1px ずつ上がる。
 * ランキングの業者名から来た人には、同じ場所のカードが 1px も動かないことが大事なので残す。
 */
.buyer-answer .top-answer__meta { min-height: 20px; }

/* 3 マス(定価 / 差 / 率)の列の比を 2 マス(順位 / 最高値まで)に */
.buyer-answer__cells { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/*
 * マスが 1 つのときは 1 列にする。2 列のままだと、右半分がマスの隙間の地(--cell-gap)のまま残って灰色の塊に見える。
 *   .total-one       総合順から来たとき(順位を出さない = 価格の事実の 1 マスだけ。inc/shop-compare.php)
 *   :not(:has(…))    取得停止の「ランキング外」1 マス(:has を読めないブラウザでも上の .total-one は効く)
 */
.buyer-answer__cells.total-one,
.buyer-answer__cells:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }

/* 項目名に「15社中 · 4〜8位は同額」のような長い文が入る(マスの外へ出さずに折り返す) */
.buyer-answer__cells .top-cell__k { white-space: normal; }

/* 低い答えのカード(機種の指定なし): 題 → メタ → マス(売り方 / 送料 / 入金まで)→ CTA */
.buyer-answer--index .top-answer__meta { margin-top: 8px; }

.buyer-answer--index .buyer-answer__cells {
  grid-template-columns: repeat(var(--buyer-cells-n, 3), minmax(0, 1fr));
}

/* 値が数字でなく言葉(宅配・店頭 / 条件付き無料 / 即日)なので、価格のマスより少しだけ大きく折り返し可に */
.buyer-answer--index .top-answer__cells .top-cell__v {
  font-size: 16px;
  line-height: 1.35;
  white-space: normal;
  /* 「条件付き無料」を字の途中で割らない(テンプレートが「条件付き」の後に wbr を置く) */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* この店のその容量の行が 7 日より古い(取得停止): 値段を落とした色に(差は出さない。OPTIONS2 §1.8) */
.buyer-answer--stale .top-answer__px,
.buyer-answer--stale .top-answer__yen { color: var(--muted); }

/* 戻る(容量ページのランキングへ)。答えのカードの下の小さな白いボタン(2026-09-16 まで TOP にあった .top-hero__more と同じ形) */
.buyer-back {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  margin-top: 12px;
  padding: 0 16px;
  border-radius: var(--r-btn);
  background: var(--card);
  box-shadow: var(--sh-flat);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.buyer-back__icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  margin-top: -2px;
  color: var(--chev);
}

/* ---------------------------------------------------------------- 値動き(7 日以上は capacity.css の .cap-chart、2〜6 日はこの 1 行) */
.buyer-trend__short {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 12px;
  row-gap: 2px;
  min-height: 52px;
  padding: 12px 16px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-flat);
}

.buyer-trend__period {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
}

.buyer-trend__vals {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  column-gap: 8px;
  margin-left: auto;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

.buyer-trend__vals b {
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.buyer-trend__to {
  color: var(--faint);
  font-weight: 700;
}

.buyer-trend__dx {
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
}

.buyer-trend__dx.is-up { color: var(--up); }
.buyer-trend__dx.is-down { color: var(--down); }

/* ---------------------------------------------------------------- 売り方と条件(§1.4)。1 枚の白いカードを罫線で割る */
.buyer-terms__box {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  /* 行の罫線とマスの地を角丸で切る(押せる範囲は下の .buyer-terms__foot で箱の中に収めてある) */
  overflow: hidden;
}

/* 塊と塊の区切りは少し濃く、塊の中の行と行は薄く */
.buyer-terms__list + .buyer-terms__cells,
.buyer-terms__cells + .buyer-terms__list,
.buyer-terms__list + .buyer-terms__list,
.buyer-terms__foot { border-top: 1px solid var(--hairline); }

.buyer-terms__row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  min-height: 46px;
  padding: 12px 16px;
}

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

.buyer-terms__row dt {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

.buyer-terms__row dd {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.buyer-terms__row .buyer-terms__text {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

.buyer-terms__corp { font-weight: 700; }

.buyer-terms__sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
}

.buyer-terms__sub--kobutsu { font-size: 12px; }

.buyer-terms__stage { display: block; }
.buyer-terms__stage + .buyer-terms__stage { margin-top: 6px; }

/* 「宅配」「店頭」の札。枠線ではなく地の色の丸い札(main.css の .tag と同じ形) */
.buyer-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  vertical-align: 1px;
  color: var(--muted);
}

/*
 * 出典「公式 ↗」: 項目ごとに 1 つ・文の末尾。
 * 前の文との間は直前の .buyer-src-gap(空白 1 つ)で取る。margin-left だと行の頭に回ったときも 6px ずれる(空白は行の頭で消える)。
 * 押せる範囲は padding で 44px 前後に広げ、同じ量の負の margin で文字の位置と行の高さは変えない。
 */
.buyer-src-gap {
  font-size: 0;
  word-spacing: 6px;
}

.buyer-src {
  display: inline-block;
  padding: calc((44px - 1em) / 2) 6px;
  margin: calc((1em - 44px) / 2) -6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--chev);
  text-underline-offset: 3px;
  white-space: nowrap;
}

/*
 * マス(キャンセル料 / 返送料 / 送料 …): 値が上・項目名が下(dt → dd の順のまま column-reverse)。スマホは 3 列。
 * 帯の地を --card-2 にして、白いカードの中でわずかに沈めて見せる。マスの数が列で割り切れないとき(3 列 × 5 マスなど)も
 * 余った所が同じ地になるので、白い穴が空かない。区切りは 1px の罫線(マスの間に地を見せる gap は使わない)
 */
.buyer-terms__cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--card-2);
}

.buyer-terms__cell {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  min-width: 0;
  min-height: 58px;
  padding: 10px 6px 10px 12px;
  border-left: 1px solid var(--hairline);
}

.buyer-terms__cell:nth-child(3n + 1) {
  padding-left: 16px;
  border-left: 0;
}

/* 2 段になるときは 1 段目の下に線を引く(2 段目のマスが足りなくても線が途切れない) */
.buyer-terms__cells:has(> :nth-child(4)) > .buyer-terms__cell:nth-child(-n + 3) { border-bottom: 1px solid var(--hairline); }

.buyer-terms__cv {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}

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

/*
 * 下の端: 確認日 · 利用規約 ↗。
 * 下の padding 19px は「利用規約 ↗」の押せる範囲(文字の行の下へ 18.5px 出る。下の a を参照)を
 * カードの中に収めるための寸法。箱が overflow: hidden なので、これが足りないと押せる範囲が切られる。
 */
.buyer-terms__foot {
  padding: 12px 16px 19px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

/*
 * 利用規約 ↗: .buyer-src と同じく、押せる範囲だけ 44px 前後に(行の高さ 1.5em は変えない)。
 * 上の行の「公式 ↗」の押せる範囲と重ならないよう、上は 9px にして残り(11px × 1.5 で 18.5px)を下へ回す。
 */
.buyer-terms__foot a {
  display: inline-block;
  padding: 9px 6px calc(44px - 1.5em - 9px);
  margin: -9px -6px calc(1.5em + 9px - 44px);
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--chev);
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- 口コミ(§1.5。2026-09-16 常時表示のカード) */
/* Google のカードの列数は「節の幅」で決める(1024px〜 の左右どちらの列に入っても正しく 1 列 / 2 列になる) */
.buyer-voices { container-type: inline-size; }

.buyer-voices__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
}

.buyer-voices__links a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--chev);
  text-underline-offset: 4px;
}

/* 「口コミを見る」「X の投稿を見る」「他の機種・容量の価格を見る」: 全幅の白いボタン(枠線ではなく影で浮かせる) */
.buyer-voices__btn,
.buyer-fold__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--card);
  box-shadow: var(--sh-flat);
  color: var(--ink);
  font-family: var(--f-body);
  text-align: left;
  cursor: pointer;
}

.buyer-voices__label {
  font-size: 15px;
  font-weight: 700;
}

.buyer-voices__src {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.buyer-voices__btn[aria-expanded="true"] .buyer-voices__src { visibility: hidden; }

.buyer-voices__btn > .buyer-chev { color: var(--chev); }

.buyer-voices__btn + .buyer-voices__g,
.buyer-voices__btn + .buyer-voices__x { margin-top: 12px; }

.buyer-voices__g + .buyer-voices__btn,
.buyer-voices__links + .buyer-voices__btn { margin-top: 12px; }

/*
 * Google の枠(reviews-tech §1.5)。data-mode が auto なら節が画面に入ったとき、button なら押したときに assets/js/shop.js が REST から描く。
 * 上に Google Maps の公式ロゴ(assets/images/google-maps-logo-gray.svg・#5E5E5E。改変しない。高さ 18px・上左右 10px 以上・下 5px 以上の余白)
 * と総合評価(★ 4.6 (312 件) · 店舗名)、口コミごとに白いカード(投稿者のアイコン・名前(リンク)・★・相対日付・本文・Google マップの元の口コミ)、
 * 下に並び順の 1 行と「Google マップで口コミをもっと見る」。枠は白いカードではなく節そのもの(白の中に白を入れない)。
 */
.buyer-voices__g { min-width: 0; }

.buyer-gm__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  min-height: 28px;
  margin: 0 0 12px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2); /* 地の上の小さい文字は --muted だと 4.5:1 に届かない */
}

.buyer-gm__logo {
  display: block;
  flex: 0 0 auto;
  width: 98px;
  height: 18px;
  margin-right: 4px;
}

.buyer-gm__sumlabel {
  font-weight: 700;
  color: var(--ink);
}

.buyer-gm__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.buyer-gm__num {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.buyer-gm__count { font-size: 12px; }

.buyer-gm__stars {
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}

.buyer-gm__on { color: var(--star); }
.buyer-gm__off { color: var(--chev); }

/* 店舗名(業者名と違う店の口コミだと分かるように)。白い札にする(区切りの「·」は折り返した行の頭に出るのでやめた) */
.buyer-gm__place {
  min-width: 0;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--sh-flat);
  font-size: 12px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

/* 読み込み中の骨組み(カードと同じ形の白い面が 2 つ)。動きを減らす設定では点滅させない */
.buyer-gm__skel {
  display: grid;
  gap: 12px;
}

.buyer-gm__skel > span {
  display: block;
  height: 150px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-flat);
  animation: buyer-gm-pulse 1.6s ease-in-out infinite;
}

@keyframes buyer-gm-pulse {
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .buyer-gm__skel > span { animation: none; }
}

/* 状態(失敗)。読み込み中の文は読み上げ用だけ */
.buyer-gm__state {
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-flat);
}

.buyer-gm__state--sr {
  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;
}

.buyer-gm__state a,
.buyer-gm__src,
.buyer-gm__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--chev);
  text-underline-offset: 3px;
}

/* 失敗の 1 行の中のリンクは行の高さを変えず、押せる範囲だけ 44px(padding + 同量の負の margin) */
.buyer-gm__state a {
  min-height: 0;
  padding: calc((44px - 1.6em) / 2) 4px;
  margin: calc((1.6em - 44px) / 2) -4px;
}

/* 口コミのカードの格子: 節の幅 600px 以上で 2 列(下の @container) */
.buyer-gm__grid {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.buyer-gm__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 16px 10px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

.buyer-gm__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.buyer-gm__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  object-fit: cover;
  overflow: hidden;
}

.buyer-gm__whom { min-width: 0; }

.buyer-gm__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* 投稿者名のリンク: 行の高さは変えず、押せる範囲を 44px に(padding + 同量の負の margin) */
a.buyer-gm__name {
  padding: calc((44px - 1.4em) / 2) 0;
  margin: calc((1.4em - 44px) / 2) 0;
  text-decoration: underline;
  text-decoration-color: var(--chev);
  text-underline-offset: 3px;
}

.buyer-gm__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.buyer-gm__meta .buyer-gm__stars { font-size: 12px; }

.buyer-gm__tr::before {
  content: "·";
  margin-right: 8px;
  color: var(--chev);
}

.buyer-gm__text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: var(--ink-2);
}

/* 5 行で止め、最後の行を薄くして「＋ 続きを見る」に続ける */
.buyer-gm__text--clamp {
  max-height: calc(1.75em * 5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.buyer-gm__more {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: 13px;
  cursor: pointer;
}

/* 「＋」「－」(JS が aria-hidden の span で入れる。読み上げない) */
.buyer-gm__more-sign {
  margin-right: 2px;
  font-weight: 700;
  color: var(--muted);
}

/* 元の口コミへのリンク(必須の帰属)。カードの下端にそろえ、押せる範囲は 44px */
.buyer-gm__src {
  align-self: flex-start;
  margin-top: auto;
  font-size: 11px;
  color: var(--muted);
}

.buyer-gm__note {
  margin-top: 12px;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2); /* 地の上なので --muted より濃く(4.5:1) */
}

/* 「Google マップで口コミをもっと見る」: 白いボタン(hub.css の .hub-foot a と同じ形)。橙は「売る」専用 */
.buyer-gm__all { margin-top: 12px; }

.buyer-gm__allbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--r-btn);
  background: var(--card);
  box-shadow: var(--sh-flat);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.buyer-gm__allbtn-label { text-align: center; }

.buyer-gm__allbtn > .buyer-chev {
  flex: 0 0 auto;
  color: var(--chev);
  transform: rotate(-90deg);
}

@media (hover: hover) {
  .buyer-gm__allbtn:hover { box-shadow: var(--sh-card); }
}

/* 320〜359px: ボタンの文を 1 行に収める */
@media (max-width: 359px) {
  .buyer-gm__allbtn {
    padding: 0 12px;
    font-size: 13px;
  }
}

@container (min-width: 600px) {
  .buyer-gm__grid,
  .buyer-gm__skel { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .buyer-gm__all {
    display: flex;
    justify-content: center;
  }

  .buyer-gm__allbtn { min-width: 380px; }
}

/*
 * X の枠: 投稿ごと。X の部品(iframe)が自分の白い角丸カードを持ち込むので、こちらのカードと入れ子にしない。
 * 面を付けるのは読み込み中・失敗の 1 行だけ(こちらのカードで受ける)
 */
.buyer-voices__x {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.buyer-xp__post { min-width: 0; }

.buyer-xp__post > .buyer-gm__state {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-flat);
}

.buyer-xp__slot:empty { display: none; }

.buyer-xp__slot .twitter-tweet {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------- 他の機種・容量の価格(§1.6。畳む) */
.buyer-fold__btn {
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
}

.buyer-fold__btn > .buyer-chev { color: var(--chev); }

.buyer-fold__btn--older { margin-top: 4px; }

.buyer-fold__btn + .buyer-fold__body,
.buyer-fold__btn + .buyer-fold__older { margin-top: 12px; }

/* シリーズへのジャンプ(top.css の .top-tabs)。769px 未満でも角丸のカードにする(節の中に置く帯なので) */
.buyer-fold .top-tabs {
  margin-bottom: 4px;
  border-bottom: 0;
  border-radius: var(--r-card);
  box-shadow: var(--sh-flat);
  overflow: hidden;
}

/* 節の中に置くので、一覧カードの左右の余白は節(.cap-sec)の 18px だけにする */
.buyer-fold .top-cards { padding: 0; }

.buyer-fold__sh {
  margin: 24px 0 10px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
  font-feature-settings: "palt";
  color: var(--ink);
}

.buyer-fold__series:first-of-type .buyer-fold__sh { margin-top: 18px; }

.buyer-fold .top-card { margin: 0 0 13px; }

/* 今いる容量の行(ランキングから来たとき) */
.buyer-row--here {
  background: var(--card-2);
  box-shadow: inset 3px 0 0 var(--ink);
}

/* 一覧: この店の行が 7 日より古い容量(補足「08-21 取得」) */
.buyer-row--stale .top-row__px { color: var(--muted); }

/* 最高値の容量の札(SOFT-SPEC §4 の「最高値」バッジ) */
.buyer-row__best {
  display: inline-block;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--up-soft);
  color: var(--up);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
}

/*
 * ---------------------------------------------------------------- 中古の節(運営者の決定 §3b #23。2026-09-24。inc/shop-compare.php の applesama_render_buyer_used())
 * 見た目は上の「他の機種・容量の価格」(.buyer-fold)と同じ部品(.top-cards / .top-row / .buyer-fold__btn / .top-tabs)。
 * 差分は段の見出し(段の名前 + 業者自身の段名のチップ .cap-cond__tier〈capacity.css〉+ 容量の数)と、節の頭の 1 行と、末尾の送客だけ。
 * 中古だけの業者は格子の中(.buyer-grid > .buyer-fold = 1024px〜 は左の列)、新品も持つ業者は格子の外(ページの下)。
 */
.buyer-used__meta {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.buyer-used__meta + .buyer-fold__btn,
.buyer-used__meta + .buyer-used__body { margin-top: 12px; }

.buyer-used__sh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
}

.buyer-used__n {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.buyer-used__go {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.buyer-used__go a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- 冒頭 1 文・他の買取業者(capacity.css / hub.css の部品) */
.buyer-others .hub-foot { padding: 14px 0 0; }

/* ---------------------------------------------------------------- 狭い画面 */
@media (max-width: 375px) {
  /* 一覧の補足「最高値まで ¥27,500」は金額を省略させず、語のまとまりで 2 行に折り返す */
  .buyer-fold .top-row__sub {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }

  .buyer-terms__row { grid-template-columns: 70px minmax(0, 1fr); }
  .buyer-terms__cv { font-size: 13px; }
}

@media (max-width: 359px) {
  .buyer-fold .top-row__px { font-size: 22px; }

  .buyer-back { padding-left: 14px; padding-right: 14px; }
  .buyer-terms__cell { padding-left: 8px; padding-right: 4px; }
  .buyer-terms__cell:nth-child(3n + 1) { padding-left: 12px; }
  .buyer-terms__cv { font-size: 12px; }
  .buyer-voices__src { font-size: 11px; }
}

/* ---------------------------------------------------------------- 700px〜: マス 1 段 */
@media (min-width: 700px) {
  .buyer-terms__cells { grid-template-columns: repeat(var(--buyer-cells-n, 5), minmax(0, 1fr)); }

  .buyer-terms__cells:has(> *) > .buyer-terms__cell:nth-child(n) {
    padding-left: 12px;
    border-left: 1px solid var(--hairline);
    border-bottom: 0;
  }

  .buyer-terms__cells > .buyer-terms__cell:first-child {
    padding-left: 16px;
    border-left: 0;
  }
}

/* ---------------------------------------------------------------- 769px〜(左右の余白は capacity.css の .cap-main が 28px にする) */
@media (min-width: 769px) {
  .buyer-grid__answer {
    margin-left: 0;
    margin-right: 0;
  }
}

/*
 * ---------------------------------------------------------------- 1024px〜 左 1fr | 右 400px(追従しない)
 * HTML の順はスマホと同じ。行の 3 本目(ランキングから)/ 4 本目(指定なし)を 1fr にし、2 行をまたぐ部品が
 * 伸び縮みのある行を必ず含むようにする(含まないと、またぐ部品の高さが隣の行に割り振られて隙間ができる)。
 */
@media (min-width: 1024px) {
  .buyer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "head   answer"
      "terms  answer"
      "terms  trend"
      "voices trend";
    column-gap: 28px;
    align-items: start;
  }

  .buyer-grid__head { grid-area: head; min-width: 0; }

  .buyer-grid__answer {
    grid-area: answer;
    margin-top: 18px;
  }

  .buyer-grid > .buyer-trend { grid-area: trend; }
  /* 「利用規約 ↗」の押せる範囲は条件のカードの中に収めてある(下の節に覆われないので z-index は要らない) */
  .buyer-grid > .buyer-terms { grid-area: terms; }
  .buyer-grid > .buyer-voices { grid-area: voices; }
  .buyer-grid > .buyer-fold { grid-area: list; }

  .buyer-grid > .cap-sec { padding-top: 28px; }

  .buyer-grid--index {
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "head   answer"
      "list   answer"
      "list   terms"
      "list   voices";
  }

  /* 左 796px の条件: dt の列 120px */
  .buyer-terms__row { grid-template-columns: 120px minmax(0, 1fr); }

  /* 右 400px の列に入る条件(指定なし): dt を上に置く・マス 3 列 */
  .buyer-grid--index .buyer-terms__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .buyer-grid--index .buyer-terms__cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .buyer-grid--index .buyer-terms__cells > .buyer-terms__cell:nth-child(3n + 1) {
    padding-left: 16px;
    border-left: 0;
  }

  .buyer-grid--index .buyer-terms__cells:has(> :nth-child(4)) > .buyer-terms__cell:nth-child(-n + 3) { border-bottom: 1px solid var(--hairline); }

  .buyer-grid--index > .buyer-fold .buyer-fold__sh:first-child { margin-top: 18px; }
}

/* 1024〜1279px: 左の列 540px では条件のマスを 3 列 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .buyer-grid:not(.buyer-grid--index) .buyer-terms__cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .buyer-grid:not(.buyer-grid--index) .buyer-terms__cells > .buyer-terms__cell:nth-child(3n + 1) {
    padding-left: 16px;
    border-left: 0;
  }

  .buyer-grid:not(.buyer-grid--index) .buyer-terms__cells:has(> :nth-child(4)) > .buyer-terms__cell:nth-child(-n + 3) { border-bottom: 1px solid var(--hairline); }
}

@media (hover: hover) {
  .buyer-src:hover,
  .buyer-terms__foot a:hover { color: var(--ink); }
  .buyer-back:hover {
    box-shadow: var(--sh-card);
    color: var(--ink);
  }
  .buyer-voices__btn:hover,
  .buyer-fold__btn:hover { box-shadow: var(--sh-card); }
}

/*
 * ================================================================ 業者一覧 /shops/(ソフトカード)
 *
 * マークアップ: page-shops.php・inc/shop-compare.php(applesama_render_buyers_list() / applesama_render_buyers_terms())。
 * 使う部品: .cap-crumb .cap-h1 .hub-h1 .hub-meta .cap-sec .cap-h2 .cap-nw .buyer-fold__btn .buyer-chev .buyer-src。新しいクラスは .buyers-*。
 *
 * 幅:
 *   〜1023px  1 業者 1 行の白いカード(/iphone/ の .hub-list と同じ)。買取条件は 1 業者 1 塊
 *   1024px〜  **1 枚のカードを縦の罫線で 2 列に割る**(上から下へ詰めて右の列へ続ける。行の高さは左右でそろう)。
 *             どこから右の列かは PHP が .buyers-row--col2 を付けて教える(--buyers-rows は 1 列の行数)。
 *             買取条件は表。列が増えても画面を横スクロールさせないよう、器(.buyers-terms__body)の中だけで横に送る
 */
.cap-sec.buyers-sec { padding-top: 16px; }

/* ---------------------------------------------------------------- 1 業者 1 行 */
.buyers-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  /* 行の罫線が角丸からはみ出さないように */
  overflow: hidden;
}

.buyers-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name n"
    "meta meta";
  align-items: center;
  align-content: center;
  column-gap: 12px;
  padding: 4px 16px;
}

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

.buyers-row__name {
  grid-area: name;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  font-feature-settings: "palt";
  color: var(--ink);
}

.buyers-row__n {
  grid-area: n;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
}

.buyers-row__k,
.buyers-row__u {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.buyers-row__k { margin-right: 6px; }
.buyers-row__u { margin-left: 2px; }

/* 売り方 · 送料 · 入金まで(値のある物だけ・小さく) */
.buyers-row__meta {
  grid-area: meta;
  margin-top: -8px;
  padding-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.buyers-row__mk {
  font-weight: 400;
  color: var(--muted);
}

.buyers-row__dot { color: var(--chev); }

/* ---------------------------------------------------------------- 買取条件の比較(〜1023px: 1 業者 1 塊) */
.buyers-terms .buyer-fold__btn {
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
}

.buyers-terms .buyer-fold__btn + .buyers-terms__body { margin-top: 12px; }

/* 表(1024px〜)と塊(〜1023px)の両方を受ける器。面はこちらが持ち、表そのものは地も枠も持たない */
.buyers-terms__body {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

.buyers-cmp {
  display: block;
  width: 100%;
  border-collapse: collapse;
}

.buyers-cmp thead { display: none; }

.buyers-cmp tbody { display: block; }

.buyers-cmp tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 4px;
  padding: 2px 16px 12px;
}

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

.buyers-cmp th,
.buyers-cmp td {
  display: block;
  padding: 0;
  text-align: left;
}

.buyers-cmp tbody th {
  flex: 0 0 100%;
  font-weight: 700;
}

.buyers-cmp tbody th a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  font-feature-settings: "palt";
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--chev);
  text-underline-offset: 4px;
}

.buyers-cmp td {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  word-break: keep-all;
}

/* 項目名。表(1024px〜)では列の見出しになるので、塊では data-label から出す(この属性は消さない) */
.buyers-cmp td::before {
  content: attr(data-label);
  margin-right: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* 未確認の項目は塊では出さない(表では「—」) */
.buyers-cmp td.is-empty { display: none; }

/* 「条件付き / 無料」の改行は表(1024px〜)でだけ使う。塊では wbr で 1 行に入れば 1 行 */
.buyers-cmp__br { display: none; }

.buyers-cmp td.buyers-cmp__text {
  flex: 0 0 100%;
  font-size: 12px;
  font-weight: 400;
  word-break: normal;
  overflow-wrap: anywhere;
}

.buyers-cmp td.buyers-cmp__src {
  flex: 0 0 100%;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.buyers-cmp td.buyers-cmp__src::before { content: none; }

.buyers-cmp__date { margin-left: 8px; }

@media (hover: hover) {
  .buyers-row__name:hover {
    text-decoration: underline;
    text-decoration-color: var(--ink);
    text-underline-offset: 4px;
  }
  .buyers-cmp tbody th a:hover { text-decoration-color: var(--ink); }
  .buyers-terms .buyer-fold__btn:hover { box-shadow: var(--sh-card); }
  .buyers-cmp .buyer-src:hover { color: var(--ink); }
}

@media (max-width: 359px) {
  .buyers-row { padding-left: 12px; padding-right: 12px; }
  .buyers-row__name { font-size: 15px; }
  .buyers-row__n { font-size: 17px; }
}

/* ---------------------------------------------------------------- 769px〜 */
@media (min-width: 769px) {
  .cap-sec.buyers-sec { padding-top: 20px; }
}

/* ---------------------------------------------------------------- 1024px〜: 一覧は 1 枚のカードを 2 列に割る・買取条件は表 */
@media (min-width: 1024px) {
  .buyers-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--buyers-rows, 1), auto);
    grid-auto-flow: column;
  }

  /*
   * 右の列 = .buyers-row--col2(PHP が付ける列の頭)とそれ以降の行。縦の 1px で 1 枚の面を割る。
   * 列の頭は面の上端なので、行と行の区切り(border-top)は引かない
   */
  .buyers-row--col2,
  .buyers-row--col2 ~ .buyers-row { border-left: 1px solid var(--hairline); }

  .buyers-row + .buyers-row.buyers-row--col2 { border-top: 0; }

  .buyers-cmp { display: table; }
  .buyers-cmp thead { display: table-header-group; }
  .buyers-cmp tbody { display: table-row-group; }

  /*
   * 器の中だけで横に送る(列が増えてもページを横スクロールさせない)。
   * 下の 8px は「公式 ↗」の押せる範囲(最後の行で表の下へ 7px ほど出る)を器の中に収める分
   */
  .buyers-terms__body {
    padding-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .buyers-cmp tr {
    display: table-row;
    padding: 0;
  }

  .buyers-cmp th,
  .buyers-cmp td {
    display: table-cell;
    padding: 9px 6px;
    vertical-align: middle;
    text-align: center;
  }

  .buyers-cmp thead th {
    padding-top: 11px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--hairline);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: var(--faint);
    white-space: nowrap;
  }

  .buyers-cmp thead th:first-child,
  .buyers-cmp tbody th {
    padding-left: 16px;
    text-align: left;
    white-space: nowrap;
  }

  .buyers-cmp tbody th a {
    min-height: 40px;
    font-size: 14px;
  }

  .buyers-cmp td::before { content: none; }

  /*
   * 短い列(○× · 費用 · 入金まで)は折り返さず、「条件付き / 無料」だけ br で 2 行に固定する。
   * 自動の表組みで wbr の折り返しに任せると、WebKit と Chromium で列の幅が 4〜30px ずれる。
   * 幅が伸び縮みするのは店舗の所在の列だけになる
   */
  .buyers-cmp td:not(.buyers-cmp__text) { white-space: nowrap; }
  .buyers-cmp__br { display: inline; }

  .buyers-cmp td.is-empty {
    display: table-cell;
    font-weight: 400;
    color: var(--faint);
  }

  .buyers-cmp .buyers-cmp__text {
    min-width: 12em;
    text-align: left;
  }

  .buyers-cmp .buyers-cmp__src {
    padding-right: 16px;
    text-align: right;
    white-space: nowrap;
  }

  /* 「公式 ↗」の真下に来るので、押した指を下の「公式 ↗」(押せる範囲 44px)へ通す */
  .buyers-cmp__date {
    display: block;
    margin: 2px 0 0;
    pointer-events: none;
  }
}

@media (min-width: 1024px) and (hover: hover) {
  .buyers-cmp tbody tr:hover { background: var(--card-2); }
}