header {
	position: fixed;
	inset: 40px 0 auto;
	z-index: 100;
	width: 100%;
	height: var(--header-height);
	display: flex;
	justify-content: center;
	@media screen and (max-width: 820px) {
		top: calc(65 / var(--calc));
	}
}
.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	max-width: var(--container-width);
	@media screen and (max-width: 820px) {
		width: calc(100% - (60 / var(--calc)));
		max-width: 100%;
	}
	.logo {
		width: 80px;
		height: 67px;
		@media screen and (max-width: 820px) {
			width: calc(274 / var(--calc));
			height: calc(45 / var(--calc));
		}
	}
	.header-nav-wrapper {
		.hamburger {
			display: block;
			width: 60px;
			height: 40px;
			position: fixed;
			inset: 40px 40px auto auto;
			z-index: 2;
			.bar {
				width: 100%;
				height: 1px;
				background-color: #ffffff;
				position: absolute;
				left: 0;
				&:nth-child(1) {
					top: 0;
				}
				&:nth-child(2) {
					top: 50%;
					transform: translateY(-50%);
				}
				&:nth-child(3) {
					bottom: 0;
				}
			}
		}
		.header-nav {
			width: 700px;
			height: 100vh;
			background-color: #000000;
			z-index: 1;
			padding: 80px;
			display: flex;
			flex-direction: column;
			gap: 76px;
			overflow-y: scroll;
			position: fixed;
			inset: 0 0 auto auto;
		}
		.header-nav-list {
			display: flex;
			flex-direction: column;
			gap: 54px;
		}
		.header-nav-list-item {
			color: #ffffff;
			font-family: var(--font-yuji);
			font-size: var(--32px);
			.sub-text {
				font-size: 0.4375em;
				@media screen and (max-width: 820px) {
					display: none;
				}
			}
		}
		.header-nav-access-wrapper {
			display: flex;
			gap: 30px;
		}
		.header-nav-ig {
			width: 30px;
			flex-shrink: 0;
		}
		.header-nav-access {
			display: flex;
			flex-direction: column;
			gap: 1em;
		}
		.header-nav-access-info {
			color: #ffffff;
			font-size: var(--14px);
			line-height: 1.72;
		}
		.tel-wrapper {
			gap: 12px;
			.tel-icon {
				width: 50px;
			}
			.tel-number {
				font-size: 50px;
			}
		}
	}
	.link-list {
		writing-mode: vertical-rl;
		display: flex;
		flex-direction: column;
		gap: var(--36px);
	}
	.link-list-item {
		color: #ffffff;
		font-family: var(--font-yuji);
		font-size: var(--24px);
		line-height: 1;
	}
}

/* ==============================
	animation
============================== */

/* ハンバーガーメニュー */
.header-nav-wrapper {
	.hamburger {
		.bar {
			transition: all 0.3s ease;
		}
		&.open .bar {
			&:nth-child(1) {
				top: 50%;
				transform: translateY(-50%) rotate(33.7deg);
				width: 72px;
			}
			&:nth-child(2) {
				opacity: 0;
			}
			&:nth-child(3) {
				bottom: auto;
				top: 50%;
				transform: translateY(-50%) rotate(-33.7deg);
				width: 72px;
			}
		}
	}
	.header-nav {
		transform: translateX(100%);
		transition: all var(--transition-timing) ease;
		&.open {
			transform: none;
		}
	}
	.header-nav-list,
	.header-nav-access-wrapper,
	.header-nav-tel-wrapper {
		opacity: 0;
		transform: translateY(20px);
		transition: all 1s 0.5s ease;
	}
	.header-nav.open {
		.header-nav-list,
		.header-nav-access-wrapper,
		.header-nav-tel-wrapper {
			opacity: 1;
			transform: none;
		}
	}
}

/* 固定出し入れ */
header {
	.fv-50 {
		transition: opacity var(--transition-timing) ease, visibility var(--transition-timing) ease;
	}
	.fv-50.go-anim {
		opacity: 0;
		visibility: hidden;
	}
}

/* 読み込み */
header {
	.link-list-item {
		transition: opacity var(--transition-timing) ease, transform var(--transition-timing) ease;
		opacity: 0;
		transform: translateX(20px);
		&:nth-child(1) {
			transition: opacity var(--transition-timing) ease, transform var(--transition-timing) ease;
		}
		&:nth-child(2) {
			transition: opacity var(--transition-timing) .2s ease, transform var(--transition-timing) .2s ease;
		}
		&:nth-child(3) {
			transition: opacity var(--transition-timing) .4s ease, transform var(--transition-timing) .4s ease;
		}
		&:nth-child(4) {
			transition: opacity var(--transition-timing) .6s ease, transform var(--transition-timing) .6s ease;
		}
		&:nth-child(5) {
			transition: opacity var(--transition-timing) .8s ease, transform var(--transition-timing) .8s ease;
		}
	}
	.logo {
		transition: opacity var(--transition-timing) 1.4s ease;
		opacity: 0;
	}
}
header:has( + .visible) {
	.link-list-item,
	.logo {
		opacity: 1;
		transform: none;
	}
}