/*--------------------------------------------
トップ
----------------------------------------------*/
#top{
	background-image:url(../img/top7.jpg);
	background-position:center bottom;
	background-repeat:no-repeat;
	display:block;
	height:auto;
	background-size:auto 100%;
	border-bottom:#2d2d2d 1px solid;
	border-top:#2d2d2d 1px solid;
}

#top .topContents{
	width:100%;
	max-width:1300px;
	margin:0 auto;
	position:relative;
	text-align:center;
	}
#top .topContents img{
	width:100%;
}
#top .movieBox{
	width:22%;
	margin:4% 1%;
	/*margin-left:auto;*/
}
#top .silver{
	width: 90%;
	max-width:167px; 
	margin-left:auto;
	padding: 5px 0 0;
}
.btn_preorder:hover {
	text-decoration: none;
	color: orange;
}
.trailersBt{
    width:98%;
    max-width:480px;
    box-sizing:border-box;
    margin:0 auto;
    text-align:center;
    font-family: "Myriad Pro", Arial, serif;
    font-size:22px;
    line-height:0.4;
    /*text-shadow:0 0 5px #1181ff;*/
    /*border:#ccc 1px solid;*/
}
.trailersBt img{
    max-width:100%;
    box-sizing:border-box;
    border:#ccc 1px solid;
    display:block;
    /*box-shadow:0 0 5px #6ab0e7;*/
}
#top #newsWrap{
	width:40%;
	position:absolute;
	bottom:10%;
	left:1%;
}
#top #newsWrap a.enki{
	padding: 10px 1%;
	background-color:#A61316;
	display: block;
	color: #fff;
}
#top #newsWrap a.enki:hover{
	text-decoration: none;
	background-color: #333;
}
#newsBox{	
	width: 100%;
	padding:0.5em;
	min-height:100px;
	background-image:url(../img/bg_stripe.png);
	text-align:left;
	border:#2d2d2d 1px solid;
	font-size: 12px;
}
#newsBox dt{
	width:8em;
	background-image:url(../img/news_icon.png);
	background-repeat:no-repeat;
	background-position:left 3px;
	padding-left:1em;
	color:#999;
}
#newsBox dd{
	line-height:1.8em;
}
#newsBox a{
	color:#fff;
	padding:0 0.5em;
	background-color:#333;
	display:inline-block;
	margin:2px;
}
#newsBox a:hover{
	text-decoration:none;
	background-image:url(../img/second/subnavi_selected.jpg);
	text-shadow:0px 0px 3px #000000,0px 0px 5px #000000;
}

#newsBox a.more{
	width:100%;
	display:block;
	text-align:right;
	background-color:#111;
	border-top:#666 1px solid;
	padding:3px 0.5em;
	letter-spacing:1px;
	margin-top:1%;
	text-shadow:0px 0px 3px #000000,0px 0px 5px #000000;
}
.spec{
	width:100%;
	margin-bottom:10px;
	border-bottom:#fff 1px solid;
}
.spec dl{
	line-height:1.5em;
	padding:1em;
}
.spec dl dt{
	display:inline-block;
	vertical-align:top;
}
.spec dl dd{
	display:inline-block;
	vertical-align:top;
	margin-right:1.5em;
}
.bannerArea{
	padding: 5px 0 1%;
	text-align: center;
}
.bannerArea a{
	/*width: 19.5%;*/
	width: 24.5%;
	max-width:480px;
	margin: 2px 0.25%;
	display:inline-block;
	vertical-align:top;
	padding:0;
	border:#2d2d2d 1px solid;
	position:relative;
	background-color:#000;
	box-sizing:border-box;
	outline:none;
	
}

.bannerArea  a:before{
	content:"";
	width:0%;
	height:0;
	display:block;
	position:absolute;
	top:-1px;
	left:-1px;
	border-top:#de01f9 1px solid;
	
	-webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
}
.bannerArea  a:after{
	content:"";
	width:0%;
	height:0;
	display:block;
	position:absolute;
	bottom:-1px;
	right:-1px;
	border-top:#de01f9 1px solid;
	
	-webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
}
.bannerArea  a:hover{
	border-left:#de01f9 1px solid;
	border-right:#de01f9 1px solid;

}
.bannerArea  a:hover:before{
	width:100%;
	border-left:#de01f9 1px solid;
	border-right:#de01f9 1px solid;
}
.bannerArea a:hover:after{
	width:100%;
	border-left:#de01f9 1px solid;
	border-right:#de01f9 1px solid;
}

.bannerArea .actionObject{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transform:translateY(20px);
	opacity:0;

}
.bannerArea .actionObject.action{
	transform:translateY(0px);
	opacity:1;
}
/*--------------------------------------------
ストーリー
----------------------------------------------*/
#story{
}
#world{
	padding-bottom:10%;
}
#world.mainBg{
	background-image:url(../story/img/world/bg.jpg);
}
#world h2{
	text-align:center;
}
#world h2 img{
	max-width:746px;
}
#world .txtBox{
	width:90%;
	max-width:640px;
	margin:0 auto;
	font-size:18px;
	line-height:2em;
	padding:1% 0;
}
#world .txtBox strong,#storypage .txtBox strong{
	font-size:22px;
	font-weight:normal;
}
#storypage{
	padding-bottom:7%;
}

#storypage.mainBg{
	background-image:url(../story/img/storypage/bg.jpg);
	background-position:center top;
}
#storypage h2{
	width:75%;
	padding:2%;
}
#storypage h2 img{
	max-width:770px;
}
#storypage .txtBox{
	width:65%;
	padding:0 3%;
	font-size:18px;
	line-height:2em;
}
#tips{
	padding-bottom:10%;
}

#tips h2{
	font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	font-size:48px;
	color:#999999;
	border-bottom:#fff 1px solid;
	line-height:1.3em;
	text-align:center;
	margin-bottom:10px;
}
#tips h2 .cap{
	font-size:72px;
}
#tips h3{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	color:#ffb628;
	letter-spacing:1px;
	margin-bottom:5px;
	position:relative;
	font-weight:bold;
}
#tips .tipsWrap{
	width:90%;
	max-width:900px;
	margin:10px auto 30px;
	display:block;
}
#tips .tipsBox{
	padding:2%;
	background-image:url(../story/img/tips/bg.png);
	font-size:16px;
	margin:0 auto 10px;
	line-height:1.5em;
}
#tips .tipsBox .txt{
	width:69%;
	margin-right:1%;
	display:inline-block;
	vertical-align:top;
}
#tips .tipsBox .img{
	width:30%;
	display:inline-block;
	vertical-align:top;
}
#tips .tipsBox .img img{
	max-width:400px;
	border:#000 2px solid;
}
#tips .new{
	background-color:#fe1557;
	color:#fff;
	text-shadow:none;
}
#tips .tipsBox hr{
	border: 0;
	border-top: #555 1px solid;
}
/*--------------------------------------------
キャラクター
----------------------------------------------*/
#chara{
}
#chara #subNavi{
	text-align:left;
}
#chara #subNavi a{
	/*width:5.38%;*/
	width:5.05%;
	margin:0 0.25%;
	padding:0;
	display:inline-block;
	vertical-align:top;
	border:#363636 1px solid;
	background-color:#000;
	
}
#chara #subNavi a img{
	opacity:0.3;
}

