@charset "UTF-8";
.anim-box.fadein {
  opacity: 0;
}
.anim-box.fadein.is-animated {
  animation: fadeIn 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.anim-box.fadeout.is-animated {
  animation: fadeOut 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.anim-box.fadeup {
  opacity: 0;
}
.anim-box.fadeup.is-animated {
  animation: fadeUp 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.anim-box.fadedown.is-animated {
  animation: fadeDown 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeDown {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.anim-box.slideinRtoL.is-animated {
  animation: slideInRtoL 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideInRtoL {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%, 100% {
    opacity: 1;
  }
}
.anim-box.slideinLtoR.is-animated {
  animation: slideInLtoR 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideInLtoR {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%, 100% {
    opacity: 1;
  }
}
.anim-box.zoomin.is-animated {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.anim-box.zoomout.is-animated {
  animation: zoomOut 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomOut {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.anim-box.hover-poyopoyo:hover {
  transform: scale(0.95);
}
.anim-box.hover-poyopoyo:not(:hover) {
  animation: boyoyon 0.5s ease-out;
}

@keyframes boyoyon {
  0% {
    transform: scale(0.95);
  }
  40% {
    transform: scale(1.05);
  } /* 少し大きく（伸びる） */
  60% {
    transform: scale(0.98);
  } /* 少し小さく（縮む） */
  80% {
    transform: scale(1.02);
  } /* また少し大きく */
  100% {
    transform: scale(1);
  } /* 元に戻る */
}/*# sourceMappingURL=css_animation.css.map */