body{
	background: #00A8EA;
	padding:0px;
	margin:0px;
}
*:focus {
    outline: none;
}

a{
	color:inherit !important;
	text-decoration:none !important;
}
.blocker{
	z-index: 10;
	padding:20px 0px;
}
.modal{
	padding-top:60px;
	z-index: 10;
}
.modal-close{
	border:1px solid #00A8EA;
	color:#00A8EA;
	position:absolute;
	height:40px;
	line-height: 40px;
	border-radius:20px;
	display:flex;
	align-items:center;
	font-size:22px;
	justify-content:center;
	width:40px;
	top:5px;
	right:5px;
	text-align:center;
	cursor: pointer;
}

.game-wrapper{
	margin:auto;
	width:100%;
	max-width:414px;
	background-color:#fff;
	position:relative;
}

.game-wrapper .game{
	margin:auto;
	width:100%;
	height: calc( 100% / 414px * 736px );
	background-color:#fff;
}
.game-wrapper .game > div{
	display:none;
}

.cover{
	width:100%;
	min-height:100%;
	background-size:100%;
	background-repeat:no-repeat;
}

.cover .cover-top{
	text-align:center;
	height:45px;
	line-height: 45px;
}
.cover .cover-top img{
	vertical-align:middle;
	margin-right:5px;
}

.cover .sns-line{
	position:absolute;
	top:55px;
	left:10px;
	z-index:1;
	cursor: pointer;
	width:40px;
}
.cover .sns-fb{
	position:absolute;
	top:10px;
	left:10px;
	z-index:1;
	cursor: pointer;
	width:40px;
}

.button{
	width:240px;
	height: 65px;
	line-height: 65px;
	border-radius:33px;
	border: 2px solid #000000;
	background-color:#fff;
	text-align:center;
	cursor: pointer;
}
.button:hover{
	background-color:#000;
	color:#fff;
}

.button-sm{
	width:240px;
	height: 40px;
	line-height: 40px;
	border-radius:20px;
	border: 2px solid #000000;
	background-color:#fff;
	text-align:center;
}

.button-blue{
	color:#fff;
	border: 2px solid #00A8EA;
	background-color:#00A8EA;
}

.cover .button-start{
	position:absolute;
	bottom:10px;
	left:50%;
	margin-left:-120px;
}

.cover .sponsor{
	/*position:absolute;
	bottom:10px;
	left:0px;*/
	color:#3A3A3A;
	text-align:center;
	width:100%;
}

.howto{
	width:100%;
	height:100%;
	background-size:100%;
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/howto/414X604-bg.jpg);
	background-position:center 55px;
	background-repeat:no-repeat;
}
.howto .howto-top{
	text-align:left;
	height:55px;
	line-height: 55px;
	padding:0px 18px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.howto .howto-top .right-buttons{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.howto .howto-top .right-buttons .sep{
	width:1px;
	height:15px;
	background-color:#E5E5E5;
	margin:0px 15px;
}

.howto .howto-top .switch{
	flex-shrink:0;
	width: 40px;
	height: 40px;
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/audio-off.svg);
	margin:0px 5px;
	cursor: pointer;
}
.howto .howto-top .switch.on{
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/audio-on.svg);
}


.howto .skip{
	text-align:right;
	cursor: pointer;
	font-size:14px;
}

.howto .swiper-steps{
	/*width:85%;*/
	text-align:center;
	height:calc( 68% + 100px );
	margin:60px auto;
}

.howto .gifts{
	position:absolute;
	width:78%;
	top:300px;
	left:50%;
	margin-left:-39%;
}

.howto .rule{
	position:absolute;
	width:100%;
	top:420px;
	left:0%;
	text-align:center;
}

.howto .button-start{
	position:absolute;
	top:470px;
	left:50%;
	margin-left:-120px;
}

