@charset "UTF-8";

/* =========================================================
   タイムテーブル（index.php）の追加スタイル
   =========================================================
   timetable.css のあとに読み込んで、差分だけを当てる。

   このファイルを読むページ（57 内の実測）

     search/timetable/index.php              ← 本番のタイムテーブル
     info/rain.php                           ← 雨天時タイムテーブル
     mypage/index.php                        ← マイページ「Myスケジュール」
   （以前は experiment/timetable/ の3本も読んでいた。2026-10-22 に消した）

   ----- timetable.css との書き分け -----

   timetable.css は info/rain.php・mypage/index.php からも
   読まれる共有ファイル。表そのものの基本部品はあちらに置き、
   index.php にしかない要素・状態の見た目をここで重ねる。
     .tab_side / .filter-* / .venue_contents_group.is-compact / .flex.single-venue

   （以前ここに「mypage 系5ページからも読まれている」と書いてあったが誤り。
     mypage/index.php は timetable.css だけを読む（2026-09-23 に57回版へ切り替え）。
     ルート直下の mypage.php は56回版を絶対URLで読んでいて、57のこのファイル群とは無関係。）

   ----- メディアクエリの置き方 -----

   PC 上書きは、対応するベース規則の【直後】に小さいメディアクエリを作って置く。
   ★ベース規則より前には絶対に置かない。メディアクエリは詳細度を上げないので、
     同詳細度なら後勝ちとなり上書きが効かなくなる。

   ----- 目次 -----

   もとは用途ごとに3枚に分かれていたもの（timetable_sidetab.css /
   timetable_filter.css / timetable_compact.css）を1枚にまとめたもの。
   どのブロックも「そのページにその要素があるときだけ効く」書き方なので、
   使わないブロックが入っていても影響しない。

     1. 日付タブを画面右側に固定      .tab_side
     2. 見出し横の絞り込みボタン      .filter_head / .filter-button / .filter-panel
     3. 企画カードのコンパクト表示    .venue_contents_group.is-compact
     4. 単独会場表示の目盛り線        .flex.single-venue
     5. ページまわりの細かい調整      夜祭の札 / 余白 / 日付タブのホバー
     6. 横スクロールの手がかり        .scroll のスクロールバー / 端のぼかし

   ★ index.php にページ内 <style> を書かないこと。
     見た目はここ（トップだけ）か timetable.css（共有）のどちらかに置く。
   ========================================================= */

/* =========================================================
   1. 日付タブを画面右側に固定
   ========================================================= */

/* =========================================================
   日付タブ 画面右側固定
   =========================================================
   ページ内の上部・中間・下部にあった .tab_panel を廃止し、画面右側に
   固定した1つに集約する。位置と見た目だけをここで上書きする。

   マークアップは既存の .tab_panel / .tab_group / .tabbtn / data-day を
   そのまま流用しているので、timetable.js の showTab() は無改造で動き、
   アクティブな日付に .is-active が付く。

   z-index の並び（小さいほど下）
     1500 : このタブ
     2000 : #pagetop（common_general.css）
    10000 : .popup（timetable.css。企画詳細を開くとタブは背面に隠れる）
   ========================================================= */

.tab_side {
  position: fixed;
  right: 0;
  /* 画面の上下中央。縦の短い画面（スマホ 約520px・PC 約600px 未満）では
       右下の #pagetop（bottom:80px / 70x72px）と重なる。 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1500;
  margin: 0;
  width: auto;
}

/* .tab_group は既定で display:flex / width:99% の横並び。縦積みに変える。 */
.tab_side .tab_group {
  flex-direction: column;
  width: auto;
  margin: 0;
  gap: 2px;
}

/* .tabbtn の width:33% / line-height:50px を打ち消す。スマホは 44x70px、PC は下の @media で大きくする。
   目立たせるため影は濃いめ。 */
.tab_side .tabbtn {
  width: 44px;
  height: 70px;
  line-height: 1.15;
  border-radius: 6px 0 0 6px;
  box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.35);
}

/* li の高さいっぱいに広げたうえで、中の文字を上下中央に揃える */
.tab_side .tabbtn a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 4px;
  gap: 2px;
}

.tab_side_date {
  font-size: 15px;
  line-height: 1;
}

.tab_side_day {
  font-size: 9px;
  line-height: 1;
}

/* 既定（timetable.css）ではアクティブ時に下向きの吹き出しが ::after で付くが、
   縦タブでは不要なので消す。 */
.tab_side li.is-active::after {
  content: none;
}

@media screen and (min-width: 1024px) {
  /* PC は一回り小さく（70x96px・23/13px から縮めた） */
  .tab_side .tabbtn {
    width: 60px;
    height: 82px;
  }

  .tab_side_date {
    font-size: 20px;
  }

  .tab_side_day {
    font-size: 11px;
  }
}

/* =========================================================
   2. 見出し横の絞り込みボタン
   ========================================================= */

/* =========================================================
   見出し横の絞り込みボタン
   =========================================================
   パネルの中身（.venue_tab_group / .venue_tabbtn / .venue-active）は
   timetable.css の既存スタイルをそのまま使い、ここでは
   「パネルという箱に収めるための調整」だけを書く。
   ========================================================= */

/* ===== 見出し行 ===== */
/* .h2_wrapper はリポジトリ内にCSS定義が無い素のdivなので、
   ここで flex にしても既存ページには影響しない。

   common_general.css の h2 は margin-left:10% / width:80%（PCは15%/70%）で
   帯の位置が決まっている。見出しの横にボタンを置くため、その帯を
   この行（.filter_head）ごと引き受け、中で h2 とボタンが分け合う形にする。
   こうすると他の57ページの h2 と左端・右端が揃う。 */
.h2_wrapper.filter_head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 10%;
  width: 100%;
}

/* 帯は .filter_head 側が持つので、h2 自身の margin は打ち消して
   残り幅いっぱいに広がるようにする。 */
.filter_head h2 {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin-left: 0;
}

/* ===== ボタン ===== */

/* パネルを絶対配置で浮かせるためのアンカー。
   縦位置は h2 の見出し文字と上下中央で揃える。
   .h2_wrapper.filter_head は align-items:flex-end（装飾の span を下端に置くため）
   なので、この要素だけ align-self:center で中央に上げる。
   h2 は common_general.css で margin:20px 0 12px / padding-bottom:7px を持つ。
   同じ margin-top と「12+7=19px」の margin-bottom を与えると、
   flex の中央揃えの基準が h2 の文字ボックスと一致する（ボタンの高さに依らない）。 */
.filter_unit {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  margin: 20px 15px 19px 0;
}

/* 縦横比 1:1 */
.filter-button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--themewhite);
  color: var(--themeocean);
  border: 1.5px solid var(--themeocean);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.filter-button_icon {
  width: 62%;
  height: 62%;
}

