/* ==========================================================================
   l-footer（Figma l-footer 13:77・SP l-footer-sp 162:172）— footer.php
   - 上端の3色の帯＝3事業（青＝塗装・防水、緑＝かなさホーム、空色＝TEYLL）
   - SP はリンクを2列（事業内容だけ1列）。押せる高さ 44
   ========================================================================== */

.l-footer {
	padding-bottom: var(--space-2xl);
	color: var(--color-text-on-brand);
	background: var(--color-bg-footer);
	--focus-color: var(--neutral-0);
}

.l-footer a {
	color: inherit;
	text-decoration: none;
}

.l-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.l-footer__stripe {
	display: flex;
	height: 6px;
}

.l-footer__shape {
	flex: 1;
}

.l-footer__shape--paint { background: var(--color-business-paint); }
.l-footer__shape--care { background: var(--color-business-care); }
.l-footer__shape--it { background: var(--color-business-it); }

.l-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 56px; /* Figma の値 */
	padding-top: 96px; /* Figma の値 */
}

.l-footer__top {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xl);
}

.l-footer__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px; /* Figma の値 */
	flex-shrink: 0;
	width: 380px;
}

.l-footer__logo img {
	width: 154px;
	height: 44px;
	object-fit: contain;
}

.l-footer__address {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
}

/* 電話番号: 押せる高さを 44px 以上に（見た目と行の高さは変えない。上下の margin で打ち消す） */
.l-footer__tel {
	display: inline-block;
	padding-block: 12px;
	margin-block: -12px;
}

.l-footer__license {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-on-brand-muted);
}

.l-footer__sns {
	display: flex;
}

.l-footer__sns-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* 押せる大きさ 44px。アイコン（24px）の見た目の位置は margin で戻す */
	height: 44px;
	margin: -10px;
}

.l-footer__sns-icon {
	width: 24px;
	height: 24px;
}

.l-footer__nav {
	flex: 1;
	min-width: 0;
}

.l-footer__nav-title {
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

.l-footer__links {
	display: flex;
	flex-direction: column;
	gap: 14px; /* Figma の値 */
	margin-top: 32px; /* Figma の値（見出しと間の余白） */
	font: var(--text-body-s); /* li の行の高さを文字に合わせる */
}

.l-footer__link {
	display: inline-block;
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-on-brand-muted) !important;
}

.l-footer__area {
	display: flex;
	flex-direction: column;
	gap: 10px; /* Figma の値 */
	padding: 28px var(--space-xl); /* Figma の値 */
	background: var(--color-bg-inverse-raised);
	border-radius: var(--radius-lg);
}

.l-footer__area-title {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
}

/* まとまり（中部・南部・北部・宮古・八重山・そのほかの離島）ごとの行。見出しが左、市町村は右で折り返す（塗装・防水のフッターと同じ形）。
   見出しの列の幅は、いちばん長い見出しにそろえる（subgrid で全部の行の市町村の頭をそろえる） */
.l-footer__area-groups {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--space-2xs) var(--space-md);
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
}

.l-footer__area-group {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
}

.l-footer__area-group > dd {
	min-width: 0;
}

.l-footer__area-region {
	font-weight: 700;
}

.l-footer__area-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	color: var(--color-text-on-brand-muted);
}

.l-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding-top: var(--space-lg);
	color: var(--color-text-on-brand-muted);
	border-top: 1px solid var(--color-border-on-inverse);
}

.l-footer__bottom-links {
	display: flex;
	gap: var(--space-lg);
	font: var(--text-caption);
}

.l-footer__bottom-link {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
}

.l-footer__copyright {
	font: var(--text-en-caption);
	letter-spacing: var(--ls-en-caption);
}

.l-footer__copyright small {
	font-size: inherit;
}

/* PC の幅が狭いとき: 会社の情報を上の段に */
@media (min-width: 768px) and (max-width: 1199px) {
	.l-footer__top {
		flex-wrap: wrap;
		row-gap: var(--space-3xl);
	}

	.l-footer__info {
		width: 100%;
	}
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.l-footer {
		padding-bottom: 28px; /* Figma の値 */
	}

	.l-footer__inner {
		gap: var(--space-2xl); /* SP 32 */
		padding-top: var(--space-5xl); /* SP 56 */
	}

	.l-footer__top {
		flex-direction: column;
		gap: var(--space-xl);
	}

	.l-footer__info {
		width: 100%;
	}

	.l-footer__license {
		font: var(--text-body-s);
		letter-spacing: var(--ls-body-s);
	}

	.l-footer__sns-link {
		justify-content: flex-start;
		margin: 0; /* SP は 44px の枠のまま並べる（Figma SP） */
	}

	.l-footer__nav {
		width: 100%;
	}

	.l-footer__links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-sm);
		row-gap: 0;
		margin-top: var(--space-2xs);
	}

	.l-footer__nav--business .l-footer__links {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
	}

	.l-footer__link {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.l-footer__area {
		padding: 28px var(--space-lg); /* Figma の値 */
	}

	/* SP は見出しを上・市町村を下に（見出しの列が「そのほかの離島」の幅になると、市町村の列が狭くなるため） */
	.l-footer__area-groups {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xs);
		font: var(--text-body-s);
		letter-spacing: var(--ls-body-s);
	}

	.l-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
		padding-top: var(--space-sm);
	}

	.l-footer__bottom-link {
		display: flex;
		align-items: center;
		min-height: 44px;
		font: var(--text-body-s);
		letter-spacing: var(--ls-body-s);
	}
}