body{
  line-height: 1.3;
}
a{
  color: #333;
}
.pt80{
  padding-top: 80px;
}
.pb80{
  padding-bottom: 80px;
}
.mt30{
  margin-top: 30px;
}
@media(min-width:767px){
  .block-mobile{
    display: none;
  }
}
@media(max-width:767px){
  .hidden-mobile{
    display: none;
  }
}
.title-cm{
  font-weight: bold;
  font-size: 53px;
  color: #567500;
  text-align: center;
}
@media(max-width:991px){
  .title-cm{
    font-size: 42px;
  }
}
@media(max-width:767px){
  .title-cm{
    font-size: 35px;
  }
}
@media(max-width:374px){
  .title-cm{
    font-size: 35px;
  }
}
.decs{
  text-align: center;
}
#15,
.s-oit{
  display: none;
}
/*----- Map -----*/
@media(min-width:1170px){
  .map-mb{
    display: none;
  }
}
@media(max-width:1170px){
  .map{
    display: none;
  }
}
.map{
  margin-top: 50px;
  position: relative;
}
.sareatop{
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 3px;
}
.sareabot a{
  display: block;
  text-decoration: underline;
}
.sareabot a:hover{
  color: #8BBD00;
}
.sarea{
  position: absolute;  
}
.sarea-item{
  position: relative;    
  border:1px solid #F2A060;
  border-radius: 5px;
}
.sarea-item > div{
  width: 185px;
  border-radius: 5px;
  height: auto;
  position: relative;
  background: #fff;
  display: inline-block;
  text-align: center;
  padding: 13px 5px;
  z-index: 9;
}
.sarea-item:before{
  content: '';
  width: 19px;
  height: 24px;
  background: url("img/map-icon.png");
  position: absolute;
}
.sarea-item:after{
  content: '';
	display: block;
	width: 1px; 
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	z-index:5;
  border-left: 1px solid #F2A060;
}
.s-yam{
  top: 200px;
  right: 0;
}
.sarea.s-yam .sarea-item:before {
  top: 160px;
  left: -210px;
}
.sarea.s-yam .sarea-item:after{
  position: absolute;
  transform: rotate(57deg);
  top: -15px;
  left: -94px;
  height: 230px;
}
.s-kan{
  bottom: 112px;
  right: 195px;
}
.sarea.s-kan .sarea-item:before {
  top: -14px;
  left: -83px;
}
.sarea.s-kan .sarea-item:after{
  position: absolute;
  transform: rotate(114deg);
  top: -18px;
  left: -28px;
  height: 93px;
}
.s-toc{
  bottom: 206px;
  right: 95px;
}
.sarea.s-toc .sarea-item:before {
  top: 29px;
  left: -155px;
}
.sarea.s-toc .sarea-item:after{
  position: absolute;
  transform: rotate(90deg);
  top: -40px;
  left: -52px;
  height: 165px;
}
.s-gun{
  bottom: 300px;
  right:40px;
}
.sarea.s-gun .sarea-item:before {
  top: 136px;
  left: -264px;
}
.sarea.s-gun .sarea-item:after{
  position: absolute;
  transform: rotate(67deg);
  top: -74px;
  left: -95px;
  height: 320px;
}
.s-nag{
  top:190px;
  right:280px;
}
.sarea.s-nag .sarea-item:before {
  top: 278px;
  left: -76px;
}
.sarea.s-nag .sarea-item:after{
  position: absolute;
  transform: rotate(38deg);
  top: 52px;
  left: 17px;
  height: 251px;
}
.s-ish{
  top:190px;
  left: 445px;
}
.sarea.s-ish .sarea-item:before {
  top: 245px;
  left: 108px;
}
.sarea.s-ish .sarea-item:after{
  position: absolute;
  transform: rotate(-7deg);
  top: 13px;
  left: 100px;
  height: 230px;
}
.s-gif{
  bottom:0;
  right: 380px;
}
.sarea.s-gif .sarea-item:before {
  top: -152px;
  left: -6px;
}
.sarea.s-gif .sarea-item:after{
  position: absolute;
  transform: rotate(-34deg);
  top: -142px;
  left: 71px;
  height: 230px;
}
.s-hyo{
  top:250px;
  left: 238px;
}
.sarea.s-hyo .sarea-item:before {
  top: 259px;
  left: 235px;
}
.sarea.s-hyo .sarea-item:after{
  position: absolute;
  transform: rotate(137deg);
  top: 21px;
  left: 141px;
  height: 273px;
}
.s-wak{
  bottom:20px;
  left: 350px;
}
.sarea.s-wak .sarea-item:before {
  top: -64px;
  left: 120px;
}
.sarea.s-wak .sarea-item:after{
  position: absolute;
  transform: rotate(39deg);
  top: -50px;
  left: 98px;
  height: 80px;
}
.s-ehi{
  left: 10px;
  bottom:190px;
}
.sarea.s-ehi .sarea-item:before {
  top: 98px;
  left: 354px;
}
.sarea.s-ehi .sarea-item:after{
  position: absolute;
  transform: rotate(113deg);
  top: -20px;
  left: 266px;
  height: 185px;
}
.s-shi{
  top:340px;
  left: 0;
}
.sarea.s-shi .sarea-item:before {
  top: 145px;
  left: 379px;
}
.sarea.s-shi .sarea-item:after{
  position: absolute;
  transform: rotate(116deg);
  top: -17px;
  left: 273px;
  height: 230px;
}
.s-oit{
  top: 570px;
  left: 25px;
}
.sarea.s-oit .sarea-item:before {
  top: 22px;
  left: 291px;
}
.sarea.s-oit .sarea-item:after{
  position: absolute;
  transform: rotate(90deg);
  top: -41px;
  left: 211px;
  height: 155px;
}
.map-mb-title{
  display: block;
  font-weight: bold;
  width: 100%;
  background: #FFEED1;
  padding: 10px 15px;
  position: relative;
  margin-top: 30px;
}
.map-mb-title:after{
  content: '\f107';
  font-family: FontAwesome;
  position: absolute;
  right:15px;
  top:10px;
}
.map-mb-title.dropdown_toggle:after{
  content: '\f106';
  font-family: FontAwesome;
}
.name-sport-list{
  padding: 0 15px;
  border-left: 1px solid #FFEED1;
  border-right: 1px solid #FFEED1;
  border-bottom: 1px solid #FFEED1;
  display: none;
}
.name-sport-list li{
  display: block;
  position: relative;
  border-bottom: 2px dotted #C1C1C1;
  padding: 10px 0;
}
.name-sport-list li:last-child{
  border-bottom: none;
}
.name-sport-list li:after{
  content: '\f105';
  font-family: FontAwesome;
  position: absolute;
  right:0;
  top:10px;  
  color: #C1C1C1;
}
.name-sport-list li p,
.name-sport-list li span{
  font-weight: bold;
}
/*----- End Map -----*/

