span.hero-title01 {
  opacity: 0;
  animation: hero-title01 1s 0.4s ease forwards;
  /*svg{
    .yellow01{
      animation: yellow01 1s 1s ease forwards;
    }
  }*/
}

@keyframes hero-title01 {
  0% {
    transform: translate(200%, 0);
    opacity: 0;
  }
  20% {
    transform: translate(0, 0);
    transform-origin: left;
    opacity: 1;
  }
  30% {
    transform: translate(0, 0) scaleX(0.8);
    transform-origin: left;
  }
  40% {
    transform: translate(0, 0) scaleX(0.9);
    transform-origin: left;
  }
  70% {
    transform: translate(0, 0) scaleX(1.12);
    transform-origin: left;
  }
  85% {
    transform: translate(0, 0) scaleX(1);
    transform-origin: left;
  }
  100% {
    transform: translate(0, 0) scaleX(1);
    transform-origin: left;
    opacity: 1;
  }
}
div.hero-img span {
  transform: scale(0);
  animation: hero-img01 6s 1s linear infinite;
}

@keyframes hero-img01 {
  0% {
    transform: scale(0);
    transform-origin: bottom;
  }
  2% {
    transform: scale(1);
    transform-origin: bottom;
  }
  4% {
    transform: scale(1.2);
  }
  6% {
    transform: scale(0.9);
  }
  8% {
    transform: scale(1);
  }
  60% {
    transform: scale(1);
    display: block;
  }
  61% {
    transform: scale(1);
    display: none;
  }
  100% {
    transform: scale(1);
    display: none;
  }
}
span.hero-title02 {
  animation: hero-title02 0.24s 0.8s ease forwards;
  opacity: 0;
}

@keyframes hero-title02 {
  0% {
    transform: matrix3d(-0.17, 0, -0.98, 0, 0, 1, 0, 0, 0.98, 0, -0.17, 0, 0, 30, 0, 1);
    transform-origin: center right;
    opacity: 1;
  }
  100% {
    transform: matrix3d(0);
    transform-origin: center right;
    opacity: 1;
  }
}
span.hero-title03 {
  animation: hero-title03 0.4s 0.4s ease forwards;
  opacity: 0;
}

@keyframes hero-title03 {
  0% {
    transform: translate(0, -10%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
div.contents-area01-title h2.ani.animation span.title01 span,
div.cast-area h2.ani.animation span.title01 span {
  display: inline-block;
  transform: translate(0, 1em);
  opacity: 0;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(1),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(1) {
  animation: title-ani 0.3s 0.1s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(2),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(2) {
  animation: title-ani 0.3s 0.17s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(3),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(3) {
  animation: title-ani 0.3s 0.24s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(4),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(4) {
  animation: title-ani 0.3s 0.31s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(5),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(5) {
  animation: title-ani 0.3s 0.38s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(6),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(6) {
  animation: title-ani 0.3s 0.45s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(7),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(7) {
  animation: title-ani 0.3s 0.52s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(8),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(8) {
  animation: title-ani 0.3s 0.59s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(9),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(9) {
  animation: title-ani 0.3s 0.66s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(10),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(10) {
  animation: title-ani 0.3s 0.73s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(11),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(11) {
  animation: title-ani 0.3s 0.8s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(12),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(12) {
  animation: title-ani 0.3s 0.87s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(13),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(13) {
  animation: title-ani 0.3s 0.94s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(14),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(14) {
  animation: title-ani 0.3s 1.01s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(15),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(15) {
  animation: title-ani 0.3s 1.08s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title01 span:nth-of-type(16),
div.cast-area h2.ani.animation span.title01 span:nth-of-type(16) {
  animation: title-ani 0.3s 1.15s cubic-bezier(0, 1, 1, 0) forwards;
}
div.contents-area01-title h2.ani.animation span.title02,
div.cast-area h2.ani.animation span.title02 {
  animation: title-ani 1s 0.6s forwards;
}

@keyframes title-ani {
  0% {
    transform: translate(0, 0.8em);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}/*# sourceMappingURL=animation.css.map */