@-webkit-keyframes show {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes show {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes showFire {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes showFire {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes blind {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes blind {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes navShow {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@-webkit-keyframes navShow {
  0% {
    -webkit-transform: translateX(100%); }
  100% {
    -webkit-transform: translateX(0%); } }

@keyframes navClose {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%); } }

@-webkit-keyframes navClose {
  0% {
    -webkit-transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(100%); } }

@-webkit-keyframes titAnim {
  0% {
    background-size: 0% 100%; }
  100% {
    background-size: 100% 100%; } }

@keyframes titAnim {
  0% {
    background-size: 0% 100%; }
  100% {
    background-size: 100% 100%; } }

@-webkit-keyframes charaAnim {
  0% {
    left: 52%;
    opacity: 0; }
  100% {
    left: 50%;
    opacity: 1; } }

@keyframes charaAnim {
  0% {
    left: 52%;
    opacity: 0; }
  100% {
    left: 50%;
    opacity: 1; } }

@keyframes bgAnimation {
  0% {
    left: -150%;
    top: -160%; }
  5% {
    top: 0%;
    left: -150%;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(1, 0, 1, 0.62);
    animation-timing-function: cubic-bezier(1, 0, 1, 0.62); }
  10% {
    top: 0%;
    left: -250%;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(1, 0, 1, 0);
    animation-timing-function: cubic-bezier(1, 0, 1, 0); }
  20% {
    top: 0%;
    left: -220%;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(1, 0.21, 1, 0.21);
    animation-timing-function: cubic-bezier(1, 0.21, 1, 0.21); }
  40% {
    top: 0%;
    left: -20%;
    -webkit-animation-timing-function: cubic-bezier(0.41, 0.67, 0, 1.01);
    animation-timing-function: cubic-bezier(0.41, 0.67, 0, 1.01); }
  100% {
    top: 0%;
    left: -20%;
    -webkit-animation-timing-function: cubic-bezier(0, 0.1, 1, 1);
    animation-timing-function: cubic-bezier(0, 0.1, 1, 1); } }

@-webkit-keyframes bgAnimation {
  0% {
    left: -150%;
    top: -160%; }
  5% {
    top: 0%;
    left: -150%;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(1, 0, 1, 0.62);
    animation-timing-function: cubic-bezier(1, 0, 1, 0.62); }
  10% {
    top: 0%;
    left: -250%;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(1, 0, 1, 0);
    animation-timing-function: cubic-bezier(1, 0, 1, 0); }
  20% {
    top: 0%;
    left: -220%;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(1, 0.21, 1, 0.21);
    animation-timing-function: cubic-bezier(1, 0.21, 1, 0.21); }
  40% {
    top: 0%;
    left: -20%;
    -webkit-animation-timing-function: cubic-bezier(0.41, 0.67, 0, 1.01);
    animation-timing-function: cubic-bezier(0.41, 0.67, 0, 1.01); }
  100% {
    top: 0%;
    left: -20%;
    -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
    animation-timing-function: cubic-bezier(0, 1, 1, 1); } }

@-webkit-keyframes textHide {
  0% {
    opacity: 1; }
  25% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes textHide {
  0% {
    opacity: 1; }
  25% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes textBorder {
  0% {
    margin-left: -1602px; }
  50% {
    margin-left: -801px; }
  100% {
    margin-left: 1000px; } }

@keyframes textBorder {
  0% {
    margin-left: -1602px; }
  50% {
    margin-left: -801px; }
  100% {
    margin-left: 1000px; } }

@-webkit-keyframes textShow {
  0% {
    margin-left: -1602px; }
  50% {
    margin-left: -801px; }
  100% {
    margin-left: 1000px; } }

@keyframes textShow {
  0% {
    margin-left: -1602px; }
  50% {
    margin-left: -801px; }
  100% {
    margin-left: 1000px; } }

@-webkit-keyframes textBlind {
  0% {
    margin-left: -1602px; }
  50% {
    margin-left: -801px; }
  100% {
    margin-left: 1000px; } }

@keyframes textBlind {
  0% {
    margin-left: -1602px; }
  50% {
    margin-left: -801px; }
  100% {
    margin-left: 1000px; } }

@keyframes textBorder {
  0% {
    margin-left: -1602px; }
  50% {
    margin-left: -801px; }
  100% {
    margin-left: 1000px; } }

@-webkit-keyframes textSubBorder {
  0% {
    margin-left: -620px; }
  50% {
    margin-left: -310px; }
  100% {
    margin-left: 250px; } }

@keyframes textSubBorder {
  0% {
    margin-left: -620px; }
  50% {
    margin-left: -310px; }
  100% {
    margin-left: 250px; } }

@-webkit-keyframes textSubShow {
  0% {
    margin-left: -620px; }
  100% {
    margin-left: 300px; } }

@keyframes textSubShow {
  0% {
    margin-left: -620px; }
  100% {
    margin-left: 300px; } }

@-webkit-keyframes textSubBlind {
  0% {
    margin-left: -620px; }
  50% {
    margin-left: -310px; }
  100% {
    margin-left: 250px; } }

@keyframes textSubBlind {
  0% {
    margin-left: -620px; }
  50% {
    margin-left: -310px; }
  100% {
    margin-left: 250px; } }

.loading {
  z-index: 99999 !important; }

.video {
  z-index: 99990 !important; }

.bg #playerSP {
  position: relative;
  width: 767px;
  height: auto;
  pointer-events: none; }

#storyArea, #galleryArea li {
  opacity: 0; }
  #storyArea.scrollin, #galleryArea li.scrollin {
    opacity: 1;
    -webkit-transition: 1000ms;
    -o-transition: 1000ms;
    transition: 1000ms; }

#movieArea .movieImg::before {
  opacity: 0; }

#movieArea.scrollin .movieImg::before {
  opacity: 1;
  -webkit-transition: 1000ms;
  -o-transition: 1000ms;
  transition: 1000ms; }

#newsArea {
  opacity: 0; }
  #newsArea.scrollin {
    -webkit-animation: show 0.5s forwards ease-in-out;
    animation: show 0.5s forwards ease-in-out; }

