@charset "UTF-8";


.mv-container .note{
	position: absolute;
	bottom:0.5rem; right:0.5rem;
	color:#fff;
	text-shadow:
		0 0 1px rgba(0,0,0,1),
		0 0 2px rgba(0,0,0,1),
		0 0 3px rgba(0,0,0,1);
}

.mv-container .mv-note-container .note{
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s linear 0s;
	
}

.mv-container .mv-note-container .note.active{
	opacity: 1;
}

.mv-container .pc{ display: block;}
.mv-container .sp{ display: none;}
@media screen and (max-width:600px){
	.mv-container .pc{ display: none;}
	.mv-container .sp{ display: block;}
}

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

loading

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

@keyframes tmLoadingMotion{
	  0% { background-color: rgba(35,37,132,0); }
	 20% { background-color: rgba(35,37,132,1); }
	 50% { background-color: rgba(35,37,132,0); }
	100% { background-color: rgba(35,37,132,0); }
}

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

.tm-loading{
	position: absolute;
	top:0; left: 0;
	width:100%; height: 100%;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tm-loading.fadeOut{
	pointer-events: none;
	animation: tmLoadingFadeOutMotion 0.4s linear 0s forwards;
}
.tm-loading ul{
	display: flex;
	justify-content: center;
	flex-direction: row;
}
.tm-loading li{
	width:0.75rem; height: 0.75rem;
	background-color: rgba(255,255,255,0);
	border-radius: 50%;
	border:2px solid rgba(35,37,132,1.00);
	margin:0 0.25rem;
}
.tm-loading li:nth-child(1){ animation: tmLoadingMotion 1s linear 0s infinite; }
.tm-loading li:nth-child(2){ animation: tmLoadingMotion 1s linear 0.2s infinite; }
.tm-loading li:nth-child(3){ animation: tmLoadingMotion 1s linear 0.4s infinite; }


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

opening

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

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

.mv-container{
	width:100%;
	position: relative;
	overflow: hidden;
}
.mv-inner{
	position: relative;
	width:100%;
	padding-bottom: calc(675 / 1400 * 100%);
}

.tm-btn-cls{
	position: absolute;
	top:0.5rem; right:0.5rem;
	padding:0.75rem 0;
	text-align: center;
	font-size:0.85rem;
	color:#fff;
	background-color: #000;
	opacity: 0;
	transition: 0.5s ease 0s opacity;
	pointer-events: none;
	width:6rem;
}

.tm-btn-cls.active{
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
}


@media screen and (max-width:600px){
	.mv-inner{
		padding-bottom: calc(540 / 375 * 100%);
	}
}


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

slider

--------------------------*/
.mv-slider-wrap{
	position: absolute;
	top:0; left: 0;
	width:100%; height: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s linear 0s;
	background-color: #fff;
}
.mv-slider-wrap.active{
	opacity: 1;
	pointer-events: auto;
}
.mv-slider{
	width:100%;
	margin-bottom: 0!important;
	overflow: hidden;
	
}
.mv-slide-cell{
	width:100%;
	position: relative;
}

.cell-inner{
	width:100%;
	position: relative;
}

.cell-inner::before{
	content:"";
	width:100%;
	display: block;
	padding-bottom: calc(675 / 1400 * 100%);
}
@media screen and (max-width:600px){
	.cell-inner::before{
		padding-bottom: calc(540 / 375 * 100%);
	}
}

.mv-slide-visual{
	position: absolute;
	top:0; left: 0;
	width:100%; height: 100%;
}
.mv-slide-visual img{
	width:100%; height: auto;
	object-position: center center;
	object-fit: cover;
}
.mv-slider .slick-dots{
	bottom:1rem;
}
.mv-slider .slick-dots li,
.mv-slider .slick-dots li button{
	width:auto; height: auto;
}
.mv-slider .slick-dots li button::before{display:none;}
.mv-slider .slick-dots li button::after{
	content:"";
	display: block;
	width:1rem; height: 1rem;
	border-radius: 50%;
	background-color: rgba(255,255,255,0);
	border:2px solid #fff;
}
.mv-slider .slick-dots li button::after{
	content:"";
	display: block;
	width:1.2rem; height: 1.2rem;
	border-radius: 50%;
	background-color: rgba(255,255,255,0);
	border:2px solid #fff;
}

.mv-slider .slick-dots li.slick-active button::after{
	background-color: rgba(255,255,255,1);
}