/* ============================================================
   SERVICE PAGE — DEVELOPMENT DETAIL SECTION
   セクション: .sv-dev（ベース: .sv-base）
   背景: white (#FFFFFF)
   固有: 5カラムグリッド / 小さめカード / レスポンシブ3→2→1カラム
   ============================================================ */

/* ---- Section Background ---- */
.sv-dev {
  background: #FFFFFF;
}

/* ---- Grid: 5 columns (default) ---- */
.sv-dev .sv-base__grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* ---- Card: compact padding ---- */
.sv-dev .sv-base__card {
  padding: 28px 20px 24px;
}

/* ---- Card Body: smaller text ---- */
.sv-dev .sv-base__card-body {
  font-size: 0.8rem;
}

/* ---- Responsive: Tablet Large (≤ 1200px) ---- */
@media (max-width: 1200px) {
  .sv-dev .sv-base__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* ---- Responsive: Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  .sv-dev .sv-base__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* ---- Responsive: Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  .sv-dev .sv-base__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .sv-dev .sv-base__card {
    padding: 22px 18px 20px;
  }
}

/* ---- Responsive: Small Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  .sv-dev .sv-base__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}