@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/main01.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: contain;
	padding-top: 151.71875%;
	width: 100%;
}
header .badge{
	position: absolute;
	bottom: 17%;
	left: 0;
	width: 30%;
	z-index: 100;
}

/* catch */
#catch{
	position: relative;
	margin: 0 auto;
	padding: 0;
	background-image: url("../img/bg_catch01.png");
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-size: cover;
}
#catch .catchTxt{
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 640px;
}

/* CM */
#cm{
	position: relative;
	margin: 0 auto;
	background-color: #0e172e;
	background-image: url("../img/bg_cm.png");
	background-position: 0 0;
	background-repeat:repeat;
	background-size: auto auto;
}
#cm .cmBox{
	position: relative;
	margin:0 auto ;
	width: 100%;
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,1) 100%);
}
#cm .cmBox .movieWrap{
	position: relative;
	z-index: 100;
	max-width: 100%;
}
#cm .cmBox .movieWrap .thum .thumIng{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background-image: url("http://i.ytimg.com/vi/WnIM45VgOk0/mqdefault.jpg");
	background-position: 0 50%;
	background-repeat:no-repeat;
	background-size: cover;
}
#cm .cmBox .movieWrap .thum .mBtn{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/ttl_bg_cm.png");
	background-position: 0 50%;
	background-repeat:no-repeat;
	background-size: cover;
	mix-blend-mode:screen;
}
#cm .cmBox .movieWrap .thum img{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
#cm::before, #cm::after{
	position: absolute;
	left: 0;
	width: 100%;
	height: 6px;
	content: '';
	display: block;
	background-image: url("../img/barS.jpg");
	background-position: 0 0;
	background-repeat:repeat-x;
	background-size: auto 100%;
}
#cm::before{top:-6px;}
#cm::after{bottom:-6px;}

/* とは */
#about{
	position: relative;
	margin: 0 auto;
	padding-top: 6px;
}
#about h2{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	padding-top: 30px;
}
#about .aboutBg{
	position: absolute;
	top:calc(50% + 6px);
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: calc(100% - 12px);
	overflow: hidden;
}
#about .Txt{
	position: relative;
	padding: 0;
	background-color: rgba(5,26,29,0.8);
}

#about .Txt p{
	position: relative;
	margin:20px auto 0 auto;
	width: calc(100% - 30px);
	text-align: center;
	font-size: min(3.7vw, .16rem);
	paint-order: stroke;
	text-stroke: 4px #000000;
	-webkit-text-stroke: #000000 4px;
}
#about .btnAbout{
	position: relative;
	margin: 20px auto 0 auto;
	padding-bottom: 40px;
}
#about .btnAbout img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 380px;
}

/* 概要タイトル装飾 */
h2 .h2bg, h2 .h2bg-1{
	position: absolute;
	left: 0;
	height: 5px;
	width: 100%;
	display: block;
	background-image: url("../img/barS.jpg");
	background-position: 0 0;
	background-repeat:repeat-x;
	background-size: auto 100%;
}
h2 .h2bg{top:-5px;}
h2 .h2bg-1{bottom:-5px;}
#event{
	position: relative;
	margin:  0 auto;
	padding-bottom: 20px;
}
#event h2{
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
	background: rgb(50,183,182, 0.6);
	background: linear-gradient(180deg, rgba(50,183,182,0.6) 0%, rgba(53,129,165,0.6) 50%, rgba(66,83,137,0.6) 100%);
}
#event h2 img{
	position: relative;
	margin: 0 auto;
}
#event .ttl{
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
	width: 100%;
	background-image: url("../img/barS.jpg");
	background-position: 0 0;
	background-repeat:repeat-x;
	background-size: auto 5px;
	background-color: rgba(0,16,51,0.70);
}
#event .ttl img{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
}
#event p{
	position: relative;
	padding: 0;
	margin: 10px auto 50px auto;
	max-width: 520px;
}

