@charset "utf-8";


/* =====================================================
   BASE / RESET / VARIABLES
===================================================== */

:root{
  --bg:#050816;
  --deep:#09143a;
  --blue:#2c4ee6;
  --cyan:#00cfe6;
  --ice:#f2ecdc;
  --lav:#c4b5e6;
  --pink:#e62693;
  --pink-soft:#e681bb;
  --magenta:#9e57d1;
  --yellow:#e6ca43;
  --red:#e6352a;
  --line:rgba(220,241,255,.27);
  --muted:rgba(255,255,255,.88);
  --display:"Bebas Neue",sans-serif;
  --accent:"Anton",sans-serif;
  --body:"Noto Sans JP",sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  overflow-x:hidden;
  scroll-behavior:smooth;
  scroll-padding-top:86px;
}

body{
  margin:0;
  overflow-x:hidden;
  background:radial-gradient(circle at 18% 8%,rgba(0,229,255,.055),transparent 24%),
    radial-gradient(circle at 82% 16%,rgba(255,42,163,.045),transparent 22%),
    var(--bg);
  color:var(--ice);
  font-family:var(--body);
  line-height:1.75;
  letter-spacing:.05em;
}

ruby rt{
  font-size:.55em;
  letter-spacing:0;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

.siteNoise, .siteGlow{
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
}

.siteNoise{
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.siteGlow{
  background:radial-gradient(circle at 50% 0,rgba(0,229,255,.23),transparent 35%),
      radial-gradient(circle at 82% 10%,rgba(255,42,163,.15),transparent 28%),
      radial-gradient(circle at 12% 32%,rgba(255,225,74,.055),transparent 22%);
  mix-blend-mode:screen;
}

.visuallyHidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.ten{
  list-style:none;
  padding-left:1.25em;
  margin:0.75em 0;
  font-size:0.8rem;
  line-height:1.4;
}

.ten li{
  position:relative;
  margin:0.35em 0;
}

.ten li::before{
  content:"・";
  position:absolute;
  left:-1.1em;
  top:0;
}

.pc{
  display:none;
}

.sp{
  display:none;
}

@media (min-width:768px){
  .pc{
    display:block;
  }
}

@media (max-width:840px){
  body{
    line-height:1.55;
  }

  html{
    scroll-padding-top:72px;
  }
}

@media (max-width:767px){
  .sp{
    display:block;
  }
}


/* =====================================================
   SITE LOADER / FIRST VIEW
   - simple / light / always visible before the opening
   - only transform / opacity animation for low rendering cost
===================================================== */

body.is-loading{
  overflow:hidden;
}

.siteLoader{
  position:fixed;
  inset:0;
  z-index:20000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#020712;
  opacity:1;
  visibility:visible;
  transition:opacity .30s ease,visibility .30s ease;
}

.siteLoader__frame{
  position:absolute;
  inset:18px;
  pointer-events:none;
  background:
    linear-gradient(var(--cyan),var(--cyan)) left top / 18px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left top / 1px 18px no-repeat,
    linear-gradient(var(--pink-soft),var(--pink-soft)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--pink-soft),var(--pink-soft)) right bottom / 1px 18px no-repeat;
  opacity:.34;
}

.siteLoader__inner{
  position:relative;
  z-index:2;
  display:grid;
  justify-items:center;
  gap:13px;
}

.siteLoader__meter{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:92px;
  height:38px;
}

.siteLoader__meter::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:132px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.25),rgba(255,255,255,.45),rgba(230,129,187,.22),transparent);
  transform:translate(-50%,-50%);
  opacity:.48;
}

.siteLoader__meter i{
  position:relative;
  z-index:1;
  display:block;
  width:3px;
  height:24px;
  background:linear-gradient(180deg,#fff,var(--cyan) 58%,var(--blue));
  transform-origin:center;
  animation:siteLoaderBar .76s ease-in-out infinite alternate;
}

.siteLoader__meter i:nth-child(2n){
  height:32px;
  animation-delay:-.18s;
}

.siteLoader__meter i:nth-child(3n){
  height:18px;
  background:linear-gradient(180deg,#fff,var(--pink-soft) 58%,var(--magenta));
  animation-delay:-.34s;
}

.siteLoader__meter i:nth-child(5n){
  height:28px;
  animation-delay:-.49s;
}

.siteLoader__label{
  color:rgba(255,255,255,.44);
  font-family:var(--display);
  font-size:9px;
  line-height:1;
  letter-spacing:.34em;
  text-indent:.34em;
}

.siteLoader.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@keyframes siteLoaderBar{
  from{ transform:scaleY(.28); opacity:.34; }
  to{ transform:scaleY(1); opacity:1; }
}

@media (max-width:840px){
  .siteLoader__frame{
    inset:12px;
  }

  .siteLoader__meter{
    transform:scale(.92);
  }
}

/* Loading中は本編の常時アニメーションを待機。
   Loader自体は動かし、公開後は既存演出をすべて通常通り再生する。 */
body.is-loading .hero::after,
body.is-loading .hero__laser,
body.is-loading .heroKV__orb,
body.is-loading .heroKV::after,
body.is-loading .heroKV__monsterLogo,
body.is-loading .heroKV__scan,
body.is-loading .heroMonsterGate__ring,
body.is-loading .heroMonsterGate__flash,
body.is-loading .visualizer i,
body.is-loading .cast::before,
body.is-loading .ticketMotion__ring,
body.is-loading .screamEqualizer i{
  animation-play-state:paused !important;
}


/* =====================================================
   HEADER / NAVIGATION
===================================================== */

.vmHeader{
  position:fixed;
  top:0;
  left:0;
  z-index:900;
  width:100%;
  display:flex;
  align-items:center;
  gap:22px;
  padding:12px clamp(18px,3vw,42px);
  transition:padding .35s cubic-bezier(.16,1,.3,1),background .35s ease,backdrop-filter .35s ease,border-color .35s ease;
}

.vmHeader.is-scrolled{
  padding-top:8px;
  padding-bottom:8px;
  background:rgba(2,7,18,.60);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(210,235,255,.12);
}

.vmHeader__logo{
  max-width:96px;
  margin-right:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .35s ease,visibility .35s ease,transform .45s cubic-bezier(.16,1,.3,1);
}

.vmHeader.is-after-hero .vmHeader__logo{
  opacity:1;
  visibility:visible;
  transform:none;
}

.vmHeader__logo img{
  width:100%;
  height:auto;
  display:block;
}

.vmNav{
  display:flex;
  align-items:center;
  gap:20px;
  font-family:var(--display);
  font-size:16px;
  letter-spacing:.14em;
}

.vmNav > a{
  opacity:.72;
  transition:opacity .25s ease,color .25s ease,text-shadow .25s ease;
}

.vmNav > a:hover{
  opacity:1;
  color:var(--cyan);
  text-shadow:0 0 14px var(--cyan);
}

.vmSocials{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-left:2px;
}

.vmSocial{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  opacity:.78;
  transition:opacity .25s ease,color .25s ease,filter .25s ease;
}

.vmSocial:hover{
  opacity:1;
  color:var(--cyan);
  filter:drop-shadow(0 0 8px rgba(0,229,255,.45));
}

.vmSocial svg{
  width:17px;
  height:17px;
  display:block;
}

.vmX svg{
  fill:currentColor;
}

.vmInstagram svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}

.vmInstagram__dot{
  fill:currentColor;
  stroke:none;
}

.vmMenu{
  display:none;
  width:46px;
  height:46px;
  position:relative;
  border:1px solid rgba(0,229,255,.45);
  background:rgba(0,0,0,.8);
  box-shadow:0 0 0 1px rgba(0,229,255,.12),0 0 12px rgba(0,229,255,.18);
    overflow:hidden;
}


.vmMenu span{
  position:absolute;
  left:12px;
  width:22px;
  height:1px;
  background:linear-gradient(90deg,var(--cyan),#fff,var(--pink-soft));
  box-shadow:0 0 8px rgba(0,229,255,.45);
  transition:.25s;
}

.vmMenu span:first-child{
  top:17px;
}

.vmMenu span:last-child{
  top:27px;
}

.vmMenu.is-open span:first-child{
  top:22px;
  transform:rotate(40deg);
}

.vmMenu.is-open span:last-child{
  top:22px;
  transform:rotate(-40deg);
}

.spNav{
  position:fixed;
  inset:0;
  z-index:850;
  background:rgba(2,7,18,.94);
  display:grid;
  place-content:center;
  gap:14px;
  text-align:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.3s;
}

.spNav.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.spNav > a{
  font-family:var(--display);
  font-size:clamp(32px,9vw,48px);
  line-height:1.1;
  letter-spacing:.08em;
}

.spNav__socials{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:18px;
}

.spNav__socials .vmSocial{
  width:48px;
  height:48px;
  border:2px solid rgba(0,229,255,.36);
  border-radius:50%;
}

.spNav__socials .vmSocial svg{
  width:23px;
  height:23px;
}


/* SP / TABLET */

@media (max-width:840px){
  .vmHeader__logo{
    display:none;
  }

  .vmHeader,
  .vmHeader.is-scrolled{
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    filter:none;
    border-bottom:0;
  }

  .vmHeader{
    padding:12px 14px;
  }

  .vmHeader.is-scrolled{
    padding:10px 14px;
  }

  .vmNav{
    display:none;
  }

  .vmMenu{
    display:block;
    margin-left:auto;
  }
}

/*動きJSと*/
.spNav > a span{
  display:inline-block;
  opacity:0;
  transform:scaleY(.15) translateY(12px);
  transform-origin:bottom;
  --flash:rgba(0,229,255,.45);
}

.spNav > a span:nth-child(even){
  --flash:rgba(230,129,187,.38);
}

.spNav.is-open > a span{
  animation:menuChar .42s var(--delay) cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes menuChar{
  0%{
    opacity:0;
    color:var(--flash);
    text-shadow:0 0 8px var(--flash);
  }
  60%{
    opacity:1;
    color:var(--flash);
    transform:scaleY(1.08) translateY(-1px);
  }
  100%{
    opacity:1;
    color:#fff;
    transform:none;
    text-shadow:none;
  }
}

/* =====================================================
   VISUALIZER / BASE
===================================================== */

.visualizer{
  display:flex;
  align-items:center;
  justify-content:center;

  height:80px;
  margin:8px auto 0;
  gap:7px;

  opacity:0;

  filter:
    drop-shadow(0 0 14px rgba(0,229,255,.65))
    drop-shadow(0 0 12px rgba(255,42,163,.16));
}

.visualizer i{
  display:block;

  width:8px;
  height:38px;

  border-radius:99px;

  background:
    linear-gradient(
      180deg,
      var(--cyan) 0%,
      #2f7dff 54%,
      var(--blue) 100%
    );

  transform-origin:bottom;

  animation:
    vu calc(.78s + (var(--i,1) * .038s))
    ease-in-out infinite alternate;
}

.visualizer i:nth-child(2n){
  height:72px;
  animation-delay:.16s;
}

.visualizer i:nth-child(3n){
  height:72px;

  background:
    linear-gradient(
      180deg,
      var(--pink-soft) 0%,
      var(--pink) 58%,
      var(--magenta) 100%
    );

  animation-delay:.28s;
}

.visualizer i:nth-child(5n){
  height:54px;

  background:
    linear-gradient(
      180deg,
      var(--cyan) 0%,
      var(--blue) 52%,
      var(--pink) 100%
    );

  animation-delay:.42s;
}

/* =====================================================
   HERO / KEY VISUAL / HERO BANNERS
===================================================== */

.hero{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  background:#050816;
  opacity:0;
  transform:scale(1.018);
  filter:blur(8px) brightness(.72);
  transition:opacity .9s ease,
    transform 1.25s cubic-bezier(.16,1,.3,1),
    filter 1s ease;
}

.hero__bg{
  position:absolute;
  inset:0;
  background:#020712;
}

.hero__wave{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.82;
  mix-blend-mode:screen;
  pointer-events:none;
  filter:saturate(1.18) brightness(1.12);
}

.hero__laser{
  position:absolute;
  top:-15vh;
  width:3px;
  height:140vh;
  background:linear-gradient(transparent,rgba(0,229,255,.2) 15%,rgba(255,255,255,.95) 50%,rgba(0,229,255,.2) 85%,transparent);
  mix-blend-mode:screen;
  filter:blur(.6px) drop-shadow(0 0 12px rgba(0,229,255,.7));
  opacity:.18;
  transform-origin:50% 0;
  pointer-events:none;
}

.hero__laser--1{
  left:20%;
  animation:laserLeft 10s ease-in-out infinite alternate;
}

.hero__laser--2{
  right:20%;
  animation:laserRight 10s ease-in-out infinite alternate;
  background:linear-gradient(transparent,rgba(255,42,163,.14) 15%,rgba(255,255,255,.9) 50%,rgba(255,42,163,.14) 85%,transparent);
  filter:blur(.6px) drop-shadow(0 0 12px rgba(255,42,163,.45));
}

@keyframes laserLeft{
  from{
    transform:rotate(-22deg);
  }

  to{
    transform:rotate(-12deg);
  }
}

@keyframes laserRight{
  from{
    transform:rotate(22deg);
  }

  to{
    transform:rotate(12deg);
  }
}

.hero__inner{
  position:relative;
  margin:0 auto;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}

body.is-stage-open .hero{
  opacity:1;
  transform:scale(1);
  filter:blur(0) brightness(1);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(circle at 50% 44%,rgba(0,229,255,.20),transparent 38%);
  opacity:0;
}

body.is-stage-open .hero::before{
  animation:openingGlow 1.35s .08s ease-out both;
}

@keyframes openingGlow{
  0%{
    opacity:0;
    transform:scale(.82);
  }

  34%{
    opacity:.85;
  }

  100%{
    opacity:0;
    transform:scale(1.18);
  }
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 11vw,rgba(0,229,255,.035) 11.05vw,transparent 11.1vw);
  mix-blend-mode:screen;
  animation:stageSweep 11s linear infinite;
}

@keyframes stageSweep{
  from{
    transform:translateX(-12vw);
  }

  to{
    transform:translateX(12vw);
  }
}

.hero.hero--newVisual{
  min-height:max(780px,100svh);
  overflow:hidden;
  isolation:isolate;
  padding:0;
}

.hero--newVisual .hero__bg{
  background-image:radial-gradient(circle at 28% 28%,rgba(0,229,255,.24),transparent 30%),
    radial-gradient(circle at 74% 35%,rgba(255,42,163,.22),transparent 29%),
    radial-gradient(circle at 82% 12%,rgba(255,225,74,.08),transparent 18%),
    linear-gradient(180deg,rgba(5,8,22,.03) 0%,rgba(5,8,22,.18) 76%,#050816 100%),
    url("../img/bg-kari.webp");
  background-size:cover,cover,cover,cover,auto max(100%,1180px);
  background-position:center,center,center,center,center top;
  background-repeat:no-repeat;
  filter:saturate(1.08) contrast(1.08) brightness(.83);
  transform:scale(1.025);
}

.hero--newVisual .hero__wave{
  z-index:5;
  opacity:.88;
}

.hero--newVisual .hero__laser{
  z-index:6;
  opacity:.38;
}

.heroKV__orb{
  position:absolute;
  z-index:3;
  width:min(62vw,850px);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:blur(38px);
  opacity:.34;
}

.heroKV__orb--1{
  left:50%;
  top:44%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0,229,255,.55),rgba(49,87,255,.26) 42%,transparent 70%);
  animation:heroOrbPulse 5.8s ease-in-out infinite;
}

.heroKV__orb--2{
  right:-8vw;
  bottom:-22%;
  width:min(46vw,640px);
  background:radial-gradient(circle,rgba(255,42,163,.34),rgba(176,97,232,.16) 42%,transparent 70%);
  animation:heroOrbPulse2 7s 1.2s ease-in-out infinite reverse;
}

@keyframes heroOrbPulse{
  0%,100%{
    opacity:.18;
    transform:translate(-50%,-50%) scale(.92);
  }

  50%{
    opacity:.34;
    transform:translate(-50%,-50%) scale(1.08);
  }
}

@keyframes heroOrbPulse2{
  0%,100%{
    opacity:.14;
    transform:scale(.9);
  }

  50%{
    opacity:.27;
    transform:scale(1.08);
  }
}

.hero--newVisual .hero__inner--kv{
  position:relative;
  z-index:10;
  width:min(96vw,1580px);
  min-height:max(780px,100svh);
  display:grid;
  grid-template-columns:minmax(170px,1fr)
    minmax(500px,calc((100svh - 156px) * .7074))
    minmax(190px,1fr);
  align-items:center;
  justify-content:center;
  gap:clamp(14px,2.2vw,36px);
  padding:96px 0 44px;
}

.heroKV__opening{
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
}

.heroKV__opening img{
  width:min(43vw,570px);
  filter:drop-shadow(0 0 36px rgba(0,229,255,.3));
}

body.is-kv-ready .heroKV__opening{
  animation:heroOpeningLogo 2.05s cubic-bezier(.16,1,.3,1) both;
}

@keyframes heroOpeningLogo{
  0%{
    opacity:0;
    transform:scale(.72);
    filter:blur(12px);
  }

  24%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }

  60%{
    opacity:1;
    transform:scale(1.03);
    filter:blur(0);
  }

  82%{
    opacity:.25;
    transform:scale(1.075);
    filter:blur(2px);
  }

  100%{
    opacity:0;
    transform:scale(1.11);
    filter:blur(5px);
  }
}

