@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: 135.93%;
	width: 100%;
}

/* about */
#about{
	position: relative;
	background-color: #000000;
	background-image: url("../img/bg_about.png");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: auto 100%;
	padding: 20px;
}
#about img{margin: 0 auto;}

/* kikan */
#kikan{
	position: relative;
	padding: 10px 0;
	background-color: #000000;
	z-index: 2;
}
#kikan picture{
	position: relative;
	margin: 0 auto;
	padding: 10px 0;
	width: calc(100% - 20px);
	display: block;
	z-index: 3;
}

.eventtic{
	position: relative;
	margin: 0 auto;
	padding: 20px 0 0 0;
	text-align: center;
}
.eventtic img{
	position: relative;
	margin: 10px auto;
	width: calc(100% - 60px);
}
.eventtic a{text-decoration: underline;}

/* 特徴 */
#aboutgame{
	position: relative;
	margin: 0 auto;
	padding: 0 0 80px 0;
}
#aboutgame .contents{
	padding: 30px 0 0 0;
	z-index: 1;
}
#aboutgame img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
}

#aboutgame01{
	position: relative;
	margin: 0 auto;
	padding: 10px 10px 20px 10px;
}
#aboutgame01 img{margin: 0 auto;}

/* catch */
#catch{
	position: relative;
	margin: -140px auto  0 auto;
	padding: 120px 0 35px 0;
}
#catch ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 100px);
}
#catch ul li{
	position: relative;
	margin: 0 auto 40px auto;
}
#catch ul li .pointImg{
	position: relative;
	margin: 0 auto;
	padding: 10px;
	border: solid 2px #F1F5FF;
	box-shadow: 0px 0px 10px 5px rgba(56,141,188,0.80) inset, 0px 0px 10px 5px rgba(56,141,188,.8);
}
#catch ul li .pointImg::before{
	position: absolute;
	top:-30px;
	left: -30px;
	width: 55px;
	height: 55px;
	display: block;
	text-align: center;
	line-height: 55px;
	font-size: .28rem;
	font-weight: 900;
	color: #ffffff;
	border-radius: 50%;
	background-color: #000000;
	border: solid 2px #F1F5FF;
	box-shadow: 0px 0px 10px 5px rgba(56,141,188,0.80) inset, 0px 0px 10px 5px rgba(56,141,188,.8);
}
#catch ul li:nth-child(3) .pointImg::before{content: '3';}
#catch ul li:nth-child(2) .pointImg::before{content: '2';}
#catch ul li:nth-child(1) .pointImg::before{content: '1';}
#catch ul li .pointTxt{
	position: relative;
	margin:0 auto;
	padding: 15px 20px 0 20px;
}


/* ニュース */
#news{
    position: relative;
	margin:20px auto 0 auto;
	padding-bottom: 140px;
	background-image: url("../img/bg_news.png");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
}
#news .newsWrap{position: relative;margin: 30px auto 0 auto;}
#news .newsBox{
	position:relative;
	margin: 0 auto;
	width: calc(100% - 60px);
	padding: 20px;
	background-color: rgba(2,21,43,.6);
	background-image: url("../img/border_news.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% auto;
	z-index: 10;
}
#news .newsBox::before, #news .newsBox::after{
	position: absolute;
	height: 20px;
	width: 100%;
	left: 0;
	background-image: url("../img/border_news.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	content: '';
	display: block;
}
#news .newsBox::before{
	top:-20px;
	background-position: 50% 0;
}
#news .newsBox::after{
	bottom: -20px;
	background-position: 50% 100%;
}
#news .newsBox ul{
	position: relative;
	margin:0 auto;
	width: calc(100% - 40px);
	height: 180px;
    overflow: hidden;
}
#news .newsBox ul li{
	position: relative;
	margin:0 auto 10px auto;
    padding: 0 0 5px 0;
	color: #ffffff;
	line-height: 1.6em;
	border-bottom: solid 1px #27466F;
}
#news .newsBox ul li .date{color: #B2DAFF;}
#news .newsBox ul li a{color: #ffffff;}

/* cm */
#cm{
	position: relative;
	margin: -80px auto  0 auto;
	padding-bottom: 20px;
}

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


