/* AIツールDB 共通CSS（app/static/style.css が正。mock/ は凍結した見本で、以後ここだけを直す）
   トークンの正本：business/ai-meitencho/tone.md ／ 組みの正本：agents/handoff/25-designer.md（読み物が主役のメディア）・33-designer.md（全画面の余白と一覧の組み）
   新聞・ビジネス誌の Web 版の組み。白地＋細罫＋赤1色。級数は 12/14/17/20/24/32 のみ（12 はタグ・日付・「公式」）。
   余白の階層：節の間 --s-sec ＞ 塊の間 --s-block ＞ 見出し→中身 --s-head ／ 行の上下 --s-row ＞ 行の中 --s-in ＞ 字の組 --s-tight。罫をまたぐ余白は行の中の最大余白の2倍以上。
   design_rule §4-1 例外（繰り返し来て使う面）：OS テーマに追従する。写真・実画面は反転しない。 */
:root{color-scheme:light dark;
  --bg:#fffefb;--sunk:#f3f1ec;--ink:#1f1e1c;--sub:#55524c;--line:#e4e1da;--rule:#1f1e1c;
  --accent:#a81e17;--accent-fill:#a81e17;--on-accent:#fff;
  --font:"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic Medium","Noto Sans JP",Meiryo,sans-serif;
  --wrap:1200px;--gut:24px;
  --s-sec:64px;--s-block:24px;--s-head:16px;--s-row:16px;--s-in:8px;--s-tight:4px}
@media (max-width:759px){:root{--s-sec:48px;--s-block:16px;--s-head:12px}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;
  --bg:#17181a;--sunk:#27282b;--ink:#edebe6;--sub:#b8b5ad;--line:#38393d;--rule:#edebe6;--accent:#ff9a8a;--accent-fill:#c7362a}}
:root[data-theme=dark]{color-scheme:dark;--bg:#17181a;--sunk:#27282b;--ink:#edebe6;--sub:#b8b5ad;--line:#38393d;--rule:#edebe6;--accent:#ff9a8a;--accent-fill:#c7362a}
:root[data-theme=light]{color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:65px}
@media (max-width:1179px){html{scroll-padding-top:93px}}

/* 改行：Chrome は auto-phrase。iOS Safari は本文に入れた <wbr>（budoux）と keep-all で文節ごとに折る */
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/28px var(--font);letter-spacing:.02em}
body,p,li,dd,td,th{word-break:keep-all;word-break:auto-phrase;line-break:strict;overflow-wrap:break-word;text-wrap:pretty}
h1,h2,h3,h4,p,ol,ul,figure,dl,dd{margin:0;padding:0}
h1,h2,h3,h4{word-break:keep-all;word-break:auto-phrase;font-size:inherit}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block}
.wrap{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.nw{white-space:nowrap}.nw-ib{display:inline-block}
.art-main .nw wbr{display:none}
.phrase span{display:inline-block}
.breakable{word-break:break-all}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
main{min-width:0}

/* ---- ヘッダー：地と同じ白＋細罫1本。選択タブは下端のメインカラーの帯だけ（東洋経済の上段／朝日の罫） ---- */
.hd{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);transition:transform .25s ease;will-change:transform}
.hd.is-hidden{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.hd{transition:none}}
.hd-in{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut);height:64px;display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;height:64px;color:var(--ink)}
.logo svg{height:24px;width:auto;display:block}
.gtabs{align-self:stretch;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.gtabs::-webkit-scrollbar{display:none}
.gtabs-in{display:flex;align-items:stretch;gap:24px;height:100%;width:max-content;flex-wrap:nowrap}
.gtab{flex:none;min-height:44px;position:relative;display:flex;align-items:center;font-size:14px;line-height:22px;font-weight:700;letter-spacing:.04em;white-space:nowrap;color:var(--sub);cursor:pointer}
.gtab:hover{color:var(--ink)}
.gtab[aria-selected=true],.gtab[aria-current]{color:var(--ink)}
.gtab[aria-selected=true]::after,.gtab[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.hd-form{display:flex;align-items:center;gap:8px;height:32px;width:176px;padding:0 12px;border:1px solid var(--line);border-radius:16px;color:var(--sub);font-size:14px}
.hd-form input{all:unset;width:100%;font:400 14px/22px var(--font);color:var(--ink)}
.hd-form input::placeholder{color:var(--sub)}
.hd-search{display:none}
.hd-search .ic{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;list-style:none}
.hd-search .ic::-webkit-details-marker{display:none}
.hd-search .ic svg.i{width:20px;height:20px}
.hd-search form{position:absolute;left:0;right:0;top:100%;display:flex;align-items:center;gap:8px;height:56px;padding:0 16px;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--sub)}
.hd-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:17px;color:var(--ink);outline-offset:4px}
.thm{display:flex;gap:0}
.thm button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--sub);border-radius:2px}
.thm button[aria-pressed=true]{color:var(--ink);background:var(--sunk)}
@media (max-width:1179px){
  .hd-in{height:auto;flex-wrap:wrap;gap:0;padding:0 16px}
  .logo{height:48px}.logo svg{height:20px}
  .hd-r{height:48px;gap:4px}
  .hd-form{display:none}.hd-search{display:block}
  .gtabs{order:3;flex:0 0 calc(100% + 32px);margin:0 -16px;padding:0 16px;position:relative}
  .gtabs-in{height:44px;gap:0 20px}
  .gtab{height:44px}
}
/* タブ名を保ち、収まらない幅ではナビゲーションの中だけ横へ動かす。 */

