@charset "utf-8";

/***************************************************
PC用および共通設定 974px～
***************************************************/
li.last{
	margin-right:0 !important;
}
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.clear{
	clear:both;
}


#container{
	text-align:center;
	background:#FBF3DD !important;
	width:100%;
}

#wrp_container{
	width:974px;
	margin:0 auto;
	background-color:#FFF;
	padding:0 0 45px 5px;
	background:url("/enjoy/mariage/images/bg_side_mariage.jpg") repeat-y #FFFFFF;

}
/*左コンテンツ*/
#cnt_left{
	width:265px;
	float:left;
	height:100%;
}

#menu_left_mariage ul li a:hover img{
	opacity:1;
	-ms-filter: "alpha(opacity=100)";

} 

/*SP用*/
#img_mariage_sp,#menu_osake_sp,#tl_cnt_right_sp,#tl_recipe_sp{
	display:none;
}

/*右コンテンツ*/
#cnt_right{
	width:695px;
	float:left;
	padding-top:30px;
	text-align:left;
	color:#000;
}
#btn_print{
	text-align:right;
	margin:5px 5px 0 0;
}
#btn_print img{
	width:210px;}

#tl_recipe_pc{
	margin:10px 0 20px 0;}
#icon_cal img{
	width:140px;
	margin:0 0 10px 0;}
#info_main_cnt{
	font-size:15px;
	line-height:1.4;
	word-break:break-all;
 }

/*右コンテンツ内　左*/
#cnt_l{
	width:400px;
	float:left;
}
/*料理写真*/
#img_main_cnt{
	margin:0 0 20px 0;
}
#img_main_cnt img{
	width:400px;
	border-radius: 10px;        
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  
}
/*材料*/
#tl_material{
	border-bottom:1px solid #9FC238;
	margin:30px 0 10px 0;
}
#tl_material01{
	float:left;}
#tl_material02{
	float:right;
	text-align:right;}
#tl_material01 img,#tl_material02 img{
	width:130px;}
#info_material{
	border-bottom:1px solid #9FC238;
	padding-bottom:20px;}
.materialLow{
	border-bottom:1px dotted #999;
	margin:0 10px;
	padding:5px 10px;
	overflow:hidden;}
.materialLow .name a{
	color:#2640a3;
}
.name{
	float:left;
	display: inline;}
.quantity{
	float:right;
	display: inline;
}

/*右コンテンツ内　右*/
/*お酒CMS*/
#cnt_r{
	width:290px;
	float:left;
}

/*作り方*/
.howto{
	margin:40px 10px 40px 0;
	padding:0 0 0 0;
	border-bottom:1px solid #9FC238;}
.tl_howto{
	border-bottom:1px solid #9FC238;
	margin-bottom:20px;}
.tl_howto img{
	width:310px;}
.cook{
	padding:0 15px;
	width:690px;
}
.howto .last .info_cook{
	border-bottom:1px dotted #999;
	padding:15px 0 25px;}
.step img{
	margin:10px;
	width:50px;
}
.step{
	float:left;
	margin-right:20px;}
.sub_img_cook{
	width:150px;
	margin:0 10px 0 0;
	float:left;
}
.info_cook{
	float:left;
	width:570px;
	padding:15px 0 0 0;
	margin-bottom:20px;
	border-top:1px dotted #999;}
.desc_cook a{
	color:#2640a3;
}

/*メモ*/
#memo{
	padding:15px 20px;
	margin-right:10px;
	border:1px solid #9FC238;
	border-radius: 10px;        
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  }

/*材料メモ*/
#tl_memo img{
	width:140px;
}
#material_memo{
	padding:15px 20px;
	margin-right:10px;
	border:1px solid #9FC238;
	border-radius: 10px;        
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  }
#img_memo{
	float:left;
	margin-right:15px;
}
#txt_memo img{
	width:200px;
}
#txt_memo{
	width:500px;
	border-bottom:1px solid #000;
	float:left;
	margin-bottom:10px;
}

/**
 * JSONから自動生成される「合わせるのはこのお酒」
 */
#productInfoListBox {
  margin: 0 auto 0 15px;
	padding: 0;
	border:1px solid #9FC238;
	border-radius: 10px;        
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */
  position: relative;
  overflow: hidden;
}

#productInfoListTitle {
  margin: 3% auto 0 auto;
  padding: 0;
  position: relative;
  overflow: hidden;
  width: 257px;
  height: 69px;
	background:url("/enjoy/mariage/images/tl_osake.jpg") no-repeat;
  background-position: center;
}

