@charset "utf-8";
* { margin: 0; padding: 0; text-decoration: none; }

html, body { font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; background-color:#fff; color: #444; font-weight: normal; font-size: 12px; }
html,body { overflow: hidden; } 
div.space { display: block; clear: both; height: 5px; width: 100%;}
div.leaflet-marker-icon { background: #46c; color: #fff; border: 1px solid #fff; }
div.leaflet-marker-icon:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;	border: 5px solid transparent; border-top: 5px solid #24a; }
div.leaflet-marker-icon span.markerno { margin-left: 1px; display: inline-block; width: 18px; height: 18px; background-color: #fff; font-size: 11px; text-align: center; color: #666; font-weight: bold;  }
div.leaflet-marker-icon span.markerprice { margin-left: 3px;font-weight: bold; font-size: 11px; }
div.leaflet-marker-icon.hilight { z-index: 1000 !important; background-color: #d42; }
div.leaflet-marker-icon.hilight:before { z-index: 1000 !important; border-top: 5px solid #d42; }

input[type="text"], input[type="date"] { padding: 1px; }

div#searching { display: none; margin: 0px auto; width: 110px; background-color: #fcc; height: 39px; }
div#progress { position: absolute; background-color: #f00; margin-top: 0px; height: 39px; width: 2px;  }
div#progress img { margin-top: -1px; }
div#description { margin: 15px; margin-top: 20px; padding-top: 20px; border-top: 4px dotted #a00; }
div#description a { color: #48f; text-decoration: underline; }

div.hotel { margin-bottom: 5px; }
div.hotel img { float: left; max-width: 80px; margin-top: 5px; }
div.hotel span.price { color: #f00; font-weight: bold; font-size: 18px;  margin-left: 10px; margin-top: 5px;}
div.hotel span.hoteltype { color: #666; margin-left: 10px; padding-top: 2px; font-size: 11px; }
div.hotel span.hotelarea { color: #666; float: right; margin-top: 5px; margin-right: 5px; padding-top: 2px; font-size: 11px; }
div.hotel a.hotelname { clear: both; display: block; width: 100%; background-color: #666; color: #fff; font-weight: bold; overflow: hidden; padding: 2px 0px;  text-decoration: underline; font-size: 14px; }
div.hotel span.plan { display: block; width: 260px; float: right; margin-right: 5px; border-top: 1px dotted #aaa; margin-bottom: 5px; padding-top: 2px;}
div.hotel span.plan.first { border-top: none;}
div.hotel span.plan a { display: block; width: 260px; font-size: 11px; color: #48d; text-decoration: underline; }
div.hotel span.plan a b { font-weight: bold; color: #24a; font-size: 12px; }

div#notfound { text-align: center; }
div#notfound img { margin: 20px auto; display: block; width: auto; }
span.title { display: inline-block; width: 55px; }
input[type="checkbox"] { margin-left: 2px; margin-top: 2px;}
a#submit { display: block; width: 88px; margin: 0px auto; }
div#research { display: none; }
div#viewlist { display: none; }

@media screen and (min-width: 800px)  {
div#viewhotel { display: none; }
div#centermark { pointer-events: none; z-index: 2000; width: 15px; height: 15px;  position: absolute; top: -webkit-calc(100vh / 2 - 7px); top: calc(100vh / 2 - 7px); left: -webkit-calc((100vw - 390px) + / 2 + 390px - 7px);  left: calc((100vw - 390px) / 2 + 390px - 7px); background-image: url('./center.png'); }
div#map { width: -webkit-calc(100vw - 390px); width: calc(100vw - 390px);  height: 100vh; float: right; }
div#search { width: 380px; float: left; padding: 5px; overflow: auto; height: 100vh; }
div#list { display: none; }
div#listcontents { position: relative; }
span.item { display: block; float: left; width: 180px; height: 22px; margin-top: 2px;}
img#logo { display: block; width: 200px; margin: 0px auto; margin-bottom: 10px;  }
span.option { display: block; float: left; margin-left: 4px; }
input[type="text"], input[type="date"], select { width: 110px; }
}
@media screen and (min-width: 1280px) {
div#map.result { width: -webkit-calc(100vw - 780px); width: calc(100vw - 780px);  height: 100vh; float: right; margin-right: 390px; }
div#list.result { display: block; width: 380px; padding: 5px; position: absolute; right: 0px; overflow: auto; height: 100vh; }
div#centermark.result { left: -webkit-calc((100vw - 780px) + / 2 + 390px - 7px);  left: calc((100vw - 780px) / 2 + 390px - 7px); }
}
@media screen and (min-width: 800px)  and (max-width: 1279px) {
div#search.result { height: 425px;}
div#list.result { display: block; width: 380px; height: -webkit-calc(100vh - 425px); height: calc(100vh - 425px); float: left; overflow: auto; padding: 5px; }
	}
@media screen and (min-width: 800px)  and (max-width: 1279px) and (max-height: 600px) {
div#search.result { height: 50vh; }
div#list.result { height: 50vh; }
}

@media screen and (max-width: 799px) {
html,body { overflow: visible; } 
div#contents { width: 100%; }
div#map { width: 100%; height: 50vh; float: none; margin: 0px; }
div#search {  width: 100%; height: auto; overflow:visible; }
span.item { display: block; float: left; width: 45%; height: 22px; margin-top: 2px; margin-left: 5px; min-width: 170px; }
img#logo { display: block; width: 180px; margin: 0px auto; margin-bottom: 10px;  }
input[type="text"], input[type="date"], select { width: 60%; }
div#list.result { display: block; clear: both; }
div#map.result { height: calc(100vh - 123px); height: -webkit-calc(100vh - 123px); }
div#centermark.result { top: -webkit-calc(100vh / 2 - 65px); top: calc(100vh / 2 - 65px); }
div#centermark { pointer-events: none; z-index: 1000; width: 15px; height: 15px;  position: absolute; top: -webkit-calc(50vh / 2 - 7px); top: calc(50vh / 2 - 7px); left: -webkit-calc(100vw / 2 - 7px);  left: calc(100vw / 2 - 7px); background-image: url('./center.png'); }
div#search.result { display: none; }
div#research.result { display: block; padding-top: 2px; background-color: #fdd; height: 50px; width: 50%; float: right; cursor: pointer; }
div#viewlist.result { display: block; padding-top: 2px; background-color: #bbb; height: 50px; width: 50%; float: left; cursor: pointer;}
div#research img { display: block; margin: 0px auto; width: 100px;  }
div#viewlist img { display: block; margin: 0px auto; width: 140px;  }
div#notfound { width: 280px; z-index: 2000; position: absolute; top: 40px; background-color: #fff; left: calc(50vw - 140px); left: -webkit-calc(50vw - 140px);}
div.hotel { width: 98%; margin: 0px auto; margin-top: 5px;  }
div.hotel span.plan { width: 78%;}
div.hotel span.plan a { width: 100%; }
div.hotel img { margin-left: 5px; width: 18%; }
div#viewhotel { z-index: 2000; display: none; width: 98%; position: absolute; top: 5px; background-color: #fff; left: 1%;}
}