@charset "utf-8";
/* CSS Document */
/*初回表示*/
.firstShow{
	background-color:#fff;
	display: grid;
	position: fixed;
	top:0;
	bottom: 0;
	right: 0;
	left: 0;
	transition:opacity 1400ms 0.5s ease;
	z-index: 990;
	align-items: center;
	justify-content: center;

}

.firstShow.off{
	opacity: 0;
}
.sakuraBox{
	transition:  filter 1000ms 0s ease, opacity 1000ms 0s ease;
	filter: blur(1em);
	opacity: 0;
}
.sakuraBox.action{
	filter: blur(0);
	opacity: 1;
	
}
.sakuraIcon{
	display: block;
	transition:  transform 1000ms 0s ease-out, opacity 1000ms 0.2s ease;
	transform: translateY(-0.5em);
	opacity: 0;
}
.topAction.action .sakuraIcon{
	opacity: 1;
	transform: translateY(0);
}
/*共通*/
.scBox{
	opacity: 0;
	transition:transform 500ms 0s ease-out, opacity 500ms 0s ease;
	transform: translateY(1em);
	position: relative;

}
.scBox.action{
	opacity: 1;
	transform: translateY(0);
}
.infoBox{
	padding-top: 4em;
}
.infoBox .contentsBox{
	padding: 2em 0 4em;
	text-align: center;
}
.infoBox .midashi{
	position: relative;
	text-align: center;
	padding-top: 5.5em;
	padding-bottom: 0.5em;
	background-image: url("../img/h2_img.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto 5em;
}
.infoBox .midashi img{
	width: 45%;
	max-width:352px;
}

.innerBox{
	padding:2em 1em 1em;
	
	border: var(--lineG) 3px solid;
	text-align: center;

	border-radius: 10px;
	background-color: #fff;
}

#map .innerBox{
	min-height: 35vh;
}
.infoBox .txt{
	padding: 1em;
}
.large{
	font-size: 1.2em;
	line-height: 1.5em;
	display: inline-block;
}

.w_box{
	padding: 1em 0;
}
.w_box h3{
	border-bottom: var(--lineG) 1px solid;
	font-weight: bold;
}
hr{
	border: 0;
	border-bottom: var(--darkP) 1px dashed;
	margin-top: 1em;
}

/*TOP*/
#topArea{
	position: relative;
}
.topImgBox{
}

#topArea .topImg{
	/*background-image: url("../img/smp/top.jpg");*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: filter 1000ms 0s ease-out;
	z-index: 1;
	filter: blur(2em);
	position: relative;

}

#topArea .topImg.show{
	filter: blur(0);
}
#topArea #img0.topImg{background-image: url("../img/smp/top.jpg");}
#topArea #img1.topImg{background-image: url("../img/smp/top2.jpg");}


.catch{
	text-align: center;
	padding: 3em 2em;
	position: relative;
	z-index: 2;
	overflow: hidden;

}
.catch .box{
	max-width: 1000px;
	margin: 0 auto;
	padding:6em 2em;
	background-color: #fff;
	position: relative;
	box-shadow:  inset 0 0 0 0.4em #fff , inset 0 0 0 0.5em var(--lineG),2px 2px 6px #c9d7f4;
	z-index: 2;
	overflow: hidden;
}
.catch .box:before{
	content: "";
	width: 5em;
	height: 4em;
	position: absolute;
	display: block;
	left: 0.5em;
	bottom: 0.5em;
	background-image: url("../img/navi_side.png");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;
}
.catch .box:after{
	content: "";
	width: 5em;
	height: 4em;
	position: absolute;
	display: block;
	top: 0.5em;
	right: 0.5em;
	background-image: url("../img/navi_side.png");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;
	transform: scale(-1,-1);
}
.catch .box .catchTxt{
	opacity: 0;
	transition:transform 800ms 0s ease-out, opacity 800ms 0s ease;
	transform: translateY(1em);
	position: relative;

}
.main.action .catch .box .catchTxt{
	opacity: 1;
	transform: translateY(0);
}
.catch .box .large{
	font-size: 1.5em;
	line-height: 1.5em;
	margin-top: 0.8em;
}
.catch:before{
	content: "";
	position: absolute;
	display: block;
	z-index: 1;
	bottom: 20%;
	top:23%;
	width: 0;
	left: 0;
	background-image: url("../img/wave_bg.png");
	background-position:left bottom;
	background-size:auto 100%;
	background-repeat: no-repeat;
	transition: width 1s 0s ease-out,opacity 1s 0s ease;
	opacity: 0;
}
.catch.action:before{
	width: 100%;
	opacity: 1;
}

/*イベント概要*/
.centerBox{
	display: grid;
	text-align: left;
	align-items: center;
	justify-content: center;
	padding: 1em 0.5em 0.5em;
}
.centerBox ul{
	padding-left: 1em;
}
.centerBox ul li{
	text-indent: -1em;
	margin-bottom: 0.5em;
}
#info{
	position: relative;
}

