@charset "utf-8";
.loading{
	position: fixed;
	z-index: 20000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.loading:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	transition: opacity 1.2s ease;
}
.loading:after{
	content: '';
	position: absolute;
	width: 600px;
	height: 200px;
	top: calc(50%  - 100px);
	left: calc(50% - 300px);
	background: url(../img/common/logo.png) no-repeat center / contain;
	transition: all .4s ease;
}
@media screen and (max-width: 767px){
	.loading:after{
		width: 300px;
		height: 100px;
		top: calc(50%  - 50px);
		left: calc(50% - 150px);
	}
}
.loading.a:after{
	opacity: 0;
}
.loading.a:before{
	opacity: 0;
}
.kv {
	width:100%;
	padding-top:56.6666%;
	background:url(../img/top/kv.jpg) no-repeat center center / cover;
	position:relative;
	opacity: 0;
	transition: all 5s ease;
}
.kv.a{
	opacity: 1;
}

.kv__logo {
	position: absolute;
	right:2.9166%;
	top:18.3823%;
	width: 44.5833%;
	height:19.7058%;
	background:url(../img/common/logo.png) no-repeat center center / contain;
}
.en .kv__logo {
	background: url(../img/common/logo-en.png) no-repeat center center / contain;
}
@media screen and (max-width:767px) {
	.kv {
		margin-bottom:36vw;
	}
	.kv__logo {
		top:calc(100% + 4vw);
		left:8vw;
		right:8vw;
		width:auto;
		height:21vw;
	}
}
.main {
	padding:120px 0;
	position: relative;
}

/***********
** COMMON **
************/
.main__title {
	width:750px;
	height:90px;
	display: flex;
	flex-direction: column;
	margin:0 auto 80px;
	justify-content: space-between;
	align-items: center;
	background:url(../img/common/maintitle_bg.svg) no-repeat center center;
}
.main__title .title__en {
	font-size:56px;
	line-height:42px;
	text-align: center;
	letter-spacing: 0.025em;
	color:#eb2248;
}
.main__title .title__ja {
	font-size:24px;
	height:24px;
	line-height:24px;
	padding:0 64px;
	background-image:url(../img/common/main_title_icon.svg),url(../img/common/main_title_icon.svg);
	background-size:auto 24px;
	background-position:left center,right center;
	background-repeat: no-repeat;
}

.main__btnmore {
	width:390px;
	margin: 50px auto 0;
}
.main__btnmore a {
	height:64px;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	background:#eb2248;
	color:#FFF;
	text-decoration: none;
}
.main__btnmore a span {
	position: relative;
	z-index: 10;
	display: block;
	font-size:24px;
	letter-spacing: 0.1em;
}
.main__btnmore a:before {
	content:'';
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	width:0;
	background:rgba(0,0,0,0.3);
	transition:all 0.3s ease;
}
.main__btnmore a:hover:before {
	width:100%;
}
.main__btnmore a:after {
	content:'';
	position: absolute;
	left: 4px;
	right:4px;
	top:4px;
	bottom:4px;
	background:url(../img/common/btn_line.svg) no-repeat center center / contain;
	z-index:5;
}

@media screen and (max-width: 767px){
	.main__btnmore {
		width: 62.1334vw;
		margin: 25px auto 0;
	}
	.main__btnmore a {
		height: 10.6882vw;
	}
	.main__btnmore a span {
		font-size: 1.5rem;
	}
	.main__btnmore a:after {
		top: 2px;
		right: 2px;
		bottom: 2px;
		left: 2px;
	}
}

