@charset "UTF-8";
.font_ja {
  font-family: "YakuHanJP", Lato, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

.mincho {
  font-family: "Noto Serif JP", "YakuHanMP", "Noto Serif JP", "游明朝 Medium", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif;
  font-weight: 900 !important;
}

.font_maru {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 900;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 1.1428571429vw;
  }
}
@media screen and (max-width: 500px) {
  body {
    font-size: 3.4vw;
  }
}
:root {
  --duration: 1.2s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0s;
  }
  * {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}
.delay_list li {
  opacity: 0;
  /* transform: translateY(30px);
  transition:
      opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); */
}
.delay_list.on li {
  /* opacity: 1;
  transform: translateY(0); */
}
.delay_list.on li:nth-child(1) {
  transition-delay: 0.1s;
}
.delay_list.on li:nth-child(2) {
  transition-delay: 0.2s;
}
.delay_list.on li:nth-child(3) {
  transition-delay: 0.3s;
}
.delay_list.on li:nth-child(4) {
  transition-delay: 0.4s;
}
.delay_list.on li:nth-child(5) {
  transition-delay: 0.5s;
}
.delay_list.on li:nth-child(6) {
  transition-delay: 0.6s;
}
.delay_list.on li:nth-child(7) {
  transition-delay: 0.7s;
}
.delay_list.on li:nth-child(8) {
  transition-delay: 0.8s;
}
.delay_list.on li:nth-child(9) {
  transition-delay: 0.9s;
}
.delay_list.on li:nth-child(10) {
  transition-delay: 1s;
}
.delay_list.on li:nth-child(11) {
  transition-delay: 1.1s;
}
.delay_list.on li:nth-child(12) {
  transition-delay: 1.2s;
}
.delay_list.on li:nth-child(13) {
  transition-delay: 1.3s;
}
.delay_list.on li:nth-child(14) {
  transition-delay: 1.4s;
}
.delay_list.on li:nth-child(15) {
  transition-delay: 1.5s;
}
.delay_list.on li:nth-child(16) {
  transition-delay: 1.6s;
}
.delay_list.on li:nth-child(17) {
  transition-delay: 1.7s;
}
.delay_list.on li:nth-child(18) {
  transition-delay: 1.8s;
}
.delay_list.on li:nth-child(19) {
  transition-delay: 1.9s;
}
.delay_list.on li:nth-child(20) {
  transition-delay: 2s;
}

