:root{
  /* 紙とインク（見た目改修・2026-09-24。見本 mock_src.html のトークンを
     移植。--bg は既存クラスが「カード＝白」の意味で使っているため白のまま
     残し、ページ地の色だけ --paper として別に持つ）。 */
  --paper:#FAF7F1;
  --bg:#ffffff; --fg:#1E2635; --muted:#6B7280; --line:#E8E1D3; --line-strong:#D6CCB8;
  --soft:#FCFAF6;
  --accent:#23324D; --low:#1E7A4F; --high:#A8452F;
  --low-wash:#E7F3EC; --high-wash:#F7E9E4;
  --marker:#FFE7A0;
  --radius:14px; --radius-sm:8px;
  --shadow:0 1px 0 rgba(30,38,53,.04),0 6px 20px -12px rgba(30,38,53,.18);
  /* カテゴリーの淡色。アイコンの下地にのみ使う（色数を増やさない方針の
     例外として、CLAUDE.mdの「アクセントカラーは最小限」を尊重し彩度を
     抑えた淡色に留める）。 */
  --c-food:#FBE9D7; --c-beverage:#E1ECF7; --c-household:#E3F1EA; --c-health:#F5E3EC;
  --c-electronics:#E7E5F6; --c-home:#F2EADB; --c-outdoor:#E4EFDF; --c-other:#EFEAE0;
  /* 2026-09-25 段階H（衣類・ペット用品カテゴリー新設）。既存の淡色と
     衝突しないよう、衣類は鈍いローズ、ペットはくすんだサンドを充てた。 */
  --c-apparel:#F1E1E6; --c-pet:#EDE6D6;
  /* --chart-axis は以前 #9aa3ad（白地で2.56:1）で、グラフの向きを読ませる
     グラフィカル要素としてWCAGの3:1未達だった。#6b7480（4.74:1）に変更
     （デザイン仕様 §3・2026-09-22）。 */
  --chart-bg:#ffffff; --chart-grid:#e3e6ea; --chart-axis:#6b7480;
  /* グラフの基調色は青(#1f6feb)ではなくブランドの紺（--accent/--brand）に
     揃える（見た目改修・2026-09-24・オーナー指示）。最安の緑・最高の
     煉瓦色はそのまま維持する。 */
  --chart-line:#23324D; --chart-low:#1a7f37; --chart-high:#cf222e;
  --chart-text:#3d4650;

  /* スペーシング（4px刻み。デザイン仕様 §2）。
     intra-component: space-1/2、component padding: space-3/4、
     section-to-section: space-6/7 を目安にする。 */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* タイプスケール（デザイン仕様 §2）。11px（--text-2xs）は
     短いローマ字・カタカナ表記のラベルにのみ使う。日本語の文・句には
     使わない（太字700で崩れる「インクの滲み」を避けるため、13px以上）。
     --text-displayはホームと分析3ページ冒頭の大きな数字専用（見た目改修
     2026-09-22）。--text-display-smは脇に添える二次的な数字用。 */
  --text-2xl:28px; --text-xl:20px; --text-lg:19px; --text-md-strong:22px;
  --text-base:16px; --text-sm:14px; --text-xs:13px; --text-2xs:11px;
  --text-display:56px; --text-display-sm:36px;

  /* セクション帯の3色目（見た目改修・2026-09-22）。色数を増やさない方針
     のため、アクセントを4%だけ薄めた面にとどめる。 */
  --accent-wash:rgba(9,105,218,.05);
}
*{box-sizing:border-box}
/* full-bleed（下記）が100vwを使うため、スクロールバー幅ぶんの誤差で
   横スクロールが出ないようにhtml/bodyでガードする。main側では絶対に
   overflow-xを絞らない——それをやるとfull-bleedの「はみ出す」効果自体が
   消える（コーディネーター指摘・2026-09-22）。 */
html{overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--fg);overflow-x:hidden;
  font:var(--text-base)/1.8 system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
  font-feature-settings:"palt"}
main{max-width:840px;margin:0 auto;padding:0 20px 48px}
a{color:var(--accent)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* 「フルブリード」帯：mainの840px制約を意図的に破り、ビューポート
   いっぱいに広げる（ホームのヒーロー・/wall/ 用・コーディネーター指摘・
   2026-09-22）。左右をvw基準で相殺するので、mainのpadding/max-widthとは
   独立に効く。内側は独自のmax-widthとガター（モバイルでも最小限の余白は
   残す）を持つ。 */
.full-bleed{width:100vw;position:relative;left:50%;right:50%;
  margin-left:-50vw;margin-right:-50vw}
.full-bleed-inner{max-width:1100px;margin:0 auto;padding:0 20px;box-sizing:border-box}

/* 動き（デザイン仕様 §6）。動いてよいのはホバー・フォーカスの
   background / border-color だけ。グラフや数値は演出しない——
   「ずっとそこにあった記録」という信頼性の一部だから。 */
a,.pager a,.month-links a,.header-search button,.search-submit,
.cards .card-link,.badge{
  transition:background-color .12s ease,border-color .12s ease}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    scroll-behavior:auto !important}
}

/* アクセシビリティ: フォーカス可視化とスキップリンク（2026-09-21） */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.skip-link{position:absolute;left:8px;top:-48px;background:var(--accent);color:#fff;
  padding:10px 16px;border-radius:6px;z-index:10;text-decoration:none;
  font-size:var(--text-sm);font-weight:700;transition:top .15s}
.skip-link:focus{top:8px}

.site-header{border-bottom:1px solid var(--line);padding:6px 20px;
  display:flex;gap:4px 20px;align-items:center;flex-wrap:wrap}
.site-name{font-weight:700;text-decoration:none;color:var(--fg)}
/* タップ領域44px以上を確保する（アクセシビリティ改善・2026-09-21・項目4）。
   以前はpadding無しの地の文リンクで25〜28px高しかなかった。 */
.site-nav{display:flex;gap:4px;flex-wrap:wrap;font-size:var(--text-sm)}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;
  padding:0 10px;text-decoration:none}
.site-nav a:hover{text-decoration:underline}

/* ヘッダー検索（トップ以外の全ページ・2026-09-21・SITE_SPEC.md §6）。
   JSに依存しない素のGETフォームなので、複雑な状態は持たない。 */
.header-search{display:flex;gap:6px;flex:1 1 220px;max-width:320px;min-width:160px}
.header-search input[type="search"]{flex:1 1 auto;min-width:0;min-height:44px;
  font-size:var(--text-sm);padding:0 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);color:var(--fg)}
.header-search button{min-height:44px;padding:0 14px;border:1px solid var(--accent);
  border-radius:6px;background:var(--accent);color:#fff;font-size:var(--text-xs);
  font-weight:700;cursor:pointer;white-space:nowrap}
.header-search button:hover{opacity:.9}

.breadcrumb{max-width:840px;margin:0 auto;padding:var(--space-3) 20px 0;
  font-size:var(--text-xs);color:var(--muted)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumb li+li::before{content:"›";margin-right:6px;color:var(--line)}

h1{font-size:var(--text-2xl);line-height:1.5;margin:var(--space-4) 0 var(--space-1)}
h2{font-size:var(--text-xl);line-height:1.5;margin:var(--space-6) 0 var(--space-3);
  padding-bottom:var(--space-2);border-bottom:1px solid var(--line)}
.subtitle{color:var(--muted);font-size:var(--text-xs);margin:0 0 var(--space-2)}
/* 見出し直下の日付アンカー（2026-09-20夜）。現在形の見出しが実況に
   読めないよう、.note より目立たせて見出しの直後に置く。 */
.date-anchor{color:var(--fg);font-size:var(--text-xs);font-weight:700;margin:0 0 var(--space-1)}
.headline{font-size:17px;font-weight:600;margin:var(--space-4) 0 0}
.stale-note{background:var(--soft);border-left:3px solid var(--muted);
  padding:var(--space-3) var(--space-4);margin:var(--space-4) 0;
  font-size:var(--text-sm);color:var(--muted)}

/* 検証ブロック（商品ページの冒頭・2026-09-21・項目1／2026-09-24 控えめに
   変更）。答えのカードの直下にあり、同じ結論を言い換えているだけなので
   重複して太字で目立たせない。左の細い線だけを残した控えめな1段落にする
   （オーナー指示）。 */
.verdict{border-left:2px solid var(--line-strong);padding:0 0 0 var(--space-3);
  margin:var(--space-3) 0 0}
.verdict-text{margin:0;font-size:15px;font-weight:400;line-height:1.7;color:var(--fg)}

figure{margin:var(--space-5) 0 0}
figcaption{font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-2)}
svg.price-chart,svg.dist-hist{border:1px solid var(--line);border-radius:8px}
/* 375px幅でviewBoxをそのまま縮めると軸ラベルが読めなくなるため
   （2026-09-21）、グラフ本体だけ横スクロール領域にして実寸に近い
   サイズで描く。全履歴テーブルの.table-wrapと同じ考え方。
   min-widthはグラフのviewBox（720）よりやや小さく、狭い画面では
   スクロールを許容しつつ、タブレット以上では通常どおり幅いっぱいに
   広がる（100%指定はそのまま生きている）。
   分布ヒストグラム（svg.dist-hist・フラグシップページ用）も同じ理由で
   横スクロール領域に入れる（2026-09-21 追加）。 */
