/*-----------------------------------------------------
各種割引と教育訓練給付制度を利用した場合　（実質●●円）
------------------------------------------------------*/
  /* 基本レイアウト */
  .price-container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    gap: 10px; /* 700px枠内なら隙間はこれくらいが適切 */
    max-width: 700px; /* 親の幅に合わせる */
    margin: 0 auto;   /* 中央揃え */
    font-family: sans-serif; 
    padding: 20px; 
    box-sizing: border-box;
}
  
  /* カード共通設定 */
  .card { 
    border-radius: 10px; 
    padding: 15px; 
    text-align: center; 
    color: #333; 
    flex: 1 1 130px; /* 最低130pxは確保し、余白があれば伸びる */
    box-sizing: border-box;
}
  
  /* ボックスグループ用 */
.cardbox { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    flex: 1 1 150px; 
  }  
  .c1 { background: #fffde7; border: 2px solid #fbc02d; }
  .c2 { background: #fff3e0; border: 2px solid #ffb74d; }
  .c3 { background: #e3f2fd; border: 2px solid #64b5f6; }
  .c4 { background: #fce4ec; border: 2px solid #f06292; }
  
  .title { font-weight: bold; margin-bottom: 8px; font-size: 0.9em; }
  .price { font-size: 1.2em; font-weight: bold; color: #d32f2f; }
  .symbol { font-size: 1.4em; font-weight: bold; color: #555; margin: 10px 0; }


/* 既存のスマホ用設定のここを修正 */
  @media (max-width: 768px) {
    .price-container { flex-direction: column; gap: 5px; }
    .card, .cardbox { width: 100%; }
    
    .tCenter { margin-bottom: 5px; }
    /* 追加：c3を含めた内側のカードが親ボックスの幅に追従するようにする */
    .cardbox .card { width: 100%; box-sizing: border-box; }
    
    .symbol { transform: rotate(90deg); margin: 5px 0; }
  }