.act01,
.act02,
.act03,
.act04,
.act05,
.act06,
.act07,
.act08,
.act09,
.act10,
.act {
  opacity: 0;
  transition-duration: 0ms;
  transition-property: opacity, transform;
  transform: scale(1);
}
.act01:before, .act01.on,
.act02:before,
.act02.on,
.act03:before,
.act03.on,
.act04:before,
.act04.on,
.act05:before,
.act05.on,
.act06:before,
.act06.on,
.act07:before,
.act07.on,
.act08:before,
.act08.on,
.act09:before,
.act09.on,
.act10:before,
.act10.on,
.act:before,
.act.on {
  animation-delay: 0s;
  transition-duration: 500ms;
}
.act01.set,
.act02.set,
.act03.set,
.act04.set,
.act05.set,
.act06.set,
.act07.set,
.act08.set,
.act09.set,
.act10.set,
.act.set {
  opacity: 0;
}
.act01.set.on,
.act02.set.on,
.act03.set.on,
.act04.set.on,
.act05.set.on,
.act06.set.on,
.act07.set.on,
.act08.set.on,
.act09.set.on,
.act10.set.on,
.act.set.on {
  opacity: 1;
  transition-duration: 1500ms;
}
.act01.set.first,
.act02.set.first,
.act03.set.first,
.act04.set.first,
.act05.set.first,
.act06.set.first,
.act07.set.first,
.act08.set.first,
.act09.set.first,
.act10.set.first,
.act.set.first {
  opacity: 1;
  transition-duration: 500ms;
}
.act01.slow,
.act02.slow,
.act03.slow,
.act04.slow,
.act05.slow,
.act06.slow,
.act07.slow,
.act08.slow,
.act09.slow,
.act10.slow,
.act.slow {
  transition-duration: 3500ms !important;
}
.act01.delay_1,
.act02.delay_1,
.act03.delay_1,
.act04.delay_1,
.act05.delay_1,
.act06.delay_1,
.act07.delay_1,
.act08.delay_1,
.act09.delay_1,
.act10.delay_1,
.act.delay_1 {
  transition-delay: 0.3s;
}
.act01.delay_1 .set.on, .act01.delay_1:before, .act01.delay_1.on,
.act02.delay_1 .set.on,
.act02.delay_1:before,
.act02.delay_1.on,
.act03.delay_1 .set.on,
.act03.delay_1:before,
.act03.delay_1.on,
.act04.delay_1 .set.on,
.act04.delay_1:before,
.act04.delay_1.on,
.act05.delay_1 .set.on,
.act05.delay_1:before,
.act05.delay_1.on,
.act06.delay_1 .set.on,
.act06.delay_1:before,
.act06.delay_1.on,
.act07.delay_1 .set.on,
.act07.delay_1:before,
.act07.delay_1.on,
.act08.delay_1 .set.on,
.act08.delay_1:before,
.act08.delay_1.on,
.act09.delay_1 .set.on,
.act09.delay_1:before,
.act09.delay_1.on,
.act10.delay_1 .set.on,
.act10.delay_1:before,
.act10.delay_1.on,
.act.delay_1 .set.on,
.act.delay_1:before,
.act.delay_1.on {
  animation-delay: 0.3s;
  transition-delay: 0.3s;
}
.act01.delay_2,
.act02.delay_2,
.act03.delay_2,
.act04.delay_2,
.act05.delay_2,
.act06.delay_2,
.act07.delay_2,
.act08.delay_2,
.act09.delay_2,
.act10.delay_2,
.act.delay_2 {
  transition-delay: 0.6s;
}
.act01.delay_2 .set.on, .act01.delay_2:before, .act01.delay_2.on,
.act02.delay_2 .set.on,
.act02.delay_2:before,
.act02.delay_2.on,
.act03.delay_2 .set.on,
.act03.delay_2:before,
.act03.delay_2.on,
.act04.delay_2 .set.on,
.act04.delay_2:before,
.act04.delay_2.on,
.act05.delay_2 .set.on,
.act05.delay_2:before,
.act05.delay_2.on,
.act06.delay_2 .set.on,
.act06.delay_2:before,
.act06.delay_2.on,
.act07.delay_2 .set.on,
.act07.delay_2:before,
.act07.delay_2.on,
.act08.delay_2 .set.on,
.act08.delay_2:before,
.act08.delay_2.on,
.act09.delay_2 .set.on,
.act09.delay_2:before,
.act09.delay_2.on,
.act10.delay_2 .set.on,
.act10.delay_2:before,
.act10.delay_2.on,
.act.delay_2 .set.on,
.act.delay_2:before,
.act.delay_2.on {
  animation-delay: 0.6s;
  transition-delay: 0.6s;
}
.act01.delay_3,
.act02.delay_3,
.act03.delay_3,
.act04.delay_3,
.act05.delay_3,
.act06.delay_3,
.act07.delay_3,
.act08.delay_3,
.act09.delay_3,
.act10.delay_3,
.act.delay_3 {
  transition-delay: 0.9s;
}
.act01.delay_3 .set.on, .act01.delay_3:before, .act01.delay_3.on,
.act02.delay_3 .set.on,
.act02.delay_3:before,
.act02.delay_3.on,
.act03.delay_3 .set.on,
.act03.delay_3:before,
.act03.delay_3.on,
.act04.delay_3 .set.on,
.act04.delay_3:before,
.act04.delay_3.on,
.act05.delay_3 .set.on,
.act05.delay_3:before,
.act05.delay_3.on,
.act06.delay_3 .set.on,
.act06.delay_3:before,
.act06.delay_3.on,
.act07.delay_3 .set.on,
.act07.delay_3:before,
.act07.delay_3.on,
.act08.delay_3 .set.on,
.act08.delay_3:before,
.act08.delay_3.on,
.act09.delay_3 .set.on,
.act09.delay_3:before,
.act09.delay_3.on,
.act10.delay_3 .set.on,
.act10.delay_3:before,
.act10.delay_3.on,
.act.delay_3 .set.on,
.act.delay_3:before,
.act.delay_3.on {
  animation-delay: 0.9s;
  transition-delay: 0.9s;
}
.act01.delay_4,
.act02.delay_4,
.act03.delay_4,
.act04.delay_4,
.act05.delay_4,
.act06.delay_4,
.act07.delay_4,
.act08.delay_4,
.act09.delay_4,
.act10.delay_4,
.act.delay_4 {
  transition-delay: 1.2s;
}
.act01.delay_4 .set.on, .act01.delay_4:before, .act01.delay_4.on,
.act02.delay_4 .set.on,
.act02.delay_4:before,
.act02.delay_4.on,
.act03.delay_4 .set.on,
.act03.delay_4:before,
.act03.delay_4.on,
.act04.delay_4 .set.on,
.act04.delay_4:before,
.act04.delay_4.on,
.act05.delay_4 .set.on,
.act05.delay_4:before,
.act05.delay_4.on,
.act06.delay_4 .set.on,
.act06.delay_4:before,
.act06.delay_4.on,
.act07.delay_4 .set.on,
.act07.delay_4:before,
.act07.delay_4.on,
.act08.delay_4 .set.on,
.act08.delay_4:before,
.act08.delay_4.on,
.act09.delay_4 .set.on,
.act09.delay_4:before,
.act09.delay_4.on,
.act10.delay_4 .set.on,
.act10.delay_4:before,
.act10.delay_4.on,
.act.delay_4 .set.on,
.act.delay_4:before,
.act.delay_4.on {
  animation-delay: 1.2s;
  transition-delay: 1.2s;
}
.act01.delay_5,
.act02.delay_5,
.act03.delay_5,
.act04.delay_5,
.act05.delay_5,
.act06.delay_5,
.act07.delay_5,
.act08.delay_5,
.act09.delay_5,
.act10.delay_5,
.act.delay_5 {
  transition-delay: 1.4s;
}
.act01.delay_5 .set.on, .act01.delay_5:before, .act01.delay_5.on,
.act02.delay_5 .set.on,
.act02.delay_5:before,
.act02.delay_5.on,
.act03.delay_5 .set.on,
.act03.delay_5:before,
.act03.delay_5.on,
.act04.delay_5 .set.on,
.act04.delay_5:before,
.act04.delay_5.on,
.act05.delay_5 .set.on,
.act05.delay_5:before,
.act05.delay_5.on,
.act06.delay_5 .set.on,
.act06.delay_5:before,
.act06.delay_5.on,
.act07.delay_5 .set.on,
.act07.delay_5:before,
.act07.delay_5.on,
.act08.delay_5 .set.on,
.act08.delay_5:before,
.act08.delay_5.on,
.act09.delay_5 .set.on,
.act09.delay_5:before,
.act09.delay_5.on,
.act10.delay_5 .set.on,
.act10.delay_5:before,
.act10.delay_5.on,
.act.delay_5 .set.on,
.act.delay_5:before,
.act.delay_5.on {
  animation-delay: 1.4s;
  transition-delay: 1.4s;
}
.act01.delay_6,
.act02.delay_6,
.act03.delay_6,
.act04.delay_6,
.act05.delay_6,
.act06.delay_6,
.act07.delay_6,
.act08.delay_6,
.act09.delay_6,
.act10.delay_6,
.act.delay_6 {
  transition-delay: 1.6s;
}
.act01.delay_6 .set.on, .act01.delay_6:before, .act01.delay_6.on,
.act02.delay_6 .set.on,
.act02.delay_6:before,
.act02.delay_6.on,
.act03.delay_6 .set.on,
.act03.delay_6:before,
.act03.delay_6.on,
.act04.delay_6 .set.on,
.act04.delay_6:before,
.act04.delay_6.on,
.act05.delay_6 .set.on,
.act05.delay_6:before,
.act05.delay_6.on,
.act06.delay_6 .set.on,
.act06.delay_6:before,
.act06.delay_6.on,
.act07.delay_6 .set.on,
.act07.delay_6:before,
.act07.delay_6.on,
.act08.delay_6 .set.on,
.act08.delay_6:before,
.act08.delay_6.on,
.act09.delay_6 .set.on,
.act09.delay_6:before,
.act09.delay_6.on,
.act10.delay_6 .set.on,
.act10.delay_6:before,
.act10.delay_6.on,
.act.delay_6 .set.on,
.act.delay_6:before,
.act.delay_6.on {
  animation-delay: 1.6s;
  transition-delay: 1.6s;
}