ul.productInfoList {
  margin: 0 auto;
	padding: 5px;
  position: relative;
  overflow: hidden;
}

ul.productInfoList li {
	border: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 100%;
  background: none;
}

ul.productInfoList li span.company {
  display: block;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  font-size: 1em;
}

ul.productInfoList li span.name {
  display: block;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  font-size: 1.1em;
}
#cnt_forsp{
	display:none;
}

/***************************************************
タブレット用 768px～973px
***************************************************/
@media only screen and (max-width: 973px){

#cnt_r{
	display:none;
}
#cnt_forsp{
	display:block;
}


#wrp_container{
	width:100%;
	background:#FFF;
	padding:0 0 5% 0.5%;
	background:url("/enjoy/mariage/images/bg_side_mariage.jpg") repeat-y #FFFFFF;
	background-size:contain;

}
/*左コンテンツ*/
#cnt_left{
	width:27%;
	float:left;
}
#box_img_mariage{
	width: 100%;}


	
/*右コンテンツ*/
#cnt_right{
	width:70%;
	float:left;
	padding-top:30px;
	text-align:left;
	color:#000;
}
#btn_print{/*印刷ボタン*/
	display:none;}
#tl_recipe_pc{
	margin:3% 0 3% 0;}
#icon_cal{
	margin:0 10% 2% 10%;
	width:80%;}
#icon_cal img{
	width:30%;
	margin:0;}


#cnt_l{
	width:100%;}

/*料理写真*/
#img_main_cnt{
	margin:0 10% 2% 10%;
}
#img_main_cnt img{
	width:100%;
	border-radius: 10px;        
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  
}

/*料理テキスト*/
#info_main_cnt{
	padding:0 10% 2% 10%;}

/*材料*/
#tl_material{
	border-bottom:1px solid #9FC238;
	margin:3% 0 1% 0;}
#tl_material01{
	float:left;}
#tl_material02{
	float:right;}
#tl_material01 img,#tl_material02 img{
	width:85%;}
#info_material{
	border-bottom:1px solid #9FC238;
	padding-bottom:2%;}
.materialLow{
	border-bottom:1px dotted #999;
	margin:0 2%;
	padding:1%;
	overflow:hidden;}
/*作り方*/
.howto{
	margin:8% 0 8% 0;
	border-bottom:1px solid #9FC238;}
.tl_howto img{
	width:65%;}
.cook{
	padding:0 1.5%;
	width:100%;
	margin-bottom:1%;}
.howto .last .info_cook{
	border-bottom:1px dotted #999;
	padding:2% 0 4% 0;}
.step img{
	margin:5%;
	width:75%;
}
.step{
	float:left;
	margin-right:2%;}
.info_cook{
	float:left;
	width:80%;
	padding:1.5% 0 0 0;
	margin-bottom:2%;
	border-top:1px dotted #999;
	line-height:1.9;}
/*メモ*/
#memo{
	padding:2% 3%;
	margin-right:1%;}

/*材料メモ*/
#tl_memo img{
	width:20%;
}
#material_memo{
	padding:2% 3%;
	margin-right:5%;
	border:1px solid #9FC238;
	border-radius: 10px;        
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  }
#img_memo{
	float:left;
	margin-right:4%;
}
#txt_memo img{
	width:60%;
}
#txt_memo{
	width:70%;
	border-bottom:1px solid #000;
	float:left;
	margin-bottom:10px;
}
#desc_memo{
	width:70%;
	float:left;}

/*右コンテンツ内　右*/
/*お酒CMS*/
#cnt_r{
	width: 100%;
	float:left;
}


/**
 * JSONから自動生成される「合わせるのはこのお酒」
 */
#productInfoListBox {
  margin: 7% auto 0 auto;
	padding: 0;
  width: 100%;
  height: 100%;
}

#productInfoListTitle {
  margin: 3% auto 0 auto;
  padding-top: 4.5%;
  position: relative;
  overflow: hidden;
  width: 62.2%;
  height: 10%;
	background:url("/enjoy/mariage/images/tl_osake_long.jpg") no-repeat;
  background-position: center;
  background-size: 100%;
}

ul.productInfoList {
  margin: 0 auto;
	padding: 0.5%;
  position: relative;
  overflow: hidden;
}

ul.productInfoList li {
	border: none;
  margin: 0 auto 0 1.7%;
  padding: 0;
  position: relative;
  width: 95%;
  float: left;
}

ul.productInfoList li {
  display: block;
  width: 100%;
  float: left;
  background: none;
}

ul.productInfoList li a {
  width: 90%;
}

