/*!
 * global-header.css — 親テーマ共通ヘッダー（masthead / モバイル dialog）の CSS サブセット。
 *
 * ── 出所（追随運用の導線）──
 * 抽出元 : packages/hokushu-parent-theme/public/_common/wp-content/themes/hokushu/assets/css/style-latest.css
 *          （sha256 先頭 16 桁 = d7ba8649ac956ed0）
 * 抽出日 : 2026-08-18（Issue #1186）／**部分再抽出 2026-09-03（Issue #1263）**
 *          — #1263 で Nav 6 項目の再編とカレント写像（is-*）の再設計を行ったため、
 *            親を再ビルドしたうえで**当該ブロックだけ**追随させた。差分は
 *            `.l-globalNav__item.is-active,…` の 2 ブロックのセレクタ列のみで、
 *            それ以外は 2026-08-18 の抽出結果のまま（全文再抽出だと minify/整形の
 *            違いで無関係な差分が全面に出るため、スクリプトの出力と突き合わせた
 *            うえで当該ブロックのみを手当てした）。
 * 抽出者 : scripts/extract-global-header-css.mjs（本リポジトリ・再実行可能）
 *
 * ── なぜ複製するのか（ユーザー裁定 2026-08-18・Issue #1186）──
 * reform は独自の見た目になったため、親テーマの CSS/JS を全ページで共通読込し続けると
 * コンフリクト対応がキリがない。よって **親アセットは全 dequeue**（functions.php の
 * 「親テーマアセットの全 dequeue」節）し、共通ヘッダーの描画に必要な規則だけを
 * ここに複製する。副次効果として wp-env（親アセット無し）と本番の挙動が一致する。
 *
 * ── 複製するのは CSS と JS だけ（HTML は複製しない）──
 * masthead / dialog の**マークアップは親テーマの partial をそのまま使う**
 * （header.php / footer.php の `get_template_part('template/layout/...')`）。
 * したがって本ファイルのセレクタは**親 partial が出力する実クラス列に対して**書かれている。
 * ＝ **依存の向きは「本 CSS → 親のマークアップ」**であり、将来親が partial の
 * クラス名・構造を変えたら**本ファイルの追随が必要**になる（親の更新時は上記の
 * 抽出元と sha256 を突き合わせて再抽出する）。
 *
 * ── 抽出規則 ──
 * style-latest.css のうち、セレクタが次のいずれかに触れる規則を採り、
 * 採った宣言が参照する `var()` を**推移的に全数解決**して同梱している:
 *   o-globalBrandHeader / l-globalNav / l-globalNavDropDownContent / l-globalNavMediaLink /
 *   l-globalMobileNav* / p-mobileMenuButton / l-subNavList / a-layoutContainer /
 *   #masthead / #global-mobile-nav
 *
 * ── 規則の並びは元ファイルの出現順（触るときの必須条件）──
 * CSS は**同詳細度なら後勝ち**なので、並べ替えるとカスケードが壊れる。実際、抽出器の
 * 初版が「変数定義を先にまとめる」出力をした結果、`@media (min-width:1024px){.l-globalNav
 * {display:block}}` が無条件の `.l-globalNav{display:none}` より前に出て、
 * **PC でグローバルナビが出ない**不具合になった（2026-08-18 実描画で検出・修正済み）。
 * 手で規則を移動しないこと。同じ `@media` が複数回現れるのは出現順を守った結果で、正しい。
 *
 * ── 親からの意図的な差分（5 点。いずれも意匠は変えていない）──
 * 1. **ブレイクポイントを 1200px へ揃える**（Issue #1186 項目 4 → **#1407 で改定**）。
 *    親は 75em(1200px) でデスクトップナビ / ヘッダー高 108px へ切り替えている。
 *    #1186 時点では reform の `--header-height` が 1024px で 60→108 に切り替わっており、
 *    **1024〜1199px にコンテナ高 108 と中身 60 が食い違う 48px の帯**が生じていたため（#1183 既知）、
 *    本ファイル側を 1024px へ下げて食い違いを解消していた。
 *    **#1407 で向きが逆になった**: 引き渡し版 DESIGN-SYSTEM 3.4 が
 *    「1024〜1199px はレイアウト値は 1200px 以上と同一のまま、**ヘッダーのみ Mobile 版へ切替**」
 *    と定めたため、**1024〜1199 はハンバーガー帯であるのが正**になった。そこで本ファイルの
 *    `@media` を 1200px へ戻し（＝ 親の 75em と同値＝ **素の抽出結果に一致**）、
 *    `--header-height` の切替点も global-vars.css 側で 1200px へ揃えた。
 *    ＝ 両者が同じ 1200px で切り替わるので 48px の食い違い帯は生じない。
 *    ⚠ **`global-header.js` の `DESKTOP_MQ` と必ず同値に保つこと**（ズレると
 *    「dialog は display:none なのに open のまま」になる・#1186 の一次記録）。
 * 2. **`--global-color-gray` / `--global-color-gray-light` / `--global-color-text-default`
 *    を :root に直値でインライン**。これら 3 変数は style-latest.css ではなく
 *    **style.css（handle: core）側**の定義で、その core を dequeue すると解決不能になるため、
 *    抽出時に実値（#d6d0cd / #f0f0f0 / #0a0a0a）を写した。
 * 3. **`@media (--screen-lg)` の規則 1 本を落とした**（`.l-subNavList` の横並び指定）。
 *    親の style-latest.css には `@custom-media --screen-lg` の定義が無く（ビルドの取りこぼし）、
 *    **本番でも当該規則は適用されていない**。復元すると本番に無い挙動を足すことになるため、
 *    本番の実挙動に合わせて落とす（＝意匠の変更ではなく現状の忠実な写し）。
 * 4. **`.js-toggle` サブリストの非表示条件を `[aria-hidden="true"]` へ条件化**
 *    （該当箇所のコメントに詳細）。親は jQuery `slideToggle` のインライン style で
 *    無条件の `display:none` を上書きしていたが、reform 側は jQuery 非依存のため、
 *    閉状態の条件を属性側に移さないと**開いても表示されない**。
 * 5. **CTA（`.o-globalBrandHeader__iconLink`）の `background` / `color` 2 宣言を追加**
 *    （Issue #1272。該当規則のコメントに詳細）。親は金背景・白文字を Tailwind
 *    ユーティリティ `tw-bg-[#B7A57A]` / `tw-text-white`（親自身の `tw-` prefix ビルド）で
 *    当てており本 CSS に入らないため、抽出そのままでは**グレーのまま**になる
 *    （wp-env 実機実測・修正前 `rgb(243, 243, 243)`）。マークアップ側の tw- が
 *    担っていた値を CSS 側へ移した＝意匠の変更ではない。
 *
 * ── FontAwesome 依存 ──
 * 抽出した規則は chevron / 外部リンクのアイコンに FontAwesome 4.7 の
 * グリフ（\f105 \f107 \f08e）を `content` で使う。この @font-face も **style.css 側**の
 * 定義のため、下の @font-face で再宣言している（webfont 実体は assets/fonts/ に同梱）。
 *
 * @package hokushu-reform
 */

