/* =========================================================
   NOISE — 音量を上げろ。  HYBRID 商談デモ C案
   L12 アシッド・グロテスク／地はシルバー・毒は赤と蛍光
   ========================================================= */

:root{
  --bg:#D6D6D6;
  --bg2:#C6C6C6;
  --ink:#050505;
  --white:#FFFFFF;
  --red:#E10600;
  --acid:#CCFF00;
  --line:rgba(5,5,5,.30);
  --line2:rgba(5,5,5,.14);

  --pad: clamp(16px, 3.6vw, 64px);
  --gap: clamp(10px, 1.5vw, 24px);

  --wd: 118;          /* Archivo width axis（スクロール速度で動く） */
  --sk: 0deg;         /* スクロール速度の傾き */

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-snap: cubic-bezier(.65,.05,0,1);

  --nav-h: 62px;
  --tick-h: 30px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; overflow-x:clip; max-width:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"M PLUS 2","Archivo",system-ui,sans-serif; font-weight:500;
  font-feature-settings:"palt" 1;
  line-height:1.72; letter-spacing:.005em;
  overflow-x:clip;
}
img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none }
h1,h2,h3,p{ margin:0 }
::selection{ background:var(--acid); color:var(--ink) }
:focus-visible{ outline:3px solid var(--red); outline-offset:3px }

.svg-defs{ position:absolute; width:0; height:0; pointer-events:none }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.mono{ font-family:"Azeret Mono",ui-monospace,monospace; font-weight:400;
  font-size:clamp(10px,.72vw,12px); letter-spacing:.10em; text-transform:uppercase; line-height:1.5 }
.red{ color:var(--red) }

/* ---------- 表示活字（Archivo 可変・速度で歪む） ---------- */
.disp{ font-family:"Archivo",system-ui,sans-serif; font-weight:900;
  font-variation-settings:"wdth" var(--wd),"wght" 900;
  text-transform:uppercase; line-height:.84; letter-spacing:-.005em }

.fit{ position:relative; width:100%; height:clamp(58px,12.6vw,182px); overflow:hidden;
  transform:skewX(var(--sk)); transform-origin:left center; will-change:transform }
.hero__lines .fit{ background:var(--bg) }
.hero__lines .fit[data-mode="knock"]{ background:transparent }
.only-sp{ display:none }
@media (max-width:640px){ .only-pc{ display:none } .only-sp{ display:block } }
.fit svg{ display:block; width:100%; height:100% }
.fit__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:grayscale(1) contrast(1.52) brightness(1.12); transform:scale(1.35) }
.fit__plate{ position:absolute; inset:0; z-index:1 }

/* =========================================================
   TICKER
   ========================================================= */
.ticker{ position:fixed; inset:0 0 auto 0; z-index:60; height:var(--tick-h);
  background:var(--red); color:var(--white); overflow:hidden;
  display:flex; align-items:center; border-bottom:1.5px solid var(--ink) }