#twitterArea {
  opacity: 0; }
  #twitterArea.scrollin {
    -webkit-animation: show 0.5s forwards ease-in-out;
    animation: show 0.5s forwards ease-in-out;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }

header h1, .hed_star, .hed_chara {
  opacity: 0; }
  header h1.show, .hed_star.show, .hed_chara.show {
    opacity: 1;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all; }

nav.btn.none {
  display: none; }

nav.nav-in {
  width: 387px;
  min-height: calc( 100vh - 110px);
  padding: 100px 70px 10px; }

nav.nav-in .menu {
  display: none; }

nav.nav-in.js-fire .menu {
  display: block; }

nav .nav {
  width: 387px; }

.js-fire .nav-inner {
  width: 387px;
  min-height: calc( 100vh - 110px);
  padding: 100px 70px 10px; }

nav.nav-in {
  animation: navClose 0.5s forwards ease-in-out;
  -webkit-animation: navClose 0.5s forwards ease-in-out; }

nav.nav-in.js-fire {
  animation: navShow 0.5s forwards ease-in-out;
  -webkit-animation: navShow 0.5s forwards ease-in-out; }

.hed_tit1 {
  width: 1000px;
  height: 130px;
  line-height: 0.75;
  overflow: hidden;
  opacity: 0; }
  .hed_tit1.show {
    opacity: 1; }
  .hed_tit1 p {
    opacity: 0; }
    .hed_tit1 p.show {
      opacity: 1; }
      .hed_tit1 p.show.fire {
        -webkit-transition-delay: 0.4s !important;
        -o-transition-delay: 0.4s !important;
        transition-delay: 0.4s !important;
        opacity: 1 !important; }
      .hed_tit1 p.show.blind {
        -webkit-transition-delay: 0.3s;
        -o-transition-delay: 0.3s;
        transition-delay: 0.3s;
        opacity: 0; }

