@charset "utf-8";
/*-----------------------------------------------
 * MOVIE - lists
-------------------------------------------------*/
.movieLists{
	width:100%;
	display:grid;
	gap:min(2vw, 24px);
	grid-template-columns:repeat(2, 1fr);
}
.movieList{
	width:100%;
}
.movieListIn{
	width:100%;
}
.movieList__movWrap{
	width:100%;
	position:relative;
	padding:8px;
	line-height:0;
}
.movieList__movFrameWrap{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.movieList__movFrame,
.movieList__movFrame span{
	position:absolute;
}
.movieList__movFrame span{
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:var(--color-main-brown);
	transition:.4s cubic-bezier(.17,.67,.65,1);
}
.movieList__movFrame.-t{
	top:0;
	right:0;
	left:48px;
	height:2px;
}
.movieList__movFrame.-r{
	top:0;
	right:0;
	bottom:128px;
	width:2px;
}
.movieList__movFrame.-b{
	bottom:0;
	left:0;
	right:48px;
	height:2px;
}
.movieList__movFrame.-l{
	bottom:0;
	left:0;
	top:128px;
	width:2px;
}
.btn_movieListPlay{
	position:relative;
	width:100%;
	padding-top:56.25%;
	overflow:hidden;
}
.btn_movieListPlay:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:var(--color-main-red);
	opacity:60%;
	z-index:2;
	transition:opacity .3s ease;
}
.btn_movieListPlay img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .4s cubic-bezier(.64,.39,.46,1);
}
.icon-movPlay{
	width:23.3919%;/* 80 */
	height:41.6667%;/* 80 */
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	z-index:2;
}
.icon-movPlay:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../img/common/icon_play__base.svg) no-repeat center / contain;
	animation:12s ani_rotate linear infinite;
}
.icon-movPlay:after{
	content:'';
	position:absolute;
	top:0;
	left:10%;
	right:0;
	bottom:0;
	margin:auto;
	width:45%;/* 36 */
	height:50%;/* 40 */
	background:url(../img/common/icon_play.svg) no-repeat center / contain;
	transition:transform .4s cubic-bezier(.84,.33,.53,.97);
}
.movieList__title{
	line-height:1.5;
	font-weight:500;
	text-align:center;
	margin-top:16px;
}
@media (hover:hover) and (pointer:fine){
	.btn_movieListPlay:hover::before{
		opacity:40%;
	}
	.btn_movieListPlay:hover img{
		transform:scale(1.05);
	}
	.btn_movieListPlay:hover .icon-movPlay:before{
		animation-play-state:paused;
	}
	.btn_movieListPlay:hover .icon-movPlay:after{
		transform:rotate(360deg) scale(1.1);
	}
}
@media screen and (max-width:767px){
	.movieLists{
		padding:0 var(--sp-size-48);
		gap:var(--sp-size-48);
		grid-template-columns:repeat(1, 1fr);
	}
	.movieList__movWrap{
		padding:var(--sp-size-20);/* 20 */
	}
	.movieList__movFrame.-t{
		left:var(--sp-size-96);
		height:var(--sp-size-4);
	}
	.movieList__movFrame.-r{
		bottom:min(calc(230 / var(--min-ww) * 100vw), 230px);
		width:var(--sp-size-4);
	}
	.movieList__movFrame.-b{
		right:var(--sp-size-96);
		height:var(--sp-size-4);
	}
	.movieList__movFrame.-l{
		top:min(calc(230 / var(--min-ww) * 100vw), 230px);
		width:var(--sp-size-4);
	}
	.icon-movPlay{
		width:var(--sp-size-96);
		height:var(--sp-size-96);
	}
	.movieList__title{
		margin-top:var(--sp-size-16);
	}
}
/* scrAni */
.btn_movieListPlay{
	opacity:0;
	transform:scale(0.8);
	transition:transform .6s cubic-bezier(.64,.39,.46,1) 1.4s, opacity .6s cubic-bezier(.64,.39,.46,1) 1.4s;
}
.movieList__movFrame span{
	transition:.4s cubic-bezier(.17,.67,.65,1) 1s;
}
.movieList__movFrame.-t span{
	width:0%;
	margin-left:auto;
}
.movieList__movFrame.-r span{
	height:0%;
}
.movieList__movFrame.-b span{
	width:0%;
}
.movieList__movFrame.-l span{
	height:0%;
	margin-top:auto;
}
.movieList__title{
	opacity:0;
	transform:translateY(50%);
	transition:transform .6s cubic-bezier(.64,.39,.46,1) 1.4s, opacity .6s cubic-bezier(.64,.39,.46,1) 1.4s;
}
/* scrAni - is-ani */
#movie.is-ani .btn_movieListPlay{
	opacity:1;
	transform:scale(1);
}
#movie.is-ani .movieList__movFrame.-t span,
#movie.is-ani .movieList__movFrame.-b span{
	width:100%;
}
#movie.is-ani .movieList__movFrame.-r span,
#movie.is-ani .movieList__movFrame.-l span{
	height:100%;
}
#movie.is-ani .movieList__title{
	opacity:1;
	transform:translateY(0%);
}
/**
* CATEGORY
**/
.movieCategoryListsWrap{
	width:100%;
	position:relative;
	margin-bottom:48px;
}
.movieCategoryListsInWrap{
	padding-left:24px;
	padding-right:24px;
	padding-bottom:12px;
	overflow:auto;
}

