﻿@charset "utf-8";

/* recipe ***************************/

#ov_custom .recipe{}

#ov_custom .recipe .r_comment{}

#ov_custom .recipe .r_comment p{
	padding: 0.5rem 2rem 1rem 0.5rem;
	font-size:1.6rem;
	line-height:2.8rem;

}

#ov_custom .recipe .intro a.btn{
	display:block;
width: 50%;
    height: auto;
    margin: 1rem auto;
    padding: 1.2rem 1rem;

	font-size:1.5rem;color:white;
	text-align:center;

	background:#4F2566;
	background: -moz-linear-gradient(top,#4F2566,#725084 9%,#4F2566 50%,#4F2566 80%,#3F1D51 98%,#271233);/* FF */ 
	background: -webkit-gradient(linear, top,  bottom, from(#4F2566),color-stop(0.09 ,#725084),color-stop(0.5 ,#4F2566),color-stop(0.8 ,#4F2566),color-stop(0.98 ,#3F1D51),to(#271233));/* Sf,Ch */ 
	background:linear-gradient(to bottom,#4F2566 0%,#725084 9%,#4F2566 50%,#4F2566 80%,#3F1D51 98%,#271233 100%)
	
	border-style:solid;border-width:1px;
	border-color:#DBD3E0 #17B1E #DBD3E0 #17B1E;
	border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;

}
.recipelist a{
    text-decoration: underline;	
}
#ov_custom h3{
padding:24px 0 20px 0;
}
.recipe img{
	width:100%;
	height:auto;
}
.recipe .comment img{
	width:auto !important;
	height:auto;
}
/*これまでのレシピ*/

#ov_custom .recipe .recipelist{}
#ov_custom .recipe .recipelist:after{content:"";clear: both;display: block;}	/*cf*/

#ov_custom .recipe .recipelist ul{
	display:block;
	width:48%;
	margin:0 0.5rem 1rem 1rem;
	float:left;
}



#ov_custom .recipe .recipelist ul li{
	font-size:1.4rem;
}




/*表示領域が670px以下の場合**/

@media screen and (max-width: 670px) {
/*↓↓*/

#ov_custom .recipe .recipelist ul{
	width:96%;float:none;margin:0 0.5rem 0rem 0.5rem;
}


}/*↑↑*/
/******************************************/







/*材料*/
#ov_custom .recipe .material{
	width:100%;margin:3rem auto;
	padding-bottom:2rem;
}
#ov_custom .recipe .material:after{content:"";clear: both;display: block;}	/*cf*/

#ov_custom .recipe .material figure{
	display:block;
	float:left;
	width:40%;
}
#ov_custom .recipe .material figure img{
	width:100%;
}
#ov_custom .recipe .material ul{
	display:block;
	float:right;
	width:55%;
	font-size:1.5rem;
	list-style-type:circle;
}
#ov_custom .recipe .material li{}




/*オーダーチーズへのリンク*/
#ov_custom .recipe .cheese{
	width:90%;margin:3rem auto;
	padding-top:1rem;
	padding-bottom:2rem;
	border-top:1px dashed #999999;
}
#ov_custom .recipe .cheese:after{content:"";clear: both;display: block;}	/*cf*/

#ov_custom .recipe .cheese figure{
	display:block;
	float:left;
	width:40%;
}
#ov_custom .recipe .cheese figure img{
	width:100%;
}
#ov_custom .recipe .cheese ul{
	display:block;
	float:right;
	width:55%;
	font-size:1.5rem;
	list-style-type:circle;
}
#ov_custom .recipe .cheese li{}
#ov_custom .recipe .cheese ul.buy{
	list-style-type: none;
	margin-top:30px;
}





/*手順*/
#ov_custom .recipe .procedure{
	width:100%;margin:3rem auto;
	counter-reset: li;
}
#ov_custom .recipe .procedure ul{
	list-style-type: none;

}


#ov_custom .recipe .procedure ul li:before {}

#ov_custom .recipe .procedure ul li{
	border-bottom:1px dashed #999999;
	padding-bottom:32px;
}

#ov_custom .recipe .procedure ul li:first-child{
	border-top:1px dashed #999999;
}



#ov_custom .recipe .procedure ul li:after{content:"";clear: both;display: block;}	/*cf*/


#ov_custom .recipe .procedure ul li h4:before{
	content: counter(li) ". " ;
	counter-increment:li;
}

#ov_custom .recipe .procedure ul li h4{
font-size: 2rem;
    font-weight: bold;
    color: #791772;
    margin: 20px 0;
}

#ov_custom .recipe .procedure ul li figure{
	display:block;
	float:left;
	width:35%;
	background-color:#cccccc;
	text-align:center;
}
#ov_custom .recipe .procedure ul li figure img{
	width:100%;
}
#ov_custom .recipe .procedure ul li figure figcaption{
	font-size:14px;
}


#ov_custom .recipe .procedure ul li p,
#ov_custom .recipe .procedure ul li p.advice{
	display:block;
	float:right;
	width:60%;
    margin: 0 auto 16px auto;
	font-size:1.5rem;
}
#ov_custom .recipe .procedure ul li p.advice{
	color:#AB50A6;
	font-weight:bold;
	margin-bottom:0;
}
#ov_custom .recipe .procedure ul li p.advice + p{
	margin-top:-0.2rem;
	padding:1rem;
	border-style:dotted;border-width:1px;
	border-color:#C499AA #893355 #C499AA #893355;
	border-radius: 8px;-moz-border-radius: 8px;-webkit-border-radius: 8px;

}


/*表示領域が670px以下の場合**/

@media screen and (max-width: 767px) {
/*↓↓*/
	
	#recommend_item .reco_data dl dt{
	font-size:16px;
}
#ov_custom .recipe .procedure ul li p,
#ov_custom .recipe .procedure ul li p.advice{
	font-size:13px !important;
}

}/*↑↑*/
/******************************************/












/*ジェニファーより*/
#ov_custom .recipe .fromJ{
	width:100%;margin:3rem auto;
	background-color:#eee;
	background-image:url(../Contents/ImagesPkg/recipe/jennifer_comment.gif);
	background-position:bottom right;
	background-repeat:no-repeat;
	background-size:300px 254px;
	min-height: 350px;
	height: auto !important;
	height: 274px;
}
#ov_custom .recipe .fromJ:after{content:"";clear: both;display: block;}	/*cf*/

#ov_custom .recipe .fromJ h3{
	background-color:white;
}


#ov_custom .recipe .fromJ p{
	display:block;
	float:left;
	margin:2rem 0 2rem 2%;
	width:70%;
	background-color:white;
	border:2rem solid white;
	border-radius:2rem;
}



/**ジェニファーさん,画面サイズに伴う調整**/

@media screen and (max-width: 1150px) {
	#ov_custom .recipe .fromJ p{width:75%;}
}
@media screen and (max-width: 1025px) {
	#ov_custom .recipe .fromJ p{width:80%;}
}
@media screen and (max-width: 800px) {
	#ov_custom .recipe .fromJ p{width:70%;}
}
@media screen and (max-width: 670px) {
	#ov_custom .recipe .fromJ p{width:60%;}
}
@media screen and (max-width: 500px) {
	#ov_custom .recipe .fromJ{background-image:none;padding-bottom:1rem;}
	#ov_custom .recipe .fromJ p{float:none;width:90%;margin:2rem auto}
	#ov_custom .recipe .fromJ p:after{content:"\A 《 ジェニファーより 》";white-space:pre;}


}
/******************************************/






