/* サイトフッター */

.l-footer {
	background: var(--c-fg);
	color: #C8CDD0;
	padding-block: var(--sp-8) var(--sp-5);
	margin-block-start: var(--sp-9);
}
.l-footer a {
	color: #DCE0E2;
}
.l-footer a:hover {
	color: var(--c-accent);
}

.l-footer__inner {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 0 var(--sp-5);
}

.l-footer__top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--sp-7);
	padding-block-end: var(--sp-7);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@media (max-width: 900px) {
	.l-footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}
@media (max-width: 600px) {
	.l-footer__top { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.l-footer__brand {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-black);
	color: #fff;
	letter-spacing: -.02em;
}
.l-footer__brand .domain { color: var(--c-primary-light); }

/* 画像ロゴ（フッター用 — ダーク背景に合わせて反転） */
.l-footer__brand--img {
	display: inline-flex;
	align-items: center;
	transition: opacity var(--dur-fast) var(--ease);
}
.l-footer__brand--img img {
	display: block;
	height: 40px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	filter: invert(1) brightness(2);   /* 濃グレー単色ロゴ → 白に反転 */
}
.l-footer__brand--img:hover {
	opacity: .8;
}
.l-footer__tagline {
	color: #98A2A8;
	font-size: var(--fs-sm);
	margin-block-start: var(--sp-3);
	line-height: var(--lh-base);
}

.l-footer__widget .widget-title {
	color: #fff;
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	margin-block-end: var(--sp-3);
}
.l-footer__widget ul { margin: 0; padding: 0; }
.l-footer__widget li {
	margin-block-end: var(--sp-2);
	font-size: var(--fs-sm);
}
.l-footer__widget a {
	color: #C8CDD0;
}

.l-footer__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-5);
}
.l-footer__nav-list a {
	font-size: var(--fs-sm);
	color: #DCE0E2;
}

.l-footer__bottom {
	padding-block-start: var(--sp-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
	font-size: var(--fs-xs);
	color: #98A2A8;
}
.l-footer__bottom-nav,
.l-footer__bottom-nav-list {
	display: flex;
	gap: var(--sp-4);
	flex-wrap: wrap;
}
.l-footer__bottom-nav a,
.l-footer__bottom-nav-list a { color: #98A2A8; }
.l-footer__bottom-nav a:hover,
.l-footer__bottom-nav-list a:hover { color: var(--c-accent); }