SWELL│ステップブロックを横に表現するカスタマイズ

/* PCのステップを横並びに */
@media (min-width: 960px) {
    .swell-block-step.is-style-big {
        display: flex;
    }
}

/* ステップの三角の色 */
.is-style-big > .swell-block-step__item {
    --swl-step_arrow_color: var(--color_link);    
}

/* PCの三角の装飾の位置 */
@media (min-width: 960px) {
    .is-style-big > .swell-block-step__item:before {
        left: 100%;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
    }
}

/* 枠の点線 */
.is-style-big>.swell-block-step__item {
    border-top: 1px dashed var(--swl-step_arrow_color);
}