/* ==========================================================================
   Final CTA (最終CTA)
   ========================================================================== */
.final-cta {
  position: relative;
  z-index: 0;
  padding: 32px 0;
  overflow: hidden;
  background-color: var(--color-base);
}

.final-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  z-index: -1;
}

.final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.final-cta__banner {
  /* gapと左paddingをわずかに詰め、中央テキスト列の文字を大きくするための
     余白を確保(カード・4マスのサイズ/配置は変更していない) */
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  padding: 8px 2px 13px 4px;
  background-color: var(--color-accent);
}

.final-cta__banner-catch {
  /* 72px→66pxに調整。「プレゼントキャンペーン中」が1行に収まる幅を
     中央テキストブロックに確保するため。 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 66px;
}

.final-cta__banner-catch-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.final-cta__dots {
  /* SP版: 参照SVG(sp-cta-dots.svg)はwidth/height="100%"でintrinsic sizeを
     持たないため、widthのみの指定だと300x150にフォールバックし、
     36px幅×150px高さの縦長装飾になっていた(news/contact矢印と同一原因)。
     これが「今すぐ」上の白い縦線が伸びて見える原因、かつバナー全体の
     縦伸びの主因の一つだった。 */
  width: 36px;
  aspect-ratio: 36.1914 / 3;
}

.final-cta__banner-catch-top p {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--color-base);
  letter-spacing: 0.04em;
}

.final-cta__banner-logo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  width: 55px;
}

.final-cta__banner-logo span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 1;
  background-color: var(--color-blue-text);
  color: var(--color-base);
  font-weight: 700;
  font-size: 2.1rem;
  /* 「内」「覧」「予」「約」の文字位置調整。
     Noto Sans JPはフォント自体のascent/descent（行送り用の上下余白）が
     グリフの実際の描画範囲(インク)に対して上寄りに偏っており、
     align-items:centerだけでは文字が正方形の下寄りに見えてしまう
     （Canvas TextMetrics実測: 上余白約17-20px・下余白約11px @56pxフォント）。
     box-sizing:border-boxのため、この正方形自体のサイズ・位置は
     変更せず、下方向のpaddingだけを追加してflexの中央揃えの基準位置を
     わずかに押し上げ、視覚的な中央に合わせている。 */
  padding-bottom: 2px;
}

.final-cta__banner-main {
  /* Figmaデザインでは中央のテキストブロックは中央揃えではなく左揃え
     (「ラストチャンス！」「QUOカード5,000円」「プレゼントキャンペーン中」の
     行頭が揃っている)。 */
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}

.final-cta__banner-heading {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
  /* SP版: 左右の斜線装飾を削除した結果、「ラストチャンス！」自体はテキスト幅
     (実測165.4px)ぶんだけの箱になり、.final-cta__banner-main(flex-start)の
     左端(x=91px)に他の行(QUOカード5,000円/プレゼントキャンペーン中、
     実測幅193.5px/195px)と同じく左揃えになっていた。
     行頭が揃うだけでは「ラストチャンス！」の方が短い分、見た目の中心が
     QUOカード等の行より左に寄って見えるため、widthを下の行の実測幅
     (約193.5px)に合わせたうえでjustify-content:centerにより、
     「ラストチャンス！」というテキスト自体をこの幅の中で中央揃えにする。
     結果、テキストの見た目の中心が下の行の中心とほぼ一致する
     (実測: 中心x≈188pxで一致)。QUOカード5,000円・プレゼント
     キャンペーン中自体の位置(左揃え・実測値)は変更していない。 */
  width: 193.5px;
  justify-content: center;
}

/* 「ラストチャンス！」左右の斜線装飾(.final-cta__deco/--left/--right)は
   PC・SP両方で削除したため、対応するCSSルールも削除した
   (HTML側に対応する要素が存在しなくなったため)。 */

.final-cta__banner-price {
  color: var(--color-base);
  font-weight: 700;
}

