@charset "utf-8";

.anime{
  opacity: 0;
  transition: all 1s ease;
}
.anime.is-ani{
  opacity: 1;
}

/*---------------------
MV
----------------------*/
.mv-anime {
  -moz-animation: mva 3s both;
  animation: mva 3s both;
  opacity: 1 !important;
  display: block !important;
}
@keyframes mva {
  0% {
    background-position: 0 -300px;
  }
  20% {
    background-position: 0 -300px;
  }
  100% {
    background-position: 0 0;
  }
}
@-moz-keyframes mva {
  0% {
    background-position: 0 -300px;
  }
  20% {
    background-position: 0 -300px;
  }
  100% {
    background-position: 0 0;
  }
}
@-webkit-keyframes mva {
  0% {
    background-position: 0 -300px;
  }
  20% {
    background-position: 0 -300px;
  }
  100% {
    background-position: 0 0;
  }
}


/*---------------------
見出し
----------------------*/
.h-title.anime{
  transition: all .5s ease;
}

.h-title.anime:after{
  width: 0%;
  transition: all 2s ease;
}

.h-title.anime.is-ani:after{
  width: 100%;
}


/*---------------------
SUB-chara
----------------------*/
.ticket-sk.anime:before,
.ticket-sk.anime:after{
  width: 0;
}
.ticket-sk.anime.is-ani:before,
.ticket-sk.anime.is-ani:after{
    width: 40%;
}
@media screen and (max-width: 768px){
  .ticket-sk.anime.is-ani:before,
  .ticket-sk.anime.is-ani:after{
    width: 30%;
  }
}

@media screen and (max-width: 480px){
  .ticket-sk.anime.is-ani:before,
  .ticket-sk.anime.is-ani:after{
    width: 25%;
  }
}

/*---------------------
NEWS+STORY（下から表示）
----------------------*/
.sub-floor.anime{
  position: relative;
  bottom: -200px;
}

.sub-floor.anime.is-ani{
  bottom:0;
}


/*---------------------
chara
----------------------*/
.chara-img.anime{
  left: -10%;
  transition: all 1s ease;
}

.chara-info.anime{
  right: -30%;
  transition: all 1s ease;
}

#chara .floor:nth-child(2n+1) .chara-img.anime{
  right: -10%;
  left:inherit;
}

#chara .floor:nth-child(2n+1) .chara-info.anime{
  left: -30%;
  right:inherit;
}

.chara-img.anime.is-ani{
  left: 0%;
}

.chara-info.anime.is-ani{
  right: 0%;
}

#chara .floor:nth-child(2n+1) .chara-img.anime.is-ani{
  right: 0%;
}

#chara .floor:nth-child(2n+1) .chara-info.anime.is-ani{
  left: 0%;
}

/*---------------------
chara
----------------------*/
.staff-member.anime{
  position: relative;
  bottom:-100px;
}
.staff-member.anime.is-ani{
  bottom:0;
}