.hit-guide-bot .hit-guide-mascot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hit-guide-bot .eyeL {
  transform-box: view-box;
  transform-origin: 619px 444px;
}

.hit-guide-bot .eyeR {
  transform-box: view-box;
  transform-origin: 1071px 475px;
}

.hit-guide-bot .blinking .eye {
  animation: hit-guide-blink 4.2s infinite;
}

@keyframes hit-guide-blink {
  0%,
  93%,
  100% {
    transform: scaleY(1);
  }

  96% {
    transform: scaleY(.08);
  }
}

.hit-guide-bot .mouth {
  transform-box: view-box;
  transform-origin: 800px 672px;
}

.hit-guide-bot .talking .mouth {
  animation: hit-guide-talk .3s ease-in-out infinite;
}

@keyframes hit-guide-talk {
  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(.55);
  }
}

.hit-guide-bot .arm {
  transform-box: view-box;
  transform-origin: 1450px 1070px;
}

.hit-guide-bot .waving .arm {
  animation: hit-guide-wave .62s ease-in-out infinite;
}

@keyframes hit-guide-wave {
  0%,
  100% {
    transform: rotate(-9deg);
  }

  50% {
    transform: rotate(11deg);
  }
}

.hit-guide-bot .hit-guide-mascot--float {
  animation: hit-guide-float 3.6s ease-in-out infinite;
}

@keyframes hit-guide-float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-8px) rotate(-1.2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hit-guide-bot .hit-guide-mascot,
  .hit-guide-bot .hit-guide-mascot * {
    animation: none !important;
  }
}