/* PC */
#header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.gnav {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gnav a {
	text-decoration: none;
	color: #333;
}

/* ハンバーガー（初期: 非表示） */
.menu-btn {
	display: none;
	width: 30px;
	cursor: pointer;
}
.menu-btn span {
	display: block;
	height: 3px;
	background: #333;
	margin: 7px 0;
}
/* 通常（閉じている時） */
.menu-btn span {
    background: #fff;
    transition: .3s;
}

/* メニューが開いている時 */
.menu-btn.active span {
    background: #000;
}

/* タブレット時（769px〜1024px） */
@media (min-width: 769px) and (max-width: 1150px) {
	.sp {
		display: none;
	}
	#header ul {
        margin: 0;
        padding: 80px 0 0;
        display: flex;
        flex-wrap: wrap;
    }
	.menu-btn {
		display: block;
		z-index: 100000;
		padding: 0 20px 0 0;
	}

	.gnav {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: -320px;
		width: 320px;
		height: 100%;
		background: #fff;
		padding-top: 80px;
		transition: .3s;
		z-index: 9999;
	}

	.gnav.active {
		right: 0;
	}

	.gnav a {
		color: #333;
		padding: 18px 20px;
		font-size: 16px;
		text-decoration: none;
	}

	#header a {
		color: #000 !important;
	}

	#header a:hover {
		color: #222 !important;
	}

	#header a:visited {
		color: #000 !important;
	}
}

/* スマホ時（768px以下） */
@media (max-width: 768px) {
	.menu-btn {
        display: block;
        z-index: 100000;
        padding: 0 15px 0 0;
    }

	.gnav {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: -260px;
		width: 260px;
		height: 100%;
		background: #fff;
		padding-top: 60px;
		transition: .3s;
		z-index: 9999;
	}

	.gnav.active {
		right: 0;
	}

	.gnav a {
		color: #333;
		padding: 15px;
		text-decoration: none;
	}
	
	#header a {
		color: #000 !important;
	}

	#header a:hover {
		color: #222 !important;
	}

	#header a:visited {
		color: #000 !important;
	}

}

/* オーバーレイ */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	z-index: 2;
}
.overlay.active {
	opacity: 1;
	visibility: visible;
}