@charset "utf-8";
.lifeoftree{
	position: relative;
	top:0;
	left:0;
	right:0;
	display: block;
	width:100%;
	height: 100%;
	max-width: 700px;
	margin: 0 auto;
}
.lifeoftree img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: auto;
}
.tree-bg{
	position: relative;
	display: block;
	top:0;
	left:0;
	width:100%;
	max-width:700px;
}
.buttons{
	position: absolute;
	display: block;
}
.tokyo-btn{
	top: 25.85%;
	left:32.71%;
	width: 33.33%;
	max-width: 320px;
}

.yokohama-btn{
	top: 55.09%;
	left:36.88%;
	width: 25%;
	max-width: 240px;
}
.kyoto-btn{
	top: 3.21%;
	left:36.88%;
	width: 25%;
	max-width: 240px;
}
.btg-btn{
	top: 9.62%;
	left: 13.33%;
	width: 19.79%;
	max-width: 190px;
}
.bst-btn{
	top: 10.47%;
	left: 65.63%;
	width: 19.79%;
	max-width: 190px;
}
.shoptool-btn{
	top: 30.28%;
	left: 6.88%;
	width: 19.79%;
	max-width: 190px;
	}
.goods-btn{
	top: 51.6%;
	left: 13.23%;
	width: 19.79%;
	max-width: 190px;
}
.package-btn{
	top: 31.13%;
	left: 72.08%;
	width: 19.79%;
	max-width: 190px;
}
.webg-btn{
	top: 50.66%;
	left: 65.63%;
	width: 19.79%;
	max-width: 190px;
}
.concept-btn{
	top: 79.91%;
	left: 28%;
	width: 19.79%;
	max-width: 190px;
}
.art-btn{
	top: 79.91%;
	left: 51%;
	width: 19.79%;
	max-width: 190px;
}

/* menu button animation */
.svb_mouseover img {
	display: block;
	transition-duration: 0.4s;
	z-index: 1;
}

/* mouseover for buttons */
.svb_mouseover img:hover {
	transform: scale(1.1,1.1) translateY(-4px);
	filter: drop-shadow(5px 5px 5px #999);
	transition-duration: 0.4s;
	z-index: 5;
}
	
/* buttons animation setting */

.buttons{
	animation-name:updown2;
	animation-delay:0s;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite; 
}
.buttons:hover{
	animation-play-state: paused;
}
.delay02{
	animation-name:updown1;
	animation-delay: 0.2s;
	animation-duration: 7s;
}
.delay03{
	animation-name:updown1;
	animation-delay: 0.3s;
	animation-duration: 5s;
}
.delay04{
	animation-name:updown1;
	animation-delay: 0.9s;
	animation-duration: 8s;
}
.delay05{
	animation-delay: 0.0s;
	animation-duration: 2s;
}
.delay06{
	animation-delay: 0.03s;
	animation-duration: 1.7s;
	animation-name:updown2;
}
.delay07{
	animation-delay: 0.1s;
	animation-duration: 2.7s;
	animation-name:updown2;
}

@keyframes updown1 {
	  0% {
		transform: translateY(0);
		/* transform: scale(1,1); */
	  }
	30% {
		transform: translateY(-7px);
		/* transform: scale(1.1,1.1); */
	  }
	  100% {
		transform: translateY(0);
		/* transform: scale(1,1); */
	  }
}
@keyframes updown2 {
	  0% {
		/* transform: translateY(0); */
		transform: scale(1.0,1.0);
	  }
	 10% { 
		/* transform: translateY(-4px); */
		transform: scale(1.06,1.06);
	  }
	  100% {
		/* transform: translateY(0); */
		transform: scale(1.0,1.0);
	  }
  } 

div.notice{
	border: none;
	margin-top: 80px;
	margin-bottom: 80px;
}
div.notice img{
	width:300px;
	margin:0 auto;
}
/* for iPhone */
@media only screen
	and (max-width: 767px) {
	
	div.notice{
		border: none;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	div.notice img{
		width:260px;
		margin:0 auto;
	}
	@keyframes updown2 {
		  0% {
			/* transform: translateY(0); */
			transform: scale(1.2,1.2);
		  }
		 10% { 
			/* transform: translateY(-4px); */
			transform: scale(1.27,1.27);
		  }
		  100% {
			/* transform: translateY(0); */
			transform: scale(1.2,1.2);
		  }
	  }

}