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

.closedTxt{
	position: relative;
	margin: 0 auto;
	padding: 10px;
	background-color: #ffffff;
	color: #A10002;
	text-align: center;
	font-weight: 700;
}

/* about */
#about{
	position: relative;
	margin: 0 auto;
	padding: 15px 0;
	background-color: #333333;
	color: #ffffff;
	text-align: center;
}

/* catch */
#catch{
	position: relative;
	background-image: url("../img/bg_catch01.png"), url("../img/bg_catch02.png");
	background-repeat: repeat-x, repeat-x;
	background-position: 50% 0, 50% 100%;
	background-size:  auto 23px, auto 44px;
}
#catch::before, #catch::after{
	position: absolute;
	top:23px;
	width: 45px;
	height: calc(100% - 25px);
	content: '';
	display: block;
	background-repeat: no-repeat;
	background-size:  auto 100%;
}
#catch::before{
	left: 0;
	background-image: url("../img/bg_catch03.png");
	background-position: 100% 0;
}
#catch::after{
	right: 0;
	background-image: url("../img/bg_catch03-1.png");
	background-position: 0 0;
}
#catch .catchTxt{
	position: relative;
	margin: 0 auto;
	padding: 58px 0 55px 0;
	z-index: -1;
}
#catch .catchTxt::before{
	position: absolute;
	top:23px;
	left: 0;
	width: 100%;
	height: 20px;
	content: '';
	display: block;
	background: -moz-linear-gradient(bottom, rgba(205,205,205,0) 0%, rgba(205,205,205,1) 100%);
	background: -webkit-linear-gradient(bottom, rgba(205,205,205,0) 0%, rgba(205,205,205,1) 100%);
	background: linear-gradient(to top, rgba(205,205,205,0) 0%, rgba(205,205,205,1) 100%);
}
#catch .catchTxt img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	max-width: 520px;
}

/* photo */
#photo{
	position: relative;
	padding: 30px 0 10px 0;
	background-color: #e1e1e1;
	z-index: 4;
}
#photo::after{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	content: '';
	background-image: url("../img/spot.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
#photo .photoWrap{
	position: relative;
	margin: 0 auto ;
}
#photo .slick-slide{margin: 0 15px; background-color: transparent;}

/* バナー */
#banner{
	position: relative;
	margin: 0 auto;
	padding: 53px 0 10px 0;
	background-color: #333333;
	background-image: url("../img/bg_catch01.png");
	background-repeat: repeat-x;
	background-position: 50% 0;
	background-size:  auto 23px;
}
#banner ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	max-width: 960px;
}
#banner ul li{
	position: relative;
	margin: 0 auto 20px auto;
	width: 100%;
	max-width: 440px;
}

/* イベント詳細 */
#event{
	position: relative;
	margin: 0 auto;
	padding: 53px 0 15px 0;
	background-image: url("../img/bg_catch01.png"), url("../img/bg_brown.png");
	background-repeat: repeat-x, repeat;
	background-position: 50% 0, 50% 0;
	background-size:  auto 23px, auto 50px;
}
#event ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 1000px;
	padding: 0;
}
#event ul li{
	position: relative;
	padding: 0;
	margin: 0 auto 40px auto;
	width: 100%;
	max-width: 400px;
}
#event ul li .pointImg{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 280px;
	z-index: 10;
}
#event ul li .pointTxt{
	position: relative;
	margin: -40px auto 0 auto;
	padding: 50px 30px 30px 30px;
	background-color: #ffffff;
	max-width: 350px;
	box-shadow: -6px 9px 16px -6px rgba(0,0,0,0.6);
}
#event ul li .ttl{
	font-weight: 900;
	font-size: .18rem;
	color: #fcff07;
	border-bottom: solid 1px #fcff07;
	text-align: center;
	padding-bottom: 5px;
}

/* プレイ形式 */
#play{
	position: relative;
	margin:  0 auto;
	padding: 40px 0;
}
#play ul{
	position: relative;
	margin:0 auto;
	width: calc(100% - 30px);
	max-width: 550px;
}
#play ul li{
	position: relative;
	padding: 0;
	margin: 0 5px 25px 5px;
	width: calc(25% - 10px);
	
}
#play ul li p{
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-size: .15rem;
	line-height: 1.6em;
}
#play ul li p span{
	font-weight: 900;
	display: block;
	font-size: .13rem;
	padding-top: 5px;
}
#play ul li:nth-child(1) p span{color: #770932;}
#play ul li:nth-child(2) p span{color: #094777;}
#play ul li:nth-child(3) p span{color: #0d5006;}
#play ul li:nth-child(4) p span{color: #672966;}

/* CM */
#cm{
	position: relative;
	margin: 0 auto;
	padding: 0;
}
#cm::after{
	position: absolute;
	top:0;
	left: -50%;
	width: 200%;
	height: calc(100% + 40px);
	display: block;
	content: '';
	background-color: #f0f0f0;
	transform: rotate(15deg);
	z-index: -1;
}

