@charset "UTF-8";
/* for AR FC 202108 sz css 23:56 2021/09/10 */
/*▼▼▼▼▼▼▼▼▼arfc2021.css********************▼▼▼▼▼▼▼▼▼*/

/*************************************************************************/
/*▼システムオーバーライド▼***/
/*************************************************************************/

/*sp*/ body.spView #header{ display: none;}

/*sp*/ body.spView #gnav .mail,
/*sp*/ body.spView #gnav .pagetop{ background-color: #591e72;}

/*PC*/ body:not(.spView) #contents {
	padding: 40px 0 20px;
	background-color: #fffffd;
	background-repeat: repeat-y,repeat;
	background-size: 1100px 50px, 128px auto;
	background-position: center top,center top;
	background-image:
		linear-gradient(to right,rgba(255,255,255 , 0.7) 0%,rgba(255,255,255,0.7) 100%),
		url( /arfc00/img/user_contents_bg.png );
}
/*PC*/ body:not(.spView) .input-more .trg2{ background: #fff;}
/*sp*/ body.spView #contents .form-logo,
/*sp*/ body.spView #contents .form-img{ display: none;}
/*sp*/ body.spView #contents #order-form.form-img{ margin-top: 20px; display: block;}
/*sp*/ body.spView #contents #order-form.form-img img{ margin-bottom: 10px; max-width: 96%;}



/*************************************************************************/
/*▼基礎▼***/
/*************************************************************************/

#user_contents{
	font-size: 62.5%;/*10px=1rem*/ font-size: 14px; line-height: 1.3em;
	background-color: #fffffd;
	background-repeat: repeat-y,repeat;
	background-size: 100vw calc( 100% - 20vw ), 8vw auto;
	background-position: center top,center top;
	background-image:
		linear-gradient(to right,rgba(255,255,255 , 0.7) 0%,rgba(255,255,255,0.7) 100%),
		url( /arfc00/img/user_contents_bg.png );
}

/*PC*/ body:not(.spView) #user_contents{ background-size: 1100px 50px, 128px auto;}


#user_contents *{ box-sizing: border-box;}
#user_contents > section{ position: relative;}


/*▼▼一般div > common *****************************/



	/*セクション種類*/
		/*ファーストビュー*/
#user_contents .type_first_view{}
		/*幅固定_説明的な*/
#user_contents .type_desc{}
#user_contents .type_desc .sec_hd,
#user_contents .type_desc .sec_box{ max-width: 96vw; margin: 0px auto;}
/*PC*/
body:not(.spView) #user_contents .type_desc .sec_hd,
body:not(.spView) #user_contents .type_desc .sec_box{ max-width: 1100px;}

		/*全幅_訴求*/
#user_contents .type_appeal{ width: 100vw; margin: 0 auto;}
#user_contents .type_appeal .sec_hd,
#user_contents .type_appeal .sec_box{}


	/*セクション内部品*/
		/*sec_hd=見出し*/
		/*sec_box=汎用box*/
#user_contents .sec_hd,
#user_contents .sec_box{ margin: 0 auto;}
#user_contents .sec_hd{
	padding: 10px 0px 10px;
	font-size: 6vw; text-align: center; line-height: 1.5em; letter-spacing: -2px;
	background: #EFE2A9;
	background: linear-gradient(to right,rgb(196,172,42) 0%,rgb(225,212,146) 20%,rgb(255,243,194) 50%,rgb(225,212,146) 80%,rgb(196,172,42) 100%);
}
#user_contents .sec_box{ padding-bottom: 30px;}

/*PC*/ body:not(.spView) #user_contents .sec_hd{
	padding: 50px 0px 50px;
	font-size: 50px; text-align: center; line-height: 1.5em;
}

	/*汎用小物*/
#user_contents img.*{ height: auto;}
#user_contents .w_p100{ width: 100%; height: auto;}
#user_contents .w_max_p100{ max-width: 100%; height: auto;}

/*sp*/ body.spView #user_contents .u-show-on-pc,
/*sp*/ body.spView #user_contents .u_show_on_pc{ display: none;}
/*PC*/ body:not(.spView) #user_contents .u-show-on-sp,
/*PC*/ body:not(.spView) #user_contents .u_show_on_sp{ display: none;}


