@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat');
/* CSS Document */
#topArea{
	width: 100%;
	background-image: url(../img/top.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: relative;
}
.topBox{
	width: 40%;
	position:absolute;
	margin-left: auto;
	padding: 1em 0;
	top:50%;
	right:0;
	z-index: 1;
}
.topBox .logoArea{
	width: 54%;
	margin: 1.5em auto 1em;
}
.topBox .logoArea a.store{
	width: 90%;
	padding: 3px;
	background-color: #e51818;
	color: #fff;
	text-align: center;
	display: block;
	margin: 0.5em auto;
	transition: all 300ms 0s ease;
	 transform: scale(1);
}
.topBox .logoArea a.store:hover{
	 transform: scale(0.95);

}
.topBox .logoArea a.store .txt{
	display: block;
	border: #fff 1px solid;
	padding: 1em;
	overflow: hidden;
	position: relative;
	font-size: 0.8em;
	line-height: 1.5em;
}
.topBox .logoArea a.store .txt:after{
	content: "";
	width: 2em;
	height: 2em;
	margin-bottom: -1em;
	margin-left: -1em;
	text-align: center;
	position: absolute;
	display: block;
	background-color: #fff;
	transform: rotate(45deg);
	left:0;
	bottom:0;

}
#topArea .catch{
	width: 100%;
	position: absolute;
	left:0;
	top:0;
}
#topArea .catch img.catch1{
	width: 40%;
	bottom:0.5em;
	left:0.5em;
	position: absolute;

}
#topArea .catch img.catch2{
	width: 50%;
	position: absolute;
	top:1em;
	right:0.5em;
}

#news{
	width: 100%;
	padding: 0;
	background-color: #000;
	position: absolute;
	bottom:0;
	background: linear-gradient(90deg, rgba(129, 244, 254,0.88) 20.181414714494878%,rgba(128, 243, 254,0.88) 20.181414714494878%,rgba(119, 197, 254,0.88) 80.18324487554904%);
	border-bottom: #031c59 2px solid;
}

#news .newsBox{
	padding: 0.2em 1em 0.4em;
	padding-left: 15%;
	position: relative;
}
#news .newsBox:before{
	content: "News";
	width: 14%;
	font-weight: bold;
	position: absolute;
	display: block;
	left:0;
	top:50%;
	height: 1em;
	margin-top: -0.7em;
	z-index: 2;
	padding: 0 1em;
	color: #fff;
}
#news .newsBox:after{
	content: "";
	width: 14%;
	position: absolute;
	display: block;
	left:-1em;
	top:0;
	bottom:0;
	background-color: #031c59;
	transform:skewX(15deg);
	z-index: 1;

}
#news dl{
	font-size: 0.8em;
	padding: 0.3em 0 0;
	position: relative;
	z-index: 5;
}
#news dt{
	width: 6em;
	float: left;
	font-weight: bold;
}
#news dd{
	margin-left: 7em;

}
.newsBox dd a{
	color: #031951;
	padding: 0 0.5em;
	margin: 0 2px;
	font-weight: bold;
	border-bottom: #031951 1px dashed;
	display: inline-block;
	vertical-align: top;
	position: relative;
	z-index: 1;
	
}
.newsBox dd a:hover{
	color: #fff;
}

.newsBox dd a:after{
	content:"";
	width:0;
	top:0;
	left:0;
	bottom:-1px;
	background-color:  #031951;
	display:block;
	position:absolute;
	transition: all 0.2s 0s ease-out;
	z-index: -1;
}
.newsBox dd a:hover:after{
	width:100%;
}
#bannerArea{
	background-color: #3c538b;
	padding: 0.5em 1em;
	text-align: center;
}
#bannerArea a{
	width: 24%;
	max-width: 303px;
	margin: 0.2em 0.5%;
	display: inline-block;
	vertical-align: top;
	transition: all 300ms 0s ease;
	opacity: 1;
	position: relative;
}
#bannerArea a:hover{
	opacity: 0.7;
}
	#bannerArea a.new:before{
	content: "new";
	font-family: 'Fjalla One', sans-serif;
	color: #FFC83E;
	position: absolute;
	background-color: #000;
	font-size: 0.8em;
	padding: 0 0.5em;
	line-height: 1.3em;
	}
