@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: 139.06%;
	width: 100%;
	background-color: #000000;
}

/* キャッチコピー */
#catch{
	position: relative;
	margin: 0 auto;
	padding-bottom: 100px;
	background-image: url("../img/bg_catch.jpg");
	background-position: 50% 0;
    background-size: auto 100%;
	background-repeat: no-repeat;
}
#catch .contetsWrap{width: calc(100% - 20px);}
#catch .kikan{
	position: relative;
	margin:  0 auto;
	padding-top: 40px;
	display: block;
	width: calc(100% - 20px);
}
#catch p{
	position: relative;
	margin: 10px auto 0 auto;
	text-align: center;
	font-size: .12rem;
	font-weight: 700;
	line-height: 2em;
}
#catch p span{background-color: #000000; padding: 0 2px;}
#catch p.ttl span{
	width: 100%;
	font-size: .19rem;
	line-height: 2em;
	font-style: italic;
	font-weight: 900;
	color: #5efff9;
}
#catch p.resalse{
	position: relative;
	margin: 40px auto 0 auto;
	color: #D1F43C;
	font-size: .15rem;
}
#catch a img{
	position: relative;
	margin: 20px auto;
	width: calc(100% - 120px);
	box-shadow: 7px 7px 0px 0px #000000;
}
#catch a {color: #5efff9;}

#point01{
	position: relative;
	margin: 0 auto;
	padding-top: 50px;
	background-color: #000000;
	background-image: url('../img/bg_popup.jpg');
	background-repeat: no-repeat;
	background-position: 50% 100%;
    background-size: cover;
}
#point01 .pointTtl{
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	width: 160px;
	text-align: center;
	padding: 10px 0;
	color: #d3f900;
	font-size: .38rem;
	font-weight: 700;
	background-color: #000000;
}
#point01 ul{width: calc(100% - 10px);}
#point01 ul::after{
	position: absolute;
	top: -28px;
	left: 50%;
	transform: translateX(-50%);
	content: '';
	display: block;
	height: 40px;
	width: 25px;
	background-image: url('../img/pointarrow.png');
	background-repeat: no-repeat;
	background-position: 50% 0;
    background-size: contain;
}
#point01 ul li{width: calc(50% - 10px);text-align: center;font-size: .12rem;line-height: 1.5em;}
#point01 ul li img{width: calc(100% - 30px);margin: 0 auto;}
#point01 .pTTL{
	position: relative;
	color: #d3f900;
	font-weight: 700;
	font-size: .18rem;
	line-height: 1.7em;
	padding-bottom: 10px;
}
#point01 .movieTtl{
	position: relative;
	margin: 0 auto;
	padding: 50px 0 10px 0;
	text-align: center;
	font-size: .18rem;
	font-weight: 900;
	color: #5efff9;
}
.sampleM{background-color: #000000;}

#about{
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
	background-color: #d4d4d4;
}
#about::before, #about::after{
	position: absolute;
	content: '';
	display: block;
	left: 0;
	width: 100%;
	height: 10px;
	background-image: url("../img/bar01.png");
	background-position: 50% 0;
    background-size: auto 100%;
}
#about::before{top:0;}
#about::after{bottom:0;}
#about p{
	position: relative;
	margin: 0 auto;
	padding: 5px 0;
	color: #00626d;
	font-weight: 700;
	font-size: .12rem;
	text-align: center;
}

/* ニュース */
#news{
	position: relative;
	margin: 0 auto;
	background-color: #000000;
}
#news .newsBox{position: relative;padding-bottom: 35px;}
#news .newsBox ul{
	position: relative;
	margin: 0 auto;
}
#news .newsBox ul li{
	position: relative;
	margin:  0 auto 15px auto;
	padding-bottom: 10px;
	width: calc(100% - 50px);
	transition: all .3s ease-out;
	border-bottom: solid 1px #3d3d3d;
	word-break: break-all;
}
#news .newsBox ul li .date{position: relative;color: #d8ff00;width: 100%;}
#news .newsBox ul li p.date::before{
	position: absolute;
	display: block;
	top:50%;
	left: -27px;
	transform: translateY(-50%);
	content: '';
	background-color: #d8ff00;
	height: 1px;
	width: 23px;
}
#news .newsBox ul li a{color: #307eff;text-decoration: underline;}
#news .newsBox ul li a:hover{text-decoration: none;}
#news .newsBox ul li:nth-child(n + 4){display: none;opacity: 0;}
#btn_more{
	position: relative;
	margin: 0 auto;
	padding-right: 25px;
	text-align: right;
	color: #d7fe00;
}
#btn_more span{font-size: .08rem;padding-left: 1em;}
.mock{
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-size: .12rem;
	padding: 30px 0 10px 0;
}
.mock span{
	display: block;
	font-size: .16rem;
	padding: 12px 0 0 0;
	font-weight: 700;
}
.bnr_mock{
	position: relative;
	margin: 0 auto 30px auto;
	width: calc(100% - 30px);
	display: block;
}