#user_contents .f_small,
#user_contents small{ font-size: 70%;}


#user_contents .note_text{ list-style: none; padding-left: 13px;}
#user_contents .note_text li{ position: relative;}
#user_contents .note_text li::before{ content: "※ "; position: absolute; left: -13px;}

/*PC*/ body:not(.spView) #user_contents .caution_text{ max-width: 1100px; }
/*sp*/ body.spView #user_contents .caution_text ul{ padding-left: 5px;}



/*▼▼ common  flex_root/flex_box 汎用 横並びbox*****************************/


	/*親要素*/
#user_contents .flex_root{
	display: flex;
	flex-flow: row wrap; justify-content: space-around;
	align-items: stretch; align-content: stretch;
}
	/*子要素*/
#user_contents .flex_box{ flex: 1 1 auto; margin: 5px;}
#user_contents .flex_box::after{ content:"";clear: both;display: block;/*cf*/}
#user_contents .flex_root.img_just{ justify-content: stretch;}
#user_contents .img_just > *[class*="flex_col"]{ margin: 0;}

	/*sp*/
body.spView #user_contents .flex_col_2_1,
body.spView #user_contents .flex_col_3_1,
body.spView #user_contents .flex_col_4_1
body.spView #user_contents .flex_col_5_1{ width: 96%;}
body.spView #user_contents .flex_col_2_2,
body.spView #user_contents .flex_col_3_2,
body.spView #user_contents .flex_col_4_2{ width: calc( 50% - 11px );}
body.spView #user_contents .flex_col_3_3,
body.spView #user_contents .flex_col_4_3{ width: calc( 33% - 11px );}
body.spView #user_contents .flex_col_4_4,
body.spView #user_contents .flex_col_5_4{ width: calc( 25% - 11px );}

	/*PC*/
body:not(.spView) #user_contents .flex_col_1_1{ width: 96%;}
body:not(.spView) #user_contents .flex_col_2_1,
body:not(.spView) #user_contents .flex_col_2_2{ width: calc( 50% - 11px );}
body:not(.spView) #user_contents .flex_col_3_3,
body:not(.spView) #user_contents .flex_col_3_2,
body:not(.spView) #user_contents .flex_col_3_1{ width: calc( 33% - 11px );}
body:not(.spView) #user_contents .flex_col_4_4,
body:not(.spView) #user_contents .flex_col_4_3,
body:not(.spView) #user_contents .flex_col_4_2,
body:not(.spView) #user_contents .flex_col_4_1{ width: calc( 25% - 11px );}
body:not(.spView) #user_contents .flex_col_5_4,
body:not(.spView) #user_contents .flex_col_5_1{ width: calc( 20% - 11px );}



/*▼▼ common  accordion-box(途中まで見える)*****************************/

#user_contents .aco_box{ position: relative;}
#user_contents .aco_box label{
	position: absolute; bottom: -3px; z-index:50;
	width: 100%; height: 22vw;/*←♪*/
	cursor: pointer;text-align: center;font-size: 15px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 1) 80%);
}

	/* to open */
#user_contents .aco_box input:checked + label{ background: inherit;}
#user_contents .aco_box input:checked + label:after,
#user_contents .aco_box label:after{
	width: 50%; border-radius: 20px; line-height: 40px; color: #eee; background: #591e72;
}
#user_contents .aco_box label:after{
	content: "続きを読む　＋";
	position: absolute; z-index:100; bottom: 15px; left: 50%; transform: translate(-50%, 0);
}
#user_contents .aco_box input{display: none;}
#user_contents .aco_box .aco_inner{ overflow: hidden; height: 30vw;/*←♪*/ }

	/* to close */
#user_contents .aco_box input:checked + label{}
#user_contents .aco_box input:checked + label:after{ content: "閉じる ×";}
#user_contents .aco_box input:checked ~ .aco_inner{ height: auto !important; padding-bottom: 80px;}

	
/*PC*//*PCでは開閉しないとき*/
body:not(.spView) #user_contents .aco_box input,
body:not(.spView) #user_contents .aco_box label{ display: none;}
body:not(.spView) #user_contents .aco_box .aco_inner{ height: auto;}


