@charset "utf-8";
.tMain{
	width: 100%;
	position: relative;
	z-index: 1;
	padding-bottom: 80px;
}
@media screen and (max-width:768px){
	.tMain{
		padding-bottom: calc(96 / var(--vw-min) * 100vw);
	}
}

/*-----------------------------------------------
 * ContentBG
-------------------------------------------------*/
/**
* OPAICY 
**/
.contentBg__footprint{
	opacity: 0;
	transition: mask-size .8s linear, -webkit-mask-size .8s linear, opacity .8s ease;
}
body[data-nowsection="firstview"] .contentBg__footprint,
body[data-nowsection="character"] .contentBg__footprint,
body[data-nowsection="staffcast"] .contentBg__footprint{
	opacity: 1;
}

.contentBg__map{
	transition: opacity .8s ease;
}
body[data-nowsection="staffcast"] .contentBg__map{
	opacity: 0;
}




/*-----------------------------------------------
 * firstView
-------------------------------------------------*/
.fvContent{
	width: 100%;
	padding: 80px 0;
	position: relative;
}
.fvContentInWrap{
	width: 100%;
	position: relative;
}

@media screen and (max-width:768px){
	.fvContent{
		padding: calc(48 / var(--vw-min) * 100vw) 0;
	}
}


/**
* visualArea
**/
.fv_visualArea{
	width: 50%;
	margin: 0 auto;
	position: relative;
}
.fv_visualImage{
	width: 100.5%;/* 603 */
	margin-left: -0.25%;
	padding-top: 141.3765%;/* 852.5 */
	position: relative;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 40%));
}
.fv_visualImageLayerGroup,
.fv_visualImageLayer{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.fv_visualImageLayerGroup{
	overflow: hidden;
}
.fv_visualImage img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media screen and (max-width:768px){
	.fv_visualArea{
		width: 87.2%;/* 654 */
	}
	.fv_visualImage{
		width: 100%;
		margin-left: 0;
		padding-top: 141.2844%;
	}
}

.fv_visualSelects{
	position: absolute;
	top: -80px;
	left: max(calc(-56 / var(--vw-min) * 100vw), calc(-56px * var(--max-percent)));
	width: min(calc(56 / var(--vw-min) * 100vw), calc(56px * var(--max-percent)));
	bottom: 0;
	z-index: 2;
}
.fv_visualSelectLists{
	position: sticky;
	top: 0;
	width: 100%;
    height: min(calc(100vh + 40px), calc(100% + 40px));
	padding: 80px 14.2858% 0;/* 0 8 */
	display: flex;
	flex-direction: column;
	gap: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
}
.fv_visualSelectList{
	width: 100%;
	padding-top: 100%;
	position: relative;
}
.btn_visualSelect{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	border: unset;
	border-radius: unset;
	pointer-events: auto;
}
.btn_visualSelect--img{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.btn_visualSelect--img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.btn_visualSelect--img:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-orange);
	mix-blend-mode: multiply;
	opacity: 0%;
	transform: scale(80%);
	transition: transform .3s, opacity .3s ease;
}
.btn_visualSelect--img:after{
	content: '';
	position: absolute;
	top: 5%;
	left: 5%;
	right: 5%;
	bottom: 5%;
	border: 2px solid #FFF;
	transition: .3s ease;
}
@media screen and (hover:hover) and (pointer: fine){
	.btn_visualSelect--img:hover:before{
		opacity: 20%;
		transform: scale(100%);
	}
	.btn_visualSelect--img:hover::after{
		transform: scale(105%);
	}
}
@media screen and (max-width:768px){
	.fv_visualSelects{
		top: calc(-48 / var(--vw-min) * 100vw);
		left: calc(-24 / var(--vw-min) * 100vw);
		width: calc(72 / var(--vw-min) * 100vw);
	}
	.fv_visualSelectLists{
		padding: calc(96 / var(--vw-min) * 100vw) 0 0;
		gap: calc(16 / var(--vw-min) * 100vw);
	}
}



/**
* fvContentIn
**/
.fvContentIn{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.fvContentIn__cont{
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: min(100vh, 100%);
}

.fv_logoArea{
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 28.25%;/* 339 */
	transition: margin-top .3s ease;
}
.fv_logo{
	width: 39.2331%;/* 133 */
	height: 100%;
	max-width: calc(133px * var(--max-percent));
	margin: 0 auto;
	padding-top: min(calc(96 / var(--vw-min) * 100vw), calc(96px * var(--max-percent)));
}
.fv_logo img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top;
}


.fv_onairDateWrap{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	width: 35%;/* 420 */
	padding: 0 calc(40 / var(--vw-min) * 100vw) calc(40 / var(--vw-min) * 100vw);
}
.fv_onairDateInWrap{
	width: 100%;
	max-width: min(calc(340 / var(--vh-min) * 100vh), calc(340px * var(--max-percent)));
	height: calc(240 / var(--vh-min) * 100vh);
	position: relative;
	margin: 0 auto;
	padding-right: min(calc(80 / var(--vw-min) * 100vh), calc(80px * var(--max-percent)));
}
.fv_onairDate{
	width: 69.2308%;
	height: calc(180 / var(--vh-min) * 100vh);
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
.fv_onairDate img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: contain;
	transform: rotate(-15deg);
}



.fv_movieWrap{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 35%;/* 420 */
	padding: 0 calc(40 / var(--vw-min) * 100vw);
	padding-bottom: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}
.fv_movieInWrap{
	width: 100%;
	max-width: min(calc(340 / var(--vh-min) * 100vh), calc(340px * var(--max-percent)));
	margin: 0 auto;
	box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.4);
}
.fv_movie{
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	background-color: #fff;
}

.movieFrameWrap{
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	margin: auto;
	z-index: 2;
	pointer-events: none;
}
.movie_bFrameWrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/common/frame/frame_movie_lt.svg), url(../img/common/frame/frame_movie_rt.svg), url(../img/common/frame/frame_movie_rb.svg), url(../img/common/frame/frame_movie_lb.svg);
	background-repeat: no-repeat;
	background-position: left top, right top, right bottom, left bottom;
	background-size: 16px 16px;
}
.movie_bFrame--line{
	position: absolute;
}
.movie_bFrame--line:before,
.movie_bFrame--line:after{
	content: '';
	position: absolute;
	background-color: var(--color-brown);
}
.movie_bFrame--line.-tb{
	top: 0;
	bottom: 0;
	left: 16px;
	right: 16px;
}
.movie_bFrame--line.-tb:before{
	top: 0;
	width: 100%;
	height: 2px;
}
.movie_bFrame--line.-tb:after{
	bottom: 0;
	width: 100%;
	height: 2px;
}

.movie_bFrame--line.-lr{
	right: 0;
	left: 0;
	top: 16px;
	bottom: 16px;
}
.movie_bFrame--line.-lr:before{
	left: 0;
	width: 2px;
	height: 100%;
}
.movie_bFrame--line.-lr:after{
	right: 0;
	width: 2px;
	height: 100%;
}


.movie_lFrameWrap{
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	margin: auto;
}
.movie_lFrame--line{
	position: absolute;
}
.movie_lFrame--line:before,
.movie_lFrame--line:after{
	content: '';
	position: absolute;
	background-color: var(--color-brown);
}
.movie_lFrame--line.-t,
.movie_lFrame--line.-b{
	height: 1px;
}
.movie_lFrame--line.-t{
	top: 0;
	left: 0;
	right: 0;
}
.movie_lFrame--line.-t:before,
.movie_lFrame--line.-t:after{
	top: 0;
}

.movie_lFrame--line.-b{
	bottom: 0;
	left: 0;
	right: 0;
}
.movie_lFrame--line.-b:before,
.movie_lFrame--line.-b:after{
	bottom: 0;
}
.movie_lFrame--line.-t:before,
.movie_lFrame--line.-t:after,
.movie_lFrame--line.-b:before,
.movie_lFrame--line.-b:after{
	content: '';
	position: absolute;
	width: calc(50% - 11.5px);
	height: 100%;
}
.movie_lFrame--line.-t:before,
.movie_lFrame--line.-b:before{
	left: 0;
}
.movie_lFrame--line.-t:after,
.movie_lFrame--line.-b:after{
	right: 0;
}
.movie_lFrame--line.-lr{
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}
.movie_lFrame--line.-lr:before{
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
}
.movie_lFrame--line.-lr:after{
	right: 0;
	top: 0;
	bottom: 0;
	width: 1px;
}



