@charset "UTF-8";

/* =========================================================
 * メルカリ人気プライズ（[mercari_grid] / [mercari_rank]）
 *
 * 本番CSS（server/cocoon-settings/additional-css-post45.css）は触らない。
 * このファイルだけで完結させる。
 *
 * 使う値はサイトの既存語彙に合わせる（2026-09-14 に実機とCSSを突合）:
 *   文字 #333 / 副文字 #777〜#888 / 罫 #eee・#ddd / 面 #fff・#f9f9f9
 *   注釈の地 #f5f5f7・角丸10px・赤 #d00
 *   濃色帯 #333（.prize-spec-card / .tb-monthly-table-wrapper と同じ）
 *   角丸 8px（カード）/ 3px（バッジ）
 *
 * **使わないもの**: グラデーション、ネオン、彩度の高い原色、
 * 淡色パステルの塗り分け、色つきの太い左線、英字の擬似ラベル。
 * いずれもサイトに前例が無く、汎用テンプレートの見た目になる。
 * ========================================================= */

/* 変数はこの4つの入れ物に定義する。**新しいセクションを足したらここにも足す**。
   忘れると var(--mc-red) が未定義になり、赤いはずの金額が黒いまま出る
   （エラーにならず黙って継承色に落ちるので気づきにくい。2026-09-14 に実際に踏んだ） */
.tb-mc-grid-wrap,
.tb-mc-rank-list,
.tb-mc-worth,
.tb-mc-bundle {
  --mc-ink: #333;
  --mc-sub: #888;
  --mc-line: #eee;
  --mc-edge: #ddd;
  --mc-band: #333;
  --mc-fill: #f9f9f9;
  /* サイトの注釈と同じ赤（.tb-prize-disclaimer .red / .prz-note と同値） */
  --mc-red: #d00;
  margin: 1.6em 0;
}

/* ---------------------------------------------------------
 * グリッド
 * ------------------------------------------------------- */

.tb-mc-grid-wrap .tb-mc-asof {
  margin: 0 0 .6em;
  font-size: 12px;
  color: var(--mc-sub);
  text-align: right;
}

.tb-mc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 600px) {
  .tb-mc-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tb-mc-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tb-mc-grid .tb-mc-cell {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mc-edge);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  text-decoration: none !important;
  color: var(--mc-ink);
}

.tb-mc-grid .tb-mc-cell:hover {
  border-color: #bbb;
}

.tb-mc-cell-img {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fafafa;
}

.tb-mc-cell-img img {
  width: 100%;
  height: 100%;
  /* フィギュアは縦長。cover だと頭が切れるので contain */
  object-fit: contain;
  display: block;
}

/* 順位バッジ（1〜3位）: 金銀銅のメダル。
 *
 * ここだけグラデーションを使う。**金属は実物が光の当たり方で明暗を持つ**ので、
 * 縁の濃い色・面の明暗・上端のハイライトは装飾ではなく「メダルの描写」。
 * 汎用テンプレートの青紫グラデとは別物という整理（利用者指摘「ちゃちい」2026-09-14）。
 *
 * **文字は白ではなく濃色**。明るい金に白文字だと 2.1:1 で WCAG AA を割る。
 */
.tb-mc-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: #3a3a3a;
  border: 2px solid #8c8c8c;
  background: linear-gradient(145deg, #f2f2f2 0%, #c9c9c9 46%, #9a9a9a 100%);
  /* 外の落ち影＋上端の内側ハイライトで、面に厚みを出す */
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .65);
}

/* 数字は白のふちどりで地のメダルから浮かせる。
   縁は -webkit-text-stroke を paint-order で fill の下に敷いて描く。
   こうすれば線が字を内側から削らないので、太さを保ったまま均一な縁になる。
   8方向の text-shadow だと影の隙間で角がえぐれ、縁の太さが周回で変わって
   拡大するとガタツく（A/B/C/D を実機で並べて比較 2026-09-14）。
   paint-order 未対応の環境には 12方向の text-shadow を残す（8方向では不均一）。
   translateY は光学補正。メダルは下半分が暗く落ち影もあるので、
   幾何中心に置くと数字が上に寄って見える（利用者指摘 2026-09-14）。
   4倍に拡大して 0 / .5 / 1 / 1.5px を目視比較し、1px を採用（1.5px は下がりすぎ）。 */
