/* ==========================================================
   Footer（紺の地。上に看板〔画像を置いたときだけ〕）
   ========================================================== */
.l-footer { background: var(--c-secondary); color: var(--c-white); }
.l-footer a { color: var(--c-white); text-decoration: none; }
.l-footer a:hover { text-decoration: underline; }

/* 看板 */
.l-footer__banner { padding: var(--space-6) 0 0; }
.l-footer__banner-link,
.l-footer__banner-img { display: block; border-radius: var(--radius-md); }
.l-footer__banner-img { width: 100%; height: auto; }
.l-footer__banner-link { transition: opacity 0.2s; }
.l-footer__banner-link:hover { opacity: 0.85; }

.l-footer__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}

/* ロゴ（白い角丸の地） */
.l-footer__logo { display: inline-block; padding: 10px 16px; background: var(--c-white); border-radius: var(--radius-md); line-height: 0; }
.l-footer__logo:hover { text-decoration: none; }
.l-footer__logo img { width: auto; height: 64px; }
.l-footer__catch { margin: var(--space-1) 0 0; font-size: var(--fz-sm); opacity: 0.9; }

/* カテゴリ */
.l-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); }
.l-footer__nav a { display: inline-block; min-height: 24px; line-height: 24px; font-weight: 700; white-space: nowrap; }

/* 右側：YouTube のボタンの下に、サイトについてのリンク（横並び。縦幅を増やさない。2026-11-10 依頼者の指示） */
.l-footer__side { display: flex; flex-direction: column; gap: var(--space-2); }
.l-footer__youtube { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 18px; border: 1px solid var(--c-footer-line); border-radius: var(--radius-pill); font-weight: 700; transition: background-color var(--dur), color var(--dur); }
.l-footer__youtube .c-icon { width: 22px; height: 22px; color: currentColor; }
.l-footer__youtube:hover { background: var(--c-white); color: var(--c-secondary) !important; text-decoration: none !important; }
.l-footer__legal-wrap { padding-top: var(--space-2); border-top: 1px solid var(--c-footer-line); }
.l-footer__legal { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--fz-sm); }
.l-footer__legal a { display: inline-block; min-height: 24px; line-height: 24px; }

.l-footer__copy { margin: 0; padding: var(--space-1); background: #0F1C38; color: var(--c-white); text-align: center; line-height: 1.4; }

@media (min-width: 768px) {
	.l-footer__nav { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; }
}
@media (min-width: 1024px) {
	.l-footer__main { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
	.l-footer__brand { flex: 0 0 auto; }
	.l-footer__nav-wrap { flex: 1; }
	.l-footer__side { flex: 0 0 auto; align-items: flex-end; margin-left: auto; }
	.l-footer__youtube { align-self: flex-end; }
	.l-footer__legal { justify-content: flex-end; }
}

@media (min-width: 1280px) {
	.l-footer__main { gap: var(--space-8); }
}

/* SP（767px 以下）: ロゴは真ん中、カテゴリは 2 列の線つき、YouTube は真ん中、その下に法的表記（真ん中・入りきらなければ折り返す） */
@media (max-width: 767px) {
	.l-footer__banner { padding-top: var(--space-4); }
	.l-footer__main { gap: var(--space-3); padding-top: var(--space-5); padding-bottom: var(--space-4); }
	.l-footer__brand { text-align: center; }
	.l-footer__logo img { height: 52px; }
	.l-footer__nav { gap: 0; border-top: 1px solid var(--c-footer-line); }
	.l-footer__nav > li { padding: 10px 0; border-bottom: 1px solid var(--c-footer-line); }
	.l-footer__nav > li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 最後が 1 つだけのとき、線を全幅に */
	.l-footer__side { align-items: stretch; }
	.l-footer__youtube { align-self: center; }
	.l-footer__legal { justify-content: center; gap: 4px var(--space-3); font-size: var(--fz-xs); }
}