@charset "UTF-8";
@import url("../common/common.css");
@import url("../common/base.css");



/*----- トップページ 設定 ----------------------------------------------------*/



/*----- スライダー 設定 ----------------------------------------------------*/
 
div#sliderWrap{ width:100%; background-color:#fccb00; float:left; }
div.sliderArea{ position:relative; max-width:2000px; margin:0 auto; }

div.sliderOverlay{ position:absolute; width:100%; bottom:0; }
div.sliderOverlay h2{ position:absolute; bottom:8rem; left: 50%; transform: translate(-50%, -50%); width:850px; text-align:center; }
div.sliderOverlay h3{ position:absolute; bottom:15rem; left:10rem; text-align:center; }
nav.sliderOverlay_nav{ position:absolute; bottom:0vw; left: 50%; transform: translate(-50%, -50%); display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:100%; }
a.sliderOverlay_nav_btn { display: block; width:260px; padding: 5px 0; text-align: center; color: #fff; text-decoration: none; font-size: 1.6em; background-color: #231815; border: 1px solid #fff; border-radius: 10px; position: relative; }
a.sliderOverlay_nav_btn::after { content: '▶︎'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background-color: #fff; color: #231815; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.3em; }
a.sliderOverlay_nav_btn:hover{ background-color:#fff; color:#231815; }
a.sliderOverlay_nav_btn:hover::after { background-color: #231815; color: #fff;  }

/*bxslider*/
/* bxSliderの外枠と影を削除 */
.bx-wrapper {
  border: none!important;
  box-shadow: none!important;
  margin-bottom:0px!important;
}

/* bxSliderのビューポートの枠と影を削除 */
.bx-viewport {
  border: none!important;
  box-shadow: none!important;
}

.slider2{ display:none; }


/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1600px){

    div.sliderOverlay h3{ bottom:14rem; left: 25vw; width:500px; }

}
    
/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.sliderOverlay h2{ bottom:0px; width:200px;  }
    nav.sliderOverlay_nav{ display:none; }
    
    div.sliderOverlay h3{ bottom:2rem; left: 50%; transform: translate(-50%, -2rem); width:170px; }
    
    .slider{ display:none; }
    .slider2{ display:block; }
    
    
}

/*----- 共通・各セクション 設定 ----------------------------------------------------*/

section.sectionWrap{ width:96%; padding:30px 2%; float:left; }
.sectionWrap1{ background:#1ba6ff; }
.sectionWrap2{ background:#44ba16; }
.sectionWrap3{ background:#227cb5; }
.sectionWrap4{ background:#231815; color:#fff; }

div.sectionArea{ max-width:1200px; margin:0 auto; }

h2.sectionTit{ width:100%; padding:0 0 30px; text-align:center; float:left; }

div.sectionArea h4{ width:100%; text-align:center; color:#fff; font-size:1.6em; background:#231815; float:left; }

div.sectionImgArea{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; width:100%; flaot:left;  }
div.sectionImgBox{ width:100%; }

div.sectionTextArea{ width:100%; padding:20px 0; color:#fff; font-size:1.2em; float:left; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    div.sectionTextArea{ font-size:1em; }
    
    h2.sectionTit{ width:100%; padding:0 0 10px; text-align:center; float:left; }
    
}

/*----- 公演概要 設定 ----------------------------------------------------*/

div.performance_programArea{ position:relative; width:100%; padding:20px 0; float:left; }
div.performance_programArea h3{ position:absolute; padding:0 20px; background-color:#ff0000; color:#fff; font-weight:bold; font-size:2em; letter-spacing:0.1em;  }
div.performance_programBox{ box-sizing:border-box; display:flex; flex-wrap:wrap; gap:20px 0; width:90%; padding:40px 3%; margin:20px 5%; background:#fff100; float:left; }
.performance_programBox_List{ width:100%; font-weight:bold; float:left; }
.performance_programBox_List_tag{ display:inline-block; vertical-align:top; padding:0 10px; background:#000; color:#fff; font-size:1.6em; }
.performance_programBox_List_text{ display:inline-block; vertical-align:top; margin-left:1em; font-size:1.8em; }
.performance_programBox_List_text span{ color:#d0121b; font-size:0.9em; }
.performance_programBox_Img{ width:90%; padding:0 5%; flaot:left; }

div.performance_programTicket{ width:90%; padding:20px 5%; float:left; }
div.performance_programTicket_Box{ display:flex; flex-wrap:wrap; justify-content:space-around; gap:10px; width:100%; padding:10px 0; float:left; }
.performance_programTicket_Box1{ width:100%; }
.performance_programTicket_Box2{ width:49%; }

div.performance_programTicket_Box_bottomtext{ width:100%; padding:20px 0 0; font-size:1.2em; color:#fff; float:left; }
div.performance_programTicket_Box_bottomtext h5{ width:96%; padding:0 2% 20px; border-bottom:1px solid #fff; float:left; }
div.performance_programTicket_Box_bottomtext p{ width:100%; padding:20px 0; letter-spacing:0.1em; line-height:2em; float:left; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    div.performance_programArea{ padding:10px 0; }
    
    div.performance_programArea h3{ font-weight:bold; font-size:1em; letter-spacing:0em;  }
    div.performance_programArea h3 span{ font-size:0.8em; }
    div.performance_programBox{ width:100%; padding:40px 3%; margin:20px 0; }
    
    .performance_programBox_List_tag{ font-size:1em; }
    .performance_programBox_List_text{ font-size:1.1em; }
    
    .performance_programBox_Img{ width:100%; padding:0; }

    div.performance_programTicket{ width:100%; padding:20px 0%; }
    
    .performance_programTicket_Box2{ width:48%; }
    
    div.performance_programTicket_Box_bottomtext{ font-size:1em; }
    
}

/*----- 出演 設定 ----------------------------------------------------*/

div.castListArea{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:15px 0; width:100%; padding:20px 0; flaot:left; }
div.castListArea::after{ content:""; display:block; width:24%; height:0; }
div.castListArea::before{ content:""; display:block; width:24%; height:0; order: 1; }
.castListBox{ width:24%; text-align:center }
.castListBox img{ border-radius:15px; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:600px){
    
    .castListBox{ width:48%; text-align:center }
    
}

/*----- アクセス 設定 ----------------------------------------------------*/

div.accessBox{ box-sizing:border-box; width:96%; padding:20px 2%; margin:0 2%; border:1px solid #fff; float:left;}
div.accessGmap{ width:48%; float:left; }

/*gmap*/
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 92.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

div.accessDetail{ width:48%; float:right; }
.accessDetail h5{ width:100%; padding:10px 0; font-size:1.4em; font-weight:bold; flaot:left; }
.accessDetail_address{ width:100%; padding:0 0 20px; font-size:1.2em; float:left; }
.accessDetail_text{ width:100%; padding:20px 0; float:left; }
.accessDetail_text a{ color:#fff; }

div.gmapBtn{ width:100%; padding:20px 0 0; text-align:center; float:left; }
div.gmapBtn a{ display:inline-block; box-sizing:border-box; padding:7px 50px; color:#fff; font-size:1.4em; font-weight:bold; text-decoration:none; border:3px solid #404040; }
div.gmapBtn a:hover{ background-color:#6a6a6a; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){

    div.accessGmap{ width:100%; float:left; }
    
    div.accessDetail{ width:100%; float:right; }
    
}

/*----- お問い合せ 設定 ----------------------------------------------------*/

/* 全体のボックス */
div.contactBox { width: 100%; float: left; }

/* contactBox 内の各要素 */
.contactBox div { width: 96%; padding: 20px 2%; margin: 20px 0; background-color: #fff; color: #000; font-size: 2em; font-weight: bold; text-align: center; letter-spacing: 0.2em; line-height: 3em; float: left; }

/* 電話リンクのスタイル */
a.icon_tel { color: #000; text-decoration: none; }
a.icon_tel::before { content: '\1F4DE '; color: #000; }

/* メールボタンのスタイル */
a.mail_btn { display: inline-block; vertical-align:middle; padding: 10px 15px; color: #fff; background: #22201f; border: 2px solid #ccd214; border-radius: 15px; line-height:1; text-align: center; text-decoration: none; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    .contactBox div { font-size:1.2em; letter-spacing:0; line-height:3em; }
    
}