/* ストーリー */
#story{
	position: relative;
	margin: 0 auto;
	padding:40px 0 180px 0;
	background-image: url("../img/bg_story.png");
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size:180% auto;
	text-align: center;
}
#story p{
	position: relative;
	margin:20px auto 0 auto;
	padding: 0;
	line-height: 1.8em;
	width: calc(100% - 30px);
	text-shadow: -1px -1px 4px #ffffff, -1px 0px 4px #ffffff, -1px 1px 4px  #ffffff, 0px -1px 4px  #ffffff, 0px -1px 4px  #ffffff, 0px 1px 4px  #ffffff, 1px -1px 4px  #ffffff, 1px 0px 4px  #ffffff,  1px 1px 4px  #ffffff;
}
#story .moreStory{
	position: relative;
	margin: 0 auto 30px auto;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
}
#story .moreStory.disp{height: auto;}
#story .moreBtn{padding: 2px 3em;cursor: pointer;}
#story .moreBtn.disp::after{transform: rotate(-180deg);}

/* キャラクター */
#charactor{
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
	background-image:url("../img/bg_sky.png");
	background-repeat: repeat;
	background-position: 50% 0;
	background-size:  auto 50px;
}
#charactor .contetsWrap{width: 100%;}
#charactor .chara{
	position: relative;
	margin:10px auto 0 auto;
	padding: 0;
	width: calc(100% - 40px);
}
#charactor .chara .slick-slide{margin: 0 !important;background-color: transparent;}
#charactor .chara .slick-slide div{
    position: relative;
    margin: 0 0 0 auto;
	width: calc(100% - 30px);
	max-width: 420px;
}
#charactor .chara .slick-dots{margin: 30px auto 0 auto; text-align: center;padding: 0;}
#charactor .chara .slick-dots li{ width: 25%;margin: 0;height: auto !important;}
#charactor .chara .slick-dotted.slick-slider{margin-bottom: 0;}
#apDotsC{
	position: relative;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
    width: 100%;
}
#charactor .slick-disabled{display: none !important;}


/* 参加方法 */
#howto{
	position: relative;
	margin: 0 auto;
	padding: 53px 0 15px 0;
	background-image: url("../img/bg_catch01.png"), url("../img/bg_blue.png");
	background-repeat: repeat-x, repeat;
	background-position: 50% 0, 50% 0;
	background-size:  auto 23px, auto 177.5px;
}
#howto ul{
	position: relative;
	margin: 0 0 0 -10px;
	width: calc(100% + 10px);
	max-width: 1200px;
	text-align: center;
}
#howto ul li{position: relative;margin: 0 30px 0 0;}
#howto ul li .howtoImg{
	position: relative;
	width: 120px;
	margin: 0;
}
#howto ul li .howtoTxt{
	position: relative;
	width: calc(100% - 130px);
	margin: 0 0 0 10px;
	color:#ffffff;
	text-align: left;
}
#howto ul li .howtoTxt .ttl{
	position: relative;
	margin: 0 0 10px 0;
	padding-bottom: 5px;
	color:#e5e745;
	font-size: .16rem;
	font-weight: 700;
	border-bottom: solid 1px;
}
#howto .howtoCaution{
	position: relative;
	margin: 0 auto;
}
#howto .howtoCaution p{
	position: relative;
	padding-left: 1.2em;
	padding-bottom: 5px;
}
#howto .howtoCaution p::before{
	position: absolute;
	top:0;
	left: 0;
	content: '※';
}
#arrowsH{
	position: absolute;
	display: block;
	top: 40%;
	left: 20px;
	text-align: center;
	width: calc(100% - 40px);
	height: 50px;
}
#howto .slide-arrow{
    position: absolute;
	top:0;
	display: block;
	width: 50px;
	height: 50px;
}
#howto .prev-arrow{left: 0;transform: rotate(180deg);}
#howto .next-arrow{right: 0;}
#howto .slick-disabled{display: none !important;}
#howto ul li .button{padding: 6px 2em;margin: 20px auto 0 auto;}

/* 口コミ */
.review{
	position: relative;
	margin: 30px auto 20px auto;
	width: calc(100% - 40px);
	max-width: 420px;
}
#review ul{
	position: relative;
	margin: 0 auto;
	transform: translateX(-5px);
	padding-bottom: 30px;
	width: calc(100% - 30px);
	max-width: 800px;
}
#review ul li{
	position: relative;
	margin: 0 0 30px 20px;
	width: calc(100% - 90px);
	background-color: #ffffff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: -4px 5px 16px -6px rgba(0,0,0,0.4);
}
#review ul li:nth-child(even){margin: 0 0 30px auto;}
#review ul li .clearWrap{
	position: relative;
	margin: 15px auto 0 auto;
	padding-top: 10px;
	font-size: .13rem;
	text-align: right;
	border-top: solid 1px #CECECE;
}
#review ul li .clear{
	position: absolute;
	top:-10px;
	left: -40px;
	width:35%;
	max-width: 120px;
}
#review ul li .star{padding-left: 10px;font-size: .12rem;color: #DF382B;}