.ticker__row{ display:flex; white-space:nowrap; will-change:transform }
.ticker__row span{ font-family:"Azeret Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding-inline:22px }

/* =========================================================
   NAV
   ========================================================= */
.nav{ position:fixed; top:var(--tick-h); left:0; right:0; z-index:59; height:var(--nav-h);
  display:flex; align-items:center; gap:var(--gap);
  padding-inline:var(--pad); background:rgba(214,214,214,.86);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1.5px solid var(--ink) }
.nav__logo img{ width:clamp(86px,7vw,118px); height:auto }
.nav__links{ display:flex; gap:8px; margin-left:auto }
.nav__right{ display:flex; gap:8px; align-items:center }

.pill{ display:inline-flex; align-items:center; justify-content:center; height:34px; padding-inline:16px;
  border:1.5px solid var(--ink); border-radius:999px; background:transparent;
  font-family:"Azeret Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  transition:background .18s var(--e-out), color .18s var(--e-out), box-shadow .18s var(--e-out) }
.pill:hover{ background:var(--acid); box-shadow:3px 3px 0 var(--ink) }
.pill--red{ background:var(--red); color:var(--white); border-color:var(--ink) }
.pill--red:hover{ background:var(--acid); color:var(--ink) }
.pill--cart{ background:var(--ink); color:var(--bg) }
.pill--cart:hover{ background:var(--acid); color:var(--ink) }
.pill--cart b{ margin-left:8px; font-weight:400 }

.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 34px;
  border:1.5px solid var(--ink); border-radius:999px; background:var(--white);
  font-family:"Azeret Mono",monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:5px 5px 0 var(--ink);
  transition:background .2s var(--e-out), color .2s var(--e-out), box-shadow .2s var(--e-out), transform .2s var(--e-out) }
.btn:hover{ background:var(--acid); box-shadow:2px 2px 0 var(--ink) }
.btn--red{ background:var(--red); color:var(--white) }
.btn--red:hover{ background:var(--acid); color:var(--ink) }
.btn--full{ width:100% }

.pill--menu{ display:none; background:var(--ink); color:var(--bg) }
.menu{ position:fixed; inset:0; z-index:95; background:var(--ink); color:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(18px,4vh,40px);
  padding:calc(var(--tick-h) + var(--nav-h) + 24px) var(--pad) 32px;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity .3s var(--e-out), transform .38s var(--e-out), visibility .3s }
.menu.is-open{ opacity:1; visibility:visible; transform:none }
.menu__x{ position:absolute; top:calc(var(--tick-h) + 14px); right:var(--pad); border-color:var(--bg); color:var(--bg) }
.menu__nav{ display:flex; flex-direction:column; gap:6px }
.menu__nav a{ font-family:"Archivo",sans-serif; font-weight:900;
  font-variation-settings:"wdth" 78,"wght" 900; text-transform:uppercase;
  font-size:clamp(28px,8.6vw,44px); line-height:1.08; letter-spacing:-.015em }
.menu__nav a:active{ color:var(--acid) }
.menu__foot{ display:flex; flex-direction:column; gap:12px; align-items:flex-start }
.menu__foot .btn{ box-shadow:5px 5px 0 var(--acid) }
.menu__foot .mono{ opacity:.65 }

/* =========================================================
   §1 HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; padding:calc(var(--tick-h) + var(--nav-h) + clamp(22px,4vw,54px)) var(--pad) clamp(18px,3vw,34px);
  display:flex; flex-direction:column; overflow:hidden }
.hero__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--gap) }
.hero__jp{ font-weight:800; font-size:clamp(15px,1.35vw,20px); line-height:1.5; letter-spacing:.01em; max-width:22ch }
.hero__est{ text-align:right; opacity:.72 }
.hero__lines{ margin-top:auto; margin-bottom:auto; position:relative; z-index:2; isolation:isolate }
.hero__rule{ position:relative; z-index:1; background:var(--bg); display:flex; align-items:center; gap:14px;
  margin:clamp(8px,1vw,14px) 0; border-top:1.5px solid var(--ink); padding-top:8px }
.hero__rule .mono{ opacity:.78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hero__bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--gap); position:relative; z-index:2 }
.hero__bottom .mono{ opacity:.72 }
.scrollhint{ display:flex; align-items:center; gap:10px; opacity:1 }
.scrollhint__bar{ display:block; width:72px; height:1.5px; background:var(--line); position:relative; overflow:hidden }
.scrollhint__bar i{ position:absolute; inset:0; background:var(--ink); transform-origin:left; animation:sh 2.2s var(--e-out) infinite }
@keyframes sh{ 0%{transform:scaleX(0)} 55%{transform:scaleX(1)} 100%{transform:scaleX(1); opacity:0} }

.hero__sticker{ position:absolute; margin:0; z-index:3; pointer-events:none }
.hero__sticker img{ width:100%; height:auto; filter:drop-shadow(9px 9px 0 rgba(5,5,5,.18)) }
.hero__sticker{ right:clamp(6px,2.4vw,52px); top:calc(var(--tick-h) + var(--nav-h) + 1.6vh);
  width:clamp(140px,17.5vw,246px); transform:rotate(-8deg) }
.hero__sticker--2{ right:auto; left:clamp(8px,4.4vw,68px); top:calc(var(--tick-h) + var(--nav-h) + 12vh);
  bottom:auto; width:clamp(104px,12vw,172px); transform:rotate(14deg) }
.tag{ position:absolute; left:-6px; bottom:-14px; background:var(--acid); color:var(--ink);
  border:1.5px solid var(--ink); padding:6px 10px; box-shadow:4px 4px 0 var(--ink); text-align:left }
.tag--w{ background:var(--white); left:auto; right:-10px; bottom:-16px }
.tag b{ font-size:13px; letter-spacing:.04em }

/* =========================================================
   §2 DECLARATION
   ========================================================= */
.declare{ border-top:1.5px solid var(--ink); background:var(--bg) }
.marq{ overflow:hidden; border-bottom:1.5px solid var(--ink); background:var(--white) }
.marq--red{ background:var(--red); color:var(--white); border-bottom-color:var(--ink) }
.marq__row{ display:flex; white-space:nowrap; will-change:transform;
  font-family:"Archivo",sans-serif; font-weight:900; font-variation-settings:"wdth" var(--wd),"wght" 900;
  font-size:clamp(26px,4.4vw,64px); line-height:1.32; text-transform:uppercase; padding-block:2px }
.marq__row span{ padding-inline:.28em }

.declare__body{ padding:clamp(46px,7vw,110px) var(--pad) clamp(40px,5vw,78px) }
.kicker{ opacity:.7; margin-bottom:clamp(12px,1.6vw,22px) }
.declare__h{ font-weight:800; font-size:clamp(26px,4.1vw,60px); line-height:1.32; letter-spacing:-.01em; max-width:20ch }
.declare__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,72px);
  margin-top:clamp(28px,4vw,64px); align-items:start }