.movie_tbFrame{
	position: absolute;
	top: -7px;
	bottom: -7px;
	width: 23px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.movie_tbFrame:before,
.movie_tbFrame:after{
	content: '';
	width: 100%;
	height: 13px;
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
}
.movie_tbFrame:before{
	top: 0;
	background-image: url(../img/common/frame/frame_movie_ct.svg);
	background-position: center top;
}
.movie_tbFrame:after{
	bottom: 0;
	background-image: url(../img/common/frame/frame_movie_cb.svg);
	background-position: center bottom;
}

@media screen and (max-width:768px){
	.fvContentIn{
		position: unset;
	}
	.fvContentIn__cont{
		position: unset;
		height: 100%;
	}
	.fv_logoArea{
		left: 0;
		width: calc(474 / var(--vw-min) * 100vw);
		margin-left: auto;
		margin-right: auto;
		bottom: unset;
		margin-top: calc(96 / var(--vw-min) * 100vw);
	}
	.fv_logo{
		width: 100%;
		max-width: 100%;
		height: auto;
		padding-top: unset;
	}
	.fv_logo img{
		height: auto;
	}
	.fv_onairDateWrap{
		bottom: unset;
		right: 0;
		margin-top: calc(752 / var(--vw-min) * 100vw);
		margin-left: auto;
		margin-right: auto;
		width: calc(510 / var(--vw-min) * 100vw);
		padding: 0;
	}
	.fv_onairDateInWrap{
		width: 100%;
		max-width: 100%;
		height: calc(133 / var(--vw-min) * 100vw);
		margin: 0 auto;
		padding-right: 0;
	}
	.p-fv_enTitle{
		width: calc(212 / var(--vw-min) * 100vw);
		padding-top: calc(35 / var(--vw-min) * 100vw);
	}
	.fv_onairDate{
		width: 100%;
		height: auto;
		padding-top: calc(80 / var(--vw-min) * 100vw);
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
	.fv_onairDate img{
		transform: rotate(0deg);
	}

	.fv_movieWrap{
		position: relative;
		width: 74.1334%;/* 556 */
		margin: 0 auto;
		padding: calc(48 / var(--vw-min) * 100vw) 0;
	}
	.fv_movieInWrap{
		max-width: 100%;
	}
	.movieFrameWrap{
		top: calc(8 / var(--vw-min) * 100vw);
		right: calc(8 / var(--vw-min) * 100vw);
		bottom: calc(8 / var(--vw-min) * 100vw);
		left: calc(8 / var(--vw-min) * 100vw);
	}
	.movie_bFrameWrap{
		background-size: calc(32 / var(--vw-min) * 100vw) calc(32 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-tb{
		left: calc(32 / var(--vw-min) * 100vw);
		right: calc(32 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-tb:before{
		height: calc(4 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-tb:after{
		height: calc(4 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-lr{
		top: calc(32 / var(--vw-min) * 100vw);
		bottom: calc(32 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-lr:before{
		width: calc(4 / var(--vw-min) * 100vw);
	}
	.movie_bFrame--line.-lr:after{
		width: calc(4 / var(--vw-min) * 100vw);
	}
	.movie_lFrameWrap{
		top: calc(8 / var(--vw-min) * 100vw);
		right: calc(8 / var(--vw-min) * 100vw);
		bottom: calc(8 / var(--vw-min) * 100vw);
		left: calc(8 / var(--vw-min) * 100vw);
	}
	.movie_lFrame--line.-t,
	.movie_lFrame--line.-b{
		height: calc(2 / var(--vw-min) * 100vw);
	}
	.movie_lFrame--line.-t:before,
	.movie_lFrame--line.-t:after,
	.movie_lFrame--line.-b:before,
	.movie_lFrame--line.-b:after{
		width: calc(50% - 3.0667vw);
	}
	.movie_lFrame--line.-lr:before,
	.movie_lFrame--line.-lr:after{
		width: calc(2 / var(--vw-min) * 100vw);
	}

	.movie_tbFrame{
		top: calc(-14 / var(--vw-min) * 100vw);
		bottom: calc(-14 / var(--vw-min) * 100vw);
		width: calc(46 / var(--vw-min) * 100vw);
	}
	.movie_tbFrame:before,
	.movie_tbFrame:after{
		height: calc(26 / var(--vw-min) * 100vw);
	}
}


/*
* btn_moviePlay
*/
.btn_moviePlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
}
.btn_moviePlay:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,60%);
	transition: opacity .3s ease;
}
.icon_play{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: min(calc(82 / var(--vw-min) * 100vw), calc(82px * var(--max-percent)));
	height: min(calc(82 / var(--vw-min) * 100vw), calc(82px * var(--max-percent)));
	margin: auto;
}
.icon_play:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/common/icon_movieplay-txt.svg) no-repeat center / contain;
	animation: 14s rotate linear infinite;
}
.icon_play:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: min(calc(4 / var(--vw-min) * 100vw), calc(4px * var(--max-percent)));
	width: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	height: min(calc(28 / var(--vw-min) * 100vw), calc(28px * var(--max-percent)));
	background: url(../img/common/icon_movieplay-arrow.svg) no-repeat center / contain;
	margin: auto;
	transition: transform .3s ease;
}
body.--yt-apmov-stop .icon_play:before{
	animation-play-state: paused;
}

@media screen and (hover:hover) and (pointer: fine){
	.btn_moviePlay:hover::before{
		opacity: 60%;
	}
	.btn_moviePlay:hover .icon_play:before{
		animation-play-state: paused;
	}
	.btn_moviePlay:hover .icon_play:after{
		transform: scale(80%);
	}
}

@media screen and (max-width:768px){
	.icon_play{
		width: calc(123 / var(--vw-min) * 100vw);
		height: calc(123 / var(--vw-min) * 100vw);
	}
	.icon_play:after{
		left: calc(6 / var(--vw-min) * 100vw);
		width: calc(60 / var(--vw-min) * 100vw);
		height: calc(42 / var(--vw-min) * 100vw);
	}
}


/*
* moviebg
*/
.moviebg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.moviebg__img{
	position: absolute;
	width: 100%;
	height: 100%;
}
.moviebg__img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.yt-autoplay{
	position: absolute;
	top: -50%;
	left: 0;
	width: 100%;
	height: 200%;
	/* transition: opacity .3s ease; */
	transition-delay: .3s;
}
body.--yt-apmov-stop .yt-autoplay{
	opacity: 0;
	transition-delay: 0s;
}

.fv_movieTitle{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-bottom: max(calc(-8 / var(--vw-min) * 100vw), -8px);
	height: min(calc(24 / var(--vw-min) * 100vw), 24px);
	max-height: min(calc(24 / var(--vh-min) * 100vw), 24px);
	text-align: center;
	z-index: 2;
}
.fv_movieTitle img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (max-width:768px){
	.fv_movieTitle{
		height: calc(32 / var(--vw-min) * 100vw);
		max-height: calc(32 / var(--vw-min) * 100vw);
		margin-bottom: calc(-16 / var(--vw-min) * 100vw);
	}
}



.fv_visualImageLayerGroup{
	opacity: 0;
	transition: opacity .4s ease;
}

/** LOADED **/
.fv_visualImageLayer{
	opacity: 0;
	transition: opacity .4s ease, transform .4s cubic-bezier(.54,1.82,.81,1.06), filter .6s ease;
}


/** [0] teaserVisual **/
#nowVisualImage[data-selectvisual="0"] .fv_visualImageLayerGroup[data-visual="0"]{
	opacity: 1;
}
#nowVisualImage[data-selectvisual="0"] .btn_visualSelect[data-visual="0"] .btn_visualSelect--img:before{
	opacity: 100%;
	transform: scale(100%);
}
.fv_visualImageLayer.-teaser_bg{
	opacity: 1;
	transform: translateY(0%);
}

.fv_visualImageLayer.-teaser_hajime,
.fv_visualImageLayer.-teaser_lilui,
.fv_visualImageLayer.-teaser_dragon{
	transform: translateY(2%);
	filter: blur(2px);
}



body.--is-loaded #nowVisualImage[data-selectvisual="0"] .fv_visualImageLayer.-teaser_hajime,
body.--is-loaded #nowVisualImage[data-selectvisual="0"] .fv_visualImageLayer.-teaser_lilui,
body.--is-loaded #nowVisualImage[data-selectvisual="0"] .fv_visualImageLayer.-teaser_dragon{
	opacity: 1;
	filter: blur(0px);
	transform: translateY(0%);
}
body.--is-loaded #nowVisualImage[data-selectvisual="0"] .fv_visualImageLayer.-teaser_hajime{
	transition-delay: .6s;
}
body.--is-loaded #nowVisualImage[data-selectvisual="0"] .fv_visualImageLayer.-teaser_lilui{
	transition-delay: .3s;
}
body.--is-loaded #nowVisualImage[data-selectvisual="0"] .fv_visualImageLayer.-teaser_dragon{
	transition-delay: 0s;
}


