:root{
  --bg0:#f7f9ff; --bg1:#ffffff; --bg2:#f3f7ff;
  --surface:#ffffff; --surface2:rgba(255,255,255,.72);
  --line:rgba(15,23,42,.10); --line2:rgba(15,23,42,.07);
  --text:#0b1220; --muted:#3c4966; --muted2:#5d6c8d;
  --brand:#2563eb; --brand2:#7c3aed; --good:#10b981;
  --radius:16px; --radius2:22px;
  --shadow:0 18px 55px rgba(2, 6, 23,.10);
  --shadow2:0 10px 26px rgba(2, 6, 23,.08);
  --max:1180px; --pad:18px;
  --font: ui-sans-serif, system-ui, -apple-system,
          "Inter","SF Pro Text",
          "Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",
          "Noto Sans SC","PingFang SC","Microsoft YaHei",
          sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(37,99,235,.14), transparent 62%),
    radial-gradient(820px 520px at 92% 8%, rgba(124,58,237,.10), transparent 58%),
    radial-gradient(740px 520px at 70% 115%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 42%, var(--bg2));
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.small,small{color:var(--muted2);font-size:12px;line-height:1.75}
:focus-visible{outline:2px solid rgba(37,99,235,.65);outline-offset:3px;border-radius:12px}
.nav{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(1.25) blur(14px);
  border-bottom:1px solid var(--line2);
}
.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo{display:flex;align-items:center;gap:12px;font-weight:950;letter-spacing:.2px}
.mark{width:34px;height:34px;border-radius:14px;background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.90));
  box-shadow:0 14px 40px rgba(37,99,235,.18);position:relative}
.mark:after{content:"";position:absolute;inset:1px;border-radius:13px;background:linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.02));mix-blend-mode:overlay}
.links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.links a{color:var(--muted);font-weight:900;font-size:13px;padding:9px 10px;border-radius:12px}
.links a:hover{color:var(--text);background:rgba(37,99,235,.06)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
  color:var(--text);font-weight:950;font-size:13px;
  box-shadow:0 10px 26px rgba(2, 6, 23,.06);
}
.btn.primary{border:0;background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.92));
  color:#fff;box-shadow:0 20px 55px rgba(37,99,235,.18)}
.btn.ghost{background:transparent;border:1px solid var(--line);box-shadow:none}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.72);color:var(--muted);font-weight:900;font-size:12px}
.badge .dot{width:8px;height:8px;border-radius:999px;background:var(--good);box-shadow:0 0 0 6px rgba(16,185,129,.12)}
.lang{display:flex;gap:8px;align-items:center}
.lang a{padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.70);
  color:var(--muted);font-weight:900;font-size:12px}
.lang a.active{color:var(--text);border-color:rgba(37,99,235,.28);background:rgba(37,99,235,.08)}
.burger{display:none;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.70);color:var(--text)}
.burger svg{width:22px;height:22px}
.mobile{display:none;border-top:1px solid var(--line2);padding:12px 0 14px}
.mobile a{display:block;padding:11px 10px;border-radius:14px;color:var(--muted);font-weight:900}
.mobile a:hover{color:var(--text);background:rgba(37,99,235,.06)}
.mobile .sep{height:10px}
header.hero{padding:64px 0 14px}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:16px;align-items:stretch}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.60));
  border:1px solid var(--line2);border-radius:var(--radius2);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.card:before{content:"";position:absolute;inset:-2px;background:
  radial-gradient(520px 230px at 14% 0%, rgba(37,99,235,.10), transparent 62%),
  radial-gradient(520px 260px at 90% 30%, rgba(124,58,237,.08), transparent 60%);
  pointer-events:none}
.hero-left{padding:30px}
.kicker{display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:var(--muted);font-weight:900;font-size:12px;letter-spacing:.25px}
h1{margin:12px 0 10px;line-height:1.14;font-size:40px;letter-spacing:-.4px}
.sub{color:var(--muted);line-height:1.9;margin:0 0 16px;font-size:15px;max-width:68ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pill{padding:8px 10px;border-radius:999px;border:1px solid var(--line2);background:rgba(2, 6, 23,.03);
  color:var(--muted);font-weight:900;font-size:12px}
.note{color:var(--muted2);font-size:13px;line-height:1.9;margin:12px 0 0}
.hero-right{padding:18px}
.stat{padding:16px;border-radius:18px;border:1px solid var(--line2);background:rgba(255,255,255,.78);
  box-shadow:var(--shadow2);margin-bottom:12px}
.stat b{font-size:16px}
.stat p{margin:8px 0 0;color:var(--muted);line-height:1.85;font-size:13px}
main{padding:22px 0 52px}
section{padding:26px 0}
.section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px}
.section-title h2{margin:0;font-size:22px;letter-spacing:-.2px}
.section-title p{margin:0;color:var(--muted);font-size:14px;line-height:1.7;max-width:60ch}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.box{padding:18px}
.box h3{margin:10px 0 6px;font-size:16px}
.box p{margin:0;color:var(--muted);line-height:1.9;font-size:14px}
.icon{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.10));font-weight:950}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{padding:16px;border-radius:18px;border:1px solid var(--line2);background:rgba(255,255,255,.76)}
.step .n{font-weight:950;color:rgba(37,99,235,.95)}
.step h3{margin:8px 0 6px;font-size:15px}
.step p{margin:0;color:var(--muted);line-height:1.85;font-size:13px}
.page{padding:22px 0 44px}
.page h1{font-size:28px;margin:10px 0 6px;letter-spacing:-.2px}
.page h2{font-size:18px;margin:22px 0 10px}
.page p{color:var(--muted);line-height:1.95;margin:0 0 10px}
.page li{color:var(--muted);line-height:1.95;margin:6px 0}
.breadcrumb{color:var(--muted2);font-weight:900;font-size:13px;margin-top:6px}
footer{padding:26px 0 42px;color:var(--muted2);font-size:13px}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line2);padding-top:14px}
.small-links{display:flex;gap:12px;flex-wrap:wrap}
.small-links a{color:var(--muted2)}
.small-links a:hover{color:var(--text)}
.fab{display:none;position:fixed;right:16px;bottom:16px;z-index:50;border-radius:999px;padding:12px 14px;border:0;
  background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.92));color:#fff;font-weight:950;box-shadow:0 20px 55px rgba(37,99,235,.18)}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  h1{font-size:34px}
  .grid-3,.grid-2,.split,.steps{grid-template-columns:1fr}
  .links{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .mobile.show{display:block}
  .fab{display:inline-flex;align-items:center;gap:8px}
}