@charset 'utf-8';


/*========== 条件選択 ==========*/
.list_accordion_content { padding: 20px 0 40px; }
.list_accordion_wrap { border: 1px solid #B4B4B4; border-radius: 8px; }
/*----- header -----*/
.list_accordion_header { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; padding: 8px 0; margin: 0 auto; }
.list_accordion_header .list_accordion_icon { position: relative; display: block; width: 12px; aspect-ratio: 1 / 1; }
.list_accordion_header .list_accordion_icon img { position: absolute; top: 0; bottom: 0; right: 0; left: 0; transition: all .3s ease; }
.list_accordion_header .list_accordion_icon img:last-child { transform: rotate(180deg); }
.list_accordion_wrap.is_open .list_accordion_icon img:last-child { transform:rotate(0deg); }
/* open */
.list_accordion_wrap.is_open .list_accordion_icon img:first-child { opacity:0; transform:rotate(-180deg); }
/*----- panel -----*/
.list_accordion_panel { max-height: 0; padding: 0 16px; border-top: 1px solid #B4B4B4; overflow: hidden; opacity: 0; transition: all .3s ease; transition: all .3s ease; }
.list_accordion_panel .list_searcher { display: flex; flex-direction: column; gap: 20px; width: fit-content; margin: 0 auto; }
.list_accordion_panel .list_searcher .list_searcher_block { display: flex; flex-wrap: wrap; gap: 20px; width: fit-content; }
.list_accordion_panel dl { display: flex; align-items: center; gap: 8px; line-height: 1em; font-weight: 700; }
.list_accordion_panel dl .checkbox_label { gap: 8px; }
.list_accordion_panel dd { display: flex; align-items: center; gap: 4px; color: #B4B4B4; }
.list_accordion_panel dd .select_stepper_label { position: relative; display: flex; justify-content: space-between; border: 1px solid #000; }
.list_accordion_panel dd .select_stepper_label .select_stepper { width: 110px; padding: 6px 8px; }
.list_accordion_panel dd .select_stepper_label .select_stepper.is_placeholder{ color:#B4B4B4; }
.list_accordion_panel dd .select_stepper_label .down_arrow { position: absolute; top: 0; bottom: 0; right: 8px; margin: auto; transform: rotate(90deg); opacity: 0.35; z-index: -1; }
.list_accordion_panel dl .checkbox_label a { position: relative; }
.list_accordion_panel dl .checkbox_label a::after { content: ''; position: absolute; bottom: -4px; right: 0; left: 0; height: 1px; background: #000; }
/* open */
.list_accordion_wrap.is_open .list_accordion_panel { max-height: none; padding: 16px; opacity: 1; }
/* hover */
.list_accordion_panel dl .checkbox_label a:hover { opacity: 0.5; }
.list_accordion_panel dl .checkbox_label a:hover::after { opacity: 0; }
/*----- result -----*/
.result_sec { position: sticky; bottom: 0; display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin-top: 20px; }
.result_sec .button { width: 160px; height: 40px; padding-right: 14px; margin: 0; }
.result_sec .button_arrow { right: 8px; }
.result_sec .button:hover .button_arrow { right: 8px; }

@media screen and (min-width: 768px) {
    .list_accordion_content { padding: 40px 0 80px; }
    /*----- panel -----*/
    .list_accordion_panel { padding: 0 20px; }
    /* open */
    .list_accordion_wrap.is_open .list_accordion_panel { padding: 20px 20px; }
    /*----- result -----*/
    .result_sec { align-items: center; gap: 40px; margin-top: 40px; }
    .result_sec .button { width: 360px; height: 80px; padding-right: 0; font-size: 18px; }
    .result_sec .button_arrow { right: 32px; }
    .result_sec .button:hover .button_arrow { right: 24px; }
}

@media screen and (min-width: 1330px) {
    /*----- panel -----*/
    .list_accordion_panel .list_searcher { flex-direction: row; }
    .list_accordion_panel .list_searcher .list_searcher_block { align-items: end; }
    .list_accordion_panel dl { flex-direction: column; align-items: start; }
    .list_accordion_panel dl .checkbox_label { padding-bottom: 5.5px; }
    /* open */
    .list_accordion_wrap.is_open .list_accordion_panel { padding: 40px 20px; }
}



/*========== 件数・並び替え・ページネーション ==========*/
/*----- top -----*/
.list_top_left { display: flex; justify-content: space-between; align-items: end; }
.list_top_left .sort_form { position: relative; display: flex; justify-content: space-between; width: fit-content; border: 1px solid #000; font-size: 14px; line-height: 1em; }
.list_top_left .sort_form select { width: 120px; padding: 6px 8px; }
.list_top_left .sort_form .down_arrow { position: absolute; top: 0; bottom: 0; right: 8px; margin: auto; transform: rotate(90deg); opacity: 0.35; z-index: -1; }
/*----- bottom -----*/
.list_bottom_wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.list_bottom_left .result { justify-content: center; }
.list_bottom_right { display: flex; justify-content: center; align-items: center; gap: 20px; }
.link_prev,.link_next { display: flex; align-items: center; gap: 8px; }
.link_prev { flex-direction: row-reverse; }
.link_prev img, .link_next img { width: 8px; } 
.link_prev img { transform: rotate(180deg); }
.link_prev.is_disabled,.link_next.is_disabled { opacity: 0.2; pointer-events: none; }
/*----- pagination -----*/
.pagination_link { padding: 0.2em 0.3em; color: #D6C6AE; letter-spacing: 0; }
.pagination_link.is_current { background: #F7F4E6; border-radius: 2px; pointer-events: none; }
.pagination_ellipsis { padding: 0.1em; margin: 0 -0.3em; color: #D6C6AE; line-height: 0.5em; vertical-align: 0.25em; }

@media screen and (min-width: 768px) {
    /*----- top -----*/
    .list_top_wrap { display: flex; justify-content: space-between; align-items: end; }
    .list_top_left { justify-content: left; gap: 20px; }
    .list_top_left .sort_form { font-size: 16px; }
    .list_top_right { display: flex; align-items: center; gap: 20px; }
    /*----- bottom -----*/
    .list_bottom_wrap { flex-direction: row; justify-content: space-between; align-items: end; }
}


/*========== 一覧 ==========*/
.card_wrap { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; padding: 20px 0; }
.card_wrap li { min-width: 100%; }
.card_wrap li .property_card { width: 100%; height: 100%; }
@media screen and (min-width:600px) {
    .card_wrap li { width: calc(calc(100% - 20px)/2); min-width: 0; }
}
@media screen and (min-width:1025px) {
    .card_wrap { gap: 40px; }
    .card_wrap li { width: calc(calc(100% - 80px)/3); }
}