@charset "utf-8";
/* ヘッダー */
header {
	position: relative;
	margin: 0 auto;
}
header #keyvisual {
	position: relative;
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}
header #keyvisual::after{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	display: block;
}

#main-contents{
	position: relative; 
	margin: 0 auto;
	padding:0;
	background-image: url("../img/bg/bg_catch.png");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 100% auto;
	background-color: #0c1b31;
	overflow: hidden;
}

/* catch */
#catch  {
	position: relative;
	margin: 0 auto;
	padding: 3.5% 0 20px 0;
}
#catch .catchTxt{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
}

/* cm */
#cm{
	position: relative;
	margin: 40px auto 0 auto;
	width: calc(100% - 34px);
	border: solid 1px #ffffff;
	box-shadow: 0px 0px 30px 0px rgba(144,254,255,0.5);
}
#cm::before{
	position: absolute;
	top: -4px;
	left: -4px;
	width: 50px;
	height: 50px;
	background-color: #ffffff;
	content: '';
	display: block;
}
#cm::after{
	position: absolute;
	bottom: -4px;
	right: -4px;
	width: 50px;
	height: 50px;
	background-color: #ffffff;
	content: '';
	display: block;
}
#cm .movieWrap{z-index: 100;}

/* banner */
#banner {
	position: relative;
	margin: 0 auto;
	padding: 20px 0 0 0;
}
#banner ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 60px);
	max-width: 500px;
}
#banner ul li{
	position: relative;
	margin: 0 auto;
}
#banner ul li .btn{cursor: pointer;}

/* about */
#about {
	position: relative;
	margin: -50px auto 0 auto;
	padding: 0 0 70px 0;
}
#about h2 .bgttl{
	position: absolute;
	top:0;
	left: 2%;
	width: 23%;
}
#about .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%);
}
#about h2{
	position: relative;
	margin: 0 auto;
}
#about .lead{
	position: relative;
	margin: 15px auto;
	width: calc(100% - 40px);
	text-align: center;
}
#about .explanation{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	gap: 25px 8px;
	z-index: 20;
}
#about .explanation .btn{
	position: relative;
	margin: 0;
	width: calc(50% - 4px);
	cursor: pointer;
}

/* point */
#point {
	position: relative;
	margin: -50px auto 0 auto;
	padding: 10px 0 35px 0;
}
#point .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #E5EDF3;
	background: linear-gradient(180deg,rgba(229, 237, 243, 1) 0%, rgba(166, 191, 211, 1) 100%);
	clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%);
}
#point h2{
	position: absolute;
	top: 80px;
	left: 5px;
	width: 10%;
	max-width: 30px;
}
#point ul{
	position: relative;
	margin: 15px auto 0 auto;
	width: calc(100% - 80px);
	transform: translateX(20px);
	gap: 0 20px;
	z-index: 20;
}
#point ul li{
	position: relative;
	margin: 0;
	width: calc(50% - 10px);
}
#point ul li:nth-child(2){margin: 30px 0 0 0;z-index: 10;}
#point ul li:last-child{width: 100%;gap:10px;margin: -10px 0 0 0;z-index: 100;}
#point ul li:first-child .pointInner{
	position: relative;
	margin: 0;
	width: 84%;
}
#point ul li:last-child .pointInner{width: calc(50% - 20px);}
#point ul li .Img{
	position: relative;
	margin: 0 auto;
	width: 88%;
}
#point ul li:first-child .Img{margin: 0;}
#point ul li:last-child .Img{width: 41.3497%;margin: 0;}
#point ul li .ttl{
	position: relative;
	margin: 10px auto 0 auto;
}
#point ul li .ttl img{height: 17.5px;width: auto;}
#point ul li:last-child .ttl{margin: 0;}
#point ul li:last-child .ttl img{height: 39.5px; }
#point ul li .btn{
	position: relative;
	margin: 10px auto 0 auto;
	width: 9em;
	background: #2397B8;
	background: linear-gradient(90deg,rgba(35, 151, 184, 1) 0%, rgba(97, 57, 212, 1) 100%);
	clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
	color: #ffffff;
	text-align: center;
	font-size: 86%;
	cursor: pointer;
	transition: all .3s ease-out;
}
#point ul li .btn::after{
	position: absolute;
	top:50%;
	right: 12px;
	font-size: 55%;
	line-height: 1em;
	content: '\025b6';
	transform: translateY(-50%);
}
#point ul li .btn:hover{opacity: 0.7;}

/* story */
#story{
	position: relative;
	margin:  0 auto;
	padding: 70px 0 70px 0;
}
#story .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #E5EDF3;
	background: linear-gradient(180deg,rgba(255,255,255,1.00) 0%, rgba(221,223,238,1.00) 100%);
	clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%);
}
#story h2{
	position: absolute;
	top: 40px;
	right: 5px;
	width: 10%;
	max-width: 30px;
}
#story p{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	text-align: center;
	line-height: 2em;
	transition: all 0.3s ease-out;
}
#story p.moreTxt{display: none;}
#story .moreBtn{
	position: relative;
	font-size: 96%;
	margin:2em auto 0 auto;
	width: 10em;
	padding: 4px 0;
	line-height: 1em;
	text-align: center;
	background-color: #052527;
	color: #ffffff;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
