@charset "utf-8";

/*-------------------------------------
新header上書き用
-------------------------------------*/

#hdr_info{
    display: none;
}
@media screen and (min-width: 741px){
    #hdr_logo_bar{
        width: unset !important;
    }
    #hdr_logo_wrapper{
        display: flex;
        justify-content: space-between;
        gap: 20px;
        #hdr_info{
            width: calc( ( 100% - 20px) - 220px );
            display: flex;
            gap: 20px;
            .item{
                width: calc( ( 100% - 20px ) / 2);
                h3{
                    font-size: 110%;
                    font-weight: bold;
                    text-align: center;
                    border-radius: 0 0 10px 10px;
                    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
                    padding: 0.5em 0;
                    transition-duration: .4s;
                    margin: 0;
                }
                h3:hover{
                    transform: scale(1.1);
                }
                dl{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 10px;
                    gap: 5px;
                    dt{
                        border-radius: 50px;
                        box-sizing: border-box;
                        padding: 0.1em 0.5em;
                        text-align: center;
                        font-weight: bold;
                        font-size: 80%;
                    }
                    dd{
                        font-weight: bold;
                        font-size: 90%;
                        color: #A38B77;
                    }
                }
            }
            .item.tsukaguchi{
                h3{
                    background-color: #E18085;
                    color: #fff;
                }
                dl{
                    dt{
                        background-color: #E18085;
                        color: #fff;
                    }
                }
            }
            .item.mukonoso{
                h3{
                    background-color: #FAE7E7;
                    color: #E18085;
                }
                dl{
                    dt{
                        background-color: #FAE7E7;
                        color: #E18085;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 741px) and (max-width: 1023px) {
    #hdr_logo_wrapper{
        dl{
            width: 75%;
            margin: 0 auto;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
    }
}

@media screen and (min-width: 1025px) {
    #hdr_logo_wrapper{
        display: flex;
        justify-content: space-between;
        gap: 80px;
        #hdr_info{
            width: calc( ( 100% - 80px) - 220px );
        }
    }
}

/*-------------------------------------
共通
-------------------------------------*/
/*テスト環境のみに出現*/
.test_box_info{
    width: 1.2em;
    height: 100vh;
    background-color: #82B8DF;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 1em 0.1em;
    font-size: 110%;
    font-weight: bold;
}



.font-m-plus {
    font-family: "M PLUS 2", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}


.flex_wrapper{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.flex_wrapper.col-1{
    .item{
        width: 100%;
    }
}
.flex_wrapper.col-2{
    .item{
        width: calc( ( 100% - 20px ) / 2);
    }
}
.flex_wrapper.col-3{
    .item{
        width: calc( ( 100% - 40px ) / 3);
    }
}

@media screen and (min-width: 741px) and (max-width: 1023px) {

}

@media screen and (max-width: 740px) {
    .flex_wrapper{
        flex-direction: column;
        max-width: 95%;
    }
    .flex_wrapper.col-2{
        .item{
            width: 100%;
        }
    }
    .flex_wrapper.col-3{
        .item{
            width: 100%;
        }
    }
}


.open_txt{
    width: 100%;
    border: #ECAFB2 1px solid;
    background-color: #FAE7E7;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 150%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #E18085;
    box-sizing: border-box;
    padding: 10px;
    @media screen and (max-width: 740px) {
        width: 90%;
        margin:  1rem auto;
        font-size: 120%;
    }
}


/*-------------------------------------
タブ切替
-------------------------------------*/
.tab_box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.tab_box > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    background-color: #f2f2f2;
    color: #999;
    font-weight: 600;
    font-size: 1.2em;
    text-align: center;
    cursor: pointer;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

@media screen and (max-width: 740px) {
    .tab_box > label{
        font-size: 0.9em;
    }
}

.tab_box > label:hover {
    opacity: .8;
}

.tab_box input {
    display: none;
}

.tab_box > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    box-sizing: border-box;
    background-color: #fff;
}

.tab_box label:has(:checked) {
    border-bottom: 4px solid #E18085;
    color: #E18085;
}

.tab_box label:has(:checked) + div {
    display: block;
}