/** [1] keyVisual1 **/
@media screen and (max-width:768px){
	#nowVisualImage[data-selectvisual="1"] .fv_logoArea{
		margin-top: calc(48 / var(--vw-min) * 100vw);
	}
}
#nowVisualImage[data-selectvisual="1"] .fv_visualImageLayerGroup[data-visual="1"]{
	opacity: 1;
}
#nowVisualImage[data-selectvisual="1"] .btn_visualSelect[data-visual="1"] .btn_visualSelect--img:before{
	opacity: 100%;
	transform: scale(100%);
}
.fv_visualImageLayer.-key1_bg{
	opacity: 1;
	transform: translateY(0%);
}
.fv_visualImageLayer.-key1_chara{
	transform: scale(0.75);
}
.fv_visualImageLayer.-key1_slime{
	transform: scale(1.25);
	transition: opacity .4s ease, transform .6s cubic-bezier(.44,1.12,.83,.99);
}
body.--is-loaded #nowVisualImage[data-selectvisual="1"] .fv_visualImageLayer.-key1_chara,
body.--is-loaded #nowVisualImage[data-selectvisual="1"] .fv_visualImageLayer.-key1_slime{
	transition-delay: .4s;
	opacity: 1;
	transform: scale(100%);
}


/** [2] KeyVisual2 **/
@media screen and (max-width:768px){
	#nowVisualImage[data-selectvisual="2"] .fv_logoArea{
		margin-top: calc(48 / var(--vw-min) * 100vw);
	}
}
#nowVisualImage[data-selectvisual="2"] .fv_visualImageLayerGroup[data-visual="2"]{
	opacity: 1;
}
#nowVisualImage[data-selectvisual="2"] .btn_visualSelect[data-visual="2"] .btn_visualSelect--img:before{
	opacity: 100%;
	transform: scale(100%);
}
.fv_visualImageLayer.-key2_img{
	transform: scale(125%) translateY(0%);
	transition: opacity .4s ease, transform 1.2s ease, filter .6s ease;
}
.fv_visualImageLayer.-key2_img img{
	filter: brightness(250%) blur(4px);
	transition: filter 1.2s ease;
}
body.--is-loaded #nowVisualImage[data-selectvisual="2"] .fv_visualImageLayer.-key2_img{
	transition-delay: .4s;
	opacity: 1;
	transform: scale(100%);
}
body.--is-loaded #nowVisualImage[data-selectvisual="2"] .fv_visualImageLayer.-key2_img img{
	transition-delay: .5s;
	filter: brightness(100%) blur(0px);
}



/** onairInfo **/
.fv_onairDate{
	opacity: 0;
	transform: scale(25%);
	transition: opacity .4s ease, transform .4s cubic-bezier(.54,1.82,.81,1.06);
}
body.--is-loaded .fv_onairDate{
	opacity: 1;
	transform: scale(100%);
	transition-delay: .4s;
}

/*-----------------------------------------------
 * tBanner
-------------------------------------------------*/
.tBannerArea{
	width: 100%;
	/* height: 208px; */
	position: relative;
	/* background: url(../img/top/bannerArea_bg.png) repeat center / 1160px 208px; */
	/* padding: 44px 0; */
}
.tBannerArea__sideWrap{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
}
.tBannerArea__side{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* @media screen and (max-width:768px){
	.tBannerArea{
		height: calc(218 / var(--vw-min) * 100vw);
		padding: calc(52 / var(--vw-min) * 100vw) 0;
	}
} */


/**
* side &  head
**/
.tBannerArea__side.-lr:before,
.tBannerArea__side.-lr:after{
	content: '';
	position: absolute;
	width: 20px;
	top: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-size: 100%;
}
.tBannerArea__side.-lr:before{
	left: 0;
	background-image: url(../img/top/bannerArea_bg-l.png);
	background-position: left center;
}
.tBannerArea__side.-lr:after{
	right: 0;
	background-image: url(../img/top/bannerArea_bg-r.png);
	background-position: right center;
}


.tBannerArea__side.-tb:before,
.tBannerArea__side.-tb:after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 20px;
	background-repeat: repeat;
	background-position: center;
	background-size: contain;
}
.tBannerArea__side.-tb:before{
	top: 0;
	background-image: url(../img/top/bannerArea_bg-t.png);
}
.tBannerArea__side.-tb:after{
	bottom: 0;
	background-image: url(../img/top/bannerArea_bg-b.png);
}

.tBannerArea__decoHead{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 114px;
	height: 36px;
	margin: -18px auto 0;
	background: url(../img/top/bannerArea_head.png) no-repeat center / contain;
	z-index: 2;
}

@media screen and (max-width:768px){
	.tBannerArea__side.-lr:before,
	.tBannerArea__side.-lr:after{
		content: unset;
	}
	.tBannerArea__side.-tb:before,
	.tBannerArea__side.-tb:after{
		height: calc(20 / var(--vw-min) * 100vw);
	}

	.tBannerArea__decoHead{
		width: calc(114 / var(--vw-min) * 100vw);
		height: calc(36 / var(--vw-min) * 100vw);
		margin-top: calc(-18 / var(--vw-min) * 100vw);
	}
}



/**
* bannerList
**/
.tBannerList{
	width: 320px;
	margin: 0 1.6667%;/* 0 20 */
}
.tBanner__link{
	display: block;
	width: 100%;
	text-decoration: none;
	position: relative;
}
.tBanner__link img{
	width: 100%;
}

@media screen and (max-width:768px){
	.tBannerList{
		width: calc(303 / var(--vw-min) * 100vw);
		margin: 0 calc(24 / var(--vw-min) * 100vw);
	}
}
@media screen and (hover:hover) and (pointer: fine){
	.tBanner__link img{
		transition: .3s ease;
	}
	.tBanner__link:hover img{
		filter: brightness(110%);
		transform: scale(102.5%);
	}
}


/**
* pagination
**/
.tBannerPaginationsWrap{
	width: 100%;
	padding-top: 40px;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
}
.tBannerPaginations,
.tBannerPaginations.swiper-pagination-bullets.swiper-pagination-horizontal,
.storyPaginations,
.storyPaginations.swiper-pagination-bullets.swiper-pagination-horizontal{
	position: absolute;
	top: 0;
	bottom: 0;
	height: 8px;
	display: flex;
	justify-content: center;
	margin: auto;
}

