@charset "utf-8";

/* --------------------------------------------


#header


---------------------------------------------- */

/*========= スクロール途中でヘッダーが表示＆非表示するためのCSS ===============*/

#header {
	/*fixedで上部固定*/
	position: fixed;
	width: 100%;
	z-index: 999;
	/*最前面へ*/
	/*以下はレイアウトのためのCSS*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	padding-left: 20px;
	transition: 0.5s;
}

#header .topLink {
	display: flex;
	gap: 20px;
}


.header__logo {
	display: block;
	height: 60px;
	z-index: 9999;
}

header nav #g-navi {
	display: flex;
	align-items: center;
	color: #212226;
}

header nav #g-navi a {
	padding: 4px 0;
}

header nav #g-navi li {
	text-align: center;
	padding: 10px 20px;
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 1;
	font-weight: bold;
	color: #1F286F;
}

nav #g-navi li span {
	display: block;
	text-align: center;
	font-size: 12px;
	font-size: 1.2rem;
}

.header__contact {
	background-color: #1F286F;
}

.header__contact li {
	color: #fff!important;
}


@media only screen and (max-width:640px) {
	#header {
		height: 100px;
	}

	.header__logo {
		height: 88px;
	}

	.menu-btn {
		display: block;
		position: fixed;
		z-index: 9999;
		right: 30px;
		top: 18px;
		width: 50px;
		height: 50px;
		cursor: pointer;
		text-align: center
	}

	.menu-btn span {
		display: block;
		position: absolute;
		width: 50px;
		height: 3px;
		background: #212226;
		-webkit-transition: .3s ease-in-out;
		-moz-transition: .3s ease-in-out;
		transition: .3s ease-in-out
	}

	.menu-btn span:first-child {
		top: 10px
	}

	.menu-btn span:nth-child(2) {
		top: 30px
	}

	.menu-btn span:nth-child(3) {
		top: 50px
	}

	.menu-btn.active span:first-child {
		top: 30px;
		left: 0;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}

	.menu-btn.active span:nth-child(2),
	.menu-btn.active span:nth-child(3) {
		top: 30px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg)
	}

	header nav {
		position: fixed;
		z-index: 9998;
		top: 0;
		right: -100vw;
		width: 100vw;
		height: 100vh;
		background: rgba(241, 240, 239, 0.9);
		transition: 0.5s;
	}

	header nav.active {
		right: 0;
		transition: 0.5s;
		overflow: auto;
	}

	header nav #g-navi {
		position: relative;
		flex-direction: column;
		justify-content: center;
		top: 50%;
		transform: translateY(-50%);
		padding: 120px 0;
	}

	header nav #g-navi a {
	display: block;
	width: 100%;
	border: solid 1px #1F286F;
}

	header nav #g-navi li {
		padding: 40px 0;
		font-size: 22px;
		font-size: 2.2rem;
	}

	header nav #g-navi li ul {
		position: relative;
		top: 0;
		left: 0;
		display: block;
		background: none;
		opacity: 1;
		visibility: visible;
		transition: 0.3s;
	}

}