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

@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap');

@import "compass/css3";


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

/*----- スライダー 設定 ----------------------------------------------------*/
div#sliderWrap{ position:relative; width:100%; text-align:center; float:left; }

.slider_sp { display:none; }

@media screen and (max-width:1200px){
    
    div#sliderWrap{ padding-top:70px; }    
    
	.slider_pc { display:none; }
	.slider_sp { display:block; }
    
}

/*----- カウントダウン 設定 ----------------------------------------------------*/

#countdownWrap { position:absolute; width:100%; padding-top:0; bottom:0.8vw; text-align:center; color:#f2f2f2; float:left; }

.countdown_numbers { font-size:2.8em; letter-spacing:0.18em; line-height:1.2; color:#e60012; text-shadow:0 0 6px rgba(230,0,18,0.60); }
.countdown_numbers span { display:inline-block; min-width:3ch; text-align:center; }
.countdown_labels { display:flex; justify-content:center; gap:3.6em; margin-top:0; font-size:0.7em; letter-spacing:0.25em; color:#cccccc; opacity:0.85; }
.countdown_labels span { display:inline-block; text-align:center; }
#countdownWrap::after { content:""; display:block; clear:both; }
#cd_ms { font-size:0.45em; letter-spacing:0.1em; vertical-align:top; opacity:0.8; }


@keyframes pulseSoft {
	0% { opacity:1; }
	50% { opacity:0.7; }
	100% { opacity:1; }
}

.countdown_numbers.is-pulse {
	animation:pulseSoft 2s ease-in-out infinite;
}

@media screen and (max-width:1200px){
	#countdownWrap { padding-top:0; bottom:18vw;  }
	.countdown_numbers { font-size:2.2em; letter-spacing:0.15em; }
	.countdown_labels { gap:2.2em; font-size:0.65em; }
}



/*----- 共通設定 設定 ----------------------------------------------------*/

section.sectionWrap{ width:100%; padding:30px 0 30px; float:left; }
.sectionWrap1{}
.sectionWrap2{ background:url("../../img/index/bg_washi.jpg") repeat; background-size:cover; }

div.sectionArea{ width:1100px; margin:0 auto; }

h2.section_tit{ width:12%; padding:0 44%; text-align:center; flaot:left; }

/*スクロールアニメーション*/
.fadeIn {
	opacity:0;
	transform:translateY(12px);
	transition:opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fadeIn.is-show {
	opacity:1;
	transform:translateY(0);
}



/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.sectionArea{ width:98%; }
    
    h2.section_tit{ width:100%; padding:0; }
    h2.section_tit img{ max-width:140px; }
    
}




/*----- NEWS 設定 ----------------------------------------------------*/

div.newsList{ display:flex; justify-content:center; flex-wrap:wrap; gap:15px 0; width:70%; padding:30px 15% 0; color:#ffffff; flaot:left; }
.newsListBox{ width:100%; }
.newsListBox_date{ display:inline-block; padding:0 5px 3px; font-size:0.9em; border-bottom:1px solid #fff; }
.newsListBox_detail{ width:96%; padding:10px 2%; font-size:1.2em; float:left; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.newsList{ width:100%; padding:30px 0 0; }
    
}


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

div.eventDetail{ width:90%; padding:30px 5% 0; flaot:left; }

.eventDetail_logo{ width:70%; padding:0 15%; text-align:center; flaot:left; }
.eventDetail_datelocation{ width:86%; padding:0 7%; text-align:center; float:left; }
.eventDetail_ticket{ width:80%; float:left; }
.eventDetail_qr{ width:16%; float:right; }
.eventDetail_footer{ width:100%; float:left; }

ul.ticket_inline_list{ display:flex; justify-content:flex-start; flex-wrap:wrap; gap:0 1em; width:100%; float:left; }
ul.ticket_inline_list li{ white-space: nowrap; }

.eventDetail_footer{ width:100%; box-sizing:border-box; padding:5px 0; border:1px solid #fff; text-align:center; font-size:0.8em; float:left; }
.eventDetail_footer_bar_venue{ width:50%; float:left; }
.eventDetail_footer_bar_information{ width:50%; float:right; }
.eventDetail_footer a{ text-decoration:none; }
.eventDetail_footer a:hover{ text-decoration:underline; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    .eventDetail_logo{ width:100%; padding:0; }
    
    .eventDetail_ticket{ width:100%; float:left; }
    
    .eventDetail_qr{ display:none; }
    
    .eventDetail_footer_bar_venue{ width:100%; padding:0 0 1em; margin: 0 0; }
    .eventDetail_footer_bar_information{ width:100%; }
    
    
}


/*----- チケット 設定 ----------------------------------------------------*/

div.ticketList{ display:flex; flex-wrap:wrap; justify-content:space-around; gap:20px 0; width:96%; padding:30px 2%; flaot:left; }

div.ticketListBox{ width:23%; padding:10px 0; border:1px solid #ababab; border-radius:5px; background:url("../../img/index/bg_washi.jpg") no-repeat; background-size:cover; position:relative; overflow:hidden; }

.ticketListBox.is_soldout::before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.50); z-index:2; }
.ticketListBox.is_soldout::after{ content:""; position:absolute; top:50%; left:50%; width:80%; height:80%; background:url("../../img/index/soldout.png") no-repeat center; background-size:contain; transform:translate(-50%,-50%); z-index:3; pointer-events:none; }

.ticketListBox_tag{ display:inline-block; margin:0 10px; padding:5px 3px; border:1px solid #e60012; color:#e60012; }
.ticketListBox_name{ width:96%; padding:10px 0 20px; margin:0 2%; border-bottom:1px solid #fff; text-align:center; font-size:1em; font-weight:normal; color:#fff; float:left; }
.ticketListBox_name::before{ content:"■ "}
.ticketListBox_price{ width:100%; padding:20px 0; text-align:center; font-size:2.4em; color:#e60012; float:left; }
.ticketListBox_text{ width:100%; text-align:center; padding:0 0 20px;}

div.ticket_btnArea{ width:84%; padding:0 8%; float:left; }
div.ticket_btnArea h3{ width:100%; padding:15px 0; font-size:1em; font-weight:normal; color:#fff; float:left; }
div.ticket_btnArea ul{ display: flex; flex-wrap: wrap; justify-content: space-between; gap:20px 0; width:100%; padding:0 0 20px; float:left; }
div.ticket_btnArea ul li{ width:200px; }


div.ticketInfomation{ display:flex; flex-wrap:wrap; justify-content:space-around; gap:20px 0; width:96%; padding:30px 2%; float:left; }
.ticketInfomation_areamap,
.ticketInfomation_notes{ width:48%; }
.ticketInfomation_areamap h3,
.ticketInfomation_notes h3{ width:100%; padding:0 0 20px; font-size:1.8em; font-weight:bold; letter-spacing:0.2em; float:left; }

.ticketInfomation_areamap_image{ width:90%; padding:0 5%; float:left; }
.ticketInfomation_areamap p{ width:100%; text-align:center; padding-top:10px; float:left; }

.ticketInfomation_notes ul{ width:96%; padding:0 2%; float:left; }

.ticketInfomation_notes ul li{ width:100%; padding:0 0 1em; font-size:1em; float:left; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.ticketListBox{ width:48%;}
    
    .ticketListBox_name{ height:40px; font-size:0.9em; padding:10px 0; }
    .ticketListBox_price{ font-size:1.6em; padding:10px 0; }
    .ticketListBox_text{ width:96%; text-align:left; padding:0 2% 0;}
    
    div.ticket_btnArea{ width:100%; padding:0; float:left; }
	div.ticket_btnArea ul li{ width:50%; padding:0 25%; }
    
    div.ticketInfomation{ width:96%; padding:30px 2%; float:left;  }
    .ticketInfomation_areamap,
    .ticketInfomation_notes{ width:100%; }
    .ticketInfomation_areamap h3,
    .ticketInfomation_notes h3{ font-size:1.6em; letter-spacing:0.1em; }
    
}


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

div.accessDetail{ display:flex; flex-wrap:wrap; justify-content:space-around; gap:20px 0; width:96%; padding:30px 2%; float:left; }
.accessDetail_venue,
.accessDetail_map{ width:48%; }
.accessDetail_venue h3,
.accessDetail_map h3{ width:100%; padding:0 0 20px; font-size:1.8em; font-weight:bold; letter-spacing:0.2em; float:left; }

.accessDetail_venue_text{ width:100%; padding:0 0 1em; font-size:1.1em; line-height:1.7em; letter-spacing:0.1em;  flaot:left; }

.accessDetail_venue_btn { display: flex; justify-content: center; margin-top: 24px; }
.accessDetail_venue_btn a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; border: 1px solid #fff; color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; background-color: transparent; transition: background-color 0.3s ease; }
.accessDetail_venue_btn a::before { content: "›"; display: inline-block; width: 24px; height: 24px; line-height: 22px; text-align: center; border: 1px solid #fff; border-radius: 50%; font-size: 16px; }
.accessDetail_venue_btn a:hover { background-color: #ae1925; }


div.accessDetail_map_gmap{ width:100%; flaot:left; }
.gmap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* 16:9のアスペクト比 */
    height: 0;
}

.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.accessDetail{ width:96%; padding:30px 2%; float:left; }
    .accessDetail_venue,
    .accessDetail_map{ width:100%; }
    .accessDetail_venue h3,
    .accessDetail_map h3{ font-size:1.6em; letter-spacing:0.1em; }
    
    .gmap {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        /* 16:9のアスペクト比 */
        height: 0;
        }

    
    
}

/*----- 注意事項 設定 ----------------------------------------------------*/

div.rulesBox{ width:96%; padding:20px 2%; margin:30px 2%; box-sizing:border-box; border:1px solid #c7000a; float:left; }

div.tableBox{ width:90%; padding:0 5%; letter-spacing:0.1em;  float:left; }

div.tableBox h3{ width:100%; padding:20px 0; font-size:1.8em; float:left; }

.tableBox table{ width:100%; font-weight:bold; flaot:left; }
.tableBox table tr{ width:100%; padding-bottom:3px; float:left; }
.tableBox table tr td{ vertical-align:top; }


/*----- QA 設定 ----------------------------------------------------*/


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

div.contactBox{ width:96%; padding:20px 2% 20px; margin:30px 2%; border:1px solid #c7000a; box-sizing:border-box; float:left; }
div.contactBox h3{ width:100%; font-size:1.6em; font-weight:bold; float:left; }
div.contactBox div{ width:100%; padding:30px 0 ; font-size:1.2em; text-align:center; float:left; }