/* 共通 */
:root{--bg:#0b0b0c;--fg:#f4f1ea;--dim:rgba(244,241,234,.55);--line:rgba(244,241,234,.22);
  --en:"Inter Tight","Helvetica Neue",Arial,sans-serif;--jp:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--pad:16px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--jp);font-weight:500;overflow-x:hidden;-webkit-font-smoothing:antialiased;animation:pagein .5s ease both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
a{color:inherit;text-decoration:none}
.en{font-family:var(--en);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.82}
.label{font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;line-height:1.2}
.label span{display:block}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 12px;background:linear-gradient(180deg,rgba(11,11,12,.92),rgba(11,11,12,0))}
.brand{font-family:var(--en);font-weight:900;font-size:15px;letter-spacing:-.04em;line-height:1}
.brand{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.brand .bk{grid-row:1 / span 2;display:block;width:30px;height:30px}
.brand small{display:block;margin-top:3px;font-family:var(--jp);font-weight:700;font-size:10px;letter-spacing:.04em;opacity:.8}
.nav nav{display:flex;gap:16px}
.nav nav a{font-family:var(--en);font-weight:900;font-size:13px;letter-spacing:-.03em;padding:2px 0}
.nav nav a.here{border-bottom:2px solid var(--fg)}
main{padding-top:92px}
.top{padding:0 var(--pad) 22px;color:var(--c,var(--fg))}
.top .label{margin-bottom:10px}
.title{display:block;white-space:nowrap}.title span{display:block}
.rise{opacity:0;transform:translateY(2rem);transition:opacity 1s cubic-bezier(.25,1,.5,1),transform 1s cubic-bezier(.25,1,.5,1);transition-delay:calc(var(--i,0) * .06s)}
.rise.in{opacity:1;transform:none}
.rows{margin:0 var(--pad)}
.row{position:relative;display:grid;grid-template-columns:92px 1fr;gap:12px;padding:13px 0;font-size:13px;line-height:1.6}
.row::before{content:"";position:absolute;left:0;top:0;height:1px;width:0;background:var(--line);transition:width 1.25s cubic-bezier(.65,0,.35,1)}
.row.in::before{width:100%}
.row dt{color:var(--dim);font-family:var(--en);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:-.01em;padding-top:3px}
.btns{display:grid;gap:10px;padding:0 var(--pad)}
.btn{display:flex;justify-content:space-between;align-items:center;height:58px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.03em;border:1px solid var(--fg);background:none;color:var(--fg);font-family:var(--jp);cursor:pointer;width:100%}
.btn.main{background:var(--fg);color:#0b0b0c}
.btn::after{content:"→";font-family:var(--en);font-weight:900}
.lead{padding:6px var(--pad) 26px;font-size:17px;font-weight:700;line-height:1.7;letter-spacing:.02em}
.tmp{font-size:10px;color:var(--dim);font-weight:500}
.sec{padding:72px 0 0}
.sec h2{padding:0 var(--pad) 16px}
footer{display:flex;justify-content:space-between;gap:10px;padding:56px var(--pad) calc(env(safe-area-inset-bottom) + 22px);font-family:var(--mono);font-size:10px;color:var(--dim)}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  html.cur,html.cur *{cursor:none !important}
  .cursor{display:block;position:fixed;left:0;top:0;z-index:200;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--fg);mix-blend-mode:difference;pointer-events:none;opacity:0;transition:width .2s ease-in-out,height .2s ease-in-out,margin .2s ease-in-out,opacity .15s}
  .cursor.live{opacity:1}
  .cursor.big{width:44px;height:44px;margin:-22px 0 0 -22px}
}
@media (min-width:900px){
  :root{--pad:24px}
  .brand{font-size:17px}.brand .bk{width:34px;height:34px}.nav nav a{font-size:15px}.nav nav{gap:22px}
  main{padding-top:120px}
  .label{font-size:13px}
  .rows{max-width:720px}.row{font-size:15px;grid-template-columns:140px 1fr}
  .btns{grid-template-columns:320px 320px}
  .lead{font-size:24px;max-width:26em}
}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}body{animation:none}}
/* 明るいページ（ABOUT）: 生成りの地に墨の字。開幕の板と同じ2色 */
html:has(body.light){background:#f4f1ea}
body.light{--bg:#f4f1ea;--fg:#0b0b0c;--dim:rgba(11,11,12,.56);--line:rgba(11,11,12,.26)}
body.light .nav{background:linear-gradient(180deg,rgba(244,241,234,.95),rgba(244,241,234,0))}
body.light .btn.main{color:#f4f1ea}
body.light .cta .btn.main{color:#0b0b0c}
body.light .cursor{background:#f4f1ea}