/* FontAwesome 4.7（親 style.css 由来。上記「FontAwesome 依存」参照）。
   本ファイルが使うのは 3 グリフのみだが、字形を親と一致させるため webfont を複製する。
   レガシー形式（eot/ttf/svg）は現行ブラウザに不要なため woff2/woff のみ同梱。 */
@font-face {
	font-family: "FontAwesome";
	src: url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"),
		url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}


:root {
	--token-s-layout-content-gutter-24: 24px;
	--token-s-layout-content-gutter-48: 48px;
	--token-s-color-background-white: #fff;
	--token-s-layout-content-gutter: var(--token-s-layout-content-gutter-24);
	--z-index-globalNav: 200;
	--component-global-header-nav-maxw: 105.625rem;
	--token-p-typography-standard-fz-15: 0.9375rem;
	--token-p-typography-standard-lh-160: 1.6;
	--token-s-color-background-green: #0f3523;
	--token-s-color-text-green: #0f3523;
	--token-s-typegraphy-weight-bold: 700;
	--token-p-spacing-9: 36px;
	--token-p-spacing-10: 40px;
	--token-s-transition-duration-fast: 0.25s;
	--token-s-color-text-body: #121212;
	--token-s-color-text-white: #fff;
	--component-global-header-height: 3.75rem;
	--token-p-typography-standard-fz-14: 0.875rem;
	--token-p-typography-standard-lh-100: 1;
	--token-p-spacing-2: 8px;
	--token-p-spacing-6: 24px;
	--token-s-color-background-gray: #f3f3f3;
	--token-p-spacing-3: 12px;
	--token-p-spacing-4: 16px;
	--z-index_stickyHeader: 200;
	--token-s-outline: 2px solid var(--token-s-outline-color);
	--token-s-outline-offset: 2px;
	--token-p-typography-standard-lh-130: 1.3;
	--token-s-color-border-gray-light-stroke: #b1b1b1;
	--token-s-color-background-gold-deep: #b7a57a;
	--z-index-globalMobileNavContainer: 210;
	--token-p-spacing-8: 32px;
	--token-p-spacing-20: 80px;
	--token-s-color-border-white-stroke: #fff;
	--token-p-spacing-19: 76px;
	--token-p-spacing-15: 60px;
	--token-s-hover-opacity-low: 0.65;
	--token-s-typegraphy-weight-normal: 400;
	--token-s-outline-color: var(--token-s-color-text-green);
	--global-color-gray: #d6d0cd;
	--global-color-gray-light: #f0f0f0;
	--global-color-text-default: #0a0a0a;
}

