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

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

#snsapi{
	width:205px;
	overflow:hidden;
	position:absolute;
	top:13px;
	right:10px;
}

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


/*-----------LINK----------*/
#official{
	display:block;
	width:220px;
	height:20px;
	border:1px #990 solid;
	background-color:#000;
	color:#CCC;
	text-decoration:none;
	font-size:12px;
	text-align:center;
	padding-top:3px;
	border-radius:5px;
	
	position:absolute;
	top:10px;
	right:230px;
}

/*------DLCトップ用-----*/


html,
body{
	height:100%;
	background-color:#000;
	background-image:url(../images/header.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	font-size:12px;
	margin:0;
	color:#CCC;
	line-height:1.5;
}

a{
	color:#F00;
}

a.text_button{
	padding:2px 5px;
	background-color:#900;
	color:#FFF;
	font-size:11px;
	text-decoration:none;
	font-weight:bold;
}

#wrapper{
	margin:0 auto;
	width:820px;
	min-height:100%;
	position:relative;
}

.mark{
	display:block;
	position:absolute;
	left:-23px;
}

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

.clearfix {
  min-height: 1px;
}


#header{
	font-size:1px;
	position:relative;
}


#header #dlcinfo{
	padding-top:174px;
	padding-left:240px;
}
#header #dlcinfo p{
	margin:0;
	width:558px;
	border:1px #900 solid;
	background-image:url(../images/info-bg.png);
	padding:10px;
	color:#900;
	font-size:14px;
}

#header #dlcinfo a{
	text-decoration:none;
	color:#900;
}

#contents{
	width:800px;
	margin-top:30px;
	margin-left:20px;
	/*padding-top:346px;*/
}


#contents #navi-box{
	float:left;
	width:163px;
}
#contents .navi{
	/*min-height:300px;*/
	padding:0 5px;
	background-color:#999;
	position:relative;
	border-radius:2px;

}

#contents .navi a{
	text-align:center;
	font-weight:bold;
	font-size:120%;
	display:block;
	padding-top:2px;
	padding-bottom:3px;

	color:#1626C8;
	border-width:1px 0 0 0;
	border-color:#8C6C68;
	border-style:dotted;
	text-decoration:none;
}

#contents .navi a:first-child{
	border-width:0;
}

#contents #article{
	width:610px;
	float:left;
	margin-left:10px;
}

#contents #article div.title{
	color:#FFF;
	border-width:0px 0 1px 0;
	border-color:#FFF;
	border-style:dotted;
	/*background-color:#000;*/
	font-weight:bold;
	padding:0px 5px;
	font-size:210%;
}

#contents #article .item{
	margin-top:40px;
	margin-left:5px;
}

#contents #article img.float{
	margin-bottom:10px;
	margin-left:5px;
	float:right;
}


#contents #article .item span.free,
#contents #article .item span.charge{
	padding:3px 5px;
	color:#fff;
	font-size:100%;
	margin-left:5px;
}

#contents #article .item span.free{
	background-color:#06F;
}

#contents #article .item span.charge{
	background-color:#F00;
}


#contents #article .item span.ps4,
#contents #article .item span.ps3,
#contents #article .item span.xone{
	padding:3px 5px;
	font-size:80%;
	margin-left:5px;
	border:1px #FFF solid;
	background-color:#FFF;
	border-radius:10px;
}

#contents #article .item span.ps4{
	color:#222;
	border-color:#CCC;
}

#contents #article .item span.ps3{
	color:#C30;
	border-color:#C30;
}

#contents #article .item span.xone{
	color:#090;
	border-color:#090;
}


#contents #article .item span.p{
	font-size:120%;
	font-weight:bold;
	border:13px #FFF solid;
	border-width:0 0 0 13px;
	color:#FFF;
	padding-left:5px;
	padding-top:1px;
}


#contents #article .item img{
	margin:10px;
}


#contents #article .annotation{
	background-color:#333;
	padding:8px;
	border-radius:4px;
	margin-top:7px;
}

#contents #article .annotation h6{
	color:#FFF;
	font-size:130%;
	margin:0;
	padding:0;
	padding-bottom:3px;
	border:1px #CCC dotted;
	border-width:0 0 1px 0;
}

#contents #article .annotation p{
	margin:5px 0;
	
}
#contents #article .annotation p b{
	color:#FFF;
	display:block;
	border:1px #CCC solid;
	border-width:0 0 0 5px;
	padding-left:5px;
	margin-top:10px;
	margin-bottom:3px;
}




#contents #article ul{
	margin:0 0 0 0px;
	padding:0;}

#contents #article li{margin:0 0 0 30px;padding:0;}

#contents #article ul p{margin:0 0 0 -30px;}

#contents #article .backtotop{
	text-align:right;
}

#contents #article .backtotop a{
	padding:2px 5px;
	background-color:#333;
	border:1px #4D4D4D solid;
	color:#CCC;
	text-decoration:none;
}





#contents #article .bgm-box{
	margin-bottom:30px;
}

#contents #article .bgm-box .bgm-title,
#contents #article .bgm-box a{
	float:left;
	border:1px #333 solid;
}

#contents #article .bgm-box .bgm-title{
	width:200px;
	height:25px;
	line-height:25px;
	padding-left:10px;
	margin-bottom:10px;
}

#contents #article .bgm-box .voice{
	width:150px;
}
	
#contents #article .bgm-box a{
	margin-right:30px;
	margin-left:-1px;
}

#contents #article .bgm-box a.sound-bt{
	display:block;
	width:50px;
	height:25px;
	background-image:url(../images/soundBt.jpg);
	background-position:0 0;
}


/*-----GALLERY----*/
.cos-set img{
	width:95px;
	border:1px #000 solid;
}
.cos-set p{
	display:none;
	margin:0 !important;
}

.cos-set p img{
	margin:0 !important;
}

.cos-set .set-more{
	text-align:center;
	background-color:#777;
	color:#FFF;
	font-weight:bold;
	cursor:pointer;
	width:100px;
	margin:5px auto;
	border-radius:6px;
	
}


.cos-set a:hover img{
	border-color:#888;
}


#footer{
	background-color:#000;
	background-image:url(../images/copyright.jpg);
	background-repeat:no-repeat;
	background-position:center 13px;
	width:820px;
	height:48px;
	position:absolute;
	bottom:0;
	left:0;
	text-align:left;
	border:1px #555 solid;
	border-width:1px 0 0 0;
}

#footer #linkbox{
	display:block;
	margin-top:15px;
	margin-left:2px;
}


#footer #linkbox a{
	font-size:12px;
	padding:2px 10px;
	text-decoration:none;
	text-align:center;
	background-color:#666;
	color:#CCC;
}