/* ============================================================
   PPP — design system v2（検証ダッシュボード / Seed04採用）
   参照: design/ppp-mobile-comp.pen フレーム XRATr（Phase2A R5 PASS版）
   方針: 白＋緑1色。box-shadowゼロ／グラデゼロ／radius上限4px。
         「人が語る」mybest系ではなく「市場が語る」データメディア。
         スマホ縦特化（基準390px）。480px超は中央寄せのみ、PC専用レイアウトは作らない。

   構成:
    0. Tokens
    1. Reset / Base
    2. Layout（.wrap）
    3. Header / PR note / Trust band
    4. Page title（H1）
    5. Score teaser（首位ティザー）
    6. Counters（カウンター3連）
    7. Section heading（緑ドット見出し・全セクション共通）
    8. Sparkline（共通部品）
    9. Delta chip（共通部品・順位変動）
   10. Data board（データボード表）
   11. Bridge / 選定方法3ステップ
   12. Ranking section / Rank card
   13. Mini compare（カード内左右対称ミニ比較）
   14. Review quotes（市場の声）/ 空状態
   15. CTA buttons
   16. Compare section（1位と2位を比較）
   17. Plain list（6〜10位 / 11位以下）
   18. テキスト系セクション（今週の読み方・傾向仮説・選び方 等）
   19. Market character（市場の性格）
   20. FAQ
   21. References
   22. Operator block（運営者）
   23. Footer
   24. Responsive（480px超のセンタリングのみ）
   ============================================================ */

/* ---------- 0. Tokens ---------- */
:root {
  /* surface */
  --white: #FFFFFF;
  --surface-soft: #F5F5F5;      /* 薄グレー面（信頼系・空状態） */
  --surface-media: #E8E8E8;     /* 商品画像プレースホルダー専用面 */

  /* brand green */
  --green: #00915A;             /* 主色。リンク・CTA・数値・ドット */
  --green-dark: #006B45;        /* 1位バッジ・フッターのみ */
  --green-pale: #E9F6F0;        /* 信頼系の面（トラストバンド・ティザー・良い点ピル等） */

  /* line */
  --line: #E5E5E5;              /* 罫線・カード枠・行区切り */
  --rule: #E5E5E5;              /* --lineの別名。teaser__link--amazon・btn--tertiary・metrics系4箇所が参照（未定義だとborder宣言全体が無効化されborderが消える） */
  --line-strong: #1A1A1A;       /* データボード見出し行の下罫（強） */
  --chip-neutral: #CCCCCC;      /* 変動チップ「→」「↓」のニュートラル枠 */

  /* text */
  --ink: #1A1A1A;               /* 見出し・数値の強調 */
  --ink-soft: #333333;          /* 本文 */
  --ink-muted: #767676;         /* ラベル・補足 */
  --ink-faint: #999999;         /* 注記・タイムスタンプ */

  /* footer（濃緑地の上の白系） */
  --on-dark: #FFFFFF;
  --on-dark-70: rgba(255, 255, 255, .7);
  --on-dark-60: rgba(255, 255, 255, .6);
  --on-dark-20: rgba(255, 255, 255, .2);

  /* shape — 上限4pxで固定。「浮かないから影」を誘惑させない */
  --radius: 4px;
  --radius-sm: 2px;

  /* type */
  --font-body: "Noto Sans JP", system-ui, sans-serif;

  /* layout */
  --content-max: 480px;         /* これを超えたら中央寄せのみ。PC専用レイアウトは作らない */
  --gutter: 16px;
}

/* ---------- 1. Reset / Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

/* 数値・スコア・価格の桁揃え（信頼感の要） */
.teaser__score, .counter__value, .board-table__rank, .board-table__score,
.rank-card__rating, .mini-compare__value, .compare__value, .list-plain__price,
.market-score__value, .delta-chip {
  font-variant-numeric: tabular-nums;
}

