/* ============================================
   Office Property Detail Page — Custom Styles
   ============================================
   Original base: html { font-size: 10px } → 1rem = 10px
   ============================================ */

/* --- 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);
}

/* --- Main Visual Section --- */

/* Original: .p-main { background: #f2f5f9; } */

.pd-main {
    padding: 88px 0 0;
    /* header height = 88px */
    background: #1f1c18;
    color: #e5e5e5;
    font-family: var(--font-ja);
}

/* Original: .p-main .flex-sb { min-height: 680px; } */

.pd-main__flex {
    display: flex;
    justify-content: space-between;
    min-height: 680px;
}

/* Original: .p-main-left { width: 58%; position: relative; } */

.pd-main__left {
    width: 58%;
    position: relative;
}

/* Original: .bread-crumb { width: auto; padding: 30px 50px 0; } */

.pd-main__breadcrumb {
    padding: 30px 50px 0;
    margin: 0;
}

.pd-main__breadcrumb ol {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
    font-size: 12px;
    /* 1.2rem = 12px */
    color: #a39575;
}

.pd-main__breadcrumb ol > li {
    position: relative;
    display: inline;
}

.pd-main__breadcrumb ol > li a {
    transition: 0.2s;
    color: #a39575;
    text-decoration: none;
}

.pd-main__breadcrumb ol > li a:hover {
    opacity: 0.7;
}

.pd-main__breadcrumb ol > li:before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 12px 0 6px;
    transform: rotate(-135deg);
    position: relative;
    border: solid 0 #a39575;
    border-width: 0 0 1px 1px;
}

.pd-main__breadcrumb ol > li:first-child:before {
    display: none;
}

/* Original: .p-main-left .p-topics { margin: 80px 60px 60px; padding-left: 8%; } */

/* Original: .p-main-left .topics_list { max-width: 480px; justify-content: flex-start; } */

.pd-main__topics {
    margin: 80px 60px 60px;
    padding-left: 8%;
}

.pd-main__topics-list {
    max-width: 480px;
}

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

.pd-main__method {
    display: block;
    padding-right: 120px;
    position: relative;
}

/* Original: .topics_list .method a.cat { color: #606068; font-size: 1.2rem; font-weight: 400; } */

.pd-main__category {
    display: inline-block;
    font-size: 12px;
    /* 1.2rem = 12px */
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    color: #a39575;
    text-decoration: none;
    transition: 0.2s;
}

.pd-main__category:hover {
    opacity: 0.7;
}

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

.pd-main__title {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    margin-top: 10px;
    line-height: var(--leading-tight);
    margin-bottom: 0;
}

/* Original: .topics_list .method address { font-size: 1.2rem = 12px; font-weight: 500; margin-top: 10px; } */

.pd-main__address {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    margin-top: 10px;
    font-style: normal;
}

/* Original: .topics_list .method .vacancy { position: absolute; bottom: 0; right: 0; font-size: 1.3rem; font-weight: 600; min-width: 106px; padding: 18px 5px; } */

.pd-main__vacancy {
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    min-width: 106px;
    padding: 18px 5px;
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}

.pd-main__vacancy--available {
    background: #49463e;
}

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

/* Original: .topics_list .desc p { font-size: 1.3rem = 13px; line-height: 2; letter-spacing: 0.1em; } */

.pd-main__desc {
    margin-top: 30px;
    padding-right: 0;
}

.pd-main__desc p {
    font-size: 14px;
    font-weight: 400;
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-wide);
}

/* Original: .p-main-photo { width: 42%; position: relative; } */

.pd-main__photo {
    width: 42%;
    position: relative;
    z-index: 1;
}

.pd-main__photo figure {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    margin: 0;
}

.pd-main__photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

/* Contact CTA Bar */

.pd-main__contact-bar {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 100;
}

.pd-main__contact-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 90px;
    background: transparent;
    border: 2px solid #a39575;
    color: #a39575;
    font-size: 14px;
    /* ~1.4rem = 14px */
    font-weight: 500;
    text-align: center;
    position: relative;
    transition: all 0.5s;
    text-decoration: none;
}

.pd-main__contact-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: scaleX(0);
    transform-origin: left top;
    transition: 0.4s ease transform;
    background: #1f1c18;
}

