@charset "UTF-8";
/* CSS Document */


/*--------------BASE-------------------*/
body{
	background-image:url(../images/common/body-bg.jpg);
	background-color:#000;
	background-position:bottom left;
	background-attachment:fixed;
	background-repeat:no-repeat;
	margin:0;
	font-size:14px;
	line-height:1.7;
	color:#eee;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

img{
	border:0;
}


a{
	color:#FC0;
}

.clearfix:after {
  content: "　";  
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

.lastitem{
	border:0 !important;
}

.key-mark{
	vertical-align:bottom;
	margin:0 3px;
	margin-top:-3px;
}

/*---------LEFT--------------*/
#nav{
	width:234px;
	height:100%;
	background-image:url(../images/common/menu-bg.png);
	/*background-color:#000;*/
	background-repeat:repeat-y;
	position:fixed;
	top:0;
	left:0;
	z-index:101;
	overflow-y:auto;
}

#nav #logo{
	display:block;
	margin:15px auto;
	margin-bottom:5px;
}

#nav #menu{
	width:234px;
	margin:0;
	padding:0;
	list-style-type:none;
	/*background-image:url(../images/common/content-bg.png);*/
	height:234px;
}

#nav #menu li{
	display:block;
	width:234px;
	height:29px;
	float:left;
	margin-bottom:0px;
}


#nav #menu a,
#nav #menu span{
	display:block;
	width:234px;
	height:29px;
	margin:0;
	background-repeat:no-repeat;
	background-position:0 -2px;
	font-size:0;
	text-indent:-999px;
	overflow:hidden;
	
	position:relative;
}

#nav #menu a:hover{
	background-position:0 -35px;
}

#nav #menu a .mark{
	position:absolute;
	top:8px;
	right:7px;
}

#nav #menu #menu-top{ background-image:url(../images/common/main-menu01.png); }
#nav #menu #menu-outline{ background-image:url(../images/common/main-menu02.png); }
#nav #menu #menu-characters{ background-image:url(../images/common/main-menu03.png); }
#nav #menu #menu-mode{ background-image:url(../images/common/main-menu04.png); }
#nav #menu #menu-system{ background-image:url(../images/common/main-menu05.png); }
#nav #menu #menu-screenshot{ background-image:url(../images/common/main-menu06.png); }
#nav #menu #menu-movie{ background-image:url(../images/common/main-menu07.png); }
#nav #menu #menu-dw8{ background-image:url(../images/common/main-menu08.png);}

#nav #menu span{
	background-position:0 -70px;
}

#nav .bt-order{
	display:block;
	margin:10px 0;
	margin-left:27px;
}

/*-------------Social--------------*/

#snsapi{
	width:205px;
	overflow:hidden;
	margin-top:10px;
	margin-left:30px;
	border:1px #666 dotted;
	border-width:1px 0 0 0;
	padding-top:20px;
	padding-bottom:10px;
}

#snsapi .api{
	width:100px;
	float:left;
}


#sns-link-banners{
	width:62px;
	position:fixed;
	top:100px;
	right:0;
	margin-top:0;
	text-align:left;
}

#sns-link-banners img{
	margin:0;
}



/*------------CONTENT COMMON-------*/


#container{
	min-width:800px;
	position:absolute;
	top:0;
/*	left:270px;*/
	right:0;
	min-height:584px;
	background-position:right top;
	background-attachment:fixed;
	background-repeat:no-repeat;
	
	left:0;
	padding-left:270px;
}

#container #sitename{
	height:20px;
	font-size:1px;
	margin:0;
	padding:0;
	margin-top:10px;
	padding-right:10px;
	text-align:right;
	visibility:visible;
}

#content{
	width:740px;
}

#content #content-title{
	margin-top:10px;
}

#content .bt-back{
	margin-top:10px;
	float:right;
}

#content #loading{
	display:block;
	margin-top:250px;
	margin-left:360px;
	width:40px;
	opacity:0.75;
	filter:alpha(opacity=75);
	visibility:hidden;
}

#content #content-body{
	margin-top:10px;
	background-image:url(../images/common/content-bg.png);
	
	width:738px;
	border:1px #444 solid;
}

#content #content-body #submenu{
	width:738px;
	height:63px;
	background-image:url(../images/common/submenu-bg.png);
	background-repeat:repeat-x;
	text-align:center;
}

#content #content-body #submenu img,
#content #content-body #submenu a,
#content #content-body #submenu span{
	margin:0;
	padding:0;
}

#content #content-body #submenu a,
#content #content-body #submenu span{
	display:inline;
	display:inline-block;
	height:35px;
	margin:3px 1px;
	background-image:url(../images/common/submenu-bt-bg.jpg);
	background-position:center 0;
	background-repeat:repeat-x;
}

