/* ==========================================================
   CONTACT 導線ボタン（ページ下部「お問い合わせ →」）のホバー演出
   ========================================================== */
/* --- CONTACT（お問い合わせ導線） --- */
.contact > a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  transition: box-shadow 0.45s ease;
}
.contact > a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #141414;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact > a .cta-arrow {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- マウス操作できる端末のみ --- */
@media (hover: hover) {
  .contact > a:hover::before {
    transform: scaleX(1);
  }
  .contact > a:hover .cta-arrow {
    transform: translateX(9px);
  }
}

/* --- CONTACT（お問い合わせ導線） --- */
.contact > a:focus-visible::before {
  transform: scaleX(1);
}
.contact > a:focus-visible .cta-arrow {
  transform: translateX(9px);
}

/* --- OSで「動きを減らす」設定にしている人向け：アニメーションを止める --- */
@media (prefers-reduced-motion: reduce) {
  .contact > a::before,
  .contact > a .cta-arrow {
    transition: none;
  }
}