@charset "utf-8";
/*-----------------------------------------------
 * STORY
-------------------------------------------------*/
.articleContent{
	width: 100%;
	position: relative;
	padding-top: min(calc(58 / var(--vw-min) * 100vw), 58px);
}
/**
* category
**/
.story__categoryArea{
	width: 100%;
	position: relative;
}
.story__categoryArea:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: rgba(255,255,255,20%);
	margin: auto;
}
.story__categoryLists{
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	margin-bottom:min(calc(40 / var(--vw-min) * 100vw),40px);
}
@media screen and (max-width:768px){
	.story__categoryLists{
		margin-bottom:calc(50 / var(--vw-min) * 100vw);
	}
}
.story__categoryList{
	margin: 0 min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.story__category--link{
	display: block;
	position: relative;
	transform: skewX(-16deg);
	background-color: var(--color-black);
	color:#fff;
	padding: min(calc(20 / var(--vw-min) * 100vw), 20px) min(calc(40 / var(--vw-min) * 100vw), 40px);
	text-decoration: none;
	text-align: center;
	min-width: min(calc(200 / var(--vw-min) * 100vw), 200px);
	line-height: 1;
	font-weight: 700;
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	transition: all 0.3s ease;
}
.story__category--link.--active {
	color:#000;
	background:var(--color-red);
}
@media screen and (hover:hover){
	.story__category--link:hover {
		color:#000;
		background:var(--color-red);
	}
}
.story__category--link.--soon {
	color:#6b6b6b;
	cursor:default;
	background:#000;
}
.story__category--link.--soon:before {
	content:'COMING SOON';
	font-family: var(--font-en);
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	left:0;
	right:0;
	top:0;
	bottom:0;
	opacity:0;
	transform:skewX(16deg);
	transition: all 0.3s ease;
}
@media screen and (hover:hover){
	.story__category--link.--soon:hover:before {
		opacity:1;
		transform:skewX(16deg);
	}
}
.story__category--text{
	display: block;
	transform: skewX(16deg);
	transition: all 0.3s ease;
}

@media screen and (hover:hover){
	.story__category--link.--soon:hover .story__category--text{
		opacity:0;
	}
}
.story__category--deco{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.story__category--deco:before,
.story__category--deco:after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(calc(6 / var(--vw-min) * 100vw), 6px);
	background-color: rgba(255,255,255,.2);
	transition: all 0.3s ease;
}
.story__category--deco:before{
	left: min(calc(8 / var(--vw-min) * 100vw), 8px);
}
.story__category--deco:after{
	right: min(calc(8 / var(--vw-min) * 100vw), 8px);
}
.story__category--link.--active .story__category--deco:before,
.story__category--link.--active .story__category--deco:after{
	background-color:rgba(0,0,0,.2);
}
@media screen and (hover:hover){
	.story__category--link:not(.--soon):hover .story__category--deco:before,
	.story__category--link:not(.--soon):hover .story__category--deco:after{
		background-color:rgba(0,0,0,.2);
	}
}
@media screen and (max-width:768px){
	.story__categoryList{
		margin: 0 calc(20 / var(--vw-min) * 100vw);
	}
	.story__category--link{
		padding: calc(20 / var(--vw-min) * 100vw) calc(40 / var(--vw-min) * 100vw);
		min-width: calc(200 / var(--vw-min) * 100vw);
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
	.story__category--deco:before,
	.story__category--deco:after{
		width: calc(6 / var(--vw-min) * 100vw);
	}
}
.story__subCategoryArea {}
.story__subCategoryLists {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width:min(calc(1060 / var(--vw-min) * 100vw),1060px);
	margin:0 auto min(calc(50 / var(--vw-min) * 100vw),50px);
}
@media screen and (max-width:768px){
	.story__subCategoryLists {
		width:calc(690 / var(--vw-min) * 100vw);
		margin:0 auto calc(20 / var(--vw-min) * 100vw);
	}
}
.story__subCategoryItem {
	width:min(calc(116 / var(--vw-min) * 100vw),116px);
	padding:0 min(calc(10 / var(--vw-min) * 100vw),10px) min(calc(16 / var(--vw-min) * 100vw),16px);
}
@media screen and (max-width:768px){
	.story__subCategoryItem {
		width:calc(100% / 4);
		padding:0 calc(10 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw);
	}
}
.story__subCategoryLink {
	width:100%;
	height:min(calc(50 / var(--vw-min) * 100vw),50px);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background:rgba(0,0,0,.5);
	border:1px solid rgba(255,255,255,.2);
	text-decoration: none;
	font-weight: 700;
}
@media screen and (max-width:768px){
	.story__subCategoryLink {
		height:calc(80 / var(--vw-min) * 100vw);
	}
}
.story__subCategoryLink span {
	position: relative;
	display: block;
	transition: all 0.3s ease;
}
.story__subCategoryLink:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(var(--color-red), var(--color-red)) right bottom / 0 100% no-repeat;
	transition: background-size 0.4s;
	opacity:.5;
}
@media screen and (hover:hover) and (pointer: fine){
	.story__subCategoryLink:not(.--soon):hover::before{
		background-size: 100% 100%;
		background-position: left bottom;
	}
}
.story__subCategoryLink.--active::before{
		background-size: 100% 100%;
		background-position: left bottom;
	}
.story__subCategoryLink.--soon {
	color:#6b6b6b;
	cursor: default;
}
.story__subCategoryLink.--soon:before {
	content:'COMING SOON';
	font-family: var(--font-en);
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	left:0;
	right:0;
	top:0;
	bottom:0;
	opacity:0;
	transition: all 0.3s ease;
	font-size:min(calc(21 / var(--vw-min) * 100vw),21px);
	padding-top:min(calc(2 / var(--vw-min) * 100vw),2px);
}
@media screen and (hover:hover){
	.story__subCategoryLink.--soon:hover span{
		opacity:0;
	}
}
@media screen and (hover:hover){
	.story__subCategoryLink.--soon:hover:before {
		opacity:1;
	}
}

/**
 * sec-story
 */
.sec-story {
	width: min(calc(1040 / var(--vw-min) * 100vw), 1040px);
	margin: 0 auto;
	border: 1px solid rgba(255, 255, 255, .2);
	padding: min(calc(40 / var(--vw-min) * 100vw), 40px);
	background: rgba(0, 0, 0, .5);
}
@media screen and (max-width:768px){
	.sec-story {
		width:calc(670 / var(--vw-min) * 100vw);
		padding:calc(40 / var(--vw-min) * 100vw) calc(40 / var(--vw-min) * 100vw);
	}
}
/* title */
.sec-story__title {
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	display: flex;
	padding-bottom: min(calc(26 / var(--vw-min) * 100vw), 26px);
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: 700;
}
.sec-story__title--num {
	padding-right: 1em;
	flex-shrink: 0;
	line-height: 2.1;
}
@media screen and (max-width:768px){
	.sec-story__title {
		font-size: calc(28 / var(--vw-min) * 100vw);
	}
}

/* photo */
.sec-story__photoLists img {
	width: 100%;
}

/* c-swiperNav */
.c-swiperNav {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0 min(calc(6 / var(--vw-min) * 100vw), 6px);
	width: 100%;
	height: 100%;
	margin-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.c-swiperNav .swiper-pagination-bullet {
	display: block;
	width: min(calc(10 / var(--vw-min) * 100vw), 10px);
	height: min(calc(10 / var(--vw-min) * 100vw), 10px);
	border-radius: 50%;
	border: 1px solid var(--color-red);
	opacity: 1;
}
.c-swiperNav .swiper-pagination-bullet-active {
	background-color: var(--color-red);
}
@media screen and (max-width:768px){
	.c-swiperNav .swiper-pagination-bullet {
		width: calc(14 / var(--vw-min) * 100vw);
		height: calc(14 / var(--vw-min) * 100vw);
	}
}

/* dl */
.sec-story__dl {
	margin-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
.sec-story__dl__item:not(:first-of-type) {
	margin-top: min(calc(30 / var(--vw-min) * 100vw), 30px);
	padding-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
	border-top: 1px solid rgba(255, 255, 255, .2);
}
.sec-story__dl__item > dt {
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: 700;
	line-height: 1;
	margin-bottom:1em;
	position: relative;
}
.sec-story__dl__item > dt > span {
	background: var(--color-red);
	color: #fff;
	padding: 0 0.4em;
	position: relative;
}
@media screen and (max-width:768px){
	.sec-story__dl__item > dt {
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
}

/* movie */
.btn_movieList{
	display: block;
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	border: unset;
	border-radius: unset;
}
.btn_movieList--img{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}
.btn_movieList--img:before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	background: linear-gradient(0deg, rgb(218,0,0) 0%, rgba(231,186,85,0) 100%);
	transition: opacity .4s ease;
	z-index: 1;
}
.movieList .btn_movieList--img:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,60%);
	opacity: 100%;
	transition: opacity .4s ease;
	z-index: 1;
}

.btn_movieList--img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
@media screen and (hover: hover) and (pointer: fine) {
	.btn_movieList:hover .btn_movieList--img img{
		transform: scale(1.15);
	}
}

.btn_movieList--icon{
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: min(calc(104 / var(--vw-min) * 100vw), calc(104px * var(--max-percent)));
	height: min(calc(104 / var(--vw-min) * 100vw), calc(104px * var(--max-percent)));
	margin-right: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
	margin-bottom: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
	z-index: 1;
}
.btn_movieList--icon:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../img/top/txt_moviplay.svg) no-repeat center / contain;
	animation: ani_rotate 12s linear infinite;
}
.btn_movieList--icon:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 26.9231%;/* 28 */
	height: 26.9231%;/* 28 */
	margin: auto;
	background: url(../img/common/arrow_r3.svg) no-repeat center / contain;
}

@media screen and (max-width:768px){
	.movieSwiper{
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
	.movieList{
		width: calc(560 / var(--vw-min) * 100vw);
	}
	/* .movieList__item{
		transform: scale(71.4286%);
	} */
	.btn_movieList--icon{
		width: calc(104 / var(--vw-min) * 100vw);
		height: calc(104 / var(--vw-min) * 100vw);
		margin-right: calc(20 / var(--vw-min) * 100vw);
		margin-bottom: calc(20 / var(--vw-min) * 100vw);
	}
}