/* 和田デジタルラボ 共通スタイル（屋号トップ・法務ページ用）
   販売ページ（/koetype/mac）は独自の見た目を持つため、そちらのCSSは各ページ内に置いたまま。
   ここは「文章を読ませるページ」に必要な最小限だけを持つ。

   ★変数名（--fg / --muted / --accent など）を変えないこと。
     販売ページ側の検査が同じ名前で法定表示の濃さを見ており、名前を揃えておかないと
     こちらを直した人があちらの決まりに気づけない。
   ★アクセント色だけが商品ごとに違う。屋号と法務ページは青、KoeType は青緑。
     背景・文字・枠・影は3者で同じ値にしてあるので、行き来しても同じ場所に居る感じが残る。 */

:root {
  color-scheme: light dark;
  --bg: #0a0d13; --card: #131922; --fg: #eef2f8; --muted: #94a1b2;
  --accent: #6ea8ff; --line: #222b38;
  --ink: #06142e; --soft: rgba(110,168,255,.13); --sunk: #0e131b;
  --sh1: 0 1px 2px rgba(0,0,0,.5);
  --sh2: 0 4px 12px rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.32);
  --r: 18px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f8fb; --card: #ffffff; --fg: #101828; --muted: #586577;
    --accent: #2563eb; --line: #e4e9f0;
    --ink: #ffffff; --soft: rgba(37,99,235,.08); --sunk: #f1f4f9;
    --sh1: 0 1px 2px rgba(16,24,40,.05);
    --sh2: 0 4px 12px rgba(16,24,40,.05), 0 18px 44px rgba(16,24,40,.09);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--fg); line-height: 1.85;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* 画面上端の淡い光。飾りだけなので、本文の下に敷いて操作の邪魔をしない。 */
.glow {
  position: fixed; inset: 0 0 auto; height: 60vh; z-index: 0; pointer-events: none;
  background: radial-gradient(1000px 460px at 50% -10%, var(--soft), transparent 68%);
}
.wrap { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: 56px 20px 80px; }
.wrap.narrow { max-width: 660px; }

h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); font-weight: 800; line-height: 1.28; margin: 0 0 12px;
  letter-spacing: .005em; font-feature-settings: "palt" 1; }
