@charset "utf-8";
/* ============================================================
   ファーストビューの質感エフェクト（PC / SP 共通）

   ロールバック方法：
     index.html の <link rel="stylesheet" href="css/fv-effects.css..."> を
     1行削除すれば、レイアウトは一切変えずに元の見た目へ戻る。
     （このファイルは位置・サイズ・色を変更せず、影と動きだけを足している）
   ============================================================ */

/* ------------------------------------------------------------
   1. 金バッジの反射（金属のハイライトが斜めに一度だけ横切る）

      面全体を明滅させると点滅に見えて安っぽくなるため、
      斜めのハイライトを 14秒に1度・1.5秒かけてゆっくり通過させる。
      速いと「チカッ」と主張しすぎるので、幅を広く・薄く・遅くして
      金属面を光がなでる程度にとどめる。
      ハイライトはバッジの形の内側だけに出す
      （PCは円形なので border-radius、SPは画像の形で mask する）。
   ------------------------------------------------------------ */
@keyframes kbSweep {
  0% {
    transform: translateX(-190%);
    opacity: 0;
  }
  1.5% {
    opacity: 1;
  }
  9.5% {
    opacity: 1;
  }
  11% {
    transform: translateX(190%);
    opacity: 0;
  }
  100% {
    transform: translateX(190%);
    opacity: 0;
  }
}

/* --- PC：バッジ3つ（円形） --- */
.mv__badge {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: 50%;
  overflow: hidden;
}
.mv__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  animation: kbSweep 14s linear infinite;
  will-change: transform;
}
.mv__badges .mv__badge:nth-child(2)::after {
  animation-delay: 1.2s;
}
.mv__badges .mv__badge:nth-child(3)::after {
  animation-delay: 2.4s;
}

/* --- SP：3つが1枚の画像なので、画像の形で切り抜いて通す --- */
.mv__before__txt {
  position: relative;
}
.mv__before__txt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 36%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 64%
  );
  -webkit-mask-image: url(../img/mv/txt_sp.png);
  mask-image: url(../img/mv/txt_sp.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  animation: kbSweep 14s linear infinite;
  will-change: transform;
}

/* ------------------------------------------------------------
   2. 入場アニメーション（レイアウトを動かさない opacity + translateY）

      ここのPNGは非インターレースなので、素直に置くと
      ダウンロードしながら上から順に描画され「半分だけ出た絵」が見える。
      さらに画像ごとに届く時間が違うので、バラバラと現れて散らかる。

      そこで、ファーストビューの画像が揃うまでは何も出さず、
      揃った時点で全部を同じタイミング・同じ動きで一度に出す。
      待機クラスは head の script が付けるので、JSが動かない環境では
      最初から普通に表示される（隠れっぱなしにはならない）。
   ------------------------------------------------------------ */
@keyframes kbRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 読み込み中。描きかけを見せない */
.kb-fv-wait .mv__before__tit,
.kb-fv-wait .mv__badges,
.kb-fv-wait .mv__before__img,
.kb-fv-wait #postalFormSectionLP,
.kb-fv-wait .mv__kw,
.kb-fv-wait .mv__after,
.kb-fv-wait .mv__mock {
  opacity: 0;
  animation: none !important;
}

/* 揃ったので出す */
.kb-fv-ready .mv__before__tit,
.kb-fv-ready .mv__badges,
.kb-fv-ready .mv__before__img,
.kb-fv-ready #postalFormSectionLP,
.kb-fv-ready .mv__kw,
.kb-fv-ready .mv__after,
.kb-fv-ready .mv__mock {
  animation: kbRise 0.9s cubic-bezier(0.22, 0.85, 0.28, 1) both;
}

/* ------------------------------------------------------------
   3. CTAボタンの立体感と押し心地

      影を明滅させると浮いて見えるので、光り方は「面の質感」で作る。
      上からの光・下の締め色・縁のハイライトで厚みを出したうえで、
      8秒に1度だけ、ゆっくりツヤが横切る。
      inline style の background より強くする必要があるため !important。
   ------------------------------------------------------------ */
