@charset "UTF-8";

/*fadeUp（下からふわっと現れる）──────────────────────────────*/
.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*rotateY（Y軸でくるっと回転）──────────────────────────────*/
.rotateY {
	animation-name: rotateYAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes rotateYAnime {
	from {
		transform: rotateY(0);
		opacity: 0;
	}
	to {
		transform: rotateY(-360deg);
		opacity: 1;
	}
}

/* zoomIn（拡大しながら表示）──────────────────────────────*/
.zoomIn {
	animation-name: zoomInAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}
@keyframes zoomInAnime {
	from {
		transform: scale(0.6);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/*上下*/
.rise{
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
  animation-duration: 3s;
  animation-name: anim_v;
}
.rise2{
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
  animation-duration: 5s;
  animation-name: anim_v2;
}

@keyframes anim_v {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, -15px);
  }
}

@keyframes anim_v2 {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, -20px);
  }
}

/*ふわふわ*/
.fuwafuwa{
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-name: anim_s;
	transform: rotate(3deg);
	animation-duration: 5s;
}

@keyframes anim_s {
	50% {
		transform: rotate(-3deg);
	}
	100% {
		transform: rotate(3deg);
	}
}

/* ▲ふわふわ動かすここまで▲ */


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.rotateYTrigger,
.zoomInTrigger {
	opacity: 0;
}

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time02 {
	animation-delay: 0.2s;
}
.delay-time04 {
	animation-delay: 0.4s;
}
.delay-time06 {
	animation-delay: 0.6s;
}