.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

    .page-button, .pagination button {
        padding: 8px 15px;
        margin: 0 5px;
        border: 1px solid #ccc;
        background: #f9f9f9;
        cursor: pointer;
        font-size: 16px;
        transition: background 0.3s, color 0.3s;
        border-radius: 5px;
    }

        .page-button.active {
            background: blue;
            color: white;
            font-weight: bold;
        }

        .pagination button:disabled {
            background: #ddd;
            cursor: not-allowed;
        }

.tab-buttons {
    display: flex;
    align-items: flex-end;
    background: #ddd;
    padding: 5px;
    border-radius: 5px 5px 0 0;
    position: sticky;
    top: 0; /* 画面上部に固定 */
    z-index: 1000; /* 他の要素より前面に */
}

    .tab-buttons button {
        flex: 1;
        padding: 10px 20px;
        margin-right: 5px;
        background: #e0e0e0;
        border: none;
        border-radius: 8px 8px 0 0;
        cursor: pointer;
        transition: background 0.3s, color 0.3s;
        font-size: 14px;
        min-width: 100px;
        text-align: center;
        outline: none;
    }

        .tab-buttons button:hover {
            background: #d0d0d0;
        }

        .tab-buttons button.active {
            background: white;
            font-weight: bold;
            border-bottom: 2px solid blue;
        }

.scroll-button {
    position: fixed;
    /*bottom: 10px;*/
    right: 10px;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .scroll-button:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    .scroll-button.L3 {
        bottom: 160px;
    }

    .scroll-button.L2 {
        bottom: 90px;
    }

    .scroll-button.L1 {
        bottom: 20px;
    }

/* タブのカスタムスタイル */
.nav-tabs {
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid #ddd;
    width: 100%; /* 幅を100%に固定 */
    white-space: nowrap; /* 改行を防ぐ */
}

    .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-radius: 0.5rem 0.5rem 0 0;
        padding: 0.8rem 1.2rem;
        background-color: #f8f9fa;
        color: gray;
    }

        .nav-tabs .nav-link.active {
            border-color: #ddd #ddd #fff;
            background-color: #fff;
            color: black;
            font-weight: bold;
        }

/* カードのカスタマイズ */
.card {
    display: block;
    width: fit-content;
    min-width: 400px;
    max-width: 100%;
    overflow-x: auto; /* 横スクロールを有効化 */
}

.card-header {
    color: #232026;
}

.card-body {
    overflow-x: auto; /* カードの中で横スクロールを有効化 */
    white-space: nowrap; /* 折り返しを防止 */
}

.card .A1, .card .A {
    background-color: #00bfff;
}

.card .A2 {
    background-color: #ff1493;
}

.card .B1, .card .B {
    background-color: #ff8c00;
}

.card .B2 {
    background-color: #ffd700;
}

.card .C1, .card .C {
    background-color: #32cd32;
}

.card .C2 {
    background-color: #adff2f;
}

/* メンバーテーブルの列幅指定 */
.member-table {
    font-size: 11px;
    text-align: center;
    vertical-align: central;
    word-break: break-all;
}

    .member-table .col-name {
        width: 55%;
    }

    .member-table .col-other {
        width: 15%;
    }

/* リーグテーブルのカスタマイズ */
.league-table th, .league-table td {
    width: 63px;
    font-size: 10.5px;
    text-align: center;
    vertical-align: central;
    word-break: break-all;
}

    .league-table td.gray-cell {
        background-color: #e9ecef;
    }

/* トーストコンテナを右下に配置 */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column-reverse; /* 新しいトーストが下に表示される */
    align-items: flex-end;
    z-index: 1000;
}

/* トーストの基本スタイル */
.custom-toast {
    min-width: 300px;
    max-width: 500px;
    font-size: 12pt; /* 文字サイズを変更 */
    padding: 1.5rem;
    border-radius: 0.75rem;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
    margin-bottom: 10px; /* トースト間の余白 */
}

    /* 表示時 */
    .custom-toast.show {
        opacity: 1;
        visibility: visible;
    }

/* 成功時のトースト */
.success-toast {
    background-color: #28a745; /* 緑色 */
}

/* エラー時のトースト */
.error-toast {
    background-color: #dc3545; /* 赤色 */
}

/* トースト内の閉じるボタン */
.custom-toast .btn-close {
    transform: scale(1.5);
    filter: invert(1);
}