@charset "UTF-8";
/* %算出に使用 */
/* ===============================
  TOP
=============================== */
/*------------------------------
fv
------------------------------*/
/*------------------------------
floating-cta
------------------------------*/
/*------------------------------
news
------------------------------*/
.news {
  padding: min(160px, 8.3333333333vw) 0 0;
}

.news__items {
  margin-top: 2.5%;
}

.news__button {
  margin-top: 2.5%;
}
@media (max-width: 767px) {
  .news__button {
    margin-top: 6.5%;
  }
}

/*------------------------------
concept
------------------------------*/
.concept {
  position: relative;
  border-top: 1px solid #4d5156;
  padding-top: 5.3%;
  margin-top: 8.5%;
  padding-bottom: 5.4%;
}
.concept .concept-img1 {
  position: absolute;
  aspect-ratio: 949/585;
  transform: translate(0%, -50%);
  width: 30.2%;
  right: 0%;
  top: 0%;
}
.concept .concept-img2 {
  position: absolute;
  aspect-ratio: 936/1392;
  transform: translate(0%, 0%);
  width: 29.6%;
  left: 0%;
  top: 0%;
}
@media (max-width: 767px) {
  .concept {
    padding-bottom: 12.4%;
  }
  .concept .concept-img1 {
    aspect-ratio: 316/410;
    width: 41.5%;
    right: 0%;
    top: 34.7%;
  }
  .concept .concept-img2 {
    width: 48.6%;
  }
}

.concept__content {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding-left: 13%;
}
@media (max-width: 767px) {
  .concept__content {
    width: calc(100% + 1em);
    margin-top: 95%;
    padding-left: 0;
  }
}

.concept__text {
  font-size: 1.1464968153vw;
  font-weight: 350;
  line-height: 2.7777777778;
  letter-spacing: 0.08em;
  margin-top: 4.4270833333vw;
}
@media (max-width: 767px) {
  .concept__text {
    font-size: 3.2vw;
    letter-spacing: normal;
    margin-top: 4em;
    line-height: 2.9;
  }
}

.concept__buttons {
  margin-top: 7%;
}
.concept__buttons a:nth-child(2) {
  margin-left: 2.6041666667vw;
}
@media (max-width: 767px) {
  .concept__buttons a:nth-child(2) {
    margin-left: 0;
    margin-top: 10px;
  }
}

/*------------------------------
works
------------------------------*/
.works {
  position: relative;
  z-index: 10;
  margin-bottom: 8.6%;
}
@media (max-width: 767px) {
  .works {
    margin-bottom: 54.6%;
  }
}

.works__hero {
  position: relative;
}

.works__hero-en {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  font-size: 17.3885350318vw;
  font-family: "Cormorant Garamond", serif;
  color: #fff;
}
@media (max-width: 767px) {
  .works__hero-en {
    font-size: 35.2vw;
  }
}

.works__container-wrap {
  background: #47555e;
  position: relative;
  padding: 11% 0;
}
@media (max-width: 767px) {
  .works__container-wrap {
    padding: 88% 0 54%;
  }
}

.works__container {
  color: #fff;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .works__container {
    flex-direction: column;
    position: relative;
    z-index: 1000;
  }
  .works__container:nth-child(n+2) {
    margin-top: 9%;
  }
}