.tb-mc-badge-n {
  display: block;
  transform: translateY(1px);
  text-shadow:
    1.1px 0 0 #fff, .95px .55px 0 #fff, .55px .95px 0 #fff, 0 1.1px 0 #fff,
    -.55px .95px 0 #fff, -.95px .55px 0 #fff, -1.1px 0 0 #fff, -.95px -.55px 0 #fff,
    -.55px -.95px 0 #fff, 0 -1.1px 0 #fff, .55px -.95px 0 #fff, .95px -.55px 0 #fff;
}

@supports (paint-order: stroke) {
  .tb-mc-badge-n {
    text-shadow: none;
    -webkit-text-stroke: 2px #fff;
    paint-order: stroke fill;
  }
}

.tb-mc-badge--1 {
  color: #4a3500;
  border-color: #8a6508;
  background: linear-gradient(145deg, #ffeba6 0%, #ecc02c 46%, #b8860b 100%);
}

.tb-mc-badge--2 {
  color: #39414a;
  border-color: #78828c;
  background: linear-gradient(145deg, #fbfcfd 0%, #ccd4dc 46%, #98a2ab 100%);
}

.tb-mc-badge--3 {
  color: #4a2a10;
  border-color: #6f3f17;
  background: linear-gradient(145deg, #f6cfab 0%, #cd7f32 46%, #94551f 100%);
}

@media (max-width: 480px) {
  .tb-mc-badge {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
}

.tb-mc-cell-name {
  padding: 6px 8px 2px;
  font-size: 12px;
  line-height: 1.4;
  /* 2行で打ち止め。長いプライズ名でセルの高さがばらけないように */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 相場はセルの右下。**赤くするのは数字だけ**で、「相場：」と「円」は赤くしない
   （ランキングの相場パネルと同じ扱い・利用者要望 2026-09-14）。
   高安を赤青緑で塗り分けるのはやらない。サイトに前例が無く、
   一覧だけが「信号機」になって詳細と食い違う */
.tb-mc-cell-price {
  margin-top: auto;
  padding: 2px 8px 8px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: var(--mc-red);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.tb-mc-cell-plabel {
  margin-right: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--mc-sub);
}

.tb-mc-cell-yen {
  margin-left: 1px;
  font-size: 11px;
  font-weight: 400;
  color: var(--mc-ink);
}

/* 注釈: グレー角丸（prize-heading の .tb-prize-disclaimer / slide-data の
   .wp-swipe-note と同じ語彙）。大見出しのすぐ下に置く。
   一覧は全文が赤、ランキングは黒字で日付だけ赤（利用者要望 2026-09-14） */
.tb-mc-grid-wrap .tb-mc-note,
.tb-mc-rank-list .tb-mc-note,
.tb-mc-worth .tb-mc-note,
.tb-mc-bundle .tb-mc-note {
  margin: 0 0 1em;
  padding: 12px 14px;
  background: #f5f5f7;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--mc-ink);
}

.tb-mc-note-red {
  color: var(--mc-red);
  font-weight: bold;
}

/* 折りたたみ（21位以降）。<details> なのでJSも状態管理も要らない */
/* 折りたたみの存在感。
   白地に薄い罫だけだと背景に溶けて見落とされる（利用者指摘 2026-09-14）。
   基本の形（角丸の箱＋＋/−の四角＋件数）は変えず、
   帯に地色を入れて・影を薄く敷いて・文字を本文サイズにして「押せる帯」に見せる。
   グラデーション・信号色は使わない（§6.5） */
.tb-mc-grid-wrap .tb-mc-more {
  margin-top: 18px;
  border: 1px solid var(--mc-edge);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}

.tb-mc-grid-wrap .tb-mc-more[open] {
  padding-bottom: 12px;
}

.tb-mc-more-sum {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--mc-ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  /* 地色。白に近いと光が乗らないので、本文の白とはっきり差が出る濃さにする
     （#f9f9f9 に白を走らせても差は 2% しか無く、動いても見えない） */
  background: #eaeaf0;
  border-radius: 7px;
  transition: background .15s;
  /* 光を帯の中だけに収める。角丸にも追従させる */
  position: relative;
  overflow: hidden;
}

/* 斜めの光が一定間隔で走る（利用者要望 2026-09-14）。
 *
 * §6.5 で「グラデーションは使わない」としているが、これは**利用者の明示指示による例外**。
 * 装飾のためのグラデーションではなく「ここは開けます」という**動きの合図**で、
 * 畳んだ状態が見落とされるという指摘への答えなので残すこと。
 *
 * 実装の約束:
 * - 走るのは transform だけ（left/width を動かすとレイアウトが毎フレーム再計算される）
 * - `pointer-events: none`。summary の上に乗るのでクリックを食べさせない
 * - keyframes の後半を同じ値で止めて「走る→しばらく休む」を1周期にする。
 *   animation-delay を足す方式だと最初の1回しか間が空かない
 * - **開いている間は止める**。中身を読んでいる横で光り続けると鬱陶しい
 * - `prefers-reduced-motion` では出さない（動きが苦手な人向け。OSの設定を尊重する）
 */
.tb-mc-more-sum::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -35%;
  width: 30%;
  height: 220%;
  pointer-events: none;
  /* 芯は不透明の白。前後にごく薄い影を置くと、ただの白帯ではなく
     「表面を滑る映り込み」に見えて、同じ明度差でも認識されやすい */
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .022) 18%,
    rgba(255, 255, 255, 1) 50%,
    rgba(0, 0, 0, .022) 82%,
    rgba(0, 0, 0, 0) 100%);
  transform: translateX(0) rotate(18deg);
  /* 等速。ease だと端でもたついて「走った」感じが出ない。
     2.5s = 利用者要望で頻度を2倍にした値（2026-09-14）。
     頻度を変えるときは **キーフレームの割合も同じ比で直す**こと。
     割合を据え置くと走る速さまで倍になり、「頻度」ではなく「速さ」の変更になる */
  animation: tb-mc-shine 2.5s linear infinite;
}

@keyframes tb-mc-shine {
  /* 左端の外(-35%)から右端(100%)へ。30% 幅 × 450% = 帯の135%ぶん動く */
  0% { transform: translateX(0) rotate(18deg); }
  /* 1周期2.5秒のうち走るのは最初の1.1秒（44%）。
     残りは同じ値で止めて「間」を作る
     （animation-delay で間を作ると最初の1回しか効かない） */
  44% { transform: translateX(450%) rotate(18deg); }
  100% { transform: translateX(450%) rotate(18deg); }
}

/* 開いたら止める */
.tb-mc-grid-wrap .tb-mc-more[open] .tb-mc-more-sum::after {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tb-mc-more-sum::after {
    animation: none;
    opacity: 0;
  }
}

.tb-mc-more-sum:hover,
.tb-mc-more-sum:focus-visible {
  background: #e0e0e8;
}

/* 既定の三角を消して、自前の「＋／−」に置き換える */
.tb-mc-more-sum::-webkit-details-marker { display: none; }

.tb-mc-more-sum::before {
  content: '＋';
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 3px;
  background: var(--mc-band);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.tb-mc-grid-wrap .tb-mc-more[open] .tb-mc-more-sum::before { content: '−'; }

.tb-mc-grid-wrap .tb-mc-more[open] .tb-mc-more-sum {
  border-bottom: 1px solid var(--mc-line);
  border-radius: 7px 7px 0 0;
  margin-bottom: 12px;
}

/* 件数は白地の丸バッジにする。帯に地色が入ったので、
   素の小さい文字だと地に埋もれて数が読み取りにくい */
.tb-mc-more-n {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 2px 9px;
  background: #fff;
  border: 1px solid var(--mc-edge);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mc-ink);
}

.tb-mc-grid-wrap .tb-mc-more .tb-mc-grid {
  padding: 0 12px;
}

/* ---------------------------------------------------------
 * ランキング
 * ------------------------------------------------------- */

.tb-mc-rank-list .tb-mc-rank-item {
  border: 1px solid var(--mc-edge);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 1.6em;
  background: #fff;
}

.tb-mc-rank-list .tb-mc-rank-title {
  margin: 0 0 .7em !important;
  padding: 0 0 6px !important;
  font-size: 1.05em !important;
  line-height: 1.45;
  border: none !important;
  border-bottom: 1px solid var(--mc-ink) !important;
  background: none !important;
  color: var(--mc-ink) !important;
}

.tb-mc-rank-no {
  display: inline-block;
  margin-right: .5em;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--mc-band);
  color: #fff;
  font-size: .72em;
  vertical-align: middle;
}

.tb-mc-rank-body {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.tb-mc-rank-imgcol {
  flex: 0 0 38%;
  min-width: 140px;
}

.tb-mc-rank-img {
  display: block;
  border: 1px solid var(--mc-line);
  border-radius: 6px;
  overflow: hidden;
  background: #fafafa;
}

.tb-mc-rank-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

/* 参照は中央寄せ。サイトの .prz-ref / .tb-pickup-ref と同じ作法 */
.tb-mc-rank-list .tb-mc-ref {
  margin-top: 6px;
  font-size: 12px;
  color: var(--mc-sub);
  text-align: center;
  line-height: 1.5;
}

.tb-mc-rank-list .tb-mc-ref a {
  color: #2271b1;
}

.tb-mc-rank-infocol {
  flex: 1 1 240px;
  min-width: 0;
}

/* --- 相場（.prize-spec-card の語彙で組む） --- */

.tb-mc-rank-list .tb-mc-mkt {
  border: 1px solid var(--mc-edge);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  margin-bottom: .8em;
}

.tb-mc-rank-list .tb-mc-mkt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6em;
  padding: 8px 12px;
  background: var(--mc-band);
  color: #fff;
}

.tb-mc-mkt-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* 実売か出品中かは、枠つきのチップではなく帯の中の小さな和文で示す */
.tb-mc-mkt-kind {
  font-size: 11px;
  font-weight: 400;
  opacity: .85;
  text-align: right;
}

.tb-mc-rank-list .tb-mc-mkt-main {
  margin: 0 !important;
  /* line-height 1.1 の大きな数字は箱の中で上に寄って見えるので、下を厚くする */
  padding: 9px 12px 11px;
  line-height: 1.1;
  text-align: center;
}

.tb-mc-mkt-num {
  font-size: 24px;
  font-weight: 700;
  /* 相場はこの記事の主役の数字。サイトの注釈と同じ赤（利用者要望 2026-09-14） */
  color: var(--mc-red);
  letter-spacing: -.01em;
  /* 桁を縦に揃える。10件並べたときに数字がガタつかない */
  font-variant-numeric: tabular-nums;
}

/* 「円」は赤くしない。赤くするのは数字だけ（利用者要望 2026-09-14） */
.tb-mc-mkt-yen {
  margin-left: 2px;
  font-size: 14px;
  font-weight: 400;
  color: var(--mc-ink);
}

.tb-mc-rank-list .tb-mc-mkt-list {
  display: grid;
  /* ラベル列は内容にあわせて伸びる。固定幅にすると4文字以上のラベルで溢れる
     （本番の .spec-list dt が width:auto + min-width:6em にしているのと同じ理由） */
  grid-template-columns: minmax(5.5em, max-content) 1fr;
  margin: 0 !important;
  padding: 0;
  font-size: 12px;
  border-top: 1px solid var(--mc-line);
}

/* dt も dd も**上下中央**に置く。dd を素のブロックにすると行が上に貼り付き、
   1行の dt と並んだときに文字の高さがそろわない（利用者指摘 2026-09-14） */
.tb-mc-rank-list .tb-mc-mkt-list dt {
  grid-column: 1;
  margin: 0;
  padding: 9px 10px;
  background: var(--mc-fill);
  color: #555;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 1px solid var(--mc-line);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.tb-mc-rank-list .tb-mc-mkt-list dd {
  grid-column: 2;
  margin: 0 !important;
  padding: 9px 10px;
  background: #fff;
  color: var(--mc-ink);
  line-height: 1.5;
  border-bottom: 1px solid var(--mc-line);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
}

.tb-mc-rank-list .tb-mc-mkt-list dt:last-of-type,
.tb-mc-rank-list .tb-mc-mkt-list dd:last-of-type {
  border-bottom: none;
}

/* 相場が取れていないとき。大きな数字の枠だけが残らないよう本文サイズで1行 */
.tb-mc-rank-list .tb-mc-mkt-none {
  margin: 0 !important;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.7;
  color: #666;
}

.tb-mc-specs {
  font-size: 13px;
  line-height: 1.8;
}

.tb-mc-af {
  margin-top: .7em;
}

/* コンポーネント内の小見出し。サイトの .tb-pickup-h4 / .tb-oncle-label と同じ型 */
.tb-mc-rank-list .tb-mc-h4 {
  margin: 1.2em 0 .6em !important;
  padding: 0 0 5px !important;
  font-size: 1rem !important;
  font-weight: bold;
  color: var(--mc-ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mc-ink) !important;
  text-align: left;
}

.tb-mc-rank-text {
  margin-top: 1em;
  font-size: 15px;
  line-height: 1.9;
}

/* ---------------------------------------------------------
 * SP
 * ------------------------------------------------------- */

@media (max-width: 480px) {
  /* 1カラムに落ちても 1:1 のまま。フィギュアは縦長なので横長の枠にすると
     contain の余白ばかりが増えて商品が小さくなる（実機 375px で確認） */
  .tb-mc-rank-imgcol { flex: 0 0 100%; }

  .tb-mc-mkt-num { font-size: 22px; }
  .tb-mc-rank-list .tb-mc-mkt-list { grid-template-columns: minmax(5em, max-content) 1fr; }
  .tb-mc-rank-list .tb-mc-mkt-list dt,
  .tb-mc-rank-list .tb-mc-mkt-list dd { padding: 7px 8px; }

  .tb-mc-grid-wrap .tb-mc-note,
  .tb-mc-rank-list .tb-mc-note,
  .tb-mc-worth .tb-mc-note,
  .tb-mc-bundle .tb-mc-note { padding: 10px 12px; font-size: 14px; }
  .tb-mc-rank-text { font-size: 14px; }
}

/* ---------------------------------------------------------
 * 来週登場予定（[mercari_nextweek]）
 *
 * カードとグリッドは prize-list の .tb-prize-grid / .tb-prize-card を
 * そのまま借りる（月別まとめ記事と同じ見た目・同じモーダル）。
 * ここで足すのは日付の中見出しとリード文だけ。
 * ------------------------------------------------------- */

.tb-mc-nw {
  --mc-ink: #333;
  --mc-sub: #888;
  --mc-line: #eee;
  margin: 1.6em 0;
}

/* 見出し直下のリード文。以前 13px だったが記事本文より明らかに小さく浮いていた
   （利用者指摘 2026-09-14）。本文と同じ 16px にそろえる */
.tb-mc-nw .tb-mc-nw-lead {
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.9;
  color: var(--mc-ink);
}

/* Cocoon のブログカード（[blogcard]）を置く入れ物。
   カード自体の見た目はテーマに任せ、ここでは余白だけを整える
   （テーマ側のスタイルを上書きしない。サイト全体で見た目がされる） */
.tb-mc-card-link {
  margin: 1em 0 0;
}

.tb-mc-card-link .blogcard-wrap {
  margin-top: 0;
}

/* カレンダーへの導線。参照リンク（.tb-mc-ref）と同じ中央寄せの語彙 */
.tb-mc-nw .tb-mc-nw-cal {
  margin: 1.2em 0 0 !important;
  text-align: center;
  font-size: 15px;
}

/* 日付の中見出し。h3 のテーマ既定（左7px線＋囲み罫）は重いので、
   コンポーネント内の小見出しの型（下罫1本）に寄せる */
.tb-mc-nw .tb-mc-nw-date {
  margin: 1.6em 0 .7em !important;
  padding: 0 0 6px !important;
  font-size: 1rem !important;
  font-weight: bold;
  color: var(--mc-ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mc-ink) !important;
  text-align: left;
}

.tb-mc-nw .tb-mc-nw-date:first-of-type {
  margin-top: .4em !important;
}

/* 1日ぶんのグリッドどうしが近づきすぎないように */
.tb-mc-nw .tb-prize-grid {
  margin-bottom: 1.2em;
}

/* ---------------------------------------------------------
 * 目次（[mercari_toc]）
 *
 * Cocoon の自動目次はサイト全体で無効（is_toc_visible() が空）。
 * サイト設定を変えると全記事に影響するので、この記事のぶんだけ自前で出す。
 * 見た目はサイトの注釈ボックス（#f5f5f7・角丸10px）と同じ語彙に寄せる。
 * ------------------------------------------------------- */

.tb-mc-toc {
  margin: 1.6em 0;
  padding: 14px 18px;
  background: #f5f5f7;
  border-radius: 10px;
}

.tb-mc-toc .tb-mc-toc-title {
  margin: 0 0 .5em !important;
  padding: 0 0 6px;
  border-bottom: 1px solid #ddd;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  letter-spacing: .04em;
}

.tb-mc-toc .tb-mc-toc-list {
  margin: 0 !important;
  padding: 0 0 0 1.4em;
  font-size: 14px;
  line-height: 1.9;
}

.tb-mc-toc .tb-mc-toc-list li {
  margin: 0;
}

.tb-mc-toc .tb-mc-toc-list a {
  color: #2271b1;
  text-decoration: none;
}

.tb-mc-toc .tb-mc-toc-list a:hover {
  text-decoration: underline;
}

/* 目次から飛んだときに見出しがヘッダーの下に隠れないように */
.entry-content h2[id^="mc-"] {
  scroll-margin-top: 80px;
}

/* ---------------------------------------------------------
 * まとめ売り（[mercari_bundle]）
 *
 * 単品の相場カードと**同じ組版**（#333の帯＋表）にして、別物であることは
 * 見出しと注釈の言葉で示す。枠の色や背景色で「別種の情報です」と主張しない
 * （色つきの左線・信号色は §6.5 で禁止）。
 *
 * 本文はサイト本文と同じ 16px。以前 13〜14px で組んでいたが、記事の他の段落より
 * 明らかに小さく浮いていた（利用者指摘 2026-09-14）。
 * ------------------------------------------------------- */

.tb-mc-bundle {
  margin: 1.2em 0 1.6em;
}

.tb-mc-bundle .tb-mc-asof {
  margin: 0 0 .6em;
  font-size: 13px;
  color: var(--mc-sub);
  text-align: right;
}

/* 枠と角丸。これが無いと最終行の罫を消しているぶんだけ
   「下の線が見切れている」ように見える（利用者指摘 2026-09-14）。
   .tb-mc-mkt の基本スタイルは .tb-mc-rank-list にスコープされているので、
   新しいセクションでは自分で書く必要がある */
.tb-mc-bundle .tb-mc-mkt {
  border: 1px solid var(--mc-edge);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.tb-mc-bundle-card {
  margin-bottom: .6em;
}

.tb-mc-bundle .tb-mc-mkt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6em;
  padding: 8px 12px;
  background: var(--mc-band);
  color: #fff;
}

/* 幅の狭い画面では表だけを横スクロールさせる（本文は横に流さない）。
   スクロールバーが最終行の罫に重なって「下の線が切れている」ように見えたので、
   下に余白を確保する（利用者指摘 2026-09-14） */
.tb-mc-btable-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.tb-mc-btable {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: #fff;
  margin: 0 !important;
}

.tb-mc-btable th,
.tb-mc-btable td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--mc-line);
  text-align: left;
  line-height: 1.6;
  white-space: nowrap;
}

