/*
  共通Footer(.site-footer)。TOP/About Us/Services/人材紹介など、
  今後すべてのページで共通利用する新Footer。
  情報量を絞り(About Us/Services/Case Studies/Contactの直下ページ＋
  Servicesの3事業サブリンクのみ)、TOPのトークン(白系背景・大きな余白・
  細いライン・黒〜濃紺・必要最小限の青紫アクセント)で構成している。
*/
.site-footer { background: var(--surface); border-top: 1px solid var(--op-border); }
.site-footer-inner {
  padding-top: 64px; padding-bottom: 48px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px;
}
.site-footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 300px; }
.site-footer-brand img { width: 160px; height: auto; display: block; }
.site-footer-tagline { margin: 0; font-family: var(--font-heading); font-size: 14px; letter-spacing: .03em; color: var(--secondary-text); line-height: 1.8; }
.site-footer-tagline-ja { margin: -6px 0 0; font-size: 12.5px; letter-spacing: .02em; color: var(--secondary-text); line-height: 1.7; }

.site-footer-nav { display: flex; gap: clamp(40px,6vw,96px); flex-wrap: wrap; }
.site-footer-col { display: flex; flex-direction: column; gap: 14px; }
.site-footer-col-title { margin: 0 0 2px; font-family: var(--font-latin); font-size: 11px; letter-spacing: .1em; color: #8693b4; }
.site-footer-col a { font-family: var(--font-latin); font-size: 14px; color: var(--navy); transition: color var(--duration-hover); }
.site-footer-col a:hover { color: var(--accent-blue); }

.site-footer-bottom { border-top: 1px solid var(--op-border); }
.site-footer-bottom-inner { padding-block: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-footer-bottom a { font-family: var(--font-latin); font-size: 12px; color: var(--secondary-text); }
.site-footer-bottom a:hover { color: var(--accent-blue); }
.site-footer-bottom p { margin: 0; font-family: var(--font-latin); font-size: 12px; color: #96a1b8; }

@media (max-width: 760px) {
  .site-footer-inner { padding-top: 48px; padding-bottom: 32px; gap: 32px; flex-direction: column; }
  .site-footer-nav { gap: 32px; }
  .site-footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}