.tBannerPagination,
.tBannerPaginations.swiper-pagination-horizontal.swiper-pagination-bullets .tBannerPagination.swiper-pagination-bullet,
.storyPagination,
.storyPaginations.swiper-pagination-horizontal.swiper-pagination-bullets .storyPagination.swiper-pagination-bullet{
	display: block;
	cursor: pointer;
	pointer-events: auto;
	width: 8px;
	height: 8px;
	margin: 0 8px;
	background-color: rgba(255,255,255,40%);
	border-radius: 50%;
	opacity: 1;
	transition: .3s ease;
}
.tBannerPaginations.swiper-pagination-horizontal.swiper-pagination-bullets .tBannerPagination.swiper-pagination-bullet-active{
	background-color: #ebc200;
}

@media screen and (max-width:768px){
	.tBannerPaginationsWrap{
		padding-top: calc(52 / var(--vw-min) * 100vw);
	}
	.tBannerPaginations,
	.tBannerPaginations.swiper-pagination-bullets.swiper-pagination-horizontal,
	.storyPaginations,
	.storyPaginations.swiper-pagination-bullets.swiper-pagination-horizontal{
		height: calc(16 / var(--vw-min) * 100vw);
	}

	.tBannerPagination,
	.tBannerPaginations.swiper-pagination-horizontal.swiper-pagination-bullets .tBannerPagination.swiper-pagination-bullet,
	.storyPagination,
	.storyPaginations.swiper-pagination-horizontal.swiper-pagination-bullets .storyPagination.swiper-pagination-bullet{
		width: calc(16 / var(--vw-min) * 100vw);
		height: calc(16 / var(--vw-min) * 100vw);
		margin: 0 calc(16 / var(--vw-min) * 100vw);
	}
}




/*-----------------------------------------------
 * NEWS
-------------------------------------------------*/
#news{
	padding-top: 160px;
	min-height: calc(160px + min(28vw, 336px));
	z-index: 2;
	overflow: hidden;
}
#news .cont_h2{
	position: absolute;
	top: 0;
	margin-top: 160px;
	z-index: 1;
	color: #FFF;
}
#news .cont_h2Txt--txt{
	padding-left: min(calc(120 / var(--vw-min) * 100vw), calc(120px * var(--max-percent)));
}
#news .cont_h2Txt--txt:before{
	background: linear-gradient(180deg, #FFF 0%, #FFF 20%, transparent 20%, transparent 60%, #FFF 60%, #FFF 100%);
}

#news .contentIn{
	width: 100%;
	max-width: 100%;
	display: flex;
	position: relative;
	z-index: 1;
}


@media screen and (max-width:768px){
	#news{
		padding-top: calc(96 / var(--vw-min) * 100vw);
	}
	#news .cont_h2{
		position: relative;
		margin-top: 0;
	}
	#news .cont_h2Txt--txt{
		padding-left: 0;
	}
	#news .contentIn{
		padding-top: calc(48 / var(--vw-min) * 100vw);
		flex-direction: column;
	}
}


/**
* newsAreaContent
**/
.newsAreaContent{
	width: 70%;/* 840 */
	max-width: calc(clamp(840px, 70vw, 1344px) + (100vw - clamp(1200px, 100vw, 1920px) - (100vw - clamp(1200px, 100vw, 1920px)) / 2));
	position: relative;
	padding-right: calc(100vw - clamp(1200px, 100vw, 1920px) - (100vw - clamp(1200px, 100vw, 1920px)) / 2);
	background: #FFF url(../img/common/textur_wh.jpg) repeat center;
	margin-left: auto;
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
}
.newsAreaContentIn{
	position: relative;
	width: 100%;
	min-height: calc(min(calc(278 / var(--vw-min) * 100vw), 278px) + min(calc(160 / var(--vw-min) * 100vw), calc(160px * var(--max-percent))));
	padding: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	overflow: hidden;
}
.newsAreaContentIn:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: min(calc(680 / var(--vw-min) * 100vw), calc(680px * var(--max-percent)));
	height: min(calc(602 / var(--vw-min) * 100vw), calc(602px * var(--max-percent)));
	margin: auto;
	background: url(../img/common/textur_paper.png) no-repeat center / contain;
	mix-blend-mode: multiply;
}
.newsLists{
	width: 100%;
	position: relative;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.newsList{
	width: 100%;
	display: flex;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.newsList__link{
	width: 100%;
	display: flex;
	align-items: center;
	text-decoration: none;
	padding: min(calc(16 / var(--vw-min) * 100vw), 16px) 0;
	position: relative;
}
.newsList__time{
	min-width: min(calc(80 / var(--vw-min) * 100vw), 80px);
	padding: 0 min(calc(12 / var(--vw-min) * 100vw), 12px);
	display: inline-block;
	font-family: var(--font-en);
	line-height: 1.5625;
	letter-spacing: 0.025em;
	color: var(--color-orange);
	text-align: center;
}
.newsList__title{
	line-height: 2;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
.newsList__link:after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: min(calc(40 / var(--vw-min) * 100vw), 40px);
	height: min(calc(9 / var(--vw-min) * 100vw), 9px);
	-webkit-mask: url(../img/common/arrow_r.png) no-repeat right bottom / contain;
	mask: url(../img/common/arrow_r.png) no-repeat right bottom / contain;
	background-color: #000;
}

@media screen and (hover:hover) and (pointer: fine){
	.newsList__title > span{
		background-repeat: no-repeat;
		background-image: linear-gradient(rgba(235, 100, 0, 30%), rgba(235, 100, 0, 30%));
		background-position: right bottom;
		background-size: 0% 40%;
		transition: background-size .4s ease;
	}
	.newsList__link:after{
		transition: background-color .4s ease .15s, transform .3s ease .15s;
	}
	
	/* hover */
	.newsList__link:hover .newsList__title > span{
		background-size: 100% 40%;
		background-position: left bottom;
	}
	.newsList__link:hover::after{
		background-color: var(--color-orange);
		transform: translateX(25%);
	}
}

@media screen and (max-width:768px){
	.newsAreaContent{
		width: 93.6%;
		max-width: 93.6%;
		margin-left: auto;
		padding-right: 0;
	}
	.newsAreaContentIn{
		width: 100%;
		min-height: unset;
		padding: calc(48 / var(--vw-min) * 100vw);
		padding-top: calc(16 / var(--vw-min) * 100vw);
	}
	.newsLists{
		border-top: unset;
	}
	.newsList{
		border-bottom-width: calc(2 / var(--vw-min) * 100vw);
	}
	.newsList__link{
		display: block;
		padding: calc(32 / var(--vw-min) * 100vw) 0;
	}
	.newsList__time{
		display: block;
		line-height: 1;
		min-width: unset;
		padding: unset;
		margin-bottom: calc(8 / var(--vw-min) * 100vw);
		text-align: left;
	}
	.newsList__time > span.sp{
		display: inline-block;
	}
	.newsList__link:after{
		width: calc(80 / var(--vw-min) * 100vw);
		height: calc(16 / var(--vw-min) * 100vw);
	}
}


/**
* newsFootContent
**/
.newsFootContent{
	order: -1;
	width: 30%;/* 360 */
	max-width: calc(clamp(360px, 30vw, 576px) + (100vw - clamp(1200px, 100vw, 1920px) - (100vw - clamp(1200px, 100vw, 1920px)) / 2));
	position: relative;
	padding-left: calc(100vw - clamp(1200px, 100vw, 1920px) - (100vw - clamp(1200px, 100vw, 1920px)) / 2);
}
.newsFootContentIn{
	width: 100%;
	padding-top: min(calc(120 / var(--vw-min) * 100vw), 120px);
	padding-left: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	position: relative;
}
.newsFootLinkLists{
	width: 100%;
}
.newsFootLinkList:not(:last-child){
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.newsFootLink{
	min-width: calc(min(calc(160 / var(--vw-min) * 100vw), 160px) + min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent))));
}

@media screen and (max-width:768px){
	.newsFootContent{
		position: relative;
		order: unset;
		width: 100%;
		max-width: 100%;
		padding-left: 0;
	}
	.newsFootContentIn{
		padding-top: calc(48 / var(--vw-min) * 100vw);
		padding-left: unset;
	}
	.newsFootLinkList{
		text-align: center;
	}
	.newsFootLinkList:not(:last-child){
		margin-bottom: calc(48 / var(--vw-min) * 100vw);
	}
	.newsFootLink{
		min-width: calc(360 / var(--vw-min) * 100vw);
	}
}


