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

#hotellist h2{
}
#hotellist #layout{
text-align:center;
}

#hotellist #container #layout ul li {
    border: 0px solid transparent;
	background-color:#f0f0f0;
	border-radius:3px;
	color:#000000;
}

#hotellist #container #layout h3 {
    background-color: #f0f0f0;
}
#hotellist #layout h3{
font-size:14px;
font-weight:bold;
text-align:left;
padding:5px;
margin:10px 0;
}

#hotellist #layout ul{
list-style-type:none;
}
#hotellist #layout ul li{
float:left;

width:305px;
width:calc(100% / 3 - 5px);

margin:5px 7px 5px 0;
font-size:14px;
text-align:left;
}
#hotellist #layout ul li:nth-child(3n){
	margin-right:0;
}
#hotellist #layout ul li a{
display:block;
padding:10px;
	color:#000000;
}
#hotellist #layout h4{
font-size:14px;
font-weight:bold;
text-align:left;
padding:5px;
margin:10px;
/*width:860px;*/
margin:auto;
margin-bottom:0px;
}
#hotellist #layout table{
width:100%;
margin:auto;
margin-bottom:40px;
}
#hotellist #layout table th{
padding:5px;
font-size:12px;
text-align:center;
}
#hotellist #layout table th.name{
}
#hotellist #layout table th.tel{
width:100px;
}
#hotellist #layout table th.add{
width:250px;
}
#hotellist #layout table th.memo{
width:180px;
}
#hotellist #layout table th.hp{
width:20px;
}
#hotellist #layout table td{
text-align:left;
word-break: break-all;
padding:5px;
font-size:12px;
}
.newList{
font-size:0;
border:1px solid #cccccc;
}
.newList dt{
display:inline-block;
font-size:12px;
width:calc(80% - 0px);
text-align:left;
padding:10px 5px;
border-bottom:1px solid #cccccc;
box-sizing:border-box;
}
.newList dd{
display:inline-block;
font-size:12px;
width:calc(100% - 80% - 0px);
padding:10px 5px;
border-bottom:1px solid #cccccc;
box-sizing:border-box;
}
.newList dt:nth-last-child(2),
.newList dd:last-child{
border-bottom:none;
}
#hotellist #layout #hotelDetail{
}
#hotellist #layout #hotelDetail li{
	width:calc(100%);
display:block;
background-color:#ffffff !important;
}
#hotellist #layout #hotelDetail li h4{
font-size:18px;
background-color:#cccccc;
padding:5px 10px;
}
#hotellist #layout #hotelDetail li h4 em{
display:inline-block;
}
#hotellist #layout #hotelDetail li h4 span{
display:inline-block;
}
#hotellist #layout #hotelDetail li th{
	font-weight:normal;
font-size:14px;
padding:5px;
border-bottom:1px solid #cccccc;
width:7em;
background-color:transparent !important;
}
#hotellist #layout #hotelDetail li td{
	font-weight:normal;
font-size:14px;
padding:5px;
border-bottom:1px solid #cccccc;
}
#hotellist #layout #hotelDetail li a{
	display:inline-block;
	padding:0;
}
#hotellist #layout #hotelDetail li th span{
display:block;
background-color:#eeeeee;
font-size:90%;
vertical-align:middle;
margin-right:5px;
border-radius:3px;
padding:3px 5px;
text-align:center;
color:#000000;
}


@media screen and (max-width: 667px) {

#hotellist #layout ul {
text-align:left;
padding:10px;
}
#hotellist #layout ul li {
    float: none;
	display:inline-block;
    font-size: 14px;
    margin: 5px 0;
    text-align: left;
    width: calc(100% / 3 - 4px);
	vertical-align:top;
}
#hotellist #layout table{
width:100%;
}
#hotellist #layout table tr{
}
#hotellist #layout table th,
#hotellist #layout table td{
	display:block;
	width:100%;
	text-align:left;
}
#hotellist #layout table th{
font-size:10px;
padding:2px 5px;
}
#hotellist #layout table td{
	font-size:16px;
}
#hotellist #layout table td:nth-child(5){
border-bottom:3px solid #cccccc;
}
#hotellist #layout table th.name,
#hotellist #layout table th.tel,
#hotellist #layout table th.add,
#hotellist #layout table th.hp,
#hotellist #layout table th.memo{
	width:100%;
}
.newList{
font-size:0;
margin:10px;
}
#hotellist #layout #hotelDetail li th{
	display:table-cell;
	width:30%;
	vertical-align:top;
}
#hotellist #layout #hotelDetail li td{
	display:table-cell;
	width:calc(100% - 30%);
}

}