/* 親に relative を付けて ::before を重ねられるようにする */
.overlay {
  position: relative;
  display: inline-block;
  border-radius: 1vw; /* 角丸の割合。大きくすると丸みが強くなる */
  overflow: hidden;   /* 中の画像や背景が角丸からはみ出さないようにする */
}

/* 左→右：黒→白、どちらも50%透明のグラデーションを ::before で重ねる */
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 31, 0.4),   /* 左端：青黒 40%透明 */
    rgba(224, 224, 255, 0.4) /* 右端：青白 40%透明 */
  );
  pointer-events: none; /* 背景なのでクリックを邪魔しない */
  z-index: 0; /* 画像より上、文字より下にするため */
}

.headline-container {
  height: auto;
}

/* 画像 */
.headline-container img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1; /* グラデーションの下に置く */
}

/* テキスト */
.text-overlay {
  position: absolute;
  white-space: nowrap;
  top: 50%;
  left: 50%;
  transform: translate(-65%, -90%);
  color: #fff;
  font-family: 'Yuji Syuku', sans-serif;
  font-size: 3.2vw;
  font-weight: 400;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  z-index: 2; /* グラデーションより上に表示 */
}

.english-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, +60%);
  color: #e0e0e0;
  font-family: sans-serif;
  font-size: 1.6vw;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  z-index: 3; /* グラデーションより上に表示 */
}

.headline-container .event-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央に移動 */
  width: 80%; /* ロゴの大きさはお好みで調整 */
  height: auto;
  z-index: 4; /* 背景画像より上に表示 */
}