/* ストーリー */
#story{
	position: relative;
	margin:0 auto;
	padding: 50px 0 0 0;
	z-index: 20;
	background-color: #ffffff;
}
#story .storyWrap{
	position: relative;
	margin:0 auto;
	z-index: 21;
}
#story .storyWrap .contents{z-index: 23;}
#story .storyInner{
	position: relative;
	margin:0 auto;
	padding: 0 0 20px 0;
}
#story p{
	position: relative;
	padding: 30px 10px 0 10px;
	line-height: 2.4em;
	text-align: center;
	font-size: .14rem;
	color: #101518;
}
#story p.large{line-height: 1.7em;font-size: .24rem;font-weight: 900;font-style: italic;}
#story p span.mailTxt{
	position: relative;
	margin: 20px auto;
	display: block;
	font-size: .17rem;
	line-height: 1.9em;
	font-weight: 700;
	font-style: italic;
}
#story p span.mailTxt.small{font-size: .15rem; line-height: 1.8em;}
#story p span.mailTxt::before, #story p span.mailTxt::after{
	position: absolute;
	width: 90%;
	height: 100%;
	display: block;
	content: '';
}
#story p span.mailTxt::before{
	top:-20px;
	left: 0;
	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
}
#story p span.mailTxt::after{
	bottom:-20px;
	right: 0;
	border-bottom: solid 1px #000000;
	border-right: solid 1px #000000;
}
#story .more{
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
}
#story .more p{padding: 40px 20px 0 20px;}
#story .more.disp{opacity: 1;height: auto;}
#story .btn_more{
	position: relative;
	margin: 40px auto;
	padding: 10px 0;
	z-index: 50;
	width: 180px;
	background-color: #101518;
	border-radius: 100px;
}
#story .btn_more::after{
	position: absolute;
	top:0;
	right: 10px;
	content: '';
	display: block;
	width: 11px;
	height: 100%;
	background-image: url("../img/arrow.png");
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size: contain;
	transition: all .3s ease-out;
}
#story .btn_more.attClose::after{transform: scale(1,-1);}
#story .btn_more img{
	position: relative;
	margin: 0 auto;
	height: 13px;
	width: auto;
}

/* 参加の仕方 */
#howto{
	position: relative;
	margin: 0 auto;
	padding: 50px 0 0 0;
	z-index: 10;
}
#howto ul{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 30px);
	transform: translateX(-5px);
	z-index: 12;
}
#howto ul li{
	position: relative;
	padding: 0;
	margin: 0 0 10px 0;
}
#howto ul li .howtoImg{
	position: relative;
	margin: 0 ;
	width: 43%;
}
#howto ul li .howtoTxt{
	position: relative;
	margin: 0 auto;
	width: calc(57% - 15px);
}
#howto ul li .howtoTxt .ttl{
	position: relative;
	padding: 10px 0;
	color: #C7D1E1;
	font-weight: 900;
	font-size: .16rem;
}
#howto ul li .howtoTxt .txt{
	position: relative;
	margin: 0;
}
#howto ul li .howtoTxt .txt .att_tti{
	position: relative;
	margin: 0;
	padding: 2px 10px;
	width: auto;
	display: inline-block;
	background-color: #C7D1E1;
	line-height: 1em;
	font-size: .12rem;
	color: #000000;
}
#howto ul li .howtoTxt .txt .att_txt{
	position: relative;
	margin: -4px auto 0 auto;
	padding: 10px;
	border: solid 1px #C7D1E1;
	font-size: .12rem;
}
#howto .howtoTxt .button{
	position: relative;
	margin: 0 auto;
	padding: 5px 0;
	color: #101518;
	background-color: #ffffff;
	border-radius: 100px;
	text-align: center;
	font-weight: 900;
	display: block;
	line-height: 1.4em;
}
#howto .howtoTxt .button::after{
	position: absolute;
	top:0;
	right: 10px;
	content: '';
	display: block;
	width: 12px;
	height: 100%;
	background-image: url("../img/arrow01.png");
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size: contain;
}

/* point */
#howto .point{
	position: relative;
	margin: 0 auto;
	padding: 20px 0 40px 0;
	z-index: 11;
}
#howto .point img{
	position: relative;
	margin:  0 auto;
	width: calc(100% - 20px);
}

