/* 大阪の看板製作くらべ
   DESIGN.md がすべての根拠。職人の見積書・施工図の語彙で組む。
   角丸なし・影なし・明るい原色なし。効果を煽る表現をUIでも作らない。 */

:root{
  /* くらべどき視覚言語 v1（正典 biz/_build/DESIGN.md）。
     成功例5件のCSS実測にもとづく。トークンの定義はこの1箇所だけ。 */
  --paper:#FFFFFF;                 /* 地は白。成功例6/6 */
  --surface:#F7F7F7;               /* 面。白との差は1.07しかないので区切りは影と余白で作る */
  --ink:#102A2E;                   /* 本文と見出し。白地15.08 */
  --mute:#55636A;                  /* 補助・注記・確認日。白地6.21／面5.80 */
  --rule:#DDDDDD;                  /* 装飾罫。白地1.36なので操作の枠には使えない */
  --border:#78848A;                /* 操作の枠。白地3.84でWCAG 1.4.11を満たす */
  --action:#0C837B;                /* 塗り専用。白文字で4.62 */
  --action-text:#0A736C;           /* 文字・リンク。白地5.70／面5.32 */
  --action-soft:#E8F3F1;
  --warn:#B3382A; --warn-soft:#F8E9E6;

  --market:#2C4A87;               /* 図とカテゴリ識別だけ。リンク・CTA・選択に使わない */
  --main:var(--market);    /* 図のSVG規則が読む既存の名前 */
  --line:var(--rule);              /* 既存規則が読む装飾罫の名前 */
  --tint:var(--surface);           /* 既存規則が読む面の名前 */

  /* 書体はシステムゴシック1本。Webフォントを読み込まない（実測6/6） */
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic Medium",YuGothic,Meiryo,sans-serif;
  --mincho:"Hiragino Mincho ProN",YuMincho,"Yu Mincho",serif;   /* 人の声の引用だけ */
  --num:var(--gothic);             /* 等幅ラテンをやめ、tabular-nums で桁を揃える */

  --read:46rem;                    /* 本文の行長。17pxで約43全角 */
  --wide:68rem;                    /* 表・図・一覧。実測9件のコンテナ幅の中心は1000〜1080px */
  --r:4px; --r-chip:999px;         /* 角丸。成功例の最頻値。チップだけpill */
  --shadow-card:0 0 4px rgba(0,0,0,.10);
  --shadow-sticky:0 -4px 10px rgba(0,0,0,.10);
  --dur:160ms; --ease:cubic-bezier(.2,.6,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{
  margin:0;background:#F4F3EF;color:var(--ink);
  font-family:var(--gothic);font-size:16px;line-height:1.85;
  font-feature-settings:"palt";
}
img{max-width:100%;height:auto}
a{color:var(--main);text-underline-offset:.22em;text-decoration-thickness:.06em}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--main);outline-offset:2px}

/* ---- 版面 ---- */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 20px}
.read{max-width:var(--read)}
.wrap>h1{max-width:46rem}
.sec{padding:52px 0}
.sec+.sec{border-top:1px solid var(--line)}
/* 施工図の切断線に見立てた二重罫。セクションの切れ目にだけ使う */
.sec-major{border-top:1px solid var(--ink);box-shadow:0 2px 0 -1px var(--line)}

/* ---- 見出し ---- */
h1,h2{font-family:var(--gothic);font-weight:700;line-height:1.4;letter-spacing:.005em;margin:0 0 .5em}
h3{font-weight:600;line-height:1.4;margin:0 0 .5em}
h1{font-size:clamp(27px,4.6vw,40px);margin-bottom:.6em}
h2{font-size:clamp(20px,2.6vw,26px);margin-top:0}
h3{font-size:17px;letter-spacing:0}
h2{position:relative;padding-left:14px}
h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;background:var(--main)}

p{margin:0 0 1.1em}
.lede{color:var(--mute)}
.note{font-size:13.5px;color:var(--mute);line-height:1.7}

/* 答えを先に置く（AIO）。数字と出典を含む */
.answer{border-left:3px solid var(--main);padding:2px 0 2px 16px;margin:0 0 24px;font-size:17px}
.answer b{font-weight:600}
.answer .n{font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums}

