/* ==========================================================
   Header（全幅・角丸なし・スクロールに追従しない。上と左右の余白なし。2026-11-10 依頼者の指示）
   メニューは大カテゴリ（記事があるものだけ）。1 行に収まる 1280px 以上で横並び、それより狭いときはハンバーガーのパネル。
   ========================================================== */
.l-header {
	position: relative;
	z-index: var(--z-header);
	background: var(--c-white);
	color: var(--c-secondary);
	border-bottom: 1px solid var(--c-line);
}

.l-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	max-width: 1480px;
	margin: 0 auto;
	padding: var(--header-pad) 24px;
}

/* Logo（横長 3:1） */
.l-header__logo { flex: 0 0 auto; display: block; line-height: 0; }
.l-header__logo img { width: auto; height: var(--logo-h); }
.c-logo { text-decoration: none; }

/* Toggle（1279px 以下） */
.l-header__toggle {
	position: relative;
	flex: 0 0 auto;
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--c-secondary);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.l-header__toggle-bar,
.l-header__toggle-bar::before,
.l-header__toggle-bar::after {
	position: absolute;
	left: 13px;
	width: 18px;
	height: 2px;
	background: var(--c-white);
	border-radius: 2px;
	transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.l-header__toggle-bar { top: 21px; }
.l-header__toggle-bar::before,
.l-header__toggle-bar::after { content: ''; left: 0; }
.l-header__toggle-bar::before { top: -6px; }
.l-header__toggle-bar::after { top: 6px; }
.l-header__toggle[aria-expanded='true'] .l-header__toggle-bar { background: transparent; }
.l-header__toggle[aria-expanded='true'] .l-header__toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.l-header__toggle[aria-expanded='true'] .l-header__toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }

/* Panel（1279px 以下: ドロップダウンのパネル） */
.l-header__panel {
	display: block;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--header-h) - 16px);
	max-height: calc(100dvh - var(--header-h) - 16px);
	overflow-y: auto;
	padding: var(--space-3) 24px;
	background: var(--c-white);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	box-shadow: var(--shadow-high);
}
.l-header__panel.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s; }
.l-header__nav { margin-bottom: var(--space-3); }

/* Global nav（パネルの中は 2 列） */
.l-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.l-nav__item { display: flex; }
.l-nav__link {
	position: relative;
	z-index: 1;
	flex: 1;
	display: block;
	padding: 10px 16px;
	border-radius: var(--radius-pill);
	color: var(--c-secondary);
	font-size: var(--fz-sm);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur) var(--ease);
}
.l-nav__link:hover,
.l-nav__link:focus-visible,
.l-nav__link.is-current { background: var(--c-secondary); color: var(--c-white); }

/* スライドする背景（PC のみ・JS で位置を指定） */
.l-nav__bg { display: none; }

/* Search */
.p-header-search { position: relative; }
.p-header-search .c-input {
	padding: 0 52px 0 20px;
	height: 44px;
	border-radius: var(--radius-pill);
	border-color: var(--c-line);
	background: var(--c-cream);
}
.p-header-search__btn {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: var(--c-secondary);
	color: var(--c-white);
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color var(--dur), color var(--dur);
}
.p-header-search__btn:hover { background: var(--c-primary); color: var(--c-secondary); }
.p-header-search__btn .c-icon { width: 18px; height: 18px; color: currentColor; }

/* PC（1280px 以上）: ロゴ｜メニュー｜検索 */
@media (min-width: 1280px) {
	.l-header__inner { justify-content: space-between; gap: var(--space-2); }
	.l-header__toggle { display: none; }
	.l-header__panel { display: contents; visibility: visible; opacity: 1; transform: none; transition: none; }
	.l-header__nav { display: flex; justify-content: center; margin: 0; }
	.l-header__actions { display: flex; align-items: center; justify-content: flex-end; }
	.l-nav { display: flex; flex-direction: row; align-items: center; gap: 0; }
	.l-nav__link { padding: 8px 12px; font-size: 0.9375rem; }

	/* ホバーの背景：少し遅れて、ホバーの位置へ滑らかに移る */
	.js .l-nav__link:hover,
	.js .l-nav__link:focus-visible,
	.js .l-nav__link.is-current { background: transparent; color: var(--c-secondary); }
	.js .l-nav__link.is-active { color: var(--c-white); transition-delay: 0.08s; }
	.js .l-nav__bg {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 0;
		height: 0;
		background: var(--c-secondary);
		border-radius: var(--radius-pill);
		opacity: 0;
		pointer-events: none;
		transition: transform 0.45s var(--ease) 0.08s, width 0.45s var(--ease) 0.08s, height 0.2s, opacity 0.3s var(--ease) 0.08s;
	}
	.js .l-nav__bg.is-on { opacity: 1; }
	.js .l-nav__bg.is-init { transition: none; }

	.p-header-search { flex: 0 0 200px; }
}
@media (min-width: 1400px) {
	.l-nav__link { padding: 8px 16px; }
	.p-header-search { flex-basis: 240px; }
}

@media (prefers-reduced-motion: reduce) {
	.l-nav__link,
	.l-nav__bg,
	.l-header__panel { transition: none; }
}

/* SP（767px 以下）: 左右の余白はコンテンツと同じ 16px */
@media (max-width: 767px) {
	.l-header__inner { padding: 10px 16px; }
	.l-header__panel { padding: var(--space-2) 16px var(--space-3); }
}