/* ============================================================
   経費判定舎 ― トンマナ「空港サイン」 v2
   白地・紺文字・黄のアクセント。行き先を示すことに全振りする。
   v2 の方針：太さで階層を作らない。書体・サイズ・余白で作る。
   - 太さは 400 / 500 / 600 / 700 の4段だけ。900 は使わない
   - 罫線は水平の細線だけ。枠で囲まない
   - 黄は文字色に使わない。帯・バッジ・CTAの地だけ
   - ダークモードは「夜間の照明付きサイン」＝濃紺地
   ============================================================ */
:root{
  --paper:#ffffff; --card:#ffffff; --surface:#f5f7f9; --surface-2:#eceff3;
  --ink:#0f2536; --ink2:#3f5b72; --ink3:#5c7385;
  --rule:#e3e8ed; --rule-2:#cbd4dc;
  --navy:#0d2b3e; --navy-ink:#0d2b3e;
  --yellow:#ffc400; --yellow-hover:#f0b400; --yellow-soft:#fff6d6;
  --go:#0a7a5a;
  --stop:#b8392a; --stop-soft:#fbebe8;
  --head-bg:#0d2b3e; --head-fg:#ffffff; --head-sub:#a9c4d4;
  --on-yellow:#0f2536;
  --radius:12px; --radius-s:8px;
  --shadow:0 1px 2px rgba(15,37,54,.06), 0 6px 20px rgba(15,37,54,.06);
  --sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","BIZ UDPGothic","Yu Gothic UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0b1a26; --card:#10232f; --surface:#132a38; --surface-2:#183344;
    --ink:#e9f0f5; --ink2:#b3c6d4; --ink3:#86a0b3;
    --rule:#22394a; --rule-2:#2f4b60;
    --navy:#a9c4d4; --navy-ink:#e9f0f5;
    --yellow-soft:#2e2608;
    --go:#5fcaa3;
    --stop:#f2917c; --stop-soft:#3a1d17;
    --head-bg:#071520; --head-fg:#ffffff; --head-sub:#a9c4d4;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --paper:#0b1a26; --card:#10232f; --surface:#132a38; --surface-2:#183344;
  --ink:#e9f0f5; --ink2:#b3c6d4; --ink3:#86a0b3;
  --rule:#22394a; --rule-2:#2f4b60;
  --navy:#a9c4d4; --navy-ink:#e9f0f5;
  --yellow-soft:#2e2608;
  --go:#5fcaa3;
  --stop:#f2917c; --stop-soft:#3a1d17;
  --head-bg:#071520; --head-fg:#ffffff; --head-sub:#a9c4d4;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.75; font-weight:400;
  font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 24px}

/* ── ヘッダー ― 白地・小さな黄のマーク・ヘアライン ── */
.site-head{background:var(--paper); border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex; align-items:center; gap:14px; padding-top:18px; padding-bottom:18px; flex-wrap:wrap}
.brand{display:inline-flex; align-items:center; font-size:16px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none}
.brand::before{content:""; width:11px; height:11px; background:var(--yellow); border-radius:3px; flex:none; margin-right:10px}
.brand span{color:var(--ink)}
.tagline{font-size:12.5px; color:var(--ink3); font-weight:400}

/* ── 広告表示 ── */
.disclosure{
  margin:20px 0 0; padding:10px 14px; border:1px solid var(--rule-2); border-radius:var(--radius-s);
  background:var(--card); color:var(--ink2); font-size:12.5px; line-height:1.7;
}
.disclosure b{color:var(--ink); font-weight:700}

/* ── 見出し ── */
h1{font-size:30px; line-height:1.35; margin:32px 0 10px; font-weight:700; letter-spacing:-.02em; text-wrap:balance}
.sub{font-size:16px; color:var(--ink2); margin:0 0 6px; line-height:1.7; font-weight:400}
.meta{font-size:12.5px; color:var(--ink3); margin:20px 0 0; padding-top:14px; border-top:1px solid var(--rule)}
h2{
  font-size:21px; margin:60px 0 16px; font-weight:700; letter-spacing:-.015em; line-height:1.4;
  padding-top:14px; position:relative;
}
h2::before{content:""; position:absolute; top:0; left:0; width:28px; height:4px; background:var(--yellow); border-radius:2px}
h3{font-size:16.5px; margin:28px 0 8px; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 16px}
p b, li b{font-weight:600; color:var(--ink)}
a{color:var(--ink); text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--ink3)}
a:hover{text-decoration-color:var(--ink)}
ul,ol{padding-left:1.3em; margin:0 0 16px}
li{margin-bottom:6px}
small{font-size:12.5px; color:var(--ink3)}