.inlist {
  transition-timing-function: ease-out;
  transition-duration: 1.2s !important;
}
.inlist.on {
  opacity: 1;
  transition-delay: 0.4s;
}
.inlist.first {
  opacity: 1;
}
.inlist li {
  opacity: 0;
  transform: translateY(30px);
  transition-delay: 0.4s;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.inlist.on li {
  opacity: 1;
  transform: translateY(0);
}
.inlist.on li:nth-child(1) {
  transition-delay: 0.08s;
}
.inlist.on li:nth-child(2) {
  transition-delay: 0.16s;
}
.inlist.on li:nth-child(3) {
  transition-delay: 0.24s;
}
.inlist.on li:nth-child(4) {
  transition-delay: 0.32s;
}
.inlist.on li:nth-child(5) {
  transition-delay: 0.4s;
}
.inlist.on li:nth-child(6) {
  transition-delay: 0.48s;
}
.inlist.on li:nth-child(7) {
  transition-delay: 0.56s;
}
.inlist.on li:nth-child(8) {
  transition-delay: 0.64s;
}
.inlist.on li:nth-child(9) {
  transition-delay: 0.72s;
}
.inlist.on li:nth-child(10) {
  transition-delay: 0.8s;
}
.inlist.on li:nth-child(11) {
  transition-delay: 0.88s;
}
.inlist.on li:nth-child(12) {
  transition-delay: 0.96s;
}
.inlist.on li:nth-child(13) {
  transition-delay: 1.04s;
}
.inlist.on li:nth-child(14) {
  transition-delay: 1.12s;
}
.inlist.on li:nth-child(15) {
  transition-delay: 1.2s;
}
.inlist.on li:nth-child(16) {
  transition-delay: 1.28s;
}
.inlist.on li:nth-child(17) {
  transition-delay: 1.36s;
}
.inlist.on li:nth-child(18) {
  transition-delay: 1.44s;
}
.inlist.on li:nth-child(19) {
  transition-delay: 1.52s;
}
.inlist.on li:nth-child(20) {
  transition-delay: 1.6s;
}

.inup {
  transform: translate(0, 80px);
  transition-timing-function: ease-out;
  transition-duration: 1.2s !important;
}
.inup.on {
  opacity: 1;
  transform: translate(0, 0);
}
.inup.first {
  opacity: 1;
  transform: translate(0, 0);
}

.indown {
  transform: translate(0, -80px);
  transition-timing-function: ease-out;
  transition-duration: 1.2s !important;
}
.indown.on {
  opacity: 1;
  transform: translate(0, 0);
}
.indown.first {
  opacity: 1;
  transform: translate(0, 0);
}

.inleft {
  transform: translate(-50px, 0);
  transition-duration: 1.2s !important;
}
.inleft.on {
  opacity: 1;
  transform: translate(0, 0);
}
.inleft.first {
  opacity: 1;
  transform: translate(0, 0);
  transition-duration: 2s;
}

.inright {
  transform: translate(50px, 0);
  transition-duration: 1.2s !important;
}
.inright.on {
  opacity: 1;
  transform: translate(0, 0);
}
.inright.first {
  opacity: 1;
  transform: translate(0, 0);
  transition-duration: 4s;
}

.slide_l {
  position: relative;
}
.slide_l.on {
  opacity: 1;
}
.slide_l.on:before {
  content: "";
  position: absolute;
  background-color: #6AC3A3;
  animation-name: slide_l;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.slide_l.first {
  opacity: 1;
}
.slide_l.first:before {
  content: "";
  position: absolute;
  background-color: #6AC3A3;
  animation-name: slide_l;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  width: 100%;
  height: 100%;
  z-index: 1;
}

@keyframes slide_l {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
.slide_r {
  position: relative;
}
.slide_r.on .actset {
  opacity: 1;
  transition-delay: 2.6s;
}
.slide_r.on {
  opacity: 1;
}
.slide_r.on:before {
  content: "";
  position: absolute;
  background-color: #6AC3A3;
  animation-name: slide_r;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  width: 100%;
  height: 100%;
  z-index: 1;
}

@keyframes slide_r {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}
.slide_t {
  position: relative;
}
.slide_t.on .actset {
  opacity: 1;
  transition-delay: 2.6s;
}
.slide_t.on {
  opacity: 1;
}
.slide_t.on:before {
  content: "";
  position: absolute;
  background-color: #3DC1D1;
  animation-name: slide_t;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  width: 100%;
  height: 100%;
  z-index: 1;
}

@keyframes slide_t {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }
  50% {
    transform-origin: top;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: bottom;
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}
.slide_b {
  position: relative;
}
.slide_b.on {
  opacity: 1;
}
.slide_b.on:before {
  content: "";
  position: absolute;
  background-color: #fff;
  animation-name: slide_b;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  width: 100%;
  height: 100%;
  z-index: 1;
}

@keyframes slide_b {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}
.zoom_out {
  transition-property: opacity, transform;
  transform: scale(1.1);
  transition-duration: 1.2s !important;
}
.zoom_out.on {
  opacity: 1;
  transition-delay: 0.6s;
  transform: scale(1);
  animation-delay: 0.5s;
  animation-duration: 0.5s;
  transition: 2.5s;
}
.zoom_out.first {
  opacity: 1;
  transition-delay: 0.6s;
  transform: scale(1);
  animation-delay: 0.5s;
  animation-duration: 0.5s;
  transition: 3.5s;
}

.zoom_in {
  transition-property: opacity, transform;
  transform: scale(0.9);
  transition-duration: 1.2s !important;
}
.zoom_in.on {
  opacity: 1;
  transition-delay: 0.6s;
  transform: scale(1);
  animation-delay: 0.5s;
  animation-duration: 0.5s;
  transition: 0.5s;
}
.zoom_in.first {
  opacity: 1;
  transition-delay: 1.6s;
  transform: scale(1);
  animation-delay: 0.5s;
  animation-duration: 3.5s;
  transition: 3.5s;
}

.blur.on {
  opacity: 0;
  animation-name: anime-blur;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.blur.first {
  opacity: 0;
  animation-name: anime-blur;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes anime-blur {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2em);
    transform: translateY(-2em);
    filter: blur(2.5rem);
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    filter: blur(0);
    transform: scale(1);
  }
}
.lineup {
  letter-spacing: -3rem !important;
  transition-duration: 1.2s !important;
  justify-content: center;
}
.lineup.on {
  letter-spacing: 0 !important;
  display: flex;
  opacity: 1;
  transition: 1s;
}
.lineup.first {
  letter-spacing: 0 !important;
  display: flex;
  opacity: 1;
  transition: 2s;
}

.flip_l {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  transition-duration: 1500s;
}
.flip_l.on {
  opacity: 1;
  perspective-origin: left center;
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
}

.flip_r {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
}
.flip_r.on {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
}

.flip_b {
  transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
}
.flip_b.on {
  transform: perspective(2500px) rotateX(0);
  opacity: 1;
}

.rotateY {
  transform: rotateY(0);
  opacity: 0;
}
.rotateY.on {
  transform: rotateY(-360deg);
  opacity: 1;
}

.txt_split.type_popup.on span {
  opacity: 0;
  animation: type_popup 0.3s ease forwards;
  -webkit-animation: type_popup 0.3s ease forwards;
  display: inline-block;
}
.txt_split.type_popup.on {
  opacity: 1;
}
.txt_split.type_popup.first span {
  opacity: 0;
  animation: type_popup 0.3s ease forwards;
  -webkit-animation: type_popup 0.3s ease forwards;
  display: inline-block;
}
.txt_split.type_popup.first {
  opacity: 1;
}
.txt_split.type_up.on span {
  opacity: 0;
  animation: type_up 0.3s ease forwards;
  -webkit-animation: type_up 0.3s ease forwards;
  display: inline-block;
}
.txt_split.type_up.on {
  opacity: 1;
}
.txt_split.type_up.first span {
  opacity: 0;
  animation: type_up 0.3s ease forwards;
  -webkit-animation: type_up 0.3s ease forwards;
  display: inline-block;
}
.txt_split.type_up.first {
  opacity: 1;
}
.txt_split.type_blur.on span {
  opacity: 0;
  -webkit-animation: catch-anime-blur 0.8s ease-in 0.8s forwards;
  animation: catch-anime-blur 0.8s ease-in 0.8s forwards;
  display: inline-block;
}
.txt_split.type_blur.on {
  opacity: 1;
}
.txt_split.type_blur.first span {
  opacity: 0;
  -webkit-animation: catch-anime-blur 0.8s ease-in 2.8s forwards;
  animation: catch-anime-blur 0.8s ease-in 2.8s forwards;
  display: inline-block;
}
.txt_split.type_blur.first {
  opacity: 1;
}
.txt_split.type_lineup {
  letter-spacing: -10em !important;
}
.txt_split.type_lineup.on {
  opacity: 1;
}
.txt_split.type_lineup.on span {
  letter-spacing: 0 !important;
  opacity: 1;
  transition: 2s -1.5s !important;
}
.txt_split.type_lineup.first {
  opacity: 1;
}
.txt_split.type_lineup.first span {
  letter-spacing: 0 !important;
  opacity: 1;
  transition: 0.2s;
}
.txt_split.type_box_big span, .txt_split.type_box span {
  background-color: #6AC3A3;
}
.txt_split.type_box_sub_big span, .txt_split.type_box_sub span {
  background-color: #3DC1D1;
}
.txt_split.type_box span, .txt_split.type_box_sub span {
  line-height: 50px;
  height: 50px;
  width: 50px;
  text-align: center;
  font-size: 120%;
  color: #fff;
  margin: 3px;
}
@media screen and (max-width: 500px) {
  .txt_split.type_box span, .txt_split.type_box_sub span {
    line-height: 2;
    height: 2em;
    width: 2em;
    font-size: 120%;
    margin: 1px;
  }
}
.txt_split.type_box.on span, .txt_split.type_box_sub.on span {
  opacity: 0;
  -webkit-animation: catch-anime 0.8s ease-in 2.8s forwards;
  animation: catch-anime 0.8s ease-in 2.8s forwards;
  display: inline-block;
  transition: 0.2s;
}
.txt_split.type_box.on, .txt_split.type_box_sub.on {
  opacity: 1;
}
.txt_split.type_box.first span, .txt_split.type_box_sub.first span {
  opacity: 0;
  -webkit-animation: catch-anime 0.8s ease-in 2.8s forwards;
  animation: catch-anime 0.8s ease-in 2.8s forwards;
  display: inline-block;
  transition: 0.2s;
}
.txt_split.type_box.first, .txt_split.type_box_sub.first {
  opacity: 1;
}
.txt_split.type_box.radius span, .txt_split.type_box_sub.radius span {
  border-radius: 5px;
  font-size: 90%;
}
.txt_split.type_box_big span, .txt_split.type_box_sub_big span {
  line-height: 1.6em;
  width: 1.6em;
  text-align: center;
  color: #fff;
  margin: 3px;
  border-radius: 10px;
}
@media screen and (max-width: 500px) {
  .txt_split.type_box_big span, .txt_split.type_box_sub_big span {
    line-height: 1.6em;
    width: 1.6em;
  }
}
.txt_split.type_box_big.on span, .txt_split.type_box_sub_big.on span {
  opacity: 0;
  -webkit-animation: catch-anime 0.8s ease-in 2.8s forwards;
  animation: catch-anime 0.8s ease-in 2.8s forwards;
  display: inline-block;
  transition: 0.2s;
}
.txt_split.type_box_big.on, .txt_split.type_box_sub_big.on {
  opacity: 1;
}
.txt_split.type_box_big.first span, .txt_split.type_box_sub_big.first span {
  opacity: 0;
  -webkit-animation: catch-anime 0.8s ease-in 2.8s forwards;
  animation: catch-anime 0.8s ease-in 2.8s forwards;
  display: inline-block;
  transition: 0.2s;
}
.txt_split.type_box_big.first, .txt_split.type_box_sub_big.first {
  opacity: 1;
}
.txt_split.type_glow.on span {
  opacity: 0;
  animation: catch-anime-glow 0s ease-out forwards;
}
.txt_split.type_glow.on {
  opacity: 1;
}
.txt_split.type_glow.first span {
  opacity: 0;
  animation: catch-anime-glow 1s ease-in forwards;
}
.txt_split.type_glow.first {
  opacity: 1;
}

.glowAnime span {
  opacity: 0;
}

.glowAnime.glow span {
  animation: catch-anime-glow 1s ease-out forwards;
}

@keyframes catch-anime-glow {
  0% {
    opacity: 0;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px #fff, 0 0 15px #fff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 10px transparent, 0 0 15px transparent;
  }
}
@keyframes type_popup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  80% {
    opacity: 1;
    -webkit-transform: translateY(-20%);
    transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes type_up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes catch-anime-blur {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    filter: blur(1.5rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    filter: blur(0);
  }
}
.logo_animation01 {
  position: relative;
  width: 100px;
  height: 100px;
}
.logo_animation01.size_m {
  width: 300px;
  height: 300px;
}
.logo_animation01 li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: logo_animation01 1.5s ease infinite alternate forwards;
  animation-iteration-count: 1;
}
.logo_animation01 li:nth-child(1) {
  animation-delay: 0s;
  z-index: 0;
}
.logo_animation01 li:nth-child(2) {
  animation-delay: 0.6s;
  z-index: 1;
}
.logo_animation01 li:nth-child(3) {
  animation-delay: 1s;
  z-index: 2;
}

@keyframes logo_animation01 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.logo_animation02 {
  position: relative;
  width: 100px;
  height: 100px;
}
.logo_animation02 li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation-iteration-count: 1;
}
.logo_animation02 li:nth-child(1) {
  animation-delay: 0s;
  z-index: 0;
  animation: logo_animation02b 1.5s ease infinite alternate forwards;
}
.logo_animation02 li:nth-child(2) {
  animation-delay: 0.6s;
  z-index: 1;
  animation: logo_animation02c 1.5s ease infinite alternate forwards;
}
.logo_animation02 li:nth-child(3) {
  animation-delay: 5.2s;
  z-index: 2;
  animation: logo_animation02a 3.5s ease infinite alternate forwards;
}

@keyframes logo_animation02a {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes logo_animation02b {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  80% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes logo_animation02c {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  80% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.logo_animation03 {
  position: relative;
  width: 100%;
  height: 500px;
}
.logo_animation03 li {
  opacity: 0;
  animation: logo_animation01 1.5s ease infinite alternate forwards;
  animation-iteration-count: 1;
  text-align: center;
  margin: 0 auto 60px;
}
.logo_animation03 li:nth-child(1) {
  animation-delay: 0s;
  z-index: 0;
  line-height: 1.4;
  margin: 0 auto 60px;
  letter-spacing: 0.5em;
}
.logo_animation03 li:nth-child(2) {
  animation-delay: 0.3s;
  z-index: 1;
  margin: 0 auto 60px;
}
.logo_animation03 li:nth-child(3) {
  animation-delay: 0.6s;
  z-index: 2;
  font-size: 120%;
  line-height: 1.2;
  margin: 0 auto 0;
  letter-spacing: 0.5em;
}

/* ============================================================
   スクロールポップアップアニメーション
   .act と併用して使う追加アニメーションクラス
   使い方: <div class="act slide_up">
   JSが要素の入場時に .on クラスを付与する
   ============================================================ */
/* ============================================================
   @keyframes 定義
   ============================================================ */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ============================================================
   アニメーションクラス（.act と併用）
   ============================================================ */
/* --- スライドアップ（下から上へ）--- */
.slide_up {
  transform: translateY(40px);
  transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out;
}
.slide_up.on {
  opacity: 1;
  transform: translateY(0);
}
.slide_up.first {
  opacity: 1;
  transform: translateY(0);
}

/* --- スライドアップ（小さい移動量・コンテンツブロック用）--- */
.slide_up_sm {
  transform: translateY(20px);
  transition: opacity 1s ease-in-out 0.2s, transform 1s ease-in-out 0.2s;
}
.slide_up_sm.on {
  opacity: 1;
  transform: translateY(0);
}
.slide_up_sm.first {
  opacity: 1;
  transform: translateY(0);
}

/* --- バウンスイン（ポン！と出る）--- */
.bounce_in.on {
  opacity: 1;
  animation: bounceIn 0.67s both;
  animation-iteration-count: 1;
}
.bounce_in.first {
  opacity: 1;
  animation: bounceIn 0.67s both;
  animation-iteration-count: 1;
}

/* --- バウンスイン・遅延あり（吹き出し・キャラクター用）--- */
.bounce_in_delay.on {
  opacity: 1;
  animation: bounceIn 0.5s 0.75s both;
  animation-iteration-count: 1;
}
.bounce_in_delay.first {
  opacity: 1;
  animation: bounceIn 0.5s 0.75s both;
  animation-iteration-count: 1;
}

/* --- バウンスインアップ（下から跳ねながら上昇）--- */
.bounce_in_up.on {
  opacity: 1;
  animation: bounceInUp 0.75s both;
  animation-iteration-count: 1;
}
.bounce_in_up.first {
  opacity: 1;
  animation: bounceInUp 0.75s both;
  animation-iteration-count: 1;
}

/* --- フェードイン（ゆっくり現れる）--- */
.fade_in.on {
  opacity: 1;
  animation: fadeIn 0.75s both;
  animation-iteration-count: 1;
}
.fade_in.first {
  opacity: 1;
  animation: fadeIn 0.75s both;
  animation-iteration-count: 1;
}

/* --- 画像フェードイン（少し遅延）--- */
.fade_in_img {
  transition: opacity 0.75s ease-in-out 0.5s;
}
.fade_in_img.on {
  opacity: 1;
}
.fade_in_img.first {
  opacity: 1;
}

/* --- リストアイテム（マージンアニメーション付き）--- */
.list_item {
  margin-bottom: 72px;
  transition: opacity 1s, margin 1s;
}
.list_item.on {
  opacity: 1;
  margin-bottom: 72px;
}
.list_item.first {
  opacity: 1;
  margin-bottom: 72px;
}

/*# sourceMappingURL=animation_scroll.css.map */