@charset "utf-8";
/* top */
/* ============================================ */

/* デザイン幅1921pxを基準に、PCでは画面幅に比例して縮小する（1px = --u） */
:root {
  --u: min(1px, 0.05206vw);
  @media (width <= 896px) {
    --u: 0.26vw;
  }
}

body.blackfriday {
  background: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  overflow-x: hidden;
}

:where(.blackfriday main) img {
  display: block;
  width: 100%;
  height: auto;
}

.blackfriday .inner {
  width: calc(1600 * var(--u));
  margin-inline: auto;
  @media (width <= 896px) {
    width: 92%;
  }
}

/* hero */
.hero {
  background: #1b191b;
}
.hero__wrapper {
  position: relative;
  width: 100%;
  @media (width <= 896px) {
    display: flex;
    flex-direction: column;
  }
}
.hero__ttl {
  a {
    @media (hover: hover) {
      &:hover {
        opacity: 1;
      }
    }
  }
}
/* 高さ0のstickyラッパー（PCではメインビジュアルに重ねて表示し、画面上部に着いたら固定） */
.hero__navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 0;
  @media (width <= 896px) {
    height: auto;
  }
}
.hero__nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8.17vw; /* メインビジュアル高さ（幅の79.1%）の10.3% */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15.3% 0 15.5%;
  background: rgba(220, 27, 22, 0.863);
  transition: height .3s ease-out;
  @media (width <= 896px) {
    position: static;
    width: auto;
    height: auto;
    display: block;
    padding: 10px 3% 12px;
    background: #b8140f;
  }

  ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 0.7%;
    list-style: none;
    margin: 0;
    padding: 0;
    @media (width <= 896px) {
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
  }

  li {
    display: flex;
  }

  a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6em;
    aspect-ratio: 261 / 52;
    padding: 0.3em 3% 0.3em 6%;
    box-sizing: border-box;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    color: #2a1a1a;
    font-size: max(12px, calc(19 * var(--u)));
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.25;
    text-decoration: none;
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
    @media (width <= 896px) {
      aspect-ratio: auto;
      padding: 8px;
      font-size: 1.2rem;
      letter-spacing: 0.02em;
      gap: 0.4em;
    }
    @media (width <= 480px) {
      font-size: 1rem;
    }

    &::before {
      content: "";
      flex: 0 0 auto;
      width: 1em;
      height: 2px;
      background: #dc1b16;
      @media (width <= 896px) {
        width: 0.7em;
      }
    }
  }
}
.hero__nav--active {
  height: 5vw;
  @media (width <= 896px) {
    height: auto;
  }
}

