/**
 * HEADER（2026-09-17、「HEADER 最終実装指示書」）。
 *
 * TOPページ（body.home、<html data-site-state>を持つ）専用の3ステート制御：
 *   intro    … INTRO動画再生中。HEADER完全非表示（opacity/visibility/pointer-events）。
 *   fv       … INTRO終了直後〜FV通過まで。透明HEADERとしてFV動画の上に重なる。
 *   scrolled … FVを通過した後。半透明アイボリー＋backdrop-blurの固定HEADER。
 * data-site-stateの初期値はheader.php内の同期inline script（初回ペイントより前）が
 * 確定させ、状態遷移はassets/js/common/header.js側（intro.jsの'libre:intro-finished'
 * イベント＋FVセクションのIntersectionObserver）が担当する。
 *
 * TOPページ以外（data-site-state属性が存在しないページ）は、下の「デフォルト」
 * （=旧来のscrolled相当の見た目）がそのまま常時適用される＝固定ページの表示は変更しない。
 *
 * z-index方針（セクション25）：content 1〜10 / header 1000 / mobile-menu 1100
 * （sitewideの--z-headerトークンは他コンポーネントと共有のため変更せず、ここでは
 * .site-header自体に直接指定する）。
 */
/**
 * HEADER（2026-09-18、「ヘッダー全面刷新指示書」）。
 *
 * コンセプト：「空の上に浮かぶ、薄いガラスのナビゲーション」。ヘッダー全体を白い帯で覆う
 * ことは一切せず、FV上ではヘッダー自身は完全透明（transparent）にし、SERVICE/WORKS/BLOG/
 * COMPANYの各リンクとCONTACTボタンだけがそれぞれ独立した薄いガラス（glass pill）を持つ
 * ことで、背景（青空・白い雲・建物・光）のどこに重なっても文字が読めるようにする。
 *
 * TOPページ（<html data-site-state>を持つ）専用の3ステート制御は従来通り維持：
 *   intro    … INTRO動画再生中。HEADER完全非表示。
 *   fv       … INTRO終了直後〜FV通過まで。ヘッダー自体は完全透明（各pillのガラスのみ機能）。
 *   scrolled … FVを通過した後。ヘッダー全体にごく薄い白ガラス＋blur/saturateを適用してよい。
 * fv→scrolledの変化はheader.js（updateHeaderScrollProgress）が計算する連続値
 * --scroll-progress（0〜1）でtransition的に滑らかに補間する（二値の唐突な切り替えを禁止）。
 *
 * TOPページ以外（data-site-state属性が存在しないページ）は、ヘッダー背後にFVが無く常時
 * 通常のページ本文が続くため、常時「scrolled」相当のガラス外観を固定で適用する。
 */
.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	/* 新ロゴ（軌道26px＋LIBRE＋タグライン）はheight60px前後に収まるコンパクト設計のため、
	   全ステート共通の単一heightへ整理した（PC：88〜96pxの範囲、96は使わず92で統一）。 */
	height: 92px;
	background: transparent;
	border-bottom: 1px solid transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition:
		background-color 400ms ease,
		border-color 400ms ease,
		box-shadow 400ms ease,
		backdrop-filter 400ms ease,
		opacity .8s cubic-bezier(.16,1,.3,1),
		transform .8s cubic-bezier(.16,1,.3,1);
}

/* 固定ページ（data-site-state属性なし）：TOP専用の「FV上は完全透明」は適用せず、
   常時ガラス外観（scrolled状態と同じ値）を固定で表示する。 */
html:not([data-site-state]) .site-header {
	background: rgba(255,255,255,.74);
	backdrop-filter: blur(16px) saturate(120%);
	-webkit-backdrop-filter: blur(16px) saturate(120%);
	border-bottom-color: rgba(16,42,67,.08);
	box-shadow: 0 4px 20px rgba(8,45,74,.05);
}

/* ============================== TOPページ：STATE 01 INTRO ==============================
   単純に透明にするだけでなく、操作対象としても存在しない状態にする。
   transform:translateY(-8px)もここで持たせておくことで、intro→fvへ切り替わった瞬間に
   「opacity 0→1・translateY(-8px)→0」がfv側のtransitionで正しくアニメーションする。 */
