/* イベントセクションの初期状態 */
.event-section {
  margin-top: 30px;
  padding: 40px;
  background-color: #f9f9f9;
  border-radius: 8px;
  cursor: pointer; /* クリックできそうなカーソルにする */
  
  opacity: 0;
  /* 50px下に配置し、大きさは1倍（通常サイズ） */
  transform: translateY(50px) scale(1); 
  /* フェードインにかかる時間 */
  transition: opacity 1s ease, transform 1s ease, box-shadow 1s ease;
}

/* JSで付与されてフェードインした状態 */
.event-section.show {
  opacity: 1;
  /* 元の高さに戻す */
  transform: translateY(0) scale(1);
}

/* 表示完了後、マウスを乗せた（ホバーした）時の動き */
.event-section.show:hover {
  /* 高さはそのままで、1.05倍に拡大 */
  transform: translateY(0) scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* 浮き出たように影をつける */
  
  /* ホバーの反応は少し速く（0.3秒）する */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-container a {
    text-decoration: none;
    color: black;
}

.event-container {
    padding: 50px;
}