/* ---- ページ頭：何のページかを言う。見出し＋1文＋短い太帯の罫 ---- */
.vb{background:var(--sunk);font-size:14px;line-height:22px;color:var(--ink)}
.vb-in{display:block;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:8px var(--gut)}
.vb b{color:var(--accent);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;margin:0 1px}
.ph{border-bottom:1px solid var(--line);position:relative}
.ph::after{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:3px;background:var(--accent)}
.ph-t{font-size:32px;line-height:44px;font-weight:700;letter-spacing:.02em;font-feature-settings:"palt"}
.ph-d{margin-top:8px;max-width:47em;font-size:17px;line-height:28px;color:var(--sub)}
.ph--top{padding:20px 0 12px;display:flex;align-items:baseline;gap:24px}
.ph--top .ph-t{font-size:24px;line-height:36px;flex:none}
.ph--top .ph-d{margin:0}
.bc{padding:16px 0 0;font-size:14px;line-height:22px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc a:hover{color:var(--accent)}
/* 一覧の面のページ頭（33-designer §4-4）。タブの面は見出しの右に1文 */
.ph:not(.ph--top){padding:24px 0 16px}
.ph:not(.ph--top) .ph-t{font-size:24px;line-height:32px}
.ph:not(.ph--top) .ph-d{margin-top:var(--s-tight);font-size:14px;line-height:24px;max-width:none}
@media (min-width:900px){
  .tp-panel .ph:not(.ph--top){display:flex;align-items:baseline;gap:24px}
  .tp-panel .ph:not(.ph--top) .ph-t{flex:none}
  .tp-panel .ph:not(.ph--top) .ph-d{margin:0}
}
@media (max-width:759px){
  .ph-d{margin-top:4px;line-height:26px}
  .ph--top{display:block;padding:16px 0 12px}
  .ph--top .ph-t{font-size:20px;line-height:30px}
  .ph--top .ph-d{margin-top:2px}
  .ph:not(.ph--top){padding:16px 0 12px}
  .ph:not(.ph--top) .ph-t{font-size:20px;line-height:28px}
}

/* ---- 節の見出し（全面 20/28） ---- */
.sh{display:flex;align-items:baseline;gap:16px;padding-bottom:8px;border-bottom:1px solid var(--line);position:relative}
.sh::after{content:"";position:absolute;left:0;bottom:-1px;width:32px;height:3px;background:var(--accent)}
.sh h2{font-size:20px;line-height:28px;font-weight:700;font-feature-settings:"palt";white-space:nowrap}
.sh .sum{font-size:14px;line-height:22px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.sh .sum b{font-size:17px;color:var(--ink);margin:0 2px}
.sh .sum:last-child{margin-left:auto}
.sh .more{margin-left:auto;font-size:14px;line-height:22px;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:4px;white-space:nowrap}
.sh .sum+.more{margin-left:16px}
.sh .sum:has(+.more){margin-left:auto}
@media (max-width:759px){.sh{gap:8px}.sh .sum+.more{margin-left:0}}
/* 幅320〜359：節の見出しの行を1行に収める（料金の断りは残し、飾りの › と掲載数だけ落とす） */
@media (max-width:359.98px){
  .sh h2{font-size:17px;line-height:24px}
  .sh .more svg,.r-sec--cat .sh .sum{display:none}

}
@media (max-width:429.98px){
  .tp .sec .sh{flex-wrap:wrap}
  .tp .sec .sh h2{flex-basis:100%}
  .tp .sec .sh .sum{margin-left:0}
  .tp .sec .sh .more{margin-left:auto}
  .rail .cg .cg-n{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:22px}
}
.sec{padding-top:var(--s-sec)}
.sec-h,.ah{font-size:20px;line-height:28px;font-weight:700;font-feature-settings:"palt";padding-bottom:8px;margin-bottom:var(--s-head);border-bottom:1px solid var(--line);position:relative}
.sec-h::after,.ah::after{content:"";position:absolute;left:0;bottom:-1px;width:32px;height:3px;background:var(--accent)}
.sec-more{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:14px;line-height:22px;font-weight:700;color:var(--ink)}
.sec-more:hover{color:var(--accent)}

/* ---- 共通の文字部品 ---- */
.kick{font-size:14px;line-height:22px;font-weight:700;color:var(--accent);display:block}
.ttl{font-weight:700;font-feature-settings:"palt"}
.ttl a:hover{color:var(--accent)}
.meta{font-size:14px;line-height:22px;color:var(--sub);font-variant-numeric:tabular-nums}
.date{font-size:14px;line-height:22px;color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
.thumb{display:block;overflow:hidden;background:var(--sunk);border-radius:2px;position:relative}
.thumb img{width:100%;height:auto;object-fit:cover}
.s{display:block;text-wrap:balance}
.ph-d .s,.rd-desc .s,.art-lede .s{text-wrap:pretty}
.ph-date{display:block}
.ph-date .pr-n{margin-left:1em}

/* ---- 記事タブ（既定の面）：左にトップ記事・中に記事の行・右にカテゴリから探す（東洋経済・朝日の3列＋マイベストの右列） ---- */
.top{display:grid;grid-template-columns:minmax(0,468fr) minmax(0,368fr) 300px;grid-template-rows:auto 1fr;grid-template-areas:"lead al rail" "lower lower rail";column-gap:32px;padding-top:var(--s-block);align-items:start}
.lead{grid-area:lead}.al{grid-area:al}.rail{grid-area:rail}
.rail .cg a{height:48px}
.lead .thumb img{aspect-ratio:16/9}
.lead .kick{margin-top:var(--s-head)}
.lead h2{font-size:32px;line-height:44px;margin-top:var(--s-tight)}
.lead p.d{margin-top:var(--s-in);color:var(--sub)}
.lead .meta{margin-top:var(--s-in)}
.al li{display:grid;grid-template-columns:minmax(0,1fr) 120px;column-gap:16px;padding:var(--s-row) 0;border-bottom:1px solid var(--line)}
.al li:first-child{padding-top:0}
.al .thumb{grid-column:2;grid-row:1/4;align-self:start}
.al .thumb img,.lower .thumb img{aspect-ratio:16/10}
.al h2{font-size:17px;line-height:26px}
.al .meta{margin-top:4px;align-self:end}
.lower{grid-area:lower;display:grid;grid-template-columns:minmax(0,468fr) minmax(0,368fr);column-gap:32px;padding-top:var(--s-block)}
.lower li{display:grid;grid-template-columns:minmax(0,1fr) 120px;column-gap:16px;padding:0}
.lower .thumb{grid-column:2;grid-row:1/4;align-self:start}
.lower .kick{margin-top:0}
.lower h2{font-size:17px;line-height:26px;margin-top:0}
.lower .meta{margin-top:4px}
@media (max-width:1179px){
  .top{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto 1fr;grid-template-areas:"lead rail" "al rail" "lower rail";column-gap:24px}
  .al{margin-top:24px}.al li:first-child{padding-top:var(--s-row);border-top:1px solid var(--line)}
  .lower{grid-template-columns:minmax(0,1fr);row-gap:var(--s-row)}
}
@media (max-width:759px){
  .top{display:flex;flex-direction:column;align-items:stretch;padding-top:var(--s-head)}
  .lead h2{font-size:24px;line-height:36px}
  .rail{margin-top:var(--s-sec)}
  .al{margin-top:var(--s-sec)}
  .lower{row-gap:0}
  .lower li{padding:var(--s-row) 0;border-bottom:1px solid var(--line)}
  /* SP：2列、1タップ 56 高 */
  .rail .cg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .rail .cg a{height:56px;gap:8px}
  .rail .cg svg.cg-a{display:none}
  .rail .cg .n{display:none}
}

/* ---- 絞り込み（ワンクリックのタグ） ---- */
.fbar{display:flex;align-items:flex-start;gap:24px;padding:var(--s-head) 0 var(--s-in)}
.fch{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.ch{height:30px;padding:0 10px;border-radius:4px;background:var(--sunk);font-size:14px;line-height:30px;white-space:nowrap}
.fwrap{flex:1;min-width:0}
.filter-panel summary{min-height:44px;cursor:pointer;font-size:14px;line-height:22px;padding:11px 0}
.filter-selection{margin-left:12px;font-weight:700;overflow-wrap:anywhere}
.fch-lab{display:block;margin-bottom:6px;font-size:12px;line-height:18px;color:var(--sub)}
.ch--e{margin-right:10px}
.ch i{font-style:normal;margin-left:3px;font-size:12px;color:var(--sub);font-feature-settings:"tnum"}
.ch[aria-pressed=true]{background:var(--ink);color:var(--bg);font-weight:700}
.ch[aria-pressed=true] i{color:inherit}
.ch:disabled{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--sub);cursor:default}
.ch:disabled i{color:inherit}
@media (hover:hover){.ch:not(:disabled):not([aria-pressed=true]):hover{box-shadow:inset 0 0 0 1px var(--sub)}}
.lbar{flex:none;min-width:224px;display:flex;justify-content:flex-end;align-items:center;gap:12px;font-size:14px;line-height:26px;color:var(--sub)}
.lbar b{font-size:14px;color:var(--ink);margin-right:1px}
.db-x{font-size:14px;line-height:26px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.db-x:hover{color:var(--accent)}
.seg{display:inline-flex;border-radius:3px;overflow:hidden;background:var(--sunk)}
.seg button{height:26px;padding:0 10px;font-size:14px;line-height:26px;color:var(--ink);white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg);font-weight:700}
@media (max-width:1179px){
  .fbar{flex-direction:column;gap:8px}
  .fch{flex:none;width:100%}
  .lbar{flex-wrap:wrap;min-width:0;justify-content:flex-start}
}
/* SP：絞り込みを開くと全タグが折り返し、実際のボタンを44px高にする。 */
@media (max-width:759px){
  .fbar{padding:var(--s-in) 0 0;margin:0 -16px;gap:4px}
  .lbar{padding:0 16px;min-height:26px;gap:4px 16px}
  .fch{gap:6px;padding:4px 16px;box-sizing:border-box}
  .ch{flex:none;min-height:44px;height:auto;line-height:22px;position:relative}
  .filter-panel summary{padding:11px 16px}
}

/* ---- 一覧の1件 .ti（新着・海外・ランキング・カテゴリ詳細）：PC も1列。〈絵〉〈名前・概要・属性〉〈料金〉（33-designer §4-1） ---- */
.tl{display:block}
.tl>.ti:first-child{border-top:0}
.ti{display:grid;grid-template-columns:120px minmax(0,1fr) 408px;column-gap:20px;
  grid-template-areas:"pic head spec" "pic desc spec" "pic foot spec";grid-template-rows:auto auto 1fr;
  padding:12px 0;border-top:1px solid var(--line);align-items:start;min-width:0;position:relative;background:var(--bg)}
.ti--r{grid-template-columns:40px 120px minmax(0,1fr) 408px;column-gap:20px;
  grid-template-areas:"no pic head spec" "no pic desc spec" "no pic foot spec"}
.rd-pic{grid-area:pic;align-self:start;display:block;overflow:hidden;border-radius:2px;background:var(--sunk);position:relative}
.rd-pic img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.rd-pic.is-photo img{object-position:center}
.rd-pic::after,.thumb--line::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;pointer-events:none}
.ti-head{grid-area:head;min-width:0}
.ti-name{font-size:17px;line-height:24px;font-weight:600;font-feature-settings:"palt";min-width:0}
.ti-name a:hover{color:var(--accent)}
.ti-name .nw-ib{max-width:100%}
.rd-pr{font-size:14px;line-height:1;font-weight:400;color:var(--sub);margin-right:8px;font-style:normal}
.rd-desc{grid-area:desc;margin-top:var(--s-tight);font-size:14px;line-height:24px;color:var(--ink)}
.rd-no{grid-area:no;font-size:24px;line-height:28px;font-weight:700;color:var(--sub);font-feature-settings:"tnum";text-align:center}
.rd--top3 .rd-no{color:var(--accent)}
.rd-spec{grid-area:spec;min-width:0}
.ti-spec{grid-area:spec;min-width:0}
.ti-spec:empty{display:none}
/* 料金：プランごとの縦の組（プラン名→金額→注記）。縦罫なし。1プランでも2列の枠にして金額の x を揃える */
.pl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.pl[style*="--n:3"]{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px}
.pl-c{min-width:0}
.pl-n{font-size:14px;line-height:20px;font-weight:400;color:var(--ink);overflow-wrap:break-word}
.pl-p{font-size:14px;line-height:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.pl-t{font-size:14px;line-height:20px;color:var(--sub);overflow-wrap:anywhere;text-wrap:wrap}
.pl-more{display:none}
.rd-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tg{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:3px;background:var(--sunk);font-size:14px;line-height:24px;white-space:nowrap;position:relative}
button.tg:hover{box-shadow:inset 0 0 0 1px var(--sub)}
.tg[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.tg-more{font-size:14px;line-height:24px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tgc-x{display:none}
.rd-tags.open .tgc-x{display:inline-flex}
/* 下の段：タグ（左）・更新と詳しく見る（右）。同じ1セルに重ねる */
.ti .rd-tags{grid-area:foot;margin:var(--s-tight) 0 0;align-self:start;justify-self:start;gap:var(--s-tight);max-width:calc(100% - 96px);z-index:1}
.ti .tg{height:22px;line-height:22px;padding:0 6px;font-size:12px}
.ti .tg-more{font-size:12px;line-height:22px}
.ti-end{grid-area:foot;justify-self:end;align-self:start;margin:var(--s-tight) 0 0;display:flex;align-items:baseline;gap:10px;font-size:12px;line-height:22px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.ti-end .date{font-size:12px;line-height:22px}
/* 詳しく見る：詳細ページへのリンク（クリックでモーダル）。14px の字を、同じ行の 12px のタグ・日付と同じベースラインに置く */
.dt{grid-area:foot;margin-top:8px;display:inline-flex;align-items:center;gap:2px;width:max-content;height:32px;font-size:14px;line-height:22px;font-weight:700;color:var(--ink);white-space:nowrap}
.dt:hover{text-decoration:underline;text-underline-offset:3px}
.dt svg.i{width:14px;height:14px}
.ti .dt{margin:0 0 0 auto;height:24px;flex:none;align-self:flex-start}
.rd-end{grid-area:foot;margin-top:8px;justify-self:end;align-self:start;display:flex;align-items:center;gap:16px;height:32px;font-size:14px;line-height:22px;color:var(--sub);font-variant-numeric:tabular-nums}
.tl-out{position:relative}
@media (pointer:coarse){.tl-out::after{content:"";position:absolute;inset:-16px -14px -16px -2px}}
.tl-ic{display:inline;margin-left:3px;padding-left:.72em;color:var(--sub);opacity:.6;background:currentColor;-webkit-mask:var(--tl) center/.72em no-repeat;mask:var(--tl) center/.72em no-repeat;--tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E")}
a:hover .tl-ic{color:var(--accent);opacity:1}
.it-late{font-size:14px;line-height:20px;margin-top:var(--s-tight);color:var(--ink)}
.it-late b{color:var(--accent)}
.it-late .date{margin-left:8px;font-size:12px;line-height:20px}
@media (pointer:coarse) and (min-width:760px){.ti .dt{height:32px;line-height:32px}}
@media (max-width:1079px){
  .ti{grid-template-columns:120px minmax(0,1fr);grid-template-areas:"pic head" "pic desc" "pic foot" "pic spec";grid-template-rows:auto auto auto 1fr}
  .ti--r{grid-template-columns:40px 120px minmax(0,1fr);grid-template-areas:"no pic head" "no pic desc" "no pic foot" "no pic spec"}
  .ti-spec{margin-top:var(--s-in)}
}
@media (max-width:759px){
  .ti{grid-template-columns:96px minmax(0,1fr);column-gap:12px;grid-template-rows:none;
    grid-template-areas:"pic head" "pic tags" "desc desc" "spec spec" "foot foot";padding:var(--s-row) 0 var(--s-tight)}
  .ti--r{grid-template-columns:40px 96px minmax(0,1fr);column-gap:8px;grid-template-areas:"no pic head" "no pic tags" "desc desc desc" "spec spec spec" "foot foot foot"}
  .ti-name{font-size:17px;line-height:24px}
  .ti .rd-desc{margin-top:var(--s-in);line-height:23px}
  .ti .rd-tags{grid-area:tags;max-width:none;margin:var(--s-tight) 0 0;align-self:start}
  .ti .tg{height:24px;line-height:24px}
  .ti-spec{margin-top:12px}
  .ti-end{justify-self:start;margin:0;line-height:44px}
  .ti-end .date{line-height:44px}
  .ti .dt{height:32px;line-height:32px}
  .pl,.pl[style*="--n:3"]{grid-template-columns:repeat(var(--ns,2),minmax(0,1fr));column-gap:16px}
  .pl-c:nth-child(n+3){display:none}
  .pl.open .pl-c:nth-child(n+3){display:block;grid-column:1/-1;border-top:1px solid var(--line);margin-top:4px}
  .pl-more{display:inline-block;grid-column:1/-1;justify-self:start;font-size:14px;line-height:20px;padding:4px 0 0;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
  .pl.open .pl-more{display:none}
  .dt{height:44px}
  .rd-end{height:44px}
  .tg{height:28px;line-height:28px}
  .ti button.tg,.cm button.tg,button.tg{height:44px;line-height:44px}
  .tg-more{line-height:28px}
  .dt{margin-top:4px}
  .rd-end{margin-top:4px}
}

/* ---- みんなのAIサービス：画面が主役の3列（マイベストのカテゴリ面・東洋経済の3列） ---- */
.cmg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;padding-top:var(--s-in);align-items:start}
.cm{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"shot" "name" "desc" "spec" "art" "foot"}
.cm .rd-pic{grid-area:shot}
.cm--np{grid-template-areas:"name" "desc" "spec" "art" "foot"}
.cm--np .cm-name{margin-top:0}
.cm-name{grid-area:name;margin-top:var(--s-head);font-size:17px;line-height:26px;font-weight:700;font-feature-settings:"palt"}
.cm-name a:hover{color:var(--accent)}
.cm .rd-spec{margin-top:var(--s-in)}
.cm .rd-tags{margin-top:0}
.cm-art{grid-area:art;margin-top:var(--s-in);font-size:14px;line-height:22px}
.cm-art a{color:var(--sub)}
.cm-art a:hover{color:var(--accent)}
.med{color:var(--sub);margin-left:6px;white-space:nowrap;font-size:14px}
.med svg.i{width:14px;height:14px;margin-left:2px;vertical-align:-2px}
.cm .dt,.cm .rd-end{margin-top:4px}
.cm .tg{height:22px;line-height:22px;padding:0 6px;font-size:12px}
.cm .dt{height:24px;line-height:24px}
.cm .rd-end{height:24px;font-size:12px;line-height:24px}
.cm .rd-end .date{font-size:12px;line-height:24px}
@media (min-width:1180px){.cmg{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}}
@media (max-width:1079px){.cmg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:759px){.cmg{grid-template-columns:minmax(0,1fr);gap:32px}.cm .dt,.cm .rd-end{height:44px;line-height:44px}}

/* ---- ランキングの面：カテゴリの入口が一番上 ---- */
.r-sec{padding-top:var(--s-sec)}
.r-sec--cat{padding-top:var(--s-block)}
/* カテゴリの入口 .cg（トップの右列・ランキングのタブで同じ部品。行全体がリンク、細罫の行） */
.cg a{display:flex;align-items:center;gap:12px;height:60px;border-bottom:1px solid var(--line);color:var(--ink)}
.cg svg.i{flex:none;width:24px;height:24px;color:var(--sub);stroke-width:1.5}
.cg svg.cg-a{width:16px;height:16px;opacity:.6;stroke-width:1.75}
.cg .cg-n{font-size:17px;line-height:26px;font-weight:700;white-space:nowrap}
.cg .n{margin-left:auto;font-size:14px;line-height:22px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (hover:hover){.cg a:hover{color:var(--accent)}.cg a:hover svg.i{color:var(--accent);opacity:1}}
/* ランキングのタブ：幅いっぱいの2列。名前の下に各カテゴリの上位3件の名前 */
.cg--w{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.cg--w a{height:auto;min-height:88px;padding:var(--s-row) 0;gap:16px}
.cg--w svg.i{width:28px;height:28px}
.cg--w .cg-t{min-width:0;display:block}
.cg--w .cg-n{display:block;font-size:20px;line-height:28px}
.cg--w .cg-x{display:block;margin-top:2px;font-size:14px;line-height:22px;color:var(--sub);word-break:keep-all;overflow-wrap:anywhere}
.cg--w .cg-x b{font-weight:700;color:var(--ink)}
@media (max-width:759px){
  .cg--w{column-gap:16px}
  .cg--w a{min-height:64px;padding:0;gap:8px}
  .cg--w svg.i{width:24px;height:24px}
  .cg--w .cg-n{font-size:17px;line-height:24px}
  .cg--w .cg-x{display:none}
  .cg--w svg.cg-a{display:none}
  .cg--w .n{display:none}
}

/* ---- 開発記事 ---- */
.dev{padding-top:48px}
.dev li{padding:12px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:28px}
.dev li a:hover{color:var(--accent)}

/* ---- 絵 ---- */
.shot{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line);background:var(--sunk)}
.photo{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:2px;background:var(--sunk)}
.shot.s,.photo.s{width:56px;aspect-ratio:16/10;border-radius:2px;flex:none}

/* ---- タグ（読むだけの札）・メタの行 ---- */
.tags-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.it-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.it-meta .date{margin-left:auto}
.it-end{margin-left:auto;display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.it-end .date{margin-left:0}

/* ---- 名前・一言 ---- */
.tname{font-size:20px;line-height:30px;font-weight:700;display:block;font-feature-settings:"palt"}
.tname a:hover{color:var(--accent)}
.one{margin-top:8px;font-weight:700}

/* ---- 主CTA（赤の全丸＋白い円の↗） ---- */
.cta{display:flex;align-items:center;gap:12px;width:100%;max-width:100%;min-height:52px;margin-top:16px;padding:0 8px 0 20px;background:var(--accent-fill);color:var(--on-accent);font-weight:700;border-radius:999px}
.cta .lbl{flex:1;text-align:center;white-space:nowrap}
.cta .arr{width:36px;height:36px;border-radius:50%;background:var(--on-accent);color:var(--accent-fill);display:grid;place-items:center;flex:none}
.cta .arr svg.i{width:20px;height:20px}
.cta:hover{filter:brightness(1.08)}

/* ---- 目的別のおすすめ（列間の細罫） ---- */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 -16px}
.pick{padding:0 16px;border-left:1px solid var(--line);display:flex;flex-direction:column}
.pick:first-child{border-left:0}
.pick .photo,.pick .shot{aspect-ratio:16/10}
.pick-lab{font-size:14px;line-height:22px;font-weight:700;margin-top:12px;color:var(--accent)}
.pick .tname{margin-top:2px}
.pick .it-meta{align-self:stretch}
.pick .one{margin-bottom:16px}
.pick .cta{margin-top:auto}
@media (max-width:899px){
  .picks{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:0 16px 8px}
  .pick{flex:0 0 272px;scroll-snap-align:start}
  .pick:first-child{padding-left:0}
}

/* ---- 表 ---- */
.tbl-wrap,.cmp-w{overflow-x:auto;margin:0 -16px;padding:0 16px}
table{border-collapse:collapse;width:100%;font-size:14px;line-height:22px}
th,td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:middle}
thead th{font-weight:700;white-space:nowrap}
.tn{display:flex;align-items:center;gap:10px;min-width:150px}
table.price{font-size:17px;line-height:28px;min-width:480px}
table.price th[scope=row]{font-weight:700;white-space:nowrap}
.cmp-w{margin-top:8px}
table.cmp{min-width:760px}
table.cmp--rank{min-width:820px}
.cmp th,.cmp td{padding:12px 12px 12px 0;vertical-align:top}
.cmp tbody th{font-weight:700}
.cmp thead th{color:var(--sub);border-bottom:1px solid var(--rule)}
.cmp .n{font-size:20px;line-height:30px;font-weight:700;font-variant-numeric:tabular-nums;width:40px}
.cmp .nm{font-size:17px;line-height:26px;font-weight:700;min-width:160px}
.cmp .nm img{width:56px;margin-bottom:6px;display:block}
.cmp--rank td:nth-child(3){white-space:nowrap}
.cmp td.d{white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---- 選び方 ---- */
.guide{display:grid;grid-template-columns:repeat(3,1fr);margin:0 -16px}
.guide>li{padding:0 16px;border-left:1px solid var(--line)}
.guide>li:first-child{border-left:0}
.guide h3{font-size:20px;line-height:30px;font-weight:700;margin-bottom:8px}
.guide .fig{margin-top:12px;font-size:14px;line-height:22px;font-weight:700;color:var(--sub);padding-top:8px;border-top:1px solid var(--line)}
.guide--v{display:grid;grid-template-columns:1fr;gap:24px;margin:20px 0 0}
.guide--v>li{display:grid;grid-template-columns:40px minmax(0,1fr);padding:0 0 24px;border-left:0;border-bottom:1px solid var(--line)}
.guide--v h3{margin-bottom:var(--s-tight)}
.guide--v>li:last-child{padding-bottom:0;border-bottom:0}
@media (max-width:899px){
  .guide{grid-template-columns:1fr;gap:24px;margin:0}
  .guide>li{padding:0 0 24px;border-left:0;border-bottom:1px solid var(--line)}
  .guide>li:last-child{border-bottom:0;padding-bottom:0}
}

/* ---- FAQ ---- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:baseline;gap:12px;padding:16px 0;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .q{font-size:20px;font-weight:700;line-height:1;flex:none;color:var(--sub)}
.faq .qt{flex:1}
.faq summary svg{flex:none;width:20px;height:20px;align-self:center}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 0 16px 32px}

/* ---- 窓口 ---- */
.madoguchi{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin:56px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.btn-sub{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 20px;border:1px solid var(--line);border-radius:3px;color:var(--ink);font-size:14px;line-height:22px;font-weight:700;text-align:center}
.btn-sub:hover{color:var(--accent);border-color:currentColor}
@media (max-width:759px){.madoguchi{flex-direction:column}}

/* ---- ツール詳細 ---- */
.dgrid{display:grid;grid-template-columns:minmax(0,760fr) minmax(300px,400fr);column-gap:40px;align-items:start;margin-top:16px}
.shot.l{width:100%}
.dhead h1{font-size:32px;line-height:44px;font-weight:700;font-feature-settings:"palt"}
.dhead .tone{font-size:20px;line-height:30px;font-weight:700;margin-top:8px}
.dhead .ddesc{margin-top:8px;font-size:17px;line-height:28px}
.dhead .ddesc .s{text-wrap:pretty}
.dhead .cta{width:320px}
@media (max-width:899px){.dgrid{grid-template-columns:1fr;gap:20px;margin-top:8px}.dhead h1{font-size:24px;line-height:34px}.dhead .cta{width:100%}}
/* 本文1列＋右に基本情報（記事と同じ〈読む列＋300の右列〉） */
.tb{display:grid;grid-template-columns:minmax(0,760fr) minmax(300px,400fr);column-gap:40px;align-items:start}
.tside{position:sticky;top:80px;padding-top:var(--s-sec)}
.tside .cta{margin-top:var(--s-block)}
/* 番号と文は横一行（design_rule §1） */
.can li{display:grid;grid-template-columns:32px minmax(0,1fr);padding:var(--s-in) 0;border-bottom:1px solid var(--line)}
.can li:first-child{padding-top:0}
.can .n{font-size:17px;line-height:28px;font-weight:700;color:var(--sub)}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-block)}
.two h3{font-size:17px;line-height:28px;font-weight:700;margin-bottom:var(--s-tight)}
.lines li{padding:var(--s-tight) 0 var(--s-tight) 16px;position:relative}
.lines li::before{content:"";position:absolute;left:0;top:16px;width:4px;height:4px;border-radius:50%;background:var(--sub)}
.info div{display:grid;grid-template-columns:5em 1fr;gap:12px;padding:var(--s-in) 0;border-bottom:1px solid var(--line)}
.info dt{font-size:14px;line-height:22px;font-weight:700;color:var(--sub)}
.info dd{font-size:14px;line-height:22px}
.mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.mini--a{grid-template-columns:repeat(3,minmax(0,1fr))}
.mini li{min-width:0}
.mini>li>a{display:block}
.mini .thumb img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.mini .tname{font-size:17px;line-height:26px;margin-top:10px}
.mini .it-meta{margin-top:4px}
.mini-d{font-size:14px;line-height:22px;color:var(--sub);margin-top:2px}
.mini .photo{aspect-ratio:16/10}
@media (max-width:899px){
  .tb{display:block}
  .tside{position:static}
  .mini,.mini--a{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
}

/* ---- トップの器 ---- */
.tp-panel{scroll-margin-top:0}
.tp .madoguchi{margin-top:var(--s-sec)}

/* ---- 記事 ---- */
.layout,.alayout{display:block}
.alayout{display:grid;grid-template-columns:minmax(0,760px) 280px;gap:48px;justify-content:space-between}
.art-h1{font-size:32px;line-height:44px;font-weight:700;margin-top:8px;font-feature-settings:"palt"}
.byline{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;line-height:22px;color:var(--sub);margin:8px 0 16px}
.eye{border-radius:2px;overflow:hidden;background:var(--sunk)}
.eye-photo{width:100%;height:auto;aspect-ratio:840/300;object-fit:cover;border-radius:0}
.anote{font-size:14px;line-height:22px;color:var(--sub);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:16px 0 20px}
.art-main > p{margin-top:16px;line-height:30px}
.art-main > p.anote{margin-top:16px;line-height:22px}
.matome{margin-top:24px;background:var(--sunk);border-radius:2px;padding:16px 20px}
.matome h2{font-size:20px;line-height:30px;font-weight:700;margin-bottom:4px}
.matome li{padding:6px 0;border-bottom:1px solid var(--line)}
.matome li:last-child{border-bottom:0}
.toc{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:none}
.toc summary{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-weight:700;cursor:pointer;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc[open] summary svg{transform:rotate(180deg)}
.toc ol,.side-toc ol{counter-reset:t}
.toc li,.side-toc li{counter-increment:t;display:grid;grid-template-columns:2em 1fr;padding:8px 0;border-top:1px solid var(--line);line-height:26px}
.toc li::before,.side-toc li::before{content:counter(t);font-weight:700;color:var(--sub)}
.toc a:hover,.side-toc a:hover{color:var(--accent)}
.side-toc{position:sticky;top:80px;padding-top:4px;margin-top:8px}
.side-toc b{display:block;font-size:20px;line-height:30px;font-weight:700;margin-bottom:8px}
.ah{margin-top:32px;scroll-margin-top:16px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trio li{text-align:center;font-size:24px;line-height:32px;font-weight:700;padding:16px 4px;border-left:1px solid var(--line)}
.trio li:first-child{border-left:0}
.end-cta{margin:40px 0 0;text-align:center}
@media (max-width:899px){
  .alayout{grid-template-columns:minmax(0,1fr);gap:0}
  .alayout>aside{display:none}
  .toc{display:block}
  .art-h1{font-size:24px;line-height:34px}
  .eye-photo{aspect-ratio:2/1}
}
@media (min-width:900px){.br-sp{display:none}}
/* 記事の中の紹介カード（.it--card。一覧の行と同じ大きさの絵と文） */
.it--card{display:grid;grid-template-columns:168px minmax(0,1fr);column-gap:24px;grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"pic name" "pic desc" "pic plans" "pic meta" "pic cta";padding:var(--s-block) 0;border-bottom:1px solid var(--line)}
.it--card .it-name{grid-area:name;font-size:20px;line-height:30px;font-weight:700;font-feature-settings:"palt"}
.it--card .it-name a:hover{color:var(--accent)}
.it--card .it-body{grid-area:desc;min-width:0}
.it--card .it-desc{margin-top:4px;font-size:17px;line-height:28px}
.it--card .pl{grid-area:plans;margin-top:var(--s-in)}
.it--card .it-meta{grid-area:meta;align-self:end}
.it-cta{grid-area:cta}
.it-cta .cta{max-width:320px}
@media (max-width:759px){
  .it--card{grid-template-columns:96px minmax(0,1fr);column-gap:12px;grid-template-rows:none;grid-template-areas:"pic name" "desc desc" "plans plans" "meta meta" "cta cta"}
  .it--card .it-name{align-self:center}
  .it--card .it-desc{margin-top:8px}
}

/* ---- カテゴリ詳細の一覧の下 ---- */
.cp{padding-bottom:0}
.cp-after{margin-top:8px}
.cp-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:56px}
.cp-side h2{font-size:20px;line-height:30px;font-weight:700;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line);position:relative}
.cp-side h2::after{content:"";position:absolute;left:0;bottom:-1px;width:32px;height:3px;background:var(--accent)}
.cp-side #kimekata+h2{margin-top:32px}
.cp-side ol{font-size:14px;line-height:22px;color:var(--sub)}
.cp-side ol li{padding:8px 0;border-bottom:1px solid var(--line)}
.cp-side ol b{display:block;font-size:17px;line-height:26px;color:var(--ink)}
#kimekata{scroll-margin-top:80px}
.rel li{padding:10px 0;border-bottom:1px solid var(--line);line-height:26px}
.rel a:hover{color:var(--accent)}
.oth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.oth-i{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center;height:44px;border-bottom:1px solid var(--line);font-size:17px}
.oth-i:hover{color:var(--accent)}
.oth-i span{font-size:14px;color:var(--sub);font-variant-numeric:tabular-nums}
.oth-i svg.i{width:20px;height:20px;color:var(--sub)}
@media (max-width:759px){.oth-i{grid-template-columns:20px minmax(0,1fr)}.oth-i span{display:none}}
.empty{padding:32px 0;font-size:17px}
.empty button{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:759px){.cp-side{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:40px}}

/* ---- 画像の拡大（PC の hover / focus）：画面に1枚だけ置いて動かす ---- */
#zoom{position:fixed;z-index:30;left:0;top:0;width:720px;max-width:calc(100vw - 32px);aspect-ratio:16/10;border:1px solid var(--line);border-radius:2px;background:var(--bg);box-shadow:0 16px 48px rgba(0,0,0,.32);overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s}
#zoom.on{opacity:1;visibility:visible}
#zoom img{width:100%;height:100%;object-fit:cover;object-position:top left}
@media (prefers-reduced-motion:reduce){#zoom{transition:none}}
@media (hover:hover) and (min-width:960px){[data-zoom]{cursor:zoom-in}}

/* ---- フッター ---- */
.ft{margin-top:64px;border-top:1px solid var(--line);font-size:14px;line-height:22px;color:var(--sub)}
.ft-in{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:24px var(--gut) 40px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.ft-logo{font-weight:700;font-size:17px;color:var(--ink)}
.ft a:hover{color:var(--accent)}

@media (max-width:759px){.wrap{padding:0 16px}.vb-in{padding:8px 16px}.ft-in{padding:24px 16px 40px}}
@media (max-width:359.98px){.nw-ib,.lead .nw-ib{display:inline}.pl-t .nw,.cm-art .nw,.rd-desc .nw{white-space:normal}.cmp-w,.tbl-wrap{margin:0 -16px}}

/* ---- ここから本番（Worker）だけの部品 ---- */
/* 絵が無い行（絵が撮れていないツール）：絵の列ごと詰めて、名前と説明を左端から始める */
.ti--np{grid-template-columns:minmax(0,1fr) 408px;grid-template-areas:"head spec" "desc spec" "foot spec"}
.ti--np.ti--r{grid-template-columns:40px minmax(0,1fr) 408px;grid-template-areas:"no head spec" "no desc spec" "no foot spec"}
@media (max-width:1079px){.ti--np{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "desc" "foot" "spec"}.ti--np.ti--r{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"no head" "no desc" "no foot" "no spec"}}
@media (max-width:759px){.ti--np{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "tags" "desc" "spec" "foot"}.ti--np.ti--r{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"no head" "no tags" "desc desc" "spec spec" "foot foot"}}
/* ページ送り：数字の行。今のページは本文色の地で示す（赤は使わない） */
.pg{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:var(--s-block) 0 0;border-top:1px solid var(--line);font-size:14px;line-height:22px;font-variant-numeric:tabular-nums}
.pg a,.pg .cur,.pg .gap{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 8px;color:var(--ink)}
.pg a{border-radius:2px;font-weight:700}
.pg a:hover{color:var(--accent)}
.pg .cur{border-radius:2px;background:var(--ink);color:var(--bg);font-weight:700}
.pg .gap{color:var(--sub);min-width:24px;padding:0}
.pg .pgp{margin-right:8px}.pg .pgn{margin-left:8px}
/* カテゴリの行：例が2行になっても左右の列で下罫を揃える */
.cg--w li{display:flex}
.cg--w li>a{flex:1;min-width:0}
/* 料金の注記の欄は幅が狭いので、金額のまとまりも枠の中で折る（はみ出さない） */
.pl-t .nw{white-space:normal}

/* ---- 比較記事：比較表（1列目を固定して横スクロール）・短い条件の表・地の文の箇条書き・絵なしカード ---- */
.tbl-fix{position:relative;margin-top:16px;--c1:140px}
.tbl-fix .tbl-wrap{padding:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tbl-fix .tbl-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tbl-fix::after{content:"";position:absolute;top:0;right:-16px;bottom:12px;width:32px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none}
.tbl-fix.is-end::after{display:none}
table.cmp--fix{table-layout:fixed;width:var(--w);min-width:0;border-collapse:separate;border-spacing:0}
.cmp--fix th:first-child{position:sticky;left:0;z-index:1;background:var(--bg);padding-left:16px}
.cmp--fix thead th:first-child{z-index:2}
.cmp--fix tbody th{overflow-wrap:anywhere}
.cmp--fix td:last-child,.cmp--fix thead th:last-child{padding-right:16px}
.cmp--fix td{font-variant-numeric:tabular-nums}
.cmp--fix td.na{color:var(--sub)}
.tbl-fix.is-scrolled .cmp--fix th:first-child{box-shadow:1px 0 0 var(--line),7px 0 9px -7px rgba(0,0,0,.28)}
table.cmp--cond{min-width:0;margin-top:16px}
.cmp--cond th:first-child{width:112px;white-space:nowrap}
.art-main > p.tnote{margin-top:12px;font-size:14px;line-height:22px;color:var(--sub)}
.art-main > p.tnote a{text-decoration:underline;text-underline-offset:2px}
.art-ul{margin-top:16px;padding-left:1.25em;list-style:disc;line-height:30px}
.it--card.it--np{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "desc" "plans" "meta" "cta"}
@media (max-width:759px){.tbl-fix{--c1:140px}}

/* ---- ツール詳細（/tools/<slug>）：頭と下の段の列の線は 760fr／400fr・間 40 ---- */
.dgrid--np{grid-template-columns:minmax(0,760fr) minmax(300px,400fr)}
.dgrid--np .dhead{grid-column:1}
.dhead .ddesc .s{display:inline}
.dhead .it-meta{margin-top:12px}
.dhead .rd-tags{margin-top:0}
.tdp .sh,.tm-b .sh{margin-bottom:var(--s-head)}
.tprice .pl--all{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.tside .tprice{padding-top:0}
.dhead .tprice{padding-top:32px}
.dhead .tprice .pl--all{gap:16px 20px}
.tmain .lines li,.can li>span:last-child{max-width:40em}
.tmain .lines li{line-height:30px;padding-top:6px;padding-bottom:6px}
.tmain .lines li::before{top:19px}
.can li>span:last-child{line-height:30px}
.tend{margin-top:var(--s-sec)}
.tend .cta{max-width:320px;margin-top:0}
.tdp+.madoguchi{margin-top:var(--s-sec)}
.tb--solo .tmain{grid-column:1}
.pl.pl--all .pl-c:nth-child(n+3){display:block;grid-column:auto;border-top:0;margin-top:0}
@media (max-width:899px){
  .dgrid--np{grid-template-columns:minmax(0,1fr)}
  .tb{display:flex;flex-direction:column;align-items:stretch}
  .tside{order:-1;padding-top:var(--s-sec)}
  .tend .cta{max-width:100%}
}
@media (max-width:759px){.pl.pl--all{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}

/* ---- 詳細ページのモーダル（記事内のツール名・一覧の 詳しく見る／名前／絵） ---- */
html.tm-on{overflow:hidden}
dialog.tm{position:fixed;margin:auto;padding:0;border:0;width:min(880px,calc(100vw - 48px));max-width:none;height:min(86vh,860px);max-height:none;background:var(--bg);color:var(--ink);border-radius:2px;overflow:hidden}
dialog.tm::backdrop{background:rgba(0,0,0,.55)}
.tm-box{display:flex;flex-direction:column;height:100%}
.tm-bar{flex:none;display:flex;align-items:center;height:48px;border-bottom:1px solid var(--line)}
.tm-bk{display:inline-flex;align-items:center;gap:2px;height:48px;padding:0 12px 0 8px;font-size:14px;font-weight:700;color:var(--ink)}
.tm-bk[hidden]{display:none}
.tm-bk svg{transform:rotate(180deg)}
.tm-open{display:inline-flex;align-items:center;gap:3px;margin-left:auto;padding:0 12px;font-size:14px;line-height:48px;color:var(--ink)}
.tm-open svg{width:14px;height:14px;opacity:.6}
.tm-bk:hover,.tm-open:hover{color:var(--accent)}
.tm-x{width:48px;height:48px;display:grid;place-items:center;color:var(--ink)}
.tm-x:hover{color:var(--accent)}
.tm-x:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tm-sc{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.tm-sc:focus{outline:none}
.tm-b{padding:0 24px 32px}
.tm-b .dgrid{grid-template-columns:minmax(0,5fr) minmax(0,5fr);column-gap:24px;margin-top:24px}
.tm-b .dgrid--np{grid-template-columns:minmax(0,1fr)}
.tm-b .dhead h1{font-size:24px;line-height:34px}
.tm-b .dhead .cta{width:100%}
.tm-b .tb{display:flex;flex-direction:column;align-items:stretch}
.tm-b .tside{position:static;order:-1;padding-top:0}
.tm-b .tend .cta{max-width:100%}
.tm-b .t-arts{display:none}
.tm-b .mini{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.tm-foot{margin-top:var(--s-block);text-align:right}
@media (max-width:759px){
  dialog.tm{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:100%;height:92vh;height:92dvh;border-radius:0}
  .tm-b{padding:0 16px 24px}
  .tm-b .dgrid{grid-template-columns:minmax(0,1fr);row-gap:12px;margin-top:12px}
}

/* 横スクロール案内は表内に重ね、操作を妨げない。 */
.scroll-table{position:relative}
.scr-hint{position:absolute;z-index:4;top:56px;right:8px;display:flex;align-items:center;gap:4px;padding:8px 10px;max-width:180px;border:1px solid #ffffff30;border-radius:4px;background:rgba(35,35,35,.92);color:#fff;font-size:13px;line-height:1.5;pointer-events:none;box-shadow:0 1px 6px #0002}
.scr-hint svg.i{width:16px;height:16px}
.scr-hint[hidden]{display:none}

/* ---- 記事内のツール名（本文では下線で見分ける） ---- */
.tlk{text-decoration:underline;text-decoration-color:var(--sub);text-decoration-thickness:1px;text-underline-offset:3px}
.tlk:hover{color:var(--accent);text-decoration-color:currentColor}

/* ---- 記事の読みやすさ：本文 17px／行間 32（約1.9）、1行は全角 39 字まで ---- */
.art-main > p,.art-lede,.art-ul,.matome ul,.faq details p,.guide--v p{max-width:50em}
.art-main > p{margin-top:20px;font-size:17px;line-height:32px}
.art-main > p.anote{margin-top:16px;line-height:22px;max-width:none}
.art-main > p.tnote{max-width:none}
.art-main > .art-lede{margin-top:20px}
.art-main .art-lede .s{display:inline}
.ah + p{margin-top:0 !important}
.ah{margin-top:32px;margin-bottom:12px}
.tdp .sec,.tm-b .sec{padding-top:32px}
.art-ul{margin-top:12px;line-height:32px}
.art-ul li{padding:4px 0}
.matome{margin-top:32px;padding:20px 24px}
.matome li{line-height:30px;padding:8px 0}
.guide--v{gap:0;margin:12px 0 0}
.guide--v>li{grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.guide--v>li:first-child{padding-top:0}
.guide--v>li:last-child{padding-bottom:0;border-bottom:0}
.guide .q,.faq .q{font-size:20px;line-height:28px;font-weight:700;color:var(--sub);flex:none}
.guide--v .q{grid-row:1/30}
.guide--v>li>*:not(.q){grid-column:2}
.guide--v h3{font-size:17px;line-height:28px;margin-bottom:4px}
.guide--v>li>p{font-size:17px;line-height:32px;margin-top:8px}
.guide--v>li>h3+p{margin-top:0}
.faq details p{padding:0 0 12px 32px;font-size:17px;line-height:32px}
.faq details p:last-child{padding-bottom:20px}
.it--card{padding:28px 0}
.it--card .it-desc .s{display:inline}
.it--card .it-desc{line-height:32px}
@media (prefers-reduced-motion:no-preference){html:has(.art-main){scroll-behavior:smooth}}
@media (max-width:759px){.art-ul{padding-left:1.1em}.matome{padding:16px}}
@media (max-width:759px){.mini .tname{font-size:14px;line-height:22px}}

/* 記事の PC：本文を広く、目次を小さく */
@media (min-width:1100px){.alayout{grid-template-columns:minmax(0,1fr) 232px;column-gap:40px}}
.side-toc b{font-size:14px;line-height:22px}
.side-toc li{font-size:14px;line-height:20px;padding:6px 0;grid-template-columns:1.6em 1fr}
.cmp-th{display:block;width:96px;height:60px;object-fit:cover;object-position:top;border-radius:2px;box-shadow:0 0 0 1px var(--line);margin-bottom:6px}
.it-list{margin-top:8px;padding:0;list-style:none;max-width:39em}
.it-list li{position:relative;padding:3px 0 3px 14px;font-size:14px;line-height:24px}
.it-list li::before{content:"";position:absolute;left:0;top:13px;width:4px;height:4px;border-radius:50%;background:var(--sub)}
.it-list a{text-decoration:underline;text-underline-offset:2px}
.art-ul a,.guide--v a,.faq details a,.art-main>p a{text-decoration:underline;text-underline-offset:3px}
.guide--v .art-ul{margin-top:4px}
.faq details .art-ul{margin:-4px 0 0;padding:0 0 16px calc(32px + 1.25em)}
.guide--v>li>p+.art-ul{margin-top:0}
.rd-str{display:block;margin-top:2px;color:var(--ink)}
.rd-str b{font-weight:700}
.cat-go[hidden]{display:none}
.rd-pic--none{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;width:100%}
.rd-pic--none span{font-size:12px;line-height:18px;color:var(--sub);letter-spacing:.04em}
.cmp-th--none{display:flex;align-items:center;justify-content:center;background:var(--sunk);font-size:11px;font-weight:400;color:var(--sub)}

/* ---- 総合ランキング ---- */
.rd-pt{display:block;margin-top:2px;font-size:12px;line-height:16px;font-weight:400;color:var(--sub);white-space:nowrap}
.rk-rv{display:flex;flex-wrap:wrap;column-gap:8px;margin-top:2px;font-size:14px;line-height:20px;color:var(--sub);font-variant-numeric:tabular-nums}
.rk-note{margin-top:8px;font-size:14px;line-height:22px;color:var(--sub)}
.rk-how{margin-top:var(--s-tight);font-size:14px;line-height:22px;color:var(--sub)}
.rk-how b{font-weight:700;margin-right:8px;color:var(--ink)}
.tp-panel .rk-how{margin:var(--s-tight) 0 0}
/* /ranking のカテゴリ行：行全体が /c/ へのリンク（.rkc-a の ::after）、1〜3位の名前だけ詳細へ */
.rkc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.rkc>li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:16px;align-items:start;min-height:88px;padding:var(--s-row) 0;border-bottom:1px solid var(--line)}
.rkc>li>svg.i{width:28px;height:28px;margin-top:0;color:var(--sub)}
.rkc-a{font-size:20px;line-height:28px;font-weight:700}
.rkc-a::after{content:"";position:absolute;inset:0}
.rkc>li:hover .rkc-a{color:var(--accent)}
.rkc-top{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:2px;font-size:14px;line-height:26px}
.rkc-top li{position:relative;z-index:1;display:flex;gap:4px;min-width:0}
.rkc-top b{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.rkc-top a{overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.rkc-top a:hover{color:var(--accent);text-decoration-color:currentColor}
.rkc .n{display:inline-flex;align-items:center;gap:4px;font-size:14px;line-height:28px;color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
.rkc .n svg{width:16px;height:16px}
@media (max-width:759px){
  .rkc{grid-template-columns:minmax(0,1fr)}
  .rkc>li{grid-template-columns:24px minmax(0,1fr) auto;column-gap:10px;min-height:64px}
  .rkc>li>svg.i{width:24px;height:24px}
  .rkc-a{font-size:17px;line-height:24px}
  .rkc-top{line-height:32px}
}
@media (max-width:479px){.r-sec--cat .sh .sum{display:none}}

/* ---- カテゴリの総合ランキング：TOP5 の比較表 → TOP10 → 関連記事 → すべて見る ---- */
.rk-sec{margin-top:var(--s-sec)}
.rk-sec .tl{margin-top:0}
.rk-sec .tbl-fix{margin-top:0}
.rk-sec .sh{margin-bottom:var(--s-in)}
.cp .rk-sec .cmp--fix tbody th a{font-size:17px;line-height:24px;font-weight:700}
.cmp--fix td.rk-top{color:var(--accent);font-weight:700}
.cmp-sub{display:block;font-size:14px;line-height:22px;color:var(--sub)}
.cp .end-cta{margin-top:var(--s-sec)}
.ti-str{display:flex;align-items:flex-start;gap:12px;margin-top:var(--s-tight)}
.ti-str>:first-child:not(.dt){flex:1;min-width:0;margin-top:0}
.ti-str .dt:first-child{margin-left:auto}
.ti .rd-tags,.ti-end{margin-top:var(--s-tight)}
.rev-scores{display:flex;flex-wrap:wrap;gap:8px 28px;margin-bottom:12px}
.rev-scores li{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:22px;color:var(--sub)}
.rev-scores a{text-decoration:underline;text-underline-offset:2px}
.rev-n{font-size:20px;line-height:28px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rev-sum{font-size:17px;line-height:30px;max-width:50em}
.rev-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:12px}
.rev-col h3{font-size:14px;line-height:22px;font-weight:700;margin-bottom:4px}
.rev-col ul{list-style:disc;padding-left:1.2em;font-size:14px;line-height:24px}
.rev-note{margin-top:12px;font-size:12px;line-height:18px;color:var(--sub)}
.rev-note a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:759px){.rev-cols{grid-template-columns:minmax(0,1fr);gap:12px}}
.rk-link{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.rk-link:hover{color:var(--accent)}
#rev{scroll-margin-top:80px}
.cat-go{display:flex;align-items:center;gap:14px;margin:12px 0 4px;padding:12px 16px;border:1px solid var(--accent);border-left-width:4px;border-radius:4px;background:var(--sunk);color:var(--ink)}
.cat-go[hidden]{display:none}
.cat-go:hover{background:var(--bg)}
.cat-go .cg-ic{flex:none;width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cat-go .cg-t{display:flex;flex-direction:column;min-width:0;flex:1}
.cat-go b{font-size:17px;line-height:24px;font-weight:700}
.cat-go small{font-size:12px;line-height:18px;color:var(--sub)}
.cat-go .cg-ar{flex:none;width:22px;height:22px;color:var(--accent)}
@media (max-width:759px){.fwrap{width:100%}.fch-lab{padding:0 16px}}
.rk-how{margin-top:16px;font-size:12px;line-height:18px;color:var(--sub)}
.tp-panel .rk-how{margin:16px 0 0}

/* 記事のレビューは詳細ページの大きな節を持ち込まず、紹介本文に続ける。 */
.article-review{margin-top:16px;min-width:0}
.article-review h4{font-size:17px;line-height:28px;font-weight:700;margin:0 0 8px}
.article-review p{font-size:17px;line-height:28px;margin:8px 0 0}
.article-review p.article-review-note{font-size:14px;line-height:22px;color:var(--sub)}
.art-main > .art-lede + .art-lede{margin-top:8px}
.art-main > p.article-author{margin-top:24px;font-size:14px;line-height:24px;color:var(--sub)}
.art-main .end-cta .btn-sub{max-width:100%;white-space:normal}
.article-review-sources{margin-top:8px;font-size:14px;line-height:22px;color:var(--sub)}
.article-review-sources summary{cursor:pointer}
.article-review-sources ul{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none;padding:8px 0 0}
.article-review-sources a{text-decoration:underline;text-underline-offset:2px}
.quality-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:20px}
.quality-panel{border-top:1px solid var(--line);padding-top:16px;min-width:0}
.quality-panel .quality-axis{font-size:14px;line-height:22px;font-weight:700;color:var(--sub)}
.quality-panel h3{font-size:20px;line-height:28px;margin:8px 0}
.quality-panel .quality-take{font-size:17px;line-height:28px;margin-top:8px}
.quality-panel dl{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:16px;font-size:17px;line-height:28px}
.quality-panel dl>div{display:flex;gap:8px;min-width:0}
.quality-panel dt{color:var(--sub)}
.quality-panel dd{margin:0}
.quality-panel .quality-model{flex-basis:100%;font-size:14px;line-height:22px}
.quality-panel .quality-model dt{flex-shrink:0}
.quality-panel .quality-note{font-size:14px;line-height:22px;color:var(--sub);margin-top:8px}
.quality-details{font-size:14px;line-height:22px;color:var(--sub);margin-top:12px}
.quality-details summary{cursor:pointer}
.quality-details p{margin-top:8px}
@media(max-width:759px){.quality-panels{grid-template-columns:minmax(0,1fr);gap:24px}}
.reputation-list>li+li{margin-top:16px}
.reputation-source{margin-top:8px;font-size:14px;line-height:22px;color:var(--sub)}
.reputation-source summary{cursor:pointer}
.reputation-source p{margin-top:8px}
.reputation-list .rev-note{font-size:14px;line-height:22px}
/* 評判の3列小表は、横スクロールする料金比較表の最小幅を継承しない。 */
.reputation-list .cmp{min-width:0;width:100%;table-layout:fixed;margin-top:8px}
.reputation-list .cmp th:first-child{width:46%}
.reputation-list .cmp th,.reputation-list .cmp td{padding:8px 8px 8px 0;font-size:14px;line-height:22px}

/* 読者が比べる本文と、条件を確かめる補足を分ける。 */
.art-main > p.tnote,.art-main > p.anote,
.art-main .quality-note,.art-main .quality-model,
.art-main .quality-details,.art-main .reputation-source,
.art-main .article-review-sources,.art-main .article-review p.article-review-note,
.art-main .reputation-list .rev-note{font-size:13px;line-height:1.5}
.art-main > p.tnote{margin-top:8px}
.art-main > p.tnote + p.tnote,
.art-main .quality-details p,.art-main .reputation-source p,
.art-main .article-review p.article-review-note{margin-top:4px}
.art-main .quality-details{margin-top:4px}

/* 順位・点数と比較する名前を、画像より先に上端へ揃える。 */
.cp .ph + .rk-sec{margin-top:24px}
@media(max-width:759px){.cp .ph + .rk-sec{margin-top:20px}}
.cmp-name{display:block}
.cmp-name + .cmp-th,.cmp-name + a .cmp-th{margin-top:6px;margin-bottom:0}
.cp .cmp--fix tbody td,.cp .cmp--fix tbody th{vertical-align:top;line-height:24px}

.art-main .decision-list{list-style:none;padding-left:0;margin-top:12px}
.art-main .decision-row{display:grid;grid-template-columns:28px minmax(11em,15em) 20px minmax(0,1fr);gap:12px;align-items:start;padding:14px 0;border-top:1px solid var(--line);margin:0;font-size:17px;line-height:28px}
.decision-row>*{min-width:0}
.decision-icon .i{width:24px;height:24px;vertical-align:middle}
.decision-arrow{color:var(--sub)}
.decision-arrow .i{width:20px;height:20px;vertical-align:middle}
.decision-option{display:block;font-weight:400}
.decision-option + .decision-option{margin-top:4px}
.decision-options a{font-weight:700}
.article-review-sources summary{font-size:13px;line-height:1.5}
@media(max-width:639px){.art-main .decision-row{grid-template-columns:24px minmax(0,1fr);gap:8px 12px}.decision-arrow{display:none}.decision-options{grid-column:2}.decision-condition{grid-column:2}}

.rank-values{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:4px}
.rank-score{font-size:14px;line-height:22px}
.rank-values .rk-rv{font-size:13px;line-height:20px;margin:0}
.cp .rk-sec .rk-how{font-size:13px;line-height:1.5;margin:4px 0 8px}

.art-main > .art-lede{font-size:17px;line-height:1.5}
.art-main > .art-lede + .art-lede{margin-top:4px}
.score-note-ref{text-decoration:none}
#kimekata{scroll-margin-top:90px}
.cp .rk-sec .rk-how{margin:8px 0 0}

.art-main > .lede-note{margin-top:4px}
.art-main > .end-cta{margin-top:20px;margin-bottom:24px}

.tool-score summary{font-size:14px;font-weight:700;line-height:22px;cursor:pointer}
.tool-score .rk-how{font-size:13px;line-height:1.5;font-weight:400;max-width:34em;margin-top:4px}