/* style.css */

/* 汎用的なコンテンツラッパーのスタイル */
.content-wrapper {
  max-width: 960px; /* コンテンツの最大幅を1200pxに設定 */
  margin: 0 auto; /* コンテナを中央に配置 */
  padding: 0 20px; /* 左右に余白を追加（画面端にコンテンツが張り付くのを防ぐ） */
  box-sizing: border-box; /* パディングを幅の計算に含める */
}

body {
  font-family: "Helvetica", "Helvetica Neue", sans-serif;
  background: #f7f7f7; /* 背景色を#f7f7f7に設定 */
  margin: 0;
  padding-bottom: 150px; /* ★フッターの高さに合わせて調整する数値 */
}

h1 {
  color: #000000;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* 角を8px丸める */
  margin-bottom: 12px; /* 画像の下に12pxの余白 */
}

.pdf-links a {
  display: inline-block;
  margin: 10px 10px 10px 0;
  padding: 10px;
  background: #276746;
  color: white;
  border-radius: 5px;
  text-decoration: none;
}

.pdf-links a:hover {
  background: #1f5538; /* ホバー時の色を追加 */
}

.card-section {
  margin-top: 40px;
}

.card-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  scroll-padding-right: 20px;
  margin-top: 20px; /* ★ここを追加・調整します。 */
}

.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 16px;
  box-sizing: border-box;
  width: 100%; /* 基本の幅 */
  max-width: 360px; /* 最大幅 */
  min-width: 280px; /* ★スマホ向けに調整した値 */
  flex-shrink: 0; /* カードが縮まないようにする */
  scroll-snap-align: start; /* スクロールスナップの起点（任意） */
}