#chara #subNavi a.selected{
	border:#ff00ff 1px solid;
	background-image:none;
}
#chara #subNavi a.selected img{
	opacity:1;
}
#chara #subNavi .new{
	width:100%;
	position:absolute;
	top:0;
	font-size:10px;
}
#chara .charaArea{
	width:100%;
	position:relative;
	background-repeat:no-repeat;
	background-position:right top;
	background-size:60% auto;
}
#chara #charaImg{
	width:65%;
	position:absolute;
	z-index:1;
	top:0;
	right:0;
	margin-right: -50px;
}
#chara .charaWordBox{
	width:80%;
	position:relative;
	z-index:2;
	margin-left:auto;
}
#chara .charaBox{
	width:50%;
	position:absolute;
	z-index:3;
	top:0;
	left:0;
}

#chara .charaTxtBox{
	width:80%;
	max-width:650px;
	position:relative;
	margin-left:auto;
}

#chara .charaTxtBox .txtBox{
	width:90%;
	max-width:550px;
	margin:0 auto;
	background-image:url(../img/bg_black70.png);
	padding:1%;
}

#chara .actionObject{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transform:translateY(20px);
	opacity:0;
}

#chara .actionObject.action{
	transform:translateY(0px);
	opacity:1;
}

/*ボタンエリア*/
#chara .btArea{
	width:90%;
	max-width:550px;
	margin:0 auto;
	padding:1%;
}
#chara .styleBt{
	width: 25%;
	max-width:131px;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
#chara .styleBt .new{
	position: absolute;
	top:10px;
	left: 5px;
}
#chara .styleBt a{
	display: block;
	border-radius: 50%;
	background-color: #000;
	outline: none;
	border: #000 5px solid;
}
#chara .styleBt a:hover img{
	opacity: 0.5;
}
#chara .styleBt a:hover{
	/*background-color: #de27ff;*/
	background-image: url(../img/bg_stripe.png);
}
#chara .styleBt a img{
	border-radius: 50%;

}
/*--------------*/
#shina{
	background-image:url(../chara/img/shina_bg.png);
}
#arata{
	background-image:url(../chara/img/arata_bg.png);
}
#lily{
	background-image:url(../chara/img/lily_bg.png);
}
#lucil{
	background-image:url(../chara/img/lucil_bg.png);
}
#al{
	background-image:url(../chara/img/al_bg.png);
}
#clea{
	background-image:url(../chara/img/clea_bg.png);
}
#celica{
	background-image:url(../chara/img/celica_bg.png);
}
#sumika{
	background-image:url(../chara/img/sumika_bg.png);
}
#natsuo{
	background-image:url(../chara/img/natsuo_bg.png);
}
#rin{
	background-image:url(../chara/img/rin_bg.png);
}
#lydia{
	background-image:url(../chara/img/lydia_bg.png);
}
#alice{
	background-image:url(../chara/img/alice_bg.png);
}
#ripuka{
	background-image:url(../chara/img/ripuka_bg.png);
}
#nova{
	background-image:url(../chara/img/nova_bg.png);
}
#levin{
	background-image:url(../chara/img/levin_bg.png);
}
#rook{
	background-image:url(../chara/img/rook_bg.png);
}
#hajime{
	background-image:url(../chara/img/hajime_bg.png);
}
#senji{
	background-image:url(../chara/img/senji_bg.png);
}
/*サンプルボイス*/
.sampleVoice{
	width:90%;
	max-width:550px;
	margin:0 auto;
	padding:1%;
}
.sampleVoice .playBT{
	width: 24%;
	max-width: 258px;
	margin: 2px 0.5%;
	display: inline-block;
	vertical-align: top;
	background-color: #000;
	cursor: pointer;
}
.sampleVoice .playBT img{
	display: block;
}
.sampleVoice .playBT:hover{
	background-color: #333;
}
.sampleVoice .playBT.selected{
	background-color: #ff00ff;
}
/*--------------------------------------------
システム
----------------------------------------------*/
#system{
}
#basic,#glitch,#battlejack,#realpart,#strain,#dungeon,#flow{
	padding-bottom:5%;
}

.sysBox{
	width:98%;
	max-width:1300px;
	margin:2% auto;
	background-image:url(../img/bg_black70.png);
}
.sysBox .box{
	padding:1% 3% 3%;
}
.sysBox .txt{
	padding:1%;
	font-size:16px;
	line-height:1.8em;
}
.sysBox h2.cont_h2{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	color:#fff;
	background-image:url(../img/second/sys_bg.png);
	padding:1%;
	font-weight:bold;
	font-size:48px;
	line-height:1em;
}
.sysBox h3.cont_h3{
	font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	color:#ffce37;
	border-left:#ffce37 5px solid;
	padding:1%;
	font-size:33px;
	line-height:1.3em;
}
.sysBox .txtBox{
	width:50%;
	display:inline-block;
	vertical-align:top;
}

.sysBox .img{
	width:50%;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}
.sysBox .img.sm{
	width:39%;
	margin-left: 1%;
}
.sysBox .txtBox.sm{
	width: 60%;
}
.sysBox .img.wide{
	width:100%;
	display:block;
}


.sysBox .img img{
	max-width:1000px;
	border:#000 2px solid;
}

.sysBox .img.wide img.twin{
	width: 49%;
	display: inline-block;
	vertical-align: top;
	margin: 0 0.5%;
}

.sysBox .commandList{
	width:100%;
	border:#2d2d2d 1px solid;
	background-image:url(../img/bg_black25.png);
	margin-top:1%;
}
.sysBox .commandList h4{
	background-color:#2a2a2a;
	font-size:14px;
	line-height:1em;
	padding:1%;
}
.sysBox .commandBox{
	width:98%;
	margin:1% auto;
	
}
.sysBox .commandBox h5{
	color:#3a92ff;
	font-size:16px;
	line-height:1em;
	padding:1%;
	border-bottom:#413e41 1px solid;
}
.sysBox .commandBox .txtBox{
	width:auto;
	display:block;
	margin-left:110px;
}
.sysBox .commandBox img{
	width:110px;
	float:left;
}