.heroKV__stage{
  position:relative;
  width:min(100%,760px);
  max-height:calc(100svh - 144px);
  justify-self:center;
  align-self:start;
  margin-top:0;
  opacity:0;
  transform:translateY(30px) scale(.94);
  filter:blur(7px) brightness(.72);
  --tilt-x:0deg;
  --tilt-y:0deg;
}

body.is-kv-ready .heroKV__stage{
  animation:heroPosterReveal 1.18s .78s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes heroPosterReveal{
  0%{
    opacity:0;
    transform:translateY(30px) scale(.94);
    filter:blur(7px) brightness(.72);
  }

  55%{
    opacity:1;
  }

  100%{
    opacity:1;
    transform:none;
    filter:blur(0) brightness(1);
  }
}

.heroKV{
  position:relative;
  margin:0;
  overflow:hidden;
  border:2px solid rgba(184,243,255,.48);
  border-radius:2px;
  background:#030813;
  box-shadow:0 26px 78px rgba(0,0,0,.62),0 0 0 1px rgba(80,177,255,.08),0 0 76px rgba(0,229,255,.24),24px 0 86px rgba(255,42,163,.13);
  transform:perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;
  transform-style:preserve-3d;
  cursor:crosshair;
}

.heroKV:hover{
  box-shadow:0 32px 92px rgba(0,0,0,.66),0 0 0 1px rgba(0,229,255,.16),0 0 76px rgba(37,122,255,.26),28px 0 88px rgba(255,42,163,.10);
}

.heroKV::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  box-shadow:inset 0 0 70px rgba(0,0,0,.2);
}

.heroKV::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.08) 43%,transparent 56%);
  transform:translateX(-120%);
  animation:heroPosterSweep 7s 2.5s ease-in-out infinite;
}

@keyframes heroPosterSweep{
  0%,62%{
    transform:translateX(-120%);
    opacity:0;
  }

  68%{
    opacity:.7;
  }

  84%{
    transform:translateX(120%);
    opacity:.15;
  }

  100%{
    transform:translateX(120%);
    opacity:0;
  }
}

.heroKV__poster{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  display:block;
}

.heroKV__monsterLogoWrap{
  position:absolute;
  z-index:4;
  left:48.96%;
  bottom:9.10%;
  width:79.21%;
  opacity:0;
  transform:translateX(-50%) translateY(5px) scale(.985);
  pointer-events:none;
}

body.is-kv-ready .heroKV__monsterLogoWrap{
  animation:heroMonsterLogoAppear .62s 2.2s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes heroMonsterLogoAppear{
  to{
    opacity:1;
    transform:translateX(-50%) translateY(0) scale(1);
  }
}

.heroKV__monsterLogo{
  display:block;
  width:100%;
  height:auto;
  transform-origin:50% 54%;
  filter:drop-shadow(0 0 0 rgba(0,229,255,0));
  will-change:transform,filter;
}

body.is-kv-ready .heroKV__monsterLogo{
  animation:heroMonsterLogoAlive 7.4s 2.7s ease-in-out infinite;
}

@keyframes heroMonsterLogoAlive{
  0%,14%,100%{
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
    filter:drop-shadow(0 0 0 rgba(0,229,255,0));
  }

  34%{
    transform:translate3d(0,-2px,0) scale(1.026,1.018) rotate(-.18deg);
    filter:drop-shadow(0 0 10px rgba(0,229,255,.12));
  }

  48%{
    transform:translate3d(1px,-4px,0) scale(1.034,1.024) rotate(.14deg);
    filter:drop-shadow(0 0 18px rgba(0,229,255,.2));
  }

  61%{
    transform:translate3d(-1px,-1px,0) scale(1.018,1.032) rotate(-.12deg);
    filter:drop-shadow(0 0 9px rgba(184,115,255,.12));
  }

  66%{
    transform:translate3d(2px,0,0) scale(1.026,.998) skewX(-.5deg);
    filter:drop-shadow(2px 0 8px rgba(0,229,255,.18));
  }

  69%{
    transform:translate3d(-1px,-1px,0) scale(1.012,1.02) skewX(.25deg);
    filter:drop-shadow(-2px 0 8px rgba(184,115,255,.13));
  }

  82%{
    transform:translate3d(0,-2px,0) scale(1.023,1.017) rotate(.1deg);
    filter:drop-shadow(0 0 12px rgba(0,229,255,.14));
  }
}

.heroKV:hover .heroKV__monsterLogo{
  filter:drop-shadow(0 0 20px rgba(0,229,255,.22));
}

.heroKV.is-voice-hit .heroKV__monsterLogo{
  animation:heroMonsterLogoHit .72s cubic-bezier(.16,1,.3,1);
}

@keyframes heroMonsterLogoHit{
  0%{
    transform:scale(1);
  }

  24%{
    transform:translate3d(-3px,-4px,0) scale(1.055,.985) skewX(-1.2deg);
  }

  48%{
    transform:translate3d(3px,1px,0) scale(.995,1.05) skewX(.8deg);
    filter:drop-shadow(0 0 28px rgba(0,229,255,.4));
  }

  100%{
    transform:scale(1);
    filter:none;
  }
}

.heroKV__scan{
  position:absolute;
  z-index:6;
  left:0;
  right:0;
  top:-10%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),#fff,var(--cyan),transparent);
  box-shadow:0 0 18px rgba(0,229,255,.95);
  opacity:.55;
  animation:heroScan 5.6s 2.2s linear infinite;
  pointer-events:none;
}

@keyframes heroScan{
  0%{
    top:-5%;
    opacity:0;
  }

  10%{
    opacity:.5;
  }

  75%{
    opacity:.2;
  }

  100%{
    top:108%;
    opacity:0;
  }
}

.heroKV__corner{
  position:absolute;
  z-index:8;
  width:30px;
  height:30px;
  border-color:rgba(0,229,255,.78);
  pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(0,229,255,.45));
  opacity:0;
}

.heroKV__corner--tl{
  left:-12px;
  top:-12px;
  border-left:1px solid;
  border-top:1px solid;
}

.heroKV__corner--tr{
  right:-12px;
  top:-12px;
  border-right:1px solid;
  border-top:1px solid;
}

.heroKV__corner--bl{
  left:-12px;
  bottom:-12px;
  border-left:1px solid;
  border-bottom:1px solid;
}

.heroKV__corner--br{
  right:-12px;
  bottom:-12px;
  border-right:1px solid;
  border-bottom:1px solid;
}

body.is-kv-ready .heroKV__corner{
  animation:heroCornerBlink 2.6s 1.8s ease-out both;
}

@keyframes heroCornerBlink{
  0%{
    opacity:0;
    transform:scale(.7);
  }

  20%{
    opacity:1;
  }

  45%{
    opacity:.2;
  }

  62%{
    opacity:.85;
  }

  /* 一度消える */

  76%{
    opacity:0;
  }

  /* 少し消えたまま */

  86%{
    opacity:0;
    transform:scale(1);
  }

  /* 再び復活 */

  100%{
    opacity:.42;
    transform:scale(1);
  }
}

.heroMonsterGate{
  position:absolute;
  z-index:5;
  left:50%;
  top:51%;
  width:72%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.52;
}

.heroMonsterGate__ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(0,229,255,.28);
  box-shadow:0 0 20px rgba(0,229,255,.08),inset 0 0 28px rgba(49,87,255,.06);
}

.heroMonsterGate__ring--1{
  border-style:dashed;
  animation:monsterGateSpin 12s linear infinite;
}

.heroMonsterGate__ring--2{
  inset:8%;
  border-color:rgba(255,255,255,.17);
  border-left-color:rgba(0,229,255,.62);
  border-right-color:rgba(255,42,163,.46);
  animation:monsterGateSpin 8s linear infinite reverse;
}

.heroMonsterGate__flash{
  position:absolute;
  inset:15%;
  border-radius:50%;
  background:radial-gradient(circle,transparent 48%,rgba(0,229,255,.11) 49%,rgba(0,229,255,.03) 55%,transparent 64%);
  animation:monsterGatePulse 3.2s ease-in-out infinite;
}

@keyframes monsterGateSpin{
  to{
    transform:rotate(360deg);
  }
}

@keyframes monsterGatePulse{
  0%,100%{
    opacity:.25;
    transform:scale(.94);
  }

  50%{
    opacity:.72;
    transform:scale(1.04);
  }
}

.heroKV.is-voice-hit .heroMonsterGate{
  animation:monsterGateHit .7s ease-out;
}

.heroKV.is-voice-hit .heroKV__poster{
  animation:monsterImageHit .48s ease-out;
}

@keyframes monsterGateHit{
  0%{
    opacity:.4;
    filter:brightness(1);
  }

  35%{
    opacity:1;
    filter:brightness(1.8) drop-shadow(0 0 16px rgba(0,229,255,.9));
    transform:translate(-50%,-50%) scale(1.1);
  }

  100%{
    opacity:.52;
    filter:none;
    transform:translate(-50%,-50%) scale(1);
  }
}

@keyframes monsterImageHit{
  0%,100%{
    filter:none;
  }

  35%{
    filter:contrast(1.12) saturate(1.28) brightness(1.07);
  }
}

.heroMeta{
  position:relative;
  z-index:7;
  opacity:0;
}

body.is-kv-ready .heroMeta{
  animation:heroMetaIn .8s 1.42s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes heroMetaIn{
  to{
    opacity:1;
    transform:none;
  }
}

.heroMeta--left{
  align-self:center;
  justify-self:end;
  width:max-content;
  text-align:left;
  padding-top:7vh;
}

.heroMeta__label{
  display:block;
  margin-bottom:12px;
  color:var(--cyan);
  font-family:var(--display);
  font-size:12px;
  line-height:1;
  letter-spacing:.2em;
}

.heroMeta__period{
  margin:0;
  display:grid;
  grid-template-columns:auto auto auto;
  align-items:end;
  justify-content:start;
  column-gap:7px;
  row-gap:4px;
  font-family:var(--accent);
  line-height:.9;
  letter-spacing:.015em;
}

.heroMeta__period b{
  grid-column:1/-1;
  color:rgba(255,255,255,.5);
  font-family:var(--display);
  font-size:17px;
  font-weight:400;
  letter-spacing:.18em;
}

.heroMeta__period strong{
  font-size:clamp(36px,4.2vw,62px);
  font-weight:400;
}

.heroMeta__venue{
  margin:13px 0 0;
  font-family:var(--accent);
  font-size:clamp(22px,2.2vw,34px);
  line-height:1;
  letter-spacing:.13em;
}

.heroMeta__line{
  display:block;
  width:min(210px,78%);
  height:1px;
  margin-top:20px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  box-shadow:0 0 10px rgba(0,229,255,.5);
}

.heroMeta--right{
  align-self:end;
  padding-bottom:8vh;
  text-align:left;
}

.heroTicket{
  position:relative;
  display:block;
  width:min(100%,270px);
  padding:17px 50px 15px 17px;
  overflow:hidden;
  border:2px solid rgba(0,229,255,.62);
  background:linear-gradient(110deg,rgba(49,87,255,.25),rgba(255,42,163,.10),rgba(5,8,22,.74));
  box-shadow:0 0 34px rgba(0,229,255,.16),12px 0 34px rgba(255,42,163,.08),inset 0 0 20px rgba(255,255,255,.045);
  transition:.3s ease;
}

.heroTicket::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.14),transparent);
  transform:translateX(-110%);
  transition:transform .5s ease;
}

.heroTicket__small{
  position:relative;
  display:block;
  color:var(--cyan);
  font-family:var(--display);
  font-size:11px;
  line-height:1;
  letter-spacing:.18em;
}

.heroTicket strong{
  position:relative;
  display:block;
  margin-top:8px;
  font-family:var(--accent);
  font-size:25px;
  line-height:1;
  font-weight:400;
  letter-spacing:.04em;
}

.heroTicket strong em{
  margin-left:7px;
  font-family:var(--body);
  font-size:14px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(255,255,255,.76);
}

.heroTicket__arrow{
  position:absolute;
  right:15px;
  top:50%;
  width:23px;
  height:23px;
  margin-top:-12px;
  border:1px solid rgba(0,229,255,.45);
  border-radius:50%;
}

.heroTicket__arrow::before{
  content:"";
  position:absolute;
  left:7px;
  top:7px;
  width:6px;
  height:6px;
  border-right:1px solid var(--cyan);
  border-bottom:1px solid var(--cyan);
  transform:rotate(45deg);
}

.heroTicket:hover{
  border-color:rgba(255,255,255,.82);
  transform:translateY(-3px);
  box-shadow:0 10px 34px rgba(0,0,0,.3),0 0 34px rgba(49,87,255,.24);
}

.heroTicket:hover::before{
  transform:translateX(110%);
}

/* =====================================================
   VISUALIZER / HERO PC
===================================================== */

.heroMeta--right .visualizer{
  justify-content:flex-start;

  height:46px;
  margin:0 0 18px;

  opacity:1;

  filter:
    drop-shadow(0 0 9px rgba(193,246,255,.48))
    drop-shadow(0 0 8px rgba(230,129,187,.14));
}

.heroMeta--right .visualizer i{
  width:4px;
  max-height:42px;

  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #dffcff 28%,
      #86e8f4 68%,
      #7bc6ea 100%
    );
}

.heroMeta--right .visualizer i:nth-child(3n){
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #f3e9ff 30%,
      #e8b6da 66%,
      #9edff2 100%
    );
}

.heroMeta--right .visualizer i:nth-child(5n){
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #c9f6ff 38%,
      #b9c8f3 68%,
      #ebb5d7 100%
    );
}

@media (max-width:1199px) and (min-width:841px){
  .hero--newVisual .hero__inner--kv{
    width:min(97vw,1120px);
    grid-template-columns:minmax(128px,.72fr) minmax(450px,calc((100svh - 150px) * .7074)) minmax(155px,.8fr);
    gap:15px;
    padding-top:92px;
  }

  .heroMeta__period strong{
    font-size:42px;
  }

  .heroMeta__venue{
    font-size:23px;
  }
}

.heroMeta__visualizer--sp{
  display:none;
}

/* TABLET / SP */

