/* クリニックツールナビ — site.css
   明るい灰青の地に白いパネル。パネルの頭は「色つきアイコン＋太い見出し＋灰色の補足＋右のリンク」で、
   どこに何があるかを一目で分ける。色の役割は固定する:
     青緑（--accent） = スコア・バッジ・検索・ロゴ（目を止める所） / 紺 = 相談の導線と帯 / 青 = リンク・ツール名 / 赤 = 日付・NEW
   文字は 本文15px・パネル見出し18px/800・ツール名16px/700・補足12〜13px灰 の4段で、見出しと中身を取り違えない。 */
:root {
  --bg: #f2f5f8;
  --card: #ffffff;
  --line: #d9e1ea;
  --line-2: #e8edf2;
  --ink: #1f2328;
  --ink-2: #4f5661;
  /* 文字色は背景 #edf1f5〜#fff でコントラスト比4.5以上（#646a74: 地 #f2f5f8 で 4.98・#edf1f5 で 4.8） */
  --ink-3: #646a74;
  /* --accent はアイコン・枠線・線・バー用（文字でない部品の基準3.0。白地で 4.13）。
     白文字を載せる塗りは --accent-strong（白文字 6.32）、青緑の文字は --accent-2（白地 7.38） */
  --accent: #0e8a94;
  --accent-2: #0a5f67;
  --accent-strong: #0b6a73;
  --accent-soft: #e3f4f5;
  --navy: #1c3354;
  --navy-2: #13253f;
  --blue: #1a5fd0;
  --blue-soft: #e9f0fc;
  --red: #c9302a;
  --green: #1a7a43;
  --green-soft: #e5f4eb;
  --purple: #7b3fc4;
  --purple-soft: #f2eafc;
  --warn: #8a5a00;
  --warn-soft: #fff5d6;
  --tint: #f7f9fb;
  --star: #f4a100;
  --star-off: #dde3ea;
  --star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.98 6.04 6.67.97-4.83 4.7 1.14 6.64L12 17.42l-5.96 3.13 1.14-6.64-4.83-4.7 6.67-.97z'/%3E%3C/svg%3E");
  --radius: 6px;
  /* 本体の幅。狭いと中身が縦に積み上がる */
  --wrap: 1400px;
  /* 記事ページは読む行の長さを優先して一段狭く（本文1行 約48字） */
  --wrap-read: 1160px;
  --font: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.7; font-size: 15px;
  /* Mac の既定の描画は太字の画を太らせて、和文の太字が潰れて見える */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* b・strong の既定は「親より一段太く」なので、太字の中の b が 900 になる。太字は 700 で止める */
b, strong { font-weight: 700; }
/* 日本語の折り返し: 文節で折り、末尾の孤立行を避ける（対応ブラウザのみ。非対応でも崩れない） */
body { word-break: auto-phrase; text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, .ph-title, .bar-big, .duo strong, .row-name, .cc-name, .cat-main strong, .sr-main a, .bg-l { text-wrap: balance; }
/* ツール名は1語の長いカタカナが多い。文節単位だと折れる所が無く1〜2字だけ次行に落ちるので、字単位で折れるようにして釣り合わせる */
.row-name, .th-name h1, .sr-main a, .cmp td.name a { word-break: normal; }
/* 長い社名・URLなど文節で折れない語だけ、はみ出す代わりに折る */
.row-main, .home-main, .home-side, .th-name, .sr-main, .cat-main, .cc, .spec td, .prose td, .prose th, .post-body td, .own-card { min-width: 0; overflow-wrap: anywhere; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
/* 文中のリンクは色だけでなく下線でも見分けられるように（色覚の違い・Lighthouse link-in-text-block）。
   カードや一覧のように、リンクだけが並ぶ場所には付けない（class の付いた a は対象外） */
:is(.art-body, .prose, .checklist, .art-src) :is(p, li, dd, td, figcaption, span) > a:not([class]),
:is(.foot-note, .foot-operator, .ph-meta, .ph-sub, .embed-cap, p.tiny, p.small) > a:not([class]) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}
img { max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 16px; }
h1, h2, h3 { line-height: 1.4; margin: 0 0 .5em; }
h1 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.7rem); font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 1em; }
.small { font-size: .85rem; color: var(--ink-2); }
.tiny { font-size: .78rem; color: var(--ink-3); margin: 10px 0 0; }
.muted { color: var(--ink-3); }
/* 画面には出さず読み上げと見出しの順番のためだけに置く見出し（/blog のカードの h3 の前に h2 が要る） */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }
/* 製品名のカタカナ語: 途中で折らない。枠に収まらない時だけ折る */
.nm { word-break: keep-all; overflow-wrap: break-word; }
.ic { width: 18px; height: 18px; flex: none; }

