/* ==========================================
   🌈 ヘッダー：共通の鮮やかな4人グラデーション
   ========================================== */
.hero {
    background: linear-gradient(90deg, #800080 0%, #0000ff 33%, #ff0000 66%, #008000 100%) !important;
    color: white !important;
    text-align: center !important;
    padding: 30px 20px !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6) !important;
    position: relative !important;
}

body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif !important;
    background-color: #fff0f5 !important; 
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden; /* メニューが右から出るときの横スクロールを防ぐ */
}

/* 🎫 パソコン版のタブボタン（横並び） */
.tabs {
    display: flex !important;
    justify-content: center !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    padding: 10px !important;
    gap: 8px !important;
}
.tabs a {
    display: inline-block !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    color: #555 !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    background: #fff0f5 !important;
    border: 1px solid #ffb6c1 !important;
}
.tabs a.active, .tabs a:hover {
    background: #ff69b4 !important;
    color: #ffffff !important;
    border-color: #ff69b4 !important;
}

/* 📱 スマホ用メニューボタン（ハンバーガー） */
.menu-trigger {
    display: none;
    position: absolute;
    top: 25px;
    right: 20px;
    font-size: 1.5rem;
    color: white;
    background: rgba(0,0,0,0.3);
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1001;
}

/* ==========================================
   📱 スマホ版：右からヌッと出てくるメニュー（ドロワー）
   ========================================== */
@media (max-width: 600px) {
    .menu-trigger { display: block !important; }
    
    .tabs {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        right: -250px !important; /* 最初は画面の右外側に隠す */
        width: 250px !important;
        height: 100vh !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        padding: 70px 20px 20px 20px !important;
        box-shadow: -4px 0 12px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
        transition: right 0.3s ease !important; /* なめらかに動かす */
        gap: 12px !important;
        justify-content: flex-start !important;
    }
    
    .tabs.show {
        right: 0 !important;
    }
    
    .tabs a {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        border-radius: 10px !important;
        text-align: left !important;
    }
}

/* ✨ 共通カードデザイン */
main, .calendar-container { max-width: 800px !important; margin: 20px auto !important; padding: 0 15px !important; }
.card, .member-card, .sns-card, .ticket-card, #calendar, .schedule-section {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    border: 1px solid #ffb6c1 !important;
}

h2, .section-title {
    font-size: 1.2rem !important;
    border-bottom: 2px solid #ff69b4 !important;
    padding-bottom: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    color: #ff69b4 !important;
}

/* ⏱️ 更新情報のカードデザイン（気になる線と点を完全に消しました！） */
.timeline-container { margin-top: 15px; }
.timeline-item { position: relative; margin-bottom: 15px; background: #fff5f7; padding: 15px; border-radius: 8px; border-left: 6px solid #ff69b4; }
.update-time { font-size: 0.75rem; font-weight: bold; display: block; margin-bottom: 5px; }

/* メンカラ設定（Membersページ・ポップアップ用） */
.border-masakado { border: 2px solid #0000ff !important; border-left: 8px solid #0000ff !important; }
.text-masakado { color: #0000ff !important; }
.border-suezawa { border: 2px solid #ff0000 !important; border-left: 8px solid #ff0000 !important; }
.text-suezawa { color: #ff0000 !important; }
.border-kojima { border: 2px solid #800080 !important; border-left: 8px solid #800080 !important; }
.text-kojima { color: #800080 !important; }
.border-sano { border: 2px solid #008000 !important; border-left: 8px solid #008000 !important; }
.text-sano { color: #008000 !important; }

/* メンバーSNSリンクボタン */
.member-links { margin-top: 10px; display: flex; gap: 12px; }
.member-links a { text-decoration: none; font-size: 1.2rem; padding: 5px 10px; border-radius: 5px; background: #f0f0f0; color: #333; font-weight: bold; }
.member-links a:hover { background: #e0e0e0; }