.lead{ font-size:clamp(15px,1.12vw,17px); line-height:1.95; max-width:31em }
.lead b{ font-weight:800; background:linear-gradient(transparent 62%, var(--acid) 62%) }
.facts{ display:grid; gap:0; border-top:1.5px solid var(--ink) }
.facts li{ display:flex; align-items:baseline; gap:clamp(12px,2vw,28px); padding:clamp(11px,1.4vw,17px) 0;
  border-bottom:1.5px solid var(--line2) }
.facts span{ font-family:"Archivo",sans-serif; font-weight:900; font-variation-settings:"wdth" 118,"wght" 900;
  font-size:clamp(26px,3vw,42px); line-height:1; min-width:4.3em; letter-spacing:-.02em }
.facts em{ font-style:normal; font-size:clamp(12.5px,.95vw,14px); line-height:1.6; opacity:.86 }

/* =========================================================
   §3 DROPS
   ========================================================= */
.sechead .fit{ height:clamp(36px,7.2vw,102px) }
.sechead{ padding:clamp(46px,6.4vw,104px) var(--pad) clamp(20px,2.6vw,38px) }
.sechead__note{ margin-top:clamp(12px,1.5vw,20px); font-size:clamp(13px,1vw,16px); opacity:.82; max-width:34em }
.drops{ border-top:1.5px solid var(--ink) }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); padding:0 var(--pad) }

.card{ position:relative; background:var(--white); border:1.5px solid var(--ink);
  display:flex; flex-direction:column; transition:transform .3s var(--e-out), box-shadow .3s var(--e-out) }
.card:nth-child(4n+1){ transform:rotate(-.75deg) }
.card:nth-child(4n+2){ transform:rotate(.55deg) }
.card:nth-child(4n+3){ transform:rotate(-.35deg) }
.card:nth-child(4n+4){ transform:rotate(.85deg) }
.card:hover{ transform:rotate(0deg) translateY(-4px); box-shadow:7px 7px 0 var(--ink); z-index:2 }
.card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--white); cursor:pointer }
.card.is-plain .card__media{ background:var(--bg2); isolation:isolate }
.card.is-plain .card__media img{ mix-blend-mode:multiply }
.card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .28s var(--e-out) }
.card__media.is-lic img{ top:0; height:108% }
.card__media img.b{ opacity:0 }
.card:hover .card__media img.a{ opacity:0 }
.card:hover .card__media img.b{ opacity:1 }
.card__brand{ position:absolute; top:0; left:0; z-index:2; background:var(--ink); color:var(--bg);
  font-family:"Azeret Mono",monospace; font-size:9.5px; letter-spacing:.13em; padding:5px 9px }
.card__brand.is-vsw{ background:var(--red); color:var(--white) }
.card__so{ position:absolute; inset:auto 8px 8px auto; z-index:2; background:var(--ink); color:var(--bg);
  font-family:"Azeret Mono",monospace; font-size:9.5px; letter-spacing:.12em; padding:4px 8px }