/* ---------------------------------------------------------------- header */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 50; background: var(--card); padding: 6px 10px; border-radius: 6px; }
#nav { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.nav-top { display: flex; align-items: center; gap: 16px; min-height: 58px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.15rem; color: var(--ink); white-space: nowrap; letter-spacing: .02em; }
.logo:hover { text-decoration: none; }
.logo .mark, .foot-brand .mark { color: var(--accent); }
.nav-search { flex: 1; max-width: 440px; display: flex; }
.nav-search input { flex: 1; min-width: 0; font: inherit; font-size: .88rem; padding: 7px 12px; border: 1.5px solid var(--line); border-right: 0; border-radius: 6px 0 0 6px; background: var(--tint); }
.nav-search input:focus { outline: none; border-color: var(--accent); background: #fff; }
.nav-search button { border: 0; background: var(--accent-strong); color: #fff; padding: 0 12px; border-radius: 0 6px 6px 0; cursor: pointer; display: inline-flex; align-items: center; }
/* ロゴ横のサイトの一文（SHOW_NAV_SEARCH=False。2026-10-04 に介護ツールナビから移植） */
.nav-tag { margin: 0; padding-left: 16px; border-left: 1px solid var(--line); font-size: .86rem; font-weight: 500; color: var(--ink-2); line-height: 1.4; white-space: nowrap; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-sub { font-size: .85rem; font-weight: 700; color: var(--accent-2); padding: 6px 12px; border: 1.5px solid var(--accent); border-radius: 6px; white-space: nowrap; }
.nav-sub:hover { background: var(--accent-soft); text-decoration: none; }
.nav-cta { font-size: .85rem; font-weight: 700; background: var(--navy); color: #fff; padding: 7px 14px; border-radius: 6px; white-space: nowrap; }
.nav-cta:hover { background: var(--navy-2); text-decoration: none; }
.nav-row { border-top: 1px solid var(--line-2); }
.nav-row ul { list-style: none; display: flex; gap: 2px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; min-height: 44px; align-items: stretch; }
.nav-row ul::-webkit-scrollbar { display: none; }
.nav-row li { display: flex; }
.nav-row a { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; color: var(--ink); font-size: .86rem; font-weight: 700; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav-row a .ic { width: 16px; height: 16px; color: var(--accent); }
.nav-row a:hover { border-bottom-color: var(--accent); text-decoration: none; }
/* 一文はロゴ・ボタンと1行に収まる幅でだけ出す（折り返すと2段のヘッダーになる）。
   ロゴ「クリニックツールナビ」約218px＋一文30字 約430px＋ボタン2つ 約213px＋間と余白 約64px ＝ 約925px。
   介護ツールナビ（約795px・860px で消す）と同じくらいの余裕を見て 1000px 以下で消す */
@media (max-width: 1000px) { .nav-tag { display: none; } }
@media (max-width: 760px) {
  .nav-search, .nav-sub { display: none; }
  .nav-top { min-height: 52px; }
  .logo { font-size: 1.05rem; }
}

/* ticker（更新情報の箱） */
.tk-wrap { padding-top: 12px; }
.ticker { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 12px; font-size: .82rem; }
.tk-label { flex: none; background: var(--accent-strong); color: #fff; font-weight: 600; font-size: .75rem; padding: 2px 8px; border-radius: 4px; }
.tk-date { flex: none; color: var(--red); font-weight: 700; }
.ticker ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.ticker ul::-webkit-scrollbar { display: none; }
.ticker a { color: var(--blue); white-space: nowrap; }
.ticker b { color: var(--accent-2); font-size: .92rem; }
.new { display: inline-block; background: var(--red); color: #fff; font-size: .68rem; font-weight: 600; padding: 0 5px; border-radius: 3px; line-height: 1.6; vertical-align: 1px; }
.upd { display: inline-block; background: var(--blue-soft); color: var(--blue); font-size: .68rem; font-weight: 600; padding: 0 5px; border-radius: 3px; line-height: 1.6; vertical-align: 1px; }

/* ---------------------------------------------------------------- 部品 */
main.wrap { padding-block: 14px 40px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 16px; }
.ph { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.ph-title { font-size: 1.12rem; font-weight: 700; margin: 0; line-height: 1.35; }
.ph-meta { font-size: .8rem; color: var(--ink-3); }
.ph-link { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: .84rem; font-weight: 700; white-space: nowrap; }
.ph-link .ic { width: 14px; height: 14px; }
.pb { padding: 14px 16px; }
.pb > :last-child { margin-bottom: 0; }
.ico { flex: none; width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.ico .ic { width: 18px; height: 18px; }
.ico.lg { width: 52px; height: 52px; border-radius: 10px; }
.ico.lg .ic { width: 30px; height: 30px; }
.t-accent { background: var(--accent); }
.t-blue { background: var(--blue); }
.t-green { background: var(--green); }
.t-purple { background: var(--purple); }
.t-red { background: var(--red); }
.t-gray { background: #7a8391; }

/* ツールの目印（公式サイトのアイコン。無いツールは頭文字） */
.av { flex: none; width: 44px; height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; line-height: 1;
  background: hsl(var(--h) 60% 93%); color: hsl(var(--h) 55% 32%); border: 1px solid hsl(var(--h) 45% 84%); }
.av.sm { width: 24px; height: 24px; border-radius: 5px; font-size: .75rem; }
.av.lg { width: 68px; height: 68px; border-radius: 12px; font-size: 1.9rem; }
.av.logo { background: #fff; border: 1px solid var(--line); padding: 4px; overflow: hidden; }
.av.logo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.av.sm.logo { padding: 2px; }
.av.sm.logo img { border-radius: 3px; }
.av.lg.logo { padding: 7px; }
.av.lg.logo img { border-radius: 8px; }

/* 順位のメダル */
.rk { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: var(--ink-2); background: #edf1f5; }
.rk1 { background: #e2a820; color: #3d2c00; }
.rk2 { background: #9aa4b0; color: #fff; }
.rk3 { background: #c07a3d; color: #fff; }
.rk-none { background: transparent; }

/* ボタン */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius); font-weight: 700; font-size: .92rem; border: 1.5px solid var(--line); color: var(--ink); background: var(--card); }
.btn:hover { text-decoration: none; border-color: var(--ink-3); }
.btn.accent, .btn.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.btn.accent:hover, .btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.navy:hover { background: var(--navy-2); }
.btn.sm { padding: 6px 12px; font-size: .82rem; }

/* 小さな札 */
.chip { display: inline-block; font-size: .74rem; padding: 1px 8px; border-radius: 4px; background: var(--blue-soft); color: var(--blue); font-weight: 600; margin: 2px 4px 2px 0; line-height: 1.7; }
.chip.gray { background: #edf1f5; color: var(--ink-2); font-weight: 500; }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.own { background: var(--purple-soft); color: var(--purple); }
.chip.blue { background: var(--blue); color: #fff; }
.pill { display: inline-block; font-size: .74rem; padding: 0 7px; border-radius: 4px; margin: 2px 4px 2px 0; line-height: 1.75; font-weight: 600; white-space: nowrap; }
.pill.green { background: var(--green-soft); color: var(--green); }
.pill.gray { background: #edf1f5; color: var(--ink-3); }
.pill.accent { background: var(--accent-soft); color: var(--accent-2); }
.pill.blue { background: var(--blue-soft); color: var(--blue); }
.pill.line { border: 1px solid var(--line); color: var(--ink-2); font-weight: 500; }
.badge { display: inline-block; background: var(--accent-soft); color: var(--accent-2); font-size: .7rem; font-weight: 600; padding: 0 6px; border-radius: 3px; }

/* ランキングの行 */
.rows { list-style: none; padding: 0; margin: 0; }
.row { display: grid; grid-template-columns: 30px 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.row:first-child { padding-top: 2px; }
.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row .rk { margin-top: 8px; }
.row-name { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.45; }
.row-name .chip { margin-left: 6px; vertical-align: 2px; }
.row-sub { margin: 1px 0 4px; font-size: .8rem; color: var(--ink-3); }
.row-sub .dot { margin: 0 2px; }
.row-facts { margin: 0; }
/* 要約は PC では全文（折返しの調整 text-wrap: pretty を効かせるため -webkit-box にしない）。スマホだけ3行で切る */
.row-sum { margin: 6px 0 0; font-size: .86rem; color: var(--ink-2); line-height: 1.65; }
/* 数字の列は SHOW_STARS=False のときだけ出る */
.row:has(> .row-score) { grid-template-columns: 30px 44px minmax(0, 1fr) auto; }
.row-score { text-align: right; min-width: 56px; }
.row-score b { display: block; font-size: 1.45rem; font-weight: 700; color: var(--accent-strong); line-height: 1.15; }
.row-score span { display: block; font-size: .7rem; color: var(--ink-3); }
.row-score.prov b { color: #93a3b3; }

/* 編集部スコアの★。星の形で型抜きして、点数の割合まで塗る（0.5 なら半分の星） */
.stars { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: 1px; font-size: .88rem; line-height: 1; }
.stars b { font-size: 1em; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stars small { font-size: .74em; font-weight: 500; color: var(--ink-3); }
.st, .st1 { display: inline-block; flex: none; height: 1em; width: 5em;
  background: linear-gradient(90deg, var(--star) var(--p, 100%), var(--star-off) var(--p, 100%));
  -webkit-mask: var(--star-svg) 0 0 / 1em 1em repeat-x; mask: var(--star-svg) 0 0 / 1em 1em repeat-x; }
.st1 { width: 1em; }
.stars.prov .st, .stars.prov .st1 { --star: #b7c4d1; }
.stars.none { font-size: .74rem; color: var(--ink-3); }
.row-name { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; }

/* 編集部スコアの数字の札（SCORE_STYLE="num"）。数字だけを大きく、「/5」「暫定」は小さく添える */
.sc-tag { display: inline-flex; align-items: baseline; gap: 2px; flex: none; padding: 1px 8px 0; border: 1px solid #b8e0e3; border-radius: 6px;
  background: #eef8f9; color: var(--accent-2); white-space: nowrap; font-size: .84rem; line-height: 1.5; }
.sc-tag b { font-size: 1.2em; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sc-tag small { font-size: .8em; font-weight: 500; color: #3f6e73; }
.sc-tag.mini { padding: 0 6px; font-size: .8rem; }
.sc-tag.mini b { font-size: 1.1em; }
.sc-tag.prov { border-color: var(--line); background: #f2f5f8; color: var(--ink-3); }
.sc-tag.prov small { color: var(--ink-3); }
.sc-tag.none { border-color: var(--line); background: #f2f5f8; color: var(--ink-3); font-size: .74rem; }
.cc-top .sc-tag { margin-left: auto; }
.cmp td.sc .sc-tag { vertical-align: 1px; }
/* 名前が長くて★が次の行に落ちても、行頭がずれないように flex で並べる */
.cc-top .stars { margin-left: auto; font-size: .84rem; }
.side-rank .stars { flex: none; font-size: .84rem; }
.cmp td.sc .stars { font-size: .82rem; }
.th-stars { margin: 2px 0 4px; line-height: 1; }
.th-stars .st { font-size: 1.35rem; }
@media (max-width: 560px) {
  /* スマホは順位をアイコンの左上に重ねて、名前の幅を残す */
  .row { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .row:has(> .row-score) { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .row .rk, .row .av { grid-column: 1; grid-row: 1; }
  .row .av { width: 40px; height: 40px; margin: 6px 0 0 0; font-size: 1.05rem; }
  .row .av.logo { padding: 3px; }
  .row .rk { z-index: 1; justify-self: start; align-self: start; width: 20px; height: 20px; font-size: .7rem; margin: 0 0 0 -6px; box-shadow: 0 0 0 2px #fff; }
  .row .rk-none { box-shadow: none; }
  .row-main { grid-column: 2; grid-row: 1; }
  .row-score { grid-column: 3; grid-row: 1; }
  .row-name { font-size: .97rem; }
  .row-score { min-width: 42px; }
  .row-score b { font-size: 1.2rem; }
  .row-sum { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pb { padding: 12px; }
}

/* ---------------------------------------------------------------- home */
main.home { padding-top: 12px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.duo a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); color: var(--ink); }
.duo a:hover { text-decoration: none; filter: brightness(.98); }
.duo a > .ic { width: 28px; height: 28px; }
.duo a > span:nth-child(2) { flex: 1; min-width: 0; }
.duo-a { background: var(--navy); color: #fff !important; }
.duo-b { background: var(--card); border: 2px solid var(--accent); }
.duo-b > .ic { color: var(--accent); }
.duo-k { display: block; font-size: .74rem; opacity: .8; }
.duo strong { display: block; font-size: 1.02rem; font-weight: 700; }
.duo-btn { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: .78rem; font-weight: 600; padding: 4px 8px 4px 10px; border-radius: 999px; }
.duo-btn .ic { width: 14px; height: 14px; }
.duo-a .duo-btn { background: var(--accent-strong); color: #fff; }
.duo-b .duo-btn { background: var(--accent-soft); color: var(--accent-2); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.wrap.read { max-width: var(--wrap-read); }
.crumb:has(+ main.read) { max-width: var(--wrap-read); }
@media (max-width: 960px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .duo { grid-template-columns: 1fr; } }

.search-panel { padding: 16px; }
.sp-title { display: flex; align-items: center; gap: 10px; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.45rem); margin: 0 0 12px; }
.sp-lead { margin: -4px 0 12px; font-size: .88rem; line-height: 1.7; color: var(--ink-2); }
.sp-lead a { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; margin-left: 4px; }
.sp-lead a .ic { width: 14px; height: 14px; }
.spec td .sub { display: block; margin-top: 4px; font-size: .76rem; color: var(--ink-3); }
.src-list { margin: 0; padding-left: 1.2em; font-size: .88rem; line-height: 1.8; }
.big-search { display: flex; }
.big-search input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 12px 14px; border: 2px solid var(--accent); border-right: 0; border-radius: 6px 0 0 6px; }
.big-search input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.big-search button { flex: none; border: 0; background: var(--accent-strong); color: #fff; font: inherit; font-weight: 700; padding: 0 22px; border-radius: 0 6px 6px 0; cursor: pointer; }
.big-search button:hover { background: var(--accent-2); }
.tagline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; font-size: .85rem; }
.tagline span { color: var(--ink-3); font-size: .78rem; font-weight: 600; }
.tagline a { font-weight: 700; }

.grp + .grp { margin-top: 18px; }
.grp-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 700; font-size: .98rem; margin: 0 0 8px; }
.grp-sub { font-weight: 400; font-size: .76rem; color: var(--ink-3); }
.grp-bar { display: inline-block; width: 4px; height: 1.1em; border-radius: 2px; }
.grp-title { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin: 26px 0 10px; }

.cgrid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.cc { display: block; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: var(--ink); background: var(--card); }
.cc:hover { border-color: var(--accent); text-decoration: none; box-shadow: 0 1px 0 var(--accent); }
.cc-head { display: flex; align-items: center; gap: 8px; }
.cc-head .ico { width: 26px; height: 26px; }
.cc-head .ico .ic { width: 16px; height: 16px; }
.cc-name { font-weight: 700; color: var(--blue); font-size: .95rem; line-height: 1.35; min-width: 0; }
.cc-n { margin-left: auto; font-size: .76rem; color: var(--ink-3); white-space: nowrap; }
.cc-head .badge { white-space: nowrap; }
.cc-top { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: .82rem; }
.cc-r { flex: none; font-size: .68rem; font-weight: 600; color: #3d2c00; background: #e2a820; border-radius: 3px; padding: 0 5px; }
.cc-tool { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-s { margin-left: auto; color: var(--accent-strong); font-weight: 700; font-size: .95rem; }
.cgrid-more { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; margin: 10px 0 0; }
.cgrid-more span { color: var(--ink-3); font-weight: 700; }
.cgrid-more a { color: var(--ink-2); }

.btn-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); gap: 8px; }
.btn-grid a { display: flex; align-items: center; gap: 8px; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; color: var(--ink); font-weight: 700; font-size: .9rem; }
.btn-grid a:hover { border-color: var(--blue); text-decoration: none; }
.btn-grid .ico { width: 26px; height: 26px; }
.btn-grid .ico .ic { width: 15px; height: 15px; }
.btn-grid .bg-l { flex: 1; min-width: 0; line-height: 1.35; }
.btn-grid b { color: var(--accent-strong); font-size: .85rem; }
@media (max-width: 560px) { .btn-grid { grid-template-columns: 1fr 1fr; } .btn-grid .ico { display: none; } .btn-grid a { font-size: .86rem; padding: 8px; } }

/* サイドバー */
.panel.side .ph { padding: 10px 14px; }
.panel.side .ph-title { font-size: 1rem; }
.panel.side .ico { width: 26px; height: 26px; }
.panel.side .ico .ic { width: 15px; height: 15px; }
.panel.side .pb { padding: 6px 14px 10px; }
.side-rank, .side-list { list-style: none; padding: 0; margin: 0; }
.side-rank li, .side-list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: .88rem; }
.side-rank li:last-child, .side-list li:last-child { border-bottom: 0; }
.side-rank .rk { width: 22px; height: 22px; font-size: .74rem; }
.sr-main { flex: 1; min-width: 0; line-height: 1.4; }
.sr-main a { display: block; font-weight: 700; }
.sr-sub { display: block; font-size: .74rem; color: var(--ink-3); }
.sr-s { color: var(--accent-strong); font-weight: 700; }
/* サービス種別へのリンク（サイドバー）。今いるページは色で示してリンクにしない */
.side-links { list-style: none; padding: 0; margin: 0; }
.side-links li { border-bottom: 1px solid var(--line-2); font-size: .88rem; }
.side-links li:last-child { border-bottom: 0; }
.side-links a, .side-links li.cur { display: flex; align-items: center; gap: 8px; padding: 9px 2px; line-height: 1.4; }
.side-links a { color: var(--ink); text-decoration: none; }
.side-links a:hover .sr-main { color: var(--accent-strong); text-decoration: underline; }
.side-links li.cur { color: var(--accent-strong); font-weight: 600; }
.side-links .sv-n { flex: none; font-size: .76rem; font-weight: 600; color: var(--ink-3); }
.panel.side > .own-card { margin: 12px 12px 0; }
.panel.side > .tiny { margin: 8px 14px 12px; }
.own-card { border: 1px solid #e0d2f5; background: #fbf8ff; border-radius: var(--radius); padding: 10px 12px; }
.own-label { font-size: .7rem; font-weight: 600; color: var(--purple); margin: 0 0 4px; }
.own-name { display: flex; align-items: center; gap: 6px; font-weight: 700; margin: 0 0 4px; }
.own-card .small { margin-bottom: 8px; font-size: .8rem; }
.own-card p:last-child { margin: 0; }
.own-note { color: var(--purple); background: #fbf8ff; border-left: 3px solid var(--purple); padding: 8px 12px; font-size: .86rem; border-radius: 4px; }

/* 相談の帯 */
.bar-sec { margin: 22px 0 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.bar-h { display: flex; align-items: center; gap: 8px; background: var(--navy); color: #fff; padding: 10px 16px; font-weight: 700; font-size: .95rem; }
.bar-h a { margin-left: auto; color: #fff; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.bar-h a .ic { width: 14px; height: 14px; }
.bar-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; padding: 16px; }
.bar-big { font-size: 1.12rem; font-weight: 700; color: var(--navy); margin: 0 0 10px; line-height: 1.5; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; font-size: .88rem; }
.steps li { counter-increment: s; display: flex; gap: 8px; align-items: baseline; }
.steps li::before { content: counter(s); flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-strong); color: #fff; font-size: .72rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.bar-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bar-links a { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.bar-links a:hover { border-color: var(--blue); text-decoration: none; }
.bar-links strong { display: block; font-size: .92rem; }
.bar-links span { display: block; font-size: .76rem; color: var(--ink-3); }
@media (max-width: 720px) { .bar-body { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- 一覧・カテゴリ・ツール */
.page-head { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 16px; }
.page-head h1 { margin: 0 0 4px; }
.ph-kicker { font-size: .8rem; font-weight: 600; color: var(--accent-2); margin: 0 0 2px; }
.ph-sub { font-size: .82rem; color: var(--ink-3); margin: 0; }
.ph-desc { font-size: .92rem; color: var(--ink-2); margin: 10px 0 0; }
.ph-problems { margin: 8px 0 0; }
.ch-top { display: flex; align-items: center; gap: 14px; }
.ch-top > div { min-width: 0; }

.stats { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.stats li { background: var(--tint); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px 12px; }
.stats b { display: block; font-size: 1.45rem; font-weight: 700; color: var(--accent-strong); line-height: 1.2; }
.stats span { display: block; font-size: .76rem; color: var(--ink-2); line-height: 1.45; }
.stats em { display: block; font-style: normal; font-size: .72rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.answer-p { font-size: .92rem; margin: 0; }
.answer { background: #f1f9fa; border-left: 4px solid var(--accent); border-radius: 4px; padding: 10px 14px; margin: 14px 0 0; font-size: .9rem; }
.answer p { margin: 0; }
.answer .answer-k { display: flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--accent-2); margin-bottom: 4px; }
.answer-k .ic { width: 14px; height: 14px; }

.cat-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.cat-card { display: flex; align-items: center; gap: 10px; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: var(--ink); }
.cat-card:hover { border-color: var(--accent); text-decoration: none; }
.cat-main { flex: 1; }
.cat-main strong { display: block; color: var(--blue); font-size: .95rem; }
.cat-main > span { display: block; font-size: .76rem; color: var(--ink-3); line-height: 1.5; }
.cat-card b { flex: none; color: var(--accent-strong); font-size: .85rem; }
.cat-card b.zero { color: var(--ink-3); font-weight: 500; font-size: .76rem; }

.tool-top { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.tool-top .panel { margin: 0; }
.th { padding: 18px; }
.th-id { display: flex; align-items: center; gap: 14px; }
.th-name h1 { margin: 2px 0 0; }
.th-vendor { margin: 0; font-size: .85rem; color: var(--ink-3); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.th-score { padding: 18px; text-align: center; display: flex; flex-direction: column; justify-content: center; border-top: 3px solid var(--accent); }
.th-lbl { font-size: .78rem; font-weight: 600; color: var(--ink-3); margin: 0; }
.th-num { font-size: 3rem; font-weight: 700; color: var(--accent-strong); line-height: 1.05; margin: 4px 0; }
.th-num span { font-size: .9rem; color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.th-rank { font-size: .84rem; margin: 0; }
.th-rank b { color: var(--accent-2); font-size: 1rem; }
@media (max-width: 760px) {
  .tool-top { grid-template-columns: minmax(0, 1fr); }
  .th-score { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; text-align: left; }
  .th-num { font-size: 2.2rem; margin: 0; }
  .th-score .tiny { margin: 0; }
  .av.lg { width: 54px; height: 54px; font-size: 1.5rem; }
}

.table-wrap { overflow-x: auto; }
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.spec th { width: 30%; background: var(--tint); color: var(--ink-2); font-weight: 700; font-size: .84rem; }
.spec td { font-size: .92rem; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) { .spec th, .spec td { display: block; width: auto; } .spec th { padding: 6px 12px; border-bottom: 0; } .spec td { padding: 6px 12px 12px; } }

.sbars { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sbars li { display: grid; grid-template-columns: 13em minmax(0, 1fr) 3.4em; gap: 10px; align-items: center; font-size: .86rem; }
.sb-bar { height: 10px; background: #edf1f5; border-radius: 5px; overflow: hidden; }
.sb-bar i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.sb-bar.none { background: repeating-linear-gradient(45deg, #edf1f5 0 6px, #dfe5ec 6px 12px); }
.sbars b { text-align: right; font-size: .84rem; }
/* スマホ: 項目名の列を細くすると「情報共|有サービス」のように語の途中で折れるため、項目名を1行目に置き、バーと点を2行目に並べる */
@media (max-width: 480px) { .sbars li { grid-template-columns: minmax(0, 1fr) 3.2em; gap: 3px 10px; font-size: .8rem; } .sbars .sb-l { grid-column: 1 / -1; } }

.cmp { width: 100%; border-collapse: collapse; font-size: .86rem; }
.cmp th, .cmp td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); text-align: left; white-space: nowrap; }
.cmp th { background: #eef2f6; color: var(--ink-2); font-size: .78rem; font-weight: 600; }
.cmp tbody tr:nth-child(even) td { background: #f9fbfc; }
.cmp td.no { color: var(--ink-3); font-weight: 700; text-align: center; }
.cmp td.name { white-space: normal; min-width: 190px; font-weight: 700; }
.cmp td.name .av { margin-right: 6px; vertical-align: -6px; }
.cmp td.name .sub { display: block; font-weight: 400; font-size: .74rem; color: var(--ink-3); margin-left: 30px; }
.cmp td.name .chip { margin-left: 6px; }
.cmp td.sc { color: var(--accent-strong); font-weight: 700; }
.cmp tr.cur td { background: #e6f5f6 !important; }
/* 集計の表（/data）: 数字は右寄せ・桁をそろえる */
.cmp th.num, .cmp td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-t td.name { min-width: 150px; }
.data-t td.name .sub { margin-left: 0; }
.ok { display: inline-flex; align-items: center; gap: 2px; background: var(--green-soft); color: var(--green); font-weight: 600; font-size: .78rem; padding: 0 7px 0 5px; border-radius: 4px; }
.ok .ic { width: 13px; height: 13px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 16px 6px; }
.filters select, .filters input[type="search"] { font: inherit; font-size: .88rem; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--card); max-width: 100%; }
.filters label { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
.f-count { padding: 0 16px; font-size: .84rem; color: var(--ink-2); margin: 4px 0 8px; }
.f-count b { color: var(--accent-strong); font-size: 1.05rem; }
#f-none { padding: 0 16px 16px; }

.faq details { border-bottom: 1px solid var(--line-2); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; padding: 11px 0; cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--accent); }
.faq summary .fq { flex: 1; min-width: 0; }
.faq-a { font-size: .9rem; color: var(--ink-2); padding: 0 0 12px 26px; }
.checklist { list-style: none; counter-reset: c; padding: 0; margin: 0; display: grid; gap: 8px; }
.checklist li { counter-increment: c; display: flex; gap: 10px; align-items: baseline; font-size: .92rem; }
.checklist li::before { content: counter(c); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.sources { font-size: .8rem; color: var(--ink-2); word-break: break-all; padding-left: 1.2em; margin: 0; }
.sources li + li { margin-top: 6px; }  /* 出典のリンクが隣と近すぎる（タップの的が小さい・Lighthouse target-size） */
.note { background: var(--warn-soft); border-left: 4px solid #d9a400; padding: 9px 12px; border-radius: 4px; font-size: .86rem; color: #5a4300; }

.more-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.more-links .panel { margin: 0; padding: 12px 16px; }
.ml-h { font-weight: 700; font-size: .92rem; margin: 0 0 8px; }
@media (max-width: 640px) { .more-links { grid-template-columns: minmax(0, 1fr); } }
.pill-nav { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.pill-nav a { display: inline-block; padding: 3px 12px; border-radius: 999px; border: 1px solid #c9d8f3; background: var(--blue-soft); font-size: .84rem; font-weight: 700; }
.pill-nav a:hover { border-color: var(--blue); text-decoration: none; }

/* ---------------------------------------------------------------- パンくず・固定ページ・記事 */
.crumb { padding-top: 12px; font-size: .78rem; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; color: var(--ink-3); }
.crumb li + li::before { content: "›"; margin-right: 4px; }
.crumb + main.wrap { padding-top: 10px; }
.prose { max-width: 820px; }
main.prose { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 30px; margin-top: 12px; margin-bottom: 30px; }
.crumb + main.prose { margin-top: 10px; }
@media (max-width: 860px) { main.prose { margin-inline: 16px; padding: 18px 16px 24px; } }
.prose h2 { margin-top: 1.8em; padding-left: 10px; border-left: 4px solid var(--accent); font-size: 1.12rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .3em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--tint); }
.prose :is(th, td) { text-wrap: pretty; }
@media (min-width: 561px) { .prose table.crit td:first-child { white-space: nowrap; } }
@media (max-width: 560px) {
  /* 2列の表（項目名と内容）: 横に並べると項目名の列が1〜2文字幅に潰れるため、項目名を上・内容を下に積む */
  .prose table:not(:has(tr > :nth-child(3))), .prose table:not(:has(tr > :nth-child(3))) :is(thead, tbody, tr, th, td) { display: block; }
  .prose table:not(:has(tr > :nth-child(3))) tr { border: 1px solid var(--line); margin-top: -1px; }
  .prose table:not(:has(tr > :nth-child(3))) :is(th, td) { border: 0; }
  .prose table:not(:has(tr > :nth-child(3))) th { padding: 6px 10px; font-size: .82rem; }
  /* 3列以上の表: 1列目（項目名）が潰れないよう最小幅を持たせる */
  .prose table:not(.crit):has(tr > :nth-child(3)) :is(th, td):first-child { min-width: 7.5em; }
  /* 採点項目の表: 3列を横に並べると基準の列が細くなるため、「項目名　配点」の1行と基準を縦に積む */
  .prose table.crit thead { display: none; }
  .prose table.crit, .prose table.crit :is(tbody, tr, td) { display: block; }
  .prose table.crit tr { border: 1px solid var(--line); margin-top: -1px; padding: 8px 10px; }
  .prose table.crit td { border: 0; padding: 0; }
  .prose table.crit td:first-child { display: inline; font-weight: 600; }
  .prose table.crit td:nth-child(2) { display: inline; margin-left: .6em; color: var(--ink-2); }
  .prose table.crit td:nth-child(3) { margin-top: 4px; font-size: .85rem; }
}
.prose code { font-size: .78rem; background: var(--tint); padding: 1px 4px; border-radius: 3px; word-break: break-all; }

.list-head { padding-block: 22px 8px; }
.post-list { display: grid; gap: 10px; }
.post-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; color: var(--ink); }
.post-card:hover { border-color: var(--accent); text-decoration: none; }
.panel .post-card { border-color: var(--line-2); }
.post-card h3 { margin: 4px 0 6px; color: var(--blue); }
.post-card p { margin: 0; color: var(--ink-2); font-size: .88rem; }
.post-meta { font-size: .78rem; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.post-date { color: var(--red); font-weight: 600; }
.post-tag { background: var(--accent-soft); color: var(--accent-2); padding: 0 8px; border-radius: 4px; font-weight: 600; }
a.post-tag:hover { text-decoration: none; filter: brightness(.97); }
.post-card[hidden] { display: none; }
.post-card .post-meta { margin: 0; }
.post { max-width: 800px; margin: 0 auto; padding: 8px 16px 40px; }
.post-head { margin: 12px 0 18px; }
.post-body { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.post-body h2 { margin-top: 1.6em; border-left: 4px solid var(--accent); padding-left: 10px; }
.post-body img { border-radius: 6px; }
.post-body table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 8px; }
.cta-box { margin-top: 24px; background: var(--accent-soft); border-radius: var(--radius); padding: 18px 20px; }
.cta-box h3 { margin-top: 0; }

/* 問い合わせフォーム（contact_form → api/contact.js） */
.cform { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 14px; margin: 12px 0 8px; max-width: 640px; }
.f-row { display: grid; gap: 5px; margin-bottom: 14px; }
.f-row label { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.f-row .req, .f-row .opt { font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 4px; }
.f-row .req { background: var(--accent-strong); color: #fff; }
.f-row .opt { background: var(--line-2); color: var(--ink-2); }
.f-row input, .f-row select, .f-row textarea { font: inherit; font-size: 1rem; width: 100%; padding: 10px 12px; border: 1px solid #cfd6e0; border-radius: 6px; background: #fff; color: var(--ink); }
.f-row textarea { resize: vertical; line-height: 1.7; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.f-hint { font-size: .76rem; color: var(--ink-3); }
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-consent { font-size: .8rem; color: var(--ink-2); margin: 0 0 10px; }
.f-actions { margin: 0; }
.f-actions .btn { min-width: 200px; justify-content: center; }
.f-actions .btn:disabled { opacity: .6; cursor: wait; }
.f-msg { margin: 12px 0 0; padding: 10px 14px; border-radius: 6px; font-size: .9rem; }
.f-msg.ok { background: #eaf7ee; border-left: 4px solid #2e9d57; color: #1d5b33; }
.f-msg.ng { background: var(--warn-soft); border-left: 4px solid #d9a400; color: #5a4300; }
.f-row[hidden], .f-consent[hidden], .f-actions[hidden], .f-alt[hidden] { display: none; }
.f-alt { font-size: .78rem; color: var(--ink-3); margin: 12px 0 0; }

/* 記事ページ（build_post）。本文の幅は読みやすさ優先で右にサイドバー */
.art { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px 26px; margin-bottom: 16px; }
@media (max-width: 640px) { .art { padding: 18px 16px 22px; } }
.art-head h1 { margin: 6px 0 8px; }
.art-head .post-meta { margin: 0; }
.art-by { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--ink-3); margin: 0; }
.art-by a { font-weight: 600; }
.art-lead { margin-top: 16px; font-size: .95rem; line-height: 1.85; }
.art-lead p + p { margin-top: .6em; }
.toc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); padding: 12px 16px 12px; margin: 18px 0 0; }
.toc-h { font-weight: 700; font-size: .9rem; margin: 0 0 6px; }
.toc ol { margin: 0; padding-left: 1.4em; font-size: .9rem; display: grid; gap: 3px; }
.art-body { line-height: 1.9; }
.art-body h2 { margin-top: 2em; padding: 2px 0 2px 10px; border-left: 4px solid var(--accent); font-size: 1.18rem; scroll-margin-top: 80px; }
.art-body h3 { margin-top: 1.6em; font-size: 1.04rem; }
.art-body ul, .art-body ol { padding-left: 1.4em; }
.art-body li { margin-bottom: .35em; }
.art-body .table-wrap { margin: 1em 0; }
.art-body table { width: 100%; border-collapse: collapse; font-size: .88rem; line-height: 1.6; }
/* anywhere だと列の最小幅が1文字になり、狭い画面で1列目が1文字ずつ折れる。break-word＋最小幅で文節の幅を保ち、収まらない表は .table-wrap の中で横に送る */
.art-body th, .art-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; min-width: 4.5em; overflow-wrap: break-word; }
.art-body th { background: var(--tint); font-weight: 600; }
/* セルは行の長さをそろえて「〜の|前提」のような2〜3文字の最終行を出さない（6行を超えるセルは通常の折り返し） */
.art-body th, .art-body td { text-wrap: balance; }
/* 1列目は見出し。2列の表は幅を30%とって見出しが途中で折れないようにする */
.art-body table:has(tr > :nth-child(3)) :is(th, td):first-child { min-width: 8em; }
@media (min-width: 561px) {
  .art-body table:not(:has(tr > :nth-child(3))) :is(th, td):first-child { width: 30%; }
  .art-body table:has(tr > :nth-child(3)) :is(th, td):first-child { min-width: 9.5em; }
}
@media (max-width: 560px) {
  /* 見出し＋説明の2列の表は縦に積む（横に並べると1行2〜3文字で折れる）。見出し行は「区分／内容」の1行にまとめる */
  .art-body table:not(:has(tr > :nth-child(3))), .art-body table:not(:has(tr > :nth-child(3))) :is(thead, tbody, tr, th, td) { display: block; }
  .art-body table:not(:has(tr > :nth-child(3))) :is(th, td) { min-width: 0; }
  .art-body table:not(:has(tr > :nth-child(3))) thead tr { padding: 5px 10px; border: 1px solid var(--line); background: var(--tint); font-size: .8rem; }
  .art-body table:not(:has(tr > :nth-child(3))) thead th { display: inline; border: 0; padding: 0; background: none; }
  .art-body table:not(:has(tr > :nth-child(3))) thead th + th::before { content: "／"; font-weight: 400; }
  .art-body table:not(:has(tr > :nth-child(3))) td { border-top: 0; }
  .art-body table:not(:has(tr > :nth-child(3))) td:first-child:not(:last-child) { font-weight: 600; padding-bottom: 0; border-bottom: 0; }
  /* 3列以上の比較表は並びを崩さず横に送る。列が2〜3文字幅まで詰まらないよう最小幅を広げる */
  .art-body table:has(tr > :nth-child(3)) :is(th, td) { min-width: 6.5em; }
}
.note-box { background: var(--blue-soft); border-left: 4px solid var(--blue); border-radius: 4px; padding: 10px 14px; margin: 1em 0; font-size: .9rem; line-height: 1.75; }
.note-box p { margin: 0; }
.post-embed { margin: 1.2em 0; line-height: 1.6; }
.post-embed .rows { border: 1px solid var(--line-2); border-radius: var(--radius); }
.embed-cap { font-size: .76rem; color: var(--ink-3); margin: 6px 0 0; line-height: 1.6; }
.embed-more { margin: 8px 0 0; }
.art-src { margin-top: 2em; border-top: 1px solid var(--line); padding-top: 12px; }
.art-src h2 { font-size: 1rem; margin: 0 0 8px; }
.art-src .sources li { margin-bottom: 6px; }
.tag-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tag-filter button { font: inherit; font-size: .84rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.tag-filter button b { font-weight: 600; color: var(--ink-3); font-size: .76rem; }
.tag-filter button[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.tag-filter button[aria-pressed="true"] b { color: #fff; }

/* ---------------------------------------------------------------- footer */
.site-foot { background: var(--navy); color: #c9d4e3; padding-block: 30px 36px; margin-top: 28px; font-size: .86rem; }
.site-foot a { color: #fff; }
.foot-brand { font-weight: 700; font-size: 1.05rem; color: #fff; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.foot-note { color: #c9d4e3; margin: 4px 0; }
.foot-operator { color: #c9d4e3; margin-top: 10px; }
.site-foot .small { color: #aebbd0; }
.foot-cols { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: .84rem; }
.foot-h { font-weight: 700; font-size: .84rem; margin: 0 0 8px; color: var(--accent-soft); }
@media (max-width: 900px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-cols > div:first-child { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- 画像
   ツール = 公式サイトのトップページ（data/shots.json・16:10）、記事 = タイトルから描いたアイキャッチ（assets/posts・1200x630）。
   どれも width/height を HTML に書き、ここで aspect-ratio を固定して、読み込みでレイアウトがずれないようにする */
.row-shot, .tc-shot, .th-shot a, .pc-img, .pt-img { display: block; overflow: hidden; background: var(--tint); }
.row-shot img, .tc-shot img, .th-shot img, .pc-img img, .pt-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 一覧の行: 右に公式サイトの画像。要約なしの行（.compact）は一回り小さく */
.row.has-shot { grid-template-columns: 30px 44px minmax(0, 1fr) 176px; }
.rows.compact .row.has-shot { grid-template-columns: 30px 44px minmax(0, 1fr) 128px; }
.row-shot { aspect-ratio: 16 / 10; border: 1px solid var(--line-2); border-radius: 4px; }
.row-shot:hover { border-color: var(--accent); }
@media (max-width: 760px) { .row.has-shot { grid-template-columns: 30px 44px minmax(0, 1fr) 128px; } }
/* スマホは文字の幅を優先して画像を出さない（アイコンは残る） */
@media (max-width: 560px) {
  .row.has-shot, .rows.compact .row.has-shot { grid-template-columns: 40px minmax(0, 1fr); }
  .row-shot { display: none; }
}

/* ツールのページ: 右の列に公式サイトの画像とスコア */
.tool-top.has-shot { grid-template-columns: minmax(0, 1fr) 300px; }
.th-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.th-side .th-score { flex: 1; }
.th-shot { margin: 0; padding: 10px; }
.th-shot a { aspect-ratio: 16 / 10; border: 1px solid var(--line-2); border-radius: 4px; }
.th-shot a:hover { border-color: var(--accent); }
.th-shot figcaption { margin-top: 6px; font-size: .72rem; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 760px) { .tool-top.has-shot { grid-template-columns: minmax(0, 1fr); } }

/* トップ: 編集部スコア上位のカード（画像の左下にアイコンを重ねる。カード全体が名前のリンク） */
.tcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tcard { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.tcard:hover { border-color: var(--accent); }
.tc-shot { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line-2); }
.tc-shot.none { background: linear-gradient(135deg, hsl(var(--h) 40% 94%), hsl(var(--h) 36% 86%)); }
.tc-body { display: flex; flex-direction: column; flex: 1; padding: 0 14px 14px; min-width: 0; overflow-wrap: anywhere; }
.tc-id { display: flex; align-items: flex-end; gap: 8px; margin-top: -24px; }
.tc-id .av { box-shadow: 0 0 0 3px #fff; }
.tc-id .rk { margin-bottom: 2px; }
.tc-name { margin: 8px 0 0; font-size: 1rem; font-weight: 700; line-height: 1.45; text-wrap: balance; word-break: normal; }
.tc-name a::after { content: ""; position: absolute; inset: 0; }
.tcard:hover .tc-name a { text-decoration: underline; }
.tc-sub { margin: 1px 0 6px; font-size: .78rem; color: var(--ink-3); }
/* 要約は平均75字でカード幅だと5行になるので3行で切る（切れた行は … で終わるので孤立行は出ない） */
.tc-sum { margin: 0 0 10px; font-size: .84rem; line-height: 1.65; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: auto 0 0; }
.tc-foot .pill { margin: 0; }
@media (max-width: 900px) { .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .tcards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .tcard { scroll-snap-align: start; }
}

/* トップ: 新着記事のタイル（検索のすぐ下） */
.ptiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ptiles li { min-width: 0; }
.ptile { display: flex; flex-direction: column; gap: 6px; height: 100%; color: var(--ink); }
.ptile:hover { text-decoration: none; }
.pt-img { aspect-ratio: 1200 / 630; border: 1px solid var(--line-2); border-radius: 6px; }
.ptile:hover .pt-img { border-color: var(--accent); }
.pt-date { font-size: .74rem; font-weight: 600; color: var(--red); line-height: 1.4; }
.pt-title { font-size: .88rem; font-weight: 700; line-height: 1.55; color: var(--blue); }
.ptile:hover .pt-title { text-decoration: underline; }
.ptile.no-img { border: 1px solid var(--line-2); border-radius: 6px; padding: 10px 12px; }
@media (max-width: 900px) { .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .ptiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .ptiles li { scroll-snap-align: start; }
}

/* 記事カード: 左にアイキャッチ。タグの絞り込み（hidden）を上書きしないよう :not([hidden]) */
.post-card.has-img:not([hidden]) { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; }
.pc-img { aspect-ratio: 1200 / 630; border: 1px solid var(--line-2); border-radius: 4px; }
.pc-body { display: block; min-width: 0; }
@media (max-width: 560px) {
  .post-card.has-img:not([hidden]) { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .post-card.has-img h3 { font-size: .92rem; margin-bottom: 0; }
  .post-card.has-img p { display: none; }
}

/* 記事ページ: 見出しの下にアイキャッチ */
.art-eye { margin: 16px 0 0; }
.art-eye img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border: 1px solid var(--line-2); border-radius: 6px; }

/* ---------------------------------------------------------------- 記事の図解（posts.py の figure()）
   画像ではなく文字の図。flow＝手順／nums＝数字／compare＝並べて比べる／chain＝関係・データの流れ */
/* 図の中の文字は短いので balance（pretty だと「移行」「の合計」だけが次の行に落ちる）。chain の横並びは図の幅で決める（container） */
.fig { margin: 1.4em 0; border: 1px solid var(--line); border-radius: 8px; background: var(--tint); padding: 14px 16px 16px; line-height: 1.6; text-wrap: balance; container-type: inline-size; }
.fig figcaption { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: .95rem; margin: 0 0 12px; }
.fig-k { flex: none; font-size: .7rem; font-weight: 700; color: #fff; background: var(--navy); border-radius: 4px; padding: 1px 7px; position: relative; top: -1px; }
.fig ul, .fig ol { list-style: none; margin: 0; padding: 0; }
.fig li { margin: 0; }
@media (max-width: 640px) { .fig { padding: 12px 12px 14px; } }

/* 手順: 番号の丸を線でつなぐ */
.fig-flow { display: grid; gap: 10px; }
.fig-flow li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
.fig-flow li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: -10px; width: 2px; background: #8fd0d5; }
.fl-n { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-strong); color: #fff; font-weight: 700; font-size: .92rem; display: grid; place-items: center; position: relative; }
.fl-t { background: var(--card); border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 12px 7px; min-width: 0; }
.fl-t b { display: block; font-weight: 700; font-size: .94rem; }
.fl-sub { display: block; font-size: .84rem; color: var(--ink-2); margin-top: 1px; }

/* 数字: 大きな値＋何の数字か */
.fig-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.fig-nums li { background: var(--card); border: 1px solid var(--line-2); border-top: 3px solid var(--accent); border-radius: 6px; padding: 9px 12px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nu-v { font-size: 1.5rem; font-weight: 700; color: var(--accent-2); line-height: 1.35; }
.nu-l { font-size: .86rem; font-weight: 600; }
.nu-note { font-size: .78rem; color: var(--ink-3); line-height: 1.55; }
.fig-t { min-width: 0; }
/* 箱の幅は200px以上（それより細いと長い語が途中で折れる）。スマホは自然に1列になり、値の下に説明が全幅で入る。
   値と説明を横に並べる形は、値が長いと説明の列が細くなり語の途中で折れるので使わない */

/* 比べる: 2〜3列（スマホは縦に積む） */
.fig-compare { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.cp-col { --c: var(--blue); background: var(--card); border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; min-width: 0; }
.cp-col.t1 { --c: var(--green); }
.cp-col.t2 { --c: var(--purple); }
.cp-h { margin: 0; padding: 7px 12px; font-weight: 700; font-size: .92rem; color: #fff; background: var(--c); }
.cp-lead { margin: 10px 12px 0; font-size: 1.02rem; font-weight: 700; color: var(--c); line-height: 1.5; }
.cp-col ul { margin: 8px 12px 12px; display: grid; gap: 5px; font-size: .87rem; line-height: 1.6; }
.cp-col li { position: relative; padding-left: 14px; }
.cp-col li::before { content: ""; position: absolute; left: 1px; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
/* 列の幅が足りないときは縦に積む。画面幅ではなく図の幅で決める（1024px前後は本文が狭い） */
@container (max-width: 599px) { .fig-compare.cp-n3 { grid-template-columns: 1fr; } }
@container (max-width: 439px) { .fig-compare { grid-template-columns: 1fr; } }

/* 関係: 箱を矢印でつなぐ。横に並べるのは図の幅が620px以上で、箱3つまで・箱の名前8字までのとき（posts.py が .ch-v を付ける）。
   画面幅ではなく図の幅で決める（1024px前後は横の列が出て本文が狭くなるため） */
.fig-chain { display: flex; flex-direction: column; align-items: center; }
.ch-node { width: 100%; max-width: 440px; min-width: 0; background: var(--card); border: 2px solid var(--blue); border-radius: 8px; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.ch-node b { font-weight: 700; font-size: .92rem; color: var(--navy); line-height: 1.45; }
.ch-sub { font-size: .78rem; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.ch-arrow { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 4px 0; min-height: 34px; font-size: .76rem; font-weight: 600; color: var(--accent-2); text-align: center; line-height: 1.4; }
.ch-arrow::after { content: ""; display: block; order: -1; flex: none; width: 12px; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M0 0l6 10 6-10z' fill='%23ef6c00'/%3E%3C/svg%3E") center bottom / 12px 10px no-repeat,
              linear-gradient(var(--accent), var(--accent)) center top / 2px calc(100% - 8px) no-repeat; }
.ch-arrow.both::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M0 0l6 10 6-10z' fill='%23ef6c00'/%3E%3C/svg%3E") center bottom / 12px 10px no-repeat,
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M0 10L6 0l6 10z' fill='%23ef6c00'/%3E%3C/svg%3E") center top / 12px 10px no-repeat,
              linear-gradient(var(--accent), var(--accent)) center / 2px calc(100% - 16px) no-repeat; }
@container (min-width: 620px) {
  .fig-chain:not(.ch-v) { flex-direction: row; align-items: stretch; }
  .fig-chain:not(.ch-v) .ch-node { flex: 1 1 0; width: auto; max-width: none; }
  .fig-chain:not(.ch-v) .ch-arrow { flex: 0 0 88px; flex-direction: column; gap: 4px; padding: 0 6px; min-height: 0; }
  .fig-chain:not(.ch-v) .ch-arrow::after { order: 0; width: 100%; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%23ef6c00'/%3E%3C/svg%3E") right center / 10px 12px no-repeat,
                linear-gradient(var(--accent), var(--accent)) left center / calc(100% - 8px) 2px no-repeat; }
  .fig-chain:not(.ch-v) .ch-arrow.both::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%23ef6c00'/%3E%3C/svg%3E") right center / 10px 12px no-repeat,
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M10 0L0 6l10 6z' fill='%23ef6c00'/%3E%3C/svg%3E") left center / 10px 12px no-repeat,
                linear-gradient(var(--accent), var(--accent)) center / calc(100% - 16px) 2px no-repeat; }
}

/* 新規受注を終えたツールのページ（build.py の ENDED） */
.ended-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 12px; border-radius: 4px; background: var(--warn-soft); border-left: 3px solid #d9a400; color: #5a4300; font-size: .88rem; line-height: 1.7; }
.ended-note .ic { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.art-lead-figs .fig { margin: 14px 0 0; }
/* 掲載中バッジの埋め込みコード（/badges） */
.badge-code { white-space: pre-wrap; word-break: break-all; background: var(--tint); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px 12px; font-size: .8rem; }
#badge-tool { max-width: 100%; padding: 6px 8px; font: inherit; }

/* ---- AとBの違い（/compare） ---- */
@media (max-width: 560px) { .page-head h1.vs-h1 { font-size: 1.25rem; } }  /* 1行15字。「カイポケ（障がい福祉）の違い」（14字）を1行に */
.vs { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .9rem; }
.vs th, .vs td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; min-width: 0; overflow-wrap: break-word; }
.vs .vs-note { display: block; margin-top: 4px; font-size: .8rem; }
.vs thead th { background: #eef2f6; font-size: .9rem; font-weight: 700; color: var(--ink); }
.vs thead th:first-child { width: 22%; font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.vs thead th .av { vertical-align: middle; margin-right: 6px; }
.vs tbody th { background: var(--tint); color: var(--ink-2); font-weight: 700; font-size: .82rem; }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; }
.vs .small { color: var(--ink-3); }
@media (max-width: 560px) {
  .vs, .vs thead, .vs tbody { display: block; }
  .vs tr { display: grid; grid-template-columns: 1fr 1fr; }
  .vs thead th:first-child { display: none; }
  .vs thead th { font-size: .84rem; }
  .vs tbody th { grid-column: 1 / -1; padding: 6px 12px; border-bottom: 0; }
  .vs tbody td { padding: 6px 10px 12px; font-size: .82rem; }  /* 列幅約138px。「コミュニケーションズ」（10字）が1行に入る大きさ */
  .vs tbody td + td { border-left: 1px solid var(--line-2); }
  .vs tbody td::before { content: attr(data-n); display: block; font-size: .7rem; font-weight: 600; color: var(--ink-3); line-height: 1.4; margin-bottom: 2px; }
}
/* 変更履歴（/updates とツールのページ。2026-10-04 に介護ツールナビから移植）。狭い画面は1件ずつのカードに積む（左に項目名、右に値） */
.chg { width: 100%; border-collapse: collapse; font-size: .86rem; line-height: 1.6; }
.chg th, .chg td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; overflow-wrap: break-word; }
.chg thead th { background: #eef2f6; font-size: .78rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.chg tbody th { font-weight: 600; white-space: nowrap; font-size: .82rem; }
.chg tbody tr:last-child :is(th, td) { border-bottom: 0; }
@media (max-width: 760px) {
  .chg, .chg tbody { display: block; }
  .chg thead { display: none; }
  .chg tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
  .chg tbody tr:last-child { border-bottom: 0; }
  .chg tbody th { display: block; padding: 0 4px 4px; border: 0; }
  .chg td { display: block; position: relative; padding: 2px 4px 2px 5.5em; border: 0; }
  .chg td::before { content: attr(data-l); position: absolute; left: 4px; top: 3px; font-size: .74rem; font-weight: 600; color: var(--ink-3); }
}
.upd-day { border-bottom: 1px solid var(--line-2); padding: 8px 0; }
.upd-day:last-child { border-bottom: 0; }
.upd-day summary { cursor: pointer; font-size: .9rem; margin-bottom: 6px; }
/* 用語集（/glossary。2026-10-04 に介護ツールナビから移植）。見出し語＋1文の定義＋詳しいページへの導線 */
.gl { margin: 0; }
.gl-i { padding: 12px 0; border-bottom: 1px solid var(--line-2); scroll-margin-top: 120px; }
.gl-i:first-child { padding-top: 2px; }
.gl-i:last-child { border-bottom: 0; padding-bottom: 2px; }
.gl dt { font-weight: 700; font-size: 1rem; line-height: 1.5; margin-bottom: 4px; }
.gl dd { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.75; text-wrap: pretty; }
.gl-more { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.gl-more svg { width: 12px; height: 12px; }
.vs-list { margin: 0; padding-left: 1.2em; }
.vs-list li + li { margin-top: 6px; }
.vs-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 18px; }
.vs-index li { border-bottom: 1px solid var(--line-2); padding: 9px 2px; font-size: .9rem; line-height: 1.45; }
.vs-alts { list-style: none; margin: 0; padding: 0; }
.vs-alts li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.vs-alts li:last-child { border-bottom: 0; }
.vs-alt-main { flex: 1; min-width: 0; line-height: 1.4; }
.vs-alt-main > a { font-weight: 700; }
.vs-alt-main .sub { display: block; font-size: .76rem; color: var(--ink-3); }
.vs-link { flex: none; font-size: .8rem; font-weight: 600; border: 1px solid var(--line); border-radius: 4px; padding: 3px 9px; text-decoration: none; }
.vs-link:hover { border-color: var(--accent); }