@charset "utf-8";
/*-----------------------------------------------
 * MOVIE
-------------------------------------------------*/
.movieLists {
    width: 100%;
    display: grid;
    gap: min(1.91667vw, calc(23px * var(--max-percent)));
    grid-template-columns: repeat(3, 1fr);
}
.movieList{
	width: 100%;
}
.btn_moviePlay{
	width: 318px;
	width: 100%;
	clip-path: polygon(min(1.6667vw, calc(20px * var(--max-percent))) 0, calc(100% - min(1.6667vw, calc(20px * var(--max-percent)))) 0, 100% min(1.6667vw, calc(20px * var(--max-percent))), 100% calc(100% - min(1.6667vw, calc(20px * var(--max-percent)))), calc(100% - min(1.6667vw, calc(20px * var(--max-percent)))) 100%, min(1.6667vw, calc(20px * var(--max-percent))) 100%, 0 calc(100% - min(1.6667vw, calc(20px * var(--max-percent)))), 0% min(1.6667vw, calc(20px * var(--max-percent))));
	position: relative;
	padding: 1px;
}
.btn_moviePlay:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../img/movie/movie_frame.svg) no-repeat center / contain;
}
.btn_movieThumb{
	display: block;
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.btn_movieThumb img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}
.movieTitle{
	margin-top: 8px;
	font-weight: 700;
	text-align: center;
	color: var(--color-blue);
}

.btn_movieCircle{
	width: min(7.5vw, calc(90px * var(--max-percent)));
	height: min(7.5vw, calc(90px * var(--max-percent)));
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.btn_movieCircle:before,
.btn_movieCircle:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.btn_movieCircle:before{
	width: 100%;
	height: 100%;
	background: url(../img/common/btn_moviePlay_frame.svg) no-repeat center / contain;
	animation: 18s rotate linear infinite reverse;
}
.btn_movieCircle:after{
	width: 27.7778%;/* 25px */
	height: 27.7778%;/* 25px */
	background: url(../img/common/arrow_r.svg) no-repeat center / contain;
}


@media screen and (max-width:767px){
	.movieLists{
		grid-template-columns: repeat(1, 1fr);
		gap: var(--sp-size-24);
	}
	.btn_moviePlay{
		clip-path: polygon(var(--sp-size-42) 0, calc(100% - var(--sp-size-42)) 0, 100% var(--sp-size-42), 100% calc(100% - var(--sp-size-42)), calc(100% - var(--sp-size-42)) 100%, var(--sp-size-42) 100%, 0 calc(100% - var(--sp-size-42)), 0% var(--sp-size-42));
	}
	.movieTitle{
		margin-top: var(--sp-size-16);
	}
	.btn_movieCircle{
		width:min(20.2667vw,152px);
		height: min(20.2667vw,152px);;
	}
	.btn_movieCircle:after{
		width: var(--sp-size-40);
		height: var(--sp-size-40);
	}
	.btn_movieCircle:before{
		background-image: url(../img/common/btn_moviePlay_frame-s.svg);
	}
}

@media (hover: hover) and (pointer: fine){
	.btn_movieThumb img{
		transition: .3s ease;
	}
	.btn_moviePlay:hover .btn_movieThumb img{
		transform: scale(1.05);
	}
	.btn_movieCircle:after{
		transition: .3s ease;
	}
	.btn_moviePlay:hover .btn_movieCircle:before{
		animation-play-state: paused;
	}
	.btn_moviePlay:hover .btn_movieCircle:after{
		transform: scale(1.2);
	}
}


/** is-ani **/
.btn_moviePlay{
	opacity: 0;
	transform: translateY(10%);
	transition: .4s ease .6s;
}
.movieTitle{
	opacity: 0;
	transform: translateY(10px);
	transition: .4s ease .6s;
}

.movieLists.is-ani .btn_moviePlay,
.movieLists.is-ani .movieTitle{
	opacity: 1;
	transform: translateY(0%);
}