@charset "utf-8";

/* ヘッダー */
header{
	position: relative;
	margin: 0 auto ;
	display: block;
	width: 100%;
}
header #keyvisual{
	position: relative;
	margin: 0 auto ;
	display: block;
	background-image: url("../img/main.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: contain;
	padding-top: 141.5625%;
	width: 100%;
}

/* catch */
#catch{
	position: relative;
	padding:10px 0;
	background-color: #000000;
	background-image: url("../img/bg_catch.jpg");
	background-repeat: no-repeat;
	background-size:cover;
	background-position: 100% 50%;
	text-align: center;
	color: #ffffff;
	font-size: .18rem;
	font-weight: 700;
}
#catch .catch{
	position: relative;
	margin: 0 auto 10px auto;
	width: calc(100% - 20px);
}

/*preticket*/
#preticket{
	position: relative;
	margin: 0 auto;
	padding: 30px 10px;
	text-align: center;
	background-image: url("../img/bg_pretic01.svg");
	background-repeat: no-repeat;
	background-position: 128% 0;
	background-size: auto 70%;
}
#catch::after{
	position: absolute;
	top: 81%;
	left: -8%;
	content: '';
	display: block;
	width: 30%;
	height: 100%;
	background-image: url("../img/bg_pretic.svg");
	background-position: 0 0;
	background-size: 100% auto;
	background-repeat: no-repeat;
	opacity: .6;
}
#preticket .bg1{background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #000000 50%, #000000 100%);}
#preticket .bg{
	top: calc(10% + 100px);
	height: 30%;
	background-color: #e2f4f3;
}
#preticket .bg::before,#preticket .bg::after{
	position: absolute;
	left: 0;
	width: 100%;
	height: 120px;
	content: '';
	background-image: url("../img/bg_light.svg");
	background-position: 0 0;
	background-size: 101% 100%;
	background-repeat: no-repeat;
	
}
#preticket .bg::before{top: -120px;}
#preticket .bg::after{bottom:-120px;transform: scale(-1, -1);}
#preticket .preTtl{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
}
#preticket .ttlS{
	position: relative;
	margin: 30px auto 20px auto;
	width: calc(100% - 20px);
}
#preticket .ttlS p{
	position: relative;
	background-color: #56c19f;
	font-weight: 900;
	color: #0f2226;
	padding: 5px 0;
}
#preticket .ttlS::before{
	position: absolute;
	top:5px;
	left: 5px;
	width: 100%;
	height: 100%;
	background-color: #0f2226;
	display: block;
	content: '';
}
#preticket .preType{
	color: #0f7a7a;
	font-weight: 900;
	border-bottom: solid 1px #0f7a7a;
	width: calc(100% - 20px);
	margin: 0 auto 5px auto;
}
#preticket .preDate{
	font-weight: 700;
	padding-bottom: 30px;
}
#preticket .preDateAll{
	font-weight: 700;
	padding-bottom: 30px;
	font-size: .18rem;
}
#preticket .bnr{
	margin: 0 auto;
	width: calc(100% - 40px);
}

/* ポイント */
#point{
	position: relative;
	margin: 0 auto;
	color: #ffffff;
}
#point .bg1{background: linear-gradient(180deg, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 100%);}
#point .aboutWrap{
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
	background-image: url("../img/bg_point.svg");
	background-position: 50% 0;
	background-size: auto 110%;
	background-repeat: no-repeat;
	background-color: #000000;
}
#point .about{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
}
#point .aboutTxt{
	position: relative;
	margin: 30px auto 0 auto;
	width: calc(100% - 20px);
	text-align: center;
}

