@charset "utf-8";

#gnav[open] {
	--header-h : var(--header-height, 96px);
	--header-z : var(--header-z-index, 1000);
	position: fixed;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	top: 0;
	left: 0;
	right: 0;
	box-sizing: border-box;
	height: 100dvh;
	z-index: calc(var(--header-z) - 1);
	padding-top: var(--header-h);
	background: #fff;
}

/* アニメーション */

@starting-style {
  #gnav:not([open]) {
    opacity: 0;
    display: none;
  }
}

#gnav {
	--duration: 0.3s;
	transition-property: opacity, display;
	transition-duration: var(--duration);
	transition-behavior: allow-discrete;

	/* &:not([open]) {
		opacity: 0;
		display: none;
	} */
	&[open] {
		opacity: 1;
		display: block;
		@starting-style {
			opacity: 0;
		}
	}
}

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

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

.hamburger-button {
	--color : var(--hamburger-color, #000);
	--width : var(--hamburger-width, 30px);
	--height : var(--hamburger-height, 30px);
	--line-width : var(--hamburger-line-width, 3px);
	--line-gap : var(--hamburger-line-gap, 4px);
	appearance: none;
	box-shadow: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: var(--width);
	height: var(--height);
	gap: var(--line-gap);
}

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

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

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

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