/*----- popular ------*/
.popular{
  background: url("img/bg-01.jpg") top center no-repeat, url("img/bg-02.jpg") bottom center no-repeat #F8F1E5;
  background-size: 100% auto, 100% auto;
}
.spots-list li{
  margin-top: 50px;
}
.spots-list li img{
  max-width: 100%;
}
.spots-list li a:hover{
  text-decoration: none;
}
.spots-list li a:hover img{
  opacity: 0.8;
}
.spots-list li a:hover p{
  color: #333;
}
.spots-list li a:hover .sport-name{
  color: #8BBD00;
}
.area-name{
  font-weight: bold;
  margin: 15px 0 7px 0;
  display: inline-block;
  background: #B0B96B;
  padding: 1px 5px;
  color: #fff;
  border-radius: 3px;
  font-size: 13px;
}
.spots-list li a:hover .area-name{
  color: #fff !important;
}
.btn-view{
  border: 1px solid #CF9C44;
  padding: 4px 20px;
  border-radius: 20px;
  margin-top: 15px;
  display: inline-block;
}
.btn-view:hover{
  border: 1px solid #FFB22E;
}
.sport-name{
  color: #567500;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 7px;
}
.desc-sport{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media(max-width:375px){
  .spots-list li{
    flex: 0 0 100%;
    max-width: 100%;
  }
  .spots-list li > a > img{
    width: 48%;
    float: left;
  }
  .spots-list li > a > div{
    width: 52%;
    float: right;
    padding-left: 15px;
  }
  .spots-list li:after{
    content: '';
    clear: both;
  }
  .area-name{
    margin-top: 0;
  }
  .sport-name{
    font-size: 19px;
  }
}








/*----- End popular ------*/