@charset "UTF-8";
/* for FD CF (basefont16px) 202405 sz css */
/*▼▼▼▼▼▼▼▼▼cf00.css********************▼▼▼▼▼▼▼▼▼*/


/*************************************************************************/
/*▼システムオーバーライド(配色+特設)▼***/
/*************************************************************************/


/*特設 form-title調整*/
/*PC*/ body:not(.spView) #order .form-img{ margin: 0px auto 30px;}
/*PC*/ body:not(.spView) #order .form-img img{ width: 100%;}


/*sp*/ body.spView #header{ display: none;}
/*sp*/ body.spView #footer #foot_info{
	color: #1B1610; background:#E0D491;
	background: linear-gradient(to top,rgb(194,170,36) 0%,rgb(217,203,120) 38%,rgb(252,251,246) 62%,rgb(224,212,146) 100%);
}

/*sp*/ body.spView #footer #foot_info .info_tel .area-txt{ color: #fcfcfc; font-family: "NSCJKjp-Regular";}
/*sp*/ body.spView #gnav .tel,
/*sp*/ body.spView #gnav .mail{ color: #fff; border-right: 1px solid #e5c36b; background: #080606;}
/*sp*/ body.spView #gnav .mail{ background: #000; border-color: #D7AF3F;}
/*sp*/ body.spView #gnav .mail .label{ background: url(/comimg/plugin/ico_order_form.png) center left / 1.8rem auto no-repeat;}
/*sp*/ body.spView #gnav .pagetop{ background: #210d01 url(/comimg/plugin/ico_delta_pagetop.png) center center / 2rem auto no-repeat;}
/*sp*/ body.spView #contents{ padding-bottom: 20px;}
/*sp*/ body.spView #contents > .form-logo{display: none;}
/*sp*/ body.spView #contents > .form-img{ position: relative; z-index: 1000;}
/*sp*/ body.spView .order-submit button{ background: url(/comimg/ico_delta_left_white.png) no-repeat #3f861c; background-size: 5px auto; background-position: left 17px center;}

/*PC*/ body:not(.spView) #footer .copy .copy_nav a,
/*PC*/ body:not(.spView) #footer .copy address{}
/*PC*/ body:not(.spView) #footer #foot_info .company .logo{ filter: invert(1);}
/*PC*/ body:not(.spView) #footer #foot_info .info_tel{ border-color: #000;}
/*PC*/ body:not(.spView) #footer #foot_info{ color: #000; 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%);}
/*PC*/ body:not(.spView) #footer #foot_info .lead,
/*PC*/ body:not(.spView) #footer #foot_info .info_tel .area-txt{ color: #000; font-family: "NSCJKjp-Regular";}

/*PC*/ body:not(.spView) #header .orderNav .orderNav_link a{ background-color: #E00000;}
/*PC*/ body:not(.spView) #contents .order-submit button{ background: url(/comimg/ico_delta_left_white.png) no-repeat #38210B !important; background-position: left 27px center !important;}
/*PC*/ body:not(.spView) #footer,
/*PC*/ body:not(.spView) #contents{ padding-bottom: 20px;}
/*PC*/ body:not(.spView) #contents .order > .inner{ margin-top: unset; padding-top: 35px; background: rgba( 255,255,255,1.0);}

/*▼jquery.bxslider.css スライダー周り(配色/微調整限定!)************************/
/*sp*/body.spView #user_contents #item .bx-wrapper{}
/*sp*/body.spView #user_contents #item .bx-wrapper .bx-pager.bx-default-pager a{ background: #c7bbb5;}
/*sp*/body.spView #user_contents #item .bx-wrapper .bx-pager.bx-default-pager a:hover,
/*sp*/body.spView #user_contents #item .bx-wrapper .bx-pager.bx-default-pager a.active,
/*sp*/body.spView #user_contents #item .bx-wrapper .bx-pager.bx-default-pager a:focus{ background: #5f4433;}
/*sp*/body.spView #user_contents #item .bx-wrapper .bx-controls-direction a{ top: 51%;}



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





/*▼▼#user_contents *****************************/

#contents,
#user_contents{
	background-color: #080606;
}
/*sp*/body.spView #contents{ background: #fff;}
/*sp*/body.spView #user_contents{
	background:
		linear-gradient(to right,rgba(255,255,255 , 0.9) 0%,rgba(255,255,255,0.9) 100%) center top / 100vw calc( 100% - 20vw )/*★*/ repeat-y, 
		#080606 url(/cf00/img/parts/contents_bg.svg) left top / 10vw 10vw repeat;
}

/*PC*/ body:not(.spView) #contents,
/*PC*/ body:not(.spView) #user_contents{
	padding-bottom: 0px;
	background:
		linear-gradient(to right,rgba(255,255,255 , 0.9) 0%,rgba(255,255,255,0.9) 100%) center top / 1100px 50px repeat-y,
		#000 url(/cf00/img/parts/contents_bg.svg) left top repeat;
}

/*淡色背景色*/
#user_contents #faq,
#user_contents #voice{ background:#fdfdfd;}



/*PC*/ body:not(.spView) #contents,
/*PC*/ body:not(.spView) #user_contents{
	background-position: center top , center top;
	background-size: 1100px 50px, 200px 200px;
}
/*PC*/ body:not(.spView) #contents{ position: relative; padding-bottom: 100px;}
/*PC*/ body:not(.spView) #contents:after{
	content: "";
	position: absolute; bottom: 0px; left: 50%; transform: translateX( -50% );
	width: 1100px; height: 101px;
	background: #080606 url(/cf00/img/parts/contents_bg.svg) left top / 200px 200px repeat;
}




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

	/*配色,調整のみ*/
#user_contents .aco_box label{
	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%);
}
#user_contents .aco_box input:checked + label:after,
#user_contents .aco_box label:after{ color: #fff; background: #1F0F0A;}

	/*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  aco_menu(チェックボックスアコーディオン)*****************************/
	/*PCで使わないとき*/
body:not(.spView) #user_contents .aco_menu .aco_contents{ font-size: unset;}
body:not(.spView) #user_contents .aco_menu input[type="checkbox"].aco_on_off + .aco_label + .aco_contents{ max-height: unset; overflow: unset;}
body:not(.spView) #user_contents input[type="checkbox"].aco_on_off + .aco_label + .aco_contents::before,
body:not(.spView) #user_contents input[type="checkbox"].aco_on_off:checked + .aco_contents::before{ content: unset;}



/*▼▼ common  ************************************************************************/

#user_contents ul,
#user_contents p,
#user_contents figure{
	margin: unset; margin-block: unset; margin-inline: unset;
	padding: unset;
	list-style-type: none;
}

#user_contents .sec_hd{ color: #D8C39A; font-family: "NSCJKjp-Bold";}
#user_contents .sec_hd .lss{ letter-spacing: -3px;}

#user_contents .svgimg{ width: 100%; height: auto;}
#user_contents .smaller{ font-size: 80%;}

#user_contents .price_note_text{
	padding: 5px 0;
	font-size: 9px; line-height: 1em;
}
/*PC*/body:not(.spView) #user_contents  .price_note_text{
	padding: 10px 0 5px; font-size: 13px;
}
#user_contents .price_note_text .tax{ font-size: 80%;}

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




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

#user_contents #main{
	position: relative;
	background: #080606;

}
/*sp*/body.spView #user_contents #main{
	width: 100%; height: 140vw;
}
/*PC*/body:not(.spView) #user_contents #main{
	height: 1450px;
}

	/*特別なご案内*/
#user_contents #main .esinfo{
	position: absolute; z-index: 100; top: 0px; left: 0px;
	padding: 7px 0px; width: 100%; text-align: center; 
	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{ font-size: 22px;}



	/*メイン内側*/
#user_contents #main .inner{
	position: relative; top: 34px;
	margin: 0px auto; padding: 0px;
	width: 100%; height: calc( 100% - 35px );
}
/*sp*/body.spView #user_contents #main .inner{
	background:
		url( /cf00/img/main/sp_main_bg.jpg) center 0px / 100% auto no-repeat,
		linear-gradient(to top,#080606 0%,#080606 100%);
}
/*PC*/body:not(.spView) #user_contents #main .inner{
	width: 1100px; height: calc( 100% - 35px );
	background:
		url( /cf00/img/main/main_bg.jpg) center 0px / 1100px auto no-repeat,
		linear-gradient(to top,#000 0%,#000 100%);
}


	/*メインタイトル*/
