@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: 0 0;
	background-size: contain;
	padding-top: 141.5625%;
	width: 100%;
}

.notice{
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 10px 0 30px 0;
    text-align: center;
    font-size: .21rem;
    line-height: 1.8em;
}
.notice a{color: #ff1c04 !important;}

.noticeWrap{
    position: relative;
    margin: 0 auto;
    padding: 20px;
    width: calc(100% - 60px);
    border: solid 2px #fffc00;
    background-color: rgba(3,19,39,.8);
}
.noticeWrap h3{
    position: relative;
    margin-bottom: 30px;
    font-size: .18rem;
    font-weight: 700;
    color: #fffc00 !important;
    text-align: center;
}
.noticeWrap h3::after{ display: none; }
.noticeWrap h4{
    background-image:none;
    margin: 30px 0 0 0;
    padding: 0 0 20px 0;
    border-bottom: dotted 1px #00f0ff;
}
.noticeWrap h5{
    font-size: .16rem;
    margin: 30px auto 10px auto;
    text-align: left;
}
.noticeWrap .playguide{
    position: relative;
    margin: 0 auto 30px auto;
    border-bottom: dotted 1px #00f0ff;
}
.noticeWrap .request{
    position: relative;
    margin: 0 auto 30px auto;
}
.noticeWrap .kikan{
    position: relative;
    margin: 20px auto 5px auto !important;
}
.noticeWrap .scrapReq{
    position: relative;
    margin: 50px auto 0 auto !important;
}
.noticeWrap p{
    margin: 0 auto !important;
    width: 100% !important;
}
.noticeWrap a{
    color:#fffc00 !important;
    text-decoration: underline;
}

/* 開催・キャッチコピー */
.catch{
	position: relative;
	margin: 0 auto;
    padding: 20px 0;
	background-image: url("../img/catch_bg.jpg");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
    background-color: #031327;
	width: 100%;
}
.catch_bg{
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 40px;
    background: -webkit-linear-gradient(top, #031327 10%, rgba(3,19,39,0));
    background: -o-linear-gradient(top, #031327 10%, rgba(3,19,39,0));
    background: linear-gradient(to top, rgba(3,19,39,0) 10%, #031327);
}
.catch.nodisp{padding: 0;}

/* バナー */
#banner{
	position: relative;
	margin: 0 auto;
	width: 100%;
    background-color: #031327;
}
.slick-slide{margin: 5px; background-color: transparent;}
.slide-arrow{
    position: absolute;
	top:0;
	display: block;
	width: 30px;
	height: 30px;
}
.prev-arrow{left: 0;}
.next-arrow{right: 0;}
#arrows{
	position: absolute;
	display: block;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	text-align: center;
	width: 100%;
	height: 30px;
}
#apDots{
	position: absolute;
    margin: 0;
    padding: 0;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
    width: 100%;
    background-color: #031327;
}
/* CM */
#cm{
    position: relative;
}
#cm .movieWrap{
    position: relative;
    margin: -10.5% auto 0 auto;
    width: 90%;
}
/* youtube */
.movie{
	position: relative;
	margin:0 auto;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.movie iframe{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ニュース */
#news{padding: 0 0 30px 0;}
#news h2{margin-bottom: 0;}
#news .newsBox::before{
	position: absolute;
    top: calc(5% - 30px);
    left: -15px;
    display: block;
	content: '';
	width: 60%;
    height: 0;
    padding-top: 5%;
    background-image: url("../img/news_line.png");
	background-repeat: no-repeat;
	background-position: 0 0;
    background-size: contain;
}
#news .newsBox{
    position: relative;
	margin: calc(5% + 10px) auto 0 auto;
    padding: 20px;
    width: calc(100% - 70px);
	text-align: left;
    background-color: rgba(3,19,39,.8);
}
#news .newsBox ul{position: relative;}
#news .newsBox ul li{
	position: relative;
	margin: 0 auto 15px auto;
	padding-bottom: 15px;
	border-bottom: solid 1px #0e3362;
	color: #ffffff;
	font-size: .16rem;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	transition: all .3s ease-out;
}
#news .newsBox ul li p.date{width: 100%; color: #33afea;font-size: .14rem;}
#news .newsBox ul li a{text-decoration: none; color: #ffffff;}
#news .newsBox ul li:nth-child(n + 4){display: none;opacity: 0;}
#btn_more{
	position: relative;
	margin: 0 auto;
	text-align: right;
	color: #fffc00;
}
#btn_more span img{height: 8px; padding: 0 1em; vertical-align: middle;}

