/* ======================
施工事例ページ
====================== */

/* ページタイトル */

.page-title{
text-align:center;
padding:140px 20px 40px;
background:#fafafa;
}

.page-title h1{
font-size:34px;
font-weight:700;
margin-bottom:10px;
}

.page-title p{
color:#666;
font-size:15px;
}


/* ======================
施工事例グリッド
====================== */

.works-page{
width:90%;
max-width:1200px;
margin:60px auto 100px;
}

.works-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}


/* ======================
施工事例カード
====================== */

.works-card{
background:#fff;
border-radius:12px;
overflow:hidden;
transition:0.35s;
cursor:pointer;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

/* ホバー */

.works-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}


/* ======================
画像
====================== */

.work-image{
position:relative;
aspect-ratio:4/3;
overflow:hidden;
}

.work-image img{
width:100%;
height:100%;
object-fit:cover;
transition:0.5s;
}

.works-card:hover .work-image img{
transform:scale(1.08);
}


/* ======================
カテゴリラベル
====================== */

.work-category{
position:absolute;
top:12px;
left:12px;
color:#fff;
font-size:12px;
padding:6px 12px;
border-radius:20px;
font-weight:600;
z-index:2;
}

/* 新築 */

.cat-new{
background:#7b4f2a;
}

/* リフォーム */

.cat-reform{
background:#01823b;
}

/* ペレット */

.cat-pellet{
background:#e67e22;
}


/* ======================
テキスト
====================== */

.work-text{
padding:18px;
}

.work-text h3{
font-size:16px;
margin-bottom:5px;
}

.work-text p{
font-size:14px;
color:#666;
}


/* ======================
レスポンシブ
====================== */

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

.works-grid{
grid-template-columns:repeat(2,1fr);
gap:30px;
}

}

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

.works-grid{
grid-template-columns:1fr;
}

.page-title h1{
font-size:26px;
}

}