@media (max-width:840px){
  .hero{
    filter:blur(5px) brightness(.78);
  }

  .heroMeta--right .visualizer{
    display:none;
  }

  .hero.hero--newVisual{
    min-height:auto;
    padding:76px 0 54px;
  }

  .hero--newVisual .hero__bg{
    background-size:cover,cover,auto 100%;
    background-position:center,center,center top;
  }

  .hero--newVisual .hero__inner--kv{
    width:min(92vw,620px);
    min-height:0;
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    padding:0;
  }

  .heroKV__opening img{
    width:min(72vw,430px);
  }

  .heroKV__stage{
    grid-row:1;
    width:min(80vw,480px);
    max-height:none;
    margin:0 auto;
    align-self:auto;
  }

  .heroMonsterGate{
    width:74%;
  }

  .heroMeta--left{
    grid-row:2;
    width:min(80vw,480px);
    margin:20px auto 0;
    padding:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto 68px;
    align-items:end;
    column-gap:12px;
    text-align:left;
    transform:none;
  }

  .heroMeta__label{
    grid-column:1/-1;
    grid-row:1;
    margin-bottom:9px;
  }

  .heroMeta__period{
    grid-column:1;
    grid-row:2;
    min-width:0;
    grid-template-columns:auto auto auto;
  }

  .heroMeta__period b{
    font-size:13px;
  }

  .heroMeta__period strong{
    font-size:34px;
  }

  .heroMeta__venue{
    grid-column:2;
    grid-row:2;
    margin:0 0 2px;
    font-size:20px;
    white-space:nowrap;
  }

  .heroMeta__visualizer--sp{
    grid-column:3;
    grid-row:2;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    width:68px;
    height:32px;
    margin:0 0 2px;
    gap:2px;
    opacity:1;
    overflow:hidden;
    filter:
      drop-shadow(0 0 9px rgba(193,246,255,.48))
      drop-shadow(0 0 8px rgba(230,129,187,.14));
  }

  .heroMeta__visualizer--sp i{
    width:3px;
    max-height:30px;
    background:linear-gradient(
      180deg,
      #fff 0%,
      #dffcff 28%,
      #86e8f4 68%,
      #7bc6ea 100%
    );
  }

  .heroMeta__visualizer--sp i:nth-child(3n){
    background:linear-gradient(
      180deg,
      #fff 0%,
      #f3e9ff 30%,
      #e8b6da 66%,
      #9edff2 100%
    );
  }

  .heroMeta__visualizer--sp i:nth-child(5n){
    background:linear-gradient(
      180deg,
      #fff 0%,
      #c9f6ff 38%,
      #b9c8f3 68%,
      #ebb5d7 100%
    );
  }

  .heroMeta__line{
    grid-column:1/-1;
    grid-row:3;
    width:100%;
    margin-top:12px;
  }

  .heroMeta--right{
    grid-row:3;
    width:min(80vw,480px);
    margin:15px auto 0;
    padding:0;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:center;
  }

  .heroMeta--right > .heroTicket,
  .heroMeta--right .heroTickets,
  .heroMeta--right .heroTickets .heroTicket{
    width:100%;
    max-width:none;
    min-width:0;
    margin:0;
    transform:none;
  }

  .heroMeta--right .heroTickets{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .heroMeta--right .heroTicket{
    justify-self:stretch;
  }

  .heroKV__corner{
    width:22px;
    height:22px;
  }

  .heroKV__corner--tl{
    left:-8px;
    top:-8px;
  }

  .heroKV__corner--tr{
    right:-8px;
    top:-8px;
  }

  .heroKV__corner--bl{
    left:-8px;
    bottom:-8px;
  }

  .heroKV__corner--br{
    right:-8px;
    bottom:-8px;
  }

  .heroTicket strong{
    display:flex;
    align-items:baseline;
    gap:10px;
  }

  .heroTicket strong em{
    white-space:nowrap;
  }
}

/* SMALL SP */

@media (max-width:640px){
  .hero__bg{
    background-size:auto 820px;
  }
}

@media (max-width:560px){
  .hero.hero--newVisual{
    padding:68px 0 46px;
  }

      .hero__wave{
    display:none;
  }
    
  .heroKV__stage{
    width:calc(100vw - 32px);
  }

  .heroMeta--left,.heroMeta--right{
    width:calc(100vw - 32px);
  }

  .heroMeta--left{
    grid-template-columns:minmax(0,1fr) auto 54px;
    column-gap:8px;
  }

  .heroMeta__visualizer--sp{
    width:54px;
    height:28px;
    gap:2px;
  }

  .heroMeta__visualizer--sp i{
    width:3px;
  }

  .heroMeta__period strong{
    font-size:31px;
  }

  .heroMeta__venue{
    font-size:17px;
    letter-spacing:.08em;
  }

  .heroTicket{
    width:100%;
    padding:14px 43px 13px 14px;
  }

  .heroTicket strong{
    font-size:22px;
  }

  .heroTicket strong em{
    font-size:11px;
  }
}

/* =====================================================
   COMMON / SECTION / MOTION
===================================================== */

@keyframes vu{
  to{
    transform:scaleY(.34);
    opacity:.68;
  }
}

.section{
  position:relative;
  isolation:isolate;
  padding:clamp(30px,5vw,72px) 0;
  background:#050816;
}

.inner{
  width:min(90%, 1040px);
  margin:auto;
}

.sectionTitle{
  font-family:var(--display);
  color:var(--cyan);
  letter-spacing:.22em;
  margin:0;
  padding:30px 0;
  font-size:clamp(36px, 5vw, 60px);
  line-height:1;
}

.sectionLead{
  font-family:var(--display);
  letter-spacing:.22em;
  margin:0 0 12px;
  color:var(--cyan);
  font-size:clamp(36px, 5vw, 60px);
  line-height:1;
}

.sectionCard{
  padding:32px;
}

.castTextBlock{
  padding:clamp(22px,4vw,32px);
  /* border:1px solid var(--line); */
  background:rgba(5,18,55,.42);
}

.introTextBlock h3, .storyLead,.castTextBlock h3{
  margin:0 0 18px;
  font-size:clamp(20px, 2.4vw, 32px);
  line-height:1.4;
}

.introTextBlock p, .castTextBlock p{
  margin:0;
  color:var(--muted);
}

.introTextBlock p + p, .castTextBlock p + p{
  margin-top:1.4em;
}

.js-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s ease, transform .9s ease;
}

.js-reveal.is-in{
  opacity:1;
  transform:none;
}

.introBox,
.storyBox,
.schedule__card{
  padding:32px;
}

.section::before,
.section::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:clamp(180px,24vw,420px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(42px);
  opacity:.18;
  pointer-events:none;
  transform:translate3d(0,0,0);
}

.section::before{
  top:8%;
  left:-12%;
  background:radial-gradient(circle,rgba(0,229,255,.92),transparent 68%);
}

.section::after{
  right:-14%;
  bottom:4%;
  background:radial-gradient(circle,rgba(255,42,163,.56),transparent 68%);
}

.section:nth-of-type(even)::before{
  left:auto;
  right:-12%;
}

.section:nth-of-type(even)::after{
  right:auto;
  left:-14%;
}

.sectionLead,
.sectionTitle{
  position:relative;
  display:table;
  overflow:hidden;
}

.sectionLead::after,
.sectionTitle::after{
  content:"";
  position:absolute;
  inset:46% -8% auto;
  height:18%;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.82),rgba(255,225,74,.32),rgba(255,42,163,.78),transparent);
  filter:blur(7px);
  opacity:0;
  transform:translateX(-80%) skewX(-24deg);
}

.section.is-motion-in .sectionLead::after,
.section.is-motion-in .sectionTitle::after{
  animation:titleFlash 1s .18s ease-out;
}

@keyframes titleFlash{
  0%{
    opacity:0;
    transform:translateX(-90%) skewX(-24deg);
  }

  35%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:translateX(90%) skewX(-24deg);
  }
}

.introTextBlock,
.storyText > p,
.storyText > h3,
.storyText > strong,
.staffRow,
.ensembleLine span{
  transition:opacity .65s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .65s ease;
}

.motion-ready .section:not(.is-motion-in) .introTextBlock,
.motion-ready .section:not(.is-motion-in) .storyText > p,
.motion-ready .section:not(.is-motion-in) .storyText > h3,
.motion-ready .section:not(.is-motion-in) .storyText > strong,
.motion-ready .section:not(.is-motion-in) .staffRow,
.motion-ready .section:not(.is-motion-in) .ensembleLine span{
  opacity:0;
  transform:translateY(28px);
  filter:blur(5px);
}

.section.is-motion-in .introTextBlock:nth-child(2),
.section.is-motion-in .storyText > :nth-child(2),
.section.is-motion-in .staffRow:nth-child(2){
  transition-delay:.08s;
}

.section.is-motion-in .introTextBlock:nth-child(3),
.section.is-motion-in .storyText > :nth-child(3),
.section.is-motion-in .staffRow:nth-child(3){
  transition-delay:.16s;
}

.section.is-motion-in .introTextBlock:nth-child(4),
.section.is-motion-in .storyText > :nth-child(4),
.section.is-motion-in .staffRow:nth-child(4){
  transition-delay:.24s;
}

.newsItem,
.personBtn,
.ticket a[href="#top"]{
  position:relative;
  overflow:hidden;
}

.newsItem::after,
.personBtn::after,
.ticket a[href="#top"]::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -45%;
  width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-22deg);
  transition:left .55s ease;
  pointer-events:none;
}

.newsItem:hover::after,
.personBtn:hover::after,
.ticket a[href="#top"]:hover::after{
  left:120%;
}

.motion-streak{
  display:none !important;
}

.motion-orb{
  display:none !important;
}

.story,
.cast{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.sectionWave{
  position:absolute;
  left:0;
  bottom:0;
  z-index:3;
  width:100%;
  height:64px;
  opacity:.52;
  mix-blend-mode:screen;
  pointer-events:none;
}

.sectionTitle,
.sectionLead{
  z-index:2;
  text-shadow:0 0 20px rgba(0,229,255,.38),2px 0 0 rgba(255,42,163,.12);
}

.sectionWave--staff{
  position:absolute;
  left:0;
  bottom:0;
  z-index:3;
  width:100%;
  height:70px;
  opacity:.5;
  mix-blend-mode:screen;
  pointer-events:none;
}

.intro > .sectionWave,
.story > .sectionWave,
.news > .sectionWave,
.schedule > .sectionWave{
  display:none !important;
}

.sectionTitle::before,
.sectionLead::before{
  content:"";
  position:absolute;
  left:-28px;
  top:50%;
  z-index:-1;
  width:260px;
  height:84px;
  border-radius:50%;
  transform:translateY(-50%);
  background:radial-gradient(ellipse at 30% 50%,rgba(49,87,255,.16) 0%,rgba(0,229,255,.055) 42%,transparent 72%),
    radial-gradient(ellipse at 78% 55%,rgba(255,42,163,.075) 0%,transparent 62%);
  filter:blur(8px);
  opacity:.72;
  pointer-events:none;
}

main > section[id],
#top,
#ticket{
  scroll-margin-top:86px;
}

main > section.is-anchor-arrived > .inner{
  animation:anchorArrive .72s cubic-bezier(.16,1,.3,1);
}

@keyframes anchorArrive{
  0%{
    opacity:.72;
    transform:translateY(14px);
    filter:blur(2px);
  }

  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}

.schedule .inner,
.ticket .ticket__inner{
  display:block;
  width:min(90%,1040px);
  padding:0;
  border:0;
  background:none;
  text-align:left;
}


@media (max-width:840px){
  .sectionCard{
    padding:20px;
  }

  .sectionTitle,
      .sectionLead{
    font-size:32px;
    font-weight:400;
    line-height:1;
    width:100%;
    display:block;
    text-align:center;
  }

  .introBox, .cast__grid, .schedule__card{
    grid-template-columns:1fr;
  }

  .intro .inner,
      .story .inner{
    width:94vw;
  }

  .introTextBlock h3,.storyLead,
      .castTextBlock h3{
    margin:15px 0 15px 0;
  }

  .introTextBlock p,
      .castTextBlock p,.storyText p{
    font-size:14px;
    line-height:1.85;
  }

  .introBox,
  .storyBox,
  .schedule__card{
    padding:15px;
  }

  .section::before,.section::after{
    opacity:.09;
    filter:blur(32px);
  }

  .motion-ready .section:not(.is-motion-in) > .inner{
    transform:translateY(34px);
  }

    .motion-ready .cast:not(.is-motion-in) > .inner{
  transform:none;
}
    
    
  .sectionWave{
    height:46px;
    opacity:.40;
  }

  .intro::after,
      .story::after,
      .cast::after{
    bottom:6px;
    height:30px;
    background-size:520px 30px;
    opacity:.30;
    animation-duration:7s;
  }

  .sectionWave--staff{
    height:50px;
    opacity:.38;
  }

  .sectionTitle::before,
      .sectionLead::before{
    left:50%;
    transform:translate(-50%, -50%);
    width:190px;
    height:62px;
    filter:blur(7px);
    opacity:.58;
  }

  main > section[id],
      #top,
      #ticket{
    scroll-margin-top:72px;
  }
}

@media (max-width:480px){
  .introTextBlock h3,.storyLead,
      .castTextBlock h3{
    line-height:1.35;
  }

  .storyCard,
      .storyWrap,
      .introWrap,
      .introTextBlocks{
    width:100% !important;
    max-width:none !important;
  }
}

/* =====================================================
   NEWS
===================================================== */
.news {
    padding-top: 70px;
    background:
        radial-gradient(circle at 12% 20%, rgba(0, 229, 255, .07), transparent 26%), radial-gradient(circle at 88% 72%, rgba(255, 42, 163, .055), transparent 25%), #050816;
}
.news__grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 42px;
    align-items: start;
    padding-top: 26px;
}
/* NEWS LIST
---------------------------------- */
.newsList {
 position:relative;
  border-top:0;
}
.newsList::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--cyan),
    var(--pink-soft),
    transparent
  );
  box-shadow:0 0 18px rgba(0,229,255,.4);
}
/* NEWS ITEM
---------------------------------- */
.newsItem {
    position: relative;
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 34px;
    gap: 20px;
    align-items: center;
    min-height:68px;
    padding: 18px 4px;
    overflow: hidden;
    border-bottom: 1px solid rgba(220, 241, 255, .16);
    transition:
        background .35s ease, border-color .35s ease;
}
/* タイトル */
.newsItem > span {
    position: relative;
    z-index: 2;
    color: var(--ice);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.7;
    transition:
        color .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
/* DATE
---------------------------------- */
.newsDate {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-self: start;
    min-width:77px;
    font-family: var(--display);
    font-variant-numeric: tabular-nums;
    line-height: .92;
}
/* 年 */
.newsDate__year {
    margin-bottom: 5px;
    color: transparent;
    background: linear-gradient(90deg, #f2ecdc 0%, #c9f6ff 52%, #e9bfd9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 13.5px;
    letter-spacing: .36em;
}
/* 月日 */
.newsDate__md {
    color: transparent;
    background: linear-gradient(90deg, #c9f6ff 0%, #dceaf2 48%, #ebb5d7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 29px;
    letter-spacing: .015em;
    filter: drop-shadow(0 0 8px rgba(201, 246, 255, .08));
}
/* RIGHT ARROW
---------------------------------- */
.newsItem::after {
    content: "";
    justify-self: end;
    width: 22px;
    height: 22px;
    border-top: 1px solid rgba(201, 246, 255, .75);
    border-right: 1px solid rgba(201, 246, 255, .75);
    transform: rotate(45deg) scale(.52);
    filter: drop-shadow(0 0 6px rgba(0, 207, 230, .18));
    transition:
        transform .45s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, filter .3s ease;
}
/* HOVER
---------------------------------- */
@media (hover:hover) {
    .newsItem:hover {
        border-color: rgba(201, 246, 255, .32);
        background:
            linear-gradient(90deg, rgba(44, 78, 230, .07), rgba(230, 129, 187, .035) 72%, transparent);
    }
    .newsItem:hover > span {
        color: #fff;
        transform: translateX(5px);
    }
    .newsItem:hover::after {
        border-color: var(--pink-soft);
        transform:
            translateX(5px) rotate(45deg) scale(.62);
        filter:
            drop-shadow(0 0 7px rgba(230, 129, 187, .32));
    }
}
/* =====================================================
   NEWS / SP・TABLET
===================================================== */
@media (max-width:840px) {
    .news {
        padding: 0 0 60px;
    }
    .news__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 20px;
    }
    .newsItem {
        grid-template-columns: 76px minmax(0, 1fr) 24px;
        gap: 16px;
        min-height: 82px;
        padding: 15px 2px;
    }
    .newsDate {
        min-width: 62px;
    }
    .newsDate__year {
        margin-bottom: 4px;
        font-size: 11px;
    }
    .newsDate__md {
        font-size: 24px;
    }
    .newsItem > span {
        font-size: 14px;
        line-height: 1.65;
    }
    .newsItem::after {
        width: 17px;
        height: 17px;
    }
}
/* =====================================================
   NEWS / SMALL SP
===================================================== */
@media (max-width:560px) {
    .newsItem {
        grid-template-columns: 64px minmax(0, 1fr) 18px;
        gap: 12px;
        padding: 14px 0;
    }
    .newsDate {
        min-width: 58px;
    }
    .newsDate__year {
        font-size: 10px;
        letter-spacing: .14em;
    }
    .newsDate__md {
        font-size: 22px;
    }
    .newsItem > span {
        font-size: 13px;
    }
    .newsItem::after {
        width: 14px;
        height: 14px;
    }
}
/* =====================================================
   INTRODUCTION
===================================================== */

.intro{
  background:
    radial-gradient(ellipse at 0 28%,rgba(0,207,230,.11),transparent 48%),
    radial-gradient(ellipse at 100% 68%,rgba(230,129,187,.09),transparent 50%),
    linear-gradient(180deg,#07102a 0%,#08132d 52%,#061027 100%);
}

.introBox{
  position:relative;
  z-index:1;

  box-shadow:
    inset 0 1px rgba(255,255,255,.025);
}

/* 以前の四角く切れる光は削除 */
.introBox::before{
  display:none;
}

.intro h2{
  margin:0 0 26px;
  font-size:40px;
  line-height:1.4;
  font-weight:900;
}

.intro__stage{
  min-height:360px;
  background:linear-gradient(180deg, rgba(7, 20, 60, .18), #020712), url("../img/vm_bg.png");
  background-size:cover;
  background-position:center top;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
}

.introTextBlocks{
  display:grid;
  gap:22px;
  margin-top:32px;
}

.introTextBlock span{
  color:var(--cyan);
  font-weight:600;
}


.introTextBlock{
  position:relative;
  margin-top:18px;
  padding:clamp(20px,3vw,30px);
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(49,87,255,.085),rgba(255,42,163,.025));
  border-left:1px solid rgba(0,229,255,.42);
  box-shadow:inset 14px 0 30px rgba(49,87,255,.035);
}

.introTextBlock::before{
  content:"";
  position:absolute;
  left:-2px;
  top:0;
  width:2px;
  height:0;
  background:linear-gradient(var(--cyan),var(--blue),transparent);
  box-shadow:0 0 14px rgba(0,229,255,.65);
  transition:height 1s cubic-bezier(.16,1,.3,1);
}

.intro.is-motion-in .introTextBlock::before{
  height:100%;
}

.introTextBlock h3{
  text-shadow:0 0 20px rgba(0,229,255,.12);
}

.introTextBlock--toggle .introTextBlock__more{
  display:none;
}

.introTextBlock--toggle.is-open .introTextBlock__more{
  display:inline;
}

.introTextBlock--toggle.is-open div.introTextBlock__more{
  display:block;
}

.introMoreButton{
  width:min(360px, 100%);
  min-height:58px;
  margin:18px auto 34px;
  padding:14px 54px 14px 28px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(140, 238, 255, .62);
  background:linear-gradient(135deg, rgba(10, 36, 91, .92), rgba(4, 15, 46, .96));
  box-shadow:0 0 24px rgba(27, 120, 255, .16), inset 0 0 18px rgba(140, 238, 255, .05);
  font:inherit;
  font-size:16px;
  font-weight:700;
  letter-spacing:.12em;
  cursor:pointer;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.introMoreButton:hover{
  border-color:rgba(255, 255, 255, .9);
  box-shadow:0 0 30px rgba(27, 120, 255, .3), inset 0 0 18px rgba(140, 238, 255, .1);
  transform:translateY(-2px);
}

.introMoreButton:focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
}

.introMoreButton__icon{
  width:14px;
  height:14px;
  position:absolute;
  right:26px;
  top:50%;
  transform:translateY(-50%);
}

.introMoreButton__icon::before,
.introMoreButton__icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:#00e5ff;
  transform:translate(-50%, -50%);
  transition:transform .25s ease, opacity .25s ease;
}

.introMoreButton__icon::before{
  width:14px;
  height:2px;
}

.introMoreButton__icon::after{
  width:2px;
  height:14px;
}

.introMoreButton[aria-expanded="true"] .introMoreButton__icon::after{
  opacity:0;
  transform:translate(-50%, -50%) rotate(90deg);
}

.introTextBlock--toggle:not(.is-open) > p:first-of-type{
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 calc(100% - 3.2em), transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 calc(100% - 3.2em), transparent 100%);
}

.introTextBlock--toggle.is-open > p:first-of-type{
  -webkit-mask-image:none;
  mask-image:none;
}

@media (max-width:840px){
  .intro h2{
    font-size:26px;
  }

  .introTextBlocks{
    display:grid;
    gap:2px;
    margin-top:42px;
  }

  .introTextBlock{
    margin-top:18px;
    padding:18px 0 0;
    border-left:0;
    border-top:1px solid rgba(0,229,255,.38);
    box-shadow:none;
  }

  .introTextBlock::before{
    left:0;
    top:-1px;
    width:0;
    height:1px;
    background:linear-gradient(
          90deg,
          var(--cyan),
          var(--blue),
          transparent
        );
    transition:width 1s cubic-bezier(.16,1,.3,1);
  }

  .intro.is-motion-in .introTextBlock::before{
    width:100%;
    height:1px;
  }

  .introMoreButton{
    width:min(320px, 92%);
    min-height:54px;
    margin:20px auto 30px;
    font-size:15px;
  }

  .introTextBlock--toggle:not(.is-open) > p:first-of-type{
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 calc(100% - 4em), transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 calc(100% - 4em), transparent 100%);
  }
}

