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

/*========================================*/
/*=============== MAP==================*/
/*=========================================*/
#map {}
#contents,#btnswrap {
	background-color: #000;
	color: #fff;
}
#map #mrMapWrap img {
  width: 100%;
}
#map h2#titMap {
  font-size: 28px;
	letter-spacing: 0.2em;
  text-align: center;
  padding: 50px 0;
  margin: 0  auto;
	color: #b4a250;
}
#map h2#titMap span {
display: block;
font-size: 50%;
letter-spacing: 0.1em;
color: #000;
}
#map #mapWrap {
  max-width: 1000px;
 /* margin-bottom: 40px;*/
}
#map #mapMrWrap {
  max-width: 1000px;
}
#map #mapWrap h3.titH3 {
	padding-bottom: 30px;
}
#map #contents #gMapWrap #gMapBox {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 60%;
  height: 0;
}
#map #contents #gMapWrap #gMapBox iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#map #titleWrap{
  padding: 20px 0;
}
#map #titleWrap h3 {
  text-align: center;
  /*color:#b50005;*/
    font-size: 28px;
    line-height: 1.3;
	 padding-top: 1em;
}
#map #titleWrap h4 {
  text-align: center;
  font-size: 16px;
    line-height: 1.3;
  padding-top: 1em;

}

#map .caption {
    font-size: 12px;
    line-height: 1.4;
    padding: 0.3em 0 1em;
}
#map #btnWrap {
  width: 50%;
  max-width: 550px;
  padding: 50px 0;
}
#map #btnWrap a {
  width: 48%;
    background: -moz-linear-gradient(top,  rgba(178,178,178,1) 0%, rgba(77,77,77,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(178,178,178,1) 0%,rgba(77,77,77,1) 100%);
    background: linear-gradient(to bottom,  rgba(178,178,178,1) 0%,rgba(77,77,77,1) 100%);
    padding: 3%;
  border-radius: 5px;
  display: flex;
justify-content: center;
align-items: center;
  font-size: 16px;
  color: #fff;
}
#map #btnWrap a img {
  width: 20%;
}
#map #btnWrap a:nth-last-of-type(1) {
  background : linear-gradient(180deg, rgba(251, 211, 117, 1) 0.03%, rgba(236, 108, 0, 1) 100%);
}
#map #btnWrap a:hover {
  opacity: 0.6;
}
#map #btnswrap {
  
}



@media screen and (max-width: 959px) {
  #map #contents {
    padding-top: 0px;
    padding-bottom: 30px;
  }
	#map #titleWrap{
  padding: 30px 0 15px;
}

}
@media screen and (max-width: 599px) {
  #map h2#titMap {
		font-size:6.4vw;
		font-size: clamp(21px, 6.4vw, 25px);
		padding: 40px 0 15px;
	}
  #map .boxWidth {
  
  }
  #map #titleWrap {
    padding: 10px 0;
		width: 95%!important;
  }
  #map #titleWrap h3 {
    font-size: 20px;
		font-size: clamp(20px, 5.9vw, 28px);
    line-height: 1.3;
  }
  #map #titleWrap h4 {
    font-size: 14px;
    padding-top: 1em;
  }
  #map #contents #mapWrap #mapBox {
    padding-top: 100%;
  }
  #map #btnWrap {
    width: 80%;
    max-width: 280px;
    padding: 30px 0 20px;
  }
  #map #btnWrap a {
    width: 100%;
    padding: 1em;
    font-size: 15px;
    margin-bottom: 10px;
  
  }
  #map #btnWrap a:nth-last-of-type(1) {
    display: none;
  }
  #map #mapWrap {
    width: 95%;
    margin-bottom: 20px;
  }
  #map #mrMapWrap {
    width: 95%;
  }
  #map #contents #gMapWrap #gMapBox {
    padding-top: 90%;
  }
  
	#map #gMapWrap {
		width: 95%;
	}
}