@charset "utf-8";

/* Table Of Contents
----------------------------------------

# area0

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


/* # area0
---------------------------------------------------------------------------- */
div#mainArea {
    background: none repeat scroll 0 0 #FFFFFF;
    padding-top: 0;
}

.paddingarea{
	background: none repeat scroll 0 0 #EEEEEE;
	padding-top:10px;
}

.categoryNav{
	background: #FFFFFF;
}

div#area0 div.rankingPeriod {
    font-size: 14px;
    padding: 10px 10px 10px 24px;
    font-weight: bold;
    border-bottom: 1px solid #EEEEEE;
    background:#EEEEEE
}

div#area0 div.rankingPeriod li.title {
    color: #999999;
}


div#area0 div.rankingPeriod li {
	display:inline;
}


div#area0 div.rankingList {
	clear: both;
	border-bottom: 1px solid #eee;
	position: relative;
	background: #fff;
	width: 724px;
}

div#area0 div.rankingList ul.btnNavi li.btnPrevious {
	position: absolute;
	top: 148px;
	left: -11px;
	width: 47px;
	z-index: 10;
}

div#area0 div.rankingList ul.btnNavi li.btnNext {
	position: absolute;
	top: 148px;
	right: -16px;
	width: 47px;
	z-index: 10;
}

div#area0 div.rankingList div.boxFirst div.rankingHeader {
	background: url(../../../img/module/bg_line02.gif) no-repeat 0 0;
	padding: 3px 0 7px;
	margin: 10px;
}

div#area0 div.rankingList div.boxFirst{
	position: relative;
	height: 100%;
}

div#area0 div.rankingList div.boxFirst div.rankingHeader h2 {
	background: url(../../../img/module/bg_line01.gif) no-repeat 0 bottom;
	padding: 0 0 4px 14px;
}

div#area0 div.rankingList div.boxFirst div.rankingHeader h2 span {
	display: block;
}

div#area0 div.rankingList div.boxFirst p.detalButton {
	position: absolute;
	bottom: 20px;
	text-align: center;
	width: 98%;
}

div#area0 div.rankingList ol.rankList li {
	border-right: 1px solid #eee;
	float: left;
	width: 180px!important;
	height: 390px;
}

div#area0 div.rankingList ol.rankList#rank04 li,
div#area0 div.rankingList ol.rankList#rank08 li,
div#area0 div.rankingList ol.rankList#rank09 li {
	height: 365px;
}

div#area0 div.rankingList ol.rankList#rank06 li,
div#area0 div.rankingList ol.rankList#rank07 li {
	height: 330px;
}

div#area0 div.rankingList ol.rankList#rank02 li,
div#area0 div.rankingList ol.rankList#rank03 li {
	height: 305px;
}


div#area0 div.rankingList ol.rankList div.productBox {
	border: 2px solid transparent;
	padding: 8px;
	height: 370px;
	position: relative;
}

div#area0 div.rankingList ol.rankList#rank04 div.productBox,
div#area0 div.rankingList ol.rankList#rank08 div.productBox,
div#area0 div.rankingList ol.rankList#rank09 div.productBox {
	height: 345px;
}

div#area0 div.rankingList ol.rankList#rank06 div.productBox,
div#area0 div.rankingList ol.rankList#rank07 div.productBox {
	height: 310px;
}

div#area0 div.rankingList ol.rankList#rank02 div.productBox,
div#area0 div.rankingList ol.rankList#rank03 div.productBox {
	height: 285px;
}

div#area0 div.rankingList ol.rankList div.productBox:hover{
	border-color: #C0C0C0;
}
div#area0 div.rankingList ol.rankList li p.poductImage{
	display: table-cell;
	height: 226px;
	width: 160px;
	text-align: center;
	vertical-align: middle;
}

div#area0 div.rankingList ol.rankList#rank02 li p.poductImage,
div#area0 div.rankingList ol.rankList#rank03 li p.poductImage,
div#area0 div.rankingList ol.rankList#rank06 li p.poductImage,
div#area0 div.rankingList ol.rankList#rank07 li p.poductImage {
	height: 164px;
}

*:first-child+html div#area0 div.rankingList ol.rankList li p.poductImage {
	display: block;
	vertical-align: baseline;
	position: relative;
}

* html div#area0 div.rankingList ol.rankList li p.poductImage {
	display: block;
	vertical-align: baseline;
	position: relative;
}
div#area0 div.rankingList ol.rankList li p.poductImage a img{
	opacity: 0.99; /* 引き伸ばした画像に透過処理をかけると、ゆがみが発生するのであらかじめ透過をかけておく */
	zoom:1;
}
div#area0 div.rankingList ol.rankList li p.poductImage a img:hover {
	opacity: 0.85;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
	filter: alpha(opacity=85);
}
*:first-child+html div#area0 div.rankingList ol.rankList li p.poductImage a img {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: expression(parseInt('-' + this.offsetHeight/2) + 'px');
	margin-left: expression(parseInt('-' + this.offsetWidth/2) + 'px');
}

* html div#area0 div.rankingList ol.rankList li p.poductImage a img {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: expression(parseInt('-' + this.offsetHeight/2) + 'px');
	margin-left: expression(parseInt('-' + this.offsetWidth/2) + 'px');
}

div#area0 div.rankingList ol.rankList li p.productTtl {
	padding: 10px 0 7px;
	text-align: center;
}

div#area0 div.rankingList ol.rankList li p.rank {
	line-height:14px;
	text-align: left;
	padding-bottom: 8px;
}

div#area0 div.rankingList ol.rankList li p.rank img {
    line-height:14px
}

div#area0 div.rankingList ol.rankList li p.rank span{
	float: right;
	padding-top: 4px;
	font-size: 15px;
	font-weight: bold;
	color: #AAAAAA;
}


div#area0 div.rankingList ol.rankList li p.aboutText {
    font-size: 13px;
    line-height: 1.1;
    padding: 0 0 8px;
    font-weight: bold;
}
div#area0 div.rankingList ol.rankList li p.playlink {
	padding: 0;
	position: absolute;
	bottom: 0;
}

div#area0 div.rankingList ol.rankList li p.aboutText a:hover{
	text-decoration: underline;
}

div#area0 div.rankingList ol.rankList li p.tagText,
div#area0 div.rankingList ol.rankList li p.tagTextNonLink {
	font-size: 80%;
	line-height: 1.1;
}
div#area0 div.rankingList ol.rankList li p.tagText a{
	color: #6c86b9;
	padding-right: 7px;
	background: url("../../../img/module/ico_arrow_smallest_blue.png") no-repeat scroll right center transparent;
}
div#area0 div.rankingList ol.rankList li p.tagText a:hover{
	text-decoration: underline;
}

/* # clearfix
---------------------------------------------------------------------------- */

div#area0 div.rankingList,
div#area0 div.rankingList div.boxFirst ol.rankList,
.slider {
	zoom: 1;
}

div#area0 div.rankingList:after,
div#area0 div.rankingList div.boxFirst ol.rankList:after,
.slider:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	visibility: hidden;
}