/* ============================================================
 * KV（メインビジュアル）
 *
 * Figma PC: 1240 x 698 / SP: 750 x 829（実寸 375 x 414.5）。
 * 版面が固定幅ではないため、KV 全体を aspect-ratio の箱にして
 * 内部要素はすべて % 指定で置く。どの画面幅でも Figma の比率を保つ。
 * ============================================================ */

.hm-rp-kv {
    position: relative;
    width: 100%;
    aspect-ratio: 1240 / 698;
    background: var(--rp-white);
}

/* ---------- 写真 ----------
 * 元画像の左上には「KIMONO Re PLANNING」のロゴが焼き込まれている。
 * Figma はロゴがちょうど切れる位置で写真を切り抜いているため、
 * その切り抜き（原寸 1448x1086 を 1240x930 に縮小し、上を 232 隠す）を
 * そのまま再現する。object-fit の中心指定では再現できない。 */
.hm-rp-kv__photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.hm-rp-kv__photo img {
    position: absolute;
    left: 0;
    top: -33.238%;
    /* 切り抜きのため枠より大きく置く。共通の max-width: 100% を外さないと潰れる */
    max-width: none;
    width: 100%;
    height: 133.238%;
}

/* ---------- 左側を白くかぶせるグラデーション ---------- */
.hm-rp-kv__veil {
    position: absolute;
    left: 0;
    top: .29%;
    width: 39.11%;
    height: 85.53%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 6.832%, rgba(255, 255, 255, .8) 50%);
    pointer-events: none;
}

/* ---------- 右上の家紋 ---------- */
.hm-rp-kv__crest {
    position: absolute;
    left: 87.66%;
    top: 2.15%;
    width: 9.6%;
}

/* ---------- コピー（Figma でアウトライン化された文字ごと SVG で配置） ----------
 * Reborn / Reuse / Recycle のマークと見出しが 1 枚に入っている。
 * PC と SP でこの塊の縦横比が同じ（2.177 : 2.174）ため、同じ SVG を
 * 置く位置と幅だけ変えて使う。 */
.hm-rp-kv__copy {
    position: absolute;
    left: 6.45%;
    top: 19.2%;
    width: 50.58%;
}

/* ---------- 下端の紫帯 ---------- */
.hm-rp-kv__band {
    position: absolute;
    left: 0;
    right: 0;
    top: 85.82%;
    height: 14.18%;
    background: linear-gradient(180deg, #8763a3 0%, #725589 100%);
}
.hm-rp-kv__band-art {
    position: absolute;
    left: 50%;
    top: 89.26%;
    width: 79.25%;
    transform: translateX(-50%);
}
.hm-rp-kv__band-art--sp {
    display: none;
}

/* ============================================================
 * SP
 * ============================================================ */
@media (max-width: 768px) {
    .hm-rp-kv {
        aspect-ratio: 750 / 829;
    }
    .hm-rp-kv__photo {
        inset: .82% 0 auto 0;
        height: 65.8%;
    }
    /* SP は原寸を 949.773x712.33 に拡大し、左 90・上 184.09 を隠す切り抜き */
    .hm-rp-kv__photo img {
        left: -12%;
        top: -33.75%;
        width: 126.636%;
        height: 130.594%;
    }
    .hm-rp-kv__veil {
        top: 0;
        width: 100%;
        height: 64.65%;
    }
    .hm-rp-kv__crest {
        left: 82.55%;
        top: 3.29%;
        width: 14.18%;
    }
    .hm-rp-kv__copy {
        left: 3.27%;
        top: 11.84%;
        width: 86.18%;
    }
    .hm-rp-kv__band {
        top: 64.65%;
        height: 35.37%;
    }
    .hm-rp-kv__band-art {
        display: none;
    }
    .hm-rp-kv__band-art--sp {
        display: block;
        left: 4.36%;
        top: 69.74%;
        width: 91.13%;
        transform: none;
    }
}