@charset "UTF-8";
/*
 * 物件一覧の絞り込みUI
 *
 * サイズ指定はテーマの px-vw() と同じ計算に揃えている。
 *   SP(〜768px)       : 設計幅 390  → 14px 相当 = 3.5897vw
 *   タブレット(〜1440) : 設計幅 1440 → 14px 相当 = 0.9722vw
 *   PC(1441px〜)       : 固定 px
 *
 * exclude-soldout の上書きは、既存CSSと同じ詳細度
 * （body:has(main.archive-property) div.section label.exclude-soldout）で指定している。
 * style.scss のビルド環境が未導入のため独立CSSとして分離。
 */

/* ============================================================
 * エリア行の見出し
 * ============================================================ */
.filter-group {
    margin-top: 2.22vw;
}

.filter-group__label {
    position: relative;
    display: block;
    padding-left: 0.97vw;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.9722vw;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: #121212;
}

.filter-group__label::before {
    content: "";
    position: absolute;
    top: 0.25em;
    left: 0;
    width: 0.21vw;
    height: 0.9em;
    background: #b39845;
}

.filter-group__list.taxonomy-filter {
    margin-top: 0.97vw;
}

/* ============================================================
 * 「成約済み物件を除外する」— チップと同じ文字サイズに揃える
 * ============================================================ */
body:has(main.archive-property) div.section label.exclude-soldout {
    font-size: 0.9722vw;
    margin-top: 1.94vw;
    margin-bottom: 0;
}

body:has(main.archive-property) div.section label.exclude-soldout input[type="checkbox"] {
    width: 1.25vw;
    height: 1.25vw;
}

body:has(main.archive-property) div.section label.exclude-soldout input[type="checkbox"]:checked::after {
    font-size: 1.04vw;
    line-height: 1.04vw;
}

/* ============================================================
 * 絞り込むボタン
 * チップ（ゴールドの角丸）と混同しないよう、
 * 黒の角丸長方形＋矢印にして区切り線で分けている。
 * ============================================================ */
.filter-submit {
    margin-top: 2.22vw;
    margin-bottom: 5.55vw;      /* 下の物件カードとの間隔 */
    padding-bottom: 2.22vw;
    border-bottom: 1px solid #e0ded9;
    text-align: left;
}

.filter-submit__button {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.9722vw;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.08em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.83vw;
    min-width: 20.8vw;
    padding: 1.11vw 2.77vw;
    cursor: pointer;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
    color: #fff;
    border: 1px solid #121212;
    border-radius: 0.28vw;
    background-color: #121212;
}

.filter-submit__button svg {
    flex-shrink: 0;
    width: 1.25vw;
    height: auto;
    transition: transform 0.4s ease;
}

.filter-submit__button:hover {
    color: #121212;
    border-color: #b39845;
    background-color: #b39845;
}

.filter-submit__button:hover svg {
    transform: translateX(0.28vw);
}

/* 選択を変えたあと、まだ反映していない状態 */
.filter-submit__button.is-dirty {
    border-color: #b39845;
    background-color: #b39845;
    color: #121212;
}

/* ============================================================
 * PC（1441px以上）— 固定px
 * ============================================================ */
@media screen and (min-width: 1441px) {
    .filter-group { margin-top: 32px; }

    .filter-group__label {
        padding-left: 14px;
        font-size: 14px;
    }

    .filter-group__label::before { width: 3px; }

    .filter-group__list.taxonomy-filter { margin-top: 14px; }

    body:has(main.archive-property) div.section label.exclude-soldout {
        font-size: 14px;
        margin-top: 28px;
        margin-bottom: 0;
    }

    body:has(main.archive-property) div.section label.exclude-soldout input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    body:has(main.archive-property) div.section label.exclude-soldout input[type="checkbox"]:checked::after {
        font-size: 15px;
        line-height: 15px;
    }

    .filter-submit {
        margin-top: 32px;
        margin-bottom: 80px;
        padding-bottom: 32px;
    }

    .filter-submit__button {
        font-size: 14px;
        gap: 12px;
        min-width: 300px;
        padding: 16px 40px;
        border-radius: 4px;
    }

    .filter-submit__button svg { width: 18px; }
    .filter-submit__button:hover svg { transform: translateX(4px); }
}

/* ============================================================
 * スマホ（768px以下）
 * 文字サイズは元から14px相当のため据え置き
 * ============================================================ */