#story{
	position: relative;
	margin:  0 auto;
}
#story h2{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 580px;
}
#story .storyWrap{position: relative;}
#story .Txt{
	position: relative;
	margin: 0 auto;
	padding: 20px 0 50px 0;
	width: 100%;
}
#story  .Txt p{
	position: relative;
	margin:  0 auto;
	padding-top: 10px;
	width: calc(100% - 20px);
	paint-order: stroke;
	text-stroke: 4px #071052;
	-webkit-text-stroke: #071052 4px;
	font-size: min(3.9vw, .16rem);
	line-height: 1.8em;
}
#story  .Txt p span{
	font-size: min(4.6vw, 130%);
	display: inline-block;
	font-weight: 700;
	font-style: italic;
	color: #60FFFB;
}
#story .moreTxt{
	position: relative;
	margin: 0 auto;
	display: none;
	text-align: center;
}
#story .btn_more{
	position: relative;
	margin: 30px auto 0 auto;
	background-color: #C80412;
	color: #ffffff;
	width: 10em;
	padding: 5px 0;
	line-height: 1em;
	text-align: center;
}
#story .btn_more span{font-style: italic;}
#story .btn_more::after{
	position: absolute;
	top: 50%;
	right: 6px;
	content: '\025bc';
	transform: translateY(-50%) scale(0.6, 0.4);
}
#story .btn_more.disp{background-color: #878787;transition: all .3s ease-out;}
#story .btn_more.disp::after{transform: translateY(-50%) scale(0.6, 0.4) rotate(-180deg);transition: all .3s ease-out;}
#story .Img{
	position: relative;
	width: 100%;
}
#story .Img img{width: 100%;}

/* キャラクター */
#chara{
	position: relative;
	margin: 0 auto;
	padding-bottom: 50px;
}
#chara h2{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 580px;
}
#chara .charaWrap{
	position: relative;
	margin: 0 auto;
}

/* experience */
#experience{
	position: relative;
	margin:  0 auto;
}
#experience h2{
	position: relative;
	margin: 0 auto;
	padding: 25px 0;
	background: rgb(50,183,182, 0.6);
	background: linear-gradient(180deg, rgba(50,183,182,0.6) 0%, rgba(53,129,165,0.6) 50%, rgba(66,83,137,0.6) 100%);
	z-index: 10;
}
#experience h2 img{
	position: relative;
	margin: 0 auto;
}
#experience .expWrap{
	position: relative;
	margin: 0 auto;
}

/* links */
#links{
	position: relative;
	margin:  0 auto;
	padding: 0 0 80px 0;
}
#links h2{
	position: relative;
	margin: 0 auto;
	padding: 25px 0;
	background: rgb(50,183,182, 0.6);
	background: linear-gradient(180deg, rgba(50,183,182,0.6) 0%, rgba(53,129,165,0.6) 50%, rgba(66,83,137,0.6) 100%);
}
#links h2 img{
	position: relative;
	margin: 0 auto;
}
#links .linksB{
	position: relative;
	margin: 40px auto 20px auto ;
	width: calc(100% - 30px);
	max-width: 840px;
}
#links .linksB ul{
	position: relative;
	margin: 0 auto;
}
#links .linksB ul li{
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 400px;
}
#links .linksB a{
	position: relative;
	margin: 0 auto;
	display: block;
	width: 100%;
}
#links .linksWrap{
	position: relative;
	width: calc(100% - 30px);
	margin: 0 auto;
	max-width: 1000px;
}
#links .linksWrap a{
	position: relative;
	margin: 0 auto;
	display: block;
}
#links .linksB .splide__arrows .splide__arrow--prev, #links .linksWrap .splide__arrows .splide__arrow--prev {left: -12px;transform: translateY(-50%) rotate(180deg);}
#links .linksB .splide__arrows .splide__arrow--next, #links .linksWrap .splide__arrows .splide__arrow--next {right: -12px;}
#links .linksB .splide__arrow, #links .linksWrap .splide__arrow {
	background: transparent;
	border-radius: 0;
	height: 25px;
	width: 25px;
	opacity: 1;
}
#links .linksB .splide__arrow:disabled , #links .linksWrap .splide__arrow:disabled {opacity: 0;}
.splide:not(.is-overflow) .splide__arrows {display: none;}

