@charset "utf-8";

.top_non{
	display:block;width:0;height:0;overflow:hidden;
}
.top_header{
	display: flex;
	width: 100%;
	min-width: 1200px;
	color: #fff;
	background-color: #000;
	position: relative;
}
.top_header a{
	color: #fff;
}
.sideNavWrap .navInWrap:before{
	content: '';
	position: absolute;
	top: 0;
	left: -12.5%;
	width: 350px;
	padding-top: 88px;
	/*background: url(../img/top/graphic_top_header.png) no-repeat 0 0 / contain;*/
}
#header_contWrap{
	width: 66.667%;
	min-width: 800px;
	margin-left: auto;
}
#header_mv{
	min-width: 800px;
	width: 100%;
}
#header_mvIn{
	width: 100%;
	padding-top: 142.3488%;
	background: url(../img/top/mv.jpg) no-repeat center center / contain;
	position: relative;
}
.mvCatch{
	width: 36px;
	height: 436px;
	transform: scale(1);
	position: absolute;
	top: 0;
	margin-top: 6.6667%;
	right: 6.6667%;
	background: url(../img/top/mv_catch.svg) no-repeat 0 0 / contain;
}
#header_movie{
	width: 100%;
	position: relative;
}
.header_movieIn{
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	overflow: hidden;
}
.youtubeThumb_mov{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
}
.header_movieIn button{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.header_movieIn button:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.4);
	transition: .3s ease;
}
.header_movieIn button:after{
	content: '';
	position: absolute;
	width: 96px;
	padding-top: 96px;
	top: calc(50% - 48px);
	left: calc(50% - 48px);
	background: url(../img/common/arrow_yt.png)no-repeat center center / contain;
	transition: .3s ease;
}
.header_movieIn button:hover::before,.header_movieIn button:hover::after{
	opacity: 0;
}

#contentFullWrap{
	overflow: hidden;
}

.cont_logo{
	background: url(../img/common/logo.svg) no-repeat 0 0 / contain;
}

@media screen and (max-width: 768px){
	.top_header{
		min-width: 100%;
		display: block;
	}
	.top_header .sideNavWrap{
		display: none;
	}
	.top_header:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 61.2%;
		padding-top: 32%; 
		background: url(../img/top/graphic_top_header.png) no-repeat 0 0 / contain;
		opacity: 0.16;
	}
	.js-deviceSetting{
		width: 100%;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
	.top_header a{
		color: #000;
	}
	#header_contWrap{
		width: 100%;
		min-width: 100%;
		padding-top: 6.4%;
		padding-bottom: 12.8%;
		position: relative;
	}
	#header_mv{
		min-width: auto;
		width: 87.2%;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}
	.mvCatch{
		width: 4.893%;
		padding-top: 63.1499%;
		left: 4.893%;
		right: unset;
		margin-top: 4.893%;
	}
	.sp_header_ttlWrap{
		width: 87.2%;
		margin: -11.73334% auto 0;
		position: relative;
		z-index: 3;
	}
	.sp_header_logoCatch{
		width: 53.211%;
		padding-top: 3.6698%;
		background: url(../img/common/navCatch.svg) no-repeat center / contain;
		margin: 0 auto;
		margin-bottom: 3.9756%;
	}
	.sp_header_logo{
		width: 70.6422%;
		padding-top: 34.2508%;
		margin: 0 auto;
		background: url(../img/common/logo_wh.svg) no-repeat center / contain;
	}
	.sp_header_day{
		width: 100%;
		padding-top: 4.7401%;
		margin-top: 6.4%;
		background: url(../img/common/nav_roadshow_day.svg) no-repeat center / contain;
	}
	.sp_header_bddvd{
		width: 66.6667%;
		padding-top: 4.2814%;
		margin: 3.9756% auto 0;
		background: url(../img/common/nav_about_info_bd.svg) no-repeat center / contain;
	}
	.sp_header_nhk{
		width: 100%;
		height: min(12.8vw, 96px);
		margin-top: 6.4%;
		background: url(../img/common/nav_nhk_sp.svg) no-repeat center center / contain;
	}
	.sp_header_nf{
		margin: 0 auto;
		/*margin-top: 3.9756%;*/
		margin-top: 4.8923%;
		font-size: 3.2vw;
		text-align: center;
		font-weight: 700;
		line-height: 1;
		/*width: 64.9847%;*/
		width: 100%;
		/*padding-top: 3.5168%;*/
		padding-top: 4.7401%;
		background: url(../img/common/nav_about_nf.svg) no-repeat center center / contain;
	}
	.sp_top__bnr{
		width: 87.2%;
		margin: 6.4% auto 0;
		position: relative;	
		z-index: 3;	
	}
	.sp_top__bnr li a{
		display: block;
	}
	.sp_top__bnr li a img{
		width: 100%;
	}
	#header_movie{
		min-width: auto;
		width: 87.2%;
		margin: 6.4% auto 0;
		z-index: 2;
	}
	.header_movieIn button:after{
		width: 14.6789%;
		padding-top: 14.6789%;
		top: 50%;
		transform: translateY(-50%);
		left: 42.66055%;
	}
	#header_contWrap .nav_bg{
		z-index: 1;
	}
	#header_contWrap .nav_bg_line_l{
		left: 6.2667%;
		background-color: rgba(254,254,254,.16);
	}
	#header_contWrap .nav_bg_line_c{
		left: calc(50% - 0.5px);
		background-color: rgba(254,254,254,.16);
	}
	#header_contWrap .nav_bg_line_r{
		right: 6.2667%;
		background-color: rgba(254,254,254,.16);
	}
}


