@charset "UTF-8";

/* ================================================================================
movie
================================================================================ */
@media print, screen
{

#movie > .inner
{
	max-width: calc(1000 * var(--v));
	/* padding: calc(40 * var(--v)) 0; */
}
#movie .movieArea
{
	max-width: calc(900 * var(--v));
	margin: 0 auto;
	/* background: var(--Cgray0); */
}

#movie .movie,
#movie iframe.youtube
{
	position: relative;
	display: block;
	width: 100%;	aspect-ratio: calc(640/360);
}

#movie .movies
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(20 * var(--u));
	padding: calc(40 * var(--v)) 0 0;
}
#movie .movies .swiper
{
	width: calc(100% - (50 * 2 + 20 * 2) * var(--u));
	padding: 1px;
	margin: 0;
}
#movie .movies .swiper-wrapper{	align-items: stretch;	}
#movie .movies .swiper-slide{	width: calc((100% - 20px * 3) / 4);	height: auto;	}

#movie .movies .inner
{
	width: 100%;	height: 100%;
	/* background: white; */
	background: url("../image/common/background_pattern.png") repeat;
	padding: calc(10 * var(--v)) calc(10 * var(--u));

	border: 3px solid var(--Ctheme5);
	border-radius: calc(10 * var(--v));

	transition: var(--T02);
}
#movie .movies .swiper-slide.on .inner
{
	/* background: var(--Ctheme3); */
	background:
		linear-gradient(var(--Ctheme5) 0%),
		url("../image/common/background_pattern.png") repeat
	;
	background-blend-mode: overlay, normal;

}


#movie .movies .inner picture{	margin: 0 auto 10px;	}
#movie .movies .inner p
{
	color: var(--Ctheme5);
	font-size: var(--fzv16);
	font-weight: 500;
	line-height: 1.5;
}
/* #movie .movies .swiper-slide.on .inner p{	color: white;	} */

#movie .movies .prev,
#movie .movies .next
{
	flex-shrink: 0;
	/* width: calc(50 * var(--v));	aspect-ratio: 1; */
	width: calc(24 * var(--v));	aspect-ratio: 24/37;
	cursor: pointer;
}
#movie .movies .prev[aria-disabled="true"],
#movie .movies .next[aria-disabled="true"]
{
	opacity: 0.3;
	pointer-events: none;
}
#movie .movies .prev svg,
#movie .movies .next svg
{
	--color:white;
	display: block;
	width: 100%;	height: 100%;
}


}
@media screen and (max-width: 1000px)
{

#movie .movies .swiper-slide{	width: calc((100% - (20px * 1)) / 2);	height: auto;	}
#movie .movies .inner p{	font-size: var(--fzv24);	}
#movie .movies .prev,
#movie .movies .next
{	width: calc(36 * var(--v));	}

}


/* ======================================== end ======================================== */