#point .pointWrap{position: relative;}
#point .pointWrap::before{
	position: absolute;
	content: '';
	display: block;
	width: 110%;
	height: 20px;
	top: 40px;
	left: -20px;
	transform: rotate(18deg);
	background-image: url("../img/bg_point02.svg");
	background-position: 50% 0;
	background-size: 110% auto;
	background-repeat: no-repeat;
}
#point .pointWrap .bg{
	top: 120px;
	height: calc(100% - 120px);
	background-color: #090f0c;
}
#point .pointWrap .bg::before, #point .pointWrap .bg::after{
	position: absolute;
	left: 0;
	width: 100%;
	height: 120px;
	content: '';
	display: block;
	background-image: url("../img/bg_dark.svg");
	background-position: 0 0;
	background-size: 101% 100%;
	background-repeat: no-repeat;
}
#point .pointWrap .bg::before{top: -120px;}
#point .pointWrap .bg::after{bottom:-120px;transform: scale(-1, -1);}
#point ul{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 10px);
}
#point ul li{
	position: relative;
	padding: 25px 0 0 0;
	margin: 0;
}
#point ul li:nth-child(odd){transform: translateX(-10px);}
#point ul li:nth-child(even){transform: translateX(20px);}
#point ul li:nth-child(even) .pointImg{order: 2;}
#point ul li:nth-child(even) .pointTxt{order: 1;}
#point ul li .pointImg{width: 31%;}
#point ul li .pointTxt{
	position: relative;
	width: 66%;
}
#point ul li .pointTxt .ttlNo{
	position: relative;
	width: auto;
	display: inline-block;
	padding: 2px 1em;
	background-color: #0b3937;
	color: #ffffff;
	font-weight: 900;
	font-size: .15rem;
	z-index: 1;
	transform: translateX(-10px);
}
#point ul li .pointTxt .ttl{
	position: relative;
	padding: 12px 0 2px 0;
	background-color: #52b998;
	color: #090f0c;
	font-weight: 900;
	font-size: .15rem;
	transform: translateY(-10px);
	text-align: center;
}
#point .btn_first{
	position: relative;
	margin: 40px auto 20px auto;
	display: block;
	width: calc(100% - 40px);
}

/* photo */
#photo{
	position: relative;
	padding: 0;
	z-index: 4;
}
#photo .photoWrap{
	position: relative;
	margin: 0 auto ;
}
#photo .slick-slide{margin: 0 2px; background-color: transparent;}


/* ストーリー */
#story{
	position: relative;
	margin:0 auto;
	padding: 0 0 200px 0;
	background-image:url("../img/ttl_story.svg"),  url("../img/bg_story01.png"),  url("../img/bg_story.jpg");
	background-position:-20px 0,  -50px 20px,  50% 0;
	background-size: 18% auto, 94% auto, cover;
	background-repeat: no-repeat, no-repeat, no-repeat;
}
#story .contetsWrap{margin: 10px auto;}
#story p{
	position: relative;
	padding: 30px 10px 0 10px;
	line-height: 1.8em;
	text-align: center;
}
#story p span{
	position: relative;
	margin: 2px auto;
	font-size: .20rem;
	font-weight:900;
	color: #f6ff00;
	display: block;
	line-height: 1.5em;
}
#story p.photoTxt{
	text-align: right;
	font-size: .11rem;
	color: #474747;
	padding: 0 5px 0 0;
}
#story .more{
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
}
#story .more.disp{opacity: 1;height: auto;}
#story .btn_more{
	position: relative;
	margin: 30px auto;
	background-color: #000000;
	color: #ffffff;
	width: 200px;
	text-align: center;
	padding: 3px 0;
}
#story .btn_more::after{
	position: absolute;
	top:0;
	right: 5px;
	content: '';
	display: block;
	width: 15px;
	height: 100%;
	background-image: url("../img/arrow.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 50%;
}
#story .btn_more.attClose::after{transform: scale(1,-1);}

/* 参加方法 */
#howto{
	position: relative;
	margin: 0;
	padding-bottom: 20px;
}
#howto::before{
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 120px;
	left: 0;
	top: -120px;
	background-image: url("../img/bg_white.svg");
	background-repeat: no-repeat;
	background-size: 101% 100%;
	background-position: 0 0;
}
#howto .bg1{
	top:-100px;
	height: calc(100% + 100px);
	background-image: url("../img/bg_howto.svg"), url("../img/bg_circle.svg");
	background-repeat: no-repeat, no-repeat;
	background-size: 94% auto, 94% auto;
	background-position: -10px 0, calc(100% + 60px) calc(100% + 20px);
	z-index: 1;
}
#howto .bg{
	height: 1px;
	top: -100px;
	left: 0;
	width: 70%;
	background-color: #e2f4f3;
	z-index: 2;
}
#howto .bg::before, #howto .bg::after{
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 120px;
	left: 0;
	background-image: url("../img/bg_light.svg");
	background-repeat: no-repeat;
	background-size: 101% 100%;
	background-position: 0 0;
}
#howto .bg::before{top: -120px;}
#howto .bg::after{bottom: -120px;transform: scale(-1,-1);}
#howto .contentsUPWrap{z-index: 3;}
#howto ul{
	position: relative;
	margin: 0 ;
	width: 100%;
}
#howto ul li{
	position: relative;
	margin: 0;
	width: 100%;
}
#howto ul li .howtoimg{
	position: relative;
	margin: 0;
	width: 130px;
}
#howto ul li .howtotxt{
	position: relative;
	margin: 0;
	width: calc(100% - 160px);
	padding: 0 10px 15px 0;
}
#howto ul li .howtotxt .howtottl{
	font-size: .16rem;
	font-weight: 900;
	color: #a70086;
	padding-bottom: 10px;
}
#howto ul li .howtotxt a{
	background-color: #088d88;
	color: #ffffff;
	font-weight: 900;
	padding: 0 4px;
	display: inline-block;
	margin: 0 2px;
}

