@media screen and (max-width: 699px) {
   /* 表示領域が699px以下の場合に適用するスタイル */



@charset "utf-8";
/* CSS Document */
.sp_none{
	display: none;
}
body{
	background: #000
}

.bg_sparks{
	background: url(../images/bg_sparks.png) no-repeat;
	background-size:100% auto;
	background-position: bottom;
}

.bg_sub{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c60f12+0,010200+100 */
	background: url(../images/bg_sparks.png) no-repeat,rgb(198,15,18); /* Old browsers */
	background: url(../images/bg_sparks.png) no-repeat,-moz-linear-gradient(top,  rgba(198,15,18,1) 0%, rgba(1,2,0,1) 100%); /* FF3.6-15 */
	background: url(../images/bg_sparks.png) no-repeat,-webkit-linear-gradient(top,  rgba(198,15,18,1) 0%,rgba(1,2,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: url(../images/bg_sparks.png) no-repeat,linear-gradient(to bottom,  rgba(198,15,18,1) 0%,rgba(1,2,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: url(../images/bg_sparks.png),progid:DXImageTransform.Microsoft.gradient( startColorstr='#c60f12', endColorstr='#010200',GradientType=0 ); /* IE6-9 */
	background-position: bottom;
	background-size:100% auto;

}


/* ==================================
	ヘッダー
================================== */
.header{
	background:black;
	color:#fff;
	border-bottom: #afafaf 1px solid;
}

.header img{
	width: 95%;
}

.header ul{
	padding:0 5% 0 10%;
}

.header li{
	margin: 0 3% 0 0;
}

/*ナビ*/
.navbar-nav{
	width:100%
}

.dropdown-menu{
	background:#000;
	width:100%;
}

.dropdown-menu>li>a{
	width:100%;
	color:#fff;
	font-size:120%;
	border-bottom:1px dotted #fff;
}
.navbar-toggle{
	border:1px solid #fff;
}

.icon-bar{
	background:#fff;
}

.dropdown img{
	width:90;
}

.top_img{
	width:68%;
}

.ope_img{
	width:88%;
}
.sc_img{
	width:100%;
}

.chara_img{
	width:110%;
}

/* ==================================
	h2画像
================================== */
.h2_img_area {
	widht:100%;
	margin:0;
	padding:0;
	display: block;
	line-height:0;
}

.h2_img_area img{
	width:100%;
}


/* ==================================
	フッター
================================== */
.footer{
	background-color:#404040;
	color:#fff;
	padding:2% 0 ;
}

/* ==================================
	トップ画像
================================== */
.main_visual_s{
	width: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c60f12+0,010200+100 */
background: rgb(198,15,18); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(198,15,18,1) 0%, rgba(1,2,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(198,15,18,1) 0%,rgba(1,2,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(198,15,18,1) 0%,rgba(1,2,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c60f12', endColorstr='#010200',GradientType=0 ); /* IE6-9 */
}

.main_visual_s img{
	width:100%;
}

#textbg{
	padding:0.2% 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e285d+0,740000+100 */
background: rgb(14,40,93); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(14,40,93,1) 0%, rgba(116,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(14,40,93,1) 0%,rgba(116,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(14,40,93,1) 0%,rgba(116,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e285d', endColorstr='#740000',GradientType=1 ); /* IE6-9 */
border-bottom: 1px solid #afafaf;
border-top: 1px solid #afafaf;
}

#textbg img{
	width:100%;
	padding:0 5%;
}

/*サブ画像*/
.sub_visual {
	widht:100%;
	margin:0;
	padding:0;
}

.sub_visual img{
	width:100%;
}
.sub_img_area{
	background:#c40f12;
}


/* ==================================
	スクリーンショット
================================== */

#screen{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#adadad+0,7e7e7e+50,afafaf+100 */
background: url(../images/bg_grunge.png),rgb(173,173,173); /* Old browsers */
background: url(../images/bg_grunge.png),-moz-linear-gradient(left,  rgba(173,173,173,1) 0%, rgba(126,126,126,1) 50%, rgba(175,175,175,1) 100%); /* FF3.6-15 */
background: url(../images/bg_grunge.png),-webkit-linear-gradient(left,  rgba(173,173,173,1) 0%,rgba(126,126,126,1) 50%,rgba(175,175,175,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: url(../images/bg_grunge.png),linear-gradient(to right,  rgba(173,173,173,1) 0%,rgba(126,126,126,1) 50%,rgba(175,175,175,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adadad', endColorstr='#afafaf',GradientType=1 ); /* IE6-9 */
padding: 0.5% 0;
text-align:center;
}

#screen img{
	width:90%;
}

#screen p{
	color:black;
	font-weight: 700;
	font-size: 120%;
	text-shadow:0px 0px 5px rgba(255,255,255,1);
}

#border01{
	height: 14px;
	background-image:url(../images/bprder01.png) ;
}

#border02{
	height: 14px;
	background-image:url(../images/bprder02.png) ;
	margin: 0 0 2% 0;
}

/* ==================================
	ウィンドウ系
================================== */
.win{
	margin: 0 0 0% 0;
}
.win img{
	width:100%;
}

.win_main{
	background: #a8a8a8;
	padding:2% 5%;
	background:url(../images/bg_win02.png);
	background-size:100%;
	/*line-height:0;*/
}


.win_chara{
	background: #333;
	margin: 0 2%;
	padding:0% 0;
}

.win_chara img{
	width:50%
}

.win_btn img{
	width:90%;
	display:block;
	margin:5%;
}



.frame_under_area {
	widht:100%;
	margin:0;
	padding:0;
	display: block;
		line-height:0;
}

.frame_under_area img{
	width:100%;
}

.index_under_frame{
	margin: 0 0 3% 0;
}

/* ==================================
	キャラクター
================================== */
.chara{
	padding:2%;
}

.chara img{
	margin:  0 0 2% 0;
}
.chara p{
	font-size: 110%;
	color:#fff;
	text-shadow:0px 0px 10px rgba(0,0,0,1);
	background: rgba(0,0,0,0.7);
	padding:3%;
	border-radius:15px;
}

.chara_select img{
	margin: 0 0.5% 2% 0.5%;
	width:40%
}



.chara_bg_blue{
	margin: 2%;
}

/*テーブル*/

.chara table{
	margin: 0% 0 0 0;
	padding:0;
	width:100%;
	border:1px solid #291c60;
}
.chara th{
	border:1px solid #fff;
	background: #291c60;
	color:#fff;
	padding:1%;
}

.chara tr td{
	border:1px solid #291c60;
	background: rgba(255,255,255,0.7);
	padding:0.5%;
}

.width12{
	width: 12.5%;
}

.width50{
	width: 50%;
}

.tr_bg_white{
	background:rgba(255,255,255,0.3);
}

/*キャラ名スマホ用ボタン*/
.sp_chara_select_wx ul{
	background: #79afbe;
	border: 1px solid #fff;
	border-radius: 5px;
}

.sp_chara_select_wx li{
	border-bottom: 1px solid #fff;
	list-style: none;
	padding:2% 0;
	}

.sp_chara_select_zx ul{
	background: #be7979;
	border: 1px solid #fff;
	border-radius: 5px;
}

.sp_chara_select_zx li{
	border-bottom: 1px solid #fff;
	list-style: none;
	padding:2% 0;
	}
	
.sp_chara_margin{
	margin:120% 0 0 0;
}
/* ==================================
	基本設定・画面の見方
================================== */
.system img{
	width: 90%;
}

/* ==================================
	戻るボタン
================================== */
.back img{
	margin: 2% 0 0 0 ;
	width:100%
}

.h4_color01{
	background:#5e1e41;
	margin:2% 0 1% 0;
	font-size:140%;
	font-weight:700;
	border-radius:5px;
	text-align:center;
}

.h4_color02{
	background:#5e1e41;
	margin:2% 0 1% 0;
	font-size:140%;
	font-weight:700;
	border-radius:5px;
	text-align:center;
}

.h4_color03{
	background:#5e1e41;
	margin:2% 0 1% 0;
	font-size:140%;
	font-weight:700;
	border-radius:5px;
	text-align:center;
}

.command img{
	width:10%;
}

.button img{
	width:10%;
}
.bt-content img{
	width:10%;
}

/* ==================================
	エンドテキスト
================================== */
.wixoss_bg{
	background: url(../images/bg_img.jpg);
	color:#fff;
}

.wixoss_bg img{
	width: 100%;
}


}