/* ===================================================================

	基本レイアウト
	
	1. リセット／ベーススタイル
	2. 大枠レイアウト
	3. header
	4. footer
	5. 見出し
	6. 汎用スタイル
	7. 各ページ毎のスタイル
	
	―――――――――――――
	
	PS4	　	   … PS4のみ適用のスタイルはps4_style.cssに記述	
	PC 	　	   … IE対応はIE8以上
	tablet/vita… PC用スタイルを適用（viewportでwidthを固定）
	mobile	 　… breakpoint: 640px

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


/* -------------------------------------------------------------------
	
	1. リセット／ベーススタイル
		
-------------------------------------------------------------------- */

/* ----------------------------------
	Reset
---------------------------------- */	
/* 
html5doctor.com Reset Stylesheet
v1.4.1 
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, a,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	list-style: none;
	text-decoration: none;
}

dt{ font-weight:bold;	font-size:26px;}

@media screen and (max-width: 640px){	
dt{ font-weight:bold;	font-size:16px;}
}

dd{ display:block;}

/* ----------------------------------
	img
---------------------------------- */
img{
	margin: 0 auto;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: middle;
	max-width: 100%; /*Fluid Image*/
	height: auto; /*Fluid Image*/
}

.ie8 img{
	width: auto; /*Fluid Image*/
	}
	
/* ----------------------------------
	html,body
---------------------------------- */

html{	height:100%;	min-height:100%;	}

body{  
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif,arial,helvetica;
	font-size:16px;	color:#fff;	line-height:1.6em;	text-align:left;	height:100%;
	background-color:#2a2a2a;
	-webkit-text-size-adjust: 100%; /*文字サイズの自動調整機能のキャンセル*/
    -ms-text-size-adjust: 100%; /*文字サイズの自動調整機能のキャンセル*/
}

@media screen and (max-width: 640px){
html{	height:auto;}
body{ height:auto; letter-spacing: -0.001em;/*iOS4でのテキスト隙間への対応*/		line-height:1.5em;	}
}
@media screen and (min-width: 641px){
body{ font-size:20px; line-height:1.3em; }
}
/* ----------------------------------
	link
---------------------------------- */	
a{
	color:#4eb1f2;
	-webkit-tap-highlight-color: rgba(78,177,242,0.70);/*CSS3 タップ時ハイライト表示指定*/
}

a:hover{	color:#4eb1f2;	text-decoration:underline;}
	
/* ----------------------------------
	clearfix
---------------------------------- */
.clearfix:after{
	content: " "; 
	display:block; 
	height: 0.1px; 
	font-size: 0;/*firefox対策*/
	line-height: 0; 
	clear:both; 
	visibility:hidden;
}

.clearfix{
	display:inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix{
	height:1%;
}

.clearfix{
	display:block;
}
/* End hide from IE-mac */
	
	
/* -------------------------------------------------------------------

	2. 大枠レイアウト
	
-------------------------------------------------------------------- */
	
/* -----------------------------------------------------
	wrapper
----------------------------------------------------- */

/*width: 641px以上*/
@media screen and (min-width: 641px){
#wrapper{
	margin:0 auto;
	width: 100%;
	height:100%;
	position: relative;
	}
}


/* モバイル用 */
@media screen and (max-width: 640px){
#wapper{
	margin:0 auto;
	width: 100%;
	height:100%;
	min-height:100%;
	background:#FFF;
	position: relative;	
	}
}
	

/* -----------------------------------------------------
	contents
----------------------------------------------------- */
/*width: 641px以上*/
@media screen and (min-width:641px){
#contents{
	margin:0px auto 50px;/* footer margin-top:-50px分をプラス */
	padding:55px 0px 0px 0px;/* header = 50px */
	min-width:300px;	
	width: 1200px;	
	height: auto;
	min-height: 90%;
	/* box-shadow */
	box-shadow:rgba(0, 0, 0, 0.0784314) 0px 0px 10px 1px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.0784314) 0px 0px 10px 1px;
	-moz-box-shadow:rgba(0, 0, 0, 0.0784314) 0px 0px 10px 1px;	
	behavior:url(../shared/js/PIE.htc);/*CSS3 PIE実行*/
	}
