/* ============================================
   Unit Detail Page — Custom Styles
   ============================================
   Converted from rem (base-10px) to px.
   Dark theme matching property-detail.css.
   ============================================ */

/* --- Global Variables & Shared Classes --- */

/* ============================================
   ARZ — Global CSS Custom Properties
   ============================================
   Single source of truth for all typography,
   colors, and spacing. Imported by all page CSS.
   Change values here → applies everywhere.
   ============================================ */

:root {
    /* Colors */
    --color-primary: #a39575;
    --color-dark: #121212;
    --color-muted: #606068;
    --color-gray-bg: #afafb9;
    --color-border: #e7e9ee;
    --color-white: #ffffff;
    --color-text-light: #e5e5e5;
    --color-gold: #b09868;
    --color-gold-muted: #a39575;

    --font-ja: "Meiryo", "メイリオ", sans-serif;
    --font-heading: "Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN", "Noto Serif JP", serif;

    /* Layout */
    --container-max: 1094px;
    --header-height: 5.5rem; /* 88px */
    --section-padding-y: 80px;
    --section-padding-y-mobile: 50px;

    /* Transitions */
    --transition-base: all 0.15s ease-in-out;
    --transition-smooth: all 0.5s ease;

    /* ============================================
     Typography Scale (from PSD Design)
     ============================================ */

    /* Navigation */
    --nav-font-size: 11px;
    --nav-letter-spacing: 0;
    --nav-gap: 12px;

    @media (min-width: 1280px) {
        --nav-font-size: 13px;
        --nav-gap: 24px;
    }

    @media (min-width: 1536px) {
        --nav-font-size: 14px;
        --nav-gap: 40px;
    }

    /* Hero Title: 空間の次元を上げる「作り手の圧倒的な思い」 */
    --hero-title-size: 72px;
    --hero-title-size-mobile: 28px;
    --hero-title-tracking: var(--tracking-wide);
    --hero-title-leading: var(--leading-tight);

    /* Hero Description: 一棟の再生を通じて... */
    --hero-desc-size: 40px;
    --hero-desc-size-mobile: 14px;
    --hero-desc-tracking: var(--tracking-base);
    --hero-desc-leading: var(--leading-tight);

    /* Concept Title: 資産価値を凌駕させる「究極のこだわり」 */
    --concept-title-size: 45px;
    --concept-title-size-mobile: 20px;
    --concept-title-tracking: var(--tracking-base);
    --concept-title-leading: var(--leading-tight);

    /* Concept Body: その土地が持つ真の... */
    --concept-body-size: 22px;
    --concept-body-size-mobile: 13px;
    --concept-body-tracking: var(--tracking-base);
    --concept-body-leading: var(--leading-loose); /* 49px / 22px ≈ 2.23 */

    /* Section Titles (PICKUP, NEWS, GALLERY, SPEC...) */
    --section-title-size: 40px;
    --section-title-size-mobile: 28px;
    --section-title-ja-size: 18px;
    --section-title-ja-size-mobile: 14px;
    --section-title-tracking: var(--tracking-wider);
    --section-title-ja-tracking: var(--tracking-widest);

    /* Page Header Titles (sub-pages: property, borrower, owner, contact) */
    --page-title-size: 40px;
    --page-title-size-mobile: 28px;
    --page-title-ja-size: 18px;
    --page-title-ja-size-mobile: 14px;

    /* Property Cards */
    --card-title-size: 25px;
    --card-title-size-mobile: 16px;
    --card-address-size: 19px;
    --card-address-size-mobile: 12px;
    --card-price-size: 24px;
    --card-price-size-mobile: 16px;

    /* Buttons (すべての物件をみる etc.) */
    --btn-font-size: 18px;
    --btn-font-size-mobile: 14px;

    /* News Content */
    --news-content-size: 18px;
    --news-content-size-mobile: 14px;

    /* Body Text */
    --body-font-size: 14px;
    --body-font-size-mobile: 13px;
    --body-line-height: var(--leading-normal);
    --body-letter-spacing: var(--tracking-base);

    /* Global Letter Spacing (Tracking) */
    --tracking-base: 0.04em;
    --tracking-wide: 0.1em;
    --tracking-wider: 0.16em;
    --tracking-widest: 0.22em;

    /* Global Line Height (Leading) */
    --leading-tight: 1.2; /* Headings, titles, compact text */
    --leading-normal: 1.6; /* Body text, general content */
    --leading-relaxed: 2; /* Spacious descriptions */
    --leading-loose: 2.23; /* Concept body (49px / 22px) */

    /* Breadcrumb */
    --breadcrumb-size: 12px;
    --breadcrumb-size-mobile: 11px;

    /* Footer */
    --footer-nav-size: 16px;
    --footer-nav-size-mobile: 13px;
    --footer-info-size: 16px;
    --footer-info-size-mobile: 13px;
    --footer-heading-size: 16px;
    --footer-heading-size-mobile: 13px;
    --footer-copyright-size: 14px;
    --footer-copyright-size-mobile: 11px;
}

