@charset "UTF-8";

/* =========================================================
   タイムテーブルの基本スタイル
   =========================================================
   このファイルを読むページ（57 内の実測。56/ は別物）

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

   ルート直下の mypage.php は56回版を絶対URLで読んでいるので、このファイルとは無関係。

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

   ここ（timetable.css）
     表そのものの基本部品。info/rain.php にも同じ見た目で出てよいもの。

   timetable_top.css
     index.php にしかない要素・状態の見た目。
     .tab_side / .filter-* / .venue_contents_group.is-compact / .flex.single-venue

   既知の例外: 末尾の「会場カラムの幅」「場所タブの折り返し」は
   .venue_contents_group 配下で index.php 専用だが、表の寸法という
   性質からこちらにまとめてある。新しく足すときは
   「寸法（幅・行高）はこのファイルの末尾／UI部品は timetable_top.css」
   という既存の並びに合わせること。

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

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

   11章の PC 一括ブロック（約200行）はこの方針より前からある例外。
   新しい PC 上書きをそこに追記せず、上の方針に従うこと。
   （.location_inner と .current-time-display の PC ブロックも同様に
     ベース規則の直後へ寄せられるが、今回は手を付けていない）

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

      1. ページ全体          スクロールバー / .page-wrapper / h2::after
      2. 日付タブ            .tab_group / .tabbtn / li.is-active / .bottom.selected
      3. ページ内リンクと注記 .a_link / .tt_note / .tothetop
      4. 表の外枠            .ttwrapper / .wrap / .scroll / .flex / .stage
      5. 会場名              .location / .location_name
      6. 時間軸              .timepoint / .current-time-display / .line00〜.line10
      7. カードのグリッド     .contents_wrapper / .timeline / .current-time-line
      8. 企画カード          .item / .item_nf / 時刻 / .event_name / アイコン
      9. ポップアップ        .popup / .popup-content / .nfbtn / .close
     10. 表トップへのリンク   .tttop / .top
     11. PC 一括上書き       ※上記の例外ブロック
     12. 場所タブ            .venue_tab_panel / .venue_tabbtn / li.venue-active
     13. 場所コンテンツレイアウト .venue_content / .flex.single-venue
     14. 会場カラムの幅       .venue_contents_group
     15. 場所タブの折り返し
   ========================================================= */

/* ========================================= */
/* ===== 1. ページ全体 ===== */
/* ========================================= */

/* ポップアップを開くと body に overflow:hidden を掛けてスクロールを止める（timetable.js）。
   そのときスクロールバーが消えて画面幅が変わり、固定ヘッダーや右の日付タブまで
   横にずれるので、スクロールバーの幅ぶんの場所を常に空けておく。
   開いている間はつまみだけが消え、溝が残る。 */
html {
  scrollbar-gutter: stable;
}

main::-webkit-scrollbar-thumb {
  border: 3.5px solid black;
}
main::-webkit-scrollbar-track {
  background-color: black;
}

@media screen and (max-width: 1023px) {
  h2::after {
    background-image: none;
  }
}

.page-wrapper {
  font-size: 13px;
  padding: 10%;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .page-wrapper {
    font-size: 17px;
    padding: 0 15%;
  }
}

/* ========================================= */
/* ===== 2. 日付タブ ===== */
/* ========================================= */
/* index.php では timetable_top.css の .tab_side が
   これを画面右側の縦タブに作り替えている。 */

.tab_group {
  display: flex;
  text-align: center;
  margin: 0 auto;
  width: 99%;
}

.tabbtn {
  width: 33%;
  height: 50px;
  line-height: 50px;
  list-style: none;
  background-color: var(--themeskyblue);
  position: relative;
}

.tabbtn a {
  display: block;
  width: 100%;
  height: 100%;
  /* 非選択タブは淡い水色地なので文字は濃紺。
     選択中は下の li.is-active a / .bottom.selected a で白に戻す。 */
  color: var(--themeocean);
  font-weight: bold;
}

/* 
.tabbtn.is-active:hover::after {
    background-color: var(--themeblack);
    opacity: 0.2;
} */

/* .tabbtn a:hover {
    color: var(--themewhite);
} */

li.is-active {
  background-color: var(--themeocean);
}

li.is-active::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 7px solid var(--themeocean);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

li.is-active a {
  color: var(--themewhite);
  font-weight: bold;
}

.bottom.selected {
  background-color: var(--themeocean);
}

