/* ===== 設計トークン =================================================
   色・間隔・字の大きさをここだけで決める。
   各コンポーネントで直接 #xxxxxx や px を書かない。
   ここを1か所直せばサイト全体の印象が動く状態を保つ。 */
:root {
  color-scheme: light;

  --ink:    #14181d;   /* 本文 */
  --ink-2:  #59626c;   /* 補助 */
  --ink-3:  #8b949d;   /* 注記 */
  --line:   #e0e5e9;
  --line-2: #eef1f4;
  --bg:     #f4f6f8;
  --surface:#ffffff;
  --card:   #ffffff;   /* 読み物側で使っている旧名。残しておく */

  --brand:    #14603c;
  --brand-2:  #0f4a2e;
  --brand-bg: #e8f1ec;

  --price:    #c8102e;  /* 価格。サイト内でこの赤は価格にしか使わない */
  --price-bg: #fdecef;

  --buy:      #0f7a4a;
  --buy-bg:   #e6f3ec;
  --warn:     #a1620a;
  --warn-bg:  #fbf1e0;
  --peak:     #a3283b;
  --peak-bg:  #fbeaed;

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 12px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 6px 16px rgba(16, 24, 40, .10);

  --page: 1080px;
  --prose: 760px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic UI', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }
a:focus-visible,
button:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }

img { max-width: 100%; }

/* ===== ヘッダー・フッター ============================================ */
header.site {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

header.site .brand {
  display: inline-block;
  padding: 12px 16px 10px;
  color: var(--brand);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .01em;
  text-decoration: none;
}

/* カテゴリ移動。どのページからでも1タップで他カテゴリへ行けるようにする。
   狭い画面では横スクロールにする。折り返すとヘッダーが伸びて本文が押し出される。 */
.site-nav {
  display: flex;
  gap: 2px;
  padding: 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--line-2);
}

.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  flex: 0 0 auto;
  padding: 9px 12px;
  color: var(--ink-2);
  font-size: .88rem;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--ink); }

.site-nav a[aria-current="page"] {
  color: var(--brand);
  font-weight: 700;
  border-bottom-color: var(--brand);
}

nav.crumbs {
  max-width: var(--page);
  margin: 0 auto;
  padding: 10px 16px 0;
  font-size: .78rem;
  color: var(--ink-3);
}

nav.crumbs a { color: var(--ink-3); }

main {
  max-width: var(--page);
  margin: 0 auto;
  padding: 14px 16px 40px;
}

footer.site {
  max-width: var(--page);
  margin: 0 auto;
  padding: 24px 16px 40px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
}

footer.site p { margin: 8px 0 0; }
.foot-nav a { font-size: .85rem; }

/* ===== 法令表記 ====================================================== */
.pr-disclosure {
  margin: 0 0 14px;
  font-size: .76rem;
  color: var(--ink-3);
}

.price-notice {
  margin: 24px 0 0;
  font-size: .74rem;
  color: var(--ink-3);
  line-height: 1.6;
}

/* ===== 見出し ======================================================== */
h1 { font-size: 1.55rem; line-height: 1.35; margin: 0 0 8px; letter-spacing: -.01em; }
h2 { font-size: 1.1rem;  line-height: 1.45; margin: 0 0 10px; }
h3 { font-size: .98rem;  margin: 0 0 6px; }

/* ===== 商品カード ====================================================
   一覧で足りない情報があると、人は候補かどうかを確かめるために
   詳細ページを往復することになる。その往復が離脱になる。
   だから一覧の時点で「名前・価格・それが安いか・評価」まで見せる。 */
.pc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.pc-link {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
}

.pc-link:hover {
  border-color: var(--brand);
  box-shadow: var(--sh-1);
}

.pc-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: #fbfcfd;
  border-radius: var(--r);
}

/* 画像がまだ無い商品もある。枠ごと詰めると、画像のある行とない行で
   文字の始まる位置がずれ、一覧がガタついて見える。枠は残して無地で置く。 */
