/* 左側のメインコンテンツを広めに表示するための幅比率。hero-left:hero-right=2.5:1 */
.hero-left {
  flex: 2.5;  /* 横並びのとき、左側の幅を2.5倍にする */
}

.hero-wrapper,
.page-main {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* =========================
   スマホ＆タブレット表示用
   ========================= */

@media screen and (max-width: 1024px) {
  .page-main > *:last-child {   /* 下層ページの本文の最後の余白だけを消す */
    margin-bottom: 0;
  }

  .hero-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
  }
}