@charset "UTF-8";
/* html {font-size: 20px;} */



/*  
#slider-block {margin-top: -320px;}
@media screen and (max-width: 880px) {
	#slider-block {margin-top: -340px;}
}
*/

/* ────────────────────────────────────────────────────────────────────────────────────
layer
──────────────────────────────────────────────────────────────────────────────────── */
.layer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.8);
	width: 100vw;
	height: 100vh;
	opacity: 0;
}

.layer .close {
	background: rgba(43, 180, 179, 1.0) url("/assets/img/top/slider/btn-close.svg") no-repeat 50% 50% / 50% auto;
	position: absolute;
	top: 10%;
	right: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
	/* border-radius:50px; */
}
	
.layer iframe {
	width: 100%;
	width: min(142.22vh, 100vw);
}

@media all and (min-width: 880px) {
	.slider {margin: 0 auto;max-width: 68rem;}
	.layer iframe {width: 80%;width: min(142.22vh, 80vw);}
}


/* ────────────────────────────────────────────────────────────────────────────────────
article.slider
──────────────────────────────────────────────────────────────────────────────────── */
article.slider {padding: 0 1.5rem;
	
}
article.slider img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
article.slider ul {
	list-style-position: outside;
	list-style-type: none;
}
article.slider ol {
	list-style-position: outside;
}


/* ────────────────────────────────────────────────────────────────────────────────────
section.movies
──────────────────────────────────────────────────────────────────────────────────── */
section.movies        {
	position: relative;
	margin: -24.115rem -1.5rem 0;
	padding-top: 0.5rem;
	height: 8.215rem;
}
/* 
section.movies::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: -1;
	margin-left: -50vw;
	background: #065FE3;
	width: 100vw;
	height: 4.6rem;
} */

section.movies li {
	position: absolute;
	top: 3.115rem;
	left: 50%;
	margin: -3.615rem 0 0 -7.60rem;
	width: 14.9rem;
	height: 8.35rem;
	opacity: 0;
	transform: translateX(0) scale(0.3);
	transition: 0.5s;
	cursor: pointer;
	background:linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.8) 100%);
	/* box-shadow: 0 0 4px gray; */
	/* 
	position: absolute;
	top: 4.115rem;
	left: 50%;
	margin: -3.615rem 0 0 -6.45rem;
	width: 12.9rem;
	height: 7.23rem;
	opacity: 0;
	transform: translateX(0) scale(0.3);
	transition: 0.5s;
	cursor: pointer;
	background:linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.8) 100%);
	 */
}

section.movies li iframe {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

section.movies li.before2 {
	transform: translateX(-152%) scale(0.4);
}

section.movies li.after2 {
	transform: translateX(152%) scale(0.4);
}

section.movies li.before {
	z-index: 1;
	opacity: 1;
	transform: translateX(-91.5%) scale(0.7);
}

section.movies li.after {
	z-index: 1;
	opacity: 1;
	transform: translateX(91.5%) scale(0.7);
}

section.movies li.current {
	z-index: 2;
	opacity: 1;
	transform: translateX(0) scale(1);
}

section.movies .prev,
section.movies .next {
	position: absolute;
	top: 33%;
	z-index: 3;
	background: no-repeat 50% 50% / 100% auto;
	width: 2.9rem;
	height: 2.9rem;
	cursor: pointer;
	transform: scale(1);
	transition: transform 0.5s;
}

section.movies .prev:hover,
section.movies .next:hover {
	transform: scale(1.2);
}

section.movies .prev {
	left: 0.1rem;
	background-image: url("/assets/img/top/slider/btn-prev.svg");
}

section.movies .next {
	right: 0.1rem;
	background-image: url("/assets/img/top/slider/btn-next.svg");
}

/* ────────────────────────────────────────────────────────────────────────────────────
section.contents
──────────────────────────────────────────────────────────────────────────────────── */
section.contents {
	position: relative;
	margin: 0 -1.5rem;
	height: 6.5rem;
}

section.contents::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: -1;
	margin-left: -50vw;
	/* background: #0450BF; */
	width: 100vw;
	height: 100%;
}

