@charset "utf-8";

/* ==========================================================
   Beaker Studio — 共通スタイル
   モチーフ：ビーカーの目盛り・液面・試薬の色
   ========================================================== */

:root{
  /* 地色・文字 */
  --ground:#F3F5F2;
  --surface:#FFFFFF;
  --surface-2:#E9EDE8;
  --ink:#181D1A;
  --text:#3B4340;
  /* 1.4.3 の是正を2回外した記録。
     #6F7975 … 白地 4.499（4.5に0.001不足）／--ground 4.104
     #6B7571 … 白地 4.764（通る）／**--ground 4.345（不足）** ← ここで「直った」と誤報告した。
                白地しか見ていなかったうえ、確認をダークモードで走らせていた。
     #636D69 … --ground 4.884 ／ --surface-2 4.524 ／ 白地 5.354（第46回デザイナー実測）
     --surface-2 も見るのは、.dx-badge が background:var(--surface-2);color:var(--muted) のため。 */
  --muted:#636D69;
  --line:#D7DDD6;
  --line-soft:#E6EAE4;

  /* 主色 */
  --accent:#1F6B57;
  --accent-ink:#12483B;
  --accent-soft:#DDEBE5;

  /* 試薬色（カテゴリ・図版用） */
  --r-teal:#1F6B57;
  --r-amber:#8A5613;
  --r-indigo:#33488A;
  --r-clay:#94402D;
  --r-violet:#5C3E80;
  --r-teal-soft:#DDEBE5;
  --r-amber-soft:#F6EAD5;
  --r-indigo-soft:#DFE5F3;
  --r-clay-soft:#F5E1DC;
  --r-violet-soft:#E9E2F1;

  --radius:5px;
  /* 2026-09-18：Webフォント（Outfit / Noto Sans JP）を廃止。端末標準の書体だけで組む。
     理由：この記事1本で日本語サブセットが41ファイル×4ウェイト＝最大約3.0MB、
     Google Fonts のCSSも119KBを2回取得していた（実測）。広告から来た読者の
     29件中27件が最初の画面で離脱しており、表示の軽さを優先する。 */
  --display:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",sans-serif;
  --body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Consolas",monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    --ground:#121614;
    --surface:#1A201D;
    --surface-2:#232A26;
    --ink:#ECF0ED;
    --text:#C1C9C4;
    --muted:#8A948F;
    --line:#2E3733;
    --line-soft:#242B27;

    --accent:#5FBFA1;
    --accent-ink:#8AD4BB;
    --accent-soft:#173029;

    --r-teal:#5FBFA1;
    --r-amber:#D9A45C;
    --r-indigo:#8098D8;
    --r-clay:#DE8873;
    --r-violet:#AE92D4;
    --r-teal-soft:#173029;
    --r-amber-soft:#33270F;
    --r-indigo-soft:#1B2340;
    --r-clay-soft:#33201B;
    --r-violet-soft:#271E38;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}

img,svg{max-width:100%}
img{height:auto;display:block}

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-ink)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:100}
/* left:0 だと outline 2px + offset 3px のリングが (-5,-5) で切れる。
   13ページの「最初のTab停止」なので、キーボード利用者が最初に触れる要素。
   LP3本は lp.css で position:static に上書きしているので影響なし（実測確認済み）。 */
.skip:focus{left:5px;top:5px}

/* ---------- layout ---------- */
.container{max-width:920px;margin:0 auto;padding:0 22px}
.narrow{max-width:730px}

/* ---------- PR bar ---------- */
.pr-bar{
  background:var(--r-amber-soft);
  border-bottom:1px solid var(--line);
  color:var(--r-amber);
  font-size:13.5px;line-height:1.75;padding:10px 0;font-weight:700;
  border-bottom:2px solid var(--r-amber);
}
.pr-bar .container{display:flex;gap:9px;align-items:flex-start}
.pr-tag{
  flex:none;background:var(--r-amber);color:var(--surface);
  font-size:11px;font-weight:700;letter-spacing:.08em;
  padding:1px 8px;border-radius:3px;line-height:1.7;
}