/* 販売 */
#ticket{
	position: relative;
	margin:0 auto;
	background-color: #eef2f9;
	padding: 53px 0 0 0;
	background-image: url("../img/bg_catch01.png");
	background-repeat: repeat-x;
	background-position: 50% 0;
	background-size:  auto 23px;
}
#ticket .release{
	position: relative;
	margin: 30px auto 50px auto;
}
#ticket .release ul.ticdate{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 600px;
}
#ticket .release ul.ticdate li{
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-size: .14rem;
	line-height: 1.6em;
	padding: 20px 10px;
	background-color: #ffffff;
}
#ticket .release ul.ticdate li::before{
	position: absolute;
	top: 7px;
	left: -7px;
	width: 100%;
	height: 100%;
	background-color: #7b8caf;
	display: block;
	content: '';
	z-index: -1;
}
#ticket .release ul.ticdate li h4{
	position: relative;
	margin: 0 auto 20px auto;
	background-color: #0940bb;
	color: #ffffff;
	font-weight: 900;
	width: calc(100% - 10px);
}
#ticket .release ul li .ttlS{
	position: relative;
	margin: 0 auto 10px auto;
	color: #0940bb;
	font-weight: 900;
	font-size: .15rem;
}
#ticket .release ul.ticdate li p span{color: #0940bb;display: block;padding-bottom: 5px;}
#ticket .release .scraptantei{
	position: relative;
	margin: 10px auto 0 auto;
	font-size: .13rem;
}
#ticket .release .scraptantei img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 320px;
}

/* 料金 */
#ticket .price{
	position: relative;
	margin: 0 auto;
	padding: 0 0 40px 0;
}
#ticket .price ul {
	position: relative;
	width: 70%;
	max-width: 500px;
	margin: 40px auto 0 auto;
}
#ticket .price ul li{
	position: relative;
	margin: 0;
	width: calc(50% - 15px);
	border: solid 1px #002a89;
	color: #002a89;
	font-weight: 800;
	cursor: pointer;
}
#ticket .price ul li.active{background-color: #002a89;color: #ffffff;padding: 2px;}
#ticket .price ul li.active::before{opacity: 0;}
#ticket .price ul li.active::after{
	position: absolute;
	bottom: -.8em;
	left: 0;
	content: '\025bc';
	display: block;
	width: 100%;
	height: 1em;
	color:  #002a89;
	line-height: 1em;
	text-align: center;
}
#ticket .price ul li p{
	position: relative;
	padding: 5px 0;
	text-align: center;
	z-index: 12;
}
#ticket .priceBox{
	position: relative;
	margin: 0 auto;
}
#ticket .priceBox .caution{
	position: relative;
	margin: 0 auto;
	font-weight: 700;
	font-size: .12rem;
}
#ticket .priceBox .table{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 40px);
	display: none;
}
#ticket .priceBox .table table{
	position: relative;
	margin: 0 auto;
	border-collapse: collapse !important;
	border-spacing:1px;
	border: solid 1px #18305a;
}
#ticket .priceBox .table.active{display: block;}
#ticket .priceBox table th{
	width: 20%;
	text-align: center;
	vertical-align: middle;
	line-height: 1.4em;
	padding: 5px;
	font-size: .13rem;
	border-right: solid 1px #18305a;
	background-color: #0940bb;
	color: #ffffff;
}
#ticket .priceBox table td{
	width: 25%;
	margin: 10px;
	text-align: center;
	padding: 5px 0;
	font-size: .13rem;
	border-right: solid 1px #18305a;
	vertical-align: middle;
	background-color: #ffffff;
}
#ticket .priceBox table td span{font-size: .18rem;font-weight: 800;}
#ticket .priceBox table td p{font-size: .12rem;line-height: 1.4em;}
#ticket .priceBox table tbody tr:nth-child(even) td{background-color: #f4f5f8;}
#ticket .priceBox table tbody th{background-color: #cee6ff;padding: 2px 3px;color: #333333;}
#ticket .priceBox table tbody tr:nth-child(even) th{background-color: #c2d9f6;}
#ticket .price .u22 {
	position: relative;
	margin: 30px auto 0 auto;
	padding: 5px 20px 20px 20px;
	border: solid 1px #002a89;
	width: calc(100% - 80px);
	max-width: 600px;
	background-color: #ffffff;
}
#ticket .price .u22 .ttl{
	position: relative;
	margin: 0 auto 15px auto;
	width: calc(100% - 140px);
	max-width: 130px;
}
#ticket .repeatCaution{
	position: relative;
	margin: 10px auto 30px auto;
	width: calc(100% - 40px);
	max-width: 740px;
	text-align: left;
	font-size: .12rem;
}
#ticket .repeatCaution p{
	position: relative;
	padding-left: 1.2em;
	line-height: 1.4em;
}
#ticket .repeatCaution p::before{
	position: absolute;
	top:0;
	left: 0;
	content: '※';
}
#ticket .ticCaution{
	position: relative;
	text-align: center;
}
#ticket .price .btn_ticcaution{
	position: relative;
	margin: 0 auto;
	font-size: .16rem;
	z-index: 1;
	cursor: pointer;
}
#ticket .price .btn_ticcaution.disp::after{transform: rotate(-180deg);}
#ticket .tokutenCaution{
	position: relative;
	margin: 0 auto;
	font-size: .13rem;
	line-height: 1.6em;
	width: calc(100% - 80px);
	max-width: 620px;
	padding: 0 20px;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
}
#ticket .tokutenCaution.disp{height: auto;padding: 30px 20px 20px 20px;border: solid 1px #002a89;margin: -20px auto 0 auto;}
#ticket .tokutenCaution p{position: relative;padding-left: 1.2em;padding-top: 5px;text-align: left;}
#ticket .tokutenCaution p::before{
	position: absolute;
	content: '※';
	left: 0;
}

