/* ===========================================================
   Object / Component / Header
   サイト共通ヘッダー（固定）+ SPドロワーメニュー
   - レイアウト：ロゴ左、その他（ナビ+CTA）を右にまとめる
   - ヘッダー内コンテンツは max-width 1280px、左右 clamp(16px, 4vw, 40px)
   - SPはアイコン3つ＋右からスライドインのドロワー
   =========================================================== */

:root {
	--header-h-sp: 64px;
	--header-h-pc: 80px;
}

/* 固定ヘッダー分のオフセットは .l-main 側に持たせる（layout/_main.css 参照）。
   ※ body に padding-top を持たせない理由：将来 FV を意図的にヘッダー下に潜り込ませる
   ページが出た場合、main 単位でクラスを切り替えれば済むため。 */

/* ===========================
   ヘッダー本体（固定 / 全幅白背景）
   =========================== */

.c-header {
	position: fixed;
	inset: 0 0 auto 0;
	width: 100%;
	background-color: var(--color-white);
	z-index: 100;
	transition: box-shadow 0.3s ease;
}

.c-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

.c-header__inner {
	display: flex;
	align-items: center;
	height: var(--header-h-sp);
	max-width: var(--content-max);     /* 1280px */
	margin-inline: auto;
	padding-inline: 16px;
	gap: 12px;
}

@media (min-width: 768px) {
	.c-header__inner {
		height: var(--header-h-pc);
		padding-inline: clamp(12px, 1.5vw, 40px);
		gap: clamp(6px, 0.8vw, 16px);
	}
}

/* ===========================
   ロゴ（左固定、右側を margin-right:auto で押しやる）
   =========================== */

.c-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: auto; /* これでナビ・CTA・アイコンが右寄せされる */
}

.c-header__logo img {
	width: 140px;
	height: auto;
}

@media (min-width: 768px) {
	.c-header__logo img {
		width: 110px;
	}
}

@media (min-width: 1280px) {
	.c-header__logo img {
		width: 140px;
	}
}

@media (min-width: 1440px) {
	.c-header__logo img {
		width: 160px;
	}
}

/* ===========================
   PCグロナビ（768px以上で表示・7項目）
   =========================== */

.c-header__nav {
	display: none;
}

@media (min-width: 768px) {
	.c-header__nav {
		display: flex;
		flex-shrink: 0;
	}

	.c-header__nav ul {
		display: flex;
		align-items: center;
		gap: clamp(4px, 0.6vw, 16px);
	}

	.c-header__nav a {
		display: inline-block;
		padding: 6px 4px;
		font-size: 12px;
		font-weight: 500;
		color: var(--color-text);
		white-space: nowrap;
		transition: color 0.2s ease;
	}

	@media (hover: hover) {
		.c-header__nav a:hover {
			color: var(--color-pink-500);
		}
	}
}

@media (min-width: 1280px) {
	.c-header__nav a {
		font-size: 14px;
	}

	.c-header__nav ul {
		gap: 16px;
	}
}

@media (min-width: 1440px) {
	.c-header__nav a {
		font-size: 15px;
	}

	.c-header__nav ul {
		gap: 22px;
	}
}

/* ===========================
   PC CTA（電話 + Web予約）
   =========================== */

.c-header__cta {
	display: none;
}

@media (min-width: 768px) {
	.c-header__cta {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
}

.c-header__tel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--color-navy-500);
	border-radius: 16px;
	color: var(--color-navy-500);
	height: 48px;
	box-sizing: border-box;
	transition: var(--transition-base);
}

@media (hover: hover) and (min-width: 768px) {
	.c-header__tel:hover {
		background-color: var(--color-navy-100);
		color: var(--color-navy-500);
	}
}

.c-header__tel-icon {
	width: 18px;
	height: 18px;
	display: inline-flex;
	flex-shrink: 0;
}

.c-header__tel-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

/* 1279px以下では「電話予約」ラベルを隠して横幅を圧縮 */
.c-header__tel-label {
	display: none;
	font-size: 11px;
	color: var(--color-navy-500);
}

