@charset "utf-8";
/* CSS Document */

section{padding:40px 0 0;}
section:last-child{padding:60px 0;}
footer #page-top{display: none!important;}
.pcNone{display: none;}
.spNone{display: block;}
.posiA{position: absolute;}
.hoverEase:hover{opacity:0.7; text-decoration:none;}

/**========================================
  共通指定 
========================================**/
#contentsBox{background:linear-gradient(300deg,#009091 0%,#3daba4 40% ,#009091 70%,#3daba4 100%);}
#contentsBox #contentsBoxInner{background: #fff;max-width: 1300px;margin: auto;padding: 30px 80px;width: 90%;}
#contentsBox #contentsBoxInner p,
#contentsBox #contentsBoxInner li,
#contentsBox #contentsBoxInner dt{color: #3d1104; font-size: 20px;}

.sectionBox .Sec-TtlBox{margin-bottom: 40px;}
.sectionBox .Sec-TtlBox .ttl-h3{background:#404040 ;color: #fff;font-size: 28px;position: relative;margin: 0 1em;padding: 10px 55px;font-weight: 900;}
.sectionBox .Sec-TtlBox .ttl-h3::before{content: "";background: url(/ticket26-27/images/img_Ttl_left.png)no-repeat;position: absolute;left: -1em;top: 0;width: 89px;height: 100%;z-index: 2;display: block;background-size: 100% 100%;}
.sectionBox .Sec-TtlBox .ttl-h3::after{content: "";background: url(/ticket26-27/images/img_Ttl_right.png)no-repeat;position: absolute;right: -1em;top: 0;width: 89px;height: 100%;z-index: 2;display: block;background-size: 100% 100%;}
.sectionBox .Sec-TtlBox .aten{margin-top: 0.5em;}

.ctaBtn{width: fit-content; margin: 2.5em auto;}
.ctaBtn .btnBox{display: flex; gap: 2em;}
.ctaBtn .btn{text-align: center;}
.ctaBtn .btn a{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; color: #fff; background: linear-gradient(300deg,#009091 0%,#3daba4 40% ,#009091 70%,#3daba4 100%); border-radius: 3em; min-width: 17em; min-height: 5.5em; padding-right: 1em; font-weight: 700; box-shadow: #ccc 0 4px 8px;}
.ctaBtn .btn a::after{content: ""; position: absolute; transform: translate(0,-50%); top: 50%; right: 1em; border-top: transparent solid 0.7em; border-bottom: transparent solid 0.7em; border-left: #fff solid 1em;}
.ctaBtn .btn a span{line-height: 1; font-size: 80%;}
.ctaBtn .btn a .type{color: #fff134;}
.ctaBtn .btn a .moushikomi{font-size: 120%;}
.ctaBtn .btn a .atten{font-size: 65%;}
.ctaBtn .aten{margin-top: 1em; text-indent: -1em; padding-left: 1em;}


/**========================================
  メインビュー 
========================================**/
#mainViewSec{background: url(/ticket26-27/images/main_bg.jpg) center / contain no-repeat; position: relative; background-size: cover; padding: 80px 0;}


/**========================================
  座席・価格 
========================================**/
#priceSec .venueList{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2em;}
#priceSec .venueList li a{position: relative; display: flex; align-items: center; width: 18em; min-height: 3.5em; padding: 0.5em 2.5em 0.5em 0.8em; font-size: 20px; background-color: #e84709; color: #fff; font-weight: 600; line-height: 1.2;}
#priceSec .venueList li a::after{content: ""; position: absolute; transform: rotate(45deg) translate(-50%,-50%); top: 50%; right: 1em; width: 1em; height: 1em; border-right: 4px solid #fff; border-bottom: 4px solid #fff;}
#priceSec .venueBox{margin: 40px 0 80px;}
#priceSec .venueBox:last-child{margin-bottom: 0;}
#priceSec .venueBox .ttl-h4{font-size: 28px; color: #3d1104; font-weight: 700; line-height: 1.2; border-left: 10px solid #e84709; padding-left: 0.5em;}
#priceSec .venueBox .ttl-h4 .txtSizeS{font-size: 80%;}
#priceSec .venueBox .aboutVenue{display: flex; justify-content: space-between; margin: 2em auto;}
#priceSec .venueBox .aboutVenue p:first-child{margin-right: 1em;}
#contentsBox #contentsBoxInner #priceSec .venueBox .aboutSeat dd p,
#contentsBox #contentsBoxInner #priceSec .venueBox .aboutSeat dd li{font-size: 16px;}
#contentsBox #contentsBoxInner #priceSec .venueBox .aboutSeat dd li{text-indent: -1em; padding-left: 1em;}
#contentsBox #contentsBoxInner #priceSec .venueBox .aboutSeat dd .aten{text-indent: -1em; padding-left: 1em;}


/**========================================
  販売スケジュール 
========================================**/
#scheduleSec .scheduleImg{box-shadow: #ccc 0 0 10px;margin-bottom: 1em;}
#scheduleSec .atenList{width: fit-content; margin: 2em auto;}
#scheduleSec .atenList a{color: #3d1104; border-bottom: #3d1104 1px solid;}
#scheduleSec .atenList li{text-indent: -1em; padding-left: 1em;}


/**========================================
  「チケットぴあ」からの購入方法 
========================================**/
#ticketPia .stepList .step{width: 340px; margin: 0 1em; border: 2px solid #00aeac; border-radius: 10px; overflow: hidden;}
#ticketPia .stepList .step .ttl{display: flex; align-items: center; font-size: 20px; font-weight: 600; color: #00aeac; background-color: #e9f7f7;padding-right: 0.2em;}
#ticketPia .stepList .step .ttl .num{display: inline-block; margin-right: 0.5em; padding: 0 0.5em; font-size: 160%; color: #fff; background-color: #00aeac;}
#ticketPia .stepList .step .img{max-width: 80%; margin: 1em auto 0;}
#contentsBox #contentsBoxInner #ticketPia .stepList .step .txt{font-size: 16px; padding: 1em 1em 1.5em;}
#ticketPia .slick-track{display: flex;}
#ticketPia .slick-slide{height: auto;}
#ticketPia .slick-prev{left: calc(50% - 18%); z-index: 2;}
#ticketPia .slick-next{ right: calc(50% - 18%); transform: translate(-50%,-50%)}
#ticketPia .slick-prev:before,
#ticketPia .slick-next:before{font-size: 30px; color: #e84709; opacity: 1;}
#ticketPia .slick-dots{display: none !important;}


/**========================================
  レスポンシブ 
========================================**/
@media (min-width: 768px) and (max-width: 1300px) {
  #contentsBox #contentsBoxInner{padding:0 2em ;}
}

@media screen and (max-width: 767px) {
  .pcNone{display: block;}
  .spNone{display: none;}
  section{padding: 20px 0 0;}
  section:last-child{padding: 40px 0;}

  /* 共通指定 */
  #contentsBox #contentsBoxInner{padding: 10px 20px 40px;}
  #contentsBox #contentsBoxInner p,
  #contentsBox #contentsBoxInner li,
  #contentsBox #contentsBoxInner dt{font-size: 15px;}
  .sectionBox .Sec-TtlBox{margin-bottom:20px;}
  .sectionBox .Sec-TtlBox .ttl-h3{font-size: 4.5vw;margin:0 0.5em ;padding:10px 28px ;}
  .sectionBox .Sec-TtlBox .ttl-h3::before,
  .sectionBox .Sec-TtlBox .ttl-h3::after{background-size: 100% 101%;width: 45px;}
  .ctaBtn{margin: 1.5em auto; width: 100%;}
  .ctaBtn .btnBox{flex-direction: column; gap: 1em;}
  .ctaBtn .btn a{width: 100%; padding-right: 0;}
  #page-top a{width:20% ;}
  #page-top img{width:100% ;}

  /* メインビュー */
  #mainViewSec{background: url(/ticket26-27/images/main_bg.jpg) center right / contain no-repeat; position: relative; background-size: cover; padding: 6vw 0;}
  #mainViewSec .ttl-h2{width: 70vw; margin: 0 auto;}

  /* 座席・価格 */
  #priceSec .venueList{flex-direction: column;  gap: 1em;}
  #priceSec .venueList li a{font-size: 4.5vw;}
  #priceSec .venueBox{margin: 20px 0 60px;}
  #priceSec .venueBox .aboutVenue{flex-direction: column; gap: 1em;}
  #priceSec .venueBox .aboutVenue p:first-child{margin-right: 0em;}
  #contentsBox #contentsBoxInner #priceSec .venueBox .aboutSeat dd p,
  #contentsBox #contentsBoxInner #priceSec .venueBox .aboutSeat dd li{font-size: 14px;}
  #priceSec .venueBox .ttl-h4{font-size: 5vw;}

  /* 「チケットぴあ」からの購入方法   */
  #ticketPia .stepList .step .ttl{font-size:4.5vw ;line-height: 1.2;}
  #ticketPia .stepList .step .ttl .num{font-size: 140%;padding: 7px 0.5em;margin-right: 0.2em;}
  #contentsBox #contentsBoxInner #ticketPia .stepList .step .txt{font-size: 4vw;}
  #ticketPia .slick-prev{left: -5%;}
  #ticketPia .slick-next{ right: -5%;}
}

@media screen and (min-width: 1030px) {
  .navDrawr > ul > li.ticket-menu{border-bottom: 8px solid #e84709;}
}