@charset "utf-8";
/* ------------------------------
oc category_foodelight 追加 sz 2020/01/29 16:40
------------------------------ */

/********
もっと見るoveride
********/
#ec4main .p-more-button{ display: flex; display: -ms-flexbox; margin-top: 15px; margin-bottom: 15px; width: 130px; text-align: center;}
#ec4main .p-more-button__text--close{ width: 70px;}
/*PC*/ @media only screen and (min-width: 768px) { 
	#ec4main .p-more-content{ display: block;}
	#ec4main .p-more-button{ display: none;}
}

	/*上へ戻る*/
#ec4main .gotop{
	position: absolute; bottom: 0; right: 5px;
	display: block; width: 90px; height: 30px; line-height: 30px;
	text-align: center; cursor: pointer;
	font-size: 11px;
	background: #9da3a9;
	opacity: 0.8;
}
#ec4main .gotop a{ color: white;}

/* PC▽ */ @media only screen and (min-width: 768px) {
	.#ec4main .gotop{ bottom: -10px; right: 5px;}
}/*△*/



.oc_desc.sp_issue .sp_issue_case .title{ font-size: unset; min-height: unset;}






/******************************************************************<')>>><*/

/*common*/
#ec4main.sp_issue{}
#ec4main .topic{
	position: relative;
	margin: 20px 0;
	padding: 5px 10px 20px;
	background: #1F1513;
	background: url( '../../../../../content_image/parts/cssimg/bg_hanpu01.gif' ) left top / 150px 150px repeat;
}

#ec4main .topic h2.title{ font-size: 26px;}
#ec4main .topic h3.title{ font-size: 22px;}
#ec4main .topic h4.title{ font-size: 15px;}
#ec4main .topic h5.title{ font-size: 13px;}
/* PC▽ */ @media only screen and (min-width: 768px) {
	#ec4main .topic{ margin: 40px 0;}
	#ec4main .topic h2.title{ font-size: 38px;}
	#ec4main .topic h3.title{ font-size: 32px;}
	#ec4main .topic h4.title{ font-size: 20px;}
	#ec4main .topic h5.title{ font-size: 18px;}
}/*△*/


#ec4main .topic .title{
	padding: 10px;
	color: #F1E5CB;
	font-family: serif;
	letter-spacing: -1px;
}
#ec4main .topic > .title{ border: 1px solid #755c5c;}

/* PC▽ */ @media only screen and (min-width: 768px) {
	#ec4main .topic > .title{
		padding: 20px 10px;
		letter-spacing: -2px;
		background: linear-gradient(to bottom,rgb(255,255,255) 0%,rgb(252,195,2) 10%,rgb(247,222,5) 20%,rgb(255,255,255) 40%,rgb(255,255,255) 50%,rgb(247,222,5) 70%,rgb(237,172,6) 75%,rgb(218,142,0) 90%,rgb(247,222,5) 100%);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
	}
}/*△*/
/* ▼IE代替 */ @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 
	#ec4main .topic > .title{ background: inherit; color: #BFA35A; }
}/* ▲IE代替 */

#ec4main .topic .box_com{ margin: 5px 0; padding: 10px 5px; line-height: 150%; background: #fff;}
/* PC▽ */ @media only screen and (min-width: 768px) {
	#ec4main .topic .box_com{ margin: 10px 0; padding: 20px 15px;}
}/*△*/

#ec4main .topic .text{}
#ec4main .topic .text b{ color: #d31200;}
#ec4main .topic .notice{ margin-top: 10px; padding: 5px; font-size: 90%; background: #FFE8A5;}



/* ▼#navigation 目次************************************/

