:root{
  --bg:#0b1020;
  --bg2:#121933;
  --panel:#11182b;
  --panel2:#161f38;
  --text:#eef2ff;
  --muted:#b8c0dd;
  --line:rgba(255,255,255,.08);
  --accent:#c7b7ff;
  --accent2:#7ca8ff;
  --warm:#f3c88f;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --radius:28px;
  --content:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(124,168,255,.22), transparent 60%),
    radial-gradient(700px 420px at 100% 10%, rgba(199,183,255,.18), transparent 55%),
    linear-gradient(180deg,#0a1020 0%,#0b1020 45%,#0d1122 100%);
  line-height:1.8;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(calc(100% - 40px),var(--content));margin:0 auto}
header.site-header{
  position:sticky;top:0;z-index:30;
  backdrop-filter: blur(18px);
  background:rgba(8,12,24,.6);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.04em}
.brand img{width:34px;height:34px}
nav.main-nav{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
nav.main-nav a{font-size:.95rem;color:#dbe3ff}
nav.main-nav a:hover{color:white}
.top-cta{padding:10px 16px;border-radius:999px;background:linear-gradient(135deg,#fff,#dfe7ff);color:#0b1020;font-weight:700;box-shadow:var(--shadow)}
.hero{padding:86px 0 44px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#d8deff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.hero h1{font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.12;margin:18px 0 18px;letter-spacing:-.02em}
.hero p{font-size:1.06rem;color:var(--muted);max-width:48rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 20px;border-radius:999px;border:1px solid var(--line);
  font-weight:700;transition:.22s ease;cursor:pointer
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,#ffffff,#d6deff);color:#0b1020;box-shadow:var(--shadow)}
.btn.soft{background:rgba(255,255,255,.06);color:white}
.hero-card,.panel,.feature-card,.review-card,.compare-card,.faq-card,.mini-card,.cta-band,.note-card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-card{padding:22px}
.hero-card img{border-radius:22px;border:1px solid var(--line)}
.hero-card figcaption{padding:14px 4px 2px;color:var(--muted);font-size:.93rem}
.section{padding:26px 0 68px}
.section h2{font-size:clamp(1.8rem,3vw,3rem);line-height:1.22;margin:0 0 14px}
.section p.lead{color:var(--muted);max-width:52rem;margin:0 0 24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.feature-card,.review-card,.compare-card,.faq-card,.mini-card{padding:24px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(124,168,255,.12);color:#dce7ff;border:1px solid rgba(124,168,255,.16);font-size:.82rem;font-weight:700}
.eyebrow{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#cdd7ff}
.feature-card h3,.review-card h3,.compare-card h3,.faq-card h3,.mini-card h3{font-size:1.28rem;line-height:1.35;margin:12px 0 10px}
.muted{color:var(--muted)}
.clean-list{display:grid;gap:12px;padding:0;list-style:none;margin:18px 0 0}
.clean-list li{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product-card{display:flex;flex-direction:column;gap:14px;padding:22px}
.product-card img{border-radius:20px;border:1px solid var(--line);background:#0e1528}
.product-card h3{font-size:1.34rem;line-height:1.35;margin:0}
.product-card .fit{color:var(--muted);font-size:.98rem}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.82rem;color:#d7dfff}
.actions-inline{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.actions-inline .btn{padding:12px 16px}
.summary-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
table.compare{width:100%;border-collapse:collapse;min-width:780px;background:rgba(255,255,255,.03)}
table.compare th,table.compare td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
table.compare th{font-size:.93rem;color:#dbe2ff;text-align:left;background:rgba(255,255,255,.03)}
table.compare td:first-child,table.compare th:first-child{position:sticky;left:0;background:#121933}
.note-card{padding:22px}
.cta-band{padding:28px;margin-top:28px}
.cta-band h3{margin:0 0 8px;font-size:1.5rem}
.cta-band p{margin:0;color:var(--muted)}
footer.site-footer{padding:42px 0 56px;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:18px;align-items:end}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.article-hero{padding:68px 0 26px}
.article-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.article-card{padding:28px}
.article-card h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1.15;margin:14px 0 16px}
.article-card h2{font-size:1.7rem;line-height:1.35;margin:34px 0 12px}
.article-card h3{font-size:1.22rem;margin:24px 0 10px}
.article-card p,.article-card li{color:#e8edff}
.article-card .lede{font-size:1.06rem;color:var(--muted)}
.article-card ul,.article-card ol{padding-left:1.2rem}
.article-card blockquote{
  margin:20px 0;padding:16px 18px;border-left:3px solid rgba(199,183,255,.7);
  background:rgba(255,255,255,.04);border-radius:0 18px 18px 0;color:#dde4ff
}
.sticky{position:sticky;top:88px}
.sidebox{padding:20px}
.sidebox h3{margin:0 0 10px;font-size:1.05rem}
.sidebox .btn{width:100%}
.kv{display:grid;gap:10px}
.kv div{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:.94rem}
.inline-figure{margin:22px 0}
.inline-figure img{border-radius:22px;border:1px solid var(--line)}
.inline-figure figcaption{margin-top:10px;color:var(--muted);font-size:.9rem}
.callout{padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.callout strong{color:#fff}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.88rem;color:#c6d1f5}
.breadcrumbs a{color:#d7e0ff}
.divider{height:1px;background:var(--line);margin:24px 0}
.notice{font-size:.9rem;color:#d4dcff;background:rgba(255,255,255,.05);padding:14px 16px;border:1px solid var(--line);border-radius:18px}
@media (max-width: 980px){
  .hero-grid,.summary-grid,.article-layout,.footer-grid{grid-template-columns:1fr}
  .grid-3,.product-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  nav.main-nav{display:none}
}