section.contents li {
	position: absolute;
	top: 3.25rem;
	left: 50%;
	margin: -2.42rem 0 0 -6.45rem;
	width: 12.9rem;
	height: 5.2rem;
	opacity: 0;
	transform: translateX(0);
	transition: 0.5s;
	outline: 2px solid rgba(232, 50, 105, 1.0);
	box-shadow: 0 0 8px gray;
}

section.contents li image {
	width: 100%;
}

section.contents li.before2 {
	transform: translateX(-212%);
}

section.contents li.after2 {
	transform: translateX(212%);
}

section.contents li.before {
	z-index: 1;
	opacity: 1;
	transform: translateX(-106%);
}

section.contents li.after {
	z-index: 1;
	opacity: 1;
	transform: translateX(106%);
}

section.contents li.current {
	z-index: 2;
	opacity: 1;
	transform: translateX(0);
}

section.contents .prev,
section.contents .next {
	position: absolute;
	top: 30%;
	z-index: 3;
	background: no-repeat 50% 50% / 100% auto;
	width: 2.9rem;
	height: 2.9rem;
	cursor: pointer;
	transform: scale(1);
	transition: transform 0.5s;
}

section.contents .prev:hover,
section.contents .next:hover {
	transform: scale(1.2);
}

section.contents .prev {
	left: 0.1rem;
	background-image: url("/assets/img/top/slider/btn-prev.svg");
}

section.contents .next {
	right: 0.1rem;
	background-image: url("/assets/img/top/slider/btn-next.svg");
}





@media all and (min-width:880px) {
	section.movies        {
		/* margin-top: -5.85rem; */
		margin-top: -21.85rem;
		/* height: 11.55rem; */
		height: 15.55rem;
	}

	section.movies::before {
		height: 6.2rem;
	}
	
	section.movies li {
		top: 5.85rem;
		/* margin: -5.35rem 0 0 -9.5rem; */
		/* width: 19rem; */
		/* height: 10.7rem; */
		margin: -5.35rem 0 0 -13rem;
		width: 26rem;
		height: 13.2rem;
	}

	section.movies .prev,
	section.movies .next {
		top: 39%;
	}

	section.contents {
		height: 7.8rem;
	}

	section.contents li {
		top: 3.9rem;
		margin: -2.9rem 0 0 -7.7rem;
		width: 15.4rem;
		height: 6.2rem;
		outline: 2px solid rgba(232, 50, 105, 1.0);
	}

	section.contents .prev,
	section.contents .next {
		top: 36%;
	}
}


@media all and (min-width:1020px) {
	section.movies {
		margin-left: calc(24rem - 50vw);
		margin-right: calc(24rem - 50vw);
	}
	section.contents {
		margin-left: calc(24rem - 50vw);
		margin-right: calc(24rem - 50vw);
	}
}


@media all and (min-width:1020px) {
	section.movies .prev {
		left: calc(50vw - 27.5rem);
	}
	section.movies .next {
		right: calc(50vw - 27.5rem);
	}
	section.contents .prev {
		left: calc(50vw - 27.5rem);
	}
	section.contents .next {
		right: calc(50vw - 27.5rem);
	}
}


.saisyo{padding-top:200px;}
@media all and (max-height:1280px) {section.movies        {margin-top: -20.85rem;} .saisyo{padding-top:140px;}}
@media all and (max-height:1080px) {section.movies        {margin-top: -13.85rem;} .saisyo{padding-top:120px;}}
@media all and (max-height:980px) {section.movies        {margin-top: -12.85rem;} .saisyo{padding-top:80px;}}
@media all and (max-height:880px) {section.movies        {margin-top: -8.85rem;} .saisyo{padding-top:50px;}}
@media all and (max-height:780px) {section.movies        {margin-top: -8.85rem;} .saisyo{padding-top:100px;}}
@media all and (max-height:680px) {section.movies        {margin-top: -8.85rem;} .saisyo{padding-top:50px;}}
@media all and (max-height:580px) {section.movies        {margin-top: -6.85rem;} .saisyo{padding-top:100px;}}
@media all and (max-height:480px) {section.movies        {margin-top: -4.85rem;} .saisyo{padding-top:50px;}}
@media all and (max-height:380px) {section.movies        {margin-top: -2.85rem;} .saisyo{padding-top:0px;}}
@media all and (max-height:280px) {section.movies        {margin-top: 2.85rem;} .saisyo{padding-top:0px;}}