/* アニメーション */
/* 右からフォードイン */
.scrollfade.fadeInFromRight,
.scrollfade02.fadeInFromRight,
.scrollfade03.fadeInFromRight,
.scrollfade04.fadeInFromRight {
  transform: translateX(100px);
}
/* 左からフェードイン */
.scrollfade.fadeInFromLeft,
.scrollfade02.fadeInFromLeft,
.scrollfade03.fadeInFromLeft,
.scrollfade04.fadeInFromLeft {
  transform: translateX(-100px);
}
/* 下からフェードイン */
.scrollfade.fadeInFromBottom,
.scrollfade02.fadeInFromBottom,
.scrollfade03.fadeInFromBottom,
.scrollfade04.fadeInFromBottom,
.scrollfade05.fadeInFromBottom {
  transform: translateY(100px);
}
/* 上からフェードイン */
.scrollfade.fadeInFromTop,
.scrollfade02.fadeInFromTop,
.scrollfade03.fadeInFromTop,
.scrollfade04.fadeInFromTop,
.scrollfade05.fadeInFromTop {
  transform: translateY(-100px);
}
.scrollfade.fadeInFromRight.active,
.scrollfade.fadeInFromLeft.active,
.scrollfade02.fadeInFromRight.active,
.scrollfade02.fadeInFromLeft.active,
.scrollfade03.fadeInFromRight.active,
.scrollfade03.fadeInFromLeft.active,
.scrollfade04.fadeInFromRight.active,
.scrollfade04.fadeInFromLeft.active{
  transform: translateX(0);
}
.scrollfade.fadeInFromBottom.active,
.scrollfade.fadeInFromTop.active,
.scrollfade02.fadeInFromBottom.active,
.scrollfade02.fadeInFromTop.active,
.scrollfade03.fadeInFromBottom.active,
.scrollfade03.fadeInFromTop.active,
.scrollfade04.fadeInFromBottom.active,
.scrollfade04.fadeInFromTop.active,
.scrollfade05.fadeInFromBottom.active,
.scrollfade05.fadeInFromTop.active{
  transform: translateY(0);
}

/* アニメーション開始時は拡大 */
.fadeInExpand{
  transform: scale(2.0);
}

.scrollfade {
  opacity : 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.scrollfade02 {
  opacity : 0;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}
.scrollfade03 {
  opacity : 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.scrollfade04 {
  opacity : 0;
  transition: opacity 1.0s ease-in-out, transform 1.0s ease-in-out;
}
.scrollfade05 {
  opacity : 0;
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
}
.active {
  opacity : 1;
}
.fadeInExpand.active{
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

/* ふわふわ上下に動く */
.updown{
  animation-name:updown1;
  animation-delay:0s;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes updown1 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}

.updown02{
  animation-name:updown2;
  animation-delay:0s;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes updown2 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}

.updown03{
  animation-name:updown3;
  animation-delay:0s;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes updown3 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
100% {
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)}
}

/* ぴょんぴょん跳ねる */
.pyonpyon {
  animation: bounceUpDown 1.2s 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);     /* 再着地 */
  }
}


/* 横に動く */
.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);
  }
}