@charset "utf-8";
/*================================
ここから全サイズ適用
================================*/
/* baseに移したい
--------------------------------*/
/*アンカーリンク*/
.anchor-link {
    display: block;
    padding-top: 50px;
    margin-top: -50px;
}

/* lowerに移したい
--------------------------------*/
/*角丸ボックス（オレンジ色線・白背景）*/
.roundedbox.-orange_thick_border {
    border-radius: 6px;
    border: solid 4px #e9b501;
    background-color: #fff;
}

/* 共通
--------------------------------*/
/*テキスト*/
.prevention .txt {
    font-size: 18px;
}
.prevention .text_dl01 {
    line-height: 1.5;
}
.prevention .text_dl01 dt {
    font-size: 18px;
    font-weight: 600;
}
.prevention .text_dl01 dd {
    font-size: 18px;
}
.prevention .text_small {
    font-size: 16px;
}
.prevention .text_large {
    font-size: 22px;
}

/*小丸リスト（灰色）*/
.prevention .check_lists_circle.-tiny li:not(:last-child) {
    margin-bottom: 16px;
}

/*米印リスト*/
.prevention .asterisk_lists > li:not(:last-child) {
    margin-bottom: 16px;
}

/*チェックリスト（オレンジ）*/
.prevention .check_lists_org > li {
    position: static;
}
.prevention .check_lists_org > li::before {
    width: auto;
    height: auto;
    position: static;
    padding-right: 8px;
}
.prevention .check_lists_org > li:not(:last-child) {
    margin-bottom: 8px;
}

/*タイトル（茶色模様背景・白文字）*/
.prevention .section_ttl02_wrap {
    /*flex*/
    display: grid;
    align-items: center;
    /*other*/
    min-height: 90px;
    margin-bottom: 20px;
}

/* section02
--------------------------------*/
/* こんな方にオススメです */
.prevention #section02 .Recommended_wrap {
    padding-right: 2%;
    padding-left: 2%;
}
.prevention #section02 .Recommended_bg {
    max-width: 1140px;
    margin-top: 0;
    background-image: url(./img/prevention_recommended01.png), url(./img/prevention_recommended02.png);
    background-position: left 55px top, right top;
    background-size: auto 350px, auto 350px;
}
.prevention #section02 .Recommended_txt {
    max-width: 290px;
}

/* section03
--------------------------------*/
/*flexbox（当院の予防プログラム）*/
.prevention #section03 .careprogram.flexbox {
    flex-wrap: nowrap;
    gap: 40px 13%;
    overflow: hidden;
}
.prevention #section03 .careprogram.flexbox > .flexbox_item {
    padding: 32px 20px 0;
    text-align: center;
}

/*タイトル*/
.prevention #section03 .careprogram.flexbox > .flexbox_item .careprogram_ttl {
    z-index: 3;
    position: relative;
    line-height: 1.5;
}
.prevention #section03 .careprogram.flexbox > .flexbox_item .careprogram_ttl .sub_text {
    font-size: 18px;
}
.prevention #section03 .careprogram.flexbox > .flexbox_item .careprogram_ttl .main_text {
    font-size: 28px;
    font-weight: 600;
}
.prevention #section03 .careprogram.flexbox > .flexbox_item .careprogram_ttl .main_text.-darkblue {
    color: #3d7c99;
}
.prevention #section03 .careprogram.flexbox > .flexbox_item .careprogram_ttl .main_text.-darkgreen {
    color: #418040;
}

/*画像*/
.prevention #section03 .careprogram.flexbox > .flexbox_item .circle_img {
    position: relative;
    display: inline-block;
}
.prevention #section03 .careprogram.flexbox > .flexbox_item .circle_img img {
    z-index: 2;
    position: relative;
}
.prevention #section03 .careprogram.flexbox > .flexbox_item .circle_img::after {
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -110px;
    width: 520px;
    height: 520px;
    margin: auto 0;
    border-radius: 50%;
}
.prevention #section03 .careprogram.flexbox > .flexbox_item .circle_img.-blue::after {
    background-color: rgb(211 223 228 / 50%);
}
.prevention #section03 .careprogram.flexbox > .flexbox_item .circle_img.-green::after {
    background-color: rgb(211 228 211 / 50%);
}

