@charset "utf-8";


#rankingContainer {
	padding-top: 45px;
	padding-bottom: 50px;
}

#rankingHeader {
	margin: 0 0 47px;
}

#rankingTitle {
	float: left;
	width: 241px;
	height: 27px;
	margin: 1px 0 0 10px;
	background-image: url(../images/rn_ranking_title.png);
	background-repeat: no-repeat;
	text-indent: -999em;
}


#rankingContainer .rankingStit {
	height: 49px;
	margin: 0 0 30px;
	background: url(/common_recipe/images/body_bg02.png);
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

#rankingContainer .rankingStit span {
	display: block;
	height: 49px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	text-indent: -999em;
}

#rankingStitWeekly span {
	background-image: url(../images/rn_ranking_stit_weekly.png);
}

#rankingStitGenre span {
	background-image: url(../images/ranking_stit_genre.png);
}

#rankingWeekly {
	margin: 0 0 60px;
}

.recipeListArea .listRecipeBlock {
	margin-right: 10px !important;
}

.recipeListArea .listRecipeBlock:nth-child(1),
.recipeListArea .listRecipeBlock:nth-child(2),
.recipeListArea .listRecipeBlock:nth-child(3) {
	width: 304px;
}

.recipeListArea .listRecipeBlock:nth-child(3) {
	margin-right: 0 !important;
}

.recipeListArea .listRecipeBlock:nth-child(4n+3) {
	margin-right: 0 !important;
}

/*.recipeListArea .listRecipeBlock:nth-child(4n) {
	margin-right: 10px;
}*/

.recipeListArea .listRecipeBlock:nth-child(4n+1) {
	clear: none;
}

#rankingLower {
	clear: both;
	padding: 30px;
	background: #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
	box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
}

#rankingLower ul {
	width: 415px;
}

#rankingLower01 {
	float: left;
}

#rankingLower02 {
	float: right;
}

#rankingLower ul {
	background: url(/common_recipe/images/dotline_howto2.png) 0 0 repeat-x;
}

#rankingLower ul li {
	display: table;
	position: relative;
	width: 100%;
	height: 62px;
	padding-left: 54px;
	background: url(/common_recipe/images/dotline_howto2.png) 0 100% repeat-x;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: middle;
}

.listRankingBlock:before {/*position: absolute;top: 10px;left: 10px;*/
		position: absolute;
		top: 10px;
		left: 10px;
	    width: 50px;
	    height: 50px;
	    content: "";
	    background-position: 0 0;
	    background-repeat: no-repeat;
	    z-index: 10;
	    /*background-size: 100%;*/
}

.listRankingBlock:nth-child(1):before,
.listRankingBlock:nth-child(2):before,
.listRankingBlock:nth-child(3):before {/*position: absolute;top: 10px;left: 10px;*/
	    width: 70px;
	    height: 70px;
}

.listRankingBlock:nth-child(1):before {background-image: url(../images/rn_ranking_num01.png);}
.listRankingBlock:nth-child(2):before {background-image: url(../images/rn_ranking_num02.png);}
.listRankingBlock:nth-child(3):before {background-image: url(../images/rn_ranking_num03.png);}
.listRankingBlock:nth-child(4):before {background-image: url(../images/rn_ranking_num04.png);}
.listRankingBlock:nth-child(5):before {background-image: url(../images/rn_ranking_num05.png);}
.listRankingBlock:nth-child(6):before {background-image: url(../images/rn_ranking_num06.png);}
.listRankingBlock:nth-child(7):before {background-image: url(../images/rn_ranking_num07.png);}
.listRankingBlock:nth-child(8):before {background-image: url(../images/rn_ranking_num08.png);}
.listRankingBlock:nth-child(9):before {background-image: url(../images/rn_ranking_num09.png);}
.listRankingBlock:nth-child(10):before {background-image: url(../images/rn_ranking_num10.png);}
.listRankingBlock:nth-child(11):before {background-image: url(../images/rn_ranking_num11.png);}
.listRankingBlock:nth-child(12):before {background-image: url(../images/rn_ranking_num12.png);}
.listRankingBlock:nth-child(13):before {background-image: url(../images/rn_ranking_num13.png);}
.listRankingBlock:nth-child(14):before {background-image: url(../images/rn_ranking_num14.png);}
.listRankingBlock:nth-child(15):before {background-image: url(../images/rn_ranking_num15.png);}


#rankingGenre li {
	float: left;
}

#rankingGenre li a {
	float: left;
	width: 310px;
	height: 50px;
	margin: 0 10px 10px 0;
	background-color: #fff;
	background-image: url(../images/ranking_genre_btn.png);
	background-repeat: no-repeat;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
	box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
	text-indent: -999em;
}

#rankingGenre li:nth-child(3n) a {
	margin-right: 0;
}

#rankGenre01 a {background-position: 50% 0;}
#rankGenre02 a {background-position: 50% -50px;}
#rankGenre03 a {background-position: 50% -100px;}
#rankGenre04 a {background-position: 50% -150px;}
#rankGenre05 a {background-position: 50% -200px;}


@media screen and (max-width: 960px){
	
	.recipeListArea .listRecipeBlock {
		width: 236px !important;
	}
	
	.recipeListArea .listRecipeBlock:nth-child(3) {
		margin-right: 0 !important;
	}
	
	.recipeListArea .listRecipeBlock:nth-child(4n+3) {
		margin-right: 10px !important;
	}
	
	.recipeListArea .listRecipeBlock:nth-child(3n) {
		margin-right: 0 !important;
	}
	
	#rankingLower {
		padding: 20px;
	}
	
	#rankingLower ul {
		width: 335px;
	}
	
	#rankingGenre li a {
		width: 242px;
	}
	
}