/* intro */
#intro{padding-bottom: 50px;}
/* photo slider */
#intro div#photoArea{
	position: relative;
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}
#intro .photoWrap {
    top: 0;
    left: 2%;
    height:116px;
	width: 100%;
    overflow: hidden;
    position: absolute;
}
#intro .photoWrap:after {
    content: "";
    display: none;
    clear: none;
}
#intro div.photo{
	position: relative;
	margin: 0;
	padding:0;
	width: 100%;
	height:116px;
	overflow: hidden;
}
#intro div.photo ul{
	float: left;
	height:116px;
	overflow: hidden;
}
#intro div.photo ul li{
	position: relative;
	height:116px;
	width: 175px;
    padding: 0 2px;
	float: left;
    display: inline;
    overflow: hidden;
}
#intro div.photo ul li img{
	height: 100%;
	width: auto;
}
.about{
	position: relative;
	margin: 55px auto 0 auto;
    padding: 25px 0;
    background-image: url("../img/about_bg.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
    background-size: auto 100%;
    background-color: #62add0;
    font-size: .16rem;
    font-weight: 900;
    text-align: center;
    color: #031327;
}
.about::before{
    position: absolute;
    top: -25px;
    left: 0;
    display: block;
    content: '';
    width: 90%;
    height: 20px;
    background-image: url("../img/line01.png");
	background-repeat: no-repeat;
	background-position: 100% 0;
    background-size: auto 100%;
}
.about::after{
    position: absolute;
    bottom: -33px;
    right: 0;
    display: block;
    content: '';
    width: 80%;
    height: 28px;
    background-image: url("../img/line02.png");
	background-repeat: no-repeat;
	background-position: 0 0;
    background-size: auto 100%;
}

/* イベント概要 */
#story{padding-bottom: 30px;}
#story p{
    position: relative;
    margin: 0 auto;
    font-size: .16rem;
    width: calc(100% - 30px);
}
#story div{
    position: relative;
    margin: 0;
    width: calc(100% - 15px);
    padding-bottom: 40px;
    background-image: url("../img/story_bg.png");
	background-repeat: no-repeat;
	background-position: 100% 100%;
    background-size: auto 34px;
}
#story div::before{
	position: absolute;
    display: block;
    content: '';
    bottom: 5px;
    left: 0;
    width: calc(100% - 54px);
    height: 6px;
    background-image: url("../img/ttl_bg_line.png");
	background-repeat: no-repeat;
	background-position: 50% 0;
    background-size: auto 6px;
}
#story div::after{
	position: absolute;
    display: block;
    content: '';
    bottom: 0;
    left: 26px;
    width: calc(100% - 58px);
    height: 6px;
    background-image: url("../img/ttl_bg_line.png");
	background-repeat: no-repeat;
	background-position: 50% 0;
    background-size: auto 6px;
}

/* 遊び方 */
#howto{padding-bottom: 30px;}
#howto ul{
	position: relative;
	margin: 20px auto 0 auto;
}
#howto ul li{
	position: relative;
    display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
    align-items: flex-start;
}
#howto ul li .howtoImg{
    position: relative;
    width: 113px;
    padding-right: 7px;
}
#howto ul li .howtoTxt{
	position: relative;
    width: calc(100% - 120px);
    padding-top: 18px;
}
#howto ul li .howtoTxt p{
	position: relative;
	font-size: .16rem;
    color: #deff00;
    font-style: italic;
    font-weight: 700;
}
#howto ul li .howtoTxt p.attention{
    font-size: .12rem;
    font-style: normal;
    color: #ffffff;
    padding-top: 10px;
}


/* イベント */
#event{padding-bottom: 30px;}
#event p.textB{font-size: .16rem;}
#event .address{font-size: .14rem; padding-top: 35px;}
#event .Box{margin: 20px auto 45px auto;}