#bannerArea a.tokusouBn2{
display: none;
}
#productInfo{
	background-image: url(../img/bg_blue_st.png);
	background-position: center;
	background-repeat: repeat-y;
	padding: 0.5em 0 8em;
}
#productInfo h2{
	height: 52px;
	width: 100%;
	background-image: url(../img/product_title.png);
	background-position: center;
	background-repeat: no-repeat;
	display: block;

}
#productInfo h2 span{
	opacity: 0;

}
#productInfo .img{
	width: 35%;
	max-width: 250px;
	display: inline-block;
	vertical-align:middle;
	text-align: center;
}
#productInfo .txt{
	width: 65%;
	display: inline-block;
	vertical-align:middle;
	padding: 1em;
	position: relative;
	text-align: left;
}
#productInfo a.infoBt{
	width: 7em;
	height: 7em;
	margin-top: -6em;
	position: relative;
	margin-left: auto;
	display: block;
	transition: all 300ms 0s ease;
	 transform: scale(1);

}
#productInfo a.infoBt:hover{
	 transform: scale(0.9);

}
#productInfo a.infoBt:before{
	content: "";
	width: 7em;
	height: 7em;
	display: block;
	background-color: #e4b71c;
	transform: rotate(45deg);
	position:absolute;
}
#productInfo a.infoBt:after{
	content: "";
	width: 6.7em;
	height: 6.7em;
	display: block;
	transform: rotate(45deg);
	position:absolute;
	left:0.3em;
	bottom:0;
	border-left: #031c59 2px solid;
	border-bottom: #031c59 2px solid;
}
#productInfo a.infoBt span{
	width: 100%;
	height: 1em;
	margin-top: -0.6em;
	position: absolute;
	top:50%;
	text-align: center;
	color: #031c59 ;
	font-weight: bold;
}
/*---------------------------------------------------------
ストーリー
------------------------------------------------------------*/
#world .txt{
	text-align: center;
	padding: 2em 1em 1.5em;
	line-height: 1.6em;
}
#story .txt{
	line-height: 1.8em;
	font-weight: 400;
}
#gensaku .txt img{
	width: 32.3%;
	margin: 1.5em 0.5% 0;
	display: inline-block;
	vertical-align: top;
}
/*---------------------------------------------------------
キャラ
------------------------------------------------------------*/
.chWrap{
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 5em;
}
.chWrap h2{
		background-color:#031c59;
		font-size: 2em;
		line-height: 1.3em;
		background-image: url(../img/bg_blue_st_second.png);
		background-position: center;
		background-size: 0.694em auto;
		padding: 1em 0.5em;
		position: relative;
		font-weight: 700;
		color: #2eeef3;
		text-align: center;
		margin-top: 2em;
		border-top: #031c59 1px solid;
		border-bottom: #031c59 1px solid;
}
.chWrap h2:first-child{
	margin-top: 0.5em;
}
.chWrap h2:after{
	content: "";
	width: 80%;
	margin-left: -40%;
	top:0;
	bottom:0;
	position: absolute;
	left:50%;
	background-color: #031c59;
	display: block;
	transform: skewX(-45deg);
}
.chWrap h2.red{
	color: #fff;
	background-color: #c81b1b;
	border-top: #c81b1b 1px solid;
	border-bottom: #c81b1b 1px solid;
	background-image: url(../img/bg_white_st_second.png);

}
.chWrap h2.red:after{
	background-color: #c81b1b;
}

.chWrap h2 span{
	position: relative;
	z-index: 2;
}