#story .moreBtn:hover{background-color: #2397B8;}
#story .moreBtn::after{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right: 8px;
	content: '\025bc';
	font-size: 70%;
	display: block;
	z-index: 1000;
	transition: all 0.3s ease-out;
}
#story .moreBtn.disp::after{transform: translateY(-50%) rotate(-180deg);}
#story ruby[data-ruby]::before{top:.6em;}

/* chara */
#chara{
	position: relative;
	margin: -50px auto 0 auto;
	padding: 20px 0 20px 0;
}
#chara .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #180C31;
	background: linear-gradient(90deg,rgba(24, 12, 49, 1) 0%, rgba(88, 20, 110, 1) 100%);
	clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%);
	overflow: hidden;
}
#chara .bg01{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg/bg01.png");
	background-repeat: repeat-y;
	background-position: 50% 0;
	background-size: 840px auto;
}
#chara h2{
	position: absolute;
	top: 70px;
	left: 5px;
	width: 10%;
	max-width: 30px;
}
#chara .charaData{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 380px;
	height: 0;
	padding-top: 115%;
}
#chara .charaWrap{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}
#chara .charaWrap.disp{display: block;}
#chara .charaWrap .chara{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
}
#chara ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	gap:10px;
	z-index: 200;
}
#chara ul li{
	position: relative;
	margin: 0;
	width: calc(25% - 8px);
	cursor: pointer;
	transition: all .3s ease-out;
}
#chara ul li:hover{transform: scale(1.02, 1.02);}
#chara ul li .disp{position: relative;display: block;}
#chara ul li .disp::after{
	position: absolute;
	top:0;
	left: 0;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	content: '';
	border: solid 2px #ffffff;
	box-shadow: 0px 0px 12px 1px rgba(234,255,0,0.7);
}

/* event */
#event{
	position: relative;
	margin: -50px auto 0 auto;
	padding: 90px 0 70px 0;
}
#event .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0B1A31;
	background: linear-gradient(0deg,rgba(11, 26, 49, 1) 0%, rgba(24, 44, 93, 1) 100%);
	clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%);
	overflow: hidden;
}
#event .bg01{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg/bg.jpg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	mix-blend-mode: hard-light;
}
#event h2{
	position: absolute;
	top: 70px;
	right: 5px;
	width: 10%;
	max-width: 30px;
}
#play{
	position: relative;
	margin: 0 auto;
	padding-bottom: 50px;
}
#play h3{
	position: relative;
	margin: 0 auto 20px auto;
	width: calc(100% - 30px);
	max-width: 580px;
}
#play ul{
	position: relative;
	margin: 0 auto;
	width: 80%;
	transform: translateX(-5%);
	gap: 0 6px;
}
#play ul li{
	position: relative;
	margin: 0;
	width: calc(33.3333% - 4px);
}
#play ul li img{
	position: relative;
	margin: 0 auto;
	display: block;
	width: 90%;
}
#play ul li p{
	position: relative;
	margin: 10px auto 0 auto;
	font-size: 100%;
	font-style: italic;
	color: #ffffff;
	text-align: center;
	line-height: 1.3em;
	font-weight: bold;
}
#play ul li .small{font-size: min(80%, 2.8vw);color: #ffffff !important;font-style: italic;line-height: 1.5em;}
#play ul li p span{
	font-size: 80%;
	color: #ebff09;
	display: block;
}

/* howto */
#howto{
	position: relative;
	margin: 0 auto;
}
#howto h3{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 580px;
}
#howto .howtoWrap {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 10px);
}
#howto .howtoWrap .splide__arrows .splide__arrow--prev {left: 5px;transform: rotate(180deg);}
#howto .howtoWrap .splide__arrows .splide__arrow--next {right: 5px;}
#howto .howtoWrap .splide__arrow {
	background: transparent;
	border-radius: 0;
	height: 20px;
	width: 20px;
	opacity: 1;
	transform: translateY(0);
	z-index: 200;
}
#howto .howtoWrap .splide__arrow:disabled {opacity: 0;}

