@charset "utf-8";
:root {
    --bg: #020712;
    --deep: #07113a;
    --blue: #1b78ff;
    --cyan: #8ceeff;
    --ice: #edf4f8;
    --lav: #d7c6ff;
    --line: rgba(210, 235, 255, .22);
    --muted: rgba(255, 255, 255, .9);
    
    --display: "Bebas Neue", sans-serif;
    --accent: "Anton", sans-serif;
    --body: "Noto Sans JP", sans-serif;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--ice);
    font-family: var(--body);
    line-height: 1.75;
    letter-spacing: .05em;
}

html,
body{
  overflow-x:hidden;
}

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: .06;
    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(140, 238, 255, .16), transparent 34%);
    mix-blend-mode: screen
}

/* =====================================================
  Header
===================================================== */

.vmHeader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px clamp(18px, 4vw, 54px);
    transition: background .35s, backdrop-filter .35s
}
.vmHeader.is-scrolled {
    background: rgba(2, 7, 18, .72);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line)
}
.vmHeader__logo {
    max-width: 120px;
    font-family: var(--display);
    line-height: .86;
    font-size: 25px;
    letter-spacing: .06em;
    margin-right: auto;
    text-shadow: 0 0 14px rgba(140, 238, 255, .7)
}
.vmHeader__logo span, .vmHeader__logo strong {
    display: block
}
.vmNav {
    display: flex;
    gap: 24px;
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: .14em
}
.vmNav a {
    opacity: .72
}
.vmNav a:hover {
    opacity: 1;
    color: var(--cyan);
    text-shadow: 0 0 14px var(--cyan)
}
.vmX{
margin: auto;
  padding:0;

}

.vmX svg{
  width:17px;
  height:17px;
  fill:currentColor;
}

.vmX svg:hover{
  color:var(--cyan);
  box-shadow:0 0 4px rgba(140,238,255,.25);
}
.vmMenu {
    display: none;
    width: 46px;
    height: 46px;

 position:relative;

    border:1px solid rgba(140,238,255,.45);
    background:rgba(0,0,0,.8);

    box-shadow:
      0 0 0 1px rgba(140,238,255,.12),
      0 0 12px rgba(140,238,255,.18);
}
.vmMenu span {
    position: absolute;
    left: 12px;
    width: 22px;
    height: 1px;
    background: #fff;
    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: .9;
    letter-spacing: .08em
}

.spNav .vmX{
  margin:16px auto 0;
  width:52px;
  height:52px;
}

.spNav .vmX svg{
  width:40px;
  height:40px;
}

/* ==========================================================
   KV OPENING DRAMA
================================================================= */

.heroLogo,
.visualizer,
.hero__sub,
.hero__date,
.hero__catch{
  opacity:0;
}

/* --------------------
   STEP1
   VOICE MONSTER
-------------------- */

body.is-kv-ready .heroLogo{

  animation:
    logoAppear 1s cubic-bezier(.18,.88,.25,1) forwards;

}

/* --------------------
   STEP2
   NAME / DATE
-------------------- */

body.is-kv-ready .visualizer,
body.is-kv-ready .hero__sub,
body.is-kv-ready .hero__date{

  animation:
    kvFade .8s ease forwards;

  animation-delay:.9s;

}

/* --------------------
   STEP3
   CATCH COPY
-------------------- */

body.is-kv-ready .hero__catch{

  animation:
    kvFade .8s ease forwards;

  animation-delay:1.8s;

}

/* =====================================
   KV ANIMATION
===================================== */

@keyframes kvFade{

  from{
    opacity:0;
    transform:translateY(16px);
  }

  to{
    opacity:1;
    transform:none;
  }

}

@keyframes logoAppear{

  0%{
    opacity:0;

    transform:
      translateY(40px)
      scale(.7);
  }

  60%{
    opacity:1;
  }

  100%{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }

}

/* =====================================================
   HERO
===================================================== */

.hero{
  min-height:1100px;
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  background:#020712;
}

/* --------------------
   BACKGROUND
-------------------- */

.hero__bg{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      180deg,
      rgba(2,7,18,.03) 0%,
      rgba(2,7,18,.08) 35%,
      rgba(2,7,18,.4) 88%,
      rgba(2,7,18,.9) 100%
    ),
    url("../img/bg-kari.webp");

  background-position:center top;
  background-size:auto 1140px;
  background-repeat:no-repeat;

  filter:saturate(1.05) contrast(1.08);
}

/* --------------------
   WAVE
-------------------- */

.hero__wave{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.48;
  mix-blend-mode:screen;
}

/* --------------------
   LASER
-------------------- */