#user_contents #main .main_title{
	position: absolute; z-index: 100;
}
/*sp*/body.spView #user_contents #main .main_title{
	top: 5px; left: 5px; width: 60%;
}
/*PC*/body:not(.spView) #user_contents #main .main_title{
	width: 690px;
}
	/*アピール*/
#user_contents #main .appeal{
	position: absolute; z-index: 10;
}
/*sp*/body.spView #user_contents #main .appeal{
	width: 37%; top: 10px; right: 5px;
}
/*PC*/body:not(.spView) #user_contents #main .appeal{
	/*width: 350px; left: 20px; top: 290px;*/
	width: 390px; right: 10px; top: 38px;
}

	/*OFF*/
#user_contents #main .price_off{
	position: absolute; z-index: 1000;
}
/*sp*/body.spView #user_contents #main .price_off{
	top: 27vw; left: 5px; width: 25%;
}
/*PC*/body:not(.spView) #user_contents #main .price_off{
	top: 284px; left: 10px; width: 250px;
}



	/*プレゼント*/
#user_contents #main .present img,
#user_contents #main .provider img{ vertical-align: bottom;}

#user_contents #main .present{
	position: absolute; z-index: 1000;
}
/*sp*/body.spView #user_contents #main .present{
	width: 50%; bottom: 0px; right: 0px;
}
/*PC*/body:not(.spView) #user_contents #main .present{
	width: 537px; bottom: 0px; right: 0px;

}

	/*シャンパーニュ*/
#user_contents #main .champagne{
	position: absolute; z-index: 10;
}
/*sp*/body.spView #user_contents #main .champagne{
	width: 35vw; bottom: 0vw; left: 4vw;
}
/*PC*/body:not(.spView) #user_contents #main .champagne{
	width: 244px; bottom: 80px; left: 30px;
}

	/*提供者*/
#user_contents #main .provider{
	position: absolute; z-index: 100;
}
/*sp*/body.spView #user_contents #main .provider{
	width: 54%; bottom: 0px; left: -2vw;
}
/*PC*/body:not(.spView) #user_contents #main .provider{
	width: 700px; left: -20px; bottom: 0px;
}


	/*メディアクエリ*/
/* PC1.4k▽ *************/ @media only screen and (min-width: 1367px) and (max-width: 1440px){
}/*△*/
/* PC1.5k▽ *************/ @media only screen and (min-width: 1441px) and (max-width: 1535px){
}/*△*/
/* PC-1.7k▽ *************/ @media only screen and (min-width: 1536px) and (max-width: 1680px){
}/*△*/
/* PC-1.9k▽ *************/ @media only screen and (min-width: 1681px){
}/*△*/
/* PC-1.9k▽ *************/ @media only screen and (min-width: 1921px){
}/*△*/


/*▲▲メインイメージ/ファーストビュー #main*********************/

/*▼▼選ばれる理由 #reason*********************/
#user_contents #reason{
	margin-top: -1px; padding: unset;
	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%);
}
#user_contents #reason .sec_box{ margin: 0px auto; padding: 10px 0px;}
/*PC*/body:not(.spView) #user_contents #reason .sec_box{ padding: 50px 10px;}





/*▲▲選ばれる理由 #reason*********************/

/*▼▼作り手&バイヤー/M.O.Fショコラティエ,ソムリエ #maker*********************/
#user_contents #maker{ padding-bottom: 10vw; background: #fff;}

/*PC*/body:not(.spView) #user_contents #maker{ padding-top: 55px; padding-bottom: 80px;}
/*PC*/body:not(.spView) #user_contents #maker .sec_hd{ padding: 0px 60px;}

#user_contents #maker .sec_box{ background: #fff;}
/*sp*/body.spView #user_contents #maker .sec_box{ margin: 0px 4vw 2vw;}

	/*MOFショコラティエとは*/
#user_contents #maker .about_mof{
	position: relative; padding: 5px 2vw;
	background: linear-gradient(to bottom,rgb(85,16,4) 0%,rgb(253,252,252) 70%,rgb(253,252,252) 100%);
}
/*sp*/body.spView #user_contents #maker .about_mof:before{
	content: "";
	position: absolute; top: 0px; right: 0px; z-index: 1;
	width: 109px; height: 109px;
	background: url( /cf00/img/maker/bg_cacao01.png ) top right / 100% auto no-repeat;
}
/*PC*/body:not(.spView) #user_contents #maker .about_mof{
	margin: 10px auto 20px; padding: 20px; width: 1070px;
}
#user_contents #maker .about_mof .title{
	display: block; width: 70%; margin: 10px auto 10px;
}
/*PC*/body:not(.spView) #user_contents #maker .about_mof .title{
	position: absolute; z-index: 10; top: 4px; left: 47px;
	display: block; width: 386px; height: auto;
}
#user_contents #maker .about_mof .photo{
	display: block; margin: 0px 10px 10px 0px;
	width: 40%; float:left;
}
/*PC*/body:not(.spView) #user_contents #maker .about_mof .photo{
	margin-left: 20px; width: 326px; float: right;
}
#user_contents #maker .about_mof .text{ padding: 0px; line-height: 1.2em;}
/*PC*/body:not(.spView) #user_contents #maker .about_mof .text{
	padding: 90px 20px 20px 20px; line-height: 1.7em;
	font-size: 14px; color: black;
	background: url(/cf00/img/maker/bg_cacao01.png) top left / 109px auto no-repeat;
}



	/*ショコラティエプロフィール*/
#user_contents #maker .profile_mof{}
/*PC*/body:not(.spView) #user_contents #maker .profile_mof{ margin-top: 60px;}

#user_contents #maker .profile_mof .title{ margin-bottom: 10px;}
#user_contents #maker .profile_mof .message{
	position: relative;
	width: 94%;
	margin: 5px auto; padding: 10px;
	font-size: 17px; line-height: 1.5em; color: #2d0a00;
	background: linear-gradient(to right bottom,#e1d492 0%,#fefdf9 50%,#c4ac2a 80%,#c3ab27 98%,#e1d492 100%);
	border-radius: 5px;
}
/*sp*/body.spView #user_contents #maker .profile_mof .aco_box .aco_inner{ height: 20vw;}
/*PC*/body:not(.spView) #user_contents #maker .profile_mof .message{
	margin: 30px 320px 20px 80px; padding: 20px;
	width: 610px;
	font-size: 24px; text-align: center;
}
#user_contents #maker .profile_mof .desc{
	margin-bottom: 1em;
	border-bottom: 1px solid #666;
}
#user_contents #maker .profile_mof .profile:before{ content: "略歴：　";}
/*PC*/body:not(.spView) #user_contents #maker .profile_mof .desc,
/*PC*/body:not(.spView) #user_contents #maker .profile_mof .profile{
	margin: 10px auto; padding: 0px 20px; width: 90%;
	line-height: 1.5em; color: black;
}
/*PC*/body:not(.spView) #user_contents #maker .profile_mof .desc{
	position: relative; padding-bottom: 1em;
	font-size: 18px;
}

/*PC*/body:not(.spView) #user_contents #maker .profile_mof .desc{
	padding-right: 320px;
}
/*PC*/body:not(.spView) #user_contents #maker .profile_mof .desc:after{
	content: "";
	position: absolute; right: 0px; bottom: 0px;
	display: block; width: 300px; height: 350px;
	background: url( /comimg/svg/null.svg ) center bottom / 100% auto no-repeat;
}
/*PC*/body:not(.spView) #user_contents #maker .profile_mof.hawe .desc:after{
	background-image: url(/cf00/img/maker/maker_prof_hawe_msg.jpg);
}
/*PC*/body:not(.spView) #user_contents #maker .profile_mof.camp .desc:after{
	background-image: url(/cf00/img/maker/maker_prof_camp_msg.jpg);
}
/*PC*/body:not(.spView) #user_contents #maker .profile_mof .profile{
	margin-bottom: 40px;
}