/* ---- ヘッダ ---- */
.pr{border-top:1px solid var(--line);margin-top:20px;padding-top:14px;font-size:12.5px;color:var(--mute)}
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding-top:18px;padding-bottom:14px}
.brand{font-size:19px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.tagline{font-size:12.5px;color:var(--mute)}
.nav{border-bottom:1px solid var(--line);background:var(--paper)}
.nav ul{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0 auto;padding:0 20px;max-width:var(--wide)}
.nav a{display:block;padding:12px 16px;font-size:14px;color:var(--ink);text-decoration:none;border-right:1px solid var(--line)}
.nav a:hover{background:var(--tint)}
.nav li:first-child a{border-left:1px solid var(--line)}
.nav a[aria-current=page]{background:var(--ink);color:#fff}

/* ---- 比較表 ---- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:820px}
caption{text-align:left;font-size:13.5px;color:var(--mute);padding:12px 14px;border-bottom:1px solid var(--line)}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--tint);font-weight:600;font-size:13px;white-space:nowrap}
thead th:first-child{position:sticky;left:0;z-index:3}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
th[scope=row]{font-weight:600;white-space:nowrap;position:sticky;left:0;background:var(--paper);
  border-right:1px solid var(--line);z-index:1}
td.n{font-family:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
td.n small{display:block;font-family:var(--gothic);font-size:11px;color:var(--mute);text-align:right}
td.n small.cond{text-align:left;white-space:normal;max-width:14em}
.dash{color:var(--mute)}
td.q{font-size:13px;line-height:1.7;color:var(--mute);max-width:32em}
td.ver{color:var(--warn);font-weight:600}
table.kv{min-width:0;border:1px solid var(--line);background:var(--paper)}
table.kv th{background:var(--tint);white-space:nowrap;width:9em}

/* ---- 図と写真 ---- */
.fig{margin:26px 0;border:1px solid var(--line);background:var(--paper);padding:16px;overflow-x:auto}
.fig svg{display:block;width:100%;min-width:540px;height:auto;margin:0 auto}
.fig figcaption{margin-top:10px;font-size:12.5px;color:var(--mute);line-height:1.7}
.f-open{fill:#fff;stroke:var(--ink);stroke-width:1.3}
.f-solid{fill:var(--ink)}
.f-node{fill:#fff;stroke:var(--ink);stroke-width:1.3}
.f-box{fill:none;stroke:var(--line);stroke-width:1}
.f-face{fill:var(--tint);stroke:none}
.f-main{fill:var(--main)}
.f-mainline{fill:none;stroke:var(--main);stroke-width:1.6}
.f-sep{stroke:var(--line);stroke-width:1}
.f-frame{fill:none;stroke:var(--line);stroke-width:1}
.f-axis{stroke:var(--ink);stroke-width:1.2}
.f-tick{stroke:var(--line);stroke-width:1}
.f-outline{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.f-dash{fill:none;stroke:var(--mute);stroke-width:1;stroke-dasharray:4 3}
.f-dim{stroke:var(--mute);stroke-width:.9}
.f-lead{stroke:var(--mute);stroke-width:.8;stroke-dasharray:3 3;fill:none}
.f-warn{fill:none;stroke:var(--warn);stroke-width:1.4}
.f-warnfill{fill:var(--warn)}
.f-hatch{fill:none;stroke:var(--mute);stroke-width:.7}
.f-marker{fill:var(--main)}
.f-markertext{fill:#fff}
.f-glass{fill:var(--tint);stroke:var(--line);stroke-width:1}
.f-door{fill:#fff;stroke:var(--ink);stroke-width:1}
.f-sign{fill:#fff;stroke:var(--ink);stroke-width:1.4}
.f-signthin{fill:none;stroke:var(--main);stroke-width:1;stroke-dasharray:4 3}
.f-warnbox{fill:rgba(179,56,42,.04);stroke:var(--warn);stroke-width:1}
.f-fee{fill:none;stroke:var(--mute);stroke-width:1.1}
.f-evwarn{fill:var(--warn)}
.f-h{font-family:var(--gothic);font-size:14px;font-weight:600;fill:var(--ink)}
.f-t{font-family:var(--gothic);font-size:16px;font-weight:600;fill:var(--ink)}
.f-s{font-family:var(--gothic);font-size:12px;fill:var(--mute)}
.f-num{font-family:var(--num);font-size:15px;fill:var(--main)}
.f-num-s{font-family:var(--num);font-size:12px;fill:var(--mute)}
.f-halo{paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
.f-arrow{fill:var(--mute)}
.fig-table{width:100%;min-width:0;border-collapse:collapse;margin:14px 0 0;font-size:14px}
.fig-table th{font-weight:600;text-align:left;border-bottom:1px solid var(--ink);padding:6px 10px 6px 0;white-space:nowrap;position:static}
.fig-table td{border-bottom:1px solid var(--line);padding:8px 10px 8px 0;vertical-align:top}
.fig-note{margin:14px 0 0;font-size:14px;line-height:1.8}
.fig-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0 0}
.fig-card{border-top:2px solid var(--line);padding:10px 2px 0;font-size:13px;line-height:1.7}
.fig-card b{display:block;font-size:15px}
.fig-card small{display:block;color:var(--mute);margin-top:4px}
.fig-badge{display:inline-block;font-weight:600;margin:4px 0 2px;font-size:12px}
.fig-badge-warn{color:var(--warn)}
.band{margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band img{display:block;width:100%;aspect-ratio:2/1;max-height:420px;object-fit:cover}
.band figcaption{max-width:var(--wide);margin:0 auto;padding:8px 20px;font-size:12.5px;color:var(--mute)}

/* ---- 部品 ---- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:22px 0}
@media(min-width:700px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--paper);padding:18px}
.card h3{margin:0 0 6px}
.card p{margin:0;font-size:14px;color:var(--mute)}
.card .n{font-family:var(--num);font-size:clamp(22px,3.4vw,30px);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink);display:block;margin:2px 0 4px;letter-spacing:-.02em}
.card .n span{font-family:var(--gothic);font-size:13px;font-weight:400;margin-left:3px}
ul.checks{padding-left:1.15em;margin:0 0 1.1em}
ul.checks li{margin-bottom:.5em}
.voc{border-left:2px solid var(--line);padding-left:16px;margin:0 0 22px}
.voc blockquote{font-family:var(--mincho);font-size:17px;line-height:1.8;margin:0 0 6px}
.voc cite{font-style:normal;font-size:12.5px;color:var(--mute)}
.warn{border:1px solid var(--warn);border-left-width:3px;padding:14px 16px;margin:22px 0;background:rgba(179,56,42,.04)}
.warn h3{color:var(--warn);margin-bottom:4px}
.warn p:last-child{margin-bottom:0}
.quote{font-family:var(--mincho);font-size:17px;line-height:1.9;margin:0 0 1.1em;
  border-left:2px solid var(--main);padding:4px 0 4px 18px;background:rgba(223,227,236,.35)}
.src{font-size:12.5px;color:var(--mute)}
.foot{border-top:1px solid var(--ink);margin-top:44px;padding:26px 0 52px;font-size:13.5px;color:var(--mute)}
.foot a{color:var(--mute)}
.foot ul{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px 18px}


/* ---- 事業者カード ---- */
.oplist{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin:26px 0 14px}
.op{background:var(--paper);padding:26px 24px;display:grid;gap:18px}
@media(min-width:1000px){.op{grid-template-columns:minmax(14em,1fr) minmax(0,320px) auto;align-items:start;gap:28px}
  .op .op-act{align-self:center}}
.op h3{margin:0 0 4px;font-size:19px;font-family:var(--gothic);font-weight:700}
.op h3 a{color:var(--ink);text-decoration:none}
.op h3 a:hover{text-decoration:underline}
.op-meta{margin:0 0 10px;font-size:13px;color:var(--mute)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.chips li{font-size:12px;color:var(--main);border:1px solid var(--tint);background:rgba(223,227,236,.35);padding:3px 9px}
.chips li.chip-strong{border-color:var(--main);color:#fff;background:var(--main)}
.op-price{margin:0;display:grid;gap:4px}
.pr-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-bottom:1px dotted var(--line);padding-bottom:3px;min-height:39px}
.pr-row dt{font-size:13px;color:var(--mute);margin:0;word-break:keep-all}
.pr-row dd{margin:0;font-family:var(--num);font-variant-numeric:tabular-nums;font-size:15px}
.pr-row dd b{font-size:19px;font-weight:600;letter-spacing:-.01em}
.pr-row dd small{font-family:var(--gothic);font-size:11px;color:var(--mute);margin-left:5px}
.pr-row dd.dash{font-family:var(--gothic);font-size:13px;color:var(--mute)}
.op-act{margin:0;font-size:13.5px}
.op-date{font-size:12px;color:var(--mute);margin-left:12px}
.op-g{font-size:12.5px;color:var(--mute);margin:6px 0 0}
h3.sub{margin:44px 0 8px;font-family:var(--gothic);font-weight:700;font-size:19px;position:relative;padding-left:14px}
h3.sub::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px;background:var(--line)}
.oplist-thin{list-style:none;padding:0;margin:16px 0 0;background:var(--line);padding-top:1px}
.oplist-thin li{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;
  background:var(--paper);padding:13px 18px;margin-bottom:1px}
.oplist-thin li a{font-size:16px}
.oplist-thin li span{font-size:13px;color:var(--mute)}

/* ---- 節タブと操作列 ---- */
.subnav{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.subnav ul{display:flex;gap:0;list-style:none;margin:0 auto;padding:0;max-width:var(--wide);
  overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 20px}
.subnav a{display:block;padding:13px 18px;font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent}
.subnav a:hover{border-bottom-color:var(--mute)}
.subnav a.on{border-bottom-color:var(--main);font-weight:600}
.listbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:10px 24px;margin:24px 0 0;font-size:13.5px;color:var(--mute)}
.listbar b{font-weight:600;color:var(--ink)}

@media(max-width:640px){
  .op{padding:20px 16px}
  .sec{padding:38px 0}
}

/* ---- 紙面の使い分け ---- */
.narrow main .wrap{max-width:44rem}
.narrow main .read{max-width:none}
.narrow main .band figcaption{max-width:44rem}
.narrow .subnav ul,.narrow .crumb .wrap{max-width:44rem}

/* ---- 導線部品 ---- */
.crumb{font-size:12.5px;color:var(--mute);border-bottom:1px solid var(--line)}
.crumb .wrap{padding-top:9px;padding-bottom:9px}
.crumb a{color:var(--mute)}
.crumb span[aria-hidden]{margin:0 6px;color:var(--line)}
.btn{display:inline-block;border:1px solid var(--ink);padding:9px 20px;color:var(--ink);
  text-decoration:none;font-size:14px;background:var(--paper);transition:background .12s,color .12s}
.btn:hover{background:var(--ink);color:#fff}
.btn:active{transform:scale(.97)}
.exit-list{list-style:none;margin:14px 0 10px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.exit-list a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border:1px solid var(--line);background:var(--paper);padding:13px 15px;text-decoration:none;color:var(--ink)}
.exit-list a:hover{border-color:var(--ink)}
.exit-list li{display:flex}
.exit-list a{flex:1}
.exit-list b{font-size:14px;line-height:1.5}
.exit-list .n{font-family:var(--num);font-size:14px;color:var(--main);white-space:nowrap}
@media(max-width:660px){
  .nav li{flex:1 1 auto}
  .nav a{text-align:center;padding:13px 10px}
}

/* 本文へのスキップ */
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:var(--ink);color:#fff;
  padding:10px 16px;text-decoration:none}
.skip:focus{left:0}
main:focus{outline:none}

.nw{white-space:nowrap}
.exit-list .n{font-family:var(--gothic)}
table{min-width:960px}
table.kv,.fig-table{min-width:0}

/* レビュー反映（2026-08-23）: 幅の変化とキーボード操作で崩れていた箇所 */
.narrow main table{min-width:0}
.tablewrap:focus-visible{outline:2px solid var(--main);outline-offset:2px}
* + h2{margin-top:1.6em}
table.kv{margin:0 0 1.2em}
h1,h2{text-wrap:balance}
.narrow main th[scope=row]{white-space:normal}

/* ---- くらべどきフォーマット（2026-08-23）の共通部品 ----
   根拠は _build/FORMAT.md。導線部品・追従CTA。
   明朝（システム）は人の声の引用専用（本人決定・方針ノート§1）。見出しには使わない。
   Webフォントは読み込まない（視覚言語v1・成功例6件中6件がシステムフォント） */
/* 見出しはゴシック太字（本人決定 2026-08-23「明朝は人の声の引用専用」・方針ノート§1）。
   見出しWebフォントは撤回した */
h1,h2,h3{font-family:var(--gothic);font-weight:700}
.brand{font-family:var(--gothic);font-weight:700}
.quote,.voc blockquote{font-family:var(--mincho)}
.byline{font-size:12.5px;color:var(--mute);margin:-4px 0 20px}
.byline a{color:var(--mute)}
.hero-act{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin:20px 0 4px}
.btn-primary{background:var(--main);border-color:var(--main);color:#fff}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.chipsnav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.chipsnav a{border:1px solid var(--line);background:var(--paper);padding:0 14px;font-size:13px;
  min-height:44px;display:inline-flex;align-items:center;   /* タップ領域44px（WCAG 2.5.8） */
  text-decoration:none;color:var(--ink)}
.chipsnav a:hover{border-color:var(--main);color:var(--main)}
.cta-official{border:1px solid var(--line);background:var(--paper);padding:18px 20px;margin:22px 0}
.cta-official .btn{font-size:15px;padding:12px 22px}
.cta-official ul{list-style:none;margin:12px 0 0;padding:0;font-size:13px;color:var(--mute)}
.cta-official li{display:inline-block;margin:0 16px 4px 0}
.cta-official li::before{content:"・"}
.fit{font-size:13px;color:var(--main);margin:8px 0 0}
.mcta{display:none}
@media(max-width:660px){
  body{padding-bottom:64px}   /* 追従バーの実測高さ54〜56pxを隠さない */
  html{scroll-padding-bottom:76px}
  .mcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);
    border-top:1px solid var(--ink)}
  .mcta a{display:block;text-align:center;color:#fff;padding:13px 16px;font-size:15px;text-decoration:none}
  .mcta a:focus-visible{outline:2px solid #fff;outline-offset:-4px}
}
@media print{.mcta{display:none}}

/* ===== くらべどき視覚言語 v1 — 部品の規則 =====
   トークンは :root（このファイルの先頭）にある。ここは部品だけ。 */

/* 地と本文。palt は見出しだけに掛ける（本文に掛けると和文の字間が詰まりすぎる） */
body{background:var(--paper);font-size:17px;line-height:2;font-feature-settings:normal}
h1,h2,h3,.brand,.card .n,.pr-row dd b{font-feature-settings:"palt"}

/* 字寸。DESIGN.md の scale [12,13,14,16,17,20,24,30,40] */
h1{font-size:clamp(30px,4.2vw,40px)}
h2{font-size:clamp(24px,2.6vw,30px)}
h3{font-size:20px}

/* 数値はゴシックの tabular-nums。金額は行の途中で折らない */
.n,td.n,.card .n,.exit-list .n,.pr-row dd,.answer .n,.f-num,.f-num-s{
  font-family:var(--gothic);font-variant-numeric:tabular-nums}
.pr-row dd b,.card .n,.answer .n,td.n{white-space:nowrap}

/* 操作色。市場色は操作に使わない */
a{color:var(--action-text)}
a:focus-visible,button:focus-visible,summary:focus-visible,.tablewrap:focus-visible{
  outline:3px solid var(--action);outline-offset:2px}
h2::before{background:var(--action)}
.answer,.quote{border-left-color:var(--action)}
.subnav a.on{border-bottom-color:var(--action)}
.btn-primary{background:var(--action);border-color:var(--action);color:#fff}
.btn-primary:hover{background:var(--action-text);border-color:var(--action-text);color:#fff}
.chipsnav a:hover{border-color:var(--action);color:var(--action-text)}
.exit-list .n,.fit{color:var(--action-text)}
.exit-list a:hover{border-color:var(--action)}
.chips li{color:var(--action-text);border-color:var(--action-soft);background:var(--action-soft)}
.chips li.chip-strong{border-color:var(--action);background:var(--action);color:#fff}

/* ink地の上のフォーカスリングは白。--action は ink 地で3.27しかない */
.skip:focus,.skip:focus-visible,.nav a[aria-current=page]:focus-visible{
  outline:3px solid #fff;outline-offset:-4px}

/* 角丸 */
.btn,.cta-official,.exit-list a,.tablewrap,.fig,.warn,.card,.op,.oplist-thin li,
.band img,input,select,textarea{border-radius:var(--r)}
.chips li,.chipsnav a{border-radius:var(--r-chip)}

/* カードは罫線で囲わず極薄の影1種で分ける。1pxグリッドの区切りをやめる */
.cards,.oplist{background:transparent;border:0;gap:16px}
.oplist{border-top:0;border-bottom:0}
.card,.op{box-shadow:var(--shadow-card);border:0;background:var(--paper)}
.oplist-thin{background:transparent;padding-top:0;display:grid;gap:8px}
.oplist-thin li{box-shadow:var(--shadow-card);margin-bottom:0;background:var(--paper)}

/* 表。行罫は薄く、表頭は面。市場色を表頭に使わない */
.tablewrap{background:var(--paper);border-color:var(--rule)}
thead th,table.kv th{background:var(--surface)}
th,td{border-bottom-color:var(--rule)}
th[scope=row]{background:var(--paper);border-right-color:var(--rule)}
table.kv{border-color:var(--rule)}

/* 警告は面で出す。枠で囲わない */
.warn{background:var(--warn-soft);border:0;border-left:3px solid var(--warn)}

/* 追従CTAは影で持ち上げる */
.mcta{box-shadow:var(--shadow-sticky)}

/* ボタンと確認日は行として折らず、flexの項目として折り返す
   （inline のままだと375pxで確認日の末尾2文字だけが次行に落ちた） */
.op-act{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.op-date{margin-left:0;white-space:nowrap}

/* 組版。balance は狭い幅でも3〜4行に収まる短い塊だけに使う。
   Chromeは4行までしか均さないので、長い塊に当てると最終行が2文字に悪化する。 */
h1,h2,h3{text-wrap:balance}
p,.lede,.answer,.fig-note,li{text-wrap:pretty}
.note,.src,.byline,.tagline,.pr,.op-meta,.op-g,.op-date,.listbar,.fit,.fig figcaption,
.band figcaption,.card p,.crumb,.foot,.pp-note,.op-act,.fig-card,.pr-row dt,.pr-row dd,
ul.checks li,.exit-list b,.chips li{text-wrap:balance}
p:has(> a:only-child),p:has(> strong:first-child),
p:has(> a:first-child):has(> a:last-child){text-wrap:balance}

/* 図解は viewBox より小さく描画しない。縮むと図の中の文字が12pxを下回る。
   実測: sapporo は min-width が効かず286pxまで潰れて文字7.3px、
   他サイトも viewBox620 に対し枠540で0.87倍＝10.5px だった。
   viewBox の最大値620pxを下限にし、足りない幅は横スクロールで逃がす。 */
/* 図の線は1px未満にしない。0.6〜0.9pxは1x画面でアンチエイリアスされて薄く消える（実測） */
.fig svg .f-dim,.fig svg .f-group,.fig svg .f-hatch,.fig svg .f-lead,
.fig svg .f-mortar,.fig svg .f-mortar2,.fig svg .f-tile,.fig svg .f-sep,.fig svg .f-tick{stroke-width:1}

.fig{overflow-x:auto}
.fig svg{display:block;width:100%;min-width:620px;height:auto}

/* ===== 版面 =====
   骨格の帯と本文の左端を1本に揃える。実測で左端が57/77/85/265pxの4種類あった。 */
.top>.wrap,.nav>ul,.crumb>.wrap,.foot>.wrap,.shell,main>.wrap,main>div>.wrap,main>section>.wrap{
  max-width:var(--wide);margin-inline:auto;padding-inline:20px;box-sizing:border-box}
.shell .wrap{max-width:none;margin-inline:0;padding-inline:0}

/* 本文の列は左端から始める。auto マージンで中央寄せにすると、
   46rem の列が親（752px）の中で左右8pxずつ空いてヘッダーと左端がずれる（実測） */
main h1,main .wrap>h1,main .byline,main .answer,main .lede,main .hero-act,main .read,main .toc,
main .note,main .fig-note,main .src,main figcaption{
  /* 注記は本文より小さいので、46rem（17px本文の値）だと52〜56字になる。
     字数で縛る。42em＝どの字寸でも42全角字 */
  max-width:min(var(--read),42em);margin-inline:0}

/* 表題はヘッダーから離す。実測で距離が0pxになっていた */
main h1{margin-top:clamp(30px,4.5vw,52px)}
.crumb ~ .shell h1,.crumb ~ main h1{margin-top:clamp(24px,3vw,40px)}

/* ナビはセルを引き伸ばさない。flex:1 で埋めると行ごとに幅が変わって不揃いに見える（実測） */
@media(max-width:660px){
  .nav li{flex:0 0 auto}
  .nav a{text-align:left;padding:12px 14px}
}

/* リンクの語を行またぎで割らない。「調べ方」が「調べ／方」に割れていた（実測） */
.byline a,.src a,.note a,.crumb a,.foot a{word-break:keep-all;overflow-wrap:normal}

/* タップ領域。文中のリンクは WCAG 2.5.8 の Inline 例外だが、
   行として独立したリンク（グラフの社名・目次・出口）は24px以上にする */
.pp-name,.toc a,.side-toc a,.exit-list a,.oplist-thin li a{
  display:inline-block;min-height:24px;padding-block:3px}

/* 側列は「1つの塊」として追従させる。
   目次だけを sticky にすると、positioned な目次が静的な5社ボックスの前面に描かれ、
   スクロール200〜500pxで最大199px重なって両方読めなくなっていた（実測・スクショで確認）。
   5社ボックスは記事から会社ページへの最短の出口なので、常に見えているほうがよい。 */
@media(min-width:1120px){
  .col-side{position:sticky;top:64px;align-self:start;
    max-height:calc(100vh - 88px);overflow-y:auto;overscroll-behavior:contain}
  .col-side .side-toc,.col-side .side-box{position:static}
}

/* ===== 目次 =====
   追従させない（FORMAT §4／NN/gは本文内の追従目次を「グローバルナビと誤認される」と否定）。
   同じ場所へ行く導線を増やさないため、1ページに1つだけ出す。 */
.toc{border:1px solid var(--rule);border-radius:var(--r);padding:14px 18px;margin:0 0 28px;
  max-width:var(--read)}
.toc b{display:block;font-size:14px;color:var(--mute);margin:0 0 6px;font-weight:600}
.toc ol{margin:0;padding-left:1.5em;font-size:15px;line-height:1.9}
.toc li{margin:.2em 0}
/* 右列の目次を持つサイトでは、デスクトップで本文内の目次を出さない */
@media(min-width:1000px){.shell .toc{display:none}}

/* モバイルのCTAは幅100%（FORMAT §6-2）。inline-blockのままだと120px幅になり、
   「公式サイトで最新の料金を確認する」が2行に折れていた（375pxで実測） */
@media(max-width:660px){
  .hero-act,.cta-official .btn,.op-act .btn{width:auto}
  .hero-act .btn,.cta-official .btn,.op-act .btn{display:block;width:100%;text-align:center;box-sizing:border-box}
  .hero-act{display:grid;gap:10px}
  .op-act{display:grid;gap:6px}
  .op-date{text-align:left}
}

/* 320pxではCTAの利用幅が179pxしかなく、14全角字のラベルが2行に折れる。
   左右の余白と字寸を詰めて1行に収める（タップ高さ44pxは維持） */
@media(max-width:360px){
  .btn,.cta-official .btn,.hero-act .btn,.op-act .btn{padding-inline:12px;font-size:14px}
}

/* ===== 追従CTA =====
   FORMAT §6-2「元のCTAが画面外 かつ 終端セクション未到達」の両方を満たすときだけ。
   常時表示は本文を常時隠すので禁止されている。 */
.mcta{display:none}
@media(max-width:660px){
  .mcta{display:none}
  .mcta[data-on="1"]{display:block}
  body{padding-bottom:0}
  body:has(.mcta[data-on="1"]){padding-bottom:64px}
}

/* 引用はOSの明朝で受ける。見出しWebフォントは撤回した */
.quote,.voc blockquote{font-family:var(--mincho)}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .btn:active{transform:none}
}