/* ============================================================
 * message（きものと、その人の人生に寄り添いたい。）
 *
 * Figma PC: 1240 x 820 / SP: 750 x 1528。
 * 背景写真（不透明度 34%・白地の上）に紫 rgba(114,85,137,0.8) を重ねる。
 * 写真とオーバーレイは CSS の背景レイヤーで作り、ロゴだけ画像ブロックにして
 * 管理画面から差し替えられるようにしている。
 * ============================================================ */

.hm-rp-message {
    /* base.css の box-sizing は子要素だけに当たるので、自身にも指定する */
    box-sizing: border-box;
    min-height: calc(820 * var(--u));
    padding: calc(100 * var(--u)) 0 calc(80 * var(--u));
    background-color: var(--rp-white);
    background-image:
        linear-gradient(rgba(114, 85, 137, .8), rgba(114, 85, 137, .8)),
        linear-gradient(rgba(255, 255, 255, .66), rgba(255, 255, 255, .66)),
        url(../img/message-bg.jpg);
    background-repeat: no-repeat;
    background-size:
        100% 100%,
        100% 100%,
        calc(1484 * var(--u)) calc(990 * var(--u));
    background-position:
        0 0,
        0 0,
        calc(-184 * var(--u)) calc(-14 * var(--u));
    color: var(--rp-white);
    text-align: center;
}

.hm-rp-message .hm-rp-message__title {
    color: var(--rp-white);
    font-size: calc(36 * var(--u));
    line-height: 1.45;
    letter-spacing: calc(1.8 * var(--u));
}

.hm-rp-message .hm-rp-message__body {
    margin-top: calc(60 * var(--u));
    color: var(--rp-white);
    font-family: var(--rp-mincho);
    font-weight: 700;
    font-size: calc(18 * var(--u));
    line-height: calc(37 * var(--u));
    letter-spacing: calc(1.8 * var(--u));
}

.hm-rp-message figure.hm-rp-message__logo {
    width: calc(375 * var(--u));
    margin: calc(45 * var(--u)) auto 0;
}
.hm-rp-message .hm-rp-message__logo img {
    width: 100%;
    height: auto;
}

/* ============================================================
 * SP
 * ============================================================ */
@media (max-width: 768px) {
    .hm-rp-message {
        min-height: calc(1528 * var(--u));
        padding: calc(100 * var(--u)) 0 calc(68.5 * var(--u));
        background-size:
            100% 100%,
            100% 100%,
            calc(2365 * var(--u)) calc(1577 * var(--u));
        background-position:
            0 0,
            0 0,
            calc(-504 * var(--u)) calc(-21 * var(--u));
    }
    .hm-rp-message .hm-rp-message__title {
        font-size: calc(54 * var(--u));
        letter-spacing: calc(2.7 * var(--u));
    }
    .hm-rp-message .hm-rp-message__body {
        margin-top: calc(43 * var(--u));
        font-size: calc(27 * var(--u));
        line-height: calc(55.5 * var(--u));
        letter-spacing: calc(2.7 * var(--u));
    }
    .hm-rp-message figure.hm-rp-message__logo {
        width: calc(562.5 * var(--u));
        margin-top: calc(24 * var(--u));
    }
}