/* 🍉 スイカモチーフ夏テーマ CSS - NEXUS College August 2026 */

/* ==========================================
   🎨 スイカカラーパレット
   ========================================== */
:root {
    /* スイカカラー */
    --watermelon-skin: #2D5016;      /* 皮（濃い緑） */
    --watermelon-rind: #7CB342;      /* 皮（明るい緑） */
    --watermelon-white: #F1F8E9;     /* 白い部分 */
    --watermelon-red: #E53935;       /* 果肉（赤） */
    --watermelon-pink: #FFCDD2;      /* 果肉（薄いピンク） */
    --watermelon-seed: #212121;      /* 種（黒） */
    
    /* グラデーション */
    --watermelon-gradient-green: linear-gradient(135deg, #2D5016 0%, #7CB342 100%);
    --watermelon-gradient-red: linear-gradient(135deg, #E53935 0%, #FF5252 100%);
    --watermelon-gradient-summer: linear-gradient(135deg, #7CB342 0%, #E53935 50%, #FF5252 100%);
    
    /* アクセントカラー */
    --summer-fresh-green: #66BB6A;
    --summer-coral-red: #EF5350;
    --summer-light-bg: #FAFAFA;
    
    /* テキストカラー（コントラスト確保） */
    --text-dark: #212121;
    --text-medium: #424242;
    --text-light: #757575;
}

/* ==========================================
   🍉 ヘッダーのスイカテーマ
   ========================================== */

.header {
    background: var(--watermelon-gradient-green) !important;
    box-shadow: 0 4px 20px rgba(45, 80, 22, 0.3) !important;
}

.logo {
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.logo i {
    color: #FFEB3B !important;
}

/* ナビゲーションボタン */
.btn-nav-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.btn-nav-icon i {
    color: #FFEB3B !important;
    font-size: 18px !important;
    z-index: 10 !important;
    position: relative !important;
    display: inline-block !important;
}

.btn-nav-icon:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

.btn-nav-premium {
    background: var(--watermelon-gradient-red) !important;
    color: white !important;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
}

.btn-nav-vip {
    background: linear-gradient(135deg, #7B1FA2 0%, #E91E63 100%) !important;
    color: white !important;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
}

/* ==========================================
   🏖️ ヒーローセクションのスイカテーマ
   ========================================== */

.hero {
    background: var(--watermelon-gradient-summer) !important;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '🍉';
    position: absolute;
    top: 10%;
    right: 5%;
    font-size: 120px;
    opacity: 0.1;
    pointer-events: none;
}

.hero::after {
    content: '🍉';
    position: absolute;
    bottom: 10%;
    left: 5%;
    font-size: 100px;
    opacity: 0.1;
    pointer-events: none;
    transform: rotate(-15deg);
}

.hero h1 {
    color: white !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ヒーローボタン */
.btn-hero-primary {
    background: var(--watermelon-gradient-red) !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(229, 57, 53, 0.5);
}

.btn-hero-primary:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 35px rgba(229, 57, 53, 0.6);
}

.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

/* ==========================================
   🌊 セクションのスイカテーマ
   ========================================== */

/* 一般的なセクション */
section:nth-child(even) {
    background: linear-gradient(135deg, #F1F8E9 0%, #FFFFFF 100%);
}

section:nth-child(odd) {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFEBEE 100%);
}

/* セクションタイトル */
.section-title {
    color: var(--text-dark) !important;
    position: relative;
}

/* ==========================================
   🎯 カードのスイカテーマ
   ========================================== */

.benefit-card, .feature-card, .plan-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(124, 179, 66, 0.15);
    border: 2px solid transparent;
    transition: all 0.4s ease;
}

.benefit-card:hover, .feature-card:hover, .plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(124, 179, 66, 0.25);
    border-color: var(--watermelon-rind);
}

/* ==========================================
   🏄 ボタンのスイカテーマ
   ========================================== */

.btn-primary, .cta-button {
    background: var(--watermelon-gradient-red) !important;
    color: white !important;
    border: none;
    box-shadow: 0 6px 20px rgba(229, 57, 53, 0.4);
    transition: all 0.3s ease;
}

.btn-primary:hover, .cta-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(229, 57, 53, 0.5);
}

.btn-secondary {
    background: var(--watermelon-gradient-green) !important;
    color: white !important;
    box-shadow: 0 6px 20px rgba(124, 179, 66, 0.4);
}

.btn-secondary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(124, 179, 66, 0.5);
}

/* ==========================================
   🌴 バッジ・ラベルのスイカテーマ
   ========================================== */

.badge, .label, .tag {
    background: var(--watermelon-gradient-red);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.3);
}

