@charset "UTF-8";

/*---------------------------
teamのerrorメッセージ
----------------------------*/
#alert {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1002;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 0.8px;
    padding: 20px 0;
    color: var(--reverse-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: alert-close 8s forwards;
}

.alert-danger {
    background-color: var(--alert-color);
}

.alert-danger::before {
    content: "※";
}

.alert-success {
    background-color: var(--site-link-color);
}

@keyframes alert-close {
    0% {
        top: 0;
    }
    80% {
        top: 0;
    }
    100% {
        top: -100%;
    }
}

@media screen and (max-width: 640px) {
    #alert {
        font-size: 0.85rem;
        padding: 14px 0;
    }
}