@charset "UTF-8";

.p-caption:not(.p-caption.w) {
  color: #666;
}

.si::before {
  background-color: #119A97;
}

/* equipment
---------------------------------------------- */
.equipMain {
  position: relative;
  z-index: 0;
}
.equipMainBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 2;
}

.equipSection__title {
  color: rgb(255 255 255 / .8);
  font-size: clamp(36px, 0.67rem + 6.73vw, 140px);
  font-weight: 500;
  text-align: center;
}

.equipSection__copy {
  color: #fff;
  text-align: center;
}
* + .equipSection__copy {
  margin-top: 1.5em;
}

.equipMain__bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 244, 113, 1) 0%, rgba(116, 216, 255, 1) 50%, rgba(47, 247, 229, 1) 100%);
  opacity: .3;
  z-index: 1;
}

.equipContents {
  padding-block: clamp(60px, 2.38rem + 5.83vw, 150px) clamp(100px, 4.73rem + 6.47vw, 200px);
}

.equipListContents__copy {
  font-size: clamp(22px, 0.62rem + 1.56vw, 40px);
  line-height: 1.7;
  text-align: center;
}
.equipListContents__copy + * {
  margin-top: 90px;
}

.equipList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px calc(40 / 1400 * 100%);
  max-width: 1400px;
}

.equipList__body {
  padding-top: 25px;
}

.equipList__name {
  font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
  font-size: clamp(18px, 1.04rem + 0.17vw, 20px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.equipList__text {
  font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
  font-size: clamp(14px, 0.79rem + 0.17vw, 16px);
  letter-spacing: 0.05em;
  line-height: 1.875;
}

* + .equipList__text {
  margin-top: 1em;
}

.equipList__caption {
  font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
  font-size: 10px;
  line-height: 2;
}
* + .equipList__caption {
  margin-top: 1.5em;
}

.equipSection .sectionCircle {
  bottom: 0;
  right: 0;
  width: calc(1417 / 1920 * 100%);
  z-index: -1;
}

/* kitchen */
.delicia {
  max-width: 1400px;
  box-shadow: 0 0 10px rgba(0 0 0 / .1);
  margin-top: 90px;
}

/* other */
/* bubble */
.bubble {
  padding-bottom: 0;
}

.bubbleBox01Head {
  width: calc(720 / 1200 * 100%);
}

.bubbleBox01Head__box {
  margin-top: 60px;
}
.bubbleBox01__item {
  width: calc(350 / 720 * 100%);
}
.bubbleBox01__item .text {
  font-size: clamp(16px, 0.83rem + 0.35vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  margin-top: .8em;
  text-align: center;
}

.bubbleBox01Body {
  width: calc(340 / 1200 * 100%);
  padding-top: 1em;
}

.bubbleMerit {
  max-width: 1400px;
  margin-top: 90px;
}

.bubbleMeritList {
  position: relative;
  max-width: 922px;
  margin-inline: auto;
  z-index: 1;
}
.bubbleMeritList > li {
  width: calc((100% - 172px) / 3);
  background-color: #fff;
  border: 2px solid #87d0f4;
  border-radius: 10px;
  padding: 2.6%;
}

.bubbleMeritList__title {
  font-size: clamp(16px, 0.83rem + 0.35vw, 20px);
  line-height: 1.4;
  color: #36bdef;
  text-align: center;
}

.bubbleMeritList__text {
  font-size: 14px;
  line-height: 2;
  margin-top: 1em;
}
.bubbleMeritList__text .line {
  background:linear-gradient(transparent 80%, rgb(234 85 4 / .5) 0%);
}

.bubbleMerit__img {
  margin-top: -90px;
}

.bubbleAbout {
  position: relative;
  max-width: 1400px;
  margin-top: 100px;
  padding: min(calc(100 / 1400 * 100%),100px);
  z-index: 0;
}
.bubbleAbout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 244, 113, 1) 0%, rgba(116, 216, 255, 1) 50%, rgba(47, 247, 229, 1) 100%);
  opacity: .3;
  z-index: -1;
}

.bubbleAbout__title {
  text-align: center;
}

.bubbleAbout__text {
  margin-top: 1.6em;
  text-align: center;
}

.bubbleAboutList {
  margin-top: 50px;
}
.bubbleAboutList > li {
  width: calc((100% - 120px) / 3);
}

.bubbleAboutList__name {
  font-size: clamp(18px, 1.04rem + 0.17vw, 20px);
  line-height: 1.4;
  margin-top: 1em;
}
.bubbleAboutList__name .small {
  display: block;
  width: fit-content;
  font-size: 70%;
  background-color: #fff;
  margin-top: 8px;
  padding: 1px;
}

.bubbleAboutList__text {
  font-size: 14px;
  line-height: 2;
  margin-top: 0.8em;
}

.bubbleAboutCap {
  max-width: 1400px;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 1em;
  text-align: right;
}

@media screen and (max-width: 991px) {
  .equipList {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px calc(40 / 640 * 100%);
    max-width: 640px;
  }
}

@media screen and (min-width: 769px) {
  .equipList--col3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px calc(40 / 1400 * 100%);
    max-width: 1400px;
  }

  /* toilet */
  .toilet .gridChange {
    grid-area: 2 / 1 / 3 / 3;
  }
}

@media screen and (max-width: 768px) {
  .equipSection__copy {
    font-size: 16px;
  }
  .equipListContents__copy + * {
    margin-top: 30px;
  }

  .equipList {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  /* kitchen */
  .delicia {
    max-width: 400px;
    margin-top: 40px;
  }

  /* other */

  /* bubble */
  .bubbleBox01 {
    row-gap: 30px;
  }
  .bubbleBox01Head {
    width: 100%;
  }

  .bubbleBox01Head__box {
    margin-top: 30px;
  }
  .bubbleBox01__item {
    width: calc((100% - 4px) / 2);
  }

  .bubbleBox01Body {
    width: calc(200 / 320 * 100%);
    margin-inline: auto;
    padding-top: 0;
  }

  .bubbleMerit {
    max-width: 400px;
    margin-top: 50px;
  }

  .bubbleMeritList {
    row-gap: 20px;
  }
  .bubbleMeritList > li {
    width: 100%;
    padding: 8%;
  }

  .bubbleMeritList__title {
    font-size: 20px;
  }

  .bubbleMeritList__text {
    margin-top: 0.6em;
  }

  .bubbleMerit__img {
    margin-top: 30px;
  }

  .bubbleAbout {
    max-width: 400px;
    margin-top: 50px;
    padding: 30px;
  }

  .bubbleAbout__title {
    font-size: 20px;
  }

  .bubbleAbout__text {
    margin-top: 1em;
    text-align: left;
  }

  .bubbleAboutList {
    row-gap: 30px;
    margin-top: 30px;
  }
  .bubbleAboutList > li {
    width: 100%;
  }

  .bubbleAboutList__name .small {
    font-size: 66.667%;
    margin-top: 8px;
  }

  .bubbleAboutCap {
    max-width: 400px;
    font-size: 11px;
    text-align: left;
  }

  .modal__container {
    width: 100%;
    padding: 0;
  }

  .equipSection .sectionCircle {
    width: calc(250 / 375 * 100%);
  }
}