@charset "utf-8";
/* ------------------------------
oc top box_arr  sz 10:47 2021/10/14
------------------------------ */


/*
新着情報 #new_arrival
まもなく終了 #soon
福袋 #bag
セール #sale
わけあり #reason
プレミアムチーズ #premium_cheese
セレクト食材 #select_food
調味料・香辛料 #spice
バター・ジャム・スプレッド #spread
スイーツ・菓子 #sweets
お試しセット #trial
ギフト&定番 #giftset
おすすめ特集 #recommend

●チーズ熟成士 #fromager
●ENJOY CHEESE #enjoy_cheese
●プレミアム頒布会 #foodelight
*/


.box_arr_case{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}



	/*陳列部_各商品(box_arr)********/
.box_arr_case .box_arr{
	flex-grow: 1; flex-shrink: 1; flex-basis: auto; align-self: auto;
	position: relative;
	width: 47%;
	margin: 0 1%;
	padding-bottom: 5px;
	line-height: 140%;
}
.box_arr_case .box_arr a{ width: 100%;}
.box_arr_case .box_arr::after{ content:"";clear: both;display: block;/*cf*/}
.box_arr_case .box_arr .item_img_bn,
.box_arr_case .box_arr .item_img{ width: 100%; border-radius: 5px;}
.box_arr_case .box_arr .item_img_bn{ display: none;}
.box_arr_case .box_arr .item_name,
.box_arr_case .box_arr .comment{ padding: 0px 5px;}
.box_arr_case .box_arr .item_name{ font-size: 13px;}
.box_arr_case .box_arr .comment{ font-size: 12px; display: none;}



		/*box_arr.icon item_name*/
