@charset "utf-8";
/*-----------------------------------------------
 * TOP: COMMON;
-------------------------------------------------*/
.content:nth-of-type(even){
	background-color: #FFF;
	color: var(--main-color);
}
.content:nth-of-type(even)::before{
	color: var(--main-color);
}
.content:nth-of-type(even) .cont_h2{
	color: var(--main-color);
}

.content:nth-of-type(odd){
	background-color: var(--main-color);
	color: #FFF;
}
.content:nth-of-type(odd)::before{
	color: #FFF;
}
.cont_h2{
	color: var(--main-color);
}
.content:nth-of-type(odd) .cont_h2{
	color: #FFF;
}

.head_movie.btn_movieWrap{
	padding-top: 0;
}

/*-----------------------------------------------
 * mainVisual
-------------------------------------------------*/
#mainvisual{
	position: relative;
	width: 100%;
	padding-top: 141.5%;
	height: 113.75vw;
	background: url(../img/top/visual2.jpg) no-repeat center top / 100%;
}
.visual_logo{
	width: 69.2%;
	padding-top: 26%;
	background: url(../img/top/mv_logo.png) no-repeat center / contain;
	position: absolute;
	top: 8%;
	left: 0;
	right: 0;
	margin: 0 auto 10.8%;
}
.visual_onairTxt{
	position: absolute;
	bottom: 0;
	right: 3%;
	left: 3%;
	margin-bottom: 4%;
	color: #FFF;
	font-size: 2.6667vw;
	line-height: 1.5;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0;
	text-shadow: 0px 0px 0.3334vw #000, 0px 0px 0.3334vw #000, 0px 0px 0.3334vw #000, 0px 0px 0.3334vw #000, 0px 0px 0.3334vw #000, 0px 0px 0.3334vw #000;
}
.visual_onairTxt small{
	font-size: 62.5%;
}
.mainVisual .shareListsWrap{
	position: absolute;
	top: 0;
	right: 4%;
	margin-top: 4%;
}
.mainVisual .shareLists__ttl{
	font-size: max(1vw ,12px);
	padding-right: max(0.5vw, 6px);
}
.mainVisual .shareLists__item{
	width: max(1.8334vw, 22px);
	height: max(1.8334vw, 22px);
	margin: 0 max(1vw, 12px);
}

@media screen and (max-width: 767px){
	.visual_logo{
		width: min(76%, 630px);
		padding-top: 27.4667%;
		margin-bottom: 11.2%;
	}
	.visual_onairTxt{
		left: 0;
		right: 0;
		margin-bottom: 3.7334%;
		font-size: var(--sp-size-30);
		text-shadow: 0px 0px var(--sp-size-4) #000, 0px 0px var(--sp-size-4) #000, 0px 0px var(--sp-size-4) #000, 0px 0px var(--sp-size-4) #000, 0px 0px var(--sp-size-4) #000, 0px 0px var(--sp-size-4) #000;
	}
	.visual_onairTxt small{
		font-size: 66.6667%;
	}
	.mainVisual .shareListsWrap{
		display: none;
	}
}

