/* よくある質問ページのスタイル - 新デザイン対応 */

/* カテゴリカードのホバー効果 */
.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    border-color: var(--primary-color) !important;
}

/* QA項目のホバー効果 */
.qa-question:hover {
    background-color: #f8f9fa !important;
}

/* アクティブ状態のスタイル */
.qa-question.active + .qa-answer {
    max-height: 1000px !important;
}

.qa-question.active .qa-toggle {
    transform: rotate(45deg);
    background: var(--primary-dark) !important;
}

/* フォーカス状態 */
.qa-question:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

/* アニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qa-item {
    animation: fadeIn 0.5s ease-in-out;
}

/* スクロール時のスムース効果 */
html {
    scroll-behavior: smooth;
}

/* カテゴリへのジャンプ時のハイライト */
.qa-category:target h2 {
    animation: highlight 2s ease-in-out;
}

@keyframes highlight {
    0%, 100% { 
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
    }
    50% { 
        color: var(--primary-light);
        border-bottom-color: var(--primary-light);
    }
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: 1fr !important;
    }
    
    .qa-question {
        padding: 1rem !important;
    }
    
    .qa-question h3 {
        font-size: 1rem !important;
    }
    
    .qa-answer-content {
        padding: 0 1rem 1rem !important;
    }
    
    .qa-toggle {
        width: 28px !important;
        height: 28px !important;
        font-size: 1rem !important;
    }
}