/* =========================
   modal_window.css (complete)
   スマホ／タブレット時：
   - 背景 prologue.jpg を固定子要素 <img> で全面固定
   - モーダル中はページスクロールをロック
   ========================= */

/* --- ベース: モーダルの前後関係を明確に --- */
.modal {
  position: fixed;
  z-index: 99; /* 背景(#new)より前面 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 表示/非表示の切り替え（JSでも制御します） */
.modal[aria-hidden="true"] { display: none; }
.modal[aria-hidden="false"] { display: block; }

/* --- スクロールロック（モーダル表示中に付与） --- */
@media (max-width: 1200px) {
  html.no-scroll,
  body.no-scroll {
    position: fixed;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/* --- モバイル／タブレット専用の全画面オーバーレイ #new --- */
@media screen and (max-width: 1200px) {
  /* 背景オーバーレイ本体 */
  #new {
    position: fixed !important;
    inset: 0 !important;
    z-index: 98 !important;           /* .modal のひとつ下 */
    width: 100vw !important;

    /* ビューポート伸縮対策：フォールバック→動的→大きい方の順で併記 */
    height: 100vh !important;
    height: 100dvh !important;
    height: 100lvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    min-height: 100lvh !important;

    background: none !important;       /* 背景は子要素の <img> に任せる */
    overflow: hidden !important;
    overscroll-behavior: none !important;
    pointer-events: auto !important;   /* クリックを拾えるように */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* prologue.jpg を“完全固定”で全面に貼る子要素 */
  #new .overlay-bg {
    position: fixed !important;   /* スクロール無関係に完全固定 */
    inset: 0 !important;
    width: 100vw !important;

    /* 端末差吸収の三連指定 */
    height: 100lvh !important;
    height: 100dvh !important;
    height: 100vh !important;

    object-fit: cover !important; /* 常に全画面カバー */
    object-position: center center !important;
    pointer-events: none !important; /* 背景なので操作不可に */
    transform: translateZ(0);        /* モバイルでの描画最適化 */
  }
}

/* --- PC は従来の挙動（必要なら調整） --- */
@media screen and (min-width: 1201px) {
  #new {
    position: fixed;
    inset: 0;
    z-index: 98;
    width: 100vw;
    height: 100vh;
    background: none;
    overflow: hidden;
  }
  #new .overlay-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
  }
}

/* --- 任意：オーバーレイのフェード演出用 --- */
#new,
#new .overlay-bg {
  transition: opacity 200ms ease;
}
#new.is-hidden,
#new.is-hidden .overlay-bg {
  opacity: 0;
}

/* --- YESとNOボタンの横並び配置 --- */
.modal {
  text-align: center;
}

/* PC用のボタン配置 */
.modal > a#button_in,
.modal > a#button_out {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px; /* 左右の余白 */
}

/* スマホ用のボタン配置 */
#modal_warning {
  position: relative;
  text-align: center;
}

#modal_warning a#button_in,
#modal_warning a#button_out {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px; /* スマホは余白を小さめに */
}

/* ボタン画像のサイズ調整（必要に応じて） */
.modal img {
  display: block;
  max-width: 100%;
  height: auto;
}

.modal > a > img,
#modal_warning a > img {
  display: inline-block !important; /* display: block; を確実に上書きする */
  vertical-align: middle; /* 垂直方向の中央揃えを保証する */
}

/* --- ボタンコンテナの幅を確保する修正 --- */
.modal {
  width: 90%;          /* 画面幅に対して90%の幅を持たせる */
  max-width: 900px !important;    /* PCなど画面が広い場合でも、最大幅を500pxに制限 */
  box-sizing: border-box; /* 内側の余白や枠線を含めて幅を計算する */
}

/* --- CAUTION画像下に重なるYES/NO配置 --- */
#modal_warning {
  position: relative;
  width: 100%;
  text-align: center;
}

/* CAUTION画像 */
#modal_warning img.warning_smart {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* YES/NOボタンをCAUTION画像の下端に重ねる */
#modal_warning .button_container {
  position: absolute;
  bottom: 15%; /* 少し画像からはみ出す位置に（例: 画像下端から5%外側） */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px; /* ボタンの間隔 */
  z-index: 2;
}

/* ボタン本体 */
#modal_warning .button_container a {
  display: inline-block;
}

/* ボタン画像 */
#modal_warning .button_container a img {
  display: block;
  width: 400px !important;
  height: auto;
}

/* --- スマホではボタンが大きすぎないよう調整 --- */
@media (max-width: 1200px) {
  #modal_warning .button_container a img {
    width: 400px !important;
  }
  #modal_warning .button_container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* ボタンの間隔 */
    z-index: 2;
  }
}

#button_in,
#modal_warning #button_in,
#modal_warning .close_modal {
  cursor: pointer;
}