@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Merriweather:700&display=swap');
/* CSS Document */

.topWrap{
	border-bottom: #000 3px solid;
	margin-bottom: 3px;
}
#top .topImg{
	width: 75%;
	float:right;
	position: relative;
	text-align: right;
} 

#top .topImg .catch{
	width: 12.4%;
	max-width: 119px;
	position: absolute;
	left:12%;
	top:5%;
	opacity: 0;
	transition: all 1000ms 0.5s ease;
	transform: translateY(-30px);
}
#top.main.action .topImg .catch{
	transform: translateY(0px);
	opacity: 1;
}
#top .sideBox{
	width: 25%;
	padding: 0.5em 0;
}
#top h1{
	padding: 0.5em;
	text-align: center;
	width:100%;
}
#top h1 img{
	width:50%;
}

#topNavi{
	background-image: url(../img/navi_bg.png);
	background-position:left center;
	background-repeat: no-repeat;
	background-size:auto 100%;
	padding: 4em 0 3em;
}
#topNavi nav a .new{
	text-shadow: none;
	font-size: 12px;
	margin-left: 5px;
	background-color: #fd5474;
}

#topNavi nav a{
	font-family: 'Merriweather', serif;
	display: block;
	color: #000;
	padding: 1em 2em 0;
	position: relative;
}
#topNavi nav a:after{
	content: "";
	border-bottom: #fff 1px solid;
	width: 0%;
	display: block;
	position: absolute;
	bottom:0;
	left:0;
	transition: all 300ms 0s ease;
}
#topNavi nav a:hover{
	color: #fff;
	
}
#topNavi nav a:hover:after{

	width: 50%;
}

#news{
	width: 96%;
	max-width: 282px;
	margin: 0.5em auto;
	border: #000 1px solid;
	border-left: #000 3px solid;
	border-bottom: #000 3px solid;
	background-image: url(../img/news_bg.jpg);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 25% auto;
	font-size: 12px;
	line-height: 1.5em;
}
.newsBox{
	overflow-y: auto;
	max-height: 8em;
	padding: 0.5em 1em;

}

#news dl{
	padding: 0.5em 0;
}
#news dt{
	font-weight: bold;
}
#news a{
	color: #000;
}
#news a:hover{
background-color: #ccc;
}
.sideBanner{
	width: 96%;
	max-width: 282px;
	margin: 0.5em auto;

}
.sideBanner a{
	width: 100%;
	margin: 3px auto;
	border: #000 2px solid;
	display: block;
}





/*---------------------------------------------------------
Edited Story Contents
------------------------------------------------------------*/
.story {
	text-align: center;
	margin: 10px 0;
	border: #000 1px dashed;
	background-color: #e2e2e2;
	width: 85%;
	margin: 0 auto;
}
.story h2 {
	font-size: max(1.5vw, 16px);
	margin-top: 20px;
}
.story p {
	margin: 30px 0;
	font-family: "Times New Roman", "serif";
	font-size: max(1.4vw, 16px);
	line-height: 1.2em;
}

.storyWrap .txtBox .txt{
	font-size: max(1.5vw, 16px);
	}



/*---------------------------------------------------------
Edited Gallery Contents
------------------------------------------------------------*/
.gallery {
	text-align: center;
	margin: 10px 0;
	margin-top:40px!important;
	border: #000 1px dashed;
	background-color: #e2e2e2;
	width: 85%;
	margin: 0 auto;
	padding-bottom: 30px;
}
.gallery h2 {
	font-size: max(1.5vw, 16px);
	margin-top: 20px;
	margin-bottom: 30px;
}
.gallery img {
	width: 145px;
	margin: 5px 1px;
	border: #000 1px solid;
}
.gallery a:hover{
		opacity: 0.7;
}
.gallery p {
	margin-top: 35px!important;
	background-color: #cccccc;
	width: 95%;
	margin: 0 auto;
	font-size: 16px;
}

/*---------------------------------------------------------
Edited Product Contents
------------------------------------------------------------*/
.product{
	padding: 1em 0;
	margin-top:40px!important;
	margin-bottom:50px!important;
	background-color: #e2e2e2;
	border: #000 1px dashed;
	width: 85%;
	margin: 0 auto;
}
.product .productTitle{
	width: 28%;
	display: inline-block;
	vertical-align: middle;
}

.product h2{
	font-size: max(1.5vw, 16px);
	margin-bottom: 10px;
}
.product .box{
	width: 100%;
	display: inline-block;
	vertical-align: middle;
	margin-top: 30px;
	margin: 0 auto;
}
.product .box .jacket{
	width: 30%;
	display: inline-block;
	vertical-align: middle;
}
.product .box .specBox{
	width: 50%;
	display: inline-block;
	vertical-align: middle;
	padding: 1em;
	font-size: 12px;
	line-height: 1.5em;
}
.product .box .specBox dt{
	width:10em;
	float: left;
	font-weight: bold;
	font-size: max(1.2vw, 14px);
	line-height: 1.5em;
	text-align: right;
}
.product .box .specBox dd{
	margin-left: 11em;
	font-size: max(1.2vw, 14px);
	line-height: 1.5em;
}


