@charset "utf-8";

#headerBox {
	padding: 1.5em 0;
	/*
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
	*/
	position: relative;
	z-index: 1000;
	transition: 0.3s;
	/*border-top: solid 2px rgba(98, 0, 98, 1);*/
	border-top: solid 2px #000000;
	background: url(../img/common/bk.jpg) repeat;
}
#headerBox a {
/*
	color: #333;
	color: rgba(20, 117, 135, 1);
*/
	color: rgba(100, 100, 100, 1);
}

#headerBox .initBox { width: 80vw;max-width: 1000px;margin: 0 auto; }
#headerBox #mainMenuBox { /*margin-left: 2rem;*/ }
	#headerBox h1 {
		width: 30%;
		max-width: 260px;
		margin: 0rem auto 1.5rem auto;
	}
		#headerBox h1 a img {
			width: 100%;
		}
	#headerBox .flexBox nav { flex-grow: 1; }
		#headerBox #headerReservationBox a, 
		#headerBox #headerContactBox {
			font-size: 1.2rem;
			position: absolute;
			width: 20rem;
			text-align: center;
			padding: 0.25rem 0;
			right: 0px;
			top: 0px;
		}
		#headerBox #headerContactBox {
			/*background-color: rgba(98, 0, 98, 1);
			background: #B19B14;*/
			background: #000000;
			color: #FFF;
		}
		#headerBox #headerReservationBox a {
			display: inline-block;
			top: 4rem;
			font-size: 1.6rem;
			border: 1px solid rgba(255, 255, 255, 1);
			color: rgba(255, 255, 255, 1);
			text-decoration: none;
		}
			#headerBox #headerReservationBox a:hover {
				background: rgba(98, 0, 98, 1);
				color: rgba(255, 255, 255, 1);
			}
		#headerBox #headerContactBox a { text-decoration: none; color: #FFF;}

		#headerBox .flexBox > li {
			text-align: center;
			position: relative;
			padding-bottom: 1em;
		}
			#mainMenuBox .flexBox > li a {
				text-decoration: none;
			/*	font-size: 1.8rem;*/
				font-weight: bold;
				position: relative;
			/*	padding-top: calc( (60px - 1rem ) / 2 );*/
				padding-top: 1rem;
				display: inline-block;
			}
			#mainMenuBox .flexBox > li.nowpage > a, 
			#mainMenuBox .flexBox > li a:hover { color: #000000; }
				#mainMenuBox .flexBox > li > a::after {
					content: '';
					position: absolute;
					bottom: -1em;
					left: 0;
					width: 0;
					border-bottom: 1px solid #000000;
					transition: 0.3s;
				}
				#mainMenuBox .flexBox > li.nowpage a::after, 
				#mainMenuBox .flexBox > li > a:hover::after { width: 100%; }

/* sub menu */
					#mainMenuBox .flexBox > li > ul {
						display: none;
						opacity: 0;
						position: absolute;
						top: 4.2rem;
						left: -100%;
						width: 300%;
						background: rgba(255, 255, 255, 0.75);
						box-shadow: 1px 1px 2px rgba(100, 100, 100, 0.5);
					}
					#mainMenuBox .flexBox > li > ul:hover, 
					#mainMenuBox .flexBox > li:hover > ul {
						display: block;
						opacity: 1;
						transition: 0.5s;
					}
					#mainMenuBox .flexBox > li li a {
						display: block;
						text-align: center;
						padding: 1rem 0;
					}
					#mainMenuBox .flexBox > li li a:hover {
						background: rgba(0, 82, 183, 0.1);
					}

#headerBox #mainMenuBox #contactBtn {
	margin-left: 2rem;
	background: #FF6600;
	color: rgba(255, 255, 255, 1);
	padding: 1rem 2rem;
	font-size: 1.2rem;
	border-radius: 3px;
}
#headerBox #mainMenuBox #contactBtn:hover { background: #a52f3a; }

#headerBox.fixHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(255, 255, 255, 1);
}

/* [sp] ============================================ */
@media only screen and (max-width: 780px) {
	#headerBox {
		padding: 1.2em 0;
	}
		#headerBox .initBox { width: 90vw; }
		#headerBox .flexBox nav { flex-grow: 0; width: 100px; }
		#headerBox h1 {
			width: 45%;
			margin: 0;
		}
}