/* =============================================================
   layout/footer.css — 共通フッタ（media 属性なし = all）
   -------------------------------------------------------------
   出典: 上流 components.css の Footer ブロックと .brand-logo-footer（生成物）。
   ============================================================= */

/* ロゴは器の左端＝「サービス」列の真上に置く（2026-09-11）。
   列を space-between にしたことで 1 列目が器の左端に来るので、
   ロゴを中央へ動かす必要はなく、既定の左端のままで縦に揃う。 */
.brand-logo-footer {
  height: var(--size-logo-footer); margin-bottom: var(--space-lg);
  filter: grayscale(1) brightness(0.55);
}

.footer {
  background: var(--color-canvas-parchment); color: var(--color-ink-muted-80);
  /* apple.com 実測: .ac-gf-content は max-width 980px を中央寄せ、左右 22px */
  padding: var(--space-xxl) max(var(--inset-chrome-inline), calc((100% - var(--content-max-footer)) / 2));
}
/* 列は**内容幅**にして、980px の器へ両端揃えで散らす（2026-09-11 変更）。
   旧実装の grid `1fr` は列を等幅（221px）に引き伸ばすため、項目の少ない列
   （見出しだけの「ご相談」等）は**箱だけが右端まで伸びて文字はずっと手前で終わる**。
   結果、左余白（画面端→「サ」）223px に対し右余白（「談」→画面端）が約 400px と食い違い、
   footer 全体が左へ寄って見えていた。

   内容幅 ＋ space-between なら、
   - 1 列目の**文字**が器の左端、最終列の**文字**が器の右端に来るので、左右の余白が必ず一致する。
   - 列の間隔は器の余りを等分した広いもの（1440px 幅で約 222px）になり、旧実装の見た目を保つ。
   列の最小幅（--column-footer-min）は使わない —— 最小幅を課すと短い列の箱がまた文字より広くなり、
   同じずれが戻る。gap は「最低でもこれだけは空ける」下限として効く。 */
.footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xl); }
/* 列の見出しはタグを h2 にしてある（h1 の次に h4 が来ると見出し一覧で階層が飛ぶ）。
   見た目は 14px/600 のまま —— 見た目はクラスで、タグは文書の構造で決める
   （DESIGN-apple.md {component.faq-list} 2026-09-11 の訂正と同じ考え方）。 */
.footer .footer-col-head { font: var(--type-caption-strong); letter-spacing: var(--tracking-caption); margin: 0 0 var(--space-xs); }
/* サブ項目を持たない列は、見出しがそのまま行き先を持つ（よくある質問・ご相談）。
   色は見出しのまま継承する —— a の既定色（--color-primary）が出ると、
   footer の中に青い文字が 1 つだけ生まれて「インタラクティブ色は 1 本」の使い方が崩れる。 */
.footer .footer-col-head a { color: inherit; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li a { font: var(--type-footer-link); letter-spacing: var(--tracking-footer-link); color: var(--color-ink-muted-80); }
/* 著作権表示だけ中央（2026-09-11）。列は左揃えのままで、最下段の 1 行だけ真ん中に置く。
   列と同じ左端に置くと 4 列目の下にぶら下がって見え、列の一部と読み違えるため。 */
.footer .legal { margin-top: var(--space-xl); font: var(--type-fine-print); letter-spacing: var(--tracking-fine-print); color: var(--color-ink-muted-48); text-align: center; }