@charset "utf-8";

/*
*********************************************************
campaign-contents
*********************************************************
*/
/* 基本レイアウト設定 */
#campaign-contents {
  max-width: 100%;
  margin: 0 auto;

  /* フォント関連（common.min.cssのbodyと一致） */
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: var(--fwNormal);
  color: var(--black);
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  -webkit-font-smoothing: auto;
}

/* SPフォント調整 */
@media screen and (max-width: 767px) {
  #campaign-contents {
    font-size: 1.4rem;
  }
}

/* clearfix対応 */
#campaign-contents .clearfix:after {
  display: block;
  clear: both;
  content: "";
}

/* 全幅画像の最大化 */
#campaign-contents .maximg {
  width: 100%;
}

/* Chrome画像のにじみ防止 */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  #campaign-contents img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Safari用：画像のimage-renderingをautoに */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

  _::-webkit-full-page-media,
  _:future,
  :root #campaign-contents img {
    image-rendering: auto;
  }
}

/* summaryタグのマーカー非表示（accordion対策など） */
#campaign-contents summary {
  display: block;
  list-style: none;
}

#campaign-contents summary::-webkit-details-marker {
  display: none;
}


/*
*********************************************************
KV領域パララックス対応
*********************************************************
*/
#section-kv {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

/* パララックス用：背景画像がスクロールに応じて動く */
#section-kv .photo {
  position: relative;
  width: 100%;
  aspect-ratio: 2880 / 1020; /* PC用KV画像比率 */
  transform: translateY(0);
  transition: transform 0.1s linear;
  will-change: transform;
  z-index: 0;
}

/* 画像をカバー表示 */
#section-kv .photo picture,
#section-kv .photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 1つ目のセクションがKVに重なる処理 */
#campaign-contents .section:first-of-type {
  margin-top: -80px; /* 被せ量 */
  padding-top: 120px; /* テキストの余白確保 */
  background: #fff; /* 背景色で画像を覆う */
  position: relative;
  z-index: 1;
}

/* レスポンシブ：スマホ用調整 */
@media screen and (max-width: 768px) {
  #section-kv .photo {
    aspect-ratio: 1536 / 1686; /* SP用KV画像比率 */
  }

  #campaign-contents .section:first-of-type {
    margin-top: -40px;
    padding-top: 80px;
  }
}


/*
*********************************************************
フォント
*********************************************************
*/
  /* ----------------------------------------
    見出し
  ---------------------------------------- */
#campaign-contents .label-bd-ttl .h2ttl {
  margin-bottom: 0;
  padding: 0;
}

#campaign-contents .label-bd-ttl {
  border-top: 1px solid var(--keyColor);
  border-bottom: 1px solid var(--keyColor);
}

#campaign-contents .inner-xs-wrap2.layout-c.fade-in-up h4.h4ttl {
  margin-bottom: 0;
}

  /* ----------------------------------------
    注釈
  ---------------------------------------- */
/* #campaign-contents .note-list {
  margin-bottom: var(--size40);
} */

#campaign-contents .h4ttl .sub,.h2ttl .sub {
  font-size: 2rem;
  text-align: center
}

@media screen and (max-width: 768px) {
  #campaign-contents .txt-3l {
    font-size: 1.8rem !important;
    line-height: calc(26 / 18) !important;
    word-break: break-word;
    text-align: center;
  }
  #campaign-contents .h4ttl .sub,.h2ttl .sub {
    font-size: 1.6rem;
    text-align: center
}
}


/*
*********************************************************
アニメーション
*********************************************************
*/
#campaign-contents .fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#campaign-contents .fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}


/*
*********************************************************
画像のコンテナ設定
*********************************************************
*/
/* 汎用画像コンテナ */
#campaign-contents .img-box {
  position: relative; /* NEWアイコン配置用 */
  display: inline-block;
  overflow: visible;
}

/* カード内の画像をはみ出し防止 */
#campaign-contents .cmn-card-list .item .img-box {
  overflow: hidden;
}