.label-banner {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  border-radius: 6px;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sonicplus {
  font-size: 1.5em;
  margin: 0;
}

.type-box {
  display: inline-flex;
  background-color: #555;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  height: 25px;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  line-height: 1;
  transform: translateY(-1px);
}

.model {
  font-weight: bold;
  font-size: 1.5em;
  color: #111;
  margin: 0;
}

.price-info {
  font-size: 14px;
  margin-top: 10px;
  color: #222;
}

.total-price {
  background: #f2f2f2;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.total-price .label {
  font-size: 13px;
  color: #333;
}

.total-price .number {
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.price-info .yen {
  font-size: 0.9em;
  vertical-align: baseline; /* 円マークのずれを修正 */
}

.btn-small {
  display: inline-block;
  background: #888;
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 6px;
  margin-top: 6px;
}

.button-row {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.btn-reserve {
  flex: 2;
  background: #276746;
  color: white;
  font-size: 15px;
  padding: 10px 0;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
}

.btn-reserve:hover {
  background: #1f5538;
}

.btn-sub {
  flex: 1;
  background: #1c2d5a;
  color: white;
  font-size: 14px;
  padding: 10px 0;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
}

.btn-sub:hover {
  background: #101f3f;
}

.btn-large {
  display: inline-block;
  background: #555;
  color: white;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
  margin: 4px 4px 0 0;
}

/* 各グレードのボタンの色 */
.btn-standard {
  background: #727070; /* 薄いグレー */
  color: white;
}
.btn-highgrade {
  background: #4c4c4c; /* 濃いめのグレー */
  color: #cecece;
}
.btn-topgrade {
  background: #2b1c08; /* ほぼ黒の濃いグレー */
  color: #bca17e; /* ゴールド */
}

.btn-time {
  display: inline-block;
  background: #f2f2f2;
  color: #000;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  margin-top: 4px;
}

.card p {
  margin: 2px 0;
}

.product-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-intro {
  text-align: center;
  padding: 20px;
}

.product-intro img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}

/* 表示切り替えボタンのスタイル */
.display-toggle-buttons {
  text-align: center;
  margin-bottom: 20px;
}

.toggle-button {
  background-color: #eee;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px 20px;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.toggle-button:hover {
  background-color: #ddd;
}

.toggle-button.active {
  background-color: #1c2d5a;
  color: white;
  border-color: #1c2d5a;
}

/* スクロールボタンのスタイル */
.scroll-buttons {
  text-align: center;
  margin-top: 0px; /* ここを0pxに変更（もしスクロールボタンとの隙間も詰める場合） */
}

.scroll-button {
  background-color: #1c2d5a;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  margin: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  user-select: none;
}

.scroll-button:hover {
  background-color: #276746;
}

.scroll-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

@media screen and (max-width: 767px) {
  .scroll-button {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }

  .card-container {
    padding-bottom: 0px; /* ここを0pxに変更 */
  }

  .scroll-buttons {
    margin-top: 0px; /* ここを0pxに変更（もしスクロールボタンとの隙間も詰める場合） */
  }
}

@media screen and (max-width: 400px) {
  .card {
    transform: scale(0.9);
    transform-origin: top left;
    margin-right: -28px;
    margin-bottom: -28px;
  }
  .card-container {
    gap: 10px;
    padding-bottom: 0px; /* ここを0pxに変更 */
  }
  .scroll-buttons {
    margin-top: 0px; /* ここを0pxに変更（もしスクロールボタンとの隙間も詰める場合） */
  }
  /* body { padding: 15px; } を削除 */
}

@media screen and (max-width: 350px) {
  .card {
    transform: scale(0.8);
    transform-origin: top left;
    margin-right: -56px;
    margin-bottom: -56px;
  }
  .card-container {
    gap: 5px;
    padding-bottom: 0px; /* ここを0pxに変更 */
  }
  .scroll-buttons {
    margin-top: 0px; /* ここを0pxに変更（もしスクロールボタンとの隙間も詰める場合） */
  }
  /* body { padding: 10px; } を削除 */
}

/* 各タイプ別のボタンの色 */
.btn-frontrear {
  background-color: #004d40; /* 深いティール（濃い緑青系） */
  color: white;
}
.btn-front {
  /* HTMLで `btn-front` として使用されている「フロント専用」の色 */
  background-color: #1a237e; /* 深いインディゴ（濃い青系） */
  color: white;
}
.btn-rear {
  /* HTMLで `btn-rear` として使用されている「リア専用」の色 */
  background-color: #4a148c; /* 深いパープル（濃い紫系） */
  color: white;
}

/* footer-imageとfooter-innerのスタイル（必要に応じて調整） */
.footer-image {
  width: 100%; /* 親要素（.footer-content-wrapper）の幅に合わせる */
  margin-bottom: 5px; /* 画像とボタンのグループの間に余白 */
}

.footer-image img {
  display: block; /* 画像をブロック要素にして、不要な下部の隙間をなくす */
  width: 100%; /* 親要素の幅に合わせる */
  height: auto; /* 縦横比を維持 */
}

.footer-inner {
  width: 100%; /* 親要素（.footer-content-wrapper）の幅に合わせる */
  /* 必要に応じて、この中に元々あったpaddingはfooter-content-wrapperに移動させても良いです */
}

/* その他の既存のフッター関連のスタイルはそのまま維持 */

.fixed-footer {
  /* 既存の他のスタイルはそのまま */
  background-color: #ffffff; /* または white; */
}

.shop-name {
  text-align: center; /* テキストを中央揃えにする */
  font-size: 20px; /* フォントサイズを調整する (例: 2em、または32pxなど) */
  color: #333333; /* 必要であれば、フッターが白背景なので文字色を黒系にする（例：#333333） */
  /* 必要に応じて、上下の余白を調整することもできます */
  margin-top: 20px; /* 上側の余白 */
  margin-bottom: 5px; /* 下側の余白 */
}

/* 固定フッター全体のスタイル */
.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333333; /* フッターの背景色を白に */
  z-index: 9999; /* 他のコンテンツの上に表示 */
  display: flex;
  flex-direction: column;
  align-items: center; /* コンテンツを水平方向中央に揃える */
  padding-top: 10px; /* 必要に応じて調整 */
  padding-bottom: 10px; /* 必要に応じて調整 */
}

/* フッターのコンテンツを囲むラッパー */
.footer-content-wrapper {
  max-width: 1200px; /* コンテンツの最大幅を制限 */
  width: 100%; /* 親要素の幅に合わせて100%になるように */
  margin: 0 auto; /* コンテンツを中央に配置 */
  box-sizing: border-box; /* パディングを幅に含める */
  padding: 0 20px; /* 左右に余白を追加（推奨） */
}

/* 店舗名のh1要素のスタイル */
.shop-name {
  text-align: center; /* テキストを中央揃えにする */
  font-size: 21px; /* フォントサイズを調整する */
  color: #ffffff; /* フッターが白背景なので、文字色を濃い色に */
  margin-top: 10px; /* 上側の余白 */
  margin-bottom: 10px; /* 下側の余白 */
}

/* ボタンのグループ */
.btn-group {
  display: flex;
  flex-wrap: wrap; /* 画面が狭い場合に折り返す */
  justify-content: center; /* ボタンを中央揃え */
  gap: 10px; /* ボタン間の隙間 */
  margin-bottom: 5px; /* 必要に応じて調整 */
}

/* 各ボタンの共通スタイル */
.btn-rectangle {
  display: inline-flex; /* flexboxで中央揃えやアイコン配置を容易に */
  align-items: center; /* 垂直方向中央揃え */
  justify-content: center; /* 水平方向中央揃え */
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  color: #ffffff; /* ボタンの文字色 */
  font-weight: normal;
  min-width: 120px; /* ボタンの最小幅を確保 */
  box-sizing: border-box;
  border: 2px solid lightgrey; /* ボーダーは維持 */
}

/* 電話ボタンのスタイル */
.btn-call {
  background-color: #004d40; /* 緑色 */
}

/* メールボタンのスタイル */
.btn-mail {
  background-color: #004d40; /* 青色 */
}

/* 店舗紹介ボタンのスタイル */
.btn-storeinfo {
  background-color: #1a237e; /* 灰色 */
}

/* フッター内のその他の要素（もしあれば） */
.footer-inner {
  width: 100%;
  box-sizing: border-box;
}

/* プロモーションボタンのコンテナ */
.promo-buttons-container {
  display: flex;
  flex-direction: column; /* スマホでは縦に並べる */
  gap: 15px; /* ボタン間の隙間 */
  margin-top: 30px; /* 上部に余白 */
  margin-bottom: 30px; /* 下部に余白 */
  align-items: center; /* 中央揃え */
  width: 100%; /* Take full width for padding */
  padding: 0 20px; /* Add horizontal padding for mobile centering */
  box-sizing: border-box; /* Include padding in width */
}

/* 各プロモーションボタン共通スタイル */
.promo-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  width: 100%; /* 親のpromo-buttons-containerのpaddingを考慮し100%に */
  max-width: 400px; /* スマホでのボタンの最大幅 */
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
}

/* ボタン内の画像スタイル */
.promo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin-bottom: 0;
}

/* 最初のボタンの比率（PC時の左側、スマホ時の上） */
.promo-button-1 {
  aspect-ratio: 300 / 158;
}

/* 2番目と3番目のボタンの比率（PC時の右側上下、スマホ時の中央と下） */
.promo-button-2,
.promo-button-3 {
  aspect-ratio: 4 / 1;
}

/* ホバー時のスタイル */
.promo-button:hover {
  opacity: 0.9;
  border: none;
  outline: none;
}

/* フォーカス時のスタイル (キーボードナビゲーション用) */
.promo-button:focus {
  outline: none;
  border: none;
}

