/* ==========================================================================
   投稿バナー スタイル
   ========================================================================== */

/* バナーコンテナ */
.post-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}

/* バナーアイテム */
.banner-item {
  width: 100%;
  box-sizing: border-box;
}

/* バナー画像 */
.post-banner .banner-item img.banner-single {
  display: block;
  width: 100%;
  height: auto;
}

/* picture要素（SP/PC画像切り替え用） */
.banner-item picture {
  display: block;
  width: 100%;
}

/* ホバーエフェクト */
.post-banner .banner-item a:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

/* リンクスタイル */
.banner-item a {
  display: block;
  line-height: 0;
}

/* スペースユーティリティ */
.space-xlarge.--top {
  margin-top: 40px;
}
.space-xlarge.--bottom {
  margin-bottom: 40px;
}
.space-medium.--top {
  margin-top: 20px;
}
.space-medium.--bottom {
  margin-bottom: 16px;
}

/* カラム数による幅指定 */
.post-banner .banner-item.banner-columns-1 {
  width: 100%;
  max-width: 100%;
}

.post-banner .banner-item.banner-columns-2 {
  width: calc(50% - 10px);
  max-width: calc(50% - 10px);
}

.post-banner .banner-item.banner-columns-3 {
  width: calc(33.333% - 14px);
  max-width: calc(33.333% - 14px);
}

.post-banner .banner-item.banner-columns-4 {
  width: calc(25% - 15px);
  max-width: calc(25% - 15px);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .post-banner {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
  }

  .post-banner .banner-item {
    width: 100%;
    max-width: 400px;
  }
}