@charset "utf-8";

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

	CSS information
	file name  :  layout.css
	infomation :  レイアウト
	
 ---------------------------------------------- */



html {  
    background: #cecece;  
}

#info{background:#364133 url(../images/bg_info.jpg) no-repeat center top;}
#story{background:#7ad1fe url(../images/bg_story.jpg) no-repeat center top;}
#next{background:#b0834a url(../images/bg_next.jpg) no-repeat center top;}
#back{background:#d6d5c3 url(../images/bg_back.jpg) no-repeat center top;}
#chara{background:#10101a url(../images/bg_chara.jpg) no-repeat center top;}
#correlation{background:#10101a url(../images/bg_correlation.jpg) no-repeat center top;}
#staff{background:#7dd7f9 url(../images/bg_staff.jpg) no-repeat center top;}
#music{background:#10101a url(../images/bg_music.jpg) no-repeat center top;}
#mobile{background:#4e5f69 url(../images/bg_mobile.jpg) no-repeat center top;}
#twitter{background: url(../images/bg_twitter.jpg) repeat center top;}
#type{background: url(../images/bg_type.jpg) repeat center top;}
#goods{background: url(../images/bg_goods.jpg) repeat center top;}
#archives{background: url(../images/bg_archives.jpg) repeat center top;}
#vote{background: url(../images/bg_vote.jpg) repeat center top;}


#container{
	width:100%;
	height:100%;
	margin:0 auto;
	background:url(../images/head_fence.png) repeat-x top;
	}


#header{
	width:960px;
	height:98px;/**/
	margin:0 auto;
	padding:0;
	text-align:left;/* ie6 */
	}

#navigation{
	width:960px;
	position:relative;
	}

	#navigation li{
		position:absolute;
		}

	#navigation li.home{top:5px; left:0px; width:121px; height:56px;}
	#navigation li.info{top:30px; left:94px; width:121px; height:56px;}
	#navigation li.story{top:1px; left:164px; width:121px; height:50px;}
	#navigation li.chara{top:37px; left:251px; width:121px; height:50px;}
	#navigation li.correlation{top:2px; left:351px; width:121px; height:48px;}
	#navigation li.next{top:39px; left:415px;width:122px; height:56px;}	
	#navigation li.back{top:5px; left:499px; width:122px; height:52px;}
	#navigation li.music{top:38px; right:262px; width:122px; height:54px;}
	#navigation li.staff{top:4px; right:163px; width:122px; height:52px;}
	#navigation li.mobile{top:45px; right:93px; width:122px; height:47px;}
	#navigation li.goods{top:13px; right:3px; width:122px; height:52px;}
	#navigation li.vote{top:13px; right:3px; width:122px; height:52px;}



#navigation p{
	float:left;
	}

	#navigation p a{
		display:block;
		position:absolute;
		overflow:hidden;
		text-indent:-9999px;
		}
	


.contents-wraptop{
	clear:both;
	width:960px;
	margin:0 auto;
	background:url(../images/cont_top.png) no-repeat center top;
	padding-top:12px;
	text-align:left;
	}
.contents-wrapbottom{
	background:url(../images/cont_bottom.png) no-repeat center bottom;
	padding-bottom:25px;
	text-align:left;
	}

#contents{
	width:940px;
	padding:0 10px;
	text-align:left;
	margin:0 auto;
	}
	
	#info #contents{background:url(../images/cont_body_info.png) repeat-y center top;}
	#chara #contents{background:url(../images/cont_body_chara.png) repeat-y center top;}
	#story #contents{background:url(../images/cont_body_story.png) repeat-y center top;}
	#next #contents{background:url(../images/cont_body_next.png) repeat-y center top;}
	#back #contents{background:url(../images/cont_body_back.png) repeat-y center top;}
	#correlation #contents{background:url(../images/cont_body_correlation.png) repeat-y center top;}
	#staff #contents{background:url(../images/cont_body_staff.png) repeat-y center top;}
	#music #contents{background:url(../images/cont_body_music.png) repeat-y center top;}
	#mobile #contents{background:url(../images/cont_body_mobile.png) repeat-y center top;}
	#twitter #contents{background:url(../images/cont_body_twit.png) repeat-y center top;}
	#type #contents{background:url(../images/cont_body_type.png) repeat-y center top;}
	#goods #contents{background:url(../images/cont_body_goods.png) repeat-y center top;}
	#archives #contents{background:url(../images/cont_body_archives.png) repeat-y center top;}
	#vote #contents{background:url(../images/cont_body_vote.png) repeat-y center top;}


	#contents #left_navi{
		float:left;
		display:inline;
		width:214px;
		position:relative;
		}


	#left_navi #logo{
		float:left;
		position:absolute;
		top:-23px;
		left:-26px;
		z-index:10;/* ie6 */
		}
	
	#left_navi h2{
		margin:70px 0 0 17px;
		}

	#contents #main{
		float:right;
		max-width:720px;
		}




#footer{
	clear:both;
	width:100%;
	padding:0 0 17px 0;
	margin-top:15px;
	text-align:center;
	border-top:6px solid #efefef;
	background:#cecece;
	}
	
	#footer img.copy{ margin-top:60px;}

	#footer .banSpace{
		width:960px;
		margin:0 auto;
		text-align:right;
		position:relative;
		}
	
	#footer .banSpace ul{
		position:absolute;
		top: -28px;
		right:0;
		}
	
	#footer .banSpace ul li{
		float:left;
		text-align:right;
		padding-left: 12px;
		}



#sosialbtn{
	width:32px;
	height:120px;
	padding:9px 4px 0 7px;
	background:url(../images/bg_icon.gif) no-repeat center top;
	position:fixed;
	top:258px;
	right:0px;
	}
	
	#sosialbtn li{
		width:32px;
		margin-bottom:3px;
		}

.pagetop{
	clear:both;
	width:100%;
	text-align:right;
	line-height:1.0;
	}


.pagetop img{margin-right:3px;}




a:link,a:visited{
	color:#080059;
	text-decoration:none;
	}

a:hover,a:active{
	color:#c4000a;
	}