@charset "UTF-8";
/*
* style_ticket.css
* description : THE GRAND SLAM [ TICKET GUIDE ]
*
* Created  2021/11/4.
* Last Update 2021/11/4.
*/




/* INDEX */
/*[[[ Contents ]]]*/

/*----- [[[ TICKET for Pages ]]] -----*/
/*[[[[[ Ticket Information ]]]]]*/
/*[[[[[ Sales Information ]]]]]*/
/*[[[[[ Category Common ]]]]]*/











/*
[[[ Contents ]]]
*/

.btn-flex {
   display: flex;
   gap: 20px;
   justify-content: center;
}

@media screen and (max-width: 768px) {
.btn-flex {
    display: block;
 }

}
/*----- [[[ TICKET for Pages ]]] -----*/

/*[[[[[ Ticket Information ]]]]]*/

@media screen and (max-width: 991px) and (min-width: 768px) {
 #ticket-anchor li a {
  font-size: 2vw;
 }

} /* @media screen and (max-width: 991px) and (min-width: 768px) end */


@media screen and (max-width: 991px) {
 .category-title img {
  max-width: 38%;
  margin-left: auto;
  margin-right: auto;
 }

} /* @media screen and (max-width: 991px) end */


@media screen and (max-width: 575px) {
 .category-title img {
  max-width: 58%;
  margin-left: auto;
  margin-right: auto;
 }

 .category-link a {
  font-size: 4.2vw;
 }

} /* @media screen and (max-width: 575px) end */




/*[[[ Price ]]]*/

@media screen and (min-width: 992px) {
    #rc21.pages.p-ticket .ticket-price-box {
     width: 100%;
     display: flex;
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
     padding: 0;
     margin-left: auto;
     margin-right: auto;
    }
    #rc21.pages.p-ticket .ticket-price-box dt,
    #rc21.pages.p-ticket .ticket-price-box dd {
     margin: 0;
     padding: 0;
    }
    #rc21.pages.p-ticket .ticket-price-box dt {
     width: 200px;
     flex-basis: 200px;
     flex-grow: 0;
     flex-shrink: 0;
    }
    #rc21.pages.p-ticket .ticket-price-box dd {
     width: calc(100% - 200px);
     flex-basis: calc(100% - 200px);
     flex-grow: 0;
     flex-shrink: 1;
    }
   
   }
   
   @media screen and (min-width: 1200px) {
    #rc21.pages.p-ticket .ticket-price-box {
     width: 83.33333%;
    }
   
   }
   
   @media screen and (min-width: 768px) {
    #rc21.pages.p-ticket .ticket-price-box .ticket-price-box-each li > div {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 900px;
     margin: 0;
     padding: 0;
    }
    
   
   }
   
   #rc21.pages.p-ticket .ticket-price-box .ticket-price-box-each li:first-child {
    border-bottom: 1px solid #8C720D;
   }
   






/*[[[[[ Sales Information ]]]]]*/

/*[[[ Left Back Ground ]]]*/

.bg-white-alpla {
 background: rgba(255,255,255, .5);
}



/*[[[ Ticket Detail List ]]]*/
@media screen and (min-width: 576px) {
 #rc21.pages.p-ticket .ticket-detail-list {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 0;
 }
 #rc21.pages.p-ticket .ticket-detail-list dt,
 #rc21.pages.p-ticket .ticket-detail-list dd {
  flex-grow: 0;
  padding-top: .7rem;
  padding-bottom: .3rem;
  border-top: 1px solid #D0C598;
 }
 #rc21.pages.p-ticket .ticket-detail-list dt {
  width: 180px;
  flex-basis: 180px;
  flex-shrink: 0;
 }
 #rc21.pages.p-ticket .ticket-detail-list dd {
  width: calc(100% - 180px);
  flex-basis: calc(100% - 180px);
  flex-shrink: 0;
 }

} /* @media screen and (min-width: 576px) end */


@media screen and (max-width: 575px) {
 #rc21.pages.p-ticket .ticket-detail-list dt,
 #rc21.pages.p-ticket .ticket-detail-list dd {
  flex-grow: 0;
  padding-bottom: .2rem;
 }
 #rc21.pages.p-ticket .ticket-detail-list dt {
  border-top: 1px solid #D0C598;
  padding-top: .5rem;
 }

} /* @media screen and (max-width: 575px) end */










/*[[[[[ Category Common ]]]]]*/

/*[ Number ]*/
.maru {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 line-height: 50px;
 text-align: center;
 display: inline-block;
}

@media screen and (max-width: 767px) {
 .maru {
  width: 42px;
  height: 42px;
  line-height: 42px;
  display: block;
  margin-bottom: .5rem;
 }

} /* @media screen and (max-width: 767px) end */



/*[ Flow Line ]*/
.flowline {
 border-bottom: 1px solid #D0C598;
 position: relative;
}
.flowline:after{
 content: "";
 position: absolute;
 right: 0;
 bottom: -20px;
 left: 0;
 width: 0px;
 height: 0px;
 margin: auto;
 border-style: solid;
 border-color: #D0C598 transparent transparent transparent;
 border-width: 20px 20px 0 20px;
}



/*[ Flow List ]*/
@media screen and (min-width: 768px) {
 .flowlist-3 {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
 }
 .flowlist-3 li {
  margin-right: 40px;
  width: calc(33.33333% - 80px / 3);
  position: relative;
 }
 .flowlist-3 li:last-child {
  margin-right: 0;
 }
 .flowlist-3 li:not(:last-child):after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -28px;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: transparent transparent transparent #d0c598;
  border-width: 11px 0 11px 15px;
 }

} /* @media screen and (min-width: 768px) end */


@media screen and (max-width: 767px) {
 .flowlist-3 {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
 }
 .flowlist-3 li {
  position: relative;
 }
 .flowlist-3 li:not(:last-child) {
  margin-bottom: 30px;
 }
 
 .flowlist-3 li:not(:last-child):after {
  content: "";
  position: absolute;
  bottom: -23px;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #d0c598 transparent transparent transparent;
  border-width: 16px 10px 0 10px;
 }
 
} /* @media screen and (max-width: 767px) end */



/*[ Tag Design ]*/
@media screen and (min-width: 768px) {
 .tags {
  position: relative;
  height: 70px;
  line-height: 70px;
  display: inline-block;
 }
 .tags::before {
  border: 35px solid transparent;
  border-left-color: #8C720D;
  border-right-width: 0;
  content: '';
  display: block;
  height: 0;
  position: absolute;
  right: -35px;
  top: 0;
  width: 0;
 }
 .tags.main3::before {
  border-left-color: #D65E20;
 }

} /* @media screen and (min-width: 768px) end */


@media screen and (max-width: 767px) {
 .tags {
  position: relative;
  display: inline-block;
 }
 .tags::before {
  content: '';
  display: block;
  position: absolute;
  bottom: -15px;
  left: 8px;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-width: 15px 12.5px 0 12.5px;
  border-color: #8C720D transparent transparent transparent;
 }
 .tags.main3::before {
  border-color: #D65E20 transparent transparent transparent;
 }

} /* @media screen and (max-width: 767px) end */


/* #ticket-price {
   font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'MS Mincho', serif;
} */

.ticket-vip-title {
   background: linear-gradient(318deg, #76632d, #fde98c);
}