@media (min-width: 768px) {
	:root {
		--token-s-layout-content-gutter: var(--token-s-layout-content-gutter-48);
	}
}

@media (min-width: 1200px) {
	:root {
		--component-global-header-height: 6.75rem;
	}
}

.a-layoutContainer {
	--layoutContainer-px: var(--token-s-layout-content-gutter-24);
}

.a-layoutContainer {
	--layoutContainer-px: var(--token-s-layout-content-gutter-24);
	display: block;
	margin: 0;
	padding: 0 var(--layoutContainer-px);
}

@media (min-width: 768px) {
	.a-layoutContainer {
		--layoutContainer-px: var(--token-s-layout-content-gutter-48);
	}
	.a-layoutContainer {
		--layoutContainer-px: var(--token-s-layout-content-gutter-48);
	}
}

@media (min-width: 640px) {
	.a-layoutContainer.-w-fluid {
		--layoutContainer-px: 0;
	}
	.a-layoutContainer.-w-fluid {
		--layoutContainer-px: 0;
	}
}

@media (min-width: 768px) {
	.a-layoutContainer.-w-fluid {
		--layoutContainer-px: 0;
	}
	.a-layoutContainer.-w-fluid {
		--layoutContainer-px: 0;
	}
}

@media (min-width: 960px) {
	.a-layoutContainer.-w-fluid {
		--layoutContainer-px: 0;
	}
	.a-layoutContainer.-w-fluid {
		--layoutContainer-px: 0;
	}
}

@media (min-width: 1200px) {
	.a-layoutContainer.-w-fluid {
		--layoutContainer-px: 0;
	}
	.a-layoutContainer.-w-fluid {
		--layoutContainer-px: 0;
	}
}

@media (min-width: 1400px) {
	.a-layoutContainer.-w-fluid {
		--layoutContainer-px: 0;
	}
	.a-layoutContainer.-w-fluid {
		--layoutContainer-px: 0;
	}
}

.l-globalNav {
	--_label-underline-color: #0000;
	--_divider-color: #e3e3e3;
}

.l-globalNav {
	--_divider-color: #e3e3e3;
	--_is-current: false;
	--_label-underline-color: #0000;
	background-color: var(--token-s-color-background-white);
	display: none;
	padding: 0 var(--token-s-layout-content-gutter);
	z-index: var(--z-index-globalNav);
}

@media (min-width: 1200px) {
	.l-globalNav {
		display: block;
	}
}

.l-globalNav__list {
	display: flex;
	justify-content: space-between;
	margin-inline: auto;
	max-width: var(--component-global-header-nav-maxw);
}

.l-globalNav__linkLabel {
	--_underline-distance: 1px;
}

