/* ==========================================================================
   流れ（FLOW）
   SP（lg 未満）: 左にバッジ、右にアイコン → タイトル → 説明文を中央揃えで縦積み
   PC（lg 以上）: バッジ・アイコン・タイトル・説明文を 1 行に横並び
   バッジの形・縦線は --color-accent で塗るので、data-service で事業色に変わる
   ========================================================================== */

.c-flow {
    /* 親が flex でも中身の幅に縮まず、文字側が右端まで伸びるようにする */
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-flow__step {
    position: relative;
    display: grid;
    grid-template-columns: var(--space-7) minmax(0, 1fr);
    grid-template-areas:
        "badge icon"
        "badge title"
        "badge text";
    grid-template-rows: auto auto 1fr;
    row-gap: var(--space-3);
    align-items: start;
    padding-block: var(--space-5);
    text-align: center;
    /* SP はバッジとアイコンの中心を揃える（アイコン枠との高さの差の半分だけ下げる） */
    --_badge-top: calc((var(--flow-icon) - var(--flow-badge-h)) / 2);
}

/* アイコンが無いときは空き段を作らず、タイトルから始める */
.c-flow__step:not(:has(.c-flow__icon)) {
    grid-template-areas:
        "badge title"
        "badge text";
    grid-template-rows: auto 1fr;
}

.c-flow__step:first-child {
    padding-top: 0;
}

.c-flow__step:last-child {
    padding-bottom: 0;
}

/* ---- バッジをつなぐ縦線 ----
   各ステップで線を引き、つなげて 1 本に見せる。最初はバッジの中心から、最後はバッジの中心まで */
.c-flow__step::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((var(--space-7) - var(--flow-line-w)) / 2);
    width: var(--flow-line-w);
    background-color: var(--color-accent);
}

.c-flow__step:first-child::before {
    top: calc(var(--_badge-top) + var(--flow-badge-h) / 2);
}

.c-flow__step:last-child::before {
    bottom: auto;
    height: calc(var(--space-5) + var(--_badge-top) + var(--flow-badge-h) / 2);
}

.c-flow__step:only-child::before {
    content: none;
}

/* ---- 番号バッジ（豚の顔の形に切り抜いて塗る） ---- */
.c-flow__badge {
    grid-area: badge;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: var(--flow-badge-w);
    height: var(--flow-badge-h);
    margin-top: var(--_badge-top);
    color: var(--color-text-inverse);
    background-color: var(--color-accent);
    mask: url("../../images/flow-badge.png") center / contain no-repeat;
}


.c-flow__num {
    font-size: var(--text-flow-num);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

.c-flow__label {
    font-size: var(--text-flow-label);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    text-transform: uppercase;
}

/* ---- アイコン・文字 ---- */
.c-flow__icon {
    grid-area: icon;
    justify-self: center;
    width: var(--flow-icon);
    height: var(--flow-icon);
}

.c-flow__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* SP は文字が長いとバッジ側まで広がるので、左右に余白を取ってバッジに近づきすぎないようにする */
.c-flow__title,
.c-flow__text {
    padding-inline: var(--space-3);
}

.c-flow__title {
    grid-area: title;
    margin: 0;
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

.c-flow__text {
    grid-area: text;
    margin: 0;
    font-size: var(--text-flow-text);
    line-height: var(--leading-body);
}

/* ---- 区切り線と下向き三角 ---- */
.c-flow__divider {
    position: absolute;
    right: 0;
    bottom: 0;
    left: var(--space-7);
    height: var(--border-w);
    background-color: var(--color-border-strong);
}

.c-flow__divider::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: var(--flow-arrow-w);
    height: var(--flow-arrow-h);
    background-color: var(--color-border-strong);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
}

@media (min-width: 1024px) {
    /* 上下の余白を揃えてバッジを行の中央に置く。リストの外側に出る分は打ち消す */
    .c-flow {
        margin-block: calc(var(--space-5) * -1);
    }

    .c-flow__step,
    .c-flow__step:first-child,
    .c-flow__step:last-child,
    .c-flow__step:not(:has(.c-flow__icon)) {
        grid-template-columns: var(--space-8) var(--flow-icon) var(--flow-title-w) minmax(0, 1fr);
        grid-template-areas: "badge icon title text";
        grid-template-rows: auto;
        column-gap: var(--space-7);
        align-items: center;
        padding-block: var(--space-5);
        text-align: left;
    }

    .c-flow__step::before {
        left: calc((var(--space-8) - var(--flow-line-w)) / 2);
    }

    .c-flow__step:first-child::before {
        top: 50%;
    }

    .c-flow__step:last-child::before {
        height: 50%;
    }

    .c-flow__badge {
        margin-top: 0;
    }

    .c-flow__title,
    .c-flow__text {
        padding-inline: 0;
    }

    .c-flow__divider {
        left: var(--space-8);
    }
}