/* TOP MODAL NAV */
#js-contNavWrap{
	opacity: 0;
	transition: .3s ease;
	pointer-events: none;
}
#js-contNavWrap.is-active{
	opacity: 1;
	transition-duration: 800ms;
	pointer-events: auto;
}

@media screen and (max-width: 768px){
	#js-contNavWrap{
		display: none;
	}
}

/* update */
#update{
	padding-bottom: 156px;
}
.newsLists{
	min-width: 560px;
	width: 46.6667%;
	margin: 0 auto;
}
.newsList{
	width: 100%;
	margin-bottom: 24px;
}
.newsList:last-child{
	margin-bottom: 0;
}
.newsList_link{
	display: block;
	padding-bottom: 12px;
	text-decoration: none;
	position: relative;
}
.newsList_link:before{
	content: '';
	position: absolute;
	bottom: 4px;
	right: 0;
	left: 0;
	padding-top: 1px;
	background-color: rgba(0,0,0,.24);
}
.newsList_link:after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 40px;
	padding-top: 12px;
	background: url(../img/common/arrow_newslink.svg) no-repeat bottom left / contain;
	transition: right .3s ease;
}
.newsList_link:hover::after{
	right: -10px;
}
.newsList--date{
	color: #6dc6f2;
	line-height: 1;
	transition: background-size .3s ease, color .3s ease;
	display: inline-block;
	background: linear-gradient(#6dc6f2, #6dc6f2) right bottom / 0 100% no-repeat;
	margin-bottom: 12px;
}
.newsList_link:hover .newsList--date{
	background-position: left bottom;
	background-size: 100% 100%;
	color: #000;
}
.newsList--title{
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	font-size: 16px;
	line-height: 2;
	margin-bottom: 12px;
}
.newsList--title span{
	line-height: 1.2;
	transition: background-size .3s ease;
	background: linear-gradient(#6dc6f2, #6dc6f2) right bottom / 0 100% no-repeat;
}
.newsList_link:hover .newsList--title span{
	background-position: left bottom;
	background-size: 100% 100%;
}

@media screen and (max-width: 768px){
	#update{
		padding-bottom: 12.8%;
	}
	.newsLists{
		min-width: auto;
		width: 74.4%;
	}
	.newsList{
		margin-bottom: 2.8684%;
	}
	.newsList--date{
		font-size: 1.2rem;
		margin-bottom: 8px;
	}
	.newsList--title{
		font-size: 1.2rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: clip;
		white-space: normal;
		margin-bottom: 8px;
	}
}

.nav_movietiket{
	margin-top: 40px;
}
.link__movieticket{
	width: 240px;
	height: 64px;
	position: relative;
	background-color: red;
}
.link__movieticket:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	text-decoration: none;
	transition: background-size .3s ease, color .3s ease;
	display: inline-block;
	background: linear-gradient(#6dc6f2, #6dc6f2) right bottom / 0 100% no-repeat;
}
.link__movieticket:hover::before{
	background-position: left bottom;
	background-size: 100% 100%;
}
.link__movieticket:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/top_nav_moviticket.png) no-repeat center center / contain;
}
/*Filmarks*/
.link__filmarks{
	width: 240px;
	height: 97px;
	position: relative;
	background-color: #fff;
}
.link__filmarks:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/filmarks.jpg) no-repeat center center / contain;
}
.link__filmarks02{
	width: 240px;
	height: 97px;
	position: relative;
	background-color: #fff;
}
.link__filmarks02:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/filmarks2.jpg) no-repeat center center / contain;
}
.filmarks a:hover{
	opacity: 0.5 ;
	transition: all 0.3s ease;
}
.filmarks__sp{
	width: 350px;
	margin: 0 auto;
	padding-bottom: 20px;
}
.filmarks__sp img{
	width: 350px;
}

.sideNavWrap .navList_Twi{
	margin-top: 20px;
}
#moviticket iframe{
	width: 900px;
	height: 220px;
	overflow: hidden;
	border:0;
}