.tb-mc-btable thead th {
  background: var(--mc-fill);
  color: #555;
  font-size: 13px;
  font-weight: 700;
}

.tb-mc-btable tbody th {
  background: var(--mc-fill);
  color: #555;
  font-weight: 700;
}

/* 最終行の罫は消さない。消すとカードの下辺と二重に見えず、
   逆に「線が足りない」印象になる。カード側の border が受け止める */
.tb-mc-btable tbody tr:last-child th,
.tb-mc-btable tbody tr:last-child td {
  border-bottom: none;
}

/* 母数が足りない区分。目立たせず、しかし空欄とは区別する */
.tb-mc-btable-thin {
  color: var(--mc-sub);
}

.tb-mc-btable-sub {
  display: block;
  font-size: 12px;
  color: var(--mc-sub);
}

.tb-mc-btable-foot {
  margin: .5em 0 1.2em !important;
  font-size: 14px;
  color: var(--mc-sub);
  line-height: 1.9;
}

.tb-mc-bundle-lead {
  margin: .2em 0 1em !important;
  font-size: 16px;
  line-height: 1.9;
  color: var(--mc-ink);
}

/* 中見出しはテーマ既定（.entry-content h3 の左7px線＋囲み罫）に乗せるので
   ここでは上書きしない。余白だけ整える */
