/**
 * Header CSS - JEVA WordPress Theme
 * ナビゲーションバーのスタイル
 */

/* ========================================
   ナビゲーションバー
   ======================================== */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100vw;
	background-color: #ffffff;
	z-index: 50;
	transition: all 0.3s ease;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.navbar__container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
}

.navbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 64px;
	width: 100%;
}

/* ロゴとサイトタイトル */
.navbar__brand {
	display: flex;
	align-items: center;
}

.navbar__logo {
	font-size: 20px;
	font-weight: 700;
}

.navbar__site-title {
	display: none;
	margin-left: 24px;
	font-size: 14px;
	color: #4b5563;
}

/* デスクトップナビゲーション */
.navbar__nav {
	display: none;
}

.navbar__nav-list {
	display: flex;
	gap: 32px;
	align-items: center;
}

.navbar__nav-link {
	color: #374151;
	font-size: 14px;
	transition: color 0.2s ease;
}

.navbar__nav-link:hover {
	color: #111827;
	text-decoration: none;
}

/* モバイルメニューボタン */
.navbar__mobile-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #374151;
	font-size: 20px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	transition: color 0.2s ease;
	min-width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.navbar__mobile-btn:hover {
	color: #111827;
}

.navbar__mobile-btn:focus {
	outline: none;
}

/* モバイルメニュー */
.mobile-menu {
	position: fixed;
	top: 64px;
	right: 0;
	width: 256px;
	height: 100vh;
	padding-top: 64px;
	background-color: #ffffff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 8px rgba(0, 0, 0, 0.08);
	transform: translateX(100%);
	transition: transform 0.3s ease-in-out;
	overflow-y: auto;
	z-index: 40;
}

.mobile-menu.open {
	transform: translateX(0);
}

.mobile-menu__inner {
	padding: 16px 0 24px;
}

.mobile-menu__list {
	list-style: none;
}

.mobile-menu__link {
	display: block;
	color: #374151;
	font-size: 14px;
	padding: 12px 24px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-menu__link:hover {
	background-color: #f9fafb;
	color: #111827;
	text-decoration: none;
}

.mobile-menu__divider {
	border-top: 1px solid #e5e7eb;
	margin-top: 24px;
	padding-top: 24px;
}

.mobile-menu__sub-link {
	display: block;
	color: #6b7280;
	font-size: 14px;
	padding: 8px 24px;
	transition: color 0.2s ease;
}

.mobile-menu__sub-link:hover {
	color: #374151;
	text-decoration: none;
}

/* PCサイズ（768px以上） */
@media (min-width: 768px) {
	.navbar__site-title {
		display: block;
	}

	.navbar__nav {
		display: flex;
	}

	.navbar__mobile-btn {
		display: none;
	}

	.mobile-menu {
		display: none;
	}
}