/*-----------------------------------------------
 * news
-------------------------------------------------*/
#news:before{
	content: 'News';
	z-index: 2;
}
#news .contentIn{
	width: 100%;
	margin-top: 12px;
}
.newsLists{
	width: 100%;
}
.newsList{
	width: 100%;
}
.newsList__link{
	display: block;
	text-decoration: none;
	line-height: 2;
	padding: 30px 0;
	position: relative;
	border-bottom: 1px solid var(--main-color);
}
.newsList__link:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--gradient) right center/0 100% no-repeat;
	transition: background-size .3s ease-in;
}
.newsListIn{
	width: var(--cont-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
}
.newsList__date{
	flex-shrink: 0;
	padding-right: 4.762%;
	color: var(--main-color);
	transition: .3s ease;
}
.newsList__title{
	color: #000;
	transition: .3s ease;
}

.newsList__link:hover::before {
	background-position: left center;
	background-size: 100% 100%;
}
.newsList__link:hover .newsList__date,
.newsList__link:hover .newsList__title{
	color: #FFF;
}

.btn_news{
	width: 100%;
	position: relative;
	text-align: center;
}
.btn_news a{
	display: inline-block;
	text-decoration: none;
	font-weight: 700;
	color: #FFF;
	border: 1px solid var(--main-color);
	border-top-width: 0;
	padding: 18px 30px;
	background-color: var(--main-color);
	transition: .2s ease;
	line-height: 1;
	letter-spacing: 0;
	position: relative;
}
.btn_news a:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(#FFF, #FFF) right center/0 100% no-repeat;
	transition: background-size .2s ease-in;
}
.btn_news a:hover::before {
	background-position: left center;
	background-size: 100% 100%;
}
.btn_news a:hover{
	color: var(--main-color);
}
.btn_news a span{
	position: relative;
	z-index: 2;
}

.btn_onair{
	width: 100%;
	position: relative;
	text-align: center;
	font-size: 20px;
}
.btn_onair a{
	display: block;
	text-decoration: none;
	font-weight: 700;
	color: #FFF;
	border-top-width: 0;
	padding: 32px 30px;
	background-color: var(--main-color);
	transition: .2s ease;
	line-height: 1;
	letter-spacing: 0;
	position: relative;
}
.btn_onair a:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(#FFF, #FFF) right center/0 100% no-repeat;
	transition: background-size .2s ease-in;
}
.btn_onair a:hover::before {
	background-position: left center;
	background-size: 100% 100%;
}
.btn_onair a:hover{
	color: var(--main-color);
}
.btn_onair a span{
	position: relative;
	z-index: 2;
}

@media screen and (max-width: 767px){
	#news{
		padding-top: 5.3334%;
		padding-bottom: 4.2667%;
	}
	#news:before{
		margin-top: 5.3334%;
	}
	#news .contentIn{
		margin-top: 3.2%;
		margin-left: 0;
	}
	.newsList__link{
		padding: 2.6667% 0;
		line-height: 2;
		font-size: var(--sp-size-24);
	}
	.newsListIn{
		align-items: flex-start;
		flex-direction: column;
	}
	.newsList__date{
		padding-right: 0;
		margin-bottom: var(--sp-size-12);
	}
	.btn_news a{
		font-size: var(--sp-size-24);
		padding: var(--sp-size-26) var(--sp-size-64);
	}
	.btn_onair a{
		font-size: var(--sp-size-32);
		padding: 26px;
	}
}




/*-----------------------------------------------
 * Introduction
-------------------------------------------------*/
#introduction{
	background: url(../img/top/introduction_bg.jpg) no-repeat center top / cover;
	background-attachment: fixed;
	padding-bottom: min(5.6%, 84px);
}
#introduction:before{
	content: 'Introduction';
}
#introduction .contentIn{
	padding-top: 36px;
}
.intro_catch{
	font-size: 42px;
	font-family: var(--font-b_min);
	font-weight: 600;
	letter-spacing: 0;
}
.intro_catch small{
	font-size: 76.1905%;
}
.intro_catch rt{
	font-size: 33.3334%;
	font-family: var(--font-com);
	font-weight: 500;
}
.intro_txt{
	line-height: 2;
	margin-top: 40px;
}

@media screen and (max-width: 767px){
	#introduction{
		background-attachment: unset;
		padding-bottom: min(6.4%, 48px);
	}
	#introduction .contentIn{
		padding-top: 3.2%;
	}
	.intro_catch{
		font-size: var(--sp-size-40);
	}
	.intro_txt{
		margin-top: var(--sp-size-40);
		font-size: var(--sp-size-24);
	}
}

/*-----------------------------------------------
 * StaffCast
-------------------------------------------------*/
.staffcast_Content{
	width: 100%;
	position: relative;
}
.staffcast_Content:before{
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--font-eng);
	font-size: min(7.8334vw, 141px);
	color: var(--main-color);
	writing-mode: vertical-lr;
	letter-spacing: -0.025em;
	font-weight: 500;
	line-height: 0.825;
	pointer-events: none;
	margin-top: max(-0.5vw, -9px);
}