#user_contents #maker .profile_mof .text{ padding: 5px;}




/*▲▲作り手&バイヤー/M.O.Fショコラティエ,ソムリエ*********************/
/*▼▼コーヒー紹介 #coffee*********************/
#user_contents #coffee{
	position: relative;
	padding-top: 0; padding-bottom: 40px;
	background: #fff;
}
/*PC*/body:not(.spView) #user_contents #coffee{
	padding-bottom: 100px;
	background:
		linear-gradient(to right, #fff 0%, #fff 100%) center top / 1100px 50px repeat-y,
		linear-gradient(to right, #292013 0%, #292013 50%,#2f2519 50%, #2f2519 100%) left top / 10px 10px repeat;
}

	/*コネクタ*/
#user_contents #coffee::after{
	content: "";
	display: block; width: 100%;
}
#user_contents #coffee::after{
	content: "";
	position: absolute; bottom: -1px; display: block; height: 40px; width: 100vw;
	background: url( /cf00/img/coffee/coffee_bottom_conecter.svg ) center center / 100% 100% no-repeat;
}
/*PC*/body:not(.spView) #user_contents #coffee::after{ height: 100px;}



	/*ヘッダ*/
#user_contents #coffee .coffee_hd_img{
	margin: 0 auto; padding: 0 0 14vw;
	background: url( /cf00/img/coffee/coffee_hd_bg.jpg ) 36% bottom / 110% auto  no-repeat;
}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_hd_img{
	padding: 0 0 150px; width: 1100px;
	background-size: 100% auto;
	background-position: center bottom;
}

#user_contents #coffee .sec_hd{ padding-top: 0; color: #391804;}
/*PC*/body:not(.spView) #user_contents #coffee .sec_hd{ padding-bottom: 0;}

	/*point 外枠*/
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point_box{
	display: grid;
	gap: 0 30px;
	grid-template-rows: auto auto auto;
	grid-template-columns: 1fr 1fr;

}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point.point_1{ grid-column: 1 / 3; grid-row: 1 / 2;}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point.point_2{ grid-column: 1 / 2; grid-row: 2 / 3;}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point.point_3{ grid-column: 2 / 3; grid-row: 2 / 3;}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point.coffee_desc{ grid-column: 1 / 3; grid-row: 3 / 4;}



	/*point 見出し*/
#user_contents #coffee .coffee_title{
	position: relative;
	margin: 15px 0 5px; padding-left: 14vw;
}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_title{
	padding-left: 130px; height: 112px;
}

#user_contents #coffee .coffee_title::before{
	content: "";
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	display: block; width: 13vw; height: 13vw;
	background: url(/cf00/img/coffee/coffee_number_01.svg ) center center / 100% auto no-repeat;
}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_title::before{
	top: 50%; transform: translateY(-50%);
	width: 110px; height: 110px;
}

#user_contents #coffee .point_2 .coffee_title::before{ background-image: url(/cf00/img/coffee/coffee_number_02.svg  );}
#user_contents #coffee .point_3 .coffee_title::before{ background-image: url(/cf00/img/coffee/coffee_number_03.svg  );}
#user_contents #coffee .coffee_title .text{ position: absolute; top: 50%; transform: translateY(-50%);}



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


	/*point 内容*/
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point_box{ margin: 0 auto; width: 900px;}

#user_contents #coffee .coffee_point{
	position: relative;
	margin: 10px 0 20px; padding-bottom: 16px;
	display: grid; gap: 5px;
}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point{ margin-top: 30px;}
#user_contents #coffee .coffee_desc{
	position: relative;
}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_desc{
	grid-column: 1 / 3; grid-row: 3 / 4;
}


#user_contents #coffee .coffee_text{ padding-bottom: 1em;}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_text{ font-size: 22px; line-height: 1.3em;}

		/*point 内容 装飾*/
/*PC*/body:not(.spView) #user_contents #coffee .coffee_desc::before,
#user_contents #coffee .coffee_point.point_1::before,
#user_contents #coffee .coffee_point::after{
	content: "";
	position: absolute; left: 50%; transform: translateX(-50%);
	display: block; width: 80%; height: 20px;
	background: url(/cf00/img/coffee/coffee_line.svg ) center center / 100% auto no-repeat;
}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point.point_2::after,
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point.point_3::after{ content: unset;}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_desc::before,
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point::before,
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point::after{ width: 100%;}

#user_contents #coffee .coffee_point.point_1::before{ top: -20px;}
#user_contents #coffee .coffee_point::after{ bottom: -20px;}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_desc::before{ top: -30px;}


	/*point 内容 個別*/

/*sp*/body.spView #user_contents #coffee .coffee_point.point_1{
	grid-template-rows: 75px auto auto;
	grid-template-columns: auto;
}

/*PC*/body:not(.spView) #user_contents #coffee .coffee_desc .coffee_text,
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point.point_1 .coffee_text{ padding-left: 100px;}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point.point_1 .coffee_img{ padding: 0 10%;}


/*sp*/body.spView #user_contents #coffee .coffee_point.point_2,
/*sp*/body.spView #user_contents #coffee .coffee_point.point_3{
	grid-template-rows: 75px auto;
}
/*sp*/body.spView #user_contents #coffee .coffee_point.point_2{
	grid-template-columns: 55% 45%;
}
/*sp*/body.spView #user_contents #coffee .coffee_point.point_2 .coffee_title{ grid-column: 1 / 3; grid-row: 1 / 2;}
/*sp*/body.spView #user_contents #coffee .coffee_point.point_2 .coffee_text{ grid-column: 1 / 2; grid-row: 2 / 3;}
/*sp*/body.spView #user_contents #coffee .coffee_point.point_2 .coffee_img{ grid-column: 2 / 3; grid-row: 2 / 3;}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point.point_2 .coffee_text{ padding-bottom: unset;}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point.point_2 .coffee_img{ padding: 0 50px;}


/*sp*/body.spView #user_contents #coffee .coffee_point.point_3{
	grid-template-columns: 75% 25%;
}
/*PC*/body:not(.spView) #user_contents #coffee .coffee_point.point_3{
	grid-template-rows: 132px auto; grid-template-columns: 65% 35%;
}

#user_contents #coffee .coffee_point.point_3 .coffee_title{ grid-column: 1 / 3; grid-row: 1 / 2;}
#user_contents #coffee .coffee_point.point_3 .coffee_text{ grid-column: 1 / 2; grid-row: 2 / 3;}
#user_contents #coffee .coffee_point.point_3 .coffee_img{ grid-column: 2 / 3; grid-row: 2 / 3;}






/*▲▲コーヒー紹介*********************/







/*▼▼毎月のメニュー #item*********************/
#user_contents #item{
	padding: 15px;
	background: #000;
}
/*sp*/body.spView #user_contents #item{ }
/*PC*/body:not(.spView) #user_contents #item{
	width: 1100px;
	margin: 0 auto; padding: 20px 0;
}

	/*sec_hd*/
#user_contents #item .sec_hd{
	position: relative;
	padding: 26px 5px 24px;
	color: #000; background-color: #D0B980; line-height: 1.12em;
	background: linear-gradient(to bottom, #A88527 0%,#F1E5CB 45%,#A88527 100%);
}
/*PC*/body:not(.spView) #user_contents #item .sec_hd{
	margin-top: 50px; padding: 60px 10px 50px;
}
		/*sec_hd装飾*/
#user_contents #item .sec_hd:before,
#user_contents #item .sec_hd:after{
	content: "";
	position: absolute; top: 0px; left: 50%; transform: translateX( -50% );
	display: block; width: 100%; height: 100%;
	background: url( /comimg/svg/null.svg ) center top / auto 29px no-repeat;
	opacity: 0.25;
}
#user_contents #item .sec_hd:before{ background-image: url( /comimg/svg/ornament_line_vintage03.svg );}
#user_contents #item .sec_hd:after{
	background-image: url( /comimg/svg/ornament_line_vintage04.svg );
	background-position: center calc( 100% - 5px ) ;
}
/*PC*/body:not(.spView) #user_contents #item .sec_hd:before,
/*PC*/body:not(.spView) #user_contents #item .sec_hd:after{
	background-position: center calc( 5px ) ;
	background-size: auto 60px;
}
/*PC*/body:not(.spView) #user_contents #item .sec_hd:after{ background-position: center calc( 100% - 10px ) ;}



	/*monthly_item*************/
