/* ============================================================
 * header.css — ヘッダーとナビゲーション
 *
 * PC（1024px 以上）: 高さ 72px・1 行。ロゴ＋社名 | メニュー | JA/EN | Contact
 * 1024px 未満      : ロゴ＋社名 | ハンバーガー → 全画面オーバーレイ
 *
 * 部品はコアの Navigation ブロックをそのまま使う（開閉・フォーカス制御・
 * aria 属性はコアの実装）。ここでは見た目と切り替え幅だけを決める。
 * ============================================================ */

/* ---- 枠：上部に固定、不透明、下に罫線 1 本 ---- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	margin-block: 0;
	background-color: var(--wp--preset--color--base);
	border-bottom: var(--wp--custom--hairline);
}

/* 固定ヘッダーの下にページ内リンクの行き先が隠れないようにする */
html {
	scroll-padding-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--20));
}

/* ヘッダー直下の main はテンプレート側で余白を持つ */
.wp-site-blocks > header.wp-block-template-part + * {
	margin-block-start: 0;
}

.xxmi-header__bar {
	min-height: var(--wp--custom--header-height);
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

/* ---- ロゴ＋社名：折り返さない。ロゴの文字と社名の文字の高さをそろえる ----
 * ロゴ画像（MI_ModernGothicBlack.png、1077×423px）は、文字のまわりに透明の余白を持つ
 * （上下 61px・左右 62px。文字そのものは 953×301px）。
 * 社名（Noto Sans JP 700）の漢字の高さは、文字サイズの 0.94 倍（ベースラインの上 0.85・下 0.09）。
 *
 *   画像の高さ = 社名の文字サイズ × 0.94 ÷（301 ÷ 423）
 *
 * 画像の左右の余白は負のマージンで詰め、ロゴの文字の左端を「左端の線」に置く。
 * ロゴ画像を差し替えたときは、--xxmi-logo-ink と --xxmi-logo-pad を画像に合わせて直す。 */
.xxmi-header__brand {
	--xxmi-brand-size: var(--wp--preset--font-size--medium);
	--xxmi-logo-ink: 0.7116; /* 文字の高さ ÷ 画像の高さ（301 ÷ 423） */
	--xxmi-logo-pad: 0.1466; /* 左右の余白 ÷ 画像の高さ（62 ÷ 423） */
	--xxmi-logo-height: calc(var(--xxmi-brand-size) * 0.94 / var(--xxmi-logo-ink));
	flex: 0 0 auto;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.xxmi-header__brand .wp-block-site-logo {
	line-height: 0;
}

.xxmi-header__brand .wp-block-site-logo img {
	display: block;
	width: auto;
	max-width: none;
	height: var(--xxmi-logo-height);
	margin-inline: calc(var(--xxmi-logo-height) * var(--xxmi-logo-pad) * -1);
	border-radius: 0;
}

.xxmi-header__brand .wp-block-site-title {
	margin: 0;
	font-size: var(--xxmi-brand-size);
	line-height: 1;
	white-space: nowrap;
	/* 行の箱の中で漢字は少し上に寄る。ロゴの文字と上端・下端が合うように下げる（実測 0.56px）。 */
	transform: translateY(0.035em);
}

/* ---- メニュー（PC） ---- */
.xxmi-nav {
	flex: 0 1 auto;
}

.xxmi-nav .wp-block-navigation__container {
	align-items: center;
	flex-wrap: nowrap;
}

.xxmi-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink-600);
	white-space: nowrap;
	transition: color 240ms ease;
}

.xxmi-nav .wp-block-navigation-item__content:hover,
.xxmi-nav .wp-block-navigation-item__content:focus-visible,
.xxmi-nav .current-menu-item > .wp-block-navigation-item__content,
.xxmi-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