#staff{
	margin-bottom: 8px;
}
#staff:before{
	content: 'Staff';
}
#cast{
	padding-bottom: 32px;
}
#cast:before{
	content: 'Cast';
}


#staffcast .contentIn{
	padding-top: 24px;
}



.staffcastLists{
	display: flex;
	flex-wrap: wrap;
}
.staffcastList{
	padding-top: 24px;
	padding-right: min(5.3334vw, 64px);
	padding-bottom: 24px;
	line-height: 1;
}
.staffcastList.w100{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	padding-right: 0;
}
.staffcastList dt{
	color: var(--main-color);
	margin-bottom: 12px;
}
.staffcastList.w100 dt{
	margin-bottom: 0;
}
.staffcastList.w100 dd:nth-of-type(3){
	width: 100%;
	padding-left: 1.5em;
	line-height: 1;
	margin-bottom: 0;
}

.staffcastList dt:after{
	content: '：';
}

.staffcastList dd{
	font-size: 32px;
}
.staffcastList dd small{
	font-size: 50%;
}


/** Comment **/
.staffcastList.sc_cm{
	position: relative;
}
.staffcastList.sc_cm dd{
	display: flex;
}
.btn_comment_sc{
	position: relative;
	width: min(2.6667vw, 32px);
	margin-left: min(0.5vw, 6px);
}
.btn_comment{
	display: block;
	width: 100%;
	padding-top: 93.75%;
	background: url(../img/common/icon_comment.svg) no-repeat center / contain;
}


@media screen and (max-width: 767px){
	.staffcast_Content:before{
		font-size: var(--sp-size-96);
	}
	#staff{
		margin-bottom: var(--sp-size-12);
	}

	#cast{
		padding-bottom: 0;
	}

	#staffcast .contentIn{
		padding-top: var(--sp-size-24);
	}

	.staffcastLists{
		width: 94.4%;
		/*margin-left: max(-6.4vw, -48px);*/
		margin: 0 0 0 auto;
	}

	.staffcastList{
		padding: var(--sp-size-24) var(--sp-size-48);
	}
	.staffcastList.w100{
		padding-bottom: var(--sp-size-40);
	}
	.staffcastList dt{
		font-size: var(--sp-size-20);
		margin-bottom: var(--sp-size-12);
	}
	.staffcastList.w100 dt{
		margin-bottom: 0;
	}
	.staffcastList dd{
		font-size: var(--sp-size-40);
	}

/* Comment */
	.btn_comment_sc{
		width: var(--sp-size-32);
		margin-left: var(--sp-size-12);
		margin-bottom: var(--sp-size-12);
	}
}

/** Comment Modal **/
#modal .oneModalIn__cont{
	width: 100%;
}
.commentModal{
	width: 70%;
	max-width: 1260px;
	margin: 0 auto;
}
.commentModalIn{
	width: 100%;
	padding: 7.5% 0;
	color: #fff;
}
.commentModalIn.commentflex{
	display: flex;
	justify-content: space-between;
}
.commentflex .comment_textWrap{
	order: 2;
	width: 100%;
	padding-left: 48px;
}
.comment_name{
	font-size: 32px;
	margin-bottom: 24px;
}
.comment_text{
	font-size: 16px;
	line-height: 2;
}
.commentflex .comment_imageWrap{
	flex-shrink: 0;
	width: min(26.7858%, 300px);
}
.comment_imageWrap img{
	max-width: 100%;
}
@media screen and (max-width: 767px){
	.commentModal{
		width: 100%;
		max-width: 100%;
	}
	.commentModalIn{
		padding: 8% 6.4%;
	}
	.commentModalIn.commentflex{
		width: 100%;
		flex-direction: column;
	}
	.commentflex .comment_textWrap{
		padding-top: var(--sp-size-32);
		padding-left: 0;
	}
	.comment_name{
		font-size: var(--sp-size-32);
		margin-bottom: var(--sp-size-24);
	}
	.comment_text{
		font-size: var(--sp-size-24);
	}
	.commentflex .comment_imageWrap{
		width: 100%;
		text-align: center;
	}
}