/* ---------- header ---------- */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{width:30px;height:30px;flex:none;display:block}
.brand-name{font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:.02em;line-height:1.2}
.brand-name small{display:block;font-family:var(--body);font-weight:400;font-size:10.5px;letter-spacing:.14em;color:var(--muted);margin-top:1px}
.site-nav{display:flex;gap:22px;flex-wrap:wrap}
.site-nav a{font-size:13.5px;color:var(--text);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:56px 0 48px;
  background:
    linear-gradient(180deg,var(--surface) 0%,var(--ground) 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* 目盛りモチーフ：ヒーロー左端の細い刻み */
.hero::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:100%;
  background-image:repeating-linear-gradient(
    to bottom,
    color-mix(in srgb,var(--accent) 12%,transparent) 0 1px,
    transparent 1px 34px);
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 22px,transparent 60px);
  mask-image:linear-gradient(to right,#000 0,#000 22px,transparent 60px);
  pointer-events:none;
}
.hero > .container{position:relative}
.hero-grid{display:grid;grid-template-columns:1fr 260px;gap:36px;align-items:center}
.hero h1{
  font-family:var(--body);font-weight:700;
  font-size:clamp(25px,4.3vw,37px);line-height:1.45;
  color:var(--ink);margin:0 0 18px;text-wrap:balance;letter-spacing:.01em;
}
.hero .lede{font-size:16.5px;line-height:2;max-width:58ch;margin:0}
.hero-art{width:100%;height:auto;display:block}

.eyebrow{
  font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}

/* ---------- sections ---------- */
main{padding-bottom:80px}
section{padding-top:56px}

h2{
  font-family:var(--body);font-weight:700;
  font-size:clamp(19px,2.6vw,24px);line-height:1.55;
  color:var(--ink);margin:0 0 22px;text-wrap:balance;
  padding-bottom:12px;position:relative;
  border-bottom:1px solid var(--line);
}
/* 見出し下線に液面のような差し色 */
h2::after{
  content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;
  background:var(--accent);border-radius:2px;
}
h3{font-weight:700;font-size:17px;line-height:1.6;color:var(--ink);margin:36px 0 10px}
h4{font-weight:700;font-size:15px;color:var(--ink);margin:24px 0 6px}
p{margin:0 0 16px;max-width:68ch}
ul,ol{margin:0 0 18px;padding-left:22px;max-width:68ch}
li{margin-bottom:8px}
strong{color:var(--ink);font-weight:700}

/* ---------- 方針カード ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;margin-top:6px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;display:flex;flex-direction:column;gap:11px;
  border-top:3px solid var(--card-c,var(--accent));
}
.card-ico{width:38px;height:38px;display:block;color:var(--card-c,var(--accent))}
.card h3{margin:0;font-size:16px}
.card p{margin:0;font-size:14px;line-height:1.8}
.card.c-teal{--card-c:var(--r-teal)}
.card.c-amber{--card-c:var(--r-amber)}
.card.c-indigo{--card-c:var(--r-indigo)}

/* ---------- 記事カード ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;list-style:none;padding:0;margin:0;max-width:none}
.posts li{margin:0}
.post-card{
  display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:var(--text);
  transition:border-color .18s ease,transform .18s ease;
}
.post-card:hover{border-color:var(--thumb-c,var(--accent));transform:translateY(-2px);color:var(--text)}
.post-card:hover .post-title{color:var(--thumb-c,var(--accent))}
.post-thumb{display:block;width:100%;height:auto;background:var(--thumb-bg,var(--accent-soft))}
.post-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.post-title{font-weight:700;font-size:17px;line-height:1.6;color:var(--ink);transition:color .18s ease}
.post-excerpt{font-size:13.5px;line-height:1.8;margin:0}
.t-teal{--thumb-c:var(--r-teal);--thumb-bg:var(--r-teal-soft)}
.t-amber{--thumb-c:var(--r-amber);--thumb-bg:var(--r-amber-soft)}
.t-indigo{--thumb-c:var(--r-indigo);--thumb-bg:var(--r-indigo-soft)}
.t-clay{--thumb-c:var(--r-clay);--thumb-bg:var(--r-clay-soft)}
.t-violet{--thumb-c:var(--r-violet);--thumb-bg:var(--r-violet-soft)}

.tag{
  display:inline-block;background:var(--thumb-bg,var(--accent-soft));color:var(--thumb-c,var(--accent-ink));
  font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:3px;
}

/* ---------- callout ---------- */
.callout{
  background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--co-c,var(--accent));border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:26px 0;
}
.callout p:last-child{margin-bottom:0}
.callout-label{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--co-c,var(--accent));margin-bottom:9px;
}
.callout-label::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--co-c,var(--accent));flex:none;
}
.callout.warn{--co-c:var(--r-amber);background:var(--r-amber-soft);border-color:color-mix(in srgb,var(--r-amber) 30%,transparent)}
.callout.info{--co-c:var(--r-indigo)}

