@charset "utf-8";
/* .main{
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
	position: relative;
}
.main:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: min(calc(64 / var(--vw-min) * 100vw), 64px);
	background-color: var(--color-black);
} */
/*-----------------------------------------------
 * HERO - SERIES
-------------------------------------------------*/
.c-hero{
	width: 100%;
	position: relative;
}
.hero__containar{
	display: flex;
}
@media screen and (max-width:768px){
	.c-hero{
		padding-top: calc(96 / var(--vw-min) * 100vw);
	}
	.hero__containar{
		display: block;
	}
}
/*
* Visual
**/
.hero__visualArea{
	position: relative;
	width: 50%;
}
.hero__visualSwiper{
	position: sticky;
	top: 0;
	height: min(100vh, 100%);
	min-height: calc(849 / var(--vw-min) * 100vw);
	overflow: hidden;
}
.hero__visualList{
	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
}
.hero__visualBg{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.hero__visualBg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(16px);
	transform: scale(112%);
}
.hero__visualImage{
	width: 100%;
	padding-top: 141.5%;
	position: relative;
}
.hero__visualImage img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__visualControllerWrap{
	position: absolute;
	top: 0;
	right: max(calc(-20 / var(--vw-min) * 100vw), calc(-20px * var(--max-percent)));
	width: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	bottom: 0;
}
.hero__visualController{
	position: sticky;
	top: 0;
	height: min(100vh,100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: min(calc(24 / var(--vw-min) * 100vw), calc(24px * var(--max-percent)));
	z-index: 2;
}

.hero__arrow{
	width: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	height: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}
.hero__arrow .comLinkBox,
.hero__arrow .comLink__link{
	display: block;
	width: 100%;
	height: 100%;
}
.hero__arrow .comLink__link{
	pointer-events: auto;
	background-color: rgba(0,0,0,40%);
}
.hero__arrow .comLink__deco:before,
.hero__arrow .comLink__deco:after,
.hero__arrow .comLink__link:after{
	background-color: #fff;
}

.hero__arrow-icon{
	position: absolute;
	inset: 0;
	margin: auto;
	width: 30%;
	height: 30%;
	mask-image: url(../img/common/arrow/arrow-t_more.svg);
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: contain;
	background-color: #fff;
}
.hero__arrow.-b .hero__arrow-icon{
	transform: scale(-1);
}
.hero__thumbPaginationIn{
	font-family: var(--font-en);
	font-size: min(calc(14 / var(--vw-min) * 100vw), calc(14px * var(--max-percent)));
	gap: min(calc(24 / var(--vw-min) * 100vw), calc(24px * var(--max-percent)));
	line-height: 0.8;
	text-align: center;
	color: var(--color-white);
}
.hero__thumbPaginationIn > span{
	display: block;
}
.hero__thumbPaginationIn > span:nth-of-type(1){
	display: inline-block;
	padding-bottom: min(calc(24 / var(--vw-min) * 100vw), calc(24px * var(--max-percent)));
	position: relative;
}
.hero__thumbPaginationIn > span:nth-of-type(1)::after{
	content: '';
	position: absolute;
	bottom: min(calc(12 / var(--vw-min) * 100vw), calc(12px * var(--max-percent)));
	left: 0;
	right: 0;
	height: 1px;
	background-color: #fff;
}

@media screen and (hover:hover) and (pointer: fine){
	.hero__arrow-icon,
	.hero__arrow .comLink__link:after{
		transition: background-color .3s ease;
	}
	.comLink__link:hover .hero__arrow-icon{
		background-color: var(--color-black);
	}
	.hero__arrow .comLink__link:hover:after{
		background-color: var(--color-blue);
	}
}

@media screen and (max-width:768px){
	.hero__visualArea{
		width: calc(654 / var(--vw-min) * 100vw);
		z-index: 1;
		margin: 0 auto;
		padding-top: calc(50 / var(--vw-min) * 100vw);
	}
	.hero__visualSwiper{
		position: relative;
		height: auto;
		min-height: unset;
		overflow: hidden;
	}
	.hero__visualList{
		min-height: unset;
		display: block;
	}
	.hero__visualBg{
		display: none;
	}
	.hero__visualControllerWrap{
		position: relative;
		top: unset;
		right: unset;
		bottom: unset;
		width: 100%;
	}
	.hero__visualController{
		position: relative;
		top: unset;
		height: calc(72 / var(--vw-min) * 100vw);
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		gap: unset;
		margin-top: calc(24 / var(--vw-min) * 100vw);
	}
	.hero__arrow{
		width: calc(72 / var(--vw-min) * 100vw);
		height: calc(72 / var(--vw-min) * 100vw);
		flex-shrink: 0;
	}
	.hero__arrow-icon{
		mask-image: url(../img/common/arrow/arrow-l_more.svg);
	}
	.hero__arrow.-b .hero__arrow-icon{
		transform: scale(-1);
	}
	.hero__thumbPagination{
		display: block;
		width: 100%;
		line-height: 1;
	}
	.hero__thumbPaginationIn{
		display: inline-flex;
		justify-content: center;
		gap: unset;
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
	.hero__thumbPaginationIn > span:nth-of-type(1){
		padding: calc(6 / var(--vw-min) * 100vw) calc(28 / var(--vw-min) * 100vw) calc(6 / var(--vw-min) * 100vw) 0;
	}
	.hero__thumbPaginationIn > span:nth-of-type(2){
		padding: calc(6 / var(--vw-min) * 100vw) 0 calc(6 / var(--vw-min) * 100vw) calc(28 / var(--vw-min) * 100vw);
	}
	.hero__thumbPaginationIn > span:nth-of-type(1)::after{
		top: 0;
		bottom: 0;
		left: unset;
		right: 0;
		height: 100%;
		width: 1px;
	}
}


/**
* Main
**/
.hero__main{
	width: 50%;
	position: relative;
}
.hero__mainIn{
	position: sticky;
	top: 0;
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
	padding-bottom: min(calc(80 / var(--vw-min) * 100vw), 80px);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hero__mainContent{
	width: 100%;
	position: relative;
	z-index: 1;
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
	color: var(--color-white);
}
.hero__seriesLogo{
	width: min(calc(440 / var(--vw-min) * 100vw), 440px);
	width: min(calc(440 / var(--vw-min) * 100vw), calc(440px * var(--max-percent)));
	margin: 0 auto;
}
.hero__seriesLogo img{
	width: 100%;
}
.hero__infoArea{
	width: 100%;
	max-width: min(calc(600 / var(--vw-min) * 100vw), calc(600px * var(--max-percent)));
	padding-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
	padding-left: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	padding-right: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	padding-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
	margin: 0 auto;
}

.hero__captionText{
	font-family: var(--font-all);
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	line-height: 2;
	text-align: center;
}

.hero__linkLists{
	display: flex;
	justify-content: center;
	gap: min(calc(16 / var(--vw-min) * 100vw), 16px);
	margin-top: min(calc(32 / var(--vw-min) * 100vw), 32px);
}

.hero__linkLists .comLink__link{
	min-width: min(calc(212 / var(--vw-min) * 100vw), 212px);
	min-height: min(calc(40 / var(--vw-min) * 100vw), 40px);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0;
	background-color: rgba(0,0,0,40%);
}
@media screen and (hover:hover) and (pointer: fine){
	.hero__linkLists .comLink__link:hover{
		color: var(--color-black);
	}
}
.hero__linkLists .comLink__link:after,
.hero__linkLists .comLink__deco:before,
.hero__linkLists .comLink__deco:after{
	background-color: var(--color-blue-light);
}



.hero__infoSection{
	width: 100%;
	padding-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}

.hero__infoSeciton-title{
	width: 100%;
	position: relative;
}
.hero__infoSeciton-title:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #fff;
}
.hero__infoSeciton-title > .secCont__decoTitle{
	display: block;
	max-width: min(calc(600 / var(--vw-min) * 100vw), calc(600px * var(--max-percent)));
	padding-left: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	padding-right: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	margin: 0 auto;
}
.hero__infoSeciton-title > .secCont__decoTitle > span.secCont__decoTitle--text:before{
	background-color: var(--color-white);
}

.hero__infoSectionIn{
	max-width: min(calc(600 / var(--vw-min) * 100vw), calc(600px * var(--max-percent)));
	padding-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
	padding-left: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	padding-right: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	margin: 0 auto;
}
.hero__infoText{
	line-height: 2;
}



.hero__mainBg{
	position: absolute;
	inset: 0;
}
.hero__mainBg--img{
	position: sticky;
	inset: 0;
	height: min(100vh, 199%);
}
.hero__mainBg--img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__mainBg--dot{
	position: absolute;
	inset: 0;
    background: rgba(0, 0, 0, 60%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.hero__mainBg--dot:before{
	content: '';
	position: fixed;
	top: 0;
	inset: 0;
	background: url(../img/common/bg/bg_dot.svg) repeat left top;
}

@media screen and (max-width:768px){
	.hero__main{
		width: 100%;
		position: static;
	}
	.hero__mainIn{
		position: static;
		top: unset;
		min-height: unset;
		padding-top: 0;
		padding-bottom: calc(96 / var(--vw-min) * 100vw);
	}
	.hero__mainBg{
		position: absolute;
		inset: 0;
		z-index: 0;
	}
	.hero__mainBg--dot:before{
		position: absolute;
		top: 0;
		inset: 0;
	}
	.hero__mainContent{
		padding-top: calc(48 / var(--vw-min) * 100vw);
	}
	.hero__seriesLogo{
		width: calc(558 / var(--vw-min) * 100vw);
	}
	.hero__infoArea{
		max-width: unset;
		padding: calc(40 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw) 0;
	}
	.hero__captionText{
		font-size: calc(42 / var(--vw-min) * 100vw);
		line-height: 1;
	}
	.hero__linkLists{
		gap: calc(28 / var(--vw-min) * 100vw);
		margin-top: calc(48 / var(--vw-min) * 100vw);
		width: 100%;
	}
	.hero__linkList{
		width: calc((100% - calc(28 / var(--vw-min) * 100vw)) / 2);
	}
	.hero__linkLists .comLink__link{
		min-width: unset;
		width: 100%;
		min-height: calc(72 / var(--vw-min) * 100vw);
	}
	.hero__infoSection{
		padding-top: calc(64 / var(--vw-min) * 100vw);
	}
	.hero__infoSeciton-title > .secCont__decoTitle{
		max-width: unset;
		padding: 0 calc(48 / var(--vw-min) * 100vw);
	}
	.hero__infoSectionIn{
		max-width: unset;
		padding: calc(45 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw) 0;
	}
	.hero__infoText{
		font-size: calc(24 / var(--vw-min) * 100vw);
		line-height: 1.5;
	}
}




/*-----------------------------------------------
 * STORY - ARTICLE
-------------------------------------------------*/
.c-story{
	width: 100%;
	position: relative;
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
	padding-bottom: min(calc(160 / var(--vw-min) * 100vw), 160px);
	background-color: var(--color-white);
}
.c-story .secCont__content{
	margin-top: max(calc(-20 / var(--vw-min) * 100vw), -20px);
}

.c-story .secCont__slide--image{
	padding-top: 56.25%;
}
.c-story .secCont__slide--imageIn{
	position: absolute;
	inset: 0;
}
.c-story .secCont__slide--imageIn img{
	object-fit: contain;
}

.story__slide--title{
	display: flex;
	gap: 0.75em;
	margin-top: min(calc(12 / var(--vw-min) * 100vw), calc(12px * var(--max-percent)));
	line-height: 1.5;
	color: var(--color-black);
	padding-right: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.story__slide--title_no{
	font-family: var(--font-en);
	color: var(--color-blue);
}


@media screen and (max-width:768px){
	.c-story{
		padding: calc(96 / var(--vw-min) * 100vw) 0 calc(144 / var(--vw-min) * 100vw);
	}
	.c-story .secCont__content{
		padding-top: calc(18 / var(--vw-min) * 100vw);
		margin-top: 0;
	}
	.c-story .comLinkBox{
		margin-left: auto;
		margin-right: auto;
		margin-top: calc(96 / var(--vw-min) * 100vw);
		text-align: center;
	}
	.c-story .story__slide--title{
		font-size: calc(24 / var(--vw-min) * 100vw);
		margin-top: calc(24 / var(--vw-min) * 100vw);
		padding-right: calc(32 / var(--vw-min) * 100vw);
	}
}




/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
.c-character{
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
	padding-bottom: min(calc(160 / var(--vw-min) * 100vw), 160px);
}

.c-character .secCont__contentArea{
	margin-top: max(calc(-80 / var(--vw-min) * 100vw), -80px);
}

.charaSwiper{
	width: 100%;
}

.character__slideList{
	width: 100%;
	padding-left: min(calc(80 / var(--vw-min) * 100vw), 80px);
	padding-right: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
.character__slideListIn{
	width: 100%;
	display: flex;
	padding: 0 min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
}

/**
* character Image
**/
.character__imageArea{
	width: min(calc(400 / var(--vw-min) * 100vw), calc(400px * var(--max-percent)));
	height: min(calc(576 / var(--vw-min) * 100vw), 576px);
	position: relative;
}
.character__imageLists{
	position: relative;
	width: min(calc(400 / var(--vw-min) * 100vw), 400px);
	height: 100%;
	max-width: 100%;
	margin: 0 auto;
}
.character__imageList{
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .3s ease;
}
.character__imageList.--is-active{
	opacity: 1;
}
.character__imageList img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}


.chara__changeBtnArea{
	position: absolute;
	top: min(calc(112 / var(--vw-min) * 100vw), 112px);
	left: max(calc(-12 / var(--vw-min) * 100vw), -12px);
	width: min(calc(100 / var(--vw-min) * 100vw), 100px);
}
.btn_visualChange{
	display: block;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 100%;
	border-radius: 50%;
}
.btn_visualChange:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 64%;
	height: 64%;
	margin: auto;
	background: url(../img/common/arrow/arrow_changeCircle.svg) no-repeat center / contain;
	transition: transform .4s ease;
}
.btn_visualChange--txt{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/common/txt/txt_visualChange.svg) no-repeat center / contain;
	animation: ani_rotate360 16s linear infinite;
}
@media (hover: hover) and (pointer: fine){
	.btn_visualChange:hover .btn_charaChange--txt{
		animation-play-state: paused;
	}
	.btn_visualChange:hover::before{
		transform: rotate(-180deg);
	}
}
.chara__changeNum{
	display: flex;
	justify-content: center;
	margin-top: min(calc(12 / var(--vw-min) * 100vw), 12px);
	font-family: var(--font-en);
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	line-height: 1;
	position: relative;
}
.charaNow,
.charaAll{
	display: inline-block;
	min-width: min(calc(30 / var(--vw-min) * 100vw), 30px);
	text-align: center;
	padding: 0 min(calc(10 / var(--vw-min) * 100vw), 10px);
	position: relative;
}
.charaNow:after{
	content: '';
	position: absolute;
	top: -1px;
	right: 0;
	bottom: -1px;
	width: 1px;
	background-color: rgba(0,0,0,40%);
}



/**
* character Detail
**/
.character__detailArea{
	width: min(calc(320 / var(--vw-min) * 100vw), calc(320px * var(--max-percent)));
	position: relative;
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
}
.character__detail--title{
	position: relative;
	width: 100%;
}
.character__detail--title:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--color-black);
}
.character__detail--title > .secCont__decoTitle{
	display: block;
	width: 100%;
}
.character__profileIn{
	padding-top: min(calc(32 / var(--vw-min) * 100vw), 32px);
	letter-spacing: 0.025em;
}
.character__name{
	display: inline-flex;
	align-items: flex-end;
	flex-wrap: wrap;
	line-height: 1;
}
.character__name--main{
	display: inline-block;
	font-size: min(calc(40 / var(--vw-min) * 100vw), 40px);
	font-weight: 700;
	color: var(--color-blue);
}
.character__name--sub{
	display: inline-block;
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	padding-top: min(calc(14 / var(--vw-min) * 100vw), 14px);
}
.character__cv{
	display: flex;
	gap: min(calc(12 / var(--vw-min) * 100vw), 12px);
	line-height: 1;
	padding-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.character__cv > span{
	font-family: var(--font-all);
	color: var(--color-blue);
}
.character__text{
	padding-top: min(calc(32 / var(--vw-min) * 100vw), 32px);
	line-height: 2;
}


/**
* character Face
**/
.character__faceArea{
	position: relative;
	width: 100%;
	padding-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.character__faceLists{
	position: relative;
	width: 100%;
	height: min(calc(152 / var(--vw-min) * 100vw), 152px);
}
.character__faceList{
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	gap: min(calc(16 / var(--vw-min) * 100vw), 16px);
	opacity: 0;
	transition: opacity .3s ease;
}
.character__faceList.--is-active{
	opacity: 1;
}
.character__face{
	width: min(calc(152 / var(--vw-min) * 100vw), 152px);
}
.character__faceImage{
	width: 100%;
	padding-top: 100%;
	border-radius: 50%;
	background-color: var(--color-white);
	overflow: hidden;
	position: relative;
}
.character__faceImage img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}



/**
* character Thumb
**/
.character__thumbArea{
	position: absolute;
	top: 0;
	left: 0;
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
	padding-left: min(calc(4 / var(--vw-min) * 100vw), 4px);
}
.character__thumbAreaIn{
	width: min(calc(156 / var(--vw-min) * 100vw), 156px);
}
.character__thumbSwiper{
	width: 100%;
}
.character__thumbLists{
	width: 100%;
	flex-wrap: wrap;
	gap: min(calc(4 / var(--vw-min) * 100vw), 4px);
}
.character__thumbList{
	width: calc((100% - min(calc(4 / var(--vw-min) * 100vw), 4px)) / 2);
}
.character__thumb{
	width: 100%;
	padding-top: 100%;
	position: relative;
	background-color: var(--color-white);
}
.character__thumb:before{
	content: '';
	position: absolute;
	inset: 0;
	transform: scale(75%);
	background-color: var(--color-blue);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
}
.swiper-slide-thumb-active .character__thumb:before{
	opacity: 1;
	transform: scale(100%);
}

.character__thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

@media screen and (max-width:768px){
	.c-character{
		padding: calc(144 / var(--vw-min) * 100vw) 0;
	}
	.c-character .secTitle__group.-type_lt{
		margin-bottom: calc(-30 / var(--vw-min) * 100vw);
	}
	.c-character .secCont__contentArea{
		margin-top: 0;
	}
	.c-character .secCont__content{
		padding: 0;
	}
	.c-character .season__contentArea{
		display: flex;
		flex-direction: column;
	}
	.character__thumbArea{
		order: -1;
		position: relative;
		top: unset;
		left: unset;
		padding: 0 calc(10 / var(--vw-min) * 100vw);
	}
	.character__thumbAreaIn{
		width: 100%;
	}
	.character__thumbLists{
		flex-wrap: nowrap;
		gap: calc(5 / var(--vw-min) * 100vw);
	}
	.character__thumbList{
		width: calc(88 / var(--vw-min) * 100vw);
	}
	.c-character .secCont__swiperArea{
		width: calc(100% - calc(96 / var(--vw-min) * 100vw));
		margin: 0 auto;
		overflow: hidden;
	}
	.character__slideList{
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	.character__slideListIn{
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		padding: 0;
	}
	.character__imageArea{
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		height: calc(740 / var(--vw-min) * 100vw);
	}
	.character__imageLists{
		width: 100%;
		height: 100%;
	}
	.character__imageList{
		margin-left: calc(72 / var(--vw-min) * 100vw);
	}
	.character__detailArea{
		display: contents;
	}
	.character__faceArea{
		grid-column: 2;
		grid-row: 1;
		width: calc(192 / var(--vw-min) * 100vw);
		padding-top: 0;
		align-self: center;
	}
	.character__faceLists{
		height: calc(433 / var(--vw-min) * 100vw);
	}
	.character__faceList{
		flex-direction: column;
		gap: calc(48 / var(--vw-min) * 100vw);
	}
	.character__face{
		width: calc(192 / var(--vw-min) * 100vw);
	}
	.character__profile{
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.chara__changeBtnArea{
		top: calc(82 / var(--vw-min) * 100vw);
		left: calc(35 / var(--vw-min) * 100vw);
		width: calc(122 / var(--vw-min) * 100vw);
	}
	.chara__changeNum{
		margin-top: calc(18 / var(--vw-min) * 100vw);
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
	.character__name--main{
		font-size: calc(48 / var(--vw-min) * 100vw);
	}
	.character__name--sub{
		font-size: calc(20 / var(--vw-min) * 100vw);
		padding-top: 0;
	}
	.character__cv{
		padding-top: calc(20 / var(--vw-min) * 100vw);
		font-size: calc(28 / var(--vw-min) * 100vw);
	}
	.character__cv {
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
	.character__text{
		padding-top: calc(48 / var(--vw-min) * 100vw);
		font-size: calc(24 / var(--vw-min) * 100vw);
		line-height: 1.5;
	}
	.character__profileIn{
		padding-top: calc(32 / var(--vw-min) * 100vw);
	}
}




/*-----------------------------------------------
 * STAFFCAST
-------------------------------------------------*/
.c-staffcast{
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
	padding-bottom: min(calc(160 / var(--vw-min) * 100vw), 160px);
}
.staffcastCont{
	width: 100%;
}
.staffcastCont:not(:first-child){
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
.staffcastContIn{
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
}
.staffcastLists{
	display: flex;
	flex-wrap: wrap;
	row-gap: min(calc(26 / var(--vw-min) * 100vw), 26px);
	column-gap: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
.staffcastLists:not(:first-child){
	margin-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
}
.staffcastList{
	display: flex;
	width: calc((100% - min(calc(80 / var(--vw-min) * 100vw), 80px)) / 2);
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	line-height: 1.5;
	gap: min(calc(14 / var(--vw-min) * 100vw), 14px);
}

.staffcastList__job{
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	padding-top: min(calc(6 / var(--vw-min) * 100vw), 6px);
	color: var(--color-blue);
	text-align: right;
	flex-shrink: 0;
}
.staffcastList__name small{
	font-size: 80%;
}


.staffcastList[data-option="alignCenter"]{
	align-items: center;
}

@media screen and (max-width:768px){
	.c-staffcast{
		padding-top: calc(96 / var(--vw-min) * 100vw);
		padding-bottom: calc(144 / var(--vw-min) * 100vw);
	}
	.staffcastCont:not(:first-child){
		padding-top: calc(96 / var(--vw-min) * 100vw);
	}
	.staffcastContIn{
		padding-top: calc(70 / var(--vw-min) * 100vw);
	}
	.staffcastLists{
		row-gap: calc(20 / var(--vw-min) * 100vw);
		column-gap: unset;
	}
	.staffcastLists:not(:first-child){
		margin-top: calc(64 / var(--vw-min) * 100vw);
	}
	.staffcastList{
		width: 100%;
		font-size: calc(28 / var(--vw-min) * 100vw);
		gap: calc(24 / var(--vw-min) * 100vw);
	}
	.staffcastList__job{
		font-size: calc(24 / var(--vw-min) * 100vw);
		padding-top: calc(6 / var(--vw-min) * 100vw);
		text-align: left;
	}
}




/*-----------------------------------------------
 * THEMESONG
-------------------------------------------------*/
.c-themesong{
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
	padding-bottom: min(calc(160 / var(--vw-min) * 100vw), 160px);
}
.c-themesong .secCont__contentArea{
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
.c-themesong .secCont__content{
	min-height: min(calc(700 / var(--vw-min) * 100vw), 700px);
}


.musicSection{
	padding: 0 min(calc(80 / var(--vw-min) * 100vw), 80px);
}
.musicSectionIn{
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
	display: flex;
}

.music__imageArea{
	width: min(calc(400 / var(--vw-min) * 100vw), 400px);
	flex-shrink: 0;
}
.music__image{
	width: 100%;
}
.music__image img{
	max-width: 100%;
}
.music__linkLists{
	margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
	display: flex;
	flex-wrap: wrap;
	gap: min(calc(16 / var(--vw-min) * 100vw), 16px);
}
.music__imageArea .comLink__link{
	padding: 0 min(calc(12 / var(--vw-min) * 100vw), 12px);
}

.music__secCont > .secCont__decoTitle{
	position: relative;
}
.music__secCont > .secCont__decoTitle:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--color-black);
}


.music__content{
	width: 100%;
	padding-left: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	position: relative;
}
.music__headCaption{
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	line-height: 1.5;
	margin-bottom: min(calc(6 / var(--vw-min) * 100vw), 6px);
}
.music__title{
	width: 100%;
	letter-spacing: 0;
}
.music__title--title{
	font-family: var(--font-all);
	font-size: min(calc(32 / var(--vw-min) * 100vw), 32px);
	line-height: 1.5;
	color: var(--color-blue);
}
.music__title--artist{
	font-family: var(--font-all);
	font-size: min(calc(26 / var(--vw-min) * 100vw), 26px);
	line-height: 1.5385;
	margin-top: min(calc(4 / var(--vw-min) * 100vw), 4px);
}
.music__title--release{
	font-family: var(--font-all);
	line-height: 1;
	margin-top: min(calc(12 / var(--vw-min) * 100vw), 12px);
}

.music__secCont{
	padding-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.music__secContIn{
	padding-top: min(calc(16 / var(--vw-min) * 100vw), 16px);
	line-height: 2;
}

@media screen and (max-width:768px){
	.c-themesong{
		padding: calc(144 / var(--vw-min) * 100vw) 0;
	}
	.c-themesong .secTitle__group.-type_lt {
		margin-bottom: 0;
	}
	.c-themesong .secCont__contentArea{
		padding-top: calc(96 / var(--vw-min) * 100vw);
	}
	.c-themesong .secCont__content{
		min-height: unset;
	}
	.musicSection{
		padding: 0;
	}
	.musicSectionIn{
		flex-direction: column;
		padding-top: calc(70 / var(--vw-min) * 100vw);
	}
	.music__imageArea{
		width: 100%;
	}
	.music__image {
		width: calc(558 / var(--vw-min) * 100vw);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}
	.music__content{
		padding-left: 0;
		padding-top: calc(48 / var(--vw-min) * 100vw);
	}
	.music__headCaption{
		font-size: calc(28 / var(--vw-min) * 100vw);
		margin-bottom: calc(6 / var(--vw-min) * 100vw);
	}
	.music__title--title{
		font-size: calc(42 / var(--vw-min) * 100vw);
	}
	.music__title--artist{
		font-size: calc(31 / var(--vw-min) * 100vw);
	}
	.music__title--release{
		font-size: calc(24 / var(--vw-min) * 100vw);
		margin-top: calc(12 / var(--vw-min) * 100vw);
	}
	.music__secCont{
		padding-top: calc(40 / var(--vw-min) * 100vw);
	}
	.music__secContIn{
		padding-top: calc(30 / var(--vw-min) * 100vw);
		font-size: calc(24 / var(--vw-min) * 100vw);
		line-height: 2;
	}
	.music__linkLists{
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}




/*-----------------------------------------------
 * MOVIE - ARTICLE
-------------------------------------------------*/
.c-movie{
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
	padding-bottom: min(calc(160 / var(--vw-min) * 100vw), 160px);
	background-color: var(--color-white);
}
.c-movie .secCont__content {
	margin-top: max(calc(-20 / var(--vw-min) * 100vw), -20px);
}
.movieSwiper,
.c-movie .secCont__slideList{
	width: min(calc(480 / var(--vw-min) * 100vw), calc(480px * var(--max-percent)))
}
.c-movie .secCont__slide--link{
	pointer-events: auto;
	cursor: pointer;
}
.c-movie .secCont__slide--image{
	--cut: 40px;
	padding-top: 56.25%;
}
.c-movie .secCont__slide--imageIn {
	position: absolute;
	inset: 0;
}

.icon_moviePlay{
	position: absolute;
	inset: 0;
	width: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	height: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	margin: auto;
	border-radius: 50%;
}
.icon_moviePlay:before{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: rgba(0,186,224,60%);
}
.icon_moviePlay:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 4%;
	margin: auto;
	width: 35%;/* 28 */
	height: 35%;/* 28 */
	mask-image: url(../img/common/deco/deco__triangle-r.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: right;
	background-color: var(--color-black);
}

@media screen and (max-width:768px){
	.c-movie{
		padding-top: calc(96 / var(--vw-min) * 100vw);
		padding-bottom: calc(144 / var(--vw-min) * 100vw);
	}
	.c-movie .secCont__content{
		margin-top: 0;
		padding-top: calc(18 / var(--vw-min) * 100vw);
	}
	.movieSwiper,
	.c-movie .secCont__slideList{
		width: calc(600 / var(--vw-min) * 100vw);
	}
	.c-movie .comLinkBox{
		margin-left: auto;
		margin-right: auto;
		margin-top: calc(96 / var(--vw-min) * 100vw);
		text-align: center;
	}
	.icon_moviePlay{
		width: calc(96 / var(--vw-min) * 100vw);
		height: calc(96 / var(--vw-min) * 100vw);
	}
}




/*-----------------------------------------------
 * SERIES - SERIES
-------------------------------------------------*/
.c-series{
	width: 100%;
	position: relative;
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
	padding-bottom: min(calc(160 / var(--vw-min) * 100vw), 160px);
	background-color: var(--color-white);
}
.c-series .secCont__content{
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
}

.c-series .secCont__slide--image{
	padding-top: 141.6667%;
}
.c-series .secCont__slide--imageIn{
	position: absolute;
	inset: 0;
}

@media screen and (max-width:768px){
	.c-series{
		padding: calc(144 / var(--vw-min) * 100vw) 0;
	}
	.c-series .secCont__tabArea{
		margin-top: calc(48 / var(--vw-min) * 100vw);
	}
	.c-series .secCont__content{
		padding-top: calc(58 / var(--vw-min) * 100vw);
	}
	.c-series .comLinkBox{
		margin-left: auto;
		margin-right: auto;
		margin-top: calc(96 / var(--vw-min) * 100vw);
		text-align: center;
	}
}



/*-----------------------------------------------
 * STREAMING & add hero
-------------------------------------------------*/
#js-streamingModal .oneModalIn__cont{
	padding: 0;
	width: 100%;
}
#js-streamingModal .hero__mainIn{
	padding-top: 0;
}
#js-streamingModal .hero__mainContent{
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
}
.hero__contHead{
	padding-bottom: 0;
}

.hero__contSection.secContent.-bgc_black{
	background-color: transparent;
}
.hero__contSection.secContent.-bgc_black .secTitle__group:before,
.hero__contSection.secContent.-bgc_black .secTitle__group:after,
.hero__contSection.secContent.-bgc_black .secTitle__deco--line{
	background-color: var(--color-white);
}
.hero__contSection .secTitle__group{
	padding-top: min(calc(60 / var(--vw-min) * 100vw), 60px);
}


.hero__contSectionIn{
	width: 100%;
	padding: 0 min(calc(80 / var(--vw-min) * 100vw), 80px);
}
.hero__contSectionIn__cont{
	width: 100%;
	max-width: min(calc(440 / var(--vw-min) * 100vw), calc(440px * var(--max-percent)));
	margin: 0 auto;
	position: relative;
}
.hero__subSection{
	width: 100%;
}
.hero__subSection:not(:first-child){
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
}
.hero__subSectionIn{
	padding-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.streamingLists{
	display: flex;
	flex-wrap: wrap;
	gap: min(calc(16 / var(--vw-min) * 100vw), 16px);
}
.streamingList{
	width: calc((100% - min(calc(16 / var(--vw-min) * 100vw), 16px)) / 2);
}
.streamingList .comLink__link{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	min-height: min(calc(40 / var(--vw-min) * 100vw), 40px);
	padding: min(calc(8 / var(--vw-min) * 100vw), 8px) 0;
	color: var(--color-white);
	background-color: rgba(0,0,0,40%);
	line-height: 1;
	letter-spacing: 0;
}
@media screen and (hover:hover) and (pointer: fine){
	.streamingList .comLink__link:before{
		content: '';
		position: absolute;
		inset: 0;
		background-color: var(--color-blue);
		opacity: 0;
		transition: opacity .3s ease;
	}
	.streamingList .comLink__link:hover{
		color: var(--color-black);
	}
	.streamingList .comLink__link:hover::before{
		opacity: 1;
	}
	.streamingList .comLink__deco:before,
	.streamingList .comLink__deco:after,
	.streamingList .comLink__link.-icon_blank .comLink__text:after{
		transition: background-color .3s ease;
	}
	.streamingList .comLink__link:hover .comLink__deco:before,
	.streamingList .comLink__link:hover .comLink__deco:after,
	.streamingList .comLink__link.-icon_blank:hover .comLink__text:after{
		background-color: var(--color-black);
	}
}
@media screen and (max-width:768px){
	#js-streamingModal .hero__visualArea{
		display: none;
	}
	.hero__contSectionIn__cont {
		max-width: 100%;
	}
	.hero__subSection:not(:first-child){
		padding-top: calc(70 / var(--vw-min) * 100vw);
	}
	.hero__subSectionIn {
		padding-top: calc(50 / var(--vw-min) * 100vw);
	}
	.streamingList .comLink__link{
		transition: color .3s ease;
		min-height: calc(72 / var(--vw-min) * 100vw);
	}
	.streamingLists {
		gap: calc(20 / var(--vw-min) * 100vw);
	}
	.streamingList {
		width: calc((100% - calc(20 / var(--vw-min) * 100vw)) / 2);
	} 
	.streamingList .hero__contSectionIn{
		padding: 0 calc(48 / var(--vw-min) * 100vw);
	}
}