/**
 * Property Detail Single Page Styles
 * File: static/css/single/property.css
 */

.p-property-detail {
    padding: 40px 0 0;
    font-family: var(--font-base);
    color: var(--text-color);
}

@media (min-width: 769px) {
    .p-property-detail {
        padding: 70px 0 20px;
        background-image: url(../../img/property/single/bg.jpg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% 100%;
    }
}

.p-property-detail__inner {
    max-width: 800px; /* Centered, focused single column for detail content */
    margin: 0 auto;
    padding: 20px 20px 0;
}

/* セールスポイント〜関連リンクまで、背景を1枚でつなげて表示するラッパー（SP） */
.p-property-detail__lower {
    margin: 0 -20px;
    padding: 60px 20px 30px;
    background-image: url(../../img/property/single/bg_sp.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
}

/* PC: ラッパー自体は表示せず、中身だけを .p-property-detail__top のグリッドに参加させる */
@media (min-width: 769px) {
    .p-property-detail__lower {
        display: contents;
    }
}

@media (min-width: 769px) {
    .p-property-detail__inner {
        max-width: 1100px;
        padding: 40px 40px 0;
    }
}

.p-property-detail__top {
    margin: 40px 0 0;
}

/* PC: 画像と詳細情報を横並びにするラッパー（DOM順に関わらず明示的に配置） */
@media (min-width: 769px) {
    .p-property-detail__top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px 40px;
        align-items: start;
        margin: 70px 0 40px;
    }

    .p-property-detail__top > .p-property-detail__slider-container,
    .p-property-detail__top > .p-property-detail__core,
    .p-property-detail__top > .c-sanketa-banner,
    .p-property-detail__top > .c-contact,
    .p-property-detail__top > .c-instagram-link {
        min-width: 0;
    }

    .p-property-detail__top > .p-property-detail__slider-container {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 18px;
    }

    .p-property-detail__top > .p-property-detail__core {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 18px;
    }

    .p-property-detail__top > .c-sanketa-banner {
        grid-column: 1;
        grid-row: 2;
        margin-top: 0;
        margin-bottom: 18px;
    }

    /* バナーがある場合：JSでバナーの直後（.top直下）に移動され、バナーの隣（同じ行）に配置される */
    .p-property-detail__top > .p-property-detail__sales-points {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        margin-bottom: 18px;
    }

    /* バナーが無い場合：JSで .p-property-detail__core の中（quick-specの直後）に移動されるので、
       通常の flow に乗るだけで良く、グリッド指定は不要 */
    .p-property-detail__core > .p-property-detail__sales-points {
        margin-top: 24px;
    }

    /* バナーが無い場合：2行目が完全に空くと、下のMAP等が自動配置でそこに詰まってお問い合わせより上に来てしまうため、
       スライダーとcoreを1〜2行目にまたがせて2行目を「使用済み」にしておく */
    .p-property-detail__top:not(:has(> .c-sanketa-banner)) > .p-property-detail__slider-container,
    .p-property-detail__top:not(:has(> .c-sanketa-banner)) > .p-property-detail__core {
        grid-row: 1 / 3;
    }

    .p-property-detail__top > .c-contact {
        grid-column: 1 / -1;
        grid-row: 3;
        max-width: none;
        margin: 0;
    }

    .p-property-detail__top > .c-instagram-link {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    /* MAP・周辺施設・各テーブル・関連リンクは2カラム分の幅いっぱいに */
    .p-property-detail__top .p-property-detail__section {
        grid-column: 1 / -1;
    }
}

/* =========================================================================
   2. Swiper Carousel Photo Slider & Thumbnails
   ========================================================================= */
.p-property-detail__slider-container {
    position: relative;
    margin-bottom: 32px;
}

@media (min-width: 769px) {
    .p-property-detail__slider-container {
        margin-bottom: 0;
    }
}

.p-property-detail__slider {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
}

.p-property-detail__slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Swiper navigation buttons */
.p-property-detail__slider-prev,
.p-property-detail__slider-next {
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.p-property-detail__slider-prev::after,
.p-property-detail__slider-next::after {
    font-size: 20px !important;
    font-weight: 700;
}

/* SP: 80px固定サイズにし、数が増えても2段にせず横スクロールできるようにする（p-own-detail__gallery-thumbsと同様） */
.p-property-detail__thumbnails {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    margin-top: 10px;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 769px) {
    .p-property-detail__thumbnails {
        gap: 20px;
        margin-top: 20px;
    }
}

.p-property-detail__thumbnail {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.25s ease;
}

.p-property-detail__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-property-detail__thumbnail:hover,
.p-property-detail__thumbnail.is-active {
    opacity: 1;
}

/* PC: 110pxの固定サイズに拡大 */
@media (min-width: 769px) {
    .p-property-detail__thumbnail {
        width: 110px;
        height: 110px;
    }
}

/* =========================================================================
   3. Core Specs Section (Titles, badging, price, and loan)
   ========================================================================= */
.p-property-detail__core {
    margin-bottom: 32px;
}

.p-property-detail__badge-row {
    margin-bottom: 12px;
}

.p-property-detail__badge-outline {
    font-size: 14px;
    font-weight: 700;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    padding: 4px 14px;
    border-radius: 20px;
    display: inline-block;
}

.p-property-detail__name {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: var(--text-color);
    margin: 0 0 12px 0;
}

@media (min-width: 769px) {
    .p-property-detail__badge-outline {
        font-size: 16px;
    }
    .p-property-detail__name {
        font-size: 24px;
    }
}

/* Pricing typography */
.p-property-detail__price {
    margin-bottom: 0;
    padding-bottom: 16px;
    text-align: right;
    letter-spacing: 0.1em;
}

.p-property-detail__price .price-val {
    font-size: 32px;
    color: var(--main-color);
    letter-spacing: 0.1em;
}

@media (min-width: 769px) {
    .p-property-detail__price .price-val,
    .p-property-detail__price--rent .price-val {
        font-size: 36px;
    }
}

.p-property-detail__price .price-unit {
    font-size: 18px;
    margin-left: 4px;
}

.p-property-detail__price--rent .price-val {
    font-size: 18px;
    color: var(--text-color);
    letter-spacing: 0.1em;
}

.p-property-detail__price--rent .price-note {
    font-size: 14px;
    color: var(--text-color);
    font-weight: 500;
    letter-spacing: 0.1em;
}

/* 賃料の数字部分だけ大きく強調（例: 12万円〜15万円） */
.p-property-detail__price-num {
    font-size: 32px;
    color: var(--main-color);
    letter-spacing: 0.1em;
}

@media (min-width: 769px) {
    .p-property-detail__price--rent .price-val {
        font-size: 24px;
    }
    .p-property-detail__price-num {
        font-size: 36px;
    }
    .p-property-detail__price--rent .price-note {
        font-size: 18px;
    }
}

/* Housing Loan Sim block */
.p-property-detail__loan {
    margin-bottom: 30px;
}

.p-property-detail__loan-button {
    width: 100%;
    max-width: 440px;
    background-image: url(../../img/property/single/button.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    color: #ffffff;
    font-size: 15px;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

@media (min-width: 769px) {
    .p-property-detail__loan-button {
        font-size: 20px;
    }
}

.p-property-detail__loan-button:hover {
    opacity: 0.85;
}

.p-property-detail__loan-note {
    font-size: 14px;
    color: var(--text-color);
    margin: 10px 0 0 0;
    line-height: 1.5;
}

/* =========================================================================
   3b. Housing Loan Simulation Modal
   ========================================================================= */
.c-loan-modal {
    display: none;
    position: fixed;
    top: 58px; /* ヘッダー(.header)の高さぶん下げ、ヘッダーに被らないようにする */
    left: 0;
    right: 0;
    height: calc(100vh - 58px);
    height: calc(100dvh - 58px); /* アドレスバーの表示/非表示による高さ変動に追従 */
    z-index: 950;
}

.c-loan-modal.is-active {
    display: block;
}

.c-loan-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    padding: 0;
    cursor: pointer;
}

.c-loan-modal__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    max-height: 80dvh; /* アドレスバーの表示/非表示による高さ変動に追従 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 10px;
    margin-inline: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}

.c-loan-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.c-loan-modal__close span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--text-color);
}

.c-loan-modal__close span:first-child {
    transform: translateY(-50%) rotate(45deg);
}

.c-loan-modal__close span:last-child {
    transform: translateY(-50%) rotate(-45deg);
}

.c-loan-modal__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 15px 30px;
    font-family: var(--font-base);
}

.c-loan-modal__title {
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin: 0;
    padding: 10px 20px;
    background-color: #F8F9FB;
    background-image: url(../../img/property/single/simulation_sp.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
}

.c-loan-modal__lead {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.8;
    margin: 0 0 24px;
}

@media (max-width: 400px) {
    .c-loan-modal__lead .sp-br {
        display: none;
    }
}

.c-loan-modal__price {
    font-size: 20px;
    color: var(--text-color);
    text-align: center;
    line-height: 1.6;
    margin: 0 0 24px;
}

.c-loan-modal__price-val {
    font-size: 30px;
    color: var(--main-color);
    letter-spacing: 0.05em;
    margin: 0 2px;
}

.c-loan-modal__field {
    max-width: 660px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-inline: auto;
    margin-bottom: 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid #DDDDDD;
}

.c-loan-modal__label {
    flex-shrink: 0;
    width: 70px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.c-loan-modal__input-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: end;
    gap: 10px;
}

.c-loan-modal__select-wrap {
    flex: 1;
    min-width: 0;
    max-width: 270px;
}

.c-loan-modal__input {
    flex: 1;
    min-width: 0;
    max-width: 200px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    background-color: #ffffff;
    font-size: 15px;
    color: var(--text-color);
}

.c-loan-modal__input-unit {
    font-size: 16px;
    color: var(--text-color);
    flex-shrink: 0;
}

.c-loan-modal__select-wrap {
    position: relative;
}

.c-loan-modal__select {
    width: 100%;
    max-width: 270px;
    height: 46px;
    padding: 0 36px 0 14px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    background-color: #ffffff;
    font-size: 15px;
    color: var(--text-color);
    appearance: none;
    cursor: pointer;
}

.c-loan-modal__select-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--text-color);
    border-width: 0 2px 2px 0;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.c-loan-modal__disclaimer {
    max-width: 660px;
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0 auto 24px;
}

.c-loan-modal__submit {
    display: block;
    width: 100%;
    max-width: 300px;
    height: 52px;
    margin: 0 auto;
    border: none;
    background-image: url(../../img/property/single/button.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    border-radius: 25px;
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.c-loan-modal__submit:hover {
    opacity: 0.85;
}

.c-loan-modal__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    margin: 16px auto;
}

.c-loan-modal__arrow-icon {
    transform: rotate(90deg);
}

.c-loan-modal__result {
    font-size: 20px;
    color: var(--text-color);
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

.c-loan-modal__result-val {
    font-size: 30px;
    color: var(--main-color);
    letter-spacing: 0.13em;
    text-decoration: underline;
    text-underline-offset: 6px;
    margin: 0 2px;
}

@media (min-width: 769px) {
    .c-loan-modal__panel {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: 1100px;
        max-height: 70vh;
        border-radius: 10px;
    }

    .c-loan-modal__body {
        padding: 16px 60px 50px;
    }

    .c-loan-modal__title {
        font-size: 28px;
        margin: 0;
        padding: 20px 60px;
        background-image: url(../../img/property/single/simulation.jpg);
        background-size: 100% 100%;
    }

    .c-loan-modal__lead {
        font-size: 16px;
        text-align: center;
    }

    .c-loan-modal__price {
        margin: 0 0 40px;
        font-size: 24px;
    }

    .c-loan-modal__price-val {
        font-size: 34px;
    }

    .c-loan-modal__result-val {
        font-size: 36px;
    }

    .c-loan-modal__field {
        padding: 0 0 20px 40px;
    }
}

/* Quick spec lines */
.p-property-detail__quick-spec {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 16px;
}

.p-property-detail__quick-spec li {
    color: var(--text-color);
    line-height: 1.6;
    letter-spacing: 0.1em;
}

.p-property-detail__quick-spec li strong {
    font-weight: 500;
}

/* =========================================================================
   4. Sanketa Reform Ads & Dynamic Contact Buttons
   ========================================================================= */
.c-sanketa-banner {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 32px;
    transition: opacity 0.3s;
}

.c-sanketa-banner:hover {
    opacity: 0.85;
}

.c-sanketa-banner__img {
    width: 100%;
    height: auto;
    display: block;
}

/* Contact CTA — sanketa-contact-cta と同じ見た目 */
.c-contact {
    max-width: 660px;
    margin: 0 auto 32px;
}

.c-contact__button {
    display: block;
    max-width: 660px;
    margin: 40px auto;
}

@media (min-width: 769px) { 
    .c-contact__button {
        margin: 0 auto;
    }
}

.c-contact__button picture,
.c-contact__button img {
    display: block;
    width: 100%;
    height: auto;
}

/* Instagram Link */
.c-instagram-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
    color: var(--text-color);
    font-size: 15px;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.3s;
}

.c-instagram-link:hover {
    opacity: 0.7;
}

.c-instagram-link__icon {
    width: 22px;
    height: 22px;
}

/* =========================================================================
   5. Sales Points (共通)
   ========================================================================= */
.p-property-detail__sales-points {
    margin: 0 -20px 32px;
    padding: 24px 20px;
}

@media (min-width: 769px) {
    .p-property-detail__sales-points {
        margin: 0 0 0;
        padding: 0;
        background-image: none;
    }
}

.p-property-detail__sales-title {
    font-size: 16px;
    color: var(--main-color);
    line-height: 1.6;
    letter-spacing: 0.15em;
    margin: 0 0 14px 0;
}

.p-property-detail__sales-list,
.p-property-detail__sales-list--repeater {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.8;
}

.p-property-detail__sales-list p {
    margin: 0 0 8px 0;
}

.p-property-detail__sales-list p:last-child {
    margin-bottom: 0;
}

.p-property-detail__sales-list--repeater {
    list-style: none;
    margin: 0;
    padding: 0;
}

.p-property-detail__sales-list--repeater li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
}

.p-property-detail__sales-list--repeater li::before {
    content: '・';
    position: absolute;
    left: 0;
}

.p-property-detail__sales-list--repeater li:last-child {
    margin-bottom: 0;
}

.p-property-detail__action {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0 50px;
}

@media (min-width: 769px) {
    .p-property-detail__action {
        margin: 20px 0 0;
    }
}

.p-property-detail__fav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 20px;
    border: none;
    background: #fff;
    border-radius: 20px;
    color: var(--text-color);
    font-size: 15px;
    letter-spacing: 0.1em;
    cursor: pointer;
}

.p-property-detail__fav-trigger .fav-icon,
.p-property-detail__fav-trigger .star-icon {
    font-size: 15px;
}

.p-property-detail__fav-trigger.is-active {
    color: var(--orange);
    font-weight: 700;
}

@media (min-width: 769px) {
    .p-property-detail__fav-trigger {
        font-size: 18px;
    }
}

/* =========================================================================
   6. Sections & Cards (Table layout)
   ========================================================================= */
.p-property-detail__section {
    margin-bottom: 60px;
}

.p-property-detail__section:last-child .p-property-detail__table-card {
    padding: 30px 20px;
}

@media (min-width: 769px) {
    .p-property-detail__section:last-child .p-property-detail__table-card {
        padding: 40px 50px;
    }
}

.p-property-detail__section-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--main-color);
    margin: 0 0 10px 0;
    letter-spacing: 0.1em;
    text-align: center;
}

