/* 計算24 — base（2026-09-29 全面改訂）
   ─────────────────────────────────────────────────────────────
   方針：職人の帳面。飾らず、一本の線にも理由を持たせる。
   - 色は三つだけ：瑠璃（ブランド）・朱（印鑑＝注意と必須）・常磐（逆算・安全）。
     瑠璃色は明るい青。紺は「役所の手続き」に見えるので使わない（2026-09-05 実測）。
     地は生成りの和紙、文字は墨。Tailwind の既定色は使わない。
   - 見出しと数字は BIZ UDPゴシック（モリサワ、OFL）。企業や自治体の帳票で
     使われる、誰にでも読める書体。Windows には入っているので local() を先に読む。
     それ以外の端末には、サイトで使う字だけに絞った太字（約110KB）を配る。
   - 合計は会計の作法どおり「二重線」で締める（答え・表の合計行）。
   - 和文組版：見出しは文節で折り返す（auto-phrase）、約物は詰める（palt）、
     本文は和欧間を四分空ける（text-autospace）。対応していない端末では無視される。
   - 影や光彩は使わない。奥行きはボタンの下の「一段」だけ。
   320px から横スクロールなし。絵文字は使わない。 */

@font-face{
  font-family:"K24";font-style:normal;font-weight:700;font-display:swap;
  src:local("BIZ UDPGothic Bold"),local("BIZUDPGothic-Bold"),
      url(/fonts/k24-bold-20261002.woff2) format("woff2");
}

:root{
  --paper:#f5f3ee; --sheet:#fffefb; --sunk:#f0ede6;
  --ink:#1a1d24; --ink2:#3a404c; --muted:#565c67; --dim:#666a72;
  --line:#dcd7cc; --line2:#ebe7df; --ctl:#b9b2a3;
  --ai:#1e50a2; --ai-strong:#173f82; --ai-bg:#edf2fa; --ai-line:#c4d3ec;
  --shu:#b83a2a; --shu-bg:#faeee9;
  --midori:#1f6b4a; --midori-bg:#ecf4ef; --midori-line:#bcd8c7;
  --kin:#f1dd8a;
  --on-ai:#fff;
  --r:3px;
  --pad:clamp(16px,2.8vw,26px);
  --sans:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",Meiryo,system-ui,sans-serif;
  --disp:"K24",var(--sans);
  --w:1080px;
  /* 旧名（ページ内のインライン style が参照している） */
  --card:var(--sheet); --blue:var(--ai); --blue-bg:var(--ai-bg); --red:var(--shu); --green:var(--midori);
}
html.dark{
  --paper:#121416; --sheet:#1a1d21; --sunk:#22262b;
  --ink:#ece8e0; --ink2:#d2cdc3; --muted:#aca79d; --dim:#948f86;
  --line:#34383e; --line2:#2a2e33; --ctl:#4a4f57;
  --ai:#94b6ee; --ai-strong:#bcd1f5; --ai-bg:#18223a; --ai-line:#2e4066;
  --shu:#f0937e; --shu-bg:#2c201d;
  --midori:#88caa6; --midori-bg:#17251e; --midori-line:#2e4a3b;
  --kin:rgba(241,221,138,.26);
  --on-ai:#10151b;
}
html{font-size:17px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-fs="s"]{font-size:15px}
html[data-fs="l"]{font-size:20px}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:1rem;line-height:1.85;letter-spacing:.01em;
  line-break:strict;overflow-wrap:anywhere;
  font-kerning:normal;
}
/* 和欧間：漢字・かなと欧文のあいだだけ四分空ける。数字と「年・月・円」は詰めたまま */
p,li,dd,.a,.lede{text-autospace:ideograph-alpha;hanging-punctuation:allow-end}
::selection{background:var(--kin);color:var(--ink)}
a{color:var(--ai);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--ai-strong);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ai);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--sheet);padding:.6rem 1rem;
  border:2px solid var(--ai)}
.in{max-width:var(--w);margin:0 auto;padding:0 clamp(14px,3vw,24px)}

/* 見出しと数字：文節で折る・約物を詰める */
h1,h2,h3,.logo .mark,.answer .v,.res-oferta .v{
  font-family:var(--disp);font-weight:700;
  font-feature-settings:"palt";word-break:auto-phrase;
}
h1,h2,h3{text-wrap:balance;letter-spacing:.02em}

/* ── ヘッダー ───────────────────────────────────────── */
.top{background:var(--sheet);border-bottom:1px solid var(--line)}
.top .in{display:flex;justify-content:space-between;align-items:center;gap:.75rem 1rem;
  flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem}