[data-site-state="intro"] .site-header {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px);
	transition: none;
}

/* ============================== TOPページ：STATE 02/03 FV→scrolled ==============================
   「スクロール開始直後に突然白くしない」。fv→scrolledの背景・border・shadow・blurは、
   状態が切り替わった瞬間の二値ジャンプではなく、header.js（updateHeaderScrollProgress）が
   FVセクション下端の実位置から連続的に計算する--scroll-progress（0〜1、0〜150px相当の
   スクロール量に対応）で滑らかに補間する。fv状態（progress=0）ではbackground/backdrop-filter
   ともに実質ゼロ＝ヘッダー自体は完全透明になり、各nav pill／CONTACTのガラスだけが機能する。 */
[data-site-state="fv"] .site-header,
[data-site-state="scrolled"] .site-header {
	background: rgba(255,255,255, calc(var(--scroll-progress, 0) * .74));
	border-bottom-color: rgba(16,42,67, calc(var(--scroll-progress, 0) * .08));
	box-shadow: 0 4px 20px rgba(8,45,74, calc(var(--scroll-progress, 0) * .05));
	backdrop-filter: blur(calc(var(--scroll-progress, 0) * 16px)) saturate(calc(100% + var(--scroll-progress, 0) * 20%));
	-webkit-backdrop-filter: blur(calc(var(--scroll-progress, 0) * 16px)) saturate(calc(100% + var(--scroll-progress, 0) * 20%));
	transition:
		opacity .8s cubic-bezier(.16,1,.3,1) .15s,
		transform .8s cubic-bezier(.16,1,.3,1) .15s;
}

/* ============================== HEADER内部：グリッドで中央にNavigationを配置 ==============================
   セクション7：LIBRE（左）/ Navigation（中央）/ Contact（右）。ナビゲーション自体を
   画面中央に配置するため1fr auto 1fr。 */
/* 左右余白 clamp(32px,6vw,110px)。固定ゲージ（calc(100% - Npx)）ではなくpadding-inlineの
   clampへ一本化し、breakpoint個別指定を不要にする。 */
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-5);
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: clamp(32px, 6vw, 110px);
	box-sizing: border-box;
}

/* ============================== ロゴ（2026-09-18、ヘッダー全面刷新指示書） ==============================
   軌道SVG→LIBREワードマーク→サブコピーの縦積み。FV（透明）状態でも常時判読できるよう
   濃紺(#082d4a)で固定する。ロゴ周辺だけ、白背景ボックスを使わずに
   filter:drop-shadow()のごく弱い白のにじみで、明るい背景に負けないようにする
   （絶対禁止：ロゴの背後に白い矩形パネルを作ること）。 */
.site-logo {
	grid-column: 1;
	justify-self: start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: visible;
	text-decoration: none;
	filter: drop-shadow(0 1px 5px rgba(255,255,255,.35));
	/* ユーザー指示（2026-09-19、ロゴ再修正）：軌道SVGの幅をLIBREワードマークの実際の文字幅へ
	   追従させるため、.site-logo__wordのfont-sizeと同じ値をこのCSS変数でも共有する
	   （ブレイクポイントごとに1箇所だけ変更すれば両方に反映される）。 */
	--logo-word-size: 28px;
}

/* 軌道＋光点。画像ではなくSVGで実装。
   ユーザー指示（2026-09-19、ロゴ再修正）：旧・浅いbezier「軌跡」線＋星は全て撤去し作り直した。
   「LIBREの上を囲う曲線」＝ワードマークの真上に小さくアーチを描くドーム状の曲線にし、
   半円・王冠・紋章のような強い装飾には見えない程度の浅さに留める。幅は--logo-word-size
   （.site-logo__wordと共通）から算出し、文字幅の変化に追従する。 */
.site-logo__orbit {
	display: block;
	overflow: visible;
	width: calc(var(--logo-word-size) * 4.3);
	height: auto;
	margin-bottom: 0;
}