.sysBox .jacklist{
	width:100%;
	border:#2d2d2d 1px solid;
	background-image:url(../img/bg_black25.png);
	margin-top:1%;
	padding:0 1% 1%;
}
.sysBox .jacklist dt{
	color:#3a92ff;
	font-weight: bold;
	padding-top: 1%;
}
.sysBox .jacklist dd{
	padding: 0 1% 1%;
	border-bottom:#413e41 1px solid;
}
.sysBox .listBox{
	width:100%;
	padding: 1%;
}
.sysBox .listBox li{
	padding: 1%;
	border:#2d2d2d 1px solid;
	background-image:url(../img/bg_black25.png);
	margin-top: 10px;
}
.sysBox .listBox li h4{
	color:#3a92ff;
	font-weight: bold;
	font-size:16px;
}
.sysBox .listBox li .txtBox{
	padding: 1% 0;
	
}
.sysBox .listBox li .txtBox .txt{
	padding: 1% 0.7em;
}
#flow .floatWrap .txt{
	width: 60%;
	display: inline-block;
	vertical-align: top;
}
#flow .floatWrap .img{
	width: 40%;
	display: inline-block;
	vertical-align: top;
	padding: 1%;
}
#flow .boxWrap{
	display: table;
	border-spacing: 10px 0;
	padding: 15px 0;
}
#flow .boxWrap .floatBox{
	width: 50%;
	display: table-cell;
	padding: 1%;
	border-radius: 6px;
	border: #476d77 2px solid;
	background-color: #000;
}
#flow .boxWrap .floatBox .txt{
	font-size: 14px;
	line-height: 1.5em;
}
#flow .pointBox{
	padding: 15px 0;
}
#flow h3.flowH3{
	font-size: 16px;
	font-weight: bold;
	background-image: url(../system/img/flow/point_bg.png);
	padding: 15px 1em;
	line-height: 1em;
}
#flow .glitchBox {
	padding-bottom: 1%;
}
#flow .glitchBox .img{
	width: 59%;
	display: inline-block;
	vertical-align:middle;
	margin-right: 1%;
	padding: 0.5%;
}
#flow .glitchBox .img img{
	border: 0;
}
#flow .glitchBox .txt{
	width: 40%;
	display: inline-block;
	vertical-align:middle;
	border: 2px solid #f37f0a;
	position: relative;
	border-radius: 6px;
	background-color: #000;
}
#flow .glitchBox .txt:after{
	border-right: 12px solid #f37f0a;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  content: '';
  margin-top: -10px;
  position: absolute;
  left: -12px;
  top: 50%;
}

#flow .knockBug{
	padding: 1%;
	background-color: #000;
	border: #368ca1 2px solid;
	border-radius: 6px;
}
#flow h4.checkH4{
	font-size: 16px;
	font-weight: bold;
	color: #47cbde;
}
#flow .bugBox{
	padding: 0 0 1%;
	border-bottom: #444747 1px solid;
	margin-bottom: 1%;
}
#flow .bugBox .txt{
	width: 60%;
	display: inline-block;
	vertical-align: top;
}
#flow .bugBox .img{
	width: 40%;
	display: inline-block;
	vertical-align: top;
}
#flow .bugFloat{
	width: 49%;
	margin: 5px 0.5%;
	display: inline-block;
	vertical-align: top;
}
#flow .bugFloat .txt{
	font-size: 12px;
}
#flow .arrow{
	color: #47cbde;
}
#flow .jackBox{
	padding: 0.5% 1% 1%;
	border: #f37f0a 2px solid;
	background-color: #000;
	border-radius: 6px;
	margin: 10px 0;
}
#flow .jackBox .txt{
	width: 65%;
	display: inline-block;
	vertical-align: top;
}
#flow .jackBox .img{
	width: 35%;
	display: inline-block;
	vertical-align: top;
}

#flow h4.jackH4{
	font-size: 16px;
	font-weight: bold;
	color:  #ff8f16 ;
	padding: 5px 0;
}
#flow .bottomTxt{
	font-size:24px;
	padding: 3% 1%;
	text-align: right;
	border-top: #fff 1px solid;
	line-height: 1.5em;
}
/*--------------------------------------------
ギャラリー
----------------------------------------------*/
#gallery{
}
#gallerypage{
	padding-bottom:7%;
}
.galleryBox{
	margin:2% 0;
}
.galleryBox h2{
	/*background-color:#000;*/
	font-size:16px;
	font-family: 'Josefin Sans', sans-serif;
	padding:0.5em 1%;
	letter-spacing:1px;
	border-left:#de01f9 5px solid;
	border-bottom:#de01f9 1px solid;
	background-image:url(../img/bg_black70.png);

}
.galleryBox a{
	width:15.66%;
	max-width:250px;
	margin:1% 0.5%;
	display:inline-block;
	vertical-align:top;
	padding:0;
	border:#2d2d2d 1px solid;
	position:relative;
	background-color:#000;
	box-sizing:border-box;
	outline:none;
	
}
.galleryBox .new{
	width:100%;
	position:absolute;
	bottom:0;

}
.galleryBox  a:before{
	content:"";
	width:0%;
	height:0;
	display:block;
	position:absolute;
	top:-1px;
	left:-1px;
	border-top:#de01f9 1px solid;
	
	-webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
}
.galleryBox  a:after{
	content:"";
	width:0%;
	height:0;
	display:block;
	position:absolute;
	bottom:-1px;
	right:-1px;
	border-top:#de01f9 1px solid;
	
	-webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
}
.galleryBox  a:hover{
	border-left:#de01f9 1px solid;
	border-right:#de01f9 1px solid;
	background-image:url(../img/second/subnavi_hover.jpg);
}
.galleryBox  a:hover:before{
	width:100%;
	border-left:#de01f9 1px solid;
	border-right:#de01f9 1px solid;
}
.galleryBox a:hover:after{
	width:100%;
	border-left:#de01f9 1px solid;
	border-right:#de01f9 1px solid;
}

.galleryBox.actionObject{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transform:translateY(20px);
	opacity:0;

}
.galleryBox.actionObject.action{
	transform:translateY(0px);
	opacity:1;
}
/*--------------------------------------------
ムービー
----------------------------------------------*/
#moviepage{
	padding-bottom:10%;
}
#moviepage .movieBox{
	width:32.3%;
	margin:10px 0.5%;
	display:inline-block;
	vertical-align:top;
	background-color:#000;
}
#moviepage .movieBox .txt{
	text-align:center;
	padding:5px 0;
	font-size:12px;
}
#moviepage .actionObject{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transform:translateY(20px);
	opacity:0;

}
#moviepage .actionObject.action{
	transform:translateY(0px);
	opacity:1;
}
#moviepage .movieLink{
	text-align: center;
	margin: 15px 0;
}
#moviepage .movieLink a{
	width: 96%;
	max-width:500px;
	margin: 0 auto;
	display: block;
	padding: 3%;
	background-color: #333;
	color: #bbb;
	font-size: 16px;
	border-radius: 6px;
	text-shadow: none;
	border-left: #666 8px solid;
	border-right: #666 8px solid;
}
#moviepage .movieLink a .small{
	font-size: 14px;
}
#moviepage .movieLink a:hover{
	text-decoration: none;
	/*background-color: #333;*/
	background-color: #9c0000;
}
/*--------------------------------------------
サウンド
----------------------------------------------*/
#sound{
}
#sound hr{
	height: 0;
	border: 0;
	border-top: #fff 1px dashed;
}
#song{
	padding-bottom:5%;
}

.songWrap{
	width: 94%;
	margin: 0 auto;
	padding: 5% 0;
	text-align: center;
	
}
.songWrap .txt{
	padding: 1%;
	font-size: 16px;
	line-height: 1.8em;
}
.songWrap .songBox{
	width: 33.3%;
	padding: 5% 0 ;
	display: inline-block;
	vertical-align: top;
	
}
.songTitle{
	color: #ffc000;
	font-size: 24px;
	line-height: 1.8em;
}


