@charset "utf-8";

/* --- SPAモード専用のデザイン調整（固定なし・シンプル版） --- */

/* 0. ページ全体の背景アニメーション設定 */
body {
    background: transparent;
}

/* 動く背景専用のコンテナ */
.animated-background {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
    /* 東大ブルーに合う淡い青～紫のグラデーション */
    background: linear-gradient(
        -45deg, 
        #eef4ff,
        #e6eeff,
        #f0e6ff,
        #eef4ff
    );
    background-size: 400% 400%;
    animation: gradientBG 25s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 1. コンテンツエリア */
.spa-content {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    min-height: 60vh;
}

/* 2. 左サイドバー */
.spa-sidebar {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border: 1px solid #eee;
}

.match-list a {
    display: block; padding: 12px 15px; background: #fff; color: #444;
    text-decoration: none; border-radius: 6px; border: 1px solid #eee;
    border-left: 4px solid transparent; transition: all 0.2s; font-weight: 500;
}
.match-list a:hover { background: #f9fbff; border-color: #cce0ff; transform: translateY(-2px); }
.match-list a.active {
    background: #eff6ff; color: #1f3c88; border-color: #1f3c88;
    border-left-color: #1f3c88; font-weight: 700;
    box-shadow: 0 2px 8px rgba(31, 60, 136, 0.15);
}

/* 3. 表（テーブル）のデザイン（固定設定を全廃止） */

/* 外側の箱（スクロール窓） */
.spa-content .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto; /* 横にはみ出したらスクロール */
    -webkit-overflow-scrolling: touch;
    margin-bottom: 2rem;
    border: 1px solid #eee;
    border-radius: 6px;
}

/* テーブル本体 */
.spa-content table {
    display: table;
    width: 100%;         /* PCでは横幅いっぱい */
    min-width: 600px;    /* スマホで潰れないように最低幅を確保 */
    border-collapse: collapse;
    white-space: nowrap;
    border: none;
}

.spa-content table th,
.spa-content table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #f5f5f5; /* 縦の区切り線 */
    font-size: 14px;
    text-align: center;
}

/* --- ヘッダー行（東大ブルー） --- */
/* stickyなどの固定設定は一切なし */
.spa-content table thead th,
.spa-content table thead td {
    background-color: #1f3c88; /* 東大ブルー */
    color: #fff;
    font-weight: 700;
    border-bottom: 2px solid #162d66;
    border-right: 1px solid #3a559a;
}

/* --- 左端の列（名前） --- */
/* stickyなし。スクロールしたら一緒に流れていく */
.spa-content table tbody th {
    background-color: #fff;
    color: #1f3c88; /* 名前は青字 */
    font-weight: 600;
    border-right: 2px solid #eee; /* 区切り線だけ少し濃く */
}

/* 1行おきの背景色 */
.spa-content table tr:nth-child(even) td {
    background-color: #fcfcfc;
}

/* 4. 見出し */
.spa-content h2 {
    font-size: 1.6rem; margin-bottom: 1.5rem; color: #1f3c88;
    border-left: 6px solid #1f3c88; padding-left: 15px; line-height: 1.4;
    font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
}
.spa-content h3 {
    font-size: 1.3rem; margin-top: 2.5rem; margin-bottom: 1.2rem;
    padding-bottom: 5px; border-bottom: 2px solid #8ec5fc; color: #333; font-weight: 700;
}

/* 5. その他 */
#loading-indicator { padding: 60px; text-align: center; color: #1f3c88; font-weight: bold; letter-spacing: 0.05em; }
.spa-content iframe, .spa-content .nav-container, .spa-content header, .spa-content footer { display: none !important; }

/* スマホ対応 */
@media (max-width: 767px) {
    .spa-wrapper { flex-direction: column; }
    .spa-sidebar { position: relative; top: 0; margin-bottom: 20px; padding: 15px; }
    .match-list a { padding: 10px; font-size: 14px; }
    .spa-content { padding: 15px; }
    .spa-content h2 { font-size: 1.3rem; }
}