/* ══ 判定ツール（サイトの主役） ══ */
.tool{background:var(--surface); border-radius:var(--radius); margin:26px 0 8px; box-shadow:var(--shadow)}
.tool-hd{
  padding:16px 22px 0; font-size:12.5px; font-weight:500; letter-spacing:.02em; color:var(--ink2);
}
.tool-bd{padding:12px 22px 22px}
.tool-in{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end}
.fld{display:flex; flex-direction:column; gap:6px}
.fld > span{font-size:12.5px; font-weight:500; color:var(--ink2)}
.tool input[type=number]{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:500;
  width:200px; padding:10px 14px; border:1.5px solid var(--rule-2); border-radius:var(--radius-s);
  background:var(--card); color:var(--ink); transition:border-color .12s, box-shadow .12s;
}
.tool input[type=number]:focus, .tool select:focus{outline:none; border-color:var(--navy-ink); box-shadow:0 0 0 3px var(--yellow)}
.tool select{
  font-family:var(--sans); font-size:15px; font-weight:500; padding:11px 14px; border:1.5px solid var(--rule-2);
  border-radius:var(--radius-s); background:var(--card); color:var(--ink);
}
.unit{font-size:15px; font-weight:500; color:var(--ink2); padding-bottom:12px}
.opts{display:flex; flex-wrap:wrap; gap:8px 20px; padding-bottom:12px}
.opts label{display:flex; gap:7px; align-items:center; font-size:13.5px; font-weight:400; color:var(--ink2); cursor:pointer}
.opts input{width:16px; height:16px; accent-color:var(--navy); cursor:pointer}
.opts input:focus-visible{outline:3px solid var(--navy-ink); outline-offset:2px}

/* 判定結果 */
.res{margin-top:20px; border-top:1px solid var(--rule-2); padding-top:18px}
.res .badge{
  display:inline-block; background:var(--yellow); color:var(--on-yellow);
  font-size:12px; font-weight:600; padding:4px 11px; border-radius:999px; letter-spacing:.01em;
}
.res .lead{font-size:23px; font-weight:700; line-height:1.4; margin:12px 0 14px; letter-spacing:-.02em}
.res .kv{display:grid; grid-template-columns:auto 1fr; gap:7px 18px; font-size:14px; margin-bottom:4px}
.res .kv span{color:var(--ink3); font-weight:400; white-space:nowrap}
.res .kv b{color:var(--ink); font-weight:500}
.res .kv b b{font-weight:700}
.res .warn{
  margin-top:14px; background:var(--stop-soft); border-radius:var(--radius-s);
  padding:11px 14px; font-size:13px; line-height:1.7; color:var(--ink2);
}
.res .warn b{color:var(--ink); font-weight:600}

/* 行き先ボタン ― サインの矢印 */
.go-btn{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:18px; background:var(--yellow); color:var(--on-yellow); text-decoration:none;
  padding:15px 20px; font-size:16px; font-weight:700; line-height:1.4; letter-spacing:-.01em;
  border-radius:10px; box-shadow:inset 0 0 0 1.5px rgba(13,43,62,.35), 0 1px 2px rgba(15,37,54,.08);
  transition:background .12s, transform .12s;
}
.go-btn:hover{background:var(--yellow-hover); text-decoration:none}
.go-btn:active{transform:translateY(1px)}
.go-btn:focus-visible{outline:3px solid var(--navy-ink); outline-offset:3px}
.go-btn .arrow{font-size:22px; line-height:1; flex:none; transition:transform .12s}
.go-btn:hover .arrow{transform:translateX(3px)}
.go-note{font-size:12px; color:var(--ink3); margin:9px 0 0; line-height:1.6}
.res-note{font-size:12px; color:var(--ink3); margin:12px 0 0; padding-top:10px; border-top:1px dashed var(--rule-2); line-height:1.6}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.go-btn:hover .arrow{transform:none}}

/* ── 改正の告知 ── */
.flagbox{margin:24px 0 8px; padding:18px 22px; background:var(--yellow-soft); border-radius:var(--radius)}
.flagbox .k{display:inline-block; font-size:11.5px; letter-spacing:.02em; font-weight:600;
  margin-bottom:8px; background:var(--yellow); color:var(--on-yellow); padding:3px 10px; border-radius:999px}
.flagbox p{margin:0; font-size:15px; line-height:1.8; color:var(--ink)}
.flagbox strong{font-weight:700}
.strike{text-decoration:line-through; color:var(--ink3); text-decoration-thickness:1.5px}

/* ── 表 ── */
.tbl-scroll{overflow-x:auto; margin:0 0 12px; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:14px; background:transparent}
th,td{border:0; border-bottom:1px solid var(--rule); padding:11px 12px; vertical-align:top; line-height:1.65}
td small,th small{display:inline-block; font-size:11.5px; line-height:1.55; color:var(--ink3)}
thead th{font-size:12.5px; font-weight:500; color:var(--ink2); text-align:left; white-space:nowrap;
  border-bottom:2px solid var(--navy-ink); padding-top:6px}