@media (min-width: 769px) {
    .p-property-detail__section-title {
        font-size: 23px;
        margin: 0 0 20px 0;
    }
}

/* White Card Style Specification Tables */
.p-property-detail__table-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 8px 20px;
    overflow: hidden;
}

@media (min-width: 769px) {
    .p-property-detail__table-card {
        padding: 10px 50px;
    }
}

.p-property-detail__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.p-property-detail__table tr {
    border-bottom: 1px solid #DDDDDD;
}

.p-property-detail__table tr:last-child {
    border-bottom: none;
}

/* PC: col-flowテーブルはグリッド配置になるため、DOM上の最後の行ではなく各カラム最下段の行（.border-none）で下線を消す */
@media (min-width: 769px) {
    .p-property-detail__table tr.border-none {
        border: none;
    }

    .p-property-detail__table--col-flow tr:last-child {
        border-bottom: 1px solid #DDDDDD;
    }

    .p-property-detail__table--col-flow tr:last-child.border-none {
        border: none;
    }
}

.p-property-detail__table th {
    text-align: left;
    font-weight: 700;
    padding: 14px 0;
    width: 160px;
    vertical-align: top;
    letter-spacing: 0.12em;
}

.p-property-detail__table td {
    color: var(--text-color);
    padding: 14px 0 14px 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.12em;
}

