@charset "UTF-8";
.NotoSans {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

.inter, .sub_ttl {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.roboto {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.arrow_left {
  display: inline-block;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  rotate: -135deg;
}

.arrow_right {
  display: inline-block;
  border: 1px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  rotate: 45deg;
}

/* ▼▼▼ 施設紹介
===================================== */
#main {
  padding: 0;
}
#main::before {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 540px;
}
@media screen and (max-width: 767px) {
  #main::before {
    height: 500px;
  }
}

body.activit1 #main::before {
  background-image: url(../img/activit/activit1.jpg);
}
body.activit2 #main::before {
  background-image: url(../img/activit/activit2.jpg);
}
body.activit3 #main::before {
  background-image: url(../img/activit/activit3.jpg);
}
body.activit4 #main::before {
  background-image: url(../img/activit/activit4.jpg);
}
body.activit5 #main::before {
  background-image: url(../img/activit/activit5.jpg);
}
body.activit6 #main::before {
  background-image: url(../img/activit/activit6.jpg);
}
@media screen and (max-width: 767px) {
  body.activit1 #main::before {
    background-image: url(../img/activit/activit1_sp.jpg);
  }
  body.activit4 #main::before {
    background-image: url(../img/activit/activit4_sp.jpg);
  }
  body.activit6 #main::before {
    background-image: url(../img/activit/activit6_sp.jpg);
  }
}

.read {
  width: min(100%, 1036px);
  padding: 58px 18px 80px;
  margin: 0 auto;
  min-height: 200px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.86;
}
@media screen and (max-width: 767px) {
  .read {
    padding: 40px 18px 100px;
    line-height: 1.57;
    font-weight: 500;
  }
}

.sub_ttl {
  font-size: 34px;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .sub_ttl {
    font-size: 28px;
  }
}

.contents {
  padding: 108px 0 70px;
  position: relative;
}
.contents .sub_ttl {
  width: 100%;
  position: absolute;
  top: -135px;
  left: 0;
}
@media screen and (max-width: 767px) {
  .contents {
    padding: 76px 0 20px;
  }
  .contents .sub_ttl {
    top: -95px;
  }
}