/* NEWバッジ */
.new-badge, [class*="new"] {
    background: linear-gradient(135deg, #FFEB3B 0%, #FFC107 100%);
    color: var(--text-dark);
}

/* ==========================================
   🎨 勉強会セクションのスイカテーマ
   ========================================== */

.seminar-section {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%) !important;
}

.seminar-badge {
    background: var(--watermelon-gradient-red);
    color: white;
}

.seminar-stat {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(124, 179, 66, 0.2);
    transition: all 0.3s ease;
    border: 2px solid var(--watermelon-rind);
}

.seminar-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(124, 179, 66, 0.3);
}

/* ==========================================
   🍉 スイカ装飾要素
   ========================================== */

/* スイカの装飾 */
.watermelon-decoration {
    position: absolute;
    font-size: 80px;
    opacity: 0.1;
    pointer-events: none;
}

/* セクション見出しの装飾 */
.section-header::before {
    content: '🍉';
    font-size: 2rem;
    margin-right: 10px;
    vertical-align: middle;
}

/* ==========================================
   📱 レスポンシブ対応
   ========================================== */

@media (max-width: 768px) {
    .hero::before,
    .hero::after {
        font-size: 60px;
    }
    
    .watermelon-decoration {
        font-size: 50px;
    }
}

/* ==========================================
   ✨ 8月限定メッセージ
   ========================================== */

.august-message {
    background: var(--watermelon-gradient-red);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.3);
    margin: 20px auto;
    max-width: 600px;
}

.august-message::before {
    content: '🍉 ';
}

.august-message::after {
    content: ' 🍉';
}

/* ==========================================
   🎨 学習管理システムセクション（コントラスト修正）
   ========================================== */

.lms-benefits-section {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 50%, #A5D6A7 100%) !important;
    color: #1B5E20 !important;
}

.lms-benefits-section .section-title,
.lms-benefits-section .section-subtitle,
.lms-benefits-section h3,
.lms-benefits-section p {
    color: #1B5E20 !important;
}

.lms-badge {
    background: rgba(45, 80, 22, 0.8) !important;
    color: white !important;
}

.lms-feature-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid #4CAF50 !important;
    color: #2D2D2D !important;
}

.lms-feature-card h3 {
    color: #2D5016 !important;
}

.lms-feature-card p {
    color: #424242 !important;
}

.benefit-tag {
    background: var(--watermelon-gradient-green) !important;
    color: white !important;
}

/* ==========================================
   🔍 その他のコントラスト修正
   ========================================== */

/* 明るい背景に白文字を使用している箇所を修正 */
.light-bg {
    background: #FAFAFA;
    color: var(--text-dark) !important;
}

.light-bg h1,
.light-bg h2,
.light-bg h3,
.light-bg h4,
.light-bg h5,
.light-bg h6,
.light-bg p {
    color: var(--text-dark) !important;
}

/* スイカモチーフのアクセントライン */
.watermelon-accent {
    border-left: 5px solid var(--watermelon-red);
    padding-left: 20px;
}

.watermelon-accent-green {
    border-left: 5px solid var(--watermelon-rind);
    padding-left: 20px;
}