/* チケット */
#ticket{
	position: relative;
	margin: 40px auto 0 auto;
	z-index: 13;
}
#ticket .price{
	position: relative;
	margin:0 auto;
}
#ticket .price h3{
	position: relative;
	margin:30px auto 0 auto;
}
#ticket .price h3 img{
	position: relative;
	margin:0 auto;
	height: 30px;
	width: auto;
}
#ticket .priceBox{
	position: relative;
	margin: 0 auto;
}
#ticket .priceBox .ttl1{
	position: relative;
	margin: 20px auto 0 auto;
	text-align: center;
	color:  #000000;
	font-weight: 900;
	font-size: .15rem;
	background-color: #ffffff;
	border-radius: 100px;
	width: 160px;
}
#ticket .priceBox .ttl{
	position: relative;
	margin: 15px auto 0 auto;
	text-align: center;
	color:  #ffffff;
	font-weight: 900;
	font-size: .15rem;
	background-color: #4C5355;
}
#ticket .priceBox .table{
	position: relative;
	margin: 0 auto 30px auto;
	width: calc(100% - 30px);
	display: none;
}
#ticket .priceBox .table.price02{margin:50px auto;}
#ticket .priceBox .table table{
	position: relative;
	margin: 0 auto 30px auto;
	border-collapse: collapse !important;
	border-spacing:1px;
	border: solid 1px #4C5355;
	color: #000000;
}
#ticket .priceBox .table.active{display: block;}
#ticket .priceBox table th{
	width: 15%;
	text-align: center;
	vertical-align: middle;
	line-height: 1.4em;
	padding: 5px;
	font-size: .12rem;
	color:  #ffffff;
	border: solid 1px #2F3233;
	background-color: #4C5355;
}
#ticket .priceBox table tbody th{background-color: #4C5355; color: #ffffff;}
#ticket .priceBox table tbody tr:nth-child(even) th{background-color: #2F3233;}
#ticket .priceBox table td{
	width: 25%;
	margin: 10px;
	text-align: center;
	padding: 7px 0;
	font-size: .12rem;
	border: solid 1px #4C5355;
	vertical-align: middle;
	background-color:#ffffff;
}
#ticket .priceBox table td span{font-size: .17rem;font-weight: 900;}
#ticket .priceBox table td span.small{font-size: .10rem;font-weight: 500;display: block;line-height: 1.2em;padding-top: 10px;}
#ticket .priceBox table tbody tr:nth-child(even) td{background-color: #F4F6F8;}
#ticket .price .attention {
	position: relative;
	margin: 0 auto 40px auto;
	width: calc(100% - 40px);
}
#ticket .price .attention p{
	position: relative;
	margin: 5px 20px 0 auto;
	font-size: .12rem;
	padding: 0 0 0 1.2em;
}
#ticket .price .attention p::before{
	position: absolute;
	content: '・';
	left: 0;
}
#ticket .txtmore{
	position: relative;
	margin:0 auto;
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
}
#ticket .txtmore .strong{padding-top: 30px;font-size: .12rem;}
#ticket .txtmore .strong.center{font-size: .13rem;color: #C1D2EE;}
#ticket .txtmore.disp{opacity: 1;height: auto;}
#ticket .btn_more{
	position: relative;
	margin: 20px auto 0 auto;
	padding: 0;
	width: 120px;
	color: #101518;
	background-color: #ffffff;
	border-radius: 100px;
	text-align: center;
	font-weight: 900;
}
#ticket .btn_more::after{
	position: absolute;
	top:0;
	right: 10px;
	content: '';
	display: block;
	width: 10px;
	height: 100%;
	background-image: url("../img/arrow01.png");
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size: contain;
	transition: all .3s ease-out;
}
#ticket .btn_more.attClose::after{transform: scale(1,-1);}

#ticket .type{
	position: relative;
	margin: 0 auto;
	padding: 10px 0 50px 0;
}
#ticket .type  table{
	position: relative;
	margin: 20px auto;
	border-collapse: collapse !important;
	border-spacing:1px;
	border: solid 1px #95D9CB;
	width: calc(100% - 40px);
}
#ticket .type table th{
	text-align: center;
	padding: 5px;
	color: #ffffff;
	font-weight: 700;
	border-top: solid 1px #2F3233;
	border-left: solid 1px #2F3233;
	border-right: solid 1px #2F3233;
	border-bottom: solid 1px #2F3233;
	background-color: #4C5355;
}
#ticket .type table th.ttl{width: 35%;}
#ticket .type table td{
	position: relative;
	margin: 0;
	text-align: center;
	padding: 5px 5px 5px 15px;
	border: solid 1px #2F3233;
	vertical-align: middle;
}
#ticket .type table td.paddingTop{padding: 15px 15px 5px 15px;}
#ticket .type table td::before{
	position: absolute;
	top:4px;
	left: -5px;
	content: '\025b6';
	color: #4C5355;
	font-size: .16rem;
}
#ticket .type table td.paddingTop::before{
	top:-8px;
	left: 50%;
	content: '\025bc';
}
#ticket .type .caution{
	text-align: left;
	font-size: .12rem;
	padding: 10px;
}
#ticket .type .btn_buy{
	position: relative;
	margin: 40px auto 0 auto;
	padding: 15px 0;
	display: block;
	width: calc(100% - 80px);
	color: #000000;
	background-color: #ffffff;
	border-radius: 100px;
	text-align: center;
	font-weight: 900;
}
#ticket .type .btn_buy::after{
	position: absolute;
	top:0;
	right: 10px;
	content: '';
	display: block;
	width: 15px;
	height: 100%;
	background-image: url("../img/arrow01.png");
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size: contain;
	transition: all .3s ease-out;
}
#ticket .type .btn_buy img{
	position: relative;
	width: calc(100% - 110px);
	margin: 0 auto;
}

