/* =========================================================================
 * Make it — ヘッダー／グローバルナビ／SPオーバーレイ（フェーズ2）
 *
 * 見た目の正：Figma PC 24:3 ／ SP 17:3 ／ オーバーレイ 353:2。
 * 値の一次ソースは theme.json → tokens.css の意味名（--c-*, --font-*, --radius …）。
 * ここではコンポーネント固有の寸法・局所色のみ定義する。
 *
 * PC／モバイルの切替は 1024px。デザインは 375 / 768 / 1280 を定義するが、
 * PCヘッダー（ロゴ＋ナビ6項目＋CTA）が窮屈にならない 1024px を分岐点に採用。
 * ====================================================================== */

:root {
	/* コンテンツ内寸 1040px（＝Figma 1280 − 左右120）を保ちつつ、狭幅では詰める */
	--mk-header-pad-x: max(1.5rem, calc((100vw - 1040px) / 2));

	/* オーバーレイ（濃紺面）の局所色 —— tokens 化しない画面固有値 */
	--mk-menu-line: #37526c;   /* 2026-08：primary #17324C 上の細線・仕切り（Figma 353:3 / 353:15） */
	--mk-menu-label: #7c8488;  /* SPヘッダー「MENU」ラベル（Figma 17:9） */
}

/* -------------------------------------------------------------------------
 * スクリーンリーダー専用テキスト／スキップリンク
 * ---------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	word-wrap: normal;
}

.mk-skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1100;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	background: var(--c-primary);
	color: var(--c-on-dark);
	border-radius: var(--radius);
	font-family: var(--font-body);
}

/* -------------------------------------------------------------------------
 * ロゴ（アイコンマーク＋ワードマーク）
 * ---------------------------------------------------------------------- */
.mk-logo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	color: inherit;
}

.mk-logo__mark {
	display: block;
	flex: none;
	width: 13px;
	height: 29px;
}

.mk-logo__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ワードマーク：SP（416:2）20px ／ PC（416:4）30px。ともに Zen Kaku Bold・tracking 0。 */
.mk-logo__word {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--c-primary);
}

.mk-logo--on-dark .mk-logo__word {
	color: var(--c-on-dark);
}

/* -------------------------------------------------------------------------
 * ボタン（ヘッダーCTA／オーバーレイCTAで共用）
 * ---------------------------------------------------------------------- */
.mk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-min-h);
	padding: 0 30px;
	border-radius: var(--radius);
	/* ラベル：SP（17:22）＝Noto Medium 13px ／ PC（24:30）＝Noto Medium 15px */
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

@media (min-width: 1024px) {
	.mk-btn {
		font-size: 15px;
	}
}

/* 2026-08：主CTAの面色を藍墨→コーラルへ（全ページ共通）。
   --c-accent（#E96847）は白文字だと3.2:1でAA不合格のため、面には
   濃いめの --c-accent-strong（#C7502B・4.55:1）を使う。
   ※2026-08-20 野中様より「読みやすさの基準を満たすよう調整して問題ない」と
     承認を得て確定（確認③）。ただし全体が暗い印象にならないことが条件のため、
     深めるのはボタン面と明面の文字のみに留め、暗面の文字は逆に明るく振っている
     （--c-accent-on-dark）。
   --accent クラスは final CTA 専用だった名残りだが、同じコーラル濃を指すため
   実質 --primary と同一。マークアップは維持しつつ値だけ揃えている。 */
.mk-btn--primary,
.mk-btn--accent {
	background: var(--c-accent-strong);
	color: var(--c-on-dark);
}

.mk-btn--accent {
	font-weight: 700;
}

.mk-btn--outline-light {
	background: transparent;
	color: var(--c-on-dark);
	border: 1px solid var(--c-on-dark-sub);
}

.mk-btn--primary:hover,
.mk-btn--accent:hover {
	opacity: 0.9;
}

.mk-btn--outline-light:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* =========================================================================
 * モバイル基準（< 1024px）—— Figma 17:3
 * ====================================================================== */
.mk-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* SP：高さ57px・左28／右18、下境界線（Figma 17:3／17:7）。

	   ■ 上下paddingを撤去して min-height に置き換えた理由（Issue #69）
	   以前は `padding: 14px 18px 14px 28px` で、**高さを指定せず
	   「padding + 中身」の結果として高さが決まっていた**。中身のうち最も高い
	   MENUトグルが44px（タップ領域の下限）なので 14+44+14 = 72px になり、
	   Figma の 57px から +15px ずれていた。

	   高さを直接 57px に決めると、ロゴ（29px）は `align-items: center` で
	   センタリングされ、**上下14pxが自動で出る**（Figma 91:5 と同値。
	   手で書かずに一致する）。トグルの44pxも57pxの内側に収まるため、
	   負マージン等のマジックナンバーが不要。

	   PC は下の @media (min-width: 1024px) で `padding: 22px …` に上書きされ、
	   高さは 22+50+22 = 94px（Figma 24:3）。57px より高いので min-height は
	   PC 側に影響しない。 */
	min-height: 57px;
	padding: 0 18px 0 28px;
	border-bottom: 1px solid var(--c-border);
}

/* PCナビ／PC CTA はモバイルでは隠す */
.mk-nav,
.mk-header__cta {
	display: none;
}