ul.productInfoList li a img.productImg {
  margin: 0;
  padding: 0;
  width: 40%;
  float: left;
  border-bottom: none;
}

ul.productInfoList li a span.company {
  display: block;
  margin: 5% auto 2%;
  padding: 0 3%;
  text-align: left;
  width: 50%;
  float: left;
  font-size: 1.4em;
}

ul.productInfoList li a span.name {
  display: block;
  margin: 2% auto;
  padding: 0 3%;
  text-align: left;
  width: 50%;
  float: left;
  font-size: 1.6em;
}

}
/***************************************************
スマートフォン用 ～767px
***************************************************/
@media only screen and (max-width: 767px){

#container{
	text-align:center;
	background:#FFFFFF !important;
	width:100%;
}
#wrp_container{
	width:100%;
	background:#FFF;
	padding:0 3% 5% 3%;

}
#cnt_right{
	width:100%;
	padding:0;
	text-align:left;
	color:#000;}


#cnt_left{
	display:none;}
#img_mariage_sp,#menu_osake_sp{
	display:block;}
#tl_cnt_right_sp,#tl_recipe_sp{
	display:block;}
#tl_cnt_right_pc,#tl_recipe_pc{
	display:none;}

ul.menu_items{
	margin-bottom:5%;
}

/*お酒のメニュー*/
#menu_osake_sp{
	margin:5% 0 0 0;}
/*タイトル*/
#tl_cnt_right_sp{
	margin:2% 0 0 0;
	text-align:center;}
#tl_cnt_right_sp img{
	width:98%;}
#tl_recipe_sp{
	margin:7% 0 0 0;}

/*カロリー*/
#icon_cal{
	margin:3% 0 2% 0%;
	width:100%;}
#icon_cal img{
	width:35%;
	margin:0;}

/*料理写真*/
#img_main_cnt{
	margin:0 0 2% 0;
}
#img_main_cnt img{
	width:100%;
	border-radius: 10px;        
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  
}
/*料理テキスト*/
#info_main_cnt{
	padding:0 0 2% 0;}

/*材料*/
#tl_material01,#tl_material02{
	width:35%;}
#tl_material01 img,#tl_material02 img{
	width:100%;}
#info_material{
	border-bottom:1px solid #9FC238;
	padding-bottom:5%;}
.materialLow{
	border-bottom:1px dashed #000;
	margin:0 2%;
	padding:1%;
	overflow:hidden;}
/*作り方*/
.howto{
	margin:10% 0;
	border-bottom:1px solid #9FC238;}
.tl_howto{
	margin-bottom:4%;}
.tl_howto img{
	width:80%;}
.cook{ 
	padding:0 1.5%;
	width:100%;
	margin-bottom:1%;	
}
.howto .last .info_cook{
	border-bottom:1px dashed #000000;
	padding:4% 0 6% 0;}
.step img{
	width:70%;
	margin:10%;
}
.step{
	float:left;
	margin-right:2%;
	width:20%;}
.info_cook{
	float:left;
	width:77%;
	padding:4% 0 0 0;
	margin-bottom:2%;
	border-top:1px dashed #000000;}

/*材料メモ*/
#tl_memo img{
	width:40%;
}
#material_memo{
	padding:3%;
	margin-right:0;
	border:1px solid #9FC238;
	border-radius: 10px;        
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  }
#img_memo{
	text-align:center;
	margin:0 0 4% 0;
	float:none;
}
#txt_memo img{
	width:100%;
}
#txt_memo{
	width:60%;
	border-bottom:1px solid #000;
	float:none;
	margin-bottom:10px;
}
#desc_memo{
	width:100%;
	float:none;}



#productInfoListTitle {
  margin: 2.3% auto 0 auto;
  padding-top: 4.5%;
  position: relative;
  overflow: hidden;
  width: 79%;
  height: 10%;
	background:url("/enjoy/mariage/images/tl_osake_long.jpg") no-repeat;
  background-position: center;
  background-size: 100%;
}

ul.productInfoList li a img.productImg {
  margin: 0;
  padding: 0;
  width: 30%;
  float: left;
  border-bottom: none;
}

ul.productInfoList li a span.company {
  display: block;
  margin: 5% auto 2%;
  padding: 0 3%;
  text-align: left;
  width: 65%;
  float: left;
  font-size: 1.2em;
}

ul.productInfoList li a span.name {
  display: block;
  margin: 2% auto;
  padding: 0 3%;
  text-align: left;
  width: 65%;
  float: left;
  font-size: 1.4em;
}

}