/* covid19*/
#covid19{
	position: relative;
	/*margin: 0 auto;*/
	margin: -80px auto 20px auto;
	padding-bottom: 20px;
}
#covid19 .contetsWrap{
	background-color: #000000;
	padding: 15px;
	width: calc(100% - 50px);
	color: #ffffff;
}
#covid19 .contetsWrap h3{
	color: #ffffff;
	padding-bottom: 20px;
	text-align: center;
	font-weight: 900;
	font-size: .15rem;
}
#covid19 .contetsWrap div.step{
	height: 0;
	overflow: hidden;
	padding: 0 10px;
	transition: all .3s ease-out;
	background-color: #ffffff;
	color: #000000;
}
#covid19 .contetsWrap div.step a{text-align: center;display: block;}
#covid19 .contetsWrap div.step.dispD{height: auto !important;padding: 20px 10px 10px 10px;}
#covid19 .contetsWrap .btn_covid19{
	position: relative;
	margin: 15px auto;
	text-align: center;
}
#covid19 .contetsWrap .btn_covid19 img{width: 20px;margin:0 auto;transition: all .3s ease-out;}
#covid19 .contetsWrap .btn_covid19 img.stepClose{transform: rotate(180deg);}


/* ニュース */
#news{
    position: relative;
	margin: 0 auto;
	padding: 0;
}
#news .bg{
	top: -100px;
	background-image: url("../img/bg_news.svg");
	background-repeat: no-repeat;
	background-size: 40% auto;
	background-position: -50px 0;
}
#news .bg1{
	background-color: #e2f4f3;
	height: calc(100% - 90px);
}
#news .bg1::before, #news .bg1::after{
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 120px;
	left: 0;
	background-image: url("../img/bg_light.svg");
	background-repeat: no-repeat;
	background-size: 101% 100%;
	background-position: 0 0;
}
#news .bg1::before{top: -120px;}
#news .bg1::after{bottom:-120px; transform: scale(-1,-1);}
#news .newsWrap{position: relative;padding-bottom: 20px;}
#news .newsBox{
	position: relative;
	margin: 0 auto;
	padding-top: 20px;
}
#news .newsBox ul{
	position: relative;
	margin:0 auto;
    width: 100%;
	/*height: 180px;*/
	height: 80px;
    overflow: hidden;
}
#news .newsBox ul li{
	position: relative;
	margin:0 auto 10px auto;
    padding: 0;
	border-bottom: solid 1px #898376;
}
#news .newsBox ul li .date{
	font-size: .12rem;
	font-weight: 900;
	color: #088d88;
}

/* スペシャルバナー */
#bnrLinks{
	position: relative;
	margin: 0 auto;
}
#bnrLinks ul{
	position: relative;
	margin: 30px auto 0 auto;
	width: calc(100% - 40px);
}
#bnrLinks ul li{
	position: relative;
	margin: 0 0 10px 0;
}
#bnrLinks .cm{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
}

