* {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      min-height: 100%;
      font-family: "Noto Sans JP", sans-serif;
      background: #0b0b0f;
      color: #fff;
    }

    body {
      position: relative;
      overflow-x: hidden;
      background:
        radial-gradient(circle at top left, rgba(255, 58, 140, 0.22), transparent 30%),
        radial-gradient(circle at bottom right, rgba(160, 80, 255, 0.18), transparent 28%),
        linear-gradient(135deg, #09090d 0%, #12121a 55%, #0b0b10 100%);
    }

    .age-bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.18;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 22px 22px;
    }

    .wrap {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .card {
      width: 100%;
      max-width: 720px;
      background: rgba(20, 20, 28, 0.88);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 28px;
      box-shadow:
        0 20px 60px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.04) inset;
      overflow: hidden;
      backdrop-filter: blur(12px);
    }

    .card-inner {
      padding: 42px 28px 32px;
    }

    .logo-area {
      text-align: center;
      margin-bottom: 24px;
    }

    .logo {
      max-width: 220px;
      width: 70%;
      height: auto;
      display: inline-block;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 88px;
      height: 36px;
      padding: 0 14px;
      border-radius: 999px;
      background: linear-gradient(90deg, #ff2c92, #9b4dff);
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.04em;
      margin-bottom: 16px;
    }

    .title {
      margin: 0;
      text-align: center;
      font-family: "Anton", sans-serif;
      font-size: clamp(34px, 6vw, 64px);
      line-height: 1;
      letter-spacing: 0.04em;
    }

    .title-sub {
      margin: 14px 0 0;
      text-align: center;
      font-size: 15px;
      line-height: 1.9;
      color: rgba(255,255,255,0.82);
    }

    .notice {
      margin: 28px auto 0;
      max-width: 560px;
      padding: 18px 18px;
      border-radius: 18px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
      font-size: 14px;
      line-height: 1.9;
    }

    .notice strong {
      color: #ff6db3;
    }

    .buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 30px;
    }

    .btn {
      appearance: none;
      border: 0;
      border-radius: 16px;
      min-height: 64px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
      width: 100%;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn-yes {
      color: #fff;
      background: linear-gradient(135deg, #ff2c92 0%, #ff6e6e 45%, #9b4dff 100%);
      box-shadow: 0 16px 30px rgba(255, 45, 146, 0.25);
    }

    .btn-no {
      color: #fff;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.14);
    }

    .foot {
      margin-top: 22px;
      text-align: center;
      font-size: 12px;
      line-height: 1.8;
      color: rgba(255,255,255,0.55);
    }

    .visual-line {
      height: 6px;
      background: linear-gradient(90deg, #ff2c92 0%, #9b4dff 50%, #ff8b5e 100%);
    }

    @media (max-width: 640px) {
      .card-inner {
        padding: 34px 18px 24px;
      }

      .buttons {
        grid-template-columns: 1fr;
      }

      .btn {
        min-height: 58px;
        font-size: 15px;
      }

      .title-sub {
        font-size: 14px;
      }

      .notice {
        font-size: 13px;
        line-height: 1.8;
      }
    }