@charset "utf-8";
.story{
	margin:0 0 min(calc(68 / var(--vw-min) * 100vw),68px);
	position:relative;
}
@media screen and (max-width:768px){
	.story{
		margin:0 0 calc(43 / var(--vw-min) * 100vw);
	}
}
.story__title{
	position:absolute;
	left:50%;
	width:min(calc(1358 / var(--vw-min) * 100vw),1358px);
	margin-left:max(calc(-679 / var(--vw-min) * 100vw),-679px);
	top:max(calc(-96 / var(--vw-min) * 100vw),-96px);
	height:min(calc(116 / var(--vw-min) * 100vw),116px);
	background:url(../img/story/story_title.svg) no-repeat left top / contain;
	z-index:50;
	pointer-events:none;
}
@media screen and (max-width:768px){
	.story__title{
		position:absolute;
		left:0;
		width:100%;
		margin-left:0;
		top:calc(-40 / var(--vw-min) * 100vw);
		height:calc(50 / var(--vw-min) * 100vw);
	}
}
.story__inner{
	padding:min(calc(132 / var(--vw-min) * 100vw),132px) 0 min(calc(168 / var(--vw-min) * 100vw),168px);
}
@media screen and (max-width:768px){
	.story__inner{
		padding:calc(52 / var(--vw-min) * 100vw) 0 calc(70 / var(--vw-min) * 100vw);
	}
}
.story__inner:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:min(calc(212 / var(--vw-min) * 100vw),212px);
	background:var(--color-lightbrown);
	transform:skewX(37.5deg);
	transform-origin:right top;
}
@media screen and (max-width:768px){
	.story__inner:before{
		right:calc(48 / var(--vw-min) * 100vw);
	}
}
.story__inner:after{
	content:'';
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	left:min(calc(212 / var(--vw-min) * 100vw),212px);
	background:var(--color-lightbrown);
	transform:skewX(37.5deg);
	transform-origin:left bottom;
}
@media screen and (max-width:768px){
	.story__inner:after{
		left:calc(48 / var(--vw-min) * 100vw);
	}
}
.story__innerBg{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
}
.story__innerBg:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	bottom:min(calc(276 / var(--vw-min) * 100vw),276px);
	right:min(calc(212 / var(--vw-min) * 100vw),212px);
	background:var(--color-lightbrown);
}
@media screen and (max-width:768px){
	.story__innerBg:before{
		bottom:calc(64 / var(--vw-min) * 100vw);
		right:calc(48 / var(--vw-min) * 100vw);
	}
}
.story__innerBg:after{
	content:'';
	position:absolute;
	right:0;
	bottom:0;
	top:min(calc(276 / var(--vw-min) * 100vw),276px);
	left:min(calc(212 / var(--vw-min) * 100vw),212px);
	background:var(--color-lightbrown);
}
@media screen and (max-width:768px){
	.story__innerBg:after{
		top:calc(64 / var(--vw-min) * 100vw);
		left:calc(48 / var(--vw-min) * 100vw);
	}
}
.story__content{
	width:min(calc(800 / var(--vw-min) * 100vw),800px);
	margin:0 auto;
	position:relative;
	z-index:10;
}
@media screen and (max-width:768px){
	.story__content{
		width:calc(335 / var(--vw-min) * 100vw);
	}
}
.story__header{
	width:min(calc(1000 / var(--vw-min) * 100vw),1000px);
	margin:0 auto min(calc(40 / var(--vw-min) * 100vw),40px);
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
	z-index:50;
	font-family:var(--font-serif);
}
@media screen and (max-width:768px){
	.story__header{
		width:100%;
		margin:0 auto calc(24 / var(--vw-min) * 100vw);
		flex-direction:column-reverse;
	}
}
.story__headerTitle{
	display:flex;
	align-items:center;
	width:min(calc(580 / var(--vw-min) * 100vw),580px);
	height:100%;
	min-height:min(calc(83 / var(--vw-min) * 100vw),83px);
	padding-left:min(calc(102 / var(--vw-min) * 100vw),102px);
	position:relative;
}
@media screen and (max-width:768px){
	.story__headerTitle{
		width:100%;
		height:100%;
		min-height:calc(50 / var(--vw-min) * 100vw);
		padding:0 calc(20 / var(--vw-min) * 100vw);
		position:relative;
		justify-content:center;
	}
}
.story__headerNum{
	position:absolute;
	left:0;
	top:50%;
	right:0;
	height:min(calc(83 / var(--vw-min) * 100vw),83px);
	margin-top:max(calc(-41.5 / var(--vw-min) * 100vw),-41.5px);
}
@media screen and (max-width:768px){
	.story__headerNum{
		top:50%;
		height:calc(50 / var(--vw-min) * 100vw);
		margin-top:calc(-25 / var(--vw-min) * 100vw);
	}
}
.story__inner.s01 .story__headerNum{
	background:url(../img/story/num_01.svg) no-repeat left center / auto 100%;
}
.story__inner.s02 .story__headerNum{
	background:url(../img/story/num_02.svg) no-repeat left center / auto 100%;
}
.story__inner.s03 .story__headerNum{
	background:url(../img/story/num_03.svg) no-repeat left center / auto 100%;
}
.story__inner.s04 .story__headerNum{
	background:url(../img/story/num_04.svg) no-repeat left center / auto 100%;
}
.story__inner.s05 .story__headerNum{
	background:url(../img/story/num_05.svg) no-repeat left center / auto 100%;
}
.story__inner.s06 .story__headerNum{
	background:url(../img/story/num_06.svg) no-repeat left center / auto 100%;
}
.story__inner.s07 .story__headerNum{
	background:url(../img/story/num_07.svg) no-repeat left center / auto 100%;
}
.story__inner.s08 .story__headerNum{
	background:url(../img/story/num_08.svg) no-repeat left center / auto 100%;
}
.story__inner.s09 .story__headerNum{
	background:url(../img/story/num_09.svg) no-repeat left center / auto 100%;
}
.story__inner.s10 .story__headerNum{
	background:url(../img/story/num_10.svg) no-repeat left center / auto 100%;
}
.story__inner.s11 .story__headerNum{
	background:url(../img/story/num_11.svg) no-repeat left center / auto 100%;
}
.story__inner.s12 .story__headerNum{
	background:url(../img/story/num_12.svg) no-repeat left center / auto 100%;
}
.story__headerTitleText{
	font-size:min(calc(32 / var(--vw-min) * 100vw),32px);
	font-weight:700;
	display:block;
	position:relative;
	letter-spacing:0.03em;
	line-height:1.5;
}
@media screen and (max-width:768px){
	.story__headerTitleText{
		font-size:calc(20 / var(--vw-min) * 100vw);
	}
}
.story__headerTitleText:first-letter{
	color:var(--color-winered);
	font-weight:700;
}
.story__headerLists{
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	max-width:min(calc(384 / var(--vw-min) * 100vw),384px);
	position:relative;
}
@media screen and (max-width:768px){
	.story__headerLists{
		max-width:calc(312 / var(--vw-min) * 100vw);
		width:calc(312 / var(--vw-min) * 100vw);
		margin-bottom:calc(26 / var(--vw-min) * 100vw);
	}
}
.story__headerItem--title{
	font-size:min(calc(14 / var(--vw-min) * 100vw),14px);
	font-weight:600;
	font-family:var(--font-crimson);
	color:var(--color-camel);
	position:absolute;
	height:min(calc(14 / var(--vw-min) * 100vw),14px);
	line-height:1;
	letter-spacing:.04em;
	transform:rotate(90deg);
	transform-origin:left top;
	left:max(calc(-4 / var(--vw-min) * 100vw),-4px);
	top:min(calc(4 / var(--vw-min) * 100vw),4px);
}
@media screen and (max-width:768px){
	.story__headerItem--title{
		font-size:calc(12 / var(--vw-min) * 100vw);
		height:calc(12 / var(--vw-min) * 100vw);
		left:calc(-3 / var(--vw-min) * 100vw);
		top:calc(3 / var(--vw-min) * 100vw);
	}
}
.story__headerItem--number{
	width:min(calc(64 / var(--vw-min) * 100vw),64px);
	padding:min(calc(4 / var(--vw-min) * 100vw),4px) 0 min(calc(4 / var(--vw-min) * 100vw),4px) min(calc(8 / var(--vw-min) * 100vw),8px);
}
@media screen and (max-width:768px){
	.story__headerItem--number{
		width:calc(52 / var(--vw-min) * 100vw);
		padding:calc(3 / var(--vw-min) * 100vw) 0 calc(3 / var(--vw-min) * 100vw) calc(6 / var(--vw-min) * 100vw);
	}
}
.story__headerItem--link{
	display:flex;
	justify-content:center;
	align-items:center;
	height:min(calc(80 / var(--vw-min) * 100vw),80px);
	border:1px solid var(--color-camel);
	border-radius:min(calc(6 / var(--vw-min) * 100vw),6px);
	background:#FBF8EB;
	position:relative;
	text-decoration:none;
	color:var(--color-camel);
	font-size:min(calc(26 / var(--vw-min) * 100vw),26px);
	line-height:1;
	font-family:var(--font-crimson);
	transition:all 0.3s ease;
}
@media screen and (max-width:768px){
	.story__headerItem--link{
		height:calc(66 / var(--vw-min) * 100vw);
		border-radius:calc(4 / var(--vw-min) * 100vw);
		font-size:calc(20 / var(--vw-min) * 100vw);
	}
}
@media screen and (hover:hover){
	.story__headerItem--link:hover{
		transform:rotate(15deg);
	}
}
.story__headerItem--link.is-active{
	background:var(--color-winered);
	pointer-events:none;
}
.story__headerItem--link:before{
	content:'';
	position:absolute;
	top:min(calc(3 / var(--vw-min) * 100vw),3px);
	right:min(calc(3 / var(--vw-min) * 100vw),3px);
	bottom:min(calc(3 / var(--vw-min) * 100vw),3px);
	left:min(calc(3 / var(--vw-min) * 100vw),3px);
	background:url(../img/story/episode_frame.svg) no-repeat center center / contain;
}
@media screen and (max-width:768px){
	.story__headerItem--link:before{
		top:calc(2 / var(--vw-min) * 100vw);
		right:calc(2 / var(--vw-min) * 100vw);
		bottom:calc(2 / var(--vw-min) * 100vw);
		left:calc(2 / var(--vw-min) * 100vw);
	}
}
.story__images{
	position:relative;
	z-index:50;
}
.story__imagesSwiper{
	padding-bottom:min(calc(72 / var(--vw-min) * 100vw),72px);
	margin-bottom:min(calc(40 / var(--vw-min) * 100vw),40px);
}
@media screen and (max-width:768px){
	.story__imagesSwiper{
		padding-bottom:calc(48 / var(--vw-min) * 100vw);
		margin-bottom:calc(24 / var(--vw-min) * 100vw);
	}
}
.story__imagesSwiper-slide{
	width:min(calc(810 / var(--vw-min) * 100vw),810px);
	padding:0 min(calc(5 / var(--vw-min) * 100vw),5px);
	position:relative;
}
@media screen and (max-width:768px){
	.story__imagesSwiper-slide{
		width:calc(341 / var(--vw-min) * 100vw);
		padding:0 calc(3 / var(--vw-min) * 100vw);
	}
}
.story__imagesSwiper-slide:before{
	content:'';
	position:absolute;
	top:0;
	right:min(calc(4 / var(--vw-min) * 100vw),4px);
	bottom:0;
	left:min(calc(4 / var(--vw-min) * 100vw),4px);
	border:1px solid var(--color-darkbrown);
}
@media screen and (max-width:768px){
	.story__imagesSwiper-slide:before{
		right:calc(3 / var(--vw-min) * 100vw);
		left:calc(3 / var(--vw-min) * 100vw);
	}
}
.story__imagesSwiper-slide:after{
	content:'';
	position:absolute;
	left:min(calc(4 / var(--vw-min) * 100vw),4px);
	top:0;
	right:min(calc(4 / var(--vw-min) * 100vw),4px);
	bottom:0;
	background:rgba(21,0,0,0.50);
	transition:opacity 0.6s ease;
}
@media screen and (max-width:768px){
	.story__imagesSwiper-slide:after{
		left:calc(3 / var(--vw-min) * 100vw);
		right:calc(3 / var(--vw-min) * 100vw);
	}
}
.story__imagesSwiper-slide.swiper-slide-active:after{
	opacity:0;
}
.story__imagesSwiper-slide img{
	display:block;
	width:100%;
	height:auto;
}
.story__imagesSwiper .swiper-nextPrev{
	display:flex;
	width:min(calc(800 / var(--vw-min) * 100vw),800px);
	left:50%;
	margin-left:max(calc(-400 / var(--vw-min) * 100vw),-400px);
}
@media screen and (max-width:768px){
	.story__imagesSwiper .swiper-nextPrev{
		width:calc(335 / var(--vw-min) * 100vw);
		margin-left:calc(-167.5 / var(--vw-min) * 100vw);
	}
}
.story__description{
	font-size:min(calc(15 / var(--vw-min) * 100vw),15px);
	font-weight:600;
	font-family:var(--font-serif);
	line-height:2;
	letter-spacing:0.03em;
	margin-bottom:min(calc(56 / var(--vw-min) * 100vw),56px);
}
@media screen and (max-width:768px){
	.story__description{
		font-size:calc(13 / var(--vw-min) * 100vw);
		margin-bottom:calc(32 / var(--vw-min) * 100vw);
	}
}
.story__trailer{
	width:100%;
}
.story__trailerin{
	width:100%;
	padding:min(calc(5 / var(--vw-min) * 100vw),5px);
	border:2px solid var(--color-camel);
	position:relative;
}
@media screen and (max-width:768px){
	.story__trailerin{
		padding:calc(8 / var(--vw-min) * 100vw);
	}
}
.story__trailerin::before{
	position:absolute;
	left:0;
	top:0;
	content:"";
	display:block;
	width:100%;
	height:100%;
	background:url(../img/common/movie_frame_deco.svg) no-repeat center center / contain;
	pointer-events:none;
	z-index:50;
}
@media screen and (max-width:768px){
	.story__trailerin{
		width:100%;
	}
}
.movieItem__link{
	width:100%;
	display:block;
	padding-top:56.25%;
	position:relative;
	overflow:hidden;
	border:1px solid var(--color-camel);
}
.movieItem__link:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#150000;
	opacity:0.7;
	z-index:10;
	transition:all 0.6s ease;
}
.movieItem__link:hover:before{
	opacity:0.3;
}
.movie__swiperImg{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
.movie__playBtn{
	width:min(calc(76 / var(--vw-min) * 100vw),76px);
	height:min(calc(76 / var(--vw-min) * 100vw),76px);
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:max(calc(-38 / var(--vw-min) * 100vw),-38px);
	margin-top:max(calc(-38 / var(--vw-min) * 100vw),-38px);
	z-index:30;
	transition:all 0.6s ease;
}
@media screen and (max-width:768px){
	.movie__playBtn{
		width:calc(80 / var(--vw-min) * 100vw);
		height:calc(80 / var(--vw-min) * 100vw);
		margin-left:calc(-40 / var(--vw-min) * 100vw);
		margin-top:calc(-40 / var(--vw-min) * 100vw);
	}
}
@media screen and (hover:hover){
	.movieItem__link:hover .movie__playBtn{
		transform:scale(-10) !important;
		filter:blur(20px);
		opacity:0;
	}
}
.movie__playBtn:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	background:url(../img/common/movie_playcircle.svg) no-repeat center center / contain;
	animation:rotation 10s ease-in-out infinite;
}
.movie__playBtnLabel{
	content:'';
	position:absolute;
	display:block;
	left:50%;
	top:50%;
	margin-top:max(calc(-5 / var(--vw-min) * 100vw),-5px);
	margin-left:max(calc(-28 / var(--vw-min) * 100vw),-28px);
	width:min(calc(56 / var(--vw-min) * 100vw),56px);
	height:min(calc(10 / var(--vw-min) * 100vw),10px);
	background:url(../img/common/movie_playtext.svg) no-repeat center center / contain;
	z-index:31;
	transition:all 0.6s ease;
}
@media screen and (max-width:768px){
	.movie__playBtnLabel{
		margin-top:calc(-5 / var(--vw-min) * 100vw);
		margin-left:calc(-16 / var(--vw-min) * 100vw);
		width:calc(32 / var(--vw-min) * 100vw);
		height:calc(10 / var(--vw-min) * 100vw);
	}
}
@media screen and (hover:hover){
	.movieItem__link:hover .movie__playBtnLabel{
		transform:scale(1.2) !important;
	}
}
.story__trailerTitle{
	font-size:min(calc(15 / var(--vw-min) * 100vw),15px);
	font-weight:600;
	text-align:center;
	padding-top:min(calc(8 / var(--vw-min) * 100vw),8px);
	font-family:var(--font-serif);
}
@media screen and (max-width:768px){
	.story__trailerTitle{
		font-size:calc(13 / var(--vw-min) * 100vw);
		padding-top:calc(12 / var(--vw-min) * 100vw);
	}
}