.movieCategoryLists{
	display:flex;
	justify-content:center;
}
.movieCategoryList{
	flex-shrink:0;
	padding:12px 8px 20px 8px;
}
.movieCategoryList > .cont_h2__linkBtnWrap{
	position:relative;
	width:auto;
	right:unset;
}
.movieCategoryList > .cont_h2__linkBtnWrap > .cont_h2__link{
	padding:0 24px;
}

.movieCategory_lines{
	position:absolute;
	height:10px;
	left:50%;
	right:50%;
}
.movieCategory_lines:before,
.movieCategory_lines:after{
	content:'';
	position:absolute;
	height:2px;
	background-color:var(--color-main-brown);
}
.movieCategory_lines:before{
	top:0;
	left:0;
	right:0;
}
.movieCategory_lines:after{
	bottom:0;
	left:0;
	right:0;
}
.movieCategory_lines._1{
	top:34px;
}
/** is-current **/
.movieCategoryList.--is-current .cont_h2__link{
	background-color:var(--color-main-brown);
	color:#FFF;
	transform:translate(4px, 4px);
}
.movieCategoryList.--is-current .cont_h2__link > .cont_h2__link__txt{
	color:#FFF;
}
.movieCategoryList.--is-current .cont_h2__link:before{
	bottom:12px;
}
.movieCategoryList.--is-current .cont_h2__linkBtn_frame{
	top:4px;
	left:4px;
}
/** loaded **/
.movieCategory_lines{
	transition:left .4s ease .2s, right .4s ease .2s;
}
#movie.is-ani .movieCategory_lines{
	left:0;
	right:0;
}
@media screen and (max-width:767px){
	.movieCategoryListsWrap{
		margin-bottom:var(--sp-size-48);
	}
	.movieCategoryListsInWrap{
		padding-left:var(--sp-size-24);
		padding-right:var(--sp-size-24);
		padding-bottom:var(--sp-size-12);
		overflow:auto;
	}
	.movieCategoryList{
		padding:var(--sp-size-12) var(--sp-size-8) var(--sp-size-20) var(--sp-size-8);
	}
	.movieCategoryList > .cont_h2__linkBtnWrap > .cont_h2__link{
		padding:0 var(--sp-size-40);
	}
	.movieCategory_lines{
		height:var(--sp-size-20);
	}
	.movieCategory_lines:before,
	.movieCategory_lines:after{
		height:var(--sp-size-4);
	}
/* lines */
	.movieCategory_lines._1{
		top:min(calc(48 / var(--min-ww) * 100vw), 48px);
	}
/* is-current */
	.movieCategoryList.--is-current .cont_h2__link{
		transform:translate(min(calc(8 / var(--min-ww)* 100vw), 8px), min(calc(8 / var(--min-ww)* 100vw), 8px));
	}
	.movieCategoryList.--is-current .cont_h2__link:before{
		bottom:var(--sp-size-24);
	}
	.movieCategoryList.--is-current .cont_h2__linkBtn_frame{
		top:min(calc(8 / var(--min-ww)* 100vw), 6px);
		left:min(calc(8 / var(--min-ww)* 100vw), 6px);
	}
}