/* ワザ箱 site.css — デザイン正本: D:/Claude/docs/redesign_20261028/preview/ (2026-10-30 ユーザー確定)
   紺の文字 + 青のアクセント + 黄色のマーカー。読み速度優先・結論の枠だけ強く */
:root{
  --bg:#F3F5F7; --card:#FFFFFF; --ink:#18202E; --sub:#536072; --body:#2A3443;
  --accent:#0B5C8A; --accent-ink:#0B3F5E; --accent-soft:#E3EFF6; --line:#D9DFE6; --line-strong:#C5CED8;
  --marker:#FFE27A; --answer-line:#18202E;
  --code-bg:#1E2633; --code-ink:#E6EBF2;
  --ftr-bg:#18202E; --ftr-ink:#C9D2DD;
  /* 図解(:::flow ほか)専用トークン。図解のHTMLは色を持たずこの系統だけを参照する。
     --fig-conn は矢印(流れの向き=意味を持つ図形)。地の色に対し3:1以上を確保している */
  --fig-box:#FFFFFF; --fig-box-line:#C5CED8; --fig-conn:#7A8796; --fig-on-accent:#FFFFFF;
  --fig-warn:#B3261E; --fig-warn-ink:#7A1A14; --fig-warn-bg:#FBEAEA;
  --fig-ok:#1D7344; --fig-ok-ink:#134D2D; --fig-ok-bg:#E6F3EB;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12171F; --card:#1B222D; --ink:#E6EBF2; --sub:#A3AFBF; --body:#D3DAE4;
    --accent:#6CB4E4; --accent-ink:#A9D3F0; --accent-soft:#1D3346; --line:#2C3644; --line-strong:#3A4656;
    --marker:#F2D35B; --answer-line:#A3AFBF;
    --code-bg:#0B0F15; --code-ink:#E6EBF2;
    --ftr-bg:#0B0F15; --ftr-ink:#A3AFBF;
    --fig-box:#1B222D; --fig-box-line:#3A4656; --fig-conn:#7D8A9B; --fig-on-accent:#0E1620;
    --fig-warn:#F2A39A; --fig-warn-ink:#F7C4BE; --fig-warn-bg:#3A2224;
    --fig-ok:#8FD0A8; --fig-ok-ink:#BDE5CC; --fig-ok-bg:#1E3328;
  }
}
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--bg); color:var(--ink); font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  line-height:1.85; font-size:16px}
h1,h2,h3,.brand-name,.stat-n,.prin-n{font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans",sans-serif}
a{color:var(--accent)}
img{max-width:100%; height:auto}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:760px; margin:0 auto; padding:0 18px}
.wrap-wide{max-width:1180px; margin:0 auto; padding:0 32px}
main{padding-bottom:56px}

/* ヘッダー: ロゴ + ナビ + 記事検索 (検索候補は site.js が .search-pop を作る) */
.hdr{background:var(--card); border-bottom:1px solid var(--line)}
.hdr-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; padding-top:14px; padding-bottom:14px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none}
.brand-ico{flex:0 0 34px}
.brand-txt{display:flex; flex-direction:column; line-height:1.25}
.brand-name{font-size:22px; font-weight:700}
.brand-sub{font-size:11px; color:var(--sub)}
.hdr-nav{display:flex; flex-wrap:wrap; gap:4px 20px; flex:1 1 auto}
.hdr-nav a{color:var(--ink); text-decoration:none; font-size:15px; font-weight:500; padding:8px 0}
.hdr-nav a:hover{color:var(--accent)}
.search{display:flex; flex:0 1 380px; min-width:260px; position:relative}
.search input[type=search]{flex:1 1 auto; min-width:0; height:44px; border:1px solid var(--line-strong); border-right:none;
  border-radius:10px 0 0 10px; padding:0 14px; font:inherit; font-size:15px; background:var(--bg); color:var(--ink)}