.chNavi{
	width: 100%;
	position:relative;
}
.subfixed{
	position: fixed;
	top:4em;
}
.chBox{
	padding: 2em;
	position: relative;
	min-height: 40em;
	/*min-height: 500px;*/
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 75% auto;
	border-bottom: #031c59 0.3em solid;
}
.chTxtArea{
	width: 55%;
	
}
.chBox a.popup{
	width: 100%;
	display: block;
	border: #000 2px solid;
	margin-top: 0.5em;
}
.chTxtArea .txt{
	background: rgba(0,0,0,0.86);
	padding: 0.5em;
	color: #fff;
	font-size: 0.85em;
}
/*---------------------------------------------------------
ムービー
------------------------------------------------------------*/
.movieWrap{
	text-align: center;
}
#movie .movieBox{
	width:32.3%;
	margin:10px 0.5%;
	display:inline-block;
	vertical-align:top;
	background-color:#000;
	color: #fff;
}
.movieBox .txt{
	text-align:center;
	padding:5px 0;
	font-size:12px;
}
.movieBox .txt.new:before{
	content: "new";
	font-family: 'Fjalla One', sans-serif;
	color: #FFC83E;
	margin-right: 0.5em;
}
.movieWrap .ryuLink{
	max-width: 502px;
	margin: 2em auto 0;
}
.movieWrap .ryuLink strong{
	padding: 0.5em;
	background-color: #000;
	color: #fff;
	display: block;
	font-weight: normal;
	font-size: 0.8em;
	margin-bottom: 0.3em;
}
.movieWrap .ryuLink a img{
	border: #000 1px solid;

}
.movieWrap .ryuLink a{
	transition: all 300ms 0s ease;
	opacity: 1;
}
.movieWrap .ryuLink a:hover{
	opacity: 0.7;
}
/*---------------------------------------------------------
システム
------------------------------------------------------------*/
#system .baseBox .txt{
	text-align: center;
	padding: 1em;
}
#system .sysMovie{
	width:100%;
	position: relative;
}
.youtube{
	position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
}
.youtube-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#system .baseBox h3{
	text-align: center;
	font-size: 1.8em;
	padding: 1em 1em 0.3em;
	line-height: 1.3em;
	color: #e4b71c;
	font-weight: 700;
	border-bottom: #e4b71c 1px dashed;
}
#system .movieBox{
	width:100%;
	margin:0;
	display:block;
	background-color:#000;
}
#system img.ss{
	width: 50%;
	display: inline-block;
	vertical-align: top;
}
/*---------------------------------------------------------
ギャラリー
------------------------------------------------------------*/
#gallery .cgWrap a{
	width: 19%;
	max-width: 263px;
	margin: 10px 0.5%;
	border: #000 2px solid;
	display: inline-block;
	vertical-align: top;
	position: relative;
	outline: none;
	overflow: hidden;
}
#gallery .cgWrap a:hover{
	border:#34fbff 2px solid;
}
#gallery .cgWrap a img{
	transition: all 300ms 0s ease;
	 transform: scale(1);
}
#gallery .cgWrap a:hover img{
	transform: scale(1.2);

}

/*---------------------------------------------------------
サウンド
------------------------------------------------------------*/
.songBox{
	text-align: center;
	padding: 2em;
	border-bottom: #6c6c6c 1px dashed;
}
.songBox h3{
	padding: 0.1em 0.5em;
	display: inline-block;
	background-color: #2ddee3;
	color: #000;
	font-weight: bold;
}
.songTitle{
	font-size: 3em;
	color: #2ddee3;
	line-height: 1.5em;
}
.cdWrap{
	padding: 1em 0;
}
.cdWrap h3{
	padding: 0.5em 1em;
	background-color: #2ddee3;
	color: #000;
	font-weight: bold;
}
.cdWrap .txt{
	padding: 1em;
}
.cdBox{
	padding: 1em;
	background-color: #353535;
	border: #2eeef3 1px solid;
}
.cdBox .img{
	width: 45%;
	max-width: 477px;
	display: inline-block;
	vertical-align: middle;

}
.cdBox .txt{
	width: 55%;
	display: inline-block;
	vertical-align: middle;
	padding: 1em 2em;
}
.cdBox dl{
	padding: 1em 0;
	margin-left: -0.5em;
}
.cdBox dt{
	width: 6em;
	float: left;
	color: #2ddee3;
}
.cdBox dd{
	margin-left: 6em;
}
.cdBox a{
	color: #2ddee3;
	border-bottom: #353535 1px dashed;
}
.cdBox a:hover{
	border-bottom: #2ddee3 1px dashed;

}
/*---------------------------------------------------------
製品情報
------------------------------------------------------------*/