.c-header__tel-number {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

@media (min-width: 1280px) {
	.c-header__tel {
		gap: 8px;
		padding: 8px 18px;
		height: 56px;
	}
	.c-header__tel-icon { width: 20px; height: 20px; }
	.c-header__tel-label {
		display: block;
		font-size: 12px;
	}
	.c-header__tel-number { font-size: 16px; }
}

@media (min-width: 1440px) {
	.c-header__tel-number { font-size: 18px; }
}

/* ヘッダー専用のWeb予約ボタン微調整
   ※他ボタンは pill（9999px）だがヘッダー内ボタンは 16px の角丸に統一 */
.c-header__reserve {
	height: 48px;
	width: auto;
	padding-inline: 18px;
	gap: 6px;
	border-radius: 16px;
}

.c-header__reserve .c-button__text {
	padding-left: 20px;
	padding-right: 20px;
	gap: 2px;
}

.c-header__reserve .c-button__icon {
	width: 14px;
	height: 14px;
	right: 14px;
}

.c-header__reserve .c-button__icon--left {
	left: 14px;
}

.c-header__reserve-label {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

/* 1279px以下では「24時間受付中」サブラベルを隠して横幅を圧縮 */
.c-header__reserve-sub {
	display: none;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

@media (min-width: 1280px) {
	.c-header__reserve {
		height: 56px;
		padding-inline: 24px;
	}
	.c-header__reserve .c-button__text {
		padding-left: 24px;
		padding-right: 24px;
	}
	.c-header__reserve .c-button__icon {
		width: 18px;
		height: 18px;
		right: 24px;
	}
	.c-header__reserve .c-button__icon--left {
		left: 24px;
	}
	.c-header__reserve-label { font-size: 16px; }
	.c-header__reserve-sub { display: block; font-size: 11px; }
}

/* ===========================
   SPアイコン群（電話 / ピン / ハンバーガー）
   =========================== */

.c-header__sp-icons {
	display: flex;
	align-items: center;
	gap: 16px;
}

@media (min-width: 768px) {
	.c-header__sp-icons {
		display: none;
	}
}

.c-header__sp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.c-header__sp-icon img,
.c-header__sp-icon svg {
	width: 100%;
	height: 100%;
}

.c-header__hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}

@media (hover: hover) and (min-width: 768px) {
	.c-header__hamburger:hover {
		opacity: 0.7;
	}
}

.c-header__hamburger img,
.c-header__hamburger svg {
	width: 100%;
	height: 100%;
}

/* ===========================
   ドロワー（SP）
   =========================== */

.c-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: min(82vw, 360px);
	height: 100dvh;
	background-color: var(--color-white);
	z-index: 110;
	transform: translateX(100%);
	transition: transform 0.32s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	padding: 24px 24px 32px;
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}

.c-drawer.is-open {
	transform: translateX(0);
}

@media (min-width: 768px) {
	.c-drawer {
		display: none;
	}
}

.c-drawer__close {
	align-self: flex-end;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	font-size: 28px;
	line-height: 1;
	color: var(--color-navy-500);
	margin-bottom: 8px;
}

.c-drawer__nav ul {
	display: flex;
	flex-direction: column;
}

.c-drawer__nav li {
	border-bottom: 1px dotted var(--color-pink-300);
}

.c-drawer__nav a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 4px;
	color: var(--color-navy-500);
	font-size: 16px;
	font-weight: 500;
}

.c-drawer__nav a::before {
	content: ">";
	color: var(--color-pink-500);
	font-weight: 700;
}

.c-drawer__cta {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.c-drawer__tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	color: var(--color-navy-500);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.c-drawer__tel-icon {
	width: 20px;
	height: 20px;
	display: inline-flex;
}

.c-drawer__reserve {
	width: 100%;
	max-width: 288px;
}

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

.c-drawer-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 105;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.32s ease, visibility 0.32s ease;
}

.c-drawer-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

@media (min-width: 768px) {
	.c-drawer-overlay {
		display: none;
	}
}

/* ドロワー展開時はbody背面のスクロールを止める */
body.is-drawer-open {
	overflow: hidden;
}