/* ================================
   ハンバーガーメニュー完全版
   （独立JS方式対応）
================================ */

/* --- ハンバーガーボタン --- */

.hamburger {
	width: 48px;
	height: 48px;
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 9999;
	background: #000;
	border-radius: 8px;
	cursor: pointer;
	display: none; /* ← PCでは隠す */
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* 三本線 */

.hamburger span {
	position: absolute;
	left: 12px;
	right: 12px;
	height: 2px;
	background: #fff;
	transition: .3s;
}

.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 23px; }
.hamburger span:nth-child(3) { top: 31px; }

/* --- × 変形 --- */

.hamburger.active span:nth-child(1) {
	top: 23px;
	transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	top: 23px;
	transform: rotate(-45deg);
}

/* ================================
   スマホメニュー本体
================================ */

#menubar-s {
	display: none;
}

/* JSで active が付いたら表示 */

#menubar-s.active {
	display: block;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.94);
	z-index: 9000;
	padding-top: 90px;
	overflow-y: auto;
}

/* メニューリスト整形 */

#menubar-s ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#menubar-s li {
	border-bottom: 1px solid #444;
}

#menubar-s a {
	display: block;
	padding: 18px 24px;
	color: #fff;
	text-decoration: none;
	font-size: 18px;
}

#menubar-s a:hover {
	background: #222;
}

/* ================================
   レスポンシブ切替
================================ */

/* スマホでのみハンバーガー表示 */

@media (max-width: 800px) {

	.hamburger {
		display: block;
	}

	/* PCメニューを隠す（既存 menubar） */
	#menubar {
		display: none !important;
	}
}

/* PCではスマホメニューを使わない */

@media (min-width: 801px) {

	#menubar-s {
		display: none !important;
	}
}