:root{
  --navy:#123b66; --blue:#2f80ed; --sky:#eaf6ff; --green:#65b96e;
  --orange:#f28a3b; --gold:#f4c96b; --text:#243247; --muted:#607080;
  --border:#dfe7ee; --bg:#ffffff; --off:#fafbf9;
  --max:1200px; --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:var(--bg);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.8}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.header-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-weight:800;color:var(--navy);letter-spacing:.02em}
.nav{display:flex;gap:24px;align-items:center;font-size:.95rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;border-radius:999px;font-weight:700}
.btn-primary{background:var(--navy);color:#fff}
.btn-secondary{border:1px solid var(--navy);color:var(--navy);background:#fff}
.hero{padding:72px 0 56px;background:linear-gradient(90deg,#fff 0%,#fff 46%,#f6fbff 100%)}
.hero-grid{display:grid;grid-template-columns:46% 54%;gap:48px;align-items:center}
.eyebrow,.section-label{font-size:.78rem;letter-spacing:.15em;font-weight:800;color:var(--blue);text-transform:uppercase}
h1{font-size:clamp(3rem,6vw,5.2rem);line-height:1.05;letter-spacing:-.03em;margin:.2em 0}
h2{font-size:clamp(2.1rem,4vw,3.5rem);line-height:1.2;letter-spacing:-.02em;margin:.25em 0}
h3{font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.4;margin:.15em 0}
.lead{font-size:clamp(1.12rem,1.7vw,1.35rem);color:var(--muted)}
.hero-actions,.section-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.visual-placeholder{border:1px dashed #9ab2c6;border-radius:var(--radius);background:linear-gradient(135deg,#f8fcff,#eef8f1);min-height:420px;display:flex;align-items:center;justify-content:center;padding:28px;text-align:center;color:#6b7f90}
section{padding:104px 0}
.section-head{max-width:820px;margin:0 auto 48px;text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:28px;background:#fff;box-shadow:0 10px 30px rgba(20,56,91,.05)}
.card small{color:var(--blue);font-weight:700}
.tags{color:var(--muted);font-size:.9rem}
.band{background:var(--off)}
.sky{background:linear-gradient(180deg,#eef8ff,#fff 45%,#f2fbf4)}
.center{text-align:center}
.flow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-weight:700;color:var(--navy);margin-top:28px}
.footer{padding:56px 0 30px;background:var(--navy);color:#fff}
.footer-nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.note{font-size:.9rem;color:var(--muted)}
.definition{max-width:900px;margin:0 auto;font-size:1.18rem}
blockquote{margin:24px 0;padding:18px 22px;border-left:4px solid var(--blue);background:#f7fbff}
@media (max-width:900px){
  .hero-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .nav{display:none}
  .hero{padding-top:48px}
  .visual-placeholder{min-height:300px}
  section{padding:72px 0}
}
@media (max-width:600px){
  .container{width:min(calc(100% - 28px),100%)}
  .hero-actions,.section-actions{flex-direction:column}
  .btn{width:100%}
  section{padding:60px 0}
}