h2 { font-size: 1.25rem; font-weight: 700; margin: 52px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
h3 { font-size: 1.05rem; font-weight: 700; margin: 30px 0 8px; }
p, li { font-size: 1rem; }
a { color: var(--accent); }
strong { font-weight: 700; }
.updated { color: var(--muted); font-size: 0.9rem; margin: 0 0 32px; }
.lead { color: var(--muted); font-size: 1.05rem; }
/* 屋号の旗（.lead）のすぐ下に置く説明。旗より一段静かにして、読む順序を作る。 */
.sub { color: var(--muted); font-size: 1rem; margin: 10px 0 0; }
header .lead { color: var(--fg); font-size: clamp(1.2rem, 3vw, 1.5rem); margin: 0; letter-spacing: .02em; font-weight: 600; }

/* 表（特商法など）— 狭い画面では横スクロールさせ、本文側は横に溢れさせない */
.table-scroll { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh1); }
table { border-collapse: collapse; width: 100%; min-width: 460px; background: var(--card); }
th, td { border-bottom: 1px solid var(--line); padding: 14px 18px; text-align: left; vertical-align: top; font-size: 1rem; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
th { width: 30%; white-space: nowrap; font-weight: 700; background: var(--sunk); }

/* 記入待ちの箇所（公開前に必ず埋める）。目立たせて出しっぱなしを防ぐ */
.todo { background: #ffec9e; color: #4a3b00; padding: 1px 6px; border-radius: 4px; font-weight: 700; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; margin: 22px 0; box-shadow: var(--sh1); }
.card h3 { margin-top: 0; }
.note { border-left: 3px solid var(--accent); background: var(--card); padding: 16px 20px; border-radius: 0 var(--r) var(--r) 0; margin: 20px 0; box-shadow: var(--sh1); }
.note p { margin: 0; }
/* ★リストの項目の中に置く注意書き（<li> の中の <span class="note">）はブロックにする。
   行の中の部品のままだと、上下の余白と帯が1行ずつ付いて、行どうしが重なって読めなくなる
   （2026-09-24、ライブ変換の記事で iPhone の和田さんが見つけた）。 */
li > .note { display: block; margin: 12px 0 4px; padding: 12px 16px; }
/* 法務ページの日英1枚（2026-09-21）：英語の部分の前に区切りの線を引く。★色は既存の変数だけ。 */
.legal-part + .legal-part { margin-top: 72px; padding-top: 40px; border-top: 2px solid var(--line); }

.btn { display: inline-block; background: var(--accent); color: var(--ink); text-decoration: none; border-radius: 12px; padding: 14px 24px; font-weight: 700; font-size: 1rem; transition: filter .15s, transform .15s; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ★<small> はブラウザ既定で親の約 0.83 倍に縮む。指定を1つも書かないと、本文 16px の中で
   13.3px になる（2026-09-08 に本番の全29ページを 375px で測って見つけた。特商法ページの
   電話番号の注記がそれ）。要件は「説明・補足でも 14px 以上」なので、**床を敷く**。
   ★max() にしてあるのは、値段のように親が大きい所で 14px に固定してしまわないため。
   ★class の付いた規則（.product small など）はこちらより強いので、上書きされない。
   ★プレス面は press.css が `small{font-size:1em}` を後から当てる（2026-08-12 に同じ穴を踏んだ跡）。 */
small { font-size: max(.875em, .875rem); }

footer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
footer a { color: var(--muted); }
footer nav { margin-bottom: 10px; }

/* 更新履歴（/releasenotes）。版ごとのまとまりを、日付と一緒に1行で出す。
   ★日付は「説明」ではなく**版と対の情報**なので、注釈サイズ（0.9rem）に落とさない。
     和田さんの決まり：Web は本文 16px 以上・説明も 14px 以上（小さい段を作らない）。 */
.rel { margin: 22px 0 0; }
.rel h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin: 0 0 8px; }
.rel h3 .on { color: var(--muted); font-size: 1rem; font-weight: 600; }
.rel ul { margin: 0; padding-left: 1.2em; }
.rel li + li { margin-top: 8px; }

/* ブログの一覧（/blog）。1件＝日付・題・ひとことの3つだけ。カード全体が押せる。
   ★ひとことは「説明」ではなく記事の中身の一部なので、注釈サイズ（0.9rem）に落とさない。
     和田さんの決まり：Web は本文 16px 以上・説明も 14px 以上（小さい段を作らない）。
   ★見た目は屋号トップの商品カード（.product）と同じ作りにしてある。同じサイトの中で
     押せるものの形が2種類あると、押せると分かるまでに一拍かかる。 */
.posts { list-style: none; margin: 30px 0 0; padding: 0; }
.posts li + li { margin-top: 16px; }
.posts a { display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 26px; box-shadow: var(--sh1);
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.posts a:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--sh2); }
.posts .on { display: block; color: var(--muted); font-size: 1rem; }
/* h2 は一覧、h3 は記事末尾の「あわせて読む」。**見た目は同じ**（同じ物が2つの場所に出るだけ）。 */
.posts h2, .posts h3 { margin: 6px 0 10px; padding: 0; border: 0; font-size: 1.2rem; color: var(--accent); line-height: 1.5; }
.posts p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }

/* ブログのトップ「Macの裏技」と分野のページ（2026-10-05）。根拠＝docs/ブログのサイト構成-提案-2026-10-05.md。
   ★色は既存の変数だけ（5色目を足さない）。文字は本文 16px・日付や補足も 14px を下回らない。
   ★看板は「広告に見える形」にしない（違う色の四角・動き・文字を焼いた画像にしない＝kb 型帳 B-1）。名前と説明は文字で置く。
   ★記事のカードは屋号トップの商品カードと同じ作り（枠・角丸・押すと枠が色づく）。 */
.wrap.wide { max-width: 1100px; }
.blog-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh1); margin: 0 0 22px; }
.blog-hero-text { padding: 34px 36px 30px; }
.blog-hero .kicker { display: inline-block; margin: 0 0 12px; padding: 2px 12px; border-radius: 999px;
  background: var(--accent); color: var(--bg); font-size: 0.875rem; font-weight: 700; line-height: 1.7; }
