@charset "utf-8";

/*==========================================================
	
==========================================================*/

	/*API*/
	#ticket_api {
		display: none;
		opacity: 0;
		transition: opacity;
		background: none;
		margin: 10px auto 30px auto;
	}
		#scheduler .contentBox {
			
		}
		
		#ticket_api.on{
			display: block;
			animation: ticket_on 0.2s forwards;
		}
			@keyframes ticket_on {
				0%{
					opacity: 0;
				}
				100%{
					opacity: 1;
				}
			}
		
		#ticket_api .note {
			margin: 30px auto 0 auto;
			color: #ffffff;
			line-height: 1.6;
			font-size: 12px;
		}
		
			#ticket_api .note a {
				color: #ffffff;
			}
			
			#ticket_api .note a:hover {
				text-decoration: none;
			}

/*===================sp=*/@media screen and (max-width: 860px) {
					
	/*日程*/
	#schedule {
		background: none;
		margin-top: 50px;
	}
		#schedule .contentBox {
			display: block;
		}
			#schedule .contentBox .imgBox {
				width: 76%;
				padding: 0 0 0 0;
				margin: 0 auto 0 auto;
			}
			#schedule .contentBox .txtBox {
				width: 100%;
				text-align: left;
				margin: 20px auto 0 auto;
			}
				#schedule .contentBox .txtBox h2 {
					width: 100%;
					color: #00bdad;
					text-align: left;
					margin: 0 0 0 0;
					border-bottom: none;
				}
				#schedule .contentBox .txtBox h3 {
					color: #00bdad;
					text-align: left;
					font-size: 4.0vw;
					border-bottom: none;
				}
				#schedule .contentBox .txtBox .txt01 {
					text-align: left;
					font-size: 3.4vw;
					font-weight: bold;
				}
				#schedule .contentBox .txtBox .txt02 {
					text-align: left;
					font-size: 3.4vw;
					margin: 20px 0 0 0;
				}
				
	#eventdetails .txtWrap.col2 {
		display: block;
	}
		#eventdetails .txtWrap.col2 .txtBox {
			width: 100%;
			margin: 10px 0 0 0;
		}
		#eventdetails .txtWrap.col2 .btnBox {
			width: 100%;
			margin: 30px auto 0 auto;
			padding: 0 0 0 0;
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: space-between;
			justify-content:         space-between;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}
			#eventdetails .txtWrap.col2 .btnBox .btn {
				width: 48%;
				margin: 0 0 10px 0;
			}
		
	#eventdetails #back {
		padding-top: 80px;
	}
	
	#eventdetails .btnBox .btn {
		width: 100%;
	}
			
}/*====================*/


