@media only screen and (max-width:640px){
#header-wrapper{
	height:55px;
}

#header{
	max-width:100%;
	margin:0 auto;
	padding:15px 10px 0;
}

h1 a img{
	height:28px;
}

#nav {
	float:right;
	padding:4px 0 0;
}

#nav li{
	padding-left:5px;
}

#nav li a{
	font-size:14px;
	line-height:24px;
	height:24px;
	border:1px solid #3dbfb8;
	border-radius:11px;
	padding:0 5px;
}


#section-wrapper{
	padding-top:55px;
}

/*--top--*/
#top{
	height:auto;
	padding:30px 15px;
	overflow:hidden;
}

#top > *{
	position:relative;
	left:auto;
	top:auto;
}

#top > .desc{
	margin:0;
	font-size:20px;
	line-height:2.0;
}

#top > .desc{
	-webkit-transition: all 0 ease;
	   -moz-transition: all 0 ease;
	    -ms-transition: all 0 ease;
	     -o-transition: all 0 ease;
	        transition: all 0 ease;
}

#top.st > .desc{
	opacity:0;
	-webkit-transform: translate3D(-20px,0,0);
	   -moz-transform: translate3D(-20px,0,0);
	    -ms-transform: translate3D(-20px,0,0);
	     -o-transform: translate3D(-20px,0,0);
	        transform: translate3D(-20px,0,0);
}

#top > .mrk{
	margin:0;
	display:-webkit-box;
	display:box;
	display:none;
	-webkit-box-pack:center;
	box-pack:center;
	-webkit-box-align:center;
	box-align:center;
	
	letter-spacing:-0.1em;
	color:#3dbfb8;
	text-align:center;
	font-size:12px;
	line-height:1.4;
	background:#fff;
	width:89px;
	height:89px;
	border-radius:45px;
}

#top > .mrk{
	-webkit-transition: all 0 ease;
	   -moz-transition: all 0 ease;
	    -ms-transition: all 0 ease;
	     -o-transition: all 0 ease;
	        transition: all 0 ease;
}

#top.st > .mrk{
	opacity:0;
	-webkit-transform: scale3d(0.5, 0.5, 0);
	   -moz-transform: scale3d(0.5, 0.5, 0);
	    -ms-transform: scale3d(0.5, 0.5, 0);
	     -o-transform: scale3d(0.5, 0.5, 0);
	        transform: scale3d(0.5, 0.5, 0);
}

#top > .btns{
	margin:0;
	padding:20px 0;
	display:-webkit-box;
}

#top > .btns li{
	width:50%;
	padding-bottom:0;
	-webkit-transition: all 0 ease;
	   -moz-transition: all 0 ease;
	    -ms-transition: all 0 ease;
	     -o-transition: all 0 ease;
	        transition: all 0 ease;
}
#top > .btns li:first-child{
	padding-right:5px;
}

#top > .btns li:last-child{
	padding-left:5px;
	-webkit-transition: all 0 ease;
	   -moz-transition: all 0 ease;
	    -ms-transition: all 0 ease;
	     -o-transition: all 0 ease;
	        transition: all 0 ease;
}

#top.st > .btns li{
	opacity:1;
	-webkit-transform: translate3D(0,0,0);
	   -moz-transform: translate3D(0,0,0);
	    -ms-transform: translate3D(0,0,0);
	     -o-transform: translate3D(0,0,0);
	        transform: translate3D(0,0,0);
}


#top > .btns li a{
	display:block;
	line-height:0;
}

#top > .btns li a img{
	width:100%;
}


#top > .iphone{
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	margin:0 auto;
	width:150px;
	height:319px;
	padding:0;
	line-height:0;
	background:url(../img/iphone2.png) center center no-repeat;
	background-size:100% auto;
}

#top > .iphone{
	-webkit-transition: all 0s ease 0s;
	   -moz-transition: all 0s ease 0s;
	    -ms-transition: all 0s ease 0s;
	     -o-transition: all 0s ease 0s;
	        transition: all 0s ease 0s;
}

