@charset "UTF-8";

/* --------------------------------
  施設案内
 -------------------------------- */

/*---- 施設リスト ----*/
.p-facilitySection .c-heading--secondry {
  margin-bottom: 0;
}
.p-facilityList {
  display: grid;
  gap: min(50px, 5vw);
}

.p-facilityList__item {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
  justify-content: space-between;
}
.p-facilityList__item .c-heading--thirdly {
  width: 100%;
}
.p-facilityList__photo {
  flex: 1 1 clamp(200px, 40%, 400px);
}
.p-facilityList__photo img {
  aspect-ratio: 1/0.7;
  object-position: center;
  object-fit: cover;
  width: 100%;
}
.p-facilityList__detail {
  flex: 1 1 clamp(200px, 55%, 700px);
  display: grid;
  gap: 1em;
  align-content: start;
}
.p-facilityList__catch {
  font-weight: 600;
}
.p-facilityList__info {
  line-height: 1.6em;
}
.p-facilityList__info li::before {
  content: "・";
}
.p-facilityList__label {
  background: var(--color-green);
  color: var(--color-white);
  padding: 0.5em;
  width: fit-content;
  margin-right: 0.5em;
  line-height: 1;
  border-radius: 5px;
  font-size: 0.875em;
}
.p-facilityList__brandLogos {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}
.p-facilityList__brandLogos a {
  display: flex;
  align-items: center;
}
.p-facilityList__brandLogos img {
  object-fit: contain;
  max-height: 45px;
}
@media screen and (max-width: 650px) {
  .p-facilityList__item {
    max-width: 430px;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .p-facilityList__photo {
    aspect-ratio: 1/0.6;
  }
  .p-facilityList__detail {
    width: 100%;
  }
  .p-facilityList__label {
    display: block;
  }
  .p-facilityList__brandLogos img {
    max-height: 30px;
  }
}

/*---- レストラン予約 ----*/
.p-restaurantReservation {
  display: grid;
  gap: min(50px, 5vw);
  margin-bottom: min(50px, 10vw);
}
.p-restaurantReservation__headingImage {
  width: min(650px, 100%);
  margin: min(50px, 5vw) auto;
}
.p-restaurantReservation__headingTitle,
.p-restaurantReservation__flowTitle,
.p-restaurantReservation__flowStep {
  width: 100%;
  font-weight: 500;
  background: #4fbbb9;
  color: var(--color-white);
  padding: min(1em, 0.6em);
  font-size: clamp(1em, 3vw, 1.5em);
}
.p-restaurantReservation__flowTitle {
  background: #727171;
}
.p-restaurantReservation__flowStep {
  border-radius: 10px;
}
.p-restaurantReservation__details {
  width: min(850px, 93%);
  margin-inline: auto;
  display: grid;
  gap: 20px;
}
.p-restaurantReservation__map {
  padding: 5%;
}
.p-restaurantReservation__item {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 20px;
}
.p-restaurantReservation__note li {
  line-height: 1.6;
  font-size: 0.75em;
  padding-left: 1em;
  text-indent: -1em;
}

.p-priceNote__list.-bgGray {
  background-color: var(--color-lightgray);
  padding: 16px;
}

.p-priceNote__item {
  line-height: 1.6;
  font-size: 0.75em;
  padding-left: 1em;
  text-indent: -1em;
}
.p-restaurantReservation__term {
  width: 5em;
}
.p-restaurantReservation__description {
  line-height: 1.6;
}
.p-restaurantReservation__flow {
  width: min(850px, 93%);
  margin-inline: auto;
  display: grid;
  gap: min(50px, 5vw);
}

.p-restaurantReservation__flowList {
  display: grid;
  gap: min(50px, 5vw);
}
.p-restaurantReservation__flowCard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: min(50px, 4vw);
}

.p-restaurantReservation__flowImage {
  flex: 1 1 clamp(200px, 30%, 400px);
}
.p-restaurantReservation__flowImage img {
  max-height: 230px;
  max-width: 300px;
  object-fit: contain;
  margin: auto;
}
.p-restaurantReservation__flowText {
  line-height: 1.6;
  flex: 1 1 clamp(200px, 65%, 400px);
}
.p-restaurantReservation__button {
  margin-inline: auto;
}
.p-restaurantReservation__button .c-btn--medium {
  font-size: clamp(1.1em, 2.5vw, 1.4em);
  letter-spacing: 2px;
}

@media screen and (max-width: 650px) {
  .p-restaurantReservation__flowImage img {
    max-height: 180px;
    max-width: 200px;
  }
  .p-restaurantReservation__term {
    width: 100%;
  }
}