/* ===============================================================
    * rooms
=============================================================== */
.wrap {padding: 100px 0;}
.rooms {position: relative;}
.rooms .width-bd {position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);}
.rooms-list {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.rooms-list li {position: relative; width: calc((100% - 15px) / 4); height: 580px; margin-right: 5px; margin-bottom: 5px; overflow: hidden;}
.rooms-list li:nth-of-type(4n) {margin-right: 0;}
.rooms-list li:after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(72,86,101,.7); pointer-events: none; opacity: 0; transition: .3s;}
.rooms-thumb {width: 100%; height: 100%; transition: .3s;}
.rooms-info {position: absolute; left: 30px; bottom: 30px; color: #fff; z-index: 1;} 
.rooms-info p {font-size: 15px; letter-spacing: 0.015em;}
.rooms-info h2 {font-size: 36px; margin-top: 15px;}
.rooms-list span {position: absolute; right: 30px; top: 30px; font-size: 48px; color: #fff; display: none; z-index: 1;}
.rooms-list li:hover:after {opacity: 1;}
.rooms-list li:hover .rooms-thumb {transform: scale(1.1);}
.rooms-list li:hover span {display: block;}
@media (max-width: 850px){
    .wrap {padding: 40px 15px;}
    .rooms-list {display: block;}
    .rooms-list li {width: 100%; height: 290px; margin-right: 0; margin-bottom: 15px;}
    .rooms-list li:after {opacity: 1; background: rgba(34,34,34,.2);}
    .rooms-info {left: 20px; bottom: 15px;}
    .rooms-info p {font-size: 12px;}
    .rooms-info h2 {font-size: 27px;}
    .rooms-list span {right: 15px; top: 15px; font-size: 25px; display: block;}
}

/* ===============================================================
    * imgmap
=============================================================== */
.imgmap {position: relative; width: 100%; height: auto;}
.imgmap .wrap {padding: 100px 0 0; position: relative;}
.imgmap img {width: 100%; height: 100%; object-fit: cover; }
.map-imgs {position: absolute; left: 0; right: 0; top: 100px; bottom: 0;}
.map-imgs img {display: none;}
.map-imgs img.db {display: block;}

.map-link {position: absolute; left: 0; right: 0; top: 100px; bottom: 0;}
.map-link a {position: absolute; width: 2.3vw; height: 2.3vw; border-radius: 50%;}
.room1101 {bottom: 23%; right: 30%;}
.room1102 {bottom: 21.5%; right: 25.5%;}
.room1103 {bottom: 21%; right: 21%;}
.room1202 {bottom: 41%; right: 27.6%;}
.room1201 {bottom: 39.5%; right: 19.4%;}
.room1301 {bottom: 50.2%; right: 22.8%;}
.room2101 {bottom: 56.5%; right: 45%;}
.room2102 {bottom: 52%; right: 42.5%;}
.room2201 {bottom: 63.5%; right: 45%;}
.room2202 {bottom: 59.5%; right: 42.5%;}
.room2301 {bottom: 69%; right: 39.5%;}
.room2302 {bottom: 65%; right: 36%;}

@media (max-width: 850px){
    .imgmap .wrap {padding: 40px 0 0;}
    .map-imgs {top: 40px;}
    .map-link {top: 40px;}
}