@import "./includes/open-props.min.css";
@import "./includes/normalize.min.css";
@import "./_common.css";
@import "./_c-form.css";


body {
    background-color: var(--theme-gray-01);
    background-image: url("../img/img_login.png");
    background-size: cover;
    background-color:rgba(255,255,255,0.3);
    background-blend-mode:lighten;
}

@media (min-width: 480px) and (max-width: 768px) {
    body {
        background-size: contain;
        background-color:rgba(15, 15, 15, 0.3);
    }
}

@media (max-width: 479px) {
    body {
        background-size: contain;
        background-color:rgba(15, 15, 15, 0.3);
    }
}

h1 {
    background-color: var(--theme-gray-05);
    text-align: center;
    color: var(--white);
    font-weight: var(--font-weight-6);
    padding: var(--size-2) 0;
    margin-bottom: var(--size-3);
}
h2 {
    text-align: center;
    color: var(--theme-gray-05);
    font-weight: var(--font-weight-4);
}
@media screen and (min-width: 769px) {
    h1 {
        font-size: var(--font-size-4);
    }
    h2 {
        font-size: var(--font-size-3);
    }
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: var(--font-size-4);
    }
    h2 {
        font-size: var(--font-size-3);
    }
}
/* メインコンテンツ */
.app-frame {
    padding-top: 10vh;
}

@media (min-width: 480px) and (max-width: 768px) {
    .app-frame {
        padding-top: 15vh;
    }
}

@media (max-width: 479px) {
    .app-frame {
        padding-top: 10svh;
    }
}

.main-frame {
    max-width: 32rem;
    margin: 0 auto;
    background-color: var(--theme-background);
    border: 1px solid var(--layout-border);
    border-radius: var(--radius-2);
}
.logo {
    img {
        /* width: 50%; */
        width: 340px;
        /* NOTE:画像のサイズによって調整 */
        margin: var(--size-2) auto;
    }
}

.management {
    padding: 0 var(--size-4);
}
@media screen and (max-width: 768px) {
    .management {
        font-size: var(--font-size-0);
        padding: 0;
    }
}


.inputs-wrap {
    display: flex;
    flex-direction: column;
    row-gap: var(--size-4);
}
.input-wrap {
    display: flex;
    flex-direction: column;
    row-gap: var(--size-2);

    .label {
        display: inline-block;
    }
    .input {
        padding-top: .5rem;
        padding-bottom: .5rem;
        padding-left: .75rem;
        padding-right: .75rem;
        background-color: var(--surface-1);
    }
}
@media screen and (min-width: 769px) {
    .inputs-wrap {
        padding: var(--size-7);
    }
}
@media (min-width: 480px) and (max-width: 768px) {
    .inputs-wrap {
        padding: var(--size-4);
    }
}
@media screen and (max-width: 479px) {
    .main-frame {
        margin-left: var(--size-2);
        margin-right: var(--size-2);
    }
    .inputs-wrap {
        padding: var(--size-4);
    }
}

.btn-login {
    display: block;
    background-color: var(--main-color);
    border-radius: var(--radius-2);
    padding: 10px 4px;
    text-align: center;
    color: var(--white);
    font-weight: var(--font-weight-4);
    letter-spacing: var(--font-letterspacing-3);
}

@media screen and (min-width: 769px) {
    .btn-login {
        font-size: var(--font-size-2);
    }
}

@media screen and (max-width: 768px) {
    .btn-login {
        font-size: var(--font-size-3);
    }
}