@charset "UTF-8";
p.ani {
  opacity: 0;
  transform: translate(0, 0.6em);
}
p.ani.animation {
  animation: fadeup 0.4s 0.4s ease-out forwards;
}

@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translate(0, 0.6em);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes marker-ani01 {
  0% {
    background-size: 0 40%; /* マーカーの横幅 / 縦幅 */
  }
  100% {
    background-size: 100% 90%;
  }
}
span.morkerani.ani {
  /*		padding-bottom: .25em;*/
  padding-bottom: 0em;
  background-image: linear-gradient(90deg, #fff697, #fff697); /* マーカーの色を指定 */
  background-repeat: no-repeat;
  background-position: left top 80%; /* マーカーの発生位置を左下に設定 */
  background-size: 0 40%; /* マーカーの横幅 / 縦幅 */
}
span.morkerani.animation {
  animation: marker-ani01 1.4s 0.8s ease forwards;
}

div.yondensan-illust08.ani,
div.yondensan-illust06.ani,
div.yondensan-illust04.ani,
div.yondensan-illust03.ani,
div.yondensan-illust02.ani,
div.yondensan-illust01.ani,
div.koduu-illust10.ani,
div.koduu-illust09.ani,
div.koduu-illust08.ani,
div.koduu-illust06.ani,
div.koduu-illust05.ani,
div.koduu-illust03.ani,
div.koduu-illust02.ani,
div.koduu-illust01.ani {
  transform-origin: center center;
  transform: translate(0, 0) scale(0);
}
div.yondensan-illust08.animation,
div.yondensan-illust06.animation,
div.yondensan-illust04.animation,
div.yondensan-illust03.animation,
div.yondensan-illust02.animation,
div.yondensan-illust01.animation,
div.koduu-illust10.animation,
div.koduu-illust09.animation,
div.koduu-illust08.animation,
div.koduu-illust06.animation,
div.koduu-illust05.animation,
div.koduu-illust03.animation,
div.koduu-illust02.animation,
div.koduu-illust01.animation {
  animation: scale-illust-scaleA 0.4s ease-out forwards;
}

@keyframes scale-illust-scaleA {
  0% {
    transform-origin: center center;
    transform: translate(0, 0) scale(0);
  }
  80% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(1.2);
  }
  100% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(1);
  }
}
div.koduu-illust04.ani {
  opacity: 0;
  transform: translate(100%, 0);
}
div.koduu-illust04.ani.animation {
  animation: slide-in-illust 0.8s 0.2s ease-out forwards;
}
@media screen and (min-width: 768px) {
  div.koduu-illust04.ani.animation {
    animation: slide-in-illust 1.2s 0.2s ease-out forwards;
  }
}

div.setsuyaku-box03 p.txt span.kozoo.ani {
  opacity: 0;
  transform: translate(50%, 0);
}
div.setsuyaku-box03 p.txt span.kozoo.ani.animation {
  animation: slide-in-illust 0.8s 0.2s ease-out forwards;
}
@media screen and (min-width: 768px) {
  div.setsuyaku-box03 p.txt span.kozoo.ani.animation {
    animation: slide-in-illust 1.2s 0.2s ease-out forwards;
  }
}

@keyframes slide-in-illust {
  0% {
    opacity: 0;
    transform-origin: right center;
    transform: translate(50%, 0);
  }
  70% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(-2%, 0);
  }
  75% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
  80% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(-2%, 0);
  }
  85% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
  90% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
  95% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(-2%, 0);
  }
  100% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
}
div.irregular-box02-img01.ani {
  opacity: 0;
  transform: translate(20%, 0);
}
div.irregular-box02-img01.ani.animation {
  animation: slide-in-buruburu 1.2s 0.2s ease-out forwards;
}
@media screen and (min-width: 768px) {
  div.irregular-box02-img01.ani.animation {
    animation: slide-in-buruburu 1.6s 0.2s ease-out forwards;
  }
}

p.irregular-box02-txt01.ani {
  opacity: 0;
  transform-origin: center center;
  transform: translate(0, 0) scale(0);
}
p.irregular-box02-txt01.ani.animation {
  animation: slide-in-scaleA 1.2s 0.2s ease-out forwards;
}
@media screen and (min-width: 768px) {
  p.irregular-box02-txt01.ani.animation {
    animation: slide-in-scaleA 1.2s 0.2s ease-out forwards;
  }
}

p.irregular-box02-txt02.ani {
  opacity: 1;
  transform-origin: center center;
}
p.irregular-box02-txt02.ani.animation {
  animation: buruburu01 1.2s 0.2s ease-out forwards;
}
@media screen and (min-width: 768px) {
  p.irregular-box02-txt02.ani.animation {
    animation: buruburu01 1.4s 0.2s ease-out forwards;
  }
}