#user_contents #item #monthly_item{}

/*PC*/body:not(.spView) #user_contents #item #monthly_item{
	padding: 50px 0px 0px;
}


body:not(.spView) #user_contents #item{
	
}


	/*monthly_item*************/
#user_contents #item .monthly_item{
	position: relative;
	margin: 0 auto; padding: 5px;
	color: #fff; background: #000;
}
body:not(.spView) #user_contents #item .monthly_item{
	margin-top: 40px; padding: 10px 20px;
}


	/*input非表示*************/
#user_contents #item input{ display: none;}

	/*(SP)month_controler 月表示制御*************/
body:not(.spView) #user_contents #item .month_controler{ display: none;}
body.spView #user_contents #item .month_controler{
	display: grid;
	grid-template-rows: 20px;
	grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
	grid-template-areas: "M01 M02 M03 M04 M05 M06 M07 M08 M09 M10 M11 M12";
	gap: 0px 1px;
	margin: 0 auto; padding-top: 8px; height: 34px; width: calc((20px* 12) + 51px);
}
#user_contents #item .month_controler .month_button{
	height: 22px; font-size: 14px; text-align: center; 
	color: #000; border-radius: 50px;
	background: linear-gradient(to right bottom, #A88527 0%, #f7f5ef 45%, #A88527 100%);
}






	/*month_wrapper 月-外枠*************/
#user_contents #item .monthly_item .month_wrapper{
	position: relative;
}
body.spView #user_contents #item .monthly_item .month_wrapper{
	height: 103vw;
}
body:not(.spView) #user_contents #item .monthly_item .month_wrapper{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: row;
	gap: 40px 30px;
}


	/*month*/
#user_contents #item .monthly_item .month{
	border: 1px solid #161616;
}
body:not(.spView) #user_contents #item .monthly_item .month{
	height: 500px; border-radius: 5px;
}



body.spView #user_contents #item .monthly_item .month{
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 96%; height: 100%;
	padding: 3px;
	background: #000;
	order: 1; /*order初期値*/
}


#user_contents #item .monthly_item .month .detail{
	position: relative; width: 100%; height: 100%;
}

		/*month number*/
#user_contents #item .monthly_item .month .number{ position: absolute; z-index: 100;}
body.spView #user_contents #item .monthly_item .month .number{ top: -3px; left: -3px; width: 20vw;}
body:not(.spView) #user_contents #item .monthly_item .month .number{ top: -15px; left: -15px; width: 150px;}

		/*month photo*/
#user_contents #item .monthly_item .month .photo{}
#user_contents #item .monthly_item .month .photo .choco{ width: 100%;}
#user_contents #item .monthly_item .month .photo .coffee{ position: absolute; left: 0; bottom: 0;  width: 17%;}

body:not(.spView) #user_contents #item .monthly_item .month .photo .coffee{
	left: unset; right: 10px; bottom: 10px; width: 90px;
}

		/*month catch*/
#user_contents #item .monthly_item .month .month_catch{ margin: 4px; line-height: 1.3em; }
body.spView #user_contents #item .monthly_item .month .month_catch{ padding-left: 20%;}
body:not(.spView) #user_contents #item .monthly_item .month .month_catch{
	margin-left: 14px; width: 390px;
	font-size: 18px; line-height: 1.2em;
}


		/*month popup説明*/
#user_contents #item .monthly_item .month .popup_flag{ display: none;}
#user_contents #item .monthly_item .month .popup_open{
	position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%);
	display: block; width: 8em; margin: 15px auto 5px; padding: 5px 1em;
	text-align: center; color: #000;
	background: #fff; border: 1px solid #ccc; border-radius: 50px;
	cursor: pointer;
}
#user_contents #item .monthly_item .month .popup_overlay{
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999;
	display: none; width: 100%; height: 200vh; background: rgba( 0,0,0,0.72)
}
#user_contents #item #popup_M01:checked + .popup_overlay,
#user_contents #item #popup_M02:checked + .popup_overlay,
#user_contents #item #popup_M03:checked + .popup_overlay,
#user_contents #item #popup_M04:checked + .popup_overlay,
#user_contents #item #popup_M05:checked + .popup_overlay,
#user_contents #item #popup_M06:checked + .popup_overlay,
#user_contents #item #popup_M07:checked + .popup_overlay,
#user_contents #item #popup_M08:checked + .popup_overlay,
#user_contents #item #popup_M09:checked + .popup_overlay,
#user_contents #item #popup_M10:checked + .popup_overlay,
#user_contents #item #popup_M11:checked + .popup_overlay,
#user_contents #item #popup_M12:checked + .popup_overlay{ display: block;}

#user_contents #item .monthly_item .month .popup_window{
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
	display: block;margin: 0 auto; padding: 10px;
	width: 86%; max-width: 680px; height: auto; 
	color: #000; background-color: rgba(255, 255, 255, 0.88); border-radius: 5px;
}
body:not(.spView) #user_contents #item .monthly_item .month .popup_window{
	padding: 20px 10px;
	min-height: 320px;
}

#user_contents #item .monthly_item .month .popup-close{
	position: absolute; top: -0.8em; right: 0;
	font-size: 3em; color: #fff; cursor: pointer;
}

		/*month item_desc*/
#user_contents #item .monthly_item .month .item_desc{
	margin-bottom: 1em; padding: 5px 5px; 
}
#user_contents #item .monthly_item .month .item_desc.choco{
	padding-bottom: 1.4em; border-bottom: 1px dashed #ccc;
}

#user_contents #item .monthly_item .month .item_desc::before{
	content: ""; display: block; font-size: 80%; color: #210d01;
}
body.spView #user_contents #item .monthly_item .month .item_desc::before{
	font-size: 80%;
}

#user_contents #item .monthly_item .month .item_desc.choco::before{ content: "ショコラ";}
#user_contents #item .monthly_item .month .item_desc.coffee::before{ content: "スペシャルティコーヒー";}

#user_contents #item .monthly_item .month .item_desc .item_name{ margin: 5px 0;}
#user_contents #item .monthly_item .month .item_desc .item_name::before{ content: "【";}
#user_contents #item .monthly_item .month .item_desc .item_name::after{ content: "】";}

body:not(.spView) #user_contents #item .monthly_item .month .item_desc .item_name{
	margin: 9px 0;
	font-size: 1.2em;
}



		/*(SP)開始のmonthのz-indexを5000に*/
body.spView #user_contents #item.start_M01 .monthly_item .month_M01,
body.spView #user_contents #item.start_M02 .monthly_item .month_M02,
body.spView #user_contents #item.start_M03 .monthly_item .month_M03,
body.spView #user_contents #item.start_M04 .monthly_item .month_M04,
body.spView #user_contents #item.start_M05 .monthly_item .month_M05,
body.spView #user_contents #item.start_M06 .monthly_item .month_M06,
body.spView #user_contents #item.start_M07 .monthly_item .month_M07,
body.spView #user_contents #item.start_M08 .monthly_item .month_M08,
body.spView #user_contents #item.start_M09 .monthly_item .month_M09,
body.spView #user_contents #item.start_M10 .monthly_item .month_M10,
body.spView #user_contents #item.start_M11 .monthly_item .month_M11,
body.spView #user_contents #item.start_M12 .monthly_item .month_M12{ z-index: 5000;}
		/*(SP)radioで選択された月のz-indexを10000に*/