@media screen and (max-width: 768px) {
    .filter-group { margin-top: 8.2vw; }

    .filter-group__label {
        padding-left: 3.58vw;
        font-size: 3.5897vw;
    }

    .filter-group__label::before { width: 0.77vw; }

    .filter-group__list.taxonomy-filter { margin-top: 3.58vw; }

    body:has(main.archive-property) div.section label.exclude-soldout {
        font-size: 3.5897vw;
        margin-top: 7.69vw;
        margin-bottom: 0;
    }

    body:has(main.archive-property) div.section label.exclude-soldout input[type="checkbox"] {
        width: 5.12vw;
        height: 5.12vw;
    }

    .filter-submit {
        margin-top: 7.69vw;
        margin-bottom: 12.3vw;
        padding-bottom: 7.69vw;
    }

    .filter-submit__button {
        font-size: 3.5897vw;
        gap: 3.07vw;
        min-width: 0;
        width: 100%;
        padding: 4.35vw 5.12vw;
        border-radius: 1.02vw;
    }

    .filter-submit__button svg { width: 4.6vw; }
    .filter-submit__button:hover svg { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .filter-submit__button svg { transition: none; }
}

/* ============================================================
 * 追加分（後勝ちにするためファイル末尾に置く）
 * ============================================================ */

/* 最初の行は元の .taxonomy-filter と同じ上余白にする */
.filter-group:first-of-type {
    margin-top: 2.7777vw;
}

/* ===== 絞り込む条件の表示 ===== */
.filter-summary {
    margin: 0 0 1.11vw;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.9722vw;
    line-height: 1.8;
    letter-spacing: 0.06em;
    color: #121212;
}

.filter-summary__label {
    display: inline-block;
    margin-right: 0.83vw;
    padding: 0.28vw 0.9vw;
    font-size: 0.83vw;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #fff;
    border-radius: 0.14vw;
    background: #b39845;
    vertical-align: middle;
}

.filter-summary__value {
    font-weight: 500;
    vertical-align: middle;
}

.filter-summary__value.is-empty {
    font-weight: 400;
    color: #8a8a8a;
}

@media screen and (min-width: 1441px) {
    .filter-group:first-of-type { margin-top: 40px; }

    .filter-summary {
        margin-bottom: 16px;
        font-size: 14px;
    }

    .filter-summary__label {
        margin-right: 12px;
        padding: 4px 13px;
        font-size: 12px;
        border-radius: 2px;
    }
}

@media screen and (max-width: 768px) {
    .filter-group:first-of-type { margin-top: 7.6923vw; }

    .filter-summary {
        margin-bottom: 3.58vw;
        font-size: 3.3vw;
        line-height: 1.9;
    }

    .filter-summary__label {
        display: block;
        width: fit-content;
        margin: 0 0 2.05vw;
        padding: 1.02vw 3.07vw;
        font-size: 3.07vw;
        border-radius: 0.51vw;
    }
}

/* 条件表示とボタンは右寄せ（スマホは幅いっぱいなので中央のまま） */
@media screen and (max-width: 768px) {
    .filter-submit {
        text-align: left;
    }
}

/* 何も選択していないときは条件表示を出さない */
.filter-summary.is-hidden {
    display: none;
}

/* ============================================================
 * 絞り込み全体を1つのブロックにまとめる
 *
 * 以前は白地の上にチップ・チェックボックス・ボタンが並ぶだけで、
 * どこまでが絞り込みUIなのか境界が曖昧だった。
 * 背景を敷いてパネル化し、下の物件一覧と明確に分ける。
 * ============================================================ */
#filterForm {
    margin-bottom: 5.55vw;
    padding: 3.33vw 3.33vw 2.77vw;
    background: #f5f4f0;
}

/* パネル内では最初の行の上余白は padding が担う */
#filterForm .filter-group:first-of-type {
    margin-top: 0;
}

/* パネル自体が区切りになるので、送信部の区切り線は不要 */
#filterForm .filter-submit {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

@media screen and (min-width: 1441px) {
    #filterForm {
        margin-bottom: 80px;
        padding: 48px 48px 40px;
    }
}

@media screen and (max-width: 768px) {
    #filterForm {
        margin-bottom: 12.3vw;
        padding: 7.69vw 5.12vw 6.15vw;
    }
}