/* 右側の2つのボタンをまとめるコンテナ（スマホ時は縦に並ぶ） */
.promo-right-column {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%; /* 親のpromo-buttons-containerのpaddingを考慮し100%に */
  max-width: 400px; /* スマホ時には.promo-buttonと同じmax-width */
}

/* PC画面時 (768px以上) */
@media screen and (min-width: 768px) {
  .promo-buttons-container {
    flex-direction: row; /* PCでは横に並べる */
    justify-content: center; /* 中央揃え */
    align-items: flex-start; /* 上揃え（縦方向の開始位置を揃える） */
    gap: 15px; /* メインコンテナ内の要素間の隙間 */
    padding: 0; /* PCではpromo-buttons-containerのパディングをリセット */
  }

  /* 各プロモーションボタンのPC時の幅調整 */
  .promo-button-1 {
    width: calc(50% - 7.5px); /* 全体幅の半分からギャップの半分(15px/2)を引く */
    max-width: none; /* スマホ用のmax-widthをリセット */
  }

  /* 右側の2つのボタンをまとめるコンテナのPC時の幅調整 */
  .promo-right-column {
    width: calc(50% - 7.5px); /* 全体幅の半分からギャップの半分(15px/2)を引く */
    max-width: none; /* スマホ用のmax-widthをリセット */
  }

  /* 右側の各ボタンは親コンテナの幅いっぱいに広がる */
  .promo-button-2,
  .promo-button-3 {
    width: 100%; /* 親要素(.promo-right-column)の幅いっぱいに */
    max-width: none; /* スマホ用のmax-widthをリセット */
  }

  /* フッターボタンのPC表示 */
  .btn-group {
    flex-direction: row; /* PCでは横に並べる */
    justify-content: center;
    flex-wrap: wrap; /* 必要に応じて折り返し */
    gap: 10px;
  }

  .btn-rectangle {
    width: auto; /* PCではautoに戻す */
    max-width: none; /* PCではmax-widthを解除 */
  }
}

/* 最下部の電話、メール、店舗紹介ボタンのスマホ表示調整 */
@media screen and (max-width: 767px) {
  .btn-group {
    flex-direction: row; /* 横一列に */
    flex-wrap: nowrap; /* 折り返さない */
    justify-content: center;
    gap: 8px; /* ボタン間の隙間を調整 */
    overflow-x: auto; /* 必要に応じてスクロール可能にする */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
    /* グループ全体を90%の幅にして中央に */
    width: 90%;
    margin: 0 auto;
  }

  .btn-rectangle {
    display: inline-flex; /* ボタンとして表示 */
    align-items: center;
    justify-content: center;
    text-decoration: none; /* 下線を削除 */
    color: #ffffff; /* 文字色を白に */
    font-weight: normal;
    border-radius: 5px;
    box-sizing: border-box;
    border: 2px solid lightgrey; /* ボーダーを維持 */
    flex: 1; /* 均等な横幅にするために変更 */
    min-width: 60px; /* ボタンの最小幅を小さめに設定 */
    /* PC画面時の比率を保ちつつ、スマホで収まるようにclamp値を調整 */
    font-size: clamp(10px, 3.5vw, 16px);
    padding: clamp(5px, 2.5vw, 10px) clamp(8px, 5vw, 20px);
  }

  /* 電話ボタンのスタイル */
  .btn-call {
    background-color: #004d40; /* 緑色 */
  }

  /* メールボタンのスタイル */
  .btn-mail {
    background-color: #004d40; /* 青色 */
  }

  /* 店舗紹介ボタンのスタイル */
  .btn-storeinfo {
    background-color: #1a237e; /* 灰色 */
  }
}

/* 商品紹介セクション内の特徴表示用スタイル */
.product-features {
  text-align: center; /* 中央寄せにする場合 */
  margin-top: 10px; /* 必要に応じて上部の余白を調整 */
  margin-bottom: 20px; /* 必要に応じて下部の余白を調整 */
}

.feature-badge {
  display: inline-block; /* インライン要素だが幅や高さ、パディングを設定可能に */
  background-color: #e41717; /* 背景色（例: 緑系） */
  color: white; /* 文字色 */
  padding: 6px 12px; /* 上下左右の余白 */
  border-radius: 4px; /* 角の丸み */
  font-size: 0.9em; /* フォントサイズ */
  font-weight: bold; /* 太字 */
  letter-spacing: 0.05em; /* 文字間隔 */
  text-transform: uppercase; /* 大文字にする場合（任意） */
}

/* style.css のどこか、例えば .product-intro スタイルの近くに追加 */
.product-description {
  font-size: 17px; /* ★ここを調整します。小さくするなら14pxや13px、大きくするなら16pxなど */
  line-height: 1.8; /* 行の高さ。読みやすさに影響します */
  /* 必要に応じて、以下のプロパティも追加できます */
  /* max-width: 800px; */ /* 段落の最大幅を設定し、長くなりすぎないようにする（PCで横長になるのを防ぐ） */
  /* margin-left: auto; */
  /* margin-right: auto; */ /* max-widthと合わせて中央寄せにする場合 */
}

/* PCでのみ表示されるスペース（スマホでは非表示） */
@media screen and (max-width: 767px) {
  /* スマホ画面のサイズ */
  .pc-only-space {
    display: none;
  }
}

/* スマホでのみ表示される改行（PCでは非表示） */
@media screen and (min-width: 768px) {
  /* PC画面のサイズ */
  .sp-only-br {
    display: none;
  }
}

/* style.css に追加 */
.product-intro h2 {
  font-size: 32px; /* ★文字のサイズを指定します。例: 24px, 28px, 2em など */
  font-family: "Helvetica Neue", Arial, sans-serif; /* ★フォントを指定します。カンマ区切りで複数の候補を記述します */
  color: #000000; /* 必要であれば、文字色もここで再指定できます */
  margin-top: 15px; /* 上部余白を調整（必要であれば） */
  margin-bottom: 15px; /* 下部余白を調整（必要であれば） */
  line-height: 1.3; /* 行の高さ（行間）を調整（必要であれば） */
}

