@charset "utf-8";
/*-----------------------------------------------
 * monaxmedaka-s2.top.css
 * VISUAL
-------------------------------------------------*/
#visual{
	position:relative;
	width:100%;
}
@media screen and (max-width: 768px){
	#visual{
		display: flex;
		flex-direction: column;
		padding-bottom: min(calc(93 / var(--min-ww) * 100vw), 93px);
		overflow:hidden;
	}
}


/**
* visualContentBG
**/
.visualContentBG{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	bottom:0;
}
.visualContentBGIn{
	position:sticky;
	width:100%;
	top:0;
	height:min(100vh, 100%);
}
.tlogoWrap{
	position:absolute;
	top:0;
	left:0;
	margin-left:16.5%;/* 198 */
	width:10%;/* 120 */
}
.tlogo{
	display:block;
	width:100%;
	max-width:calc(120 / var(--vh-min) * 100vh);
	margin:0 auto;
}
.tlogoIn{
	display:block;
	position:relative;
	width:100%;
	margin-top:33.3334%;/* 40 */
}
.tlogoIn img{
	width:100%;
}


@media screen and (max-width: 768px){
	.visualContentBG{
		position: relative;
		bottom: unset;
		z-index: 2;
		padding-top: min(calc(32 / var(--vw-min) * 100vw), 32px);
	}
	.visualContentBGIn{
		position: unset;
		height: 100%;
	}
	.tlogoWrap{
		position: relative;
		top: unset;
		right: unset;
		width: 100%;
		padding-top: min(calc(160 / var(--vw-min) * 100vw), 160px);
		margin-left: unset;
	}
	.tlogo{
		width: min(calc(508 / var(--vw-min) * 100vw), 508px);
		max-width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.tlogoIn{
		margin-top:unset;
	}
}

/* movie */
.fvMovieWrap{
	position:absolute;
	bottom:0;
	left:0;
	width: min(calc(140 / var(--vw-min) * 100vw),140px);/* 172 */
	margin-bottom: calc(min(calc(20 / var(--vw-min) * 100vw), 20px) + min(calc(70 / var(--min-ww) * 100vw), min(calc(70 / var(--min-wh) * 100vh),calc(70px * var(--max-width-percent)))));/* 32 */
	z-index:10;
	pointer-events:auto;
}
.fvMovieCont{
	position:relative;
	width:100%;
	padding-top:100%;
}
.fvMovieContIn{
	width:93.0233%;/* 160 */
	height:93.0233%;
	margin:auto;
	border-radius:50%;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.btn_fvmoviePLay{
	display:block;
	width:100%;
	height:100%;
	border-radius:50%;
	overflow:hidden;
	background-color:var(--color-main-red);
	mix-blend-mode:overlay;
	position:relative;
	z-index:2;
}
.moviebg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	transform:scale(1.5);
	opacity:60%;
}
.bg_ytplayer{
	position:absolute;
	top:-50%;
	left:-50%;
	width:200%;
	height:200%;
	transition:.3s ease .2s;
	pointer-events:none;
}
body.--yt-apmov-stop .bg_ytplayer{
	opacity:0;
	transition-delay:0s;
}

.fvMovieContIn .icon-play{
	position:absolute;
	top:0;
	left:5%;/* 8 */
	right:0;
	bottom:0;
	width:22.5%;/* 36 */
	height:25%;/* 40 */
	margin:auto;
	background-color:#fff;
	mask:url(../img/common/icon_play.svg) no-repeat center / contain;
	-webkit-mask:url(../img/common/icon_play.svg) no-repeat center / contain;
	z-index:2;
	pointer-events:none;
}

.fvMovie_frame{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	pointer-events:none;
	background:url(../img/top/fvMovie_frame.svg) no-repeat center / contain;
}

@media (hover:hover) and (pointer:fine){
	.btn_fvmoviePLay{
		transition:.6s ease;
	}
	.icon-play{
		transition:.4s cubic-bezier(.84,.33,.53,.97);
	}
	.btn_fvmoviePLay:hover{
		opacity:40%;
	}
	.btn_fvmoviePLay:hover~.icon-play{
		transform:rotate(360deg) scale(1.25);
	}
}
@media screen and (max-width: 768px){
	.fvMovieWrap{
		left: unset;
		right: 0;
		bottom: 0;
		margin-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
		width: min(calc(216 / var(--min-ww) * 100vw), 216px);
		max-width:unset;
	}
}



/**
* visualImageArea
**/
.visualImageArea{
	width: 100%;
	padding-left: 13.3334%;/* 160 */
	position:relative;
}
.visualImageAreaIn{
	width:calc(57.6924% + 20px);/* 600 + 20 */
	height: 100%;
	padding:70px 0;
	margin:0 auto;
	position:relative;
}

.visualImageArea{
	height:calc(70.1667vw + min(calc(160 / var(--vw-min) * 100vw), calc(160px * var(--max-percent))));
}
.visualImageWrap{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:calc(100% - 20px);
	margin:0 auto;
}
.visualImageInWrap{
	position:sticky;
	top:0;
	left:0;
	width:100%;
	height:min(100vh, 100%);
}
.visualImage{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:min(calc(80 / var(--min-ww) * 100vw), min(calc(80 / var(--min-wh) * 100vh),calc(80px * var(--max-width-percent)))) 0;
	clip-path:polygon(0 0%, 100% 0, 100% 100%, 0% 100%);
	background-color:#FFF;
	border-radius: 20px;
	overflow: hidden;
}
.visualImageListsWrap{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	bottom:0;
}
.visualImage img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center 0;
}
.visualImageList.--contain img{
	object-position:center!important;
	object-fit:contain;
}



.visualFrameWrap{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:100%;
}
.visualFrameInWrap{
	position:sticky;
	top:0;
	left:0;
	width:100%;
	height:min(100vh, 100%);
}
.visualFrame{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	margin:70px 0;
	margin:min(calc(70 / var(--min-ww) * 100vw), min(calc(70 / var(--min-wh) * 100vh),calc(70px * var(--max-width-percent)))) 0;
	width:100%;
}

.visualFrame--line{
	position: absolute;
}
.visualFrame--line.-t{
	top: 0;
	left: 0;
	right: 131px;
	height: 121px;
	border-top-left-radius: 30px;
	border-top: 2px solid var(--color-main-brown);
	border-left: 2px solid var(--color-main-brown);
}
.visualFrame--line.-b{
	top: 121px;
	right: 0;
	bottom: 0;
	left: 0;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	border-left: 2px solid var(--color-main-brown);
	border-right: 2px solid var(--color-main-brown);
	border-bottom: 2px solid var(--color-main-brown);
}


@media screen and (max-width: 768px){
	.visualImageArea{
		order: -1;
		width: 100%;
		padding: min(calc(52 / var(--min-ww) * 100vw), 52px);
		height: auto;
	}
	.visualImageAreaIn{
		width: 100%;
		padding: 0;
	}
	.visualImageWrap{
		position: relative;
		width: 100%;
		padding: min(calc(20 / var(--vw-min) * 100vw), 20px);
	}
	.visualImageInWrap{
		position: unset;
		width: 100%;
		height: auto;
	}
	.visualImage{
		width: 100%;
		position: relative;
		margin: unset;
		clip-path: unset;
	}
	.visualImageListsWrap{
		position: relative;
		top: unset;
		bottom: unset;
	}
	.visualImage img{
		height: auto;
		object-fit: unset;
	}

	.visualFrameWrap{
		right: 0;
		width: auto;
	}
	.visualFrameInWrap{
		position: unset;
		height: auto;
	}
	.visualFrame{
		margin: 0;
		right: 0;
		width: auto;
	}
	.visualFrame--line.-t{
		top: 0;
		right: 0;
		left: min(calc(96 / var(--vw-min) * 100vw), 96px);
		height: min(calc(256 / var(--vw-min) * 100vw), 256px);
		border-top-left-radius: 0;
		border-top-right-radius: 30px;
		border-left: unset;
		border-right: 2px solid var(--color-main-brown);
	}
	.visualFrame--line.-b{
		top: min(calc(256 / var(--vw-min) * 100vw), 256px);
	}
}