/* 展開中、または「すべて」以外で絞り込み中は反転させて状態を示す */
.filter-button[aria-expanded="true"],
.filter-button.is-filtered {
  background-color: var(--themeocean);
  color: var(--themewhite);
}

/* ===== 展開パネル ===== */

.filter-panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  /* 開いている間だけの一時的なものなので、右側に固定した日付タブ
     （.tab_side の 1500）より前面に出す。これより下だと、見出しが画面の
     縦中央付近に来たときに日付タブが会場ボタンを隠す。 */
  z-index: 1600;
  width: 260px;
  max-width: 80vw;
  padding: 14px;
  background-color: var(--themewhite);
  border: 1.5px solid var(--themeocean);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* hidden 属性を確実に効かせる（display を持つ指定に負けないように） */
.filter-panel[hidden] {
  display: none;
}

/* ボタンを指す吹き出し */
.filter-panel::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 11px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 8px solid var(--themeocean);
}

.filter-panel_title {
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: bold;
  color: var(--themeocean);
}

/* 会場名が長い（例: 法人本部棟前ステージ）ので、
   .venue_tabbtn の height:40px 固定を解いて折り返せるようにする。
   1行目の「すべて」を全幅にする timetable.css の
   .venue_tab_group .venue_tabbtn:first-child は詳細度で勝つため残る。 */
.filter-panel .venue_tabbtn {
  flex: 1 1 calc(50% - 2px);
  min-width: 0;
  height: auto;
  min-height: 38px;
}

.filter-panel .venue_tabbtn a {
  padding: 6px 4px;
  line-height: 1.25;
}

/* パネル内では下向きの吹き出しは不要 */
.filter-panel li.venue-active::after {
  display: none;
}

