@charset "UTF-8";
/* ================================================================
   cp-vehicle-parts.css  —  車種（エアロキット製品）ページ専用パーシャル
   style_top_new.css の後に読み込み、.cp-vehicle スコープ配下のみ適用。
   spec表/パーツ一覧/ギャラリーは style_top_new.css の既存コンポーネント
   （cp-spec-dl / cp-spec-ul / cp-model-gallery）を流用。ここでは残りの
   カスタム（cpv-* ＝ セクション枠・見出し・変種ブロック・価格・画像）を定義。

   構成：
     1. 変数
     2. 基本コンポーネント（PC基準）
     3. carbon-link ブロック
     4. 更新日
     5. 製品注意書き（notices.js 描画）
     6. レスポンシブ（境界を 1024 / 767 に統一して1箇所に集約）
================================================================ */

/* ============================================================
   1. 変数
============================================================ */
.cp-vehicle {
  --cpv-ink: #111;
  --cpv-muted: #666;
  --cpv-line: #e0e0e0;
  --cpv-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cpv-gothic: "游ゴシック体", YuGothic, "メイリオ", sans-serif;
  --cpv-mincho: "游明朝", YuMincho, "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
  --cpv-w: 1600px;
}

/* ============================================================
   2. 基本コンポーネント（PC基準）
============================================================ */

/* ---- HERO：グラデ・影は共通、濃さは変数でページから調整可能 ---- */
.cp-vehicle .cp-hero.cpv-hero {
  --hero-dark: .78;    /* グラデ最大濃度（既定）*/
  --hero-reach: 72%;   /* グラデが消える位置（既定）*/
  --hero-shadow: .55;  /* 文字影の濃さ（既定）*/
}
.cp-vehicle .cp-hero.cpv-hero::after {
  content: "";              /* ← これが無いと擬似要素が生成されない（最重要）*/
  position: absolute;
  inset: 0;
  z-index: 1;               /* 画像より上・文字(z-index:2)より下 */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,var(--hero-dark)) 0%,
    rgba(0,0,0,calc(var(--hero-dark) * .74)) 28%,
    rgba(0,0,0,calc(var(--hero-dark) * .38)) 52%,
    rgba(0,0,0,0) var(--hero-reach)
  );
}
.cp-vehicle .cp-hero.cpv-hero .cp-hero-text {
  text-shadow: 0 1px 12px rgba(0,0,0,var(--hero-shadow)), 0 1px 3px rgba(0,0,0,var(--hero-shadow));
}

/* ---- コンテンツ幅（旧 .container を中立化）---- */
.cp-vehicle .cpv-grid {
  width: 100%;
  max-width: var(--cpv-w);
  margin: 0 auto;
  padding: 0 24px;
}
/* .cpv-grid 内の Bootstrap .row 負マージンを全幅で打ち消す（左右の食い込み防止）*/
.cp-vehicle .cpv-grid .row {
  margin-left: 0;
  margin-right: 0;
}
.cp-vehicle .cpv-grid [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}
/* ---- セクション見出し（旧 .section-title）---- */
.cp-vehicle .cpv-head {
  text-align: center;
  margin: 0 auto;
}
.cp-vehicle .cpv-head h2, .cp-vehicle .cpv-block h2 {
  font-family: var(--cpv-sans);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cpv-ink);
  margin: 0 0 50px 0;
  text-align: center;
}
.cp-vehicle .cpv-head h3, .cp-vehicle .cpv-block h3 {
  font-family: var(--cpv-sans);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cpv-ink);
  margin: 0 0 50px 0;
  text-align: center;
}

/* ---- DESIGN CONCEPT リード ---- */
.cp-vehicle .cpv-block .lead {
  margin: 0;
  text-align: center;
}
.cp-vehicle .cpv-block .lead dd {
  margin: 0;
}
.cp-vehicle .cpv-block .lead p {
  font-family: var(--cpv-mincho);
  font-size: 18px;
  line-height: 2.1;
  color: var(--cpv-ink);
  margin: 0 0 6px;
  letter-spacing: .04em;
}