/* チケットカレンダー */
.ticAPI{position: relative;margin: 0 auto 60px 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: #B4B8B9;}
.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: #141E40; color:#ffffff !important;}
.ticketWrap .naviBox ul li.cr .scheduleBox span span{color:#ffffff !important;}
.ticketWrap .detailsWrap {padding-top: 20px;}
.ticketWrap .detailsBox .tit {background-color: #0d0123;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;}

#ticket .u22{
	position: relative;
	margin: 50px auto 30px auto;
	padding: 20px;
	border: solid 1px #ffffff;
	width: calc(100% - 80px);
	text-align: center;
}
#ticket .u22 img{
	margin: -35px auto 10px auto;
	padding: 5px;
	background-color: #000000;
	width: 120px;
}
#ticket .u22 p{text-align: left;}


/* schedule */
#schedule{
    position: relative;
    margin:  0 auto 10px auto;
	padding: 50px 0 0 0;
	z-index: 40;
}
#schedule ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
}
#schedule ul li{
	position: relative;
	margin: 0 auto 50px auto;
}
#schedule ul li .end{
	position: absolute;
	top:-10px;
	left: -10px;
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	display: block;
	background-color: rgba(0,0,0,.8);
	z-index: 60;
}#schedule ul li .end span{
	position: absolute;
	top:50%;
	left: 0;
	display: block;
	transform: translateY(-50%);
	font-size: .28rem;
	letter-spacing: .6em;
	padding-left: .6em;
	width: calc(100% - .6em);
	text-align: center;
}
#schedule ul li .areaWrap{
	position: relative;
	margin: 0;
	padding: 20px 10px;
	background-color: rgba(255,255,255,.7);
	border: solid 2px #ECF2FF;
}
#schedule ul li .bg{
	position: absolute;
	top:6px;
	left: 6px;
	content: '';
	display: block;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	padding: 0;
	border: solid 2px #ECF2FF;
	box-shadow: 0px 0px 10px 5px rgba(56,81,188,0.80) inset, 0px 0px 10px 5px rgba(56,81,188,.8);
}
#schedule ul li .area{
	position: relative;
	margin: 0 auto;
	font-weight: 900;
	font-size: .16rem;
	line-height: 1.2em;
	text-align: center;
	padding: 10px  30px;
	border-radius: 100px;
	background-color: #000000;
}
#schedule ul li .area span{font-size: .12rem;}
#schedule ul li .kikan{
	position: relative;
	padding: 0;
}
#schedule ul li .kikan p{
	position: relative;
	margin: 0 auto;
	padding: 15px 0 ;
	text-align: center;
	color: #101518;
}
#schedule ul li .soon{
	position: relative;
	padding: 25px 0 15px 0 ;
}
#schedule ul li .soon img{margin: 0 auto;width: calc(100% - 120px);}
#schedule ul li .btn_sAccess{
	position: relative;
	margin: 0 auto ;
	display: block;
	width: calc(100% - 50px);
	text-align: center;
	padding: 5px;
	font-weight: 500;
	background-color: #4C5355;
	color: #ffffff;
	z-index: 30;
}
#schedule ul li .btn_sAccess::after{
	position:absolute;
	top:0;
	right: 7px;
	display: block;
	content: '';
	height: 100%;
	width: 10px;
	transition: all .3s ease-out;
	background-image: url("../img/arrow.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
}
#schedule ul li .btn_sAccess.accessClose::after{transform: scale(1,-1);}
#schedule ul li .detail{
	position: relative;
	text-align: center;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all .5s ease-out;
	background-color: #000000;
}
#schedule ul li .detail.disp{height: auto;opacity: 1;padding:40px 2px 30px 2px;margin: -15px auto 0 auto;}
#schedule ul li .detail h3{
	position: relative;
	margin: 0 auto 20px auto;
	padding-bottom: 5px;
	border-bottom: solid 1px #C1D2EE;
	color: #C1D2EE;
	font-weight: 900;
	width: calc(100% - 40px);
}
#schedule ul li .detail .map{
	position: relative;
	margin: 0 auto 60px auto;
}
#schedule ul li .detail .mapWrap{
	position: relative;
	margin: 0 auto 10px auto;
	width: calc(100% - 20px);
	height: 200px;
}
#schedule ul li .detail .mapWrap iframe{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}
#ticket .release{
	position: relative;
	margin: 0 auto 60px auto;
}
#ticket .release ul{
	position: relative;
	margin: 20px auto 0 auto;
}
#ticket .release ul li{
	position: relative;
	margin: 0 auto;
}
#ticket .release ul li .ttlS{
	position: relative;
	margin: 0 auto 10px auto;
	color: #86A4D1;
	font-weight: 700;
}
#ticket .release ul li .ttlS span{color: #E1EDFF;}
#ticket .release ul li .ttlS.marginTop{margin: 30px auto 10px auto;}
#ticket .release .scraptantei{
	position: relative;
	margin: 30px auto 10px auto;
	display: block;
	text-align: center;
	font-size: .12rem;
}
#ticket .release .bnr_scrap{
	position: relative;
	display: block;
	margin:0 auto 30px auto;
}
#ticket .memberK{
	position: relative;
	margin: 0 auto 60px auto;
	width: calc(100% - 40px);
	border: solid 1px #5C5E5F;
}
#ticket .memberK .ttl{
	position: relative;
	padding: 10px;
	margin: 0 auto 20px auto;
	font-size: .16rem;
	font-weight: 900;
	background-color: #5C5E5F;
	color: #ffffff;
}
#ticket .memberK p{padding: 0 20px;}
#ticket .memberK p.ttlM{font-size: .12rem;}
#ticket .memberK .bnr_scrap{
	position: relative;
	margin: 5px auto 20px auto ;
	width: calc(100% - 40px);
	display: block;
}
#ticket .memberK .button{
	position: relative;
	margin: 20px auto 40px auto;
	padding: 3px 0;
	color: #000000;
	background-color: #ffffff;
	border-radius: 100px;
	text-align: center;
	font-weight: 900;
	display: block;
	line-height: 1.4em;
	width: 180px;
}