/*ボックス（灰色線）*/
.prevention #section03 .careprogram.flexbox > .flexbox_item .grey_border {
    z-index: 4;
    position: relative;
    width: 290px;
    margin-inline: auto;
    padding-right: 10px;
    padding-left: 10px;
}

/*チェックリスト（オレンジ）*/
.prevention #section03 .check_lists_org > li:not(:last-child) {
    margin-bottom: 8px;
}

/* section04
--------------------------------*/
.prevention #section04 .sec_himawari_bg .lower_inner {
    padding-top: 60px;
}

/*flexbox（3つのケア）*/
.prevention #section04 .three_care.flexbox > .flexbox_item {
    flex-basis: calc(100% / 3 - 10px);
}
.prevention #section04 .three_care.flexbox > .flexbox_item .grey_border {
    /*flex*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    /*other*/
    position: relative;
    margin-top: 52px;
    padding-top: 60px;
    padding-left: 3%;
    padding-right: 3%;
    padding: 52px 3% 16px;
}
.prevention #section04 .three_care.flexbox > .flexbox_item .grey_border .services_circle {
    position: absolute;
    top: -52px;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
}
.prevention #section04 .three_care.flexbox > .flexbox_item .grey_border .link_btn {
    max-width: 280px;
}

/*flexbox（定期検診）*/
.prevention #section04 .medical_examination.flexbox {
    gap: 8px 80px;
}
.prevention #section04 .medical_examination.flexbox > .flexbox_item {
}

/*flexbox（リンクボタン）*/
.prevention #section04 .linkbtn_box.flexbox > .flexbox_item {
}

/*リンクボタン（茶色背景・白文字）*/
.prevention #section04 .link_btn {
    padding-right: 60px;
}

/*flexbox（PMTCを行うメリット）*/
.prevention #section04 .pmtc_merit.flexbox > .flexbox_item {
    flex-basis: calc(100% / 4 - 20px);
}
.prevention #section04 .pmtc_merit.flexbox > .flexbox_item.grey_border {
    padding-left: 3%;
    padding-right: 3%;
}

/*flexbox（ホームケア）*/
.prevention #section04 .homecare.flexbox > .flexbox_item {
    flex-basis: calc(100% / 2 - 10px);
}
.prevention #section04 .homecare.flexbox > .flexbox_item.grey_border {
    /*flex*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*other*/
    padding-left: 3%;
    padding-right: 3%;
}

/*
@media (min-width: 1920px) {
}
@media (min-width: 1366px) {
}
@media (max-width: 1920px) {
}
@media (max-width: 1600px) {
}
*/

/*================================
TABLET横 1080px～0px
================================*/
@media (max-width: 1080px) {
    /* section02
    --------------------------------*/
    /* こんな方にオススメです */
    .prevention #section02 .Recommended_bg {
        padding-bottom: 10px;
        background-position: left 40px top, right top;
        background-size: auto 310px, auto 310px;
    }
    .prevention #section02 .Recommended_flex {
        max-width: 520px;
    }
    .prevention #section02 .Recommended_txt {
        max-width: 250px;
    }

    /* section03
    --------------------------------*/
    /*flexbox（当院の予防プログラム）*/
    .prevention #section03 .careprogram.flexbox {
        column-gap: 11%;
    }
}
/*================================
TABLET縦 834px～0px
================================*/
@media (max-width: 834px) {
    /* 共通
    --------------------------------*/

    /* section02
    --------------------------------*/
    /* こんな方にオススメです */
    .prevention #section02 .Recommended_bg {
        padding-bottom: 45%;
        background-position: left 23% bottom, right 20% bottom;
    }
    .prevention #section02 .Recommended_flex {
        max-width: 100%;
    }
    .prevention #section02 .Recommended_txt {
        max-width: 290px;
    }

    /* section03
    --------------------------------*/
    /*flexbox（当院の予防プログラム）*/
    .prevention #section03 .careprogram.flexbox {
        column-gap: 3%;
    }
    .prevention #section03 .careprogram.flexbox > .flexbox_item {
        padding-top: 24px;
    }

    /*画像*/
    .prevention #section03 .careprogram.flexbox > .flexbox_item .circle_img {
        width: 200px;
        height: 200px;
    }
    .prevention #section03 .careprogram.flexbox > .flexbox_item .circle_img::after {
        left: -90px;
        width: 380px;
        height: 380px;
    }

    /* section04
    --------------------------------*/
    /*flexbox（3つのケア）*/
    .prevention #section04 .three_care.flexbox {
        flex-direction: column;
    }
    .prevention #section04 .three_care.flexbox > .flexbox_item {
        flex-basis: 100%;
    }

    /*flexbox（PMTCを行うメリット）*/
    .prevention #section04 .pmtc_merit.flexbox > .flexbox_item {
        flex-basis: calc(100% / 2 - 10px);
    }

    /*flexbox（ホームケア）*/
    .prevention #section04 .homecare.flexbox {
        flex-direction: column;
    }
    .prevention #section04 .homecare.flexbox > .flexbox_item {
        flex-basis: 100%;
    }
}
/*================================
SP表示 700px～0px
================================*/
@media (max-width: 700px) {
    /* 共通
    --------------------------------*/
    /*タイトル（茶色模様背景・白文字）*/
    .prevention .section_ttl02 {
        font-size: 22px;
    }

    /* section02
    --------------------------------*/
    .prevention #section02 .Recommended_bg {
        padding-bottom: 53%;
        background-position: left 22% bottom, right 18% bottom;
    }

    /* section03
    --------------------------------*/
    /*flexbox（当院の予防プログラム）*/
    .prevention #section03 .careprogram.flexbox {
        flex-direction: column;
    }
}

