:root{--navy:#0f2742;--navy2:#1b3a5e;--ink:#1d2430;--mut:#5b6573;--line:#dfe4ea;--bg:#f6f7f9;--card:#fff;--acc:#d9682b;--acc2:#f3a64a;--ok:#1f8a5b;--ng:#c0392b;--a:#2b6cb0;--b:#c05621}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans JP",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.8;font-size:15.5px}
a{color:var(--a)}
header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.hwrap{max-width:1120px;margin:auto;display:flex;align-items:center;gap:14px;padding:10px 16px}
.logo{font-weight:900;font-size:17px;letter-spacing:.02em;color:#fff;text-decoration:none;line-height:1.3}
.logo small{display:block;font-weight:500;font-size:11px;opacity:.75}
nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav a{color:#dbe6f3;text-decoration:none;font-size:13.5px;padding:6px 10px;border-radius:6px}
nav a.navbtn{background:var(--acc);color:#fff;font-weight:700}
nav a.on,nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:6px;padding:4px 10px;font-size:14px}
@media(max-width:1180px){nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;padding:8px}nav.open{display:flex}.menu-btn{display:block}}
main{max-width:1120px;margin:auto;padding:0 16px 60px}
.view{display:none}.view.on{display:block}
.hero{background:linear-gradient(135deg,var(--navy) 0%,#24507f 100%);color:#fff;margin:0 -16px;padding:46px 22px 40px}
.hero .in{max-width:1080px;margin:auto}
.hero h1{font-family:"Noto Serif JP",serif;font-size:clamp(26px,4.4vw,42px);line-height:1.35;margin:.2em 0 .4em}
.badge{display:inline-block;background:var(--acc);color:#fff;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:99px}
.hero p{opacity:.92;max-width:760px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff;font-weight:700;text-decoration:none;border:none;border-radius:10px;padding:13px 22px;font-size:15.5px;cursor:pointer;box-shadow:0 3px 0 #a84b1c}
.btn:hover{filter:brightness(1.06)}.btn.sec{background:#fff;color:var(--navy);box-shadow:0 3px 0 #b9c3cf}
.btn.sm{padding:8px 14px;font-size:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:22px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px}
.card h3{margin:.1em 0 .4em;font-size:17px;color:var(--navy)}
.card.link{cursor:pointer;transition:.15s}.card.link:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,39,66,.08)}
.ic{font-size:26px}
h2.sec{font-family:"Noto Serif JP",serif;color:var(--navy);font-size:clamp(21px,3vw,28px);margin:38px 0 10px;padding-bottom:8px;border-bottom:3px solid var(--navy)}
h3.sub{color:var(--navy);border-left:5px solid var(--acc);padding-left:10px;margin:28px 0 8px;font-size:18px}
.note{font-size:13px;color:var(--mut)}
.box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0}
.police{background:#fff8ef;border:1px solid #f1d2ad;border-radius:14px;padding:16px 18px;margin:16px 0;position:relative}
.police b.t{display:flex;align-items:center;gap:8px;color:#8a4a12;margin-bottom:4px}
.police b.t:before{content:"👮";font-size:20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:18px 0}
.stat{background:#fff;border-radius:12px;padding:14px;border:1px solid var(--line)}
.stat .n{font-size:26px;font-weight:900;color:var(--navy)}
.stat .l{font-size:12.5px;color:var(--mut)}
/* wizard */
.crumb{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 6px;font-size:13px}
.crumb span{background:#e8eef5;color:var(--navy);border-radius:99px;padding:3px 10px;cursor:pointer}
.crumb span.cur{background:var(--navy);color:#fff;cursor:default}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin:12px 0}
.opt{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;display:flex;gap:12px;align-items:center;text-align:left;font:inherit;color:inherit}
.opt:hover{border-color:var(--acc);background:#fffaf5}
.opt .k{font-size:11.5px;color:var(--mut)}
.opt .arr{margin-left:auto;color:var(--acc);font-weight:900;white-space:nowrap}
.opt .big{font-size:28px}
.qtitle{font-size:19px;font-weight:700;color:var(--navy);margin:18px 0 4px}
/* result */
.res-head{background:#fff;border-radius:14px;border:1px solid var(--line);padding:18px;margin-top:14px}
.tid{display:inline-block;font-size:12px;background:var(--navy);color:#fff;border-radius:6px;padding:2px 8px;margin-right:6px}
.bar{display:flex;height:54px;border-radius:12px;overflow:hidden;margin:12px 0 4px;font-weight:900;color:#fff;font-size:18px}
.bar div{display:flex;align-items:center;justify-content:center;transition:width .35s;white-space:nowrap;min-width:0;overflow:hidden}
.bar .A{background:var(--a)}.bar .B{background:var(--b)}
.legend{display:flex;justify-content:space-between;font-size:13.5px;gap:10px}
.legend .A{color:var(--a);font-weight:700}.legend .B{color:var(--b);font-weight:700;text-align:right}
.big-r{font-size:34px;font-weight:900}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:6px 0}
.seg button{border:none;background:#fff;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.seg button.on{background:var(--navy);color:#fff}
.mods{display:grid;gap:8px;margin-top:10px}
.mod{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px}
.mod.na{opacity:.55}
.mod.chk{border-color:var(--acc);background:#fffaf5}
.mod label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.mod input{margin-top:6px;transform:scale(1.25)}
.mod .nm{font-weight:700}
.val{margin-left:auto;font-weight:900;white-space:nowrap;padding-left:8px}
.val.up{color:var(--ng)}.val.dn{color:var(--ok)}
.mod details{margin:6px 0 0 30px;font-size:13.5px;color:#3c4654}
.mod summary{cursor:pointer;color:var(--a);font-size:13px}
.tag{display:inline-block;font-size:11.5px;border-radius:5px;padding:0 6px;margin-left:6px;vertical-align:1px}
.tag.g{background:#e3f4ec;color:var(--ok)}.tag.r{background:#fbe7e4;color:var(--ng)}.tag.n{background:#eef0f3;color:var(--mut)}
.range{display:flex;align-items:center;gap:8px;margin:4px 0 0 30px;font-size:13px}
.disc{font-size:12.5px;color:var(--mut);background:#f0f2f5;border-radius:10px;padding:10px 12px;margin-top:14px}
.cta{background:var(--navy);color:#fff;border-radius:16px;padding:22px;margin:26px 0;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cta h3{margin:0 0 4px;font-size:19px}.cta p{margin:0;opacity:.88;font-size:14px}
.cta .row{margin-left:auto}
/* list */
.search{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:15px}
table{border-collapse:collapse;width:100%;background:#fff;border-radius:12px;overflow:hidden;font-size:14px}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:#eef2f7;color:var(--navy);font-size:13px}
tr.lk{cursor:pointer}tr.lk:hover td{background:#fffaf5}
.tblw{overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
/* flow */
.flow{position:relative;margin:18px 0 0 8px;padding-left:28px;border-left:3px solid #c9d4e2}
.step{position:relative;margin-bottom:22px}
.step:before{content:attr(data-n);position:absolute;left:-44px;top:0;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:14px}
.step h4{margin:0 0 4px;font-size:17px;color:var(--navy)}
.step .warn{background:#fdecea;border-radius:8px;padding:6px 10px;font-size:13.5px;margin-top:6px}
/* calc */
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.fg label{font-size:13px;color:var(--mut);display:block}
.fg input,.fg select{width:100%;padding:9px 10px;border:1.5px solid var(--line);border-radius:9px;font:inherit;font-size:15px;background:#fff}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.tabs button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:12px}
.cmp .c{border-radius:12px;padding:14px;border:1px solid var(--line);background:#fff}
.cmp .c.hl{border:2px solid var(--acc);background:#fffaf5}
.cmp .c .v{font-size:24px;font-weight:900;color:var(--navy)}
.cmp .c .s{font-size:12.5px;color:var(--mut)}
.tot{font-size:30px;font-weight:900;color:var(--acc)}
/* articles */
.art{max-width:860px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.toc a{background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:13.5px;text-decoration:none;color:var(--navy)}
.qa{background:#fff;border:1px solid var(--line);border-radius:12px;margin:8px 0}
.qa summary{padding:12px 14px;font-weight:700;cursor:pointer;color:var(--navy)}
.qa div{padding:0 14px 12px}
#mini{position:fixed;left:0;right:0;bottom:0;background:var(--navy);color:#fff;padding:8px 16px;display:none;z-index:30;font-size:14px;box-shadow:0 -2px 10px rgba(0,0,0,.2)}#mini b{font-size:18px;color:var(--acc2)}#mini.on{display:block}
.tk{background:#fff8ef;border:2px solid var(--acc2);border-radius:16px;padding:18px 20px;margin:18px 0;display:flex;gap:16px;align-items:center;flex-wrap:wrap}.tk h3{margin:.2em 0;color:#8a4a12}.tk p{margin:0}.tk .row{margin-left:auto}.tk-l{flex:1;min-width:260px}
.chk{display:grid;gap:8px;margin:10px 0}.chk label{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.chk input{margin-top:6px;transform:scale(1.2)}.chk label.on{border-color:var(--acc);background:#fffaf5}
.steps{display:flex;gap:6px;margin:14px 0;flex-wrap:wrap}.steps span{flex:1;min-width:90px;text-align:center;font-size:12.5px;padding:6px;border-radius:8px;background:#e8eef5;color:var(--mut)}.steps span.on{background:var(--navy);color:#fff}.steps span.done{background:#cfe0f1;color:var(--navy)}
.days{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}.days button{flex:0 0 74px;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 4px;font:inherit;font-size:13px;cursor:pointer;line-height:1.3}.days button.on{background:var(--navy);color:#fff;border-color:var(--navy)}.days button:disabled{opacity:.4;cursor:default}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px;margin-top:10px}.slots button{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:9px 4px;font:inherit;cursor:pointer}.slots button.on{background:var(--acc);color:#fff;border-color:var(--acc)}.slots button:disabled{opacity:.35;text-decoration:line-through;cursor:default}
.sumbox{background:#f3f6fa;border-radius:12px;padding:12px 14px;font-size:14px}.sumbox dt{font-weight:700;color:var(--navy);margin-top:6px}.sumbox dd{margin:0 0 0 0}
.err{color:var(--ng);font-size:13px}
footer{background:#0b1c30;color:#b8c4d3;font-size:13px;padding:28px 16px}
footer .in{max-width:1120px;margin:auto}
.todo{background:#fff3cd;color:#7a5a00;border-radius:4px;padding:0 4px;font-size:.9em}
.diag{width:100%;max-width:320px;display:block;margin:6px auto;border-radius:12px;border:1px solid var(--line)}
.thumb{flex:0 0 76px;width:76px}.thumb svg{width:76px;height:76px;border-radius:8px;border:1px solid var(--line);display:block}
.dgw{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:8px 0}.dgw svg{flex:0 0 auto;width:min(320px,100%)}.dgl{flex:1;min-width:200px;font-size:14px}
@media(max-width:600px){body{font-size:15px}.bar{height:46px;font-size:15px}.big-r{font-size:28px}}

/* ===== theme: road vernacular ===== */
:root{--navy:#1D5BA6;--asph:#2E3338;--ink:#20262C;--mut:#5B6573;--line:#D3D9DF;--bg:#EEF1F4;--card:#fff;--acc:#F2B705;--acc2:#F2B705;--a:#1D5BA6;--b:#C0392B;--ng:#C0392B;--ok:#1F8A5B}
body{font-family:"BIZ UDPGothic",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.85}
h1,h2.sec,.qtitle,.cta h3,.tk h3,.hero2 h1{font-family:"Shippori Mincho B1",serif}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
header{background:var(--asph);border-bottom:4px solid var(--acc)}
.logo{display:flex;align-items:center;gap:10px}.logo .mk{width:34px;height:34px;flex:0 0 34px}
nav a{color:#E3E7EB}nav a.on,nav a:hover{background:rgba(255,255,255,.1)}
nav a.navbtn{background:var(--acc);color:var(--asph)}
.btn{background:var(--acc);color:var(--asph);box-shadow:0 3px 0 #B88A00;border-radius:8px}
.btn.sec{background:#fff;color:var(--asph);box-shadow:0 3px 0 #AEB6BE}
h2.sec{color:var(--asph);border-bottom:none;padding-bottom:0;position:relative;padding-left:0;margin-top:48px}
h2.sec:after{content:"";display:block;height:6px;margin-top:10px;background:repeating-linear-gradient(90deg,var(--asph) 0 28px,transparent 28px 44px)}
h3.sub{border-left:6px solid var(--navy)}
.tag.g{background:#E3F4EC}
/* hero */
.hero2{background:var(--asph);color:#fff;width:100vw;margin-left:calc(50% - 50vw);padding:0;overflow:hidden;position:relative}
.hero2 .in{max-width:1120px;margin:auto;display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center;padding:40px 16px 44px}
.hero2 h1{font-size:clamp(30px,4.6vw,50px);line-height:1.3;margin:.2em 0 .45em;letter-spacing:.02em}
.hero2 p{color:#D5DADF;max-width:34em}
.hero2 .kicker{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--asph);font-weight:700;font-size:13px;border-radius:6px;padding:4px 10px}
.hero2 .kicker i{width:10px;height:10px;border-radius:50%;background:var(--navy);display:inline-block}
.hero-ill{width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 6px rgba(255,255,255,.06)}
.hero2:after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(90deg,#fff 0 22px,transparent 22px 40px);opacity:.9}
@media(max-width:860px){.hero2 .in{grid-template-columns:1fr}.hero-ill{order:-1}}
@media(prefers-reduced-motion:no-preference){
.carA{animation:carA 1.6s cubic-bezier(.3,.7,.4,1) .3s both}.carB{animation:carB 1.6s cubic-bezier(.3,.7,.4,1) .3s both}
.burst{animation:burst .5s ease-out 1.8s both}.plate{animation:plate .5s ease-out 2.1s both}
.trA,.trB{animation:dash 1.6s linear .3s both}}
.burst{opacity:1}
@keyframes carA{from{transform:translateY(80px)}to{transform:translateY(0)}}
@keyframes carB{from{transform:translateY(-80px)}to{transform:translateY(0)}}
@keyframes burst{from{opacity:0;transform:scale(.6);transform-origin:270px 236px}to{opacity:1}}
@keyframes plate{from{opacity:0;transform:translate(410px,190px)}to{opacity:1;transform:translate(410px,170px)}}
@keyframes dash{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
/* what-you-can-do: road-sign tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:22px 0}
.tile{background:#fff;border-radius:12px;padding:0;overflow:hidden;cursor:pointer;border:1px solid var(--line);display:flex;flex-direction:column}
.tile:hover{border-color:var(--navy)}
.tile .vis{height:120px;background:#E6ECF2;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.tile .vis svg{height:96px;width:auto}
.tile .bd{padding:14px 16px 16px}.tile h3{margin:0 0 4px;font-size:18px;color:var(--asph)}.tile p{margin:0;font-size:14.5px;color:var(--mut)}
.statband{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center;background:#fff;border-radius:12px;padding:18px 20px;margin:22px 0;border:1px solid var(--line)}
.statband .big{font-family:"Shippori Mincho B1",serif;font-size:44px;color:var(--asph);line-height:1.1}
.statband .big small{font-size:16px;font-family:"BIZ UDPGothic";margin-left:4px}
.trend{width:100%;height:auto}
@media(max-width:700px){.statband{grid-template-columns:1fr}}
/* wizard root options as sign tiles */
.opt .sg{width:52px;height:52px;flex:0 0 52px}.opt .sg svg{width:100%;height:100%}
.opts.root{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.opts.root .opt{padding:16px}
.opt:hover{border-color:var(--navy);background:#F4F8FC}.opt .arr{color:var(--navy)}
/* flow */
.flow{border-left:4px dashed #AEB6BE}
.step:before{background:var(--navy);border-radius:8px;width:34px;height:34px;left:-49px;border:3px solid #fff;box-shadow:0 0 0 2px var(--navy)}
.step .si{float:right;width:56px;height:56px;color:var(--navy);margin:0 0 6px 12px;background:#E6ECF2;border-radius:12px;padding:8px}
.step .si svg{width:100%;height:100%}
.police{background:#FFF8DC;border:none;border-left:6px solid var(--acc);border-radius:0 10px 10px 0}
.police b.t{color:#6B5300}
.cta{background:var(--asph);border-radius:12px;position:relative;overflow:hidden}
.cta:before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:repeating-linear-gradient(180deg,var(--acc) 0 14px,var(--asph) 14px 28px)}
.cta>div:first-child{padding-left:10px}
.tk{background:#fff;border:2px solid var(--navy)}.tk h3{color:var(--navy)}
.spot{float:right;width:120px;margin:0 0 10px 16px}
.bar .A{background:var(--a)}.bar .B{background:var(--b)}
footer{background:var(--asph);border-top:4px solid var(--acc)}
@media(max-width:600px){.tiles{grid-template-columns:1fr 1fr;gap:10px}.tile .vis{height:84px}.tile .vis svg{height:66px!important;width:auto!important}.tile p{font-size:12.5px}.tile h3{font-size:15px}.statband .big{font-size:36px}}
.prof{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin:16px 0}
.prof .ph{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:5/6;background:#DCE3EA}.prof .ph svg,.prof .ph img{width:100%;height:100%;object-fit:cover;display:block}
.prof .ph span{position:absolute;left:0;right:0;bottom:0;background:rgba(46,51,56,.75);color:#fff;font-size:12px;text-align:center;padding:4px}
.prof .role{margin:0;color:var(--mut);font-size:14px}.prof .nm{font-family:"Shippori Mincho B1",serif;font-size:34px;margin:.1em 0 .3em;color:var(--asph);line-height:1.3}.prof .nm small{display:block;font-family:"BIZ UDPGothic";font-size:13px;color:var(--mut);letter-spacing:.1em}
@media(max-width:640px){.prof{grid-template-columns:1fr}.prof .ph{max-width:220px}}
.tl{border-left:4px solid var(--navy);margin:10px 0 0 8px;padding-left:18px}.tl div{position:relative;padding:4px 0 12px}.tl div:before{content:"";position:absolute;left:-27px;top:10px;width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid var(--navy)}.tl b{display:block}.tl span{color:var(--mut);font-size:14px}
.pts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:10px}.pts div{background:#fff;border-top:5px solid var(--acc);border-radius:10px;padding:14px 16px;border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.pts b{color:var(--asph)}.pts p{margin:.4em 0 0;font-size:14.5px}
.mini-prof{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:18px 0}.mini-prof .ph{width:72px;height:86px;flex:0 0 72px;border-radius:8px;overflow:hidden}.mini-prof .ph svg,.mini-prof .ph img{width:100%;height:100%;object-fit:cover}.mini-prof p{margin:0}
@media(min-width:1181px){nav{flex-wrap:nowrap}nav a{font-size:13px;padding:6px 8px;white-space:nowrap}.logo{font-size:15px;white-space:nowrap}.logo small{font-size:10.5px}}

.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:10px 0}
.fm{text-decoration:none;display:flex;flex-direction:column;gap:4px;text-align:left;background:#fff;border:1.5px solid var(--line);border-left:6px solid var(--navy);border-radius:10px;padding:12px 14px;font:inherit;cursor:pointer;color:var(--ink)}
.fm:hover{border-color:var(--navy)}.fm b:before{content:attr(data-k);display:inline-block;background:#B3261E;color:#fff;font-size:11px;border-radius:3px;padding:0 5px;margin-right:6px;vertical-align:2px}.fm b[data-k="Web"]:before{background:var(--navy)}.fm span{font-size:13px;color:var(--mut)}
/* shorui */
.doclist{display:grid;gap:10px;margin:12px 0}
.doc{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.doc .n{width:36px;height:36px;border-radius:8px;background:#E6ECF2;color:var(--navy);font-weight:700;display:flex;align-items:center;justify-content:center}
.doc b{display:block}.doc .w{font-size:13px;color:var(--mut)}
.need{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.need span{font-size:12px;border-radius:5px;padding:1px 7px;background:#EEF1F4;color:var(--mut)}.need span.y{background:var(--navy);color:#fff}.need span.o{background:#DCE7F4;color:var(--navy)}
@media(max-width:600px){.doc{grid-template-columns:36px 1fr}.need{grid-column:1/-1;justify-content:flex-start}}

/* top pillars */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.jump a{color:#fff;text-decoration:none;font-size:13.5px;border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:5px 14px}.jump a:hover{background:rgba(255,255,255,.12)}
.pill{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 22px;margin:26px 0;scroll-margin-top:80px}
.pill-h{display:flex;gap:16px;align-items:flex-start;margin-bottom:10px}.pill-ic{flex:0 0 52px;height:52px;border-radius:12px;background:var(--acc);color:var(--asph);display:grid;place-items:center}.pill-ic svg{width:32px;height:32px}
.pill-h h2{font-family:"Shippori Mincho B1",serif;font-size:clamp(22px,3vw,28px);margin:0 0 4px;color:var(--asph);line-height:1.35}.pill-h p{margin:0;color:var(--mut)}
table.kx td:nth-child(2){white-space:nowrap}
@media(max-width:640px){table.kx thead{display:none}table.kx,table.kx tbody,table.kx tr,table.kx td{display:block;width:auto}table.kx tr{border-bottom:1px solid var(--line);padding:8px 0}table.kx td{border:none;padding:2px 10px}table.kx td:first-child{font-weight:700}table.kx td:nth-child(2){white-space:normal}table.kx td:nth-child(3){font-size:13px;color:var(--mut)}.hero-ill{max-height:220px;object-fit:cover}}
.cx-cap{font-weight:700;margin:16px 0 6px}
.cx{display:grid;gap:14px;margin:8px 0 10px}
.cx-row{display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:12px}
.cx-t b{display:block;font-size:16px}.cx-t span{font-size:12.5px;color:var(--mut)}
.cx-b{display:grid;gap:6px}
.cxb{display:grid;grid-template-columns:128px 1fr 132px;gap:10px;align-items:center}
.cxl{font-size:13px;color:var(--mut)}
.cxt{display:block;height:16px;background:#EEF1F4;border-radius:4px;overflow:hidden;position:relative}.cxf{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.cxb.b0 .cxf{background:#AEB6BE}.cxb.b1 .cxf{background:var(--navy)}.cxb.b2 .cxf{background:#9BB8DD}
.cxb.b1 .cxl,.cxb.b1 .cxv{color:var(--navy);font-weight:700}
.cxv{font-size:14px;font-weight:700;text-align:right;white-space:nowrap}
@media(max-width:640px){.cx-row{grid-template-columns:1fr}.pill{padding:20px 16px}.cxb{grid-template-columns:92px 1fr 108px;gap:6px}.cxl{font-size:11.5px}.cxv{font-size:12.5px}}
.calc-d{margin:8px 0 14px}.calc-d summary{cursor:pointer;color:var(--a);font-weight:700}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.duo .box{margin:0}.duo .box.ok{border-color:var(--navy);background:#F3F7FC}.duo ul{margin:.4em 0 0;padding-left:1.2em}
@media(max-width:640px){.duo{grid-template-columns:1fr}}
ol.stp{list-style:none;counter-reset:s;padding:0;margin:12px 0}
ol.stp li{counter-increment:s;position:relative;padding:0 0 14px 46px;border-left:2px solid var(--line);margin-left:15px}
ol.stp li:last-child{border-left-color:transparent}
ol.stp li:before{content:counter(s);position:absolute;left:-16px;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--asph);color:#fff;font-weight:700;display:grid;place-items:center;font-size:14px}
ol.stp b{display:block}ol.stp span{display:block;color:var(--ink);font-size:14.5px}
.formula{background:#F3F7FC;border-left:4px solid var(--navy);padding:10px 14px;font-weight:700}
.lead{color:var(--mut);margin-top:-6px}
.author{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-top:4px solid var(--asph);border-radius:12px;padding:16px;margin:28px 0 18px}
.author .ph{flex:0 0 84px;height:112px;border-radius:8px;overflow:hidden}.author .ph img{width:100%;height:100%;object-fit:cover;display:block}
.author p{margin:0 0 4px}.author .ah{font-size:12.5px;color:var(--mut)}.author .an{font-weight:700;font-size:17px}.author .an small{font-weight:400;font-size:13px;color:var(--mut)}.author .ad{font-size:12.5px;color:var(--mut)}
/* fixed contact bar */
#cbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--asph);border-top:3px solid var(--acc);box-shadow:0 -4px 14px rgba(0,0,0,.18)}
#cbar .in{max-width:1120px;margin:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:8px 12px}
#cbar a{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:700;border-radius:9px;padding:10px 8px;font-size:15px;line-height:1.2;text-align:center}
#cbar a small{display:block;font-weight:400;font-size:11px;opacity:.85}
#cbar svg{width:22px;height:22px;flex:0 0 22px}
.share{background:#fff;border:2px solid #06C755;border-radius:12px;padding:16px 18px;margin:18px 0}
.share h4{margin:0 0 4px;font-size:16px;color:var(--asph)}
.share p{margin:0 0 10px;font-size:13.5px;color:var(--mut)}
.share .row{display:flex;flex-wrap:wrap;gap:10px}
.share .btn.ln{background:#06C755;color:#fff;box-shadow:0 3px 0 #04913e}
.share .tel{margin-top:10px;font-size:13.5px;background:#f4f6f8;border-radius:8px;padding:8px 12px}
.share .tel b{font-size:15px}
.share .done{color:#1F8A5B;font-weight:700;font-size:13.5px;margin-left:4px;align-self:center}
#cbar .c-tel{background:var(--acc);color:var(--asph)}#cbar .c-line{background:#06C755;color:#fff}#cbar .c-form{background:#fff;color:var(--asph)}
body{padding-bottom:78px}
#mini{bottom:66px!important}
@media(max-width:640px){#cbar a{font-size:13.5px;flex-direction:column;gap:2px;padding:7px 4px}#cbar a small{font-size:10px}body{padding-bottom:84px}#mini{bottom:72px!important}}

#khub .kcat{scroll-margin-top:84px;font-size:15px;color:var(--mut);margin:26px 0 8px;font-weight:700;border-left:4px solid var(--acc);padding-left:8px}
.kcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.kcard{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.kcard:hover{border-color:var(--navy);box-shadow:0 4px 14px rgba(29,91,166,.08)}
.kcard b{display:block;font-size:16px;color:var(--asph);margin-bottom:4px}.kcard span{display:block;font-size:13px;color:var(--mut);line-height:1.6}
.kcrumb{font-size:13px;color:var(--mut);margin:18px 0 0}.kcrumb a{color:var(--a)}
.ktoc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0 18px;display:flex;flex-direction:column;gap:2px}
.ktoc:empty{display:none}.ktoc b{font-size:13px;color:var(--mut);margin-bottom:4px}.ktoc a{font-size:14.5px;color:var(--a);text-decoration:none}.ktoc a:hover{text-decoration:underline}
.kart .kl{font-size:16.5px;color:var(--ink);background:#fff;border-left:4px solid var(--navy);padding:12px 16px;border-radius:0 8px 8px 0}
.kart h4{font-size:16px;color:var(--asph);margin:20px 0 6px}
.kart h3.sub{scroll-margin-top:80px}
.knav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:30px 0 8px}
.knav a{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--asph);font-weight:700}
.knav a small{display:block;font-weight:400;font-size:12px;color:var(--mut)}.knav a.nx{text-align:right}
@media(max-width:640px){.knav{grid-template-columns:1fr}}
.kidx{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}.kidx a{background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:13.5px;color:var(--asph);text-decoration:none}.kidx a small{margin-left:6px;color:var(--mut)}.kidx a:hover{border-color:var(--navy)}
.kart .tip{font-size:14px;background:#F6F8FA;border-radius:6px;padding:6px 10px;color:var(--ink)}
.kart table.kt td:first-child small{display:block;color:var(--mut);font-size:11.5px}.kart table.kt{table-layout:fixed}.kart table.kt th:nth-child(1){width:36%}.kart table.kt th:nth-child(2){width:28%}.kart table.kt th:nth-child(3){width:36%}.kart table.kt td{font-size:14px}
.kart table.mtx th,.kart table.mtx td{padding:4px 6px;text-align:center;font-size:13px;white-space:nowrap}
@media(max-width:640px){.kart table.kt{table-layout:auto}.kart table.kt th{width:auto!important}}
.gparts{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:14px 0 6px}.gparts b{display:block;font-size:14px;margin-bottom:8px}.gparts div{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}.gparts a.w{grid-column:span 2}.gparts a{display:block;text-align:center;border:1.5px solid var(--line);border-radius:9px;padding:9px 4px;font-size:14px;font-weight:700;color:var(--asph);text-decoration:none;background:#F7F9FB}.gparts a:hover{border-color:var(--navy)}
.stk{display:none}
@media(max-width:640px){.tblw.hasstk{display:none}.stk{display:block;margin:10px 0}.stk .sc{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff;overflow:hidden}.stk .sch{background:#EEF2F6;font-weight:700;padding:7px 11px;font-size:14.5px}.stk .scr{padding:6px 11px;border-top:1px solid #EEF1F4;font-size:14px;line-height:1.6}.stk .scq{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:7px 11px;border-top:1px solid #EEF1F4;font-size:14px;line-height:1.55}.stk .scq b{flex:0 0 auto;white-space:nowrap;color:var(--navy);font-size:14.5px}.stk .scg{border-top:2px solid #D5DDE5}.stk .scr span{display:block;font-size:12px;color:var(--mut);font-weight:700}.stk .lkup{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}.stk .lkup label{display:block;font-size:13px;color:var(--mut);margin-bottom:8px}.stk .lkup select{display:block;width:100%;margin-top:3px;padding:8px;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:8px}.stk .lkn{font-size:12.5px;color:var(--mut);margin:0 0 6px}.stk .lkv{background:#F3F6F9;border-radius:8px;padding:10px;text-align:center}.stk .lkv small{display:block;color:var(--mut)}.stk .lkv b{font-size:22px}.gparts div{grid-template-columns:repeat(3,1fr)}.gparts a{font-size:13px;padding:8px 2px}}
.kart .case{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px;margin:12px 0}.kart .case h4{margin:0 0 6px;font-size:16px}.kart .case .cr{display:inline-block;background:var(--navy);color:#fff;border-radius:6px;padding:2px 9px;font-size:13px;font-weight:700;margin:0 0 8px}.kart .case p{margin:6px 0}
.logo img.lg{background:#fff;border-radius:9px;padding:3px;width:44px;height:44px;flex:0 0 44px;object-fit:contain}

.nw{white-space:nowrap}.logo i,.menu-btn i,.steps i{font-style:normal}.menu-btn{white-space:nowrap;flex:0 0 auto}.an small{white-space:nowrap}
@media(max-width:600px){.logo{font-size:14px;white-space:nowrap;gap:8px;min-width:0}.logo>span{min-width:0;overflow:hidden}.logo small{font-size:10px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logo .op{display:none}.logo img.lg{width:38px;height:38px;flex:0 0 38px}.menu-btn{font-size:13px;padding:6px 10px}
 .cxb{grid-template-columns:106px 1fr 100px}.cxl{white-space:nowrap;font-size:11px}.cxv{white-space:nowrap}
 .steps span{min-width:0;flex:0 0 auto;white-space:nowrap;padding:6px 10px}.steps span.on{flex:1 1 auto}.steps span:not(.on) .t{display:none}
 .ktbl{overflow:visible}.ktbl table,.ktbl tbody,.ktbl tr,.ktbl td{display:block;width:auto}.ktbl thead{display:none}.ktbl tr{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:8px 10px;background:#fff}.ktbl td{border:0!important;padding:3px 0!important;background:none!important}.ktbl td[data-l]{display:flex;justify-content:space-between;gap:10px}.ktbl td[data-l]::before{content:attr(data-l);color:var(--mut);font-size:13px;white-space:nowrap}
 .gparts div{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}.gparts a{font-size:12.5px;padding-left:4px;padding-right:4px}}
@media(max-width:430px){.menu-btn .mt{display:none}.menu-btn{font-size:17px;padding:4px 10px}}

.view{display:block}.kart{display:block}.static-wrap{padding-top:10px}.seo-list a{display:block}