.contentsInner{ padding:20px; }
}

@media screen and (max-width: 640px){
#contents{	margin:0px auto; padding:50px 0px 20px 0px; /*header,footer要素かぶり注意*/	width: auto; min-height:100%; }
.contentsInner{ padding:0 10px; }
}

/* -------------------------------------------------------------------

	3. header
	
-------------------------------------------------------------------- */
#header	{ position: fixed; top:0;	left: inherit; width:100%; height:55px;	padding:0;background:#3c3c3c;	z-index:10;
box-shadow:rgba(0, 0, 0, 0.360784) 0px 3px 5px -1px;	-webkit-box-shadow:rgba(0, 0, 0, 0.360784) 0px 3px 5px -1px;	-moz-box-shadow:rgba(0, 0, 0, 0.360784) 0px 3px 5px -1px;}
#header_inner{ width: 100%; padding:0px; margin:0 auto; }
@media screen and (min-width: 641px){
#header	{ min-width:1200px; }
#header_inner{ width:1200px; padding:0; margin:0 auto;	}
}
/*----- ナビゲーション sidr呼び出しボタン -----*/	
 #simple-menu{	margin:0; padding:0;	display: block; width:50px;	height:55px; text-indent:-99999px; float:left; background: url("../img/img_menu_icon.png") no-repeat 50% 50%;	cursor: pointer;	}

/* -------------------------------------------------------------------

	4. footer
	
-------------------------------------------------------------------- */

#footer	{
	width:100%;
	height:50px;
	padding:0;
	background-color:#333;
	color:#ccc;
	/* http://www.colorzilla.com/gradient-editor/ */
	background: #505050; /* Old browsers */
	background: -moz-linear-gradient(top,  #505050 0%, #343434 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(100%,#343434)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #505050 0%,#343434 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #505050 0%,#343434 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #505050 0%,#343434 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #505050 0%,#343434 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 ); /* IE6-9 */

	/* box-shadow */
	box-shadow:rgba(0, 0, 0, 0.360784) 0px -3px 5px -1px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.360784) 0px -3px 5px -1px;
	-moz-box-shadow:rgba(0, 0, 0, 0.360784) 0px -3px 5px -1px;
	}
	
@media screen and (min-width:641px){		
#footer	{	margin-top: -50px !important;	}
}	

/*---footer navi---*/
ul#page_nav{	width:90%; margin:auto;	padding-top:12px; font-weight: bold; vertical-align: middle; }
	
/*641px以上*/	
@media screen and (min-width:641px){
#footer{ min-width:1200px; }
ul#page_nav{	margin:auto; width:1160px; margin:0 auto; padding-top:12px; font-weight: bold; vertical-align: middle; font-size:100%;	}	
}
	
ul#page_nav li.page_prev{
	float: left;
	}
ul#page_nav li.page_next{	
	float: right;
	}
		
/*-- footerlink --*/
#footer a {
	color: #ccc;
}
#footer a:hover{
	color:#4eb1f2;	
	text-shadow:0px 0px 3px 0px #FFFFFF;
	}			


/* -------------------------------------------------------------------

	5. 見出し
	
-------------------------------------------------------------------- */

/* -----------------------------------------------------
	h1
----------------------------------------------------- */

#header h1{ padding-top:14px; padding-right:50px; /*menu icon幅50px分*/	text-align:center;	/*font-size: 16px;*/	font-size: 16px; color:#fff; }
	
@media screen and (max-width: 640px){	
#header h1{ font-size: 14px; }
}
@media screen and (min-width: 641px){
#header h1{ padding-top:14px; /*padding-right = menu icon幅*/	font-size: 100%; }
}


/* -----------------------------------------------------
    h2
----------------------------------------------------- */
/*-- h2テキスト共通 --*/
.h2text{ display:table-cell; vertical-align:middle;}
.h2title{  position:relative;
		color:#FFFFFF;
		background-repeat:no-repeat;
		padding-left:0.5em;
		font-size:28px;
		line-height:44px;
		width:auto;
		height:42px;
		background:url(../img/h2.png) no-repeat;
		}
