@charset "UTF-8";
/* CSS Document */


/* 共通設定 */
*{padding:0; margin:0;}
h1,h2,h3,h4,h5,p,hr,ul,li,ol,img{margin:0; padding:0; border:0;}
small{font-style:normal; font-size:100%; text-align:center; color:#fff;}
img{border:0;}
ul li{list-style:none;}

header,footer,section,nav,figure,article,hgroup,dialog,aside{margin:0; padding:0; display:block;}

html,body{width:100%; height:100%;}

body{padding:0; margin:0; background:#000; color:#fff; font-size:12px; line-height:1.3em; 
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
a{text-decoration:none; }

/* contents */
.swiper-container{width:100%; height:100%;}
.page01 {background:url(../images/page01.jpg) no-repeat 0 bottom; background-size:cover;}
.page02 {background:url(../images/page02.jpg) no-repeat 0 15%; background-size:cover;}
.page03 {background:url(../images/page03.jpg) no-repeat 0 15%; background-size:cover;}
.page04 {background:url(../images/page04.jpg) no-repeat 0 15%; background-size:cover;}

article {width:100%; height:100%;}
article p{text-indent:120%; overflow:hidden; white-space:nowrap; }
.page01 article {background:url(../images/article01.png) no-repeat left 10%; background-size:60% auto;}
.page02 article {background:url(../images/article02.png) no-repeat left 60%; background-size:60% auto;}
.page03 article {background:url(../images/article03.png) no-repeat left 60%; background-size:60% auto;}
.page04 article {background:url(../images/article04.png) no-repeat left 10%; background-size:60% auto;}
.install_btn {position:absolute; top:52%; padding:0 15px; width:100%; box-sizing:border-box;}
.install_btn p{position:relative; height:0; padding-top:30%;}
.install_btn p a{position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/install.png) no-repeat center center; background-size:contain; text-indent:120%; overflow:hidden; white-space:nowrap; display:block;}

div#pointer01 {animation: swipointer 1.2s; animation-iteration-count:infinite; -webkit-animation: swipointer 0.8s; -webkit-animation-iteration-count:infinite;  position:absolute; bottom:80px; right:5%; width:50px; height:65px; background:url(../images/pointer.png) no-repeat 0 0; background-size:contain;}
div#pointer02 {animation: pointap 1.2s; animation-iteration-count:infinite; -webkit-animation: pointap 0.8s; -webkit-animation-iteration-count:infinite;  position:absolute; top:70%; right:5%; width:50px; height:65px; background:url(../images/pointer.png) no-repeat 0 0; background-size:contain;}

@keyframes swipointer {
	0%   {transform: translate(0px,0px);}
	50%  {transform: translate(-60px,0px);}
	100% {transform: translate(-60px,0px); opacity:0;}
}

@-webkit-keyframes swipointer {
	0%   {-webkit-transform: translate(0px,0px);}
	50%  {-webkit-transform: translate(-60px,0px);}
	100% {-webkit-transform: translate(-60px,0px); opacity:0;}
}

@keyframes pointap {
	0%   {transform: translate(0px,0px);}
	50%  {transform: translate(0px,-20px);}
	100% {transform: translate(0px,-20px); opacity:0;}
}

@-webkit-keyframes pointap {
	0%   {-webkit-transform: translate(0px,0px);}
	50%  {-webkit-transform: translate(0px,-20px);}
	100% {-webkit-transform: translate(0px,-20px); opacity:0;}
}

.cl{display:none;}
#sa .app{display:none;}
#sa .cl{display:block;}

/* footer */
footer {position:fixed; bottom:0; width:100%; height:68px; background:rgba(0,0,0,0.5); z-index:10;} 
footer h2 {margin-left:10px; float:left; }
footer h2 span{width:80px; height:68px; text-indent:100%; overflow:hidden; white-space:nowrap; display:block;}
.logo {background:url(../images/logo.png) no-repeat center center; background-size:contain;}
footer p {width:98px; height:68px; text-indent:100%; overflow:hidden; white-space:nowrap; background:url(../images/text.png) no-repeat 0 0; background-size:100% 100%; float:left;}
.store_btn {float:right; margin:17px 10px 0 0;}
.store_btn a{display:block; text-indent:100%; overflow:hidden; white-space:nowrap; background:url(../images/store_btn.png) no-repeat; background-size:118px 73px;} 
.ios .store_btn a{width:118px; height:35px; background-position:0 0;}
.android .store_btn a{width:118px; height:38px; background-position:0 -36px;}

/* clearfix各バージョン */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-table;
	min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/* clearfix各バージョンここまで */