/*▼▼ common  小物部品*****************************/




/*▼▼common > ★フォント指定まとめ★*****************************/

/*CJKレギュラー*/
#user_contents{ font-family: "NSCJKjp-Regular";}


/*▼(明朝)NS CJKセミボールド 太字*/
#user_contents .semi_bold,
#user_contents .esinfo,
#user_contents .sec_hd,
#user_contents h2,
#user_contents h3,
#user_contents h4,
#user_contents #faq .question{ font-family: "NSCJKjp-SemiBold";}



/*************************************************************************/
/*▼デザイン本体▼***/
/*************************************************************************/


/*▼▼メインイメージ/ファーストビュー*********************/

#user_contents #main{
	height: 90vw;
	background: url( /arfc00/img/sp_main_bg.jpg ) 50% calc( 0% + 20px ) / 100% auto no-repeat;
}


/*PC*/body:not(.spView) #user_contents #main{
	background-image:  url( /arfc00/img/main_bg.jpg ) ;
	height: 62vw;
	max-height: 837px;
	background-size: 100% auto;
	background-position: center calc( 0% + 40px );
	/*15:57 2021/08/31*/
}


	/*▼冒頭メッセージ*/
#user_contents #main .esinfo{
	padding: 7px 0px; width: 100%;
	text-align: center; font-size: 14px; color: #1E1316;
	background: #DACB78 linear-gradient(to bottom,rgb(225,212,146) 0%,rgb(255,243,194) 36%,rgb(196,172,42) 80%,rgb(195,171,39) 98%,rgb(225,212,146) 100%);

}
/*PC*/body:not(.spView) #user_contents #main .esinfo{ padding: 15px 0px; font-size: 22px;}


	/*▼メインタイトル*/
#user_contents #main .title{
	position: absolute;
	top: 50px; left: 1%; width:50%; max-width: 600px;
}
/*sp*/body.spView #user_contents #main .title{
	display: none;
}

/*PC*/body:not(.spView) #user_contents #main .title{
	top: 80px; left: calc( ( 100vw - 1100px ) / 2 - 50px );
	width: 36vw;
}



/*▲▲メインイメージ/ファーストビュー*********************/
/* ▼メディアクエリ(▼▼メインイメージ/ファーストビュー)***/


/* PC1.3k▽A *************/ @media ( max-width: 1099px ) {
	/*PC*/body:not(.spView) #user_contents #main .title{ top: 40px; left: calc( ( 100vw - 1100px ) / 2 - -35% ); width: 33vw;}

}/*△*/


/* PC1.3k▽B *************/ @media ( min-width: 1100px ) and  ( max-width: 1300px ) {
	/*PC*/body:not(.spView) #user_contents #main .title{ top: 38px; left: calc( ( 100vw - 1100px ) / 2 - -22% ); width: 29vw;}

}/*△*/

/* PC1.53k-▽C *************/ @media ( min-width: 1301px ) and ( max-width: 1600px ) {
	/*PC*/body:not(.spView) #user_contents #main{ background-size: 120% auto;}
	/*PC*/body:not(.spView) #user_contents #main .title{ top: 42px; left: calc( ( 100vw - 1100px ) / 2 - -170px ); width: 34vw;}
}/*△*/

/* PC1.92k-▽ *D************/ @media ( min-width: 1601px ) and  ( max-width: 2300px ) {
	/*PC*/body:not(.spView) #user_contents #main{ min-height: 955px; height: 72vw;}
	/*PC*/body:not(.spView) #user_contents #main .title{ top: 48px; left: calc( ( 100vw - 1100px ) / 2 - -170px ); width: 520px;}

}/*△*/
/* PC2.56k-▽ **E***********/ @media ( min-width: 2301px ) and  ( max-width: 3200px ) {
	/*PC*/body:not(.spView) #user_contents #main{ max-height: unset; height: 43vw; background-size: 80%;}
	/*PC*/body:not(.spView) #user_contents #main .title{ top: 40px; left: calc( ( 100vw - 1100px ) / 2 - -120px );}

}/*△*/
/* PC3.2k-▽ **F***********/ @media ( min-width: 3201px ) {
	/*PC*/body:not(.spView) #user_contents #main{ max-height: 1047px; height: 45vw; background-size: 80%; background-position: center calc( 0% + 50px );}

}/*△*/