.final-cta__banner-price .en    { font-family: var(--font-en); font-size: 2rem; }
.final-cta__banner-price .price { font-family: var(--font-en); font-size: 2.5rem; }
.final-cta__banner-price .unit  { font-size: 1.8rem; }

.final-cta__banner-sub {
  /* 「内覧予約」4マスの下端と「プレゼントキャンペーン中」の下端が
     ほぼ揃うよう、実測差分だけ上へ詰める(-4px→-8pxでさらに少し上へ) */
  margin-top: -8px;
  color: var(--color-base);
  font-weight: 700;
  /* 中央テキスト列の幅が限られているため、「プレゼントキャンペーン中」が
     1行を維持できる上限までfont-sizeを上げ、僅かなletter-spacingで調整 */
  font-size: 1.7rem;
  letter-spacing: -0.04em;
}

.final-cta__quo-img {
  flex-shrink: 0;
  width: 74px;
  transform: rotate(8.71deg);
}

.final-cta__notice {
  /* Figmaデザインに合わせセクション中央配置に修正 */
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.final-cta__notice p {
  background-color: var(--color-blue-text);
  /* Figmaでは角丸なしの四角い帯 */
  border-radius: 0;
  padding: 4px 25px;
  color: var(--color-base);
  font-weight: 900;
  /* 一回り大きく(1.3rem→1.5rem)。吹き出しはinline-flexで内容に応じて
     自動的に幅が広がるため、位置(中央配置)・三角形は影響を受けない */
  font-size: 1.5rem;
  text-align: center;
}

.final-cta__notice-arrow {
  /* SP版: 従来pc-onlyだったためSP版には吹き出しの三角がなかった。
     Figmaに合わせ、PCと同じcta-bubble-arrow.svgをSP用に縮小して表示する。
     aspect-ratioはSVGのviewBox比率、rotateはPC版と同じ180deg(上向き▲→下向き▼)。 */
  display: block;
  width: 14px;
  aspect-ratio: 36.3171 / 22.609;
  transform: rotate(180deg);
  margin-top: -3px;
}

.final-cta__bottom {
  /* Figmaデザインに合わせセクション中央配置に修正
     (PC版はmedia query内で明示的にflex-direction:row+text-align:leftへ切り替わる) */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.final-cta__phone-label {
  font-weight: 700;
  font-size: 1.4rem;
  text-align: center;
}

.final-cta__phone-num {
  margin-top: 4px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--color-blue-text);
  text-align: center;
}

.final-cta__btn {
  position: relative;
  /* contact__submitと同じ理由でz-index:0が必要
     (position:relativeだけだと::beforeが祖先のスタッキングコンテキストへ
     抜けて非表示になる)。 */
  z-index: 0;
  display: flex;
  gap: 8px;
  /* Figmaに合わせ、幅を100%から少し狭め左右に余白を作る。
     親.final-cta__bottomがalign-items:centerのため自動的に中央配置される。 */
  width: 88%;
  padding: 18px 28px;
  /* ボタン本体の色は::afterに移すため透過にする(SP/PC共通)。
     ::before(z-index:-1)は要素自身の背景色より手前に描画される仕様のため、
     own background-colorに頼ると濃いオレンジが前面に出てしまう。 */
  background-color: transparent;
  font-size: 2rem;
  transition: opacity 0.2s ease;
}

.final-cta__btn::before {
  /* 右下にずれた濃いオレンジの背景装飾(SP/PC共通、オフセット量はmedia query内で調整) */
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 100%;
  height: 100%;
  background-color: var(--color-accent-dark);
  z-index: -1;
}

.final-cta__btn::after {
  /* ボタン本体そのものの色(オフセット無し、SP/PC共通)。::beforeより後に
     描画される::afterを上に重ね、::beforeが右側・下側にのみはみ出て見えるようにする。 */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-accent);
  z-index: -1;
}

.final-cta__btn:hover {
  opacity: 0.85;
}

.final-cta__btn-arrow {
  width: 12px;
}

