@charset "UTF-8";

/*

formのサイズ 960px

break point1 1007px…formの両脇が狭苦しくなってきたら

break point2 767px…ipad miniのサイズを切ったら

*/



:root {

    --wideContentsWidth: 960px;

}



.contact_section {

    width: 100%;

    max-width: var(--wideContentsWidth);

    margin: 0 auto;

    padding: 16px 0px;

}



.requiredCaution {

    text-align: right;

    font-size: 12px;

    color: #ee0101;

    margin-bottom: 8px;

}



dl {

    margin-bottom: 32px;

    div {

        display: flex;

        margin-bottom: 2px;

                &:has(.validate\[required\]) {

            dt:not(.no-asterisk)::after {

                content: "*";

                color: #ee0101;

                margin-left: 2px;

            }

        }

        dt,

        dd {

            display: flex;

            align-items: center;

            height: auto;

            font-size: 14px;

        }

        dt {

            width: 200px;

            padding: 20px 32px 20px 24px;

            margin-right: 2px;

            justify-content: flex-end;

            color: #666;

            background-color: #f0f0f0;



            &.required::after {

                content: "*";

                color: #ee0101;

                margin-left: 2px;

            }

        }

        dd {

            margin: 0px;

            padding: 14px 24px;

            width: 758px;

            /* form のサイズ(960px) - dt のサイズ(200px) - dtの右のmarginのサイズ(2px) */

            background-color: #f9f9f9;

            a {

                color: #999;

                text-decoration: underline;

            }

            ul,

            ol,

            ul li,

            ol li {

                margin: 0px;

                padding: 0px;

            }

            ul,

            ol {

                list-style: none;

            }



            /* 予約希望日のとこで使ってるやつ。一列に並べたいよ、という思い */

            .reservation_inline_wrap {

                display: flex;

                flex-wrap: wrap;

                align-items: center;

                margin-right: 16px;

                &:last-of-type {

                    margin-right: 0;

                }

                .select_text {

                    margin-right: 4px;

                }

            }



            .wpcf7-form-control-wrap {

                margin-right: 16px;

                display: flex;

                &:last-of-type {

                    margin-right: 0;

                }

                &:has(textarea) {

                    width: 100%;

                }

            }



            [type=text],

            [type=number],

            [type=email],

            [type=tel],

            [type=date],

            textarea {

                border: solid 1px #CCC;

                padding: 8px;

                &:read-only {

                    background-color: #f0f0f0;

                    border: solid 1px #CfCfCf;

                    color: #666;

                }

            }

            textarea {

                width: 100%;

            }

            select {

                border: solid 1px #CCC;

                padding: 8px 0;

            }





            [type=checkbox],

            [type=radio] {

                margin: 0px 2px;

            }



            /* contact form7 のバリデーションを消す */

            span.wpcf7-not-valid-tip {

                display: none !important;

            }



            /* jquery-validation-engine のポップアップを調整  */

            .formError .formErrorContent.formErrorContent {

                position: relative;

                border: none;

                box-shadow: none;

                border-radius: 0;

                top: -12px;

            }

            .formError .formErrorContent::after {

                content: "";

                width: 0;

                height: 0;

                border-style: solid;

                border-width: 8px 8px 0 8px;

                border-color: #ee0101 transparent transparent transparent;

                position: absolute;

                bottom: -8px;

                left: 8px;

            }

            .formError .formErrorArrow div {

                display: none !important;

            }

            .formError .formErrorArrowBottom {

                display: none;

            }



            /* 都道府県取得のとき用 */

            &.h-adr {

                div {

                    width: 100%;

                    display: flex;

                    align-items: center;

                    margin-bottom: 8px;

                    font-size: 14px;

                    label {

                        width: 64px;

                    }

                    a {

                        margin-left: 8px;

                    }

                }

            }



        }



    }

}



[type="submit"],

[type="button"] {

    display: block;

    font-size: 16px;

    margin: 0 auto;

    padding: 16px 96px;

    background: #000;

    color: #fff;

    border: none;

    text-shadow: none;

    border-radius: 0;

    cursor: pointer;

    outline: none;

    text-align: center;

    transition: .3s;



    &:hover {

        background-color: #ddd;

        color: #000;

    }

    &:disabled {

        background-color: #ddd;

        color: #666;

        cursor: not-allowed;

    }

}



.previous_submit {

    display: flex;

    flex-wrap: wrap;

    margin-bottom: 24px;

    justify-content: space-evenly;

    width: 100%;

    div {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        width: 50%;

    }

    input {

        margin: 0;

        &.wpcf7-previous {

            background-color: #969696;

            &:hover {

                background-color: #ddd;

            }

        }

    }

}



@media screen and (max-width: 1007px) {

    .contact_section {

        width: 100%;


    }

    dl div dd {

        flex-direction: column;

        justify-content: center;

        align-items: flex-start;



        .reservation_inline_wrap {

            display: flex;

            width: 100%;

            &:last-of-type {

                margin-right: 0;

            }

            .select_text {

                margin-right: 0;

                width: 96px;

            }

            .wpcf7-form-control-wrap {

                width: auto;

            }

        }



        .wpcf7-form-control-wrap {

            width: 100%;

            margin: 0 0 16px 0;



            &:last-of-type {

                margin-bottom: 0;

            }

        }



        [type=text],

        [type=number],

        [type=email],

        [type=tel],

        [type=date] {

            width: 100%;

        }



        /* 都道府県取得のとき用 */

        &.h-adr {

            div {

                align-items: flex-start;

                flex-direction: column;

                a {

                    margin-left: 0;

                }

            }

        }

    }

}



@media screen and (max-width: 767px) {

    dl {

        div {

            flex-direction: column;

            dt {

                width: 100%;

                margin: 0;

                padding: 8px;

                justify-content: flex-start;

            }

            dd {

                width: 100%;

                padding: 20px 10px;

                .reservation_inline_wrap {

                    flex-direction: row;

                    /* align-items: flex-start; */

                }



            }

        }

    }

}



@media only screen and (max-width: 660px) {

    .previous_submit {

        flex-direction: column;

        align-items: center;

        input.wpcf7-previous {

            margin-bottom: 16px;

        }

    }



}



/* Multi-Step Forms 文字数制限対応の調整等 */

.explanation {

    margin-bottom: 50px;

}

.countTxt {

    display: block;

    width:100%;

}

dl div dd {

    display:flex;

    flex-wrap: wrap;

    text-align: left;

}

@media screen and (max-width: 767px) {

    .explanation {

        text-align: left;

        margin-bottom: 30px;

    }

}