@charset "utf-8";

/* ===================================================
   ■ 1. メインビジュアル（大画面550px・見切れゼロ完全固定）
   =================================================== */
/* スライドショー全体の大きな枠線（迫力のある550pxの高さに引き上げ） */
.hero-slider {
  position: relative !important;
  width: 100% !important;
  height: 550px !important;       /* パソコン大画面でも絶対に高さ550pxに固定 */
  max-height: 550px !important;
  overflow: hidden !important;
  background: #333 !important;      /* 写真の左右にできる余白の後ろの背景色 */
  display: block !important;
  margin: 0 auto !important;
}

/* 内側の画像ラッパー */
.slider-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* 3枚の写真それぞれの個別の部屋（位置を中央に固定） */
.slide-item.js-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  transition: opacity 1.2s ease-in-out !important; /* 1.2秒かけてふわっとフェード */
  z-index: 1 !important;
  display: flex !important;
  justify-content: center !important; /* 画像を必ず横方向のど真ん中に寄せる */
  align-items: center !important;     /* 画像を必ず縦方向のど真ん中に寄せる */
}

/* JavaScriptで選択された（activeクラスがついた）画像を表に出す */
.slide-item.js-slide.active {
  opacity: 1 !important;
  z-index: 2 !important;
}

/* ★写真の上下左右を1ミリも見切れ（カット）させず、横幅いっぱいにダイナミックに広げる大画面設定 */
.slide-item.js-slide img {
  width: 100% !important;         /* 横幅を画面の端から端まで100%強制的に広げます */
  max-width: 100% !important;     
  min-width: 100% !important;     /* 強制フルワイド拡張のお守り */
  
  height: 100% !important;        /* 縦幅もスライド枠の高さ（550px）にピッタリ100%合わせます */
  max-height: 100% !important;
  min-height: 100% !important;

  margin: 0 auto !important;      /* 左右の余白を自動にして、画像を完全に「真ん中（センター）」に配置 */
  padding: 0 !important;
  display: block !important;
  
  /* 【大正解のロジック】写真本来の縦横比（プロポーション）を100%崩さず、引き伸ばさずに枠に収める命令 */
  object-fit: contain !important; 
  object-position: center center !important; /* 写真の中心を基準点に固定 */
}

/* スライドの上の文字（キャッチコピー） */
.slide-caption {
  position: absolute !important;
  bottom: 40px !important;
  left: 5% !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.7) !important; /* 文字を読みやすくするための半透明の黒背景 */
  padding: 20px !important;
  border-left: 4px solid #e2b216 !important; /* 苅安（かりやす）色のアクセント線 */
  z-index: 3 !important;
}
.slide-caption h2 { font-size: 24px !important; margin: 0 0 10px 0 !important; color: #fff !important; }
.slide-caption p { margin: 0 !important; font-size: 14px !important; color: #ddd !important; }


/* ===================================================
   ■ 2. 他店メンテ歓迎セクション（背景を薄い苅安色に）
   =================================================== */
.maintenance-welcome {
  padding: 80px 0 !important;
  text-align: center !important;
  background: #fdfcf3 !important; /* 苅安を極限まで薄く白に近づけた心地よい背景色 */
}
.maintenance-welcome h2 {
  font-size: 28px !important;
  margin-bottom: 20px !important;
  color: #111 !important;
}
.maintenance-welcome .lead-text {
  font-size: 20px !important;
  color: #c99a0e !important; /* 濃い目の苅安色 */
  margin-bottom: 20px !important;
  line-height: 1.6 !important;
}
.maintenance-welcome .description {
  max-width: 800px !important;
  margin: 0 auto 30px !important;
  line-height: 1.8 !important;
  color: #555 !important;
}


/* ===================================================
   ■ 3. おすすめ在庫車両セクション（タブ＆カードレイアウト）
   =================================================== */
.latest-inventory {
  padding: 80px 0 !important;
  background: #fdfdfd !important;
}
.latest-inventory h2 {
  font-size: 24px !important;
  text-align: center !important;
  line-height: 1.4 !important;
}
.latest-inventory h2 span {
  font-size: 14px !important;
  color: #666 !important;
  font-weight: normal !important;
  display: block !important;
  margin-top: 5px !important;
}

/* タブ切り替えボタンの並び */
.tab-buttons {
  display: flex !important;
  justify-content: center !important;
  gap: 15px !important;
  margin: 30px 0 40px !important;
}
.tab-btn {
  padding: 12px 25px !important;
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  color: #555 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}
.tab-btn:hover {
  background: #fdfcf3 !important;
  border-color: #e2b216 !important;
}
/* 現在選択されているアクティブタブ（苅安色） */
.tab-btn.active {
  background: #e2b216 !important;
  border-color: #e2b216 !important;
  color: #fff !important;
}

/* 在庫車両の3カラムグリッド並び */
.inventory-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 30px !important;
  margin-top: 40px !important;
}

/* 車両カード個別のデザイン */
.car-card {
  background: #fff !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}
.car-card.js-car-item {
  transition: opacity 0.4s ease, transform 0.4s ease !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}
/* JSで非表示にされたお車をシュッと消すための設定 */
.car-card.js-car-item.is-hidden {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: scale(0.9) !important;
  border: none !important;
  box-shadow: none !important;
}

.car-img {
  position: relative !important;
}

/* ★カードの在庫写真も、拡大画面で見切れない仕様の最終完成版 */
.car-img img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important; 
  object-fit: contain !important; /* お車の下側（タイヤ付近）が絶対にカットされずに100%収まります */
  object-position: center center !important; 
  background: #333 !important; /* 余白ができる部分の背景色（引き締まる黒） */
}

/* 輸入車に自動でつく苅安色のラベル */
.badge-import {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: #e2b216 !important; /* 苅安色 */
  color: #fff !important;
  font-size: 11px !important;
  font-weight: bold !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.car-info {
  padding: 15px !important;
}
.car-info h3 {
  font-size: 16px !important;
  margin: 0 0 10px 0 !important;
}
.car-spec-table {
  width: 100% !important;
  font-size: 13px !important;
  margin-bottom: 10px !important;
}
.car-spec-table th {
  text-align: left !important;
  color: #888 !important;
  font-weight: normal !important;
  width: 40px !important;
}

.car-price {
  border-top: 1px solid #eee !important;
  padding-top: 10px !important;
  font-size: 13px !important;
}
.car-price strong {
  font-size: 18px !important;
  color: #d00 !important;
}

/* 下部の一覧リンクボタンエリア */
.btn-area {
  text-align: center !important;
  margin-top: 40px !important;
}
.btn-line {
  display: inline-block !important;
  padding: 15px 40px !important;
  background: transparent !important;
  border: 2px solid #e2b216 !important; /* 苅安色の線 */
  color: #e2b216 !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  transition: all 0.3s !important;
}
.btn-line:hover {
  background: #e2b216 !important;
  color: #fff !important;
}