@charset "utf-8";
:root {
    /* タイトル1等の文字色 */
    --primary-color: #784b3a;
    /* background-color: var(--yellow); */

    /* サブ2の文字色 */
    --secondary-color: #8fc31f;

    /* サブ3の色 */
    --third-back-color: #ea952d;
    
    --font-big:clamp(24px, 20 / 824 * 100vw, 32px);
    --font-middle:clamp(20px, 20 / 824 * 100vw, 24px);
    --font-normal:clamp(16px, 20 / 824 * 100vw, 18px);

}

.junbi::before {
    background-color: #cce697;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    height: 100%;
    width: 100%;
}

#services01 {
    padding-top: 30px;
}

.lower_section {
    padding-bottom: 40px;
}


.border_ttl01 {
    text-align: left;
}

.lower_flex02_three.org_txt_height_wrap .lower_flex02_item {
    display: block;
}
.lower_flex02_three.org_txt_height_wrap .org_txt {
    min-height: auto;
}



.lower_inner .lower_flex01:first-of-type {
    margin-bottom: 90px;
}

.first_link {
    background-color: #dfebb8;
}

.first_link:hover {
    background-color: #8fc31f;
}


.first_link_hide a::before {
    content: "・";
    color: #6eb92b;
}
.first_link_hide a:first-of-type::before {
    color: #b0d343;
}

.first_link:hover .first_link_hide,
.first_link_hover:hover + .first_link_hide {
    opacity: 1;
    visibility: visible;
}





.flow_step {
    position: relative;
}
.flow_step:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 20px 30px 0px 30px;
    border-color: #8fc31f transparent transparent transparent;
}


.flow_step .white_frame01_ttl {
    line-height: 1.5;
    text-align: left;
    font-weight: 400;
    padding-left: 18px;
}

.services_inner .border_ttl01 {
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-shadow: 0 0 10px #fff;
    padding: 0 10px;
}
.services_inner {
    background:
    url(./img/services_bg.jpg) center no-repeat,
    url(../common/img/lower_bg02.jpg);
    padding-block: 50px;
    letter-spacing: 1.5px;
}

.lower_flex02_three .lower_flex02_item .org_txt {
    font-size: clamp(20px, 20 / 824* 100vw, 26px);
    display: grid;
    align-items: center;
    justify-items: center;
    line-height: 1.1;
    /* min-height: 55px; */
}


.white_bg_flex .lower_flex02_item .txt{
    font-weight: 600;
    letter-spacing: 0;
    margin-top: 10px;
}
.white_bg_flex .lower_flex02_item .grn_txt{
    font-size: 20px;
    text-align: center;
}
/* 
.PreventiveCare_inner .white_frame01_ttl::before {
    content: "";
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #43b7e6;
}

#SelfCare .white_frame01_ttl::before {
    background-color: #29969b;

} */

.PreventiveCare_inner .white_frame01_ttl {
    background-color: #43b7e6;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    font-weight: 400;
}
.PreventiveCare_inner {
    display: flex;
    gap: 35px;
    position: relative;
    z-index: 1;
}


.PreventiveCare_inner::after {
    content: "";
    position: absolute;
    top: 90px;
    right: 0;
    left: 0;
    margin: 0 auto;
    background: url(./img/PreventiveCare_deco.png) no-repeat;
    width: 126px;
    height: 102px;
    z-index: 1;
}

.PreventiveCare .white_frame01 {
    background-color: rgb(255 255 255 / 80%);
    border-radius: 15px;
    font-family: "Zen Maru Gothic";
    position: relative;
    text-align: center;
    max-width: 480px;
    overflow: hidden;
    width: 100%;
}

.PreventiveCare_list_wrap {
    max-width: 216px;
    margin: 0 auto;
}

.PreventiveCare_list {
    display: inline-flex;
    /* gap: 5px 15px; */
    flex-wrap: wrap;
    margin-block: 5px;
    justify-content: center;
}