/* ▲メディアクエリ**/

/*▼▼申し込みバナー*********************/

#user_contents .entry_bnr{ position: relative; margin-top: -2vw;}
/*PC*/body:not(.spView) #user_contents .entry_bnr{ margin-top: -15px;}

/*▲▲申し込みバナー*********************/

/*▼▼おすすめポイント*********************/

#user_contents #benefit{}
#user_contents #benefit .conductor{}

#user_contents #benefit .conductor .sec_hd{ position: relative;}
#user_contents #benefit .conductor .sec_hd .inner{ position: relative; z-index: 100;}
#user_contents #benefit .conductor .sec_hd::before,
#user_contents #benefit .conductor .sec_hd::after{
	content: "";
	position: absolute; z-index: 1; bottom: 11vw;
	display: block; width: 100%; height: 3em;
	opacity: 0.7;
	background: url( /arfc00/img/ornament_leaf_olive02_left.svg ) left bottom / auto 100% no-repeat;
	transform: rotate( -12deg );
}
#user_contents #benefit .conductor .sec_hd::after{ transform: scaleX(-1) rotate( -12deg );}

/*PC*/body:not(.spView) #user_contents #benefit .conductor .sec_hd::before,
/*PC*/body:not(.spView) #user_contents #benefit .conductor .sec_hd::after{ height: 4em; bottom: 140px; background-position: 50px bottom;}



#user_contents #benefit .hospitality{}

	/*common*/
#user_contents .reason_box{
	position:relative; margin: 10px auto 40px; padding: 0px 10px;
}
/*PC*/body:not(.spView) #user_contents .reason_box{ margin: 50px auto; padding: 0px 20px;}


#user_contents .reason_box .desc_box{
	margin-bottom: 10px;
	line-height: 1.4em;
}
/*PC*/body:not(.spView) #user_contents .reason_box .desc_box{ margin-bottom: 40px;}


#user_contents .reason_box .desc_box::after{ content:"";clear: both;display: block;}

#user_contents .reason_box .graph,
#user_contents .reason_box .photo_main{
	position: relative;
	margin: 0px auto;
}
/*PC*/body:not(.spView) #user_contents .reason_box .graph,
/*PC*/body:not(.spView) #user_contents .reason_box .photo_main{ margin-right: 30px; float: left;}

#user_contents .reason_box .photo_main{ width: 60%;}
#user_contents .reason_box .graph{ width: 40%;}
/*PC*/body:not(.spView) #user_contents .reason_box .photo_main{ width: 25%; margin-bottom: 10px;}
/*PC*/body:not(.spView) #user_contents .conductor .reason_box .photo_main{ margin-bottom: 60px;}

#user_contents .reason_box .photo_main .badge_box{
	position: absolute; bottom: 5px; right: 5px;
	width: 100%; height: 30px; text-align: right;
}
/*PC*/body:not(.spView) #user_contents .reason_box .photo_main .badge_box{ height: 60px;}

#user_contents .reason_box .photo_main .badge_box .badge{
	margin-left: -2px; height: 100%;
}

#user_contents .reason_box .catch,
#user_contents .reason_box .title{ letter-spacing: -1px;}
#user_contents .reason_box .catch{
	margin-bottom: 15px; padding-top: 0px; 
	color: #670b0d; font-size: 16px; line-height: 1.4em;
}
/*sp*/body.spView #user_contents .reason_box .catch{ text-align: center;}
/*PC*/body:not(.spView) #user_contents .reason_box .catch{ font-size: 24px;}

#user_contents .reason_box .title{ font-size: 20px; line-height: 1.3em;}
/*PC*/body:not(.spView) #user_contents .reason_box .title{ font-size: 30px;}

