@charset 'utf-8';

/* 下層
--------------------------------------- */
.lower.contents{
  height:initial;
  max-height:initial;
}
.bottom-bg{
  position:absolute;
  bottom:0;
  width:100%;
  height:18px;
  max-height:initial;
  background-image:linear-gradient(90deg,#002133,#002133 50%,#2e5564 50%);
  z-index:-1;
}
.lower .header{display:none;}
.lower .wrap{
  width:100%;
  min-height:calc(100vh + 200px);
  min-height:calc(100dvh + 200px);
  padding:80px 0 160px 0;
  background-image:url('../images/low_bottom.png'),url('../images/low_top.png');
  background-position:center bottom, center top 70px;
  background-repeat:no-repeat,no-repeat;
  background-size:contain,contain;
}
.lower .sponsor{
  position:absolute;
  bottom:79px;
  left:0;
  right:0;
  font-size:14px;
  font-weight:600;
  text-align:center;
}
@media screen and (max-width:1000px){
  .bottom-bg{display:none;}
  .lower .header{
    display:block;
  }
  .lower .pc-navi{display:none;}
  .lower .wrap{
    padding:80px 0 16.0vw 0;
    background-position:center bottom,center top 70px;
  }
}
@media screen and (max-width:768px){
  .lower .wrap{
    min-height:calc(100vh - 70px);
    min-height:calc(100dvh - 70px);
    padding-top:77px;
  }
  .lower .sponsor{
    bottom:9.5vw;
    font-size:2.4vw;
  }
}

.lower .inner{
  width:90%;
  margin:auto;
  padding:20px 20px;
  background-color:rgba(255,255,255,0.9);
  border:4px solid #887f7f;
  box-shadow:0 0 5px rgba(64,64,64,0.8);
}
.lower .detail{
  padding:20px 0;
}
.lower .detail .block{margin-bottom:40px;}
.lower .detail .block:last-of-type{margin-bottom:0;}
.lower .detail h2{
  margin-bottom:20px;
  font-size:24px;
  font-weight:600;
  line-height:1.4;
  text-align:center;
}
.lower .detail h3{
  margin-bottom:8px;
  font-size:21px;
  font-weight:600;
}
@media screen and (max-width:1000px){
  .lower .inner{
    width:98.0vw;
    padding:2.0vw;
  }
  .lower .detail{
    padding:2.0vw; 0;
  }
  .lower .detail .block{margin-bottom:7.0vw;}
  .lower .detail .block:last-of-type{margin-bottom:0;}
}
@media screen and (max-width:768px){
  .lower .detail h2{
    margin-bottom:4.0vw;
    font-size:3.8vw;
  }
  .lower .detail h3{
    margin-bottom:1.8vw;
    font-size:3.4vw;
  }
  .lower .detail p{
    font-size:3.2vw;
  }
}

/* button */
.lower .close{display:none;}
.lower .block-return{display:none;}

/* メッセージ
--------------------------------------- */
.message .bottom-bg{
  position:absolute;
  bottom:0;
  width:100%;
  height:24px;
  background-image:linear-gradient(90deg,#ffd1fc,#ffd1fc 50%,#fad0c6 50%);
  z-index:-1;
}
.message .wrap{
  padding-top:200px;
  background-image:url('../images/message_bg2.png'),url('../images/message_bg.png');
}
.message .inner{
  width:680px;
  margin-left:250px;
  background-color:rgba(255,255,255,0.8);
}
.message .detail h2{
  text-align:left;
}
.message .detail .img{
  margin-bottom:5px;
}
.message .detail .cap1{
  margin-bottom:5px;
  font-size:14px;
  text-align:center;
}
.message .detail .cap2{
  font-size:14px;
  text-align:right;
}
@media screen and (max-width:1000px){
  .message .bottom-bg{display:none;}
  .message .wrap{
    padding-top:24vw;
  }
  .message .inner{
    width:68.0vw;
    margin-left:25.0vw;
  }
}
@media screen and (max-width:768px){
  .message .wrap{
    padding-top:32vw;
  }
  .message .detail .cap1{
    font-size:2.4vw;
  }
  .message .detail .cap2{
    font-size:2.4vw;
  }
}

/* チケット＆スケジュール
--------------------------------------- */
.ticket{}
.ticket .sect1{}
.ticket .sect1 .box{margin-bottom:40px;}
.ticket .sect1 h3{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-bottom:0;
  padding:10px 0;
  line-height:1.5em;
  background-color:#d5ebf4;
  background-color:#ef4123;
  border:1px solid #887f7f;
  border-bottom-width:0;
  border-radius:5px 5px 0 0;
}
/**/
.ticket .sect1 h3 span{
  background-image:linear-gradient(70deg,#666 45%,rgb(102,102,102,0.3) 50%,#666 55%);
  background-image:linear-gradient(70deg,#fff 48%,rgb(255,255,255,0.3) 50%,#fff 55%);
  background-size:500% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  animation: shine 5s infinite;
}
@keyframes shine {
    0%{background-position:100% 50%;}
  100%{background-position:  0% 50%;}
}

/*  */

#ticket{
  margin-top:-70px;
  padding-top:70px;
}

.ticket .sect1 .limited{
  padding:20px 20px 10px;
  background-color:#fff;
  border-left:1px solid #887f7f;
  border-right:1px solid #887f7f;
}
.ticket .sect1 .limited .wrap-lim{
  padding:20px;
  background-color:rgba(248,173,200,0.1);
  background-color:rgba(255,255,255,0.1);
  border:1px solid #f8adc8;
  border-radius:3px;
}
.ticket .sect1 .limited .h4lim{
  margin-bottom:10px;
  font-size:1.08em;
  font-weight:600;
/*  color:#ef4123;*/
  text-align:center;
}
.ticket .sect1 .limited .dtl{width:100%;margin:auto;}
.ticket .sect1 .limited .dtl dl{text-align:left;}
.ticket .sect1 .limited .dtl dl dt,
.ticket .sect1 .limited .dtl dl dd{display:inline;}
.ticket .sect1 .limited .dtl dl dt{font-weight:600;}
.ticket .sect1 .limited .dtl dl dd{}
@media screen and (max-width:768px){
  .ticket .sect1 .limited{padding:4vw 4vw 1vw;}
  .ticket .sect1 .limited .wrap-lim{padding:2vw;}
  .ticket .sect1 .limited .dtl{width:100%;}
  .ticket .sect1 .limited .dtl dl{margin-bottom:0.8em;line-height:1.2;}
}

/*  */
.ticket .sect1 .tbl{
  margin-bottom:5px;
  padding:20px 20px 30px;
  background-color:#fff;
  border:1px solid #887f7f;
  border-top-width:0;
  text-align:left;
}
.ticket .sect1 .tbl .line{margin-bottom:15px;}
.ticket .sect1 .tbl .line:last-of-type{margin-bottom:0;}
.ticket .sect1 .tbl .cel1{
  float:left;
  width:17%;
  font-weight:600;
  text-align:right;
}
.ticket .sect1 .tbl .cel2{
  float:right;
  width:82%;
  line-height:1.2;
}
.ticket .sect1 .tbl .cel2 .line{margin-bottom:15px;}
.ticket .sect1 .tbl .cel2 .line:last-of-type{margin-bottom:0;}
.ticket .tbl a.btn{
  position:relative;
  display:inline-block;
  margin:2px 0;
  padding:4px 1.0em;
  font-size:0.87em;
  font-weight:600;
  color:#666;
  text-align:center;
  background-color:#d5ebf4;
  border:1px solid #887f7f;
  border-radius:3px;
  transition:color 300ms,background 300ms;
}
.ticket .tbl a.btn:hover{
  color:#f6f6f6;
  background-color:#666;
}
.ticket .attent{
  font-size:0.87em;
  padding-left:1.0em;
  text-indent:-1.0em;
}
.ticket .sect1 .attent{
  margin-left:20px;
}
@media screen and (max-width:1000px){
  .ticket .sect1 .tbl .cel1{width:24%;}
  .ticket .sect1 .tbl .cel2{width:75%;}
}
@media screen and (max-width:768px){
  .ticket .sect1 .box{margin-bottom:8.0vw;}
  .ticket .sect1 .tbl{padding:4vw;}
  .ticket .sect1 .tbl .line{margin-bottom:3.0vw;}
  .ticket .sect1 .tbl .line:last-of-type{margin-bottom:0;}
  .ticket .sect1 .tbl .cel1{width:22%;}
  .ticket .sect1 .tbl .cel2{width:77%;}
    .ticket .sect1 .tbl.br .cel1,
    .ticket .sect1 .tbl.br .cel2{
      float:none;
      width:100%;
      text-align:left;
    }
  .ticket .sect1 .tbl .cel2 .line{margin-bottom:3.0vw;}
  .ticket .sect1 .tbl .cel2 .line:last-of-type{margin-bottom:0;}
  .ticket .sect1 .tbl a.btn{
    transition:none;
  }
  .ticket .sect1 .tbl a.btn:hover{
    color:#666;
    background-color:#d5ebf4;
  }
  .ticket .sect1 .attent{
    margin-left:4vw;
  }
}
/*  */
.ticket .sect2 .box{}
.ticket .sect2 .tbl{
  margin-bottom:5px;
  padding:20px 20px 30px;
  background-color:#fff;
  border:1px solid #887f7f;
}
.ticket .sect2 .tbl .line{margin-bottom:20px;}
.ticket .sect2 .tbl .line:last-of-type{margin-bottom:0;}
.ticket .sect2 .tbl .cel1{
  float:left;
  width:24%;
  font-weight:600;
  text-align:right;
}
.ticket .sect2 .tbl .cel2{
  float:right;
  width:75%;
}
.ticket .sect2 .attent{
}
.ticket .sect2 table{
  width:100%;
  margin-bottom:5px;
  background:#fff;
  border-top:1px solid #887f7f;
  border-left:1px solid #887f7f;
}
.ticket .sect2 table th,
.ticket .sect2 table td{
  text-align:center;
  vertical-align:middle;
  border-right:1px solid #887f7f;
  border-bottom:1px solid #887f7f;
}
.ticket .sect2 table th{white-space:nowrap;}
.ticket .sect2 table .sat{background-color:#dff;}
.ticket .sect2 table .sun{background-color:#fdd;}
/*.ticket .sect2 table thead tr:nth-of-type(1) th:nth-of-type(1){border-bottom:3px double #887f7f;}
.ticket .sect2 table thead tr:nth-of-type(2) th{border-bottom:3px double #887f7f;}*/
.ticket .sect2 table tbody th{width:20%;}
.ticket .sect2 table tbody td{width:10%;font-weight:600;}
.ticket .sect2 table td.guest1{background-color:rgba(253,236,10,0.1);}
.ticket .sect2 table td.guest2{background-color:rgba(210,0,19,0.1);}
.ticket .sect2 table td.guest3{background-color:rgba(45,174,233,0.1);}
/*.ticket .sect2 .special{display:inline-block;background:#f6f6f6;}*/
.ticket .sect2 .guest{font-size:0.87em;font-weight:600;}
.ticket .sect2 .guest span{display:inline-block;padding:0 8px;}
.ticket .sect2 .guest dd .guest1{background-color:rgba(253,236,10,0.1);}
.ticket .sect2 .guest dd .guest2{background-color:rgba(210,0,19,0.1);}
.ticket .sect2 .guest dd .guest3{background-color:rgba(45,174,233,0.1);}
.ticket dl.contact{
  margin-top:40px;
  text-align:center;
}
.ticket dl.contact dt{font-weight:600;}
@media screen and (max-width:1000px){}
@media screen and (max-width:768px){
  .ticket .sect2 .box{margin-bottom:8.0vw;}
  .ticket .sect2 .tbl{padding:4vw;}
  .ticket .sect2 .tbl .line{margin-bottom:4.0vw;}
  .ticket .sect2 .tbl .line:last-of-type{margin-bottom:0;}
  .ticket .sect2 .tbl .cel1,
  .ticket .sect2 .tbl .cel2{
    float:none;
    width:100%;
    text-align:left;
  }
  .ticket .sect2 table{margin-bottom:1.0vw;}
  .ticket dl.contact{
    margin-top:8.0vw;
    text-align:left;
  }
}

/*  */
a.underline{text-decoration:underline;transition:color 300ms;}
a.underline:hover{color:#000;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
b{font-weight:600;}
.sml{font-size:0.87em;}
.sml2{font-size:0.83em;}
.ind8{padding-left:0.83em;text-indent:-0.83em;}
.ind10{padding-left:1.0em;text-indent:-1.0em;}

/* 公演紹介
--------------------------------------- */
.about{}
.about .detail{padding-bottom:40px;}
.about h3{
  margin-bottom:15px !important;
  padding-bottom:10px;
  text-align:center;
  border-bottom:1px solid #887f7f;
}
@media screen and (max-width:1000px){}
@media screen and (max-width:768px){
  .about .detail{padding-bottom:8vw;}
}

.about .setlist{
  margin-top:-30px;
  padding-top:70px;
  padding-bottom:40px;
}
.about .setlist .center h4,
.about .setlist .center p,
.about .setlist .center ul{
  text-align:center;
}
.about .setlist .center ul li{
  margin-bottom:0.2em;
}
.about .setlist .center h4{
  margin-bottom:0.5em;
  font-weight:600;
}
.about .setlist .center .attent{
  margin-top:0.5em;
  font-size:0.93em;
}
@media screen and (max-width:768px){
  .about .setlist{
    padding-bottom:7vw;
  }
  .about .setlist .center ul li{
    margin-bottom:0.5em;
    padding-bottom:0.5em;
    /*border-bottom:1px dashed #666;*/
  }
}



/* キャスト＆スタッフ
--------------------------------------- */
.cast{}
.cast .inner{
  width:1200px;
  margin-left:-100px;
}
.cast .detail h2{}
.cast .detail h3{text-align:center;}
.cast .caution{
  margin-bottom:10px;
  font-size:14px;
  padding-left:1.0em;
  text-indent:-1.0em;
}
.cast .act{
  margin-bottom:5px;
  font-size:21px;
  font-weight:600;
}
.cast .act.guest span{
  padding:0 1.0em;
  color:#fff;
  background-color:#887f7f;
  border-radius:3px;
}
.cast .box{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
justify-content: flex-start;
  align-items:flex-start;
  align-content:stretch;
}
.cast .box a{
  display:block;
  width:18%;
width:16%;
margin-right:0.66%;
  margin-bottom:30px;
  text-align:center;
}
.cast .box a:nth-of-type(6n){margin-right:0;}
.cast .box .pho{
  position:relative;
  width:100%;
  height:auto;
  margin-bottom:5px;
  overflow:hidden;
}
.cast .box .pho .cap{
  position:absolute;
  bottom:0px;
  right:2px;
  font-size:11px;
  color:#fff;
}
.cast .box .name{line-height:1.2;}
.cast .box .name span{font-size:0.87em;}
.cast .box .date{line-height:1.2;font-size:0.87em;}
.cast .box a:hover{text-decoration:none;}
.cast .box a img{transition:transform 200ms ease-in-out;}
.cast .box a:hover img{transform:scale(1.12);}
@media screen and (max-width:1200px){
  .cast .inner{
    width:100%;
    margin:auto;
width:98vw;
margin-left:calc(50% - 49vw);
  }
  .cast .box .name span{display:block;}
}
@media screen and (max-width:1000px){
  .cast .inner{
    width:98vw;
    margin:auto;
  }
.cast .box .spacer{width:calc(100% / 3.1);}
}
@media screen and (max-width:768px){
  .cast .box a{width:32%;margin-right:2%;}
  .cast .box a:nth-of-type(3n){margin-right:0;}
  .cast .caution{
    margin-bottom:2.0vw;
    font-size:2.8vw !important;
  }
  .cast .act{
    margin-bottom:1.0vw;
    font-size:3.6vw !important;
  }
  .cast .box a{
    width:32%;
    margin-bottom:4.0vw;
  }
/*  .cast .box::after{
    content:'';
    display: block;
    width:30%;
  }*/
  .cast .box a img{transition:none;}
  .cast .box a:hover img{transform:scale(1.0);}
}
@media screen and (max-width:640px){
  .cast .box a{width:48%;}
  .cast .box{justify-content:space-between;}
  .cast .box a:nth-of-type(2n){margin-right:0;}
  .cast .box::after{width:40%;}
}
.cast .staff{
  text-align:center;
  font-size:1.12em;
}
.cast .staff p{margin-bottom:0.5em;}


/* キャスト モーダル
--------------------------------------- */
body.modal{
  padding-bottom:20px;
  background-color:#fff;
}
.window{
  position:relative;
  width:100%;
  height:620px;
}
.window .hd{
  background-color:#f6f6f6;
}
.window .hd .mi{
  padding:8px 0;
  font-size:24px;
  font-weight:600;
  color:#887f7f;
  text-align:center;
}
.window .prof{
  padding:20px 40px 20px;
}
.window .prof .name{
  margin-bottom:10px;
  font-size:24px;
  border-bottom:1px solid #887f7f;
}
.window .prof .name span{
  margin-left:0.5em;
  font-size:18px;
}
.window .prof .dtl{
  height:440px;
  line-height:1.3;
}
.window .prof .dtl p{text-align:left;}
.window .prof .dtl a{
  text-decoration:underline;
}

.window .ft{
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  width:160px;
  margin:auto;
}
.window .ft a{
  display:block;
  width:100%;
  margin:auto;
  padding:4px 0;
  font-size:21px;
  color:#887f7f;
  text-align:center;
  background-color:#f6f6f6;
  border-radius:5px;
  transition:color 300ms,background-color 300ms;
}
.window .ft a:hover{
  color:#f6f6f6;
  background-color:#887f7f;
}
@media screen and (max-width:768px){
  .window .hd .mi{font-size:3.8vw;}
  .window .prof .name{font-size:3.4vw;}
  .window .prof .name span{font-size:3.2vw;}
  .window .ft a{font-size:3.4vw;}

  .window .prof{min-height:auto;}
  .window .prof .dtl,
  .window .ft{
    margin-top:30px;
    position:static;
  }
  .window .prof .dtl{
    height:initial;
    overflow:visible;
  }
  .window .ft .close-btn a{
    padding:8px 0;
    transition:none;
  }
  .window .ft a:hover{
    color:#887f7f;
    background-color:#f6f6f6;
  }
}

/* 最新情報
--------------------------------------- */
.news{}
.news .inner{min-height:400px;}
.news dl.topic{
  margin-bottom:0.8em;
  padding-bottom:0.8em;
  border-bottom:1px solid #887f7f;
}
.news dl.topic:after,
.news dl.topic:before{
  content:'';
  display:block;
  clear:both;
}
.news dl.topic dt{
  float:left;
  width:17%;
  font-weight:600;
}
.news dl.topic dd{
  float:left;
  width:83%;
}
.news dl.topic dd a{
  color:#666;
  text-decoration:underline;
  transition:color 300ms;
}
.news dl.topic dd a:hover{
  color:#000;
}

@media screen and (max-width:1000px){
  .news dl.topic dt,
  .news dl.topic dd{
    float:none;
    width:100%;
  }
}
@media screen and (max-width:768px){}