.bottom.selected::after {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 7px solid var(--themeocean);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.bottom.selected a {
  color: var(--themewhite);
  font-weight: bold;
}

/* ========================================= */
/* ===== 3. ページ内リンクと注記 ===== */
/* ========================================= */
/* .a_link の見た目の本体は common_general.css。ここでは文字サイズだけ上書きする。
   .tothetop（表の下の「タイムテーブルトップへ」）も同じ意匠に揃えてある。 */

.a_link {
  width: calc(100% / 3);
}

.a_link a {
  font-size: 12px;
}

.tt_note {
  font-size: 12px;
}

/* ページ内リンク（common_general.css の .a_link）と同じ意匠に揃える。
   .a_link は「左の棒・右の棒・矢印」を3つの疑似要素で描いているが、
   .tothetop は <a> 1要素なので疑似要素が1つしか余らない。
   棒は要素自身の border-left / border-right で描き、::before を矢印に使う。
   矢印は「上へ戻る」リンクなので、文字の上に上向きで置く
   （.a_link の rotate(135deg) = 下向き に対して rotate(-45deg)）。 */
.tothetop {
  /* 文字幅ぶんの箱にして、左右の棒を文字のすぐ横に置く */
  width: fit-content;
  margin: 30px auto;
  /* 上は矢印のぶん、左右は棒と文字の間隔（.a_link は列幅で間隔を稼いでいる）。
     上を 10px にして矢印と文字が重ならないようにする（#95。以前は 4px で矢印が文字にかかっていた） */
  padding: 10px 24px 4px;
  position: relative;
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--themeocean);
  font-size: 12px;
  font-weight: bold;
  transition: all 0.5s;
}

/* .a_link a::before と同じ角。bottom→top、rotate(135deg)→rotate(-45deg) で
   下向きを上向きにする。絶対配置には text-align:center が効かないので
   left:50% + translateX(-50%) で中央に置く。 */
.tothetop::before {
  content: "";
  position: absolute;
  display: inline-block;
  top: -5px;
  left: 50%;
  width: 0.8em;
  height: 0.8em;
  border: 1.5px solid var(--themeocean);
  border-left: 0;
  border-bottom: 0;
  transform: translate(-50%, 25%) rotate(-45deg);
}

.tothetop:hover {
  scale: 1.1;
}

/* この章の PC 文字サイズをまとめて置く。
   ★必ずベース規則より後ろに置くこと。前に置くと同詳細度で後勝ちされ、
     .tothetop が 12px のままになる（実際にそうなっていた）。 */
@media screen and (min-width: 1024px) {
  .a_link a {
    font-size: 16px;
  }

  .tt_note {
    font-size: 15px;
  }

  /* .tothetop はページ内リンクと同じ意匠なので文字サイズも揃える */
  .tothetop {
    font-size: 16px;
  }
}

/* ========================================= */
/* ===== 4. 表の外枠 ===== */
/* ========================================= */
/* 入れ子は .ttwrapper > .wrap > (.timepoint | .scroll > .flex > .stage)。
   .timepoint が .scroll の外側にいるため、表の中の線を時刻ラベルまで
   はみ出させることはできない（14章の単独会場表示の注記を参照）。 */

.ttwrapper {
  width: 98%;
  margin: auto;
  overflow: visible;
}

.wrap {
  display: flex;

  overflow: visible;
}

/* 左の .timepoint と同じ幅の見えない列を右端に置き、表を左右中央にする。
   幅は時刻ラベルと同じ文字・同じ大きさで取り、margin は .timepoint の
   margin-right（スマホ3% / PC1%）と対。どちらかを変えたら両方直す。 */
.wrap::after {
  content: "20:00";
  visibility: hidden;
  flex: 0 0 auto;
  font-size: 13px;
  margin-left: 3%;
}

.scroll {
  overflow-x: scroll;
  overflow-y: visible;
  width: 100%;
}
#day1_intelligent .scroll,
#day2_intelligent .scroll,
#day3_intelligent .scroll,
#day3_honkan .scroll,
#day1_field .scroll,
#day2_field .scroll,
#day3_field .scroll {
  overflow-x: hidden !important;
  overflow-y: unset !important;
}
@media screen and (min-width: 1024px) {
  #day1_intelligent .scroll,
  #day2_intelligent .scroll,
  #day3_intelligent .scroll,
  #day3_honkan .scroll,
  #day1_field .scroll,
  #day2_field .scroll,
  #day3_field .scroll {
    width: 50%;
  }

  #day1_intelligent .stage,
  #day2_intelligent .stage,
  #day3_intelligent .stage,
  #day3_honkan .stage,
  #day1_field .stage,
  #day2_field .stage,
  #day3_field .stage {
    width: 100%;
  }
  #day1_intelligent .flex,
  #day2_intelligent .flex,
  #day3_intelligent .flex,
  #day3_honkan .flex,
  #day1_field .flex,
  #day2_field .flex,
  #day3_field .flex {
    width: 100%;
  }
  #day1_intelligent .wrap,
  #day2_intelligent .wrap,
  #day3_intelligent .wrap,
  #day3_honkan .wrap,
  #day1_field .wrap,
  #day2_field .wrap,
  #day3_field .wrap {
    justify-content: center;
  }
}

