/* ------------------------------------------------------------------
 * Martin Crossroads Eric Clapton — 特設ページ
 — 特設ページ用スタイルシート
 * Bootstrap 5 を読み込んだ後にこのファイルを読み込む前提（上書き用）
 * ------------------------------------------------------------------ */
:root{
  --forest-vine:#245C4F;
  --dark-green:#1F2A22;
  --gold:#C4A154;
  --coral:#FF576D;
  --ivory:#F7F4EE;
}
html{ font-size:62.5%; overflow-y:scroll; } /* 1rem = 10px */
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  font-size:1.6rem;
  line-height:1.9;
  color:#2B2B2B;
}
.lp-wrap{ overflow-x:hidden; }
a{ text-decoration:none; }

/* ---------- Top bar (Navbar) ---------- */
.lp-topbar{
  background:var(--forest-vine);
  padding:1.2rem 0;
}
.lp-topbar img{ height:4.2rem; }
.lp-topbar .nav-link{
  color:rgba(255,255,255,.85); font-size:1.4rem; font-weight:700; padding:.8rem 1.4rem;
}
.lp-topbar .nav-link:hover{ color:#fff; }
.lp-topbar .nav-cta{
  display:inline-block; padding:.9rem 2rem; border-radius:999px;
  background:var(--gold); color:var(--dark-green);
  font-weight:700; font-size:1.3rem; white-space:nowrap;
}
.lp-topbar .navbar-toggler{
  border-color:rgba(255,255,255,.4); padding:.5rem .8rem;
}
.lp-topbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width:991px){
  .lp-topbar .navbar-nav{ padding-top:1.2rem; gap:.4rem; }
  .lp-topbar .nav-cta{ display:inline-block; margin-top:.4rem; }
}

/* ---------- Hero (Peek Slider) ---------- */
/* ワイヤーフレームの通り、中央のメイン画像に加えて両サイドに前後の画像が見切れる構成。
   Bootstrapの標準carousel(1枚ずつフルワイド切替)ではこの見切れ表現ができないため、
   独自CSS+JS(index.php末尾の<script>)で実装しています。画像は1280x720(16:9)想定 */
.lp-hero-slider{
  position:relative;
  overflow:hidden;
  background:var(--dark-green);
}
.lp-hero-track{
  display:flex;
  align-items:center;
  will-change:transform;
  transition:transform .6s ease;
}
.lp-hero-slide{
  position:relative;
  flex:0 0 auto;
  width:76%;
  max-width:128rem; /* 1280px */
  margin:0;
  aspect-ratio:16/9;
  background-color:#0c0f10;
  background-image:var(--bg-pc);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  color:#fff;
  cursor:pointer;
  filter:brightness(.6);
  transition:filter .6s ease;
}
.lp-hero-slide.is-active{
  cursor:pointer;
  filter:brightness(1);
}

/* 矢印・ドット */
.lp-hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:4.4rem; height:4.4rem; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  cursor:pointer;
}
.lp-hero-arrow:hover{ background:rgba(255,255,255,.22); }
.lp-hero-arrow.prev{ left: 8.5%; }
.lp-hero-arrow.next{ right:8.5%; }

.lp-hero-dots{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%); z-index:5;
  display:flex; gap:.8rem;
}
.lp-hero-dot{
  width:.9rem; height:.9rem; border-radius:50%; border:none;
  background:rgba(255,255,255,.4); padding:0; cursor:pointer;
}
.lp-hero-dot.is-active{ background:var(--gold); }

