*{
	margin: 0;
	padding: 0;
	list-style: none;
	border:0px;
}
html,body{
	background: #3fa6e9;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.container{
	position: relative;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .4s;
	-ms-transition: .4s;
	-moz-transition-property: opacity;
	-moz-transition-duration: .4s;
}
.cnt-inner{
	position: relative;
	width: 90%;
	max-width: 980px;
	margin: 0 auto;
}
.store-link{
	display: inline-block;
	width: 221px;
	height: 63px;
	background: url(../images/btn-appstore.png) no-repeat;
	-webkit-transition: .4s;
	-ms-transition: .4s;
	-moz-transition-property: opacity;
	-moz-transition-duration: .4s;
}
.google-link{
	display: inline-block;
	width: 190px;
	height: 63px;
	background: url(../images/btn-google.png) no-repeat;
	-webkit-transition: .4s;
	-ms-transition: .4s;
	-moz-transition-property: opacity;
	-moz-transition-duration: .4s;
}
.google-link:hover,
.store-link:hover{opacity: 0.7;}
/*///////////////////////////////
//////////////////////////////*/
h1{
	width: 100%;
	max-width: 791px;
	padding-bottom: 33%;
	margin: 60px auto 0;
	background: url(../images/logo.png) no-repeat center top;
	background-size: 100% auto;
	-webkit-transition: .4s;
	-ms-transition: .4s;
	-moz-transition-property: transform;
	-moz-transition-duration: .4s;
	-webkit-transform: scale(0);
	        transform: scale(0);
}
.onload h1{
	animation: scaleIn .6s ease forwards;
	-webkit-animation: scaleIn .6s ease forwards;
}
@keyframes scaleIn {
	0%{ transform:scale(0);}
	86%{ transform:scale(1.2);}
	100%{ transform:scale(1);}
}
@-webkit-keyframes scaleIn {
	0%{ transform:scale(0);}
	86%{ transform:scale(1.2);}
	100%{ transform:scale(1);}
}

.mainvisual{
	position: relative;
	width: 100%;
	background: url(../images/bg.jpg) no-repeat center bottom;
	background-size: 100% auto;
}
.mainvisual .set{
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	overflow: hidden;
}
.mainvisual .set img{
	max-width: 100%;
	vertical-align: middle;
}
.sogo{
	position: absolute;
	top: 0;
	left: 0;
	width: 20%;
	height: 100%;
}
.sogo img,.felia img{position: absolute; bottom: 0;}

.iphone{
	position: relative;
	width: 55%;
	margin: 0 auto;
}
.iphone .cover{
	position: absolute;
	top: 15.5%;
	left: 12%;
	width: 72%;
	height: 67%;
	background: #000;
	padding: 1%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.felia{
	position: absolute;
	top: 0;
	right: 0;
	width: 25%;
	height: 100%;
	vertical-align: middle;
}


/*///////////////////////////////
//////////////////////////////*/
.info{
	background: #e9fff8;
	overflow: hidden;
	padding: 90px 0;
}
.app-box{
	width: 100%;
	max-width: 465px;
	margin: 0 auto;
	overflow: hidden;
}
.icon{
	float: left;
}
.icon i{
	display: block;
	width: 163px;
	height: 163px;
	margin: 0 auto;
	background: url(../images/appicon.png) no-repeat;
}
.store{float: right; padding-top: 70px; max-width: 230px; position: relative;}
.store span{font-size: 13px;}
.info-txt{
	width: 100%;
	text-align: center;
	padding: 50px 0;
}
.info-txt img{max-width: 100%;}
/*///////////////////////////////
//////////////////////////////*/
.screenshot{
	width: 100%;
	overflow: hidden;
}
.sc-item{
	float: left;
	width: 25%;
	text-align: center;
}
.sc-item img{max-width: 98%;}
@media (max-width:800px) {
	.sc-item{width: 50%;}
	.info{padding: 50px 0;}
}
@media (max-width:500px) {
	.icon{
		float: none;
		width: 100%;
	}
	.store{
		float: none;
		width: 100%;
		padding: 30px;
		margin: 0 auto;
		text-align: center;
	}
}
/*///////////////////////////////
//////////////////////////////*/
.moura{
	position: absolute;
	top: -70px;
	right: 0;
	width: 100%;
	max-width: 360px;
	height: 214px;
	margin: 0 auto;
}
.ch{
	position: absolute;
	bottom: 0;
	right: 0px;
	width: 42%;
	height: 57%;
	background: url(../images/moura.png) no-repeat right;
	background-size: 100%;
}
.ballon{
	position: absolute;
	top: 0;
	left: 0;
	width: 66%;
	height: 72%;
	background: url(../images/moura-ballon.png) no-repeat;
	background-size: 100%;

	animation: scaleAnime 1s ease infinite alternate;
	-webkit-animation: scaleAnime 1s ease infinite alternate;
}
@keyframes scaleAnime {
	0%{ transform:scale(1);}
	100%{ transform:scale(1.1);}
}
@-webkit-keyframes scaleAnime {
	0%{ transform:scale(1);}
	100%{ transform:scale(1.1);}
}


@media (max-width:850px) {
	.moura{
		position: absolute;
		top: -40px;
		width: 40%;
		height: auto;
		padding-bottom: 25%;
	}
	.app-box{
		padding-top: 40px;
	}
}
@media (max-width:420px) {
	.moura{
		width: 65%;
		padding-bottom: 35%;
	}
}


/*///////////////////////////////
//////////////////////////////*/
.stage-howto{
	position: relative;
	width: 100%;
	position: relative;
	background: url(../images/bg-stage0.gif) center top;
	text-align: center;
}
.stage-howto::before{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bg-stage0_pat.gif) center top;
}
.stage-howto .cnt-inner{
	padding: 90px 0;
	background: url(../images/bg-stage0.gif) center top;
}



