:root{
--ink:#191924;--sub:#666676;--faint:#9696a6;--line:#e4e4ee;--bg:#fff;--soft:#f6f6fa;
--accent:#7a4bbd;--accent-d:#54307f;--accent-l:#f2ecfb;
--warm:#c4643c;--deep:#191926;--deep2:#241f33;
--ok:#1f8f5f;--flat:#8a8a9a;
--r:13px;--sh:0 1px 2px rgba(25,25,36,.05),0 8px 22px -12px rgba(25,25,36,.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
color:var(--ink);background:var(--bg);line-height:1.85;font-size:16px;font-feature-settings:"palt" 1}
img,svg{max-width:100%}
a{color:var(--accent-d);text-underline-offset:2px}
.wrap{max-width:940px;margin:0 auto;padding:0 18px}
.num{font-variant-numeric:tabular-nums}

header.site{background:var(--deep);color:#fff;position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;gap:6px 18px;min-height:54px;flex-wrap:wrap}
header.site .brand{font-weight:800;font-size:17px;text-decoration:none;color:#fff;white-space:nowrap;line-height:1.25}
header.site .brand span{color:#b79aea;font-size:10.5px;display:block;letter-spacing:.18em;font-weight:700}
header.site nav{display:flex;gap:15px;flex-wrap:wrap;font-size:13.5px;margin-left:auto}
header.site nav a{color:#c6c6d6;text-decoration:none;padding:3px 0;border-bottom:2px solid transparent}
header.site nav a:hover{color:#fff;border-bottom-color:var(--accent)}

.hero{background:linear-gradient(135deg,var(--deep) 0%,var(--deep2) 58%,var(--accent-d) 145%);color:#fff;padding:32px 0 28px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;opacity:.14;
background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse at 80% 4%,#000,transparent 66%);mask-image:radial-gradient(ellipse at 80% 4%,#000,transparent 66%)}
.hero .wrap{position:relative;z-index:1}
.hero .kick{font-size:11px;letter-spacing:.22em;font-weight:800;color:#c3a9f0;margin:0 0 8px}
.hero h1{font-size:29px;line-height:1.34;margin:0 0 10px;font-weight:800;color:#fff}
.hero p{margin:0;color:#d3d3e0;font-size:15px;max-width:60ch}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:9px;margin-top:20px}
.stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:11px;padding:10px 12px}
.stat b{display:block;font-size:21px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums}
.stat span{font-size:11.5px;color:#c0c0d2}

h1.page{font-size:26px;line-height:1.4;margin:26px 0 6px;font-weight:800}
h2{font-size:20px;margin:34px 0 10px;font-weight:800;padding-left:11px;border-left:4px solid var(--accent)}
h3{font-size:16.5px;margin:22px 0 6px;font-weight:800}
p{margin:0 0 14px}
.lead{font-size:16.5px;color:#3a3a48}
.note{font-size:13.5px;color:var(--sub)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px;margin:16px 0 6px;padding:0;list-style:none}
.tiles a{display:block;border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;text-decoration:none;color:inherit;background:#fff;box-shadow:var(--sh)}
.tiles a:hover{border-color:var(--accent);background:var(--accent-l)}
.tiles b{display:block;font-size:16px;font-weight:800;margin-bottom:2px}
.tiles em{font-style:normal;color:var(--sub);font-size:13px;font-variant-numeric:tabular-nums}

.tblwrap{overflow-x:auto;margin:14px 0}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
th{background:var(--soft);font-weight:700;white-space:nowrap;font-size:13.5px}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:hover{background:var(--accent-l)}

.bar{display:block;height:7px;border-radius:4px;background:var(--accent);min-width:3px}
.bar.w{background:var(--warm)}
.bar.f{background:var(--flat)}

.callout{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 var(--r) var(--r) 0;padding:14px 16px;margin:18px 0}
.callout p:last-child{margin-bottom:0}

footer.site{background:var(--deep);color:#a8a8bb;margin-top:52px;padding:26px 0 34px;font-size:13.5px}
footer.site nav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}
footer.site a{color:#c9c9db}
footer.site p{margin:0 0 9px;max-width:74ch}

/* ★スマホ: 広い表をカードに変える。DOMの文字は増やさず data-label を CSS で出す */
@media(max-width:640px){
  .hero h1{font-size:24px}
  h1.page{font-size:22px}
  .cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cards tbody tr{display:block;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;padding:6px 12px;box-shadow:var(--sh)}
  .cards td{display:flex;justify-content:space-between;gap:12px;border:0;border-bottom:1px dashed var(--line);padding:7px 0;text-align:right}
  .cards tbody tr td:last-child{border-bottom:0}
  .cards td::before{content:attr(data-label);color:var(--sub);font-size:12.5px;font-weight:700;text-align:left;white-space:nowrap}
  .cards td.name{display:block;text-align:left;font-weight:800;font-size:15.5px}
  .cards td.name::before{display:none}
}