@charset "UTF-8";

/******************************************************

 main
 
******************************************************/

.main-container{
	width:100%;
	overflow: hidden;
	aspect-ratio: 1280 / 720;
	background-color: #000;
	position: relative;
}

.main-container .caption {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
}

.main-container .carten{
	position: absolute; top:0; left: 0;
	width:100%; height: 100%;
	background-color: #000;
}
@keyframes main_carten_motion{
	  0% { opacity: 1; }
	100% { opacity: 0; }
}
.main-container .carten{
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}
.main-container .carten.fadeOut{
	pointer-events: none;
	animation: 1s linear 0s main_carten_motion forwards;
}
.main-container .carten ul{
	display: flex;
	justify-content: center;
	gap:8px;
}
.main-container .carten ul li{
	width:4px; height: 4px;
	background-color: #fff;
	border-radius: 50%;
	opacity: 0.2;
}
@keyframes mvLoadingMotion{
	  0% { opacity:0.2 }
	 20% { opacity:1 }
	 80% { opacity:0.2 }
	100% { opacity:0.2 }
}
.main-container .carten ul li:nth-child(1){ animation: 1s linear   0s mvLoadingMotion infinite;}
.main-container .carten ul li:nth-child(2){ animation: 1s linear 0.1s mvLoadingMotion infinite;}
.main-container .carten ul li:nth-child(3){ animation: 1s linear 0.2s mvLoadingMotion infinite;}

.main-container .mv-slider .mv-cell{
	width:100%;
	aspect-ratio: 1280 / 720;
	overflow: hidden;
}

.main-container .mv-slider .mv-item img{
	width:100%; height: auto;
}

.main-container .mv-slider .cell-1 .visual{
	width: calc(1480 / 1280 * 100%);
	height: 100%;
}
.main-container .mv-slider .cell-1 .visual img{
	width: 100%; height: 100%;
	object-fit: cover; object-position: 100% 50%;
}

.main-container .mv-slider .cell-2 .visual{
	width: calc(1480 / 1280 * 100%);
	height: 100%;
	margin-left: -15.625%;
}
.main-container .mv-slider .cell-2 .visual img{
	width: 100%; height: 100%;
	object-fit: cover; object-position: bottom center;
}

.main-container .mv-slider .cell-3 .visual-1{
	width: 50%;
	height:100%;
	position: absolute; top:0; left: 0;
	overflow: hidden;
}
.main-container .mv-slider .cell-3 .visual-2{
	width: 50%;
	height:100%;
	position: absolute; top:0; right: 0;
	overflow: hidden;
}
.main-container .mv-slider .cell-3 .visual-1 img{
	width:100%; height: 100%;
	object-fit: cover; object-position: top center;
}
.main-container .mv-slider .cell-3 .visual-2 img{
	width:100%; height: 100%;
	object-fit: cover; object-position: bottom center;
}

.main-container .mv-slider .cell-3 .visual-2::after{
	content:"";
	display: block;
	width:100%; height: 100%;
	position: absolute; top:0; left: 0;
	background-color: rgba(0,0,0,0.7);
}

.main-container .mv-slider .cell-3 .copy{
	position: absolute; top:50%; left: 75%;
	width:35%;
	transform: translate(-50%,-50%);
}
.main-container .mv-slider .cell-3 .copy img{
	opacity:0;
}

.main-container .mv-slider .cell-3 .caption{
	right: auto;
	left:10px;
}



.main-container .slick-dots{
	bottom:20px;
}
.main-container .slick-dots li,
.main-container .slick-dots li button{
	width:auto; height: auto;
}
.main-container .slick-dots li button::before{
	display: none;
}
.main-container .slick-dots li button::after{
	display: block;
	content:"";
	width:12px; height: 12px;
	background-color: rgba(255,255,255,0);
	border:1px solid #fff;
	border-radius: 50%;
	transition: background 0.4s linear 0s;
}
.main-container .slick-dots li.slick-active button::after{
	background-color: rgba(255,255,255,1);	
}

.slider-container{
	position: relative;
	z-index: 1;
}


/* motion */
@keyframes cell_1_visual_motion{
	  0% { margin-left: -15.625%; }
	100% { margin-left: 0%; }
}
.main-container .mv-slider .cell-1.motion .visual{
	animation: 12s linear 0s cell_1_visual_motion forwards;
}