/* チケット */
#ticket{
	position: relative;
	margin:0 auto;
	padding-bottom:20px;
}
#ticket .price{position: relative;}
#ticket .price ul {
	position: relative;
	width: calc(100% - 20px);
}
#ticket .price ul li{
	position: relative;
	margin: 0;
	padding: 8px 0;
	width: calc(50% - 5px);
	background-color: #C4C4C4;
	text-align: center;
}
#ticket .price ul li.active{background-color: #106060;color:  #ffffff;font-weight: 900;}
#ticket .price ul li.active::before{opacity: 0;}
#ticket .price ul li.active::after{
	position: absolute;
	bottom: -.7em;
	left: 0;
	content: '\025bc';
	display: block;
	width: 100%;
	height: 1em;
	color:  #106060;
	line-height: 1em;
	text-align: center;
}
#ticket .price ul li p{
	position: relative;
	padding: 10px 0;
	text-align: center;
	z-index: 12;
}
#ticket .priceBox{
	position: relative;
	margin: 0 auto;
}
#ticket .priceBox .ticketM{
	text-align: center;
	padding: 30px 0 0 0;
	font-weight: 900;
	font-size:.13rem;
}
#ticket .priceBox .price01 .ticketM{color:#106060;}
#ticket .priceBox .price02 .ticketM{color:#680a94;}
#ticket .priceBox .price03 .ticketM{color:#00458a;}
#ticket .priceBox .ttl{
	position: relative;
	margin: 18px auto 18px auto;
}
#ticket .priceBox .ttl span{
	position: relative;
	display: block;
	font-weight: 900;
	padding: 5px 0;
	text-align: center;
}
#ticket .priceBox .ttl::before{
	position: absolute;
	top:5px;
	left: 5px;
	width: 100%;
	height: 100%;
	display: block;
	content: '';
}
#ticket .priceBox .ttl::after{
	position: absolute;
	top:-18px;
	left: 0;
	width: 100%;
	height: calc(100% + 36px);
	display: block;
	content: '';
	background-repeat: no-repeat, no-repeat;
	background-size: contain, contain;
}
#ticket .priceBox .price01 .ttl span{color: #0f2226;background-color: #56c19f;}
#ticket .priceBox .price02 .ttl span{color: #2a003e;background-color: #b377cf;}
#ticket .priceBox .price03 .ttl span{color: #00162c;background-color: #4992dc;}
#ticket .priceBox .price01 .ttl::before{background-color: #0f2226;}
#ticket .priceBox .price02 .ttl::before{background-color: #2a003e;}
#ticket .priceBox .price03 .ttl::before{background-color: #00162c;}
#ticket .priceBox .price01 .ttl::after{background-image: url("../img/tic04.png"), url("../img/tic01.png");background-position: 10px 0, 100% 100%;}
#ticket .priceBox .price02 .ttl::after{background-image: url("../img/tic03.png"), url("../img/tic02.png");background-position: 0 0, calc(100% - 10px) 100%;}
#ticket .priceBox .caution{
	position: relative;
	margin: 20px auto 0 auto;
	font-size: .14rem;
}
#ticket .priceBox div.active{display: block;}
#ticket .priceBox div{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
	display: none;
}
#ticket .priceBox table{
	position: relative;
	margin: 0 auto;
	width: 100%;
	border-collapse: collapse;
	border-spacing:1px;
	color: #0f2226;
}
#ticket .priceBox table thead th{
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	line-height: 1.4em;
	padding: 5px;
	font-size: .12rem;
	border: solid 1px #0f2226;
	background-color: #fff0cb;
	font-weight: 700;
}
#ticket .priceBox table thead th:nth-child(1){background-color: #FFFFFF;}
#ticket .priceBox table tbody td{
	width: 40%;
	margin: 10px;
	text-align: center;
	padding: 5px 0;
	font-size: .10rem;
	border: solid 1px #0f2226;
	vertical-align: middle;
}
#ticket .priceBox table tbody td:nth-child(1){width: 20%;font-size: .12rem;line-height: 1.4em;}
#ticket .priceBox .price01 table tbody tr:nth-child(odd) td{background-color: #bfe2e9;}
#ticket .priceBox .price02 table tbody tr:nth-child(odd) td{background-color: #d6caf1;}
#ticket .priceBox .price03 table tbody tr:nth-child(odd) td{background-color: #bfe0ff;}
#ticket .priceBox table td span{font-size: .18rem;font-weight: 900;}
#ticket .ticCaution{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 20px);
	font-size: .12rem;
	line-height: 1.4em;
}
#ticket .tokuten{
	position: relative;
	margin: 40px auto 0 auto;
	width: calc(100% - 20px);
}
#ticket .tokuten h3{
	position: relative;
	text-align: center;
	font-weight: 900;
	color: #045858;
	font-size: .16rem;
	padding-bottom: 10px;
}
#ticket .tokuten h3 span{display: block; padding-bottom: 5px;}
#ticket .tokuten p{padding-top: 15px;}
#ticket .tokutenCaution{
	position: relative;
	background-color: #000000;
	padding: 15px 0;
	margin: 40px auto;
}
#ticket .btn_tokuten{
	position: relative;
	text-align: center;
	font-weight: 900;
	color: #ffffff;
}
#ticket .btn_tokuten img{
	position: relative;
	display: block;
	margin: 15px auto;
	width: 20px;
	transition: all .3s ease-out;
}
#ticket .btn_tokuten.attClose img{transform: rotate(180deg);}
#ticket .tokutenBlock{
	position: relative;
	background-color: #ffffff;
	padding: 0 10px;
	width: calc(100% - 40px);
	margin:  0 auto;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
}
#ticket .tokutenBlock.disp{height: auto;opacity: 1;padding: 10px;}
#ticket .tokuten .ttl{
	position: relative;
	text-align: center;
	font-weight: 900;
	color: #045858;
	padding: 20px 0 10px 0;
}

