body.premium {
    background-color: #343434;
    color: #FFF;
   
}



.premium .swiper-pagination-bullet {
    background-color: #fff;
}

/* エリート馬カード - 違うデザイン */
.elite-horse-card {
    background: linear-gradient(145deg, #0f1419 0%, #1a2332 50%, #0f1419 100%);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 25px;
    padding: 20px;
     position: relative;
    overflow: hidden;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5),
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.elite-horse-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #00d4ff, #0099cc, #0066ff, #0099cc, #00d4ff);
    background-size: 400% 400%;
    z-index: -1;
    border-radius: 25px;
    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes shimmer {
    0%, 100% { background-position: 200% 0; }
    50% { background-position: -200% 0; }
}


@keyframes glow {
    from { box-shadow: 0 4px 15px rgba(255, 221, 0, 0.4); }
    to { box-shadow: 0 6px 25px rgba(255, 221, 0, 0.6); }
}



.elite-horse-card::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: linear-gradient(145deg, #0f1419 0%, #1a2332 50%, #0f1419 100%);
    border-radius: 22px;
    z-index: -1;
}

/* エリートヘッダー */
.elite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
    flex-wrap: nowrap;
}

/* .elite-badge {
    min-width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #ffd700, #ffb347);
    padding: 15px 10px;
    border-radius: 20px;
    box-shadow:
        0 8px 25px rgba(255, 215, 0, 0.35),
        0 0 30px rgba(255, 183, 71, 0.25);
    transform: perspective(100px) rotateY(0deg) rotateX(5deg);
    position: relative;
    overflow: hidden;
    animation: badgeShine 700ms ease-out 60ms both;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.elite-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -30%;
    width: 60%;
    height: 200%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(25deg) translateX(-160%);
    pointer-events: none;
    animation: badgeShine 3s ease-in-out 0.8s infinite;
} */

.elite-badge {
    min-width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #ffd700, #ffb347);
    padding: 15px 10px;
    border-radius: 16px;
    box-shadow:
        0 8px 25px rgba(255, 215, 0, 0.35),
        0 0 30px rgba(255, 183, 71, 0.25);
    transform: perspective(100px) rotateY(0deg) rotateX(5deg);
    position: relative;
    overflow: hidden;
    animation: badgePop 700ms ease-out 60ms both;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.elite-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -30%;
    width: 60%;
    height: 200%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(25deg) translateX(-160%);
    pointer-events: none;
    animation: badgeShine 3s ease-in-out 0.8s infinite;
    z-index: 1;
}

/* ========== Badge Variants (10 types) ========== */
/* Common: replace label text via ::after */
.elite-badge[class^="badge-"] .elite-label,
.elite-badge[class*=" badge-"] .elite-label {
    color: transparent;
    position: relative;
}
.elite-badge[class^="badge-"] .elite-label::after,
.elite-badge[class*=" badge-"] .elite-label::after {
    position: absolute;
    inset: 0;
    display: inline-block;
    text-align: center;
    color: rgba(255,255,255,0.95);
    content: '';
}

/* S: Red */
.elite-badge.badge-s {
    background: linear-gradient(135deg, #ff3b3b, #d32f2f);
    box-shadow: 0 8px 25px rgba(244, 67, 54, 0.4), 0 0 30px rgba(244, 67, 54, 0.25);
    border-color: rgba(255, 255, 255, 0.28);
}
.elite-badge.badge-s .elite-label::after { content: 'Sランク'; }

/* Sランク時にPNGを重ねる */
.elite-badge.badge-s::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/img/premium/rank_s.png') no-repeat center / contain;
    z-index: 2; /* ::after(光の帯)より上 */
    pointer-events: none;
  }

/* A: Orange */
.elite-badge.badge-a {
    background: linear-gradient(135deg, #ff8a00, #ff6b35);
    box-shadow: 0 8px 25px rgba(255, 123, 0, 0.4), 0 0 30px rgba(255, 123, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.28);
}
.elite-badge.badge-a .elite-label::after { content: 'Aランク'; }

.elite-badge.badge-a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/img/premium/rank_a.png') no-repeat center / contain;
    z-index: 2; /* ::after(光の帯)より上 */
    pointer-events: none;
  }


/* B: Yellow */
.elite-badge.badge-b {
    background: linear-gradient(135deg, #ffd700, #ffbf47);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.38), 0 0 30px rgba(255, 191, 71, 0.25);
    border-color: rgba(0, 0, 0, 0.15);
}
.elite-badge.badge-b .elite-label::after { content: 'Bランク'; }

.elite-badge.badge-b::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/img/premium/rank_b.png') no-repeat center / contain;
    z-index: 2; /* ::after(光の帯)より上 */
    pointer-events: none;
  }

/* C: Green */
.elite-badge.badge-c {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    box-shadow: 0 8px 25px rgba(46, 204, 113, 0.38), 0 0 30px rgba(39, 174, 96, 0.22);
    border-color: rgba(255, 255, 255, 0.22);
}
.elite-badge.badge-c .elite-label::after { content: 'Cランク'; }

