@charset "UTF-8";

/*
 *
 *	メールフォーム用 css
 *
 *	01. フォーム
 *	02. 確認画面
 *
 */

@layer components {
    /*----------------------------------------

        01. フォーム

    ----------------------------------------*/

    #mailformpro {
        margin: 0 auto;
        padding: 0;
    }

    #mailformpro label {
        cursor: pointer;
        display: inline-block;
        padding: 4px;
        border-radius: 4px;
    }

    #mailformpro input,
    #mailformpro textarea {
        padding: 4px;
        border: 1px solid var(--gray1-03);
        border-radius: 4px;
        vertical-align: middle;
    }
    #mailformpro input {
        height: 32px;
    }
    #mailformpro textarea {
        min-height: 10em !important;
        line-height: 1.4;
    }

    #mailformpro input[type=radio],
    #mailformpro input[type=checkbox] {
        margin-left: 12px;
    }
    #mailformpro label {
        margin: 0 16px 0 -25px;
        padding: 2px 8px 2px 32px;
        border: 1px solid transparent;
    }
    #mailformpro label.active {
        border: 1px solid var(--blue-02);
        background-color: rgba(57, 169, 214, .2);
    }
    #mailformpro .lp_form label {
        margin: 0 16px 0 0;
        padding: 2px 8px;
    }
    #mailformpro .lp_form input {
        margin: 0 8px 0 0;
    }

    dl.mailform {
        margin-top: 0;
    }

    dl.mailform dt {
        flex: 0 0 180px;
        margin: 0;
        padding: 0;
        height: 32px;
        text-align: left !important;
        /*font-size: var(--fs-s);*/
        font-size: var(--fs-m);
        color: var(--gray2-05);
        background-color: transparent;
    }

    /*---- 必須・任意アイコン ----*/
    dl.mailform dt span.required,
    dl.mailform dt span.optional {
        margin-right: 16px;
        padding: 0 4px;
        color: var(--white);
        font-size: var(--fs-xxs);
        border-radius: var(--bdr-r-4);
    }
    dl.mailform dt span.required {
        background-color: var(--red-01);
    }
    dl.mailform dt span.optional {
        background-color: var(--gray1-03);
    }
    dl.mailform dd {
        margin-bottom: 0;
        padding: 12px 0;
        flex: 0 0 calc(100% - 180px);
    }

    /*---- error text ----*/
    .mfp_err {
        font-size: var(--fs-m);
        color: #f00;
    }

    /*---- input hidden ----*/
    #mfp_hidden {
        visibility: hidden;
        height: 0;
    }

    /* ---- SP ----*/
    @media only screen and (max-width: 699px) {
        #mailformpro input.half {
            width: 44%;
        }

        dl.mailform {
            display: block;
            padding: 0;
        }
        dl.mailform dt {
            margin: 24px 0 0;
            width: 100%;
            text-align: left;
            padding: 0 8px;
        }
        dl.mailform dd {
            padding: 8px 0;
            width: 100%;
        }
        form#mailform input[type="text"] {
            margin-bottom: 16px;
            width: 100% !important;
        }
        table.infield tr th {
            width: 100%;
            text-align: left;
        }
        div#confirmBody {
            overflow-y: scroll;
        }

        #mailformpro .lp_form label {
            display: block;
        }

    }

    /*----------------------------------------

        02. 確認画面 

    ----------------------------------------*/

    div#mfp_overlay {
        position: absolute;
        display: none;
        z-index: 10001;
    }
    div#mfp_overlay_inner {
        background-color: #FFF;
        padding: 15px;
        margin: 0px auto;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #000;
        width: 640px;
        max-width: 90%;
    }
    div#mfp_overlay_background {
        background-color: #000;
        position: absolute;
        display: none;
        z-index: 10000;
    }
    div#mfp_loading_screen {
        z-index: 20000;
        opacity: 0.8;
        display: none;
        background-color: #000;
        position: absolute;
    }
    div#mfp_loading {
        z-index: 20001;
        position: absolute;
        display: none;
        width: 40px;
        height: 40px;
        background-image: url(../images/mfp_loading.gif);
    }

    #mfp_confirm_table th {
        width: 30%;
    }

    /* ---- SP ----*/
    @media only screen and (max-width: 739px) {
        #mfp_confirm_table th {
            width: 100%;
        }
    }
}