#flow_content {
    padding-bottom: 7rem;

    .flow_list {
        counter-reset: count 0;

        .item {
            margin-bottom: -8rem;

            &::after {
                display: block;
                content: "";
                width: 100%;
                height: 10rem;
                background: var(--pale-blue);
                clip-path: polygon(50% 100%, 0 0, 100% 0);
            }

            & dl {
                background: var(--pale-blue);

                & dt {
                    color: var(--main-blue);
                    font-size: var(--fs-sec-title);
                    text-align: center;
                    margin-bottom: 0.7em;

                    &::before {
                        display: inline-block;
                        content: "STEP 0"counter(count);
                        counter-increment: count 1;
                        color: #FFF;
                        font-weight: 400;
                        margin-right: 0.2em;
                        padding: 0 0.4em;
                        background: var(--main-blue);
                    }
                }
                & dd {
                    font-weight: 700;

                    @media (min-width:768px) {
                        text-align: center;
                    }
                }
                .btn_box {
                    @media (min-width:768px) {
                        display: flex;
                        justify-content: center;
                    }
                    .tel {
                        display: inline-flex;
                        color: var(--main-blue);
                        font-size: clamp( 1.7rem, calc( 1.4352941176470589rem + 0.7352941176470588vw ), 2rem );
                        font-weight: 700;
                        text-align: center;
                        justify-content: center;
                        align-items: center;
                        width: min(100%,30rem);
                        height: 5rem;
                        margin-bottom: 2.5rem;
                        padding: 0 2em;
                        background: #FFF;
                        border: 1px solid var(--main-blue);
                        @media (min-width:768px) {
                            width: fit-content;
                            margin: 0 2.5rem 0 0;
                        }
                        
                        &::before {
                            display: inline-block;
                            content: "";
                            height: 1em;
                            aspect-ratio: 18 / 24;
                            margin-right: 0.5em;
                            background: url(/assets/img/icon_tel_blue.png) no-repeat center / contain;
                        }
                    }
                    .btn {
                        width: min(100%,30rem);
                        height: 5rem;
                        background: var(--main-orange);

                        @media (min-width:768px) {
                            width: fit-content;
                        }
                    }
                }
            }
        }
        .item:first-child {
            dl {
                padding: 5rem 1em 2.5rem;
            }
        }
        .item:not(:first-child) {
            clip-path: polygon(0 0, 50% 10rem, 100% 0, 100% 100%, 0 100%);

            dl{
                padding: 15rem 1em 2.5rem;
            }
        }
        .item:last-child {
            &::after {
                display: none;
            }
            & dl{
                padding: 15rem 1em 5rem;
            }
        }
    }
    .contact {
        margin-top: 16rem;

        & p {
            font-weight: 700;
            width: fit-content;
            margin: 0 auto;
        }
    }
}