.pc-img--none {
  display: block;
  background: var(--line-2);
  border: 1px solid var(--line);
}

.pc-main { min-width: 0; }

.pc-brand {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.pc-name {
  display: block;
  margin: 1px 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ロフト・フレックスは「同じモデルの別仕様」。
   モデル名と同じ強さで出すと、一覧が同じ商品の羅列に見えてしまう。 */
.pc-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.pc-specs span {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .72rem;
  color: var(--ink-2);
}

.pc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  flex-wrap: wrap;
}

.pc-price {
  text-align: right;
  white-space: nowrap;
}

.pc-amount {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--price);
  font-variant-numeric: tabular-nums;
}

.pc-unit {
  display: block;
  font-size: .7rem;
  color: var(--ink-3);
}

/* ===== 買い時バッジ ==================================================
   5段階。全部が「買い時」になる出し方はしない。
   判定できていないことと、判定した結果ふつうだったことは別の状態として扱う。 */
.vb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}

.vb b { font-weight: 700; opacity: .7; font-size: .92em; }

.vb--buy     { background: var(--buy-bg);   color: var(--buy); }
.vb--good    { background: var(--brand-bg); color: var(--brand); }
.vb--normal  { background: var(--line-2);   color: var(--ink-2); }
.vb--high    { background: var(--warn-bg);  color: var(--warn); }
.vb--peak    { background: var(--peak-bg);  color: var(--peak); }
.vb--pending { background: transparent; color: var(--ink-3); border: 1px solid var(--line); font-weight: 600; }

/* ===== 価格の位置づけ ================================================
   割引の表示は必ず価格のすぐ隣に置く。離すと、どの商品にかかる差額なのかが
   分からなくなる。比較の相手は当サイトが記録した中央値だけに固定している。 */
.delta {
  display: inline-block;
  margin-top: 3px;
  font-size: .74rem;
  font-weight: 600;
}

.delta--down { color: var(--buy); }
.delta--up   { color: var(--ink-3); font-weight: 500; }
.delta--flat { color: var(--ink-3); font-weight: 500; }

.rv { font-size: .72rem; color: var(--ink-3); }
.rv-star { color: #e8a400; margin-right: 2px; }
.rv small { color: var(--ink-3); margin-left: 5px; }

.empty {
  padding: 28px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--ink-2);
  text-align: center;
}

/* ===== 詳細ページ ==================================================== */
.pd-head { margin-bottom: 14px; }

.pd-brand {
  margin: 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.pd-head h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.pd-specs { display: inline-flex; gap: 5px; }

.pd-specs span {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-2);
}

.pd-fullname {
  margin: 2px 0 0;
  font-size: .76rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

/* 結論ブロック。スクロールせずに「いくら・安いのか・どこで買うか」まで読み切れるようにする。 */
.dp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px 20px;
  margin: 0 0 22px;
}

.dp-label { margin: 0; font-size: .78rem; color: var(--ink-2); }

.dp-price {
  margin: 0;
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--price);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.dp-sub { margin: 4px 0 0; font-size: .8rem; color: var(--ink-2); }
.dp-sub .delta { margin-top: 0; }

/* 中央値との差は、価格の次に読ませたい情報。内訳と同じ大きさだと埋もれる。 */
.dp-delta { margin: 6px 0 0; }
.dp-delta .delta { font-size: .88rem; margin-top: 0; }

.dp-verdict { margin: 16px 0 0; font-size: .86rem; padding: 4px 12px; }
.dp-reason { margin: 8px 0 0; font-size: .86rem; color: var(--ink-2); line-height: 1.7; }

.dp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-2);
}

.dp-facts > div { flex: 1 1 33%; min-width: 110px; }
.dp-facts dt { margin: 0; font-size: .72rem; color: var(--ink-3); }

