@charset "shift_jis";


ul,li {
	margin:0;
	padding:0;
	list-style-type:none;
}


h1,h2,h3,p,div,figure {
	margin:0;
	padding:0;
}


.top5em {
	margin-top:5em;
}



/*　基本設定
----------------------------------------------------------- */


#f_ranking_contents img {
	border:0;
	width:100%;
	height:auto;
}




/*　タイトル
----------------------------------------------------------- */
#f_ranking_contents .ttl_bk {
	background:url(images/ttl_bk.jpg);
	width:100%;
	overflow:auto;
	overflow-y:hidden;
}


#f_ranking_contents .ttl {
	width:77.28026%;
	height:auto;
	float:left;
}


#f_ranking_contents .catalog {
	width:22.71974%;
	height:auto;
	float:left;
}





/*　メニュー
----------------------------------------------------------- */


#f_ranking_menu img {
	width:100%;
	height:auto;
}


#f_ranking_menu {
	width:auto;
	text-align:center;
}


#f_ranking_menu ul {
	width:auto;
	overflow:auto;
	overflow-y:hidden;
}


#f_ranking_menu ul li{
	float:left;
}


#f_ranking_menu .img01 {
	width:25.124378109%;
	height:auto;
}


#f_ranking_menu .img02 {
	width:24.626865673%;
	height:auto;
}






/*　バナー　上余白
----------------------------------------------------------- */


#f_ranking_contents .bar {
	margin-top:4em;
}



/*　陳列
----------------------------------------------------------- */


#f_ranking_main {
	margin-left:1.65837%;
	margin-right:1.65837%;
}

 
#f_ranking_main h3 {
	margin-top:1em
}




/*　横陳列
----------------------------------------------------------- */


#f_ranking_main .yoko ul {
	width:auto;
	overflow:auto;
	overflow-y:hidden;
}

#f_ranking_main .yoko ul li.left{
	width:24.0137%;
	float:left;
	margin-bottom:1em;
}

#f_ranking_main .yoko ul li.right{
	width:24.0137%;
	margin-left:1.315%;
	float:left;
	margin-bottom:1em;
}


#f_ranking_contents .name_txt {
	font-weight:bold;
	padding-top:0.5em;
}


#f_ranking_contents .name_txt a {
	color:#333!important;
}


#f_ranking_contents .price {
	color:#F00;
	font-weight:bold;
}



/*　縦陳列
----------------------------------------------------------- */

#f_ranking_contents .tate_fr {
	overflow:auto;
	overflow-y:hidden;
}
	

#f_ranking_contents .fr_left {
	width:49.7512%;
	float:left;
}

#f_ranking_contents .fr_right {
	width:49.7512%;
	margin-left:0.4976%;
	float:left;
}


#f_ranking_contents .tate ul {
	width:auto;
	overflow:auto;
	overflow-y:hidden;
}

#f_ranking_contents .tate ul li.left{
	width:48.61111%;
	float:left;
	margin-bottom:1em;
}

#f_ranking_contents .tate ul li.right{
	width:48.61111%;
	margin-left:2.77778%;
	float:left;
	margin-bottom:1em;
}





/*　タイトルバー中央揃え
----------------------------------------------------------- */

#f_ranking_contents .ttl_bar {
	position:relative;
	width:100%;
	margin-top:3em;
}

#f_ranking_contents .ttl_txt {
	position:absolute;
	width:100%;
	top:1em;
}

#f_ranking_contents .ttl_txt p {
	text-align:center;
	font-size:350%;
	color:#FFFFFF;
}

	

/*　タイトルバー前揃え
----------------------------------------------------------- */

#f_ranking_contents .ttl2_bar {
	position:relative;
	width:100%;
	margin-top:3em;
}

#f_ranking_contents .ttl2_txt {
	position:absolute;
	width:100%;
	top:1em;
}

#f_ranking_contents .ttl2_txt p {
	text-align:left;
	padding:0 0 0 0.5em;
	font-size:350%;
	color:#FFFFFF;
}




/*　ランキングキャッチコピー
----------------------------------------------------------- */

#f_ranking_contents .catch {
	width:auto;
	overflow:auto;
	overflow-y:hidden;
}


/*　1-3位 */


#f_ranking_contents .catch_img {
	width:17.857142857%;
	height:auto;
	float:left;
}


#f_ranking_contents .catch_txt {
	width:82.142857143%;
	height:auto;
	float:left;
	margin-top:1.5em;
	font-size:130%;
	font-weight:bold;
}


/*　4位 */


#f_ranking_contents .catch2_img {
	width:14.285714285%;
	height:auto;
	float:left;
}


#f_ranking_contents .catch2_txt {
	width:85.714285715%;
	height:auto;
	float:left;
	margin-top:1.8em;
	font-size:130%;
	font-weight:bold;
}


/*　5位 */


#f_ranking_contents .catch3_txt {
	width:85.714285715%;
	height:auto;
	float:left;
	margin-top:0.6em;
	font-size:130%;
	font-weight:bold;
}


/*　縦置き1位 */