#howto .howtoWrap ul li{
	position: relative;
	margin: 0;
	padding: 20px;
	width: 100%;
	display: flex;
	align-items: stretch;
}
#howto .howtoWrap .txtWrap {
	position: relative;
	margin: 0 auto;
	background-color: #ffffff;
	padding: 20px 15px;
	box-sizing: border-box;
	width: calc(100% - 34px);
	box-shadow: 0px 0px 14px 0px rgba(0,240,255,0.6);
	outline: solid 1px #00F0FF;
	outline-offset: -1px;
	z-index: 100;
}
#howto .howtoWrap ul li::before, #howto .howtoWrap ul li::after{
	position: absolute;
	width: 40px;
	height: 40px;
	content: '';
	display: block;
}
#howto .howtoWrap ul li::before{
	top: 16px;
	left: 33px;
	border-top:3px solid #ffffff;
	border-left: 3px solid #ffffff;
}
#howto .howtoWrap ul li::after{
	bottom: 16px;
	right: 33px;
	border-bottom:3px solid #ffffff;
	border-right: 3px solid #ffffff;
}
#howto .howtoWrap .Img {
	position: relative;
	margin: 0 auto 15px auto;
	max-width: 320px;
}
#howto .howtoWrap p{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
}
#howto .howtoWrap .button{
	width: calc(100% - 40px);
	margin: 15px auto 0 auto;
	z-index: 100;
}
#howto .txtWrap .cautionWrap{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 10px);
}
#howto .threearticles{
	position: relative;
	margin: 30px auto 0 auto;
	width: calc(100% - 60px);
}

/* ticket */
#ticket {
	position: relative;
	margin: -50px auto 0 auto;
	padding: 40px 0 30px 0;
}
#ticket .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%);
}
#ticket h2{
	position: absolute;
	top: 80px;
	left: 5px;
	width: 10%;
	max-width: 30px;
}
#ticket h3{
	position: relative;
	margin: 30px auto 15px auto;
	width: calc(100% - 30px);
	max-width: 580px;
}
/* 料金 */
#price {
	position: relative;
	margin: 0 auto;
	z-index: 100;
}
#price .priceWrap {
  position: relative;
  margin: 0 auto;
}
#price .priceWrap ul.ticketP {
	position: relative;
	width: 15em;
	max-width: 500px;
	margin: 0 auto;
	z-index: 300;
}
#price .priceWrap ul.ticketP li{
	position: relative;
	margin: 0;
	width: calc(50% - 15px);
	background-color: #636567;
	color: #d8d8d8;
	cursor: pointer;
	font-weight: bold;
	border-radius: 100px;
}
#price .priceWrap ul.ticketP li.active{background: #2397B8;background: linear-gradient(90deg,rgba(35, 151, 184, 1) 0%, rgba(97, 57, 212, 1) 100%);color: #ffffff;}
#price .priceWrap ul.ticketP li.active::after{
	position: absolute;
	top:-8px;
	left: -22px;
	content: '';
	display: block;
	width: 44px;
	height: 48px;
	background-image: url("../img/icon_price.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
}
#price .priceWrap ul.ticketP li p{
	position: relative;
	padding: 5px 0;
	line-height: 1em;
	text-align: center;
}
#price .priceWrap .priceBox{
	position: relative;
	margin: 0 auto;
}
#price .table{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 82px);
	display: none;
}
#price .table table{
	position: relative;
	margin: 0 auto;
	width: 100%;
	border-collapse: collapse !important;
	border-spacing:1px;
	border: solid 1px #052056;
}
#price .table.active{display: block;}
#price .table table th{
	position: relative;
	width: 24%;
	text-align: center;
	vertical-align: middle;
	line-height: 1.4em;
	padding: 10px 2px;
	font-size: min(3vw, 90%);
	background-color: #abe2e5;
	border-left: solid 1px #052056;
	border-top: solid 1px #052056;
}
#price .table table td{
	position: relative;
	width: 36%;
	margin: 0;
	text-align: center;
	padding: 10px 0;
	font-size:90%;
	border-left: solid 1px #052056;
	vertical-align: middle;
	background-color: #f7ffff;
	border-top: solid 1px #052056;
	line-height: 1.5em;
}
#price .table table th:first-child, #price .table table td:first-child{border-left: none;}
#price .table table td span{font-size: 140%;font-weight: bold;}
#price .table table tbody th{width: 20%;background-color: #e7f2f4;padding: 10px 2px;font-size:min(4vw, 90%);}
#price .table table td.gray{background-color: #E1E1E1 !important;padding: 0 5px;}
#price .tokutenprice{
	position: relative;
	margin: 10px auto 0 auto;
}
#price .tokutenprice table tbody th{width: 30% !important;padding: 10px !important;background-color: #e7f2f4 !important;}

#ticket .button.btn_ticCaution{
	margin: 20px auto 0 auto;
	width: calc(100% - 100px);
	font-size: 96%;
}
#ticket .button.btn_ticCaution.tokutenbtn{width: calc(100% - 60px);}
#ticket .button.btn_ticCaution::after{font-size: 60%;}
#ticket .button.btn_ticCaution.disp::after{	transition: all .3s ease-out;transform: translateY(-50%) rotate(-90deg);}
#ticket .ticCaution{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 110px);
	background-color: #094c80;
	padding: 15px;
	display: none;
	color: #ffffff;
}
#ticket .ticCaution.tokutenlist{width: calc(100% - 70px);}
#ticket .ticCaution h4{
	position: relative;
	margin: 0 auto 10px auto;
	padding-top: 15px;
	font-weight: bold;
	color: #E2FAFF;
	border-bottom: solid 1px #E2FAFF;
	text-align: center;
}