/* schedule */
#schedule{
    position: relative;
    margin: 0 auto;
	padding: 73px 0 15px 0;
	background-image: url("../img/bg_catch01.png"), url("../img/bg_dblue.png");
	background-repeat: repeat-x, repeat;
	background-position: 50% 0, 50% 0;
	background-size:  auto 23px, auto 177.5px;
}
#schedule ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 960px;
}
#schedule ul li{
	position: relative;
	margin: 0 auto 20px auto;
	background-color: #ffffff;
	padding:0;
}
#schedule ul li.bdg::after{
	position: absolute;
	top:-18px;
	right:-20px;
	background-color: #e1f81e;
	display: block;
	content: '';
	width: 200px;
	height: 30px;
	background-image: url("../img/bg_sche.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:  auto 17px;
}
#schedule ul li.bdg::before{
	position: absolute;
	top:-15px;
	right:-17px;
	width: 200px;
	height: 30px;
	background-color: #2D333C;
	display: block;
	content: '';
	z-index: -1;
}
#schedule ul li.closed{margin: 30px auto 20px auto !important;}
#schedule ul li.closed::after{
	position: absolute;
	top:-18px;
	right:-20px;
	background-color: #62cad0;
	display: block;
	content: '';
	width: 200px;
	height: 30px;
	background-image: url("../img/bg_sche01.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:  auto 17px;
	z-index: 3;
}
#schedule ul li.closed::before{
	position: absolute;
	top:-15px;
	right:-17px;
	width: 200px;
	height: 30px;
	background-color: #2D333C;
	display: block;
	content: '';
	z-index: 2;
}
#schedule ul li.closed .closedW{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(35,42,47,0.80);
	z-index: 1;
}
#schedule ul li .areaWrap{
	position: relative;
	margin: 0 auto;
	padding: 0 0 15px 0;
	text-align: center;
}
#schedule ul li .area{
	position: relative;
	margin: 0 auto;
	padding: 15px 0 0 0;
	width: calc(100% - 30px);
}
#schedule ul li .areaImg{
	position: relative;
	margin: 0;
	width: 55px;
}
#schedule ul li .area p{
	position: relative;
	margin: 0;
	width: calc(100% - 65px);
	font-weight: 700;
	font-size: .18rem;
	text-align: left;
}
#schedule ul li.soon .area p{text-align: center;font-size: .20rem;}
#schedule ul li .kikan{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	padding: 0;
}
#schedule ul li .kikan .ttl {
	position: relative;
	margin: 10px auto;
}
#schedule ul li .kikan .ttl::before{
	position: absolute;
	top:50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 1px;
	background-color: #333333;
	content: '';
	display: block;
}
#schedule ul li .kikan .ttl span{
	position: relative;
	background-color: #333333;
	color: #ffffff;
	line-height: 1em;
	padding: 2px 4px;
	border: solid 5px #ffffff;
}