/* howto */
#howto{
	position: relative;
	margin:  0 auto;
	padding: 0 0 40px 0;
}
#howto h2{
	position: relative;
	margin: 0 auto;
	z-index: 100;
}
#howto h2 img{
	position: relative;
	margin: 0 auto;
}
#howto .howtoWrap{
	position: relative;
	width: calc(100% - 40px);
	max-width: 1000px;
	margin: 20px  auto 30px auto;
}
#howto .howtoWrap li{
	position: relative;
	margin: 0;
	padding: 20px 15px;
	background-color: rgba(255,255,255,0.9);
	border-radius: 5px;
}
#howto .howtoWrap li p{padding: 20px 0;color: #072d50;}
#howto .howtoWrap li .caution{position: relative;font-size: 80%;line-height: 1.6em;color: #072d50;margin: -10px auto 0 auto;}
#howto .howtoWrap .splide__arrows .splide__arrow--prev {left: -18px;transform: translateY(-50%) rotate(180deg);}
#howto .howtoWrap .splide__arrows .splide__arrow--next {right: -18px;}
#howto .howtoWrap .splide__arrow {
	background: transparent;
	border-radius: 0;
	height: 30px;
	width: 30px;
	opacity: 1;
}
#howto .howtoWrap .splide__arrow:disabled {opacity: 0;}
.howto .BtnArea{
	position: relative;
	font-size: .12rem;
	margin: 0 auto;
}
.howto .BtnArea .button{
	padding: 3px 0;
	margin: 0 auto 10px auto;
	font-size: .12rem !important;
	width: 100%;
	background: #265f71;
	border: solid 1px #ffffff;
	color: #ffffff;
}
.howto .BtnArea .button.green{
	background: #28b466;
	border: solid 1px #ffffff;
}
.howto .BtnArea .button:hover{background: #ffffff;color: #265f71 !important;}
.howto .BtnArea .button.green:hover{background: #ffffff;color: #428C81 !important;}
.howto .BtnArea .button::after{right: 10px;transform: translateY(-50%) scale(.8, .8);}
#howto .threearticles{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
}
#howto .threearticles img{margin: 0 auto;}
.howto .BtnArea .button.green::after{
	content: '';
	transform: translateY(-50%);
	right: 10px;
	width: 16px;
	height: 100%;
	background-image: url("../img/icon_share.png");
	background-position: 50% 50%;
	background-repeat:no-repeat;
	background-size: contain;
}
.howto .BtnArea .button.green:hover::after{background-image: url("../img/icon_share01.png");}

/* play */
#play{
	position: relative;
	margin:  0 auto;
	padding: 0 0 80px 0;
}
#play h2{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 580px;
}
#play ul{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 10px);
	gap:0 5px;
	max-width: 660px;
}
#play li{
	position: relative;
	margin: 0;
	width: calc(33% - 5px);
	max-width: 150px;
}

/* 販売 */
#ticket{
	position: relative;
	margin:0 auto;
	color: #072d50;
	padding: 0 0 80px 0;
}
#ticket h2{
	position: relative;
	margin: 0 auto;
}
#ticket h2 img{
	position: relative;
	margin: 0 auto;
}
/* 料金 */
#ticket .price{
	position: relative;
	margin: 20px auto 0 auto;
	padding: 0;
}
#ticket .price ul.ticketP {
	position: relative;
	width: calc(100% - 50px);
	max-width: 500px;
	margin: 0 auto;
}
#ticket .price ul.ticketP li{
	position: relative;
	margin: 0;
	width: calc(50% - 10px);
	color: #ffffff;
	background-color: #a6a6a6;
	border: solid 1px #ffffff;
	font-weight: 500;
	cursor: pointer;
	border-radius: 5px;
}
#ticket .price ul.ticketP li.active{background-color: #ffffff;color: #072d50;}
#ticket .price ul.ticketP li.active::before{opacity: 0;}
#ticket .price ul.ticketP li.active::after{
	position: absolute;
	bottom: -.7em;
	left: 0;
	content: '\025bc';
	display: block;
	width: 100%;
	height: 1em;
	color:  #ffffff;
	line-height: 1em;
	text-align: center;
}
#ticket .price ul.ticketP li p{
	position: relative;
	padding: 3px 0;
	text-align: center;
}
#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 20px auto;
	width: calc(100% - 30px);
	max-width: 760px;
	display: none;
}
#ticket .priceBox .table table{
	position: relative;
	margin: 10px auto 0 auto;
	table-layout: fixed;
	width: calc(100% - 2px);
	border-collapse: collapse !important;
	border-spacing:1px;
	border-top: solid 1px #ffffff;
	border-left: solid 1px #ffffff;
	border-right: solid 1px #ffffff;
}
#ticket .priceBox .table.active{display: block;}
#ticket .priceBox table th{
	position: relative;
	width: calc(55% - 4px);
	text-align: center;
	vertical-align: middle;
	line-height: 1.4em;
	padding: 5px 2px;
	font-size: 80%;
	background-color: rgba(38,95,113,0.9);
	color: #ffffff;
}
#ticket .priceBox table th.ninmu{background-color: rgba(180,144,19,0.9);}
#ticket .priceBox table th a{color: #ffffff;}
#ticket .priceBox table td{
	position: relative;
	width: 45%;
	margin: 10px;
	text-align: center;
	padding: 10px 0;
	font-size:80%;
	border-bottom: solid 1px #ffffff;
	vertical-align: middle;
	background-color: rgba(255,255,255,0.9);
	 color: #040e35;
}
#ticket .priceBox table.price02 td{border-bottom: solid 1px #b89828;}
#ticket .priceBox table td span{font-size: 150%;font-weight: 900;}
#ticket .priceBox table th p, #ticket .priceBox table td p{padding-top: 3px; font-size: 60%;line-height: 1.6em;}
#ticket .priceBox table tbody th{padding: 5px 2px; color: #ffffff;border-bottom: solid 1px #ffffff;}
#ticket .priceBox table td.borderB{border-bottom: solid 1px #ffffff;}