.pd-main__contact-link:hover::before {
    transform: scaleX(1);
}

.pd-main__contact-link span {
    position: relative;
    z-index: 2;
}

/* --- Shared Section Title --- */

/* Original: .c-title-1 uses Spartan font, letter-spacing 0.2em */

.pd-section-title {
    text-align: center;
    margin: 0;
}

.pd-section-title__en {
    color: var(--color-text-light, #e5e5e5);
    font-size: var(--section-title-size, 40px);
    font-weight: 400;
    letter-spacing: var(--section-title-tracking, 0.16em);
    font-family: var(--font-heading);
    margin: 0;
    display: inline-block;
}

.pd-section-title__ja {
    color: var(--color-text-light, #e5e5e5);
    font-size: var(--section-title-ja-size, 18px);
    font-weight: 400;
    letter-spacing: var(--section-title-ja-tracking, 0.22em);
    display: block;
    margin-top: 10px;
}

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

.pd-gallery {
    padding-top: 100px;
    padding-bottom: var(--section-padding-y);
}

.pd-gallery__container {
    max-width: 1214px;
    margin: 0 auto;
    padding: 0 60px;
}

.pd-gallery .pd-section-title h3,
.pd-gallery .pd-section-title span,
.pd-spec .pd-section-title h3,
.pd-spec .pd-section-title span {
    color: var(--color-gold-muted) !important;
}

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

.pd-gallery__slider {
    position: relative;
    margin-top: 70px;
    margin-left: 60px;
    margin-right: 60px;
}

.pd-gallery__slides {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #2d2b27;
}

.pd-gallery__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.pd-gallery__slide.is-active {
    opacity: 1;
    z-index: 1;
}

.pd-gallery__slide img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

/* Gallery Navigation — Original bxSlider style arrows */

.pd-gallery__nav {
    position: absolute;
    top: 50%;
    margin-top: -80px;
    /* from original bxSlider margin */
    z-index: 5;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 60px;
    height: 60px;
    color: transparent;
    /* hide text if any */
    padding: 0;
}

.pd-gallery__nav::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -5px;
    width: 24px;
    height: 24px;
    border: solid 0 #a39575;
    border-width: 5px 0 0 5px;
    transition: border-color 0.3s;
}

.pd-gallery__nav--prev {
    left: -80px;
    /* position it outside the slide area in the padding */
}

.pd-gallery__nav--prev::before {
    transform: rotate(-45deg);
}

.pd-gallery__nav--next {
    right: -80px;
    /* position it outside the slide area in the padding */
}

.pd-gallery__nav--next::before {
    margin-left: -19px;
    transform: rotate(135deg);
}

.pd-gallery__nav:hover::before {
    border-color: #a39575;
}

/* Gallery Thumbnails */

.pd-gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    justify-content: center;
}

.pd-gallery__thumb {
    width: 80px;
    height: 80px;
    cursor: pointer;
    /* opacity: 0.6; */
    transition: all 0.3s ease;
    border: 3px solid transparent;
    padding: 0;
    background: none;
    overflow: hidden;
}

.pd-gallery__thumb.is-active {
    opacity: 1;
    border-color: #49463e;
    transform: scale(1.05);
}

.pd-gallery__thumb:hover {
    opacity: 0.85;
}

.pd-gallery__thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

/* --- Spec Section --- */

.pd-spec {
    padding: var(--section-padding-y) 0;
    background: #2d2b27;
}

.pd-spec__container {
    max-width: 1214px;
    margin: 0 auto;
    padding: 0 60px;
}

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

.pd-spec__block {
    max-width: 960px;
    margin: 70px auto 0;
    border: 1px solid #3c3a34;
    border-top: 0;
}

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

.pd-spec__list {
    font-size: 14px;
    font-weight: 500;
}

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

.pd-spec__list dl {
    display: flex;
    border-top: 1px solid #3c3a34;
    margin: 0;
}

/* Original: dt { width: 31%; font-weight: 500; line-height: 1.4; padding: 20px 30px; background: #fafafa; border-right: 1px solid #e7e7e7; } */