.PreventiveCare_list li{
    /* width: 50%; */
    letter-spacing: 0;
    min-width: 108px;
    text-align: left;
}

.PreventiveCare_list li::before{
    content: "・";
    color: #2683c0;
}

#ProCare {
    border-color: #43b7e6;
    position: relative;
}


#SelfCare .white_frame01_ttl {
    background-color: #29969b;
}

#SelfCare {
    border-color: #29969b;
}


.PreventiveCare_list_wrap p.txt {
    color: #2683c0;
    font-family: "Zen Maru Gothic";
    letter-spacing: 0;
}

#SelfCare p.txt {
    color: #1e7b83;
}


#SelfCare .PreventiveCare_list li::before {
    color: #2683c0;
}


.preventive_pic02 {
    position: relative;
    z-index: 0;
    margin: -25px auto 15px;
    text-align: center;
    width: fit-content;
}


.white_flex_wrap .lower_check {
    padding-inline: 0;
}

.PMTC_flow .txt {
    letter-spacing: 0;
}
.PMTC_flow .grn_txt {
    margin-block: 10px 5px;
}
.PMTC_flow .lower_flex02_item {
    max-width: 200px;
    position: relative;
    min-width: auto;
    overflow: visible;
}

.PMTC_flow .lower_flex02_item:not(:last-of-type):before {
    content: "";
    position: absolute;
    right: -40px;
    top: 25px;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 0px 30px 20px;
    border-color: transparent transparent transparent #8fc31f;
    z-index: 1;
}


.PediatricImportance .lower_flex02_item {
    counter-increment: item-counter; /* カウンターをインクリメント */
    overflow: visible;
    position: relative; /* ::before の配置基準とするため */
}

.PediatricImportance .lower_flex02_item::before {
    content: counter(item-counter); /* カウンターの値を表示 */
    background-color: #8fc31f;
    border-radius: 50%;
    color: #fff;
    font-family: "Zen Maru Gothic";
    font-size: 26px; /* 必要に応じて調整 */
    font-weight: 500; /* 必要に応じて調整 */
    text-align: center;
    margin: 0 auto;
    position: absolute;
    top: -20px; /* 必要に応じて調整 */
    left: 0;
    right: 0;
    line-height: 38px;
    height: 38px;
    width: 38px;

}

.PediatricImportance {
    counter-reset: item-counter; /* カウンターをリセット */
    gap: 30px 10px;
}

.PediatricEnvironment .lower_flex02_item {
    background: none;
    gap: 10px;
    padding-bottom: 0;
}

.PediatricEnvironment .lower_flex02_item .txt {
    padding: 0 3px;
    max-width: 324px;
    margin: -5px auto 0;
}

.SymptomsTreatedBySurgery .lower_flex02_item {
    padding: 0;
    margin-bottom: 0;
}

.SymptomsTreatedBySurgery .grn_txt {
    min-height: 48px;
    display: grid;
    align-items: center;
    margin-block: 4px;
}


.HomeVisitServices {
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 13px;
    margin-bottom: 30px;
}

.WisdomTooth .white_frame01_inner {
    border: none;
    padding-inline: 19px;
}
.WisdomTooth .lower_flex02_item {
    max-width: 281px;
}
.WisdomTooth .txt {
    padding-top: 10px;
}
.WisdomTooth {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 50px;
}

#Extractions {
    background-color: #cce198;
    border: none;
    border-radius: 20px;
    font-weight: 400;
    width: 100%;
    max-width: 640px;
}
#Extractions .white_frame01_ttl {
    background-color: #798e4c;
    line-height: 1;
    padding: 3px;
    min-height: 58px;
    display: grid;
    align-items: center;
    font-weight: 400;
}

#NoExtractions {
    background-color: #facd89;
    border: none;
    border-radius: 20px;
    font-weight: 400;
    max-width: 320px;
}

#NoExtractions img {
    margin-inline: auto;
}