.dp-facts dd {
  margin: 1px 0 0;
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dp-spread { margin: 10px 0 0; font-size: .78rem; color: var(--ink-3); }

.pd-sec { margin: 0 0 26px; }
.pd-lead { margin: 0 0 12px; font-size: .86rem; color: var(--ink-2); line-height: 1.75; }
.pd-back { margin-top: 28px; font-size: .88rem; }

.facts { margin: 12px 0 0; padding-left: 1.2em; font-size: .88rem; color: var(--ink-2); }
.facts li { margin: 3px 0; }

/* ===== 外部へのボタン ================================================
   「見る」だけでは、押した先で何が起きるのか分からない。行き先の店名を必ず入れる。 */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--brand);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--brand);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.cta:hover { background: var(--brand-bg); }

.cta--primary {
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
}

.cta--primary:hover { background: var(--brand-2); }
.cta-arrow { font-weight: 400; }

/* ===== ストア内訳表 =================================================== */
.table-scroll { overflow-x: auto; }

table.prices {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: .88rem;
}

table.prices caption {
  caption-side: bottom;
  padding: 8px 2px 0;
  font-size: .74rem;
  color: var(--ink-3);
  text-align: left;
}

table.prices th,
table.prices td { padding: 12px 12px; border-bottom: 1px solid var(--line-2); text-align: left; }
table.prices thead th { background: #fafbfc; font-size: .76rem; color: var(--ink-2); font-weight: 600; }
table.prices tbody tr:last-child th,
table.prices tbody tr:last-child td { border-bottom: 0; }
table.prices .num { text-align: right; font-variant-numeric: tabular-nums; }
table.prices .strong { font-weight: 700; color: var(--price); }
table.prices .act { text-align: right; width: 1%; }
table.prices tr.best { background: var(--price-bg); }
table.prices tr.best th[scope="row"]::after {
  content: "最安";
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--price);
  color: #fff;
  font-size: .66rem;
}
.cond-used { color: var(--warn); font-weight: 600; }

/* ===== チャート ======================================================= */
.chart {
  margin: 0;
  padding: 14px 10px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.chart svg { width: 100%; height: auto; max-height: 260px; font-family: inherit; display: block; }

/* ===== 絞り込み・並び替え ==============================================
   JavaScript を使わないので、並び替えは別ページへのリンクで表現する。
   選ばれている状態を色で示して、いま何順で見ているかを分かるようにする。 */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

.toolbar-count { font-size: .82rem; color: var(--ink-2); margin-right: auto; }
.toolbar-count b { color: var(--ink); font-size: 1rem; }

.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: .82rem;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.chips-label { font-size: .78rem; color: var(--ink-3); white-space: nowrap; }

nav.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 24px 0 0;
  font-size: .88rem;
}

nav.pager span { color: var(--ink-3); }

nav.hubs { margin: 18px 0 0; font-size: .86rem; }

/* ===== トップページ =================================================== */
.hero { margin: 0 0 26px; }
.hero h1 { font-size: 1.7rem; margin-bottom: 10px; }
.hero p { margin: 0; max-width: var(--prose); color: var(--ink-2); font-size: .95rem; }
.hero strong { color: var(--ink); }

.cat-grid {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

/* ラベルと件数を横並びにすると「フェアウェイウッド」で折り返して件数が押し出される。
   縦に積んで、どのカテゴリでも同じ形に見えるようにする。 */
.cat-grid a {
  display: block;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}

.cat-grid a:hover { border-color: var(--brand); color: var(--brand); }
.cat-grid small { display: block; margin-top: 2px; color: var(--ink-3); font-weight: 400; font-size: .74rem; }

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.sec-head h2 { margin: 0; }
.sec-head a { font-size: .84rem; }

.howto {
  margin: 34px 0 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.howto h2 { font-size: 1rem; }
.howto dl { margin: 0; font-size: .88rem; }
.howto dt { font-weight: 700; margin-top: 12px; }
.howto dt:first-child { margin-top: 0; }
.howto dd { margin: 3px 0 0; color: var(--ink-2); line-height: 1.75; }

/* ===== 画面下に貼り付く行動導線 ========================================
   position: sticky だけで作る。出現の制御に JavaScript は使わない。 */
.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
}

.sc-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.sc-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--price);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sticky-cta .cta {
  flex: 1 1 auto;
  min-height: 46px;
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  margin: 0;
  width: auto;
}