.ticketWrap {
	background: #005856;
	margin: 30px auto 0 auto;
	padding: 20px 3% 20px 3%;
	position: relative;
	
	transition: height 0.7s;
}
	.ticketWrap .naviBox {
		height: 80px;
		margin: 0 60px 0 60px;
		padding: 0 0 0 0;
		overflow: hidden;
	}
		.ticketWrap .naviBox .prevBtn {
			width: 50px;
			height: 80px;
			background: #ffffff;
			z-index: 5;
			-webkit-transition: all .3s;
			transition: all .3s;
			cursor: pointer;
			position: absolute;
			top: 20px;
			left: 3%;
		}
			.ticketWrap .naviBox .prevBtn:before {
				content: '';
				width: 12px;
				height: 12px;
				border: 0;
				border-top: solid 3px #626262;
				border-right: solid 3px #626262;
				top: 50%;
				left: 50%;
				-webkit-transform: translate3d(-50%, -50%, 0);
				transform: translate3d(-50%, -50%, 0);
				-webkit-transform: rotate(-135deg);
				transform: rotate(-135deg);
				margin: -8px 0 0 -3px;
				position: absolute;
			}
			
		.ticketWrap .naviBox .nextBtn {
			width: 50px;
			height: 80px;
			background: #ffffff;
			z-index: 5;
			-webkit-transition: all .3s;
			transition: all .3s;
			cursor: pointer;
			position: absolute;
			top: 20px;
			right: 3%;
		}
			.ticketWrap .naviBox .nextBtn:before {
				content: '';
				width: 12px;
				height: 12px;
				border: 0;
				border-top: solid 3px #626262;
				border-right: solid 3px #626262;
				top: 50%;
				left: 50%;
				-webkit-transform: translate3d(-50%, -50%, 0);
				transform: translate3d(-50%, -50%, 0);
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				margin: -8px 0 0 -10px;
				position: absolute;
			}
			.ticketWrap .naviBox .prevBtn:hover,
			.ticketWrap .naviBox .nextBtn:hover {
				opacity: 0.7;
			}
			.ticketWrap .naviBox .prevBtn span,
			.ticketWrap .naviBox .nextBtn span {
				display: none;
			}

		.ticketWrap .naviBox .comm {
			width: 100%;
			top: 25px;
			font-size: 14px;
			color: #ffffff;
			text-align: center;
			font-weight: bold;
			position: relative;
			display: none;
		}
		
	.ticketWrap .naviBox ul {
		background: rgba(0,0,0,0.2);
		height: 80px;
		list-style: none;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		overflow-x: scroll;
		overflow-scrolling: touch;
		width: 100%;
		margin: 0;
		padding: 0;
		z-index: 2;
		position: relative;
	}
	
		.ticketWrap .naviBox ul::-webkit-scrollbar {
			height: 0;
		}
		
		.ticketWrap .naviBox ul li {
			margin: 0 2px 0 0;
			position: relative;
			cursor: pointer;
			opacity: 0.85;
		}
			.ticketWrap .naviBox ul li .scheduleBox {
				background: #ffffff;
				display: block;
				width: 80px;
				height: 80px;
				text-align: center;
				cursor: pointer;
				-webkit-transition: all .3s;
				transition: all .3s;
				position: relative;
				color: #676767;
				text-align: center;
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: column;
				flex-direction:         column;
				-webkit-justify-content: center;
				justify-content:         center;
				-webkit-align-items: center;
				align-items:         center;
			}
				.ticketWrap .naviBox ul li.cr {
					opacity: 1.0;
				}
				
				.ticketWrap .naviBox ul li.cr .scheduleBox {
					background: #fbe663;	
				}
				
				.ticketWrap .naviBox ul li .scheduleBox:hover {
					opacity: 0.7;
				}
					.ticketWrap .naviBox ul li .scheduleBox .date {
						width: 100%;
						font-size: 14px;
						font-weight: 500;
						line-height: 1;
						top: 28px;
					}
					.ticketWrap .naviBox ul li .scheduleBox .state {
						bottom: 10px;
						width: 100%;
						font-size: 10px;
						font-weight: 500;
						line-height: 1;
						color: #676767;
						margin-top: 10px;
					}
					.ticketWrap .naviBox ul li .scheduleBox .state span {
						font-size: 10px;
						font-weight: 500;
					}
						.ticketWrap .naviBox ul li .scheduleBox.present .state span {
							color: #32b16c;
						}
							.ticketWrap .naviBox ul li .scheduleBox.present .state span:before {
								content: "○";
							}
						.ticketWrap .naviBox ul li .scheduleBox.sold .state {
							color: #9d9d9d;
						}
							.ticketWrap .naviBox ul li .scheduleBox.sold .state span:before {
								content: "✕";
							}
							
						.ticketWrap .naviBox ul li .scheduleBox.few .state {
							color: #960b0b;
						}
							.ticketWrap .naviBox ul li .scheduleBox.few .state span:before {
								content: "△";
							}

				.ticketWrap .detailsWrap {
					overflow: hidden;
					opacity: 1;
					transition: opacity 0.7s 0.2s;
				}
					.ticketWrap .detailsWrap.loading {
						opacity: 0;
						transition-duration: 0s;
						transition-delay: 0s;
					}

				.ticketWrap .detailsBox {
					
				}
					.ticketWrap .detailsBox .tit {
						margin: 0;
						padding: 20px 0 20px 0;
						font-size: 20px;
						letter-spacing: .1em;
						line-height: 1;
						color: #fff;
						font-weight: 500;
						text-align: center;
						display: -webkit-flex;
						display: flex;
						-webkit-justify-content: center;
						justify-content:         center;
						-webkit-align-items: flex-end;
						align-items:         flex-end;
						-webkit-box-align: baseline;
						-ms-flex-align: baseline;
						align-items: baseline;
					}
						.ticketWrap .detailsBox .tit .tit01 {
							font-size: 25px;
							margin-right: 5px;
							padding-bottom: 2px;
						}
						
					.ticketWrap .detailsBox .details {
						background: #ffffff;
						padding: 2%;
					}
					.ticketWrap .detailsBox .details h4 {
						margin: 0 0 0 0;
						padding: 0 0 5px 0;
						font-size: 15px;
						letter-spacing: 0;
						line-height: 1;
						border-bottom: 2px solid #bfbfbf;
						position: relative;
					}
					.ticketWrap .detailsBox .details a.scrap {
						position: absolute;
						top: 0;
						right: 0;
						padding-right: 15px;
						color: #0e70bb;
						font-size: 15px;
					}
					
					.ticketWrap .detailsBox .details .no_events{
						text-align: center;
						margin: 50px auto;
						opacity: 0.5;
					}
					
