/* =========================================================================
   /top_redesign1/（page-id 2781）スクロール連動フェードイン
   （top-redesign1-reveal.js と対。ショップ /shop_redesign1/ と同じ演出）
   -------------------------------------------------------------------------
   ◆ 初期の「隠し」は body.reveal-ready が付いている間だけ有効。
     JS が付与するまでは隠れない＝JS失敗時もコンテンツは必ず表示される（安全）。
   ◆ data-reveal の値で出方を変える: up=下から / down=上から / in=その場 /
     zoom=拡大しながら / diag=右下から左上へ斜めに。
   ◆ 速さ1.8s・移動量80px（ショップと同値で統一）。
   ========================================================================= */
.page-id-2781.reveal-ready [data-reveal] {
  opacity: 0;
  transition: opacity 1.8s ease,
              transform 1.8s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.page-id-2781.reveal-ready [data-reveal="up"]   { transform: translateY(80px); }
.page-id-2781.reveal-ready [data-reveal="down"] { transform: translateY(-64px); }
.page-id-2781.reveal-ready [data-reveal="in"]   { transform: none; }
.page-id-2781.reveal-ready [data-reveal="zoom"] { transform: scale(.95); }
.page-id-2781.reveal-ready [data-reveal="diag"] { transform: translate(80px, 80px); } /* 右下→左上 */

/* 表示状態（定位置・不透明に） */
.page-id-2781.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* モバイルでは横移動系（斜めdiag）を縦移動に置き換え、横スクロール（はみ出し）を防ぐ。 */
@media (max-width: 781px) {
  .page-id-2781.reveal-ready [data-reveal="diag"] {
    transform: translateY(80px);
  }
}

/* モーション軽減設定では一切動かさず即表示 */
@media (prefers-reduced-motion: reduce) {
  .page-id-2781.reveal-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}