/* ==========================================================================
   l-header（Figma l-header 11:55 Theme=Solid／Transparent・SP l-header-sp 157:128）— header.php
   - Solid: 白い地と下の線。画面の上に固定（sticky）
   - Transparent: トップのヒーローの上。上から黒の薄いグラデーション・白い文字。画面に固定し、スクロールすると Solid（.is-scrolled。header.js）
   - PC 1280px 以上は Figma のとおり。1100〜1279px は電話番号を隠す。768〜1099px はナビを2段目に。767px 以下は SP（ロゴとメニューだけ）
   ========================================================================== */

.l-header {
	position: sticky;
	top: var(--admin-bar-offset, 0px); /* ログイン中は管理バーの下（common/foundation.css） */
	z-index: 100;
	background: var(--color-bg-canvas);
	box-shadow: inset 0 -1px 0 var(--color-border-default); /* 下の線（高さ 96 の内側。Figma） */
	transition: background-color 0.3s, box-shadow 0.3s;
}

.l-header--transparent {
	position: fixed;
	right: 0;
	left: 0; /* 上は .l-header と同じ。600px 以下のログイン中は、管理バーが見えているあいだだけその下（js/corporate/header.js） */
	background: linear-gradient(to bottom, rgb(0 0 0 / 0.4), rgb(0 0 0 / 0)); /* Figma の値（写真の上で文字を読みやすく） */
	box-shadow: none;
}

.l-header--transparent.is-scrolled {
	background: var(--color-bg-canvas);
	box-shadow: inset 0 -1px 0 var(--color-border-default);
}

.l-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	height: 96px;
	padding: 0 var(--space-xl) 0 var(--space-3xl);
}

/* ロゴ（透過のときは白、それ以外は黒） */
.l-header__logo {
	display: block;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
}

.l-header__logo-img {
	width: 126px;
	height: 36px;
	object-fit: contain;
}

.l-header__logo-img--white,
.l-header--transparent:not(.is-scrolled) .l-header__logo-img--black {
	display: none;
}

.l-header--transparent:not(.is-scrolled) .l-header__logo-img--white {
	display: block;
}

.l-header__right {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
}

.l-header__nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
}

.l-header__nav-item {
	display: block;
	padding-block: var(--space-sm);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-primary);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s;
}

.l-header__nav-item:hover {
	color: var(--color-text-brand);
}

.l-header__tel {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.l-header__tel-number {
	display: flex;
	align-items: center;
	gap: 6px; /* Figma の値 */
	font: 600 28px / 1 var(--font-en); /* Figma の値（電話番号） */
	color: var(--color-text-primary);
	text-decoration: none;
	white-space: nowrap;
}

.l-header__tel-icon {
	width: 18px;
	height: 18px;
}

.l-header__tel-hours {
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-secondary);
	white-space: nowrap;
}

.l-header__cta.c-button {
	width: 200px;
}

/* 透過のときの文字の色 */
.l-header--transparent:not(.is-scrolled) .l-header__nav-item,
.l-header--transparent:not(.is-scrolled) .l-header__tel-number,
.l-header--transparent:not(.is-scrolled) .l-header__tel-hours,
.l-header--transparent:not(.is-scrolled) .l-header-sp__menu {
	color: var(--color-text-on-brand);
}

.l-header--transparent:not(.is-scrolled) .l-header__nav-item:hover {
	color: var(--color-text-on-brand);
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* SP のメニューボタン（PC では出さない） */
.l-header-sp__menu {
	display: none;
}

/* ---------- PC の幅が狭いとき ---------- */
@media (max-width: 1279px) {
	.l-header__tel {
		display: none;
	}

	.l-header__bar {
		padding-inline: var(--space-xl);
	}

	.l-header__nav-list {
		gap: var(--space-lg);
	}
}

@media (min-width: 768px) and (max-width: 1099px) {
	.l-header__bar {
		flex-wrap: wrap;
		row-gap: 0;
		height: auto;
		padding: var(--space-md) var(--space-lg) 0;
	}

	.l-header__right {
		display: contents;
	}

	.l-header__cta.c-button {
		order: 2;
		margin-left: auto;
	}

	.l-header__nav {
		order: 3;
		width: 100%;
	}

	.l-header__nav-list {
		justify-content: center;
		gap: var(--space-lg);
		padding-top: var(--space-2xs);
	}
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.l-header__bar {
		gap: var(--space-xs);
		height: 64px;
		padding: 0 var(--space-sm) 0 var(--space-lg);
	}

	.l-header__logo-img {
		width: 98px;
		height: 28px;
	}

	/* 押せる高さを 44px に（見た目は同じ） */
	.l-header__logo {
		padding-block: 8px;
		margin-block: -8px;
	}

	.l-header__right {
		display: none;
	}

	.l-header-sp__menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px; /* Figma の値 */
		width: 56px;
		height: 52px;
		padding: 0;
		color: var(--color-text-primary);
		background: none;
		border: 0;
		border-radius: var(--radius-md);
	}

	.l-header-sp__menu-icon {
		width: 26px;
		height: 26px;
	}

	.l-header-sp__menu-label {
		font: var(--text-body-s);
		letter-spacing: var(--ls-body-s);
		line-height: 1.4;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.l-header {
		transition: none;
	}
}