/*
* visualChange
*/
.visualChangeWrap{
	position:absolute;
	bottom:30px;
	right:0;
	margin-right:-8.0646%;/* -50 */
	width:20.6452%;/* 128 */
	opacity:0;
	transition:opacity .3s ease;
}
.visualChangeList{
	width: 100%;
	padding:min(3.125%, 4px) 0;
	transition:.3s ease;
}
.visualChangeList img{
	width:100%;
}
.btn_visualChange{
	display:block;
	width: 100%;
	border-radius:4px;
	border: 2px solid var(--color-white);
	position:relative;
	overflow:hidden;
	transition:border-color .3s ease;
}
.visualChange_gause{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	opacity:0;
}
.visualChange_gause:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:100%;
	background-color:var(--color-main-red);
	mix-blend-mode:color;
}
/* is-active */
body.--is-loaded-fin .visualChangeWrap{
	opacity:1;
}
body.--is-loaded-fin .btn_visualChange.is-active{
	border-color:var(--color-main-red);
}
body.--is-loaded-fin .btn_visualChange.is-active img{
	transform:scale(1.1);
}
body.--is-loaded-fin .btn_visualChange.is-active .visualChange_gause{
	opacity:1;
}
body.--is-loaded-fin .btn_visualChange.is-active .visualChange_gause:before{
	bottom:0%;
	transition:bottom 8s linear;
}

@media (hover:hover) and (pointer:fine){
	.btn_visualChange:hover{
		border-color:var(--color-main-red);
	}
}

@media screen and (max-width: 768px){
	.visualChangeWrap{
		bottom: min(calc(20 / var(--vw-min) * 100vw), 20px);
		width: min(calc(162 / var(--vw-min) * 100vw), 162px);
		margin-right: max(calc(-52 / var(--vw-min) * 100vw), -52px)
	}
	.visualChangeList{
		padding: min(calc(5 / var(--vw-min) * 100vw), 5px) 0;
	}
	.btn_visualChange{
		border-width: min(calc(2 / var(--vw-min) * 100vw), 2px);
		border-right: unset;
		border-top-right-radius: unset;
		border-bottom-right-radius: unset;
	}
}





/*
* visualOnairInfoWrap
*/
.visualOnairInfoWrap{
	position:absolute;
	top:0;
	left: max(calc(-100 / var(--vw-min) * 100vw), -100px);
	right: max(calc(-40 / var(--vw-min) * 100vw), -40px);
	bottom: 0;
	pointer-events: none;
}
.visualOnairInfoInWrap{
	position:sticky;
	top:0;
	left:0;
	width:100%;
	height:min(100vh, 100%);
}
.visualOnairInfo{
	width: 160px;
	position:absolute;
	top:0;
	right:0;
	margin-top:calc(max(calc(-38 / var(--vw-min) * 100vw), -38px) + min(calc(70 / var(--min-ww) * 100vw), min(calc(70 / var(--min-wh) * 100vh),calc(70px * var(--max-width-percent)))));
}
.visualOnairInfoIn{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
}
.visualOnairInfo__txt{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: rotate(15deg);
}
.visualOnairInfo__txt:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/fv_circle__tvanimation.svg) no-repeat center / contain;
	animation: 32s ani_rotate linear infinite;
}
.visualOnairInfo__txt > img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:contain;
}

@media screen and (max-width: 768px){
	.visualOnairInfoWrap{
		width: min(calc(220 / var(--vw-min) * 100vw), 220px);
		left: 0;
		margin-left: max(calc(-40 / var(--vw-min) * 100vw), -40px);
		margin-top: 0;
		bottom: 0;
	}
	.visualOnairInfoInWrap{
		position: unset;
		height: 100%;
		position: relative;
	}
	.visualOnairInfo{
		width: min(calc(208 / var(--vw-min) * 100vw), 208px);
		margin-top: min(calc(32 / var(--vw-min) * 100vw), 32px);;
		left: 0;
		right: unset;
		overflow: hidden;
	}
	.visualOnairInfo__txt{
		transform: rotate(-15deg);
	}
}

/*
* visualtoContentWrap
*/
.visualtoContentWrap{
	position: absolute;
	inset: 0;
	width: 96px;/* 96 */
	margin:0 auto;
}
.visualtoContentInWrap{
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: min(100vh, 100%);
}
.visualtoContent{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: 72px 0 40px;
	margin: min(calc(72 / var(--min-ww) * 100vw), min(calc(72 / var(--min-wh) * 100vh),calc(72px * var(--max-width-percent)))) 0;
    width: 100%;
}
.link_visualtoContent{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: 44.9153%;
	margin-bottom: -16.6667%;/* 16 */
}
.link_visualtoContent:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/link_visualtoContent__arrow.svg) no-repeat center / contain;
}
@media (hover:hover) and (pointer:fine){
	.link_visualtoContent:before{
		transition: .3s ease;
	}
	.link_visualtoContent:hover::before{
		transform: translateY(25%);
	}
}
@media screen and (max-width: 768px){
	.visualtoContentWrap{
		width: 15.7334%;/* 118 */
	}
	.visualtoContentInWrap{
		position: unset;
		height: auto;
	}
	.visualtoContent{
		top: unset;
		left: 0;
		margin: 0 0 min(calc(4 / var(--vw-min) * 100vw), 4px);
	}
}


/*-----------------------------------------------
 * NEWS
-------------------------------------------------*/
.newsLists{
	position: relative;
}
.newsList{
	width: 100%;
	position: relative;
	z-index: 2;
}
.newsList:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	border-bottom: 2px solid var(--color-main-brown);
}
.newsList:first-child:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right:0;
	border-bottom: 2px solid var(--color-main-brown);
	z-index: 1;
}
.newsList__link{
	width: 100%;
	min-height: min(calc(80 / var(--vw-min) * 100vw), 80px);
	position: relative;
	display: flex;
	align-items: center;
	text-decoration: none;
	line-height: 1;
	background-color: var(--color-white);
}
.newsList__date{
	display: block;
	line-height: 1;
	width: min(calc(120 / var(--vw-min) * 100vw), 120px);
	background-color: var(--color-main-brown);
	font-family:var(--font-en);
	font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
	padding: min(calc(6 / var(--vw-min) * 100vw), 6px) min(calc(16 / var(--vw-min) * 100vw), 16px);
	color: var(--color-white);
	text-align: center;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}
.newsList__title{
	width: 100%;
	padding:min(calc(20 / var(--vw-min) * 100vw), 20px) min(calc(72 / var(--vw-min) * 100vw), 72px) min(calc(20 / var(--vw-min) * 100vw), 20px) min(calc(44 / var(--vw-min) * 100vw), 44px);
	line-height: 1;
	position: relative;
}
.newsList__title--txt{
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	line-height: 1.5;
	color: #222;
}
.newsList__title:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: min(calc(16 / var(--vw-min) * 100vw), 16px);
	width: min(calc(13 / var(--vw-min) * 100vw), 13px);
	height: min(calc(32 / var(--vw-min) * 100vw), 32px);
	-webkit-mask: url(../img/common/arrow_r.svg) no-repeat center / contain;
	mask: url(../img/common/arrow_r.svg) no-repeat center / contain;
	background-color: var(--color-main-red);
}