.artistBox{
	width:94%;
	max-width:1300px;
	margin:2% auto;
	background-image:url(../img/bg_black70.png);
}


.artistBox .box{
	padding:1% 3% 3%;
}

#bgm .artistBox .box{
	padding: 1%;
}
.artistBox .img{
	width: 40%;
	display: inline-block;
	vertical-align: top;
	padding: 1%;
	padding-right: 0;
}
.artistBox .txtBox{
	width: 60%;
	display: inline-block;
	vertical-align: top;
	padding: 1%;
}
.artistBox .txt{
	padding:1%;
	font-size:14px;
	line-height:1.5em;
}
.artistBox h2.cont_h2{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	color:#fff;
	background-image:url(../img/second/sys_bg.png);
	padding:1%;
	font-weight:bold;
	font-size:24px;
	line-height:1em;
}

.artistBox h3{
	border-bottom: #9507a1 1px solid;
	border-left: #9507a1 3px solid;
	padding: 1%;
	font-size: 14px;
	margin-top: 1em;
	background-image: url(../img/bg_black70.png);
}
.artistBox img{
	width: 100%;
	max-width: 1200px;
	display: block;
	margin: 0 auto;
	border: #2d2d2d 1px solid;
}
.artistBox  a{
	color: #fff;
	background-color: #333;
	text-shadow: none;
	margin-bottom: 1em;
	display: block;
	padding: 1%;
}
.artistBox  a:hover{
	background-color: #da00ee;
	text-decoration: none;
}
/*BGM*/
#bgm{
	padding-bottom: 5%;
	
}
#bgmList{
	width: 90%;
	margin: 0 auto;
	padding: 2% 0;
}
#bgmList li.playBT{
	color: #fff;
	background-color: #000;
	text-shadow: none;
	margin-bottom: 0.5em;
	display: block;
	padding: 15px 1%;
	cursor: pointer;
	background-image:url(../img/news_icon.png);
	background-repeat:no-repeat;
	background-position:10px  center;
	padding-left:25px;
	font-size: 16px;
	border-left: #666 5px solid;

}
#bgmList li.playBT:hover{
	background-color: #2d2d2d;
	border-left: #da00ee 5px solid;
}
#bgmList li.playBT.selected{
	background-color: #da00ee;
}

/*--------------------------------------------
スペシャル
----------------------------------------------*/
#special{
}
#twitter-item{
	padding-bottom:15%;
}
#twitter-item .txt{
	width:96%;
	margin:2% auto 0;
}
.itemBox{
	width:96%;
	margin:2% auto;
}
.itemBox h2{
	/*background-color:#000;*/
	font-size:16px;
	font-family: 'Josefin Sans', sans-serif;
	padding:0.5em 1%;
	letter-spacing:1px;
	border-left:#de01f9 5px solid;
	border-bottom:#de01f9 1px solid;
	background-image:url(../img/bg_black70.png);

}
.itemBox a{
	width:15.66%;
	max-width:200px;
	margin:1% 0.5%;
	display:inline-block;
	vertical-align:top;
	padding:0;
	border:#2d2d2d 1px solid;
	position:relative;
	background-color:#000;
	box-sizing:border-box;
	outline:none;
	
}
.itemBox a.wide{
	width:24%;
	max-width:480px;
}
.itemBox .new{
	width:100%;
	position:absolute;
	bottom:0;

}
.itemBox  a:before{
	content:"";
	width:0%;
	height:0;
	display:block;
	position:absolute;
	top:-1px;
	left:-1px;
	border-top:#de01f9 1px solid;
	
	-webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
}
.itemBox  a:after{
	content:"";
	width:0%;
	height:0;
	display:block;
	position:absolute;
	bottom:-1px;
	right:-1px;
	border-top:#de01f9 1px solid;
	
	-webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
}
.itemBox  a:hover{
	border-left:#de01f9 1px solid;
	border-right:#de01f9 1px solid;
	background-image:url(../img/second/subnavi_hover.jpg);
}
.itemBox  a:hover:before{
	width:100%;
	border-left:#de01f9 1px solid;
	border-right:#de01f9 1px solid;
}
.itemBox a:hover:after{
	width:100%;
	border-left:#de01f9 1px solid;
	border-right:#de01f9 1px solid;
}

#special .actionObject{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transform:translateY(20px);
	opacity:0;

}
#special .actionObject.action{
	transform:translateY(0px);
	opacity:1;
}

#twitter-campaign{
	padding-bottom: 5%;
}
#twitter-campaign h2.cont_h2{
	width: 98%;
	margin: 0 auto;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	color:#ffce37;
	border-left:#ffce37 5px solid;
	padding:1%;
	font-size:36px;
	line-height:1.3em;
	font-weight: bold;
	letter-spacing: 0.5px;
}
#twitter-campaign h3{
	width: 98%;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	color:#fff;
	background-image:url(../img/second/sys_bg.png);
	padding:1%;
	font-weight:bold;
	font-size:20px;
	line-height:1em;
	margin: 1% auto 0;
}
#twitter-campaign .txtBox{
	width: 96%;
	margin:2% auto 0;
	background-image:url(../img/bg_black70.png);
	padding: 1% 1% 2%;

}
#twitter-campaign .txt{
	padding: 1% 2%;
	font-size: 16px;
	line-height: 1.5em;
}
#twitter-campaign ul.notes{
	font-size: 13px;
}

#twitter-campaign .img{
	width: 47%;
	max-width: 600px;
	display: inline-block;
	vertical-align: top;
	padding: 1% 1% 2%;
}

#twitter-campaign .castList{
	width: 53%;
	padding: 2% 1%;
	display: inline-block;
	vertical-align: top;

}
#twitter-campaign dl {
	padding:2px 1%;
	
}
#twitter-campaign dl dt{
	float: left;
	/*color: #ffb530;*/
	color:#d255e8;
	font-size: 12px;
}
#twitter-campaign hr{
	border: 0;
	height: 0;
	border-top: #cdcdcd 1px dashed;
	margin-top: 3em;
}
#twitter-campaign .howto{
	border: #666 3px double;
	background-color: #111;
	margin-bottom: 10px;
}
#twitter-campaign .howto .txt{
	padding: 1%;
}
#twitter-campaign .howto h4{
	padding: 0.5em 1%;
	background-color:#222;
}
#twitter-campaign .twiBox{
	width: 100%;

	text-shadow: none;
}
/*--------------------------------------------
製品情報
----------------------------------------------*/
	#info{
	}
	#info hr{
		border: 0;
		border-top: #666 1px dashed;
	}

	#product-info{
		padding-bottom:7%;
	}
	.infoBox{
		width:90%;
		max-width:754px;
		margin:2% auto;
	}
	
	.infoBox img.jacket{
		display:block;
		margin-bottom:2em;
	}
	
	.productBox{
		width:100%;
		display:table;
		border-bottom:#de01f9 1px solid;
		background-image:url(../img/bg_black70.png);
		margin:0.5em 0 0;
	}
	.productBox .cat{
		width:25%;
		background-color:#de01f9;
		display:table-cell;
		padding:1%;
		text-shadow:none;
	}
	.productBox .txt{
		display:table-cell;
		padding:1%;
	}