/*-----------------------------------------------
 * Character
-------------------------------------------------*/
#character{
	height: clamp(880px, 73.3334vw, 1320px);
	padding-bottom: 0;
	background: linear-gradient(180deg, var(--main-color) 0%, var(--main-color) 50%, #c8c8c8 50%, #c8c8c8 100%);
	position: relative;
}
#character:before{
	content: 'Character';
	z-index: 2;
}
.characterContWrap{
	width: 100%;
	padding-bottom: min(3%, 45px);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
}

.characterList {
	opacity: 0!important;
	transition: .2s ease;
}
.characterList.swiper-slide-active {
	opacity: 1!important;
	transition-delay: .1s;
}

.characterListsWrap{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.charaDetail{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: var(--cont-width);
	margin: 0 auto;
	z-index: 2;
}
.charaNameWrap{
	position: absolute;
	bottom: 50%;
	margin-bottom: min(4.1667vw, 50px);
	font-weight: 700;
	line-height: 1;
	transition: opacity .3s ease-in-out, transform .3s ease-in-out;
	opacity: 0;
	transform: translateX(-20%);
	transition-delay: .2s;
	display: flex;
	flex-direction: column;
}
.characterList.swiper-slide-active .charaNameWrap{
	opacity: 1;
	transform: translateX(0%);
}
.charaName{
	font-size: 52px;
	font-size: min(4.3334vw, 52px);
	padding-top: 24px;
	margin-bottom: min(1.6667vw, 20px);
	font-weight: 700;
}
.charaName rt{
	font-size: 14px;
	margin-bottom: 10px;
	display: block;
	line-height: 1;
	transform: translateY(-10px);
}
.charaCV{
	font-size: 20px;
	font-size: min(1.6667vw, 20px)
}
.charaCatch{
	order: -1;
	font-size: 16px;
	line-height: 1.625;
	font-size: min(1.3334vw, 16px);
	margin-bottom: min(2vw, 24px);
}

.charaTxt{
	width: 38.5923%;
	font-size: 16px;
	font-weight: 500;
	font-size: min(1.3334vw, 16px);
	line-height: 2;
	letter-spacing: 0;
	position: absolute;
	top: 50%;
	margin-top: min(4.6667vw ,56px);
	color: #000;
	text-shadow: 0px 0px 4px #FFF, 0px 0px 4px #FFF, 0px 0px 4px #FFF, 0px 0px 4px #FFF, 0px 0px 4px #FFF, 0px 0px 4px #FFF;
	transition: opacity .3s ease-in-out, transform .3s ease-in-out;
	opacity: 0;
	transform: translateY(20%);
	transition-delay: .3s;
}
.characterList.swiper-slide-active .charaTxt{
	opacity: 1;
	transform: translateY(0%);
}


.charaImages{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}
.charaImages img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	-webkit-touch-callout: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-moz-touch-callout: none;
	touch-callout: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	user-drag: none;
}

.charaImage_main{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: min(100%, 1800px);
	height: 100%;
	transition: opacity .3s ease-in-out, transform .3s ease-in-out;
	opacity: 0;
	transform: translateX(10%);
	transition-delay: .25s;
}
.characterList.swiper-slide-active .charaImage_main{
	opacity: 1;
	transform: translateX(0%);
}
@media screen and (max-width: 1200px){
	.charaImage_main img{
		object-fit: cover;
	}
}

