*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:     #e60712;
  --red-dk:  #a00008;
  --red-lt:  #ff3a44;
  --silver:  #c8c8d0;
  --silver-lt:#f0f0f4;
  --silver-dk:#888898;
  --black:   #0d0000;
  --white:   #ffffff;
}

body {
  background: #e60712;
  font-family: 'Noto Serif JP', serif;
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── ページ全体ラッパー ── */
.page-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .page-wrap { max-width: 700px; }
}

/* ════════════════════════════
   1. メインビジュアル
════════════════════════════ */
.mv img {
  width: 100%;
  height: auto;
  display: block;
}

/* ════════════════════════════
   2. ボタン＋注意書きエリア
════════════════════════════ */
.btn-section {
  width:100%;
  background:#e60712;
  padding: 30px 22px 26px;
  display:flex; flex-direction:column;
  align-items:center; gap:13px;
}

.age-warning {
  width:100%; max-width:430px;
  background:rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:2px;
  padding:13px 18px;
  font-size:clamp(10.5px, 2.3vw, 12px);
  color:rgba(255,255,255,0.82);
  line-height:1.88; letter-spacing:0.04em;
  text-align:center; margin-bottom:4px;
}
.age-warning strong { color:#fff; font-weight:700; }

/* ボタン共通 */
.btn {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  width:100%; max-width:430px;
  padding:17px 20px;
  text-decoration:none; border-radius:2px;
  transition:transform 0.16s ease, box-shadow 0.16s ease;
  position:relative; overflow:hidden;
  cursor:pointer;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0);
  transition:background 0.16s ease;
}
.btn:hover::after { background:rgba(255,255,255,0.06); }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

/* ENTER */
.btn-enter {
  background:linear-gradient(180deg,
    #f0f0f4 0%,
    #d0d0d8 18%,
    #a8a8b4 40%,
    #c8c8d2 58%,
    #e8e8ee 78%,
    #b0b0bc 100%
  );
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.35),
    0 4px 16px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(0,0,0,0.15);
}
.btn-enter:hover {
  background:linear-gradient(180deg,
    #ffffff 0%,
    #dcdce4 18%,
    #b8b8c4 40%,
    #d8d8e2 58%,
    #f4f4f8 78%,
    #c0c0cc 100%
  );
  box-shadow:
    0 4px 0 rgba(0,0,0,0.3),
    0 6px 22px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}
.btn-enter .bm {
  font-family:'Cinzel', serif;
  font-size:clamp(18px, 4vw, 22px); font-weight:700;
  letter-spacing:0.28em;
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.btn-enter .bs {
  font-size:clamp(10px,2vw,11.5px);
  color:rgba(40,40,50,0.65); letter-spacing:0.3em; margin-top:4px;
}

/* LEAVE */
.btn-leave {
  background:linear-gradient(180deg,
    #d8d8e0 0%,
    #b4b4be 20%,
    #888898 45%,
    #a8a8b4 65%,
    #d0d0d8 100%
  );
  border:1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.3),
    0 3px 12px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.12);
}
.btn-leave:hover {
  background:linear-gradient(180deg,
    #e4e4ec 0%,
    #c0c0ca 20%,
    #9898a8 45%,
    #b8b8c4 65%,
    #dcdce4 100%
  );
}
.btn-leave .bm {
  font-family:'Cinzel', serif;
  font-size:clamp(14px, 3.2vw, 17px); font-weight:400;
  letter-spacing:0.24em;
  color:#2a2a32;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.btn-leave .bs {
  font-size:clamp(10px,2vw,11px);
  color:rgba(40,40,50,0.5); letter-spacing:0.28em; margin-top:4px;
}

/* 18バッジ */
.badge-18 {
  width:46px; height:46px;
  border:2px solid rgba(200,200,210,0.45); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(230,7,18,0.2); position:relative;
  margin-top:4px;
}
.badge-18::before {
  content:''; position:absolute; inset:3px;
  border:1px solid rgba(200,200,210,0.2); border-radius:50%;
}
.badge-18 span {
  font-family:'Cinzel', serif; font-size:13px;
  font-weight:900;
  background:linear-gradient(180deg, var(--silver-lt) 0%, var(--silver) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ════════════════════════════
   3. バナーエリア
════════════════════════════ */
.banner-section {
  width: 100%;
  background: #c0050f;
  padding: 16px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* iframe など幅指定があるタグも全幅に揃える */
.banner-section > * {
  max-width: 100%;
}

/* ════════════════════════════
   4. フッター
════════════════════════════ */
.page-footer {
  width:100%;
  background:#900008;
  border-top:1px solid rgba(255,255,255,0.1);
  padding:14px;
  text-align:center;
  font-size:10px; color:rgba(255,255,255,0.3);
  letter-spacing:0.12em;
}