.pd-spec__list dt {
    width: 31%;
    padding: 20px 30px;
    font-size: 14px;
    font-weight: 500;
    line-height: var(--leading-tight);
    flex-shrink: 0;
    background: #3c3a34;
    border-right: 1px solid #3c3a34;
}

/* Original: dd { width: 69%; font-weight: 400; line-height: 1.5; padding: 20px 30px; } */

.pd-spec__list dd {
    width: 69%;
    padding: 20px 30px;
    font-size: 14px;
    font-weight: 400;
    line-height: var(--leading-normal);
    margin: 0;
}

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

.pd-spec__service {
    padding: 60px 30px 30px;
    text-align: center;
    border-top: 1px solid #3c3a34;
}

/* Original: .p-spec-service h4 { font-size: 1.4rem = 14px; font-weight: 700; margin: 0; } */

.pd-spec__service h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    margin: 0;
}

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

.pd-spec__service-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    list-style: none;
    padding: 0;
}

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

.pd-spec__service-item {
    display: block;
    width: 100px;
    margin: 0 10px 40px;
    text-align: center;
}

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

.pd-spec__service-item mark {
    display: block;
    width: 36px;
    height: 36px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    color: transparent;
}

.pd-spec__service-item mark img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
}

/* Original: ul.sv li p { margin-top: 12px; font-size: 1.2rem = 12px; font-weight: 500; line-height: 1.33; } */

.pd-spec__service-item p {
    margin-top: 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: var(--leading-tight);
}

/* Highlight Points — Original: .p-spec-list.point */

/* dt { font-size: 1.6rem = 16px; background: #fff1f3; } */

/* dd { font-size: 1.45rem = 14.5px; font-weight: 700; line-height: 2; padding: 20px 30px; background: #2D2B27; } */

.pd-spec__points {
    border-top: 1px solid #3c3a34;
}

.pd-spec__points dl {
    display: flex;
    margin: 0;
    border-top: 1px solid #3c3a34;
}

.pd-spec__points dl:first-child {
    border-top: 0;
}

.pd-spec__points dt {
    width: 31%;
    padding: 20px 30px;
    font-size: 16px;
    /* 1.6rem = 16px */
    font-weight: 500;
    line-height: var(--leading-tight);
    flex-shrink: 0;
    background: #2d2b27;
    border-right: 1px solid #3c3a34;
}

.pd-spec__points dd {
    width: 69%;
    padding: 20px 30px;
    font-size: 14.5px;
    /* 1.45rem */
    font-weight: 700;
    line-height: var(--leading-relaxed);
    margin: 0;
    background: #2d2b27;
}

.pd-spec__point-item {
    display: block;
    margin: 0;
}

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

.pd-movie {
    padding: var(--section-padding-y) 0;
}

.pd-movie__container {
    max-width: 1214px;
    margin: 0 auto;
    padding: 0 60px;
}

/* Original: .p-movie-block { margin-top: 70px; } iframe { width: 100%; height: 615px; } */

.pd-movie__player {
    margin-top: 70px;
    position: relative;
    width: 100%;
}

.pd-movie__player iframe {
    width: 100%;
    height: 615px;
    border: 0;
}

/* --- Location Section --- */

.pd-location {
    padding-top: 100px;
    padding-bottom: var(--section-padding-y);
    background: #2d2b27;
}

.pd-location__container {
    max-width: 1214px;
    margin: 0 auto;
    padding: 0 60px;
}

/* Original: .p-location-block .page-read { margin-top: 70px; text-align: center; font-size: 1.4rem = 14px; line-height: 1.5; } */

.pd-location__info {
    margin-top: 70px;
    font-size: 14px;
    font-weight: 400;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-base);
    text-align: center;
}

.pd-location__info p {
    margin: 0 0 0.5em;
}

/* Original: .map-block { margin-top: 40px; background: #f2f3f4; padding: 1px; } */

.pd-location__map {
    margin-top: 40px;
    background: #3c3a34;
    padding: 1px;
}

.pd-location__map iframe {
    width: 100%;
    height: 450px;
    border: 0;
    margin-bottom: -1px;
}

/* --- Vacancy Section --- */

.pd-vacancy {
    padding: var(--section-padding-y) 0;
}

.pd-vacancy__container {
    max-width: 1214px;
    margin: 0 auto;
    padding: 0 60px;
}

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

