/* ========================================
   お問い合わせページ
======================================== */


/* ========================================
   導入文
======================================== */

.contact-intro {
    width: 84%;
    max-width: 1100px;

    margin: clamp(45px, 5vw, 70px) auto 0;

    padding:
        clamp(28px, 3vw, 40px)
        clamp(30px, 4vw, 50px);

    box-sizing: border-box;

    background-color: #EAF7F8;

    border: 8px solid #ffffff;
    border-radius: 25px;

    box-shadow:
        12px 12px 18px rgba(110, 110, 110, 0.22);

    text-align: center;
}


.contact-intro-text {
    width: 100%;

    margin: 0;

    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 300;

    line-height: 1.8;
    letter-spacing: 0.03em;

    color: #333333;
}



/* ========================================
   フォーム全体
======================================== */

.contact-form-section {
    width: 82%;
    max-width: 1000px;

    margin:
        clamp(70px, 7vw, 100px)
        auto
        clamp(90px, 8vw, 120px);

    padding:
        clamp(45px, 5vw, 65px)
        clamp(40px, 5vw, 65px);

    box-sizing: border-box;

    background-color: rgba(234, 247, 248, 0.9);

    border: 8px solid #ffffff;
    border-radius: 28px;

    box-shadow:
        15px 15px 20px rgba(110, 110, 110, 0.22);
}


.contact-form {
    width: 100%;

    margin: 0;

    box-sizing: border-box;
}



/* ========================================
   各入力項目
======================================== */

.form-item {
    width: 100%;

    margin-bottom: clamp(28px, 3vw, 38px);
}


.form-item:last-of-type {
    margin-bottom: 0;
}



/* ========================================
   項目名
======================================== */

.form-item label {
    display: block;

    margin-bottom: 10px;

    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 500;

    line-height: 1.5;
    letter-spacing: 0.03em;

    color: #333333;
}



/* ========================================
   必須マーク
======================================== */

.required {
    display: inline-block;

    margin-left: 8px;

    padding: 2px 8px;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.4;

    color: #855656;

    background-color: rgba(255, 255, 255, 0.75);

    border: 1px solid #b48787;
    border-radius: 10px;

    vertical-align: middle;
}



/* ========================================
   入力欄共通
======================================== */

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;

    padding: 14px 16px;

    box-sizing: border-box;

    font-family: inherit;
    font-size: clamp(16px, 1.2vw, 18px);

    color: #333333;

    background-color: rgba(255, 255, 255, 0.95);

    border: 1.5px solid #9dafb1;
    border-radius: 12px;

    outline: none;

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



/* ========================================
   プレースホルダー
======================================== */

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #999999;

    opacity: 1;
}



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

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    background-color: #ffffff;

    border-color: #617c7f;

    box-shadow:
        0 0 0 3px rgba(97, 124, 127, 0.14);
}



/* ========================================
   セレクトボックス
======================================== */

.contact-form select {
    cursor: pointer;
}



/* ========================================
   お問い合わせ内容
======================================== */

.contact-form textarea {
    min-height: 220px;

    line-height: 1.7;

    resize: vertical;
}



/* ========================================
   送信エリア
======================================== */

.form-submit {
    margin-top: clamp(40px, 5vw, 55px);

    text-align: center;
}



/* ========================================
   送信ボタン
======================================== */

.form-submit button {
    width: clamp(190px, 24vw, 260px);

    padding: 14px 25px;

    box-sizing: border-box;

    font-family: inherit;
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 500;

    letter-spacing: 0.08em;

    color: #333333;

    background-color: #ffffff;

    border: 1.5px solid #333333;
    border-radius: 30px;

    box-shadow:
        7px 7px 12px rgba(110, 110, 110, 0.18);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}



/* マウスを乗せたとき */
.form-submit button:hover {
    transform: translateY(-2px);

    background-color: #EAF7F8;

    box-shadow:
        9px 9px 14px rgba(110, 110, 110, 0.22);
}



/* キーボード操作時 */
.form-submit button:focus-visible {
    outline: 2px solid #617c7f;
    outline-offset: 4px;
}



/* ========================================
   タブレット
   1024px以下
======================================== */

@media (max-width: 1024px) {

    .contact-intro {
        width: 90%;

        margin-top: 50px;

        padding:
            30px
            35px;
    }


    .contact-intro-text {
        font-size: clamp(17px, 2vw, 20px);
    }


    .contact-form-section {
        width: 90%;

        margin-top: 70px;

        padding:
            45px
            40px;
    }


    .form-item label {
        font-size: clamp(17px, 2vw, 19px);
    }


    .contact-form textarea {
        min-height: 200px;
    }

}



/* ========================================
   スマートフォン
   768px以下
======================================== */

@media (max-width: 768px) {

    /* ------------------------------
       導入文
    ------------------------------ */

    .contact-intro {
        width: 92%;

        margin-top: 35px;

        padding:
            22px
            18px;

        border-width: 5px;
        border-radius: 20px;

        box-shadow:
            8px 8px 14px rgba(110, 110, 110, 0.2);
    }


    .contact-intro-text {
        font-size: clamp(14px, 3.7vw, 17px);

        line-height: 1.8;
    }



    /* ------------------------------
       フォーム
    ------------------------------ */

    .contact-form-section {
        width: 92%;

        margin:
            clamp(50px, 10vw, 65px)
            auto
            clamp(65px, 12vw, 85px);

        padding:
            clamp(30px, 7vw, 38px)
            clamp(18px, 5vw, 25px);

        border-width: 5px;
        border-radius: 20px;

        box-shadow:
            8px 8px 14px rgba(110, 110, 110, 0.2);
    }



    /* ------------------------------
       各項目
    ------------------------------ */

    .form-item {
        margin-bottom:
            clamp(24px, 6vw, 30px);
    }


    .form-item label {
        margin-bottom: 8px;

        font-size: clamp(16px, 4vw, 18px);
    }



    /* ------------------------------
       必須
    ------------------------------ */

    .required {
        margin-left: 6px;

        padding: 2px 7px;

        font-size: 11px;
    }



    /* ------------------------------
       入力欄
    ------------------------------ */

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding:
            13px
            14px;

        font-size: 16px;

        border-radius: 10px;
    }



    /* ------------------------------
       テキストエリア
    ------------------------------ */

    .contact-form textarea {
        min-height: 180px;

        line-height: 1.7;
    }



    /* ------------------------------
       送信ボタン
    ------------------------------ */

    .form-submit {
        margin-top: 35px;
    }


    .form-submit button {
        width: 80%;
        max-width: 280px;

        padding:
            13px
            20px;

        font-size: 17px;
    }

}



/* ========================================
   小さいスマートフォン
   476px以下
======================================== */

@media (max-width: 476px) {

    .contact-intro {
        width: 94%;

        padding:
            20px
            15px;
    }


    .contact-form-section {
        width: 94%;

        padding:
            28px
            16px;
    }


    .contact-intro-text {
        font-size: 14px;
    }


    .form-submit button {
        width: 90%;
    }

}