/**
 * Meta Logic — ニュース共通スタイル
 */

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");

/* ========== 記事・一覧 共通レイアウト（記事ベース） ========== */
/* --- 基本設定 --- */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Noto Sans JP', sans-serif; min-height: 100vh; width: 100%; display: flex; flex-direction: column; font-weight: 700; }
        a { text-decoration: none; color: inherit; transition: 0.3s; }
.bg-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; pointer-events: none; }
        .bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); }

        .top-nav { position: sticky; top: 0; left: 0; width: 100%; height: 60px; background-color: rgba(10, 10, 10, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.15); z-index: 1100; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); flex-shrink: 0; }
        .nav-scroll { display: flex; gap: 10px; padding: 0 15px; overflow-x: auto; white-space: nowrap; width: 100%; max-width: 900px; align-items: center; scrollbar-width: none; }
        .nav-scroll::-webkit-scrollbar { display: none; }
        .nav-btn { color: #ececf1; border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: 5px; font-weight: 500; }
        .nav-btn:hover { color: #5AA8D6; border-color: #5AA8D6; }
        .nav-btn.primary { background: linear-gradient(135deg, #1e5799 0%, #5AA8D6 100%); color: white; border: none; font-weight: bold; }

        /* --- 記事ページ専用CSS --- */
        .article-container { width: 100%; max-width: 900px; margin: 0 auto; padding: 40px 20px; flex: 1; }
        .article-header { margin-bottom: 50px; border-bottom: 1px solid #333; padding-bottom: 30px; }
        .article-meta { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; font-size: 0.9rem; }
        .category-tag { background: #5AA8D6; color: #fff; padding: 4px 12px; border-radius: 4px; font-weight: 900; letter-spacing: 1px; }
        .post-date { color: #aaa; font-weight: normal; }
        .article-title { font-size: 2.2rem; font-weight: 900; line-height: 1.3; margin-bottom: 25px; color: #fff; }
        .article-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; margin-bottom: 20px; border: 1px solid #333; }

        .article-body { font-size: 1.05rem; line-height: 2.0; color: #fff; letter-spacing: 0.05em; font-weight: 700; }
        .article-body h2 { font-size: 1.8rem; color: #fff; border-left: 8px solid #5AA8D6; padding-left: 20px; margin: 60px 0 30px; font-weight: 900; clear: both; }
        .article-body h3 { font-size: 1.4rem; color: #5AA8D6; margin: 50px 0 25px; font-weight: 900; clear: both; }
        .article-body p { margin-bottom: 30px; }
        .article-body strong { color: #fff; background: transparent; border-bottom: 2px solid #5AA8D6; padding-bottom: 1px; }
        
        .info-box { background: #222; border: 1px solid #444; border-radius: 12px; padding: 30px; margin: 40px 0; }
        .info-list { list-style: none; }
        .info-list li { margin-bottom: 12px; display: flex; gap: 15px; border-bottom: 1px solid #333; padding-bottom: 12px; }
        .info-list li:last-child { border-bottom: none; padding-bottom: 0; }
        .info-label { color: #5AA8D6; font-weight: 900; min-width: 100px; }

        blockquote { border-left: 4px solid #555; margin: 30px 0; padding: 15px 25px; background: transparent; color: #ccc; font-style: italic; font-weight: normal; }

        /* テーブル */
        .table-wrapper { overflow-x: auto; margin: 30px 0; border-radius: 8px; border: 1px solid #333; }
        table { width: 100%; border-collapse: collapse; min-width: 500px; }
        th, td { padding: 15px; text-align: left; border-bottom: 1px solid #333; }
        th { background-color: #222; color: #aaa; font-weight: bold; text-transform: uppercase; font-size: 0.85rem; }
        tr:last-child td { border-bottom: none; }
        tr:hover td { background-color: rgba(255,255,255,0.02); }

        .back-link-area { text-align: center; margin-top: 80px; padding-top: 40px; border-top: 1px solid #333; }
        .back-btn { display: inline-block; padding: 12px 40px; border-radius: 30px; background: #333; color: #fff; font-weight: bold; border: 1px solid #555; }
        .back-btn:hover { background: #5AA8D6; border-color: #5AA8D6; }
/* プロゲーマーカード (Mini Style) */
        .preview-grid-container { margin-bottom: 40px; }
        .preview-team-name { font-size: 1.2rem; color: #fff; margin-bottom: 15px; border-left: 4px solid #555; padding-left: 10px; font-weight: 900; }
        .preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; width: 100%; }
        .preview-card { background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%); border: 1px solid #333; border-radius: 12px; overflow: hidden; cursor: pointer; position: relative; height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
        .preview-card:hover { transform: translateY(-5px); border-color: #5AA8D6; box-shadow: 0 10px 25px rgba(90, 168, 214, 0.2); }
        .preview-card-empty { cursor: default; }
        .preview-bg-circle { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, rgba(90, 168, 214, 0.2) 0%, rgba(90, 168, 214, 0) 70%); border: 1px solid rgba(90, 168, 214, 0.3); z-index: 1; transition: 0.3s; }
        .preview-card:hover .preview-bg-circle { transform: translateX(-50%) scale(1.1); background: rgba(90, 168, 214, 0.1); }
        .preview-thumb { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 100px; height: 140px; object-fit: cover; z-index: 2; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5)); transition: 0.3s; }
        .preview-card:hover .preview-thumb { transform: translateX(-50%) scale(1.05); }
        .preview-thumb-empty { opacity: 0.6; filter: grayscale(100%) brightness(0.8); width: 80px; height: auto; top: 40px; }
        .preview-info { position: relative; z-index: 3; width: 100%; padding: 10px 5px; background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.8) 80%, transparent 100%); text-align: center; border-top: 1px solid rgba(255,255,255,0.05); }
        .preview-name { font-weight: 900; font-size: 1rem; color: #fff; display: block; text-transform: uppercase; margin-bottom: 2px; }
        .preview-team { font-size: 0.7rem; color: #aaa; display: block; font-weight: 500; }
        .preview-team-logo { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; background: #fff; border-radius: 50%; padding: 2px; object-fit: contain; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.5); border: 1px solid #222; }
        @media (max-width: 600px) { .preview-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .preview-card { height: 180px; } .preview-thumb { width: 80px; height: 110px; top: 15px; } .preview-thumb-empty { width: 60px; top: 35px; } .preview-bg-circle { width: 70px; height: 70px; top: 25px; } .preview-name { font-size: 0.8rem; } .preview-team { font-size: 0.6rem; } }

        /* モーダル用CSS */
        .player-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 3000; display: none; justify-content: center; align-items: flex-start; padding: 20px; overflow-y: auto; opacity: 0; transition: opacity 0.2s; }
        .player-modal-overlay.show { display: flex; opacity: 1; }
        .player-modal-content { background: #111; width: 100%; max-width: 1000px; border-radius: 24px; border: 1px solid #333; box-shadow: 0 20px 50px rgba(0,0,0,0.8); position: relative; margin-top: 40px; margin-bottom: 40px; animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); overflow: hidden; }
        @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .modal-close-btn { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(0,0,0,0.5); color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 1.8rem; border: 1px solid rgba(255,255,255,0.2); z-index: 10; transition: background 0.2s; }
        .modal-close-btn:hover { background: rgba(255,255,255,0.1); }
        .pm-header { height: 250px; background-color: #222; position: relative; background-size: cover; background-position: top center; }
        .pm-header::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 0%, #111 100%); }
        .pm-body { padding: 40px 50px 60px; }
        .pm-name-area { display: flex; align-items: baseline; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }
        .pm-name { font-size: 3rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: 2px; text-transform: uppercase; }
        .pm-name-ja { font-size: 1.2rem; color: #aaa; font-weight: 700; }
        .pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
        .pm-box { background: #161616; border: 1px solid #333; border-radius: 16px; padding: 30px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
        .pm-box-img { padding: 0; border: none; background: transparent; box-shadow: none; margin-bottom: 30px; }
        .pm-player-full-img { width: 100%; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.5); display: block; }
        .pm-img-container { position: relative; }
        .pm-team-logo-overlay { position: absolute; top: 10px; right: 10px; width: 70px; height: 70px; background: #fff; border-radius: 50%; padding: 5px; object-fit: contain; box-shadow: 0 5px 20px rgba(0,0,0,0.7); z-index: 2; border: 3px solid #111; }
        .pm-section-title { font-size: 1.1rem; color: #fff; border-bottom: 2px solid #5AA8D6; padding-bottom: 10px; margin-bottom: 20px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
        .pm-list { list-style: none; font-size: 1rem; color: #eee; line-height: 1.6; }
        .pm-list li { display: flex; justify-content: space-between; border-bottom: 1px dashed #333; padding: 12px 0; }
        .pm-label { color: #888; font-size: 0.9rem; font-weight: 500; letter-spacing: 1px; }
        .pm-list li span:last-child { text-align: right; }
        .sns-links { display: flex; gap: 20px; margin-top: 15px; flex-wrap: wrap; }
        .sns-icon { display: block; width: 50px; height: 50px; transition: transform 0.2s; }
        .sns-icon:hover { transform: scale(1.1); }
        .sns-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
        .buy-link { font-size: 0.75rem; color: #888; text-decoration: underline; display: block; margin-top: 4px; transition: 0.2s; }
        .buy-link:hover { color: #5AA8D6; }
        .timeline { border-left: 2px solid #5AA8D6; padding-left: 30px; margin-left: 10px; }
        .tl-item { margin-bottom: 25px; position: relative; }
        .tl-item::before { content: ""; position: absolute; left: -36px; top: 6px; width: 10px; height: 10px; background: #5AA8D6; border-radius: 50%; border: none; }
        .tl-year { font-size: 0.9rem; color: #5AA8D6; font-weight: bold; margin-bottom: 5px; }
        .tl-desc { font-size: 1rem; color: #fff; }
        .fav-icon { width: 40px; height: 40px; object-fit: contain; vertical-align: middle; }
        .pm-item-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }

        @media (max-width: 768px) {
            .article-title { font-size: 1.8rem; }
            .pm-grid { grid-template-columns: 1fr; gap: 30px; }
            .pm-body { padding: 20px !important; }
            .pm-name-area { display: block !important; width: 100% !important; margin-bottom: 15px !important; }
            .pm-name { font-size: 2.2rem !important; line-height: 1.1 !important; width: 100% !important; overflow-wrap: break-word !important; white-space: normal !important; }
            .pm-name-ja { display: block !important; font-size: 1rem !important; margin-top: 5px !important; color: #888 !important; }
            .pm-header { height: auto !important; aspect-ratio: 400 / 100 !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; background-color: #111 !important; }
        }

/* ========== 一覧ページ：サイドバー ========== */
/* --- サイドバー (スマホメニュー用) --- */
        #sidebar {
            width: 0; background-color: #0a0a0a; color: #fff;
            display: flex; flex-direction: column; border-right: 1px solid #333;
            transition: width 0.4s ease; overflow: hidden; white-space: nowrap;
            z-index: 2000; position: fixed; top: 0; left: 0; height: 100%;
        }
        #sidebar.open { width: 260px; }
        .sidebar-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; min-width: 260px; }
        
        .sidebar-nav { padding: 20px; display: flex; flex-direction: column; gap: 15px; min-width: 260px; }
        .sidebar-link { color: #ccc; text-decoration: none; font-size: 1rem; padding: 10px; border-radius: 8px; transition: 0.2s; }
        .sidebar-link:hover { background: rgba(255,255,255,0.1); color: #fff; }
        
        #sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1500; display: none; opacity: 0; transition: opacity 0.3s; }
        #sidebar-overlay.show { display: block; opacity: 1; }
        @media (max-width: 768px) { #sidebar.open { width: 80%; } }

        /* --- ヘッダーナビ --- */
        .top-nav {
            position: sticky; top: 0; left: 0; width: 100%; height: 60px;
            background-color: rgba(10, 10, 10, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.15);
            z-index: 1100; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); flex-shrink: 0;
        }
        .mobile-menu-btn { display: none; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; font-size: 1.35rem; color: #fff; cursor: pointer; margin-right: 4px; min-width: 44px; min-height: 44px; padding: 0 10px; flex-shrink: 0; align-items: center; justify-content: center; }
        
        .nav-scroll {
            display: flex; gap: 10px; padding: 0 15px;
            overflow-x: auto; white-space: nowrap; width: 100%; max-width: 900px;
            align-items: center; scrollbar-width: none;
        }
        .nav-scroll::-webkit-scrollbar { display: none; }

        .nav-btn {
            color: #ececf1; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 10px 16px; min-height: 44px; min-width: 44px; box-sizing: border-box;
            border-radius: 22px; font-size: 0.85rem;
            transition: 0.3s; background-color: rgba(255, 255, 255, 0.1);
            flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-weight: 500;
        }
        .nav-btn:hover { color: #5AA8D6; background-color: rgba(255, 255, 255, 0.2); border-color: #5AA8D6; }
        .nav-btn.primary { 
            background: linear-gradient(135deg, #1e5799 0%, #5AA8D6 100%);
            color: white; border: none; font-weight: bold;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        @media (max-width: 768px) {
            .mobile-menu-btn { display: block; }
            .top-nav { justify-content: flex-start; padding-left: 15px; }
            .nav-scroll { max-width: 100%; }
        }

        

/* ========== ニュース一覧 (index.html) ========== */
/* --- ニュースページ専用デザイン --- */
        .news-container {
            width: 100%; max-width: 1000px; margin: 0 auto; padding: 40px 20px;
            flex: 1;
        }

        .page-header { text-align: center; margin-bottom: 40px; }
        .page-title { 
            font-family: 'Oswald', sans-serif; font-size: 3rem; color: #fff; 
            letter-spacing: 2px; margin-bottom: 10px; text-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }
        .page-subtitle { color: #aaa; font-size: 1rem; }

        /* フィルターボタン */
        .filter-area { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }
        .filter-btn {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2);
            color: #ccc; padding: 8px 20px; border-radius: 20px; cursor: pointer;
            font-weight: bold; transition: all 0.3s;
        }
        .filter-btn:hover, .filter-btn.active { background: #fff; color: #000; border-color: #fff; transform: translateY(-2px); }

        /* ニュースカードグリッド */
        .news-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }

        .news-card {
            background: rgba(30, 30, 30, 0.6); border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px; overflow: hidden; transition: all 0.3s ease;
            backdrop-filter: blur(10px); display: flex; flex-direction: column;
            text-decoration: none; color: inherit; height: 100%;
        }
        .news-card:hover {
            transform: translateY(-5px); 
            box-shadow: 0 10px 30px rgba(90, 168, 214, 0.2);
            border-color: #5AA8D6;
        }

        .news-thumb-box {
            width: 100%; aspect-ratio: 16/9; overflow: hidden; position: relative;
            background: #000;
        }
        .news-thumb {
            width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;
        }
        .news-card:hover .news-thumb { transform: scale(1.05); }

        .news-content { padding: 20px; flex: 1; display: flex; flex-direction: column; }
        
        .news-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 0.8rem; }
        .news-tag { padding: 4px 10px; border-radius: 4px; font-weight: bold; color: #fff; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 4px; }
        
        .tag-official { background: #5AA8D6; box-shadow: 0 0 10px rgba(90, 168, 214, 0.4); }
        .tag-report { background: #2ecc71; box-shadow: 0 0 10px rgba(46, 204, 113, 0.4); }
        .tag-rumor { background: #e74c3c; box-shadow: 0 0 10px rgba(231, 76, 60, 0.4); }
        
        .news-date { color: #888; }
        .news-title { font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; line-height: 1.5; color: #fff; }
        .news-desc { font-size: 0.9rem; color: #ccc; line-height: 1.6; margin-bottom: 15px; flex: 1; }
        
        .read-more { 
            color: #5AA8D6; font-size: 0.85rem; font-weight: bold; 
            display: flex; align-items: center; gap: 5px; margin-top: auto;
        }
#copy-btn {
            display: inline-flex !important;
            align-items: center;
            gap: 6px;
        }

@media (max-width: 768px) {
            .page-title { font-size: 2rem; }
            .news-grid { grid-template-columns: 1fr; }
        }