/* =========================================================
   ヘッダー（追従）
   Figma node 113:19026 を基準にPC幅で再現。
   色・角丸・影・フォントは tokens.css の変数経由。
   ※ モバイル（ハンバーガー）は別途対応予定。
   ========================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: var(--bg-white);
	box-shadow: 0 4px 4px rgba(163, 147, 124, 0.2); /* Figma実測のヘッダー影（写真影 --shadow-photo とは別物） */
}

/* 中央寄せの内側コンテナ。Figmaの基準幅1280pxに合わせる */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1280px;
	height: 100px;
	margin: 0 auto;
	padding: 0 33px; /* Figma：ロゴ左33px（PC≥1025px。≤1024pxは下の@mediaで16pxに） */
}

/* PC既定：パネルは display:contents で nav・CTA を __inner の flex 直下にそのまま並べる（現状維持）。
   ハンバーガーボタンはPC/タブレットでは非表示（スマホ ≤599px でのみ表示）。 */
.site-header__panel {
	display: contents;
}
.site-header__toggle {
	display: none;
}

/* --- ロゴ --- */
.site-header__logo {
	flex: 0 0 auto;
	line-height: 0;
}

.site-header__logo a {
	display: inline-block;
}

.site-header__logo img {
	display: block;
	width: 152px;  /* Figma実測。書き出しは2x相当 */
	height: auto;
}

/* =========================================================
   グローバルナビ
   ========================================================= */
.global-nav {
	flex: 1 1 auto;
}

.global-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 各メニュー項目 */
.global-nav__list > li {
	position: relative; /* ドロップダウンの基準 */
}

.global-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mincho);
	font-weight: 300;            /* W3相当 */
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-text);    /* 本文色ルール：背景が #CDC3B6 でないため --color-text(#524635) */
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.global-nav__list > li > a:hover {
	opacity: 0.6;
}

/* ▼カレットは廃止：各項目はサブメニューを持たないセクション内アンカーのため、
   開かない▼は中途半端になる。テキストのみのスッキリした項目にする。
   （サブメニューCSSは将来用に残置・childrenが無い限り表示されない） */

/* --- ドロップダウン（サブメニュー）※将来用・現状は未使用 --- */
.global-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 180px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--bg-white);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(163, 147, 124, 0.3); /* ドロップダウン用のソフト影（写真影とは別物） */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 10;
}

.global-nav__list > li.menu-item-has-children:hover .sub-menu,
.global-nav__list > li.menu-item-has-children:focus-within .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.global-nav .sub-menu a {
	display: block;
	padding: 8px 20px;
	font-family: var(--font-mincho);
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease;
}

.global-nav .sub-menu a:hover {
	background: var(--bg-cream);
}

/* =========================================================
   CTAピル（相談予約・お問い合わせ）
   ========================================================= */
.site-header__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 26px;
	font-family: var(--font-gothic);
	font-weight: 600;            /* W6相当 */
	font-size: 16px;
	letter-spacing: 0.32px;
	color: var(--bg-white);
	text-decoration: none;
	white-space: nowrap;
	background: var(--cta-gradient);
	border-radius: var(--cta-radius); /* 高さ50pxなので完全カプセルになる */
	transition: opacity 0.2s ease;
}

.site-header__cta:hover {
	opacity: 0.9;
}

/* =========================================================
   スマホ＋タブレット（≤1024px）：ハンバーガーメニュー
   PC（1025px以上）は上記の現状ナビ＋ドロップダウン＋グラデCTAを据え置き。
   ========================================================= */
@media (max-width: 1024px) {
	.site-header__inner {
		height: 60px;       /* スマホのヘッダー高 */
		padding: 0 16px;
	}
	.site-header__logo img {
		width: 150px;       /* コンパクトヘッダー(≤1024)のロゴ幅。高さは比率維持 */
		height: auto;
	}

	/* ハンバーガーボタン（3本線） */
	.site-header__toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		margin-left: auto;
		background: none;
		border: 0;
		cursor: pointer;
	}
	.site-header__toggle-bar {
		display: block;
		width: 26px;
		height: 2px;
		margin: 0 auto;
		background: var(--color-text);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}
	/* 開いたら×に */
	.site-header.is-open .site-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.site-header.is-open .site-header__toggle-bar:nth-child(2) { opacity: 0; }
	.site-header.is-open .site-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* パネル（nav＋CTA）：ヘッダー直下のドロップダウン。既定は非表示、is-openでスライド表示 */
	.site-header__panel {
		display: block; /* PCの display:contents を打ち消し */
		position: absolute;
		top: 60px;
		left: 0;
		right: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 12px 16px 20px;
		background: var(--bg-white);
		box-shadow: 0 8px 8px rgba(163, 147, 124, 0.2);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		pointer-events: none;
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	}
	.site-header.is-open .site-header__panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}

	/* パネル内：ナビは縦並み、ドロップダウンの▼は使わないフラット表示 */
	.site-header__panel .global-nav {
		width: 100%;
	}
	.site-header__panel .global-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.site-header__panel .global-nav__list > li > a {
		display: block;
		padding: 14px 8px;
		font-size: 16px;
		border-bottom: 1px solid var(--color-frame);
	}
	/* パネル内のCTAは横いっぱい・下部に */
	.site-header__panel .site-header__cta {
		display: flex;
		width: 100%;
		box-sizing: border-box; /* padディング込みで100%に収める＝横はみ出し防止 */
		margin-top: 16px;
		height: 52px;
	}
}

/* スマホ（≤599px）：右下の追従FAB(.cta-fab)に一本化するため、
   ハンバーガーメニュー内のCTAピルは非表示（役割重複）。タブレット(600〜1024)は残す。PCも不変。 */
@media (max-width: 599px) {
	.site-header__panel .site-header__cta {
		display: none;
	}
}