@media (hover:hover) and (pointer:fine){
	.newsList__link:before{
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(var(--color-main-red), var(--color-main-red)) right center / 0 100% no-repeat;
		opacity: 30%;
		transition: background-size .4s ease;
	}
	.newsList__link:hover::before{
		background-position: left bottom;
		background-size: 100% 100%;
	}
	.newsList__title:after{
		transition: .3s ease;
	}
	.newsList__link:hover .newsList__title:after{
		transition-delay: .2s;
		transform: translateX(50%);
	}
}

@media screen and (max-width: 768px){
	#news .contentIn{
		margin-top: min(calc(48 / var(--min-ww) * 100vw), 48px);
		padding: 0 6.4%;
	}
	.newsList__link{
		min-height: min(calc(140 / var(--vw-min) * 100vw), 140px);
	}
	.newsList__date{
		width: min(calc(100 / var(--vw-min) * 100vw), 100px);
		font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
		line-height: 1.2;
		padding: min(calc(10 / var(--vw-min) * 100vw), 10px) min(calc(16 / var(--min-ww) * 100vw), 16px);;
	}
	.newsList__title{
		padding-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
		padding-right: calc(72 / var(--vw-min) * 100vw);
		padding-bottom: min(calc(20 / var(--vw-min) * 100vw), 20px);
		padding-left: calc(24 / var(--vw-min) * 100vw);
	}
	.newsList__title--txt{
		-webkit-line-clamp:2;
		line-height: 2;
	}
	.newsList__title:after{
		width: var(--sp-size-20);
		height: var(--sp-size-48);
		margin-right: var(--sp-size-24);
	}
	#news .btn_linkWrap{
		margin-top: min(calc(60 / var(--vw-min) * 100vw), 60px);
	}
}




/**
* scrAni - set
**/
.newsLists,
.follow_xWrap{
	opacity: 0;
	transition:.3s ease;
}
.newsList__title{
	opacity:0;
	transform:translateY(10%);
	transition:.4s ease;
}
.follow_xIn:before{
	animation-play-state:paused;
}

/* scrAni - ani */
.content.is-ani .newsLists,
.content.is-ani .follow_xWrap{
	opacity:1;
	transition-delay:1s;
}
.content.is-ani .newsList__title{
	opacity:1;
	transform:translateY(0%);
	transition-delay:1.3s;
}
.content.is-ani .follow_xIn:before{
	animation-play-state:running;
}


/*-----------------------------------------------
 * STAFFCAST
-------------------------------------------------*/
#staffcast .contentIn{
	display: flex;
}
.staffcastCont{
	width: 50%;
	position: relative;
}

.staffcastCont .cont_h3{
	margin-bottom: min(calc(36 / var(--vw-min) * 100vw), 36px);
}

.staffcastLists{
	display: flex;
	flex-direction: column;
	gap: min(calc(26 / var(--vw-min) * 100vw), 26px);
}
.staffcastList{
	width: 100%;
	display: flex;
	letter-spacing: 0;
}
.staffcastList > dt{
	flex-shrink: 0;
	display: inline-block;
	padding-right: min(calc(11 / var(--vw-min) * 100vw), 11px);
	padding-top: min(calc(4 / var(--vw-min) * 100vw), 4px);
	line-height: 2;
	color: var(--color-main-red);
}
.staffcastList > dt > span{
	display: inline-block;
	padding-right: min(calc(21 / var(--vw-min) * 100vw), 21px);
	position: relative;
	line-height: 2;
}
.staffcastList > dt > span:after{
	content:'';
	position:absolute;
	top: min(calc(2 / var(--vw-min) * 100vw), 2px);
	right: 0;
	bottom: 0;
	width: min(calc(10 / var(--vw-min) * 100vw), 10px);
	height: min(calc(10 / var(--vw-min) * 100vw), 10px);
	margin: auto 0;
	background: url(../img/common/icon_x.svg) no-repeat center / contain;
}
.staffcastList > dd{
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	color: #222;
	line-height: 2;
}
.staffcastList > dd > small{
	font-size: 60%;
}


@media screen and (max-width: 768px){
	#staffcast .contentIn{
		padding: 0 6.4%;
		flex-direction: column;
		gap: min(calc(60 / var(--vw-min) * 100vw), 60px);
		margin-top: min(calc(48 / var(--vw-min) * 100vw), 48px);
	}
	.staffcastCont{
		width: 100%;
	}
	.staffcastCont .cont_h3{
		margin-bottom: min(calc(20 / var(--vw-min) * 100vw), 20px);
	}
	.staffcastLists{
		flex-direction: row;
		flex-wrap: wrap;
		width: calc(100% + min(calc(24 / var(--vw-min) * 100vw), 24px));
		margin-left: max(calc(-12 / var(--vw-min) * 100vw), -12px);
		column-gap: unset;
		row-gap: min(calc(40 / var(--vw-min) * 100vw), 40px);
	}
	.staffcastList{
		width: 50%;
		padding:0 min(calc(12 / var(--vw-min) * 100vw), 12px);
		flex-direction:column;
		font-size:var(--sp-size-24);
	}
	.staffcastList.-w100{
		width: 100%;
	}
	.staffcastList > dt{
		padding-right: 0;
	}
	.staffcastList > dt > span{
		padding-right: min(calc(36 / var(--vw-min) * 100vw), 36px);
	}
	.staffcastList > dt > span:after{
		width: min(calc(16 / var(--vw-min) * 100vw), 16px);
		height: min(calc(16 / var(--vw-min) * 100vw), 16px);
		top: min(calc(2 / var(--vw-min) * 100vw), 2px);
		bottom: 0;
	}
	.staffcastList > dd{
		font-size: min(calc(28 / var(--vw-min) * 100vw), 28px);
	}
	.staffcastList > dd > small{
		font-size: 71.4286%;
	}
}

/* STAFF */
#staff{
	padding-right: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}
#staff .cont_h3{
	font-family: var(--font-en);
}
@media screen and (max-width:768px){
	#staff{
		padding-right: 0;
	}
}


/* CAST */
#cast{
	padding-left: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}
#cast .cont_h3{
	font-family: var(--font-en);
}
#cast .staffcastList > dd{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.castName{
	max-width: 100%;
	flex-shrink: 0;
	padding-right: min(calc(12 / var(--vw-min) * 100vw), 12px);
}
.btn_scComment{
	display: inline-block;
	width: min(calc(40 / var(--vw-min) * 100vw), 40px);
	height: min(calc(20 / var(--vw-min) * 100vw), 20px);
	background: url(../img/common/icon_fukidashi.svg) no-repeat center / contain;
}
@media (hover:hover) and (pointer:fine){
	.btn_scComment{
		transition: .3s ease;
	}
	.btn_scComment:hover{
		transform: scale(1.15);
	}
}
@media screen and (max-width: 768px){
	#cast{
		padding-left: 0;
	}
	.castName{
		padding-right: min(calc(22 / var(--vw-min) * 100vw), 22px);
	}
	.btn_scComment{
		width: min(calc(83 / var(--vw-min) * 100vw), 83px);
		height: min(calc(40 / var(--vw-min) * 100vw), 40px);
	}
}