.flex.dayone {
  width: 150%;
  overflow: visible;
}

.flex {
  display: flex;
  justify-content: space-between;
  width: 200%;
  overflow: visible;
}

.flex.single-stage {
  width: 100%;
  justify-content: center;
}

.stage {
  width: 50%;
  overflow: visible;
}

.stage.single-stage {
  width: 100%;
}

/* ========================================= */
/* ===== 5. 会場名 ===== */
/* ========================================= */

.location {
  text-align: center;
  height: 35px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 140px;
}

@media screen and (min-width: 1024px) {
  .location_inner {
    width: 170px;
  }
}

.location img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

/* 会場名。もとは <h3> だったが、common_general.css の h3 の装飾
   （五角形マーカー h3::before / margin-left 10% / padding-left 25px）が
   表の中では邪魔になるため div にした。見た目に必要な指定だけここに持つ。
   PC の 18px は下の min-width:1024px ブロック。 */
.location_name {
  font-family: "Kiwi Maru", sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--themeblack);
  margin: 0;
  /* <br> で2行になる会場名（「法人本部棟前<br>ステージ」など）を
     .location の固定高さに収めるため、継承の 1.5 より詰める。
     コンパクト表示側（timetable_top.css）と同じ値。 */
  line-height: 1.15;
}

/* ========================================= */
/* ===== 6. 時間軸 ===== */
/* ========================================= */
/* .timepoint（時刻ラベル）と 7章の .contents_wrapper（カードの土台）は
   同じ行数・同じ行高でなければ横に並べたときにずれる。必ず対で変更する。
   .timepoint の margin-top は .location の高さに対する位置合わせで、
   行の高さとは無関係（5章の .location の注記も参照）。 */