/* intro_story */
#intro_story{
	background: url(../img/top/bg_introstory.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	z-index: 2;
}
.ipadOS #intro_story{
	background-attachment: unset;
}
#intro_story .cont_title_ttl{
	background-color: #4ec8c8;
	color: #fff;
}
#intro_story .contIn{
	padding-bottom: 160px;
}
.intro_storyCont{
	width: 100%;
	position: relative;
}
.intro_story__selects{
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	bottom: unset!important;
	order: -1;
	padding: 1px 0;
	margin-bottom: 80px;
}
.intro_story__selects:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: rgba(0,0,0,.16);
}
.intro_story__selects:after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: rgba(0,0,0,.16);
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.intro_story__select{
	width: auto;
	height: auto;
	opacity: unset;
	border-radius: unset;
	background: unset;
	display: inline-block;
	position: relative;
	width: calc(100% / 3);
	padding: 14px 0;
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	color: #000;
	transition: background-size .3s ease, color .3s ease;
	background: linear-gradient(#fff, #fff) right bottom / 0 100% no-repeat;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.intro_story__select:hover{
	background-position: left bottom;
	background-size: 100% 100%;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.intro_story__select.swiper-pagination-bullet-active{
	background-color: #fff;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.intro_story__select.swiper-pagination-bullet-active:after{
	content: '';
	position: absolute;
	width: 17px;
	padding-top: 32px;
	bottom: -24px;
	left: calc(50% - 8.5px);
	background: url(../img/top/arrow_intro_story.svg) no-repeat center center / contain;
}

.intro_storySwiper{
	width: 73.3334%;
}
.intro_storySwiper-wrapper .swiper-slide{
	height: auto;
}
.intro_story_txt{
	height: 100%;
	font-size: 18px;
	line-height: 2;
	color: #fff;
}

@media screen and (max-width: 768px){
	#intro_story{
		background-attachment: unset;
	}
	#intro_story .contIn{
		padding-bottom: 12.8%;
	}
	.intro_story__selects{
		margin-bottom: 12.8%;
	}
	.intro_story__selects:before,.intro_story__selects:after{
		background-color: #fff;
	}
	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.intro_story__select{
		padding: 12px;
		font-size: 1.2rem;
		line-height: 1.4;
	}
	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.intro_story__select.swiper-pagination-bullet-active:after{
		width: 13px;
		padding-top: 24px;
		bottom: -20px;
		left: calc(50% - 6.5px);
		z-index: 2;
	}
	.intro_storySwiper{
		width: 87.2%;
	}
	.intro_story_txt{
		font-size: 1.2rem;
	}
}


.intro_story_bg{
	/*width: 1400px;*/
	/*width: 116.667%;*/
	width: 1400px;
	left: calc(50% - 700px);
	position: absolute;
	/*right: -8.3335%;
	left: -8.3335%;*/
	top: 0;
	bottom: 0;
	margin-bottom: -124px;
	margin-top: -328px;
	/*height: 328px;*/
	pointer-events: none;
}
.is_rellax{
	position: absolute;
	pointer-events: none;
}
.intro_story_bg_pop1{
	top: 0;
	left: 65px;
	width: 401px;
	padding-top: 565px;
	background: url(../img/top/popchara01.png) no-repeat center center / contain;
	transition: 0.4s ease-out;
}
.intro_story_bg_pop2{
	top: 72px;
	right: 130px;
	width: 220px;
	padding-top: 331px;
	background: url(../img/top/popchara02.png) no-repeat center center / contain;
	transition: 0.4s ease-out;
}
.intro_story_bg_pop3{
	top: 720px;
	right: 24px;
	width: 288px;
	padding-top: 277px;
	background: url(../img/top/popchara03.png) no-repeat center center / contain;
	transition: 0.4s ease-out;
}
.intro_story_bg_pop4{
	bottom: 52px;
	left: 70px;
	width: 274px;
	padding-top: 235px;
	background: url(../img/top/popchara04.png) no-repeat center center / contain;
	transition: 0.4s ease-out;
}
.intro_story_bg_pop5{
	bottom: 0px;
	left: 310px;
	width: 131px;
	padding-top: 170px;
	background: url(../img/top/popchara05.png) no-repeat center center / contain;
	transition: 0.4s ease-out;
}

@media screen and (max-width: 768px){
	.intro_story_bg{
		width: 100%;
		left: 0;
		position: absolute;
		margin-top: -22.1334%;
		margin-bottom: -23.2%;
	}
	.intro_story_bg_pop1{
		left: -9.7334%;
		width: 42.6667%;
		padding-top: 60%;
	}
	.intro_story_bg_pop2{
		width: 26.4%;
		padding-top: 39.7334%;
		right: -8.9334%;
		top: 0;
		margin-top: 6.4%;
	}
	.intro_story_bg_pop3{
		top: unset;
		bottom: 0;
		margin-bottom: 10.6667%;
		right: -13.2%;
		width: 38.4%;
		padding-top: 36.9334%;
	}
	.intro_story_bg_pop4{
		bottom: 0;
		left: -6%;
		width: 36.5334%;
		padding-top: 31.3334%;
	}
	.intro_story_bg_pop5{
		left: 27.0667%;
		bottom: 0;
		margin-bottom: 10.1334%;
		width: 17.4667%;
		padding-top: 22.6667%;
	}
}

@media screen and (min-width: 1400px){
	.intro_story_bg{
		width: 100%;
		left: 0;
	}
	.intro_story_bg_pop1{
		left: 4.64285%;
	}
	.intro_story_bg_pop2{
		right: 9.2858%;
	}
	.intro_story_bg_pop3{
		right: 1.7143%;
	}
	.intro_story_bg_pop4{
		left: 5%;
	}
	.intro_story_bg_pop5{
		left: 22.1429%;
	}
}



