@charset "utf-8";
/* CSS Document */

/*****************
	setting
******************/

body{
	color:#595959;
	background:#FFF url("../img/common/bg-pattern.png");
	font-family:'秀英にじみ丸ゴシック B','メイリオ', Meiryo,'Meiryo UI','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	margin:0;
	padding:0;
	line-height:1.4;
	font-size:0.9em;
	zoom:1;
	-webkit-text-size-adjust:100%;
	z-index: 0;
	min-width: 1024px;
	}

.container{
	overflow: hidden;
	margin-left: -40px;
}

a{
	color: #FFF;
	text-decoration: none;
}

li{
	list-style: none;
}

a:hover img{
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}

a img{
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}

h1{
	font-size: 100%;
}

h1::before{
	content:url("../img/common/h1_before.png");
}

h1::after{
	content:url("../img/common/h1_after.png");
	
}

h2{
	display: inline-block;
	width: 180px;
	line-height: 24px;
	border: 1px solid;
	border-color: #4b4a5a;
	font-size: 90%;
	text-indent: 1em;
	margin-left: 60px;
}

h2::before{
	position: absolute;
	content:"";
	display: inline-block;
	width: 1em;
	height: 1em;
	background:url("../img/common/h2_before.png") no-repeat;
	background-size: contain;
	margin-left: -1.5em;
	margin-top: 0.3em;
}

b{font-size: 200%}

