/**
 * ═══════════════════════════════════════════════════════════════
 * ARCHIVE LIVE STYLES
 * ═══════════════════════════════════════════════════════════════
 * 
 * ライブアーカイブページのスタイルシート
 * Upcoming/Past タブの表示切り替え、テーブルレイアウト、
 * レスポンシブ対応、アニメーション効果を統合管理
 * ═══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* 日付表示 */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* 日付のみ大きく表示 */
.live-date-only {
    font-size: var(--fs-date-front);
    display: inline-block;
    line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* レイアウト・コンテナ */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* アーカイブコンテナ：中央配置で70%幅 */
.live-archive-wrapper {
    width: 70%;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* タブ・ボタン */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* タブコンテナ */
.live-tabs {
    margin-bottom: 20px;
}

/* タブボタン：透明背景でアクティブ時に下線表示 */
/* 非アクティブ時: 背景なし、ボーダーなし */
.tab-btn {
    background-color: transparent;
    border: none;
    font-size: var(--fs-tab);
    cursor: pointer;
    padding: 10px 0px;
    margin-right: 10px;
}

/* アクティブタブ：下線表示とボールドフォント */
.tab-btn.active {
    border-bottom: 2px solid #000000;
    font-weight: bold;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* テーブルスタイル */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* テーブル基本設定 */
.live-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 0px;
    text-align: left;
}

.live-table th {
    text-align: left;
}

.live-table-head {
    border-bottom: 1px solid var(--site-border-color);
}

/* 列幅配分：日付(12.5%) / 会場(42.5%) / 開演時間(22.5%) / 備考(22.5%) */
.live-table th:first-child,
.live-table td:first-child {
    width: 12.5%;
}

.live-table th:nth-child(2),
.live-table td:nth-child(2) {
    width: 42.5%;
}

.live-table th:nth-child(3),
.live-table td:nth-child(3) {
    width: 22.5%;
}

.live-table th:nth-child(4),
.live-table td:nth-child(4) {
    width: 22.5%;
}

.live-table td:nth-child(4) {
    font-size: var(--fs-small);
}

/* テーブル行スタイル */
/* Upcoming / Past 各行共通 */
/* ボーダーを除去してスッキリとした設計 */
.upcoming-live-item,
.past-live-item {
    border-top: none;
    border-bottom: none;
}

td {
    padding: 15px 0;
}

/* テーブルヘッダーセルスタイル */
/* パッドと位置を設定 */
.live-table th {
    padding: 10px 10px;
    position: relative;
}

/* 列区切り線（疑似要素で実装） */
/* 最後の列は右区切り線を除去 */
.live-table th::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    border-right: 1px solid #000000;
}

/* テーブルデータセルスタイル */
/* パッドと位置を設定、列区切り線を追加 */
.live-table td {
    padding: 10px 10px;
    margin: 10px 0;
    position: relative;
}

.live-table td::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    border-right: 1px solid #000000;
}

/* 最後の列: 右区切り線を表示しない */
.live-table th:last-child::after,
.live-table td:last-child::after {
    display: none;
}

.live-city-venue {
    font-weight: bold;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* インタラクション */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* ホバー効果：ライブ行にマウスオーバー時に背景色を変更 */
.upcoming-live-item:hover,
.past-live-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease;
}

