@charset "utf-8";
h2{
	position: relative;
	margin: 0 auto 20px auto;
	width: 100%;
	max-width: 750px;
}

/* ヘッダー */
header {
	position: relative;
	margin: 0 auto;
}
header #keyvisual {
	position: relative;
	margin: 0 auto;
}
header #keyvisual img{width: 100%;}

/* CM */
#cm{
	position: relative;
	margin: 0 auto;
	background-color: #000000;
	padding-bottom: 30px;
}
#cm .movieWrap{
	width: calc(100% - 40px);
	outline: solid 1px #FFEF00;
	outline-offset: 0;
	transform: translateY(-4vw);
}

/* about */
#about{
	position: relative;
	margin: -4vw auto 0 auto;
	background-color: #000000;
	background-image: url("../img/bg/bg_about.jpg");
	background-repeat: repeat-x;
	background-position: 50% 0;
	background-size: cover;
	padding: 20px 0;
}
#about::before{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg/bg_about.png");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: auto 100%;
	content: '';
	display: block;
}
#about .text{
	position: relative;
	margin: 0 0 0 auto;
	padding:20px 0;
	width: 55%;
	font-size: 90%;
}
#about .bnr{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
	line-height: 1.6em;
	max-width: 520px;
	display: block;
}

/* point */
#point {
	position: relative;
	margin: 0 auto;
	padding: 30px 0 40px 0;
	background-image: url("../img/bg/bg_point.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}
#point h2{margin: 0 auto;}
#point ul{
	position: relative;
	margin: 0 auto;
	width: 90%;
	max-width: 540px;
}
#point ul li{
	position: relative;
	margin: 0 auto;
	width: 100%;
}
#point ul li:nth-child(2){margin: -5vw auto 0 auto;}
#point ul li:nth-child(3){margin: -4vw auto 0 auto;}

/* story */
#story{
	position: relative;
	margin:0 auto;
	padding: 10px 0 0 0;
}
#story p{
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-size: 126%;
	line-height: 2em;
}
#story .more{display: none;}
#story .btn_more{
	position: relative;
	margin: 2em auto 0 auto;
	width: 60%;
	max-width: 320px;
	cursor: pointer;
	transition: all 0.3s ease-out;
}

/* chara */
#chara{
	position: relative;
	margin: 0 auto;
	padding: 40px 0 30px 0;
}
#chara .chara{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 750px;
}
#chara .chara .btn{cursor: pointer;}

/* play */
#play{
	position: relative;
	margin: 0 auto;
	padding: 40px 0 30px 0;
}
#play h2{margin: 0 auto 40px auto;}
#play ul{
	position: relative;
	margin: 0 auto 40px auto;
	width: calc(100% - 40px);
	max-width: 660px;
	gap: 0 15px;
}
#play ul li{
	position: relative;
	margin: 0;
	width: calc(33.3333% - 10px);
}
#play a{color: #ffffff;}

