/* ===================== */
/* 上部エリア */
/* ===================== */

.actionArea {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    margin-top: 0;

    margin-bottom: 30px;
}

.logCount {

    font-size: 18px;

    font-weight: 600;

    color: #7d879d;

}

/* ===================== */
/* ログ一覧 */
/* ===================== */

.logList {

    display: grid;

    gap: 20px;

}

/* ===================== */
/* ログカード */
/* ===================== */

.logCard {

    background: white;

    border: 2px solid #edf2fb;

    border-radius: 22px;

    padding: 20px 24px;

    transition: 0.25s;

}

.logTime {

    color: #7d879d;

    font-size: 16px;

    font-weight: 600;

}

.logUser {

    font-size: 24px;

    font-weight: 700;

    color: #2d3c6b;

    margin-top: 10px;

}

.logStatus {

    display: inline-block;

    margin-top: 12px;

    padding: 10px 20px;

    border-radius: 999px;

    font-size: 16px;

    font-weight: 700;

}

/* 正常 */

.normal {

    background: #dcfce7;

    color: #22c55e;

}

/* 異常 */

.alert {

    background: #fee2e2;

    color: #ef4444;

}

/* 復帰 */

.recover {

    background: #dbeafe;

    color: #2563eb;

}

/* 読み込み中 */

.loadingCard {

    background: white;

    border-radius: 25px;

    padding: 30px;

    text-align: center;

    color: #7d879d;

    border: 2px solid #edf2fb;

}

.wait {

    background: #fef3c7;
    color: #d97706;

}

.notConnected {

    background: #e5e7eb;
    color: #6b7280;

}

.logTag {

    margin-top: 8px;

    color: #64748b;

    font-size: 16px;

    font-weight: 600;

}

.moreArea {

    text-align: center;

    margin-top: 30px;

}

.moreButton {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 220px;
    height: 56px;

    color: #fff;

    background: linear-gradient(180deg,
            #6a8df7,
            #5b7df0);

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;

    font-size: 18px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 6px 16px rgba(79, 124, 255, .14),
        inset 0 1px 0 rgba(255, 255, 255, .35);

    transition:
        transform .22s ease,
        box-shadow .30s ease,
        background .30s ease;

}

.moreButton:hover {

    background: linear-gradient(180deg,
            #7297ff,
            #5f83f5);

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(79, 124, 255, .22);

    border-color: rgba(255, 255, 255, .35);

}

.moreButton:active {

    transform: translateY(0);

    box-shadow:
        0 4px 10px rgba(79, 124, 255, .12);

}

#contentArea {

    visibility: hidden;

}

.sectionTitle {

    font-size: 32px;

    font-weight: 700;

    color: #2d3c6b;

    margin-bottom: 25px;

    padding-left: 14px;

    border-left: 5px solid #ef4444;

}

.sectionTitle i {

    color: #ef4444;

    margin-right: 10px;

}

/* スマホ */

@media (max-width: 768px) {

    .actionArea {

        flex-direction: column;

        align-items: stretch;

    }

    .logUser {

        font-size: 20px;

    }

    .logCount {
        text-align: center;
    }

    .logCard {
        padding: 18px;
    }

    .navBar {

        min-height: 120px;

    }

    .logo {

        width: 120px;

        height: 120px;

    }

    .title {

        min-height: 52px;

    }

}