/* くらべノート — 全ページ共通スタイル
   ページ側に <style> を書かないこと。デザインを変えるときはこのファイルだけを触る。 */

:root{
  --bg:#faf8f4;
  --surface:#ffffff;
  --ink:#232020;
  --sub:#635e57;
  --line:#e5e0d6;
  --line-soft:#efeae1;
  --accent:#33604f;
  --accent-soft:#eef2ef;
  --gold:#8f6420;
  --wrap:720px;
}

*{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP","Meiryo",sans-serif;
  font-size:16.5px;
  line-height:1.95;
  letter-spacing:0.01em;
}

/* ---- 共通の余白 ---- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---- キーボード操作 ---- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
  font-size:14px; font-weight:700; text-decoration:none;
}
.skip:focus{ left:0; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}

/* ---- サイトヘッダー(全ページ共通) ---- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(250,248,244,0.92);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  max-width:var(--wrap); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:700; letter-spacing:0.08em;
  color:var(--accent); text-decoration:none; line-height:1.4;
}
.brand-mark{
  width:9px; height:9px; background:var(--accent);
  border-radius:2px; transform:rotate(45deg); flex-shrink:0;
}
.site-nav a{
  font-size:14px; font-weight:700; color:var(--sub); text-decoration:none;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"]{
  color:var(--accent); border-bottom-color:var(--accent);
}

/* ---- トップページのヒーロー ---- */
.hero{
  background:linear-gradient(180deg, var(--accent-soft) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.hero-inner{ max-width:var(--wrap); margin:0 auto; padding:60px 24px 48px; }
.hero h1{
  font-size:31px; line-height:1.6; letter-spacing:0.02em;
  margin:0 0 18px; font-weight:700;
}
.hero .lead{ color:var(--sub); font-size:16px; margin:0 0 22px; max-width:32em; }
.badge-row{ display:flex; flex-wrap:wrap; gap:8px; }
.badge{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:700;
  color:var(--accent); background:var(--surface); border:1px solid var(--line);
  padding:5px 13px; border-radius:999px; line-height:1.7;
}

/* ---- 本文の器 ---- */
main{ max-width:var(--wrap); margin:0 auto; padding:0 24px 88px; }

.section-label{
  font-size:12.5px; font-weight:700; color:var(--sub);
  letter-spacing:0.12em; margin:48px 0 4px;
  display:flex; align-items:center; gap:10px;
}
.section-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.section-label:first-of-type{ margin-top:40px; }
.section-note{ color:var(--sub); font-size:13.5px; margin:0 0 8px; }

/* ---- 記事リスト(トップ・記事一覧ページ共通) ---- */
.article-list{ list-style:none; margin:0; padding:0; }
.article-list > li{ border-bottom:1px solid var(--line); }
.article-list > li:first-child{ border-top:1px solid var(--line); }
.entry{
  display:block; padding:22px 4px; text-decoration:none; color:inherit;
  transition:background-color .12s ease;
}
.entry:hover{ background:rgba(255,255,255,0.7); }
.entry-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:12px; color:var(--sub); letter-spacing:0.04em; margin-bottom:7px;
}
.chip{
  display:inline-block; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:2px 10px; line-height:1.8;
}
.entry-title{
  font-size:17.5px; font-weight:700; line-height:1.65; margin:0 0 6px;
  color:var(--ink);
}
.entry:hover .entry-title{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.entry-summary{ font-size:14.5px; color:var(--sub); margin:0; line-height:1.85; }
.entry-more{
  display:inline-block; margin-top:9px; font-size:13.5px; font-weight:700; color:var(--accent);
}

/* カテゴリ見出しの下に並べるとき、行ごとのカテゴリチップは重複するので隠す */
.article-list--grouped .chip{ display:none; }

/* 予告(準備中)の行 */
.upcoming{
  border:1px dashed var(--line); border-radius:12px; padding:20px 22px;
  color:var(--sub); font-size:14.5px; margin-top:24px; background:rgba(255,255,255,0.5);
}
.upcoming p{ margin:0; font-size:14.5px; }

/* ---- 記事ページの見出し周り ---- */
.article-head{ max-width:var(--wrap); margin:0 auto; padding:44px 24px 8px; }
.breadcrumb{ font-size:12.5px; color:var(--sub); margin:0 0 18px; line-height:1.8; }
.breadcrumb a{ color:var(--sub); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
h1{ font-size:27px; line-height:1.6; margin:0 0 16px; letter-spacing:0.01em; }
.article-head .lead{ color:var(--sub); font-size:15.5px; margin:0 0 10px; }
.meta{ color:var(--sub); font-size:12.5px; margin:0; }

/* ---- 本文タイポグラフィ ---- */
p{ font-size:16px; margin:0 0 1.5em; }
a{ color:var(--accent); }
main p a, .closing a{ text-underline-offset:3px; }

h2{
  font-size:21px; line-height:1.6; margin:56px 0 18px; padding-left:14px;
  border-left:4px solid var(--accent); scroll-margin-top:72px;
}
h3{
  font-size:17.5px; line-height:1.7; margin:38px 0 10px;
  padding-bottom:8px; border-bottom:1px solid var(--line-soft);
}

ul, ol{ font-size:16px; padding-left:1.4em; margin:0 0 1.5em; }
li{ margin-bottom:8px; }
strong{ font-weight:700; }

/* ---- 目次 ---- */
.toc{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:20px 24px; margin:32px 0 8px;
}
.toc-title{
  font-size:12.5px; font-weight:700; color:var(--accent);
  letter-spacing:0.1em; margin:0 0 10px;
}
.toc ol{ margin:0; padding-left:1.3em; font-size:15px; }
.toc li{ margin-bottom:7px; }
.toc a{ text-underline-offset:3px; }

/* ---- 比較表 ---- */
.tablewrap{ overflow-x:auto; margin:0 0 10px; -webkit-overflow-scrolling:touch; }
table{
  width:100%; border-collapse:collapse; font-size:14px; line-height:1.7;
  background:var(--surface); min-width:520px;
}
th, td{ border:1px solid var(--line); padding:11px 13px; text-align:left; vertical-align:top; }
th{ background:#f3f0e9; font-weight:700; white-space:nowrap; }
tbody tr:nth-child(even) td{ background:#fcfbf8; }
.chart-note{ color:var(--sub); font-size:12.5px; margin:0 0 28px; line-height:1.8; }

/* ---- グラフ ---- */
.chart{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:18px; margin:0 0 10px;
}
.chart svg{ width:100%; height:auto; display:block; }

/* ---- 結論ボックス(記事冒頭) ----
   「で、どれを買えばいいの」に最初に答える。読者の大半はここしか読まない前提。 */
.verdict{
  background:var(--surface); border:1px solid var(--accent);
  border-radius:14px; padding:8px 24px 20px; margin:30px 0 8px;
}
.verdict-title{
  font-size:13px; font-weight:700; color:var(--accent); letter-spacing:0.1em;
  margin:16px 0 6px;
}
.verdict-list{ list-style:none; margin:0; padding:0; font-size:16px; }
/* 軸のラベルは「コスパ最優先の人」「コスパと消臭のバランスを取りたい人」のように
   長さがまちまちなので、横並びにせず縦に積む。行頭が必ず揃う。 */
.verdict-list > li{
  padding:14px 0 12px; border-top:1px solid var(--line-soft); margin:0;
}
.verdict-axis{
  display:inline-block; font-size:13px; font-weight:700; color:#fff;
  background:var(--accent); border-radius:7px; padding:4px 11px;
  line-height:1.7; margin-bottom:6px;
}
.verdict-pick{ display:block; font-weight:700; }
.verdict-pick a{ text-underline-offset:3px; }
.verdict-note{ display:block; font-size:13.5px; color:var(--sub); }
@media (max-width:600px){
  .verdict{ padding:8px 18px 18px; }
}

/* ---- 商品カード ----
   ◎△の要点を本文より先に置く。判断に使う数字(1回あたりのコスト)をカードの中に持たせる。 */
.pcard{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:24px 26px; margin:0 0 20px; scroll-margin-top:76px;
}
.pcard-flag{
  display:inline-block; font-size:12.5px; font-weight:700; color:#fff;
  background:var(--accent); border-radius:7px; padding:4px 12px;
  margin:0 0 12px; line-height:1.7;
}
.pcard h3{
  font-size:18.5px; line-height:1.6; margin:0 0 12px;
  padding:0; border-bottom:none;
}
.pcard-specs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.spec{
  font-size:13px; color:var(--sub); background:#f5f2ec;
  border-radius:7px; padding:4px 11px; line-height:1.8;
}
.spec b{ color:var(--ink); font-weight:700; font-size:14.5px; }
.spec--cost{ background:var(--accent-soft); color:var(--accent); }
.spec--cost b{ color:var(--accent); font-size:15.5px; }
.pcard-main{ display:flex; gap:20px; align-items:flex-start; margin-bottom:16px; }
.pcard-main img{
  width:112px; height:112px; object-fit:contain; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:8px; flex-shrink:0;
}
.pcard-main .points{ flex:1; min-width:0; margin:0; }
.pcard-detail{ font-size:15.5px; margin:0 0 18px; }
.pcard .buy{ display:block; text-align:center; }
@media (max-width:600px){
  .pcard{ padding:20px 18px; }
  .pcard h3{ font-size:17px; }
  .pcard-main{ gap:14px; }
  .pcard-main img{ width:88px; height:88px; }
  .pcard-detail{ font-size:15px; }
}

/* ---- 旧・商品ブロック(未改修の記事が残っている間だけ使う) ---- */
.product{ display:flex; gap:20px; align-items:flex-start; margin:0 0 34px; }
.product img{
  width:104px; height:104px; object-fit:contain; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:8px; flex-shrink:0;
}
.product-body{ flex:1; min-width:0; }
.product-body p{ margin-bottom:0.9em; }

.tag{
  display:inline-block; font-size:12.5px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:4px 12px;
  margin:0 0 12px; line-height:1.8;
}
.warn{
  display:inline-block; font-size:12.5px; font-weight:700; color:var(--gold);
  background:#fdf3e2; padding:4px 12px; border-radius:999px; margin:0 8px 12px 0; line-height:1.8;
}

.points{ list-style:none; padding:0; margin:0 0 16px; }
.points li{ padding-left:26px; position:relative; margin-bottom:7px; font-size:14.5px; line-height:1.8; }
.points li.good::before{ content:"◎"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.points li.watch::before{ content:"△"; position:absolute; left:0; color:var(--gold); font-weight:700; }

.buy{
  display:inline-block; font-size:15px; font-weight:700; color:#fff;
  text-decoration:none; background:var(--accent); border:1px solid var(--accent);
  border-radius:999px; padding:12px 26px; line-height:1.6;
  transition:background-color .12s ease;
}
.buy:hover{ background:#26483b; }

/* ---- 選び方(結論の下、比較表の前に置く。判断の"軸"そのものを説明する) ---- */
.howto{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:26px 28px; margin:0 0 8px;
}
.howto h2{ margin-top:0; }
.howto-grid{ display:grid; gap:16px; margin-top:18px; }
@media (min-width:560px){ .howto-grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); } }
.howto-item{ border-left:3px solid var(--accent); padding-left:14px; }
.howto-item h3{ margin:0 0 6px; border-bottom:none; padding-bottom:0; font-size:15.5px; }
.howto-item p{ margin:0; font-size:14px; color:var(--sub); }

/* ---- よくある失敗(注意喚起。読み飛ばされないよう他セクションと質感を変える) ---- */
.mistakes{
  background:#fdf3e2; border:1px solid #eddcb8; border-radius:12px;
  padding:26px 28px; margin:0 0 8px;
}
.mistakes h2{ margin-top:0; border-left-color:var(--gold); }
.mistakes ul{ margin:14px 0 0; }
.mistakes li{ margin-bottom:12px; }
.mistakes li:last-child{ margin-bottom:0; }
.mistakes strong{ color:#7a4f00; }

/* ---- FAQ ---- */
.faq{ margin:0 0 8px; }
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:4px 26px; margin-bottom:12px;
}
.faq-q{
  font-size:15.5px; font-weight:700; margin:20px 0 10px;
  padding-left:30px; position:relative;
}
.faq-q::before{
  content:"Q"; position:absolute; left:0; top:-1px;
  color:#fff; background:var(--accent); font-size:12px; font-weight:700;
  width:20px; height:20px; border-radius:5px; display:inline-flex;
  align-items:center; justify-content:center;
}
.faq-a{
  font-size:14.5px; color:var(--sub); margin:0 0 20px;
  padding-left:30px; position:relative;
}
.faq-a::before{
  content:"A"; position:absolute; left:0; top:1px;
  color:var(--accent); background:var(--accent-soft); font-size:12px; font-weight:700;
  width:20px; height:20px; border-radius:5px; display:inline-flex;
  align-items:center; justify-content:center;
}
@media (max-width:600px){
  .howto, .mistakes{ padding:20px 18px; }
  .faq-item{ padding:4px 18px; }
  .faq-q, .faq-a{ padding-left:28px; }
}

/* ---- 一緒に買うと相乗効果 ---- */
.cross-sell{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:24px 26px; margin:0 0 24px;
}
.cross-sell p:last-child{ margin-bottom:0; }

/* ---- 記事末の関連記事 ---- */
.related{ margin-top:56px; padding-top:8px; border-top:1px solid var(--line); }
.related h2{
  font-size:17px; border-left:none; padding-left:0; margin:24px 0 4px;
  letter-spacing:0.04em;
}
.related .article-list > li:first-child{ border-top:1px solid var(--line); }
.related .entry{ padding:16px 4px; }
.related .entry-title{ font-size:15.5px; margin-bottom:2px; }
.related .entry-summary{ font-size:13.5px; }
.related-all{ display:inline-block; margin-top:18px; font-size:14px; font-weight:700; }

/* ---- クロージング ---- */
.closing{
  background:var(--accent-soft); border-radius:12px; padding:28px;
  margin-top:44px; text-align:center;
}
.closing p{ margin:0 0 12px; font-size:15.5px; }
.closing a{ font-weight:700; }

/* ---- フッター ---- */
footer{
  max-width:var(--wrap); margin:0 auto; padding:32px 24px 64px;
  border-top:1px solid var(--line); color:var(--sub);
  font-size:12.5px; line-height:2;
}
footer a{ color:var(--sub); }

/* ---- 画面が狭いとき ---- */
@media (max-width:600px){
  body{ font-size:16px; }
  .hero-inner{ padding:40px 20px 36px; }
  .hero h1{ font-size:25px; }
  .wrap, main, footer, .site-header .bar, .article-head{ padding-left:20px; padding-right:20px; }
  h1{ font-size:23px; }
  h2{ font-size:19px; margin:44px 0 14px; }
  h3{ font-size:16.5px; }
  .product{ gap:16px; }
  .product img{ width:84px; height:84px; }
  .entry{ padding:20px 2px; }
  .entry-title{ font-size:16.5px; }

  /* 比較表は横スクロールさせず、1商品=1カードに積み替える。
     各tdの data-label（見出し行の文言）が項目名として出る。build_lists.py が付与する。 */
  .tablewrap{ overflow-x:visible; }
  table{ min-width:0; background:transparent; }
  thead{ display:none; }
  tbody tr{
    display:block; background:var(--surface); border:1px solid var(--line);
    border-radius:12px; margin-bottom:14px; overflow:hidden;
  }
  tbody tr:nth-child(even) td{ background:transparent; }
  tbody td{
    display:flex; justify-content:space-between; gap:14px;
    border:none; border-top:1px solid var(--line-soft); padding:9px 15px; font-size:14px;
  }
  tbody td::before{
    content:attr(data-label); font-weight:700; color:var(--sub); flex-shrink:0;
  }
  tbody td:first-child{
    display:block; background:#f3f0e9; font-weight:700; border-top:none;
    padding:12px 15px; font-size:14.5px;
  }
  tbody td:first-child::before{ display:none; }
}

@media (max-width:400px){
  .product{ flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}