#top.st > .iphone{
	margin-top:0;
	-webkit-transform: translate3D(0,0,0);
	   -moz-transform: translate3D(0,0,0);
	    -ms-transform: translate3D(0,0,0);
	     -o-transform: translate3D(0,0,0);
	        transform: translate3D(0,0,0);
}


#top > .iphone img{
	display:none;
	width:100%;
	-webkit-transition: all 0.4s ease 0s;
	   -moz-transition: all 0.4s ease 0s;
	    -ms-transition: all 0.4s ease 0s;
	     -o-transition: all 0.4s ease 0s;
	        transition: all 0.4s ease 0s;
}


#top.st > .iphone img{
	width:100%;
	opacity:1;
}


#top > .presentedby{
	text-align:center;
	margin:0;
}

#top > .presentedby img{
	height:13px;
}


#top > .presentedby{
	-webkit-transition: all 0s ease 0s;
	   -moz-transition: all 0s ease 0s;
	    -ms-transition: all 0s ease 0s;
	     -o-transition: all 0s ease 0s;
	        transition: all 0s ease 0s;
}

#top.st > .presentedby{
	opacity:0;
	-webkit-transform: translate3D(0,-20px,0);
	   -moz-transform: translate3D(0,-20px,0);
	    -ms-transform: translate3D(0,-20px,0);
	     -o-transform: translate3D(0,-20px,0);
	        transform: translate3D(0,8-20px,0);
}

/*menu*/
#menu{
	line-height:0;
	text-align:center;
	background:#9ee3df;
	padding:25px 0;
}

#menu li{
	display:inline-block;
	padding:0 10px;
}

#menu li a{
	width:80px;
	height:80px;
	border-radius:40px;
	background:#fff;
}
#menu li a img{
	width:100%;
	
}

#menu li a:hover{
	background:#3dbfb8;
}
#menu li{
	transition: all 0.4s ease-out;
}
#menu li:nth-child(2){
	transition: all 0.4s ease-out 0s;
}
#menu li:nth-child(3){
	transition: all 0.4s ease-out 0s;
}

#menu.st  li{
	opacity:1;
	transform: scale3d(1, 1, 1);
}
/**/

#howto{
	height:auto;
	min-height:0;
	background:url(../img/bg-about.jpg) center 0 no-repeat!important;
	background-size:cover;
	padding:20px 0;
}

#howto > *{
	position:relative;
	top:auto;
}

#howto h2{
	font-size:20px;
	left:auto;
	width:100%;
	margin-top:0;
	padding-bottom:20px;
	text-shadow:0 5px 7px rgba(0,0,0,0.2);
}

#howto h2{
	-webkit-transition: all 0s ease;
	   -moz-transition: all 0s ease;
	    -ms-transition: all 0s ease;
	     -o-transition: all 0s ease;
	        transition: all 0s ease;
}

#howto.st h2{
	opacity:1;
	-webkit-transform: translate3D(0,0,0);
	   -moz-transform: translate3D(0,20px,0);
	    -ms-transform: translate3D(0,20px,0);
	     -o-transform: translate3D(0,20px,0);
	        transform: translate3D(0,0,0);
}

#howto .title-wrapper{
	left:auto;
	margin:0 auto;
	width:300px;
	height:31px;
	overflow:hidden;
	margin-bottom:10px;
}


#howto .title-wrapper{
	-webkit-transition: all 1s ease 0s;
	   -moz-transition: all 1s ease 0s;
	    -ms-transition: all 1s ease 0s;
	     -o-transition: all 1s ease 0s;
	        transition: all 0s ease 0s;
}

#howto.st .title-wrapper{
	opacity:1;
	-webkit-transform: translate3D(0,0,0);
	   -moz-transform: translate3D(0,0,0);
	    -ms-transform: translate3D(0,0,0);
	     -o-transform: translate3D(0,0,0);
	        transform: translate3D(0,0,0);
}

#howto .titles{
	width:300%;
}

#howto .titles li{
	text-align:center;
	color:#43bbac;
	font-size:14px;
	line-height:31px;
	float:left;
	width:300px;
	height:31px;
	border-radius:16px;
}


