/* ===== フッター連絡先用のスタイル (全画面共通) ===== */

/* 見出し(h3)の下の余白を詰める */
#footer h3 {
  margin-bottom: 0;
}

/* リスト(ul)の上下の余白を詰める */
#footer ul.links {
  margin-top: 0;
  margin-bottom: 0; 
}

/* リスト内部の行間を調整 */
#footer ul.links li {
  display: block;
  margin-bottom: 0;
  padding-bottom: 5px; 
  line-height: 1.4;
}

/* ===== 全体のズレを修正するスタイル (全画面共通) ===== */

/* 右側カラムに左の余白（padding）を手動で設定 */
#footer .col-7-narrower {
  padding-left: 30px;
}

/* ===== フッターバナー用のスタイル (モバイル表示が基本) ===== */

/* バナーの上の余白を設定 */
.banner-container {
  margin-top: 1.5em; /* スマホでは少し広めに余白を確保 */
}

/* バナー本体は幅100%を基本とする */
#footer .responsive-banner {
  width: 100%; /* スマホでは幅100%で表示 */
  height: auto;
}

/* ===== PC表示用のスタイル (画面幅が841px以上で適用) ===== */
@media screen and (min-width: 841px) {

  /* PCではバナーを中央寄せにする */
  .banner-container {
    display: flex;
    justify-content: center;
    margin-top: 0.8em; /* PCではバナー上の余白を詰める */
  }

  /* PCではバナー幅を50%にする */
  #footer .responsive-banner {
    width: 50%;
    width: 100%;
  }
  
}