/* -----------------------------
 * EV Rental Car Page Styles 20250331 (最適化版)
 * -----------------------------*/

/* ベース変数 */
:root {
  --evr-primary-color: #0068B7;
  --evr-secondary-color: #2E3192;
  --evr-dark-color: #333;
  --evr-light-color: #f4f4f4;
  --evr-success-color: #28a745;
  --evr-danger-color: #0068B7;
}

/* ----- 1. レイアウト基本設定 ----- */
.evr-container {
  max-width: 100%;
  padding: 0;
}

.evr-row {
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

/* メインコンテンツエリア（左カラム） */
.evr-main-col {
  flex: 0 0 calc(80% - 15px);
  max-width: calc(80% - 15px);
  margin-right: 15px;
}

/* サイドカラム（右カラム） */
.evr-side-col {
  flex: 0 0 20%;
  max-width: 20%;
  margin: 0;
  background-color: #f5f5f5; /* 右カラムの背景色を追加 */
}

/* スティッキーCTA */
.evr-sticky-cta {
  top: 20px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 40px);
  padding: 20px; /* 内側の余白を追加 */
}

.evr-sticky-cta > .evr-card {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: transparent; /* 右カラム内のカードは透明に */
}

.evr-sticky-cta .evr-card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.evr-side-col .evr-btn {
  margin-bottom: 15px;
}

.evr-sticky-cta .evr-card:hover {
  transform: none;
}

/* ----- 2. モバイル対応とレスポンシブ設定 ----- */
/* デスクトップ/モバイル表示切り替え */
.evr-desktop-only {
  display: block;
}

.evr-mobile-only {
  display: none;
}

/* モバイル固定CTA */
.evr-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 10px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}