@keyframes slide-in-buruburu {
  0% {
    opacity: 0;
    transform-origin: right center;
    transform: translate(20%, 0);
  }
  100% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
}
@keyframes slide-in-scaleA {
  0% {
    transform-origin: center center;
    transform: translate(0, 0) scale(0);
  }
  30% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(1.2);
  }
  40% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(0.7);
  }
  50% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(1.2);
  }
  60% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(0.7);
  }
  70% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(1.2);
  }
  80% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(0.7);
  }
  90% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(1.2);
  }
  100% {
    opacity: 1;
    transform-origin: center center;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes buruburu01 {
  0% {
    transform: translate(0%, 0);
  }
  5% {
    transform: translate(3%, 0) rotate(3deg);
  }
  10% {
    transform: translate(0%, 0) rotate(0deg);
  }
  15% {
    transform: translate(-3%, 0) rotate(-3deg);
  }
  20% {
    transform: translate(0%, 0) rotate(0deg);
  }
  25% {
    transform: translate(3%, 0) rotate(3deg);
  }
  30% {
    transform: translate(0%, 0) rotate(0deg);
  }
  35% {
    transform: translate(-3%, 0) rotate(-3deg);
  }
  40% {
    transform: translate(0%, 0) rotate(0deg);
  }
  45% {
    transform: translate(3%, 0) rotate(3deg);
  }
  50% {
    transform: translate(0%, 0) rotate(0deg);
  }
  55% {
    transform: translate(-3%, 0) rotate(-3deg);
  }
  60% {
    transform: translate(0%, 0) rotate(0deg);
  }
  65% {
    transform: translate(3%, 0) rotate(3deg);
  }
  70% {
    transform: translate(0%, 0) rotate(0deg);
  }
  75% {
    transform: translate(-3%, 0) rotate(-3deg);
  }
  80% {
    transform: translate(0%, 0) rotate(0deg);
  }
  85% {
    transform: translate(3%, 0) rotate(3deg);
  }
  90% {
    transform: translate(0%, 0) rotate(0deg);
  }
  95% {
    transform: translate(-3%, 0) rotate(-3deg);
  }
  100% {
    transform: translate(0%, 0) rotate(0deg);
  }
}
div.irregular-box03-inner-img01.ani {
  opacity: 0;
  transform: translate(20%, 0);
}
div.irregular-box03-inner-img01.ani.animation {
  animation: slide-in-illust02 1.2s 0.2s ease-out forwards;
}
@media screen and (min-width: 768px) {
  div.irregular-box03-inner-img01.ani.animation {
    animation: slide-in-illust02 1.6s 0.2s ease-out forwards;
  }
}

@keyframes slide-in-illust02 {
  0% {
    opacity: 0;
    transform-origin: right center;
    transform: translate(20%, 0);
  }
  50% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
  55% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
  60% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(-2%, 0);
  }
  65% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
  70% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(-2%, 0);
  }
  75% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
  80% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(-2%, 0);
  }
  85% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
  90% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
  95% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(-2%, 0);
  }
  100% {
    opacity: 1;
    transform-origin: right center;
    transform: translate(0%, 0);
  }
}
p.irregular-box05-txt01.ani {
  transform-origin: center center;
  transform: translate(0, 0) scale(0);
}
p.irregular-box05-txt01.animation {
  animation: scale-illust-scaleA 0.8s 0.2s ease-out forwards;
}

p.irregular-box05-txt02.ani {
  transform-origin: center center;
  transform: translate(0, 0) scale(0);
}
p.irregular-box05-txt02.animation {
  animation: scale-illust-scaleA 0.6s 1.2s ease-out forwards;
}

div#new-pagetop.active {
  animation: flyaway 2s cubic-bezier(0.53, 0.16, 0.83, 0.33) forwards;
}

@keyframes flyaway {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  20% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  /*		10% {  transform: translateX(0) translateY(0) rotate(0deg);}
  		20% { transform: translateX(-30px) translateY(-3vh) rotate(-42deg); }
  		23% { transform: translateX(-50px) translateY(-6vh) rotate(-70deg); }
  		26% { transform: translateX(-55px) translateY(-9vh) rotate(-40deg); }
  		29% { transform: translateX(-60px) translateY(-12vh) rotate(0deg); }
  		32% { transform: translateX(-45px) translateY(-15vh) rotate(15deg); }
  		35% { transform: translateX(-30px) translateY(-18vh) rotate(25deg); }
  		38% { transform: translateX(-10px) translateY(-21vh) rotate(50deg); }
  		41% { transform: translateX(10px) translateY(-24vh) rotate(45deg); }
  		44% { transform: translateX(15px) translateY(-27vh) rotate(35deg); }
  		47% { transform: translateX(0px) translateY(-30vh) rotate(0deg); }
  		50% { transform: translateX(0px) translateY(-33vh) rotate(0deg); }*/
  /*		50% { transform: translateX(0px) translateY(-45vh) rotate(0deg); }
  		99% {
  		opacity: 1;
  		transform: translateX(0) translateY(-100vh) rotate(0deg) ;
  		}*/
  100% {
    transform: translateX(0) translateY(-100vh) rotate(0deg);
  }
}/*# sourceMappingURL=animation.css.map */