#ticket .ticketCaution{
	position: relative;
	margin: 10px auto 20px auto;
	width: calc(100% - 30px);
	max-width:620px;
	border-radius: 5px;
	background-color: rgba(255,255,255,0.8);
	border: solid 1px #ffffff;
}
#ticket .BtnticCaution{
	position: relative;
	margin: 0 auto;
	cursor: pointer;
}
#ticket .ticCaution{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 620px;
	padding: 0 10px;
	text-align: left;
	font-size: 84%;
	line-height: 1.5em;
	height: 0;
	overflow: hidden;
	opacity: 0;
}
#ticket .ticCaution.disp{height: auto; opacity: 1; padding: 10px ;transition: all .3s ease-out;}
#ticket .button.disp::after{transform: rotate(-180deg) translateY(50%) scale(1, 0.7);}
#ticket .ticCaution p{position: relative;margin: 3px 0 0 0; padding-left: 1.2em;}
#ticket .ticCaution p::before{
	position: absolute;
	content: '※';
	left: 0;
}
#ticket .ticCaution h3{
	position: relative;
	padding-top: 15px;
	padding-bottom: 3px;
	margin: 0 auto 8px auto;
	font-weight: 900;
	font-size: 110%;
	border-bottom: solid 1px;
}
#ticket .tokutenImg{
	position: relative;
	margin: 30px auto;
	width: calc(100% - 30px);
	max-width: 760px;
}
#ticket .selectTicket{
	position: relative;
	margin: 40px auto 0 auto;
	width: calc(100% - 30px);
	max-width: 520px;
	gap: 10px;
}
#ticket .selectTicket li{
	position: relative;
	width: 100%;
	margin: 0 ;
	max-width: 380px;
}

/* release */
#release{
	position: relative;
	margin: 0 auto;
	padding-bottom: 30px;
	text-align: center;
	color: #05163d;
}
#release h2{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 580px;
}
#release h3{
	position: relative;
	margin: 30px auto -10px auto;
	width: calc(100% - 30px);
	max-width: 570px;
	background-color: #05163d;
	color: #ffffff;
	font-weight: 700;
	padding: 6px 0;
	line-height: 1em;
}
#release .releaseWrap{
	position: relative;
	margin: 0 auto 30px auto;
	max-width: 600px;
}
#release .typeTxt{
	position: relative;
	margin:  20px auto 5px auto;
	padding: 6px 0;
	background-color: #ffffff;
	max-width: 400px;
	font-weight: 500;
	line-height: 1em;
	width: calc(100% - 30px);
}
#release .typeTxt span{font-size: 80%;}
#release .kikan{
	position: relative;
	margin: 0 auto;
	font-size: min(3.5vw, .14rem);
}
#release .bdlinks{font-size: min(3.5vw, .14rem);padding-top: 0.5em;}
#release .bdlinks span:hover{color: #1151B6;transition: all .3s ease-out;}
#release .scraptantei, #release .caution{
	position: relative;
	margin: 5px auto 0 auto;
	font-size: min(3.5vw, .14rem);
}
#release .scraptantei img{
	width: calc(100% - 80px);
	margin: 0 auto;
	max-width: 280px;
}
#release .birthday{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 480px;
}