.schedule{
	background-color: var(--bgG);
	border-radius: 6px;
	padding: 0.5em;
	display: grid;
	column-gap: 1em;
	row-gap: 1em;
	grid-template-columns:1fr;
	margin-top: 1em;
}
.schedule h3{
	padding:1em 25% 0;
	display: grid;
	justify-content: center;
	align-items: center;
}

.schedule .img{
	background-color: #fff;
	border-radius: 6px;
		display: grid;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0.5em;
}
/*チケット情報*/
.subNav{
	display: grid;
	column-gap: 0.5em;
	row-gap: 0.5em;
	grid-template-columns:repeat(3, 1fr);
	padding:0 0 0.5em;
}
.subNav a{
	padding: 1em;
	position: relative;
	display: block;
	background: #f0f2f8;
	border-radius: 50px;
	border: var(--lineP) 2px solid;
	color: var(--darkP);
	font-size: max(0.85em,10px);
}
.subNav a.selected{
	background: var(--grad);
}
.subNav a:not(.selected):hover{
	background:#e8e6f9 ;
}
.subNav a span{
	position: relative;
}
.subNav a span:before{
	content: "▲";
	position: relative;
	transform: rotate(90deg) scale(0.9);
	display: inline-block;
	vertical-align: middle;
	margin-top: -0.2em;
	margin-right: 0.5em;
	font-size: max(0.85em,10px);
}
.ticketTopBt{
	display: inline-block;
	color: var(--darkP);
	padding: 0.5em;
}
.ticketTopBt:hover{
	opacity: 0.7;
}

.ticketPriceArea .box{
	position: relative;
	display: inline-block;
	vertical-align: top;
	padding:0.5em;
	font-size: 1.2em;
	line-height: 1.5em;
	font-weight: bold;
}
.ticketPriceArea .box:nth-child(3){
	display: block;
}
.ticketPriceArea .small{
	font-size: max(0.5em,11px);
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
	line-height: 1.5em;
}

.ticketPriceArea h3{
	padding: 1em;
	font-weight: bold;
	position: relative;
	
}
.bundle{
	border-radius: 6px;
	background-color: var(--bgG);
	padding:0 1em 1em;
	position: relative;
	max-width: 800px;
	margin: 0.2em auto 0;
	border: var(--lineG) 2px solid;
}
.bundle:before{
	content: "▲";
	color: var(--lineG);
	top:-1.2em;
	left: 50%;
	margin-left: -0.5em;
	position: absolute;
	display: block;
	width: 1em;
	text-align: center;
	transform: scaleX(2);
}
.bundle a.txtLink{
	padding-left: 0;
	padding-right: 0.5em;
}
.bundle a span:not(.br2):before{
	content: "▲";
	position: relative;
	transform: rotate(90deg) scale(0.5);
	display: inline-block;
	vertical-align: middle;
	margin-top: -0.2em;
}

.ticketPriceArea table{
	border-spacing: 0;
	width: 100%;
}
.ticketPriceArea th,
.ticketPriceArea td{
	padding: 1em;
	border-bottom: var(--lineG) 1px solid;
	background-color: #fff;
	text-align: left;
}
.ticketPriceArea th{
	padding-right: 0;
}
.ticketPriceArea td{ width: 4em; text-align: right; font-weight: bold; padding-left: 0;}

/*購入情報*/
a.ticketBt{
	padding: 1em;
	position: relative;
	display: block;
	background: #f0f2f8;
	border-radius: 50px;
	border: var(--lineP) 2px solid;
	color: var(--darkP);
	font-size: max(0.85em,10px);
	margin-top: 1em;
}
a.ticketBt:hover{
	background: var(--grad);
}

a.ticketBt span{
	position: relative;
}
a.ticketBt span:before{
	content: "▲";
	position: relative;
	transform: rotate(90deg) scale(0.9);
	display: inline-block;
	vertical-align: middle;
	margin-top: -0.2em;
	margin-right: 0.5em;
	font-size: max(0.85em,10px);
}
.ticketArea{
	text-align: left;
	padding: 1em;
	border: var(--lineG) 2px solid;
	border-radius: 10px;
	margin-top: 1em;
}
.ticketArea table{
	margin-top: 1em;
	width: 100%;
	box-sizing: border-box;
}
.ticketArea table th,
.ticketArea table td{
	padding: 1em;
}
.ticketArea table th{
	background-color: var(--bgG);
	min-width: 6em;
	font-size: 0.8em;
	line-height: 1.5em;
}
.ticketArea table td{
	border-bottom: var(--lineG) 1px solid;
}
.ticketArea h3{
	font-size: 1.2em;
	line-height: 1.5em;
	padding: 0.6em;
	border-radius: 50px;
	font-weight: bold;
	background-color: var(--lineG);
	text-align: center;
}