#user_contents .reason_box .title{ margin: 10px 0px;}
#user_contents .reason_about .title{ margin: 40px auto; padding: 0px 5px; text-align: center;}

#user_contents .reason_about .title .inner{
	display: inline-block; padding: 15px;
	line-height: 1.3em; color: #fff; background: #960000; border-radius: 80px;
}
/*PC*/body:not(.spView) #user_contents .reason_about .title .inner{ line-height: 41px;}


#user_contents .reason_box .text{ margin-bottom: 10px;}
#user_contents .reason_box .name,
#user_contents .reason_box .profession{ padding-left: 50%;}
#user_contents .reason_box .profession{ font-size: 70%;}

/*PC*/body:not(.spView) #user_contents .reason_box .name,
/*PC*/body:not(.spView) #user_contents .reason_box .profession{ padding-left: 75%;}



	/* customize/override */
		/* photo_right */
/*PC*/body:not(.spView) #user_contents .reason_box.photo_right .photo_main{ margin-right: unset; margin-left: 10px; float: right;}
/*PC*/body:not(.spView) #user_contents .reason_box.photo_right .photo_main{ margin-left: 30px; }

		/* title_right */
/*PC*/body:not(.spView) #user_contents .reason_box.title_right .title,
/*PC*/body:not(.spView) #user_contents .reason_box.title_right .profession{ text-align: right;}


		/* deco */


/*▲▲おすすめポイント*********************/
/*▼▼商品ラインアップ*********************/
	/*枠*/
#user_contents #item{}
/*so*/body.spView #user_contents #item.sec_box{ padding-bottom: unset;}

#user_contents #item .show_case{ margin-top: 30px;}


/*PC*/body:not(.spView) #user_contents #item .show_case{ margin-top: 40px;}

#user_contents #item .show_case .month{
	background:
		url( /arfc00/img/ornament_corner02_gold_rt.svg ) right top / 6em auto no-repeat,
		url( /arfc00/img/ornament_corner02_gold_lb.svg ) left bottom / 6em auto no-repeat;
}
/*PC*/body:not(.spView) #user_contents #item .show_case .month{
	margin-bottom: 80px;
	background-size: 10em auto,10em auto;
	background-position: 95% top, 5% bottom;
}
/*so*/body.spView #user_contents #item .show_case .month:nth-of-type(n+2){ margin-top: 30px;}

#user_contents #item .show_case .month .detail{ position: relative;}
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail{ width: calc( 100% - 100px ); margin: 0px auto 50px;}

	/*基本部品*/
#user_contents #item .show_case .month .detail .month_number{ position: absolute; top: -10px; left: 0px; z-index: 1000; width: 20%;}
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .month_number{ width: 13%;}

#user_contents #item .show_case .month .detail .month_photo{}

#user_contents #item .show_case .month .detail .item_catch{
	position: absolute; left: 0%; top: 48vw;
	padding: 5px 2%; width: 40vw;
	font-size: 4vw; font-family: 'NSCJKjp-SemiBold'; text-align: center;
	border-radius: 10vw;
	background: rgba( 255,255,255,0.4);
	background: radial-gradient(closest-side ellipse at center center, #FFF, rgba(255,255,255,0));
}
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_catch{
	top: 580px; padding: 10px 5px; width: 80%; font-size: 30px;
}

	/*説明文*/
#user_contents #item .show_case .month .detail .item_desc{ padding: 10px;}
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_desc{ font-size: 26px; line-height: 1.5em;}
#user_contents #item .show_case .month .detail .item_desc .item_name{ font-size: 120%; font-weight: bold;}
/*sp*/body.spView #user_contents #item .show_case .month .detail .item_desc .item_note{ font-size: 70%;}
#user_contents #item .show_case .month .detail .item_desc .text{}
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_desc .item_name{ font-size: 140%;}


		/*説明文-ワイン*/
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_desc_bottle_wrapper{ margin-bottom: 40px; height: 500px;}

#user_contents #item .show_case .month .detail .item_desc.bottle{ position: relative;}
/*sp*/body.spView #user_contents #item .show_case .month .detail .item_desc.bottle{ padding-top: 9vw; padding-left: 30vw; min-height: 57vw;}
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_desc.bottle{ padding-left: 37%; padding-top: 110px;}