/* STAFFCAST */
#caststaff{
	padding-bottom: 160px;
}
#caststaffContWrap{
	width: 100%;
	padding: 0 3.3334%;
	display: flex;
	position: relative;
}
.caststaffCont{
	width: 50%;
}
.caststaff_ttl{
	position: relative;
	margin-bottom: 28px;
}
.caststaff_ttl_en{
	font-size: 52px;
	line-height: 1;
	font-weight: 700;
	display: inline-block;
}
.caststaff_ttl_ja{
	position: relative;
	display: inline-block;
	padding-left: 40px;
	padding-right: 4px;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
}
.caststaff_ttl_ja:before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 8px;
	width: 25px;
	padding-top: 25px;
	background: url(../img/common/cont_title_lineset.svg) no-repeat bottom left / contain;
}
.caststaff_ttl_ja:after{
	content: '';
	position: absolute;
	height: 1.2px;
	background-color: #000;
	bottom: 0;
	right: 0;
	left: 31.5px;
}
.caststaffLists{
	display: flex;
	flex-wrap: wrap;
}
.caststaffList{
	width: 50%;
}
.caststaffList.csl_110{
	width: 110%;
	flex-shrink: 0;
}
.caststaffList{
	margin-top: 32px;
}
.caststaffList.mt{
	margin-top: 64px;
}
.caststaff_dt{
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	margin-bottom: 8px;
	color: #6dc6f2;
}
.caststaff_dd{
	font-size: 24px;
	letter-spacing: 0;
	line-height: 1.5;
	display: inline-block;
}
.caststaff_dd.nowrap{
	white-space: nowrap;
}
.caststaff_notes{
	font-size: 14px;
	margin: 8px 0;
	line-height: 1;
	letter-spacing: 0;
}
.staffcast_com{
	position: relative;
	padding-right: 40px;
}
.caststaff_btn{
	position: absolute;
	right: 0;
	width: 24px;
	padding-top: 24px;
	top: calc(50% - 12px);
	right: 0;
	background: url(../img/common/btn_comment.svg) no-repeat center center / contain;
	transition: .25s ease;
}
.caststaff_btn:hover{
	filter: brightness(0);
}

#caststaff_cast{
	padding: 0 3.5715% 0 10.7143%;
	position: relative;
}
#caststaff_staff{
	padding: 0 10.7143% 0 3.5715%;
}

.caststaff_bg{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	pointer-events: none;
}

.caststaff_bg_pop1{
	width: 164px;
	padding-top: 100px;
	bottom: 62px;
	right: calc(3.515% + 45px);
	background: url(../img/top/popchara06.png) no-repeat center center / contain;
	transition: 0.4s ease-out;
}
.caststaff_bg_pop2{
	width: 149px;
	padding-top: 125px;
	bottom: 0;
	right: calc(3.515% + 240px);
	background: url(../img/top/popchara07.png) no-repeat center center / contain;
	transition: 0.4s ease-out;
}

@media screen and (max-width: 768px){
	#caststaff{
		padding-bottom: 12.8%;
	}
	#caststaffContWrap{
		padding: 0 6.4%;
		flex-direction: column;
	}
	.caststaffCont{
		width: 100%;
	}
	.caststaff_ttl{
		margin-bottom: 0;
	}
	.caststaff_ttl_en{
		font-size: 3.2rem;
	}
	.caststaff_ttl_ja{
		padding-left: 31px;
		padding-right: 6px;
		font-size: 1.2rem;
	}
	.caststaff_ttl_ja:before{
		left: 7px;
		width: 18px;
		padding-top: 17px;
	}
	.caststaff_ttl_ja:after{
		left: 22.5px;
	}
	.caststaffList.csl_110{
		width: 100%;
	}
	.caststaffList{
		margin-top: 24px;
	}
	.caststaffList.mt{
		margin-top: 48px;
	}
	.caststaff_dt{
		font-size: 1.2rem;
	}
	.caststaff_dd{
		font-size: 1.6rem;
	}
	.caststaff_dd.nowrap{
		white-space: normal;
	}
	.caststaff_notes{
		font-size: 1rem;
		margin-bottom: 0;
		line-height: 1.5;
		margin-top: 6px;
	}
	.staffcast_com{
		padding-right: 34px;
	}
	.caststaff_btn{
		width: 20px;
		padding-top: 18.75px;
		top: calc(50% - 9.375px);
	}

	#caststaff_cast,#caststaff_staff{
		width: 100%;
		padding: 0;
	}
	#caststaff_cast{
		padding-bottom: 11.0092%;
	}
	.caststaff_bg{
		bottom: -44.1896%;
	}
	.caststaff_bg_pop1{
		width: 25.0765%;
		padding-top: 15.2905%;
		right: 0;
		bottom: 0;
		margin-bottom: 22.0184%;
	}
	.caststaff_bg_pop2{
		width: 22.7829%;
		padding-top: 19.1132%;
		bottom: 0;
		right: 24.7706%;
	}
}


/*CASTSTAFF Modal*/
.modalBox{
	background-color: #fff;
}
.caststaffModalIn{
	display: block;
	width: 90%;
	margin: 0 auto;
}
.caststaffModalLists{
	width: 100%;
}
.caststaffModalList{
	margin-bottom: 64px;
}
.caststaffModalList:last-child{
	margin-bottom: 0;
}
.caststaffModal__ttl{
	color: #000;
	font-weight: 700;
	font-size: 24px;
	display: inline-block;
	padding-bottom: 24px;
}
.caststaffModal__ttl span{
	display: inline-block;
	line-height: 0.95;
}
.caststaffModal__nameWrap{
	font-size: 16px;
	margin-bottom: 16px;
}
.csM_job{
	font-size: 16px;
	color: #6dc6f2;
	margin-bottom: 8px;
	font-weight: 700;
}
.csM_name{
	font-size: 24px;
	line-height: 1.5;
}
.caststaffModal__txt{
	font-size: 16px;
}