.search input[type=search]:focus{outline:2px solid var(--accent); outline-offset:-1px; background:var(--card)}
.search button{width:52px; height:44px; border:none; border-radius:0 10px 10px 0; background:#0B5C8A; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer}
.search-pop{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50; background:var(--card);
  border:1px solid var(--line-strong); border-radius:12px; box-shadow:0 10px 30px rgba(24,32,46,.16);
  padding:6px 0; max-height:70vh; overflow:auto}
.search-pop a{display:flex; gap:10px; padding:10px 14px; text-decoration:none; color:var(--ink); font-size:14px; line-height:1.55}
.search-pop a:hover,.search-pop a.sel{background:var(--bg)}
.search-pop .c{color:var(--accent); font-weight:700; flex:0 0 auto; font-size:12px; padding-top:2px}
.search-pop mark{background:var(--marker); color:#18202E; padding:0}
.search-pop .f{padding:8px 14px 6px; font-size:12px; color:var(--sub); border-top:1px solid var(--line); margin-top:4px}
.search-pop .z{padding:12px 14px; font-size:14px; color:var(--body)}

/* フッター */
.ftr{background:var(--ftr-bg); color:var(--ftr-ink); margin-top:0}
.ftr .wrap-wide{padding-top:34px; padding-bottom:34px; display:flex; flex-direction:column; gap:14px; font-size:13px; line-height:1.7}
.ftr-links{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center}
.ftr-links a{color:var(--ftr-ink); font-size:14px}
.ftr-name{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; font-size:18px; font-weight:700; color:#fff}
.ftr-copy{font-size:12px; opacity:.85}
.amz-disc{margin-top:8px}

/* セクション共通 */
.sec{padding-top:44px}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.sec-h2{font-size:24px; font-weight:700; line-height:1.5; margin-bottom:18px}
.sec-count{font-size:13px; color:var(--sub)}
.empty{color:var(--sub); font-size:14px; margin:14px 0 26px}
.crumb{font-size:13px; color:var(--sub); margin-bottom:14px}
.crumb a{color:var(--sub)}

/* トップ: ヒーロー + 最新の記事 */
.hero{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; align-items:start; padding-top:48px}
.hero-main{display:flex; flex-direction:column; gap:18px}
.hero-badge{align-self:flex-start; font-size:13px; font-weight:700; color:#18202E; background:var(--marker); padding:2px 10px; border-radius:4px}
.hero h1{font-size:40px; line-height:1.4; font-weight:700}
.hero p{font-size:17px; color:var(--body); max-width:34em}
.latest{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:12px}
.latest h2{font-size:18px; font-weight:700}
.latest-item{display:flex; gap:14px; align-items:center; text-decoration:none; color:var(--ink); padding:4px 0}
.latest-item img{width:112px; height:63px; object-fit:cover; border-radius:8px; flex:0 0 112px; background:var(--accent-soft)}
.latest-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.latest-cat{font-size:12px; color:var(--accent); font-weight:700}
.latest-t{font-size:15px; font-weight:500; line-height:1.5}
.latest-item:hover .latest-t{color:var(--accent)}
.stats{display:flex; gap:28px; padding-top:12px; border-top:1px solid var(--line)}
.stats > div{display:flex; flex-direction:column}
.stat-n{font-size:26px; font-weight:700; line-height:1.2}
.stat-n small{font-size:14px; margin-left:2px}
.stat-l{font-size:12px; color:var(--sub)}

/* トップ: カテゴリカード */
.cat-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.catlink{display:flex; gap:14px; align-items:flex-start; padding:18px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; text-decoration:none; color:var(--ink)}
.catlink:hover{border-color:var(--accent)}
.cat-ico{width:44px; height:44px; border-radius:10px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex:0 0 44px}
.cat-ico-lg{width:60px; height:60px; border-radius:14px; flex:0 0 60px}
.cat-txt{display:flex; flex-direction:column; gap:2px}
.cat-name{font-size:16px; font-weight:700}
.cat-desc,.cat-n{font-size:13px; color:var(--sub)}

/* 一覧カード (トップの新着) */
.cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; text-decoration:none; color:var(--ink)}
.card:hover{border-color:var(--accent)}
.card-img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--accent-soft)}
.card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px}
.card-meta{display:flex; gap:8px; align-items:center; font-size:12px}
.card-cat{color:var(--accent); font-weight:700}
.card-date{color:var(--sub)}
.card-t{font-size:15px; font-weight:500; line-height:1.55}