/*-------------------------------------
共通-お知らせ欄
-------------------------------------*/
/*記事とバナー連動のもの*/
.post_banner_area{
    width: 100%;
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    .item{
        img{
            width: 100%;
        }
    }
}
@media screen and (max-width: 740px) {
    .post_banner_area{
        width: 90%;
        margin:  0 auto 30px auto;
        flex-direction: column;
        flex-wrap: wrap;
        .item{
            width: 100%;
            img{
                width: 100%;
            }
        }
    }
}


/*求人記事専用スタイル*/
.recruit_post{
    ul.list{
        display: flex;
        gap: 15px;
        li{
            padding: 1em;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 0;
            border-radius: 20px;
            box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
            border: 1px solid #E18085;
            a{
                color: #E18085;
                font-weight: bold;
                font-size: 120%;
            }
        }
        li:hover{
            opacity: 0.8;
        }
    }
    h2{
        border-bottom: 5px solid #E18085;
        background-color: #FAE7E7;
        padding: 0.5em 1em;
        box-sizing: border-box;
        width: 100%;
        font-weight: bold;
        color: #E18085;;
    }
    p{
        padding: 0 1em;
        box-sizing: border-box;
    }
    table{
        tr{
            display: flex;
            border-bottom: 1px solid #ddd;
        }
        td,th{
            padding: 1em 0;
            box-sizing: border-box;
            border: 0;
        }
        th{
            min-width: 10em;
            background-color: #FAE7E7;
            font-weight: bold;
            text-align: center;
            color: #E18085;
            
        }
        td{
            width: calc( 100% - 10em );
            vertical-align: middle;
            ul{
                width: 100%;
                li{
                    span{
                        font-size: 120%;
                    }
                }
            }
        }
        @media screen and (max-width: 740px) {
            tr{
                flex-direction: column;
            }
            th,td{
                width: 100%;
                box-sizing: border-box;
            }
                        ul{
                li{
                    margin: 0 1em !important;
                }
            }
        }
    }
    strong{
        font-weight: bold;
    }
}

.scroll_box{
    height: 40vh;
    overflow-y: scroll;
    dl{
        background-color: #f0f0f0;
        padding: 1em;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        dd{
            p{
                white-space: pre-line !important;
                word-break: break-all;
                overflow-wrap : break-word;
            }
        }
    }
}

@media screen and (max-width: 740px) {
    .scroll_box{
        margin-bottom: 2em;
    }
}

/*-------------------------------------
共通-診療時間表
-------------------------------------*/
.common_time{
    h3{
        background-color: #E18085;
        color: #fff;
        padding: 10px 0;
        text-indent: 1em;
        font-size: 120%;
        font-weight: bold;
    }
    
}

.common_time_wrap{
    width: 100%;
    margin: 1em auto 2.5em auto;
    box-sizing: border-box;
    border: 4px solid #E18085;
    table{
        box-shadow:0 0 10px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        width: 100%;
        border-collapse: unset !important;
        td,th{
            padding: 1em 0.5em;
            box-sizing: border-box;
            text-align: center;
            border-bottom: 2px solid #ddd;
        }
        thead{
            background-color: #FAE7E7;
            th:first-of-type{
                font-size: 110%;
                width: 11em;
                background-color: #E18085;
                color: #fff;
                border-top: none;
                border-left: none;
            }
            td{
                width: calc( ( 100% - 11em ) / 6);
            }
        }
        tbody{
            ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                flex-direction: column;
                width: 100%;
                li{
                    line-height: 1.3em;
                    img{ width: 100%;}
                }
                li.off{
                    /* filter: grayscale(1);
                    filter: opacity(20%); */
                    display: none;
                }
                li:nth-of-type(1),
                li:nth-of-type(2){
                    color: #82B8DF;
                }
                li:nth-of-type(3),
                li:nth-of-type(4){
                    color:#E18085;
                }
            }
            th:first-of-type{
                font-size: 110%;
                min-width: 10em;
            }
            td{
                width: calc( ( 100% - 10em ) / 6);
                min-width: 7em;
            }
            th,td{
                border: 1px solid #eee;
                background-color: #fff;
                dl{
                    display: flex;
                    justify-content: center;
                    gap: 5px;
                    align-items: center;
                    dt{
                        background-color: #FAE7E7;
                        font-size: 12px;
                        font-weight: bold;
                        border-radius: 100px;
                        padding: 0 0.5em;
                        box-sizing: border-box;
                        color: #E18085;
                    }
                    dd{
                        font-size: 12px;
                        color: #E18085;
                    }
                }
            }
        }
    }
    p{
        padding: 1em;
        box-sizing: border-box;
        margin-bottom: 0;
    }
}