.hero__laser{
  position:absolute;
  top:-15vh;
  width:3px;
  height:140vh;

  background:
    linear-gradient(
      transparent,
      rgba(140,238,255,.2) 15%,
      rgba(255,255,255,.95) 50%,
      rgba(140,238,255,.2) 85%,
      transparent
    );

  mix-blend-mode:screen;

  filter:
    blur(.6px)
    drop-shadow(0 0 12px rgba(140,238,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;
}

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

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

/* --------------------
   INNER
-------------------- */

.hero__inner{
  position:relative;
  width:min(96vw,1404px);
  aspect-ratio:1404/1000;
  margin:0 auto;
}

/* --------------------
   CATCH
-------------------- */

.hero__catch{
  position:absolute;
  top:4.7%;
  right:12.18%;
  width:4.77%;
}

.hero__catch img{
  width:100%;
  display:block;
}

/* --------------------
   LOGO
-------------------- */

.heroLogo img{
  width:38%;
  margin:0 auto;
  display:block;

  animation:logoBreath 8s ease-in-out infinite;
  will-change:transform;
}

@keyframes logoBreath{

  0%,100%{
    transform:translateY(0) scale(1);
  }

  50%{
    transform:translateY(-20px) scale(1.05);
  }

}

/* --------------------
   NAME
-------------------- */

.hero__sub{
  padding-top:1%;
}

.hero__sub img{
  width:23%;
  margin:auto;
}

/* --------------------
   DATE
-------------------- */

.hero__date{
  position:absolute;
  top:8%;
  left:8%;
  text-align:left;
}

.hero__date span{
  display:block;
  font-family:var(--display);
  font-size:clamp(42px,6vw,86px);
  line-height:1;
}

.hero__date strong{
  font-family:var(--accent);
  font-size:clamp(23px,2.7vw,36px);
  line-height:1;
  font-weight:400;
}

/* --------------------
   SCROLL
-------------------- */

.hero__scroll{
  position:absolute;
  left:50%;
  bottom:-40px;
  transform:translateX(-50%);

  display:grid;
  gap:8px;
  justify-items:center;

  font-family:var(--display);
  font-size:13px;
  letter-spacing:.28em;

  z-index:50;
}

.hero__scroll::after{
  content:"";
  display:block;
  width:1px;
  height:44px;
  background:linear-gradient(var(--cyan),transparent);
}

/* =====================================================
   TABLET
===================================================== */

/* =====================================================
   MOBILE
===================================================== */

/* =====================================================
   SMALL MOBILE
===================================================== */

/* =====================================================
   visualizer
===================================================== */

.visualizer {
    height: 80px;
    margin:8px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    filter: drop-shadow(0 0 14px rgba(140, 238, 255, .95));
    opacity: 0;
}
.visualizer i {
    display: block;
    width: 8px;
    height: 38px;
    border-radius: 99px;
    background: linear-gradient(180deg, #fff, #8ceeff 46%, #207cff);
    animation: vu 1.2s ease-in-out infinite alternate
}
.visualizer i:nth-child(2n) {
    height: 72px;
    animation-delay: .16s
}
.visualizer i:nth-child(3n) {
    height: 72px;
    animation-delay: .28s
}
.visualizer i:nth-child(5n) {
    height: 54px;
    animation-delay: .42s
}

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

/* =====================================================
  common
===================================================== */
.section {
    position: relative;
    padding: clamp(30px, 5vw, 72px) 0;
    background: #020712;
}
.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;
}

/* =====================================================
  news
===================================================== */
.news {
    padding-top: 70px
}
.news__grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 42px;
    align-items: start;
    padding-top: 26px
}
.newsList {
    border-top: 1px solid var(--line)
}
.newsItem {padding: 15px 0;
    display: grid;
    grid-template-columns: 140px 1fr 24px;
    gap: 24px;
    align-items: center;
    border-bottom: 1px solid var(--line)
}
.newsItem::after {
    content: "›";
    font-size: 28px;
    color: var(--cyan)
}
.newsItem time {color: var(--cyan);
    font-family: var(--display);
    letter-spacing: .13em;
}
.newsItem span {
    font-weight: 700
}

/* =====================================================
 intro 
===================================================== */
.intro {
    background: radial-gradient(circle at 70% 20%, rgba(27, 120, 255, .18), transparent 38%), #030918
}

.introBox {
    display: grid;
    gap: 16px;
    align-items: center;
    background: rgba(5,18,55,.42);
    box-shadow: 0 0 90px rgba(27,120,255,.12);
}

/*文章のみだしと名前*/
.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, .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;
    color: #fff;
}
.introTextBlock p, .castTextBlock p {
    margin: 0;color:var(--muted);
}
.introTextBlock p + p, .castTextBlock p + p {
    margin-top: 1.4em;
    
}
.introTextBlock span{color:var(--cyan);font-weight: 600;}
/**/

/* =====================================================
 ticket
===================================================== */
.ticket {
    padding: 66px 0;
    background: linear-gradient(90deg, #07133d, #020712)
}
.ticket__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--line);
}
.ticket p {
    margin: 0;
    font-weight: 900
}
.ticket a {
    font-family: var(--display);
    letter-spacing: .16em;
    border: 1px solid var(--line);
    padding: 10px 18px
}

/* =====================================================
 footer
===================================================== */