@media screen and (min-width: 1024px) {
  .h2_wrapper.filter_head {
    gap: 14px;
    width: 80%;
  }

  .filter-button {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .filter-panel {
    width: 330px;
    padding: 16px;
  }

  .filter-panel_title {
    font-size: 14px;
  }

  .filter-button:hover {
    background-color: var(--themeocean);
    color: var(--themewhite);
  }
}

/* =========================================================
   3. 企画カードのコンパクト表示
   ========================================================= */

/* =========================================================
   企画カード コンパクト表示
   =========================================================
   セレクタは .venue_contents_group.is-compact 配下に限定している。
   詳細度が timetable.css 側より高いので後勝ちし、ブレークポイント別の
   指定（スマホ 210px 固定 / PC flex:0 1 300px）はどちらも上書きされて
   画面幅によらず同じサイズになる。

   .is-compact をいつ付けるかはページ側が決める。
     - マークアップの .venue_contents_group に直接書く → 常時コンパクト
         （今これを使うページは無い。以前は experiment の sidetab_filter2 系）
     - body に data-compact="all-only" を付ける → 「すべて」表示のときだけ
         コンパクトにし、個別会場のときは通常表示に戻す
         （index.php）
   判定は timetable_compact.js が行う。
   ========================================================= */

/* ===== 調整用の値 ===== */
.venue_contents_group.is-compact {
  /* 時間軸1行（＝5分）の高さ。既定は10px（1分あたり2px）。
       7px にすると1分あたり1.4px、10:00〜20:00 の全体高さは
       120行 × 10px = 1200px から 840px になる。

       企画名1行と時間が入らない短いカードは、timetable_compact.js が
       文字の大きさから測って .is-tiny を付け、時間を出さない。 */
  --tt-row: 7px;

  /* 1列の幅（--tt-col）とカードの幅（--tt-card）。差が左右の余白になる。
       ここはスマホの値。PCは下の @media で上書きする。
       列数に関わらず固定幅なので、ステージ企画（4列）も講演会企画
       （企画のある教室ぶん列ができるので、21〜23日で列数が変わる）も同じカード幅になり、
       入りきらない分は .scroll の横スクロールで見る。 */
  --tt-col: 112px;
  --tt-card: 100px;
}

/* PC: カードを 176px まで広げる。
   4列 × 200px = 800px なので、おおよそ 1200px 以上の画面では
   ステージ企画の4列が横スクロールなしで収まる。
   それより狭い画面と、列数の多い講演会企画は横スクロールになる。
   幅を変えたいときはこの2つの数値だけ動かせばよい
   （.stage / .contents_wrapper / 文字サイズは追従する）。 */
@media screen and (min-width: 1024px) {
  .venue_contents_group.is-compact {
    --tt-col: 200px;
    --tt-card: 176px;
  }
}

/* ===== 時間軸の高さ ===== */
/* .timepoint（時刻の目盛り）と .contents_wrapper（カードが載るグリッド）は
   同じ行数・同じ行高でなければ横に並んだときにずれる。必ず対で変更する。
   .line00〜.line10 は grid-row-start: calc(1 + 12*N) の指定なので、
   行の高さを変えても追従する。
   .timepoint の margin-top（スマホ31px / PC66px）は .location の高さに
   対する位置合わせで、行の高さとは無関係なのでそのままでよい。 */

.venue_contents_group.is-compact .timepoint {
  grid-template-rows: repeat(120, var(--tt-row));
  font-size: 13px;
}

.venue_contents_group.is-compact .timepoint.day1day2,
.venue_contents_group.is-compact .timepoint.gym,
.venue_contents_group.is-compact .timepoint.intelligent {
  grid-template-rows: repeat(84, var(--tt-row));
}

.venue_contents_group.is-compact .timepoint.lastday {
  grid-template-rows: repeat(60, var(--tt-row));
}

.venue_contents_group.is-compact .contents_wrapper {
  grid-template-rows: repeat(120, var(--tt-row));
  /* 中央カラムがカード幅。--tt-col と --tt-card の差が左右の余白になる
     （スマホ 112-100=12px / PC 200-176=24px）。 */
  grid-template-columns: 1fr var(--tt-card) 1fr;
  margin-bottom: 15px;
}

.venue_contents_group.is-compact .contents_wrapper.day1day2,
.venue_contents_group.is-compact .contents_wrapper.gym,
.venue_contents_group.is-compact .contents_wrapper.intelligent {
  grid-template-rows: repeat(84, var(--tt-row));
}

.venue_contents_group.is-compact .contents_wrapper.lastday {
  grid-template-rows: repeat(60, var(--tt-row));
}

/* ===== 会場カラムの幅 ===== */

/* 列は固定幅。全列が収まるときは中央寄せ、あふれたら .scroll で横スクロール。
   width:max-content で列の合計幅ぴったりに縮み、min-width:100% で
   収まるときだけ .scroll いっぱいに広がって中央寄せが効く。
   justify-content は safe center。あふれた状態で center のままだと
   先頭の列が左にはみ出してスクロールしても掴めなくなる。
   timetable.css の PC 用ルール（.flex{width:100%}）より詳細度が高いので後勝ちする。 */
.venue_contents_group.is-compact .flex {
  width: max-content;
  min-width: 100%;
  justify-content: center;
  justify-content: safe center;
}

.venue_contents_group.is-compact .stage {
  flex: 0 0 var(--tt-col);
  width: var(--tt-col);
  min-width: 0;
}

/* ===== 会場名 ===== */
/* 会場名は .location_name（div）。common_general.css の h3 の装飾
   （五角形マーカー・字下げ）を持ち込まないための div 化なので、
   ここで打ち消す指定は要らない。基本の見た目は timetable.css 側。 */

/* height:35px（timetable.css）は変えない。112px 幅では
   「法人本部棟前ステージ」などが2行に折り返すが、箱の高さが固定なら
   どの列も .contents_wrapper の開始位置が揃い、.timepoint の目盛りとも
   ずれない。文字だけ縮めて35px に収める。 */
.venue_contents_group.is-compact .location {
  overflow: hidden;
}

/* 会場名の実体は .location_name。timetable.css が font-size を
   13px（スマホ）/ 18px（PC）と直接指定しているため、
   .location 側に font-size を書いても効かない。直接指定する。
   スマホは 112px 幅なので、2行が収まる上限の11pxにしている。 */
.venue_contents_group.is-compact .location_name {
  font-size: 11px;
  line-height: 1.15;
}

.venue_contents_group.is-compact .location img {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

/* ===== カード本体 ===== */
/* overflow:hidden で、行が入りきらない極端に短い企画の文字を
   隣のカードへはみ出させない。.popup は position:fixed なので
   この指定ではクリップされない（祖先に transform も無い）。 */
.venue_contents_group.is-compact .item {
  padding: 0 2px;
  border-width: 1px;
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* ===== 1行目: 企画名 ===== */
/* カードの高さに入る行数まで折り返して全部見せ、それでも入らなければ最後の行の末尾を「…」にする（#71 #76 #82）。
   入る行数（--tt-name-lines）は timetable_compact.js がカードの長さ・文字の大きさから1枚ずつ計算する。
   以前は必ず1行で、PC の広いカードでも長い企画名が「…」で切れていた。
   パーシャル側が programname に <br> を差し込んでいる箇所があるので
   （例: str_replace("・", "・<br>", ...)）、それは無効化する。 */
.venue_contents_group.is-compact .event_name {
  width: 100%;
  margin: 0;
  padding: 0; /* 左右の余白はなし（校正。改行の位置は timetable_lib.php の TT_CARD_BREAKS で企画ごとに決める） */
  font-size: 10px;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--tt-name-lines, 1);
  line-clamp: var(--tt-name-lines, 1);
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.venue_contents_group.is-compact .event_name br {
  display: none;
}

/* ===== 2行目: 開始-終了 ===== */
/* timetable_compact.js が data-stahour などから組み立てて挿入する。
   挿入自体はコンパクトかどうかに関わらず全カードに対して行うので、
   既定は非表示にしておき、コンパクト時だけ出す。
   通常表示のときは元の .starttime / .endtime がそのまま使われる。 */
.item_time {
  display: none;
}

.venue_contents_group.is-compact .item_time {
  display: block;
  margin: 0;
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.05;
  color: var(--themewhite);
  white-space: nowrap;
}

/* 上の色指定（詳細度 0,3,0）は timetable.css の .item:hover > p（0,2,1）に
   勝ってしまうため、そのままだと hover 時に企画時間だけ白で残り、
   水色の背景に埋もれて読めなくなる。企画名と同じ themeocean に揃える。
   hover は timetable.css 側と同じくPCのみ。 */
@media screen and (min-width: 1024px) {
  .venue_contents_group.is-compact .item:hover .item_time {
    color: var(--themeocean);
    transition: color 0.3s;
  }
}

/* 企画名1行と時間が入らない短さの企画は、カードには企画名だけを置き、時間は出さない
   （時間はカードを押したときのポップアップで見られる）。
   .is-tiny は timetable_compact.js が文字の大きさとカードの高さから測って付ける。
   .item_label_below は企画名と一緒に時間もカードの下に出すので対象外。 */
.venue_contents_group.is-compact .item.is-tiny:not(.item_label_below) .item_time {
  display: none;
}

/* .item_label_below の時間はカードの下に出す。
   z-index はカード（.item）ではなく文字の側に付ける。カードに付けると
   ポップアップ（.popup）がその重なりの中に閉じ込められるため。 */
.venue_contents_group.is-compact .item.item_label_below .item_time {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 1px;
  padding: 0 1px;
  z-index: 1;
  text-align: center;
  font-weight: bold;
  color: var(--themeocean);
}

/* カードの下に出る文字（時間・企画名）は、時刻の線と重なっても読めるように地の色を敷く（#112）。
   幅を文字ぶんだけにして、線は文字の左右では見えたままにする */
.venue_contents_group.is-compact .item.item_label_below .item_time,
.venue_contents_group.is-compact .item.item_label_below .event_name {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: var(--tt-col);
  padding: 0 3px;
  background: var(--themewhite);
  border-radius: 2px;
}

/* 短すぎて企画名まで見切れる企画は、企画名もカードの下に出し、
   「企画名 / 時間」の順で2行並べる。
   .item_label_below は timetable_lib.php の TT_LABEL_BELOW_NAMES に書いた企画だけに付く
   （5分の coverdance など）。 */
.venue_contents_group.is-compact .item.item_label_below {
  overflow: visible;
}

.venue_contents_group.is-compact .item.item_label_below .event_name {
  position: absolute;
  top: 100%;
  margin-top: 1px;
  z-index: 1;
  color: var(--themeocean);
  /* カードの下では1行のまま（上の折り返しは使わない） */
  display: block;
  white-space: nowrap;
  text-overflow: clip;
}

/* 時間は企画名の1行下。企画名の行の高さ（スマホ 10px × 1.1 = 11px）ぶん下げる。
   PC は下の「PC の文字サイズ」で 12px × 1.1 = 13.2px に合わせ直している。
   企画名の文字サイズを変えたらここも直すこと。 */
.venue_contents_group.is-compact .item.item_label_below .item_time {
  margin-top: 12px;
}

.venue_contents_group.is-compact .item.item_nf.item_label_below .item_time,
.venue_contents_group.is-compact .item.item_nf.item_label_below .event_name {
  color: var(--themevintage);
}

/* 元の開始/終了時刻は2行目に統合したので隠す。
   timetable.js が短いカードに付ける .start_out / .end_out や、
   パーシャルが直接持っている .start_out_nf / .end_out_nf もまとめて消える。 */
.venue_contents_group.is-compact .starttime,
.venue_contents_group.is-compact .endtime {
  display: none;
}

/* 30px の整理券アイコン・パフォーマンスアイコンは、
   縮んだカードでは文字を覆ってしまうため出さない。
   これらの情報はカードを押したときのポップアップで確認できる。 */
.venue_contents_group.is-compact .tt_ticket::before,
.venue_contents_group.is-compact .field_mark {
  display: none;
}

/* ===== カード右上の印（講演会 #77・整理券/チケット #84） =====
   .tt_marks に右から順に並べる（両方あれば 講演会・チケット の順）。
     講演会   … ステージ・屋外企画の表に載る講演会企画（timetable_lib.php の lecture_on_stage）。
               絵柄はおすすめ企画などのジャンルの講演会（img/icon/genre/academic.svg）を白にしたもの
     チケット … 整理券・チケットが要る企画（t9_event_tickets）。中身は小窓の「整理券制」「チケット制」
   上の .tt_ticket::before（56回の 30px のアイコン）とは別物 */
.item .tt_marks {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 2px;
  pointer-events: none;
}
.item .tt_mark {
  display: block;
  width: 12px;
  height: 12px;
  background: no-repeat center / contain;
}
.item .tt_ticket_mark {
  background-image: url(/visitor/img/card_ticket_white.svg);
}
.item .tt_lecture_mark {
  background-image: url(/visitor/img/icon/genre/academic_white.svg);
}

/* 印の付くカードも、企画名の左右は空けない（校正。以前は印の幅ぶん 13〜34px 空けていて、1行に入る字が少なかった）。
   印はカードの上の端にあり、企画名はカードの上下中央に置かれるので、長い企画では重ならない */
.venue_contents_group.is-compact .item.has_mark .event_name {
  padding: 0;
}
/* 印が2つでも、スマホは1つ分（13px）だけ空ける。2つ分（27px）だと 100px のカードに文字が 40px ほどしか残らず、
   「トークショー」のような語まで1〜2文字ずつに割れていた（校正 #277）。印はカードの上の端にあり、
   企画名はカードの上下中央に置かれるので、印が2つ付く長い企画（講演会・チケット制）では重ならない */
.venue_contents_group.is-compact
  .item.has_mark:has(.tt_mark + .tt_mark)
  .event_name {
  padding: 0;
}

/* 小窓の「整理券制」「チケット制」 */
.pop_ticket {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: bold;
  color: var(--themeocean);
}

.pop_ticket img {
  width: 16px;
  height: 16px;
}

@media screen and (min-width: 1024px) {
  .item .tt_mark {
    width: 15px;
    height: 15px;
  }

  .venue_contents_group.is-compact .item.has_mark .event_name {
    padding: 0;
  }
  .venue_contents_group.is-compact
    .item.has_mark:has(.tt_mark + .tt_mark)
    .event_name {
    padding: 0;
  }

  .pop_ticket {
    font-size: 14px;
  }
}

/* ===== PC の文字サイズ ===== */
/* 列が 200px あるので、112px 前提で詰めていた文字を戻す。
   カードの高さは --tt-row のままなので、文字を大きくするほど
   企画名1行と時間がカードに入らない企画が増える。
   これを超えるカードは timetable_compact.js が .is-tiny を付け、時間を出さない。 */
@media screen and (min-width: 1024px) {
  /* PCの .location_name は timetable.css で 18px。200px 幅なら
     「法人本部棟前ステージ」10文字 × 16px = 160px に場所アイコン16pxを
     足しても 176px で、1行に収まる（16 × 1.15 = 18.4px ≤ 35px）。 */
  .venue_contents_group.is-compact .location_name {
    font-size: 16px;
    /* Kiwi Maru は字形の上下の余白が均等でなく、行の箱の中心と
       見た目の文字の中心がずれて、場所アイコンと上下中央が揃わない。
       箱を文字の高さ（キャップハイト〜ベースライン）まで切り詰めて揃える。
       未対応のブラウザ（古い Firefox など）では無視され、従来の見た目のまま。 */
    text-box: trim-both cap alphabetic;
  }

  .venue_contents_group.is-compact .event_name {
    font-size: 13px;
  }

  /* 時刻は 12px（#78。10px では小さすぎた）。20分企画の高さ 28px に
     企画名 13.2px ＋ 時間 12px × 1.05 = 12.6px ＋ 枠 2px = 27.8px で収まる */
  .venue_contents_group.is-compact .item_time {
    font-size: 14px;
  }

  /* カードの下の企画名（12px × 1.1 = 13.2px）+ 1px の下に時間を置く */
  .venue_contents_group.is-compact .item.item_label_below .item_time {
    margin-top: 14.2px;
  }
}

/* =========================================================
   4. 単独会場表示の目盛り線
   ========================================================= */

/* =========================================================
   単独会場表示の目盛り線を .scroll の幅いっぱいに伸ばす
   =========================================================
   .timeline（と .current-time-line）は .contents_wrapper の
   grid-column: 1/4 なので、線の長さは .stage の幅そのもの。
   PCの .stage は 300px 固定（timetable.css）なので、1会場だけを
   表示すると .timepoint との間が大きく空き、目盛りと線がつながって見えない。

   .timepoint は .scroll の外側の兄弟で、.scroll は overflow-x:auto。
   線を .scroll の外へはみ出させることはできないので、代わりに
   .stage を .scroll の幅いっぱいに広げ、カード列だけ固定幅で中央に置く。
   こうすると .timeline は何も足さずに全幅へ伸びる。

   「すべて」表示（.all-venues）は会場列が横に並ぶので対象外。
   そちらは .is-compact 側の固定幅がそのまま効く。
   スマホは列が画面幅に近く、もともと隙間が小さいので触らない。 */
@media screen and (min-width: 1024px) {
  .venue_contents_group .flex.single-venue .stage {
    flex: 1 1 100%;
    width: auto;
    min-width: 0;
  }

  /* カード幅は 300px × 80% = 240px（timetable.css の 10% 80% 10%）を維持する。
     .stage が全幅になるとその割り算が使えないので px で固定し、
     左右の余りを 1fr ずつに分けて中央に置く。 */
  .venue_contents_group .flex.single-venue .contents_wrapper {
    grid-template-columns: 1fr 240px 1fr;
  }
}

/* =========================================================
   5. ページまわりの細かい調整
   =========================================================
   もとは index.php のページ内 <style> にあったもの（2026-09-28 に移設）。
   ページ内 <style> はすべての CSS より後に効いていたので、同じ順番になるよう
   このファイルの末尾に置いている。上に移すと後勝ちが崩れるので注意。 */

/* ===== 夜祭の札 ===== */
/* 時刻の目盛り（.timepoint p）に data-label を付けると、その上に札を出す。
   index.php の 17:00 に「初夜祭」「中夜祭」を付けている。 */
.timepoint p[data-label] {
  position: relative;
  display: block;
}

.timepoint p[data-label]::before {
  content: attr(data-label);
  position: absolute;
  /* 17:00 から始まるので、目盛りの文字の下に出す（#92。以前は上で、16時台の札に見えた）。
     コンパクト表示では目盛りの行（7px）が文字より低いので、100% ではなく文字の高さで下げる */
  top: 1.4em;
  left: -16px;
  width: 50px;
  height: auto;
  background-color: var(--themevintage);
  outline: 1px solid var(--themevintage);
  font-weight: bold;
  color: var(--themewhite);
  font-size: 12px;
  text-align: center;
  padding: 1%;
}

/* ===== 余白 ===== */

/* common_general.css の左右の余白を打ち消す。
   ★ タイムテーブルのページ（.page-wrapper の中）だけに効かせる。このファイルは
     雨天時ページ（info/rain.php）でも体育館ステージの表と一緒に読み込まれるので、
     素の .anchorlink-list に書くと、あちらのページ内リンクまで端から端に広がる。 */
.page-wrapper .anchorlink-list {
  padding: 0;
}

/* 場所タブが本文から無くなった分（.venue_tab_panel の margin:15px 0 + 高さ40px）の
   余白を、見出しと表の間に補う。表示中の日付グループは常に1つなので全件に付けてよい。 */
.ttwrapper .venue_contents_group {
  margin-top: 25px;
}

/* スマホでは .page-wrapper の右パディング（10%＝375px幅で約37px）が
   日付タブの幅（44px）より狭く、見出し右端の絞り込みボタンにタブが被る。
   右側だけ余分に空けて逃がす。
   PC は右パディングが 15%（timetable.css）あり、タブに被らないので対象外。
   （移設前はメディアクエリの外にあり、PC まで 10% + 26px になっていた。2026-09-28 に修正） */
@media screen and (max-width: 1023px) {
  .page-wrapper {
    padding-right: calc(10% + 26px);
  }

  /* ページ内リンク（ステージ・屋外企画／講演会企画）を右へ広げて画面の中央に置く（#98。左に寄って見えていた）。
     26px では右に、14px では左に 6px ずれた。20px で画面の中央に合う（360・390・414px 幅で実測） */
  .page-wrapper .anchorlink-list {
    margin-right: -20px;
  }

  /* 見出しは他のページの h2 と同じく画面の左 10% から始める（#101）。
     .page-wrapper の左パディング（10%）の内側に、さらに h2 の margin-left 10% が重なって短く見えていた */
  .page-wrapper .h2_wrapper.filter_head {
    margin-left: 0;
    width: auto;
  }

  /* 表はその 26px ぶん右へ広げ、左右の余白を揃えて企画カードを画面の中央に置く。
     左右の 1% は .ttwrapper の width:98%; margin:auto（timetable.css）と同じ。 */
  .page-wrapper .ttwrapper {
    width: auto;
    margin-left: 1%;
    margin-right: calc(1% - 26px);
  }
}

/* 狭いスマホ（360px 以下）は「01. ステージ・屋外企画」が絞り込みボタンに押されて、350px を切ると
   最後の「画」だけ次の行に落ちていた。ボタンとの間を 20→8px、ボタンの右の余白を 15→0px に詰め
   （ボタンの右から日付タブまではまだ 16px ほど空く）、文字を画面幅に合わせて 16px から少しだけ縮める
   （344px で約 15.1px、320px で約 14.1px）。320px まで1行に収まる */
@media screen and (max-width: 360px) {
  .h2_wrapper.filter_head {
    gap: 8px;
  }

  .filter_unit {
    margin-right: 0;
  }

  .filter_head h2 {
    font-size: clamp(14px, 4.4vw, 16px);
  }
}

/* ===== 日付タブのホバー（PC） ===== */
@media screen and (min-width: 1024px) {
  /* hover は色を変えず、不透明度を下げるだけ */
  .tab_group li:not(.is-active):not(.selected):hover {
    opacity: 0.5;
  }

  /* 薄くなる・戻るをゆっくりに（#99） */
  .tab_side .tabbtn {
    transition: opacity 0.3s;
  }
}

/* ---- ポップアップの紹介文の見出し ----
   紹介文は Markdown から作った HTML。手元の簡易変換（search/lib/lib.php の v2_md_mini）は ## を h5 にずらすが、
   Parsedown を置くと ## は h2 のまま出るので、どの段でも同じ見た目になるよう全部まとめて指定する
   （pickup/day.css の .pd-item__desc と同じ）。
   timetable.css は mypage 系・info/rain.php からも読まれるので、このページだけに効くこちらに書く。
   pickup と同じく、太字・地の文（スマホ 12px / PC 14px）より 2px 大きく、文字はグラデーション（下。校正 #326）。
   マイページの Myスケジュールの小窓もこのファイルを読むので同じ見た目になる */
.program_content :is(h1, h2, h3, h4, h5, h6) {
  font-size: 14px;
  font-weight: bold;
  /* 前の段落との間を少し空ける（以前は 0 で、上の文にくっついて見えた） */
  margin-top: 4px;
}

/* 見出しらしく見せるため、文字を themevintage → themeocean のグラデーションにし、ocean の影を付ける
   （校正 #326。以前は【】で囲んでいた）。h6（小見出し）は下の指定のまま。文字の大きさ・太さは変えない。
   グラデを文字の幅に合わせるため fit-content にする（ブロックの幅いっぱいだと短い見出しが vintage 寄りの色だけになる） */
.program_content :is(h1, h2, h3, h4, h5) {
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(to right, var(--themevintage), var(--themeocean));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* text-shadow だと透明な文字の下から影が透けて濁るので、filter で付ける（day.css の企画名と同じ） */
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--themeocean) 45%, transparent));
}