#ticket .ucampW{
	position: relative;
	margin: 30px auto 5px auto;
	width: calc(100% - 10px);
	max-width: 580px;
	gap:0 5px;
	z-index: 100;
}
#ticket .ucamp{
	position: relative;
	margin: 0;
	font-size: min(2.8vw, .16rem);
	width: calc(100% - 11em - 5px);
}
#ticket .ucampb{
	position: relative;
	margin: 0;
	font-size: min(2.8vw, .14rem);
	width: 11em;
	background: linear-gradient(90deg,rgba(35, 151, 184, 1) 0%, rgba(97, 57, 212, 1) 100%);
	text-align: center;
	color: #ffffff;
	border-radius: 100px;
	line-height: 1.3em;
	padding: 5px 0 2px 0;
}
#ticket .button.btn_camp{
	margin: 0 auto;
	font-size: 96%;
	width: calc(100% - 60px);
	cursor: pointer;
	background-color: #abe2e5;
	color: #052527 !important;
	border-right: solid 1px #052527;
	border-left: solid 1px #052527;
	border-top: solid 1px #052527;
	border-bottom: solid 1px #052527;
	max-width: 480px;
}
#ticket .button.btn_camp.disp{border-bottom: none;}
#ticket .button.btn_camp::after{font-size: 60%;}
#ticket .button.btn_camp.disp::after{transition: all .3s ease-out;transform: translateY(-50%) rotate(-90deg);}
#ticket .campWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 60px);
	background-color: #abe2e5;
	padding: 0 10px 15px 10px;
	display: none;
	border-right: solid 1px #052527;
	border-left: solid 1px #052527;
	border-bottom: solid 1px #052527;
}
#ticket .campWrap .table{width: 100%;}
#ticket .campWrap table thead th{background-color: #99CED1 !important;}
#ticket .campWrap .lead{
	position: relative;
	margin: 0 auto;
	padding: 10px 5px 0 5px;
}
#ticket .campWrap .center{padding: 10px 0;}
#ticket .camp{
	position: relative;
	margin: 20px auto 0 auto;
}
#ticket .camp p{margin: 0 auto;padding-left: 1em;}

#ticket #tokuten{
	position: relative;
	margin:30px auto 0 auto;
}
#ticket #tokuten .tokutenImg{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
}
#ticket #tokuten .tokutenImg .splide__arrows .splide__arrow--prev {left: -20px;transform: rotate(180deg);}
#ticket #tokuten .tokutenImg .splide__arrows .splide__arrow--next {right: -20px;}
#ticket #tokuten .tokutenImg .splide__arrow {
	background: transparent;
	border-radius: 0;
	height: 20px;
	width: 20px;
	opacity: 1;
	transform: translateY(0);
	z-index: 200;
}
#ticket #tokuten .tokutenImg .splide__arrow:disabled {opacity: 0;}
#ticket #tokuten .Txt{
	position: relative;
	margin:15px auto 0 auto;
	text-align: center;
}


#ticket .u22, #ticket .forkids {
  position: relative;
  margin: 50px auto 0 auto;
  width: calc(100% - 70px);
  border: solid 1px #052056;
padding: 0 15px 15px 15px
}
#ticket .u22 .u22logo, #ticket .forkids .forkidslogo{
	position: relative;
	margin: 0 auto;
	width: 100%;
	transform: translateY(-30px);
}
#ticket .u22 .u22logo img{
	position: relative;
	margin: 0 auto;
	width: 33%;
	max-width: 130px;
}
#ticket .forkids .forkidslogo img{
	position: relative;
	margin: 0 auto;
	width: 60%;
	max-width: 180px;
}
#ticket .u22 p, #ticket .forkids p{
	position: relative;
	margin: -20px auto 10px auto;
}
#ticket .u22 .button, #ticket .forkids .button{font-size: 96%;}

