.content_flow {
    --image-size: clamp(56px, 7.27vw, 72px);
    padding-top: 80px;
    padding-bottom: 120px;
    background-color: var(--c3);

    .text {
        font-size: 16px;
        line-height: 1.78;
        margin-bottom: 48px;
    }

    .content_flow_list_wrapper {
        margin: 0 auto;
        background-color: #fff;
        padding: 80px 40px;
        border-radius: 40px;
    }

    .content_flow_list {
        gap: clamp(24px, 5.8vw, 80px);
        position: relative;
        z-index: 1;
        margin-top: 0;

        &::before {
            content: "";
            position: absolute;
            width: 2px;
            background-color: var(--c2);
            left: calc(var(--image-size) / 2 - 1px);
            top: calc(+1px + var(--image-size));
            bottom: calc(-1px + var(--image-size));
            z-index: 0;
        }
    }

    .content_flow_element {
        align-items: flex-start;
        gap: clamp(16px, 4.32vw, 60px);

        .content_flow_element_image {
            width: var(--image-size);
            height: auto;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .content_flow_element_info {
            gap: 8px;

            h3 {
                margin: 0;
                font-size: 1.12em;
                font-weight: 500;
            }
        }

        .flow_step_buttons li {
            margin-top: 16px;

            a {


                /* &::before {
                    content: "";
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    background-image: url(../images/common/icon_mail.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center;
                }

                span {
                    display: block;
                } */
            }
        }
    }

    @media screen and (max-width: 768px) {

        padding-top: 40px;
        padding-bottom: 0;

        .text {
            margin-bottom: 24px;
            text-align-last: left;
        }

        .content_flow_list_wrapper {
            border-radius: 24px;
            padding: 40px 16px;
            padding-left: 8px;
        }

        .content_flow_list::before {
            bottom: calc(50px + var(--image-size));
        }

        .content_flow_element {
            align-items: flex-start;

            .content_flow_element_info {
                margin-top: 12px;
            }

            .content_flow_element_info_content {
                font-size: 1.4rem;
            }
        }
    }

    @media screen and (max-width: 480px) {
        .content_flow_list::before {
            bottom: calc(80px + var(--image-size));
        }
    }
}