/* =====================================================
   STORY
===================================================== */
.story{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 0 30%,rgba(0,229,255,.12),transparent 48%),
    radial-gradient(ellipse at 100% 65%,rgba(255,42,163,.11),transparent 50%),
    linear-gradient(180deg,rgba(7,18,48,.74),rgba(5,8,22,.94)),
    #050816;
}
/* =====================================================
   STORY / INNER
===================================================== */
.story > .inner{
  position:relative;
  z-index:2;
}
/* =====================================================
   STORY / BACKGROUND MOTION
===================================================== */
.storyMotion {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
/* 左：青い光 */
.storyMotion::before {
    content: "";
    position: absolute;
    left: -16%;
    top: -18%;
    width: 58%;
    height: 130%;
    background:
        radial-gradient(ellipse, rgba(0, 207, 230, .15), rgba(44, 78, 230, .06) 42%, transparent 70%);
    filter: blur(38px);
    animation:
        storyGlowLeft 13s ease-in-out infinite alternate;
}
/* 右：ピンクの光 */
.storyMotion::after {
    content: "";
    position: absolute;
    right: -18%;
    bottom: -22%;
    width: 62%;
    height: 130%;
    background:
        radial-gradient(ellipse, rgba(230, 129, 187, .14), rgba(158, 87, 209, .055) 44%, transparent 70%);
    filter: blur(42px);
    animation:
        storyGlowRight 15s ease-in-out infinite alternate;
}
@keyframes storyGlowLeft {
    from {
        transform:
            translate3d(-2%, 0, 0) scale(.96);
    }
    to {
        transform:
            translate3d(7%, -3%, 0) scale(1.08);
    }
}
@keyframes storyGlowRight {
    from {
        transform:
            translate3d(3%, 2%, 0) scale(.97);
    }
    to {
        transform:
            translate3d(-7%, -3%, 0) scale(1.08);
    }
}
/* 旧背景演出は使用しない */
.storyWave, .storyStageLight, .storyGlow {
    display: none;
}
/* =====================================================
   STORY / BOX
===================================================== */
.storyBox{
  position:relative;
  z-index:2;
  border:0;
  background:none;
  backdrop-filter:none;
}
/* 旧BOX装飾を消す */
.storyBox::before, .storyBox::after {
    display: none;
}
/* =====================================================
   STORY / TEXT
===================================================== */
.storyText {
    width: 100%;
    max-width: none;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
}
/* 強調 */
strong.blue {
    color: var(--cyan);
    font-family: var(--body);
}
/* =====================================================
   STORY / ACT
===================================================== */
.blue-act {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
    padding: 5px 12px 5px 0;
    color: var(--cyan);
    font-family: var(--display);
    font-size: clamp(23px, 2.7vw, 36px);
    letter-spacing: .16em;
    text-shadow:
        0 0 16px rgba(0, 207, 230, .32);
}
.blue-act::before {
    content: "";
    width: 34px;
    height: 1px;
    background:
        linear-gradient(90deg, var(--cyan), var(--pink-soft), transparent);
    box-shadow:
        0 0 10px rgba(0, 207, 230, .25);
}
/* =====================================================
   STORY / LEAD
===================================================== */
.storyLead {
    position: relative;
    padding-bottom: 18px;
}
.storyLead::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(320px, 72%);
    height: 1px;
    background:
        linear-gradient(90deg, var(--cyan), rgba(201, 246, 255, .7) 42%, rgba(230, 129, 187, .55) 72%, transparent);
    box-shadow:
        0 0 12px rgba(0, 207, 230, .18);
}
/* 長いダッシュ */
.longDash {
    display: inline-block;
    width: 2.2em;
    margin-left: .2em;
    border-top: 2px solid var(--muted);
    vertical-align: middle;
}
/* =====================================================
   STORY / CAST ROLE
===================================================== */
.storyCastRoles {
    margin: 1.4em 0;
    padding: 0;
    border: 0;
    background: none;
    line-height: 1.9;
}
/* =====================================================
   STORY / END
===================================================== */
.storyEnd {
    position: relative;
    margin-top: 34px;
    padding: 20px 12px;
      color:var(--cyan);
    font-size: clamp(19px, 1.9vw, 24px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0;
    text-align: center;
    background:
        radial-gradient(ellipse at 40% 50%, rgba(0, 207, 230, .08), transparent 50%), radial-gradient(ellipse at 65% 50%, rgba(230, 129, 187, .055), transparent 52%);
}
/* =====================================================
   STORY / EQUALIZER
===================================================== */
.storyEqualizer {
    position: absolute;
    right: 2%;
    bottom: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 64px;
    margin: 0;
    opacity: .13;
    filter:
        drop-shadow(0 0 10px rgba(0, 207, 230, .30)) drop-shadow(0 0 12px rgba(230, 129, 187, .10));
}
.storyEqualizer i {
    display: block;
    width: 4px;
    height: 24px;
    border-radius: 99px;
    background:
        linear-gradient(180deg, var(--pink-soft), var(--cyan) 58%, var(--blue));
    transform-origin: bottom;
    animation:
        vu 1.2s ease-in-out infinite alternate;
}
.storyEqualizer i:nth-child(2n) {
    height: 42px;
    animation-delay: .16s;
}
.storyEqualizer i:nth-child(3n) {
    height: 38px;
    animation-delay: .28s;
}
.storyEqualizer i:nth-child(5n) {
    height: 30px;
    animation-delay: .42s;
}
/* =====================================================
   CHARACTER INTRO
===================================================== */
.characterIntro {
    position: relative;
    margin: 44px 0 48px;
    padding: 30px;
    border: 1px solid rgba(201, 246, 255, .16);
    background:
        linear-gradient(110deg, rgba(0, 207, 230, .055), rgba(8, 14, 35, .42) 42%, rgba(230, 129, 187, .045));
    box-shadow:
        inset 0 0 40px rgba(44, 78, 230, .035);
}
.characterIntro__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    color: var(--cyan);
    font-size: clamp(21px, 2.4vw, 30px);
    font-weight: 900;
    letter-spacing: .08em;
}
.characterIntro__title::before {
    content: "";
    flex: 0 0 auto;
    width: 42px;
    height: 1px;
    background:
        linear-gradient(90deg, var(--cyan), var(--pink-soft));
    box-shadow:
        0 0 10px rgba(0, 207, 230, .22);
}
.characterIntro__grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.characterIntro__item {
    position: relative;
    padding: 20px 20px 18px;
    border-left: 1px solid rgba(0, 207, 230, .42);
    background:
        linear-gradient(110deg, rgba(0, 207, 230, .035), rgba(230, 129, 187, .02));
}
.characterIntro__name {
    margin: 0 0 10px;
    color: var(--cyan);
    font-size: clamp(17px, 1.7vw, 21px);
    font-weight: 900;
    line-height: 1.45;
}
.characterIntro__name small {
    display: inline-block;
    margin-left: .25em;
    color: var(--ice);
    font-size: .78em;
    font-weight: 700;
}
.characterIntro__item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
}
/* =====================================================
   STORY / TABLET・SP
===================================================== */
@media (max-width:840px) {
    .story > .inner {
        width: 94%;
    }
    .storyBox {
        padding-left: 15px;
        padding-right: 15px;
    }
    .storyText {
        width: 100%;
        margin: 0;
    }
    .storyText p.storyEnd {
        font-size: 18px;
    }
    .longDash {
        width: 1.4em;
    }
    .storyCastRoles {
        font-size: 14px;
        line-height: 1.8;
    }
    .storyEqualizer {
        right: 0;
        bottom: 4%;
        height: 44px;
        gap: 3px;
        opacity: .08;
    }
    .storyEqualizer i {
        width: 3px;
        height: 18px;
    }
    .storyEqualizer i:nth-child(2n) {
        height: 30px;
    }
    .storyEqualizer i:nth-child(3n) {
        height: 28px;
    }
    .storyEqualizer i:nth-child(5n) {
        height: 22px;
    }
}
/* =====================================================
   STORY / SMALL SP
===================================================== */
@media (max-width:560px) {
    .story {
        background:
            radial-gradient(ellipse at 0 20%, rgba(0, 207, 230, .12), transparent 48%), radial-gradient(ellipse at 100% 68%, rgba(230, 129, 187, .10), transparent 50%), #071027;
    }
    
        .storyText p.storyEnd {
        font-size: 17.5px;
    }
    
    
    .characterIntro {
        margin: 34px 0 38px;
        padding: 22px 16px;
    }
    .characterIntro__title {
        margin-bottom: 18px;
        font-size: 20px;
    }
    .characterIntro__title::before {
        width: 28px;
    }
    .characterIntro__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .characterIntro__item {
        padding: 17px 15px 16px;
    }
    .characterIntro__name {
        font-size: 17px;
    }
    .characterIntro__item p {
        font-size: 14px;
        line-height: 1.85;
    }
}
/* =====================================================
   CAST / CREATIVES / PROFILE MODAL
===================================================== */

.personGroupTitle{
  margin:0 0 38px;
  color:var(--cyan);
  font-family:var(--display);
  font-size:clamp(34px,5vw,58px);
  font-weight:400;
  line-height:1;
  letter-spacing:.18em;
  text-align:center;
}

.personGroupTitle--small{
  font-size:clamp(28px,4vw,44px);
}

.principalSection,
.ensembleSection,
.creatorSection{
  padding-top:48px;
}

.ensembleSection,
.creatorSection{
  margin-top:88px;
}

.principalRows{
  display:grid;
  gap:58px;
}

.principalRow{
  display:grid;
  justify-content:center;
  gap:30px;
}

.principalRow--one{
  grid-template-columns:minmax(0,300px);
}

.principalRow--three{
  grid-template-columns:repeat(3,minmax(0,300px));
}

.principalRow--two{
  grid-template-columns:repeat(2,minmax(0,300px));
}

.personCard{
  min-width:0;
  text-align:center;
}

.personCard--principal{
  position:relative;
  width:300px;
  max-width:100%;
}

.personPhoto{
  position:relative;
  isolation:isolate;
  aspect-ratio:4/5;
  overflow:hidden;
  margin-bottom:22px;
  border:1px solid rgba(0,229,255,.28);
  background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(49,87,255,.04)),
    #06102b;
  box-shadow:0 0 42px rgba(0,229,255,.14),18px 0 46px rgba(255,42,163,.055);
  clip-path:polygon(0 0,10% 0,0 100%,0 100%);
  transform:translate3d(-12px,0,0);
  opacity:.01;
  transition:clip-path .72s cubic-bezier(.82,0,.18,1),
    transform .72s cubic-bezier(.16,1,.3,1),
    opacity .12s linear;
  will-change:clip-path,transform;
}

.personPhoto.is-photo-in{
  will-change:auto;
}

.personPhoto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  transform:scale(1.16);
  filter:contrast(1.08) saturate(.92);
  transition:transform .9s cubic-bezier(.16,1,.3,1),
    filter .65s ease;
  will-change:transform;
}

.personPhoto.is-photo-in img{
  will-change:auto;
}

.personPhoto__zoomButton{
  position:absolute;
  inset:0;
  z-index:6;
  appearance:none;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
}