/**
* COMMENT MODAL
**/
.commentContent{
	width: 100%;
	max-width: calc(880px * var(--max-width-percent));
	margin: 0 auto;
	padding: 0 6.6667%;
}
.commentContentIn{
	padding: 7.6924%;/* 80 */
	background-color: #FFF;
	position: relative;
}
.commentContentIn:before,
.commentContentIn:after{
	content: '';
	position: absolute;
	width: min(calc(72 / var(--vw-min) * 100vw), 72px);
	height: min(calc(72 / var(--vw-min) * 100vw), 72px);
	background: url(../img/common/accent_side.svg) no-repeat center / contain;
}
.commentContentIn:before{
	top: 0;
	left: 0;
	margin-top: max(calc(-16 / var(--vw-min) * 100vw), -16px);
	margin-left: max(calc(-16 / var(--vw-min) * 100vw), -16px);
}
.commentContentIn:after{
	bottom: 0;
	right: 0;
	margin-bottom: max(calc(-16 / var(--vw-min) * 100vw), -16px);
	margin-right: max(calc(-16 / var(--vw-min) * 100vw), -16px);
	transform: scale(-1);
}
#js-commentModalCont{
	display: flex;
	width: 100%;
}
.commentCont{
	width: 100%;
}
.commentCont__h3{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	font-weight: 500;
}
.commentCont__h3 > .commentCont__h3_job{
	flex-shrink: 0;
	display: inline-block;
	padding-right: min(calc(16 / var(--vw-min) * 100vw), 16px);
	line-height: 2;
	color: var(--color-main-red);
}
.commentCont__h3 > .commentCont__h3_job > span{
	display: inline-block;
	padding-right: min(calc(32 / var(--vw-min) * 100vw), 32px);
	position: relative;
	line-height: 2;
}
.commentCont__h3 > .commentCont__h3_job > span:after{
	content: '';
	position: absolute;
	top: min(calc(2 / var(--vw-min) * 100vw), 2px);
	right: 0;
	bottom: 0;
	width: min(calc(12 / var(--vw-min) * 100vw), 12px);
	height: min(calc(12 / var(--vw-min) * 100vw), 12px);
	margin: auto 0;
	background: url(../img/common/icon_x.svg) no-repeat center / contain;
}
.commentCont__h3 > .commentCont__h3_name{
	color: #222;
	line-height: 2;
}
.commentCont__txt{
	line-height: 2;
}
.commentCont__img{
	order: -1;
	flex-shrink: 0;
	width: 30%;
	padding-right: 5%;
}
.commentCont__img img{
	max-width: 100%;
}

@media screen and (max-width: 768px){
	.commentContent{
		max-width: 100%;
		padding: var(--sp-size-64) var(--sp-size-48);
	}
	.commentContentIn{
		padding-top: var(--sp-size-48);
		padding-left: var(--sp-size-36);
		padding-right: var(--sp-size-36);
		padding-bottom: var(--sp-size-36);
	}
	.commentContentIn:before,
	.commentContentIn:after{
		width: min(calc(90 / var(--min-ww) * 100vw), 90px);
		height: min(calc(90 / var(--min-ww) * 100vw), 90px);
	}
	.commentContentIn:before{
		margin-top:max(calc(-21 / var(--min-ww) * 100vw),-21px);
		margin-left:max(calc(-21 / var(--min-ww) * 100vw),-21px);
	}
	.commentContentIn:after{
		margin-bottom:max(calc(-21 / var(--min-ww) * 100vw),-21px);
		margin-right:max(calc(-21 / var(--min-ww) * 100vw),-21px);
	}
	#js-commentModalCont{
        flex-direction: column;
	}
	.commentCont__h3{
		justify-content: center;
		font-size: var(--sp-size-32);
		margin-bottom: var(--sp-size-32);
	}
	.commentCont__h3 > .commentCont__h3_job{
		padding-right: var(--sp-size-20);
	}
	.commentCont__h3 > .commentCont__h3_job > span{
		padding-right:var(--sp-size-36);
	}
	.commentCont__h3 > .commentCont__h3_job > span:after{
		top:var(--sp-size-4);
		width:var(--sp-size-16);
		height:var(--sp-size-16);
	}
	.commentCont__img{
		width:min(68.7286%, 400px);
		padding-right:0;
		margin:var(--sp-size-24) auto var(--sp-size-48);
	}
}



/**
* scrAni - set
**/
.staffcastCont .cont_h3__txt{
	opacity: 0;
	transform: translateX(1em);
	transition: opacity .4s ease, transform .4s ease;
}
.staffcastLists{
	opacity: 0;
	transition: opacity .3s ease;
}
.staffcastList > dt > span:after{
	transform: rotate(450deg);
	transition: transform .6s cubic-bezier(.35,.15,.3,1.08);
}

.staffcastCont.is-ani .cont_h3__txt{
	opacity: 1;
	transform: translateX(0%);
	transition-delay: .4s, .6s;
}

.staffcastCont.is-ani .staffcastLists{
	transition-delay: .8s;
	opacity: 1;
}
.staffcastCont.is-ani .staffcastList > dt > span:after{
	transition-delay: 1.0s;
	transform: rotate(0deg);
}


/*-----------------------------------------------
 * MOVIE
-------------------------------------------------*/
#movie{
	overflow: hidden;
}
#movie .contentIn{
	width: 100%;
	max-width: 100%;
}
.movieListsWrap{
	overflow: unset;
}
.movieList{
	width: 56.6667%;/* 616 + 64 */
	max-width: calc(680px * var(--max-width-percent));
}
.movieListIn{
	width: 100%;
	padding: 0 4.7059%;
}
.movieList__movWrap{
	width: 100%;
	position: relative;
	padding: min(calc(9 / var(--vw-min) * 100vw), 9px);
	line-height: 0;
}
.movieList__movFrame{
	position: absolute;
	inset: 0;
	border: 2px solid var(--color-main-brown);
	border-radius: min(calc(28 / var(--vw-min) * 100vw), 28px);
}


.btn_movieListPlay{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
	border-radius: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.btn_movieListPlay:before{
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-main-red);
	opacity: 30%;
	z-index: 2;
	transition: opacity .3s ease;
}
.btn_movieListPlay:after{
	content: '';
	position: absolute;
	inset: 0;
	background-image: 
		radial-gradient(white 20%, transparent 20%),
		radial-gradient(white 20%, transparent 20%);
	background-size: 10px 10px;
	background-position: 0 0, 5px 5px;
	z-index: 3;
	opacity: 30%;
}
.btn_movieListPlay img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s cubic-bezier(.64,.39,.46,1);
}
.icon-movPlay{
	width: 13.3334%;/* 80 */
	height: 23.7389%;/* 80 */
	position: absolute;
	inset: 0;
	margin: auto;
	z-index: 2;
}
.icon-movPlay:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/common/icon_play__base.svg) no-repeat center / contain;
}
.icon-movPlay:after{
	content:'';
	position:absolute;
	top:0;
	left:10%;
	right:0;
	bottom:0;
	margin:auto;
	width:45%;/* 36 */
	height:50%;/* 40 */
	background:url(../img/common/icon_play.svg) no-repeat center / contain;
	transition:transform .4s cubic-bezier(.84,.33,.53,.97);
}

