@charset "utf-8";

.copy_block {
    margin-bottom: 40px;
    background-image: url(../../images/infection_measures/cleaning/copy_bg.webp);
}

h1 span {
    padding: 10px 5px 0;
}

/* ------------------------------
top_block
------------------------------ */
.base_cleaning_block {
    display: flex;
    justify-content: space-between;
}

.base_cleaning_block div {
    width: 50%;
}

.base_cleaning_block .text_block {
    margin-right: 40px;
}

.h3_design01 {
    margin-bottom: 48px;
    font-size: 30px;
}

.top_block p {
    line-height: 175%;
}

@media screen and (max-width: 767px) {
    .copy_block {
        margin-bottom: 30px;
        background-image: url(../../images/infection_measures/cleaning/copy_bg_sp.webp);
    }

    .h2_arrow_common {
        margin-top: 38px;
    }

    .base_cleaning_block {
        display: block;
    }

    .base_cleaning_block div {
        width: 100%;
    }

    .base_cleaning_block .text_block {
        margin-bottom: 20px;
    }

    .h3_design01 {
        margin-bottom: 30px;
        font-size: 23px;
    }

    .top_block p {
        line-height: 150%;
    }
}

/* ------------------------------
flow_block
------------------------------ */
.list_circle02 {
    position: relative;
}

.list_circle_double {
    font-size: 20px;
}

.flow_block {
    margin-top: 43px;
    margin-bottom: 80px;
}

.flow_block .list_circle_double {
    padding-right: 20px;
}

.flow_list > li {
    position: relative;
}

.flow04,
.flow05 {
    margin-bottom: 38px;
}

.flow04::after,
.flow05::after {
    content: "";
    position: absolute;
    top: 50px;
    left: 25px;
    width: 75px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.flow04::after {
    background-image: url(../../images/infection_measures/cleaning/flow_arrow04.svg);
}

.flow05::after {
    background-image: url(../../images/infection_measures/cleaning/flow_arrow05.svg);
}

.flow_title_block {
    display: flex;
    justify-content: space-between;
}

.flow_title {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 134px;
    max-height: 50px;
    padding: 15px 21px;
    text-align: center;
    color: #fff;
    background-color: #19a3c3;
    font-size: 24px;
    font-weight: 500;
}

.flow_text {
    width: 86%;
    margin-left: 6px;
    padding: 6px 28px;
    background: #d9f0f5;
    font-size: 26px;
    font-weight: 500;
}

.flow_detail {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 38px 0 0 160px;
}

.flow_detail img {
    width: 50%;
    max-width: 370px;
}

@media screen and (max-width: 767px) {
    .flow_block {
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .flow_block .list_circle_double {
        padding-right: 0;
    }

    .flow_title {
        z-index: 1;
        align-items: flex-start;
        width: 75px;
        max-height: 100%;
        padding: 8px;
        font-size: 14px;
    }

    .flow_text {
        margin-left: 3px;
        padding: 4px 0 6px 7px;
        font-size: 18px;
    }

    .flow04,
    .flow05 {
        margin-bottom: 20px;
    }

    .flow_detail {
        margin: 17px 0 0 81px;
    }

    .flow04::after,
    .flow05::after {
        top: 0;
        left: 10px;
        width: 40px;
        background-position: bottom;
    }

    .flow04::after {
        background-image: url(../../images/infection_measures/cleaning/flow_arrow04_sp.svg);
    }

    .flow05::after {
        background-image: url(../../images/infection_measures/cleaning/flow_arrow04_sp.svg);
    }

    .flow_sp01::after {
        top: 37px;
        height: calc(100% - (37px - 8px));
        background-image: url(../../images/infection_measures/cleaning/flow_arrow_sp01.svg);
    }

    .flow_sp02::after {
        top: 64px;
        height: calc(100% - (64px - 8px));
        background-image: url(../../images/infection_measures/cleaning/flow_arrow_sp02.svg);
    }

    .flow_sp03::after {
        top: 64px;
        height: calc(100% - (64px - 8px));
        background-image: url(../../images/infection_measures/cleaning/flow_arrow_sp03.svg);
    }

    .flow_sp04::after {
        top: 64px;
        height: calc(100% - (64px - 8px));
        background-image: url(../../images/infection_measures/cleaning/flow_arrow_sp04.svg);
    }

    .flow_sp05::after {
        top: 64px;
        height: calc(100% - (64px - 8px));
        background-image: url(../../images/infection_measures/cleaning/flow_arrow_sp05.svg);
    }

    .flow_sp06::after {
        top: 37px;
        height: calc(100% - (37px - 8px));
        background-image: url(../../images/infection_measures/cleaning/flow_arrow_sp06.svg);
    }
}

/* ------------------------------
point_block
------------------------------ */
.point_flow ul {
    display: flex;
    justify-content: space-between;
}

.point_flow_list {
    position: relative;
    z-index: 1;
    display: table;
    height: 95px;
    margin-bottom: 22px;
    padding: 10px;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: 65%;
    background-size: cover;
    font-size: 25px;
    font-weight: 600;
}

.point_flow_list span {
    display: table-cell;
    vertical-align: middle;
}

.point_flow_list .point_small {
    padding: 0 1.0rem;
    font-size: 16px;
    font-weight: 500;
}

.flow_blue {
    width: 51%;
    max-width: 442px;
    background-image: url("../../images/infection_measures/point_img01.webp");
    background-position-x: 40%;
}

.flow_light_blue {
    width: 18%;
    max-width: 155px;
    background-image: url("../../images/infection_measures/point_img02.webp");
}

.flow_green {
    width: 20%;
    max-width: 178px;
    background-image: url("../../images/infection_measures/point_img03.webp");
}

.point_flow_list:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: -58px;
    bottom: 0;
    width: 56px;
    height: 46px;
    margin: auto;
    background-image: url("../../images/infection_measures/point_arrow.webp");
    background-repeat: no-repeat;
    background-size: contain;
}

.point_text {
    text-align: right;
    font-size: 25px;
    font-weight: 500;
}

.point_contents {
    padding-bottom: 25px;
}

@media screen and (max-width: 767px) {
    .point_flow_list {
        height: 60px;
        padding: 15px;
        background-size: 240%;
        font-size: 20px;
    }

    .point_flow_list .point_small {
        display: block;
        font-size: 13px;
    }

    .point_flow ul {
        display: block;
        padding: 0 16px;
    }

    .point_flow_list:not(:last-child) {
        margin-bottom: 58px;
    }

    .point_flow_list:last-child {
        margin-bottom: 15px;
    }

    .flow_blue {
        width: 100%;
        max-width: 100%;
        height: 85px;
        padding: 0;
        background-position-x: 72%;
    }

    .flow_light_blue {
        width: 100%;
        max-width: 100%;
        background-position-x: 75%;
    }

    .flow_green {
        width: 100%;
        max-width: 100%;
        background-position-x: 78%;
    }

    .point_flow_list:not(:last-child)::after {
        top: auto;
        right: 0;
        bottom: -60px;
        left: 0;
        width: 50px;
        height: 58px;
        background-image: url("../../images/infection_measures/point_arrow_sp.webp");
    }

    .point_text {
        text-align: center;
        font-size: 18px;
    }

    .next_content_botton {
        margin-top: 52px;
    }
}