.personPhoto__zoomButton::after{
  content:"";
  position:absolute;
  right:12px;
  bottom:12px;
  width:40px;
  height:40px;
  background:
    linear-gradient(var(--cyan),var(--cyan)) left top / 10px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left top / 1px 10px no-repeat,
    linear-gradient(var(--pink-soft),var(--pink-soft)) right bottom / 10px 1px no-repeat,
    linear-gradient(var(--pink-soft),var(--pink-soft)) right bottom / 1px 10px no-repeat,
    linear-gradient(#fff,#fff) center / 12px 1px no-repeat,
    linear-gradient(#fff,#fff) center / 1px 12px no-repeat,
    rgba(2,7,18,.46);
  box-shadow:inset 0 0 18px rgba(0,229,255,.06),0 0 18px rgba(0,229,255,.08);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .25s ease,box-shadow .25s ease;
}

@media (hover:hover){
  .personPhoto__zoomButton:hover::after{
    transform:scale(1.08) rotate(90deg);
    background-color:rgba(2,7,18,.72);
    box-shadow:inset 0 0 20px rgba(0,229,255,.10),0 0 22px rgba(0,229,255,.18);
  }
}

.personCard__role{
  min-height:1.5em;
  margin:0 0 6px;
  color:var(--cyan);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
}

.personCard__jp{
  margin:0;
  font-size:clamp(24px,2.45vw,34px);
  font-weight:700;
  line-height:1.2;
}

.personCard__name{
  min-height:1em;
  margin:6px 0 0;
  font-family:var(--display);
  font-size:15px;
  line-height:1;
  letter-spacing:.075em;
}

.personCard__actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:100%;
  margin-top:17px;
}

.personCard__actions--center{
  width:min(100%,520px);
  margin:24px auto 0;
}

.personBtn{
  appearance:none;
  width:100%;
  min-width:0;
  padding:13px 10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  font-family:var(--display);
  font-size:16px;
  line-height:1;
  letter-spacing:.14em;
  cursor:pointer;
  transition:.25s;
}

.personBtn:hover{
  color:var(--cyan);
  border-color:var(--cyan);
  box-shadow:0 0 24px rgba(0,229,255,.16);
}

.ensembleList{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

.ensembleLine{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
  gap:42px;
}

.ensembleLine span{
  flex:none;
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
  white-space:nowrap;
}

.ensembleNote{
  margin:18px 0 0;
  font-size:11px;
  text-align:center;
  opacity:.72;
}

.personCard--staffLead{
  width:min(100%,620px);
  margin:0 auto 54px;
  padding:34px;
  border:0;
  background:none;
}

.personCard--staffLead .personCard__role{
  font-size:14px;
  letter-spacing:.18em;
}

.profileModal{
  position:fixed;
  inset:0;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transition:.35s;
}

.profileModal.is-open{
  opacity:1;
  visibility:visible;
}

.profileModal__overlay{
  position:absolute;
  inset:0;
  background:rgba(2,7,18,.9);
  backdrop-filter:blur(12px);
}

.profileModal__panel{
  position:relative;
  top:50%;
  left:50%;
  display:flex;
  flex-direction:column;
  width:min(92vw,900px);
  max-height:80vh;
  overflow:hidden;
  padding:56px;
  border:1px solid var(--line);
  background:#06133e;
  box-shadow:0 0 80px rgba(0,229,255,.15);
  opacity:0;
  transform:translate(-50%,-48%);
  transition:.35s;
}

.profileModal.is-open .profileModal__panel{
  opacity:1;
  transform:translate(-50%,-50%);
}

#profileModalContent{
  overflow:auto;
  padding-right:10px;
}

#profileModalContent h3{
  margin:5px 0 24px;
  color:var(--cyan);
  font-size:28px;
  line-height:1.3;
}

#profileModalContent p{
  margin:0;
}

.profileModal__close{
  position:fixed;
  top:12px;
  right:clamp(18px,3vw,42px);
  z-index:10001;
  appearance:none;
  width:46px;
  height:46px;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(0,229,255,.45);
  background:rgba(0,0,0,.8);
  box-shadow:0 0 0 1px rgba(0,229,255,.12),0 0 12px rgba(0,229,255,.18);
  color:transparent;
  font-size:0;
  line-height:0;
  cursor:pointer;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}

.profileModal__close::before,
.profileModal__close::after{
  content:"";
  position:absolute;
  left:12px;
  top:22px;
  width:22px;
  height:1px;
  background:linear-gradient(90deg,var(--cyan),#fff,var(--pink-soft));
  box-shadow:0 0 8px rgba(0,229,255,.45);
  transform-origin:center;
  transition:transform .25s ease,filter .25s ease;
}

.profileModal__close::before{
  transform:rotate(40deg);
}

.profileModal__close::after{
  transform:rotate(-40deg);
}

@media (hover:hover){
  .profileModal__close:hover{
    border-color:rgba(255,255,255,.72);
    box-shadow:0 0 0 1px rgba(0,229,255,.16),0 0 20px rgba(0,229,255,.24);
  }

  .profileModal__close:hover::before{
    transform:rotate(45deg) scaleX(1.06);
  }

  .profileModal__close:hover::after{
    transform:rotate(-45deg) scaleX(1.06);
  }
}


.profileModal.is-image-modal{
  display:grid;
  place-items:center;
}

.profileModal.is-image-modal .profileModal__panel{
  position:relative;

  top:auto;
  left:auto;

  width:auto;
  max-width:94vw;
  max-height:92vh;

  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;

  transform:none;
}

.profileModal.is-image-modal.is-open .profileModal__panel{
  transform:none;
}


.profileModal.is-image-modal #profileModalContent{
  padding:0;
  overflow:visible;
}

.imageModalContent{
  display:flex;
  align-items:center;
  justify-content:center;
}

.imageModalContent img{
  display:block;
  width:auto;
  height:auto;
  max-width:94vw;
  max-height:90vh;
  object-fit:contain;
  box-shadow:0 22px 70px rgba(0,0,0,.52),0 0 28px rgba(0,229,255,.08);
}

.personPhoto::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(105deg,#06133e 0 42%,#00e5ff 51%,#3157ff 56%,#06133e 66%);
  transform:translateX(-108%) skewX(-10deg);
  opacity:0;
  pointer-events:none;
}

.personPhoto::after{
  content:"";
  position:absolute;
  top:-8%;
  bottom:-8%;
  left:-28%;
  z-index:3;
  width:20%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),rgba(0,229,255,.38),transparent);
  filter:blur(2px);
  transform:skewX(-14deg);
  opacity:0;
  pointer-events:none;
}

.personPhoto.is-photo-in{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  transform:translate3d(0,0,0);
  opacity:1;
}

.personPhoto.is-photo-in img{
  transform:scale(1);
  filter:contrast(1.02) saturate(1);
}

.personPhoto.is-photo-in::before{
  animation:castMaskPeel .66s cubic-bezier(.76,0,.24,1) both;
}

.personPhoto.is-photo-in::after{
  animation:castMaskFlash .58s .08s cubic-bezier(.22,.75,.2,1) both;
}

.personCard:nth-child(2) .personPhoto.is-photo-in{
  transition-delay:.07s;
}

.personCard:nth-child(3) .personPhoto.is-photo-in{
  transition-delay:.14s;
}

.personCard:nth-child(2) .personPhoto.is-photo-in img{
  transition-delay:.07s;
}

.personCard:nth-child(3) .personPhoto.is-photo-in img{
  transition-delay:.14s;
}

.personCard:nth-child(2) .personPhoto.is-photo-in::before,
.personCard:nth-child(2) .personPhoto.is-photo-in::after{
  animation-delay:.07s;
}

.personCard:nth-child(3) .personPhoto.is-photo-in::before,
.personCard:nth-child(3) .personPhoto.is-photo-in::after{
  animation-delay:.14s;
}

@keyframes castMaskPeel{
  0%{
    transform:translateX(-108%) skewX(-10deg);
    opacity:1;
  }

  48%{
    opacity:1;
  }

  100%{
    transform:translateX(112%) skewX(-10deg);
    opacity:0;
  }
}

@keyframes castMaskFlash{
  0%{
    left:-28%;
    opacity:0;
  }

  22%{
    opacity:1;
  }

  100%{
    left:118%;
    opacity:0;
  }
}

.cast{
  background:radial-gradient(ellipse at 50% 8%,rgba(49,87,255,.27),transparent 40%),
    radial-gradient(circle at 14% 38%,rgba(0,229,255,.12),transparent 27%),
    radial-gradient(circle at 86% 56%,rgba(255,42,163,.14),transparent 28%),
    radial-gradient(circle at 72% 16%,rgba(255,225,74,.035),transparent 18%),
    #060b1d;
}

.cast::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(74deg,transparent 0 38%,rgba(0,229,255,.032) 39%,transparent 41%),
    linear-gradient(106deg,transparent 0 60%,rgba(49,87,255,.04) 61%,transparent 63%);
  transform-origin:50% 0;
  animation:vmCastBeams 12s ease-in-out infinite alternate;
}

@keyframes vmCastBeams{
  from{
    transform:translateX(-2%) skewX(-1deg);
    opacity:.55;
  }

  to{
    transform:translateX(2%) skewX(1deg);
    opacity:1;
  }
}

.cast > .inner{
  position:relative;
  z-index:2;
}

.personCard--principal::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:12%;
  height:58%;
  z-index:-1;
  background:radial-gradient(ellipse at 50% 50%,rgba(49,87,255,.18),transparent 68%);
  filter:blur(22px);
  opacity:.55;
  transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1);
}

@media (max-width:840px){
  .principalSection,
      .ensembleSection,
      .creatorSection{
    padding-top:32px;
  }

  .ensembleSection,
      .creatorSection{
    margin-top:62px;
  }

  .personGroupTitle{
    margin-bottom:30px;
  }

  .principalRows,
      .principalRow,
      .principalRow--one,
      .principalRow--three,
      .principalRow--two{
    gap:42px;
  }

  .principalRow,
      .principalRow--one,
      .principalRow--three,
      .principalRow--two{
    grid-template-columns:minmax(0,1fr);
  }

  .personCard--principal{
    width:min(76vw,330px);
    margin:0 auto;
  }

    .personPhoto{
  margin-bottom:18px;
}

.personPhoto__zoomButton::after{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
  .personCard__jp{
    font-size:clamp(27px,8vw,34px);
  }

  .personCard__name{
    font-size:14px;
  }

  .personCard__actions{
    width:90%;
    margin:18px auto 0;
  }

  .ensembleList{
    gap:0;
  }

  .ensembleLine{
    display:contents;
  }

  .ensembleLine span{
    display:block;
    width:100%;
    padding:8px 0;
    font-size:16px;
    text-align:center;
  }

  .ensembleNote{
    margin-top:14px;
  }

  .personCard--staffLead{
    margin-bottom:34px;
    padding:26px 18px;
  }

  .profileModal__panel{
    padding:52px 24px 30px;
  }

  .profileModal.is-image-modal .profileModal__panel{
    width:auto;
    max-width:94vw;
    max-height:90vh;
    padding:0;
  }

  .profileModal__close{
    top:12px;
    right:14px;
  }

  .imageModalContent img{
    max-width:94vw;
    max-height:88vh;
  }


    
    
  .cast::before{
    opacity:.5;
  }
    
    
    
}/**/





@media (max-width:480px){
  .personCard__actions{
    width:100%;
  }

  .personBtn{
    font-size:14px;
    letter-spacing:.10em;
  }
}

@media (hover:hover){
  .personCard:hover .personPhoto.is-photo-in{
    transform:translateY(-9px) rotate(var(--tilt,0deg));
    box-shadow:0 20px 55px rgba(49,87,255,.22),0 0 38px rgba(0,229,255,.12);
  }

  .personCard:hover .personPhoto.is-photo-in img{
    transform:scale(1.045);
    filter:saturate(1.08) contrast(1.04);
  }

  .personCard:nth-child(odd){
    --tilt:-.45deg;
  }

  .personCard:nth-child(even){
    --tilt:.45deg;
  }

  .personCard--principal:hover::before{
    opacity:1;
    transform:scale(1.12);
  }
}

/* =====================================================
   STAFF
===================================================== */

.staffRows{
  padding:34px 28px;
}

.staffRow{
  display:flex;
  justify-content:center;
  align-items:baseline;
  flex-wrap:nowrap;
  gap:4px 24px;
  margin:0;
  text-align:center;
}

.staffRow + .staffRow{
  margin-top:2px;
}

.staffRow--gap{
  margin-top:20px !important;
}

.staffRow span{
  font-size:17px;
  line-height:1.65;
  white-space:nowrap;
}

.staffRow b{
  color:var(--cyan);
  font-size:14px;
  font-weight:600;
}

@media (max-width: 840px){
  .staffRows{
    padding:12px 0 12px 14px;
  }

  .staffRow{
    display:block;
    margin:0;
    text-align:left;
  }

  .staffRow + .staffRow{
    margin-top:0;
  }

  .staffRow--gap{
    margin-top:22px !important;
  }

  .staffRow span{
    display:block;
    padding:2px 0;
    font-size:16px;
    line-height:1.55;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .staffRow .staffItem--spGap{
    margin-top:1.55em;
  }

  .staffRow b{
    font-size:14px;
  }
}

/* =====================================================
   SCREAM / VOICE POWER
===================================================== */

.screamSection{
  position:relative;
  min-height:420px;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;
  padding:88px 0 92px;
  background:radial-gradient(circle at 50% 42%,rgba(49,87,255,.18),transparent 34%),
    radial-gradient(circle at 78% 70%,rgba(255,42,163,.12),transparent 28%),
    linear-gradient(180deg,#020712,#06102a 52%,#020712);
}

.screamSection::before{
  content:"VOICE";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.022);
  font-family:var(--accent);
  font-size:min(30vw,420px);
  line-height:.8;
  letter-spacing:.02em;
  white-space:nowrap;
  pointer-events:none;
  filter:none;
  opacity:1;
  width:auto;
  aspect-ratio:auto;
  border-radius:0;
  background:none;
}

.screamSection::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  width:auto;
  aspect-ratio:auto;
  border-radius:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 5px,
    rgba(255,255,255,.018) 6px
  );
  filter:none;
  opacity:.55;
}

.screamWave{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.66;
}

.screamSection__grid{
  position:absolute;
  inset:-20% -10%;
  z-index:1;
  pointer-events:none;
  opacity:.16;
  background-image:linear-gradient(rgba(0,229,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.12) 1px,transparent 1px);
  background-size:54px 54px;
  transform:perspective(720px) rotateX(66deg) scale(1.45) translateY(18%);
  transform-origin:50% 100%;
}

.screamSection__inner{
  position:relative;
  z-index:3;
  width:min(90%,920px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.screamSection__eyebrow{
  margin:0 0 12px;
  color:var(--cyan);
  font-family:var(--display);
  font-size:15px;
  line-height:1;
  letter-spacing:.28em;
}

.screamSection__title{
  margin:0;
  font-family:var(--accent);
  font-size:clamp(48px,8vw,104px);
  font-weight:400;
  line-height:.9;
  letter-spacing:.035em;
  text-shadow:3px 0 0 rgba(255,42,163,.42),
    -3px 0 0 rgba(0,229,255,.38),
    0 0 26px rgba(0,229,255,.12);
}

.screamSection__lead{
  margin:18px 0 0;
  font-size:clamp(17px,2vw,23px);
  font-weight:700;
  letter-spacing:.08em;
}

.screamButton{
  position:relative;
  width:min(100%,410px);
  min-height:92px;
  margin-top:32px;
  padding:12px 62px 12px 28px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.9);
  background:#050711;
  font-family:var(--accent);
  font-size:clamp(42px,6vw,68px);
  line-height:.9;
  letter-spacing:.08em;
  cursor:pointer;
  transform:skew(-5deg);
  box-shadow:8px 8px 0 rgba(255,42,163,.88),
    -6px -6px 0 rgba(0,229,255,.38),
    0 0 36px rgba(49,87,255,.16);
  transition:transform .22s cubic-bezier(.16,1,.3,1),
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}

.screamButton::before{
  content:"";
  position:absolute;
  inset:-20% auto -20% -42%;
  width:30%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  transition:left .46s ease;
}

.screamButton span{
  position:relative;
  z-index:2;
  display:block;
  transform:skew(5deg);
}

.screamButton i{
  position:absolute;
  right:26px;
  top:50%;
  width:22px;
  height:34px;
  transform:translateY(-50%) skew(5deg);
}

.screamButton i::before,
.screamButton i::after{
  content:"";
  position:absolute;
  left:50%;
  width:4px;
  border-radius:99px;
  background:#ffe14a;
  box-shadow:0 0 12px rgba(255,225,74,.72);
  transform:translateX(-50%);
}

.screamButton i::before{
  top:0;
  height:21px;
}

.screamButton i::after{
  bottom:0;
  height:6px;
}

.screamMeter{
  width:min(100%,620px);
  margin-top:30px;
}

.screamMeter__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:9px;
  font-family:var(--display);
  line-height:1;
}

.screamMeter__head > span{
  color:rgba(255,255,255,.62);
  font-size:13px;
  letter-spacing:.22em;
}

.screamMeter__head strong{
  color:#ffe14a;
  font-family:var(--accent);
  font-size:38px;
  font-weight:400;
  letter-spacing:.04em;
}

.screamMeter__head b{
  font:inherit;
}

.screamMeter__gauge{
  position:relative;
  height:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 14px rgba(0,0,0,.5);
}

.screamMeter__gauge::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(2,7,18,.58) 9% 10%);
  pointer-events:none;
}

.screamMeter__gauge > span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--cyan),#3157ff 38%,var(--pink) 72%,#ffe14a);
  box-shadow:0 0 18px rgba(0,229,255,.46),0 0 24px rgba(255,42,163,.24);
  transition:width .32s cubic-bezier(.16,1,.3,1);
}

.screamEqualizer{
  width:min(92%,560px);
  height:58px;
  margin-top:21px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  opacity:.68;
  filter:drop-shadow(0 0 12px rgba(0,229,255,.28));
}