.logo{text-decoration:none;display:flex;align-items:center;gap:.65rem;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo .iso{width:32px;height:32px;flex:none;display:block}
.logo .wordmark{display:block;line-height:1.2}
.logo .mark{font-size:1.22rem;color:var(--ink);letter-spacing:.04em;display:block}
.logo small{font-size:.72rem;color:var(--dim);display:block;letter-spacing:.04em;margin-top:.1rem}

.tools{display:flex;gap:.5rem;align-items:center}
.fs{display:flex;border:1px solid var(--ctl);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 0 var(--ctl)}
.fs button,.theme{background:var(--sheet);color:var(--ink2);border:0;cursor:pointer;
  font-family:var(--sans);font-size:.8rem;padding:.35rem .7rem;min-height:36px;min-width:40px}
.fs button+button{border-left:1px solid var(--line)}
.fs button:hover,.theme:hover{background:var(--sunk)}
.fs button[aria-pressed="true"]{background:var(--ai);color:var(--on-ai)}
.theme{border:1px solid var(--ctl);border-radius:var(--r);box-shadow:0 1px 0 var(--ctl);
  display:inline-flex;align-items:center;gap:.35rem}
.theme svg{width:15px;height:15px;flex:none}
.theme:active,.fs button:active{transform:translateY(1px)}
@media (max-width:480px){
  .top .in{flex-wrap:nowrap}
  .logo{min-width:0}
  .logo .iso{width:32px;height:32px}
  .logo .mark{font-size:1.18rem}
  .tools{gap:.35rem;flex:none}
  .fs button{min-width:34px;padding:.3rem .45rem}
  .theme{padding:.3rem .55rem}
  .theme .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:350px){.logo small{display:none}}
/* 🔴 A+ agranda la cabecera y a 320px el nombre se partía en 「計算／24」 (auto-phrase).
   A-/A/A+ es para leer el contenido: en móvil la cabecera queda en px. */
.logo .mark{white-space:nowrap}
@media (max-width:480px){
  html[data-fs] .logo .mark{font-size:20px}
  html[data-fs] .fs button,html[data-fs] .theme{font-size:13px}
}

/* ── グローバルナビ：隠さない（価格.com・Yahoo! の作法） ─
   2026-09-29: 瑠璃の帯にした（Pablo「金融・テックらしい青を」）。日本の銀行・証券の
   サイトと同じく、主要ナビは色の帯で見せる。色は --ai と同じ瑠璃で、新しい色は足さない。 */
:root{--nav-bg:#1e50a2;--nav-ink:rgba(255,255,255,.86);--nav-on:#fff;--nav-hover:rgba(255,255,255,.1);--nav-line:rgba(255,255,255,.16)}
html.dark{--nav-bg:#17264a;--nav-ink:#c9d6f0;--nav-on:#fff;--nav-hover:rgba(255,255,255,.07);--nav-line:rgba(255,255,255,.1)}
.gnav{background:var(--nav-bg);position:relative;z-index:20}
.gnav-in{display:flex;align-items:stretch}
.gnav-in>ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.gnav-in>ul a{display:block;padding:.6rem 16px;color:var(--nav-ink);text-decoration:none;
  font-size:.88rem;position:relative}
/* 端の2つ（最初のリンクと「すべての計算」）は左右に同じ余白を持たせ、負のマージンで
   文字の位置だけ本文の端にそろえる。16px 固定なのは .in の最小の余白が16pxだから（A+ でもはみ出さない）。余白0だと hover の背景が文字や矢印に貼りついた（Pablo 29-09）。 */
.gnav-in>ul li:first-child a{padding-left:16px;margin-left:-16px}
.gnav-in>ul a:hover{color:var(--nav-on);background:var(--nav-hover);text-decoration:none}
.gnav-in>ul a[aria-current]{color:var(--nav-on);font-weight:700}
.gnav-in>ul a[aria-current]::after{content:"";position:absolute;left:16px;right:16px;bottom:0;
  height:3px;background:var(--nav-on)}
.gnav-in>ul li:first-child a[aria-current]::after{left:16px}
.gnav a:focus-visible,.gnav-todo:focus-visible{outline:2px solid #fff;outline-offset:-3px}
/* 「すべての計算」— 文字つきの補助メニュー（ハンバーガーではない） */
.gnav-todo{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;background:transparent;
  border:0;border-left:1px solid var(--nav-line);color:var(--nav-on);font:inherit;font-size:.86rem;
  font-weight:700;padding:.6rem 16px;margin-right:-16px;cursor:pointer;white-space:nowrap}
.gnav-todo:hover{background:var(--nav-hover)}
.gnav-todo svg{width:12px;height:8px;transition:transform .15s}
.gnav-todo[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu-todo{position:absolute;left:0;right:0;top:100%;background:var(--sheet);
  border-bottom:1px solid var(--line);box-shadow:0 12px 24px -12px rgba(20,30,50,.28)}
.menu-todo[hidden]{display:none}
.menu-todo .in{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.2rem 1.4rem;
  padding-top:1.2rem;padding-bottom:1.4rem}
.mt-g b{display:block;font-size:.8rem;color:var(--muted);letter-spacing:.04em;
  padding-bottom:.4rem;margin-bottom:.3rem;border-bottom:1px solid var(--line)}
.mt-g ul{list-style:none;margin:0;padding:0}
.mt-g a{display:block;padding:.34rem 0;font-size:.88rem;color:var(--ink);text-decoration:none;line-height:1.5}
.mt-g a:hover{color:var(--ai);text-decoration:underline}
.mt-g a[aria-current]{color:var(--ai);font-weight:700}
@media (max-width:900px){.menu-todo .in{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 狭い画面では横に流れる1行にする（Yahoo! JAPAN・SmartNews のタブと同じ）。ハンバーガーには隠さない。
   2026-09-30: 3列3段（145px）だと、390×844 で見出しが 260px から始まっていた。1行なら 42px。 */
@media (max-width:600px){
  .gnav .in{padding:0}
  .gnav-in{flex-direction:row}
  .gnav-in>ul{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .gnav-in>ul::-webkit-scrollbar{display:none}
  .gnav-in>ul li{flex:none}
  .gnav-in>ul a,.gnav-in>ul li:first-child a{padding:.72rem 11px;margin:0;font-size:.84rem;white-space:nowrap}
  .gnav-in>ul li:first-child a{padding-left:16px}
  .gnav-in>ul a[aria-current]::after,.gnav-in>ul li:first-child a[aria-current]::after{left:11px;right:11px}
  .gnav-in>ul li:first-child a[aria-current]::after{left:16px}
  .gnav-todo{margin:0;flex:none;padding:.72rem 12px .72rem 14px;font-size:.82rem;
    box-shadow:-14px 0 14px -10px rgba(0,0,0,.45)}
  .menu-todo{position:static;box-shadow:none}
  .menu-todo .in{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.2rem;padding:1rem 16px 1.2rem}
}
@media (max-width:360px){.menu-todo .in{grid-template-columns:minmax(0,1fr)}}

/* パンくず */
.crumb{font-size:.76rem;color:var(--dim);padding:.45rem 0 .1rem}
.page>main>.crumb{padding:10px var(--pad) 0;line-height:1.4}
.page>main>.crumb .in{padding:0;max-width:none}
.page>main>.crumb+.box{border-top:0;padding-top:10px}
.crumb a{color:var(--muted)}
.crumb .sep{margin:0 .5em;color:var(--dim)}
.crumb a{display:inline-block;padding:.2rem 0}

/* ── レイアウト：本文は一枚の用紙、脇は付箋 ────────────── */
.page{max-width:var(--w);margin:0 auto;padding:10px clamp(14px,3vw,24px) 48px;
  display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:24px;align-items:start}
.page>main,.page>.col{min-width:0}
@media (max-width:880px){.page{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.page{padding-left:0;padding-right:0;gap:16px}}

.page>main{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r)}
@media (max-width:600px){.page>main{border-left:0;border-right:0;border-radius:0}}
.box{padding:var(--pad);margin:0}
.page>main>.box+.box,.page>main>*+.box{border-top:1px solid var(--line2)}
.page>main>.answer,.page>main>.callout,.page>main>.fukidashi,
.page>main>.aviso-seguro,.page>main>.hikaku,.page>main>.ad{margin:0 var(--pad) var(--pad)}
.page>main>.box+.fukidashi{margin-top:0}

h1{font-size:clamp(1.28rem,3.8vw,1.5rem);line-height:1.42;margin:0 0 .4rem;color:var(--ink)}
h1 .tag{color:var(--shu)}
h2{font-size:1.14rem;line-height:1.5;margin:0 0 1.1rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--line);position:relative;color:var(--ink)}
h2::after{content:"";position:absolute;left:0;bottom:-1px;width:2.4rem;height:2px;background:var(--ai)}
h3{font-size:1rem;margin:1.6rem 0 .55rem;color:var(--ink)}
p{margin:0 0 .9rem}
/* 長いURLなど、どうしても1行に入らない語の保険。break-word は入りきらないとき
   だけ折るので、ふつうの行は日本語の禁則どおりのまま。
   ⚠️ 計測メモ: 「　／　」の全角スペース（U+3000）は行末にぶら下がるため、
   scrollWidth や Range の矩形が数px大きく出る。見た目の崩れではない。 */
.meta,.lede,.answer .s,.fukidashi,.disclaimer{overflow-wrap:break-word}
.meta{font-size:.76rem;color:var(--dim);margin-bottom:.55rem;font-variant-numeric:tabular-nums}
.lede{color:var(--ink2);font-size:.93rem;margin:.4rem 0 0}

/* ── 答え：給与明細の「差引支給額」。合計は二重線で締める ── */
.answer{background:var(--ai-bg);border:1px solid var(--ai-line);border-radius:var(--r);
  padding:clamp(18px,3.8vw,28px)}
.answer .k{font-size:.82rem;color:var(--muted);letter-spacing:.04em;font-weight:700}
.answer .v{color:var(--ai-strong);font-size:clamp(2.35rem,9.5vw,3.3rem);line-height:1.08;
  letter-spacing:-.005em;font-variant-numeric:tabular-nums;display:inline-block;
  margin:.35rem 0 .2rem;padding-bottom:.14em;border-bottom:4px double currentColor}
.answer .v small{font-size:.38em;font-family:var(--disp);margin-left:.18em;color:var(--ink2);
  letter-spacing:.02em}
/* 数字ではなく文で答えるとき（求人の比較）は一段小さく */
.answer .v.frase{font-size:clamp(1.4rem,5vw,1.85rem);line-height:1.4;letter-spacing:.01em}
.answer .s{font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums;margin:.75rem 0 0}
.answer .s b{color:var(--ink)}
/* 逆方向の答え（手取り→額面）。同じ数字の別の意味なので、色で分ける。 */
.answer.alt{background:var(--midori-bg);border-color:var(--midori-line)}
.answer.alt .v{color:var(--midori)}
.page>main>.answer+.answer{margin-top:calc(var(--pad) * -.5)}

/* チェックボックス付きのラベル（入力欄の中で使う） */
.chk{display:inline-flex;align-items:center;gap:.5em;cursor:pointer}
.chk input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--ai)}

/* お知らせ */
.news{background:var(--sunk);border-radius:var(--r);padding:.9rem 1.05rem;font-size:.85rem}
.news dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem}
.news dt{color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.news dd{margin:0;color:var(--ink2)}

/* ── 入力：帳票の升目 ─────────────────────────────── */
.form{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:600px){.form{grid-template-columns:minmax(0,1fr)}}
.form dt,.form dd{background:var(--sheet);padding:.8rem .95rem;margin:0;
  display:flex;align-items:center;gap:.5rem;font-size:.9rem;flex-wrap:wrap}
.form dt{background:var(--sunk);color:var(--ink2);font-weight:700;white-space:nowrap}
/* 🔴 この上書きは nowrap の**あとに**書くこと。前に置くと同じ詳細度で負ける。
   320pxでは日本語の長いラベルが列からはみ出て、文字が切れる。 */
@media (max-width:600px){.form dt{white-space:normal;padding-top:.55rem;padding-bottom:.55rem}}
.req,.opt{font-style:normal;font-size:.72rem;padding:.1em .5em;border-radius:2px;font-weight:700;letter-spacing:.04em}
.req{background:var(--shu);color:#fff}
html.dark .req{color:#1a1d21}
.opt{border:1px solid var(--ctl);color:var(--muted)}
input[type=number],select{background:var(--sheet);color:var(--ink);border:1px solid var(--ctl);
  border-radius:var(--r);padding:.5rem .65rem;font-family:var(--sans);font-size:1rem;
  font-variant-numeric:tabular-nums;max-width:100%;min-height:46px}
/* 数字の上下矢印は万円単位の入力では役に立たないので出さない */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{width:9.5rem;text-align:right;font-weight:700;font-size:1.08rem}
input[type=number]:hover,select:hover{border-color:var(--muted)}
input[type=number]:focus,select:focus{border-color:var(--ai);outline:0;
  box-shadow:0 0 0 3px var(--ai-bg),0 0 0 4px var(--ai-line)}
/* 🔴 select は flex アイテムなので min-width:auto だと『いちばん長い選択肢』の
   幅で下限が決まり、320px で列からはみ出す。min-width:0 で縮められるようにする。 */
select{width:100%;max-width:30rem;min-width:0;-webkit-appearance:none;appearance:none;
  padding-right:2.2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23565c67' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:11px 8px}
html.dark select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23aca79d' stroke-width='1.6'/%3E%3C/svg%3E")}
/* 線は4pxのまま、つまめる高さは28px（指で動かせるように） */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;border-radius:2px;
  background:linear-gradient(var(--line),var(--line)) center/100% 4px no-repeat;margin:1rem 0 0;cursor:pointer}
input[type=range]::-moz-range-track{background:transparent}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--sheet);border:2px solid var(--ai);box-shadow:0 1px 0 var(--ctl)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:var(--sheet);border:2px solid var(--ai)}
input[type=range]:focus-visible{outline-offset:6px}

/* ── ボタン：平らな面と、下に一段だけの厚み ─────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.chips button,.chips a,.share button,.share a{font-family:var(--sans);font-size:.84rem;
  color:var(--ink2);cursor:pointer;background:var(--sheet);border:1px solid var(--ctl);
  border-radius:var(--r);box-shadow:0 1px 0 var(--ctl);padding:.48em .9em;
  text-decoration:none;font-variant-numeric:tabular-nums;min-height:40px;
  display:inline-flex;align-items:center;gap:.4rem;line-height:1.4}
.chips button:hover,.chips a:hover,.share button:hover,.share a:hover{
  border-color:var(--ai);color:var(--ai);text-decoration:none}
.chips button:active,.chips a:active,.share button:active,.share a:active{
  transform:translateY(1px);box-shadow:none}
.chips button[aria-pressed="true"]{background:var(--ai);border-color:var(--ai-strong);
  color:var(--on-ai);box-shadow:0 1px 0 var(--ai-strong)}
html.dark .chips button[aria-pressed="true"]{border-color:var(--ai)}

/* ── 注記：※の小さな文字 ──────────────────────────── */
.note{font-size:.82rem;color:var(--muted);line-height:1.95;margin:1.1rem 0 0;
  border-top:1px dashed var(--line);padding:.85rem 0 0}
.note b{color:var(--shu);font-weight:700}
.note p{margin:0 0 .4rem}
.note p:last-child{margin:0}

/* ── 表：横罫だけ。合計行は二重線 ─────────────────────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:320px}
th,td{border-bottom:1px solid var(--line2);padding:.66rem .75rem;text-align:left;vertical-align:top}
thead th{background:var(--sunk);color:var(--muted);font-weight:700;font-size:.78rem;
  white-space:nowrap;border-bottom:1px solid var(--ctl);letter-spacing:.03em}
tbody th{font-weight:700;color:var(--ink2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td .r{display:block;font-size:.76rem;color:var(--dim);margin-top:.2em}
@media (hover:hover){tbody tr:hover>td,tbody tr:hover>th{background:var(--ai-bg)}}
tr.tot td,tr.tot th{border-top:3px double var(--ink2);border-bottom:0;font-weight:700;
  background:transparent;color:var(--ink)}
td.dash{color:var(--dim);text-align:center}

/* トップの簡易計算 */
.quick h2{margin-bottom:1.2rem}

/* バッジ・影響の表示 */
.badge,.imp{display:inline-block;font-size:.72rem;padding:.12em .55em;white-space:nowrap;
  border:1px solid currentColor;border-radius:2px;line-height:1.6}
.badge.shakai{color:var(--shu)}
.badge.zeikin{color:var(--ai)}
.imp.up{color:var(--shu)}
.imp.down{color:var(--midori)}
.imp.flat{color:var(--dim)}
.nuevo{display:inline-block;background:var(--shu);color:#fff;font-size:.72rem;border-radius:2px;
  padding:.1em .45em;margin-left:.5em;vertical-align:.1em;font-weight:700}
html.dark .nuevo{color:#1a1d21}
.cambio{display:block;font-size:.76rem;color:var(--shu);margin-top:.3em}
.kaisei td:first-child{white-space:nowrap}

/* ── よくある質問 ──────────────────────────────────── */
.faq details{border-bottom:1px solid var(--line2)}
.faq details:first-child{border-top:1px solid var(--line2)}
.faq summary{cursor:pointer;font-weight:700;padding:.85rem 2rem .85rem 2rem;font-size:.94rem;
  list-style:none;position:relative;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:.1rem;top:.85rem;
  font-family:var(--disp);color:var(--ai)}
.faq summary::after{content:"";position:absolute;right:.4rem;top:1.25rem;width:.5rem;height:.5rem;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.45rem}
.faq summary:hover{color:var(--ai)}
.faq .a{padding:0 0 1rem 2rem;color:var(--ink2);font-size:.9rem}

/* ── 出典 ─────────────────────────────────────────── */
.source dl{margin:0 0 1rem;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:.45rem 1.2rem;font-size:.85rem}
.source dt{color:var(--dim);white-space:nowrap}
.source dd{margin:0;min-width:0}
/* 🔴 nowrap + 「ハローワークインターネットサービス」 のような長い名前 + 文字サイズA+ で
   320pxの画面をはみ出す（/shitsugyo-teate/ が351pxになっていた）。
   狭い画面では1カラムにして折り返しを許す。この上書きは nowrap の**あとに**書くこと。 */
@media (max-width:600px){
  .source dl{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .source dt{white-space:normal;margin-top:.55rem}
  .source dt:first-child{margin-top:0}
}
.disclaimer{font-size:.8rem;color:var(--muted);border-top:1px solid var(--line2);
  padding-top:.85rem;margin:0}

/* 共有ボタン（形は .chips と共通） */
.share{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.share [data-share="copy"][data-estado="ok"]{border-color:var(--midori);color:var(--midori)}
.share [data-share="copy"][data-estado="error"]{border-color:var(--shu);color:var(--shu)}

/* 広告枠（CLS対策：高さを先に確保する）
   広告枠は未使用のあいだ非表示。空の「広告」箱を見せない。
   SITIO.adsenseActivo を true にしたら body に .ads-on が付いて表示される。 */
body:not(.ads-on) .ad{display:none}
.ad{min-height:100px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line);color:var(--dim);font-size:.72rem;background:var(--sheet)}
.ad[data-slot]{min-height:280px}

/* ── サイドバー：本文とは別の、小さな札 ─────────────── */
.col .box{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin-bottom:16px}
@media (max-width:600px){.col{padding:0 14px}}
.col h2{font-size:.95rem;margin-bottom:.8rem;padding-bottom:.5rem}
.col h2::after{width:1.6rem}
.slist{list-style:none;margin:0;padding:0;font-size:.87rem}
.slist li{border-bottom:1px solid var(--line2);padding:.6rem 0;line-height:1.65}
.slist li:last-child{border-bottom:0;padding-bottom:0}
.rank{counter-reset:r}
.rank li{counter-increment:r;display:grid;grid-template-columns:1.5rem minmax(0,1fr);
  column-gap:.4rem;align-items:baseline}
.rank li::before{content:counter(r);font-family:var(--disp);color:var(--ai);
  font-variant-numeric:tabular-nums;font-size:.95rem}
.slist a{text-decoration:none}
.slist a:hover{text-decoration:underline}

/* ── フッター ─────────────────────────────────────── */
/* ページの先頭へ（2026-09-29, Pablo「subir」）。日本の公的・金融サイトの定番。
   600px 以上スクロールしたら出す。狭い画面では矢印だけの丸ボタン（44px）。 */
.a-top{position:fixed;right:16px;bottom:16px;z-index:30;display:inline-flex;align-items:center;gap:.4rem;
  background:var(--nav-bg,#1e50a2);color:#fff;border:0;border-radius:22px;min-height:44px;
  padding:0 1rem 0 .85rem;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  box-shadow:0 2px 8px rgba(20,30,50,.25)}
.a-top[hidden]{display:none}
.a-top svg{width:12px;height:8px;flex:none}
.a-top:hover{filter:brightness(1.12)}
.a-top:focus-visible{outline:2px solid var(--ai);outline-offset:3px}
@media (max-width:600px){
  .a-top{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  .a-top span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.foot{border-top:1px solid var(--line);background:var(--sunk);margin-top:8px}
.foot .in{padding-top:2rem;padding-bottom:1.8rem}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.6rem 2rem;font-size:.84rem}
@media (max-width:700px){.foot .cols{grid-template-columns:1fr}}
.foot b{display:block;margin-bottom:.55rem;font-family:var(--disp);color:var(--ink)}
.foot p{color:var(--muted);margin:0}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:.22rem 0}
.foot a{color:var(--ink2)}
.foot a:hover{color:var(--ai)}
.copy{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.76rem;
  color:var(--dim);font-variant-numeric:tabular-nums}
/* 安全性の明示（フィッシング誤判定への対策） */
.foot .seguro{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted)}

/* 印刷：1枚の帳票。画面の配色に関係なく白地・黒文字。
   出すのは「表題・入力した条件・結果・内訳・注記・出典」だけ。
   🔴 :root の変数は html より詳細度が高いので、上書きも :root で書くこと。 */
@page{size:A4 portrait;margin:14mm 14mm 16mm}
@media print{
  :root,:root.dark{--paper:#fff;--sheet:#fff;--sunk:#f3f3f3;--ink:#000;--ink2:#111;--muted:#333;--dim:#555;
    --line:#999;--line2:#bbb;--ctl:#777;--ai:#000;--ai-strong:#000;--ai-bg:#fff;--ai-line:#000;
    --midori:#000;--midori-bg:#fff;--midori-line:#000;--shu:#000;--shu-bg:#fff;--kin:#fff;font-size:10pt}
  /* anti-flicker（<head> のインライン）と同じ詳細度で、後から読むこちらが勝つ */
  html:not(.dark),html:not(.dark) body,html.dark,html.dark body{background-color:#fff!important;color:#000!important}
  body{background:#fff!important;color:#000!important}
  .top{border-bottom:1.5pt solid #000}
  .top .tools,.gnav,.menu-todo,.a-top,.crumb,.foot,.ad,.share,.col,.chips,input[type=range],.faq,
  .aviso-seguro,.news,.fukidashi,.fuera,.skip{display:none!important}
  /* リンク集だけの枠（早見表への案内・関連ツール・よくある質問）は紙では意味がない */
  .page>main>.box:not(:first-child):not(.source):not(:has(table)):not(:has(.form)){display:none!important}
  .page{display:block;padding:0}
  .page>main{border:0}
  .box{padding:6pt 0;break-inside:avoid}
  .page>main>.box+.box,.page>main>*+.box{border-top:.5pt solid #999}
  .page>main>.answer,.page>main>.callout,.page>main>.hikaku,.page>main>.calc{margin:0 0 6pt}
  .page>main>.calc{display:block}
  .calc-in>.box{border:0;padding:6pt 0}
  .answer{border:1.5pt solid #000;background:#fff}
  .answer .v{font-size:26pt}
  h1{font-size:15pt} h2{font-size:11.5pt;margin-bottom:6pt} h2::after{display:none}
  table{font-size:9pt} th,td{padding:3pt 5pt}
  .tw{overflow:visible}
  tbody tr:hover>td,tbody tr:hover>th{background:none}
  input[type=number],select{border:0;border-bottom:.5pt solid #000;border-radius:0;
    background:none;min-height:0;padding:0 2pt;font-size:10pt;box-shadow:none}
  /* 🔴 html.dark select（矢印の画像）は詳細度が高く、ここの none に勝っていた。
     background:none で repeat に戻るので、暗い配色で印刷すると矢印が波線のように並んだ。 */
  select,html.dark select{background-image:none!important;padding-right:0}
  .req,.opt{display:none}
  .mk{background:none;text-decoration:underline}
  a{color:#000;text-decoration:none}
  .print-only{display:block!important}
  .print-pie{margin-top:10pt;padding-top:4pt;border-top:.5pt solid #000;font-size:8pt;color:#333}
}
.print-only{display:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ───────── 日本の実用サイトの視覚言語 ─────────
   飾りではなく、情報を伝えるための記号。
   絵文字は使わない（Pabloの規則）。◎○△× ※ ▼ は絵文字ではない。 */

/* 蛍光ペン：ここが要点、という印 */
.mk{background:linear-gradient(transparent 60%, var(--kin) 60%);font-weight:700;padding:0 .1em}
html.dark .mk{color:var(--ink)}

/* ポイント／注意：地の色で区切る。左の太線は使わない */
.callout{background:var(--sunk);border-radius:var(--r);padding:1.05rem 1.2rem}
.callout h3,.callout h2.in-callout{margin:0 0 .5rem;font-size:1rem;color:var(--ai-strong);padding:0;border:0}
.callout h2.in-callout::after{display:none}
.callout p:last-child{margin:0}
.callout.warn{background:var(--shu-bg)}
.callout.warn h3,.callout.warn h2.in-callout{color:var(--shu)}
.callout ul{margin:.4rem 0 0;padding-left:1.25em}
.callout li{margin:.3rem 0}
.callout li::marker{color:var(--dim)}

/* 比較表の記号 */
.mark{font-weight:700;font-size:1.1em;line-height:1}
.mark.a{color:var(--shu)}      /* ◎ 最適 */
.mark.b{color:var(--ai)}       /* ○ 可 */
.mark.c{color:var(--dim)}      /* △ 条件つき */
.mark.d{color:var(--dim);opacity:.7} /* × 不可 */

/* 割合バー：手取りと控除の比率。細く、区切りは余白で */
.bar-wrap{margin:1.1rem 0 0}
.bar-line{display:flex;gap:2px;height:10px}
.bar-line i{display:block;height:100%;border-radius:2px;min-width:2px}
.bar-wrap .b-neto{background:var(--ai)}
.bar-wrap .b-shakai{background:#6a8fcf}
.bar-wrap .b-zei{background:#a2b8e2}
.bar-wrap .b-jumin{background:#cfdaef}
html.dark .bar-wrap .b-shakai{background:#5877b3}
html.dark .bar-wrap .b-zei{background:#3e5588}
html.dark .bar-wrap .b-jumin{background:#2c3b5e}
.bar-key{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;margin-top:.6rem;font-size:.78rem;
  color:var(--muted);font-variant-numeric:tabular-nums}
.bar-key span{display:flex;align-items:center;gap:.4rem}
.bar-key i{width:10px;height:10px;display:block;flex:none;border-radius:2px}

/* 吹き出し：読者の疑問をそのまま置く */
.fukidashi{position:relative;background:var(--sheet);border:1px solid var(--line);
  border-radius:var(--r);padding:.95rem 1.1rem;font-size:.9rem}
.fukidashi::before{content:"";position:absolute;top:-8px;left:26px;width:14px;height:14px;
  background:var(--sheet);border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg)}
.fukidashi b{color:var(--ai-strong)}

/* 見出しの通し番号：構造を見せる（番号札は使わない） */
h2 .no{font-family:var(--disp);color:var(--ai);margin-right:.55em;font-variant-numeric:tabular-nums}

/* 2つの求人の比較：列が狭いので、入力はラベルの下に置く */
.col-oferta .form{grid-template-columns:minmax(0,1fr)}
.col-oferta .form dt{white-space:normal;padding-top:.55rem;padding-bottom:.55rem}
.col-oferta select{max-width:100%}
.hikaku{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){.hikaku{grid-template-columns:1fr}}
.col-oferta{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(16px,3vw,22px)}
.col-oferta h3,.col-oferta h2.in-oferta{margin:0 0 .9rem;font-size:1rem;color:var(--ai-strong);
  border-bottom:1px solid var(--line);padding-bottom:.5rem}
.col-oferta h2.in-oferta::after{display:none}
.res-oferta{margin-top:1.1rem;padding-top:.95rem;border-top:1px solid var(--line2)}
.res-oferta .k{font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:.04em}
.res-oferta .v{color:var(--ai-strong);font-size:clamp(1.8rem,7vw,2.3rem);line-height:1.15;
  font-variant-numeric:tabular-nums;display:inline-block;padding-bottom:.1em;
  border-bottom:4px double currentColor}
.res-oferta .v small{font-size:.4em;margin-left:.2em;color:var(--ink2)}
.res-oferta .s{font-size:.8rem;color:var(--muted);margin:.45rem 0 0;font-variant-numeric:tabular-nums}

/* 都道府県の表：差の色分け */
.tofu td .r.green{color:var(--midori)}
.tofu td .r.red{color:var(--shu)}
.tofu td .r.dim{color:var(--dim)}
.tofu td:first-child{white-space:nowrap}

/* 入力欄のそばに置く安全性の明示（フィッシング誤判定対策） */
.aviso-seguro{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.2rem .8rem;
  border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;
  font-size:.83rem;line-height:1.9;color:var(--muted)}
.aviso-seguro svg{width:20px;height:20px;color:var(--midori);margin-top:.2rem;grid-row:1 / span 3}
.aviso-seguro p{margin:0 0 .45rem;grid-column:2}
.aviso-seguro p:last-child{margin:0}
.aviso-seguro b{color:var(--ink)}

/* ツールの升目（Yahoo!・価格.comの作法） */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:16px}
.grid a{background:var(--sheet);padding:.9rem 1rem;text-decoration:none;color:var(--ink);
  display:block;min-height:64px}
.grid a:hover{background:var(--ai-bg)}
.grid b{display:block;color:var(--ai);font-size:.95rem;line-height:1.5}
.grid span{display:block;font-size:.76rem;color:var(--dim);line-height:1.6}

/* 入力の範囲外：値は範囲の端で計算し、欄の下に知らせる（src/lib/entrada.mjs） */
.fuera{flex-basis:100%;font-size:.78rem;color:var(--shu);line-height:1.5}
.fuera[hidden]{display:none}
input[aria-invalid="true"]{border-color:var(--shu)}

/* ── 計算機：入力と答えをひとつの単位に（2026-09-30、Pablo「上の空きが多い」「一画面で」） ──
   layout.mjs → agruparCalculadora() が、生成後の HTML で .box(.form) と .answer を .calc に包む。
   1208×570（Pablo の画面）で数字と最初の入力欄が見える。880px 未満では答えを先に、入力をその下に。 */
.page>main>.calc{margin:0 var(--pad) var(--pad);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:16px;align-items:start}
/* 入力の枠は帳票の升目（.form）だけ。外にもう一枚の枠があると「箱の中の箱の中の箱」になり、携帯では入力欄が左右32pxずつ痩せた。 */
.calc-in>.box{padding:0;border:0;background:none}
.calc-in>.box h2{font-size:1rem;margin-bottom:.8rem;padding-bottom:.45rem}
.calc-in>.box h3{margin-top:1.1rem}
/* 2列の計算機の中では、ラベルを入力欄の上に置く（携帯と同じ）。横に並べると「年収（額面・賞与込み）必須」の
   ような長いラベルが幅を取り、入力欄が1文字分しか残らなかった（2026-10-01、/shotokuzei/ の実測）。 */
.calc-in .form{grid-template-columns:minmax(0,1fr)}
.calc-in .form dt{white-space:normal;padding-top:.5rem;padding-bottom:.5rem}
.calc-in .form dd{padding-top:.6rem;padding-bottom:.6rem}
.calc-in .share{margin-top:.9rem}
.calc-out{display:grid;gap:12px;align-content:start}
.calc-out .answer{margin:0}
.calc-out .answer .v{font-size:clamp(2.1rem,6.5vw,2.7rem)}
/* 入力が長いページ（手取り計算は7項目）では、答えを画面に残したまま入力できるようにする */
@media (min-width:881px){.calc-out{position:sticky;top:12px}}
@media print{.calc-out{position:static}}
@media (max-width:880px){
  .page>main>.calc{grid-template-columns:minmax(0,1fr)}
  .calc-out{order:-1}   /* 数字を先に：開いた瞬間に見え、入力中はキーボードの上に残る */
}
/* 見出しの箱は詰める：先頭の余白は規則どおり（32px 以内） */
.page>main>.box:first-child,.page>main>.crumb+.box{padding-bottom:calc(var(--pad) * .6)}
.page>main>.box:first-child .lede,.page>main>.crumb+.box .lede{margin-bottom:0}
.page>main>.calc+.box .news{margin:0 0 .4rem}

/* ── ガイドの部品（2026-09-30） ── */
.steps{margin:.4rem 0 0;padding-left:1.6em;counter-reset:none}
.steps li{margin:.5rem 0;line-height:1.75}
.steps li::marker{color:var(--ai);font-weight:700;font-variant-numeric:tabular-nums}
.defs{margin:0;display:grid;gap:.15rem}
.defs dt{font-weight:700;color:var(--ink);margin-top:.9rem;padding-left:.75rem;border-left:3px solid var(--ai)}
.defs dt:first-child{margin-top:0}
.defs dd{margin:.25rem 0 0;color:var(--ink2);line-height:1.8}
.hint{font-size:.84rem;color:var(--muted);margin:.7rem 0 0;line-height:1.7}
.pasos td:first-child{color:var(--ink2)}
.pasos tr.tot td{border-top:2px solid var(--line)}
tr.mid td{background:var(--sunk);font-weight:700}
.hayami th .r{display:block;font-weight:400;color:var(--muted);font-size:.72rem;margin-top:.15rem}
.hayami td:first-child .r{display:block;font-size:.72rem;color:var(--muted);font-weight:400}

/* ════════ 2026-10-01 監査：仕上げ ════════════════════════════════════
   数字で測ったものだけを直した（scratchpad の auditor-k24.mjs・tablas.mjs）。 */

/* ① 日本語の折り返し。短いラベルは文節で折る（「月給から手 / 取り」「控 / 除率」と切れていた）。
   本文は1〜2字だけの最終行を避ける（「無 / 料。」）。対応していない端末は従来どおり。 */
th,td,dt,dd,label,summary,.answer .k,.res-oferta .k,.chips a,.chips button,.slist li,.grid b,.grid span,
.crumb,.mt-g a,.foot li,.badge,.imp,.mokuji a,.it{word-break:auto-phrase}
p,li,dd,.a{text-wrap:pretty}

/* ② 補足行は項目ごとに並べる（layout.mjs → pulir() が「　／　」を項目に分ける） */
.piezas{display:flex;flex-wrap:wrap;column-gap:1.3em;row-gap:.1rem}
.piezas .it{min-width:0}

/* ③ 強調する行（選んだ金額・例）。二重線は合計だけに使う */
tr.actual>td,tr.actual>th{background:var(--ai-bg);color:var(--ink);font-weight:700}
tr.actual>td:first-child,tr.actual>th:first-child{box-shadow:inset 3px 0 0 var(--ai)}
@media print{tr.actual>td,tr.actual>th{background:none;box-shadow:none}}

/* ④ 表：文字の列は一定の幅より細くしない（1字ずつ縦に並んでいた）。入りきらなければ横にスクロール */
td:not(.n),th:not(.n){min-width:5.5em}
.tw-hint{font-size:.76rem;color:var(--dim);margin:.15rem 0 .3rem;text-align:right;line-height:1.5}
.tw-hint::after{content:" →";letter-spacing:0}
.tw-hint[hidden]{display:none}

/* ⑤ 携帯では、説明の長い2列の表は縦に積む */
@media (max-width:600px){
  .apilar,.apilar tbody,.apilar tr,.apilar td{display:block}
  .apilar{min-width:0}
  .apilar tr{border-bottom:1px solid var(--line2);padding:.75rem .75rem}
  .apilar td{border:0;padding:0;min-width:0}
  .apilar td+td{margin-top:.25rem}
  /* 制度改正カレンダー：日付と影響を1行目に、内容を2行目に */
  .kaisei{min-width:0}
  .kaisei thead{display:none}
  .kaisei,.kaisei tbody{display:block}
  .kaisei tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:.7rem;align-items:start;
    padding:.8rem .75rem;border-bottom:1px solid var(--line2)}
  .kaisei td,.kaisei tr.actual td{border:0;padding:0;min-width:0;background:transparent;box-shadow:none}
  .kaisei td:nth-child(1){grid-column:1;grid-row:1}
  .kaisei td:nth-child(3){grid-column:3;grid-row:1;text-align:right}
  .kaisei td:nth-child(2){grid-column:1 / -1;grid-row:2;margin-top:.35rem;font-weight:400}
  .kaisei tr.actual{background:var(--ai-bg);box-shadow:inset 3px 0 0 var(--ai)}
}

/* ⑥ 金額の一覧は「升目」にする（ボタンが14〜22個並ぶ壁だった）。帳票の .form と同じ細い罫 */
.chips:has(>a:nth-child(7)){display:grid;grid-template-columns:repeat(auto-fill,minmax(6.6rem,1fr));gap:0;padding:0 1px 1px 0}
.chips:has(>a:nth-child(7))>a{margin:0 -1px -1px 0;border-color:var(--line);border-radius:0;box-shadow:none;
  justify-content:center;text-align:center;min-height:44px;padding:.45em .35em;color:var(--ai)}
.chips:has(>a:nth-child(7))>a:hover{position:relative;z-index:1;background:var(--ai-bg);border-color:var(--ai);color:var(--ai-strong)}
.chips:has(>a:nth-child(7))>a:active{transform:none}
.chips:has(>a:nth-child(7))>a[aria-current]{position:relative;z-index:1;background:var(--ai);border-color:var(--ai);color:var(--on-ai);font-weight:700}

/* ⑦ 指で押せる大きさ（携帯）。WCAG 2.2 の 24px を下回っていた所と、主な操作は 44px */
@media (max-width:600px){
  .chips a,.chips button,.share a,.share button{min-height:44px}
  .fs button,.theme{min-height:40px}
}

/* ⑧ このページの目次（脇の欄・広い画面だけ・読んでいる位置に追従） */
.mokuji{display:none}
.mokuji ol{list-style:none;margin:0;padding:0;font-size:.84rem}
.mokuji a{display:block;padding:.36rem 0 .36rem .8rem;border-left:2px solid var(--line2);color:var(--ink2);
  text-decoration:none;line-height:1.55}
.mokuji a:hover{color:var(--ai);border-left-color:var(--ai-line)}
.mokuji a[aria-current]{color:var(--ai);border-left-color:var(--ai);font-weight:700}
h2[id^="midashi-"]{scroll-margin-top:16px}
@media (min-width:881px){
  .page>.col{align-self:stretch}
  .mokuji{display:block;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
}

/* ⑨ 脚注：サイトマップ */
.foot-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:.8rem 2.4rem;font-size:.84rem;align-items:end}
.foot-top p{color:var(--muted);margin:0}
.foot .foot-top .seguro{margin:0;padding:0;border:0}
.foot-map{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.4rem 1.5rem;margin-top:1.5rem;
  padding-top:1.4rem;border-top:1px solid var(--line);font-size:.8rem}
.foot-map b{font-size:.84rem;margin-bottom:.45rem}
.foot-map li{padding:.2rem 0;line-height:1.55}
@media (max-width:900px){.foot-map{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.foot-top{grid-template-columns:minmax(0,1fr)}.foot-map{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ⑩ 注記のすぐあとの見出しが貼りついていた（/about/） */
.note+h2,.note+h3{margin-top:1.8rem}

/* ⑪ .fichas：説明の長い表は、携帯ではカードのように縦に積む。各データの上に列の見出し（data-l）を出す。
   layout.mjs → pulir() が thead から data-l を付ける。広い画面では普通の表のまま。 */
th .r{display:block;font-weight:400;font-size:.72rem;color:var(--dim);letter-spacing:0;margin-top:.1rem}
@media (max-width:600px){
  .fichas,.fichas tbody,.fichas tr,.fichas td{display:block}
  .fichas{min-width:0}
  .fichas thead{display:none}
  .fichas tr{padding:.8rem .75rem;border-bottom:1px solid var(--line2)}
  .fichas td,.fichas td.n{border:0;padding:0;min-width:0;text-align:left;white-space:normal;background:transparent;box-shadow:none}
  .fichas td:first-child{font-weight:700;color:var(--ink)}
  .fichas td+td{margin-top:.4rem}
  .fichas td[data-l]::before{content:attr(data-l);display:block;font-size:.74rem;line-height:1.5;color:var(--dim);font-weight:400}
  .fichas tr.actual{background:var(--ai-bg);box-shadow:inset 3px 0 0 var(--ai)}
  .fichas tr.tot{border-top:3px double var(--ink2)}
  @media (hover:hover){.fichas tbody tr:hover>td{background:transparent}}
}

/* ⑫ 細部：空のセルはカードに出さない／合計行の二重線はカードの上に1本だけ／「どのツール」表の1列目は狭めない */
@media (max-width:600px){
  .fichas td:empty{display:none}
  .fichas tr.tot td,.fichas tr.mid td{border:0;background:transparent}
  .fichas tr.mid{background:var(--sunk)}
}
.matriz td:first-child{min-width:8.5em}
/* ⑬ En escritorio, la primera columna de las fichas no se parte a mitad de palabra（「厚生年金保険 / 料」） */
@media (min-width:601px){.fichas td:first-child{min-width:9em}}
@media print{.tw-hint{display:none!important}}