/* ticket */
#ticket {
	position: relative;
	margin: 0 auto;
	padding: 40px 0 20px 0;
}
/* 料金 */
#price {
	position: relative;
	margin: 0 auto;
	z-index: 100;
}
#price .priceWrap {
  position: relative;
  margin: 0 auto;
}
#price .priceWrap ul.ticketP {
	position: relative;
	width: calc(100% - 42px);
	max-width: 760px;
	margin: 0 auto;
}
#price .priceWrap ul.ticketP li{
	position: relative;
	margin: 0;
	width: calc(50% - 20px);
	cursor: pointer;
	border: solid 1px #ffffff;
}
#price .priceWrap ul.ticketP li::after{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	display: block;
	background-color: #ffffff;
}
#price .priceWrap ul.ticketP li:nth-child(1){text-align: left; clip-path: polygon(0 0, calc(100% - 30px) 0%, 100% 100%, 0% 100%);}
#price .priceWrap ul.ticketP li:nth-child(2){text-align: right; clip-path: polygon(30px 0, 100% 0, 100% 100%, 0% 100%);}
#price .priceWrap ul.ticketP li:nth-child(1)::after{clip-path: polygon(calc(100% - 29px) 0, calc(100% - 30px) 0, calc(100% - 2px) 100%, calc(100% - 1px) 100%);}
#price .priceWrap ul.ticketP li:nth-child(2)::after{clip-path: polygon(29px 0, 30px 0, 2px 100%, 1px 100%);}
#price .priceWrap ul.ticketP li p{
	position: relative;
	margin: 0 auto;
	padding: 5px 10px;
	font-size: min(86%, 4vw);
	line-height: 1em;
	background-color: rgba(255,255,255,0.3);
}
#price .priceWrap ul.ticketP li.active p{
	background-color: #ffffff;
	color: #242195;
}
#price .priceWrap .priceBox{
	position: relative;
	margin: -1px auto 0 auto;
}
#price .priceWrap .priceBox .table{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 42px);
	max-width: 760px;
	display: none;
	font-size: min(86%, 4vw);
}
#price .priceWrap .priceBox .table table{
	position: relative;
	margin: 0 auto;
	width: 100%;
	border-collapse: collapse !important;
	border-spacing:1px;
	border: solid 1px #ffffff;
}
#price .priceWrap .priceBox .table.active{display: block;}
#price .priceWrap .priceBox table th{
	position: relative;
	width: 24%;
	text-align: center;
	vertical-align: middle;
	line-height: 1.4em;
	padding: 7px 2px;
	border-left: solid 1px #ffffff;
	border-top: solid 1px #ffffff;
}
#price .priceWrap .priceBox table th span{font-size: 80%;line-height: 1.4em;display: inline-block;}
#price .priceWrap .priceBox table td{
	position: relative;
	width: 36%;
	margin: 10px;
	text-align: center;
	padding: 7px 0;
	border-left: solid 1px #ffffff;
	vertical-align: middle;
	border-top: solid 1px #ffffff;
}
#price .priceWrap .priceBox table th:first-child, #price .priceWrap .priceBox table td:first-child{border-left: none;}
#price .priceWrap .priceBox table td span{font-size: 130%;font-weight: bold;}
#price .priceWrap .priceBox table td p{font-size: 90%;line-height: 1.4em;}
#price .priceWrap .priceBox table tbody th{border-top: solid 1px #ffffff;width: 20%;bpadding: 10px 2px; height: 2em !important;}
#price .priceWrap .priceBox table td.gray{background-color: #D2D2D2 !important;padding: 0 5px;}
#price .tokutenprice{
	position: relative;
	margin: 10px auto 0 auto;
	border: solid 1px #134290;
	color: #134290;
}
#price .tokutenprice table{
	background-color: #FFEF00;
	border: solid 1px #134290 !important;
}
#price .tokutenprice table th{border-left: none !important;border-top: none !important;}
#price .tokutenprice table td{border-left: solid 1px #134290 !important;border-top:none !important;}
.ticCautionWrap{
	position: relative;
	margin: 5px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 760px;
	padding: 0;
}
.btn_ticCaution{
	position: relative;
	margin: 0 auto;
	color: #000000;
	cursor: pointer;
	text-align: center;
	padding: 7px 0;
	font-size: 90%;
	background-image: url("../img/bg/bg_yellow.png");
	background-repeat: repeat-y;
	background-position: 50% 0;
	background-size: 100% auto;
}
.ticCaution{
	position: relative;
	margin: 0 auto;
	padding: 10px 15px;
	display: none;
	outline: solid 1px #FFEF00;
	outline-offset: -1px;
}
.ticCaution h4{
	position: relative;
	margin: 0.5em auto;
	border-bottom: solid 1px #FFEF00;
	font-size: 100%;
	color: #FFEF00;
}
.ticCaution h4.margin{margin: 2em auto 0.5em auto;}
.ticCaution h5{
	position: relative;
	margin: 1.5em auto 0.5em auto;
	font-size: 80%;
	color: #FFEF00;
	padding-left: 1em;
}
.ticCaution h6{margin: 0.5em auto;font-size: 80%;color: #FFEF00;padding-left: 1em;}
.ticCaution p, .ticCaution div{
	position: relative;
	margin: 0 auto 5px auto;
	padding-left: 1em;
	font-size: 90%;
	line-height: 1.6em;
	color: #ffffff;
}
.ticCaution p a{color: #ffffff;}
.ticCaution p::before{
	position: absolute;
	top:0;
	left: 0;
	content: '・';
}
.ticCaution div{padding-left: 1em;}
#ticket #tokuten{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 760px;
	cursor: pointer;
}
#ticket .type{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 420px;
	gap: 10px;
}

