@charset "UTF-8";
/* 色 */
.sticky-table thead th:nth-child(-n+3) {
  background-color: #f8cbad;
}

.sticky-table thead th:nth-child(n+4) {
  background-color: #b4c6e7;
}

.sticky-table .tr_color td {
  background-color: #fff2cc;
}

.sticky-table .tr_excluded td:first-child,
.sticky-table .tr_excluded td:nth-child(2),
.sticky-table .tr_excluded td:nth-child(3) {
  filter: brightness(0.5);
}

.price_high {
  background-color: #008000 !important;
  color: #fff;
}

.price_middle {
  background-color: #86dd15 !important;
}

.price_low {
  background-color: #c3f385 !important;
  border-bottom: 1px solid #aaa !important;
}
.price_low.--annotation {
  background-color: #FFFF33 !important;
}

.excluded {
  background-color: #888 !important;
  color: #fff;
}

/* 調整 */
.accordion-content {
  padding: 10px;
  margin-bottom: 20px;
}

@media screen and (max-width: 599px) {
  .table_img {
    width: 60px;
    max-width: 100%;
  }
}
.table_bellunaDome td,
.table_tokyoDome td {
  text-align: center;
}

@media screen and (max-width: 599px) {
  .table_tokyoDome td {
    padding: 5px !important;
  }
}
@media screen and (max-width: 599px) {
  .table_bellunaDome thead th:first-child {
    width: 130px;
    min-width: 130px;
  }
}

@media screen and (max-width: 599px) {
  .table_bellunaDome thead th:nth-child(2) {
    width: 200px;
    min-width: 200px;
  }
}

@media screen and (max-width: 599px) {
  .table_bellunaDome thead th:nth-child(n+3) {
    width: 100px;
    min-width: 100px;
  }
}

/* =========================================
   ベースの箱設定
   ========================================= */
/* 外枠：右と下の影を配置する基準 */
.scroll-container {
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
  /* はみ出た影を隠す */
  overflow: hidden;
}

/* 内枠：実際にスクロールするエリア */
.table-wrapper {
  width: 100%;
  /* ★ここで高さを決めます（pxでもvhでもOK） */
  height: 400px;
  /* 縦横スクロールを有効化 */
  overflow: auto;
}

/* テーブル基本 */
.sticky-table {
  width: 100%;
  border-collapse: separate;
  /* sticky必須 */
  border-spacing: 0;
  white-space: nowrap;
}

.sticky-table .col-2 {
  /* 必要に応じて折り返しを許可 */
  white-space: normal;
}

.sticky-table th,
.sticky-table td {
  padding: 5px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background-clip: padding-box;
  text-align: center;
  vertical-align: middle;
}

/* =========================================
   固定設定 (position: sticky)
   ========================================= */
/* --- 1. ヘッダー行の固定 --- */
.sticky-table thead th {
  position: sticky;
  top: -2px;
  z-index: 10;
  /* データより上 */
  border-right-color: #555;
  /* 影のアニメーション用 */
  transition: box-shadow 0.3s;
}

/* --- 2. 左列の固定 (1列目 & 2列目) --- */
.sticky-table .fixed-col {
  position: sticky;
  z-index: 35;
  /* データより上、ヘッダーより下 */
}

/* 1列目の位置と幅 */
.sticky-table .col-1 {
  left: 0;
  width: 80px;
  min-width: 80px;
}
@media screen and (min-width: 600px) {
  .sticky-table .col-1 {
    width: 60px;
    min-width: 60px;
  }
}

/* 2列目の位置と幅 */
.sticky-table .col-2 {
  /* 1列目の幅分ずらす */
  left: 80px;
  width: 70px;
  min-width: 70px;
  /* 隙間埋め（背景色と同じ色の壁） */
  box-shadow: 1px 0 0 #f9f9f9;
  /* 影のアニメーション用 */
  transition: box-shadow 0.3s;
}
@media screen and (min-width: 600px) {
  .sticky-table .col-2 {
    left: 60px;
    width: 80px;
    min-width: 80px;
  }
}

/* --- 3. 左上の交差点 (ヘッダーかつ左列) --- */
.sticky-table thead th.fixed-col {
  z-index: 40;
  /* 最前面 */
  /* box-shadow: 1px 0 0 #333; */
  /* 隙間埋めも黒 */
}

/* =========================================
   影の制御 (JSのクラスで出し入れ)
   ========================================= */
/* --- A. 上の影 (ヘッダーの下に出る) --- */
/* 1. まず、th自体のbox-shadowは消す */
.scroll-container.is-scrolled-y thead th {
  box-shadow: none !important;
  border-bottom-color: transparent; /* 線を消して影と馴染ませる */
  overflow: visible; /* 影が枠外にはみ出せるようにする */
}

/* 2. 代わりに「擬似要素」で真下にグラデーションの帯をつける */
.scroll-container.is-scrolled-y thead th::after {
  content: "";
  position: absolute;
  /* 位置合わせ：ヘッダーの下端に張り付ける */
  left: 0;
  bottom: -8px; /* 影の長さ分だけ下にずらす */
  width: 100%; /* セルの横幅いっぱいに広げる */
  height: 8px; /* 影の長さ */
  /* 上から下へのグラデーション（濃い黒→透明） */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
  pointer-events: none; /* マウス操作を邪魔しない */
  z-index: 1;
}

/* --- B. 左の影 (2列目の右に出る) --- */
.scroll-container.is-scrolled-x .col-2::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -12px; /* 外側に出す */
  width: 12px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
  pointer-events: none;
  z-index: 1;
}

/* 左上の角(ヘッダー部分) */
.scroll-container.is-scrolled-x thead th.col-2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -12px;
  width: 12px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
  pointer-events: none;
  z-index: 1;
}

/* --- C. 右の影 (右端が隠れている時) --- */
/* scroll-container の右端に被せる */
.scroll-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 12px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
  pointer-events: none;
  z-index: 30;
  /* ヘッダーよりさらに上 */
  /* 初期状態は非表示 */
  opacity: 0;
  transition: opacity 0.3s;
}

/* クラスがついたら表示 */
.scroll-container.has-hidden-right::after {
  opacity: 1;
}

/* --- D. 下の影 (下端が隠れている時) --- */
/* scroll-container の下端に被せる */
.scroll-container::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.3s;
}

/* クラスがついたら表示 */
.scroll-container.has-hidden-bottom::before {
  opacity: 1;
}
/*# sourceMappingURL=ticket_group2026.css.map */