/* チケットカレンダー */
.ticAPI{position: relative;margin: 0 auto;padding: 0;}
.ticAPI iframe{position: relative;margin: 0; padding: 0; width: 100%; height: 420px;}
#ticket_api{margin: 0;padding: 0;color: #000000;width: 100%; background-color: #56c19f;}
.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 .scheduleBox{color:#000000;}
.ticketWrap .naviBox ul li.cr .scheduleBox {background: #045858; color:#ffffff !important;}
.ticketWrap .naviBox ul li.cr .scheduleBox span span{color:#ffffff !important;}
.ticketWrap .detailsWrap {padding-top: 20px;}
.ticketWrap .detailsBox .tit {background-color: #000000;font-size: .14rem !important;}
.ticketWrap .detailsBox .tit p{margin: 0 !important;}
.ticketWrap .detailsBox .tit01 {font-size: .18rem !important;}
.ticketWrap .detailsBox .details h4 {margin: 30px 0 0 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: #6d4a6d; font-size: .12rem;font-weight: normal;}
.ticketWrap .detailsBox .details a.scrap:after {border-top: solid 1px #e10000;border-right: solid 1px #6d4a6d; width: 5px; height: 5px;margin: -3px 0 0 0px;}
.ticketWrap .detailsBox .details ul li {margin-bottom: 0 !important;}
.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;}


/* schedule */
#schedule{
    position: relative;
    margin: 0 auto;
	padding-bottom: 80px;
	background-color: #045858;
}
#schedule::before, #schedule::after{
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 120px;
	left: 0;
	background-image: url("../img/bg_white.svg");
	background-repeat: no-repeat;
	background-size: 101% 100%;
	background-position: 0 0;
}
#schedule::before{top:0;transform: scale(-1,-1);}
#schedule::after{bottom:0;}
#schedule .scheWrap{
	position: relative;
	padding: 40px 0;
	z-index: 3;
}
#schedule .scheWrap ul{
	position: relative;
	margin: 30px auto 0 auto;
}
#schedule .scheWrap ul li{
	position: relative;
	margin: 0 auto 40px auto;
}
#schedule .scheWrap ul li::after{
	position: absolute;
	content: '';
	display: block;
	height: 160px;
	width: 48%;
	top: -35px;
	right: -20px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: calc(100% + 15px) 0;
}
#schedule .scheWrap ul li.pre::after{background-image: url("../img/ico_pre.png");}
#schedule .scheWrap ul li.play::after{background-image: url("../img/ico_play.png");}
#schedule .scheWrap ul li.end::after{background-image: url("../img/ico_end.png");}
#schedule .scheWrap ul li.soon::after{background-image: url("../img/ico_soon.png");}
#schedule .scheWrap ul li .areaBlock{
	position: relative;
	margin: 0 auto;
}
#schedule .scheWrap ul li .areaBlock::before{
	position: absolute;
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	top: 5px;
	left: 5px;
	background-color: #000000;
}
#schedule .scheWrap ul li .areaWrap{
	position: relative;
	margin: 0 auto;
	padding: 15px;
	background-color: #b7feff;
	background-image: url("../img/bg_schedule.svg");
	background-repeat: no-repeat;
	background-size: 120% auto;
	background-position: 50% 5px;
}
#schedule .scheWrap ul li .areaWrap::before{
	position: absolute;
	content: '';
	display: block;
	height: 100%;
	width: 24%;
	top: -25px;
	left: -15px;
	background-image: url("../img/bg_sche01.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 0;
}
#schedule .scheWrap ul li.end .areaBlock{opacity: .3;}
#schedule .scheWrap ul li .area{
	position: relative;
	font-weight: 900;
	font-size: .24rem;
	text-align: center;
	color: #045858;
}
#schedule .scheWrap ul li .kikan{
	position: relative;
	padding: 10px 0;
}
#schedule .scheWrap ul li .kikan p{
	position: relative;
	margin: 0 auto;
	padding: 15px 0 ;
	text-align: center;
	font-weight: 900;
	color: #010101;
	font-size: .15rem;
}
#schedule .scheWrap ul li .kikan p.ttl{
	padding: 1px 0;
	font-weight: 700;
	color: #ffffff;
	background-color: #9a0251;
	border-radius: 100px;
	width: 140px;
	font-size: .14rem;
}
#schedule .scheWrap ul li .button{
	position: relative;
	margin: 0 auto;
	background-color: #000000;
	font-size: .13rem;
	font-weight: 700;
	text-align: center;
	padding: 2px 0;
	color: #ffffff;
	z-index: 5;
}
#schedule .scheWrap ul li.soon .button{opacity: .5;}
#schedule .scheWrap ul li.soon .button:hover{opacity: .5;}
#schedule .scheWrap ul li .button::after{
	position:absolute;
	top:0;
	right: 5px;
	display: block;
	content: '';
	height: 100%;
	width: 15px;
	transition: all .3s ease-out;
	background-image: url("../img/arrow.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
}
#schedule .scheWrap ul li .button.accessClose::after{transform: scale(-1,-1);}
#schedule .scheWrap ul li.soon .button::after{display: none;}
#schedule .scheWrap ul li .access{
	text-align: center;
	padding:  0 5px;
	border: solid 2px #045858;
	background-color: #ffffff;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all .5s ease-out;
}
#schedule .scheWrap ul li .access.disp{height: auto;opacity: 1;padding: 0 5px 20px 5px;}
#schedule .scheWrap ul li .access .name{
	position: relative;
	margin: 0 auto 10px auto;
	font-size: .15rem;
	font-weight: 900;
}
#schedule .scheWrap ul li .access .ttlM{
	position: relative;
	margin: 20px auto 10px auto;
	font-weight: 900;
	color: #9a0251;
}
#schedule .scheWrap ul li .access .ttl{
	position: relative;
	margin: 25px auto 5px auto;
	font-weight: 900;
}
#schedule .scheWrap ul li .access .txt{
	position: relative;
	margin: 5px auto;
	font-size: .12rem;
	line-height: 1.4em;
}
#schedule .scheWrap ul li .access .map{
	margin: 0 auto 15px auto;
	height: 0;
	overflow: hidden;
	padding-bottom: 320px;
	position: relative;
	border: solid 2px #045858;
}
#schedule .scheWrap ul li .access .map iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}
#schedule .scraptantei{
	position: relative;
	margin: 30px auto;
	width: calc(100% - 70px);
	background-color: rgba(179,119,207,.6);
	padding: 5px 20px 20px 20px;
}
#schedule .scraptantei p{
	font-weight: 900;
	font-size: .15rem !important;
	padding: 15px 0;
}
#schedule .scraptantei .ptrTtl{color: #530278;}
a.links{
	position: relative;
	margin: 0 auto;
	display: block;
	background-color: #000000;
	font-size: .13rem;
	font-weight: 700;
	text-align: center;
	padding: 2px 0;
	color: #ffffff;
}
a.links::after{
	position:absolute;
	top:0;
	right: 5px;
	display: block;
	content: '';
	height: 100%;
	width: 15px;
	transition: all .3s ease-out;
	background-image: url("../img/arrow.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	transform: rotate(-90deg);
}
#ticket .tokuten a.links{width: 60%;}
#aboutgame{
	position: relative;
	margin: 0 auto;
}
#aboutgame .bg{
	top: -100px;
	z-index: 1;
	background-repeat: no-repeat, no-repeat;
	background-size: 20% auto, 60% auto;
	background-image: url("../img/bg_bottom01.svg"), url("../img/bg_bottom.svg");
	background-position: -20px 40px, calc(100% + 40px) 0;
}

