/* ===========================
   COMMITMENT Section - PC Styles
   COMMITMENTセクション PC専用スタイル
   適用条件: 960px以上
   =========================== */

/* 注意: functions.phpで既にmedia="screen and (min-width: 960px)"が設定されているため、このファイル内で@mediaは不要 */

/* ========================================
   グリッドレイアウト - PC版（960px以上）
   4カラム表示を確実に適用
   ======================================== */

  /* グリッド: 4カラム固定 */
  #section-commitment .ptlCommitHero__grid,
  .ptlCommitHero__grid {
    grid-template-columns: repeat(4, 1fr);
    column-gap: clamp(16px, 2vw, 24px);
    row-gap: clamp(40px, 4.6vw, 80px);
  }
  
  /* カードサイズの最適化 */
  #section-commitment .ptlCommitHero__btn {
    min-height: 170px;
    padding: clamp(16px, 2vw, 24px) clamp(14px, 1.8vw, 20px);
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  }
  
  /* カード内のすべての子要素を透明化してガラス調を表示 */
  #section-commitment .ptlCommitHero__btn * {
    background: transparent;
  }
  
  /* 画像アスペクト比維持 */
  #section-commitment .ptlCommitHero__icon img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
  }
  
  /* セクション余白 - PC設定 */
  body #section-commitment {
    margin-bottom: 80px !important;
  }

/* ========================================
   グリッドレイアウト - タブレット（700px-959px）
   2カラム表示
   ======================================== */

@media (min-width: 700px) and (max-width: 959px) {
  #section-commitment .ptlCommitHero__grid,
  .ptlCommitHero__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   旧グリッドシステム対応（後方互換性）
   ======================================== */

  .ptlCommit-grid .cmt-cards,
  .ptlCommit .cards {
    grid-template-columns: repeat(3, 1fr);
  }
  
  #section-commitment-tiles .ptlNavHero__grid {
    grid-template-columns: repeat(3, 1fr);
  }