/* MENUトグル：高さは --btn-min-h から切り離して 44px 固定にする（Issue #69）。
   これは「ボタンの意匠サイズ」ではなく**タップ領域の下限**（44×44）で、
   Figma のボタン高さ（SP 46px／PC 50px）とは別の根拠を持つ値。
   Figma（17:9）はMENUテキスト 29×12 のみでボタン面を持たないが、それは
   **Figmaがタップ領域を描いていないだけ**で、実装側で確保するのが正しい。
   幅は padding 4px＋MENUラベル約30px で 38px にしかならなかったため、
   min-width で 44px を担保する（Issue #69）。**ラベル自体は29pxのままなので
   見た目は変わらない**。
   トークンを参照したままだと、ボタン高さを変えるたびに SPヘッダー全体の高さが
   動いてしまう（実際に Issue #51 で 44→46px にした際、上下padding 14px と
   合わせてヘッダーが 72→74px に伸びた）。
   ヘッダー高さそのものの扱い（Figma 17:3 は 57px・実装は 72px）は Issue #69 で
   決める。ここでは「ボタン高さの変更に引きずられない」ことだけを担保する。 */
.mk-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 4px;
	background: none;
	border: 0;
	cursor: pointer;
}

.mk-menu-toggle__label {
	font-family: var(--font-label);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 1.6px;
	color: var(--mk-menu-label);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * SPオーバーレイメニュー（Figma 353:2）
 * ---------------------------------------------------------------------- */
.mk-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--c-primary);
	color: var(--c-on-dark);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mk-menu.is-open {
	opacity: 1;
}

.mk-menu[hidden] {
	display: none;
}

/* 通り道（rail）：左端の縦線＋節点。装飾なので aria-hidden。 */
.mk-menu__rail {
	position: absolute;
	left: 16px;
	top: 146px;
	bottom: 190px;
	width: var(--rail-width);
	background: var(--mk-menu-line);
	pointer-events: none;
}

.mk-menu__rail::before {
	content: "";
	position: absolute;
	left: -4px;
	top: -4px;
	width: var(--rail-node);
	height: var(--rail-node);
	border-radius: 50%;
	background: var(--c-on-dark-sub);
}

.mk-menu__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 24px;
	box-sizing: border-box;
}

.mk-menu__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.mk-menu__head .mk-logo__word {
	font-size: 22px;
}

.mk-menu__close {
	background: none;
	border: 0;
	padding: 0 4px;
	min-width: 44px;
	min-height: 44px;
	margin: -10px -8px 0 0;
	color: var(--c-on-dark);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mk-menu__eyebrow {
	margin: 44px 0 0 16px;
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: 1.32px;
	color: var(--c-on-dark-sub);
}

.mk-menu__list {
	list-style: none;
	margin: 24px 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.mk-menu__list a {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
	color: var(--c-on-dark);
	text-decoration: none;
}

.mk-menu__foot {
	margin-top: auto;
	padding-top: 40px;
}

.mk-menu__divider {
	border: 0;
	height: 1px;
	margin: 0 0 24px;
	background: var(--mk-menu-line);
}

.mk-menu__ctas {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mk-menu__cta {
	width: 100%;
	height: 52px;
}

.mk-menu__sns {
	display: flex;
	gap: 24px;
	margin: 24px 0 0;
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.6px;
	color: var(--c-on-dark-sub);
}

.mk-menu__sns a {
	color: inherit;
	text-decoration: none;
}

/* オーバーレイ展開中は背面スクロールを止める */
.mk-scroll-locked {
	overflow: hidden;
}

/* =========================================================================
 * PC（≥ 1024px）—— Figma 24:3
 * ====================================================================== */
@media (min-width: 1024px) {
	.mk-header__inner {
		justify-content: flex-start;
		gap: 0;
		/* PC：左右120px（＝1280基準）まで開き、狭幅は詰める */
		padding: 22px var(--mk-header-pad-x);
		border-bottom: 0;
	}

	.mk-logo {
		gap: 11px;
	}

	.mk-logo__mark {
		width: 18px;
		height: 40px;
	}

	.mk-logo__word {
		font-size: 30px;
	}

	/* ナビは右寄せで伸縮 */
	.mk-nav {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
	}

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

	.mk-nav__list a {
		font-family: var(--font-body);
		font-weight: 500;
		font-size: 14px;
		line-height: 1;
		color: var(--c-text-sub);
		text-decoration: none;
		white-space: nowrap;
		transition: color 0.2s ease;
	}

	.mk-nav__list a:hover {
		color: var(--c-primary);
	}

	/* CTA はナビの右・32px 空けて。
	   高さの個別指定（height: 50px）は撤去した（Issue #51）。--btn-min-h が
	   PCで50pxになったため .mk-btn 側と同値で、ヘッダーだけFigma通り・本文は
	   44px という不統一の原因だった指定。トークンに一本化する。 */
	.mk-header__cta {
		display: inline-flex;
		margin-left: 32px;
	}

	/* MENU トグルは PC では非表示 */
	.mk-menu-toggle {
		display: none;
	}

	/* オーバーレイは PC では出さない（トグル非表示で開けないが念のため） */
	.mk-menu {
		display: none;
	}
}

/* モーションを抑える設定では即時表示 */
@media (prefers-reduced-motion: reduce) {
	.mk-menu {
		transition: none;
	}
}