:root{
  --spb-container:1220px;
  --spb-line:rgba(0,0,0,.10);
  --spb-muted:#5a5a5a;
  --spb-radius:16px;
}

.spb-container{
  max-width:var(--spb-container);
  margin:0 auto;
  padding:0 18px;
}

.spb-singleTop{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap:24px;
  padding:22px 0 10px;
}

@media (max-width: 980px){
  .spb-singleTop{ grid-template-columns: 1.05fr 0.95fr;}
}

.spb-gallery{
  position: sticky;
  top: 72px; /* ヘッダー高さに合わせて調整（56〜96あたり） */
  align-self: start;
}

@media (max-width: 980px){
  .spb-gallery{ position: static; }
}

/* ===== PCの左右余白を少し減らして、右側の余白を埋める ===== */
@media (min-width: 1024px){
  .spb-single .spb-container{
    max-width: 1320px; /* 1220→少し広げる（好みで 1280〜1440） */
  }
}

/* ===== アコーディオン（details/summary） ===== */
.spb-acc{
  border:1px solid var(--spb-line);
  border-radius:14px;
  background:rgba(0,0,0,.02);
  overflow:hidden;
  margin-bottom:12px;
}

.spb-accSummary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:700;
}

.spb-accSummary::-webkit-details-marker{ display:none; }

.spb-accHint{
  font-size:12px;
  color:var(--spb-muted);
  font-weight:500;
  opacity:.85;
}

/* PCでは「タップで開閉」表示は不要なので薄く */
@media (min-width: 681px){
  .spb-accHint{ opacity:.35; }
  .spb-note{
    font-size: 14px !important;   /* 今12pxならこれでちょうど良い */
    line-height: 1.8 !important;  /* 読みやすく */
  }
}

.spb-accBody{
  padding:0 14px 10px;
}

.spb-acc[open] .spb-accSummary{
  border-bottom:1px solid rgba(0,0,0,.08);
}

/* ===== 基本情報：詰まり対策（dt幅・余白・折り返し） ===== */
.spb-specGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:0;
  margin:0;
}

.spb-specGrid div{
  display:grid;
  grid-template-columns: 104px 1fr; /* ここが“ちょうど良い”目安 */
  align-items:baseline;
  column-gap: 14px;               /* dt-ddの余白 */
  row-gap: 6px;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:10px 0;
}

.spb-specGrid dt{
  margin:0;
  color:var(--spb-muted);
  font-size:13px;
  white-space:nowrap;
}

.spb-specGrid dd{
  margin:0;
  font-weight:700;
  font-size:14px;
}

/* フレーム番号など長い文字列だけ、自然に折り返し */
.spb-break{
  overflow-wrap:anywhere; /* 強すぎない折り返し */
}

/* ===== スマホ：さらに読みやすく（縦積み＋余白増） ===== */
@media (max-width: 680px){
  .spb-summary{
    padding:16px 14px;
  }

  .spb-specGrid div{
    grid-template-columns: 1fr; /* 縦積み */
    padding:10px 0;
  }

  .spb-specGrid dt{
    font-size:12px;
    opacity:.85;
  }
  .spb-specGrid dd{
    font-size:15px;
  }

  /* Instagramボタンはスマホではフル幅が自然 */
  .spb-cta-single .spb-btn-ig{
    width:100%;
  }
  
  .spb-gallery .n2-ss-slider{
    min-height: 320px; /* 280〜380で調整 */
  }
}


.spb-fallback-img img{
  width:100%;
  height:auto;
  display:block;
  border-radius: var(--spb-radius);
  border:1px solid var(--spb-line);
}
.spb-fallback-empty{
  border:1px dashed var(--spb-line);
  border-radius: var(--spb-radius);
  padding:24px;
  color:var(--spb-muted);
  background:rgba(0,0,0,.02);
}

.spb-summary{
  border:1px solid var(--spb-line);
  border-radius: var(--spb-radius);
  padding:18px 18px 16px;
  background:#fff;
}