/* スマホ用のメディアクエリ内でさらに調整が必要な場合 */
@media screen and (max-width: 767px) {
  .product-intro h2 {
    font-size: 24px; /* スマホ画面での文字サイズを調整 */
    /* font-familyは通常引き継がれるので不要ですが、特定のフォントにしたい場合はここでも指定できます */
  }
}

/* --- 店舗情報セクションの新しいスタイル --- */

.shop-info-section {
  padding: 0px 0; /* 上下の余白 */
  text-align: center; /* 中央寄せ */
}

/* ロゴと店名 */
.shop-logo-container {
  margin-bottom: 0px;
  padding: 0 0px; /* 左右の余白 */
}

.shop-logo-image {
  width: 100%;
  max-width: 960px; /* ロゴの最大幅 */
  height: auto;
  border-radius: 0; /* ロゴ画像は角丸にしない */
  margin-bottom: 0; /* デフォルトのimgマージンをリセット */
}

/* スライドショーコンテナ */
.slideshow-container {
  position: relative;
  max-width: 960px; /* content-wrapperに合わせる */
  margin: 0 auto 30px auto; /* 中央揃え、下部に余白 */
  overflow: hidden; /* はみ出る部分を隠す */
  aspect-ratio: 3 / 1; /* 16:9の比率を維持 */
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 影 */
}

.slideshow-slide {
  display: none; /* 初期は非表示 */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slideshow-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がコンテナを覆うように調整 */
  border-radius: 0; /* スライドショー画像は角丸にしない */
  margin-bottom: 0; /* デフォルトのimgマージンをリセット */
}

/* スライドショーのドットナビゲーション */
.slideshow-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.active,
.dot:hover {
  background-color: #717171;
}

/* フェードアニメーション */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* 横2:縦1のプロモーションバナー */
.promo-banner-container {
  margin: 0 auto 30px auto; /* 中央揃え、下部に余白 */
  max-width: 1200px; /* content-wrapperに合わせる */
  aspect-ratio: 2 / 1; /* 2:1の比率を維持 */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: none; /* ★影を完全に削除★ */
  /* border: none; /* もしボーダーがあるならこれも追加 */
}

.promo-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 0;
}

/* 正方形ボタンのコンテナ */
.square-buttons-container {
  display: flex;
  justify-content: center;
  gap: 20px; /* ボタン間の隙間 */
  margin-bottom: 30px; /* 下部に余白 */
  padding: 0 20px; /* 左右の余白 */
}

/* 正方形ボタンのスタイル（aタグからbuttonタグに変更したため、borderとbackgroundをリセット） */
.square-button {
  display: block; /* imgを内包するためブロック要素に */
  width: 100%; /* 親要素の幅に合わせて可変 */
  max-width: 200px; /* 各ボタンの最大幅 */
  aspect-ratio: 1 / 1; /* 正方形を維持 */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
  cursor: pointer; /* ボタンであることを示すカーソル */
  padding: 0; /* デフォルトのpaddingをリセット */
  border: none; /* デフォルトのborderをリセット */
  background: none; /* デフォルトのbackgroundをリセット */
}

.square-button:hover {
  transform: translateY(-5px); /* ホバーで少し浮き上がる */
}

.square-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 0;
}

/* 画像切り替えセクション */
.toggle-image-section {
  margin: 0 auto 40px auto; /* 中央揃え、下部に余白 */
  max-width: 1200px; /* content-wrapperに合わせる */
  padding: 0 20px; /* 左右の余白 */
}

/* 画像切り替えボタンのコンテナは削除されたため、このスタイルは不要 */
/* .toggle-buttons-above は削除 */

/* 画像切り替えボタンのスタイルは削除されたため、このスタイルは不要 */
/* .toggle-switch-button は削除 */

.toggle-dynamic-image {
  width: 100%;
  aspect-ratio: 2 / 1; /* 2:1の比率を維持 */
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 0; /* デフォルトのimgマージンをリセット */
}

/* レスポンシブ調整 */
@media screen and (max-width: 767px) {
  .shop-info-section {
    padding: 15px 0;
  }

  .shop-logo-container {
    margin-bottom: 15px;
  }

  .slideshow-container {
    margin-bottom: 20px;
  }

  .promo-banner-container {
    margin-bottom: 20px;
  }

  .square-buttons-container {
    flex-direction: column; /* スマホでは縦に並べる */
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
  }

  .square-button {
    max-width: 250px; /* スマホでのボタンの最大幅 */
  }

  .toggle-image-section {
    margin-bottom: 30px;
  }

  /* 画像切り替えボタンのスタイルは削除されたため、このスタイルは不要 */
  /* .toggle-switch-button は削除 */
}

/* style.css */

/* ... (existing code) ... */

/* 正方形ボタンのコンテナ */
.square-buttons-container {
  display: flex;
  justify-content: center;
  gap: 20px; /* ボタン間の隙間 */
  margin-bottom: 30px; /* 下部に余白 */
  padding: 0 20px; /* 左右の余白 */
  /* Remove flex-direction: column; from here if it was present */
}

/* 正方形ボタンのスタイル */
.square-button {
  display: block;
  width: 100%;
  max-width: 300px; /* PC画面での最大幅を大きくする (例: 200px から 300px) */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
}

/* ... (existing code) ... */