/* バナー */
#banner{
    position: relative;
    margin: 0 auto ;
	padding-bottom: 30px;
}
#banner ul{
    position: relative;
    margin: 0 auto;
    width: calc(100% - 40px);
    display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
    align-items: flex-start;
}
#banner ul li{
    position: relative;
    margin: 0 5px 10px 5px;
}
#banner .flexbox{width: calc(100% - 50px);margin: 0 auto 10px auto;}
#banner .flexbox div{
	position: relative;
	margin: 0 auto 15px auto;
}
#banner .goodsrelease{
	text-align: center;
	padding-top: 5px;
	font-weight: 700;
}

/* CM */
#cm{
	position: relative;
	margin: 0 auto;
	padding: 0 0 40px 0;
}

/* photo */
#photo{
	position: relative;
	padding: 10px 0 11px 0;
	background-color: #000000;
}
#photo .photoWrap{
	position: relative;
	margin: 0 auto ;
}
#photo .slick-slide{margin: 0 1px; background-color: transparent;}
#photo::before, #photo::after{
	position: absolute;
	content: '';
	display: block;
	left: 0;
	width: 100%;
	height: 10px;
	background-image: url("../img/bar01.png");
	background-position: 50% 0;
    background-size: auto 100%;
}
#photo::before{top:0;}
#photo::after{bottom:0;}

/* ポイント */
#point{
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
    background-image: url("../img/bg_point.jpg");
	background-position: 50% 0;
	background-size: 100% 100%;
}
#point ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 10px);
}
#point ul li{
	position: relative;
	margin: 0 5px 15px 5px;
    width: calc(33% - 10px);
	text-align: center;
}
#point ul li .pointImg{
	position: relative;
	margin: 0 auto 8px auto ;
    width: 94%;
	z-index: 10;
}
#point ul li .pointTxt{
	position: relative;
	margin: -20px auto 0 auto;
	font-size: .12rem;
	color: #000000;
	padding: 15px 10px 10px 10px;
	background-color: rgba(157,58,169,.2);
}
#point ul li .pointTxt .ttl{
	font-size: .13rem;
	color: #8000aa;
	font-weight: 700;
	padding-bottom: 5px;
}
#point ul li .pointTxt .pointInner{
	position: relative;
	margin: 0 auto;
	padding-top: 5px;
	border-top: dashed 2px #8000aa;
}
#point ul li .pointTxt::before{
	position: absolute;
	top:0;
	left: 0;
	content: '';
	width: 30%;
	height: 30%;
	border-top: solid 1px #8000aa;
	border-left: solid 1px #8000aa;
}
#point ul li .pointTxt::after{
	position: absolute;
	bottom:0;
	right: 0;
	content: '';
	width: 30%;
	height: 30%;
	border-bottom: solid 1px #8000aa;
	border-right: solid 1px #8000aa;
}

