/* ============================================================
 * flow（リプランニングの流れ）
 *
 * Figma PC: 1240 x 445（フレーム y=3961..4406）/ SP: 750 x 1160（y=6666..7826）。
 * 紫グラデーション帯（フレーム PC y=2044..4731 / SP y=3171..8233）の途中に乗るため、
 * 背景はその区間に対応する色だけを切り出して敷く。
 *
 * 4 ステップは「番号・丸写真・ラベル」を 1 セットにした箱を絶対配置する。
 * 丸写真は Figma では円マスク＋原寸写真なので、円を overflow:hidden にして
 * 中の写真を円サイズに対する % で置き、PC / SP で同じ切り抜きになるようにしている。
 * ============================================================ */

.hm-rp-flow {
    height: calc(445 * var(--u));
    background: linear-gradient(180deg, #785990 0%, #75578c 100%);
}
.hm-rp-flow__inner {
    position: relative;
    width: calc(1240 * var(--u));
    max-width: 100%;
    height: 100%;
    margin-inline: auto;
}

/* ---------- 見出し ---------- */
.hm-rp-flow .hm-rp-flow__title {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    color: var(--rp-white);
    font-size: calc(30 * var(--u));
    line-height: 1.45;
    letter-spacing: calc(1.5 * var(--u));
    text-align: center;
    white-space: nowrap;
}

/* ---------- ステップ ---------- */
.hm-rp-flow__item {
    position: absolute;
    top: calc(72 * var(--u));
    width: calc(184 * var(--u));
    height: calc(318 * var(--u));
}
.hm-rp-flow__item--1 {
    left: calc(133 * var(--u));
}
.hm-rp-flow__item--2 {
    left: calc(397 * var(--u));
}
.hm-rp-flow__item--3 {
    left: calc(661 * var(--u));
}
.hm-rp-flow__item--4 {
    left: calc(925 * var(--u));
}

/* 番号 01〜04 */
.hm-rp-flow .hm-rp-flow__num {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    color: var(--rp-white);
    font-family: var(--rp-en);
    font-weight: 500;
    font-size: calc(32 * var(--u));
    line-height: 1.45;
    letter-spacing: calc(3.2 * var(--u));
    text-align: center;
}

/* 丸写真 */
.hm-rp-flow .hm-rp-flow__photo {
    position: absolute;
    left: 0;
    top: calc(66 * var(--u));
    width: calc(184 * var(--u));
    height: calc(184 * var(--u));
    margin: 0;
    border: calc(2 * var(--u)) solid var(--rp-gold-light);
    border-radius: 50%;
    overflow: hidden;
}
.hm-rp-flow .hm-rp-flow__photo img {
    position: absolute;
    max-width: none;
    /* 差し替え時も円いっぱいに収まるように */
    object-fit: cover;
}
/* 円（= 100%）に対する原寸写真の位置と大きさ。Figma のマスク位置から算出 */
.hm-rp-flow__item--1 .hm-rp-flow__photo img {
    left: -71.739%;
    top: -26.087%;
    width: 227.717%;
    height: 151.63%;
}
.hm-rp-flow__item--2 .hm-rp-flow__photo img {
    left: -20.652%;
    top: -1.087%;
    width: 169.565%;
    height: 113.043%;
}
.hm-rp-flow__item--3 .hm-rp-flow__photo img {
    left: -19.022%;
    top: -4.891%;
    width: 163.587%;
    height: 109.239%;
}
.hm-rp-flow__item--4 .hm-rp-flow__photo img {
    left: -86.413%;
    top: -47.283%;
    width: 271.739%;
    height: 153.261%;
}

/* ラベル */
.hm-rp-flow .hm-rp-flow__label {
    position: absolute;
    left: 50%;
    top: calc(272 * var(--u));
    margin: 0;
    transform: translateX(-50%);
    color: var(--rp-white);
    font-size: calc(18 * var(--u));
    line-height: calc(26 * var(--u));
    letter-spacing: calc(-0.36 * var(--u));
    text-align: center;
    white-space: nowrap;
}

/* ---------- ステップ間の矢印（右向き三角） ---------- */
.hm-rp-flow__arrows span {
    position: absolute;
    top: calc(213.5 * var(--u));
    width: 0;
    height: 0;
    border-top: calc(16.5 * var(--u)) solid transparent;
    border-bottom: calc(16.5 * var(--u)) solid transparent;
    border-left: calc(15 * var(--u)) solid var(--rp-gold-light);
}
.hm-rp-flow__arrows span:nth-child(1) {
    left: calc(349.5 * var(--u));
}
.hm-rp-flow__arrows span:nth-child(2) {
    left: calc(613.5 * var(--u));
}
.hm-rp-flow__arrows span:nth-child(3) {
    left: calc(877.5 * var(--u));
}

/* ============================================================
 * SP（2 列 × 2 段。矢印はなし）
 * ============================================================ */
@media (max-width: 768px) {
    .hm-rp-flow {
        height: calc(1160 * var(--u));
        background: linear-gradient(180deg, #785991 0%, #74568b 100%);
    }
    .hm-rp-flow__inner {
        width: calc(750 * var(--u));
    }

    .hm-rp-flow .hm-rp-flow__title {
        top: 0;
        font-size: calc(45 * var(--u));
        letter-spacing: calc(2.25 * var(--u));
    }

    .hm-rp-flow__item {
        width: calc(286.522 * var(--u));
        height: calc(434 * var(--u));
    }
    .hm-rp-flow__item--1 {
        left: calc(59 * var(--u));
        top: calc(160 * var(--u));
    }
    .hm-rp-flow__item--2 {
        left: calc(403 * var(--u));
        top: calc(160 * var(--u));
    }
    .hm-rp-flow__item--3 {
        left: calc(59 * var(--u));
        top: calc(661 * var(--u));
    }
    .hm-rp-flow__item--4 {
        left: calc(404 * var(--u));
        top: calc(661 * var(--u));
    }

    .hm-rp-flow .hm-rp-flow__num {
        font-size: calc(48 * var(--u));
        letter-spacing: calc(4.8 * var(--u));
    }
    .hm-rp-flow .hm-rp-flow__photo {
        top: calc(72.77 * var(--u));
        width: calc(286.522 * var(--u));
        height: calc(286.522 * var(--u));
        border-width: calc(3 * var(--u));
    }
    .hm-rp-flow .hm-rp-flow__label {
        top: calc(393.55 * var(--u));
        font-size: calc(27 * var(--u));
        line-height: calc(40 * var(--u));
        letter-spacing: calc(-0.54 * var(--u));
    }

    .hm-rp-flow__arrows {
        display: none;
    }
}