/* ==========================================================================
   header.css — サイトヘッダー
   ========================================================================== */

/* ---------- スキップリンク ---------- */
.skip-link:focus {
	position: fixed;
	top: var(--space-xs);
	left: var(--space-xs);
	z-index: 10000;
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	background-color: var(--color-accent-text);
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	white-space: normal;
}

/* ---------- ヘッダー ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--color-white);
	transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	transition: height 0.3s ease;
}

.site-header.is-scrolled .site-header__inner {
	height: 56px;
}

/* ---------- ロゴ ---------- */
.site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-header__logo img {
	width: auto;
	height: 40px;
	transition: height 0.3s ease;
}

.site-header.is-scrolled .site-header__logo img {
	height: 28px;
}

/* ---------- ハンバーガーボタン（PC非表示） ---------- */
.site-header__menu-toggle {
	display: none;
}

/* ---------- ナビゲーション ---------- */
.site-header__nav {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.site-header__nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.site-header__nav-list .menu-item a {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
	transition: opacity 0.2s ease;
}

.site-header__nav-list .menu-item a:hover {
	opacity: 0.6;
}

/* ---------- 言語切替 ---------- */
.site-header__lang {
	display: flex;
	align-items: center;
	gap: 0.25em;
	font-size: var(--font-size-sm);
	margin-left: var(--space-sm);
}

.site-header__lang-current {
	font-weight: var(--font-weight-bold);
}

.site-header__lang-separator {
	color: var(--color-black);
	opacity: 0.4;
}

.site-header__lang-link {
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.site-header__lang-link:hover {
	opacity: 1;
}

/* ==========================================================================
   タブレット（～1023px）
   ========================================================================== */
@media (max-width: 1023px) {

	/* ハンバーガー表示 */
	.site-header__menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 8px;
		z-index: 1100;
	}

	.site-header__menu-toggle-bar {
		display: block;
		width: 100%;
		height: 2px;
		background-color: var(--color-black);
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	/* ハンバーガー開閉アニメーション */
	.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(2) {
		opacity: 0;
	}

	.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* ナビ — オーバーレイ */
	.site-header__nav {
		position: fixed;
		top: 0;
		right: 0;
		width: min(320px, 80vw);
		height: 100dvh;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: calc(var(--header-height) + var(--space-lg)) var(--space-lg) var(--space-lg);
		background-color: var(--color-white);
		box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 1050;
	}

	.site-header__nav[data-open="true"] {
		transform: translateX(0);
	}

	.site-header__nav-list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	.site-header__nav-list .menu-item {
		width: 100%;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}

	.site-header__nav-list .menu-item a {
		display: block;
		padding: var(--space-sm) 0;
		font-size: var(--font-size-base);
	}

	.site-header__lang {
		margin-left: 0;
		margin-top: var(--space-lg);
	}
}