/**
 * MOOOK Gateway — サイト共通フッタースタイル
 * 全ページ（トップ・固定ページ・投稿ページ）で読み込まれます。
 *
 * Design philosophy: Kansai Gateway Editorial
 */

/* =====================================================
 * フッター共通レイアウト
 * ===================================================== */
.site-footer { padding: 70px 6vw 20px; color: #fff; background: #091d2e; }
.footer-main { padding-bottom: 60px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 45px; }
.footer-brand .brand { color: #fff; }
.footer-brand > p { margin: 18px 0 0; color: #fff; font-family: "Noto Serif JP", serif; font-size: 14px; opacity: .6; }
.footer-links, .footer-office { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.footer-links > p, .footer-office > p { margin: 0 0 8px; color: #6aaaf2; font-family: "DM Sans", sans-serif; font-size: 9px; letter-spacing: .16em; font-weight: 700; }
.footer-links a, .footer-office a, .footer-office address { color: #fff; font-style: normal; opacity: .62; transition: opacity .2s; }
.footer-links a:hover, .footer-office a:hover { color: #fff; opacity: 1; }
.footer-bottom { padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; color: #fff; border-top: 1px solid rgba(255,255,255,.12); font-family: "DM Sans", sans-serif; font-size: 8px; letter-spacing: .11em; opacity: .45; }

/* ブランドシンボル（フッター内） */
.site-footer .brand-symbol { width: 30px; height: 28px; position: relative; display: inline-block; }
.site-footer .brand-symbol i { position: absolute; display: block; width: 12px; height: 12px; transform: rotate(45deg); border-radius: 3px 1px 3px 1px; }
.site-footer .brand-symbol i:nth-child(1) { left: 0; top: 8px; background: #f05a47; }
.site-footer .brand-symbol i:nth-child(2) { left: 9px; top: 0; height: 12px; background: #0b63ce; }
.site-footer .brand-symbol i:nth-child(3) { left: 16px; top: 11px; height: 12px; background: #f1b943; }
.site-footer .brand-word { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 21px; letter-spacing: .14em; line-height: 1; }
.site-footer .brand { display: inline-flex; align-items: center; gap: 11px; }

/* レスポンシブ */
@media (max-width: 768px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 420px) {
  .footer-main { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}