@charset "UTF-8";

/* --- 1. ニュース一覧（カード） --- */
.news-card { 
    cursor: pointer; 
    transition: transform 0.2s, box-shadow 0.2s; 
    border: 1px solid #f0f0f0; 
    background: #fff;
    overflow: hidden; 
}
.news-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: #e0e0e0; }

.news-grid-has-image { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 1rem; 
    width: 100%; 
}
@media (min-width: 768px) {
    .news-grid-has-image { 
        grid-template-columns: minmax(120px, 200px) 1fr; 
        align-items: center;
    }
}

.news-thumb-container {
    overflow: hidden;
    border-radius: 8px;
    width: 100%;
    aspect-ratio: 16/9;
}
.news-thumb { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
}

.cat-badge { font-size: 0.75rem; padding: 4px 12px; border-radius: 20px; color: white; display: inline-block; font-weight: 500; letter-spacing: 0.05em; }

/* --- 2. モーダル全体の設定 (Swiper用) --- */
.article-modal { 
    position: fixed; top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.85); 
    z-index: 9999; 
    display: none; 
    opacity: 0; 
    transition: opacity 0.3s ease;
}
.article-modal.active { display: block; opacity: 1; }

/* CMSプレビュー用 */
.article-modal.preview-mode {
    display: block; visibility: hidden; 
}
.article-modal.preview-mode.active { visibility: visible; }
.article-modal.preview-mode .swiper-wrapper { display: block; height: 100%; overflow-y: auto; }
.article-modal.preview-mode .swiper-slide { height: auto; min-height: 100%; }

/* Swiper コンテナ */
.swiper { width: 100%; height: 100%; }
.swiper-slide { 
    height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; 
    box-sizing: border-box; padding-bottom: 80px; 
}

/* コンテンツの器 */
.modal-content-wrapper { 
    max-width: 680px; margin: 60px auto 60px auto; padding: 40px; 
    position: relative; background: #fff; border-radius: 16px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); word-wrap: break-word; overflow-wrap: break-word;
}

/* 閉じるボタン */
.modal-close-btn { 
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.modal-content-wrapper > img {
    display: block;
    margin: 2rem auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    max-width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
}
.modal-meta-header { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; padding-top:1.5rem; }
/* もしスマホで余白を詰めたい場合（任意） */
@media (max-width: 768px) {
    .modal-meta-header {
        padding-top: 1rem; 
    }
}
.modal-date { color: #495057; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.05em; }
.modal-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 1rem; }
.modal-tag-item { font-size: 0.8rem; color: #495057; background: #f8f9fa; padding: 4px 10px; border-radius: 4px; text-decoration: none; transition: 0.2s; }
.modal-tag-item:hover { background: #e9ecef; color: #495057; }
.modal-body-text { font-size: 1.05rem; line-height: 1.9; color: #333; text-align: left; }

.swiper-button-prev-custom, .swiper-button-next-custom { 
    position: fixed; top: 50%; transform: translateY(-50%); font-size: 1.2rem; width: 50px; height: 50px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); color: #000; cursor: pointer; transition: 0.2s; 
    display: flex; align-items: center; justify-content: center; z-index: 10001;
}
.swiper-button-prev-custom { left: 40px; }
.swiper-button-next-custom { right: 40px; }
.swiper-button-disabled { opacity: 0.3; pointer-events: none; }

@media (max-width: 992px) { 
    .swiper-button-prev-custom, .swiper-button-next-custom { display: none; } 
    .modal-content-wrapper { padding: 0 15px 80px 15px; margin-top: 80px; }
}
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- 3. 新規追加: Load More & Admin UI --- */

/* Load More (Index) */
.news-item-hidden { display: none !important; }
.load-more-container { margin-top: 3rem; text-align: center; }
.btn-load-more {
    background-color: #fff; color: #333; border: 1px solid #ddd; padding: 12px 40px;
    border-radius: 50px; font-weight: 500; transition: 0.3s; letter-spacing: 0.05em;
}
.btn-load-more:hover { background-color: #f8f9fa; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* Animation */
.fade-in-up { animation: fadeInUp 0.5s ease forwards; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Admin Panel List Scroll */
.admin-list-container {
    max-height: 80vh; /* 画面の高さに応じてスクロール */
    overflow-y: auto;
    padding-right: 5px; /* スクロールバーの干渉を防ぐ */
}
/* スクロールバーのデザイン(Chrome/Safari) */
.admin-list-container::-webkit-scrollbar { width: 8px; }
.admin-list-container::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; }
.admin-list-container::-webkit-scrollbar-track { background-color: #f1f1f1; }

.category-filter-buttons .btn {
    margin-right: 0.5rem;   /* me-2 より少し広め */
    margin-bottom: 0.5rem;
}

.category-filter-buttons .btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.article-modal {
    will-change: transform, opacity;
}