/* =====================
   全体
===================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
}


body {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;


    background: radial-gradient(
            circle at top left,
            #b9f0ff,
            transparent 45%
    ),
    radial-gradient(
            circle at bottom right,
            #b8f5d5,
            transparent 45%
    ),
    linear-gradient(
            135deg,
            #eafcff,
            #edfff6
    );

}


/* =====================
   外側
===================== */


.login-container {

    width: 100%;

    max-width: 390px;

}


/* =====================
   カード
===================== */


.login-card {


    width: 100%;


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


    backdrop-filter: blur(12px);


    border-radius: 25px;


    padding: 30px 25px;


    box-shadow: 0 10px 30px rgba(60, 130, 160, .15);


}


/* =====================
   タイトル
===================== */


h1 {

    text-align: center;

    color: #284575;

    font-size: 28px;

    margin-bottom: 10px;

}


.sub {

    text-align: center;

    color: #73839b;

    font-size: 14px;

    margin-bottom: 25px;

}


/* =====================
   入力フォーム
===================== */


form {

    width: 100%;

}


label {

    display: block;

    font-size: 13px;

    color: #536887;

    margin-bottom: 6px;

}


input,
textarea {


    width: 100%;


    padding: 14px;
    border: none;


    outline: none;


    background: #eef8ff;


    border-radius: 12px;


    font-size: 14px;


    margin-bottom: 18px;


}


input:focus,
textarea:focus {

    background: #e6f6ff;

    box-shadow: 0 0 0 2px #7bd8f5;

}


textarea {

    height: 100px;

    resize: none;

}


/* =====================
   パスワード忘れ
===================== */


.forgot {


    display: block;


    text-align: right;


    font-size: 12px;


    color: #35afd2;


    text-decoration: none;


    margin-top: -8px;


    margin-bottom: 20px;


}


.forgot:hover {

    text-decoration: underline;

}


/* =====================
   ボタン
===================== */


button {


    width: 100%;


    padding: 15px;


    border: none;


    border-radius: 15px;


    background: linear-gradient(
            135deg,
            #65d8ff,
            #59ca8d
    );


    color: white;


    font-size: 16px;


    font-weight: bold;


    cursor: pointer;


    box-shadow: 0 8px 20px rgba(80, 200, 150, .35);


}


button:hover {

    opacity: .85;

}


/* =====================
   下のリンク
===================== */


.register-link {


    text-align: center;


    margin-top: 20px;


    font-size: 13px;


    color: #71829a;


}


.register-link a {


    color: #35afd2;


    font-weight: bold;


    text-decoration: none;


}


.register-link a:hover {

    text-decoration: underline;

}


/* =====================
   スマホ調整
===================== */


@media (max-width: 390px) {


    .login-card {


        padding: 25px 18px;


    }


    h1 {

        font-size: 25px;

    }


    input {

        padding: 13px;

    }


}