/*特典----------------------------------*/
.bonusBox{
	width: 96%;
	max-width: 1300px;
	margin: 0 auto;
}
.bonusBox .img{
	width: 50%;
	display: inline-block;
	vertical-align: top;
	padding: 2% 1%;
	text-align: center;
}

.bonusBox .txtBox{
	width: 50%;
	display: inline-block;
	vertical-align: top;
	padding: 3% 1%;
}
#limited.bonusBox .img{
	width: 55%;
}
#limited.bonusBox .txtBox{
	width: 45%;
}
#preorder.bonusBox .img img{
	max-width: 544px;
}

#limited.bonusBox .img img{
	max-width: 675px;
}
.bonusBox h2.contTitle{
	color: #ffba35;
	font-size: 30px;
	line-height: 1em;
	border-bottom: #ffba35 1px solid;
}
.bonusBox h2.contTitle .small{
	font-size: 14px;
	ine-height: 1em;
	padding: 0 1em;
}
#shop.bonusBox h2.contTitle{
	text-align: center;
	margin-top: 3%;
}
#preorder.bonusBox h3,#limited.bonusBox h3{
	background-color: #de01f9;
	padding: 2% 1em;
	transform: skewX(-10deg);
	margin: 1em 0.5em 0;
	font-size: 16px;
	line-height: 1.3em;
	text-shadow: none;
}
#preorder.bonusBox h3 .h3txt,#limited.bonusBox h3 .h3txt{
	transform: skewX(10deg);

}
.bonusBox .txtBox .txt{
	padding: 1% 3%;
	line-height: 1.5em;
	font-size: 15px;
	margin: 0.5em;
}
.bonusBox a{
	color: #fff;
	background-color: #000;
	margin-top: 1em;
	display: block;
	padding: 1em;
	border:#333 1px solid;
	text-shadow:0px 0px 3px #000000,0px 0px 5px #000000;
}
.bonusBox a:hover{
	text-decoration: none;
	background-image: url(../img/second/subnavi_selected.jpg);
}
.bonusBox ul.list{
	margin-left: 1em;
	padding-top: 0.2em;
}
.bonusBox ul.list li{
	text-indent: -1em;
}

/*---------------------------------------*/
	#news{
		padding-bottom:7%;
	}
	.newsWrap{
		width:98%;
		margin:2% auto;
		padding:1%;
		background-image:url(../img/bg_black70.png);
	}
	.newsWrap dl{
		border-bottom:#999 1px dashed;
		padding:10px 1%;
	}
	.newsWrap dt{
		width:8em;
		background-image:url(../img/news_icon.png);
		background-repeat:no-repeat;
		background-position:left 3px;
		padding-left:1em;
		color:#999;
		
	}
	.newsWrap dd{
		line-height:1.8em;
	}

	.newsWrap a{
		color:#fff;
		padding:0 0.5em;
		background-color:#333;
		display:inline-block;
		margin:2px;
	}
	.newsWrap a:hover{
		text-decoration:none;
		background-image:url(../img/second/subnavi_selected.jpg);
	}
	#creator{
		padding-bottom:7%;

	}
	dl.creatorBox{
		width:100%;
		max-width:550px;
		margin:2% auto;
		
	}
	dl.creatorBox dt{
		width:19em;
		background-image:url(../img/bg_black70.png);
		float:left;
		clear:both;
		padding:1% 1em;
		margin-bottom:1em;
		border-bottom:#666 1px solid;
	}
	dl.creatorBox dd{
		margin-left:19em;
		padding:1% 1em;
		margin-bottom:1em;
		border-bottom:#666 1px solid;
	}

/*コラボ*/
#collabo{
	padding-bottom: 5%;
}
#collabo h2.cont_h2{
	width: 98%;
	margin: 0 auto;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	color:#ffce37;
	border-left:#ffce37 5px solid;
	padding:1%;
	font-size:36px;
	line-height:1.3em;
	font-weight: bold;
	letter-spacing: 0.5px;
}
#collabo .txtBox{
	width: 96%;
	margin: 0 auto;
	background-image:url(../img/bg_black70.png);
	padding: 1%;

}
#collabo .txt{
	padding: 1% 2%;
	font-size: 16px;
	line-height: 1.8em;
	letter-spacing: 1px;
}
#collabo strong.large{
	font-size: 18px;
	font-weight: normal;
}
#collabo .collaboInfo{
	width: 98%;
	margin: 0 auto;
	border: #333 1px solid;
	padding: 2%;
	background-image: url(../img/bg_black70.png);
	line-height: 1.8em;
	font-size: 14px;

}
#collabo .collaboInfo dt{
	width: 8em;
	float: left;
	clear: both;
	background-color: #333;
}
#collabo .collaboInfo dd{
	margin-left: 8.5em;
	margin-bottom: 1.5em;
}
#collabo .movieBox{
	width:90%;
	max-width: 600px;
	margin:10px auto;
	background-color:#000;
}
#collabo .frqInfo{
	width: 100%;
	padding: 1% 1% 0;
	margin-top: 1%;
	
}
#collabo .frqInfo h3{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	color:#fff;
	background-image:url(../img/second/sys_bg.png);
	padding:1%;
	font-weight:bold;
	font-size:20px;
	line-height:1em;
}
#collabo .frqInfo h4{
	width: 98%;
	margin: 1% auto;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	color:#ffce37;
	padding:1% 0;
	font-size:22px;
	line-height:1.3em;
	font-weight: bold;
	letter-spacing: 0.5px;
}
#collabo .frqInfo .img{
	width: 40%;
	max-width:492px ;
	display: inline-block;
	vertical-align: top;
	padding: 1%;
}
#collabo .frqInfo .txt{
	width: 60%;
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
	padding: 1%;
	line-height: 1.7em;
}
#collabo .frqInfo .creatorBox{
	padding: 1% 0;
}
#collabo .frqInfo .creatorTxt{
	line-height: 1.5em;	
}
#collabo hr{
	border: 0;
	border-top: #666 1px dashed;
}
#collabo a{
	color: #fff;
	background-color: #333;
	text-shadow: none;
	margin-bottom: 1em;
	display: block;
	padding: 1%;
}
#collabo a:hover{
	background-color: #da00ee;
	text-decoration: none;
}

#collabo .nicoBox{
	width: 100%;
	max-width: 312px;
	margin: 0 auto;
	text-align: center;
	display: block;

}
/*予約特典丈紹介*/
#endquest{
	padding-bottom: 5%;
}

