@charset "utf-8";

/* PC
-------------------------------------------------- */
@media screen and (min-width:1000px){
	.curtain{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: 2000;
		background: #000000;
		height: 100vh;
		animation: curtain_pc 4s forwards;
	}
	
	.opening {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1000;
		background: url("../img/opening_s.jpg");
		background-size: cover;
		height: 100vh;
		animation: open_pc 4s forwards;
		opacity: 0;
	}

	.opening div {
		top: 50%;
		left: 50%;  
		transform: translate(-50%, -50%);
		position: absolute;
	}

	main{
		background: #192f73;
	}

	.mv{
		box-sizing: border-box;
		width: 100%;
		margin: -60px auto 0;
	}
	
	.mv img{
		width: 100%;
	}
	
	.contents{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30vh 0;
		background: #ffffff;
		color: #000000;
	}
}

@keyframes curtain_pc{
	0% {opacity: 1;}
	60% {opacity: 1;}
	80% {opacity: 1;}
	99% {opacity: 0;}
	100% {opacity: 0; display: none;}
}

@keyframes open_pc{
	0% {opacity: 0; background-position: center bottom;}
	25% {opacity: 1; background-position: center bottom;}
	70% {opacity: 1; background-position: center top;}
	80% {opacity: 0;}
	99% {opacity: 0;}
	100% {opacity: 0; background-position: center top; display: none;}
}

/* SP
-------------------------------------------------- */
@media screen and (max-width:999px){
	.curtain{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: 2000;
		background: #000000;
		height: 100vh;
		animation: curtain_sp 3.2s forwards;
	}
	
	.opening {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1000;
		background: url("../img/opening_s.jpg") no-repeat;
		background-position: left center;
		background-size: cover;
		height: 100vh;
		animation: open_sp 3s forwards;
		opacity: 0;
	}

	.opening div {
		top: 50%;
		left: 50%;  
		transform: translate(-50%, -50%);
		position: absolute;
	}

	main{
		background: #192f73;
	}

	.mv{
		box-sizing: border-box;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}
	
	.mv img{
		width: 100%;
	}
	
	.contents{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30vh 0;
		background: #ffffff;
		color: #000000;
	}
}

@keyframes curtain_sp{
	0% {opacity: 1;}
	60% {opacity: 1;}
	90% {opacity: 1;}
	99% {opacity: 0;}
	100% {opacity: 0; display: none;}
}

@keyframes open_sp{
	/*0% {opacity: 0; background-position: center bottom;}
	25% {opacity: 1; background-position: center bottom;}
	70% {opacity: 1; background-position: center top;}
	80% {opacity: 0;}
	99% {opacity: 0;}
	100% {opacity: 0; background-position: center top; display: none;}*/
	
	0% {opacity: 0; background-position: left center;}
	25% {opacity: 1; background-position: left center;}
	70% {opacity: 1; background-position: right center;}
	90% {opacity: 1;}
	99% {opacity: 0;}
	100% {opacity: 0; display: none; background-position: right center;}
}