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

#contents{
			background:#f5fbfa url(images/bg_main.jpg) no-repeat top left;
			background-size: 100% auto;
		}
	
	@media screen and (max-width:640px){
		#contents{
		background:#f5fbfa url(images/bg_main.jpg) no-repeat left 50px;
		background-size: 100% auto;
		}
	}

.paper{padding:0;}

/*------map--------*/

.js-on,.js-content{
	display: none;
}


@media screen and (max-width:640px){
	.js-content{
		display: block;
	}
	
	.overlay{
		display: none;
	}
}

.map,.paper,.map-sp{
	position: relative;
	}

.button-building{
	position: absolute;
	width: 22.5%;
	top: 3%;
	left: 2%;
}

.button-home{
	position: absolute;
	width: 18%;
	top: 75%;
	right: 40%;
}

.button-plant{
	position: absolute;
	width: 16%;
	top: 34%;
	right: 32%;
}

.item-wrapper{
	width: 380px;
	padding: 20px;
	background: #004ea2;
	border-radius: 10px;
}

.item li{
	display: inline-block;
	width: 46%;
}
.item li:first-child{
	margin: 0 4% 0 0;
}

.item h4{
	padding: 3px;
	margin: 0 0 15px 0;
	text-align: center;
	background: #fff;
	color: #004ea2;
	font-weight: bold;
	font-size: 1.8rem;
	border-radius: 15px;
}

.item-wrapper p{
	margin: 15px 0 0 0;
	padding: 15px 0 0 0;
	border-top: 1px solid #fff;
	color: #fff;
	font-size: 1.5rem;
}

@media screen and (max-width:640px){
	.item-wrapper{
		width: 90%;
		margin: 10% auto 0 auto;
		background: none;
		border-bottom: 1px solid #004ea2;
		border-radius: 0;
		padding: 0;
	}
	
.content-home .item-wrapper{
		border: none;
		padding: 0 0 5% 0;
	}
	
	.item-wrapper p{
		color: #004ea2;
	}
	
	.item-wrapper h3{
		width: 75%;
		display: inline-block;
		padding: 2% 5%;
		margin: 0 0 8% -20%;
		text-align: center;
		background: #004ea2;
		color: #fff;
		font-size: 1.6rem;
		font-weight: bold;
		vertical-align: middle;
	}
	
	.item-wrapper h4{
		margin: 10% 0 5% 0;
		background: none;
		font-size: 1.4rem;
	}
	
	.item-wrapper p{
		margin: 5% 0 5% 0;
		font-size: 12px;
	}
	
	.imagethumb{
		width: 40%;
	}
	
	.backToMap{
		margin: 0 0 5% 0;
		text-align: right;
		color: #004ea2;
	}
	.backToMap a:link,	.backToMap a:visited{
		color: #004ea2;
		text-decoration: none;
	}
}

.overlay{
	position:absolute;
	top: 0;
	left:0;
}

@media screen and (min-width:640px){

.content-building .item-wrapper{
	position: absolute;
	top: 25%;
	right:6%;
}

.content-plant .item-wrapper{
	position: absolute;
	top:5%;
	left:8%;
}

.content-home .item-wrapper{
	position: absolute;
	top:10%;
	left:8%;
}	
}

.js-mousetrigger{
	cursor: pointer;
	background: rgba(0,0,0,0);
}

.js-button{
	cursor: pointer;
}
.animate{
		-webkit-animation: floatbutton 3s ease infinite;
	animation: floatbutton 3s ease infinite;
}

.trigger-buliding{
	position: absolute;
	top: 5%;
	left: 10%;
	width:40%;
	padding-bottom: 40%;	
}

.trigger-plant{
	position: absolute;
	top: 0;
	right: 0;
	width:45%;
	padding-bottom: 30%;	
}

.trigger-home{
	position: absolute;
	bottom: 5%;
	right: 17%;
	width:30%;
	padding-bottom: 25%;	
}

@media screen and (max-width: 640px){
	.trigger-building,.trigger-plant,.trigger-home{
		display: none;
	}
}

/*------button for smartphone--------*/

.link-building,.link-plant,.link-home{
	position: absolute;
	-webkit-animation: floatbutton 3s ease infinite;
	animation: floatbutton 3s ease infinite;
}

.link-building{
	width: 30%;
	top:3%;
	left:1%;
}

.link-plant{
	width: 24%;
	top: 30%;
	right: 30%;
}

.link-home{
	width: 23%;
	top: 72%;
	right: 40%;
}

/*------animation--------*/

@-webkit-keyframes floatbutton{
  0% {  -webkit-transform:scale(1,1);
  		margin-top:0px; }
  50% { -webkit-transform:scale(0.97,0.97);
  		margin-top:2%;
		}
  100% {-webkit-transform:scale(1,1); 
  		margin-top:0px;}
}

@keyframes floatbutton{
  0% {  transform:scale(1,1);
  		margin-top:0px; }
  50% { transform:scale(0.97,0.97);
  		margin-top:2%;
		}
  100% {
	  	transform:scale(1,1); 
  		margin-top:0px;}
}