/* イベント概要 */
#event{
    position: relative;
    margin: 0 auto;
	padding: 0;
	background-color: rgba(0,0,0,.7);
}
#event::before{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 200px;
	content: '';
	display: block;
	background: -webkit-linear-gradient(top, #000000, rgba(0,0,0,0));
	background: -o-linear-gradient(top, #000000, rgba(0,0,0,0));
	background: linear-gradient(to top, rgba(0,0,0,0), #000000);
}
#event ul.list{
	position: relative;
	margin: 20px auto 75px auto;
}
#event ul.list li{width: calc(50% - 10px);}
#event .kitWrap{
	position: relative;
	margin: 20px auto 10px auto;
	border: solid 1px #01e7be;
	padding: 20px;
	font-size: .11rem;
}
#event .kitWrap .ttl{
	text-align: center;
	font-weight: 700;
	font-size: .13rem;
	padding-bottom: 5px;
	margin-bottom: 10px;
	border-bottom: solid 1px #929392;
}
/* photo */
.kitphoto{
	position: relative;
	margin: 60px auto 0 auto;
	padding:  0;
}
.kitphotoWrap{
	position: relative;
	transform: translateX(15px);
	width: 100%;
}
.kitphoto .slick-slide{position: relative;margin: 0 1px; background-color: transparent;padding-right: 30px;}
.kitphoto .slick-slide p{text-align: center; padding-top:5px;font-size: .12rem;width: calc(100% - 20px);margin: auto;}
.kitphoto .slick-slide p span{padding:  0 2px; background-color: #000000;}
.kitphoto .slick-slide.arrow::after{
	position: absolute;
	display: block;
	content: '';
	top: 100px;
	transform: translateY(-50%);
	right: -2px;
	text-align: center;
	width:25px;
	height: 35px;
	background-image: url("../img/arrow05.png");
	background-size: contain;
	background-repeat: no-repeat;
}
#event .kitdate{ padding-bottom: 10px;font-weight: 900; font-size: .14rem;}
#event .release{ padding-top: 10px;font-weight: 900; font-size: .14rem;text-align: center;color: #d8ff00;}
#event .price{position: relative;}
#event .price span{
	font-weight: 900;
	font-size: .20rem;
}
#event .price span.preprice{
	font-weight: 500;
	font-size: .11rem;
	padding-bottom: 20px;
	display: block;
}
#event .goto{
	position: relative;
	margin: 0 auto;
}
#event .goto p, #event .goto img{padding-bottom: 10px;}
#event .goto .button{margin-bottom: 40px;}
#event h4{
	position: relative;
	text-align: center;
	width: auto;
	margin: 80px auto 16px auto;
	font-size: .16rem;
}
#event h4 span::after{
	position: absolute;
	top: -52px;
	left: -54px;
	width: 74px;
	height: 88px;
	display: block;
	content: '';
	background-image: url("../img/card03.png");
	background-position: 0 0;
    background-size: contain;
	background-repeat: no-repeat;
}
#event h4 span{
	position: relative;
	background-color: #d8ff00;
	color: #000000;
	font-weight: 900;
	text-align: center;
	width: auto;
	padding: 0 8px;
	z-index: 100;
}
#event .kitImage{
	position: relative;
	margin: 0 auto 10px auto;
}
#event .kitTxt{font-size: .12rem;}
#event #btn_ticCaution{
    position: relative;
    margin: 30px auto 0 auto;
	width: 72%;
}
#event .kitBuy li {
    position: relative;
	margin: 10px auto 30px auto;
}
#event .kitBuy li .ttl{
    position: relative;
	line-height: 60px;
	padding-left: 20%;
	margin-bottom: 10px;
	font-size: .14rem;
	font-weight: 700;
	background-image: url("../img/kit01.png");
	background-position: 0 50%;
    background-size: contain;
	background-repeat: no-repeat;
}
#event .kitBuy li:nth-child(2) .ttl{background-image: url("../img/kit02.png");}
#event .kitBtn img{
	position: relative;
	display: block;
	width: calc(100% - 30px);
	margin: 10px auto 20px auto;
}
#event .kitBtnB img{width: 100%;}
#event #story{
	position: relative;
	margin: 0 auto;
}
#event #story .storyImg{
	position: relative;
	margin: -18% auto 0 auto;
	width: 100%;
	height: 0;
	padding-top: 89%;
	background-color: #000000;
	background-image: url("../img/bg_story.jpg");
	background-position: 50% 100%;
    background-size: 120% auto;
	background-repeat: no-repeat;
}
#event #story #storyWrap::after{
	position: absolute;
	bottom: -10%;
	left: 0;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("../img/card01.png");
	background-position: 94% 100%;
    background-size: 54% auto;
	background-repeat: no-repeat;
}
#event #story #storyWrap{
	position: relative;
	margin: 0 auto;
	background-image: url("../img/paper.png");
	background-position: 72% 100%;
    background-size: auto calc(100% - 80px);
	background-repeat: no-repeat;
	overflow: visible;
	z-index: 1;
}
#event #story .storyTxt{
	position: relative;
	padding-bottom: 30%;
	z-index: 1;
}
#event #story .storyTxt img{
	position: relative;
	width: calc(100% - 70px);
	margin: 0 auto 30px auto;
}
#event #story .storyTxt p{
	position: relative;
	width: calc(100% - 50px);
	margin: 10px auto;
	color: #000000;
}
#event #story .storyTxt::before{
	position: absolute;
	content: '';
	top: -22%;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/paper01.png");
	background-position: -150% 0;
    background-size: 76% auto;
	background-repeat: no-repeat;
}
/* youtube */
.cm{
	position: relative;
	margin:0 auto;
	width: calc(100% - 50px);
}


/* キャラクター */
#charactor{
	position: relative;
    margin: 0 auto;
	padding-top: 70px;
	background-color: #000000;
}
#charactor::after{
	position: absolute;
	top: -20px;
	left: 0;
	content: '';
	display: block;
	width: 100%;
	height: 105px;
	background-image: url("../img/card03.png");
	background-position: -5% 0;
    background-size: auto 100%;
	background-repeat: no-repeat;
}
#charactor .chara::before{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 200px;
	content: '';
	display: block;
	background: -webkit-linear-gradient(top, #000000, rgba(0,0,0,0));
	background: -o-linear-gradient(top, #000000, rgba(0,0,0,0));
	background: linear-gradient(to top, rgba(0,0,0,0), #000000);
}
#charactor .chara{
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	background-image: url("../img/bg_chara.jpg");
	background-position: 50% 0;
    background-size: auto 100%;
}
#charactor .chara .slick-slide{margin: 0 !important;background-color: transparent;}
#charactor .chara .slick-slide div{
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 0;
    padding-top: 297.5px;
	background-size: auto 100%;
	background-repeat: no-repeat;
    background-position: 100% 100%;
}
#charactor .chara .slick-slide div.chara01{background-image: url('../img/chara01.png');}
#charactor .chara .slick-slide div.chara02{background-image: url('../img/chara02.png');}
#charactor .chara .slick-slide div.chara03{background-image: url('../img/chara03.png');}
#charactor .chara .slick-slide div.chara04{background-image: url('../img/chara04.png');}
#charactor .chara .slick-slide div.chara05{background-image: url('../img/chara05.png');}
#charactor .chara .slide-arrow{
    position: absolute;
	top:0;
	display: block;
	width: 25px;
	height: 25px;
}
#charactor .chara .prev-arrow{left: 28px;transform: rotate(180deg);}
#charactor .chara .next-arrow{right: 28px;}
#charactor .chara .slick-dots{width: 100%;margin: 0 auto; text-align: left;padding: 0;}
#charactor .chara .slick-dots li{ width: 20%;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%;
}
#arrowsC{
	position: absolute;
	display: block;
	bottom: 35%;
	left: -20px;
	text-align: center;
	width: calc(100% + 40px);
	height: 25px;
}