.movieList__title{
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	margin-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.movieList__title--txt{
	display: inline;
	padding: 0 0.5em;
	background: linear-gradient(180deg,transparent 0%, transparent 60%, rgba(var(--color-main-red-rgb), 30%) 60%, rgba(var(--color-main-red-rgb), 30%) 100%);
}

.moviePrevNextWrap{
	position:absolute;
	top:0;
	left:0;
	right:0;
	width:56.6667%;/* 616 + 64 */
	max-width:calc(680px * var(--max-width-percent));
	margin:0 auto;
	z-index:2;
	pointer-events:none;
}
.moviePrevNextHeightWrap{
	width:100%;
	padding:0 4.7059%;
}
.moviePrevNextHeightInWrap{
    width:100%;
    position:relative;
    padding:8px;
}
.moviePrevNextHeight{
	width:100%;
	padding-top:56.25%;
}

.moviePrevNextInWrap{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
}
.moviePrevNext{
	margin:auto 0;
	transition:.3s ease;
	width:7.0589%;
	position:absolute;
	pointer-events:auto;
	transition:transform .3s ease;
}
.moviePrevNext:before{
	content:'';
	display:block;
	width:100%;
	padding-top:206.3158%;
}
.btn_moviePrev{
	left:0;
}
.btn_moviePrev:before{
	background:url(../img/common/arrow_prev.png) no-repeat center left / contain;
}
.btn_movieNext{
	right:0;
}
.btn_movieNext:before{
	background:url(../img/common/arrow_next.png) no-repeat center right / contain;
}

@media (hover:hover) and (pointer:fine){
	.btn_moviePrev:hover{
		transform:translateX(-20%);
	}
	.btn_movieNext:hover{
		transform:translateX(20%);
	}
	.btn_movieListPlay:hover::before{
		opacity:40%;
	}
	.btn_movieListPlay:hover img{
		transform:scale(1.05);
	}
	.btn_movieListPlay:hover .icon-movPlay:after{
		transform:rotate(360deg) scale(1.1);
	}
}

@media screen and (max-width: 768px){
	#movie .contentIn{
		margin-top: min(calc(50 / var(--vw-min) * 100vw), 50px);
	}
	.movieList{
		width: min(calc(606 / var(--vw-min) * 100vw), 606px);
		max-width: unset;
	}
	.movieListIn{
		padding:0 min(calc(8 / var(--vw-min) * 100vw), 8px);
	}
	.movieList__movWrap{
		padding: min(calc(18 / var(--vw-min) * 100vw), 18px);
	}
	.movieList__movFrame{
		border-width: min(calc(4 / var(--vw-min) * 100vw), 4px);
		border-radius: min(calc(56 / var(--vw-min) * 100vw), 56px);
	}
	.btn_movieListPlay{
		border-radius: min(calc(40 / var(--vw-min) * 100vw), 40px);
	}
	.icon-movPlay{
		width: var(--sp-size-96);
		height: var(--sp-size-96);
	}
	.movieList__title{
		margin-top: min(calc(24 / var(--vw-min) * 100vw), 24px);
	}
	.moviePrevNextWrap{
		width:85.3334%;/* 640 */
		max-width:unset;
	}
	.moviePrevNextHeightWrap{
		padding:0 2.8125%;/* 0 18 */
	}
	.moviePrevNextHeightInWrap{
		padding:3.3445%;
	}
	.moviePrevNext{
		width:9.6875%;
	}
}

.movieListsWrap.--noSwiper .movieLists{
	justify-content: center;
}
.movieListsWrap.--noSwiper .moviePrevNextWrap{
	display: none;
}


/* scrAni */
.btn_movieListPlay{
	opacity:0;
	transform:scale(0.8);
	transition:transform .6s cubic-bezier(.64,.39,.46,1) 1.4s, opacity .6s cubic-bezier(.64,.39,.46,1) 1.4s;
}
.movieList__movFrame{
	opacity: 0;
	transform: scale(104%);
	transition: opacity .6s ease 1s, transform .6s ease 1s;
}
.movieList__title{
	opacity:0;
	transform:translateY(50%);
	transition:transform .6s cubic-bezier(.64,.39,.46,1) 1.4s, opacity .6s cubic-bezier(.64,.39,.46,1) 1.4s;
}
.moviePrevNextInWrap{
	opacity:0;
	transition:opacity .3s ease 1.8s;
}


/* scrAni - is-ani */
#movie.is-ani .btn_movieListPlay{
	opacity:1;
	transform:scale(1);
}
#movie.is-ani .movieList__movFrame{
	transform:scale(1);
	opacity: 1;
}
#movie.is-ani .movieList__title{
	opacity:1;
	transform:translateY(0%);
}
#movie.is-ani .moviePrevNextInWrap{
	opacity:1;
}


/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
#character{
	position:relative;
	padding-bottom:80px;
	overflow: hidden;
}

.characterContent{
	position:relative;
	padding: min(calc(46 / var(--vw-min) * 100vw), 46px) 0;
}


@media screen and (max-width: 768px){
	#character{
		padding-bottom: 0;
	}
	#character .contentIn{
		margin-top: min(calc(48 / var(--vw-min) * 100vw), 48px);
		padding: 0 min(calc(48 / var(--vw-min) * 100vw), 48px);
	}
	.characterContent{
		padding: min(calc(24 / var(--vw-min) * 100vw), 24px) 0;
	}
}


/**
* Character - main
**/
.characterMainSwiper{
	overflow: unset;
	z-index: 0;
}
.characterMainList{
	position: relative;
}
.characterMainListCont{
	position: relative;
	transform: translateX(min(calc(10 / var(--vw-min) * 100vw), calc(10px * var(--max-percent))));
	padding: 0 min(calc(65 / var(--vw-min) * 100vw), calc(65px * var(--max-percent)));
}
.characterMainListContIn{
	display: flex;
	position: relative;
	z-index: 1;
	width: 100%;
}


.characterDetail{
	width: min(calc(250 / var(--vw-min) * 100vw), calc(250px * var(--max-percent)));
	padding-top: min(calc(90 / var(--vw-min) * 100vw), calc(90px * var(--max-percent)));
	flex-shrink: 0;
}
.characterName{
	display: flex;
	flex-direction: column;
}
.characterName_name{
	font-size: min(calc(32 / var(--vw-min) * 100vw), 32px);
	font-weight: 700;
	color: #222;
	line-height: 1;
}
.characterName_name > span{
	display: inline-block;
	padding: 0 min(calc(5 / var(--vw-min) * 100vw), 5px) min(calc(5 / var(--vw-min) * 100vw), 5px);
	position: relative;
}
.characterName_name > span:before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: min(calc(10 / var(--vw-min) * 100vw), 10px);
	z-index: -1;
	background-color: rgba(var(--color-main-red-rgb), 30%);
}
.characterNama_en{
	order: -1;
	font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
	font-weight: 700;
	color: var(--color-main-red);
	line-height: 0.70589;
	margin-bottom: min(calc(12 / var(--vw-min) * 100vw), 12px);
	padding-left: min(calc(5 / var(--vw-min) * 100vw), 5px);
}
.characterName_cv{
	display: flex;
	align-items: center;
	line-height: 1;
	font-weight: 500;
	margin-top: min(calc(24 / var(--vw-min) * 100vw), calc(24px * var(--max-percent)));
	padding-left: min(calc(5 / var(--vw-min) * 100vw), 5px);
}
.characterName_cv > dt{
	flex-shrink: 0;
	display: inline-block;
	padding-right: min(calc(8 / var(--vw-min) * 100vw), 8px);
	color:var(--color-main-red);
}
.characterName_cv > dt > span{
	display: inline-block;
	padding-right: min(calc(24 / var(--vw-min) * 100vw), 24px);
	position: relative;
	line-height: 1;
}
.characterName_cv > dt > span:after{
	content:'';
	position:absolute;
	top: 0.15em;
	right: 0;
	bottom: 0;
	width: min(calc(16 / var(--vw-min) * 100vw), 16px);
	height: min(calc(14 / var(--vw-min) * 100vw), 14px);
	margin: auto 0;
	background:url(../img/common/icon_heart.svg) no-repeat center / contain;
}
.characterName_cv > dd{
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	color: #222;
	line-height: 1;
}
.characterDetailText{
	color: #222;
	font-weight: 500;
	line-height: 2;
	padding-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
	padding-left: min(calc(5 / var(--vw-min) * 100vw), 5px);
}