.spb-status{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  letter-spacing:.06em;
  margin-bottom:10px;
  background:rgba(0,0,0,.08);
}
.spb-status.is-selling{ background:rgba(0,0,0,.08); }
.spb-status.is-soldout{ background:rgba(0,0,0,.12); }

.spb-h1{
  margin:0 0 8px;
  font-size:26px;
  line-height:1.2;
}

.spb-price{
  font-size:20px;
  font-weight:700;
  margin:0 0 14px;
}

.spb-specCard{
  border:1px solid var(--spb-line);
  border-radius:14px;
  padding:14px 14px 12px;
  background:rgba(0,0,0,.02);
  margin-bottom:12px;
}
.spb-specTitle{
  margin:0 0 10px;
  font-size:16px;
  opacity:.85;
  letter-spacing:.04em;
}

.spb-specGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px 0;
  margin:0;
}
@media (max-width: 520px){
  .spb-specGrid{ grid-template-columns: 1fr; }
}
.spb-specGrid div{
  display:grid;
  grid-template-columns: 108px 1fr;  /* 左：項目名、右：値 */
  align-items:baseline;
  gap:16px;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:8px 0;
}
.spb-specGrid dt{
  margin:0;
  color:var(--spb-muted);
  font-size:16px;
  white-space:nowrap;
}
.spb-specGrid dd{
  margin:0;
  font-weight:700;
  font-size:16px;
  text-align:left;
}

.spb-lead{
  margin:12px 0 0;
  color:var(--spb-muted);
  line-height:1.7;
}

.spb-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.spb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--spb-line);
  text-decoration:none;
  color:inherit;
  background:#fff;
}
.spb-btn.primary{
  background:#111;
  color:#fff;
  border-color:#111;
}
.spb-btn:hover{ opacity:.92; }

.spb-note{
  margin-top:12px;
  color:var(--spb-muted);
  font-size:12px;
  line-height:1.6;
}

.spb-singleBody{
  padding:12px 0 40px;
}

.spb-sectionTitle{
  margin:18px 0 10px;
  font-size:18px;
}
.spb-content{
  line-height:1.9;
}

/* SmartSliderの外枠が浮く場合に角丸を合わせたい時（効けばラッキー程度） */
.spb-gallery .n2-ss-slider,
.spb-gallery .n2-ss-slide,
.spb-gallery iframe{
  border-radius: var(--spb-radius);
}

/* ギャラリー領域を制限（大きすぎ防止） */
.spb-gallery{
  max-width: 860px;          /* お好みで 720〜900 */
}

/* 中の画像がはみ出す場合に備えて */
.spb-gallery img{
  max-width: 100%;
  height: auto;
}

/* SmartSliderがcover表示する場合に、全部表示（contain）へ寄せる */
.spb-gallery .n2-ss-slide-background,
.spb-gallery .n2-ss-slide-background-image{
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* スライダー枠の高さを「固定しない」＝見切れにくくする */
.spb-gallery .n2-ss-slider{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* ===== スマホ：上に画像、下に基本情報（1カラム化） ===== */
@media (max-width: 680px){
  .spb-singleTop{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 0 6px;
  }

  .spb-gallery{
    position: static;   /* sticky解除 */
    top: auto;
    max-width: none;    /* 860px制限解除 */
  }

  .spb-summary{
    padding: 14px 14px 12px;
  }
}

/* ヘッダー下に余白（PC） */
@media (min-width: 681px){
  .spb-singleTop{
    padding-top: 48px; /* 22→34に増やす。好みで 30〜48 */
  }
}

/* スマホは少し控えめ */
@media (max-width: 680px){
  .spb-singleTop{
    padding-top: 18px; /* 好みで 16〜26 */
  }
}

/* ===== stickyヘッダー対策：ページ先頭の余白を増やす ===== */
.spb-singleTop{
  padding-top: 56px; /* まずはこの値で。被りが残るなら 64〜80 に */
}

/* ===== 見出しに飛ぶときも被らない（車両の説明など） ===== */
.spb-singleBody,
.spb-sectionTitle{
  scroll-margin-top: 90px; /* ヘッダー高さ+少し余裕 */
}

.spb-container {
    margin-top: 20px ! important;
}