/* header_footer.css */

/* ヘッダー高さ（スライドメニューのtop位置と連動） */
:root {
	--header-height: 64px;
	--header-height-md: 72px;
}
.header-menu-overlay {
	top: var(--header-height);
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(100vh - var(--header-height));
}
.header-menu-panel {
	top: var(--header-height);
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 380px;
	height: calc(100vh - var(--header-height));
}
@media (min-width: 768px) {
	.header-menu-overlay {
		top: var(--header-height-md);
		height: calc(100vh - var(--header-height-md));
	}
	.header-menu-panel {
		top: var(--header-height-md);
		height: calc(100vh - var(--header-height-md));
	}
}
header{
	transition: 0.3s;
}
header.active {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	background-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
}

/* ハンバーガーメニューパネル：開閉状態 */
.header-menu-panel {
	opacity: 0;
	visibility: hidden;
	transform: translateX(100%);
	transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
	pointer-events: none;
}

.header-menu-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	pointer-events: auto;
}

.header-menu-overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s, visibility 0.3s;
}

.header-menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ハンバーガーメニュー：開いた時の×アニメーション（PC時と同じ w-6 gap-1.5） */
.header-hamburger.is-open .header-hamburger-line:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.header-hamburger.is-open .header-hamburger-line:nth-child(2) {
	opacity: 0;
}
.header-hamburger.is-open .header-hamburger-line:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}