@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{ width:100%; text-align:center; float:left; }


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

section.sectionWrap{ width:100%; padding:20px 0; float:left; }
div.sectionArea{ width:1200px; margin:0 auto; }

h2.sectionTit { width:100%; margin-bottom:20px; float:left; text-align:left; }
h2.sectionTit img { height:45px; width:auto; display:inline-block; vertical-align:bottom; }
h2.sectionTit span { display:inline-block; vertical-align:bottom; font-size:0.7em; font-weight:normal; text-indent:1em; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.sectionArea{ width:98%; }
    
    h2.sectionTit { width:96%; padding:2%; margin-bottom:20px; float:left; text-align:left; }
    h2.sectionTit img { display:block; height:30px; }
    h2.sectionTit span { display:block; text-indent:1em; }
    
}


/*----- ツアースケジュール 設定 ----------------------------------------------------*/

/* ▼エリア別（ボタン＋モーダル） */
div.scheduleHead{ width:100%; float:left; text-align:right; }
div.scheduleHead h2.sectionTit{ text-align:left; margin:0; }
button.areaGuideBtn{ display:inline-block; margin-top:10px; padding:12px 24px; border:1px solid #fff; background:#be0b19; color:#fff; font-size:1.1em; font-weight:bold; cursor:pointer; border-radius:0; transition:all .2s ease; letter-spacing:0.05em; }
button.areaGuideBtn:hover{ background:#fff; color:#be0b19; }
div.areaGuideModal{ position:fixed; inset:0; z-index:999999; display:none; }
div.areaGuideModal.is_open{ display:block; }
div.areaGuideModal_overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.8); }
div.areaGuideModal_box{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; max-width:700px; padding:20px; background:#141313; border:2px solid #464444; box-sizing:border-box; }
div.areaGuideModal_box img{ max-width:100%; max-height:80vh; width:auto; height:auto; display:block; margin:0 auto; box-shadow:0 0 30px rgba(0,0,0,0.6); }
button.areaGuideModal_close{ position:absolute; top:-20px; right:-20px; width:44px; height:44px; border:1px solid #fff; background:#be0b19; color:#fff; font-size:1.4em; font-weight:bold; cursor:pointer; }
button.areaGuideModal_close:hover{ background:#fff; color:#be0b19; }

@media screen and (max-width:1200px){
    div.scheduleHead{ display:block; text-align:center; }
	button.areaGuideBtn{ margin-bottom:15px; }
	div.areaGuideModal_box{ width:92vw; }
}

/* ▼フライヤー全体 */
div.scheduleFlyerWrap{
	width:100%;
	margin:20px 0;
	float:left;
	overflow-x:auto;
    overflow-y:hidden;
	position:relative;
	-ms-overflow-style:none;
	scrollbar-width:none;
	cursor:grab;
	user-select:none;
	-webkit-user-select:none;
}

div.scheduleFlyerWrap::-webkit-scrollbar{
	display:none;
}

div.scheduleFlyerWrap.is_dragging{
	cursor:grabbing;
}

div.scheduleFlyerWrap img{
	-webkit-user-drag:none;
	user-drag:none;
	pointer-events:none;
}

/*スワイプ*/
div.scheduleFlyerWrap{ position:relative; }
div.scheduleSwipeGuide{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:20; opacity:0; pointer-events:none; transition:opacity 0.4s ease; }
div.scheduleSwipeGuide.is_show{ opacity:1; }
div.scheduleSwipeGuide img{ display:block; width:100%; height:auto; }

/* 横並び */
div.scheduleFlyerList{
	display:flex;
	gap:20px;
	padding:0 20px;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
}

/* 各フライヤー */
div.scheduleFlyerItem{
	position:relative;
	width:20%;
	max-width:280px;
	flex-shrink:0;
	scroll-snap-align:center;
}

/* クリック領域 */
.scheduleFlyerBtn{
	appearance:none;
	border:none;
	background:none;
	padding:0;
	margin:0;
	cursor:pointer;
	display:block;
	width:100%;
	position:relative;
}

/* 画像 */
.scheduleFlyerItem img{
	width:100%;
	height:auto;
	display:block;
}

/* SOLD OUT */
.scheduleFlyerItem .soldOut{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:none;
	justify-content:center;
	align-items:center;
	background:rgba(0,0,0,0.6);
	font-weight:bold;
	letter-spacing:0.1em;
	color:red;
	text-shadow:0 0 8px rgba(0,0,0,0.8);
	font-size:1.4em;
	pointer-events:none;
}

/* SOLD OUT時だけ表示 */
.scheduleFlyerItem.is_soldout .soldOut{
	display:flex;
}

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    div.scheduleFlyerWrap{
        width:100%;
        margin:0 0 20px;
    }
    
    /* 各フライヤー */
    div.scheduleFlyerItem{
        width:40%;
        max-width:320px;
    }
    
    .scheduleFlyerItem .soldOut{
       font-size:clamp(14px, 3.5vw, 26px);
        text-align:center;
    }
    
}



/*▼月選択*/
div.scheduleMonthNav{width:96%; padding:0 2%; float:left;}

div.scheduleMonthNav ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 0;width:100%;float:left;}

div.scheduleMonthNav ul li{width:13.5%;float:left;}

div.scheduleMonthNav ul li button{position:relative;width:100%;padding:14px 32px 14px 16px;border:1px solid #464444;border-radius:15px;background:#464444;color:#fff;font-size:1.1em;font-weight:bold;text-align:center;cursor:pointer;appearance:none;-webkit-appearance:none;}

div.scheduleMonthNav ul li button::after{content:"　>";position:absolute;top:50%;right:14px;transform:translateY(-50%);color:#fff;font-size:1em;font-weight:bold;}

div.scheduleMonthNav ul li button.is_active{background:#be0b19;border-color:#be0b19;}

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

    div.scheduleMonthNav ul::after{
        content:"";
        display:block;
        width:24%;
    }
    div.scheduleMonthNav ul li{width:24%;float:left;}

}


/*▼公演一覧*/
div.scheduleListWrap{ width:92%; padding:20px 2%; margin:20px 2% 0; background-color:#141313; float:left; }

div.scheduleListHead{ display:flex; align-items:center; padding-bottom:10px; color:#fff; font-weight:bold; font-size:1.2em; }

ul.scheduleList{ width:100%; float:left; }

li.scheduleItem{ display:flex; align-items:center; border-bottom:1px solid #e9aeb2; padding:12px 0; position:relative; color:#fff; font-size:1.2em; }
.scheduleListHead .date,li.scheduleItem .date{ width:180px; }
.scheduleListHead .date,li.scheduleItem .date::before{ content:"▶︎　" }
.scheduleListHead .area,li.scheduleItem .area{ width:140px; }
.scheduleListHead .venue,li.scheduleItem .venue{ flex:1; }
.scheduleListHead .detail,li.scheduleItem .detailBtn{ width:120px; margin-right:2%; text-align:right; }

li.scheduleItem .detailBtn{ margin-left:auto; appearance:none; border:1px solid #fff; background:#be0b19; color:#fff; padding:10px 18px; border-radius:0; cursor:pointer; font-size:1.2em; font-weight:bold; text-align:center; }
li.scheduleItem .detailBtn:hover{ background:#fff; color:#be0b19; }

li.scheduleItem .soldOut{ position:absolute; top:0; left:0; width:100%; height:100%; display:none; justify-content:center; align-items:center; background:rgba(0,0,0,0.6); font-weight:bold; letter-spacing:0.1em; color:red; text-shadow:0 0 8px rgba(0,0,0,0.8); font-size:1.4em; pointer-events:none; }
li.scheduleItem .soldOut{ pointer-events:none; }

li.scheduleItem.is_soldout .soldOut{ display:flex; }
li.scheduleItem.is_soldout{ opacity:0.7; }

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

	div.scheduleListHead, li.scheduleItem{ display:flex; flex-wrap:wrap; align-items:center; }

	.scheduleListHead .date, li.scheduleItem .date{ width:100%; }

	.scheduleListHead .area, li.scheduleItem .area{ width:auto; margin-right:10px; }
	li.scheduleItem .area{ width:auto; padding:0 10px; background-color:#BE0B19; }

	.scheduleListHead .venue{ flex:1; text-align:center;  }
    li.scheduleItem .venue{ flex:1; text-align:left; font-size:1.2em; text-indent:2em; }

	li.scheduleItem::after{ content:""; flex-basis:100%; order:2; }

	.scheduleListHead .detail, li.scheduleItem .detailBtn{ width:auto; margin-left:0; text-align:center; }

	li.scheduleItem .detailBtn{ order:3; display:block; width:auto; margin:10px auto 0; padding:8px 20px; font-size:1.1em; }

	li.scheduleItem, div.scheduleListHead{ font-size:1em; }

}

/*▼開場・開演時間*/
div.scheduleTimeWrap{ width:100%; padding:30px 0 0; float:left; }

h3.scheduleTimeTit{ width:100%; padding:0 0 15px; color:#fff; font-size:1.2em; font-weight:bold; letter-spacing:0.1em; float:left; }

div.scheduleTimeTableWrap{ width:100%; float:left; overflow-x:auto; }

table.scheduleTimeTable{ width:100%; border-collapse:collapse; background:#0f0f0f; color:#fff; border:2px solid #464444; }
table.scheduleTimeTable thead th{ padding:12px 10px; border:1px solid #464444; background:#1b1b1b; color:#fff; font-size:1.05em; font-weight:bold; text-align:center; }
table.scheduleTimeTable thead th:first-child{ width:26%; }
table.scheduleTimeTable tbody th{ padding:14px 10px; border:1px solid #464444; background:#181818; color:#fff; font-size:1.05em; font-weight:bold; text-align:center; white-space:nowrap; }
table.scheduleTimeTable tbody td{ padding:14px 10px; border:1px solid #464444; color:#fff; font-size:1.1em; font-weight:bold; text-align:center; }
table.scheduleTimeTable tbody tr:nth-child(even) th,table.scheduleTimeTable tbody tr:nth-child(even) td{ background:#141313; }

/*▼ポップアップ*/
div.scheduleModal{ position:fixed; top:0; left:0; width:100%; height:100%; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; z-index:999999; }

div.scheduleModal.is_open{ opacity:1; visibility:visible; }

div.scheduleModal_overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); opacity:0; transition:opacity .35s ease; }

div.scheduleModal.is_open .scheduleModal_overlay{ opacity:1; }

div.scheduleModal_box{ position:absolute; top:55%; left:50%; transform:translate(-50%,-50%) scale(.96); width:90%; max-width:700px; padding:20px; background:#141313; border:2px solid #464444; box-sizing:border-box; opacity:0; transition:opacity .35s ease, transform .35s ease; }

div.scheduleModal.is_open .scheduleModal_box{ opacity:1; transform:translate(-50%,-50%) scale(1); }

div.scheduleModal_overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); }

div.scheduleModal_box{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; max-width:700px; padding:20px; background:#141313; border:2px solid #464444; box-sizing:border-box; }

button.scheduleModal_close{ position:absolute; top:-18px; right:-18px; width:44px; height:44px; appearance:none; border:1px solid #fff; background:#be0b19; color:#fff; font-size:1.4em; font-weight:bold; line-height:1; cursor:pointer; z-index:10; }

div.scheduleModal_img{ position:relative; width:100%; text-align:center; }
div.scheduleModal_img img{ max-width:100%; height:auto; display:block; margin:0 auto; }

div.scheduleModal_img .soldOut{ position:absolute; top:0; left:0; width:100%; height:100%; display:none; justify-content:center; align-items:center; background:rgba(0,0,0,0.6); color:#be0b19; font-size:2em; font-weight:bold; letter-spacing:0.1em; pointer-events:none; }
div.scheduleModal_img.is_soldout .soldOut{ display:flex; }

div.scheduleModal_btnArea{ width:100%; padding:20px 0 0; text-align:center; float:left; }
div.scheduleModal_btnArea a{ display:inline-block; padding:14px 30px; border:1px solid #fff; background:#be0b19; color:#fff; text-decoration:none; font-size:1.2em; font-weight:bold; }
div.scheduleModal_btnArea a:hover{ background:#fff; color:#be0b19; }


/* 月ボタン切り替えアニメーション */
div.scheduleFlyerWrap,
div.scheduleListWrap{
	transition:opacity .25s ease;
}

div.scheduleFlyerWrap.is_changing,
div.scheduleListWrap.is_changing{
	opacity:0;
}

/* 月切り替え用表示制御 */
div.scheduleFlyerItem{
	display:none;
}

div.scheduleFlyerItem.is_show{
	display:block;
}

li.scheduleItem{
	display:none;
}

li.scheduleItem.is_show{
	display:flex;
}

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

div.ticketBtnArea{ display:flex; flex-wrap:wrap; justify-content:center; gap:15px 30px; width:90%; padding:30px 5%; flaot:left; }
div.ticketBtnArea .ticketBtnBox{ width:24%; text-align:center; }
div.ticketBtnArea .ticketBtnBox a:hover{ opacity:0.8; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    div.ticketBtnArea .ticketBtnBox{ width:60%; text-align:center; }
    
}


/*----- ツアー概要 設定 ----------------------------------------------------*/

div.eventBox{ width:94%; padding:20px 3%; background:#141313; float:left; }

.eventBox_img{ width:48%; float:left; }
.eventBox_text{ width:50%; float:right; }
.eventBox_text h3{ width:100%; letter-spacing:0.1em; float:left; }
.eventBox_text h3 strong{ font-size:1.2em; font-weight:bold; line-height:1.8em; }
.eventBox_text h3 small{ font-size:0.9em; font-weight:bold; color:#c90d20; }
.eventBox_text_textbox{ width:100%; padding:40px 0 0 0; line-height:1.7em; font-size:1.2em; word-break:normal; overflow-wrap:break-word; float:left; }
.eventBox_text_textbox p{ padding-bottom:2em;  }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
 
    .eventBox_img{ width:80%; padding:0 10%; }
    .eventBox_text{ width:100%; margin-top:20px; }
    .eventBox_text h3{ letter-spacing:0;  }
    .eventBox_text h3 strong{ font-size:1em; }
    .eventBox_text_textbox{ padding:15px 0 0 0; font-size:1em; }
    .eventBox_text_textbox p{ padding-bottom:1em; }
    
}


/*----- ツアーグッズ販売 設定 ----------------------------------------------------*/


/*----- 注意事項＆お問合せ 設定 ----------------------------------------------------*/

div.info_contactBox{ box-sizing:border-box; width:100%; padding:30px 3%; border:1px solid #c90d20; text-align:center; float:left; }
div.info_contactBox h3{ width:100%; padding:0 0 20px; font-size:1.4em; letter-spacing:0.2em; font-weight:bold; flaot:left; }
div.info_contactBox ul{  width:fit-content; margin:0 auto 20px; text-align:left; font-size:1.2em; }
div.info_contactBox ul li{ padding-bottom:0.5em; }
div.info_contactBox div{ font-size:1.2em; }


/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
    
    div.info_contactBox h3{ font-size:1.2em; letter-spacing:0.1em; }
    
    div.info_contactBox ul{  font-size:0.9em; }
    
    
}