#searchButton {
  position: relative;
  overflow: hidden;
  /* 上が明るく下が締まる面。単色ベタ塗りにしない */
  background: linear-gradient(180deg, #4d8ffa 0%, #2f6fee 46%, #1d4ed8 100%) !important;
  /* 1行目=天面のハイライト / 2行目=底面の陰り / 3行目=接地影 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(12, 45, 120, 0.32),
    0 8px 18px -8px rgba(29, 78, 216, 0.6);
  text-shadow: 0 1px 2px rgba(12, 45, 120, 0.3);
}

/* ツヤ。ボタンの角丸の内側だけを通す（親の overflow: hidden で切る） */
#searchButton::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0) 66%
  );
  transform: translateX(-170%);
  animation: kbCtaShine 8s linear infinite;
  will-change: transform;
}

@keyframes kbCtaShine {
  0% {
    transform: translateX(-170%);
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  11% {
    opacity: 1;
  }
  13% {
    transform: translateX(170%);
    opacity: 0;
  }
  100% {
    transform: translateX(170%);
    opacity: 0;
  }
}

#searchButton:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(12, 45, 120, 0.32),
    0 14px 26px -10px rgba(29, 78, 216, 0.8);
}
/* 押した瞬間は天面の光を消して沈ませる */
#searchButton:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(12, 45, 120, 0.38), 0 3px 8px -6px rgba(29, 78, 216, 0.7);
}

/* ------------------------------------------------------------
   4. キーワードのチップ
      ・「他の質問を見る」で開くモーダルの中のボタン
      ・「人気キーワードから探す」の中のボタン

      灰色のベタ塗り＋薄い影だけで平坦なので、
      LPの他のチップと同じ丸みに揃えたうえで面に光と厚みを足す。
      padding と line-height は触らないので、ボタンの大きさと
      並び（折り返し位置）は今のまま変わらない。
   ------------------------------------------------------------ */
.modal .modal__content__lists li button,
.modal .modal__content__lists li a,
.f-search .f-search__item__link__lists li button,
.f-search .f-search__item__link__lists li a {
  border-radius: 9999px;
  border: 1px solid #dbe3ee;
  /* 上が明るく下が締まる面。単色ベタ塗りにしない */
  background: linear-gradient(180deg, #ffffff 0%, #f2f6fb 100%);
  /* 1行目=天面のハイライト / 2行目=接地の締め / 3行目=浮きの影 */
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(20, 45, 90, 0.06),
    0 6px 14px -8px rgba(20, 45, 90, 0.38);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease,
    box-shadow 0.18s ease, transform 0.18s ease;
}

/* 触れると青みに寄って持ち上がる。押せる場所だと分かるようにする */
.modal .modal__content__lists li button:hover,
.modal .modal__content__lists li a:hover,
.f-search .f-search__item__link__lists li button:hover,
.f-search .f-search__item__link__lists li a:hover {
  color: #1d4ed8;
  border-color: #93c5fd;
  background: linear-gradient(180deg, #ffffff 0%, #e9f1ff 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(20, 45, 90, 0.08),
    0 14px 22px -10px rgba(29, 78, 216, 0.55);
}

/* 押した瞬間は天面の光を消して沈ませる */
.modal .modal__content__lists li button:active,
.modal .modal__content__lists li a:active,
.f-search .f-search__item__link__lists li button:active,
.f-search .f-search__item__link__lists li a:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(20, 45, 90, 0.18);
}

/* キーボード操作でも今どこを選んでいるか分かるようにする */
.modal .modal__content__lists li button:focus-visible,
.modal .modal__content__lists li a:focus-visible,
.f-search .f-search__item__link__lists li button:focus-visible,
.f-search .f-search__item__link__lists li a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   5. 「地元で人気の業者を探す」の青いボタン

      中身はPNG画像1枚なので、面そのものは描き替えられない。
      そこで画像の上に「上からの光」と「下の締め色」を重ねて
      平らな板ではなく丸みのある立体に見せる。
      画像はピル型で枠いっぱいに入っているので、
      角丸で切り抜けば光は画像の形の内側だけに乗る。
      画像・padding・並びは触らないので大きさは変わらない。
   ------------------------------------------------------------ */
.f-search .f-search__item__btn__lists li {
  /* 1行目=接地の締め / 2行目=浮きの影。元の1枚影より奥行きが出る */
  box-shadow: 0 2px 4px rgba(0, 85, 167, 0.18), 0 14px 24px -10px rgba(0, 85, 167, 0.45);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.f-search .f-search__item__btn__lists li button {
  position: relative;
  overflow: hidden;
  border-radius: 10rem;
  /* 縁のハイライト。ここが無いと画像が背景に沈んで見える */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(3, 47, 116, 0.22);
}

/* 上の光と下の陰り。画像の色は変えずに丸みだけを足す */
.f-search .f-search__item__btn__lists li button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.06) 38%,
    rgba(255, 255, 255, 0) 55%,
    rgba(3, 47, 116, 0.14) 100%
  );
}