/****
*** NEWS ***
****/
#tNews{
	/*padding-bottom: 100px;*/
	position: relative;
}
#tNews .main__title{
	margin-bottom: 0;
}
.main__newsWrap{
	width: 100%;
	max-width: 1200px;
	min-height: 600px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	margin-top: -40px;
}
.main__news{
	width: 59.3334%;
	margin: 0 auto;
	min-width: 510px;
	position: relative;
	padding-top: 140px;
	padding-left: 10.8334%;
	padding-right: 2.6667%;
}
.main__news_h3{
	width: 260px;
	padding-top: 270px;
	background: url(../img/top/main__news_h3.png) no-repeat center / contain;
	position: absolute;
	top: 0;
	left: 0;
}
.main__newsLists{
	position: relative;
	width: 100%;
	min-height: calc(100% - 114px);
}
.main__newsList{
	width: 100%;
	margin-bottom: 32px;
}
.main__newsList:last-child{
	margin-bottom: 0;
}
.main__newsLink{
	display: flex;
	font-size: 16px;
	text-decoration: none;
	line-height: 1.5625;
}
.main__newsLink time{
	flex-shrink: 0;
	display: inline-block;
	padding-right: 32px;
	position: relative;
	color: #eb2248;
	font-weight: 500;
}
.main__newsLink time:after{
	content: '';
	position: absolute;
	top: 8.5px;
	right: 12px;
	width: 8px;
	height: 8px;
	background: url(../img/common/icon_news_dot.svg) no-repeat center / contain;
}
@media screen and (min-width: 768px){
	.main__newsLink p span{
	background: linear-gradient(#ffb6c4, #ffb6c4) right bottom/0% 1px no-repeat;
	transition: background-size 0.2s ease;
	}
	.main__newsLink:hover p span{
		background-position: left bottom;
		background-size: 100% 1px;
		color: #eb2248;
	}
}

.main__twitter{
	width: 40.6667%;
	padding-top: 148px;
	padding-right: 6.6667%;
	padding-left: 5%;
	position: relative;
}
.main__twitter_h3{
	width: 271px;
	padding-top: 270px;
	background: url(../img/top/main__twitter_h3.png) no-repeat center / contain;
	position: absolute;
	top: 0;
	left: -46px;
	z-index: 2;
	pointer-events: none;
}
.main__twitterIn{
	width: 100%;
	height: calc(100% - 114px);
	position: relative;
	padding: 10px;
	border-radius: 20px;
	background-color: #f5b8d2;
}
.main__twitterIn iframe{
	border-radius: 12px;
	background-color: #fff;
}
.main__twitter .main__btnmore{
	width: 100%;
}

@media screen and (max-width: 767px){
	/*#tNews{
		padding-bottom: 10.6667vw;
	}*/
	.main__newsWrap{
		max-width: 100%;
		min-height: auto;
		display: block;
		margin-top: -25.13334vw;
		overflow: hidden;
	}
	#tNews .main__title{
		background: url(../img/top/maintitle_bg_spnews.png) no-repeat center center / 110% auto;
	}
	.main__news{
		width: 100%;
		min-width: 100%;
		padding: 37.3334% 0 0;
	}
	.main__news_h3{
		width: 48vw;
		padding-top: 49.6vw;
		top: 0;
		left: unset;
		right: -18.6667%;
	}
	.main__newsLists{
		min-height: auto;
		padding: 0 9.3334% 4.6667%;
	}
	.main__newsList{
		margin-bottom: 26px;
	}
	.main__newsLink{
		font-size: 1.3rem;
		display: block;
	}
	.main__newsLink time{
		font-size: 1.2rem;
		padding-right: 16px;
		margin-bottom: 12px;
		line-height: 1;
	}
	.main__newsLink time:after{
		right: 0;
		width: 4px;
		height: 4px;
		top: 4px;
	}
	.main__twitter{
		width: 100%;
		padding: 10.667% 9.3334% 0;
		position: relative;
		z-index: 2;
	}
	.main__twitter_h3{
		width: 46.8%;
		padding-top: 46.5334%;
		top: -10.6667vw;
		left: -10.6667%;
	}
	.main__twitterIn{
		padding: 10px;
		border-radius: 10px;
		height: 320px;
	}
	.main__twitterIn iframe{
		border-radius: 7px;
	}
	.main__twitter .main__btnmore{
		width: 62.1334vw;
	}
	#tNews .bg_acc_r{
		position: absolute;
		bottom: 26.6667vw;
		right: 0;
	}
}

/****
** STORY
****/
#story{
	padding-top: 100px;
}
#story .main__title{
	margin-bottom: 30px;
}
.main__storyWrap{
	width: 100%;
	padding-top: 40px;
	position: relative;
	overflow: hidden;
	background: url(../img/top/story_bg.jpg) no-repeat center / cover;
}
.story_cWrap{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
}
#story_cl{
	width: 535px;
	/*width: 406px;*/
	/*padding-top: 590px;*/
	position: absolute;
	top: 68px;
	bottom: 0;
	left: 0;
	background: url(../img/top/story_koume01.png) no-repeat top left / 100%;
}
#story_cr{
	width: 515px;
	/*width: 393px;*/
	/*padding-top: 590px;*/
	position: absolute;
	overflow: hidden;
	top: 87px;
	right: 0;
	bottom: 0;
	background: url(../img/top/story_sakura01.png) no-repeat top center / 100%;
}
@media screen and (max-width: 1540.1px){
	.story_cWrap{
		width: 1360px;
		left: calc(50% - 680px);
		bottom: 0;
	}
}
@media screen and (min-width: 1540px){
	#story_cl{
		left: 5.1948%;
	}
	#story_cr{
		right: 5.1948%;
	}
}

.main__story {
	max-width:530px;
	margin:0 auto;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	color: #eb2248;
	font-size: 20px;
	line-height: 2em;
	text-align: center;
	position: relative;
	z-index: 2;
	padding: 32px 0;
}
.main__story p {
	margin-bottom: 30px;
	color: #222222;
	font-weight: 500;
	-moz-text-shadow: 0px 0px 12px rgba(235, 34, 72, 0.8);
	-webkit-text-shadow: 0px 0px 12px rgba(235, 34, 72, 0.8);
	-ms-text-shadow: 0px 0px 12px rgba(235, 34, 72, 0.8);
	text-shadow: 0px 0px 12px rgba(235, 34, 72, 0.8);
}
.main__story span {
	font-weight: 700;
}
.main__story .linear {
	background:linear-gradient(transparent 60%, rgba(255, 173, 214, 0.466) 60%);
}

@media screen and (max-width: 767px){
	#story{
		padding-top: 10.6667vw;
	}
	#story .main__title{
		margin-top: 15px;
	}
	.main__storyWrap{
		padding: 8% 9.334% 89.3334%;
	}
	.story_cWrap{
		width: 100%;
		max-width: 100%;
		height: 89.3334vw;
		top: unset;
		left: 0;
	}
	#story_cl{
		width: 85.73334%;
		top: 7.7334vw;
		left: -17.3334%;
	}
	#story_cr{
		width: 83.0667%;
		top: 8.26667vw;
		right: -16.5334%;
	}
	.main__story {
		width: 100%;
		max-width: 100%;
		padding: 0;
		font-size: 1.3rem;
	}
	.main__story p {
		margin-bottom: 12px;
	}
	.main__story p:last-child {
		margin-bottom: 0;
	}
}
@media screen and (min-width: 396px){
	.brspm{
		display: none;
	}
}



/****
** SYSTEM
****/
#system{
	padding-top: 100px;
	position: relative;
}
#system .main__title{
	margin-bottom: 10px;
}