.eqBox{
	width: 96%;
	max-width: 1050px;
	margin: 1% auto 0;
	background-color: #000;
	border: #dadada 4px solid;
	border-radius: 6px;
	padding:0 1% 1%;
	color: #fff;
}
.eqBox .new{
	width: 100%;
	position: absolute;
	bottom:0;
}
.eqBox h2 .new{
	position: relative;
	bottom:auto;
	width: auto;
}
.eqBox .logoBox{
	text-align: center;
	padding: 30px 0 10px;
}
.eqBox .logoBox img{
	width: 90%;
	max-width: 240px;
}
.eqBox .logoTxt{
	padding: 1em 0 0;
}
.eqBox h2{
	text-align: center;
	font-size: 25px;
	line-height: 1em;
	padding: 10px 0 15px;
	position: relative;
	margin-bottom: 5px;
}
.eqBox .box{
	padding: 10px 1%;
	border-top: #fff 1px solid;
}
.eqBox .box .storyTxt{
	text-align: center;
	font-size: 16px;
	padding: 3% 0 4%;
	line-height: 1.5em;
}
.eqBox .box .chWrap{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}
.eqBox .box .chBox{
	width: 32.3%;
	height: auto;
	margin: 10px 0.5%;
	display: inline-block;
	vertical-align: top;
	background-color: #1d1d1d;
	padding: 1% 1% 2%;
	border: #dadada 3px solid;
	border-radius: 6px;
}
.eqBox .box .chBox img{
	max-width: 250px;
	display: block;
	margin: 0 auto;
}
.eqBox .box .chBox h3{
	border-bottom: #fff 1px solid;
	font-size: 16px;
	line-height: 1.5em;
	text-align: center;
	padding-bottom: 3px;
}
.eqBox .box .chBox .txt{
	text-align: left;
	font-size: 13px;
	padding: 1%;
}


.eqBox .box .btBox{
	width: 100%;
	max-width: 960px;
	margin: 10px auto;
	display:block;
	background-color: #1d1d1d;
	padding: 1% 1%;
	border: #dadada 3px solid;
	border-radius: 6px;
}

.eqBox .box .btBox h3{
	color: #01a0e4;
	font-weight: bold;
	padding: 1%;
}
.eqBox .box .btBox .txt{
	padding: 0 1% 1%;
	font-size: 16px;
}
.eqBox .box .btBox .img{
	text-align: center;
}
.eqBox .box .btBox.float .txtBox{
	width: 68%;
	display: inline-block;
	vertical-align: top;
}
.eqBox .box .btBox.float .img{
	width: 32%;
	display: inline-block;
	vertical-align: top;
	text-align: center;

}
.eqBox .box .btBox.float .img img{
	width: 100%;
	max-width: 480px;
}
.eqBox .box .btBox .img img{
	width: 49%;
	display: inline-block;
	vertical-align: top;
	margin: 0 0.5%;
	border: #dcdcdc 1px solid;
}
.eqBox .box .btBox .imgWrap{
	width: 100%;
	background-color: #000;

}
.eqBox .box .btBox .imgBox{
	width: 49%;
	display:inline-block;
	vertical-align: top;
	margin: 0 0.5%;
	padding: 1%;
}
.eqBox .box .btBox .imgBox img{
	width: 100%;
	display: block;
	border: #dcdcdc 1px solid;
}
.eqBox .box .btBox .imgBox .imgTxt{
	font-size: 12px;
	text-align: left;
	padding: 1%;

}

.eqBox .box .ssBox{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 1% 0;
	text-align: center;
	
}
.eqBox .box .ssBox a{
	width: 32.3%;
	max-width: 302px;
	margin: 2px 0.5%;
	display: inline-block;
	vertical-align: top;
	border: #ccc 1px solid;
	background-image: url(../img/second/subnavi_hover.jpg);
	position: relative;
}
.eqBox .box .ssBox a:hover img{
	opacity: 0.5;
}
.eqBox .box a.pjax2{
	text-align: center;
	width: 90%;
	max-width: 500px;
	margin: 20px auto;
	background-color: #000;
	border: #dadada 3px solid;
	border-radius: 6px;
	color: #fff;
	font-size: 16px;
	display: block;
	padding: 1em;
}
.eqBox .box a.pjax2:hover{
	text-decoration: none;
	background-color: #333;
}
.eqBox .box table{
	width: 100%;
	max-width: 800px;
	margin: 0 auto 1em;
}
.eqBox .box table tr{
}
.eqBox .box table td{
	padding: 5px 0.5em;
	line-height: 1.3em;
}
.eqBox .box table td.cat{
	width: 9em;
	background-color: #444;
}
#trial {
	text-align: center;
}
#trial img{
	max-width: 500px;
	display: block;
	margin: 0 auto;
	border: #ccc 1px solid;

}
#trial .trialBt{
	text-align: center;
	width: 90%;
	max-width: 500px;
	margin: 10px auto;
	background-color: #000;
	border: #dadada 3px solid;
	border-radius: 6px;
	color: #fff;
	font-size: 16px;
	display: block;
	padding: 1em;

}
#trial .trialBt:hover{
	text-decoration: none;
	background-color: #333;
}
#trial .manual {
	
}
#trial h3.manualH3{

	width: 100%;
	max-width: 960px;
	font-weight: bold;
	padding: 1%;
	background-color: #666;
	margin: 20px auto 10px;
}
#trial .manual {
	width: 100%;
	max-width: 960px;
	margin: 0px auto 10px;
	display: table;
	border-spacing: 10px 0;
}
#trial .manual .manualBox {
	width: 50%;
	text-align: left;
	background-color: #1d1d1d;
	padding: 1% 1%;
	border: #dadada 3px solid;
	border-radius: 6px;
	display: table-cell;

}
#trial table{
	margin: 0;
}
#trial .manual .manualBox h4{
	color: #01a0e4;
	padding: 0 1% 5px;
	font-weight: bold;
}
#trial ul.notes{
	border: #666 1px solid;
	margin: 10px 0;
	padding: 1em;
	text-align: left;
}
#trial ul.notes li{
	margin: 0.5em 0;
	margin-left: 1em;
	line-height: 1.5em;
	font-size: 13px;
}
.eqBox #trial.box table td.cat{
	width: 8em;
	background-color: #444;
}


/*DLC*/
#dlc{
	padding-bottom: 5%;
}
#dlc h2{
	width: 98%;
	margin: 0 auto;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	color:#ffce37;
	border-left:#ffce37 5px solid;
	padding:1%;
	font-size:36px;
	line-height:1.3em;
	font-weight: bold;
	letter-spacing: 0.5px;
}

.dlcWrap{
	width: 98%;
	margin: 0 auto;
	border: #333 1px solid;
	padding: 2%;
	background-image: url(../img/bg_black70.png);
	line-height: 1.8em;
	font-size: 14px;
}
.dlcBox{
	width: 98%;
	margin: 10px 0.5%;
	display: inline-block;
	vertical-align: top;
	border: #333 1px solid;
	background-color: #000;
}
.dlcBox ul.item{
	padding: 0.5em;
	background-color: #323232;
}
.dlcBox .txt{
	padding: 0.5em;
	line-height: 1.5em;
}
.dlcBox h3{
	padding: 0.5em;	
	text-shadow: none;

}
.dlcBox h3 .category{
	background-color: #fff;
	border-radius: 6px;
	padding:0  0.5em;
	font-size: 12px;
	margin-right: 5px;
	display: inline-block;
	vertical-align: top;
	color: #111;
}
.dlcBox h3 .dlcName{
	display: inline-block;
	vertical-align: top;
}
.dlcBox h3.productCode{
	background-color:#F19827;
}
.dlcBox h3.shopBonus{
	background-color: #32B141;
}

