@import url("https://use.typekit.net/aob0oor.css");
.slick-dotted.slick-slider {
  margin-bottom: 0 !important; }

.slick-dots {
  bottom: 3rem !important; }
  .slick-dots li button:before {
    font-size: inherit !important;
    border-radius: calc(infinity * 1px);
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #fff;
    width: 12px !important;
    height: 12px !important; }
  .slick-dots li.slick-active button:before {
    background-color: #fff; }
  @media screen and (max-width: 768px) {
    .slick-dots {
      bottom: 1rem !important; }
      .slick-dots li {
        margin: 0.1rem !important; }
        .slick-dots li button:before {
          width: 9px !important;
          height: 9px !important; } }

.inner.page-head {
  padding-bottom: 0; }
  .inner.page-head .lead {
    margin-top: 2.5rem; }

.facility-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem; }

.facility .img .note {
  right: inherit;
  left: 1rem; }
.facility .copy {
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.05em; }
  .facility .copy .large {
    color: #1e6f80;
    font-size: 2.3rem;
    line-height: 1.3; }
    .facility .copy .large sup {
      font-size: 50%; }
  .facility .copy .note {
    margin-top: 5px; }
    .facility .copy .note + p {
      margin-top: 1rem; }

.about {
  text-align: center;
  margin-top: 10rem; }

.about-body {
  position: relative;
  padding: 8rem 2rem 7rem;
  margin-top: 8rem; }
  .about-body::before, .about-body::after {
    position: absolute;
    content: '';
    display: block;
    width: calc(100% - 1rem);
    height: 100%;
    border: 2px solid #c6c3ba; }
  .about-body::before {
    left: 0;
    top: 0; }
  .about-body::after {
    left: 1rem;
    top: 1rem; }
  .about-body .name {
    font-size: 2.8rem;
    letter-spacing: 0.1em;
    line-height: 1.4; }
  .about-body .lead {
    margin-top: 4rem;
    letter-spacing: 0.1em; }

.cg {
  position: relative;
  margin-top: 4rem; }
  .cg .midashi {
    position: absolute;
    max-width: 1100px;
    width: 90%;
    left: 50%;
    top: 18%;
    translate: -50% 0;
    z-index: 1; }
  .cg .img .note {
    right: inherit;
    left: 1rem; }

.banner-list {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 4rem; }
  .banner-list li img {
    transition: filter 0.3s linear; }
  .banner-list li a:hover img {
    filter: brightness(115%); }

@media screen and (max-width: 900px) {
  .facility-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem; } }
@media screen and (max-width: 768px) {
  .facility-list {
    gap: 2rem; }

  .about .logo img {
    width: 300px;
    height: auto; }

  .about-body {
    padding: 6rem 2rem 5rem;
    margin-top: 6rem; }

  .inner:has(.banner-list) {
    width: 90%;
    padding: 1rem 0 5rem; }

  .banner-list {
    gap: 0; }
    .banner-list li {
      margin-top: 4rem; }

  .cg {
    margin-top: 2rem; }
    .cg .midashi {
      top: 2.5rem;
      font-size: 2.4rem; } }