.footer {
    padding: 40px 0;
    background: #01040b;
}
.footer__inner {margin: auto;text-align: center;

}
.footer p {
    margin: 0
}

.footer p.copyright {font-size: 0.9em;
    margin: 10px auto 0;
}

.footer p.footer__meigi img{max-width: 360px;
    margin:  0 auto;
}

/* =====================================================
 reveal
===================================================== */

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

/* =====================================================
   STORY
===================================================== */

.story{
  position:relative;
}

.storyBox{
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.01)
    );
    backdrop-filter:blur(8px);
}

/* キャッチ */

.storyLead{
}

strong.blue-act{color:var(--cyan);font-family:var(--display);font-size:clamp(23px,2.7vw,36px);}
strong.blue{color:var(--cyan);font-family:var(--body); }

/* 本文 */

.storyText{margin:0 0 0 40px;
font-size:17px;
color:var(--muted);
}

/* セリフ部分 */



.longDash{
  display:inline-block;
  width:2.2em;
  border-top:2px solid var(--muted);
  vertical-align:middle;
  margin-left:.2em;
}

/* =====================================
 schedule / access
===================================== */

.schedule{
  background:#020712;
}

.schedule__card{
  display:grid;
  grid-template-columns: minmax(0,1fr) 420px;
  gap:48px;

  align-items:center;

  border:1px solid var(--line);
  background:linear-gradient(
    135deg,
    rgba(140,238,255,.08),
    rgba(27,120,255,.06)
  );
}

/*日程会場*/
.schedule__card h2.accent{
  font-family:var(--accent);
  margin:0;
  font-size:52px;
  line-height:1.05;
  letter-spacing:.08em;
  font-weight:normal;
}

.accessInfo{
  margin:0;
}

.accessInfo div{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}

.accessInfo div:first-child{
  padding-top:0;
}

.accessInfo dt{
  font-family:var(--display);
  letter-spacing:.16em;
  color:var(--cyan);
}

.accessInfo dd{
  margin:0;
  
}

.accessInfo a{
  display:inline-block;
  color:#fff;
  border-bottom:1px solid var(--cyan);
}

.accessInfo a:hover{
  color:var(--cyan);
}

.scheduleInfo{
  display:grid;
  gap:24px;
}

.scheduleMap{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}

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

/* =========================
   てん（・）リスト
   ========================= */
.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; }

/* =========================
   Utility
   ========================= */
.pc{ display:none; }
.sp{ display:none; }

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

/* 2026-08 全キャスト解禁対応 */
.storyCastRoles{
  margin:1.4em 0;
  padding:18px 22px;
  border-left:2px solid var(--cyan);
  background:rgba(27,120,255,.07);
  line-height:1.9;
}

/* 2026-07-29 STORY 枠線なし調整 */
.storyBox{
  border:0;
  background:none;
  backdrop-filter:none;
}

.storyCastRoles{
  padding:0;
  border-left:0;
  background:none;
}

/* =====================================================
   CAST & STAFF AREA
===================================================== */

.cast{
  background:
    radial-gradient(circle at 50% 12%, rgba(27,120,255,.13), transparent 34%),
    #020712;
}

.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;
}

/* CAST */
.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{
  width:300px;
  max-width:100%;
}

.personPhoto{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  margin-bottom:22px;
  border:1px solid rgba(140,238,255,.28);
  background:
    linear-gradient(135deg,rgba(140,238,255,.08),rgba(27,120,255,.04)),
    #06102b;
  box-shadow:0 0 35px rgba(27,120,255,.10);
}

.personPhoto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

.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;
  color:#fff;
  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);
  color:#fff;
  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(140,238,255,.16);
}

/* ENSEMBLE: PCは2行・中央揃え */
.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;
}

/* WRITER / DIRECTOR */
.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;
}




/* PROFILE MODAL */
.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(140,238,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:absolute;
  top:18px;
  right:18px;
  z-index:10;
  width:42px;
  height:42px;
  border:0;
  background:#06133e;
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

/* TABLET / MOBILE */



/* =====================================================
   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;
  }

  /* スマホだけ、指定項目の前に1行分空ける */
  .staffRow .staffItem--spGap {
    margin-top: 1.55em;
  }

  .staffRow b {
    font-size: 14px;
  }
}
/* ==========================================================
   2026-07-29 EXCITEMENT MOTION
   線で囲わず、音・光・奥行きで見せる演出
========================================================== */
body{
  overflow-x:hidden;
}

/* OPENING：カーテンを使わず、画面全体を自然に立ち上げる */
.hero{
  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;
}

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(140,238,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)}
}

.section{
  position:relative;
  isolation:isolate;
}

.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:.12;
  pointer-events:none;
  transform:translate3d(0,0,0);
}
.section::before{
  top:8%;
  left:-12%;
  background:radial-gradient(circle,rgba(78,208,255,.95),transparent 68%);
}
.section::after{
  right:-14%;
  bottom:4%;
  background:radial-gradient(circle,rgba(116,73,255,.85),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(140,238,255,.75),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)}
}