/* スパークラインSVGの線を非スケーリングに固定するためのクラス */
.spark__path { vector-effect: non-scaling-stroke; }

/* ---------- 2. Layout ---------- */
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
main { display: block; }

/* ---------- 3. Header / PR note / Trust band ---------- */
.site-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--gutter);
}
.brand {
  color: var(--green);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
}
.brand:hover { text-decoration: none; }
.tagline {
  margin: 0;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 400;
}

/* PR表記帯: 法定表記の常時提示バー（薄グレー・控えめ） */
.pr-note {
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  padding: 6px var(--gutter);
  color: var(--ink-muted);
  font-size: 10px;
  text-align: center;
}

/* 信頼帯: データ取得日時・選定方法・PR表記の3分割（データが生きている証拠） */
.trust-band {
  display: flex;
  align-items: center;
  background: var(--green-pale);
}
.trust-band__item {
  flex: 1 1 0;
  padding: 8px 0;
  text-align: center;
  color: var(--green);
  font-size: 10px;
  font-weight: 500;
}
.trust-band__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 12px;
  background: #BBDFCE;
}

/* ---------- 4. Page title ---------- */
.page-title {
  padding: 20px var(--gutter) 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-title h1 {
  color: var(--ink);
  font-size: 26px;
  font-weight: 900;
  line-height: 38px;
}
.page-title__sub {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 23px;
}
.breadcrumb {
  padding: 10px var(--gutter) 0;
  color: var(--ink-muted);
  font-size: 12px;
}
.breadcrumb a { color: var(--ink-muted); }

/* ---------- 5. Score teaser（首位ティザー） ---------- */
.teaser-wrap { padding: 12px var(--gutter) 0; }
.teaser {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--green-pale);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.teaser__left {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.teaser__label-row { display: flex; align-items: center; gap: 6px; }
.teaser__label {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
.teaser__streak {
  background: var(--green);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
}
.teaser__name {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
}
.teaser__note {
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 15px;
}
.teaser__score {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 40px;
  font-weight: 700;
  line-height: 44px;
}

/* ---------- 6. Counters（カウンター3連） ---------- */
.counters {
  display: flex;
  align-items: center;
  padding: 16px var(--gutter) 32px;
}
.counter {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.counter__label {
  color: var(--ink-muted);
  font-size: 10px;
  letter-spacing: .5px;
}
.counter__value {
  color: var(--green);
  font-size: 32px;
  font-weight: 700;
  line-height: 38px;
}
.counter__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 44px;
  background: var(--line);
}

/* ---------- 7. Section heading（緑ドット見出し・共通部品） ---------- */
.sec-heading {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sec-heading__dot {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
}
/* 見出しが2行に折り返んだとき、align-items:flex-startだけだとドットが1行目の
   上端に張り付く。.sec-heading__textの line-height（font-size17px×1.6=27.2px）の
   中心にドット（4px）を合わせるオフセット。.sec-heading直下の使用時のみ効かせる
   （quotes__heading内などスタンドアロン使用のドットには影響しない） */
.sec-heading > .sec-heading__dot { margin-top: 12px; }
.sec-heading__text {
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .6px;
}
/* ---------- 8. Sparkline（過去4週推移・共通部品） ---------- */
.spark { position: relative; flex: 0 0 auto; width: 48px; height: 16px; }
.spark--lg { width: 120px; height: 28px; }
.spark__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spark__dot {
  position: absolute;
  width: 4.5px;
  height: 4.5px;
  /* left/topはパスと同じ0-100%座標で指定される。点の中心を線上に合わせる */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--green);
}
.spark--lg .spark__dot { width: 6px; height: 6px; background: var(--green-dark); }
/* 履歴4週未満のフォールバック（.is-nohistory） */
.spark.is-nohistory { display: flex; align-items: center; justify-content: center; }
.spark.is-nohistory .spark__svg,
.spark.is-nohistory .spark__dot { display: none; }
.spark__empty-label {
  display: none;
  color: var(--ink-faint);
  font-size: 10px;
  text-align: center;
}
.spark.is-nohistory .spark__empty-label { display: block; }

/* ---------- 9. Delta chip（順位変動・共通部品） ---------- */
.delta-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--chip-neutral);
  padding: 2px 6px;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.delta-chip--up { border-color: var(--green); color: var(--green); }
.delta-chip--new { background: var(--green); border-color: var(--green); color: var(--white); }

/* ---------- 10. Data board（データボード表） ---------- */
.board { padding: 0 var(--gutter) 32px; display: flex; flex-direction: column; gap: 14px; }
.board-table { display: flex; flex-direction: column; }
.board-table__head,
.board-table__row {
  display: flex;
  align-items: center;
  height: 44px;
  border-bottom: 1px solid var(--line);
}
/* 行そのものが下のカードへのページ内リンク。リンクだと分かる程度に留め、
   青リンク色にはしない（表の可読性を壊さない） */
a.board-table__row { color: inherit; text-decoration: none; }
a.board-table__row:hover { background: var(--green-pale); text-decoration: none; }
a.board-table__row .board-table__name { text-decoration: underline; text-underline-offset: 2px; }
/* ページ内リンクで飛んだとき、カードが画面上端に張り付かないよう余白を確保 */
.rank-card[id] { scroll-margin-top: 12px; }
.board-table__head {
  height: 30px;
  border-bottom-color: var(--line-strong);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .5px;
}
.board-table__rank { flex: 0 0 36px; }
.board-table__name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-table__spark-cell { flex: 0 0 48px; display: flex; justify-content: center; }
.board-table__score-cell { flex: 0 0 72px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.board-table__head .board-table__spark-cell,
.board-table__head .board-table__score-cell { text-align: center; }

.board-table__row .board-table__rank {
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
}
.board-table__row .board-table__name {
  color: var(--ink-soft);
  font-size: 13px;
}
.board-table__row .board-table__score {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.board__note {
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 16px;
}

/* ---------- 11. Bridge / 選定方法3ステップ ---------- */
.bridge {
  background: var(--green-pale);
  padding: 24px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 番号と本文は同じ行に置く。番号だけ改行すると読む順序が一段増えるだけで意味がない。
   負のtext-indentは親のpaddingを突き抜けて番号が見切れたので、flexで組む */
.bridge__step-text {
  margin: 0;
  display: flex;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 23px;
}
.bridge__step-num {
  flex: 0 0 auto;           /* 本文が折り返しても番号は縮まない・2行目は本文側で揃う */
  color: var(--green);
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.bridge__link {
  color: var(--green);
  font-size: 13px;
  font-weight: 500;
}

/* ---------- 12. Ranking section / Rank card ---------- */
.ranking {
  padding: 24px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rank-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rank-card__badge-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rank-badge {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
}
.rank-badge--1 { background: var(--green-dark); }

.attr-badge {
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 700;
}
.attr-badge--fill { background: var(--green); color: var(--white); }
.attr-badge--line { border: 1px solid var(--green); color: var(--green); }

.rank-card__image-wrap { display: flex; justify-content: center; padding: 4px 0; }
.rank-card__image {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-media);
  color: var(--ink-faint);
  font-size: 10px;
}
.rank-card__image img { width: 100%; height: 100%; object-fit: contain; }

.rank-card__name {
  /* p→h3化（SEO見出し階層）の副作用打ち消し: UAのpデフォルト margin: 1em 0 と同じ値を
     明示指定（h1,h2,h3{margin:0}の全称リセットに勝つよう、このクラス側で上書きする） */
  margin: 1em 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;
}

.rank-card__profile { display: flex; flex-direction: column; gap: 4px; }
.rank-card__profile-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--ink-muted);
  font-size: 12px;
}
.rank-card__profile-line strong { font-weight: 700; }

/* 順位・価格の推移枠（履歴4週分たまったジャンルにのみ出る） */
.rank-card__trend { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 2px; }
.rank-card__trend-row { display: flex; align-items: center; gap: 8px; }
.rank-card__trend-label {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 11px;
}
.rank-card__trend-note {
  color: var(--ink-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.rank-card__rating-row { display: flex; align-items: center; gap: 6px; }
.rank-card__rating-label,
.rank-card__rating {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.rank-card__review-count { color: var(--ink-muted); font-size: 11px; }

/* ---------- 13. Mini compare（カード内左右対称ミニ比較） ---------- */
.mini-compare {
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mini-compare__mall-row { display: flex; align-items: center; }
.mini-compare__mall {
  flex: 1 1 0;
  text-align: center;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
}
.mini-compare__spacer { flex: 0 0 72px; height: 8px; }
.mini-compare__row { display: flex; align-items: center; }
.mini-compare__value {
  flex: 1 1 0;
  text-align: center;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.mini-compare__value.chip--out { color: var(--ink-muted); font-weight: 500; }
.mini-compare__pill {
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 500;
}
.mini-compare__rule { height: 1px; background: var(--line); }

/* ---------- 14. Review quotes（市場の声）/ 空状態 ----------
   .market-voice が親コンテナ。口コミが無い商品は .market-voice.is-empty を付け、
   中の .quotes を隠して .review-empty を出す（ブロックごと消すとカードが痩せるため置換式） */
.market-voice { padding: 8px 0 0; }
.market-voice.is-empty .quotes { display: none; }
.market-voice:not(.is-empty) .review-empty { display: none; }

.quotes { display: flex; flex-direction: column; gap: 10px; }
.quotes__heading { font-size: 13px; font-weight: 700; color: var(--ink); }
.quotes__heading .sec-heading__text { font-size: 13px; }
.quotes__col {
  border-left: 2px solid var(--green);
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quotes__pill {
  align-self: flex-start;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
}
.quotes__pill--positive { background: var(--green-pale); color: var(--green); }
.quotes__pill--negative { background: var(--surface-soft); color: var(--ink-muted); }
.quotes__text {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 22px;
}
.quotes__attr-row { display: flex; justify-content: flex-end; }
.quotes__attr { color: var(--green); font-size: 10px; font-weight: 500; }
.quotes__date { color: var(--ink-faint); font-size: 10px; }
.quotes__more { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.quotes__more a { color: var(--green); font-size: 13px; font-weight: 500; }

/* 口コミなし商品の空状態（.is-empty） */
.review-empty {
  background: var(--surface-soft);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.review-empty__heading { color: var(--ink-muted); font-size: 13px; font-weight: 700; }
.review-empty__body { color: var(--ink-muted); font-size: 12px; line-height: 19px; }

/* ---------- 15. CTA buttons ---------- */
.cta-group { display: flex; flex-direction: column; gap: 8px; }
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
}
.btn--primary { background: var(--green); color: var(--white); }
.btn--secondary { background: var(--white); border: 1.5px solid var(--green); color: var(--green); }
.btn--tertiary { background: var(--white); border: 1.5px solid var(--rule); color: var(--green); }
.btn:hover { text-decoration: none; opacity: .92; }

/* ---------- 16. Compare section（1位と2位を比較） ---------- */
.compare { padding: 0 var(--gutter) 32px; display: flex; flex-direction: column; gap: 14px; }
.compare__role-note { color: var(--ink-faint); font-size: 10px; line-height: 15px; }
.compare__head-row { display: flex; align-items: center; }
.compare__head { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.compare__head-rank { color: var(--green); font-size: 10px; font-weight: 700; }
.compare__head-name { color: var(--ink); font-size: 13px; font-weight: 700; }
.compare__head-spacer { flex: 0 0 72px; height: 8px; }
.compare__row { display: flex; align-items: center; }
.compare__value { flex: 1 1 0; text-align: center; color: var(--ink); font-size: 15px; font-weight: 700; }
.compare__value.chip--out { color: var(--ink-muted); font-weight: 500; }
.compare__pill {
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 500;
}
.compare__rule { height: 1px; background: var(--line); }
.compare__more { display: flex; justify-content: center; padding-top: 10px; }
.compare__more a { color: var(--green); font-size: 13px; font-weight: 700; }

/* ---------- 17. Plain list（6〜10位 / 11位以下・簡素） ---------- */
.list-plain { padding: 0 var(--gutter) 32px; display: flex; flex-direction: column; gap: 10px; }
.list-plain__rows { display: flex; flex-direction: column; }
.list-plain__row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  border-bottom: 1px solid var(--line);
}
.list-plain__num { flex: 0 0 auto; color: var(--green); font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.list-plain__name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: 13px; }
.list-plain__price { flex: 0 0 auto; color: var(--ink); font-size: 13px; font-weight: 700; }
.list-plain__note { color: var(--ink-faint); font-size: 10px; line-height: 16px; }

/* 11位以下は簡素表現（順位番号を弱く・行を低く） */
.list-plain--compact .list-plain__row { height: 36px; }
.list-plain--compact .list-plain__row:last-child { border-bottom: none; }
.list-plain--compact .list-plain__num { color: var(--ink-muted); font-size: 12px; }
.list-plain--compact .list-plain__name { font-size: 12px; }
.list-plain--compact .list-plain__price { font-size: 12px; }

/* ---------- 18. テキスト系セクション（読み方・傾向仮説・選び方 等の共通型） ---------- */
.text-section { padding: 0 var(--gutter) 32px; display: flex; flex-direction: column; gap: 12px; }
.text-section__body { color: var(--ink-soft); font-size: 13px; line-height: 23px; }
.text-section__note { color: var(--ink-faint); font-size: 10px; }

/* 選び方（H2+H3ブロック） */
.choose-block { display: flex; flex-direction: column; gap: 6px; }
/* p→h3化の副作用打ち消し: 元のpデフォルト margin: 1em 0 を明示的に復元 */
.choose-block__title { margin: 1em 0; color: var(--ink); font-size: 14px; font-weight: 700; }
.choose-block__body { color: var(--ink-soft); font-size: 13px; line-height: 23px; }
.choose-list { display: flex; flex-direction: column; gap: 16px; }

/* このランキングの読み方（緑スクエア+番号立て） */
.literacy-list { display: flex; flex-direction: column; gap: 16px; }
.literacy-block { display: flex; gap: 12px; }
.literacy-block__marker { flex: 0 0 auto; padding-top: 6px; }
.literacy-block__square { width: 8px; height: 8px; background: var(--green); }
.literacy-block__col { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; }
.literacy-block__title { color: var(--ink); font-size: 13px; font-weight: 700; line-height: 20px; }
.literacy-block__body { color: var(--ink-soft); font-size: 13px; line-height: 23px; }

/* ---------- 19. Market character（市場の性格） ---------- */
.market-score {
  background: var(--green-pale);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.market-score__label { color: var(--ink-muted); font-size: 11px; letter-spacing: .5px; }
.market-score__value-row { display: flex; align-items: center; gap: 10px; }
.market-score__value { color: var(--green); font-size: 32px; font-weight: 700; line-height: 38px; }
.character-pill {
  background: var(--green);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
}

/* ---------- 20. FAQ ---------- */
.faq {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faq__item { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq__item:last-child { border-bottom: none; }
.faq__item summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; float: right; color: var(--green); font-weight: 700; }
.faq__item[open] summary::after { content: "−"; }
.faq__a { margin-top: 6px; color: var(--ink-soft); font-size: 13px; line-height: 23px; }

/* ---------- 21. References ---------- */
.references { padding: 0 var(--gutter) 32px; display: flex; flex-direction: column; gap: 10px; }
.references__list { display: flex; flex-direction: column; gap: 6px; }
.references__item { color: var(--ink-muted); font-size: 12px; }

/* ---------- 22. Operator block（運営者） ---------- */
.operator {
  background: var(--green-pale);
  padding: 28px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.operator__label { color: var(--green); font-size: 10px; font-weight: 500; letter-spacing: 1px; }
.operator__name { color: var(--ink); font-size: 15px; font-weight: 700; }
.operator__body { color: var(--ink-soft); font-size: 13px; line-height: 23px; }
.operator__link { color: var(--green); font-size: 13px; font-weight: 500; }

/* ---------- 23. Footer ---------- */
.site-footer { background: var(--green-dark); }
.site-footer__inner {
  padding: 32px var(--gutter) 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.site-footer__updated { color: var(--on-dark-70); font-size: 11px; letter-spacing: .3px; }
.foot-nav { display: flex; flex-direction: column; gap: 14px; }
.foot-nav a { color: var(--on-dark); font-size: 13px; font-weight: 500; }
.foot-nav a:hover { text-decoration: underline; }
.site-footer__divider { height: 1px; background: var(--on-dark-20); }
.credit { margin: 0; color: var(--on-dark-70); font-size: 10px; line-height: 17px; }
.credit a { color: var(--on-dark-70); }
.site-footer__strip {
  display: flex;
  justify-content: center;
  padding: 12px 0;
  border-top: 1px solid var(--on-dark-20);
}
.copyright { color: var(--on-dark-60); font-size: 10px; letter-spacing: 1px; }

/* ---------- 24. Responsive（480px超はセンタリングのみ。PC専用レイアウトは作らない） ---------- */
/* ページ全体（帯の背景も含めて）を1カラムのまま中央寄せするだけ。
   ブレークポイントごとのレイアウト切替は行わない＝スマホ版がそのままPCでも破綻しない設計。 */
@media (min-width: 481px) {
  body { max-width: var(--content-max); margin: 0 auto; }
}

/* ---------- 20. 合算前の各モールランキング（材料の開示） ---------- */
.mall-raw { padding: 0 var(--gutter) 32px; display: flex; flex-direction: column; gap: 10px; }
.mall-raw__lead { color: var(--ink-soft); font-size: 13px; line-height: 23px; }
.mall-raw__block { display: flex; flex-direction: column; }
.mall-raw__block + .mall-raw__block { margin-top: 18px; }

/* 見出し行: 太い下罫でテーブルのヘッダだと分からせる（データボードと同じ作法） */
.mall-raw__head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-bottom: 6px; border-bottom: 1px solid var(--line-strong);
}
.mall-raw__mall { color: var(--ink); font-size: 13px; font-weight: 700; }
.mall-raw__mall--rakuten { border-left: 3px solid #BF0000; padding-left: 7px; }
.mall-raw__mall--yahoo { border-left: 3px solid #FF0033; padding-left: 7px; }
.mall-raw__logic { color: var(--ink-faint); font-size: 10px; }

.mall-raw__rows { display: flex; flex-direction: column; }
.mall-raw__row {
  display: flex; align-items: center; gap: 10px;
  height: 40px; border-bottom: 1px solid var(--line);
}
.mall-raw__row:last-child { border-bottom: none; }
.mall-raw__num {
  flex: 0 0 auto; width: 20px; color: var(--green);
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}
.mall-raw__name {
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-soft); font-size: 13px;
}
.mall-raw__name a { color: var(--ink-soft); text-decoration: none; }
.mall-raw__name a:hover { color: var(--green); text-decoration: underline; }
.mall-raw__price {
  flex: 0 0 62px; text-align: right; color: var(--ink); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mall-raw__foot { color: var(--ink-faint); font-size: 10px; line-height: 16px; margin-top: 6px; }

/* 合算対象外リスト（list-plainの語彙を借りる） */
.list-plain__lead { color: var(--ink-soft); font-size: 13px; line-height: 23px; }
.list-plain__malls { flex: 0 0 auto; display: inline-flex; gap: 4px; white-space: nowrap; }
.mini-chip {
  display: inline-flex; align-items: baseline; gap: 3px; justify-content: flex-end;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1px 5px; color: var(--ink-muted); font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mini-chip.chip--out { color: var(--ink-faint); background: #FAFAFA; }
.chip__mall { font-style: normal; font-weight: 400; font-size: 9px; color: var(--ink-faint); }

/* 狭い画面では評価列を落として 順位/商品名/価格 の3列にする
   （4列だと価格がはみ出す。6〜10位リストと同じ構成に揃える） */
@media (max-width: 480px) {
  .mall-raw__logic { display: none; }
  .mall-raw__price { flex-basis: 58px; }
  .list-plain__malls { gap: 3px; }
  .mini-chip { padding: 1px 4px; }
}

/* いまの1位カード内の購入導線（本文カードのボタンより控えめに・2列） */
.teaser__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.teaser__link {
  flex: 1 1 0; min-width: 0; text-align: center;
  border-radius: var(--radius); padding: 10px 6px;
  font-size: 12px; font-weight: 700; line-height: 1.3;
  text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.teaser__link b { font-variant-numeric: tabular-nums; }
.teaser__link--rakuten { background: var(--green); color: #fff; }
.teaser__link--yahoo { border: 1px solid var(--green); color: var(--green); background: #fff; }
.teaser__link--amazon { border: 1px solid var(--rule); color: var(--green); background: #fff; flex: 1 1 100%; }
.teaser__link:hover { text-decoration: none; opacity: .88; }

/* ---------- 25. 市場データ（出店者向け・折りたたみ） ---------- */
.metrics { border-top: 1px solid var(--rule); padding-top: 12px; }
.metrics__summary {
  cursor: pointer;
  list-style: none;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
}
.metrics__summary::-webkit-details-marker { display: none; }
.metrics__summary::after { content: " ＋"; }
.metrics[open] .metrics__summary::after { content: " －"; }
.metrics__lead { padding-top: 8px; color: var(--ink-muted); font-size: 11px; line-height: 18px; }
.metrics__list { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.metrics__row { border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.metrics__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.metrics__label { color: var(--ink); font-size: 13px; font-weight: 700; }
.metrics__value {
  color: var(--green-dark);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.metrics__note { padding-top: 3px; color: var(--ink-faint); font-size: 11px; line-height: 17px; }

/* ---------- 26. トップ: カテゴリで探すアコーディオン ----------
   開閉は既存 .faq__item（ネイティブ<details>・summary::afterの+/−）を流用。
   ここでは summary 内の分類名・件数・代表ジャンルの見え方だけを追加する。 */
.cat-accordion { display: flex; flex-direction: column; }
.cat-accordion__count { margin-left: 4px; color: var(--green); font-variant-numeric: tabular-nums; }
.cat-accordion__sample { margin-left: 4px; color: var(--ink-muted); font-weight: 400; font-size: 12px; }

/* ---------- 27. サムネ付き行（トップ「直近の更新」「カテゴリで探す」中身で共用） ----------
   .list-plain__row（既存）は display:flex; align-items:center; gap:12px; を持つので、
   先頭にサムネを差し込むだけで名前・更新日の配置は崩れない。行高だけサムネに収まるよう拡張する。 */
.list-plain--thumb .list-plain__row { height: 84px; }
.thumb-frame {
  flex: 0 0 120px;
  width: 120px;
  height: 68px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-soft); /* サムネ404時もこの面色でレイアウトが崩れない */
}
.thumb-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 28. アイキャッチ（ランキング記事 H1直下・横長） ---------- */
.eyecatch-wrap { padding: 12px var(--gutter) 0; }
.eyecatch {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 439;   /* hero素材の実寸。クロップせず全体を見せる（404時もこの比率で面が出る） */
  border-radius: var(--radius);
  background: var(--surface-soft);
}

/* ---------- 29. about: りさブロック（写真120x120＋テキスト横並び） ---------- */
.risa-block { padding: 0 var(--gutter) 32px; display: flex; flex-direction: column; gap: 12px; }
.risa-card { display: flex; align-items: flex-start; gap: 14px; }
.risa-card__photo {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-media);
}
.risa-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.risa-card__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.risa-card__name { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 21px; }
.risa-card__org { margin: 0; color: var(--ink-muted); font-size: 12px; line-height: 18px; }
.risa-card__info .attr-badge { align-self: flex-start; }

/* ---------- 31. トップのヒーローバンド ----------
   h1＋サブ＋カウンター3連を緑paleの面に納めて「顔」を作る。
   counters（データ3連）は白面のインセットにして主役に立てる。 */
.home-hero { background: var(--green-pale); padding: 6px 0 20px; margin-bottom: 28px; }
.home-hero .page-title { padding-top: 26px; }
.home-hero .counters {
  background: var(--white);
  border-radius: var(--radius);
  margin: 14px var(--gutter) 0;
  padding: 16px 8px;
}

/* ============================================================
   30. PC読み物レイヤー（A案・2026-08-26）
   方針: 720px以上は読み物幅640px＋読みテキストのタイプスケールを一段上げる。
   1000px以上のトップ（body.page-home）のみ960pxに広げ、
   「直近の更新」「カテゴリで探す」を左右2カラムに置く。
   モバイル（〜719px）はこのブロックに一切影響させない＝全てmin-widthスコープ。
   B案（サイドバー等の本格PCレイアウト）はやらない（GSCデバイス比率を見て9月中旬に判断）。
   ============================================================ */
@media (min-width: 720px) {
  :root { --content-max: 640px; }
  /* コンテンツ外は薄グレー面＋紙面左右にヘアライン。白一色のぼやけを締める */
  html { background: var(--surface-soft); }
  body {
    font-size: 16px;
    background: var(--white);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }

  /* タイトル・見出し */
  .page-title h1 { font-size: 30px; line-height: 44px; }
  .page-title__sub { font-size: 14px; line-height: 25px; }
  .breadcrumb { font-size: 13px; }
  .sec-heading__text { font-size: 19px; }
  /* ドット中心合わせ: 19px×1.6=30.4pxの中心(15.2)−ドット半径2px≒13px */
  .sec-heading > .sec-heading__dot { margin-top: 13px; }

  /* 読みテキスト（13/23 → 15/26） */
  .text-section__body, .choose-block__body, .literacy-block__body,
  .faq__a, .mall-raw__lead, .list-plain__lead, .operator__body {
    font-size: 15px; line-height: 26px;
  }
  .choose-block__title { font-size: 16px; }
  .literacy-block__title { font-size: 15px; line-height: 22px; }
  .faq__item summary { font-size: 15px; line-height: 22px; }
  .quotes__text { font-size: 14px; line-height: 24px; }
  .quotes__more a { font-size: 14px; }
  .rank-card__name { font-size: 17px; line-height: 26px; }
  .rank-card__image { width: 240px; height: 240px; }
  .teaser__name { font-size: 17px; line-height: 24px; }
  .list-plain__name { font-size: 14px; }
  .references__item { font-size: 13px; }

  /* フッターナビは横並びに */
  .foot-nav { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
}

/* トップだけ960px・主要2セクションを左右2カラム（読み物ページは640のまま） */
@media (min-width: 1000px) {
  body.page-home { max-width: 960px; }
  body.page-home main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: start;
  }
  /* Safariのgrid項目min-width:auto由来のはみ出し保険 */
  body.page-home main > * { min-width: 0; }
  body.page-home main > .home-hero { grid-column: 1 / -1; }
  /* バンド内は960pxいっぱいに散らさず読み物幅の柱に留める */
  body.page-home .home-hero .page-title { max-width: 640px; margin: 0 auto; width: 100%; }
  body.page-home .home-hero .counters { max-width: 640px; margin: 14px auto 0; width: 100%; }
}