/* プレイ形式 */
#event .play ul{
	position: relative;
	margin: 20px auto 0 auto;
    display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
}
#event .play ul li{
	position: relative;
	margin: 0;
    width: 29%;
    text-align: center;
}
#event .play ul li img{height: 57px; width: auto;}
#event .play ul li p{
	position: relative;
	margin: 10px auto 0 auto;
	font-size: .16rem;
    color: #deff00;
    text-align: center;
}
#event .play p.attention{color: #ffffff; padding: 14px 14px 0 14px; line-height: 1.8em;}


/* 販売 */
#schadule p{position: relative;font-size: .16rem;}
#schadule .attention{font-size: .12rem; margin-top: 20px;}
#schadule .schadule_ttl{
    font-size: .16rem;
    color: #deff00;
    font-weight: bold;
}
#schadule .schaduleType{
    margin: 30px 0 10px 0;
    font-weight: bold;
    font-size: .14rem;
    color: #00f0ff;
}

/* 料金 */
#price .ticketTbl{
    position: relative;
    margin: 10px auto;
    border: solid 1px #409df4;
    text-align: center;
}
#price .ticketTblTr{
    position: relative;
    display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
    border-top: solid 1px #409df4;
}
#price .ticketTblTr:first-child{border-top:none;}
#price .ticketTblTr .th, #price .ticketTblTr .td{
    position: relative;
    width: 33%;
    padding: 10px 0;
    font-weight: 700;
}
#price .ticketTblTr .td.col2{width: 66%; background-color: transparent !important;border-right: none;border-left: none !important;}
#price .ticketTblTr .th:last-child, #price .ticketTblTr .td:last-child{background-color: rgba(51,172,228,.5);border-left: solid 1px #409df4;}
#price .ticketTblTr .td:first-child{background-image: url("../img/th_bg.jpg");color: #031327;border-right: solid 1px #409df4;}
#price .ticketTblTr .td{font-size: .16rem;}
#price .ticketTblTr .td span{ display: block; font-size: .12rem;}
#price #btn_system{
    position: relative;
    margin: 60px auto;
}
#price .about_ticket_system ul li p.system_about{display: inline-block;padding: 0 0 10px 1em;}
.ticket_system{
    position: relative;
    margin: 40px auto;
    display: none;
}
.ticket_system ul{
    position: relative;
    margin: 0 auto;
}
.ticket_system ul li{
    position: relative;
    padding-bottom: 10px;
    text-align: left;
}