#spec .specWrap{
	width: 100%;
	padding: 1em;
	max-width: 900px;
	margin: 0 auto;
}
#spec .img{
	width: 35%;
	max-width: 319px;
	display: inline-block;
	vertical-align:middle;
	text-align: center;
}
#spec .txt{
	width: 65%;
	display: inline-block;
	vertical-align:middle;
	padding: 1em;
	position: relative;
	text-align: left;
}
#spec a.infoBt{
	width: 6em;
	height: 6em;
	margin: 1em -1em 0;
	margin-left: 4em;
	position: relative;
	display:inline-block;
	transition: all 300ms 0s ease;
	 transform: scale(1);
	text-align:left;
}
#spec a.infoBt:hover{
	 transform: scale(0.9);

}
#spec a.infoBt:before{
	content: "";
	width: 6em;
	height: 6em;
	display: block;
	background-color: #e4b71c;
	transform: rotate(45deg);
	position:absolute;
}
#spec a.infoBt:after{
	content: "";
	width: 5.7em;
	height: 5.7em;
	display: block;
	transform: rotate(45deg);
	position:absolute;
	left:0.3em;
	bottom:0;
	border-left: #031c59 2px solid;
	border-bottom: #031c59 2px solid;
}
#spec a.infoBt span{
	width: 100%;
	height: 1em;
	margin-top: -0.6em;
	position: absolute;
	top:50%;
	text-align: center;
	color: #031c59 ;
	font-weight: bold;
}
 a.infoBt.new span:before{
	content: "new";
	font-family: 'Fjalla One', sans-serif;
	position: absolute;
	color: #FFC83E;
	top:-1.8em;
	left:-0.5em;
	background-color: #000;
	padding: 0.1em 0.5em 0.1em;
	z-index: 1;
	font-weight: normal;
}
/*予約特典*/
#preorder .img{
	width: 55%;
	display: inline-block;
	vertical-align: middle;
	padding: 1em 0;
	text-align: center;
}
#preorder .txt{
	width: 45%;
	display: inline-block;
	vertical-align: middle;
	padding-left: 1em;
}
#preorder .txt strong{
	 background-color: #2eeef3;
	 padding: 0.5em;
	 display: block;
	 color: #000;
}
#preorder .txt ul.notes{
	font-size: 0.8em;
}
#shop .topTxt{
	font-size: 0.8em;
	padding: 0.5em 0;
	line-height: 1.5em;
}
/*DLC*/
.btArea{
	width: 100%;
}

.btArea a.bt{
	width: 19%;
	max-width: 300px;
	margin: 0.5em 0.5%;
	display: inline-block;
	vertical-align: top;
	border: #fff 1px solid;
}
.btArea a.bt:hover{
	border: #2eeef3 1px solid;
}
#dlc_story .txt,#dlcother .txt{
	padding: 1em;
	text-align: center;
}
#dlcother .txt{
	width: 50%;
	display: inline-block;
	vertical-align: top;
}
#dlcother img{
	width: 50%;
	display: inline-block;
	vertical-align: top;
}
#dlcother .txt hr{
	border: 0;
	border-bottom: #666 1px dashed;
	margin: 1em 0;
}

