/* ============================================================
   FV → ワールドマップ の切り替え（2026-08-20 / 堤様ご要望反映）

   ・1枚目（FV）は普通に上へスクロールする（貼り付けない）
   ・2枚目（ワールドマップ）とは重ねない ＝ 位置・余白は一切いじらない
   ・上へスワイプすると 2枚目の定位置まで一気に送り、そこで安定させる
   ・明確に下へ戻したときだけ、滑らかに1枚目へ戻す

   ★opacity は「1枚目の画像そのもの」にだけかける。
     セクションやページ全体にかけると、背景や枠まで一緒に薄まってしまう。

   ★ページのカスタムCSSではなく子テーマに置いている理由:
     XServer の WAF が、JavaScript を含む管理画面の保存POSTを
     ブロックすることがあり、貼り付けが保存されない事象が起きたため。

   ★セレクタに #body_wrap を挟んで詳細度を上げている。
     ページのカスタムCSSは <head> にインラインで後から出力されるため、
     同詳細度だと負けてしまう。

   .icw-fvfade / .icw-maplive は JS が <html> に付ける。
   --icw-fv-op も JS が入れる。JSが動かない環境では何も起きない。
   ============================================================ */

/* 1枚目の「画像」と、その上のスクロール誘導だけを薄くする。
   セクション（枠）やページ全体には opacity をかけない。 */
.icw-fvfade #body_wrap .icw-fv .wp-block-image img,
.icw-fvfade #body_wrap .icw-fv .icw-fvscroll {
  opacity: var(--icw-fv-op, 1);
  will-change: opacity;
}

/* 下地の水色は、通常は画像が全面を覆っているので見えない。
   画像だけを薄くすると下地だけが残ってしまうため、下地を透明にしておく。
   （opacity で薄めているのではなく、背景色の指定を外しているだけ） */
.icw-fvfade #body_wrap .icw-fv {
  background-color: transparent !important;
}

/* 画像が消えきったら、見えない画像が操作を受け取らないようにする */
.icw-fvfade #body_wrap .icw-fv.icw-fv-off {
  pointer-events: none;
}

/* 2枚目が完全に表示されるまで、マップ側のリンク（看板）を反応させない。
   スワイプの指を離した拍子に看板が押される事故を防ぐ。 */
.icw-fvfade:not(.icw-maplive) #body_wrap .icw-sec-map {
  pointer-events: none;
}

/* 「上へスクロール」の矢印を上向きにする。
   元は下向き（rotate 45deg）で、文言と向きが逆になっていた。
   アニメの有無に関わらず直したいので .icw-fvfade は付けない。 */
#body_wrap .icw-fvscroll-txt::after {
  transform: rotate(-135deg);
  vertical-align: -2px;
}

/* ------------------------------------------------------------
   FV画像（PC用・スマホ用）の出し分けを、ここで完全に決める。

   ブロック側の「表示する端末」設定はあてにしない。理由は
   マップ（icw-top-map.css）と同じで、
   　・端末設定は枠と画像で別々にかかり、片方だけ残ると崩れる
   　・本文と一緒に保存されるため、古い編集画面から更新されると巻き戻る
   ため。ここで強制的に出し分けておけば、本文が巻き戻っても崩れない。

   FV内の画像ブロックの見分け方:
     .icw-fv-pc               … 横長（PC・タブレット用）
     .sp_only（icw-fv-sp以外） … 縦長（スマホ用・現行）
     .icw-fv-sp               … 旧スマホ画像。常に非表示にする

   ★スマホ用ブロックに icw-fv-sp を付けないこと。
     付けると「旧画像」とみなされて非表示になる。
   ------------------------------------------------------------ */
/* 旧スマホ画像は、本文に残っていても常に出さない */
#body_wrap .icw-fv .icw-fv-sp { display: none !important; }

/* スマホ（≤599px）… 縦長のスマホ用だけ出す */
@media (max-width: 599px) {
  #body_wrap .icw-fv .icw-fv-pc { display: none !important; }
  #body_wrap .icw-fv .sp_only:not(.icw-fv-sp) { display: block !important; }
}
/* タブレット・PC（≥600px）… 横長のPC用だけ出す */
@media (min-width: 600px) {
  #body_wrap .icw-fv .sp_only { display: none !important; }
  #body_wrap .icw-fv .icw-fv-pc { display: block !important; }
}

/* ------------------------------------------------------------
   スマホ（≤599px）でのスクロール誘導の位置
   ページのカスタムCSS側は bottom:30px。スマホだけ 10px に下げる。
   ブレークポイントは、FV画像をSP用に切り替えている 599px に合わせた。
   ページのカスタムCSSは <head> に後から出力されるため、
   #body_wrap を付けて詳細度で勝たせている。
   ------------------------------------------------------------ */
@media (max-width: 599px) {
  #body_wrap .icw-fvscroll {
    bottom: 10px;
  }
}