/* ヘッダー全体の設定 */
.header-content {
  position: relative;
  width: 100%;
  text-align: center;
}

.header-img {
  width: 100%;
  height: auto;
  min-height: 280px;
  max-height: 500px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/*
 * calc(120px + 25vw) により、画面幅に対して滑らかにスケール。
 *   400px → 220px (55%)
 *   600px → 270px (45%)
 *   767px → 312px (41%)
 *   768px → 312px (逆転なし)
 *  1000px → 370px (37%)
 *  1500px → 495px (33%)
 *  2120px → 650px (上限)
 */
.foreground-img {
  position: absolute;
  top: 10%;
  left: 2%;
  width: calc(120px + 25vw);
  max-width: 650px;
  height: auto;
}

.header-message {
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: clamp(14px, 1.5vw, 24px);
  white-space: nowrap;
}

/* スマートフォン：位置調整のみ（幅はcalcが効くので変えない） */
@media (max-width: 767px) {
  .foreground-img {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-height: 95%;
    object-fit: contain;
  }
  .header-message {
    font-size: clamp(9px, 2vw, 13px);
    padding: 4px 6px;
  }
}