/* 利用者向け 物件一覧（リスト/サイドバー用スタイル）
   メインのアクセント色は参照サイト(テンポスマート)とは異なる緑(#66AB6B)を使用し、印象を差別化。
   ページネーションの Active のみログインボタンと同じコーラル(#FF8789)で強調する。 */

:root {
    --prop-list-theme: #66ab6b;
    --prop-list-theme-dark: #57965c;
    --prop-list-active: #ff8789;
    --prop-list-active-dark: #f56264;
    --prop-list-border: #e3e6e8;
    --prop-list-muted: #6b7280;
    --prop-list-bg-soft: #f4f8f5;
}

/* ===== レイアウト（サイドバー + 本体） ===== */
.p-prop-list {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.p-prop-list__side {
    flex: 0 0 260px;
    width: 260px;
}

.p-prop-list__main {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 991px) {
    .p-prop-list {
        flex-direction: column;
    }
    .p-prop-list__side {
        flex-basis: auto;
        width: 100%;
    }
}

/* ===== サイドバー ===== */
.p-prop-side__save {
    width: 100%;
    border: 1px solid var(--prop-list-theme);
    color: var(--prop-list-theme);
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    font-weight: 700;
    text-align: center;
    display: block;
    margin-bottom: 16px;
    text-decoration: none;
}
.p-prop-side__save:hover {
    background: var(--prop-list-theme);
    color: #fff;
}

.p-prop-side__block {
    border: 1px solid var(--prop-list-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #fff;
}
.p-prop-side__head {
    background: var(--prop-list-bg-soft);
    padding: 8px 12px;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid var(--prop-list-border);
}
.p-prop-side__body {
    padding: 12px;
}
.p-prop-side__range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.p-prop-side__range input {
    width: 100%;
    min-width: 0;
}
.p-prop-side__unit {
    color: var(--prop-list-muted);
    font-size: 13px;
    white-space: nowrap;
}
.p-prop-side__check {
    display: block;
    margin-top: 8px;
    font-size: 13px;
}
.p-prop-side__radios label,
.p-prop-side__checks label {
    display: block;
    padding: 4px 0;
    font-size: 14px;
    cursor: pointer;
}
.p-prop-side__floor {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.p-prop-side__floor label {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
    border: 1px solid var(--prop-list-border);
    border-radius: 6px;
    padding: 8px 0;
    font-size: 14px;
    cursor: pointer;
}
.p-prop-side__floor input {
    margin-right: 4px;
}
/* エリア（地域 / 路線・駅 を選ぶ） */
.p-prop-side__sublabel {
    font-size: 13px;
    margin: 0 0 6px;
    color: #333;
}
.p-prop-side__areabtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--prop-list-theme);
    color: #fff;
    border-radius: 8px;
    padding: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}
.p-prop-side__areabtn:hover {
    background: var(--prop-list-theme-dark);
    color: #fff;
}
.p-prop-side__areadiv {
    border: none;
    border-top: 1px solid var(--prop-list-theme);
    margin: 14px 0;
}

/* 詳細条件 見出し帯 */
.p-prop-side__section-head {
    background: #8cc63f;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    padding: 8px;
    border-radius: 6px;
    margin: 18px 0 10px;
}

/* アコーディオン（現況 / 可能用途） */
.p-prop-side__acc {
    margin-bottom: 8px;
}
.p-prop-side__acc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eceef0;
    border-left: 4px solid var(--prop-list-theme);
    border-radius: 4px;
    padding: 8px 10px;
}
.p-prop-side__acc-head label {
    font-weight: 700;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    flex: 1 1 auto;
}
.p-prop-side__acc-toggle {
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    padding: 0 2px;
}
.p-prop-side__acc-body {
    border: 1px solid var(--prop-list-border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 8px 12px;
}
.p-prop-side__acc-body label {
    display: block;
    font-size: 14px;
    padding: 4px 0;
    cursor: pointer;
}
.p-prop-side__acc-body input,
.p-prop-side__acc-head input {
    margin-right: 6px;
}

.p-prop-side__submit {
    width: 100%;
    background: var(--prop-list-active);
    border: none;
    color: #fff;
    border-radius: 8px;
    padding: 12px;
    font-weight: 700;
    cursor: pointer;
}
.p-prop-side__submit:hover {
    background: var(--prop-list-active-dark);
}
.p-prop-side__reset {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 13px;
    color: var(--prop-list-muted);
}

/* ===== 一覧見出し（何の一覧かを明示） ===== */
.p-prop-listtitle {
    margin-bottom: 12px;
}
.p-prop-listtitle__heading {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin: 0;
}
.p-prop-listtitle__note {
    font-size: 13px;
    color: var(--prop-list-muted);
    margin: 4px 0 0;
}

/* ===== ツールバー ===== */
.p-prop-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 2px solid var(--prop-list-theme);
    margin-bottom: 16px;
}
.p-prop-toolbar__count {
    font-weight: 700;
}
.p-prop-toolbar__count strong {
    color: var(--prop-list-theme);
    font-size: 20px;
    margin: 0 4px;
}
.p-prop-toolbar__spacer {
    margin-left: auto;
}
.p-prop-toolbar__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.p-prop-toolbar__controls label {
    font-size: 13px;
    color: var(--prop-list-muted);
    margin-right: 4px;
}
.p-prop-toolbar__glossary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--prop-list-theme);
    color: var(--prop-list-theme);
    background: #fff;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.p-prop-toolbar__glossary:hover {
    background: var(--prop-list-theme);
    color: #fff;
}

