@charset "utf-8";

/* PC：modelroom_kagutsuki_2tei_site_v2.png（2229x760）、SP：同_sp.png（1344x1377）を注釈ごとそのまま表示し、
   写真左下にHTMLの「B2」「B3」ラベルを重ねる。 */
.modelroom-sale-banner__visual {
    display: block;
}
.modelroom-sale-banner__photo {
    position: relative;
    display: block;
}
.modelroom-sale-banner__photo picture {
    display: block;
}
.modelroom-sale-banner .modelroom-sale-banner__photo img {
    display: block;
    width: 100%;
    height: auto;
}
/* 写真左下の「B2」「B3」ラベル */
.modelroom-sale-banner__label {
    position: absolute;
    bottom: 25.39%; /* 写真下端（画像の y585 / 760）から少し上 */
    display: flex;
    align-items: baseline; /* 部屋番号と撮影日を1行で */
    padding: 0.35em 0.75em;
    background: #fff;
    color: #3f261c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.modelroom-sale-banner__label small {
    font-size: 8px;
    font-weight: 500;
}
.modelroom-sale-banner__label.is-b2 {
    left: 3.23%;
}
.modelroom-sale-banner__label.is-b3 {
    left: 31.63%;
}
/* ポップアップ内 */
.fix_banner_top2 .modelroom-sale-banner {
    cursor: default;
}
/* ポップアップ：PCは画面の上下中央に表示 */
@media screen and (min-width: 981px) {
    #fix_banner_top2 {
        top: 50%;
        transform: translateY(-50%);
    }
}
@media screen and (max-width: 768px) {
    .modelroom-sale-banner__label {
        bottom: 58.82%; /* 写真の左下角（画像の y567 / 1377）に合わせる */
        padding: 0.3em 0.45em;
        font-size: clamp(7px, 2.2vw, 8px);
    }
    .modelroom-sale-banner__label small {
        font-size: clamp(5.5px, 1.8vw, 6.5px);
    }
    .modelroom-sale-banner__label.is-b2 {
        left: 3.35%;
    }
    .modelroom-sale-banner__label.is-b3 {
        left: 50.45%;
    }
    /* ポップアップの×ボタンを文字に重ならないよう外へ */
    .fix_banner_top2 .bn_close {
        top: -44px;
        right: -8px;
    }
}