/**
 * スポンサー一覧 CSS
 * Lightning テーマ用スポンサーシステム
 */

/* メインコンテナ */
.sponsors-container {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* ランクセクション */
.sponsor-rank-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 見出し - テーマ固有のCSSを残す */
.sponsor-rank-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: .7rem 1rem;
    line-height: 1.4;
    border: none;
}

/* ランク別見出し背景色 */
.sponsor-title-corporate {
    background: #000;
    color: #fff !important;
}

.sponsor-title-diamond {
    background: #cbbfc6;
    color: #273253 !important;
}

.sponsor-title-platinum {
    background: #d0d6d9;
    color: #000 !important;
}

.sponsor-title-gold {
    background: #cbb15b;
    color: #000 !important;
}

.sponsor-title-silver {
    background: #a9a9aa;
    color: #000 !important;
}

.sponsor-title-stone {
    background: #c4bba7;
    color: #000 !important;
}

/* ランク毎のグループ */
.sponsor-rank-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

/* スポンサーアイテム */
.sponsor-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 75px;
}

/* ロゴサイズ - PC（比率ベース） */
/* 法人: 2カラム相当 */
.sponsor-corporate {
    width: 500px;
    max-width: 100%;
    aspect-ratio: 260 / 75;
}

/* ダイヤモンド: 2カラム相当、5:3比率 */
.sponsor-diamond {
    width: 500px;
    max-width: 100%;
    aspect-ratio: 5 / 2;
}

/* プラチナ: 3カラム相当、5:3比率 */
.sponsor-platinum {
    width: 350px;
    max-width: 100%;
    aspect-ratio: 5 / 2;
}

/* ゴールド: 4カラム相当 */
.sponsor-gold {
    width: 260px;
    max-width: 100%;
    aspect-ratio: 260 / 75;
}

/* シルバー: 5カラム相当 */
.sponsor-silver {
    width: 210px;
    max-width: 100%;
    aspect-ratio: 200 / 75;
}

/* ストーン: 6カラム相当 */
.sponsor-stone {
    width: 180px;
    max-width: 100%;
    aspect-ratio: 170 / 75;
}

/* スポンサーリンク */
.sponsor-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.sponsor-link:hover {
    opacity: 0.7;
}

/* スポンサーロゴ */
.sponsor-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* スポンサー名（ロゴがない場合） */
.sponsor-name {
    font-weight: bold;
    color: #333;
    font-size: 0.9rem;
}

/* タブレット以下 */
@media (max-width: 768px) {
    .sponsors-container {
        gap: 2rem;
    }
    
    .sponsor-rank-section {
        gap: 1rem;
    }
    
    .sponsor-rank-title {
        font-size: 1.3rem !important;
        padding: 0.8rem 1rem;
    }
    
    /* 法人/ダイヤ/プラチナは1カラム（100%幅） */
    .sponsor-corporate,
    .sponsor-diamond,
    .sponsor-platinum {
        width: 100%;
        max-width: 500px;
    }
    
    /* ダイヤモンドとプラチナは法人と同じ比率に */
    .sponsor-diamond,
    .sponsor-platinum {
        aspect-ratio: 260 / 75;
    }
    
    /* ゴールド/シルバー/ストーンは2カラム */
    .sponsor-gold,
    .sponsor-silver,
    .sponsor-stone {
        width: 45%;
        min-width: 150px;
    }
}

/* モバイル（極小画面） */
@media (max-width: 480px) {
    .sponsor-rank-title {
        font-size: 1.1rem !important;
        padding: 0.6rem 0.8rem;
    }
    
    .sponsor-rank-group {
        gap: 0.8rem;
    }
}