.tb-mc-bundle h3.wp-block-heading {
  margin-top: 1.8em;
}

.tb-mc-bwork {
  margin: 0 0 1.4em;
}

/* 作品名。h4 のテーマ既定（上下2px罫）は連続すると重いので、
   .tb-mc-h4 と同じ「下線1本」の型にそろえる */
.tb-mc-bwork-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5em;
  margin: 1.2em 0 .5em !important;
  padding: 0 0 5px !important;
  font-size: 1.05rem !important;
  font-weight: bold;
  color: var(--mc-ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mc-ink) !important;
}

.tb-mc-bwork-n {
  font-size: 14px;
  font-weight: 400;
  color: var(--mc-sub);
}

.tb-mc-bwork-unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--mc-ink);
}

.tb-mc-bwork-lead {
  margin: .2em 0 .6em !important;
  font-size: 14px;
  color: var(--mc-sub);
}

/* ---------------------------------------------------------
 * いま狙い目のプライズ（[mercari_worth]）
 *
 * ランキング（view-rank.php）と**同じ骨格**にする。1記事の中で様式を増やさない
 * （利用者指摘 2026-09-14「デザインが他項目と比べて微妙」）。
 * ------------------------------------------------------- */

.tb-mc-worth {
  margin: 1.2em 0 1.6em;
}