/* morefun */
#morefun{
	position: relative;
	margin: 0 auto;
	padding: 40px 0 32vw 0;
	background-image: url("../img/bg/bg_more.jpg");
	background-repeat: repeat;
	background-position: 0 0;
	background-size: 100px auto;
}
#morefun .bg01{
	position: absolute;
	bottom: 0;
	right: 0;
	width: calc(50% - 10px);
	height: 100%;
	background-image: url("../img/bg/bg_more01.png");
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 84% auto;
}
#morefun .bg02, #morefun .bg03{
	position: absolute;
	left: 0;
	width: 100%;
	overflow: hidden;
}
#morefun .bg02{top:0;height: calc(19vw + 70px);}
#morefun .bg03{bottom:0;height: 32vw;}
#morefun .bg02::before, #morefun .bg02::after, #morefun .bg03::before, #morefun .bg03::after{
	position: absolute;
	width: 150%;
	height: 21px;
	background-image: url("../img/tape.png");
	background-repeat: repeat-x;
	background-position: 50% 50%;
	background-size:auto 100%;
	content: '';
	display: block;
}
#morefun .bg02::before{
	bottom: 0;
	left: -20px;
	transform: rotate(-10deg);
	transform-origin: top left;
}
#morefun .bg02::after{
	bottom: 4vw;
	right: -20px;
	transform: rotate(36deg);
	transform-origin: top right;
}
#morefun .bg03::before{
	top: 0;
	left: -20px;
	transform: rotate(11deg);
	transform-origin: top left;
}
#morefun .bg03::after{
	top:10vw;
	right: -20px;
	transform: rotate(-7deg);
	transform-origin: top right;
}
#morefun ul{
	position: relative;
	margin: 70px auto 0 auto;
	width: calc(100% - 50px);
	max-width: 960px;
	gap:8px;
}
#morefun ul li{
	position: relative;
	margin: 0;
	width: calc(50% - 4px);
}
#morefun ul li div{cursor: pointer;}

/* venue */
#venue{
	position: relative;
	margin: 0 auto;
	padding: 30px 0 10px 0;
	background-image: url("../img/bg/bg_venue.jpg");
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% auto;
	background-color: #000000;
}
#venue #release{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 680px;
	padding-bottom: 40px;
}
#venue #release dl{position: relative;}
#venue #release dl dt{
	position: relative;
	margin: 0 auto;
	padding: 7px 0;
	font-size: 90%;
	line-height: 1em;
	background-image: url("../img/bg/bg_yellow.png");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	text-align: center;
	color: #000000;
}
#venue #release dl dd{
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding: 10px 0 20px 0;
}
#venue #release dl dd p{padding-top: 10px;}
#venue #release dl dd .scraptantei{
	position: relative;
	margin: 0 auto 10px auto;
	max-width: 400px;
}
#venue #release dl dd .scraptantei p{font-size: 70%;}
#venue #release .btn{cursor: pointer;}
#venue .lead{
	position: relative;
	margin: 30px auto;
	text-align: center;
	color: #FFEF00;
	font-size: 90%;
	line-height: 1.6em;
}
#venue ul.areaList{
	position: relative;
	margin: -10px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 960px;
	z-index: 50;
	gap: 6px;
}
#venue ul li{
	position: relative;
	margin: 0;
	width: calc(33.3333% - 4px);
	outline: solid 1px #ffffff;
	outline-offset: -1px;
	background-color: rgba(0,0,0,0.5);
}
#venue ul li.yokohama{width: 100%;padding: 15px 0;}
#venue ul li.yokohama::after{
	position: absolute;
	top: -20px;
	left: -20px;
	width: 80px;
	height: 90px;
	content: '';
	background-image: url("../img/icon_yokohama.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}
#venue ul li a{
	position: relative;
	margin: 0 auto;
	padding: 12px 5px;
	display: block;
	color: #ffffff;
	text-align: center;
}
#venue ul li.pre a{pointer-events: none;}
#venue ul li .area{
	position: relative;
	margin: 0 auto;
	font-size: 130%;
	line-height: 1em;
}
#venue ul li .area span{display: block; font-size: 80%;line-height: 1.5em;}
#venue ul li:nth-child(n+2) .area span{ font-size: 70%;}
#venue ul li .kikan{
	position: relative;
	margin: 10px auto 0 auto;
	font-size: 80%;
	line-height: 1em;
}
#venue .soon{
	position: relative;
	margin: 30px auto 20px auto;
	text-align: center;
	font-size: 90%;
}

