@charset "Shift_JIS";

/***********************************************
ベース
***********************************************/
.ranking_main div,.ranking_main span,.ranking_main applet,.ranking_main object,.ranking_main iframe,.ranking_main h1,.ranking_main h2,.ranking_main h3,.ranking_main h4,.ranking_main h5,.ranking_main h6,.ranking_main p,.ranking_main blockquote,.ranking_main pre,.ranking_main a,.ranking_main abbr,.ranking_main acronym,.ranking_main address,.ranking_main big,.ranking_main cite,.ranking_main code,.ranking_main del,.ranking_main dfn,.ranking_main em,.ranking_main img,.ranking_main ins,.ranking_main kbd,.ranking_main q,.ranking_main s,.ranking_main samp,.ranking_main small,.ranking_main strike,.ranking_main strong,.ranking_main sub,.ranking_main sup,.ranking_main tt,.ranking_main var,.ranking_main b,.ranking_main u,.ranking_main i,.ranking_main center,.ranking_main dl,.ranking_main dt,.ranking_main dd,.ranking_main ol,.ranking_main ul,.ranking_main li,.ranking_main fieldset,.ranking_main form,.ranking_main label,.ranking_main legend,.ranking_main table,.ranking_main caption,.ranking_main tbody,.ranking_main tfoot,.ranking_main thead,.ranking_main tr,.ranking_main th,.ranking_main td,.ranking_main article,.ranking_main aside,.ranking_main canvas,.ranking_main details,.ranking_main embed,.ranking_main figure,.ranking_main figcaption,.ranking_main footer,.ranking_main header,.ranking_main hgroup,.ranking_main menu,.ranking_main nav,.ranking_main output,.ranking_main ruby,.ranking_main section,.ranking_main summary,.ranking_main time,.ranking_main mark,.ranking_main audio,.ranking_main video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	line-height: 1;
	box-sizing:border-box;
}
.ranking_main *:before,.ranking_main *:after{
	box-sizing:border-box;
}
.ranking_main img{
	max-width:100%;
	vertical-align:bottom;
}
.ranking_main{
	background: #fff;
	color:#666 !important;
	font-size: 16px;
	line-height: 1.6;
	padding:5% 3%;
}
@media screen and (max-width:768px){
	.ranking_main{
		font-size: 14px;
	}
}
.ranking_main a:hover img{
	opacity:1.0;
}
.ranking_main .f-red{
	color:#ed3838;
}

/***********************************************
ナビ
***********************************************/
.ranking_main .ranking_navgation ul{
	width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	padding:20px 0;
}
.ranking_main .ranking_navgation li{
	margin: 3px 2px 3px;
	list-style:none;
}
.ranking_main .ranking_navgation li a{
	display: block;
	padding:20px 20px;
	background: #fff;
	text-decoration: none;
	text-align: center;
	background: #dbdbdb;
}
.ranking_main .ranking_navgation li a:hover,
.ranking_main .ranking_navgation li.off a{
	background: #ed3838;
	color: #fff;
	transition: .2s;
}
.ranking_main .ranking_navgation > p{
	padding-bottom: 15px;
	font-size: 14px;
	line-height: 1.4;
	border-bottom: 1px solid #2d2d2d;
	font-weight: bold;
	color: #2d2d2d;
}
@media screen and (max-width:798px){
	.ranking_main .ranking_navgation{
		margin-bottom: 20px;
	}
	.ranking_main .ranking_navgation ul{
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.ranking_main .ranking_navgation li{
		margin: 0 0 2px;
		width: calc(50% - 1px);
	}
	.ranking_main .ranking_navgation li a,
	.ranking_main .ranking_navgation li.off a{
		padding:15px 10px;
		margin: 0;
		border-radius: 0;
	}
}
/***********************************************
コンテンツ
***********************************************/
.ranking_main .ranking_list .ranking_title{
	font-weight: bold;
	font-size: 30px;
	padding-bottom: 10px;
	margin-bottom: 20px;
	color: #2d2d2d;
	border-bottom: 1px solid #2d2d2d;
}
.ranking_main .ranking_list .ranking_title .f-red{
	font-size: 20px;
	line-height: 2.6;
}
@media screen and (max-width:640px){
	.ranking_main .ranking_list .ranking_title{
		font-size: 20px;
	}
	.ranking_main .ranking_list .ranking_title .f-red{
		font-size: 14px;
		list-style: 1.6;
	}
}
.ranking_main .ranking_list .ranking_lists{
	display: flex;
	flex-wrap: wrap;
	counter-reset: number;
}
.ranking_main .ranking_list .ranking_lists li{
	width: 25%;
	margin-bottom: 10%;
	text-align: center;
	position: relative;
	list-style:none;
}
.ranking_main .ranking_list .ranking_lists li:before{
	counter-increment: number;
	content: counter(number);
	background: #ed3838;
	font-weight: bold;
	color:#fff;
	min-width: 20px;
	min-height: 20px;
	padding: 3px 1px 3px;
	position: absolute;
	left: 0;
	top:0;
}
.ranking_main .ranking_list .ranking_lists li a{
	display: block;
	padding: 2%;
	text-decoration: none;
}
.ranking_main .ranking_list .ranking_lists li p{
	margin-top: 10px;
	font-size: 12px;
}
.ranking_main .ranking_list .ranking_lists li p .f-red{
	font-weight: bold;
	font-size: 18px;
	display:block;

}
@media screen and (max-width:640px){
	.ranking_main .ranking_list .ranking_lists li{
		width: 33%;
		margin-bottom: 10%;
		text-align: center;
		position: relative;
	}
	.ranking_main .ranking_list .ranking_lists li p{
		line-height: 1.6;
	}
	.ranking_main .ranking_list .ranking_lists li p .f-red{
		display: block;
	}
}