.screamEqualizer i{
  display:block;
  width:4px;
  height:30px;
  border-radius:99px;
  background:linear-gradient(180deg,#ffe14a,var(--pink) 42%,var(--cyan));
  transform-origin:center;
  animation:screamBar 1.1s ease-in-out infinite alternate;
}

.screamEqualizer i:nth-child(2n){
  height:48px;
  animation-delay:-.18s;
}

.screamEqualizer i:nth-child(3n){
  height:22px;
  animation-delay:-.36s;
}

.screamEqualizer i:nth-child(5n){
  height:40px;
  animation-delay:-.52s;
}

.screamEqualizer i:nth-child(7n){
  height:54px;
  animation-delay:-.68s;
}

@keyframes screamBar{
  from{
    transform:scaleY(.28);
    opacity:.38;
  }

  to{
    transform:scaleY(1);
    opacity:1;
  }
}

.screamSection__hint{
  margin:8px 0 0;
  color:rgba(255,255,255,.46);
  font-size:11px;
  letter-spacing:.12em;
}

.screamAwake{
  position:absolute;
  left:50%;
  top:50%;
  z-index:8;
  width:min(76vw,620px);
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(.64);
  filter:blur(12px) brightness(1.5);
}

.screamAwake span{
  display:block;
  margin-bottom:12px;
  color:#ffe14a;
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.34em;
}

.screamAwake img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 0 28px rgba(0,229,255,.44)) drop-shadow(0 0 44px rgba(255,42,163,.20));
}

.motion-ready .screamSection:not(.is-motion-in) .screamSection__eyebrow,
.motion-ready .screamSection:not(.is-motion-in) .screamSection__title,
.motion-ready .screamSection:not(.is-motion-in) .screamSection__lead,
.motion-ready .screamSection:not(.is-motion-in) .screamButton,
.motion-ready .screamSection:not(.is-motion-in) .screamMeter,
.motion-ready .screamSection:not(.is-motion-in) .screamEqualizer{
  opacity:0;
  transform:translateY(24px);
}

.screamSection__eyebrow,
.screamSection__title,
.screamSection__lead,
.screamButton,
.screamMeter,
.screamEqualizer{
  transition:opacity .7s ease,
    transform .82s cubic-bezier(.16,1,.3,1);
}

.screamSection.is-motion-in .screamSection__lead{
  transition-delay:.08s;
}

.screamSection.is-motion-in .screamButton{
  transition-delay:.14s;
}

.screamSection.is-motion-in .screamMeter{
  transition-delay:.20s;
}

.screamSection.is-motion-in .screamEqualizer{
  transition-delay:.26s;
}

.screamSection.is-hit .screamSection__title{
  animation:screamTitleHit .30s linear 1;
}

.screamSection.is-hit .screamButton{
  animation:screamButtonHit .32s cubic-bezier(.16,1,.3,1) 1;
}

.screamSection.is-hit .screamEqualizer i{
  animation-duration:.18s;
}

.screamSection.is-hit .screamWave{
  opacity:1;
}

@keyframes screamTitleHit{
  0%,100%{
    transform:translate(0);
    filter:none;
  }

  25%{
    transform:translate(6px,-2px);
    filter:drop-shadow(-5px 0 0 rgba(0,229,255,.55));
  }

  50%{
    transform:translate(-7px,2px);
    filter:drop-shadow(6px 0 0 rgba(255,42,163,.55));
  }

  75%{
    transform:translate(3px,1px);
    filter:none;
  }
}

@keyframes screamButtonHit{
  0%,100%{
    transform:skew(-5deg) scale(1);
  }

  45%{
    transform:skew(-5deg) scale(1.055,.94);
  }
}

.screamSection.is-max .screamAwake{
  animation:screamAwake 1.85s cubic-bezier(.16,1,.3,1) both;
}

.screamSection.is-max .screamSection__inner > :not(.screamAwake){
  animation:screamFadeBack 1.85s ease both;
}

@keyframes screamAwake{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.62);
    filter:blur(12px) brightness(1.8);
  }

  24%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.04);
    filter:blur(0) brightness(1.2);
  }

  65%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    filter:blur(0) brightness(1);
  }

  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.11);
    filter:blur(5px) brightness(1.3);
  }
}

@keyframes screamFadeBack{
  0%,12%{
    opacity:1;
    filter:none;
  }

  30%,72%{
    opacity:.14;
    filter:blur(2px);
  }

  100%{
    opacity:1;
    filter:none;
  }
}

body.is-scream-hit main{
  animation:vmScreamScreenHit .30s linear 1;
}

body.is-scream-hit::after,
body.is-scream-max::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1400;
  pointer-events:none;
  mix-blend-mode:screen;
}

body.is-scream-hit::after{
  animation:vmScreamFlash .34s ease-out 1;
}

body.is-scream-max::after{
  animation:vmScreamMaxFlash 1.1s ease-out 1;
}

@keyframes vmScreamScreenHit{
  0%,100%{
    transform:translate(0);
  }

  22%{
    transform:translate(2px,-1px);
  }

  45%{
    transform:translate(-2px,1px);
  }

  68%{
    transform:translate(1px,1px);
  }
}

@keyframes vmScreamFlash{
  0%{
    opacity:0;
    background:radial-gradient(circle at 50% 50%,rgba(255,225,74,.45),rgba(255,42,163,.14) 28%,transparent 62%);
  }

  28%{
    opacity:.34;
  }

  100%{
    opacity:0;
  }
}

@keyframes vmScreamMaxFlash{
  0%{
    opacity:0;
    background:#fff;
  }

  14%{
    opacity:.36;
  }

  34%{
    opacity:.04;
    background:#ffe14a;
  }

  56%{
    opacity:.22;
    background:radial-gradient(circle,var(--cyan),rgba(255,42,163,.42),transparent 70%);
  }

  100%{
    opacity:0;
  }
}

@media (hover:hover){
  .screamButton:hover{
    border-color:#ffe14a;
    background:rgba(255,225,74,.055);
    transform:skew(-5deg) translate(4px,4px);
    box-shadow:3px 3px 0 rgba(255,42,163,.9),
      -3px -3px 0 rgba(0,229,255,.48),
      0 0 38px rgba(255,225,74,.12);
  }

  .screamButton:hover::before{
    left:118%;
  }
}

@media (max-width:840px){
  .screamSection{
    min-height:390px;
    padding:72px 0 76px;
  }

  .screamSection__inner{
    width:90%;
  }

  .screamSection__title{
    font-size:clamp(40px,12vw,76px);
  }

  .screamButton{
    width:min(92%,380px);
    min-height:82px;
    margin-top:28px;
    font-size:clamp(40px,12vw,60px);
  }

  .screamMeter{
    width:min(92%,560px);
  }

  .screamEqualizer{
    width:86%;
  }
}

@media (max-width:560px){
  .screamSection{
    min-height:360px;
    padding:62px 0 66px;
  }
  .screamSection__inner{
    width:84%;
  }

  .screamSection__lead{
    margin-top:14px;
    font-size:16px;
  }

  .screamButton{
    width:72vw;
    max-width:300px;
    min-height:64px;
    padding:10px 44px 10px 22px;
    margin-top:24px;
  }

  .screamButton strong{
    font-size:32px;
  }

  .screamButton i{
    right:16px;
    transform:translateY(-50%) skew(5deg) scale(.82);
  }

  .screamMeter{
    width:100%;
    margin-top:27px;
  }

  .screamSection__title{
    font-size:clamp(34px,10vw,60px);
  }

  .screamMeter__head strong{
    font-size:32px;
  }

  .screamMeter__head > span{
    font-size:11px;
  }

  .screamEqualizer{
    width:100%;
    height:48px;
    gap:4px;
  }

  .screamEqualizer i{
    width:3px;
  }

  .screamAwake{
    width:86vw;
  }
}

/* =====================================================
   SCHEDULE / PERFORMANCE / ACCESS
===================================================== */

.schedule{
  background:radial-gradient(circle at 20% 16%,rgba(0,229,255,.08),transparent 24%),radial-gradient(circle at 82% 72%,rgba(255,42,163,.07),transparent 26%),#050816;
}

.schedule__card{
  display:grid;
  gap:34px;
  border:1px solid rgba(201,246,255,.18);
  background:linear-gradient(135deg,rgba(0,229,255,.105),rgba(49,87,255,.10),rgba(255,42,163,.045));
  box-shadow:0 26px 80px rgba(0,0,0,.18),0 0 42px rgba(0,229,255,.055);
}

.scheduleHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
 gap:42px;
  padding-bottom:22px;
  border-bottom:1px solid rgba(0,229,255,.18);
}

.scheduleHead .sectionLead{
  margin:0 0 24px;
}

.scheduleHead__period{
  margin:0;
  font-family:var(--accent);
  color:var(--ice);
  font-size:clamp(32px,3.8vw,54px);
  line-height:1;
  letter-spacing:.055em;
}

.scheduleHead__period span{
  color:var(--cyan);
  font-family:var(--body);
  font-size:.48em;
  font-weight:400;
}

.scheduleHead__period small{
  font-size:.6em;
  font-weight:400;
}


.scheduleHead__sale{
  margin:16px 0 0;
  color:var(--ice);
  font-family:var(--display);
  font-size:22px;
  font-weight:700;
  letter-spacing:.08em;
}

.scheduleHead__sale span{
  color:var(--cyan);
  font-family:var(--body);
  font-size:18px;
}


.scheduleHead__venue{
  margin:0 0 10px 0;
  font-family:var(--accent);
  color:var(--ice);
  font-size:clamp(24px,2.6vw,38px);
  line-height:1;
  letter-spacing:.14em;
  text-align:right;
}

.performanceSchedule{
  position:relative;
}

.performanceSchedule__tableWrap{
  position:relative;
}

.performanceTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  text-align:center;
}

.performanceTable--sp{
  display:none;
}

.performanceTable th,.performanceTable td{
  height:66px;
  border-right:1px solid rgba(0,229,255,.12);
  border-bottom:1px solid rgba(0,229,255,.12);
  background:rgba(5,12,32,.72);
}

.performanceTable tr:first-child th{
  border-top:1px solid rgba(0,229,255,.18);
}

.performanceTable th:first-child,.performanceTable td:first-child{
  border-left:1px solid rgba(0,229,255,.18);
}

.performanceTable thead th{
  height:70px;
  background:linear-gradient(180deg,rgba(18,52,128,.82),rgba(10,28,72,.76));
  font-weight:400;
}

.performanceTable thead b{
  display:block;
  font-family:var(--accent);
  font-size:27px;
  line-height:1;
  font-weight:400;
}

.performanceTable thead small{
  display:block;
  margin-top:7px;
  color:rgba(255,255,255,.5);
  font-size:11px;
}

.performanceTable .is-sat small{
  color:#00e5ff;
}

.performanceTable .is-sun small,.performanceTable .is-holiday small{
  color:var(--pink-soft);
}

.performanceTable__rowHead{
  width:104px;
  background:#0a1940 !important;
  color:var(--cyan);
  font-family:var(--display);
  letter-spacing:.08em;
}

.performanceTable tbody .performanceTable__rowHead strong{
  font-family:var(--accent);
  font-size:21px;
  font-weight:400;
  letter-spacing:.05em;
}

.performanceTable td{
  position:relative;
  transition:background .2s ease,color .2s ease;
}

.performanceTable td.is-show:hover{
  background:rgba(49,87,255,.18);
}

.performanceTable__mark{
  display:inline-block;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 3px rgba(0,229,255,.11),0 0 13px rgba(255,225,74,.78),0 0 24px rgba(255,42,163,.28);
  vertical-align:middle;
}

.performanceTable__none{
  color:rgba(255,255,255,.16);
}

.performanceTable .is-rest{
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.5);
}

.performanceTable td.is-rest strong{
  font-family:var(--body);
  font-size:14px;
  line-height:1;
  letter-spacing:.16em;
  white-space:nowrap;
}

.scheduleDetails{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr);
  gap:36px;
  align-items:stretch;
  margin-top:30px;
}

.scheduleDetails__info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  min-width:0;
}

.scheduleDetails__info .scheduleHead__venue{
  width:100%;
  margin:0 0 20px;
  text-align:left;
}

.scheduleHead__venue a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:10px 18px 11px 0;
  transition:.3s ease;
  justify-content:flex-start;
}

.scheduleHead__venue a::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    var(--cyan),
    rgba(0,229,255,.35) 65%,
    transparent
  );
  box-shadow:0 0 12px rgba(0,229,255,.35);
  transform-origin:left;
  transition:.35s cubic-bezier(.16,1,.3,1);
}

.accessInfo{
  margin:0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.accessInfo p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:rgba(255,255,255,.72);
}

.accessInfo p + p{
  margin-top:4px;
}

.scheduleMap{
  min-height:280px;
  overflow:hidden;
  border:1px solid rgba(0,229,255,.18);
}

.scheduleMap iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:280px;
  border:0;
}

@media (max-width:840px){
  .schedule .inner{
    width:90%;
  }

  .performanceSchedule{
    width:94%;
    margin:0 auto;
  }

  .scheduleHead{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    border-bottom:none;
  }

  .scheduleHead .sectionLead{
    width:auto;
    text-align:left;
    font-size:clamp(40px,11vw,64px);
  }

  .scheduleHead__venue{
    width:100%;
    margin-top:4px;
    font-size:30px;
    text-align:left;
  }

  .performanceTable--pc{
    display:none;
  }

  .performanceTable--sp{
    display:table;
  }

  .performanceTable--sp th,.performanceTable--sp td{
    height:48px;
  }

  .performanceTable--sp thead th{
    height:46px;
    padding:0 8px;
    color:rgba(255,255,255,.76);
    font-family:var(--display);
    font-weight:700;
    letter-spacing:.03em;
    font-size:20px;
  }

  .performanceTable--sp thead th:first-child{
    width:38%;
    text-align:left;
    padding-left:14px;
  }

  .performanceTable--sp tbody th{
    padding:0 14px;
    background:#06102a;
    text-align:left;
    font-weight:400;
    white-space:nowrap;
  }

  .performanceTable--sp tbody th b{
    display:inline;
    font-family:var(--accent);
    font-size:20px;
    font-weight:400;
    letter-spacing:.025em;
  }

  .performanceTable--sp tbody th small{
    display:inline;
    margin-left:8px;
    color:rgba(255,255,255,.5);
    font-size:11px;
  }

  .performanceTable--sp tbody th.is-sat small{
    color:#00e5ff;
  }

  .performanceTable--sp tbody th.is-sun small,.performanceTable--sp tbody th.is-holiday small{
    color:var(--pink-soft);
  }

  .performanceTable--sp .performanceTable__mark{
    width:11px;
    height:11px;
    background:var(--yellow);
    box-shadow:0 0 0 2px rgba(0,229,255,.10),0 0 10px rgba(255,225,74,.72),0 0 18px rgba(255,42,163,.24);
  }

  .performanceTable--sp td.is-rest strong{
    font-size:12px;
    letter-spacing:.16em;
  }

  .scheduleDetails{
    grid-template-columns:1fr;
    gap:24px;
  }

  .scheduleDetails__info .scheduleHead__venue{
    margin-bottom:18px;
  }

  .scheduleHead__period{
    margin-top:20px;
    width:100%;
    text-align:center;
  }

  .scheduleMap,
  .scheduleMap iframe{
    min-height:240px;
  }
}

@media (max-width:640px){
  .schedule__card h2.accent{
    font-size:clamp(32px,10vw,48px);
  }
}

@media (max-width:560px){
  .schedule__card{
    gap:26px;
  }

  .scheduleHead .sectionLead{
    font-size:42px;
  }

  .scheduleHead__period{
    font-size:32px;
  }

  .scheduleHead__venue{
    font-size:28px;
  }

  .performanceTable--sp thead th:first-child{
    width:46%;
  }

  .performanceTable--sp tbody th{
    padding-left:12px;
  }
}

/* =====================================================
   TICKETS
===================================================== */

.ticket{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(76px,8vw,124px) 0 90px;
  background:radial-gradient(circle at 80% 8%,rgba(255,42,163,.20),transparent 30%),
    radial-gradient(circle at 14% 70%,rgba(0,229,255,.15),transparent 29%),
    radial-gradient(circle at 62% 34%,rgba(255,225,74,.045),transparent 19%),
    linear-gradient(180deg,#050816,#0a1740 44%,#050816);
}

.ticket::before{
  content:"TICKETS";
  position:absolute;
  z-index:-1;
  top:-.11em;
  left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.032);
  font-family:var(--accent);
  font-size:min(27vw,380px);
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
  pointer-events:none;
}

.ticket__inner{
  display:block;
  width:min(92%,1180px);
  margin:auto;
  padding:0;
  border:0;
  background:none;
  text-align:left;
}

