/* =========================================
   TRPG Weave
   Login
========================================= */


/* =========================================
   Reset
========================================= */

* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}


html {
    background: #263d88;
}


body {
    min-width: 320px;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "Meiryo",
        sans-serif;

    color: #172044;

    background:
        linear-gradient(
            rgba(45, 56, 137, 0.10),
            rgba(78, 64, 165, 0.12)
        ),
        url("img/login-bg.png")
        center center /
        cover
        no-repeat;

    overflow: hidden;
}



/* =========================================
   Page
========================================= */

.login-page {
    width: 100%;
    height: 100vh;
    height: 100dvh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 22px;

    overflow: hidden;
}



/* =========================================
   Login Card
========================================= */

.login-card {
    width:
        min(
            810px,
            calc(100vw - 44px)
        );

    min-height: 600px;

    max-height:
        calc(
            100dvh - 44px
        );

    display: flex;

    flex-direction: column;

    justify-content: center;

    margin: 0;

    padding:
        42px
        64px;

    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.80
        );

    border-radius: 26px;

    box-shadow:
        0
        24px
        70px
        rgba(
            23,
            29,
            86,
            0.24
        );

    backdrop-filter:
        blur(5px);
}



/* =========================================
   Logo
========================================= */

.brand-area {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
        0
        0
        18px;

    padding: 0;
}


.brand-logo {
    display: block;

    width:
        min(
            480px,
            100%
        ) !important;

    max-width: 480px !important;

    height: auto !important;

    max-height: 145px;

    margin: 0 auto;

    padding: 0;

    object-fit: contain;
}



/* =========================================
   Login Header
========================================= */

.login-header {
    width: 100%;

    margin:
        0
        0
        26px;

    padding: 0;

    text-align: center;
}


.login-header h1 {
    margin: 0;

    color: #15204a;

    font-size: 30px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.07em;
}


.login-header p {
    margin:
        11px
        0
        0;

    color: #606983;

    font-size: 13px;

    line-height: 1.5;
}



/* =========================================
   Title Divider
========================================= */

.title-divider {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 11px;
}


.title-divider span {
    width: 145px;
    height: 1px;

    background: #dfe1eb;
}


.title-divider i {
    color: #b0b3c4;

    font-size: 12px;

    font-style: normal;
}



/* =========================================
   Form Group
========================================= */

.form-group {
    width: 100%;

    margin:
        0
        0
        19px;

    padding: 0;
}


.form-group label {
    display: block;

    margin:
        0
        0
        7px;

    color: #202746;

    font-size: 14px;

    font-weight: 700;
}



/* =========================================
   Input Box
========================================= */

.input-box {
    position: relative;

    width: 100%;

    display: flex;

    align-items: center;
}



/* =========================================
   Input
========================================= */

.input-box input {
    display: block;

    width: 100%;
    height: 54px;

    margin: 0;

    padding:
        0
        52px;

    border:
        1px solid
        #d4d7e4;

    border-radius: 11px;

    background: #ffffff;

    color: #202844;

    outline: none;

    font-family: inherit;

    font-size: 14px;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}


.input-box input:focus {
    border-color: #7254d8;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            114,
            84,
            216,
            0.10
        );
}


.input-box input::placeholder {
    color: #9ca3b8;
}



/* =========================================
   Input Icon
========================================= */

.input-icon {
    position: absolute;

    top: 50%;
    left: 18px;

    z-index: 2;

    width: 21px;
    height: 21px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform:
        translateY(-50%);

    color: #8088a1;

    font-size: 17px;

    line-height: 1;

    pointer-events: none;
}



/* =========================================
   Password Toggle
========================================= */

.password-toggle {
    position: absolute;

    top: 50%;
    right: 13px;

    z-index: 3;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform:
        translateY(-50%);

    margin: 0;
    padding: 0;

    border: none;

    background: transparent;

    color: #747c97;

    font-size: 17px;

    cursor: pointer;
}



/* =========================================
   Login Button
========================================= */

.login-button {
    width: 100%;
    height: 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin:
        7px
        0
        0;

    padding: 0;

    border: none;

    border-radius: 10px;

    background:
        linear-gradient(
            100deg,
            #6637cb,
            #536dde
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 0.05em;

    cursor: pointer;

    box-shadow:
        0
        7px
        19px
        rgba(
            87,
            65,
            194,
            0.23
        );

    transition:
        transform 0.15s,
        box-shadow 0.15s,
        opacity 0.15s;
}


.login-button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0
        10px
        25px
        rgba(
            87,
            65,
            194,
            0.28
        );
}


