@charset "utf-8";

/*--================= ranking_sprite =================--*/
.icon_rankNew,
.icon_rankUp,
.icon_rankTie,
.icon_rankDown,
.icon_rank01,.icon_rank02,.icon_rank03,.icon_rank04,.icon_rank05,.icon_rank06,.icon_rank07,.icon_rank08,.icon_rank09,.icon_rank10,.icon_rank11,.icon_rank12,.icon_rank13,.icon_rank14,.icon_rank15,.icon_rank16,.icon_rank17,.icon_rank18,.icon_rank19,.icon_rank20,
.btn_voiceList,
.rankHdTitle ul,
.rankHdTitle li a,
.rankTop h4,
.rankTop .more a,
#rankDetail .dateTtl a,
#rankDetail .detailTtl .ttl,
#rankDetail .detailTtl a{
	background: url(https://s.yimg.jp/i/kids/voice/tmpl/pc/img/rank_sprite.png) no-repeat;
}
.rankTop .ttl,
#rankDetail .dateTtl,
#rankDetail .themeTtl{
	background-image: url(https://s.yimg.jp/i/kids/voice/tmpl/pc/img/h2bg.png);
}

/*--================= ranking_sprite icon =================--*/
/* icon_rankUp,icon_rankTie,icon_rankDown */
.icon_rankNew,
.icon_rankUp,
.icon_rankTie,
.icon_rankDown{
	display: block;
	width: 28px;
	height: 27px;
	text-indent: -9999px;
}
.icon_rankNew{background-position: -222px -16px;width: 38px;height: 20px;}
.icon_rankUp{background-position: -125px -13px;}
.icon_rankTie{background-position: -159px -13px;}
.icon_rankDown{background-position: -190px -13px;}
/* icon_rank */
.icon_rank01,
.icon_rank02,
.icon_rank03{
	display: block;
	width: 40px;
	height: 33px;
	text-indent: -9999px;
}
.icon_rank04,.icon_rank05,.icon_rank06,.icon_rank07,.icon_rank08,.icon_rank09,.icon_rank10,.icon_rank11,.icon_rank12,.icon_rank13,.icon_rank14,.icon_rank15,.icon_rank16,.icon_rank17,.icon_rank18,.icon_rank19,.icon_rank20{
	display: block;
	width: 36px;
	height: 36px;
	text-indent: -9999px;
}
.icon_rank01{background-position: 0 -380px;}
.icon_rank02{background-position: 0 -422px;}
.icon_rank03{background-position: 0 -464px;}
.icon_rank04{background-position: -52px -380px;}
.icon_rank05{background-position: -52px -422px;}
.icon_rank06{background-position: -52px -464px;}
.icon_rank07{background-position: -93px -380px;}
.icon_rank08{background-position: -93px -422px;}
.icon_rank09{background-position: -93px -464px;}
.icon_rank10{background-position: -134px -380px;}
.icon_rank11{background-position: -134px -422px;}
.icon_rank12{background-position: -134px -464px;}
.icon_rank13{background-position: -175px -380px;}
.icon_rank14{background-position: -175px -422px;}
.icon_rank15{background-position: -175px -464px;}
.icon_rank16{background-position: -216px -380px;}
.icon_rank17{background-position: -216px -422px;}
.icon_rank18{background-position: -216px -464px;}
.icon_rank19{background-position: -257px -380px;}
.icon_rank20{background-position: -257px -422px;}
/* btn_voiceList */
.btn_voiceList{
	display: block;
	width: 240px;
	height: 40px;
	text-indent: -9999px;
	background-position: 0 -45px;
}

