/* ============================================================
 * リプランニングページ 共通スタイル（変数・全幅化・共通パーツ）
 *
 * Figma: PC フレーム 1240px / SP フレーム 750px（= 実寸 375px の 2 倍）。
 *
 * 寸法は「Figma の値 × --u」で書く。--u は Figma 1 単位に対応する長さで、
 * PC は画面幅 1240px のとき 1px で、画面幅に比例して拡縮する（上限なし）。
 * SP は画面幅 375px のとき 0.5px（= Figma 750 フレームの 1 単位）。
 * これで文字サイズ・余白・図形が一括で拡縮し、どの画面幅でも
 * Figma の比率がそのまま保たれる。
 * ============================================================ */

:root {
    --rp-gold: #deae6a;
    --rp-gold-light: #fad27c;
    --rp-gold-grad: linear-gradient(94.41deg, #fad27c 0%, #deae6a 100%);
    --rp-purple: #725589;
    --rp-purple-light: #8763a3;
    --rp-purple-grad: linear-gradient(180deg, #8763a3 0%, #725589 100%);
    --rp-ink: #353535;
    --rp-white: #fff;
    --rp-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --rp-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    --rp-en: "Libre Baskerville", "Times New Roman", serif;
}

/* ---------- 全幅メイン領域 ---------- */
.hm-rp-main,
.hm-rp-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
/* --u の基準幅。100vw はスクロールバーを含んでしまい実際の描画幅とずれるため、
 * 親をコンテナにして「本当に使える幅」をコンテナクエリ単位で測る。 */
.hm-rp-content {
    container-type: inline-size;
}

/* ---------- 版面幅 1200px ＋ 余白の背景 ----------
 * 寸法はすべて --u（= 版面幅 ÷ 1240）で決まるので、版面の幅を絞るだけで
 * Figma の比率を保ったまま全体が縮む（個別の値を触る必要はない）。
 * 空いた左右には和紙テクスチャ＋グラデーションを敷く（版面に影は付けない）。 */
.hm-rp-main {
    /* 余白に敷く地。画面に貼り付けて動かさない（スクロールしても柄が流れない） */
    background-color: #efe9f3;
    background-image: url(../img/bg-page.jpg);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.hm-rp-content {
    max-width: 1200px;
    margin-inline: auto;
    background: var(--rp-white);
}
.hm-rp-content > .wp-block-group {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* ---------- セクション共通 ---------- */
.hm-rp {
    position: relative;
    /* Figma 1 単位ぶんの長さ。PC フレーム 1240 単位幅を基準にする */
    --u: calc(100cqw / 1240);
    font-family: var(--rp-gothic);
    color: var(--rp-ink);
    overflow: hidden;
}
.hm-rp *,
.hm-rp *::before,
.hm-rp *::after {
    box-sizing: border-box;
}
/* 明朝の見出し（2026-09-23: word-break: keep-all を解除。改行位置は <br> と
 * hm-rp-brk-pc/sp で決め打ちのため、7幅すべてで表示は変わらない） */
.hm-rp h2,
.hm-rp h3,
.hm-rp h4 {
    font-family: var(--rp-mincho);
    font-weight: 700;
    overflow-wrap: break-word;
    margin: 0;
}
.hm-rp p {
    margin: 0;
}
/* 画像は置き場所（figure）の幅いっぱいに描く。幅を与えないと SVG / PNG の
 * 固有サイズで頭打ちになり、広い画面で拡大されない。 */
.hm-rp img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
/* パターン内の画像ブロックは figure の既定余白を持たせない */
.hm-rp figure.wp-block-image {
    margin: 0;
}

/* ---------- 改行位置の出し分け ----------
 * 「この文節の直後で PC だけ／SP だけ改行する」を span で表す。
 * <br> にクラスを付ける方法は、エディタが保存時にクラスを落とすので使えない。 */
.hm-rp .hm-rp-brk-pc::after {
    content: "\A";
    white-space: pre;
}

/* ---------- ボタン ---------- */
.hm-rp .hm-rp-btn .wp-block-button__link,
.hm-rp .hm-rp-btn__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--u));
    min-width: calc(220 * var(--u));
    padding: calc(12 * var(--u)) calc(28 * var(--u));
    border-radius: calc(4 * var(--u));
    background: var(--rp-purple);
    color: var(--rp-white);
    font-family: var(--rp-gothic);
    font-size: calc(15 * var(--u));
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.4;
    text-decoration: none;
    transition: opacity .2s;
}
.hm-rp .hm-rp-btn .wp-block-button__link:hover,
.hm-rp .hm-rp-btn__link:hover {
    opacity: .82;
}

/* ---------- SP ---------- */
@media (max-width: 768px) {
    .hm-rp {
        /* SP フレームは 750 単位幅。画面幅 375px で 1 単位 = 0.5px になる */
        --u: calc(100cqw / 750);
    }
    .hm-rp .hm-rp-brk-pc::after {
        content: none;
    }
    .hm-rp .hm-rp-brk-sp::after {
        content: "\A";
        white-space: pre;
    }
}