#schedule ul li .detail{
	position: relative;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all .5s ease-out;
}
#schedule ul li .detail.disp{height: auto;opacity: 1;padding: 0 0 15px 0;margin: 0 auto;}
#schedule ul li .ttlS{
	position: relative;
	margin: 30px auto 10px auto;
	background-color: #333333;
	color: #ffffff;
	line-height: 1em;
	padding: 4px 0;
	font-size: .15rem;
	width: calc(100% - 30px);
}
#schedule ul li ul.rTicket{width: 100%;}
#schedule ul li ul.rTicket li{margin: 0 auto 25px auto;}
#schedule ul li .rTicket .ttlBnr{font-size: .13rem;}
#schedule ul li ul.rTicket p span{color: #002a89;display: block;padding-bottom: 5px;}
#schedule ul li .rTicket .scraptantei {
	position: relative;
	margin: 20px auto 0 auto;
}
#schedule ul li .rTicket .scraptantei img{width: calc(100% - 60px);max-width: 320px;margin: 5px auto 0 auto;}
#schedule ul li .rTicket .ttl{
	color: #002a89;
	font-weight: 700;
	font-size: .14rem;
}
#schedule ul li .shop{
	position: relative;
	margin: 50px auto 0 auto;
}
#schedule ul li .button{
	margin: 20px auto 0 auto;
	width: calc(100% - 30px);
	padding: 6px 0;
	cursor: pointer;
}
#schedule ul li .btn_sAccess.accessClose.button{border: solid 1px #6f798f; background-color: #6f798f;color: #ffffff !important;}
#schedule ul li .btn_sAccess.accessClose.button::after{background-image: url("../img/arrow02.png");transform: rotate(-180deg);}
#schedule ul li .btn_sAccess.accessClose.button:hover{background-color: #ffffff;color: #6f798f !important;}
#schedule ul li .btn_sAccess.accessClose.button:hover::after{background-image: url("../img/arrow.png");}
/* チケットカレンダー */
.ticAPI{position: relative;margin: 0 auto;padding: 0;}
.ticAPI iframe{position: relative;margin: 0; padding: 0; width: 100%; height: 450px;}
#ticket_api{margin: 0;padding: 0;color: #333333;width: 100%; background-color: #002a89;}
.ticketWrap{ margin: 0 auto; background-color: transparent !important;  padding:20px 0 0 0; font-size: .12rem !important; }
.ticketWrap .swiper-wrapper{padding: 0;}
.ticketWrap .naviBox {margin:  0 53px 0 53px;}
.ticketWrap .naviBox .prevBtn{top: 20px;left: 0; background-color: #ffffff; opacity: 1;}
.ticketWrap .naviBox .nextBtn{top: 20px;right: 0; background-color: #ffffff; opacity: 1;}
.ticketWrap .naviBox .prevBtn:hover, .ticketWrap .naviBox .nextBtn:hover{opacity: 1;}
.ticketWrap .naviBox ul li{margin: 0 1px !important;}
.ticketWrap .naviBox ul li .scheduleBox{color:#333333;}
.ticketWrap .naviBox ul li.cr .scheduleBox {background: #efde86; color:#333333 !important;}
.ticketWrap .naviBox ul li.cr .scheduleBox span span{color:#333333 !important;}
.ticketWrap .detailsWrap {padding-top: 20px;}
.ticketWrap .detailsBox .tit {background-color: #b4cedf;font-size: .14rem !important;color:#000000 !important;}
.ticketWrap .detailsBox .tit p{margin: 0 !important;}
.ticketWrap .detailsBox .tit01 {font-size: .18rem !important;}
.ticketWrap .detailsBox .details h4 {margin: 30px 0; color:#333333 !important;border-bottom: 2px solid #333333; background-image: none;font-size: .13rem !important;text-align: center;font-weight: 700;}
.ticketWrap .detailsBox .details a.scrap {color: #002a89; font-size: .12rem;font-weight: normal;}
.ticketWrap .detailsBox .details a.scrap:after {border-top: solid 1px #002a89;border-right: solid 1px #002a89; width: 5px; height: 5px;margin: -3px 0 0 0px;}
.ticketWrap .detailsBox .details ul li {margin-bottom: 10px !important;margin-right: 10px !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 .spTime{
	position: relative;
	margin: 0 auto;
	color: #ffffff;
	background-color: #3c051b;
	padding: 35px 10px;
	width: calc(100% - 30px);
	border-radius: 10px;
	max-width: 620px;
}
#schedule .spTimeWrap{
	position: relative;
	margin: 0 auto;
	padding: 10px 20px;
	width: calc(100% - 40px);
	max-width: 600px;
	text-align: center;
	background-image:url("../img/bg_sp02.png");
	background-repeat: repeat-y;
	background-position: 50% 0;
	background-size:  100% auto;
}
#schedule .spTimeWrap::before, #schedule .spTimeWrap::after{
	position: absolute;
	left: 0;
	width: 100%;
	height: 22px;
	content: '';
	display: block;
	background-image:url("../img/bg_sp01.png");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size:  100% auto;
}
#schedule .spTimeWrap::before{top:-22px;}
#schedule .spTimeWrap::after{
	bottom:-22px;
	transform: rotate(180deg);
}
#schedule .spTimeWrap p{
	position: relative;
	margin: 0 auto;
	padding-top: 10px;
}
#schedule .spTimeWrap .ttl{
	margin: 0 auto 15px auto;
	padding-bottom: 30px;
	background-image:url("../img/bar.png");
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size:  auto 9px;
	font-weight:700;
	font-size: .15rem;
}
#schedule .spTimeWrap .button{
	width: auto;
	margin-top: 30px;
	padding: 6px 3em;
	font-size: .15rem;
}

/* グッズ */
#goods{
	position: relative;
	margin: 0 auto;
	padding: 58px 0 55px 0;
	background-image: url("../img/bg_catch01.png"), url("../img/bg_catch02.png");
	background-repeat: repeat-x, repeat-x;
	background-position: 50% 0, 50% 100%;
	background-size:  auto 23px, auto 44px;
}
#goods ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 1200px;
}
#goods ul li{
	position: relative;
	margin: 0 auto 50px auto;
	width: 100%;
	max-width: 360px;
}
#goods ul li .goodsImg{
	position: relative;
	margin: 0;
	width: 70%;
	min-width: 240px;
	max-width: 380px;
	z-index: 2;
}
#goods ul li .goodsTxt{
	position: relative;
	margin: -25px 0 0 auto;
	width: 68%;
	max-width: 480px;
	background-color: #ffffff;
	border: solid 1px #e5e5e5;
	padding: 35px 20px 20px 20px;
	box-shadow: -2px 3px 19px -8px rgba(0,0,0,0.6);
	cursor: pointer;
}
#goods ul li .goodsTxt .name{
	position: relative;
	margin: 0 auto;
	max-width: 340px;
}
#goods ul li .goodsTxt .spec{
	position: relative;
	margin: 20px auto;
	font-size: .13rem;
}
#goods ul li .goodsTxt .txt .caution{font-size: .13rem;}
#goods ul li.soon{
	margin: 0 auto;
	width: calc(100% - 100px);
	max-width: 380px;
}
#goods p.caution{
	position: relative;
	margin: 0 auto;
	transform: translateY(-20px);
	width: calc(100% - 40px);
	text-align: center;
}