.blog-hero h1 { margin: 0 0 12px; }
.blog-hero .lead { margin: 0 0 12px; color: var(--fg); font-size: 1rem; }
.blog-hero .facts { margin: 0; color: var(--muted); font-size: 0.875rem; }
.blog-hero-art { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: 62% center; }
.chips ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.chips a { display: inline-block; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--fg); text-decoration: none; font-size: 1rem; line-height: 1.6; }
.chips a:hover { border-color: var(--accent); }
.chips a span { color: var(--muted); }
.chips a[aria-current] { border-color: var(--accent); font-weight: 700; }
.post-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; padding: 0; }
.post-cards a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--sh1);
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.post-cards a:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--sh2); }
.post-cards img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line); }
.post-cards .meta { display: block; padding: 12px 14px 0; color: var(--muted); font-size: 0.875rem; }
.post-cards .ttl { display: block; padding: 4px 14px 14px; color: var(--accent); font-weight: 700; font-size: 1rem; line-height: 1.55; }
.post-cards .desc { display: block; padding: 0 14px 16px; color: var(--muted); font-size: 0.9375rem; line-height: 1.7; }
h3.cat-head { margin: 34px 0 0; font-size: 1.1rem; }
.cat-more { margin: 12px 0 0; font-size: 1rem; }
.blog-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 48px 0 0; }
.blog-links a { display: block; padding: 16px 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; color: var(--fg); font-weight: 700; text-decoration: none; }
.blog-links a:hover { border-color: var(--accent); }
.blog-links span { display: block; color: var(--muted); font-size: 0.9375rem; font-weight: 400; }
@media (max-width: 900px) { .post-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  /* スマホでは看板の絵を題の横の小さな絵にし、分野の札は1行で横に送る（2026-10-12）。
     前は 16:9 の絵と6つの札の折り返しで1画面目が埋まり、記事が1本も見えなかった（375×812 で最初の記事の上端 1147px→766px）。
     ★文字の段（.blog-hero-text）を display: contents にして、題・説明と絵を同じ格子に並べる。文字の大きさは変えない。 */
  .blog-hero { grid-template-columns: minmax(0, 1fr) 88px; column-gap: 12px; padding: 20px 20px 16px; margin-bottom: 16px;
    grid-template-areas: "kicker art" "title art" "lead lead" "facts facts"; }
  .blog-hero-text { display: contents; }
  .blog-hero .kicker { grid-area: kicker; justify-self: start; }
  .blog-hero h1 { grid-area: title; align-self: end; }
  .blog-hero .lead { grid-area: lead; margin-top: 12px; }
  .blog-hero .facts { grid-area: facts; }
  .blog-hero-art { grid-area: art; width: 88px; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 12px; object-position: 70% 25%; }
  .chips ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .chips li { flex: 0 0 auto; }
  .post-cards { grid-template-columns: 1fr; }
  .post-cards a { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-auto-rows: min-content; }
  .post-cards img { grid-row: 1 / span 3; height: 100%; aspect-ratio: auto; }
  .post-cards .meta { padding: 10px 12px 0; }
  .post-cards .ttl { padding: 2px 12px 12px; }
  .post-cards .desc { padding: 0 12px 12px; }
  .blog-links { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .post-cards a { transition: none; } .post-cards a:hover { transform: none; } }

/* パンくず（トップ › ブログ › 記事）。検索から記事に直接着いた人に、ここがどこかを1行で示す。
   ★構造化データ（BreadcrumbList）と同じ道筋を生成器が両方に書く＝片方だけ直せない。
   ★注釈サイズに落とさない（1rem を保つ）。 */
/* ★1行に収めて、あふれたら「…」で切る。**文字は削らない**（見た目だけを切る）——
   すぐ下の <h1> が同じ題を全部言うので、ここで2〜3行使うと同じ文を2回読ませることになる。
   ★DOM の文字はそのまま残るので、構造化データ（BreadcrumbList）と1字一致が保たれる。 */
.crumbs { margin: 0 0 16px; color: var(--muted); font-size: 1rem; line-height: 1.7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--fg); }
.crumbs span[aria-current] { color: var(--fg); }

/* 目次。節が3つ以上ある記事にだけ、生成器が最初の見出しの直前に置く。 */
.toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 24px; margin: 30px 0 36px; box-shadow: var(--sh1); }
.toc p { margin: 0 0 10px; font-weight: 700; font-size: 1rem; }
.toc ol { margin: 0; padding-left: 1.35em; }
.toc li + li { margin-top: 8px; }