.hed_tit2 {
  width: 460px;
  height: 130px;
  line-height: 0.75;
  overflow: hidden;
  opacity: 0; }
  .hed_tit2.show {
    opacity: 1; }
  .hed_tit2 p {
    opacity: 0; }
    .hed_tit2 p.show {
      opacity: 1; }
      .hed_tit2 p.show.fire {
        opacity: 1 !important;
        -webkit-transition-delay: 0.4s !important;
        -o-transition-delay: 0.4s !important;
        transition-delay: 0.4s !important; }
      .hed_tit2 p.show.blind {
        -webkit-transition-delay: 0.3s;
        -o-transition-delay: 0.3s;
        transition-delay: 0.3s;
        opacity: 0; }

.video {
  opacity: 1; }
  .video.none {
    opacity: 0; }

.hed_subtit1 {
  width: 412px;
  height: 75px;
  line-height: 0.85;
  overflow: hidden;
  opacity: 0; }
  .hed_subtit1.show {
    opacity: 1; }
  .hed_subtit1 p {
    opacity: 0; }
    .hed_subtit1 p.show {
      opacity: 1; }
      .hed_subtit1 p.show.fire {
        -webkit-transition-delay: 0.6s;
        -o-transition-delay: 0.6s;
        transition-delay: 0.6s;
        opacity: 1 !important; }
      .hed_subtit1 p.show.blind {
        -webkit-transition-delay: 0.5s;
        -o-transition-delay: 0.5s;
        transition-delay: 0.5s;
        opacity: 0; }

.hed_subtit2 {
  width: 242px;
  height: 75px;
  line-height: 0.85;
  overflow: hidden;
  opacity: 0; }
  .hed_subtit2.show {
    opacity: 1; }
  .hed_subtit2 p {
    opacity: 0; }
    .hed_subtit2 p.show {
      opacity: 1; }
      .hed_subtit2 p.show.fire {
        -webkit-transition-delay: 0.6s;
        -o-transition-delay: 0.6s;
        transition-delay: 0.6s;
        opacity: 1 !important; }
      .hed_subtit2 p.show.blind {
        -webkit-transition-delay: 0.5s;
        -o-transition-delay: 0.5s;
        transition-delay: 0.5s;
        opacity: 0; }

header.header {
  z-index: -1; }