@media screen and (min-width: 1024px) {
  .program_content :is(h1, h2, h3, h4, h5, h6) {
    font-size: 16px;
  }
}

/* h6（Markdown の ######）だけは小見出し扱い。グラデにせず、太字にせず下線、スマホ・PC とも 13px */
/* 上の :is() と詳細度が同じなので、後ろに書いて PC の 16px にも勝たせる */
.program_content h6 {
  font-size: 13px;
  font-weight: normal;
  text-decoration: underline;
}


/* =========================================================
   6. 横スクロールの手がかり
   =========================================================
   列が入りきらないとき（スマホ・講演会企画の多い日・1280px 未満の PC）は .scroll を横に送って見る。
   そのことが分かるように
     - スクロールバーを背景と区別できる色にする（以前は背景に溶けて灰色の細い線だった。#68 #122）
     - 続きがある側の端を白くぼかす（#90 #91）。どちら側に続きがあるかは
       timetable_compact.js が .scroll に data-more="right" / "left" / "both" で付ける
   ぼかしは mask で .scroll 自体を薄くする（重ねる要素を足さずに済み、スクロールしても端に留まる）。
   下端のスクロールバーの帯（8px）だけは mask の外にして、薄くしない。 */
/* ★ 標準の scrollbar-color / scrollbar-width は ::-webkit-scrollbar の無いブラウザ（Firefox）にだけ書く。
   Chrome（121〜）は標準の指定があると ::-webkit-scrollbar を無視する。スマホの Chrome は
   scrollbar-color で色を変えられないので、色の無い細いバーのままになっていた（#122 の再指摘） */