/* ===== 一括操作バー ===== */
.p-prop-bulk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--prop-list-bg-soft);
    border: 1px solid var(--prop-list-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.p-prop-bulk__count {
    font-size: 13px;
    color: var(--prop-list-muted);
}
.p-prop-bulk__btn {
    border: 1px solid var(--prop-list-theme);
    background: #fff;
    color: var(--prop-list-theme);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.p-prop-bulk__btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ===== 一覧ヘッダー（一括バー＋上部ページネーション） ===== */
.p-prop-listhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.p-prop-listhead .p-prop-bulk {
    margin-bottom: 0;
    flex: 1 1 auto;
}
/* 上部ページネーションは右寄せ（一括バーが無いゲスト時も右に配置） */
.p-prop-pager--top {
    margin-left: auto;
}
.p-prop-pager--top .pagination {
    margin-bottom: 0;
}

/* ページネーション配色（ログインと同じコーラルで統一 / 通常＝白地・ピンク文字） */
.p-prop-pager .pagination {
    margin-bottom: 0;
}
.p-prop-pager .page-item > * {
    background: #fff;
    color: var(--prop-list-active);
    border: 1px solid var(--prop-list-active);
    font-weight: 700;
}
.p-prop-pager .page-item > *:hover {
    background: #fff0f1;
}
.p-prop-pager .page-item.active > *,
.p-prop-pager .page-item.active > *:hover {
    background: var(--prop-list-active);
    border-color: var(--prop-list-active);
    color: #fff;
}
.p-prop-pager .page-item.disabled > * {
    background: #fff;
    color: var(--prop-list-muted);
    border-color: var(--prop-list-border);
}

/* ===== カード ===== */
.p-prop-card {
    display: flex;
    border: 1px solid var(--prop-list-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
}
.p-prop-card__select {
    flex: 0 0 36px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14px;
}
.p-prop-card__media {
    flex: 0 0 220px;
    position: relative;
    background: var(--prop-list-bg-soft);
}
.p-prop-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.p-prop-card__noimage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 170px;
    color: var(--prop-list-muted);
}
.p-prop-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #e8533a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
}
.p-prop-card__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}
.p-prop-card__title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    text-decoration: none;
    margin-bottom: 8px;
    display: inline-block;
}
.p-prop-card__title:hover {
    color: var(--prop-list-theme);
    text-decoration: underline;
}
.p-prop-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 10px;
}
.p-prop-card__rent {
    color: var(--prop-list-theme);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}
.p-prop-card__rent-suffix {
    font-size: 13px;
    color: var(--prop-list-muted);
}
.p-prop-card__tsubo {
    font-size: 13px;
    color: var(--prop-list-muted);
}
.p-prop-card__tsubo strong {
    color: #333;
    font-size: 15px;
}
.p-prop-card__spec {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 12px;
}
.p-prop-card__spec th,
.p-prop-card__spec td {
    border: 1px solid var(--prop-list-border);
    padding: 5px 8px;
    text-align: left;
    vertical-align: top;
}
.p-prop-card__spec th {
    background: var(--prop-list-bg-soft);
    width: 84px;
    font-weight: 700;
    white-space: nowrap;
}
.p-prop-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.p-prop-card__btn {
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--prop-list-theme);
}
.p-prop-card__btn--fav {
    background: #fff;
    color: var(--prop-list-theme);
}
.p-prop-card__btn--fav.is-active {
    background: #fff0f1;
    border-color: #e8533a;
    color: #e8533a;
}
.p-prop-card__btn--inquiry {
    background: var(--prop-list-theme);
    border-color: var(--prop-list-theme);
    color: #fff;
}
.p-prop-card__btn--inquiry:hover {
    background: var(--prop-list-theme-dark);
}
.p-prop-card__btn--detail {
    background: #fff;
    color: var(--prop-list-theme);
}
.p-prop-card__btn--detail:hover,
.p-prop-card__btn--fav:hover {
    background: var(--prop-list-bg-soft);
}

@media (max-width: 575px) {
    .p-prop-card {
        position: relative;
        flex-direction: column;
    }
    .p-prop-card__media {
        flex-basis: auto;
        height: 180px;
    }
    .p-prop-card__select {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
    }
}