/* ============================================================
 * cta（金色パネルのご相談バナー）
 *
 * Figma PC: 1240 x 205 / SP: 750 x 307。本文中で 2 回使う汎用パーツなので、
 * 背景は持たせず（下の敷物は置かれる場所の背景に任せる）、
 * flow の直後に置かれたときだけ紫グラデーションの続きを自分で敷く。
 *
 * スタッフ写真はパネルの左上からはみ出して重なるため、
 * セクションの原点は写真の上端（パネル上端の 34 上）に取っている。
 * ============================================================ */

/* パネル 171 ＋ 写真のはみ出し 34 ＝ 205 に、次のセクションまでの余白 120 を足した高さ。
 * 余白は前のセクションの背景が続く区間なので、CTA 自身が受け持つ。 */
.hm-rp-cta {
    height: calc(325 * var(--u));
}
/* flow の続きに置かれた 1 つめだけ、紫グラデーションの該当区間を敷く */
.hm-rp-flow + .hm-rp-cta {
    background: linear-gradient(180deg, #75578c 0%, #73568a 100%);
}
/* statement の続きに置かれた 2 つめは、和紙テクスチャを継ぎ目なく延長する。
 * statement の高さぶん背景をずらして、同じ 1 枚の続きに見せる。 */
.hm-rp-statement + .hm-rp-cta {
    background-image: url(../img/washi.jpg);
    background-position: center calc(-864 * var(--u));
    background-size: 100% auto;
    background-repeat: repeat-y;
}
.hm-rp-cta__inner {
    position: relative;
    width: calc(1240 * var(--u));
    max-width: 100%;
    height: 100%;
    margin-inline: auto;
}

/* ---------- 金色パネル ---------- */
.hm-rp-cta__panel {
    position: absolute;
    left: calc(80 * var(--u));
    right: calc(80 * var(--u));
    top: calc(34 * var(--u));
    height: calc(171 * var(--u));
    border-radius: calc(10 * var(--u));
    background: linear-gradient(99deg, #fad27c 0%, #deae6a 100%);
}

/* ---------- 左に重なるスタッフ写真 ---------- */
.hm-rp-cta .hm-rp-cta__photo {
    position: absolute;
    left: calc(110 * var(--u));
    top: 0;
    width: calc(268.898 * var(--u));
    height: calc(205 * var(--u));
    margin: 0;
}
.hm-rp-cta .hm-rp-cta__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- コピー ---------- */
.hm-rp-cta .hm-rp-cta__lead {
    position: absolute;
    left: calc(80 * var(--u));
    right: calc(80 * var(--u));
    top: calc(59 * var(--u));
    margin: 0;
    color: var(--rp-ink);
    font-family: var(--rp-mincho);
    font-weight: 700;
    font-size: calc(22 * var(--u));
    line-height: calc(34 * var(--u));
    letter-spacing: calc(-0.44 * var(--u));
    text-align: center;
}

/* ---------- ボタン ---------- */
.hm-rp-cta .hm-rp-cta__btn {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(141 * var(--u));
    display: flex;
    justify-content: center;
    margin: 0;
}
.hm-rp-cta .hm-rp-btn .wp-block-button__link {
    min-width: 0;
    width: calc(228 * var(--u));
    height: calc(40 * var(--u));
    padding: 0;
    border-radius: calc(20 * var(--u));
    background: var(--rp-purple);
    color: var(--rp-white);
    font-family: var(--rp-mincho);
    font-weight: 700;
    font-size: calc(16 * var(--u));
    line-height: calc(26 * var(--u));
    letter-spacing: calc(-0.32 * var(--u));
}

/* ============================================================
 * SP
 * ============================================================ */
@media (max-width: 768px) {
    .hm-rp-cta {
        height: calc(407 * var(--u));
    }
    .hm-rp-flow + .hm-rp-cta {
        background: linear-gradient(180deg, #74568b 0%, #725589 100%);
    }
    .hm-rp-statement + .hm-rp-cta {
        background-position: center calc(-1451 * var(--u));
    }
    .hm-rp-cta__inner {
        width: calc(750 * var(--u));
    }

    .hm-rp-cta__panel {
        left: calc(32 * var(--u));
        right: calc(32 * var(--u));
        top: 0;
        height: calc(307 * var(--u));
        background: linear-gradient(93deg, #fad27c 0%, #deae6a 100%);
    }
    .hm-rp-cta .hm-rp-cta__photo {
        left: calc(33 * var(--u));
        top: calc(109 * var(--u));
        width: calc(242.539 * var(--u));
        height: calc(198.441 * var(--u));
    }
    .hm-rp-cta .hm-rp-cta__lead {
        left: calc(32 * var(--u));
        right: calc(32 * var(--u));
        top: calc(40 * var(--u));
        font-size: calc(33 * var(--u));
        line-height: calc(51 * var(--u));
        letter-spacing: calc(-0.66 * var(--u));
    }
    .hm-rp-cta .hm-rp-cta__btn {
        top: calc(214 * var(--u));
    }
    .hm-rp-cta .hm-rp-btn .wp-block-button__link {
        width: calc(303.654 * var(--u));
        height: calc(53.273 * var(--u));
        border-radius: calc(50 * var(--u));
        font-size: calc(24 * var(--u));
        letter-spacing: calc(-0.48 * var(--u));
    }
}