/**
 * LP n-2508-saitama-a 専用スタイル（他LPに影響しない）
 * - 対象テンプレート: /lp/template/t_lp_n-2508-saitama-a.php
 */

/* =========================================================
 * (1) fv_cta ajust251212 button — shine（光が走る）
 * ======================================================= */
@keyframes lp-cta-shine {
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

.fv_cta.ajust251212 .cta_btn button a {
  overflow: hidden; /* ::after を丸めた枠内に収める */
}

.fv_cta.ajust251212 .cta_btn button a::after {
  animation: 4s 0s lp-cta-shine linear infinite;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 75%
  );
  content: '';
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transform: skewX(-25deg);
  width: 100%;
  pointer-events: none;
}

/* =========================================================
 * (2) fv_cta ajust251212 button — 電話アイコン（Lottie / tel_white.json）
 * ======================================================= */
.fv_cta.ajust251212 .cta_btn button a {
  /* フォールバック（Lottieが描画されない場合でもアイコンが出る） */
  background-image: url(/lp/tel_n/images/ico_tel_w.svg),
    -webkit-linear-gradient(#dd8c87, #c0291f 10%, #c0291f 90%, #a1130d);
  background-image: url(/lp/tel_n/images/ico_tel_w.svg),
    linear-gradient(#dd8c87, #c0291f 10%, #c0291f 90%, #a1130d);
  background-position: 145px 30px, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 60px 54px, 100% 100%;
}

/* Lottie描画できたらフォールバックアイコンを消す */
.fv_cta.ajust251212 .cta_btn button a.is-lottie-ready {
  background-image: -webkit-linear-gradient(#dd8c87, #c0291f 10%, #c0291f 90%, #a1130d);
  background-image: linear-gradient(#dd8c87, #c0291f 10%, #c0291f 90%, #a1130d);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Lottie コンテナ（絶対配置） */
.lp2508-fv-tel-lottie {
  position: absolute;
  left: 145px;
  top: 30px;
  width: 60px;
  height: 54px;
  z-index: 2;
  pointer-events: none;
}

.lp2508-fv-tel-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Lottie全体を“短くブルッ”とさせる（SVG内部のtransformを壊さない） */
.lp2508-fv-tel-lottie {
  transform-origin: 50% 60%;
  animation: lp-cta-lottie-wobble 2.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes lp-cta-lottie-wobble {
  0%,
  70%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  74% {
    transform: translate3d(-0.6px, 0, 0) rotate(-2deg);
  }
  78% {
    transform: translate3d(0.6px, 0, 0) rotate(2deg);
  }
  82% {
    transform: translate3d(-0.4px, 0, 0) rotate(-1deg);
  }
  86% {
    transform: translate3d(0.4px, 0, 0) rotate(1deg);
  }
  90% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@media (max-width: 767px) {
  .fv_cta.ajust251212 .cta_btn button a {
    background-position: 8vw 6.4vw, center;
    background-size: 16vw 14.4vw, 100% 100%;
  }
  .lp2508-fv-tel-lottie {
    left: 8vw;
    top: 6.4vw;
    width: 16vw;
    height: 14.4vw;
  }
}

/* =========================================================
 * (3) fv_cta ajust251212 button — hover/active（押される表現）
 * ======================================================= */
.fv_cta.ajust251212 .cta_btn button a {
  transition: transform 160ms ease, box-shadow 160ms ease, background-image 160ms ease;
}

.fv_cta.ajust251212 .cta_btn button a:hover {
  transform: translateY(2px);
  opacity: 1 !important; /* index.css の opacity:0.7 を無効化 */
  background-image: -webkit-linear-gradient(#d97f79, #b8231b 10%, #b8231b 90%, #8f0f0a);
  background-image: linear-gradient(#d97f79, #b8231b 10%, #b8231b 90%, #8f0f0a);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.22);
}

.fv_cta.ajust251212 .cta_btn button a:active {
  transform: translateY(4px);
  opacity: 1 !important;
  background-image: -webkit-linear-gradient(#d4726c, #a91c15 10%, #a91c15 90%, #7d0d08);
  background-image: linear-gradient(#d4726c, #a91c15 10%, #a91c15 90%, #7d0d08);
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* =========================================================
 * (3b) FV 内 .btn-area（fv_2025 ajustment0805）— btn_tell (1)〜(3)、btn_request は押しのみ
 * ※ animation.css は n-2508-saitama-a のみ読込のため他LP非影響
 * ======================================================= */

/* (1) shine（cv_box と同 keyframes を流用） */
.fv_2025.ajustment0805 .wrapper .btn-area .btn_tell a {
  position: relative;
  overflow: hidden;
}

.fv_2025.ajustment0805 .wrapper .btn-area .btn_tell a::after {
  animation: 4s 0s lp-cv-tel-shine linear infinite;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 75%
  );
  content: '';
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transform: skewX(-25deg);
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

.fv_2025.ajustment0805 .wrapper .btn-area .btn_tell .free,
.fv_2025.ajustment0805 .wrapper .btn-area .btn_tell .btn_txt {
  position: relative;
  z-index: 1;
}

/* (2) ico_tel.png → Lottie（.lp2508-cv-tel-lottie を JS で挿入／下でFV用サイズ上書き） */
.fv_2025.ajustment0805 .wrapper .btn-area .btn_tell .btn_txt img {
  display: none;
}

.fv_2025.ajustment0805 .wrapper .btn-area .btn_tell .lp2508-cv-tel-lottie {
  width: 46px;
  height: 46px;
}

/* (3) 押し込み — fv_cta 赤系に揃える */
.fv_2025.ajustment0805 .wrapper .btn-area .btn_tell a {
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.fv_2025.ajustment0805 .wrapper .btn-area .btn_tell a:hover {
  opacity: 1 !important;
  transform: translateY(2px);
  background: -webkit-linear-gradient(#d97f79, #b8231b 10%, #b8231b 90%, #8f0f0a);
  background: linear-gradient(#d97f79, #b8231b 10%, #b8231b 90%, #8f0f0a);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.22);
}

.fv_2025.ajustment0805 .wrapper .btn-area .btn_tell a:active {
  opacity: 1 !important;
  transform: translateY(4px);
  background: -webkit-linear-gradient(#d4726c, #a91c15 10%, #a91c15 90%, #7d0d08);
  background: linear-gradient(#d4726c, #a91c15 10%, #a91c15 90%, #7d0d08);
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* btn_request：hover 押しのみ（cv_box btn_request に合わせた青系） */
.fv_2025.ajustment0805 .wrapper .btn-area .btn_request a {
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.fv_2025.ajustment0805 .wrapper .btn-area .btn_request a:hover {
  opacity: 1 !important;
  transform: translateY(2px);
  background: -webkit-linear-gradient(#6f79a0, #1f2f66 10%, #1f2f66 90%, #0d153d);
  background: linear-gradient(#6f79a0, #1f2f66 10%, #1f2f66 90%, #0d153d);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.22);
}

.fv_2025.ajustment0805 .wrapper .btn-area .btn_request a:active {
  opacity: 1 !important;
  transform: translateY(4px);
  background: -webkit-linear-gradient(#656f96, #192754 10%, #192754 90%, #0a1030);
  background: linear-gradient(#656f96, #192754 10%, #192754 90%, #0a1030);
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.28);
}

@media (max-width: 767px) {
  /* FV の tel アイコンは元デザインが flex 内のため、cv_box 用の absolute を打ち消し */
  .fv_2025.ajustment0805 .wrapper .btn-area .btn_tell .lp2508-cv-tel-lottie {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: 7.8vw;
    height: 7.8vw;
    max-width: 40px;
    max-height: 40px;
  }
}

/* =========================================================
 * (4) threePoint — 上→下スライド＋フェードイン
 * ======================================================= */
.threePoint ol > li {
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

.threePoint ol > li.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.threePoint ol > li:nth-child(1) {
  transition-delay: 0ms;
}
.threePoint ol > li:nth-child(2) {
  transition-delay: 120ms;
}
.threePoint ol > li:nth-child(3) {
  transition-delay: 240ms;
}

/* =========================================================
 * (5) cv_box ajust251111 — btn_tell に (1)〜(3) 相当を付与
 * ======================================================= */
@keyframes lp-cv-tel-shine {
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

.cv_box.ajust251111 .btn-wrap251111 .btn-area .btn_tell a {
  overflow: hidden; /* shine を枠内に収める */
}

.cv_box.ajust251111 .btn-wrap251111 .btn-area .btn_tell a::after {
  animation: 4s 0s lp-cv-tel-shine linear infinite;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 75%
  );
  content: '';
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transform: skewX(-25deg);
  width: 100%;
  pointer-events: none;
}

/* (2) 相当：ico_tel.png は使わず、白アイコン（Lottie: tel_white.json）を表示 */
.cv_box.ajust251111 .btn-wrap251111 .btn-area .btn_tell .btn_txt {
  position: relative;
}

.cv_box.ajust251111 .btn-wrap251111 .btn-area .btn_tell .btn_txt img {
  display: none; /* /lp/tel_n/images/20250805/ico_tel.png を非表示 */
}

/* JSで挿入するLottieコンテナ */
.lp2508-cv-tel-lottie {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: 0;
  pointer-events: none;
  transform-origin: 50% 60%;
  animation: lp-cv-tel-lottie-wobble 2.8s ease-in-out infinite;
  will-change: transform;
}

.lp2508-cv-tel-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes lp-cv-tel-lottie-wobble {
  0%,
  70%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  74% {
    transform: translate3d(-0.6px, 0, 0) rotate(-2deg);
  }
  78% {
    transform: translate3d(0.6px, 0, 0) rotate(2deg);
  }
  82% {
    transform: translate3d(-0.4px, 0, 0) rotate(-1deg);
  }
  86% {
    transform: translate3d(0.4px, 0, 0) rotate(1deg);
  }
  90% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@media (max-width: 767px) {
  /* SPは元の img と同じ absolute 前提で配置 */
  .lp2508-cv-tel-lottie {
    position: absolute;
    top: 9.6vw;
    left: 10vw;
    width: 6.1333333vw;
    height: 6.1333333vw;
    flex: none;
  }
}

/* (3) 相当：押される表現 + 既存opacity hoverを無効化 */
.cv_box.ajust251111 .btn-wrap251111 .btn-area .btn_tell a {
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.cv_box.ajust251111 .btn-wrap251111 .btn-area .btn_tell a:hover {
  opacity: 1 !important; /* index.css の opacity:0.7 を無効化 */
  transform: translateY(2px);
  background: linear-gradient(#c46f6a, #9d1c15 10%, #9d1c15 90%, #6f0b07);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.22);
}

.cv_box.ajust251111 .btn-wrap251111 .btn-area .btn_tell a:active {
  opacity: 1 !important;
  transform: translateY(4px);
  background: linear-gradient(#b8615d, #8c1711 10%, #8c1711 90%, #5f0906);
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* =========================================================
 * (6) cv_box ajust251111 — btn_request に hover押し表現のみ
 * ======================================================= */
.cv_box.ajust251111 .btn-wrap251111 .btn-area .btn_request a {
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.cv_box.ajust251111 .btn-wrap251111 .btn-area .btn_request a:hover {
  opacity: 1 !important; /* index.css の opacity:0.7 を無効化 */
  transform: translateY(2px);
  background: linear-gradient(#6f79a0, #1f2f66 10%, #1f2f66 90%, #0d153d);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.22);
}

.cv_box.ajust251111 .btn-wrap251111 .btn-area .btn_request a:active {
  opacity: 1 !important;
  transform: translateY(4px);
  background: linear-gradient(#656f96, #192754 10%, #192754 90%, #0a1030);
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* =========================================================
 * (7) sec_promise — promise を交互に左右からスライド＆フェードイン
 * ======================================================= */
.sec_promise {
  padding: 60px 0 10px;
  overflow-x: hidden;
}

.sec_promise .promise_box .promise {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 720ms ease, transform 720ms ease;
  will-change: opacity, transform;
}

.sec_promise .promise_box .promise:nth-child(even) {
  transform: translateX(28px);
}

.sec_promise .promise_box .promise.is-inview {
  opacity: 1;
  transform: translateX(0);
}

.sec_promise .promise_box .promise:nth-child(1) {
  transition-delay: 0ms;
}
.sec_promise .promise_box .promise:nth-child(2) {
  transition-delay: 80ms;
}
.sec_promise .promise_box .promise:nth-child(3) {
  transition-delay: 160ms;
}
.sec_promise .promise_box .promise:nth-child(4) {
  transition-delay: 240ms;
}
.sec_promise .promise_box .promise:nth-child(5) {
  transition-delay: 320ms;
}