/* わかる症状ボタンのアニメーション効果 */

/* パルスアニメーション（常時ボタンが少し拡大縮小する） */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* シャイニーアニメーション（光沢が流れる） */
@keyframes shine {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ボタンにパルスアニメーションを追加 */
.symptoms-toggle-btn {
    background: linear-gradient(135deg, #6EDFA6 0%, #7FE5B4 100%);
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    margin-left: 10px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    
    /* パルスアニメーションを追加 */
    animation: pulse 2s ease-in-out infinite;
    
    /* 影でボタン感を強調 */
    box-shadow: 0 2px 6px rgba(110, 223, 166, 0.4);
}

/* ホバー時は通常のスケールに戻す */
.symptoms-toggle-btn:hover {
    animation: none;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(110, 223, 166, 0.5);
}

/* アクティブ時はアニメーション停止 */
.symptoms-toggle-btn.active {
    background: linear-gradient(135deg, #5BA3F5 0%, #74B3F7 100%);
    animation: none;
    transform: scale(1);
}

/* セレクトプラン用のボタンカラー（青系） */
.symptoms-toggle-btn.select-btn {
    background: linear-gradient(135deg, #5BA3F5 0%, #74B3F7 100%);
    box-shadow: 0 2px 6px rgba(91, 163, 245, 0.4);
}

.symptoms-toggle-btn.select-btn:hover {
    box-shadow: 0 4px 12px rgba(91, 163, 245, 0.5);
}

.symptoms-toggle-btn.select-btn.active {
    background: linear-gradient(135deg, #3498DB 0%, #5BA3F5 100%);
}

/* ハイグレードプラン用のボタンカラー（黄色系） */
.symptoms-toggle-btn.highgrade-btn {
    background: linear-gradient(135deg, #F1C40F 0%, #F39C12 100%);
    box-shadow: 0 2px 6px rgba(243, 156, 18, 0.4);
}

.symptoms-toggle-btn.highgrade-btn:hover {
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.5);
}

.symptoms-toggle-btn.highgrade-btn.active {
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
}

/* プレミアムプラン用のボタンカラー（オレンジ系） */
.symptoms-toggle-btn.premium-btn {
    background: linear-gradient(135deg, #FF7F50 0%, #FF6347 100%);
    box-shadow: 0 2px 6px rgba(255, 127, 80, 0.4);
}

.symptoms-toggle-btn.premium-btn:hover {
    box-shadow: 0 4px 12px rgba(255, 127, 80, 0.5);
}

.symptoms-toggle-btn.premium-btn.active {
    background: linear-gradient(135deg, #FF6347 0%, #E74C3C 100%);
}

/* よりシンプルな点滅効果を追加する場合（オプション） */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(110, 223, 166, 0.4);
    }
    50% {
        box-shadow: 0 2px 12px rgba(110, 223, 166, 0.7);
    }
}

/* グロー効果を使いたい場合は以下をコメント解除
.symptoms-toggle-btn {
    animation: pulse 2s ease-in-out infinite, glow 2s ease-in-out infinite;
}
*/