#menu_button {
	--button-size: 80px;
	--button-top: 12px;
	--button-right: 18px;
	--line-angle: -54.9deg;
	--line-width: 8px;
	--line-short-length: 38px;
	--line-long-length: 56px;
	--line-gap: 19px;
	--line-color: #7f7f7f;
	--line-blend-mode: normal;
	--animation-duration: 600ms;
	--hover-duration: 280ms;
	--animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
	--side-slide-distance: 30px;
	--line-skew: calc(-90deg - var(--line-angle));

	position: fixed;
	top: var(--button-top);
	right: var(--button-right);
	z-index: 1100;
	width: var(--button-size);
	height: var(--button-size);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.menu_button_item {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: var(--line-width);
	background-color: var(--line-color);
	mix-blend-mode: var(--line-blend-mode);
	transform-origin: center;
	pointer-events: none;
}

.menu_button_item:nth-child(1),
.menu_button_item:nth-child(3) {
	height: var(--line-short-length);
	opacity: 1;
	transition:
		height var(--hover-duration) var(--animation-easing),
		transform var(--animation-duration) var(--animation-easing),
		opacity var(--animation-duration) var(--animation-easing);

	will-change: height, transform, opacity;
}


/*
 * ホバー時:
 * 左右の短い棒を中央の長い棒と同じ長さまで伸ばします。
 * メニュー展開中は発動させません。
 */
#menu_button:not(.is-open):hover .menu_button_item:nth-child(1),
#menu_button:not(.is-open):hover .menu_button_item:nth-child(3) {
	height: var(--line-long-length);
}

.menu_button_item:nth-child(1) {
	transform:
		translate(-50%, -50%)
		translateX(calc(0px - var(--line-gap)))
		skewX(var(--line-skew));
}

.menu_button_item:nth-child(2) {
	height: var(--line-long-length);
	transform:
		translate(-50%, -50%)
		skewX(var(--line-skew));
}

.menu_button_item:nth-child(3) {
	transform:
		translate(-50%, -50%)
		translateX(var(--line-gap))
		skewX(var(--line-skew));
}

#menu_button.is-open .menu_button_item:nth-child(1) {
	opacity: 0;
	transform:
		translate(-50%, -50%)
		translateX(calc(0px - var(--line-gap) - var(--side-slide-distance)))
		skewX(var(--line-skew));
}

#menu_button.is-open .menu_button_item:nth-child(3) {
	opacity: 0;
	transform:
		translate(-50%, -50%)
		translateX(calc(var(--line-gap) + var(--side-slide-distance)))
		skewX(var(--line-skew));
}

#menu_body {
	--menu-angle: -54.9deg;
	--menu-open-width: 750px;
	--menu-animation-duration: 850ms;
	--menu-animation-easing: cubic-bezier(0.76, 0, 0.24, 1);

	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: #000;
	clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
	visibility: hidden;
	pointer-events: none;
	transition:
		clip-path var(--menu-animation-duration) var(--menu-animation-easing),
		visibility 0s linear var(--menu-animation-duration);
	will-change: clip-path;
}

#menu_body.is-open {
	visibility: visible;
	pointer-events: auto;
	transition:
		clip-path var(--menu-animation-duration) var(--menu-animation-easing),
		visibility 0s linear 0s;
}

#menu_body.is-resizing {
	transition: none;
}

#menu_body a {
	display: block;
	max-width: min(80vw, 720px);
	max-height: 80dvh;
}

#menu_body img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 80dvh;
}

/* 必ず通常の #menu_body 定義より後に置きます */
@media only screen and (max-width: 750px) {
	#menu_body {
		--menu-open-width: 60vw;
	}
}