@charset "utf-8";

/* toolstoys index
-------------------------------------------------------------------------------*/

#ranking{ margin-top: 25px; }

#ranking .tab{
	padding: 0 1px;
	border-bottom: 2px solid #f2a7a7;
}

#ranking .tab li{
	float: left;
	width: 104px;
	height: 42px;
	padding: 0 1px;
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: 104px 84px;
	background-size: 104px 84px;
	text-indent: -9999px;
}
#ranking .tab li.active{ background-position: center -42px; }

#ranking .tab li:nth-child(1){ background-image: url(../images/ranking_tab1.gif); }
#ranking .tab li:nth-child(2){ background-image: url(../images/ranking_tab2.gif); }
#ranking .tab li:nth-child(3){ background-image: url(../images/ranking_tab3.gif); }

#ranking .tabContent > div{
	display: none;
}

#ranking .tabContent .active{ display: block; }
#ranking .tabContent > div > h3{
	margin: 14px 8px;
	font-size: 14px;
	font-weight: bold;
}

#ranking .lineupList{ margin-top: 14px;}

.lineupList dl{ margin-top: 0; }
.lineupList dt a > div{ height: 85px; }
.lineupList dt a > div > img{
	width: 100%;
	height: auto;
}

.lineupList .icons{
	top: -5px;
	left: -5px;
}

.lineupList .subBtn{
	width: 91px;
	height: 28px;
	margin: 8px auto;
}
.lineupList .subBtn a{
	padding-top: 6px;
	padding-left: 15px;
	background: url(../../images/arrow_right.png) no-repeat 6px 8px;
	-webkit-background-size: 7px 10px;
	background-size: 7px 10px;
	font-size: 12px;
	text-decoration: none;
}

.subtitle{
	margin: 25px 0 15px 0;
	padding-left: 10px;
	background: #f2a7a7 no-repeat left center;
	-webkit-background-size: 40px;
	background-size: 40px;
}

/*#original{ background-image: url(../images/title_original.gif); }
#select{ background-image: url(../images/title_select.gif); }*/

.ttCat{
	margin: 15px 4px;
	border: 1px solid #808080;
	border-radius: 10px;
}

.ttCat > a{
	display: block;
	height: 100%;
	text-decoration: none;
}

.ttCat h3{
	box-sizing: border-box;
	height: 40px;
	background: #f0f0f0 no-repeat left top;
	padding-left: 10px;
	border-radius: 8px 8px 0 0;
	-webkit-background-size: 40px;
	background-size: 40px;
	line-height: 40px;
	font-weight: bold;
	color: #666;
}

.ttCat h3 span{
	font-size: 12px;
	font-weight: normal;
}

.ttCat h3 + p{
	margin-top: 10px;
	padding: 0 10px;
	font-size: 12px;
	line-height: 1.6;
	color: #333;
}

.ttCat .lineupList dl{
	width: 90px;
	margin-top: 10px;
	padding: 0 6px;
}

.ttCat .lineupList dt{
	padding-bottom: 2px;
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
	color: #000;
}
.ttCat .lineupList dt span{
	display: block;
	font-size: 10px;
	color: #808080;
}

.ttCat .lineupList dt > div > img{
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 2px;
}

.ttCat .more{
	margin: 10px;
	padding: 10px 0 0 15px;
	border-top: 1px solid #808080;
	background: url(../../images/arrow_right.png) no-repeat 98px 16px;
	-webkit-background-size: 10px 15px;
	background-size: 10px 15px;
	text-align: center;
	font-weight: bold;
}


/* toolstoys category
-------------------------------------------------------------------------------*/
.ttCatNav{ margin: 10px; line-height: 1.4; }

.ttCatNav li{ display: inline; }

.ttCatNav li:after{ content:" | "; font-size: 12px; }

.ttCatNav li:nth-child(1),
.ttCatNav li:nth-child(2){ font-weight: bold; }

.ttCatNav li:last-child:after{ content: ""; }

.ttCatNav li:nth-child(1),
.ttCatNav li:nth-child(2){
	padding: 0 5px 0 14px;
	background: url(../../images/disc.gif) no-repeat left center;
	-webkit-background-size: 11px;
	background-size: 11px;
}
.ttCatNav li:nth-child(1):after,
.ttCatNav li:nth-child(2):after{ content: ""; }

.ttCatNav a{
	font-size: 12px;
	text-decoration: none;
}

.ttCatNav a span{ font-size: 10px; }

.ttCatTitle{
	margin-top: 0;
	padding-left: 15px;
	color: #8F6174;
}
.ttCatTitle span{
	font-size: 12px;
}

.pageNav{
	width: 310px;
	margin: 20px auto;
	letter-spacing: -0.32em;
	text-align: center;
}

.pageNav li{
	display: inline-block;
	letter-spacing: 0;
}

.pageNav a, .pageNav li.leader span{
	display: block;
	width: 32px;
	height: 24px;
	margin-top: 6px;
	font-size: 12px;
	line-height: 24px;
	text-align: center;
}

.pageNav li span{ display: none; }
.pageNav li.leader a{ display: none; }

.pageNav li.current a{
	background-color: #ccc;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}

.prev{ float: left; background-image: url(../../images/arrow_w_left.png); }
.next{ float: right; background-image: url(../../images/arrow_w_right.png); }
.prev, .next{
	background-color: #ef7d1a;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 9px 12px;
	background-size: 9px 12px;
	border-radius: 6px;
}
	
.prev a, .next a{
	width: 50px;
	height: 36px;
	margin-top: 0;
	text-indent: -9999px;
}

#listWrapper .lineupList{
	display: none;
	margin-top: 25px;
}
#listWrapper .active{ display: block; }
#listWrapper .lineupList dl{ margin-bottom: 15px; }