@charset "utf-8";

#contents{margin-top: 80px;background: linear-gradient(215deg,#e7ebe5,#fff);padding: 80px 0 100px;}
.inner{max-width: 1000px;margin: 0 auto;width: 90%;}

.page_tit{font-size: 50px;line-height: 1;text-align: center;background: linear-gradient(90deg, #7d6524 22%, #d8bc7b 62%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-decoration: none;letter-spacing: 0.11em;}
.page_tit small{display: block;font-size: 0.48em;margin-top: 1em;}
.map_area{margin-top: 70px;}
.map_area h3{font-size: 24px;text-align: center;}
.map_area h3 + *{margin-top: 15px;}

.googlemap_btn{font-size: 18px;display: block;width: 18em;padding: 1em 0;color: #fff;text-align: center;margin: 80px auto 0;background: #333;letter-spacing: 0.1em;text-decoration: none;transition: 0.5s all;}
.googlemap_btn::before{content: "";width: 1em;height: 1em;background: url("../img/new_w_i.svg") no-repeat center center/contain;display: inline-block;margin-right: 0.5em;}

footer{margin-top: 80px;}

.map_container {
  position: relative;
  width: 60%;
  /* width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin-bottom: 40px; */
  border: solid 1px rgba(127,108,82,1.00);
  margin:0 auto 40px;
}

.zoom_wrap {
  display: inline-block;
  touch-action: none;
  cursor: grab;
  transform-origin: top left;
  transition: transform 0.2s ease;
}

.zoom_wrap img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.zoom_buttons {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zoom_buttons button {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  padding: 4px 8px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

.zoom_buttons button:hover {
  background: rgba(0, 0, 0, 0.8);
}

@media screen and (min-width: 768px){
.googlemap_btn:hover{background: #a59472;}
}

@media screen and (max-width: 1441px){
#contents{margin-top: 110px;}
}

@media screen and (max-width: 767px){
#contents{margin-top: 60px;padding: 40px 0 50px;}

.page_tit{font-size: 34px;}
.map_area{margin-top: 40px;}
.map_area h3{font-size: 16px;text-align: center;}
.map_area h3 + *{margin-top: 10px;}
.map_container {width: 100%;}

.googlemap_btn{font-size: 15px;margin: 40px auto 0;}

footer{margin-top: 40px;}

.zoom_buttons {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
}