/* PC: tr を2カラムに流し込む（行数が可変でもCSS多段組で自動的にバランスさせる） */
@media (min-width: 769px) {
    .p-property-detail__table,
    .p-property-detail__table tbody {
        display: block;
    }

    .p-property-detail__table tbody {
        column-count: 2;
        column-gap: 40px;
    }

    .p-property-detail__table.column_1 tbody {
        column-count: 1;
    }

    .p-property-detail__table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    .p-property-detail__table th,
    .p-property-detail__table td {
        display: table-cell;
        padding: 30px 0;
    }

    /* 項目数が少ないテーブル専用：左カラムを上から詰め、余った分だけ右カラムに配置する（行数は--col-flow-rowsで指定） */
    .p-property-detail__table--col-flow tbody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(var(--col-flow-rows, 2), auto);
        grid-auto-flow: column;
        column-gap: 40px;
        row-gap: 0;
    }
}

/* SP: label(th)を上、value(td)を下に縦積み（共通） */
@media (max-width: 768px) {
    .p-property-detail__table tr {
        display: flex;
        flex-direction: column;
        padding: 20px 0;
    }

    .p-property-detail__table th {
        width: auto;
        padding: 0 0 5px;
    }

    .p-property-detail__table td {
        padding: 0;
    }
}

