@charset "UTF-8";
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap');*/
html,body,a,p,ul,li,h1,h2,h3,h4,h5,h6,figure,dl,dt,dd{margin:0;padding:0;}

*{
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
/*    letter-spacing: 0.05em;*/
font-family: "hiragino-mincho-pron", sans-serif;
}


html{
    
}
body{
    overflow-x: hidden;
    font-size: clamp(12px,1.09375vw,14px);
    line-height: 1.15em;
    font-weight: 300;
    color: #000;
    font-style: normal;
}
section {
    width: 100%;
}

a{
    color: inherit;
    text-decoration: none;
}
a:hover {
filter: alpha(opacity=70);
opacity: 0.7;
transition:  0.5s;
}

li{
    list-style-type: none;
}
.pc{
        display: block;
    }
.sp{
    display: none;
}

header h1, header h2
{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
line-height: 0;
}

@media screen and (max-width: 768px){
    body{

}
    .pc{
        display: none;
    }
    
    .sp{
        display: block;
    }
}
/*************************
*ヘッダー
*************************/
header {
    width: 100%;
}
header #topVisual {
    background: url("../img/pc_mv.jpg");
    background-position: left top;
    background-repeat: no-repeat;
    padding-top: 55.94%;
    height: 0;
    width: 100%;
    background-size: cover;
}
@media screen and (max-width: 768px){
    header #topVisual {
    background: url("../img/sp_mv.jpg");
    background-position: left top;
    background-repeat: no-repeat;
    padding-top: 84.7%;
    height: 0;
    width: 100%;
    background-size: cover;

}
}
/*************************
*コンテンツ
*************************/
.bg-1 {
    background: url("../img/bg-1.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}
.bg-2 {
    background: url("../img/bg-2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}
.cntntWrap {
    padding: 5em 0;
}
.boxA {
    width: 90%;
/*    max-width: 890px;*/
        max-width: 1024px;
    margin: auto;
}
.boxB {
    width: 90%;
    max-width: 800px;
    margin: auto;
}
.box-inner {
    width: 90%;
    max-width: 960px;
    margin: auto;
    padding: 5% 0 10%;
}

.bgcolor-1 {
/*    background: #f0f0e7;*/
    background: rgba(255,255,255,0.7);
}
.bgcolor-2 {
/*    background: #e6eef0;*/
    background: rgba(255,255,255,0.7);
}
.cntntWrap h2 {
    font-size: clamp(24px,2.34375vw,30px);
    line-height: 1.8em;
    font-weight: 300;
    text-align: center;
}
.cntntWrap h2.type-2 {
    font-size: clamp(24px,2.34375vw,30px);
    line-height: 1.8em;
    font-weight: 300;
    text-align: center;
    color: #fff;
}


@media screen and (max-width: 768px){
 .cntntWrap {
    padding: 5em 0;
}
    .box-inner {
    width: 90%;
    max-width: 780px;
    margin: auto;
    padding: 2.5em 0 ;
}
}

/**Schedulle********************/
.scheHeadWrap {
    font-size: clamp(10px,0.9375vw,12px);
    font-weight: 600;
    line-height: 1.25em;
    padding: 1em 0;
    border-bottom: 2px solid #000;
    display: flex;
    margin-top: 1em;
}
.dateH {
    width: 12.5%;
}
.prefH {
    width: 8%;
}
.venueH {
    width: 23%;
}
.open-startH {
    width: 12.5%;
}
.seatH {
    width: 18%;
}
.infoH {
    width: 26%;
}

.scheWrap {
    padding: 1.5em 0;
    border-bottom: 1px solid #000;
    display: flex;
    font-weight: 300;
    align-items: center;
/*    margin-top: 1em; */
}
.date {
    width: 12.5%;
    font-size: clamp(16px,1.5625vw,20px);
    line-height: 1.25em;
}
.pref {
    width: 8%;
    font-size: clamp(16px,1.5625vw,20px);
    line-height: 1.25em;
}
.venue {
    width: 23%;
        font-size: clamp(16px,1.5625vw,20px);
    line-height: 1.25em;
}
.open-start {
    width: 12.5%;
    font-size: clamp(12px,1.09375vw,14px);
    line-height: 1.25em;
}
.seat {
    width: 18%;
        font-size: clamp(12px,1.09375vw,14px);
    line-height: 1.25em;
}
.info {
    width: 26%;
    font-size: clamp(12px,1.09375vw,14px);
    line-height: 1.25em;
}

@media screen and (max-width: 768px){
    .scheHeadWrap{
        display: none;
    }
.scheWrap {
      flex-wrap: wrap;
}
.date {
    width: 20%;
}
.pref {
    width: 15%;
}
.venue {
    width: 65%;
}
.open-start {
    width: 100%;
    margin-top: 1.25em;
}
.seat {
    width: 100%;
margin-top: 1.25em;
}
.info {
    width: 100%;
    margin-top: 1.25em;
}
}

/**Ticket********************/
.TicketTypeWrap {
    width: 100%;
    border: 1px solid #000;
    padding: 4%;
    margin: 1em auto;

}
ul.TicketType {
    width:100%;
    max-width: 540px;
    margin: auto;
    font-size: 0;
    display: flex;
    align-items: center;
}
ul.TicketType li {
    display: inline-block;

}
ul.TicketType li.TiketTypeH {
    width: 20%;
    font-size: clamp(10px,0.9375vw,12px);
}
ul.TicketType li.TiketTypeTxt {
    width: 80%;
    font-size: clamp(16px,1.5625vw,20px);
    line-height: 1.25em;
}
ul.TicketType li.TiketTypeTxt small {
    font-size: clamp(12px, 1.09375 vw, 14px);
}
.TicketTypeWrap .line {
    border-bottom: 1px solid #000;
    padding-top: 1.5em;
    margin-bottom: 1.5em;
}
#TicketBox h3 {
    text-align: center;
    font-size: clamp(16px,1.5625vw,20px);
    line-height: 2em;
    font-weight: 300;
    margin-top: 2em;
}

.TicketSalesWrap {
       width: 100%;
    border: 1px solid #000;
    margin: 1em auto; 
    padding: 0;
/*    background: #d6e7ed;*/
    background: rgba(255,255,255,0.5);
}
.TicketSalesH {
/*    background: #000;*/
    background: #1fa48f;
    padding: 0.5em;
    text-align: center;
    color: #fff;
    font-size: clamp(14px,1.25vw,16px);
    line-height: 1.8em;
    font-weight: 300;
}
.TicketSalesInner {
    padding: 2% 4%;
/*background: rgba(255,255,255,0.1);*/
}
ul.TicketSales {
    width: 100%;
    font-size: 0;
    display: flex;
    align-items: center;
}
ul.TicketSales li, ul.TicketSales-ippan li {
    font-size: clamp(14px,1.25vw,16px);
    line-height: 1.8em;
    font-weight: 300;
}
ul.TicketSales li.periodWrap {
    width: 61%;
}
ul.TicketSales li.periodBtn {
    width: 39%;
}
ul.TicketSales-2 li.periodWrap {
    width: 100%;
}
ul.TicketSales-ippan li.periodBtn-ippan {
    width: 100%;
    display: flex;
}
ul.ippanBtnWrap {
    width: 100%;
    font-size: 0;
}
ul.ippanBtnWrap li {
    display: inline-block;
    width: 32%;
    margin:  0.6%;
}
ul.TicketSales-ippan li.periodBtn-ippan {
    width: 100%;
    display: flex;
}
ul.ippanBtnWrap {
    width: 100%;
    font-size: 0;
}
ul.ippanBtnWrap li {
    display: inline-block;
    width: 32%;
    margin:  0.6%;
}

.reservationBtn {
    width: 100%;
    border: 1px solid #707070;
    background: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
      font-size: clamp(14px,1.25vw,16px);
    line-height: 2.5em;
}
.reservationBtn-2 {
    width: 100%;
    border: 1px solid #707070;
    background: #ccc;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
      font-size: clamp(14px,1.25vw,16px);
    line-height: 2.5em;
color: rgba(0,0,0,0.3);
}
.ippanBtn {
    width: 100%;
    margin: 0;
    border: 1px solid #707070;
    background: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
      font-size: clamp(14px,1.25vw,16px);
    line-height: 2.5em;
}


@media screen and (max-width: 768px){
    ul.TicketType, ul.TicketSales {
        display: block;
    }
ul.TicketType li, ul.TicketSales li {
    display: list-item;
}
ul.TicketType li.TiketTypeH {
    width: 100%;
    font-size: clamp(10px,0.9375vw,12px);
}
ul.TicketType li.TiketTypeTxt {
    width: 100%;
    font-size: clamp(16px,1.5625vw,20px);
    line-height: 1.25em;
}
ul.TicketSales li.periodWrap {
    width: 100%;
}
ul.TicketSales li.periodBtn {
    width: 100%;
    margin: 6% 0;
}
.TicketTypeWrap .line {
    border-bottom: 1px solid #000;
    padding-top: 1.75em;
    margin-bottom: 1.25em;
}
ul.ippanBtnWrap li {
    display:inherit;
    width: 100%;
    margin:  2% 0.6%;;
}
    
}


/**Goods********************/
.GoodsWrap {
    font-size: clamp(14px,1.25vw,16px);
    text-align: center;
}
.GoodsWrap p {
    margin-top: 1em;
}
#goods-img-01 {
    background: url("../img/goods-img-01.jpg");
    padding-top: 143.75%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
#goods-img-02 {
    background: url("../img/goods-img-02.jpg");
    padding-top: 97.27%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
@media screen and (max-width: 768px){
  .GoodsWrap p {
    margin-top: 1em;
      margin-bottom: 1em;
}  
}

/**Movie********************/
ul.movieWrap {
    width: 100%;
    font-size: 0;
}
ul.movieWrap li {
    width: 46%;
    margin: 2%;
    display: inline-block;
    vertical-align: top;
}
.movieArea {
    width: 100%;
}
.movie {
    position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie iframe {
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px){
ul.movieWrap li {
    width: 100%;
    margin: 6% 0;
    display: inherit;
    vertical-align: top;
}
}

/*************************
*フッター
*************************/
footer {
    background: url("../img/bg-1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    text-align: center;
    padding: 5% 0 1.5%;
    color: #fff;
}
footer .officialSite {
     font-size: 20px;
    line-height: 2em;
    font-weight: 600;
margin-bottom: 2em;

}
footer .snsWrap {
    display: flex;
    justify-content: center;
    margin-top: 2em;
    margin-bottom: 4em;
}
footer .snsWrap i {
    margin: 0 0.75em;
        font-size: 30px;
}
footer p {
    padding-top: 2%;
font-size: 10px;
    line-height: 1.5em;
}

@media screen and (max-width: 768px){
    footer {
          padding: 8% 0;  
    }
    footer p {
        width: 90%;
        margin: auto;
    }
}

/*************************
*ローディング
*************************/
#loading {
  /* 画面一杯にローディング画面を広げる */
  height: 100%;
  width: 100%;
  background: #a9c3e6;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1000;
  /* flexboxを使ってローディングアイコンを画面の中央に寄せる */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}