/* ============================================================
 * インク：現在地とホバーを、メニューの下の 1 つのインクで示す
 *
 * かたち：両端に丸いインクだまり、あいだは細い糸。伸びるほど糸は細く、だまりは大きくなり、
 *         短くなると 2 つのだまりが 1 つの丸いしずくにまとまる。
 * 動き  ：粘りのある液体のように動く。
 *   - 進む側の端は、すっと出て、ゆっくり止まる（--xxmi-ink-creep）
 *   - 残る側の端は、少し粘ってから離れ、遅れて追いつく（--xxmi-ink-drag）
 *   - 現在地のないページでは、ホバーした項目の中央にしずくが現れ、左右に広がる。
 * 跳ね返りは付けない（粘度の高い液体は弾まない）。色は文字と同じ墨 1 色。
 *
 * assets/js/nav-ink.js が次の 2 つを nav に差し込む（そのとき nav に .has-ink が付く）。
 *   .xxmi-nav__ink       … 見えない要素。左右の端の位置だけを持ち、下の transition で動く
 *   .xxmi-nav__ink-shape … SVG。上の要素の今の位置を読んで、液体の輪郭を描く
 * スクリプトが動かないとき・編集画面では、項目ごとの下線（::after）で同じ状態を示す。
 * ============================================================ */
.xxmi-nav {
	--xxmi-ink-creep: cubic-bezier(0.22, 1, 0.36, 1);
	--xxmi-ink-drag: cubic-bezier(0.6, 0, 0.2, 1);
	--xxmi-ink-weight: 2px;
	--xxmi-ink-offset: 4px;
	position: relative;
}

.xxmi-nav__ink {
	position: absolute;
	top: 0;
	left: 0;
	right: 100%;
	height: var(--xxmi-ink-weight);
	opacity: 0; /* インクの量として読む（0 = なし、1 = すべて）。表示は SVG が受け持つ */
	visibility: hidden;
	pointer-events: none;
}

.xxmi-nav__ink-shape {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	color: var(--wp--preset--color--contrast);
	pointer-events: none;
}

.xxmi-nav__ink-shape path {
	fill: currentColor;
}

.xxmi-nav__ink.is-on {
	opacity: 1;
}

/* 消える：左右の端が中央へ集まって 1 つのしずくになり、そのあと小さくなる */
.xxmi-nav__ink.is-ready {
	transition:
		left 460ms var(--xxmi-ink-drag),
		right 460ms var(--xxmi-ink-drag),
		opacity 320ms var(--xxmi-ink-drag) 340ms;
}

/* 現れる：中央にしずくがふくらみ、少し置いてから左右へ広がる */
.xxmi-nav__ink.is-ready.is-on {
	transition:
		left 560ms var(--xxmi-ink-creep) 120ms,
		right 560ms var(--xxmi-ink-creep) 120ms,
		opacity 260ms var(--xxmi-ink-creep);
}

/* 右へ流れる：右端が先に進み、左端が粘って追う */
.xxmi-nav__ink.is-ready.is-on[data-dir="right"] {
	transition:
		right 400ms var(--xxmi-ink-creep),
		left 620ms var(--xxmi-ink-drag) 40ms,
		opacity 260ms var(--xxmi-ink-creep);
}

/* 左へ流れる：左端が先に進み、右端が粘って追う */
.xxmi-nav__ink.is-ready.is-on[data-dir="left"] {
	transition:
		left 400ms var(--xxmi-ink-creep),
		right 620ms var(--xxmi-ink-drag) 40ms,
		opacity 260ms var(--xxmi-ink-creep);
}

/* スクリプトなし・編集画面：項目ごとの下線。現在地は常に、ホバーでは左からにじむ */
.xxmi-nav:not(.has-ink) .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-contact) > .wp-block-navigation-item__content {
	position: relative;
}

.xxmi-nav:not(.has-ink) .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-contact) > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + var(--xxmi-ink-offset));
	height: var(--xxmi-ink-weight);
	border-radius: var(--xxmi-ink-weight);
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 520ms var(--xxmi-ink-creep);
}