/*===================sp=*/@media screen and (max-width: 860px) {
						
				.ticketWrap .naviBox ul li .scheduleBox:hover {
					opacity: 1.0;
				}
				
					.ticketWrap .detailsBox .details h4 {
						margin: 0 0 0 0;
						padding: 0 0 5px 0;
						font-size: 15px;
						letter-spacing: 0;
						line-height: 1;
						border-bottom: 2px solid #bfbfbf;
						position: relative;
						
						line-height: 2.0;
					}
					
					.ticketWrap .detailsBox .details a.scrap {
						position: relative;
						right: 0;
						text-align: right;
						display: block;
						margin-top: 10px;
					}

			.ticketWrap .naviBox .prevBtn:hover,
			.ticketWrap .naviBox .nextBtn:hover {
				opacity: 1.0;
			}
					
}/*====================*/
					
					.ticketWrap .detailsBox .details a.scrap:after {
						content: '';
						width: 8px;
						height: 8px;
						border: 0;
						border-top: solid 2px #0e70bb;
						border-right: solid 2px #0e70bb;
						top: 50%;
						right: 0;
						-webkit-transform: translate3d(-50%, -50%, 0);
						transform: translate3d(-50%, -50%, 0);
						-webkit-transform: rotate(45deg);
						transform: rotate(45deg);
						margin: -5px 0 0 0px;
						position: absolute;
					}
					.ticketWrap .detailsBox .details a.scrap:hover {
						text-decoration: none;
						opacity: 0.7;
					}
					.ticketWrap .detailsBox .details ul {
/*
						margin-left: -15px;
						margin-right: -15px;
						list-style: none;
						display: block;
						margin: 0 -5px;
						padding: 0;
						margin-bottom: 50px;
*/
						
width: 102%;
list-style: none;
display: block;
margin-bottom: 50px;
margin-top: 2%;
padding: 0;
					}
					.ticketWrap .detailsBox .details ul:before, .ticketWrap .detailsBox .details ul:after {
						content: " ";
						display: table;
					}
					.ticketWrap .detailsBox .details ul:after {
						clear: both;
					}
					.ticketWrap .detailsBox .details ul li {
/*
						position: relative;
						float: left;
						width: 23%;
						min-height: 1px;
						padding-left: 15px;
						padding-right: 15px;
						padding: 0 0 0 5px;
						margin: 15px 10px 0 0;
*/
						
position: relative;
float: left;
width: 23%;
min-height: 1px;
margin-right: 2%;
margin-top: 2%;

					}
					
