@charset "UTF-8";

:root {
  --color-black: #333;
  --color-black2: #231815;
  --color-white: #fff;
  --color-primary: #66d4a2;

  --color-grad: linear-gradient(90deg, rgba(93, 223, 145, 1) 33%, rgba(123, 217, 208, 1) 100%);

  --noto-sans: "Noto Sans JP", serif;

  --zen-min: "Zen Old Mincho", serif;
  --zen-kaku: "Zen Kaku Gothic New", sans-serif;
}

/*================================================
 * 
================================================*/
.facility_block {
  font-family: var(--zen-kaku);
  margin-top: 6rem;
}

.facility_block h3 {
  color: var(--color-primary);
  font-size: 3.1rem;
  font-weight: 700;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-primary);
}


.facility_block ul {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: repeat(2, 1fr);
  padding-top: 2rem;
}

.facility_block ul li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 2.3rem;
  font-weight: 400;
}

.facility_block ul li::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../../images/facility/arrow.webp);
  width: 0.7rem;
  height: 1.4rem;
  top: 1.4rem;
  left: 0;
}

@media screen and (max-width:767px) {
  #facility .wrap_md {
    width: 100%;
  }

  .facility_block h3 {
    font-size: 2.3rem;
    padding: 0 2rem;
    position: relative;
  }

  .facility_block h3::before,
  .facility_block h3::after {
    position: absolute;
    content: "";
    width: 2rem;
    height: 1px;
    background: var(--color-black);
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
    transition: .2s;
  }

  .facility_block h3::after {
    transform: translateY(-50%) rotate(90deg);
  }

  .facility_block h3.open::after {
    transform: translateY(-50%) rotate(0deg);
  }


  .facility_block ul {
    gap: 1rem 0rem;
    grid-template-columns: repeat(1, 1fr);
    padding: 2rem 2rem;
  }

  .facility_block ul li {
    padding-left: 1.8rem;
    font-size: 1.7rem;
    font-weight: 400;
  }

  .facility_block ul li::before {
    top: 0.9rem;
  }

  .facility_block .detail {
    display: none;
  }
}


/*================================================
 * 
================================================*/


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

/*================================================
 * 
================================================*/


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