.my-avatar{
	width:100px;
	height:215px;
	position:relative;
	margin:auto;
}
.my-avatar > div{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.my-avatar img{
	width:100%;
}
.my-avatar canvas{
	display:none;
}

.avatar .my-avatar-bg{
	background-color:#FFFEF6;
	padding:8px 0px;
}

.avatar .parts-tabs{
	background-color:#E0E0E0;
	display:flex;
	justify-content:space-between;
	width:100%;
}
.avatar .parts-tabs .tab{
	width:16.66%;
	height:45px;
	text-align:center;
	cursor: pointer;
}
.avatar .parts-tabs .tab.on{
	background-color:#00A8EA;
}

.avatar .parts-tabs .tab img{
	height:45px;
}

.avatar .parts-items{
	display:flex;
	flex-wrap:wrap;
}
.avatar .parts-items .item{
	width: calc( 25% - 30px);
	padding:15px;
	cursor: pointer;
}
.avatar .parts-items .item.on{
	background-color:#f3f3f3;
}
.avatar .parts-items .item img{
	width:100%;
}

.avatar .nickname{
	width: calc( 100% - 30px );
	margin:30px 15px 5px 15px;
	border:2px solid #000;
	display:flex;
}
.avatar .nickname .input-nickname{
	border:0px;
	width:calc( 100% - 100px );
	background-color:#fff;
	text-align:center;
	height:60px;
	line-height:60px;
}
.avatar .nickname .button-random{
	background-color:#000;
	color:#fff;
	width:100px;
	height:60px;
	line-height:60px;
	text-align:center;
	cursor: pointer;
}

.avatar .button-avatar{
	margin:15px auto;
}

.avatar .switch,.luggage .switch{
	width: 40px;
	height: 40px;
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/audio-off.svg);
	position:fixed;
	top:10px;
	right:10px;
	cursor: pointer;
}
.avatar .switch.on,.luggage .switch.on{
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/audio-on.svg);
}			}

.luggage{
	background-color:#FFFEF6;
}
.luggage .luggage-bg{
	position:relative;
}
.luggage .luggage-items{
	/*display:flex;*/
	position:absolute;
	left:8%;
	bottom:18%;
	width:79%;
	height:32%;
}
.luggage .luggage-items .item{
	width:25%;
	height:50%;
	text-align:center;
	position:absolute;
	cursor: pointer;
}

.luggage .luggage-items .item:nth-child(1){
	top:0%;
	left:0%;
}
.luggage .luggage-items .item:nth-child(2){
	top:0%;
	left:23%;
}
.luggage .luggage-items .item:nth-child(3){
	top:50%;
	left:12.5%;
}
.luggage .luggage-items .item:nth-child(4){
	top:0%;
	left:50%;
}
.luggage .luggage-items .item:nth-child(5){
	top:0%;
	left:75%;
}
.luggage .luggage-items .item:nth-child(6){
	top:50%;
	left:62.5%;
}


.luggage .luggage-items .item:after{
	content:"X";
	font-size:12px;
	position:absolute;
	top:-5px;
	right:5px;
	width:20px;
	height:20px;
	line-height:20px;
	background-color:rgba(255,255,255,0.5);
	border-radius:20px;
	cursor: pointer;
}
.luggage .luggage-items .item img{
	width:70%;
}

.luggage .candidate-items{
	display:flex;
	align-items:center;
	justify-content:space-around;
	flex-wrap:wrap;
}
.luggage .candidate-items .item{
	width:20%;
	text-align:center;
	margin:15px 0px;
	cursor: pointer;
}
.luggage .candidate-items .item img{
	width:70%;
}
.luggage .button-ready{
	margin:15px auto;
}


.fly{
	padding-top:60px;
}
.fly .sky{
	width:80%;
	margin:0px auto 60px auto;
	position:relative;
}
.fly .sky .airplane{
	position:absolute;
	width:70%;
	top:25%;
	left:15%;
	animation:airplane 1s infinite;
}

