/* ベース：非表示 */
.tomodal { position: fixed; inset: 0; display: none; z-index: 9999; }
.tomodal.is-open { display: block; }

/* 背景(黒半透明) */
.tomodal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
}

/* 中身(白背景) */


.tomodal__inner {
  position: fixed;
  /* ← absolute ではなく fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 1;
  box-sizing: border-box;

  width: min(720px, 92vw);
  background: #fff;
  color: #111;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  padding: 30px;
}

/* 右上× */
.tomodal__close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: none; font-size: 28px; line-height: 1;
  cursor: pointer;
}

.tomodal__body {
  text-align: center;
}
/* テキスト */
.tomodal__title { margin: 0 0 8px; font-size: 20px;margin-top: 2em; }
.tomodal__text { margin: 0 0 16px; line-height: 1.7; }

/* バナー */
.tomodal__banner img { width: 100%; height: auto; display: block; }

/* 開閉のちょいアニメ */
.tomodal.is-open .tomodal__inner { animation: tomodalIn .18s ease-out; }
@keyframes tomodalIn { from { transform: translateY(8px); opacity: .01; } to { transform: translateY(0); opacity: 1; } }

/* モーダル表示中はスクロール固定 */
html.tomodal-lock, body.tomodal-lock { overflow: hidden; }


/* ふわっと登場アニメ */
@keyframes fadeZoomIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* モーダルが開いた時にアニメ適用 */
.tomodal.is-open .tomodal__inner {
  animation: fadeZoomIn 0.25s ease-out forwards;
}