.l-globalNav__linkLabel {
	--_underline-distance: 1px;
	display: -webkit-box;
	max-height: calc(2lh + var(--_underline-distance)*2);
	min-height: calc(1lh + var(--_underline-distance)*2);
	overflow: hidden;
	position: relative;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: var(--token-p-typography-standard-fz-15);
	font-weight: 400;
	line-height: var(--token-p-typography-standard-lh-160);
	padding: var(--_underline-distance) 0;
	text-wrap: balance;
	width: fit-content;
}

.l-globalNav__linkLabel:after {
	background: var(--_label-underline-color);
	bottom: 0;
	content: "";
	display: block;
	height: 1px;
	position: absolute;
	width: 100%;
}

.l-globalNav__item {
	color: var(--_label-color,inherit);
	flex: 1 1 calc(16.66667% - 0.16667px);
	padding-block: .75rem;
}

.l-globalNav__item .l-globalNav__link {
	border-left: 1px solid var(--_divider-color);
}

.l-globalNav__item:last-child .l-globalNav__link {
	border-right: 1px solid var(--_divider-color);
}

.l-globalNav__item:is(:focus-within,:hover) {
	--_label-underline-color: var(--token-s-color-background-green);
	--_label-color: var(--token-s-color-text-green);
}

.l-globalNav__item:is(:focus-within,:hover) {
	--_is-current: true;
	--_label-underline-color: var(--token-s-color-background-green);
	--_label-color: var(--token-s-color-text-green);
	font-weight: var(--token-s-typegraphy-weight-bold);
}