/* goods*/
#goods{
	position: relative;
	margin: 0 auto;
	padding:60px 0 40px 0;
}
#goods .goodsWrap{
	position: relative;
	margin:30px auto 0 auto;
	width: calc(100% - 60px);
}
#goods .goodsWrap ul{
	position: relative;
	margin: 0 auto;
}
#goods .goodsWrap ul li, #goods .goodsWrap ul li .goodsTxt{
	position: relative;
	margin: 0 auto 20px auto;
	width: 100%;
}
#goods .goodsWrap ul li .goodsImg{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 60px);
}
#goods .goodsWrap ul li .goodsTxt .name{
	position: relative;
	margin: 10px auto;
	border-bottom: solid 1px #C7D1E1;
	font-size: .19rem;
	text-align: center;
	padding-bottom:8px;
	color: #C7D1E1;
	font-weight: 700;
}
#goods .goodsWrap ul li .goodsTxt .price{
	position: relative;
	text-align: right;
}
#goods .goodsWrap ul li .goodsTxt .price span{font-size: .18rem;}
#goods .goodsWrap ul li .goodsTxt .spec{
	position: relative;
	padding: 10px 0 15px 0;
	font-size: .13rem;
}

/* covid19*/
#covid19{
	position: relative;
	margin: 0 auto;
}
#covid19 .contents{
	position: relative;
	margin: 0 auto 40px auto;
	padding: 20px;
	width: calc(100% - 80px);
	border: solid 2px #5D90B0;
	background-color: rgba(255,255,255,.8);
	color: #000000;
}
#covid19 a{color: #000000;text-decoration: underline;}
#covid19 a:hover{color: #54F1E4;text-decoration: none;}


