.clearfix {
}
.clearfix:after {
    clear: both;
    content: "";
    display: block;
}
html {

}

body {
    background:black ;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    color:white;
	line-height:1.5em;
   
}



/*============
 global link
============*/

#header {
    background: none repeat scroll 0 0 #333;
    height: 2.5em;
    margin: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    z-index: 10;
}
#header ul {
    margin: 0.5em;
    padding: 0;
    text-align: right;
}

#footer {
    background: none repeat scroll 0 0 #333;
    color: #666666;
    font-size: 0.9em;
    margin-top: 100px;
    padding: 20px;
    text-align: center;
	height:auto;
}

#footer ul {
    margin: 0.5em;
    padding: 0;
}
#header li, #footer li{
    display: inline-block;
    margin: 0 10px;
	border:none;
}
#header li a,
#footer li a  {
    color: #999;
	
}	

#header li a:hover,
#footer li a:hover {
    color: #cc9;
}

#footer p{
	margin-top:2em;

}



/*============
 layout
============*/

#contents {
	padding-top: 2.5em;
	/*width: 1000px;*/
	margin-right: auto;
	margin-left: auto;
}



div.inner{

	width:960px;
	margin:auto;
}



.hdn{
	display:none;
}




/*============
 TOP
============*/


#top{

    width:100%;
	background:white;
	background:url(img/bg_top.jpg) repeat-x top;
        position:relative;

}


#top div.inner{
	height:453px;
	background:url(img/bg_chara.jpg) no-repeat top right;
	position:relative;
}

#top a.pre{

	position:absolute;
	right:0;
	bottom:-35px;
	width:155px;
	height:155px;
	background:url(img/btn_pre.png) top center;
	text-indent:-10000px;
}

#top a.pre:hover{
	background:url(img/btn_pre.png) bottom center;

	
}

#top img{
	margin-top: 10px;
}


/*============
 main
============*/

#main div.inner{
    margin-top:30px;
    text-align:center;

}

div.column h2{
	
	margin:0;

}

div.column{

	width:470px;
	display:inline-block;
    text-align:left;
    vertical-align:top;
}

div.column p{

	width:440px;
    margin:0.5em auto;
	line-height:2em;
}

div.column p.first {

    margin-top:-10px;
}

/*�������*/

div.detail{

    display:inline-block;
    width:460px;
	margin:0 5px;

}


div.detail ul{

    display:inline-block;
 
}

div.inner div.detail ul li{
	
    border:none;
    margin:0.2em;
	font-size:0.9em;

}

div.inner div.detail ul li.title{
	
    color:red;
    font-size:1.2em;
}

a.cart{
	
    	display:inline-block;
		background:url(img/btn_cart.png) top center;
		width:220px;
		height:60px;
		overflow:hidden;
}

a.cart:hover{
	
    	background:url(img/btn_cart.png) bottom center;
}

a.cart span{

	display:none;
}

.pointcolor{

	color:#a37e39 ;"
}

div.novel{

	width:650px;
	padding:0 145px 0 145px;
	text-align:left !important;
	line-height:2em;
	color:darkgrey;
	border:solid 1px grey;
}


/*============
 sample detail
============*/

#sample #top div.inner{
	height:200px;
	background:url(img/bg_chara_sample.png) no-repeat top right;
	position:relative;
}

#sample #top a.pre{
	background:url(img/btn_intro.png) top center;
}

#sample #top a.pre:hover{
	background:url(img/btn_intro.png) bottom center;
}

/*===================
 sample page navi
===================*/

ul.page {
    width:45em;
	margin:auto;
    padding:2em 0 2em 0;
  	text-align:center;

}

ul.page li{

    display:inline-block;
    text-align:center;
    width:1.5em;
    height:1.5em;
	line-height:1.5em;
	color:#cccc66;
	border:solid 1px #999;
	padding:0;
}

ul.page li.mark{

	background:#999;
}

ul.page li.first{
	border-left:none;
	margin-left:2px;
}

ul.page li.mark a{

	color:#001e43;
}

ul.page li.part{

    display:inline-block;
    text-align:center;
    width:4em;
	border:solid 1px #999;
	margin:0 0.2em;
}

ul.page li.partm{

	color:#001e43;
	background:#999;
	margin-right:0
}


ul.page a,
div.next a{

    color:#999;
    text-decoration:none;
}

ul.page a:hover,
div.next a:hover{

    color:red;
}

div.next{
	margin:3em auto 1em auto;
	text-align:center;
}