@media screen and (max-width: 768px){
	.caststaffModalIn{
		width: 87.2%;
	}
	.caststaffModalList{
		margin-bottom: 7.3395%;
	}
	.caststaffModal__ttl{
		font-size: 1.8rem;
		padding-bottom: 8px;
	}
	.caststaffModal__nameWrap{
		font-size: 1.2rem;
		margin-bottom: 8px;
	}
	.csM_job{
		font-size: 1.2rem;
	}
	.csM_name{
		font-size: 1.8rem;
	}
	.caststaffModal__txt{
		font-size: 1.2rem;
	}
}

/* CHARACTER */
#character{
	/*padding-bottom: 160px;*/
	background: url(../img/top/bg_character.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
}
.ipadOS #character{
	background-attachment: unset;
}
#character .cont_title_ja{
	background-color: #fff;
}
#characterWrap{
	overflow-x: hidden;
}
.charaSwiper-thumb{
	width: 100.6667%;
}
.chara_thumbLists{
	width: 100%;
	display: flex;
}
@media screen and (min-width: 769px){
	.chara_thumbLists{
		flex-wrap: wrap;
		transform: translate3d(0px, 0px, 0px)!important;
	}
}
.chara_thumbList{
	display: block;
	width: calc(100% / 8);
	pointer-events: none;
}
.chara_thumbList button{
	width: 94.70199%;
	margin-bottom: 5.2981%;
	display: block;
	pointer-events: auto;
	overflow: hidden;
	transition: .25s ease;
}
.chara_thumbList:nth-child(n + 8) button{
	margin-bottom: 0;
}
.chara_thumbList.swiper-slide-thumb-active button{
	opacity: 0.6;
}
.chara_thumbList.swiper-slide-thumb-active button img{
	transform: scale(1.1);
}
.chara_thumbList button img{
	width: 143px;
	margin: 0 auto;
	transition: .25s ease;
}
.chara_thumbList button:hover img{
	transform: scale(1.1);
}

@media screen and (max-width: 768px){
	#character{
		padding-bottom: 12.8%;
		background-attachment: unset;
	}
	.charaSwiper-thumb{
		width: 100%;
		padding-bottom: 9.6%;
		margin-bottom: 6.4%;
	}
	.chara_thumbList{
		width: auto;
	}
	.chara_thumbList button{
		width: 100%;
		margin-bottom: 0;
	}
	.chara_thumbList button img{
		width: 100%;
	}
	.charaThumb_swiperbtnWrap{
		position: absolute;
		width: 100%;
		padding-top: 5.3334%;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.thumbSwiper_next{
		position: absolute;
		top: 0;
		bottom: 0;
		right: 6.4%;
		width: 6.4%;
		background: url(../img/top/chara_arrow.svg) no-repeat center center / contain;
	}
	.thumbSwiper_prev{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 6.4%;
		width: 6.4%;
		background: url(../img/top/chara_arrow.svg) no-repeat center center / contain;
		transform: rotate(180deg);
	}
	.swiper-scrollbar{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 61.6%;
		height: 0;
		padding-top: 0.5334%;
		border-radius: 0;
		background: rgba(0,0,0,.24);
	}
	.swiper-scrollbar-drag{
		height: 0;
		padding-top: 1.7316%;
		border-radius: 0;
		margin-top: -1.2987%;
		background: #000;
	}
}




/* CHARACTER COLOR SETTING */
:root{
	--chara01-color:#999999;
	--chara02-color:#ebb22c;
	--chara03-color:#ffffff;
	--chara04-color:#e78c96;
	--chara05-color:#a5be48;
	--chara06-color:#c9b9d6;
	--chara07-color:#535353;
	--chara08-color:#535353;
	--chara09-color:#535353;
	--chara10-color:#535353;
	--chara11-color:#535353;
	--chara12-color:#535353;
	--chara13-color:#0f5296;
	--chara14-color:#39b879;
	--chara15-color:#0f5296;
	--chara16-color:#0f5296;
}

/* CHARACTER BACKGROUND COLOR*/
.chara01 .chara_bgc,
.chara01.chara_bgc{
	background-color: var(--chara01-color);
}
.chara02 .chara_bgc,
.chara02.chara_bgc{
	background-color: var(--chara02-color);
}
.chara03 .chara_bgc,
.chara03.chara_bgc{
	background-color: var(--chara03-color);
}
.chara04 .chara_bgc,
.chara04.chara_bgc{
	background-color: var(--chara04-color);
}
.chara05 .chara_bgc,
.chara05.chara_bgc{
	background-color: var(--chara05-color);
}
.chara06 .chara_bgc,
.chara06.chara_bgc{
	background-color: var(--chara06-color);
}
.chara07 .chara_bgc,
.chara07.chara_bgc{
	background-color: var(--chara07-color);
}
.chara08 .chara_bgc,
.chara08.chara_bgc{
	background-color: var(--chara08-color);
}
.chara09 .chara_bgc,
.chara09.chara_bgc{
	background-color: var(--chara09-color);
}
.chara10 .chara_bgc,
.chara10.chara_bgc{
	background-color: var(--chara10-color);
}
.chara11 .chara_bgc,
.chara11.chara_bgc{
	background-color: var(--chara11-color);
}
.chara12 .chara_bgc,
.chara12.chara_bgc{
	background-color: var(--chara12-color);
}
.chara13 .chara_bgc,
.chara13.chara_bgc{
	background-color: var(--chara13-color);
}
.chara14 .chara_bgc,
.chara14.chara_bgc{
	background-color: var(--chara14-color);
}
.chara15 .chara_bgc,
.chara15.chara_bgc{
	background-color: var(--chara15-color);
}
.chara16 .chara_bgc,
.chara16.chara_bgc{
	background-color: var(--chara16-color);
}