.pd-vacancy__block {
    margin-top: 50px;
}

.pd-vacancy__list {
    border-top: 0;
}

/* Vacancy Header Row — Original: ul.note with border */

.pd-vacancy__header {
    display: flex;
    align-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
    border: solid 0 #3c3a34;
    border-width: 0 0 0 0;
    color: #e5e5e5;
}

.pd-vacancy__header .vacancy-col {
    padding: 12px 15px;
    font-size: 14px;
    /* 1.4rem = 14px */
    font-weight: 700;
    text-align: center;
}

/* Vacancy Columns — Original widths from .p-vacancy-list li.spec > div { width: 24% } */

.vacancy-col-01 {
    width: 24%;
}

.vacancy-col-02 {
    width: 24%;
}

.vacancy-col-03 {
    width: 24%;
}

.vacancy-col-04 {
    width: 24%;
}

.vacancy-col-link {
    width: 140px;
    flex-shrink: 0;
}

/* Vacancy Row — Original: .p-vacancy-list a { color: #000; display: block; } */

.pd-vacancy__row {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.pd-vacancy__row:hover {
    background: rgba(255, 255, 255, 0.03);
}

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

.pd-vacancy__row-inner {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    border: solid 0 #3c3a34;
    border-width: 0 0 1px 0;
    align-items: center;
}

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

.pd-vacancy__row-inner .vacancy-col {
    padding: 24px 15px;
    font-size: 13px;
    /* 1.3rem = 13px */
    font-weight: 400;
    text-align: center;
}

.pd-vacancy__row-inner .vacancy-col label {
    display: none;
}

/* Room Number + Badge — Original uses .sp-01 with flex */

.pd-vacancy__room {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding-left: 0;
}

/* Original: .vacancy { font-size: 1.3rem = 13px; font-weight: 700; min-width: 72px; padding: 10px 5px; background: #1F1C18; margin-left: 20px; } */

.pd-vacancy__row-inner .vacancy-col span.pd-vacancy__badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    min-width: 72px;
    padding: 10px 5px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}

.pd-vacancy__badge--available {
    background: #1f1c18;
}

/* Original: .sp-01 .sp-left span { font-size: 1.7rem = 17px; font-weight: 700; margin-left: 40px; } */

.pd-vacancy__row-inner .vacancy-col span.pd-vacancy__room-number {
    font-size: 17px;
    font-weight: 700;
    display: inline-block;
    margin-left: 40px;
    /* Increased from 20px to match original screenshot */
    margin-top: 0;
    margin-bottom: 0;
}

/* Rent Info — Original: .rent { font-size: 1.4rem = 14px; font-weight: 700; margin: 0.5em 0; } */

.pd-vacancy__rent {
    font-size: 14px;
    font-weight: 700;
    color: #e5e5e5;
    margin-bottom: 0;
    margin: 0.5em 0;
}

.pd-vacancy__movein {
    display: block;
    font-size: 12px;
    /* 1.2rem */
    font-weight: 400;
    margin: 0.5em 0;
    color: #a39575;
}

/* Original: span { display: block; margin: 0.5em 0; font-size: 1.3rem = 13px; } em { font-size: 1.1rem = 11px; margin-left: 5px; } */

.pd-vacancy__row-inner .vacancy-col span {
    display: block;
    margin: 0.5em 0;
    font-size: 13px;
}

.pd-vacancy__row-inner .vacancy-col span em {
    font-size: 11px;
    margin-left: 5px;
}

/* Detail Button — Original: .btn { background: #117de3; font-size: 1.2rem = 12px; padding: 15px 5px; } */

.pd-vacancy__btn {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0.5em 0;
    color: #a39575;
    font-size: 12px;
    font-weight: 500;
    padding: 15px 5px;
    background: transparent;
    border: 1px solid #a39575;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pd-vacancy__row:hover .pd-vacancy__btn {
    background: rgba(163, 149, 117, 0.15);
    color: #e5e5e5;
}

/* Vacancy CTA */

.pd-vacancy__cta {
    margin-top: 40px;
    text-align: center;
}

.pd-vacancy__btn-set {
    margin-top: 40px;
    text-align: center;
}