/* precaution */
#precaution {
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
}
#precaution .precautionWrap{
	position: relative;
	margin: 0 auto 18px auto;
	width: calc(100% - 40px);
	max-width: 960px;
}
#precaution .precautionWrap .ttl{
	position: relative;
	margin: 0 auto;
	color: #000000;
	cursor: pointer;
	text-align: center;
	padding: 7px 0;
	font-size: 105%;
	background-image: url("../img/bg/bg_yellow.png");
	background-repeat: repeat-y;
	background-position: 50% 0;
	background-size: 100% auto;
}
#precaution .faqWrap{
	position: relative;
	margin: 0 auto;
	padding: 10px 0 30px 0;
	display: none;
	z-index: 9;
	outline: solid 1px #FFEF00;
	outline-offset: -1px;
	color: #ffffff;
	font-size: 100%;
}
#precaution .CatTtl{
	position: relative;
	margin: 0 auto;
	padding: 8px 10px;
	width: calc(100% - 45px);
	max-width: 800px;
	text-align: center;
	line-height: 1em;
	color: #FFEF00;
}
#precaution .CatTtl.marginTop{margin: 10px auto 0 auto;}
#precaution  #limitlist .CatTtl{margin: 10px auto 0 auto;}
#precaution  #limitlist .CatTtl.margin{margin: 20px auto 10px auto;}
#precaution .faqWrap dl{position: relative;}
#precaution .faqWrap dl dd{padding: 15px 0;}
#precaution #faq.faqWrap dl dd{padding: 5px 0 0 0;}
#precaution .faqWrap dl dd p, #precaution .faqWrap dl dd div{
	position: relative;
	width: calc(100% - 45px);
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: .8em;
	text-align: left;
	color: #ffffff;
}
#precaution #cautionlist.faqWrap dl dd p, #precaution #limitlist dd p, #precaution .attWrap p{padding-left: 1.1em;}
#precaution #faq.faqWrap dl dt p, #precaution #faq.faqWrap dl dd p{padding-left: 1.5em;}
#precaution #cautionlist.faqWrap dl dt{position: relative;}
#precaution #cautionlist.faqWrap dl dt.margin{margin: 20px auto 0 auto;}
#precaution #faq.faqWrap dl dt p{
	position: relative;
	color: #FFEF00;
	text-align: left;
	margin: 0 auto;
	width: calc(100% - 45px);
	max-width: 800px;
}
#precaution #cautionlist.faqWrap dl dd p::before, #precaution #faq.faqWrap dl dt p::before, #precaution #faq.faqWrap dl dd p::before, #precaution #limitlist dd p::before, #precaution .attWrap p::before{
	position: absolute;
	content: '・';
	left: 0;
}
#precaution #faq.faqWrap dl dt p::before{content: 'Q.';}
#precaution #faq.faqWrap dl dd p::before{content: 'A.';}
#precaution .attWrap{margin: 0 auto 10px auto; width: calc(100% - 1.5em) !important;transform: translateX(.5em);}
#precaution .attWrap p::before{content: '※' !important;}
#precaution .attWrap p{font-size: 88% !important;padding-bottom: .2em !important;}

#precaution #faq.faqWrap h4{
	position: relative;
	margin: 1em auto;
	text-align: center;
	border-bottom: solid 1px #ffffff;
	width: calc(100% - 30px);
	max-width: 840px;
}
#precaution #limitlist .lead{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 800px;
	color: #ffffff;
}
#precaution  #limitlist dl{margin: 0 auto;width: calc(100% - 20px);}
#precaution dl a{color: #ffffff !important;}

