#sub_contents {
    background-color: #eeece8;
}

section.flow {
    padding-bottom: 7.7%;
}

#sub_contents {
    padding-top: 13.8vw;
}

.ttl.flow {
    width: 27%;
    max-width: 192px;
    margin: 12.3vw auto 7.5vw;
}

.ttl_category {
    margin: 0 0 18vw;
    font-size: min(5vw, 37px);
    font-weight: 600;
    text-align: center;
    position: relative;
    letter-spacing: 8px;
}

.ttl_category:before {
    content: "";
    width: 10%;
    max-width: 64px;
    height: 5px;
    background-color: #000000;
    position: absolute;
    bottom: -48%;
    left: 50%;
    transform: translateX(-50%);
}


.inner_flow {
    background-image: url(../img/flow/bg_flow.svg);
    background-size: 96% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 13.9%;
    padding-bottom: 12.5%;
}



.box {
    max-width: 544px;
    width: 84%;
    border: 7px solid #780038;
    color: #000000;
    text-align: left;
    font-weight: 600;
    font-size: min(6vw, 32px);
    line-height: 1.4;
    margin: 0 auto;
    padding: 0 2.7% 4.3%;
    box-sizing: border-box;
    margin-top: 6%;
    position: relative;
}

.box::before {
    content: '';
    position: absolute;
    bottom: -8.2%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4vw 4vw 0 4vw;
    border-color: #ffffff transparent transparent transparent;
    z-index: 1;
}

.box::after {
    content: '';
    position: absolute;
    bottom: -11.6%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4vw 4vw 0 4vw;
    border-color: #780038 transparent transparent transparent;
}

.box.box1 {
    margin-top: 0;
}

.box .num_mds {
    display: flex;
    align-items: center;
}

.box .num_mds .num {
    font-size: min(7.8vw, 56px);
    width: 20%;
    border-right: 2px solid #780038;
    text-align: left;
    padding: 2.5vw 0 0px 3%;
}


.box .num_mds .mds {
    font-size: min(5.3vw, 38px);
    width: 75%;
    text-align: center;
    color: #780038;
}


.box .txt {
    font-size: min(3.9vw, 28px);
    font-weight: normal;
    line-height: 1.6;
    margin: 4% 0 0 0;
}

.box .lead_txt {
    font-size: min(4.2vw, 30px);
    font-weight: 600;
    text-align: center;
    color: #780038;
    line-height: 1.4;
    margin-top: 6.2vw;
}

.img1 {
    max-width: 467px;
    margin: 5.2% auto 2.2%;
}

.img1 img {
    width: 100%;
}

.box.box2::before {
    bottom: -3.2%;
}

.box.box2::after {
    bottom: -5.2%;
}

.box.box3::before {
    bottom: -7.2%;
}

.box.box3::after {
    bottom: -10.6%;
}

.img2 {
    max-width: 470px;
    margin: 4.2% auto 2.2%;
}

.img2 img {
    width: 100%;
}

.box .catch1 {
    font-size: min(4.2vw, 30px);
    color: #780038;
    text-align: center;
    margin: 7.4% 0 0 0;
}

.box .catch2 {
    position: relative;
    display: flex;
    margin: 13.5% 0 0 0;
}

.box .catch2::before {
    content: '';
    position: absolute;
    width: 92%;
    height: 2px;
    background-color: #780038;
    top: 50%;
    left: 4%;
}

.box .catch2 span {
    background-color: #fff;
    position: relative;
    margin: 0 auto;
    color: #780038;
    padding: 0 4%;
}

.flex_box {
    display: flex;
    max-width: 456px;
    margin: 5% auto 4%;
    justify-content: space-between;
    gap: 6%;
}

.flex_box .ttl {
    font-size: min(3.6vw, 26px);
    font-weight: 400;
    line-height: 1.2;
    margin: 5% 0 0 0;
    text-align: center;
}

.flex_box .part {
    position: relative;
}

.flex_box .part::after {
    content: '';
    position: absolute;
    top: 36%;
    right: -16.2%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2.8vw 0 2.8vw 2vw;
    border-color: transparent transparent transparent #780038;
    z-index: 1;
}

.flex_box .part.part3::after {
    content: none;
}

.flex_box .img3,
.flex_box .img4,
.flex_box .img5 {
    max-width: 133px;
}


.flex_box .img3 img,
.flex_box .img4 img,
.flex_box .img5 img {
    width: 100%;
}


.box.box4::before {
    bottom: -1.8%;
}

.box.box4::after {
    bottom: -2.6%;
}

.box.box5::before {
    content: none;
}

.box.box5::after {
    content: none;
    ;
}

.box.box5{
    margin-top: 8%;
}


@media (min-width: 721px) and (max-width: 990px) {

    #sub_contents {
        padding-top: 99px;
    }

    .ttl.flow {
        margin: 89px auto 54px;
    }

    .ttl_category {
        margin: 0 0 130px;
        font-size: 36px;
    }

    .inner_flow {
        max-width: 720px;
        margin: 0 auto;
    }

    .box::before {
        border-width: 29px 29px 0 29px;
    }

    .box::after {
        border-width: 29px 29px 0 29px;
    }




}

/*PC時　スマホ固定化*/

@media (min-width: 991px) {

    section.service {
        padding-bottom: 61px;
    }

    #sub_contents {
        padding-top: 1px;
    }

    .ttl.flow {
        margin: 66px auto 40px;
    }

    .ttl_category {
        margin: 0 0 96px;
        font-size: 27px;
    }

    .box {
        font-size: 32px;
    }

    .box::before {
        border-width: 21px 21px 0 21px;
    }

    .box::after {
        border-width: 21px 21px 0 21px;
    }

    .box .num_mds .num {
        font-size: 42px;
        padding: 13px 0 0px 2%;
    }

    .box .num_mds .mds {
        font-size: 28px;
    }

    .box .txt {
        font-size: 21px;
    }

    .box .lead_txt {
        font-size: 22px;
        margin-top: 33px;
    }

    .box .catch1 {
        font-size: 22px;
    }

    .flex_box .ttl {
        font-size: 19px;
    }

    .flex_box .part::after {
        border-width: 15px 0 15px 11px;
    }





    /* --------------- works --------------- */
    section.works {
        padding: 47px 0 69px;
        margin: 102px 0 0 0;
    }

    .slider {
        margin: 0 0 48px;
    }

    .slides {
        margin: 0 0 21px;
    }

    .ttl_category2.works {
        margin: 0 0 77px;
        font-size: 27px;
    }

    .link_reasons a span.roboto {
        padding: 0 46px 0 0;
    }

    section.contact {
        padding: 68px 0 117px;
    }

}