/* ===== 狭い画面 ======================================================= */
@media (max-width: 720px) {
  body { font-size: 14.5px; }

  main { padding: 12px 12px 32px; }
  nav.crumbs { padding: 8px 12px 0; }

  h1 { font-size: 1.3rem; }
  .hero h1 { font-size: 1.4rem; }

  /* 画像は小さくし、価格を名前の下に回して1行の幅を稼ぐ。
     3列のままだと商品名が2文字ずつ折り返して読めなくなる。 */
  .pc-link {
    grid-template-columns: 72px 1fr;
    gap: 12px;
    padding: 11px 12px;
    align-items: start;
  }

  .pc-img { width: 72px; height: 72px; }
  .pc-link:has(.pc-img--none) { grid-template-columns: 1fr; }

  .pc-price {
    grid-column: 2;
    text-align: left;
    margin-top: 6px;
  }

  .pc-link:has(.pc-img--none) .pc-price { grid-column: 1; }
  .pc-amount { font-size: 1.35rem; }
  .pc-unit { display: inline; margin-left: 6px; }
  .delta { display: block; margin-top: 2px; }

  .dp { padding: 16px 14px 18px; }
  .dp-price { font-size: 1.95rem; }
  .dp-facts > div { flex: 1 1 50%; }

  .sticky-cta { display: flex; }

  /* 内訳表は横スクロールさせず、ストアごとの塊に畳む。
     6列を横に押し込むと、どの数字が何なのか分からなくなる。 */
  table.prices { min-width: 0; }
  table.prices thead { display: none; }
  table.prices, table.prices tbody, table.prices tr, table.prices th, table.prices td { display: block; }

  table.prices tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-2);
  }

  table.prices tr:last-child { border-bottom: 0; }
  table.prices th[scope="row"] { padding: 0 0 8px; font-size: .95rem; border: 0; }

  table.prices td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    border: 0;
    text-align: right;
  }

  table.prices td::before {
    content: attr(data-label);
    color: var(--ink-3);
    font-size: .78rem;
  }

  /* 表を畳むと caption の幅が潰れて、1文字ずつ縦に並んでしまう。
     ブロックに戻して行として読めるようにする。 */
  table.prices caption { display: block; padding: 10px 0 0; }

  /* デスクトップで幅を詰めるために width:1% を当てている。
     ブロックに畳んだあともそれが効くと、ボタンが数十pxに潰れる。 */
  table.prices td.act {
    display: block;
    width: auto;
    padding: 10px 0 0;
  }

  table.prices td.act::before { content: none; }
  table.prices td.act .cta { width: 100%; }
}

/* ===== 読み物記事 =============================================== */
/* 商品ページは表が主役だが、記事は文章が主役。
   1行の長さと行間だけは商品ページと変えてある。 */

.guide {
  background: var(--card);
  border-radius: 10px;
  padding: 24px 28px 32px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.guide h1 {
  font-size: 1.6rem;
  line-height: 1.4;
  margin: 0 0 6px;
}

.guide-updated {
  margin: 0 0 18px;
  font-size: .8rem;
  color: #6b7280;
}

.guide-lead {
  margin: 0 0 20px;
  font-size: 1.02rem;
  line-height: 1.9;
}

.guide h2 {
  font-size: 1.18rem;
  line-height: 1.5;
  margin: 34px 0 12px;
  padding-left: 10px;
  border-left: 4px solid var(--brand);
}

.guide p,
.guide li {
  line-height: 1.95;
  max-width: 42em;
}

.guide ul,
.guide ol {
  margin: 12px 0 12px 1.3em;
  padding: 0;
}

.guide li {
  margin: 6px 0;
}

.guide-note {
  margin: 14px 0;
  padding: 12px 14px;
  background: #f0f6f3;
  border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0;
  font-size: .92rem;
}

/* 目次。長い記事で現在地を見失わないためのもの。 */
.toc {
  margin: 20px 0 8px;
  padding: 14px 18px;
  background: var(--bg);
  border-radius: 8px;
}

.toc-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: .9rem;
}

