.anime {
  width: 810px;
  height: 400px;
  background-color: #333;
  background: #fff url("../anime_img/07/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: 585px;
  bottom: 30px;
}

.frog6 {
  position: absolute;
  left: 635px;
  bottom: 30px;
}

.frog7 {
  position: absolute;
  left: 685px;
  bottom: 30px;
}

.frog8 {
  position: absolute;
  left: 735px;
  bottom: 30px;
}

.yotto {
  position: absolute;
  right: -50px;
  top: 195px;
  animation: yotto 30s linear infinite;
  transform-origin: 0% 0%;
}

@keyframes yotto {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-900px);
    opacity: 1;
  }
}
.kujira {
  position: absolute;
  right: -100px;
  top: 170px;
  animation: kujira 20s linear 6s infinite;
  transform-origin: 0% 0%;
}

@keyframes kujira {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-900px);
    opacity: 1;
  }
}
.kamome {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0px;
  animation: moveY-blue 6s infinite alternate ease-in, moveX-blue 12s infinite normal linear;
}

@keyframes moveY-blue {
  0% {
    top: 30px;
  }
  50% {
    top: 70px;
  }
  100% {
    top: 30px;
  }
}
@keyframes moveX-blue {
  0% {
    transform: translateX(-65%);
    opacity: 1;
  }
  50% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(65%);
    opacity: 1;
  }
}
.ajisai {
  position: absolute;
  left: 0px;
  bottom: -15px;
  animation: test 3s linear 1;
  transform-origin: 0% 0%;
}

@keyframes test {
  0% {
    transform: translateY(20%);
    opacity: 1;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
.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 3s linear 0s infinite;
}

@keyframes jump {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  7% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  22% {
    transform: scale(1.2, 0.8) translate(0%, 15%);
  }
  30% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  45% {
    transform: scale(0.9, 1.2) translate(0%, -90%);
  }
  50% {
    transform: scale(0.9, 1.2) translate(0%, -80%);
  }
  60% {
    transform: scale(1.2, 0.8) translate(0%, 15%);
  }
  65% {
    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%);
  }
}
.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);
  }
}
.ring-hover:hover {
  animation: ring_5045 1.4s ease infinite;
  transform-origin: 50% 80%;
}

@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);
  }
}