/* ========================================
   18禁入口風 外部リンク注意ページ用 CSS
   （スマホ前提・90年代風味ましまし）
======================================== */

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

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: #000000;
    color: #ffffff;
    font-family: "MS PGothic", "MS UI Gothic", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

/* 中央に怪しいパネルを出すやつ */
.gate-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.gate-panel {
    width: 100%;
    max-width: 520px;
    border: 3px double #ff0000;
    background: #111111;
    padding: 16px 20px 24px;
    text-align: center;
    box-shadow: 0 0 18px rgba(255, 0, 0, 0.6);
}

/* タイトル：怪しく点滅させる */
.gate-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    color: #ff4444;
    text-shadow: 0 0 4px #ff0000, 0 0 10px #ff0000;
    animation: gate-blink 1.2s infinite alternate;
    letter-spacing: 0.1em;
}

@keyframes gate-blink {
    0% {
        opacity: 1;
        text-shadow: 0 0 4px #ff0000, 0 0 10px #ff0000;
    }
    100% {
        opacity: 0.6;
        text-shadow: 0 0 2px #ff0000;
    }
}

.gate-sub {
    margin: 0 0 16px 0;
    color: #ffdddd;
    font-size: 14px;
}

/* 中央の注意ボックス */
.gate-box {
    border: 2px solid #ff00ff;
    padding: 12px;
    margin-bottom: 16px;
    background: #220022;
}

.gate-target-label {
    margin: 0;
    font-size: 13px;
    color: #ffaaaa;
}

.gate-target-name {
    margin: 4px 0 10px;
    font-weight: bold;
    color: #ffffff;
}

.gate-warning {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #ffdddd;
}

.gate-age {
    margin: 0;
    font-size: 13px;
    color: #ffaaaa;
}

/* ボタン */
.gate-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.btn {
    display: block;
    padding: 10px 8px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    border: 2px solid #ffffff;
}

/* 入室ボタン：赤 */
.btn-enter {
    background: #ff0000;
    color: #ffffff;
    border-color: #ffaaaa;
    text-shadow: 0 0 4px #660000;
}

.btn-enter:hover {
    background: #ff4444;
}

/* 戻るボタン：グレー */
.btn-back {
    background: #333333;
    color: #ffffff;
    border-color: #aaaaaa;
}

.btn-back:hover {
    background: #555555;
}

.gate-footer {
    margin: 4px 0 0;
    font-size: 11px;
    color: #888888;
}

/* スマホでフォント少し大きめ */
@media (max-width: 420px) {
    body {
        font-size: 15px;
    }

    .gate-title {
        font-size: 21px;
    }
}