/* ---------- tables ---------- */
.tscroll{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.75;min-width:460px}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
thead th{background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:12.5px;border-bottom:1px solid var(--line)}
tbody th{background:var(--surface-2);color:var(--ink);font-weight:700;white-space:nowrap;width:180px;font-size:13.5px}

/* ---------- checklist ---------- */
.checklist{list-style:none;padding:0;margin:20px 0}
.checklist li{position:relative;padding-left:32px;margin-bottom:15px;line-height:1.85}
.checklist li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:16px;height:16px;border:2px solid var(--accent);border-radius:4px;
  background:var(--accent-soft);
}
.checklist li strong{display:block;margin-bottom:2px}

/* ---------- 5項目ダイアグラム ---------- */
.diagram{
  margin:28px 0;padding:26px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
}
.diagram-cap{
  font-size:12.5px;color:var(--muted);text-align:center;margin:14px 0 0;max-width:none;
}
.diagram svg{display:block;width:100%;height:auto}

/* ---------- 質問ブロック ---------- */
.q{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;margin:18px 0;border-left:4px solid var(--q-c,var(--accent));
}
.q-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:24px;padding:0 9px;
  background:var(--q-bg,var(--accent-soft));color:var(--q-c,var(--accent));
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;
  border-radius:3px;margin-bottom:10px;
}
.q h3{margin:0 0 12px;font-size:17px}
.q p:last-child{margin-bottom:0}
.q .why{
  font-size:13.5px;color:var(--muted);border-top:1px dashed var(--line);
  padding-top:12px;margin-top:14px;margin-bottom:0;
}
.g-money{--q-c:var(--r-amber);--q-bg:var(--r-amber-soft)}
.g-content{--q-c:var(--r-indigo);--q-bg:var(--r-indigo-soft)}
.g-real{--q-c:var(--r-teal);--q-bg:var(--r-teal-soft)}
.g-last{--q-c:var(--r-violet);--q-bg:var(--r-violet-soft)}

/* グループ見出し */
.group-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.group-ico{width:34px;height:34px;flex:none;color:var(--gh-c,var(--accent))}
.group-head h2{margin:0;border:none;padding:0;flex:1}
.group-head h2::after{display:none}
.group-rule{height:2px;border-radius:2px;background:var(--gh-c,var(--accent));opacity:.28;margin:0 0 22px}
.gh-money{--gh-c:var(--r-amber)}
.gh-content{--gh-c:var(--r-indigo)}
.gh-real{--gh-c:var(--r-teal)}
.gh-last{--gh-c:var(--r-violet)}

/* ---------- footer ---------- */
.site-footer{
  background:var(--surface);border-top:3px solid var(--accent);
  padding:44px 0 40px;font-size:13.5px;line-height:1.9;
}
.footer-grid{display:flex;flex-wrap:wrap;gap:28px 56px;justify-content:space-between;margin-bottom:28px}
.footer-nav{display:flex;flex-direction:column;gap:8px}
.footer-nav a{color:var(--text);text-decoration:none;font-size:13.5px}
.footer-nav a:hover{color:var(--accent);text-decoration:underline}
.footer-owner{font-size:13px;line-height:1.9;color:var(--muted);max-width:42ch}
.footer-owner b{color:var(--text);font-weight:700}
.copyright{border-top:1px solid var(--line-soft);padding-top:18px;font-size:12px;color:var(--muted)}