.live-weekday {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* アニメーション定義 */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* タブ切り替えアニメーション：テーブルスライド効果 */
.live-table.slide-out {
    animation: slideOut 0.4s ease-in-out forwards;
}

.live-table.slide-in {
    animation: slideIn 0.4s ease-in-out forwards;
}

/* スライドアウト: テーブルが左方へ移動しながらフェードアウト */
@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

/* スライドイン: テーブルが右方から左に移動しながらフェードイン */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* レスポンシブデザイン */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* タブレット対応 (max-width: 768px) */
@media (max-width: 768px) {
    .live-archive-wrapper {
        width: 90%;
        margin: 0 auto;
    }

    .live-tabs {
        margin-bottom: 15px;
    }

    .tab-btn {
        padding: 8px 0px;
        margin-right: 15px;
    }

    .live-table {
        display: block;
        width: 100%;
        margin-top: 0px;
    }

    .live-table thead {
        display: none;
    }

    .live-table tbody {
        display: block;
    }

    .upcoming-live-item,
    .past-live-item {
        display: flex;
        flex-wrap: wrap;
        padding: 15px;
        gap: 0;
    }

    .live-table td {
        margin: 0;
        padding: 0;
        border: none;
        box-sizing: border-box;
    }

    .live-table td:nth-child(1) {
        width: 100%;
    }

    .live-table td:nth-child(2) {
        width: 100%;
    }

    .live-table td:nth-child(3) {
        width: 70%;
        display: flex;
        align-items: center;
    }

    .live-table td:nth-child(3)::before {
        content: "OP/STT: ";
        margin-right: 5px;
    }

    .live-table td:nth-child(4) {
        width: 30%;
        display: flex;
        align-items: center;
    }

    .live-city-venue {
        display: block;
        word-break: break-word;
        white-space: normal;
        font-size: var(--fs-front-link-title);
    }

    td {
        padding: 0;
    }

    .live-table th::after,
    .live-table td::after {
        display: none;
    }
}

/* スマートフォン対応 (max-width: 480px) */
@media (max-width: 480px) {
    .live-archive-wrapper {
        width: 90%;
        margin: 0 auto;
    }

    .live-tabs {
        margin-bottom: 10px;
    }

    .tab-btn {
        padding: 6px 0px;
        margin-right: 10px;
    }

    .live-table {
        display: block;
        width: 100%;
    }

    .live-table thead {
        display: none;
    }

    .upcoming-live-item,
    .past-live-item {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        gap: 0;
        border: none;
        /* border-bottom: 1px solid var(--site-border-color); */
    }

    .live-table td {
        padding: 0;
        border: none;
        box-sizing: border-box;
    }

    .live-table td:nth-child(1) {
        width: 100%;
        /* margin-bottom: 5px; */
    }

    .live-table td:nth-child(2) {
        width: 100%;
        /* margin-bottom: 5px; */
    }

    .live-table td:nth-child(3) {
        width: 60%;
        font-size: var(--fs-body);
    }

    .live-table td:nth-child(3)::before {
        content: "OP / STT : ";
    }

    .live-table td:nth-child(4) {
        width: 40%;
        justify-content: flex-end;
    }

    td {
        padding: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* LOAD MORE ボタン */
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* クリック時の不透明度アニメーション */
@keyframes fadeInPress {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.6;
    }
}

/* ボタンスライドインアニメーション */
@keyframes slideInBtn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* コンテナスタイル */
.live-load-more-container {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.live-load-more-container.slide-in-btn {
    animation: slideInBtn 0.4s ease-in-out forwards;
}

/* ボタンスタイル: 中心配置でクリック可能領域 */
/* Flexbox で中央配置、アイコンを下部に設置 */
.live-load-more-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: opacity 0.3s ease;
}

.live-load-more-btn:active:not(:disabled) {
    animation: fadeInPress 0.2s ease-in-out;
}

/* ホバー時の不透明度変化 */
.live-load-more-btn:hover:not(:disabled) {
    opacity: 0.7;
}

.live-load-more-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* テキストスタイル */
.live-load-more-text {
    color: var(--site-text-color);
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* 下矢アイコンスタイル */
.live-load-more-arrow {
    color: var(--site-text-color);
    font-size: 1.2rem;
    font-weight: bold;
    display: block;
}

/* タブレット対応 (max-width: 768px) */
@media screen and (max-width: 768px) {

    /* タブレット対応: ボタンの間隔を拡大 */
    .live-load-more-container {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .live-load-more-btn {
        padding: 15px 0;
        gap: 8px;
    }

    .live-load-more-text {
        font-size: 0.95rem;
    }

    .live-load-more-arrow {
        font-size: 1rem;
    }
}

/* スマートフォン対応 (max-width: 480px) */
@media screen and (max-width: 480px) {

    /* スマートフォン対応: コンパクトな間隔 */
    .live-load-more-container {
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .live-load-more-btn {
        padding: 12px 0;
        gap: 6px;
    }

    .live-load-more-text {
        font-size: 0.9rem;
    }

    .live-load-more-arrow {
        font-size: 0.9rem;
    }
}