@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;
}

.pc_only {
	display: none;
}

img {
	vertical-align: bottom;
}


#contents_wrap {
	width: 100%;
	background-color: #FFF;
	overflow: hidden;
	font-size: 20px;
	color: #000;
	line-height: 170%;
	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%;
}

	#contents #head h1 img {
		width: 100%;
		height: auto;
	}

#contents #head .aoc_banner {
	width:93.75%;
	margin:3.9% auto;
}
#contents #head .aoc_banner a {
	display:block;
	width:100%;
}
	#contents #head .aoc_banner a img {
		width:100%;
	}







/* 20170530 add ▼
-----------------------------------------------*/
#contents .ec_btn {
	width: 74.375%;
	margin: 3% auto;
}
#contents .ec_btn img {	width: 100%;}
#contents .ec_btn a:hover {	opacity: 0.7;}

#contents #product .ec_btn {	margin: 4% auto 0;}
#contents .clearfix:after {
	content: " ";
	clear: both;
	display: block;
}
/* 20170530 add ▲
-----------------------------------------------*/



#contents #head #main_catch {
	width: 90%;
	margin: 7% 4% 2% 6%;
}

#contents #head #main2_sp {
	width: 100%;
}

	#contents #head #main2_sp img {
		width: 100%;
		height: auto;
	}


#contents #product h2 {
	width: 100%;
}

	#contents #product h2 img {
		width: 100%;
		height: auto;
	}



#contents #product_list {
	width: 100%;
	margin: 0 auto 9.4% auto;
}

		#contents #product_list .product_each {
			width: 92%;
			padding: 4.7% 4%;
			background-color: #e9dece;
			overflow: hidden;	
		}
			
		#contents #product_list .product_each#product_each1 {
			border-top: 20px solid #a44f2f;
		}
			
		#contents #product_list .product_each#product_each2 {
			border-top: 20px solid #8ea46e;
		}
					
		#contents #product_list .product_each#product_each3 {
			border-top: 20px solid #3e4c68;
		}					

		#contents #product_list .product_each .product_img {
			width: 22%;
			float: left;
		}
		
			#contents #product_list .product_each .product_img img {
				width: 100%;
				float: auto;
			}
			
		#contents #product_list .product_each .product_each_wrap {
			width: 74%;
			margin-left: 4%;
			float: left;		
		}

		#contents #product_list .product_each h3 {
			margin-bottom: 3%;			
		}

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

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



#contents #recipe h2 {
	width: 100%;
}

	#contents #recipe h2 img {
		width: 100%;
		height: auto;
	}

#recipe #recipe_catch {
	width: 90%;
	margin: 5% 4% 5% 6%;
}

#recipe #recipe_img_lg {
	width: 42.5%;
	margin: 0 auto 5% auto;
}
	
	#recipe #recipe_img_lg img {
		width: 100%;
		height: auto;
	}	



#recipe #recipe_list {
	width: 100%;
	margin-bottom: 10%;
}
	
	#recipe .recipe_each {
		width: 94%;
		margin: 0 4% 4% 2%;
		position: relative;
	}
	
	#recipe .recipe_each h3 {	
		width: 100%;
	}
	
		#recipe .recipe_each h3 img {
			width: 100%;
			height: auto;
		}
		
	#recipe .recipe_exp {
		margin: 4% 3% 0 9%;		
	}

	
	#recipe .btn {
		position: absolute;
		width: 46%;
		left: 29%;
	}
	
		#recipe .btn img {
			width: 100%;
			height: auto;
		}


	#recipe #recipe_other {
		width: 96%;
		margin: 0 auto;
	}
	
	#recipe #recipe_other #other_btn {
		width: 100%;
	}
	
		#recipe #recipe_other #other_btn img {
			width: 100%;
			height: auto;
		}
	
		#recipe #recipe_other #other_btn:hover img {
			opacity: 0.7;
		}
	
		#recipe #recipe_other #other_exp {
			font-size: 14px;
			text-align: center;
		}
	
	
#contents #button {
	width: 100%;
	padding: 13% 0 8% 0;
}

	#contents #top {
		width: 53.9%;
		margin: 0 auto;
	}
	
		#contents #top img {
			width: 100%;
			height: auto;
		}
					
	#contents #winesquare {
		width: 72.6%;
		margin: 7.8% auto 0 auto;
	}	
		#contents #winesquare img {
			width: 100%;
			height: auto;
		}
							
	
	
#dialog {
  position:absolute;
  width: 93.8%;
  left: 3.1%;
  padding-top: 5%;
  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: 100%;
			padding-bottom: 10%;

		}

			#dialog #detail_recipe_list .detail_recipe_each_btn {
				width: 90%;
				margin: 0 auto;
				overflow: hidden;				
			}
			
			#dialog #detail_recipe_list .detail_recipe_each_btn li {
				width: 12%;				
			}

				#dialog #detail_recipe_list .detail_recipe_each_btn li img {
					width: 100%;
					height: auto;			
				}
				
				#dialog #detail_recipe_list .detail_recipe_each_btn li.detail_recipe_prev {
					float: left;
				}
				
				#dialog #detail_recipe_list .detail_recipe_each_btn li.detail_recipe_next {
					float: right;
				}				
				
	
			#dialog #detail_recipe_list .detail_recipe_each h3	{
				width: 90%;
				margin: 5% auto 3% auto;			
			}
			
				#dialog #detail_recipe_list .detail_recipe_each h3 img {
					width: 100%;
					height: auto;				
				}
		
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_img {
				width: 100%;
			}
				
		
				#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_img img {
					width: 100%;
					height: auto;
				}				

	
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_ingredients {
				width: 100%;
				background-color: #eeece4;
				margin-top: 3%;			
			}
	
				#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_ingredients dt {
					color: #b17122;
					border-bottom: 1px solid #be8f5c;
					padding: 4px 0 4px 15px;
				}

				#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_ingredients dd {
					color: #000;
					border-bottom: 1px solid #be8f5c;
					padding: 4px 5px 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: 100%;
			margin-bottom: 15%;

		}
		
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_howto dt {
				width: 100%;
				margin: 6% 0;		
			}

				#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_howto dt img {
					width: 100%;
					height: auto;	
				}
	
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_howto dd {
				margin: 0 5% 2.5% 5%;
				padding-left: 40px;
				line-height: 150%;
			}

			#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: 6.6% auto;			
			}
				
			#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:  6.6% auto;			
			}				
				
			#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: 6.6% auto;			
			}
			
			#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:  6.6% auto;			
			}			
				
		#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_close {
			width: 40%;
			margin: 0 auto;
		}
	
			#dialog #detail_recipe_list .detail_recipe_each .detail_recipe_close img {
				width: 100%;
				height: auto;
			}	
	
	
	
	

@media screen and (max-width: 450px) {
	
#contents_wrap {
	font-size: 19px;
}

#contents #product_list .product_each .product_exp2 {
	font-size: 15px;
}

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

#recipe #recipe_other #other_exp {
	font-size: 13px;
}

}

@media screen and (max-width: 400px) {
	
#contents_wrap {
	font-size: 18px;
}

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

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

#recipe #recipe_other #other_exp {
	font-size: 12px;
}

}

@media screen and (max-width: 340px) {
	
#contents_wrap {
	font-size: 17px;
}

#contents #product_list .product_each .product_exp2 {
	font-size: 13px;
}

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

#recipe #recipe_other #other_exp {
	font-size: 11px;
}

}