/* J's様 公式サイト FV（2026-10-24）
   旧 Slider Revolution 6.6.16（rev_slider_1_1 / 3_2）の動きを再現する軽量版。仕様＝official/_reference/fv_current/FV_SPEC.md
   ・写真3枚・各スライドは 10秒で 100%→120% のズーム（panzoom d:10000 ss:100% se:120%）
   ・切り替え：1枚目へ＝17×17 のピースが端から集まる（f:edges）／2・3枚目へ＝3×3 のタイル（f:center）。描画は fv.js の canvas
   ・文字：見出し＝1秒で現れる（power4.inOut・0.3秒待ち）／筆記体＝横1.5倍から1.5秒で縮みながら現れる（sine.inOut） */
/* 2026-10-29 高さは CSS で最初から決める（以前は fv.js が「画面の高さ−ヘッダーの高さ」を計算して入れていた。
   読み込み途中はヘッダーが背高に測られ、FV が 320px に縮んでから全画面に戻る＝開いた直後にガクッと動き、CLS 0.278 だった）
   ヘッダー＝1024px 以下 64px／それより広い 112px（サイトの CSS の切り替え点）。スマホは svh（アドレスバーが出ている時の高さ）＝スクロールで伸び縮みしない */
.jsfv { position: relative; width: 100%; height: calc(100vh - 64px); height: calc(100svh - 64px); min-height: 320px; overflow: hidden; background: #000; }
@media (min-width: 1025px) { .jsfv { height: calc(100vh - 112px); } }
.jsfv__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.jsfv__slide.is-active { opacity: 1; visibility: visible; }
.jsfv__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 0%;
  transform: scale(1); transform-origin: 70% 0%; will-change: transform; }
.jsfv__slide.is-active img { animation: jsfvZoom 10s linear forwards; }
.jsfv__slide--center img { object-position: 50% 50%; transform-origin: 50% 50%; }
@keyframes jsfvZoom { from { transform: scale(1); } to { transform: scale(1.2); } }
.jsfv__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

.jsfv__cap { position: absolute; z-index: 4; left: 50px; right: 20px; top: 50%; transform: translateY(-50%); color: #fff;
  text-shadow: 0 0 24px rgba(0, 0, 0, .25); pointer-events: none; }
.jsfv__slide--center .jsfv__cap { left: 20px; text-align: center; }
.jsfv__t { margin: 0; font-family: 'Inter', sans-serif; font-weight: 100; font-size: 110px; line-height: 110px; letter-spacing: -6px;
  opacity: 0; }
.jsfv__t--pop { font-family: 'Poppins', sans-serif; font-size: 130px; line-height: 110px; letter-spacing: 0; }
.jsfv__s { margin: 0; font-family: 'Petit Formal Script', cursive; font-size: 65px; line-height: 90px; opacity: 0;
  transform: scaleX(1.5); transform-origin: 0 50%; }
.jsfv__s--l { font-size: 69px; line-height: 100px; }
.jsfv__slide--center .jsfv__s { transform-origin: 50% 50%; }
.jsfv__slide.is-shown .jsfv__t { animation: jsfvT 1s cubic-bezier(.77, 0, .18, 1) .3s forwards; }
.jsfv__slide.is-shown .jsfv__s { animation: jsfvS 1.5s cubic-bezier(.37, 0, .63, 1) .3s forwards; }
.jsfv__slide.is-leaving .jsfv__t, .jsfv__slide.is-leaving .jsfv__s { animation: jsfvOut .3s ease forwards; }
@keyframes jsfvT { from { opacity: 0; } to { opacity: 1; } }
@keyframes jsfvS { from { opacity: 0; transform: scaleX(1.5); } to { opacity: 1; transform: scaleX(1); } }
@keyframes jsfvOut { to { opacity: 0; } }

@media (max-width: 767px) {
  .jsfv__cap { left: 20px; }
  .jsfv__t { font-size: 41px; line-height: 41px; letter-spacing: -1px; }
  .jsfv__t--pop { font-size: 49px; line-height: 41px; letter-spacing: 0; }
  .jsfv__s { font-size: 24px; line-height: 34px; }
  .jsfv__s--l { font-size: 25px; line-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .jsfv__slide.is-active img { animation: none; }
  .jsfv__slide.is-shown .jsfv__t, .jsfv__slide.is-shown .jsfv__s { animation-duration: .01s; }
}