.l-globalNav__item:is(:focus-within,:hover) .l-globalNav__dropDown {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.l-globalNav__link {
	align-items: center;
	color: inherit;
	display: flex;
	height: 100%;
	justify-content: center;
	text-align: center;
	text-decoration: none!important;
	width: 100%;
}

.l-globalNav__link:hover {
	text-decoration: none;
}

.l-globalNav__dropDown {
	--_pd: var(--token-p-spacing-9) var(--token-s-layout-content-gutter) var(--token-p-spacing-10);
}

.l-globalNav__dropDown {
	--_pd: var(--token-p-spacing-9) var(--token-s-layout-content-gutter) var(--token-p-spacing-10);
	left: 0;
	opacity: 0;
	overflow-x: auto;
	padding: var(--_pd);
	pointer-events: none;
	position: absolute;
	top: 100%;
	transition-duration: var(--token-s-transition-duration-fast);
	transition-property: opacity display;
	visibility: hidden;
	width: 100%;
}

@media (min-width: 1400px) {
	.l-globalNav__dropDown {
		--_pd: var(--token-p-spacing-10) var(--token-s-layout-content-gutter) var(--token-p-spacing-10);
	}
	.l-globalNav__dropDown {
		--_pd: var(--token-p-spacing-10) var(--token-s-layout-content-gutter) var(--token-p-spacing-10);
	}
}

.l-globalNav__item.is-active,
.site-architecture .l-globalNav__item.is-chintai,
.site-kenzai .l-globalNav__item.is-kenzai,
.site-reform.page-used-renov .l-globalNav__item.is-chuko,
.site-reform:not(.page-used-renov) .l-globalNav__item.is-reform {
	--_label-underline-color: var(--token-s-color-text-green);
	--_label-color: var(--token-s-color-text-green);
}

.l-globalNav__item.is-active,
.site-architecture .l-globalNav__item.is-chintai,
.site-kenzai .l-globalNav__item.is-kenzai,
.site-reform.page-used-renov .l-globalNav__item.is-chuko,
.site-reform:not(.page-used-renov) .l-globalNav__item.is-reform {
	--_label-color: var(--token-s-color-text-green);
	--_label-underline-color: var(--token-s-color-text-green);
}

.o-globalBrandHeaderNav {
	background: var(--token-s-color-background-white);
	color: var(--token-s-color-text-body);
}

.o-globalBrandHeaderNav .l-globalNav__dropDown {
	background: var(--token-s-color-background-green);
	color: var(--token-s-color-text-white);
}

.o-globalBrandHeader {
	--_head-height: 3.375rem;
}

.o-globalBrandHeader {
	--_head-height: 3.375rem;
	--_head-height-px: 54px;
	position: relative;
}

.o-globalBrandHeader__inner {
	background: var(--token-s-color-background-white);
	height: var(--component-global-header-height);
	position: relative;
}

@media (min-width: 1200px) {
	.o-globalBrandHeader__inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
}

.o-globalBrandHeader__gutter {
	height: 100%;
}

.o-globalBrandHeader__head {
	align-items: center;
	display: flex;
	height: 100%;
}

@media (min-width: 1200px) {
	.o-globalBrandHeader__head {
		height: var(--_head-height);
	}
}

.o-globalBrandHeader__logo {
	align-items: center;
	display: flex;
	max-width: 176px;
}

@media (min-width: 1200px) {
	.o-globalBrandHeader__logo {
		max-width: 224px;
	}
}

.o-globalBrandHeader__hamburger {
	color: var(--token-s-color-text-white);
	display: grid;
	height: 60px;
	place-items: center;
	position: absolute;
	right: 0;
	top: 0;
	width: 60px;
}

@media (min-width: 1200px) {
	.o-globalBrandHeader__hamburger {
		display: none;
	}
}

.o-globalBrandHeader__hamburger>.p-mobileMenuButton {
	height: 100%;
	width: 100%;
}

.o-globalBrandHeader__links {
	display: none;
	font-size: var(--token-p-typography-standard-fz-14);
	line-height: var(--token-p-typography-standard-lh-100);
	padding-left: var(--token-p-spacing-2);
}

@media (min-width: 1200px) {
	.o-globalBrandHeader__links {
		align-items: center;
		display: flex;
		gap: var(--token-p-spacing-6);
		margin-left: auto;
		margin-right: 0;
	}
}

.o-globalBrandHeader__textLinks {
	align-items: center;
	display: flex;
	gap: 1em;
}

.o-globalBrandHeader__langs,
.o-globalBrandHeader__others {
	border-left: 1px solid;
	display: flex;
	gap: 1em;
	padding-left: 1em;
	width: fit-content;
}

.o-globalBrandHeader__langs a.is-current,
.o-globalBrandHeader__others a.is-current {
	position: relative;
}

.o-globalBrandHeader__langs a.is-current:after,
.o-globalBrandHeader__others a.is-current:after {
	background: var(--token-s-color-background-green);
	bottom: -5px;
	content: "";
	height: 4px;
	left: 0;
	position: absolute;
	right: 0;
	width: 100%;
}

.o-globalBrandHeader__iconLinks {
	display: flex;
	gap: 0;
}

.o-globalBrandHeader__iconLinkItem {
	height: var(--_head-height);
	width: auto;
}

/*
 * CTA（お問い合わせ）。
 *
 * ── 親からの意図的な差分（Issue #1272・冒頭「意図的な差分」5 点目）──
 * 抽出そのままから変えたのは **`background` と `color` の 2 宣言だけ**。
 *
 * 親の partial（template/layout/header-head.php）は金背景・白文字を **Tailwind
 * ユーティリティ `tw-bg-[#B7A57A]` / `tw-text-white`** で当てているが、これは
 * **親テーマ自身の Tailwind ビルド（prefix `tw-`）の産物**であって本 CSS には入らない。
 * reform は ①#1186 で親アセットを全 dequeue し ②自分の Tailwind に `tw-` prefix を
 * 持たない（2026-08-24 実測: reform の生成 CSS 4 本すべてで `.tw-bg-` が 0 件）ため、
 * 抽出そのままだと親既定の `--token-s-color-background-gray`(#f3f3f3)＝**グレー**が残り、
 * Figma 変数 `Global Navigation/cta-bg`(#b7a57a) と食い違っていた
 * （wp-env 実機実測・修正前: `rgb(243, 243, 243)`）。`color` に至っては**宣言が無く**、
 * 白文字は `tw-text-white` だけが担っていた。
 *
 * よって**マークアップ側の tw- ユーティリティが担っていた 2 宣言を CSS 側へ移す**。
 * ＝ 意匠の変更ではなく、親で別経路（Tailwind）から当たっていた値の写し。
 * 値の正は Figma、実装は Astro 見本 `src/components/GlobalHeaderPc.astro` の同名規則と同値。
 */
.o-globalBrandHeader__iconLink {
	align-items: center;
	/* Figma: Global Navigation/cta-bg = #b7a57a ＝ theme.json の key-secondary */
	--_background-color: var(--wp--preset--color--key-secondary, #b7a57a);
	/* Figma: Global Navigation/bg = #ffffff（CTA 上の文字色）＝ surface-primary */
	--_text-color: var(--wp--preset--color--surface-primary, #ffffff);
	background: var(--_background-color);
	color: var(--_text-color);
	display: flex;
	flex-direction: row;
	font-size: var(--token-p-typography-standard-fz-14);
	gap: var(--token-p-spacing-2);
	height: 100%;
	justify-content: flex-end;
	line-height: var(--token-p-typography-standard-lh-100);
	padding: var(--token-p-spacing-3) var(--token-p-spacing-4);
	text-decoration: none;
	width: 100%;
}

.o-globalBrandHeader__megaMenu {
	height: fit-content;
}

.t-default .site-container .o-globalBrandHeader {
	position: sticky;
	top: 0;
	z-index: var(--z-index_stickyHeader);
}

.p-mobileMenuButton {
	background: var(--token-s-color-background-green);
	border: 0;
	color: var(--token-s-color-text-white);
	cursor: pointer;
	padding: 0;
	position: relative;
	-webkit-user-select: none;
	user-select: none;
}

.p-mobileMenuButton:where(:focus-visible) {
	outline: var(--token-s-outline);
	outline-offset: var(--token-s-outline-offset);
}

.p-mobileMenuButton[aria-expanded=false] .p-mobileMenuButton__content.-menu-opened {
	display: none;
}

.p-mobileMenuButton[aria-expanded=false] .p-mobileMenuButton__content.-menu-closed,
.p-mobileMenuButton[aria-expanded=true] .p-mobileMenuButton__content.-menu-opened {
	display: block;
}

.p-mobileMenuButton[aria-expanded=true] .p-mobileMenuButton__content.-menu-closed {
	display: none;
}

.p-mobileMenuButton__icon {
	display: block;
	pointer-events: none;
}

.p-mobileMenuButton__icon.-menu-closed {
	height: 16px;
	width: 20px;
}

.p-mobileMenuButton__icon.-menu-opened {
	height: 26px;
	width: 26px;
}

.l-globalMobileNav {
	background-color: #0a0a0acc;
	padding-bottom: 32px;
	position: relative;
}

.l-globalMobileNav__header {
	background: var(--token-s-color-background-white);
	height: 3.75rem;
}

.l-globalMobileNav__siteName {
	align-items: center;
	display: flex;
	font-size: 1.25rem;
	line-height: 1.6;
	min-height: 84px;
	padding: 10px 1.75rem 10px 28px;
}

.l-globalMobileNav__siteName,
.l-globalMobileNav__subNav {
	color: var(--token-s-color-text-white);
}

.l-globalMobileNav__banners .l-sidebarBanners {
	margin-top: 0;
	padding: 32px 28px;
}

.l-globalMobileNav__banners .l-sidebarBanners__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.l-globalMobileNav__banners .l-sidebarBannersItem__link {
	text-align: center;
}

.l-globalMobileNav__banners .l-sidebarBannersItem__img {
	width: 100%;
}

.l-globalMobileNav__list {
	display: flex;
	flex-direction: column;
	font-size: var(--token-p-typography-standard-fz-15);
	line-height: var(--token-p-typography-standard-lh-130);
	row-gap: 1px;
}

.l-globalMobileNav__link {
	align-items: center;
	background-color: var(--token-s-color-background-green);
	color: var(--token-s-color-text-white);
	display: flex;
	padding: var(--token-p-spacing-6) 36px var(--token-p-spacing-6) 28px;
	position: relative;
	text-decoration: none;
}

.l-globalMobileNav__link:after {
	content: "\f107";
	display: block;
	font-family: FontAwesome;
	margin-left: auto;
	overflow: hidden;
	position: absolute;
	right: 28px;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	transition: transform .25s;
	width: 1em;
}

.l-globalMobileNav__link[aria-expanded=true]:after {
	transform: translateY(-50%) rotate(-180deg);
}

.l-globalMobileNav__link:hover {
	text-decoration: none;
}

/*
 * サブリストの初期非表示。
 *
 * ── 親からの意図的な差分（Issue #1186・冒頭「意図的な差分」4 点目）──
 * 親の規則は `.js-toggle .l-globalMobileNav__subList{display:none}` の**無条件指定**で、
 * 開くときは jQuery `slideToggle()` が**インライン style の display** を書いて打ち勝つ
 * 設計だった。reform 側の global-header.js は jQuery 非依存で開閉するため、無条件の
 * `display:none` を残すと**開いても表示されない**（インラインで殴る側が居ない）。
 * よって**閉じている条件を属性側に移す**（`[aria-hidden="true"]`）。初期・閉時は非表示、
 * 開時は表示という**親と同じ見え方**を、親と同じ属性の意味論（js が既に立てている
 * `aria-hidden`）で表現する。＝ 値の変更ではなくセレクタの条件化。
 */
.js-toggle .l-globalMobileNav__subList[aria-hidden="true"] {
	display: none;
}

.l-globalMobileNav__subList {
	background-color: var(--token-s-color-background-gray);
}

.l-globalMobileNav__subListItem {
	border-bottom: 1px solid var(--token-s-color-border-gray-light-stroke);
	padding: 14px 28px;
}

.l-globalMobileNav__otherLinks {
	padding-inline: 28px;
}

.l-globalMobileNav__otherLinks:before {
	border-top: 1px solid #fff;
	content: "";
	display: block;
	margin-block: 24px;
}

.l-globalMobileNav__contact {
	margin-top: 32px;
	padding-inline: 28px;
}

.l-globalMobileNav__contactLink {
	background: var(--token-s-color-background-gold-deep);
	color: #fff;
	display: block;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
	padding: 20px;
	text-align: center;
}

.l-globalMobileNavContainer {
	background-color: #fff9;
	border: 0;
	height: 100%;
	inset: 0;
	margin: 0;
	max-height: 100%;
	max-width: 100%;
	opacity: 0;
	padding: 0;
	position: fixed;
	transition: opacity var(--token-s-transition-duration-fast) ease-out;
	width: 100%;
	z-index: var(--z-index-globalMobileNavContainer);
}

@media (min-width: 1200px) {
	.l-globalMobileNavContainer {
		display: none!important;
	}
}

.l-globalMobileNavContainer.is-opened {
	opacity: 1;
}

@media (min-width: 1200px) {
	body: has(.l-globalMobileNavContainer[open]) {
		overflow: hidden;
	}
}

.l-globalMobileNavMediaLink {
	align-items: center;
	color: inherit;
	column-gap: 10px;
	display: flex;
	position: relative;
}

.l-globalMobileNavMediaLink:after {
	content: "\f105";
	display: block;
	font-family: FontAwesome;
	position: absolute;
	right: 0;
	text-align: center;
	text-decoration: none;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
}

.l-globalMobileNavMediaLink__media {
	flex: none;
	max-width: 93px;
}

.l-globalMobileNavMediaLink__info {
	flex: auto;
}

.l-globalMobileNavMediaLink__label {
	display: block;
	font-size: .875rem;
	font-weight: 300;
	line-height: 1.6;
	padding-right: 1.5625rem;
}

.l-globalMobileNavMediaLink.is-external-link:after {
	content: "\f08e";
}

.l-globalMobileNavSiteNav__item {
	border-bottom: 1px solid var(--global-color-gray);
}

.l-globalMobileNavSiteNavLink {
	background-color: var(--global-color-gray-light);
	color: var(--global-color-text-default);
	display: block;
	font-size: .875rem;
	font-weight: 300;
	line-height: 1.6;
	opacity: 1;
	padding: 20px 3.875rem 20px 28px;
	position: relative;
	transition: opacity .25s ease-out;
}

.l-globalMobileNavSiteNavLink:after {
	content: "\f105";
	display: inline-block;
	font-family: FontAwesome;
	margin-left: auto;
	position: absolute;
	right: 24px;
	text-decoration: none;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
}

@media (hover:hover) {
	.l-globalMobileNavSiteNavLink:any-link:hover {
		opacity: .75;
	}
}

.l-globalMobileNavSiteNavLink[target=_blank]:after {
	content: "\f08e";
}

.l-globalNavDropDownContent {
	--_card-width: 200px;
	--_card-cols: 4;
	--_card-gap: var(--token-p-spacing-8);
	--_card-list-max-w: calc(var(--_card-width)*var(--_card-cols) + var(--_card-gap)*(var(--_card-cols) - 1));
	--_head-with: 250px;
}

.l-globalNavDropDownContent {
	--_head-with: 250px;
	--_card-width: 200px;
	--_card-cols: 4;
	--_card-gap: var(--token-p-spacing-8);
	--_card-list-max-w: calc(var(--_card-width)*var(--_card-cols) + var(--_card-gap)*(var(--_card-cols) - 1));
	margin: 0 auto;
	max-width: var(--_card-list-max-w);
	width: min(100%,var(--_card-list-max-w));
}

@media (min-width: 1400px) {
	.l-globalNavDropDownContent {
		--_card-width: 258px;
		--_card-cols: 4;
		--_card-gap: var(--token-p-spacing-10);
		--_head-with: 250px;
	}
	.l-globalNavDropDownContent {
		--_head-with: 250px;
		--_card-width: 258px;
		--_card-cols: 4;
		--_card-gap: var(--token-p-spacing-10);
	}
}

.l-globalNavDropDownContent.-type-text {
	align-items: start;
	gap: var(--token-p-spacing-20);
	grid-template-columns: repeat(2,minmax(var(--_head-with),auto));
	max-width: fit-content;
}

.l-globalNavDropDownContent__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--_card-gap);
	margin: 0 auto;
	width: 100%;
}

.l-globalNavDropDownContent__item {
	max-width: var(--_card-width);
}

.l-globalNavDropDownContent__head {
	max-width: var(--_head-with);
}

.l-globalNavDropDownContent__body {
	display: grid;
	grid-template-columns: repeat(2,minmax(var(--_head-with),auto));
}

.l-globalNavDropDownContent__textList {
	border-left: 1px solid var(--token-s-color-border-white-stroke);
	display: grid;
	gap: 0;
}

.l-globalNavDropDownContent__textList:not(:first-child) {
	margin-left: var(--token-p-spacing-19);
}

.l-globalNavDropDownContent__textListItem {
	padding: var(--token-p-spacing-4) var(--token-p-spacing-15);
}

.l-globalNavMediaLink {
	--_gap: var(--token-p-spacing-4);
	--_icon-size: 0.75rem;
}

.l-globalNavMediaLink {
	--_icon-size: 0.75rem;
	--_gap: var(--token-p-spacing-4);
	color: inherit;
	display: flex;
	flex-direction: column;
	opacity: 1;
	row-gap: var(--_gap);
	transition: opacity var(--token-s-transition-duration-fast) ease-out;
}

@media (min-width: 1400px) {
	.l-globalNavMediaLink {
		--_gap: var(--token-p-spacing-6);
		--_icon-size: 0.75rem;
	}
	.l-globalNavMediaLink {
		--_icon-size: 0.75rem;
		--_gap: var(--token-p-spacing-6);
	}
}

@media (hover:hover) {
	.l-globalNavMediaLink:any-link:hover {
		opacity: var(--token-s-hover-opacity-low);
	}
}

.l-globalNavMediaLink img,
.l-globalNavMediaLink picture {
	aspect-ratio: 16/9;
}

.l-globalNavMediaLink img {
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.l-globalNavMediaLink__label {
	display: block;
	font-size: var(--token-p-typography-standard-fz-15);
	font-weight: var(--token-s-typegraphy-weight-normal);
	line-height: var(--token-p-typography-standard-lh-130);
	padding-right: calc(1em + var(--_icon-size));
	position: relative;
}

.l-globalNavMediaLink__label:after {
	content: "\f105";
	display: inline-block;
	font-family: FontAwesome;
	margin-left: auto;
	position: absolute;
	right: 0;
	text-decoration: none;
	top: 50%;
	transform: translateY(-50%);
	width: var(--_icon-size);
}

.l-globalNavMediaLink.is-external-link .l-globalNavMediaLink__label:after {
	content: "\f08e";
}

.l-subNavList {
	display: flex;
	flex-direction: column;
	padding: 32px 28px 0;
	row-gap: 20px;
}

.l-subNavList__link {
	align-items: center;
	color: currentColor;
	display: inline-flex;
	font-size: .875rem;
	line-height: 1.6;
}