.systemList{
	width: 750px;
	padding: 40px 0 0 50px;
	margin-right: 20px;
	position: relative;
}
.system_h3{
	width: 105px;
	height: 104px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	/*box-shadow: 16px 27.713px 76px 0px rgba(241, 126, 142, 0.43);*/
}
.system_h3:before{
	content: '';
	position: absolute;
	top: 5px;
	right: 1px;
	bottom: 1px;
	left: 1px;
	border-radius: 50%;
	box-shadow: 16px 27.713px 76px 0px rgba(241, 126, 142, 0.43);
	z-index: -1;
	pointer-events: none;
}
.systemCont{
	width: 100%;
	position: relative;
	border-radius: 20px;
}
.system_img{
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
}
.system_img img{
	width: 100%;
	pointer-events: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-touch-callout: none;
	-moz-user-select: none;
	touch-callout: none;
	user-select: none;
}
.systemTxt{
	width: calc(100% - 24px);
	position: absolute;
	bottom: 24px;
	left: 30px;
}
.systemTxt p span{
	font-size: 20px;
	line-height: 2;
	background-color: #fff;
	margin-bottom: 8px;
	display: inline-block;
	padding: 0 4px;
}
.systemTxt p span:last-child{
	margin-bottom: 0;
}

.systemList01 .system_h3{
	background: url(../img/top/system_h3_01.png) no-repeat center / contain;
}
.systemList02 .system_h3{
	background: url(../img/top/system_h3_02.png) no-repeat center / contain;
}
.systemList03 .system_h3{
	background: url(../img/top/system_h3_03.png) no-repeat center / contain;
}
.systemList04 .system_h3{
	background: url(../img/top/system_h3_04.png) no-repeat center / contain;
}
.systemList05 .system_h3{
	background: url(../img/top/system_h3_05.png) no-repeat center / contain;
}

.system_arrow_prev,.system_arrow_next{
	width: 72px;
	height: 72px;
	border-radius: 50%;
	padding: 10px;
	position: absolute;
	bottom: calc(50% - 36px);
	z-index: 100;
	border: 2px solid #ffb6c4;
	background-color: #fff;
}
.system_arrow_prev{
	left: 2%;
}
.system_arrow_next{
	right: 2%;
}
.system_arrow_prev:before,.system_arrow_next:before{
	content: '';
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	border-radius: 50%;
	border: 1px solid #ffb6c4;
	position: absolute;
}
.system_arrow_prev:after,.system_arrow_next:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 11px;
	height: 11px;
}
.system_arrow_prev:after{
	background: url(../img/common/slide_arrow_l.svg)no-repeat center / 100%;
}
.system_arrow_next:after{
	background: url(../img/common/slide_arrow_r.svg)no-repeat center / 100%;
}

.system_pagination{
	margin-top: 48px;
}
.system_paginationLists{
	justify-content: center;
}
.system_paginationList{
	position: relative;
	padding-right: 38px;
	width: 110px;
	pointer-events: none;
}
.system_paginationList:before{
	content: '';
	position: absolute;
	top: calc(50% - 9px);
	right: 0;
	width: 38px;
	height: 18px;
	background: url(../img/top/system_num_line.svg) no-repeat center / contain;
}
.system_paginationList:last-child{
	padding-right: 0;
}
.system_paginationList:last-child::before{
	content: unset;
}

.system_paginationList button{
	width: 72px;
	height: 72px;
	border-radius: 50%;
	padding: 5px;
	z-index: 100;
	border: 2px solid #ffb6c4;
	background-color: #fff;
	position: relative;
	pointer-events: auto;
}
.system_paginationList button:before{
	content: '';
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	border-radius: 50%;
	border: 1px solid #ffb6c4;
	position: absolute;
}
.system_paginationList .system_pagination_num{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 3px;
	left: 3px;
	bottom: 3px;
	right: 3px;
	border-radius: 50%;
	font-size: 30px;
	color: #ffb8c6;
	line-height: 1;
	transition: .3s ease;
}
.system_paginationList button:hover .system_pagination_num,
.swiper-slide-thumb-active button .system_pagination_num{
	background-color: #ffb6c4;
	color: #fff;
}

@media screen and (max-width: 767px){
	#system{
		padding-top: 13.3334vw;
	}
	#system .main__title{
		margin-bottom: 0;
	}
	.main__system{
		margin-top: -5px;
	}
	.systemList{
		width: 100%;
		padding: 6.6667% 9.3334% 0;
		margin-right: 0;
	}
	.system_h3{
		width: 20%;
		height: auto;
		padding-top: 19.7334%;
		left: -0.5334%;
	}
	.systemCont{
		height: 58.6667vw;
	}
	.system_img{
		height: 100%;
		border-radius: 2.6667vw;
	}
	.system_img img{
		width: 100%;
		height: 100%;
		max-width: fit-content;
		object-fit: cover;
	}
	.systemTxt{
		width: calc(100% - 4vw);
		bottom: 4vw;
		left: 4vw;
	}
	.systemTxt p span{
		font-size: 3.2vw;
		margin-bottom: 1.0667vw;
		line-height: 1.6;
		padding: 0 0.5334vw;
	}
	.system_arrow_prev,.system_arrow_next{
		width: 8vw;
		height: 8vw;
		padding: 0;
		bottom: calc(50% - 4vw - 3.3335%);
		border-width: 0.2667vw;
	}
	.system_arrow_prev{
		left: 5.3334%;
	}
	.system_arrow_next{
		right: 5.3334%;
	}
	.system_arrow_prev:before,.system_arrow_next:before{
		top: 0.4vw;
		right: 0.4vw;
		bottom: 0.4vw;
		left: 0.4vw;
		border-width: 0.1334vw;
	}
	.system_arrow_prev:after,.system_arrow_next:after{
		width: 1.6vw;
		height: 1.6vw;
	}
	.system_pagination{
		margin-top: 5.0667%;
	}
	.system_paginationList{
		width: 14.6667vw;
		padding-right: 5.0667vw;
	}
	.system_paginationList:before{
		top: calc(50% - 1.2vw);
		width: 5.0667vw;
		height: 2.4vw;
	}
	.system_paginationList button{
		width: 9.6vw;
		height: 9.6vw;
		padding: 0.6667vw;
		border-width: 0.26667vw;
	}
	.system_paginationList button:before{
		top: 0.4vw;
		right: 0.4vw;
		bottom: 0.4vw;
		left: 0.4vw;
		border-width: 0.1334vw;
	}
	.system_paginationList .system_pagination_num{
		top: 0.4vw;
		right: 0.4vw;
		bottom: 0.4vw;
		left: 0.4vw;
		font-size: 4vw;
	}
}

