.header-banner-section {
  width: 100%;
  height: 50px;
  background: #f8f9fa;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1029;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  overflow: hidden;
  text-align: center;
  transform: translateY(0);
  transition: transform 0.3s ease;
}
.header-banner-section.hidden {
  transform: translateY(-100%);
}
.header-banner-section a {
  display: block;
  width: 100%;
  height: 100%;
  background: #FF4553;
}
.header-banner-section a img {
  margin: auto;
  width: auto;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ナビゲーションバーの位置調整（初期値のみ、動的にJSで変更） */
.navbar.fixed-top {
  transition: top 0.3s ease;
}

/* コンテンツの上部マージン調整（初期値のみ、動的にJSで変更） */
.header-search-sp {
  transition: margin-top 0.3s ease;
}

/* bodyの上部余白調整（初期値のみ、動的にJSで変更） */
body {
  transition: padding-top 0.3s ease;
}

/* スマホ対応 */
@media (max-width: 520px) {
  .header-banner-section {
    aspect-ratio: 375 / 49;
    height: auto;
  }
}