@layer components {
	/* ヘッダー（デザイン .hdr） */
	.hdr {
		position: sticky; inset-block-start: 0; z-index: 50;
		background: #fff; border-bottom: 1px solid var(--line);
	}
	.hdr__bar {
		display: flex; align-items: center; gap: 36px;
		height: var(--header-h); padding-inline: 18px;
	}
	.logo { display: flex; align-items: center; gap: 13px; min-width: 0; }
	.mark { flex: none; display: grid; place-items: center; }
	.mark .lg { width: auto; height: 32px; }
	.mark .lg.inv { filter: brightness(0) invert(1); }
	.logo-t { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: .08em; line-height: 1.4; }
	.logo-s { display: block; font-size: 8px; font-weight: 500; letter-spacing: .2em; color: var(--ink-faint); margin-top: 3px; line-height: 1.3; }

	.gnav { margin-inline-start: auto; }
	.gnav ul { display: flex; gap: 28px; font-size: 14px; font-weight: 500; letter-spacing: .05em; }
	.gnav li { padding-block: 4px; border-bottom: 2px solid transparent; }
	.gnav li.on { border-bottom-color: var(--mint); }
	.hbtn {
		background: var(--mint); color: #fff; font-size: 13.5px; font-weight: 500; letter-spacing: .05em;
		padding: 12px 22px; display: none; align-items: center; gap: 9px; flex: none;
	}

	/* 開閉ボタン（スマホ・タブレット） */
	.mb {
		margin-inline-start: auto; width: 44px; height: 44px; display: grid; place-items: center;
		background: none; border: 1px solid var(--line-mid); color: var(--ink); cursor: pointer; flex: none;
	}
	.mb svg { width: 22px; height: 22px; }
	.mb .mb-x { display: none; }
	.mb[aria-expanded="true"] .mb-x { display: block; }
	.mb[aria-expanded="true"] .mb-o { display: none; }

	/* 開いたメニュー：ヘッダーの下に縦に並べる（罫線リスト .rows と同じ見た目。HANDOFF「未決」参照） */
	.js .gnav { display: none; }
	.js .gnav.is-open { display: block; position: absolute; inset-inline: 0; inset-block-start: 100%;
		background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(7, 88, 75, .35); }
	.gnav.is-open ul { flex-direction: column; gap: 0; border-top: 1px solid var(--ink); margin-inline: 20px; font-size: 16px; }
	.gnav.is-open li { border-bottom: 1px solid var(--line); padding: 0; }
	.gnav.is-open li.on { border-bottom-color: var(--line); }
	.gnav.is-open li.on a { color: var(--mint); font-weight: 700; }
	.gnav.is-open a { display: block; padding: 16px 4px; }
	.gnav.is-open { padding-bottom: 20px; }

	@media (min-width: 1180px) {
		.hdr__bar { padding-inline: 52px; }
		.mark .lg { height: 40px; }
		.logo-t { font-size: 17.5px; }
		.logo-s { font-size: 9.5px; }
		.mb { display: none; }
		.js .gnav, .gnav { display: block; position: static; box-shadow: none; border: 0; padding: 0; }
		.gnav ul, .gnav.is-open ul { flex-direction: row; gap: 28px; border: 0; margin: 0; font-size: 14px; }
		.gnav.is-open li, .gnav li { border-bottom: 2px solid transparent; padding-block: 4px; }
		.gnav li.on, .gnav.is-open li.on { border-bottom-color: var(--mint); }
		.gnav.is-open a { padding: 0; display: inline; }
		.hbtn { display: inline-flex; }
	}
}