#news .bg_red{
	bottom: unset;
	height: calc(160px + min(28vw, 336px));
}
@media screen and (max-width:768px){
	#news .bg_red{
		bottom: calc(432 / var(--vw-min) * 100vw);
		height: unset;
	}
}


/** SCROLL ANIMATION **/
.newsAreaContent{
	transform: translateX(100%);
	transition: transform .8s ease;
}
.is-ani .newsAreaContent{
	transform: translateX(0%);
}

.newsLists,
.newsList,
.newsFootLinkList{
	opacity: 0;
	transform: translateY(12.5%);
	transition: opacity .3s ease, transform .5s ease;
}
.is-ani .newsLists,
.is-ani .newsList,
.is-ani .newsFootLinkList{
	opacity: 1;
	transform: translateY(0%);
}
.is-ani .newsLists,
.is-ani .newsList:nth-of-type(1),
.is-ani .newsFootLinkList:nth-of-type(1){
	transition-delay: .4s;
}
.is-ani .newsList:nth-of-type(2),
.is-ani .newsFootLinkList:nth-of-type(2){
	transition-delay: .5s;
}
.is-ani .newsList:nth-of-type(3),
.is-ani .newsFootLinkList:nth-of-type(3){
	transition-delay: .6s;
}




/*-----------------------------------------------
 * INTRODUCTION
-------------------------------------------------*/
#introduction{
	padding-top: 160px;
	padding-bottom: 160px;
	overflow: hidden;
}
#introduction .contentIn{
	width: 100%;
	max-width: calc(1200px * var(--max-percent));
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
#introduction .contentIn__cont{
	width: 100%;
	padding: 0 13.3334%;/* 160 */
	position: relative;
	display: flex;
}
.introduction__catch{
	order: 2;
	width: min(calc(186 / var(--vw-min) * 100vw), 186px);
	margin-left: auto;
	margin-top: max(calc(-48 / var(--vw-min) * 100vw), -48px);
	margin-right: max(calc(-64 / var(--vw-min) * 100vw), -64px);
}
.introduction__catch img{
	width: 100%;
}

.introductionText{
	width: 81.8182%;/* 720 */
	padding-top: min(calc(60 / var(--vw-min) * 100vw), 60px);
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	line-height: 3;
	text-shadow: 0px 0px 16px rgba(255, 255, 255, 1), 0px 0px 12px rgba(255, 255, 255, 1), 0px 0px 12px rgba(255, 255, 255, 1), 0px 0px 8px rgba(255, 255, 255, 1), 0px 0px 8px rgba(255, 255, 255, 1), 0px 0px 8px rgba(255, 255, 255, 1), 0px 0px 4px rgba(255, 255, 255, 1), 0px 0px 4px rgba(255, 255, 255, 1), 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 2px rgba(255, 255, 255, 1);
	letter-spacing: 0.025em;
}




.contentBG__img1{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding-top: 60%;
	background: url(../img/top/introduction_bg.png) no-repeat center top / 100%;
	mix-blend-mode: color-burn;
	opacity: 0;
	transition: opacity .6s ease;
}
@supports (background-image: url(../img/top/introduction_bg.webp)){
	.contentBG__img1{
		background-image:url(../img/top/introduction_bg.webp);
	}
}
body[data-nowsection="introduction"] .contentBG__img1{
	opacity: 1;
}
body[data-nowsection="introduction"] .contentBg__map{
	opacity: 0;
}



.intro_BGWrap{
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
.intro_BG--footprint{
	position: absolute;
	width: 1197px;
	height: 659px;
	bottom: 48px;
	right: min(calc(518 / var(--vw-min) * 100vw), 518px);
	mask: url(../img/top/foot_intro.svg) no-repeat center bottom / contain;
	-webkit-mask: url(../img/top/foot_intro.svg) no-repeat center bottom / contain;
}
.intro_BG--maskInWrap{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/common/bg.jpg) no-repeat center / cover;
}
@supports (background-image: url(../img/common/bg.webp)){
	.intro_BG--maskInWrap{
		background-image:url(../img/common/bg.webp);
	}
}

.intro_BG--maskDeco{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: url(../img/top/introduction_bg.png) no-repeat center top / 100%; */
	mix-blend-mode: color-burn;
}
.intro_BG--maskDeco:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    mix-blend-mode: color-burn;
	background-color: #754400;
}

.intro_BG--footprint{
	position: absolute;
	width: 1197px;
	height: 659px;
	bottom: 48px;
	right: min(calc(518 / var(--vw-min) * 100vw), 518px);
	-webkit-mask: url(../img/top/foot_intro.svg) no-repeat center bottom / contain;
	mask: url(../img/top/foot_intro.svg) no-repeat center bottom / contain;
}
.intro_BG--chara{
	position: absolute;
	bottom: 48px;
	right: min(calc(285 / var(--vw-min) * 100vw), 285px);
	width: min(calc(190 / var(--vw-min) * 100vw), 190px);
	height: min(calc(320 / var(--vw-min) * 100vw), 320px);
	-webkit-mask: url(../img/common/logo_chara.svg) no-repeat center bottom / contain;
	mask: url(../img/common/logo_chara.svg) no-repeat center bottom / contain;
}

.intro_BG--chara .intro_BG--maskDeco{
	background: unset;
}

@media screen and (max-width:768px){
	#introduction{
		padding-top: calc(192 / var(--vw-min) * 100vw);
		padding-bottom: calc(248 / var(--vw-min) * 100vw);
	}
	#introduction .contentIn{
		max-width: 100%;
	}
	#introduction .contentIn__cont{
		padding: 0 3.2%;/* 0 48 */
	}
	.introduction__catch{
		width: calc(208 / var(--vw-min) * 100vw);
		margin-top: calc(48 / var(--vw-min) * 100vw);
		margin-right: 0;
	}
	.introductionText{
		width: calc(472 / var(--vw-min) * 100vw);
		padding-top: calc(64 / var(--vw-min) * 100vw);
		font-size: calc(28 / var(--vw-min) * 100vw);
		letter-spacing: 0;
		line-height: 2;
	}

	.intro_BGWrap{
		width: 100%;
	}
	.intro_BG--footprint{
		width: calc(1197 / var(--vw-min) * 100vw);
		height: calc(659 / var(--vw-min) * 100vw);
		bottom: calc(96 / var(--vw-min) * 100vw);
		right: calc(256 / var(--vw-min) * 100vw);
	}
	.intro_BG--chara{
		bottom: calc(96 / var(--vw-min) * 100vw);
		right: calc(24 / var(--vw-min) * 100vw);
	}
}


/** SCROLL ANIMATION **/
.introductionText--txt{
	opacity: 0;
	transform: translateY(25px);
	transition: transform .3s cubic-bezier(.17,.67,.45,1.03) .4s, opacity .3s ease .4s;
}
.introduction__catch{
	opacity: 0;
	transform: translateX(25px);
	transition: transform .3s cubic-bezier(.17,.67,.45,1.03) .4s, opacity .3s ease .4s;
}
.is-ani .introductionText--txt{
	opacity: 1;
	transform: translateY(0%);
}
.is-ani .introduction__catch{
	opacity: 1;
	transform: translateX(0%);
}


.intro_BG--footprint .intro_BG--maskInWrap{
	transform: translateX(-100%);
	transition: transform 6s cubic-bezier(.17,.67,.45,1.03) .4s;
}
.is-ani .intro_BG--maskInWrap{
	transform: translateX(0%);
}

.intro_BG--chara{
	transform: translateY(25%) scale(80%);
	opacity: 0;
	transition: transform .8s cubic-bezier(.17,.67,.45,1.03), opacity .4s ease;
}
.is-ani .intro_BG--chara{
	transform: translateY(0%) scale(100%);
	opacity: 1;
	transition-delay: 1.6s;
}



