:root{--bg:#0d0e11;--ink:#e9e8e3;--sub:#8c8c89;--faint:#5c5c5a;--hair:rgba(233,232,227,.09)}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,"Helvetica Neue","Hiragino Sans",sans-serif;font-size:15px;line-height:1.85;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}main p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair)}main p a:hover{text-decoration-color:var(--ink)}main p a.tryout{display:block;text-decoration:none;border:1px solid var(--hair);padding:18px 20px;margin:26px 0 6px;max-width:none}main p a.tryout:hover{border-color:var(--ink)}main p a.tryout b{display:block;font-weight:400;font-size:15px;color:var(--ink)}main p a.tryout b::after{content:' →';color:var(--faint)}main p a.tryout i{display:block;font-style:normal;font-size:12px;color:var(--faint);margin-top:6px}
/* グロナビ。トップ(SPA)と同じ意匠に揃える */
.top{display:flex;justify-content:space-between;align-items:center;padding:24px 40px}
.top nav{display:flex;gap:28px;align-items:center}
.top nav a{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.top nav a:hover{color:var(--ink)}
.top nav a.lang{color:var(--faint)}
.top nav a.lang:hover{color:var(--ink)}
/* 計測マーク |——| = 隠れた H。光だけがペリウィンクル */
.cmark{display:flex;align-items:center;width:46px;height:12px;filter:drop-shadow(0 0 5px rgba(154,163,255,.40)) drop-shadow(0 0 14px rgba(154,163,255,.20));animation:cglow 5.2s ease-in-out infinite alternate}
.cmark i{width:2px;height:12px;background:var(--ink)}
.cmark b{flex:1;height:2px;background:var(--ink)}
.home:hover .cmark{animation:none;filter:drop-shadow(0 0 8px rgba(154,163,255,.85)) drop-shadow(0 0 20px rgba(154,163,255,.40))}
@keyframes cglow{from{filter:drop-shadow(0 0 4px rgba(154,163,255,.28)) drop-shadow(0 0 12px rgba(154,163,255,.14))}to{filter:drop-shadow(0 0 7px rgba(154,163,255,.58)) drop-shadow(0 0 18px rgba(154,163,255,.30))}}
@media(prefers-reduced-motion:reduce){.cmark{animation:none}}
main{max-width:624px;margin:0 auto;padding:88px 24px 120px}/* 本文36em(=576px)+パディング48 */
.kicker{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums}
h1{font-size:clamp(28px,3.4vw,44px);font-weight:200;line-height:1.15;margin:16px 0 14px;text-wrap:balance}
h1 .note{display:block;font-size:11px;letter-spacing:.06em;color:var(--faint);margin-top:10px;font-weight:400}
.sub{font-size:clamp(15px,1.6vw,18px);font-weight:300;color:var(--sub);margin-bottom:14px;max-width:34em}.byline{font-size:11px;letter-spacing:.06em;color:var(--faint);margin-bottom:48px}.lead{font-size:13px;line-height:1.9;color:var(--sub);max-width:34em;margin:18px 0 46px}
h2{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin:44px 0 12px}
p{font-size:16px;line-height:2;max-width:36em;margin-bottom:20px;color:var(--sub)}
p.lede{color:var(--ink)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;color:var(--ink);background:rgba(233,232,227,.06);padding:2px 6px;border-radius:2px;word-break:break-word}
.flow{margin-top:72px;border-top:1px solid var(--hair);padding-top:28px}
.fl-rows{margin-top:20px}
.fl-hd,.fl-row{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:0 22px}
.fl-hd{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-bottom:10px;border-bottom:1px solid var(--hair)}
.fl-row{align-items:center;padding:11px 0;border-bottom:1px solid var(--hair)}
.fl-cmd code{font-size:12px;color:var(--ink);background:none;padding:0}
.fl-cell{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.fl-ag,.fl-res{border:1px solid var(--hair);padding:5px 8px}
.fl-ag b,.fl-res b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:400;color:var(--sub)}
.fl-ag i,.fl-res i{font-style:normal;font-size:10px;color:var(--faint);margin-left:7px}
.fl-ag.hot,.fl-res.solid{border-color:rgba(233,232,227,.34)}
.fl-ag.hot b,.fl-res.solid b{color:var(--ink)}
.fl-res.dot{border-style:dashed}
.fl-none{font-size:11px;color:rgba(233,232,227,.14)}
.fl-loop{font-size:11.5px;color:var(--sub);margin-top:14px}
/* 静的ページの本文欄は常に576px。3列は入らないので縦積みで固定する */.fl-hd{display:none}.fl-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0}.fl-ag,.fl-res{max-width:100%}.fl-ag b,.fl-res b{word-break:break-word}/* 縦積みでは列見出しが無く、—が2つ並んでも何の欄か読めないので空欄ごと畳む */.fl-cell:has(.fl-none){display:none}
.proc{margin-top:72px;border-top:1px solid var(--hair);padding-top:28px}
.pr-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin:0 0 6px}
.pr-m{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.06em;color:var(--faint);margin-bottom:32px}
.pr-steps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;margin:0 0 44px}
.pr-steps li{border-top:1px solid var(--hair);padding-top:14px}
.pr-steps .n{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.14em;color:#9aa3ff;margin-bottom:10px}
.pr-steps code{display:block;font-size:12.5px;color:var(--ink);background:none;padding:0;margin-bottom:6px}
.pr-steps .t{display:block;font-size:14px;margin-bottom:6px}
.pr-steps .d{display:block;font-size:12.5px;line-height:1.8;color:var(--faint)}
.pr-steps .c{display:block;font-size:12px;line-height:1.85;color:var(--sub);margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}
.pr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 28px;border-top:1px solid var(--hair);padding-top:22px}
.pr-cols b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:10px}
.pr-cols ul{list-style:none}
.pr-cols li{font-size:12.5px;line-height:1.9;color:var(--faint)}
@media(max-width:820px){.pr-cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pr-steps,.pr-cols{grid-template-columns:1fr}}
.figs{margin-top:64px;display:grid;gap:16px}.figs:empty{display:none}main figure.inl{margin:30px 0 36px}main figure.inl img{display:block;width:100%;border:1px solid var(--hair)}main figure.inl figcaption{margin-top:9px;font-size:11px;letter-spacing:.06em;color:var(--faint)}
.figs img{width:100%;border:1px solid var(--hair);display:block}
figcaption{margin-top:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.rel{margin-top:88px;border-top:1px solid var(--hair);padding-top:24px}
.rel ul{list-style:none;margin-top:10px}
.rel li{margin-bottom:8px}
.rel a{font-size:14px;color:var(--sub)}
.rel a:hover{color:var(--ink)}
.list{list-style:none;margin-top:40px}
.list li{border-bottom:1px solid var(--hair)}
.list a{display:block;padding:26px 4px}
.list .t{display:block;font-size:clamp(17px,1.8vw,22px);font-weight:300}
.list .s{display:block;font-size:13px;color:var(--sub);margin-top:6px}
.list .m{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:8px;font-variant-numeric:tabular-nums}
.list a:hover .t{color:#fff}
footer{display:flex;justify-content:space-between;padding:22px 40px;border-top:1px solid var(--hair);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}footer span a{margin-left:20px}footer a:hover{color:var(--ink)}
@media(max-width:720px){.top,footer{padding-left:20px;padding-right:20px}main{padding:64px 20px 90px}.top nav{gap:18px}.top nav a{font-size:9.5px;letter-spacing:.1em}.cmark{width:38px}}@media(max-width:400px){.top nav{gap:13px}.top nav a{font-size:9px;letter-spacing:.06em}.cmark{width:32px}}