@charset "UTF-8";

:root {
    --brand: #ec6b1c;
    --title-bg: #4e4e4e;
    --text: #231815;
    --surface: #ffffff;
    --bg: #f3f3f3;
    --line: #d8d8d8;
    --alerttitle: #fff;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: -apple-system, Meiryo, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, sans-serif;
    color: var(--text);
    background-color: var(--bg);
}

.alert-screen {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}

.header {
    width: 100%;
    min-height: 100px;
    padding: 10px 0;
    background-color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .header {
        min-height: 88px;
        padding: 4px 0;
    }
}

.mainLogo {
    max-width: 600px;
    min-width: 76vw;
    height: 80px;
    margin: 0 auto;
    text-indent: -9999px;
    background-image: url("../images/logo.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

@media (max-width: 768px) {
    .mainLogo {
        height: 64px;
        min-width: 82vw;
    }
}

.alertArea {
    width: 100%;
    min-height: calc(100vh - 100px);
    margin: 0 auto;
    padding: 40px 10%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .alertArea {
        min-height: calc(100vh - 88px);
        padding: 24px 5%;
    }
}

.alertPanel {
    width: min(100%, 920px);
    padding: 48px 40px;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 8px;
}

@media (max-width: 768px) {
    .alertPanel {
        padding: 28px 20px;
    }
}

.alertTitle {
    margin: 0 0 40px;
    padding: 20px 10px;
    background-color: var(--title-bg);
    color: var(--alerttitle);
    font-size: 1.4em;
    font-weight: bold;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .alertTitle {
        margin-bottom: 24px;
        padding: 12px 8px;
        font-size: 1.15rem;
    }
}

.alert-message {
    margin: 26px 0 0;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: bold;
}

@media (max-width: 768px) {
    .alert-message {
        margin-top: 16px;
        font-size: 1rem;
    }
}