section#flow {
    background: url(../../img/png/bg_flow.png) no-repeat;
    background-position: bottom;
    background-size: 100%;
}

section#flow .titleBox h2 {
    position: relative;
}

section#flow .titleBox h2::before {
    content: "";
    background: url(../../img/png/h2_flow.png) no-repeat;
    background-position: center;
    background-size: 100%;
    width: 410px;
    height: 138px;
    position: absolute;
    bottom: -15px;
    right: 0;
    left: 0;
    margin: auto;
}

section#flow .titleBox h2 span {
    position: relative;
}

section#flow .container {
    width: 95%;
    max-width: 1280px;
}

.flowContent {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.flowContent {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.flowContent_block {
    border: solid 5px #222;
}

.flowContent_block .ttl {
    padding: 28px 0 36px;
    position: relative;
}

.flowContent_block .ttl h3 span {
    z-index: 2;
    position: relative;
    color: #fff;
}

.flowContent_block .ttl h3::before {
    content: "";
    width: 99px;
    height: 100px;
    background: url(../../img/png/num_01.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 1;
}

.flowContent_block:nth-child(2) .ttl h3::before {
    content: "";
    width: 117px;
    height: 100px;
    background: url(../../img/png/num_02.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0px;
    left: 0;
}

.flowContent_block:nth-child(3) .ttl h3::before {
    content: "";
    width: 117px;
    height: 100px;
    background: url(../../img/png/num_03.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0px;
    left: 0;
}

.flowContent_block:nth-child(4) .ttl h3::before {
    content: "";
    width: 119px;
    height: 100px;
    background: url(../../img/png/num_04.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0px;
    left: 0;
}

.flowContent_block:nth-child(5) .ttl h3::before {
    content: "";
    width: 120px;
    height: 100px;
    background: url(../../img/png/num_05.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0px;
    left: 0;
}

.flowContent_block .ttl::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #222;
    position: absolute;
    bottom: -15px;
    right: 0;
    left: 0;
    margin: auto;
}

.flowContent_block .textBox {
    padding: 30px 25px;
    padding-bottom: 30px;
    position: relative;
}

.flowContent_block .textBox .text_area {
    margin-top: 25px;
    max-width: 180px;
}

section#flow .chusyaku {
    margin-top: 20px;
}

section#flow .chusyaku ul li {
    margin-bottom: 5px;
}

@media (max-width: 1060px) {
    section#flow .container {
        width: 95%;
    }
    .flowContent {
        flex-wrap: wrap;
    }
}


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


/*        SP Responsive          */


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

@media (max-width: 768px) {
    section#flow .container {
        width: 100%;
    }
    section#flow {
        background: linear-gradient(white 80%, #38BFE9 80%);
    }
    section#flow .titleBox h2::before {
        width: 40%;
        height: 100px;
    }
    .flowContent {
        flex-wrap: wrap;
        justify-content: center;
    }
    .flowContent {
        gap: 10px;
    }
    .flowContent_block {
        width: 30%;
        /* border-radius: 10px; */
    }
    .flowContent_block .textBox {
        padding: 30px 10px;
        padding-bottom: 20px;
    }
    .flowContent_block .textBox .imgBox {
        width: 70%;
        margin: 0 auto;
    }
    .flowContent_block:nth-child(4) .textBox .imgBox {
        width: 75%;
        margin: 0 auto;
    }
    .flowContent_block .ttl h3::before {
        width: 40%;
        height: 100%;
    }
    .flowContent_block:nth-child(2) .ttl h3::before {
        width: 46%;
        height: 100%;
    }
    .flowContent_block:nth-child(3) .ttl h3::before {
        width: 46%;
        height: 100%;
    }
    .flowContent_block:nth-child(4) .ttl h3::before {
        width: 46%;
        height: 100%;
    }
    .flowContent_block:nth-child(5) .ttl h3::before {
        width: 46%;
        height: 100%;
    }
    .flowContent_block .textBox .text_area {
        margin-top: 25px;
        max-width: unset;
        width: 100%;
    }
    .flowContent_block .textBox .text_area p {
        font-size: 1.2rem;
    }
}

@media (max-width: 450px) {
    section#flow .titleBox h2::before {
        width: 70%;
        height: 100px;
    }
    .flowContent_block {
        width: 45%;
        /* border-radius: 10px; */
    }
    .flowContent_block .ttl h3::before {
        width: 56%;
        height: 100%;
    }
    .flowContent_block:nth-child(2) .ttl h3::before {
        width: 65%;
        height: 100%;
    }
    .flowContent_block:nth-child(3) .ttl h3::before {
        width: 65%;
        height: 100%;
    }
    .flowContent_block:nth-child(4) .ttl h3::before {
        width: 65%;
        height: 100%;
    }
    .flowContent_block:nth-child(5) .ttl h3::before {
        width: 65%;
        height: 100%;
    }
}