@charset "utf-8";

/***************************************************
PC用および共通設定 974px～
***************************************************/

.clear{clear:both;}
.clear-pc{clear:both;}
.pc{display:block;}
.sp{display:none;}
.pc-br{display:inline-block;}
.sp-br{display:none;}
.bold{font-weight:bold;}
.f115{font-size:115%;}
.f160{font-size:140%;}
.red{color:#b83535;}
.green{color:#02867a;}
.brown{color:#b2a55b;}
.black{color:#333;}
.lgreen{color:#8ab526;}
.text_left{text-align:left;}
p{margin-top:0;}

.mt5{margin-top:50px !important;}
.mt2{margin-top:20px !important;}
.mb3{margin-bottom:30px !important;}



.cnt_left{float:left;}
.cnt_right{float:left;}


#container{
	background:#FFF;
	width:100%;
}
.cnt01{
	width:974px;
	margin:auto;
	text-align:center;
}

#container ol {
	counter-reset: li; /*olのリストの数字をリセット*/
}

#container ol > li {
	list-style: none;
	position: relative;
	padding-left: 2.5em; 
}

#container ol > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1em;
	background: #000; 
	color: #ffffff;
	border-radius: 15%; 
	text-align: center;
	width: 1.3em; 
	height: 1.3em; 
	position: absolute; 
	left: 0em; 
	top: 0px; 
	line-height: 1.4;
}
/*ホットワインとは*/
#about_wine .cnt_left{
	margin:0 5%;
	width:33%;
}
#about_wine .cnt_left img{
	width:100%;
}
#about_wine .cnt_right{
	width:57%;
}


/*おすすめ*/
.cnt_recommend{
	margin:5% 0 0 0;
	padding:3% 0;
	background:url("/enjoy/drink/images/hotwine/img_recommend_pc.png") center bottom;
	height:547px;
	position:relative;
}
#btn_info{
	position:absolute;
	top:80%;
	left:11%;
	width:26%;
}
#btn_info img{
	width:100%;
}




/*スパイス*/
#spicefruit .cnt_left{
	margin:0 2% 0 0;
	width:58%;
}
#spicefruit .cnt_left img{
	width:100%;
}

#spicefruit .cnt_right{
	width:40%;
}
.bg_spicefruit{
	background:url("/enjoy/drink/images/hotwine/img_back_spicefruit.jpg") center bottom no-repeat;
	height:370px;
}

/*作り方*/
.cnt_ingredient{
	background:#fdf8db;
	width:80%;
	border:3px solid #306e0a; 
	padding:2% 0;
	border-radius:15px;
	margin:0 auto 3%;

}

/*赤ワインでつくるホットワイン*/
.bg_red-base-hotwine{
	background:url("/enjoy/drink/images/hotwine/red-base-hotwine.jpg") repeat;
	border-radius:15px;
	box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
	padding:5%;
}
.bg_red-base-hotwine .cnt_left{
	width:48%;
	margin-right:4%;
}
.bg_red-base-hotwine .cnt_left img{
	width:100%;
}
.bg_red-base-hotwine .cnt_right{
	width:48%;
}
.cnt_point{
	width:100%;
	padding:2% 3%;
	background:#FFF;
	border-radius:15px;
}
.cnt_point_icon,.cnt_point_text{
	display:table-cell;
	vertical-align:middle;
}
.cnt_point_text{
	padding-left:3%;
	text-align:left;
	width:100%;
}

/*白ワインでつくるホットワイン*/
.bg_white-base-hotwine{
	background:url("/enjoy/drink/images/hotwine/white-base-hotwine.jpg") repeat;
	border-radius:15px;
	box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
	padding:5%;
}
.bg_white-base-hotwine .cnt_left{
	width:48%;
	margin-right:4%;
}
.bg_white-base-hotwine .cnt_left img{
	width:100%;
}
.bg_white-base-hotwine .cnt_right{
	width:48%;
}



/*斬新アレンジ*/