@media screen and (max-width: 768px){

}

@media screen and (max-width: 640px){

	#rankingContainer {
		padding-top: 25px;
		padding-bottom: 25px;
	}
	
	#rankingHeader {
		margin: 0 0 25px;
	}
	
	#rankingTitle {
		float: none;
		width: 135px;
		height: 15px;
		margin: 0;
		background-image: url(../images/rn_ranking_title_sp.png);
		background-size: 135px;
		height: 15px;
	}
	
	
	#rankingContainer .rankingStit {
		height: 48px;
		margin: 0 0 15px;
		background-size: 50px 50px;
	}
	
	#rankingContainer .rankingStit span {
		height: 48px;
		background-position: 50% 50%;
	}
	
	#rankingStitWeekly span {
		background-image: url(../images/rn_ranking_stit_weekly_sp.png);
		background-size: auto 33px;
	}
	
	
	#rankingWeekly {
		margin: 0 0 30px;
	}
	
	

	.recipeListArea .listRecipeBlock {
		float: left !important;
		width: 49.1% !important;
		margin: 0 0 5px 0 !important;
		padding: 2px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.recipeListArea .listRecipeBlock:nth-child(4n+3) {
		margin-right: 0 !important;
	}
	
	.recipeListArea .listRecipeBlock:nth-child(2n+3) {
		float: right !important;
	}
	
	.recipeListArea .listRecipeBlock:nth-child(2n+1) {
		clear: none !important;
	}
	
	.recipeListArea .listRecipeBlock:nth-child(2n) {
		margin-right: 0 !important;
	}
	
	.recipeListArea .listRecipeBlock:nth-child(2n) {
		clear: none;
		margin-right: 5px;
	}
	
	.recipeListArea .listRecipeBlock:nth-child(1),
	.recipeListArea .listRecipeBlock:nth-child(2),
	.recipeListArea .listRecipeBlock:nth-child(3) {
		width: 100% !important;
	}
	
	
	.recipeListArea .listRecipeBlock .btmUtil li {
		float: left;
		width: 25px;
		height: 25px;
		margin: 0 0 0 3px;
		padding-top: 1px;
		background-size: 25px 25px !important;
		color: #fff;
		font-size: 9px;
		text-align: center;
		line-height: 18px;
		letter-spacing: 0px;
	}
	
	
	.recipeListArea .listRecipeBlock .btmUtil li.time {
		background: url(/common_recipe/images/recipelist_time_sp.png) no-repeat;
	}
	
	.recipeListArea .listRecipeBlock .btmUtil li.kcal {
		background: url(/common_recipe/images/recipelist_kcal_sp.png) no-repeat;
	}
	
	.listRankingBlock:before {/*position: absolute;top: 10px;left: 10px;*/
		top: 5px;
		left: 5px;
	    width: 35px !important;
	    height: 35px !important;
	    background-size: 100%;
	}
	
/*	.recipeListArea .listRecipeBlock:nth-child(1) .photo,
	.recipeListArea .listRecipeBlock:nth-child(2) .photo,
	.recipeListArea .listRecipeBlock:nth-child(3) .photo {
		float: left;
		position: relative;
		width: 49.352751%;
		height: 100%;
		margin-right: 10px;
		overflow: hidden;
	}
	
	
	.recipeListArea .listRecipeBlock:nth-child(1) .recipeSummary,
	.recipeListArea .listRecipeBlock:nth-child(2) .recipeSummary,
	.recipeListArea .listRecipeBlock:nth-child(3) .recipeSummary {
		padding-left: 0;
	}*/
	
	.recipeListArea .listRecipeBlock:nth-child(1) .photo,
	.recipeListArea .listRecipeBlock:nth-child(2) .photo,
	.recipeListArea .listRecipeBlock:nth-child(3) .photo {
		float: left;
		position: relative;
		width: 50%;
/*		height: 100%;*/
		height: 0;
		min-height: 135px;
		padding-top: 44%;
		box-sizing: border-box;
/*		margin-right: 10px;*/
		overflow: hidden;
		background-size: auto 100%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}
	
	.recipeListArea .listRecipeBlock:nth-child(1) .photo span,
	.recipeListArea .listRecipeBlock:nth-child(2) .photo span,
	.recipeListArea .listRecipeBlock:nth-child(3) .photo span {
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		width: 100%;
		height: 100%;
	}
	
	.recipeListArea .listRecipeBlock:nth-child(1) .photo img,
	.recipeListArea .listRecipeBlock:nth-child(2) .photo img,
	.recipeListArea .listRecipeBlock:nth-child(3) .photo img {
		display: none;
		width: auto;
		max-width: 640px;
		height: 100%;
/*		-webkit-transform: translate3d(-50%, 0, 0);
		-ms-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);*/
	}
	
	.recipeListArea .listRecipeBlock:nth-child(1) .recipeName,
	.recipeListArea .listRecipeBlock:nth-child(2) .recipeName,
	.recipeListArea .listRecipeBlock:nth-child(3) .recipeName {
		float: right;
		width: 50%;
		box-sizing: border-box;
	}
	
	
	.recipeListArea .listRecipeBlock:nth-child(1) .recipeSummary,
	.recipeListArea .listRecipeBlock:nth-child(2) .recipeSummary,
	.recipeListArea .listRecipeBlock:nth-child(3) .recipeSummary {
/*		float: right;
/*		width: 50%;*!/
		padding-left: 0;
		box-sizing: border-box;*/
	}
	
}