/* =========================
   STAFF responsive
========================= */

/* --- タブレット（2列・中央寄せ） --- */
@media screen and (max-width: 1024px){

  #staff .staff-profile{
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  #staff .section-title{
    margin-bottom: 48px;
  }

  #staff .staff-cards{
    grid-template-columns: repeat(2, 300px);
    gap: 32px 64px;
    justify-content: center;
  }

  #staff .staff-card{
    width: 300px;
    margin-top: 0 !important;
  }

  #staff .staff-card-info{
    padding-top: 12px;
  }
}


/* --- スマホ（1列） --- */
@media screen and (max-width: 768px){

  /* STAFF 全体を1カラムに */
  #staff .staff-profile{
    grid-template-columns: 1fr;
  }

  /* カードを1列・中央寄せ */
  #staff .staff-cards{
    grid-template-columns: 1fr;
    justify-items: center;   /* ← これが重要 */
    gap: 32px;
  }

  /* カード幅は少し余白を残す */
  #staff .staff-card{
    width: 90%;
    max-width: 360px;
  }

  /* moreボタンも中央 */
  #staff .staff-more-btn{
    width: 90%;
    max-width: 360px;
  }

}