/* release */
#release{
	position: relative;
	margin: 0 auto;
	padding: 30px 0 0 0;
}
#release .releaseBox{
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 45px;
}
#release .releaseBox.margin{margin: 30px auto 0 auto;}
#release .ttlR{
	position: relative;
	margin: 0 auto 10px auto;
	padding: 9px 0;
	line-height: 1em;
	background: #2397B8;
	background: linear-gradient(90deg,rgba(35, 151, 184, 1) 0%, rgba(97, 57, 212, 1) 100%);
	color: #ffffff;
}
#release .ttlR span{font-weight: normal;}
#release p{
	position: relative;
	margin: 0 auto;
	font-size: 110%;
}
.scraptantei{
	position: relative;
	margin: 15px auto 0 auto;
	font-size: 74%;
	text-align: center;
}
.scraptantei img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 60px);
	max-width: 320px;
}
#ticket .fcevent{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	border: solid 1px #640DA4;
	background-color: #E3D7E6;
	padding: 0 0 15px 0;
	text-align: center;
	z-index: 100;
}
#ticket .fcevent .fcttl{
	position: relative;
	margin: 0 auto;
	padding: 8px 5px;
	background-color: #640DA4;
	font-size: 110%;
	color: #ffffff;
}
#ticket .fcevent .text{
	position: relative;
	margin: 0 auto;
	padding: 25px 10px 10px 10px;
}
#ticket .fcevent .text p{
	font-size: 105%;
	padding-bottom: 1em;
}

/* schedule */
#schedule{
	position: relative;
	margin: -50px auto 0 auto;
	padding: 90px 0 70px 0;
}
#schedule .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0B1A31;
	background: linear-gradient(0deg,rgba(11, 26, 49, 1) 0%, rgba(24, 44, 93, 1) 100%);
	clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%);
	overflow: hidden;
}
#schedule .bg1{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg/bg02.png");
	background-repeat: repeat-y;
	background-position: 50% 0;
	background-size: 800px auto;
}
#schedule .bg2{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg/bg.jpg");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
	mix-blend-mode: hard-light;
}
#schedule .scheduleWrap{position: relative;}
#schedule ul.areaList{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 40px);
}
#schedule ul li.contentsS{
	position: relative;
	margin: 0 auto 25px auto;
}
#schedule ul li.contentsS::before, #schedule ul li.contentsS::after{
	position: absolute;
	width: 30px;
	height: 30px;
	content: '';
	display: block;
}
#schedule ul li.contentsS::before{
	top: -4px;
	left:-4px;
	border-top:3px solid #ffffff;
	border-left: 3px solid #ffffff;
}
#schedule ul li.contentsS::after{
	bottom: -4px;
	right: -4px;
	border-bottom:3px solid #ffffff;
	border-right: 3px solid #ffffff;
}
#schedule ul li .dataWrap{
	position: relative;
	margin: 0 auto;
	background-color: rgba(255,255,255,0.80);
	padding: 15px 8px 8px 8px;
	width: calc(100% - 16px);
	box-shadow: 0px 0px 14px 0px rgba(0,240,255,0.6);
	z-index: 400;
}
#schedule ul li .area{
	position: relative;
	margin: 0 auto;
	width: 8em;
	border-radius: 100px;
	background: #2397B8;
	background: linear-gradient(90deg,rgba(35, 151, 184, 1) 0%, rgba(97, 57, 212, 1) 100%);
}
#schedule ul li .area p{
	position: relative;
	color: #ffffff;
	text-align: center;
	line-height: 1em;
	font-weight: bold;
	padding: 5px 0 3px 0;
}
#schedule ul li .areaWrap{
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding: 15px 0 20px 0;
}
#schedule ul li .shopname{
	position: relative;
	margin: 0 auto 5px auto;
	font-weight: bold;
	color: #107798;
	font-size: 110%;
}
#schedule ul li .kikan{
	position: relative;
	margin: 0 auto;
	color: #052527;
	font-weight: bold;
}
#schedule ul li .btn_yoyaku, .btn_yoyaku_s{
	position: relative;
	margin: 0 auto;
	display: block;
	padding: 8px 0;
	text-align: center;
	background-color: #052527;
	transition: all .3s ease-out;
	color: #ffffff;
	line-height: 1em;
	z-index: 201;
	cursor: pointer;
}
#schedule ul li .btn_yoyaku::after, .btn_yoyaku_s::after{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
	content: '\025bc';
  display: block;
	font-size: 80%;
	line-height: 1em;
	transition: all .3s ease-out;
}
.btn_yoyaku_s::after{content: '\025b6';}
#schedule ul li .btn_yoyaku.accessClose{background-color: #757E96;}
#schedule ul li .btn_yoyaku.accessClose::after{transform:translateY(-50%) rotate(-180deg);}
#schedule ul li .btn_yoyaku:hover, .btn_yoyaku_s:hover{opacity: 0.7;}
button[type=submit]{position: relative;display: block; border: none;font-size: 100%;}

#schedule ul li .detail{
	position: relative;
	height: 0;
	padding: 0;
	overflow: hidden;
	 transition: all .8s ease-out;
	text-align: center;
}
#schedule ul li .detail.disp{height: auto;padding: 0 0 20px 0;}
#schedule ul li .detail h3{
	position: relative;
	margin: 30px auto 10px auto;
	width: calc(100% - 5px);
	max-width: 390px;
}
#schedule ul li .detail h4{
	position: relative;
	margin: 30px auto 8px auto;
	color: #1572C1;
	font-weight: bold;
	font-size: 86%;
}
#schedule ul li .areaTxt{
	position: relative;
	margin: 0 auto 20px auto;
	width: calc(100% - 20px);
	line-height: 1.4em;
	font-size: 96%;
}
#schedule ul li .detail .map{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 14px);
	height: 200px;
	border: solid 2px #1572C1;
}
#schedule ul li .detail .map iframe{max-width: 100%;height: 100%;}