/* ---------- Section common ---------- */
.lp-section{ padding:6.4rem 0; }
.lp-section-title{
  font-family:"Sawarabi Mincho",serif;
  font-size:clamp(2.2rem,3vw,3rem);
  color:var(--dark-green);
  text-align:center;
  margin-bottom:2.4rem;
}
.lp-lead{ max-width:92rem; margin:0 auto; text-align:left; font-size:1.6rem; color:#444; }
.bg-ivory{ background:var(--ivory); }

/* ---------- Lineup grid ---------- */
.lineup-item{ text-align:center; margin-bottom:3.2rem; }
.lineup-item .lineup-link{ display:block; color:inherit; }
.lineup-item .thumb{
  background:#EFECE4; border-radius:.4rem; aspect-ratio:3/4;
  display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:1rem;
}
.lineup-item .thumb img{ width:100%; height:100%; object-fit:contain; }
.lineup-item .model{ font-size:1.2rem; font-weight:700; margin:0; }
.lineup-item .price{ font-size:1.2rem; color:#666; margin:0; }
.lineup-item .series{ font-size:1.1rem; font-weight:700; letter-spacing:.02em; color:var(--forest-vine); margin:0 0 .2rem; }


/* ---------- Gallery strip ---------- */
.gallery-strip img{
  width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:.4rem;
}

/* ---------- Model detail block ---------- */
/* レイアウトは参考画像(00L-16E 1935 Burst)に準拠: 左=背面/正面の商品画像を並べて表示、右=商品名/価格/SPECS/CTA、最下部に説明文全文 */
.model-block{ padding:6.4rem 0; border-top:1px solid #eee; }
.model-block .model-images{
  display:flex; align-items:flex-start;
}
.model-block .model-images img{
  width:100%; max-width:none; /*background:#EFECE4;*/
}
.model-block .model-series{
  font-size:1.8rem; font-weight:700; letter-spacing:.02em;
  color:var(--forest-vine); margin:0;
}
.model-block h3{
  font-family:"Noto Sans JP",sans-serif;
  font-weight:700;
  font-size:clamp(2.64rem,3.3vw,3.52rem);
  color:#1a1a1a;
  margin-bottom:0.3rem;
}
.model-block .model-lead{ font-size:1.4rem; color:#333; margin-bottom:2.4rem; }

.model-block .price-line{ display:flex; align-items:baseline; gap:1.2rem; margin-bottom:1.6rem; }
.model-block .price-line .label{ font-size:1.3rem; color:#1a1a1a; }
.model-block .price-line .price{ font-size:2.8rem; font-weight:700; color:#dc143c; }

.spec-block{ margin-bottom:3.2rem; }
.spec-heading{ font-size:1.4rem; font-weight:700; color:#1a1a1a; margin-bottom:1.2rem; }
.spec-heading .mark{ margin-right:.4rem; }
.spec-list{ margin:0; font-size:1.3rem; }
.spec-list .spec-row{
  display:flex; gap:1.6rem;
  padding:.9rem 0; border-bottom:1px solid #eee;
}
.spec-list dt{ flex:0 0 24rem; color:#666; font-weight:700; margin:0; }
.spec-list dd{ margin:0; color:#1a1a1a; }

.model-block .model-body{
  margin:3.2rem 0 0; font-size:1.4rem; color:#333; text-align:justify;
}

.btn-gold{
  display:inline-block; background:var(--gold); color:var(--dark-green);
  font-weight:700; padding:1.2rem 3.2rem; border-radius:999px; font-size:1.4rem;
}
.btn-gold:hover{ color:var(--dark-green); opacity:.85; }
.btn-gold-block{ display:block; width:100%; text-align:center; border-radius:.4rem; padding:1.6rem 3.2rem; }

/* ---------- Model detail gallery ---------- */
.model-block .model-gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1rem;
  margin-top:4.8rem;
}
.model-block .model-gallery a{
  display:block; overflow:hidden; border-radius:.4rem;
}
.model-block .model-gallery img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  transition:transform .4s ease, opacity .4s ease;
}
.model-block .model-gallery a:hover img{ transform:scale(1.04); opacity:.9; }

@media (max-width:767px){
  .model-block .model-gallery{ grid-template-columns:repeat(3, 1fr); gap:.8rem; margin-top:3.2rem; }
}

/* ---------- Dealer stores ---------- */
/* 店舗正式名称のように長い/区切りのない文字列が来ても、カード幅を超えて隣の列に
   はみ出さないよう、Bootstrapのcol/rowではなくCSS Gridのauto-fitを使用しています */
.lp-dealer{ background:var(--dark-green); color:rgba(255,255,255,.85); }
.lp-dealer .lp-section-title{ color:#fff; }

.dealer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(27rem, 1fr));
  row-gap:4rem;
  column-gap:3.2rem;
}
.dealer-card{
  min-width:0; /* グリッド/フレックスアイテムがはみ出すのを防ぐ保険 */
  font-size:1.3rem;
}
.dealer-card h4{
  font-size:1.6rem; line-height:1.5; color:#fff; margin:0 0 1.6rem;
  overflow-wrap:anywhere; word-break:break-word; /* 長い店舗名も必ず折り返す */
  padding-bottom: 0.5rem; border-bottom: 1px solid #146131;
}
/* ラベル(dt)を上、値(dd)を下に積む構成に変更。
   ラベルと値を横並びにすると、狭い画面で値側の幅が圧迫されメールアドレス等が
   1行に収まらなくなるため、常に値側にカード幅いっぱいを使わせるようにしています */
.dealer-card dl{ margin:0; display:flex; flex-direction:column; gap:1.4rem; }
.dealer-card .dealer-field{ display:flex; flex-direction:column; gap:.3rem; }
.dealer-card dt{
  color:var(--gold); font-weight:700; font-size:1.1rem; letter-spacing:.03em; margin:0;
}
.dealer-card dd{ margin:0; overflow-wrap:anywhere; word-break:break-word; }
.dealer-card a{ color:inherit; }
.dealer-card a:hover{ color:var(--gold); }

/* ---------- Footer ---------- */
.lp-footer{ background:#14180f; color:rgba(255,255,255,.5); font-size:1.1rem; text-align:center; padding:2rem 0; }

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; right:2rem; bottom:2rem; z-index:200;
  width:4.8rem; height:4.8rem; border-radius:50%; border:none;
  background:var(--dark-green); color:var(--gold); font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 .4rem 1.2rem rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transform:translateY(1rem);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--forest-vine); }

@media (max-width:997px){
  .model-block h3{ font-size:4.8rem; }
  .model-block .price-line .price{ font-size:4.2rem; }
}

@media (max-width:767px){
  .lp-hero-slide{ width:84%; margin:0 1%; background-image:var(--bg-sp); aspect-ratio:1/1; }
  .lp-hero-arrow{ width:3.6rem; height:3.6rem; font-size:1.3rem; }
  .lp-hero-arrow.prev{ left:1.6rem; }
  .lp-hero-arrow.next{ right:1.6rem; }
  .lp-section{ padding:4.8rem 0; }
  .dealer-grid{ grid-template-columns:1fr; }
  .spec-list .spec-row{ gap:.8rem; }
  .spec-list dt{ flex:0 0 22rem; }
  .back-to-top{ width:4rem; height:4rem; right:1.4rem; bottom:1.4rem; }
  .model-block h3{ font-size:3.8rem; }
  .model-block .price-line .price{ font-size:3.2rem; }
}

@media (max-width:575px){
  .lp-hero-slide{ width:90%; margin:0 .3%; }
  .lp-hero-brand{ display:none; } /* 縦幅が狭くタイトル2行目と衝突するため非表示 */
  .lp-hero-inner .eyebrow{ font-size:1.1rem; margin-bottom:.8rem; }
  .lp-section-title{ margin-bottom:1.8rem; }
  .spec-list dt{ font-size:1.2rem; }
  .btn-gold-block{ padding:1.4rem 2rem; }
  .dealer-card{ padding:2rem; }
  .spec-list .spec-row{ flex-direction:column; gap:.2rem; }
  .spec-list dt{ flex:none; }
}