:root{
  --black:#191919;
  --white:#ffffff;
  --ink:#1a1a1a;
  --gray:#6b6b6b;
  --line:#e4e4e4;
  --line-dark:#333333;
  --font-jp:"Zen Kaku Gothic New",sans-serif;
  --font-en:"Inter","Zen Kaku Gothic New",sans-serif;
  --maxw:1180px;
  --pad:clamp(24px,5vw,80px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-jp);
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  font-size:16px;
  line-height:2;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* header ─ 器の名前と、いま見ている作品名だけ */
.site-header{position:absolute;top:0;left:0;right:0;z-index:50}
.site-header .wrap{display:flex;align-items:baseline;justify-content:space-between;height:72px;gap:20px}
.brand{font-family:var(--font-en);font-weight:600;font-size:17px;color:#fff;letter-spacing:.08em;text-decoration:none;line-height:72px}
.here{font-size:13px;letter-spacing:.04em;color:#8a8a8a;line-height:72px}
.here a{color:#8a8a8a;text-decoration:none}
.here a:hover{color:#fff}

.eyebrow{font-family:var(--font-en);font-size:12px;letter-spacing:.14em;color:#8a8a8a;display:block;margin-bottom:22px}

/* hero ─ 常に暗転 */
.hero{background-color:var(--black);background-image:var(--grain);color:#fff;padding:clamp(120px,16vw,180px) 0 clamp(64px,9vw,96px)}
.hero h1{font-weight:500;font-size:clamp(30px,5vw,52px);letter-spacing:.03em;line-height:1.3}
.hero .sub{font-weight:400;font-size:clamp(15px,1.7vw,17px);color:#bdbdbd;margin-top:22px;line-height:1.9;max-width:640px}

/* 作品一覧 */
.works{background-color:var(--black);background-image:var(--grain);color:#fff;padding:0 0 clamp(90px,13vw,150px)}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
@media(max-width:680px){.work-grid{grid-template-columns:1fr}}
.work-card{background:var(--black);padding:44px 40px;text-decoration:none;color:#fff;display:flex;flex-direction:column;transition:background .3s}
a.work-card:hover{background:#222}
.work-card .tag{font-family:var(--font-en);font-size:12px;letter-spacing:.1em;color:#7a7a7a;margin-bottom:auto}
.work-card h3{font-weight:500;font-size:21px;letter-spacing:.02em;line-height:1.5;margin-top:28px}
.work-card p{font-weight:400;font-size:14px;line-height:1.8;color:#9a9a9a;margin-top:16px}
.work-card .go{font-family:var(--font-en);font-size:12px;color:#666;margin-top:20px;letter-spacing:.06em}

/* 作品ステージ */
.stage{background-color:var(--black);background-image:var(--grain);color:#fff;padding:0 0 clamp(70px,10vw,110px)}
.controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.controls button{font-family:var(--font-en);font-size:12px;letter-spacing:.06em;background:transparent;color:#fff;border:1px solid #3a3a3a;padding:9px 18px;cursor:pointer;transition:border-color .2s,background .2s}
.controls button:hover{border-color:#777;background:#222}
.readout{font-family:var(--font-en);font-size:14px;letter-spacing:.06em;color:#fff;min-width:96px}
.count{font-family:var(--font-en);font-size:12px;letter-spacing:.06em;color:#8a8a8a}
.ctl-label{font-family:var(--font-en);font-size:11px;letter-spacing:.1em;color:#7a7a7a}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:#3a3a3a}
input[type=range]::-moz-range-track{height:1px;background:#3a3a3a}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;background:#fff;border-radius:50%;margin-top:-5px}
input[type=range]::-moz-range-thumb{width:11px;height:11px;background:#fff;border:0;border-radius:50%}
#scrub{width:100%;display:block}
#strip{width:100%;display:block;margin-bottom:16px}
.canvas-box{position:relative;height:clamp(380px,58vh,620px);border:1px solid var(--line-dark)}
#stage{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.hint{font-family:var(--font-en);font-size:11px;letter-spacing:.08em;color:#5f5f5f;margin-top:12px}

/* 解説 */
.note{background:#fff;padding:clamp(60px,9vw,110px) 0}
.note .prose{max-width:720px}
.note h2{font-weight:500;font-size:clamp(18px,2.4vw,22px);letter-spacing:.02em;margin:56px 0 18px;line-height:1.5}
.note h2:first-child{margin-top:0}
.note p{font-size:15px;line-height:2.1;color:#333;margin-bottom:18px}
.note .colophon{border-top:1px solid var(--line);margin-top:64px;padding-top:28px}
.note .colophon dl{display:grid;grid-template-columns:180px 1fr;font-size:13.5px;line-height:1.9;padding:8px 0}
@media(max-width:680px){.note .colophon dl{grid-template-columns:1fr;padding:10px 0}}
.note .colophon dt{color:var(--gray);letter-spacing:.06em}
.note .colophon dd{color:#333}

/* footer ─ 法人名のみ。外へのリンクは張らない */
.site-footer{background:#050505;color:#fff;padding:56px 0 40px}
.site-footer .row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.site-footer .fbrand{font-weight:500;font-size:15px;letter-spacing:.06em}
.site-footer .copy{font-family:var(--font-en);font-size:11px;color:#555;letter-spacing:.06em}