/* Google Map Container */
.p-property-detail__map-iframe-wrapper {
    overflow: hidden;
    height: 375px;
}

@media (min-width: 769px) {
    .p-property-detail__map-iframe-wrapper {
        height: 340px;
    }
}

.p-property-detail__map-iframe-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Nearby facilities & Links list box */
.p-property-detail__facilities-list {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.8;
    letter-spacing: 0.1em;
}

.p-property-detail__facilities-list--repeater {
    max-width: 660px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.p-property-detail__facilities-list--repeater li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 5px;
}

.p-property-detail__facilities-list--repeater li::before {
    content: '・';
    position: absolute;
    left: 0;
}

.p-property-detail__links-box {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.6;
}

.p-property-detail__links-box p {
    margin: 0;
}

/* =========================================================================
   7. 自社売主物件プレミアムテンプレート専用スタイル (Prefix: .p-own-detail)
   ========================================================================= */
.p-own-detail {
    background-color: #ffffff;
    color: var(--text-color);
    font-family: var(--font-base);
    overflow-x: hidden;
}

/* Common Section Header style for Own Property template（英語タイトルのみ・以降のセクション共通） */
.p-own-detail__section-header {
    text-align: center;
    margin-bottom: 30px;
}

.p-own-detail__section-label {
    font-family: var(--font-third), sans-serif;
    font-size: 18px;
    letter-spacing: 0.05em;
    color: var(--main-color);
    display: block;
    margin-bottom: 0;
}

