/* ===================================================
   ファイル名: staff-add.css
   作成者: 北川 淳也
   概要: MamoruNの職員追加画面のデザインを定義する
=================================================== */


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

body {

    background:
        linear-gradient(135deg,
            #eef8ff,
            #f8fbff);

}


/* =====================
   登録カード
===================== */

.card {

    width: 100%;

    max-width: 650px;

    margin: 50px auto;

    background: white;

    padding: 45px;

    border-radius: 30px;

    border:

        2px solid #edf5ff;


    box-shadow:

        0 15px 40px rgba(79, 124, 255, .12);


    animation:

        staffFade .5s ease;

}



/* =====================
   見出し
===================== */

.card h2 {

    font-size: 24px;

    font-weight: 800;

    color: #24345d;

    border-left:

        6px solid #59b7ff;


    padding-left: 14px;

    margin-top: 25px;

    margin-bottom: 25px;

}



.description {

    color: #7d879d;

    line-height: 1.8;

    margin-bottom: 30px;

}



/* =====================
   入力
===================== */

.formGroup {

    margin-bottom: 24px;

}



.formGroup label {

    display: block;

    font-weight: 700;

    margin-bottom: 10px;

    color: #24345d;

}



.required {

    display: inline-block;

    margin-left: 8px;

    padding: 4px 10px;

    font-size: 12px;

    color: white;

    background: #ff7b7b;

    border-radius: 999px;

}



/* =====================
   input select
===================== */

.formGroup input,
.formGroup select {


    width: 100%;


    height: 56px;


    padding: 0 18px;


    border:

        2px solid #dbe8f8;


    border-radius: 18px;


    font-size: 16px;


    background: #fbfdff;


    transition: .25s;


}



.formGroup input:focus,
.formGroup select:focus {


    outline: none;


    border-color: #59b7ff;


    background: white;


    box-shadow:


        0 0 0 5px rgba(89, 183, 255, .15);


}

/* =====================
   施設・クラス
===================== */


#group {

    background: #fbfdff;

}


/* =====================
   区切り
===================== */

.formDivider {

    border: none;

    border-top:

        2px solid #edf2fb;

    margin: 40px 0;

}



/* =====================
   ヒント
===================== */

.inputHint {

    display: block;

    margin-top: 8px;

    color: #7d879d;

    font-size: 13px;

    line-height: 1.7;

}



/* =====================
   ボタンエリア
===================== */

.buttonArea {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 40px;

}



/* =====================
   ボタン共通
===================== */

.primaryButton,
.secondaryButton {

    width: 100%;

    height: 56px;

    border: none;

    border-radius: 999px;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    transition: .25s;

}



/* =====================
   申請ボタン
===================== */

.primaryButton {

    background:

        linear-gradient(135deg,
            #59b7ff,
            #70d2ff);


    color: white;


    box-shadow:

        0 10px 25px rgba(89, 183, 255, .25);

}



.primaryButton:hover {

    transform:

        translateY(-3px);


    box-shadow:

        0 15px 30px rgba(89, 183, 255, .35);

}



/* =====================
   戻るボタン
===================== */

.secondaryButton {

    background: #eef3fb;

    color: #64748b;

}



.secondaryButton:hover {

    background: #dfe8f7;

    transform:

        translateY(-2px);

}



/* =====================
   戻るボタン
===================== */

.backButton {

    width: 100%;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 15px;

    border-radius: 999px;

    background: #eef3fb;

    color: #64748b;

    font-size: 16px;

    font-weight: 800;

    text-decoration: none;

    transition: .25s;

}


.backButton:hover {

    background: #dfe8f7;

    transform:
        translateY(-2px);

}

/* =====================
   アニメーション
===================== */

@keyframes staffFade {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }


    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =====================
   タブレット
===================== */

@media(max-width:768px) {


    .card {

        width:
            calc(100% - 40px);

        margin:

            30px auto;

        padding:

            30px 25px;

        border-radius:

            26px;

    }


    .card h2 {

        font-size:

            21px;

    }


    .description {

        font-size:

            14px;

    }



    .primaryButton,
    .secondaryButton {

        width:

            100%;

    }


}


/* =====================
   スマホ
===================== */

@media(max-width:480px) {


    .card {

        width:

            calc(100% - 30px);

        padding:

            25px 20px;

        border-radius:

            22px;

    }


    .card h2 {

        font-size:

            20px;

        padding-left:

            10px;

    }


    .formGroup label {

        font-size:

            15px;

    }


    .formGroup input,
    .formGroup select {

        height:

            52px;

        font-size:

            15px;

    }


    .primaryButton,
    .secondaryButton {

        height:

            54px;

        font-size:

            15px;

    }


    .backButton {

        margin:

            15px;

        font-size:

            14px;

    }


}