/*變數*/
@import url('../var.css');

/* CSS Document */
html{height:100%;}
body{
	font-size:15px;line-height:1.8;color:#333;
	font-family:var(--en),var(--jp), sans-serif;
	font-weight:400;letter-spacing:.1em; 
	height:100%;
}

/*****************************Layout*****************************************/

.wrapper{}

#fullpage{height:inherit;}

#fullpage>.section{
	background-size:cover;
	position:relative;
	overflow:hidden;
	opacity: 1;
	transition:all .7s;
	
}

#fullpage>.section.active,#fullpage>.section .slide.active{
	opacity: 1;
}

#fullpage>.section>div{
	vertical-align:top;
}


#fullpage>.section .content{display:contents;}

#fullpage .fp-scroller{display:contents;}
.iScrollIndicator{
	background: rgb(0 0 0 / 15%) !important;
	width:50%  !important;
}

/*****************************Header Start*****************************************/
header{position:fixed;right:30px;top:40px;z-index:9999;display: flex;}

header article{text-align:right;}
header article h4{
						font-family: 'Montserrat', serif;
						font-weight: 200;
						color:#fff;
						font-size:3em;
						letter-spacing:0;
						text-shadow: 0 0 5px rgba(0,0,0,.5);
						transition: all .5s;
						line-height:1em;
						text-transform:uppercase;
						margin-bottom:.3em;

					}

header article:after{
	width:80px;
	height: 1px;
	background:#fff;
	content: "";
	display: block;
}



/*txt**********************************/

.title{
	filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, .2));
	height:90px;
}


/*kv*/
.caution{background-image:url(../../images/_mb/kv/caution.jpg);}
.gallery{background-image:url(../../images/_mb/kv/gallery.jpg);}
.features{background-image:url(../../images/_mb/kv/features.jpg);background-position:left bottom;}
.bonus{
	background-image:url(../../images/_mb/kv/bonus.jpg);
	background-position:left bottom;
}	

/*Nav************************************/
.topLogo{
	position:absolute;left:50px;top:30px;z-index: 9999;
	transition: all .7s;
	transition-timing-function:var(--easeBack);
	height: 100px;
	filter:var(--shadow);
}

.fp-viewing-home .topLogo{
	transform:translateY(calc(-100% - 40px));
}



/*社群選單*/
.socialIco{
	position:fixed;
	left:1px;
	/* top:65px; */
	bottom: 60px;
	z-index: 999;
	text-align:center;
	filter:var(--shadow);
	transition: all .7s;
	/* display:none; */
}

.socialIco img{
	width:60px;
	margin-bottom:5px;
	/* border:1px solid #fff;border-radius:18px; */
}

.socialIco a{display:block;}
.socialIco a:hover{
	transform:translateY(10px);
}

.socialIco h5{
	color:#fff;font-weight:400;font-size:12px;letter-spacing:.1em;
	font-family:var(--cn);
}


.fp-viewing-home .socialIco h5,
.fp-viewing-caution .socialIco h5,
.fp-viewing-features .socialIco h5
{
	color:#333;font-weight:600;
}

.fp-viewing-gallery .socialIco{
	/* transform:translateX(150%); */
}

/*右側選單*/
.btnMove{position:absolute;z-index: 10;bottom:70px;right: 10px;transition:all .5s;}
.btnMove a{display:block;}
.btnMove img{width:35px;}

.fp-viewing-home .btnTop,
.btnNext:not(.fp-viewing-home .btnNext)
{
	opacity:0;
}

.fp-viewing-home .btnNext
{
	filter: brightness(0.2);
	bottom:10px;
}

.fp-viewing-features .btnTop,
.fp-viewing-caution .btnTop,
.fp-viewing-footer .btnTop
{
	filter: brightness(0.2);
}



/*animate*/

@keyframes moveBack {
  from {}
  to {transform:translate3d(0,10%,0);}
}

.moveBack {
	animation-name:moveBack;
	animation-iteration-count: infinite;
	animation-duration: .7s;
	animation-direction: alternate;  
}


/*storeDownload*/
.storeDownload{
	position:fixed;z-index: 99999;
	text-align:center;transition:all .7s;
	width:180px;
	right:40px;
	bottom: 130px;
}

.storeDownload .store a{display:block;margin-bottom:10px;}
.storeDownload .store img{
	filter:var(--shadow);
}
.storeDownload.ft{transform:translateY(-70px);}
.storeDownload.none{transform:translateX(150%);}

.storeDownload .btnIOS img{
	height: 40px;
	width: auto;
}

/*btnVideo*/
.btnVideo{display:block;position:relative;}
.btnVideo:before{
	width:40px;
	height: 40px;
	left: 50%;
	top: 45%;
	position:absolute;
	transform:translate3d(-50%, -50%, 0px);
	content: "";
	background:no-repeat center center ;
	background-image:url(../../images/ico/play.svg);
	z-index: 10;
	transition: all .3s;
}

.btnVideo:hover:before{
	transform:translate3d(-50%, -50%, 0px) scale(1.2) ;
}

.videoYT{
	width:100%;
	padding-bottom: 52.65%;
	position:relative;
}

.videoYT iframe{
	width:100%;
	height:100%;
	position:absolute;
	left: 0;
	top:0;
}


/*****************************Header End*****************************************/

/*****************************Footer Start*****************************************/

.footer{
	  min-height: 0 !important;
}

footer{
			text-align:center;
			font-size:12px;
			transition:all .7s;
			background-color:#eee;
			color:#333;
			padding-top:10px;
			padding-bottom:80px;
			margin-top:80px;
		}

footer .footerLogo{text-align:center;flex:1;margin-bottom:10px;}
footer .footerLogo img{
	/* margin-top:30px;
	margin-bottom:30px; */
	width:15%;
	margin: 3px 15px;
	/* display: block; */
	border-radius: 15px;
}

footer .footerLogo img.game_info{
	width: 60%;
}

footer .footerLogo p{font-size:12px;letter-spacing: 0;width:50%;margin:auto;line-height:1.3}

footer .grade{
	text-align: center;
    padding:.5em 4em;
    letter-spacing: 0;
    line-height: 1.5;
}

footer .grade p{
	text-align:center;
	width:90%;
	margin:auto;
	margin-bottom:10px;
}

footer .grade img{height:70px;}


footer:before{
    content: "";
    background-image: url(../../images/share/ft-shadow.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 337px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 5%;
    filter: brightness(0) invert(.93);
    transform:translateY(80px);
    transition:all .3s;
}

footer .fbBtn{
	background: #28466e;
	color:#fff;
	padding: .5em 1em;
}

.footer.active footer:before{
	transform:translateY(0px);
}

/* fancyBox*****************************/
.fancybox-is-open .fancybox-bg{
	opacity: .95;
}

.fancybox-navigation .fancybox-button{
	width:50px;
	height: 50px;
	background:#4185b0;
}

.fancybox-button{
	width:60px;
	height: 60px;
}

.fancybox-button--zoom{display:none !important;}
.fancybox-slide{padding:10px}


/*mobile*/	
@media (max-width:767px)  {
	.topLogo{height: 50px;left:10px;top:10px}
	.title{height:55px;}

	

	.storeDownload{    
		bottom: 0;
	    width: 100%;
	    right: 0;
	    background: #263949;
	    padding: 10px;
  }

	.storeDownload a{display:block;margin:0 5px;}
	.storeDownload img{width:100%;}

}