@charset "UTF-8";

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.8s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  opacity: 0;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.zoomOut {
  animation-name: zoomOut;
  animation-duration: 1.8s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes zoomOut {
  0% {
    transform: scale(3);
    opacity: 0;
  }

  100% {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

.slideInLeft {
  opacity: 0;
  animation-name: slideInLeft;
  animation-duration: 0.6s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes slideInLeft {
  from {
    transform: translate(-50%, 0);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.slideInRight {
  opacity: 0;
  animation-name: slideInRight;
  animation-duration: 0.6s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes slideInRight {
  from {
    transform: translate(20%, 0);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.slideInUp {
  opacity: 1;
  animation-name: slideInUp;
  animation-duration: 0.6s;
  animation-delay: 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  opacity: 0;
}

@keyframes slideInUP {
  from {
    transform: translate(0, 50%);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.slideInDown {
  opacity: 1;
  animation-name: slideInDown;
  animation-duration: 0.4s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  opacity: 0;
}

@keyframes slideInDown {
  0% {
    transform: rotate(-3deg) translate(0, -100%);
    opacity: 0;
  }

  50% {
    transform: rotate(-3deg) translate(0, 30%);
    opacity: 1;
  }

  100% {
    transform: rotate(-3deg) translate(0, 0);
    opacity: 1;
  }
}

@media screen and (min-width: 1px) and (max-width: 743px) {

  @keyframes slideInDown {
    0% {
      transform: rotate(-3deg) translate(0, -300%);
      opacity: 0;
    }

    50% {
      transform: rotate(-3deg) translate(0, -50%);
      opacity: 1;
    }

    100% {
      transform: rotate(-3deg) translate(0, -100%);
      opacity: 1;
    }
  }
}

.blur {
  opacity: 1;
  animation-name: blur-anime;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  opacity: 0;
}

@keyframes blur-anime {
  0% {
    filter: blur(50px);
    opacity: 0;
  }

  100% {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes fuwafuwa {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12%);
  }
}

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite;
}

.fuwafuwa:nth-child(1) {
  animation-delay: 0s;
}

.fuwafuwa:nth-child(2) {
  animation-delay: 0.5s;
}

.fuwafuwa:nth-child(3) {
  animation-delay: 1s;
}

.fuwafuwa:nth-child(4) {
  animation-delay: 1.2s;
}

.fuwafuwa:nth-child(5) {
  animation-delay: 1.5s;
}

.fuwafuwa:nth-child(6) {
  animation-delay: 1.6s;
}

@keyframes swing {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-8%, 8%);
  }
}

.swing {
  animation: swing 1s ease-in-out infinite;
  /* 3秒で往復 */
  transform-origin: center bottom;
  /* 回転の支点（下の方が自然） */
}