#dlc_story h3,#dlcother h3{
	text-align: center;
	padding: 1em;
	position: relative;
	font-size: 1.5em;
	color: #2eeef3;
	background-color: #031c59;
	font-weight: 700;
}
#dlc_story h3:after,#dlcother h3:after{
	content: "";
	width: 100%;
	position: absolute;
	display: block;
	top:0.2em;
	bottom: 0.2em;
	left:0;
	border-bottom: #2eeef3 2px solid;
}
.price{
	background-color: #111;
	padding: 1em;
	border-radius: 6px;
	margin-top:0.5em;
	position: relative;
	z-index: 90;
}
.price td.cat{
	width: 5em;
}
.price hr{
	border: 0;
	border-bottom: #333 1px dashed;
}
.price a{
	color: #2eeef3;
	border-bottom: #111 1px dashed;
}
.price a:hover{
	border-bottom: #2eeef3 1px dashed;
}

a.buy{
	width: 100%;
	margin: 0.5em auto;
	padding:0.5em;
	text-align: center;
	display: block;
	border: #2eeef3 1px solid;
	 background-color: #111;
	 color:#2eeef3;
	
}
a.buy:hover{
	text-decoration: none;
	background-color: #2eeef3;
	color: #111;
}

#dlc_story .storyArea,#dlcother .storyArea{
	padding-bottom: 1em;
	margin-bottom: 1em;
}
#dlc_story .mainCharaArea{
	position: relative;
}
#dlc_story .mainCharaArea:after{
	content: "";
	width: 50%;
	top:0;
	bottom:0;
	left:0;
	position: absolute;
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
	background-size:cover;
}
#dlc_story #dlc3 .mainCharaArea:after{
background-image: url(../info/img/dlc/dlc3_ch.jpg);
}
#dlc_story #dlc4 .mainCharaArea:after{
background-image: url(../info/img/dlc/dlc4_ch.jpg);
}

#dlc_story #dlc5 .mainCharaArea:after{
background-image: url(../info/img/dlc/dlc5_ch.jpg);
}

#dlc_story .mainCharaArea .chTxt{
	width: 100%;
	
	padding: 1em;
}
.chTxt .name{
	font-weight: 700;
	border-bottom: #2eeef3 1px solid;
	margin-bottom: 0.5em;
	padding: 0 0 0.5em;

}
#dlc_story .sideBox{
	width: 50%;
	margin-left: auto;
	background-color: #000;
	position: relative;
	z-index: 2;
}
#dlc_story .sideBox .storyTxt h4{
	color: #2eeef3;
	padding: 1em 1em 0.5em;
	font-size: 1em;
	border-bottom: #2eeef3 1px solid;
	font-weight: 700;
}
#dlc_story .sideBox .storyTxt .txt{
	padding: 1em;
	text-align: left;
}
#dlc_story .spArea{
	padding-top: 1em;
}
#dlc_story .spArea h4{
	color: #2eeef3;
	padding: 0.5em 1em;
	font-size: 1em;
	border-top: #2eeef3 1px solid;
	border-bottom: #2eeef3 1px solid;
	background-color: #1a1a1a;
	text-align: center;
}
#dlc_story .spArea .spWrap{
	padding: 1em 1em 0;
}
#dlc_story .spArea .spBox{
	margin-bottom:1em ;
}
#dlc_story .spBox img{
	width: 30%;
	display: inline-block;
	vertical-align:middle;
}
#dlc_story .spBox .txtArea{
	width: 70%;
	display: inline-block;
	vertical-align:middle;
	padding: 0 1em;
	padding-right: 0;
	
}
#dlc_story .spBox .txtArea .name{
	padding: 0 1em 0.2em;
	border-bottom: #fff 1px dashed;
}
#dlc_story .spBox .txtArea .txt{
	text-align: left;
}
#notice{
	background-color: #111;
	padding: 1em;
}
#notice h4{
	color: #ff2366;
}
/*---------------------------------------------------------
@media
------------------------------------------------------------*/
@media (max-width: 1366px) {
.chBox{

	background-size: 80% auto;
}

}