/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
#character{
	padding-top: 160px;
	z-index: 2;
	overflow: hidden;
}
#character .cont_h2{
	position: relative;
	z-index: 1;
	color: #FFF;
}
#character .cont_h2Txt--txt:before{
	background: linear-gradient(180deg, #FFF 0%, #FFF 20%, transparent 20%, transparent 60%, #FFF 60%, #FFF 100%);
}

#character .contentIn{
	width: 100%;
	max-width: 100%;
	position: relative;
	z-index: 1;
	padding-top: 80px;
}

.characterContent{
	width: 86.6667%;/* 1040 */
	max-width: calc(clamp(1040px, 86.6667vw, 1664px) + (100vw - clamp(1200px, 100vw, 1920px) - (100vw - clamp(1200px, 100vw, 1920px)) / 2));
	position: relative;
	margin-left: auto;
	display: flex;
}

@media screen and (max-width:768px){
	#character{
		padding-top: calc(96 / var(--vw-min) * 100vw);
	}
	#character .contentIn{
		padding-top: calc(96 / var(--vw-min) * 100vw);
	}
	.characterContent{
		width: 100%;
		max-width: 100%;
		display: block;
	}
}



/**
* characterThumbWrap
**/
.characterThumbWrap{
	width: 19.2307%;/* 200 */
}

.characterThumbLists{
	width: 50%;
	max-width: min(calc(100 / var(--vw-min) * 100vw), calc(100px * var(--max-percent)));
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	margin-top: -5%;
	gap: min(calc(4 / var(--vw-min) * 100vw), calc(4px * var(--max-percent)));
}
.characterThumbList{
	width: 100%;
	padding-top: 100%;
	position: relative;
}
.characterThumbList:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: url(../img/character/character_frame.svg) no-repeat center / contain;
}
.btn_characterThumb{
	width: 80%;
	height: 80%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #a5968c;
}
.btn_characterThumb--img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.btn_characterThumb--img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (hover:hover) and (pointer: fine){
	.btn_characterThumb:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--color-orange);
		opacity: 0;
		transform: scale(40%);
		transition: opacity .3s ease, transform .4s ease;
	}
	.btn_characterThumb:hover::before{
		opacity: 80%;
		transform: scale(100%);
	}
}

/* current */
.btn_characterThumb--img:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-orange);
	mix-blend-mode: color;
	opacity: 0;
	transition: opacity .3s ease;
}
.btn_characterThumb.--is-current .btn_characterThumb--img:after{
	opacity: 1;
}


@media screen and (max-width:768px){
	.characterThumbWrap{
		width: 100%;
		padding: 0 calc(48 / var(--vw-min) * 100vw);
		position: relative;
		z-index: 2;
	}
	.characterThumbLists{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		gap: calc(10 / var(--vw-min) * 100vw);
	}
	.characterThumbList{
		width: calc(126 / var(--vw-min) * 100vw);
		padding-top: calc(126 / var(--vw-min) * 100vw);
	}
}




/**
* characterSwiperWrap
**/
.characterSwiperWrap{
	width: 80.7693%;/* 840 */
	padding-right: calc(100vw - clamp(1200px, 100vw, 1920px) - (100vw - clamp(1200px, 100vw, 1920px)) / 2);
	background: #FFF url(../img/common/textur_wh.jpg) repeat center;
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
	margin-left: auto;
}
.characterSwiperInWrap{
	width: 100%;
	position: relative;
}

.characterSwiperInWrap__bg{
	position: absolute;
	top: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
	left: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
	right: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
	bottom: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
}

.characterSwiperListCont{
	position: relative;
	width: 100%;
	padding-bottom: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	padding-right: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	display: flex;
}

.character_mainImage{
	width: 50%;
}
.character_mainImage img{
	width: 100%;
}

.character_detailWrap{
	width: 50%;
	padding-top: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	padding-right: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}

@media screen and (max-width:768px){
	.characterSwiperWrap{
		width: 93.6%;/* 702 */
		margin-top: calc(33 / var(--vw-min) * 100vw);
		padding-right: 0;
	}
	.characterSwiperInWrap__bg{
		top: calc(12 / var(--vw-min) * 100vw);
		left: calc(12 / var(--vw-min) * 100vw);
		right: calc(12 / var(--vw-min) * 100vw);
		bottom: calc(12 / var(--vw-min) * 100vw);	
	}
	.characterSwiperListCont{
		padding-top: calc(12 / var(--vw-min) * 100vw);
		padding-bottom: calc(24 / var(--vw-min) * 100vw);
		padding-right: calc(48 / var(--vw-min) * 100vw);
		padding-left: calc(48 / var(--vw-min) * 100vw);
		flex-direction: column;
	}
	.character_mainImage{
		width: calc(600 / var(--vw-min) * 100vw);
		margin-left: auto;
	}
	.character_detailWrap{
		width: 100%;
		padding-top: 0;
		padding-right: 0;
	}
}


/**
* names
**/
.character_names{
	padding-bottom: min(calc(32 / var(--vw-min) * 100vw), calc(32px * var(--max-percent)));
}

/* catch */
.character_catch{
	color: #a5968c;
	line-height: 1.25;
	margin-bottom: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
}
.character_catch > span{
	display: inline-block;
	position: relative;
	padding: 0 min(calc(22 / var(--vw-min) * 100vw), 22px);
}
.character_catch > span:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(calc(10 / var(--vw-min) * 100vw), 10px);
	background: url(../img/common/deco_side-l.svg) no-repeat center / contain;
}
.character_catch > span:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(calc(10 / var(--vw-min) * 100vw), 10px);
	background: url(../img/common/deco_side-r.svg) no-repeat center / contain;
}


/* charaName */
.character_name{
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	line-height: 1.6667;
}

.character_cv{
	padding-top: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
}
.character_cv--cv{
	display: inline-block;
	font-family: var(--font-en);
	color: var(--color-orange);
	padding-right: min(calc(12 / var(--vw-min) * 100vw), 12px);
}


/* text */
.character_text{
	position: relative;
	line-height: 2;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 20%) 0px, rgba(0, 0, 0, 20%) 1px, transparent 1px);
    background-repeat: repeat;
    background-size: min(calc(32 / var(--vw-min) * 100vw), 32px) min(calc(32 / var(--vw-min) * 100vw), 32px);
	border-bottom: 1px solid rgba(0, 0, 0, 20%);
}

.character_faceLists{
	display: flex;
	gap: min(calc(22 / var(--vw-min) * 100vw), calc(22px * var(--max-percent)));
	margin-top: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}
.character_faceList{
	width: 28.8889%;
}
.character_faceList img{
	width: 100%;
}


.character_name-en{
	font-family: var(--font-en-hand);
	font-size: min(calc(48 / var(--vw-min) * 100vw), 48px);
	color: var(--color-brown);
	width: calc(100% + min(calc(64 / var(--vw-min) * 100vw), calc(64px * var(--max-percent))));
	margin-left: max(calc(-12 / var(--vw-min) * 100vw), calc(-12px * var(--max-percent)));
	padding-top: min(calc(24 / var(--vw-min) * 100vw), calc(24px * var(--max-percent)));
}


.chara_mark{
	width: min(calc(120 / var(--vw-min) * 100vw), 120px);
	height: min(calc(120 / var(--vw-min) * 100vw), 120px);
	position: absolute;
	top: 0;
	right: 0;
	background: url(../img/common/mark1.png) no-repeat center / contain;
	margin-top: min(calc(16 / var(--vw-min) * 100vw), calc(16px * var(--max-percent)));
	margin-right: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
}

