@charset "utf-8";
/* CSS Document */


/************************/
/*       共通設定       */
/************************/

.clearfix:after {
    content: "."; 
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
 
.clearfix {
    min-height: 1px;
}
 
* html .clearfix {
    height: 1px;
    /*¥*//*/
    height: auto;
    overflow: hidden;
    /**/
}
 
.both{
    clear:both;
}

h1,h2,h3,ul,li,dl,dt,dd {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

p {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

.sp_only {
	display: none;
}




#wineCommonHeader .contents {
    width: 1164px;
}




#contents_wrap {
	width: 100%;
	background-color: #FFF;
	overflow: hidden;
	font-size: 16px;
	color: #000;
	line-height: 165%;
	letter-spacing: 0.4px;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;	
}


#contents #head h1 {
	width: 100%;
	height: 461px;
	background: url(../img/main_pc.png) center top no-repeat;
}

#contents #head .aoc_banner {
	width:1032px;
	margin:37px auto 0;
}
#contents #head .aoc_banner a {
	width:100%;
	display:block;
}
#contents #head .aoc_banner img {
	vertical-align:bottom;
}

/* 20170530 add ▼
-----------------------------------------------*/
#contents .head_box {
	height: 150px;
	background: url(../img/main2_pc.png) center top no-repeat;
}
#contents .ec_btn {
	width: 100%;
	max-width: 1164px;
	margin: 10px auto 0;
	text-align: right;
	line-height: 0;
}
#contents #head .ec_btn {	min-width: 960px;}
#contents #product .ec_btn {
	margin: 15px auto 0;
	text-align: center;
}
#contents .ec_btn a {
	display: inline-block;
}
#contents .ec_btn a:hover {
	opacity: 0.7;
}
#contents .clearfix:after {
	content: " ";
	clear: both;
	display: block;
}
/* 20170530 add ▲
-----------------------------------------------*/


#contents #head #main_catch {
	width: 100%;
	height: 90px;
	padding-top: 60px;
	text-align: center;
	background: url(../img/main2_pc.png) center top no-repeat;
}

#contents #product h2 {
	width: 100%;
	height: 170px;
	background: url(../img/product_pc.png) center top no-repeat;	
}

#contents #product_list_wrap {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding-bottom: 20px;
	background: url(../img/product_bg_pc.png) center top no-repeat #EEECE4;
}

	#contents #product_list {
		width: 960px;
		margin: 0 auto;	
		padding-top: 200px;
	}

		#contents #product_list .product_each {
			width: 265px;
			float: left;
			margin-right: 30px;	
			position: relative;
			padding: 105px 15px 15px 20px;		
		}
		
		#contents #product_list .product_each:last-child {
			margin-right: 0;
		}
			
		#contents #product_list .product_each#product_each1 {
			background: url(../img/product_bg1.png) left top no-repeat #deceba;
		}
			
		#contents #product_list .product_each#product_each2 {
			background: url(../img/product_bg2.png) left top no-repeat #deceba;			
		}
					
		#contents #product_list .product_each#product_each3 {
			background: url(../img/product_bg3.png) left top no-repeat #deceba;			
		}					

		#contents #product_list .product_each h3 {
			margin-bottom: 8px;			
		}
			
		#contents #product_list .product_each .product_img {
			position: absolute;
			width: 89px;
			height: 307px;
			top: -200px;
			left: 106px;
		}

			#contents #product_list .product_each .product_img img {
				width: 100%;
				height: auto;
			}

		#contents #product_list .product_each .product_exp2 {
			margin: 15px 0;
			font-size: 14px;
			line-height: 150%;			
		}

		#contents #product_list .product_each .product_exp3 {
			font-size: 14px;			
		}





#contents #recipe h2 {
	width: 100%;
	height: 210px;
	background: url(../img/recipe_pc.png) center top no-repeat;	
}