/*--================= ranking module =================--*/
/*--- rankHdTitle ---*/
.rankHdTitle{
	position: relative;
	margin: 10px 0 0;
	background: #58aeb8;
}
.rankHdTitle h2{
	padding: 12px 10px 8px;
	color: #fff;
	font-size: 175%;
	line-height: 1.3;
}
.rankHdTitle h2 a{color: #fff;}
.rankHdTitle h2 a:visited{color: #fff;}
.rankHdTitle ul:after{content:'';display:block;clear:both;}
.rankHdTitle ul{
	position: absolute;
	top: 7px;
	*top: 10px;
	right: 10px;
	width: 278px;
	height: 42px;
	background-position: 0 -247px;
	zoom: 1;
}
.rankHdTitle li{
	float: left;
	width: 77px;
	text-indent: -9999px;
}
.rankHdTitle .daily{
	width: 123px;
}
.rankHdTitle li a{
	display: block;
	width: 77px;
	height: 42px;
}
.rankHdTitle .daily a{background-position: 0 -200px;width: 123px;}
.rankHdTitle .monthly a{background-position: -123px -200px;}
.rankHdTitle .total a{background-position: -200px -200px;}

/*--- rankTop ---*/
.rankTop{
	padding-bottom: 15px;
	background: #fff;
}
.rankTop .ttl{
	padding: 10px 10px 5px;
	background-color: #e1f2f0;
	background-repeat: repeat-x;
}
.rankTop .ttl h3{
	width: 700px;
	margin: 0 auto;
	text-align: center;
	font-size: 150%;
	line-height: 1.5;
}
.rankTop .wrap:after,
.rankTop dt:after,
.rankTop .voice:after,
.rankTop .more:after{content:'';display:block;clear:both;}
.rankTop .wrap{
	position: relative;
	zoom: 1;
}
.rankTop h4{
	position: absolute;
	top: -32px;
	width: 95px;
	height: 32px;
	text-indent: -9999px;
}
.rankTop .ctL h4{
	left: 0;
	background-position: 0 -164px;
}
.rankTop .ctR h4{
	right: 0;
	width: 117px;
	background-position: -100px -164px;
}
.rankTop .ctL{
	float: left;
	width: 49.5%;
}
.rankTop .ctR{
	float: right;
	width: 49.5%;
}
.rankTop .load{
	min-height: 351px;
	_height: 351px;
	padding-top: 280px;
	border: 2px solid #f39c12;
	font-size: 120%;
	text-align: center;
	vertical-align: middle;
}
.rankTop .ctR .load{
	border: 2px solid #80c269;
}
.rankTop .wrap ul{
	padding: 0 10px 10px;
	border: 2px solid #f39c12;
}
.rankTop .ctR ul{
	border: 2px solid #80c269;
}
.rankTop .list{
	padding: 8px 0 10px;
	border-bottom: 1px solid #ccc;
	zoom: 1;
}
.rankTop .list a{
	color: #333;
	text-decoration: none;
}
.rankTop .list a:hover .voice{
	text-decoration: underline;
}
.rankTop dt{
	margin-bottom: 10px;
	zoom: 1;
}
.rankTop dt span{
	float: left;
}
.rankTop dt .theme{
	float: right;
	width: 390px;
	margin-top: 8px;
	font-size: 90%;
	text-align: right;
}
.rankTop .voice{
	min-height: 105px;
	_height: 105px;
	color: #3a8a91;
	font-size: 130%;
	line-height: 1.4;
	zoom: 1;
}
.rankTop .voicer{
	min-height: 77px;
	_height: 77px;
	padding: 28px 0 0 5px;
	font-size: 130%;
}
.rankTop .voicer span{
	color: #3a8a91;
	line-height: 1.4;
	margin-right: 3px;
}
.rankTop .prof{
	margin-top: 5px;
	font-size: 90%;
	text-align: right;
}
.rankTop .ph{
	float: left;
	margin-right: 10px;
}
.rankTop .novoice{
	padding: 20px 10px;
	font-size: 120%;
	text-align: center;
}
.rankTop .more{
	*display: inline;
	zoom: 1;
}
.rankTop .more a{
	display: block;
	float: right;
	width: 120px;
	height: 40px;
	margin-top: 2px;
	text-indent: -9999px;
}

/*--- rankDetail ---*/
#rankDetail .detailTtl:after,
#rankDetail li:after,
#rankDetail .listHd:after,
#rankDetail .contents p:after{content:'';display:block;clear:both;}
#rankDetail{
	padding-bottom: 15px;
	background: #fff;
}
/* dateTtl */
#rankDetail .dateTtl{
	margin: 0 auto;
	padding: 6px 10px;
	background-color: #e1f2f0;
	background-repeat: repeat-x;
	text-align: center;
}
#rankDetail .dateTtl h3,
#rankDetail .dateTtl div{
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: middle;
}
#rankDetail .dateTtl h3{
	margin: 5px 5px 0;
	font-size: 150%;
	line-height: 1.5;
}
#rankDetail .dateTtl div{
	width: 115px;
	height: 38px;
}
#rankDetail .dateTtl a{
	display: block;
	width: 115px;
	height: 38px;
	text-indent: -9999px;
}
#rankDetail .dateTtl .prev.daily{background-position: 0 -294px;}
#rankDetail .dateTtl .next.daily{background-position: -120px -294px;}
#rankDetail .dateTtl .prev.monthly{background-position: 0 -337px;}
#rankDetail .dateTtl .next.monthly{background-position: -120px -337px;}
/* themeTtl */
#rankDetail .themeTtl{
	position: relative;
	padding: 6px 10px;
	background-color: #e1f2f0;
	background-repeat: repeat-x;
}
#rankDetail .themeTtl h3{
	margin: 5px 5px 0;
	font-size: 150%;
	line-height: 1.5;
}
.themeTtl .btn{
	position: absolute;
	top: 7px;
	right: 10px;
}
/* detailTtl */
#rankDetail .detailTtl{
	position: relative;
	padding-top: 10px;
	text-indent: -9999px;
	zoom: 1;
}
#rankDetail .detailTtl .ttl{
	float: left;
	height: 31px;
	margin: 5px 5px 0 0;
}
#rankDetail.voice .detailTtl .ttl{
	width: 95px;
	background-position: 0 -164px;
}
#rankDetail.voicer .detailTtl .ttl{
	width: 117px;
	background-position: -100px -164px;
}
#rankDetail .detailTtl p{
	float: left;
}
#rankDetail .detailTtl a{
	display: block;
	height: 32px;
}
#rankDetail.voice .detailTtl a{
	width: 267px;
	background-position: 0 -127px;
}
#rankDetail.voicer .detailTtl a{
	width: 241px;
	background-position: 0 -91px;
}
/* detailList */
#rankDetail .detailList{
	padding: 10px;
}
#rankDetail.voice .detailList{
	border: 2px solid #f39c12;
}
#rankDetail.voicer .detailList{
	border: 2px solid #80c269;
}
#rankDetail .lead{
	margin-bottom: 10px;
	padding: 5px 10px;
	background: #f4f4f4;
	font-size: 90%;
}
#rankDetail ul{
	overflow: hidden;
	*zoom: 1;
}
#rankDetail li{
	margin-bottom: -2px;
	padding: 12px 0 10px;
	border-bottom: 2px solid #eee;
}
#rankDetail li a{
	display: block;
	color: #333;
	text-decoration: none;
}
#rankDetail li a:hover .voice{
	text-decoration: underline;
}
#rankDetail .listHd{
	padding: 5px 0;
	border-bottom: 2px solid #b9e2dd;
	zoom: 1;
}
#rankDetail .listHd div{
	float: left;
	font-weight: bold;
}
#rankDetail .detailList dl{
	*zoom: 1;
}
#rankDetail .rank{
	width: 55px;
	text-align: center;
}
#rankDetail .move{
	width: 60px;
	text-align: center;
}
#rankDetail .contents{
	width: 590px;
	padding: 0 10px;
}
#rankDetail dt,
#rankDetail dd{
	float: left;
}
#rankDetail .rank span{
	margin: 0 auto;
}
#rankDetail .move span{
	margin: 0 auto;
}
#rankDetail .move .before{
	display: block;
	padding-right: 3px;
}
#rankDetail .theme{
	text-align: right;
}
#rankDetail .contents p{
	padding-top: 15px;
	line-height: 1.4;
	zoom: 1;
}
#rankDetail .ph{
	float: left;
	margin-right: 10px;
}
#rankDetail .voice{
	color: #3a8a91;
	font-size: 130%;
}
#rankDetail .prof{
	display: block;
	margin-top: 15px;
	text-align: right;
}
#rankDetail .voicer{
	font-size: 130%;
}
#rankDetail .voicer span{
	margin-right: 5px;
	color: #3a8a91;
}
#rankDetail .count{
	width: 190px;
	text-align: center;
}
#rankDetail dd.count {
	background: #58aeb8;
}
#rankDetail .count span{
/*	display: inline-block;
	*display: inline;
	*zoom: 1;
 */
	vertical-align: middle;
	min-width: 100px;
	_width: 100px;
	color: #fff;
	font-size: 180%;
	text-align: center;
 margin:0 auto;
}
#rankDetail .count span p{
	margin: 3px 0 0 8px;
 display:inline;
}

#rankDetail .count .number{
}
#rankDetail .count .txtsmall{
 text-align:right;
 font-size:77%;
 width:4em;
 text-align:right;
 display:inline-block;
 padding-top:5px;
	margin: 0 3px;
}
#rankDetail .novoice{
	padding: 20px 10px;
	font-size: 120%;
	text-align: center;
}