@media screen and (max-width:768px){
	.character_names{
		padding-bottom: calc(48 / var(--vw-min) * 100vw);
	}

	/* catch */
	.character_catch{
		margin-bottom: calc(16 / var(--vw-min) * 100vw);
	}
	.character_catch > span{
		padding: 0 calc(26 / var(--vw-min) * 100vw);
	}
	.character_catch > span:before{
		width: calc(16 / var(--vw-min) * 100vw);
	}
	.character_catch > span:after{
		width: calc(16 / var(--vw-min) * 100vw);
	}
	

	/* charaName */
	.character_name{
		font-size: calc(32 / var(--vw-min) * 100vw);
		line-height: 1.5;
	}
	.character_cv{
		padding-top: calc(12 / var(--vw-min) * 100vw);
	}

	
	/* text */
	.character_text{
		background-image: linear-gradient(180deg, rgba(0, 0, 0, 20%) 0px, rgba(0, 0, 0, 20%) var(--sp-size-2), transparent var(--sp-size-2));
		background-size: calc(48 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw);
		border-bottom-width: var(--sp-size-2);
	}
	
	.character_faceLists{
		gap: calc(24 / var(--vw-min) * 100vw);
		justify-content: center;
		margin-top: calc(32 / var(--vw-min) * 100vw);
	}
	.character_faceList{
		width: calc(184 / var(--vw-min) * 100vw);
	}

	.character_name-en{
		font-size: calc(72 / var(--vw-min) * 100vw);
		margin-top: calc(32 / var(--vw-min) * 100vw);
	}
	.chara_mark{
		width: calc(184 / var(--vw-min) * 100vw);
		height: calc(184 / var(--vw-min) * 100vw);
		margin-top: calc(28 / var(--vw-min) * 100vw);
		margin-right: calc(30 / var(--vw-min) * 100vw);
	}
}



/** SCROLL ANIMATION **/
.characterSwiperWrap{
	transform: translateX(100%);
	transition: transform .8s ease;
}
.is-ani .characterSwiperWrap{
	transform: translateX(0%);
}

.character_mainImage,
.character_catch,
.character_name,
.character_cv,
.character_text,
.character_name-en{
	opacity: 0;
	transform: translateY(25px);
	transition: transform .3s cubic-bezier(.17,.67,.45,1.03) .4s, opacity .3s ease .4s;
}
.is-ani .swiper-slide-active .character_mainImage,
.is-ani .swiper-slide-active .character_catch,
.is-ani .swiper-slide-active .character_name,
.is-ani .swiper-slide-active .character_cv,
.is-ani .swiper-slide-active .character_text,
.is-ani .swiper-slide-active .character_name-en{
	opacity: 1;
	transform: translateY(0px);
}


.character_faceList{
	opacity: 0;
	transform: translateX(12.5%) rotate(30deg);
	transition: transform .6s cubic-bezier(.17,.67,.45,1.03) .4s, opacity .3s ease .4s;
}
.is-ani .swiper-slide-active .character_faceList{
	opacity: 1;
	transform: translateX(0%) rotate(0deg);
}
.character_faceList:nth-of-type(3){
	transition-delay: .5s, .5s;
}
.character_faceList:nth-of-type(2){
	transition-delay: .6s, .6s;
}
.character_faceList:nth-of-type(1){
	transition-delay: .7s, .7s;
}

.characterThumbList{
	transform: translateY(12.5%);
	opacity: 0;
	transition: transform .6s cubic-bezier(.17,.67,.45,1.03) .6s, opacity .3s ease .6s;
}
.is-ani .characterThumbList{
	opacity: 1;
	transform: translateY(0%);
}


/*-----------------------------------------------
 * STAFFCAST
-------------------------------------------------*/
#staffcast{
	padding-top: 80px;
	padding-bottom: 160px;
}
#staffcast .contentIn{
	width: 100%;
	max-width: calc(1200px * var(--max-percent));
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
#staffcast .contentIn__cont{
	width: 100%;
	padding: 0 6.6667%;/* 0 80 */
	position: relative;
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
}

.staffcastCont{
	width: 100%;
}

.staffcast_h3{
	mask-repeat: no-repeat;
	mask-position: left bottom;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: left bottom;
	-webkit-mask-size: contain;
	pointer-events: none;
}
.staffcast_h3--txt{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/common/bg.jpg) no-repeat center / cover;
}
.staffcast_h3--txt:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	mix-blend-mode: color-burn;
	background-color: #754400;
}

.staffcastContIn{
	padding-top: 40px;
	padding-left: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
}

.staffcastLists{
	display: flex;
	flex-wrap: wrap;
	max-width: 960px;
	margin: 0 auto;
}
.staffcastList{
	display: flex;
	width: 50%;/* 480 */
    align-items: flex-start;
}
.staffcast__dt{
	width: 47%;/* 240 */
	line-height: 1;
	padding-top: min(calc(8 / var(--vw-min) * 100vw), 8px);
	text-align: right;
	color: var(--color-orange);
}
.-com .staffcast__dt{
    padding-top: min(calc(14 / var(--vw-min) * 100vw), 14px);
}
.staffcast__dd{
	width: 53%;
	padding-left: 1em;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}
.staffcast__name{
	display: inline-block;
	line-height: 1;
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.staffcast__name small{
	font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
}
.staffcast__commentIcon{
	display: inline-block;
	line-height: 1;
	padding-left: min(calc(16 / var(--vw-min) * 100vw), 16px);
	height: min(calc(32 / var(--vw-min) * 100vw), 32px);
}
.btn_comment{
	width: min(calc(32 / var(--vw-min) * 100vw), 32px);
	padding-top: 100%;
	position: relative;
	background: url(../img/common/icon_comment.svg) no-repeat center / contain;
}
.staffcast__other{
	display: block;
	padding-top: 0.125em;
	letter-spacing: 0;
}
.staffcast__other > small{
	font-size: 75%;
}

.staffcast__song{
	display: block;
	letter-spacing: 0;
	padding-bottom: 0.4em;
	line-height: 1;
}
.staffcast__song > small{
	font-size: 75%;
}

@media screen and (max-width:768px){
	#staffcast{
		padding-top: calc(96 / var(--vw-min) * 100vw);
		padding-bottom: calc(96 / var(--vw-min) * 100vw);
	}
	#staffcast .contentIn{
		max-width: 100%;
	}
	#staffcast .contentIn__cont{
		padding: calc(96 / var(--vw-min) * 100vw) 0 0;
	}
	.staffcastContIn{
		padding: 0 calc(48 / var(--vw-min) * 100vw);
	}
	.staffcastLists{
		max-width: 100%;
		flex-direction: column;
	}
	.staffcastList{
		width: 100%;
	}
	.staffcastList:nth-child(n + 2){
		padding-top: calc(32 / var(--vw-min) * 100vw);
	}
	.staffcast__dt{
		width: 39.7554%;/* 260 */
	}
	.-com .staffcast__dt{
		padding-top: calc(24 / var(--vw-min) * 100vw);
	}
	.-s_dt_line2{
		align-items: center;
	}
	.-s_dt_line2 .staffcast__dt{
		padding-top: 0;
	}
	.staffcast__dd{
		width: calc(394 / var(--vw-min) * 100vw);
		padding-left: 1em;
	}
	.staffcast__name{
		font-size: calc(28 / var(--vw-min) * 100vw);
	}
	.staffcast__commentIcon{
		padding-left: calc(16 / var(--vw-min) * 100vw);
		height: calc(48 / var(--vw-min) * 100vw);
	}
	.staffcast__name small{
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
	.btn_comment{
		width: calc(48 / var(--vw-min) * 100vw);
	}
	.staffcast__other > small{
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}

@media screen and (hover:hover) and (pointer: fine){
	.btn_comment{
		transition: transform .3s ease, filter .3s ease;
	}
	.btn_comment:hover {
		transform: scale(105%) translateY(-12.5%);
		filter: brightness(110%);
	}
}


/**
* STAFF
**/
.staffcast_h3[data-txt="staff"]{
	width: min(calc(171 / var(--vw-min) * 100vw), 171px);
	height: min(calc(43 / var(--vw-min) * 100vw), 43px);
	-webkit-mask-image: url(../img/common/ttl_staff.svg);
	mask-image: url(../img/common/ttl_staff.svg);
}
.staffcastLists.-staff .staffcastList:nth-child(n + 3){
	padding-top: 1em;
}
.staffcastList.-ncom .staffcast__dt{
	padding-top: min(calc(14 / var(--vw-min) * 100vw), 14px);
}
.staffcastList.-ncom .staffcast__dd{
	padding-top: min(calc(12 / var(--vw-min) * 100vw), 12px);
}
@media screen and (min-width:769px){
	.staffcastList.-p_staff2 .staffcast__dd{
		display: block;
	}
}
@media screen and (max-width:768px){
	.staffcast_h3[data-txt="staff"]{
		width: calc(308 / var(--vw-min) * 100vw);
		height: calc(78 / var(--vw-min) * 100vw);
	}
	.staffcastLists.-staff .staffcastList:nth-child(n + 3){
		padding-top: calc(32 / var(--vw-min) * 100vw);
	}
	.staffcastList.-ncom .staffcast__dt{
		padding-top: calc(12 / var(--vw-min) * 100vw);
	}
	.staffcastList.-ncom .staffcast__dd{
		padding-top: unset;
	}
}


/**
* CAST
**/
#cast{
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
}
.staffcast_h3[data-txt="cast"]{
	width: min(calc(155 / var(--vw-min) * 100vw), 155px);
	height: min(calc(43 / var(--vw-min) * 100vw), 43px);
	-webkit-mask-image: url(../img/common/ttl_cast.svg);
	mask-image: url(../img/common/ttl_cast.svg);
}
.staffcastLists.-cast{
	flex-direction: column;
}
.staffcastLists.-cast .staffcastList:nth-child(n + 2){
	padding-top: min(calc(30 / var(--vw-min) * 100vw), 30px);
}
.staffcastLists.-cast .staffcastList.-com:nth-child(n + 2){
	padding-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
@media screen and (max-width:768px){
	#cast{
		padding-top: calc(72 / var(--vw-min) * 100vw);
	}
	.staffcast_h3[data-txt="cast"]{
		width: calc(280 / var(--vw-min) * 100vw);
		height: calc(78 / var(--vw-min) * 100vw);
	}
	.staffcastLists.-cast .staffcastList:nth-child(n + 2),
	.staffcastLists.-cast .staffcastList.-com:nth-child(n + 2){
		padding-top: calc(32 / var(--vw-min) * 100vw);
	}
}