.timepoint {
  font-size: 13px;
  display: grid;
  grid-template-rows: repeat(120, 10px);
  margin-right: 3%;
  margin-top: 31px;
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* timepoint上に表示するリアルタイム時刻
   通常の時刻ラベル（.line00 など）と数字の左端を揃える。
   右端基準（right + translateX）だと文字数や padding で左端がずれるため、
   左端基準にしたうえで、背景の padding ぶんだけ外へ出して文字を揃えている。
   padding を変えるときは --ctd-padding-x を変えれば左端は揃ったままになる。 */
.current-time-display {
  --ctd-padding-x: 4px;
  position: absolute;
  left: calc(-1 * var(--ctd-padding-x));
  background-color: var(--themeskyblue);
  color: var(--themeocean);
  /* 数字が箱の中で 1px 下に寄って見えたので、上の余白を下へ回して持ち上げる（校正 #289。箱の高さは同じ） */
  padding: 0 var(--ctd-padding-x) 2px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}
.current-time-display::before {
  content: "";
  width: 13px;
  height: 13px;
  background-color: var(--themeocean);
  border-radius: 50%;
  position: absolute;
  left: -16px;
  top: 20%;
  /* 点滅はゆっくり（校正 #262。以前は 0.5s） */
  -webkit-animation: blink 1.2s ease-in-out infinite alternate;
  -moz-animation: blink 1.2s ease-in-out infinite alternate;
  animation: blink 1.2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (min-width: 1024px) {
  .current-time-display {
    --ctd-padding-x: 6px;
    font-size: 12px;
    padding: 0 var(--ctd-padding-x) 4px; /* PC は 2px 下に寄っていた（校正 #289） */
  }
}

.timepoint.day1day2 {
  grid-template-rows: repeat(84, 10px);
}

.timepoint.lastday {
  grid-template-rows: repeat(60, 10px);
}

.timepoint.gym {
  grid-template-rows: repeat(84, 10px);
}

.timepoint.intelligent {
  grid-template-rows: repeat(84, 10px);
}

.line00 {
  grid-row-start: 1;
}

.line01 {
  grid-row-start: calc(1 + 12 * 1);
}
.line02 {
  grid-row-start: calc(1 + 12 * 2);
}
.line03 {
  grid-row-start: calc(1 + 12 * 3);
}
.line04 {
  grid-row-start: calc(1 + 12 * 4);
}
.line05 {
  grid-row-start: calc(1 + 12 * 5);
}
.line06 {
  grid-row-start: calc(1 + 12 * 6);
}
.line07 {
  grid-row-start: calc(1 + 12 * 7);
}
.line08 {
  grid-row-start: calc(1 + 12 * 8);
}
.line09 {
  grid-row-start: calc(1 + 12 * 9);
}
.line10 {
  grid-row-start: calc(1 + 12 * 10);
}

/* ========================================= */
/* ===== 7. カードのグリッド ===== */
/* ========================================= */
/* 行数は 6章の .timepoint と対。列は「左余白 / カード / 右余白」の3本で、
   .timeline と .current-time-line は grid-column:1/4 で全列にまたがる。
   つまり線の長さは .stage の幅そのものになる。 */

.contents_wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: repeat(120, 10px);
  margin-bottom: 30px;
  overflow: visible;
}

.contents_wrapper.day1day2 {
  grid-template-rows: repeat(84, 10px);
}

.contents_wrapper.lastday {
  grid-template-rows: repeat(60, 10px);
}

.contents_wrapper.gym {
  grid-template-rows: repeat(84, 10px);
}

.contents_wrapper.intelligent {
  grid-template-rows: repeat(84, 10px);
}

.intelli {
  margin-top: 40px;
}

.timeline {
  border-top: 1px solid var(--thememix);
  grid-column: 1/4;
  z-index: -5;
}

/* 現在時刻表示用のスタイル */
.current-time-line {
  border-top: 3px solid var(--thememix);
  grid-column: 1/4;
  position: relative;
  z-index: 50;
  overflow: visible;
}

/* ========================================= */
/* ===== 8. 企画カード ===== */
/* ========================================= */
/* .item が通常企画、.item_nf が夜祭企画。カード内の文字はすべて <p> なので、
   hover 時の色は 11章の .item:hover > p 1本で揃う仕組みになっている。
   カード内の文字色は必ず「.item の直下の p」（> p）に絞って書く。
   ポップアップも .item の中にあるので、> を付けないとポップアップの文字まで
   白や濃紺になる（以前はそれを .popup-content p の !important で黒に戻していた）。
   ポップアップの文字は共通の p（common_general.css）の黒のまま。
   .item_nf は border:none で縁を outline で描いている点に注意。 */

.item {
  background-color: var(--themeocean);
  border: 2px solid var(--themeocean);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  grid-column-start: 2;
  padding: 3%;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
}

.item_nf {
  position: relative;
  background-color: var(--themevintage);
  outline: solid 1.5px var(--themevintage);
  /* 縁はカードの内側に描く。外側だと縁の分だけ上にはみ出し、17:00 開始のカードの上の辺が
     17:00 の線より上に見えていた（校正 #254） */
  outline-offset: -1.5px;
  border: none;
}

.item_nf > p {
  color: var(--themewhite);
}

/* 短いカードで時刻がカードの外に出たとき（timetable.js の .start_out / .end_out）。
   上の .item_nf > p の白が勝って背景に溶けるので、夜祭の色で上書きする */
.item_nf > p.start_out,
.item_nf > p.end_out {
  color: var(--themevintage);
}

.starttime {
  font-weight: bold;
  font-size: 12px;
  color: var(--themewhite);
  align-self: flex-start;
  margin-top: 0;
  z-index: 1;
}
.endtime {
  font-weight: bold;
  font-size: 12px;
  color: var(--themewhite);
  align-self: flex-end;
  margin-bottom: 0;
  z-index: 1;
}
.start_in {
  position: absolute;
}

.end_in {
  position: absolute;
}

.start_out {
  position: absolute;
  top: -17px;
  color: var(--themeocean);
}

.end_out {
  position: absolute;
  bottom: -17px;
  color: var(--themeocean);
}

.start_out_nf {
  position: absolute;
  top: -19px;
  color: var(--themevintage) !important;
}
.end_out_nf {
  position: absolute;
  bottom: -18px;
  color: var(--themevintage) !important;
}

.tt_ticket .field_mark {
  display: flex;
  width: 100%;
}

.tt_ticket::before {
  content: url(/visitor/img/card_ticket_white.svg);
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  bottom: 0;
  left: 5px;
}

.field_mark {
  content: url(/visitor/img/icon/genre/performance_themewhite.svg);
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  bottom: 3px;
  left: 5px;
}

.event_name {
  font-size: 12px;
  font-weight: bold;
  padding: 0 5px;
  margin: auto 0;
  text-align: center;
  line-height: 1.2;
  color: var(--themewhite);
}

.HiunCity {
  font-size: 10px;
}

.TFC {
  font-size: 11px;
}

.event_name_nf {
  color: white;
}

.pc_br {
  display: none;
}

/* ========================================= */
/* ===== 9. ポップアップ ===== */
/* ========================================= */
/* カードを押すと開く企画詳細。position:fixed の全画面オーバーレイなので、
   表の overflow やコンパクト表示の影響を受けない。z-index は 10000 で
   timetable_top.css の右固定タブ（1500）より前面。 */

/* ポップアップ全体のスタイル */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  /* 100vw はスクロールバーの溝まで含むので、溝を残すと中央がずれる。100% は溝を除いた幅 */
  width: 100%;
  /* 高さは画面の上端から下端まで（bottom: 0）。以前の height: 100svh は「ブラウザのバーが出ているときの高さ」なので、
     スマホでスクロールしてバーが引っ込むと下に隙間ができ、下のナビのあたりだけ暗くならなかった（校正 #327）。
     念のため、外側にも同じ色の影を大きく広げて、どこかに隙間ができても暗くなるようにする */
  bottom: 0;
  height: auto;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

/* ポップアップ内容のスタイル */
.popup-content {
  background-color: var(--themewhite);
  padding: 20px;
  border-radius: 10px;
  max-width: 90%;
  min-width: 310px;
  max-height: 90vh;
  overflow-y: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* スクロールバーは細く。色は全体（common_general.css）と同じ ocean。
   Chrome は scrollbar-width / scrollbar-color があると ::-webkit-scrollbar を
   無視するので、標準の指定は ::-webkit-scrollbar が無いブラウザ（Firefox）だけに書く。 */
.popup-content::-webkit-scrollbar {
  width: 6px;
}
.popup-content::-webkit-scrollbar-track {
  background-color: transparent;
}
.popup-content::-webkit-scrollbar-thumb {
  background: var(--themeocean);
  border-radius: 3px;
  border: none;
}
@supports not selector(::-webkit-scrollbar) {
  .popup-content {
    scrollbar-width: thin;
    scrollbar-color: var(--themeocean) transparent;
  }
}
.popup_cancel {
  display: none;
}
.item_cancel .popup_cancel {
  display: block !important;
}

/* 中止の企画のカードは不透明度50%にする。
   .popup が .item の中にあるので、.item に opacity を掛けると
   ポップアップまで半透明になる。背景・縁・文字を個別に50%にしている。 */
.item.item_cancel {
  background-color: color-mix(in srgb, var(--themeocean) 50%, transparent);
  border-color: color-mix(in srgb, var(--themeocean) 50%, transparent);
  box-shadow: none;
}
.item_nf.item_cancel {
  background-color: color-mix(in srgb, var(--themevintage) 50%, transparent);
  outline-color: color-mix(in srgb, var(--themevintage) 50%, transparent);
}
.item_cancel > p {
  opacity: 0.5;
}
@media screen and (min-width: 1024px) {
  .item.item_cancel:hover {
    background-color: color-mix(in srgb, var(--themeskyblue) 50%, transparent);
    border-color: color-mix(in srgb, var(--themeocean) 50%, transparent);
  }
  .item_nf.item_cancel:hover {
    outline-color: color-mix(in srgb, var(--themeocean) 50%, transparent);
  }
}

.block {
  display: flex;
  min-width: 290px;
}

/* 時刻・場所・お気に入りの行。間隔は各要素の margin ではなく gap で取る。
   上下の余白は行（この .block）に持たせ、中の3つは margin 0 で上下中央に揃える
   （以前は各要素の margin-top がばらばらで、お気に入りだけ下にずれていた） */
.block:has(.poptime) {
  gap: 5%;
  align-items: center;
  margin: 10% 0 2% 0;
}

.square {
  width: 75px;
  height: 75px;
}

.name {
  flex-direction: column;
  width: 67%;
  max-height: 70px;
  margin: 0 4%;
}

/* 企画名の下線は1本（#104 #114。以前は共通パーツ h2 と同じ2本で、
   スマホでは2本の太さが違って見えていた）。マイページの小窓も同じ見た目になる */
.programname {
  font-family: "Kiwi Maru", sans-serif;
  font-weight: 500;
  font-size: 16px;
  width: 100%;
  margin: 0 2%;
  padding-bottom: 7px;
  position: relative;
  border-bottom: solid 1.5px var(--themeocean); /* 下側の線 */
}

/* 小窓の企画名の下線は、おすすめ企画（search/pickup/persona.css の .pk-intro__text）と同じ「線＋✨」。
   線は右から 5〜33px を空けて2本で描き（::before）、その切れ目に飾り（img/desc_deco_clear.svg）を置く（::after）。
   飾りの縦の中央を線に合わせる */
.popup .programname {
  border-bottom: none;
  padding-bottom: 9px;
  /* 共通の p は両端揃え（justify）で、折り返した行の文字の間が大きく空いていた（校正 #278。
     半角を含む名前や、折り返し位置を決めた名前でとくに目立った）。左揃えにする */
  text-align: left;
}
.popup .programname::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background:
    linear-gradient(var(--themeocean), var(--themeocean)) no-repeat left / calc(100% - 33px) 100%,
    linear-gradient(var(--themeocean), var(--themeocean)) no-repeat right / 5px 100%;
}
.popup .programname::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 0; /* 線（1px）の真ん中に飾りの点の高さを合わせる（校正 #271。0.5px だと点が線より少し上に見えた） */
  width: 26px;
  aspect-ratio: 211 / 181; /* SVG の viewBox と同じ比率 */
  background: url(/visitor/img/desc_deco_clear.svg) no-repeat center / contain;
  transform: translateY(50%);
  pointer-events: none;
}