#f_ranking_contents .catch4_img {
	width:8.860555555%;
	height:auto;
	float:left;
}


#f_ranking_contents .catch4_txt {
	width:91.139444445%;
	height:auto;
	float:left;
	margin-top:2.5em;
	font-size:130%;
	font-weight:bold;
}



/*　縦置き2-3位 */

#f_ranking_contents .catch5_txt {
	width:82.142857143%;
	height:auto;
	float:left;
	margin-top:2em;
	font-size:130%;
	font-weight:bold;
}


/*　縦置き4-5位 */

#f_ranking_contents .catch6_txt {
	width:85.714285715%;
	height:auto;
	float:left;
	margin-top:1.5em;
	font-size:130%;
	font-weight:bold;
}






/*　バイヤーコメント
----------------------------------------------------------- */

#f_ranking_contents .comment {
	border-radius: 0.5em;
	background:#FFF;
	border:#CCC 1px solid;
	padding:0.7em;
	line-height:1.8;
}



#f_ranking_contents .commentbar {
	background:url(images/comment.png) no-repeat;
	width:100%;
	height:auto;
}

#f_ranking_contents .commentbar p{
	font-weight:bold;
	padding:12px 0 10px 14.2587%;
	color:#999999;
}






/*　惣菜陳列
----------------------------------------------------------- */

#f_ranking_contents .sidedish {
	background:url(images/sidedish_bk.jpg) repeat-y;
	-moz-background-size:100% auto;
	background-size:100% auto; 
}
	

#f_ranking_contents .sidedishbtm {
	background:#990033;
	height:1.5em;
}




/*　スイーツ陳列
----------------------------------------------------------- */

#f_ranking_contents .sweets {
	background:url(images/sweets_bk.jpg) repeat-y;
	-moz-background-size:100% auto;
	background-size:100% auto; 
}
	

#f_ranking_contents .sweetsbtm {
	background:#DDB47A;
	height:1.5em;
}




/*　フルーツ陳列
----------------------------------------------------------- */

#f_ranking_contents .fruits {
	background:url(images/fruits_bk.jpg) repeat-y;
	-moz-background-size:100% auto;
	background-size:100% auto; 
}
	

#f_ranking_contents .fruitsbtm {
	background:#999900;
	height:1.5em;
}



/*　海鮮陳列
----------------------------------------------------------- */

#f_ranking_contents .seafood {
	background:url(images/seafood_bk.jpg) repeat-y;
	-moz-background-size:100% auto;
	background-size:100% auto;
}

#f_ranking_contents .seafood_fr {
	margin-left:2%;
	margin-right:2%;
}

	

#f_ranking_contents .seafoodbtm {
	background:#336699;
	height:1.5em;
}



/*　主食陳列
----------------------------------------------------------- */

#f_ranking_contents .staple {
	background:url(images/staple_bk.jpg) repeat-y;
	-moz-background-size:100% auto;
	background-size:100% auto;
}

#f_ranking_contents .staple_fr {
	margin-left:2%;
	margin-right:2%;
}

	

#f_ranking_contents .staplebtm {
	background:#996600;
	height:1.5em;
}



/*　ドリンク陳列
----------------------------------------------------------- */

#f_ranking_contents .drink {
	background:url(images/drink_bk.jpg) repeat-y;
	-moz-background-size:100% auto;
	background-size:100% auto; 
}
	

#f_ranking_contents .drinkbtm {
	background:#FF9900;
	height:1.5em;
}




/*　調味料陳列
----------------------------------------------------------- */

#f_ranking_contents .seasoning {
	background:url(images/seasoning_bk.jpg) repeat-y;
	-moz-background-size:100% auto;
	background-size:100% auto; 
}
	

#f_ranking_contents .seasoningbtm {
	background:#B79F77;
	height:1.5em;
}







/*　ヘルシー
----------------------------------------------------------- */

#f_ranking_contents .healthy {
	background:url(images/healthy_bk.jpg) repeat-y;
	-moz-background-size:100% auto;
	background-size:100% auto; 
}
	

#f_ranking_contents .healthybtm {
	background:#993366;
	height:1.5em;
}




/*　お薦め陳列
----------------------------------------------------------- */

#f_ranking_main .osusume {
	margin-bottom:2em;
}


#f_ranking_main .osusume ul {
	width:auto;
	overflow:auto;
	overflow-y:hidden;
}

#f_ranking_main .osusume ul li.left{
	width:19.03945%;
	float:left;
	border:#CCCCCC 1px solid;
	margin-bottom:2em;
}

#f_ranking_main .osusume ul li.right{
	width:19.03945%;
	margin-left:0.96%;
	float:left;
	border:#CCCCCC 1px solid;
	margin-bottom:2em;
}



/*　マウスオーバー
----------------------------------------------------------- */

.osusume figure {
	position: relative;
	overflow: hidden;
	width:100%;
}


.osusume figcaption {
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
	color:#FFFFFF;
	bottom: 2949161px;
}


.osusume figcaption p {
	text-align:left;
	padding:30px 25px 25px 25px;
	font-size:125%;
}

.osusume figure:hover figcaption {
	opacity: 1;
}