.elite-badge.badge-c::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/img/premium/rank_c.png') no-repeat center / contain;
    z-index: 2; /* ::after(光の帯)より上 */
    pointer-events: none;
  }

/* D: Light Blue (Aqua) */
.elite-badge.badge-d {
    background: linear-gradient(135deg, #4dd0e1, #26c6da);
    box-shadow: 0 8px 25px rgba(77, 208, 225, 0.4), 0 0 30px rgba(38, 198, 218, 0.24);
    border-color: rgba(255, 255, 255, 0.25);
}
.elite-badge.badge-d .elite-label::after { content: 'Dランク'; }

.elite-badge.badge-d::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/img/premium/rank_d.png') no-repeat center / contain;
    z-index: 2; /* ::after(光の帯)より上 */
    pointer-events: none;
  }

/* 研修: Gray */
.elite-badge.badge-k {
    background: linear-gradient(135deg, #9e9e9e, #616161);
    box-shadow: 0 8px 25px rgba(158, 158, 158, 0.35), 0 0 30px rgba(97, 97, 97, 0.25);
    border-color: rgba(255, 255, 255, 0.2);
}
.elite-badge.badge-k .elite-label::after { content: 'レース';
font-size: 0.8rem; }

.elite-badge.badge-k::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/img/premium/rank_k.png') no-repeat center / contain;
    z-index: 2; /* ::after(光の帯)より上 */
    pointer-events: none;
  }

/* A-rank (穴) */
.elite-badge.badge-a-ana {
    background: linear-gradient(135deg, #ff7a00, #e65100);
    box-shadow: 0 8px 25px rgba(230, 81, 0, 0.42), 0 0 30px rgba(230, 81, 0, 0.26);
    border-color: rgba(255, 255, 255, 0.25);
}
.elite-badge.badge-a-ana .elite-label::after { content: 'ランク'; }

.elite-badge.badge-a-ana::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/img/premium/rank_a_ana.png') no-repeat center / contain;
    z-index: 2; /* ::after(光の帯)より上 */
    pointer-events: none;
  }

/* B-rank (穴) */
.elite-badge.badge-b-ana {
    background: linear-gradient(135deg, #ffcc33, #d4a017);
    box-shadow: 0 8px 25px rgba(212, 160, 23, 0.42), 0 0 30px rgba(212, 160, 23, 0.26);
    border-color: rgba(0, 0, 0, 0.18);
}
.elite-badge.badge-b-ana .elite-label::after { content: 'B穴ランク'; }

.elite-badge.badge-b-ana::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/img/premium/rank_b_ana.png') no-repeat center / contain;
    z-index: 2; /* ::after(光の帯)より上 */
    pointer-events: none;
  }

/* C-rank (穴) */
.elite-badge.badge-c-ana {
    background: linear-gradient(135deg, #2bbf6a, #1f8f50);
    box-shadow: 0 8px 25px rgba(43, 191, 106, 0.42), 0 0 30px rgba(31, 143, 80, 0.26);
    border-color: rgba(255, 255, 255, 0.22);
}
.elite-badge.badge-c-ana .elite-label::after { content: 'C穴ランク'; }

.elite-badge.badge-c-ana::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/img/premium/rank_c_ana.png') no-repeat center / contain;
    z-index: 2; /* ::after(光の帯)より上 */
    pointer-events: none;
  }

/* D-rank (穴) */
.elite-badge.badge-d-ana {
    background: linear-gradient(135deg, #33c9e5, #1ea9c4);
    box-shadow: 0 8px 25px rgba(51, 201, 229, 0.42), 0 0 30px rgba(30, 169, 196, 0.26);
    border-color: rgba(255, 255, 255, 0.25);
}
.elite-badge.badge-d-ana .elite-label::after { content: 'D穴ランク'; }

/* Rank letter glow tint for better readability */
.elite-badge.badge-s .elite-rank { text-shadow: 0 2px 8px rgba(183, 28, 28, 0.65); }
.elite-badge.badge-a .elite-rank { text-shadow: 0 2px 8px rgba(230, 81, 0, 0.6); }
.elite-badge.badge-b .elite-rank { text-shadow: 0 2px 8px rgba(255, 215, 0, 0.55); }
.elite-badge.badge-c .elite-rank { text-shadow: 0 2px 8px rgba(39, 174, 96, 0.6); }
.elite-badge.badge-d .elite-rank { text-shadow: 0 2px 8px rgba(38, 198, 218, 0.6); }
.elite-badge.badge-verify .elite-rank { text-shadow: 0 2px 8px rgba(97, 97, 97, 0.7); }
.elite-badge.badge-ana-a .elite-rank { text-shadow: 0 2px 8px rgba(230, 81, 0, 0.7); }
.elite-badge.badge-ana-b .elite-rank { text-shadow: 0 2px 8px rgba(212, 160, 23, 0.65); }
.elite-badge.badge-ana-c .elite-rank { text-shadow: 0 2px 8px rgba(31, 143, 80, 0.65); }
.elite-badge.badge-ana-d .elite-rank { text-shadow: 0 2px 8px rgba(30, 169, 196, 0.65); }

.elite-badge:hover {
    transform: perspective(200px) rotateY(-6deg) rotateX(3deg) translateY(-2px);
    box-shadow:
        0 10px 28px rgba(0, 212, 255, 0.45),
        0 0 36px rgba(0, 212, 255, 0.25);
}

@keyframes badgePop {
    0% {
        opacity: 0;
        transform: perspective(200px) rotateY(-20deg) rotateX(10deg) scale(0.85);
        filter: blur(1px);
    }
    60% {
        opacity: 1;
        transform: perspective(200px) rotateY(-8deg) rotateX(4deg) scale(1.03);
        filter: blur(0);
    }
    100% {
        transform: perspective(200px) rotateY(-10deg) rotateX(5deg) scale(1);
    }
}

@keyframes badgeShine {
    0% {
        transform: rotate(25deg) translateX(-160%);
    }
    50% {
        transform: rotate(25deg) translateX(160%);
    }
    100% {
        transform: rotate(25deg) translateX(160%);
    }
}



.elite-rank {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    line-height: 1;
    white-space: nowrap;
}

.elite-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
}

