/* ───────── 基本レイアウト ───────── */
.hb-container {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: rgba(109, 121, 147, .88);          /* #6d7993, opacity 0.88 */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  color: #fff;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  z-index: 8000;
  opacity: 0;
  transition: opacity 1.5s ease;
}

/* ───────── フェード表示 ───────── */
.hb-show {
  opacity: 1;
}

.hb-link {
  color: inherit;
  text-decoration: none;
}

.hb-link:hover {
  color: inherit;
  text-decoration: underline;
}

/* ───────── モバイル専用 (1 行固定) ───────── */
@media (max-width: 767px) {
  .hb-container {
    font-size: clamp(12px, 3.6vw, 16px);
    max-width: 92%;
  }
  
  .hb-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
}