@charset "UTF-8";

/*//////////----- RANKING -----//////////*/

#ranking div.content{
	width:100%;
	margin:0 auto;
	max-width: 840px;
	
	box-sizing: border-box;
	padding:5px;
}

#ranking div.content div.tab-child-inner{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

#ranking h5{
	font-weight:bold;
	
	font-size:1.5rem;
	line-height:30px;
	color:#000;
	
	box-sizing: border-box;
	padding-bottom:5px;
	border-bottom:solid 5px #980270;
	margin-bottom:15px;
}

#ranking ul.tab{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
	
	margin-bottom:10px;
}

#ranking ul.tab li{
	width:calc(100%/3);
	
	font-size:0.8rem;
	line-height:20px;
	
	text-align: center;
	
	box-sizing: border-box;
	padding:5px;
}

#ranking ul.tab li:hover{
	cursor: pointer;
}

#ranking ul.tab li span.note{
	display:block;
	
	background-color:#f0f0f0;
	color:#000;
	
	box-sizing: border-box;
	padding:10px 0;
	
	border-radius:5px;
}

#ranking ul.tab li.active span.note{
	background-color:#980270;
	color:#fff;
	
	border-radius:5px;
}

.tab-content{
	box-sizing: border-box;
	padding:5px;
}

.tab-content div.tab-child{
	display:none;
}

.tab-content div.tab-child.show{
	display:block;
}


#ranking article{
	width:100%;
	margin-bottom:10px;
}

#ranking article:last-child{
	margin-bottom:0;
}

@media only screen and (min-width: 720px){
	
	#ranking article{
		box-sizing: border-box;
		padding:7.5px;
		
		margin-bottom:0;
	}
	
	#ranking article:nth-child(-n+3){
		width:calc(100%/3);
	}
	
}