@media (max-width: 978px) {
.chTxtArea .txt{

	font-size: 0.9em;
}

#movie .movieBox{
	width:49%;
}

}

@media (max-width: 786px) {
#topArea{
	background-size: auto 102%;

}


.topBox .logoArea{
	width:40vw;
}
#topArea .catch{
	width: 100%;
	top:auto;
}
#topArea .catch img.catch1{
	width: 55%;
	bottom:auto;
	left:auto;
	position:relative;
}
#topArea .catch img.catch2{
	width: 100%;
	position:relative;
	top:auto;
	right:auto;
}

/*ストーリー*/
#worldview .txt,#gensaku .txt{
	text-align: left;
	line-height: 1.8em;
}
/*キャラ*/
.subfixed{
	position: fixed;
	top:5em;
}
.chBox{

	background-size: 180% auto;
	padding:  2em 0 0;
}
.chTxtArea .txt{

	font-size: 1em;
}

.chBox .contentsBox{
	width: 100%;
}
.chBox img.chWord{
	width: 96%;
	display: block;
	margin: 0 2% ;
}
.chBox img.chName{
	width: 96%;
	display: block;
	margin: 80% 2% 0;
}
.chTxtArea{
	width: 100%;
	padding: 0;
	
}
.chTxtArea .txt{
	padding: 1em;
}
.chBox a.popup{

	margin-top: 0;
}
/*---------------------------------------------------------
ギャラリー
------------------------------------------------------------*/
#gallery .cgWrap a{
	width: 24%;
}

/*ムービー*/
#movie .movieBox{
	width:100%;
	margin: 0.2em auto;
}
/*DLC*/
#dlc_story .spArea .spWrap{
	padding: 1em 0 0;
}
#dlc_story .spBox img{
	vertical-align:top;
}
#dlc_story .spBox .txtArea{
	vertical-align:top;
	padding: 0;
}
#dlcother .txt{
	width: 100%;
	display: block;
}
#dlcother img{
	width: 100%;
	display: block;
}

}
@media (max-width: 480px) {
#bannerArea{
	padding: 0.5em;
}
#bannerArea a{
	width: 49%;
}

#bannerArea a.youtube{
	display: block;
	margin: 0 auto;
}
#news .newsBox:before{

	padding: 0 0.5em;
}
#productInfo .img,#spec .img{
	width: 50%;
	display: block;
	margin: 0 auto;
}
#productInfo .txt,#spec .txt{
	width: 100%;
	display: block;
}
#bannerArea a.tokusouBn2{
display:inline-block;
}
.topBox .logoArea .tokusouBn1{
display:none;
}
/*---------------------------------------------------------
システム
------------------------------------------------------------*/
#system img.ss{
	width:100%;
	display: block;
}

/*---------------------------------------------------------
ギャラリー
------------------------------------------------------------*/
#gallery .cgWrap a{
	width: 32.3%;
}

/*サウンド*/
.songTitle{
	font-size: 2em;

}
.cdBox .img{
	width: 70%;
	display: block;
	margin: 0 auto;
}
.cdBox .txt{
	width: 100%;
	display:block;
	padding: 0 1em;
}
.cdBox dt{
	width: 7em;
}
.cdBox dd{
	margin-left: 7em;
}
/*予約特典*/
#preorder .img{
	width: 100%;
	display: block;
}
#preorder .txt{
	width: 100%;
	display: block;
	padding: 0;
}
/*DLC*/
#dlc_story .mainCharaArea{
	padding-top: 80%;
}
#dlc_story .mainCharaArea:after{
	width: 100%;
	bottom:40%;
}
#dlc_story .mainCharaArea .chTxt{
	width: 96%;
	margin: 0 auto;
	position: relative;
}
#dlc_story .sideBox{
	width: 100%;
}
.btArea a.bt{
	width: 32.3%;
}


}