.circlename {
  width: 100%;
  margin: 2%;
  padding-top: 1%;
}

.nfbtn {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.nfbtn a {
  width: 42px;
  height: 42px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  /* z-index: 9999999; */
  border: 1px solid var(--themevintage);
  background: var(--themevintage);
  /* border-radius: 50%; */
  /* transform: rotate(45deg); */
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -15px;
}

.nfbtn a::before {
  position: absolute;
  content: "";
  display: block;
  width: 45px;
  height: 45px;
  transform: rotate(45deg);
  /* border-radius: 50%; */
  border: 1px solid var(--themevintage);
  /* background: white; */
  /* opacity: 40%; */
  /* top: 3px; */
  /* left: 3px; */
}
.nfbtn a::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  /* border-radius: 50%; */
  transform: rotate(45deg);
  border: solid 1px var(--themevintage);
  background: var(--themewhite);
  bottom: -5px;
  right: 16%;
}

.nfbtn a:hover::before {
  transform: rotate(-45deg);
  transition: all 0.3s;
}

.poptime,
.poplocation {
  display: flex;
  height: 25px;
  align-items: center;
  /* アイコンと文字の間は時刻・場所で同じ 4px（#106。以前は % と margin:auto で、行の幅によって間が違っていた） */
  gap: 4px;
}