@media screen and (max-width: 768px){
	.characterMainListCont{
		 transform: unset;
		 padding: min(calc(48 / var(--vw-min) * 100vw), 48px);
	}
	.characterMainListContIn{
		flex-direction: column;
	}
	.characterDetail{
		width: 100%;
		padding-top: 0;
		z-index: 1;
	}
	.characterName{
		flex-wrap: wrap;
		flex-direction: row;
		align-items: flex-end;
	}
	.characterName_name{
		font-size: min(calc(40 / var(--vw-min) * 100vw), 40px);
	}
	.characterName_name > span{
		padding: 0;
	}
	.characterName_name > span:before{
		content: unset;
	}
	.characterNama_en{
		order: 0;
		font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
		margin-bottom: unset;
		padding-left: min(calc(24 / var(--vw-min) * 100vw), 24px);
	}
	.characterName_cv{
		width: 100%;
		margin-top: min(calc(26 / var(--vw-min) * 100vw), 26px);
		padding-left: 0;
	}
	.characterName_cv > dt{
		padding-right: min(calc(14 / var(--vw-min) * 100vw), 14px);
	}
	.characterName_cv > dt > span{
		padding-right: min(calc(34 / var(--vw-min) * 100vw), 34px);
	}
	.characterName_cv > dt > span:after{
		width: min(calc(22 / var(--vw-min) * 100vw), 22px);
		height: min(calc(20 / var(--vw-min) * 100vw), 20px);
	}
	.characterName_cv > dd{
		font-size: min(calc(28 / var(--vw-min) * 100vw), 28px);
	}
	.characterDetailText{
		padding-top: min(calc(568 / var(--vw-min) * 100vw), 568px);
		padding-left: 0;
		text-shadow:
			0 min(calc(1 / var(--vw-min) * 100vw), 1px) min(calc(4 / var(--vw-min) * 100vw), 4px) rgba(255, 255, 255, 0.9),
			0 min(calc(3 / var(--vw-min) * 100vw), 3px) min(calc(12 / var(--vw-min) * 100vw), 12px) rgba(255, 255, 255, 0.55),
			0 min(calc(1 / var(--vw-min) * 100vw), 1px) min(calc(4 / var(--vw-min) * 100vw), 4px) rgba(255, 255, 255, 0.9),
			0 min(calc(3 / var(--vw-min) * 100vw), 3px) min(calc(12 / var(--vw-min) * 100vw), 12px) rgba(255, 255, 255, 0.55),
			0 min(calc(1 / var(--vw-min) * 100vw), 1px) min(calc(4 / var(--vw-min) * 100vw), 4px) rgba(255, 255, 255, 0.9),
			0 min(calc(3 / var(--vw-min) * 100vw), 3px) min(calc(12 / var(--vw-min) * 100vw), 12px) rgba(255, 255, 255, 0.55),
			0 min(calc(1 / var(--vw-min) * 100vw), 1px) min(calc(4 / var(--vw-min) * 100vw), 4px) rgba(255, 255, 255, 0.9),
			0 min(calc(3 / var(--vw-min) * 100vw), 3px) min(calc(12 / var(--vw-min) * 100vw), 12px) rgba(255, 255, 255, 0.55),
			0 min(calc(1 / var(--vw-min) * 100vw), 1px) min(calc(4 / var(--vw-min) * 100vw), 4px) rgba(255, 255, 255, 0.9),
			0 min(calc(3 / var(--vw-min) * 100vw), 3px) min(calc(12 / var(--vw-min) * 100vw), 12px) rgba(255, 255, 255, 0.55),
			0 min(calc(1 / var(--vw-min) * 100vw), 1px) min(calc(4 / var(--vw-min) * 100vw), 4px) rgba(255, 255, 255, 0.9),
			0 min(calc(3 / var(--vw-min) * 100vw), 3px) min(calc(12 / var(--vw-min) * 100vw), 12px) rgba(255, 255, 255, 0.55),
			0 min(calc(1 / var(--vw-min) * 100vw), 1px) min(calc(4 / var(--vw-min) * 100vw), 4px) rgba(255, 255, 255, 0.9),
			0 min(calc(3 / var(--vw-min) * 100vw), 3px) min(calc(12 / var(--vw-min) * 100vw), 12px) rgba(255, 255, 255, 0.55);
	}
}


.characterImage{
	width: min(calc(240 / var(--vw-min) * 100vw), calc(240px * var(--max-percent)));
	flex-shrink: 0;
	text-align:center;
}
.characterImageIn{
	width:133.3334%;/* 320 */
}
.characterImage .characterImageIn{
	margin-left:-16.6667%;
}
.characterImage img{
	width:100%;
	max-width:100%;
}

.characterFace{
	width: min(calc(260 / var(--vw-min) * 100vw), calc(260px * var(--max-percent)));
	padding-top: min(calc(90 / var(--vw-min) * 100vw), calc(90px * var(--max-percent)));
}
.characterFace__image{
	width: 102.3077%;/* 266 */
}
.characterFace__image img{
	width: 100%;
}

@media screen and (max-width:768px){
	.characterImage{
		position: absolute;
		top: 0;
		left: 0;
		margin-top: min(calc(94 / var(--vw-min) * 100vw), 94px);
		margin-left: min(calc(4 / var(--vw-min) * 100vw), 4px);
		width: min(calc(322 / var(--vw-min) * 100vw), 322px);
	}
	.characterImageIn{
		width: 100%;
	}
	.characterImage .characterImageIn{
		margin-left: 0;
	}

	.characterFace{
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		right: 0;
		margin-right: min(calc(24 / var(--vw-min) * 100vw), 24px);
		width: min(calc(266 / var(--vw-min) * 100vw), 266px);
		height: min(calc(684 / var(--vw-min) * 100vw), 684px);
	}
	.characterFace__image{
		width: 100%;
		height: min(calc(397 / var(--vw-min) * 100vw), 397px);
	}
}



.characterMainListCont__bg{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: min(calc(560 / var(--vw-min) * 100vw), calc(560px * var(--max-percent)));
}
.characterMainListCont__bg--out{
	position: absolute;
	inset: 0;
	background-image: linear-gradient(-45deg, rgb(203,232,248) 0%, rgb(177,171,233) 100%);
	transform: rotate(4deg);
}
.characterMainListCont__bg--in{
	position: absolute;
	inset: 0;
	background-color: var(--color-white);
}
.characterMainListCont__bg--in:before{
	content: '';
	position: absolute;
	inset: 0;
	background: url(../img/character/character_bg-dots.png) repeat center top / min(calc(5 / var(--vw-min) * 100vw), 5px) min(calc(48 / var(--vw-min) * 100vw), 48px);
	opacity: 40%;
}
.characterMainListCont__bg--in_clip1{
	position: absolute;
	top: 0;
	left: 0;
	width: min(calc(39 / var(--vw-min) * 100vw), calc(39px * var(--max-percent)));
	height: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	margin-top: max(calc(-30 / var(--vw-min) * 100vw), calc(-30px * var(--max-percent)));
	margin-left: max(calc(-9 / var(--vw-min) * 100vw), calc(-9px * var(--max-percent)));
}
.characterMainListCont__bg--in_clip1:before{
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: min(calc(39 / var(--vw-min) * 100vw), 39px);
	height: min(calc(80 / var(--vw-min) * 100vw), 80px);
	background: url(../img/common/deco_clip1.svg) no-repeat center / contain;
	transform: rotate(30deg);
}
.characterMainListCont__bg--in_clip2{
	position: absolute;
	bottom: 0;
	right: 0;
	width: min(calc(84 / var(--vw-min) * 100vw), calc(84px * var(--max-percent)));
	height: min(calc(107 / var(--vw-min) * 100vw), calc(107px * var(--max-percent)));
	margin-right: max(calc(-10 / var(--vw-min) * 100vw), calc(-10px * var(--max-percent)));
	margin-bottom: max(calc(-10 / var(--vw-min) * 100vw), calc(-10px * var(--max-percent)));
}
.characterMainListCont__bg--in_clip2:before{
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: min(calc(84 / var(--vw-min) * 100vw), 84px);
	height: min(calc(107 / var(--vw-min) * 100vw), 107px);
	background: url(../img/common/deco_clip2.svg) no-repeat center / contain;
}