/*yellow*/
.bg_arrange.orange{
	width:100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+28,ffff00+30,ffff00+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 28%, #ffff00 30%, #ffff00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 28%,#ffff00 30%,#ffff00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 28%,#ffff00 30%,#ffff00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffff00',GradientType=0 ); /* IE6-9 */
}
.bg_arrange h2{
	width:974px;
	margin:auto;
	text-align:center;
}

.bg_cnt_arrange.orange{
	width:100%;
	background:#ffffd9;
}
.box_cnt_arrange{
	width:974px;
	margin:auto;
	text-align:center;
	padding:3% 5%;

}
.box_cnt_arrange .cnt_left{
	width:45%;
	margin-right:5%;
}
.box_cnt_arrange .cnt_right{
	width:50%;
}

/*brown*/
.bg_arrange.brown{
	width:100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+28,ffff00+30,ffff00+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 28%, #b2a55b 30%, #b2a55b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 28%,#b2a55b 30%,#b2a55b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 28%,#b2a55b 30%,#b2a55b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b2a55b',GradientType=0 ); /* IE6-9 */
}
.bg_cnt_arrange.brown{
	width:100%;
	background:#f4f2e7;
}



/*ネギ、アウトドア*/
.bg_white{
	padding:0 5%;
}
.bg_white .cnt_left{
	width:48%;
	margin-right:4%;
}
.bg_white .cnt_left img{
	width:100%;
}
.bg_white .cnt_right{
	width:48%;
	height:300px;
}
.bg_white.negi .cnt_right{
	background:url("/enjoy/drink/images/hotwine/img_back_negi.jpg") no-repeat center bottom;

	
}
.cnt_point_green{
	width:100%;
	padding:2% 3%;
	background:#8ab526;
	color:#FFF;
	border-radius:15px;
}
.cnt_point_red{
	width:100%;
	padding:2% 3%;
	background:#ffeded ;
	color:#a72944;
	border:2px solid #a72944;
	border-radius:15px;
	
}
.cnt_point_icon,.cnt_point_text{
	display:table-cell;
	vertical-align:middle;
}
.cnt_point_text{
	padding-left:3%;
	text-align:left;
	width:89%;
}
.cnt_point_icon{
	text-align:left;
	width:8%;
}
.cnt_point_icon img{
	width:100%;
}
/*関連するページ*/

.cnt_recommend_page{
	margin:5% auto;
}

.tl_recommend{
	width:100%;
	background:#b73353;
	padding:3px 0;
	color:#FFF;
	font-size:115%;
	font-weight:bold;
	margin:5% auto 2%;
}
ul.btn_recommend{
	width:94%;
	margin:auto;
}
ul.btn_recommend li{
	float:left;
	width:30%;
	margin:0 3% 0 0;
	text-align:left;
}
ul.btn_recommend li p{
	margin-top:2%;
}


/***************************************************
タブレット用 768px～973px
***************************************************/

@media only screen and (max-width: 973px){
.mt5{margin-top:5% !important;}
.mt2{margin-top:2% !important;}
.mb3{margin-bottom:3% !important;}


.cnt01{
	width:100%;
}

/*斬新アレンジ*/
.bg_arrange h2{
	width:100%;
}
.box_cnt_arrange{
	width:100%;
}



 





}
/***************************************************
スマートフォン用 ～767px
***************************************************/
@media only screen and (max-width: 767px){
.pc{display:none;}
.sp{display:block;}
.pc-br{display:none;}
.sp-br{display:inline-block;}
.clear-sp{clear:both;}
.cnt_left{float:none;}
.cnt_right{float:none;}



/*ホットワインとは*/
#about_wine .cnt_left{
	margin:3% auto;
	width:50%;
}
#about_wine .cnt_left img{
	width:100%;
}
#about_wine .cnt_right{
	width:98%;
	margin:auto;
}
/*おすすめ*/
#wrp_recommend{
	margin-top:5%;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 75% 0 0;
}
.cnt_recommend{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin:0;
	padding:5% 0 0 0;

	background:url("/enjoy/drink/images/hotwine/img_recommend_sp.png") center bottom no-repeat #ffebbe;
	background-size:contain;

}
#btn_info{
	position:absolute;
	top:80%;
	left:11%;
	width:30%;
}



