/* ============================================================================
   トップ刷新案①（/top_redesign1/ ・page-id 2781）水面さざ波 演出CSS
   ----------------------------------------------------------------------------
   役割は2つだけ:
     1. JSが生成する canvas を全画面固定・操作透過で最背面に敷く
     2. サイト本体ラッパー(.wp-site-blocks)を前面に出し、波をコンテンツの
        「背面」に確実に回す（page-id 限定なので他ページに影響しない）
   見た目の調整（色・速さ・密度）は js 側の CONFIG で行う。
   ============================================================================ */

/* JSが付与するクラス。全画面固定・クリックを一切邪魔しない */
.mcl-ripple-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* サイト本体を波の前面へ（対象ページだけ）。
   .wp-site-blocks に重ね順の基準を与え、canvas(z-index:0) を背面に回す。
   /top_redesign1/(2781) と /shop_redesign1/(2784) の両方で有効。 */
.page-id-2781 .wp-site-blocks,
.page-id-2784 .wp-site-blocks {
  position: relative;
  z-index: 1;
}

/* --- /shop_redesign1/(2784) だけ「前面オーバーレイ方式」 ---
   ショップ案①はヒーロー画像・商品カード等が不透明背景で敷き詰められており、
   背面(z-index:0)の波はほぼ全域で隠れてしまう。そこでこのページに限り、
   canvas を本体(.wp-site-blocks=z-index:1)より前面(z-index:2)へ持ち上げ、
   コンテンツの上にうっすら波を重ねる。pointer-events:none のまま操作は透過。
   トップ(2781)は背面のままなので、この指定はかからない。 */
.page-id-2784 .mcl-ripple-canvas {
  z-index: 2;
}