@supports not selector(::-webkit-scrollbar) {
  .venue_contents_group .scroll {
    scrollbar-color: var(--themeocean)
      color-mix(in srgb, var(--themeocean) 12%, transparent);
    scrollbar-width: thin;
  }
}

.venue_contents_group .scroll::-webkit-scrollbar {
  height: 8px;
}

.venue_contents_group .scroll::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--themeocean) 12%, transparent);
  border-radius: 4px;
}

.venue_contents_group .scroll::-webkit-scrollbar-thumb {
  background: var(--themeocean);
  border-radius: 4px;
}

.scroll[data-more] {
  --tt-fade: 28px;
  -webkit-mask:
    var(--tt-fade-image) top / 100% calc(100% - 8px) no-repeat,
    linear-gradient(#000, #000) bottom / 100% 8px no-repeat;
  mask:
    var(--tt-fade-image) top / 100% calc(100% - 8px) no-repeat,
    linear-gradient(#000, #000) bottom / 100% 8px no-repeat;
}

/* 企画の小窓（.popup）は .scroll の中にあり、mask はその中身すべてに掛かる（fixed の小窓も薄く切り取られる）。
   小窓が開いている間（timetable.js が style="display: block" にする）は、その表のぼかしを外す */
.scroll[data-more]:has(.popup[style*="display: block"]) {
  -webkit-mask: none;
  mask: none;
}

.scroll[data-more="right"] {
  --tt-fade-image: linear-gradient(
    to right,
    #000 calc(100% - var(--tt-fade)),
    transparent
  );
}

.scroll[data-more="left"] {
  --tt-fade-image: linear-gradient(
    to left,
    #000 calc(100% - var(--tt-fade)),
    transparent
  );
}

.scroll[data-more="both"] {
  --tt-fade-image: linear-gradient(
    to right,
    transparent,
    #000 var(--tt-fade),
    #000 calc(100% - var(--tt-fade)),
    transparent
  );
}

/* ===== 見出しの番号（#100） =====
   「01.ステージ・屋外企画」の番号と見出しの間を少し空ける */
.filter_head h2 > span:first-child {
  margin-right: 0.35em;
}

/* ===== 会場名の色（#102） =====
   場所のピン（img/icon/genre/card_place_3.svg の #345a6d）と同じ色にする */
.venue_contents_group .location_name {
  color: #345a6d;
}

@media screen and (max-width: 1023px) {
  .page-wrapper .tt_lead {
    padding-right: calc(10% - 26px);
  }
}

/* ===== 見出しの下の日付 =====
   表示中の日付を示す3つの長方形（index.php の .tt_day_row）。選ばれている日（.is-active）は
   timetable.js の showTab() が付け替える。押すと日付タブと同じく切り替わる */
.tt_day_row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
}
.tt_day_btn {
  /* スマホは見出しの幅（右の日付タブを避けた分）に3つ収める。min-width:0 で縮められるようにし、
     文字も詰める（「23日(月・祝)」が入る幅） */
  flex: 0 1 110px;
  min-width: 0;
  padding: 6px 2px;
  letter-spacing: 0;
  border: 1.5px solid var(--themevintage);
  background: transparent;
  color: var(--themevintage);
  border-radius: 3px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.tt_day_btn.is-active {
  background: var(--themeocean);
  border-color: var(--themeocean);
  color: var(--themewhite);
}
/* 狭いスマホ（360px 以下）は、320px 前後で「23日(月・祝)」が2行に折り返していた。
   見出し（上の 360px 以下の指定）と同じ幅から、間を 8→6px に詰め、文字を 11→10px にする */
@media screen and (max-width: 360px) {
  .tt_day_row {
    gap: 6px;
  }
  .tt_day_btn {
    font-size: 10px;
  }
}
@media screen and (min-width: 1024px) {
  .tt_day_row {
    gap: 12px;
  }
  .tt_day_btn {
    flex-basis: 150px;
    padding: 6px 4px;
    font-size: 15px;
    letter-spacing: inherit;
  }
}

/* =========================================================
   7. 校正 #249〜#290 の調整（2026-10-25）
   ========================================================= */

/* ===== 一番上の注記（目次の下の※）=====
   スマホ：画面の中央に（#249。目次は margin-right:-20px で中央に寄せてあるが、注記は左に寄っていた）。
           折り返すなら「、」の後で（#284。index.php の <wbr>）。
   PC   ：画面の中央に（以前は目次の左端にそろえていた。#288）。PC は .page-wrapper の左右の余白が同じなので、
           そのまま中央にそろえればよい。左右の余白 1/6 は目次（.a_link 2つ。1つが幅の 1/3）の幅に収めるため */
.page-wrapper .tt_lead {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 1023px) {
  .page-wrapper .tt_lead {
    margin-left: 20px;
    margin-right: -20px;
    padding: 0;
    text-align: center;
  }
}

@media screen and (min-width: 1024px) {
  .page-wrapper .tt_lead {
    padding: 0 calc(100% / 6);
    text-align: center;
  }
}

/* ===== 印の説明（#274 #275）===== */
.tt_legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin: -4px 0 18px;
  font-size: 12px;
  color: var(--themeocean);
}

.tt_legend_item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* カードの上の印と同じ絵を、カードと同じ地の色の四角に載せる */
.tt_legend_mark {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--themeocean) no-repeat center / 12px;
  border-radius: 3px;
}