/* ---- INDIVIDUAL PARTS 区切り（両サイド罫線）---- */
.cp-vehicle .cpv-block h5 {
  text-align: center;
  font-size: 35px;
  margin: 0 auto 30px;
  color: #111111;
  font-weight: 300;
  font-family: "Nunito Sans", sans-serif;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.cp-vehicle .cpv-block h5::before,
.cp-vehicle .cpv-block h5::after {
  content: "";
  flex-grow: 1;
  height: 2px;
  background: #ccc;
  margin: 0 20px;
}

/* ---- 製品画像（旧 .kit-img / col-lg-6 kit-img）---- */
.cp-vehicle .cpv-fig, .cp-vehicle .cpv-thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cp-vehicle .cpv-fig > a, .cp-vehicle .cpv-thumbs > a, .cp-vehicle a.cpv-zoom {
  display: block;
  overflow: hidden;
  background: #e6e6e4;
}
.cp-vehicle a.cpv-zoom img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.cp-vehicle a.cpv-zoom:hover img {
  transform: scale(1.04);
}

/* ---- 変種ブロック（旧 .product-details）＝ FRP / CFRP ---- */
.cp-vehicle .cpv-variant {
  margin: 30px 20px 8px 0;
}
.cp-vehicle .cpv-variant h4 {
  font-family: var(--cpv-sans);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cpv-ink);
  margin: 0 0 10px;
  padding-bottom: 8px;
}
.cp-vehicle .cpv-variant > p {
  font-size: 10px;
  color: var(--cpv-muted);
  line-height: 1.8;
  margin: 8px 0 0;
}
.cp-vehicle .cpv-variant > p span {
  color: #777;
}

/* ---- 価格（旧 h6）＝ 税抜/税込/MSRP を1行で ---- */
.cp-vehicle .cpv-price {
  font-family: var(--cpv-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--cpv-muted);
  letter-spacing: .02em;
  margin: 0 0 16px;
  line-height: 1.7;
}
.cp-vehicle .cpv-price strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--cpv-ink);
}

/* ---- 全幅バナー画像（旧 .title2）---- */
.cp-vehicle .cpv-banner {
  margin: 0 0 8px;
  width: 100%;
  overflow: hidden;
  background: #e6e6e4;
}
.cp-vehicle .cpv-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* cp-spec-dl / cp-spec-ul / cp-model-gallery は style_top_new.css で定義済み（流用） */

/* ============================================================
   3. carbon-link ブロック（.cp-vehicle 外の共通パーツ）
============================================================ */
.carbon-link-block {
  width: 100%;
  margin: 100px 0 150px;
  padding: 102px 0;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
.carbon-link-inner {
  width: 70%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.carbon-link-title {
  margin: 0 0 12px;
  font-size: 24px;
  letter-spacing: 0.08em;
}
.carbon-link-text {
  margin: 0 0 20px;
  font-size: 14px;
  color: #444;
}
.carbon-link-button {
  display: inline-block;
  padding: 10px 24px;
  border: 1px solid #222;
  color: #222;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.carbon-link-button:hover {
  background-color: #222;
  color: #fff;
}

/* ============================================================
   4. 更新日（ギャラリー直下に控えめに right 寄せ）
============================================================ */
.cp-vehicle .cpv-date {
  max-width: var(--cpv-w);
  margin: 24px auto 0;
  text-align: right;
  font-family: var(--cpv-sans);
  font-size: 13px;
  color: var(--cpv-muted);
  letter-spacing: .04em;
}

/* ============================================================
   5. 製品注意書き（notices.js が #product-notices に描画）
   構造: h3(見出し) / ul.noticeList(●なし) / h5(素材仕様) / ul.noticeList-dot(●付き)
   全車種ページ共通。
============================================================ */
.cp-vehicle #product-notices {
  max-width: var(--cpv-w);
  margin: 0 auto;
  padding: 40px 24px 120px;
  box-sizing: border-box;
  font-family: var(--cpv-gothic);
  color: #333;
}
/* 見出し（※1 エアロパーツ 等）：cpv-block h3 の中央寄せ・大文字を打ち消し */
.cp-vehicle #product-notices h3 {
  font-family: var(--cpv-gothic);
  font-size: 20px;
  font-weight: 700;
  color: var(--cpv-ink);
  letter-spacing: .02em;
  margin: 56px 0 20px;
  padding: 0;
  text-align: left;
  text-transform: none;
}
.cp-vehicle #product-notices h3:first-child { margin-top: 0; }
/* 素材仕様の小見出し：cpv-block h5 の中央寄せ・罫線を打ち消し */
.cp-vehicle #product-notices h5 {
  font-family: var(--cpv-gothic);
  font-size: 15px;
  font-weight: 700;
  color: var(--cpv-ink);
  margin: 28px 0 12px;
  display: block;
  text-align: left;
  white-space: normal;
}
.cp-vehicle #product-notices h5::before,
.cp-vehicle #product-notices h5::after { content: none; }
/* 通常リスト（●なし） */
.cp-vehicle #product-notices ul.noticeList {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.cp-vehicle #product-notices ul.noticeList li {
  font-size: 14px;
  line-height: 1.9;
  color: #333;
  margin: 0 0 6px;
  padding: 0;
  border: none;
}
.cp-vehicle #product-notices ul.noticeList li::before { content: none; }
/* 共通事項リスト（●付き） */
.cp-vehicle #product-notices ul.noticeList-dot {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.cp-vehicle #product-notices ul.noticeList-dot li {
  position: relative;
  font-size: 14px;
  line-height: 1.9;
  color: #333;
  margin: 0 0 10px;
  padding-left: 18px;
  border: none;
}
.cp-vehicle #product-notices ul.noticeList-dot li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .8em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #333;
}