#ec4main .nav_box{}
#ec4main .nav_box .list{}
#ec4main .nav_box .list .item{}
#ec4main .nav_box .list .item .link{
	display: block;
	padding: 5px;
	font-size: 14px; font-family: serif; letter-spacing: -1px;
	background: radial-gradient(#c0c0c0 13%, transparent 16%) left bottom / 7px 7px repeat-x;
}
#ec4main .nav_box .list .item .link::before{
	content: "";
	display: inline-block;
	margin-right: 10px;
	height: 1em; width: 1em;
	background: url( '../../../../../content_image/parts/cssimg/arrow_gold02.png' ) center center / 8px 8px no-repeat;;
}


/* PC▽ */ @media only screen and (min-width: 768px) {
	#ec4main .nav_box .list .item .link{ font-size: 20px;}
}/*△*/

/* ▲#navigation 目次************************************/
/* ▼#about_fd 頒布会とは？************************************/
/* ▲#about_fd 頒布会とは？************************************/
/* ▼#charm 頒布会６つの魅力************************************/
#ec4main #charm{}



#ec4main #charm .number_counter{
	counter-reset: count_flg_charm; /*★計数リセット*/
	padding-top:;
}
#ec4main #charm .number_counter .title{
	position: relative;
	font-size: 17px;
	text-align: left;
	padding-left: 2.5em;
	background: #ac0000;
}

#ec4main #charm .number_counter .flex_box .title::before{
	content: counter(count_flg_charm); /*★計数値をここで表示*/
	counter-increment: count_flg_charm; /*★計数値を１つ進める*/
	position: absolute; bottom: -5%; left: -13px;
	display: inline-block; padding-top: 0.4em; width: 1.5em; height: 1.7em;
	font-family: serif; font-size: 180%; text-align: center;
	color: #ac1d00; background: #fff; border-radius: 50%;
}

#ec4main #charm .text{
	padding: 5px;
	margin-bottom: 10px;
}
/* PC▽ */ @media only screen and (min-width: 768px) {
	#ec4main #charm .number_counter{ padding-top: 40px;}
	#ec4main #charm .number_counter .title{ font-size: 19px;}
	#ec4main #charm .number_counter .flex_box .title::before{
		bottom: -7%;
		font-size: 34px;
		width: 1.4em; height: 1.4em;
	}
	#ec4main #charm .text{ margin-bottom: 30px;}
}/*△*/













/* ▲#charm 頒布会６つの魅力************************************/

/* ▼#variety 頒布会の種類************************************/
#ec4main #variety{}
#ec4main #variety .branch{
	margin: 20px 0;
	padding: 0 0 20px;
	background: #fff;
}
#ec4main #variety .branch .title,
#ec4main #variety .branch .release{ font-family: serif; color: #200;}
#ec4main #variety .branch .release{ text-align: right;}

#ec4main #variety .branch .appeal{ margin: 5px 0;}
#ec4main #variety .branch .appeal .image{}
#ec4main #variety .branch .appeal .text{ padding: 10px 5px;}
#ec4main #variety .branch .appeal .point{ margin: 10px 0;}
#ec4main #variety .branch .reco{ padding: 5px 3px;}
#ec4main #variety .branch .reco::after{ content:"";clear: both;display: block;/*cf*/}

#ec4main #variety .branch .reco .person{ position: absolute;}
#ec4main #variety .branch .reco .person .executive,
#ec4main #variety .branch .reco .person .name{ 
	position: absolute; z-index: 10;
	display: block; width: 100%; padding: 2px 0;
	text-align: center; letter-spacing: -1px;
	background: rgba( 255,255,255,0.5 );
}
#ec4main #variety .branch .reco .person .executive{ bottom: calc( 2.1em );}
#ec4main #variety .branch .reco .person .name{ bottom: 0; }

#ec4main #variety .branch .reco .content{}
#ec4main #variety .branch .reco .content .title{}
#ec4main #variety .branch .reco .content .title::before{
	content: "推薦者の声"; 
	display: block; margin-left: 48%; margin-bottom: 15px;  width: 6.7em; height: 1.5em;
	font-size: 90%; font-family: serif; text-align: center;
	background: #ebdcc7; opacity: 0.8;
}
#ec4main #variety .branch .reco .content .text{ padding: 0.5em 1em;}

