/* ふわっとでてくる */
/* 下から */
.fadeUp {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.8s ease, transform 1s ease;
}
.fadeUp02 {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.8s ease, transform 2s ease;
}
/* 上から落ちてくる */
.fadeDrop {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 左から */
.fadeLeft {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 0.8s ease, transform 1s ease;
}
/* 右から */
.fadeRight {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.8s ease, transform 1s ease;
}

.fadeUp.is-active,
.fadeUp02.is-active,
.fadeDrop.is-active,
.fadeLeft.is-active,
.fadeRight.is-active{
  opacity: 1;
  transform: translate(0);
  transition:
  opacity 0.8s ease,
  transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 縮小から拡大 */
.scale {
  transform: scale(2.0);
  opacity: 0;
  animation: fvZoom 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 時間差 */
.scale.delay1 { animation-delay: 0s; }
.scale.delay2 { animation-delay: 0.4s; }
.scale.delay3 { animation-delay: 0.8s; }

@keyframes fvZoom {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ぴょんぴょん跳ねる */
.pyonpyon {
  animation: bounceUpDown 1.2s ease-in-out infinite;
  opacity: 1;
}
.pyonpyon02 {
  animation: bounceUpDown 1.5s ease-in-out infinite;
  opacity: 1;
}

@keyframes bounceUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-15px); /* 上にジャンプ */
  }
  50% {
    transform: translateY(0);     /* 着地 */
  }
  70% {
    transform: translateY(-8px);  /* 少し跳ね返り */
  }
  85% {
    transform: translateY(0);     /* 再着地 */
  }
}

/* シーソーのように中心を軸にゆらゆら */
.seesaw{
  transition: 0.5s;
	animation: seesaw_a 1s infinite;
}
@keyframes seesaw_a {
    0% {transform: translate(0px, 0)}
    50% {transform: translate(0px, 0) rotateZ(5deg)}
}
.seesaw02{
  transition: 0.5s;
	animation: seesaw_b 1s infinite;
}
@keyframes seesaw_b {
    0% {transform: translate(0px, 0)}
    50% {transform: translate(0px, 0) rotateZ(10deg)}
}
.seesaw03{
  transition: 0.5s;
	animation: seesaw_c 0.5s infinite;
}
@keyframes seesaw_c {
    0% {transform: translate(0px, 0)}
    50% {transform: translate(0px, 0) rotateZ(10deg)}
}

/* 横に動く */
.yurayura {
  animation: yurayura_a 2s ease-in-out infinite;
  opacity: 1;
}
@keyframes yurayura_a {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}