/* ============================================================
 * contact（Contact / ご相談はこちら）
 *
 * Figma PC: 1240 x 556 / SP: 750 x 1042。薄い藤色のグラデーション背景。
 * 下段は PC が「電話 ｜ ご予約フォーム」の 2 カラム、SP が縦積み。
 * 中央寄せの要素をステージ内に絶対配置しているので、文言を編集しても
 * 位置は崩れない。
 * ============================================================ */

.hm-rp-contact {
    padding-bottom: calc(100 * var(--u));
    background: linear-gradient(180deg, #efe7f5 0%, #e6dcf0 100%);
}

/* ---------- 見出しブロック ---------- */
/* 高さを固定して、フォントの実測差によらず本文の開始位置を Figma と合わせる */
.hm-rp-contact__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(17 * var(--u));
    height: calc(223 * var(--u));
    padding-top: calc(80 * var(--u));
    margin: 0;
    color: var(--rp-purple);
}
.hm-rp-contact .hm-rp-contact__en {
    font-family: var(--rp-en);
    font-weight: 500;
    font-size: calc(20 * var(--u));
    line-height: 1.24;
    letter-spacing: calc(2 * var(--u));
    text-align: center;
}
.hm-rp-contact .hm-rp-contact__ja {
    color: var(--rp-purple);
    font-size: calc(30 * var(--u));
    line-height: 1.45;
    letter-spacing: calc(1.5 * var(--u));
    text-align: center;
}
/* 飾り罫（2px の線が 4px 間隔で 3 本） */
.hm-rp-contact__rule {
    width: calc(80 * var(--u));
    height: calc(14 * var(--u));
    background-image: repeating-linear-gradient(
        to bottom,
        currentColor 0 calc(2 * var(--u)),
        transparent calc(2 * var(--u)) calc(6 * var(--u))
    );
}

/* ---------- リード文 ---------- */
.hm-rp-contact .hm-rp-contact__lead {
    width: calc(734 * var(--u));
    max-width: 100%;
    margin-inline: auto;
    color: var(--rp-ink);
    font-size: calc(16 * var(--u));
    line-height: calc(29 * var(--u));
    letter-spacing: calc(-0.32 * var(--u));
    text-align: center;
}

/* ---------- 電話 ／ 予約フォーム ---------- */
.hm-rp-contact__cta {
    position: relative;
    width: calc(1240 * var(--u));
    max-width: 100%;
    height: calc(106 * var(--u));
    margin: calc(40 * var(--u)) auto 0;
}
/* 2 カラムを分ける縦罫 */
.hm-rp-contact__cta::before {
    content: "";
    position: absolute;
    left: calc(641 * var(--u));
    top: 0;
    width: calc(2 * var(--u));
    height: 100%;
    background: var(--rp-purple);
}
.hm-rp-contact .hm-rp-contact__label {
    position: absolute;
    top: 0;
    color: var(--rp-ink);
    font-size: calc(16 * var(--u));
    font-weight: 500;
    line-height: calc(29 * var(--u));
    letter-spacing: calc(-0.32 * var(--u));
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
}
.hm-rp-contact .hm-rp-contact__label--tel {
    left: calc(424.5 * var(--u));
}
.hm-rp-contact .hm-rp-contact__label--web {
    left: calc(840 * var(--u));
}

.hm-rp-contact .hm-rp-contact__tel {
    position: absolute;
    left: calc(421.5 * var(--u));
    top: calc(54 * var(--u));
    color: var(--rp-purple);
    font-family: var(--rp-en);
    font-size: calc(40 * var(--u));
    line-height: 1.24;
    letter-spacing: calc(4 * var(--u));
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transform: translateX(-50%);
}
.hm-rp-contact .hm-rp-contact__tel a {
    color: inherit;
    text-decoration: none;
}