/* チケットカレンダー */
.ticketWrap{ background-color: transparent !important; padding: 0 !important;}
.naviBox{margin: 0 !important;padding: 20px 0 !important; background-color: rgba(51,172,228,.5);}
.ticketWrap .naviBox .prevBtn{top: 42px;left: 0; background-color: #33afea;}
.ticketWrap .naviBox .nextBtn{top: 42px;right: 0; background-color: #33afea;}
.ticketWrap .naviBox .prevBtn:before,.ticketWrap .naviBox .nextBtn:before {border-top: solid 3px #ffffff;border-right: solid 3px #ffffff;}
.ticketWrap .naviBox ul {margin: 0 0 0 52px!important; background-color: #33afea;}
.ticketWrap .naviBox ul li .scheduleBox{color:#000000;}
.ticketWrap .naviBox ul li.cr .scheduleBox {background: #031327; color:#ffffff !important;}
.ticketWrap .naviBox ul li.cr .scheduleBox span.date3 span{color:#ffffff !important;}
.ticketWrap .detailsBox .tit {background-color: #031327;}
.ticketWrap .detailsBox .details h4 {margin: 30px 0 0 0; color:#031327;border-bottom: 2px solid #031327; text-align: left; background-image: none;}
.ticketWrap .detailsBox .details a.scrap {color: #cf1009;}
.ticketWrap .detailsBox .details a.scrap:after {border-top: solid 2px #cf1009;border-right: solid 2px #cf1009;}
.ticketWrap .detailsBox .details ul {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;}

.ticket_banner{
    position: relative;
    width: 288px;
    margin: auto;
}
.ticket_banner ul li{
    position: relative;
    margin: 0 auto 20px auto;
}
.ticket_banner ul li p{opacity: .3;}

.ticket_caution{
    position: relative;
    margin: 40px auto;
}
.ticket_caution #btn_park{
    position: relative;
    margin: 60px auto;
}
.park{
    position: relative;
    margin: 40px auto;
    display: none;
}
.park .ttlBox{ width: 220px !important;}
.park .Box{ margin: 0 auto 40px auto;}
.parklist{
    position: relative;
    margin: 20px auto;
    display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-around;
}
.parklist li{
    position: relative;
    width: 30%;
    text-align: center;
}
.parklist li:first-child img{width: 93px;}
.parklist li:nth-child(2) img{width: 63px; padding-top: 18px;}
.parklist li p{
	position: relative;
	margin: 10px auto 0 auto;
	font-size: .16rem;
    color: #deff00;
    text-align: center;
}
.closeUp{
    position: relative;
    margin: 20px auto;
    text-align: center;
    color:#d8f902;
}
.closeUp img{width: 20px;}

/* リスト */
ul.star{
    position: relative;
    margin: 0 auto;
	padding: 0 0 0 20px;
	text-align: left;
    width: calc(100% - 55px);
}
ul.star li:before {
	position: absolute;
	top:-3px;
	left:-32px;
    content:  "";
    width:  27px;
    height:  28px;
    display:  inline-block;
	background-image: url("../img/star.png");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: contain;
}
ul.star li{
	position: relative;
	margin: 0 auto 15px auto;
	padding: 0;
	text-align: left;
	text-indent: 1px;
}
ul.star li .btn{color: #fffc00; text-decoration: underline;}


/**/
.btnList{
    position: relative;
	margin: 30px auto;
    display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-around;
    align-items: stretch;
}
.btnList li{
    position: relative;
    width: 20% !important;
    text-align: center;
    font-weight: 700;
    letter-spacing: .2em;
}
.btnList li p{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* 参加制限 */
#limit{padding-bottom: 30px;}
#limit dl{
	position: relative;
	margin: 20px auto 0 auto;
    border-top: solid 1px #409df4;
    border-bottom: solid 1px #409df4;
     display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
}
#limit dl dt, #limit dl dd{
	position: relative;
    padding: 10px;
    border-bottom: solid 1px #409df4;
    border-right: solid 1px #409df4;
}
#limit dl dd{
    width: calc(65% - 22px);
}
#limit dl dt{
    width: calc(35% - 22px);
    background-color: rgba(51,172,228,.5);
    border-left: solid 1px #409df4;
}
#limit dl dd p{font-weight: 500;}
#limit dl dd p.caution{
    padding: 10px 0;
    font-size: .12rem;
    line-height: 1.4em;
}

/* 注意事項 */
#precaution{padding-bottom: 30px;}

/* よくある質問 */
#faq{padding-bottom: 30px;}
#faq dl{
	position: relative;
	margin: 0 auto;
}
#faq dl dt{
	position: relative;
	margin: 0 auto;
    font-weight: 700;
    color: #d8f902;
    text-indent: -1.3em;
    padding-left: 1em;
}
#faq dl dd{
    padding-left: 1.2em;
    margin: 8px 0 20px 0;
}
#faq dl dd span.faqttl{color: #01d5e5; font-weight: 900;}
#faq dl dd span.btn{color: #fffc00; text-decoration: underline;}

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

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

    .notice{
        padding: 30px 0 60px 0;
        font-size: .26rem;
    }
    .noticeWrap{
        margin: 10px auto 80px auto;
        padding: 40px;
        width: 880px;
    }
    .noticeWrap h4{width: 880px;}

    /* バナー */
    #banner{width: 960px;}

    /* CM */
    #cm .movieWrap{
        position: relative;
        margin: 0 auto;
        width: 960px;
    }

    /* ニュース */
    #news{padding: 0 0 50px 0;}
    #news .newsBox::before{
        top: calc(5% - 45px);
        left:calc(50% - 20px);
        transform: translateX(-50%);
        width: 960px;
        padding-top: 24px;
        background-size: auto 24px;
        background-position: 0 0;
    }
    #news .newsBox{
        margin: 40px auto 0 auto;
        padding: 40px 30px;
        width: 900px;
    }
    #news .newsBox ul li{justify-content: flex-start;}
    #news .newsBox ul li p.date{width: 100px;}
    #news .newsBox ul li p.newsTxt{width: 760px;}
    #btn_more{margin: 30px auto 0 auto;}

    /* intro */
    #intro{padding-bottom: 50px;}
    /* photo slider */
    #intro .photoWrap {height:198px;}
    #intro div.photo{height:198px;}
    #intro div.photo ul{height:198px;}
    #intro div.photo ul li{
        height:198px;
        width: 298px;
        padding: 0 5px;
    }

    .about{
        margin: 85px auto 0 auto;
        padding: 50px 0;
        font-size: .18rem;
    }
    .about::before{
        top: -45px;
        width: 40%;
        height: 40px;
    }
    .about::after{
        bottom: -60px;
        width: 40%;
        height: 57px;
    }

    /* イベント概要 */
    #story{padding-bottom: 50px;}
    #story p{width: 960px;}
    #story div{
        margin: 0 auto;
        width: 960px;
        padding-bottom: 65px;
        background-size: auto 65px;
    }
    #story div::before{
        bottom: 5px;
        left: 360px;
        width: 500px;
        height: 14px;
        background-size: auto 14px;
    }
    #story div::after{
        bottom:-3px;
        left: 400px;
        width: 500px;
        height: 14px;
        background-size: auto 14px;
    }

    /* 遊び方 */
    #howto{padding-bottom: 50px;}
    #howto ul{
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    #howto ul li{
        justify-content: flex-start;
        align-items: center;
        width: 470px;
        margin-bottom: 20px;
    }
    #howto ul li .howtoImg{
        width: 160px;
        padding-right: 0;
    }
    #howto ul li .howtoTxt{
        width: calc(100% - 170px);
        padding-top: 0;
    }
    #howto ul li .howtoTxt p.attention{
        font-size: .14rem;
        font-weight: 500;
    }


    /* イベント */
    #event{padding-bottom: 50px;}
    #event p.textB{font-size: .18rem;}
    #event .address{font-size: .16rem; padding-top: 40px;}
    #event .Box{margin: 35px auto 70px auto;}
    #event .contents-wrap{ padding: 0 40px; width: 880px;}
    /* プレイ形式 */
    #event .play ul{
        margin: 45px auto 0 auto;
        width: 610px;
        justify-content: space-between;
    }
    #event .play ul li{width: 33%;}
    #event .play ul li img{height: 115px;}
    #event .play ul li p{
        margin: 30px auto 0 auto;
        line-height: 1.8em;
        font-size: .24rem;
    }
    #event .play p.attention{padding: 30px 20px 0 20px;}

    /* 販売 */
    #schadule p{position: relative;font-size: .18rem;}
    #schadule .attention{font-size: .14rem;}
    #schadule .schadule_ttl{font-size: .20rem;}
    #schadule .schaduleType{
        margin: 30px 0 10px 0;
        font-size: .16rem;
    }
    /* 料金 */
    #price .ticketTbl{margin: 20px auto;}
    #price #btn_system{margin: 90px auto;}
    .ticket_system{margin: 60px auto;}


    /* チケットカレンダー */
    .ticAPI{position: relative; margin: auto; width: 1000px;}

    .ticket_banner{width: 825px;}
    .ticket_banner ul{
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .ticket_banner ul li{margin: 0; width: 380px;}

    .ticket_caution{ margin: 70px auto;}
    .ticket_caution #btn_park{margin: 90px auto;}
    .park{margin: 60px auto;}
    .park .ttlBox{ width: 300px !important;}
    .park .Box{ margin: 0 auto 60px auto;}
    .parklist{width: 600px; margin-bottom: 80px;}
    .parklist li{width: 300px;}
    .parklist li:first-child img{width: 180px;}
    .parklist li:nth-child(2) img{width: 120px; padding-top: 30px;}
    .parklist li p{
        margin: 35px auto 0 auto;
        font-size: .24rem;
        line-height: 1.6em;
    }
    .closeUp{font-size: .16rem;}

    /* リスト */
    ul.star{
        padding: 0 0 0 20px;
        width: 880px;
    }

    /**/
    .btnList{
        margin: 60px auto;
        width: 720px;
    }
    .btnList li{width: 190px !important; font-size: .24rem;}

    /* 参加制限 */
    #limit{padding-bottom: 50px;}

    /* 注意事項 */
    #precaution{padding-bottom: 50px;}

    /* よくある質問 */
    #faq{padding-bottom: 50px;}
    #faq dl{width: 880px;}

}