@charset "EUC-JP";

@import"/common/css/special_recommend2.css";
/* Comic Special List Page Settings */

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

[0] Important for Cross-browser

[1] comicHeader

[2] comicSubGenreMark

[3] mainContent

 ----------------------------------*/
 
/* [0] Important for Cross-browser */
#contents div,
#genre #rightBox div,
#genre #rightBox ul{
	zoom:1; /*for IE 5.5-7*/
}
#contents div:after,
#genre #rightBox div:after,
#genre #rightBox ul:after{/*for modern browser*/
    content: ".";
    display: block;
    height: 0;
    line-height:0;
    font-size: 0.1em;
    clear:both;
    visibility: hidden;
}

/* [1] comicHeader */
#comicBox {background:url(/etc/comic/img/sp_base/content_middle_back.gif) repeat-y;}

#comicBox #comicHeader {
	background:url(/etc/comic/img/sp_base/title_subgenre_back.gif) no-repeat;
	width:715px;
	height:61px;
}

#comicBox #comicHeader h1{
	float:left;
	width:577px;
	font-size:14px;
	font-weight:bold;
}

#comicBox #comicHeader h1.oneLine{padding: 22px 0 0 26px;}
#comicBox #comicHeader h1.twoLines{padding: 13px 0 0 26px;}


/* [2] comicSubGenreMark */
#comicBox div#comicSubGenreMark{float: right; width:112px;
}

#comicBox div.icon_01{background:url(/etc/comic/img/icon/icon_01.gif) center no-repeat;}
#comicBox div.icon_02{background:url(/etc/comic/img/icon/icon_02.gif) center no-repeat;}
#comicBox div.icon_03{background:url(/etc/comic/img/icon/icon_03.gif) center no-repeat;}
#comicBox div.icon_04{background:url(/etc/comic/img/icon/icon_04.gif) center no-repeat;}
#comicBox div.icon_05{background:url(/etc/comic/img/icon/icon_05.gif) center no-repeat;}
#comicBox div.icon_06{background:url(/etc/comic/img/icon/icon_06.gif) center no-repeat;}
#comicBox div.icon_07{background:url(/etc/comic/img/icon/icon_07.gif) center no-repeat;}
#comicBox div.icon_08{background:url(/etc/comic/img/icon/icon_08.gif) center no-repeat;}
#comicBox div.icon_09{background:url(/etc/comic/img/icon/icon_09.gif) center no-repeat;}
#comicBox div.icon_10{background:url(/etc/comic/img/icon/icon_10.gif) center no-repeat;}
#comicBox div.icon_11{background:url(/etc/comic/img/icon/icon_11.gif) center no-repeat;}
#comicBox div.icon_12{background:url(/etc/comic/img/icon/icon_12.gif) center no-repeat;}

#comicBox div.markPosition{
	display:block;
	height:0 !important;
	outline: none;
	overflow:hidden;
	padding-top:61px;
	_padding-top:46px; /* IE6 Hack */
}

/* IE7 Hack */
*:first-child+html #comicBox div.markPosition{padding-top:46px;}


/* [3] mainContent */
#mainCon {background:url(/etc/comic/img/sp_base/content_bottom_back.gif) bottom no-repeat;}

#mainCon .comicImg {
	float:left;
	padding:9px 0 9px 16px;
}

#mainCon .comicImg a img{
	background:none repeat scroll 0 0 #FFFFFF;
	border:1px solid #CACACA;
	margin-bottom:10px;
	padding:2px;
	width:221px;
}

#mainCon .comicInfo {
	float:right;
	padding:9px 16px 9px 0;
	width:445px;
}

#mainCon .comicInfo h2 {
	background:url(/etc/comic/img/sp_base/dot_line.gif) bottom no-repeat;
	font-size:14px;
	font-weight:bold;
	padding:9px 16px 11px 0;
}

#mainCon .comicInfo p{padding:8px 16px 30px 0;}

#mainCon .comicInfo #comicInfoDetail {background:url(/etc/comic/img/sp_base/information_middle_back.gif) repeat-y;}

#mainCon .comicInfo #comicInfoDetail ul{width:202px;}

