@charset "utf-8";
/*================================
=
スクロールアニメーション
=
================================*/





/*================================
アニメーション内容
================================*/

/*上へフェードイン*/
/*------------------------------*/
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate(0, 10px);
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

/*下へフェードイン*/
/*------------------------------*/
@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate(0, -10px);
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}
/*左へフェードイン*/
/*------------------------------*/
@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate(10px, 0);
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}
/*ズームアウト*/
/*------------------------------*/
@keyframes zoomOut {
	from {
		opacity: 0;
		transform: scale(1.2,1.2);
	}
	to {
		opacity: 1;
		transform: scale(1,1);
	}
}
/*ズームイン*/
/*------------------------------*/
@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale(0.5,0.5);
	}
	to {
		opacity: 1;
		transform: scale(1,1);
	}
}



/*================================
アニメーション指定・タイミング
================================*/

/*---------------------------
上へフェードイン
---------------------------*/
/*初期状態*/
.fadeInUp {
	opacity: 0;
}
/*アニメーション指定*/
.fadeInUp.-anime {
	animation: fadeInUp 1.6s 0s ease both;
}

/*---------------------------
上へフェードイン２
---------------------------*/
/*初期状態*/
.fadeInUp02 .action01,
.fadeInUp02 .action02,
.fadeInUp02 .action03,
.fadeInUp02 .action04,
.fadeInUp02 .action05,
.fadeInUp02 .action06 {
	opacity: 0;
}
/*アニメーション指定*/
.fadeInUp02.-anime .action01 {
	animation: fadeInUp 1.6s 0s ease both;
}
.fadeInUp02.-anime .action02 {
	animation: fadeInUp 1.6s 0.2s ease both;
}
.fadeInUp02.-anime .action03 {
	animation: fadeInUp 1.6s 0.4s ease both;
}
.fadeInUp02.-anime .action04 {
	animation: fadeInUp 1.6s 0.6s ease both;
}
.fadeInUp02.-anime .action05 {
	animation: fadeInUp 1.6s 0.8s ease both;
}
.fadeInUp02.-anime .action06 {
	animation: fadeInUp 1.6s 1s ease both;
}

/*---------------------------
下へフェードイン
---------------------------*/
/*初期状態*/
.fadeInDown {
	opacity: 0;
}
/*アニメーション指定*/
.fadeInDown.-anime {
	animation: fadeInDown 1.6s 0s ease both;
}

/*---------------------------
左へフェードイン
---------------------------*/
/*初期状態*/
.fadeInLeft {
	opacity: 0;
}
/*アニメーション指定*/
.fadeInLeft.-anime {
	animation: fadeInLeft 1.6s 0s ease both;
}

/*---------------------------
左へフェードイン２
---------------------------*/
/*初期状態*/
.fadeInLeft02 .action01,
.fadeInLeft02 .action02,
.fadeInLeft02 .action03,
.fadeInLeft02 .action04,
.fadeInLeft02 .action05,
.fadeInLeft02 .action06 {
	opacity: 0;
}
/*アニメーション指定*/
.fadeInLeft02.-anime .action01 {
	animation: fadeInLeft 1.6s 0s ease both;
}
.fadeInLeft02.-anime .action02 {
	animation: fadeInLeft 1.6s 0.3s ease both;
}
.fadeInLeft02.-anime .action03 {
	animation: fadeInLeft 1.6s 0.6s ease both;
}
.fadeInLeft02.-anime .action04 {
	animation: fadeInLeft 1.6s 0.9s ease both;
}
.fadeInLeft02.-anime .action05 {
	animation: fadeInLeft 1.6s 1.2s ease both;
}
.fadeInLeft02.-anime .action06 {
	animation: fadeInLeft 1.6s 1.5s ease both;
}

/*---------------------------
ズームアウト
---------------------------*/
/*初期状態*/
.zoomOut {
	opacity: 0;
}
/*アニメーション指定*/
.zoomOut.-anime {
	animation: zoomOut 2s 0s ease both;
}