/* ------------------------------------------------ override */

#special_ticket .bg_wrap { position: relative; padding: 360px 0 0; background: none;  }
#special_ticket .bg { height: 448px; width: 100%; position: absolute; top: 0; left: 0; z-index: -1;
	background: url(../images/tickets/bg_03.jpg) no-repeat center center; 
	background-size: cover; 
}
#special_ticket .bg .overlay { width: 100%; height: 100%; position: relative;
	background: url(../images/tickets/bg_overlay.png) no-repeat center bottom;
	background-size: 100% auto;
}
#special_ticket .heading h3 { padding: 50px 0 0; margin: 0; line-height: 160%; font-size: 26px; background: none; font-family: 'Noto-Sans-JP-Regular'; }
#special_ticket .caption { padding: 30px 0 10px; }

#special_ticket .notes h4 { font-size: 21px; font-family: 'Noto-Sans-JP-Medium'; padding: 0 0 25px; border-bottom: 1px solid #707070; }

#special_ticket .caution { padding: 0 0 30px; display: flex; flex-wrap: wrap; justify-content: space-between; }
#special_ticket .caution ul { width: 48%; padding: 10px 0; }
#special_ticket .caution ul li { font-size: 14px; color: #9B9B9B; line-height: 150%; padding: 2px 0; }
#special_ticket .caution ul li a { color: #9B9B9B; text-decoration: none; }
#special_ticket .contact_caption { padding: 0 0 50px; }
#special_ticket .contact_caption p.title { font-size: 18px; padding: 0 0 10px; }
#special_ticket .contact_caption p.text { font-size: 16px; color: #B4B4B4; }