body.spView #user_contents #item .monthly_item #input_M01:checked ~ .month_wrapper .month_M01,
body.spView #user_contents #item .monthly_item #input_M02:checked ~ .month_wrapper .month_M02,
body.spView #user_contents #item .monthly_item #input_M03:checked ~ .month_wrapper .month_M03,
body.spView #user_contents #item .monthly_item #input_M04:checked ~ .month_wrapper .month_M04,
body.spView #user_contents #item .monthly_item #input_M05:checked ~ .month_wrapper .month_M05,
body.spView #user_contents #item .monthly_item #input_M06:checked ~ .month_wrapper .month_M06,
body.spView #user_contents #item .monthly_item #input_M07:checked ~ .month_wrapper .month_M07,
body.spView #user_contents #item .monthly_item #input_M08:checked ~ .month_wrapper .month_M08,
body.spView #user_contents #item .monthly_item #input_M09:checked ~ .month_wrapper .month_M09,
body.spView #user_contents #item .monthly_item #input_M10:checked ~ .month_wrapper .month_M10,
body.spView #user_contents #item .monthly_item #input_M11:checked ~ .month_wrapper .month_M11,
body.spView #user_contents #item .monthly_item #input_M12:checked ~ .month_wrapper .month_M12{ z-index: 10000 !important;}



		/*(sp/PC)[1～12]月始まりのorder指定*/
#user_contents #item.start_M02 .order_M01,
#user_contents #item.start_M03 .order_M01,
#user_contents #item.start_M03 .order_M02,
#user_contents #item.start_M04 .order_M01,
#user_contents #item.start_M04 .order_M02,
#user_contents #item.start_M04 .order_M03,
#user_contents #item.start_M05 .order_M01,
#user_contents #item.start_M05 .order_M02,
#user_contents #item.start_M05 .order_M03,
#user_contents #item.start_M05 .order_M04,
#user_contents #item.start_M06 .order_M01,
#user_contents #item.start_M06 .order_M02,
#user_contents #item.start_M06 .order_M03,
#user_contents #item.start_M06 .order_M04,
#user_contents #item.start_M06 .order_M05,
#user_contents #item.start_M07 .order_M01,
#user_contents #item.start_M07 .order_M02,
#user_contents #item.start_M07 .order_M03,
#user_contents #item.start_M07 .order_M04,
#user_contents #item.start_M07 .order_M05,
#user_contents #item.start_M07 .order_M06,
#user_contents #item.start_M08 .order_M01,
#user_contents #item.start_M08 .order_M02,
#user_contents #item.start_M08 .order_M03,
#user_contents #item.start_M08 .order_M04,
#user_contents #item.start_M08 .order_M05,
#user_contents #item.start_M08 .order_M06,
#user_contents #item.start_M08 .order_M07,
#user_contents #item.start_M09 .order_M01,
#user_contents #item.start_M09 .order_M02,
#user_contents #item.start_M09 .order_M03,
#user_contents #item.start_M09 .order_M04,
#user_contents #item.start_M09 .order_M05,
#user_contents #item.start_M09 .order_M06,
#user_contents #item.start_M09 .order_M07,
#user_contents #item.start_M09 .order_M08,
#user_contents #item.start_M09 .order_M01,
#user_contents #item.start_M09 .order_M02,
#user_contents #item.start_M09 .order_M03,
#user_contents #item.start_M09 .order_M04,
#user_contents #item.start_M09 .order_M05,
#user_contents #item.start_M09 .order_M06,
#user_contents #item.start_M09 .order_M07,
#user_contents #item.start_M09 .order_M08,
#user_contents #item.start_M10 .order_M01,
#user_contents #item.start_M10 .order_M02,
#user_contents #item.start_M10 .order_M03,
#user_contents #item.start_M10 .order_M04,
#user_contents #item.start_M10 .order_M05,
#user_contents #item.start_M10 .order_M06,
#user_contents #item.start_M10 .order_M07,
#user_contents #item.start_M10 .order_M08,
#user_contents #item.start_M10 .order_M09,
#user_contents #item.start_M11 .order_M01,
#user_contents #item.start_M11 .order_M02,
#user_contents #item.start_M11 .order_M03,
#user_contents #item.start_M11 .order_M04,
#user_contents #item.start_M11 .order_M05,
#user_contents #item.start_M11 .order_M06,
#user_contents #item.start_M11 .order_M07,
#user_contents #item.start_M11 .order_M08,
#user_contents #item.start_M11 .order_M09,
#user_contents #item.start_M11 .order_M10,
#user_contents #item.start_M12 .order_M01,
#user_contents #item.start_M12 .order_M02,
#user_contents #item.start_M12 .order_M03,
#user_contents #item.start_M12 .order_M04,
#user_contents #item.start_M12 .order_M05,
#user_contents #item.start_M12 .order_M06,
#user_contents #item.start_M12 .order_M07,
#user_contents #item.start_M12 .order_M08,
#user_contents #item.start_M12 .order_M09,
#user_contents #item.start_M12 .order_M10,
#user_contents #item.start_M12 .order_M11{ order: 2;}

		/*display_Mx? [1～12]月始まりの、[2|3|4|5|6|12]ヶ月総当たり,表示onoff指定*/
