@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@100;300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPMincho:wght@400;700&display=swap");
.p-commons {
  background-image: url("../img/top/bg-concept-ptn.png"), linear-gradient(rgba(155, 145, 130, 0.3), rgba(155, 145, 130, 0.3));
  background-color: #ffffff;
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: repeat-y;
  width: 100%;
}
.p-commons .mv {
  background-image: url("../img/top/bg-commons.jpg");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: min(41.6666666667vw, 800px);
}
@media screen and (max-width: 750px) {
  .p-commons .mv {
    height: 100vw;
  }
}
.p-commons .info {
  position: relative;
  background-image: url("../img/top/bg-info.jpg");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: repeat-y;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 750px) {
  .p-commons .info {
    background-size: cover;
    background-position: center;
  }
}
.p-commons .info__inner {
  width: 100%;
  max-width: min(66.6666666667vw, 1280px);
  padding: min(3.125vw, 60px) 0 min(3.6458333333vw, 70px);
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .p-commons .info__inner {
    max-width: none;
    padding: 8vw 0 13.3333333333vw;
  }
}
.p-commons .info__content {
  width: 100%;
}
.p-commons .info__content .title h3 {
  width: fit-content;
  font-family: "Cinzel", serif;
  font-size: min(1.4583333333vw, 28px);
  letter-spacing: 0.2em;
  color: #ffffff;
  margin: 0 auto min(0.78125vw, 15px);
  filter: blur(10px) opacity(0.1);
  transition: filter 1s;
}
.p-commons .info__content .title h3.animate {
  filter: blur(0px) opacity(1);
}
@media screen and (max-width: 750px) {
  .p-commons .info__content .title h3 {
    font-size: 4.8vw;
    margin: 0 auto 2vw;
  }
}
.p-commons .info__content .info-content {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
}
.p-commons .info__content .info-content__description {
  position: relative;
  color: #FDE9C8;
  opacity: 0;
  translate: 0 50% 0;
  transition: opacity 0.6s 0.2s ease-in, translate 0.8s ease-in;
}
.p-commons .info__content .info-content__description.animate {
  opacity: 1;
  translate: 0 0 0;
}
.p-commons .info__content .info-content__description p {
  font-family: "Shippori Mincho", serif;
  font-size: min(2.5520833333vw, 49px);
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .p-commons .info__content .info-content__description p {
    font-size: 6.4vw;
    line-height: 1.6;
  }
}
.p-commons .info__content .info-content__description p .notation {
  position: absolute;
  top: 0;
  right: max(-1.3020833333vw, -25px);
  transform: translateY(100%);
  display: block;
  height: 1em;
  font-size: min(0.8854166667vw, 17px);
  line-height: 1;
  letter-spacing: normal;
  word-break: keep-all;
}
@media screen and (max-width: 750px) {
  .p-commons .info__content .info-content__description p .notation {
    top: 10.6666666667vw;
    right: 2.6666666667vw;
    font-size: 2.6666666667vw;
  }
}
.p-commons .detail__inner {
  padding: min(7.03125vw, 135px) 0 min(5.2083333333vw, 100px);
}
@media screen and (max-width: 750px) {
  .p-commons .detail__inner {
    padding: 8vw 0;
  }
}
.p-commons .detail__content {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.p-commons .detail__content .title {
  position: relative;
  font-family: "Shippori Mincho", serif;
  font-size: min(2.5520833333vw, 49px);
  line-height: min(4.53125vw, 87px);
  letter-spacing: 0.1em;
  text-align: center;
  margin: 0 0 min(3.125vw, 60px);
}
.p-commons .detail__content .title span:not(.notation) {
  font-size: min(3.1770833333vw, 61px);
}
@media screen and (max-width: 750px) {
  .p-commons .detail__content .title {
    font-size: 6.4vw;
    line-height: 1.8;
    margin: 0 0 8vw;
  }
  .p-commons .detail__content .title span:not(.notation) {
    font-size: 8vw;
  }
}
.p-commons .detail__content .description {
  font-family: "Shippori Mincho", serif;
  font-size: min(0.9375vw, 18px);
  line-height: min(2.8645833333vw, 55px);
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .p-commons .detail__content .description {
    font-size: 3.2vw;
    line-height: 8vw;
  }
}
.p-commons .detail__content .notation {
  position: absolute;
  top: 0;
  right: max(-1.3020833333vw, -25px);
  transform: translateY(100%);
  display: block;
  height: 1em;
  font-size: min(0.8854166667vw, 17px);
  line-height: 1;
  letter-spacing: normal;
  word-break: keep-all;
}
@media screen and (max-width: 750px) {
  .p-commons .detail__content .notation {
    font-size: 2.6666666667vw;
  }
}
.p-commons section.design__inner {
  width: 100%;
}
.p-commons section.design .area {
  width: 100%;
}
.p-commons section.design .area__mv {
  position: relative;
  background-color: #988755;
  width: 100%;
  height: min(55.7291666667vw, 1070px);
}
@media screen and (max-width: 750px) {
  .p-commons section.design .area__mv {
    height: 73.3333333333vw;
  }
}
.p-commons section.design .area__mv::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 200% 200%;
  background-position: center;
  width: 100%;
  height: 100%;
  clip-path: inset(50% 50% 50% 50%);
  transition: background-size 1s ease-out, clip-path 1s ease-out;
}
.p-commons section.design .area__mv.animate::before {
  background-size: 100% 100%;
  clip-path: inset(0% 0% 0% 0%);
}
.p-commons section.design .area__mv.entrance::before {
  background-image: url("../img/commons/bg_mv-area-entrance.jpg");
}
.p-commons section.design .area__mv.hall::before {
  background-image: url("../img/commons/bg_mv-area-hall.jpg");
}
.p-commons section.design .area__mv.lounge::before {
  background-image: url("../img/commons/bg_mv-area-lounge.jpg");
}
.p-commons section.design .area__detail {
  text-align: center;
  margin: min(3.75vw, 72px) 0;
}
@media screen and (max-width: 750px) {
  .p-commons section.design .area__detail {
    margin: 8vw 0;
  }
}
.p-commons section.design .area__detail > h3 {
  font-family: "Cinzel", serif;
  font-size: min(4.2708333333vw, 82px);
  line-height: 1;
  color: #828582;
  margin-bottom: min(2.0833333333vw, 40px);
}
@media screen and (max-width: 750px) {
  .p-commons section.design .area__detail > h3 {
    font-size: 10.6666666667vw;
    margin-bottom: 5.3333333333vw;
  }
}
.p-commons section.design .area__detail > p {
  font-family: "Shippori Mincho", serif;
  font-size: min(1.3541666667vw, 26px);
  line-height: 1.8;
  letter-spacing: 0.15em;
}
.p-commons section.design .area__detail > p + p {
  font-size: min(0.8333333333vw, 16px);
  line-height: 2.5;
  margin-top: min(1.5625vw, 30px);
}
@media screen and (max-width: 750px) {
  .p-commons section.design .area__detail > p {
    font-size: 5.0666666667vw;
  }
  .p-commons section.design .area__detail > p + p {
    font-size: 3.2vw;
    margin-top: 5.3333333333vw;
  }
}
.p-commons .facility {
  width: 100%;
  max-width: min(72.9166666667vw, 1400px);
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .p-commons .facility {
    width: calc(100% - 8vw);
    max-width: none;
  }
}
.p-commons .facility__map {
  width: 100%;
  margin: 0 0 min(5.2083333333vw, 100px);
}
@media screen and (max-width: 750px) {
  .p-commons .facility__map {
    margin: 0 0 10.6666666667vw;
  }
}
.p-commons .facility__list {
  width: 100%;
}
.p-commons .facility__list > p {
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: min(1.8229166667vw, 35px);
  text-align: center;
}
@media screen and (max-width: 750px) {
  .p-commons .facility__list > p {
    font-size: 5.6vw;
  }
}
.p-commons .facility__list .list-items {
  counter-reset: item-counter;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(1.3020833333vw, 25px);
  width: 100%;
  margin: min(7.8125vw, 150px) 0 min(9.375vw, 180px);
}
@media screen and (max-width: 750px) {
  .p-commons .facility__list .list-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.6666666667vw;
    margin: 16vw 0 21.3333333333vw;
  }
}
.p-commons .facility__list .list-item {
  counter-increment: item-counter;
  display: flex;
  flex-flow: column nowrap;
  gap: min(2.0833333333vw, 40px);
}
@media screen and (max-width: 750px) {
  .p-commons .facility__list .list-item {
    gap: 5.3333333333vw;
  }
}
.p-commons .facility__list .list-item .image {
  position: relative;
  width: 100%;
}
.p-commons .facility__list .list-item .image img {
  width: 100%;
}
.p-commons .facility__list .list-item .image::before {
  content: counter(item-counter);
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #705d17;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(1.8229166667vw, 35px);
  height: min(1.8229166667vw, 35px);
  font-family: "Shippori Mincho", serif;
  font-size: min(1.25vw, 24px);
  line-height: 1;
  color: #ffffff;
}
@media screen and (max-width: 750px) {
  .p-commons .facility__list .list-item .image::before {
    width: 4vw;
    height: 4vw;
    font-size: 2.9333333333vw;
  }
}
.p-commons .facility__list .list-item .image.caption-black::after {
  color: #333333;
  filter: none;
}
.p-commons .facility__list .list-item .text > p {
  font-family: "Shippori Mincho", serif;
  font-size: min(1.25vw, 24px);
  line-height: 1;
  text-align: center;
  color: #453c33;
}
.p-commons .facility__list .list-item .text > p > span {
  font-size: min(0.9375vw, 18px);
}
.p-commons .facility__list .list-item .text > p + p {
  font-size: min(0.78125vw, 15px);
  line-height: 2;
  color: #333333;
  margin-top: min(1.3541666667vw, 26px);
}
.p-commons .facility__list .list-item .text > p + p span {
  font-size: min(0.5208333333vw, 10px);
}
@media screen and (max-width: 750px) {
  .p-commons .facility__list .list-item .text > p {
    font-size: 4.2666666667vw;
    line-height: 1.6;
  }
  .p-commons .facility__list .list-item .text > p > span {
    font-size: 2.1333333333vw;
  }
  .p-commons .facility__list .list-item .text > p + p {
    font-size: 2.9333333333vw;
    line-height: 1.8;
    text-align: left;
    margin-top: 4vw;
  }
  .p-commons .facility__list .list-item .text > p + p span {
    font-size: 1.3333333333vw;
    line-height: 1.6vw;
  }
}

/*# sourceMappingURL=commons.css.map */