外構工事






/* 全体の箱:隙間を空けて綺麗に並べる */
.case-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 20px;
}
/* 各事例カードの設定 */
.case-card {
width: calc(33.33% - 20px); /* PCで3列にする設定 */
text-decoration: none;
color: #333;
transition: transform 0.3s ease;
}
/* マウスを乗せた時に少し浮かび上がる */
.case-card:hover {
transform: translateY(-5px);
}
/* 画像の設定:サイズを統一して綺麗に見せる */
.case-card img {
width: 100%;
height: 250px; /* 高さを揃える */
object-fit: cover; /* 画像が歪まないように切り抜く */
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* タイトル周り */
.case-title {
margin-top: 15px;
font-size: 16px;
font-weight: bold;
text-align: center;
}
/* スマホ対応:画面が小さくなったら1列に並べる */
@media (max-width: 768px) {
.case-card {
width: 100%; /* スマホでは幅いっぱいに */
}
}