#aboutgame .aboutgameWrap{
	position: relative;
	z-index: 11;
	/*margin: -80px auto 0 auto;*/
	margin: 0 auto;
}
#aboutgame ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
}
#aboutgame ul li{
	position: relative;
	margin: 0 auto;
	padding: 40px 0 0 0;
}
#aboutgame ul li.btn{
	padding: 0 0 20px 0;
	width: calc(100% - 60px);
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {

	#bnrLinks ul li a img:hover, #howto .button:hover, #schedule .scheWrap ul li .button:hover{cursor: pointer; opacity: .8;transition: all .3s ease-out;}
	#covid19 .contetsWrap .btn_covid19:hover{cursor: pointer;transition: all .3s ease-out;}

	/* ヘッダー */
	header{padding-top: 70px;}
    header #keyvisual{
        background-image: url("../img/main_pc.jpg");
        padding-top:56.25%;
	}


	/* catch */
	#catch{
		padding:10px 0 40px 0;
		background-image: url("../img/bg_catch_pc.jpg");
		font-size: .20rem;
		letter-spacing: .1em;
		line-height: 2em;
	}
	#catch .catch{width: 600px;padding-bottom: 10px;}

	/*preticket*/
	#catch::after{
		top:170px;
		left:calc(50% - 550px);
		width: 213px;
		height: 261px;
	}
	#preticket .preTtl{width: 460px;}
	#preticket .ttlS{
		margin: 40px auto;
		width: 600px;
	}
	#preticket .ttlS p{padding: 10px 0;}
	#preticket .bg{
		top: calc(17% + 120px);
		height: 40%;
	}
	#preticket .preType{width: 400px;}
	#preticket .preDateAll{font-size: .22rem;}
	#preticket .preDate{padding-bottom: 50px;}
	#preticket .bnr{width: 440px;}

	/* ポイント */
	#point .bg1{background: linear-gradient(180deg, #000000 0%, #000000 70%, #ffffff 70%, #ffffff 100%);}
	#point .aboutWrap{
		padding: 80px 0 30px 0;
	}
	#point .about{width: 580px;}
	#point .aboutTxt{
		margin: 70px auto 0 auto;
		font-size: .18rem;
	}

	#point .pointWrap::before{
		width: 110%;
		height: 20px;
		top: 40px;
		left: -20px;
		transform: rotate(4deg);
		background-image: url("../img/bg_point03.svg");
		background-position: 50% 0;
		background-size: 110% auto;
	}

	#point ul{
		margin: 50px auto 0 auto;
		width: 960px;
		align-items: flex-start;
		padding-bottom: 60px;
	}
	#point ul li{
		padding: 0;
		width: 200px;
	}
	#point ul li:nth-child(odd){transform: translateX(0);}
	#point ul li:nth-child(even){transform: translateX(0);}
	#point ul li:nth-child(even) .pointImg{order: 1;}
	#point ul li:nth-child(even) .pointTxt{order: 2;}
	#point ul li .pointImg{position: relative;width: 160px; height: 180px;}
	#point ul li .pointImg img{position: absolute;bottom: 0;}
	#point ul li .pointTxt{width: 100%;padding-top: 10px;}
	#point ul li .pointTxt .ttlNo{;font-size: .17rem;}
	#point ul li .pointTxt .ttl{
		padding: 12px 0 5px 0;
		line-height: 1.5em;
	}
	#point .btn_first{
		margin: 20px auto;
		width: 420px;
	}

	/* ストーリー */
	#story{
		padding: 0 0 200px 0;
		background-position:calc(50% - 500px) 0, calc(50% - 400px) 20px,  50% 0;
		background-size: 124px auto, 40% auto, cover;
	}
	#story .contetsWrap{margin: 30px auto;}
	#story p{
		padding: 30px 0 0 0;
		line-height: 2em;
		font-weight: 900;
	}
	#story .btn_more{
		margin: 60px auto;
		width: 280px;
		padding: 3px 0;
	}
	#story .btn_more::after{right: 10px;}

	/* 参加方法 */
	#howto .bg1{
		background-size: 40% auto, 40% auto;
		background-position: -10px 0, calc(100% + 60px) 100%;
	}
	#howto{padding-bottom: 70px;}
	#howto ul{width: 960px; margin: 0 auto;align-items: flex-start;}
	#howto ul li{width: 170px;margin: 0 10px;}
	#howto ul li .howtoimg{width: 170px;}
	#howto ul li .howtotxt{
		width: 100% ;
		padding: 0;
	}
	#howto ul li .howtotxt .howtottl{
		font-size: .18rem;
		text-align: center;
		padding: 20px 0 10px;
		min-height: 4.8em;
		line-height: 1.6em;
	}

	/* covid19*/
	#covid19{
		padding-bottom: 20px;
		width: 750px;
	}
	#covid19 .contetsWrap{
		padding: 35px;
		width: calc(100% - 100px);
	}
	#covid19 .contetsWrap h3{
		padding-bottom: 40px;
		font-size: .18rem;
	}

	/* ニュース */
	#news .bg{
		top: -160px;
		background-size: 340px auto;
		background-position: calc(50% - 480px) 0;
	}
	#news .bg1{height: 80%;}

	#news .newsWrap{padding-bottom: 60px;}
	#news .newsBox{padding-top: 60px;}
	#news .newsBox ul{width: 800px;}
	#news .newsBox ul li .date{font-size: .16rem;}

	/* スペシャルバナー */
	#bnrLinks ul{
		margin: 30px auto 0 auto;
		width: 960px;
	}
	#bnrLinks ul li{
		margin: 0 10px;
		width: 420px;
	}