.ticketMotion{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

.ticketMotion__ring{
  position:absolute;
  border:2px solid rgba(0,229,255,.11);
  border-radius:50%;
  box-shadow:0 0 52px rgba(0,229,255,.10);
  animation:ticketRing 7s ease-in-out infinite;
}

.ticketMotion__ring--1{
  width:620px;
  height:620px;
  right:-230px;
  top:120px;
}

.ticketMotion__ring--2{
  width:430px;
  height:430px;
  left:-180px;
  bottom:80px;
  border-color:rgba(255,42,163,.17);
  box-shadow:0 0 52px rgba(255,42,163,.09);
  animation-delay:-3s;
}

.ticketMotion__beam{
  position:absolute;
  left:-10%;
  top:46%;
  width:120%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,207,230,.50),rgba(201,246,255,.34),rgba(230,129,187,.42),transparent);
  box-shadow:0 0 20px rgba(0,229,255,.25);
  transform:rotate(-4deg);
  opacity:.38;
}

@keyframes ticketRing{
  50%{
    transform:scale(1.08);
    opacity:.42;
  }
}

.ticketHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:26px;
}

/* =====================================================
   VISUALIZER / TICKET
===================================================== */

.visualizer--ticket{
  height:58px;

  margin:0;
  gap:7px;

  opacity:1;

  filter:
    drop-shadow(0 0 9px rgba(193,246,255,.48))
    drop-shadow(0 0 8px rgba(230,129,187,.14));
}

.visualizer--ticket i{
  width:6px;
  max-height:54px;

  animation-duration:.92s;

  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #dffcff 28%,
      #86e8f4 68%,
      #7bc6ea 100%
    );
}

.visualizer--ticket i:nth-child(3n){
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #f3e9ff 30%,
      #e8b6da 66%,
      #9edff2 100%
    );
}

.visualizer--ticket i:nth-child(5n){
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #c9f6ff 38%,
      #b9c8f3 68%,
      #ebb5d7 100%
    );
}


.ticketBlock{
  position:relative;
  border:1px solid rgba(0,229,255,.19);
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(49,87,255,.075),rgba(255,42,163,.02));
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 24px 70px rgba(0,0,0,.12),0 0 36px rgba(0,229,255,.035);
}

.ticketBlock__head{
  display:flex;
  align-items:flex-start;
  gap:15px;
  margin-bottom:23px;
}


.ticketBlock__en{
  margin:0 0 7px;
  color:var(--muted);
  font-family:var(--display);
  font-size:13px;
  line-height:1;
  letter-spacing:.38em;
  font-weight:400;
}

.ticketBlock__head h3{
  margin:0 0 5px;
  font-size:clamp(23px,2.6vw,34px);
  line-height:1.25;
  letter-spacing:.035em;
  font-weight:900;
}

.ticketBlock__caption{
  margin:7px 0 0;
  color:rgba(255,255,255,.48);
  font-size:11px;
  line-height:1;
  letter-spacing:.05em;
  font-weight:500;
}

.ticketBlock--toho{
  margin-bottom:24px;
  padding:32px;
  border:1px solid rgba(0,229,255,.24);
  background:radial-gradient(circle at 88% 10%,rgba(255,42,163,.18),transparent 28%),radial-gradient(circle at 8% 86%,rgba(255,225,74,.035),transparent 20%),linear-gradient(135deg,rgba(28,84,190,.40),rgba(5,8,22,.90) 60%);
  box-shadow:0 26px 85px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.045),0 0 30px rgba(49,87,255,.07),18px 0 46px rgba(255,42,163,.055);
}

.tohoNaviHero{
  display:grid;
 grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);
  gap:20px;
}
.tohoNaviHero__main{
  padding:28px;
  border:1px solid rgba(0,229,255,.22);
  background:linear-gradient(135deg,rgba(49,87,255,.18),rgba(0,229,255,.06),rgba(5,8,22,.52));
}

.tohoOneBox{
  padding:22px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(145deg,rgba(255,42,163,.055),rgba(5,8,22,.48));
}

.tohoNaviHero__lead{
  margin:0 0 12px;
  color:rgba(255,255,255,.72);
  font-size:14px;
  font-weight:700;
}

/*東宝ナビザーブ*/

.tohoNaviHero__button{
  position:relative;
  display:block;
  padding:21px 62px 21px 22px;
  border:2px solid rgba(255,42,163,.82);
  background:linear-gradient(110deg,rgba(49,87,255,.72),rgba(255,42,163,.26),rgba(255,225,74,.045));
  box-shadow:0 0 38px rgba(0,229,255,.20),0 0 34px rgba(255,42,163,.14),inset 0 0 26px rgba(255,255,255,.055);
  transition:.25s ease;
}

.tohoNaviHero__button span{
  display:block;
  color:var(--cyan);
  font-size:11px;
  line-height:1;
  letter-spacing:.08em;
}

.tohoNaviHero__button strong{
  display:block;
  margin-top:9px;
  font-size:clamp(25px,2.8vw,35px);
  line-height:1.1;
  letter-spacing:.05em;
}

.tohoNaviHero__button i{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
}

.tohoNaviHero__button:hover{
  transform:translateY(-2px);
  background:linear-gradient(110deg,rgba(25,102,230,.68),rgba(255,42,163,.22));
}

.tohoNaviHero__button:hover i{
  top:40%;
}

.tohoNaviHero__note{
  margin:15px 0 0;
  color:rgba(255,255,255,.7);
  font-size:14px;
  line-height:1.7;
  font-weight:500;
}
.tohoNaviHero__note strong{
  color:rgba(255,255,255,1);
}
.tohoNaviHero__note + .tohoNaviHero__note{
  margin-top:8px;
}


.tohoOneBox__eyebrow{
  margin:0;
  color:var(--cyan);
  font-family:var(--display);
  font-size:14px;
  line-height:1;
  letter-spacing:.26em;
}

.tohoOneBox h4{
  margin:0 0 16px;
  font-size:15px;
  line-height:1.7;
  font-weight:700;
}
.nowrap{
  white-space:nowrap;
}
.tohoOneBenefits{
  display:grid;
  gap:0;
  margin:0 0 16px;
  padding:0;
  list-style:none;
}

.tohoOneBenefits li{
  display:flex;
  align-items:baseline;
  gap:6px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.tohoOneBenefits strong{
  position:relative;
  flex:0 0 auto;
  min-width:60px;
  padding:3px 0 3px 5px;
  color:var(--pink-soft);
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.06em;
  background:linear-gradient(
    90deg,
    rgba(255,42,163,.14),
    rgba(255,42,163,.035)
  );
}

.tohoOneBenefits strong::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:2px;
  height:60%;
  background:var(--pink-soft);
  box-shadow:0 0 8px rgba(240,172,211,.6);
  transform:translateY(-50%);
}

.tohoOneBenefits span{
  color:rgba(255,255,255,.72);
  font-size:12.2px;
}

/*TOHO-ONE ご登録はこちら*/

.tohoOneBox__register a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:46px;
  padding:11px 13px;
  border:1px solid rgba(0,229,255,.28);
  background:rgba(0,229,255,.04);
  font-size:14.5px;
  letter-spacing:.04em;
  font-weight:700;
}

.tohoOneBox__register span,.tohoOneBox__links span{
  color:var(--cyan);
}

/* =====================================================
   TOHO-ONE MORE
===================================================== */

.tohoOneMore{
  margin-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* summary */

.tohoOneMore summary{
  position:relative;
  display:block;
  padding:13px 30px 13px 1px;
  cursor:pointer;
  list-style:none;
  color:rgba(255,255,255,.72);
  font-size:12.2px;
  font-weight:700;
}

.tohoOneMore summary::-webkit-details-marker{
  display:none;
}

.tohoOneMore summary::marker{
  display:none;
  content:"";
}

/* ＋ボタン本体 */

.tohoOneMore summary i{
  position:absolute;
  right:2px;
  top:50%;
  z-index:2;
  display:block;
  width:25px;
  height:25px;
  color:var(--cyan);
  border:1px solid rgba(140,238,255,.32);
  background:rgba(140,238,255,.035);
  transform:translateY(-50%);
  box-sizing:border-box;
  font-size:0;
  line-height:0;
  pointer-events:none;
  transition:color .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

/* ＋の横棒・縦棒 */

.tohoOneMore summary i::before,
.tohoOneMore summary i::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  background:currentColor;
  transform:translate(-50%,-50%);
  transform-origin:center;
  transition:transform .45s cubic-bezier(.16,1,.3,1),
    opacity .3s ease;
}

/* 横棒 */

.tohoOneMore summary i::before{
  width:11px;
  height:1.5px;
}

/* 縦棒 */

.tohoOneMore summary i::after{
  width:1.5px;
  height:11px;
}

/* OPEN */

.tohoOneMore[open] summary i{
  color:var(--pink-soft);
  border-color:rgba(240,172,211,.4);
  background:rgba(232,117,189,.05);
}

/* ＋ → − */

.tohoOneMore[open] summary i::after{
  transform:translate(-50%,-50%) rotate(90deg);
  opacity:0;
}

.tohoOneMore[open] summary i::before{
  transform:translate(-50%,-50%) rotate(180deg);
}

/* hover */

@media (hover:hover){
  .tohoOneMore summary:hover i{
    color:var(--cyan);
    border-color:var(--cyan);
    box-shadow:0 0 14px rgba(140,238,255,.14);
  }
}

/* OPEN BODY */

.tohoOneMore__body{
  padding:0 0 14px;
}

.tohoOneMore__body p{
  margin:0 0 8px;
  color:rgba(255,255,255,.6);
  font-size:13px;
  line-height:1.65;
  font-weight:500;
}

.tohoOneMore__body ul{
  display:grid;
  gap:8px;
  margin:5px 0 0;
  padding:0;
  list-style:none;
  color:rgba(255,255,255,.78);
  font-size:12px;
  line-height:1.65;
}

.tohoOneMore__body li{
  position:relative;
  padding:8px 12px 5px 14px;
}

.tohoOneMore__body li::before{
  content:"";
  position:absolute;
  left:0px;
  top:16px;
  width:6px;
  height:6px;
  background:var(--pink-soft);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  box-shadow:0 0 8px rgba(240,172,211,.45);
}

.tohoOneBox__links{
  display:grid;
  gap:7px;
  margin-top:12px;
}

.tohoOneBox__links a{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 1px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.6);
  font-size:12px;
  line-height:1.45;
  letter-spacing:.03em;
}

.ticketBlock--sale{
  margin-bottom:24px;
  padding:32px;
}

.ticketTimeline{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  gap:1px;
  border:1px solid rgba(0,229,255,.14);
  background:rgba(0,229,255,.14);
}

.ticketTimeline__item{
  position:relative;
  min-height:185px;
  padding:28px 24px 26px;
  overflow:hidden;
  background:rgba(6,13,34,.90);
}

.ticketTimeline__item::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  opacity:.95;
  background:linear-gradient(90deg,var(--pink),var(--cyan),transparent);
}

.ticketTimeline__item--primary{
  background:radial-gradient(circle at 8% 10%,rgba(255,42,163,.16),transparent 36%),linear-gradient(145deg,rgba(49,87,255,.40),rgba(5,8,22,.92) 64%);
}

.ticketTimeline__tag{
  display:block;
  color:var(--cyan);
  font-size:16px;
  line-height:1.35;
  letter-spacing:.04em;
  font-weight:900;
}

.ticketTimeline__item--primary .ticketTimeline__tag{
  color:var(--pink-soft);
}

.ticketTimeline__date{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-top:21px;
  font-family:var(--accent);
  font-size:clamp(36px,4vw,56px);
  line-height:1;
  font-weight:400;
  letter-spacing:.02em;
}

.ticketTimeline__date small{
  color:rgba(255,255,255,.66);
  font-family:var(--body);
  font-size:13px;
  letter-spacing:.03em;
}

.ticketTimeline__date b{
  font-family:var(--body);
  font-size:20px;
  font-weight:400;
}

.ticketTimeline__item > p{
  margin:9px 0 0;
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.55;
  font-weight:500;
}

.ticketTimeline__item > p b{
  font-family:var(--accent);
  font-size:17px;
  font-weight:400;
  letter-spacing:.04em;
}

.ticketColumns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.ticketBlock--price,.ticketBlock--guide{
  padding:32px;
}

.ticketPriceGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(0,229,255,.18);
  border-left:1px solid rgba(0,229,255,.18);
}

.ticketPriceGrid > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:18px 17px;
  border-right:1px solid rgba(0,229,255,.18);
  border-bottom:1px solid rgba(0,229,255,.18);
  background:rgba(7,16,40,.72);
}

.ticketPriceGrid span{
  font-size:17px;
  font-weight:500;
}

.ticketPriceGrid strong{
  color:var(--ice);
  font-family:var(--accent);
  font-size:22px;
  font-weight:400;
  line-height:1;
  letter-spacing:.1em;
}

.ticketPriceGrid strong::before{
  content:"¥";
  margin-right:.1em;
}

.ticketSubPrice{
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.ticketSubPrice p{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:0;
  padding:9px 2px;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.78);
  font-size:13px;
}

.ticketSubPrice strong{
  color:var(--ice);
  font-family:var(--accent);
  font-size:16px;
  font-weight:400;
  letter-spacing:.1em;
}

.ticketSubPrice strong::before{
  content:"¥";
  margin-right:.1em;
}

.ticketNote{
  margin:18px 0 0;
}

.ticketSeatingchart{
  display:flex;
  justify-content:space-between;
  font-size:14px;font-weight: 700;
  align-items:center;
  margin-top:20px;
  padding:11px 13px;
  border:1px solid rgba(0,207,230,.24);
  background:rgba(0,207,230,.025);
  line-height:1.3;
  letter-spacing:.04em;
}

.ticketSeatingchart b{
  color:var(--cyan);
  font-weight:700;
}

.ticketSeatingchart--zoom{
  width:100%;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:zoom-in;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}

@media (hover:hover){
  .ticketSeatingchart--zoom:hover{
    border-color:var(--cyan);
    background:rgba(0,207,230,.06);
    box-shadow:0 0 18px rgba(0,207,230,.08);
  }
}

.ticketGuideGeneral{
  padding:15px 2px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.ticketGuideGeneral strong{
  color:var(--cyan);
  font-size:15px;
}

.ticketGuideLogos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:16px;
}

.ticketGuideLogos a{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:13px;
  border:1px solid rgba(255,255,255,.12);
  background:#fff;
  transition:.25s ease;
}

.ticketGuideLogos img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:46px;
}

.ticketGuideLogos a:hover{
  transform:translateY(-2px);
  border-color:var(--cyan); 
  box-shadow:0 0 20px rgba(0,229,255,.12);
}

.ticketPhoneSection{
  margin-top:28px;
  padding-top:28px;
  border-top:1px solid rgba(0,229,255,.18);
}

.ticketPhoneSection .ticketBlock__head{
  margin-bottom:18px;
}

.ticketPhone{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px;
  border:1px solid rgba(230,129,187,.30);
  background:linear-gradient(110deg,rgba(49,87,255,.13),rgba(255,42,163,.09),rgba(255,225,74,.025));
}

.ticketPhone > span{
  font-size:14px;
  font-weight:700;
}

.ticketPhone a{
  display:flex;
  align-items:baseline;
  gap:10px;
}

.ticketPhone strong{
  font-family:var(--accent);
  font-size:24px;
  font-weight:400;
  letter-spacing:.03em;
}

.ticketPhone small{
  color:var(--pink-soft);
  font-size:10px;
}


.ticketCaution{
  margin-top:24px;
  padding:0;
  border:1px solid rgba(0,229,255,.15);
  background:rgba(2,7,18,.44);
}


.ticketStaticHead{
  display:flex;
  align-items:center;
  min-height:58px;
  padding:15px 20px 8px;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.04em;
}


.ticketCaution__body{
  color:rgba(255,255,255,.62);
    padding:0 15px 17px;
}


.ticketCaution__request a{
  font-size:13px;
  letter-spacing:.03em;
  font-weight:700;
}

.ticketCaution__request a span{
  color:var(--cyan);
}

.ticketBottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 2px 0;
}

.ticketBottom p{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin:0;
  color:rgba(255,255,255,.48);
  font-size:12px;
  font-weight:500;
}

.ticketBottom p strong{
  font-size:13px;
}

/* -----------------------------------------------------
   01 PRICE / TOHO NAVI / SALE SCHEDULE
----------------------------------------------------- */

.ticketBlock--price{
  margin-bottom:24px;
}

.ticketBlock--toho > .ticketBlock--saleInner{
  margin:30px 0 0;
  padding:28px 0 0;
  border:0;
  border-top:1px solid rgba(0,207,230,.22);
  background:none;
  box-shadow:none;
}

.ticketBlock--toho > .ticketBlock--saleInner .ticketBlock__head{
  margin-bottom:20px;
}

.ticketBlock--toho > .ticketBlock--saleInner .ticketBlock__head h3{
  font-size:clamp(22px,2.2vw,30px);
}