.card__body{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:8px; flex:1;
  border-top:1.5px solid var(--ink) }
.card__t{ font-size:13px; font-weight:800; line-height:1.42;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.84em }
.card__p{ font-family:"Archivo",sans-serif; font-weight:900; font-variation-settings:"wdth" 105,"wght" 900;
  font-size:clamp(19px,1.6vw,25px); line-height:1; letter-spacing:-.02em }
.card__p i{ font-style:normal; font-size:.5em; margin-left:.35em; letter-spacing:.06em; opacity:.6 }
.card__sw{ display:flex; gap:5px; flex-wrap:wrap; margin-top:auto }
.sw{ width:15px; height:15px; border:1.5px solid var(--ink); border-radius:50% }
.card__buy{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; height:38px; padding-inline:12px; border:1.5px solid var(--ink); border-radius:999px;
  font-family:"Azeret Mono",monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  background:var(--bg); transition:background .18s var(--e-out), color .18s var(--e-out) }
.card__buy:hover{ background:var(--acid) }
.card__buy:disabled{ opacity:.42; cursor:not-allowed }

.drops__foot{ display:flex; justify-content:center; padding:clamp(34px,4.4vw,68px) var(--pad) clamp(46px,6vw,96px) }

.stickers{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(6px,1.6vw,30px);
  margin:clamp(6px,1vw,16px) var(--pad) clamp(24px,3.2vw,52px); padding:clamp(18px,2.4vw,36px) 0 clamp(24px,3vw,44px);
  border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink) }
.st{ margin:0; position:relative; flex:0 0 auto }
.st img{ width:100%; height:auto; filter:drop-shadow(9px 9px 0 rgba(5,5,5,.16)) }
.st figcaption{ position:absolute; left:0; bottom:-14px; background:var(--white); color:var(--ink);
  border:1.5px solid var(--ink); padding:4px 8px; white-space:nowrap; font-size:9.5px }
.st1{ width:16%; transform:rotate(-8deg) }
.st2{ width:13%; transform:rotate(6deg) translateY(-16px) }
.st3{ width:14.5%; transform:rotate(-3deg) translateY(8px) }
.st4{ width:11%; transform:rotate(10deg) translateY(-8px) }
.st5{ width:13.5%; transform:rotate(-6deg) translateY(4px) }
.st5 figcaption{ background:var(--acid) }

/* =========================================================
   §4 CHANNELS
   ========================================================= */
.chan{ border-top:1.5px solid var(--ink) }
.chan__wrap{ display:grid; grid-template-columns:.86fr 1.14fr; gap:0;
  border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink) }
.chan__list{ border-right:1.5px solid var(--ink); display:flex; flex-direction:column }
.chan__btn{ display:flex; align-items:center; gap:clamp(12px,1.6vw,26px); text-align:left;
  padding:clamp(18px,2.6vw,38px) var(--pad); border-bottom:1.5px solid var(--line2); flex:1;
  transition:background .22s var(--e-out), color .22s var(--e-out) }
.chan__btn:last-child{ border-bottom:0 }
.chan__btn span{ opacity:.6 }
.chan__btn em{ font-style:normal; font-family:"Archivo",sans-serif; font-weight:900;
  font-variation-settings:"wdth" 84,"wght" 900; text-transform:uppercase;
  font-size:clamp(19px,2.5vw,38px); line-height:1; letter-spacing:-.015em }
.chan__btn:hover{ background:var(--acid) }
.chan__btn.is-on{ background:var(--ink); color:var(--bg) }
.chan__btn.is-on span{ opacity:.75 }

.chan__panel{ position:relative; min-height:clamp(420px,50vw,620px); overflow:hidden; background:var(--bg2) }
.cp{ display:grid; grid-template-columns:1fr 1fr; height:100% }
.cp__media{ position:relative; overflow:hidden; border-right:1.5px solid var(--ink) }
.cp__media img{ width:100%; height:100%; object-fit:cover; object-position:center var(--cpy,50%);
  filter:grayscale(1) contrast(1.1) brightness(.96) }
