@charset "UTF-8";

/* 不動産情報一覧 */

/* ナビゲーションと並び変え */
.sort_wrap{display: flex; align-items: center; justify-content: space-between; margin: 0 auto 2em;}
@media screen and (max-width:960px){
.sort_wrap{flex-direction: column; gap:1em;}
}

/* サブナビを不動産情報一覧用に調整 */
.snav.fix_estate{margin: 0; padding: 0;}
.snav.fix_estate ul.nav{border: none; padding: 0; justify-content: flex-start;}
@media screen and (max-width:960px){
.snav.fix_estate{margin: 0 auto;}
.snav.fix_estate ul.nav{display: flex; flex-wrap: wrap; gap:0.5em 0; font-size: min(4vw,100%);}
.snav.fix_estate ul.nav>li{border: none; display: flex; width: 50%;/*カテゴリの数に応じて調整*/ padding: 0; min-height: 3em; line-height: 1.2;}
.snav.fix_estate ul.nav>li>a{ display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1em; margin: 0; border-radius: 1.6em; width: 100%; height: 100%;}
.snav.fix_estate ul.nav>li>a:after{display: none;}
}

/* 並び変え */
.sort form{display: flex; align-items: center;}
.sort_heading{font-weight: var(--fw-medium); margin: 0 0.5em 0 0;}
.sort_item+.sort_item{margin-left: 1em;}
.sort_item select{margin: 0;}
.sort_item a{display: inline-flex; align-items: center; justify-content: center; gap:0.3em; text-decoration: none; color: var(--color-text); font-weight: var(--fw-medium); color:var(--color-grey);}
.sort_item a:hover{color:var(--color-black);}
.sort_item a.current{font-weight: var(--fw-bold); color:var(--color-black);}
.sort_item a.current:hover{color:var(--color-grey);}
.sort_item .icons{display: flex; flex-direction: column; gap:0.2em; line-height: 1;}
.sort_item .icons i{color: #ccc;}
.sort_item .icons i+i{margin-top: -1em;}
.sort_item a.asc .icons i.fa-sort-up,
.sort_item a.desc .icons i.fa-sort-down{color: var(--color-estate);}

/* 物件一覧リスト */
ul.estate_index {	display: flex; flex-direction: column; line-height: 1.6;}

ul.estate_index>li{border: 1px solid rgba(0,0,0,0.8); display: flex; flex-wrap: wrap; column-gap: 2em; padding: 2em;}
ul.estate_index>li+li{margin-top: -1px;}

ul.estate_index header{width: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0 0 1em;}

ul.estate_index header .meta{display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.7em; margin: 0 0 0.5em;}

ul.estate_index header .heading{margin: 0; font-size: 160%;}

ul.estate_index header div:has(.heading){max-width: 70%;}
ul.estate_index header .aside{display: flex; flex-wrap: wrap; gap:1em; font-size: 130%;}
ul.estate_index header .aside .data_item{display: flex; gap:0.5em;}

ul.estate_index .image{width: 20em; display: flex; gap:0.5em; justify-content: center;}
ul.estate_index .image>*{flex: 1; max-width: 70%;}
ul.estate_index .image img{width: 100%; aspect-ratio: 1/1; object-fit: cover;}

ul.estate_index .text{flex: 1; display: flex; gap:0 1em; font-size: 90%;}

ul.estate_index .data1,
ul.estate_index .data2{display: flex; flex-direction: column; gap:1em;}
ul.estate_index .data1{width: 10em;}
ul.estate_index .data2{flex: 1;}

ul.estate_index .data_item .head{font-weight: var(--fw-bold);}
ul.estate_index .data_item p{margin: 0;}

ul.estate_index .button_wrap{width: 12em; display: flex; flex-direction: column; gap:1em;}
ul.estate_index .button_wrap .button{width: 100%; padding-left: 1em; padding-right: 1em;}

@media screen and (max-width:960px){

ul.estate_index>li{flex-direction: column; padding: 1.5em 1em 2.5em;}

ul.estate_index header{flex-direction: column; row-gap: 0.5em;}

ul.estate_index header .heading{font-size: 130%;}

ul.estate_index header div:has(.heading){ max-width: initial; width: 100%;}
ul.estate_index header .aside{font-size: 110%; align-self: flex-end;}

ul.estate_index .image{width: 100%; margin: 0 0 1em;}

ul.estate_index .text{ flex-direction: column; gap:1em;}

ul.estate_index .data1{width: 100%; flex-direction: row; gap:0.5em;}
ul.estate_index .data1>*{flex: 1;}

ul.estate_index .button_wrap{width: min(80%,20em); margin: 2em auto 0;}
}

/* ページャー */
nav.pager{display: flex; align-items: center; justify-content: space-between; width: min(100%,600px); margin: 4em auto; position: relative;}
nav.pager:before{position: absolute; z-index: -1; top: 50%; left: 0; height: 1px; width: 100%; display: block; content: ""; background: color-mix(in srgb, rgba(0,0,0,0.8), transparent 50%);}

nav.pager .select_page{position: relative;}
nav.pager .select_page:before{font-family: "af", sans-serif; content: "PAGE"; position: absolute; top: -1.3rem; font-size: 80%; font-weight: 500; color: var(--color-text);}
nav.pager select{min-width: 6em; height: 3em; text-align: center; font-weight: var(--fw-bold);}

nav.pager .prev a,
nav.pager .next a{min-width: 8em; height: 3em; display: inline-flex; align-items: center; justify-content: center; gap:1em; background: var(--color-black); color: #fff; padding: 0 1em; text-decoration: none; border-radius: 1.7em; transition: 0.2s background;}
nav.pager .prev a:hover,
nav.pager .next a:hover{background: color-mix(in srgb, #000, #fff 20%);}

nav.pager .prev a:before,
nav.pager .next a:after{font-family: "Font Awesome 6 Free"; font-weight: 600; content: "\f177"; display:inline-block;}
nav.pager .next a:after{content: "\f178";}

nav.pager a.disabled{background: #ccc; color:rgba(255,255,255,0.6); pointer-events: none;}
@media screen and (max-width:960px){
nav.pager .prev a,
nav.pager .next a{min-width: 6em;}
}

/* 物件詳細 */
article.estate header{position: relative;}
article.estate header .aside{position: absolute; top: 0; right: 0; display: flex; flex-wrap: wrap; gap:1em; font-size: 130%; line-height: 1.4;}
article.estate header .aside .data_item{display: flex; gap:0.5em;}

article.estate .fv_data_button{display: flex; flex-wrap: wrap; column-gap: 2em; padding: 2em 0 0; margin: 2em 0 4em; border-top: 1px solid rgba(0,0,0,0.2);}

article.estate .fv_data_group{flex: 1; display: flex; gap:0 1em;}

article.estate .data1,
article.estate .data2{display: flex; flex-direction: column; gap:1em;}
article.estate .data1{width: 10em;}
article.estate .data2{flex: 1;}

article.estate .data_item .head{font-weight: var(--fw-bold);}
article.estate .data_item p{margin: 0;}

.fv_data_button .button_wrap{width: 12em; display: flex; flex-direction: column; gap:1em;}
.fv_data_button .button_wrap .button{width: 100%; padding-left: 1em; padding-right: 1em;}

article.estate table.data th{width: 12em;}
article.estate table.data td p{margin: 0;}
article.estate table.data tr:has(td:empty) { display: none;}

article.estate .hako.CTA{margin: 3em auto;}
article.estate .hako.CTA .text-text{row-gap: 2em;}
article.estate .hako.CTA ul.check{font-size: 120%;}

article.estate .note{padding: 1.5em 2em; margin: 1em auto; border: 1px solid rgba(0,0,0,0.2);}
article.estate .note>.heading:first-child{font-size: 120%; margin-bottom: 0.3em;}
article.estate .note>*:last-child{margin-bottom: 0;}

@media screen and (max-width:960px){

article.estate header{display: flex; flex-direction: column; row-gap: 1em;}
article.estate header .heading{font-size: 145%; }
article.estate header .aside{position: relative; top: auto; right: auto; font-size: 120%; align-self: flex-end;}

article.estate .fv_data_button{ flex-direction: column;}

article.estate .fv_data_group{ flex-direction: column; gap:1em;}

article.estate .data1{width: 100%; flex-direction: row; gap:0.5em;}
article.estate .data1>*{flex: 1;}

.fv_data_button .button_wrap{width: min(80%,20em); margin: 2em auto 0;}

article.estate table.data:not(.hold){margin: 1em auto;}
article.estate table.data:not(.hold) > tbody > tr > th{padding: 0.3em 0.5em;}
article.estate table.data:not(.hold) > tbody > tr > td{padding: 0.3em 0 1em;}

.article.estate .note{padding-left: 1em; padding-right: 1em;}
}

/* 不動産の画像スライダーとサムネイル */
.slider_wrap:has(.estate_slider){margin: 2em auto;}
.estate_slider{background: var(--bg);}
.estate_slider .image{width: 100%; height: auto; display: flex; align-items: center; justify-content: center; position: relative; container-type: inline-size;}
.estate_slider .image img{/*width: 100%;*/ max-height:666px; object-fit: contain;}
.estate_thumb{margin: 0.5em auto 0;}
.estate_thumb .slick-track{margin: auto;}
.estate_thumb .slick-slide{position: relative; border: none; padding: 0.5em; cursor: pointer; opacity: 0.6; filter: saturate(0%) contrast(120%); transition: 0.2s opacity ,0.2s filter;}
.estate_thumb .slick-slide:not(.slick-current):hover{opacity: 1; filter: saturate(100%) contrast(100%);}
.estate_thumb .slick-current{opacity: 1; filter: saturate(100%) contrast(100%);}
.estate_thumb .slick-current:before{content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 100; top: 0; left:0; border: 2px solid #000;}
.estate_thumb .image{width: 100%; height: auto; aspect-ratio:3/2;}
.estate_thumb .image img{width: 100%; height: 100%; object-fit: cover; }
@media screen and (max-width:960px) and (orientation: landscape){
.estate_slider .image img{width: 80%; max-height:53.3cqw;}
}
@media screen and (max-width:960px) and (orientation: portrait){
.estate_slider .image img{max-height:100cqw;}
}

/* 施工事例スライダーのキャプション */
.estate_caption{/*display: none !important;*/ margin: 1em auto 0;}
.estate_caption .caption{text-align: left; display: flex; flex-direction: column; align-items: center;}
.estate_caption .caption p{margin: 0;}
@media screen and (max-width:960px) and (orientation: portrait){
.estate_caption{display: block !important;}
}
/* PC用に複製したキャプション */
/* .estate_slider .image .caption{font-size: 90%; text-align: left; position: absolute; left: 1em; bottom: 2em; width: calc(100% - 2em); display: flex; flex-direction: column; align-items: center; }
.estate_slider .image .caption p{ max-width: 40em; margin: 0; padding: 1em 2em; background: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
@media screen and (max-width:960px){
.estate_slider .image .caption{font-size: min(1.8vw,100%); left: 0; bottom: 0; width: 100%;}
.estate_slider .image .caption p{ max-width: none; padding: 1em;}
}
@media screen and (max-width:960px) and (orientation: portrait){
.estate_slider .image .caption{display: none;}
} */