@charset "utf-8";
.fullWrap__sticky{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	pointer-events:none;
	padding-top:0;
	z-index:60;
}
@media screen and (max-width:768px){
	.fullWrap__sticky{
		top:calc(-300 / var(--vw-min) * 100vw);
	}
}
.fullWrap__stickyin{
	position:sticky;
	left:0;
	top:0;
	width:100%;
	height:100vh;
	display:flex;
	justify-content:flex-end;
}
@media screen and (max-width:768px){
	.fullWrap__stickyin{
		display:block;
	}
}
.story{
	width:100%;
	display:flex;
	padding:min(calc(90 / var(--vw-min) * 100vw),90px) 0;
}
@media screen and (max-width:768px){
	.story{
		display:block;
		padding:calc(64 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw);
		position:relative;
	}
}
.story:after{
	content:'';
	display:block;
	flex:1;
}
@media screen and (max-width:768px){
	.story:after{
		display:none;
	}
}
.story__left{
	flex:1;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	flex-direction:column;
}
@media screen and (max-width:768px){
	.story__left{
		display:block;
		padding-bottom:min(calc(64 / var(--vw-min) * 100vw),64px);
	}
}
.story__leftInner{
	width: 100%;
	position:sticky;
	left:0;
	top:min(calc(90 / var(--vw-min) * 100vw),90px);
}
.story__title{
	height:min(calc(58 / var(--vw-min) * 100vw),58px);
	width:100%;
	-webkit-mask:url(../img/common/ti-story.svg) no-repeat center center / contain;
	mask:url(../img/common/ti-story.svg) no-repeat center center / contain;
	background:var(--color-green);
	margin-bottom:min(calc(14 / var(--vw-min) * 100vw),14px);
}
@media screen and (max-width:768px){
	.story__title{
		margin-bottom:0;
	}
}
.story__center{
	width:63.3333%;
	max-width:min(calc(1200 / var(--vw-min) * 100vw),1200px);
	display:flex;
	flex-wrap:wrap;
}
@media screen and (max-width:768px){
	.story__center{
		width:100%;
		display:flex;
	}
}
.story__navLists {
	display: flex;
	margin-bottom: min(calc(80 / var(--vw-min) * 100vw),80px);
	flex-wrap: wrap;
    border-left:min(calc(1 / var(--vw-min) * 100vw),1px) solid #fff;
    width:100%;
}
@media screen and (max-width:768px){
	.story__navLists {
		margin-bottom: calc(96 / var(--vw-min) * 100vw);
	}
}
.story__navItem {
	border-top:min(calc(1 / var(--vw-min) * 100vw),1px) solid #fff;
	border-right: min(calc(1 / var(--vw-min) * 100vw),1px) solid #fff;
	border-bottom: min(calc(1 / var(--vw-min) * 100vw),1px) solid #fff;
	transition: .3s ease;
    width:calc(100% / 12);
    margin-bottom:max(calc(-1 / var(--vw-min) * 100vw),-1px) solid #fff;
}
@media screen and (max-width:768px){
	.story__navItem {
		border-width: calc(1 / var(--vw-min) * 100vw);
        width:calc(100% / 6);
	}
}
.story__navLink {
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: min(calc(10 / var(--vw-min) * 100vw),15px);
	transition: .3s ease;
}
@media screen and (max-width:768px){
	.story__navLink {
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
}
.story__navItem.is-active {
	background-color: var(--color-green);
}
@media (hover: hover) and (pointer: fine){
	.story__navItem:hover {
		background-color: var(--color-green);
	}
}
.article__header {
	padding-top: min(calc(10 / var(--vw-min) * 100vw),10px);
}
@media screen and (max-width:768px){
	.article__header {
		padding-top: calc(10 / var(--vw-min) * 100vw);
	}
}
.article__header_dec{
	width: 100%;
	position: relative;
	height: min(calc(26 / var(--vw-min) * 100vw), 26px);
}
.storyCont {
	width:100%;
}
.storyDetailCont {
	display: block;
	position: relative;
	padding-top: min(calc(70 / var(--vw-min) * 100vw),70px);
	width:100%;
}
@media screen and (max-width:768px){
	.musicDetailCont {
		display: block;
		padding-top: calc(70 / var(--vw-min) * 100vw);
	}
}
.article__title {
	position: relative;
}
.article__titleNumber {
	position: absolute;
	left:0;
	top:0;
	font-size:min(calc(80 / var(--vw-min) * 100vw),80px);
	font-style: italic;
	opacity:0.2;
	line-height:.9;
}
@media screen and (max-width:768px){
	.article__titleNumber {
		font-size:calc(96 / var(--vw-min) * 100vw);
	}
}
.article__title span:first-letter{
	color:var(--color-green);
}
.article__titleText {
	position: relative;
	z-index:50;
	display: block;
	padding-left:min(calc(80 / var(--vw-min) * 100vw),80px);
}
.storyDetail__imgs {
	width:100%;
	margin-bottom:min(calc(32 / var(--vw-min) * 100vw),32px);
}
.storyDetail__imgSwiper {
	width:100%;
	padding-bottom:min(calc(60 / var(--vw-min) * 100vw),60px);
}
@media screen and (max-width:768px){
	.storyDetail__imgSwiper {
		padding-bottom:calc(96 / var(--vw-min) * 100vw);
	}
}
.storyDetail__imgSwiper-wrapper {}
.storyDetail__imgSwiper-slide {
	width:min(calc(1200 / var(--vw-min) * 100vw),1200px);
}
.storyDetail__imgSwiper-slide img {
	width:100%;
	height:auto;
}
.storyDetail__imgSwiper .swiper-pagination {
	display: flex;
	height:min(calc(60 / var(--vw-min) * 100vw),60px);
	justify-content: center;
	align-items: center;
	position: absolute;
	left:0;
	right:0;
	bottom:0;
}
@media screen and (max-width:768px){
	.storyDetail__imgSwiper .swiper-pagination {
		height:calc(96 / var(--vw-min) * 100vw);
	}
}
.storyDetail__imgSwiper .swiper-pagination-bullet {
	display:flex;
	width:min(calc(16 / var(--vw-min) * 100vw),16px);
	height:min(calc(16 / var(--vw-min) * 100vw),16px);
	margin:0 min(calc(6 / var(--vw-min) * 100vw),6px);
	background:transparent;
	justify-content: center;
	align-items: center;
	opacity:1;
	position: relative;
}
@media screen and (max-width:768px){
	.storyDetail__imgSwiper .swiper-pagination-bullet {
		width:calc(32 / var(--vw-min) * 100vw);
		height:calc(32 / var(--vw-min) * 100vw);
		margin:0 calc(12 / var(--vw-min) * 100vw);
	}
}
.storyDetail__imgSwiper .swiper-pagination-bullet:before {
	content:'';
	display: block;
	width:min(calc(8 / var(--vw-min) * 100vw),8px);
	height:min(calc(8 / var(--vw-min) * 100vw),8px);
	background:var(--color-darkgray);
	border-radius: 50%;
	transition:all 0.3s ease;
}
@media screen and (max-width:768px){
	.storyDetail__imgSwiper .swiper-pagination-bullet:before {
		width:calc(16 / var(--vw-min) * 100vw);
		height:calc(16 / var(--vw-min) * 100vw);
	}
}
.storyDetail__imgSwiper .swiper-pagination-bullet:after {
	content:'';
	position: absolute;
	left:50%;
	top:50%;
	width:min(calc(16 / var(--vw-min) * 100vw),16px);
	height:min(calc(16 / var(--vw-min) * 100vw),16px);
	box-sizing: border-box;
	border:1px solid var(--color-red);
	margin-top:max(calc(-8 / var(--vw-min) * 100vw),-8px);
	margin-left:max(calc(-8 / var(--vw-min) * 100vw),-8px);
	border-radius: 50%;
	opacity:0;
	transition:all 0.3s ease;
}
@media screen and (max-width:768px){
	.storyDetail__imgSwiper .swiper-pagination-bullet:after {
		width:calc(32 / var(--vw-min) * 100vw);
		height:calc(32 / var(--vw-min) * 100vw);
		border:1px solid var(--color-red);
		margin-top:calc(-16 / var(--vw-min) * 100vw);
		margin-left:calc(-16 / var(--vw-min) * 100vw);
	}
}
.storyDetail__imgSwiper .swiper-pagination-bullet-active:before {
	background:var(--color-red);
}
.storyDetail__imgSwiper .swiper-pagination-bullet-active:after {
	opacity:1;
}
.storyDetail__description {
	margin-bottom:min(calc(40 / var(--vw-min) * 100vw),40px);
}
@media screen and (max-width:768px){
	.storyDetail__description {
		margin-bottom:calc(60 / var(--vw-min) * 100vw);
	}
}
.storyDetail__staff-movie {
	width:100%;
	display: flex;
}
@media screen and (max-width:768px){
	.storyDetail__staff-movie {
		display:block;
	}
}
.storyDetail__staff {
	flex:1;
}
@media screen and (max-width:768px){
	.storyDetail__staff {
		margin-bottom:calc(60 / var(--vw-min) * 100vw);
	}
}
.storyDetail__staffTitle {
	display: table;
	background:var(--color-green);
	color:#000;
	font-size:min(calc(18 / var(--vw-min) * 100vw),18px);
	font-weight: 700;
	line-height:1;
	padding:min(calc(2 / var(--vw-min) * 100vw),2px) min(calc(4 / var(--vw-min) * 100vw),4px) min(calc(3 / var(--vw-min) * 100vw),3px);
	margin-bottom:min(calc(10 / var(--vw-min) * 100vw),10px);
	transform-origin: left bottom;
}
@media screen and (max-width:768px){
	.storyDetail__staffTitle {
		font-size:calc(28 / var(--vw-min) * 100vw);
	}
}
.storyDetail__staffItem {
	display: flex;
}
.storyDetail__staffItem--dt {
	color:var(--color-green);
	white-space: nowrap;
}
.storyDetail__staffItem--dt:after {
	content:'：';
}
.storyDetail__staffItem--dd {
	flex:1;
}
.storyDetail__movie {
	width:50%;
	margin-left:min(calc(40 / var(--vw-min) * 100vw),40px);
}
@media screen and (max-width:768px){
	.storyDetail__movie {
		width:100%;
		margin-left:0;
	}
}
.storyDetail__movieTitle {
	display: table;
	background:var(--color-green);
	color:#000;
	font-size:min(calc(18 / var(--vw-min) * 100vw),18px);
	font-weight: 700;
	line-height:1;
	padding:min(calc(2 / var(--vw-min) * 100vw),2px) min(calc(4 / var(--vw-min) * 100vw),4px) min(calc(3 / var(--vw-min) * 100vw),3px);
	transform-origin: left bottom;
}
@media screen and (max-width:768px){
	.storyDetail__movieTitle {
		font-size:calc(28 / var(--vw-min) * 100vw);
	}
}
.storyDetail__movieLink img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.storyDetail__movieItemWrap {
	overflow: hidden;
	position: relative;
	padding-top: 56.25%;
}
.storyDetail__movieLink {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
}
.storyDetail__movieLink::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: var(--color-green);
	opacity: 0.75;
	z-index: 1;
	pointer-events: none;
}
.storyDetail__movieLinkTexts{
	width:min(calc(138 / var(--vw-min) * 100vw),138px);
	height:min(calc(44 / var(--vw-min) * 100vw),44px);
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:2;
	margin:auto;
	transition:all 0.6s ease;
}
@media screen and (max-width:768px){
	.storyDetail__movieLinkTexts{
		width:calc(312 / var(--vw-min) * 100vw);
		height:calc(72 / var(--vw-min) * 100vw);
	}
	.storyDetail__movieLinkTexts:before{
		content:'';
		display:block;
		width:calc(72 / var(--vw-min) * 100vw);
	}
}
@media screen and (hover:hover){
	.storyDetail__movieLink:hover .storyDetail__movieLinkTexts{
		transform:scale(1.1);
	}
}
.storyDetail__movieLink--text{
	display:block;
	width:min(calc(72 / var(--vw-min) * 100vw),72px);
	height:min(calc(29 / var(--vw-min) * 100vw),29px);
	-webkit-mask:url(../img/common/t-movieplay.svg) no-repeat left center / contain;
	mask:url(../img/common/t-movieplay.svg) no-repeat left center / contain;
	background:#fff;
	transition:all 0.6s ease;
}
@media screen and (max-width:768px){
	.storyDetail__movieLink--text{
		width:calc(126 / var(--vw-min) * 100vw);
		height:calc(50 / var(--vw-min) * 100vw);
	}
}
@media screen and (hover:hover){
	.storyDetail__movieLink:hover .storyDetail__movieLink--text{
		background:var(--color-red);
	}
}
.storyDetail__movieLink--circle{
	display:flex;
	width:min(calc(44 / var(--vw-min) * 100vw),44px);
	height:min(calc(44 / var(--vw-min) * 100vw),44px);
	border:min(calc(2 / var(--vw-min) * 100vw),2px) solid #fff;
	padding:min(calc(2 / var(--vw-min) * 100vw),2px);
	border-radius:50%;
	transition:all 0.6s ease;
}
@media screen and (max-width:768px){
	.storyDetail__movieLink--circle{
		width:calc(72 / var(--vw-min) * 100vw);
		height:calc(72 / var(--vw-min) * 100vw);
		padding:calc(3 / var(--vw-min) * 100vw);
	}
}
@media screen and (hover:hover){
	.storyDetail__movieLink:hover .storyDetail__movieLink--circle{
		border-color:var(--color-red);
	}
}
.storyDetail__movieLink--circle span{
	width:100%;
	height:100%;
	display:flex;
	background:#fff;
	border-radius:50%;
	position:relative;
	justify-content:center;
	align-items:center;
	transition:all 0.6s ease;
}
@media screen and (hover:hover){
	.storyDetail__movieLink:hover .storyDetail__movieLink--circle span{
		background:var(--color-red);
	}
}
.storyDetail__movieLink--circle span:before{
	content:'';
	display:block;
	width:min(calc(7 / var(--vw-min) * 100vw),7px);
	height:min(calc(7 / var(--vw-min) * 100vw),7px);
	border-top:min(calc(2 / var(--vw-min) * 100vw),2px) solid var(--color-green);
	border-right:min(calc(2 / var(--vw-min) * 100vw),2px) solid var(--color-green);
	box-sizing:border-box;
	transform:translateX(max(calc(-1 / var(--vw-min) * 100vw),-1px)) rotate(45deg);
}
@media screen and (max-width:768px){
	.storyDetail__movieLink--circle span:before{
		content:'';
		display:block;
		width:calc(12 / var(--vw-min) * 100vw);
		height:calc(12 / var(--vw-min) * 100vw);
		border-top:calc(3 / var(--vw-min) * 100vw) solid var(--color-green);
		border-right:calc(3 / var(--vw-min) * 100vw) solid var(--color-green);
		box-sizing:border-box;
		transform:translateX(calc(-2 / var(--vw-min) * 100vw)) rotate(45deg);
	}
}