/* 画像のホバー拡大 */
#campaign-contents .cmn-card-list .item .img-box img {
  transform: scale(1);
  transition: var(--transition);
}

#campaign-contents .cmn-card-list .item:hover .img-box img {
  transform: scale(1.05); /* 拡大効果 */
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (min-width: 769px) {
  /* ----------------------------------------
     1. 親リンクを基準に相対配置（ホバーエリア）
  ---------------------------------------- */
  #campaign-contents a.card-s-linkpanel {
    position: relative;
    display: block;
    overflow: hidden;
  }

  /* ----------------------------------------
     2. img-box：ブラー対象＋READ MOREオーバーレイ
  ---------------------------------------- */
  #campaign-contents a.card-s-linkpanel .img-box {
    position: relative;
    overflow: hidden;
  }

  /* 画像にブラーをかけるための設定（z-index調整含む） */
  #campaign-contents a.card-s-linkpanel .img-box img {
    position: relative;
    z-index: 1;
    transition: 0.4s ease;
  }

  /* READ MORE テキスト付きオーバーレイ */
  #campaign-contents a.card-s-linkpanel .img-box::after {
    content: "READ MORE";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(70, 160, 240, 0.3);
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  }

  /* ホバー時：オーバーレイ表示＋ブラー */
  #campaign-contents a.card-s-linkpanel:hover .img-box::after {
    opacity: 1;
  }

  #campaign-contents a.card-s-linkpanel:hover .img-box img {
    filter: blur(3px) brightness(1.1);
  }

  /* 拡大とシャドウ効果（共通ホバー） */
  #campaign-contents a.card-s-linkpanel:hover .img-box {
    transform: scale(1.01);
    transition: all 0.3s ease;
    box-shadow: 0 6px 12px rgba(1, 78, 152, 0.15);
  }

  /* ----------------------------------------
     3. txt-box：リフレクションエフェクト
  ---------------------------------------- */
  #campaign-contents a.card-s-linkpanel .txt-box {
    position: relative;
    z-index: 1;
  }

  #campaign-contents a.card-s-linkpanel .txt-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.4s ease;
    z-index: 2;
  }

  #campaign-contents a.card-s-linkpanel:hover .txt-box::before {
    left: 125%;
  }
}


/*
*********************************************************
アイコン
*********************************************************
*/
/* NEWアイコン */
#campaign-contents .new-icon {
  position: absolute;
  top: -5px;
  left: -20px;
  width: 90px;
  height: 20px;
  background: var(--red03);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: var(--fwNormal);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 24px 0px 0px;
  transform: rotate(-40deg);
  box-shadow: 0 0 0 2px var(--red03);
  border-top: dashed 1px var(--silverLight);
  border-bottom: dashed 1px var(--silverLight);
  z-index: 10;
}

/* メディアラベル行 */
#campaign-contents .media-label {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: var(--fwNormal);
  gap: 0.4em;
  margin-bottom: 0.5em;
  color: var(--black); /* デフォルト色 */
}

/* vlog */
#campaign-contents .media-label.vlog {
  color: var(--red03);
}

#campaign-contents .media-label.vlog::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 0.4em;
  vertical-align: middle;
  background-image: url("/campaign/testdrive-report/common/img/icon-vlog.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/* blog */
#campaign-contents .media-label.blog {
  color: var(--accentColor);
}

#campaign-contents .media-label.blog::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/campaign/testdrive-report/common/img/icon-blog.svg");
  background-size: contain;
  background-repeat: no-repeat;
}


/*
***************************************************************
btn-page-top
***************************************************************
*/
#campaign-contents .btn-page-top {
  position: fixed;
  right: 48px;
  bottom: 100px;
  z-index: 10;
  width: 48px;
  height: 48px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#campaign-contents .btn-page-top.show {
  opacity: 1;
  visibility: visible;
}

#campaign-contents .btn-page-top img {
  width: 24px;
  height: 24px;
}