.site-logo__orbit-path {
	fill: none;
	stroke: #082d4a;
	stroke-width: .9;
	stroke-linecap: round;
	opacity: .62;
	/* 出現時のみ左→右へ描画。CSS stroke-dashoffsetのみで実装しGSAPに依存しない
	   （header.jsが全ページで読み込まれるため、GSAPが無い固定ページでも同じ演出が動く）。
	   dasharray/dashoffsetの初期値は実際のpath長（viewBox 0 0 140 24、
	   "M6 20 Q70 1 134 20"の実測約145）より確実に大きい170を固定値として使う＝
	   JSでgetTotalLength()を測る必要がなく、FOUCも起きない。 */
	stroke-dasharray: 170;
	stroke-dashoffset: 170;
	transition: stroke-dashoffset 1.2s cubic-bezier(.25,.46,.45,.94);
}

.site-header.is-logo-ready .site-logo__orbit-path {
	stroke-dashoffset: 0;
}

/* ユーザー指示（2026-09-19、ロゴ再修正）：曲線の右端に「点滅する青い光」を置く。
   サイトのアクセントシアン(#25c8e8)を「青い光」として使う（軌道＝静か、光点＝きらめき、
   という役割分担は維持）。 */
.site-logo__orbit-dot {
	fill: #25c8e8;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(.7);
	filter: drop-shadow(0 0 3px rgba(37,200,232,.7));
	transition: opacity .35s ease .9s, transform .35s ease .9s;
}

/* 線の描画→光点のフェードインが終わってから（合計約1.45秒後）点滅を開始し、
   フェードイン完了時のtransform:scale(1)と滑らかに引き継ぐ。「点滅」＝ゆるい呼吸ではなく
   opacityがはっきり上下する明滅にする。 */
.site-header.is-logo-ready .site-logo__orbit-dot {
	opacity: 1;
	transform: scale(1);
	animation: siteLogoDotBlink 2.2s ease-in-out 1.5s infinite;
}

@keyframes siteLogoDotBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: .28; }
}

/* 上品・細身・クラシック・高級感のあるセリフ体。極端な明朝体・ファンタジーフォントは
   使わない（--font-logo＝EB Garamond、tokens.css）。 */
.site-logo__word {
	margin: 0;
	font-family: var(--font-logo);
	font-weight: 400;
	font-size: var(--logo-word-size);
	line-height: 1;
	letter-spacing: 0.28em;
	color: #082d4a;
}

/* LIBRE本体よりかなり小さく、主役はLIBRE。必ず1行・見切れ禁止。 */
.site-logo__tagline {
	margin: 4px 0 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(7px, .1vw + 6.7px, 9px);
	line-height: 1.2;
	letter-spacing: 0.30em;
	color: rgba(8,45,74,.75);
	white-space: nowrap;
}

.site-header .site-nav {
	grid-column: 2;
}

.site-header__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

/* ============================== NAV：4項目を1つのglass pillで包む ==============================
   ユーザー指示（2026-09-19再指示）：各リンクが個別に枠を持っている状態をやめ、SERVICE/WORKS/
   BLOG/COMPANY全体を1つのガラスのカプセルで覆う（内側の各リンクは背景・borderを持たず、
   hoverでカプセル内の一部分だけがわずかに明るくなる程度に留める）。白いボタンに見えるほど
   濃くしないこと（rgba(255,255,255,.14〜.20)程度）。大文字はtext-transformで表現し
   WordPressメニュー項目の登録テキスト自体は変更しない。 */
.site-header .site-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(2px, .3vw, 4px);
	padding: 6px clamp(8px, .6vw, 10px);
	border-radius: 999px;
	background: rgba(255,255,255,.42);
	border: 1px solid rgba(255,255,255,.36);
	backdrop-filter: blur(9px) saturate(114%);
	-webkit-backdrop-filter: blur(9px) saturate(114%);
	box-shadow: 0 4px 18px rgba(8,45,74,.06);
	transition: background-color 400ms ease, border-color 400ms ease, backdrop-filter 400ms ease, box-shadow 400ms ease;
}

/* ユーザー指示（2026-09-19再指示）：FV（ヘッダー透明時）はこの丸いガラスpillを
   もう少し濃くして視認性を上げる。一方、スクロールしてヘッダー自体が白いガラスになった
   段階では、このpillのガラス表現そのものを完全に無くす（項目の文字だけがヘッダーの
   白背景に直接載る形にする）。ヘッダー本体の不透明度と同じ--scroll-progressに連動させ、
   二値の唐突な切り替えではなく連続的に消えるようにする（hoverのハイライトとシアンの点は
   個別の演出のためここでは変更しない）。 */