.toc ol {
  margin: 0 0 0 1.2em;
  padding: 0;
}

.toc li {
  margin: 4px 0;
  line-height: 1.7;
}

/* 記事中の表。横に長い表でペーゴと横スクロールさせない。 */
.table-scroll {
  overflow-x: auto;
  margin: 16px 0;
}

.guide-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: .93rem;
}

.guide-table th,
.guide-table td {
  border: 1px solid #e3e6ea;
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.guide-table thead th {
  background: var(--bg);
  font-size: .86rem;
}

.guide-table tbody th {
  background: #fafbfc;
  font-weight: 600;
  white-space: nowrap;
}

/* よくある質問。構造化データと見た目を一致させておく。 */
.guide-faq .faq-item {
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid #eceff2;
}

.guide-faq .faq-item:last-child {
  border-bottom: 0;
}

.faq-q {
  margin: 0 0 6px;
  font-weight: 700;
}

.faq-q::before {
  content: "Q. ";
  color: var(--brand);
}

.faq-a {
  margin: 0;
}

.faq-a::before {
  content: "A. ";
  color: var(--price);
  font-weight: 700;
}

/* 記事から価格ページへ戻す導線。 */
.related {
  margin-top: 34px;
  padding: 18px 20px;
  background: var(--bg);
  border-radius: 8px;
}

.related h2 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-size: 1.05rem;
}

.related-lead {
  margin: 12px 0 4px;
  font-size: .85rem;
  font-weight: 700;
  color: #4b5563;
}

.related-links {
  margin: 0 0 0 1.2em;
  padding: 0;
}

/* 記事一覧 */
.guide-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.guide-card a {
  display: block;
  background: var(--card);
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
}

.guide-card a:hover {
  border-color: var(--brand);
}

.guide-card-title {
  display: block;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 6px;
  line-height: 1.5;
}

.guide-card-desc {
  display: block;
  font-size: .88rem;
  color: #4b5563;
  line-height: 1.75;
}

@media (max-width: 720px) {
  .guide {
    padding: 18px 16px 26px;
  }

  .guide h1 {
    font-size: 1.35rem;
  }
}
/* ===== 記事の図版 ==============================================
   並べ方は HTML、絵だけ SVG。1枚の SVG にまとめると狭い画面で
   文字が潰れて読めなくなるため、折り返せる形にしてある。 */

.fig-wrap {
  margin: 24px 0;
  padding: 16px 18px 14px;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
}

.fig-wrap > figcaption {
  margin: 12px 0 0;
  max-width: 42em;
  font-size: .82rem;
  line-height: 1.75;
  color: #6b7280;
}

.fig-wrap .fg-svg {
  display: block;
  width: 100%;
  /* 引き伸ばすと図の中の文字だけが大きくなって不格好になる。 
     描いたときの大きさを上限にして、あとは中央に置く。 */
  max-width: 480px;
  height: auto;
  margin-inline: auto;
  font-family: inherit;
}

.fg-head .fg-svg {
  max-width: 190px;
}

.fig-wrap .fg-note {
  margin: 10px 0 0;
  max-width: none;
  font-size: .78rem;
  line-height: 1.7;
  color: #6b7280;
}

.fig-wrap ul,
.fig-wrap ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 実質価格の式 */
.fg-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

.fg-box {
  flex: 1 1 132px;
  padding: 12px 10px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  text-align: center;
}

.fg-box b {
  display: block;
  font-size: .98rem;
}

.fg-box span {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  color: #6b7280;
}