@media (min-width: 769px) {
    .p-own-detail__section-label {
        font-size: 24px;
    }
}

.p-own-detail__section-title {
    display: none;
}

/* Common Badge styles */
.p-own-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    display: inline-block;
    letter-spacing: 0.05em;
}

.p-own-badge--brand,
.p-own-badge--category,
.p-own-badge--area {
    background-color: #ffffff;
    color: var(--text-color);
    border: 2px solid var(--text-color);
}

/* 1. Hero Cover Section */
.p-own-detail__hero {
    position: relative;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: flex-end;
    padding: 24px 20px;
    overflow: hidden; /* クリップしてはみ出しを防ぐ */
}

@media (min-width: 769px) {
    .p-own-detail__hero {
        aspect-ratio: 21 / 9;
        padding: 40px 60px;
    }
}

.p-own-detail__hero-picture,
.p-own-detail__hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.p-own-detail__hero-img {
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.p-own-detail__hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 55%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.p-own-detail__hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.p-own-detail__hero-copy {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin: 0;
}

@media (min-width: 769px) {
    .p-own-detail__hero-copy {
        font-size: 28px;
        line-height: 1.7;
    }
}

/* 2. Core Block Section */
.p-own-detail__core {
    padding: 30px 20px;
    background-color: #ffffff;
}

@media (min-width: 769px) {
    .p-own-detail__core {
        padding: 40px 40px 60px;
    }
}

.p-own-detail__core-inner {
    max-width: 1000px;
    margin: 0 auto 40px;
}

.p-own-detail__title-price-row {
    margin-bottom: 16px;
}

@media (min-width: 769px) {
    .p-own-detail__title-price-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.p-own-detail__title-col {
    flex-grow: 1;
}

.p-own-detail__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 769px) {
    .p-own-detail__title {
        font-size: 24px;
    }
}

.p-own-detail__badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 20px;
}

.p-own-detail__price-col {
    flex-shrink: 0;
    text-align: right;
}

.p-own-detail__price {
    color: var(--main-color);
    font-weight: 700;
}

.p-own-detail__price-num {
    font-size: 32px;
    letter-spacing: 0.12em;
}

@media (min-width: 769px) {
    .p-own-detail__price-num {
        font-size: 36px;
    }
}

.p-own-detail__price-unit {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 700;
    margin-left: 4px;
}

/* Concept Box inside Core block */
.p-own-detail__concept {
    padding: 0;
}