#NoExtractions .white_frame01_ttl {
    background-color: #a5702f;
    line-height: 1;
    padding: 3px;
    font-weight: 400;
}



/*================================

　ここからPCのみ適用

================================*/
@media(min-width: 1920px) {


    
}
@media(min-width: 1600px) {


}

/*================================

　ここからPCのみ適用

================================*/
@media(min-width: 1367px) {


}

/*================================

　ここからPCのみ適用

================================*/
@media(min-width: 897px) {


}


/*================================

　ここから1920px以下

================================*/
@media(max-width: 1920px) {

}



/*================================

　ここから1440px以下

================================*/
@media screen and (max-width: 1440px) {


}

@media(max-width: 1366px) {

}


/*================================

　ここから1200px以下

================================*/
@media screen and (max-width: 1200px) {

}



/*================================

　ここからノートPC適用

================================*/
@media screen and (max-width: 1023px) {

    .white_bg_flex .lower_flex02_item .txt {
        font-size: 16px;
    }

    .services_inner {
        background:
        url(./img/services_deco01.png) no-repeat left top,
        url(../common/img/icon_bg01.png) no-repeat right bottom / 170px,
        url(../common/img/lower_bg02.jpg) repeat center;
        background-size: 20%,20%,100%;
    }

    #NoExtractions {
        max-width: 47%;
    }

    .PMTC_flow {
        max-width: 72%;
        gap: 40px 50px;
    }
}
/*================================

　ここからTABLET・SP適用

================================*/
@media(max-width: 896px) {
    .PreventiveCare_list li {
        min-width: 96px;
    }
}

/*================================

　ここからSP横適用

================================*/
@media(max-width: 700px) {

    .lower_flex02_three .org_pointer {
        width: fit-content;
        margin: 0 auto;

    }

    .PreventiveCare_inner {
        gap: 10px;
    }

    .PreventiveCare_inner {
        gap: 10px;
    }

    .PMTC_flow .lower_flex02_item:first-of-type {
        margin-bottom: 20px;
    }
    .PMTC_flow .lower_flex02_item:not(:last-of-type):before {
        border-width: 20px 30px 0px 30px;
        border-color: #8fc31f transparent transparent transparent;
        top: 105%;
        right: 0;
        left: 0;
        margin: 0 auto;
    }

    .PreventiveCare_inner::after {
        /* background-size: 63px; */
        background-size: 110px;
        top: 90%;
        background-position: center;
    }

    .PreventiveCare .white_frame01_inner {
        padding-inline: 10px;

    }

    .WisdomTooth {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
}

/*================================

　ここからSP適用

================================*/
@media(max-width: 480px) {

    #NoExtractions {
        max-width: 100%;
    }

    .lower_flex01_txt .border_ttl01 br {
        display: none;
    }

    #Periodontal .border_ttl01 br {
        display: block;
    }

    .services_inner {
        padding-block: 20px 25px;
        background: 
        url(../common/img/lower_bg02.jpg) repeat center;
    }
    
    .services_inner .border_ttl01 span{
        font-size: 19px;
    }

    .PMTC_flow {
        max-width: 100%;
    }

    .PreventiveCare_inner::after {
        background-size: 70px;
        top: 45%;
        /* right: -97px; */
    }

    .white_flex_wrap .org_txt {
        font-size: 18px;
        letter-spacing: 0;
    }

    #HomeVisit  .lower_check.lower_check_big li{
        font-size: 18px;
        background-position: left top 5px;
    }

    .square_num_wrap {
        font-size: 24px;
        text-align: center;
    }

    #General .lower_flex01_txt .border_ttl01.letter-spacing2 span{
        font-size: 22px;
        letter-spacing: 1px;
    }

    .preventive_pic02 {
        margin-top: -5px;
    }

}
@media screen and (max-width: 374px) {
    .PreventiveCare_inner::after {
        top: 50%;
        background-size: 50px;
    }

    .square_num_wrap {
        font-size: 22px;
    }

}