/*==================================
施工事例一覧・詳細 共通
==================================*/


/* ページタイトル */

.img2-section{

height:320px;

display:flex;

align-items:center;

justify-content:center;

background:
linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.45)
),
url("../images/archive_bg.jpg");

background-size:cover;

background-position:center;

}


.img2-section h1{

color:#fff;

font-size:42px;

font-weight:700;

letter-spacing:.15em;

}



/*==================================
一覧ページ
==================================*/


.results-list{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:40px;

margin-top:60px;

}



.results-item{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

transition:.4s;

}



.results-item:hover{

transform:translateY(-8px);

box-shadow:

0 15px 40px rgba(0,0,0,.15);

}



/* 画像 */

.results-item .property-swiper{

height:260px;

overflow:hidden;

}



.results-item img{

width:100%;

height:260px;

object-fit:cover;

}




/* swiper */

.property-swiper .swiper-button-next,
.property-swiper .swiper-button-prev{

width:35px;

height:35px;

background:rgba(0,0,0,.35);

color:#fff;

}


.property-swiper 
.swiper-button-next::after,
.property-swiper 
.swiper-button-prev::after{

font-size:15px;

}



.swiper-pagination-bullet-active{

background:#1d3557;

}




/* タイトル */


.results-item h2{

font-size:15px;

padding:10px 25px 10px;

line-height:1.5;

height: 90px;

}




/*カテゴリー*/

.results-category-buttons{

padding:0 25px;

}



.results-category-btn{

display:inline-block;

padding:5px 14px;

border-radius:30px;

font-size:13px;

color:#fff;

margin-right:5px;

}




/*情報*/

.results-item p{

padding:0 25px;

margin:5px 0;

font-size:13px;

line-height:1.7;

}



.results-more{

display:block;

margin:25px;

padding:13px;

text-align:center;

background:#1a1f24;

color:#fff;

border-radius:10px;

font-weight:700;

transition:.3s;

}



.results-more:hover{

background:#274c77;

}




/*==================================
検索
==================================*/


.results-search-form{

margin-bottom:50px;

}



.search-box{

display:flex;

justify-content:center;

gap:15px;

}



.search-select{

padding:12px 20px;

border:1px solid #00c65f;

border-radius:10px;

min-width:260px;

}



.search-button{

padding:12px 35px;

border:none;

border-radius:30px;

background:#1a1f24;

color:#fff;

font-weight:bold;

cursor:pointer;

}





/*==================================
ページネーション
==================================*/


.pagination{

margin:60px auto;

text-align:center;

}



.pagination a,
.pagination span{

display:inline-flex;

align-items:center;

justify-content:center;

width:45px;

height:45px;

border-radius:50%;

background:#eee;

margin:5px;

}



.pagination .current{

background:#1d3557;

color:#fff;

}





/*==================================
詳細ページ
==================================*/


.white-section{

padding:100px 0;

}



.white-section h1{

font-size:36px;

margin-bottom:30px;

}




.property-swiper{

max-width:900px;

margin:40px auto;

height:600px;

}




.property-swiper img{

width:100%;

height:100%;

object-fit:cover;

}




.results-category-buttons{

margin-bottom: 10px;

}




.property-description{

margin-top:40px;

font-size:17px;

line-height:2;

}





.navigation-buttons{

display:flex;

justify-content:center;

gap:20px;

margin:50px 0;

}



.navigation-buttons a,
.back-button{


padding:15px 35px;

border-radius:50px;

background:#1d3557;

color:#fff;

font-weight:bold;

transition:.3s;

}



.navigation-buttons a:hover,
.back-button:hover{

transform:translateY(-3px);

opacity:.85;

}




.back-to-list{

text-align:center;

}

/*==================================
タブレット
==================================*/

@media (max-width: 1024px) {
    .results-item h2 {
        font-size: 12px;
    }
}



/*==================================
スマホ
==================================*/


@media(max-width:768px){



.img2-section{

height:220px;

}



.img2-section h1{

font-size:28px;

}



.results-list{

grid-template-columns:1fr;

gap:30px;

}



.results-item h2{
font-size: 17px;
line-height: 1.2;

}

.results-content h2{
font-size:18px;

}



.search-box{

flex-direction:column;

align-items:center;

}



.search-select{

width:100%;

}



.property-swiper{

height:300px;

}



.white-section{

padding:60px 0;

}



.white-section h1{

font-size:18px;
line-height: 1.2;

}



.navigation-buttons{

flex-direction:column;

}



.navigation-buttons a,
.back-button{

width:100%;

text-align:center;

}

.results-image{
display:block;
width:100%;
height:260px;
object-fit:cover;
}


}