#user_contents #item .month_button,
body:not(.spView) #user_contents #item .month{ display: none;}
body.spView #user_contents #item.display_Mx12 .month_button,
#user_contents #item.start_M01.display_Mx2 .disp_M01,
#user_contents #item.start_M01.display_Mx2 .disp_M02,
#user_contents #item.start_M01.display_Mx3 .disp_M01,
#user_contents #item.start_M01.display_Mx3 .disp_M02,
#user_contents #item.start_M01.display_Mx3 .disp_M03,
#user_contents #item.start_M01.display_Mx4 .disp_M01,
#user_contents #item.start_M01.display_Mx4 .disp_M02,
#user_contents #item.start_M01.display_Mx4 .disp_M03,
#user_contents #item.start_M01.display_Mx4 .disp_M04,
#user_contents #item.start_M01.display_Mx5 .disp_M01,
#user_contents #item.start_M01.display_Mx5 .disp_M02,
#user_contents #item.start_M01.display_Mx5 .disp_M03,
#user_contents #item.start_M01.display_Mx5 .disp_M04,
#user_contents #item.start_M01.display_Mx5 .disp_M05,
#user_contents #item.start_M01.display_Mx6 .disp_M01,
#user_contents #item.start_M01.display_Mx6 .disp_M02,
#user_contents #item.start_M01.display_Mx6 .disp_M03,
#user_contents #item.start_M01.display_Mx6 .disp_M04,
#user_contents #item.start_M01.display_Mx6 .disp_M05,
#user_contents #item.start_M01.display_Mx6 .disp_M06,
#user_contents #item.start_M02.display_Mx2 .disp_M02,
#user_contents #item.start_M02.display_Mx2 .disp_M03,
#user_contents #item.start_M02.display_Mx3 .disp_M02,
#user_contents #item.start_M02.display_Mx3 .disp_M03,
#user_contents #item.start_M02.display_Mx3 .disp_M04,
#user_contents #item.start_M02.display_Mx4 .disp_M02,
#user_contents #item.start_M02.display_Mx4 .disp_M03,
#user_contents #item.start_M02.display_Mx4 .disp_M04,
#user_contents #item.start_M02.display_Mx4 .disp_M05,
#user_contents #item.start_M02.display_Mx5 .disp_M02,
#user_contents #item.start_M02.display_Mx5 .disp_M03,
#user_contents #item.start_M02.display_Mx5 .disp_M04,
#user_contents #item.start_M02.display_Mx5 .disp_M05,
#user_contents #item.start_M02.display_Mx5 .disp_M06,
#user_contents #item.start_M02.display_Mx6 .disp_M02,
#user_contents #item.start_M02.display_Mx6 .disp_M03,
#user_contents #item.start_M02.display_Mx6 .disp_M04,
#user_contents #item.start_M02.display_Mx6 .disp_M05,
#user_contents #item.start_M02.display_Mx6 .disp_M06,
#user_contents #item.start_M02.display_Mx6 .disp_M07,
#user_contents #item.start_M03.display_Mx2 .disp_M03,
#user_contents #item.start_M03.display_Mx2 .disp_M04,
#user_contents #item.start_M03.display_Mx3 .disp_M03,
#user_contents #item.start_M03.display_Mx3 .disp_M04,
#user_contents #item.start_M03.display_Mx3 .disp_M05,
#user_contents #item.start_M03.display_Mx4 .disp_M03,
#user_contents #item.start_M03.display_Mx4 .disp_M04,
#user_contents #item.start_M03.display_Mx4 .disp_M05,
#user_contents #item.start_M03.display_Mx4 .disp_M06,
#user_contents #item.start_M03.display_Mx5 .disp_M03,
#user_contents #item.start_M03.display_Mx5 .disp_M04,
#user_contents #item.start_M03.display_Mx5 .disp_M05,
#user_contents #item.start_M03.display_Mx5 .disp_M06,
#user_contents #item.start_M03.display_Mx5 .disp_M07,
#user_contents #item.start_M03.display_Mx6 .disp_M03,
#user_contents #item.start_M03.display_Mx6 .disp_M04,
#user_contents #item.start_M03.display_Mx6 .disp_M05,
#user_contents #item.start_M03.display_Mx6 .disp_M06,
#user_contents #item.start_M03.display_Mx6 .disp_M07,
#user_contents #item.start_M03.display_Mx6 .disp_M08,
#user_contents #item.start_M04.display_Mx2 .disp_M04,
#user_contents #item.start_M04.display_Mx2 .disp_M05,
#user_contents #item.start_M04.display_Mx3 .disp_M04,
#user_contents #item.start_M04.display_Mx3 .disp_M05,
#user_contents #item.start_M04.display_Mx3 .disp_M06,
#user_contents #item.start_M04.display_Mx4 .disp_M04,
#user_contents #item.start_M04.display_Mx4 .disp_M05,
#user_contents #item.start_M04.display_Mx4 .disp_M06,
#user_contents #item.start_M04.display_Mx4 .disp_M07,
#user_contents #item.start_M04.display_Mx5 .disp_M04,
#user_contents #item.start_M04.display_Mx5 .disp_M05,
#user_contents #item.start_M04.display_Mx5 .disp_M06,
#user_contents #item.start_M04.display_Mx5 .disp_M07,
#user_contents #item.start_M04.display_Mx5 .disp_M08,
#user_contents #item.start_M04.display_Mx6 .disp_M04,
#user_contents #item.start_M04.display_Mx6 .disp_M05,
#user_contents #item.start_M04.display_Mx6 .disp_M06,
#user_contents #item.start_M04.display_Mx6 .disp_M07,
#user_contents #item.start_M04.display_Mx6 .disp_M08,
#user_contents #item.start_M04.display_Mx6 .disp_M09,
#user_contents #item.start_M05.display_Mx2 .disp_M05,
#user_contents #item.start_M05.display_Mx2 .disp_M06,
#user_contents #item.start_M05.display_Mx3 .disp_M05,
#user_contents #item.start_M05.display_Mx3 .disp_M06,
#user_contents #item.start_M05.display_Mx3 .disp_M07,
#user_contents #item.start_M05.display_Mx4 .disp_M05,
#user_contents #item.start_M05.display_Mx4 .disp_M06,
#user_contents #item.start_M05.display_Mx4 .disp_M07,
#user_contents #item.start_M05.display_Mx4 .disp_M08,
#user_contents #item.start_M05.display_Mx5 .disp_M05,
#user_contents #item.start_M05.display_Mx5 .disp_M06,
#user_contents #item.start_M05.display_Mx5 .disp_M07,
#user_contents #item.start_M05.display_Mx5 .disp_M08,
#user_contents #item.start_M05.display_Mx5 .disp_M09,
#user_contents #item.start_M05.display_Mx6 .disp_M05,
#user_contents #item.start_M05.display_Mx6 .disp_M06,
#user_contents #item.start_M05.display_Mx6 .disp_M07,
#user_contents #item.start_M05.display_Mx6 .disp_M08,
#user_contents #item.start_M05.display_Mx6 .disp_M09,
#user_contents #item.start_M05.display_Mx6 .disp_M10,
#user_contents #item.start_M06.display_Mx2 .disp_M06,
#user_contents #item.start_M06.display_Mx2 .disp_M07,
#user_contents #item.start_M06.display_Mx3 .disp_M06,
#user_contents #item.start_M06.display_Mx3 .disp_M07,
#user_contents #item.start_M06.display_Mx3 .disp_M08,
#user_contents #item.start_M06.display_Mx4 .disp_M06,
#user_contents #item.start_M06.display_Mx4 .disp_M07,
#user_contents #item.start_M06.display_Mx4 .disp_M08,
#user_contents #item.start_M06.display_Mx4 .disp_M09,
#user_contents #item.start_M06.display_Mx5 .disp_M06,
#user_contents #item.start_M06.display_Mx5 .disp_M07,
#user_contents #item.start_M06.display_Mx5 .disp_M08,
#user_contents #item.start_M06.display_Mx5 .disp_M09,
#user_contents #item.start_M06.display_Mx5 .disp_M10,
#user_contents #item.start_M06.display_Mx6 .disp_M06,
#user_contents #item.start_M06.display_Mx6 .disp_M07,
#user_contents #item.start_M06.display_Mx6 .disp_M08,
#user_contents #item.start_M06.display_Mx6 .disp_M09,
#user_contents #item.start_M06.display_Mx6 .disp_M10,
#user_contents #item.start_M06.display_Mx6 .disp_M11,
#user_contents #item.start_M07.display_Mx2 .disp_M07,
#user_contents #item.start_M07.display_Mx2 .disp_M08,
#user_contents #item.start_M07.display_Mx3 .disp_M07,
#user_contents #item.start_M07.display_Mx3 .disp_M08,
#user_contents #item.start_M07.display_Mx3 .disp_M09,
#user_contents #item.start_M07.display_Mx4 .disp_M07,
#user_contents #item.start_M07.display_Mx4 .disp_M08,
#user_contents #item.start_M07.display_Mx4 .disp_M09,
#user_contents #item.start_M07.display_Mx4 .disp_M10,
#user_contents #item.start_M07.display_Mx5 .disp_M07,
#user_contents #item.start_M07.display_Mx5 .disp_M08,
#user_contents #item.start_M07.display_Mx5 .disp_M09,
#user_contents #item.start_M07.display_Mx5 .disp_M10,
#user_contents #item.start_M07.display_Mx5 .disp_M11,
#user_contents #item.start_M07.display_Mx6 .disp_M07,
#user_contents #item.start_M07.display_Mx6 .disp_M08,
#user_contents #item.start_M07.display_Mx6 .disp_M09,
#user_contents #item.start_M07.display_Mx6 .disp_M10,
#user_contents #item.start_M07.display_Mx6 .disp_M11,
#user_contents #item.start_M07.display_Mx6 .disp_M12,
#user_contents #item.start_M08.display_Mx2 .disp_M08,
#user_contents #item.start_M08.display_Mx2 .disp_M09,
#user_contents #item.start_M08.display_Mx3 .disp_M08,
#user_contents #item.start_M08.display_Mx3 .disp_M09,
#user_contents #item.start_M08.display_Mx3 .disp_M10,
#user_contents #item.start_M08.display_Mx4 .disp_M08,
#user_contents #item.start_M08.display_Mx4 .disp_M09,
#user_contents #item.start_M08.display_Mx4 .disp_M10,
#user_contents #item.start_M08.display_Mx4 .disp_M11,
#user_contents #item.start_M08.display_Mx5 .disp_M08,
#user_contents #item.start_M08.display_Mx5 .disp_M09,
#user_contents #item.start_M08.display_Mx5 .disp_M10,
#user_contents #item.start_M08.display_Mx5 .disp_M11,
#user_contents #item.start_M08.display_Mx5 .disp_M12,
#user_contents #item.start_M08.display_Mx6 .disp_M08,
#user_contents #item.start_M08.display_Mx6 .disp_M09,
#user_contents #item.start_M08.display_Mx6 .disp_M10,
#user_contents #item.start_M08.display_Mx6 .disp_M11,
#user_contents #item.start_M08.display_Mx6 .disp_M12,
#user_contents #item.start_M08.display_Mx6 .disp_M01,
#user_contents #item.start_M09.display_Mx2 .disp_M09,
#user_contents #item.start_M09.display_Mx2 .disp_M10,
#user_contents #item.start_M09.display_Mx3 .disp_M09,
#user_contents #item.start_M09.display_Mx3 .disp_M10,
#user_contents #item.start_M09.display_Mx3 .disp_M11,
#user_contents #item.start_M09.display_Mx4 .disp_M09,
#user_contents #item.start_M09.display_Mx4 .disp_M10,
#user_contents #item.start_M09.display_Mx4 .disp_M11,
#user_contents #item.start_M09.display_Mx4 .disp_M12,
#user_contents #item.start_M09.display_Mx5 .disp_M09,
#user_contents #item.start_M09.display_Mx5 .disp_M10,
#user_contents #item.start_M09.display_Mx5 .disp_M11,
#user_contents #item.start_M09.display_Mx5 .disp_M12,
#user_contents #item.start_M09.display_Mx5 .disp_M01,
#user_contents #item.start_M09.display_Mx6 .disp_M09,
#user_contents #item.start_M09.display_Mx6 .disp_M10,
#user_contents #item.start_M09.display_Mx6 .disp_M11,
#user_contents #item.start_M09.display_Mx6 .disp_M12,
#user_contents #item.start_M09.display_Mx6 .disp_M01,
#user_contents #item.start_M09.display_Mx6 .disp_M02,
#user_contents #item.start_M10.display_Mx2 .disp_M10,
#user_contents #item.start_M10.display_Mx2 .disp_M11,
#user_contents #item.start_M10.display_Mx3 .disp_M10,
#user_contents #item.start_M10.display_Mx3 .disp_M11,
#user_contents #item.start_M10.display_Mx3 .disp_M12,
#user_contents #item.start_M10.display_Mx4 .disp_M10,
#user_contents #item.start_M10.display_Mx4 .disp_M11,
#user_contents #item.start_M10.display_Mx4 .disp_M12,
#user_contents #item.start_M10.display_Mx4 .disp_M01,
#user_contents #item.start_M10.display_Mx5 .disp_M10,
#user_contents #item.start_M10.display_Mx5 .disp_M11,
#user_contents #item.start_M10.display_Mx5 .disp_M12,
#user_contents #item.start_M10.display_Mx5 .disp_M01,
#user_contents #item.start_M10.display_Mx5 .disp_M02,
#user_contents #item.start_M10.display_Mx6 .disp_M10,
#user_contents #item.start_M10.display_Mx6 .disp_M11,
#user_contents #item.start_M10.display_Mx6 .disp_M12,
#user_contents #item.start_M10.display_Mx6 .disp_M01,
#user_contents #item.start_M10.display_Mx6 .disp_M02,
#user_contents #item.start_M10.display_Mx6 .disp_M03,
#user_contents #item.start_M11.display_Mx2 .disp_M11,
#user_contents #item.start_M11.display_Mx2 .disp_M12,
#user_contents #item.start_M11.display_Mx3 .disp_M11,
#user_contents #item.start_M11.display_Mx3 .disp_M12,
#user_contents #item.start_M11.display_Mx3 .disp_M01,
#user_contents #item.start_M11.display_Mx4 .disp_M11,
#user_contents #item.start_M11.display_Mx4 .disp_M12,
#user_contents #item.start_M11.display_Mx4 .disp_M01,
#user_contents #item.start_M11.display_Mx4 .disp_M02,
#user_contents #item.start_M11.display_Mx5 .disp_M11,
#user_contents #item.start_M11.display_Mx5 .disp_M12,
#user_contents #item.start_M11.display_Mx5 .disp_M01,
#user_contents #item.start_M11.display_Mx5 .disp_M02,
#user_contents #item.start_M11.display_Mx5 .disp_M03,
#user_contents #item.start_M11.display_Mx6 .disp_M11,
#user_contents #item.start_M11.display_Mx6 .disp_M12,
#user_contents #item.start_M11.display_Mx6 .disp_M01,
#user_contents #item.start_M11.display_Mx6 .disp_M02,
#user_contents #item.start_M11.display_Mx6 .disp_M03,
#user_contents #item.start_M11.display_Mx6 .disp_M04,
#user_contents #item.start_M12.display_Mx2 .disp_M12,
#user_contents #item.start_M12.display_Mx2 .disp_M01,
#user_contents #item.start_M12.display_Mx3 .disp_M12,
#user_contents #item.start_M12.display_Mx3 .disp_M01,
#user_contents #item.start_M12.display_Mx3 .disp_M02,
#user_contents #item.start_M12.display_Mx4 .disp_M12,
#user_contents #item.start_M12.display_Mx4 .disp_M01,
#user_contents #item.start_M12.display_Mx4 .disp_M02,
#user_contents #item.start_M12.display_Mx4 .disp_M03,
#user_contents #item.start_M12.display_Mx5 .disp_M12,
#user_contents #item.start_M12.display_Mx5 .disp_M01,
#user_contents #item.start_M12.display_Mx5 .disp_M02,
#user_contents #item.start_M12.display_Mx5 .disp_M03,
#user_contents #item.start_M12.display_Mx5 .disp_M04,
#user_contents #item.start_M12.display_Mx6 .disp_M12,
#user_contents #item.start_M12.display_Mx6 .disp_M01,
#user_contents #item.start_M12.display_Mx6 .disp_M02,
#user_contents #item.start_M12.display_Mx6 .disp_M03,
#user_contents #item.start_M12.display_Mx6 .disp_M04,
#user_contents #item.start_M12.display_Mx6 .disp_M05{ display: block;}