.section > .inner,
.ticket > .inner{
  transition:opacity .8s ease,transform .95s cubic-bezier(.16,1,.3,1);
}
.motion-ready .section:not(.is-motion-in) > .inner,
.motion-ready .ticket:not(.is-motion-in) > .inner{
  opacity:0;
  transform:translateY(52px) scale(.985);
}

.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%}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 11vw,rgba(140,238,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)}
}

.heroLogo img{
  filter:drop-shadow(0 0 0 rgba(140,238,255,0));
  transition:transform .5s cubic-bezier(.16,1,.3,1),filter .5s ease;
}
.heroLogo:hover img{
  transform:scale(1.025) rotate(-.35deg);
  filter:drop-shadow(0 0 24px rgba(140,238,255,.28));
}

.visualizer i{
  transform-origin:bottom;
  animation-duration:calc(.72s + (var(--i,1) * .035s));
}

.hero__inner{transition:transform .6s cubic-bezier(.16,1,.3,1)}

/* ==========================================================
   CAST PHOTO ENTRANCE / SHARP MASK PEEL + ZOOM IN
========================================================== */
.motion-streak{display:none!important}
.motion-orb{display:none!important}

.personPhoto{
  isolation:isolate;
  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 img{
  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::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(105deg,#06133e 0 42%,#8ceeff 51%,#1b78ff 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(140,238,255,.38),transparent);
  filter:blur(2px);
  transform:skewX(-14deg);
  opacity:0;
  pointer-events:none;
}

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

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

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

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

.section.is-motion-in .personCard:nth-child(2) .personPhoto{transition-delay:.07s}
.section.is-motion-in .personCard:nth-child(3) .personPhoto{transition-delay:.14s}
.section.is-motion-in .personCard:nth-child(2) .personPhoto img{transition-delay:.07s}
.section.is-motion-in .personCard:nth-child(3) .personPhoto img{transition-delay:.14s}
.section.is-motion-in .personCard:nth-child(2) .personPhoto::before,
.section.is-motion-in .personCard:nth-child(2) .personPhoto::after{animation-delay:.07s}
.section.is-motion-in .personCard:nth-child(3) .personPhoto::before,
.section.is-motion-in .personCard:nth-child(3) .personPhoto::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}
}

/* ==========================================================
   STORY BACKGROUND / STAGE LIGHT DEPTH
   境界の音波と重複させず、舞台照明の奥行きで見せる
========================================================== */
.story{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(3,10,28,.72),rgba(2,7,18,.98)),
    #020712;
}

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

.storyMotion{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(27,120,255,.14),transparent 52%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 12.45%,
      rgba(140,238,255,.025) 12.5%,
      transparent 12.55%
    );
}

.storyMotion::before{
  content:"";
  position:absolute;
  left:50%;
  top:-18%;
  width:82%;
  height:92%;
  transform:translateX(-50%);
  background:conic-gradient(
    from 180deg at 50% 0%,
    transparent 0 18%,
    rgba(27,120,255,.10) 22%,
    transparent 28% 40%,
    rgba(140,238,255,.08) 45%,
    transparent 51% 100%
  );
  filter:blur(10px);
  opacity:.75;
  animation:storyLightSweep 10s ease-in-out infinite alternate;
}

.storyMotion::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:7%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(140,238,255,.38),transparent);
  box-shadow:
    0 -110px 42px rgba(27,120,255,.06),
    0 0 18px rgba(140,238,255,.22);
  opacity:.5;
}

.storyStageLight{
  position:absolute;
  top:-24%;
  width:28%;
  height:118%;
  opacity:.12;
  filter:blur(16px);
  transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(140,238,255,.12) 38%,transparent 78%);
}

.storyStageLight--left{
  left:12%;
  transform:rotate(13deg);
  animation:storyBeamLeft 8s ease-in-out infinite alternate;
}

.storyStageLight--right{
  right:12%;
  transform:rotate(-13deg);
  animation:storyBeamRight 8s ease-in-out infinite alternate;
}

@keyframes storyLightSweep{
  from{transform:translateX(-50%) rotate(-2deg) scale(1)}
  to{transform:translateX(-50%) rotate(2deg) scale(1.06)}
}

@keyframes storyBeamLeft{
  from{transform:rotate(16deg) translateX(-4%)}
  to{transform:rotate(9deg) translateX(5%)}
}

@keyframes storyBeamRight{
  from{transform:rotate(-16deg) translateX(4%)}
  to{transform:rotate(-9deg) translateX(-5%)}
}

.storyGlow{
  position:absolute;
  width:clamp(220px,32vw,520px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(68px);
  opacity:.08;
  animation:storyGlowFloat 10s ease-in-out infinite;
}

.storyGlow--left{
  left:-18%;
  top:18%;
  background:radial-gradient(circle,rgba(27,120,255,.72),transparent 68%);
}

.storyGlow--right{
  right:-20%;
  bottom:2%;
  background:radial-gradient(circle,rgba(140,238,255,.48),transparent 68%);
  animation-delay:-5s;
}

@keyframes storyGlowFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(20px,-12px,0) scale(1.08)}
}

