@charset "utf-8";

/*------------------ fadein layout ---------------------*/
/*コンテンツ　下、左右フェードイン*/

.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.fadeLeftBgTrigger,
.fadeRightBgTrigger {
	opacity: 0;
}

.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);
	}
}


.fadeLeft {
	animation-name: fadeLeftAnime;
	animation-duration: 1s;
	animation-fill-mode:forwards;
	opacity:0;
}

.fadeLeftBg {
	animation: fadeLeftAnime 1.5s forwards;
	opacity:0;
}

@keyframes fadeLeftAnime {
	from {
		opacity: 0;
		transform: translateX(-1000px);
	}
	
	to {
		opacity: 1;
		transform: translateX(0);
	}
}


.fadeRight {
	animation-name: fadeRightAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.fadeRightBg {
	animation: fadeRightAnime 1.5s forwards;
	opacity:0;
}

@keyframes fadeRightAnime {
	from {
		opacity: 0;
		transform: translateX(1000px);
	}
	
	to {
		opacity: 1;
		transform: translateX(0);
	}
}