.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;direction:rtl}
.chart-scroll svg.price-chart{min-width:640px;direction:ltr}
.chart-scroll svg.dist-hist{min-width:560px;direction:ltr}

/* 価格推移グラフ（商品ページ・ホームの帯グラフ）のPC/スマホ出し分け
   （見た目改修・2026-09-24・オーナー指摘）。viewBox=720のPC用グラフを
   375px幅にそのまま縮めると目盛りが実寸6px相当まで潰れて読めないため、
   viewBox自体が狭い専用SVG（price-chart-mobile）をJinja側で別途生成し、
   ここで表示を切り替える。横スクロールは使わない——どちらの版も
   コンテナ幅にそのまま収まるサイズで生成済み。 */
.price-chart-mobile{display:none}
@media (max-width:600px){
  .price-chart-desktop{display:none}
  .price-chart-mobile{display:block}
}

/* 商品ページのオンライン価格比較表（.online-table）の
   PC/スマホ出し分け。PCでは列ごとの表のまま、コンパクト行は隠す
   （見た目改修・2026-09-25・外部レビュー対応）。 */
.online-price-compact{display:none}
.online-badge-inline{display:none}

/* 商品ページの掲載履歴テーブル（.history-table）のPC/スマホ出し分け。
   PCでは列ごとの表のまま、コンパクト行は隠す（見た目改修・2026-09-25・
   オーナー承認事項4。.online-tableと同じ考え方）。 */
.history-price-compact{display:none}
.history-meta-compact{display:none}

/* カード用スパークライン（Phase 7-8）。軸も数値も持たない「形だけ」の
   グラフなので、線は静かな1色。数値はカード側の.factが文字で語る。
   viewBoxは120x32だが、幅100%のままだとカード幅（240px超）まで伸びて
   縦横比が崩れて大きくなりすぎるため、実寸に近い最大幅で止める。 */
/* カードのスパークラインを少し大きくする（仕上げ・2026-09-24・項目⑦）。
   viewBoxは120x32のままなので、表示上のサイズだけ160px→190pxに広げる。 */
