@charset "utf-8";

/*
ABERLOUR BROWN #35230c (#3E2F20)
ABERLOUR CREAM #f9f4e8
ABERLOUR GOLD  #ad9154
ABERLOUR RED   #ba0c2f
*/



/*
 * lead
 */
#content .lead{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight:bold;
	background: url(../img/lead-bg.png) no-repeat;
	background-position: center;
	background-size:auto 100%;
	color:#f9f4e8;
	text-align:center;
	min-height:320px;
	display:table;
	width:100%;
}

	#content .lead div{
		display:table-cell;
		width:100%;
		height:100%;
		vertical-align:middle;
	}
	
	#content .lead h1{
		font-size:24px;
		margin-bottom:20px;
	}

	#content .lead p{
		font-size:18px;
		line-height:160%;
	}



/*
 * range
 */
#content .range{
	background:#fff;
	padding:30px;
	line-height:150%;
}

	#content .range dl{
		max-width:670px;
		margin:0 auto;
	}

	#content .range dt{
		float:left;
		width:260px;
		padding-right:10px;
	}

	#content .range dd{
		float:left;
		max-width:400px;
	}


	/* data */
	#range-data ul{
		/*background:yellow;*/
		display:table;
	}

		#range-data li{
			display:table-cell;
		}

		#range-data li:first-child{
			width:140px;
		}

		#range-data.abl-12{ margin-top:60px; }
		#range-data.abl-16{ margin-top:70px; }
		#range-data.abl-18{ margin-top:15px; }
		#range-data.abl-ab{ margin-top:15px; }

/*
 * range-menu
 */
#content .range-menu{
	position:relative;
	background:#ad9154;
	top:-80px;
}

	#content .range-menu ul{
		padding:10px 0 10px 0;
	}

		#content .range-menu li{
			display:table-cell;
			text-align:center;
			width:182px;
			color: #ba0c2f;
			vertical-align:middle;
		}

		#content .range-menu h2{
			font-family: Georgia, sans-serif, Arial;
			font-style: italic;
			font-size: 32px;
			font-weight: normal;
		}

		#content .range-menu h2.num{
			font-size: 42px;
		}

		#content .range-menu h3{
			font-family: "Raleway", georgia, sans-serif;
			font-size: 20px;
			text-transform: uppercase;
			font-style: italic;
		}

		#content .range-menu h4{
			font-family: "Raleway", georgia, sans-serif;
			font-size: 16px;
			font-style: italic;
		}

		#content .range-menu li a:link    { color: #f9f4e8; text-decoration: none; }
		#content .range-menu li a:visited { color: #f9f4e8; text-decoration: none; }
		#content .range-menu li a:hover   { color: #ba0c2f; text-decoration: none; }
		#content .range-menu li a:active  { color: #ba0c2f; text-decoration: none; }

#rmenu{
	width:100%;
}

#rmenu div.nav{
	width:35px;
}



/*
 * made_from_experience
 */

#content .made_from_experience{
	margin:-60px 0 30px 0;
	text-align:center;
	background: url(../img/line.png) repeat-x;
}



/************ rmenu カルーセル ************/

.range-menu #rmenu .main{
	overflow:hidden;
}

#content .range-menu ul.slider{
	width:100%;
	max-width:728px;
	margin:auto;
	box-sizing:border-box;
	overflow:hidden;
}

.multiple-item .slick-next{
	right: -36px;
	z-index: 99;
	width:35px;
	height:98px;
	background:#F9F4E8;
}

.multiple-item .slick-prev {
	left: -36px;
	z-index: 100;
	width:35px;
	height:98px;
	background:#F9F4E8;
}



/*
 * 2019.12追加
 */
#rmenu .btn{
	display: none;
}





/************ /rmenu カルーセル ************/



/*
 * Media Queries
 */
@media (max-width:828px){

	/* lead */

	#content .lead{
		text-align:left;
	}

	#content .lead h1{
		margin-left:-0.5em;
		text-indent:-0.5em;
    	padding-left:0.5em;
	}

	#content .lead div{
		padding:30px;
	}

	#content .lead br{
		display: none;
	}

	/* range */

	#content .range dt{
		margin:0 auto;
		padding-right: 0;
		float:none;
	}

	#content .range dd{
		margin:0 auto;
		float:none;
		height:auto;
		margin-top:0px;
	}

	/* data */
	
	#range-data ul{
		display:block;
		margin-bottom:20px;
	}

		#range-data li{
			display:block;
		}

		#range-data li:first-child{
			width:140px;
			margin:-0.5em;
			margin-bottom:5px;
		}

		#range-data.abl-12,
		#range-data.abl-16,
		#range-data.abl-18,
		#range-data.abl-ab{
			margin-top:0px;
		}


	/* range-menu */
	#content .range-menu{
		top:0;
	}

	/* made_from_experience */
	#content .made_from_experience{
		margin:20px 0 30px 0;
	}

}


/************ rmenu カルーセル Media Queries ************/

@media screen and (max-width:728px) {

	#content .range-menu ul.slider{
		width:100%;
		padding-left:40px;
		padding-right:40px;
		margin:auto;
		box-sizing:border-box;
		overflow:hidden;
	}
	
	.multiple-item .slick-next{
		right: 0;
		z-index: 99;
		width:35px;
		height:98px;
		background:#F9F4E8;
	}
	
	.multiple-item .slick-prev {
		left: 0;
		z-index: 100;
		width:35px;
		height:98px;
		background:#F9F4E8;
	}

	#rmenu .main{
		position: relative;
	}


	/*
	 * 2019.12追加
	 */
	#content .range-menu li{
		display: none;
	}

		#content .range-menu li.active{
			display:block;
			width:100%;
		}

		#rmenu .btn{
			display: block;
			position: absolute;
			background: #AD9154;
			cursor:pointer;
			border:0;
			height:100%;
			width:40px;
			top:0;
		}

			#rmenu .btn img{ width:10px; }

			#btn-back{ left:0; }
			#btn-next{ right:0; }

			


}

/************ /rmenu カルーセル Media Queries ************/