/* おクルマ労り診断 */
.care {
  margin-top: calc(68 * var(--u));
  border: calc(4 * var(--u)) solid #064f9e;
  border-radius: calc(30 * var(--u));
  background: linear-gradient(180deg, #b7e2f9 1%, #c3e6fa 8%, #d1edfb 15%, #dbf0fc 23%, #e0f3fd 30%, #e8f6fd 37%, #f2fafe 44%, #fbfeff 51%, #fff 58%);
  padding-bottom: 2.5%;
  @media (width <= 896px) {
    margin-top: 24px;
    border-radius: 14px;
    padding-bottom: 14px;
  }
}
:where(.care) img {
  width: 100%;
}
.care__head {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  @media (width <= 896px) {
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 3% 0;
  }
}
.care__bubble {
  flex: 0 0 18.1%;
  margin: 6.86% 0 0 3.03%;
  @media (width <= 896px) {
    flex: 0 0 34%;
    margin: 0 2% 0 0;
    order: 2;
    align-self: center;
  }
}
.care__headmain {
  flex: 0 0 61%;
  margin: 2.47% 0 0 -1.71%;
  @media (width <= 896px) {
    flex: 0 0 100%;
    margin: 0;
    order: 1;
  }
}
.care__ribbon {
  width: 72.5%;
  margin: 2% 0 0 12.43%;
  @media (width <= 896px) {
    width: 72.5%;
    margin: 0 auto;
  }
}
.care__price {
  flex: 0 0 27.6%;
  margin: 4.52% 0 0 -8.54%;
  @media (width <= 896px) {
    flex: 0 0 56%;
    margin: 0;
    order: 3;
  }
}
.care__panel {
  margin: 0 2.875%;
  padding: 3.3% 0.94% 0.8%;
  border-radius: calc(24 * var(--u));
  @media (width <= 896px) {
    margin: 0 3%;
    padding: 12px 3% 10px;
    border-radius: 10px;
  }
}
.care__check {
  margin-top: -3.6%;
  background: #064f9e;
  @media (width <= 896px) {
    margin-top: 10px;
  }
}
.care__list {
  display: flex;
  align-items: flex-end;
  list-style: none;
  padding: 0;
  @media (width <= 896px) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 4px;
  }
  @media (width <= 480px) {
    grid-template-columns: repeat(2, 1fr);
  }

  li {
    /* 画像の実寸（幅）の比で並べて高さを揃える */
    &:nth-child(1) { flex: 487 1 0; }
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(4),
    &:nth-child(5) { flex: 486 1 0; }
    &:nth-child(6) { flex: 690 1 0; }

    @media (width <= 896px) {
      &:nth-child(n) {
        flex: none;
      }

      /* 水洗いは1カラム（行全体を使う） */
      &:nth-child(6) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 50%;
      }
    }

    @media (width <= 480px) {
      &:nth-child(6) {
        width: 66%;
      }
    }
  }
}
.care__note {
  margin-top: 0.4%;
  color: #fff;
  font-size: max(10px, calc(15 * var(--u)));
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  @media (width <= 896px) {
    margin: 8px 0 0;
    font-size: 1rem;
  }
}
.care__option {
  margin-top: 1.4%;
  background: #009dea;
  padding: 1%;
  @media (width <= 896px) {
    margin-top: 10px;
    padding: 12px 3%;
  }
}
.care__optionhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 1%;
  @media (width <= 896px) {
    flex-wrap: wrap;
  }
}
.care__optionlabel {
  flex: 0 0 72.8%;
  display: flex;
  align-items: center;
  gap: calc(38 * var(--u));
  box-sizing: border-box;
  min-height: calc(68 * var(--u));
  padding-left: calc(12 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #fff33e;
  @media (width <= 896px) {
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    height: auto;
    padding: 5px;
    border-radius: 10px;
  }
}
.care__optiontag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(287 * var(--u));
  height: calc(51 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #009dea;
  color: #fff;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  @media (width <= 896px) {
    width: auto;
    height: auto;
    padding: 5px 20px;
    border-radius: 10px;
    font-size: 1.2rem;
  }
}
.care__optiontxt {
  color: #009dea;
  font-size: calc(38 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding-block: 0.15em;
  @media (width <= 896px) {
    flex: 0 0 100%;
    font-size: 1.6rem;
    text-align: center;
  }

  em {
    color: #d7141a;
    font-style: normal;
  }
}
.care__optionsub {
  flex: 0 0 28.4%;
  margin-right: -1.3%;
  color: #fff;
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  @media (width <= 896px) {
    flex: 0 0 100%;
    text-align: center;
    font-size: 1.4rem;
  }
}
.care__optionlist {
  display: flex;
  list-style: none;
  padding: 0;
  margin-top: -0.2%;
  @media (width <= 896px) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 4px;
    margin-top: 6px;
  }
  @media (width <= 480px) {
    grid-template-columns: repeat(2, 1fr);
  }

  li {
    flex: 0 0 19.9%;
    margin-left: -0.27%;

    &:first-child {
      margin-left: 0;
    }

    @media (width <= 896px) {
      &,
      &:first-child {
        flex: none;
        width: auto;
        margin-left: 0;
      }
    }
  }
}