@media screen and (min-width: 767px){
	#system .bg_acc_r{
		position: absolute;
		top: 520px;
		right: 0;
	}
}


/****
** CHARACTER
****/
#character{
	padding-top: 100px;
	position: relative;
}
.charaLists{
	width: 100%;
	display: flex;
	justify-content: center;
}
.charaList{
	width: 318px;
	height: 620px;
	margin: 0 2px;
}
.charalink{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.charalink:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.charalink:after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url(../img/top/character/chara_thumb_bg.jpg) no-repeat center / cover;
}
.chara_thumbImg{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 2;
	transition: .3s ease;
}
.chara_thumbTxt{
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	font-weight: 500;
	z-index: 3;
}
.charaThumb_name{
	font-size: 34px;
	line-height: 1;
	padding: 15px;
	margin-bottom: 8px;
}
.charaThumb_cv{
	font-size: 20px;
	line-height: 1;
	padding: 8px 18px;
}

/** THUMBLISTS**/
#charaThumb_koume.charalink:before{
	background-color: #ffb6c4;
}
#charaThumb_koume.charalink:after{
	mix-blend-mode: lighten;
}
#charaThumb_koume .chara_thumbImg{
	background-image: url(../img/top/character/chara_thumbimg_01.png);
}
#charaThumb_koume .chara_thumbTxt p{
	background-color: #ffb6c4;
}

#charaThumb_sakura.charalink:before{
	background-color: #ffae00;
}
#charaThumb_sakura.charalink:after{
	mix-blend-mode: hard-light;
}
#charaThumb_sakura .chara_thumbImg{
	background-image: url(../img/top/character/chara_thumbimg_02.png);
}
#charaThumb_sakura .chara_thumbTxt p{
	background-color: #ffae00;
}

#charaThumb_itsuha.charalink:before{
	background-color: #a5e5ff;
}
#charaThumb_itsuha.charalink:after{
	mix-blend-mode: luminosity;
}
#charaThumb_itsuha .chara_thumbImg{
	background-image: url(../img/top/character/chara_thumbimg_03.png);
}
#charaThumb_itsuha .chara_thumbTxt p{
	background-color: #5ec6f1;
}

@media screen and (min-width: 768px){
	.characterWrap{
		overflow: unset;
	}
	.charaList{
		transition: .3s ease;
		position: relative;
		overflow: hidden;
	}
	.charaList:hover{
		transform: scale(1.025) rotate(2deg);
		opacity: 0.85;
		z-index: 5;
	}
	.charaList:hover .chara_thumbImg{
		transform: scale(1.05);
	}
}

@media screen and (max-width: 767px){
	#character{
		padding-top: 13.3334vw;
	}
	.charaLists{
		justify-content: unset;
	}
	.charaList{
		width: 53.0667%;
		height: 82.6667vw;
		margin: 0 3px;
	}
	.charaThumb_name{
		font-size: 4.5334vw;
		padding: 2vw;
		margin-bottom: 3px;
	}
	.charaThumb_cv{
		font-size: 2.6667vw;
		padding: 1.0667vw 2.4vw;
	}

/** THUMBLISTS**/
	#charaThumb_koume .chara_thumbImg{
		background-image: url(../img/top/character/chara_thumbimg_01_sp.png);
	}
	#charaThumb_sakura .chara_thumbImg{
		background-image: url(../img/top/character/chara_thumbimg_02_sp.png);
	}
	#charaThumb_itsuha .chara_thumbImg{
		background-image: url(../img/top/character/chara_thumbimg_03_sp.png);
	}
}