.pd-vacancy__cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 50px;
    font-size: 13px;
    font-weight: 500;
    color: #a39575;
    background: transparent;
    border: 2px solid #a39575;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-heading);
}

.pd-vacancy__cta-link:hover {
    background: rgba(163, 149, 117, 0.15);
    color: #e5e5e5;
}

.pd-vacancy__cta-link span {
    position: relative;
    z-index: 2;
}

/* --- Contents Area Divider --- */

.contentsarea {
    position: relative;
}

/* --- Reveal Animations --- */

.pd-main .reveal-element,
.pd-gallery .reveal-element,
.pd-spec .reveal-element,
.pd-movie .reveal-element,
.pd-location .reveal-element,
.pd-vacancy .reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.pd-main .reveal-element.is-visible,
.pd-gallery .reveal-element.is-visible,
.pd-spec .reveal-element.is-visible,
.pd-movie .reveal-element.is-visible,
.pd-location .reveal-element.is-visible,
.pd-vacancy .reveal-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Mobile Responsive --- */

@media screen and (max-width: 767px) {
    /* Main Visual */
    .pd-main {
        padding-top: 0;
    }

    .pd-main__flex {
        flex-direction: column-reverse;
        min-height: inherit;
    }

    .pd-main__left {
        width: 100%;
    }

    .pd-main__breadcrumb {
        margin: 0;
        padding: 15px 15px 0;
    }

    .pd-main__breadcrumb ol {
        font-size: 11px;
    }

    .pd-main__breadcrumb ol > li {
        line-height: var(--leading-normal);
    }

    .pd-main__topics {
        margin: 60px 30px 60px;
        padding-left: 0;
        max-width: inherit;
    }

    .pd-main__title {
        font-size: 18px;
        /* 1.8rem = 18px */
    }

    .pd-main__desc {
        font-size: 13px;
        line-height: var(--leading-normal);
    }

    .pd-main__photo {
        width: 100%;
        height: 100vw;
    }

    .pd-main__contact-link {
        width: 100px;
        height: 60px;
        font-size: 12px;
    }

    /* Gallery */
    .pd-gallery {
        padding: 40px 0 0;
    }

    .pd-gallery__container {
        padding: 0;
    }

    .pd-gallery__slider {
        margin-top: 40px;
        margin-left: 0;
        margin-right: 0;
    }

    .pd-gallery__slides {
        aspect-ratio: 4 / 3;
    }

    .pd-gallery__thumbs {
        gap: 4px;
        padding: 0 10px;
    }

    .pd-gallery__thumb {
        width: 56px;
        height: 56px;
    }

    .pd-gallery__nav {
        padding: 12px 8px;
        font-size: 20px;
    }

    .pd-gallery__nav--prev {
        left: 5px;
    }

    .pd-gallery__nav--next {
        right: 5px;
    }

    /* Spec */
    .pd-spec {
        padding: 40px 0 0;
    }

    .pd-spec__container {
        padding: 0 25px;
    }

    .pd-spec__block {
        max-width: inherit;
    }

    .pd-spec__list {
        font-size: 12.5px;
        /* 1.25rem = 12.5px */
    }

    .pd-spec__list dt {
        padding: 10px;
    }

    .pd-spec__list dd {
        padding: 10px;
    }

    .pd-spec__service {
        padding: 30px 5px 15px;
    }

    .pd-spec__service-item {
        width: 90px;
        margin: 0 5px 25px;
    }

    .pd-spec__service-item mark {
        width: 30px;
        height: 30px;
    }

    .pd-spec__service-item p {
        font-size: 10.5px;
        /* 1.05rem = 10.5px */
        line-height: var(--leading-tight);
    }

    .pd-spec__points dl {
        flex-wrap: wrap;
    }

    .pd-spec__points dt {
        width: 100%;
        font-size: 14px;
        text-align: center;
        border-right: 0;
        border-bottom: 1px solid #e7e7e7;
    }

    .pd-spec__points dd {
        width: 100%;
        font-size: 13px;
        font-weight: 700;
        line-height: var(--leading-normal);
        padding: 20px 20px;
        background: #2d2b27;
    }

    /* Movie */
    .pd-movie {
        padding: 100px 0 0;
    }

    .pd-movie__container {
        padding: 0 10px;
    }

    .pd-movie__player {
        margin-top: 40px;
    }

    .pd-movie__player iframe {
        height: calc((100vw - 20px) * 0.6);
    }

    /* Location */
    .pd-location {
        padding: 100px 0 0;
    }

    .pd-location__container {
        padding: 0 10px;
    }

    .pd-location__info {
        margin-top: 40px;
        margin-bottom: 40px;
        text-align: left;
        font-size: 13px;
        line-height: var(--leading-normal);
        padding: 0 15px;
    }

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

    .pd-location__map iframe {
        height: 300px;
    }

    /* Vacancy */
    .pd-vacancy {
        padding: 100px 0 80px;
    }

    .pd-vacancy__container {
        padding: 0 10px;
    }

    .pd-vacancy__block {
        margin-top: 15px;
    }

    .pd-vacancy__header {
        display: none;
    }

    .pd-vacancy__row-inner {
        flex-wrap: wrap;
        padding: 15px;
        border: solid 0 #e7e7e7;
        border-width: 0 1px 1px;
    }

    .pd-vacancy__row-inner .vacancy-col {
        width: 100%;
        padding: 5px 0;
    }

    .pd-vacancy__row-inner .vacancy-col label {
        display: inline;
        font-size: 11px;
        color: #606068;
        margin-right: 8px;
    }

    .pd-vacancy__cta-link {
        display: block;
        padding: 18px 30px;
    }

    /* Section Title */
    .pd-section-title__en {
        font-size: 13px;
    }

    .pd-section-title__ja {
        font-size: 11px;
        margin-top: 5px;
    }
}