/* 遊び方 */
#howto{
    position: relative;
    margin: -5px auto 0 auto;
	padding: 20px 0 75px 0;
	background-image: url("../img/bar02.png"), url("../img/bg_play.jpg");
	background-position: 0 0, 50% 0;
    background-size: auto 10px, 100% auto;
	background-repeat: repeat-x, repeat;
	color: #000000;
}
#howto .howtolead{
	position: relative;
	margin: -80px auto 0 auto;
	padding: 60px 0 20px 0;
	background: -webkit-linear-gradient(top, rgba(51,123,157,0), rgba(51,123,157,.3), rgba(51,123,157,0));
	background: -o-linear-gradient(top, rgba(51,123,157,0), rgba(51,123,157,.3), rgba(51,123,157,0));
	background: linear-gradient(to top, rgba(51,123,157,0), rgba(51,123,157,.3), rgba(51,123,157,0));
}
#howto .leadImg{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 10px);
	z-index: 100;
}
#howto .lead{
	position: relative;
	margin: -12px auto 10px auto;
	padding: 25px 35px 65px 35px;
	background-image: url("../img/howtoBg01.png"), url("../img/howtoBg02.png");
	background-position: 28px 100%,100% 0;
    background-size: auto 110px,  85px auto;
	background-repeat: no-repeat no-repeat;
	width: 80%;
	overflow: visible;
}
#howto .lead p{
	position: relative;
	margin: 0 auto;
	padding: 20px;
	font-size: .12rem;
	background-color: rgba(15,42,57,.7);
	width: calc(100% - 80px);
	color: #ffffff;
}
#howto .lead p span{
	font-weight: 900;
	font-size: .13rem;
}
	
#howto ul.play{
	position: relative;
	margin: 0 auto;
}
#howto ul.play li{
	position: relative;
	margin: 0 0 15px 0;
    width: 32.5%;
	text-align: center;
}
#howto ul.play li img{padding-bottom: 10px;}
#howto ul.play li .ttl{color:  #1f762a;font-weight: 700;padding-bottom: 5px;}

#howto ul.useitem{position: relative;}
#howto ul.useitem li{
	position: relative;
	border-bottom: solid 1px #929392;
	padding: 20px 0 10px 0;
}
#howto ul.useitem li img{position: relative;margin: auto;}
#howto ul.useitem li:nth-child(2) img{width: 37px;}
#howto ul.useitem li:nth-child(3) img{width: 55px;}
#howto ul.useitem li:nth-child(4) img{width: 52px;}
#howto ul.useitem li div:first-child{width: 85px;}
#howto ul.useitem li div:nth-child(2){width: calc(100% - 115px);}
#howto ul.useitem li .ttl{font-size: .12rem; font-weight: 700;}


/* ゲームの流れ */
#howto .howtoWrap{
	position: relative;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
#howto .swiper-containerG{
	position: relative;
	margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
#howto .howtoWrap ul li{
	position: relative;
	margin: 0;
    padding: 0;
}
#howto .howtoWrap ul li::after{
	position: absolute;
	content: '';
	top:18%;
	left: calc(100% - 40px);
	width: 90.5px;
	height:74px;
    background-image: url("../img/arrow01.png");
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 100;
}
#howto .howtoWrap ul li:last-child::after{background-image: none;}
#howto ul li img{padding-bottom: 12px;}
#howto .howtoWrap ul li a.btn_buy{width: 70%;text-decoration: none;}
#howto .howtoWrap ul li a.btn_buy:hover{text-decoration: none !important;}
.first{
	position: relative;
	margin: 30px auto;
	padding: 20px;
	font-size: .11rem;
	border: solid 1px #197524;
}
.first .ttl{
	text-align: center;
	font-size: .13rem;
	padding-bottom: 5px;
	margin-bottom: 10px;
	border-bottom: solid 1px #929392;
}

