@charset "UTF-8";

/************************************************** 
	
	ナビゲーションの設定
	
**************************************************/
/* ナビゲーションボタン */
.nav-button {
	box-sizing: content-box;
	padding: 0;
	outline: none;
	border: none;
	background: none;
	width: 26px;
	height: 14px;
	cursor: pointer;
	color: #fff;
}

.nav-button::before,
.nav-button::after {
	content: '';
	display: block;
	height: 1px;
	background-color: currentColor;
	transform: translateY(5px);
	transition: 0.3s ease-in-out;
}

.nav-button::before {
	transform: translateY(-5px);
	box-shadow: 0 6px currentColor;
}


/* ナビゲーションボタン（閉じるボタン） */
.open .nav-button {
	z-index: 1000;
	color: #35626D;
}

.open .nav-button::before {
	transform: translateY(1px) rotate(45deg);
	box-shadow: none;
}

.open .nav-button::after {
	transform: translateY(-1px) rotate(-45deg);
}

/* ナビゲーションメニュー: モバイル */
@media (max-width: 1200px) {
	
	html.open, .open body {
		height: 100%;
		overflow: hidden;
	}

	.open .form {
		display: none;
	}

	.open nav {
		left: 0;
	}

	html, body {
		overflow-x: hidden;
	}

	.header {
		position: relative;
	}

	.mainNav {
		position: absolute;
		top: 0;
		left: 100%;
		width: 100%;
		height: 100vh;
		background: rgba(49,60,82,0.7);
		color: #152226;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: left 0.5s;
	}
	
	.mainNav ul {
		list-style: none;
		font-weight: bold;
		text-align: center;
	}
	
	.mainNav li a {
		color: #fff;
	}

	.mainNav li:not(:last-child) {
		margin-bottom: 40px;
	}

	.mainNav .btn {
		color: inherit;
	}
}


/* ナビゲーションメニュー： PC */
@media (min-width: 1200px) {
	
	.nav-button {
		display: none;
	}

	.mainNav ul {
		display: flex;
		align-items: center;
		list-style: none;
		color: #333333;
	}

	.mainNav li:not(:last-child) {
		margin-right: 30px;
	}

	.mainNav .btn {
		width: 148px;
		border-color: #CDD6DD;
	}
}