/* =========================================================
   グローバルナビ：カテゴリ別メガメニュー & ドロワー階層
   header.php の $nav_groups 構成に対応。
   既存の巨大CSSは触らず、ここで階層UIだけを追加する。
   ========================================================= */

/* ===== PC：ヘッダードロップダウン ===== */
.hp-header__menu .hp-header__item { position: relative; }

/* ドロップダウンが親で切れないように */
.hp-header__nav,
.hp-header__menu { overflow: visible; }

/* ホバー領域をパネルまで繋ぐ透明ブリッジ（隙間で閉じない） */
.hp-header__item.has-sub::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -12px;
	right: -12px;
	height: 18px;
}

.hp-megamenu {
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 228px;
	padding: 12px;
	background: rgba(22, 16, 14, .97);
	border: 1px solid rgba(228, 196, 140, .22);
	border-radius: 12px;
	box-shadow: 0 22px 48px rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .26s ease, transform .26s ease, visibility .26s;
	z-index: 300;
}

/* 上部の三角ポインタ */
.hp-megamenu::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	width: 11px;
	height: 11px;
	transform: translateX(-50%) rotate(45deg);
	background: rgba(22, 16, 14, .97);
	border-left: 1px solid rgba(228, 196, 140, .22);
	border-top: 1px solid rgba(228, 196, 140, .22);
}

.hp-header__item.has-sub:hover > .hp-megamenu,
.hp-header__item.has-sub:focus-within > .hp-megamenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.hp-megamenu__list { list-style: none; margin: 0; padding: 0; }
.hp-megamenu__list li { margin: 0; padding: 0; }

.hp-megamenu__list a {
	display: flex !important;
	flex-direction: column;
	gap: 3px;
	padding: 10px 14px !important;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease;
}
.hp-megamenu__list a:hover,
.hp-megamenu__list a:focus-visible {
	background: rgba(228, 196, 140, .12);
}

/* 既存の .hp-header__menu a 装飾(::before/::after)を子リンクでは無効化 */
.hp-megamenu__list a::before,
.hp-megamenu__list a::after {
	content: none !important;
	display: none !important;
}

.hp-megamenu__jp {
	font-family: "Noto Serif JP", serif;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #fff;
}
.hp-megamenu__en {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .18em;
	color: rgba(228, 196, 140, .82);
}

/* 親項目（サブあり）のキャレット ▾ */
.hp-header__item.has-sub > a { position: relative; }
.hp-header__caret {
	display: block;
	width: 6px;
	height: 6px;
	margin: 5px auto 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
	transition: transform .26s ease, opacity .2s ease;
}
.hp-header__item.has-sub:hover > a .hp-header__caret,
.hp-header__item.has-sub:focus-within > a .hp-header__caret {
	transform: rotate(-135deg);
	opacity: 1;
}

/* ===== モバイル：ドロワーのカテゴリ階層 ===== */
.hp-drawer__home > a,
.hp-drawer__contact > a {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.hp-drawer__group { margin: 0; }

.hp-drawer__group-head,
.hp-drawer__group-link {
	margin: 0;
	padding: 16px 2px 8px;
	display: flex;
	align-items: baseline;
	gap: 12px;
	border-bottom: 1px solid rgba(228, 196, 140, .20);
	text-decoration: none;
}
.hp-drawer__group-en {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	color: rgba(228, 196, 140, .85);
}
.hp-drawer__group-jp {
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.hp-drawer__sub {
	list-style: none;
	margin: 0 0 4px;
	padding: 2px 0;
}
.hp-drawer__sub li { margin: 0; }
.hp-drawer__sub a {
	display: flex !important;
	align-items: baseline;
	gap: 10px;
	padding: 11px 6px 11px 16px !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.hp-drawer__sub a::before,
.hp-drawer__sub a::after {
	content: none !important;
	display: none !important;
}
.hp-drawer__sub-jp {
	font-family: "Noto Serif JP", serif;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .92);
}
.hp-drawer__sub-en {
	font-size: 8.5px;
	letter-spacing: .16em;
	color: rgba(228, 196, 140, .6);
	margin-left: auto;
}

/* HOME / CONTACT の英日表記 */
.hp-drawer__home .hp-drawer__en,
.hp-drawer__contact .hp-drawer__en {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	color: rgba(228, 196, 140, .85);
}
.hp-drawer__home .hp-drawer__jp,
.hp-drawer__contact .hp-drawer__jp {
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

/* 項目が増えたぶんドロワー内をスクロール可能に */
.hp-drawer__inner { overflow-y: auto; }

/* =========================================================
   ヘッダーナビを一回り大きく・くっきり（2026-07-17）
   EN 11.5→13px / JP 9.5→10.5px、白100%+薄シャドウで映像上でも読める
   ========================================================= */
.hp-header__menu .hp-header__item > a > span {
	font-size: 13px;
	letter-spacing: .14em;
}
.hp-header__menu .hp-header__item > a > small {
	font-size: 10.5px;
}
.hp-header__menu .hp-header__item > a {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 14px rgba(0, 0, 0, .62);
}
.hp-header__menu {
	gap: 34px;
}