/****
** CHARACTER MODAL
****/
.charaModalWrap{
	display: none;
	width: 100%;
	height: 100%;
	background: url(../img/common/modal_bg.jpg) no-repeat center / cover;
	position: fixed;
	top: 0%;
	left: 0%;
	overflow: auto;
	z-index: 3;
}
.charaModalInWrap{
	position: relative;
}
@media screen and (min-width: 768px){
	.charaModalWrap{
		width: 86.5%;
		max-width: 1500px;
		height: 80%;
		top: 10%;
		left: 6.75%;
	}
	.charaModalInWrap{
		min-width: 1038px;
		max-width: 1500px;
		margin: 0 auto;
	}
	.modalBox{
		background: rgba(254,254,254,0.7);
	}
}
@media screen and (min-width: 1734px){
	.charaModalWrap{
		width: 1500px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.charaContentsBG{
		max-width: 1500px
	}
}
.charaContentsBG{
	width: 100%;
	min-width: 1038px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-top: calc(13.3334% + 136px);
	margin-bottom: 25%;
}
.charaContentsBG div{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	/*padding-top: 58.667%;*/
	background-color: #fff;
}
@media screen and (min-width: 768px){
	.charaModalWrap .oneModalIn {
		min-width: 1038px;
		max-width: 1500px;
	}
}
.charaModalIn{
	width: 100%;
	position: relative;
}
.charaModalContents{
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	padding: 13.3334% 0 25%;
}
.charaName{
	padding-left: 4%;
}
.charaName_name{
	font-size: 60px;
	font-weight: 500;
	color: #ff0031;
	display: block;
	line-height: 1;
	text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
				-2px 2px 0 #FFF, 2px -2px 0 #FFF,
				0px 2px 0 #FFF,  0 -2px 0 #FFF,
				-2px 0 0 #FFF,2px 0 0 #FFF;
	margin-bottom: 16px;
}
.charaName_name span{
	font-size: 30px;
}
.charaName_cv{
	display: block;
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	color: #ff0031;
	text-shadow:2px 2px 2px #FFF, -2px -2px 2px #FFF,
				-2px 2px 2px #FFF, 2px -2px 2px #FFF,
				0px 2px 2px #FFF,  0 -2px 2px #FFF,
				-2px 0 2px #FFF,2px 0 2px #FFF;
}
.charaContent{
	height: calc(100% - 76px);
	padding-top: 60px;
	margin-top: -24px;
	position: relative;
}
.chara_voice{
	width: 120px;
	padding-top: 120px;
	position: absolute;
	top: 0;
	left: calc(4% + 260px);
}
.chara_voice button{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid #ffb6c4;
	padding: 5px;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	font-family: 'EB Garamond', serif;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
}
.chara_voice button:before{
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	bottom: 5px;
	right: 5px;
	border-radius: 50%;
	background-color: #ffb6c4;
}
.chara_voice button .icon{
	position: relative;
}
.chara_voice button .icon span{
	display: inline-block;
	position: relative;
	line-height: 1;
	padding-left: 26px;
}
.chara_voice button .icon span:before{
	content: '';
	width: 20px;
	height: 20px;
	position: absolute;
	top: calc(50% - 10px);
	left: 0;
	background-image: url(../img/top/icon_play_ready.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.chara_voice button .is-play + .icon span:before{
	background-image: url(../img/top/icon_play_pause.svg);
}

.charaContentIn{
	padding: 8.0358% 9.6667% 0 4%;
	display: flex;
	justify-content: space-between;
}
.charaContent_h{
	background-color: #ffb6c4;
	width: 222px;
	height: 48px;
	border-radius: 24px;
	font-size: 20px;
	text-align: center;
	height: 48px;
	color: #fff;
	margin-bottom: 24px;
	font-weight: 500;
}
.charaContent_h span{
	display: block;
	height: 48px;
	line-height: 48px;
}
.charaContent_txt{
	color: #000;
	font-size: 16px;
	line-height: 2;
	font-weight: 500;
}

.chara_profile{
	width: 34.7826%;
}

.charaContent_block{
	text-align: center;
}
.chara_motif{
	margin-top: 56px;
}

.chara_nameEng{
	font-size: 120px;
	line-height: 0.70833;
	font-weight: 500;
	letter-spacing: 0.025em;
	color: #ffb6c4;
	position: absolute;
	bottom: 0;
	right: 0;
	font-family: 'EB Garamond', serif;
	z-index: -1;
}
.chara_img{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.chara_img div{
	width: 37.5%;
	padding-top: 100%;
}
#chara_img_koume{
	background: url(../img/top/character/chara_img_01.png) no-repeat top center / contain;
}
#chara_img_sakura{
	background: url(../img/top/character/chara_img_02.png) no-repeat top center / contain;
}
#chara_img_itsuha{
	background: url(../img/top/character/chara_img_03.png) no-repeat top center / contain;
}


.charaModal_btnWrap{
	position: absolute;
	/*width: 30.8334%;*/
	width: 370px;
	top: 0;
	right: 0;
	padding-right: 2.5%;
	margin-top: calc(13.3334% + 40px);
	z-index: 2;
}
.charaModal_btnInWrap{
	display: flex;
	justify-content: space-between;
}
.nextprevWrap{
	display: flex;
}
.chara_close{
	width: 72px;
	height: 72px;
	position: relative;
	border-radius: 50%;
}
.chara_close a{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid #ffb6c4;
	padding: 5px;
	background-color: #fff;
	position: relative;
}

.chara_close a:before{
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	bottom: 5px;
	right: 5px;
	border-radius: 50%;
	border: 1px solid #ffb6c4;
}
.chara_close a div{
	position: absolute;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	width: 20px;
	height: 20px;
}
.chara_close a div:before{
	content: '';
	position: absolute;
	height: 2px;
	width: 100%;
	top: 9px;
	background-color: #ffb6c4;
	transform: rotate(30deg);
}
.chara_close a div:after{
	content: '';
	position: absolute;
	height: 2px;
	width: 100%;
	bottom: 9px;
	background-color: #ffb6c4;
	transform: rotate(-30deg);
}

.chara_prev, .chara_next{
	width: 72px;
	height: 72px;
	position: relative;
	border-radius: 50%;
	margin: 0 10px;
}
.chara_prev a, .chara_next a{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid #ffb6c4;
	padding: 5px;
	background-color: #fff;
	position: relative;
}

.chara_prev a:before, .chara_next a:before{
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	bottom: 5px;
	right: 5px;
	border-radius: 50%;
	border: 1px solid #ffb6c4;
}

.chara_prev a:after, .chara_next a:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 11px;
	height: 11px;
}
.chara_prev a:after {
	background: url(../img/common/slide_arrow_l.svg)no-repeat center / 100%;
}
.chara_next a:after {
	background: url(../img/common/slide_arrow_r.svg)no-repeat center / 100%;
}

