/* ============================================================
 * voice（お客様の声）
 *
 * Figma PC: 1240 x 710 / SP: 750 x 1353。白背景。
 * 見出しブロックの高さを固定して、その下の声リストが
 * Figma どおりの位置（PC 274 / SP 319）から始まるようにしている。
 * 声は 1 件 = 1 グループで縦積み。エディタで複製すれば件数を増やせる。
 * ============================================================ */

.hm-rp-voice {
    background: var(--rp-white);
    padding-bottom: calc(120 * var(--u));
}

/* ---------- 見出し（Voice / お客様の声 / 飾り線） ---------- */
.hm-rp-voice__head {
    /* セクション上端から声リストの先頭（Figma 274）までを固定する */
    height: calc(274 * var(--u));
    padding-top: calc(100 * var(--u));
    text-align: center;
}
.hm-rp-voice .hm-rp-voice__en {
    margin: 0;
    color: var(--rp-gold);
    font-family: var(--rp-en);
    font-weight: 500;
    font-size: calc(20 * var(--u));
    line-height: 1.2;
    letter-spacing: calc(2 * var(--u));
}
.hm-rp-voice .hm-rp-voice__ja {
    margin: calc(17 * var(--u)) 0 0;
    color: var(--rp-gold);
    font-size: calc(30 * var(--u));
    line-height: 1.45;
    letter-spacing: calc(1.5 * var(--u));
}
/* 飾り線。2px の横線が 6px ピッチで 3 本 */
.hm-rp-voice__rule {
    width: calc(80 * var(--u));
    height: calc(14 * var(--u));
    margin: calc(17 * var(--u)) auto 0;
    background: repeating-linear-gradient(
        to bottom,
        var(--rp-gold) 0 calc(2 * var(--u)),
        transparent calc(2 * var(--u)) calc(6 * var(--u))
    );
}

/* ---------- 声 1 件 ---------- */
.hm-rp-voice__item {
    display: flex;
    align-items: flex-start;
    gap: calc(60 * var(--u));
    width: calc(1080 * var(--u));
    margin: 0 auto;
}
.hm-rp-voice__item + .hm-rp-voice__item {
    margin-top: calc(80 * var(--u));
}
.hm-rp-voice .hm-rp-voice__photo {
    flex: none;
    width: calc(286 * var(--u));
    height: calc(286 * var(--u));
    margin: 0;
}
.hm-rp-voice .hm-rp-voice__photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    /* Figma の 2px の金色の輪。円の縁をまたぐように内側へ 1px 寄せる */
    outline: calc(2 * var(--u)) solid var(--rp-gold);
    outline-offset: calc(-1 * var(--u));
}
.hm-rp-voice__body {
    flex: 1 1 auto;
    min-width: 0;
}
.hm-rp-voice .hm-rp-voice__title {
    margin: 0;
    color: var(--rp-purple);
    font-size: calc(24 * var(--u));
    line-height: calc(37 / 24);
    letter-spacing: calc(-0.48 * var(--u));
}
.hm-rp-voice .hm-rp-voice__text {
    margin: calc(10 * var(--u)) 0 0;
    color: var(--rp-ink);
    font-family: var(--rp-gothic);
    font-size: calc(16 * var(--u));
    line-height: calc(29 / 16);
    letter-spacing: calc(-0.32 * var(--u));
}
/* 本文は段落が続いても行送りだけで詰める（Figma も段落間の余白は無し） */
.hm-rp-voice .hm-rp-voice__text + .hm-rp-voice__text {
    margin-top: 0;
}

/* ============================================================
 * SP
 * ============================================================ */
@media (max-width: 768px) {
    .hm-rp-voice {
        padding-bottom: calc(88 * var(--u));
    }
    .hm-rp-voice__head {
        height: calc(319 * var(--u));
    }
    .hm-rp-voice .hm-rp-voice__en {
        font-size: calc(30 * var(--u));
        letter-spacing: calc(3 * var(--u));
    }
    .hm-rp-voice .hm-rp-voice__ja {
        margin-top: calc(16 * var(--u));
        font-size: calc(45 * var(--u));
        letter-spacing: calc(2.25 * var(--u));
    }
    .hm-rp-voice__rule {
        width: calc(100 * var(--u));
        height: calc(17.5 * var(--u));
        margin-top: calc(16 * var(--u));
        background: repeating-linear-gradient(
            to bottom,
            var(--rp-gold) 0 calc(2.5 * var(--u)),
            transparent calc(2.5 * var(--u)) calc(7.5 * var(--u))
        );
    }

    .hm-rp-voice__item {
        flex-direction: column;
        align-items: center;
        gap: calc(40 * var(--u));
        width: calc(688 * var(--u));
    }
    .hm-rp-voice__item + .hm-rp-voice__item {
        margin-top: calc(100 * var(--u));
    }
    .hm-rp-voice__body {
        width: 100%;
    }
    .hm-rp-voice .hm-rp-voice__title {
        font-size: calc(36 * var(--u));
        line-height: calc(55.5 / 36);
        letter-spacing: calc(-0.72 * var(--u));
        text-align: center;
    }
    .hm-rp-voice .hm-rp-voice__text {
        margin-top: calc(31 * var(--u));
        font-size: calc(24 * var(--u));
        line-height: calc(43.5 / 24);
        letter-spacing: calc(-0.48 * var(--u));
    }
}