.p-own-detail__concept-lead {
    font-size: 15px;
    font-weight: 700;
    color: var(--main-color);
    line-height: 1.7;
    margin: 0 0 16px 0;
}

@media (min-width: 769px) {
    .p-own-detail__concept-lead {
        font-size: 16px;
    }
}

.p-own-detail__concept-body {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.8;
}

.p-own-detail__concept-li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 12px;
}

.p-own-detail__concept-li:last-child {
    margin-bottom: 0;
}

.p-own-detail__concept-li::before {
    content: '・';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--text-color);
}
.p-own-detail .p-property-detail__fav-trigger {
    background: #F2F2F2;
    color: var(--text-color);
}

/* 3. POINT 01 & 4. POINT 02 Sections (Zig-zag grid Layout) */
.p-own-detail__point {
    padding: 60px 20px;
    background-color: #ffffff;
}

.p-own-detail__point-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.p-own-detail__point-grid {
    display: flex;
    flex-wrap: wrap;
}

/* .point-editorial 自体は見た目を持たず、中身(header/small-row/bullets)を point-grid に直接並べる */
.p-own-detail__point-editorial {
    display: contents;
}

.p-own-detail__point-img-large,
.p-own-detail__point-img-small-row,
.p-own-detail__point-header,
.p-own-detail__point-bullets {
    flex: 1 1 100%;
}

.p-own-detail__point-img-large {
    order: 1;
}

.p-own-detail__point-img-small-row {
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.p-own-detail__point-header {
    order: 3;
}

.p-own-detail__point-bullets {
    order: 4;
}

/* POINT 02 は写真の並びを逆に（小さい写真 → 大きい写真） */
.p-own-detail__point--02 .p-own-detail__point-img-small-row {
    order: 1;
}

.p-own-detail__point--02 .p-own-detail__point-img-large {
    order: 2;
}

@media (min-width: 769px) {
    /* PC: 大きい写真を左カラムいっぱいに、右カラムに小さい写真2枚＋見出し＋テキストを縦に並べる */
    .p-own-detail__point-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }

    .p-own-detail__point-img-large {
        grid-column: 1;
        grid-row: 1 / 4;
        height: 100%;
    }

    .p-own-detail__point-img-small-row {
        grid-column: 2;
        grid-row: 1;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .p-own-detail__point-header {
        grid-column: 2;
        grid-row: 2;
    }

    .p-own-detail__point-bullets {
        grid-column: 2;
        grid-row: 3;
    }

    /* POINT 02 は写真の並びを逆に（左カラムに小さい写真＋テキスト、右カラムに大きい写真） */
    .p-own-detail__point--02 .p-own-detail__point-img-large {
        grid-column: 2;
    }

    .p-own-detail__point--02 .p-own-detail__point-img-small-row,
    .p-own-detail__point--02 .p-own-detail__point-header,
    .p-own-detail__point--02 .p-own-detail__point-bullets {
        grid-column: 1;
    }

    .p-own-detail__point-img-large img {
        height: 100%;
    }

    .p-own-detail__point-img-small img {
        aspect-ratio: 4 / 3;
        height: auto;
    }
}

.p-own-detail__point-img-large img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.p-own-detail__point-header {
    text-align: center;
    margin: 20px 0 16px;
}

@media (min-width: 769px) {
    .p-own-detail__point-img-large img {
        aspect-ratio: 4 / 3;
    }
    .p-own-detail__point-header {
        display: flex;
        align-items: baseline;
        gap: 8px;
        text-align: left;
        white-space: nowrap;
    }
    .p-own-detail__point-num {
        margin-bottom: 0;
    }
}

.p-own-detail__point-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color);
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 4px;
}

.p-own-detail__point-sub {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color);
    margin: 0;
}

.p-own-detail__point-img-small img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.p-own-detail__point-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    line-height: 1.7;
}

@media (min-width: 769px) {
    .p-own-detail__point-bullets {
        text-align: left;
    }
}

.p-own-detail__point-bullets li {
    position: relative;
    padding-left: 16px;
}

.p-own-detail__point-bullets li::before {
    content: '・';
    position: absolute;
    left: 0;
}