.storyEqualizer{
  position:absolute;
  right:4%;
  bottom:7%;
  height:64px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  filter:drop-shadow(0 0 10px rgba(140,238,255,.65));
  opacity:.14;
}

.storyEqualizer i{
  display:block;
  width:4px;
  height:24px;
  border-radius:99px;
  background:linear-gradient(180deg,#fff,#8ceeff 46%,#207cff);
  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:42px;animation-delay:.28s}
.storyEqualizer i:nth-child(5n){height:32px;animation-delay:.42s}

/* ==========================================================
   2026-07-29 VISUAL EXCITEMENT UPGRADE
   文言は変更せず、光・奥行き・リズムだけを追加
========================================================== */

/* セクション境界：STORYで使用していたCanvas波形を共通化 */
.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 18px rgba(140,238,255,.28);
}

.sectionTitle::before,
.sectionLead::before{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  width:120%;
  height:150%;
  z-index:-1;
  transform:translateY(-50%);
  background:radial-gradient(ellipse at 12% 50%,rgba(27,120,255,.18),transparent 62%);
  opacity:.75;
  pointer-events:none;
}

/* NEWSを告知ボードらしく */
.newsItem{
  transition:background .3s ease,transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease;
}

.newsItem time{
  position:relative;
  padding-left:12px;
}

.newsItem time::before{
  content:"";
  position:absolute;
   left:2px;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
  transform:translateY(-50%);
  animation:vmNewsPulse 1.8s ease-in-out infinite;
}

@keyframes vmNewsPulse{
  0%,100%{opacity:.45;transform:translateY(-50%) scale(.8)}
  50%{opacity:1;transform:translateY(-50%) scale(1.35)}
}

/* INTRO：長文は変えずにブロックごとの奥行きを追加 */
.introBox{
  position:relative;
  z-index:1;
  background:
    linear-gradient(135deg,rgba(7,22,64,.58),rgba(2,7,18,.18)),
    rgba(5,18,55,.28);
  box-shadow:
    0 28px 90px rgba(0,0,0,.24),
    inset 0 1px rgba(255,255,255,.025);
}

.introBox::before{
  content:"";
  position:absolute;
  inset:-10% -12%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 18%,rgba(27,120,255,.18),transparent 24%),
    radial-gradient(circle at 82% 70%,rgba(140,238,255,.10),transparent 22%);
  animation:vmIntroGlow 10s ease-in-out infinite alternate;
}

@keyframes vmIntroGlow{
  from{transform:translate3d(-1%,1%,0) scale(1)}
  to{transform:translate3d(2%,-2%,0) scale(1.06)}
}

.introTextBlock{
  position:relative;
  margin-top:18px;
  padding:clamp(20px,3vw,30px);
  background:linear-gradient(135deg,rgba(255,255,255,.022),rgba(27,120,255,.045));
  border-left:2px solid rgba(140,238,255,.38);
  box-shadow:inset 14px 0 30px rgba(27,120,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(140,238,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(140,238,255,.12);
}

/* STORY：ACTの切り替わりをライブの章立てとして強調 */
.storyBox{
  position:relative;
  z-index:2;
}

.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:18px;
  letter-spacing:.16em;
  text-shadow:0 0 16px rgba(140,238,255,.45);
}

.blue-act::before{
  content:"";
  width:34px;
  height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  box-shadow:0 0 10px rgba(140,238,255,.6);
}

.storyLead{
  position:relative;
  padding-bottom:18px;
}

.storyLead::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:min(260px,72%);
  height:1px;
  background:linear-gradient(90deg,rgba(140,238,255,.8),transparent);
  box-shadow:0 0 10px rgba(140,238,255,.35);
}


/* ラスト */

.storyEnd{line-height: 1.55;

  text-align:center;

font-size: clamp(19px, 1.9vw, 24px);

  font-weight:700;

  letter-spacing:0;

  color:var(--cyan);

  position:relative;
  padding:0 12px 15px;
  background:radial-gradient(ellipse at 50% 50%,rgba(27,120,255,.11),transparent 72%);
  text-shadow:0 0 20px rgba(140,238,255,.3);
}

/* CAST：背景にステージの光を追加 */
.cast{
  background:
    radial-gradient(ellipse at 50% 10%,rgba(27,120,255,.18),transparent 38%),
    radial-gradient(circle at 15% 42%,rgba(140,238,255,.07),transparent 24%),
    radial-gradient(circle at 86% 58%,rgba(116,73,255,.08),transparent 26%),
    #020712;
}

.cast::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(74deg,transparent 0 38%,rgba(140,238,255,.032) 39%,transparent 41%),
    linear-gradient(106deg,transparent 0 60%,rgba(27,120,255,.04) 61%,transparent 63%);
  transform-origin:50% 0;
  animation:vmCastBeams 9s 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{
  position:relative;
}