/* ツヤは常時光らせると3つ並んでうるさいので、触れた時だけ1回通す */
.f-search .f-search__item__btn__lists li button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 36%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 64%
  );
  transform: translateX(-170%);
  opacity: 0;
}

.f-search .f-search__item__btn__lists li:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 85, 167, 0.2), 0 20px 32px -12px rgba(0, 85, 167, 0.6);
}
.f-search .f-search__item__btn__lists li:hover button::after {
  animation: kbBtnShine 0.85s ease-out forwards;
}
@keyframes kbBtnShine {
  0% {
    transform: translateX(-170%);
    opacity: 1;
  }
  100% {
    transform: translateX(170%);
    opacity: 0;
  }
}

/* 押した瞬間は天面の光を消して沈ませる */
.f-search .f-search__item__btn__lists li:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(0, 85, 167, 0.28);
}
.f-search .f-search__item__btn__lists li button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   6. SPファーストビューの紹介アニメーション

      GIFのimgから動画に変えたので、imgと同じ収まり方に揃える。
      幅・高さ・比率は元のGIFと同じなので、位置もサイズも変わらない。
   ------------------------------------------------------------ */
.mv__after__img video {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   動きを減らす設定の端末では全て無効化
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mv__badge::after,
  .mv__before__txt::after,
  .mv__badges,
  .mv__before__img,
  #postalFormSectionLP,
  .mv__kw,
  .mv__after,
  .mv__mock,
  .mv__before__tit,
  #searchButton::after {
    animation: none !important;
  }
  /* 動きを止める設定でも、出てこないままにはしない */
  .kb-fv-ready .mv__before__tit,
  .kb-fv-ready .mv__badges,
  .kb-fv-ready .mv__before__img,
  .kb-fv-ready #postalFormSectionLP,
  .kb-fv-ready .mv__kw,
  .kb-fv-ready .mv__after,
  .kb-fv-ready .mv__mock {
    opacity: 1;
  }
  .modal .modal__content__lists li button,
  .modal .modal__content__lists li a,
  .f-search .f-search__item__link__lists li button,
  .f-search .f-search__item__link__lists li a,
  .f-search .f-search__item__btn__lists li {
    transition: none;
  }
  .modal .modal__content__lists li button:hover,
  .modal .modal__content__lists li a:hover,
  .modal .modal__content__lists li button:active,
  .modal .modal__content__lists li a:active,
  .f-search .f-search__item__link__lists li button:hover,
  .f-search .f-search__item__link__lists li a:hover,
  .f-search .f-search__item__link__lists li button:active,
  .f-search .f-search__item__link__lists li a:active,
  .f-search .f-search__item__btn__lists li:hover,
  .f-search .f-search__item__btn__lists li:active {
    transform: none;
  }
  .f-search .f-search__item__btn__lists li:hover button::after {
    animation: none;
  }
}