@charset "utf-8";
.cont_h2--ja {
    letter-spacing: 0.2em;
}
/* storyTtl */
.storyTtl{
    font-weight: 500;
	font-size: 24px;
}
.storyTtl__num{
    color: var(--color-main-red);
	margin-right: 15px;
}
@media screen and (max-width:767px){
	.storyTtl{
		font-size: calc(28 / var(--def-ww) * 100vw);
	}
	.storyTtl__num{
		margin-right: calc(30 / var(--def-ww) * 100vw);
	}
}

/**
 * storyImgLists
 */
.storyImgListsAreaWrap {
	margin-top: 60px;
	position: relative;
}
@media screen and (max-width:767px){
	.storyImgListsAreaWrap {
		margin-top: calc(24 / var(--def-ww) * 100vw);
	}
}
.storyImgListsArea {
	position: relative;
}

/* wrap */
.storyImgListsWrap {
	width: 100%;
	max-width: calc(500 / var(--def-ww) * 100vw);
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width:767px){
	.storyImgListsWrap {
		width: 100%;
		max-width:unset;
	}
}

/* li */
.storyImgLists > li {
	width: 100%;
	max-width: calc(500 / var(--def-ww) * 100vw);
	position: relative;
}
@media screen and (max-width:767px){
	.storyImgLists > li {
		max-width: unset;
	}
}

/* active */
/*
.storyImgLists > li:after {
	content: "";
	background-color: #FFF;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	mix-blend-mode: color;
	transition: opacity .4s ease;
}
.storyImgLists > li.swiper-slide-active:after {
	opacity: 0;
}
.storyImgLists > li:before {
	content: "";
	background-color: #FFF;
	width: 100%;
	height: 100%;
	opacity: .4;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	transition: opacity .4s ease;
}
.storyImgLists > li.swiper-slide-active:before {
	opacity: 0;
}
*/

/* img */
.storyImgLists > li img {
	width: 100%;
	position: relative;
	z-index: 1;
}

/**
 * storyImgThumbLists
 */
.storyImgThumbListsWrap {
	width:100%;
	margin: 40px auto 48px;
}
@media screen and (max-width:767px){
	.storyImgThumbListsWrap {
		margin: calc(24 / var(--def-ww) * 100vw) auto;
	}
}

/* lists */
.storyImgThumbLists {
	display: flex;
	justify-content: center;
}
.storyImgThumbLists > li {
	/*width: calc(100% / 5);*/
	width: min(calc(100 / var(--def-ww) * 100vw),100px);
	display: block;
	margin: 0;
	height: auto;
	background: unset;
	border-radius: unset;
	opacity: 1;
	position: relative;
}
.storyImgThumbLists > li img {
	width: 100%;
}
@media screen and (max-width:767px){
	.storyImgThumbLists > li {
		margin: 0 calc(5 / var(--def-ww) * 100vw) !important;
	}
}

/* active */
.storyImgThumbLists > li:after {
	content: "";
	background-color: #000;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	mix-blend-mode: color;
	transition: opacity .4s ease;
}
.storyImgThumbLists > li.swiper-pagination-bullet-active:after {
	opacity: 0;
}
.storyImgThumbLists > li:before {
	content: "";
	background-color: #000;
	width: 100%;
	height: 100%;
	opacity: .4;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	transition: opacity .4s ease;
}
.storyImgThumbLists > li.swiper-pagination-bullet-active:before {
	opacity: 0;
}


/* MOVIE */
.btn_moviePlay{
	display: block;
	width: 100%;
	text-decoration: none;
	line-height: 2;
	position: relative;
}
.btn_moviePlay:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #d90011;
    mix-blend-mode: multiply;
	z-index: 1;
	opacity: 45%;
}
.btn_moviePlay-img{
	display: block;
	width: 100%;
	padding-top: 52.5%;
	position: relative;
	overflow: hidden;
}
.btn_moviePlay-img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.btn_moviePlay-icon{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 11.1112%;/* 40 */
	height: 21.1641%;/* 40 */
	background: url(../img/common/arrow_r.svg) no-repeat center / contain;
	z-index: 2;
}
.movieTitle{
	padding-top: 1em;
}

@media screen and (hover:hover) and (pointer: fine){
	.btn_moviePlay:before,
	.btn_moviePlay-icon,
	.movieTitle{
		transition: .3s ease;
	}
	.btn_moviePlay:hover::before{
		opacity: 20%;
	}
	.btn_moviePlay:hover .btn_moviePlay-icon{
		transform: scale(110%);
	}
	.btn_moviePlay:hover + .movieTitle{
		color: var(--color-main-red);
	}
}

@media screen and (max-width:767px){
	.movieLists{
		grid-template-columns: repeat(1, 1fr);
		column-gap: var(--sp-size-48);
	}
}

/* storyDetailBox */
.storyDetailBoxWrap{
	display: flex;
	justify-content: space-between;
}
.storyDetailBox._movieBox{
	width:calc(320 / var(--def-ww) * 100vw);
}
.storyDetailBox._staffListsBox{
	width:calc(100% - (400 / var(--def-ww) * 100vw));
}
@media screen and (max-width:767px){
	.storyDetailBoxWrap{
		flex-direction: column;
	}
	.storyDetailBox._movieBox{
		width:100%;
	}
	.storyDetailBox._staffListsBox{
		width:100%;
	}
}
/* Detail*/
.storyDetailBox{
	margin-bottom: 48px;
}
.storyDetailBox__ttl{
	font-size: 28px;
	color: var(--color-main-red);
}
@media screen and (max-width:767px){
	.storyDetailBox__ttl{
		font-size: calc(38 / var(--def-ww) * 100vw);
	}
}

/* storyStaffLists */
.storyStaffLists {
	font-size: 16px;
	letter-spacing: 0;
	line-height: 2;
}
.storyStaffItem:not(:first-of-type) {
	margin-top: 8px;
}
@media screen and (max-width:767px){
	.storyStaffLists {
		font-size: calc(24 / var(--def-ww) * 100vw);
	}
	.storyStaffLists__item:not(:first-of-type) {
		margin-top: calc(10 / var(--def-ww) * 100vw);
	}
}
.storyStaffItem{
	display: flex;
}
.storyStaffItem__ttl{
    color:var(--color-main-red);
	margin-right: calc(10 / var(--def-ww) * 100vw);
	 white-space: nowrap;
}