.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(27,120,255,.18),transparent 68%);
  filter:blur(22px);
  opacity:.55;
  transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1);
}

/* スマホでは装飾を軽くして読みやすさを優先 */

/* ==========================================================
   2026-07-29 WAVE LOCATION / OPENING FINAL ADJUSTMENT
   波形は TOP・STORY背景・STAFF/SCHEDULE間の3か所のみ
========================================================== */

/* STORY背景：元のCanvas波形を復帰 */
.storyWave{
  position:absolute;
  left:-3%;
  top:15%;
  z-index:1;
  width:106%;
  height:62%;
  opacity:.56;
  mix-blend-mode:screen;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}

/* 舞台照明は波形を邪魔しない程度に抑える */
.storyMotion::before{
  opacity:.34;
}

.storyMotion::after{
  opacity:.32;
}

.storyStageLight{
  opacity:.38;
}

.storyEqualizer{
  opacity:.12;
}

/* STAFFとSCHEDULEの境界波形 */
.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;
}

/* ==========================================================
   2026-07-29 HEADER / HEADING / ANCHOR MOVE REFINEMENT
========================================================== */

/* 見出し背面の四角い座布団感を解消し、細い光だけ残す */
.sectionTitle::before,
.sectionLead::before{
  left:-28px;
  top:50%;
  width:260px;
  height:84px;
  border-radius:50%;
  transform:translateY(-50%);
  background:radial-gradient(
    ellipse at 32% 50%,
    rgba(27,120,255,.18) 0%,
    rgba(140,238,255,.07) 42%,
    transparent 72%
  );
  filter:blur(8px);
  opacity:.72;
}

/* ヘッダーを薄く、ナビを軽くする */
.vmHeader{
  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-color:rgba(210,235,255,.12);
}

.vmHeader__logo{
  max-width:96px;
}

.vmNav{
  gap:20px;
  font-size:16px;
  line-height:1;
}

.vmNav a{
  padding:9px 0;
  transition:color .25s ease,opacity .25s ease,text-shadow .25s ease;
}

/* 固定ヘッダー分だけタイトルが隠れないようにする */
html{
  scroll-padding-top:86px;
}

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;
  }
}

/* STORY：キャラクター紹介 */
.characterIntro{
  margin:44px 0 48px;
  padding:30px;
  border:1px solid rgba(140,238,255,.26);
  background:linear-gradient(135deg,rgba(4,17,40,.9),rgba(3,9,24,.72));
  box-shadow:inset 0 0 38px rgba(27,120,255,.08),0 0 26px rgba(0,0,0,.22);
}

.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;
  text-shadow:0 0 16px rgba(140,238,255,.34);
}

.characterIntro__title::before{
  content:"";
  width:42px;
  height:2px;
  flex:0 0 auto;
  background:linear-gradient(90deg,var(--cyan),transparent);
  box-shadow:0 0 10px rgba(140,238,255,.58);
}

.characterIntro__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.characterIntro__item{
  position:relative;
  padding:20px 20px 18px;
  border-left:2px solid rgba(140,238,255,.64);
  background:rgba(5,15,34,.72);
}

.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:#fff;  
  font-size:.78em;
  font-weight:700;
}

.characterIntro__item p{
  margin:0;
  font-size:15px;
  line-height:1.9;
  text-align:left;
}

/* =====================================================
 INTRO read more
===================================================== */
.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);
  color: #fff;
  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: #8ceeff;
  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);
}

/* INTRO read more: fade the end of the preview text */
.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;
}

/* =====================================================
   FLOATING INFORMATION BANNER
===================================================== */
.floatingInfo{
  position:fixed;
  left:20px;
  bottom:15px;
  z-index:820;
  width:min(420px,calc(100vw - 40px));
  min-height:82px;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:16px;
  padding:13px 18px 13px 14px;
  overflow:hidden;
  border:1px solid rgba(140,238,255,.58);
  border-radius:30px;
  background:
    linear-gradient(115deg,rgba(9,31,83,.96),rgba(3,10,30,.97) 58%,rgba(8,22,58,.96));
  box-shadow:
    0 18px 55px rgba(0,0,0,.55),
    0 0 0 1px rgba(140,238,255,.08),
    0 0 32px rgba(27,120,255,.28),
    inset 0 1px rgba(255,255,255,.08);

transition:
  opacity .6s ease,
  visibility .6s ease,
  transform .6s cubic-bezier(.16,1,.3,1),
  border-color .3s ease,
  box-shadow .3s ease;
    
  isolation:isolate;
  opacity: 0;
  visibility: hidden;
  transform:translateY(20px);
}
/* 時間経過後に表示 */
.floatingInfo.is-visible {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* クリック後に非表示 */
.floatingInfo.is-dismissed{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(20px);
}

/* PCのホバー移動を維持 */
@media (hover: hover) {
  .floatingInfo.is-visible:hover {
    transform:translateY(-6px);
  }
}

.floatingInfo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent 38px,rgba(140,238,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,.34),rgba(140,238,255,.18),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(27,120,255,.28),transparent 70%);
  filter:blur(18px);
  transform:translateY(-50%);
  pointer-events:none;
}