/* .elite-status {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ff4081, #e91e63);
    padding: 12px 20px;
    border-radius: 30px;
    box-shadow: 0 6px 20px rgba(255, 64, 129, 0.4);
    animation: statusPulse 3s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(255, 64, 129, 0.4); }
    50% { transform: scale(1.02); box-shadow: 0 8px 25px rgba(255, 64, 129, 0.6); }
} */

.status-icon {
    font-size: 1.2rem;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.1); }
}

.status-text {
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
}

/* エリートコンテンツ */
.elite-content {
    margin-bottom: 25px;
}

.race-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 10px;
    flex: 1 1 auto;
    min-width: 0; /* allow shrink for ellipsis */
    white-space: nowrap;
    overflow: hidden;
}

.elite-race-title {
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 700;
    color: #ffd54a;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    margin-right: 8px;
}

.race-grade {
    background: linear-gradient(135deg, #ffe066, #ffbf47);
    color: #1a1a1a;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.45);
    border: 1px solid rgba(0,0,0,0.25);
    flex: 0 0 auto;
    white-space: nowrap;
}

.horse-profile {
    border-radius: 6px;
    width: 96%;
    margin: 0 auto;
    padding: 10px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.10), rgba(255, 183, 71, 0.10));
    
    border: 1px solid rgba(255, 215, 0, 0.55);
    box-shadow: 0 6px 18px rgba(255, 215, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.horse-main {
    display: flex;
        justify-content: center;
        align-items: baseline;
        gap: 10px;
        flex-wrap: nowrap;
        background-color: #625610;
        padding: 6px;
        margin-bottom:10px;
}

.horse-frame {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 8px 25px rgba(0, 212, 255, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    animation: frameRotate 6s linear infinite;
}

.elite-profile {margin-bottom: 30px;}

/* .elite-profile .race-info-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #b4a162;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    margin-bottom: 10px;
} */
.elite-profile .race-info-name {
    /* 高級感のある背景と枠・陰影 */
    background: linear-gradient(135deg, rgba(18,22,30,0.96), rgba(10,14,22,0.96));
  
    padding: 6px 10px;
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
.elite-profile .race-info-name {
    position: relative; /* 擬似要素のため */
    overflow: hidden;
    justify-content: center;
    margin-bottom:60px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #b4a162;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    margin-bottom: 10px;
  }
  
  .elite-profile .race-info-name::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255, 215, 0, 0.18), rgba(255,255,255,0));
  
  }

.elite-profile .iconProf {
    width: 60px;
    height: 60px;
}
/* @keyframes frameRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
} */