.tt_legend_mark.tt_ticket_mark {
  background-image: url(/visitor/img/card_ticket_white.svg);
}

.tt_legend_mark.tt_lecture_mark {
  background-image: url(/visitor/img/icon/genre/academic_white.svg);
}

/* スマホ：タイムテーブルのページの一番上のものは、※の注記（.tt_lead）と同じく画面の中央に置く。
   .page-wrapper の右の余白が日付タブのぶん広く、そのまま中央にそろえると画面の中央より 20px 左に寄っていた。
   ※の注記と同じだけ右へずらす（中央にそろえる枠を注記と同じにする） */
@media screen and (max-width: 1023px) {
  .page-wrapper .tt_legend.tt_legend_lead {
    margin-left: 20px;
    margin-right: -20px;
  }
}

@media screen and (min-width: 1024px) {
  .tt_legend {
    font-size: 14px;
  }

  /* タイムテーブルのページの一番上のもの（tt_legend('tt_legend_lead')）は、※の注記と同じく画面の中央に置く
     （以前は目次の左端にそろえていた。#288） */
  .tt_legend.tt_legend_lead {
    justify-content: center;
    padding: 0 calc(100% / 6);
    margin-top: -18px;
  }

  .tt_legend_mark {
    width: 20px;
    height: 20px;
    background-size: 14px;
  }
}

/* ===== 企画名の折り返し（#277 #290 と、スマホ・PC 別の指定）=====
   timetable_lib.php の TT_CARD_BREAKS に当たった企画名は、指定した <br> の所でだけ改行する。
   改行した1行がカードより長いときだけ、その途中でも折り返す */
