.history-row {
  width: 100%;
  display: flex;
}

.history-head {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  width: fit-content;           /* 内容に合わせて横幅が縮む */
  padding: 0 1vw; 
  font-size: 1vw;
  font-weight: bold;
  text-align: left;
  border-radius: 0.5vw 0 0 0.5vw;
  white-space: nowrap; /* 改行しない */}

.history-event {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  color: white;
  margin-left: 0;
  padding-left: 1vw; 
  border-radius: 0 0.5vw 0.5vw 0;
}

.event-btn {
  display: block;
  text-align: left;
  background-color: transparent; /* 背景なし */
  color: white; /* 白系文字色 */
  text-decoration: none;
  font-size: 1vw;
  padding-left: 1vw; 
  border: 2px solid transparent; /* hover時のズレ防止用 */
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  white-space: nowrap; /* 改行しない */
  overflow: hidden;          /* はみ出しを隠す */
  text-overflow: ellipsis;   /* 省略記号を表示 */
}

.event-btn:hover {
  opacity: 1;                       /* ? ホバーで完全表示 */
  font-weight: bold;
  transform: scale(1.05);
}