/* 全体の基礎設定と共通変数 */
/* Base settings and shared tokens */

:root {
	--surface: #fff;
	--text: #222;
	--line: #ddd;
	--site-header-height: 80px;
	--backdrop: rgb(32 32 32 / 30%);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

@media (width > 720px) {
	/* メニュー表示前後のスクロールバー幅確保 */
	/* Scrollbar gutter for menu open-close */
	html {
		scrollbar-gutter: stable;
	}
}


a,
button,
label,
summary {
	touch-action: manipulation;
}

button {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}


/* dialogとメニュー共通部品 */
/* Shared dialog and menu parts */

body:has(dialog[open]) {
	/* ダイアログ表示時の背景スクロール停止 */
	/* Background scroll lock while dialog is open */
	overflow: hidden;
}

.menu-dialog {
	--menu-interaction-delay: 0s;

	position: fixed;
	/* [open]外のレイアウト指定 */
	/* Layout outside [open] */
	display: grid;
	gap: 16px;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 16px 24px;
	border: 0;
	background: var(--surface);
	interactivity: inert;
	pointer-events: none;
	transition:
		opacity 0.4s,
		translate 0.4s ease,
		display 0.4s allow-discrete,
		overlay 0.4s allow-discrete,
		interactivity 0s var(--menu-interaction-delay) allow-discrete,
		pointer-events 0s var(--menu-interaction-delay) allow-discrete;
	transition-behavior: allow-discrete;

	&:not([open]):not(:popover-open) {
		display: none;
	}

	&::backdrop {
		background: var(--backdrop);
		opacity: 0;
		transition: opacity 0.4s;
	}

	&[open],
	&:popover-open {
		--menu-interaction-delay: 0.4s;

		interactivity: auto;
		opacity: 1;
		pointer-events: auto;
		translate: 0 0;

		&::backdrop {
			opacity: 1;
		}

		@starting-style {
			interactivity: inert;
			opacity: 0;
			pointer-events: none;

			&::backdrop {
				opacity: 0;
			}
		}
	}
}

.menu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.menu-list {
	/* リスト側スクロール */
	/* List-owned scrolling */
	display: grid;
	align-content: start;
	gap: 12px;
	min-height: 0;
	overflow-y: auto;
	/* スクロール連鎖の内側管理 */
	/* Inner scroll containment */
	overscroll-behavior-y: contain;

	a,
	summary {
		cursor: pointer;
		font-weight: bold;
	}

	> a,
	summary {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding-inline: 16px;
		border-radius: 8px;
		transition: background-color 0.2s;

		@media (any-hover: hover) {
			&:hover {
				background-color: var(--bg);
			}
		}
	}
}

.menu-meta {
	margin: 0;
}


/* コンパクトpopoverメニュー */
/* Compact popover menu */

.menu-compact {
	inset: calc(var(--site-header-height) + 8px) 24px auto auto;
	display: block;
	width: 320px;
	min-height: 0;
	max-height: calc(100dvh - var(--site-header-height) - 32px);
	padding: 10px;
	border-radius: 8px;
	box-shadow:
		0 16px 40px rgb(32 32 32 / 10%),
		inset 0 0 0 1px var(--line);
	opacity: 0;
	translate: 0 -8px;

	@media (width <= 568px) {
		inset-inline-start: 24px;
		width: auto;
	background-color: rgba(255,255,255,0.8);
	}

	&::backdrop {
		background: transparent;
	}

	.menu-list {
		gap: 8px;
		max-height: inherit;

		> a {
			min-height: 0;
			padding: 12px;
			line-height: 1.25;
		}
	}

	&:popover-open {
		opacity: 1;
		translate: 0 0;

		@starting-style {
			opacity: 0;
			translate: 0 -8px;
		}
	}
}


/* 共通ヘッダーと本文レイアウト */
/* Shared header and page layout */

.site-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--site-header-height);
	padding-inline: 24px;
	background-color: rgb(255 255 255 / 0.9);
	border-bottom: 1px solid #CCC;
}

/* -------------------------------------------for SP */
@media screen and (max-width:767.98px) {
.header_menu_area {
	display: none;
}
}

/* =========================
	background-color: #CDE;
========================= */

/* -------------------------------------------for PC */
@media screen and (min-width:768px) {
.header_menu_area {
	width:100%;
	display: flex;
	gap: min(24px, 2vw);
	justify-content: flex-end;
}
.header_menu_area a {
	font-size: 0.75rem;
	border-bottom: 1px solid #CCC;
	color: #78340F;
	letter-spacing: 0.05em;
	transition: 0.5s;
	font-weight: normal;
	opacity: 0.8;
}
.header_menu_area a:hover {
	border-bottom: 1px solid #78340F;
	color: #000;
	font-weight: normal;
	transition: 0.5s;
	opacity: 1;
}
}







.brand-xxxxxx {
	font-weight: 300;
	letter-spacing: .15em;
}

.scroll-test-space {
	/* スクロール検証用の本文高さ */
	/* Content height for scroll checks */
	min-height: 140vh;
}




/* アイコンボタン類 */
/* Icon button controls */

.button-icon {
	position: relative;
	display: grid;
	flex: 0 0 48px;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s;

	@media (any-hover: hover) {
		&:hover {
			background-color: var(--bg);
		}
	}

	/* 文字なしボタンの疑似要素アイコン */
	/* Pseudo-element icon for textless buttons */
	&::before,
	&::after {
		position: absolute;
		width: 20px;
		height: 2px;
		border-radius: 20px;
		background: currentColor;
		content: "";
	}
}

.button-menu {
	/* ::before本体とbox-shadowによる三本線 */
	/* Three lines from ::before and box-shadow */
	&::before {
		width: 24px;
		height: 2px;
		border-radius: 20px;
		background: currentColor;
		box-shadow:
			0 -6px 0 currentColor,
			0 6px 0 currentColor;
	}

	&::after {
		/* 三本線では不要な二本目疑似要素 */
		/* Unused second pseudo-element for the three-line icon */
		content: none;
	}
}

.button-close {
	transition:
		background-color 0.2s,
		rotate 0.2s ease;

	@media (any-hover: hover) {
		&:hover {
			rotate: 90deg;
		}
	}

	/* ::beforeと::afterの交差による×印 */
	/* X mark from crossed ::before and ::after */
	&::before {
		rotate: 45deg;
	}

	&::after {
		rotate: -45deg;
	}
}