/*
 * フッター（街の写真＋緑 80%・縦ロゴ・コピーライト）と、3 群のリンク列 c-sitemap（メガメニューとフッターで共用）。
 * リンク列の縦位置は XD の実測に合わせた: 項目の行送り＋項目間の余白、子項目は小さい行送り＋上下の余白。
 */
@layer components {
	/* ---------- フッター ---------- */
	.l-footer {
		position: relative;
		isolation: isolate;
		padding-block: var(--footer-pt) var(--sp-4); /* XD: Copyright の文字枠の下 14〜15 */
		background: url(../img/common/footer-bg-960.webp) center / cover;
		color: var(--c-white);
		--c-focus: var(--c-white); /* 緑の面の上なのでフォーカスリングは白 */
	}

	.l-footer::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: var(--z-behind);
		background: var(--c-overlay-green);
	}

	.l-footer__logo-img {
		width: var(--footer-logo-w);
		margin-inline: auto;
	}

	.l-footer__nav {
		margin-top: var(--footer-logo-gap);
	}

	/* プライバシーポリシーのリンク＋コピーライト（SP は縦に積む・PC は横に並べて間 16。文字は 2 つとも同じ大きさ・色） */
	.l-footer__legal {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: var(--footer-copy-gap);
		font-size: var(--fs-copyright);
		font-weight: 500;
		line-height: var(--lh-heading);
		text-align: center;
	}

	/* ---------- 3 群のリンク列（SP は縦積み・PC は 3 列） ---------- */
	.c-sitemap {
		display: grid;
		row-gap: var(--menu-group-gap);
	}

	/* 英字ラベルと和文ラベルはベースラインで揃え、間 20 */
	.c-sitemap__head {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: var(--sp-5);
		margin-bottom: var(--sitemap-head-gap);
		line-height: var(--lh-heading);
	}

	.c-sitemap__en {
		font-family: var(--font-en);
		font-size: var(--fs-en-label);
	}

	.c-sitemap__ja {
		font-family: var(--font-serif);
		font-size: var(--fs-en-label-sub);
	}

	/* 字間 0（XD）。10-base の :where が span に .05em を置くので、親（__head）ではなく文字を持つ要素に書く */
	.c-sitemap__en,
	.c-sitemap__ja {
		letter-spacing: var(--ls-none);
	}

	.c-sitemap__list {
		font-family: var(--font-serif);
		font-size: var(--fs-menu);
		font-weight: 500;
		line-height: var(--lh-menu);
	}

	.c-sitemap__item + .c-sitemap__item {
		margin-top: var(--menu-item-gap);
	}

	/* 「新築 ＋」: ＋ を行の右端に置き、子項目は下の行に回す */
	.c-sitemap__item--parent {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		max-width: var(--sitemap-parent-w);
	}

	/* XD のフッター（PC）は子項目の後に項目間の余白を足さない（メガメニューは足す） */
	.c-sitemap--footer .c-sitemap__item--parent + .c-sitemap__item {
		margin-top: 0;
	}

	.c-sitemap__children {
		grid-column: 1 / -1;
		margin-block: var(--menu-child-margin);
		padding-left: var(--menu-indent);
		line-height: var(--lh-menu-child);
	}

	/* 先頭の「-  」は文字にせず疑似要素で付ける（inline-block なので下線は付かない）。折り返した 2 行目は「-」の下ではなく文字の頭に揃える */
	.c-sitemap__link {
		text-wrap: pretty; /* 768〜1199 で「方 / へ」のような 1 文字の行を避ける */
		display: inline-block;
		padding-left: var(--sitemap-dash-w);
		text-indent: calc(var(--sitemap-dash-w) * -1);
	}

	.c-sitemap__link::before {
		content: "-";
		display: inline-block;
		width: var(--sitemap-dash-w);
		text-indent: 0;
	}

	.c-sitemap__toggle {
		display: grid;
		place-items: center end;
		width: var(--sp-10);
	}

	.c-sitemap__plus {
		width: var(--plus-w);
	}

	@media (hover: hover) {
		.c-sitemap__link:hover,
		.l-footer__policy:hover {
			text-decoration: underline;
			text-decoration-thickness: var(--bw);
			text-underline-offset: var(--underline-offset);
		}
	}

	@media (min-width: 768px) {
		.l-footer {
			background-image: url(../img/common/footer-bg-1920.webp);
		}

		.l-footer__legal {
			flex-direction: row;
			justify-content: center;
			column-gap: var(--sp-4);
		}

		/*
		 * 列の左端 XD: フッター 360 / 802 / 1160（コンテナ 1200 の 0 / 442 / 800）。
		 * 列の間に 40 を取り、その分を列幅から引く（442 − 40 = 402・358 − 40 = 318）。1200 では XD の位置のまま、狭い画面でも隣の列に付かない
		 */
		.c-sitemap {
			grid-template-columns: 402fr 318fr 400fr;
			column-gap: var(--sp-10);
		}

		/* メガメニューは 20 右（XD: 380 / 822 / 1180） */
		.c-sitemap--menu {
			grid-template-columns: 402fr 318fr 380fr;
			padding-left: var(--sp-5);
		}
	}
}