/* レスポンシブ調整 */
@media screen and (max-width: 767px) {
  /* ... (other existing rules) ... */

  .square-buttons-container {
    flex-direction: row; /* スマホでも横一列に並べる */
    flex-wrap: wrap; /* 必要であれば折り返す */
    justify-content: center; /* 中央寄せ */
    gap: 10px; /* スマホ時のボタン間の隙間を調整 */
    margin-bottom: 20px;
    padding: 0 20px;
  }

  .square-button {
    max-width: calc(
      50% - 10px
    ); /* スマホで2個横並びにするため、幅を50%からgapの半分を引く */
    /* max-width: 150px; /* 必要に応じて、スマホでの個別の最大幅を調整 */
    aspect-ratio: 1 / 1;
  }

  /* ... (other existing rules) ... */
}

/* ... (rest of your CSS) ... */

/* Card background colors */
.card[data-grade="standard"] {
  background: #fff; /* Standard grade remains white */
}

.card[data-grade="high-grade"] {
  background-color: #ededed; /* 15% black (85% white) */
}

.card[data-grade="top-grade"] {
  background-color: #d9d9d9; /* 30% black (70% white) */
}
.slideshow-bg {
  background-color: #000; /* 背景を黒に */
  width: 100vw; /* ビューポート幅いっぱい */
  margin-left: calc(50% - 50vw); /* 中央配置の状態から全幅に広げる */
  padding: 20px 0; /* 上下余白 */
}

.slideshow-container {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 8px;
}

.card-scroll-wrapper {
  width: 100vw; /* 画面幅いっぱい */
  margin-left: calc(50% - 50vw); /* 黒背景と同じテクニックで全幅に */
  background: #fff; /* 背景は白に */
}

.card-container {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
  max-width: 1090px; /* ★ここで幅制限 */
  margin: 0 auto; /* 中央寄せ */
}

.slideshow-container {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease-in-out; /* 切り替え時間 */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide.active {
  opacity: 1; /* 表示中 */
}

.card-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  scroll-padding-right: 20px;
  margin-top: 20px; /* ★ここを調整してください★ */
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.card-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  scroll-padding-right: 20px;
  margin-top: 30px;
  /* max-width: 960px; */ /* この行を変更またはコメントアウト */
  max-width: 1100px; /* ★ここを増やします（例: 1200px）★ */
  margin-left: auto;
  margin-right: auto;
}

.card-scroll-wrapper {
  width: 100vw; /* ビューポート幅いっぱい */
  margin-left: calc(50% - 50vw); /* 中央配置の状態から全幅に広げる */
  /* background: #fff; */ /* ★この行をコメントアウトするか、下の行に置き換える★ */
  background: #f7f7f7; /* ★ページの背景色と同じ薄いグレーに設定★ */
}

.shop-info-section {
  background-color: #f7f7f7; /* 薄いグレー */
  padding-bottom: 30px; /* 下に余白を追加（必要なら） */
}

/* --- 横長プロモーションボタンのスタイル --- */
.horizontal-promo-buttons-container {
  display: flex; /* ボタンを横に並べる */
  flex-wrap: wrap; /* 画面が狭い場合に折り返す */
  justify-content: center; /* ボタンを中央揃え */
  gap: 15px; /* ボタン間の隙間 */
  margin-top: 30px; /* 上部に余白 */
  margin-bottom: 30px; /* 下部に余白 */
  padding: 0 20px; /* 左右の余白 */
  box-sizing: border-box;
}

.horizontal-promo-button {
  display: block; /* 画像を内包するためブロック要素に */
  width: 100%; /* 親要素の幅に合わせて可変 */
  max-width: 360px; /* PCでの各ボタンの最大幅（3つ並べた時に綺麗に見えるよう調整） */
  aspect-ratio: 3 / 1; /* 横3:縦1の比率 */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* 影を追加 */
  transition: transform 0.2s ease; /* ホバー時のアニメーション */
  cursor: pointer;
  text-decoration: none; /* 下線を削除 */
  border: none;
  background: none;
}

.horizontal-promo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がボタン全体を覆うように */
  display: block;
  border-radius: 0;
  margin-bottom: 0;
}

.horizontal-promo-button:hover {
  transform: translateY(-5px); /* ホバーで少し浮き上がる */
  opacity: 0.9;
}

/* レスポンシブ調整 */
@media screen and (min-width: 768px) {
  .horizontal-promo-button {
    /* PCでは均等に3分割されるように調整 */
    width: calc(33.333% - 10px); /* 100% / 3 - gapの調整 */
    max-width: none; /* スマホ用のmax-widthをリセット */
  }
}

@media screen and (max-width: 767px) {
  .horizontal-promo-buttons-container {
    flex-direction: column; /* スマホでは縦に並べる */
    align-items: center; /* 中央揃え */
    gap: 10px; /* スマホでのボタン間の隙間 */
  }

  .horizontal-promo-button {
    max-width: 300px; /* スマホでの各ボタンの最大幅を調整 */
  }
}

/* プロモーションボタンのコンテナ */
.promo-buttons-container {
  display: flex;
  flex-direction: column; /* スマホでは縦に並べる (デフォルト) */
  gap: 15px; /* ボタン間の隙間 */
  margin-top: 30px; /* 上部に余白 */
  margin-bottom: 30px; /* 下部に余白 */
  align-items: center; /* 中央揃え */
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 各プロモーションボタン共通スタイル */
.promo-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  max-width: 600px; /* スマホでのボタンの最大幅 (以前150%にした値) */
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
}

/* 最初のボタンの比率（今回削除された promo-button-1 のものですが、もし他に promo-button-1 を使う場所がなければ削除してOK） */
/* .promo-button-1 {
    aspect-ratio: 300 / 158;
} */

/* 2番目と3番目のボタンの比率（PC時の右側上下、スマホ時の中央と下） */
.promo-button-2,
.promo-button-3 {
  aspect-ratio: 4 / 1; /* ★この比率は維持します。横長になるように調整★ */
}

/* 右側の2つのボタンをまとめるコンテナ（このHTML変更では不要になるが、CSSは残しておくか確認） */
/* .promo-right-column のCSSブロックは削除します */

