@charset "UTF-8";

/*--------------------------------

loading

--------------------------------*/

.tm-loading{
	position: absolute;
	top:0; left: 0;
	width:100%; height: 100%;
	background-color: #FFF;
	z-index: 11;
	color:#4d97b7;
}

.tm-loading.fadeOut{
	display: none;
}

.tm-loading-motion{
	position: absolute;
	top:50%; left: 50%;
	transform: translate(-50%,-50%);
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 0.7rem;
}

.tm-loading-motion ul,
.tm-loading-motion li{
	display:inline-block;
}
.tm-loading-motion li{
	opacity: 0;
	margin-left: 0.1rem;
	font-weight: bold;
	font-size: 1.1rem;
	animation: tmLoadingMotion 0.8s linear 0.5s infinite forwards;
}
.tm-loading-motion li:nth-child(1){ animation-delay: 0s;}
.tm-loading-motion li:nth-child(2){ animation-delay: 0.1s;}
.tm-loading-motion li:nth-child(3){ animation-delay: 0.2s;}

@keyframes tmLoadingMotion{
	 0%{opacity: 0}
	10%{opacity: 1}
	100%{opacity: 0}
}

@media screen and (max-width:600px){
	/*.tm-loading{
		left: 46%;
	}*/
}

/*--------------------------------

opneing

--------------------------------*/

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

.main-container{
	position: relative;
	overflow: hidden;
	/*max-width:1500px;*/
	margin: 0 auto;
}

.main-container .note{
	color:#FFF;
	font-weight: bold;
	text-shadow: 0 0 3px rgba(0,0,0,1),0 0 3px rgba(0,0,0,1);
	line-height: 1;
}

.main-inner{
	position: relative;
	width:100%;
	padding-bottom:calc( 536 / 1440 * 100% );
}

.main-inview{
	position: absolute;
	width:100%; height: 100%;
	top:50%; left: 50%;
	transform: translate(-50%,-50%);
	transition: 1s linear 0.5s opacity;
}
.main-inview.fadeOut{
	opacity: 0;
	pointer-events: none;
}

.tm-note-list{
	position: absolute;
	top:0; left: 0;
	width:100%; height: 100%;
}
.tm-note-list li{
	opacity: 0;
	transition: 0.5s linear 0s opacity;
	position: absolute;
	bottom:5px; right: 5px;
}
.tm-note-list li.active{
	opacity: 1;
}
.tm-note-list li:nth-child(1){  }

.main-sp-access{
	padding:1rem 2rem;
}
.main-sp-access img{
	width:100%; height: auto; display: block;
}

.tm-btn-skip{
	position: absolute;
	top:5px; right: 5px;
	font-size:12px;
	background-color: #4d97b7;
	color:#FFF;
	font-weight: bold;
	cursor: pointer;
	pointer-events: none;
	opacity: 0;
	transition: 0.5s linear 0s opacity;
	width:80px;
	padding:5px 0px;
	text-align: center;
	border:1px solid #fff;
	z-index: 10;
	border-radius: 3px;
}
.tm-btn-skip.active{
	pointer-events: auto;
	opacity: 1;
}


@media screen and (max-width:600px){
	.tm-btn-skip{
		top:auto; bottom:10px;
		right: auto; left: 10px;/*left: calc(46% + 10px);*/
	}
	.main-inner{
		width:100%;
		/*margin-left: -46%;*/
		/*padding-bottom:calc( 604 / 414 * 100% );*/
		padding-bottom:calc( 450 / 414 * 100% );
	}
	.tm-note-list{
		/*left: 46%;*/
	}
}


/*--------------------------------

slide

--------------------------------*/

.main-slide-container{
	position: absolute;
	top:0; left: 0;
	width:100%; height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: 0.5s linear 0s opacity;
	overflow: hidden;
}
.main-slide-container.active{
	pointer-events: auto;
	opacity: 1;
}

.main-slide{
	position: absolute;
	top:0; left: 0;
	width:100%; height: 100%;
	margin-bottom: 0!important;
	overflow: hidden;
}

.main-slide .main-cell{
	position: relative;
	width:calc(100% + 4px); height: 100%;
	margin-left: -2px;
}
.main-slide .main-cell .note{
	position: absolute;
	bottom: 10px; right: 10px;
	z-index: 10;
}

.main-slide .main-cell .note.note-left{
	right: auto; left: 10px;
}

.main-slide .slick-dots{
	bottom:10px;
}
@media screen and (max-width:600px){
	.main-slide .slick-dots{
		bottom:20px;
	}
}

.main-slide .slick-dots li{
	transform: translateY(50px);
	transition: 0.5s ease-out 0s transform;
}
.main-slide .slick-dots li:nth-child(1){transition-delay: 0.6s;}
.main-slide .slick-dots li:nth-child(2){transition-delay: 0.8s;}
.main-slide .slick-dots li:nth-child(3){transition-delay: 1.0s;}
.main-slide .slick-dots li:nth-child(4){transition-delay: 1.2s;}
.main-slide .slick-dots li:nth-child(5){transition-delay: 1.4s;}
.main-slide .slick-dots li:nth-child(6){transition-delay: 1.6s;}
.main-slide .slick-dots li:nth-child(7){transition-delay: 1.8s;}
.main-slide-container.active .main-slide .slick-dots li{
	transform: translateY(0px);
}


.main-slide .slick-dots button{
	width:10px; height: 10px;
	border-radius: 50%;
	overflow: hidden;
	border:2px solid #fff;
	box-shadow: 0 0 4px rgba(0,0,0,1);
}
.main-slide .slick-dots button::before{display:none;}
.main-slide .slick-dots button::after{
	content:"";
	width:10px; height: 10px;
	display: block;
	background-color: rgba(255,255,255,0);
	margin: -5px 0px 0px -5px;
}
.main-slide .slick-dots .slick-active button::after{
	background-color: rgba(255,255,255,1);
}

.main-slide img.pc{ display: block; }
.main-slide img.sp{ display: none; }

.main-slide .effect-video{
	display: none;
	/*position: absolute;
	top:50%; left: 55%;
	transform: translate(-50%,-50%);
	width:calc(400 / 1440 * 100%);
	pointer-events: none;
	mix-blend-mode: color-dodge;*/
}
/*.main-slide .effect-video video{
	width:100%; height:auto; display: block;
}*/

@media screen and (max-width:600px){
	.main-slide img.pc{ display: none; }
	.main-slide img.sp{ display: block; }
	.main-slide-container{
		/*margin-left: 46%;*/
	}
	/*.main-slide .effect-video{
		top:58%; left: 48%;
		width:calc(510 / 600 * 100%);
	}*/
}