お世話になっております。

 

サイトのトップページ（ https://zuka-no-susume.com/ ）で、2つのカレンダーを表示しています。

①現役タカラジェンヌバースデーカレンダー
②組替え＆退団スケジュール

 

どちらのカレンダーでも、イベント名をクリックするとイベント詳細をポップアップ（モーダル）で表示する仕様にしています。

---

【現象】

ポップアップ以外の領域をオーバーレイしているのですが、SWELLのフルワイドブロックが干渉して意図通りに表示できない問題が発生しています。

 

・イベントをクリックしてポップアップを表示 → そのまま画面をスクロールすると、
フルワイド境界の波形状の部分がポップアップより前面に表示され、ポップアップが隠れてしまう。

・特に「①現役タカラジェンヌバースデーカレンダー」では、
下方のフルワイドブロック（「②組替え＆退団スケジュール」があるエリア）に載っている文字や要素の背面にポップアップが隠れてしまう。

 

意図としては「ポップアップを最前面に表示させ、画面スクロールしてもポップアップが常に最前面にくる」ようにしたいです。

---

【試したこと】

① フルワイドブロックの `z-index` を下げる
（カスタマイザー＞追加CSS に記載）

```css
 .fullwide-wave::before,
 .fullwide-wave::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: url('wave.svg') no-repeat;
  background-size: cover;
  z-index: 1; /* 下げても効果なし */
}

 

② ポップアップ（モーダル）の z-index を大きくする

```css
 #scheduleModal {
  background: rgba(0,0,0,0.6);
  z-index: 99999; /* SWELLより前面に出したい */
 }

 

【補足】

・使用中のSWELLバージョン：2.15.0（最新）
・WordPressバージョン：6.7.3
・ポップアップは自作（JavaScript + CSS）です。
・問題はPC・スマホの両方で発生しています。

 

もし解決方法やヒントをご存じでしたら、ご教示いただけますと幸いです。
どうぞよろしくお願いいたします。