@charset "utf-8";

/* facility */
#facility_erea {
  width: 100%;
  margin: 3% auto 5%;
}
ul#facility {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 107.5%;
  background: url(../images/facility/bg.jpg) 0 0 / contain no-repeat;
}
ul#facility li {
  position: absolute;
  width: 17.666666%;
  height: 4.341085%;
}
ul#facility li:hover {
  -webkit-animation: bounce .3s ease infinite alternate;
  animation: bounce .3s ease infinite alternate;
}
ul#facility li#f_btn01 {
  top: 38.372093%;
  left: 67.5%;
  background: url(../images/facility/btn_01.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn02 {
  top: 34.496124%;
  left: 50.583333%;
  background: url(../images/facility/btn_02.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn03 {
  top: 76.356589%;
  left: 54.416666%;
  background: url(../images/facility/btn_03.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn04 {
  top: 63.953488%;
  left: 80.416666%;
  background: url(../images/facility/btn_04.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn05 {
  top: 35.813953%;
  left: 21.166666%;
  background: url(../images/facility/btn_05.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn06 {
  top: 57.441860%;
  left: 63.75%;
  background: url(../images/facility/btn_06.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn07 {
  top: 54.961240%;
  left: 2%;
  background: url(../images/facility/btn_07.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn08 {
  top: 73.100775%;
  left: 35.083333%;
  background: url(../images/facility/btn_08.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn09 {
  top: 69.147286%;
  left: 20.833333%;
  background: url(../images/facility/btn_09.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn10 {
  top: 28.527131%;
  left: 11.166666%;
  background: url(../images/facility/btn_10.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn11 {
  top: 46.201550%;
  left: 40.166666%;
  background: url(../images/facility/btn_11.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn12 {
  top: 11.007751%;
  left: 77.416666%;
  background: url(../images/facility/btn_12.png) 0 0 / contain no-repeat;
}
ul#facility li#f_btn13 {
  top: 69.689922%;
  left: 79%;
  background: url(../images/facility/btn_13.png) 0 0 / contain no-repeat;
}
/* facility_list */
ul#facility_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin: 1em 0 0;
}
ul#facility_list li {
  position: relative;
  height: 60px;
  line-height: 60px;
  color: var(--tc);
  font-size: 1.2rem;
  font-weight: var(--t7);
  background: var(--ff);
  border: 1px solid var(--line);
  cursor: pointer;
  -webkit-transition: all .3s cubic-bezier(.56,.07,.45,1);
  transition: all .3s cubic-bezier(.56,.07,.45,1);
}
ul#facility_list li::after {
  position: absolute;
  content: '';
  top: 22px;
  right: .5em;
  background: var(--co_bl);
  width: 9px;
  height: 16px;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  -webkit-transition: all .3s cubic-bezier(.56,.07,.45,1);
  transition: all .3s cubic-bezier(.56,.07,.45,1);
}
ul#facility_list li span.number,
.modal_box h1 span.number {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 1em 0 .5em;
  line-height: 28px;
  color: var(--ff);
  font-size: .9rem;
  text-align:center;
  background: var(--co_or);
  border-radius: 50%;
  -webkit-transition: all .3s cubic-bezier(.56,.07,.45,1);
  transition: all .3s cubic-bezier(.56,.07,.45,1);
}
/* facility_erea_list */
ul.facility_erea_list {
  width: 100%;
}
ul.facility_erea_list li {
  position: relative;
  line-height: 45px;
  border-bottom: 1px solid var(--line);
}
ul.facility_erea_list li::before {
  position: absolute;
  content: '';
  top: 16.5px;
  left: .3em;
  background: var(--co_bl);
  width: 7px;
  height: 12px;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
ul.facility_erea_list li a {
  padding-left: 1.4em;
  color: var(--tc);
  font-size: 1.1rem;
  font-weight: var(--t7);
  -webkit-transition: all .3s cubic-bezier(.56,.07,.45,1);
  transition: all .3s cubic-bezier(.56,.07,.45,1);
}
@media all and (max-width: 359px) {
  ul.facility_erea_list li a {
    padding-left: 1.2em;
    font-size: .75rem;
  }
}
@media all and (min-width: 360px) and (max-width: 767px) {
  ul.facility_erea_list li a {
    padding-left: 1.2em;
    font-size: .9rem;
  }
}
@media all and (max-width: 767px) {
  ul#facility_list li {
    flex-basis: 100%;
    height: 45px;
    line-height: 45px;
    margin: 0 0 .5em;
    font-size: 1rem;
  }
  ul#facility_list li::after {
    top: 16px;
    width: 7px;
    height: 12px;
  }
  ul#facility_list li span.number {
    width: 20px;
    height: 20px;
    margin: 0 1em;
    line-height: 20px;
    font-size: .6rem;
    transform: translateY(-3px);
  }
  .modal_box h1 span.number {
    width: 26px;
    height: 26px;
    margin: 0 .5em 0 0;
    line-height: 25px;
    font-size: .8rem;
    transform: translateY(-2px);
  }
}
@media all and (min-width: 768px) and (max-width: 1023px) {
  ul#facility_list li {
    flex-basis: calc(98% / 2);
    margin: 0 0 2%;
    font-size: 1.1rem;
  }
  ul#facility_list li span.number {
    width: 26px;
    height: 26px;
    margin: 0 .5em;
    line-height: 25px;
    transform: translateY(-2px);
  }
  .modal_box h1 span.number {
    margin: 0 .5em 0 0;
    transform: translateY(-3px);
  }
}
@media all and (min-width: 1024px) {
  ul#facility_list {
    margin: 60px 0 0;
  }
  ul#facility_list li {
    flex-basis: calc(98% / 3);
    margin: 0 0 1%;
  }
  ul#facility_list li span.number {
    transform: translateY(-2px);
  }
  .modal_box h1 span.number {
    width: 36px;
    height: 36px;
    line-height: 34px;
    font-size: 1.05rem;
    margin: 0 1em 0 0;
    transform: translateY(-3px);
  }
  ul.facility_erea_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  ul.facility_erea_list li {
    flex-basis: calc(98% / 2);
  }
}
@media all and (min-width: 1280px) {
  ul.facility_erea_list li::before {
    top: 15.5px;
    left: .5em;
    width: 8px;
    height: 14px;
  }
  ul.facility_erea_list li a {
    font-size: 1.2rem;
  }
}
/* hover */
@media (any-hover: hover) {
  ul#facility_list li:hover {
    color: var(--ff);
    background: var(--co_or);
    -webkit-transition: all .3s cubic-bezier(.56,.07,.45,1);
    transition: all .3s cubic-bezier(.56,.07,.45,1);
  }
  ul#facility_list li:hover:after {
    background: var(--ff);
    -webkit-transition: all .3s cubic-bezier(.56,.07,.45,1);
    transition: all .3s cubic-bezier(.56,.07,.45,1);
  }
  ul#facility_list li:hover span.number {
    color: var(--co_or);
    background: var(--ff);
    -webkit-transition: all .3s cubic-bezier(.56,.07,.45,1);
    transition: all .3s cubic-bezier(.56,.07,.45,1);
  }
  ul.facility_erea_list li:hover a {
    color: var(--co_bl);
    -webkit-transition: all .3s cubic-bezier(.56,.07,.45,1);
    transition: all .3s cubic-bezier(.56,.07,.45,1);
  }
}