@charset "UTF-8";
/* CSS Document */

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

.tm_note{
	position: absolute;
	bottom: calc(2rem + 8.4%); right:1rem;
	transform: translateY(-1.4rem);
	color:#fff; text-shadow: 0 0 4px #000;
	font-size: 1.2rem;
	opacity: 0;
	transition: opacity 1s ease 0s;
	line-height: 0;
}

.tm_note.active{
	opacity: 1;
}

.main-container{
	width:100%;
	position: relative;
	overflow: hidden;
	background-color: rgba(17, 17, 17, 1.00);
}
.main-container img{
	width:100%; height: auto;
}
.main-inner{
	padding-bottom: calc(900 / 1370 * 100%);
}

.pc-size{
	display: block;
}
.sp-size{
	display: none;
}

@keyframes tmLoadingMotion{
	  0% {opacity: 1;}
	100% {opacity: 0;}
}
.tm_loading{
	position: absolute;
	top:0; left: 0;
	width:100%; height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tm_loading.fadeOut{
	pointer-events: none;
	animation: tmLoadingMotion 0.2s linear forwards;
}
@keyframes tmLoadingIconMotion{
	  0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
.tm_loading_icon{
	width:10%;
	max-width:50px;
	font-size: 0;
	animation: tmLoadingIconMotion 0.7s steps(12) infinite;
}

.tm_bright{
	position: absolute;
	top:0%; left: 26%;
	height: 100%;
	width:14.598540145985401%;
	transform: translateZ(0);
	mix-blend-mode: color-dodge;
	opacity: 0;
	transition: opacity 1s linear 0s;
	pointer-events: none;
}

.tm_bright.active{
	opacity: 1;
}

/* merit */
.tm_merit{
	width:100%;
	position: absolute;
	left: 0;
	bottom:0;
}

.tm_merit img{
	width:100%; height: auto;
}

.tm_merit_inner{
	padding:1.0rem 2rem;
	background-color: rgba(40,30,28,0.75);
}

.tm_merit.sp-size{
	position: relative;
	left: auto;
	bottom:auto;
}
.tm_merit.sp-size .tm_merit_inner{
	background-color: rgba(0,0,0,1);
}

@media screen and (max-width:768px){
	.tm_note{
		 bottom: 0rem;
	}
}


@media screen and (max-width:500px){
	.pc-size{
		display: none;
	}
	.sp-size{
		display: block;
	}
	.main-inner{
		width:100%;
		padding-bottom: calc(720 / 600 * 100%);
	}
	.tm_bright{
		/*mix-blend-mode:normal;*/
		top:16%; left: 12%;
		height: 100%;
		width:22%;
	}
	.tm_merit_inner{
		padding:2rem 2rem;
		background-color: rgba(0,0,0,0.8);
	}
}