/* 謎 */
#nazo{
	position: relative;
	margin: 60px auto 0 auto;
}
#nazo dl.hint{
	position: relative;
	margin: 20px auto 0 auto;
	background-color: #E8FDF0;
	border-left: solid 1px #197524;
	border-right: solid 1px #197524;
	border-bottom: solid 1px #197524;
}
#nazo dl.hint dt{
	position: relative;
	margin: 0 auto;
	padding: 5px 10px;
	border-top: solid 1px #197524;
}
.nazo_arrow::after{
	position: absolute;
	content: '▼';
	left: 95%;
	width: 19px;
    font-size: .09rem;
}
#nazo dl.hint dd{
	position: relative;
	margin: 0 auto;
	padding: 10px;
	text-align: left;
	font-size: .12rem;
	display: none;
	border-top: solid 1px #929392;
	background-color: #A6D9D8;
}
#nazo #err{
	position: relative;
	margin:0 auto;
	padding: 10px 0;
	width: 100%;
	font-size: .11rem;
	color: #ED006B;
	text-align: center;
}
.inputArea{
	position: relative;
	margin: 0 auto 10% auto;
}
.inputArea .inputTxt{
	position: relative;
	margin:  20px auto 0 auto;
	padding: 0 5px;
	border: solid 1px #707070;
	background-color: #f8f8f8;
	border-radius: 5px;
	width: calc(100% - 10px);
	height: 3em;
	font-size: .12rem;
}
.inputArea .btn_send{ 
	position: relative;
	display: block;
	width: 50%;
	margin: 0 auto;
	padding: 5px;
	text-decoration: none;
	border: none;
	border-radius: 5px;
	background-color: #01e7be;
	transition: all 0.16s ease-out;
	text-align: center;
	font-weight: 700;
}
.resultImg{ 
	position: relative;
	margin: 20px auto;
}
.snsNazoShare{
	position: relative;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0 auto 30px auto;
}
.snsNazoShare li{width: 40px;margin: 0 10px;}

/* グッズ */
#goods{
	position: relative;
	margin: 60px auto;
}
#goods ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 120px);
}
#goods ul li{
	position: relative;
	margin: 0 auto 40px auto;
}
#goods ul li .goodsImg{
	position: relative;
	width: 100%;
}
#goods ul li .goodsImg img{
	position: relative;
	padding: 0;
	border: solid 3px #083600;
}
#goods ul li .goodsTxt{
	position: relative;
	margin: 10px auto 0 auto;
	width: 100%;
}
#goods ul li .goodsTxt .name{
	position: relative;
	border-bottom: solid 1px #197524;
	font-size: .16rem;
	font-weight: 700;
	padding: 5px;
	margin: 0 auto 10px auto;
}
#goods ul li .goodsTxt .price{
	position: relative;
	padding: 0 5px;
}
#goods ul li .goodsTxt .spec{
	position: relative;
	padding: 0 5px;
}
#goods .shop{
	position: relative;
	margin: 40px auto;
	padding: 20px 20px 0 20px;
	font-size: .11rem;
	border: solid 1px #197524;
	width: calc(100% - 100px);
}
#goods .shop p{text-align: center;}
#goods .shop .ttl{
	font-size: .13rem;
	padding-bottom: 5px;
	margin-bottom: 10px;
	border-bottom: solid 1px #929392;
	font-weight: 700;
}
#goods .goodsrelease{
	text-align: center;
	font-weight: 700;
	margin:30px auto 0 auto;
}
#goods .shopcaution{
	position: relative;
	margin: 20px auto;
	padding: 20px 0 0 0;
}

.btn_buyKit img{
	position: relative;
	display: block;
	margin: 40px auto 20px auto;
	width: calc(100% - 70px);
}



.precautions{
	position: relative;
	margin: 0 auto;
	padding: 70px 0;
	background-image: url("../img/bar03.png"), url("../img/bar03.png"), url("../img/bg_precautions.jpg");
	background-position: 0 0, 0 100%, 50% 0;
    background-size: auto 10px, auto 10px, 100% 100%;
	background-repeat: repeat-x, repeat-x, repeat;
}
#limit .contetsWrap, #caution .contetsWrap, #faq .contetsWrap{height: 0;overflow: hidden;padding: 0;transition: all .3s ease-out;background-color: #000000;width: calc(100% - 50px);}
#limit .contetsWrap.dispD, #caution .contetsWrap.dispD, #faq .contetsWrap.dispD{height: auto;}
#limit dl::before, #caution dl::before, #faq h4.border::before{
	position: absolute;
	top: -30px;
	left: 0;
	content: '';
	width: 100%; 
	height: 1px;
	background-color: #454545;
	display: block;
}

/* 利用制限 */
#limit{
    position: relative;
	margin: 0 auto;
    padding: 0 0 25px 0;
}
#limit dl{
    position: relative;
    margin: 40px auto;
	width: calc(100% - 50px);
    border-top: solid 1px #A9A9A9;
    border-left: solid 1px #A9A9A9;
    border-right: solid 1px #A9A9A9;
    display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
}
#limit dt{
    width: calc(35% - 21px);
    padding: 15px 10px;
    text-align: center;
    background-color: #383838;
    border-bottom: solid 1px #A9A9A9;
    border-right: solid 1px #A9A9A9;
}
#limit dd{
    width: calc(65% - 20px);
    padding: 15px 10px;
    border-bottom: solid 1px #A9A9A9;
}
#limit dd .caution{padding-top: 10px;} 