.xxmi-nav:not(.has-ink) .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-contact) > .wp-block-navigation-item__content:is(:hover, :focus-visible)::after,
.xxmi-nav:not(.has-ink) .wp-block-navigation__container > :is(.current-menu-item, .current-menu-ancestor):not(.nav-contact) > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* 1024px 未満（全画面メニュー）では線を使わない */
@media (max-width: 1023.98px) {
	.xxmi-nav__ink,
	.xxmi-nav__ink-shape,
	.xxmi-nav .wp-block-navigation-item__content::after {
		display: none;
	}
}

.xxmi-nav a:focus-visible,
.xxmi-header__brand a:focus-visible,
.xxmi-nav button:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-accent);
	outline-offset: 4px;
}

/* ---- Contact：ヘッダー内で唯一のボタン ---- */
/* ホバーでは、墨が下から満ちる（同じ粘りの動き）。液面は平らではなく、中央が盛り上がった丸い形。
 * 現在地のときは満ちたまま。
 *   塗りは楕円の上半分（中心はボタンの下辺）。高さ 0% → 160% で、角まで覆う。 */
.xxmi-nav .nav-contact > .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--brand-accent);
	background-image: radial-gradient(ellipse farthest-side at 50% 100%, var(--wp--preset--color--contrast) 99%, transparent 100%);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 150% 0%;
	color: var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
	transition: background-size 620ms var(--xxmi-ink-creep);
}

.xxmi-nav .nav-contact > .wp-block-navigation-item__content:hover,
.xxmi-nav .nav-contact > .wp-block-navigation-item__content:focus-visible,
.xxmi-nav .nav-contact.current-menu-item > .wp-block-navigation-item__content {
	background-size: 150% 160%;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* ---- 言語切替（mu-plugin xxmi-40 が <li class="xxmi-lang"> を差し込む） ---- */
.xxmi-nav .xxmi-lang {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	line-height: 1.5;
	white-space: nowrap;
}

.xxmi-nav .xxmi-lang__link {
	color: var(--wp--preset--color--ink-600);
	font-weight: 400;
	opacity: 1;
	text-decoration: none;
}

.xxmi-nav .xxmi-lang__link:hover {
	color: var(--wp--preset--color--contrast);
}

.xxmi-nav .xxmi-lang__link.is-current {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	pointer-events: none;
}

.xxmi-nav .xxmi-lang__sep {
	color: var(--wp--preset--color--ink-200);
	opacity: 1;
}

/* ---- サブメニュー（編集者が 1 階層だけ足した場合の見た目） ---- */
.xxmi-nav .wp-block-navigation__submenu-container {
	min-width: 15rem;
	padding: var(--wp--preset--spacing--10) 0;
	border: var(--wp--custom--hairline);
	border-radius: 0;
	background-color: var(--wp--preset--color--white);
	box-shadow: none;
}

.xxmi-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
}

/* ---- ハンバーガーと閉じるボタン：押せる範囲 44px、アイコンは右端の線に乗せる ---- */
.xxmi-nav .wp-block-navigation__responsive-container-open,
.xxmi-nav .wp-block-navigation__responsive-container-close {
	padding: 0.625rem;
	margin-right: -0.625rem;
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

/* ---- 切り替え幅を 600px → 1024px に上げる ----
 * コアは 600px 以上で横並びメニューに切り替える。600〜1023px でも
 * ハンバーガーのままにするため、その範囲だけコアの指定を打ち消す。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.xxmi-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.xxmi-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ---- 全画面オーバーレイ（1024px 未満） ---- */
.xxmi-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0 var(--wp--custom--gutter) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.xxmi-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: calc((var(--wp--custom--header-height) - 2.75rem) / 2);
	right: 0;
}

.xxmi-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--30));
}

.xxmi-nav .is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.xxmi-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
	align-items: stretch;
}

.xxmi-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.xxmi-lang):not(.nav-contact) {
	border-bottom: var(--wp--custom--hairline);
}