#user_contents #item .show_case .month .detail .item_desc.bottle .bottle_photo{ position: absolute;}
/*sp*/body.spView #user_contents #item .show_case .month .detail .item_desc.bottle .bottle_photo{ left: 7vw; top: 11vw; width: 20vw;}
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_desc.bottle .bottle_photo{ left: 70px; top: 43px; height: 450px;}
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_desc.bottle .item_name{ margin-bottom: 20px;}

#user_contents #item .show_case .month .detail .item_desc.bottle .item_note{ margin-bottom: 0.8em;}


		/*説明文-食べ物*/
#user_contents #item .show_case .month .detail .item_desc.food{}
#user_contents #item .show_case .month .detail .item_desc.food .food_box img[class^="food"]{ max-width: 100%;}

#user_contents #item .show_case .month .detail .item_desc.food .food_box{ position: relative; margin-bottom: 20px;}
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_desc.food .food_box{ margin-bottom: 60px; }


/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_desc.food .food_box .food_photo{ display: block; margin: 0px auto 20px;}

/*sp*/body.spView #user_contents #item .show_case .month .detail .item_desc.food .food_box .food_cooking{ display: none;}

#user_contents #item .show_case .month .detail .item_desc.food .food_box .item_name{
	margin: 5px 0px 10px; text-align: center; letter-spacing: -1px; line-height: 1.4em;
}
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_desc.food .food_box .item_name{ margin: 20px 0px 30px;}

#user_contents #item .show_case .month .detail .item_desc.food .food_box .item_note{
	position: absolute; left: 0px; top: 0px; padding: 3px 0.5em; width: 7em;
	font-family: 'NSCJKjp-SemiBold'; text-align: center;
	background: #C7B135;
	background: linear-gradient(to bottom,rgb(218,204,116) 0%,rgb(240,237,192) 40%,rgb(194,170,36) 100%);
}
/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_desc.food .food_box .item_note{ left: 0%;}

/*PC*/body:not(.spView) #user_contents #item .show_case .month .detail .item_desc.food .food_box .text{ padding-left: 70px; letter-spacing: -1px;}


/*▲▲商品ラインアップ*********************/


/*▼▼各月のお届け内容*********************/
#user_contents #delivery_contents{}

	/*▼見出し*/
#user_contents #delivery_contents .sec_hd{}



	/*▼ボックス*/
#user_contents #delivery_contents .sec_box{ padding-top: 20px;}
#user_contents #delivery_contents .delivery_box{
	position: relative; padding: 5vw 0px; line-height: 1.3em;
}
/*PC*/body:not(.spView) #user_contents #delivery_contents .delivery_box{ padding: 80px 0px; font-size: 18px;}
	/*▽月*/
#user_contents #delivery_contents .delivery_box .month_number{
	position: absolute; top: -9px; width: 20%;
}
/*PC*/body:not(.spView) #user_contents #delivery_contents .delivery_box .month_number{ width: 13%;}

	/*▽イラスト*/
#user_contents #delivery_contents .delivery_box .illust{}

#user_contents #delivery_contents .delivery_box .illust .item,
#user_contents #delivery_contents .delivery_box .illust .plus{ margin: 0px 5px;}
#user_contents #delivery_contents .delivery_box .illust .item{}
/*sp*/body.spView #user_contents #delivery_contents .delivery_box .illust .item{ width: 100%; padding: 2vw 12vw;}

/*PC*/body:not(.spView) #user_contents #delivery_contents .delivery_box .illust .item{ text-align: center;}

#user_contents #delivery_contents .delivery_box .illust .plus{ position: relative; text-align: center;}
#user_contents #delivery_contents .delivery_box .illust .plus img{ width: 10%;}

