/* 解説記事（トップと同じ navi.css の配色に載せる）。クラスは art- で始め、navi.css と衝突させない */
.art-hero{position:relative;color:#fff;min-height:330px;overflow:hidden;background:#18394f}
.art-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d2639ef 0%,#0d2639c4 55%,#0d263930 100%)}
.art-hero-inner{position:relative;z-index:1;max-width:1180px;margin:auto;padding:56px 0 64px}
.art-hero h1{font-size:38px;line-height:1.5;margin:20px 0 14px;letter-spacing:.02em;max-width:22em}
.art-hero h1 .ph{display:inline-block}
.art-meta{display:flex;gap:6px 22px;flex-wrap:wrap;font-size:13px;color:#dbe6f0}
.art-hero .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.art-hero .chip{background:#ffffff1f;border:1px solid #ffffff47;padding:9px 14px;font-size:12px;line-height:1.4}
.art-hero .chip b{display:block;font-size:22px;line-height:1.3}
.art-hero .chip b small{font-size:12px;margin-left:2px;opacity:.8}
.art-credit{position:absolute;right:0;bottom:-40px;font-size:10px;color:#ffffffb3}
.art-credit a{color:inherit}
.art-layout{max-width:1180px;margin:0 auto;padding:38px 0 64px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:36px}
.art-body{background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);padding:38px 48px 44px;font-size:15.5px;line-height:1.95;overflow-wrap:anywhere}
.art-body>p:first-child{font-size:17px;color:var(--navy)}
.art-body h2{font-size:24px;line-height:1.5;color:var(--navy);margin:52px 0 16px;padding:10px 14px;background:#fff4e6;border-left:5px solid var(--orange);scroll-margin-top:16px;display:flex;gap:12px;align-items:baseline}
.art-body h2:first-child{margin-top:0}
.art-body h2 .no{font-size:13px;font-weight:700;color:#fff;background:var(--orange);padding:1px 9px;white-space:nowrap}
.art-body h3{font-size:17px;color:var(--navy);margin:30px 0 8px}
.art-body p{margin:0 0 14px}
.art-body ul,.art-body ol{padding-left:1.4em;margin:14px 0}
.art-body li{margin:0 0 10px}
.art-body a{color:#226b9b;text-decoration:underline}
.art-body .num{font-feature-settings:"tnum"}
.art-body .datacard{margin:28px 0;background:var(--navy);color:#e3ecf6;padding:20px 24px 16px}
.art-body .datacard header{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#a9bdd3;margin-bottom:12px}
.art-body .datacard header b{color:#fff;font-size:14px}
.art-body .drow{display:grid;grid-template-columns:7.5em 1fr 4.5em;gap:14px;align-items:center;font-size:13px;padding:5px 0}
.art-body .drow i{display:block;height:8px;background:#ffffff1f;position:relative;overflow:hidden}
.art-body .drow i:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--orange)}
.art-body .drow u{text-decoration:none;text-align:right;color:#fff}
.art-body .datacard footer{margin-top:12px;padding-top:10px;border-top:1px solid #ffffff1f;font-size:11.5px;color:#9db2c8}
.art-body .note{margin:24px 0;padding:16px 18px;background:#f5f7fa;border-left:4px solid #b9c4d0;font-size:14.5px;line-height:1.85;color:#3b4d62}
.art-body .note.warm{background:var(--cream);border-left-color:#f0c17d}
.art-body .figure{margin:30px 0;position:relative;aspect-ratio:16/7;overflow:hidden}
.art-body .figure img{width:100%;height:100%;object-fit:cover;display:block}
.art-body .figure figcaption{position:absolute;left:0;bottom:0;font-size:12px;color:#fff;background:#0d2639b3;padding:5px 12px}
.art-body .figure figcaption a{color:inherit}
.art-body .steps{list-style:none;padding:0;counter-reset:s}
.art-body .steps li{counter-increment:s;position:relative;padding:0 0 0 48px;margin:0 0 16px}
.art-body .steps li:before{content:counter(s);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.art-body .prefs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.art-body .prefs a{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--line);background:#fff;color:var(--navy);text-decoration:none;font-weight:700;font-size:14px}
.art-body .prefs a:hover{border-color:var(--orange);color:var(--orange)}
.art-body .prefs a small{color:#728294;font-weight:400;font-size:12px}
.art-body .disclaimer{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:#6c7783;line-height:1.8}
.art-toc{position:sticky;top:16px;align-self:start;font-size:13px;background:#fff;border:1px solid var(--line);padding:0 18px 18px}
.art-toc h2{font-size:15px;background:var(--orange);color:#fff;margin:0 -18px 12px;padding:12px 17px}
.art-toc ol{list-style:none;margin:0;padding:0}
.art-toc a{display:block;padding:7px 0 7px 12px;border-left:3px solid transparent;color:var(--ink);text-decoration:none;line-height:1.5}
.art-toc a:hover{color:var(--orange)}
.art-toc a.on{border-left-color:var(--orange);color:var(--navy);font-weight:700}
.art-back{margin-top:16px;padding:14px;background:var(--cream)}
.art-back p{margin:0 0 10px;line-height:1.6}
.art-back .btn{display:block;width:100%}
.art-related{background:#eef1f5;margin-top:0;padding:44px 20px 56px}
@media(max-width:1024px){.art-layout{grid-template-columns:1fr;padding:28px 12px 48px}.art-toc{display:none}}
@media(max-width:700px){
  .art-hero{min-height:0}
  .art-hero-inner{padding:32px 16px 40px}
  .art-hero h1{font-size:25px}
  .art-credit{display:none}
  .art-body{padding:24px 18px 30px;font-size:15px}
  .art-body>p:first-child{font-size:16px}
  .art-body h2{font-size:19px;margin-top:38px;display:block}
  .art-body h2 .no{margin-right:8px}
  .art-body .datacard{padding:16px 14px 12px}
  .art-body .datacard header{flex-direction:column;gap:4px}
  .art-body .drow{grid-template-columns:7em 1fr 2.8em;gap:10px;font-size:12px;white-space:nowrap}
  .art-body .prefs{grid-template-columns:repeat(2,1fr)}
  .art-related{padding:32px 12px 40px}
}

/* 解説記事を比較表トップと同じ、軽いカードと余白のある見た目に統一 */
.art-hero{min-height:360px;background:#173d73}
.art-hero:after{background:linear-gradient(90deg,#122f5bea 0%,#173d73c7 51%,#173d7340 100%)}
.art-hero-inner{padding:64px 0 70px}
.art-hero .hero-tag{border-radius:999px;padding:8px 18px;box-shadow:0 3px 10px #0002}
.art-hero h1{font-size:clamp(32px,3vw,42px);line-height:1.42;text-wrap:balance}
.art-hero .chips{gap:12px;margin-top:24px}
.art-hero .chip{min-width:150px;border-radius:10px;background:#ffffffeb;border-color:#fff;color:var(--navy);box-shadow:0 4px 14px #0a24463d}
.art-hero .chip b{color:var(--navy)}
.art-layout{max-width:1160px;gap:28px;padding:48px 0 72px}
.art-body{border:1px solid #dfe7ef;border-top:0;border-radius:12px;padding:46px 52px 52px;box-shadow:0 6px 20px #18325212}
.art-body:before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--orange),#f7a23f);margin:-46px -52px 38px;border-radius:12px 12px 0 0}
.art-body h2{margin:52px 0 20px;padding:14px 18px;background:#fff7ea;border-left:0;border-radius:8px;box-shadow:inset 4px 0 var(--orange);font-size:23px}
.art-body h2 .no{border-radius:999px;padding:3px 10px}
.art-body .datacard{border-radius:10px;box-shadow:0 6px 16px #173d7324}
.art-body .note{border-radius:0 8px 8px 0}
.art-body .figure{border-radius:10px;box-shadow:0 4px 14px #18325224}
.art-body .prefs a{border-radius:8px;box-shadow:0 2px 6px #1832520d;transition:transform .15s,border-color .15s,color .15s}
.art-body .prefs a:hover{transform:translateY(-2px)}
.art-toc{border:1px solid #dfe7ef;border-radius:12px;padding:0 16px 16px;box-shadow:0 5px 16px #18325212;overflow:hidden}
.art-toc h2{margin:0 -16px 12px;padding:14px 18px;background:var(--navy);font-size:16px}
.art-toc a{padding:9px 0 9px 12px}
.art-back{border-radius:8px;background:#fff7ea;padding:15px;margin-top:18px}
.art-related{background:linear-gradient(180deg,#eef3f8 0%,#f7f9fb 100%);padding:58px 20px 68px}
@media(max-width:700px){
  .art-hero{min-height:0}.art-hero-inner{padding:36px 16px 42px}.art-hero h1{font-size:27px}
  .art-hero .chip{min-width:0;flex:1;padding:9px 10px}.art-hero .chip b{font-size:19px}
  .art-layout{padding:26px 16px 48px}.art-body{border-radius:10px;padding:30px 20px 36px}
  .art-body:before{margin:-30px -20px 28px}.art-body h2{font-size:19px;padding:12px 14px;margin-top:38px}
  .art-body .prefs{grid-template-columns:1fr}.art-related{padding:40px 16px 48px}
}