/* FAQ */
#precautions{
	position: relative;
	margin: 10px auto 0 auto;
	padding-bottom: 60px;
}
#precautions .ttl{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	z-index: 50;
	padding: 50px 0;
}
#precautions .ttl::after{
	position: absolute;
	top:0;
	right: 25px;
	width: 16px;
	height: 100%;
	content: '';
	display: block;
	background-image: url("../img/arrow.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 50% 50%;
	transition: all .3s ease-out;
}
#precautions .ttl img{
	position: relative;
	margin: 0 auto;
	height: 20px;
	width: auto;
}
#precautions .ttl.disp::after{transform: scale(1,-1);}
#precautions #cautionlist, #precautions #faq, #precautions #limit{
	position: relative;
	margin: 0 auto 10px auto;
	padding: 0;
	background-repeat: no-repeat;
	background-position:50% 100%;
	background-size: 100% auto;
	background-image: url("../img/bg_faq.png");
}
#precautions #cautionlist::before, #precautions #faq::before, #precautions #limit::before{
	position: absolute;
	top:0;
	left: 0;
	content: '';
	width: 100%;
	height: 90px;
	display: block;
	transform: scale(-1,-1);
	background-repeat: no-repeat;
	background-position:50% 100%;
	background-size: 100% auto;
	background-image: url("../img/bg_faq.png");
}
#precautions .faqWrap{
	position: relative;
	margin: 0 auto;
	padding: 0 20px;
	width: calc(100% - 60px);
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
	z-index: 49;
}
#precautions .faqWrap.disp{height: auto !important; margin: 0 auto; padding: 0 20px 55px 20px;}
#precautions .faqWrap dl{position: relative;margin:  0 auto;}
#cautionlist dl dt{
	position: relative;
	margin: 0 auto;
	padding: 30px 0 20px 0;
	text-align: center;
}
#cautionlist dl dt.nomargin{padding: 0 0 20px 0;}
#cautionlist dl dt span{
	position: relative;
	font-size: .16rem;
	font-weight: 900;
	color: #A1B3CE;
}
#precautions .faqWrap dl dd p{
	position: relative;
	padding-left: 1.2em;
	padding-bottom: .5em;
	text-align: left;
}
#precautions #cautionlist dl dd p::before, #precautions #limit dl dd p::before{
	position: absolute;
	content: '・';
	left: 0;
}
#precautions .faqWrap dl dd a{text-decoration: underline;}
#precautions .faqWrap dl dd .caution{
	line-height: 1.4em;
	display: block;
	padding: 5px 0 0 0;
	text-align: left;
}
#precautions #limitlist dt{
	font-size: .13rem;
	width: calc(40% - 32px);
	padding: 15px;
	background-color: #4C5355;
	border-bottom: solid 1px #000000;
	font-weight: 500;
	color: #ffffff;
	text-align: center;
}
#precautions #limitlist dd{
	font-size: .12rem;
	width: calc(60% - 32px);
	padding: 15px;
	border-bottom: solid 1px #000000;
	background-color: #ffffff;
	text-align: left;
	color: #101517;
}
#precautions #limitlist dd .center{font-size: .14rem;font-weight: 700;}
#precautions #limitlist .border{border-bottom:none}
#precautions #faqlist dt{
	font-size: .14rem;
	padding: 0 0 5px 0;
	text-align: left;
	color: #A1B3CE;
	font-weight:700;
}
#precautions #faqlist dd{text-align: left;padding: 0 0 20px 0;}
#precautions #faqlist dt::before{
	position: absolute;
	content: 'Q.';
	left: 0;
}
#precautions #faqlist dd, #precautions #faqlist dt{
	position: relative;
	padding-left: 1.2em;
}
#precautions #faqlist dd::before{
	position: absolute;
	content: 'A.';
	left: 0;
}