/* ご予約フォームボタン */
.hm-rp-contact .hm-rp-contact__btn {
    position: absolute;
    left: calc(701 * var(--u));
    top: calc(46 * var(--u));
    margin: 0;
}
.hm-rp-contact .hm-rp-contact__btn .wp-block-button__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(278 * var(--u));
    height: calc(60 * var(--u));
    min-width: 0;
    padding: 0;
    border-radius: calc(5 * var(--u));
    background: var(--rp-purple);
    color: var(--rp-white);
    font-family: var(--rp-gothic);
    font-size: calc(16 * var(--u));
    font-weight: 500;
    line-height: calc(29 * var(--u));
    letter-spacing: calc(-0.32 * var(--u));
    text-decoration: none;
}
/* 右向きの矢印 */
.hm-rp-contact .hm-rp-contact__btn .wp-block-button__link::after {
    content: "";
    position: absolute;
    right: calc(17 * var(--u));
    top: 50%;
    width: calc(10.22 * var(--u));
    height: calc(14.55 * var(--u));
    background: url(../svg/contact-arrow.svg) no-repeat center / 100% 100%;
    /* 元の SVG は下向きなので、幅高さを入れ替えたうえで右向きに回す */
    transform: translateY(-50%) rotate(-90deg);
}

/* ============================================================
 * SP
 * ============================================================ */
@media (max-width: 768px) {
    .hm-rp-contact {
        padding-bottom: calc(100 * var(--u));
    }

    .hm-rp-contact__head {
        gap: calc(16 * var(--u));
        height: calc(309 * var(--u));
        padding-top: calc(100 * var(--u));
    }
    .hm-rp-contact .hm-rp-contact__en {
        font-size: calc(30 * var(--u));
        letter-spacing: calc(3 * var(--u));
    }
    .hm-rp-contact .hm-rp-contact__ja {
        font-size: calc(45 * var(--u));
        letter-spacing: calc(2.25 * var(--u));
    }
    .hm-rp-contact__rule {
        width: calc(100 * var(--u));
        height: calc(17.5 * var(--u));
        background-image: repeating-linear-gradient(
            to bottom,
            currentColor 0 calc(2.5 * var(--u)),
            transparent calc(2.5 * var(--u)) calc(7.5 * var(--u))
        );
    }

    .hm-rp-contact .hm-rp-contact__lead {
        width: calc(688 * var(--u));
        font-size: calc(24 * var(--u));
        line-height: calc(43.5 * var(--u));
        letter-spacing: calc(-0.48 * var(--u));
    }

    /* SP は縦積み。区切りは横罫になる */
    .hm-rp-contact__cta {
        width: calc(750 * var(--u));
        height: calc(417 * var(--u));
        margin-top: calc(85.5 * var(--u));
    }
    .hm-rp-contact__cta::before {
        left: calc(295 * var(--u));
        top: calc(196 * var(--u));
        width: calc(159 * var(--u));
        height: calc(3 * var(--u));
    }
    .hm-rp-contact .hm-rp-contact__label {
        font-size: calc(24 * var(--u));
        line-height: calc(43.5 * var(--u));
        letter-spacing: calc(-0.48 * var(--u));
    }
    .hm-rp-contact .hm-rp-contact__label--tel {
        left: calc(378.5 * var(--u));
        top: 0;
    }
    .hm-rp-contact .hm-rp-contact__label--web {
        left: calc(374.5 * var(--u));
        top: calc(258 * var(--u));
    }
    .hm-rp-contact .hm-rp-contact__tel {
        left: calc(374.5 * var(--u));
        top: calc(81 * var(--u));
        font-size: calc(60 * var(--u));
        letter-spacing: calc(6 * var(--u));
    }
    .hm-rp-contact .hm-rp-contact__btn {
        left: calc(166 * var(--u));
        top: calc(327 * var(--u));
    }
    .hm-rp-contact .hm-rp-contact__btn .wp-block-button__link {
        width: calc(417 * var(--u));
        height: calc(90 * var(--u));
        border-radius: calc(7.5 * var(--u));
        font-size: calc(24 * var(--u));
        line-height: calc(43.5 * var(--u));
        letter-spacing: calc(-0.48 * var(--u));
    }
    .hm-rp-contact .hm-rp-contact__btn .wp-block-button__link::after {
        right: calc(25.5 * var(--u));
        width: calc(15.33 * var(--u));
        height: calc(21.83 * var(--u));
    }
}