@charset "UTF-8";
/* ==================================================
						 base
==================================================== */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	color: #282828;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	box-sizing:border-box;
}

ul, ol, dl {
	list-style: none;
}

img {
	vertical-align: bottom;
	border: none;
}

em {
	font-style: normal;
}

body {
	text-align: center;
	background: #fff;
}

a:link, .d-txtlink {
	text-decoration: none;
}

a:hover, a:active {
	text-decoration: none;
}

.d-txtlink:hover {
	text-decoration: none;
}

.clearfix:after {
	zoom: 1;
	/* for IE6/7 */
	content: '';
	display: block;
	clear: both;
}

.float_l {
	float: left;
}

.float_r {
	float: right;
}

select::-ms-expand {
	display: none;
}

option {
	color: #000;
}

/* ==================================================
						 bg,wrap
==================================================== */
#wrapper{
	margin:0 auto;
	width: 100%;
	min-height:2000px;
	position:relative;
	background: url(../img/fanbook/bg.jpg) top center;
	background-size:100%;
}
#mainBg{
	margin:0 auto;
	width: 1000px;
	min-height:2000px;
	position:relative;
	background: url(../img/fanbook/main_bg_pattern.png);
}
#mainLine_l{
	position:absolute;
	z-index:1;
	width: 30px;
	height:2000px;
	top:0;
	left:-5px;
	background: url(../img/fanbook/main_bg_line.png);
}
#mainLine_r{
	position:absolute;
	z-index:1;
	width: 30px;
	height:2000px;
	top:0;
	left:976px;
	background: url(../img/fanbook/main_bg_line.png);
}
#mainLine_l_after{
	position:absolute;
	z-index:1;
	width: 30px;
	height:2115px;
	top:0;
	left:-5px;
	background: url(../img/fanbook/main_bg_line.png);
}
#mainLine_r_after{
	position:absolute;
	z-index:1;
	width: 30px;
	height:2115px;
	top:0;
	left:976px;
	background: url(../img/fanbook/main_bg_line.png);
}
#header{
	z-index:2;
	margin:0 auto 0 -10px;
	position:relative;
}
/* ==================================================
						.shop_btnArea
==================================================== */
.shop_btnArea {
	z-index:5;
	margin:0 auto;
	width: 600px;
	height: 125px;
	text-align: center;
}
.shop_btnArea a{
	background: url(../img/fanbook/btn_shop.png) no-repeat left top;
	display: block;
	width: 600px;
	height: 125px;
	margin: 0;
	padding: 0;
	line-height: 0;
	background-position: 0 0px;
}
.shop_btnArea span {
	text-align: right;
	position: relative;
	z-index: -1;
}
.shop_btnArea a:hover {
	background-position: 0 -125px;
}
/* ==================================================
						#bookContents
==================================================== */
#bookContents{
	z-index:3;
	margin:0 auto;
	padding:70px 0 0 86px;
	position:relative;
	width:930px;
	height:331px;
	background: url(../img/fanbook/contents.png);
}
#bookContents a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	 -ms-filter: "alpha(opacity=80)";
}
#bookContents ul li{
	display:inline-block;
	float: left;
}
#bookContents li{
	width:190px;
}
/* ==================================================
						#tweetArea
==================================================== */
#tweetArea{
	margin:-10px auto 0 auto;
	background:url(../img/fanbook/tweet.png) no-repeat top center;
	width:902px;
	height:220px;
}
#tweetArea p{
	width:326px;
	padding:60px 30px 0 480px;
}
#tweetArea a{
	background: url(../img/fanbook/btn_twitter.png) no-repeat left top;
	display: block;
	width: 326px;
	height: 90px;
	margin: 0;
	padding: 0;
	line-height: 0;
	background-position: 0 0px;
}
#tweetArea span {
	text-align: right;
	position: relative;
	z-index: -1;
}
#tweetArea a:hover {
	background-position: 0 -90px;
}
/* ==================================================
						#btnAreaWrap
==================================================== */
#btnAreaWrap ul{
	display: inline-block;
	margin:0 auto;
}
#btnAreaWrap li{
	display: inline-block;
	margin:0 5px;
}

#btnAreaWrap{
	width:100%;
	margin:-30px auto;
	padding:150px 0 0 0;
	position:relative;
	background: url(../img/fanbook/chara.png) no-repeat;
	
}
/* ==================================================
						.pcgame_btnArea
==================================================== */
.pcgame_btnArea {
	width: 600px;
	height: 125px;
	margin: 0 auto;
	text-align: center;
}
.pcgame_btnArea a{
	background: url(../img/fanbook/btn_pcgame.png) no-repeat left top;
	display: block;
	width: 600px;
	height: 125px;
	margin: 0;
	padding: 0;
	line-height: 0;
	background-position: 0 0px;
}
.pcgame_btnArea span {
	text-align: right;
	position: relative;
	z-index: -1;
}
.pcgame_btnArea a:hover {
	background-position: 0 -125px;
}
/* ==================================================
						 #spNavi
==================================================== */
#spNaviBar{
	width:100%;
	padding:10px 0;
	margin:0 auto;
	background: rgba(30,19,0,0.8);
}
#spNaviBar p{
	margin:0 auto 10px auto;
}
#spNavi li { 
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	list-style-type:none;
	width: 238px;
	height: 62px;
	float: left;
}
#spNavi .btn_appstore a,
#spNavi .btn_dmm a {
	background: url(../img/fanbook/btn_sp.png) no-repeat left top;
	display: block;
	width: 213px;
	height: 62px;
	margin: 0;
	padding: 0;
	line-height: 0;
}
#spNavi span {
	text-align: right;
	position: relative;
	z-index: -1;
}
#spNavi .btn_appstore a {
	background-position: 0px 0px;
}
/*#spNavi .btn_appstore a:hover {
	background-position: 0 -62px;
}*/
#spNavi .btn_dmm a {
	background-position: -213px 0;
}
/*#spNavi .btn_dmm a:hover {
	background-position: -213px -62px;
}*/
/* ==================================================
						#serialcodeArea
==================================================== */
#serialcodeArea{
	z-index:2;
	margin:40px auto 0 auto;
	padding:60px 0 0 100px;
	position:relative;
	width:930px;
	height:331px;
	background: url(../img/fanbook/serialcode_base.png);
}
#serialcodeArea ul li{
	list-style-type:disc;
	font-size:12px;
	text-align:left;
	padding:4px 0;
	color:#fff3df;
}
/* ==================================================
						 footer
==================================================== */
footer{
	padding:10px 0;
}
footer p{
	padding:10px 0;
}
footer small{
	color:#fff3df;
	position:relative;
}