.pink{color: #f87799}
.green{color: #5bd158}
.orange{color: #ff852b}
.cyan{color: #67c4f4}
.blue{color: #3388c3}
.red{color: #ff6600}
.purple{color: #d35ec9}

.btn-na{opacity: 0.5}

/*slick*/
.slider{
}

.slick-slide img:not(.not_slide){
	width: 100%;
	height: 100%;
}

    .slick-slide {
      padding: 5px 20px;
    }




.slick-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
	margin-left: 40px;
}
.prev-arrow {
  left: 0;
  z-index: 5;
}
.next-arrow {
  right:  0;
}

.slick-dots{
	right:-25px!important;
}

/*****************
	header
******************/

header{
width: 100%;
height: 100px;
top: 0;
position:fixed;
margin-left: 40px;
z-index: 10;
}

header.scroll-nav{
width: 100%;
height: 100px;
background-color: #d167da;
margin-left: 40px;
opacity: 0.9;
top: 0;
position:fixed;
z-index: 10;
transition: 0.5s;
}

.header_wrap{
	width: 1024px;
	margin: 0 auto 0;
}

.header_inner{
	float: left;
	padding-left: 50px;
	padding-top: 10px;
 	filter: drop-shadow(2px 2px 2px #7b7a7a);
}

.list_globalnavi{
	display: flex;
	justify-content:center;
}

.list_globalnavi li{
	margin-right: 40px;
	margin-top: 30px;
	font-size: 100%;
	text-shadow: #000 1px 0 10px;
}

.btn_twitter{
	float: right;
	margin-top: -34px;
	padding-right: 40px;
}

.globalnavi_item a{
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.globalnavi_item a::after{
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #fff;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
}

.globalnavi_item a:hover::after{
	transform: scale(1, 0.9);
}


/*****************
	mv
******************/

.mv_wrapper{
	width: 100%;
	margin-top: -15px;
}

.mv_wrapper::after{
	content: "";
	position:relative;
	display: block;
	width: 100%;
	height: 46px;
	pointer-events: none;
	background-image: url("../img/common/wave-bottom.png");
	background-repeat: repeat-x;
	background-position:top center 50%;
	margin-top: -46px;
	z-index:5;
}

.mv_bg{
	height: 893px;
	background-size: cover;
	background-image: url("../img/top/top-bgimage.png");
}

.svg_bg{

}



.mv_image{
	background-image: url("../img/top/mv-image.png");

	width: 1200px;
	height: 893px;
	margin: 0 auto 0;
}


.list_mv{
	display: flex;
	width: 1000px;
	height: 240px;
	padding-top: 500px;
	justify-content: flex-end;
}

.mv_inner{
	padding-top: 580px;
	padding-left: 150px;
}

.mv_inner img{
	 	filter: drop-shadow(2px 2px 2px #7b7a7a);
}

.top_logo{
	width: 413px;
	margin: 0 auto;

}


/*big-banner*/
.big-banner{
	width: 900px;
	margin: 0 auto 0;
}

.list_big-banner{
	display: flex;
	margin-left: 20px;
	padding-top: 20px;
}

.list_big-banner img{
	width: 400px;
	height: 100px;
}

.list_big-banner img:hover{
	transform:scale(1.2,1.2);
	transition: 0.5s;
}

.list_big-banner li{
	padding-right: 10px;
}



/*****************
	infor
******************/

.infor_wrapper{
	width: 900px;
	margin: 0 auto 0;
	text-align: center;
	padding-top: 40px;
}

.infor_wrapper h1{
	margin-left: 20px;
}

.list_history{
	position: relative;
	text-align: left;
	width: 900px;
	height: 185px;
	margin-top: 20px;
	border-top: solid;
	border-bottom: solid;
	border-width:1px;
	overflow: hidden;
}

.history_item{
	height: 55px;
	width: 855px; 
	padding-top: 3px;
	border-top: solid;
	border-bottom: solid;
	border-width:1px;
	border-color: #d3d3d3;

}

time{
	float:left;
	color: #7b7a7a;
	margin-right: 90px;
	margin-top: 14px;
}

.list_topic{
	clear: both;
	display: flex;
	width: 1000px;
	margin-left: -50px;
	margin-top: 30px;
	padding-bottom: 20px;
}

.topic_item img{
	box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}

.history_item a{
	color: #595959;
	text-decoration: underline;	
}

/*****************
	product
******************/

.product{
	margin-top: 100px;
	text-align: center;
}

.product::before{
	content: "";
	position:relative;
	display: block;
	width: 100%;
	height: 46px;
	pointer-events: none;
	background-image: url("../img/common/wave-top.png");
	background-repeat: repeat-x;
	background-position:top;
	margin-top: 92px;
	z-index:5;
}

.product::after{
	content: "";
	position:relative;
	display: block;
	width: 100%;
	height: 46px;
	pointer-events: none;
	background-image: url("../img/common/wave-bottom.png");
	background-repeat: repeat-x;
	background-position:top center 50%;
	margin-top: -46px;
	z-index:5;
}
.product_bg{
	width: 100%;
	height: 921px;
	background-image: url("../img/product/product-bg01.png");
	background-size: cover;
	margin-top: -46px;
	padding-top: 100px;
}

.product_bg h2{
	margin-bottom: 40px;
	margin-left: 35px;
}

.list_tabs{
	display: flex;
	width: 1000px;
	margin: 0 auto 0;
	padding-left: 160px;
	clear: both;
}

.list_tabs li{
	width:140px!important;
	font-size: 110%;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.slide_wrap{
	width: 1000px;
	margin: 0 auto 0;
	padding-left: 50px;
	padding-bottom: 100px;
}

.about{
	margin-top: 80px;
	display: flex;
}

.about_copy{
	font-family: フォーク M;
	font-size: 100%;
	font-weight: bold;
	line-height: 2.5em;
}

.about_copy span{
	background: linear-gradient(transparent 0%, #FFF 0%);
}

.about_description{
	padding-top: 20px;
	line-height: 80%;
	font-weight: bold;
 	filter: drop-shadow(2px 2px 0px #FFF);
}

.lineup{
	margin-top: 50px;
}

.lineup_description{
	line-height: 30%;
	 	filter: drop-shadow(2px 2px 0px #FFF);
}

.lineup_items{
	display: flex;
	margin-top: 50px;
}

.lineup_item{
	margin-right: -40px;
}

figcaption{
	text-align: center;
	line-height: 250%;
	width: 210px;
	margin: 0 auto 0;
	border-bottom: solid;
	border-width:1px;
	border-color: #d3d3d3;
}

.story{
	margin-top: 50px;
}

.story_logo{
	width: 296px;
	height: 57px;
	background-image: url("../img/product/product-logo.png");
	margin: 0 auto 0;
}

.story_description{
	margin-top: 80px;
	line-height: 50%;
	filter: drop-shadow(2px 2px 0px #FFF);
}


.scene{
	margin-top: 50px;
}

.scene_description{
	line-height: 30%;
	 filter: drop-shadow(2px 2px 0px #FFF);
}

.list_scene{
	padding-top: 40px;
	padding-right: 30px;
	line-height: 200%;
}

.list_scene li{
	border-bottom: 1px solid #d3d3d3;
	width:350px;
	margin: 0 auto;
	font-weight: bold;
	 filter: drop-shadow(2px 2px 0px #FFF);
}

/*****************
	character
******************/

.character{
	text-align: center;
	width: 1000px;
	margin: 0 auto 0;
	padding-top: 50px;
	padding-bottom: 50px;
}

.list_chara{
	position: relative;
	width: 320px;
	padding-top: 50px;
	margin-left: 0px;
	z-index: 5;
}

.list_chara li{
	padding-right: 20px;
	cursor: pointer;
}

.list_chara li:hover{
	opacity: 0.5;
	transition: 0.5s;
}

.chara_content{
	text-align: left;
	margin-left: 40px;
}

.chara_slide{
		margin-top: -200px;
}

.chara01_bg{
	background-image: url("../img/character/ch_bg01.png");
	width: 1000px;
	height: 1001px;
	margin: 0 auto;
}

.chara02_bg{
	background-image: url("../img/character/ch_bg02.png");
	width: 1000px;
	height: 1001px;
	margin: 0 auto;}

.chara03_bg{
	background-image: url("../img/character/ch_bg03.png");
	width: 1000px;
	height: 1001px;
	margin: 0 auto;
}

.chara_wrap{
	padding-top: 230px;
	padding-left: 0px;
}

.chara_name{
}

.cast_name{
	padding-top: 5px;
	padding-left: 5px;
	font-size: 125%;
}

.no_heroine{
	width: 180px;
	margin-top: 10px;
	border:1px solid;
	font-size: 90%;
	font-weight: 600;
	text-align: center;
}

.chara_copy{
	clear: both;
	padding-top: 50px;
 	filter: drop-shadow(2px 2px 2px #FFF);
}

.chara_description{
	line-height: 50%;
	padding-top: 20px;
	padding-left: 10px;
}

.voice_wrap{
	margin-top: 50px;
}

.caption{
	display: inline-block;
	text-align: center;
	color: #FFF;
	line-height: 24px;
	width: 167px;
	height: 24px;
	background-color: #4b4a5a;
	border-radius: 5px;
	float:left;
}

.list_voice{
	display: flex;
	width: 300px;
}

.list_voice li{
	margin-right: 5px;
}


/*****************
	gallery
******************/

.gallery{
	width: 1000px;
	margin: 0 auto 0;
	text-align: center;
	margin-bottom: 50px;
}

.gallery h1{
	margin-bottom: 50px;
}

#gallery ul{
	display: flex;
	margin-left: 15px;
}

#gallery li{
}

/*****************
	shop
******************/

.shop{
	width: 1000px;
	margin: 0 auto 0;
	text-align: center;
	margin-bottom: 50px;
}

.shop h1{
	margin-bottom: 50px;
}

.pre-sale_notation{
	margin: 0 auto;
	margin-bottom: -20px;
	color: #FFF;
	font-size: 90%;
	line-height: 23px;
	background-color: #e9436e;
	width: 114px;
	height: 23px;
	border-radius: 5px;
}


.shop_content{
	clear: both;
}


.shop_content h3{
	width: 400px;
	height: 65px;
	margin-left: 300px;
	line-height: 85px;
	border-bottom: 2px solid #4b4a5a;
	display: block;
	color: #4b4a5a;
	font-size: 110%;
	text-align: center;
}

.shop_content ul{
	margin-top: 40px;
	margin-left: 25px;
	display: inline-block;
	color: #4b4a5a;
}

.shop_content li{
	float: left;
	width: 200px;
	height: 50px;
	line-height: 50px;
	color: #4b4a5a;
	border: 1px solid #4b4a5a;
	margin-right: 20px;
	margin-bottom: 15px;
}

.shop_content li a{color: #4b4a5a;}
.shop_content li:hover{
	opacity: 0.5;
	transition: 0.5s;
}

.list_shop_download{
	padding-right: 47px;
}


/*****************
	special
******************/

.special{
	width: 1000px;
	margin: 0 auto 0;
	text-align: center;
	margin-bottom: 100px;
}

.special_tabs{
	width: 1000px;
	margin: 0 auto 0;
	padding-left: 85px;
}

.special_tab_item{
	width: 200px;
	height: 65px;
	line-height: 85px;
	margin-right: 15px;
	border-bottom: 2px solid #e5e5f1;
	display: block;
	float:left;
	color: #4b4a5a;
	font-size: 110%;
	text-align: center;
	transition: all 0.2s ease;
	cursor: pointer;
}

.special_tab_item:hover{
	opacity: 0.8;
}

input[name="special_tab_item"]{
	display: none;
}

.special_content{
  display: none;
  clear: both;
  overflow: hidden;
  margin-left: -50px;
}

#campaign:checked ~ #campaign_content,
#privilege:checked ~ #privilege_content,
#trial:checked ~ #trial_content,
#for-sns:checked ~ #for-sns_content {
  display: block;
}

.non_active{pointer-events: none;
	color: #e5e5f1;
}

.special_tabs input:checked + .special_tab_item {
	border-bottom: 2px solid #4b4a5a;
}

/*campaign*/

#campaign_content{
	text-align: center;
	padding-top: 40px;
	padding-right: 100px;
}

#campaign_content h3{
	display: inline-block;
	border-bottom: 4px dotted #4b4a5a;
}

.campaign_image img{
	width:300px;
	height: auto;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}

.campaign_description{
	line-height: 50%;
}

.campaign_description h4{
	display: inline-block;
	font-size: 90%;
	margin-top: 20px;
	color: #FFF;
	background-color: #4b4a5a;
	width: 80px;
	height: 20px;
	line-height: 160%;
}

.campaign-link{
	padding-top: 15px;
	padding-bottom: 15px;
}

.campaign_description a{
	color: #f87799;
	text-decoration: underline;
}

.ci-en{
	margin-top: 30px;
	text-align: center;
}

/*privilege*/

#privilege_content{
	text-align: left;
	padding-top: 40px;
	padding-right: 150px;
}

.privilege_image{
	float: left;
}

.privilege_title{
	font-size: 180%;
	border-bottom: 1px solid #4b4a5a;
}

.privilege_description{
	line-height: 50%;
	padding-top: 20px;
}

.privilege_notation{
	color: red;
}

.btn_sample{
	float: right;
	padding-top: 30px;
}

#trial_content{
	margin-left: -140px;
}

.trial_pv{
	padding-top: 30px;
}

.trial_list{
	margin-left: -35px;
}

.trial_h{
	display: inline-block;
	width: 200px;
	height: 24px;
	background-color: #e75b2a;
	color: #FFF;
	line-height: 180%;
}

.trial_list a{
	color: #f87799;
	text-decoration: underline;
}

/*for-sns*/

#for-sns_content{
	text-align: center;
	padding-top: 40px;
	padding-right: 110px;
}

.sns_description{
	line-height: 50%;
	padding-bottom: 30px;
}

.list_twicon{
	display: flex;
	margin-left: 100px;
}

.list_twicon li{
	padding-right: 20px;
}
.list_twicon li img{
	    border-radius: 50%;
		object-fit: cover;
}

.list_twheader{
	margin-top: 40px;
}

/*****************
	spec
******************/

.spec{
	width: 1000px;
	margin: 0 auto 0;
	text-align: center;
	padding-bottom: 80px;
}

.spec h1{
	margin-bottom: -100px;
}

.spec_bg{
	width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	background-repeat: no-repeat;
	background-image: url("../img/spec/spec_bg.png") ;
	background-size: contain;
	margin-top: 100px;
	margin-left: -100px;
}

.spec_content{
	margin-top: -80px;
	margin-left: 100px;
	text-align: left;
	line-height: 300%;
	padding: 150px;
}

.spec_content dt{
	float: left;
	font-size: 70%;
	font-weight: bold;
	padding-left: 20px;
	}

.spec_content dd{
	font-size: 80%;
	margin-left: 400px;
}

.underline{
	width: 700px;
	border-bottom: 1px solid #aaaaaa;
}


/*****************
	footer
******************/

footer{
	width: 100%;
	color: #FFF;
}

footer::before{
	content: "";
	position:relative;
	display: block;
	width: 100%;
	height: 46px;
	pointer-events: none;
	background-image: url("../img/common/wave-bottom@footer.png");
	background-repeat: repeat-x;
	background-position:top center 50%;
	margin-top: -91px;
	z-index:5;
}

.footer-wrapper{
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #d167da;
	
}

.footer-wrapper img{
	margin-bottom: 20px;
	margin-left: 0px;
}