/*▲▲毎月のメニュー*********************/



/*▼▼毎月のメニュー添え書き #item*********************/

#user_contents #item .caution_text2 { color: #ccc;}
/*PC*/body:not(.spView) #user_contents #item .caution_text2{
	padding-left: 270px; width: 1100px; letter-spacing: -1px;
}

/*▲▲毎月のメニュー添え書き*********************/








/*▼▼推薦します #catchphrase*********************/
#user_contents #catchphrase{
	position: relative;
	padding-bottom: 42px;
	background: #000;
}


#user_contents #catchphrase::after{
	content: "";
	position: absolute; bottom: -1px; display: block; width: 100vw; height: 40px;
	background: url( /cf00/img/coffee/coffee_bottom_conecter.svg ) center center / 100% 100% no-repeat;
	filter: invert(1);
}
/*PC*/body:not(.spView) #user_contents #catchphrase::after{
	height: 100px;
}



#user_contents #catchphrase .sec_box{
	margin: 0 auto; padding: 10px 0 7px;
}

/*PC*/body:not(.spView) #user_contents #catchphrase .sec_box{
	padding: 40px 0px 50px;
}
#user_contents #catchphrase .img_box{ width: 100%;}




/*▲▲頒布会へのお誘い*********************/
/*▼▼推薦します #reco*********************/
#user_contents #reco{ background: #fff;}

/*PC*/body:not(.spView) #user_contents #reco .sec_box{
	margin-bottom: unset; padding-bottom: 20px;
}




	/*grid*/
#user_contents #reco .praise{
	display: grid;
	grid-template: 20vw 1fr / calc( 25% + 10px ) 1fr; grid-gap: 10px;
}
#user_contents #reco .praise .title{ grid-row: 1/2 ; grid-column: 1/3 ;}
#user_contents #reco .praise .photo{ grid-row: 2/3 ; grid-column: 1/2 ;}
#user_contents #reco .praise .catch{ grid-row: 2/3 ; grid-column: 2/3 ;}
/*PC*/body:not(.spView) #user_contents #reco .praise{
	grid-template-rows: 180px 1fr; grid-gap: 40px 20px;
}

/*sp*/body.spView #user_contents #reco .praise{
	margin-bottom: 20px; padding-bottom: 10px;
}
/*PC*/body:not(.spView) #user_contents #reco .praise .title,
/*sp*/body.spView #user_contents #reco .praise{
	background:linear-gradient(to bottom,rgb(130,36,77) 0%,rgb(142,57,94) 9%,rgb(130,36,77) 22%,rgb(104,28,61) 80%,rgb(78,21,46) 98%,rgb(66,14,37) 100%);
	box-shadow: 0px 0px 20px 0px rgb(130,36,77) inset;
	border-radius: 2px;
}


	/*見出し*/
		/*見た目*/
#user_contents #reco .praise .title{
	position: relative; padding: 10px; width: 100%;
	font-size: 5.5vw; line-height: 1.3em; text-align: center; color: #fff; letter-spacing: -1px;
}
/*PC*/body:not(.spView) #user_contents #reco .praise .title{
	font-size: 50px;
}

