@charset "utf-8";
/* 
サイト固有の記述
*/

/* 全体（色系）*/
body {
    &.preventive-dentistry,
    &.implants,
    &.general-dentistry {
        .sec03,
        .sec05 {
            background-color: #ffffff;
        }
    }

    .single_page .gutenberg strong {
        color: #333333;
    }

    /* .sec03 {
        padding: 80px 0 80px;
        background-color: #edffe9;
    } */

    .leadbox01 {
        background-color: #edffe9;
    }

    .contact .contact_info {
        background-color: #edffe9;
    }

    iframe.line03 {
        border: solid 2px #344b00;
    }

    header {
        a.tel_link {
            color: #698b1e;
        }

        a.tel_link::before {
            background-image: url(../images/icon/h.tel01.svg);
        }
    }

    .gnav {
        a.tel_link::before {
            background-image: url(../images/icon/h.tel01.svg);
        }
    }
}

/* パソコン以上*/
@media screen and (min-width: 1281px) {
    body {
        /* .footerUpper .footerUpper_nav_area .menu-footer01-container,
        .footerUpper .footerUpper_nav_area .menu-footer02-container {
            width: 200px;
        } */

        /* .footerUpper .footerUpper_nav_area,
        .footerUpper .footerUpper_nav_area .f_2cul {
            gap: 0 100px;
        }*/

        &.preventive-dentistry,
        &.implants,
        &.general-dentistry {
            .sec03,
            .sec05 {
                padding: 0;
            }
        }

        &.periodontal-disease {
            .sec02 .layout_a .imgbox,
            .sec02 .layout_b .imgbox {
                width: 30%;
            }

            .sec02 {
                .layout_a,
                .layout_b {
                    align-items: center;
                }
            }

            .sec03 {
                padding: 80px 0 0;
            }
        }

        .gap0_box {
            .sub_images_ul .li {
                width: calc(33.3333333333% - 0px);
            }

            .sub_images_ul .li2 {
                width: calc(33.3333333333% - 15px);
            }

            .sub_images_ul {
                gap: 35px 0px;
            }
        }

        main section .page_head {
            aspect-ratio: 1920 / 380;
        }
        .footerUpper .footerUpper_nav_area .box,
        .footerUpper .footerUpper_nav_area .f_2cul .menu-footer03-container,
        .footerUpper .footerUpper_nav_area .f_2cul .menu-footer04-container {
            flex: none;
        }

        .bnr_flex li figure img {
            aspect-ratio: 760 / 250;
        }

        .tp_sec04 {
            .layout_b .imgbox {
                width: 55%;
            }
        }

        .tp_sec06 {
            .infobox01 {
                padding: 50px;
            }
        }

        &.about-our-hospital {
            .sec01 {
                .layout_b .imgbox {
                    width: 45%;
                    margin-right: 80px;
                }

                .layout_a .imgbox {
                    width: 45%;
                    margin-left: 80px;
                }
            }
        }

        .add_message {
            .layout_a .txtbox {
                padding-top: 10%;
            }
        }

        &.features {
            .sec02 {
                .layout_b .imgbox {
                    width: 45%;
                    margin-right: 80px;
                }

                .layout_a .imgbox {
                    width: 45%;
                    margin-left: 80px;
                }
            }
        }

        header {
            ul.links_sns {
                gap: 0 15px;
            }
        }

        &.preventive-dentistry,
        &.implants {
            .sec01,
            .sec02,
            .sec03 {
                .layout_b .imgbox {
                    width: 45%;
                }
            }
        }

        &.general-dentistry {
            .sec01,
            .sec02,
            .sec03,
            .sec04,
            .sec05 {
                .layout_b .imgbox {
                    width: 45%;
                }
            }
        }
    }
}

/* モニター以上*/
@media screen and (min-width: 1860px) {
    body {
    }
}

/* タブレット*/
@media screen and (max-width: 1024px) {
    body {
        .add_works {
            .contents_wrap {
                padding: 0;
            }

            .non_thum_list li {
                padding: 20px;
            }
        }

        .add_message {
            .layout_a {
                display: flex;
                flex-direction: column-reverse;

                .imgbox {
                    width: 40%;
                    margin: 30px auto 0;
                }
            }
        }

        &.preventive-dentistry,
        &.implants {
            .sec03 {
                padding: 0;
            }
        }

        &.periodontal-disease {
            .sec03 {
                padding: 50px 0 0;
            }
        }

        .tp_sec02 .gap0_box {
            .sub_images_ul .li {
                width: calc(100% / 3 - 0px);
            }
        }
    }
}

/* 携帯*/
@media screen and (max-width: 767px) {
    body {
        .basic_space1_padding_top {
            padding-top: 6.1vw;
        }

        .tp_sec04 .sub_images_ul .li figure img {
            aspect-ratio: 1 / 0.8;
        }

        .non_thum_list li .category_c {
            margin: 0 0px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .tp_sec06 {
            aspect-ratio: 700 / 340;
        }

        .bnr_flex li {
            aspect-ratio: 39/25;
        }
        .bnr_flex li figure {
            aspect-ratio: 39/25;
        }
        .bnr_flex li a:before {
            aspect-ratio: 39/25;
        }

        .chk_list li::before {
            width: 20px;
            height: 20px;
        }

        .chk_list li {
            padding-bottom: 10px;
        }

        .ttl_line01 span.sp_text {
            font-size: 14px;
        }

        .tbl_list02a li .list_ttl {
            padding: 20px;
        }

        .tbl_list02a li .list_body {
            padding: 20px;
        }

        .tbl_list02a li:before {
            width: 30%;
        }

        .non_thum_list li {
            padding: 20px;
        }

        .gnav .f14 {
            font-size: 14px;
        }

        .gnav a.tel_link {
            font-size: 26px;
        }

        .add_message {
            .layout_a {
                display: flex;
                flex-direction: column-reverse;

                .imgbox {
                    width: 65%;
                    margin: 30px auto 0;
                }
            }
        }

        .tp_sec02 .gap0_box {
            .sub_images_ul .li {
                width: 100%;
            }
        }

        &.periodontal-disease {
            .sec03 {
                /* .chk_list.cul02 {
                    display: block;
                } */

                .chk_list.cul02 li {
                    width: 100%;
                }

                .chk_list.cul02 li {
                    padding-left: 30px;
                }
            }
        }

        main section .page_title .sv_ttl .jp_ttl {
            font-size: 21px;
        }
    }
}