.cp__body{ padding:clamp(20px,2.6vw,40px); display:flex; flex-direction:column; gap:clamp(12px,1.6vw,20px) }
.cp__logo{ display:inline-flex; align-items:center; align-self:flex-start; background:var(--white);
  border:1.5px solid var(--ink); padding:10px 15px; box-shadow:4px 4px 0 var(--ink) }
.cp__desc{ font-size:clamp(12.5px,.95vw,14.5px); line-height:1.92; opacity:.9 }
.cp__note{ margin-top:auto }
.cp__mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:auto }
.cp__mini a{ border:1.5px solid var(--ink); background:var(--white); display:block }
.cp__mini img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover }
.cp__mini b{ display:block; font-family:"Azeret Mono",monospace; font-size:10px; letter-spacing:.06em;
  padding:6px 7px; border-top:1.5px solid var(--ink); font-weight:400 }
.cp__all{ align-self:flex-start; border-bottom:1.5px solid currentColor; padding-bottom:2px; margin-top:4px }
.cp__all:hover{ background:var(--acid); color:var(--ink) }
.cp.is-red{ background:var(--red); color:var(--white) }
.cp.is-red .cp__media{ border-right-color:var(--ink) }
.cp.is-red .cp__mini a{ border-color:var(--ink) }
.cp.is-red .cp__mini b{ color:var(--ink) }
.cp.is-ink{ background:var(--ink); color:var(--bg) }
.cp.is-ink .cp__mini b{ color:var(--ink) }

/* =========================================================
   §5 FILM
   ========================================================= */
.film{ position:relative; height:100svh; min-height:520px; overflow:hidden; border-top:1.5px solid var(--ink);
  background:var(--bg2) }
.film__v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.22) brightness(1.12) }
.film__grain{ position:absolute; inset:-40px; opacity:.58; mix-blend-mode:overlay; pointer-events:none;
  filter:url(#grain) contrast(150%) brightness(220%) }
.film__hud{ position:absolute; top:calc(var(--tick-h) + var(--nav-h) + 16px); right:var(--pad); z-index:3;
  color:var(--white); display:flex; gap:16px; align-items:center; text-shadow:0 1px 3px rgba(0,0,0,.6) }
.recdot{ display:flex; align-items:center; gap:6px }
.recdot i{ width:8px; height:8px; border-radius:50%; background:var(--red); animation:blink 1.1s steps(2) infinite }
@keyframes blink{ 50%{opacity:0} }
.film__copy{ position:absolute; left:var(--pad); bottom:clamp(28px,5vw,74px); z-index:3; color:var(--white);
  max-width:min(820px,88vw) }
.film__copy .kicker{ color:var(--acid); opacity:1 }
.film__h{ font-weight:800; font-size:clamp(34px,6vw,86px); line-height:1.14; letter-spacing:-.02em;
  text-shadow:0 2px 26px rgba(0,0,0,.55) }
.film__p{ margin-top:clamp(12px,1.6vw,20px); font-size:clamp(13px,1vw,15.5px); line-height:1.9;
  text-shadow:0 1px 12px rgba(0,0,0,.7) }
.film::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(5,5,5,.62) 0%, rgba(5,5,5,.05) 52%, rgba(5,5,5,.22) 100%) }
.film__copy,.film__hud{ z-index:3 }

/* =========================================================
   §6 CHARACTERS（横スクロール）
   ========================================================= */
.chars{ border-top:1.5px solid var(--ink); overflow:hidden }
.chars__view{ overflow:hidden; padding-bottom:clamp(18px,2.4vw,34px) }
.chars__track{ display:flex; gap:var(--gap); padding-inline:var(--pad); will-change:transform }
.ch{ flex:0 0 clamp(210px,23vw,330px); background:var(--white); border:1.5px solid var(--ink) }
.ch__im{ display:block; position:relative; aspect-ratio:4/5; overflow:hidden }
.ch__im img{ position:absolute; top:0; left:0; width:100%; height:108%; object-fit:cover }
.ch__b{ padding:11px 12px 13px; border-top:1.5px solid var(--ink); display:flex; flex-direction:column; gap:6px }
.ch__lic{ font-family:"Azeret Mono",monospace; font-size:9.5px; letter-spacing:.12em; opacity:.62 }
.ch__t{ font-size:12.5px; font-weight:800; line-height:1.42 }
.ch__p{ font-family:"Archivo",sans-serif; font-weight:900; font-variation-settings:"wdth" 105,"wght" 900;
  font-size:20px; letter-spacing:-.02em }