.charaImage_face{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: var(--cont-width);
	margin: 0 auto;
	transition: opacity .3s ease-in-out, transform .3s ease-in-out;
	opacity: 0;
	transform: translateY(10%);
	transition-delay: .25s;
}
.characterList.swiper-slide-active .charaImage_face{
	opacity: 1;
	transform: translateY(0%);
}
.charaImage_faceIn{
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: 4.762%;
	width: 33.3334%;
	padding-top: 36.1905%;
}
.charaImage_faceIn img{
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (max-width: 767px){
	#character{
		height: min(179.2vw, 1344px);
	}
	.characterContWrap{
		padding-bottom: 0;
	}
	.charaNameWrap{
		margin-bottom: var(--sp-size-80);
	}
	.charaName{
		font-size: var(--sp-size-64);
		margin-bottom: var(--sp-size-20);
	}
	.charaName rt{
		font-size: var(--sp-size-20);
		margin-bottom: var(--sp-size-12);
		padding-top: var(--sp-size-32);
		display: block;
		line-height: 1;
		transform: translateY(max(-1.6vw, -12px));
	}
	.charaCV{
		font-size: var(--sp-size-24);
	}
	.charaCatch{
		font-size: var(--sp-size-20);
		margin-bottom: var(--sp-size-20);
	}
	.charaTxt{
		width: min(57.14286%, 360px);
		font-size: var(--sp-size-24);
		margin-top: var(--sp-size-48);
		text-shadow: 0px 0px var(--sp-size-4) #FFF, 0px 0px var(--sp-size-4) #FFF, 0px 0px var(--sp-size-4) #FFF, 0px 0px var(--sp-size-4) #FFF, 0px 0px var(--sp-size-4) #FFF, 0px 0px var(--sp-size-4) #FFF;
	}

	.charaImage_main{
		left: unset;
		width: min(59.7334%, 448px);
		height: min(106.6667vw, 800px);
		margin-top: min(16%, 120px);
	}
	.charaImage_face{
		width: 100%;
	}
	.charaImage_faceIn{
		bottom: unset;
		top: 50%;
		margin-bottom: unset;
		margin-top: min(35.2% ,264px);
		width: min(53.3334%, 400px);
	}
}


/* Character Thumb */
.characterThumbWrap{
	position: absolute;
	top: 0;
	right: 0;
	width: min(16%, 240px);
	z-index: 3;
}
.characterThumbLists{
	display: flex;
	flex-wrap: wrap;
}
.characterThumbList{
	width: 50%;
	padding-top: 50%;
	position: relative;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.characterThumbList{
	margin: 0;
	height: auto;
	opacity: 1;
	display: block;
}
.characterThumb{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	transition: .3s ease;
	overflow: hidden;
}
.characterThumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .3s ease;
}

.characterThumb:hover img{
	transform: scale(1.0375);
}

.swiper-pagination-bullet-active.characterThumbList .characterThumb{
	background-color: #fff;
}

@media screen and (max-width: 767px){
	.characterThumbWrap{
		width: min(10.6667%, 80px);
	}
	.characterThumbList{
		width: 100%;
		padding-top: 100%;
	}
}


/*-----------------------------------------------
 * Movie
-------------------------------------------------*/
.movieContent{
	width: 100%;
	position: relative;
}
.movieLists{
	width: 100%;
	display: flex;
}
.movieList{
	width: 50%;
}
.btn_movie{
	width: 100%;
	height: auto;
	position: relative;
	padding-top: 56.25%;
}
.movieContent .btn_movie:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--gradient);
	transition: .3s ease;
	z-index: 2;
	mix-blend-mode: multiply;
	opacity: 0.4;
}
.movieContent .btn_movie:hover::after{
	opacity: 0;
}

.movBG{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	right: 0;
	pointer-events: none;
}
.movieThumb img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.movIframe{
	opacity: 0;
	transition: .3s ease;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: calc(100% + 600px);
}
.movIframe.--play{
	opacity: 1;
	transition-delay: .3s;
}
.movieContent .icon_videoPlay{
	width: min(11.2%, 168px);
	height: min(9.3334vw, 168px);
}
.movieContent .icon_videoPlay:before{
	background-image: url(../img/top/icon_videoPlay__frame_topmovie.png);
}

.movieList p{
	text-align: center;
	padding: 0 2em 1em;
}

