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


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

}

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{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:42px;
  height:42px;
  padding:0;

  
}

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

.vmX:hover{
  color:var(--cyan);
  box-shadow:0 0 14px 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(48px, 13vw, 92px);
    line-height: .9;
    letter-spacing: .08em
}

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

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

@media (max-width:840px) {
      .vmHeader.is-scrolled{
    background:transparent;
    backdrop-filter:none;
    border-bottom:none;
  }
    
    .vmNav{
        display: none
    }
    .vmMenu {
        display: block
    }
    .vmHeader {
        padding: 18px;
    }
}





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

@media (max-width:840px){
  .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;
  }
}

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

}

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

@media (max-width:480px){

  .hero__bg{

  }

     .hero__inner{
 
  } 


  .heroLogo img{
    width:72%;
  }

  .hero__sub img{
    width:42%;
  }

  .hero__date{
    margin-top:30px;
  }

}

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


@media (max-width:640px){

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

}



/* =====================================================
  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;
    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: 24px
}
.sectionCard{
  padding:32px;
}

@media (max-width:840px){
  .sectionCard{
    padding:20px;
  }
    
.sectionTitle {font-weight: 400;
font-size: 24px;
}
    
}



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

@media (max-width:840px) {

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

}

@media (max-width:640px) {
 
    
    .newsItem {
        grid-template-columns: 1fr 20px;
        gap: 6px
    }
    .newsItem time {
        grid-column: 1/-1
    }


  
}




/* =====================================================
 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, .starringTextBlock {
    padding: clamp(22px,4vw,32px);
    /*border: 1px solid var(--line);*/
    background: rgba(5, 18, 55, .42);
}
.introTextBlock h3, .storyLead,.starringTextBlock h3 {
    margin: 0 0 18px;
    font-size: clamp(20px, 2.4vw, 32px);
    line-height: 1.4;
    color: #fff;
}
.introTextBlock p, .starringTextBlock p {
    margin: 0;color:var(--muted);
}
.introTextBlock p + p, .starringTextBlock p + p {
    margin-top: 1.4em;
}



@media (max-width:840px){

  .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,
  .starringTextBlock h3{
margin: 15px 0 15px 0;
  }

  .introTextBlock p,
  .starringTextBlock p{
    font-size:16px;
 
  }
    
}/**/


@media (max-width:480px){



  .introTextBlock h3,.storyLead,
  .starringTextBlock h3{

    line-height:1.35;
  }
    
 .storyCard,
  .storyWrap,
  .introWrap,
  .introTextBlocks{

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

  }
    

}

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


@media (max-width:840px){ 
  .ticket__inner{
    display:block;
    text-align:center;

  }

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

  .ticket a{
    display:inline-block;
  }

  }

/* =====================================================
 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;
}
@media (max-width:840px){ 
    
    .footer p.copyright {font-size: 0.8em;
    margin: 10px auto 0;
}
    .footer p.footer__meigi img{max-width: 80%;
    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{color:var(--cyan);}


/* 本文 */

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

/* セリフ部分 */



/* ラスト */

.storyEnd{line-height: 1.55;
  margin-top:42px;

  text-align:center;

font-size: clamp(17px, 1.8vw, 24px);

  font-weight:700;

  letter-spacing:.1em;

  color:var(--cyan);
}

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

@media (max-width:840px){

.storyText{margin:0 0 0 0;
}
  .longDash{
    width:1.4em;
  }
}




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

@media (max-width:840px){

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

}

@media (max-width:640px){

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

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

}




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

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

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


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

@media (max-width:840px){

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

}