@charset "utf-8";

:root {
  --bg0: #000;
  --bg: #071018;
  --bg2: #0d1822;
  --panel: #101b25;
  --panel2: #ffffff;
  --gold: #b89555;
  --gold2: #d5b879;
  --text: #ffffff;
  --muted: #c9d0d6;
  --dark-text: #17202a;
  --line: rgba(184,149,85,.45);
}


/* ============================================
   BUSOU SKYLINE V37 LP - Scoped Styles
   既存サイトCSSとの衝突を避けるため .v37lp 配下にスコープしています
   ============================================ */
.v37lp{--v37-navy:#0d1b2a;--v37-navy-2:#16263a;--v37-red:#c8102e;--v37-gray:#6b7280;--v37-line:#e5e7eb;--v37-bg:#f7f8fa;color:#1a1a1a;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;line-height:1.7;}
.v37lp *{box-sizing:border-box;}
.v37lp a{text-decoration:none;color:inherit;}
.v37lp img{max-width:100%;display:block;}
.v37lp .inner{max-width:1080px;margin:0 auto;padding:0 20px;}

/* Breadcrumb */
.v37lp .breadcrumb{font-size:12px;color:var(--v37-gray);padding:12px 0;}
.v37lp .breadcrumb a{color:var(--v37-gray);}
.v37lp .breadcrumb a:hover{text-decoration:underline;}

/* Hero
   hero-brand / h1 / p.sub / p.model-range はメイン画像の上にオーバーレイ表示。
   hero-ctas（ボタン）は画像の下に別バンドとして配置。
   画像は object-fit:cover の固定高さボックスに敷き、どの画面幅でも
   オーバーレイ文字が収まる高さを確保する（テキストが画像の外へはみ出さない） */
.v37lp .hero{position:relative;color:#fff;background:#000;}
.v37lp .hero-photo{position:relative;width:100%;min-height:260px;height:clamp(260px,46vw,520px);background:#000;}
.v37lp .hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.v37lp .hero-photo::after{content:"";position:absolute;inset:0;background:
    linear-gradient(to top,rgba(6,12,20,.55) 0%,rgba(6,12,20,.3) 45%,rgba(6,12,20,0) 80%),
    linear-gradient(to right,rgba(6,12,20,.28) 0%,rgba(6,12,20,0) 42%);
  pointer-events:none;} /* 下からのグラデーションに加え、左〜中央のみ上からも薄く暗くしてh1の視認性を確保（右上バッジ部分は避ける） */
.v37lp .hero-copy{position:absolute;left:0;right:0;z-index:2;}
.v37lp .hero-copy .inner{position:relative;z-index:1;text-align:center;}
.v37lp .hero-copy-top{top:0;padding-top:18px;}
.v37lp .hero-copy-bottom{bottom:0;padding-bottom:16px;}
.v37lp .hero-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;}
.v37lp .hero-brand .hero-logo{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.15);position: relative;}
.v37lp .hero .brand-tag{display:inline-block;background:var(--v37-red);color:#fff;font-size:12px;letter-spacing:.1em;padding:4px 14px;border-radius:2px;}
.v37lp .hero h1{font-size:clamp(20px,4vw,40px);font-weight:800;margin:0 0 10px;letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.v37lp .hero p.sub{font-size:14px;color:#cbd5e1;margin:0 0 6px;text-shadow:0 1px 6px rgba(0,0,0,.5);}
.v37lp .hero p.model-range{font-size:12px;color:#c3cad6;margin-bottom:0;text-shadow:0 1px 6px rgba(0,0,0,.5);}
.v37lp .hero-cta-band{background:linear-gradient(135deg,var(--v37-navy) 0%,var(--v37-navy-2) 100%);padding:20px 0;}
.v37lp .hero .hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.v37lp .btn{display:inline-block;padding:14px 28px;border-radius:4px;font-weight:700;font-size:14px;transition:.2s;}
.v37lp .btn-primary{background:var(--v37-red);color:#fff;}
.v37lp .btn-primary:hover{background:#a50d26;}
.v37lp .btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);}
.v37lp .btn-outline:hover{background:rgba(255,255,255,.1);}

/* Anchor nav (section links) */
.v37lp section[id]{scroll-margin-top:54px;}
.v37lp table.spec tr[id]{scroll-margin-top:70px;}
.v37lp .anchor-nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--v37-line);box-shadow:0 1px 6px rgba(0,0,0,.05);}
.v37lp .anchor-nav-inner{display:flex;gap:2px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;justify-content:center;}
.v37lp .anchor-nav-inner::-webkit-scrollbar{display:none;}
.v37lp .anchor-nav a{flex:none;display:inline-block;padding:15px 16px;font-size:13px;font-weight:700;color:#333;border-bottom:2px solid transparent;transition:.15s;}
.v37lp .anchor-nav a:hover{color:var(--v37-red);}
.v37lp .anchor-nav a.is-active{color:var(--v37-red);border-bottom-color:var(--v37-red);}

/* Feature icons row */
.v37lp .features{background:#fff;padding:40px 0;border-bottom:1px solid var(--v37-line);}
.v37lp .features .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.v37lp .feature-card{text-align:center;padding:16px;}
.v37lp .feature-card .icon-circle{width:76px;height:76px;border-radius:50%;background:var(--v37-navy);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.v37lp .feature-card .icon-circle img{width:38px;height:38px;object-fit:contain;display:block;}
.v37lp .feature-card h3{font-size:15px;margin:0 0 6px;font-weight:700;}
.v37lp .feature-card p{font-size:12.5px;color:var(--v37-gray);margin:0;}

/* Section heading */
.v37lp .section{padding:56px 0;}
.v37lp .section.alt{background:var(--v37-bg);}
.v37lp .section-head{text-align:center;margin-bottom:36px;}
.v37lp .section-head .en{display:block;font-size:12px;letter-spacing:.15em;color:var(--v37-red);font-weight:700;margin-bottom:6px;}
.v37lp .section-head h2{font-size:26px;font-weight:800;margin:0;}
.v37lp .section-head p{font-size:13.5px;color:var(--v37-gray);margin-top:10px;}

.v37lp .SP_Scroll_text {display: none}

/* BUSOU characteristics (3 points) */
.v37lp .char-list{display:grid;gap:28px;}
.v37lp .char-item{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;background:#fff;border:1px solid var(--v37-line);border-radius:8px;padding:24px;}
.v37lp .char-item .num{width:64px;height:64px;border-radius:50%;background:var(--v37-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;}
.v37lp .char-item h3{margin:0 0 8px;font-size:17px;font-weight:700;}
.v37lp .char-item p{margin:0;font-size:14px;color:#333;}

/* Product lineup gallery（背景に実車写真を敷き、上に暗いオーバーレイをかけて可読性を確保） */
.v37lp #lineup{position:relative;background:#0d1b2a;isolation:isolate;}
.v37lp #lineup::before{content:"";position:absolute;inset:0;background:url('../images/img_v37skyline/lineup_bg.jpg') center/cover no-repeat;z-index:-2;}
.v37lp #lineup::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,42,.55) 0%,rgba(13,27,42,.5) 100%);z-index:-1;}
.v37lp #lineup .section-head h2{color:#fff;}
.v37lp #lineup .section-head p{color:#cbd5e1;}
.v37lp .lineup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.v37lp .lineup-card{background:#fff;border:1px solid var(--v37-line);border-radius:8px;overflow:hidden;transition:.2s;}
.v37lp .lineup-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px);}
.v37lp .lineup-card .thumb{aspect-ratio:4/3;background:linear-gradient(135deg,#dfe4ea,#c7ccd1);display:flex;align-items:center;justify-content:center;color:#8a919b;font-size:12px;} /* TODO: 実写真に差し替え */
.v37lp .lineup-card .body{padding:16px;}
.v37lp .lineup-card h3{font-size:14.5px;margin:0 0 6px;font-weight:700;}
.v37lp .lineup-card .price{font-size:15px;color:var(--v37-red);font-weight:800;margin:0 0 10px;}
.v37lp .lineup-card .btn{display:block;text-align:center;width:100%;padding:10px;font-size:13px;}

/* Spec / price table */
.v37lp .spec-table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--v37-line);border-radius:8px;}
.v37lp table.spec{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px;}
.v37lp table.spec th,.v37lp table.spec td{border-bottom:1px solid var(--v37-line);padding:12px 14px;text-align:left;white-space:nowrap;vertical-align: middle;}
.v37lp table.spec thead th{background:var(--v37-navy);color:#fff;font-weight:700;}
.v37lp table.spec td.price{color:var(--v37-red);font-weight:700;}
.v37lp table.spec td.link a{color:var(--v37-navy);font-weight:700;text-decoration:underline;}
/* 同じ商品グループ（無塗装／マットブラック／カーボン）のどの行にホバーしても、
   商品名・素材・取付工賃目安（rowspanセル）を含めグループ全体の色を変える */
.v37lp table.spec tbody tr.row-hover{background:var(--v37-bg);}
.v37lp table.spec tbody tr.row-hover td{color:var(--v37-navy);}
.v37lp table.spec tbody tr.row-hover td.price{color:var(--v37-red);}
/* ラインナップからジャンプした直後、着地した商品グループを一時的に強めにハイライト */
.v37lp table.spec tbody tr.jump-highlight{background:#fdeceb;transition:background-color 1.2s ease .8s;}
.v37lp table.spec tbody tr.jump-highlight td{color:var(--v37-navy);font-weight:700;}
.v37lp table.spec tbody tr.jump-highlight td.price{color:var(--v37-red);}

.table-spec-bottom {font-size: 88%;color: var(--v37-gray);margin: 15px;}

/* Gallery */
/* Gallery（背景に実車写真を敷き、薄い暗いオーバーレイをかけて可読性を確保） */
.v37lp #gallery{position:relative;background:#0d1b2a;isolation:isolate;}
.v37lp #gallery::before{content:"";position:absolute;inset:0;background:url('../images/img_v37skyline/gallery_bg.jpg') center/cover no-repeat;z-index:-2;}
.v37lp #gallery::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,42,.55) 0%,rgba(13,27,42,.5) 100%);z-index:-1;}
.v37lp #gallery .section-head h2{color:#fff;}
.v37lp #gallery .section-head p{color:#cbd5e1;}
.v37lp .photo-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.v37lp .photo-gallery .ph{
  /* aspect-ratio:1/1; */
  /* background:linear-gradient(135deg,#e9ecef,#ced4da); */
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  border-radius:4px;
} /* TODO: ギャラリー写真に差し替え */

/* Stock info */
.v37lp .stock-box{background:#fff;border:1px solid var(--v37-line);border-radius:8px;padding:24px;display:grid;gap:14px;}
.v37lp .stock-box .row{display:flex;gap:10px;font-size:14px;}
.v37lp .stock-box .row .dot{color:var(--v37-red);font-weight:900;}

/* Customer voice */
.v37lp .voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px;}
.v37lp .voice-card{background:#fff;border:1px solid var(--v37-line);border-radius:8px;padding:22px;}
.v37lp .voice-card .stars{color:#f5a623;font-size:15px;letter-spacing:2px;margin-bottom:10px;}
.v37lp .voice-card .meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.v37lp .voice-card .meta .name{font-weight:700;font-size:14px;}
.v37lp .voice-card .meta .date{font-size:11.5px;color:var(--v37-gray);}
.v37lp .voice-card .product-tag{display:inline-block;background:var(--v37-bg);color:var(--v37-navy);font-size:11px;font-weight:700;padding:3px 10px;border-radius:2px;margin-bottom:10px;}
.v37lp .voice-card p.comment{font-size:13.5px;color:#333;margin:0;}

/* FAQ */
.v37lp .faq-item{border-bottom:1px solid var(--v37-line);padding:18px 0;}
.v37lp .faq-item .q{display:flex;gap:10px;font-weight:700;font-size:14.5px;margin:0 0 8px;}
.v37lp .faq-item .q .tag{color:#fff;background:var(--v37-navy);border-radius:50%;width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;}
.v37lp .faq-item .a{display:flex;gap:10px;font-size:13.5px;color:#333;}
.v37lp .faq-item .a .tag{color:var(--v37-navy);background:var(--v37-bg);border:1px solid var(--v37-navy);border-radius:50%;width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;}

/* Bottom CTA */
.v37lp .bottom-cta{background:var(--v37-navy);color:#fff;text-align:center;padding:56px 0;}
.v37lp .bottom-cta h2{font-size:22px;margin:0 0 10px;font-weight:800;}
.v37lp .bottom-cta p{color:#cbd5e1;font-size:13.5px;margin:0 0 26px;}

@media (max-width:768px){
  .v37lp .hero-brand{margin-bottom:10px;}
  .v37lp .hero-brand .hero-logo{width:34px;height:34px;}
  .v37lp .hero .brand-tag{font-size:11px;padding:3px 10px;}
  .v37lp .hero p.sub{font-size:12.5px;margin-bottom:6px;}
  .v37lp .hero p.model-range{font-size:11px;}
  .v37lp .hero .btn{padding:11px 20px;font-size:13px;}
  .v37lp .features .grid3{grid-template-columns:1fr;}
  .v37lp .char-item{grid-template-columns:48px 1fr;padding:18px;}
  .v37lp .lineup-grid{grid-template-columns:repeat(2,1fr);}
  .v37lp .photo-gallery{grid-template-columns:repeat(2,1fr);}
  .v37lp .voice-grid{grid-template-columns:1fr;}
  .v37lp .SP_Scroll_text {display: block;color: #999;margin: 0 10px 5px}
  .v37lp .SP_Scroll_text.menu {margin: 10px 10px 0;}
}

.footer {
  background: #050a0f;
  padding: 42px 0;
  color: var(--muted);
  font-family: "Noto Sans JP", sans-serif;
}

.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	font-size: 24px;
	width: 130px;
	margin: 10px 0 0;
}
.logo small {
	display: block;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--muted);
	/* margin-top: -8px; */
}
.container_lp {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
	padding: 10px 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 30px;
}

.footer h4 {
  color: #fff;
  margin-bottom: 14px;
}

.footer li {
  list-style: none;
  margin-bottom: 8px;
  font-size: 14px;
}

.tel {
  font-size: 28px;
  color: #fff;
  font-family: Georgia, serif;
  margin: 0 0 10px;
}

.btn.gold {
  display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 230px;
	padding: 15px 24px;
	border-radius: 4px;
	border: 1px solid var(--gold);
	letter-spacing: .04em;
	background: linear-gradient(135deg, var(--gold), #8c6a34);
	color: #fff;
	padding: 12px 24px;
	border-radius: 4px;
	box-shadow: 0 8px 20px rgba(0,0,0,.28);
}

.container_awin {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
	padding: 10px 0;
}

@media (max-width:768px){
  .recommend-wrap, .footer-inner {grid-template-columns: 1fr;}
}