/* 注意事項 */
#caution{
    position: relative;
	margin: 0 auto;
    padding: 0 0 25px 0;
}
#caution{
    position: relative;
	margin: 0 auto;
}
#caution dl{
    position: relative;
	margin: 40px auto;
	width: calc(100% - 50px);
}
#caution dt{
    position: relative;
	margin: 0 auto;
    font-size: .15rem;
    padding: 15px 0;
	font-weight: 700;
	color: #d7fe00;
}
#caution dt:first-child{padding: 0 0 15px 0;}
#caution dd{
    position: relative;
	margin: 0 auto;
    padding: 0 0 15px 1.5em;
}
#caution dl dd::before{
	position: absolute;
	content: '・';
    display: block;
    width: 1em;
    left: .3em;
}
#caution dd br{
    display: block;
	content: "";
	margin: 10px 0;
}
#caution dd br.nomargin{margin:auto;}


/* よくある質問 */
#faq{
    position: relative;
	margin: 0 auto;
	padding: 0;
}
#faq h4{
	position: relative;
	width: calc(100% - 50px);
	margin:40px auto 0 auto;
	font-weight: 700;
	font-size: .15rem; 
	color: #d7fe00;
}
#faq dl{
	position: relative;
	margin: 20px auto 40px auto;
	width: calc(100% - 50px);
}
#faq dl dt{
	position: relative;
	margin: 0 auto 5px auto;
    padding-left: 1.5em;
}
#faq dl dt::before{
	position: absolute;
	content: 'Q.';
    display: block;
    width: 1.5em;
    left: 0;
}
#faq dl dd{
	position: relative;
	margin: 0 auto 15px auto;
    padding-left: 1.5em;
}
#faq dl dd::before{
	position: absolute;
	content: 'A.';
    display: block;
    width: 1.5em;
    left: 0;
}

#testMovie{
	position: relative;
	margin: 50px auto 0 auto;
}
#testCaution{
	position: relative;
	margin: 0 auto 120px auto;
	width: calc(100% - 50px);
	border: solid 1px #000000;
}