/* schedule */
#schedule{
    position: relative;
    margin: 0 auto;
	text-align: center;
	padding-bottom: 50px;
}
#schedule h2{
	position: relative;
	margin: 0 auto;
}
#schedule h2 img{
	position: relative;
	margin: 0 auto;
}
#schedule .lead{
	position: relative;
	margin: 20px auto;
	paint-order: stroke;
	text-stroke: 4px #1d405e;
	-webkit-text-stroke: #1d405e 4px;
}
#schedule .scheduleWrap{
	position: relative;
	margin: 0 auto;
}
#schedule ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
	padding-left: 5px;
	max-width: 960px;
	gap:5px;
}
#schedule ul li{
	position: relative;
	margin: 0;
	width: calc(33.33% - 5px);
	max-width: 180px;
	background-color: rgba(255,255,255,0.8);
	border-radius: 5px;
}
#schedule ul li.soon{background-color: rgba(228,228,228,0.60);}
#schedule ul li .areaWrap{
	position: relative;
	margin: 0 auto;
	padding: 10px 0;
	display: block;
	z-index: 10;
}
#schedule ul li.end  .areaWrap{opacity: .5;}
#schedule ul li.end .closed{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(11,76,93,0.60);
	content: '';
	display: block;
	border-radius: 5px;
	z-index: 11;
}
#schedule ul li.end .closed::after{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	left: 0;
	width: 100%;
	content: '開催終了';
	display: block;
	text-align: center;
	font-size: .16rem;
	font-style: italic;
	font-weight: 900;
	text-shadow: 0px 0px 2px rgba(0,0,0,0.5), 0px 0px 5px rgba(0,0,0,0.5);
}
#schedule ul li a.areaWrap:hover{opacity: .4;}
#schedule ul li .area{
	position: relative;
	margin: 0 auto;
	padding-bottom: 6px;
	font-weight: 900;
	font-size: .17rem;
	color: #05163d;
	line-height: 1.2em;
}
#schedule ul li .area span{font-size: min(2.4vw, .12rem);}
#schedule ul li .kikan{
	position: relative;
	margin: 0 auto;
	font-size: .13rem;
	color: #3f8095;
	line-height: 1.6em;
}
#schedule ul li.soon .area{color: #797C87;}
#schedule ul li.soon .kikan{
	color: #A3A5AC;
	line-height: 3em;
	padding-bottom: .6em;
	font-style: italic;
}
#schedule .more{
	position: relative;
	margin: 0 auto;
	padding-top: 30px;
	font-size: 90%;
	font-weight: 900;
	font-style: italic;
	text-align: center;
	color: #05163d;
}

/* FAQ */
#precautions{
	position: relative;
	margin: 0 auto;
	padding-bottom: 40px;
}
#precautions .cautionWrap{
	position: relative;
	margin: 0 auto 10px auto;
	width: calc(100% - 30px);
	max-width: 960px;
	background-color: rgba(79,120,121,0.8);
	border: solid 1px #ffffff;
}
#precautions .cautionWrap .ttl{
	position: relative;
	margin: 0 auto;
	padding: 15px 0;
	z-index: 10;
	cursor: pointer;
}
#precautions .cautionWrap .ttl img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 100px);
	max-width: 400px;
}
#precautions .ttl::after{
	position: absolute;
	top:50%;
	right: 15px;
	content: '';
	display: block;
	width: 11px;
	height: 8px;
	background-image: url("../img/arrow02.png");
	background-position: 50% 50%;
	background-repeat:no-repeat;
	background-size: contain;
	transition: all .3s ease-out;
	transform: translateY(-50%);
}
#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;
}
#precautions .faqWrap a{color: #ffffff;}
#precautions .CatTtl{
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-size: .15rem;
	font-weight: 700;
	background-color: #ffffff;
	color: #05163d;
}
#precautions .CatTtl.marginTop{margin: 30px auto 15px auto;}
#precautions  #limitlist .CatTtl{margin: 30px auto 15px auto;}
#precautions  #limitlist .CatTtl.marginTop{margin: 50px auto 15px auto;}
#precautions .catTxt{
	position: relative;
	padding: 0 0 15px 0;
}
#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: .15rem;
}
#precautions .cautionlist .faqWrap dl dt{
	background-color: #ffffff;
	color: #0e0d20;
	line-height: 1em;
	padding:6px 0;
	text-align: center;
	font-weight: 700;
}
#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: #FFF000;
	font-weight: 500;
	text-align: left;
	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 .lead{
	position: relative;
	margin: 0 auto 15px auto;
	width: calc(100% - 10px);
}
#precautions  #limitlist dl{margin: 0 auto;width: calc(100% - 20px);}