/* PC画面時 (768px以上) */
@media screen and (min-width: 768px) {
  .promo-buttons-container {
    flex-direction: row; /* PCでは横に並べる */
    justify-content: center; /* 中央揃え */
    align-items: flex-start; /* 上揃え（縦方向の開始位置を揃える） */
    gap: 15px; /* ボタン間の隙間 */
    padding: 0;
  }

  /* 各プロモーションボタンのPC時の幅調整 */
  .promo-button {
    /* promo-button-1 が削除されたため、promo-button 全体に適用 */
    width: calc(50% - 7.5px); /* PCで2つを横並びにするための幅調整 */
    max-width: none; /* スマホ用のmax-widthをリセット */
  }

  /* promo-right-column はもう存在しないため、関連CSSを削除またはコメントアウト */
  /* .promo-right-column のメディアクエリ内のCSSも削除 */

  /* .promo-button-2, .promo-button-3 は promo-button のスタイルが適用されるため、個別の幅設定は不要になる場合があります */
  /* ただし、aspect-ratioは promo-button-2, promo-button-3 に設定されているので、これは維持します */
  /*
.promo-button-2,
.promo-button-3 {
  // ここに将来のスタイルを記述するかも
}
*/
}

@media screen and (max-width: 767px) {
  /* ... 既存のスマホ向けスタイル ... */

  .shop-info-section {
    padding-top: 0px; /* スマホ画面での上部の余白をなくす */
    padding-bottom: 0px; /* スマホ画面での下部の余白をなくす */
    /* padding: 0 0; とまとめてもOKです */
  }

  .shop-logo-container {
    margin-top: 0px; /* スマホ画面での上部の余白をなくす */
    margin-bottom: 0px; /* スマホ画面での下部の余白をなくす (現在の15pxを上書き) */
    padding-top: 0px; /* スマホ画面での内側上部の余白をなくす */
    padding-bottom: 0px; /* スマホ画面での内側下部の余白をなくす */
    padding-left: 0px; /* スマホ画面での内側左部の余白をなくす (現在の20pxを上書き) */
    padding-right: 0px; /* スマホ画面での内側右部の余白をなくす (現在の20pxを上書き) */
    /* padding: 0; とまとめてもOKです */
  }

  .shop-logo-image {
    margin-top: 0px; /* スマホ画面での画像上部の余白をなくす */
    margin-bottom: 0px; /* スマホ画面での画像下部の余白をなくす */
    /* paddingも念のため0にしておくと確実です */
    padding-top: 0px;
    padding-bottom: 0px;
  }

  /* ... 既存のスマホ向けスタイル ... */
}

/* style.css */

/* --- 横長プロモーションボタンのスタイル --- */
.horizontal-promo-buttons-container {
  /* ... 既存のスタイル ... */
  margin-top: 30px; /* 上部に余白 */
  margin-bottom: 0px; /* ★ここを30pxから0pxに減らすか、より小さい値に調整★ */
  /* ... 既存のスタイル ... */
}

/* スライドショーのドットナビゲーションを非表示にする */
.slideshow-dots {
  display: none;
}

.horizontal-button-group {
  display: flex;
  justify-content: center;
  gap: 20px; /* ボタン間の余白 */
  margin: 20px 0;
  flex-wrap: wrap; /* ← これを追加して折り返し可能に */
}

.horizontal-button-group a {
  display: block;
  flex: 1 1 calc(33.333% - 20px); /* PC時は3列 */
  max-width: 300px;
}

.horizontal-button-group img {
  width: 100%;
  aspect-ratio: 3 / 1.2; /* 縦1:横2 */
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.horizontal-button-group img:hover {
  transform: scale(1.05);
}

/* スマホ対応：幅768px以下で1列 */
@media (max-width: 768px) {
  .horizontal-button-group {
    flex-direction: column; /* ← 縦並び */
    align-items: center;
  }

  .horizontal-button-group a {
    flex: 1 1 100%;
    max-width: 70%; /* 幅いっぱい */
  }
}

/* 親コンテナ */
.promo-double {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* 画像間の余白 */
  margin: 20px auto;
  max-width: 1200px; /* PC時の最大幅 */
  flex-wrap: nowrap; /* 横並びを維持 */
}

/* 画像の共通設定 */
.promo-double .promo-banner-image {
  display: block;
  max-width: 100%;
}

/* 親コンテナ */
.promo-double {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  max-width: 1200px;
  flex-wrap: nowrap;
}

/* 共通画像スタイル */
.promo-double .promo-banner-image {
  display: block;
  max-width: 100%;
}

/* PC（横並び + 80% + gap広め） */
@media screen and (min-width: 960px) {
  .promo-double {
    flex-direction: row; /* 横並び */
    gap: 20px; /* 横間隔を広げる */
  }
  .promo-double .promo-banner-image {
    width: 48.9%; /* 2枚で80% */
  }
}

/* スマホ（縦並び + 90%） */
@media screen and (max-width: 959px) {
  .promo-double {
    flex-direction: column;
    align-items: center;
    gap: 20px; /* 縦並びの余白（20px） */
  }
  .promo-double .promo-banner-image {
    width: 90%;
  }
}

.card-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  -webkit-overflow-scrolling: touch;
}
.card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 320px;
}

.card {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
}

/* style.css */

/* 既存の.btn-largeスタイルに加えて、特定のspeaker_spec用のスタイルを追加 */
.btn-large.btn-6-スピーカー純正仕様車専用 {
  background-color: #007bff; /* 例: 青系の色 */
  color: white;
  /* 他のスタイルがあれば追加 */
}

/* 他のspeaker_specの値がある場合も同様に追加 */
.btn-large.btn-〇〇 {
  /* 〇〇は変換後のspeaker_specの値 */
  background-color: #28a745; /* 例: 緑系の色 */
  color: white;
}