@media screen and (max-width: 767px){
	.movieContent .icon_videoPlay{
		width: min(14.9334vw, 112px);
		height: min(14.9334vw, 112px);
	}
	.movieLists{
		flex-direction: column;
	}
	.movieList{
		width: 100%;
		position: relative;
	}
	.btn_movie{
		padding-top: 56.25%;
		position: relative;
	}
	.movieList p{
		padding-top: 0.5em;
		font-size: var(--sp-size-24);
	}
}



/*-----------------------------------------------
 * Books
-------------------------------------------------*/
#books{
	padding-bottom: min(10.4%, 156px);
}
#books:before{
	content: 'Books';
}
#books .contentIn{
	margin-top: 24px;
}
.books_catch{
	font-family: var(--font-b_min);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.5;
	text-align: center;
	color: var(--main-color-dark);
}
.books_catch small{
	font-size: 66.6667%;
}
.booksLists{
	width: 752px;
	width: 89.5239%;
	margin: 40px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: min(3.3334vw, 60px);
}
.booksList{
	width: 100%;
}
.bookList__img{
	width: 95.5358%;
	padding-top: 133.9286%;
	position: relative;
	margin-bottom: 4.4643%;
}
.bookList__img:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translate(4.6829%, 3.3334%);
	background-color: var(--main-color);
}
.bookList__img img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	transition: .3s ease;
}
.bookList__title{
	font-weight: 700;
	color: var(--main-color-dark);
	line-height: 1.5;
	margin-top: calc(20px + 4.4643%);
}
.bookList__price{
	color: var(--main-color-dark);
	line-height: 1;
	margin-top: 8px;
}
.bookList__link{
	width: 100%;
	margin-top: 24px;
}
.bookList__link a{
	width: 100%;
	text-align: center;
	display: block;
	text-decoration: none;
	position: relative;
	border: 3px solid var(--main-color);
	line-height: 1;
	color: var(--main-color-dark);
	font-weight: 900;
	background-color: #fff;
	transition: .2s ease;
	padding: 10px 20px;
}
.bookList__link a:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(var(--main-color), var(--main-color)) right center/0 100% no-repeat;
	transition: background-size .2s ease-in;
}
.bookList__link a:hover::before {
	background-position: left center;
	background-size: 100% 100%;
}
.bookList__link a:hover{
	color: #FFF;
}
.bookList__link a span{
	position: relative;
	z-index: 2;
}


@media screen and (max-width: 767px){
	#books{
		padding-top: min(2.6667%, 20px);
		padding-bottom: min(13.8667%, 104px);
	}
	#books:before{
		margin-top: min(2.6667%, 20px);
	}
	#books .contentIn{
		margin-top: min(7.4667%, 56px);
	}
	.books_catch{
		font-size: var(--sp-size-32);
		letter-spacing: 0;
	}
	.booksLists{
		width: min(83.8096%, 528px);
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-size-48);
	}
	.bookList__title{
		font-size: var(--sp-size-24);
		margin-top: calc(var(--sp-size-24) + 4.4643%);
	}
	.bookList__price{
		font-size: var(--sp-size-24);
		margin-top: var(--sp-size-20);
	}
	.bookList__link{
		width: 100%;
		margin-top: var(--sp-size-24);
	}
	.bookList__link a{
		border-width: 2px;
		padding: var(--sp-size-16);
		font-size: var(--sp-size-24);
	}
}



/*-----------------------------------------------
 * SCROLL ANIMATION
-------------------------------------------------*/
/** section:before[engTitile] **/
.content.js-scrani{
	overflow: hidden;
}
.content.js-scrani:before,
.staffcast_Content:before{
	opacity: 0;
	transform: translateX(max(-9.6667vw,-116px));
	transition: opacity .2s ease-in, transform .3s cubic-bezier(.17,.67,.55,1.12);
}
.content.js-scrani.is-ani:before,
.staffcast_Content.is-ani:before{
	opacity: 1;
	transform: translateX(0);
}