/* CHARACTER TEXT COLOR */
.chara01 .chara_txtc,
.chara01.chara_txtc{
	color: var(--chara01-color);
}
.chara02 .chara_txtc,
.chara02.chara_txtc{
	color: var(--chara02-color);
}
.chara03 .chara_txtc,
.chara03.chara_txtc{
	color: var(--chara03-color);
}
.chara04 .chara_txtc,
.chara04.chara_txtc{
	color: var(--chara04-color);
}
.chara05 .chara_txtc,
.chara05.chara_txtc{
	color: var(--chara05-color);
}
.chara06 .chara_txtc,
.chara06.chara_txtc{
	color: var(--chara06-color);
}
.chara07 .chara_txtc,
.chara07.chara_txtc{
	color: var(--chara07-color);
}
.chara08 .chara_txtc,
.chara08.chara_txtc{
	color: var(--chara08-color);
}
.chara09 .chara_txtc,
.chara09.chara_txtc{
	color: var(--chara09-color);
}
.chara10 .chara_txtc,
.chara10.chara_txtc{
	color: var(--chara10-color);
}
.chara11 .chara_txtc,
.chara11.chara_txtc{
	color: var(--chara11-color);
}
.chara12 .chara_txtc,
.chara12.chara_txtc{
	color: var(--chara12-color);
}
.chara13 .chara_txtc,
.chara13.chara_txtc{
	color: var(--chara13-color);
}
.chara14 .chara_txtc,
.chara14.chara_txtc{
	color: var(--chara14-color);
}
.chara15 .chara_txtc,
.chara15.chara_txtc{
	color: var(--chara15-color);
}
.chara16 .chara_txtc,
.chara16.chara_txtc{
	color: var(--chara16-color);
}

/* CHARACTER TEXT::BEFORE COLOR */
.chara01 .chara_txtBc:before,
.chara01.chara_txtBc:before{
	color: var(--chara01-color);
}
.chara02 .chara_txtBc:before,
.chara02.chara_txtBc:before{
	color: var(--chara02-color);
}
.chara03 .chara_txtBc:before{
	color: var(--chara03-color);
}
.chara04 .chara_txtBc:before,
.chara04.chara_txtBc:before{
	color: var(--chara04-color);
}
.chara05 .chara_txtBc:before,
.chara05.chara_txtBc:before{
	color: var(--chara05-color);
}
.chara06 .chara_txtBc:before,
.chara06.chara_txtBc:before{
	color: var(--chara06-color);
}
.chara07 .chara_txtBc:before,
.chara07.chara_txtBc:before{
	color: var(--chara07-color);
}
.chara08 .chara_txtBc:before,
.chara08.chara_txtBc:before{
	color: var(--chara08-color);
}
.chara09 .chara_txtBc:before,
.chara09.chara_txtBc:before{
	color: var(--chara09-color);
}
.chara10 .chara_txtBc:before,
.chara10.chara_txtBc:before{
	color: var(--chara10-color);
}
.chara11 .chara_txtBc:before,
.chara11.chara_txtBc:before{
	color: var(--chara11-color);
}
.chara12 .chara_txtBc:before,
.chara12.chara_txtBc:before{
	color: var(--chara12-color);
}
.chara13 .chara_txtBc:before,
.chara13.chara_txtBc:before{
	color: var(--chara13-color);
}
.chara14 .chara_txtBc:before,
.chara14.chara_txtBc:before{
	color: var(--chara14-color);
}
.chara15 .chara_txtBc:before,
.chara15.chara_txtBc:before{
	color: var(--chara15-color);
}
.chara16 .chara_txtBc:before,
.chara16.chara_txtBc:before{
	color: var(--chara16-color);
}


.txtc_wh{
	color: #fff;
}

.charaList{
	padding-top: 152px;
	padding-bottom: 112px;
	position: relative;
	min-height: 680px;
}
.chara_nameWrap{
	width: 100%;
	display: block;
	padding-left: 13.3334%;
	position: relative;
}
.charaname_jaWrap{
	position: absolute;
	width: 960px;
	bottom: 24px;
	left: calc(50% - 480px);
	padding-left: 3.3334%;
}
.charaName_ja{
	font-size: 40px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0;
}
.charaName_ja rt{
	font-size: 10px;
	transform: translate(0, -6px);
}
.charaName_cv{
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	margin-top: 24px;
}
.charaName_cv:before{
	content: 'CV';
	margin-right: 8px;
}
.charaName_en{
	text-align: right;
	font-size: 108px;
	font-weight: 700;
	line-height: 72px;
	letter-spacing: 0;
}
.chara_detailWrap{
	width: 100%;
	min-height: 344px;
	display: flex;
	padding: 0 10%;
}
.chara_detailInWrap{
	width: 960px;
	margin: 0 auto;
	padding-left: 4.1667%;
	position: relative;
}

.chara_txtBtnWrap{
	min-width: 400px;
	width: 33.3334%;
	height: 100%;
	padding: 40px 0 80px;
	position: relative;
}
.chara_txt{
	font-size: 16px;
	line-height: 2;
}

