@charset "UTF-8";
/* CSS Document */
.js-svg-item {
  opacity: 0;
  transform: rotate(-8deg) translate(-3px, 0);
}
.js-svg-item.is-active {
  animation: katakata .5s forwards;
}
@keyframes katakata {
  0% {
    opacity: 0;
    transform: rotate(0deg) translate(0, 0);
  }
  34% {
    opacity: 1;
    transform: rotate(0deg) translate(0, 0);
  }
  35% {
    opacity: 1;
    transform: rotate(-1deg) translate(0, -2px);
  }
  69% {
    opacity: 1;
    transform: rotate(0deg) translate(0, -2px);
  }
  70% {
    opacity: 1;
    transform: rotate(1deg) translate(0, -1px);
  }
  99% {
    opacity: 1;
    transform: rotate(1deg) translate(0, -1px);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) translate(0, 0px);
  }
}
.anime-yura {
  animation: yurayura var(--in-out) infinite 4.5s forwards 4s;
}
.anime-yura2 {
  animation: yurayura var(--in-out) infinite 4s forwards 2s;
}
.anime-yura_asap{
  animation: yurayura var(--in-out) infinite 4.5s;
}
@keyframes yurayura {
  0% {
    transform: rotate(0);
  }
  5% {
    transform: rotate(-15deg);
  }
  10% {
    transform: rotate(15deg);
  }
  15% {
    transform: rotate(-15deg);
  }
  20% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
.anime-teku {
  animation: tekuteku var(--in-out) infinite 5s forwards 1s;
}
@keyframes tekuteku {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  5% {
    transform: translate(0, -.5rem) rotate(-6deg);
  }
  10% {
    transform: translate(0, .5rem) rotate(0);
  }
  15% {
    transform: translate(0, -1rem) rotate(3deg);
  }
  20% {
    transform: translate(0, 2rem) rotate(0);
  }
  25% {
    transform: translate(0, 0) rotate(0);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.anime-pici {
  animation: pitipiti var(--in-out) infinite 4s forwards 3s;
}
@keyframes pitipiti {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  5% {
    transform: translate(0, -15%) rotate(0);
  }
  7% {
    transform: translate(0, -15%) rotate(0);
  }
  9% {
    transform: translate(0, -15%) rotate(20deg);
  }
  12% {
    transform: translate(0, -15%) rotate(-20deg);
  }
  15% {
    transform: translate(0, -15%) rotate(20deg);
  }
  17% {
    transform: translate(0, -15%) rotate(-20deg);
  }
  19% {
    transform: translate(0, -15%) rotate(0);
  }
  25% {
    transform: translate(0, 0) rotate(0);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.anime-pici2 {
  animation: pitipiti2 var(--in-out) infinite 4s forwards 1s;
}
@keyframes pitipiti2 {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  5% {
    transform: translate(0, -10%) rotate(0);
  }
  7% {
    transform: translate(0, -10%) rotate(0);
  }
  9% {
    transform: translate(0, -10%) rotate(-10deg);
  }
  12% {
    transform: translate(0, -10%) rotate(10deg);
  }
  15% {
    transform: translate(0, -10%) rotate(-10deg);
  }
  17% {
    transform: translate(0, -10%) rotate(10deg);
  }
  19% {
    transform: translate(0, -10%) rotate(0);
  }
  25% {
    transform: translate(0, 0) rotate(0);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.anime-goro {
  animation: gorogoro var(--in-out) infinite 5s;
}
@keyframes gorogoro {
  0% {
    transform: translateX(-5%) rotate(0);
  }
  5% {
    transform: translateX(0) rotate(-15deg);
  }
  10% {
    transform: translateX(15%) rotate(0);
  }
  15% {
    transform: translateX(20%) rotate(20deg);
  }
  20% {
    transform: translateX(15%) rotate(0);
  }
  100% {
    transform: translateX(10%) rotate(0);
  }
}
.anime-boon {
  animation: boooom 1.6s steps(4, end) 3 forwards;
  transform-origin: 50% 60%;
}
@keyframes boooom {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  5% {
    transform: rotate(3deg) translateY(-2px);
  }
  10% {
    transform: rotate(-2deg) translateY(1px);
  }
  15% {
    transform: rotate(4deg) translateY(-3px);
  }
  20% {
    transform: rotate(-3deg) translateY(2px);
  }
  25% {
    transform: rotate(5deg) translateY(-4px);
  }
  30% {
    transform: rotate(-4deg) translateY(3px);
  }
  35% {
    transform: rotate(3deg) translateY(-2px);
  }
  40% {
    transform: rotate(-2deg) translateY(1px);
  }
  45% {
    transform: rotate(1deg) translateY(0);
  }
  50% {
    transform: rotate(0deg) translateY(0);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}
.anime-guwang {
  animation: guwang 2s infinite;
}
@keyframes guwang {
  0% {
    transform: scale(1);
  }
  6% {
    transform: scale(1.38);
  }
  12% {
    transform: scale(1);
  }
  18% {
    transform: scale(1.32);
  }
  24% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
.amine-rotate {
  animation: 8s linear infinite rotation;
}
@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes slidein {
  0% {
    left: -10%;
    bottom: 30%;
  }
  100% {
    left: 16%;
    bottom: 22.5%;
  }
}