@charset "utf-8";

/* ===================================================================
CSS information
 file name  :  index.css
 style info :  /wineclub/index.html
=================================================================== */
#wineclub_index{
}

/*** top_area ***/
#top_area{
}

#top_area img{
	width:100%;
	height:inherit;
}


/*** list_area ***/
#list_area{
	width:1000px;
	margin:35px auto 10px;
}

#list_area .title_box{
	overflow:hidden;
	padding:0 0 20px;
	border-bottom:1px solid #AA8FAA;
}

#list_area .title_box .logo{
	float:left;
}

#list_area .title_box .txt{
	text-align:center;
}

#list_area .title_box .txt h2{
	padding:30px 0 40px;
}

#list_area .title_box .txt p{
	font-size:14px;
	line-height:2;
}

#list_area .content_box{
	overflow:hidden;
	padding:28px 0;
	border-bottom:1px solid #AA8FAA;
}

#list_area .content_box .img{
	float:left;
	width:226px;
}

#list_area .content_box .info{
	float:right;
	width:747px;
}

#list_area .content_box .info h3{
	font-size:18px;
	font-weight:bold;
	color:#460039;
	margin:0 0 10px;
}

#list_area .content_box .info .txt{
	overflow:hidden;
}

#list_area .content_box .info .txt p{
	float:left;
	width:484px;
	font-size:14px;
}

#list_area .content_box .info .txt .button{
	float:right;
	width:210px;
}

#list_area .content_box .info .txt .button a{
	position:relative;
	display:block;
	font-size:16px;
	color:#FFF;
	text-align:center;
	padding:10px 0 8px;
	background:linear-gradient(top, #600854 0%, #460039 100%);
	background: -webkit-linear-gradient(top, #600854 0%, #460039 100%);
	background: -moz-linear-gradient(top, #600854 0%, #460039 100%);
	background: -o-linear-gradient(top, #600854 0%, #460039 100%);
	background: -ms-linear-gradient(top, #600854 0%, #460039 100%);
	border-radius:3px;
}

#list_area .content_box .info .txt .button a:hover{
	opacity:0.7;
}


#list_area .content_box .info .txt .button a span.arrow_sl{
	display:inline-block;
	background:url(../../img/icon/icon_arrow_sl.png) 95% 5px no-repeat;
	width:100%;
}
#list_area .content_box .info .txt .button a span.blank_w{
	display:inline-block;
	background:url(../../img/icon/icon_blank_w.png) 95% center no-repeat;
	width:100%;
}

/*** sommelier_area ***/
#sommelier_area{
	width:1000px;
	margin:35px auto 10px;
	overflow:hidden;
	padding:0 3px 3px;
}

#sommelier_area h2{
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	padding:7px 10px 5px;
	margin:0 0 20px;
	background:linear-gradient(90deg, #460039 0%, #F4F2F3 100%);
	background: -webkit-linear-gradient(left, #460039 0%, #F4F2F3 100%);
	background: -moz-linear-gradient(left, #460039 0%, #F4F2F3 100%);
	background: -o-linear-gradient(left, #460039 0%, #F4F2F3 100%);
	background: -ms-linear-gradient(left, #460039 0%, #F4F2F3 100%);
}

#sommelier_area p.h2_txt{
	font-size:14px;
	margin:0 0 20px;
}

#sommelier_area .box{
	overflow:hidden;
	/*width:488px;*/
	box-shadow:3px 3px 3px #CCC;
	background:#FFF;
	/*height:695px;*/
}

#sommelier_area .box_l{
	float:left;
}
#sommelier_area .box_r{
	float:right;
}

#sommelier_area .box .img{
	float:left;
	width:215px;
}

#sommelier_area .box .info{
	padding: 0 0 0 215px;
	/*float:right;
	width:273px;*/
}

#sommelier_area .box .info h3{
	background:rgba(70,0,57,0.2);
	font-size:14px;
	font-weight:bold;
	color:#460039;
	height:86px;
	padding:15px 18px;
	line-height:1.3;
}

#sommelier_area .box .info h3 span.font12{
	font-size:12px;
}

#sommelier_area .box .info p.h3_txt{
	font-size:12px;
	padding:15px;
	line-height:1.8;
}


#sommelier_area .box p.txt{
	clear:both;
	font-size:12px;
	padding:20px;
}

/*** benefit_area ***/
#benefit_area{
	width:1000px;
	margin:35px auto 10px;
	overflow:hidden;
	padding:0 3px 3px;
}

#benefit_area h2{
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	padding:7px 10px 5px;
	margin:0 0 20px;
	background:linear-gradient(90deg, #460039 0%, #F4F2F3 100%);
	background: -webkit-linear-gradient(left, #460039 0%, #F4F2F3 100%);
	background: -moz-linear-gradient(left, #460039 0%, #F4F2F3 100%);
	background: -o-linear-gradient(left, #460039 0%, #F4F2F3 100%);
	background: -ms-linear-gradient(left, #460039 0%, #F4F2F3 100%);
}

#benefit_area  p.h2_txt{
	margin: 0 0 20px;
	padding: 0 0 20px;
}

#benefit_area  p.h2_txt img{
	float: left;
	padding: 0 20px 40px 0;
}


#benefit_area .info{
	padding: 0 10px;
	margin: 0 0 20px;
	clear: both;
}

#benefit_area .info h4 {
	font-size: 16px;
	font-weight: bold;
	color: #460039;
	border-bottom: solid 1px #460039;
	padding: 0 0 3px;
	margin: 0 0 10px;
}

#benefit_area .info p{
	font-size: 14px;
}

#benefit_area .info p a{
	text-decoration: underline;
	position: relative;
	padding: 0 0 0 12px;
}

#benefit_area .info p a:before{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #460039;
}

#benefit_area .info .button{
	width:210px;
	margin: 10px 0 30px;
}

#benefit_area .info .button a{
	position:relative;
	display:block;
	font-size:16px;
	color:#FFF;
	text-align:center;
	padding:10px 0 8px;
	background:linear-gradient(top, #600854 0%, #460039 100%);
	background: -webkit-linear-gradient(top, #600854 0%, #460039 100%);
	background: -moz-linear-gradient(top, #600854 0%, #460039 100%);
	background: -o-linear-gradient(top, #600854 0%, #460039 100%);
	background: -ms-linear-gradient(top, #600854 0%, #460039 100%);
	border-radius:3px;
}

#benefit_area .info .button a:hover{
	opacity:0.7;
}


#benefit_area .info .button a span.arrow_sl{
	display:inline-block;
	background:url(../../img/icon/icon_arrow_sl.png) 95% 5px no-repeat;
	width:100%;
}
#benefit_area .info .button a span.blank_w{
	display:inline-block;
	background:url(../../img/icon/icon_blank_w.png) 95% center no-repeat;
	width:100%;
}