.xxmi-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.xxmi-lang):not(.nav-contact) > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: var(--wp--preset--spacing--20) 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.xxmi-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.xxmi-nav .is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-accent) !important;
}

/* コアはオーバーレイ内の項目を縦積み・右寄せにするので、言語切替だけ横並び・左寄せに戻す。
 * コア側のセレクターがクラス 4 個分の強さなので、それより強く書く。 */
.xxmi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .xxmi-lang {
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.xxmi-nav .is-menu-open .nav-contact > .wp-block-navigation-item__content {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
	text-align: center;
}

/* オーバーレイ内のサブメニューは開いたまま 1 段下げて並べる */
.xxmi-nav .is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	min-width: 0;
	padding: 0 0 var(--wp--preset--spacing--20);
	border: 0;
	background-color: transparent;
}

.xxmi-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--10) 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

/* 動きを減らす設定のときは、線と塗りを動かさず、状態だけを切り替える */
@media (prefers-reduced-motion: reduce) {
	.xxmi-nav .wp-block-navigation-item__content,
	.xxmi-nav .wp-block-navigation-item__content::after,
	.xxmi-nav .nav-contact > .wp-block-navigation-item__content,
	.xxmi-nav__ink,
	.xxmi-nav__ink.is-ready,
	.xxmi-nav__ink.is-ready.is-on,
	.xxmi-nav__ink.is-ready.is-on[data-dir] {
		transition: none;
	}
}

/* ============================================================
 * 社名：スクロールすると、インクのように溶けてロゴに吸い込まれる（assets/js/brand-ink.js）
 *
 *   - 1 文字ずつ、にじみながらロゴの右端（--dx だけ左）まで流れ、ロゴに重なったところで消える。
 *     ロゴに近い文字から順に動く（--in）。戻るときは遠い文字から順に出てくる（--out）。
 *   - にじみ：文字ごとのぼかし（下の filter: blur）＋ 社名全体のしきい値フィルター（.is-melting）。
 *     ぼけた輪郭をしきい値で切るので、インクのかたまりになり、近づくと互いにつながる。
 *     どちらも CSS だけで動く（Safari でも描き直される）。しきい値が効かなくても、ぼかしは出る。
 *   - 速さはナビのインクと同じ粘り。跳ね返りは付けない。
 *   - ロゴ：線を太らせた写し（.xxmi-brand__swell）を、右から左へ帯状に見せる。
 *     インクがロゴの中を流れ、通ったところの線がにじんで太り、また元に戻る。
 * ============================================================ */
.xxmi-brand__ch {
	display: inline-block;
	white-space: pre;
	transform-origin: left center;
	filter: blur(0);
	transition:
		transform 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--out, 0ms),
		opacity 110ms linear var(--out, 0ms),
		filter 360ms ease calc(var(--out, 0ms) + 260ms);
	will-change: transform, filter;
}

/* 吸い込まれる：まずにじみ、はじめは粘って動かず、だんだん速くなってロゴに入る。
 * しずくのように横長につぶれながら進み、ロゴの右端に重なったところで消える。 */
.xxmi-header__brand.is-absorbed .xxmi-brand__ch {
	transform: translateX(calc(var(--dx, 0px) * -1)) scale(0.75, 0.4);
	opacity: 0;
	filter: blur(2px);
	transition:
		transform 560ms cubic-bezier(0.45, 0, 0.7, 0.8) var(--in, 0ms),
		opacity 80ms linear calc(var(--in, 0ms) + 500ms),
		filter 300ms ease var(--in, 0ms);
}

/* フィルターは、ブラウザによってはリンクの箱の中にしか描かれない（WebKit。箱の外へ流れたインクが途切れる）。
 * ロゴまでの道のりが箱に入るよう、見た目と並びは変えずに、箱だけを左と上下に広げておく。 */