@media screen and (max-width: 767px){
	.charaModalInWrap{
		min-width: 100%;
	}
	.charaContentsBG{
		min-width: 100%;
		margin-top: 216px;
		margin-bottom: 0;
	}
	.charaModalContents{
		padding: 130px 0 75px;
		/*padding: 34.6667% 0 17.3334%;*/
		bottom: unset;
		z-index: 3;
	}
	.charaName{
		padding-left: 4.5334%;
	}
	.charaName_name{
		font-size: 3.2rem;
		margin-bottom: 10px;
	}
	.charaName_name span{
		font-size: 1.6rem;
	}
	.charaName_cv{
		font-size: 1.4rem;
	}
	.charaContent{
		height: auto;
		padding-top: 32px;
		margin-top: 0;
	}
	.chara_voice{
		width: 60px;
		padding-top: 60px;
		left: calc(4.5334% + 130px);
		z-index: 4;
	}
	.chara_voice button{
		border-width: 1px;
		font-size: 1rem;
		padding: 3px;
	}
	.chara_voice button:before{
		top: 3px;
		left: 3px;
		bottom: 3px;
		right: 3px;
	}
	.chara_voice button .icon span{
		padding-left: 0;
		padding-top: 18px;
		padding-bottom: 2px;
	}
	.chara_voice button .icon span:before{
		width: 14px;
		height: 14px;
		top: 0;
		left: calc(50% - 7px);
	}
	.charaContentIn{
		padding: 38px 0 60px 4.5334%;
		flex-direction: column;
		justify-content: unset;
	}
	.charaContent_h{
		width: 130px;
		height: 32px;
		font-size: 1.2rem;
		margin-bottom: 14px;
	}
	.charaContent_h span{
		display: block;
		height: 32px;
		line-height: 32px;
	}
	.charaContent_txt{
		font-size: 1.2rem;
		text-shadow:2px 2px 2px #FFF, -2px -2px 2px #FFF,
				-2px 2px 2px #FFF, 2px -2px 2px #FFF,
				0px 2px 2px #FFF,  0 -2px 2px #FFF,
				-2px 0 2px #FFF,2px 0 2px #FFF;
	}
	.chara_profile{
		width: 80%;
		order: 2;
		margin-top: 32px;
	}
	.charaContent_block{
		width: 130px;
		order: 1;
	}
	.chara_motif{
		margin-top: 32px;
	}
	.chara_nameEng{
		font-size: 36px;
		line-height: 0.80556;
	}
	.chara_img{
		width: 100%;
		display: block;
		padding-top: 88px;
		pointer-events: none;
	}
	.chara_img div{
		width: 58.6667%;
		padding-top: 160%;
		margin-left: auto;
	}
	.charaModal_btnWrap{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		margin-top: 20px;
		padding-right: 4.5334%;
		width: auto;
	}
	.charaModal_btnInWrap{
		display: block;
	}
	.nextprevWrap{
		display: block;
		position: absolute;
		bottom: 100px;
	}
	.chara_close{
		width: 36px;
		height: 36px;
	}
	.chara_close a{
		border-width: 1px;
		padding: 3px;
	}
	.chara_close a:before{
		top: 3px;
		right: 3px;
		bottom: 3px;
		left: 3px;
	}
	.chara_close a div{
		top: calc(50% - 5px);
		left: calc(50% - 5px);
		width: 10px;
		height: 10px;
	}
	.chara_close a div:before{
		top: 4.5px;
		height: 1px;
	}
	.chara_close a div:after{
		bottom: 4.5px;
		height: 1px;
	}
	.chara_prev, .chara_next{
		width: 36px;
		height: 36px;
		margin: 10px 0;
	}
	.chara_prev a, .chara_next a{
		border-width: 1px;
		padding: 3px;
	}
	.chara_prev a:before, .chara_next a:before{
		top: 3px;
		right: 3px;
		bottom: 3px;
		left: 3px;
	}
	.chara_prev a:after, .chara_next a:after {
		width: 6px;
		height: 6px;
	}
}
@media screen and (max-width: 359px){
	.charaModalContents{
		padding-top: 98px;
	}
	.charaName_name{
		margin-bottom: 16px;
	}
	.charaName_name span{
		display: block;
		margin-top: 10px;
	}
	.chara_voice{
		left: calc(4.5334% + 100px);
	}
}

/****
** GALLERY
****/
#gallery{
	padding-top: 100px;
	position: relative;
}
#gallery .main__title{
	position: relative;
	z-index: 2;
}
.galleryLists{
	width: 980px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.galleryList{
	width: calc(100% / 3 - 20px);
	margin: 0 10px;
	margin-bottom: 20px;
	cursor: pointer;
	position: relative;
	z-index: 2;
}
.galleryList .galleryCont{
	display: none;
}

.galleryList_thumb{
	width: 100%;
	padding-top: 56.25%;
	height: auto;
	display: block;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}
.galleryList_thumb:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: rgba(0,0,0,0.3);
	transition: all 0.3s ease;
	z-index: 2;
}
.galleryList:hover .galleryList_thumb:before{
	width: 100%;
}
.galleryList_thumbvideo:after{
	content: '';
	width: 74px;
	height: 74px;
	position: absolute;
	top: calc(50% - 37px);
	left: calc(50% - 37px);
	background: url(../img/common/icon_play.svg) no-repeat center / contain;
	z-index: 3;
}
.galleryImg{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: .3s ease;
}
.galleryList:hover .galleryImg{
	transform: scale(1.1);
}
.gallery_ttl{
	margin-top: 8px;
	font-size: 18px;
	font-family: 'EB Garamond', 'Noto Serif JP', serif;
	color: #eb2248;
	font-weight: 500;
}
#gallery .main__btnmore {
	position: relative;
	z-index: 2;
}