.chars__hint{ padding:0 var(--pad) clamp(48px,6vw,90px); opacity:.6 }

/* =========================================================
   §7 TICKETS
   ========================================================= */
.tix{ border-top:1.5px solid var(--ink) }
.tix__row{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap);
  padding:0 var(--pad) clamp(48px,6vw,96px) }
.tk{ grid-column:span 2 }
.tk:nth-child(4){ grid-column:2 / span 2 }
.tk{ position:relative; background:var(--white); border:1.5px solid var(--ink);
  display:grid; grid-template-columns:1fr 74px; min-height:190px;
  box-shadow:6px 6px 0 var(--ink); transition:transform .3s var(--e-out), box-shadow .3s var(--e-out) }
.tk:hover{ transform:translateY(-5px); box-shadow:9px 9px 0 var(--ink) }
.tk__main{ padding:clamp(15px,1.7vw,24px); display:flex; flex-direction:column; gap:9px }
.tk__no{ opacity:.6 }
.tk__t{ font-family:"Archivo",sans-serif; font-weight:900; font-variation-settings:"wdth" 92,"wght" 900;
  text-transform:uppercase; font-size:clamp(20px,2.1vw,32px); line-height:1; letter-spacing:-.015em }
.tk__d{ font-size:12.5px; line-height:1.75; opacity:.88; margin-top:auto }
.tk__stub{ border-left:2px dashed var(--ink); display:flex; align-items:center; justify-content:center;
  background:var(--bg) }
.tk__stub span{ writing-mode:vertical-rl; font-family:"Azeret Mono",monospace; font-size:10px;
  letter-spacing:.28em; text-transform:uppercase }
.tk--red{ background:var(--red); color:var(--white) }
.tk--red .tk__stub{ background:var(--white); color:var(--ink) }
.tk--acid .tk__stub{ background:var(--acid) }

/* =========================================================
   §8 SHOWROOM
   ========================================================= */
.show{ display:grid; grid-template-columns:1fr 1fr; border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink) }
.show__media{ position:relative; overflow:hidden; border-right:1.5px solid var(--ink); min-height:clamp(320px,42vw,620px) }
.show__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.2) }
.show__mark{ position:absolute; left:0; bottom:22px; background:var(--acid); color:var(--ink);
  border:1.5px solid var(--ink); border-left:0; padding:7px 14px }
.show__body{ padding:clamp(38px,5vw,86px) var(--pad); display:flex; flex-direction:column;
  gap:clamp(14px,1.8vw,24px); justify-content:center }
.show__h{ font-weight:800; font-size:clamp(24px,3.2vw,46px); line-height:1.32; letter-spacing:-.01em }
.show__p{ font-size:clamp(13px,1vw,15.5px); line-height:1.95; max-width:30em; opacity:.9 }
.show__dl{ display:grid; gap:0; border-top:1.5px solid var(--ink) }
.show__dl>div{ display:grid; grid-template-columns:112px 1fr; gap:16px; align-items:start;
  padding:13px 0; border-bottom:1.5px solid var(--line2) }
.show__dl dt{ opacity:.62; padding-top:3px }
.show__dl dd{ font-size:13px; line-height:1.7 }
.show__sd{ height:22px; width:auto }
.show .btn{ align-self:flex-start; margin-top:6px }

/* =========================================================
   §9 NEWS
   ========================================================= */
.news{ border-top:0 }
.news__list{ border-top:1.5px solid var(--ink); margin:0 var(--pad) clamp(46px,6vw,96px) }
.nw{ display:grid; grid-template-columns:130px 118px 1fr auto; gap:clamp(12px,2vw,32px); align-items:center;
  padding:clamp(15px,1.9vw,26px) 0; border-bottom:1.5px solid var(--line2);
  transition:background .2s var(--e-out), padding-left .28s var(--e-out) }
.nw:hover{ background:var(--acid); padding-left:14px }
.nw__cat{ justify-self:start; border:1.5px solid var(--ink); border-radius:999px; padding:4px 12px }
.nw__t{ font-size:clamp(13.5px,1.15vw,17px); font-weight:800; line-height:1.55 }
.nw__ar{ font-family:"Azeret Mono",monospace; font-size:13px; opacity:.5 }