#user_contents #reco .praise .title .icon,
#user_contents #reco .praise .title .lead{
	position: absolute; top: 50%; transform: translate( 0, -50% );
}
#user_contents #reco .praise .title .icon{ left: 5px; width: 19vw;}
#user_contents #reco .praise .title .lead{ left: 20vw;}

/*PC*/body:not(.spView) #user_contents #reco .praise .title .icon{
	left: 6%; width: 180px;
}
/*sp*/body.spView #user_contents #reco .praise .photo{ padding: 3vw 0px 0px 5px;}

/*sp*/body.spView #user_contents #reco .praise .catch{
	padding-top: 2.5vw;
	color: #fff; text-align: center; font-size: 4.8vw; line-height: 130%;
}
/*PC*/body:not(.spView) #user_contents #reco .praise .catch{
	margin: 0px 10px 10px 10px; padding: 0px 0px 10px;
	font-size: 24px; line-height: 140%;
}



	/*内容*/
#user_contents #reco .desc{}
#user_contents #reco .desc b{ text-decoration: underline; color: #90690f;}
/*sp*/body.spView #user_contents #reco .desc b{ font-weight: normal;}
		/*sp aco*/
/*sp*/body.spView #user_contents #reco .aco_box .aco_inner{ height: 70vw;}
/*sp*/body.spView #user_contents #reco .aco_box input:checked + label:after,
/*sp*/body.spView #user_contents #reco .aco_box label:after{ background: #5D1936;}

		/*PC 位置調整*/
/*PC*/body:not(.spView) #user_contents #reco .desc .comment{
	position: absolute; top: -388px; left: 310px; width: 760px;
}
/*PC*/body:not(.spView) #user_contents #reco .profile .name{
	position: absolute; top: -76px;
	line-height: 1.5em;
}


#user_contents #reco .desc p.text{ margin-bottom: 10px;}
		/*プロフィール*/
#user_contents #reco .desc .profile .name{ margin-top: 1em;}
#user_contents #reco .desc .profile .name .full_name{ font-size: 1.3em;}
#user_contents #reco .desc .profile .biography{
	position: relative;
	margin-top: 1em; padding-top: 1em;
	border-top: 1px solid #82244d;
}

/*PC*/body:not(.spView) #user_contents #reco .desc .profile .biography{ margin-top: 40px; padding-left: 64px;}
#user_contents #reco .desc .profile .biography:before{ content:"【略歴】　 \a";white-space: pre;}
/*PC*/body:not(.spView) #user_contents #reco .desc .profile .biography:before{ position: absolute; left: 0px;}
/*PC*/body:not(.spView) #user_contents #reco .desc .profile .qualification{ padding-left: 64px;}



/*▲▲推薦します*********************/
/*▼▼お客様の声 #customer*********************/
#user_contents #customer{
	position: relative; padding: 0px 0px 10px;
	background: #fff;
}
/*sp*/body.spView #user_contents #customer{ padding-top: 0px;}
/*PC*/body:not(.spView) #user_contents #customer{
	padding: 50px 0px;
	background:
		linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 140px,rgba(255,255,255,0.1) 60%),
		url( /cf00/img/customer/customer_bg.jpg ) center bottom / 100% auto no-repeat,
		linear-gradient(to bottom,#fff 0%,#fff 100%);
}

	/*見出し*/
#user_contents #customer .sec_hd{
	font-size: 20px;
	padding: 40px 0px 0px;
	background: linear-gradient(to bottom,#A88527 0%,#ffd16d 50%,#A88527 100%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}
/*PC*/body:not(.spView) #user_contents #customer .sec_hd{
	padding: 10px 0px 20px; font-size: 40px; 
}

#user_contents #customer .sec_hd b{
	display: inline-block; margin: 0px 15px;
	font-size: 1.5em; line-height: 1.2em; font-weight: inherit;
}

	/*内容*/
#user_contents #customer .many_voice{}
		/*sp aco*/
/*sp*/body.spView #user_contents #customer .aco_box .aco_inner{ height: 90vw; padding-top: 20px;}
/*sp*/body.spView #user_contents #customer .aco_box input:checked + label:after,
/*sp*/body.spView #user_contents #customer .aco_box label:after{ background: #080606;}


#user_contents #customer .many_voice .koe{
	position: relative;
	width: 90%; margin: 0px auto 10px; padding: 5px 7px 18px;
	background: #fff; border-radius: 8px;
}
/*sp*/body.spView #user_contents #customer .many_voice .koe{ box-shadow: 5px 5px 50px 10px rgba(255,235,0,0.38);}
/*PC*/body:not(.spView) #user_contents #customer .many_voice .koe{
	padding: 15px 15px 30px;
	min-height: 132px;
}

/*PC*/body:not(.spView) #user_contents #customer .many_voice .koe .text{
	font-size: 26px;
	letter-spacing: -6.8px;
	line-height: 1.1em;
	font-family: "bijin_cc"; /*美人字*/
}

/*sp*/body.spView #user_contents #customer .many_voice .koe small{ font-size: inherit;}
/*PC*/body:not(.spView) #user_contents #customer .many_voice .koe small{ font-size: inherit; letter-spacing: -8px;}
#user_contents #customer .many_voice .koe .name{
	position: absolute; right: 8px; bottom: 2px;
	letter-spacing: initial;
}

		/*PC 配置*/
/*PC*/body:not(.spView) #user_contents #customer .many_voice .aco_inner{
	display: grid;
	grid-template: 250px 200px 270px / 50% 50%;
	grid-gap: 10px 2px;
}
/*PC*/body:not(.spView) #user_contents #customer .many_voice .aco_inner .koe{}
/*PC*/body:not(.spView) #user_contents #customer .many_voice .aco_inner #koe_g.koe{ grid-row: 1/2 ; grid-column: 1/2 ;}
/*PC*/body:not(.spView) #user_contents #customer .many_voice .aco_inner #koe_i.koe{ grid-row: 3/4 ; grid-column: 1/2 ;}
/*PC*/body:not(.spView) #user_contents #customer .many_voice .aco_inner #koe_k.koe{ grid-row: 1/3 ; grid-column: 2/3 ;}
/*PC*/body:not(.spView) #user_contents #customer .many_voice .aco_inner #koe_m.koe{ grid-row: 3/4 ; grid-column: 2/3 ;}
/*PC*/body:not(.spView) #user_contents #customer .many_voice .aco_inner #koe_o.koe{ grid-row: 2/3 ; grid-column: 1/2 ;}








/*▲▲お客様の声*********************/


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

#user_contents #faq .sec_hd{ color: #351808;}
#user_contents #faq .sec_box{ margin-bottom: 0;}
#user_contents #faq .faq_box .question{ color: #fff; background-color: #351808;}
#user_contents #faq .faq_box .answer:before{ color: #351808;}
/*▲▲よくあるご質問*********************/




/*▼▼魅力ポイント #present*********************/
#user_contents #charm{
	padding: 10px 0px;
	background:
		linear-gradient(to bottom,rgb(0,0,0) 0%,rgb(0,0,0) 66%,rgba(0,0,0,0.6) 100%),
		url( /cf00/img/charm/charm_bg.jpg ) center bottom / 100% auto no-repeat,
		linear-gradient(to bottom,#000 0%,#000 100%);
}
/*sp*/body.spView #user_contents #charm .sec_hd{ line-height: 1.1em;}
#user_contents #charm .sec_box{ margin: 0px auto; padding: unset;}

/*▲▲魅力ポイント*********************/

/*▼▼価格のご案内 #present*********************/
#user_contents #price{ padding: 10px 0px; background: #000;}
#user_contents #price .sec_box{ margin: 0px auto; padding: unset;}
#user_contents #price .caution_text2{ color: #eee;}





/*▲▲価格のご案内*********************/


/*▼▼プレゼント #present*********************/
#user_contents #present{
	padding: 10px 0px;
	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%);
}
#user_contents #present .sec_box{ padding: unset;}

/*▲▲プレゼント*********************/






/*************************************************************************/
/* webfont*/

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

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

	/*美人字 sub>(for #customer お客様の声)*/
	@font-face {
	  font-family: "bijin_cc";
	  src: url("/cf00/img/customer/sub_bijin_2cc00.woff")  format('woff');
	}

}/*△*/

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