.ticketTimeline__note{
  margin-top:10px !important;
  color:rgba(255,255,255,.56) !important;
  font-size:10.5px !important;
  line-height:1.55 !important;
  font-weight:500 !important;
}

/* TOHO-ONE logo */

.tohoOneBox__logo{
  display:block;
  width:min(230px,72%);
  height:auto;
  margin:0 auto 8px;
}

/* -----------------------------------------------------
   INQUIRY
----------------------------------------------------- */

.ticketSupportGrid{
  display:block;
  margin-top:24px;
}

.ticketInquiry{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  min-height:0;
  gap:20px;
  margin:0;
  padding:18px 20px;
  border:1px solid rgba(0,207,230,.15);
  background:linear-gradient(120deg,rgba(44,78,230,.07),rgba(0,207,230,.025)),rgba(5,8,22,.92);
}

.ticketInquiry__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  line-height:1.4;
  font-weight:700;
  transition:color .25s ease,text-shadow .25s ease;
}

@media (hover:hover){
  .ticketInquiry__link:hover{
    color:var(--cyan);
    text-shadow:0 0 14px rgba(0,207,230,.32);
  }
}


/* Theater information at the bottom of TICKET */

.ticketTheaterInfo{
  margin-top:30px;
  padding:28px;
  border:1px solid rgba(0,207,230,.15);
  background:linear-gradient(135deg,rgba(44,78,230,.07),rgba(230,38,147,.025)),rgba(5,8,22,.78);
}

/* TABLET */

@media (max-width:1060px){
  .ticketColumns{
    grid-template-columns:1fr;
  }
}

@media (max-width:840px){
  .ticket{
    padding:70px 0 74px;
  }

  .visualizer--ticket{
    height:46px;
  }

  .ticket__inner{
    width:min(92%,700px);
    padding:0;
  }

  .ticketHead{
    margin-bottom:28px;
    padding-bottom:20px;
  }

  .ticketHead .sectionLead{
    width:auto;
    text-align:left;
    font-size:clamp(40px,11vw,64px);
  }

  .ticketBlock--toho > .ticketBlock--saleInner{
    padding-top:24px;
  }

  .ticketTheaterInfo{
    padding:20px;
  }

  .ticketBlock--toho,.ticketBlock--sale,.ticketBlock--price,.ticketBlock--guide{
    padding:22px;
  }

  .tohoNaviHero__note{
    font-size:13px;
  }

  .tohoNaviHero{
    grid-template-columns:1fr;
  }

  .tohoNaviHero__main,.tohoOneBox{
    padding:18px;
  }

  .ticketBlock__head h3{
    font-size:25px;
  }

  .ticketTimeline{
    grid-template-columns:1fr;
  }

  .ticketTimeline__item{
    min-height:0;
    padding:22px 18px;
  }

  .ticketTimeline__date{
    font-size:42px;
  }

  .ticketColumns{
    gap:16px;
  }

  .ticketGuideLogos{
    grid-template-columns:repeat(3,1fr);
  }

  .ticketBottom{
    align-items:flex-start;
    flex-direction:column;
  }
    
      .ticketStaticHead{
    min-height:54px;
    padding:13px 15px;
  }
    

    
    
}

/* SMALL SP */

@media (max-width:560px){
  .ticket{
    padding:58px 0 64px;
  }

  .visualizer--ticket{
    display:flex;
    height:38px;
    gap:3px;
  }

  .visualizer--ticket i{
    width:4px;
    max-height:34px;
  }

  .ticketHead .sectionLead{
    font-size:42px;
  }

  .ticketBlock--toho,.ticketBlock--sale,.ticketBlock--price,.ticketBlock--guide{
    padding:17px;
  }

  .ticketBlock__head{
    gap:11px;
    margin-bottom:20px;
  }


  .ticketBlock__head h3{
    font-size:23px;
    letter-spacing:.05em;
  }

  .tohoNaviHero__main,.tohoOneBox{
    padding:15px;
  }

  .tohoNaviHero__button{
    padding:16px 48px 16px 15px;
  }

  .tohoNaviHero__button strong{
    font-size:23px;
  }

  .ticketTimeline__tag{
    font-size:15px;
  }

  .ticketTimeline__date{
    font-size:36px;
    flex-wrap:wrap;
  }

  .ticketTimeline__date b{
    font-size:13px;
  }

  .ticketPriceGrid > div{
    padding:15px 12px;
  }

  .ticketPriceGrid span{
    font-size:15px;
  }

  .ticketPriceGrid strong{
    font-size:17px;
  }

  .ticketGuideLogos{
    grid-template-columns:1fr;
  }

  .ticketGuideLogos a{
    min-height:62px;
  }

  .ticketPhone{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }

  .ticketPhone strong{
    font-size:22px;
  }


  .ticketCaution{
    margin-top:18px;
  }


  .ticketInquiry{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin:0;
    padding:16px 15px;
  }

  .ticketInquiry__link{
    font-size:13px;
  }

  .ticketTheaterInfo{
    padding:16px;
  }
}

/* =====================================================
   FLOATING INFORMATION
===================================================== */

.floatingInfoStack{
  position:fixed;
  left:18px;
  bottom:16px;
  z-index:820;
  width:min(360px,calc(100vw - 36px));
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

.floatingInfo{
  position:relative;
  width:100%;
  min-height:66px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:9px 13px 9px 9px;
  overflow:hidden;
  border:1px solid rgba(0,229,255,.58);
  border-radius:22px;
  background:linear-gradient(115deg,rgba(9,31,83,.96),rgba(3,10,30,.97) 58%,rgba(8,22,58,.96));
  box-shadow:0 14px 42px rgba(0,0,0,.5),0 0 0 1px rgba(0,229,255,.07),0 0 25px rgba(49,87,255,.22),inset 0 1px rgba(255,255,255,.08);
  isolation:isolate;
  opacity:0;
  visibility:hidden;
  transform:translateY(16px);
  transition:opacity .55s ease,visibility .55s ease,transform .55s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease;
  pointer-events:auto;
}

.floatingInfo.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}

.floatingInfo.is-dismissed{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(16px);
}

.floatingInfo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 38px,rgba(0,229,255,.035) 39px,transparent 40px);
  pointer-events:none;
}

.floatingInfo::after{
  content:"";
  position:absolute;
  top:-45%;
  bottom:-45%;
  left:-28%;
  z-index:-1;
  width:22%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),rgba(0,229,255,.16),transparent);
  filter:blur(2px);
  transform:skewX(-18deg);
  animation:floatingInfoSweep 4.8s ease-in-out infinite;
  pointer-events:none;
}

.floatingInfo__glow{
  position:absolute;
  left:10%;
  top:50%;
  z-index:-2;
  width:46%;
  height:120%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(49,87,255,.28),transparent 70%);
  filter:blur(18px);
  transform:translateY(-50%);
  pointer-events:none;
}

.floatingInfo__label{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(0,229,255,.72);
  border-radius:50%;
  color:var(--cyan);
  font-family:var(--display);
  font-size:13px;
  line-height:1;
  letter-spacing:.08em;
  text-shadow:0 0 13px rgba(0,229,255,.85);
  box-shadow:inset 0 0 18px rgba(49,87,255,.22),0 0 18px rgba(0,229,255,.13);
}

.floatingInfo__body{
  min-width:0;
  display:block;
  line-height:1.2;
}

.floatingInfo__title{
  display:block;
  color:#fff;
  font-size:15px;
  font-weight:900;
  letter-spacing:.05em;
  white-space:normal;
}

.floatingInfo__sub{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.68);
  font-family:var(--body);
  font-size:10px;
  line-height:1.35;
  letter-spacing:.04em;
}

.floatingInfo__equalizer{
  display:none;
}

.floatingInfo__arrow{
  position:relative;
  width:29px;
  height:29px;
  border:1px solid rgba(0,229,255,.36);
  border-radius:50%;
  transition:.3s ease;
}

.floatingInfo__arrow::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-top:1px solid var(--cyan);
  border-right:1px solid var(--cyan);
  transform:translate(-65%,-50%) rotate(45deg);
}

@keyframes floatingInfoSweep{
  0%,58%{
    left:-28%;
    opacity:0;
  }

  66%{
    opacity:1;
  }

  86%{
    left:118%;
    opacity:.5;
  }

  100%{
    left:118%;
    opacity:0;
  }
}

.floatingInfo--ticket{
  border-color:rgba(255,42,163,.44);
  box-shadow:0 14px 42px rgba(0,0,0,.5),0 0 0 1px rgba(0,229,255,.06),0 0 20px rgba(49,87,255,.18),0 0 24px rgba(255,42,163,.10),inset 0 1px rgba(255,255,255,.08);
}

.floatingInfo--ticket .floatingInfo__glow{
  background:radial-gradient(ellipse,rgba(255,42,163,.22),rgba(49,87,255,.12) 45%,transparent 72%);
}

.floatingInfo--ticket .floatingInfo__label{
  font-size:15px;
  letter-spacing:.04em;
  color:var(--pink-soft);
  border-color:rgba(255,42,163,.62);
  text-shadow:0 0 13px rgba(255,42,163,.66);
  box-shadow:inset 0 0 18px rgba(255,42,163,.12),0 0 18px rgba(255,42,163,.10);
}

@media (max-width:840px){
  .floatingInfoStack{
    right:10px;
    bottom:10px;
    width:min(240px,calc(100vw - 20px));
    gap:6px;
  }

  .floatingInfo{
    min-height:54px;
    border-radius:18px;
    padding:7px 10px 7px 7px;
  }

  .floatingInfo__label{
    width:36px;
    height:36px;
  }

  .floatingInfo__title{
    font-size:12px;
  }

  .floatingInfo__sub{
    font-size:9px;
  }

  .floatingInfo__arrow{
    width:25px;
    height:25px;
  }
}

@media (hover:hover){
  .floatingInfo.is-visible:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.7);
  }
}


@media (max-width:560px){
  .floatingInfoStack{
    width:min(280px,calc(100vw - 16px));
    right:8px;
    bottom:8px;
  }

  .floatingInfo{
    min-height:50px;
  }
}


/* =====================================================
   FOOTER
===================================================== */

.footer{
  position:relative;
  overflow:hidden;
  padding:72px 0 46px;
  background:radial-gradient(circle at 50% 0,rgba(0,229,255,.16),transparent 38%),
    radial-gradient(circle at 72% 30%,rgba(255,42,163,.10),transparent 28%),
    radial-gradient(circle at 25% 60%,rgba(255,225,74,.035),transparent 20%),
    #030714;
  border-top:1px solid rgba(0,229,255,.12);
}

.footer::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(600px,70vw);
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--cyan),
    var(--pink-soft),
    transparent
  );
  box-shadow:0 0 18px rgba(0,229,255,.4);
  transform:translateX(-50%);
}

.footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:auto;
  text-align:center;
}

/* TITLE LOGO */

.footer__titleLogo{
  display:block;
  width:min(140px,20vw);
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    filter .3s ease;
}

.footer__titleLogo img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 0 20px rgba(0,229,255,.14));
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    filter .3s ease;
}

@media (hover:hover){
  .footer__titleLogo:hover{
    transform:translateY(-3px);
    filter:drop-shadow(0 0 18px rgba(0,229,255,.18));
  }

  .footer__titleLogo:hover img{
    transform:scale(1.035);
    filter:
      drop-shadow(0 0 18px rgba(0,229,255,.28))
      drop-shadow(0 0 14px rgba(255,42,163,.12));
  }

  .footerSocial:hover{
    color:var(--cyan);
    border-color:rgba(0,229,255,.7);
    background:rgba(0,229,255,.07);
    transform:translateY(-3px);
    box-shadow:0 0 18px rgba(0,229,255,.14);
  }
}

/* SNS */

.footer__socials{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:28px;
}

.footerSocial{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(0,229,255,.28);
  border-radius:50%;
  background:rgba(0,229,255,.025);
  transition:color .25s ease,
    border-color .25s ease,
    background .25s ease,
    transform .3s cubic-bezier(.16,1,.3,1),
    box-shadow .25s ease;
}

.footerSocial svg{
  display:block;
  width:19px;
  height:19px;
}

.footerSocial--x svg{
  fill:currentColor;
}

.footerSocial--instagram svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}

.footerSocial__dot{
  fill:currentColor;
  stroke:none;
}

/* CREDIT */

.footer__credit{
  position:relative;
  width:min(420px,82%);
  margin-top:38px;
  padding-top:27px;
}

.footer__credit::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:100%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(0,229,255,.22),
    transparent
  );
  transform:translateX(-50%);
}

.footer__credit img{
  width:min(360px,100%);
  margin:0 auto;
  opacity:.78;
}


/* SP */

@media (max-width:840px){
  .footer{
    padding:58px 0 120px;
  }


  .footer__socials{
    margin-top:24px;
  }

  .footer__credit{
    margin-top:32px;
  }
}

/* =====================================================
   MOTION REST / VIEWPORT CONTROL
===================================================== */

.hero:not(.is-live-motion) .hero__laser,
.hero:not(.is-live-motion) .heroKV__orb,
.hero:not(.is-live-motion) .heroKV::after,
.hero:not(.is-live-motion) .heroKV__monsterLogo,
.hero:not(.is-live-motion) .heroKV__scan,
.hero:not(.is-live-motion) .heroMonsterGate__ring,
.hero:not(.is-live-motion) .heroMonsterGate__flash,
.hero:not(.is-live-motion) .visualizer i,
.story:not(.is-live-motion) .storyMotion::before,
.story:not(.is-live-motion) .storyStageLight,
.story:not(.is-live-motion) .storyGlow,
.story:not(.is-live-motion) .storyEqualizer i,
.cast:not(.is-live-motion)::before,
.ticket:not(.is-live-motion) .ticketMotion__ring,
.ticket:not(.is-live-motion) .visualizer i,
.screamSection:not(.is-live-motion) .screamEqualizer i{
  animation-play-state:paused !important;
}


/* =====================================================
  list
===================================================== */

.noteList{
  font-size:12px;
  color:rgba(255,255,255,.62);
  list-style:none;
  margin:0;
  padding-left:0;
}

.noteList li{
  position:relative;
  padding-left:1.2em;
  line-height:1.4;
}

.noteList li::before{
  content:"※";
  position:absolute;
  left:0;
  top:0;
}

.noteList li + li{
  margin-top:.4em;
}

.basicList{
  margin:0;
  padding-left:1.4em;
}

.basicList li + li{
  margin-top:.4em;
}

/* =====================================================
  arrow >
===================================================== */

.triangleArrow{
  position:relative;
  top:-2px;
  display:inline-block;
  width:12px;
  height:14px;
  margin:0 .6em;
  padding:0;
  background:var(--cyan);
  clip-path:polygon(0 0,100% 50%,0 100%);
  vertical-align:middle;
  font-size:0;
  line-height:0;
  filter:drop-shadow(0 0 6px rgba(140,238,255,.45));
}

/*hero*/

.heroMeta__period .triangleArrow{
  top:-15px;
}

/*schedule*/

.scheduleHead__period .triangleArrow{
  top:-2px;
}

/*ticket*/

.ticketTimeline__date .triangleArrow{
  top:-10px;
}


@media (max-width:560px){

.heroMeta__period .triangleArrow{
  top:-5px;
}

}


/* =====================================================
  arrow →
===================================================== */

.externalIcon{
  --arrow-size:15px;
  --arrow-head:9px;
  --arrow-line:12px;
  --arrow-stroke:1.5px;
  position:relative;
  display:inline-block;
  width:var(--arrow-size);
  height:var(--arrow-size);
  flex:0 0 auto;
  color:var(--cyan);
  filter:drop-shadow(0 0 8px rgba(0,229,255,.4));
  transition:.3s cubic-bezier(.16,1,.3,1);
}

.externalIcon::before{
  content:"";
  position:absolute;
  right:1px;
  top:1px;
  width:var(--arrow-head);
  height:var(--arrow-head);
  border-top:var(--arrow-stroke) solid currentColor;
  border-right:var(--arrow-stroke) solid currentColor;
}

.externalIcon::after{
  content:"";
  position:absolute;
  left:2px;
  bottom:2px;
  width:var(--arrow-line);
  height:var(--arrow-stroke);
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:left center;
}

/* small */

.externalIcon--sm{
  --arrow-size:11px;
  --arrow-head:7px;
  --arrow-line:9px;
  --arrow-stroke:1px;
}

/* large */

.externalIcon--lg{
  --arrow-size:19px;
  --arrow-head:12px;
  --arrow-line:16px;
  --arrow-stroke:1.5px;
}

a:hover .externalIcon{
  color:var(--pink-soft);
  transform:translate(3px,-3px);
  filter:drop-shadow(0 0 6px rgba(0,229,255,.55))
    drop-shadow(0 0 10px rgba(255,42,163,.22));
}