.final-cta__btn-arrow.sp-only {
  /* SP版: contact__submit-arrowと同一原因の縦伸びバグ(sp-arrow-triangle.svg共用)。
     .sp-onlyに限定しPC版(.pc-only、contact-submit-arrow.svg)には影響させない。
     width: 12px→13.5px(約12.5%増)。gapは.final-cta__btnのgap:8pxのままで
     テキストとの間隔は変更していない。align-items:centerで縦位置も中央維持。 */
  width: 13.5px;
  aspect-ratio: 17.3205 / 15;
  transform: rotate(90deg);
}

@media (min-width: 768px) {
  .final-cta {
    padding: 76px 0;
  }

  .final-cta__inner {
    gap: 0;
  }

  .final-cta__banner {
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 8px 4px 14px 54px;
    height: 236px;
  }

  .final-cta__banner-catch {
    gap: 8px;
    width: auto;
  }

  .final-cta__banner-catch-top {
    gap: 4px;
  }

  .final-cta__dots {
    width: 83.451px;
    aspect-ratio: 83.4509 / 4.91481;
  }

  .final-cta__banner-catch-top p {
    font-size: 4rem;
  }

  .final-cta__banner-logo {
    gap: 5px;
    width: 130.95px;
  }

  .final-cta__banner-logo span {
    font-size: 5.6rem;
    /* PC版はフォントサイズが大きくなる分、必要な補正量も比例して増える
       （Canvas TextMetrics実測: 上余白約17-20px・下余白約11px @56pxフォント → 約7px補正） */
    padding-bottom: 7px;
  }

  .final-cta__banner-main {
    /* PC版はSP用の左揃えを打ち消し、従来通り中央揃えに戻す */
    align-items: center;
    text-align: center;
    gap: 3px;
  }

  .final-cta__banner-heading {
    gap: 4px;
    font-size: 4.4rem;
    letter-spacing: 0.07em;
    /* PC版はSP用のwidth/justify-content(下の行の幅に合わせた中央寄せ)を
       打ち消す。PC版は親.final-cta__banner-main側で
       align-items:center/text-align:centerに切り替わっており、
       .final-cta__banner-heading自体は装飾削除後すでにテキストのみで
       自動的に中央配置されているため、この上書きは不要かつ、
       SP用の固定width(193.5px)がPCの大きいフォントサイズ(4.4rem)の
       テキスト幅と合わず不具合の原因になるため必ず打ち消す。 */
    width: auto;
    justify-content: flex-start;
  }

  /* 「ラストチャンス！」左右の斜線装飾(.final-cta__deco--left/--right、
     疑似要素含む)は削除したため、対応するPC用CSSルールも削除した。
     .final-cta__banner-heading自体はalign-items:center/text-align:center
     が親(.final-cta__banner-main)に設定済みのため、装飾を取り除いた
     「ラストチャンス！」のみで自動的に中央配置される。 */

  .final-cta__banner-price .en    { font-size: 4.4rem; }
  .final-cta__banner-price .price { font-size: 5.6rem; }
  .final-cta__banner-price .unit  { font-size: 4rem; }

  .final-cta__banner-sub {
    /* PC版はSP用の詰め・letter-spacingを打ち消す */
    margin-top: 0;
    font-size: 4rem;
    letter-spacing: normal;
  }

  .final-cta__quo-img {
    width: 223.146px;
  }

  .final-cta__notice {
    align-self: center;
    position: relative;
    margin-top: 34px;
    flex-direction: column;
  }

  .final-cta__notice p {
    border-radius: 0;
    padding: 5px 67px 15px 66px;
    font-weight: 900;
    font-size: 4rem;
  }

  .final-cta__notice-arrow {
    display: block;
    width: 41.935px;
    aspect-ratio: 36.3171 / 22.609;
    transform: rotate(180deg);
    margin-top: -8px;
  }

  .final-cta__bottom {
    margin-top: 40px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }

  .final-cta__phone-label {
    font-size: 3.2rem;
    text-align: left;
  }

  .final-cta__phone-num {
    margin-top: 8px;
    font-size: 6.4rem;
    text-align: left;
  }

  .final-cta__btn {
    /* space-betweenだとテキストと矢印がボタン両端に押し出され、矢印だけが
       右端ギリギリに配置されていた。centerに変更し、テキスト+矢印を
       1つのグループとしてボタン中央に配置する(gapで間隔を維持)。 */
    width: 409px;
    justify-content: center;
    gap: 16px;
    padding: 28px 17px;
    font-weight: 900;
    font-size: 3.2rem;
    white-space: nowrap;
    /* PC版もhero__cta-btnと同じ理由でtransparentのまま(::afterに本体色を任せる)。
       以前はここで背景色を元に戻していたが、::beforeが要素自身の背景より
       手前に描画される仕様のため、濃いオレンジが前面に出てしまうバグがあった。 */
  }

  .final-cta__btn::before {
    /* hero__cta-btn(PC版ファーストビュー)と同じオフセット量に統一 */
    left: 8px;
    top: 8px;
  }

  .final-cta__btn-arrow {
    width: 22.211px;
    aspect-ratio: 19.6914 / 20.2611;
  }
}