/* =========================================================
   §10 RECRUIT
   ========================================================= */
.rcr{ background:var(--ink); color:var(--bg); padding:clamp(50px,7vw,116px) var(--pad); border-top:1.5px solid var(--ink) }
.rcr .kicker{ color:var(--acid); opacity:1 }
.rcr__fit{ height:clamp(38px,6.6vw,96px); margin-bottom:clamp(18px,2.4vw,32px) }
.rcr__p{ font-size:clamp(14px,1.2vw,19px); line-height:1.9; max-width:34em; margin-bottom:clamp(22px,3vw,40px) }
.rcr .btn{ background:var(--bg); color:var(--ink); box-shadow:5px 5px 0 var(--acid) }
.rcr .btn:hover{ background:var(--acid); box-shadow:2px 2px 0 var(--bg) }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ background:var(--bg); padding:clamp(48px,6vw,96px) var(--pad) clamp(22px,3vw,40px) }
.foot__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,48px);
  padding-bottom:clamp(34px,4.6vw,72px) }
.foot__col{ display:flex; flex-direction:column; gap:9px }
.foot__lbl{ opacity:.55; margin-bottom:5px }
.foot__col a{ font-size:14px; font-weight:800; width:fit-content;
  border-bottom:1.5px solid transparent; transition:border-color .2s var(--e-out), background .2s var(--e-out) }
.foot__col a:hover{ border-bottom-color:var(--ink); background:var(--acid) }
.foot__col a b{ font-family:"Azeret Mono",monospace; font-size:10px; letter-spacing:.1em; font-weight:400;
  display:block; margin-top:2px }
.foot__addr{ font-size:13px; line-height:1.8; opacity:.85 }
.foot__fit{ height:clamp(40px,5.4vw,80px); border-top:1.5px solid var(--ink); padding-top:clamp(12px,1.6vw,22px) }
.foot__cr{ opacity:.55; margin-top:clamp(12px,1.6vw,20px) }

/* =========================================================
   CART DRAWER
   ========================================================= */
.drawer{ position:fixed; inset:0; z-index:90; visibility:hidden; pointer-events:none }
.drawer.is-open{ visibility:visible; pointer-events:auto }
.drawer__scrim{ position:absolute; inset:0; background:rgba(5,5,5,.42); opacity:0; transition:opacity .38s var(--e-out) }
.drawer.is-open .drawer__scrim{ opacity:1 }
.drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(430px,92vw);
  background:var(--bg); border-left:1.5px solid var(--ink); display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .46s var(--e-snap) }
.drawer.is-open .drawer__panel{ transform:none }
.drawer__head{ display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad); border-bottom:1.5px solid var(--ink) }
.drawer__x{ font-family:"Azeret Mono",monospace; font-size:11px; letter-spacing:.12em }
.drawer__x:hover{ background:var(--acid) }
.drawer__body{ flex:1; overflow-y:auto; padding:16px var(--pad) }
.drawer__empty{ padding:40px 0; opacity:.6; font-size:13.5px }
.ci{ display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:start;
  padding:14px 0; border-bottom:1.5px solid var(--line2) }
.ci img{ width:64px; aspect-ratio:4/5; object-fit:cover; border:1.5px solid var(--ink) }
.ci__t{ font-size:12.5px; font-weight:800; line-height:1.45 }
.ci__v{ font-family:"Azeret Mono",monospace; font-size:10.5px; letter-spacing:.06em; opacity:.65; margin-top:4px }
.ci__p{ font-family:"Archivo",sans-serif; font-weight:900; font-size:15px; margin-top:6px }
.ci__x{ font-family:"Azeret Mono",monospace; font-size:11px; opacity:.55 }
.ci__x:hover{ opacity:1; color:var(--red) }
.drawer__foot{ border-top:1.5px solid var(--ink); padding:16px var(--pad) 22px; display:flex; flex-direction:column; gap:10px }
.drawer__sum{ display:flex; align-items:baseline; justify-content:space-between }
.drawer__sum b{ font-family:"Archivo",sans-serif; font-weight:900; font-size:26px; letter-spacing:-.02em }
.drawer__note{ opacity:.55 }

/* 飛翔クローン */
.flyer{ position:fixed; z-index:95; pointer-events:none; object-fit:cover;
  border:1.5px solid var(--ink); background:var(--white) }

