@charset "utf-8";
/* ============================================================
   20260728【HM中部】ドリームフェア カウントダウンLP ／ 愛知
   （2026-08-04 本入稿データ版）
   読み込み順: destyle.css → base.css →（splide-core）→ style.css
   ・リセットと共通パーツ（.wrap / .container / .content / .fadein /
     #page_top など）は base.css 担当。base.css は編集しない。
   ・スライスは横1500px・デザイン原寸980px。位置・幅はすべて %
     （.container が980px＝デザイン原寸なので % ＝ デザインの比率）
   ・重ね要素（ボタン・SNSアイコン）の位置はデザインPDFを1500px幅で
     レンダリングし、そこへの最小二乗フィットで実測した値
     （fit_overlay_countdown.py）。推測値ではない。
   ============================================================ */

/*変数 ==========================================
コンテンツ幅。980px（デザイン原寸）は幅プリセット
（lp--narrow/middle/wide）に該当が無いので上書きする
=================================================*/
body {
  --container-width: 980px;
  --content-width: 980px;
  /* コンテンツ列の外側に見える色 */
  background: #f0f0f0;
}

/*layout ========================================
支給スライスはヘッダーなどが透過（白geometryを持たない）ため、
コンテンツ列の地色を白にしておく。
下端は追従バーに隠れないよう余白を確保する
=================================================*/
.wrap {
  background: #fff;
  /* 追従バーの高さぶん（SPバー約16vw／PCバー約95px） */
  padding-bottom: 18vw;
}

@media all and (min-width:750px) {
  .wrap {
    padding-bottom: 135px;
  }
}

@media all and (min-width:769px) {
  .wrap {
    padding-bottom: 110px;
  }
}