[data-site-state="fv"] .site-header .site-nav ul {
	background: rgba(255,255,255,.42);
	border-color: rgba(255,255,255,.5);
	backdrop-filter: blur(12px) saturate(120%);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	box-shadow: 0 4px 18px rgba(8,45,74,.08);
}

[data-site-state="scrolled"] .site-header .site-nav ul {
	background: transparent;
	border-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}

/* 固定ページ（TOP以外）はヘッダー自体が常時白ガラスのため、nav pillの丸い白背景は
   最初から不要。 */
html:not([data-site-state]) .site-header .site-nav ul {
	background: transparent;
	border-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}

.site-header .site-nav a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 clamp(16px, 1.3vw, 20px);
	border-radius: 999px;
	background: transparent;
	font-family: var(--font-display);
	font-size: clamp(11px, .72vw, 12px);
	letter-spacing: 0.20em;
	font-weight: 500;
	text-transform: uppercase;
	color: #082d4a;
	border-bottom: none;
	transition: background-color 300ms ease;
}

/* hoverではカプセル全体ではなく、その項目のセグメントだけがわずかに明るくなる
   （個別ボタンには見せない＝角丸pillの内側にもう一段小さいpillが浮くだけ）。
   ゲームUIのような派手な演出は禁止のため、下に出す印は小さなシアンの光点1つのみに留める。 */
.site-header .site-nav a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #25c8e8;
	box-shadow: 0 0 4px rgba(37,200,232,.7);
	opacity: 0;
	transform: translate(-50%, 3px);
	transition: opacity 280ms ease, transform 280ms ease;
}

.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible,
.site-header .site-nav .current-menu-item > a {
	background: rgba(255,255,255,.30);
}

.site-header .site-nav a:hover::after,
.site-header .site-nav a:focus-visible::after,
.site-header .site-nav .current-menu-item > a::after {
	opacity: 1;
	transform: translate(-50%, 0);
}

.site-header .site-nav a:focus-visible {
	outline: 1px solid #25c8e8;
	outline-offset: 2px;
}

/* ============================== CONTACT：やや強いglass CTA ==============================
   ユーザー指示：CONTACTだけは他navより少し強いガラス（白に近い半透明）にし、CTAとして
   際立たせる。ただし完全な不透明white buttonにはしない。 */
.site-header .btn--contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: clamp(150px, 10vw, 165px);
	height: clamp(48px, 4.2vh, 52px);
	padding-inline: clamp(18px, 1.6vw, 22px);
	border-radius: 999px;
	background: rgba(255,255,255,.78);
	border: 1px solid rgba(255,255,255,.65);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #082d4a;
	/* 基底.btn（button.css）のfont-family:var(--font-mono)を上書きしないと、CONTACTの文字だけ
	   等幅フォントになりnavと質感が揃わず、意図せず「SaaS UIっぽさ」の原因になっていた。 */
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}

.site-header .btn--contact:hover,
.site-header .btn--contact:focus-visible {
	background: rgba(255,255,255,.92);
	transform: translateY(-1px);
	box-shadow: 0 5px 20px rgba(8,45,74,.10);
}

.site-header .btn--contact__arrow {
	display: inline-block;
	transition: transform 300ms ease;
}

.site-header .btn--contact:hover .btn--contact__arrow,
.site-header .btn--contact:focus-visible .btn--contact__arrow {
	transform: translateX(4px);
}

/* Hamburger（アイコンフォント/SVGライブラリ非依存） */
.menu-toggle {
	display: none;
	position: relative;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
}

.menu-toggle__box {
	position: relative;
	width: 22px;
	height: 14px;
	display: block;
}

.menu-toggle__line {
	position: absolute;
	inset-inline: 0;
	height: 1.5px;
	background: var(--color-ink);
	transition: transform var(--duration-base) var(--ease-standard),
		opacity var(--duration-base) var(--ease-standard),
		top var(--duration-base) var(--ease-standard);
}

.menu-toggle__line:first-child {
	top: 0;
}