.h2title:before{ content:"";display:block;position:absolute;top:0; }

@media screen and (max-width: 640px){
.h2title{ font-size:22px; width:auto;height:42px;/*padding:7px 0 5px 10px;*/word-break:break-all;
background:url(../img/h2_s.png) no-repeat left bottom; }
}
@media screen and (min-width: 641px){
/*.h2title{ font-size:28px;  line-height:44px;
width:auto;height:42px;background:url(../img/h2.png) no-repeat; }*/
}


/* -----------------------------------------------------
    h3
----------------------------------------------------- */
h3{  vertical-align:middle; color:#fab400; font-weight:bold;font-size:20px; }
.h3title{  background:no-repeat right bottom;}

@media screen and (max-width:320px){
h3{ margin-bottom:0.5em; font-size:18px; }
}
@media screen and (max-width:640px){
h3{ margin-bottom:0.5em; }
.h3title{ background-image:url(../img/h3_s.png); line-height:1.2; }
}
@media screen and (min-width: 641px){
h3{ margin-bottom:15px; }
.h3title{ font-size:28px;background-image:url(../img/h3.png); padding-bottom:8px;  }
}

/* -------------------------------------------------------------------

	6. 汎用スタイル
	
-------------------------------------------------------------------- */

/* -----------------------------------------------------
    link
----------------------------------------------------- */
.box a{ color:#fff;   text-decoration:underline;}
.box a:hover{    color:#4eb1f2;    text-decoration:none;}

/* -----------------------------------------------------
	.box指定（各要素囲み用）
----------------------------------------------------- */
.box{ margin:0 auto; padding:30px 30px 30px; width: auto;	}
.box p{	display: block;}

.box.frame{ background-color:#3c3c3c; margin-bottom:30px; }
.box.frame .titleFrame{ color:#cf00b3;font-size:28px; font-weight:bold;margin-bottom:25px; }

.box.border{ background-color:#000; border:2px solid #787878; }
.box.border dl dt{ color:#fab400; font-size:20px; margin-top:0.5em; }

/*モバイル用*/
@media screen and (max-width:640px){
.box{	margin:0 auto;	padding:20px 0; 	width: auto;	/*font-size: 16px;*/	}	
.box p{	display: block;clear:both;	}
.box img{	margin-right:auto;	margin-left:auto;}	

.box.frame{ margin-bottom:10px; padding:20px 10px; }
.box.frame .titleFrame{ font-size:22px; margin-bottom:15px; }
.box.frame img.ss{ margin:0 auto 10px auto; display:block; }

.box.border{ padding:20px 10px; }
.box.border dl dt{ font-size:18px; }
}

/* -----------------------------------------------------
    box
----------------------------------------------------- */
.box.lgbox{ padding-right:0;   padding-left:0;}

@media screen and (max-width:640px){
.sp_mg_top { margin-top:50% !important;  }
.box{  margin-bottom:15px; }   
}

/*-- タイトルが内場合の戦闘のbox --*/
.box.noTitle{padding-top:40px;}/*基本*/
.caution{   padding-left:1em; text-indent:-1em;}

/* -----------------------------------------------------
	画像指定
----------------------------------------------------- */
/* QRコード用 */
.img_QRcode{ float: right;	margin: 0 0 0 10px;display: block;	}
/* 画像回り込み指定 */
.img_right_s { float:none; display: block;	margin:0 0 10px 0;	/*margin:0 0 10px 10px;*//*width: auto;*/	}		
.img_left {	float: none;margin: 0 0 10px;	display: block;}
.img_right {float: none;margin: 0 0 10px;display: block;}
.img_center{ display: block;margin:0 auto;}

@media screen and (min-width:641px){	
.img_left {	float: left;margin: 0 20px 10px 0;}
.img_right {float: right;margin: 0 0 10px 20px;}
.img_right_s {float: right;margin: 0 0 10px 15px;	display: block;width:300px\9;}	
}
img.blocks{display:block;}
img.phBorder{border:1px solid #fff;}

/* -----------------------------------------------------
	アイコン指定
----------------------------------------------------- */
.t_icon{	margin: 0 auto;	}

/* -----------------------------------------------------
	PS4・PC / スマホ での表示切替指定
----------------------------------------------------- */	
@media screen and (min-width:641px){	
.pcNone	{	display: none;	}
}


@media screen and (max-width:640px){	
.spNone	{	display: none;	}
}


/* -----------------------------------------------------
	レイアウト調整
----------------------------------------------------- */
	
/*---- margin指定 ----*/
.mg_t15{	margin-top: 15px !important; }
.mg_t10{	margin-top: 10px !important; }
.mg_t20{	margin-top: 20px !important; }
.mg_t30{	margin-top: 30px !important; }
.mg_t40{	margin-top: 40px !important; }
.mg_b30{	margin-bottom: 30px !important; }
.mg_b40{	margin-bottom: 40px !important; }

.mg_t1{	margin-top: 1em !important; }

/*---- font指定 ----*/	
.f_blue{	color: #008cd6;	}
.f_red{	color: #c8151d;	}

p.indent1, ul.indent1 li, dl.indent1 dd
{ padding-left:1em; text-indent:-1em; }

.nowrap{ white-space:nowrap; }

.map_icon{ margin:4px 4px 4px 0; }

/* -----------------------------------------------------
	webfont指定              		scefont 3.7
----------------------------------------------------- */
@font-face{font-family:"sce3.7w1";src:url("../fonts/sce3.7w1.eot");src:url("../fonts/sce3.7w1.eot?#iefix") format("embedded-opentype"),url("../fonts/sce3.7w1.woff") format("woff"),url("../fonts/sce3.7w1.ttf") format("truetype"),url("../fonts/sce3.7w1.svg#sce3.7w1") format("svg");font-weight:normal;font-style:normal;font-stretch:normal}@font-face{font-family:"sce3.7w2";src:url("../fonts/sce3.7w2.eot");src:url("../fonts/sce3.7w2.eot?#iefix") format("embedded-opentype"),url("../fonts/sce3.7w2.woff") format("woff"),url("../fonts/sce3.7w2.ttf") format("truetype"),url("../fonts/sce3.7w2.svg#sce3.7w2") format("svg");font-weight:normal;font-style:normal;font-stretch:normal}

.ps-button-icon{font-family:"sce3.7w1", Arial, sans-serif; font-size:15px;line-height:15px; padding:0 3px;}
@media screen and (min-width: 641px){
.ps-button-icon{ font-size:24px; line-height:24px;}
}


/* -----------------------------------------------------
	list 指定
----------------------------------------------------- */
ul.disc	li {
	list-style:disc outside;
	margin-left:1.2em;
	margin-top:5px;
}

/* -----------------------------------------------------
    font & bgcolor
----------------------------------------------------- */
.lightTxt{color:#fff;}
.centerTxt{text-align:center;}
#wrapper.nextBg{height:auto;}
.nextBg #contents{background:url(../img/bg.jpg) center top no-repeat #2a2a2a;}

/*--copyright--*/
.copyright{
    font-size: 80%;
    line-height:1.4em;
}
.copylogo{
    margin-bottom:10px;
}
@media screen and (max-width: 640px){
.copyright{
    font-size: 10px;
    line-height:1.4em;
    }
}

/*　webfont指定変更 　20130213適用　*/
th.ps-button-icon,
.ps-button-icon{font-family:"sce3.7w1", Arial, sans-serif;
	font-size: inherit !important; /*h2や本文のfont-sizeを継承する*/
	padding:0 3px;	
	font-weight:normal !important;
	font-stretch:normal !important;
}


/* -----------------------------------------------------
    qr code frame
----------------------------------------------------- */
.qrframe{ width:auto; height:auto; margin:0 auto; padding:20px; margin:0 5px; background:#cf00b3; color:#FFFFFF;}

/* -----------------------------------------------------
    囲み
----------------------------------------------------- */
.boxframe{
    width:auto;
    height:auto;
    margin:0 auto;
    padding:20px;
    position:relative;
    border:1px solid #fff;
	background-image:url(../img/bg_blue2.png);
}
.boxframe dl{
    margin:0;
    padding:0;
    white-space:normal;
    color:#000;

}
.boxframe dt{
    font-size:22px;
    color:#1a317e;
    line-height:1.2;
    text-align:center;
}
.boxframe dd{
    margin-top:10px;
    display:block;
    vertical-align:middle;
}
@media screen and (max-width:640px){
.boxframe{ padding:10px; }
}
@media screen and (min-width: 641px){
.boxframe dt{ font-size:28px; }
}

/*-- テキスト内囲み --*/
.inTxtBox{
    border:1px solid #000;
    background-color:#ccc;
    padding:5px 10px;
    margin:5px auto;
    word-wrap:break-word;
}

/* -----------------------------------------------------
    表
----------------------------------------------------- */
table.dataTable{
    margin:0 auto;
    width: 100%;
    white-space:normal;
    vertical-align:middle;
	border-collapse: separate;/*追加*/
	border-spacing:2px;/*追加*/
}
table.dataTable th,table.dataTable td{ padding:8px 16px; color:#fff; }
table.dataTable tr:first-child th,
table.dataTable tr:first-child td{    border-top:none;}
table.dataTable th{ white-space:nowrap; background-color:#555555; text-align:left; vertical-align:middle; width:20%; font-weight:bold; }
table.dataTable td{ background-color:#3c3c3c; vertical-align:middle;}
table.dataTable td.txtLeft{	text-align:left;}
table.dataTable.iconTable th{   width:40px;}

table.dataTable .numBox{
    background-color:#b5b6b6;
    color:#000;
}
table.dataTable .numChildBox{
    background:none;
    color:#fff;
    text-align:left;
}

@media screen and (max-width:640px){
table.dataTable{ vertical-align:middle;    }
table.dataTable th,
table.dataTable td{ display: block; text-align:center;    }
table.dataTable th{ width:auto !important;border-right:none;line-height:34px;  }
table.dataTable td{ border-top:none; }
}

/* -----------------------------------------------------
	sidr指定（スライドメニュー）
----------------------------------------------------- */
@media screen and (max-width: 640px){
.nav_logo{	height:130px;overflow:hidden;max-width:300px;}
.nav_logo img{ width:90%; margin:auto; display:block; }
.sidr ul{ padding-bottom:40px; }
}
@media screen and (min-width: 641px){
.sidr{ width:400px; }
.sidr.left{ left:-400px; }
.sidr ul li a,.sidr ul li span{	padding:0 30px;}
.sidr ul li ul li a,
.sidr ul li ul li span{ padding-left:60px;}
.nav_logo{	height:200px;overflow:hidden;max-width:290px;}
}
/* -------------------------------------------------------------------

	7. 各ページ毎のスタイル
	
-------------------------------------------------------------------- */
/* -----------------------------------------------------
	story.html				
----------------------------------------------------- */
#story p{ margin-bottom:1em; }
@media screen and (max-width: 640px){
#story{ padding:30px 20px 0 20px; }
#story img{ display:block;margin:0 auto 1em auto; }
}
@media screen and (min-width: 641px){
#story{ padding:30px 80px; }
#phStory01{ float:right; margin:0 0 100px 30px; }
#phStory02{ float:left; }
#phStory03{ float:right; }
}
/* -----------------------------------------------------
	charactor.html				
----------------------------------------------------- */
.boxChara .titleChara{ color:#cf00b3;font-weight:bold; text-shadow:0px 0px 12px #000;-webkit-text-shadow:0px 0px 12px #000; -moz-text-shadow:0px 0px 12px #000; text-align:left; }
.boxChara img{ float:right; }
.boxChara  .boxText{ margin:auto;padding:0 20px 10px 20px; float:left; width:auto; }

#charaDelsin{ background: }
#charaReggie{ background:/*url(../img/Chara_Brent_L.jpg) no-repeat;*/ }
#charaFetch{ background:/*url(../img/Chara_Shean_L.jpg) no-repeat;*/ }
#charaDUP{ background:/*url(../img/Chara_Augustin_L.jpg) no-repeat;*/ }

@media screen and (min-width: 641px){
.boxChara .titleChara{ font-size:53px;margin-bottom:35px; }

#charaDelsin{ background:url(../img/Chara_Fetch_L.jpg) no-repeat; /*padding-right:75px;*/ min-height:420px; }
/*#charaDelsin .boxText{ width:670px; margin-top:320px; float:right; }*/

#charaReggie{ background:url(../img/Chara_Brent_L.jpg) no-repeat;/*padding-left:75px;margin-top:-20px;*/min-height:300px; }
/*#charaReggie .boxText{ width:560px; margin-top:90px; }*/

#charaFetch{ background:url(../img/Chara_Shean_L.jpg) no-repeat; /*padding-right:75px;margin-top:-220px;*/min-height:300px; }
/*#charaFetch .boxText{ width:500px; margin-top:290px; float:right; }*/

#charaDUP{ background:url(../img/Chara_Augustin_L.jpg) no-repeat;/*padding-right:75px;margin-top:-60px; margin-bottom:30px;*/min-height:300px; }
/*#charaDUP .boxText{ width:560px; margin-top:480px; float:right; }
#charaDUP .titleChara{ white-space:nowrap; float:right; }
#charaDUP .boxText{ width:500px; float:right; }*/

#line_pink{ border-bottom:solid 2px #cf00b3;}

}
@media screen and (max-width: 640px){
#wrapper.charactorBg{background-color:#000000;}
	
.boxChara .titleChara{ font-size:22px; line-height:22px;margin-bottom:3px; }
.boxChara .titleChara span{ font-size:14px;}
.boxChara .titleChara p .text01{ margin-bottom:20px;}

#charaDelsin{ /*background:url(../img/doc_character01_bg_s.png) no-repeat -100px 50px;background-size:90%;padding:30px 10px 0;*/ }
#charaDelsin .boxText{ margin-top:10px }
#charaDelsin img{ margin-top:0px;width:100%; }

#charaReggie{ /*background:url(../img/doc_character02_bg_s.png) no-repeat -150px 50px;background-size:100%;padding:0 10px 0;margin-top:10px;*/ }
#charaReggie .boxText{ margin-top:10px; }
#charaReggie img{ width:100%; }

#charaFetch{ /*background:url(../img/doc_character03_bg_s.png) no-repeat -100px 30px;background-size:100%;padding:0 10px 0;margin-top:10px;*/ }
#charaFetch .boxText{ margin-top:10px; }
#charaFetch img{ width:100%; }

#charaDUP{ /*background:url(../img/doc_character04_bg_s.png) no-repeat -100px 0px;background-size:80%;padding:0 10px 0;margin-top:30px;*/ }
#charaDUP .boxText{ margin-top:10px }
#charaDUP img{ width:100%; }

#line_pink{ border-bottom:solid 2px #cf00b3;}
}

/* -----------------------------------------------------
	control.html				
----------------------------------------------------- */
#controlList{ margin:-40px 10px 20px 10px; }
#controlList ul.left{ float:left; width:50%; }
#controlList ul.right{ float:right; width:50%; }
#controlList ul li{ margin-bottom:5px; }
#controlList var, .dataTable var
{ display:inline-block;width:36px; height:36px; background-color:#aaa; color:#000; line-height:36px; text-align:center; margin-right:8px;font-weight:bold; font-style:normal; }

#controlPad{ margin:20px auto 0 auto; }
@media screen and (max-width: 640px){
#controlSp{ position:fixed; background-color:#000;	top:55px; margin-left:0px ;z-index:9;}
#controlList{ margin-top:55%; }
#controlList var, .dataTable var
{ width:30px; height:30px; line-height:34px;margin:0 4px; font-size:12px;}
}
@media screen and (min-width: 641px){
#controlPad li:first-child{ float:left; }
#controlPad li:last-child{ float:right; }
}