.dlcBox h3.free{
	background-color:#0396F4;
}
.dlcBox h3.pay{
	background-color: #F53AAF;
}

.dlcBox strong{
	color:#ffce37;
}
.dlcBox ul.notes,.upDateBox ul.notes{
	color:#F51115;
	font-size: 11px;
}

/*アップデート*/
#update{
	padding-bottom: 5%;
}
#update .txtBox{
	padding-top: 2%;
}
#update h2{
	width: 98%;
	margin: 0 auto;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	color:#ffce37;
	border-left:#ffce37 5px solid;
	padding:1%;
	font-size:36px;
	line-height:1.3em;
	font-weight: bold;
	letter-spacing: 0.5px;
}
#update h3{
	background-color: #000;
	padding: 0.5em;
	margin-top: 5px;
	background-image:url(../img/second/sys_bg.png);
	text-shadow:0px 0px 3px #000000,0px 0px 5px #000000;
}
.upDateBox{
	width: 98%;
	margin: 0 auto;
	border: #333 1px solid;
	padding: 2%;
	background-image: url(../img/bg_black70.png);
	line-height: 1.8em;
	font-size: 14px;
}
ul.upDateList{
	margin-left: 1em;
	padding: 0.5em;
}
ul.upDateList li{
	text-indent: -1em;
	line-height: 1.3em;
	margin: 0.4em;
}



/* Order Page - Test */
#colorbox .orderwrap {
	width: 980px !important;
}

#cboxLoaded .orderwrap {
	width: 980px !important;
}

.ordertext {

}



/*----------------------------------------------------------------
スマホエリア
-----------------------------------------------------------------*/

@media (max-width: 978px) {

    /*--------------------------------------------
    トップ
    ----------------------------------------------*/
    /*--------------------------------------------
    ストーリー
    ----------------------------------------------*/
    /*--------------------------------------------
    キャラクター
    ----------------------------------------------*/
    /*--------------------------------------------
    ギャラリー
    ----------------------------------------------*/

}
@media (max-width: 786px) {
    /*--------------------------------------------
    トップ
    ----------------------------------------------*/
	#top{
		background-size:100% auto;
		background-image:url(../img/mobile/top7.jpg);
		background-position:left top;
	}
	#top .topContents{
		padding-top:160%;
	}
	#top #newsWrap{
		width:98%;
		position:relative;
		margin:1% auto;
		left:0;
		bottom:0;

	}
	#top .movieBox{
		width:98%;
		margin:1% 1%;
	}
	.bannerArea a{
	width: 49%;
	}
	#top .silver{
		display: none;
	}
    /*--------------------------------------------
    ストーリー
    ----------------------------------------------*/
	#world.mainBg{
		background-position:30% center;
	}
	#world .txtBox strong,#storypage .txtBox strong{
		font-size:18px;
		font-weight:normal;
	}
	#world .txtBox{
		font-size:18px;
		line-height:2em;
	}
	#storypage.mainBg{
		background-image:url(../story/img/storypage/bg_mobile.jpg);
		background-size:100% auto;
	}
	#storypage h2{
		width:100%;
	}
	#storypage .txtBox{
		width:90%;
		margin:0 auto;
		font-size:18px;
		line-height:2em;
		padding:5% 0;
	}
	
	#tips h2{
		font-size:36px;
	}
	#tips h2 .cap{
		font-size:48px;
	}
	#tips h3{
		font-weight:normal;
	}
    /*--------------------------------------------
    キャラクター
    ----------------------------------------------*/
	#chara #subNavi a{
		width:10.61%;
	}
	#chara .charaArea{
		width: 100%;
		overflow-x: hidden;
		background-size:100% auto;
	}
	
	#chara #charaImg{
		width:140%;
		right:-50%;
	}
	#chara .charaWordBox{
		width:140%;
		right:0%;
	}
	#chara .charaBox{
		width:50%;
		position:absolute;
		z-index:3;
		top:0;
		left:0;
		background-image:url(../img/bg_black70.png);
	}
	#chara .charaTxtBox{
		width:100%;
		max-width:650px;
		position:relative;
		margin-left:auto;
		padding-bottom:5%;
	}
	#chara .styleBt{
		width: 32.3%;
	}
	#chara .styleBt .new{
		top:0px;
		left:3px;
	}
	.sampleVoice .playBT{
		width: 49%;
	}

    /*--------------------------------------------
    システム
    ----------------------------------------------*/
	
	.sysBox h2.cont_h2{
		font-size:30px;
	}
	.sysBox h3.cont_h3{
		font-size:24px;
	}
	
	.sysBox .box{
		padding:2%;
	}
	.sysBox .txtBox,.sysBox .txtBox.sm{
		width:100%;
		display:block;
	}
	.sysBox .img,.sysBox .img.sm{
		width:100%;
		display:block;
	}
	#flow .floatWrap .txt{
		width: 100%;
		display:block;
	}
#flow .floatWrap .img{
		width: 100%;
		display:block;
	}
#flow .boxWrap{
	display:block;
}
#flow .boxWrap .floatBox{
	width: 100%;
	display:block;
	margin: 5px 0;
}
#flow .boxWrap .floatBox .txt{
	font-size: 12px;
}
#flow h3.flowH3{
	font-size: 14px;
}
#flow .glitchBox {
		display: -webkit-box;
		display: -moz-box;
		display: box;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		box-orient: vertical;
}
#flow .glitchBox .img{
	width: 100%;
	display:block;
	margin-right:0;
	-webkit-box-ordinal-group: 2;
	-moz-box-ordinal-group: 2;
	box-ordinal-group: 2;
	
}
#flow .glitchBox .txt{
	width: 100%;
	display:block;
	margin-right:0;
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
	box-ordinal-group: 1;
	margin-bottom: 15px;
}
#flow .glitchBox .txt:after{
	border-bottom:none;
	border-right: 12px solid transparent;
 	border-left: 12px solid transparent;
 	border-top: 12px solid #f37f0a;
 	content: '';
 	margin-top: -10px;
 	position: absolute;
 	left: 50%;
 	top: auto;
	bottom:-12px;
}

#flow h4.checkH4{
	font-size: 14px;
}
#flow .bugBox .txt{
	width: 100%;
	display: block;
}
#flow .bugBox .img{
	width: 100%;
	display: block;
}