.works__image-wrap {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 92%;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.works__image-wrap.act .works__image {
  opacity: 1;
}
@media (max-width: 767px) {
  .works__image-wrap {
    height: 100%;
  }
}

.works__image {
  width: 46.7%;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0px;
  opacity: 0;
  transition: all 0.7s;
}
.works__image img {
  aspect-ratio: 733/954;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0 3.1847133758vw 0 0;
}
@media (max-width: 767px) {
  .works__image {
    width: 58.7%;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .works__image1 {
    top: 2.4%;
    left: 0;
    position: absolute;
    bottom: unset;
  }
}

@media (max-width: 767px) {
  .works__image2 {
    left: 0;
    position: absolute;
    bottom: -8.6%;
  }
}

.works__content {
  width: 46.6666666667%;
  margin-left: auto;
  padding-top: 4.4%;
}
@media (max-width: 767px) {
  .works__content {
    width: 100%;
  }
}

.works__title {
  font-size: 7.0063694268vw;
}
.works__title::after {
  background: url(../img/img_plus_wh.svg) no-repeat center center/contain;
}
@media (max-width: 767px) {
  .works__title {
    margin-left: auto;
    font-size: 14.4vw;
    position: absolute;
    top: -49vw;
    left: 55%;
    transform: translate(-50%, 0%);
    width: 4.8em;
    padding-right: 0;
  }
}

.works__heading {
  margin-top: 7.2%;
}
@media (max-width: 767px) {
  .works__heading {
    margin-top: 5.2%;
    padding-left: 8%;
  }
}

@media (min-width: 768px) {
  .works__heading--3 {
    padding-top: 4.3949044586vw;
  }
}

.works__heading-en {
  display: block;
  font-size: 2.5477707006vw;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-family: "Cormorant Garamond", serif;
}
@media (max-width: 767px) {
  .works__heading-en {
    font-size: 7.4666666667vw;
  }
}

.works__heading-ja {
  display: block;
  font-size: 1.5923566879vw;
  font-weight: 350;
  line-height: 1.2;
  letter-spacing: 0.08em;
  margin-top: 0.75em;
}
@media (max-width: 767px) {
  .works__heading-ja {
    font-size: 4.8vw;
    margin-top: 0.7em;
  }
}

.works__text {
  margin-top: 1em;
  font-size: 1.1464968153vw;
  font-weight: 350;
  line-height: 2.7777777778;
  letter-spacing: 0.08em;
  padding-right: 8em;
}
@media (max-width: 767px) {
  .works__text {
    font-size: 3.4666666667vw;
    padding-left: 8%;
    padding-right: 6%;
    margin-top: 1em;
    line-height: 2.7;
    letter-spacing: -0.01em;
  }
}

.works__button {
  margin-top: 7%;
}
@media (max-width: 767px) {
  .works__button {
    padding-left: 8%;
  }
}

/*------------------------------
projects
------------------------------*/
*:nth-child(n+2 of .projects) {
  margin-top: 6.6%;
}
@media (max-width: 767px) {
  *:nth-child(n+2 of .projects) {
    margin-top: 15.6%;
  }
}

/*------------------------------
business
------------------------------*/
.business {
  overflow: hidden;
  background: #E9E6DE;
}
@media (max-width: 767px) {
  .business {
    padding: min(120px, 31.746031746vw) 0 min(80px, 21.164021164vw);
  }
}

.business--top {
  margin-top: 12%;
  padding: 8% 0 2.5%;
}
@media (max-width: 767px) {
  .business--top {
    padding: 31% 0 2.5%;
  }
}

.business--2 {
  margin-top: 0;
  padding-bottom: 13.5%;
}
@media (max-width: 767px) {
  .business--2 {
    margin-top: -14%;
    padding-bottom: 23.5%;
    padding-top: 0;
  }
}

.business__wrapper {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .business__wrapper {
    display: block;
  }
}

.business__section {
  width: 45.8333333333%;
  background: #fff;
  border-radius: 50px 0 50px 0;
  padding: 4.1666666667% 3.3333333333% 3.3333333333%;
  position: relative;
}
@media (max-width: 767px) {
  .business__section {
    width: 100%;
    padding: 11.1731843575% 8.3798882682%;
  }
  .business__section:nth-child(2) {
    margin-top: 32.1229050279%;
  }
}

.business--renovation {
  margin-bottom: 8%;
}

.business__wrapper {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .business__wrapper {
    display: block;
  }
}

.business__section {
  width: 45.8333333333%;
  background: #fff;
  border-radius: 3.1847133758vw 0 3.1847133758vw 0;
  padding: 4.3% 4% 3%;
  position: relative;
}
@media (max-width: 767px) {
  .business__section {
    width: 100%;
    padding: 12% 9% 9%;
    border-radius: 8vw 0 8vw 0;
  }
  .business__section:nth-child(2) {
    margin-top: 38%;
  }
}

.business__en {
  font-size: 1.9108280255vw;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-family: "Cormorant Garamond", serif;
  position: absolute;
  top: 0;
  left: 8.1818181818%;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .business__en {
    font-size: 5.6vw;
  }
}

.business__image {
  position: absolute;
  top: 0%;
  left: 78%;
  transform: translate(-50%, -50%);
  width: 31%;
}
@media (max-width: 767px) {
  .business__image {
    left: 84%;
    transform: translate(-50%, -70%);
    width: 37%;
  }
}

.business__heading {
  font-size: 1.9108280255vw;
  font-weight: 350;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
@media (max-width: 767px) {
  .business__heading {
    font-size: 5.6vw;
  }
}

.business__description {
  margin-top: 1.3em;
  font-size: 1.1464968153vw;
  line-height: 2.0555555556;
  font-weight: 500;
  letter-spacing: 0.1em;
}
@media (max-width: 767px) {
  .business__description {
    font-size: 3.4666666667vw;
  }
}

.business__button {
  margin-top: 5.4%;
}

.business__button--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.business__button--row a {
  min-width: 10.8em;
}
@media (max-width: 767px) {
  .business__button--row {
    display: block;
  }
  .business__button--row a:nth-child(2) {
    margin-top: 4.1899441341%;
  }
}

.business__button--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.business__button--row a {
  min-width: 10.8em;
}
@media (max-width: 767px) {
  .business__button--row {
    display: block;
  }
  .business__button--row a:nth-child(2) {
    margin-top: 4.1899441341%;
  }
}

.with-concrete {
  margin-top: 4%;
  position: relative;
}
@media (max-width: 767px) {
  .with-concrete {
    margin-top: 0;
  }
}

.with-concrete__en {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11.4649681529vw;
  font-weight: 400;
  line-height: 1.8444444444;
  letter-spacing: 0.08em;
  font-family: "Cormorant Garamond", serif;
  color: #231815;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 767px) {
  .with-concrete__en {
    font-size: 28.8vw;
  }
}

.with-concrete__wrapper {
  display: flex;
  margin-top: -3%;
}
@media (max-width: 767px) {
  .with-concrete__wrapper {
    display: block;
  }
}

.with-concrete__content {
  width: 50%;
  padding: 4.9% 4.1666666667% 4.1666666667%;
  background: #fff;
}
@media (max-width: 767px) {
  .with-concrete__content {
    width: 100%;
    padding: 13% 11% 9%;
  }
}

.with-concrete__heading {
  font-size: 1.9108280255vw;
  font-weight: 350;
  line-height: 1.2;
  letter-spacing: 0.08em;
  margin-top: 6%;
}
@media (max-width: 767px) {
  .with-concrete__heading {
    font-size: 5.6vw;
    line-height: 1.8095238095;
  }
}

.with-concrete__description {
  font-size: 1.1464968153vw;
  font-weight: 500;
  line-height: 2.0555555556;
  margin-top: 1em;
}
@media (max-width: 767px) {
  .with-concrete__description {
    font-size: 3.4666666667vw;
    margin-top: 9.7765363128%;
  }
}

.with-concrete__button {
  margin-top: 6%;
}

.with-concrete__img {
  width: 50%;
}
@media (max-width: 767px) {
  .with-concrete__img {
    width: 100%;
  }
}

/*------------------------------
cage
------------------------------*/
.cafe {
  padding: 4.5% 0 5.3%;
  position: relative;
}
.cafe .cafe-img1 {
  position: absolute;
  aspect-ratio: 1384/1407;
  transform: translate(0%, 0%);
  width: 44%;
  right: 0%;
  bottom: 0%;
}
@media (max-width: 767px) {
  .cafe {
    padding: 23.5% 0 0;
  }
  .cafe .cafe-img1 {
    position: relative;
    display: block;
    width: 92%;
    margin-left: auto;
    margin-top: 10%;
    right: unset;
    bottom: unset;
  }
}

.cafe__content {
  width: 50%;
}
@media (max-width: 767px) {
  .cafe__content {
    width: 100%;
  }
}

.cafe__logo {
  width: 30%;
  display: block;
}
@media (max-width: 767px) {
  .cafe__logo {
    width: 38%;
  }
}

.cafe__heading {
  font-size: 1.9108280255vw;
  font-weight: 350;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin-top: 1.3em;
}
@media (max-width: 767px) {
  .cafe__heading {
    font-size: 5.6vw;
    letter-spacing: normal;
    margin-top: 1.5em;
  }
}

.cafe__description {
  margin-top: 1.4em;
  font-size: 1.1464968153vw;
  font-weight: 500;
  line-height: 2.0555555556;
  letter-spacing: 0.01em;
}
@media (max-width: 767px) {
  .cafe__description {
    font-size: 3.4666666667vw;
  }
}

.cafe__button {
  margin-top: 6.6666666667%;
}
@media (max-width: 767px) {
  .cafe__button {
    margin-top: 5%;
  }
}
/*# sourceMappingURL=top.css.map */