/*PC*/body:not(.spView) #user_contents #delivery_contents .delivery_box .illust .plus img{
	position: absolute; top: 60%; left: 50%; transform: translate(-50%,-80%); width: 160%;
}
#user_contents #delivery_contents .delivery_box .illust .item .icon{
	display: inline-block; vertical-align: middle; max-width: 100%;  height: auto; width: auto;
}
/*sp*/body.spView #user_contents #delivery_contents .delivery_box .illust .item.food .icon{}
/*sp*/body.spView #user_contents #delivery_contents .delivery_box .illust .item.wine .icon{ width: 40%; height: auto;}
/*sp*/body.spView #user_contents #delivery_contents .delivery_box .illust .item.instructions .icon{ width: 30%; height: auto;}
/*PC*/body:not(.spView) #user_contents #delivery_contents .delivery_box .illust .item .icon{
	height: 205px; width: auto;
}

#user_contents #delivery_contents .delivery_box .illust .item .text{ padding: 5px 0px;}
/*sp*/body.spView #user_contents #delivery_contents .delivery_box .illust .item .text{ display: inline-block;}



		/*▽説明文*/
#user_contents #delivery_contents .delivery_box .desc{
	margin: 3vw 5%; padding: 3vw;
	font-size: 5vw; line-height: 1.3em; text-align: center; font-weight: bold;
	background: #fff8df;
}

/*PC*/body:not(.spView) #user_contents #delivery_contents .delivery_box .desc{
	margin: 40px 10%; padding: 50px 30px; font-size: 30px; 
	background: url( /arfc00/img/delivery_contents_desc_present.svg ) center center / cover no-repeat;
}



/*▼▼お届け状態/召し上がり方*********************/
#user_contents #howto{}
#user_contents #howto .comment{ margin-top: 20px;}

#user_contents #howto .howto_box{ margin-top: 20px;}
#user_contents #howto .howto_box > *{ position: relative;}

#user_contents #howto .howto_box .title{ z-index: 100; text-align: center; color: #5c3b02;}
/*sp*/body.spView #user_contents #howto .howto_box .title{ margin-bottom: -1em;}
/*PC*/body:not(.spView) #user_contents #howto .howto_box .title{ margin-top: 20px; font-size: 36px; line-height: 1.5em;}

#user_contents #howto .howto_box .title::before,
#user_contents #howto .howto_box .title::after{ content: "－"; display: inline; color: #D4C460; opacity: 0.9;}

#user_contents #howto .howto_box .item{}
#user_contents #howto .howto_box .finish{}
#user_contents #howto .howto_box .finish .name{
	position: relative; z-index: 100; margin-top: -2.5em; padding: 0.8em 0px;
	text-align: center; background: rgba(255,255,255,0.5);
}
/*PC*/body:not(.spView) #user_contents #howto .howto_box .finish .name{ font-size: 24px; line-height: 1.5em; letter-spacing: -1px;}
#user_contents #howto .howto_box .procedure{ counter-reset: procedure_number;}
#user_contents #howto .howto_box .procedure .step{ position: relative;}
#user_contents #howto .howto_box .procedure .step::before{
	content: counter( procedure_number ); /*★計数値をここで表示*/
	counter-increment: procedure_number; /*★計数値を１つ進める*/
	position: absolute; top: 2px; left: 2px;
	display: block; width: 1.3em; height: 1.3em; line-height: 1.4em;
	text-align: center; font-size: 16px; color: #222; border-radius: 50%;
	background: #DACB78 linear-gradient(to right bottom,rgb(225,212,146) 0%,rgb(255,243,194) 36%,rgb(196,172,42) 80%,rgb(195,171,39) 98%,rgb(225,212,146) 100%);
}
/*sp*/body.spView #user_contents #howto .howto_box .procedure .step .text{ font-size: 12px;}


/*sp*/body.spView #user_contents #howto .note_text{ margin-left: calc( 100% - 270px );}
/*PC*/body:not(.spView) #user_contents #howto .note_text{ margin-top: 20px; margin-left: calc( 100% - 690px ); font-size: 20px;}


/*▲▲お届け状態/召し上がり方*********************/



/*▼▼よくあるご質問*********************/
#user_contents #faq{ position: relative; padding: 0px;}
/*PC*/body:not(.spView) #user_contents #faq{ padding-top: 50px;}

	/*▼見出し*/
#user_contents #faq .sec_hd{}
	/*▼ボックス*/