#flow h4.jackH4{
	font-size: 14px;
}
#flow .bottomTxt{
	font-size:18px;
}

    /*--------------------------------------------
    ギャラリー
    ----------------------------------------------*/
	.galleryBox a{
		width:19%;
	}
	/*--------------------------------------------
    ムービー
    ----------------------------------------------*/

	#moviepage .movieBox{
		width:49%;
	}
	
	/*--------------------------------------------
    サウンド
    ----------------------------------------------*/
	.songWrap .songBox{
		width: 100%;
		display: block;
	}
	
	.artistBox h1.cont_h1{
		font-size:18px;
	}
	#bgmList li.playBT{
		font-size: 14px;
	}
    /*--------------------------------------------
    スペシャル
    ----------------------------------------------*/
    /*--------------------------------------------
    特典情報
    ----------------------------------------------*/
	.bonusBox .img,#limited.bonusBox .img{
		width: 100%;
		display:block;
		margin: 0 auto;
	}

	.bonusBox .txtBox,#limited.bonusBox .txtBox{
		width: 100%;
		display:block;
		margin: 0 auto;
	}
	/*予約特典紹介*/
	.eqBox .box .chBox{
		width: 49%;
	}
	
	.eqBox .box .btBox.float .txtBox{
		width:100%;
		display:block;
	}
	.eqBox .box .btBox.float .img{
		width:100%;
		display:block;
		padding: 1%;

	}
	#trial .manual {
		display: block;
	}
	#trial .manual .manualBox {
		width: 99%;
		display: block;
		margin: 0 auto 5px;
	}
	
	/*DLC*/
	.dlcBox{
		width:49%;
	}
	#dlc h2{
		font-size:30px;
	}



}
@media (max-width: 480px) {
    /*--------------------------------------------
    トップ
    ----------------------------------------------*/
	.bannerArea a{
	width: 99%;
	}
	.spec dl{
		line-height:1.5em;
		padding:1em 2%;
	}
	.spec dl dt{background-color:  #2d2d2d; margin-right: 0.5em;}
	.spec dl dd{
		margin-bottom: 0.5em;
	}
    /*--------------------------------------------
    ストーリー
    ----------------------------------------------*/
	
	#world .txtBox strong,#storypage .txtBox strong{
		font-size:16px;
	}
	#world .txtBox,#storypage .txtBox{
		font-size:13px;
		line-height:1.6em;
	}
	#tips h2{
		font-size:24px;
	}
	#tips h2 .cap{
		font-size:36px;
	}
	#tips .tipsBox{
		font-size:14px;
	}
	#tips .tipsBox .txt{
		width:100%;
		margin-right:0;
		display:block;
	}
	#tips .tipsBox .img{
		width:90%;
		display:block;
		margin:2% auto 1%;
	}
    /*--------------------------------------------
    キャラクター
    ----------------------------------------------*/
	#chara #subNavi a{
		width:16.16%;
	}
	#chara .charaArea{
		background-size:140% auto;
		background-position:center top;
	}
	
	#chara #charaImg{
		width:140%;
		right:-25%;
	}
	#chara .charaWordBox{
		width:170%;
		right:50%;
		margin-top: 10px;
	}
	#chara .charaBox{
		width:100%;
		position:relative;
		padding-bottom:20px;
	}
	
	#chara .charaTxtBox{
		padding-bottom:1%;
		margin-top: 20px;
	}
	#chara #sumika img.charaName,#chara #lydia img.charaName,#chara #natsuo img.charaName,#chara #rin img.charaName,#chara #rook img.charaName,#chara #hajime img.charaName,#chara #senji img.charaName{
		margin-top:-25%;
	}
    /*--------------------------------------------
    システム
    ----------------------------------------------*/
	.sysBox h2.cont_h2{
		font-size:18px;
	}
	.sysBox h3.cont_h3{
		font-size:18px;
		margin:1% 0;
	}
	.sysBox .txt{
		font-size:14px;
		line-height:1.5em;
		padding:2% 1%;
	}
	.sysBox .img.wide img.twin{
		width: 100%;
		margin: 2px 0;
	}
	#flow .bugFloat{
		width: 100%;
		margin: 5px 0;
		display: block;
	}
		#flow .jackBox .txt{
			width: 100%;
			display: block;
		}
		#flow .jackBox .img{
			width: 100%;
			display: block;
		}
	#flow .bottomTxt{
		font-size:14px;
	}

	/*--------------------------------------------
    ギャラリー
    ----------------------------------------------*/
	.galleryBox a{
		width:24%;
	}
	/*--------------------------------------------
    ムービー
    ----------------------------------------------*/

	#moviepage .movieBox{
		width:99%;
		display:block;
	}
	
    /*--------------------------------------------
    サウンド
    ----------------------------------------------*/
	.songTitle{
		font-size: 18px;
	}
	.artistBox .img{
		width: 100%;
		display: block;
		padding: 1% 1% 0;
	}
	.artistBox .txtBox{
		width: 100%;
		display: block;
		padding: 0 1% 2%;
	}
	
    /*--------------------------------------------
    製品情報
    ----------------------------------------------*/
	.news dt{
		width:8em;
		float:none;
		
	}
	.news dd{
		margin-left:0;
	}
	dl.creatorBox dt{
		width:100%;
		border-bottom:none;
		float:none;
		margin-bottom:0;
	}
	dl.creatorBox dd{
		margin-left:0;
		border-bottom:none;

	}
	
	.productBox .cat{
		text-align: center;
	}

	/*コラボ*/
#collabo h2.cont_h2{
	font-size:18px;
}
#collabo .txt{
	font-size: 14px;
}
#collabo strong.large{
	font-size: 16px;
}
#collabo .collaboInfo dt{
	width: 8em;
	float:none;

}
#collabo .collaboInfo dd{
	margin-left: 0;
	margin-bottom: 1.5em;
}
	
#collabo .frqInfo h3{
	font-size:15px;
}
#collabo .frqInfo h4{
	font-size:16px;
}
#collabo .frqInfo .img{
	width: 70%;
	margin: 2% auto 0;
	display: block;
}
#collabo .frqInfo .txt{
	width: 100%;
	padding: 1%;
	display: block;
}
	/*予約特典紹介*/
	.eqBox .box .chBox{
		width: 99%;
		display: block;
	}
	.eqBox h2{
		font-size: 18px;
	}
	.eqBox .box .storyTxt{
		font-size: 14px;
	}
	.eqBox .box .btBox .txt{
		font-size: 14px;
	}
	.eqBox .box .btBox .imgBox{
		width: 100%;
		display:block;
		margin: 0 0 5px;
		padding: 1%;
	}
	.eqBox .box a.pjax2{
		font-size: 14px;
	}
    /*--------------------------------------------
    スペシャル
    ----------------------------------------------*/
	.itemBox a{
		width:32.3%;
	}
	.itemBox a.wide{
		width:49%;
	}
	#twitter-campaign h2.cont_h2{
		font-size:18px;
	}
	#twitter-campaign h3{
		font-size:15px;
	}
	#twitter-campaign .txt{
		font-size: 14px;
	}
	#twitter-campaign ul.notes{
		font-size: 12px;
	}
	#twitter-campaign .img{
		width: 100%;
		display: block;
		padding: 1%;
	}

	#twitter-campaign .castList{
			width: 100%;
			display: block;
	}

    /*--------------------------------------------
    特典情報
    ----------------------------------------------*/
	.bonusBox h2.contTitle,#shop.bonusBox h2.contTitle{
		font-size: 18px;
	}
	.bonusBox h2 .small{
		font-size: 12px;
	}

	.bonusBox h3{
		font-size: 14px;
	}
	/*DLC*/
	.dlcBox{
		width:99%;
	}

	 #dlc h2{
		font-size:24px;
	}
	.dlcBox h3 .dlcName{
			font-size: 14px;
	}
	.dlcBox .txt{
		font-size: 12px;
	}

	
}