.fg-box.is-point {
  background: #e8f1ec;
  border-color: rgba(21, 101, 63, .35);
}

.fg-box.is-point b {
  color: var(--brand);
}

.fg-box.is-net {
  background: #fbe9ec;
  border-color: rgba(208, 38, 58, .4);
}

.fg-box.is-net b {
  color: var(--price);
}

.fg-op {
  align-self: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #6b7280;
}

/* 順位の入れ替わり */
.fg-swap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.fg-panel {
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 8px;
}

.fg-panel.is-after {
  background: #e8f1ec;
}

.fg-panel-head {
  margin: 0 0 8px;
  font-size: .85rem;
  font-weight: 700;
  color: #6b7280;
}

.fg-panel.is-after .fg-panel-head {
  color: var(--brand);
}

.fg-rank-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0 0 6px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 6px;
  max-width: none;
  line-height: 1.5;
}

.fg-rank-list li.is-win {
  border-color: rgba(21, 101, 63, .5);
}

.fg-rank {
  font-size: .75rem;
  font-weight: 700;
  color: #6b7280;
}

.fg-name {
  font-weight: 700;
}

.fg-val {
  font-variant-numeric: tabular-nums;
}

.fg-rank-list li.is-win .fg-val {
  color: var(--price);
  font-weight: 700;
}

.fg-sub {
  grid-column: 2 / -1;
  font-size: .72rem;
  color: #6b7280;
}

.fg-swap-arrow::after {
  content: "→";
  font-size: 1.3rem;
  color: var(--brand);
}

/* 1年の流れ */
.fg-lane {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  align-items: center;
  min-height: 26px;
}

.fg-lane-label {
  margin: 14px 0 4px;
  font-size: .8rem;
  font-weight: 700;
}

.fg-lane-label:first-child {
  margin-top: 0;
}

.fg-lane-label.is-brand { color: var(--brand); }
.fg-lane-label.is-price { color: var(--price); }
.fg-lane-label.is-warn  { color: #b26a00; }

.fg-band {
  display: block;
  padding: 5px 2px;
  border-radius: 5px;
  font-size: .72rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.fg-band.is-brand {
  background: #e8f1ec;
  border: 1px solid rgba(21, 101, 63, .4);
  color: var(--brand);
}

.fg-band.is-warn {
  background: #fbf1e0;
  border: 1px solid rgba(178, 106, 0, .4);
  color: #b26a00;
}

.fg-sale .is-sale {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto;
  border-radius: 50%;
  background: #fbe9ec;
  border: 2px solid var(--price);
}

.fg-months span {
  font-size: .7rem;
  color: #6b7280;
  text-align: center;
  border-top: 1px solid #e3e6ea;
  padding-top: 4px;
}

/* 買い時スコアの帯 */
.fg-gauge {
  padding-top: 26px;
}

.fg-gauge-mark {
  position: relative;
  height: 0;
}

.fg-gauge-mark span {
  position: absolute;
  bottom: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 700;
  color: var(--price);
}

.fg-gauge-mark span::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--price);
}

.fg-gauge-bar {
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  border: 1px solid #e3e6ea;
  border-radius: 6px;
  overflow: hidden;
}

.fg-seg {
  padding: 9px 4px;
  text-align: center;
  font-size: .84rem;
}