/* covid19 */
#covid19{
	position: relative;
	margin: 0 auto;
	padding: 15px 0;
	background-color: #333333;
	color: #ffffff;
	text-align: center;
}
#covid19 a:link, #covid19 a:visited{color: #ffffff;}

/* FAQ */
#precautions{
	position: relative;
	margin: 0 auto;
	padding: 10px 0 40px 0;
	text-align: center;
}
#precautions .cautionWrap{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 960px;
}
#precautions .cautionWrap::before{
	position: absolute;
	top:10px;
	left: -10px;
	width: 100%;
	height: 100%;
	display: block;
	content: '';
}
#precautions .cautionWrap.cautionlist::before{background-color:#002a89;}
#precautions .cautionWrap.faqlist::before{background-color:#5b0427;}
#precautions .cautionWrap.limitlist::before{background-color: #84662f;}
#precautions .cautionWrap.cautionlist{border: solid 1px #002a89;}
#precautions .cautionWrap.faqlist{border: solid 1px #5b0427;}
#precautions .cautionWrap.limitlist{border: solid 1px #84662f;}
#precautions .cautionWrap .ttl{
	position: relative;
	margin: 0 auto;
	padding: 10px 0;
	font-size: .18rem;
	font-weight: 900;
	background-color: #ffffff;
	z-index: 10;
	cursor: pointer;
}
#precautions .cautionWrap.cautionlist .ttl{color: #002a89;}
#precautions .cautionWrap.faqlist .ttl{color: #5b0427;}
#precautions .cautionWrap.limitlist .ttl{color: #84662f;}
#precautions .ttl::after{
	position: absolute;
	top:50%;
	right: 10px;
	width: 25px;
	height: 25px;
	content: '';
	display: block;
	background-image: url("../img/arrow02.png");
	background-repeat: no-repeat;
	background-size: 12px auto;
	background-position: 50% 50%;
	transition: all .3s ease-out;
	transform: translateY(-50%);
}
#precautions .cautionlist .ttl::after{background-color: #002a89;}
#precautions .faqlist .ttl::after{background-color: #5b0427;}
#precautions .limitlist .ttl::after{background-color: #84662f;}
#precautions .ttl.disp::after{transform: translateY(-50%) rotate(-180deg);}
#precautions .faqWrap{
	position: relative;
	margin: 0 auto;
	padding: 0 10px;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
	z-index: 9;
	background-color: #ffffff;
}

#precautions .faqWrap.disp{height: auto !important;padding: 20px 10px; margin: 0 auto; }
#precautions .faqWrap dl{position: relative;}
#precautions .faqWrap dl dt{
	font-weight: 900;
	font-size: .16rem;
}
#precautions .cautionlist .faqWrap dl dt{
	background-color: #002a89;
	color: #ffffff;
	line-height: 1em;
	padding: 4px 0;
}
#precautions .faqWrap dl dd{padding: 15px 0;}
#precautions #faq.faqWrap dl dd{padding: 5px 0 0 0;}
#precautions .faqWrap dl dd p{
	position: relative;
	padding-bottom: .8em;
	text-align: left;
	line-height: 1.5em;
}
#precautions #cautionlist.faqWrap dl dd p, #precautions #faq.faqWrap dl dt p, #precautions #faq.faqWrap dl dd p, #precautions #limitlist dd p{padding-left: 1.2em;}
#precautions #faq.faqWrap dl dt p{
	color: #5b0427;
	font-weight: 700;
	text-align: left;
	font-size: .14rem;
	line-height: 1.6em;
}
#precautions #cautionlist.faqWrap dl dd p::before, #precautions #faq.faqWrap dl dt p::before, #precautions #faq.faqWrap dl dd p::before, #precautions #limitlist dd p::before{
	position: absolute;
	content: '・';
	left: 0;
}
#precautions #faq.faqWrap dl dt p::before{content: 'Q.';}
#precautions #faq.faqWrap dl dd p::before{content: 'A.';}
#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(36% - 22px);
	padding: 15px 10px;
	background-color: #ede5d2;
	border-bottom: solid 1px #84662f;
	border-left: solid 1px #84662f;
	font-weight: 500;
}
#precautions #limitlist dd{
	font-size: .12rem;
	width: calc(64% - 32px);
	padding: 15px;
	border-bottom: solid 1px #84662f;
	border-right: solid 1px #84662f;
	background-color: #ffffff;
	text-align: left;
}
#precautions #limitlist dd .large{font-size: .15rem;padding-bottom: 5px;}
#precautions #limitlist dt.border, #precautions #limitlist dd.border{border-top: solid 1px #84662f;}


/* ニュース */
#news{
    position: relative;
	margin: 0 auto;
	padding: 40px 0;
	background-image: url("../img/bg_brown.png");
	background-repeat: repeat;
	background-position: 50% 0;
	background-size: auto 50px;
}
#news .newsWrap{position: relative;}
#news .newsWrap .contetsWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 720px;
	background-image: url("../img/bg_news.png");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;
}
#news .newsBox{
	position: relative;
	margin: 0 auto;
	padding: 20px 15px 20px 20px;
}
#news .newsBox ul{
	position: relative;
	margin:0 auto;
	width: 100%;
	height: 160px;
    overflow: hidden;
	z-index: 80;
}
#news .newsBox ul li{
	position: relative;
	margin:0 auto 10px auto;
    padding: 0 0 5px 0;
	border-bottom: solid 1px #adadad;
	line-height: 1.4em;
}
#news .newsBox ul li p.date{
	color: #c6a121;
	font-size: .13rem;
}