.login-button:active {
    transform:
        translateY(0);
}



/* =========================================
   OR Divider
========================================= */

.or-divider {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 16px;

    margin:
        22px
        0
        17px;
}


.or-divider span {
    flex: 1;

    height: 1px;

    background: #e1e3eb;
}


.or-divider p {
    margin: 0;

    color: #69718b;

    font-size: 12px;
}



/* =========================================
   Register Button
========================================= */

.register-button {
    width: 100%;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    margin: 0;

    padding: 0;

    border:
        1px solid
        #8877c8;

    border-radius: 10px;

    background: #ffffff;

    color: #6049bf;

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s,
        transform 0.15s;
}


.register-button:hover {
    background: #f8f6ff;

    transform:
        translateY(-1px);
}



/* =========================================
   PC
   高さ900px以下
========================================= */

@media screen
and (min-width: 701px)
and (max-height: 900px) {

    .login-page {
        padding: 15px;
    }


    .login-card {
        width:
            min(
                780px,
                calc(100vw - 30px)
            );

        min-height: 570px;

        max-height:
            calc(
                100dvh - 30px
            );

        padding:
            30px
            58px;
    }


    .brand-logo {
        width: 440px !important;

        max-width: 80% !important;

        max-height: 130px;
    }


    .brand-area {
        margin-bottom: 13px;
    }


    .login-header {
        margin-bottom: 21px;
    }


    .login-header h1 {
        font-size: 27px;
    }


    .login-header p {
        margin-top: 8px;

        font-size: 12px;
    }


    .form-group {
        margin-bottom: 15px;
    }


    .input-box input {
        height: 49px;
    }


    .login-button {
        height: 49px;
    }


    .or-divider {
        margin:
            17px
            0
            13px;
    }


    .register-button {
        height: 47px;
    }

}



/* =========================================
   PC
   高さ750px以下
========================================= */

@media screen
and (min-width: 701px)
and (max-height: 750px) {

    .login-page {
        padding: 10px;
    }


    .login-card {
        min-height: 0;

        max-height:
            calc(
                100dvh - 20px
            );

        padding:
            18px
            52px;
    }


    .brand-logo {
        width: 360px !important;

        max-height: 105px;
    }


    .brand-area {
        margin-bottom: 7px;
    }


    .login-header {
        margin-bottom: 13px;
    }


    .login-header h1 {
        font-size: 23px;
    }


    .title-divider {
        margin-top: 5px;
    }


    .login-header p {
        margin-top: 5px;

        font-size: 10px;
    }


    .form-group {
        margin-bottom: 9px;
    }


    .form-group label {
        margin-bottom: 4px;

        font-size: 12px;
    }


    .input-box input {
        height: 42px;

        font-size: 13px;
    }


    .login-button {
        height: 42px;

        font-size: 15px;
    }


    .or-divider {
        margin:
            11px
            0
            8px;
    }


    .register-button {
        height: 40px;

        font-size: 13px;
    }

}



/* =========================================
   Smartphone
========================================= */

@media screen and (max-width: 700px) {

    html,
    body {
        height: auto;

        min-height: 100%;
    }


    body {
        min-height: 100vh;

        overflow-y: auto;

        background-attachment: scroll;
    }


    .login-page {
        height: auto;

        min-height: 100vh;

        padding:
            20px
            12px;

        overflow: visible;
    }


    .login-card {
        width: 100%;

        max-width: 470px;

        min-height: 0;

        max-height: none;

        padding:
            32px
            21px;

        overflow: visible;

        border-radius: 21px;
    }


    .brand-logo {
        width: 340px !important;

        max-width: 100% !important;

        max-height: 125px;
    }


    .login-header {
        margin-bottom: 23px;
    }


    .login-header h1 {
        font-size: 25px;
    }


    .title-divider span {
        width: 80px;
    }


    .form-group {
        margin-bottom: 17px;
    }


    .login-button {
        height: 51px;

        font-size: 16px;
    }


    .or-divider {
        margin:
            19px
            0
            15px;
    }


    .register-button {
        height: 49px;

        font-size: 14px;
    }

}



/* =========================================
   Small Smartphone
========================================= */

@media screen and (max-width: 380px) {

    .login-card {
        padding:
            25px
            15px;
    }


    .brand-logo {
        width: 290px !important;
    }


    .login-header h1 {
        font-size: 22px;
    }


    .title-divider span {
        width: 55px;
    }

}