/* Medium screen breakpoint */

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

/* Primary Button (Blue with black hover transition) */

.pd-btn-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    color: #a39575;
    border: 2px solid #a39575;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    font-family: var(--font-heading);
    letter-spacing: var(--tracking-wide);
}

.pd-btn-primary:hover {
    background: rgba(163, 149, 117, 0.15);
    color: #e5e5e5;
}

.pd-btn-primary span {
    position: relative;
    z-index: 2;
}

.pd-vacancy__btn-primary {
    width: 320px;
    height: 60px;
    font-size: 13px;
    font-weight: 500;
}

/* Contact block specific to office */

.pd-main__topics-contact {
    margin-top: 40px;
    padding-right: 12.5%;
}

.pd-main__contact-word p {
    font-size: 13px;
    margin-bottom: 20px;
}

.pd-main__contact-flex {
    display: flex;
    align-items: center;
    gap: 30px;
}

.pd-main__contact-btn {
    width: min(390px, 100%);
}

.pd-main__contact-btn a {
    width: 100%;
}

.pd-main__contact-btn a > span:first-child {
    white-space: nowrap;
    font-size: 15px !important;
}

.pd-main__contact-tel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    text-align: left;
}

.pd-main__contact-tel-icon {
    position: absolute;
    top: -2px;
    left: 4px;
    width: 18px;
    height: 18px;
}

.pd-main__contact-tel span {
    display: block;
    font-size: 13px;
    color: var(--color-gold-muted);
    margin-bottom: 20px;
    padding-left: 30px;
}

.pd-main__contact-tel p.en {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: var(--tracking-wide);
    margin: 0;
    white-space: nowrap;
}

.pd-main__contact-tel p.en a {
    color: var(--color-gold-muted);
    text-decoration: none;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    .pd-main__topics-contact {
        padding-right: 0;
    }

    .pd-main__contact-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .pd-vacancy__btn-primary {
        width: 100%;
        max-width: 320px;
    }
}

/* =========================================
   Vacancy Section
   ========================================= */

.pd-vacancy__header {
    display: flex;
    background: transparent;
    padding: 20px 0;
    border-bottom: 1px solid #3c3a34;
    color: #a39575;
}

.pd-vacancy__row {
    display: block;
    color: inherit;
    text-decoration: none;
}

.pd-vacancy__row-inner {
    display: flex;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #3c3a34;
    transition: background 0.3s;
    color: #e5e5e5;
}

.pd-vacancy__row-inner--bg {
    background: rgba(255, 255, 255, 0.03);
}

.pd-vacancy__row:hover .pd-vacancy__row-inner {
    background: rgba(255, 255, 255, 0.05);
}

