@charset "utf-8";

#headerBox {
	padding: 1em 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;
}
#headerBox a { color: #333; }

#headerBox .initBox { width: 90vw; max-width: none; }
#headerBox #mainMenuBox { margin-left: 2rem; }
	#headerBox .flexBox h1 {
		width: 40%;
		max-width: 392px;
	}
		#headerBox .flexBox h1 a img {
			width: 90%;
			max-width: 200px;
		}
	#headerBox .flexBox nav { flex-grow: 1; }
		#headerBox #headerContactBox {
			font-size: 1.4rem;
			text-align: right;
		}
		#headerBox #headerContactBox a { text-decoration: none; color: #00325d;}
		#headerBox .flexBox > li {
			text-align: center;
			position: relative;
		}
			#mainMenuBox .flexBox > li a {
				text-decoration: none;
				font-size: 1.6rem;
				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: #00325d; }
				#mainMenuBox .flexBox > li > a::after {
					content: '';
					position: absolute;
					bottom: -1em;
					left: 0;
					width: 0;
					border-bottom: 2px solid #00325d;
					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: #00325d;
	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 .flexBox nav { flex-grow: 0; width: 100px; }
		#headerBox .flexBox h1 {
			width: auto;
			flex: 1;
		}
}