.pc_view{
	display:block;
}
.sp_view{
	display:none;
}


@media (max-width: 768px){
.pc_view{
	display:none;
}
.sp_view{
	display:block;
}


}

/*--------------------------------*/
#kv{
	position: relative;
}
#kv .img{
	position: relative;
    z-index: -1;
}
#kv .ttl{
	font-size:40px;
	line-height:55px;
	font-weight:bold;
	position: absolute;
    left: 30px;
    top: 23%;
}
#kv .txt{
	position:absolute;
	left:30px;
	top: 40%;
    /*width: 300px;*/
}
#kv .t-btn{
position: absolute;
    left: 30px;
    bottom: 30px;
	}
#kv .t-btn a{
	width: 370px;
    padding: 20px 0;
    text-align: center;
    position: relative;
    color: #fff;
    font-size: 18px;
	background: url(https://www.foodconnection.jp/yokotafukueido-shop/shop-system-img/btn-bg.jpg) repeat;
	display: block;
	margin:0;
    letter-spacing: 2px;
    box-sizing: border-box;
}
#kv .t-btn i {
	vertical-align: sub;
    margin-right: 10px;
}
#kv .t-btn a:hover{
	opacity:0.8;
	transition: all .3s ease;
	-moz-transition: all .3s ease;
	-webkit-transition: all .3s ease;
	text-decoration:none;
}


@media (max-width: 768px){
#kv .ttl{
	font-size: 1.2em;
    line-height: 1.8em;
    left: 4%;
    top: 5%;
}
#kv .txt {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    padding: 3% 1%;
}
#kv .t-btn{
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    padding: 3% 1%;
}
#kv .t-btn a{
	width:100%;
	font-size: 17px;
    padding: 3% 0;
}

}

/*-------------------*/


.bnr_half{
	display:inline-flex;
}
.bnr1{
	margin: 40px 20px 0 0;
	position:relative;
}
.bnr2{
	margin: 40px 0 0 20px;
	position:relative;
}
.bnr_half dl dd{
	color: #fff;
    text-align: center;
    font-size: 34px;
    line-height: 48px;
    position: absolute;
    width: 100%;
	margin:0;
	padding:0;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    text-shadow: 1px 1px 10px rgb(0 0 0 / 0.5);
}
.bnr_half dl dt{
	font-size: 22px;
    background: #ff4500;
    color: #fff;
    padding: 18px 23px;
    position: absolute;
    right: 10px;
    bottom: 30px;
}
.bnr_half dl dt i{
	margin-left:10px;
}
.bnr1:hover,.bnr2:hover{
	opacity:0.8;
	transition: all .3s ease;
	-moz-transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
.bnr_half a:hover{
	text-decoration:none;
}


@media (max-width: 768px){
.bnr_half{
	display:inline-block;
}
.bnr1,.bnr2{
	margin:0 auto;
}
.bnr_half dl dd{
	right: auto;
    left: 55%;
   top: 5vw;
	bottom:auto;
    font-size: 1.2em;
    line-height: 1.8em;
    color: #2f2f2f;
    text-shadow: none;
    text-align: left;
    transform: inherit;
    width: auto;
}
.bnr_half .bnr2 dl dd{
   top: 9vw;

}
.bnr_half dl dt{
	font-size: 1em;
    padding: 3%;
    position: relative;
    text-align: center;
    display: block;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    margin: 3vw 0;
}
.bnr_half dl dt i{
margin-bottom: -5px;
}

.bnr_half dl{
	margin:0;
	padding:0;
}

}

/*------------------------------*/

#bnr3{
	position:relative;
    margin-top: 20px;
}
#bnr3  dl dd{
    font-size: 34px;
    line-height: 48px;
    padding: 0;
    margin: 0;
    left: 20px;
    top: 80px;
    position: absolute;
}
#bnr3  dl dd:first-letter{
	color:#ff4500;
}

#bnr3 dl dt.txt{
left: 0;
    bottom: 20px;
    background: #fff;
    position: absolute;
    padding: 25px 20px;
    width: 408px;
	font-weight:normal;
	}
#bnr3 dl dt.arrow{
	font-size: 22px;
    background: #ff4500;
    color: #fff;
    padding: 18px 23px;
    position: absolute;
    right: 10px;
    bottom: 20px;
}
#bnr3 dl dt.arrow i{
	margin-left:10px;
}
#bnr3:hover{
	opacity:0.8;
	transition: all .3s ease;
	-moz-transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
#bnr3 a:hover{
	text-decoration:none;
}

@media (max-width: 768px){
	#bnr3{
		margin: 0 auto 5%;
	}
#bnr3  dl dd{
right: auto;
    left: auto;
    top: 5vw;
    bottom: auto;
    font-size: 1.2em;
    line-height: 1.8em;
}
#bnr3 dl dt.txt{
position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    padding: 3% 1%;
    width: auto;
}
#bnr3  dl{
	margin:0;
	padding:0;
}
#bnr3 dl dt.arrow{
font-size: 1em;
    padding: 3%;
    position: relative;
    text-align: center;
    display: block;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    margin: 0;
}
#bnr3 dl dt.arrow i{
margin-bottom: -5px;
}

}










/*------------------------------*/

#contents h2.txt_28{
	padding-left:20px;
}
@media (max-width: 768px){
	#contents h2{
		margin-bottom:1%;
	}
	#contents h2.txt_28{
    padding-left: 1% !important;
	}

.recommend-unit{
	width:49%;
	padding:1%;
	margin:0 auto;
}
.seller-unit{
	width:49%;
	padding:1%;
	margin:0 auto;
}


}

/*li.recommend-unit,li.seller-unit{
	max-width:320px;
}*/


body {
  counter-reset: number 0;           /* number のカウンタを 0 にセット */
}

li.top_ranking{
	position: relative;
}
li.top_ranking a.top_ranking_a:before {
    counter-increment: number 1;
    content: counter(number) " ";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    background: #fff;
    padding: 5px 20px 10px 10px;
    border-radius: 0 0 10em;
    font-size: 22px;
	box-shadow: 4px 4px 7px rgba(0,0,0,0.2);
}