/* ranking css */
@charset "UTF-8";

/* main
----------------------------------------------------------------------*/
#main{ margin-top:35px; }

/* [PC]viewCondition
----------------------------------------------- */
#viewCondition{
	display: -webkit-flex;
	display: flex;
	margin:80px 0 0 25px;
	font-size:14px;
	color:#666;
}
/* selectView */
#viewCondition .selectView{
	position:relative;
	margin-right:3.78%;
}
#viewCondition .selectView:nth-child(1){ min-width:185px; }
#viewCondition .selectView:nth-child(2){ min-width:160px; }
#viewCondition .selectView:nth-child(3){ min-width:160px; }

#viewCondition .selectView p{
	padding:5px 45px 5px 0;
	cursor:pointer;
}
#viewCondition .selectView p:after{
	content: '';
	position: absolute;
	right: 15px;
	top: 12px;
	width: 0;
	border: 5px solid transparent;
	border-top: 9px solid #666;
	-webkit-transition: .3s;
	transition: .3s;
	-webkit-transform-origin: center top;
	transform-origin: center top;
}
#viewCondition .selectView.open p:after{
	-webkit-transform: translateY(10px) scale(1, -1);
	transform: translateY(10px) scale(1, -1);
}
#viewCondition .selectView ul{
	position: absolute;
	left: -10px;
	top: auto;
	min-width:100%;
	border:1px solid #ccc;
	background:#fff;
	z-index:2;
	opacity: 0;
	-webkit-transform-origin: top center;
	transform-origin: top center;
	-webkit-transition: .5s;
	transition: .5s;
}
#viewCondition .selectView.open ul{
	opacity: 1;
}
#viewCondition .selectView ul li a{
	display:block;
	max-height:0;
	padding:0 10px;
	text-decoration:none;
	overflow:hidden;
	opacity: 0;
}
#viewCondition .selectView.open ul li a{
	padding:5px 10px;
	max-height: 50px;
	opacity: 1;
	-webkit-transition:.3s .9s;
	transition:.3s .9s;
}
#viewCondition .selectView ul li:nth-child(1) a{ -webkit-transition-delay:0s; transition-delay:0s; }
#viewCondition .selectView ul li:nth-child(2) a{ -webkit-ransition-delay:.1s; transition-delay:.1s; }
#viewCondition .selectView ul li:nth-child(3) a{ -webkit-ransition-delay:.2s; transition-delay:.2s; }
#viewCondition .selectView ul li:nth-child(4) a{ -webkit-ransition-delay:.3s; transition-delay:.3s; }
#viewCondition .selectView ul li:nth-child(5) a{ -webkit-ransition-delay:.4s; transition-delay:.4s; }
#viewCondition .selectView ul li:nth-child(6) a{ -webkit-ransition-delay:.5s; transition-delay:.5s; }
#viewCondition .selectView ul li:nth-child(7) a{ -webkit-ransition-delay:.6s; transition-delay:.6s; }
#viewCondition .selectView ul li:nth-child(8) a{ -webkit-ransition-delay:.7s; transition-delay:.7s; }
#viewCondition .selectView ul li:nth-child(9) a{ -webkit-ransition-delay:.8s; transition-delay:.8s; }

#viewCondition .selectView ul li.select a{
	font-weight:bold;
	background:#ddd;
}
#viewCondition .selectView ul li:hover{
	-webkit-transition-delay:0s;
	transition-delay:0s;
	background:#efefef;
}

/* VIEW ALLボタン */
#ranking .btn.linkBtn a {
	width: 180px;
	height: 55px;
	margin-top:30px;
	line-height: 53px;
	font-size: 15px;
	border: 1px solid #ccc;
}
/*--------------------------------------------------------------------
 sp
--------------------------------------------------------------------*/
@media all and (max-width: 640px) { 

/* main
----------------------------------------------------------------------*/
	#main{ margin-top:25px; }

/* [SP]sortArea
--------------------------------------------------------------------*/
	#sortArea{
		margin-top:25px;
		padding-bottom:1px;
		border-bottom:1px solid #ccc;
	}
	#sortArea .sortBtn{
		position:relative;
		text-align:center;
		border-top:1px solid #ccc;
	}
	#sortArea .sortBtn a{
		position:relative;
		display:block;
		height:100%;
		line-height:50px;
		font-size:11px;
		text-decoration:none;
		z-index:1;
	}
	#sortArea .sortBtn a img{
		width:17px;
		margin-right:10px;
		vertical-align:middle;
	}
	#sortArea .sortBtn a:hover img{ opacity:1; }

	/* moreBlock */
	#sortArea .moreBlock{
		position:absolute;
		width:100%;
		max-height:0;
		margin:0 -25px;
		padding:0 25px;
		background:#fff;
		z-index:2;
		border-bottom:1px solid rgba(0,0,0,0);
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		-webkit-transform: translatez(0);
		-webkit-transform: translate3d(0,0,0);
		overflow:hidden;
		-webkit-transition:max-height .8s, border .5s .5s;
		transition:max-height .8s, border .5s .5s;
	}
	#sortArea .moreBlock.open{
		max-height:100vh;
		border-bottom:1px solid #ccc;
		-webkit-transition:max-height .8s, border 0s 0s;
		transition:max-height .8s, border 0s 0s;
		z-index:2;
	}
	#sortArea .moreBlock .selectBox{
		margin-top:6px;
	}
	#sortArea .moreBlock .selectBox select{
		padding:16px 35px 14px 15px
	}
	#sortArea .moreBlock .submitBtn{
		width:71.94%;
		margin:20px auto 40px;
	}
	#sortArea .moreBlock .submitBtn input{
		height:47px;
		line-height:45px;
		font-size:11px;
	}
/* ranking
----------------------------------------------- */
	#ranking .itemList{ margin-top:17px; }

	.itemList.ranking li a:before{
		width:26px;
		height:26px;
		line-height:26px;
	}
	/* VIEW ALLボタン */
	#ranking .btn.linkBtn a {
		width: 130px;
		height: 40px;
		margin-top:15px;
		line-height: 38px;
		font-size: 11px;
	}

}