.howto{
	position: relative;
	width: 100%;
	max-width: 846px;
	margin: 0 auto;
}
.howto .cover{
	position: absolute;
	top: 0;
	left: 0;
}

.cover-a{display: none;}
.cover-b{display: block;}

.view .cover-a{display: block;}
.view .cover-b{display: none;}


.howto img{
	max-width: 100%;
}
/*///////////////////////////////
//////////////////////////////*/
.stage-item{
	position: relative;
	width: 100%;
	background: url(../images/bg-stage1.gif);
	text-align: center;
}
.stage-item .cnt-inner{
	padding: 90px 0;
	background: url(../images/bg-stage1.gif);
}
.stage-item::before{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bg-stage1_pat.gif) center top;
}
.stage-item img{max-width: 100%;}
/*///////////////////////////////
//////////////////////////////*/
.app-info{
	position: relative;
	text-align: center;
	width: 100%;
	overflow: hidden;
	background: #e9fff8;
	padding: 30px 0;
}
.s-logo{
	margin: 0 auto 20px;
	width: 321px;
	height: 104px;
	background: url(../images/logo-min.png) no-repeat;
	-webkit-background-size: 100% auto;
	     -o-background-size: 100% auto;
	        background-size: 100% auto;
}
.app-list{
	position: relative;
	width: 100%;
	overflow: hidden;
}
.app-item{
	width: 50%;
	float: left;
}
.app-game{
	position: relative;
	width: 100%;
	height: 200px;
	background: url(../images/app-game.png) no-repeat center top;
}
.app-official{
	position: relative;
	width: 100%;
	height: 200px;
	background: url(../images/app-official.png) no-repeat center top;
}
.app-item .link{
	padding-top: 30px;
}

@media (max-width:800px) {
.app-item{
	width: 100%;
	float: none;
	margin-bottom: 30px;
}
}
@media (max-width:500px) {
	.s-logo{
		width: 90%;
	}
}
/*///////////////////////////////
//////////////////////////////*/
.developer{
	width: 100%;
	background: #DADADA;
	overflow: hidden;
	padding: 20px 0;
}
.company-list{
	width: 100%;
	overflow: hidden;
}
.company-item{
	width: 50%;
}


.junni{float: left;}
.tuneya{float: right;}
.role{
	margin-right: 20px;
}
.company-logo{
	margin-right: 20px;
}


.junni .role{
	float: left;
	width: 108px;
	height: 150px;
	background: url(../images/role-junni.jpg) left center no-repeat;
}
.tuneya .role{
	float: left;
	width: 76px;
	height: 150px;
	background: url(../images/role-tuneya.png) left center no-repeat;
}
.junni .company-logo{
	float: left;
	width: 85px;
	height: 150px;
	background: url(../images/logo-junni.png) left center no-repeat;
}
.tuneya .company-logo{
	float: left;
	width: 28px;
	height: 150px;
	background: url(../images/logo-tuneya.png) left center no-repeat;
}
.company-info{
	float: left;
	width: 140px;
	padding: 10px;
	font-size: 14px;
}
.company-info{
	padding: 10px;
	font-size: 12px;
}
.company-info a{
	color: #FFF;
}
@media (max-width:900px) {
	.company-item{
		float: none;
		width: 100%;
		max-width: 430px;
		margin: 0 auto;
		overflow: hidden;
	}
	.tuneya .role{width: 108px;}
	.tuneya .company-logo{width: 85px; background-position: center center;}
}
@media (max-width:500px) {
	.company-item{
		margin-bottom: 50px;
	}
	.junni .role,.tuneya .role{width: 100%; height: 25px; background-position: center top;}
	.junni .company-logo,.tuneya .company-logo{width: 100%; background-position: center center; margin: 15px 0;}
	.junni .company-logo{height: 30px;}
	.tuneya .company-logo{height: 94px;}
	.company-info{
		float: none;
		width: 100%;
	}
	.company-info p{padding: 5px 0;}
	.company-info span,.company-info a{display: block;}
}

/*///////////////////////////////
//////////////////////////////*/
.sns-area{
	position: relative;
	width: 100%;
	background: #FFF;
	padding: 70px 0;
}
.sns-list{
	width: 100%;
	text-align: center;
}
.sns-item{
	display: inline-block;
	padding: 0 20px;
}

/*///////////////////////////////
//////////////////////////////*/
small.copyright{
	display: block;
	width: 100%;
	text-align: center;
	font-size: 10px;
	padding: 10px 0;
}