@layer components {
	/* ============================================================
	 * フッター（parts/footer.html・移植元 .footer--blue）
	 * 全幅の primary 地バー。内側シェルはロゴ（白反転）＋ボディ（nav／区切り／
	 * コピーライト）。モバイル基準は縦積み、md(769px)〜で横並び。
	 * ============================================================ */
	/* 左右余白はヘッダーと同じ shell-gutter。inner の幅基準もヘッダーと一致させる。 */
	/*
	 * 既定は primary 地・base 文字。以前は footer.html の backgroundColor:primary /
	 * textColor:base（=has-primary-background-color / has-base-color）で付けていたが、
	 * それらは global-styles（#100 で wp 層）の !important クラスで、!important の
	 * レイヤー反転によりグレー変種（.has-gray-page）の components 層 !important が
	 * 勝てず紺に化けた。has-* を markup から外し、ここ（components 層）で通常宣言で
	 * 与えることで global-styles と競合させず、グレー変種は詳細度で勝たせる（!important 不要）。
	 */
	.nexray-footer {
		padding-block: var(--wp--preset--spacing--50);
		padding-inline: var(--nexray-shell-gutter);
		border-top: 1px solid var(--wp--preset--color--base);
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
	}

	.nexray-footer__inner {
		max-width: var(--nexray-shell-max);
		margin-inline: auto;
		/*
		 * モバイル基準：ロゴ↕ボディを縦積み。WP is-layout-flex（global-styles）の
		 * flex-direction:row/align-items:center と blockGap(24px) は wp 層のため、
		 * components 層の通常宣言で上書きできる（#98/#100）。
		 */
		flex-direction: column;
		align-items: flex-start;
		gap: 3rem;
	}

	.nexray-footer__logo {
		flex-shrink: 0;
	}

	/* 青地の白抜きロゴ（elements.link＝wp 層のため components 層の通常宣言で確定）。 */
	.nexray-footer .nexray-logo {
		color: var(--wp--preset--color--base);
	}

	.nexray-footer .nexray-logo__mark {
		height: 48px;
	}

	.nexray-footer__body {
		flex: 1;
		min-width: 0;
		/* 移植元 .footer__body=space-sm(1rem)。blockGap(wp 層)を通常宣言で上書き。 */
		gap: var(--wp--preset--spacing--30);
	}

	/*
	 * 区切り線。WP separator 既定（幅100px・border-bottom 2px・has-alpha-channel-opacity）は
	 * wp 層のため、幅・ボーダー・不透明度を components 層の通常宣言で上書きし、全幅・1px・不透明白に。
	 */
	.nexray-footer .nexray-footer__divider {
		width: 100%;
		max-width: none;
		margin-block: 0;
		border: 0;
		height: 1px;
		background-color: var(--wp--preset--color--base);
		opacity: 1;
	}

	.nexray-footer__copy {
		margin: 0;
		line-height: 1.6;
	}

	/* md(769px)〜：横並びに戻す（移植元 .footer--blue の横並び）。 */
	@media (min-width: 769px) {
		.nexray-footer__inner {
			flex-direction: row;
			align-items: center;
			/* 移植元 .footer__inner=clamp(2rem,9vw,8rem)。blockGap(wp 層)を通常宣言で上書き。 */
			gap: clamp(2rem, 9vw, 8rem);
		}
	}
	/* ============================================================
	 * フッター グレー変種（移植元 .footer / .footer--slate）
	 * 固定ページ ACF「明るい配色」(page_gray)→ body.has-gray-page（inc/template-functions.php）。
	 * 紺→明るいグレー地・濃文字・ロゴ濃紺・三角紺・区切り slate。
	 * 既定の .nexray-footer（通常宣言）に対し詳細度（0-2-0 > 0-1-0）で勝つため !important 不要。
	 * ============================================================ */
	.has-gray-page .nexray-footer {
		background-color: var(--wp--preset--color--slate-100);
		color: var(--wp--preset--color--slate-700);
		border-top-color: var(--wp--preset--color--slate-300);
	}

	/* ロゴは反転せず濃紺（primary）。既定（0-2-0）に対し詳細度（0-3-0）で勝つため通常宣言。 */
	.has-gray-page .nexray-footer .nexray-logo {
		color: var(--wp--preset--color--primary);
	}

	/*
	 * ナビ文字は濃文字（slate-700）。site-nav 既定 `.site-nav--footer .site-nav__link`（0-2-0）に対し
	 * 詳細度（0-3-0）で勝つため通常宣言（両者とも elements.link＝wp 層に層で勝つ）。
	 */
	.has-gray-page .site-nav--footer .site-nav__link {
		color: var(--wp--preset--color--slate-700);
	}

	/* 三角ビュレットは紺（移植元 .footer__nav a::before=color-primary）。 */
	.has-gray-page .site-nav--footer .site-nav__link::before {
		border-left-color: var(--wp--preset--color--primary);
	}

	/* 区切り線は slate。 */
	.has-gray-page .nexray-footer .nexray-footer__divider {
		background-color: var(--wp--preset--color--slate-300);
	}
}