@charset "utf-8";

#headerBox {
	padding-top: 1em;
	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;
}
	#headerBox .flexBox h1 {
		width: 40%;
		min-width: 150px;
	}
		#headerBox .flexBox h1 a {
			display: block;
			text-indent: -2000em;
			width: 230px;
			height: 100px;
			max-width: 90%;
			background: url(../img/sitecommon/logo.png) no-repeat 0 50%;
			background-size: contain;
		}
	#headerBox .flexBox nav { flex-grow: 1; }
		#headerBox #headerContactBox {
			font-size: 1.4rem;
			text-align: right;
		}
		#headerBox #headerContactBox a { text-decoration: none; }
		#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 > a::after {
					content: '';
					position: absolute;
					bottom: -1em;
					left: 0;
					width: 0;
					border-bottom: 2px solid rgba(0, 82, 183, 1);
					transition: 0.3s;
				}
				#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);
					}

/* [sp] ============================================ */
@media only screen and (max-width: 780px) {
	#headerBox {
		padding: 1em 0;
	}
		#headerBox .flexBox nav { flex-grow: 0; width: 100px; }
		#headerBox .flexBox h1 {
			width: auto;
			flex: 1;
		}
			#headerBox .flexBox h1 a {
				width: 100%;
				height: 50px;
				background-image: url(../img/sitecommon/logo_w.png);
			}
}