.tim {
  margin: 0;
  font-size: 14px;
}

.loc {
  margin: 0;
  max-width: 11em;
  min-width: 4em;
  font-size: 14px;
  white-space: nowrap;
}

.clock,
.marker {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.popup_ticket,
.popup_field {
  display: flex;
  margin-bottom: 2%;
  margin-top: 2%;
  font-size: 12px;
  align-items: center;
}

.popup_ticket img,
.popup_field img {
  width: 18px;
  height: 18px;
}

.card_heart_tt {
  width: 20px;
  height: 18px;
  cursor: pointer;
  /* お気に入りは時刻・場所と並べず、行の右端に置く（#107） */
  margin-left: auto;
}

.card_heart_tt img {
  transition: transform 0.2s;
}

/* PC はカーソルを合わせると少し大きくなる（#96） */
@media (hover: hover) and (pointer: fine) {
  .card_heart_tt:hover img {
    transform: scale(1.2);
  }
}

.program_content {
  font-size: 12px;
  min-width: 290px;
  margin-top: 10px;
}

.btn_ticket {
  margin-top: 9px;
}

/* ポップアップの「詳細はこちら」。共通の .btn は下 30px。
   紹介文との間をスマホでも少し空ける（校正 #317。PC は下の @media で 50px） */
.popbtn {
  margin-top: 32px;
  margin-bottom: 10px;
}

/* 閉じるボタンのスタイル。
   小窓の中身をスクロールしても右上に残るよう sticky にする（#70）。
   .popup-content の padding（20px）の中に食い込ませて、以前と同じ右上 5px の位置に置き、
   下の margin で自分の高さを打ち消して、中身の並びには場所を取らない */
.popup-content .close {
  position: sticky;
  display: block;
  width: 25px;
  height: 25px;
  top: -15px;
  margin: -15px -15px -10px auto;
  text-align: center;
  background: var(--themeocean);

  border-radius: 12.5px;
  cursor: pointer;
  z-index: 10;
}

/* ×は図形（SVG）で丸の中央に描く。以前は 1px の線2本を回して translate(-50%) で寄せており、
   半ピクセルの位置に来る画面では×が丸の中心からずれて見えた */
.popup-content .close {
  background: var(--themeocean)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M7.5 7.5l10 10M17.5 7.5l-10 10' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / 100% 100%;
}

.nf {
  font-size: 11px;
  position: absolute;
  top: -26px;
  padding: 1px 3px;
  text-align: center;
  border: solid 1.5px white;
  color: var(--themewhite);
  margin: auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  left: 4px;
  pointer-events: none;
  font-weight: 700;
  background-color: var(--themevintage);
}

/* ========================================= */
/* ===== 10. 表トップへのリンク ===== */
/* ========================================= */

.tttop {
  text-align: center;
  margin-bottom: 45px;
}

.top {
  position: relative;
}

.top::before {
  display: block;
  content: "\f078";
  color: var(--themeocean);
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  bottom: 0;
  left: calc(50% - 90px);
  transform: rotate(180deg);
}

/* ========================================= */
/* ===== 11. PC 一括上書き ===== */
/* ========================================= */
/* 4章〜10章の PC 上書きが、章をまたいでここに集められている。
   このファイルより前からある置き方で、今から書くものは各章のベース規則の
   直後に置くこと（冒頭「メディアクエリの置き方」を参照）。 */

@media screen and (min-width: 1024px) {
  /* 4章 表の外枠 */
  .wrap {
    margin-top: 15px;
  }

  .scroll {
    overflow: unset;
    width: 96%;
  }

  .timepoint {
    /* width: 4%; */
    margin: 66px 1% 0 0;
  }

  .wrap::after {
    margin-left: 1%;
  }

  .flex {
    width: 100%;
  }

  .flex.dayone {
    width: 100%;
  }

  /* PCの会場名は18px。<br> で2行になっても収まる高さにする
     （18px × 1.15 × 2行 = 41.4px ≤ 45px。コンパクト表示の16pxなら36.8px）。
     .location の高さは .timepoint の margin-top（PC 66px）と対で
     全列の .contents_wrapper の開始位置を決めているので、増やした10pxは
     margin-bottom から引いて合計を変えない（35+40 = 45+30 = 75px）。
     こうすれば .timepoint 側は触らなくてよい。 */
  .location {
    height: 45px;
    margin-bottom: 30px;
  }

  .top::before {
    left: calc(50% - 120px);
  }

  .intelli {
    margin-top: 75px;
  }

  .event_name {
    font-size: 14px;
  }

  .HiunCity,
  .TFC {
    font-size: 14px;
  }

  .pc_br {
    display: block;
  }

  .starttime {
    font-size: 13px;
  }

  .endtime {
    font-size: 13px;
  }

  .start_out {
    top: -19px;
  }

  .end_out {
    bottom: -20px;
  }
  .item:hover {
    background-color: var(--themeskyblue);
    border-color: var(--themeocean);
    border-width: 2px;
    transition: background-color 0.3s;
  }
  /* カード内の文字はすべて <p>（.event_name / .event_name_nf /
     .starttime / .endtime / .item_time）なので、この1本で色が揃う。 */
  .item:hover > p {
    color: var(--themeocean);
    transition: color 0.3s;
  }

  /* 夜祭カードも通常カードと同じ hover にする。もとは背景を --indoor に
     変えるだけで文字は白のままだったが、#324e5a → #415c70 は明度差が
     ほとんど無く hover したことが伝わらなかった。
     .item_nf は border:none で縁を outline で描いているので、
     border-color ではなく outline-color を変える
     （旧 border-color: var(--stage) は効いていなかった）。
     文字色は上の .item:hover > p に任せる。 */
  .item_nf:hover {
    background-color: var(--themeskyblue);
    outline-color: var(--themeocean);
    transition: background-color 0.3s;
  }

  /* timetable.js がポップアップ表示中などに付ける。背景は hover と同じまま、
     カーソルだけ既定に戻す。文字色も .item:hover > p がそのまま効く。 */
  .item.no-hover:hover,
  .item_nf.no-hover:hover {
    background-color: var(--themeskyblue);
    cursor: default;
  }

  .tt_ticket::before,
  .field_mark::before {
    left: 8px;
    width: 35px;
    height: 35px;
  }

  .medama::before {
    width: 28px;
    height: 28px;
  }

  .popup-content {
    width: 55vw;
    max-height: 70vh;
    overflow-y: auto;
    padding: 30px;
    max-width: 600px;
  }

  .square {
    width: 125px;
    height: 125px;
  }

  .name {
    width: 70%;
  }

  .programname {
    font-size: 20px;
    width: 100%;
  }

  .circlename {
    margin: 2% 2% 3% 2%;
  }

  .nfbtn a {
    width: 74px;
    height: 74px;
    font-size: 16px;
    top: 2px;
  }

  .nfbtn a::before {
    width: 70px;
    height: 70px;
  }

  .nfbtn a::after {
    width: 13px;
    height: 13px;
  }

  .tim {
    font-size: 17px;
  }

  .loc {
    font-size: 17px;
  }

  .clock,
  .marker {
    width: 17px;
    height: 17px;
  }

  .popup_ticket,
  .popup_field {
    font-size: 14px;
  }

  .program_content {
    font-size: 14px;
  }

  .popbtn {
    margin: 50px 0 0 0;
  }

  .btn_ticket {
    margin-top: 70px;
  }

  .block:has(.poptime) {
    margin-top: 3%;
  }

  .nf {
    font-size: 16px;
    top: -32px;
  }
  .location img {
    height: auto;
  }

  .location_name {
    font-size: 17px;
  }
}

/* ========================================= */
/* ===== 12. 場所タブ ===== */
/* ========================================= */

.venue_tab_panel {
  margin: 15px 0;
}

.venue_tab_group {
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
}

.venue_tabbtn {
  flex: 1;
  min-width: 70px;
  height: 40px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  background-color: var(--themeskyblue);
  position: relative;
  font-size: 11px;
}

.venue_tabbtn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* 非選択タブは淡い水色地なので文字は濃紺 */
  color: var(--themeocean);
  font-weight: bold;
  text-decoration: none;
  padding: 2px 4px;
}

