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





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

/*フェードイン*/
/*------------------------------*/
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*上へフェードイン*/
/*------------------------------*/
@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);
	}
}



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

/*---------------------------
全初期状態
---------------------------*/
.fadeIn.-off,
.fadeInUp.-off,
.fadeInUp02.-off .action01,
.fadeInUp02.-off .action02,
.fadeInUp02.-off .action03,
.fadeInUp02.-off .action04,
.fadeInUp02.-off .action05,
.fadeInUp02.-off .action06,
.fadeInDown.-off,
.fadeInLeft.-off,
.fadeInLeft02.-off .action01,
.fadeInLeft02.-off .action02,
.fadeInLeft02.-off .action03,
.fadeInLeft02.-off .action04,
.fadeInLeft02.-off .action05,
.fadeInLeft02.-off .action06,
.zoomOut.-off,
.zoomIn.-off {
	animation: off 0.6s 0s ease both;
}
@keyframes off {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/*---------------------------
フェードイン
---------------------------*/
/*初期状態*/
.fadeIn {
	opacity: 0;
}
/*アニメーション指定*/
.fadeIn.-anime {
	/*animation: fadeIn 2s 0s ease both;*/
	animation-name: fadeIn;
	animation-duration: 2s;
	animation-delay: 0;
	animation-timing-function: ease;
	animation-fill-mode: both;
}

/*---------------------------
上へフェードイン
---------------------------*/
/*初期状態*/
.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;
}