/* =========================
フッター背景を画面幅いっぱいに（Storkの構造に基づく解決策）
========================= */

/* フッター全体を画面幅いっぱいに + 背景色設定 */
footer#footer.footer {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  box-sizing: border-box !important;
  background: #373f4a !important; /* 新しい背景色 */
  margin-bottom: 0 !important; /* 下部の余白を削除 */
  padding-bottom: 0 !important; /* 下部パディングも確認 */
}

/* bodyとhtmlの下部余白も削除 */
body, html {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* フッター内の.wrapクラスの制約を解除 */
#inner-footer.inner.wrap {
  width: 100% !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  position: relative !important;
  left: 0 !important;
  background: #373f4a !important; /* 統一した背景色 */
}

/* フッター上部の背景も画面幅いっぱいに */
#footer-top.cf {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 35px !important; /* 内側のコンテンツに適切な余白 */
  max-width: 1166px !important;
  margin: 0 auto !important; /* 中央寄せ */
  background: #373f4a !important; /* 統一した背景色 */
}

/* フッター下部も同様に */
#footer-bottom {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 35px !important;
  max-width: 1166px !important;
  margin: 0 auto !important;
  background: #373f4a !important; /* 統一した背景色 */
}

/* ウィジェットエリアのスタイル調整 */
#footer-top .m-all,
#footer-top .t-1of2,
#footer-top .d-1of3 {
  padding-left: 0 !important;
  padding-right: 20px !important;
}

/* レスポンシブ対応 */
@media only screen and (max-width: 1165px) {
  #footer-top.cf,
  #footer-bottom {
    padding: 0 4% !important;
  }
}

@media only screen and (max-width: 768px) {
  #footer-top.cf,
  #footer-bottom {
    padding: 0 20px !important;
  }
  
  #footer-top .m-all,
  #footer-top .t-1of2,
  #footer-top .d-1of3 {
    padding-right: 0 !important;
  }
}