/* チケット */
#ticket{
	padding-bottom:20px;
}
	#ticket .price ul {width: 960px;}
	#ticket .price ul li{padding: 10px 0;}

	#ticket .priceBox .ticketM{
		padding: 50px 0 0 0;
		font-size:.18rem;
	}
	#ticket .priceBox .ttl{
		margin: 38px auto 48px auto;
		width: 600px;
	}
	#ticket .priceBox .ttl span{padding: 8px 0;}
	#ticket .priceBox .ttl::after{
		top:-28px;
		height: calc(100% + 86px);
	}
#ticket .priceBox .caution{
	margin: 20px auto 0 auto;
	font-size: .14rem;
}
	#ticket .priceBox div{;width: 800px;}
#ticket .priceBox table{
	position: relative;
	margin: 0 auto;
	width: 100%;
	border-collapse: collapse;
	border-spacing:1px;
	color: #0f2226;
}
	#ticket .priceBox table thead th{
		line-height: 1.6em;
		padding: 10px 0;
		font-size: .16rem;
	}
	#ticket .priceBox table tbody td{
		margin: 10px;
		padding: 10px 0;
		font-size: .16rem;
	}
	#ticket .priceBox table tbody td:nth-child(1){font-size: .16rem;line-height: 1.6em;}
	#ticket .priceBox table td span{font-size: .30rem;}
	#ticket .ticCaution{
		margin: 20px auto 0 auto;
		width: 800px;
		font-size: .14rem;
		line-height: 1.6em;
	}
	#ticket .ticCaution.margin{margin: 60px auto 0 auto;text-align: center;}
	#ticket .tokuten{
		margin: 100px auto 0 auto;
		width: 740px;
	}
	#ticket .tokuten h3{
		font-size: .18rem;
		padding-bottom: 20px;
	}
	#ticket .tokuten p{padding-top: 30px;width: 600px;margin: 0 auto;}
	#ticket .tokutenCaution{margin: 60px auto;}
	#ticket .tokuten img{width: 640px;margin: 0 auto;}
	#ticket .tokuten .btn_tokuten img{width: 20px;margin: 15px auto; }
	#ticket .tokuten .ttl{padding: 40px 0 20px 0;}
	#ticket .tokuten .tokutenlink{width: 380px;display: block;margin: 0 auto;}
	#ticket .tokuten a.links{width: 240px;font-size: .16rem;}
	