.xxmi-header__brand .wp-block-site-title a {
	display: inline-block;
	padding: 8px 6px 8px 48px;
	margin: -8px -6px -8px -48px;
}

/* 動いているあいだだけ：ぼけた輪郭をしきい値で切って、インクのかたまりにする */
.xxmi-header__brand .wp-block-site-title a.is-melting {
	-webkit-filter: url(#xxmi-brand-ink);
	filter: url(#xxmi-brand-ink);
}

/* 吸い込まれたあとは、見えない社名がクリックを受けないようにする（ロゴが Home へのリンク） */
.xxmi-header__brand.is-absorbed .wp-block-site-title {
	pointer-events: none;
}

/* 位置を測るあいだと、開いた直後に状態を合わせるあいだは、動かさない */
.xxmi-header__brand.is-measuring .xxmi-brand__ch {
	transform: none !important;
	transition: none !important;
}

.xxmi-header__brand.is-instant .xxmi-brand__ch {
	transition: none !important;
}

/* ---- ロゴ：インクが流れて線がにじむ ---- */
.xxmi-header__brand .wp-block-site-logo a {
	display: block;
	position: relative;
	transform-origin: left center;
}

/* ロゴの写し。枠で「ぼかし＋しきい値」を掛け、中の画像は帯（マスク）の中だけ見せる。
 * 帯の中では線が太り、帯の端ではなだらかに元の太さへ戻る。ふだんは帯がロゴの外にあって見えない。 */
.xxmi-brand__swell {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	-webkit-filter: url(#xxmi-logo-swell);
	filter: url(#xxmi-logo-swell);
}

.xxmi-header__brand .wp-block-site-logo .xxmi-brand__swell img {
	display: block;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 62%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 62%, transparent 100%);
	-webkit-mask-size: 70% 100%;
	mask-size: 70% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 340% 0;
	mask-position: 340% 0;
}

/* 吸い込むとき：最初のインクが届く頃に右端から入り、左へ流れて抜ける。ロゴ全体もわずかにふくらむ。 */
.xxmi-header__brand.is-absorbed .wp-block-site-logo .xxmi-brand__swell img {
	animation: xxmi-logo-ink-in 1150ms cubic-bezier(0.35, 0.2, 0.5, 0.9) 430ms both;
}

.xxmi-header__brand.is-absorbed .wp-block-site-logo a {
	animation: xxmi-brand-swallow 1500ms both;
}

/* 社名が出ていくとき：ロゴの中のインクが左から右へ抜けていく */
.xxmi-header__brand.is-released .wp-block-site-logo .xxmi-brand__swell img {
	animation: xxmi-logo-ink-out 760ms cubic-bezier(0.35, 0.2, 0.5, 0.9) both;
}

@keyframes xxmi-logo-ink-in {
	from { -webkit-mask-position: 340% 0; mask-position: 340% 0; }
	to { -webkit-mask-position: -240% 0; mask-position: -240% 0; }
}

@keyframes xxmi-logo-ink-out {
	from { -webkit-mask-position: -240% 0; mask-position: -240% 0; }
	to { -webkit-mask-position: 340% 0; mask-position: 340% 0; }
}

@keyframes xxmi-brand-swallow {
	0%, 30% { transform: scale(1); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
	62% { transform: scale(1.03, 1.035); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
	100% { transform: scale(1); }
}

/* 動きを減らす設定のときは、移動もにじみもなく、静かに消える・現れる */
@media (prefers-reduced-motion: reduce) {
	.xxmi-brand__ch,
	.xxmi-header__brand.is-absorbed .xxmi-brand__ch {
		transform: none;
		filter: none;
		transition: opacity 200ms ease;
	}

	.xxmi-header__brand.is-absorbed .wp-block-site-logo a,
	.xxmi-header__brand.is-absorbed .wp-block-site-logo .xxmi-brand__swell img,
	.xxmi-header__brand.is-released .wp-block-site-logo .xxmi-brand__swell img {
		animation: none;
	}
}