li.venue-active {
  background-color: var(--themeocean);
}

/* 選択中は濃紺地。文字色の指定が無く .venue_tabbtn a（濃紺）を継承すると
   同色で読めなくなるため、ここで白に戻す。 */
li.venue-active a {
  color: var(--themewhite);
}

li.venue-active::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 6px solid var(--themeocean);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* ===== 13. 場所コンテンツレイアウト ===== */

/* .venue_content はレイアウト上は透過させ、.stage を .flex の直接の子として扱う。
   1会場に複数教室がある場合（本館2室・講義棟3室）でも各教室が独立した列になり、
   .timepoint の目盛りと行が揃う。列の幅は下のブレークポイント別ルールで決める。
   timetable.js の applyVenueState() は .venue_content の style.display を
   出し入れするだけなので、'none' で非表示・'' で display:contents 復帰となる。 */
.venue_content {
  display: contents;
}

/* 個別タブ時: 選択した場所だけ表示 */
.flex.single-venue {
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .venue_tabbtn {
    min-width: 100px;
    height: 45px;
    font-size: 13px;
  }

  /* hover は色を変えず、不透明度を下げるだけ */
  .venue_tab_group li:not(.venue-active):hover {
    opacity: 0.5;
  }
}

/* ========================================= */
/* ===== 14. 会場カラムの幅 ===== */
/* ========================================= */
/* .venue_contents_group 配下に限定する。timetable.css は mypage 系・rain_tt からも
   読まれており、それらは .stage / .contents_wrapper を旧構造のまま持っているため。
   カード幅 = .contents_wrapper の中央カラム。 */