.card img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.card img {
  display: block;
  margin: 0 auto;
  width: 100%; /* 横幅をカード幅いっぱいに */
  height: auto; /* 高さは自動調整で比率維持 */
  max-width: 320px; /* ボタンの最大幅に揃える（例：320pxなど） */
}
.card img {
  display: block;
  margin: 20px auto; /* 上下20pxの余白、左右はautoで中央寄せ */
  width: 100%;
  height: auto;
  max-width: 320px;
}
/* フロント＋リア：ダークネイビー */
.btn-front-rear {
  background-color: #002147;
  color: #fff;
}

/* フロント：ディープパープル */
.btn-front-only {
  background-color: #4b0082;
  color: #fff;
}

/* リア：ミッドナイトパープル */
.btn-rear-only {
  background-color: #4b0080;
  color: #fff;
}

/* ハイグレード：チャコールグレー */
.btn-high-grade {
  background-color: #3a3a3a;
  color: #fff;
}

/* トップグレード → 黒 */
.btn-top-grade {
  background-color: #000000; /* 黒 */
  color: #fff;
}

.square-grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* PC時：7列 */
  gap: 12px;
  margin: 40px auto;
  max-width: 1200px;
}

.square-button-link {
  display: block;
  aspect-ratio: 1 / 1; /* 正方形 */
  overflow: hidden;
}

.square-button-link img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像が正方形内にフィット */
  display: block;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.square-button-link:hover img {
  transform: scale(1.05);
}

/* スマホ（幅768px以下）では3列に変更 */
@media screen and (max-width: 768px) {
  .square-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* --- 共通スタイル --- */
.square-button-link {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  width: 100%;
}

.square-button-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.square-button-link:hover img {
  transform: scale(1.05);
}

/* --- グリッド：スマホ時は2列 --- */
.square-grid-container-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* スマホ：2列 */
  gap: 16px;
  margin: 40px auto;
  max-width: 960px;
}

/* --- PC以上は4列 --- */
@media screen and (min-width: 768px) {
  .square-grid-container-4 {
    grid-template-columns: repeat(4, 1fr); /* PC：4列 */
  }
}
.square-grid-container-4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* スマホ：3列 */
  gap: 12px;
  margin: 30px auto;
  max-width: 960px;
  justify-content: center; /* PC時に中央揃え */
}

/* PC（768px以上）では4列に変更して中央寄せ */
@media screen and (min-width: 768px) {
  .square-grid-container-4 {
    grid-template-columns: repeat(4, 1fr); /* PC：4列 */
    justify-content: center;
  }
}

/* ボタンをグリッド内でも中央に置く */
.square-button-link {
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  justify-self: center; /* 各ボタンを中央に */
}

/* 画像スタイル（共通） */
.square-button-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.square-button-link:hover img {
  transform: scale(1.05);
}
.square-grid-container-4 {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* スマホ：3列固定 */
  gap: 12px;
  justify-content: center; /* グリッド自体を中央に */
  margin: 30px auto;
}

/* PC時に4列固定幅で中央に寄せる */
@media screen and (min-width: 768px) {
  .square-grid-container-4 {
    grid-template-columns: repeat(4, 120px); /* 120px × 4列 */
  }
}

/* 各ボタンは正方形＆中央に */
.square-button-link {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  width: 100%;
}
/* 共通：グリッド設定（スマホ時） */
.square-grid-container-4 {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* スマホ時：100px × 3列 */
  gap: 12px;
  justify-content: center;
  margin: 30px auto;
}

/* PC画面：4列、ボタンサイズ大きく */
@media screen and (min-width: 768px) {
  .square-grid-container-4 {
    grid-template-columns: repeat(4, 160px); /* PC時：160px × 4列 */
  }

  .square-button-link {
    max-width: 160px;
  }
}

/* ボタン設定（共通） */
.square-button-link {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* 画像設定（共通） */
.square-button-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.square-button-link:hover img {
  transform: scale(1.05);
}

.ui-breadcrumb-img {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 20px auto;
}

.product-photo-wrapper {
  text-align: center; /* 画像を中央揃え */
  margin: 40px auto; /* 上下に余白を確保 */
  max-width: 960px; /* 幅の制限（必要に応じて） */
}

.product-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.breadcrumb-image-wrapper {
  text-align: center;
  margin: 30px auto;
  max-width: 960px;
}

.ui-breadcrumb-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .breadcrumb-image-wrapper {
    margin: 20px auto;
    padding: 0 10px;
  }

  .ui-breadcrumb-img {
    max-width: 100%;
  }
}
/* 初期状態ではPC用を表示、スマホ用は非表示 */
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

/* 768px以下のスマホサイズでは逆にする */
@media screen and (max-width: 730px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}

