/*****************************************************************************
CSS only for Ticket seat page
*****************************************************************************/

/* seat color
-----------------------------------------*/
.Color01::before { background-color: #e60012; } /* エキサイティング */
.Color02::before { background-color: #ddd9d9; } /* プレミアシート ベンチ裏 */
.Color03::before { background-color: #fcc800; } /* アリーナベンチ側 S席 */
.Color04::before { background-color: #989ff4; } /* アリーナベンチ側 A席、S席・スタンド指定席 西サイド */
.Color05::before { background-color: #2996d3; } /* ブルテオンシート */
.Color06::before { background-color: #00dde8; } /* アリーナ ベンチ向かい側、ベンチ側B */
.Color07::before { background-color: #f2b588; } /* アリーナ 西エンド・アリーナ 北エンド */
.Color08::before { background-color: #f2b588; } /* ビジターシート西エンド */
.Color09::before { background-color: #5668e8; } /* ペアシート・BLTシート */
.Color10::before { background-color: #2d5a9f; } /* アリーナシート ベンチ側S テーブル（Asue） */
.Color11::before { background-color: #f39700; } /* 2F A席 */
.Color12::before { background-color: #67ce9d; } /* 2F B・C席、3Fスタンド（Asue） */
.Color13::before { background-color: #ea4ea3; } /* 3階指定席 前方 */
.Color14::before { background-color: #d6d4d5; } /* 3階指定席 後方 */
.Color15::before { background-color: #e9d627; } /* 車椅子 */
.Color16::before { background-color: #002853; } /* スタンド指定席 南エンド、ブルテオンシート東エンド（Asue）、アリーナ西エンド（Asue） */
.Color17::before { background-color: #51ffc4; } /* スタンド自由席 東サイド */
.Color18::before { background-color: #a38ab9; } /* アリーナ ベンチ向かい側 B席 */
.Color19::before { background-color: #5996a6; } /* アリーナシート ベンチA */
.Color20::before { background-color: #ffffff; border:solid 1px #ccc; } /* アリーナシート ベンチA */
.Color21::before { background-color: #524398; } /* アリーナシート ベンチA（Asue） */
.Color22::before { background-color: #b2b6cb; } /* ビジターシート西エンド（Asue） */
.Color23::before { background-color: #2666b1; } /* 2F 西側・東側（Asue） */

/* seat color（おおきにアリーナ舞洲）
-----------------------------------------*/
.Ticket--maishima .Color01::before { background-color: #545125; } /* プレミアシートベンチ裏 */
.Ticket--maishima .Color02::before { background-color: #968627; } /* エキサイティングシート */
.Ticket--maishima .Color03::before { background-color: #66c2bd; } /* アリーナベンチ側 S席 */
.Ticket--maishima .Color04::before { background-color: #efe92e; } /* アリーナベンチ側 A席 */
.Ticket--maishima .Color05::before { background-color: #edeaaf; } /* アリーナベンチ側 B席 */
.Ticket--maishima .Color06::before { background-color: #e21b14; } /* アリーナベンチ向かい側 S席 */
.Ticket--maishima .Color07::before { background-color: #cedc38; } /* アリーナベンチ向かい側 A席 */
.Ticket--maishima .Color08::before { background-color: #b394a9; } /* アリーナベンチ向かい側 B席 */
.Ticket--maishima .Color09::before { background-color: #1b4c9f; } /* ブルテオンシート */
.Ticket--maishima .Color10::before { background-color: #e48b9e; } /* アリーナ南テーブルシート */
.Ticket--maishima .Color11::before { background-color: #cd3f91; } /* アリーナ南ビジターシート */
.Ticket--maishima .Color12::before { background-color: #dcdddd; } /* 2階スタンド席ベンチ側 ボックスシート 6人用 */
.Ticket--maishima .Color13::before { background-color: #ab7db5; } /* 2階スタンド席ベンチ側 S */
.Ticket--maishima .Color14::before { background-color: #fabe00; } /* 2階スタンド席ベンチ側 A */
.Ticket--maishima .Color15::before { background-color: #bbd4ef; } /* 2階スタンド席ベンチ側 B */
.Ticket--maishima .Color16::before { background-color: #ed6e1c; } /* 2階スタンド席ベンチ側 コーナー */
.Ticket--maishima .Color17::before { background-color: #e61d53; } /* 2階スタンド席 北側・南側 */
.Ticket--maishima .Color18::before { background-color: #f1f1e6; } /* 3階スタンド席階スタンド席 */
.Ticket--maishima .Color19::before { background-color: #e9d626; } /* 2階スタンド 車いす席 */

/* seat color（GLION ARENA KOBE）
-----------------------------------------*/
.Ticket--gilionarena .Color01::before { background-color: #efae1b; } /* エキサイティングシート */
.Ticket--gilionarena .Color02::before { background-color: #1135cc; } /* スタンドS席 ベンチ／ベンチ向かい側 */
.Ticket--gilionarena .Color03::before { background-color: #5ec4db; } /* スタンドS席 ブルテオンシート エンド側 */
.Ticket--gilionarena .Color04::before { background-color: #e861f2; } /* スタンドS席 ビジター */
.Ticket--gilionarena .Color05::before { background-color: #aec7df; } /* スタンドS席  車椅子 */
.Ticket--gilionarena .Color06::before { background-color: #3271ae; } /* スタンドA席  ベンチ／ベンチ向かい側 */
.Ticket--gilionarena .Color07::before { background-color: #06f4e2; } /* スタンドA席  西エンド側 */
.Ticket--gilionarena .Color08::before { background-color: #0673f7; } /* アッパースタンド ベンチ／ベンチ向かい側 */
.Ticket--gilionarena .Color09::before { background-color: #00edff; } /* アッパースタンド 西エンド側 */
.Ticket--gilionarena .Color10::before { background-color: #f8cbc8; } /* アッパースタンド 車椅子席 */


/* .Map
-----------------------------------------*/
.Map {
  margin-bottom: 21px;
}
@media screen and (max-width: 767px) {
  .Map {
    padding: 45px 0;
  }
}
.Map__img {
  text-align: center;
}
.Map__img img {
  max-width: 100%;
  height: auto;
}
.Map__text {
  display: none;
}
@media screen and (max-width: 767px) {
  .Map__text {
    display: block;
    padding: 0 20px;
    margin-top: 45px;
  }
}
@media screen and (max-width: 767px) {
  .Map__list {
    margin-top: 24px;
  }
}
@media screen and (max-width: 767px) {
  .Map__list li {
    font-size: 14px;
    font-size: 1.4rem;
    text-align: left;
    text-indent: -1.5em;
    padding-left: 1.5em;
  }
}
@media screen and (max-width: 767px) {
  .Map__list li small {
    font-size: 12px;
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  .Map__list li:not(:last-child) {
    margin-bottom: 8px;
  }
}
@media screen and (max-width: 767px) {
  .Map__list li::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    position: relative;
    top: 4px;
    margin-right: 5.5px;
  }
}

/* Price
-----------------------------------------*/
.Price {
  margin-top: 39px;
}

/* PriceList
-----------------------------------------*/
.PriceList {
  background-color: #fff;
  border: solid 1px #d6d6d6;
  margin-bottom: 16px;
}
@media screen and (max-width: 767px) {
  .PriceList {
    height: 80svh;
    overflow: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}
.PriceList table {
  font-size: 14px;
  font-size: 1.4rem;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
@media screen and (max-width: 976px) {
  .PriceList table {
    font-size: 13px;
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 767px) {
  .PriceList table {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

.PriceList__group1 {
  width: 8%;
}
.PriceList__group2 {
  width: 8px;
}
.PriceList__group3 {
  width: 30%;
}
.PriceList__group4 {
  width: 15%;
}
/* .PriceList__group5 {
  width: 34.5%;
}
.PriceList__group6 {
  width: 34.5%;
}
.PriceList__group7 {
  width: 10%;
} */
@media screen and (max-width: 976px) {
  .PriceList__group1 {
    width: 7.5%;
  }
  .PriceList__group3 {
    width: 16.3%;
  }
  .PriceList__group4 {
    width: 15%;
  }
  /* .PriceList__group5 {
    width: 35.5%;
  }
  .PriceList__group6 {
    width: 35.5%;
  }
  .PriceList__group7 {
    width: 11.5%;
  } */
}
@media screen and (max-width: 767px) {
  .PriceList__group1 {
    width: 48px;
  }
  .PriceList__group3 {
    width: 200px;
  }
  .PriceList__group4 {
    width: 83px;
  }
  /* .PriceList__group5 {
    width: 215px;
  }
  .PriceList__group6 {
    width: 215px;
  }
  .PriceList__group7 {
    width: 80px;
  } */
}

.PriceList img {
  max-width: 100%;
  height: auto;
}
.PriceList th {
  text-align: center;
  vertical-align: middle;
  height: 30px;
  font-weight: bold;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  padding: 5px;
  white-space: nowrap;
  box-sizing: border-box;
}
.PriceList td {
  font-weight: bold;
  width: 9.5%;
  height: 68px;
  padding: 5px 10px;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid #d6d6d6;
  border-right: 1px dashed #999999;
  box-sizing: border-box;
}
@media screen and (max-width: 976px) {
  .PriceList td {
    padding: 5px 8px;
  }
}
@media screen and (max-width: 767px) {
  .PriceList td {
    height: 58px;
  }
}
.PriceList td:last-child {
  border-right: none;
}

/* ----- THEAD ----- */
.PriceList__head {
  position: -webkit-sticky;
  position: sticky;
  top: 66px;
  left: 0;
  z-index: 2;
}
@media screen and (max-width: 976px) {
  .PriceList__head {
    top: 0;
  }
}
.PriceList__head th {
  background-color: #d6d6d6;
}
@media screen and (max-width: 976px) {
  .PriceList__head th {
    white-space: normal;
  }
}
.PriceList__empty {
  border-left: 1px solid #fff;
}
@media screen and (max-width: 767px) {
  .PriceList__empty {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
  }
}

/* ----- TBODY ----- */
.PriceList__item:first-child td {
  border-top: none;
}

@media screen and (max-width: 767px) {
  .PriceList__item th {
    width: 48px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

.PriceList__item th p {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  /* -ms-writing-mode: tb-rl; */
  text-orientation: upright;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: 0.05em;
}
.PriceList__item th p span {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

.PriceList__item td small {
  font-size: 12px;
  font-size: 1.2rem;
}
.PriceList__item td sup {
  font-size: 10px;
  font-size: 1rem;
  vertical-align: text-top;
}

.PriceList__area {
  color: #fff;
  background-color: #0666FF;
  border-left: 1px solid #fff;
}
@media screen and (max-width: 767px) {
  .PriceList__area {
    left: 0;
  }
}

.PriceList__type {
  background-color: #d6d6d6;
}
@media screen and (max-width: 767px) {
  .PriceList__type {
    left: 35px;
  }
}

.PriceList .PriceList__color {
  position: relative;
  border-right: none;
}
@media screen and (max-width: 767px) {
  .PriceList .PriceList__color {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 48px;
    z-index: 1;
  }
}
@media screen and (max-width: 767px) {
  .PriceList--detail .PriceList__color {
    left: 0;
  }
}
.PriceList .PriceList__color::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.PriceList .PriceList__seat {
  text-align: left;
  position: relative;
  padding-left: 15px;
}
@media screen and (max-width: 976px) {
  .PriceList .PriceList__seat {
    padding: 0 10px;
  }
}

.PriceList .PriceList__info {
  font-weight: normal;
  text-align: left;
  white-space: normal;
  padding: 10px;
}
.PriceList__info img {
  margin-bottom: 15px;
}

.PriceList .PriceList__note {
  font-weight: normal;
  text-align: left;
  white-space: normal;
  padding: 10px;
}

/* SeatType
-----------------------------------------*/
.SeatType {
  background-color: #fff;
  width: 90vw;
  max-width: 1200px;
  height: auto;
  position: relative;
  padding: 91px 110px 110px;
  margin: 75px auto;
}
@media screen and (max-width: 1200px) {
  .SeatType {
    padding: 5.9% 7.1% 7.1%;
  }
}
.SeatType__title {
  font-size: 30px;
  line-height: 1.6;
  color: #004ea2;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .SeatType__title {
    font-size: 22px;
  }
}
.SeatType__detail {
  margin-top: 53px;
}
@media screen and (max-width: 767px) {
  .SeatType__detail {
    margin-top: 36px;
  }
}
.SeatType__wrapper {
  display: flex;
}
@media screen and (max-width: 767px) {
  .SeatType__wrapper {
    display: block;
  }
}

.SeatType .NextPage {
  margin-top: 77px;
}
@media screen and (max-width: 767px) {
  .SeatType .NextPage {
    margin-top: 54px;
  }
}

/* SeatImg
-----------------------------------------*/
.SeatImg {
  width: 38%;
}
@media screen and (max-width: 767px) {
  .SeatImg {
    width: 100%;
  }
}
.SeatImg img {
  max-width: 100%;
  height: auto;
}
.SeatImg .Memolist {
  margin-top: 24px;
}
.SeatMap {
  text-align: center;
  padding: 8px;
  border: 1px solid #d6d6d6;
}
.SeatMap img {
  width: 50%;
}
.SeatSlide {
  margin-top: 20px;
}
.SeatSlide__main {
  margin: 0 auto;
}
.SeatSlide__sub .slick-list {
  width: 85%;
  margin: 10px auto 0;
}
@media screen and (max-width: 767px) {
  .SeatSlide__sub .slick-list {
    width: 80%;
  }
}
.SeatSlide__sub li {
  margin: 0 4px;
}

/* SeatExplain
-----------------------------------------*/
.SeatExplain {
  flex: 1;
  padding-left: 22px;
}
@media screen and (max-width: 767px) {
  .SeatExplain {
    padding-left: 0;
    margin-top: 24px;
  }
}
.SeatExplain--notice {
  color: #d8002e;
}
.SeatExplain > p {
  font-size: 16px;
  line-height: 1.7;
}
@media screen and (max-width: 767px) {
  .SeatExplain > p {
    font-size: 14px;
  }
}

.SeatText__title {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
  padding-left: 1em;
  margin-bottom: 7px;
}
@media screen and (max-width: 767px) {
  .SeatText__title {
    margin-bottom: 5px;
  }
}
.SeatText__title::before {
  position: absolute;
  top: 3px;
  left: 1px;
  content: "●";
  color: #AAA;
  font-size: 12px;
}
.SeatText__SubTitle {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
  margin-bottom: 7px;
}
@media screen and (max-width: 767px) {
  .SeatText__SubTitle {
    margin-bottom: 5px;
  }
}
.SeatText__list {
  font-size: 16px;
  margin-bottom: 1.5em;
}
@media screen and (max-width: 767px) {
  .SeatText__list {
    font-size: 14px;
  }
}
.SeatText__list li {
  text-indent: -1em;
  padding-left: 1em;
}

.SeatPrice {
  margin-top: 22px;
}
@media screen and (max-width: 767px) {
  .SeatPrice {
    display: block;
  }
}
.SeatPrice__wrapper {
  display: flex;
}
@media screen and (max-width: 767px) {
  .SeatPrice__wrapper {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
  }
}
.SeatPrice__category {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
  .SeatPrice__category {
    font-size: 14px;
  }
}
.SeatPrice__tbl {
  background-color: #fff;
  table-layout: fixed;
  width: 100%;
  border: 1px solid #D6D6D6;
}
@media screen and (max-width: 767px) {
  .SeatPrice__tbl {
    width: 100%;
    table-layout: auto;
  }
}
.SeatPrice__tbl + .SeatPrice__tbl {
  border-left: none;
}
@media screen and (max-width: 767px) {
  .SeatPrice__tbl + .SeatPrice__tbl {
    border-top: none;
    border-left: 1px solid #D6D6D6;
    margin-top: 10px;
  }
}
.SeatPrice__tbl th {
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #D6D6D6;
  border-bottom: 1px solid #D6D6D6;
  padding: 8px 5px;
}
@media screen and (max-width: 767px) {
  .SeatPrice__tbl th {
    font-size: 11px;
    font-size: 1.1rem;
    padding: 8px 3px;
  }
}
.SeatPrice__title {
  color: #fff;
  background-color: #434341;
}
.SeatPrice__subTitle {
  background-color: #FFFDE8;
}
.SeatPrice__tbl td {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  width: calc(100% / 5);
  border-right: 1px solid #D6D6D6;
  border-bottom: 1px solid #D6D6D6;
  padding: 1em .4em;
}
@media screen and (max-width: 767px) {
  .SeatPrice__tbl td {
    font-size: 12px;
  }
}
/* .SeatPrice__tbl th:last-child,
.SeatPrice__tbl td:last-child {
  border-right: none;
}
.SeatPrice__tbl tr:last-child td {
  border-bottom: none;
} */

/* slick
-----------------------------------------*/
.slick-slide img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.slick-slider div {
  transition: none!important;
}
.slick-track.slick-disabled {
  transform: none!important;
}

.nav-arrow {
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: #000;
  border-radius: 50%;
  cursor: pointer;
}
.nav-arrow::before {
  display: inline-block;
  content: '';
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  width: 5px;
  height: 5px;
  position: absolute;
}

.prev-arrow {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.prev-arrow::before {
  top: 50%;
  left: 55%;
  -webkit-transform: translate(-50%, -55%) rotate(45deg);
  transform: translate(-50%, -55%) rotate(45deg);
}

.next-arrow {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.next-arrow::before {
  top: 50%;
  left: 45%;
  -webkit-transform: translate(-50%, -45%) rotate(-135deg);
  transform: translate(-50%, -45%) rotate(-135deg);
}

/* magnific-popup
-----------------------------------------*/
.mfp-content .mfp-close {
  font-size: 0;
  width: 75px;
  height: 75px;
  top: -75px;
  right: 20px;
}
.mfp-content .mfp-close::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 25%;
  display: inline-block;
  width: 55px;
  height: 55px;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
}
.mfp-content .mfp-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 55px;
  height: 55px;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
}

/* CategoryNav
-----------------------------------------*/
.CategoryNav--anchor {
  border-bottom: none;
  margin-top: 80px;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .CategoryNav--anchor {
    margin-top: 60px;
  }
}
.CategoryNav--anchor ul {
  text-align: right;
}
.CategoryNav--anchor ul li:last-child {
  margin-right: 0;
}
.CategoryNav--anchor ul li a {
  color: #0666FF;
  border-bottom: none;
  text-decoration: underline;
  padding: 0 0 0 20px;
}
.CategoryNav--anchor ul li a:link,
.CategoryNav--anchor ul li a:visited {
  color: #0666FF;
  text-decoration: underline;
}
.CategoryNav--anchor ul li span,
.CategoryNav--anchor ul li a:hover,
.CategoryNav--anchor ul li a:focus,
.CategoryNav--anchor ul li a:active {
  color: #0666FF;
  border-bottom: none;
  text-decoration: none;
}
.CategoryNav--anchor ul li.CategoryNav__anchor a::before,
.CategoryNav--anchor ul li.CategoryNav__anchor a:hover::before,
.CategoryNav--anchor ul li.CategoryNav__anchor a:focus::before,
.CategoryNav--anchor ul li.CategoryNav__anchor a:active ::before {
  border-top: solid 2px #0666FF;
  border-right: solid 2px #0666FF;
}
@media screen and (max-width: 767px) {
  .CategoryNav--anchor ul li.CategoryNav__anchor a::before {
    margin: -5px 0 0 0;
  }
}
.CategoryNav--anchor ul li.CategoryNav__anchor a::after,
.CategoryNav--anchor ul li.CategoryNav__anchor a:hover::after,
.CategoryNav--anchor ul li.CategoryNav__anchor a:focus::after,
.CategoryNav--anchor ul li.CategoryNav__anchor a:active ::after {
  background-color: #0666FF;
  margin-top: 7px;
}

/* Ticket__sec
-----------------------------------------*/
.Ticket__sec[id^="A_"]::before {
  content: "";
  display: block;
  height: 95px;
  margin-top: -95px;
  visibility: hidden;
}
@media screen and (max-width: 767px) {
  .Ticket__sec[id^="A_"]::before {
    content: "";
    display: block;
    height: 90px;
    margin-top: -90px;
    visibility: hidden;
  }
}
.CategoryNav--anchor + .Ticket__sec {
  margin-top: 10px;
}