/* 保険：ページ全体の横はみ出しをクリップ */
.cp-vehicle.cpv-page { overflow-x: clip; }

/* ============================================================
   6. レスポンシブ（境界を 1024 / 767 に統一）
      ≥1025px = PC（上の基本指定） / 768–1024px = タブレット / ≤767px = スマホ
============================================================ */

/* ---- タブレット以下（≤1024px）：横溢れ対策・幅調整 ---- */
@media screen and (max-width: 1024px) {
  /* 内側パディングを画面に合わせる */
  .cp-vehicle .cpv-grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* 入れ子 .row の負マージン(-15px)を打ち消す＝はみ出し解消 */
  .cp-vehicle .cpv-grid .row {
    margin-left: 0;
    margin-right: 0;
  }
  /* col の左右パディングを控えめに */
  .cp-vehicle .cpv-grid [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }
  /* cpv-variant の右20pxマージンが押し出すので解除 */
  .cp-vehicle .cpv-variant {
    margin: 24px 0 8px 0;
  }
}

/* ---- タブレット（768–1024px）：ギャラリー2列 ---- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cp-vehicle .cp-model-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .cp-vehicle .cp-gallery-model {
    grid-column: auto;
    aspect-ratio: 2 / 1;
  }
}

/* ---- スマホ（≤767px） ---- */
@media screen and (max-width: 767px) {
/* HERO：スマホは文字非表示なのでグラデも消す（画像だけ見せる）*/
  .cp-vehicle .cp-hero.cpv-hero::after { display: none; }	
	
	/* ギャラリー1列 */
  .cp-vehicle .cp-model-gallery {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cp-vehicle .cp-gallery-model {
    grid-column: auto;
    aspect-ratio: 2 / 1;
  }

  /* 見出し縮小 */
  .cp-vehicle .cpv-head h2, .cp-vehicle .cpv-block h2 {
    font-size: 26px;
    margin-bottom: 28px;
  }
  .cp-vehicle .cpv-head h3, .cp-vehicle .cpv-block h3 {
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 28px;
  }
  .cp-vehicle .cpv-block h5 {
    font-size: 30px;
  }
  .cp-vehicle .cpv-block h5::before,
  .cp-vehicle .cpv-block h5::after {
    margin: 0 12px;
  }

  /* リード文 */
  .cp-vehicle .cpv-block .lead p {
    font-size: 16px;
    line-height: 1.95;
  }

  /* FRP/CFRP 見出し・価格 */
  .cp-vehicle .cpv-variant h4 { font-size: 18px; }
  .cp-vehicle .cpv-price strong { font-size: 18px; }

  /* 製品画像を均一な下間隔で縦積み（並び非依存・ギャラリー除外） */
  .cp-vehicle a.cpv-zoom:not(.cp-gallery-model) {
    display: block;
    margin-bottom: 12px;
  }
  .cp-vehicle .cpv-thumbs, .cp-vehicle .cpv-fig { gap: 0; }

  /* HERO */
  .cp-vehicle .cp-hero.cpv-hero .cp-hero-inner {
    padding: 0 20px 40px;
  }

  /* 注意書き */
  .cp-vehicle #product-notices { padding: 32px 20px 80px; }
  .cp-vehicle #product-notices h3 { font-size: 18px; }

  /* carbon-link */
  .carbon-link-block {
    margin: 80px 0 100px;
    padding: 64px 0;
  }
  .carbon-link-inner { width: 88%; }
  .carbon-link-title { font-size: 20px; }
  .carbon-link-text { font-size: 13px; }
  .carbon-link-button { padding: 10px 20px; font-size: 12px; }
}