.fg-seg.is-buy  { background: #e8f1ec; color: var(--brand); font-weight: 700; }
.fg-seg.is-mid  { background: var(--bg); color: #6b7280; }
.fg-seg.is-high { background: #fbe9ec; color: var(--price); }

.fg-gauge-ends {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: .72rem;
  color: #6b7280;
}

/* モール比較の表 */
.fg-mall td {
  position: relative;
  white-space: nowrap;
}

.fg-mall td.is-win {
  background: #e8f1ec;
  color: var(--brand);
  font-weight: 700;
}

.fg-mall td.is-win em {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--brand);
  color: #fff;
  font-size: .68rem;
  font-style: normal;
  font-weight: 700;
}

/* アイアンのヘッド形状 */
.fg-heads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.fg-head {
  margin: 0;
  padding: 10px 8px 12px;
  background: var(--bg);
  border-radius: 8px;
  text-align: center;
}

.fg-head figcaption b {
  display: block;
  font-size: .9rem;
}

.fg-head figcaption span {
  display: block;
  margin-top: 4px;
  font-size: .74rem;
  color: #6b7280;
  line-height: 1.6;
}

/* 中古のチェック箭所 */
.fg-points {
  counter-reset: fgp;
  margin-top: 12px !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 18px;
}

.fg-points li {
  counter-increment: fgp;
  max-width: none;
  font-size: .86rem;
  line-height: 1.7;
  margin: 0;
}

.fg-points li::before {
  content: counter(fgp);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--price);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.fg-points b {
  margin-right: 6px;
}

/* 最初に揃える本数 */
.fg-set-group {
  margin-bottom: 14px;
}

.fg-set-title {
  margin: 0 0 6px;
  font-size: .82rem;
  font-weight: 700;
  color: #6b7280;
}

.fg-clubs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fg-clubs li {
  width: 62px;
  margin: 0;
  max-width: none;
  text-align: center;
}

.fg-clubs svg {
  display: block;
  width: 34px;
  height: 60px;
  margin: 0 auto;
}

.fg-clubs span {
  display: block;
  font-size: .72rem;
  line-height: 1.4;
}

@media (max-width: 620px) {
  .fg-swap {
    grid-template-columns: 1fr;
  }

  /* 式は横に折り返すと演算子が行頭ヶ行末に来て読みにくい。縦に積む。 */
  .fg-formula {
    flex-direction: column;
    gap: 4px;
  }

  .fg-op {
    align-self: center;
  }

  .fg-swap-arrow {
    text-align: center;
  }

  .fg-swap-arrow::after {
    content: "↓";
  }

  .fig-wrap {
    padding: 14px 12px 12px;
  }
}


/* ===== 2回目の見直しで足した部品 ====================================
   一覧カードに「押せる」ことと「何と比べた価格か」を足す。
   詳細では、最安との差額と、ポイントの前提を書く。 */

/* 一覧の先頭で1度だけ状態を伝える。各カードに同じバッジを並べない。 */
.notice {
  margin: 0 0 10px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r);
  font-size: .82rem;
  color: var(--ink-2);
}

/* 2モールとも値があるときだけ出す。片方しか無いのに比較済みには見せない。 */
.pc-malls {
  display: block;
  margin-top: 6px;
  font-size: .76rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pc-malls i { margin: 0 6px; color: var(--line); font-style: normal; }

/* カード全体がリンクでも、PCでは押せることが見た目に出ない。 */
.pc-go {
  display: block;
  margin-top: 6px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--brand);
}
.pc-go i { font-style: normal; margin-left: 2px; }

.dp-mall {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .74rem;
  color: var(--ink-2);
}

.dp-note {
  margin: 10px 0 0;
  font-size: .74rem;
  line-height: 1.6;
  color: var(--ink-3);
}

/* 最安との差額。2位を選ぶ理由も、選ばない理由もここで決まる。 */
table.prices td .gap {
  display: block;
  font-weight: 500;
  font-size: .72rem;
  color: var(--ink-3);
}

.sc-note { font-size: .74rem; color: var(--ink-3); }

.dp-observed{
  margin: 8px 0 0;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ===== 商品画像 ======================================================
   楽天ウェブサービスが返す mediumImageUrl は128pxまで。引き伸ばすと粗くなるので
   一覧96px・詳細112pxに収め、画像そのものは複製せずURLのまま表示する。 */
.pd-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.pd-head-text { min-width: 0; }

.pd-img {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.credit { margin: 6px 0 0; }
.credit a { color: var(--ink-3); text-decoration: none; }
.credit a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .pd-head { gap: 12px; }
  .pd-img { width: 84px; height: 84px; }
}