.chara_btnLists{
	width: 100%;
	position: absolute;
	left: 0;
	bottom: -48px;
	display: flex;
}
.chara_btnList{
	margin-right: 24px;
}
.chara_btnList:last-child{
	margin-right: 0;
}
.btn_charaChange{
	display: block;
	width: 96px;
	padding-top: 96px;
	color: #fff;
	background-color: #000;
	border-radius: 50%;
	position: relative;
}
.btn_charaChange span{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1.4;
}
.btn_charaChange.is-active{
	color: #000;
	background-color: #fff;
}
.btn_charaChange:before{
	content: '';
	position: absolute;
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	background: url(../img/common/arrow_circle.svg) no-repeat center center / contain;
	filter: invert(1);
	transition: .15s ease;
}
.btn_charaChange:hover::before{
	transform: rotate(-90deg);
}
.btn_charaChange.is-active:before{
	filter: invert(0);
}

.chara_imgWrap{
	position: absolute;
	width: 960px;
	top: 0;
	left: calc(50% - 480px);
	margin-top: 40px;
	pointer-events: none;
}
@media screen and (min-width: 769px){
	.chara_imgWrap{
		z-index: 2;
	}
}
.chara_img{
	width: 480px;
	margin-left: auto;
}
.chara_img img{
	width: 100%;
}

@media screen and (max-width: 768px){
	.charaList{
		/*padding-top: 542px;*/
		padding-top: 72.2667%;
		min-height: 130.667vw;
		min-height: 133.3334vw;
		padding-bottom: 0;
	}
	.chara_nameWrap{
		padding-left: 0;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		padding-top: 72.2667%;
	}
	.charaname_jaWrap{
		position: absolute;
		top: 6px;
		left: 0;
		bottom: unset;
		width: 100%;
		padding-left: 6.4%;
	}
	.charaName_ja{
		font-size: 2.4rem;
	}
	.charaName_ja rt{
		font-size: 1rem;
		transform: translate(0, 0);
	}
	.charaName_cv{
		font-size: 1.6rem;
		margin-top: 12px;
	}
	.charaName_cv:before{
		font-size: 1.2rem;
	}
	.charaName_en{
		font-size: 4.8rem;
		line-height: 33px;
	}
	.chara_nameWrap .charaName_en{
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
	}
	.chara_detailWrap{
		padding: 0 18.1334%;
		min-height: 300px;
	}
	.chara_detailInWrap{
		width: 100%;
		padding-left: 0;
		z-index: 2;
	}
	.chara_txtBtnWrap{
		min-width: auto;
		width: 100%;
		padding: 8.3682% 0 16.7364%;
	}
	.chara_txt{
		font-size: 1.2rem;
		text-shadow: #fff 1px 0 8px, #fff -1px 0 8px,#fff 1px 0 4px, #fff -1px 0 4px;
	}
	.chara_txt.txtc_wh{
		text-shadow: #000 1px 0 8px, #000 -1px 0 8px,#000 1px 0 4px, #000 -1px 0 4px;
	}
	.chara_btnLists{
		bottom: 0;
		margin-bottom: -10.0419%;
		justify-content: center;
	}
	.chara_btnList{
		width: 20.0837%;
		margin: 0;
		margin: 0 5.0209%;
	}
	.btn_charaChange{
		width: 100%;
		padding-top: 100%;
	}
	.btn_charaChange span{
		font-size: 2.1334vw;
	}
	.btn_charaChange:before{
		top: 3.125%;
		left: 3.125%;
		right: 3.125%;
		bottom: 3.125%;
	}
	.chara_imgWrap{
		width: 100%;
		left: 0;
		margin-top: 0;
	}
	.chara_img{
		width: 87.2%;
		margin: 17% auto 0;
	}
	/* chara15画像対策*/
	.chara15 .chara_img{
		margin-left: 0;
	}
}



.swiper_arrow_prevWrap{
	width: calc((100% - 960px) / 2);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
}
.swiper_arrow_prev{
	position: absolute;
	top: 50%;
	left: calc(50% - 40px);
	transform: translateY(-50%);
	width: 80px;
	padding-top: 58px;
	z-index: 2;
	mix-blend-mode: difference;
}
.swiper_arrow_prev:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 44px;
	background: url(../img/top/swiper_arrow_prev.svg) no-repeat center center / contain;
	transition: .3s ease;
}
.swiper_arrow_prev:hover::before{
	left: -10px;
}

.swiper_arrow_nextWrap{
	width: calc((100% - 960px) / 2);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
}
.swiper_arrow_next{
	position: absolute;
	top: 50%;
	right: calc(50% - 40px);
	transform: translateY(-50%);
	width: 80px;
	padding-top: 58px;
	z-index: 2;
	mix-blend-mode: difference;
}
.swiper_arrow_next:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	padding-top: 44px;
	background: url(../img/top/swiper_arrow_prev.svg) no-repeat center center / contain;
	transform: rotate(180deg);
	transition: .3s ease;
}
.swiper_arrow_next:hover::before{
	right: -10px;
}
.swiper_arrow_next span,.swiper_arrow_prev span{
	font-size: 16px;
	display: block;
	line-height: 1;
	text-align: center;
	color: #fff;
}

.swiper_arrow_prev.swiper-button-disabled,.swiper_arrow_next.swiper-button-disabled{
	pointer-events: none;
	opacity: 0.65;
}


/* SWIPER-ANIMATION */