/* トップ: 書き方3か条 */
.principles{margin-top:56px; padding-bottom:8px}
.prin-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.prin-grid > div{display:flex; flex-direction:column; gap:8px}
.prin-n{font-size:14px; font-weight:700; color:var(--accent)}
.prin-grid h3{font-size:18px; font-weight:700}
.prin-grid p{font-size:15px; color:var(--body)}

/* カテゴリページ */
.cat-hero{padding-top:28px}
.cat-head{display:flex; gap:18px; align-items:center}
.cat-head h1{font-size:30px; font-weight:700; line-height:1.35}
.cat-head p{color:var(--body); font-size:15px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.chip{min-height:40px; display:inline-flex; align-items:center; gap:6px; padding:0 16px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--card); color:var(--ink); text-decoration:none; font-size:14px}
.chip:hover{border-color:var(--accent)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:var(--bg); font-weight:700}
.chip-n{font-size:12px; opacity:.7}
.rows{list-style:none; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.row{border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row[hidden]{display:none}
.row a{display:flex; gap:20px; align-items:baseline; padding:13px 20px; text-decoration:none; color:var(--ink)}
.row a:hover{background:var(--bg)}
.row a:hover .row-t{color:var(--accent)}
.row-date{font-size:13px; color:var(--sub); flex:0 0 88px}
.row-t{font-size:16px; font-weight:500; line-height:1.6}

/* ============================================================ 記事ページ */
article{padding-top:28px}
article h1{font-size:32px; line-height:1.45; font-weight:700}
.meta{display:flex; flex-wrap:wrap; gap:4px 18px; font-size:13px; color:var(--sub); margin:14px 0 12px}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.tag-chip{font-size:13px; color:var(--accent-ink); background:var(--accent-soft); text-decoration:none; border-radius:999px;
  padding:4px 12px; line-height:1.6}
.tag-chip:hover{text-decoration:underline}
.answer{background:var(--card); border:2px solid var(--answer-line); border-radius:14px; padding:20px 22px; margin:18px 0}
.answer .tag{display:inline-block; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; font-size:13px; font-weight:700;
  color:#18202E; background:var(--marker); padding:1px 10px; border-radius:4px; margin-bottom:8px; letter-spacing:0}
.answer p{font-size:17px; font-weight:500; line-height:1.8; margin:0}
.answer p + p{margin-top:8px}
article h2{font-size:23px; line-height:1.5; margin:48px 0 16px; padding-bottom:10px; border-bottom:2px solid var(--line); font-weight:700}
/* 「手順1: …」型の見出し = 番号バッジ付き (行動の順番を見出しだけで追える) */
article h2.step-h2{display:flex; align-items:center; gap:12px}
.step-h2 .step-n{flex:0 0 32px; height:32px; border-radius:8px; background:var(--accent); color:var(--fig-on-accent);
  font-size:16px; display:flex; align-items:center; justify-content:center}
article h3{font-size:18px; margin:28px 0 10px; font-weight:700}
article p{margin:0 0 16px; color:var(--body)}
article ul{margin:0 0 16px 22px; color:var(--body)}
article li{margin:4px 0}
article strong{color:var(--ink)}
blockquote{border-left:4px solid var(--line-strong); padding:2px 0 2px 14px; color:var(--sub); margin:12px 0 16px}
blockquote p{margin:0}
ol.steps{margin:12px 0 18px; padding-left:0; list-style:none; counter-reset:s}
ol.steps li{counter-increment:s; background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px 12px 50px; margin:8px 0; position:relative; font-size:15.5px; color:var(--ink)}
ol.steps li::before{content:counter(s); position:absolute; left:14px; top:12px; width:26px; height:26px; border-radius:50%;
  background:var(--ink); color:var(--bg); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center}
pre{background:var(--code-bg); color:var(--code-ink); border-radius:10px; padding:14px; font-size:13px; overflow-x:auto; margin:10px 0 16px; line-height:1.6}
pre code{background:none; padding:0; color:inherit; font-size:inherit; font-family:Consolas,Menlo,"Courier New",monospace}
code{overflow-wrap:anywhere; background:var(--accent-soft); border-radius:5px; padding:1px 6px; font-size:.9em; font-family:Consolas,Menlo,"Courier New",monospace}
/* [[設定]] = 画面上のボタン・メニュー名 (キー風。本文とUI名の境目を目で切る) */
.ui{display:inline-block; background:var(--card); border:1px solid var(--line-strong); border-bottom-width:2px;
  border-radius:6px; padding:0 8px; margin:0 1px; font-size:.9em; font-weight:500; line-height:1.7; white-space:nowrap; color:var(--ink)}
article a{overflow-wrap:anywhere}

/* 図解 (:::flow / :::steps / :::concept → site/figgen.py が組み立てるHTML)。
   図解のHTMLが持つのは class と --n(枝の本数)だけで、寸法も配色もここが正本
   = ダークモードは上の @media 1箇所で完結する。矢印は擬似要素+clip-path(画像・SVG不使用)。 */
.flow-fig{margin:26px 0}
/* --fl-v = 箱と箱の縦の隙間 = 矢印1本の高さ (:::steps だけ詰める) / --fl-gap = 枝の横の隙間 */
.flow{--fl-v:24px; --fl-gap:12px; list-style:none; margin:0 auto; padding:0; max-width:620px}
.flow > li{position:relative}
.flow > li + li{margin-top:var(--fl-v)}
/* 箱: 番号付き(fl-step) / 素(fl-plain) / 警告(fl-warn) / 終着(fl-end) / 分岐の枝(fl-arm) */
.fl-step,.fl-plain,.fl-warn,.fl-end,.fl-arm{background:var(--fig-box);
  border:1.5px solid var(--fig-box-line); border-radius:10px; font-size:15px; line-height:1.55}
.fl-step,.fl-plain,.fl-warn,.fl-end{display:flex; align-items:flex-start; gap:12px; padding:12px 16px}
.fl-warn{background:var(--fig-warn-bg); border-color:var(--fig-warn)}
.fl-warn .fl-t{color:var(--fig-warn-ink); font-weight:500}
.fl-end{background:var(--fig-ok-bg); border-color:var(--fig-ok)}
.fl-end .fl-t{color:var(--fig-ok-ink); font-weight:500}
.fl-t{flex:1 1 auto; min-width:0; color:var(--ink); overflow-wrap:anywhere}
.fl-n{flex:0 0 26px; height:26px; border-radius:50%; background:var(--ink);
  color:var(--bg); font-size:14px; font-weight:700; line-height:26px; text-align:center}
.fl-ico{flex:0 0 auto; font-weight:700}
.fl-warn .fl-ico{color:var(--fig-warn)}
.fl-end .fl-ico{color:var(--fig-ok)}
/* 「↓」= 縦線1.5px + 矢頭(幅11px×高さ7px)を1要素で描く。分岐の箱だけは別(下) */
.flow > li + li:not(.fl-branch)::before,
.flow > li + li.fl-branch .fl-arm::before{content:""; position:absolute; left:50%; margin-left:-5.5px;
  top:calc(-1 * var(--fl-v)); width:11px; height:var(--fl-v); background:var(--fig-conn);
  clip-path:polygon(4.75px 0, 6.25px 0, 6.25px calc(var(--fl-v) - 7px), 11px calc(var(--fl-v) - 7px),
    5.5px var(--fl-v), 0 calc(var(--fl-v) - 7px), 4.75px calc(var(--fl-v) - 7px))}
/* 分岐: --bar = 横バーの端 = 左右端の枝の中心 (1fr等分 + gap ぶんを差し引く) */
.fl-branch{--n:2; --bar:calc(50% / var(--n) - (var(--n) - 1) * var(--fl-gap) / (2 * var(--n)))}
.fl-arms{display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:var(--fl-gap);
  list-style:none; margin:0; padding:0; position:relative}
.fl-arm{position:relative; padding:10px 14px 12px}
.fl-arm-h{display:block; font-size:13px; font-weight:700; color:var(--sub);
  padding-bottom:4px; margin-bottom:4px}
.fl-arm .fl-t{display:block}
/* 前に箱がある時だけ「幹線10px → 横バー → 各枝への↓」を描く(先頭が分岐なら何も引かない) */
.flow > li + li.fl-branch{margin-top:calc(var(--fl-v) + 10px)}
.flow > li + li.fl-branch::before{content:""; position:absolute; left:50%; margin-left:-0.75px;
  top:calc(-1 * var(--fl-v) - 10px); width:1.5px; height:10px; background:var(--fig-conn)}
.flow > li + li.fl-branch::after{content:""; position:absolute; top:calc(-1 * var(--fl-v));
  left:var(--bar); right:var(--bar); height:1.5px; background:var(--fig-conn)}
/* 合流: 各枝の下 → 合流バー → (次の箱の ::before が「↓」で受ける) */
.flow > li.fl-branch:not(:last-child) .fl-arm::after{content:""; position:absolute; left:50%;
  margin-left:-0.75px; bottom:-10px; width:1.5px; height:10px; background:var(--fig-conn)}
.flow > li.fl-branch:not(:last-child) .fl-arms::after{content:""; position:absolute; bottom:-10px;
  left:var(--bar); right:var(--bar); height:1.5px; background:var(--fig-conn)}
.flow > .fl-branch + li{margin-top:calc(var(--fl-v) + 10px)}
/* 分岐→分岐は合流バーと配りバーが同じ高さで重なる。幹線を引くと宙に浮くので引かない */
.flow > .fl-branch + li.fl-branch::before{content:none}
/* :::steps = 節の中のミニ手順図。字は本文と同じまま、縦の間隔と箱の内側だけ詰める */
.flow-fig-sm{margin:16px 0 18px}
.flow-fig-sm .flow{--fl-v:18px; max-width:560px}
.flow-fig-sm .fl-step,.flow-fig-sm .fl-plain,.flow-fig-sm .fl-warn,.flow-fig-sm .fl-end{padding:10px 14px}
/* :::concept = 仕組みの1枚図 (A → B の左右2箱 + 1行キャプション) */
.concept-fig .cn{max-width:620px; margin:0 auto}
.cn-row{display:flex; align-items:center; justify-content:center; gap:12px}
.cn-row + .cn-row{margin-top:16px}
.cn-box{flex:1 1 0; max-width:280px; text-align:center; padding:12px 10px; background:var(--fig-box);
  border:1.5px solid var(--fig-box-line); border-radius:10px; font-size:15px; line-height:1.55;
  color:var(--ink); overflow-wrap:anywhere}
.cn-hi{border-color:var(--accent)}   /* 右 = 答え側 */
.cn-arrow{flex:0 0 22px; width:22px; height:11px; background:var(--fig-conn);
  clip-path:polygon(0 4.75px, 15px 4.75px, 15px 0, 22px 5.5px, 15px 11px, 15px 6.25px, 0 6.25px)}
.cn-cap{text-align:center; font-size:13px; color:var(--sub); margin:10px 0 0}
/* 並列比較 (:::compare → site/figgen.py が組み立てるカードHTML。狭い幅では縦積み) */
.cmp-fig{margin:22px 0}
.cmp{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:12px}
.cmp-card{min-width:0; overflow-wrap:anywhere; background:var(--fig-box); border:1px solid var(--line); border-radius:12px; padding:14px 18px}
.cmp-h{font-size:15px; font-weight:700; color:var(--accent); padding-bottom:6px;
  margin-bottom:8px; border-bottom:2px solid var(--accent-soft)}
.cmp-card ul{margin:0; padding:0; list-style:none}
.cmp-card li{position:relative; padding-left:14px; margin:6px 0; font-size:15px; line-height:1.65; color:var(--ink)}
.cmp-card li::before{content:""; position:absolute; left:0; top:.68em; width:5px; height:5px;
  border-radius:50%; background:var(--fig-conn)}
/* 図の中の改行位置: figgen.py が「→」区切りごとに .fl-seg を出す = 改行できる場所が矢印の前後だけになる */
.fl-seg{white-space:nowrap}
.fl-t,.cn-box,.fl-arm-h,.cmp-card li{text-wrap:balance}
article p,article li{text-wrap:pretty}
/* 枝は横並びで1本の幅が狭い。375px 未満は nowrap を解く (横スクロール防止・2026-08-19 実測) */
@media (max-width:374px){.fl-branch .fl-seg{white-space:normal}}

/* チェックリスト */
.check{display:flex; flex-direction:column; gap:10px; margin:12px 0 18px}
.check label{display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:12px 16px; font-size:15px; color:var(--ink); cursor:pointer}
.check input{width:20px; height:20px; flex:0 0 20px; margin-top:4px; accent-color:var(--accent)}
.check p{margin:0}

/* note CTA */
.note-cta{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:30px 0}
.note-cta .h{font-weight:700; font-size:16px; color:var(--ink)}
.note-cta ul{margin:10px 0 14px 20px; font-size:14px}
.note-cta p{margin:10px 0 14px}
.note-cta .btn{display:inline-flex; align-items:center; min-height:44px; background:var(--ink); color:var(--bg); text-decoration:none;
  font-weight:700; padding:0 18px; border-radius:10px; font-size:14.5px}
.note-cta .free{font-size:12px; color:var(--sub); margin-top:10px}

/* PR開示 (affiliate:true + config.affiliate.enabled=true のときだけ本文冒頭に自動挿入) */
.pr-note{font-size:12px; line-height:1.6; color:var(--sub); background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:8px 12px; margin:16px 0}

/* 記事のアイキャッチ (挿絵の無い記事だけ・OGPと同じ1枚・alt空=装飾) / 挿絵 */
.eyecatch{margin:6px 0 22px}
.eyecatch img{display:block; width:100%; height:auto; border-radius:14px; aspect-ratio:3/1; object-fit:cover; object-position:center}
.illust{margin:26px 0}
.illust img{display:block; width:100%; height:auto; border-radius:14px; aspect-ratio:1200/675}

/* あわせて読みたい */
.rel{margin-top:8px}
.rel-item{display:flex; justify-content:space-between; gap:12px; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; text-decoration:none; color:var(--ink); font-weight:500; margin-bottom:10px}
.rel-item:hover{border-color:var(--accent)}
.rel-arrow{color:var(--accent); font-size:20px; line-height:1}

/* ============================================================ 2カラム (記事・固定ページ) */
.layout{display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start}
.main-col{flex:999 1 560px; min-width:0; max-width:780px}
.side{flex:1 1 280px; display:flex; flex-direction:column; gap:20px; padding-top:28px}
.side-box{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px}
.side-h{font-size:15px; font-weight:700; margin-bottom:10px}
.side-toc{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:14px}
.side-toc a{color:var(--ink); text-decoration:none}
.side-toc a:hover{color:var(--accent); text-decoration:underline}
.side-list,.side-cats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.side-list a,.side-cats a{color:var(--ink); text-decoration:none; font-size:14px; line-height:1.6}
.side-list a:hover,.side-cats a:hover{color:var(--accent)}
.side-cats a{display:flex; align-items:center; gap:8px}
.side-ico{color:var(--accent); display:flex}
.side-n{margin-left:auto; font-size:12px; color:var(--sub)}
.side-more{margin-top:12px; font-size:14px; font-weight:700}
.side-more a{text-decoration:none}

/* 404 / 固定ページ */
.nf{padding:48px 0}
.nf h1{font-size:28px; margin-bottom:12px}
.nf p{margin-bottom:10px; color:var(--body)}

/* ============================================================ レスポンシブ */
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prin-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .wrap-wide{padding:0 16px}
  .hero{padding-top:32px}
  .hero h1{font-size:27px}
  .search{flex:1 1 100%; min-width:0}
  .cat-grid{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:minmax(0,1fr); gap:12px}
  .card{flex-direction:row}
  .card-img{width:120px; aspect-ratio:1/1; flex:0 0 120px}
  .card-body{padding:10px 12px}
  .sec-h2{font-size:21px}
  article h1{font-size:24px}
  article h2{font-size:20px; margin-top:40px}
  .cat-head h1{font-size:24px}
  .row a{flex-direction:column; gap:0; padding:12px 16px}
}