#howto .img-wrapper{
	left:auto;
	margin:0 auto 20px;
	width:124px;
	height:255px;
	overflow:hidden;
	padding: 30px 7px 31px;
}

#howto .img-wrapper{
	-webkit-transition: all 1s ease 0s;
	   -moz-transition: all 1s ease 0s;
	    -ms-transition: all 1s ease 0s;
	     -o-transition: all 1s ease 0s;
	        transition: all 0s ease 0s;
}

#howto.st .img-wrapper{
	margin-top:0;
	-webkit-transform: translate3D(0,0,0);
	   -moz-transform: translate3D(0,0,0);
	    -ms-transform: translate3D(0,0,0);
	     -o-transform: translate3D(0,0,0);
	        transform: translate3D(0,0,0);
}
#howto .imgs{
	width:100%;
}

#howto .imgs li{
	float:left;
	width:100%;
}
#howto .imgs li .y img{
	width:196px;
}

#howto .imgs li > img{
	width:100%;
}


#howto .arr{
	position:absolute;
	left:auto;
	top:50%;
	margin-top:-38px;
	cursor:pointer;
	height:62px;
}
#howto .arr img{
	height:100%;
}



#howto .arr{
	-webkit-transition: all 1s ease 0s;
	   -moz-transition: all 1s ease 0s;
	    -ms-transition: all 1s ease 0s;
	     -o-transition: all 1s ease 0s;
	        transition: all 0s ease 0s;
}
#howto.st .arr{
	opacity:1;
}

#howto .arr.ar-l{
	left:10px;
	margin-left:0;
}
.ar-r{
	right:10px;
	margin-left:0;
}

#howto > .ctl {
	margin:0;
	left:auto;
}

#howto > .ctl li {
	width: 80px;
	height: 80px;
	border-radius: 40px;
	margin: 0 10px;
	font-size: 12px;
}

#howto > .ctl li.rem {
  font-size: 12px;
}
#about{
	height:auto;
	padding:0 0 0;
}
#about > *{
	display:none!important;
	position:relative;
	top:auto;
	left:auto;
}

#about > #sp_about{
	display:block!important;
	line-height:0;
}
#sp_about ul{
	position:relative;
}
#sp_about ul li{
	position:absolute;
	left:0;
	top:0;
	opacity:0;
	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
	    -ms-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
	        transition: all 0.5s ease;

}

#about.a0 > #sp_about ul li:nth-child(1),
#about.a1 > #sp_about ul li:nth-child(2),
#about.a2 > #sp_about ul li:nth-child(3),
#about.a3 > #sp_about ul li:nth-child(4),
#about.a4 > #sp_about ul li:nth-child(5),
#about.a5 > #sp_about ul li:nth-child(6),
#about.a6 > #sp_about ul li:nth-child(7),
#about.a7 > #sp_about ul li:nth-child(8),
#about.a8 > #sp_about ul li:nth-child(9),
#about.a9 > #sp_about ul li:nth-child(10){
	opacity:1;
}

#sp_about img{
	width:100%;
}

#about > .ctl{
	display:block!important;
	top:auto;
	left:auto;
	bottom:auto;
	padding:10px 0;
}

#about > .ctl li{
	text-align:center;
	font-size:15px;
	width:25px;
	height:25px;
	line-height:25px;
	border-radius:15px;
	border:1px solid #fff;
	margin:0 2px;	
}




#nh{
	height:120px;
}

#nh.st li div{
	-webkit-transform: scale3d(1, 1, 1);
	   -moz-transform: scale3d(1, 1, 1);
	    -ms-transform: scale3d(1, 1, 1);
	     -o-transform: scale3d(1, 1, 1);
	        transform: scale3d(1, 1, 1);
}
#nh li img{
	width:70%;
}

#nh img{
	display:block;
}

#footer{
	font-size:10px;
	text-align:center;
	background:#3dbfb8;
	padding:15px 0 15px;
}

#footer a{
	color:#fff;
}

#footer ul{
	padding-bottom:10px;
}
#footer li{
	padding:0 0.5em 0.5em;
}
#footer p{
	padding-top:0;
}

.kiyaku{
	padding: 30px 20px 60px;
}

}