.headercontainer {
	width: 100%;
	font-size: x-large;
	font-weight: bold;
}

#menubar a {
	color: black;
}

.menu-text {
	display: none;
}

#menubar {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	height: 50px;
	padding: 0 1%;
	opacity: 0.7;
	transition: background 0.3s ease;
	background: rgba(255, 255, 255, 0.8);
}

a.左上ロゴ {
	text-decoration: unset;
}

.menubar-item>a {
	width: max-content;
	display: inline-block;
	text-decoration: unset;
}


.menubar-list {
	display: flex;
	flex-direction: row;
	column-gap: 10%;
	margin: 0;
	font-size: 0.6em;
	justify-content: flex-end;
}

.megaMenu {
	position: absolute;
	background: rgba(255, 255, 255, 0.8);
	transform: translateY(-120%);
	opacity: 0;
	z-index: -1;
	transition:
		transform 0.4s ease,
		opacity 0.3s ease;
	padding: 10px
}

.menubar-item.open>.megaMenu {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.mega-childlink {
	padding-left: 10%;
	font-size: 0.8em;
}

#menu-overlay {
	position: fixed;
	inset: 0;

	background: transparent;

	z-index: 90;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

#menu-overlay.open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* メニューバーはoverlayより上 */
#menubar {
	position: relative;
	z-index: 100;
}


@media (max-width: 1000px) {

	/* =========================
       ヘッダー
    ========================= */

	.headercontainer {
		position: relative;
		z-index: 1000;
	}

	/* Nishiki */
	.menu-text {
		position: fixed;
		top: 20px;
		left: 20px;
		z-index: 1200;
		margin: 0;
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 0.08em;
	}

	.menu-text>h1 {}

	.menu-text a {
		color: #111;
		text-decoration: none;
	}


	/* =========================
       ハンバーガー
    ========================= */

	#menubar_hdr {
		position: fixed;
		top: 18px;
		right: 20px;

		width: 46px;
		height: 46px;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 6px;

		background: rgb(255 255 255 / 50%);
		border-radius: 50%;

		z-index: 1300;

		cursor: pointer;

		box-shadow:
			0 5px 20px rgba(0, 0, 0, 0.08);
	}

	#menubar_hdr span {
		display: block;

		width: 20px;
		height: 2px;

		background: #111;

		transition:
			transform 0.35s ease,
			opacity 0.25s ease;
	}


	/* ハンバーガー → × */

	#menubar_hdr.open span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	#menubar_hdr.open span:nth-child(2) {
		opacity: 0;
	}

	#menubar_hdr.open span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}


	/* =========================
       メニュー本体
    ========================= */

	#menubar {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100dvh;
		display: block;
		padding: 50px 30px 50px;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.97);
		overflow-y: auto;
		transform: translateX(100%);
		opacity: 0;
		visibility: hidden;
		transition:
			transform 0.45s ease,
			opacity 0.3s ease,
			visibility 0.45s;
		z-index: 1100;
	}

	#menubar.open {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}


	/* PC用ロゴは非表示 */

	#menubar .左上ロゴ {
		display: flex;
		justify-content: center;
		padding: 0px 10px 20px 0px;
		font-size: xx-large;
	}


	/* =========================
       メインメニュー
    ========================= */

	.menubar-list {
		display: flex;
		flex-direction: column;

		width: 100%;

		margin: 0;
		padding: 0;

		list-style: none;
	}

	.menubar-item {
		position: relative;

		width: 100%;

		border-bottom:
			1px solid rgba(0, 0, 0, 0.1);
	}

	.menubar-item>a {
		position: relative;

		display: block;

		width: 100%;

		padding: 20px 5px;

		box-sizing: border-box;

		color: #111;

		font-size: clamp(18px, 5vw, 24px);
		font-weight: 500;

		text-decoration: none;
	}


	/* =========================
       ＋アイコン
    ========================= */

	.menubar-item>.ddmenu::before,
	.menubar-item>.ddmenu::after {
		content: "";

		position: absolute;

		top: 50%;
		right: 8px;

		width: 16px;
		height: 1px;

		background: #111;

		transition: transform 0.3s ease;
	}

	.menubar-item>.ddmenu::after {
		transform: rotate(90deg);
	}

	.menubar-item.open>.ddmenu::after {
		transform: rotate(0);
	}


	/* =========================
       メガメニュー
    ========================= */

	.megaMenu {
		position: static;

		width: 100%;

		background: transparent;

		transform: none;

		max-height: 0;
		opacity: 0;
		overflow: hidden;

		visibility: hidden;

		transition:
			max-height 0.5s ease,
			opacity 0.3s ease;
	}

	.menubar-item.open>.megaMenu {
		max-height: 800px;
		opacity: 1;
		visibility: visible;
	}


	/* =========================
       メガメニュー内部
    ========================= */

	.megaMenu-list {
		display: flex;
		flex-direction: column;

		margin: 0;
		padding:
			0 0 15px 20px;

		list-style: none;
	}

	.megaMenu-item {
		width: 100%;

		margin: 0;
		padding: 0;
	}

	.mega-childttl,
	.mega-childlink {
		margin: 0;
	}

	.mega-childttl a,
	.mega-childlink a {
		display: block;

		padding: 10px 5px;

		color: #555;

		font-size: 15px;

		text-decoration: none;
	}

	.mega-childttl a {
		font-weight: 600;
	}


	/* =========================
       オーバーレイ
    ========================= */

	#menu-overlay {
		position: fixed;
		inset: 0;

		background: rgba(0, 0, 0, 0.2);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		z-index: 1000;

		transition:
			opacity 0.3s ease,
			visibility 0.3s ease;
	}

	#menu-overlay.open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

}