/** SCROLL ANIMATION **/
.staffcast_h3{
	opacity: 0;
	transform: translateY(75%);
	transition: transform .6s ease, opacity .4s ease;
}
.staffcastCont.is-ani .staffcast_h3{
	opacity: 1;
	transform: translateY(0%);
}

.staffcast__dt,
.staffcast__dd{
	opacity: 0;
	transform: translateY(25px);
	transition: transform .6s ease .2s, opacity .4s ease .2s;
}
.staffcastCont.is-ani .staffcast__dt,
.staffcastCont.is-ani .staffcast__dd{
	opacity: 1;
	transform: translateY(0px);
}


/*-----------------------------------------------
 * COMMENT MODAL
-------------------------------------------------*/
#commentModal .oneModalIn__cont{
	width: 100%;
}
#js-commentModalCont{
	width: 100%;
	max-width: 1200px;
	padding: 0 min(6.6667%, 80px);
	margin: 0 auto;
}
.commenContIn{
	display: flex;
}


/* detail */
.commentCont__detail{
	width: 100%;
}
.commentCont_h3{
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	margin-bottom: min(calc(32 / var(--vw-min) * 100vw), 32px);
}
.commentCont_h3-job{
	color: var(--color-orange);
	padding-right: 1em;
}
.commentCont_h3-name{
	font-size: 20px;
}

.commentCont_txt{
	line-height: 2;
}



/* img */
.commentCont__image{
	order: -1;
	width: 41.5385%;
	margin-right: 4.6154%;/* 48 */
	max-width: 480px;
	flex-shrink: 0;
}
.commentCont__image.-w100{
	width: 100%;
}
.commentCont__image img{
	width: 100%;
	max-width: 100%;
}

@media screen and (max-width:768px){
	#js-commentModalCont{
		width: 100%;
		padding: 0 calc(48 / var(--vw-min) * 100vw);
	}
	.commenContIn{
		flex-direction: column;
	}
	
	.commentCont__detail{
		padding-top: calc(32 / var(--vw-min) * 100vw);
	}
	.commentCont_h3-name{
		font-size: calc(28 / var(--vw-min) * 100vw);
	}

	.commentCont__image{
		width: 79.5107%;
		margin: 0 auto;
		max-width: 100%;
	}
}


.commenContIn.-img100{
	flex-direction: column;
}
.commenContIn.-img100 .commentCont__image{
	width: 100%;
	max-width: 100%;
	order: unset;
	margin-left: unset;
	text-align: center;
}
.commenContIn.-img100 .commentCont__image img{
	width: auto;
	max-width: 100%;
}


/*-----------------------------------------------
 * TOP Loading
-------------------------------------------------*/
.tLoading{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10002;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}

.tLoading__bg{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.tLoading__bg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tLoading__bg--before{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding-top: 13.3334%;
	z-index: 2;
}
.tLoading__bg--before img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-position: top;
}

.tLoading__bg--img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.tLoading__bg--after{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding-top: 13.3334%;
}
.tLoading__bg--after img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-position: bottom;
}

.tLoading__logoWrap{
	width: 33.333400%;/* 400 */
	max-width: calc(400px * var(--max-percent));
	position: relative;
}
@media screen and (max-width:768px){
	.tLoading__logoWrap{
		width: calc(424 / var(--vw-min) * 100vw);
		max-width: unset;
	}
}
.tLoading__logo{
	width: 100%;
	position: relative;
	transform: scale(100%);
	transition: opacity .4s ease 1s, transform .4s ease 1s, filter .6s ease 1s;
}
.tLoading__logo img{
	width: 100%;
}
.tLoading__logo--img{
	opacity: 0;
	filter: blur(4px);
	transition: opacity .8s ease .4s, opacity .8s ease .4s;
}
.tLoading__logo--deco{
	position: absolute;
	width: 10%;
	height: 51.5152%;/* 68 */
	bottom: 7.5758%;/* 10 */
	right: 33.5%;/* 134 */
	right: 45%;

	transform: scale(175%);
	transform-origin: center bottom;
	transition: right .8s ease, transform .8s ease;
}
.tLoading__logo--deco_img{
	opacity: 0;
	animation: ani_loading_logo_start .4s cubic-bezier(.54,1.82,.81,1.06) forwards;
	animation-delay: 0.2s;
}

@keyframes ani_loading_logo_start {
	0%{
		opacity: 0;
		transform: scale(25%);
	}
	100%{
		opacity: 1;
		transform: scale(100%);
	}
}


.tLoading__txt{
	font-family: var(--font-en);
	line-height: 1;
	height: min(calc(12 / var(--vw-min) * 100vw), calc(12px * var(--max-percent)));
	text-align: center;
	margin-top: min(calc(12 / var(--vw-min) * 100vw), calc(12px * var(--max-percent)));
	transition: opacity .4s ease, transform .4s ease;
}
.tLoading__txt--img{
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: ani_loading_txt .4s ease-in-out infinite alternate;
	animation-delay: .2s;
}
.tLoading__txt img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
@keyframes ani_loading_txt {
	0%{opacity:0;transform: scale(90%) translateY(20%);}
	60%,100%{opacity: 80%; transform: scale(100%) translateY(0%);}
}
@media screen and (max-width:768px){
	.tLoading__txt{
		height: calc(18 / var(--vw-min) * 100vw);
		margin-top: calc(18 / var(--vw-min) * 100vw);
	}
}




body.--is-loading .tLoading__logo--img{
	opacity: 1;
	filter: blur(0px);
}
body.--is-loading .tLoading__logo--deco{
	right: 33.5%;/* 134 */
	transform: scale(100%);
}
body.--is-loading .tLoading__txt{
	opacity: 0;
	transform: translateY(25%);
}
body.--is-loading .tLoading__txt--img{
	animation-play-state: paused;
}

body.--is-loading .tLoading__logo{
	opacity: 0;
	transform: scale(60%);
	filter: blur(4px);
}