.common-banners { overflow-x: auto; padding-block: 16px; }
.common-banners__slider:not(.slick-initialized) { display: flex; justify-content: center; overflow-x: auto; }
.common-banners__slide { flex: 0 0 248px; width: 248px; margin-inline: 8px; }
.common-banners img { width: 248px; height: 121px; object-fit: cover; }
.common-banners .slick-dots { display: flex; justify-content: center; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.common-banners .slick-dots li { width: 12px; height: 12px; }
.common-banners .slick-dots button { display: block; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #ccc; font-size: 0; cursor: pointer; }
.common-banners .slick-dots .slick-active button { background: var(--color-accent); }
.common-banners__missing { display: grid; place-items: center; width: 248px; height: 121px; background: #f7f7f7; color: #666; font-size: 13px; }
.common-banners__pending { margin: 0; padding: 28px 0; border-block: 1px solid #d4d4d4; font-size: 14px; color: #666; }

/* SP共通ブレイクポイント：PCの既存指定は維持する。 */
@media (max-width: 480px) {
  .common-banners { max-width: 100%; }
  .common-banners .slick-dots { flex-wrap: wrap; gap: 4px; margin-top: 12px; }
  .common-banners .slick-dots li { width: 32px; height: 32px; }
  .common-banners .slick-dots button { width: 32px; height: 32px; border: 10px solid transparent; background-clip: padding-box; }
  .common-banners .slick-dots .slick-active button { background-clip: padding-box; }
}