@charset "utf-8";

#headerBox {
	border-top: 5px solid rgba(102, 196, 213, 1);
	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 { flex-wrap: nowrap; }
	#headerBox .flexBox h1 {
		width: 45%;
	}
		#headerBox .flexBox h1 a {
			display: block;
			text-indent: -2000em;
			width: 80%;
			/*height: 82px;*/
			height: 100px;
			max-width: 300px;
			/*background: url(../img/common/logo_yoko.png) no-repeat 0 50%;*/
			background: url(../img/common/logo_yoko2.png) no-repeat 0 40%;
			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.4rem;
				font-weight: bold;
				position: relative;
				padding: 1rem;
				padding-top: calc( (82px - 1rem ) / 2 );
				display: inline-block;
				color: rgba(51, 51, 51, 1);
			}
			#mainMenuBox .flexBox > li a:hover {
				color: rgba(102, 196, 213, 1);
			}
			#headerBox .flexBox nav li.nowpage > a {
				background: rgba(102, 196, 213, 1);
				color: rgba(255, 255, 255, 1);
			}
				#mainMenuBox .flexBox > li > a::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 0;
					border-bottom: 2px solid rgba(102, 196, 213, 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: 7.5rem;
						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(51, 51, 51, 1);
						color: rgba(255, 255, 255, 1);
					}

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