@media screen and (max-width:768px){
	.characterMainListCont__bg{
		height: 100%;
		opacity: 0;
		transition: opacity .3s ease;
	}
	.characterMainList.swiper-slide-active .characterMainListCont__bg{
		opacity: 1;
	}
}



/*
* characterSelect
*/
.characterSelectListsWrap{
	width:100%;
	position: relative;
	z-index:2;
	line-height:0;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	pointer-events:none;
}
.swiper-pagination-bullets.swiper-pagination-horizontal.characterSelectList,
.characterSelectLists{
	width:100%;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:min(1vw, 12px);
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.characterSelectList,
.characterSelectList{
	width:min(10.5264%, 80px);
	height:auto;
	border-radius:unset;
	background:unset;
	opacity:1;
	margin:0;
}
.characterSelectListIn{
	position:relative;
	width:100%;
	padding-top:100%;
}
.btn_characterSelect{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:85%;/* 68 */
	height:85%;
	margin:auto;
	border-radius:50%;
	background-color:#fff;
	pointer-events:auto;
	overflow:hidden;
}
.btn_characterSelect:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:var(--color-main-red);
	opacity:0;
	border-radius:50%;
	transform:scale(10%);
	transition:.4s ease;
}
.characterSelectList.swiper-pagination-bullet-active .btn_characterSelect:before{
	opacity:1;
	transform:scale(100%);
}
.btn_characterSelect img{
	position:relative;
	width:100%;
	height:100%;
}
.frame_characterSelect{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:url(../img/character/charaSelect_frame.svg) no-repeat center / contain;
}
@media (hover:hover) and (pointer:fine){
	.characterSelectList{
		pointer-events:auto;
	}
	.btn_characterSelect{
		pointer-events:none;
	}
	.characterSelectList:hover .btn_characterSelect{
		transform:rotateY(360deg);
	}
	.characterSelectList:hover .btn_characterSelect:before{
		opacity:40%;
		transform:scale(100%);
		transition:.4s;
	}

	.characterSelectList.swiper-pagination-bullet-active:hover .btn_characterSelect:before{
		opacity:100%;
		transform:scale(100%);
		transition:0s;
	}
}
.btn_characterSelect{
	transition:transform .4s ease;
}
.characterSelectList.swiper-pagination-bullet-active .btn_characterSelect{
	transform:rotateY(360deg);
}

@media screen and (max-width: 768px){
	.characterSelectListsWrap{
		margin-bottom:0;
	}
	.swiper-pagination-bullets.swiper-pagination-horizontal.characterSelectList,
	.characterSelectLists{
		/* min-height:min(27.2vw, 204px); */
		gap:var(--sp-size-12);
	}
	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.characterSelectList,
	.characterSelectList{
		width:var(--sp-size-96);	
	}
}


/*
* CharacterNextPrev
*/
.characterNextPrevWrap{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:80px;
	display:flex;
	align-items:center;
	pointer-events:none;
}
.characterPrevNext{
	margin:auto 0;
	position:absolute;
	pointer-events:auto;
	transition:transform .3s ease;
	width:5.4546%;/* 48 */
}
.characterPrevNext:before{
	content:'';
	display:block;
	width:100%;
	padding-top:206.3158%;
}
.btn_characterPrev{
	left:-2.7273%;
}
.btn_characterPrev:before{
	background:url(../img/common/arrow_prev.png) no-repeat center left / contain;
}
.btn_characterNext{
	right:-2.7273%;
}
.btn_characterNext:before{
	background:url(../img/common/arrow_next.png) no-repeat center right / contain;
}
@media (hover:hover) and (pointer:fine){
	.btn_characterPrev:hover{
		transform:translateX(-20%);
	}
	.btn_characterNext:hover{
		transform:translateX(20%);
	}
}
@media screen and (max-width: 768px){
	.characterNextPrevWrap{
		bottom:min(calc(156 / var(--min-ww) * 100vw), 156px);
	}
	.characterPrevNext{
		width:9.4802%;/* 62 */
	}
	.btn_characterPrev{
		left:-4.7401%;
	}
	.btn_characterNext{
		right:-4.7401%;
	}
}

/**
* scrAni - set
**/
#character .scContentIn{
	opacity:0;
	transform:scale(90%);
	transition:.4s ease;
}
#character.is-ani .scContentIn{
	transition-delay:1s;
	opacity:1;
	transform:scale(100%);
}
.characterDetail{
	opacity:0;
	transition:opacity .4s ease 1.4s;
}
.characterImages{
	opacity:0;
	transform:cale(0.8);
	filter:blur(8px);
	transition:opacity .4s ease 1.4s, transform .4s ease 1.4s, filter .4s ease 1.4s;
}
#character.is-ani .characterDetail{
	opacity:1;
}
#character.is-ani .characterImages{
	opacity:1;
	filter:blur(0px);
	transform:rotateY(0deg);
}
@media screen and (min-width:768px){
	.characterNama_en,
	.characterName_name,
	.characterName_cv,
	.characterDetailText{
		transform:translateX(-10%);
		opacity:0;
		transition:opacity .3s ease, transform .3s ease;
	}
	#character.is-ani .characterMainList.swiper-slide-active .characterNama_en,
	#character.is-ani .characterMainList.swiper-slide-active .characterName_name,
	#character.is-ani .characterMainList.swiper-slide-active .characterName_cv,
	#character.is-ani .characterMainList.swiper-slide-active .characterDetailText{
		opacity:1;
		transform:translateX(0%);
		transition:opacity .6s ease, transform .6s cubic-bezier(.2,.2,.2,1.2);
	}
	#character.is-ani .characterMainList.swiper-slide-active .characterNama_en{
		transition-delay:.4s;
	}
	#character.is-ani .characterMainList.swiper-slide-active .characterName_name{
		transition-delay:.475s;
	}
	#character.is-ani .characterMainList.swiper-slide-active .characterName_cv{
		transition-delay:.55s;
	}
	#character.is-ani .characterMainList.swiper-slide-active .characterDetailText{
		transition-delay:.625s;
	}
}
@media screen and (max-width: 768px){
	.characterName,
	.characterDetailText{
		transform:translateY(1.25em);
		opacity:0;
		transition:opacity .4s ease, transform .6s cubic-bezier(.2,.2,.2,1.2);
	}
	#character.is-ani .characterMainList.swiper-slide-active .characterName,
	#character.is-ani .characterMainList.swiper-slide-active .characterDetailText{
		opacity:1;
		transform:translateY(0%);
	}
	#character.is-ani .characterMainList.swiper-slide-active .characterName{
		transition-delay:.6s;
	}
	#character.is-ani .characterMainList.swiper-slide-active .characterDetailText{
		transition-delay:.6s;
	}
}




