@charset "utf-8";

.design__movie {
  margin-top: 60px;
  margin-bottom: 35px;
}
.design__movie::before {
  content: "";
  display: block;
  width: 2px;
  height: 133px;
  margin-inline: auto;
  background: linear-gradient(0deg, rgba(122, 95, 50, 1) 0%, rgba(126, 99, 54, 0.76) 24.14%, rgba(138, 112, 65, 0.51) 49.16%, rgba(158, 132, 83, 0.25) 74.57%, rgba(185, 161, 109, 0) 100%);
}
.design__movie__enheading {
  font-size: clamp(60px, calc(80 / 2120 * 100vw), 80px);
  line-height: 1 !important;
  margin-top: 50px;
  margin-inline: auto;
}
.design__movie__heading {
  font-size: clamp(22px, calc(32 / 2120 * 100vw), 32px);
  margin-top: 30px;
}
.design__movie__movie {
  max-width: 1440px;
  margin-top: 60px;
  aspect-ratio: 1920 / 1080;
  background: #999;
}
.design__movie__movie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 480px) {
  .design__movie {
    margin-top: 35px;
  }
  .design__movie::before {
    width: 1px;
    height: 60px;
  }
  .design__movie__enheading {
    font-size: 24px;
    margin-top: 25px;
  }
  .design__movie__heading {
    font-size: 11px;
    margin-top: 15px;
  }
  .design__movie__movie {
    margin-top: 25px;
  }
}