@media (max-width: 767px) {
    :root {
        --header-height: 3.75rem; /* 60px */
        --section-padding-y: var(--section-padding-y-mobile);

        /* Mobile typography overrides */
        --hero-title-size: var(--hero-title-size-mobile);
        --hero-desc-size: var(--hero-desc-size-mobile);
        --concept-title-size: var(--concept-title-size-mobile);
        --concept-body-size: var(--concept-body-size-mobile);
        --section-title-size: var(--section-title-size-mobile);
        --section-title-ja-size: var(--section-title-ja-size-mobile);
        --page-title-size: var(--page-title-size-mobile);
        --page-title-ja-size: var(--page-title-ja-size-mobile);
        --card-title-size: var(--card-title-size-mobile);
        --card-address-size: var(--card-address-size-mobile);
        --card-price-size: var(--card-price-size-mobile);
        --btn-font-size: var(--btn-font-size-mobile);
        --news-content-size: var(--news-content-size-mobile);
        --body-font-size: var(--body-font-size-mobile);
        --breadcrumb-size: var(--breadcrumb-size-mobile);
        --footer-nav-size: var(--footer-nav-size-mobile);
        --footer-info-size: var(--footer-info-size-mobile);
        --footer-heading-size: var(--footer-heading-size-mobile);
        --footer-copyright-size: var(--footer-copyright-size-mobile);
    }
}

/* --- Section Title Classes (shared across all pages) --- */

.section-title-en {
    color: var(--color-text-light);
    font-size: var(--section-title-size);
    font-weight: 400;
    letter-spacing: var(--section-title-tracking);
    font-family: var(--font-heading);
}

.section-title-ja {
    font-size: var(--section-title-ja-size);
    font-weight: 400;
    letter-spacing: var(--section-title-ja-tracking);
    display: block;
    margin-top: 10px;
    color: var(--color-gold-muted);
}

/* --- Section Titles (Dark Variant) --- */

.section-title-en--dark {
    color: var(--color-text-light);
}

.section-title-ja--dark {
    color: var(--color-gold-muted);
}

.p-unit-detail-main {
    padding: 88px 0 0;
    background: #1f1c18;
    color: #e5e5e5;
    font-family: var(--font-ja);
}

.p-unit-detail-main .flex-sb {
    min-height: 680px;
}

.p-unit-detail-main-left {
    width: 58%;
    position: relative;
}

.p-unit-detail-main-left:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #1f1c18;
    z-index: 3;
}

.p-unit-detail-main-left .p-topics {
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 80px;
    margin-bottom: 60px;
    padding-left: 8%;
}

.p-unit-detail-main-left .topics_list {
    max-width: 480px;
    justify-content: flex-start;
}

.p-unit-detail-main-left .topics_list .method {
    width: 100%;
}

.p-unit-detail-main-left .topics_list .method .title {
    font-size: 23px; /* was 2.3rem = 23px */
}

.p-unit-detail-main-left .topics_list .desc {
    margin-top: 30px;
    padding-right: 0;
}

.p-unit-detail-main-left .topics_contact {
    width: 100%;
    max-width: 580px;
    margin-top: 70px;
}