/*animation =====================================
「下からぬるっと」表示。base.css の .fadeinLeft / .fadeinRight と
同じ書き方の上下版（.fadein と併記して使う）
=================================================*/
.fadeinUp.fadein--show {
  -webkit-animation: fadein--u .3s ease-in;
  animation: fadein--u .3s ease-in;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes fadein--u {
  0% {
    opacity: 0;
    transform: translate(0, 100px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes fadein--u {
  0% {
    opacity: 0;
    transform: translate(0, 100px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/*component =====================================
重ねボタン共通。スライスからボタンが抜かれている箇所に、
支給の透過素材（または透明リンク）を重ねる
=================================================*/
.ovl {
  position: relative;
}

.ovl__btn {
  display: block;
  position: absolute;
  transition: .3s ease opacity;
}

.ovl__btn:hover {
  opacity: .7;
}

/* 詳細／応募キーワードボタンの共通サイズ（素材幅1334px・左83px＝中央） */
.ovl__btn--1,
.ovl__btn--2 {
  left: 5.533%;
  width: 88.933%;
}

/*component =====================================
キラッと光るボタン
base.css の .kiran-img（overflow:hidden で光を切る）＋ .kiran を使う。
⚠ 角丸は素材の外周半径に合わせる（合わないと角に白いはみ出しが出る）。
   アルファから実測した半径:
     お申し込みはこちら 2285x410 → 63px
     アンカー4本        2611x511 → 44px
     特設サイトはこちら  2401x394 → 161px
=================================================*/
.kiran-img {
  display: block;
}

.kiran-img--quo {
  border-radius: 2.76% / 15.44%;
  box-shadow: 0 0.5vw 0.7vw rgba(0, 0, 0, .3);
}

@media all and (min-width:980px) {
  .kiran-img--quo {
    box-shadow: 0 5px 7px rgba(0, 0, 0, .3);
  }
}

/* MV下のアンカーボタン4本。キラリのために overflow:hidden が掛かっていて
   中の img に drop-shadow を当てると光ごとボケるので、角丸を合わせた
   box-shadow を .kiran-img 自身に付ける（自分の box-shadow は overflow で切られない） */
.kiran-img--anchor {
  border-radius: 1.69% / 8.63%;
  box-shadow: 0 0.5vw 0.7vw rgba(0, 0, 0, .3);
}

@media all and (min-width:980px) {
  .kiran-img--anchor {
    box-shadow: 0 5px 7px rgba(0, 0, 0, .3);
  }
}

.kiran-img--mugen {
  border-radius: 6.71% / 40.86%;
}

/*component =====================================
スライダーの「○○の詳細はこちら」「応募キーワードはこちら」の影
素材が角丸＋透過なので box-shadow ではなく img に drop-shadow を当てる
（形に沿う）。長さは % で書けないので幅連動の vw と PC固定値の2本立て
=================================================*/
.ovl__btn--1 img,
.ovl__btn--2 img {
  filter: drop-shadow(0 0.5vw 0.7vw rgba(0, 0, 0, .3));
}

@media all and (min-width:980px) {

  .ovl__btn--1 img,
  .ovl__btn--2 img {
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .3));
  }
}

/*section ---- ヘッダー（ロゴ帯に地区サイトへのリンクを重ねる）*/
.ovl__btn--logo {
  height: 21.705%;
  left: 12.333%;
  top: 6.589%;
  width: 75.333%;
}

/*section ---- QUOカード「お申し込みはこちら」
  スライス 1_header_3 と 1_header_4 の境目にまたがるので
  2枚をまとめた .ovl の高さ基準で置く */
.ovl__btn--quo {
  left: 11.133%;
  top: 54.845%;
  width: 77.8%;
}

/*section ---- メインビジュアル下のアンカーボタン4本
  1_header_5.webp が本入稿で3439→3755px（末尾の地紋+316px）になったので
  ボタンの絶対位置は仮版と完全一致するが % は変わる */
.ovl--mv .ovl__btn {
  left: 5.6%;
  width: 88.8%;
}

.ovl__btn--anchor1 {
  top: 54.061%;
}

.ovl__btn--anchor2 {
  top: 63.009%;
}

.ovl__btn--anchor3 {
  top: 71.984%;
}

.ovl__btn--anchor4 {
  top: 80.959%;
}

/*section ---- 無限エアロ「キャンペーン特設サイトはこちら」*/
.ovl__btn--mugen {
  left: 9.2%;
  top: 83.116%;
  width: 81.6%;
}

/*section ---- SNS公式アカウント（白カード4枚）*/
.ovl--sns .ovl__btn {
  top: 36.103%;
  width: 10.533%;
}

.ovl__btn--sns1 {
  left: 30.267%;
}

.ovl__btn--sns2 {
  left: 42.067%;
}

.ovl__btn--sns3 {
  left: 53.867%;
}

.ovl__btn--sns4 {
  left: 65.667%;
}

/*section ---- ご成約キャンペーン対象車
  5_contract.webp が本入稿で3750→4286px（帯・速納車バッジ・特別装備ボックス追加）*/
.ovl--contract .ovl__btn--2 {
  top: 92.977%;
}

/*section ---- 中古車「厳選中古車はこちらから」（本入稿で新設・アセット2）
  11_usedcar.webp（4209px）に対する %。白地に白いボタンなので
  デザインPDFへの最小二乗フィットで確定（差分帯検出だけでは幅を大きく取りすぎる）
  ⚠ 北陸だけ支給アートボードにこのボタンが既に焼き込み済み。重ねるのは画像なしの
  透明リンクのみ（二重描画を避ける）なので height を明示指定する必要がある
  （img が無いと base.css の height:auto が効かず高さ0になる） */
.ovl__btn--select {
  left: 9.867%;
  top: 27.512%;
  width: 80.267%;
  height: 4.291%;
}

/*section ---- 車検・点検・メンテナンス（本入稿で中古車から分離した新セクション）
  「ご予約・お見積りはコチラから」。16_shaken.webp（1508px）に対する % */
.ovl__btn--estimate {
  left: 10.067%;
  top: 79.775%;
  width: 80.467%;
}

/*section ---- 保険〜Total Care〜楽まる
  12_support_1〜7 を積んだ1つの箱（合計15,766px＝1500px基準）に対する %。
  保険コンタクトセンターの「詳しくはコチラ」は先方判断でボタン自体をなくした（2026-08-04）*/
.ovl--support .ovl__btn {
  left: 10.2%;
  width: 80.133%;
}

.ovl__btn--totalcare {
  top: 38.038%;
}

.ovl__btn--myhonda {
  top: 47.666%;
}

.ovl--support .ovl__btn--rakumaru {
  left: 7.467%;
  top: 62.4%;
  width: 84.667%;
}

/*component =====================================
カウントダウンタイマー
支給スライス（1_header_2.webp / 1500x590）は数字だけが抜いてある。
パネル4つの位置は実測: x=216/488/760/1032・幅229・y=265〜502
数字はWEBフォント（Oswald 700）で重ねる
=================================================*/
.countdown {
  position: relative;
}

.countdown__digits {
  height: 40.169%;
  left: 0;
  position: absolute;
  top: 44.915%;
  width: 100%;
}

.countdown__num {
  align-items: center;
  /* 数字は「上が明るく下が暗い」一本調子の縦グラデ。背景をグラデにして
     文字型で切り抜く。デザインを字面の上端→下端で実測した値:
       上 250 → 中 211 → 下 158（4パネルすべて同じ・単調減少）
     ⚠ デザインには落ち影・ベベル・グロウは無い（数字の下端すぐ下の
        パネル素地を、数字がある列と無い列で比べて差 0.0 と確認済み）。
        エンボス調の text-shadow を足すとデザインと変わってしまう
     ⚠ 停止位置はセルの高さではなく「セルの中で字面が占める範囲」に
        合わせる。セル高154.8px・font-size 127px・Oswald 700 の実測で
        字面は上から 19.32% 〜 88.43%（ブラウザのTextMetricsで確認）。
        ここを外すとグラデが浅くなる */
  background-image: linear-gradient(180deg, #ffffff 19.32%, #d4d4d4 53.88%, #999999 88.43%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: flex;
  font-family: 'Oswald', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  line-height: 1;
  position: absolute;
  top: 0;
  width: 15.267%;
}

.countdown__num:nth-child(1) {
  left: 14.4%;
}

.countdown__num:nth-child(2) {
  left: 32.533%;
}

.countdown__num:nth-child(3) {
  left: 50.667%;
}

.countdown__num:nth-child(4) {
  left: 68.8%;
}

/* 数字の高さはデザイン実測163px（1500px基準）。Oswald 700 の数字高は
   0.84em なので font-size = 163 / 0.84 = 194px（1500px基準）。
   font-size は % で書けないので、幅連動の vw と PC固定値の2本立てにする
   （194 / 1500 = 12.937vw ／ 980px時 = 126.8px）
   ※書体は近似（入稿PDFはアウトライン化で書体名が取れない）。
     完全一致が必要なら数字画像方式に切り替える */
.countdown__num {
  font-size: 12.937vw;
}

@media all and (min-width:980px) {
  .countdown__num {
    font-size: 127px;
  }
}

/*component =====================================
残クレ・バリ保2.9% スライドの「試算例」アコーディオン
（今すぐクリック＝4_car29_*_02 を押すと 4_car29_*_03 が開く）
=================================================*/
.c29__acc {
  line-height: 0;
}

.c29__accBtn {
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  padding: 0;
  transition: .3s ease opacity;
  width: 100%;
}

.c29__accBtn:hover {
  opacity: .8;
}

.c29__panel {
  overflow: hidden;
}

.c29__panel[hidden] {
  display: none;
}

/*component =====================================
スライダー（Splide 4.1.4 / splide-core.min.css ＋ 下記の見た目）
矢印・ドットの位置はデザイン実測:
  矢印 幅75px・x=537と888／ドット 幅41px・中央／スライド下端から約88px
=================================================*/
.slider {
  visibility: hidden;
}

.slider.is-initialized {
  visibility: visible;
}

/* flex の既定（stretch）だと全スライドがトラックの高さに伸びてしまい、
   アコーディオンを開いた高さが他のスライドにも残る */
.slider .splide__list {
  align-items: flex-start;
}

/* ［‹］［●○○○］［›］を中央に1行で並べる。
   デザイン実測（1500px基準）: 矢印75px／ドット41px／ドット間37px／
   矢印とドット群の間48px／スライド下端から矢印の下端まで約88px。
   ドットの数はスライド数で変わるので「中央そろえの1行」にしている。
   px指定にしているのは、要素の幅を % で書くと親（auto幅）に依存して
   潰れるため。980px以下は幅連動の vw、それ以上はデザイン原寸の px */
.pager {
  align-items: center;
  bottom: 5.87vw;
  display: flex;
  gap: 3.2vw;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 2;
}

.slider .splide__arrow {
  align-items: center;
  aspect-ratio: 1;
  background: #111;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 0;
  position: static;
  transition: .3s ease opacity;
  width: 5vw;
}

.slider .splide__arrow:hover {
  opacity: .7;
}

/* CSSで作る山形（‹ ›） */
.slider .splide__arrow::before {
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  content: "";
  height: 30%;
  width: 30%;
}

.slider .splide__arrow--prev::before {
  margin-left: 8%;
  transform: rotate(-45deg);
}

.slider .splide__arrow--next::before {
  margin-right: 8%;
  transform: rotate(135deg);
}

.slider .splide__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1vw 2.467vw;
  justify-content: center;
  padding: 0;
  position: static;
}

.slider .splide__pagination li {
  display: block;
  width: 2.733vw;
}

.slider .splide__pagination__page {
  aspect-ratio: 1;
  background: #fff;
  border: 2px solid #111;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  padding: 0;
  width: 100%;
}

.slider .splide__pagination__page.is-active {
  background: #111;
}

@media all and (min-width:980px) {
  .pager {
    bottom: 57px;
    gap: 31px;
  }

  .slider .splide__arrow {
    width: 49px;
  }

  .slider .splide__pagination {
    gap: 11px 24px;
  }

  .slider .splide__pagination li {
    width: 27px;
  }

  .slider .splide__pagination__page {
    border-width: 3px;
  }
}

/* HondaのEVの1枚目（6_ttlev_2）は、本入稿では見出し（6_ttlev_1）との重なりを
   作らずに切っている（仮版は下端に背景だけの余白234pxが付いていた）ので、
   スライドの高さが不揃いになる（ev--1だけ3210px・他は3444px）。
   script.js の syncHeight を mount 直後に明示的に呼んで揃える */

/*スライドごとのボタン位置（デザインPDFへの最小二乗フィットで実測。
  n=0(Super-ONE)〜n=6(N-BOX CUSTOM コーディネートスタイル) は表の下の高さが
  すべて748pxで揃っているので応募キーワード/詳細ボタンの位置も共通。
  n=7(N-ONE e:) だけ表の下が665pxと短く応募キーワードが無い） ------------*/
.c29--1 .ovl__btn--1,
.c29--3 .ovl__btn--1,
.c29--4 .ovl__btn--1,
.c29--5 .ovl__btn--1,
.c29--6 .ovl__btn--1,
.c29--7 .ovl__btn--1 {
  top: 10.027%;
}

.c29--1 .ovl__btn--2,
.c29--3 .ovl__btn--2,
.c29--4 .ovl__btn--2,
.c29--5 .ovl__btn--2,
.c29--6 .ovl__btn--2,
.c29--7 .ovl__btn--2,
.c29--8 .ovl__btn--2 {
  top: 42.781%;
}

.c29--2 .ovl__btn--2 {
  top: 35.639%;
}

/* EVはカードが青地でボタンの上端が背景に溶けるため、抜き帯の検出値ではなく
   デザインPDFへの最小二乗フィットで決めた値を使う。ev--1（6_ttlev_2）は
   本入稿で余白234pxを付けずに切ったため container が3210px（他は3444px）*/
.ev--1 .ovl__btn--2 {
  top: 86.48%;
}

.ev--2 .ovl__btn--2,
.ev--3 .ovl__btn--2,
.ev--4 .ovl__btn--2 {
  top: 87.863%;
}

.ev--4 .ovl__btn--1 {
  top: 80.749%;
}

.ot--1 .ovl__btn--2 {
  top: 83.5%;
}

.ot--2 .ovl__btn--2,
.ot--3 .ovl__btn--2,
.ot--4 .ovl__btn--2,
.ot--5 .ovl__btn--2,
.ot--6 .ovl__btn--2,
.ot--7 .ovl__btn--2,
.ot--8 .ovl__btn--2,
.ot--9 .ovl__btn--2,
.ot--10 .ovl__btn--2 {
  top: 80.028%;
}

/*component =====================================
画面下部の追従バー
デザインは2種あるのでブレイクポイント769pxで切り替える:
  SP … デザインp30（750px幅・2行ボタン）
  PC … デザインp29（980px幅・1行ボタン）
実測値（各デザイン幅を1500pxに換算した値）:
  SP: バー高230 / ボタン canvas幅346・左39・上40
  PC: バー高145 / ボタン canvas幅437・左73・上37
⚠ base.css の .pc / .sp は display:block !important なので、
  flexにしたい箱は .pc / .sp の「中」に置く（直接付けると効かない）
=================================================*/
.fixed_bar {
  background: #fff;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 90;
}

.fixed_bar__inner {
  display: flex;
  justify-content: space-between;
  margin: auto;
  position: relative;
  width: 100%;
}

/* SP（〜768px）: 2行ボタン */
.fixed_bar__inner--sp {
  max-width: 750px;
  padding: 2.667% 2.6% 2.133%;
}

.fixed_bar__inner--sp .fixed_bar__btn {
  width: 30.139%;
}

/* PC（769px〜）: 1行ボタン */
.fixed_bar__inner--pc {
  max-width: 980px;
  padding: 2.467% 4.66% 1.773%;
}

.fixed_bar__inner--pc .fixed_bar__btn {
  width: 29.15%;
}

.fixed_bar__btn {
  display: block;
  transition: .3s ease opacity;
}

.fixed_bar__btn:hover {
  opacity: .7;
}

/*==========================================
 TOPへ戻る（BKUP＝ムツミの見た目に合わせる。
 base.css の #page_top は丸グレー＋Font Awesomeなので上書きする）
 追従バーの中に入れて、バーの高さが変わっても必ずその上に出るようにする
===========================================*/
#page_top {
  background: none;
  border-radius: 0;
  /* 追従バー（.fixed_bar＝画面幅いっぱい）の直上・画面の右端に置く。
     .fixed_bar__inner（最大750px）の中に入れるとPCで内側に寄りすぎる */
  bottom: calc(100% + 15px);
  height: auto;
  opacity: 1;
  position: absolute;
  right: 15px;
  width: auto;
  z-index: 99;
}

#page_top a {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10%;
  color: #fff;
  font-size: 1rem;
  height: 80px;
  padding: 40px 0 0;
  text-align: center;
  transition: .3s ease opacity;
  width: 80px;
}

#page_top a:hover {
  opacity: .7;
}

#page_top a::before {
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
  bottom: auto;
  content: "";
  font-size: 0;
  height: 20px;
  left: 50%;
  margin: 0;
  right: auto;
  top: 24px;
  transform: translateX(-50%) rotate(45deg);
  width: 20px;
}

@media all and (max-width:980px) {
  #page_top {
    right: 1.5306122449vw;
  }

  #page_top a {
    font-size: 1.6326530612vw;
    height: 8.1632653061vw;
    padding-top: 4.0816326531vw;
    width: 8.1632653061vw;
  }

  #page_top a::before {
    border-width: 0.306122449vw;
    height: 2.0408163265vw;
    top: 2.4489795918vw;
    width: 2.0408163265vw;
  }
}

@media all and (max-width:500px) {
  #page_top {
    right: 1.3333333333vw;
  }

  #page_top a {
    font-size: 0.75rem;
    height: 50px;
    padding-top: 24px;
    width: 50px;
  }

  #page_top a::before {
    border-width: 1px;
    height: 10px;
    top: 14px;
    width: 10px;
  }
}