.common_time_wrap.mukonoso + .common_time{
    .seikatsuhogo{
        display: none;
    }
}

.time_table_attention{
    width: 80%;
    margin: 2em auto;
    p{
        border: 1px solid #E18085;
        border-radius: 100px;
        text-align: center;
        color: #E18085;
        font-size: 110%;
        font-weight: bold;
        margin-bottom: 10px;
        box-shadow:  3px 3px 5px rgba(0, 0, 0, 0.1);
        span{
            font-size: 120%;
            color: #A38B77;
        }
    }
}


/*-------------------------------------
よくあるご質問
-------------------------------------*/
.faq_flex{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
}

#question{
    .body{
        dl{
            dt{ 
                font-weight: bold;
            }
            dt::before{
                content: "Q";
                border-radius: 50px;
                background-color: #ECAFB2;
                padding: 0.15em 0.5em;
                color: #fff;
                font-size: 1.5em;
                font-weight: bold;
                margin-left: -2em;
                margin-right: 0.3em;
            }
            dd{
                text-indent: 0 !important;
            }
            dd::before{
                content: "A";
                border-radius: 50px;
                background-color: #A38B77;
                padding: 0.15em 0.5em;
                color: #fff;
                font-size: 1.5em;
                font-weight: bold;
                margin-left: -2em;
                margin-right: 0.3em;
            }
        }
    }

}


/*-------------------------------------
料金表
-------------------------------------*/
#price{
    h3{
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .price_block{
        dl{
            dt{
                em{
                    padding: 0.1em 0.5em;
                    font-size:0.65em;
                    color: #E18085;
                    box-sizing: border-box;
                    border: 1px solid #E18085;
                    border-radius: 50px;
                    font-weight: bold;
                    margin-left: 0.5em;

                }

            }
        }
        .price_notice{
            top: 0 !important;
        }
    }
}

/*-------------------------------------
アクセス
-------------------------------------*/
.googlemap{
    iframe{
        height: 400px;
    }
}
.access_map{
    justify-content: space-between;
    a{
        width: 240px;
    }
}
@media screen and (max-width: 740px) {
    .access_map{
        a{
            margin: 0 auto;
        }
    }
}


/*-------------------------------------
フッター
-------------------------------------*/
.footer_inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .f_nav{
        width: unset !important;
        height: unset !important;
        float: unset !important;
    }
    #copyright{
        width: unset !important;
        height: unset !important;
        float: unset !important;
    }
}

.footer_address{
    display: flex;
    flex-direction: column;
    background: #fff;
    flex-wrap: wrap;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 25px;
    .object_list{
        text-align: center;
        padding-bottom: 1em;
        border-bottom: 1px solid #ddd;
    }
    dl{
        display: flex;
        gap: 20px;
        margin-bottom: 1em;
    }
    dt{
        background-color: #E18085;
        color: #fff;
        text-align: center;
        border-radius: 10px; 
        width: 8em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
    dd{
        width: calc( 100% - 8em );
        p{
            a{
                font-size: 120%;
                font-weight: bold;
            }
        }
        .reserv_btn{
            width: 100%;
            box-sizing: border-box;
            padding: 0.5em 0;
            text-align: center;
            background-color: #FAE7E7;
            font-weight: bold;
            border-radius: 10px;
            box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
            border: 1px solid #E18085;
            a{
                color: #E18085;
            }
        }
        .reserv_btn:hover{
            color: #fff;
            background-color: #E18085;
            a{
                color: #fff;
            }
        }
    }
}
@media screen and (min-width: 741px) {
    .footer_address{
        margin: 0 auto 50px auto;
        padding: 30px 50px;
        ._footer_inner{
            display: flex;
            gap: 20px;
            dl{
                width: calc( ( 100% - 20px) / 2);
                display: flex;
                gap: 20px;
            }
        }
    }
}