:root{--bg:#f7fafc;--ink:#0e1b2a;--muted:#596a79;--line:rgba(0,0,0,.08);--card:#fff;
--accent:#0ea5e9;--accent2:#10b981;--max:1200px;--rad:18px;--shadow:0 14px 34px rgba(17,24,39,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:radial-gradient(100% 60% at 0% 0%, #e6f7ff 0%, transparent 40%),radial-gradient(100% 60% at 100% 0%, #e9fff6 0%, transparent 40%),var(--bg);
font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif}
img{max-width:100%;display:block}a{color:var(--accent);text-decoration:none}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:20px}
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;border-radius:12px;background:conic-gradient(from 0deg,#6ee7b7,#93c5fd,#fde68a,#6ee7b7);padding:2px}
.logo::after{content:'';display:block;width:100%;height:100%;border-radius:10px;background:#fff}
.title{font-weight:800;letter-spacing:.01em}
nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
nav a{display:inline-block;padding:8px 10px;border-radius:10px}
nav a:hover{background:rgba(14,165,233,.08)}
nav details{position:relative}
nav details>summary{list-style:none;cursor:pointer;padding:8px 10px;border-radius:10px}
nav details[open]>summary, nav details>summary:hover{background:rgba(14,165,233,.08)}
nav details .menu{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;min-width:220px;padding:8px;margin-top:8px}
nav details .menu a{display:block;padding:10px 12px;border-radius:8px;white-space:nowrap}
nav details .menu a:hover{background:rgba(14,165,233,.08)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.btn.pri{background:linear-gradient(180deg,#e6f7ff,#fff)}
.btn.acc{background:linear-gradient(180deg,#eafcf6,#fff)}
.hero{position:relative}.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;padding-block:56px}
.headline{font-size:clamp(28px,4.2vw,46px);font-weight:900;line-height:1.15}
.lead{color:var(--muted);margin:12px 0 22px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 16px}
.chip{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font-size:14px}
.mock{border-radius:22px;border:1px solid var(--line);background:#ffffff;padding:14px;min-height:300px;box-shadow:var(--shadow)}
section{padding-block:54px;border-top:1px solid var(--line)}h2{font-size:clamp(22px,3.2vw,32px);margin:0 0 14px}
.grid{display:grid;gap:16px}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:18px;box-shadow:var(--shadow)}.card h3{margin:0 0 8px}
table{width:100%;border-collapse:collapse;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left}th{background:rgba(14,165,233,.14)}tr:nth-child(even) td{background:rgba(0,0,0,.02)}
footer{padding:34px 0;color:#5f6b76;background:#ffffff}.tiny{font-size:12px;color:#70808e}
@media (max-width:900px){nav{display:none}.hero .wrap{grid-template-columns:1fr}.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}