/** BGC_ANI **/
.chara_bgc_ani{
	transition: background-size .3s ease, color .3s ease;
}
.chara01 .chara_bgc_ani{
	background: linear-gradient(var(--chara01-color), var(--chara01-color)) right bottom / 0 100% no-repeat;
}
.chara02 .chara_bgc_ani{
	background: linear-gradient(var(--chara02-color), var(--chara02-color)) right bottom / 0 100% no-repeat;
}
.chara03 .chara_bgc_ani{
	background: linear-gradient(var(--chara03-color), var(--chara03-color)) right bottom / 0 100% no-repeat;
}
.chara04 .chara_bgc_ani{
	background: linear-gradient(var(--chara04-color), var(--chara04-color)) right bottom / 0 100% no-repeat;
}
.chara05 .chara_bgc_ani{
	background: linear-gradient(var(--chara05-color), var(--chara05-color)) right bottom / 0 100% no-repeat;
}
.chara06 .chara_bgc_ani{
	background: linear-gradient(var(--chara06-color), var(--chara06-color)) right bottom / 0 100% no-repeat;
}
.chara07 .chara_bgc_ani{
	background: linear-gradient(var(--chara07-color), var(--chara07-color)) right bottom / 0 100% no-repeat;
}
.chara08 .chara_bgc_ani{
	background: linear-gradient(var(--chara08-color), var(--chara08-color)) right bottom / 0 100% no-repeat;
}
.chara09 .chara_bgc_ani{
	background: linear-gradient(var(--chara09-color), var(--chara09-color)) right bottom / 0 100% no-repeat;
}
.chara10 .chara_bgc_ani{
	background: linear-gradient(var(--chara10-color), var(--chara10-color)) right bottom / 0 100% no-repeat;
}
.chara11 .chara_bgc_ani{
	background: linear-gradient(var(--chara11-color), var(--chara11-color)) right bottom / 0 100% no-repeat;
}
.chara12 .chara_bgc_ani{
	background: linear-gradient(var(--chara12-color), var(--chara12-color)) right bottom / 0 100% no-repeat;
}
.chara13 .chara_bgc_ani{
	background: linear-gradient(var(--chara13-color), var(--chara13-color)) right bottom / 0 100% no-repeat;
}
.chara14 .chara_bgc_ani{
	background: linear-gradient(var(--chara14-color), var(--chara14-color)) right bottom / 0 100% no-repeat;
}
.chara15 .chara_bgc_ani{
	background: linear-gradient(var(--chara15-color), var(--chara15-color)) right bottom / 0 100% no-repeat;
}
.chara16 .chara_bgc_ani{
	background: linear-gradient(var(--chara16-color), var(--chara16-color)) right bottom / 0 100% no-repeat;
}



.charaani_1{
transition-delay: .3s;
}
.charani_2{
opacity: 0;
transition: .3s ease;
}
.swiper-slide-active .charaani_1{
	opacity: 1;
	transition-delay: .6s;
	background-position: left bottom;
	background-size: 100% 100%;
}
.swiper-slide-active .charani_2{
	transition-delay: .7s;
	opacity: 1;
}
.charaList{
	transition-delay: .6s;
}

@media screen and (max-width: 768px){
	.swiper_arrow_prevWrap{
		width: 100%;
		top: 0;
		margin-top: 72.2667%;
		height: 344px;
		bottom: unset;
	}
	.swiper_arrow_prev{
		width: 6.4%;
		left: 6.4%;
		transform: translateY(-100%);
		padding-top: 9.3334%;
		display: flex;
		justify-content: center;
	}
	.swiper_arrow_prev:before{
		padding-top: 58.3334%;
	}
	.swiper_arrow_nextWrap{
		width: 100%;
		top: 0;
		margin-top: 72.2667%;
		height: 344px;
		bottom: unset;
	}
	.swiper_arrow_next{
		width: 6.4%;
		right: 6.4%;
		transform: translateY(-100%);
		padding-top: 9.3334%;
		display: flex;
		justify-content: center;
	}
	.swiper_arrow_next:before{
		padding-top: 58.3334%;
	}
	.swiper_arrow_next span,.swiper_arrow_prev span{
		font-size: 3.2vw;
		position: absolute;
		bottom: 0;
	}
	.sp_mvtk{
		margin: 11.7995% auto;
		width: 96.4602%!important;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.sp_mvtk iframe{
		max-width: 100%!important;
	}
}

/* TOP FOOTER */
.footer_sitefoot{
	padding-top: 80px;
}

@media screen and (max-width: 768px){
	.footer_sitefoot{
		padding-top: 14.1593%;
	}
}

/* Bnr */
.top__bnr{
	z-index: 2;
}

.top__bnr{
	position: absolute;
	top: 0;
	left: 5%;
	margin-top: calc(5% - 10px);
}

.top__bnr ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.top__bnr li:last-child{
	margin-left: 15px;
}
@media screen and (max-width: 768px){
	.top__bnr ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.top__bnr li:last-child{
		margin-left: 10px;
	}
}

.top__bnr ul li{
	margin: 10px 0;
}
@media screen and (max-width: 768px){
	.top__bnr{
		margin: 20px 0 0 0;
		margin-top: 0;
		left: 13%;
	}
	.top__bnr ul li{
		margin: 10px 0;
	}
}

.top__bnr img{
	width: 150px;
}
@media screen and (max-width: 768px){
	.top__bnr img{
		width: 90px;
	}
}