/* header_footer.css */

/* ヘッダー：ハンバーガー表示時（768px～1024px未満）に幅を広く */
@media (min-width: 768px) and (max-width: 1023px) {
	header .container {
		max-width: 56rem; /* 896px */
	}
}

/* 固定ヘッダー */
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/* bodyのpadding-top（ヘッダーの高さ分） */
body {
	padding-top: 80px;
}

@media (min-width: 1024px) {
	body {
		padding-top: 100px;
	}
}

/* ヘッダーのドロップダウンメニュー用スタイル */
header .group:hover .group-hover\:opacity-100 {
	opacity: 1;
	visibility: visible;
}

/* モバイルメニューのフェードアニメーション */
#mobile-menu.menu-open {
	opacity: 1 !important;
}

#mobile-menu:not(.menu-open) {
	opacity: 0 !important;
}

/* ドロップダウンメニューのアニメーション強化 */
header .group .absolute {
	transform: translateY(-10px);
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
}

header .group:hover .absolute {
	transform: translateY(0);
}

/* 黒背景オーバーレイのスタイル */
header .group .fixed {
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

/* ハンバーガー ⇔ バツアイコン切り替え */
#mobile-menu-button .close-icon {
	display: none;
}
#mobile-menu-button.is-open .hamburger-icon {
	display: none;
}
#mobile-menu-button.is-open .close-icon {
	display: block;
}