/* footer area */
.autumn {
  background: #c5c2d7 url("../images/stripe.png") center top / 100% auto repeat-y;
}
.autumn__wrapper {
  display: grid;
  width: 100%;
  @media (width <= 896px) {
    display: flex;
    flex-direction: column-reverse;
  }
}
.autumn__art {
  grid-area: 1 / 1;
  @media (width <= 896px) {
    margin-top: -1px;
    background: #fef7c7;
  }
}
.autumn__body {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(190 * var(--u));
  text-align: center;
  color: #e8381b;
  @media (width <= 896px) {
    padding: 11vw 4% 0;
    background: #fef7c7;
    /* PCと同じ円弧（幅1921pxで両端が約120px下がる＝半径約203vw）を維持 */
    clip-path: circle(203vw at 50% 203vw);
  }
}
.autumn__ttl {
  font-size: calc(60 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  @media (width <= 896px) {
    font-size: 1.9rem;
    line-height: 1.5;
  }
}
.autumn__txt {
  margin-top: calc(39 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  @media (width <= 896px) {
    margin-top: 12px;
    font-size: 1.3rem;
    line-height: 1.9;
  }

  span {
    display: block;
    @media (width <= 896px) {
      display: inline;
    }
  }
}
.autumn__btn {
  margin-top: calc(110 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(24 * var(--u));
  box-sizing: border-box;
  width: calc(450 * var(--u));
  height: calc(100 * var(--u));
  border-radius: 999px;
  background: #e8381b;
  color: #fff;
  font-size: calc(28 * var(--u));
  font-weight: 500;
  text-decoration: none;
  @media (width <= 896px) {
    margin-top: 20px;
    margin-bottom: 4px;
    width: 72%;
    max-width: 300px;
    height: 52px;
    gap: 10px;
    font-size: 1.5rem;
  }
}
.autumn__pin {
  flex: 0 0 auto;
  width: calc(39 * var(--u));
  height: auto;
  @media (width <= 896px) {
    width: 15px;
  }
}
.autumn__arrow {
  margin-left: calc(8 * var(--u));
}

/* 広告審査用: LP画像を全幅表示 */
.lp-review img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================ */
/* BLACK FRIDAY 2026
   PC（897px以上）: 背景スライス（assets/images/bf/*_bg.webp）の上に、デザイン座標（1921px基準）で
   ライブテキスト部分を重ねる。--x / --y / --w / --h はデザイン上のpx値。
   SP（896px以下）: 背景スライスは使わず、切り出した画像とライブ部品を縦に積む */
/* ============================================ */
.bf-sec {
  position: relative;
  background-color: #1b191b;
  overflow: hidden;
  @media (width > 896px) {
    aspect-ratio: 1921 / var(--h);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
.bf-abs {
  @media (width > 896px) {
    position: absolute;
    left: calc(var(--x) / 19.21 * 1%);
    top: calc(var(--y) / var(--h) * 100%);
    width: calc(var(--w) / 19.21 * 1%);
  }
}
.bf-pc {
  @media (width <= 896px) {
    display: none !important;
  }
}
.bf-sp {
  @media (width > 896px) {
    display: none !important;
  }
}
.bf-sec--red {
  background-color: #8e0000;
}

/* hero */
.bf-hero {
  background-color: #1b181c;
  @media (width > 896px) {
    background-image: none;
  }
}
.bf-hero .hero__wrapper {
  position: relative;
  /* PC：メインビジュアル(1074)の下にヘキサゴン・バナー用の余白を確保し、
     左右のキラキラをメインビジュアル下端に少し重ねて(--spark-overlap)下端まで敷く */
  /* SP：メインビジュアル(画像比 1170:1072)の下端に少し重ねて、キラキラをヘキサゴン・バナーの背面に下端まで敷く */
  @media (width <= 896px) {
    --spark-overlap: 100;
    &::before,
    &::after {
      content: "";
      position: absolute;
      z-index: 1;
      top: calc(100vw * 1072 / 1170 - var(--spark-overlap) / 19.21 * 1vw);
      bottom: 0;
      width: 48%;
      background: url("../images/sparkle_left.png") left top / 100% auto repeat-y;
      pointer-events: none;
    }
    &::before {
      left: 0;
    }
    &::after {
      right: 0;
      background-image: url("../images/sparkle_right.png");
      background-position: right top;
    }
    .bf-hexnav,
    .bf-events {
      position: relative;
      z-index: 2;
    }
  }
  @media (width > 896px) {
    --spark-overlap: 100;
    aspect-ratio: 1921 / 1520;
    &::before,
    &::after {
      content: "";
      position: absolute;
      z-index: 1;
      top: calc((1074 - var(--spark-overlap)) / 1520 * 100%);
      bottom: 0;
      width: calc(394 / 19.21 * 1%);
      background: url("../images/sparkle_left.png") left top / 100% auto no-repeat;
      pointer-events: none;
    }
    &::before {
      left: 0;
    }
    &::after {
      right: 0;
      background-image: url("../images/sparkle_right.png");
      background-position: right top;
    }
  }
}
.bf-hex {
  position: absolute;
  z-index: 2;
  top: calc(866 / 1520 * 100%);
  width: calc(216 / 19.21 * 1%);
  height: calc(244 / 1520 * 100%);
  &:nth-child(1) { left: calc(472 / 19.21 * 1%); }
  &:nth-child(2) { left: calc(724 / 19.21 * 1%); }
  &:nth-child(3) { left: calc(978 / 19.21 * 1%); }
  &:nth-child(4) { left: calc(1232 / 19.21 * 1%); }
}
.bf-hexlist {
  list-style: none;
  margin: 0;
  padding: 0;
  a {
    display: block;
    width: 100%;
    height: 100%;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.bf-hexnav {
  list-style: none;
  margin: 0;
  padding: 18px 8% 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  @media (width <= 896px) {
    padding-top: 0;
  }
}
.bf-events {
  list-style: none;
  margin: 0;
  padding: 18px 4% 20px;
  display: grid;
  gap: 12px;
  @media (width > 480px) {
    grid-template-columns: 1fr 1fr;
  }
  /* PC：メインビジュアル下部の所定位置（デザイン座標 x316 y1144 幅1288）に重ねる */
  @media (width > 896px) {
    position: absolute;
    left: calc(316 / 19.21 * 1%);
    top: calc(1144 / 1520 * 100%);
    width: calc(1288 / 19.21 * 1%);
    padding: 0;
    gap: calc(24 / 1288 * 100%);
  }
}
.bf-hero {
  position: relative;
}

/* 共通：SPの見出し画像など */
.bf-sec img:where(:not(.bf-abs)) {
  display: block;
  width: 100%;
  height: auto;
}
.bf-new .bf-deco {
  /* デザインどおり、バナー（.bf-lcwrap）より手前に重ねる */
  z-index: 2;
}
.bf-lcwrap {
  z-index: 1;
  @media (width <= 896px) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 92% !important;
    margin: 0 auto;
    padding-bottom: 24px;
  }
}
/* SP：PCと同じ画像・設計座標を、横幅比で縮尺して配置（上部ブロック） */
.bf-new__top {
  display: contents;
  @media (width <= 896px) {
    display: block;
    position: relative;
    /* 抽選バナー（SPは縦長画像）を通常フローで下に置くため、高さは固定せず上部をpaddingで確保 */
    padding-top: calc(540 / 19.21 * 1vw);
    .bf-abs {
      position: absolute;
      left: calc(var(--x) / 19.21 * 1%);
      top: calc(var(--y) / 19.21 * 1vw);
      width: calc(var(--w) / 19.21 * 1%);
    }
    /* SP：抽選バナー左の風船は、「抽選」バッジに重ならないよう左端へ寄せる（画面外へはみ出させる） */
    img[src*="new_balloon04"] {
      left: calc(-45 / 19.21 * 1%);
    }
    img[src*="new_balloon05"] {
      left: calc(-120 / 19.21 * 1%);
    }
    img[src*="new_balloon06"] {
      left: calc(-165 / 19.21 * 1%);
    }
  }
}

/* おすすめの新車 */
.bf-new {
  /* 上へはみ出すプレゼント(new_gift01)をメインビジュアル下のバナー(.bf-events)の手前に、
     下へはみ出す風船(new_balloon14・PCのみ)を次のセクションの手前に表示（左右は切る） */
  overflow-x: clip;
  overflow-y: visible;
  z-index: 5;
  clip-path: inset(-400px 0 0 0);
  @media (width > 896px) {
    background-color: #1b181c;
    clip-path: inset(-400px 0 -400px 0);
  }
  @media (width <= 896px) {
    padding-bottom: 28px;
  }
}
/* PC：個別に書き出した装飾・タイトル・バナーの配置（--x/--y/--w はデザイン座標） */
img.bf-abs {
  height: auto;
}
.bf-deco {
  pointer-events: none;
  /* SP：デザイン座標を横幅(vw)基準で縮尺して絶対配置 */
  @media (width <= 896px) {
    position: absolute;
    left: calc(var(--x) / 19.21 * 1%);
    top: calc(var(--y) / 19.21 * 1vw);
    width: calc(var(--w) / 19.21 * 1%);
    &.bf-deco--b {
      top: auto;
      bottom: calc(var(--bottom, 0) / -19.21 * 1vw);
    }
  }
}
/* キラキラ：左右の縁に縦方向へ繰り返して敷く（コンテンツの下） */
.bf-sparkle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(394 / 19.21 * 1%);
  background: url("../images/sparkle_left.png") left top / 100% auto repeat-y;
  pointer-events: none;
  @media (width <= 896px) {
    width: 48%;
  }
  &.bf-sparkle--r {
    left: auto;
    right: 0;
    background-image: url("../images/sparkle_right.png");
    background-position: right top;
  }
}
.bf-new__lead {
  z-index: 3;
  word-break: keep-all;
  overflow-wrap: anywhere;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.65;
  font-size: calc(34 * var(--u));
  @media (width <= 896px) {
    font-size: 1.4rem;
    line-height: 1.8;
    padding: 4px 4% 12px;
  }
  span {
    display: block;
    text-wrap: balance;
  }
}
.bf-cars {
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: calc(18.75 * var(--u));
  row-gap: calc(25 * var(--u));
  @media (width <= 896px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 12px;
    padding: 0 4%;
  }
  @media (width <= 480px) {
    gap: 10px 8px;
  }
}
.bfcar {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 307 / 450;
  color: #150d08;
  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  > * {
    position: absolute;
  }
  /* 車写真は共通の枠画像の上に重ねる（位置は style で指定） */
  img.bfcar__car {
    inset: auto;
    height: auto;
    &.is-multiply {
      mix-blend-mode: multiply;
    }
  }
}
.bfcar__badge {
  z-index: 1;
  top: -1.5cqw;
  right: 4cqw;
  width: 26cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  align-content: center;
  justify-items: center;
  background: radial-gradient(circle at 35% 30%, #e0202a, #b00018 75%);
  border: 0.8cqw solid #fff;
  box-shadow: 0 0 0 0.5cqw #b00018, 0 1cqw 2cqw rgba(0, 0, 0, 0.35);
  color: #fff;
  font-weight: 900;
  line-height: 1;
  small {
    font-size: 5cqw;
    font-weight: 700;
  }
  /* 「1台」はデザインどおり明朝体（数字を大きく、「台」を小さく） */
  b {
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-weight: 900;
    font-size: 7cqw;
    &::first-letter {
      font-size: 10.5cqw;
    }
  }
}
.bfcar__name,
.bfcar__sub,
.bfcar__due {
  left: 0;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}
.bfcar__name {
  top: 63.6%;
  font-size: 7.6cqw;
  font-weight: 900;
  line-height: 1.2;
}
.bfcar__sub {
  top: 70.6%;
  font-size: 4.4cqw;
  font-weight: 700;
}
.bfcar__due {
  top: 76.4%;
  font-size: 4.9cqw;
  font-weight: 700;
}
/* カード全体をリンク領域にし、文言は画像のボタン位置に重ねる */
.bfcar__btn {
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  color: #fff;
  font-size: 4.3cqw;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  span {
    position: absolute;
    top: 85.6%;
    left: 24.8%;
    width: 50.4%;
    height: 6.2%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ボタンの背景色。色を変えるときは --bf-btn-* を差し替える */
    background: linear-gradient(var(--bf-btn-top, #2d1409), var(--bf-btn-bottom, #120502));
    border-radius: 2.6cqw;
    box-shadow: inset 0 0 0 0.3cqw rgb(255 255 255 / 0.1);
  }
  @media (hover: hover) {
    &:hover span {
      filter: brightness(1.35);
    }
  }
}
/* 「応募にあたって」（背景画像上の透明ボタン） */
.bf-lc {
  position: relative;
}
/* バナー全体をクリック領域にして、ランドクルーザー250のポップアップを開く */
.bf-lc__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ポップアップ（新車の詳細 / 抽選のご案内） */
body:has(dialog.bfpop[open]) {
  overflow: hidden;
}
.bfpop {
  /* 幅は最大560px。画面が低い場合は高さをはみ出さず、ポップアップ内をスクロール */
  width: min(92vw, 400px);
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  background: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  color: #150d08;
  &::backdrop {
    background: rgb(0 0 0 / 0.72);
  }
}
.bfpop__in {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 646 / 947;
  background: url("../images/bf/pop_frame.webp") 0 0 / 100% 100% no-repeat;
}
.bfpop--lc .bfpop__in {
  background-image: url("../images/bf/pop_frame_lc.webp");
}
.bfpop__car {
  position: absolute;
  height: auto;
  &.is-multiply {
    mix-blend-mode: multiply;
  }
}
.bfpop__body {
  /* 高さは文字量に応じて伸びる（枠は縦に引き伸ばす） */
  position: relative;
  padding: 58cqw 8.6% 8cqw;
  line-height: 1.6;
  font-size: 3.4cqw;
  font-weight: 500;
  p,
  ul {
    margin: 0;
  }
  ul {
    padding: 0;
    list-style: none;
  }
  li {
    padding-left: 1em;
    text-indent: -1em;
    &::before {
      content: "・";
    }
  }
}
.bfpop__name {
  margin: 0;
  text-align: center;
  font-size: 7cqw;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}
.bfpop__sub {
  text-align: center;
  font-size: 4.3cqw;
  font-weight: 900;
  line-height: 1.5;
}
.bfpop__color {
  margin-top: 1.8cqw !important;
}
.bfpop__opt {
  margin-top: 1.4em !important;
}
.bfpop__close {
  position: absolute;
  top: 3.09%;
  left: 86.45%;
  width: 8.39%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("../images/bf/pop_close.svg") center / 100% 100% no-repeat;
  cursor: pointer;
  &:focus:not(:focus-visible) {
    outline: none;
  }
  &:focus-visible {
    outline: 2px solid #ffe68c;
    outline-offset: 2px;
  }
}
/* 抽選ポップアップ */
.bfpop--lc {
  .bfpop__body {
    padding: 65.2cqw 9% 8cqw;
    line-height: 1.5;
    font-weight: 900;
  }
  .bfpop__name {
    font-size: 7.8cqw;
  }
  .bfpop__sub {
    font-size: 4.9cqw;
  }
  .bfpop__lot {
    margin-top: 1.4cqw !important;
    text-align: center;
    font-size: 7.2cqw;
    line-height: 1.4;
  }
  .bfpop__red {
    margin-top: 4.5cqw !important;
    color: #b3202b;
    font-size: 4.6cqw;
    line-height: 1.45;
  }
  .bfpop__term {
    margin-top: 4.5cqw !important;
    color: #1c4d2f;
    font-size: 5cqw;
  }
  .bfpop__note {
    margin-top: 2.5cqw !important;
    font-size: 3.6cqw;
    font-weight: 500;
    line-height: 1.6;
  }
}

.bf-new__note {
  z-index: 3;
  color: #fff;
  font-size: calc(21 * var(--u));
  font-weight: 500;
  line-height: 1.7;
  @media (width <= 896px) {
    position: relative; /* z-index を効かせ、sparkle の手前に表示 */
    padding: 14px 4% 0;
    font-size: 1.1rem;
  }
}

/* 査定価格de宝くじ / 特別なご案内 */
.bf-lottery {
  position: relative;
  @media (width <= 896px) {
    padding: 20px 0;
  }
  &::before {
    content: "";
    background: #8e0000;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .7;
  }
  /* ::before（赤）はキラキラの上、バナー画像はその上に重ねる */
  .bf-abs {
    z-index: 2;
  }
  /* SP：バナー画像を幅いっぱいに表示 */
  img.bf-abs {
    @media (width <= 896px) {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
      padding: 0 2%;
    }
  }
}
.bf-offer {
  background-color: #1b181c;
  /* 上へはみ出す風船(offer_balloon01)を、宝くじ・案内画像より手前に表示（下・左右は切る） */
  overflow: visible;
  clip-path: inset(-400px 0 0 0);
  z-index: 5;
  /* SP：左右は他のブロック（中古車パネル・新車カード等）と同じ4%。上下は元の比率 */
  @media (width <= 896px) {
    padding: calc(161 / 19.21 * 1%) 4% calc(179 / 19.21 * 1%);
  }
  .bf-deco {
    z-index: 3;
  }
  a {
    display: block;
    @media (width <= 896px) {
      position: relative;
      z-index: 2;
    }
    @media (width > 896px) {
      position: absolute;
      inset: calc(161 / 1413 * 100%) calc(160 / 19.21 * 1%) calc(179 / 1413 * 100%) calc(161 / 19.21 * 1%);
    }
    @media (hover: hover) {
      &:hover {
        opacity: 1;
      }
    }
  }
}

/* おすすめの中古車 */
.bf-used {
  /* 上下へはみ出す風船(used_balloon01/02)を、案内・サービスセクションより手前に表示（左右は切る） */
  overflow-x: clip;
  overflow-y: visible;
  clip-path: inset(-400px 0 -400px 0);
  z-index: 6;
  .bf-deco {
    z-index: 3;
  }
  /* SP：タイトルをデザインどおりの余白で配置し、パネルをキラキラ・風船の手前に */
  @media (width <= 896px) {
    /* 上下の余白は margin だと親の外へ抜けて白帯になるため padding で確保 */
    padding-top: calc(29 / 19.21 * 1%);
    padding-bottom: 28px;
    .bf-used__title {
      position: relative;
      display: block;
      width: calc(1544 / 19.21 * 1%);
      height: auto;
      margin: 0 0 0 calc(177 / 19.21 * 1%);
      z-index: 2;
    }
    .bf-abs:not(.bf-deco) {
      position: relative;
      z-index: 2;
    }
  }
}
.bf-panels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(24.5 * var(--u));
  @media (width <= 896px) {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 4% 8px;
  }
}
.bfpanel {
  container-type: inline-size;
  padding: 0 4.2% 5%;
  border-radius: calc(30 * var(--u));
  background: #000;
  text-align: center;
  @media (width <= 896px) {
    padding-bottom: 6%;
    border-radius: 16px;
  }
}
.bfpanel__ttl {
  padding: 5cqw 0 4cqw;
  color: #e9c872;
  font-size: 5.1cqw;
  font-weight: 700;
  line-height: 1.3;
}
.bfpanel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5cqw 3.9cqw;
}
/* 中古車カード：カード全体を1枚の画像（used_cardNN.webp）として表示 */
.bfused {
  line-height: 0;
}
.bfused__link {
  display: block;
  @media (hover: hover) {
    &:hover {
      opacity: 0.85;
    }
  }
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* 11日まで: リンク無効化＋「詳しくはコチラ」ボタンを白で覆って非表示（11日に --soon を外す） */
  &.bfused__link--soon {
    position: relative;
    pointer-events: none;

    &::before {
      content: "";
      position: absolute;
      left: 17%;
      top: 87%;
      width: 66%;
      height: 9%;
      background: #fff;
    }
  }
}
.bfpanel__btn {
  display: inline-block;
  margin-top: 2.4cqw;
  padding: 0.9cqw 6.4cqw;
  border-radius: 99px;
  background: #c40000;
  color: #fff;
  font-size: 4cqw;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  @media (hover: hover) {
    &:hover {
      opacity: 0.8;
    }
  }
}
.bfpanel__more {
  margin-top: 8cqw;
  color: #fff100;
  font-size: 5.1cqw;
  font-weight: 900;
}
.bfpanel__note {
  margin-top: 1cqw;
  color: #fff;
  font-size: 2.9cqw;
}
.bfpanel__btn {
  margin-top: 4.2cqw;
  padding: 1.2cqw 13cqw;
  font-size: 3.8cqw;
}
.bf-used__catch {
  color: #e8c27f;
  text-align: center;
  font-weight: 900;
  line-height: 1.25;
  font-size: calc(56 * var(--u));
  @media (width <= 896px) {
    margin: calc(60 / 19.21 * 1vw) 0 calc(12 / 19.21 * 1vw);
    font-size: calc(56 / 19.21 * 1vw);
  }
}
.bf-used__lead {
  color: #fff100;
  text-align: center;
  font-weight: 900;
  font-size: calc(36 * var(--u));
  line-height: 1.8;
  word-break: keep-all;
  @media (width <= 896px) {
    padding: 20px 4% 0;
    font-size: 1.5rem;
  }
}
.bf-used__search {
  display: block;
  margin: 0 auto;
  width: calc(355 * var(--u));
  padding: calc(8 * var(--u)) 0;
  border-radius: 99px;
  background: #fff100;
  color: #c00;
  text-align: center;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  text-decoration: none;
  @media (width <= 896px) {
    margin-top: 16px;
    width: 72%;
    padding: 10px 0;
    font-size: 1.4rem;
  }
}

/* サービス季節商品 / おクルマ労り診断 */
.bf-service {
  background-color: #1b181c;
  --ph: var(--h);
  /* PC：セクション基準、SP：.bf-service__top（比率固定）基準でデザイン座標を配置 */
  @media (width <= 896px) {
    padding: 0 0 28px;
  }
}
.bf-service__top {
  display: contents;
  @media (width <= 896px) {
    --ph: 2150;
    display: block;
    position: relative;
    z-index: 1;
    aspect-ratio: 1921 / 2150;
  }
}
.bf-sec .bf-sv {
  position: absolute;
  height: auto;
  left: calc(var(--x) / 19.21 * 1%);
  top: calc(var(--y) / var(--ph) * 100%);
  width: calc(var(--w) / 19.21 * 1%);
}
.bf-service__note {
  color: #fff;
  text-align: center;
  font-size: calc(16 * var(--u));
  font-weight: 500;
  word-break: keep-all;
  @media (width <= 896px) {
    position: relative;
    z-index: 1;
    margin: 10px 4% 20px;
    font-size: 1rem;
  }
}
.bf-service .care {
  @media (width > 896px) {
    margin-top: 0;
  }
}
/* SP：サービス季節商品ブロックと同じ左右余白(約6.25%)で、キラキラの手前に表示 */
.bf-service > .bf-abs {
  @media (width <= 896px) {
    position: relative;
    z-index: 1;
    margin: 0 6.25%;
  }
}

/* アスリート診断 */
.bf-athlete {
  background-color: #b9bfc1;
  aspect-ratio: auto;
}
.bf-athlete > a {
  display: block;
  @media (hover: hover) {
    &:hover {
      opacity: 1;
    }
  }
}

/* NEXT */
.bf-next {
  background-color: #96785e;
  padding: calc(70 * var(--u)) 0 0;
  @media (width <= 896px) {
    padding-top: 24px;
  }
}
.bf-next ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 785fr 785fr;
  gap: calc(31 * var(--u));
  width: calc(1601 * var(--u));
  @media (width <= 896px) {
    width: 92%;
    gap: 12px;
  }
  @media (width <= 480px) {
    grid-template-columns: 1fr;
  }
}
.bf-next img {
  display: block;
  width: 100%;
  height: auto;
}

/* footer area */
.bffoot.autumn {
  background: #96785e;
}
/* 背景は autumn_bg.webp。上端の円弧は clip-path で表現（端が約120px下がる・幅1921px基準） */
.bffoot .autumn__wrapper {
  position: relative;
  aspect-ratio: 1921 / 1050;
  @media (width <= 896px) {
    aspect-ratio: auto;
  }
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #19171a url("../images/autumn_bg.webp") center bottom / cover no-repeat;
    clip-path: circle(200.2vw at 50% 204.4vw);
  }
}
.bffoot .autumn__body {
  position: relative;
  z-index: 1;
  color: #e9c872;
  padding-top: calc(290 * var(--u));
  @media (width <= 896px) {
    background: none;
    clip-path: none;
    padding: 22vw 6% 12vw;
  }
}
.bffoot .autumn__txt {
  @media (width <= 896px) {
    text-align: center;
    line-height: 1.8;
    span {
      display: block;
      text-wrap: balance;
    }
  }
}
.bffoot .autumn__txt {
  color: #f3dfae;
}