@charset "UTF-8";

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

    body id="contact"

    読み込み
    H2：pageTitle
    電話：contactTel
    フォーム：contactWpcf7
    個人情報保護方針：privacypolicy

============================================================ */
/* 読み込み ================================================= */

@import url("./common.css");   /* 共通：全ページ */

/* 読み込み ================================================= */
/* ========================================================= */
/* H2 ====================================================== */

section{

    &.pageTitle{
        /* この一覧の共通部分は、common.cssの「タイトルデザイン」で一元管理している */

        /* 共通部分の個別設定（上書き含む）*/

        /* 写真 */
        &::before{
            background-image: url(../img/contact/page_img.jpg);
        }

        @media screen and (width <= 600px){

            /* 写真 */
            &::before{
                background-position: right top;
                background-size: 150%;
            }

        }

    }

}

/* H2 ====================================================== */
/* ========================================================= */
/* 電話 ==================================================== */

section.contactTel{

    .boxArea{
        position: relative;
        padding-left: clamp(70px, 22.85vw - 67.14px, 230px);
        padding-right: clamp(70px, 22.85vw - 67.14px, 230px);
        padding-bottom: clamp(20px, 4.28vw - 5.71px, 50px);

        /* ピース：右下 */
        &::after{
            position: absolute;
            bottom: -30%;
            right: -17%;
            content: "";
            display: inline-block;
            width: 30%;
            aspect-ratio: 1/1;
            background: url(../img/common/page_main_piece05.png) top left no-repeat;
            background-size: contain;
        }

        h3{
            text-align: center;

            & + p{
                margin-top: clamp(20px, 4.28vw - 5.71px, 50px);
                text-align: center;
            }

        }

        .facility{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            margin-top: clamp(20px, 4.28vw - 5.71px, 50px);

            li{
                width: 45%;
                text-align: center;

                &:first-child{
                    width: 50%;
                    padding-right: 5%;
                    border-right: 1px dotted #ccc;
                }

                img{
                    width: fit-content;
                    height: clamp(26px, 2.85vw + 8.85px, 46px);   /* 高さで調整する */
                }

                .facilityTlsub{
                    margin: 3% auto 5%;
                }

                .telArea{
                    margin-top: 1px;
                    padding: 5%;
                    background-color: var(--color-Bg-Beige01);

                    p{
                        width: fit-content;
                        text-align: left;
                        margin: 0 auto;

                        &.telFree{
                            font-size: clamp(22px, 3.01vw - 3.13px, 36px);   /* MIN：835px ～ MAX：1300px */
                            font-weight: 600;
                            line-height: 1;
                            margin-top: 1%;
                            padding-left: 1.5em;
                            background: url(../img/common/icon_tel_free.svg) bottom left no-repeat;
                            background-size: auto 90%;
                        }

                        &:nth-child(2){
                            margin-top: 10px;
                        }

                        &:nth-child(3){
                            text-align: right;
                            border-top: 1px dotted #fff;
                        }

                    }

                }

            }

        }

        @media screen and (width <= 834px){
            padding-left: 5%;
            padding-right: 5%;
        }

        @media screen and (width <= 600px){
            padding-left: 0;
            padding-right: 0;
            padding-bottom: 5vh;

            /* ピース：右下 */
            &::after{
                background: none;
            }

            h3{

                & + p{
                    text-align: left;
                }

            }

            .facility{
                display: block;
                margin-top: 5vh;

                li{
                    width: 100%;

                    &:first-child{
                        width: 100%;
                        margin-bottom: 3vh;
                        padding-bottom: 3vh;
                        padding-right: 0;
                        border-bottom: 1px dotted #ccc;
                        border-right: none;

                        img{
                            width: 160px;
                            height: auto;
                        }

                    }

                    &:nth-of-type(2){

                        img{
                            width: 230px;
                            height: auto;
                        }

                    }

                    .telArea{

                        p{

                            &.telFree{
                                font-size: 28px;
                            }

                        }

                    }

                }

            }

        }

    }

}

/* 電話 ==================================================== */
/* ========================================================= */
/* フォーム ================================================= */