/** NEWS **/
#news .newsList,
#news .btn_news{
	opacity: 0;
	transform: translateY(50%);
	transition: .2s ease-in, transform .5s cubic-bezier(.17,.67,.55,1.12);
}
#news.is-ani .newsList,
#news.is-ani .btn_news{
	opacity: 1;
	transform: translateY(0);
}
#news .newsList:nth-of-type(1){
	transition-delay: .3s;
}
#news .newsList:nth-of-type(2){
	transition-delay: .45s
}
#news .newsList:nth-of-type(3){
	transition-delay: .6s;
}

#news .btn_news{
	transition-delay: .75s;
}


/** Introduction **/
#introduction .intro_catch,
#introduction .intro_txt{
	opacity: 0;
	filter: blur(8px);
	transition: .6s ease-in, filter 1s cubic-bezier(.59,.25,.45,.96);
}
#introduction.is-ani .intro_catch,
#introduction.is-ani .intro_txt{
	opacity: 1;
	filter: blur(0);
}
#introduction .intro_catch{
	transition-delay: .3s;
}
#introduction .intro_txt{
	transition-delay: 1s;
}


/** StaffCast **/
.staffcast_Content .staffcastList{
	opacity: 0;
	filter: blur(8px);
	transition: .6s ease-in, filter 1s cubic-bezier(.59,.25,.45,.96);
	transition-delay: .3s;
}
.staffcast_Content.is-ani .staffcastList{
	opacity: 1;
	filter: blur(0);
}


/** Character **/
#character .characterContWrap{
	opacity: 0;
	filter: blur(12px);
	transition: .6s ease-in, filter 1.2s cubic-bezier(.59,.25,.45,.96);
	transition-delay: .3s;
}
#character.is-ani .characterContWrap{
	opacity: 1;
	filter: blur(0);
}
#character .characterThumbWrap{
	opacity: 0;
	transition: .6s ease-in .9s;
}
#character.is-ani .characterThumbWrap{
	opacity: 1;
}


/** Movie **/
#movie .movIframe.--play{
	opacity: 0;
}
#movie.is-ani .movIframe.--play{
	opacity: 1;
}


/** Books **/
#books .books_catch{
	opacity: 0;
	filter: blur(8px);
	transition: .4s ease-in, filter .8s cubic-bezier(.59,.25,.45,.96);
	transition-delay: .3s;
}
#books.is-ani .books_catch{
	opacity: 1;
	filter: blur(0);
}

#books .bookList{
	opacity: 0;
	transform: translateY(10%);
	transition: opacity .4s ease-in, transform .6s cubic-bezier(.17,.67,.55,1.12);
}
#books .bookList .bookList__detail{
	filter: blur(8px);
	transition: filter .8s cubic-bezier(.59,.25,.45,.96);
}
#books.is-ani .bookList{
	opacity: 1;
	transform: translateY(0);
}
#books.is-ani .bookList .bookList__detail{
	filter: blur(0);
}
#books .bookList:nth-of-type(1),
#books .bookList:nth-of-type(1) .bookList__detail{
	transition-delay: .8s;
}
#books .bookList:nth-of-type(2),
#books .bookList:nth-of-type(2) .bookList__detail{
	transition-delay: 1s;
}
#books .bookList:nth-of-type(3),
#books .bookList:nth-of-type(3) .bookList__detail{
	transition-delay: 1.2s;
}
#books .bookList:nth-of-type(4),
#books .bookList:nth-of-type(4) .bookList__detail{
	transition-delay: 1.4s;
}

/*-----------------------------------------------
 * LOADING
-------------------------------------------------*/
/** MainVisual **/
#mainvisual .visual_logo,
#mainvisual .visual_onairTxt,
#mainvisual .shareListsWrap{
	filter: blur(12px);
	opacity: 0;
	transition: .6s ease-in, filter 1s cubic-bezier(.59,.25,.45,.96);
}
#mainvisual.is-ani .visual_logo,
#mainvisual.is-ani .visual_onairTxt,
#mainvisual.is-ani .shareListsWrap{
	filter: blur(0px);
	opacity: 1;
}