.product table {
	width:75%;
	border-collapse: collapse;  /* セルの間隔を空ける */
    border-spacing: 0 0;  /* 左右 上下で記述 */
	margin: 0 auto;
	margin-bottom:20px;
	margin-top: 10px;
}
.product table td {
	box-sizing: border-box;
	background-color: #fff;
	border: solid 1px #575757;
	border-collapse: collapse;
	padding: 0.5%;
	 text-align:center;
	font-size: max(1vw, 15px);
}

.product table img{ vertical-align: bottom; margin-bottom: 2px; width: 80%;}

@media (max-width: 600px) {

	
.product table {
		width:90%;
	}
}


/*---------------------------------------------------------
Preorder - Buy
------------------------------------------------------------*/
#buyBox table {
	width:75%;
	border-collapse: collapse;  /* セルの間隔を空ける */
    border-spacing: 0 0;  /* 左右 上下で記述 */
	margin: 0 auto;
	margin-bottom:50px;
	margin-top: 30px;
}
#buyBox table td {
	box-sizing: border-box;
	background-color: #fff;
	border: solid 1px #575757;
	border-collapse: collapse;
	padding: 1%;
	 text-align:center;
	font-size: max(1.3vw, 15px);
}
#buyBox table td h4 { color:black; }
#buyBox table img{ vertical-align: bottom; margin-bottom: 2px;}
#buyBox table td del{ color: #999999; font-size: max(1.1vw, 12px);}
#buyBox table td span{ font-size:15px;}
#buyBox table a { color:#FFF; text-decoration:none;}
#buyBox table a:hover{filter: brightness(110%);}
#buyBox table td.lnk_btn { font-size: max(1.1vw, 12px); padding:3% 0%; color:#8f8f8f;}
#buyBox table td.lnk_btn a{ background-color:#4a4a4a; padding:2% 30%;}
#buyBox table td.lnk_btn_sm { font-size: max(1.3vw, 12px); padding:3% 0%;}
#buyBox table td.lnk_btn_sm a { background-color:#4a4a4a; padding:3% 25%;}
#buyBox table td.lnk_btn_lng {background-color:#4a4a4a; font-size: max(1.3vw, 12px); padding:3% 0%;}
#buyBox table td.lnk_btn_lng a { background-color:#4a4a4a; padding:3% 20%;}
#buyBox table td.gry_bg { background-color: #161616; color:#999999}
#buyBox table td.shop_logo img{ width:70%; min-width: 90px; background-color: #FFF; padding: 0 10px; margin-top:8px;}
#buyBox table h4{ font-weight:bold; margin: 15px 0 15px 0; color:#fff; font-size: max(1.5vw, 15px);} 

#buyBox table ul { vertical-align:top;}
#buyBox table ul li { text-align:left; margin-left:20px; font-size: max(1.1vw, 10px);}

#buyBox .pro_header { font-size:max(1.1vw, 14px); color:#000;}
#buyBox .pro_header span { font-size: 12px;}

.back_btn a {
	position: absolute!important;
	left:1%; top:10%;
	cursor: pointer!important;
	z-index: 99999;
	width: 10.7%;
	min-width: 120px;
}
.back_btn a:hover{
	filter: brightness(105%);
}


@media (max-width: 600px) {

	
#buyBox table {
		width:100%;
	}
}


/*---------------------------------------------------------
ムービー
------------------------------------------------------------*/