/*===================sp=*/@media screen and (max-width: 860px) {
						
					.ticketWrap .detailsBox .details ul li {
						position: relative;
						float: left;
						width: 94%;
						min-height: 1px;
						padding-left: 3%;
						padding-right: 3%;
						margin: 15px auto 0 auto;
					}
					
					.ticketWrap .detailsBox .details a.scrap:hover {
						text-decoration: none;
						opacity: 1.0;
					}
					
}/*====================*/
					
					.ticketWrap .detailsBox .details ul li .scheduleBox {
						position: relative;
						padding: 1em 8%;
						background: #fff;
						-webkit-transition: all .3s;
						transition: all .3s;
						z-index: 1;
						color: #ffffff;
						display: -webkit-flex;
						display: flex;
						-webkit-justify-content: space-between;
						justify-content:         space-between;
						-webkit-align-items: center;
						align-items:         center;
					}
						.ticketWrap .detailsBox .details ul li .scheduleBox a {
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							right: 0;
							left: 0;
							bottom: 0;
							color: #ffffff;
						}
						.ticketWrap .detailsBox .details ul li .scheduleBox .time {
							font-size: 14px;
							font-weight: 600;
							line-height: 1;
							
							margin-right: 10px;
						}
						.ticketWrap .detailsBox .details ul li .scheduleBox .state {
							font-size: 14px;
							font-weight: 500;
							line-height: 1;
/* 							margin-left: 10px; */
						}
							
						.ticketWrap .detailsBox .details ul li .scheduleBox:hover {
							opacity: 0.7;
						}
						
						.ticketWrap .detailsBox .details ul li .scheduleBox.present {
							background: #32b16c;
						}
							.ticketWrap .detailsBox .details ul li .scheduleBox.present .state span:before {
								content: "○";
							}
						.ticketWrap .detailsBox .details ul li .scheduleBox.sold {
							background: #969696;
						}
							.ticketWrap .detailsBox .details ul li .scheduleBox.sold .state span:before {
								content: "✕";
							}
							
						.ticketWrap .detailsBox .details ul li .scheduleBox.few {
							background: #960b0b;
						}
							.ticketWrap .detailsBox .details ul li .scheduleBox.few .state span:before {
								content: "△";
							}
							
						.ticketWrap .detailsBox .details ul li .scheduleBox.remaining {
							color: #f84141;
						}
						
			.ticketWrap .detailsBox .details .buyWrap {
				width: 100%;
				margin: 20px auto 0 auto;
				display: -webkit-flex;
				display: flex;
				-webkit-justify-content: space-between;
				justify-content:         space-between;
			}
				.ticketWrap .detailsBox .details .buyWrap .ticketBox {
					width: 48%;
				}
				
/*===================sp=*/@media screen and (max-width: 860px) {
						
			.ticketWrap .detailsBox .details .buyWrap {
				width: 100%;
				margin: 20px auto 0 auto;
				display: block;
			}
				.ticketWrap .detailsBox .details .buyWrap .ticketBox {
					width: 100%;
					margin: 0 0 0 0;
				}

						.ticketWrap .detailsBox .details ul li .scheduleBox:hover {
							opacity: 1.0;
						}
				
}/*====================*/
			
			.ticketWrap .detailsBox .details .ticketBox {
				margin-left: -15px;
				margin-right: -15px;
				margin: 0 -7px 0 -7px;
			}
				.ticketWrap .detailsBox .details .ticketBox:before,
				.ticketWrap .detailsBox .details .ticketBox:after {
					content: " ";
					display: table;
				}
				.ticketWrap .detailsBox .details .ticketBox:after {
					clear: both;
				}
				.ticketWrap .detailsBox .details .ticketBox .ticketItem {
					position: relative;
					min-height: 1px;
					padding-left: 15px;
					padding-right: 15px;
					margin: 0 0 15px;
					padding: 0 7px 0 7px;
				}
				.ticketWrap .detailsBox .details .ticketBox .ticket-item:last-child {
					margin-bottom: 0;
				}
				.ticketWrap .detailsBox .details .ticketBox .ticketItem:nth-of-type(2n) + div.ticketItem {
					clear: left;
				}
				.ticketWrap .detailsBox .details .ticketBox .ticketItem p {
					font-size: 10px;
					margin: 0;
				}
				.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket {
					display: block;
					margin: 0 0 15px 0 ;
					padding: 10px 2% 10px 2%;
					width: 96%;
					color: #fff;
					font-size: 12px;
					font-weight: 500;
					line-height: 1;
					text-align: center;
					text-decoration: none;
					border: none;
					background: #ffffff;
				}
					.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket:hover {
						opacity: 0.7;
					}
				.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.scrap {
					background: #f34f49;
				}
					.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.scrap:hover {
						opacity: 0.7;
					}
				.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.eplus {
					background: #e85298;
				}
					.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.eplus:hover {
						opacity: 0.7;
					}
				.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.pia {
					background: #36c;
				}
					.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.pia:hover {
						opacity: 0.7;
					}
				.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.lawson {
					background: #1a9fdd;
				}
					.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.lawson:hover {
						opacity: 0.7;
					}

/*===================sp=*/@media screen and (max-width: 860px) {
						
					.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket:hover,
					.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.scrap:hover,
					.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.eplus:hover,
					.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.pia:hover,
					.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.lawson:hover {
						opacity: 1.0;
					}
				
}/*====================*/