/* scrAni */
.characterMainListCont__bg{
	opacity: 0;
	transform: scale(104%);
	transition: opacity .3s ease, transform .6s cubic-bezier(.35,.15,.3,1.08);
}
.characterMainListCont__bg--in{
	transform: rotate(0deg);
	transition: transform .8s cubic-bezier(.35,.15,.3,1.08);
}
.characterMainListCont__bg--out{
	transform: rotate(0deg);
	transition: transform .4s cubic-bezier(.35,.15,.3,1.08);
}
.characterMainListCont__bg--in_clip1{
	transform: rotate(-8deg) scale(90%);
	transition: transform .6s cubic-bezier(.35,.15,.3,1.08);
}
.characterMainListCont__bg--in_clip2{
	transform: rotate(8deg) scale(110%);
	transition: transform .6s cubic-bezier(.35,.15,.3,1.08);
}

#character.is-ani .characterMainList.swiper-slide-active .characterMainListCont__bg{
	opacity: 1;
	transform: scale(100%);
	transition-delay: .45s;
}
#character.is-ani .characterMainList.swiper-slide-active .characterMainListCont__bg--in{
	transform: rotate(0deg);
	transition-delay: .8s;
}
#character.is-ani .characterMainList.swiper-slide-active .characterMainListCont__bg--out{
	transform: rotate(4deg);
	transition-delay: .8s;
}
#character.is-ani .characterMainList.swiper-slide-active .characterMainListCont__bg--in_clip1{
	transform: rotate(0deg) scale(100%);
	transition-delay: .8s;
}
#character.is-ani .characterMainList.swiper-slide-active .characterMainListCont__bg--in_clip2{
	transform: rotate(0deg) scale(100%);
	transition-delay: .8s;
}



.characterImageIn,
.characterFace__image{
	opacity: 0;
	transform: scale(0.9);
	transition: opacity .2s ease, transform .2s ease;
}
.characterImageIn img{
	transform:rotate3d(0,1,0,135deg);
	transition:transform .4s ease .5s;
}
#character.is-ani .characterMainList.swiper-slide-active .characterImageIn,
#character.is-ani .characterMainList.swiper-slide-active .characterFace__image{
	opacity:1;
	transform:scale(1);
	transition:opacity .4s ease .5s, transform .4s ease .6s;
}
#character.is-ani .characterMainList.swiper-slide-active .characterImageIn img{
	transform:rotate3d(0,1,0,0deg);
	transition-delay:.5s;
}


.characterSelectListsWrap,
.characterNextPrevWrap{
	opacity:0;
	transform:scala(80%);
	transition:opacity .4s ease, transform .4s ease;
}
#character.is-ani .characterSelectListsWrap{
	opacity:1;
	transform: scale(100%);
	transition-delay: 1s;
}
#character.is-ani .characterNextPrevWrap{
	opacity:1;
	transform: scale(100%);
	transition-delay: 1.6s;
}

/*-----------------------------------------------
 * TOP LOADING
-------------------------------------------------*/
/**
* logoArea
**/
.tlogo img{
	opacity: 0;
	transform: scale(125%) rotate(8deg);
	transform-origin: -50% 12%;
	transition: opacity .4s ease, transform .4s cubic-bezier(.49,-0.16,.53,1.18);
}
@media screen and (max-width:768px){
	.tlogo img{
		transform-origin: center;
	}
}
/* loaded */
body.--is-loaded .tlogo img{
	opacity: 1;
	transform: scale(1);
}

body.--is-loaded .tTitle__en{
	opacity:1;
	transition-delay:.4s;
}
@media screen and (max-width:768px){
	body.--is-loaded .tTitle__en{
		transition-delay:.8s;
	}
}


/**
* VisualImage
**/
.visualImage{
	transform: scale(112%);
	filter: brightness(125%) blur(4px);
	transition: transform .8s cubic-bezier(.64,.39,.46,1) .05s, filter .6s cubic-bezier(.64,.39,.46,1) .05s;
}
body.--is-loaded .visualImage{
	opacity: 1;
	filter: brightness(100%) blur(0px);
	transform: scale(100%);
}

/**
* visual other
**/
.visualFrameWrap,
.visualOnairInfoWrap,
.fvMovieWrap,
.visualtoContent{
	opacity: 0;
	transition: opacity .4s ease;
}
.visualOnairInfo__txt:before{
	animation-play-state:paused;
}
body.--is-loaded .visualFrameWrap{
	opacity: 1;
	transition-delay: .5s;
}
body.--is-loaded-fin .visualOnairInfoWrap,
body.--is-loaded-fin .fvMovieWrap,
body.--is-loaded-fin .visualtoContent{
	opacity: 1;
}
body.--is-loaded-fin .visualOnairInfo__txt:before{
	animation-play-state:running;
}


/* introduction */
@media screen and (max-width: 768px){
	#introduction .contentIn{
		margin-top:min(calc(24 / var(--vw-min) * 100vw),24px);
	}
}
.introduction__content{
	padding:min(calc(15 / var(--vw-min) * 100vw),15px) 0;
}
.introduction__catch{
	font-size:min(calc(31 / var(--vw-min) * 100vw),31px);
	line-height:1.54838;
	letter-spacing:0.025em;
	color:var(--color-main-brown);
	text-align:center;
	font-weight:700;
	text-shadow:
	0px 0px 1px #fff,
	1px 0px 1px #fff,
	2px 0px 1px #fff,
	-1px 0px 1px #fff,
	-2px 0px 1px #fff,
	0px 1px 1px #fff,
	1px 1px 1px #fff,
	2px 1px 1px #fff,
	-1px 1px 1px #fff,
	-2px 1px 1px #fff,
	0px 2px 1px #fff,
	1px 2px 1px #fff,
	2px 2px 1px #fff,
	-1px 2px 1px #fff,
	-2px 2px 1px #fff,
	0px -1px 1px #fff,
	1px -1px 1px #fff,
	2px -1px 1px #fff,
	-1px -1px 1px #fff,
	-2px -1px 1px #fff,
	0px -2px 1px #fff,
	1px -2px 1px #fff,
	2px -2px 1px #fff,
	-1px -2px 1px #fff,
	-2px -2px 1px #fff;
	padding:min(calc(45 / var(--vw-min) * 100vw),45px) 0;
}
@media screen and (max-width: 768px){
	.introduction__catch{
		font-size:min(calc(34 / var(--vw-min) * 100vw),34px);
		padding:min(calc(36 / var(--vw-min) * 100vw),36px) 0;
	}
}
.introduction__catch--red{
	color:var(--color-main-red);
}
.introduction__text{
	font-size:min(calc(19 / var(--vw-min) * 100vw),19px);
	text-align:center;
	line-height:2.47368;
	letter-spacing:0.025em;
	color:var(--color-main-brown);
	font-weight:700;
}
@media screen and (max-width: 768px){
	.introduction__text{
		font-size:min(calc(24 / var(--vw-min) * 100vw),24px);
	}
}
.introduction__catch{
	opacity:0;
	transform:scale(0.8);
	transition:all 0.6s ease;
}
.introduction__text{
	opacity:0;
	transform:scale(0.8);
	transition:all 0.6s ease;
}
#introduction.is-ani .introduction__catch{
	opacity:1;
	transform:scale(1);
	transition-delay:0.5s;
}
#introduction.is-ani .introduction__text{
	opacity:1;
	transform:scale(1);
	transition-delay:0.6s;
}
#introduction.is-ani .introduction__text + .introduction__catch{
	transition-delay:0.7s;
}