.floatingInfo__label{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(140,238,255,.72);
  border-radius:50%;
  color:var(--cyan);
  font-family:var(--display);
  font-size:17px;
  line-height:1;
  letter-spacing:.12em;
  text-shadow:0 0 13px rgba(140,238,255,.85);
  box-shadow:inset 0 0 18px rgba(27,120,255,.22),0 0 18px rgba(140,238,255,.13);
}

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

.floatingInfo__title{
  display:block;
  color:#fff;
  font-size:19px;
  font-weight:900;
  letter-spacing:.08em;
  white-space:nowrap;
}

.floatingInfo__sub{
  display:block;
  margin-top:6px;
  color:var(--cyan);
  font-family:var(--display);
  font-size:13px;
  line-height:1;
  letter-spacing:.2em;
  opacity:.86;
}

.floatingInfo__equalizer{
  height:32px;
  display:flex;
  align-items:center;
  gap:3px;
  opacity:.85;
  filter:drop-shadow(0 0 8px rgba(140,238,255,.65));
}

.floatingInfo__equalizer i{
  display:block;
  width:3px;
  height:12px;
  border-radius:99px;
  background:linear-gradient(180deg,#fff,var(--cyan),var(--blue));
  transform-origin:center;
  animation:floatingInfoBar .8s ease-in-out infinite alternate;
}

.floatingInfo__equalizer i:nth-child(2){height:24px;animation-delay:.12s}
.floatingInfo__equalizer i:nth-child(3){height:32px;animation-delay:.24s}
.floatingInfo__equalizer i:nth-child(4){height:20px;animation-delay:.36s}
.floatingInfo__equalizer i:nth-child(5){height:28px;animation-delay:.48s}

.floatingInfo__arrow{
  position:relative;
  width:34px;
  height:34px;
  border:1px solid rgba(140,238,255,.36);
  border-radius:50%;
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
}

.floatingInfo__arrow::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  border-top:2px solid var(--cyan);
  border-right:2px 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}
}

@keyframes floatingInfoBar{
  to{transform:scaleY(.38);opacity:.58}
}

/* ==========================================================
   RESPONSIVE STYLES
   Media queries consolidated by breakpoint.
========================================================== */

/* -------------------- PC DISPLAY SWITCH -------------------- */
@media (min-width:768px) {
  .pc{ display:block; }
}

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

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

      .vmNav{
          display: none
      }
      .vmMenu {
          display: block
      }
      .vmHeader {
          padding: 18px;
      }

  .hero{
      min-height:100svh;
    }
    .hero__bg{
      background-size:auto 940px;
    }

    .heroLogo img{
      width:62%;
    }

    .hero__sub img{
      width:44%;
    }
      .hero__catch{display: none; }

        .hero__date{
      position:static;
      margin:40px 0 0;

      display:flex;
      justify-content:center;
      align-items:baseline;
      gap:.35em;

      text-align:center;
    }

  .sectionCard{
      padding:20px;
    }

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

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

  .intro h2{
     font-size:26px;
    }


      .intro .inner,
    .story .inner{

      width:94vw;

    }


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


  .introTextBlock{
      padding: 0;
      border: none;
  }


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

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

    }

    
      .storyText p.storyEnd {
    font-size: 18px;
    line-height: 1.55;padding:0 0 15px;
  }

  .ticket__inner{
      display:block;
      text-align:center;

    }

    .ticket p{
      margin:0 0 16px;
    }

    .ticket a{
      display:inline-block;
    }

    /* 固定バナーにフッターが隠れないよう余白を確保 */