.tb-mc-worth .tb-mc-asof {
  margin: 0 0 .6em;
  font-size: 13px;
  color: var(--mc-sub);
  text-align: right;
}

.tb-mc-worth-item {
  padding: 1.2em 0;
  border-top: 1px solid var(--mc-edge);
}

.tb-mc-worth-item:last-child {
  border-bottom: 1px solid var(--mc-edge);
}

/* プライズ名。ランキングの .tb-mc-rank-title と同じ扱い（囲み罫は付けない） */
.tb-mc-worth-name {
  margin: 0 0 .7em !important;
  padding: 0 !important;
  font-size: 1.05rem !important;
  font-weight: bold;
  line-height: 1.6;
  color: var(--mc-ink) !important;
  background: transparent !important;
  border: none !important;
}

.tb-mc-worth-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.tb-mc-worth-imgcol {
  flex: 0 0 40%;
  max-width: 200px;
}

.tb-mc-worth-img {
  display: block;
  border: 1px solid var(--mc-edge);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.tb-mc-worth-img img {
  display: block;
  width: 100%;
  height: auto;
}

.tb-mc-worth-infocol {
  flex: 1 1 auto;
  min-width: 0;
}

/* 売切率は金額ではないので**赤くしない**（赤は金額の数字だけ、がサイト共通の約束） */
.tb-mc-worth-pct {
  font-size: 22px;
  font-weight: 700;
  color: var(--mc-ink);
  font-variant-numeric: tabular-nums;
}

.tb-mc-worth-pct-unit {
  font-size: 14px;
  color: var(--mc-ink);
  margin-left: 1px;
}

.tb-mc-worth .tb-mc-mkt {
  border: 1px solid var(--mc-edge);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  margin-bottom: .8em;
}

.tb-mc-worth .tb-mc-mkt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6em;
  padding: 8px 12px;
  background: var(--mc-band);
  color: #fff;
}