#content #content-body #submenu a.active{
	background-position:center -35px;
}
#content #content-body #submenu span{
	background-position:center -70px;
}

#content #content-body #tabs{
	width:738px;
	height:29px;
	background-image:url(../images/common/tab-base.jpg);
	background-position:right top;
	background-repeat:no-repeat;
	text-indent:23px;
}

#content #content-body #tab0{
	margin-right:63px;
}

#content #content-body .content-article{
	width:690px;
	margin:0 auto;
	padding:10px 0;
	min-height:250px;
}


#content #content-body .content-article .jp-screen{
	text-align:right;
	font-size:90%;
	color:#CCC;
	margin-top:30px;
}

#content #content-body .content-article .page{
	margin-top:30px;
	text-align:left;
}

#content #content-body .content-article #page0{
	margin-top:0;
}


#content #content-body .content-article .page .p-title{
	display:block;
	margin-left:-5px;
	margin-bottom:10px;
}

#content #content-body .content-article .page p{
	margin:0;
	padding:0;
	padding-bottom:15px;
	text-align:justify;
}

#content #content-body .content-article .page div.pp{
	border:1px #868054 solid;
	border-width:0 0 1px 0;
	padding:1px 0;
	font-weight:bold;
	font-size:120%;
	color:#FF9;
	margin-bottom:7px;
	margin-top:50px;
	position:relative;
}

#content #content-body .content-article .page p.mark{
	position:absolute;
	width:70px;
	font-weight:bold;
	text-align:center;
	padding:0;
	margin:0;
	background-color:#FFF;
	border-radius:5px;
}
#content #content-body .content-article .page p.new{
	border:1px #F00 solid;
	color:#F00;
}


#content #content-body .content-article .page #page-menus{
	/*margin-bottom:40px;*/
}


#content #content-body .content-article .page .float-image{
	float:right;
	margin-left:10px;
}


#content #content-body .content-article .page .image-box{
	display:inline\9;
	display:inline-block;
	margin:0 4px;
	text-align:center;
	font-size:90%;
	line-height:1.5;
}

#content #content-body .content-article .page .image-box img{
	/*border:1px #333 solid;*/
}

#content #content-body .content-article .page .box{
	margin-top:20px;
	width:690px;
	background-image:url(../images/common/box-body.jpg);
	background-repeat:repeat-y;
}

#content #content-body .content-article .page .box .box-head{
	margin:0;
	padding:0;
	display:block;
}

#content #content-body .content-article .page .box .box-inner{
	background-image:url(../images/common/box-bg.jpg);
	background-position:right bottom;
	background-repeat:no-repeat;
	padding-bottom:30px;
}

#content #content-body .content-article .page .box .box-body{
	color:#222;
	width:650px;
	margin:0 auto;
	position:relative;
}

#content #content-body .content-article .page .box .box-body img{
	margin-top:10px;
}



#content #content-body .content-article .page .box .box-body .onepoint{
	/*background-color:#7C7664;*/
	color:#4B4132;
	padding:4px 10px;
	padding-left:0;
	font-weight:bold;
	font-size:120%;
}

#content #content-body .content-article .page .box .box-p{
	margin-left:-16px;
}


#content #content-body .content-article .prg{
	margin-top:10px;
	margin-left:-5px;
}

/*----------BGM-----*/
#bgm{
	width:202px;
	position:fixed;
	bottom:-100px;
	left:15px;
	background-image:url(../images/common/bgm-ui/ui-bg.jpg);
	background-repeat:repeat-y;
	z-index:102;
	margin:0;
	padding:0;
}

#bgm img#ui-top{
	margin:0;
	padding:0;
	display:block;
}

#bgm #on-off img,
#bgm #bgm-list{
	display:block;
	float:left;
}
#bgm #list-opener img{
	display:block;
	float:right;
}

#bgm #on-off img,
#bgm #list-opener img{
	margin-top:2px;
	margin-top:2px\9;
}

#bgm #bgm-list{
	width:140px;
	font-size:12px;
	margin-left:10px;
	color:#555;
	margin-bottom:10px;
	*padding-bottom:10px;
	line-height:2;
}


#bgm #bgm-list span{
	color:#666;
}

#bgm #bgm-list a{
	color:#600;
	text-decoration:none;
}

#bgm #bgm-list a:hover{
	color:#a00;
}

/*---------SIDE TAB------------*/
.sidebt{
	position:fixed;
	top:100px;
	right:-100px;
	z-index:104;
}


/*----------FOOTER-----*/
#footer{
	width:100%;
	min-width:1070px;
	height:158px;
	position:fixed;
	bottom:0;
	left:0;
	background-image:url(../images/common/footer-bg.png);
	background-repeat:repeat-x;
	z-index:103;
}

#footer #copyright{
	float:left;
	margin-top:22px;
	margin-left:20px;
}