.schedule-warpper2 {
    max-width: 1100px;
    margin: 0 auto;
    margin-top: 100px;
    
}

.schedule-container2 {
  display: flex;
  flex-wrap: wrap; /* 折り返しを有効にする */
  justify-content: center;
  
}


.sortbtn .btn {
  background: none;
  cursor: pointer;
  padding: 10px 20px;
  font-family: inherit; /* 親要素のフォントを継承 */
    appearance: none; /* デフォルトのボタンスタイルを無効化 */
}
.sortbtn .btn:hover {
  opacity: 0.7;
}

.oneman {
  color: #b11e00;
  border: #b11e00 solid 1px;
  background: none;
  transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}

.oneman:hover {
  background: #b11e00; /* ホバー時に背景を赤に */
  color: #0D0F12; /* 文字色を白に */
}

.event {
  color: #5a8171;
  border: #5a8171 solid 1px;
  background: none;
  transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}

.event:hover {
  background: #5a8171; /* ホバー時に背景を緑に */
  color: #0D0F12; /* 文字色を白に */
}

.other {
  color: #ddc79b;
  border: #ddc79b solid 1px;
  background: none;
  transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}

.other:hover {
  background: #ddc79b; /* ホバー時に背景をゴールドに */
  color: #0D0F12; /* 文字色を白に */
}


.boundary img {
    width: 100%;
    margin-bottom: 50px;
    margin-top: 50px;
}


.schedule-card2 {
  border: 1px solid #b11e00;
  margin: 10px;
  padding: 20px;
  width: 200px;
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
  
}


.schedule-details2 {
  width: 100%; /* 詳細部分の幅を100%に設定 */
  text-align: center; /* 詳細部分を中央揃え */
  margin-top: 30px; /* 上の間隔を調整 */
  margin-top: auto; /* 自動で一番下に固定 */
}

.schedule-details2 p {
  color: #b11e00;
  line-height: 1.1;
  transition: all 0.3s ease-in-out;
}

.livetitle2 {
  font-size: 1.5em;
  margin-bottom: 15px;
  border-bottom: #b11e00 solid 1px; /* 通常のボーダー色は赤 */
  margin-top: 5px;
  transform: scaleY(1.5); 
  transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out; /* スムーズな変化 */

}

.special-event {
  border-color: #5a8171 !important; /* 短編公演のボーダー色を緑 */
}

.special-event .livetitle2 {
  border-bottom: #5a8171 solid 1px !important; /* 緑色に変更 */
  color: #5a8171 !important; /* 文字色も緑に */
}

.venue2  {
  margin-top: 5px;
  transform: scaleX(0.7); 
  white-space: nowrap;
}





  
  .liveformat {
    letter-spacing: 8px;
    font-size: 12px;
  }
  
  .date {
    font-size: 12px; /* 基本フォントサイズ */
  }
  
  .year {
    font-size: 12px; /* 年の部分を1emに設定 */
  }
  
  .day {
    font-size: 20px; /* 日付の部分を2emに設定 */
  }
  
  .time {
    font-size: 20px; /* 基本フォントサイズ */
  }
  
  .open, .start {
    font-size: 12px; /* OPEN と START の部分を 1em に設定 */
  }
  
  .time-value {
    font-size: 18px; /* 時刻部分（17:30, 18:00）を 2em に設定 */
  }

  .live-set{
    letter-spacing: 10px;
  }


  .schedule-card2:hover {
    background-color: #b11e00; /* 通常カードの背景色 */
    border-color: #ddc79b; /* ホバー時のボーダー色をゴールド系に */


  }

  .schedule-card2:hover .schedule-details2 p {
    color: #ddc79b; /* 文字色をゴールド系に */
  }

/* 短編公演用のマウスオーバースタイル */
.special-event:hover {
  background-color: #5a8171 !important; /* 短編公演の背景色を緑 */
  border-color: blak !important; /* ボーダー色を黒に変更 */
}

.special-event .schedule-details2 p {
  color: #5a8171 !important; /* 文字色を緑に固定 */
}

.special-event:hover .schedule-details2 p {
  color: black !important; /* 文字を黒に */
}


/* 🔥 通常のスケジュールカードのホバー時 */
.schedule-card2:hover .livetitle2 {
  border-bottom: #ddc79b solid 1px; /* ゴールド系のボーダーに変更 */
  color: #ddc79b; /* 文字色もゴールド系に変更 */
}



/* 🔥 短編公演（特別公演）のホバー時 */
.special-event:hover .livetitle2 {
  border-bottom: black solid 1px !important; /* ホバー時にボーダーを黒に変更 */
  color: black !important; /* 文字色も黒に */
}