.menu-toggle__line:last-child {
	top: 100%;
	transform: translateY(-100%);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child {
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

/* ユーザー指示（セクション22）：中央Navigationは1024px以下でハンバーガーへ切り替える
   （旧仕様の767pxから拡張）。ContactはハンバーガーメニューへまとめるためHEADER上からは外す。 */
@media (max-width: 1024px) {
	body.admin-bar .site-header { inset-block-start: 32px; }
	body.admin-bar .mobile-menu { inset-block-start: 32px; }
	body.admin-bar .mobile-menu__panel { min-height: 100%; }

	.menu-toggle {
		display: inline-flex;
	}

	.site-header__actions .btn--contact {
		display: none;
	}

	.site-header .site-nav {
		display: none;
	}

	.site-header__inner {
		grid-template-columns: auto auto;
		justify-content: space-between;
	}

	.site-header__actions {
		grid-column: 2;
	}

	/* Tablet（768〜1024px）：ヘッダー高さを少し詰め、nav pillのpadding/gapも縮小する。 */
	.site-header {
		height: 84px;
	}

	.site-logo {
		--logo-word-size: clamp(22px, 2vw + .6rem, 28px);
	}
}

/* Mobile（〜767px）：セクション14・23。ロゴ（軌道＋光点＋LIBRE）は維持し、Navigation/Contactは
   ハンバーガーメニューへ集約する。 */
@media (max-width: 767px) {
	.site-header__inner {
		padding-inline: 20px;
	}

	.site-logo {
		--logo-word-size: clamp(20px, 5vw, 24px);
	}

	.site-logo__word {
		letter-spacing: 0.28em;
	}

	.site-logo__tagline {
		font-size: 8px;
		letter-spacing: 0.20em;
	}

	.site-header {
		height: 70px;
	}

	.menu-toggle {
		width: 44px;
		height: 44px;
	}
}

/* ユーザー指示（セクション14）：「BEYOND THE BOUNDARIES」は360px以下で非表示でも構わない。 */
@media (max-width: 360px) {
	.site-logo__tagline {
		display: none;
	}
}

/* Mobile menu panel（セクション24：z-index=1100。ゲーム風UIにはしない）。 */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 1100;
}

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

.mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var(--color-ink);
	opacity: 0.4;
	border: none;
}

/* 2026-09-24 レスポンシブ総点検：.mobile-menu__backdropはDOM上で.mobile-menu__panelより後ろにあり、
   どちらもposition:absoluteでz-index未指定のためbackdropがパネルの上に重なっていた
   （実測：elementFromPointが全リンクでbackdropを返す＝タップしても遷移せずメニューが
   閉じるだけ。パネルもbackdropの40%黒で灰色に沈んでいた）。パネルをbackdropより前面へ。
   併せて、iOSのホームバー分のsafe-area余白とスクロール連鎖の抑止を足す。 */
