@charset "utf-8";
/* CSS Document */
#room{}
#room #cate_list{
	margin-bottom: 50px;
}
#room #cate_list li{
	width: 17%;
	margin: 2%;
	padding: 2%;
	float: left;
}
#room #cate_list li a{
	color: #4d4d4d;
}
#room #cate_list li a:hover figure{
	opacity: 0.5;
}
#room #cate_list li a figure{
	position: relative;
	overflow: hidden;
}
#room #cate_list li a figure img{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 0;

}
#room #cate_list li a h3{
	padding: 2%;
}
#room .cate{
	border-bottom: 5px dotted #ccc;
	padding-bottom:100px;
	margin-bottom: 100px;
}
#room .cate .cate_title{
	display: table;
}

#room .cate .cate_title figure{
	display: table-cell;
	width: 50%;
	padding: 3%;
}
#room .cate .cate_title figure a{
	display: block;
	position: relative;
	padding: 5%;
	border: 1px solid #fff;
}
#room .cate .cate_title figure a img{
	-ms-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#room .cate .cate_title figure a p{
	position: absolute;
	top: 10%;
	right: 7%;
	font-size: 20px;
	background-color: #fff;
	color: #010f3b;
	border: 1px solid #010f3b;
	line-height: 1;
	width: 40px;
	padding: 10px 0;
	text-align: center;
	border-radius: 50%;
	-ms-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#room .cate .cate_title figure a:hover p{
	background-color: #010f3b;
	color: #fff;
	border: 1px solid #fff;
}
#room .cate .cate_title figure a:hover img{
	opacity: 0.5;
} 
#room .cate .cate_title div{
	display: table-cell;
	vertical-align: middle;
	padding-right: 5%;
}
#room .cate .cate_title div h3{
	font-size: 20px;
	letter-spacing: 3px;
	margin-bottom: 15px;
	padding-bottom: 5px;
	border-bottom: 1px solid #010f3b;
}
#room .cate .cate_photo div{
	width: 29.333%;
	margin: 2%;
	position: relative;
	float: left;
}
#room .cate .cate_photo div a{
	display: block;
}
#room .cate .cate_photo div a p{
	position: absolute;
	top: 10%;
	right: 7%;
	font-size: 20px;
	background-color: #fff;
	color: #010f3b;
	border: 1px solid #010f3b;
	line-height: 1;
	width: 40px;
	padding: 10px 0;
	text-align: center;
	border-radius: 50%;	
	-ms-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#room .cate .cate_photo div a:hover p{
	background-color: #010f3b;
	color: #fff;
	border: 1px solid #fff;
}
#room .cate .cate_photo div a:hover img{
	opacity: 0.5;
}
/*ここからタブレット用（768px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 780px){
}
/*ここからスマートフォン用(480px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 480px){
#room #cate_list{
	margin-bottom: 50px;
}
#room #cate_list li{
	width: 40%;
	margin: 3%;
	padding: 2%;
	float: left;
}
#room .cate{
	border-bottom: 5px dotted #ccc;
	padding-bottom:80px;
	margin-bottom: 80px;
}
#room .cate .cate_title{
	display: block;
}
#room .cate .cate_title figure{
	display: block;
	width: 80%;
	padding: 5%;
	margin: 0 auto;
}
#room .cate .cate_title figure a p{
	font-size: 14px;
	width: 28px;
	padding: 7px 0;
}
#room .cate .cate_title div{
	display: block;
	vertical-align: middle;
	padding: 0 5%;
	margin-bottom: 30px;
}
#room .cate .cate_title div h3{
	font-size: 20px;
	letter-spacing: 3px;
	margin-bottom: 15px;
	padding-bottom: 5px;
	border-bottom: 1px solid #010f3b;
}
#room .cate .cate_photo div{
	width: 31.333%;
	margin: 1%;
	position: relative;
	float: left;
}
#room .cate .cate_photo div a{
	display: block;
}
#room .cate .cate_photo div a p{
	font-size: 14px;
	width: 28px;
	padding: 7px 0;
}
}
@media screen and (max-width: 528px){
	#room #cate_list li:nth-child(odd){
	clear:both;
	float: left;
}
}