/* モーダル背景（最初は透明・非表示） */
.entry-modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;

  /* --- ここを再確認 --- */
  z-index: 99999; /* 他のどの要素（ヘッダーなど）よりも大きく */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* 非表示の間は後ろを触れるようにする */

  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 表示された時の設定 */
.entry-modal-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* 表示されたらモーダルがクリックを奪い取る */
}

/* モーダルの中身 */
.entry-modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  max-width: 500px;
  width: 90%;
  transform: translateY(20px);
  transition: transform 0.5s ease;
}

/* 表示された時に少し持ち上げる */
.entry-modal-overlay.show .entry-modal-content {
  transform: translateY(0);
}

/* --- モーダル内のボタン共通スタイル --- */
.entry-modal-btns {
  margin-top: 30px;
  display: flex;
  gap: 15px;
  /* ボタン同士の隙間 */
  justify-content: center;
}

.entry-modal-btns button {
  /* 改行を絶対に禁止する */
  white-space: nowrap;

  /* 横幅を中身に合わせつつ、最低限の幅も確保 */
  width: auto;
  min-width: 160px;
  /* 140から160へ少し広げました */

  /* 左右の余白を多めに取ってゆとりを持たせる */
  padding: 12px 25px;

  font-size: 16px;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;

  /* ボタン内の文字を中央揃え */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ここからボタン */

/* --- 「はい（入室する）」ボタン：目立つメインカラー --- */
.btn-primary {
  background: linear-gradient(135deg, #ef69d6, #ea1ace);
  /* 綺麗なグラデーション */
  color: #fff;
  box-shadow: 0 4px 15px rgba(212, 69, 205, 0.3);
  /* 影で浮かせる */
}

.btn-primary:hover {
  transform: translateY(-2px);
  /* 少し浮き上がる */
  box-shadow: 0 6px 20px rgba(226, 74, 226, 0.4);
  filter: brightness(1.1);
  /* 少し明るくする */
}

/* --- 「いいえ（退室する）」ボタン：控えめなサブカラー --- */
.btn-secondary {
  background-color: #f0f2f5;
  color: #666;
  border: 1px solid #ddd !important;
  /* 枠線をうっすら付ける */
}

.btn-secondary:hover {
  background-color: #e4e6e9;
  color: #333;
}

/* --- 押し込みアニメーション (共通) --- */
.entry-modal-btns button:active {
  transform: scale(0.95);
  /* クリックした瞬間にギュッと沈む */
}

/* ==========================================
  スマホ用レスポンシブ設定 (画面幅480px以下)
   ========================================== */
@media (max-width: 480px) {

  /* モーダル内の余白を少し狭くしてコンテンツを確保 */
  .entry-modal-content {
    padding: 25px 20px;
    width: 95%;
    /* 左右に少し余裕を持たせる */
  }

  .entry-modal-content h2 {
    font-size: 20px;
    /* 見出しを少し小さく */
    margin-bottom: 15px;
  }

  .entry-modal-content p {
    font-size: 14px;
    /* テキストを読みやすいサイズに */
  }

  /* ボタンを縦並びにする */
  .entry-modal-btns {
    flex-direction: column;
    gap: 12px;
    /* 縦の隙間 */
    margin-top: 20px;
  }

  /* ボタンを横幅いっぱいにする */
  .entry-modal-btns button {
    width: 100%;
    min-width: 0;
    /* min-widthを解除して100%を優先させる */
    padding: 15px 0;
    /* 縦幅を少し太くして押しやすく */
    font-size: 15px;
  }

  /* スマホではホバーの浮き上がり演出をオフにする（タップ時の誤動作防止） */
  .btn-primary:hover {
    transform: none;
  }
}