#mainCon .comicInfo #comicInfoDetail ul li{
	padding-bottom: 22px;
	_padding-bottom: 5px; /* IE6 Hack */
	clear:both;
}

/* IE7 Hack */
*:first-child+html #mainCon .comicInfo #comicInfoDetail ul li{padding-bottom: 5px;}

#mainCon .comicInfo #comicInfoDetail ul li img{
    display: block;
	float:left;
	margin-right:5px;
}

#mainCon .comicInfo #comicInfoDetail ul li h3,#mainCon #comicInfoDetail ul li span{
    display: block;
	float:left;
	position: relative;
	top:1px;
	width:145px;
	_width:140px; /* IE6 Hack */
}

#mainCon #comicInfoDetail #detailLeft{
	padding:0 0 0 10px;
	float:left;
}

#mainCon #comicInfoDetail #detailRight{
	padding:0 10px 0 0;
	float:right;
}

#mainCon #comicInfoDetail .fixFloat{clear:both;}

/*======================================

     List Box

=======================================*/
div.listBox{
	position: relative;
	width: 715px;
	padding-top: 5px;
	background: transparent url(/genretop/comic/gui/box.gif) left top no-repeat;
}
div.listBox h2{
	width: 547px;
	padding: 0 0 4px 0;
	margin: 0 0 0 5px;
	background: #fff url(/genretop/comic/gui/title.gif) left bottom no-repeat;
}
div.listBox h2 a{
	display: block;
	padding: 5px 0 0 32px;
	line-height: 16px;
	background: #fff url(/genretop/comic/gui/title.gif) left top no-repeat;
}
div.listBox p{
	width: 547px;
	font-size: 12px;
	padding: 8px 0 9px 3px;
	margin: 0 0 0 5px;
	line-height: 16px;
	background: #fff url(/genretop/comic/gui/line.gif) left bottom no-repeat;
}
div.listBox div.mainImage{
	position: absolute;
	top: 5px;
	right: 5px;
}
div.listBox div.mainImage a img{
	padding: 2px;
	border-color: #d3dce5;
}
div.listBox div.mainImage a:hover img{
	border-color: #000;
}
div.listBox div.price{
	position: absolute;
	top: 63px;
	right: 90px;
	width: 67px;
	height: 33px;
	padding-top: 24px;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
	background: #fff url(/genretop/comic/gui/price.gif) left top no-repeat;
}
div.listBox div.functions{
	position: absolute;
	top: 5px;
	right: 90px;
}
div.listBox div.functions a img{
	display: block;
	padding: 0;
	border: none;
	margin-bottom: 4px;
}
div.listBox div.information{
	width: 715px;
	min-height: 50px;
    height: auto !important;
    height: 50px;
    padding: 0 0 12px 0;
	background: transparent url(/genretop/comic/gui/box.gif) left bottom no-repeat;
}
div.listBox div.information ul{
	width: 547px;
}
div.listBox div.information ul:after{
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
div.listBox div.information ul li{
	float: left;
	height: 18px !important;
	padding: 0 0 0 8px;
	margin: 6px 0 0 10px;
	color: #7d7d7d;
    font-size: 12px;
	line-height: 18px;
	background: transparent url(/genretop/comic/gui/oval.gif) left top no-repeat;
	white-space: nowrap;
	display: inline;
	overflow: hidden;
}
div.listBox div.information ul li span{
	display: block;
	float: left;
	padding: 0 8px 0 0;
	margin-right: 6px;
	color: #fff;
	font-size: 10px;
	background: #eef1f4 url(/genretop/comic/gui/oval.gif) right -18px no-repeat;
}

/*特集　リダイレクト文言
------------------------------------------------------------*/
#redirectBox{
	width:693px;
	border:solid #F00 1px;
	padding:10px;
	line-height:19px;
	vertical-align:middle;
	color:#F00;
}
#redirectBox:after{
	content:"";
	display:block;
	clear:both;
}
/*======================================

     genreSwich

=======================================*/
.genreSwich{
	overflow:hidden;
	display:none;
}
/*======================================

     r18_comic

=======================================*/
.r18banner{
	display:none;
}
.r18_comic .r18banner{
	display:block;
}