/* チケットカレンダー */
.sTicket ul li{background-image: none !important;}
.ticAPI{position: relative;margin: 0 auto;width: 100%;padding: 0;background-color: #ffffff;}
.ticket_api{margin: 0 auto;padding: 0;width: 100%; background-color: #225784;}
.ticketWrap{ margin: 0 auto; background-color: transparent !important;  padding:20px 0 0 0; font-size: .12rem !important; }
.ticketWrap .swiper-wrapper{padding: 0;}
.ticketWrap .naviBox {margin:  0 53px 0 53px;}
.ticketWrap .naviBox .prevBtn{top: 20px;left: 0; background-color: #ffffff; opacity: 1;}
.ticketWrap .naviBox .nextBtn{top: 20px;right: 0; background-color: #ffffff; opacity: 1;}
.ticketWrap .naviBox .prevBtn:hover, .ticketWrap .naviBox .nextBtn:hover{opacity: 1;}
.ticketWrap .naviBox ul li{margin: 0 1px !important;border: none;}
.ticketWrap .naviBox ul li .scheduleBox{color:#052527;}
.ticketWrap .naviBox ul li.cr .scheduleBox {background: #7602B4; color:#ffffff !important;}
.ticketWrap .naviBox ul li.cr .scheduleBox span span{color:#ffffff !important;}
.ticketWrap .detailsWrap {padding-top: 20px;min-height: 190px;}
.ticketWrap .detailsBox .tit {background-color: #7602B4;font-size: .14rem !important;color:#ffffff !important;}
.ticketWrap .detailsBox .tit p{margin: 0 !important;}
.ticketWrap .detailsBox .tit01 {font-size: .18rem !important;}
.ticketWrap .detailsBox .details h4 {max-width: 100% !important; margin: 30px 0; color:#000000 !important;border-bottom: 2px solid #000000; background-image: none;font-size: .13rem !important;text-align: center;font-weight: 700;}
.ticketWrap .detailsBox .details a.scrap {color: #7e1041; font-size: .12rem;font-weight: normal;}
.ticketWrap .detailsBox .details a.scrap:after {border-top: solid 1px #7e1041;border-right: solid 1px #7e1041; width: 5px; height: 5px;margin: -3px 0 0 0px;}
.ticketWrap .detailsBox .details ul li .scheduleBox.present {background: #ffffff; border: solid 1px #b3b3b3;color: #2a2a2a;}
.ticketWrap .detailsBox .details ul li .scheduleBox.sold {background: #b3b3b3; color:#969696; border: solid 1px #b3b3b3;}
.ticketWrap .detailsBox .details ul li .scheduleBox.few {background: #fbfdc2; border: solid 1px #b3b3b3;color: #2a2a2a;}
.ticket_api .note {margin: 0 auto !important;color:#232323; padding: 20px; background-color: #ffffff;}
.ticket_api .note a {color:#cf1009;}
.ticketWrap .detailsBox .details .ticketBox .ticketItem p {color:#232323;}
.ticketWrap .detailsBox .details ul li .scheduleBox .time {font-size: .13rem;}
.ticketWrap .detailsBox .details ul li .scheduleBox .state {font-size: .12rem;}
._scheduler_container{margin-bottom: 0;padding-bottom: 10px;color: #1b262c}
.ticketWrap .detailsBox .details .other_events a{width: 93%;}

/* goods */
#goods {
	position: relative;
	margin: -50px auto 0 auto;
	padding: 60px 0 50px 0;
}
#goods .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #E5EDF3;
	background: linear-gradient(180deg,rgba(229, 237, 243, 1) 0%, rgba(166, 191, 211, 1) 100%);
	clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%);
}
#goods h2{
	position: absolute;
	top: 65px;
	left: 0;
	width: 10%;
	max-width: 30px;
}
#goods .soon{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 10px);
	max-width: 420px;
}

/* notes */
#notes {
	position: relative;
	margin: -50px auto 0 auto;
	padding: 70px 0 30px 0;
}
#notes .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%);
}
#notes .precautionWrap{
	position: relative;
	margin: 0 auto 21px auto;
	width: calc(100% - 40px);
	background-color: #094c80;
	outline: 1px solid #094c80;
	outline-offset: 2px;
}
#notes .precautionWrap .ttl{
	position: relative;
	margin: 0 auto;
	padding: 14px 0 ;
	cursor: pointer;
}
#notes .precautionWrap .ttl img{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 540px;
}
#notes .ttl::after{
	position: absolute;
	top:50%;
	right: 10px;
	content: '\025bc';
	display: block;
	transition: all .3s ease-out;
	transform: translateY(-50%);
	color: #ffffff;
	font-size: 70%;
}
#notes .ttl.disp::after{transform: translateY(-50%) rotate(-180deg);}
#notes .faqWrap{
	position: relative;
	margin: 0 auto;
	padding: 0;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
	z-index: 9;
	color: #ffffff;
}
#notes .CatTtl{
	position: relative;
	margin: 0 auto;
	padding: 8px 10px;
	width: calc(100% - 45px);
	max-width: 800px;
	background-color: #ffffff;
	text-align: center;
	font-size: 102%;
	font-weight: 700;
	line-height: 1em;
	color: #1572C1;
	font-style: italic;
}
#notes .CatTtl.marginTop{margin: 20px auto 0 auto;}
#notes  #faq .CatTtl.margin{margin: 30px auto 15px auto;}
#notes  #limitlist .CatTtl{margin: 30px auto 0 auto;}
#notes  #limitlist .CatTtl.margin{margin: 30px auto 15px auto;}
#notes .faqWrap.disp{height: auto !important;padding: 20px 0; margin: 0 auto; }
#notes .faqWrap dl{position: relative;}
#notes .faqWrap dl dd{padding: 15px 0;}
#notes #faq.faqWrap dl dd{padding: 5px 0 0 0;}
#notes .faqWrap dl dd p, #notes .faqWrap dl dd div{
	position: relative;
	width: calc(100% - 45px);
	margin: 0 auto;
	padding-bottom: .8em;
	text-align: left;
}
#notes #cautionlist.faqWrap dl dd p, #notes #faq.faqWrap dl dt p, #notes #faq.faqWrap dl dd p, #notes #limitlist dd p, #notes .attWrap p{padding-left: 1.2em;}
#notes #cautionlist.faqWrap dl dt{position: relative;}
#notes #cautionlist.faqWrap dl dt.margin{margin: 20px auto 0 auto;}
#notes #cautionlist.faqWrap dl dd h4{
	position: relative;
	color: #D9FAFF;
	border-bottom: solid 1px #D9FAFF;
	text-align: left;
	margin: 0.5em auto 0.8em auto;
	width: calc(100% - 40px);
}
#notes #faq.faqWrap dl dt p{
	position: relative;
	color: #D9FAFF;
	text-align: left;
	margin: 0 auto;
	width: calc(100% - 45px);
}
#notes #cautionlist.faqWrap dl dd p::before, #notes #faq.faqWrap dl dt p::before, #notes #faq.faqWrap dl dd p::before, #notes #limitlist dd p::before, #notes .attWrap p::before{
	position: absolute;
	content: '・';
	left: 0;
}
#notes #faq.faqWrap dl dt p::before{content: 'Q.';}
#notes #faq.faqWrap dl dd p::before{content: 'A.';}
#notes .attWrap{margin: 0 auto 10px auto; width: calc(100% - 1.5em) !important;transform: translateX(.5em);}
#notes .attWrap p::before{content: '※' !important;}
#notes .attWrap p{font-size: 88% !important;padding-bottom: .2em !important;}

#notes #limitlist .lead{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 800px;
}
#notes  #limitlist dl{margin: 0 auto;width: calc(100% - 20px);}
#notes a{color: #ffffff;}
#notes .btn_limit, .btn_ticCaution, .btn_repeat, .btn_tcaution{cursor: pointer;}
#notes #limitlist .lead{margin: 10px auto 5px auto;}


