@charset "utf-8";
/* ナビゲーションの設定 */
/* ヘッダー SP */
.sr-only {
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}


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

.nav-button::before,
.nav-button::after {
	content: '';
	display: block;
	height: 2px;
	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: #fff;
}

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

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





/* ナビゲーションメニュー: モバイル */
@media (max-width: 760px) {
	
	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: #0A223D;
		color: #152226;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: left 0.5s;
		z-index: 200;
	}
	
	.mainNav ul {
		list-style: none;
		font-weight: bold;
		text-align: center;
	}

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

	.mainNav .btn {
		color: inherit;
	}
}


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

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

	.mainNav li {
		margin-right: 20px;
	}

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