#testCaution p{
	position: relative;
	margin: 0 auto;
	text-align: left;
	color: #000000;
	padding: 0 5px;
}


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

	/* ヘッダー */
    header #keyvisual{
        background-image: url("../img/main_pc.jpg");
        padding-top: 56.83%;
    }
	
	/* キャッチコピー */
	#catch{
		background-position: 50% 0;
		background-size: cover;
		padding-bottom: 130px;
	}
	#catch .kikan{
		padding-top: 60px;
		width: 620px;
		text-align: center;
	}
	#catch p{font-size: .16rem;margin: 0 auto;}
	#catch p.ttl span{font-size: .24rem;}
	#catch p.resalse{
		margin: 60px auto 0 auto;
		font-size: .19rem;
	}
	#catch a img{width: 340px;}
	
	#about::before, #about::after{height: 12px;}
	#about p{
		padding: 25px 0;
		font-size: .16rem;
	}
	
	#point01{padding-top: 50px;}
	#point01 .pointTtl{
		top: -53px;;
		width: 260px;
		padding: 15px 0;
		font-size: .44rem;
	}
	#point01 ul{width: 600px;}
	#point01 ul::after{
		top: -36px;
		height: 38px;
		width: 28px;
	}
	#point01 ul li{width: calc(50% - 30px);text-align: center;font-size: .14rem;line-height: 1.6em;}
	#point01 ul li img{width: 180px;margin: 0 auto;}
	#point01 .pTTL{
		font-size: .26rem;
		line-height: 1.8em;
	}
	#point01 .movieTtl{
		padding: 90px 0 20px 0;
		font-size: .28rem;
	}
	.sampleM .movieWrap{width: 960px;}

	/* ニュース */
	#news .newsBox{position: relative;padding-bottom: 65px;}
	#news .newsBox ul li{width: 700px;border-bottom: none;}
	#news .newsBox ul li .date{width: 100px;text-align: left;}
	#news .newsBox ul li .newsTxt{width: 600px;text-align: left;}
	#news .newsBox ul li p.date::before{
		left: -45px;
		top:10px;
		width: 35px;
	}
	#btn_more{
		padding-right: 0;
		width: 800px;
		margin: auto;
		text-align: right !important;
	}
	.mock{
		font-size: .14rem;
		padding: 50px 0 20px 0;
	}
	.mock span{
		font-size: .22rem;
		padding: 20px 0 0 0;
	}
	.bnr_mock{
		margin: 0 auto 30px auto;
		width: 420px;
	}

	/* バナー */
	#banner{padding-bottom: 60px;}
	#banner ul{width: 960px;}
	#banner ul li{width: 380px;}
	#banner .flexbox{width: 960px;margin: 0 auto 40px auto;}
	#banner .flexbox div{
		margin: 0 10px;
		width: 460px;
	}
	#banner .goodsrelease{font-size: .15rem;}
	
	/* photo */
	#photo{padding: 12px 0 13px 0;}
	#photo::before, #photo::after{height: 12px;}

	/* ポイント */
	#point{padding: 60px 0 80px 0;background-size: 100% auto;}
	#point ul{width: 1200px;}
	#point ul li{
		width: 190px;
		padding: 0;
		margin: 0 10px 15px 10px;
	}
	#point ul li .pointImg{width: 135px;}
	#point ul li .pointTxt{
		margin: -30px auto 0 auto;
		padding: 25px 10px 15px 10px;
		font-size: .14rem;}
	#point ul li .pointTxt .ttl{font-size: .16rem;padding-bottom: 15px;}
	#point ul li .pointTxt .pointInner{padding-top: 15px;}

	/* イベント概要 */
	#event::before{height: 400px;}
	#event p.lead{width: 660px; margin: 0 auto;}
	#event ul.list{
		margin: 60px auto 75px auto;
		width: 400px;
	}
	#event .kitWrap{
		margin: 30px auto 20px auto;
		width: 500px;
		padding: 20px 30px;
		font-size: .12rem;
	}
	#event .kitWrap .ttl{
		font-size: .16rem;
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	/* photo */
	.kitphoto{margin: 120px auto 0 auto;width: 880px;}
	.kitphotoWrap{position: relative; margin: 0 auto;}
	.kitphoto .slick-slide.arrow::after{
		right: 1px;
		width:20px;
		height: 30px;
	}
	
	#event .kitdate{  font-size: .15rem;}
	#event .release{ font-size: .15rem;}
	#event .price span{font-size: .24rem;}
	#event .price span.preprice{
		font-size: .12rem;
		padding-bottom: 20px;
	}
	#event .goto p, #event .goto img{padding-bottom: 20px;}
	#event .goto img{width: 460px;margin: 0 auto;}
	#event .goto .button{margin-bottom: 60px;}
	#event h4{
		margin: 120px auto 20px auto;
		font-size: .20rem;
	}
	#event h4 span::after{
		top: -62px;
		left: -64px;
		width: 84px;
		height: 98px;
	}
	#event .kitImage{
		margin: 0 auto 20px auto;
		width: 450px;
	}
	#event .kitTxt{width: 420px;margin: 0 auto;}
	#event #btn_ticCaution{
		margin: 50px auto 0 auto;
		width: 260px;
	}
	#event .kitBuy li {margin: 0 auto 30px auto;}
	#event .kitBuy li .ttl{
		line-height: 60px;
		padding-left: 0;
		margin: 0 auto 20px auto;
		text-align: center;
		width: 340px;
	}
	#event .kitBuy li p{margin: 0 auto 20px auto;}
	#event .kitBuy .flexbox{width: 690px;margin: 20px auto 80px auto;}
	#event .kitBtn img{
		width: 380px;
		margin: 10px 10px 0 10px;
	}
	#event .kitBtnB img{
		width: 600px;
		margin: 10px 10px 40px 10px;
	}
	#event #story .storyImg{
		padding-top: 40%;
		background-position: 50% 0;
		background-size: auto 104%;
	}
	#event #story .storyImg::after{
		position: absolute;
		padding: 1px;
		top:-200px;
		left: 0;
		width: 100%;
		height: 200px;
		content: '';
		display: block;
		background: -webkit-linear-gradient(bottom, #000000, rgba(0,0,0,0));
		background: -o-linear-gradient(bottom, #000000, rgba(0,0,0,0));
		background: linear-gradient(to bottom, rgba(0,0,0,0), #000000);
	}
	#event #story #storyWrap::after{
		bottom: 120px;
		left: 70px;
		background-position: 100% 100%;
		background-size: 247px auto;
	}
	#event #story #storyWrap{
		width: 920px;
		background-image: url("../img/paper02.png");
		background-position: 0 50%;
		background-size: 100% auto;
	}
	#event #story .storyTxt{padding-bottom: 350px;}
	#event #story .storyTxt img{
		width: 368px;
		margin: 0 auto 60px auto;
	}
	#event #story .storyTxt::before{
		top: -150px;
		background-position: 0 0;
		background-size: 348px auto;
	}
	
	/* youtube */
	.cm{
		position: absolute;
		bottom:70px;
		left: 50%;
		transform: translateX(-50%);
		width: 470px;
		z-index: 100;
	}
	
	/* キャラクター */
	#charactor{padding-top: 70px;}
	#charactor::after{
		height: 125px;
		background-position: calc(50% - 220px) 0;
	}
	#charactor .bg1::before{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100px;
		content: '';
		display: block;
		background: -webkit-linear-gradient(top, #000000, rgba(0,0,0,0));
		background: -o-linear-gradient(top, #000000, rgba(0,0,0,0));
		background: linear-gradient(to top, rgba(0,0,0,0), #000000);
	}
	#charactor .bg1{
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: url("../img/bg_chara.jpg");
		background-position: 50% 0;
		background-size: auto 100%;
	}
	#charactor .chara{background-image: none;width: 600px;}
	#charactor .chara::before{background: none;}
	#charactor .chara .slick-slide div{
		padding-top: 420px;
		background-position: 50% 100%;
	}
	#charactor .chara .slick-dots{width: 500px;}
	#charactor .chara .slide-arrow{
		width: 45px;
		height: 45px;
	}
	#charactor .chara .prev-arrow{left: 44px;}
	#charactor .chara .next-arrow{right: 44px;}
	#arrowsC{
		bottom: 50%;
		left: -100px;
		width: calc(100% + 200px);
		height: 45px;
	}
	
	/* 遊び方 */
	#howto{background-size: auto 20px, 60% auto;}
	#howto .leadImg{
		margin: -60px auto 0 auto;
		width: 600px;
	}
	#howto .lead{
		margin: -12px auto 10px auto;
		width: 480px;
	}
	#howto .lead p{
		padding:30px;
		font-size: .15rem;
		width: calc(100% - 100px);
	}
	#howto .lead p span{font-size: .16rem;}
	#howto ul.play{width: 400px;}
	#howto ul.play li{width: 33%;}

	#howto ul.useitem{width: 500px;margin: auto;}
	#howto ul.useitem li{justify-content: center !important;}
	#howto ul.useitem li:nth-child(2) img{width: 36px;}
	#howto ul.useitem li:nth-child(3) img{width: 52px;}
	#howto ul.useitem li:nth-child(4) img{width: 50px;}
	#howto ul.useitem li div:first-child{width: 85px;}
	#howto ul.useitem li div:nth-child(2){width: 300px;}
	#howto ul.useitem li .ttl{font-size: .15rem;}


	/* ゲームの流れ */
	#howto .howtoWrap ul li::after{top:50px;}
	.first{
		margin: 30px auto;
		padding: 40px 30px;
		font-size: .14rem;
		width: 500px;
	}
	.first .ttl{
		font-size: .16rem;
		padding-bottom: 10px;
		margin-bottom: 20px;
	}
	
	/* 謎 */
	#nazo{margin: 80px auto 0 auto;}
	#nazo .nazoImg{
		position: relative;
		margin: 0 auto;
		width: 740px;
	}
	#nazo dl.hint{
		width: 600px;
		margin: 40px auto 0 auto;
	}
	#nazo dl.hint dt{padding: 10px 20px;}
	#nazo dl.hint dd{
		padding: 20px;
		font-size: .13rem;
	}
	#nazo #err{
		padding: 15px 0;
		font-size: .12rem;
	}
	.inputArea{margin: 40px auto;}
	.inputArea .inputTxt{
		display: block;
		margin:  20px auto 0 auto;
		padding: 0 5px;
		width: 500px;
		font-size: .14rem;
	}
	.inputArea .btn_send{ 
		width: 8em;
		padding: 10px;
		font-size: .14rem;
		font-weight: 900;
	}
	.resultImg{ 
		margin: 40px auto;
		width: 740px;
	}
	.snsNazoShare li{width: 50px;}

	/* グッズ */
	#goods{margin: 80px auto 120px auto;}
	#goods ul{width: 700px;}
	#goods ul li{margin: 0 auto 60px auto;}
	#goods ul li .goodsImg{width: 300px;}
	#goods ul li .goodsTxt{
		margin: 0 0 0 30px;
		width: 360px;
	}
	#goods ul li .goodsTxt .name{
		font-size: .20rem;
		margin: 0 auto 20px auto;
		text-align: left;

	}
	#goods ul li .goodsTxt .price{
		text-align: left;
		padding: 0 5px 5px 5px;
	}
	#goods ul li .goodsTxt .spec{text-align: left;}
	#goods .shop{
		margin: 0 auto 60px auto;
		padding: 30px 20px 0 20px;
		font-size: .14rem;
		width: 500px;
	}
	#goods .shop .ttl{font-size: .16rem;}
	#goods .goodsrelease{
		margin:10px auto 30px auto;
		font-size: .16rem;
	}
	.btn_buyKit img{
		margin: 40px auto 120px auto;
		width: 380px;
	}

	.precautions{
		padding: 120px 0;
		background-image: url("../img/bar03.png"), url("../img/bar03.png"), url("../img/bg_precautions.jpg");
		background-size: auto 20px, auto 20px, 100% 100%;
	}
	#limit .contetsWrap, #caution .contetsWrap, #faq .contetsWrap{width: 800px;}


	/* 利用制限 */
	#limit{padding: 0 0 30px 0;}
	#limit dl{
		margin: 60px auto;
		width: 680px;
	}

	/* 注意事項 */
	#caution{padding: 0 0 30px 0;}
	#caution dl{
		margin: 60px auto;
		width: 680px;
	}
	#caution .caution{text-align: left;}

	/* よくある質問 */
	#faq{padding: 0 0 30px 0;}
	#faq h4{width: 680px;}
	#faq dl{
		margin: 20px auto 60px auto;
		width: 680px;
	}
	#faq dl dd p{text-align: left !important;}


	#testCaution{width: 960px;}
	#testCaution p{padding: 0 30px;}
	

}