/* リスト全体のスタイル */
.program-list {
  /* 元のCSSの余白を強制リセット */
  list-style: none !important;
  padding: 5px 0 !important; 
  margin: 0 !important;
  
  display: flex !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  gap: 8px !important; /* タグ同士の横の隙間 */
  
  -webkit-overflow-scrolling: touch;
}

/* スクロールバーを非表示 */
.program-list::-webkit-scrollbar {
  display: none;
}

/* 予定を包む li タグの余白リセット */
.program-list li {
  /* 元のCSSが持っている縦の広がりや余白をすべてクリアします */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-indent: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* イモムシタグ（楕円形）のスタイル */
.imomushi-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px; 
  
  /* スクショの綺麗な緑色に少し合わせました */
  background-color: #e6f4ea; 
  color: #2b362f;
  border: 1px solid #ceead6;
  
  /* タグの内側の余白（上下を少し狭く、左右を広めに） */
  padding: 6px 16px !important; 
  line-height: 1.2 !important; /* 文字の上下の無駄な隙間をなくす */
  flex-shrink: 0; 
}

/* プログラム名の文字 */
.program-name {
  font-size: 0.95rem;
  font-weight: bold;
}

/* 場所の文字 */
.program-place {
  font-size: 0.85rem;
  margin-left: 2px;
}
/* 今日・明日の各行のボックス */
.schedule-row {
  display: flex !important;
  align-items: center !important; /* 上下中央揃え */
  margin-bottom: 12px !important; /* 行と行の間の隙間 */
  width: 100% !important;
}

/* 「今日(7/5)」などのラベル部分 */
.date-label {
  font-size: 1rem !important;
  font-weight: bold !important;
  color: #555 !important;
  width: 40px !important;       /* ラベルの横幅を固定して、右のタグの位置を揃えます */
  flex-shrink: 0 !important;    /* 画面が狭くなっても潰れないようにする */
  white-space: nowrap !important;
}

/* タグが並ぶ右側のコンテナ */
.tag-list-container {
  flex-grow: 1 !important;      /* 残りの横幅をいっぱいに使う */
  overflow: hidden !important;
  
}

/* リスト全体のスタイル（横スクロールの設定はそのまま維持） */
.program-list {
  list-style: none !important;
  padding: 0 !important; 
  margin: 0 !important;
  display: flex !important;
  overflow-x: auto !important;   /* はみ出したら横スクロール */
  white-space: nowrap !important;
  gap: 8px !important;
  -webkit-overflow-scrolling: touch;
}

/* スクロールバーを非表示 */
.program-list::-webkit-scrollbar {
  display: none;
}

/* 予定がない時の「なし」という文字のスタイル */
.no-program {
  font-size: 0.85rem !important;
  color: #999 !important;
  margin: 0 !important;
  padding-left: 4px !important;
}

/* --- イモムシタグや文字、liタグのCSSは前回のままでOKです！ --- */
/* 会場（タグの内側に一緒に収まります） */
.program-place {
  color: #555;         /* 注意を引く赤色 */
  font-size: 0.75rem;
  font-weight: bold;
  border:1px solid #929292;
  background-color: #fff;
  border-radius: 5px;
  padding:2px 4px;
  margin-left: 6px !important;  /* 前の文字（場所や名前）との間に少しだけ隙間を作る */
}
/* チラシがあるイモムシタグのスタイル */
.imomushi-tag.has-flyer {
  cursor: pointer; /* マウスを乗せたら指マークにする */
  transition: transform 0.2s, opacity 0.2s;
}
.imomushi-tag.has-flyer:active {
  transform: scale(0.95); /* タップした瞬間に少し凹むエフェクト */
  opacity: 0.8;
}

/* ポップアップ（モーダル）全体のスタイル */
#flyer-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; /* 一番手前に表示 */
}

/* 背景の黒い半透明 */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

/* チラシを表示するコンテナ */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 85%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* チラシ画像自体のサイズ調整 */
.modal-content img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  background-color: #fff;
}

/* × ボタン（閉じる） */
.modal-close {
  position: absolute;
  top: -45px;
  right: 0;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
}

@media screen and (max-width: 501px) {
/* チラシ画像自体のサイズ調整 */
.modal-content img {
  max-width: 100%;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  background-color: #fff;
}
}