.footer {
  padding-bottom: 120px;
}
    
  .footer p.copyright {font-size: 0.8em;
      margin: 10px auto 0;
  }
      .footer p.footer__meigi img{max-width: 80%;
      margin:  0 auto;
  }

  .storyText{margin:0 0 0 0;
  }

 

    .longDash{
      width:1.4em;
    }

  .schedule__card{
      grid-template-columns:1fr;
      gap:24px;
    }
    .scheduleMap iframe{
      height:260px;
    }

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

  .storyCastRoles{
      padding:14px 12px;
      font-size:14px;
      line-height:1.8;
    }

  .storyCastRoles{
      padding:0;
    }

  .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;
    }

    .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;
    }

  .section::before,.section::after{opacity:.09;filter:blur(32px)}
    .motion-ready .section:not(.is-motion-in) > .inner{transform:translateY(34px)}

  .personPhoto{
      transform:translate3d(-8px,0,0);
      transition-duration:.64s;
    }

    .personPhoto img{
      transform:scale(1.12);
      transition-duration:.82s;
    }

  .storyMotion::before{
      width:130%;
      opacity:.48;
    }

    .storyStageLight{
      width:42%;
      opacity:.08;
    }

    .storyEqualizer{
      right:0;
      bottom:4%;
      height:44px;
      gap:3px;
      opacity:.10;
    }

    .storyEqualizer i{width:3px;height:18px}
    .storyEqualizer i:nth-child(2n){height:30px}
    .storyEqualizer i:nth-child(3n){height:30px}
    .storyEqualizer i:nth-child(5n){height:22px}
    .storyGlow{opacity:.06;filter:blur(46px)}

  .sectionWave{
      height:46px;
      opacity:.40;
    }

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


    .introTextBlock{
      margin-top:18px;
      padding:18px 0 0;
      border-left:0;
      border-top:1px solid rgba(140,238,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;
    }


    .sectionTitle::before,
    .sectionLead::before{
      left:-10px;
      width:108%;
    }

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

  .storyWave{
      left:-10%;
      top:18%;
      width:120%;
      height:54%;
      opacity:.42;
    }

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

    .hero{
      filter:blur(5px) brightness(.78);
    }

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

    .vmHeader{
      padding:12px 14px;
    }

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

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

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

  .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%);
    }
}

/* -------------------- SMARTPHONE DISPLAY SWITCH -------------------- */
@media (max-width:767px) {
  .sp{ display:block; }

  .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;
    }
}

/* -------------------- MOBILE -------------------- */
@media (max-width:640px) {
  .hero{

    }

    .hero__bg{
    background-size:auto 820px;
    }


    .hero__date span{
      display:block;
      font-size:clamp(28px,5vw,40px);
      line-height:1;
    }

    .hero__date strong{
      display:block;
      margin-top:0;
    font-size:clamp(22px,4vw,32px);
      line-height:1;
      font-weight:400;
    }

  .visualizer{
      height:48px;
      margin:0 auto 0;
      gap:3px;
    }

    .visualizer i{
      width:4px;
      height:20px;
    }

    .visualizer i:nth-child(2n){
      height:34px;
    }

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

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

  .newsItem {
          grid-template-columns: 1fr 20px;
          gap: 6px
      }
      .newsItem time {
          grid-column: 1/-1
      }

  .accessInfo div{
      grid-template-columns:1fr;
      gap:4px;
      padding:12px 0;
    }

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

  .floatingInfo{
      left:50%;
      bottom:0;
      transform:translateX(-50%) translateY(20px);
      width:calc(100vw - 24px);
      min-height:68px;
      grid-template-columns:auto 1fr auto;
      gap:11px;
      padding:10px 13px 10px 10px;
      border-radius:10px;
    }

    .floatingInfo.is-visible{
      transform:translateX(-50%) translateY(0);
    }

    .floatingInfo.is-dismissed{
      transform:translateX(-50%) translateY(20px);
    }

    .floatingInfo__label{
      width:43px;
      height:43px;
      font-size:14px;
    }

    .floatingInfo__title{
      font-size:16px;
      letter-spacing:.06em;
    }

    .floatingInfo__sub{
      margin-top:5px;
      font-size:11px;
      letter-spacing:.14em;
    }

    .floatingInfo__equalizer{
      display:none;
    }

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

/* -------------------- SMALL MOBILE -------------------- */
@media (max-width:480px) {
  .hero__bg{

    }

       .hero__inner{

    }


    .heroLogo img{
      width:72%;
    }

    .hero__sub img{
      width:42%;
    }

    .hero__date{
      margin-top:30px;
    }

  .introTextBlock h3,.storyLead,
    .castTextBlock h3{

      line-height:1.35;
    }

   .storyCard,
    .storyWrap,
    .introWrap,
    .introTextBlocks{

      width:100% !important;
      max-width:none !important;

    }

  .personCard__actions{
      width:100%;
    }

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

/* -------------------- HOVER-CAPABLE DEVICES -------------------- */
@media (hover:hover) {
  .section.is-motion-in .personCard:hover .personPhoto{
      transform:translateY(-9px) rotate(var(--tilt,0deg));
      box-shadow:0 20px 55px rgba(27,120,255,.22),0 0 38px rgba(140,238,255,.12);
    }

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

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

  .newsItem:hover{
      background:linear-gradient(90deg,rgba(27,120,255,.08),rgba(140,238,255,.025));
      transform:translateX(6px);
      border-color:rgba(140,238,255,.42);
    }

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

  .floatingInfo:hover{
      border-color:rgba(255,255,255,.86);
      box-shadow:
        0 22px 68px rgba(0,0,0,.62),
        0 0 0 1px rgba(140,238,255,.14),
        0 0 42px rgba(27,120,255,.42),
        inset 0 1px rgba(255,255,255,.11);
      transform:translateX(-50%) translateY(-6px);
    }

    .floatingInfo:hover .floatingInfo__arrow{
      background:rgba(140,238,255,.12);
      border-color:var(--cyan);
      transform:translateX(3px);
    }
}