.tb-mc-worth .tb-mc-mkt-main {
  margin: 0 !important;
  padding: 9px 12px 11px;
  line-height: 1.1;
  text-align: center;
}

.tb-mc-worth .tb-mc-mkt-list {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0 !important;
  border-top: 1px solid var(--mc-line);
}

.tb-mc-worth .tb-mc-mkt-list dt {
  grid-column: 1;
  margin: 0;
  padding: 9px 10px;
  background: var(--mc-fill);
  color: #555;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px solid var(--mc-line);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.tb-mc-worth .tb-mc-mkt-list dd {
  grid-column: 2;
  margin: 0 !important;
  padding: 9px 10px;
  background: #fff;
  color: var(--mc-ink);
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px solid var(--mc-line);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
}

.tb-mc-worth .tb-mc-mkt-list dt:last-of-type,
.tb-mc-worth .tb-mc-mkt-list dd:last-of-type {
  border-bottom: none;
}

.tb-mc-worth .tb-mc-h4 {
  margin: 1.2em 0 .6em !important;
  padding: 0 0 5px !important;
  font-size: 1rem !important;
  font-weight: bold;
  color: var(--mc-ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mc-ink) !important;
  text-align: left;
}

@media (max-width: 600px) {
  /* 画像を上、情報を下に積む（横並びだと相場カードが潰れる） */
  .tb-mc-worth-body {
    display: block;
  }

  .tb-mc-worth-imgcol {
    max-width: 100%;
    margin-bottom: .8em;
  }
}

@media (max-width: 480px) {
  .tb-mc-btable {
    font-size: 14px;
  }

  .tb-mc-btable th,
  .tb-mc-btable td {
    padding: 9px 6px;
  }

  .tb-mc-btable thead th {
    font-size: 12px;
  }

  .tb-mc-bundle-lead,
  .tb-mc-btable-foot {
    font-size: 15px;
  }
}