tbody th{font-size:13.5px; white-space:nowrap; font-weight:600; text-align:left; color:var(--ink)}
tbody tr:last-child th, tbody tr:last-child td{border-bottom:0}
td.c{text-align:center; white-space:nowrap}
.yes{color:var(--go); font-weight:600}
.no{color:var(--stop); font-weight:600}
.tag{display:inline-block; font-size:11.5px; padding:2px 9px; background:var(--surface-2);
  color:var(--ink2); font-weight:500; border-radius:999px}
.tag.new{background:var(--yellow); color:var(--on-yellow); font-weight:600}

/* ── Bento Grid（判定表） ── */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:0 0 14px}
.bento .cell{grid-column:span 3; background:var(--card); border:1px solid var(--rule-2); border-radius:12px;
  padding:14px 16px 15px; display:flex; flex-direction:column; gap:9px; min-width:0;
  transition:border-color .12s, box-shadow .12s}
.bento .cell[data-size="l"]{grid-column:span 6; background:var(--surface)}
.bento .cell[data-size="s"]{grid-column:span 2}
.bento .cell.is-hit{border-color:var(--yellow); box-shadow:0 0 0 3px var(--yellow-soft)}
.bento .ct{font-size:15px; font-weight:700; line-height:1.4; letter-spacing:-.01em; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.bento .cell.is-hit .ct::after{content:"いまの判定"; font-size:11px; font-weight:600; color:var(--on-yellow);
  background:var(--yellow); border-radius:999px; padding:2px 8px}
.bento .cf{display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-size:13px; line-height:1.6}
.bento .cf span{color:var(--ink3); white-space:nowrap}
.bento .cf b{font-weight:500; color:var(--ink)}
.bento .cf b b{font-weight:700}
.bento .cf small{font-size:11.5px; color:var(--ink3)}
.bento .cf .yes, .bento .cf .no{font-weight:600}
@media (max-width:600px){.bento{gap:8px}.bento .cell, .bento .cell[data-size]{grid-column:span 6}}

/* ── 罠 ── */
.trap{border-left:3px solid var(--yellow); padding:2px 0 2px 18px; margin:0 0 22px}
.trap h3{margin:4px 0 6px; font-size:16px}
.trap p{font-size:14.5px; color:var(--ink2); margin-bottom:6px}
.trap b{color:var(--ink); font-weight:600}

/* ── 買うもの ── */
.buy{background:var(--surface); border-radius:var(--radius); padding:20px 22px; margin:0 0 18px}
.buy .h{font-size:12.5px; color:var(--ink2); font-weight:500; margin-bottom:12px; letter-spacing:.02em}
.buy ul{margin:0; padding-left:0; list-style:none}
.buy li{font-size:15px; margin-bottom:12px; font-weight:500}
.buy li a{text-decoration-color:var(--ink3)}
.buy .why{display:block; font-size:12.5px; color:var(--ink3); line-height:1.6; font-weight:400; margin-top:2px}

.biz{margin:0 0 18px; padding:20px 22px; border:1px solid var(--rule-2); border-radius:var(--radius); background:var(--card)}
.biz .h{font-weight:700; color:var(--ink); margin-bottom:8px; font-size:15.5px}
.biz p{font-size:14px; color:var(--ink2); margin-bottom:11px}
.biz a{font-weight:600}

/* ── 一覧 ── */
.list{list-style:none; padding:0; margin:0}
.list li{border-bottom:1px solid var(--rule); margin:0}
.list a{display:flex; gap:16px; align-items:flex-start; padding:18px 6px; text-decoration:none; color:inherit;
  border-radius:var(--radius-s); transition:background .12s}
.list a:hover{background:var(--surface)}
.list a::after{content:"→"; color:var(--ink3); font-size:18px; flex:none; line-height:1.5; transition:transform .12s}
.list a:hover::after{color:var(--ink); transform:translateX(3px)}
.list .txt{flex:1}
.list .t{font-weight:700; font-size:16px; color:var(--ink); line-height:1.5; display:block; letter-spacing:-.01em}
.list .d{font-size:13.5px; color:var(--ink3); margin-top:5px; line-height:1.65; display:block; font-weight:400}

/* ── フッター ── */
.site-foot{margin-top:64px; border-top:1px solid var(--rule); background:var(--surface)}
.site-foot .wrap{padding-top:22px; padding-bottom:36px}
.site-foot p{font-size:12.5px; color:var(--ink3); line-height:1.8; margin:0 0 8px}
.site-foot a{color:var(--ink2)}

.note{font-size:12.5px; color:var(--ink3); background:none; border-left:2px solid var(--rule-2);
  padding:2px 0 2px 14px; margin:0 0 20px; line-height:1.7}
.note b{color:var(--ink2); font-weight:600}

@media (max-width:600px){
  body{font-size:15.5px}
  h1{font-size:25px} h2{font-size:19px}
  .wrap{padding:0 18px}
  .tool-bd{padding:10px 16px 18px} .tool-hd{padding:14px 16px 0}
  .tool input[type=number]{width:100%; font-size:22px}
  .fld{flex:1 1 60%; min-width:0}
  .res .lead{font-size:20px}
  .go-btn{font-size:15px; padding:13px 16px}
}