.tab_nav { padding: 50px 0; display: flex;}
.tab_nav li { width: 50%; border: 1px solid #fff;  }
.tab_nav a { background: #9d52e3; color: #fff; display: block; text-align: center; padding: 20px 0; }
.tab_nav li.active a { background: #fff; color: #000;  }
.tab_nav a:hover { opacity: 0.9; }

.calendar { padding: 0 0 20px; }
.calendar .nav { padding: 0; position: relative; }
.calendar .nav a { display: block; position: absolute; color: #fff; font-size: 18px; left: 0; top: 0; bottom: 0; height: 20px; margin: auto; padding: 10px; line-height: 20px; }
.calendar .nav a.prev { padding: 10px 10px 12px 20px;
	background: url(../images/tickets/icn_arw_left.svg) no-repeat left center; 
}
.calendar .nav a.next { right: 0; left: auto; padding: 10px 20px 12px 10px;
	background: url(../images/tickets/icn_arw_right.svg) no-repeat right center; 
}

.calendar .nav h3 { text-align: center; font-size: 48px; letter-spacing: 2px; }
.calendar .box { overflow: hidden; }
.calendar table { margin: 20px 0 0; width: 100%; background: #fff; color: #000; border: 1px solid #000; }
.calendar table th { width: calc(100% / 7); }
.calendar table th,
.calendar table td { border: 1px solid #000; padding: 15px; }
.calendar table th p { color: #fff; }
.calendar table td p { color: #000; }
.calendar table td p.num { position: absolute; left: 15px; top: 15px; font-size: 15px; }
.calendar table tr:first-child th { background: #272727; }
.calendar table tr th:first-child p { color: #9D2424; }
.calendar table tr td:first-child p { color: #9D2424; }
.calendar table tr th:last-child p,
.calendar table tr td:last-child p { color: #236DC3; }
.calendar table td { height: 90px; vertical-align: top; position: relative; }
.calendar table td.clickable { cursor: pointer; }
.calendar table td.disabled { pointer-events: none; }
.calendar table td.disabled p { color: #bbb !important; }
.calendar table td.disabled span { color: #bbb; }
/* .calendar table td.disabled::before { display: none; } */
.calendar table td.open,
.calendar table td.limited { cursor: pointer; }
.calendar table td::before { display: block; position: absolute; color: #0063e1; font-size: 30px; height: 30px; width: 30px;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 0 20px;
}

.calendar table td span { margin: auto; position: absolute; font-size: 16px; height: 16px; line-height: 16px; text-align: center; padding: 50px 0 0; left: 0; top: 0; bottom: 0; right: 0; display: block; color: #000; }

.calendar table td.open::before { content: '◯'; color: #81B581; font-weight: bold; }
.calendar table td.limited::before { content: '△'; color: #BF0909; font-weight: bold; }
.calendar table td.soldout::before { content: '';
	background: url(../images/tickets/icn_close.svg) no-repeat center top; 
	background-size: 94% auto; 
}
.calendar table td.active { background: #e0efff; pointer-events: none; background-clip: padding-box; }
#tickets .calendar .box p.text { text-align: right; padding: 10px 0 30px; font-size: 14px; }

/* ------------------------------------------------ tickets */

#tickets { padding: 0 0 40px; }
#tickets h3 { text-align: center; font-size: 26px; padding: 10px 0; }
#tickets .block { padding: 20px 0; }
#tickets .items .text { text-align: center; padding: 0 0 40px; line-height: 160%; font-size: 18px; }
#tickets .items .box { display: flex; justify-content: space-between; }
#tickets .box .pic { width: 380px; height: auto; display: block; margin: 0 40px 0 0; }
#tickets .box .pic img { width: 100%; height: auto; }
#tickets .box ul { width: calc(100% - 420px); padding: 10px 0; }
#tickets .box ul li { padding: 15px 0; display: flex; justify-content: space-between; align-items: center; }
#tickets .box ul li h4 { font-size: 15px; line-height: 180%; color: #aaa; }
#tickets .box ul li h4 span { display: inline-block; padding: 0 10px 0 0; font-size: 24px; }
#tickets .box ul li .price { display: flex; align-items: center; }
#tickets .box ul li .price .num { font-size: 24px; padding: 0 20px; font-family:"ヒラギノ角ゴ Pro w6","Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; }
#tickets .box ul li .price .count { position: relative; }
#tickets .box ul li .price .count a { text-align: center; display: block; font-size: 18px; width: 20px; height: 20px; line-height: 20px; color: #000;
	cursor: pointer;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
}
#tickets .box ul li .price .count .minus { left: 10px; }
#tickets .box ul li .price .count .plus { right: 10px; }
#tickets .box ul li .price .count .disabled { pointer-events: none; color: #c1c1c1; }
#tickets .box ul li .price .count input[type="number"] { border-radius: 25px; width: 110px; text-align: center;
	font-size: 17px; 
	padding: 5px 20px;
	box-sizing: border-box; 
	appearance: textfield; 
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
}

#tickets .box ul li .soldout p { border-radius: 20px; background: #fff; color: #000; padding: 10px 20px; }
#tickets .gray_box { padding: 30px 50px; background: #181818; }
#tickets .notes { padding: 50px 0 0; }

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	
	#special_ticket { padding: 0 0 60px; }
	#special_ticket .bg { height: 224px; background: url(../images/tickets/bg_03_sp.jpg) no-repeat center center; background-size: cover; }
	#special_ticket .bg .overlay { background-size: 100% auto; }
	#special_ticket .bg_wrap { padding: 155px 0 0; }
	#special_ticket .heading h2 img { max-width: 395px; width: 76%; }
	#special_ticket .heading h3 { font-size: 14px; padding: 20px 0 0; }
	#special_ticket .notes h4 { font-size: 16px; padding: 0 0 20px; }
	
	#special_ticket .caption li { color: #fff; }
	#special_ticket .caution { display: block; }
	#special_ticket .caution ul { width: 100%; padding: 0; }
	#special_ticket .caution ul li { font-size: 12px;line-height: 160%; }
	
	#special_ticket .contact_caption p.title { font-size: 14px; }
	#special_ticket .contact_caption p.text { font-size: 12px; }
	
	.tab_nav { padding: 30px 0; }
	.tab_nav li a { padding: 10px 0; font-size: 14px; }
	.calendar .nav a { height: 12px; line-height: 12px; margin: auto; top: 0; bottom: 0; font-size: 12px; background-size: 8px auto !important; }
	.calendar table th, 
	.calendar table td { padding: 8px; }
	.calendar table td { height: 50px; }
	.calendar table td p.num { font-size: 10px; left: 6px; top: 6px; }
	.calendar table th p { font-size: 12px; }
	.calendar table td::before { font-size: 15px; width: 15px; height: 15px; padding: 0 0 5px; }
	.calendar table td span { font-size: 10px; padding: 30px 0 0; }
	
	#tickets { padding: 0 0 30px; }
	#tickets .notes { padding: 20px 0 0; }
	#tickets .gray_box { padding: 10px 4%; }
	#tickets h3 { padding: 0; font-size: 20px; }
	#tickets h3.date { padding: 20px 0; }
	#tickets .block { padding: 5px 0; }
	#tickets .items .text { font-size: 14px; padding: 0 0 10px; }
	#tickets .items .box { display: block; }
	#tickets .box .pic { width: 100%; margin: 0; }
	#tickets .box ul { width: 100%; }
	#tickets .box ul li { padding: 10px 0; }
	#tickets .box ul li h4 { font-size: 12px; }
	#tickets .box ul li h4 span { font-size: 16px; display: block; }
	#tickets .box ul li .price .num { font-size: 16px; padding: 0 10px; }
	#tickets .box ul li .price .count input[type="number"] { width: 90px; font-size: 15px; }
	#tickets .box ul li .price .count a { width: 18px; height: 18px; font-size: 14px; }
	#tickets .box ul li .soldout p { font-size: 12px; padding: 10px 25px; }
	
	#tickets .calendar .box p.text { padding: 10px 0 20px; }
	
	
}