/* schedule */
#schedule{
	padding-bottom: 80px;
}
	#schedule .scheWrap{padding: 60px 0;}
	#schedule .scheWrap ul{
		margin: 30px auto 0 auto;
		width: 960px;
	}
	#schedule .scheWrap ul li{margin: 0 auto 50px auto;}
	#schedule .scheWrap ul li::after{
		width:195px;
		top: -35px;
		right: -20px;
		background-position: 0 0;
	}
	#schedule .scheWrap ul li .areaWrap{
		padding: 30px;
		background-size: 80% auto;
		background-position: 50% -5px;
	}
	#schedule .scheWrap ul li .areaWrap::before{
		width: 116px;
		top: -35px;
		left: -18px;
	}
	#schedule .scheWrap ul li .area{font-size: .36rem;}
	#schedule .scheWrap ul li .kikan{padding: 15px 0;}
	#schedule .scheWrap ul li .kikan p{
		padding: 25px 0 ;
		font-size: .18rem;
	}
	#schedule .scheWrap ul li .kikan p.ttl{width: 290px;}
	#schedule .scheWrap ul li .button{
		font-size: .16rem;
		padding: 3px 0;
	}
	#schedule .scheWrap ul li .button::after{
		right: 10px;
		width: 18px;
	}
	#schedule .scheWrap ul li .access.disp{padding: 20px 5px;}
	#schedule .scheWrap ul li .access .name{font-size: .18rem;}
	#schedule .scheWrap ul li .access .ttlM{font-size: .18rem;}
	#schedule .scheWrap ul li .access .txt{
		margin: 10px auto;
		font-size: .16rem;
		line-height: 1.6em;
	}
	#schedule .scheWrap ul li .access .map{padding-bottom: 420px;}
	#schedule .scraptantei{
		margin: 0 auto 70px auto;
		width: 480px;
		padding: 15px 40px 40px 40px;
	}
	#schedule .scraptantei p{
		font-size: .16rem !important;
		padding: 15px 0;
	}
	#schedule .scraptantei a img{width: 360px;margin: 0 auto;}
	#schedule .scraptantei a.links{
		font-size: .14rem;
		padding: 3px 0;
	}


	#aboutgame .bg{
		z-index: 1;
		top: -340px;
		height: calc(100% + 400px);
		background-size: 120px auto,430px auto;
		background-position: 20px 270px, calc(100% + 40px) 0;
	}
	#aboutgame ul{width: 800px;}
	#aboutgame ul li{
		margin: 0 ;
		padding: 0;
		width: 420px;
	}
	#aboutgame ul li.btn{
		padding: 0 10px 40px 10px;
		width: 380px;
	}
}