/* ========== JRA 枠番カラー (1〜8) ========== */
/* 1: 白 */
.horse-frame.waku-1 {
    background: linear-gradient(135deg, #ffffff, #e9e9e9);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18), inset 0 2px 0 rgba(255,255,255,0.7);
}
.horse-frame.waku-1 .frame-number { color: #111; }

/* 2: 黒 */
.horse-frame.waku-2 {
    background: linear-gradient(135deg, #1b1b1b, #000000);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.08);
}
.horse-frame.waku-2 .frame-number { color: #fff; }

/* 3: 赤 */
.horse-frame.waku-3 {
    background: linear-gradient(135deg, #ff3b3b, #c62828);
    box-shadow: 0 8px 24px rgba(198, 40, 40, 0.35), inset 0 2px 0 rgba(255,255,255,0.25);
}
.horse-frame.waku-3 .frame-number { color: #fff; }

/* 4: 青 */
.horse-frame.waku-4 {
    background: linear-gradient(135deg, #2979ff, #1565c0);
    box-shadow: 0 8px 24px rgba(21, 101, 192, 0.35), inset 0 2px 0 rgba(255,255,255,0.22);
}
.horse-frame.waku-4 .frame-number { color: #fff; }

/* 5: 黄 */
.horse-frame.waku-5 {
    background: linear-gradient(135deg, #ffd54f, #ffca28);
    box-shadow: 0 8px 22px rgba(255, 202, 40, 0.32), inset 0 2px 0 rgba(255,255,255,0.5);
}
.horse-frame.waku-5 .frame-number { color: #111; }

/* 6: 緑 */
.horse-frame.waku-6 {
    background: linear-gradient(135deg, #2ecc71, #1e9e56);
    box-shadow: 0 8px 24px rgba(30, 158, 86, 0.34), inset 0 2px 0 rgba(255,255,255,0.22);
}
.horse-frame.waku-6 .frame-number { color: #fff; }

/* 7: 橙 */
.horse-frame.waku-7 {
    background: linear-gradient(135deg, #ff9800, #ef6c00);
    box-shadow: 0 8px 24px rgba(239, 108, 0, 0.34), inset 0 2px 0 rgba(255,255,255,0.22);
}
.horse-frame.waku-7 .frame-number { color: #111; }

/* 8: 桃 */
.horse-frame.waku-8 {
    background: linear-gradient(135deg, #ff77a9, #ec407a);
    box-shadow: 0 8px 24px rgba(236, 64, 122, 0.34), inset 0 2px 0 rgba(255,255,255,0.22);
}
.horse-frame.waku-8 .frame-number { color: #111; }

.frame-number {
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
  
}
.horse-identity {
    flex: 1;
}

.elite-horse-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
 
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.horse-stats {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
}

.stat-item {
    background: rgba(113, 115, 118, 0.18);
    color: #ffffff;
    padding: 2px 4px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(7, 133, 93, 0.35);
    white-space: nowrap;
}

/* 既存のyousouBoxスタイルを上書き */
.yousouBox {
    display: none;
}

.main-container.seishun {
    background-image: url('/img/special/bg_seishun.jpg');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: repeat-y;
    color: #fff;
}


/* 予想公開ページ レース公開ボタン */

.race-buttons-container {
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
    padding: 0 6px 1rem !important;
}

/* ボタンコンテナの高さを可変に */
.button-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
    justify-content: flex-end;
    padding: 0 1rem;
    margin-top: 52%;
}


/* 各レースの背景画像を::before疑似要素に設定 */
.race_01 {
    background-image: url('/img/premium/bg_race_01.png');
}

.race_02 {
    background-image: url('/img/premium/bg_race_02.png');
}

.race_03 {
    background-image: url('/img/premium/bg_race_03.png');
}

.race_04 {
    background-image: url('/img/premium/bg_race_04.png');
}




.race-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    /* パフォーマンス最適化 - backdrop-filterを軽量化 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    /* GPU加速 */
    will-change: transform, box-shadow;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* 煌めきエフェクト用の擬似要素 */
.race-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.6s ease;
    z-index: 1;
}

.race-button:hover::before {
    left: 100%;
}

/* コンテンツの重なり順序調整 */
.race-button > * {
    position: relative;
    z-index: 2;
}

.race-button:hover {
    transform: translateY(-2px) translateZ(0);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.4) 0%, rgba(118, 75, 162, 0.4) 100%);
    box-shadow: 
        0 8px 24px rgba(102, 126, 234, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}


/* 公開バッジ */
.button-badge {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    margin-left: 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    /* 軽量化されたbackdrop-filter */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    /* GPU加速 */
    will-change: transform;
    transform: translateZ(0);
}

/* 公開中スタイル（アニメーション軽量化） */
.race-button .button-badge.is-open {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.8) 0%, rgba(39, 174, 96, 0.8) 100%);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    animation: pulse-green-light 2s ease-in-out infinite;
}

/* 公開前スタイル（アニメーション軽量化） */
.race-button.is-disabled .button-badge.is-close {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.8) 0%, rgba(192, 57, 43, 0.8) 100%);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* 非公開 */
.race-button.is-disabled {
    filter: grayscale(100%);
    pointer-events: none;
    cursor: default;
}

/* 非公開状態でもrace-infoとバッジはopacityを1のまま保持 */
.race-button.is-disabled .race-info,
.race-button.is-disabled .button-badge {
    opacity: 1;
}

/* 軽量化されたパルスアニメーション（公開中） */
@keyframes pulse-green-light {
    0%, 100% {
        opacity: 0.8;
        transform: translateZ(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateZ(0) scale(1.05);
    }
}

/* スペシャル情報 */

.premium-section__inner li img {
    margin-bottom: 8px;

}

/* インフォーメーション */
.race-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
}

.race-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.3rem;
}

.race-info-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.race-info-name {
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.iconProf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 8px;
    vertical-align: middle;
}
.iconProf img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* =========================== */

.premium-section__inner {
    padding:20px 10px;
}

.premium-section__inner ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.premium-section__inner ul li {
    list-style: none;
}

/* 今開催のプレミアムメンバー */
.member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2カラム固定 */
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.member-grid li { list-style: none; }

.member-trigger {
    display: flex;               /* テキストを縦中央寄せ */
    align-items: center;
    width: 100%;
    padding: 12px 14px 12px 64px; /* 左にアイコン分の余白 */
    text-align: left;
    border-radius: 12px;
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 800;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
    position: relative;
}

.member-trigger small {
    display: block;
    font-weight: 700;
    font-size: 0.6rem;
    color: #666;
    margin-top: 2px;
    white-space: nowrap;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.member-trigger::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px; /* 枠線の太さ */
    background: linear-gradient(135deg, #ffd700, #ff8a00);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

.member-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.6);
}

.member-avatar {
    position: absolute;
    left: 6px;                     /* セル内左に配置 */
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
    background: radial-gradient(circle at 30% 30%, #2d6c7a, #0a3a45);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.45);
    z-index: 1;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.member-label {
    display: block;
    line-height: 1.2;
}

.member-label .name {
    font-size: 0.9rem;
    white-space: nowrap;
}

.premium-section__inner .member-grid {
    display: grid !important; /* 汎用ulのflexを上書き */
    grid-template-columns: 49% 49%;
    gap: 6px 6px; /* 行×列の間隔（単位付き） */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Fancyboxで表示するインラインモーダル本体 */
.member-modal {
    background: #fff;
    color: #222;
    padding: 18px;
    border-radius: 12px;
    max-width: 680px;
}

.member-modal .modal-title {
    font-size: 1.25rem;
    font-weight: 900;
    margin: 0 0 8px 0;
    color: #111;
    text-align: center; /* 写真と名前を中央揃え */
}

.member-modal .modal-title img {
    display: block;
    margin: 0 auto 8px;
    height: auto;
}

.member-modal .modal-body {
    font-size: 0.95rem;
    line-height: 1.7;
}

.premium-section-slider {
    background: black;
    padding: 1rem 0;
}


.premium-section .section-title {
    width: 100%;
    height: 100%;
    /* 複数のグラデーションを重ねてパターンを作成 */
    background-image:
      /* 右下がりの線 */
      repeating-linear-gradient(
        45deg,
        transparent,
        transparent 35px,
        rgba(212, 175, 55, 0.2) 35px,
        rgba(212, 175, 55, 0.2) 36px
      ),
      /* 左下がりの線 */
      repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 35px,
        rgba(212, 175, 55, 0.2) 35px,
        rgba(212, 175, 55, 0.2) 36px
      );
    background-size: 200% 200%;
    padding: 1rem 1rem;
    color: #DAA520;
    font-weight: 900;
    font-size: 1rem;
    text-align: center;
    position: relative;
    box-shadow: 
        0 8px 12px rgba(218, 165, 32, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: inherit;
    border-top: 2px solid #DAA520;
    border-bottom: 2px solid #DAA520;
    border-left: inherit;
    margin-bottom: 0;
}

/* 優馬プレミアム */
.main-container.yuma .premium-section .section-title {
    background: linear-gradient(135deg, #4f0088 0%, #5d0085 25%, #7900ba 50%, #43138b 75%, #580096 100%);
    background-size: 200% 200%;
    padding: 1rem 1rem;
    color: #DAA520;
    font-weight: 900;
    font-size: 1rem;
    text-align: center;
    position: relative;
    box-shadow: 
        0 8px 12px rgba(218, 165, 32, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: inherit;
    border-top: 2px solid #DAA520;
    border-bottom: 2px solid #DAA520;
    border-left: inherit;
    margin-bottom: 0;
}

.main-container.yuma .premium-section-slider {
    background: rgb(70, 0, 150);
    padding: 1rem 0;
}

.main-container.yuma .premium-section {
    background-color: #370051;
    color: #fff;
}

/* .premium-section .section-title::before {
    content: "✦";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #FFD700;
    font-size: 1.5rem;
    animation: sparkle 2s ease-in-out infinite;
}

.premium-section .section-title::after {
    content: "✦";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #FFD700;
    font-size: 1.5rem;
    animation: sparkle 2s ease-in-out infinite 1s;
} */

@keyframes luxuryGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes sparkle {
    0%, 100% { 
        opacity: 0.6; 
        transform: translateY(-50%) scale(1);
    }
    50% { 
        opacity: 1; 
        transform: translateY(-50%) scale(1.2);
    }
}

/* プレミアム的中実績カード */
.premium-hit-card {
    background: #f5f5f5;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 300px;
    max-width: 600px;
    position: relative;
    margin-top: 10px;
    
}

/* ヘッダー部分 */
.premium-hit-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #8B4513 75%, #A0522D 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-height: 80px;
    border-radius: 12px 12px 0 0;
    padding: 1rem;
    line-height: 1;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    border-bottom:#FFA500 solid 3px;
}

/* グラデーションアニメーション */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* プレミアムシャインエフェクト */
.premium-hit-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.premium-hit-title {
    display: flex;
    align-items: center;
    justify-content: left;
    flex: 1;
}

.premium-hit-title-left {
    display: flex;
    justify-items: center;
    align-items: center;
    flex-direction: column;
    margin-right: 4px;
    /* gap: 1rem; */
}

.premium-hit-title h3 {
    margin: 0;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.premium-hit-title .subtitle {
    font-size: 8px;
    opacity: 0.9;
    margin-top: 0.2rem;
}

.premium-hit-name {
    font-size: 20px;
    font-weight: 900;
    text-align: left;
    margin-right: 8px;
}

.premium-hit-avatar {
    width: 80px;
    height: 80px;
    border-radius: 8%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
    background: radial-gradient(circle, #FFD700, #FFA500);
    position: absolute;
    right: 1rem;
    top: -10px;
    z-index: 100;
}

.premium-hit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* メインコンテンツ */
.premium-hit-content {
    padding: 1.5rem;
    text-align: center;
    /* ガラスエフェクト */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    border-radius: 0 0 12px 12px;
}

.premium-hit-main-text {
    color: var(--main-black);
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}


.prebamei {
    font-size: 1rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.pretekicyu {
    font-size: 1rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.pretekicyu li {
    color: #FF4500;
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 0.5rem;
}





/* 的中テキストのスタイル */
.hit-mark {
    background: linear-gradient(45deg, #FF4500, #FF6347);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: bold;
    margin-left: 0.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px rgba(255, 69, 0, 0.3);
}

/* ボタン */
.premium-hit-button {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.premium-hit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 165, 0, 0.4);
}

.premium-hit-button .arrow {
    margin-left: 0.5rem;
    font-size: 1.2rem;
}


/* 買い目リスト */
.kaime_list {
    background-image: radial-gradient(rgba(30, 24, 12, 1), rgba(17, 14, 8, 1) 80%);
    border: 1px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 6px 18px rgba(255, 215, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    margin-top:15px
}

.kaime_list__ttl {
    background: linear-gradient(90deg, #8a6d2b, #c8a951);
    color: #fff;
    padding: 5px 15px;
    font-weight: 700;
    font-size:1.1rem
}

.kaime_list__ttl .score {
    font-weight: 400;
    font-size: .8rem;
    padding-left:5px
}

.kaime_list__inner {
    padding:15px
}

.umaren-main li {
    display: flex;
    gap: 10px 3px;
    align-items: center;
    font-weight:700
}

.umaren-main li .ratio,
.umaren-sub .ratio
{
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: .9rem;
    padding-left:5px
}

.umaren-main {
    
    
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap:10px
}

.umaren-sub {
    list-style: none;
    font-family: Inter, sans-serif;
    font-weight:700;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #c8a951;
    padding-top: 15px;

}


.formation_list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap:10px
}

.formation_list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 1.1rem;
    font-weight:800
}

.formation_label {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    background: #fffbe6;
    font-size: .9rem;
    color: #7a5d1a;
    padding: 0 16px 0 8px;
    line-height: 2;
    clip-path:polygon(0 0, 100% 0, 80% 100%, 0 100%)
}

.formation_hr {
    width: 100%;
    border-color: #c8a951;
    margin:15px 0
}


/* プレミアム攻略コラム */

.premium .article-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    width: 100%;
    color: var(--text-primary, #ffffff);
    margin: 0;
    padding: 0.5rem 0;
    padding-left: 1rem;
    border-left: 5px solid #d0cd64;
    border-bottom: 2px solid #d0cd64;
}

.premium_main_container {
    background-color: #FFF;
    color: #000;
}
















/* ポイントサービス */
.premium-service-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.service-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.service-card h3 {
    color: var(--main-black);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.service-card p {
    color: #666;
    line-height: 1.6;
}

/* アバウトアス */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin: 2rem 0;
    align-items: center;
}

.about-text h3 {
    color: var(--main-black);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.about-text p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.about-features {
    list-style: none;
    padding: 0;
}

.about-features li {
    color: var(--main-black);
    padding: 0.5rem 0;
    font-weight: 500;
}

/* 予想師紹介 */
.forecaster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.forecaster-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.forecaster-card:hover {
    transform: translateY(-5px);
}

.forecaster-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.forecaster-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.forecaster-info {
    padding: 1.5rem;
}

.forecaster-info h3 {
    color: var(--main-black);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.forecaster-title {
    color: var(--premium);
    font-weight: bold;
    margin-bottom: 1rem;
}

.forecaster-desc {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.forecaster-stats {
    display: flex;
    gap: 1rem;
}

.stat {
    background: var(--premium);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

/* 料金システム */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.pricing-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-5px);
}

.pricing-card.premium {
    border: 3px solid var(--premium);
    transform: scale(1.05);
}

.pricing-header {
    padding: 2rem;
    text-align: center;
    position: relative;
}

.pricing-card.basic .pricing-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.pricing-card.premium .pricing-header {
    background: linear-gradient(135deg, var(--premium), #8B4513);
    color: white;
}

.pricing-card.vip .pricing-header {
    background: linear-gradient(135deg, #FFD700, #FFA500);
}

.pricing-header h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.price {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.price span {
    font-size: 1rem;
    font-weight: normal;
}

.popular {
    position: absolute;
    top: -10px;
    right: 20px;
    background: #FF4500;
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

.pricing-features {
    list-style: none;
    padding: 2rem;
    margin: 0;
}

.pricing-features li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #eee;
    color: var(--main-black);
}

.pricing-button {
    display: block;
    width: 90%;
    margin: 0 auto 2rem;
    padding: 1rem;
    background: var(--main-black);
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.pricing-button:hover {
    background: #333;
    transform: translateY(-2px);
}

.pricing-button.premium {
    background: var(--premium);
}

.pricing-button.premium:hover {
    background: #8B4513;
}

/* Q&A */
.qa-container {
    margin: 2rem 0;
}

.qa-item {
    background: white;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qa-question {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.qa-question h3 {
    color: var(--main-black);
    margin: 0;
    font-size: 1.1rem;
}

.qa-toggle {
    font-size: 1.5rem;
    color: var(--premium);
    font-weight: bold;
    transition: transform 0.3s ease;
}

.qa-item.active .qa-toggle {
    transform: rotate(45deg);
}

.qa-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
}

.qa-item.active .qa-answer {
    padding: 1.5rem;
    max-height: 500px;
    opacity: 1;
}

.qa-answer p {
    color: #666;
    line-height: 1.8;
    margin: 0;
}



.qa-item.active .qa-answer {
    padding: 1.5rem;
    max-height: 500px;
    opacity: 1;
}

.qa-answer p {
    color: #666;
    line-height: 1.8;
    margin: 0;
}

.price {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.price span {
    font-size: 1rem;
    font-weight: normal;
}

.popular {
    position: absolute;
    top: -10px;
    right: 20px;
    background: #FF4500;
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

.pricing-features {
    list-style: none;
    padding: 2rem;
    margin: 0;
}

.pricing-features li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #eee;
    color: var(--main-black);
}

.pricing-button {
    display: block;
    width: 90%;
    margin: 0 auto 2rem;
    padding: 1rem;
    background: var(--main-black);
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.pricing-button:hover {
    background: #333;
    transform: translateY(-2px);
}

.pricing-button.premium {
    background: var(--premium);
}

.pricing-button.premium:hover {
    background: #8B4513;
}

/* Q&A */
.qa-container {
    margin: 2rem 0;
}

.qa-item {
    background: white;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qa-question {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.qa-question h3 {
    color: var(--main-black);
    margin: 0;
    font-size: 1.1rem;
}

.qa-toggle {
    font-size: 1.5rem;
    color: var(--premium);
    font-weight: bold;
    transition: transform 0.3s ease;
}

.qa-item.active .qa-toggle {
    transform: rotate(45deg);
}

.qa-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
}

.qa-item.active .qa-answer {
    padding: 1.5rem;
    max-height: 500px;
    opacity: 1;
}

.qa-answer p {
    color: #666;
    line-height: 1.8;
    margin: 0;
}

/* 
ファンクラブ */

/*ファンクラブ*/
.Fanclub{
	width: 100%;
	margin: 20px 0px;
	background: #fff;
	padding: 3%;
	box-sizing: border-box;
	color: #333;
	border-radius: 5px;
	clear: both;
}

.Fanclub h3{
	margin: 0px 0px 20px 0px;
	background: #ff7800;
	padding: 2%;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	border-radius: 3px;
	color: #333;
	line-height: 120%;
}

.Fanclub dl{margin: 0px 0px 20px 0px;}

.Fanclub dl dt{
	background: #88bb0e;
	padding: 1%;
	margin: 0px 0px 10px 0px;
	font-size: 18px;
	border-radius: 3px;
	font-weight: bold;
}

.Fanclub .ImgWrap{
	width: 100%;
	margin: 15px 0px;
}

.Fanclub .ImgWrap img{
	width: 100%;
}

.Fanclub .TxtWrap{
	width: 100%;
	margin: 0px 0px 0px 0px;
}

.Fanclub .CommentWrap{
	margin: 10px 0px;
	background: #ffe8c5;
	padding: 2%;
	box-sizing: border-box;
	color: #333;
	border-radius: 5px;
}

.Fanclub .CommentWrap p{
	margin: 0px;
	padding: 0%;
	line-height: 140%;
}

.Fanclub .MailWrap{
	margin: 10px 0px;
	background: #afe9ff;
	padding: 1%;
	box-sizing: border-box;
	color: #333;
	line-height: 150%;
	border-radius: 5px;
}

.Fanclub .MailWrap h4{
	margin: 0px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

.Fanclub .MailWrap p {
	margin: 0px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

/* 金脈 */

:root {
    --gold-gradient: linear-gradient(145deg, #ffd700, #fcc200, #e9a200, #ffd700);
    --dark-bg: #1a1a1a;
    --card-bg: radial-gradient(circle at 100% 100%, #3c3c3c 0, #2b2b2b 35%, #1c1c1c 100%);
    --text-light: #f0f0f0;
    --text-gold: #ffd700;
    --border-gold: rgba(255, 215, 0, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-gold: rgba(255, 215, 0, 0.2);
  }




.kinmyaku .kinmyakuhorse-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    margin: 20px;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-image: var(--gold-gradient) 1;

}
.kinmyaku horse-card p {padding: 0px;}

.kinmyaku .race-info {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 0px;
    border-bottom: 1px solid var(--border-gold);
    text-align: center;
  }
  .race-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-light);
  }
  .race-details {
    font-size: 1em;
    color: #bfa860;
    font-weight: 600;
  }

  .horse-details {
    display: flex;
    align-items: center;
  
  }
  .horse-number {
    background: var(--gold-gradient);
    color: #333;
    border-radius: 50%;
    min-width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6em;
    font-weight: 700;
    margin-right: 25px;
    box-shadow: 0 0 15px var(--shadow-gold), inset 0 2px 4px rgba(0,0,0,0.3);
    text-shadow: 0 1px 1px rgba(255,255,255,0.4);
  }

  .horse-name-section {
    flex-grow: 1;
    margin-bottom: 10px;
  }
  .horse-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: transparent;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 15px var(--shadow-gold);
    line-height: 1.1;
  }
  .trainer-jockey {
    font-size: 0.75em;
    color: #ccc;
    margin-top: 8px;
    line-height: 1.5;
  }

  .rating-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-gold);
    border-radius: 10px;
    padding: 10px;

  }
  .rating-title {
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 0 18px 0;
    text-align: center;
    color: var(--text-gold);
    letter-spacing: 2px;
  }

  .rating-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 10px 0;
  }
  .rating-label {
    font-size: 1em;
    font-weight: 600;
    color: #bfa860;
  }
  .stars {
    font-size: 1.2rem;
    letter-spacing: 3px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .star-filled, .star-empty {
    transition: transform 0.2s ease-out, text-shadow 0.2s ease-out;
  }

  .stars:hover .star-filled,
  .stars:hover .star-empty {
    transform: scale(1.2);
  }

  .star-filled {
    color: var(--text-gold);
    text-shadow: 0 0 10px var(--shadow-gold);
  }
  .star-empty {
    color: #555;
  }

  .reasons-list-dark {
    font-family: sans-serif;
    list-style: none;
    padding-left: 0;
}

.reasons-list-dark li {
    background: linear-gradient(90deg, rgba(200, 0, 0, 0.3) 0%, rgba(50, 50, 50, 0.1) 100%); /* 赤から透明へのグラデーション */
    color: #f0f0f0; /* 明るい文字色 */
    padding: 15px 20px;
    margin-bottom: 12px;
    border-radius: 5px;
    border-left: 3px solid #ff4141; /* 明るい赤のアクセント */
    font-weight: bold;
    transition: transform 0.2s ease, background-color 0.2s ease; /* ホバー時のアニメーション */
}

/* マウスを乗せると少し浮き上がるエフェクト */
.reasons-list-dark li:hover {
    transform: translateX(5px);
    background-color: rgba(200, 0, 0, 0.4);
}
  .reasons-list-modern {
    font-family: sans-serif;
    list-style: none;
    padding-left: 0;
}

.reasons-list-modern li {
    position: relative; /* アイコンを配置するため */
    background-color: #ffffff; /* 白背景 */
    color: #333; /* 暗い文字色 */
    padding: 15px 20px 15px 45px; /* 内側の余白（左側はアイコン分を確保）*/
    margin-bottom: 12px;
    border-radius: 8px;
    border-left: 4px solid #d4af37; /* 左側のゴールドのライン */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影をつけて立体感を出す */
    font-weight: bold;
}

/* 箇条書きのアイコン（✔） */
.reasons-list-modern li::before {
    content: '✔';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #d4af37; /* ゴールドのアイコン */
    font-weight: 900;
}

.reasons-list-classic {
    font-family: 'MS Mincho', 'Hiragino Mincho ProN', serif; /* 明朝体のフォント */
    list-style: none;
    padding-left: 0;
    background-color: #fdfaf4; /* 少しクリーム色がかった背景 */
    border: 1px solid #ddd;
    padding: 20px;
}

.reasons-list-classic li {
    color: #333;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #c90000; /* 赤い破線 */
}

.reasons-list-classic li:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

/* 箇条書きのアイコン（※） */
.reasons-list-classic li::before {
    content: '※';
    color: #c90000; /* 赤い米印 */
    font-weight: bold;
    margin-right: 10px;
}

.highlight {
    background: linear-gradient(to right, #e7bf3a, #ffdd70); /* ゴールドのグラデーション */
    color: #222;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}