:root {--p:#1d4e89;--a:#ffb703;--bg:#f4f8fc;--cb:#e8f1fb;--ink:#1f2a33;--mute:#5a6b78;}
* {box-sizing:border-box}
body {margin:0;background:var(--bg);font-family:"Noto Sans JP",sans-serif;line-height:1.75;color:var(--ink)}
a {color:var(--p);text-decoration:none}
a:hover {text-decoration:underline}
.site-header {display:flex;gap:1rem;justify-content:space-between;align-items:center;padding:1rem 4vw;background:#ffffffe8;position:sticky;top:0;z-index:5;border-bottom:1px solid #d8d8d8}
nav ul {display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.menu-toggle {display:none}
.hero {position:relative;min-height:560px;color:#fff;padding:0 8vw;display:flex;align-items:center;justify-content:flex-start;background:url('../images/chart-hero-overview.jpg') center/cover}
.hero::before {content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(0,0,0,.64),rgba(0,0,0,.28))}
.hero>div {position:relative;max-width:700px;text-align:left}
.btn {display:inline-block;padding:.62rem 1.1rem;border-radius:999px;font-weight:700;margin-right:.5rem}
.b1 {background:var(--a);color:#111}
.b2 {background:#ffffffe3;color:#111}
main section {width:min(1120px,92vw);margin:2rem auto}
.grid {display:grid;gap:1rem}
.g3 {grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g2 {grid-template-columns:1fr 1fr;align-items:center}
.card {background:#fff;border-radius:16px;padding:1rem;box-shadow:0 12px 28px rgba(0,0,0,.08)}
img {max-width:100%;display:block;border-radius:14px}
.topic {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}

/* Article header */
.article-head {width:min(860px,92vw);margin:2rem auto 1rem}
.crumbs {display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--mute);flex-wrap:wrap;margin:0 0 .9rem}
.crumbs a {color:var(--mute)}
.crumbs a:hover {color:var(--p)}
.crumbs i {font-size:.7rem;opacity:.55}
.crumbs .curr {color:var(--p);font-weight:600}
.article-head h1 {font-size:1.85rem;line-height:1.45;margin:0 0 .95rem;color:#0e2033;font-weight:800;border-left:6px solid var(--a);padding:.15rem 0 .15rem 1rem}
.meta {display:flex;gap:.5rem;flex-wrap:wrap;font-size:.82rem;margin:0}
.meta .chip {display:inline-flex;align-items:center;gap:.35rem;background:#ffffff;border:1px solid #d8e3ef;color:#3a4d5f;border-radius:999px;padding:.28rem .8rem}
.meta .chip i {color:var(--p);font-size:.78rem}

/* Article body */
.article {width:min(860px,92vw);margin:1rem auto 2rem;background:#fff;border-radius:16px;padding:2.5rem 3rem;box-shadow:0 10px 26px rgba(0,0,0,.08);counter-reset:sec-n}
.article>img {margin-bottom:2rem;width:100%;border-radius:12px}
.article section {width:auto;padding-bottom:2.2rem;border-bottom:1px solid #e4eef8;margin:0 0 2.2rem;counter-increment:sec-n}
.article section:last-child {padding-bottom:0;border-bottom:none;margin-bottom:0}
.article h2 {display:flex;align-items:center;gap:.8rem;font-size:1.2rem;font-weight:700;color:var(--p);background:linear-gradient(90deg,#eaf3fd 0%,#f7fbff 70%,transparent 100%);border-radius:10px;padding:.72rem 1rem;margin:0 0 1.2rem;line-height:1.5;border-right:3px solid var(--a)}
.article h2::before {content:counter(sec-n,decimal-leading-zero);color:var(--p);background:#fff;border:2px solid var(--p);min-width:2rem;height:2rem;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:.88rem;font-weight:800;flex-shrink:0;padding:0 .3rem}
.article p {margin:.85rem 0;line-height:1.95}
.article p:first-of-type {margin-top:0}
.article ol {padding:0;margin:1rem 0;list-style:none;counter-reset:step-n}
.article ol li {counter-increment:step-n;position:relative;padding:.7rem 0 .7rem 2.85rem;border-bottom:1px dashed #d8e8f5;line-height:1.8}
.article ol li:last-child {border-bottom:none}
.article ol li::before {content:counter(step-n);position:absolute;left:0;top:.85rem;background:var(--p);color:#fff;width:1.75rem;height:1.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}
.article ul {padding-left:1.3rem;margin:.85rem 0}
.article ul li {margin:.45rem 0;line-height:1.85}

/* Lead paragraph */
.lead {font-size:1.02rem;line-height:2;color:#2a3a4a;background:linear-gradient(180deg,#fff9ec 0%,#fffdf7 100%);border-left:4px solid var(--a);border-radius:0 12px 12px 0;padding:1.1rem 1.35rem;margin:0 0 1.6rem !important}

/* Inline keyword highlights */
.kw {background:linear-gradient(180deg,transparent 60%,#ffe69a 60%);padding:0 .12rem;font-weight:700;color:#1a2430}
.term {display:inline-block;background:#eaf3fd;color:var(--p);font-weight:700;padding:.02rem .5rem;border-radius:6px;font-size:.92rem;margin:0 .1rem;border:1px solid #d2e3f6}

/* Callout variants */
.callout {background:var(--cb);border-left:4px solid var(--p);border-radius:0 12px 12px 0;padding:1rem 1.3rem;margin:1.3rem 0}
.callout b {display:flex;align-items:center;gap:.45rem;color:var(--p);font-size:.95rem;margin-bottom:.4rem}
.callout b i {font-size:.95rem}
.callout.tip {background:#eaf7ef;border-color:#2e8b57}
.callout.tip b {color:#256b43}
.callout.warn {background:#fdecec;border-color:#c84040}
.callout.warn b {color:#a12a2a}
.callout.point {background:#fff6e6;border-color:var(--a)}
.callout.point b {color:#b37600}
.callout ol {margin:.4rem 0 0}
.callout ul {margin:.4rem 0 0;padding-left:1.2rem}
.callout p {margin:.35rem 0}

/* Compare grid (2-column contrast cards) */
.compare {display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0}
.compare>div {background:#f7fbff;border:1px solid #dbe7f3;border-radius:12px;padding:1rem 1.1rem}
.compare h4 {margin:0 0 .5rem;font-size:1rem;color:var(--p);display:flex;align-items:center;gap:.5rem}
.compare h4 span.tag {width:1.9rem;height:1.9rem;border-radius:50%;background:var(--p);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:.78rem;font-weight:800;flex-shrink:0}
.compare p {margin:.35rem 0;line-height:1.8;font-size:.94rem}
.compare.bear-bull>div:first-child {background:#fff5f5;border-color:#f1cccc}
.compare.bear-bull>div:first-child h4 {color:#a12a2a}
.compare.bear-bull>div:first-child h4 span.tag {background:#a12a2a}
.compare.bear-bull>div:last-child {background:#eef7f1;border-color:#bddecb}
.compare.bear-bull>div:last-child h4 {color:#256b43}
.compare.bear-bull>div:last-child h4 span.tag {background:#256b43}

/* Definition list */
.deflist {display:grid;grid-template-columns:max-content 1fr;gap:.6rem 1.1rem;margin:1.1rem 0;padding:1.1rem 1.3rem;background:#f4f8fc;border-radius:12px;border:1px solid #e1eaf3}
.deflist dt {font-weight:700;color:var(--p);padding-top:.1rem;white-space:nowrap}
.deflist dd {margin:0;line-height:1.8;font-size:.95rem}

/* Next step card */
.next-step {background:linear-gradient(135deg,#f3f9ff 0%,#eaf3fd 100%);border:1px solid #d2e3f6;border-radius:14px;padding:1.1rem 1.3rem;margin:1.3rem 0;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center}
.next-step .ico {width:2.8rem;height:2.8rem;background:var(--p);color:#fff;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem}
.next-step .lbl {display:block;font-size:.78rem;color:var(--p);margin-bottom:.2rem;letter-spacing:.06em;font-weight:700}
.next-step .title {display:block;font-weight:700;font-size:1rem;margin-bottom:.15rem}
.next-step p {margin:.15rem 0 0;font-size:.88rem;color:#3a4d5f;line-height:1.7}

/* Back-link pill */
.back-link {display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid #d8e3ef;color:var(--p);font-weight:700;padding:.55rem 1.1rem;border-radius:999px;text-decoration:none;margin-top:.9rem;font-size:.92rem}
.back-link:hover {background:var(--cb);text-decoration:none}

/* Misc layout */
.contact-soft {background:var(--cb);border-radius:22px;padding:1rem}
.split {display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.info .row {display:grid;grid-template-columns:34px 1fr;gap:.7rem;padding:.75rem;background:#ffffffcf;border-radius:12px;margin-bottom:.6rem}
.info i,.info span {font-size:1.35rem;color:var(--p)}
form {background:#fff;border-radius:18px;padding:1rem;box-shadow:0 12px 24px rgba(0,0,0,.07);display:grid;gap:.35rem}
input,textarea {width:100%;padding:.62rem;border:1px solid #bbb;border-radius:12px;font:inherit}
form button {border:0;background:var(--p);color:#fff;border-radius:999px;padding:.68rem 1rem;font-weight:700;cursor:pointer}
.map iframe {width:100%;height:380px;border:0;border-radius:14px}
footer {background:#111820;color:#e8eef5;padding:2rem 4vw;margin-top:2rem}
.fg {width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
footer a {color:#f4d58d}
.cookie {position:fixed;right:1rem;bottom:1rem;width:min(420px,calc(100vw - 2rem));background:#121212;color:#fff;border-radius:14px;padding:.85rem;z-index:8}
.cookie button {border:0;border-radius:999px;background:var(--a);padding:.45rem .9rem;font-weight:700}
.hide {display:none}

@media(max-width:900px){
  .menu-toggle{display:inline-flex}
  nav{display:none}
  nav.open{display:block}
  nav ul{flex-direction:column}
  .site-header{flex-wrap:wrap}
  .g2,.split,.compare{grid-template-columns:1fr}
  .hero{min-height:500px;padding:0 6vw}
  .map iframe{height:300px}
  .article{padding:1.75rem 1.5rem}
  .article-head h1{font-size:1.5rem}
  .deflist{grid-template-columns:1fr;gap:.25rem .5rem}
  .deflist dt{padding-top:.6rem}
}
@media(max-width:560px){
  .hero{min-height:470px}
  .map iframe{height:270px}
  .article{padding:1.2rem 1rem}
  .article h2{font-size:1.05rem;padding:.6rem .75rem;gap:.6rem}
  .article-head h1{font-size:1.35rem}
  .next-step{grid-template-columns:1fr}
  .next-step .ico{width:2.4rem;height:2.4rem}
}