.evr-mobile-cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 中サイズ画面 (1200pxまで) */
@media (max-width: 1200px) {
  .evr-main-col {
    flex: 0 0 calc(75% - 15px);
    max-width: calc(75% - 15px);
    margin-right: 15px;
  }
  
  .evr-side-col {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* タブレット/モバイル (991pxまで) */
@media (max-width: 991px) {
  /* レイアウト調整 */
  .evr-row {
    flex-direction: column;
  }
  
  .evr-main-col,
  .evr-side-col {
    flex: 0 0 100%;
    max-width: 100%;
    margin-right: 0;
  }
  
  /* スティッキー無効化 */
  .evr-sticky-cta {
    position: static;
    min-height: auto;
  }
  
  /* 表示/非表示切替 */
  .evr-desktop-only {
    display: none;
  }
  
  .evr-mobile-only {
    display: block;
  }
  
  /* モバイルCTA表示 */
  .evr-mobile-cta {
    display: block;
  }
  
  /* モバイルでの余白調整（オプション） */
  .evr-container {
    padding: 0 10px;
  }
  
  /* 下部固定CTAの余白確保 */
  body {
    padding-bottom: 60px;
  }
}

/* 小型モバイル (767pxまで) */
@media (max-width: 767px) {
  .evr-grid-2 {
    grid-template-columns: 1fr;
  }
  
  .evr-hero-section {
    padding: 60px 0;
  }
  
  .evr-title-large {
    font-size: 2rem;
  }
  
  .evr-btn-container .evr-btn {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
}

/* ----- 3. コンポーネント要素 ----- */
/* ヒーローセクション */
.evr-hero-section {
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('http://httpsusecodriveautosalescom.local/wp-content/uploads/2025/03/AdobeStock_447326574_Editorial_Use_Only_25.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 100px 0;
  text-align: center;
  position: relative;
}

.evr-hero-text {
  max-width: 800px;
  margin: 0 auto;
}

.evr-title-large {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.evr-lead {
  font-size: 1.25rem;
  color: white;
  font-weight: 300;
}

/* セクションタイトル */
.evr-section-title {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: 15px;
  font-weight: bold;
}

.evr-section-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: var(--evr-primary-color);
}

.evr-section-subtitle {
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #777;
  margin-bottom: 5px;
}

/* カードスタイル */
.evr-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 20px;
  border: none;
}

.evr-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.evr-card-body {
  padding: 20px;
}

.evr-model-card {
  border: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.evr-model-header {
  background-color: var(--evr-primary-color);
  color: white;
  text-align: center;
  padding: 15px;
}

/* ボタンスタイル */
.evr-btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}

.evr-btn-primary {
  color: #fff;
  background-color: var(--evr-primary-color);
  border-color: var(--evr-primary-color);
}

.evr-btn-primary:hover {
  background-color: #0068B7;
  border-color: #0086c0;
}

.evr-btn-success {
  color: #fff;
  background-color: var(--evr-success-color);
  border-color: var(--evr-success-color);
}

.evr-btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

.evr-btn-danger {
  color: #fff;
  background-color: var(--evr-danger-color);
  border-color: var(--evr-danger-color);
}

.evr-btn-danger:hover {
  background-color: #0086c0;
  border-color: #0086c0;
}

.evr-btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.evr-btn-dark:hover {
  background-color: #23272b;
  border-color: #1d2124;
}

.evr-btn-lg {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.evr-w-100 {
  width: 100%;
}

/* チェックリスト */
.evr-checklist {
  list-style: none;
  padding-left: 0;
}

.evr-checklist li {
  position: relative;
  padding-left: 30px;
}

.evr-checklist li:before {
  content: '✓';
  color: var(--evr-success-color);
  position: absolute;
  left: 0;
  top: 0;
}

/* 料金タグ */
.evr-price-tag {
  font-size: 1.2rem;
  margin: 20px 0;
}

/* マップコンテナ */
.evr-map-container {
  height: 400px;
  width: 100%;
  margin-bottom: 20px;
}

/* アコーディオン */
.evr-accordion-item {
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  background-color: white;
}

.evr-accordion-header {
  margin: 0;
}

.evr-accordion-button {
  display: block;
  width: 100%;
  padding: 15px 20px;
  background-color: #f8f9fa;
  border: none;
  text-align: left;
  cursor: pointer;
  font-weight: bold;
  position: relative;
}

.evr-accordion-button:after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.evr-accordion-button:not(.evr-collapsed):after {
  content: '-';
}

.evr-accordion-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.evr-accordion-collapse.evr-show {
  max-height: 500px;
}

.evr-accordion-body {
  padding: 15px 20px;
}

/* JS不要のアコーディオン */
.evr-accordion-item input[type="checkbox"] {
  display: none;
}

.evr-accordion-item label {
  display: block;
  padding: 15px 20px;
  background-color: #f8f9fa;
  cursor: pointer;
  position: relative;
  font-weight: bold;
}

.evr-accordion-item label:after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.evr-accordion-item input[type="checkbox"]:checked ~ label:after {
  content: '-';
}

.evr-accordion-item .evr-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.evr-accordion-item input[type="checkbox"]:checked ~ .evr-accordion-content {
  max-height: 500px;
}

/* 右カラム内のスタイル調整 */
.evr-side-col .evr-btn {
  margin-bottom: 15px;
  width: 100%; /* ボタンを幅いっぱいに */
}

.evr-side-col h3,
.evr-side-col h4,
.evr-side-col p {
  margin-bottom: 10px;
}

.evr-side-col > div {
  margin-bottom: 20px;
}

/* ----- 4. ユーティリティクラス ----- */
/* テキスト配置 */
.evr-text-center { text-align: center; }
.evr-text-start { text-align: left; }
.evr-text-muted { color: #6c757d; }

/* 画像関連 */
.evr-img-fluid {
  max-width: 100%;
  height: auto;
}

/* 装飾 */
.evr-rounded { border-radius: 0.25rem; }
.evr-shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.evr-shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.evr-border-0 { border: 0; }

/* フォント */
.evr-fw-bold { font-weight: bold; }
.evr-h3 { font-size: 1.75rem; }
.evr-small { font-size: 0.875rem; }

/* サイズ */
.evr-h-100 { height: 100%; }

/* パディング */
.evr-p-4 { padding: 1.5rem; }

/* マージン */
.evr-mb-0 { margin-bottom: 0; }
.evr-mb-1 { margin-bottom: 0.25rem; }
.evr-mb-2 { margin-bottom: 0.5rem; }
.evr-mb-3 { margin-bottom: 1rem; }
.evr-mb-4 { margin-bottom: 1.5rem; }
.evr-mb-5 { margin-bottom: 3rem; }
.evr-mt-2 { margin-top: 0.5rem; }
.evr-mt-3 { margin-top: 1rem; }
.evr-my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}


/* Model カード用の追加スタイル */
.evr-model-card {
  border-radius: 8px;
  overflow: hidden;
  padding: 10px;
  background-color: white;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}

.evr-model-card:hover {
  transform: translateY(-3px);
}

.evr-model-info {
  padding: 5px 0;
}

.evr-model-info h5 {
  font-size: 1.1rem;
  margin: 0;
}

.evr-price-tag {
  font-size: 1rem;
  color: #333;
  font-weight: bold;
}

/* ボタンの余白修正 */
.evr-btn-container .evr-btn {
  padding-right: 0.75rem !important; /* 右余白を強制的に修正 */
  margin-right: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

/* スティッキーコンテンツの余白と高さ調整 */
.evr-sticky-cta {
  padding: 15px;
}

/* モバイル表示の調整 */
@media (max-width: 991px) {
  .evr-model-card {
    margin-bottom: 15px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* モデルカード用のスタイル調整 */
.evr-model-card {
  border-radius: 8px;
  overflow: hidden;
  padding: 10px;
  background-color: white;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  margin-bottom: 15px;
}

.evr-model-card:hover {
  transform: translateY(-3px);
}

.evr-model-info {
  padding: 5px 0;
}

.evr-model-info h5 {
  font-size: 1.1rem;
  margin: 0;
}

.evr-price-tag {
  font-size: 1rem;
  color: #333;
  font-weight: bold;
}

/* 右カラムのレイアウト調整 - CTAカードが適切に表示されるように */
.evr-side-col .evr-card {
  background-color: #f5f5f5;
  border: none;
}

.evr-side-col .evr-model-card {
  background-color: white;
}

/* ボタンの余白修正 */
.evr-btn-container .evr-btn {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

/* スティッキーコンテンツの余白と高さ調整 */
.evr-sticky-cta {
  top: 20px;
  padding: 10px;
}

/* モバイル表示の調整 */
@media (max-width: 991px) {
  .evr-model-card {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* モデルカード用のスタイル調整 */
.evr-model-card {
  border-radius: 8px;
  overflow: hidden;
  padding: 10px;
  background-color: white;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  margin-bottom: 15px;
}

.evr-model-card:hover {
  transform: translateY(-3px);
}

.evr-model-info {
  padding: 5px 0;
}

.evr-model-info h5 {
  font-size: 1.1rem;
  margin: 0;
}

.evr-price-tag {
  font-size: 1rem;
  color: #333;
  font-weight: bold;
}

/* 右カラムのレイアウト調整 - CTAカードが適切に表示されるように */
.evr-side-col .evr-card {
  background-color: #f5f5f5;
  border: none;
}

.evr-side-col .evr-model-card {
  background-color: white;
}

/* ボタンの余白修正 */
.evr-btn-container .evr-btn {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}


/* 右カラムのサイズ調整 */
/* メインコンテンツエリア（左カラム）の幅を広げる */
.evr-main-col {
  flex: 0 0 calc(82% - 15px);
  max-width: calc(82% - 15px);
  margin-right: 15px;
}

/* サイドカラム（右カラム）の幅を狭くする */
.evr-side-col {
  flex: 0 0 18%;
  max-width: 18%;
  margin: 0;
  background-color: #f5f5f5;
}

/* 中サイズ画面の調整 (1200pxまで) */
@media (max-width: 1200px) {
  .evr-main-col {
    flex: 0 0 calc(78% - 15px);
    max-width: calc(78% - 15px);
    margin-right: 15px;
  }
  
  .evr-side-col {
    flex: 0 0 22%;
    max-width: 22%;
  }
}

/* 車両カード調整 */
.evr-model-card {
  padding: 8px;
  margin-bottom: 12px;
}

.evr-model-card img {
  max-width: 100%;
  height: auto;
}

.evr-model-info h5 {
  font-size: 1rem;
  margin: 0;
}

/* 料金表示の調整 */
.evr-price-tag {
  font-size: 0.9rem;
  margin: 10px 0;
}

/* ボタンのサイズ調整 */
.evr-side-col .evr-btn {
  padding: 0.3rem 0.6rem;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

/* 予約ボタンのパディング調整 */
.evr-btn-container .evr-btn {
  padding: 0.5rem;
  width: 100%;
}

/* スティッキーCTAのパディング調整 */
.evr-sticky-cta {
  padding: 10px;
}

/* 右カラム内のテキスト調整 */
.evr-side-col h3 {
  font-size: 1.3rem;
}

.evr-side-col h4 {
  font-size: 1.1rem;
}

.evr-side-col p, .evr-side-col .evr-small {
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* モバイル表示追加調整 */
@media (max-width: 991px) {
  .evr-model-card {
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .evr-mobile-cta .evr-btn {
    font-size: 0.9rem;
    padding: 0.3rem 0.5rem;
  }
}

/* タブレット表示の改善 (768px～991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .evr-model-card {
    display: flex;
    align-items: center;
    max-width: 100%;
  }
  
  .evr-model-card img {
    width: 40%;
    margin-right: 15px;
  }
  
  .evr-model-info {
    width: 60%;
  }
}

/* 小型モバイル表示の改善 (767px以下) */
@media (max-width: 767px) {
  .evr-mobile-cta {
    padding: 8px;
  }
  
  .evr-mobile-cta-inner {
    flex-wrap: wrap;
  }
  
  .evr-mobile-cta .evr-btn {
    margin: 5px;
    flex: 1 1 auto;
  }
}

/* 4列グリッド専用の新しいクラス */
.evr-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 30px 0;
}

/* カードのサイズと余白調整 */
.evr-grid-4 .evr-card {
  margin-bottom: 0;
}

.evr-grid-4 .evr-card-body {
  padding: 15px;
}

/* アイコン画像サイズ統一 */
.evr-grid-4 .evr-img-fluid {
  max-width: 100%;
  height: auto;
  max-height: 60px;
  width: auto;
}

/* タブレット対応 (991pxまで) */
@media (max-width: 991px) {
  .evr-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* モバイル対応 (767pxまで) */
@media (max-width: 767px) {
  .evr-grid-4 {
    grid-template-columns: 1fr;
  }
  
  /* モバイルでアイコンと文字を横並びに */
  .evr-grid-4 .evr-card-body {
    display: flex;
    text-align: left;
    align-items: center;
  }
  
  .evr-grid-4 .evr-mb-3 {
    margin-bottom: 0 !important;
    margin-right: 15px;
    width: 50px;
  }
}


/* 車両＆料金セクションのスタイル改善 - 横幅いっぱい・ヘッダー調整版 */
.evr-vehicle-section {
  margin: 30px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  background-color: white;
  width: 100%; /* 横幅いっぱいに */
  max-width: 100%;
}

/* ヘッダー部分 - より薄く */
.evr-vehicle-header {
  background-color: #0068B7;
  color: white;
  padding: 8px 20px; /* 上下のパディングを小さく */
  position: relative;
  /* 下部に余分なスペースを作らない */
  margin-bottom: 0;
}

.evr-vehicle-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.evr-vehicle-subtitle {
  font-size: 0.8rem;
  opacity: 0.9;
  margin-top: 2px;
  margin-bottom: 0; /* 下部マージンをなくす */
}

/* メインコンテンツ部分 */
.evr-vehicle-content {
  display: flex;
  padding: 20px;
}

/* 左側: 車両イメージエリア */
.evr-vehicle-image-area {
  flex: 0 0 40%;
  padding-right: 25px;
}

.evr-vehicle-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.evr-vehicle-caption {
  text-align: center;
  font-style: italic;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #666;
}

/* 右側: 車両詳細エリア */
.evr-vehicle-details {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
}

/* 料金部分 */
.evr-vehicle-price {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.evr-price-period {
  font-size: 0.9rem;
  font-weight: normal;
  color: #666;
}

/* 特徴リスト */
.evr-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 20px;
}

.evr-features-list li {
  position: relative;
  padding-left: 25px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

.evr-features-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: #0068B7;
  border-radius: 50%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="white"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

/* 予約ボタン */
.evr-reserve-btn {
  background-color: #0068B7;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
  max-width: 200px;
  text-align: center;
  margin-top: auto;
  align-self: flex-end; /* 右寄せに */
}

.evr-reserve-btn:hover {
  background-color: #2855b2;
}

.evr-disclaimer {
  font-size: 0.75rem;
  color: #777;
  text-align: right; /* 右寄せに */
  margin-top: 8px;
}

/* レスポンシブ対応 */
@media (max-width: 991px) {
  .evr-vehicle-content {
    flex-direction: column;
  }
  
  .evr-vehicle-image-area {
    flex: 0 0 100%;
    padding-right: 0;
    margin-bottom: 20px;
  }
  
  .evr-vehicle-details {
    flex: 0 0 100%;
  }
  
  .evr-features-list {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .evr-reserve-btn {
    align-self: center;
    width: 100%;
    max-width: none;
  }
  
  .evr-disclaimer {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .evr-vehicle-header {
    padding: 8px 12px;
  }
  
  .evr-vehicle-header h3 {
    font-size: 1.2rem;
  }
  
  .evr-vehicle-content {
    padding: 15px;
  }
  
  .evr-features-list {
    grid-template-columns: 1fr;
  }
}

/* 青いヘッダー部分の余白を調整 */
.evr-vehicle-header {
  background-color: #3366cc;
  color: white;
  padding: 10px 20px; /* 上下のパディングを同じに */
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* サブタイトル（説明文）の余白を消す */
.evr-vehicle-subtitle {
  font-size: 0.8rem;
  opacity: 0.9;
  margin: 0; /* 上下のマージンを完全になくす */
  padding: 0; /* パディングもなし */
  line-height: 1.3; /* 行の高さを少し詰める */
}

/* ヘッダー内のh3（車種名）の余白も調整 */
.evr-vehicle-header h3 {
  margin: 0 0 2px 0; /* 下にだけ最小限のマージン */
  padding: 0;
  line-height: 1.2;
  font-size: 1.3rem;
}

/* 青いヘッダー部分の余白を強制的に削除 */
.evr-vehicle-header {
  background-color: #0068B7;
  color: white;
  padding: 10px 20px !important; /* 上下のパディングを明示的に固定 */
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  display: flex !important; /* フレックスボックスを使用 */
  flex-direction: column !important;
  justify-content: center !important; /* 縦方向に中央揃え */
  height: auto !important; /* 高さを自動に */
  min-height: 0 !important; /* 最小高さの制限を外す */
}

/* ヘッダー内のすべての要素の余白を削除 */
.evr-vehicle-header * {
  margin: 0 !important;
  padding: 0 !important;
}

/* h3のスタイル調整 */
.evr-vehicle-header h3 {
  font-size: 1.3rem !important;
  line-height: 1.2 !important;
  display: block !important;
}

/* サブタイトルの調整 */
.evr-vehicle-subtitle {
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  opacity: 0.9;
  display: block !important;
  margin-top: 2px !important; /* タイトルとサブタイトルの間に最小限の余白 */
}

/* 青いヘッダーの後のコンテンツを強制的に上につける */
.evr-vehicle-header + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* 予約ディスクレイマーテキストの位置調整 */
.evr-disclaimer {
  text-align: center !important; /* 中央揃え */
  margin-top: 8px !important;
  font-size: 0.75rem;
  color: #777;
  width: 100%;
  display: block;
  /* 予約ボタンとの関連付け用のスタイル */
  clear: both;
  position: relative;
  left: 0;
}

.evr-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

/* タブレット・モバイル用のレスポンシブ対応 */
@media (max-width: 767px) {
  .evr-grid-2 {
    grid-template-columns: 1fr;
  }
}

.evr-benefits .evr-card {
  max-width: 100%;
  height: auto;
}

.evr-benefits .evr-card img {
  max-width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  margin-bottom: 0;
}

/* 画像コンテナの設定 */
.evr-benefits .evr-card .evr-text-center {
  padding-top: 10px;
  padding-bottom: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 0;
}

/* 見出しのスタイル設定 */
.evr-benefits h5,
.evr-benefits .evr-text-center + h5 {
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 5px 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
  display: inline-block;
  font-size: 1.3rem;
  position: relative;
  clear: both;
  font-weight: 600;
  text-align: center;
}

/* カード内の余白調整 */
.evr-benefits .evr-card-body {
  display: flex;
  flex-direction: column;
  padding: 15px;
  padding-top: 40px;
}

/* 段落テキストの設定 */
.evr-benefits .evr-card p,
.evr-benefits p {
  margin-top: 30px !important;
  position: relative;
  clear: both;
}

/* コメント用のpタグの余白を削除 */
.evr-main-col > p:empty,
.evr-main-col > p:has(br:only-child),
.evr-main-col > p:has(comment),
.evr-main-col > p[class=""] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* マップセクションとFAQセクションのレイアウト調整 */
.evr-charging-stations {
  padding: 20px 0 0 0 !important;
  margin: 0 !important;
}

.evr-map-container {
  width: 100% !important;
  max-width: 800px !important;
  height: auto !important;
  margin: 0 auto 30px auto !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
}

.evr-map-container:last-of-type {
  margin-bottom: 50px !important;
}

.evr-map-container iframe {
  width: 100% !important;
  height: 450px !important;
  border: none !important;
  display: block !important;
}

/* マップタイトル調整 */
h5.evr-text-center.evr-mb-3 {
  margin: 20px 0 15px 0 !important;
  font-size: 1.1rem !important;
}

/* FAQセクション調整 */
.evr-faq,
div.evr-faq.evr-mb-5 {
  margin: 0 !important;
  padding: 0 0 20px 0 !important;
}

.evr-faq .evr-section-title {
  margin: 0 0 25px 0 !important;
  padding-top: 10px !important;
}

.evr-faq .evr-section-subtitle + div {
  padding-top: 10px !important;
}

/* 余分な要素・余白の削除 */
div.evr-charging-stations.evr-mb-5 + div,
div.evr-benefits + div,
div.evr-map-section:last-of-type + div,
div[style*="background-color"] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .evr-map-container {
    margin-bottom: 25px !important;
  }
  
  .evr-map-container iframe {
    height: 350px !important;
  }
  
  .evr-map-container:last-of-type {
    margin-bottom: 30px !important;
  }
  
  h5.evr-text-center.evr-mb-3 {
    margin: 15px 0 10px 0 !important;
  }
  
  div.evr-charging-stations.evr-mb-5,
  div.evr-faq.evr-mb-5 {
    padding-top: 15px !important;
  }
}

/* ベネフィットグリッドの下の余分な要素を削除 */
.evr-benefits-grid + div,
.evr-benefits-grid ~ div:not(.evr-charging-stations):not(.evr-faq):not(.evr-map-section),
.evr-benefits + div:not(.evr-charging-stations):not(.evr-faq):not(.evr-map-section) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ベネフィットセクションと充電ステーションの間のスペースを調整 */
.evr-benefits {
  margin-bottom: 30px !important;
  padding-bottom: 0 !important;
}

.evr-charging-stations {
  margin-top: 40px !important;
  clear: both !important;
}

/* evr-benefits-gridの表示を修正 */
.evr-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 0 !important;
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

/* 特定のベネフィットグリッド要素を修正 */
div.evr-benefits-grid {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  position: relative;
  z-index: 1;
}

/* ベネフィットグリッドの直後の余分な要素をすべて削除 */
.evr-benefits-grid + div, 
.evr-benefits-grid + * + div,
.evr-benefits-grid ~ div:not(.evr-charging-stations):not(.evr-map-section):not(.evr-faq) {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  position: absolute !important;
  z-index: -1 !important;
}

/* ベネフィットセクションの終了部分を明確に */
.evr-benefits {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  overflow: visible;
  display: block;
  clear: both;
}

/* チャージングステーションセクションの開始位置を調整 */
.evr-charging-stations {
  margin-top: 40px !important;
  padding-top: 0 !important;
  position: relative;
  clear: both;
  display: block;
}

/* タイトル間の余白を確保 */
.evr-charging-stations .evr-section-title {
  margin-top: 0px !important;
}

/* ベネフィットセクションの固有の問題を解決 */
div.evr-benefits div.evr-benefits-grid {
  margin-bottom: 0 !important;
  position: relative;
  z-index: 1;
}

/* evr-benefitsの直後の要素を強制的に非表示 */
div.evr-benefits + * {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* チャージングステーションセクションを明確に表示 */
div.evr-charging-stations {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  margin-top: 30px !important;
  clear: both !important;
  z-index: 5 !important;
}

/* セクション間の不要なスペースを削除 */
.evr-main-col > div:not(.evr-mb-5):not(.evr-faq):not(.evr-charging-stations):not(.evr-benefits):not(.evr-whats-included):not(.evr-vehicle-section) {
  display: none !important;
  height: 0 !important;
}

/**
 * FAQ Accordion CSS - 最適化版
 */

/* アコーディオンボタンのスタイル - 必須 */
.evr-accordion-button {
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  font-weight: 600;
  padding: 15px 20px;
  border-radius: 6px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

.evr-accordion-button:hover {
  background-color: #e9ecef;
}

/* プラス/マイナスアイコン - 必須（ユーザーフィードバック用） */
.evr-accordion-button:after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: bold;
  color: #3366cc;
}

.evr-accordion-button:not(.evr-collapsed):after {
  content: '−';
}

/* 折りたたみ部分のトランジション - 必須（アニメーション用） */
.evr-accordion-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.evr-accordion-collapse.evr-show {
  max-height: 500px;
}

/* 回答部分のスタイル - 視覚的に重要 */
.evr-accordion-body {
  padding: 20px 25px;
  line-height: 1.6;
  background-color: #f5f9ff;
  border: 1px solid #e1e8f0;
  border-top: none;
  border-radius: 0 0 6px 6px;
  font-size: 0.95rem;
  color: #333;
}

/* FAQアイテム全体 - 視覚的な区切り用 */
.evr-faq .evr-accordion-item {
  margin-bottom: 15px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* 開いた状態のボタン - ユーザー体験向上のため必要 */
.evr-accordion-button:not(.evr-collapsed) {
  background-color: #e6f0ff;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: #d1e0ff;
  color: #3366cc;
}

/* モバイル対応 - レスポンシブデザインのため必要 */
@media (max-width: 767px) {
  .evr-accordion-button {
    padding: 12px 15px;
    font-size: 0.95rem;
  }
  
  .evr-accordion-body {
    padding: 15px;
    font-size: 0.9rem;
  }
}

/* 大元のコンテナから強制的に設定 */
#evrFaqAccordion {
  --evr-accordion-gap: 0px;
}

#evrFaqAccordion > * {
  margin-top: 0 !important;
  margin-bottom: 15px !important;
}

#evrFaqAccordion > * > * {
  margin: 0 !important;
}




/* Mobile Responsive Fixes 20250401 */

/* メインカラムの幅を修正 */
@media (max-width: 991px) {
  .evr-main-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
  
  /* コンテナのoverflowを修正 */
  .evr-container {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  
  /* 行の幅を修正 */
  .evr-row {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ヒーローセクションとレイアウトのバランス修正 */

/* ヒーローセクションの横幅修正 */
.evr-hero-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
}

/* ヒーローコンテナの修正 */
.evr-hero-section .evr-container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

/* メインレイアウトの修正 */
@media (max-width: 991px) {
  /* コンテナと行を中央に配置 */
  .evr-container,
  .evr-container.evr-layout-fix {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  /* 行の修正 */
  .evr-row,
  .evr-row.evr-layout-row-fix {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* メインカラムを中央揃えに */
  .evr-main-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    float: none !important;
    display: block !important;
    position: relative !important;
    left: 0 !important;
  }

  /* コンテンツコンテナの修正 */
  div.page-content,
  .page-content,
  div.evr-container.evr-layout-fix {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* ヒーローテキストエリアの修正 */
  .evr-hero-text {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* 全てのセクションの横幅を修正 */
  .evr-vehicle-section,
  .evr-whats-included,
  .evr-benefits,
  .evr-charging-stations,
  .evr-faq,
  #evr-reserve,
  .evr-reservation,
  .evr-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* セクション内のコンテンツにパディングを追加 */
  .evr-vehicle-section > div,
  .evr-whats-included > div,
  .evr-benefits > div,
  .evr-charging-stations > div,
  .evr-faq > div,
  #evr-reserve > div,
  .evr-section > div {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  /* ボディとHTMLのオーバーフロー制御 */
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* より小さい画面サイズの調整 */
@media (max-width: 576px) {
  /* より狭い画面での余白調整 */
  .evr-main-col,
  .evr-hero-text {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* セクション内の余白を縮小 */
  .evr-vehicle-section > div,
  .evr-whats-included > div,
  .evr-benefits > div,
  .evr-charging-stations > div,
  .evr-faq > div,
  #evr-reserve > div,
  .evr-section > div {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* ヒーローセクションのテキスト調整 */
  .evr-title-large {
    font-size: 2rem !important;
  }
  
  .evr-lead {
    font-size: 1rem !important;
  }
}

/* コンテナ直下のセクションスタイリング */
section.evr-hero-section {
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100vw !important;
  max-width: 100% !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}

/* メディアクエリ内でのヒーローセクション修正 */
@media (max-width: 991px) {
  section.evr-hero-section {
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}

/* evr-containerクラス固有の修正 */
div.evr-container.evr-layout-fix {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* EVレンタルカーサイト - 最適化されたCSS */

/* 共通スタイル - デザイン影響なし */
body, html {
  background-color: white !important;
}

/* 共通セクション設定 */
.evr-vehicle-section,
.evr-whats-included,
.evr-benefits,
.evr-charging-stations,
.evr-faq,
.evr-section-title,
.evr-section-subtitle {
  background-color: transparent !important;
}

/* ヒーローセクションの背景画像設定 */
.evr-hero-section {
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('http://httpsusecodriveautosalescom.local/wp-content/uploads/2025/03/AdobeStock_447326574_Editorial_Use_Only_25.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  color: white !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* セクションタイトルのマージン設定 */
h3.evr-section-title {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-top: 0 !important;
  background-color: transparent !important;
  border: none !important;
}

/* Charging Stationsセクションの調整 */
.evr-charging-stations.evr-mb-5,
div.evr-charging-stations.evr-mb-5 {
  margin: 0 0 30px 0 !important;
  padding: 20px 0 0 !important;
  border: none !important;
  background-color: transparent !important;
}

/* FAQセクション全体の設定 */
.evr-faq,
.evr-faq .evr-accordion {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* アコーディオンボタンの共通スタイル */
.evr-accordion-button,
.evr-faq .evr-accordion-button,
button.evr-accordion-button {
  padding: 12px 40px 12px 15px !important;
  position: relative !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
}

/* プラス/マイナス記号の位置設定 */
.evr-accordion-button:after,
.evr-faq .evr-accordion-button:after,
button.evr-accordion-button:after {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  content: '+' !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  width: 20px !important;
  text-align: center !important;
}

/* 開かれたアコーディオンのマイナス記号 */
.evr-accordion-button:not(.evr-collapsed):after,
.evr-faq .evr-accordion-button:not(.evr-collapsed):after {
  content: '−' !important;
}

/* 特に長いテキストを持つアコーディオン項目の調整 */
.evr-accordion-item:nth-child(4) .evr-accordion-button,
.evr-accordion-item:nth-child(6) .evr-accordion-button {
  padding-right: 45px !important;
}

/* ==== レスポンシブ対応 ==== */
@media (max-width: 991px) {
  /* ヒーローセクションのモバイル調整 */
  .evr-hero-section {
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('http://httpsusecodriveautosalescom.local/wp-content/uploads/2025/03/AdobeStock_447326574_Editorial_Use_Only_25.jpg') !important;
    padding: 60px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
  }
  
  /* ヒーローテキストの調整 */
  .evr-hero-text {
    padding: 0 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* ヒーローテキストの視認性向上 */
  .evr-hero-text h1,
  .evr-hero-text .evr-title-large {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
  }
  
  .evr-hero-text p,
  .evr-hero-text .evr-lead {
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
  }
  
  /* ベネフィットグリッドを1列に */
  .evr-benefits-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  
  /* ベネフィットカードの調整 */
  .evr-benefits-grid .evr-card {
    margin-bottom: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* カード内の画像サイズ調整 */
  .evr-benefits-grid .evr-text-center img {
    max-height: 150px !important;
    width: auto !important;
    margin: 0 auto !important;
  }
  
  /* カード内のテキスト調整 */
  .evr-benefits-grid h5 {
    font-size: 1.2rem !important;
    margin: 10px 0 !important;
  }
  
  .evr-benefits-grid .evr-card-body {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    padding: 15px !important;
  }
  
  /* コンテナの調整 */
  .evr-container {
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
  
  /* 行の調整 */
  .evr-row {
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
  
  /* メインカラムの調整 */
  .evr-main-col {
    padding: 0 15px !important;
    margin: 0 !important;
    background-color: transparent !important;
  }
  
  /* セクション間のマージン調整 */
  .evr-vehicle-section,
  .evr-whats-included,
  .evr-benefits,
  .evr-charging-stations,
  .evr-faq {
    margin-bottom: 30px !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
  
  /* マップ関連の調整 */
  .evr-map-container {
    margin: 0 auto 20px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
  
  .evr-map-section {
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    background-color: transparent !important;
  }
  
  /* アコーディオンの調整 */
  .evr-accordion {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
  }
  
  /* 固定CTAの調整 */
  .evr-mobile-cta {
    background-color: white !important;
    border-top: 1px solid #eee !important;
  }
  
  /* 車両画像の調整 */
  .evr-vehicle-image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-height: 300px !important;
  }
}

/* モバイル表示でのさらなる調整 */
@media (max-width: 767px) {
  /* アコーディオンボタンのテキストサイズ調整 */
  .evr-accordion-button,
  .evr-faq .evr-accordion-button {
    font-size: 0.95rem !important;
    padding: 12px 40px 12px 12px !important;
  }
  
  /* プラス/マイナス記号のさらなる右側への調整 */
  .evr-accordion-button:after,
  .evr-faq .evr-accordion-button:after {
    right: 12px !important;
  }
  
  /* アコーディオンアイテムの間隔調整 */
  .evr-accordion-item,
  .evr-faq .evr-accordion-item {
    margin-bottom: 8px !important;
  }
}


/* ==== 2025レスポンシブ対応 不要なp要素の削除==== */
@media (max-width: 991px) {
/* 不要な段落（p要素）を非表示にする - EVページ用 */
.evr-vehicle-content p:empty,
.evr-vehicle-content p:not([class]),
.evr-vehicle-section p:not(.evr-vehicle-caption),
.evr-vehicle-details + p,
.evr-vehicle-image-area + p,
.evr-vehicle-content + p,
.evr-vehicle-section > p {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  border: none !important;
  visibility: hidden !important;
}

/* 特定の場所にある不要なp要素を削除 */
div.evr-vehicle-content > p,
div.evr-vehicle-section > p,
div.evr-main-col > p:not([class]) {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
}

/* 空のp要素やブレークタグのみを含むp要素を削除 */
p:empty,
p:has(br:only-child),
p:has(comment),
p:has(:only-child):empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
}

/* ==== 20250405スティッキーctaの修正==== */
/* 予約ボタン下のテキストのみを調整するCSS */
.evr-side-col .evr-mt-3.evr-small.evr-text-muted {
margin-bottom: 20px;  /* 下部にマージンを追加 */
display: block;  /* ブロック要素として表示 */
font-size: 0.75rem;  /* 少し小さくして全体が見えるように */
line-height: 1.2;  /* 行間を少し詰める */
}

/* スティッキーCTAの下部に少しだけ余白を追加 */
.evr-sticky-cta {
padding-bottom: 30px;  /* 下部のパディングだけ増やす */
}

/* スティッキーサイドバーの改善CSS */
.evr-side-col {
position: relative; /* 重要: 子要素の絶対位置指定の基準点 */
z-index: 5; /* 他の要素より前面に表示 */
}

.evr-sticky-cta {
position: sticky; /* CSSのstickyはフォールバックとして使用 */
top: 20px;
display: flex;
flex-direction: column;
padding: 10px; /* パディングを減らしてより多くのコンテンツを表示 */
z-index: 5;
max-height: calc(100vh - 40px); /* ビューポート高さに基づく最大高さ */
overflow-y: auto; /* 高さを超えた場合はスクロール可能に */
}

/* スクロールバーをより洗練された見た目に */
.evr-sticky-cta::-webkit-scrollbar {
width: 5px;
}

.evr-sticky-cta::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.evr-sticky-cta::-webkit-scrollbar-thumb {
background: #0068B7;
border-radius: 10px;
}

/* サイドバー内のカードスタイル調整 */
.evr-side-col .evr-card {
margin-bottom: 0; /* 余分なマージンを削除 */
flex: 1;
display: flex;
flex-direction: column;
background-color: transparent;
}

.evr-side-col .evr-card-body {
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto; /* 必要に応じてスクロール可能に */
}

/* 余分なマージンの除去 */
.evr-side-col .evr-mt-3.evr-small.evr-text-muted {
margin-bottom: 10px; /* 最後のテキストのマージンを縮小 */
}

/* モバイル表示時は全てのスティッキー動作を無効化 */
@media (max-width: 991px) {
.evr-sticky-cta {
  position: static !important;
  top: auto !important;
  width: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}
}

/* 価格表示修正のみのCSS */

/* サイドバー内の車種情報カード調整 */
.evr-side-col .evr-model-card {
margin-bottom: 15px !important;
}

/* サイドバー内の車種タイトル調整 */
.evr-side-col .evr-model-info h5 {
font-size: 1.2rem !important;
margin-bottom: 5px !important;
display: block !important;
}

/* サイドバー内の価格表示を確実に表示 */
.evr-side-col .evr-model-info {
display: block !important;
padding: 10px 0 !important;
height: auto !important;
overflow: visible !important;
}

/* 価格表示を明確に */
.evr-side-col .evr-price-tag {
display: block !important;
font-weight: bold !important;
margin: 8px 0 !important;
font-size: 0.95rem !important;
line-height: 1.3 !important;
}

/* 予約ボタンの余白確保 */
.evr-side-col .evr-btn-container {
margin-top: 10px !important;
margin-bottom: 10px !important;
}

/* スティッキーCTAのスクロール設定 */
.evr-sticky-cta {
height: auto !important;
max-height: calc(100vh - 40px) !important;
overflow-y: auto !important;
padding-bottom: 20px !important;
}


/* 全く新しいクラスを使った右サイドバー用スタイル */

/* ベースコンテナ - 既存のサイドバー要素内に配置する想定 */
.tesla-sidebar {
position: relative;
width: 100%;
max-width: 100%;
background-color: #f5f5f5;
box-sizing: border-box;
}

/* スティッキーコンテナ */
.tesla-sticky-container {
position: sticky;
top: 20px;
display: flex;
flex-direction: column;
padding: 15px;
max-height: calc(100vh - 40px);
box-sizing: border-box;
width: 100%;
}

/* カード本体 */
.tesla-card {
width: 100%;
background-color: transparent;
border-radius: 8px;
display: flex;
flex-direction: column;
}

.tesla-card-inner {
padding: 15px;
display: flex;
flex-direction: column;
}

/* 見出し */
.tesla-heading {
font-size: 1.2rem;
font-weight: bold;
margin: 0 0 15px 0;
color: #333;
}

/* 車両カード */
.tesla-vehicle {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 10px;
margin-bottom: 15px;
display: block;
overflow: hidden;
}

/* 車両画像 */
.tesla-vehicle-image {
width: 100%;
margin-bottom: 10px;
}

.tesla-vehicle-image img {
width: 100%;
height: auto;
display: block;
max-height: 120px;
object-fit: contain;
}

/* 車両情報 */
.tesla-vehicle-info {
display: block;
min-height: 60px;
}

.tesla-vehicle-name {
font-size: 1.1rem;
font-weight: bold;
margin: 0 0 5px 0;
color: #333;
display: block;
}

.tesla-vehicle-price {
font-size: 0.9rem;
color: #333;
margin: 0;
display: block;
font-weight: bold;
}

/* ボタン */
.tesla-button-container {
margin: 15px 0;
width: 100%;
display: flex;
justify-content: center;
}

.tesla-button {
display: block;
width: 100%;
background-color: #0068B7;
color: white;
text-align: center;
padding: 10px 15px;
border-radius: 5px;
font-weight: bold;
text-decoration: none;
font-size: 1rem;
border: none;
cursor: pointer;
transition: background-color 0.2s;
}

.tesla-button:hover {
background-color: #005094;
}

/* 説明テキスト */
.tesla-note {
font-size: 0.8rem;
color: #777;
margin: 10px 0 0 0;
line-height: 1.4;
text-align: center;
}

/* モバイル対応 */
@media (max-width: 991px) {
.tesla-sticky-container {
  position: static;
  padding: 10px;
}

.tesla-sidebar {
  margin-bottom: 20px;
}
}

@media (max-width: 991px) {
  /* PC版CTAをモバイルで非表示に */
  .evr-side-col .evr-sticky-cta,
  .evr-side-col .tesla-sidebar {
    display: none;
  }
}

/* 右カラムの幅を調整（少し狭め） */
.evr-side-col {
  flex: 0 0 22% !important;
  max-width: 22% !important;
}

/* メインカラムの幅も合わせて調整 */
.evr-main-col {
  flex: 0 0 calc(78% - 15px) !important;
  max-width: calc(78% - 15px) !important;
}

/* Tesla車両カードの余白を調整 */
.tesla-vehicle {
  padding: 10px !important;
  margin-bottom: 10px !important; /* さらに余白を減らす */
}

/* カード内部の余白を調整 */
.tesla-card-inner {
  padding: 10px !important;
}

/* 画像の周りの余白を減らす */
.tesla-vehicle-image {
  margin-bottom: 3px !important;
}

/* タイトルと価格の間隔を詰める */
.tesla-vehicle-name {
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
}

.tesla-vehicle-price {
  font-size: 0.95rem !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
}

/* 「No Need to Recharge Upon Return」の余白調整 */
.tesla-heading {
  margin-bottom: 8px !important;
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
}

/* 予約ボタンの余白調整 */
.tesla-button-container {
  margin: 10px 0 !important;
}

/* 予約ボタン下のテキストのサイズと行間を調整 */
.tesla-note {
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  margin-top: 5px !important;
}

/* 全体の高さを固定して、スクロールなしで全て表示されるようにする */
.tesla-sticky-container {
  max-height: none !important;
  overflow-y: visible !important;
}

/* 車両カードの画像サイズを調整 */
.tesla-vehicle-image img {
  max-height: 150px !important; /* 180pxから少し小さく */
  object-fit: contain !important;
}

/* 予約ボタンのパディングを調整 */
.tesla-button {
  padding: 10px 15px !important;
  font-size: 1rem !important;
}


/* 20250428追加チャットボタンと重ならないように Reserve Now ボタンを左寄せにする */
.evr-mobile-cta-inner {
  display: flex;
  justify-content: space-between;
  padding-right: 80px; /* チャットボタン用のスペースを確保 */
}