section.contactWpcf7{
    background-color: var(--color-Bg-Beige02);

    .boxArea{
        position: relative;
        padding-left: clamp(70px, 22.85vw - 67.14px, 230px);
        padding-right: clamp(70px, 22.85vw - 67.14px, 230px);
        padding-top: min(7%, 90px);
        padding-bottom: min(7%, 90px);

        /* ピース：左上 */
        &::before{
            position: absolute;
            top: 7%;
            left: -5%;
            content: "";
            display: inline-block;
            width: 15%;
            aspect-ratio: 3/5;
            background: url(../img/common/page_main_piece08.png) top left no-repeat;
            background-size: contain;
        }

        /* ピース：右下 */
        &::after{
            position: absolute;
            bottom: 10%;
            right: -13%;
            content: "";
            display: inline-block;
            width: 20%;
            aspect-ratio: 1/1;
            background: url(../img/common/page_main_piece06.png) top left no-repeat;
            background-size: contain;
        }

        @media screen and (width <= 834px){
            padding-left: 5%;
            padding-right: 5%;
        }

        @media screen and (width <= 600px){
            padding-left: 0;
            padding-right: 0;

            /* ピース：左上 */
            &::before{
                background: none;
            }

            /* ピース：右下 */
            &::after{
                background: none;
            }

        }

        h3{
            text-align: center;

            & + p{
                width: fit-content;
                margin: clamp(20px, 4.28vw - 5.71px, 50px) auto 0;

                @media screen and (width <= 600px){
                    margin-top: 2vh;
                }

            }

        }

        /* 必須 */
        .required{
            color: var(--color-Design-Pink03);
        }

        /* フォーム */
        .wpcf7{

            .required{
                margin-left: 5px;
            }

            dl{
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                margin-top: clamp(0px, 4.3vw - 35.91px, 20px);   /* MIN 835px：0px ～ MAX 1300px：20px */

                dt{
                    width: clamp(150px, 10.75vw + 60.21px, 200px);   /* MIN 835px：150px ～ MAX 1300px：200px */
                    /* white-space: nowrap; */
                    padding: 20px 0 0;

                    &.dd-dl{
                        padding-top: 35px;
                    }

                }

                dd{
                    width: calc(100% - clamp(150px, 10.75vw + 60.21px, 200px));   /* MIN 835px：150px ～ MAX 1300px：200px */
                    padding: 15px 0;

                    dl{
                        margin-top: 0;

                        dt{
                            width: clamp(100px, 10.75vw + 10.21px, 150px);   /* MIN 835px：100px ～ MAX 1300px：150px */
                            padding: 20px 10px 0 0;
                        }

                        dd{
                            width: calc(100% - clamp(100px, 10.75vw + 10.21px, 150px));   /* MIN 835px：100px ～ MAX 1300px：150px */
                        }

                    }

                }

                p{
                    margin-top: 0;
                }

                @media screen and (width <= 834px){
                    display: block;

                    dt{
                        width: 100%;
                        padding: 20px 0 0;

                        &.dd-dl{
                            padding-top: 20px;
                        }

                    }

                    dd{
                        width: 100%;
                        padding: 5px 0 0;

                        dl{
                            padding-left: 40px;

                            dt:first-child{
                               padding-top: 10px;
                            }

                            dd{
                                width: 100%;
                            }

                        }

                    }

                }

                @media screen and (width <= 600px){
                    margin-top: 0;

                    dt{
                        margin-top: 2vh;
                        padding-top: 2vh;
                        border-top: 1px solid var(--color-Design-Gray01);
                    }

                    dd{

                        dl{
                            padding-left: 0;

                            dt{
                                padding-top: 0 !important;
                                border-top: none;
                            }

                        }

                    }

                }

            }

            /* 入力項目 */
            input[type=text],
            input[type=tel],
            input[type=email],
            select,
            textarea{
                width: 100%;
                padding: 0.4em 2.8em 0.4em 0.8em;
                border-radius: 8px;

                &::placeholder{
                    color: #ccc;
                }

            }

            select{
                width: fit-content;
            }

            /* チェックボックス */
            .wpcf7-list-item{

                .wpcf7-list-item-label{
                    margin: 0 30px 0 10px;
                }

                @media screen and (width <= 600px){
                    display: block;

                    .wpcf7-list-item-label{
                        margin: 0 0 0 10px;
                    }

                }

            }

            /* ボタン */
            .formBt{
                display: flex;
                flex-wrap: wrap;
                width: fit-content;
                margin: clamp(20px, 4.28vw - 5.71px, 50px) auto 0;

                .bt{
                    margin: 0 clamp(10px, 8.6vw - 61.82px, 50px);

                    input{
                        padding-left: 15%;
                    }

                }

                @media screen and (width <= 600px){

                    .bt{
                        width: 120px;
                    }

                }

            }

            /* テキストリンク */
            .ppLink{
                transition: var(--transition-TxtLink);

                &:link,
                &:visited{
                    color: var(--color-Design-Pink03);
                    text-decoration: underline;
                }

                @media (hover:hover){

                    &:hover{
                        text-decoration: none;
                    }

                }

            }

            /* エラー */
            .wpcf7-response-output{
                color: #f00;
                text-align: center;
                margin: clamp(10px, 2.85vw - 7.14px, 30px) 0 10px;
                padding: 10px 10px 0;

                @media screen and (width <= 600px){
                    margin: 10px 0;
                }

            }

            /* 各項目の文章 */
            .wpcf7-not-valid-tip{
                display: block;
                color: #f00;
            }

            /* 上部の文章 */
            div.screen-reader-response{
                display: none;
            }

        }

    }

}

/* フォーム ================================================= */
/* ========================================================= */
/* 個人情報保護方針 ========================================== */

section.privacypolicy{

    .boxArea{
        padding-left: clamp(70px, 22.85vw - 67.14px, 230px);
        padding-right: clamp(70px, 22.85vw - 67.14px, 230px);
        padding-top: min(7%, 90px);
        padding-bottom: min(7%, 90px);

        h3{
            text-align: center;
        }

        ol{
            margin-top: 3%;

            > li{
                font-weight: 600;
                list-style: decimal;
                list-style-position: inside;
                margin-top: 3%;
                padding: 3% 3% 0 2%;
                border-top: 1px solid var(--color-Design-Gray01);

                &::marker{
                    font-weight: 600;
                }

                &:first-child{
                    margin-top: 0;
                    border-top: none;
                }

                p{
                    text-align: justify;
                }

                .listDisc{
                    margin-top: 3%;
                    margin-left: 3%;

                    li{
                        font-weight: 400;
                        margin-top: 0;

                        &::marker{
                            font-weight: 400;
                        }

                    }

                }

            }

        }

        @media screen and (width <= 834px){
            padding-left: 5%;
            padding-right: 5%;
        }

        @media screen and (width <= 600px){
            padding-left: 0;
            padding-right: 0;
            padding-top: 3vh;
            padding-bottom: 3vh;

            ol{
                margin-top: 0;

                > li{
                    margin-top: 3vh;
                    padding: 3vh 0 0;

                    .listDisc{
                        margin-top: 2vh;
                        margin-left: 0;
                    }

                }

            }

        }

    }

}

/* 個人情報保護方針 ========================================== */
/* ========================================================= */