/*スパイス*/
#spicefruit .cnt_left{
	margin:2% auto;
	width:80%;
}
#spicefruit .cnt_left img{
	width:100%;
}

#spicefruit .cnt_right{
	width:98%;
	margin:auto;
}
.bg_spicefruit{
	background:url("/enjoy/drink/images/hotwine/img_back_spicefruit.jpg") center bottom no-repeat;
	background-size:40% auto;
	height:100%;
}

/*作り方*/
.cnt_ingredient{
	width:96%;
}
.cnt_ingredient img{
	width:50%;
}



/*赤ワインでつくるホットワイン*/
.bg_red-base-hotwine{
	background:url("/enjoy/drink/images/hotwine/red-base-hotwine.jpg") repeat;
	border-radius:0;
	box-shadow: none;
	padding:5% 0;
}
.bg_red-base-hotwine .cnt_left{
	width:80%;
	margin:3% auto;
}
.bg_red-base-hotwine .cnt_left img{
	width:100%;
}
.bg_red-base-hotwine .cnt_right{
	width:90%;
	margin:3% auto;
}
.cnt_point{
	width:96%;
	padding:2% 3%;
	background:#FFF;
	border-radius:15px;
	margin-left:auto;
	margin-right:auto;
}
.cnt_point_icon,.cnt_point_text{
	display:table-cell;
	vertical-align:middle;
}
.cnt_point_text{
	text-align:left;
	width:80%;
}
.cnt_point_icon{
	width:17%;
}
.cnt_point_icon img{
	width:100%;
}
.sp_point_icon{
	display:block;
	width:17%;
	float:left;
}
.sp_point_text{
	display:block;
	width:80%;
	padding-left:3%;
	float:left;
	margin-top:3%;
}

/*白ワインでつくるホットワイン*/
.bg_white-base-hotwine{
	background:url("/enjoy/drink/images/hotwine/white-base-hotwine.jpg") repeat;
	border-radius:0;
	box-shadow: none;
	padding:5% 0;
}
.bg_white-base-hotwine .cnt_left{
	width:80%;
	margin:3% auto;
}
.bg_white-base-hotwine .cnt_left img{
	width:100%;
}
.bg_white-base-hotwine .cnt_right{
	width:90%;
	margin:3% auto;
}

/*斬新アレンジ*/

.box_cnt_arrange .cnt_left{
	float:left;
}
.box_cnt_arrange .cnt_right{
	float:left;
}

/*ネギ、アウトドア*/
.bg_white{
	width:100%;
	padding:0;
}
.bg_white .cnt_left{
	width:60%;
	margin:2% auto 3%;
}
.bg_white .cnt_left img{
	width:100%;
}
.bg_white .cnt_right{
	width:94%;
	margin:auto;
	height:100%;	
}
.bg_white.negi .cnt_right{
	background:url("/enjoy/drink/images/hotwine/img_back_negi.jpg") no-repeat center bottom;
	background-size:60% auto;
	
}
.cnt_point_green{
	width:96%;
	margin:auto;
	padding:2% 3%;
	background:#8ab526;
	color:#FFF;
	border-radius:15px;
}
.cnt_point_red{
	width:96%;
	margin:auto;
	padding:2% 3%;
	background:#ffeded ;
	color:#a72944;
	border:2px solid #a72944;
	border-radius:15px;
	
}
/*関連するページ*/

.cnt_recommend_page{
	margin:7% auto;
}

.tl_recommend{
	width:98%;
	background:#b73353;
	padding:3px 0;
	color:#FFF;
	font-size:115%;
	font-weight:bold;
	margin:5% auto 2%;
}
ul.btn_recommend{
	width:94%;
	margin:auto;
}
ul.btn_recommend li{
	float:left;
	width:47%;
	margin:0 3% 0 0;
	text-align:left;
}
ul.btn_recommend li p{
	margin-top:2%;
}

}