header .bg {
  position: absolute;
  top: 0;
  -ms-transform: skewX(-30deg) translateX(0%);
  transform: skewX(-30deg) translateX(0%);
  -webkit-transform: skewX(-30deg) translateX(0%);
  left: -30%;
  width: 200%;
  z-index: -1;
  height: 100vh;
  background: #e2041b; }

header .bgAnim {
  position: absolute;
  top: 0;
  -ms-transform: skewX(-30deg) translateX(0%);
  transform: skewX(-30deg) translateX(0%);
  -webkit-transform: skewX(-30deg) translateX(0%);
  left: -30%;
  width: 200%;
  height: 800px;
  z-index: -1; }
  header .bgAnim.red {
    left: -150%;
    top: -160%;
    background: #e2041b; }
    header .bgAnim.red.on {
      top: 0%;
      left: -50%; }
    header .bgAnim.red.fire {
      animation: bgAnimation 3s forwards;
      -webkit-animation: bgAnimation 3s forwards;
      z-index: 0; }
  header .bgAnim.yellow {
    left: -150%;
    top: -160%;
    background: #ffde2f; }
    header .bgAnim.yellow.on {
      top: 0%;
      left: -50%; }
    header .bgAnim.yellow.fire {
      animation: bgAnimation 3s forwards;
      -webkit-animation: bgAnimation 3s forwards;
      z-index: 0; }
  header .bgAnim.blue {
    left: -150%;
    top: -160%;
    background: #2d94f0; }
    header .bgAnim.blue.on {
      top: 0%;
      left: -50%; }
    header .bgAnim.blue.fire {
      animation: bgAnimation 3s forwards;
      -webkit-animation: bgAnimation 3s forwards;
      z-index: 0; }
  header .bgAnim.green {
    left: -150%;
    top: -160%;
    background: #3dba98; }
    header .bgAnim.green.on {
      top: 0%;
      left: -50%; }
    header .bgAnim.green.fire {
      animation: bgAnimation 3s forwards;
      -webkit-animation: bgAnimation 3s forwards;
      z-index: 0; }
  header .bgAnim.purple {
    left: -150%;
    top: -160%;
    background: #675aa9; }
    header .bgAnim.purple.on {
      top: 0%;
      left: -50%; }
    header .bgAnim.purple.fire {
      animation: bgAnimation 3s forwards;
      -webkit-animation: bgAnimation 3s forwards;
      z-index: 0; }

header .tithide1 {
  width: 970px;
  height: 130px;
  background: #000;
  top: 34px;
  margin-top: -130px;
  margin-left: -1602px;
  left: 50%; }
  header .tithide1.show {
    -webkit-animation: textShow 0.8s ease-in-out;
    animation: textShow 0.8s ease-in-out; }
  header .tithide1.blind {
    -webkit-animation: textBlind 0.5s ease-in-out;
    animation: textBlind 0.5s ease-in-out; }
  header .tithide1.fire {
    -webkit-animation: textBorder 0.5s ease-in-out;
    animation: textBorder 0.5s ease-in-out; }

header .tithide2 {
  width: 970px;
  height: 130px;
  background: #000;
  top: 171px;
  margin-top: -130px;
  margin-left: -1602px;
  left: 50%; }
  header .tithide2.show {
    -webkit-animation: textShow 0.8s ease-in-out;
    animation: textShow 0.8s ease-in-out; }
  header .tithide2.blind {
    -webkit-animation: textBlind 0.5s ease-in-out;
    animation: textBlind 0.5s ease-in-out; }
  header .tithide2.fire {
    -webkit-animation: textBorder 0.5s ease-in-out;
    animation: textBorder 0.5s ease-in-out; }

header .subtithide1 {
  width: 412px;
  height: 75px;
  position: absolute;
  margin-top: -85px;
  margin-left: -620px;
  left: 50%;
  background: #000; }
  header .subtithide1.show {
    -webkit-animation: textSubShow 1s ease-in-out;
    animation: textSubShow 1s ease-in-out;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
  header .subtithide1.blind {
    -webkit-animation: textSubBlind 0.4s ease-in-out;
    animation: textSubBlind 0.4s ease-in-out;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
  header .subtithide1.fire {
    -webkit-animation: textSubBorder 0.4s ease-in-out;
    animation: textSubBorder 0.4s ease-in-out;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }

header .subtithide2 {
  width: 412px;
  height: 75px;
  position: absolute;
  margin-top: -85px;
  margin-left: -620px;
  left: 50%;
  background: #000; }
  header .subtithide2.show {
    -webkit-animation: textSubShow 1s ease-in-out;
    animation: textSubShow 1s ease-in-out;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
  header .subtithide2.blind {
    -webkit-animation: textSubBlind 0.4s ease-in-out;
    animation: textSubBlind 0.4s ease-in-out;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
  header .subtithide2.fire {
    -webkit-animation: textSubBorder 0.4s ease-in-out;
    animation: textSubBorder 0.4s ease-in-out;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }

#storyArea:before {
  opacity: 0; }

#storyArea.scrollin:before {
  -webkit-animation: show 0.5s forwards ease-in-out;
  animation: show 0.5s forwards ease-in-out;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s; }

#characterArea .chara_img {
  opacity: 0; }

#characterArea .chara_data {
  opacity: 0; }

#characterArea .chara_catch {
  opacity: 0; }

#characterArea .chara:after,
#characterArea .chara > div:after {
  opacity: 0;
  left: 100%; }



#characterArea.scrollin .chara_rs.slick-active .chara_img, #characterArea.scrollin .chara_st.slick-active .chara_img, #characterArea.scrollin .chara_kk.slick-active .chara_img, #characterArea.scrollin .chara_th.slick-active .chara_img, #characterArea.scrollin .chara_so.slick-active .chara_img, #characterArea.scrollin .chara_yt.slick-active .chara_img, #characterArea.scrollin .chara_gk.slick-active .chara_img, #characterArea.scrollin .chara_m.slick-active .chara_img, #characterArea.scrollin .chara_is.slick-active .chara_img, #characterArea.scrollin .chara_an.slick-active .chara_img, #characterArea.scrollin .chara_ft.slick-active .chara_img, #characterArea.scrollin .chara_kk2.slick-active .chara_img, #characterArea.scrollin .chara_sy.slick-active .chara_img, #characterArea.scrollin .chara_ni.slick-active .chara_img, #characterArea.scrollin .chara_gk2.slick-active .chara_img {
  -webkit-animation: show 0.2s forwards ease-in-out;
  animation: show 0.2s forwards ease-in-out;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s; }

#characterArea.scrollin .chara_rs.slick-active .chara_data, #characterArea.scrollin .chara_st.slick-active .chara_data, #characterArea.scrollin .chara_kk.slick-active .chara_data, #characterArea.scrollin .chara_th.slick-active .chara_data, #characterArea.scrollin .chara_so.slick-active .chara_data, #characterArea.scrollin .chara_yt.slick-active .chara_data, #characterArea.scrollin .chara_gk.slick-active .chara_data, #characterArea.scrollin .chara_m.slick-active .chara_data, #characterArea.scrollin .chara_is.slick-active .chara_data, #characterArea.scrollin .chara_an.slick-active .chara_data, #characterArea.scrollin .chara_ft.slick-active .chara_data, #characterArea.scrollin .chara_kk2.slick-active .chara_data, #characterArea.scrollin .chara_sy.slick-active .chara_data, #characterArea.scrollin .chara_ni.slick-active .chara_data, #characterArea.scrollin .chara_gk2.slick-active .chara_data {
  -webkit-animation: show 0.2s forwards ease-in-out;
  animation: show 0.2s forwards ease-in-out;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s; }

#characterArea.scrollin .chara_rs.slick-active:after, #characterArea.scrollin .chara_st.slick-active > div:after, #characterArea.scrollin .chara_kk.slick-active > div:after, #characterArea.scrollin .chara_th.slick-active:after, #characterArea.scrollin .chara_so.slick-active:after, #characterArea.scrollin .chara_yt.slick-active:after, #characterArea.scrollin .chara_gk.slick-active:after, #characterArea.scrollin .chara_m.slick-active > div:after, #characterArea.scrollin .chara_is.slick-active:after, #characterArea.scrollin .chara_an.slick-active:after, #characterArea.scrollin .chara_ft.slick-active:after, #characterArea.scrollin .chara_kk2.slick-active > div:after, #characterArea.scrollin .chara_sy.slick-active:after, #characterArea.scrollin .chara_ni.slick-active:after, #characterArea.scrollin .chara_gk2.slick-active:after {
  -webkit-animation: charaAnim 0.2s forwards ease-in-out;
  animation: charaAnim 0.2s forwards ease-in-out;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }

#characterArea.scrollin .chara_rs.slick-active .chara_catch, #characterArea.scrollin .chara_st.slick-active .chara_catch, #characterArea.scrollin .chara_kk.slick-active .chara_catch, #characterArea.scrollin .chara_th.slick-active .chara_catch, #characterArea.scrollin .chara_so.slick-active .chara_catch, #characterArea.scrollin .chara_yt.slick-active .chara_catch, #characterArea.scrollin .chara_gk.slick-active .chara_catch, #characterArea.scrollin .chara_m.slick-active .chara_catch, #characterArea.scrollin .chara_is.slick-active .chara_catch, #characterArea.scrollin .chara_an.slick-active .chara_catch, #characterArea.scrollin .chara_ft.slick-active .chara_catch, #characterArea.scrollin .chara_kk2.slick-active .chara_catch, #characterArea.scrollin .chara_sy.slick-active .chara_catch, #characterArea.scrollin .chara_ni.slick-active .chara_catch, #characterArea.scrollin .chara_gk2.slick-active .chara_catch {
  -webkit-animation: show 0.2s forwards ease-in-out;
  animation: show 0.2s forwards ease-in-out;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s; }

@media screen and (max-width: 767px) {
  @keyframes bgAnimation {
    0% {
      left: -150%;
      top: -160%; }
    20% {
      top: 0%;
      left: -150%; }
    55% {
      top: 0%;
      left: -300%; }
    100% {
      top: 0%;
      left: -50%; } }
  @-webkit-keyframes bgAnimation {
    0% {
      left: -150%;
      top: -160%; }
    20% {
      top: 0%;
      left: -150%; }
    55% {
      top: 0%;
      left: -300%; }
    100% {
      top: 0%;
      left: -50%; } }
  @-webkit-keyframes charaAnim {
    0% {
      left: 50%;
      opacity: 0; }
    100% {
      left: 0%;
      opacity: 1; } }
  @keyframes charaAnim {
    0% {
      left: 50%;
      opacity: 0; }
    100% {
      left: 0%;
      opacity: 1; } }
  body.clicked nav.js-fire {
    width: 587px;
    min-height: calc( 100% - 200px);
    padding: 100px 90px; }
  .js-fire .nav-inner {
    width: auto;
    padding: 0; }
  body.clicked nav.js-fire section#share {
    position: absolute;
    width: 100%;
    min-width: 100%;
    bottom: 40px; }
  body nav.nav-in {
    width: 587px;
    min-height: calc( 100% - 200px);
    padding: 100px 90px; }
  nav.nav-in .menu {
    position: fixed;
    right: 0;
    top: 30px;
    width: 106px;
    height: 42px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap; }
  header .bgAnim {
    position: absolute;
    top: 0;
    -ms-transform: skewX(-30deg) translateX(0%);
    transform: skewX(-30deg) translateX(0%);
    -webkit-transform: skewX(-30deg) translateX(0%);
    left: -30%;
    width: 200%;
    height: 800px;
    z-index: -1; }
    header .bgAnim.red {
      left: -150%;
      top: -160%;
      background: #e2041b; }
      header .bgAnim.red.on {
        top: 0%;
        left: -50%; }
      header .bgAnim.red.fire {
        animation: bgAnimation 0.8s forwards ease-in-out;
        -webkit-animation: bgAnimation 0.8s forwards ease-in-out;
        z-index: 0; }
    header .bgAnim.yellow {
      left: -150%;
      top: -160%;
      background: #ffde2f; }
      header .bgAnim.yellow.on {
        top: 0%;
        left: -50%; }
      header .bgAnim.yellow.fire {
        animation: bgAnimation 0.8s forwards ease-in-out;
        -webkit-animation: bgAnimation 0.8s forwards ease-in-out;
        z-index: 0; }
    header .bgAnim.blue {
      left: -150%;
      top: -160%;
      background: #2d94f0; }
      header .bgAnim.blue.on {
        top: 0%;
        left: -50%; }
      header .bgAnim.blue.fire {
        animation: bgAnimation 0.8s forwards ease-in-out;
        -webkit-animation: bgAnimation 0.8s forwards ease-in-out;
        z-index: 0; }
    header .bgAnim.green {
      left: -150%;
      top: -160%;
      background: #3dba98; }
      header .bgAnim.green.on {
        top: 0%;
        left: -50%; }
      header .bgAnim.green.fire {
        animation: bgAnimation 0.8s forwards ease-in-out;
        -webkit-animation: bgAnimation 0.8s forwards ease-in-out;
        z-index: 0; }
    header .bgAnim.purple {
      left: -150%;
      top: -160%;
      background: #675aa9; }
      header .bgAnim.purple.on {
        top: 0%;
        left: -50%; }
      header .bgAnim.purple.fire {
        animation: bgAnimation 0.8s forwards ease-in-out;
        -webkit-animation: bgAnimation 0.8s forwards ease-in-out;
        z-index: 0; }
  #characterArea.scrollin .chara_rs.slick-active .chara_img, #characterArea.scrollin .chara_st.slick-active .chara_img, #characterArea.scrollin .chara_kk.slick-active .chara_img, #characterArea.scrollin .chara_th.slick-active .chara_img, #characterArea.scrollin .chara_so.slick-active .chara_img, #characterArea.scrollin .chara_yt.slick-active .chara_img, #characterArea.scrollin .chara_m.slick-active .chara_img, #characterArea.scrollin .chara_gk.slick-active .chara_img, #characterArea.scrollin .chara_is.slick-active .chara_img, #characterArea.scrollin .chara_an.slick-active .chara_img, #characterArea.scrollin .chara_ft.slick-active .chara_img, #characterArea.scrollin .chara_kk2.slick-active .chara_img, #characterArea.scrollin .chara_sy.slick-active .chara_img, #characterArea.scrollin .chara_ni.slick-active .chara_img, #characterArea.scrollin .chara_gk2.slick-active .chara_img {
    -webkit-animation: show 0.2s forwards ease-in-out;
    animation: show 0.2s forwards ease-in-out;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s; }
  #characterArea.scrollin .chara_rs.slick-active .chara_data, #characterArea.scrollin .chara_st.slick-active .chara_data, #characterArea.scrollin .chara_kk.slick-active .chara_data, #characterArea.scrollin .chara_th.slick-active .chara_data, #characterArea.scrollin .chara_so.slick-active .chara_data, #characterArea.scrollin .chara_yt.slick-active .chara_data, #characterArea.scrollin .chara_m.slick-active .chara_data,
	#characterArea.scrollin .chara_gk.slick-active .chara_data, #characterArea.scrollin .chara_is.slick-active .chara_data, #characterArea.scrollin .chara_an.slick-active .chara_data, #characterArea.scrollin .chara_ft.slick-active .chara_data, #characterArea.scrollin .chara_kk2.slick-active .chara_data, #characterArea.scrollin .chara_sy.slick-active .chara_data, #characterArea.scrollin .chara_ni.slick-active .chara_data, #characterArea.scrollin .chara_gk2.slick-active .chara_data {
    -webkit-animation: show 0.2s forwards ease-in-out;
    animation: show 0.2s forwards ease-in-out;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s; }
  #characterArea.scrollin .chara_rs.slick-active:after, #characterArea.scrollin .chara_st.slick-active > div:after, #characterArea.scrollin .chara_kk.slick-active > div:after, #characterArea.scrollin .chara_th.slick-active:after, #characterArea.scrollin .chara_so.slick-active:after, #characterArea.scrollin .chara_yt.slick-active:after, #characterArea.scrollin .chara_m.slick-active > div:after, #characterArea.scrollin .chara_gk.slick-active:after, #characterArea.scrollin .chara_is.slick-active:after, #characterArea.scrollin .chara_an.slick-active:after, #characterArea.scrollin .chara_ft.slick-active:after, #characterArea.scrollin .chara_kk2.slick-active > div:after, #characterArea.scrollin .chara_sy.slick-active:after, #characterArea.scrollin .chara_ni.slick-active:after, #characterArea.scrollin .chara_gk2.slick-active:after {
    -webkit-animation: charaAnim 0.1s forwards ease-in-out;
    animation: charaAnim 0.1s forwards ease-in-out;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
  #characterArea.scrollin .chara_rs.slick-active .chara_catch, #characterArea.scrollin .chara_st.slick-active .chara_catch, #characterArea.scrollin .chara_kk.slick-active .chara_catch, #characterArea.scrollin .chara_th.slick-active .chara_catch, #characterArea.scrollin .chara_so.slick-active .chara_catch, #characterArea.scrollin .chara_yt.slick-active .chara_catch, #characterArea.scrollin .chara_m.slick-active .chara_catch, #characterArea.scrollin .chara_gk.slick-active .chara_catch, #characterArea.scrollin .chara_is.slick-active .chara_catch, #characterArea.scrollin .chara_an.slick-active .chara_catch, #characterArea.scrollin .chara_ft.slick-active .chara_catch, #characterArea.scrollin .chara_kk2.slick-active .chara_catch, #characterArea.scrollin .chara_sy.slick-active .chara_catch, #characterArea.scrollin .chara_ni.slick-active .chara_catch, #characterArea.scrollin .chara_gk2.slick-active .chara_catch {
    -webkit-animation: show 0.2s forwards ease-in-out;
    animation: show 0.2s forwards ease-in-out;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s; } }