/*入場特典*/
.tokutenArea h3{
	font-size: 1.2em;
	line-height: 1.5em;
	padding: 0.6em;
	border-radius: 50px;
	font-weight: bold;
	background-color: var(--lineG);
}
.tokutenArea.zenhan h3{
	background: linear-gradient(90deg,#eab9df,#b9cdfa);
}
.tokutenArea.kouhan h3{
	background: linear-gradient(90deg,#9ceccd,#ece59c);
}
.tokutenArea img{ border: var(--lineG) 1px solid;}
.tokutenArea .tokutenWrap{
	/*display: flex;
	flex-wrap: wrap;*/
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	column-gap: 0.5em;
	row-gap: 0.5em;
	justify-content: center;
}
.tokutenBox{
	padding: 0.5em;
	margin-bottom: 0.5em;
	border-radius: 6px;
	
}
.tokutenBox.box1{background-color: #eab9df;}
.tokutenBox.box2{background-color: #b9cdfa;}
.tokutenBox.box3{background-color: #9ceccd;}
.tokutenBox.box4{background-color: #ece59c;}
.tokutenBox.box5{background-color: #fff; border:#efeae0 2px solid;}
.tokutenBox.box6{background-color: #e8ebf6;}
.tokutenBox.box7{background-color: #f3ecdd;}
.tokutenBox.box8{background:linear-gradient(90deg,#e8ebf6,#f3ecdd); }

.tokutenBox h4{
	padding: 0.5em 0;
	border-radius: 50px;
	margin-bottom: 0.2em;
	font-size: max(0.85em,10px);
	font-weight: bold;
}
.tokutenBox.box1 h4{background-color: #de98cd;}
.tokutenBox.box2 h4{background-color: #96b2f7;}
.tokutenBox.box3 h4{background-color: #6ddeae;}
.tokutenBox.box4 h4{background-color: #ded36d;}
.tokutenBox.box5 h4{background-color: #efeae0;}
.tokutenBox.box6 h4{background-color: #cad1e6;}
.tokutenBox.box7 h4{background-color: #e2d8bf;}
.tokutenBox.box8 h4{background:linear-gradient(90deg,#cad1e6,#e2d8bf);}
.tokutenArea .itemBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1em 0;
}
.tokutenArea .tokutenWrap .tokutenBox .itemBox{
	padding:0;
}
.tokutenArea .itemBox .box{
	width:100%;
	margin: 0.25em 0 ;
}
.tokutenArea .itemBox .box .itemName{
	font-size: max(0.8em,10px);
	line-height: 1.5em;
}
.tokutenArea .itemBox a{
	display: block;
	transition:opacity 0.2s 0s ease;

}
.tokutenArea .itemBox a:hover{
	opacity: 0.7;
}

.notesBox{padding: 1em; border: var(--lineG) 2px solid;border-radius: 10px; margin-bottom: 1em; background-color: #fff;}
.notesBox ul.notes{
	text-align: left;
	/*margin-top: 0.8em;*/
	padding: 0.8em 0.5em;
	font-size: min(1em,16px);
}
.notesBox h3{
	background-color: var(--lineG);
	padding: 0.5em 0;
	border-radius: 50px;
}

/*---------------------------------------------------------
@media
------------------------------------------------------------*/
@media (max-width: 380px) {/*極小*/

.tokutenBox h4{
	font-size: max(0.7em,10px);
}


}
@media (min-width: 768px) {
	.tokutenBox h4{

		font-size: max(1em,11px);
	}
	.tokutenArea .itemBox .box .itemName{
	font-size: min(max(0.9em,11px),14px);
	line-height: 1.5em;
}
	.subNav a{
		font-size: 1em;
}

}
@media (min-width: 1025px) {
	.innerBox{
	padding:2em;
}

/*	#topArea .topImg{
	background-image: url("../img/top.jpg");
}*/
#topArea #img0.topImg{background-image: url("../img/top.jpg");}
#topArea #img1.topImg{background-image: url("../img/top2.jpg");}
	.catch .box{

		padding:9em  2em;

	}

	.catch .box .large{
	font-size: 1.8em;
	line-height: 1.5em;
	margin-top: 0.7em;
}
.schedule{
	grid-template-columns:40% 1fr;
	padding: 1em;
}
.schedule h3{
	padding: 1em;
}
.schedule .img{
	padding: 1em;
}
/*チケット情報*/
.subNav{
	padding:0 1em 1em;
}
.ticketPriceArea .box{
	font-size: 1.3em;
	line-height: 1.5em;
}

/*入場特典*/
.tokutenArea .itemBox .box{
	width: calc(calc(100% / 2) - 0.5em);
	margin: 0.25em;
}

}
@media (min-width: 1921px) {
		.catch:before{

		max-width: 1920px;
		left:calc(calc(100% - 1920px) / 2);
	}
}