/* --- 見出しデザイン --- */
.banner-title {
  font-size: 18px;              /* 文字の大きさ（スマホ時） */
  font-weight: bold;            /* 太字 */
  color: #333333;               /* 文字の色 */
  margin: 40px 0 15px 0;        /* 【変更】中央寄せを解除し、上に40px、下に15pxの隙間をあける */
  width: 100%;                  /* 横幅いっぱい（画面左よせ */
  box-sizing: border-box;
}

/* --- 大きなバナーの設定 --- */
.main-banner {
  width: 100%;                  /* スマホ表示では横幅いっぱい */
  margin: 0 auto 20px auto;     /* 上下左右の中央寄せ（下に20pxの間隔をあける） */
  box-sizing: border-box;
}
.main-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 下側の4連バナーの設定 --- */
.banner-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.banner-item img {
  width: 100%;
  height: auto;
  display: block;
}
/* スマホ表示：横並び2枚 */
.banner-item {
  width: calc((100% - 10px) / 2); 
  box-sizing: border-box;
}

/* --- PC表示のとき（横幅768px以上）の設定 --- */
@media screen and (min-width: 768px) {
  /* 【削除】 .banner-title の max-width 設定を削除しました */

  /* 大きなバナーを最大750pxにして中央寄せ */
  .main-banner {
    max-width: 750px;
  }
  /* 4連バナー：横並び4枚 */
  .banner-item {
    width: calc((100% - 30px) / 4);
  }
}