#gallery .bg_acc_l{
	position: absolute;
	bottom: -400px;
	left: 0;
}
@media screen and (max-width: 767px){
	#gallery .bg_acc_l{
		bottom: -40vw;
	}
}
@media screen and (max-width: 767px){
	#gallery{
		padding-top: 13.3334vw;
	}
	.galleryLists{
		width: 100%;
		padding: 0 3.2%;
	}
	.galleryList{
		width: 47.151%;
		margin: 0 1.4245%;
	}
	.galleryList_thumb{
		border-radius: 2.6667vw;
	}
	.galleryList_thumbvideo:after{
		width: 36px;
		height: 36px;
		top: calc(50% - 18px);
		left: calc(50% - 18px);
	}
	.gallery_ttl{
		margin-top: 4px;
		font-size: 1.2rem;
	}
	.galleryList{
		margin-bottom: 10px;
	}
}


/***
** GALLERY MODAL
**/
#spotlight{
	background: url(../img/common/modal_bg.jpg) no-repeat center / cover;
}
.spl-header{
	background-color: unset;
}
.spl-header div.spl-fullscreen{
	display: none;
}
.spl-prev,.spl-next{
	width: 72px;
	height: 72px;
	border-radius: 50%;
	padding: 10px;
	position: absolute;
	bottom: calc(50% - 36px);
	z-index: 100;
	border: 2px solid #ffb6c4;
	background-color: #fff;
	opacity: 1;
	transition: .3s ease;
}
.spl-prev:hover,.spl-next:hover{
	opacity: 0.65;
}
.spl-prev{
	left: 2%;
}
.spl-next{
	right: 2%;
}
.spl-prev:before,.spl-next:before{
	content: '';
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	border-radius: 50%;
	border: 1px solid #ffb6c4;
	position: absolute;
}
.spl-prev:after,.spl-next:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 11px;
	height: 11px;
}
.spl-prev:after{
	background: url(../img/common/slide_arrow_l.svg)no-repeat center / 100%;
}
.spl-next:after{
	background: url(../img/common/slide_arrow_l.svg)no-repeat center / 100%;
}
.spl-pane{
	transform: translate(0,0)!important;
}
.spl-pane>*{
	padding: 120px;
	transform:translate(-50%, -50%) scale(1)!important;
}