/* 記事の中の図と画面写真。
   ★★**販売ページの `.fig` とは別物**（あちらは各ページの `<style>` が持っている）。
     揃えていないのは1点だけ——**説明（figcaption）を 0.9rem に落とさない。**
     販売ページは売り文句の脇に添える注記だが、**記事では説明そのものが本文の一部**で、
     和田さんの決まり（Web は説明も 14px 以上・小さい段を作らない）にいちばん近い場所になる。
   ★左右は `auto` で中央に寄せる。ここを `0` にすると図が列の左端に寄る——
     2026-08-13 に販売ページ3枚で実際に起きた（`test/pageLayout.test.js` の頭に経緯）。
   ★画像は実物の寸法を `width`/`height` 属性で宣言してあるので、`height:auto` で比率を保つ。 */
.fig { margin: 32px auto; }
.fig svg { display: block; width: 100%; height: auto; font-family: inherit; }
.fig svg text { font-family: inherit; }
.fig img { display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line); box-shadow: var(--sh1); }
.fig figcaption { margin-top: 14px; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.fig figcaption strong { color: var(--fg); }

/* 記事の四コマ漫画（2026-09-24、意味の薄い挿絵と入れ替えた）。
   ★完成ボード1枚（1080×1440）を縮めて貼らない。540×720 の4コマを並べる——
     1枚を記事の列幅へ縮めると、絵の中の文字が 10px 前後まで小さくなる（販売ページの漫画と同じ理由）。
   ★★記事の列（.wrap.narrow の本文 620px）で2列にすると、1コマ 305px＝絵の文字が 14px を割る。
     だから**漫画だけ列の外へ広げる**（最大 780px・画面の両端に 20px ずつ残す）。
   ★狭い画面（2列で 1コマ 320px を切る幅）では、1コマずつの横スクロールにする。自動送りはしない。
     横スクロールの1コマも 320px を下限にする（`84vw` だけだと 360px 幅の Android で 302px＝字が 13.4px。レビュー役が当てた）。
   ★番号は絵に焼かず、ここで重ねる（販売ページの .comic-number と同じ形・同じ色）。 */
.fig.comic { width: min(780px, calc(100vw - 40px)); position: relative; left: 50%; transform: translateX(-50%); }
.comic-panels { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 0; padding: 0; }
.comic-panels li { position: relative; min-width: 0; margin: 0; }
.fig.comic .comic-panels img { box-shadow: none; }
.comic-number { position: absolute; z-index: 1; top: 0; left: 0; display: grid; place-items: center;
  width: clamp(28px, 10%, 36px); aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%;
  background: #274b93; color: #fff; box-shadow: 0 1px 4px #10182855;
  font-size: clamp(16px, 2.5vw, 20px); font-weight: 700; line-height: 1; }
.comic-swipe { display: none; margin: 0 0 10px; color: var(--muted); font-size: 1rem; }
.fig.comic figcaption { max-width: 620px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) {
  .fig.comic { width: auto; left: 0; transform: none; }
  .comic-swipe { display: block; }
  .comic-panels { display: flex; overflow-x: auto; gap: 12px; padding: 0 0 10px;
    scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; }
  .comic-panels li { flex: 0 0 max(320px, min(84vw, 360px)); scroll-snap-align: center; }
}

/* 動画へのリンク（表紙の絵に、押せることが分かる印を重ねる）。
   ★★**印は絵に焼き込まない。** 表紙は YouTube に上げた1枚をそのまま使い回しており
     （正本 `lib/videos.js`・焼き直しは `video/<id>/render.sh`）、焼き込むと
     **同じ絵が2枚に割れて、描き直した日にどちらかが古いまま残る。**
   ★★**プレーヤーは貼らない。** 貼ると再生する前から第三者の Cookie が置かれ、
     `/legal/privacy` §7 の「広告や行動追跡のための Cookie を使用しません」が嘘になる。
     ＝ ここは「動画に見えるただのリンク」で、押すまで外へ1つも通信しない。
     番人は `test/videoLinks.test.js`。
   ★丸は 84px の固定。狭い画面でも指で押せる大きさを割らないため（縮む仕掛けを作らない）。
   🔴🔴 **中央に置かない。右下に寄せる。** 動画の印は中央が世間の慣習だが、**この家の表紙は
     中央に大きな文字を置く型**（4〜7字・`.claude/skills/youtube-ops` §1）なので、中央に丸を置くと
     **いちばん見せたい文字の上に必ず重なる**（2026-08-27、第1回の「直せます」の字で実際に起きた）。
     右下なら、表紙を作り直しても被らない。 */
.fig .play { position: relative; display: block; }
.fig .play > span { position: absolute; right: 18px; bottom: 18px; width: 84px; height: 84px;
  border-radius: 50%; background: rgba(15, 28, 46, .82);
  border: 3px solid #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .45); transition: background .15s; }
.fig .play > span::after { content: ""; position: absolute; left: 50%; top: 50%;
  margin: -14px 0 0 -8px; border-style: solid; border-width: 14px 0 14px 23px;
  border-color: transparent transparent transparent #fff; }
.fig .play:hover > span, .fig .play:focus-visible > span { background: var(--accent); }

/* 説明図。★★**SVG ではなく HTML で組む。**
   SVG は器の幅に合わせて拡大縮小するので、iPhone の幅（375px）では
   **図の文字が 8.4px まで縮んだ**（2026-08-13 に実測。検査は847本とも緑だった）。
   和田さんの決まりでは Web の説明は 14px 以上で、**縮む仕組みそのものが要件と噛み合わない。**
   HTML なら文字は常に 1rem のままで、狭い画面では**横並びが縦積みに替わる**だけ。
   ★おまけに、図の文字が**本物の文字**になる（選べる・検索できる・読み上げられる）——
     「画像の中の文字は文字ではない」という話をしている記事なので、ここは形も合っている。 */
/* ★左右の列は `stretch` で揃える。`center` にすると、**中身の行数が違うほうがずれて**、
   同じ高さに在るべき「紙面の写真」と結論が上下に食い違う（実際にそう出た）。
   ★そのために、上の層の枠には最低の高さを持たせてある（片方は1行・片方は2行）。 */
.diagram { display: flex; align-items: stretch; justify-content: center; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 22px; box-shadow: var(--sh1); }
.diagram .col { flex: 1 1 0; min-width: 0; text-align: center; }
.diagram .col-title { margin: 0 0 12px; color: var(--muted); font-size: 1rem; }
.diagram .layer { margin: 0; padding: 12px 10px; border: 2px dashed var(--line); border-radius: 10px;
  color: var(--muted); font-size: 1rem; line-height: 1.6;
  min-height: 5.2em; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.diagram .layer.filled { border-color: var(--accent); background: var(--soft); }
.diagram .layer .name { display: block; color: var(--accent); font-weight: 700; }
/* 紙面。飾りなので読み上げからは外してある（aria-hidden）。縦書きの行を縞で表す。 */
.diagram .sheet { position: relative; height: 96px; margin-top: 12px;
  border: 2px solid var(--line); border-radius: 10px; background: var(--sunk); }
.diagram .sheet::before { content: ""; position: absolute; inset: 16px 18px; opacity: .4;
  background: repeating-linear-gradient(to right, var(--muted) 0 4px, transparent 4px 20px); }
.diagram .layer-name { margin: 12px 0 0; color: var(--muted); font-size: 1rem; }
.diagram .result { margin: 6px 0 0; font-size: 1.05rem; font-weight: 700; color: var(--fg); }
.diagram .result.ok { color: var(--accent); }
.diagram .arrow { flex: 0 0 auto; align-self: center; margin: 0; color: var(--muted); font-size: 1rem; text-align: center; }
.diagram .arrow .mark { display: block; color: var(--accent); font-size: 1.7rem; line-height: 1.2; }

/* 取り出した文字を並べて見せる箱（ブログ「縦書きのPDFをコピーすると…」）。
   ★★画像にしない。画像で組むと iPhone の幅で文字が 8px 台まで縮んで読めなくなる
     （2026-08-14 実測）。文字のままなら、狭い画面でも本文と同じ大きさを保てる。
   ★左右で高さが揃わないのは、そのまま説明になっている（同じ中身がこれだけ縦に伸びる）。 */
.diagram .extract { margin: 0; padding: 14px 12px; border: 2px solid var(--line); border-radius: 10px;
  background: var(--sunk); color: var(--fg); font-size: 1rem; line-height: 1.9; text-align: left; }
.diagram .extract.ok { border-color: var(--accent); background: var(--soft); }
/* 狭い画面では縦に積む。矢印は同じ字を回して下向きにする（2つ目の字を持たない）。 */
@media (max-width: 560px) {
  .diagram { flex-direction: column; gap: 12px; }
  .diagram .col { width: 100%; }
  .diagram .arrow .mark { transform: rotate(90deg); }
}
/* 説明図の中の絵（Codex に描かせた文字の無い絵・2026-09-28）。★文字は絵に焼かず、周りの HTML に書く。 */
.diagram .pic { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 10px;
  border: 0; border-radius: 10px; box-shadow: none; }

/* 記事の「この記事の要点」（2026-09-28・結論を先に）。リードのすぐ下、目次の前に置く。
   ★AI の答えに引かれるのは、そこだけ読んで答えになるまとまり（kb 型帳 G-5・G-6）。
   ★見出し（h2）にしない。目次は最初の h2 の前に入るので、h2 にすると要点が目次の後ろへ回る。 */
.summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 22px; margin: 20px 0 28px; box-shadow: var(--sh1); }
.summary-title { margin: 0 0 8px; font-weight: 700; }
.summary ul { margin: 0; padding-left: 1.3em; }
.summary li + li { margin-top: 6px; }

/* 記事の一覧表（2026-09-28）。見出しの行（thead）を持つ表で、特商法の表（見出しの列＝30%・折り返さない）とは別。
   ★狭い画面でも折り返して読ませる（横スクロールは最後の手段。枠は .table-scroll のまま）。 */
table.cmp { min-width: 0; }
table.cmp th { width: auto; white-space: normal; }
table.cmp thead th { border-bottom: 2px solid var(--line); }
/* ★狭い画面（560px 以下）では、1行を1枚のカードにして縦に積む。3列のまま詰めると、375px で
     「こうす／る」「バッテリ／ー」のように語の途中で折れた（2026-09-28 実測）。
     各セルの前に、その列の見出し（td の data-label）を出す。data-label と見出しの一致は test/blog.test.js が見る。 */
@media (max-width: 560px) {
  table.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.cmp, table.cmp tbody, table.cmp tr, table.cmp td { display: block; width: 100%; }
  table.cmp tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.cmp tr:last-child { border-bottom: 0; }
  table.cmp td { border: 0; padding: 4px 16px; }
  table.cmp td[data-label]::before { content: attr(data-label) "："; display: block; color: var(--muted); font-weight: 700; }
}

/* 記事の末尾。「あわせて読む」→「一覧へ」の順に置く（近い話が先、広い場所があと）。
   ★記事は検索から直接来るので、ここが「他にもある」を伝える唯一の場所。 */
.related { margin-top: 60px; }
.post-nav { margin-top: 40px; }
/* 記事の最後の「この記事を送る」（2026-09-28）。★ただのリンク（外のスクリプトなし）。
   ★本文と同じ静かな見た目にする。色の付いた大きなボタンにすると広告に見える（kb 型帳 B-1）。
   ★押しやすさの床は 44px（指で押す面）。字は本文と同じ 1rem。 */
.share { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.share-title { margin: 0 0 12px; font-weight: 700; }
.share-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.share-list li { margin: 0; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg);
  font-size: 1rem; font-weight: 600; text-decoration: none; }
.share-btn:hover { border-color: var(--accent); }
.share-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.share-btn svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }

/* 販売ページに置く「最近の更新」の1行（アプリの「アップデートを確認」が開くのはここなので、
   お使いの方が最初に見る場所に置く）。売り文句の邪魔をしない大きさに留める。 */
.whatsnew { color: var(--muted); font-size: 1rem; margin: 14px 0 0; line-height: 1.9; }
.whatsnew strong { color: var(--fg); }

/* 動きを減らす設定の人には、飾りの動きを止める（WCAG 2.3.3・Anthropic の「品質の床」。2026-09-08）。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .posts a, .posts a:hover { transition: none; transform: none; }
}
/* 読んだ記事を見分けられるように（NN/g「10の間違い」#3）。5色目は足さず --muted を使う。 */
.posts a:visited h2, .posts a:visited h3 { color: var(--muted); }
.posts a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }