@charset "utf-8";

/* ランキング NEW */
#cntWrapepr .cnt_rank {
	position:relative;
}
#cntWrapepr .cnt_rank h2{
	height: 32px;
    display: flex;
    align-items: center;
    font-weight: bold;
    justify-content: flex-start;
    font-size: 20px;
    font-family: "BIZ UDPゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #444;
}


#cntWrapepr .cnt_rank h2 img {
	margin:0 20px 0 10px;
}
#cntWrapepr .cnt_rank .rank_span {
	text-align: right;
	font-size: 14px;
	color: #666;
}
#cntWrapepr .cnt_rank div.slider_wrapper {
	overflow:hidden;
	background-image: url(../images/back_stripe.png);
}
#cntWrapepr .cnt_rank ul.slider_rank2 {margin-top: 15px;}
#cntWrapepr .cnt_rank ul.slider_rank2 li{
	text-align:center;
	margin: 0px 13px 0 0px;
}

#cntWrapepr .cnt_rank ul.slider_rank2 li.rnk_1:before { content:url("../images/rk_1.png");}
#cntWrapepr .cnt_rank ul.slider_rank2 li.rnk_2:before { content:url("../images/rk_2.png");}
#cntWrapepr .cnt_rank ul.slider_rank2 li.rnk_3:before { content:url("../images/rk_3.png");}
#cntWrapepr .cnt_rank ul.slider_rank2 li.rnk_4:before { content:url("../images/rk_4.png");}
#cntWrapepr .cnt_rank ul.slider_rank2 li.rnk_5:before { content:url("../images/rk_5.png");}
#cntWrapepr .cnt_rank ul.slider_rank2 li.rnk_6:before { content:url("../images/rk_6.png");}
#cntWrapepr .cnt_rank ul.slider_rank2 li.rnk_7:before { content:url("../images/rk_7.png");}
#cntWrapepr .cnt_rank ul.slider_rank2 li.rnk_8:before { content:url("../images/rk_8.png");}
#cntWrapepr .cnt_rank ul.slider_rank2 li.rnk_9:before { content:url("../images/rk_9.png");}
#cntWrapepr .cnt_rank ul.slider_rank2 li.rnk_10:before { content:url("../images/rk_10.png");}


.ttn_rank h2{
	border-bottom: 2px solid #c6ab65;
}
.ttn_rank .sp_ranklink li{
	border-color: #c6ab65;
}
.stn_rank h2{
	border-bottom: 2px solid #f1527a;
}
.stn_rank .sp_ranklink li{
	border-color: #f1527a;
}
.tn_rank h2{
	border-bottom: 2px solid #f4ce00;
}
.tn_rank .sp_ranklink li{
	border-color: #f4ce00;
}
.bd_rank h2{
	border-bottom: 2px solid #00a3d6;
}
.bd_rank .sp_ranklink li{
	border-color: #00a3d6;
}

.ranking_block h2 {
	font-family: "BIZ UDPゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width: 100%;
}
.sp_ranktitle {
	font-size: 14px;
}

@media screen and (min-width: 641px){
	/*「Next」と「Prev」 */
	.sp_ranklink,.sp_ranktitle {
		display: none;
	}
	#cntWrapepr .cnt_rank input {
		display: none;
	}
	#cntWrapepr .cnt_rank label.btn_prv,
	#cntWrapepr .cnt_rank label.btn_back {
		position: absolute;
		width:20px;
		height: 178px;
		text-decoration: none;
		line-height: 160px;
		font-size: 15px;
		color:.898989;
		z-index: 1;
		background: #ffffff;
		border:1px solid #cccccc;
	}
	#cntWrapepr .cnt_rank label.btn_prv {
		padding-left:5px;
	}
	#cntWrapepr .cnt_rank label.btn_back {
		right: 0;
		padding-left:5px;
	}
	#cntWrapepr .cnt_rank label.btn_prv:after,
	#cntWrapepr .cnt_rank label.btn_back:after{
		content:"";
		box-sizing: border-box;
		width: 6px;
		height: 15px;
		border: 10px solid transparent;
		position:absolute;
		z-index:2;
		top: 45%;
	}
	#cntWrapepr .cnt_rank label.btn_prv:after {
		right: 9px;
		border-right: 9px solid #cccccc;
	}		
	#cntWrapepr .cnt_rank label.btn_back:after{
		left: 9px;
		border-left: 9px solid #cccccc;
	}
	#cntWrapepr .css-slider2 {
		width: 650px;
		height: 180px;
		overflow: hidden;
		margin: 0px auto;
		padding: 0px 10px;
	}
	#cntWrapepr .cnt_rank .slider-wrapper2 {
		width: 1340px;
		position: relative;
		left: 0;
		will-change: transform;
		animation: slider2 20s infinite;
	}
	#cntWrapepr .cnt_rank .slide-item2 {
		
		float: left;
		position: relative;
	}
	#cntWrapepr .cnt_rank .slide-item2 img {
		width: 100%;
	}
	.slider_rank2.prv { margin-left:0px; transition: margin 0.5s linear; }
	.slider_rank2.back {margin-left:-670px;transition: margin 0.5s linear;}
	#cntWrapepr .cnt_rank .slider-wrapper2:hover { animation-play-state: paused; }


}

input[name="ranksel"]{
	display: none;
}


@media screen and (max-width: 640px){
	#cntWrapepr .ranking_block {
		width: calc(100% - 20px);
		margin: 0 auto;
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	#cntWrapepr .ranking_block .sp_ranklink *{
		box-sizing: border-box;
	}

	#cntWrapepr .ranking_block .sp_ranklink {
		box-sizing: border-box;
		width: 80px;
		height: auto;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	#cntWrapepr .ranking_block .sp_ranklink li {
		width: 80px;
		padding: 8px;
		gap: 10px;
		text-align: center;
		font-size: 10px;
		height: 66px;
		background-color: #F3F3F3;
	}

	#cntWrapepr .ranking_block .sp_ranklink li label{
		display: block;
	}


	#cntWrapepr .ranking_block .sp_rankbox {
		width: calc(100% - 90px);
	}
	#cntWrapepr .ranking_block .cnt_rank h2,
	#cntWrapepr .ranking_block .cnt_rank label,
	#cntWrapepr .ranking_block .cnt_rank .rank_span
		{
		display: none;
	}
	#cntWrapepr .ranking_block .cnt_rank ul.slider_rank2{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#cntWrapepr .ranking_block .cnt_rank ul.slider_rank2 li {
		width: 48%;
		margin:0;
	}
	#cntWrapepr .ranking_block .cnt_rank ul.slider_rank2 li img{
		max-width: 100%;
		display: block;
		margin: 0 auto;
	}
	#cntWrapepr .cnt_rank ul.slider_rank2 {
		display: flex;
		flex-wrap: wrap;
	}
	div.cnt_rank{
		display: none;
	}
	input#rankmenu1:checked~.sp_rankbox .cnt_rank:nth-child(1){
		display: block;
	}
	input#rankmenu2:checked~.sp_rankbox .cnt_rank:nth-child(2){
		display: block;
	}
	input#rankmenu3:checked~.sp_rankbox .cnt_rank:nth-child(3){
		display: block;
	}
	input#rankmenu4:checked~.sp_rankbox .cnt_rank:nth-child(4){
		display: block;
	}
	input#rankmenu5:checked~.sp_rankbox .cnt_rank:nth-child(5){
		display: block;
	}
	input#rankmenu6:checked~.sp_rankbox .cnt_rank:nth-child(6){
		display: block;
	}
	input#rankmenu7:checked~.sp_rankbox .cnt_rank:nth-child(7){
		display: block;
	}


	.sp_ranklink li{
		border-style: solid;
		border-width: 0;	
	}

	#cntWrapepr .ranking_block input#rankmenu1:checked~.sp_ranklink li:nth-child(1){
		border-width: 1px;	
	}
	#cntWrapepr .ranking_block input#rankmenu2:checked~.sp_ranklink li:nth-child(2){
		border-width: 1px;
	}
	#cntWrapepr .ranking_block input#rankmenu3:checked~.sp_ranklink li:nth-child(3){
		border-width: 1px;
	}
	#cntWrapepr .ranking_block input#rankmenu4:checked~.sp_ranklink li:nth-child(4){
		border-width: 1px;
	}
	#cntWrapepr .ranking_block input#rankmenu5:checked~.sp_ranklink li:nth-child(5){
		border-width: 1px;
	}
	#cntWrapepr .ranking_block input#rankmenu6:checked~.sp_ranklink li:nth-child(6){
		border-width: 1px;
	}
	#cntWrapepr .ranking_block input#rankmenu7:checked~.sp_ranklink li:nth-child(7){
		border-width: 1px;
	}

}
@media screen and (max-width: 640px){
	#cntWrapepr #cnt_newsale {
		margin-bottom: 20px;
		display: flex;
		justify-content: flex-start;
		gap: 10px;
		flex-wrap: wrap;
	}
	#cntWrapepr #cnt_newsale li{
		width: calc((100% - 20px) / 3);
		padding: 0;
		margin: 0;
	}
	#cntWrapepr #cnt_newsale li a{
		height: auto;
		padding: 0;
		margin: 0;
	}
}

div[data-rank="tennis"] h2 {
	border-bottom: 2px solid #f4ce00;
}
div[data-rank="badminton"] h2 {
	border-bottom: 2px solid #00a3d6;
}
div[data-rank="soft_tennis"] h2 {
	border-bottom: 2px solid #f1527a;
}
div[data-rank="table_tennis"] h2 {
	border-bottom: 2px solid #c6ab65;
}