@charset "utf-8";
.moviePage__inner {
	width:min(calc(1000 / var(--vw-min) * 100vw),1000px);
	margin:0 auto;
	position:relative;
	padding-bottom:min(calc(160 / var(--vw-min) * 100vw),160px);
}
@media screen and (max-width:768px){
	.moviePage__inner {
		width:calc(654 / var(--vw-min) * 100vw);
		padding-bottom:calc(130 / var(--vw-min) * 100vw);
	}
}
.moviePageLists {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:min(calc(40 / var(--vw-min) * 100vw),40px) 0;
}
@media screen and (max-width:768px){
	.moviePageLists {
		display:block;
	}
}
.moviePageItem {
	width:calc((100% - min(calc(40 / var(--vw-min) * 100vw),40px)) / 2);
}
@media screen and (max-width:768px){
	.moviePageItem {
		width:100%;
		margin-bottom:calc(48 / var(--vw-min) * 100vw);
	}
	.moviePageItem:last-child {
		margin-bottom:0;
	}
}
.moviePageLink {
	display:block;
	text-decoration:none;
}
.moviePageThumb {
	width:100%;
	aspect-ratio:16 / 9;
	position:relative;
	overflow:hidden;
	border:1px solid var(--color-gold);
	background:var(--color-lpink);
}
.moviePageThumb img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.moviePageThumb:before {
	content:'';
	position:absolute;
	inset:0;
	background:#F88CAA;
	opacity:.35;
	transition:opacity .3s ease;
	z-index:1;
	pointer-events:none;
}
.moviePagePlay {
	width:min(calc(80 / var(--vw-min) * 100vw),80px);
	height:min(calc(80 / var(--vw-min) * 100vw),80px);
	position:absolute;
	left:50%;
	top:50%;
	margin-left:max(calc(-40 / var(--vw-min) * 100vw),-40px);
	margin-top:max(calc(-40 / var(--vw-min) * 100vw),-40px);
	z-index:2;
	pointer-events:none;
}
@media screen and (max-width:768px){
	.moviePagePlay {
		width:calc(100 / var(--vw-min) * 100vw);
		height:calc(100 / var(--vw-min) * 100vw);
		margin-left:calc(-50 / var(--vw-min) * 100vw);
		margin-top:calc(-50 / var(--vw-min) * 100vw);
	}
}
.moviePagePlay:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-webkit-mask:url(../img/common/icon/play_circle.svg) no-repeat center center / contain;
	mask:url(../img/common/icon/play_circle.svg) no-repeat center center / contain;
	background:#fff;
	transition:all 0.6s ease;
}
.moviePagePlay:after {
	content:'';
	position:absolute;
	width:min(calc(20 / var(--vw-min) * 100vw),20px);
	height:min(calc(22 / var(--vw-min) * 100vw),22px);
	top:50%;
	left:50%;
	margin-top:max(calc(-11 / var(--vw-min) * 100vw),-11px);
	margin-left:max(calc(-8 / var(--vw-min) * 100vw),-8px);
	-webkit-mask:url(../img/common/icon/play.svg) no-repeat center center / contain;
	mask:url(../img/common/icon/play.svg) no-repeat center center / contain;
	background:#fff;
}
@media screen and (max-width:768px){
	.moviePagePlay:after {
		width:calc(25 / var(--vw-min) * 100vw);
		height:calc(28 / var(--vw-min) * 100vw);
		margin-top:calc(-14 / var(--vw-min) * 100vw);
		margin-left:calc(-10 / var(--vw-min) * 100vw);
	}
}
.moviePageName {
	font-size:min(calc(16 / var(--vw-min) * 100vw),16px);
	color:var(--color-gold);
	font-weight:700;
	line-height:1.4;
	text-align:center;
	margin-top:min(calc(16 / var(--vw-min) * 100vw),16px);
	transition:color .3s ease;
}
@media screen and (max-width:768px){
	.moviePageName {
		font-size:calc(28 / var(--vw-min) * 100vw);
		margin-top:calc(24 / var(--vw-min) * 100vw);
	}
}
@media (hover: hover) and (pointer: fine){
	.moviePageLink:hover .moviePageThumb:before {
		opacity:.55;
	}
	.moviePageLink:hover .moviePagePlay:before {
		transform:rotate(360deg);
	}
	.moviePageLink:hover .moviePageName {
		color:var(--color-pink);
	}
}