.tt_name_kept {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ===== カードの企画名の下が欠ける（#256。spica・cepha の p・g）=====
   行の高さ 1.1 で overflow:hidden のため、下に出る字の端が切れていた。下に少しだけ余白を足して切れないようにする */
.venue_contents_group.is-compact .event_name {
  padding-bottom: 0.12em;
}

/* ただし入りきらずに「…」で切っている企画名は余白を付けない。余白の分だけ、隠した次の行の上の端が
   かすかに見えていた（校正 #336。sparkle など）。.is-clamped は timetable_compact.js が付ける */
.venue_contents_group.is-compact .event_name.is-clamped {
  padding-bottom: 0;
}

/* ===== 夜祭の札（#251 #287）=====
   17:00 の文字との間を空け（以前は文字の真下にくっついていた）、札の中の文字を上下中央に */
.timepoint p[data-label]::before {
  top: calc(1.4em + 4px);
  padding: 0;
  line-height: 18px;
  height: 18px;
}

/* ===== 見出しの下の日付（#260 #261）===== */
@media screen and (min-width: 1024px) {
  .tt_day_row {
    margin-top: 10px;
  }

  .tt_day_btn:not(.is-active):hover {
    background: color-mix(in srgb, var(--themeocean) 12%, transparent);
  }
}

/* ===== 02. 講演会企画の上（#266）=====
   「雨天時の対応はこちら」のボタン（下の余白 30px）との間を広げる。margin は重なるので、大きいほうの値が間になる
   （スマホ 30 → 56px、PC 30 → 70px） */
#lecture_category {
  margin-top: 56px;
}

@media screen and (min-width: 1024px) {
  #lecture_category {
    margin-top: 70px;
  }
}

/* ===== 横スクロールのバー（#250 #258 #272）=====
   見えている所（つまみ）を太く濃く、見えていない所（溝）を細い線にする。
   溝は 8px の帯の真ん中に 2px の線を引いて細く見せる（::-webkit-scrollbar の高さはつまみと共通のため）。
   Firefox は ::-webkit-scrollbar が無いので、上の scrollbar-color のまま */
.venue_contents_group .scroll::-webkit-scrollbar-track {
  background: linear-gradient(
      color-mix(in srgb, var(--themeocean) 25%, transparent),
      color-mix(in srgb, var(--themeocean) 25%, transparent)
    )
    no-repeat center / 100% 2px;
}

/* つまみは帯の高さ（8px）いっぱいに。共通（common_general.css）の白い縁 3.5px が残っていて、
   つまみが 1px ほどの細い線にしか見えなかった */
.venue_contents_group .scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--themeocean) 80%, #000);
  border: none;
}

/* ===== スマホの端のぼかし（#263）=====
   幅を 28px → 18px に狭める（効果は残しつつ、カードが薄くなる範囲を減らす） */
@media screen and (max-width: 1023px) {
  .scroll[data-more] {
    --tt-fade: 18px;
  }
}

/* ===== 列の見出しの場所アイコン（#259）=====
   スマホでは外す。講演会の表で教室名が隣どうし近く、アイコンの分だけ窮屈だった。PC は列が広いので残す */
@media screen and (max-width: 1023px) {
  .venue_contents_group.is-compact .location img {
    display: none;
  }
}

/* ===== 小窓（#267 #282）=====
   スクロールバーが角の丸みからはみ出さないよう、バーの溝の上下を丸みの分だけ空ける（#267）。
   小窓は表のカード（.item）の中にあるので、小窓を押すとカードを押したことになり、スマホでは
   下のカードが押された色に光っていた（#282）。小窓が開いている間はカードのタップの色を消す */
.popup-content::-webkit-scrollbar-track {
  margin: 10px 0;
}

.item:has(> .popup[style*="display: block"]) {
  -webkit-tap-highlight-color: transparent;
}

/* ===== 場所で絞り込んだとき（コンパクトでない表示）=====
   スマホは開始時刻をカードの上の端、終了時刻を下の端に寄せる（#265。以前は上下に 7px ほど空いていた）。
   5分の coverdance などカードより文字が高い企画は、企画名をカードの上下中央に置く（#264）。
   余白の auto（timetable.css の .event_name）だと、はみ出すときに下にだけはみ出して下に寄って見えた */
@media screen and (max-width: 1023px) {
  .venue_contents_group:not(.is-compact) .item {
    padding-top: 1px;
    padding-bottom: 1px;
  }
}

.venue_contents_group:not(.is-compact) .item.item_label_below {
  padding-top: 0;
  padding-bottom: 0;
}

.venue_contents_group:not(.is-compact) .item.item_label_below .event_name {
  margin: 0;
  line-height: 1;
}

/* ===== 夜祭の企画が無い場所に絞ったとき（校正 #328）=====
   timetable.js が .timepoint と .contents_wrapper に .intelligent（講演会の表と同じ 10:00〜17:00）を付ける。
   17:00 より後の目盛り・線と、17:00 の夜祭の札を隠す */
.timepoint.intelligent :is(.line08, .line09, .line10),
.contents_wrapper.intelligent :is(.line08, .line09, .line10) {
  display: none;
}

.timepoint.intelligent p[data-label]::before {
  content: none;
}

/* ===== 自前の横スクロールバー（校正 #330）=====
   timetable_compact.js が表（.wrap）の上と下に作る。上はスマホ・PC とも、下はスマホだけ。
   溝は薄いグレー、つまみは ocean（スマホの標準のバーは地と同じ色で見えにくかった） */
.tt_bar {
  position: relative;
  height: 3px; /* PC は 5px（下の @media） */
  margin: 6px 0;
  background: #dfe3e3;
  border-radius: 4px;
  cursor: pointer;
  touch-action: none;
}

.tt_bar[hidden] {
  display: none;
}


.tt_bar_thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--themeocean);
  border-radius: 4px;
  cursor: grab;
}

.tt_bar_thumb.is-dragging {
  cursor: grabbing;
}

/* 上のバーと上の会場名、下の会場名と下のバーの間を同じ（約 14px）にそろえる（校正。以前は下のほうが広かった）。
   会場名の箱（.location）は文字の上下に余白を持ち、その余白がスマホと PC で違うので、値を分けている。
   上のバーは見出しの下の日付ボタンから少し離す（校正。以前は 11px で近かった）。
   タイムテーブルのページとマイページは .ttwrapper .venue_contents_group の margin-top 25px の中に置く */
.tt_bar_top {
  margin: 0 0 14px; /* 場所名との間を広げた（校正。以前は 6px） */
}

.ttwrapper .tt_bar_top {
  margin-top: -1px;
}

.tt_bar_bottom {
  margin-top: 1px;
}

@media screen and (min-width: 1024px) {
  /* PC の .wrap は上に 15px の margin（timetable.css）を持ち、この margin と重なる */
  .tt_bar_top {
    margin-bottom: -5px;
  }

  .tt_bar_bottom {
    margin-top: -30px;
  }
}

