/* ==========================================
   汎用バナーレイアウト（special内向け）
   ========================================== */

/* 全体共通設定 */
.banner-wrapper {
  display: grid;
  gap: 16px; /* バナー同士の間隔（PC） */
  width: 100%;
  max-width: 1152px; /* 1152pxの親枠でも840pxの親枠でも自動対応 */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0 !important; /* システム対策 */
}

.banner-item {
  box-sizing: border-box;
  width: 100%;
}

.banner-item a {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

/* ホバー時の演出 */
.banner-item a:hover {
  opacity: 0.8;
}

.banner-item img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  border-radius: 4px;
}

/* ------------------------------------------
   列数の指定（全画面サイズ共通・折り返し対応）
   ------------------------------------------ */

/* 1列表示 */
.banner-wrapper.banner-list-1 {
  grid-template-columns: 1fr;
}

/* 2列表示 */
.banner-wrapper.banner-list-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* 3列表示 */
.banner-wrapper.banner-list-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ------------------------------------------
   スマホ調整（隙間を8pxに縮小）
   ------------------------------------------ */
@media (max-width: 750px) {
  .banner-wrapper {
    gap: 8px; /* gapを変えるだけで子要素も自動追従します */
  }
}