#recipe #recipe_inner {
	width: 960px;
	margin: 0 auto;
}

	#recipe #recipe_inner #recipe_catch {
		margin: 20px 0 30px 0;
		text-align: center;
	}

	#recipe #recipe_inner #recipe_img_lg {
		width: 167px;
		height: 146px;
		margin: 0 auto;	
	}
	
		#recipe #recipe_inner #recipe_img_lg img {
			width: 100%;
			height: auto;
		}	
	
	#recipe #recipe_inner #recipe_list {
		width: 960px;
		height: 610px;
		margin: 20px auto 40px auto;
	}
	
	#recipe #recipe_inner .recipe_each {
		width: 320px;
		height: 610px;
		margin-right: 10px;
		float: left;
		position: relative;
	}
	
	#recipe #recipe_inner .recipe_each:first-child {	
		margin-left: -20px;	
	}
		
	#recipe #recipe_inner .recipe_each:last-child {	
		margin-right: 0;	
	}
	
	#recipe #recipe_inner .recipe_each h3 {	
		width: 320px;
		height: 474px;
	}
	
		#recipe #recipe_inner .recipe_each h3 img {
			width: 100%;
			height: auto;
		}
		
	#recipe #recipe_inner .recipe_exp {
		margin: 20px 0 0 18px;		
	}
	
	#recipe #recipe_inner .btn {
		position: absolute;
		width: 162px;
		height: 51px;
		top: 410px;
		left: 89px;
	}
	
		#recipe #recipe_inner .btn img {
			width: 100%;
			height: auto;
		}
	
	#recipe #recipe_inner #recipe_other {
		width: 310px;
		margin: 0 0 85px 650px;
	}
	
	#recipe #recipe_inner #recipe_other #other_btn {
		width: 310px;
		height: 75px;
	}
	
		#recipe #recipe_inner #recipe_other #other_btn img {
			width: 100%;
			height: auto;
		}
	
		#recipe #recipe_inner #recipe_other #other_btn:hover img {
			opacity: 0.7;
		}

	
		#recipe #recipe_inner #recipe_other #other_exp {
			font-size: 12px;
			text-align: center;
		}





#dialog {
  position:absolute;
  left:50%;
  margin:0px 0px 0px -480px;
  width:960px;
  height:auto;
  background-color:#FFF;
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  z-index:1000;
  display:none;
}

#dialog *:focus {
  outline:none;
}

#overlay {
  position:fixed !important;
  position:absolute;
  z-index:999;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:rgba(0,0,0,0.7);
  display:none;
}



	#dialog #detail_recipe_list #detail_recipe_1 {
		display: none;
	}

	#dialog #detail_recipe_list #detail_recipe_2 {
		display: none;
	}
	
	#dialog #detail_recipe_list #detail_recipe_3 {
		display: none;
	}	
	
		#dialog #detail_recipe_list .detail_recipe_each	{
			width: 960px;
			position: relative;
			padding-top: 75px;

		}
	
			#dialog #detail_recipe_list .detail_recipe_each h3	{
				width: 750px;
				height: 40px;
				margin: 0 auto 30px auto;			
			}
			
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_inner {
				width: 776px;
				height: 359px;
				margin: 0 0 30px 85px; 			
			}
		
				#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_img {
					width: 490px;
					height: 358px;
					margin-right: 9px;
					float: left;			
				}
	
				#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_ingredients {
					width: 277px;
					height: 351px;
					background: url(../img/modal/ingredients_bg_pc.png) left top no-repeat;
					float: left;
					font-size: 13px;
					letter-spacing: 0;
					margin-top: 7px;			
				}
	
				#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_ingredients dt {
					color: #b17122;
					border-bottom: 1px solid #bebdb6;
					padding: 38px 0 4px 15px;
				}

				#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_ingredients dd {
					color: #000;
					border-bottom: 1px solid #bebdb6;
					padding: 4px 0 4px 15px;
				}

				#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_ingredients dd span.quantity {
					color: #b17122;
				}	

		
		#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_howto {
			width: 960px;
			margin-bottom: 70px;
			font-size: 14px;
		}
		
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_howto dt {
				width: 960px;
				height: 50px;
				margin-bottom: 30px;			
			}
	
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_howto dd {
				margin: 0 0 15px 100px;
				padding-left: 40px;
				width: 720px;
			}

			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_howto dd.detail_recipe_howto_1 {
				background: url(../img/modal/howto_1.png) left top no-repeat;
				background-size: 28.5px 25px;			
			}
				
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_howto dd.detail_recipe_howto_2 {
				background: url(../img/modal/howto_2.png) left top no-repeat;
				background-size: 28.5px 25px;			
			}				
				
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_howto dd.detail_recipe_howto_3 {
				background: url(../img/modal/howto_3.png) left top no-repeat;
				background-size: 28.5px 25px;			
			}
			
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_howto dd.detail_recipe_howto_4 {
				background: url(../img/modal/howto_4.png) left top no-repeat;
				background-size: 28.5px 25px;			
			}			
				
		#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_close {
			position: absolute;
			width: 50px;
			height: 55px;
			top: 15px;
			right: 20px;			
		}
	
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_close:hover img {	
				opacity: 0.7;			
			}