/* ==========================================
   自動車買取ステップフロー用カスタムCSS
   ========================================== */

/* 全体のコンテナ設定 */
.car-flow-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 15px;
  box-sizing: border-box;
}

.car-flow-container *,
.car-flow-container *::before,
.car-flow-container *::after {
  box-sizing: border-box;
}

/* グリッドレイアウト（基本は1列、スマホ対応） */
.car-flow-grid {
  display: block;
}

/* 各ステップのカードスタイル */
.car-flow-card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.car-flow-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ステップバッジ（数字部分） */
.car-flow-badge {
  display: inline-block;
  background-color: #1a365d; /* シックなネイビー（サイトのメインカラーに合わせて変更してください） */
  color: #ffffff;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

/* コンテンツエリア */
.car-flow-content {
  width: 100%;
}

/* 見出し（h3） */
.car-flow-title {
  margin: 0 0 12px 0;
  font-weight: bold;
  line-height: 1.4;
  color: #333333;
}

/* 説明文（p） */
.car-flow-text {
  margin: 0;
  line-height: 1.6;
  color: #555555;
}

/* ==========================================
   レスポンシブ対応（タブレット・PCサイズ）
   ========================================== */

/* タブレットサイズ（画面幅600px以上で2列） */
@media screen and (min-width: 600px) {
  .car-flow-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
  }
  .car-flow-card {
    flex: 0 0 calc(50% - 24px);
    margin: 12px;
  }
}

/* PCサイズ（画面幅900px以上で3列） */
@media screen and (min-width: 900px) {
  .car-flow-card {
    flex: 0 0 calc(33.333% - 24px);
    margin: 12px;
  }
}

/* ==========================================
   参入条件セクション用カスタムCSS
   ========================================== */

/* 全体のコンテナ設定 */
.car-condition-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 15px;
  box-sizing: border-box;
}

.car-condition-container *,
.car-condition-container *::before,
.car-condition-container *::after {
  box-sizing: border-box;
}

/* グリッドレイアウト（基本は1列の縦並び） */
.car-condition-grid {
  display: block;
}

/* 各条件カードのスタイル */
.car-condition-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* カード上部のヘッダーエリア */
.car-condition-header {
  border-bottom: 2px solid #1a365d; /* 前回のステップフローと同系統のアクセントカラー */
  padding-bottom: 10px;
  margin-bottom: 16px;
}

/* 「参入条件①」などのラベル */
.car-condition-label {
  margin: 0 0 4px 0;
  font-weight: bold;
  color: #1a365d;
}

/* 「初期必要人員数」などのメインタイトル */
.car-condition-title {
  margin: 0;
  font-weight: bold;
  line-height: 1.3;
  color: #333333;
}

/* 本文テキスト */
.car-condition-text {
  margin: 0;
  line-height: 1.7;
  color: #555555;
}

/* 注記・補足部分（※部分の文字色を少し落とす表現） */
.car-condition-note {
  display: block;
  margin-top: 8px;
  color: #777777;
}

/* ==========================================
   レスポンシブ対応（タブレット・PCサイズ）
   ========================================== */

/* 画面幅768px以上で2列横並びへ切り替え */
@media screen and (min-width: 768px) {
  .car-condition-grid {
    display: flex;
    margin: 0 -12px;
  }
  
  .car-condition-card {
    flex: 0 0 calc(50% - 24px);
    margin: 12px;
    margin-bottom: 12px; /* 縦並び用のマージンをリセット */
  }
}