.page {
    max-width: 600px; /* 横幅制限（スマホ想定） */
    margin: 0 auto; /*　全体を中央寄せに */
    padding: 0 16px; /* 端の余白（スマホで詰まりすぎを防ぐ） */

    min-height: 100vh; /* vhはviewport height、今回使う高さの最低値を画面の高さに指定 */
    display: flex;
    flex-direction: column; /* mainとfooterを縦並びにしてfooterを最下部に押し出すため */
}

.page-title{
    text-align: center;
    height: 56px;
    font-size: 40px;
    font-weight: 700;
}

.auth-form{
    width: 100%;
    height: 520px;
    margin: 5% auto;
}

.auth-subtitle{
    text-align: center;
    margin-top: 10%;
    margin-bottom: 10%;
    font-size: 14px;
    font-weight: 600;
    color: #f7c6bd;
    /* text-shadowをずらし使いして見にくい文字に黒い縁取りをつける！6パターンで十分だった。 */
    text-shadow: 
    1px 1px 0 #000,
    -1px -1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    0 -1px 0 #000,
    1px 0 0 #000;
}

.user-info{
    display: flex;
    flex-direction: column;
    height: 15%;
    margin-bottom: 5%;

}

.confirm-password{
    margin-bottom: 10%;
}

label{
    height: 50%;
    font-size: large;
    margin-bottom: 0%;
    padding-bottom: 0%;

}

input{
    background-color: white;
    font-size: large;
    border: none;
    height: 50%;
    
}

.login_img{
    width: 100%;
    height: 40%;
    object-fit: scale-down;
    margin: 5px auto 0px;
}

.auth-botton-container{
    height: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;

}


.auth-botton{
    color: white;
    font-size: large;
    font-weight: 1000;
    width: 70%;
    height: 40%;
    border: 3px solid rgb(69, 37, 249);
    border-radius: 25px;
    background-color: rgb(0, 195, 255);
    box-shadow: 1px 2px rgb(129, 129, 129);
    /* margin-top: 5%; */
}

.switch-auth-mode{
    color: white;
    text-decoration: none;
    margin-top: 5%;
}