/* ニュース */
#news{
    position: relative;
	margin: 0 auto;
	padding-bottom: 50px;
}
#news h2{
	position: relative;
	margin: 0 auto;
}
#news h2 img{
	position: relative;
	margin: 0 auto;
}
#news .newsWrap{position: relative;z-index: 100;}
#news .newsWrap .contetsWrap{
	position: relative;
	margin: 0 auto 20px auto;
	width: calc(100% - 30px);
	max-width: 800px;
	background-color: rgba(255,255,255,0.8);
	border-radius: 5px;
}
#news .newsBox{
	position: relative;
	margin: 0 auto;
	padding: 20px 0 20px 15px;
}
#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 0 10px 0;
	width: calc(100% - 15px);
    padding: 0 0 5px 0;
	line-height: 1.4em;
}
#news .newsBox ul li p.date{
	position: relative;
	color: #177cae;
	font-size: .13rem;
	width: 100%;
}
#news .newsBox ul li a, #news .newsBox ul li p{
	position: relative;
	width: 100%;
	font-size: .13rem;
	color: #120f26;
}

/* whats */
#whats{
	position: relative;
	margin: 0 auto;
	padding: 0;
	background-color: #0e1824;
	z-index: 20;
}
#whats::before{
	position: absolute;
	top: -300px;
	left: 0;
	content: '';
	display: block;
	width: 100%;
	height: 300px;
	background: linear-gradient(0deg, rgba(14,24,36,0.7) 0%, rgba(14,24,36,0) 100%);
}
#whats ul{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 520px;
}
#whats ul li{
	position: relative;
	margin: 0;
	width: 50%;
}

