/*---------------------------------------------------------
最初非表示のクラスは透明度0に設定する
---------------------------------------------------------*/

.fadeInTrigger,
.fadeUpTrigger,
.fadeUpeTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.zoomInTrigger,
.zoomIndelay,
.zoomIn,
.zoomInbound,
.jumpHumanTrigger {
  opacity: 0;
}

/*---------------------------------------------------------
飛び出るアニメーション ボヨヨン
---------------------------------------------------------*/

.zoomInbound {
  animation-name: zoomInAnimebound;
  animation-duration: 0.75s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  transition-timing-function: ease;
}
.zoomInboundDelay {
  animation-name: zoomInAnimebound;
  animation-duration: 0.75s;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
  transition-timing-function: ease;
}

@keyframes zoomInAnimebound {
  from {
    opacity: 0;
  }
  20%,
  to {
    opacity: 1;
  }

  from {
    transform: scale(0, 0);
  }
  50% {
    transform: scale(1.2, 1.25);
  }
  75% {
    transform: scale(0.9, 0.95);
  }
  to {
    transform: scale(1, 1);
  }
}

/*---------------------------------------------------------
飛び出るアニメーション　ボヨン
---------------------------------------------------------*/
.circle-illust {
  opacity: 0;
  animation: circle-check-animation 1.45s 0.6s forwards;
  /* ぽよんぽよんする動き */
  animation-timing-function: linear(0, 1.42, 0.77, 1.25, 0.87, 1.05, 0.98, 1.01, 1, 1);
}

@keyframes circle-check-animation {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/*---------------------------------------------------------
アニメーション　ぴょん
---------------------------------------------------------*/
.jumpY {
  animation: jumpAnimeY 0.8s ease forwards;
  animation-delay: 0.8s;
  opacity: 0;
}

.jumpScaleInfinte {
  animation: jumpAnimeScale 2.8s infinite;
}

@keyframes jumpAnimeY {
  9% {
    transform: translateY(45%);
    opacity: 0;
  }

  10% {
    transform: translateY(45%);
    opacity: 1;
  }
  50% {
    transform: translateY(-10%) scale(0.95, 1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes jumpAnimeScale {
  0% {
    transform: scale(1, 1);
  }
  75% {
    transform: scale(1, 1);
  }
  85% {
    transform: translateY(-4%) scale(0.98, 1.01);
  }
  100% {
    transform: translateY(0%) scale(1, 1);
  }
}

.jumpHuman {
  animation: jumpAnimeY 0.8s forwards;
}

.jumpScaleInfinte500ms {
  animation: jumpAnimeScale 2.8s 0.5s infinite;
}

.jumpScaleInfinte1200ms {
  animation: jumpAnimeScale 2.8s 1.2s infinite;
}

.jumpScaleInfinte2000ms {
  animation: jumpAnimeScale 2.8s 2s infinite;
}

.jumpScaleInfinte2500ms {
  animation: jumpAnimeScale 2.8s 2.5s infinite;
}

/*---------------------------------------------------------
アニメーション　ふわふわ回転
---------------------------------------------------------*/
.rotate-deco {
  animation: rotate-cicle 14s infinite ease-in-out;
}

@keyframes rotate-cicle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-8deg);
  }
}
/*---------------------------------------------------------
ふわふわ漂う
---------------------------------------------------------*/

.floating {
  animation: floating-y 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(-5px);
  }
}

.floating-x {
  animation: floating-x 3s ease-in-out infinite alternate-reverse;
}

.floating-x.reverce {
  animation: floating-x 4s ease-in-out infinite alternate-reverse;
}

@keyframes floating-x {
  0% {
    transform: translateX(-3%);
  }
  100% {
    transform: translateX(3%);
  }
}

.floating-reverce {
  animation: floating-y-rev 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y-rev {
  0% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(5px);
  }
}

.floating_mini {
  animation: floating-mini 2s ease-in-out infinite alternate-reverse;
}

.floating_mini.reverce {
  animation: floating-mini-rev 2s ease-in-out infinite alternate-reverse;
}

.floating_mini.delay {
  animation: floating-mini-rev 2s ease-in-out infinite alternate;
}

@keyframes floating-mini {
  0% {
    transform: translateY(-0.5%);
  }
  100% {
    transform: translateY(0.5%);
  }
}

@keyframes floating-mini-rev {
  0% {
    transform: translateY(0.5%);
  }
  100% {
    transform: translateY(-0.5%);
  }
}

/*---------------------------------------------------------
フェードイン
---------------------------------------------------------*/
/* 透明度 */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*---------------------------------------------------------
下からフェードイン
---------------------------------------------------------*/
.fadeUp {
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  animation:
    fadeIn var(--ease-out-cubic) forwards,
    fadeUpAnime var(--ease-out-quint) forwards;
  animation-duration: 2.2s;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  opacity: 0;

  /* opacity: 0; */
  /* translate: 0 13%; */
}

@keyframes fadeUpAnime {
  from {
    transform: translateY(10%);
  }
  to {
    transform: translateY(0);
  }
}

/*---------------------------------------------------------
拡大
---------------------------------------------------------*/
.zoomIn {
  animation-name: zoomInAnimedelay;
  animation-duration: 0.2s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
}

.zoomIndelay_bound {
  opacity: 0;
  animation-name: zoomInAnimedelay_bound, fadeIn;
  animation: zoomInAnimedelay_bound 1.13s 1.27s;
  /* ぽよんぽよんする動き */
  animation-fill-mode: forwards;
  animation-timing-function: linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), ease-out;
}

/* 回転 */
@keyframes zoomInAnimedelay_bound {
  0% {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }

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

/*---------------------------------------------------------
 左から ふわっと
---------------------------------------------------------*/

.fadeLeftDelay1500ms {
  animation-name: fadeLeftAnime;
  animation-duration: 1s;
  animation-delay: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*---------------------------------------------------------
 右から ふわっと
---------------------------------------------------------*/

.fadeRightDelay1500ms {
  animation-name: fadeRightAnime;
  animation-duration: 1s;
  animation-delay: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*---------------------------------------------------------
 ふわっと
---------------------------------------------------------*/
.fade {
  animation-name: fadeAnime;
  animation-duration: 1s;
  animation-delay: 1.8s;
  animation-fill-mode: forwards;
  animation-timing-function: var(--ease-out-cubic);
  opacity: 0;
}

@keyframes fadeAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}