/*personなし*/
#ec4main #variety .branch .reco.non_person .content .executive{ padding-right: 1em; text-align: right; font-size: 90%;}
#ec4main #variety .branch .reco.non_person .content::before{ content: unset;}
#ec4main #variety .branch .reco.non_person .content .title{ margin-bottom : 10px; padding-bottom: unset;text-align: center;}
#ec4main #variety .branch .reco.non_person .content .title::before{ margin-left: 2%;}

#ec4main #variety .branch .link{ font-size: 120%;}
#ec4main #variety .branch .link a{
	display: block; margin: 0 auto; width: 95%; min-height: 2em; line-height: 2em;
	background-color:#F6D506;background-repeat:repeat;
	background-image: linear-gradient(to top,rgb(194,170,36) 0%,rgb(217,203,120) 38%,rgb(252,251,246) 62%,rgb(224,212,146) 100%);
	background-size: 100% 100%;
	border-radius: 10px;
}
#ec4main #variety .branch .link p{ font-family: serif; letter-spacing: -1px; text-align: center;}
#ec4main #variety .branch .link p::after{ content: "のサイトへ"; font-size: 90%;}

/* sp▽ */ @media only screen and (max-width: 768px) {
	#ec4main #variety .branch .appeal .point .flex_box{ width: 43vw; height: 12.765vw; max-width: 270px; max-height: 80px; margin-bottom: 8px;}
	#ec4main #variety .branch .appeal .point .flex_box:nth-of-type(3){ display: none;}
	#ec4main #variety .branch .reco .person{ width: 40%;}
	#ec4main #variety .branch .reco .person .executive{ font-size: 80%;}
	#ec4main #variety #fdch.branch .reco .person .executive{ bottom: calc( 3.5em );}
	#ec4main #variety .branch .reco .content::before{ content: ""; display: block; width: 48%; height: 60vw; float: left;}
	#ec4main #variety .branch .reco .content::after{ content:"";clear: both;display: block;/*cf*/}
	#ec4main #variety .branch .reco .content .title{ padding: 3px; padding-bottom: 1.5em; text-align: left;}



}/*△*/

/* PC▽ */ @media only screen and (min-width: 768px) {
	#ec4main #variety .branch{ margin: 40px 0; padding: 30px 20px;}
	#ec4main #variety .branch .appeal{ margin: 15px 0;}
	#ec4main #variety .branch .appeal .point .flex_col_3_1:nth-of-type(1){ margin-left: 0;}
	#ec4main #variety .branch .appeal .point .flex_col_3_1:nth-of-type(3){ margin-right: 0;}
	#ec4main #variety .branch .reco{ padding: 10px 0;}
	#ec4main #variety .branch .reco .content .title::before{ margin-left: 13px; text-align: center;}
	#ec4main #variety .branch .reco .person{ position: relative; width: 30%; float: left;}
	#ec4main #variety .branch .reco .person .executive{ padding: 5px 0; bottom: calc( 2.4em - 1px );}
	#ec4main #variety .branch .reco .person .name{ padding: 5px 0; font-size: 1.2em;}
	#ec4main #variety .branch .reco .content{ width: 69.5%; float: right;}
	#ec4main #variety .branch .reco .content .text{ padding: 1em 2em; line-height: 150%;}
	/*personなし*/ #ec4main #variety .branch .reco.non_person .content{ width: 100%; float: unset;}
	#ec4main #variety .branch .link{ font-size: 140%;}
	#ec4main #variety .branch .link a{ width: 80%; min-height: 3em; line-height: 3em;}
}/*△*/




/* ▲#variety 頒布会の種類************************************/
/* ▼#survey ご利用者のアンケート************************************/
#ec4main .topic .reserch{ margin: 10px 5px;}
#ec4main .topic .reserch .title{
	padding-top: 15px;
	color: #fff;
	background: #300;
	background: linear-gradient(to bottom,#300 0%,#300 3px,#fef6b3 3px,#6a6647 4px,#300 4px,#300 6px,#b46060 6px,#413232 7px,#300 7px,#300 100%);
}