/* カーソル追従ラベル */
.cursor{ position:fixed; z-index:80; top:0; left:0; pointer-events:none; opacity:0;
  background:var(--acid); color:var(--ink); border:1.5px solid var(--ink); border-radius:999px;
  padding:8px 15px; font-size:11px; letter-spacing:.14em; transform:translate(-50%,-50%) scale(.6);
  box-shadow:3px 3px 0 var(--ink) }
.flash{ position:fixed; inset:0; z-index:88; pointer-events:none; opacity:0; background:var(--acid); mix-blend-mode:difference }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .grid{ grid-template-columns:repeat(3,1fr) }
  .card:nth-child(4n+1),.card:nth-child(4n+2),.card:nth-child(4n+3),.card:nth-child(4n+4){ transform:rotate(0deg) }
  .card:nth-child(3n+1){ transform:rotate(-1deg) } .card:nth-child(3n+2){ transform:rotate(.9deg) }
  .foot__grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:900px){
  .nav__links{ display:none }
  .chan__wrap{ grid-template-columns:1fr }
  .chan__list{ border-right:0; border-bottom:1.5px solid var(--ink); flex-direction:row }
  .chan__btn{ flex-direction:column; align-items:flex-start; gap:8px; padding:16px 14px;
    border-bottom:0; border-right:1.5px solid var(--line2) }
  .chan__btn em{ font-size:clamp(13px,3.2vw,20px); font-variation-settings:"wdth" 74,"wght" 900 }
  .cp{ grid-template-columns:1fr }
  .cp__media{ border-right:0; border-bottom:1.5px solid var(--ink); aspect-ratio:16/10 }
  .show{ grid-template-columns:1fr }
  .show__media{ border-right:0; border-bottom:1.5px solid var(--ink); min-height:0; aspect-ratio:16/10 }
  .declare__cols{ grid-template-columns:1fr }
  .tix__row{ grid-template-columns:1fr }
  .tk,.tk:nth-child(4){ grid-column:auto }
  .nw{ grid-template-columns:1fr; gap:7px; align-items:start }
  .nw__ar{ display:none }
}
@media (max-width:640px){
  :root{ --nav-h:56px }
  .pill--menu{ display:inline-flex }
  .only-pc-inline{ display:none }
  .nav{ gap:6px }
  .nav__right{ gap:6px }
  .pill{ padding-inline:11px; font-size:10px; letter-spacing:.08em }
  .pill--cart b{ margin-left:5px }
  body{ line-height:1.8 }
  .grid{ grid-template-columns:repeat(2,1fr); gap:9px }
  .card:nth-child(3n+1),.card:nth-child(3n+2){ transform:rotate(0deg) }
  .card:nth-child(2n+1){ transform:rotate(-1.1deg) } .card:nth-child(2n){ transform:rotate(1deg) }
  .card__t{ font-size:12.5px }
  .card__body{ padding:10px 10px 12px; gap:7px }
  .hero__top{ flex-direction:column; gap:10px }
  .hero__est{ text-align:left }
  .hero__jp{ font-size:16px }
  .hero__sticker{ width:33vw; right:-1vw; top:auto; bottom:15vh; transform:rotate(-9deg) }
  .hero__sticker--2{ display:block; width:24vw; left:2vw; bottom:auto;
    top:calc(var(--tick-h) + var(--nav-h) + 9vh); transform:rotate(14deg) }
  .tag{ padding:5px 8px } .tag b{ font-size:11px }
  .foot__grid{ grid-template-columns:1fr; gap:26px }
  .film__copy{ bottom:22px; right:var(--pad) }
  .show__dl>div{ grid-template-columns:1fr; gap:4px }
  .lead{ font-size:15px }
  .sechead__note{ font-size:14px }
  .cp__mini{ grid-template-columns:repeat(3,1fr) }
  .stickers{ flex-wrap:wrap; justify-content:center; gap:16px 10px; padding:22px 0 30px }
  .st1{ width:38% } .st2{ width:30% } .st3{ width:34% } .st4{ width:26% } .st5{ width:32% }
  .st figcaption{ font-size:8.5px; padding:3px 6px; bottom:-12px }
  .cursor{ display:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important }
  .fit{ transform:none }
}