@charset "UTF-8";
/********************************************************************************

page-clinic-menu.css　診療案内 親子共通css

********************************************************************************/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 【診療案内ページ】
*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*============================================================
 メインビジュアル
*============================================================*/
#page-clinic-menu #mainvisual {
    margin-bottom: 96px;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 【下層ページ共通】
*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.page-clinic-menu #main-contents {
    --section-space: 96px;
    --element-space: 48px;
}
.page-clinic-menu #main-contents {
    --section-space: 96px;
    --element-space: 48px;
}
.page-clinic-menu .section .sec-title {
    margin-bottom: 0;
}

/* 仮措置
---------------------------------------- */
.page-clinic-menu .section:not(#sec-blog) .image img {
    background-color: #D9D9D9;
}

/*============================================================
 メインビジュアル
*============================================================*/
.page-clinic-menu #mainvisual .page-title {
    padding-left: 76px;
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 64px auto;
}

/*============================================================
 セクション共通
*============================================================*/
.page-clinic-menu .section .block > *:not(:last-child) {
    margin-bottom: 24px;
}

/* 画像
---------------------------------------- */
.page-clinic-menu .section img {
    border-radius: 16px;
}

/* 画像リスト
---------------------------------------- */
.page-clinic-menu .section .image-list {
    display: flex;
    justify-content: center;
    gap: 24px;
}
.page-clinic-menu .section .image-list .item {
    max-width: 360px;
    width: 100%;
}
.page-clinic-menu .section .image-list:has(:nth-child(3)) .item {
    max-width: 304px;
}
.page-clinic-menu .section .image-list .item img {
    width: 100%;
}
.page-clinic-menu .section .image-list .item .caption {
    text-align: center;
}

/* ブロック内 概要リスト
---------------------------------------- */
.page-clinic-menu .section .summary-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.page-clinic-menu .section .summary-list .summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-clinic-menu .section .summary-list .summary .title {
    font-weight: bold;
}

/* 表
---------------------------------------- */
.page-clinic-menu .section table {
    width: 100%;
    table-layout: fixed;
}
.page-clinic-menu .section table :is(th, td) {
    border: solid 1px var(--common-color-gray);
    padding: 12px;
}
.page-clinic-menu .section table thead th {
    background-color: var(--common-color-background1);
}

/* セクション 関連ブログ
---------------------------------------- */
.page-clinic-menu #sec-related-blog .logo {
    text-align: center;
    margin-bottom: 4px;
}
.page-clinic-menu #sec-related-blog h2 {
    text-align: center;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 【下層ページ個別】 虫歯治療
*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#page-cavity {
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 【下層ページ個別】 予防歯科
*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#page-prevention {
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 【下層ページ個別】 虫歯の再発防止（ドックベストセメント）
*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#page-cavity {
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 【下層ページ個別】 クリーニング（PMTC） 
*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#page-pmtc #sec-flow .flow-list {
    display: flex;
    flex-direction: column;
    gap: 72px 48px;
}
#page-pmtc #sec-flow .flow-list .flow {
    align-items: center;
}
#page-pmtc #sec-flow .flow-list .flow .image {
    width: 20%;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 【下層ページ個別】 小児歯科
*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#page-pediatric #sec-feature .feature-list {
    display: flex;
    justify-content: center;
    gap: 48px;
}
#page-pediatric #sec-feature .feature-list .feature {
    flex: 1;
}
#page-pediatric #sec-feature .feature-list .feature .image img {
    width: 100%;
}
#page-pediatric #sec-feature .feature-list .feature .info .title {
    font-weight: bold;
    text-align: center;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 【下層ページ個別】 床矯正
*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#page-orthodontic #sec-flow .flow-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#page-orthodontic #sec-flow .flow-list .flow {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 【下層ページ個別】 歯周病・口臭
*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#page-periodontitis {
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 【下層ページ個別】 ホワイトニング ・審美
*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#page-whitening-aesthetic {
}


/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1007px) {
    /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
     【診療案内ページ】
    *++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-clinic-menu #mainvisual  {
    }



    /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
     【下層ページ共通】
    *++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    .page-clinic-menu #main-contents {
        --section-space: 72px;
        --element-space: 32px;
    }

    /*============================================================
     メインビジュアル
    *============================================================*/
    .page-clinic-menu #mainvisual .page-title {
        padding-left: 64px;
        background-size: 48px auto;
    }

    /*============================================================
     セクション共通
    *============================================================*/

}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
    /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
     【診療案内ページ】
    *++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-clinic-menu #mainvisual  {
    }


    
    /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
     【下層ページ共通】
    *++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    /*============================================================
     セクション共通
    *============================================================*/
    /* 画像リスト
    ---------------------------------------- */
    .page-clinic-menu .section .image-list {
        flex-direction: column;
        align-items: center;
    }
    .page-clinic-menu .section .image-list:has(:nth-child(3)) .item {
        max-width: 360px;
    }

    /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
     【下層ページ個別】 クリーニング（PMTC） 
    *++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    #page-pmtc #sec-flow .flow-list .flow {
        gap: 24px;
    }
    #page-pmtc #sec-flow .flow-list .flow .image {
        width: min(100%, 360px);
    }
    #page-pmtc #sec-flow .flow-list .flow .info .block-title {
        text-align: center;        
    }

    /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
     【下層ページ個別】 小児歯科
    *++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
    #page-pediatric #sec-feature .feature-list {
        max-width: 432px;
        flex-wrap: wrap;
        margin: 0 auto;
        gap: 24px;
    }
    #page-pediatric #sec-feature .feature-list .feature {
        flex: unset;
        width: calc((100% - 24px) / 2);
    }
}