/* バナー */
#banner{
	position: relative;
	margin: 0 auto;
	padding: 30px 0 40px 0;
	background-color: #0e1824;
	z-index: 21;
}
#banner ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
	/*max-width: 1000px;*/
	max-width: 800px;
	gap:10px;
}
#banner ul li{
	position: relative;
	margin: 0;
	width: 100%;
}
#banner ul li.w2{
	width: 100%;
	max-width: 435px;
}
#banner ul li img{
	width: 100%;
	margin: 0 auto;
	border: solid 1px #C0C0C0;
}
#banner ul li.w2 img{max-width: 435px;}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* header */
	header #keyvisual{
		background-image: url("../img/main_pc01.jpg");
		padding-top: 70%;
	}
	header #keyvisual::after{display: none;}
	header .badge{
		bottom: 1%;
		right:1%;
		left: auto;
		width: 22%;
	}
	
	/* catch */
	#catch{background-image: url("../img/bg_catch_pc01.png");}
	#catch .catchTxt{max-width: 2000px;}

	/* CM */
	#cm .pcWrap{
		position: relative;
		margin: 0 auto;
		width: 100%;
		max-width: 640px;
	}
	#cm::before, #cm::after{height: 10px;}
	#cm::before{top:-10px;}
	#cm::after{bottom:-10px;}

	/* 概要タイトル装飾 */
	h2 .h2bg, h2 .h2bg-1{height: 10px;}
	h2 .h2bg{top:-10px;}
	h2 .h2bg-1{bottom:-10px;}
	
	/* とは */
	#about h2{padding-top: 50px;}
	#event h2 .ttl{margin: 0 auto 50px auto;}
	#event .ttl{
		padding: 50px 0;
		background-size: auto 10px;
	}
	#about .Txt p{
		margin: 30px auto 0 auto;
		font-size: 120%;
		line-height: 2em;
	}
	#about .btnAbout{
		margin: 50px auto 0 auto;
		padding-bottom: 100px;
	}
	#about .btnAbout img{max-width: 470px;}

	
	#event{padding-bottom: 60px;}
	#event h2{padding: 40px 0;}

	#story{
		padding-top: 0;
		padding-bottom: 40px;
	}
	#story .Txt{
		margin: 0;
		padding: 10px 0 0 0;
		width: 50%;
	}
	#story  .Txt p{
		width: calc(100% - 30px);
		padding-right: 30px;
		padding-top: 20px;
		font-size: min(1.1vw, .18rem);
		line-height: 2em;
	}
	#story .moreTxt{
		display: block;
		text-align: center;
	}
	#story .Img{width: 50%;}

	/* キャラクター */
	#chara{display: none;}

	/* experience */
	#experience h2{padding: 40px 0;}
	#experience .expWrap{background-color: #000000;}
	#experience .expWrap img{position: relative;margin: 0 auto;}

	/* links */
	#links{padding: 0 0 120px 0;}
	#links h2{padding: 40px 0;}
	#links .linksB{margin: 80px auto 30px auto;}
	#links .linksB ul{gap: 15px;}
	#links .linksWrap{width: calc(100% - 100px);}
	#links .linksWrap .splide__arrows .splide__arrow--prev {left: -40px;}
	#links .linksWrap .splide__arrows .splide__arrow--next {right: -40px;}
	#links .linksWrap .splide__arrow {
		height: 30px;
		width: 30px;
	}

	/* howto */
	#howto{padding: 0 0 100px 0;}
	#howto .howtoWrap{
		width: calc(100% - 100px);
		margin: 10px  auto 60px auto;
	}
	#howto .howtoWrap li{border-radius: 10px;}
	#howto .howtoWrap .splide__arrows .splide__arrow--prev {left: -50px;}
	#howto .howtoWrap .splide__arrows .splide__arrow--next {right: -50px;}
	#howto .howtoWrap .splide__arrow {
		height: 40px;
		width: 40px;
	}
	.howto .BtnArea{font-size: .14rem;}
	.howto .BtnArea .button{font-size: .14rem !important;}

	/* play */
	#play{padding: 0 0 120px 0;}
	#play ul{
		margin: 30px auto 0 auto;
		gap:0 30px;
	}
	#play li{width: calc(33% - 15px);}

	/* 販売 */
	#ticket{padding: 0 0 100px 0;}

	/* 料金 */
	#ticket .price{margin: 10px auto 0 auto;}
	#ticket .price ul.ticketP {max-width: 530px;}
	#ticket .price ul.ticketP li{border-radius: 10px;}
	#ticket .priceBox .caution{font-size: .14rem;}
	#ticket .priceBox .table{margin: 15px auto 30px auto;}
	#ticket .priceBox table th{
		width: calc(35% - 4px);
		line-height: 1.4em;
		padding: 15px 2px;
		font-size: 100%;
	}
	#ticket .priceBox table td{
		width: 65%;
		margin: 0;
		padding: 15px 0;
		font-size:86%;
	}
	#ticket .priceBox table td span{font-size: 160%;}
	#ticket .priceBox table th p, #ticket .priceBox table td p{padding-top: 5px; font-size: 70%;line-height: 1.6em;}
	#ticket .priceBox table tbody th{padding: 15px 2px;}
	#ticket .ticketCaution{
		margin: 0 auto 20px auto;
		max-width:758px;
		border-radius: 10px;
	}
	#ticket .ticCaution{
		width: calc(100% - 40px);
		padding: 0;
		font-size: 84%;
	}
	#ticket .ticCaution.disp{padding: 10px 0 30px 0;}
	#ticket .tokutenImg{margin: 60px auto 40px auto;}
	#ticket .selectTicket{
		margin: 50px auto 0 auto;
		max-width: 1100px;
		gap: 15px;
	}
	#ticket .selectTicket li{
		width: calc(33.33% - 15px);
		max-width: 380px;
	}

	/* release */
	#release{padding-bottom: 100px;}
	#release h3{
		margin: 30px auto 0 auto;
		padding: 10px 0;
	}
	#release .releaseWrap{margin: 0 auto 50px auto;}
	#release .typeTxt{
		margin:  20px auto 15px auto;
		padding: 10px 0;
		max-width: 100%;
	}
	#release .kikan{font-size: min(3.5vw, .17rem);}
	#release .bdlinks{font-size: min(3.5vw, .15rem);padding-top: 0.7em;}

	#release .scraptantei{
		margin: 20px auto 0 auto;
		font-size: min(3.5vw, .14rem);
	}
	#release .scraptantei img{max-width: 320px;}

	/* schedule */
	#schedule{padding-bottom:120px;}
	#schedule .lead{
		margin: 10px auto 20px auto;
		font-size: 120%;
		line-height: 1.8em;
	}
	#schedule ul{
		padding-left: 0;
		gap:15px 10px;
	}
	#schedule ul li{
		width: calc(20% - 5px);
		border-radius: 10px;
	}
	#schedule ul li .areaWrap{padding: 12px 0;}
	#schedule ul li .area{font-size: .2rem;}
	#schedule ul li .area span{font-size: .14rem;}
	#schedule ul li .kikan{
		font-size: .16rem;
		line-height: 1.4em;
	}
	#schedule ul li.end .closed{border-radius: 10px;}
	#schedule .more{
		padding-top: 40px;
		font-size: 120%;
	}

	/* FAQ */
	#precautions{padding-bottom: 120px;}
	#precautions .cautionWrap{
		margin: 0 auto 20px auto;
		max-width: 960px;
	}
	#precautions .cautionWrap .ttl img{max-width: 320px;}
	#precautions .ttl::after{
		right: 35px;
		width: 18px;
		height: 12px;
	}
	#precautions .CatTtl{
		font-size: .18rem;
		padding:10px 0;
	}
	#precautions .CatTtl.marginTop{margin: 40px auto 15px auto;}
	#precautions  #limitlist .CatTtl{margin: 50px auto 15px auto;padding: 5px 0;}
	#precautions  #limitlist .CatTtl.marginTop{margin: 50px auto 15px auto;}

	#precautions .faqWrap{width: calc(100% - 100px);}
	#precautions .faqWrap dl dt{font-size: .18rem;padding:10px 0;}
	#precautions .cautionlist .faqWrap dl dt{padding:10px 0;}
	#precautions #faq.faqWrap dl dt{padding: 10px 0 0 0;}
	#precautions .faqWrap dl dd{padding: 15px 0 40px 0;}
	#precautions #faq.faqWrap dl dd{padding: 5px 0 0 0;}


	/* ニュース */
	#news{padding-bottom: 120px;}
	#news .newsWrap .contetsWrap{
		margin: 10px auto 0 auto;
		max-width: 960px;
		border-radius: 10px;
	}
	#news .newsBox{padding: 30px 0 30px 50px;}
	#news .newsBox ul li{
		margin:0 0 10px 0;
		width: calc(100% - 50px);
	}
	#news .newsBox ul li p.date{
		font-size: .15rem;
		width: 7em;
	}
	#news .newsBox ul li a, #news .newsBox ul li p{
		width: calc(100% - 7em);
		font-size: .16rem;
	}

	/* whats */
	#whats::before{
		top: -200px;
		height: 200px;
		background: linear-gradient(0deg, rgba(14,24,36,1) 0%, rgba(14,24,36,0) 100%);
	}
	#whats ul{
		margin: 0 auto;
		padding: 10px 0 50px 0;
		max-width: 540px;
		gap:0 30px;
	}
	#whats ul li{width: calc(50% - 15px);}

	/* バナー */
	#banner{padding: 0 0 100px 0;}
	#banner ul{gap:10px 15px;}
	#banner ul li{width: calc(33.333% - 15px);}
	#banner ul li{max-width: 260px;}
	#banner ul li img{max-width: 260px;}
	#banner ul li.w1{max-width: 224px;}
	#banner ul li.w1 img{max-width: 224px;}

}

/* ----- navigation ----- */
@media screen and (min-width: 1170px) {
	header{padding-top: 60px;}
}