/* ----- pc ----- */
@media screen and (min-width: 800px) {
	/* about */
	#about {margin: -80px auto 0 auto;padding: 0 0 100px 0;}
	#about .bg{clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);}
	#about h2{width: calc(100% - 20px);max-width: 580px;}
	#about .lead{width: calc(100% - 80px);max-width: 580px;}
	#about .explanation{width: calc(100% - 80px);max-width: 480px;}
	
	/* point */
	#point {
		margin: -80px auto 0 auto;
		padding: 40px 0 65px 0;
	}
	#point .bg{clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);}
	#point h2{
		top: 110px;
		left: 25px;
		max-width: 40px;
	}
	#point ul{width: calc(100% - 120px);max-width: 480px;}
	
	/* story */
	#story{
		margin: 0 auto;
		/*padding: 100px 0 100px 0;*/
		padding: 70px 0 100px 0;
	}
	#story .bg{/*clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);*/clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
	#story h2{
		/*top: 50px;*/
		top: 30px;
		right: 25px;
		max-width: 40px;
	}
	#story p{width: calc(100% - 80px);}

	/* chara */
	#chara{
		margin: -80px auto 0 auto;
		padding: 40px 0 50px 0;
	}
	#chara .bg{clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);}
	#chara h2{
		top: 110px;
		left: 25px;
		max-width: 40px;
	}
	#chara .charaData{
		width: calc(100% - 110px);
		max-width: 400px;
		padding-top: calc(440px * (667 / 640));
	}
	#chara ul{width: calc(100% - 120px);max-width: 480px;}

	/* event */
	#event{
		margin: -80px auto 0 auto;
		padding: 110px 0 100px 0;
	}
	#event .bg{clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);}
	#event h2{
		top: 90px;
		right: 25px;
		max-width: 40px;
	}
	#play h3{width: calc(100% - 50px);}
	#play ul{
		width: 75%;
		gap: 0 8px;
		transform: translateX(0);
		max-width: 480px;
	}
	#play ul li{width: calc(33.3333% - 8px);}
	#play ul li img{width: 80%;}
	#play ul li p{font-size: min(86%, 2.8vw);}
	/* howto */
	#howto h3{width: calc(100% - 50px);max-width: 500px;}
	#howto .howtoWrap {width: calc(100% - 80px);max-width: 480px;}
	#howto .howtoWrap .splide__arrows .splide__arrow--prev {left: -5px;}
	#howto .howtoWrap .splide__arrows .splide__arrow--next {right: -5px;}
	#howto .howtoWrap .splide__arrow {
		height: 30px;
		width: 30px;
	}
	#howto .threearticles{width: calc(100% - 80px);max-width: 500px;}

	/* ticket */
	#ticket {
		margin: -80px auto 0 auto;
		padding: 40px 0 60px 0;
	}
	#ticket .bg{clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);}
	#ticket h2{
		top: 110px;
		left: 15px;
		max-width: 40px;
	}
	#ticket h3{width: calc(100% - 50px);max-width: 500px;}
	/* 料金 */
	#price .table{width: calc(100% - 112px);max-width: 500px;}
	#price .tokutenprice table tbody{font-size: 90%;}
	#price .tokutenprice table tbody td{font-size: 100% !important;}
	#ticket .button.btn_ticCaution{
		margin: 20px auto 0 auto;
		width: calc(100% - 130px);
		max-width: 480px;
	}
	#ticket .ticCaution{width: calc(100% - 140px);max-width: 470px;}
	#ticket #tokuten .tokutenImg{width: calc(100% - 80px);max-width: 500px;}
	#ticket #tokuten .tokutenImg .splide__arrows .splide__arrow--prev {left: -35px;}
	#ticket #tokuten .tokutenImg .splide__arrows .splide__arrow--next {right: -35px;}
	#ticket #tokuten .tokutenImg .splide__arrow {
		height: 26px;
		width: 26px;
	}

	#ticket .button.btn_camp{width: calc(100% - 100px);}
	#ticket .camp{margin: 20px auto 0 auto;}
	#ticket .campWrap{width: calc(100% - 100px);}
	#ticket .campWrap .lead{padding:20px 10px 0 10px;}
	#ticket .campWrap .center{padding: 10px 0 15px 0;}
	#ticket .camp p{margin: 0 auto;padding-left: 1em;}
	#ticket .u22, #ticket .forkids { width: calc(100% - 110px);max-width: 470px;}
	
	#release{padding: 40px 0 0 0;}
	
	#ticket .fcevent{width: calc(100% - 80px);max-width: 500px;}

	/* schedule */
	#schedule{
		margin: -80px auto 0 auto;
		padding: 90px 0 100px 0;
	}
	#schedule h3{max-width: 500px;margin: 0 auto;}
	#schedule .bg{clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);}
	#schedule ul.areaList{width: calc(100% - 80px);}
	#schedule ul li .detail h3{width: calc(100% - 15px);}

	/* チケットカレンダー */
	.ticAPI{width: calc(100% - 10px);}

	/* goods */
	#goods {
		margin: -80px auto 0 auto;
		padding: 80px 0 80px 0;
	}
	#goods .bg{clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);}
	#goods h2{
		top: 90px;
		left: 18px;
		max-width: 40px;
	}

	/* notes */
	#notes {
		margin: -80px auto 0 auto;
		padding: 100px 0 30px 0;
	}
	#notes .bg{clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);}
	#notes .precautionWrap{width: calc(100% - 80px);}
	#notes .precautionWrap .ttl img{max-width: 420px;}
	#notes .ttl::after{font-size: 80%;}

}

/* ----- chara ----- */
@media screen and (min-width: 380px) and (max-width: 1079px) {
	#chara .charaData{padding-top: calc(420px * (667 / 640));}
	#chara ul{max-width: 400px;}
}

@media screen and (min-width: 1100px) and (max-width: 1299px) {
	#ticket .ucamp{
		font-size: min(1.1vw, .12rem);
		width: calc(100% - 11em - 5px);
	}
	#ticket .ucampb{
		font-size: min(1.1vw, .12rem);
		width: 11em;
		padding: 1.5em 0 1.2em 0;
		line-height: 1.3em;
	}
}