@charset "utf-8";


/* environment
-------------------------------------------------*/

#environment img{
	border-radius:9px;
	overflow:hidden;
}

.pgttl_env{
	background-image:url(/img/ttlimg_env.jpg);
}

#m_nukumori{
	display:block;
	width:100%;
	max-width:482px;
	height:auto;
	margin:0 auto 2rem;
}

#room{
	position:relative;
	width:100%;
	max-width:869px;
	margin:0 auto 7rem;
}
	#img_rooms{
		display:block;
		width:100%;
		height:auto;
	}
	#room span{
		display:block;
		position:absolute;
		width:4.37%;
		cursor:pointer;
	}
	#room span img{
		display:block;
		width:100%;
		height:auto;
		left:0;
		top:0;
	}
	/*#room span img:hover{
		animation-duration: .4s;
		animation-name: jello;
	}*/
	
	#room span#n1{ left:72.4%; top:67.2% }
	#room span#n2{ left:72.4%; top:83.6% }
	#room span#n3{ left:41.3%; top:70.6% }
	#room span#n4{ left:14.7%; top:72.5% }
	#room span#n5{ left:42.3%; top:25.9% }
	#room span#n6{ left:83.6%; top:73.5% }
	#room span#n7{ left:12.5%; top:36.4% }

@media screen and (max-width: 600px){
	#room span{
		width:6%;
	}
}


#room_info{
	margin:0 0 5rem;
}
	#room_info .room_info_item{
		padding:0 0 4rem;
		background:url(/img/bd_tile.gif) repeat-x bottom left;
		margin:0 0 4.5rem;
	}
	#room_info .room_info_item:after{
		content: "";
		display: table;
		clear: both;
	}
	
	#room_info .wrap1{
		float:left;
		width:45%;
		padding:10vh 3rem 0 0;
	}
	#room_info .wrap1 p{
		word-break: break-all;
		margin:1rem 0 1rem;
	}
	
	#room_info .wrap2{
		float:right;
		width:50%;
	}
	#room_info .wrap2 .img_main{
		transition:.3s;
	}
	#room_info .wrap2 ul:after{
		content: "";
		display: table;
		clear: both;
	}
	#room_info .wrap2 figcaption{
		min-height:10vh;
		font-size:.9rem;
		line-height:1.6;
		margin:1rem 0 1.5rem;
	}
	#room_info .wrap2 ul li{
		float:left;
		width:23%;
		margin:0 9px 0 0;
		cursor:pointer;
	}
	#room_info .wrap2 ul li:nth-child(4n){
		margin:0 0 0 0;
	}
	#room_info .wrap2 ul li img:hover{
		animation-duration: .4s;
		animation-name: jello;
	}

@media screen and (max-width: 700px){
	#room_info .wrap1{
		float:none;
		width:100%;
		padding:0 0 0 0;
	}
	#room_info .wrap1 h2 img{
		width:80%;
		max-width:320px;
		height:auto;
	}
	#room_info .wrap1 h2 img.m_room4{
		width:100%;
	}
		
	#room_info .wrap2{
		float:none;
		width:100%;
	}
	#room_info .wrap2 ul li{
		float:left;
		width:23%;
		margin:0 9px 0 0;
	}
}
@media screen and (max-width: 400px){
	#room_info .wrap2 ul li{
		width:24%;
		margin:0 4px 0 0;
	}
}