.mv {
    margin-bottom: min(16vw, 60px);
}

@media (min-width: 768px) {
    .mv {
        margin-bottom: min(7.8125vw, 150px);
    }
}

/* ==========
ご利用の流れ
========== */

.section__content--flow {
    padding-bottom: min(13.3333333333vw, 50px);
    overflow: visible;
}

.flow-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(13.3333333333vw, 50px);
    counter-reset: flow;
}

.flow-list__item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: min(3.2vw, 12px) min(8vw, 30px);
    width: 100%;
    padding: min(4vw, 15px) min(5.3333333333vw, 20px);
    border: 2px solid var(--main-color-thin);
    border-top: 0;
    counter-increment: flow;
}

/* 上辺の線（番号の手前で途切れさせる） */
.flow-list__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: max(-2px, -0.5333333333vw);
    right: min(21.3333333333vw, 80px);
    height: 2px;
    background: var(--main-color-thin);
}

/* 下辺の線を矢印の手前で左右に途切れさせ、矢印とつながって見せる */
.flow-list__item:not(:last-child) {
    border-bottom: 0;
    background: linear-gradient(var(--main-color-thin), var(--main-color-thin)) left bottom / calc(50% - 13px) 2px no-repeat,
        linear-gradient(var(--main-color-thin), var(--main-color-thin)) right bottom / calc(50% - 13px) 2px no-repeat;
}

/* カード間の下向き矢印 */
.flow-list__item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: max(-10px, -2.6666666667vw);
    left: 50%;
    width: min(5.3333333333vw, 20px);
    height: min(5.3333333333vw, 20px);
    border-right: 2px solid var(--main-color-thin);
    border-bottom: 2px solid var(--main-color-thin);
    transform: translateX(-50%) rotate(45deg);
}

.flow-list__number {
    position: absolute;
    top: 0;
    right: min(6.6666666667vw, 25px);
    font-family: var(--en-font);
    font-size: min(10.6666666667vw, 2.5rem);
    font-weight: 500;
    line-height: 1;
    transform: translateY(-50%);
}

.flow-list__number::before {
    content: counter(flow, decimal-leading-zero);
    color: var(--main-color);
    opacity: 0.3;
}

/* 番号の右側に伸びる短い線（カード右上角まで） */
.flow-list__number::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    width: min(5.0666666667vw, 19px);
    height: 2px;
    background: var(--main-color-thin);
    transform: translateY(-50%);
}

.flow-list__icon {
    width: min(17.0666666667vw, 64px);
}

.flow-list__title {
    font-size: min(6.4vw, 1.5rem);
    font-weight: 600;
    color: var(--main-color);
}

.flow-list__desc {
    grid-column: 1 / -1;
    font-size: min(4.2666666667vw, 1rem);
    line-height: 1.7;
    color: var(--text-color);
}

@media (min-width: 768px) {

    .section__content--flow {
        padding-bottom: min(5.2083333333vw, 100px);
    }

    .flow-list {
        max-width: min(51.0416666667vw, 980px);
        margin: 0 auto;
        gap: min(6.25vw, 120px);
    }

    .flow-list__item {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: min(1.0416666667vw, 20px) min(6.25vw, 120px);
        padding: min(3.125vw, 60px) min(4.4270833333vw, 85px) min(4.1666666667vw, 80px) min(5.7291666667vw, 110px);
        border: 5px solid var(--main-color-thin);
        border-top: 0;
    }

    /* 上辺の線（番号の手前で途切れさせる） */
    .flow-list__item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: min(10.4166666667vw, 200px);
        height: 5px;
        background: var(--main-color-thin);
    }

    /* 下辺の線を矢印の手前で左右に途切れさせ、矢印とつながって見せる */
    .flow-list__item:not(:last-child) {
        border-bottom: 0;
        background: linear-gradient(var(--main-color-thin), var(--main-color-thin)) left bottom / calc(50% - min(2.2395833333vw, 43px)) 5px no-repeat,
            linear-gradient(var(--main-color-thin), var(--main-color-thin)) right bottom / calc(50% - min(2.2395833333vw, 43px)) 5px no-repeat;
    }

    .flow-list__item:not(:last-child)::after {
        bottom: max(-31px, -1.6145833333vw);
        width: min(3.3854166667vw, 65px);
        height: min(3.3854166667vw, 65px);
        border-right: 5px solid var(--main-color-thin);
        border-bottom: 5px solid var(--main-color-thin);
    }

    .flow-list__number {
        top: 0;
        right: min(4.1666666667vw, 80px);
        font-size: clamp(2.5rem, 4.1666666667vw, 5rem);
    }

    .flow-list__number::after {
        left: calc(100% + min(1.5625vw, 30px));
        right: calc(0px - min(4.1666666667vw, 80px) - 5px);
        width: auto;
        height: 5px;
    }

    .flow-list__icon {
        grid-row: 1 / 3;
        grid-column: 2;
        width: min(6.6666666667vw, 128px);
    }

    .flow-list__title {
        grid-column: 1;
        font-size: clamp(1.2188rem, 1.3541666667vw, 1.625rem);
    }

    .flow-list__desc {
        grid-column: 1;
        font-size: clamp(0.75rem, 0.8333333333vw, 1rem);
    }

}