@keyframes cell_2_visual_motion{
	  0% { margin-left: 0%; }
	100% { margin-left: -15.625%; }
}
.main-container .mv-slider .cell-2.motion .visual{
	animation: 12s linear 0s cell_2_visual_motion forwards;
}

@keyframes cell_3_visual_motion1{
	  0% { transform: scale(1.2,1.2); }
	100% { transform: scale(1.0,1.0); }
}
.main-container .mv-slider .cell-3.motion .visual-1 img{
	animation: 5s cubic-bezier(0.13, 0.68, 0.33, 1) 0s cell_3_visual_motion1 forwards;
}

@keyframes cell_3_visual_motion2{
	  0% { opacity:0; }
	 50% { opacity:0; }
	100% { opacity:1; }
}
.main-container .mv-slider .cell-3.motion .visual-2{
	animation: 3s linear 0s cell_3_visual_motion2 forwards;
}

@keyframes cell_3_copy_motion{
	  0% { opacity:0; transform: scale(1.1,1.1);}
	100% { opacity:1; transform: scale(1.0,1.0);}
}
.main-container .mv-slider .cell-3.motion .copy img{
	animation: 2s cubic-bezier(0.07, 0.36, 0.33, 1) 1.6s cell_3_copy_motion forwards;
}


.video-container{
	position: absolute; top:0; left: 0;
	width:100%; height: 100%;
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
}
@keyframes mainVideoFadeOut{
	  0% { opacity: 1; }
	100% { opacity: 0; }
}
.video-container.fadeOut{
	pointer-events: none;
	animation: mainVideoFadeOut 1s linear 0s forwards;
}
.video-container .video-inner{
	pointer-events: none;
}
.video-container video{
	width:100%; height: 100%;
	object-fit: contain;
	object-position: center center;
}

.video-control{
	position: absolute;
	top:12px; right: 40px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap:4px;
}

.video-control .video-btn-cls{
	background-color: #333;
	width: 90px; height:36px;
	background-repeat: no-repeat;
	background-size: auto 18px;
	background-position: center center;
	cursor: pointer;
	display: none;
	border-radius: 4px;
	z-index: 10;
}
.video-control .video-btn-cls.active{
	display: block;
}
.video-control .video-skip-btn{
	background-image: url("../images/top/main/mv-btn-skip.png");
}
.video-control .video-replay-btn{
	background-image: url("../images/top/main/mv-btn-replay.png");
}
.video-control .video-sound-btn{
	background-image: url("../images/top/main/mv-btn-sound-off.png");
	background-size: auto 16px;
	width: 100px;
}
.video-control .video-sound-btn.sound-off{
	background-image: url("../images/top/main/mv-btn-sound-on.png");
}



@media screen and (max-width:650px){
	.video-control{
		top:8px;
		right: 8px;
	}
	.video-control .video-btn-cls{
		width: 60px; height:30px;
		background-size: auto 15px;
	}
	.video-control .video-sound-btn{
		width: 80px;
		background-size: auto 14px;
	}
	.main-container,
	.main-container .mv-slider .mv-cell,
	.main-container .mv-slider .mv-cell-inner{
		aspect-ratio: 1280 / 1000;
	}
	
	.main-container .mv-slider .cell-1.motion .visual{
		width:160%;
	}
	.main-container .mv-slider .cell-1.motion .visual img{
		object-position: 0% bottom;
	}
	@keyframes cell_1_visual_motion{
			0% { margin-left: -50%; }
		100% { margin-left: -10%; }
	}
	
	.main-container .mv-slider .cell-2.motion .visual{
		width:160%;
	}
	.main-container .mv-slider .cell-2.motion .visual img{
		object-position: 0% bottom;
	}
	@keyframes cell_2_visual_motion {
			0% { margin-left: -10%; }
		100% { margin-left: -50%; }
	}

	.main-container .mv-slider .cell-3 .visual-1{
		width: 57%;
	}
	.main-container .mv-slider .cell-3 .visual-2{
		width: 43%;
	}
	.main-container .mv-slider .cell-3 .copy{
		left: 78.5%;
		width:35%;
	}
}



.video-container-jsm{
	width:100%;
	height: 100%;
	position: absolute;
	top:0; left: 0;
	z-index: 2;
	/*pointer-events: none;*/
}
@keyframes mainVideoJsmFadeOut{
	  0% { opacity: 1; }
	100% { opacity: 0; }
}
.video-container-jsm.fadeOut{
	pointer-events: none;
	animation: mainVideoJsmFadeOut 1s linear 0s forwards;
}