@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* =======================================================
*
* 	Template Style
*	  top
*
* ======================================================= */
.pc {
  display: block;
}

.sp {
  display: none;
}

/*titleImg*/
#title .mainImg{
  background-image: url(../images/facility/mainimg.jpg);
  background-position: top right;
}

#title p.mainDesc{
  color: #ffffff;
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,.1));
    text-align: center;
}

/*facility*/

#facilityList{
  position: relative;
}

#facilityList .container .fbox{
	display: flex;
	flex-wrap:wrap;
  gap:2em;
}

#facilityList .container .fbox .listItem {
  width:calc((100% - 4em)/3);
}

#facilityList .container .fbox .listItem a img{
  overflow: hidden;
  width:100%;
 aspect-ratio:72/47;
}

#facilityList .container .fbox .listItem a img img{
  width:100%;
  height:auto;
}

#facilityList .container .fbox .listItem a p.name{
  color: #000000;
  font-size: 18px;
  margin-bottom: .5em;
}

#facilityList .container .fbox .listItem a p.name span{
  font-size: 70%;
  background: #000000;
  color: #ffffff;
  border-radius: 10vw;
  margin-left: 0.5em;
  padding: 3px 10px;
}

#facilityList .container .fbox .listItem a p.name span.red{
  background:#e44646;
}

#facilityList .container .fbox .listItem a p.name span.blue{
  background:#408ac2;
}


@media screen and (max-width: 1024px) {

  #facilityList .container .fbox .listItem a p.name span{
    display: block;
    width: fit-content;
  }
}


@media screen and (max-width: 768px) {

  #title .mainImg{
    background-image: url(../images/facility/mainimg-sp.jpg);
    background-position: center center;
  }

  #facilityList .container .fbox .listItem {
    width:calc((100% - 2em)/2);
  }

}

@media screen and (max-width: 480px) {

  .pc {
    display: none;
  }
  
  .sp {
    display: block;
  }

  #title .mainImg{
    background-image: url(../images/facility/mainimg-sp.jpg);
    background-position: center center;
  }

  #facilityList .container .fbox .listItem {
    width:100%;
  }

  .fh5co-cover .desc span{
    margin-bottom:15px;
  }

  #title p.mainDesc{
    font-size: 95%;
  }
  #facilityList .container .fbox .listItem a p.name span{
    display: inline-block;
  }
}