/* 列が画面に収まらないときは横スクロール */
.venue_contents_group .scroll {
  overflow-x: auto;
  width: 100%;
}

/* スマホ: 1列 210px 固定 → カードは常に 165px */
@media screen and (max-width: 1023px) {
  .venue_contents_group .flex {
    width: max-content;
    min-width: 100%;
    justify-content: center;
  }

  .venue_contents_group .stage {
    flex: 0 0 210px;
    width: 210px;
    min-width: 0;
  }

  .venue_contents_group .contents_wrapper {
    grid-template-columns: 1fr 165px 1fr;
  }
}

/* PC: 1列 300px（カード240px）を基本とし、収まらない場合だけ 225px（カード180px）
   まで縮める。225px でも収まらなければ横スクロールに切り替わる。
   .contents_wrapper は既定の grid(10% 80% 10%) のままなので、
   カード幅は .stage の 80% ＝ 240px〜180px で追従する。 */
@media screen and (min-width: 1024px) {
  .venue_contents_group .flex {
    width: 100%;
    /* 収まるときは中央寄せ。あふれたとき左端が掴めなくなるのを safe で防ぐ */
    justify-content: center;
    justify-content: safe center;
  }

  .venue_contents_group .stage {
    flex: 0 1 300px;
    width: auto;
    min-width: 225px;
  }
}

/* ========================================= */
/* ===== 15. 場所タブの折り返し ===== */
/* ========================================= */
/* 1行目に「すべて」、2行目に個別会場タブを並べる。
   .venue_tab_group は flex-wrap: wrap なので、先頭を全幅にすれば残りが次行へ送られる。 */
.venue_tab_group .venue_tabbtn:first-child {
  flex: 0 0 100%;
}