@charset "UTF-8";
/* =========================================================
   フッター（共通パーツ）

   common.css から切り出した独立ファイル。
   理由: FC募集LP（/fc/xxx/）は独自デザインシステムを持ち common.css を
   読み込めない（LP の CSS は全て @layer 内にあり、レイヤー無しの common.css に
   必ず負けるため）。フッターだけは全ページで同一にしたいので、
   このファイルを唯一の定義として通常ページと LP の両方から読み込む。

   読み込み位置（inc/enqueue.php）:
     通常ページ … common.css の直後・ページ固有 CSS の前（切り出し前と同じ順序）
     LP         … LP の CSS の後（レイヤー無しなので確実に勝つ）

   カラートークンはフォールバック付きで参照する。
   通常ページは common.css の :root が効き、LP では第2引数が使われる。
   ========================================================= */
.site-footer {
  background: var(--color-footer-bg, #313841);
  color: var(--color-white, #ffffff);
  padding: 50px 100px;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.site-footer__top {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
  white-space: nowrap;
}
.site-footer__logo {
  font-weight: 700;
  font-size: 24px;
}
.site-footer__address {
  font-size: 14px;
  line-height: 1.57;
}
.footer-nav {
  display: flex;
  gap: 60px;
}
.footer-nav__col {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.footer-nav__heading {
  font-weight: 700;
  font-size: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-white, #ffffff);
  min-width: 182px;
}
.footer-nav__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.footer-nav__list a:hover {
  text-decoration: underline;
}
.site-footer__copyright {
  width: 100%;
  text-align: right;
  font-size: 10px;
}

/* =========================================================
   レスポンシブ（ブレイクポイント 1280px）
   横並び → 縦積み（中央寄せをやめ幅いっぱいに左寄せ）

   ブレイクポイントがサイト共通の 768px ではなく 1280px なのは、
   横並びレイアウトの実寸がそれを要求するため:
     .site-footer__top の内容幅 = 1005px（ブランド列 + ナビ3列。
       .footer-nav__heading の min-width:182px × 3 + gap 60px × 2 + gap 80px）
     + .site-footer の左右パディング 100px × 2
     = 約 1205px ないと収まらない
   従来は 768px 切り替えだったため、769〜1204px の全幅で
   フッターが横にはみ出して横スクロールが出ていた（実測で確認）。
   テーマの --max-width トークン（1280px）に合わせて切り替える。
   ========================================================= */
@media (max-width: 1279px) {
  .site-footer {
    padding: 40px 20px;
  }
  .site-footer__inner {
    align-items: stretch;
  }
  .site-footer__top {
    flex-direction: column;
    gap: 30px;
  }
  .footer-nav {
    flex-direction: column;
    gap: 30px;
  }
  .site-footer__copyright {
    text-align: center;
  }
}