.design__content--1 {
  margin-top: 115px;
  padding-bottom: 115px;
  background: linear-gradient(180deg, rgba(228, 228, 228, 0) 0%, rgba(225, 225, 225, 0.33) 33.48%, rgba(217, 217, 217, 0.54) 53.69%, rgba(203, 203, 203, 0.7) 70.37%, rgba(182, 182, 182, 0.85) 85.13%, rgba(156, 156, 156, 0.99) 98.5%, rgba(153, 153, 153, 1) 100%) no-repeat bottom center/100% calc(100% - (1283 / 1920 * 100vw));
}
.design__content__desc {
  margin-top: 110px;
}
.design__content--1 .design__content__desc {
  margin-top: 100px;
}
.design__content--1 .design__content__desc .design__content__copy {
  --margin-top: 40px;
}
.design__content__architect {
  z-index: 1;
  max-width: 1280px;
  margin-top: 30px;
  grid-template:
    ". . ." 175px
    "photo . data" auto
    "photo . ." minmax(40px, 1fr)
    "photo . desc" auto
    / minmax(0, calc(356 / 1280 * 100%)) minmax(0, calc(60 / 1280 * 100%)) minmax(0, 1fr);
}
.design__content__architect::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: calc(178 / 1280 * 100%);
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(35, 24, 21, 0) 0%, rgba(35, 24, 21, 0.14) 14.13%, rgba(35, 24, 21, 1) 100%) no-repeat top center/100% 175px, linear-gradient(0deg, rgba(35, 24, 21, 1), rgba(35, 24, 21, 1)) no-repeat bottom center/100% calc(100% - 175px);
}
.design__content__architect__photo {
  grid-area: photo;
}
.design__content__architect__data {
  grid-area: data;
  justify-self: center;
}
.design__content__architect__data__en {
  font-size: clamp(24px, calc(34 / 2120 * 100vw), 34px);
}
.design__content__architect__data__company {
  font-size: clamp(12px, calc(22 / 2120 * 100vw), 22px);
  margin-top: calc(30 / 22 * 1em);
}
.design__content__architect__data__name {
  font-size: clamp(35px, calc(45 / 2120 * 100vw), 45px);
  margin-top: calc(20 / 45 * 1em);
  gap: calc(10 / 45 * 1em);
}
.design__content__architect__data__name__ja {
  flex: 0 1 auto;
}
.design__content__architect__data__name__en {
  flex: 0 0 auto;
}
.design__content__architect__desc {
  grid-area: desc;
}
.design__content__architect__copy {
  font-size: clamp(13px, calc(23 / 2120 * 100vw), 23px);
  line-height: 2.086956522;
  margin-block: calc((2.086956522 - 1) / 2 * -1em);
}
.design__content__exterior2 .p-caption {
  margin-bottom: calc(172 / 1920 * 100%);
}
.design__content--3 {
  padding-bottom: 180px;
}
.design__content__entrance-design {
  margin-top: 100px;
}
.column-name-en {
  flex: 0 0 auto;
  font-size: clamp(26px, calc(50 / 2120 * 100vw), 50px);
  box-sizing: content-box;
  padding-right: calc(18 / 50 * 1em);
}
.column-name-ja {
  flex: 1;
  box-sizing: border-box;
  padding-left: calc(15 / 22 * 1em);
  font-size: clamp(12px, calc(22 / 2120 * 100vw), 22px);
  background: linear-gradient(90deg, rgba(35, 24, 21, 1) 0%, rgba(35, 24, 21, 0.14) 85.87%, rgba(35, 24, 21, 0) 100%) no-repeat bottom left/100% 1px;
}
.design__content__entrance-design__heading {
  --margin-top: 50px;
}
.column-heading {
  font-size: clamp(23px, calc(33 / 2120 * 100vw), 33px);
  line-height: 1.606060606;
  margin-top: calc(var(--margin-top) + ((1.606060606 - 1) / 2 * -1em));
  margin-bottom: calc(var(--margin-bottom) + ((1.606060606 - 1) / 2 * -1em));
}
.design__content__entrance-design__copy {
  --margin-top: 40px;
}
.design__content__entrance-design__photo--1 {
  margin-top: 75px;
}
.design__content__entrance-design__photo--2 {
  margin-top: 50px;
}
.design__content__facade {
  margin-top: 150px;
  grid-template:
    ". name name name ." auto
    ". . . . ." 100px
    "photo photo . desc ." auto
    "photo photo . . ." 30px
    / max(2.5%, calc((100% - 1220px) / 2)) minmax(0, calc(490 / 1920 * 100%)) minmax(0, calc(70 / 1920 * 100%)) minmax(0, 1fr) max(2.5%, calc((100% - 1220px) / 2));
}
.design__content__facade__name {
  grid-area: name;
}
.design__content__facade__photo {
  grid-area: photo;
}
.design__content__facade__photo .p-caption {
  padding-block: 0;
  transform: translateX(100%);
}
.design__content__facade__desc {
  grid-area: desc;
}
.design__content--4 {
  padding-bottom: 150px;
}
.design__content__material {
  margin-top: 100px;
  /* grid-template:
    ". heading heading heading ." auto
    ". . . . ." 50px
    ". copy . photo photo" auto
    / max(2.5%, calc((100% - 1260px) / 2)) minmax(0, 1fr) minmax(0, calc(60 / 1920 * 100%)) minmax(0, calc(407 / 1920 * 100%)) max(2.5%, calc((100% - 1260px) / 2)); */
  /* align-items: start; */

  grid-template:
    ". heading heading heading ." auto
    ". . . . ." 50px
    ". copy copy copy ." auto
    ". . . . ." 50px
    ". photo photo photo ." auto
    / max(2.5%, calc((100% - 1260px) / 2)) minmax(0, 1fr) minmax(0, calc(60 / 1920 * 100%)) minmax(0, calc(407 / 1920 * 100%)) max(2.5%, calc((100% - 1260px) / 2));
  align-items: stretch;
}
.design__content__material__heading {
  grid-area: heading;
}
.design__content__material__copy {
  grid-area: copy;
}
.design__content__material__photo {
  grid-area: photo;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
}
.design__content__material__photo__item:nth-child(3) {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}
.design__content__material__photo__item img {
  height: 100%;
  object-fit: cover;
}
/* .design__content__material__photo .p-caption {
  transform: translateY(100%);
}
.design__content__material__photo .p-caption.l {
  padding-inline: 0;
}
.design__content__material__photo .p-caption--1 {
  bottom: 57%;
}
.design__content__material__photo .p-caption--2 {
  bottom: 19%;
} */
.design__content--5 {
  padding-bottom: 90px;
  background: linear-gradient(180deg, rgba(228, 228, 228, 0) 0%, rgba(226, 226, 226, 0.34) 33.99%, rgba(217, 217, 217, 0.54) 54.09%, rgba(203, 203, 203, 0.71) 70.58%, rgba(183, 183, 183, 0.85) 85.1%, rgba(157, 157, 157, 0.98) 98.22%, rgba(153, 153, 153, 1) 100%) no-repeat bottom center/100% calc(1106 / 1920 * 100vw);
}
.design__content--5 .design__content__desc .design__content__copy {
  --margin-top: 50px;
}
.design__content__lounge-interior {
  margin-top: 150px;
  grid-template:
    "photo photo . name ." auto
    "photo photo . . ." 45px
    "photo photo . heading ." auto
    "photo photo . . ." 45px
    "photo photo . copy ." 1fr
    "photo photo . . ." 30px
    / max(2.5%, calc((100% - 1260px) / 2)) minmax(0, calc(490 / 1920 * 100%)) minmax(0, calc(70 / 1920 * 100%)) minmax(0, 1fr) max(2.5%, calc((100% - 1260px) / 2));
  align-items: start;
}
.design__content__lounge-interior__photo {
  grid-area: photo;
}
.design__content__lounge-interior__photo .p-caption {
  padding-block: 0;
  transform: translateX(100%);
}
.design__content__lounge-interior__name {
  grid-area: name;
  white-space: nowrap;
}
.design__content__lounge-interior__heading {
  grid-area: heading;
}
.design__content__lounge-interior__copy {
  grid-area: copy;
}
.design__content__parking {
  margin-top: 110px;
}
/* .design__content__parking__name {
}
.design__content__parking__name__en {
}
.design__content__parking__name__ja {
} */
.design__content__parking__heading {
  --margin-top: 50px;
}
.design__content__parking__copy {
  --margin-top: 40px;
}
.design__content__parking__copy small {
  font-size: clamp(10px, calc(16 / 2120 * 100vw), 16px);
}
.design__content__parking__photo {
  margin-top: 75px;
}
@media screen and (min-width: 1921px){
  .design__content__architect__data {
    justify-self: end;
  }
  .design__content__architect__copy {
    margin-right: -3em;
  }
  .design__content__material__copy br {
    display: none;
  }
  .design__content--5 .design__content__desc .design__content__copy {
    white-space: nowrap;
  }
}
@media screen and (min-width: 1401px){
  .design__content__entrance-design__copy {
    margin-right: -3em;
  }
  .design__content__facade__copy {
    white-space: nowrap;
  }
  .design__content--4 .design__content__desc .design__content__heading {
    white-space: nowrap;
  }
  .design__content__material__heading {
    white-space: nowrap;
  }
  .design__content__lounge-interior__copy {
    white-space: nowrap;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1600px){
  .design__content__facade {
    grid-template-columns: max(2.5%, calc((100% - 1220px) / 2)) minmax(0, 38%) minmax(0, calc(70 / 1920 * 100%)) minmax(0, 1fr) max(2.5%, calc((100% - 1220px) / 2));
  }
  /* .design__content__material {
    grid-template-columns: max(2.5%, calc((100% - 1260px) / 2)) minmax(0, 1fr) minmax(0, calc(60 / 1920 * 100%)) minmax(0, 35%) max(2.5%, calc((100% - 1260px) / 2));
  } */
  .design__content__lounge-interior {
    grid-template-columns: max(2.5%, calc((100% - 1260px) / 2)) minmax(0, 38%) minmax(0, calc(70 / 1920 * 100%)) minmax(0, 1fr) max(2.5%, calc((100% - 1260px) / 2));
  }
}
@media screen and (min-width: 481px) and (max-width: 1024px){
  .design__content__facade {
    grid-template:
      ". name name name ." auto
      ". . . . ." 60px
      ". desc desc desc ." auto
      ". . . . ." 60px
      ". . photo . ." auto
      / 2.5% minmax(0, 1fr) minmax(0, 50%) minmax(0, 1fr) 2.5%;
  }
  .design__content__facade__photo .p-caption {
    padding: 1em 0;
    transform: translateY(100%);
  }
  .design__content__facade__copy br {
    display: none;
  }
  /* .design__content__material {
    grid-template:
      ". heading heading heading ." auto
      ". . . . ." 60px
      ". copy copy copy ." auto
      ". . . . ." 60px
      ". . photo . ." auto
      / 2.5% minmax(0, 1fr) minmax(0, 50%) minmax(0, 1fr) 2.5%;
  } */
  .design__content__material__copy br {
    display: none;
  }
  .design__content__lounge-interior {
    grid-template:
      ". name name name ." auto
      ". . . . ." 60px
      ". heading heading heading ." auto
      ". . . . ." 60px
      ". copy copy copy ." auto
      ". . . . ." 60px
      ". . photo . ." auto
      / 2.5% minmax(0, 1fr) minmax(0, 50%) minmax(0, 1fr) 2.5%;
  }
  .design__content__lounge-interior__photo .p-caption {
    padding: 1em 0;
    transform: translateY(100%);
  }
  .design__content__lounge-interior__copy br {
    display: none;
  }
}
@media screen and (max-width: 480px){
  .design__heading {
    height: 97px;
    overflow: hidden;
  }
  .design__heading img {
    width: 400%;
    max-width: none;
    transform: scale(.25);
    transform-origin: top left;
  }
  .design__content--1 {
    margin-top: 35px;
    padding-bottom: 25px;
    background: linear-gradient(180deg, rgba(228, 228, 228, 0) 0%, rgba(198, 198, 198, 0.33) 33.46%, rgba(165, 165, 165, 0.76) 76.4%, rgba(153, 153, 153, 1) 100%) no-repeat bottom center/100% calc(100% - 253px);
  }
  /* .design__content__exterior .p-caption {
    color: #fff;
  } */
  .design__content__desc {
    margin-top: 35px;
  }
  .design__content--1 .design__content__desc {
    margin-top: 35px;
  }
  .heading {
    white-space: nowrap;
  }
  .copy {
    letter-spacing: -.05em;
  }
  .design__content--1 .design__content__desc .design__content__copy {
    --margin-top: 20px;
  }
  .design__content__architect {
    width: 100%;
    margin-top: 15px;
    grid-template:
      ". . . . ." 30px
      ". data data data ." auto
      ". . . . ." 8px
      ". photo . desc ." auto
      / minmax(0, calc(42 / 380 * 100%)) minmax(0, calc(90 / 380 * 100%)) minmax(0, 1fr) minmax(0, calc(200 / 380 * 100%)) minmax(0, calc(25 / 380 * 100%));
    align-items: end;
  }
  .design__content__architect::before {
    left: calc(86 / 380 * 100%);
    height: calc(100% + 25px);
    background: linear-gradient(90deg, rgba(35, 24, 21, 0) 0%, rgba(35, 24, 21, 0.14) 14.13%, rgba(35, 24, 21, 1) 100%);
  }
  .design__content__architect__data {
    justify-self: end;
  }
  .design__content__architect__data__en {
    font-size: 11px;
  }
  .design__content__architect__data__company {
    font-size: 7px;
    margin-top: 10px;
  }
  .design__content__architect__data__name {
    font-size: 13px;
    margin-top: 6px;
    gap: 5px;
    display: grid;
    grid-template-columns: auto 45px;
  }
  .design__content__architect__copy {
    font-size: 10px;
    line-height: 1.4;
    margin-block: calc((1.4 - 1) / 2 * -1em);
    letter-spacing: -.075em;
  }
  .design__content__exterior2 .p-caption {
    margin-bottom: calc(60 / 380 * 100%);
  }
  .design__content--3 {
    padding-bottom: 60px;
  }
  .design__content__entrance-design {
    margin-top: 35px;
  }
  .column-name-en {
    font-size: 17px;
    padding-right: calc(7 / 17 * 1em);
  }
  .column-name-ja {
    padding-left: 0;
    font-size: 7px;
  }
  .design__content__entrance-design__heading {
    --margin-top: 25px;
  }
  .column-heading {
    font-size: 14px;
    line-height: 1.714285714;
    margin-top: calc(var(--margin-top) + ((1.714285714 - 1) / 2 * -1em));
    margin-bottom: calc(var(--margin-bottom) + ((1.714285714 - 1) / 2 * -1em));
    letter-spacing: -.05em;
    white-space: nowrap;
  }
  .design__content__entrance-design__copy {
    --margin-top: 15px;
  }
  .design__content__entrance-design__photo--1 {
    margin-top: 25px;
  }
  .design__content__entrance-design__photo--2 {
    margin-top: 15px;
  }
  .design__content__facade {
    margin-top: 40px;
    grid-template:
      ". name name name ." auto
      ". . . . ." 30px
      "photo photo . desc ." auto
      / calc(42 / 380 * 100%) minmax(0, 1fr) minmax(0, calc(25 / 380 * 100%)) minmax(0, calc(142 / 380 * 100%)) calc(42 / 380 * 100%);
    align-items: start;
  }
  .design__content__facade__photo .p-caption {
    padding: 10px 0;
    transform: translateY(100%);
  }
  .design__content--4 {
    padding-bottom: 60px;
  }
  .design__content__material {
    margin-top: 35px;
    /* grid-template:
      ". heading heading heading ." auto
      ". . . . ." 30px
      ". copy . photo photo" auto
      / calc(42 / 380 * 100%) minmax(0, calc(160 / 380 * 100%)) minmax(0, calc(25 / 380 * 100%)) minmax(0, 1fr) calc(42 / 380 * 100%); */

    grid-template:
      ". heading heading heading ." auto
      ". . . . ." 30px
      ". copy copy copy ." auto
      ". . . . ." 30px
      ". photo photo photo ." auto
      / calc(42 / 380 * 100%) minmax(0, calc(160 / 380 * 100%)) minmax(0, calc(25 / 380 * 100%)) minmax(0, 1fr) calc(42 / 380 * 100%);
  }
  .design__content__material__photo {
    gap: 10px;
  }
  /* .design__content__material__photo .p-caption.l {
    left: auto;
  }
  .design__content__material__photo .p-caption--1 {
    bottom: 74%;
    right: 48%;
  }
  .design__content__material__photo .p-caption--2 {
    bottom: 17%;
  }
  .design__content__material__photo .p-caption--3 {
    bottom: 0;
    right: 27%;
  } */
  .design__content--5 {
    padding-bottom: 40px;
    background: linear-gradient(180deg, rgba(228, 228, 228, 0) 0%, rgba(224, 224, 224, 0.22) 22.28%, rgba(211, 211, 211, 0.46) 45.93%, rgba(190, 190, 190, 0.7) 70.21%, rgba(160, 160, 160, 0.95) 94.78%, rgba(153, 153, 153, 1) 100%) no-repeat bottom center/100% calc(477 / 380 * 100vw);
  }
  .design__content--5 .design__content__desc .design__content__copy {
    --margin-top: 20px;
  }
  .design__content__lounge-interior {
    margin-top: 40px;
    grid-template:
      ". name name name ." auto
      ". . . . ." 25px
      ". heading heading heading ." auto
      ". . . . ." 15px
      ". copy . photo photo" auto
      / calc(42 / 380 * 100%) minmax(0, calc(160 / 380 * 100%)) minmax(0, calc(25 / 380 * 100%)) minmax(0, 1fr) calc(42 / 380 * 100%);
  }
  .design__content__lounge-interior__photo .p-caption {
    padding: 10px 0;
    transform: translateY(100%);
    left: 0;
    right: auto;
  }
  .design__content__parking {
    margin-top: 35px;
  }
  .design__content__parking__heading {
    --margin-top: 25px;
  }
  .design__content__parking__copy {
    --margin-top: 15px;
  }
  .design__content__parking__copy small {
    font-size: 8px;
  }
  .design__content__parking__photo {
    margin-top: 25px;
  }
}