@charset "UTF-8";
/* トップ（index.php）の FV 用。FV をレイヤーに分けて GPU で動かすための指定。
   構造は dev/fv-build.php が作る img/index/fv_pc.php / fv_sp.php、動きは js/fv-anim.js */


/* ---- PC：1枚の SVG を分けたレイヤー ---- */

/* グラデーション・フィルターの置き場。各レイヤーから url(#…) で参照する。
   display: none にすると参照できないブラウザがあるので、大きさ 0 で置く */
.fvl-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.fvl-stack {
  position: relative;
}

/* 先頭のレイヤーは元の SVG と同じく流れの中に置き、高さを決める。残りはその上に重ねる */
.fvl-stack > .fvl:not(:first-child),
.fvl-stack > .fvl-reveal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.fvl-stack .fvl-reveal > .fvl {
  display: block;
  width: 100%;
}


/* ---- SP：波2枚を包む枠 ---- */

.fv_sp > .fvl-reveal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* index.css の切り抜き・透明・絶対配置を外す（出現は枠の移動でやる） */
.fv_sp > .fvl-reveal > svg {
  position: relative;
  display: block;
  opacity: 1;
  clip-path: none;
}


/* ---- 共通：出現アニメーション ----
   枠を横にずらし、中身を同じだけ逆にずらすと、中身はその場のまま見える範囲だけが広がる。
   切り抜き（clip-path）を毎フレーム変えると中身の描き直しになるが、これなら移動だけで済む */

.fvl-reveal {
  overflow: hidden;
}

/* JS が動く前に見えてしまわないよう、最初から隠しておく */
.fvl-reveal-front {
  transform: translateX(100%);
}
.fvl-reveal-front > svg {
  transform: translateX(-100%);
}
.fvl-reveal-back {
  opacity: 0;
  transform: translateX(-100%);
}
.fvl-reveal-back > svg {
  transform: translateX(100%);
}

/* 動かす要素を先に GPU のレイヤーにしておく（アニメーションが終わったら JS が外す） */
.fvl,
.fvl-reveal,
.fvl-reveal > svg,
.fv_sp > svg {
  will-change: transform, opacity;
}