.btn_game{
	position: relative;
	margin:40px auto  0 auto;
	width: calc(100% - 40px);
}

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

	#precautions .ttl:hover, #story .btn_more:hover, #howto .howtoTxt .button:hover, #ticket .type .btn_buy:hover, #ticket .btn_more:hover, #ticket .member .button:hover, #schedule ul li .btn_sAccess:hover, #covid19 .contents .btn_covid19:hover{cursor: pointer;transform: scale(1.03, 1.03);transition: all .3s ease-out;}
	
	/* ヘッダー */
	header #keyvisual{
		background-image: url("../img/main_pc.jpg");
		padding-top: 49.8%;
	}

	/* kikan */
	#kikan{padding: 20px;z-index: 2;}
	#kikan picture{width: 700px;}
	
	#about{
		background-image: url("../img/bg_about_pc.png");
		padding: 30px;
	}
	#about img{width: 580px;}
	
	.eventtic img{width: 420px;}

	/* 特徴 */
	#aboutgame{margin: 20px auto 0 auto; padding: 0 0 180px 0;}
	#aboutgame .contents{
		padding: 50px 0 0 0;
		background-size: auto 100%;
	}
	#aboutgame img{width: 576px;}
	
	#aboutgame01{padding: 10px 0 30px 0;}
	#aboutgame01 img{width: 480px;}


	/* catch */
	#catch{
		margin: -280px auto  0 auto;
		padding: 170px 0 135px 0;
	}
	#catch ul{width: 960px;}
	#catch ul{padding-top: 30px;}
	#catch ul li{margin: 0; width: 270px;}

	/* ニュース */
	#news{
		margin: -220px auto 0 auto;
		padding: 190px 0 380px 0;
		background-image: url("../img/bg_news.png");
		background-size: auto 110%;
		background-position: 0 100%;
		background-repeat: no-repeat;
	}
	#news .newsWrap{margin: 50px auto 0 auto;}
	#news .newsBox{
		width: 784px;
		padding:  20px;
		background-image: url("../img/border_news_pc.png");
	}
	#news .newsBox::before, #news .newsBox::after{height: 25px; background-image: url("../img/border_news_pc.png");}
	#news .newsBox ul{
		width: 724px;
		height: 180px;
	}
	#news .newsBox ul li a:hover{color: #DDFF25;}
	
	/* cm */
	#cm{
		margin: -280px auto  0 auto;
		padding-bottom: 120px;
	}
	#cm .flexbox{
		max-width: 1200px;
	}
	
	#photo{
		margin: -60px auto 0 auto;
	}

	/* ストーリー */
	#story{padding: 80px 0 0 0;}
	#story .storyInner{padding-bottom: 80px;}
	#story p{
		margin: 0 auto;
		padding: 50px 20px 0 20px;
		line-height: 2.4em;
		font-size: .16rem;
		width: 800px;
	}
	#story p.large{line-height: 1.7em;font-size: .26rem;}
	#story p span.mailTxt{
		font-size: .20rem;
		line-height: 1.9em;
		width: 600px;
	}
	#story p span.mailTxt.small{font-size: .18rem; line-height: 1.8em;}
	#story .btn_more{
		margin: 50px auto 0 auto;
		width: 250px;
	}
	#story .btn_more::after{
		right: 15px;
		width: 13px;
	}
	#story .btn_more img{height: 15px;}

	/* 参加の仕方 */
	#howto{
		margin: 0 auto;
		padding: 80px 0 0 0;
	}
	#howto ul{
		margin: 60px auto 0 auto;
		width: 960px;
		transform: translateX(-5px);
	}
	#howto ul li{width: 33%;}
	#howto ul li .howtoImg{
		margin: 0 auto;
		width: 50%;
	}
	#howto ul li .howtoTxt{
		margin: 0;
		width: 100%;
		text-align: center;
	}
	#howto ul li .howtoTxt .ttl{font-size: .18rem;}
	#howto ul li .howtoTxt .txt{
		margin: 10px auto 0 auto;
		width: calc(100% - 60px);
	}
	#howto ul li .howtoTxt .txt .att_tti{
		padding: 2px 10px;
		width: 5em;
		display: block;
		font-size: .14rem;
	}
	#howto ul li .howtoTxt .txt .att_txt{
		margin: -1px auto 0 auto;
		padding: 10px;
		font-size: .14rem;
		text-align: left;
	}
	#howto .howtoTxt .button{
		margin: 10px auto;
		width: calc(100% - 60px);
		font-size: .14rem;
	}
	#howto .howtoTxt .button::after{width: 10px;}

	/* point */
	#howto .point{
		padding: 50px 0 100px 0;
		margin:  0 auto;
	}
	#howto .point img{width: 820px;}

	/* チケット */
	#ticket{
		margin: -20px auto 0 auto;
	}
	#ticket .price h3{margin:50px auto 0 auto;}
	#ticket h3 img{height: 40px;}

	#ticket .priceBox .ttl1{margin: 40px auto 0 auto;}
	#ticket .priceBox .ttl{
		margin: 25px auto 0 auto;
		width: 820px;
		font-size: .17rem;
	}
	#ticket .priceBox .table{
		margin: 0 auto 70px auto;
		width: 820px;
	}
	#ticket .priceBox .table.price02{margin:80px auto;}
	#ticket .priceBox .table table{margin: 0 auto 50px auto;}
	#ticket .priceBox table th{
		width: 18%;
		font-size: .16rem;
	}
	#ticket .priceBox table td{
		margin: 0;
		font-size: .16rem;
	}
	#ticket .priceBox table td span{font-size: .24rem;}
	#ticket .priceBox table td span.small{font-size: .12rem;line-height: 1.2em;}
	#ticket .price .attention {
		margin: 0 auto 40px auto;
		width: 620px;
	}
	#ticket .price .attention .ttl{width: 100%;margin: 0 auto 20px auto;}
	#ticket .price .attention p{
		font-size: .14rem;
		padding: 0 0 0 1.2em;
	}
	#ticket .txtmore .strong{padding-top: 50px;font-size: .15rem;}
	#ticket .txtmore .strong.center{font-size: .15rem;}
	#ticket .btn_more{
		margin: 40px auto 0 auto;
		width: 180px;
	}

	#ticket .type{padding: 10px 0 60px 0;}
	#ticket .type  table{
		margin: 30px auto;
		width: 880px;
	}
	#ticket .type table th{
		padding: 10px;
		font-size: .18rem;
	}
	#ticket .type table td{
		padding: 10px 10px 10px 25px;
		font-size: .18rem;
	}
	#ticket .type table td.paddingTop{padding: 25px 10px 10px 10px;}
	#ticket .type table td::before{
		top:6px;
		font-size: .18rem;
	}
	#ticket .type table td.paddingTop::before{top:-10px;}
	#ticket .type .caution{
		font-size: .14rem;
		padding: 10px;
	}
	#ticket .type table td.paddingTop .caution{text-align: center;}
	#ticket .type .btn_buy{
		margin: 60px auto 0 auto;
		padding: 20px 0;
		width: 400px;
	}
	#ticket .type .btn_buy::after{
		right: 15px;
		width: 18px;
	}
	#ticket .type .btn_buy img{width: 250px;}

	#ticket .u22{
		margin: 80px auto 30px auto;
		padding: 30px 50px;
		width: 500px;
	}
	#ticket .u22 img{
		margin: -55px auto 10px auto;
		width: 140px;
	}

	/* schedule */
	#schedule{
		margin:  10px auto;
		padding: 50px 0 0 0;
		background-repeat: repeat-x;
		background-size: auto auto;
	}
	#schedule ul{
		margin: 45px auto 0 auto;
		width: 960px;
	}
	#schedule ul li{margin: 0 auto 80px auto;}
	#schedule ul li .areaWrap{
		padding: 20px 30px;
		border: solid 3px #ECF2FF;
	}
	#schedule ul li .bg{
		border: solid 3px #ECF2FF;
		box-shadow: 0px 0px 10px 5px rgba(56,81,188,0.80) inset, 0px 0px 10px 5px rgba(56,81,188,.8);
	}
	#schedule ul li .area{
		font-size: .20rem;
		padding: 15px  30px;
		background-position:20px 50%, calc(100% - 20px) 50%;
		background-size:25px auto, 25px auto;
	}
	#schedule ul li .area span{font-size: .15rem;}
	#schedule ul li .kikan p{
		padding:25px 0 ;
		font-size: .18rem;
	}
	#schedule ul li .soon{padding: 35px 0 25px 0 ;}
	#schedule ul li .soon img{width: 240px;}
	#schedule ul li .btn_sAccess{
		width: 450px;
		padding: 8px;
	}
	#schedule ul li .btn_sAccess::after{
		right: 10px;
		width: 13px;
	}
	#schedule ul li .detail.disp{padding:50px 2px 30px 2px;margin: -25px auto 0 auto;}
	#schedule ul li .detail h3{
		margin: 0 auto 40px auto;
		width: calc(100% - 60px);
	}
	#schedule ul li .detail .map{margin: 0 auto 80px auto;}
	#schedule ul li .detail .mapWrap{
		margin: 0 auto 15px auto;
		width: calc(100% - 60px);
		height: 400px;
	}
	#ticket .release{margin: 0 auto 80px auto;}
	#ticket .release ul{width: calc(100% - 60px);}
	#ticket .release ul li .ttlS.marginTop{margin: 50px auto 10px auto;}
	#ticket .release .scraptantei{
		margin: 30px auto 10px auto;
		font-size: .15rem;
	}
	#ticket .release .bnr_scrap{width: 380px;}
	#ticket .memberK{
		margin: 0 auto 80px auto;
		width: 500px;
	}
	#ticket .memberK .ttl{
		margin: 0 auto 40px auto;
		font-size: .18rem;
	}
	#ticket .memberK p.ttlM{font-size: .16rem;}
	#ticket .memberK .bnr_scrap{
		margin:10px auto 40px auto ;
		width: 300px;
	}
	#ticket .memberK .button{
		margin: 40px auto 70px auto;
		width: 210px;
	}

	/* goods*/
	#goods{
		margin: 0 auto;
		padding:60px 0 90px 0;
	}
	#goods .goodsWrap{
		margin:50px auto 0 auto;
		width: 880px;
	}
	#goods .goodsWrap ul li{
		margin: 0 ;
		width: calc(50% - 35px);
	}
	#goods .goodsWrap ul li .goodsImg{width: 280px;}
	#goods .goodsWrap ul li .goodsTxt .name{
		margin: 15px auto;
		font-size: .23rem;
		padding-bottom: 15px;
	}
	#goods .goodsWrap ul li .goodsTxt .price span{font-size: .22rem;}
	#goods .goodsWrap ul li .goodsTxt .spec{
		padding: 20px 0 25px 0;
		font-size: .14rem;
	}

	/* covid19*/
	#covid19 .contents{
		margin: 0 auto 40px auto;
		padding: 40px;
		width:600px;
	}

	/* FAQ */
	#precautions{
		margin: 70px auto 0 auto;
		padding-bottom: 90px;
	}
	#precautions .ttl{width: 960px;}
	#precautions .ttl::after{
		right: 65px;
		width: 20px;
	}
	#precautions .ttl img{height: 28px;}
	#precautions #cautionlist, #precautions #faq, #precautions #limit{
		margin: 0 auto 20px auto;
		width: 960px;
	}
	#precautions #cautionlist, #precautions #faq, #precautions #limit{background-image: url("../img/bg_faq_pc.png");}
	#precautions #cautionlist::before, #precautions #faq::before, #precautions #limit::before{background-image: url("../img/bg_faq_pc.png");}
	#precautions .faqWrap{width: calc(100% - 120px);}
	#cautionlist dl dt{padding: 50px 0 20px 0;}
	#cautionlist dl dt span{font-size: .18rem;}
	#precautions #limitlist dt{font-size: .14rem;}
	#precautions #limitlist dd{font-size: .14rem;}
	#precautions #limitlist dd .center{font-size: .16rem;padding-bottom: 10px;}
	#precautions #faqlist dt{font-size: .16rem;}
	
	.btn_game{
		margin:60px auto  0 auto;
		width:380px;
	}
}