@charset "UTF-8";

#animation_container {
	position:absolute;
	margin:auto;
	left:-100%;right:-100%;
	top:-100%;bottom:-100%;
}

.main-container{
	width:100%;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background-color: #fff;
}

.main-inner{
	width: 100%;
	padding-bottom: calc(540 / 960 * 100%);
}

.main-visual{
	position: absolute; top:0; left: 0;
	width:100%; height: 100%;
	background-image: url("../ms_topmain/images_parts/main-bg.jpg");
	background-position: center center;
	background-size: cover;
	opacity: 0;
	pointer-events: none;
	transition: 0s ease-out 0s opacity;
}

.main-note-container{
	width: 100%;
	position: absolute; bottom:10px; right: 10px;
}
.main-note-container ul{
	width: 100%;
}
.main-note-container li{
	position: absolute; bottom:10px; right: 10px;
	font-size: 0.8rem;
	line-height: 1;
	color:#fff;
	text-align: right;
	text-shadow: 0 0 1rem rgba(0,0,0,1);
	opacity: 0;
	transition: 1s linear 0s opacity;
}
.main-note-container li.active{
	opacity: 1;
}



.main-visual-logo{
	position: absolute; 
	top:calc(49 / 540 * 100%);
	left: calc(93 / 960 * 100%);
	width:calc(153 / 960 * 100%);
	transform: scale(1.2,1.2);
	opacity: 0;
	transition: 0s ease-out 0s opacity , 0s ease-out 0s transform;
}

.main-visual-img{
	position: absolute; bottom:0; left: 0;
	width:100%;
	transform: scale(1.2,1.2);
	opacity: 0;
	transition: 0s ease-out 0s opacity , 0s ease-out 0s transform;
}

.main-visual-note{
	position: absolute; bottom:10px; right: 10px;
	font-size: 0.8rem;
	line-height: 1;
	color:#fff;
	text-align: right;
	text-shadow: 0 0 1rem rgba(0,0,0,1);
}

.main-loading{
	position: absolute; top:0; left: 0;
	width:100%; height: 100%;
	background-color: #fff;
}
.main-loading.fadeOut{
	pointer-events: none;
	animation: mainLoadingFadeoutMotion 0.5s 0s linear forwards;
}

@keyframes mainLoadingFadeoutMotion{
	  0% { opacity: 1; }
	100% { opacity: 0; }
}


.main-loading ul{
	width:100%;
	position: absolute;
	top:50%; transform: translateY(-50%);
	text-align: center;
	display: block;
}
.main-loading ul li{
	width:4px; height: 4px;
	border-radius: 50%;
	background-color: #94A6A2;
	margin: 0 10px;
	display: inline-block;
	position: relative;
}
.main-loading ul li::after{
	content:"";
	width:200%; height: 200%;
	background-color: #94A6A2;
	display: block;
	position: absolute;
	top:50%; left: 50%;
	border-radius: 50%;
	transform: translate(-50%,-50%);
	opacity: 0;
	animation: mainLoadingMotion 1s linear 0s infinite;
}
.main-loading ul li:nth-child(2)::after{
	animation-delay: 0.2s;
}
.main-loading ul li:nth-child(3)::after{
	animation-delay: 0.4s;
}

@keyframes mainLoadingMotion{
	  0% { opacity: 0; }
	 20% { opacity: 1; }
	 50% { opacity: 0; }
	100% { opacity: 0; }
}


.main-btn-cls{
	position: absolute;
	top:10px; right:10px;
	width:80px; padding: 8px 0;
	text-align: center;
	font-size:0.8rem;
	border-radius: 4px;
	box-shadow: 0 0 1px rgba(0,0,0,0.5);
	color:#333333;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	transition: 0.5s linear 0s opacity;
	background-color: #fff;
	cursor: pointer;
}
.main-btn-cls.active{
	opacity: 1;
	pointer-events: auto;
}


/*---------------------------*/
/* resize */

@media screen and (max-width:600px){
	.main-container{
		margin-top: 55px;
	}
	.main-btn-cls{
		top:10px;
		right: 6px;
		width:60px;
	}
	
}

@media screen and (max-width:500px){
	.main-container{
		margin-top: 55px;
	}
	.main-note-container ul{
		bottom:5px; right: 5px;
	}
	.main-note-container li{
		bottom:5px; right: 5px;
	}
	.main-inner{
		padding-bottom: calc(540 / 360 * 100%);
	}
	.main-visual-img{
		left: -24%;
    width: 160%;
	}
	.main-visual-logo{
		top: 8%;
		left: 14%;
		width: 42%;
	}
}



/*---------------------------*/
/* motion */
.main-visual.active{
	opacity: 1;
	pointer-events: auto;
	transition: 1s ease-out 0s opacity;
}

.active .main-visual-logo{
	transform: scale(1.0,1.0);
	opacity: 1;
	transition: 1s ease-out 2.2s opacity , 1.5s cubic-bezier(0.14, 0.6, 0.58, 1) 2.2s transform;
}

.active .main-visual-img{
	transform: scale(1.0,1.0);
	opacity: 1;
	transition: 1s ease-out 0s opacity , 3s cubic-bezier(0.14, 0.6, 0.58, 1) 0s transform;
}