/* _preface.css updated 2016-7-19 */

/* set height */
#zone-preface-wrapper {
	position: relative;
	height: 460px; /* default height */
	overflow: hidden;
}

/* preface menu */
#zone-preface {
	height: 100%;
	position: relative;
}
#region-preface-first {
	height: 100%;
	background-color: rgba(245,186,60,0.85);
	font-size: 1.15em;
	position: relative;
	z-index: 99;
}
#region-preface-first ul.menu {
	margin: 0;
	padding: 10px 0;
}
#region-preface-first ul.menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#region-preface-first ul.menu li a {
	display: block;
	margin: 0;
	padding: 7px 14px;
	text-decoration: none;
	color: #000;
}
#region-preface-first ul.menu li a:hover {
	background-color: #F9D784;
}


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

	#zone-preface-wrapper {
		max-width: 100%;
		box-shadow: none;
		overflow: visible;
	}
	#zone-preface-wrapper.clearfix:after, #zone-preface-wrapper .clearfix:after{
		display: none;
	}
	#zone-preface {
		width: 100%;
	}
	
	#region-preface-first {
		width: 200px;
		float: left;
		clear: left;
		padding-left: 0;
		padding-top: 0;
		margin-left: -200px;
		position: relative;
	}
	#region-preface-first ul.menu a {
		text-decoration: none;
		display: block;
	}
	#region-preface-first ul.menu a:hover,
	#region-preface-first ul.menu a:active {
		color: #F1B82D;
	}
	
	
}

@media screen and (max-width: 739px) {
	
	#zone-preface-wrapper {
		min-height: 0;
		height: 350px;
	}

}

@media screen and (max-width: 580px) {
	
	#zone-preface-wrapper {
		height: 250px;
	}

}


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

}

@media screen and (max-width: 450px) {
	
	#zone-preface-wrapper {
		height: 200px;
	}
}