.home-hero-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent; /* 背景を透明に */
}

.home-hero-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px; /* コンテンツの最大幅 */
  padding: 0 20px; /* 左右のパディング */
}

.home-hero-image {
  max-width: 80%; /* 画像の最大幅を親要素の80%に */
  height: auto; /* アスペクト比を維持 */
  max-height: 70vh; /* 画像の最大高さをビューポートの70%に */
  object-fit: contain; /* 画像全体を表示 */
}

@media (max-width: 768px) {
  .home-hero-image {
      max-width: 140%; /* モバイルでは画像をより大きく */
      max-height: 50vh; /* モバイルでは高さを調整 */
  }
}