.club-intro {
  padding: 3vw 0;
  width: 80%;
  margin: auto;
  margin-top: 3vw;
}

.club-intro .last {
  width: 100%;
  height: 100%;
}

.club-intro .reposTitle {
  height: clamp(94px, 7vw, 900px);
  width: 100%;
}

/* --- グリッドコンテナ設定 --- */
.club-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  align-items: center; /* 念のため上下中央揃え */
}

/* --- 各アイテムの共通設定 --- */
.club-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px; 
  overflow: hidden;
  aspect-ratio: 1 / 1; /* 基本は正方形 */
}

.club-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --- ボタン（3つ分）の設定修正 --- */
.club-grid .span-3col {
  grid-column: span 3;
  aspect-ratio: 3 / 1; /* 正方形3個分の比率に強制 */
  min-height: auto;    /* min-heightによるズレを防止 */
}

.club-grid .span-3col img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ボタン画像が欠けないように。隙間が気になるなら cover */
}

.club-intro .section-title {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: clamp(20px, 4vw, 32px);
}

/* --- メディアクエリ：タブレット・スマホ --- */
@media (max-width: 900px) {
  .club-intro .reposTitle {
  padding-bottom: 1vw;
}
  .club-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
  }

  /* スマホ等で1列にしたい、もしくは1列サイズに落とす場合 */
  .club-grid .span-3col {
    grid-column: span 1;
    aspect-ratio: 1 / 1; 
  }

  .club-intro .reposTitle {
    height: 10vw;
  }
}

/* --- メディアクエリ：1900px以上の巨大画面 --- */
@media (min-width: 1900px) {
  .club-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 8%; /* ロゴのサイズ感を統一するための余白 */
    box-sizing: border-box;
  }

  .club-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; 
    display: block;
  }

  /* 巨大画面でのボタン最適化 */
  .club-grid .club-item.span-3col {
    grid-column: span 3;
    aspect-ratio: 3 / 1; /* 高さがズレないよう比率を維持 */
    padding: 0;          /* ボタンは余白なしで枠いっぱいに */
    min-height: auto;
  }
  
  .club-grid .club-item.span-3col img {
    object-fit: contain; /* ボタン画像自体に余白がある場合は cover を検討 */
  }
}