/* --- PC用（デフォルト） --- */
.cover-gentle {
  background-image: url('../images/hero/top_banner_gentle_pc.webp');
}

.cover-missmrs {
  background-image: url('../images/hero/top_banner_missmrs_pc.webp');
}

/* --- スマホ用 --- */
@media screen and (max-width: 768px) {
  .cover-gentle {
    background-image: url('../images/hero/top_banner_gentle_sp.webp');
  }

  .cover-missmrs {
    background-image: url('../images/hero/top_banner_missmrs_sp.webp');
  }
}

/* 見えない場合の基本プロパティ例 */
.site-blocks-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 48vh;
  /* 画像領域が0にならないように */
}