@keyframes airplane {
  0% {
  	transform:translateY(0px);
  }
  50% {
  	transform:translateY(10px);
  }
}

.fly .bar{
	width:80%;
	height:10px;
	border-radius:5px;
	border:1px solid #00A8EA;
	margin:30px auto;
	overflow:hidden;
}

.fly .bar .fill{
	width:100%;
	height:100%;
	background-color:#00A8EA;
	animation:bar 3s 1;
}

@keyframes bar {
  0% {
  	width:0%;
  }
  100% {
  	width:100%;
  }
}

.tutorial{
	width:100%;
	height:100%;
	background-size:100%;
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/howto/414X604-bg.jpg);
	background-position:center 55px;
	background-repeat:no-repeat;
}
.tutorial .howto-top{
	text-align:left;
	height:55px;
	line-height: 55px;
	padding:0px 18px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.tutorial .skip{
	text-align:right;
	cursor: pointer;
}

.tutorial .swiper-tutorial{
	/*width:85%;*/
	text-align:center;
	height:calc( 68% + 100px );
	min-height:530px;
	margin:60px auto;
}

.tutorial .button-start{
	position:absolute;
	bottom:60px;
	left:50%;
	margin-left:-120px;
}


.main .top-bar{
	height:60px;
	display:flex;
	padding:0px 15px;
	align-items: center;
	justify-content: space-between;
}
.main .top-bar .thumbnail{
	flex-shrink:0;
	width:36px;
	height:36px;
	border-radius:20px;
	border:2px solid #000;
	overflow:hidden;
}
.main .top-bar .thumbnail img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top;
}
.main .top-bar .nickname{
	text-indent:5px;
	width:50%;
	text-align:left;
	font-weight:600;
}
.main .top-bar .coins{
	width:25%;
	position:relative;
}
.main .top-bar .coins img{
	position:absolute;
	top:-5px;
	left:0px;
}
.main .top-bar .coins .qty{
	width:90%;
	height:20px;
	line-height:20px;
	border-radius:10px;
	text-align:center;
	color:#fff;
	background-color:#000;
	text-indent:20px;
}

.main .top-bar .switch{
	flex-shrink:0;
	width: 40px;
	height: 40px;
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/audio-off.svg);
	margin:0px 5px;
	cursor: pointer;
}
.main .top-bar .switch.on{
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/audio-on.svg);
}

.main .map{
	position:relative;
}
.main .map .place{
	position:absolute;
	height:120px;
	cursor: pointer;
}
.main .map .place.coin:after{
	content:"";
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/gold@2.png);
	width:20px;
	height:20px;
	background-size:contain;
	position:absolute;
	bottom:20px;
	left:0px;
}
.main .map .place-1{
	top:10px;
	right:30px;
}
.main .map .place-2{
	top:130px;
	left:27px;
}
.main .map .place-3{
	top:100px;
	left:140px;
}
.main .map .place-4{
	top:260px;
	left:30px;
}
.main .map .place-5{
	top:240px;
	left:140px;
}
.main .map .place-6{
	bottom:53px;
	right:33px;
}

.main .map .place-4.coin:after{
	left:15px;
}
.main .map .place-5.coin:after{
	left:15px;
}

.main .street .viewport{
	overflow:hidden;
	width:100%;
	height:430px;
	background-color:#00A8EA;
	position:relative;
}