.mobile-menu__panel {
	position: absolute;
	z-index: 1;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(320px, 84vw);
	background: rgba(248,246,239,.96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	padding: var(--space-9) var(--space-6) var(--space-6);
	padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* メニュー展開中：背面のスクロールを止め、ヘッダー（ハンバーガー＝閉じるボタン）を
   パネルより前面に出して常に閉じられるようにする。header.jsが<html>へ付与する
   `has-open-menu`は従来どのCSSからも参照されておらず、背面がスクロールし続けていた。 */
html.has-open-menu,
html.has-open-menu body {
	overflow: hidden;
}

html.has-open-menu .site-header {
	z-index: 1200;
	background: rgba(248,246,239,.96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.mobile-menu__nav ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* セクション24：ゲーム風UIにはしない。十分な余白と読みやすいサイズを確保。 */
.mobile-menu__nav a {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(20px, 5vw, 24px);
	line-height: 1.9;
	color: var(--color-ink);
}

.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible {
	color: var(--color-accent);
}

/* 2026-09-24: 絵コンテ準拠のモバイルドロワー。PCナビへは適用しない。 */
@media (max-width: 1024px) {
	.menu-toggle {
		z-index: 2;
		width: 48px;
		height: 48px;
		border: 1px solid rgba(179,151,91,.32);
		border-radius: 50%;
		background: rgba(253,251,246,.94);
		box-shadow: 0 7px 22px rgba(8,35,58,.12);
		transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
	}

	.menu-toggle__box { width: 21px; height: 13px; }
	.menu-toggle__line { background: #123a5c; }

	.mobile-menu {
		display: block;
		visibility: hidden;
		pointer-events: none;
	}

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

	.mobile-menu__backdrop {
		z-index: 0;
		background: rgba(3,18,32,.55);
		opacity: 0;
		transition: opacity .38s ease;
	}

	.mobile-menu__panel {
		inset-inline-start: auto;
		width: min(92vw, 460px);
		min-height: 100vh;
		min-height: 100dvh;
		padding: calc(30px + env(safe-area-inset-top,0px)) clamp(24px,7vw,38px) calc(24px + env(safe-area-inset-bottom,0px));
		gap: 0;
		background:
			radial-gradient(circle at 15% 18%,rgba(169,220,233,.16),transparent 31%),
			linear-gradient(145deg,rgba(255,253,247,.985),rgba(244,246,243,.97));
		border-left: 1px solid rgba(18,58,92,.12);
		box-shadow: -18px 0 42px rgba(5,25,43,.17);
		transform: translateX(102%);
		transition: transform .46s cubic-bezier(.22,.72,.2,1);
	}

	.mobile-menu__panel::before {
		content: '';
		position: absolute;
		left: clamp(16px,4vw,24px);
		top: calc(88px + env(safe-area-inset-top,0px));
		bottom: calc(22px + env(safe-area-inset-bottom,0px));
		width: 1px;
		background: linear-gradient(transparent,rgba(47,148,180,.42) 15%,rgba(179,151,91,.28) 82%,transparent);
		pointer-events: none;
	}

	.mobile-menu.is-open { visibility: visible; pointer-events: auto; }
	.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
	.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

	.mobile-menu__brand {
		min-height: 62px;
		padding: 4px 58px 17px 4px;
		border-bottom: 1px solid rgba(18,58,92,.16);
		font-family: var(--font-logo);
		font-size: clamp(23px,6.4vw,29px);
		letter-spacing: .08em;
		color: #102f50;
	}

	.mobile-menu__nav { margin-top: clamp(12px,2.6vh,24px); }
	.mobile-menu__nav ul { gap: 0; }
	.mobile-menu__item { border-bottom: 1px solid rgba(18,58,92,.13); }
	.mobile-menu__nav a {
		position: relative;
		justify-content: space-between;
		min-height: clamp(68px,10.2vh,84px);
		padding: 10px 5px 10px 12px;
		font-weight: 400;
		line-height: 1.25;
		transition: color .25s ease, padding-left .25s ease, background-color .25s ease;
	}
	.mobile-menu__nav a::before {
		content: '';
		position: absolute;
		left: 0;
		top: 18%;
		bottom: 18%;
		width: 2px;
		background: #1598bd;
		transform: scaleY(0);
		transition: transform .25s ease;
	}
	.mobile-menu__nav a:hover,
	.mobile-menu__nav a:focus-visible,
	.mobile-menu__nav a:active {
		padding-left: 19px;
		color: #087b9f;
		background: linear-gradient(90deg,rgba(38,175,206,.07),transparent 65%);
	}
	.mobile-menu__nav a:hover::before,
	.mobile-menu__nav a:focus-visible::before,
	.mobile-menu__nav a:active::before { transform: scaleY(1); }
	.mobile-menu__label { display: flex; flex-direction: column; gap: 3px; }
	.mobile-menu__label strong {
		font-family: var(--font-serif);
		font-size: clamp(21px,5.7vw,27px);
		font-weight: 500;
	}
	.mobile-menu__label small { font-size: 10px; letter-spacing: .08em; }
	.mobile-menu__number {
		font-family: var(--font-logo);
		font-size: 11px;
		font-weight: 400;
		letter-spacing: .08em;
		color: #6c7882;
	}

	.mobile-menu__contact {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 66px;
		margin-top: clamp(18px,3vh,28px);
		padding: 12px 18px;
		border: 1px solid rgba(9,101,132,.3);
		background: linear-gradient(120deg,#087799,#10a0b9);
		color: #fff;
		box-shadow: 0 9px 22px rgba(4,85,113,.16);
	}
	.mobile-menu__contact span { display: flex; flex-direction: column; gap: 2px; }
	.mobile-menu__contact strong { font-family: var(--font-serif); font-size: 19px; font-weight: 500; }
	.mobile-menu__contact small { font-size: 10px; letter-spacing: .08em; }
	.mobile-menu__contact i { position: relative; width: 48px; font-style: normal; text-align: right; transition: transform .25s ease; }
	.mobile-menu__contact:hover i,
	.mobile-menu__contact:focus-visible i,
	.mobile-menu__contact:active i { transform: translateX(5px); }

	.mobile-menu__socials {
		display: flex;
		align-items: center;
		gap: 26px;
		margin-top: auto;
		padding: clamp(20px,3vh,30px) 4px 2px;
		font-family: var(--font-logo);
		font-size: 12px;
		letter-spacing: .09em;
		color: #243f57;
	}
	.mobile-menu__socials a { position: relative; padding: 8px 0; }
	.mobile-menu__socials a + a::before { content: ''; position: absolute; left: -13px; top: 50%; width: 1px; height: 14px; background: rgba(18,58,92,.22); transform: translateY(-50%); }

	.mobile-menu__item,
	.mobile-menu__contact,
	.mobile-menu__socials { opacity: 0; transform: translateY(10px); transition: opacity .32s ease,transform .32s ease; }
	.mobile-menu.is-open .mobile-menu__item,
	.mobile-menu.is-open .mobile-menu__contact,
	.mobile-menu.is-open .mobile-menu__socials { opacity: 1; transform: none; }
	.mobile-menu.is-open .mobile-menu__item:nth-child(1) { transition-delay: .15s; }
	.mobile-menu.is-open .mobile-menu__item:nth-child(2) { transition-delay: .21s; }
	.mobile-menu.is-open .mobile-menu__item:nth-child(3) { transition-delay: .27s; }
	.mobile-menu.is-open .mobile-menu__item:nth-child(4) { transition-delay: .33s; }
	.mobile-menu.is-open .mobile-menu__item:nth-child(5) { transition-delay: .39s; }
	.mobile-menu.is-open .mobile-menu__socials { transition-delay: .45s; }

	html.has-open-menu .site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
	html.has-open-menu .site-logo { opacity: 0; pointer-events: none; }
	html.has-open-menu .menu-toggle { background: rgba(255,253,247,.98); border-color: rgba(179,151,91,.5); }
}

@media (max-width: 782px) {
	/* スマホでは管理バーが折り畳まれる／非表示になる環境でもbody.admin-barが残るため、
	   固定46pxを足すとヘッダー上に空白ができる。画面上端へ固定する。 */
	body.admin-bar .site-header { inset-block-start: 0; }
	body.admin-bar .mobile-menu { inset-block-start: 0; }
}

@media (max-width: 340px) {
	.mobile-menu__panel { width: 97vw; padding-inline: 22px; }
	.mobile-menu__nav a { min-height: 64px; }
	.mobile-menu__contact { margin-top: 14px; }
}

/* ユーザー指示（セクション21・27）：HEADER出現transition・縮小animationを最小化する。
   状態そのもの（非表示/透明/固定）は維持し、動きだけを削る。 */
@media (prefers-reduced-motion: reduce) {
	.mobile-menu__panel,
	.mobile-menu__backdrop,
	.mobile-menu__item,
	.mobile-menu__contact,
	.mobile-menu__socials,
	.mobile-menu__nav a,
	.mobile-menu__nav a::before,
	.menu-toggle__line {
		transition: none !important;
	}

	.site-header,
	[data-site-state="intro"] .site-header,
	[data-site-state="fv"] .site-header,
	[data-site-state="scrolled"] .site-header {
		transition: none;
	}

	.site-header .site-nav a,
	.site-header .site-nav a::after {
		transition: none;
	}

	.site-header .site-nav a:hover,
	.site-header .site-nav a:focus-visible {
		transform: none;
	}

	.site-header .btn--contact,
	.site-header .btn--contact:hover,
	.site-header .btn--contact:focus-visible,
	.site-header .btn--contact__arrow {
		transition: none;
		transform: none;
	}

	/* セクション6の軌道・光点アニメーションも縮小モーションでは静止させ、最終状態のみ表示する。 */
	.site-logo__orbit-path {
		transition: none;
		stroke-dashoffset: 0;
	}

	.site-logo__orbit-dot {
		transition: none;
		opacity: 1;
		transform: scale(1);
		animation: none;
	}
}