.before-after-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 2rem;
}

.vacant-house-section .pdf-link {
  margin-top: 2rem;
}

/* 同親の同じタグ名 (h3) のうち、2番目の要素に余白を付ける */
.vacant-house-section h3:nth-of-type(2) {
  margin-top: 2rem;
}

.before-after-item figure {
  margin: 0;
}

.before-after-item img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 6px;
}

.before-after-item figcaption {
  text-align: center;
  margin-top: 0;
}

/* 仕切り線 */
.before-after-item {
  border-bottom: 1px solid #ccc; /* 仕切り線 */
  padding-bottom: 0.5rem;
}

/* 最後（ページ下部）の仕切り線と余白は消す */
.before-after-item:last-child {
  border-bottom: none;
  margin-bottom: 1rem; /* ページ下部の余白調整 */
  padding-bottom: 0;
}

/* =========================
   <figure> は「画像＋説明文」をセットにするための意味的な箱
   <figcaption> は画像の説明文専用タグ
   <figcaption> は<figure> 内の画像の下に自動で配置される
   ========================= */


/* =========================
   スマホ表示用
   ========================= */

@media (max-width: 768px) {
  .before-after-item {
    grid-template-columns: 1fr;
  }
}