#campaign-contents .btn-page-top:hover {
  opacity: 0.6;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media screen and (max-width: 768px) {
  #campaign-contents .btn-page-top {
    right: 8px;
  }
}


/*
***************************************************************
btn-wrap（試乗車を探す）
***************************************************************
*/
#campaign-contents .btn-wrap {
  position: relative;
  max-width: var(--contentMaxW);
  margin: 0 !important;
  padding-top: var(--contentMg);
}

#campaign-contents .btn-wrap .btn-ttl {
  font-size: 2.6rem;
}

/* #campaign-contents .btn-wrap .btn-nml.cv-btn {
  animation: none !important;
} */

#campaign-contents .btn-wrap .note {
  font-size: 12px;
  text-align: center;
  padding-top: var(--size16);
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media print,
screen and (max-width: 768px) {
  #campaign-contents .btn-wrap .btn-nml {
    width: 90%;
  }

  #campaign-contents .btn-wrap .btn-ttl {
    font-size: 1.8rem;
  }

  #campaign-contents .btn-wrap .note {
    font-size: 10px;
    line-height: 1.5;
    padding-top: var(--size8);
  }
}

@media print,
screen and (max-width: 320px) {
  #campaign-contents .btn-wrap .note {
    text-align: justify;
    padding-left: 5%;
    padding-right: 5%;
  }

  #campaign-contents .btn-wrap .note br {
    display: none;
  }
}

/*
**************************************************
#fixedBottomBtn（追従CTA）
**************************************************
*/
.section-bg-fadeout {
  position: relative;
  width: 100%;
  height: 160px; /* フェード領域の高さ */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, #ffffff 100%);
  z-index: 1;
  margin-top: 40px; /* 上のセクションとの間隔 */
}

#fixedBottomBtn {
  position: fixed;
  bottom: -56px;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
  margin: auto;
  padding-left: 5%;
  padding-right: 5%;
}


#fixedBottomBtn.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#fixedBottomBtn.show {
  bottom: 0;
  opacity: 1;
}

/* ボタンを囲むコンテナ（中央寄せ + gap + 上下余白調整） */
#fixedBottomBtn .btn-wrap-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 8px 0; /* ← 上下の余白をコンパクトに */
}

/* 各ボタンブロック（1ボタンでもOK） */
#fixedBottomBtn .btn-wrap-container .btn-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 326px;
  margin-top: 0 !important;
  padding-top: 0 !important; /* ← 共通 .btn-wrap の上マージン打ち消し */
}

/* ボタン上部のタイトル（小さめに調整） */
#fixedBottomBtn .btn-wrap-container .btn-ttl {
  font-size: 1.4rem;
  margin-bottom: 6px;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}

/* SP表示：1カラムに */
@media print,
screen and (max-width: 768px) {
  #fixedBottomBtn .btn-wrap-container {
    display: block;
    padding: 8px 0;
  }
}

/* ボタン基本スタイル（共通） */
/* #campaign-contents .btn-nml {
  color: var(--white);
} */

/* #campaign-contents .btn-nml:hover {
  color: var(--white);
  opacity: 0.7;
} */

.cta-stop-trigger {
  height: 1px;
  width: 100%;
}


/*
***********************************************************
PRINT
***********************************************************
*/
@media print {
  body {
    overflow-y: hidden;
  }

  #container {
    overflow-y: hidden;
    min-width: inherit;
  }

  #bottomnavi ul li img {
    display: none !important;
  }

  #section-flow .flows-box-pc {
    width: 90%;
  }
}

/*
*********************************************************
driveCarSearchMap
*********************************************************
*/
#driveCarSearchMap .l-shop-list .list-content li.active-list dl dd .btnBox .search-btn {
  width: 100%;
}

#driveCarSearchMap .l-shop-list .list-content li.active-list dl dd .btnBox .search-btn:after {
  background: none;
  width: initial;
  height: initial;
}

#fixedBottomBtn.hidden {
  display: none !important;
}