.flex{
	display: flex;
}

/*上ナビフレーム　フェイドイン*/
@keyframes FadeInDown{
	0% {
		opacity: 0;/* 透明 */
		transform: translateY(-100px);/* 始点 */
		height: 50px;
	}
	100% {
		opacity: 1;/* 透明 */
		transform: translateY(0px);/* 終点 */
		height: 50px;
	}	
}

.nav-menu{
	animation-name: FadeInDown;
	animation-duration: 1s;
	animation-fill-mode: backwards;
}
/*ここまで*/

/*下フレーム　フェイドイン*/
@keyframes FadeInUp{
	0% {
		opacity: 0;/* 透明 */
		transform: translateY(100px);/* 始点 */
		height: 50px;
	}
	100% {
		opacity: 1;/* 透明 */
		transform: translateY(0px);/* 終点 */
		height: 50px;
	}	
}

.main-image__frame{
	animation-name: FadeInUp;
	animation-duration: 1s;
	animation-fill-mode: backwards;
}
/*ここまで

/*左画像スライダー*/
.SliderLeft{
	animation-name: SliderLeft;
	animation-duration: 3s;
	animation-fill-mode: backwards;
	animation-delay: 1s; 
	width: 0;
}

@keyframes SliderLeft{
	0% {
		opacity: 0;/* 透明 */
		transform: translateX(0px);/* 始点 */
		width: 30%;
		height: 400px;
	}
	50% {
		opacity: 1;/* 不透明 */transform: translateX(0px);
		width: 30%;
		height: 400px;
	}
	100% {
		opacity: 0;/* 透明 */
		transform: translateX(1100px);/* 終点 */
		width: 0px;
	}	
}
/*ここまで*/

/*右画像スライダー*/
.SliderRight{
	animation-name: SliderRight;
	animation-duration: 3s;
	animation-fill-mode: backwards;
	animation-delay: 1s; 	
	width: 0;
}

@keyframes SliderRight{
	0% {
		opacity: 0;/* 透明 */
		transform: translateX(0px);/* 始点 */
		width: 30%;
		height: 400px;
	}
	50% {
		opacity: 1;/* 不透明 */
		transform: translateX(0px);
		width: 30%;
		height: 400px;
	}
	100% {
		opacity: 0;/* 透明 */
		transform: translateX(-1100px);/* 終点 */
		width: 0px;
	}	
}
/*ここまで*/

@media(max-width: 414px){
	
/*上ナビフレーム　フェイドイン*/
	@keyframes FadeInDown{
		0% {
			opacity: 0;
			transform: translateY(-100px);
			height: 60px;
		}
		100% {
			opacity: 1;
			transform: translateY(0px);
			height: 60px;
		}	
	}

/*下フレーム　フェイドイン*/
	@keyframes FadeInUp{
		0% {
			opacity: 0;
			transform: translateY(100px);
			height: 40px;
		}
		100% {
			opacity: 1;
			transform: translateY(0px);
			height: 40px;
		}	
	}
/*ここまで
	
/*左画像スライダー*/
	@keyframes SliderLeft{
		0% {
			opacity: 0;
			transform: translateY(0px);
			height: 250px;
			width: 70px;
		}
		50% {
			opacity: 1;
			transform: translateY(0px);
			height: 250px;
			width: 70px;
		}
		100% {
			opacity: 0;
			transform: translateX(2000px);
			height: 250px;
			width: 0px;
		}	
	}	
/*ここまで*/

/*右画像スライダー*/
	@keyframes SliderRight{
		0% {
			opacity: 0;
			transform: translateY(0px);
			height: 250px;
			width: 70px;
		}
		50% {
			opacity: 1;
			transform: translateY(0px);
			height: 250px;
			width: 70px;
		}
		100% {
			opacity: 0;
			transform: translateX(-2000px);
			height: 250px;
			width: 0px;
		}	
	}
	
/*	アニメーションすストップ*/
	.SliderRight,
	.SliderLeft{
		animation-play-state: paused;
		display: none;
	}	
	
	
	
}