/* 5. Room Plan Section */
.p-own-detail__plan {
    position: relative;
    padding: 60px 20px;
    background-color: #F8F9FB;
    background-image: url(../../img/property/single/bg_roomplan_sp.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
}

@media (min-width: 769px) {
    .p-own-detail__plan {
        padding: 80px 40px;
        background-image: url(../../img/property/single/bg_roomplan.jpg);
    }
}

/* Wavy separator top border（bg画像自体に波形が含まれるため非表示） */
.p-own-detail__plan-wave {
    display: none;
}

.p-own-detail__plan-inner {
    max-width: 800px;
    margin: 0 auto;
}

.p-own-detail__plan-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

.p-own-detail__plan-img {
    width: 100%;
    max-width: 760px;
}

.p-own-detail__plan-img img {
    width: 100%;
    height: auto;
    display: block;
}

.p-own-detail__plan-text {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.8;
}

/* 6. Carousel Photo Section */
.p-own-detail__gallery {
    padding: 70px 0;
    background-color: #ffffff;
}

@media (min-width: 769px) {
    .p-own-detail__gallery {
        padding: 90px 0 40px;
    }
}

/* Swiper Peek layout customized */
.p-own-detail__gallery-slider {
    width: 100%;
    padding: 5px 0 !important;
}

.p-own-detail__gallery-slider .swiper-slide {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.p-own-detail__gallery-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Navigation arrows */
.p-own-detail__gallery-prev,
.p-own-detail__gallery-next {
    color: #ffffff !important;
    width: 40px !important;
    height: 40px !important;
    transition: all 0.25s ease;
}

.p-own-detail__gallery-prev::after,
.p-own-detail__gallery-next::after {
    font-size: 20px !important;
}

/* PC: 両隣の画像がpeekして見えるため、矢印は中央画像の少し内側に寄せる */
@media (min-width: 1024px) {
    .p-own-detail__gallery-prev {
        left: 22%;
    }

    .p-own-detail__gallery-next {
        right: 22%;
    }
}

/* Gallery Scrolling Thumbnails underneath */
.p-own-detail__gallery-thumbs {
    max-width: 900px;
    margin: 0 auto 60px auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.p-own-detail__gallery-thumbs-inner {
    display: flex;
    gap: 5px;
    justify-content: flex-start;
}

/* PC: スライダーの中央画像（slidesPerView: 1.7）と同じ幅に揃える。数が多くても2段にせず、常に1行でスクロール可能に */
@media (min-width: 1024px) {
    .p-own-detail__gallery-thumbs {
        max-width: calc((100% - 30px) / 1.7);
    }

    .p-own-detail__gallery-thumbs-inner {
        /* 収まる枚数の時だけ中央寄せ、幅からあふれる時は自動でflex-start相当になりスクロール可能なまま */
        justify-content: safe center;
        flex-wrap: nowrap;
    }
}

.p-own-detail__gallery-thumb {
    width: 70px;
    height: 70px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    border: 2px solid transparent;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.p-own-detail__gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-own-detail__gallery-thumb:hover,
.p-own-detail__gallery-thumb.is-active {
    opacity: 1;
}

/* Contact banner: 共通の .c-contact / .c-contact__button を使用（サイト内の他ページと同じ画像ボタン） */
.p-own-detail__gallery .c-contact {
    margin-top: 24px;
    padding-inline: 20px;
}

/* 7-8. Area & Detail Specifications: share one continuous background across both sections */
.p-own-detail__area-specs-wrap {
    background-color: #F8F9FB;
    background-image: url(../../img/property/single/bg_own_sp.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
}

@media (min-width: 769px) {
    .p-own-detail__area-specs-wrap {
        background-image: url(../../img/property/single/bg_own.jpg);
    }
}

/* 7. Area Section */
.p-own-detail__area {
    padding: 80px 0 0 0;
}

.p-own-detail__area-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px 30px 20px;
}

.p-own-detail__area-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.p-own-detail__area-guide-img {
    width: 100%;
}

.p-own-detail__area-guide-img img {
    width: 100%;
    height: auto;
}

.p-own-detail__area-text {
    font-size: 16px;
    line-height: 1.8;
    max-width: 800px;
}

/* Google Map full screen width */
.p-own-detail__area-map {
    height: 375px;
    margin-inline: auto;
    padding-inline: 20px;
    overflow: hidden;
}

@media (min-width: 769px) {
    .p-own-detail__area-map {
        max-width: 1100px;
        height: 340px;
    }
}

.p-own-detail__area-map iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* 8. Detail Specifications Section */
.p-own-detail__specs {
    padding: 100px 20px;
}

.p-own-detail__specs-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.p-own-detail__specs-wide-img {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-bottom: 70px;
    overflow: hidden;
}

.p-own-detail__specs-wide-img img {
    width: 100%;
    height: 140px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

@media (min-width: 769px) {
    .p-own-detail__specs-wide-img img {
        height: 300px;
    }
}

/* Rounded specs card & table styling（p-property-detail__table-cardと同じスタイル） */
.p-own-detail__specs-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 8px 20px;
    overflow: hidden;
}

@media (min-width: 769px) {
    .p-own-detail__specs-card {
        padding: 10px 50px;
    }
}

/* p-property-detail__table と同じスタイル・同じ多段組手法 */
.p-own-detail__specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.p-own-detail__specs-table tr {
    border-bottom: 1px solid #DDDDDD;
}

.p-own-detail__specs-table tr:last-child {
    border-bottom: none;
}

/* PC: col-flowテーブルはグリッド配置になるため、DOM上の最後の行ではなく各カラム最下段の行（.border-none）で下線を消す */
@media (min-width: 769px) {
    .p-own-detail__specs-table tr.border-none {
        border: none;
    }

    .p-own-detail__specs-table--col-flow tr:last-child {
        border-bottom: 1px solid #DDDDDD;
    }

    .p-own-detail__specs-table--col-flow tr:last-child.border-none {
        border: none;
    }
}

.p-own-detail__specs-table th {
    text-align: left;
    font-weight: 700;
    padding: 14px 0;
    width: 160px;
    letter-spacing: 0.12em;
    color: var(--text-color);
}

.p-own-detail__specs-table td {
    color: var(--text-color);
    padding: 14px 0 14px 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.12em;
}

/* PC: tr を2カラムに流し込む（行数が可変でもCSS多段組で自動的にバランスさせる） */
@media (min-width: 769px) {
    .p-own-detail__specs-table,
    .p-own-detail__specs-table tbody {
        display: block;
    }

    .p-own-detail__specs-table tbody {
        column-count: 2;
        column-gap: 40px;
    }

    .p-own-detail__specs-table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    .p-own-detail__specs-table th,
    .p-own-detail__specs-table td {
        display: table-cell;
        padding: 30px 0;
    }

    /* 項目数が少ないテーブル専用：左カラムを上から詰め、余った分だけ右カラムに配置する（行数は--col-flow-rowsで指定） */
    .p-own-detail__specs-table--col-flow tbody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(var(--col-flow-rows, 2), auto);
        grid-auto-flow: column;
        column-gap: 40px;
        row-gap: 0;
    }
}

/* SP: label(th)を上、value(td)を下に縦積み（共通） */
@media (max-width: 768px) {
    .p-own-detail__specs-table tr {
        display: flex;
        flex-direction: column;
        padding: 20px 0;
    }

    .p-own-detail__specs-table th {
        width: auto;
        padding: 0 0 5px;
    }

    .p-own-detail__specs-table td {
        padding: 0;
    }
}

/* 9. Contact / Footer Section */
.p-own-detail__contact {
    padding: 100px 20px;
    background-color: #F8F9FB;
    background-image: url(../../img/property/single/bg_own_sp.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    text-align: center;
}

@media (min-width: 769px) {
    .p-own-detail__contact {
        background-image: url(../../img/property/single/bg_own.jpg);
    }
}

.p-own-detail__contact-inner {
    max-width: 600px;
    margin: 0 auto;
}

.p-own-detail__contact-title {
    font-size: 26px;
    font-weight: 700;
    color: #1e3a8a;
    letter-spacing: 0.1em;
    margin: 0 0 4px 0;
}

.p-own-detail__contact-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #94a3b8;
    display: block;
    margin-bottom: 24px;
}

.p-own-detail__contact-lead {
    font-size: 14px;
    color: #475569;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
}

.p-own-detail__contact-tel-block {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 0 10px;
}

.p-own-detail__contact-tel-block .tel-label {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1e3a8a;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 2;
}

.p-own-detail__contact-tel-block .tel-number {
    font-family: 'Outfit', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #1e3a8a;
    text-decoration: none;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 2;
    transition: color 0.25s ease;
}

@media (min-width: 768px) {
    .p-own-detail__contact-tel-block .tel-number {
        font-size: 46px;
    }
}

.p-own-detail__contact-tel-block .tel-number:hover {
    color: #1d4ed8;
}

/* Beautiful blue marker overlay underneath phone number */
.p-own-detail__contact-tel-block .tel-marker {
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 10px;
    background-color: rgba(147, 197, 253, 0.45); /* soft elegant blue hand-drawn highlight */
    border-radius: 4px;
    z-index: 1;
}