#ec4main .topic .reserch figure{ margin: 5px 0; padding: 10px 5px; text-align: center; background: #fff;}



/* ▲#survey ご利用者のアンケート************************************/
/* ▼#voices ご利用者のお声************************************/

#ec4main #voices{}
#ec4main .c_voice{ 
	color: #222; font-family:serif;
	background-color: #FBEDD0;
	background: url( '../../../../../content_image/parts/cssimg/pattern_da0036_beige.png' ) center center / 50px auto repeat;
	border-width: 1px; border-color: #d5ba8d; border-radius: unset;
}
#ec4main .c_voice:nth-of-type(1){ margin-top: 10px;}
#ec4main .c_voice::before{
	content: "";
	position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
	display: block; width: 70vw; height: 8vw;
	background: url( '../../../../../content_image/parts/cssimg/deco_topper_ornament_beige.svg' ) center top / 100% 100% no-repeat;
	opacity: 0.7;
}
#ec4main .c_voice .name,
#ec4main .c_voice p{ position: relative; z-index: 10;}

#ec4main .c_voice .name{ top: unset; right: unset;}
#ec4main .c_voice p{ line-height: 150%;}


/* PC▽ */ @media only screen and (min-width: 768px) {
	#ec4main .c_voice{ padding: 30px;}
	#ec4main .c_voice:nth-of-type(1){ margin-top: 20px;}
	#ec4main .c_voice::before{ width: 300px; height: 34px;}
	#ec4main .c_voice p{ padding: 10px 40px;}
}/*△*/


/* ▲#voices ご利用者のお声************************************/
/* ▼#faq よくあるご質問************************************/
/* ▲#faq よくあるご質問************************************/

#ec4main #faq{}
#ec4main #faq .box_com{ padding: 5px;}

/* PC▽ */ @media only screen and (min-width: 768px) {
	#ec4main #faq .box_com{ padding: 20px 10px;}
}/*△*/



/* ▼topic装飾画像まとめ指定************************************/
#ec4main .topic::before{
	content: "";
	position: absolute; z-index: 10; top: 13px; right: -5px;
	display: block;
	width: 30vw; height: 10vw;
	background: url(../../../../../content_image/category/foodelight/fd_106.png) left top / 100% auto no-repeat;
	opacity: 0.7;
}
#ec4main #about_fd.topic::before,
#ec4main #charm.topic::before{ top: -14px; width: 110px; height: 81px; opacity: 1;}
#ec4main #about_fd.topic::before{ background-image: url(../../../../../content_image/category/foodelight/fd_104.png);}
#ec4main #charm.topic::before{ background-image: url(../../../../../content_image/category/foodelight/fd_105.png);}
#ec4main #variety.topic::before{ background-image: url(../../../../../content_image/category/foodelight/fd_108.png);}
#ec4main #survey.topic::before{ background-image: url(../../../../../content_image/category/foodelight/fd_106.png);}
#ec4main #voices.topic::before{ background-image: url(../../../../../content_image/category/foodelight/fd_107.png);}
#ec4main #faq.topic::before{ background-image: url(../../../../../content_image/category/foodelight/fd_109.png);}


/* sp▽ */ @media only screen and (max-width: 768px) {
	#ec4main #survey.topic::before{ width: 24vw;}
}/*△*/

/* PC▽ */ @media only screen and (min-width: 768px) {
	#ec4main .topic::before{
		top: 17px; right: 26px;
		width: 160px; height: 55px;
		opacity: 1;
	}
	#ec4main #about_fd.topic::before,
	#ec4main #charm.topic::before{ top: -46px; width: 210px; height: 155px;}
}/*△*/




/* ▲topic装飾画像まとめ指定************************************/


/* ec4_oc_content_foodelight.css */