/*
 * アニメーション制御
*/

/* アニメーショントリガー(jsで.scroll付与)
----------------------------------------------- */
.js-fadeOwner {
}
.js-fadeOwner.scroll {
}

/* 表示順制御遅延時間設定
----------------------------------------------- */
.delay-time01{
	animation-delay: 0.6s;
}
.delay-time02{
	animation-delay: 1.2s;
}
.delay-time03{
	animation-delay: 1.8s;
}
.delay-time04{
	animation-delay: 2.4s;
}
.delay-time05{
	animation-delay: 3s;
}

/* トリガー無しで遅延制御に必須
----------------------------------------------- */
@media (min-width: 768px) {
.opa0 {
	opacity: 0;
}
}
/* その場からフェードイン(トリガー無し)
----------------------------------------------- */
@media (min-width: 768px) {
.opa0 {
	opacity: 0;
}
.fadeIn {
	animation-name:fadeInScrollAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}
/* その場からフェードイン
----------------------------------------------- */
@media (min-width: 768px) {
.js-fadeIn {
	opacity: 0;
}
.js-fadeIn.scroll {
	animation-name:fadeInScrollAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}
@keyframes fadeInScrollAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
}

/* 下からフェードイン
----------------------------------------------- */
@media (min-width: 768px) {
.js-fadeBottom {
	opacity: 0;
}
.js-fadeBottom.scroll {
	animation-name:fadeBottomScrollAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}
@keyframes fadeBottomScrollAnime{
	from {
		opacity: 0;
		transform: translateY(150px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
}
/* 下からフェードイン(左から)
----------------------------------------------- */
@media (min-width: 768px) {
.js-fadeBottomLeft {
	opacity: 0;
}
.js-fadeBottomLeft.scroll {
	animation-name:fadeBottomLeftScrollAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}
@keyframes fadeBottomLeftScrollAnime{
	from {
		opacity: 0;
		transform: translate(-150px,150px);
	}
	to {
		opacity: 1;
		transform: translate(0,0);
	}
}
}
/* 下からフェードイン(右から)
----------------------------------------------- */
@media (min-width: 768px) {
.js-fadeBottomRight {
	opacity: 0;
}
.js-fadeBottomRight.scroll {
	animation-name:fadeBottomRightScrollAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}
@keyframes fadeBottomRightScrollAnime{
	from {
		opacity: 0;
		transform: translate(150px,150px);
	}
	to {
		opacity: 1;
		transform: translate(0,0);
	}
}
}