@charset "utf-8";

.gnav {
	position: fixed;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 997;
	padding-top: calc(var(--header-height) * 1px);
	background: #fff;
}

/* モーダルの背面をスクロールさせない */
:root:has(dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* アニメーション */

.gnav {
	--duration: 0.3s;
	opacity: 0;
	transition: all var(--duration) allow-discrete;
	&[open] {
		opacity: 1;
		@starting-style {
			opacity: 0;
		}
	}
}

/*
ハンバーガーメニュー
```
<button class="hamburger-button" aria-label="メニューを開く" id="gnav-btn">
	<span class="hamburger-line"></span>
	<span class="hamburger-line"></span>
	<span class="hamburger-line"></span>
</button>
```
*/

.hamburger-button {
	appearance: none;
	box-shadow: none;
	background: none;
	border: none;
	cursor: pointer;
	width: 30px;
	height: 30px;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: var(--blue);
  border-radius: 0px;
  transition: all 0.3s ease-in-out;
}

/* アクティブ状態（Xアニメーション） */
:root:has(dialog.gnav[open]) .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

:root:has(dialog.gnav[open]) .hamburger-line:nth-child(2) {
  opacity: 0;
}

:root:has(dialog.gnav[open]) .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}