/* ========================================
   NEWS ページ - 強制スタイル上書き
   他のCSSやJavaScriptよりも優先適用
   ======================================== */

/* グリッドレイアウト - 3カラム */
.news-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
}

/* カード固定高さ */
.news-card {
    display: flex !important;
    flex-direction: column !important;
    height: 720px !important;
    min-height: 720px !important;
    max-height: 720px !important;
    overflow: hidden !important;
}

/* 画像固定高さ */
.news-card-image {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    flex-shrink: 0 !important;
}

/* コンテンツエリア - スクロール可能 */
.news-card-content {
    display: flex !important;
    flex-direction: column !important;
    height: 480px !important;
    min-height: 480px !important;
    max-height: 480px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 30px !important;
}

/* フィルターで非表示のカード */
.news-card[style*="display: none"],
.news-card[style*="display:none"] {
    display: none !important;
}

/* スクロールバーのスタイル */
.news-card-content::-webkit-scrollbar {
    width: 8px !important;
}

.news-card-content::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

.news-card-content::-webkit-scrollbar-thumb {
    background: #2C7A7B !important;
    border-radius: 4px !important;
}

.news-card-content::-webkit-scrollbar-thumb:hover {
    background: #234E52 !important;
}

/* Firefoxのスクロールバー */
.news-card-content {
    scrollbar-width: thin !important;
    scrollbar-color: #2C7A7B #f1f1f1 !important;
}

/* タイトルを3行まで表示 */
.news-card h3 {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    min-height: 4.5em !important;
    max-height: 4.5em !important;
    -webkit-line-clamp: 3 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 関連コンテンツのホバーエフェクト */
.related-content a:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

/* レスポンシブ */
@media (max-width: 1200px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr !important;
    }
}