.vacancy-col {
    flex: 20%;
    text-align: center;
}

.pd-vacancy__header .vacancy-col {
    font-weight: bold;
}

.pd-vacancy__room {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.pd-vacancy__badge {
    color: #fff;
    padding: 5px 15px;
    font-size: 11px;
}

.pd-vacancy__badge--empty {
    background: #49463e;
    color: #fff;
}

.pd-vacancy__badge--full {
    background: rgba(255, 255, 255, 0.1);
    color: #999;
}

.pd-vacancy__room-number {
    font-size: 16px;
    font-weight: bold;
}

.pd-vacancy__rent {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #e5e5e5;
}

.pd-vacancy__detail-text {
    font-size: 13px;
}

.pd-vacancy__flex-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
}

.pd-vacancy__action-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pd-vacancy__btn-sm {
    padding: 15px 30px;
    font-size: 13px;
    font-weight: 500;
}

@media screen and (max-width: 767px) {
    .pd-vacancy__header {
        display: none;
    }

    .pd-vacancy__row-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
        gap: 15px;
    }

    .vacancy-col {
        flex: 1;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .pd-vacancy__room {
        justify-content: flex-start;
    }

    .pd-vacancy__flex-col {
        text-align: right;
    }

    .pd-vacancy__action-col {
        margin-top: 15px;
    }

    .pd-vacancy__btn-sm {
        width: 100%;
    }
}

.pd-movie .pd-section-title h3,
.pd-movie .pd-section-title span,
.pd-location .pd-section-title h3,
.pd-location .pd-section-title span,
.pd-vacancy .pd-section-title h3,
.pd-vacancy .pd-section-title span {
    color: var(--color-gold-muted) !important;
}

/* Property detail vacant notification button nowrap */

.pd-main__contact-btn,
.pd-vacancy__btn-set,
.pd-vacancy__cta {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.pd-main__contact-btn a,
.pd-vacancy__btn-set a,
.pd-vacancy__cta a {
    width: 100%;
    white-space: nowrap;
}

.pd-main__contact-btn a > span,
.pd-vacancy__btn-set a > span,
.pd-vacancy__cta a > span {
    white-space: nowrap;
    flex-shrink: 0;
}

.pd-vacancy__btn-set a > span:first-child,
.pd-vacancy__cta a > span:first-child {
    font-size: 15px !important;
}

@media (max-width: 767px) {
    .pd-main__contact-btn a > span:first-child,
    .pd-vacancy__btn-set a > span:first-child,
    .pd-vacancy__cta a > span:first-child {
        font-size: 13px !important;
    }
}

/* Property detail view details button nowrap */

.pd-vacancy__action-col > span {
    white-space: nowrap;
}

.pd-vacancy__action-col > span > span {
    white-space: nowrap;
    flex-shrink: 0;
}

.pd-vacancy__action-col > span > span:first-child {
    font-size: 13px !important;
}

/* Property detail view details arrow alignment */

.pd-vacancy__action-col > span > span:last-child {
    margin-left: 4px !important;
}

/* Property detail tel inline icon alignment */

.pd-main__contact-tel-label-wrap {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

.pd-main__contact-tel-icon {
    position: static;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pd-main__contact-tel-label {
    display: block;
    font-size: 13px;
    color: var(--color-gold-muted);
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

/* --- English Translation Fixes --- */

body.lang-en .pd-main__contact-btn,
body.lang-en .pd-vacancy__btn-set,
body.lang-en .pd-vacancy__cta {
    width: min(500px, 100%); /* Make container wider for English */
}

body.lang-en .pd-main__contact-btn a > span:first-child,
body.lang-en .pd-vacancy__btn-set a > span:first-child,
body.lang-en .pd-vacancy__cta a > span:first-child {
    white-space: normal; /* Allow wrapping */
    font-size: 13px !important; /* Smaller text */
    line-height: 1.2;
}

body.lang-en .pd-main__contact-flex {
    gap: 15px; /* Reduce gap if needed */
}

body.lang-en .pd-vacancy__action-col > span {
    white-space: normal;
}

body.lang-en .pd-vacancy__action-col > span > span:first-child {
    white-space: normal;
    font-size: 12px !important;
}