.box_arr_case .box_arr[class*="icon"] .item_name::before{
	content: "";
	display: inline-block; margin-right: 3px; padding: 1px 6px; vertical-align: middle;
	font-size: 70%; border-radius: 4px;
}
.box_arr_case .box_arr.icon_sainyuka .item_name::before{ content: "再入荷"; background: #fff100;}
.box_arr_case .box_arr.icon_tougetu .item_name::before{ content: "当月便"; color: #eee; background: #ce850b;}
.box_arr_case .box_arr.icon_yoyaku .item_name::before{ content: "予約便"; color: #eee; background: #4d3d32;}



		/*box_arr appeal*/
.box_arr_case .box_arr .appeal{
	display: none;
	position: absolute; top: 0; left: 0;
	width: 100%; height: 27px;
	margin-top: 64.2%;/*★*/ padding: 5px 2px;
	text-align: center; background: #f2efe7;
}
.box_arr_case .box_arr .appeal.a_red{}
.box_arr_case .box_arr .appeal.a_clearleft{ background: none; color: inherit;}

#soon .box_arr_case .box_arr .appeal.a_black,
#sale .box_arr_case .box_arr .appeal.a_black,
#bag .box_arr_case .box_arr .appeal.a_black,
#reason .box_arr_case .box_arr .appeal.a_black,
#soon .box_arr_case .box_arr .appeal.a_red,
#sale .box_arr_case .box_arr .appeal.a_red,
#bag .box_arr_case .box_arr .appeal.a_red,
#reason .box_arr_case .box_arr .appeal.a_red{ display: block;}
	#soon .box_arr_case .box_arr .item_name,
	#sale .box_arr_case .box_arr .item_name,
	#bag .box_arr_case .box_arr .item_name,
	#reason .box_arr_case .box_arr .item_name{ margin-top: 28px;}
		/*コーナー別帯色指定*/
#soon .box_arr_case .box_arr .appeal.a_red,
#sale .box_arr_case .box_arr .appeal.a_red,
#reason .box_arr_case .box_arr .appeal.a_red{ background: #d31200; color: #fff;}

#reason .box_arr_case .box_arr .appeal.a_black,
#sale .box_arr_case .box_arr .appeal.a_black,
#soon .box_arr_case .box_arr .appeal.a_black{ background: rgba( 255,255,255,0.6); color: #fff;}





		/*box_arr badge*/
.box_arr_case .box_arr .badge{
	display: none;
	position: absolute;
	top: -5px; right: -5px;
	min-width: unset; width: 55px; height: 55px;
	padding: unset; padding-top: 28px;
	color: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 100%;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	background-color: unset;
	background:  url( '../../../../../content_image/parts/cssimg/null.svg' ) center center / 100% auto no-repeat;
	border-radius: unset;
}
/* sp▽ */ @media only screen and (max-width: 768px) {
	.box_arr_case .box_arr .badge{ width: 35px; height: 35px; font-size: 10px; padding-top: 18px;}
}/*△*/

/* PC▽ */ @media only screen and (min-width: 768px) {
	.box_arr_case .box_arr .badge{ width: 44px; height: 44px; font-size: 10px; padding-top: 25px;}
	.box_arr_case.quadruple .box_arr .badge{ width: 36px; height: 36px; font-size: 10px; padding-top: 19px;}

}/*△*/

.box_arr_case .box_arr .badge.b_newprice,
.box_arr_case .box_arr .badge.b_reco,
.box_arr_case .box_arr .badge.b_sale,
.box_arr_case .box_arr .badge.b_new,
.box_arr_case .box_arr .badge.b_soon,
.box_arr_case .box_arr .badge.b_last{ content: "";}

.box_arr_case .box_arr p.badge[class*="b_"]{ display: block;}

		/*box_arr badge icon指定*/
.box_arr_case .box_arr .badge.b_newprice{ background-image: url( '../../../../../content_image/parts/cssimg/badge_newprice.svg' );}
.box_arr_case .box_arr .badge.b_stock{ background-image: url( '../../../../../content_image/parts/cssimg/badge_stock.svg' );}
.box_arr_case .box_arr .badge.b_limited{ background-image: url( '../../../../../content_image/parts/cssimg/badge_limited.svg' );}
.box_arr_case .box_arr .badge.b_reco{ background-image: url( '../../../../../content_image/parts/cssimg/badge_reco.svg' );}
.box_arr_case .box_arr .badge.b_sale{ background-image: url( '../../../../../content_image/parts/cssimg/badge_sale.svg' );}
.box_arr_case .box_arr .badge.b_new{ background-image: url( '../../../../../content_image/parts/cssimg/badge_new.svg' );}
.box_arr_case .box_arr .badge.b_soon{ background-image: url( '../../../../../content_image/parts/cssimg/badge_soon_end.svg' );}
.box_arr_case .box_arr .badge.b_last{ background-image: url( '../../../../../content_image/parts/cssimg/badge_last.svg' );}
.box_arr_case .box_arr .badge.b_haya{ background-image: url( '../../../../../content_image/parts/cssimg/badge_hayawari.png' );}
.box_arr_case .box_arr .badge.b_haya01{ background-image: url( '../../../../../content_image/parts/cssimg/badge_hayawari_01.png' );}
.box_arr_case .box_arr .badge.b_haya02{ background-image: url( '../../../../../content_image/parts/cssimg/badge_hayawari_02.png' );}
.box_arr_case .box_arr .badge.b_haya03{ background-image: url( '../../../../../content_image/parts/cssimg/badge_hayawari_03.png' );}



	/*陳列部_各商品(box_arr)_サイズ別box制御********/
		/* (上段)bn_upper*/
.box_arr_case.bn_upper .box_arr .item_img{ display: none;}
.box_arr_case.bn_upper .box_arr .item_img_bn{
	display: block; margin-bottom: 1px;
}
.box_arr_case.bn_upper .box_arr .appeal{ margin-top: 49.3%;}	/* img2:1 */



/*sp▽*/ @media only screen and (max-width: 768px) {


.box_arr_case .box_arr:nth-child(2n+1):last-child{ margin-right: 51.5% ;}
.box_arr_case.bn_upper .box_arr:nth-child(2n+1):last-child,
.box_arr_case.bn_upper .box_arr{ width: 96%; margin-right: 1% ;}

.box_arr_case .box_arr .item_name{ font-weight: 600;}

}/*△*/


/* PC▽ */ @media only screen and (min-width: 768px) {

	.box_arr_case .box_arr{ width: 31%; margin-bottom: 40px;}
	.box_arr_case.bn_upper .box_arr{ width: 47%;}

	.box_arr_case .box_arr .item_name{ font-size: 16px; padding: 8px 0 5px;}
	.box_arr_case .box_arr .comment{ font-size: 14px;}

	.box_arr_case .box_arr .appeal{ height: 29px; margin-top: 65.5%;}
		#soon .box_arr_case .box_arr .item_name,
		#sale .box_arr_case .box_arr .item_name,
		#bag .box_arr_case .box_arr .item_name,
		#reason .box_arr_case .box_arr .item_name{ margin-top: 30px;}

	.box_arr_case .box_arr .appeal.a_clearleft{ display: block; text-align: left; font-size: 12px;}
	.box_arr_case.bn_upper .box_arr .appeal{ margin-top: 49.7%;}	/* img2:1 */

		/*行端処理*/
	.box_arr_case .box_arr:nth-child(3n+1):last-child{ margin-right: 67.8% ;}
	.box_arr_case .box_arr:nth-child(3n+2):last-child{ margin-right: 34.5% ;}
			/*行端処理_上段*/
	.box_arr_case.bn_upper .box_arr:nth-child(3n+1):last-child,
	.box_arr_case.bn_upper .box_arr:nth-child(3n+2):last-child{ margin-right: unset ;}
	.box_arr_case.bn_upper .box_arr:nth-of-type(2n+1):last-child{ margin-right: 50% ;}


		/*４列配置*/
	.box_arr_case.quadruple .box_arr{ width: 23%;}
	.box_arr_case.quadruple .box_arr .appeal{ margin-top: 51%;}
			/*４列配置_行端処理*/
	.box_arr_case.quadruple .box_arr:nth-child(4n){ margin-right: 0;}
	.box_arr_case.quadruple .box_arr:nth-child(4n+1):last-child{ margin-right: 75% ;}
	.box_arr_case.quadruple .box_arr:nth-child(4n+2):last-child{ margin-right: 50% ;}
	.box_arr_case.quadruple .box_arr:nth-child(4n+3):last-child{ margin-right: 25% ;}


}/*△*/

/************************************
override もっと見る
****************************<')>>><*/



/* PC▽ */ @media only screen and (min-width: 768px) {

	.p-new-arrivals .p-more-content{ display: block !important;}
	.p-new-arrivals .p-more-button{ display: none;}

}/*△*/




/************************************
to_tag_link さらに見る(tag行きリンク)
****************************<')>>><*/

.p-new-arrivals .to_tag_link{
	display: block;
	margin-top: 10px; margin-left: calc( 80% - 7em ); padding: 5px 10px;
	width: calc( 20% + 6em );
	color: #fff; background: #4D3D32; border-radius: 5px;
}

.p-new-arrivals .to_tag_link .text{ text-align: center;}


/* PC▽ */ @media only screen and (min-width: 768px) {
	.p-new-arrivals .p-more-content{ display: block !important;}
	.p-new-arrivals .p-more-button{ display: none;}
}/*△*/



/************************************
ranking ランキング用
****************************<')>>><*/
.ranking_box{ margin: 20px auto 30px; width: 96%;}

	/*ランキング見出し********/
.ranking_box .title{
	padding: 16px 0px;
	font-size: 17px; text-align: center; font-weight: bold;
}
/* PC▽ */ @media only screen and (min-width: 768px) {
	.ranking_box .title{ font-size: 25px; border-bottom: dotted 1px #bcc0b8;}
}/*△*/



	/*box_arr 外枠********/
.ranking_case{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}
/* PC▽ */ @media only screen and (min-width: 768px) {
	.ranking_case{ padding: 60px 0px;}
}/*△*/



	/*ランキング陳列部_各商品(box_arr)********/
.ranking_case .box_arr{
	flex-grow: 1; flex-shrink: 1; flex-basis: auto; align-self: auto;
	position: relative; margin: 0px 1%; padding-bottom: 5px; width: 96%; line-height: 120%;
}

.ranking_case .box_arr::before{
	content: ""; position: absolute; 
	background: url( '../../../../../content_image/parts/cssimg/rank04.svg' ) center 27% / 100% auto no-repeat scroll;
	text-align: center; font-weight: bold;  color: #4d3d32; text-shadow: none;

}
/* sp▽ */ @media only screen and (max-width: 768px) {
	.ranking_case .box_arr::before{
		left: 0.8vw; top: 0vw; 
		padding-top: 12vw; width: 8vw; height: 20vw; font-size: 18px;
	}
}/*△*/
/* PC▽ */ @media only screen and (min-width: 768px) {
	.ranking_case .box_arr::before{
		top: -48px; left: 58%; transform: translateX(-50%);
		width: 80px; height: 80px; font-size: 20px; padding-top: 25px; padding-left: 37px;
		background-size: 40px auto; background-position: left 27%;
	}
}/*△*/

.ranking_case .box_arr:nth-of-type(1):before{ content: "1"; background-image: url( '../../../../../content_image/parts/cssimg/rank01.svg' );}
.ranking_case .box_arr:nth-of-type(2):before{ content: "2"; background-image: url( '../../../../../content_image/parts/cssimg/rank02.svg' );}
.ranking_case .box_arr:nth-of-type(3):before{ content: "3"; background-image: url( '../../../../../content_image/parts/cssimg/rank03.svg' );}
.ranking_case .box_arr:nth-of-type(4):before{ content: "4";}
.ranking_case .box_arr:nth-of-type(5):before{ content: "5";}

/* sp▽ */ @media only screen and (max-width: 768px) {
	.ranking_case .box_arr:not(:last-of-type):after{
		content: "";
		position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 50vw; height: 1vw;
		/*border-bottom: 1px dotted #a99;*/
	}
}/*△*/



/* sp▽ */ @media only screen and (max-width: 768px) {
	.ranking_case .box_arr{
		margin-bottom: 8px; padding-left: 40px;
	}
}/*△*/
/* PC▽ */ @media only screen and (min-width: 768px) {
	.ranking_case .box_arr{ width: 18%;}
}/*△*/
.ranking_case .box_arr a{ width: 100%;}
.ranking_case .box_arr::after{ content:"";clear: both;display: block;/*cf*/}
.ranking_case .box_arr .item_img_bn,
.ranking_case .box_arr .comment,
.ranking_case .box_arr .appeal,
.ranking_case .box_arr .badge{ display: none;}
.ranking_case .box_arr .item_img{ border-radius: 5px;}
.ranking_case .box_arr .item_name{ padding: 0px 5px; font-size: 13px; font-weight: bold;}




/* sp▽ */ @media only screen and (max-width: 768px) {
	.ranking_case .box_arr .item_img{ width: 42%;}
	.ranking_case .box_arr .item_name{
		position: absolute; right: 0vw; top: 50%; transform: translateY(-50%);
		width: 48%; padding: 0px;
	}


}/*△*/
/* PC▽ */ @media only screen and (min-width: 768px) {
	.ranking_case .box_arr .item_img{ width: 100%;}
	.ranking_case .box_arr .item_name{ padding-top: 10px;}

}/*△*/