/* --- 変数・全体設定 --- */
:root { 
    --main-red: #ff0000; 
}

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

/* 背景は暗い赤から黒へのグラデーションのみ。灰色の要素を一切排除 */
html, body {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(180deg, #1a0000 0%, #000000 70%) no-repeat fixed !important;
    background-color: #000000 !important;
    color: #fff;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    overflow-x: hidden;
}

/* --- ナビゲーション: Nebula風の「隙間ゼロ」吸着 --- */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%; height: 90px;
    display: flex; align-items: center; padding: 0 5%; z-index: 1000;
    background: transparent !important;
    border: none !important;
}

.nav-left { display: flex; align-items: center; gap: 15px; flex: 1; }
.nav-left img { height: 60px; width: auto; }
.logo-text { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.8rem; letter-spacing: 2px; }

/* 中央のカプセル本体 */
.nav-center {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px; /* 内側の隙間を最小限に */
    border-radius: 100px;
    display: flex; align-items: center;
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
}

.nav-links { list-style: none; display: flex; gap: 2px; }
.nav-links li a {
    text-decoration: none; color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem; font-weight: 700;
    padding: 10px 20px; /* ここが吸着感のポイント。高さをカプセルに合わせる */
    border-radius: 100px;
    display: block;
    line-height: 1;
    transition: 0.2s ease;
}

/* 選択・ホバー時に隙間なく色が乗るように調整 */
.active-link, .nav-links li a:hover { 
    color: #fff !important; 
    background: rgba(255, 255, 255, 0.1) !important; 
}

.nav-right { flex: 1; display: flex; justify-content: flex-end; }
.join-btn-nav {
    background: var(--main-red); color: #fff; text-decoration: none;
    padding: 11px 24px; border-radius: 8px; font-weight: 800; font-size: 0.85rem;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

/* --- 規約エリア: 赤い発光枠と灰色背景の完全除去 --- */
.tos-main-frame {
    max-width: 900px;
    margin: 50px auto 100px;
    padding: 20px 40px;
    background: transparent !important; /* 灰色の帯を消すために透明に */
    border-radius: 24px;
    border: 1px solid rgba(255, 0, 0, 0.5) !important; /* 発光を少し強めに */
    box-shadow: 0 0 40px rgba(255, 0, 0, 0.2); 
    position: relative;
    z-index: 10;
}

/* 各項目の背景もすべて透明に固定 */
.tos-card {
    background: transparent !important;
    border: none !important; 
    box-shadow: none !important;
    display: flex; gap: 30px; align-items: flex-start;
    padding: 30px 0;
}

/* 区切り線も灰色ではなく「赤の透過」を使用 */
.tos-card:not(:last-child) {
    border-bottom: 1px solid rgba(255, 0, 0, 0.1) !important;
}

.tos-num { color: var(--main-red); font-weight: 900; font-family: 'Orbitron'; font-size: 1rem; min-width: 40px; }
.tos-content h3 { font-size: 1.15rem; margin-bottom: 8px; font-weight: 800; color: #fff; }
.tos-content p { color: rgba(255, 255, 255, 0.45); font-size: 0.95rem; line-height: 1.8; }