.anime {
  width: 810px;
  height: 400px;
  background-color: #333;
  background: #fff url("../anime_img/06/bg.jpg") no-repeat left top;
  position: relative;
  overflow: hidden;
}

.catch {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 30px;
  animation: catch 9s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes catch {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  25% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  0% {
    transform: scale(1.8);
    opacity: 0;
  }
  25% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.logo2 {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 90px;
}

.logo {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 90px;
  animation: logo 4s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes logo {
  0% {
    opacity: 0.5;
  }
  66.666% {
    transform: scale(1.5);
    opacity: 0;
  }
  66.66667% {
    transform: scale(1);
    opacity: 0;
  }
  86.66667% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}
.dog1 {
  position: absolute;
  left: 15px;
  bottom: 30px;
}

.dog2 {
  position: absolute;
  left: 115px;
  bottom: 30px;
}

.dog3 {
  position: absolute;
  left: 215px;
  bottom: 30px;
}

.dog4 {
  position: absolute;
  left: 315px;
  bottom: 30px;
}

.dog5 {
  position: absolute;
  left: 415px;
  bottom: 30px;
}

.dog6 {
  position: absolute;
  left: 515px;
  bottom: 30px;
}

.dog7 {
  position: absolute;
  left: 615px;
  bottom: 30px;
}

.dog8 {
  position: absolute;
  left: 715px;
  bottom: 30px;
}

.frog5 {
  position: absolute;
  left: 565px;
  bottom: 10px;
}

.frog6 {
  position: absolute;
  left: 620px;
  bottom: 15px;
}

.frog7 {
  position: absolute;
  left: 675px;
  bottom: 5px;
}

.frog8 {
  position: absolute;
  left: 730px;
  bottom: 10px;
}

.ajisai {
  position: absolute;
  left: 0px;
  bottom: -10px;
  animation: ajisai 3s linear 1;
  transform-origin: 0% 0%;
}

@keyframes ajisai {
  0% {
    transform: translateY(100px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.shake {
  animation: shake_5859 3.875s ease infinite;
  transform-origin: 20% 100%;
}

@keyframes shake_5859 {
  0% {
    transform: rotate(-8deg);
  }
  5.16129% {
    transform: rotate(8deg);
  }
  6.45161% {
    transform: rotate(12deg);
  }
  11.6129% {
    transform: rotate(-16deg);
  }
  12.90323% {
    transform: rotate(-16deg);
  }
  16.06451% {
    transform: rotate(12deg);
  }
  19.35484% {
    transform: rotate(12deg);
  }
  24.51613% {
    transform: rotate(-16deg);
  }
  25.80645% {
    transform: rotate(-16deg);
  }
  30.96774% {
    transform: rotate(12deg);
  }
  32.25807% {
    transform: rotate(12deg);
  }
  37.41935% {
    transform: rotate(-16deg);
  }
  38.70968% {
    transform: rotate(-16deg);
  }
  43.87097% {
    transform: rotate(12deg);
  }
  48.3871% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.purupuru {
  animation: purupuru 0.8s linear 0s infinite;
}

@keyframes purupuru {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  20% {
    transform: scale(1, 1.06) translate(-5%, -4%) skew(6deg, 0deg);
  }
  50% {
    transform: scale(1, 0.94) translate(5%, 4%) skew(-6deg, 0deg);
  }
  65% {
    transform: scale(1, 1.03) translate(2%, -2%) skew(-3deg, 0deg);
  }
  80% {
    transform: scale(1, 0.97) translate(-2%, 2%) skew(3deg, 0deg);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
.bounce {
  animation: bounce_7373 3.6s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes bounce_7373 {
  0% {
    transform: translateY(0);
  }
  5.55556% {
    transform: translateY(0);
  }
  11.11111% {
    transform: translateY(0);
  }
  22.22222% {
    transform: translateY(-25px);
  }
  27.77778% {
    transform: translateY(0);
  }
  33.33333% {
    transform: translateY(-25px);
  }
  44.44444% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
.purun {
  animation: purun 2s linear 0s infinite;
}

@keyframes purun {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  20% {
    transform: scale(1.1, 0.8) translate(0%, 10%);
  }
  30% {
    transform: scale(0.8, 1.1) translate(0%, -10%);
  }
  40% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  50% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
.korokoro {
  animation: korokoro 2.5s linear 0s infinite;
}

@keyframes korokoro {
  0% {
    transform: translate(0%, 0%);
  }
  5% {
    transform: translate(10%, 0%) rotate(10deg);
  }
  25% {
    transform: translate(20%, 0%) rotate(20deg);
  }
  30% {
    transform: translate(-10%, 0%) rotate(-10deg);
  }
  35% {
    transform: translate(-15%, 0%) rotate(-15deg);
  }
  45% {
    transform: translate(10%, 0%) rotate(10deg);
  }
  50% {
    transform: translate(15%, 0%) rotate(15deg);
  }
  60% {
    transform: translate(-5%, 0%) rotate(-5deg);
  }
  65% {
    transform: translate(-7%, 0%) rotate(-7deg);
  }
  75% {
    transform: translate(0%, 0%) rotate(0deg);
  }
  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
}
.jump, .jump-hover:hover {
  animation: jump 2s linear 0s infinite;
}

@keyframes jump {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  7% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  28% {
    transform: scale(1.2, 0.8) translate(0%, 15%);
  }
  35% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  48% {
    transform: scale(0.9, 1.2) translate(0%, -90%);
  }
  55% {
    transform: scale(0.9, 1.2) translate(0%, -80%);
  }
  65% {
    transform: scale(1.2, 0.8) translate(0%, 15%);
  }
  85% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
.jump-L, .jump-L-hover:hover {
  animation: jump-L 3s linear 0s infinite;
}

@keyframes jump-L {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  7% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  28% {
    transform: scale(1.2, 0.8) translate(0%, 15%);
  }
  35% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  50% {
    transform: scale(0.9, 1.2) translate(0%, -500%);
  }
  65% {
    transform: scale(1.2, 0.8) translate(0%, 15%);
  }
  75% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
.ring-hover:hover {
  animation: ring_5045 1.4s ease infinite;
  transform-origin: 50% 60%;
}

@keyframes ring_5045 {
  0% {
    transform: rotate(-15deg);
  }
  2.85714% {
    transform: rotate(15deg);
  }
  5.71429% {
    transform: rotate(-18deg);
  }
  8.57143% {
    transform: rotate(18deg);
  }
  11.42857% {
    transform: rotate(-22deg);
  }
  14.28571% {
    transform: rotate(22deg);
  }
  17.14286% {
    transform: rotate(-18deg);
  }
  20% {
    transform: rotate(18deg);
  }
  22.85714% {
    transform: rotate(-12deg);
  }
  25.71429% {
    transform: rotate(12deg);
  }
  28.57143% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.fat-hover:hover {
  animation: fat 0.8s linear infinite;
  transform-origin: 50% 90%;
}

@keyframes fat {
  0% {
    opacity: 1;
  }
  40% {
    transform: scale(1.5);
    opacity: 1;
  }
  45% {
    transform: scale(1.5);
    opacity: 1;
  }
  49% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  90% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.spin-hover:hover {
  animation: spin_6233 0.5s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes spin_6233 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}