/* ---------- utility ---------- */
.updated{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--accent);color:#fff;padding:13px 26px;border-radius:var(--radius);
  text-decoration:none;font-weight:700;font-size:14.5px;
}
.btn:hover{background:var(--accent-ink);color:#fff}
.btn svg{width:16px;height:16px;flex:none}

@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-art{max-width:220px;margin:0 auto}
}
@media (max-width:640px){
  /* ★ パディングでリング切れを直そうとして2回失敗した記録（第43〜44回）。
     元の欠陥：左右パディング0だと 361〜640px で a.brand と .site-nav a の
     フォーカスリングがビューポート左端から5pxはみ出す（outline 2px + offset 3px）。
       試1 padding:14px 22px … .header-inner は flex-direction:column なので左右22pxが
            .site-nav の実効幅を44px削り、折り返し境界が 約375px → 約415px へ移動。
            375〜415px でヘッダが恒久的に高くなった（privacy 181→251px、他9ページ 109→161px）。
            この帯に iPhone 12〜15(390/393)・Pixel(412)・iPhone XR/11(414) が入る。
       試2 padding:14px 5px … 境界は約385pxまで戻ったが、375px(iPhone SE) が2行のまま。
            左右5pxずつ＝10pxぶん、境界がまだ動く。
     → パディングでは直せない。**リングを要素の内側に描く**（outline-offset を負にする）。
        pad = max(0, 2 + (-2)) = 0 なので、はみ出しは原理的に起きず、レイアウトは1pxも動かない。
        ナビのリンクは高さ54px・brand は87.6px（★この数値は privacy 限定。
        index/about は実測 navA 35.64px・brand 34.59px）なので、内側2pxでもリングは見える。
        実画素の差分で270点検証し、リング画素0＝0件・ビューポート外＝0件（第45回デザイナー）。 */
  .header-inner{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 0}
  .header-inner a.brand:focus-visible,
  .header-inner .site-nav a:focus-visible{outline-offset:-2px}
  .site-nav{gap:16px}
  .hero{padding:38px 0 34px}
  tbody th{width:auto}
  .diagram{padding:20px 14px}
}

/* ---------- シーンイラスト ---------- */
.scene{display:block;width:100%;height:auto;border-radius:var(--radius)}
.scene-hero{max-width:100%}
.hero-grid:has(.scene-hero){grid-template-columns:1fr 300px}
.scene-figure{margin:26px 0;padding:0}
.scene-figure figcaption{
  font-size:12.5px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.7;
}
@media (max-width:760px){
  .hero-grid:has(.scene-hero){grid-template-columns:1fr}
  .scene-hero{max-width:380px;margin:0 auto}
}

/* ---------- 条件しぼり込み診断 ---------- */
.dx{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;margin:24px 0;display:flex;flex-direction:column;gap:20px;
}
.dx-q{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.dx-q legend{
  display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);
  font-size:15.5px;margin-bottom:6px;padding:0;
}
.dx-n{
  flex:none;background:var(--accent-soft);color:var(--accent);
  font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  padding:3px 9px;border-radius:3px;
}
.dx-q label{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--radius);
  padding:12px 15px;font-size:14.5px;line-height:1.7;transition:border-color .15s ease,background .15s ease;
}
.dx-q label:hover{border-color:var(--accent)}
.dx-q input[type=radio]{margin-top:.35em;accent-color:var(--accent);flex:none;width:17px;height:17px}
.dx-q input[type=radio]:checked+span{color:var(--ink);font-weight:700}
.dx-q label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.dx-q input[type=radio]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dx-go{align-self:flex-start;border:none;cursor:pointer;font-family:inherit}