/*================================
SP表示 480px～0px
================================*/
@media (max-width: 480px) {
    /* baseに移したい
    --------------------------------*/
    /*米印リスト*/
    .asterisk_lists > li {
        font-size: 16px;
    }

    /* lowerに移したい
    --------------------------------*/
    /*flexbox（右矢印を下矢印に）　★lower補足コメントを直したい*/
    .right_arrow_flexbox {
        flex-direction: column;
    }
    .right_arrow_flexbox > .right_arrow_flexbox_item {
    }
    .right_arrow_flexbox > .right_arrow_flexbox_item:not(:first-child)::before {
        top: 0;
        right: 0;
        left: 0;
        transform: translateY(-22px);
        margin: 0 auto;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        border-top: 16px solid #e9b500;
        border-bottom: 0;
    }

    /*flexbox（右矢印・ラップしないver）　★lowerに移したい*/
    .right_arrow_flexbox.-nowrap {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .right_arrow_flexbox.-nowrap > .right_arrow_flexbox_item:not(:first-child)::before {
        top: 50%;
        right: auto;
        left: -22px;
        transform: translateY(-8px);
        border-style: solid;
        border-top: 12px solid transparent;
        border-right: 0;
        border-bottom: 12px solid transparent;
        border-left: 16px solid #e9b500;
    }

    /* 共通
    --------------------------------*/
    /*テキスト*/
    .prevention .txt {
        font-size: 16px;
    }
    .prevention .text_dl01 dt {
        font-size: 16px;
    }
    .prevention .text_dl01 dd {
        font-size: 16px;
    }

    /* section02
    --------------------------------*/
    .prevention #section02 .Recommended_bg {
        padding-bottom: 55%;
        background-size: auto 40%, auto 40%;
    }
    .prevention #section02 .Recommended_txt {
        max-width: 100%;
    }

    /* section03
    --------------------------------*/
    /*flexbox（当院の予防プログラム）*/
    .prevention #section03 .careprogram.flexbox > .flexbox_item {
        padding-top: 12px;
    }

    /*画像*/
    .prevention #section03 .careprogram.flexbox > .flexbox_item .circle_img::after {
        left: -80px;
        width: 360px;
        height: 360px;
    }

    /* section04
    --------------------------------*/
    /*flexbox（定期検診）*/
    .prevention #section04 .medical_examination.flexbox {
        flex-direction: column;
    }
    .prevention #section04 .medical_examination.flexbox > .flexbox_item .check_lists_org {
        width: 100%;
    }

    /*flexbox（リンクボタン）*/
    .prevention #section04 .linkbtn_box.flexbox {
        flex-direction: column;
    }

    /*リンクボタン（茶色背景・白文字）*/
    .prevention #section04 .linkbtn_box.flexbox .link_btn {
        max-width: 100% !important;
    }

    /*flexbox（PMTCを行うメリット）*/
    .prevention #section04 .pmtc_merit.flexbox {
        flex-direction: column;
    }
    .prevention #section04 .pmtc_merit.flexbox > .flexbox_item {
        flex-basis: 100%;
    }
}