/* 3枚以下のときは“切替ボタン”を自動で隠す（全デバイス） */
.card-scroll-wrapper:has(#cardContainer:not(:has(> :nth-child(4))))
  .display-toggle-buttons {
  display: none !important;
}

/* === スマホ（～767px）：横スクロールは全車種そのまま維持 === */
/* ※ ここは既存のままでOK。矢印ボタンも表示のままにしたいので何もしない */

/* === PC・タブレット（768px～）：3枚以下なら3カラムで幅いっぱい === */
@media (min-width: 768px) {
  /* 3枚以下のページだけ：矢印ボタンを非表示に */
  .card-scroll-wrapper:has(#cardContainer:not(:has(> :nth-child(4))))
    .scroll-buttons {
    display: none !important;
  }

  /* 3枚以下のページだけ：横スクロールをやめてグリッド3カラム */
  .card-scroll-wrapper:has(#cardContainer:not(:has(> :nth-child(4))))
    #cardContainer {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px; /* 余白はお好みで */
    overflow: visible; /* スクロール解除 */
  }

  /* 画像は比率そのまま全面フィット */
  .card-scroll-wrapper:has(#cardContainer:not(:has(> :nth-child(4))))
    #cardContainer
    img {
    width: 100%;
    height: auto;
    display: block;
  }
}
/* --- 3枚以下ページのPC専用ルール（768px〜） --- */
@media (min-width: 768px) {
  /* 祖先：.card-scroll-wrapper の中に #cardContainer があり、4枚目が無い場合に限定 */
  .card-scroll-wrapper:has(#cardContainer:not(:has(> :nth-child(4)))) {
    /* 位置ズレ対策：横スクロール系のはみ出しを全解除 */
    overflow: visible !important;
  }

  /* 3枚以下：切替ボタン＆矢印ボタンを確実に隠す（優先度高め） */
  .card-scroll-wrapper:has(#cardContainer:not(:has(> :nth-child(4))))
    .display-toggle-buttons,
  .card-scroll-wrapper:has(#cardContainer:not(:has(> :nth-child(4))))
    .scroll-buttons {
    display: none !important;
    visibility: hidden !important;
  }

  /* 3枚以下：横スクロール→グリッド3カラムに切替（左はみ出しの元をリセット） */
  .card-scroll-wrapper:has(#cardContainer:not(:has(> :nth-child(4))))
    #cardContainer {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    /* 横スクロール系の指定を全リセット */
    overflow: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
    transform: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important; /* 左寄り防止 */
  }

  /* カード自身の横スクロール用flex幅を無効化（左はみ出しの原因になりがち） */
  .card-scroll-wrapper:has(#cardContainer:not(:has(> :nth-child(4))))
    #cardContainer
    > * {
    flex: 0 0 auto !important; /* 既存の 80% などを打ち消し */
    width: auto !important;
  }

  /* 画像は比率そのままでカード幅にフィット */
  .card-scroll-wrapper:has(#cardContainer:not(:has(> :nth-child(4))))
    #cardContainer
    img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* スマホ（〜767px）は従来どおり：変更なし */

/* --- PC時（768px以上）で商品カードが3枚だけの時 --- */
@media (min-width: 768px) {
  .card-scroll-wrapper:has(#cardContainer > :nth-child(3)):not(
      :has(#cardContainer > :nth-child(4))
    )
    #cardContainer {
    display: flex !important;
    justify-content: center !important; /* 中央揃え */
    gap: 20px; /* カード間の余白 */
    overflow: visible !important; /* 横スクロール解除 */
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 横スクロール用の矢印と切替ボタンは消す */
  .card-scroll-wrapper:has(#cardContainer > :nth-child(3)):not(
      :has(#cardContainer > :nth-child(4))
    )
    .scroll-buttons,
  .card-scroll-wrapper:has(#cardContainer > :nth-child(3)):not(
      :has(#cardContainer > :nth-child(4))
    )
    .display-toggle-buttons {
    display: none !important;
  }

  /* カード幅は自動で揃える */
  .card-scroll-wrapper:has(#cardContainer > :nth-child(3)):not(
      :has(#cardContainer > :nth-child(4))
    )
    #cardContainer
    > * {
    flex: 0 1 30%; /* 3枚なので約1/3ずつ */
    max-width: 320px; /* 大きくなりすぎ防止（任意） */
  }
}
/* === PCで #cardContainer が3枚ちょうどのときは中央揃え・矢印非表示 === */
@media (min-width: 768px) {
  /* 3枚だけを検知 */
  .card-section
    .card-scroll-wrapper:has(#cardContainer > :nth-child(3)):not(
      :has(#cardContainer > :nth-child(4))
    ) {
    /* 全幅化を無効化して中央に戻す（はみ出し防止） */
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
    overflow: visible !important;
  }

  /* コンテナを中央で横並び（スクロール系をリセット） */
  .card-section
    .card-scroll-wrapper:has(#cardContainer > :nth-child(3)):not(
      :has(#cardContainer > :nth-child(4))
    )
    #cardContainer {
    display: flex !important;
    justify-content: center !important; /* 中央揃え */
    gap: 20px !important;
    max-width: 960px !important; /* ページ幅に合わせる */
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* 矢印／切替ボタンは消す */
  .card-section
    .card-scroll-wrapper:has(#cardContainer > :nth-child(3)):not(
      :has(#cardContainer > :nth-child(4))
    )
    .scroll-buttons,
  .card-section
    .card-scroll-wrapper:has(#cardContainer > :nth-child(3)):not(
      :has(#cardContainer > :nth-child(4))
    )
    .display-toggle-buttons {
    display: none !important;
    visibility: hidden !important;
  }

  /* 各カードは固定幅で綺麗に3枚並ぶ */
  .card-section
    .card-scroll-wrapper:has(#cardContainer > :nth-child(3)):not(
      :has(#cardContainer > :nth-child(4))
    )
    #cardContainer
    > .card {
    flex: 0 0 320px !important;
    max-width: 320px !important;
  }
}

/* フィルタボタンの中央寄せ */
.spec-filter-buttons {
  display: flex;
  justify-content: center; /* 中央揃え */
  gap: 10px; /* ボタン間隔 */
  margin: 20px 0; /* 上下余白を調整 */
}

/* 下の「モデル別表示 / タイプ別表示」との間隔を揃える */
.display-toggle-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0; /* .spec-filter-buttons と同じにする */
}

/* ボタン共通デザイン（既存の .toggle-button と統合可能） */
.spec-filter-buttons .toggle-button,
.display-toggle-buttons .toggle-button {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  cursor: pointer;
}

.spec-filter-buttons .toggle-button.active,
.display-toggle-buttons .toggle-button.active {
  background: #16355d;
  color: #fff;
  border-color: #16355d;
}