/****
** PRODUCT
****/
#product{
	padding-top: 100px;
	position: relative; 
}
.main__product {
	max-width:1120px;
	margin:0 auto;
	display:flex;
	justify-content: center;
	align-items: flex-start;
	margin-bottom:40px;
	flex-wrap: wrap;
}
.main__productLists {
	width:480px;
	font-size:20px;
	margin:0 30px;
	padding-bottom:40px;
}
.main__productList {
	width:480px;
	display:flex;
	align-items: flex-start;
}
.main__productList dt {
	width:6em;
	padding-right:2em;
	color:#eb2248;
	white-space: nowrap;
	margin-bottom:0.4em;
	background:url(../img/common/list_dot.svg) no-repeat right calc(1em - 4px) center / 8px 8px;
	text-align: right;
}
.main__productList dd {
	width:calc(100% - 6em);
	margin-bottom:0.4em;
}
.main__productStores {
	width:390px;
	margin:0 30px;
	padding-top:8px;
	padding-bottom:40px;
}
.main__productStore {
	margin-bottom:25px;
}
.main__productStore a {
	height:64px;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	background:#eb2248;
	color:#FFF;
	text-decoration: none;
}
.main__productStore a span {
	position: relative;
	z-index: 10;
	display: block;
	font-size:24px;
	letter-spacing: 0.1em;
}
.main__productStore a:before {
	content:'';
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	width:0;
	background:rgba(0,0,0,0.3);
	transition:all 0.3s ease;
}
.main__productStore a:hover:before {
	width:100%;
}
.main__productStore a:after {
	content:'';
	position: absolute;
	left: 4px;
	right:4px;
	top:4px;
	bottom:4px;
	background:url(../img/common/btn_line.svg) no-repeat center center / contain;
	z-index:5;
}
.main__specStaff {
	max-width: 1120px;
	margin:0 auto;
	padding-top:80px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.main__subTitle {
	position: relative;
	height:56px;
	border-bottom:4px solid #ffb6c4;
	line-height:32px;
	padding-left:50px;
	background:url(../img/common/main_subtitle_icon.svg) no-repeat left top / auto 32px;
	margin-bottom: 36px;
}
.main__subTitle:before {
	content:'';
	position: absolute;
	left:0;
	right:0;
	bottom:2px;
	height:2px;
	background:#ffb6c4;
}
.main__subTitle .title__en {
	font-size:44px;
	letter-spacing: 0.025em;
	color:#eb2248;
	display: inline-block;
	margin-right:24px;
}
.main__subTitle .title__ja {
	font-size:20px;
}
.main__spec {
	width:480px;
	margin:0 40px;
	padding-bottom:60px;
}
.main__specLists {
	width:480px;
	font-size:20px;
	margin:0 auto;
}
.main__specList {
	width:480px;
	display:flex;
	align-items: flex-start;
}
.main__specList dt {
	width:6.5em;
	padding-right:2em;
	color:#eb2248;
	white-space: nowrap;
	margin-bottom:0.4em;
	background:url(../img/common/list_dot.svg) no-repeat right calc(1em - 4px) center / 8px 8px;
	text-align: right;
}
.main__specList dd {
	width:calc(100% - 6.5em);
	margin-bottom:0.4em;
}
.main__staff {
	width:480px;
	margin:0 40px;
	padding-bottom:60px;
}
.main__staffLists {
	width:480px;
	font-size:20px;
	margin:0 auto;
}
.main__staffList {
	width:480px;
	display:flex;
	align-items: flex-start;
}
.main__staffList dt {
	width:12.5em;
	padding-right:2em;
	color:#eb2248;
	white-space: nowrap;
	margin-bottom:0.4em;
	background:url(../img/common/list_dot.svg) no-repeat right calc(1em - 4px) center / 8px 8px;
	text-align: right;
}
.main__staffList dd {
	width:calc(100% - 12.5em);
	margin-bottom:0.4em;
}
@media screen and (max-width:1136px){
	.main__spec,
	.main__staff {
		max-width:100%;
		width:100%;
	}
	.main__subTitle {
		width:100%;
	}
}
@media screen and (max-width:767px) {
	.main {
		padding:6.4vw 0 18.6667vw;
	}
	.main__title {
		width:100%;
		height:15vw;
		margin:0 auto 6.4vw;
		background:url(../img/common/maintitle_bg.svg) no-repeat center center / 110% auto;
	}
	.main__title .title__en {
		font-size:3.4rem;
		line-height:3rem;
	}
	.main__title .title__ja {
		font-size:1.6rem;
		height:1.6rem;
		line-height:1.6rem;
		padding:0 3.3rem;
		background-size:auto 1.6rem;
	}
	/*.main__story {
		width:calc(100% - 12.8vw);
		font-size:1.3rem;
		margin:0 auto;
		padding-bottom:8.6vw;
	}*/
	#product{
		padding-top: 13.3334vw;
	}
	.main__product {
		margin-bottom:6.4vw;
	}
	.main__productLists {
		width:calc(100% - 12.8vw);
		font-size:1.3rem;
		margin:0 auto;
		padding-bottom:8.6vw;
	}
	.main__productList {
		width:100%;
	}
	.main__productStores {
		/*width:calc(100% - 12.8vw);*/
		width: 62.1334vw;
		/*margin:0 6.4vw;*/
		margin: 0 auto;
		padding-top:0;
		padding-bottom:8.6vw;
	}
	.main__productStore {
		margin-bottom:3.2vw;
	}
	.main__productStore a {
		/*height:15vw;*/
		height: 10.6882vw;
	}
	.main__productStore a span {
		/*font-size:1.9rem;*/
		font-size:1.5rem;
	}
	.main__productStore a:after {
		top: 2px;
		right: 2px;
		bottom: 2px;
		left: 2px;
	}
	.main__specStaff {
		padding-top:3.2vw;
		width:calc(100% - 12.8vw);
	}
	.main__subTitle {
		height:11vw;
		line-height:2.2rem;
		padding-left:10vw;
		background:url(../img/common/main_subtitle_icon.svg) no-repeat left top / auto 6vw;
		margin-bottom: 5.3vw;
	}
	.main__subTitle .title__en {
		font-size:3rem;
		letter-spacing: 0.025em;
		margin-right:2rem;
	}
	.main__subTitle .title__ja {
		font-size:1.6rem;
	}
	.main__spec {
		width:100%;
		margin:0;
		padding-bottom:8.6vw;
	}
	.main__specLists {
		width:100%;
		font-size:1.3rem;
	}
	.main__specList {
		width:100%;
	}
	.main__specList dd {
		width:calc(100% - 6.5em);
		margin-bottom:0.4em;
	}
	.main__staff {
		width:100%;
		margin:0;
		padding-bottom:8.6vw;
	}
	.main__staffLists {
		width:100%;
		font-size:1.3rem;
	}
	.main__staffList {
		width:100%;
	}
}

/** TOP productLinkBtn **/
.top_purchase-link {
	position: fixed;
	bottom: 50px;
	width: 130px;
	height: 130px;
	right: 4%;
	animation: purchase_link_key1 .5s ease 10 alternate;
}
@keyframes purchase_link_key1{
	0% {transform: translateY(0px);}
	100% {transform: translateY(-15px);}
}
.top_purchase-link a {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
	border: 2px solid #fff;
	background-color: #eb2248;
	position: relative;
	padding: 38px 10px;
	text-decoration: none;
	color: #fff;
	text-align: center;
	font-size: 17px;
	line-height: 1.3;
	box-shadow: 0 0 27px #bbb;
}
.top_purchase-link a:before {
	content: '';
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	border-radius: 50%;
	border: 1px solid #fff;
	position: absolute;
}
.top_purchase-link a span {
	font-size: 20px;
	font-weight: 700;
}

/** TOP notice **/
.main__btnmore.notice {
	width: 500px;
	margin: -50px auto 50px;
	line-height: 1.7em;
}
.main__btnmore.notice a:after {
	content: '';
	position: absolute;
	left: 4px;
	right: 4px;
	top: 4px;
	bottom: 4px;
	/*background: url(https://test.koi2onsen.com/wp-content/themes/koi2onsen/assets/img/common/btn_line.svg) no-repeat center center / cover;*/
	z-index: 5;
}
.main__btnmore.notice a {
	height: 83px;
	padding: 10px;
	/*justify-content: left;*/
}

@media screen and (max-width: 767px) {
	.tewitter__TL {
		width: 90%;
		height: 350px;
		min-height: 288px;
		padding: 10px;
		border-radius: 10px;
		background-color: rgba(255, 182, 196, 0.5);
	}
	.linkBtn a {
		width: 50%;
	}
	.main__btnmore.notice {
	width: 80vw;
	}
	.main__btnmore.notice a {
		height: 53px;
	}
}

/** TOP adultCheckModal **/
@media screen and (min-width: 768px){
	#adultCheckModal{
		background: url(../img/common/modal_bg.jpg) no-repeat center / cover;
	}
}

.subonly{
	display: none!important;
}