.site-footer__brand-mark {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--tt-space-3);
	margin-bottom: var(--tt-space-3);
}

.site-footer__logo-link {
	display: inline-flex;
	align-items: center;
}

.site-footer__logo {
	display: block;
	width: auto;
	max-width: min(140px, 40vw);
	max-height: 48px;
	object-fit: contain;
}

.site-footer__brand-mark .site-footer__title {
	margin: 0;
}

/* Footerのキャッチ（2026-08-10・オーナー指摘「フッターにキャッチが出てない」）。
 * 値は承認済みモックの .site-footer__tagline の実測（1920px）：12.48px / w400 /
 * 行間2.0倍 / 字間なし / 白72% / 幅上限30em。
 * `margin: 0` にしてブランド名との間隔は上の .site-footer__brand-mark の
 * margin-bottom（12px）に任せる——モックの実測も12pxで、二重に持たせると24pxになる。
 * 濃色面の前景なので白は `--tiptop-base` 側で表す（main.css:911 のフッター文字色と同じ
 * 機構。暗いパレットでは base=黒／contrast=白へ写るので反転が成立する）。
 * モード非限定にするのは意図的：この要素は今回新規に出るのでイマーシブ側にも
 * 「維持すべき既存の見た目」が無い。イマーシブ専用の値が要るなら別途決める。 */
.site-footer__tagline {
	max-width: 30em;
	margin: 0;
	color: color-mix(in srgb, var(--tiptop-base) 72%, transparent);
	font-size: var(--tt-text-label);
	font-weight: 400;
	line-height: calc(2 * var(--tt-leading-scale));
	letter-spacing: normal;
}

/* Issue #772: the approved standard mock uses the compact 22.4px wordmark.
 * Immersive keeps its intentionally oversized wordmark, so this title rule is
 * limited to the standard design. There is no matching reusable type-size token,
 * therefore the measured 1.4rem value stays local instead of adding a one-off token. */
body.tiptop-standard-system .site-footer .site-footer__title {
	font-family: var(--tiptop-font-latin);
	font-size: var(--tt-text-logo);
	font-weight: 400;
}

/* Footer navigation labels are Japanese copy. Keep this correction shared so
 * both designs use the selected Japanese font instead of relying on Latin-font
 * fallback glyphs. Size, color and interaction rules remain owned elsewhere. */
body .site-footer .site-footer__menu a {
	font-family: var(--tiptop-font-jp);
	font-weight: 400;
}

/* フッターのSNSアイコンを承認済みモックへ（2026-08-10・オーナー指摘「下部のSNS大きさが
 * おかしい」）。モック（_mockup/tiptop-current.css:163-180 の .site-social）は
 * リンクが32×32・SVGが14×14。実サイトは52×52・20×20で、実測で1.6倍近く大きかった。
 * main.css:965-973 の指定はモード非限定でイマーシブにも効いているため、そちらは
 * 動かさず標準スコープの上書きとして足す（イマーシブは現状維持）。
 * このファイルはフッターの所有ファイルで両デザイン層より後に読まれるので、
 * 詳細度を1段足すだけで !important なしに勝てる。 */
/* 2026-08-10：枠線とアイコンの濃さもモックへ（オーナー判断「モックが正」）。
 * モック（`_mockup/tiptop-current.html` のフッターSNS）は**枠線が白32%・アイコンが白72%**で、
 * 実サイトは枠線が `--tiptop-border`（rgb(228,228,228)の実線）・アイコンが白100%だった。
 * 濃色面の前景は `--tiptop-base` 側で表す（`main.css:911` のフッター文字色と同じ機構。
 * 暗いパレットでは base=黒／contrast=白へ写るので、この式のままで反転が成立する）。
 * 寸法はモックと同じ32×32／14×14で既に一致していた。 */
body.tiptop-standard-system .site-footer-social .site-social-links__link {
	width: 32px;
	height: 32px;
	border-color: color-mix(in srgb, var(--tiptop-base) 32%, transparent);
	color: color-mix(in srgb, var(--tiptop-base) 72%, transparent);
}

body.tiptop-standard-system .site-footer-social .site-social-links__link svg {
	width: 14px;
	height: 14px;
}