#user_contents #faq .faq_box{ margin: 0px auto;}
/*PC*/body:not(.spView) #user_contents #faq .faq_box{ width: 90%; padding: 10px 30px;}



		/*▽質問*/
		/*▽回答*/
#user_contents #faq .faq_box .question,
#user_contents #faq .faq_box .answer{
	position: relative;
	margin-bottom: 5px; padding: 2vw 2vw 0vw 14vw;
	text-align: left; line-height: 1.5em;
}
#user_contents #faq .faq_box .question{
	padding-left: 12vw; padding-top: 17px; min-height: 6vw;
	color: #7d5709; font-size: 4vw;
}
#user_contents #faq .faq_box .answer{
	min-height: 100px; font-size: 3.5vw;
}
#user_contents #faq .faq_box .question::before,
#user_contents #faq .faq_box .answer::before{
	position: absolute; top: 5.5vw; display: block; font-size: 9vw;
}
#user_contents #faq .faq_box .question::before{ content:"Q"; left: 4vw;}
#user_contents #faq .faq_box .answer::before{ content:"A";left: 4vw; color: #d5b064;}
/*PC*/
body:not(.spView) #user_contents #faq .faq_box .question,
body:not(.spView) #user_contents #faq .faq_box .answer{ padding: 5px 20px 15px 110px;}
body:not(.spView) #user_contents #faq .faq_box .question{ min-height: 75px; padding-left: 100px; padding-top: 17px; font-size: 28px;}
body:not(.spView) #user_contents #faq .faq_box .answer{ font-size: 20px;}
body:not(.spView) #user_contents #faq .faq_box .question::before,
body:not(.spView) #user_contents #faq .faq_box .answer::before{ top: 26px; font-size: 60px;}
body:not(.spView) #user_contents #faq .faq_box .question::before{ left: 22px;}
body:not(.spView) #user_contents #faq .faq_box .answer::before{ left: 25px;}

/*▲▲よくあるご質問*********************/



/*▼▼代表メッセージ*********************/
#user_contents #message{}

	/*▼見出し*/
#user_contents #message .sec_hd{ background: #fff;}

#user_contents #message .sec_box{ margin-top: 20px;}
/*PC*/body:not(.spView) #user_contents #message .sec_box{ padding: 0px 110px 80px;}
/*PC*/body:not(.spView) #user_contents #message .sec_box::after{ content:"";clear: both;display: block;}

#user_contents #message .photo{ margin-right: 10px; width: 40%; float: left; }
/*PC*/body:not(.spView) #user_contents #message .photo{ width: 30%;}

#user_contents #message .title{ line-height: 1.6em; text-align: center;}
/*sp*/body.spView #user_contents #message .title{ padding-top: 9vw;}
/*sp*/body.spView #user_contents #message .title::after{ content:"";clear: both;display: block;}
/*PC*/body:not(.spView) #user_contents #message .title{ font-size: 140%;}

/*PC*/body:not(.spView) #user_contents #message .text_box{ margin-top: 1em; padding: 0px 1.5em 0px 32%;}
#user_contents #message .text_box .text{ padding: 0.5em 1em;}
#user_contents #message .text_box .profession,
#user_contents #message .text_box .name{ text-align: right; padding-right: 0.8em;}
#user_contents #message .text_box .profession{ margin-top: 1em;}

/*▲▲代表メッセージ*********************/








/*************************************************************************/
/*▼webフォント読込▼***/
/*************************************************************************/


/*NSCJK やや太 SemiBold*/
@font-face {
	font-family: 'NSCJKjp-SemiBold';
	src: url( '/comfont/NotoSerifCJKjpSub-SemiBold.woff2' ) format('woff2'),
	     url( '/comfont/NotoSerifCJKjpSub-SemiBold.woff' )  format('woff');
}

/*NSCJK 標準 Regular*/
@font-face {
	font-family: 'NSCJKjp-Regular';
	src: url('/comfont/NotoSerifCJKjpSub-Regular.woff2') format('woff2'),
	     url('/comfont/NotoSerifCJKjpSub-Regular.woff')  format('woff');
}



/*************************************************************************/