.p-unit-detail-main-left .topics_contact .word p {
    font-size: 13px; /* was 1.3rem = 13px */
    font-weight: 500;
    line-height: var(--leading-tight);
    margin-bottom: 18px;
}

.p-unit-detail-main-left .topics_contact .page-btn {
    margin-right: 26px;
    flex: 1;
}

.p-unit-detail-main-left .topics_contact .btn {
    font-size: 14px; /* was 1.45rem ≈ 14.5px, rounded to 14px */
    font-weight: 500;
    line-height: var(--leading-tight);
}

.p-unit-detail-main-left .topics_contact .btn span {
    padding: 26px 20px;
}

.p-unit-detail-main-photo {
    width: 42%;
    position: relative;
}

.p-unit-detail-main-photo:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #1f1c18; /* was #f2f5f9, now dark */
    z-index: 3;
}

.p-unit-detail-main-photo figure {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.p-unit-detail-main-photo figure img.object-fit {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 50% 50%;
       object-position: 50% 50%;
}

/* --- Spec Section (dark theme) --- */

.p-spec .l-container {
    max-width: 1214px;
    padding: 140px 60px 0;
}

.p-spec-block {
    max-width: 960px;
    margin: 0 auto;
    border: 1px solid #3c3a34; /* was #e7e7e7 */
    border-top: 0;
}

.p-spec-list {
    font-size: 14px; /* was 1.4rem = 14px */
    font-weight: 500;
}

.p-spec-list dl {
    display: flex;
    border-top: 1px solid #3c3a34; /* was #e7e7e7 */
}

.p-spec-list dl dt {
    width: 31%;
    font-weight: 500;
    line-height: var(--leading-tight);
    padding: 20px 30px;
    background: #2d2b27; /* was #fafafa */
    border-right: 1px solid #3c3a34; /* was #e7e7e7 */
}

.p-spec-list dl dd {
    width: 69%;
    font-weight: 400;
    line-height: var(--leading-normal);
    padding: 20px 30px;
}

.p-spec-list strong {
    font-size: 16px; /* was 1.6rem = 16px */
    font-weight: 700;
}

.p-spec-sketch {
    padding: 40px 60px;
    text-align: center;
    border-top: 1px solid #3c3a34; /* was #e7e7e7 */
}

.p-spec-sketch .type {
    margin-bottom: 30px;
    text-align: center;
}

.p-spec-sketch .type span {
    font-size: 18px; /* was 1.8rem = 18px */
    font-weight: 700;
    padding-bottom: 6px;
    border-bottom: 2px solid #a39575; /* was #121212 */
}

.p-spec-sketch .type span small {
    font-size: 12px; /* was 1.2rem = 12px */
    font-weight: 400;
    margin-left: 10px;
}

.p-spec-sketch figure {
    display: block;
    width: auto;
    max-height: 500px;
    text-align: center;
}

.p-spec-sketch figure img {
    max-height: 450px;
}

.p-spec-service {
    padding: 60px 30px 30px;
    text-align: center;
    border-top: 1px solid #3c3a34; /* was #e7e7e7 */
}

.p-spec-service h4 {
    font-size: 14px; /* was 1.4rem = 14px */
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    margin: 0;
}

ul.sv {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

ul.sv li {
    display: block;
    width: 100px;
    margin: 0 10px 40px;
}

ul.sv li mark {
    width: 36px;
    height: 36px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

ul.sv li.sv-pet mark {
    background-image: url(../img/svg_sv_pet.svg);
}

ul.sv li.sv-intercom mark {
    background-image: url(../img/svg_sv_intercom.svg);
}

ul.sv li.sv-bathtoilet mark {
    background-image: url(../img/svg_sv_bathtoilet.svg);
}

ul.sv li.sv-elevator mark {
    background-image: url(../img/svg_sv_elevator.svg);
}

ul.sv li.sv-soho mark {
    background-image: url(../img/svg_sv_soho.svg);
}

ul.sv li.sv-cctv mark {
    background-image: url(../img/svg_sv_cctv.svg);
}

ul.sv li.sv-washstand mark {
    background-image: url(../img/svg_sv_washstand.svg);
}

ul.sv li.sv-doorlock mark {
    background-image: url(../img/svg_sv_doorlock.svg);
}

ul.sv li.sv-trash mark {
    background-image: url(../img/svg_sv_trash.svg);
}

ul.sv li.sv-washlet mark {
    background-image: url(../img/svg_sv_washlet.svg);
}

ul.sv li.sv-deliverybox mark {
    background-image: url(../img/svg_sv_deliverybox.svg);
}

ul.sv li.sv-intermet mark {
    background-image: url(../img/svg_sv_intermet.svg);
}

ul.sv li.sv-closet mark {
    background-image: url(../img/svg_sv_closet.svg);
}

ul.sv li.sv-shoesbox mark {
    background-image: url(../img/svg_sv_shoesbox.svg);
}

ul.sv li p {
    margin-top: 12px;
    font-size: 12px; /* was 1.2rem = 12px */
    font-weight: 500;
    line-height: var(--leading-tight);
}

/* Highlight Points (dark theme) */

.p-spec-list.point dl dt {
    font-size: 16px; /* was 1.6rem = 16px */
    background: #2d2b27; /* was #fff1f3 */
}

.p-spec-list.point dl dd {
    font-size: 14px; /* was 1.45rem ≈ 14.5px, rounded to 14px */
    font-weight: 700;
    line-height: var(--leading-relaxed);
    padding: 20px 30px;
    background: #2d2b27; /* was #2D2B27 */
}

.p-spec-list.point dl dd small {
    font-weight: 400;
}

/* --- Gallery Section --- */

.p-gallery .l-container {
    max-width: 1214px;
    padding: 140px 60px 0;
}

.p-gallery-block {
    margin-top: 70px;
    margin-left: 60px;
    margin-right: 60px;
}

.photo_credit {
    margin-top: 10px;
    text-align: center;
    font-size: 11px; /* was 1.05rem ≈ 10.5px, rounded to 11px */
}

/* --- Movie Section --- */

.p-movie .l-container {
    max-width: 1214px;
    padding: 180px 60px 0;
}

.p-movie-block {
    margin-top: 70px;
}

.p-movie-block iframe {
    width: 100%;
    height: 615px;
}

/* --- Location Section (dark theme) --- */

.p-location .l-container {
    max-width: 1214px;
    padding: 180px 60px 0;
}

.p-location-block .page-read {
    margin-top: 70px;
    text-align: center;
    font-size: 14px; /* was 1.4rem = 14px */
    line-height: var(--leading-normal);
}

.p-location-block .page-read p {
    margin-bottom: 0.5em;
}

.p-location-block .map-block {
    margin-top: 40px;
    background: #3c3a34; /* was #f2f3f4 */
    padding: 1px;
}

.p-location-block .map-block iframe {
    width: 100%;
    margin-bottom: -1px;
}

/* --- Floor Plan Section --- */

.p-fp .l-container {
    padding: 140px 0 0;
}

.p-fp-block {
    max-width: 960px;
    margin: 0 auto;
}

.p-fp-sketch {
    padding: 60px 60px 0;
    text-align: center;
}

.p-fp-sketch .type {
    margin-bottom: 30px;
    text-align: center;
}

.p-fp-sketch .type span {
    font-size: 18px; /* was 1.8rem = 18px */
    font-weight: 700;
    padding-bottom: 6px;
    border-bottom: 2px solid #a39575; /* was #121212 */
}

.p-fp-sketch .type span small {
    font-size: 12px; /* was 1.2rem = 12px */
    font-weight: 400;
    margin-left: 10px;
}

.p-fp-sketch figure {
    display: block;
    width: auto;
    max-height: 500px;
    text-align: center;
}

.p-fp-sketch figure img {
    max-height: 450px;
}

/* --- Vacancy Section (dark theme) --- */

.p-vacancy .l-container {
    max-width: 1214px;
    padding: 180px 60px 0;
}

.p-vacancy-list {
    display: block;
    width: 100%;
    margin-top: 50px;
}

.p-vacancy-list a {
    color: #e5e5e5; /* was #000 */
    display: block;
}

.p-vacancy-list a.disabled {
    pointer-events: none;
    opacity: 1;
}

.p-vacancy-list a.disabled > * {
    pointer-events: none;
    opacity: 1;
}

.p-vacancy-list a.disabled .page-btn {
    opacity: 0.1;
}

.p-vacancy-list ul {
    display: flex;
    align-content: center;
    border: solid 0 #3c3a34; /* was #e7e7e7 */
    border-width: 0 0 1px 0;
}

.p-vacancy-list li {
    padding: 12px 15px;
}

.p-vacancy-list li.thumb {
    width: 150px;
    border-right: 1px solid #3c3a34; /* was #e7e7e7 */
}

.p-vacancy-list li.thumb figure {
    width: 120px;
    height: 120px;
    overflow: hidden;
    text-align: center;
}

.p-vacancy-list li.thumb .object-fit {
    -o-object-fit: contain;
       object-fit: contain;

    max-height: 100%;
}

.p-vacancy-list li.spec {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.p-vacancy-list li.spec > div {
    width: 24%;
}

.p-vacancy-list li.spec label {
    display: none;
}

.p-vacancy-list li.spec span {
    display: block;
    margin: 0.5em 0;
    font-size: 13px; /* was 1.3rem = 13px */
}

.p-vacancy-list li.spec span em {
    font-size: 11px; /* was 1.1rem = 11px */
    margin-left: 5px;
}

.p-vacancy-list li.spec .vacancy {
    display: inline-block;
    color: #fff;
    font-size: 13px; /* was 1.3rem = 13px */
    font-weight: 700;
    min-width: 72px;
    padding: 10px 5px;
    text-align: center;
    background: #49463e;
    margin-left: 20px;
}

.p-vacancy-list li.spec .vacancy.no {
    background: rgba(255, 255, 255, 0.08); /* was rgba(255,255,255,0.1) */
    color: #999;
}

.p-vacancy-list li.spec .sp-01 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.p-vacancy-list li.spec .sp-01 .sp-left span {
    display: inline-block;
    font-size: 17px; /* was 1.7rem = 17px */
    font-weight: 700;
    margin-bottom: 0;
    margin-left: 20px;
}

.p-vacancy-list li.spec .sp-01 .sp-right {
    margin-left: 20px;
    font-size: 14px; /* was 1.4rem = 14px */
    line-height: var(--leading-normal);
}

.p-vacancy-list li.spec .sp-02 span,
.p-vacancy-list li.spec .sp-03 span {
    font-size: 12px; /* was 1.2rem = 12px */
}

.p-vacancy-list li.spec .rent {
    margin: 0.5em 0;
    font-size: 14px; /* was 1.4rem = 14px */
    font-weight: 700;
    color: #e5e5e5;
}

.p-vacancy-list li.link {
    border-left: 1px solid #3c3a34;
    width: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-vacancy-list li.link .btn {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0.5em 0;
    color: #a39575;
    font-size: 13px; /* was 1.35rem ≈ 13.5px, rounded to 13px */
    font-weight: 500;
    display: inline-block;
    background: transparent;
    border: 1px solid #a39575;
    position: relative;
    transition: all 0.3s ease;
}

.p-vacancy-list li.link .btn span {
    padding: 15px 5px;
    font-size: 12px; /* was 1.2rem = 12px */
    font-weight: 500;
    display: block;
    position: relative;
    z-index: 2;
}

.p-vacancy-list ul.note {
    border-left: none;
    border-right: none;
}

.p-vacancy-list ul.note li {
    border: none;
}

.p-vacancy-list ul.note li.spec {
    font-size: 14px; /* was 1.4rem = 14px */
    font-weight: 700;
}

.p-vacancy-list ul.note li.spec .sp-01 {
    display: block;
    justify-content: center;
}

.p-vacancy-list ul.note li.spec span {
    margin: 0;
}

@media screen and (max-width: 1213px) {
    .p-movie-block iframe {
        height: calc((100vw - 120px) * 0.56);
    }
}

@media screen and (max-width: 1019px) {
    .p-unit-detail-main-left .flex-fs {
        flex-wrap: wrap;
    }
    .p-unit-detail-main-left .flex-fs .page-tel {
        margin-top: 20px;
    }
}

@media screen and (max-width: 959px) {
    .p-vacancy-list li.thumb {
        width: 130px;
    }
    .p-vacancy-list li.thumb figure {
        width: 100px;
        height: 100px;
    }
    .p-vacancy-list li.link {
        width: 140px;
    }
}

@media screen and (min-width: 768px) {
    .p-vacancy-list a:hover {
        background: rgba(255, 255, 255, 0.03); /* was rgba(231,233,235,0.3) */
    }
}

@media screen and (max-width: 767px) {
    .p-unit-detail-main .flex-sb {
        min-height: inherit;
        display: block;
    }
    .p-unit-detail-main-left {
        width: 100%;
    }
    .p-unit-detail-main-left .p-topics {
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 60px;
        margin-bottom: 60px;
        padding-left: 0;
    }
    .p-unit-detail-main-left .topics_list {
        max-width: inherit;
    }
    .p-unit-detail-main-left .topics_list .method .title {
        font-size: 18px; /* was 1.8rem = 18px */
    }
}

/* --- Unit Detail Room Section --- */

.p-unit-detail-room {
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 40px;
    padding-bottom: 80px;
}

.p-unit-detail-room .topics_list {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
}

.p-unit-detail-room .topics_list .method {
    padding-right: 60px;
}

.p-unit-detail-room .topics_list .method .title {
    font-size: 21px; /* was 2.1rem = 21px */
}

.p-unit-detail-room .topics_list .link .vacancy {
    color: #fff;
    font-size: 13px; /* was 1.3rem = 13px */
    font-weight: 600;
    min-width: 106px;
    padding: 18px 5px;
    text-align: center;
    display: inline-block;
    background: #49463e;
}

.p-unit-detail-room .topics_list .link .vacancy.no {
    background: rgba(255, 255, 255, 0.08);
    color: #999;
}

.p-unit-detail-room .topics_list .link a.btn {
    color: #a39575;
    font-size: 13px; /* was 1.3rem = 13px */
    font-weight: 500;
    display: inline-block;
    background: transparent;
    border: 2px solid #a39575;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: none;
}

.p-unit-detail-room .topics_list .link a.btn span {
    display: block;
    padding: 18px 20px;
    position: relative;
    z-index: 2;
}

.contentsarea.room .p-gallery .l-container {
    padding: 20px 60px 0;
}

@media screen and (min-width: 768px) {
    .p-unit-detail-room .topics_list .link a.btn:hover {
        background: rgba(163, 149, 117, 0.15);
        color: #e5e5e5;
    }
    .p-unit-detail-room .topics_list .link a.btn:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        transform: scaleX(0);
        transform-origin: left top;
        transition: 0.4s ease transform;
        background: rgba(163, 149, 117, 0.2);
    }
    .p-unit-detail-room .topics_list .link a.btn:hover:before {
        transform-origin: left top;
        transform: scaleX(1);
    }
}

@media screen and (max-width: 767px) {
    .p-unit-detail-room {
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 40px;
        padding-bottom: 40px;
    }
    .p-unit-detail-room .topics_list {
        width: auto;
        margin-left: auto;
        margin-right: auto;
        justify-content: flex-start;
    }
    .p-unit-detail-room .topics_list .method {
        width: 100%;
        margin-bottom: 30px;
        padding-right: 0;
    }
    .p-unit-detail-room .topics_list .method .title {
        font-size: 18px; /* was 1.8rem = 18px */
    }
    .p-unit-detail-room .topics_list .link .vacancy {
        font-size: 12px; /* was 1.15rem ≈ 11.5px, rounded to 12px */
        min-width: 60px;
        padding: 14px 10px;
    }
    .p-unit-detail-room .topics_list .link a.btn {
        font-size: 12px; /* was 1.15rem ≈ 11.5px, rounded to 12px */
    }
    .p-unit-detail-room .topics_list .link a.btn span {
        padding: 14px 10px;
    }
}

/* --- Topics List Base CSS --- */

.topics_list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.topics_list .entry {
    width: 46.6%;
    margin-top: 100px;
}

.topics_list .method {
    display: block;
    padding-right: 120px;
    position: relative;
}

.topics_list .method a.cat {
    color: #a39575; /* was #606068 */
    font-size: 12px; /* was 1.2rem = 12px */
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-decoration: none;
    transition: 0.2s;
}

.topics_list .method a.cat:hover {
    opacity: 0.7;
}

.topics_list .method .title {
    font-size: 18px; /* was 1.8rem = 18px */
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-tight);
    margin-top: 10px;
    margin-bottom: 0;
}

.topics_list .method address {
    display: block;
    font-size: 12px; /* was 1.2rem = 12px */
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    margin-top: 10px;
    font-style: normal;
}

.topics_list .method .vacancy {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    font-size: 13px; /* was 1.3rem = 13px */
    font-weight: 600;
    min-width: 106px;
    padding: 18px 5px;
    text-align: center;
    background: #49463e;
}

.topics_list .method .vacancy.no {
    background: rgba(255, 255, 255, 0.08);
    color: #999;
}

.topics_list .photo {
    display: block;
    margin-top: 25px;
}

.topics_list .photo .topics_link {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 120%;
    display: flex;
}

.topics_list .photo .topics_link figure {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.topics_list .photo .topics_link figure img {
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    transition: all 0.5s ease;
}

.topics_list .photo .topics_link figure:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(54, 58, 64, 0.4);
    z-index: 1;
    opacity: 0;
    transition: all 0.5s ease;
}

.topics_list .desc {
    margin-top: 40px;
    padding-right: 12.5%;
}

.topics_list .desc p {
    font-size: 13px; /* was 1.3rem = 13px */
    font-weight: 400;
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-wide);
}

@media screen and (min-width: 768px) {
    .topics_list .entry .topics_link:hover figure img {
        transform: scale(1.05);
    }
    .topics_list .photo .topics_link:hover figure:before {
        opacity: 1;
    }
}

@media screen and (max-width: 767px) {
    .topics_list .entry {
        width: 100%;
        margin-top: 80px;
    }
    .topics_list .entry:first-child {
        margin-top: 40px;
    }
    .topics_list .method {
        padding-right: 80px;
    }
    .topics_list .method a.cat {
        font-size: 11px; /* was 1.1rem = 11px */
    }
    .topics_list .method .title {
        font-size: 18px; /* was 1.8rem = 18px */
        margin-top: 10px;
    }
    .topics_list .method address {
        font-size: 12px; /* was 1.15rem ≈ 11.5px, rounded to 12px */
    }
    .topics_list .method .vacancy {
        font-size: 12px; /* was 1.15rem ≈ 11.5px, rounded to 12px */
        min-width: 60px;
        padding: 14px 10px;
    }
    .topics_list .method .vacancy.no {
        background: rgba(255, 255, 255, 0.08); /* was rgba(0,0,0,0.2) */
    }
    .topics_list .photo {
        margin-top: 20px;
    }
    .topics_list .desc {
        margin-top: 20px;
        padding-right: 0;
    }
    .topics_list .desc p {
        font-size: 12px; /* was 1.2rem = 12px */
        line-height: var(--leading-normal);
    }
}

/* Slide11 unit detail background alignment */

.p-unit-detail-main,
.p-unit-detail-room,
.contentsarea.room {
    background: #1f1c18;
}

/* Slide12 unit detail spacing */

.contentsarea.room .pd-gallery {
    padding-top: 60px;
}

.contentsarea.room .pd-location {
    padding-top: 70px;
}

.contentsarea.room .pd-location__info {
    margin-top: 40px;
}

.contentsarea.room .pd-location__map {
    margin-top: 24px;
}

@media (max-width: 767px) {
    .contentsarea.room .pd-gallery {
        padding-top: 40px;
    }

    .contentsarea.room .pd-location {
        padding-top: 50px;
    }

    .contentsarea.room .pd-location__info {
        margin-top: 30px;
    }

    .contentsarea.room .pd-location__map {
        margin-top: 20px;
    }
}

/* Slide11 vacancy badge color */

.p-unit-detail-room .topics_list .link .vacancy:not(.no),
.topics_list .method .vacancy:not(.no) {
    background: #49463e;
}