@charset "utf-8";


/**************************************************50
 * ranking
 **************************************************/
#ranking{
}
#ranking > strong{
	display: block;
	text-align: center;
}
#ranking h2{
	background-color: #F48FB1;
	color: #FFFFFF;
	line-height: 1.25;
	padding: 0.25em 1em;
}
#ranking h2 .ranking_desc{
	display: block;
	font-weight: normal;
}
#ranking .rank_list{
}
#ranking .rank_list figure{
	color: #4D4D4D;
	display: inline-block;
	overflow: hidden;
	position: relative;
	text-align: center;
	vertical-align: top;
}
#ranking .rank_list figure{
	background-color: #FDF0F4;
	margin-bottom: 0.5em;
}
#ranking .rank_list figure:nth-child(1){
	background-color: #FFF59D;
}
#ranking .rank_list figure:nth-child(2){
	background-color: #EEEEEE;
}
#ranking .rank_list figure:nth-child(3){
	background-color: #F2DBCB;
}
#ranking .rank_list figure picture img{
	vertical-align: top;
}
#ranking .rank_list figure h3{
	border-radius: 50%;
	overflow: hidden;
}
#ranking .rank_list figure.rank_01 h3:before,
#ranking .rank_list figure.rank_02 h3:before,
#ranking .rank_list figure.rank_03 h3:before{
	-webkit-animation: 7.5s ease-in 5s infinite shine;
	animation: 7.5s ease-in 0 infinite shine;
	background-image: -webkit-linear-gradient(135deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
	background-image: linear-gradient(135deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
	content: "";
	display: block;
	height: 200%;
	position: absolute;
	top: -200%;
	left: -225%;
	transition: all 0.5s ease-in-out;
	width: 200%;
}
@-webkit-keyframes shine{
	0%{
		top: -200%;
		left: -225%;
	}
	2.5%{
		top: 200%;
		left: 200%;
	}
	5%{
		top: -200%;
		left: -225%;
	}
}
@keyframes shine{
	0%{
		top: -200%;
		left: -225%;
	}
	2.5%{
		top: 200%;
		left: 200%;
	}
	2.51%{
		top: -200%;
		left: -225%;
	}
}
#ranking .rank_list figure h3 img{
	width: 100%;
}
#ranking .rank_list figure h4{
	color: #F48FB1;
	line-height: 1.5;
}
#ranking .rank_list figure h4 a{
	color: #F48FB1;
}
#ranking .ranking_none{
	text-align: center;
}
@media screen and (max-width:319px){
	#ranking h2 .ranking_desc{
		font-size: 9px;
	}
}
@media screen and (min-width:320px) and (max-width:359px){
	#ranking h2 .ranking_desc{
		font-size: 11px;
	}
}
@media screen and (min-width:360px) and (max-width:767px){
	#ranking h2 .ranking_desc{
		font-size: 50%;
	}
}
@media screen and (max-width:767px){
	#ranking{
		margin-bottom: 12.5%;
	}
	#ranking > strong{
		font-size: 125%;
		line-height: 1.5;
		margin-top: 3.125%;
		margin-bottom: -0.25em;
	}
	#ranking h2{
		font-size: 150%;
		margin-top: 3.125%;
	}
	#ranking h2 .ranking_desc{
	}
	#ranking .rank_list{
		margin-top: 3.125%;
	}
	#ranking .rank_list figure{
		border-collapse: separate;
		border-spacing: 0.5em;
		box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.1);
		display: table;
		margin-left: 3.125%;
		text-align: left;
		width: 93.75%;
	}
	#ranking .rank_list figure picture{
		display: table-cell;
		overflow: hidden;
		position: relative;
		vertical-align: middle;
		width: 30%;
	}
	#ranking .rank_list figure picture:before{
		content: "";
		display: block;
		padding-top: 100%;
	}
	#ranking .rank_list figure picture img{
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
		max-width: unset;
		max-width: none;
	}
	#ranking .rank_list figure figcaption{
		display: table-cell;
		line-height: 1.5;
		vertical-align: middle;
	}
	#ranking .rank_list figure h3{
		position: relative;
		width: 20%;
	}
	#ranking .rank_list figure h4{
		padding-left: 1%;
	}
	#ranking .rank_size{
		font-size: 87.5%;
		padding-left: 1%;
	}
	#ranking .rank_size span{
		margin-right: 0.25em;
	}
	#ranking .ranking_none{
		line-height: 1.5;
		margin-top: 3.125%;
	}
}
@media screen and (min-width:768px){
	#ranking{
		margin-bottom: 100px;
	}
	#ranking > strong{
		font-size: 150%;
		padding-top: 30px;
		margin-bottom: -20px;
	}
	#ranking h2{
		font-size: 200%;
		margin-top: 50px;
	}
	#ranking h2 .ranking_desc{
		font-size: 50%;
		margin-top: 0.125em;
	}
	#ranking .rank_list{
		margin-bottom: 30px;
	}
	#ranking .rank_list + .rank_list{
		margin-top: -30px;
	}
	#ranking .rank_list figure{
		box-shadow: 0px 2px 6px 3px rgba(0, 0, 0, 0.1);
		margin-top: 30px;
		width: 18%;
	}
	#ranking .rank_list figure:not(:nth-child(5n+1)){
		margin-left: 2.5%;
	}
	#ranking .rank_list figure picture{
	}
	#ranking .rank_list figure figcaption{
		line-height: 1.5;
		padding: 0.75em 0.5em;
	}
	#ranking .rank_list figure h3{
		margin: 1%;
		position: absolute;
		top: 0;
		left: 0;
		width: 25%;
	}
	#ranking .rank_list figure h4{
	}
	#ranking .rank_size span{
		margin: 0 0.125em;
	}
	#ranking .ranking_none{
		margin-top: 30px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#ranking .rank_list figure{
		font-size: 75%;
	}
	#ranking .rank_size{
		font-size: 68.75%;
	}
}
@media screen and (min-width:940px) and (max-width:1023px){
	#ranking .rank_list figure{
		font-size: 87.5%;
	}
	#ranking .rank_size{
		font-size: 75%;
	}
}
@media screen and (min-width:1024px) and (max-width:1199px){
	#ranking .rank_size{
		font-size: 81.25%;
	}
}
@media screen and (min-width:1200px){
	#ranking .rank_size{
		font-size: 87.5%;
	}
}