/* ==========================================================================
   最終CTA 演出アニメーション（①「ラストチャンス！」ポップ／②CTAボタンの
   一度きりのパルス）
   ==========================================================================
   発火は専用JS(js/modules/final-cta-animation.js)が.final-ctaセクション
   自体をIntersectionObserverで監視し、画面内に入った時点で
   .final-cta--animateを1度だけ付与する(既存の.fade-up用
   scroll-animation.js / about-animation.jsと同じ「1回だけ付与してunobserve」
   パターンを踏襲)。
   .final-cta__bottom自体は既存のfade-upクラスで別タイミング(自身が画面内に
   入った時点)にフェードインするが、ボタンのパルスは「ラストチャンス！」の
   ポップと同じ基準(セクションが画面に入った瞬間)から一定時間後に
   揃えて発火させたいため、.final-cta__bottomのfade-up観測とは別に、
   このセクション単位の観測結果 + animation-delayで揃えている。
   position/width/height/gap/padding/背景色/影/文字サイズ等の既存プロパティは
   一切変更せず、opacity/transform(見た目のみで配置に影響しない)だけを
   追加している。 */
.final-cta__banner-heading {
  /* ポップ演出の初期状態(JSでクラスが付与されるまでの見た目)。
     transform:scale()は要素自身の中心基準で拡大縮小するだけで、
     周囲の要素の位置・レイアウトには影響しない。 */
  opacity: 0;
  transform: scale(0.92);
}

.final-cta--animate .final-cta__banner-heading {
  animation: finalCtaHeadingPop 0.6s ease-out forwards;
}

.final-cta--animate .final-cta__btn {
  /* 「ラストチャンス！」のポップ(0.6s)が終わってから0.3s置いて開始する
     = animation-delay: 0.9s。bothでdelay中も開始状態(scale(1)=現状のまま)
     を維持し、パルス前後で見た目が変化しない。 */
  animation: finalCtaBtnPulse 0.6s ease-out 0.9s both;
}

/* IntersectionObserver非対応環境、またはprefers-reduced-motion環境向けの
   フォールバック。JS側がこのクラスを付与し、「ラストチャンス！」を
   アニメーションなしで即座に通常表示にする(opacity:0のまま固まるのを防ぐ)。 */
.final-cta--reduced-motion .final-cta__banner-heading {
  opacity: 1;
  transform: none;
}

@keyframes finalCtaHeadingPop {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  60% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes finalCtaBtnPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  /* prefers-reduced-motion環境では、JSの判定を待たずCSS側でも確実に
     アニメーションを無効化する(scroll-animation.cssの既存の
     reduced-motionブロックと同じ二重の安全策)。 */
  .final-cta__banner-heading {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .final-cta__btn {
    animation: none !important;
  }
}