.wbcol-article{
  --ink:#12233a;
  --ink-soft:#4a5d75;
  --line:#d9e2ec;
  --bg:#f5f8fb;
  --card:#ffffff;
  --brand:#0b5fd8;
  --brand-dark:#084aa8;
  --accent:#ff7a1a;
  --accent-dark:#e56300;
  --good:#0a8f5b;
  --note:#fff7e6;
}
.wbcol-article,.wbcol-article *{box-sizing:border-box}
.wbcol-article{scroll-behavior:smooth}
.wbcol-article{
  margin:0;
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
  font-size:16px;
  -webkit-text-size-adjust:100%;
}
.wbcol-article a{color:var(--brand)}
.wbcol-article .wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.wbcol-article .narrow{max-width:780px}
.wbcol-article .pr-bar{background:#12233a;color:#dbe6f3;font-size:12px;text-align:center;padding:6px 12px}
.wbcol-article header.hero{
  background:linear-gradient(135deg,#0b3d91 0%,#0b5fd8 55%,#19a3e6 100%);
  color:#fff;
  padding:56px 0 64px;
}
.wbcol-article .hero .eyebrow{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);padding:4px 14px;border-radius:999px;font-size:13px;font-weight:500;margin-bottom:18px}
.wbcol-article .hero h1{font-size:clamp(26px,5vw,42px);line-height:1.35;margin:0 0 18px;font-weight:900;letter-spacing:.01em}
.wbcol-article .hero p.lead{font-size:clamp(15px,2.2vw,18px);margin:0 0 28px;max-width:720px;color:#eaf3ff}
.wbcol-article .hero .meta{font-size:13px;color:#cfe2fb;margin-top:22px}
.wbcol-article .hero .meta.pr-note{margin-top:4px}
.wbcol-article .btn{
  display:inline-block;text-decoration:none;font-weight:700;border-radius:10px;
  padding:14px 26px;line-height:1.4;text-align:center;transition:transform .12s,background .12s;
}
.wbcol-article .btn:hover{transform:translateY(-1px)}
.wbcol-article .btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-dark)}
.wbcol-article .btn-primary:hover{background:#ff8a33}
.wbcol-article .btn-ghost{background:#fff;color:var(--brand-dark);border:2px solid var(--brand)}
.wbcol-article .btn-block{display:block;width:100%}
.wbcol-article section{padding:56px 0}
.wbcol-article section.alt{background:#fff}
.wbcol-article section h2{font-size:clamp(22px,3.6vw,30px);line-height:1.45;margin:0 0 10px;font-weight:900}
.wbcol-article section h2 + p.sub{margin:0 0 28px;color:var(--ink-soft)}
.wbcol-article h3{font-size:19px;line-height:1.5;margin:0 0 8px}
.wbcol-article .chapter{display:block;font-size:13px;font-weight:700;color:var(--brand);letter-spacing:.08em;margin-bottom:6px}
.wbcol-article .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.wbcol-article .prose p{margin:0 0 1.3em}
.wbcol-article .prose h3{font-size:20px;margin:2em 0 .6em;padding-left:12px;border-left:4px solid var(--brand)}
.wbcol-article .prose ul,.wbcol-article .prose ol{margin:0 0 1.3em;padding-left:1.4em}
.wbcol-article .prose li{margin-bottom:.4em}
.wbcol-article .prose strong{background:linear-gradient(transparent 62%,#ffe7b8 62%)}
.wbcol-article .prose code{background:#eaf0f7;border-radius:4px;padding:1px 6px;font-size:.92em;font-family:Consolas,Menlo,monospace}
.wbcol-article .aside{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:0 0 1.5em;font-size:15px}
.wbcol-article .alt .aside{background:var(--bg)}
.wbcol-article .aside b.t{display:block;margin-bottom:4px;color:var(--brand-dark)}
.wbcol-article .callout{background:var(--note);border-left:4px solid var(--accent);padding:16px 18px;border-radius:0 10px 10px 0;margin:0 0 1.5em;font-size:15px}
.wbcol-article .picks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wbcol-article .pick{position:relative;display:flex;flex-direction:column}
.wbcol-article .pick .tag{align-self:flex-start;background:#e7f0ff;color:var(--brand-dark);font-size:12px;font-weight:700;padding:3px 10px;border-radius:6px;margin-bottom:10px}
.wbcol-article .pick.is-top{border:2px solid var(--accent)}
.wbcol-article .pick.is-top .tag{background:var(--accent);color:#fff}
.wbcol-article .pick .name{font-size:21px;font-weight:900;margin:0 0 6px}
.wbcol-article .pick p{margin:0 0 16px;font-size:14.5px;color:var(--ink-soft);flex:1}
.wbcol-article .toc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 26px}
.wbcol-article .toc b{display:block;margin-bottom:8px}
.wbcol-article .toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:32px}
.wbcol-article .toc li{margin-bottom:6px;break-inside:avoid}
.wbcol-article .toc a{text-decoration:none}
.wbcol-article .toc a:hover{text-decoration:underline}
.wbcol-article .routes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 1.5em}
.wbcol-article .route .no{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:14px;margin-bottom:8px}
.wbcol-article .route h4{margin:0 0 6px;font-size:17px}
.wbcol-article .route p{margin:0 0 10px;font-size:14.5px;color:var(--ink-soft)}
.wbcol-article .route dl{margin:0;font-size:13.5px}
.wbcol-article .route dt{font-weight:700;margin-top:8px}
.wbcol-article .route dd{margin:0;color:var(--ink-soft)}
.wbcol-article .flow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 1.5em}
.wbcol-article .flow .card h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px;font-size:16.5px}
.wbcol-article .badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.wbcol-article .badge.ok{background:#e3f6ee;color:var(--good)}
.wbcol-article .badge.ng{background:#fde8e8;color:#c0392b}
.wbcol-article .flow ul{margin:0;padding-left:1.2em;font-size:14.5px;color:var(--ink-soft)}
.wbcol-article .levels{display:grid;gap:12px;margin:0 0 1.5em}
.wbcol-article .level{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:start}
.wbcol-article .level .lv{background:#e7f0ff;color:var(--brand-dark);font-weight:900;text-align:center;border-radius:10px;padding:10px 6px;font-size:15px;line-height:1.4}
.wbcol-article .level .lv small{display:block;font-weight:500;font-size:11.5px}
.wbcol-article .level h4{margin:0 0 4px;font-size:17px}
.wbcol-article .level p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.wbcol-article .level p.need{margin-top:6px;color:var(--ink);font-size:14px}
.wbcol-article .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:#fff}
.wbcol-article table.compare{border-collapse:collapse;width:100%;min-width:820px;font-size:14px}
.wbcol-article .compare th,.wbcol-article .compare td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle;line-height:1.6}
.wbcol-article .compare thead th{background:#0b3d91;color:#fff;font-size:15px}
.wbcol-article .compare thead th.top{background:var(--accent)}
.wbcol-article .compare tbody th{background:#f0f5fb;text-align:left;font-weight:700;width:170px;position:sticky;left:0;z-index:1}
.wbcol-article .compare td small{display:block;color:var(--ink-soft);font-size:12px}
.wbcol-article .compare td.hl{background:#fffaf3}
.wbcol-article .compare tr:last-child th,.wbcol-article .compare tr:last-child td{border-bottom:none}
.wbcol-article .yes{color:var(--good);font-weight:700}
.wbcol-article .unk{color:var(--ink-soft)}
.wbcol-article .scroll-hint{display:none;font-size:12px;color:var(--ink-soft);margin:0 0 8px}
.wbcol-article .table-note{font-size:12.5px;color:var(--ink-soft);margin-top:12px}
.wbcol-article .detail{display:grid;gap:20px}
.wbcol-article .detail .card{display:grid;grid-template-columns:1fr 240px;gap:24px;align-items:start}
.wbcol-article .detail .head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px}
.wbcol-article .detail .head h3{font-size:22px;margin:0;font-weight:900}
.wbcol-article .detail .for{font-size:14.5px;color:var(--ink-soft);margin:0 0 12px}
.wbcol-article .detail .body{font-size:15px;margin:0 0 16px}
.wbcol-article .pc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wbcol-article .pc h4{margin:0 0 4px;font-size:14px}
.wbcol-article .pc ul{margin:0;padding-left:1.2em;font-size:14.5px}
.wbcol-article .pc .pros h4{color:var(--good)}
.wbcol-article .pc .cons h4{color:#b4551a}
.wbcol-article .side{background:var(--bg);border-radius:12px;padding:18px;text-align:center}
.wbcol-article .side .price{font-size:13px;color:var(--ink-soft);margin:0}
.wbcol-article .side .price b{display:block;font-size:28px;color:var(--ink);line-height:1.3}
.wbcol-article .side .cond{font-size:12px;color:var(--ink-soft);margin:4px 0 14px}
.wbcol-article table.err{border-collapse:collapse;width:100%;font-size:14.5px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 1.5em}
.wbcol-article .err th,.wbcol-article .err td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.wbcol-article .err thead th{background:#f0f5fb;font-size:13.5px}
.wbcol-article .err tr:last-child td{border-bottom:none}
.wbcol-article .err td:first-child{font-weight:700;white-space:nowrap}
.wbcol-article .steps{counter-reset:s;display:grid;gap:12px;padding:0;margin:0;list-style:none}
.wbcol-article .steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px 16px 58px;position:relative}
.wbcol-article .alt .steps li{background:var(--bg)}
.wbcol-article .steps li::before{content:counter(s);position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;display:grid;place-items:center;font-size:14px}
.wbcol-article .steps b{display:block}
.wbcol-article .steps span{font-size:14.5px;color:var(--ink-soft)}
.wbcol-article details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 18px;margin-bottom:10px}
.wbcol-article summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;position:relative;padding-right:28px}
.wbcol-article summary::-webkit-details-marker{display:none}
.wbcol-article summary::after{content:"+";position:absolute;right:0;top:12px;font-size:22px;color:var(--brand)}
.wbcol-article details[open] summary::after{content:"−"}
.wbcol-article details p{margin:0 0 16px;font-size:15px;color:var(--ink-soft)}
.wbcol-article dl.terms{margin:0;display:grid;gap:10px}
.wbcol-article dl.terms div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.wbcol-article dl.terms dt{font-weight:700}
.wbcol-article dl.terms dd{margin:2px 0 0;font-size:14.5px;color:var(--ink-soft)}
.wbcol-article .mid-cta{background:#fff;border:2px solid var(--accent);border-radius:14px;padding:22px 24px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin-top:8px}
.wbcol-article .mid-cta p{margin:0;font-size:15px}
.wbcol-article .mid-cta b{display:block;font-size:17px}
.wbcol-article .final{background:linear-gradient(135deg,#0b3d91,#0b5fd8);color:#fff;text-align:center}
.wbcol-article .final h2{color:#fff}
.wbcol-article .final p{color:#eaf3ff;max-width:640px;margin:0 auto 24px}
.wbcol-article .wbcol-disclosure{background:#12233a;color:#b8c7da;font-size:13px;padding:32px 0}
.wbcol-article .wbcol-disclosure h2{font-size:14px;color:#fff;margin:0 0 6px}
.wbcol-article .wbcol-disclosure p{margin:0 0 14px}
@media (max-width:820px){.wbcol-article .picks,.wbcol-article .routes,.wbcol-article .flow{grid-template-columns:1fr}
.wbcol-article .detail .card{grid-template-columns:1fr}
.wbcol-article .pc{grid-template-columns:1fr}
.wbcol-article .scroll-hint{display:block}
.wbcol-article .compare tbody th{width:120px;font-size:13px}
.wbcol-article section{padding:44px 0}
.wbcol-article .toc ol{columns:1}
.wbcol-article .level{grid-template-columns:1fr}
.wbcol-article .level .lv{text-align:left;padding:6px 12px}
.wbcol-article .level .lv small{display:inline;margin-left:8px}
.wbcol-article .mid-cta{grid-template-columns:1fr}
.wbcol-article .err td:first-child{white-space:normal}}
.wbcol-article{--brand:#126397;--brand-dark:#174b68;--accent:#bc7139;--accent-dark:#93562a;background:#f7f8f6;font-family:var(--wbr-font,sans-serif)}
.wbcol-article header.hero{background:#edf3f3;color:#172d43;border-bottom:1px solid #dce5e8;padding:56px 0}
.wbcol-article .hero p.lead,.wbcol-article .hero .meta{color:#4a6472}
.wbcol-article .hero .eyebrow{background:#fff;color:#176b65;border-color:#c7d9d9}
.wbcol-article .hero h1{letter-spacing:.02em}
.wbcol-article .btn{border-radius:5px;box-shadow:none}
.wbcol-article .final{background:#173c50}
.wbcol-article .wbcol-disclosure{background:#edf3f3;color:#4a6472;padding:36px 0}
.wbcol-article .wbcol-disclosure h2{color:#172d43}
.wbcol-back{max-width:1040px;margin:auto;padding:22px 16px;font:600 14px/1.8 var(--wbr-font,sans-serif)}
.wbcol-back a{color:#126397}
.wbcol-article a:focus-visible{outline:3px solid #bd7136;outline-offset:4px}
.wbcol-article section[id]{scroll-margin-top:120px}