.movieWrap{
padding: 2em;
text-align: center;
}
#special .movieBox{
	width:49%;
	margin:1em 0.5% 0;
	display:inline-block;
	vertical-align:top;
	background-color:#000;
	color: #fff;
}
.movieBox .txt{
	text-align:center;
	padding:5px 0;
	font-size:12px;
}
/*---------------------------------------------------------
ギャラリー
------------------------------------------------------------*/
#cgNavi a{
	width: 7.19%;
	margin: 3px 0.25%;
	border: #000 1px solid;
	display: inline-block;
	vertical-align: top;
	position: relative;
	outline: none;
	opacity: 0.5;
}
#cgNavi a:hover{
	opacity: 0.7;

}
#cgNavi a.selected{
	opacity: 1;
}
.cgBox{
	width: 96%;
	margin: 0 auto;
	max-width: 802px;
	border: #000 1px solid;
}
.cgTxt{
	width: 96%;
	margin: 0.5em auto 2em;
	max-width: 802px;
	padding: 1em;
	background-color: #000;
	color: #fff;
}
.cgTxt .txtBox{
	padding: 1em;
}
.cgTxt dl.txtBox dt{
	width: 7em;
	float: left;
}
.cgTxt dl.txtBox dd{
	margin-left: 7em;
	text-indent: -1em;
}
.heroine{color:#ffbab0;}
.shin{color:#fa5454;}
.ikki{color:#829cfb;}
.kent{color:#60b855;}
.toma{color:#ff9f54;}
.ukyo{color:#cd86eb;}

.orion{color:#ddd;}
/*---------------------------------------------------------
製品情報
------------------------------------------------------------*/
.infoWrap{
	padding: 2em;
}
.infoBox{
	padding: 1em 0;
}
.infoBox .jacket{
	width: 70%;
	max-width: 500px;
	text-align: center;
	margin: 0 auto;
	padding: 1em 0;

}
.infoBox .txtBox{
	width: 100%;
	max-width:600px;
	margin: 0 auto;
	font-size: 16px;
	padding: 1em 0 0.5em;
	border-top: #000 1px solid;

}
.infoBox .txtBox dt{
	width: 30%;
	padding: 0.05em 0.5em;
	text-align: right;
	float: left;
	font-weight: bold;
	font-size: 
}
.infoBox .txtBox dd{
	margin-left: 30%;
	padding: 0.05em 1em;
	margin-bottom: 0.5em;
	border-left: #ccc 3px solid;
}
.bonusBox{
	width: 96%;
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 2em;
}
.bonusBox strong{
	display: block;
	background-color: #000;
	color: #eee;
	padding: 0.5em 1em;
	margin-bottom: 0.5em;
}
/*---------------------------------------------------------
@media
------------------------------------------------------------*/
@media (max-width: 978px) {
}

@media (max-width: 786px) {
#top h1 img{
	width:80%;
}

	#topNavi{
	display: none;
	}
	#top .topImg{
		width: 100%;
		float:none;
	} 
	#top .sideBox{
		width: 100%;
	}
	
	.bannerArea a{
		width: 49%;
	}

	#news{
		width: 96%;
		max-width:none;
		background-size: 11% auto;
	}
	.product { 
		width: 90%;
		padding:10px 10px;
	}
	.product .productTitle{
		width: 100%;
		display:block;
		vertical-align: top;
	}
	.product .box{
		width: 96%;
		display: block;
		vertical-align: top;
		margin: 0 auto;
	}
	.product .box .jacket{
		width: 50%;
	}
	.product .box .specBox{
		width: 50%;
	}
	/*ストーリー*/
	.story { 
		width: 90%;
		padding:10px 15px;
	}
	
	.storyWrap h3{
		font-size: 16px;
	}
	.storyWrap .storyBox{
		padding: 1em;
	}
	.storyWrap .storyBox .txt{
		font-size: 12px;
		padding: 0.5em 0.5em 0;
	}
	.storyWrap .txtBox{
		padding: 1em ;
	}

	.storyBox strong{
		font-size: 100%;
	}

	/*キャラクター*/
	.charaImg{
		width: 100%;
		max-width: 656px;
		margin:0 auto;
	}
	.chOver{
		width: 96%;
		max-width: 492px;
		position:relative;
		top:0;
		left:0;
		margin: 0 auto;
		padding-bottom: 1em;
	}
	#chNavi a{
		width: 13.78%;
	}
	/*システム*/
	.sysWrap h3{
		font-size: 18px;
	}
	#touch.sysBox .txt.float,#touch.sysBox .img.float{
		width: 100%;
		display: block;
	}
	#touch.sysBox .txt.float{
		padding-bottom: 0;
	}

	/*ギャラリー*/
	#cgNavi a{
		width: 13.78%;
	}
	/*製品情報*/
	.infoBox .txtBox{
		width: 100%;
	}
.infoBox .txtBox dt{
	width: 40%;
	}
.infoBox .txtBox dd{
	margin-left: 40%;
	}
}
@media (max-width: 480px) {
	.product .box .jacket{
		width: 70%;
		display: block;
		margin: 0 auto;
	}
	.product .box .specBox{
		width: 100%;
		display: block;
		font-size: 3vw;
	}
		.bannerArea a{
			width: 100%;
			margin: 2px 0;
			display: block;
		}

	/*ストーリー*/
	.storyWrap h3{
		font-size: 3.3vw;
	}
	.storyWrap .storyBox .txt{
		font-size: 3vw;
	}

	
	/*キャラクター*/
	.chTxt{
		font-size: 3vw;
	}
		
	.sampleVoice .playBT{
		font-size: 2.8vw;

	}
	#chNavi a .new{
		font-size: 2.8vw;
	}


	/*システム*/
	.sysWrap h3{
		font-size: 4vw;
	}
	
		#love.sysBox .txt.float,#love.sysBox .img.float,
		#work.sysBox .txt.float,#work.sysBox .img.float{
		width: 100%;
		display: block;
	}
	#love.sysBox .txt.float,
	#work.sysBox .txt.float{
		padding-bottom: 0;
	}

	/*製品情報*/
	.infoBox .txtBox{
		width: 100%;
		max-width: none;
		font-size: 3vw;
	}
	/*サウンド*/
	.songTitle{
		font-size: 4vw;
	}
		/*スペシャル*/

#special .movieBox{
	width:100%;
	margin:1em auto;
	display:block;
}


}