.main .street .viewport .stage{
	width:auto;
	height:100%;
	position:absolute;
}
.main .street .viewport .bg{
}
.main .street .viewport .buildings{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
.main .street .viewport .buildings .building{
	position:absolute;
	cursor: pointer;
	/*height:210px;*/
}
.main .street .viewport .buildings .building img{
	height:100%;
	width:100%;
	object-fit:cover;
}

.main .street .viewport .buildings .hand{
	position:absolute;
	cursor: pointer;
	width:27px;
	height:38px;
	animation:hand 0.3s infinite;
	z-index:2;
}

@keyframes hand {
  50% {
  	transform: translate(0px, 10px);
  }
}

.main .street .viewport .others{
	/*width: 100%;*/
	/*height: 100%;*/
	position: absolute;
	top:0px;
	left:0px;
}
.main .street .viewport .others img{
	position: absolute;
	width: 60px;
}

.main .street .me{
	position: absolute;
	width: 60px;
	left:50%;
	margin-left:-30px;
	top:260px;
}
.main .street .me img{
	width:100%;
	position: relative;
	z-index:3;
}
.main .street .me:before{
	content:"";
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/skateboard.png);
	background-size:100%;
	position:absolute;
	width:80px;
	height: 23px;
	bottom:-13px;
	left:50%;
	margin-left:-40px;
	z-index: 2;
}



.main .street .viewport .button-l{
	position:absolute;
	width:40px;
	height:40px;
	bottom:20px;
	left:20px;
	z-index: 5;
	animation:arrow 0.3s steps(2) infinite;
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/arrow-l.png);
	cursor: pointer;
}


.main .street .viewport .button-r{
	position:absolute;
	width:40px;
	height:40px;
	bottom:20px;
	right:20px;
	z-index: 5;
	animation:arrow2 0.3s steps(2) infinite;
	background-image:url(https://assets.niusnews.com/event_2021/tokyo/arrow-r.png);
	cursor: pointer;
}

@keyframes arrow {
  100% {
  	background-position-x:-80px;
  }
}

@keyframes arrow2 {
  100% {
  	background-position-x:-80px;
  }
}






.main .notice{
	padding:0px 15px;
	height:46px;
	background-color:#00A8EA;
	display:flex;
	align-items: center;
	justify-content: space-between;
	margin-top: -15px;
  z-index: 1;
  position: relative;
}
.main .notice .button-gifts{
	width: 110px;
	height:36px;
	line-height: 36px;
	border-radius:23px;
	background-color:#fff;
	cursor:pointer;
}

.main .an-board{
	padding:15px 15px;
	display:flex;
	justify-content:center;
}
.main .an-board .an{
	width:30%;
	cursor: pointer;
}
.main .an-board .dialogue{
	width:70%;
	position:relative;
}

.main .an-board .dialogue .content{
	width:100%;
	height:100%;
	padding:40px 15px 30px 40px;
	position:absolute;
	top:0px;
	left:0px;
	box-sizing:border-box;
}



.panel-building{
	padding-top:30px;
}

.panel-avatar .figure img{
	width:100px;
}

.panel-data .button-send{
	background-color:#00A8EA;
	border:0px;
}

.panel-again .button-data,.panel-again .button-back{
	background-color:#00A8EA;
	border:0px;
}

.panel-share .button-share{
	background-color:#00A8EA;
	border:0px;
}

.panel-again .button-share{
	display:flex;
	justify-content: space-around;
	height:40px;
	line-height: 20px;
	padding:10px;
	border-radius:80px;
	width: 220px;
}

.panel-gifts .gifts{
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content:space-around;
}
.panel-gifts .gifts img{
	width:48%;
	margin-bottom:5px;
}


@media (max-width: 375px){
	.cover .sponsor{
		font-size:14px;
	}
	.howto .gifts{
		top:260px;
	}
	.howto .rule{
		top:360px;
	}
	.howto .button-start{
		top:400px;
	}

	.main .map .place{
		transform:scale(0.85);
	}
	.main .map .place-1{
		right:10px;
	}
	.main .map .place-2{
		top:110px;
		left:17px;
	}
	.main .map .place-3{
		top:80px;
		left:120px;
	}
	.main .map .place-4{
		top:230px;
		left:20px;
	}
	.main .map .place-5{
		top:220px;
		left:120px;
	}
	.main .map .place-6{
		right:13px;
	}
}