/* banner */
#banner  {
	position: relative;
	margin: 0 auto;
	padding: 0 0 30px 0;
}
#banner::before{
	position: absolute;
	bottom:0;
	left: 0;
	width: 100%;
	height: calc(100% - 80px);
	content: '';
	display: block;
	background-color: #ffffff;
}
#banner ul.aboutgame{
	position: relative;
	margin:0 auto;
	width: 80%;
	max-width: 560px;
	gap: 0 16px;
}
#banner ul.aboutgame li{
	position: relative;
	margin:0;
	width: calc(50% - 8px);
}
#banner ul.banner{
	position: relative;
	margin: 20px auto 0 auto;
	width: 80%;
	max-width: 560px;
	gap: 15px 6px;
}
#banner ul.banner li{
	position: relative;
	margin:0;
}
#banner ul.banner li.movieBnr{width: 100%;}
#banner ul.banner li.movieBnr img{margin: 0 auto;max-width: 150px;}
#banner ul.banner li.game01{width: calc(48.5% - 12px);}
#banner ul.banner li.game02{width: 51.5%;}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	h2{margin: 0 auto 50px auto;}
	
	#cm{padding-bottom: 50px;}
	#cm .movieWrap{transform: translateY(0);}

	/* about */
	#about{
		margin: 0 auto;
		background-image: url("../img/bg/bg_about.jpg");
		background-size: cover;
		padding: 50px 0;
	}
	#about .text{
		padding:20px 0;
		width: 50%;
	}

	/* point */
	#point {
		padding: 70px 0 40px 0;
		background-position: 50% 50%;
	}
	#point h2{margin: 0 auto -10px  auto;}
	#point ul{max-width: 780px;}
	#point ul li{
		margin: 0;
		width: 70%;
	}
	#point ul li:nth-child(2){margin: -20px 0 0 auto;}
	#point ul li:nth-child(3){margin: -20px 0 0 5vw;}

	/* story */
	#story{padding: 70px 0 0 0;}
	#story .btn_more{max-width: 280px;}

	/* chara */
	#chara{padding: 70px 0 30px 0;}

	/* play */
	#play{padding: 70px 0 30px 0;}
	#play h2{margin: 0 auto 40px auto;}
	#play ul{
		margin: 0 auto 50px auto;
		gap: 0 30px;
	}
	#play ul li{width: calc(33.3333% - 20px);}

	/* ticket */
	#ticket {padding: 70px 0 50px 0;}
	/* 料金 */
	#price .priceWrap .priceBox table td{
		font-size: 80%;
		line-height: 1.6em;
	}
	#price .priceWrap .priceBox table td span{font-size: 160%;}
	#price .tokutenprice{margin: 20px auto 0 auto;}

	.ticCautionWrap{margin: 15px auto 0 auto;}
	.btn_ticCaution{padding: 10px 0;}
	.ticCaution{padding: 10px 25px 25px 25px;}
	#ticket #tokuten{margin: 20px auto 0 auto;}
	#ticket .type{
		margin: 40px auto 0 auto;
		max-width: 480px;
		gap: 10px;
	}
	#ticket .type li{
		position: relative;
		margin: 0;
		width: 100%;
		cursor: pointer;
	}

	/* morefun */
	#morefun{padding: 40px 0 min(12vw, 130px) 0;}
	#morefun .bg01{
		width: calc(40% - 50px);
		background-size: min(70%, 240px) auto;
	}
	
	#morefun .bg02::before, #morefun .bg02::after, #morefun .bg03::before, #morefun .bg03::after{height: 38px;}
	#morefun .bg03::before{
		top: 100%;
		transform: rotate(-5deg);
		transform-origin: bottom left;
	}
	#morefun .bg03::after{
		top: 100%;
		transform: rotate(7deg);
		transform-origin: bottom right;
	}
	#morefun ul{
		margin: 70px auto 0 auto;
		width: calc(100% - 50px);
		gap:8px;
		justify-content: flex-start;
	}
	#morefun ul li{width: calc(33.333% - 6px);}

	/* venue */
	#venue{
		padding: 70px 0 50px 0;
		background-position: 50% 100%;
		background-size: 100% auto;
	}
	#venue #release{padding-bottom: 70px;}
	#venue #release dl dt{padding: 8px 0;}
	#venue #release dl dd{padding: 20px 0 40px 0;}

	#venue ul.areaList{margin: 0 auto;}
	#venue ul li.yokohama::after{
		top: -30px;
		left: -20px;
		width: 120px;
		height: 130px;
	}
	#venue ul li .kikan{
		line-height: 1em;
	}
	#venue ul li:nth-child(n+2) .area span{ font-size: 68%;}

	/* precaution */
	#precaution {padding: 50px 0;}
	#precaution .precautionWrap .ttl{
		padding: 10px 0;
		font-size: 100%;
	}
	#precaution .faqWrap{padding: 40px 0 30px 0;}
	#precaution .CatTtl.marginTop{margin: 30px auto 0 auto;}
	#precaution  #limitlist .CatTtl.margin{margin: 30px auto 10px auto;}

	/* banner */
	#banner  {padding: 0 0 50px 0;}
	#banner ul.banner li.movieBnr img{max-width: 250px;}
	#banner ul.banner li.game01{width: calc(47.5% - 12px);}
	#banner ul.banner li.game02{width: 52.5%;}
}