/* 下も自前のバーにし、標準のバーは隠す（スマホはつまみの色を変えられないため。PC も上下で同じ見た目・間隔にそろえる） */
.venue_contents_group .scroll {
  scrollbar-width: none;
}

.venue_contents_group .scroll::-webkit-scrollbar {
  display: none;
}

@media screen and (min-width: 1024px) {
  .tt_bar {
    height: 5px;
  }
}

/* ===== カードの企画名の改行（校正 #334 と、スマホ・PC 別の指定。timetable_lib.php の TT_CARD_BREAKS）=====
   コンパクト表示の企画名の <br> は上で隠しているが、tt_br の付いた <br> だけは改行させる。
   tt_br_sp はスマホだけ、tt_br_pc は PC だけで改行する（場所で絞り込んだ表示でも同じ） */
.venue_contents_group.is-compact .event_name br.tt_br {
  display: inline;
}

@media screen and (max-width: 1023px) {
  .venue_contents_group .event_name br.tt_br.tt_br_pc {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .venue_contents_group .event_name br.tt_br.tt_br_sp {
    display: none;
  }
}

/* ===== coverdance などカードの外に名前を出す企画（校正 #335。timetable_lib.php の TT_LABEL_BELOW_NAMES）=====
   時間はどの日も出さない（カードを押せば小窓で見られる）。
   22日は真下にプロレスのカードがあって名前が重なるので、名前をカードの右側に「← coverdance」の形で出す。
   21日は今までどおりカードの下 */
.venue_contents_group.is-compact .item.item_label_below .item_time {
  display: none;
}

.venue_contents_group.is-compact[data-day="day2"] .item.item_label_below .event_name {
  top: 50%;
  left: 100%;
  right: auto;
  margin: 0 0 0 3px;
  transform: translateY(-50%);
  max-width: none;
}

.venue_contents_group.is-compact[data-day="day2"] .item.item_label_below .event_name::before {
  content: "← ";
}

/* 絞り込みパネルの見出しの「（複数選べます）」 */
.filter-panel_sub {
  font-weight: normal;
}

/* ===== 場所で絞り込んだとき（コンパクト表示のまま。校正）=====
   列（.stage）を表の幅いっぱいまで広げ、カードは同じ幅のまま列の中央に置く。
   時刻の線・現在時刻の線は列の幅に引かれるので、表の左右の端まで伸びる
   （以前は、複数選ぶと列が中央に寄ったままで、線が途中で切れていた）。
   列が表に入りきらないときは広がらず、今までどおり横にスクロールする */
.venue_contents_group.is-compact .flex.is-filtered .stage {
  flex: 1 0 var(--tt-col);
  width: auto;
}

/* 1か所に絞ったとき（.single-venue）も、カードはコンパクトの幅（4章の PC 用の 240px より優先） */
.venue_contents_group.is-compact .flex.single-venue .contents_wrapper {
  grid-template-columns: 1fr var(--tt-card) 1fr;
}

/* ===== 時間を出せない短いカード（.is-tiny）は、時間をカードの下に出す（校正）=====
   以前は時間を出さず、押して小窓で見るしかなかった。coverdance など名前ごと外に出す企画（.item_label_below）は対象外 */
.venue_contents_group.is-compact .item.is-tiny:not(.item_label_below) {
  overflow: visible;
}

.venue_contents_group.is-compact .item.is-tiny:not(.item_label_below) .item_time {
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1;
  width: max-content;
  margin-top: 1px;
  padding: 0 3px;
  transform: translateX(-50%);
  font-weight: bold;
  color: var(--themeocean);
  background: var(--themewhite);
  border-radius: 2px;
}

.venue_contents_group.is-compact .item.item_nf.is-tiny:not(.item_label_below) .item_time {
  color: var(--themevintage);
}

/* ===== coverdance の名前は、22日もカードの上に出す（校正。#335 では右側だった）===== */
.venue_contents_group.is-compact[data-day="day2"] .item.item_label_below .event_name {
  top: auto;
  bottom: 100%;
  left: 50%;
  margin: 0 0 1px;
  transform: translateX(-50%);
}

.venue_contents_group.is-compact[data-day="day2"] .item.item_label_below .event_name::before {
  content: none;
}


/* ===== スクロールバーの見た目（校正）=====
   溝を場所（列）の数の区切り（.tt_bar_seg。灰色の角丸の棒）に分けて間を空け、
   それぞれの区切りの中で、その列が画面に見えている分だけを ocean で塗る（.tt_bar_fill）。
   つまみ（.tt_bar_thumb）は見えなくし、つかんで動かすための当たりの範囲としてだけ使う。
   塗る範囲は timetable_compact.js の updateBars が決める */
.tt_bar {
  height: 5px;
  background: none;
  border-radius: 0;
}

.tt_bar_segs {
  display: flex;
  gap: 4px;
  height: 100%;
}

.tt_bar_seg {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #c9cdcd;
  border-radius: 999px;
}

.tt_bar_fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--themeocean);
}

.tt_bar .tt_bar_thumb {
  z-index: 1;
  top: -6px;
  height: calc(100% + 12px);
  background: transparent;
}

@media screen and (min-width: 1024px) {
  .tt_bar {
    height: 6px;
  }

  .tt_bar_segs {
    gap: 6px;
  }
}

/* 時間をカードの上に出す企画（timetable_lib.php の TT_TIME_ABOVE。下の企画と重なるもの。校正） */
.venue_contents_group.is-compact .item.item_time_above.is-tiny:not(.item_label_below) .item_time {
  top: auto;
  bottom: 100%;
  /* カードとの間。1px では時間の地の色がカードの上端に重なって隠していた（校正。タイムテーブル・雨天時とも） */
  margin: 0 0 3px;
}

/* ===== 小窓の企画名が長いとき（スマホ）=====
   HIAS のように企画名が3〜4行になると、企画名の箱（.name）の max-height（70px）からはみ出し、
   下線・団体名・時刻の行に重なっていた。スマホは企画名と団体名を小さくし、箱の高さの上限を外して、
   長い名前のときは時刻の行と紹介文をその分だけ下へ下げる */
@media screen and (max-width: 1023px) {
  .popup .name {
    max-height: none;
  }
  .popup .programname {
    font-size: 14px;
    line-height: 1.5;
  }
  .popup .circlename {
    font-size: 12px;
  }
  /* 幅の狭い画面（320px など）では、min-width（310px + 余白）で小窓が画面の右へはみ出していた。
     画面の左右に 16px ずつ残す幅にする */
  .popup-content {
    box-sizing: border-box;
    min-width: 0;
    width: calc(100% - 32px);
    max-width: 420px;
  }
  .popup .block,
  .popup .program_content {
    min-width: 0;
  }
  /* 団体名と時刻の行の間（以前は幅の 10% で、企画名が長いと間が空きすぎた） */
  .popup .block:has(.poptime) {
    margin-top: 16px;
  }
}