.dx-result{
  background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:26px 24px;margin:22px 0;
}
.dx-head{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.dx-badge{
  align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:3px 10px;border-radius:3px;background:var(--surface-2);color:var(--muted);
}
.dx-badge.is-sheer{background:var(--r-teal-soft);color:var(--r-teal)}
.dx-badge.is-nayutas{background:var(--r-violet-soft);color:var(--r-violet)}
.dx-badge.is-even{background:var(--r-amber-soft);color:var(--r-amber)}
.dx-head h3{margin:0;font-size:20px}
.dx-reasons{list-style:none;padding:0;margin:14px 0 0}
.dx-reasons li{
  position:relative;padding-left:26px;margin-bottom:11px;font-size:14.5px;line-height:1.8;
}
.dx-reasons li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--accent);
}
.dx-reasons li.dx-counter{color:var(--muted)}
.dx-reasons li.dx-counter::before{background:var(--muted)}
.dx-note{
  font-size:13px;color:var(--muted);border-top:1px dashed var(--line);
  padding-top:14px;margin:18px 0 0;line-height:1.8;
}

/* ---------- 写真 ---------- */
.photo-figure{margin:28px 0;padding:0}
.photo-figure img{
  display:block;width:100%;height:auto;border-radius:var(--radius);
  background:var(--surface-2);
}
.photo-figure figcaption{
  font-size:12.5px;color:var(--muted);margin-top:11px;line-height:1.75;
}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photo-split{display:grid;grid-template-columns:0.8fr 1.2fr;gap:16px;align-items:center}
.photo-split-svg .scene{border-radius:var(--radius)}
@media (max-width:640px){
  .photo-pair{grid-template-columns:1fr}
  .photo-split{grid-template-columns:1fr}
  .photo-split img{max-height:340px;object-fit:cover}
}

/* 2.4.11 Focus Not Obscured (AA)。.site-header は position:sticky なので、
   Shift+Tab の着地点とページ内リンクの着地点がヘッダの裏に入る。
   実測（第45回デザイナー）: privacy@375px の「プライバシーポリシー」が **100%** 被覆、
   index は 41.8/30.9/14.7/16.8%。さらに skip リンクの着地 #main が
   3ページ×3幅の **9/9 すべて**でヘッダの裏だった＝2.4.1 が実質機能していなかった。
   ヘッダ実測高: index/about 161(320-360)/109(375-640)/67(>=641)、privacy 251/181/89。
   検証済み: 適用後の被覆は 0〜0.2%、レイアウトは12/12で同一、Tab停止点も不変。 */
/* 追従ヘッダの実測高さに合わせた3段（第48回に再測）。
   境界はナビの折返し 375px と .header-inner の縦積み 641px の2つで、
   1px刻みで確認した実測は ≦374=187.0 / 375〜640=127.0 / ≧641=67.0。
   ★ 以前は 255/185/92 で、privacy だけページ内 style で 44px ターゲットを
     line-height:44px で作っていたためヘッダが 253.6px あり、その1ページに
     合わせた値だった。行送りをやめて inline-flex にしたら12ページとも
     187/127/67 に揃ったので、段もそれに合わせて詰める（余白は各8px）。 */
@media (max-width:374px){ html{scroll-padding-top:195px} }
@media (min-width:375px) and (max-width:640px){ html{scroll-padding-top:135px} }
@media (min-width:641px){ html{scroll-padding-top:75px} }

/* Chrome は Tab 時に border box を下端ぴったりに合わせるので、
   outline 2px + offset 3px のリング下辺が100%画面外に出る（⊐字に見える）。
   実測: 116停止中7件 → 0件、最大逸脱 5.9px → 0.0px（第46回デザイナー）。
   三辺は見えているので 2.4.7 の不合格ではないが、1行で消える。 */
html{scroll-padding-bottom:10px}