svg.sparkline{display:block;width:100%;max-width:190px;height:auto}
.spark-line{fill:none;stroke:var(--chart-line,#1f6feb);stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round;opacity:1}
.spark-line-flat{stroke-width:2.4}
.spark-dot-now{fill:var(--chart-line,#1f6feb)}
/* 最安の点を緑で強調する（仕上げ・2026-09-24・項目⑦）。既存の
   --lowをそのまま使う（色数を増やさない）。最終掲載が最安値と同額の
   ときはspark-dot-nowと同じ点に両方のクラスが付き、緑が優先される。 */
.spark-dot-low{fill:var(--low)}
.card-spark{margin:var(--space-2) 0 var(--space-1);display:block}

/* ホームのファーストビューに置く実物の価格推移チャート（コーディネーター
   指摘・2026-09-22）。「値動きの大きい商品を1つ選んで見せる」という
   このサイトの資産（価格の折れ線）そのものを、テキストの次に来る最初の
   視覚要素にする。full-bleedでmainの840px制約を破り、デスクトップでは
   本文と並べても軸ラベルが読める実寸に近い幅を確保する。 */
/* margin-left/rightのショートハンドは使わない。.full-bleedが
   margin-left/right:-50vwで効かせているのを、同じ詳細度で後勝ちして
   0に戻してしまうため（実機検証で発見・2026-09-22）。margin-topだけを
   個別指定する。 */
.home-hero{margin-top:var(--space-6);padding:var(--space-7) 0;
  background:var(--soft);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.home-hero-inner{display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap}
.home-hero-text{flex:1 1 220px;min-width:0}
.home-hero-chart{flex:3 1 480px;min-width:0}
.home-hero-kicker{display:block;font-size:var(--text-xs);font-weight:700;
  color:var(--muted);letter-spacing:.02em;margin:0 0 4px}
.home-hero-figure{margin:2px 0 0}
/* ファーストビューの数字（+57%等）も.findと同じ黄色マーカーで主役に
   する（見た目改修・2026-09-24・オーナー指摘・項目4）。display:block
   のままだと帯がコンテナ幅いっぱいに伸びてしまうため、この文脈だけ
   inline-blockにして文字幅に合わせる。 */
.home-hero-figure .figure-display{display:inline-block;padding:0 4px;
  margin-left:-4px;
  background:linear-gradient(transparent 60%,var(--marker) 60%)}
.home-hero-name{margin:var(--space-3) 0 0;font-size:var(--text-base);font-weight:600;line-height:1.5}
.home-hero-name a{text-decoration:none}
.home-hero-name a:hover{text-decoration:underline}
.home-hero-line{margin:var(--space-2) 0 0;font-size:var(--text-sm);
  color:var(--fg);line-height:1.7}
.home-hero-cta{margin:var(--space-2) 0 0;font-size:var(--text-xs);
  font-weight:600}
.home-hero-cta a{color:var(--accent);text-decoration:none}
.home-hero-cta a:hover{text-decoration:underline}
@media (max-width:700px){
  /* flex-wrap:wrap（基本ルール）を列方向のままにすると、高さが
     auto なコンテナでもクロス軸（幅）が内容物の最小幅（グラフの
     min-width:640px）に張られ、375px幅で画面外にはみ出す実機バグが
     あった（ブラウザ検証・2026-09-22）。モバイルでは1本の列に
     収めれば十分なので、折り返しを明示的に止める。 */
  .home-hero-inner{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  /* flex-direction:column にすると、行レイアウト用の flex-basis
     （480px／220px、いずれも「幅」の指定だったもの）が主軸＝縦方向の
     「高さ」の指定として再解釈され、グラフの実際の高さより大きい空白
     （実機で約250px）が下に残っていた（見た目改修・2026-09-25・外部
     レビュー対応）。モバイルでは中身の高さにそのまま合わせる。 */
  .home-hero-text,.home-hero-chart{flex:none}
}

/* display figure（見た目改修・2026-09-22）。ホームと分析3ページ冒頭の大きな数字。 */
.figure-display{display:block;font-size:var(--text-display);line-height:1.05;
  font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--fg);margin:0}
.figure-display.sm{font-size:var(--text-display-sm)}
/* 400px前後の狭い画面で「23,450」のような桁の多い数字が.stat-grid
   （minmax(180px,1fr)）からはみ出して見切れる実機バグを修正
   （見た目改修・2026-09-24・スクリーンショット確認で発見）。 */
@media (max-width:480px){
  .figure-display{font-size:36px}
  .figure-display.sm{font-size:26px}
}
.figure-display.accent{color:var(--accent)}
.figure-display.low{color:var(--low)}
.figure-display.high{color:var(--high)}
.figure-caption{display:block;margin-top:var(--space-2);font-size:var(--text-sm);
  color:var(--muted);line-height:1.6;max-width:32em}
.figure-block{margin:var(--space-4) 0 0}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-6) var(--space-5);margin:var(--space-5) 0 0}
.stat-grid .stat{min-width:0}

/* 季節ブロック用のパディング調整。グリッド自体は他のカード節（3列/1列）と
   揃える（見た目改修・2026-09-25・外部レビュー対応：5枚のカードが1280px
   幅で1行に詰め込まれ、文字が1文字ずつ折り返していた）。 */
.cards.dense{gap:var(--space-2)}
.cards.dense li{padding:10px 12px}
.cards.dense .fact{font-size:var(--text-base)}

/* 「壁になった3年間」（デザイン仕様 §8・Wow #1・/wall/）。406枚の
   スパークラインを隙間なく敷き詰め、写真の代わりの視覚的な物量として
   見せる。枠線やラベルは足さない——線そのものが模様になる。
   full-bleedでmainの840px制約を破り、ページ全体で「壁」として見える
   密度にする（コーディネーター指摘・2026-09-22：840px列に収まる
   「控えめな中央ブロック」では圧倒感が出ない）。 */
.wall-bleed-inner{max-width:1600px;margin:0 auto;padding:0 var(--space-4);
  box-sizing:border-box}
.wall-grid{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.wall-tile{display:block;background:var(--bg);padding:5px 6px;text-decoration:none}
.wall-tile:hover,.wall-tile:focus-visible{background:var(--soft)}
.wall-tile svg{display:block;width:100%;height:auto}

/* 1pxのgapに線色を敷く手は、項目数が列数の倍数でないと空セルが
   線色のまま残って壊れて見える。セル側のborderで区切る。 */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;margin:var(--space-4) 0 0;padding:0;list-style:none}
.facts div{padding:var(--space-3) 14px;border-right:1px solid var(--line);
  border-top:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts dt{font-size:var(--text-xs);color:var(--muted);margin:0}
/* 価格の数字は本文より格上に見せる（デザイン仕様 §2・§5）。
   数字専用サイトなので、数字がいちばん強い要素であるべき。 */
.facts dd{margin:2px 0 0;font-size:var(--text-md-strong);font-weight:700;
  line-height:1.3;font-variant-numeric:tabular-nums}
.facts .low dd{color:var(--low)}
.facts .high dd{color:var(--high)}
.facts .sub{font-size:var(--text-xs);font-weight:400;color:var(--muted);display:block}

.analysis p{margin:0 0 var(--space-3)}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:var(--text-sm);min-width:560px}
/* /category/{slug}/ の「内容量／単価」「推移」列（Phase 7-8） */
.facts-cell{text-align:left;white-space:normal;font-size:var(--text-xs);min-width:120px}
.facts-cell .quantity-text{display:block;color:var(--fg)}
.spark-cell{width:130px;padding-top:6px;padding-bottom:6px}
.spark-cell svg{width:120px}
th,td{padding:9px var(--space-3);text-align:right;border-bottom:1px solid var(--line);
  white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{background:var(--soft);font-size:var(--text-xs);color:var(--muted);
  position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
td.is-low{color:var(--low);font-weight:600}
td.na{color:var(--muted)}
.section-cell{font-size:var(--text-xs);color:var(--muted);white-space:normal}

/* ランキング表の順位列（デザイン仕様 §5）。行の並び順そのものが
   根拠なので新しい集計はしない。1〜3位だけ太字で目を止まらせる。
   アイコン・メダルは使わない（CLAUDE.mdの装飾禁止方針）。 */
.rank-cell{width:2.4em;text-align:center !important;color:var(--muted);
  font-size:var(--text-sm);font-weight:700;font-variant-numeric:tabular-nums}
/* 上位3件は数字そのものを大きくして目を止める（見た目改修・2026-09-24・
   オーナー指摘・項目2）。メダル絵文字は使わない方針のため、大きさと
   ブランドの紺だけで差を付ける。 */
.rank-cell.rank-top{color:var(--accent);font-weight:800;font-size:22px}

/* 全履歴テーブルの年区切り行（2026-09-21・項目3） */
.year-row td{background:var(--soft);font-weight:700;font-size:var(--text-xs);
  text-align:left;color:var(--fg);padding:6px var(--space-3)}
/* 最高値・最安値・中央値の要約（.factsと同じ見た目を流用） */
.summary-row{margin:var(--space-3) 0 var(--space-4)}

/* 掲載カレンダー（見た目改修・2026-09-24・オーナー指示／2026-09-24
   検算修正: 薄すぎて判別できないとの指摘）。年×月のマス目。375pxでも
   横にはみ出さないよう table-layout:fixed で13列（年ラベル＋1〜12月）を
   常にコンテナ幅いっぱいに割り付ける。

   色は非テキスト要素として本文の地色（--paper #FAF7F1）に対し常に
   コントラスト比3:1以上を確保する（WCAG 1.4.11相当。実測値は下記）:
     掲載あり   #79818F（--accentを地色に60%重ねた濃さ）  vs paper 3.67:1
     最安値同額 #1E7A4F（--lowそのもの・薄め無し）        vs paper 4.97:1
     範囲外の縞 #888D97（--mutedを地色に80%重ねた濃さ）    vs paper 3.12:1
   「掲載なし」は白のまま（他の3状態と地色そのもので区別がつく）。 */
.cal-table{table-layout:fixed;width:100%;min-width:0;border-collapse:collapse;
  font-size:11px;margin-top:var(--space-2)}
.cal-table th,.cal-table td{border:1px solid var(--line);padding:2px 1px;
  text-align:center;white-space:nowrap}
.cal-table thead th{position:static;font-weight:600}
.cal-year-head{width:28px;font-weight:700;background:var(--soft)}
.cal-cell{height:22px;padding:0}
.cal-none{background:var(--bg)}
.cal-has{background:#79818F;border-color:var(--accent)}
.cal-lowest{background:var(--low);border-color:var(--low)}
.cal-out{background:repeating-linear-gradient(45deg,#888D97,#888D97 3px,
  var(--bg) 3px,var(--bg) 6px)}
@media (max-width:480px){.cal-table{font-size:10px}.cal-cell{height:18px}}
.cal-legend{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;
  margin:8px 0 var(--space-4);font-size:var(--text-2xs);color:var(--muted)}
.cal-legend li{display:flex;align-items:center;gap:4px}
.cal-swatch{display:inline-block;width:12px;height:12px;border:1px solid var(--line);
  border-radius:2px;flex:none}
.cal-swatch.cal-none{background:var(--bg)}
.cal-swatch.cal-has{background:#79818F;border-color:var(--accent)}
.cal-swatch.cal-lowest{background:var(--low);border-color:var(--low)}
.cal-swatch.cal-out{background:repeating-linear-gradient(45deg,#888D97,
  #888D97 2px,var(--bg) 2px,var(--bg) 4px)}

/* 一覧・比較テーブルのレスポンシブ表示（アクセシビリティ改善・2026-09-21・
   コーディネーター指摘）。列を絞って並べ替えても334px幅（375pxの実効幅）
   には収まらなかった（/category/food/ 609px、/compare/ 654px）。
   700px未満は<table>のDOM構造はそのまま（クローラー・スクリーンリーダー
   向けに変えない）、見た目だけ1行1カードに積み替える。
   theadは.visually-hiddenと同じ手法で視覚的にだけ隠す（読み上げには残す）。
   各td.name-cell以外のセルは、テンプレート側で付けた data-label 属性
   （thのテキストと同じ）を ::before でラベルとして出す。 */
@media (max-width:700px){
  /* この幅ではカード表示になり、横スクロールは発生しない。
     案内文（「横にスクロールできます」）は出さない。 */
  .scroll-hint{display:none}
  .stack-table{min-width:0;width:100%}
  .stack-table thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .stack-table,.stack-table tbody,.stack-table tr{display:block;width:100%}
  .stack-table tr{border:1px solid var(--line);border-radius:8px;
    margin:0 0 var(--space-3);background:var(--bg)}
  .stack-table tr:last-child{margin-bottom:0}
  .stack-table td{display:block;width:auto;text-align:left;
    white-space:normal;border-bottom:0;padding:5px 14px}
  .stack-table td:first-child{padding-top:var(--space-3)}
  .stack-table td:last-child{padding-bottom:var(--space-3)}
  /* thのテキストをラベルとして先頭に出す。商品名セルは見出しそのものなので
     ラベルを付けない（data-labelをテンプレート側で付与していない）。 */
  .stack-table td[data-label]::before{
    content:attr(data-label);display:block;font-size:var(--text-2xs);
    color:var(--muted);font-weight:600;margin-bottom:2px}
  .stack-table td.name-cell{min-width:0;max-width:none;padding-bottom:8px}
  /* 商品名リンクはカードの見出し。タップ領域44px以上を確保する
     （アクセシビリティ改善・2026-09-21・項目4）。 */
  .stack-table td.name-cell a{display:flex;align-items:center;
    min-height:44px;font-size:15px}
  /* ページが最も見せたい数値を、ホームのカードと同じ太字・大きめサイズに
     する（コーディネーター指摘／デザイン仕様 §5）。 */
  .stack-table td.metric{font-size:var(--text-md-strong);font-weight:700;
    font-variant-numeric:tabular-nums}
  .stack-table td.metric::before{margin-bottom:4px}
  .stack-table .facts-cell,.stack-table .spark-cell{width:auto;min-width:0}
  .stack-table .spark-cell svg{width:100%;max-width:220px}
  /* ステータスのバッジ類は価格の数字と並べない（デザイン仕様 §5・§9.5）。
     数字がその行でいちばん強い要素であるべきなので、バッジは金額の下に
     折り返す。CSSはinclude経由で全ページに載るため、ここにはページ固有の
     バッジ文言そのものは書かない（既存の .badge.gap コメントと同じ方針）。 */
  .stack-table td .badge{display:inline-block;margin:4px 4px 0 0;vertical-align:top}

  /* オンライン価格テーブル専用のコンパクト行（見た目改修・2026-09-25・
     外部レビュー対応）。配信日・通常価格・割引・セール価格・備考が別々の
     ラベル付き行になり背の高いカードが並んでいたのを、配信日1行＋価格1行
     （＋対応関係を推定した号だけ注記バッジをインライン）にする。
     PC用の4列は隠し、コンパクト行だけ出す。 */
  .online-table td.online-desktop-only{display:none}
  .online-table td.online-price-compact{display:block;padding-top:0;
    font-size:var(--text-md-strong);font-weight:700;font-variant-numeric:tabular-nums}
  .online-badge-inline{display:inline-block;margin:0 0 0 8px;vertical-align:middle}

  /* 掲載履歴テーブルのスマホカード圧縮（見た目改修・2026-09-25・
     オーナー承認事項4）。以前は配信日／通常価格／割引／セール価格／
     セール期間／セクションがそれぞれラベル付きの1行になり、1件が縦に
     長いカードになっていた（.online-tableで先に直した問題と同じ）。
     配信日1行＋価格1行（＋あれば単価／セール期間／セクションをまとめた
     小さい注記1行）に詰める。PC用の5列（通常価格・割引・セール価格・
     セール期間・セクション）は隠し、コンパクト行だけ出す。 */
  .history-table td.history-desktop-only{display:none}
  .history-table td.history-price-compact{display:block;padding-top:0;
    font-size:var(--text-md-strong);font-weight:700;font-variant-numeric:tabular-nums}
  .history-table td.history-meta-compact{display:block;padding-top:2px;
    padding-bottom:var(--space-3);color:var(--muted);font-size:var(--text-2xs)}

  /* ランキング表のスマホカード（見た目改修・2026-09-24オーナー指摘・
     2026-09-24追加改修「カードを詰める」）。1件が画面の約3分の1を
     占めていた（名前・変化率・直近・最安が別々の見出し付き行として
     縦に並んでいたため）のを、約半分の高さに詰める：
       1行目 = 順位＋アイコン＋商品名（2行クランプ）＋右端に変化率（大・色分け）
       2行目 = 「直近 ¥X ／ 最安 ¥Y」を1行で（.mobile-combineがlow-cellの
                複製を出し、本来のlow-cellはこの幅では隠す）
       3行目 = ITEM#と掲載回数・最終掲載（.mobile-metaがname-cell内の
                item-noの複製を出し、本来のitem-noはこの幅では隠す）
     表のDOM順（rank→name→metric→latest→low）は変えず、grid配置と
     複製要素の出し分けだけで見た目を組み替える。 */
  .rank-table tbody tr{display:grid;grid-template-columns:28px 1fr auto;
    column-gap:8px;row-gap:1px;align-items:start}
  .rank-table td{padding-left:0 !important;padding-top:0 !important;
    padding-bottom:0 !important}
  .rank-table td.rank-cell{display:flex !important;grid-column:1;
    grid-row:1 / -1;align-items:flex-start;justify-content:center;
    padding-top:var(--space-3) !important;font-size:18px;font-weight:800;
    color:var(--muted);font-variant-numeric:tabular-nums}
  .rank-table td.rank-cell.rank-top{color:var(--accent);font-size:22px}
  .rank-table td.rank-cell::before{display:none}
  .rank-table td.name-cell{grid-column:2;grid-row:1;min-width:0;
    padding-top:var(--space-3) !important}
  .rank-table td.name-cell a{display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.35}
  /* デスクトップ用の2行表記（ITEM#／カテゴリ、掲載回数／最終掲載）は
     この幅では隠し、.mobile-metaの1行版に差し替える。 */
  .rank-table td.name-cell .item-no{display:none}
  .rank-table td.metric{grid-column:3;grid-row:1;text-align:right;
    font-size:16px;white-space:nowrap;padding-top:var(--space-3) !important}
  .rank-table td.metric::before{display:none}
  .rank-table td.latest-cell{grid-column:2 / -1;grid-row:2;
    font-size:var(--text-sm);font-weight:600;
    padding-bottom:var(--space-3) !important}
  .rank-table td.latest-cell::before{display:none}
  .rank-table td.low-cell{display:none}
  .rank-table .mobile-combine{display:inline;color:var(--muted);font-weight:400}
  .rank-table .mobile-meta{display:block;color:var(--muted);
    font-size:var(--text-2xs);font-weight:400;margin-top:2px}
}

/* テーブルのcaptionはスクリーンリーダー向け。視覚的には隠す */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.note{font-size:var(--text-xs);color:var(--muted);margin:var(--space-3) 0 0}
.badge{display:inline-block;font-size:var(--text-xs);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;color:var(--muted);margin-left:6px}
.badge.ref{border-color:var(--high);color:var(--high)}
/* 時期のズレは対応づけの信頼度バッジとは別の問題なので色を分ける
   （2026-09-20夜）。CSSはinclude経由で全ページに載るため、ここには
   ページ固有の文言（対応づけバッジの文字列）を書かない。 */
.badge.gap{border-color:var(--accent);color:var(--accent)}

.ad-slot{max-width:840px;margin:var(--space-6) auto 0;min-height:0}

.site-footer{border-top:1px solid var(--line);margin-top:var(--space-7);padding:20px}
.site-footer p{max-width:840px;margin:0 auto;font-size:var(--text-xs);color:var(--muted)}
.disclaimer{white-space:pre-line}
.updated{margin-top:8px !important}

/* --- 一覧・ランキング・比較・トップ ------------------------------------ */
.lead{font-size:15px;color:var(--fg);margin:6px 0 0;line-height:1.8}

/* ---- ファーストビュー（見た目改修・2026-09-24・見本 mock_src.html 移植）
   誰向けか・何の商品か・何が解決できるかを、h1とリード文だけで理解
   できるようにする（LP_RULES）。 ---- */
.hero{padding-top:var(--space-3)}
.hero .eyebrow{font-size:var(--text-xs);font-weight:800;letter-spacing:.08em;
  color:var(--accent);margin:0}
.hero h1{font-size:32px;line-height:1.4;margin:var(--space-2) 0 var(--space-2)}
@media (min-width:600px){.hero h1{font-size:38px}}
.hero-lead{font-size:var(--text-base);margin:0 0 var(--space-4)}
/* 見本の「大きな検索」。中の .search-row（既存のJS対象）はそのまま、
   外枠だけ紺の2px罫・角丸16pxにして、ページで最も押させたい行動だと
   分かるようにする。 */
.hero-search-box{margin:var(--space-4) 0 0;padding:6px;background:var(--bg);
  border:2px solid var(--accent);border-radius:16px;box-shadow:var(--shadow)}
.hero-search-box .search-status,
.hero-search-box .search-results{padding:0 10px}
.hero-search{display:flex;gap:8px}
.hero-search input[type="search"]{flex:1 1 auto;min-width:0;box-sizing:border-box;
  border:0;background:transparent;font-size:17px;padding:0 14px;min-height:48px;
  color:var(--fg)}
.hero-search input[type="search"]:focus{outline:none}
.hero-search .search-submit{border-radius:11px;min-height:48px;padding:0 22px}
/* :first-childの左寄せに頼らない（見た目改修・2026-09-24・オーナー指摘）。
   順位列（.rank-cell）がある一覧（ランキング）では商品名セルが2番目の
   セルになり、th,td既定の右寄せを継承して商品名が右寄せになっていた。 */
.name-cell{white-space:normal;min-width:260px;max-width:340px;text-align:left}
.name-cell a{text-decoration:none;font-weight:600}
.name-cell a:hover{text-decoration:underline}
.item-no{display:block;font-size:var(--text-xs);color:var(--muted);font-weight:400}
.metric{font-weight:700;font-variant-numeric:tabular-nums}
.low-cell{color:var(--low)}
.cheaper{color:var(--low)}
.pricier{color:var(--high)}
.when{display:block;font-size:var(--text-xs);color:var(--muted);font-weight:400}

/* 一覧・比較テーブルの横スクロール案内（UI改善・2026-09-21・項目1）。
   .table-wrap自体はスクロールするが、見た目の手がかりが無いと
   気づかれない。狭い画面ほど必要なので中央・控えめに出す。 */
.scroll-hint{font-size:var(--text-xs);color:var(--muted);text-align:center;margin:10px 0 4px}
/* 「表は横にスクロールできます」をPC幅でも常に出していた問題の修正
   （見た目改修・2026-09-24・オーナー指摘・項目2）。mainはmax-width:840px
   （内側の実質幅は約800px）で頭打ちになるため、ビューポートが880px以上
   （mainがすでに最大幅に達している）では、このサイトの一覧テーブルは
   実際にはみ出さない。はみ出す可能性があるのは、mainの幅がまだ
   ビューポートに合わせて縮んでいる700〜879px幅の間だけなので、そこに
   限って案内を出す（700px以下は.stack-tableのカード表示になり、
   そもそも横スクロールが発生しないため既に非表示）。 */
@media (min-width:880px){
  .scroll-hint{display:none}
}

/* 375px幅では商品名セルだけでビューポートの大半を占め、いちばん
   知りたい数値（差額・ランキングの指標）まで初期表示で届かない
   （UI改善・2026-09-21・項目1）。名前セルを狭め、隣の列が視界に
   入りやすくする。デスクトップ（.table-wrapがそもそも収まる幅）は
   従来どおり読みやすい260〜340pxを保つ。 */
@media (max-width:480px){
  .name-cell{min-width:150px;max-width:180px;font-size:var(--text-xs)}
}

.pager{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  margin:var(--space-5) 0 0;font-size:var(--text-sm)}
/* タップ領域44px以上を確保する（アクセシビリティ改善・2026-09-21） */
.pager a,.pager span{min-width:44px;min-height:44px;padding:5px 11px;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  border:1px solid var(--line);border-radius:6px;text-decoration:none}
.pager span[aria-current]{background:var(--accent);color:#fff;border-color:var(--accent)}

.cards{list-style:none;padding:0;margin:var(--space-3) 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3)}
.cards li{border:1px solid var(--line);border-radius:8px;padding:14px 16px;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
/* マウスを乗せたとき・タップしたときの控えめな動き（仕上げ・2026-09-24・
   項目⑦）。transformとtransitionだけを使い、prefers-reduced-motionでは
   グローバルルール（*{transition-duration:.001ms}）で実質瞬時になる。
   .cards.highlight/.collections のliはカードリンクを敷き詰めるため
   overflow:hiddenを持ち、box-shadowが縁で切れるので枠線の変化だけ足す。 */
.cards li:hover,.cards li:focus-within{transform:translateY(-2px);
  border-color:var(--line-strong)}
.cards:not(.highlight):not(.collections) li:hover,
.cards:not(.highlight):not(.collections) li:focus-within{box-shadow:var(--shadow)}
.cards a{font-weight:600;text-decoration:none}
.cards .sub{display:block;font-size:var(--text-xs);color:var(--muted);margin-top:4px}

.cards.related li{padding:var(--space-3) 14px}
.cards.related a{font-size:var(--text-sm);line-height:1.6}

/* 「掲載された月」（見た目改修・2026-09-24・オーナー指示）。スマホでは
   12段の縦積みではなく、月名＋最安値印だけの小さな3列タイルにする。
   年ごとの価格は <details> に畳み、PCでは常に開いた状態で見せる。 */
@media (max-width:520px){
  .monthly-pattern{grid-template-columns:repeat(3,1fr);gap:8px}
  .monthly-pattern li{padding:10px 6px;text-align:center;font-size:var(--text-xs)}
  .monthly-pattern .month-details summary{list-style:none;cursor:pointer;
    color:inherit;font-size:var(--text-xs);color:var(--muted);margin-top:2px}
  .monthly-pattern .month-details summary::-webkit-details-marker{display:none}
  .monthly-pattern .month-details .sub{margin-top:4px}
}
@media (min-width:521px){
  /* PCでは折りたたみを無効化し、常に開いた状態と同じ見た目で表示する
     （<details>のブラウザ既定挙動に頼らず、CSSだけで確実に開かせる）。 */
  .monthly-pattern .month-details summary{display:none}
  .monthly-pattern .month-details .sub{display:block !important}
}
.reason{display:inline-block;font-size:var(--text-xs);border:1px solid var(--line);
  border-radius:999px;padding:0 7px;margin-left:6px;color:var(--muted)}

/* カテゴリ・月間ページへの導線（2026-09-21・項目4） */
.browse-links{list-style:none;margin:var(--space-4) 0 0;padding:0;
  font-size:var(--text-sm);line-height:1.9}
.browse-links li{margin:4px 0}

/* トップの「いま最安」「記録の長い」「値動き」「全部を見る」カード
   （2026-09-20 CTR改修）。カード全体をリンクにして押しやすくする。
   タップ領域は44px以上を確保する。 */
.cards.highlight li,
.cards.collections li{padding:0;overflow:hidden}
.cards.highlight .card-link,
.cards.collections .card-link{
  display:flex;flex-direction:column;gap:4px;
  min-height:44px;padding:14px 16px;
  color:inherit;text-decoration:none;
}
/* 見本 .card の形（見た目改修・2026-09-24）: アイコン付きカードだけ
   横並びに変える（.cards.collections は現状どおり縦積み・アイコン無し）。 */
.cards.highlight .card-link{flex-direction:row;align-items:flex-start;gap:12px}
.cards.highlight .card-link .ic-tile{flex:none}
.cards.highlight .card-body{display:flex;flex-direction:column;gap:2px;
  min-width:0;flex:1 1 auto}
.cards.highlight .card-body .card-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.cards.highlight .card-link:hover,
.cards.collections .card-link:hover{background:var(--soft)}
.cards.highlight .card-link:focus-visible,
.cards.collections .card-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.card-title{font-weight:600}
/* 価格・件数の数字はカードの主役。商品名より格上に見せる
   （デザイン仕様 §5「数字が払い戻し、名前は識別できれば十分」）。 */
.cards.highlight .fact{font-size:var(--text-md-strong);font-weight:700;
  color:var(--fg);font-variant-numeric:tabular-nums}
.card-cta{font-size:var(--text-xs);font-weight:600;color:var(--accent);margin-top:2px}

/* 事実の種類ごとの静かな見分け（2026-09-21）。数字そのものは赤緑で
   塗らず（白基調・アクセント最小限）、意味を示す小さな見出し語にだけ
   色を置く。「セール中」「最高値から」「初回から」「価格差」で軸が違う
   数字を、同じ太字黒20pxで並べると全部同じに見えてしまうため。
   実際のkicker文言は「過去最安」「店頭とオンラインの差額」等の日本語の
   句であり、ローマ字の短いラベルではないため13px（デザイン仕様の
   カナ字つぶれ対策）を使う（2026-09-22）。 */
.fact-kicker{display:block;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.02em;margin-bottom:1px}
.fact-kicker.k-discount{color:var(--accent)}
.fact-kicker.k-low{color:var(--low)}
.fact-kicker.k-high{color:var(--high)}
.fact-kicker.k-diff{color:var(--accent)}
.fact-kicker.k-seasonal{color:var(--muted)}

/* トップの月別ナビの月リンク（アクセシビリティ改善・2026-09-21・項目4）。
   タップ領域44px四方以上を確保する。 */
.month-links-label{margin:var(--space-4) 0 0;font-weight:600;color:var(--fg)}
.month-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0}
.month-links a{display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 10px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:8px;text-decoration:none;
  font-size:var(--text-sm);color:var(--fg)}
.month-links a:hover{background:var(--soft)}
.month-links strong a{border-color:var(--accent);background:var(--accent);
  color:#fff;font-weight:700}

/* カテゴリ・内容量・単価（Phase 7-8）。カードの主役はまだ商品名と価格
   なので、カテゴリ/単価は小さく静かに添えるだけにする。カテゴリ名は
   「食品」等の短い名詞1語で、文ではないため--text-2xsのままでよい。 */
.card-category{display:inline-block;font-size:var(--text-2xs);color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:1px 8px;
  margin:2px 0}
.card-unitprice{font-size:var(--text-xs);color:var(--muted)}

/* トップの検索ボックス（JS有効時のみ表示。SITE_SPEC.md §6） */
.search-box{margin:var(--space-4) 0 0;padding:14px 16px;border:1px solid var(--line);
  border-radius:8px;background:var(--soft)}
.search-box label{display:block;font-size:var(--text-xs);font-weight:600;margin-bottom:6px}
/* 検索の実行ボタン（2026-09-20夜）。既存のsubmitイベントにそのまま乗る。
   ベネフィット文言＋アクセントカラーで、押せることが一目で分かるように。 */
.search-submit{flex:0 0 auto;min-height:44px;padding:0 18px;
  border:none;border-radius:6px;background:var(--accent);color:#fff;
  font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer}
.search-submit:hover{opacity:0.9}
.search-submit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.search-status{font-size:var(--text-xs);color:var(--muted);margin:8px 0 0;min-height:1em}
.search-results{list-style:none;margin:0;padding:0}
.search-results li{border-top:1px solid var(--line)}
.search-results a{display:block;padding:10px 4px;min-height:44px;
  box-sizing:border-box;text-decoration:none;font-size:var(--text-sm);line-height:1.6}
.search-results a:hover{text-decoration:underline}

/* ヘッダー検索のドロップダウン（Phase A2・2026-09-25。.header-search は
   position:relative済みなので、そこを基準に浮かせる） */
.header-search-results{list-style:none;margin:0;padding:0;position:absolute;
  top:100%;left:0;right:0;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.12);max-height:60vh;
  overflow-y:auto;z-index:20}
.header-search-results li{border-top:1px solid var(--line)}
.header-search-results li:first-child{border-top:0}
.header-search-results a{display:block;padding:10px 12px;min-height:44px;
  box-sizing:border-box;text-decoration:none;font-size:var(--text-sm);line-height:1.6}
.header-search-results a:hover{background:var(--line)}

/* まとめ売りの号であることを履歴表で示す印（§8.20） */
.bundle-tag {
  display: inline-block;
  padding: 0 0.35em;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 0.85em;
  white-space: normal;
}

/* 販売単位が異なり比較の対象外にした号（段階B・B1/B2）。
   白基調・最小限のアクセントというCLAUDE.mdの色方針に合わせ、
   目立たせすぎず「淡色＋タグ」だけで区別する。 */
.exclude-tag{color:var(--muted);border-style:dashed}
.pack-excluded-row{background:var(--soft)}

/* このサイトについて（/about/）と 404（2026-09-09） */
.about-steps{margin:var(--space-3) 0 0;padding-left:1.4em;line-height:1.9}
.about-steps li{margin:4px 0}
.about-steps code{background:var(--soft);padding:1px 4px;border-radius:3px;font-size:0.92em}
.disclaimer-block{background:var(--soft);border-left:3px solid var(--muted);
  padding:var(--space-3) 16px;margin:var(--space-3) 0 0;font-size:var(--text-sm);
  color:var(--muted);line-height:1.8}
.contact{font-size:17px;margin:10px 0 0}
.contact a{font-weight:600}
.cards .card-lead{margin:6px 0 0;font-size:var(--text-xs);color:var(--muted);line-height:1.7}
.footer-links{margin-top:10px !important}

/* =========================================================================
   見た目改修（2026-09-24）: 見本 mock_src.html の部品を移植。
   既存クラス（.cards, .facts, .card-title 等）はそのまま残し、ここでは
   新規クラスだけを追加する。カテゴリー淡色の下地クラスはここで定義する。
   ========================================================================= */

.cat-food{background:var(--c-food)} .cat-beverage{background:var(--c-beverage)}
.cat-household{background:var(--c-household)} .cat-health{background:var(--c-health)}
.cat-electronics{background:var(--c-electronics)} .cat-home{background:var(--c-home)}
.cat-outdoor{background:var(--c-outdoor)} .cat-other{background:var(--c-other)}
.cat-apparel{background:var(--c-apparel)} .cat-pet{background:var(--c-pet)}

/* アイコンの下地タイル。商品の種類・カテゴリーの目印（写真の代わり）。 */
.ic-tile{flex:none;display:inline-grid;place-items:center;border-radius:12px;
  width:40px;height:40px;color:var(--fg)}
.ic-tile svg{width:20px;height:20px;stroke-width:1.75}

/* ---- ヘッダー（見本 .hd を site-header に移植）------------------------- */
.site-header{position:sticky;top:0;z-index:5;
  background:rgba(250,247,241,.94);backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);padding:8px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;row-gap:6px}
.site-name{display:flex;align-items:center;gap:8px;font-weight:800;
  text-decoration:none;color:var(--fg);white-space:nowrap}
.logo-mark{width:28px;height:28px;border-radius:8px;background:var(--accent);
  color:#fff;display:grid;place-items:center;flex:none}
.logo-mark svg{width:16px;height:16px;stroke-width:2}
.header-search{position:relative;align-items:center;background:var(--bg);
  border:1px solid var(--line-strong);border-radius:999px;padding:0 6px 0 12px}
.header-search svg{width:16px;height:16px;color:var(--muted);flex:none}
.header-search input[type="search"]{border:0;border-radius:0;background:transparent;
  min-height:38px}
.header-search button{border-radius:999px;min-height:34px;margin:2px}
.site-nav{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.site-nav a{border-radius:999px;white-space:nowrap}
.site-nav a:hover{background:var(--soft);text-decoration:none}
@media (max-width:720px){
  .site-header{padding:8px 16px 4px}
  .header-search{order:3;flex-basis:100%;max-width:none}
  .site-nav{order:4;flex-basis:100%;margin:2px -16px 0;padding:2px 16px}
}

/* ---- 商品ページ：パンくず＋種類アイコン＋商品名 ------------------------- */
.item-head{display:flex;gap:14px;align-items:flex-start;margin-top:var(--space-3)}
.item-head .ic-tile{width:52px;height:52px;border-radius:16px}
.item-head .ic-tile svg{width:26px;height:26px}
.item-head h1{margin:0}
@media (max-width:520px){
  .item-head .ic-tile{width:44px;height:44px;border-radius:14px}
  /* 375px幅で商品名＋答えのカードの最安値を最初の1画面に収める
     （見た目改修・2026-09-24・オーナー指摘・項目1）。上部の余白を
     数px単位で詰める。長い商品名では効果が限られるが、詰められる分は
     詰める。 */
  .item-head{margin-top:var(--space-2)}
  .item-head h1{line-height:1.4}
  .subtitle{margin-bottom:var(--space-1)}
  .answer{margin-top:var(--space-3)}
  .answer-q{padding:10px 14px}
}

/* ---- この商品について（見た目改修・2026-09-24 追加） ---------------------
   答えのカードより目立たせない、控えめな1ブロック。見出しは小さく、
   固定幅を持たせないため375px幅でも横スクロールは出ない。 */
.about-block{margin:var(--space-3) 0 0;padding:12px 16px;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm)}
.about-heading{margin:0 0 6px;font-size:var(--text-xs);font-weight:700;
  color:var(--muted)}
.about-auto{margin:0;font-size:var(--text-sm);color:var(--fg)}
.about-note{margin:8px 0 0;padding-top:8px;border-top:1px dashed var(--line-strong);
  font-size:var(--text-sm);color:var(--fg)}
.about-links{margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--line-strong)}
.about-link-main{display:inline-block;font-size:var(--text-sm);font-weight:700}
.about-link-fallback{margin:6px 0 0;font-size:var(--text-2xs);color:var(--muted)}
.about-shop-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;
  margin:8px 0 0;padding:0;font-size:var(--text-sm)}
.about-ad-disclosure{margin:8px 0 0;font-size:var(--text-2xs);color:var(--muted)}
@media (max-width:520px){
  .about-block{padding:10px 12px}
  .about-shop-links{gap:6px 14px}
}

/* ---- 答えのカード -------------------------------------------------------- */
.hl{background:linear-gradient(transparent 58%,var(--marker) 58%);
  padding:0 2px;font-weight:800}
.answer{margin:var(--space-4) 0 0;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.answer-q{margin:0;padding:12px 18px;font-size:var(--text-sm);color:var(--fg);
  border-bottom:1px dashed var(--line-strong);display:flex;align-items:center;gap:8px}
.answer-q svg{width:18px;height:18px;flex:none;color:var(--accent)}
.answer-pair{display:grid;grid-template-columns:1fr 1fr}
.answer-pair.single{grid-template-columns:1fr}
.answer-pair>div{padding:16px 18px}
.answer-pair>div+div{border-left:1px solid var(--line)}
.answer-lbl{font-size:var(--text-xs);font-weight:700;color:var(--fg);
  display:flex;align-items:center;gap:6px;margin:0}
.answer-lbl .dot{width:8px;height:8px;border-radius:50%;flex:none}
.answer-big{font-size:34px;line-height:1.15;font-weight:800;margin:6px 0 2px;
  font-variant-numeric:tabular-nums}
.answer-when{font-size:var(--text-xs);color:var(--muted)}
.answer-unit{font-size:var(--text-xs);color:var(--fg);margin-top:6px}
.answer-low .answer-big{color:var(--low)}
.answer-gap{padding:14px 18px 18px;border-top:1px solid var(--line);background:var(--soft)}
.answer-gap-text{margin:0 0 10px;font-size:15px}
.answer-range{position:relative;height:10px;border-radius:999px;
  background:linear-gradient(90deg,var(--low-wash),var(--soft) 50%,var(--high-wash))}
.answer-range .pin{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:3px solid var(--accent);transform:translate(-50%,-50%);
  box-shadow:0 1px 4px rgba(0,0,0,.2)}
.answer-range-ends{display:flex;justify-content:space-between;font-size:var(--text-2xs);
  color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
@media (max-width:520px){
  /* 答えのカードはスマホでも2列のまま（オーナー指示・2026-09-24）。
     縦1列にすると「2つの数字を並べて比べる」という答えのカード自体の
     意味が崩れるため、数字を縮めるだけにする。 */
  .answer-pair>div{padding:12px 10px}
  .answer-big{font-size:30px}
}

/* ---- 統計チップ・ページ内ジャンプ ---------------------------------------- */
.stat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:var(--space-3) 0 0;
  padding:0;list-style:none}
.stat-chips li{background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;font-size:var(--text-xs);color:var(--fg)}
.stat-chips b{font-variant-numeric:tabular-nums}
.jump-nav{display:flex;gap:8px;overflow-x:auto;margin:var(--space-4) 0 0;
  padding:0;list-style:none;scrollbar-width:none}
.jump-nav a{display:inline-flex;min-height:40px;align-items:center;padding:0 14px;
  border-radius:999px;border:1px solid var(--line-strong);background:var(--bg);
  text-decoration:none;font-size:var(--text-sm);white-space:nowrap;color:var(--fg)}
.jump-nav a:hover{background:var(--soft)}

/* ---- ホームのカテゴリータイル -------------------------------------------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:var(--space-6) 0 0;padding:0;list-style:none}
.cat{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;
  border-radius:var(--radius);background:var(--bg);border:1px solid var(--line);
  text-decoration:none;color:var(--fg);font-size:var(--text-xs);font-weight:700;
  text-align:center}
.cat:hover{background:var(--soft)}
.cat .ic-tile{width:44px;height:44px;border-radius:13px}
.cat small{display:block;font-weight:400;color:var(--muted);font-size:var(--text-2xs);
  margin-top:2px}
/* スマホは常に4列（4+3）に固定する（見た目改修・2026-09-24・オーナー
   指示）。以前は400px未満で3列に落としていたが、7タイルが3+3+1の
   3段になり「4+3」の指示と食い違うため、この分岐は廃止した。 */
/* スマホは2列＋最後の1枚（7件中7枚目）だけ横長にする（見た目改修・
   2026-09-24・オーナー指摘・項目3）。以前の4列固定は4+3の半端な並びに
   なっていた。7件（偶数＋1）なら2,2,2,1(全幅)の4段になり、端数が
   1枚だけ自然に強調される。件数が偶数に変わった場合は
   :last-child:nth-child(odd)が効かなくなり自動的に通常の2列に戻る
   （壊れない）。 */
@media (max-width:720px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .cats > li:last-child:nth-child(odd){grid-column:1 / -1}
}
.hub-cats{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}

/* ---- 「記録から分かったこと」の3枚 --------------------------------------- */
.finds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:var(--space-4) 0 0;padding:0;list-style:none}
@media (max-width:820px){.finds{grid-template-columns:1fr}}
.find{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;
  text-decoration:none;color:var(--fg);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.find:hover{border-color:var(--line-strong)}
/* カードにマウスを乗せたときの控えめな浮き上がり（仕上げ・2026-09-24・
   項目⑦）。transformとtransitionだけで、prefers-reduced-motionでは
   グローバルルール（transition-duration:.001ms）が効いて実質動かない。 */
.find:hover,.find:focus-visible{transform:translateY(-2px);
  box-shadow:0 2px 0 rgba(30,38,53,.04),0 10px 24px -12px rgba(30,38,53,.28)}
.find .find-k{font-size:var(--text-2xs);font-weight:800;color:var(--accent);
  letter-spacing:.06em}
/* 数字を主役にする（見た目改修・2026-09-24・オーナー指摘・項目4）。
   38px→46pxに拡大し、.hlと同じ黄色マーカーの帯を数字の下側に敷いて、
   ブランドカラーの黄色を「記録から分かったこと」の顔として使う。 */
.find .find-v{font-size:46px;font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums;display:inline-block;padding:0 3px;
  margin:2px 0;
  background:linear-gradient(transparent 60%,var(--marker) 60%)}
.find .find-t{font-size:var(--text-sm);font-weight:700;line-height:1.5;margin-top:2px}
.find .find-s{font-size:var(--text-xs);color:var(--muted)}
.find svg.spark,.find svg.sparkline{width:100%;height:40px;margin-top:4px;display:block}

/* 記事ページ末尾「次に読む」（見た目改修・2026-09-24・オーナー指示で
   新設）。.find と同じカードを2件だけ、控えめなサイズで並べる。 */
.finds.compact{grid-template-columns:repeat(2,1fr)}
.finds.compact .find{padding:14px;gap:2px}
.finds.compact .find-t{font-size:var(--text-sm)}
@media (max-width:600px){.finds.compact{grid-template-columns:1fr}}

/* ---- マスコット「ねふだんちゃん」（マスコット統合・2026-09-24）。
   templates/mascot/*.svg はルートに class="mascot" を持つが width/height
   は持たない（色・形は固定ファイル側、サイズだけこちらで決める）。
   影・グラデーションは付けない。サイズはラッパーへ付けた修飾クラスで、
   子孫の.mascotだけに高さを与える（幅はaspect比を保つためautoにする）。 */
.mascot{flex-shrink:0}
.mascot-48 .mascot,.mascot-56 .mascot,.mascot-64 .mascot,.mascot-96 .mascot{
  display:block;width:auto}
.mascot-48 .mascot{height:48px}
.mascot-56 .mascot{height:56px}
.mascot-64 .mascot{height:64px}
.mascot-96 .mascot{height:96px}

/* 見出し＋マスコットの横並び（クイズ見出し・404見出しで共用）。
   375px幅でも折り返せるよう flex-wrap を許可し、横に押し出して
   はみ出さないようにする。 */
.quiz-heading,.page-heading-mascot{display:flex;align-items:center;
  gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3)}
/* クイズ見出しは他のh2と同じく全幅の罫線を引く（2026-09-24 夜・目視で
   罫線が文字幅で切れていたため）。セクション間の余白も他のh2と揃える。 */
.quiz-heading{margin-top:var(--space-6);flex-wrap:nowrap}
.quiz-heading > div{flex:1;min-width:0}
.quiz-heading h2,.page-heading-mascot h1{margin-top:0}
.quiz-heading .subtitle{margin-bottom:0}

/* クイズの正解時だけ見せる小さなマスコット。控えめな出現だけを演出し、
   動きは prefers-reduced-motion で止める（デザイン仕様 §6 と同じ方針）。 */
.quiz-happy-mascot{display:inline-flex;vertical-align:middle;margin-right:4px}
@media (prefers-reduced-motion: no-preference){
  .quiz-happy-mascot{animation:mascot-pop .25s ease}
}
@keyframes mascot-pop{
  from{transform:scale(.6);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* 「気になる商品」の空状態（マスコット統合・2026-09-24）。JSが
   localStorageを見て0件と判定したときだけ表示する（no-JSでは
   セクションごとhiddenのまま）。 */
.my-lists-empty{display:flex;align-items:center;gap:var(--space-3);
  margin-top:var(--space-3);padding:14px 16px;border:1px solid var(--line);
  border-radius:8px;font-size:var(--text-sm);color:var(--muted);line-height:1.7}

/* 「知ってた？」クイズ（見た目改修・2026-09-24・オーナー指示）。
   装飾・グラデーションは使わず、既存の罫線・紺・緑・赤だけで組む。 */
.quiz-list{list-style:none;padding:0;margin:var(--space-3) 0 0;
  display:flex;flex-direction:column;gap:var(--space-3)}
.quiz-item{border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.quiz-q{font-weight:700;margin:0 0 10px;font-size:var(--text-sm)}
.quiz-choices{display:flex;flex-wrap:wrap;gap:8px}
.quiz-choice{min-height:44px;padding:0 16px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--fg);font-size:var(--text-sm);
  font-weight:600;cursor:pointer}
.quiz-choice:hover:not(:disabled){border-color:var(--accent)}
.quiz-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.quiz-choice:disabled{cursor:default}
.quiz-choice.is-correct{border-color:var(--low);background:var(--low-wash);color:var(--low)}
.quiz-choice.is-wrong{border-color:var(--high);background:var(--high-wash);color:var(--high)}
.quiz-answer{margin-top:10px}
.quiz-answer summary{cursor:pointer;font-size:var(--text-xs);color:var(--accent);
  font-weight:600;min-height:44px;display:flex;align-items:center}
.quiz-answer summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.quiz-answer-text{font-size:var(--text-sm);margin:8px 0 0;line-height:1.7}
.quiz-correct-label{color:var(--low)}
.quiz-evidence{margin-top:4px}

.price-tag{display:inline-block;font-size:var(--text-2xs);font-weight:800;
  padding:1px 8px 1px 12px;color:var(--low);background:var(--low-wash);
  clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%)}

/* 一覧テーブルの商品名セルに添える小さな種類アイコン（見た目改修・
   2026-09-24）。行の高さを崩さないよう文字と同じ行に浮かせる。 */
.name-cell .row-ic{width:22px;height:22px;border-radius:7px;
  float:left;margin:1px 6px 0 0}
.name-cell .row-ic svg{width:13px;height:13px;stroke-width:2}
.name-cell a{display:block;overflow:hidden}
@media (max-width:700px){
  .stack-table td.name-cell .row-ic{float:none;display:inline-flex;
    vertical-align:middle;margin:0 6px 0 0}
  .stack-table td.name-cell a{display:inline-flex;align-items:center}
}

/* 一覧・ランキングのスマホカード表示だけに出す「最安値と同額」の値札形
   の印（見た目改修・2026-09-24・オーナー指摘）。PCの表はそのままで
   よい、との指示なのでデスクトップ幅では隠す。 */
.tag-mobile-only{display:none}
@media (max-width:700px){
  .tag-mobile-only{display:inline-block;margin-top:4px}
}

/* ランキングのスマホカード詰め（見た目改修・2026-09-24）専用の複製表示。
   既定では常に隠す。.rank-table 配下・700px以下でだけ出す
   （style.css内の.rank-table用@media参照）。他の一覧（/items/・
   カテゴリ等）やPC幅では出さないため、ここでは常時display:noneのまま。 */
.mobile-combine,.mobile-meta{display:none}
/* .latest-when（オーケストレーター指摘・2026-09-25）は700px未満の
   .rank-table 積み上げ表示では .mobile-meta に同じ日付が出るため隠す。
   それ以外（PC幅・他の一覧）では既定どおり.whenとして表示する。 */
@media (max-width:700px){.rank-table .latest-when{display:none}}

/* =========================================================================
   気になる商品／最近見た商品（2026-09-24 追加）。localStorageだけで完結する
   JS（templates/lists.js）が組み立てる。データは端末外に一切送信しない。
   ========================================================================= */

/* ホームの2セクション。初期状態はJS側でhidden属性を付けており、0件なら
   外さない（空の枠を出さない）ため、ここでは余白だけを持たせる。 */
.my-lists-section{margin-top:var(--space-5)}

/* 横スクロールのカード列。既存の.cardsグリッドを流用しつつ、このクラス
   が付いたときだけ横並び・横スクロールに切り替える（他ページの.cardsは
   従来どおりグリッドのまま）。 */
.cards.hs-scroll{display:flex;flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  padding-bottom:6px;margin-top:var(--space-3)}
.cards.hs-scroll li{flex:0 0 220px;scroll-snap-align:start}
.cards.hs-scroll li.hs-card{position:relative;padding-top:36px}
.hs-card-top{position:absolute;top:6px;right:6px;left:6px;
  display:flex;justify-content:flex-end}
.list-remove-btn{min-height:30px;padding:4px 12px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);
  color:var(--muted);font-size:var(--text-2xs);font-weight:600;cursor:pointer}
.list-remove-btn:hover{background:var(--soft);color:var(--fg)}
.list-remove-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* アイコンを上段・商品名を次の行に積む（2026-09-24修正）。<a>の子である
   .ic-tile と .card-body はどちらもspan（インライン要素）なので、
   display指定が無いと商品名がアイコンの右→回り込みで下、という崩れた
   見た目になっていた。縦のflexで明示的に積む。 */
.hs-card .card-link{padding:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px}
.hs-card .card-link .ic-tile{flex:none}
.hs-card .card-body{display:flex;flex-direction:column;gap:2px;width:100%}
/* imgタグにはページのCSS（currentColor）が効かないため、s07が色を固定した
   SVGファイル（site/icons/以下）を書き出している（site_render.
   write_card_icon_svgs）。ここではサイズだけ既存の.ic-tile svgと揃える。 */
.ic-tile img{width:20px;height:20px;display:block}
.hs-card-note{color:var(--muted)}

/* 商品ページの「気になる」トグルボタン。押すと星を塗りつぶし、
   aria-pressedで状態を示す。JS無効時は表示しない（hidden属性のまま）。 */
.fav-toggle-btn{display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;padding:7px 16px;min-height:38px;box-sizing:border-box;
  border:1px solid var(--line-strong);border-radius:999px;
  background:var(--bg);color:var(--fg);font-size:var(--text-sm);
  font-weight:700;cursor:pointer}
.fav-toggle-btn svg{width:17px;height:17px;stroke:var(--accent)}
.fav-toggle-btn:hover{background:var(--soft)}
.fav-toggle-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fav-toggle-btn[aria-pressed="true"]{background:var(--accent-wash);
  border-color:var(--accent);color:var(--accent)}
.fav-toggle-btn[aria-pressed="true"] svg{fill:var(--accent)}

/* 販売期間中の表示（段階B・SITE_SPEC.md §2.1）。答えのカードの直後、
   verdictの直前に置く小さいバナー。色数は増やさず --accent-wash / --marker
   の既存トーンだけ使う。JSが#sale-period-activeを出したときは
   #sale-period-staticをhiddenにして入れ替える（style.cssは色だけ担当）。 */
.sale-period-banner{margin:var(--space-3) 0 0;padding:var(--space-2) var(--space-3);
  background:var(--accent-wash);border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0}
.sale-period-static,.sale-period-active{margin:0;font-size:var(--text-sm);
  font-weight:700;color:var(--accent);line-height:1.6}
.sale-period-disclaimer{margin:4px 0 0;font-size:var(--text-2xs);
  color:var(--muted);font-weight:400}

/* /sale/active/ 買い物リスト型セール一覧（段階B）。1行＝商品名／価格／
   終了日。表ではなくリスト（<ul><li>）にして、スマホで列が潰れる問題を
   そもそも起こさない——名前は折り返しても、価格・終了日は常に右側の
   決まった位置に揃う。 */
.buylist-controls{display:flex;flex-wrap:wrap;gap:var(--space-3);
  margin:var(--space-3) 0;font-size:var(--text-sm)}
.buylist-filter{display:flex;flex-direction:column;gap:4px;font-weight:700;
  color:var(--fg)}
.buylist-filter select{min-height:38px;padding:0 8px;border:1px solid var(--line-strong);
  border-radius:6px;background:var(--bg);color:var(--fg);font-size:var(--text-sm)}
.buylist{list-style:none;margin:var(--space-3) 0 0;padding:0;
  border-top:1px solid var(--line)}
/* Grid採用の経緯（オーケストレーター指摘・2026-09-25）: 旧実装は
   flexbox（name: flex:1 1 200px, price/end: flex:0 0 auto）で、実機の
   MCPブラウザ（375px幅）では折り返して見えたが、Edge
   ヘッドレス（--headless / --headless=new どちらも）で撮ったPNGでは
   価格・終了日が375px幅の右端で切れて写る現象が再現した（フォント
   メトリクスの違いで折り返し判定がぶれたとみられる）。CSS Grid
   （1fr auto）なら右列（価格・終了日）の幅はauto——コンテナ幅を
   絶対に超えない——ため、左列（商品名）が縮む/折り返す側に必ずなり、
   レンダラ差に関わらず右2列がはみ出さない。 */
.buylist-row{display:grid;grid-template-columns:1fr auto;
  column-gap:var(--space-2);align-items:baseline;
  padding:10px 4px;border-bottom:1px solid var(--line)}
.buylist-name{grid-column:1;min-width:0;color:var(--fg);font-weight:600;
  font-size:var(--text-sm);text-decoration:none}
.buylist-name:hover{text-decoration:underline}
.buylist-meta{grid-column:2;display:flex;flex-direction:column;
  align-items:flex-end;gap:2px;min-width:0}
.buylist-price{font-weight:800;font-size:var(--text-sm);
  color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.buylist-end{font-size:var(--text-xs);color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums}
/* 375px幅（スマホ最小想定）でも収まるよう、価格・終了日を優先し
   商品名だけ折り返す。右列（価格・終了日）はgrid-template-columnsの
   autoでコンテナ幅を超えないため、横スクロールは発生しない。 */
@media (max-width:400px){
  .buylist-row{padding:8px 2px}
  .buylist-name{font-size:var(--text-xs)}
  .buylist-price{font-size:var(--text-xs)}
  .buylist-end{font-size:var(--text-2xs)}
}