#aboutgame{
	position: relative;
	margin:  0 auto;
	padding: 20px 0 60px 0;
	background-image: url("../img/bg_catch02.png");
	background-repeat:repeat-x;
	background-position: 50% 100%;
	background-size:  auto 44px;
}
#aboutgame img{
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 380px;
}


/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* ヘッダー */
	header #keyvisual{
		background-image: url("../img/main_pc.jpg");
		padding-top:54.1666%;
	}

	.closedTxt{
		padding: 25px;
		font-size: .20rem;
	}
	
	/* about */
	#about{
		padding: 25px 0;
		font-size: .18rem;
	}

	/* catch */
	#catch{background-size:  auto 36px, auto 80px;}
	#catch::before, #catch::after{
		position: absolute;
		top:32px;
		width: calc(50% - 300px);
		height: calc(100% - 36px);
	}
	#catch::before, #catch::after{background-repeat: repeat-x;}
	#catch .catchTxt{padding: 90px 0 120px 0;}
	#catch .catchTxt::before{
		top:36px;
		height: 30px;
	}

	/* バナー */
	#banner{padding: 90px 0 0 0;background-size:  auto 36px;}
	#banner ul{width: 880px;max-width: 100%;}
	#banner ul li{
		margin: 0 5px 40px 5px;
		width: calc(50% - 10px);
	}

	/* イベント詳細 */
	#event{
		padding: 73px 0 45px 0;
		background-size:  auto 36px, auto 50px;
	}
	#event ul li{
		margin: 0 20px 40px 20px;
		width: calc(33% - 40px);
		min-width: 260px;
	}
	#event ul li .pointTxt{min-height: 110px;}

	/* プレイ形式 */
	#play{padding: 60px 0;}
	#play ul{width: 550px;}
	#play ul li{
		margin: 0 15px;
		width: calc(25% - 30px);
	}
	#play ul li p{font-size: .18rem;}
	#play ul li p span{font-size: .16rem;}


	/* CM */
	#cm::after{transform: rotate(9deg);}

	/* ストーリー */
	#story{
		padding:60px 0 220px 0;
		background-repeat: repeat-x;
		background-position: 50% 100%;
		background-size:1000px auto;
	}
	#story p{margin:40px auto 0 auto;}
	#story .moreStory{margin: 0 auto 40px auto;}
	#story .moreBtn{padding: 2px 3em;}
	
	/* キャラクター */
	#charactor{padding: 60px 0;}
	#charactor .chara{
		margin:0 auto;
		max-width: 780px;
	}
	#charactor .chara .slick-slide div{max-width: 780px;}
	#charactor .chara .slick-dots{width: 500px;}


	/* 参加方法 */
	#howto{
		padding: 73px 0 45px 0;
		background-size:  auto 36px, auto 355px;
	}
	#howto ul{
		margin: 30px auto 0 auto;
		max-width: 1200px;
	}
	#howto ul li .howtoImg{width: 70px;}
	#howto ul li .howtoTxt{width: calc(100% - 90px);}
	#howto ul li .howtoTxt .ttl{
		margin: 0 0 15px 0;
		padding-bottom: 5px;
		font-size: .18rem;
	}
	#howto ul li .button{padding: 6px 2em 6px 1em;}
	
	/* 口コミ */
	.review{margin: 70px auto 20px auto;}

	/* 販売 */
	#ticket{
		padding: 73px 0 0 0;
		background-size:  auto 36px, auto 355px;
	}
	#ticket .release{margin: 60px auto 80px auto;}
	#ticket .release ul.ticdate li{
		font-size: .16rem;
		padding: 30px 0;
	}
	#ticket .release ul.ticdate li h4{width: calc(100% - 40px);}
	#ticket .release ul li .ttlS{font-size: .18rem;}
	#ticket .release .scraptantei{
		margin: 20px auto 0 auto;
		font-size: .14rem;
	}

	/* 料金 */
	#ticket .priceBox .caution{font-size: .16rem;}
	#ticket .priceBox table th{
		padding: 15px;
		font-size: .16rem;
	}
	#ticket .priceBox table td{
		padding: 15px 0;
		font-size: .16rem;
	}
	#ticket .priceBox table td span{font-size: .24rem;}
	#ticket .priceBox table td p{font-size: .14rem;}
	#ticket .price .u22 {
		margin: 40px auto 0 auto;
		padding: 5px 30px 30px 30px;
	}
	#ticket .repeatCaution{
		margin: 10px auto 30px auto;
		font-size: .14rem;
	}
	#ticket .repeatCaution p{line-height: 1.6em;}
	#ticket .price .btn_ticcaution{font-size: .18rem;padding: 6px 6em;}
	#ticket .tokutenCaution{font-size: .16rem;}

	/* schedule */
	#schedule{
		padding: 93px 0 45px 0;
		background-size:  auto 36px, auto 355px;
	}
	#schedule ul li{margin: 0 auto 40px auto;}
	#schedule ul li.bdg::after{
		width: 280px;
		height: 40px;
		background-size:  auto 20px;
	}
	#schedule ul li.bdg::before{
		width: 280px;
		height: 40px;
	}
	#schedule ul li.closed::after{
		width: 280px;
		height: 40px;
		background-size:  auto 20px;
	}
	#schedule ul li.closed::before{
		width: 280px;
		height: 40px;
	}
	#schedule ul li .areaWrap{padding: 0 0 20px 0;}
	#schedule ul li .area{
		padding: 20px 0 0 0;
		width: calc(100% - 40px);
	}
	#schedule ul li .areaImg{width: 65px;}
	#schedule ul li .area p{
		width: calc(100% - 105px);
		transform: translateX(-65px);
		font-size: .26rem;
		text-align: center;
	}
	#schedule ul li.soon .area p{font-size: .28rem;transform: translateX(-45px);}
	#schedule ul li .kikan{width: calc(100% - 40px);}
	#schedule ul li .kikan .ttl span{
		padding: 2px 15px;
		border: solid 8px #ffffff;
	}
	#schedule ul li .detail.disp{padding: 0 0 20px 0;}
	#schedule ul li .ttlS{
		margin: 50px auto 20px auto;
		padding: 6px 0;
		font-size: .18rem;
		width: calc(100% - 40px);
	}
	#schedule ul li ul.rTicket li{margin: 0 auto 50px auto;}
	#schedule ul li .rTicket .ttlBnr{font-size: .16rem;}
	#schedule ul li .rTicket .ttl{font-size: .16rem;}
	#schedule ul li .shop{margin: 80px auto 0 auto;}
	#schedule ul li .button{
		margin: 40px auto 0 auto;
		padding: 8px 0;
		font-size: .16rem;
	}
	/* 特別公演 */
	#schedule .spTimeWrap p{
		position: relative;
		margin: 0 auto;
		padding-top: 10px;
	}
	#schedule .spTimeWrap .ttl{
		margin: 0 auto 25px auto;
		padding-bottom:40px;
		background-size:  auto 12px;
		font-size: .18rem;
	}
	#schedule .spTimeWrap .button{
		margin-top: 50px;
		padding: 6px 6em;
		font-size: .18rem;
	}


	/* グッズ */
	#goods{
		padding: 90px 0 120px 0;
		background-size:  auto 36px, auto 80px;
	}
	#goods ul li{margin: 0 10px 40px 10px;}
	#goods ul li .goodsTxt{max-width: 400px;}
	#goods ul li:nth-child(1) .goodsTxt, #goods ul li:nth-child(2) .goodsTxt, #goods ul li:nth-child(3) .goodsTxt{min-height: 390px;}
	#goods ul li:nth-child(4) .goodsTxt, #goods ul li:nth-child(5) .goodsTxt{min-height: 460px;}
	#goods ul li .goodsTxt .spec{
		position: relative;
		margin: 20px auto;
		font-size: .14rem;
	}
	#goods ul li .goodsTxt .txt .caution{font-size: .14rem;}

	/* covid19 */
	#covid19{padding: 30px 0;}

	/* FAQ */
	#precautions{padding:30px 0 80px 0;}
	#precautions .cautionWrap{margin: 40px auto 0 auto;}
	#precautions .cautionWrap .ttl{
		padding: 20px 0;
		font-size: .26rem;
	}
	#precautions .ttl::after{
		right: 20px;
		width: 35px;
		height: 35px;
		background-size: 16px auto;
	}
	#precautions .faqWrap{padding: 0 40px;}
	#precautions .faqWrap.disp{padding: 20px 40px; }
	#precautions .faqWrap dl dt{font-size: .18rem;}
	#precautions .cautionlist .faqWrap dl dt{padding: 8px 0;}
	#precautions .faqWrap dl dd{padding: 25px 0;}
	#precautions #faq.faqWrap dl dt p{font-size: .16rem;}
	#precautions #limitlist dt{font-size: .16rem;}
	#precautions #limitlist dd{
		font-size: .14rem;
		width: calc(64% - 62px);
		padding: 30px;
	}
	#precautions #limitlist dd .large{font-size: .16rem;}


	/* ニュース */
	#news{padding: 60px 0;}
	#news .newsBox{padding: 40px 30px 40px 40px;}
	#news .newsBox ul{
		height: 220px;
	}
	#news .newsBox ul li p.date{font-size: .16rem;}

	#aboutgame{
		padding: 60px 0 120px 0;
		background-size:  auto 80px;
	}

}
@media screen and (min-width:790px){#review ul li{max-width: 320px;}}
@media screen and (min-width:800px) and ( max-width:1179px) {	
	#goods ul li:nth-child(1) .goodsTxt, #goods ul li:nth-child(2) .goodsTxt{min-height: 350px;}
	#goods ul li:nth-child(3) .goodsTxt, #goods ul li:nth-child(4) .goodsTxt{min-height: 390px;}
	#goods ul li:nth-child(5) .goodsTxt{min-height: auto !important;}
}
@media screen and (min-width:641px) and ( max-width:798px) {
		#goods ul li .goodsTxt{min-height: auto !important;}
}
@media screen and (min-width:641px) and ( max-width:1020px) {
		#event ul li .pointTxt{min-height: 135px;}
}