/* ★ privacy.html のページ内 <style> にだけ入れていた修正を共通へ戻す（第46回デザイナー）。
   同じ欠陥が残り12ページにあった＝「ページ内 style をパッチ置き場にしていた」構造の問題。
   実測: .skip も .btn も #fff on var(--accent)#5FBFA1 = **2.221:1**、
         .btn:hover は #fff on #8AD4BB = **1.719:1**。どちらも 4.5 の半分以下。
   .skip はキーボード利用者が最初に触れる要素（2.4.1 の唯一の入口）。
   ★ 一度ファイル冒頭の dark ブロック（44行付近）に置いたが効かなかった。
     .skip / .btn の基本定義が 95行・334行と**後**にあり、詳細度が同じなので後勝ちになる。
     ダークの上書きは、上書き対象より後ろに置くこと。 */
@media (prefers-color-scheme:dark){
  .skip{color:#0C120F}
  .skip:hover{background:#0C120F;color:#fff}
  .btn,.btn:hover{color:#17110D}
}

/* 1.4.3 light の .skip:hover が #12483B on #1F6B57 ＝ **1.637:1**（9ページ）。
   style.css:93 の a:hover{color:var(--accent-ink)} が効いていた。
   dark 側だけ末尾で直して light を忘れていた。
   ★ これで **3回目**の同じ構造：lp.css:2194 に「a.skip のホバーが3ページ×18構成すべてで
     1.4.3不合格だった」と記録があり、LP3本と privacy は直したのに共通CSSの9ページが
     取り残されていた。**ページ内 style と lp.css で直したら、必ず style.css にも戻す。**
   .skip はキーボード利用者の最初のTab停止。 */
.skip:hover{background:var(--accent-ink);color:#fff}   /* light: #fff on #12483B = 10.418 */
/* ★ 直後に dark を再掲する。上の1行を末尾に足したとき、
   前方（dark ブロック内）の .skip:hover を後勝ちで潰して
   ダークが #fff on #8AD4BB ＝ **1.719:1** になった。同じ「宣言順」の失敗を直後に繰り返した。
   **既存の上書きより後ろに規則を足すときは、その上書きも一緒に後ろへ持ってくる。** */
@media (prefers-color-scheme:dark){
  .skip:hover{background:#0C120F;color:#fff}
}

/* 7ページの表に <caption class="sr-only"> を足したので、共通CSSに定義を置く。
   これまで privacy.html のページ内 style にしか無かった（同じ構造の再発を避ける）。 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* .tscroll をキーボードでスクロールできるようにした（2.1.1）。リングも出す */
.tscroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- 本文まわりの下限を13pxに揃える（第48回・全13ページ実測） ----------
   実測（390px・日本語を含むテキストノードのみ）：
     .brand-name small 10.5px「検証ノート」…13ページ全部（ヘッダーなので main 走査では出ない）
     .tag 11px（index ×7）／.eyebrow 11px（6ページ）／.updated 11.5px（6ページ ×2）
     .callout-label 12px（5ページ）／.q-num 12px（support-comparison ×5）
     .diagram-cap 12.5px ／ figcaption 12.5px
   LP3本は lp.css 側で13px床を済ませてあるので、ここは共通CSS＝記事ページの手当て。
   ★ SVG の <text>（choosing-online-school の図中ラベル）はここに入れない。
     ⚠ 以前ここに「12.5px は viewBox で縮んだ結果の実効値」と書いたが**逆**だった。
       12.5 は viewBox（0 0 620 210）のユーザー単位の**ソース値**で、getScreenCTM から
       求めた実効サイズは 320px で **5.52px**／390px で **6.37px**／768px 以上で 12.9px。
       スマホでは新設した13px床の半分以下になっていた（第48回デザイナー実測）。
     font-size を上げると図のボックスから文字がはみ出すので、下の .diagram 側で
     狭幅では図を実寸のまま横スクロールさせる。 */
.brand-name small{font-size:13px;letter-spacing:.10em}
.tag{font-size:13px}
.eyebrow{font-size:13px}
.updated{font-size:13px}
.callout-label{font-size:13px}
.q-num{font-size:13px}
.diagram-cap{font-size:13px}
.scene-figure figcaption,.photo-figure figcaption{font-size:13px}

/* ---------- privacy.html のページ内 style にしか無かった手当てを共通化（第48回） ----------
   同じ欠陥が残り12ページに残っていた。ページ内 style を「そのページだけの патч置き場」に
   するのを、これで4回繰り返している。以後ここに書く。 */

/* 2.5.5(44px)。ヘッダ／フッタのナビ。
   ★ privacy が使っていた line-height:44px は、a.brand まで44行送りにするので
     ブランド（2行）が 91px になり、ヘッダが 163.9px → 253.6px（+89.7px）に膨らんでいた。
     その結果ナビの折返し境界が 375px にずれ、scroll-padding-top の段（360/361/641）と
     食い違って 361〜374px で着地がヘッダの裏に入り、privacy 専用の例外段が必要になっていた。
     行送りではなく inline-flex の中央揃えで高さだけ確保する。 */
.site-nav a,.site-header a.brand,footer nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
}
.site-header a.brand{justify-content:flex-start}

/* 行見出しは背景でデータセルと区別がついており 700 は二重指定（lp.css と同じ扱い） */
main tbody th{font-weight:500}

/* 320px で x=0 にある要素のフォーカスリングがビューポート外へ出ていた */
@media (max-width:360px){ .container{padding-left:8px;padding-right:8px} }

/* スキップリンクの着地点。href="#main" だけだと Chrome は
   sequential focus navigation starting point しか動かさず、
   document.activeElement は BODY のまま（実測：13ページ全部で 焦点=BODY）。
   Safari など starting point を動かさない実装では、スキップしたつもりで
   フォーカスがヘッダに残る。tabindex="-1" で実体としてフォーカスを受ける。
   Tab順には入らない（-1）ので、リングは出さない。 */
main[tabindex="-1"]:focus{outline:none}


/* 図は viewBox でコンテナ幅に追従するので、狭幅では中のラベルが 5.5〜6.4px まで縮む。
   font-size を上げるとボックスからはみ出すため、680px 未満では実寸（620px）のまま
   横スクロールさせる。ページ本体は横スクロールしない（.diagram の中だけ）。
   キーボードで動かせるように .tscroll と同じ扱い（tabindex/role/aria-label）をHTML側で付ける。 */
/* 境界は実測で決めた：681pxでも内側幅は591pxしかなく倍率0.953＝12.39pxだった。
   内側幅が620pxに届くのは viewport 約710px から。 */
@media (max-width:719px){
  .diagram{overflow-x:auto}
  .diagram svg{width:620px;max-width:none}
}
.diagram:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* TAG-PR-2026-09-16
   記事一覧のうち、アフィリエイト広告リンクを含む記事のカードに付ける表示。
   ステマ規制（令和5年内閣府告示第19号）は記事側で満たしているが、
   一覧の段階で広告記事と通常記事が同じ見た目なので、カードにも出す。
   反転色にして .tag（淡色地）と区別する。コントラストは #FFFFFF / #8A4B12 = 6.6:1。 */
.tag-pr{background:#8A4B12;color:#FFFFFF}

/* AD-NOTE-2026-09-16
   集客記事から広告記事（LP）へのリンクに付ける開示。
   以前は .updated（日付行と同じ 13px / var(--muted)）で出していたため、
   「公開：2026年8月28日」と見分けがつかず、開示として読まれなかった。
   リンクの直前に置き、PRバッジを添えて日付行と区別する。 */
.ad-note{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:18px 0 8px;font-size:14px;line-height:1.7;color:var(--text);
}

/* TSCROLL-FIT-2026-09-16
   table{min-width:460px} に対する打ち消しが lp.css 側で body.lp 限定だったため、
   LP以外の記事（body にクラスなし）では 375px で表が460pxのまま描画され、
   コンテナ331pxから129pxはみ出していた。course-total-cost の甲乙比較表は
   「スクール乙」列が丸ごと画面外で、直後の本文がその列の差額を語っていた。
   打ち消しをサイト全体に効かせる。LPは同じ宣言を既に持っているので変化なし。
   th の style="width:%" は fixed レイアウトでそのまま効く。 */
.tscroll table{table-layout:fixed;width:100%;min-width:0}