@charset "utf-8";

.design-enheading {
  font-size: clamp(20px, calc(40 / 1200 * 100vw), 40px);
}
.design-heading {
  font-size: clamp(20px, calc(30 / 1200 * 100vw), 30px);
  line-height: 1.866666667;
}
.design-more {
  display: none;
}
@media screen and (max-width: 480px) {
  .design-enheading {
    font-size: 24px;
  }
  .design-heading {
    font-size: 16px;
    line-height: 2.125;
  }
  .design-more {
    position: relative;
    z-index: 1;
    width: min(100%, 240px);
    min-height: calc(50 / 16 * 1em);
    display: grid;
    place-content: center;
    place-items: center;
    margin-top: 40px;
    margin-inline: auto;
    box-sizing: border-box;
    border: 1px solid currentColor;
    padding: .5em;
    font-size: 16px;
    color: currentColor;
    background: #fff;
  }
  .design-more::before {
    content: "続きを読む";
  }
  .design-more[aria-expanded="true"]::before {
    content: "閉じる";
  }
  .design-more::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    right: calc(20 / 16 * 1em);
    translate: 0 -50%;
    width: calc(19 / 16 * 1em);
    height: calc(19 / 16 * 1em);
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="1" viewBox="0 0 18 1"><rect width="18" height="1"/></svg>') no-repeat center/100% auto, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="18" viewBox="0 0 1 18"><rect width="1" height="18"/></svg>') no-repeat center/auto 100%;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="1" viewBox="0 0 18 1"><rect width="18" height="1"/></svg>') no-repeat center/100% auto, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="18" viewBox="0 0 1 18"><rect width="1" height="18"/></svg>') no-repeat center/auto 100%;
  }
  .design-more[aria-expanded="true"]::after {
    -webkit-mask-size: 100% auto, 0;
    mask-size: 100% auto, 0;
  }
  [id^="accordion-"] {
    height: 50px;
    overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #fff, transparent) no-repeat bottom center/100% 100%;
    mask: linear-gradient(180deg, #fff, transparent) no-repeat bottom center/100% 100%;
  }
  [id^="accordion-"][aria-hidden="false"] {
    height: auto;
    -webkit-mask: none;
    mask: none;
  }
}



.anchor {
  padding-block: 100px 0;
}
.anchor__list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 30px;
}
.anchor__list__item {
  width: 100%;
}
.anchor__list__item__link {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: calc(70 / 16 * 1em);
  place-content: center;
  place-items: center;
  box-sizing: border-box;
  padding: .5em;
  font-size: clamp(11px, calc(16 / 1200 * 100vw), 16px);
  line-height: 1.625;
  text-align: center;
  background: rgba(var(--color-blue), .1);
  transition: color .4s;
}
.anchor__list__item__link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(156, 50, 86, 1) 0%, rgba(110, 33, 54, 1) 100%);
  opacity: 0;
  transition: opacity .4s;
}
.anchor__list__item__link::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: calc(15 / 16 * 1em);
  translate: 0 -50%;
  width: calc(14 / 16 * 1em);
  height: calc(8 / 16 * 1em);
  background: rgba(var(--color-blue), .5);
  background: color-mix(in srgb, rgb(var(--color-blue)) 50%, #fff 50%);
  clip-path: polygon(0% 0%, 50% calc(100% - 1px), 100% 0%, 100% 1px, 50% 100%, 0% 1px);
}
@media (any-hover: hover) {
  .anchor__list__item__link:hover {
    color: #fff;
  }
  .anchor__list__item__link:hover::before {
    opacity: 1;
  }
  .anchor__list__item__link:hover::after {
    background: rgba(var(--color-red), .5);
    background: color-mix(in srgb, rgb(var(--color-red)) 50%, #fff 50%);
  }
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
  .anchor__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 480px){
  .anchor {
    padding-block: 0;
  }
  .anchor__list {
    width: 100%;
    grid-template-columns: 100%;
    gap: 1px 0;
  }
  .anchor__list__item__link {
    min-height: calc(50 / 14 * 1em);
    justify-content: start;
    justify-items: start;
    padding: .5em calc(30 / 14 * 1em);
    font-size: 14px;
    text-align: left;
  }
  .anchor__list__item__link::after {
    right: calc(20 / 14 * 1em);
    width: calc(14 / 14 * 1em);
    height: calc(8 / 14 * 1em);
  }
}



.facade {
  margin-top: 180px;
}
/* .facade__heading {
} */
.facade__content {
  margin-top: 80px;
  grid-template-columns: calc(640 / 1320 * 100%) minmax(0, 1fr);
  align-items: start;
  gap: 0 calc(80 / 1320 * 100%);
}
.facade__content__heading {
  grid-column: 2;
  align-self: end;
}
.facade__content__photo {
  grid-column: 1;
  grid-row: 1 / 3;
}
/* .facade__content__photo__link {
} */
.facade__content__desc {
  grid-column: 2;
  align-self: start;
  margin-top: 55px;
}
/* .facade__content__desc__copy {
}
.facade__content__more {
} */
@media screen and (max-width: 480px){
  .facade {
    margin-top: 80px;
  }
  .facade__content {
    margin-top: 40px;
    grid-template-columns: 100%;
    gap: 0;
  }
  .facade__content__heading {
    grid-column: 1;
    text-align: center;
  }
  .facade__content__photo {
    grid-row: auto;
    margin-top: 40px;
  }
  .facade__content__desc {
    grid-column: 1;
    margin-top: 30px;
  }
}



.entrance {
  margin-top: 190px;
}
/* .entrance__heading {
} */
.entrance__content {
  margin-top: 80px;
  grid-template-columns: minmax(0, 1fr) calc(640 / 1320 * 100%);
  align-items: start;
  gap: 0 calc(80 / 1320 * 100%);
}
.entrance__content__heading {
  grid-column: 1;
  align-self: end;
}
.entrance__content__photo {
  grid-column: 2;
  grid-row: 1 / 3;
}
/* .entrance__content__photo__link {
} */
.entrance__content__desc {
  grid-column: 1;
  align-self: start;
  margin-top: 55px;
}
/* .entrance__content__desc__copy {
}
.entrance__content__more {
} */
@media screen and (max-width: 480px){
  .entrance {
    margin-top: 80px;
  }
  .entrance__content {
    margin-top: 40px;
    grid-template-columns: 100%;
    gap: 0;
  }
  .entrance__content__heading {
    text-align: center;
  }
  .entrance__content__photo {
    grid-column: 1;
    grid-row: auto;
    margin-top: 40px;
  }
  .entrance__content__desc {
    margin-top: 30px;
  }
}



.material {
  margin-top: 190px;
}
/* .material__heading {
} */
.material__content {
  margin-top: 80px;
  grid-template-columns: calc(640 / 1320 * 100%) minmax(0, 1fr);
  align-items: start;
  gap: 0 calc(80 / 1320 * 100%);
}
.material__content__heading {
  grid-column: 2;
  align-self: end;
}
.material__content__photo {
  grid-column: 1;
  grid-row: 1 / 3;
}
/* .material__content__photo__link {
} */
.material__content__desc {
  grid-column: 2;
  align-self: start;
  margin-top: 55px;
}
/* .material__content__desc__copy {
}
.material__content__more {
} */
@media screen and (max-width: 480px){
  .material {
    margin-top: 80px;
  }
  .material__content {
    margin-top: 40px;
    grid-template-columns: 100%;
    gap: 0;
  }
  .material__content__heading {
    grid-column: 1;
    text-align: center;
  }
  .material__content__photo {
    grid-row: auto;
    margin-top: 40px;
  }
  .material__content__desc {
    grid-column: 1;
    margin-top: 30px;
  }
}



.landplan {
  margin-top: 190px;
}
/* .landplan__heading {
} */
.landplan__subheading {
  --margin-top: 60px;
}
.landplan__content {
  margin-top: 80px;
}
.landplan__content__map {
  max-width: 1100px;
}
/* .landplan__content__map__link {
} */
.landplan__content__list {
  margin-top: 80px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 50px 30px;
}
/* .landplan__content__list__item {
}
.landplan__content__list__item__photo {
} */
.landplan__content__list__item__desc {
  margin-top: 30px;
}
.landplan__content__list__item__desc__heading {
  font-size: clamp(12px, calc(18 / 1200 * 100vw), 18px);
  line-height: 1.75;
}
.landplan__content__list__item__desc__copy {
  --margin-top: 30px;
}
.landplan__content__list__item__desc__caution {
  --margin-top: 30px;
}
.landplan__green {
  max-width: 1320px;
  margin-top: 100px;
  box-sizing: border-box;
  padding: 80px min(calc(80 / 1320 * 100%), 80px) 85px;
  grid-template-columns: minmax(0, 1fr) calc(480 / 1160 * 100%);
  align-items: center;
  gap: 0 calc(80 / 1160 * 100%);
  background: rgba(var(--color-blue), .05);
}
/* .landplan__green__desc {
}
.landplan__green__desc__heading {
} */
.landplan__green__desc__copy {
  --margin-top: 50px;
}
.landplan__green__photo {
  align-self: start;
}
/* .landplan__green-more {
} */
@media screen and (min-width: 481px) and (max-width: 1024px) {
  .landplan__content__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 480px){
  .landplan {
    margin-top: 80px;
  }
  .landplan__subheading {
    --margin-top: 40px;
  }
  .landplan__content {
    margin-top: 40px;
  }
  .landplan__content__list {
    margin-top: 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 20px;
  }
  .landplan__content__list__item__desc {
    margin-top: 20px;
  }
  .landplan__content__list__item__desc__heading {
    font-size: 16px;
    line-height: 1.625;
  }
  .landplan__content__list__item__desc__copy {
    --margin-top: 20px;
    line-height: 1.857142857;
  }
  .landplan__content__list__item__desc__caution {
    --margin-top: 20px;
    line-height: 1.8;
  }
  .landplan__green {
    margin-top: 60px;
    padding: 40px 30px 45px;
    grid-template-columns: 100%;
    align-items: start;
    gap: 0;
  }
  .landplan__green[aria-hidden="true"] {
    height: 190px;
  }
  .landplan__green__desc__heading {
    font-size: 20px;
    line-height: 1.8;
    text-align: center;
  }
  .landplan__green__desc__copy {
    --margin-top: 45px;
  }
  .landplan__green__photo {
    margin-top: 45px;
  }
}



.carlife {
  margin-top: 180px;
}
/* .carlife__heading {
} */
.carlife__content {
  margin-top: 85px;
  grid-template-columns: calc(640 / 1320 * 100%) minmax(0, 1fr);
  align-items: center;
  gap: 0 calc(80 / 1320 * 100%);
}
.carlife__content__heading {
  grid-column: 2;
  align-self: end;
}
.carlife__content__photo {
  grid-column: 1;
  grid-row: 1 / 3;
}
/* .carlife__content__photo__link {
} */
.carlife__content__desc {
  grid-column: 2;
  align-self: start;
  margin-top: 50px;
}
/* .carlife__content__desc__copy {
} */
.carlife__content__desc__merit {
  margin-top: 50px;
  box-sizing: border-box;
  padding: 50px calc(50 / 600 * 100%);
  background: rgba(var(--color-blue), .05);
}
.carlife__content__desc__merit__heading {
  font-size: clamp(16px, calc(22 / 1200 * 100vw), 22px);
  line-height: 2;
}
.carlife__content__desc__merit__list {
  margin-top: 40px;
  grid-template-columns: 100%;
  align-items: start;
  gap: 20px 0;
}
.carlife__content__desc__merit__list__item {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 15px;
}
.carlife__content__desc__merit__list__item__num {
  width: calc(25 / 17 * 1em);
  height: calc(25 / 17 * 1em);
  border-radius: 100%;
  place-items: center;
  font-size: clamp(13px, calc(17 / 1200 * 100vw), 17px);
  background: rgb(var(--color-blue));
}
.carlife__content__desc__merit__list__item__copy {
  font-size: clamp(12px, calc(18 / 1200 * 100vw), 18px);
  line-height: 1.75;
  translate: 0 calc(4 / 18 * 1em);
}
@media screen and (max-width: 480px){
  .carlife {
    margin-top: 80px;
  }
  .carlife__content {
    margin-top: 40px;
    grid-template-columns: 100%;
    align-items: start;
    gap: 0;
  }
  .carlife__content__heading {
    grid-column: 1;
    text-align: center;
  }
  .carlife__content__photo {
    grid-row: auto;
    margin-top: 40px;
  }
  .carlife__content__desc {
    grid-column: 1;
    margin-top: 30px;
  }
  .carlife__content__desc__merit {
    margin-top: 40px;
    padding: 40px 30px 45px;
  }
  .carlife__content__desc__merit__heading {
    font-size: 20px;
    line-height: 1.8;
  }
  .carlife__content__desc__merit__list {
    margin-top: 35px;
  }
  .carlife__content__desc__merit__list__item {
    gap: 0 10px;
  }
  .carlife__content__desc__merit__list__item__num {
    width: calc(20 / 13 * 1em);
    height: calc(20 / 13 * 1em);
    font-size: 13px;
  }
  .carlife__content__desc__merit__list__item__copy {
    font-size: 14px;
    line-height: 2;
    translate: 0 calc(4 / 14 * -1em);
  }
}



.atelier {
  margin-top: 180px;
}
.atelier__content {
  padding-block: 0 190px;
}
.atelier__content__head {
  box-sizing: border-box;
  padding: 45px;
  background: linear-gradient(90deg, rgba(156, 50, 86, 1) 0%, rgba(110, 33, 54, 1) 100%);
}
/* .atelier__content__head__enheading {
} */
.atelier__content__head__heading {
  --margin-top: 25px;
  grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, auto);
  justify-content: center;
  align-items: center;
  gap: 0 calc(25 / 40 * 1em);
  font-size: clamp(20px, calc(40 / 1200 * 100vw), 40px);
}
.atelier__content__head__heading::before,
.atelier__content__head__heading::after {
  content: "";
  display: block;
  width: calc(100 / 40 * 1em);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .5) 100%);
}
.atelier__content__head__heading::after {
  rotate: 180deg;
}
.atelier__content__intro {
  margin-top: 190px;
}
/* .atelier__content__intro__heading {
} */
.atelier__content__intro__copy {
  max-width: 1000px;
  --margin-top: 60px;
}
.atelier__content__group {
  margin-top: 190px;
  grid-template-columns: minmax(0, 1fr) calc(640 / 1320 * 100%);
  align-items: start;
  gap: 0 calc(80 / 1320 * 100%);
}
.atelier__content__group:nth-of-type(even) {
  direction: rtl;
}
.atelier__content__group:nth-of-type(even) > * {
  direction: ltr;
}
.atelier__content__group__enheading {
  grid-column: 1 / 3;
  grid-row: 1;
  --margin-bottom: 80px;
}
.atelier__content__group__heading {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}
.atelier__content__group__photo {
  grid-column: 2;
  grid-row: 2 / 4;
}
/* .atelier__content__group__photo__link {
} */
.atelier__content__group__desc {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
}
.atelier__content__group__desc__copy {
  --margin-top: 50px;
}
@media screen and (max-width: 480px){
  .atelier {
    margin-top: 80px;
  }
  .atelier__content {
    padding-block: 0 80px;
  }
  .atelier__content__head {
    padding: 20px;
  }
  .atelier__content__head__enheading {
    font-size: 20px;
  }
  .atelier__content__head__heading {
    --margin-top: 10px;
    gap: 0 calc(12 / 20 * 1em);
    font-size: 20px;
  }
  .atelier__content__head__heading::before,
  .atelier__content__head__heading::after {
    width: calc(50 / 20 * 1em);
  }
  .atelier__content__intro {
    margin-top: 60px;
  }
  .atelier__content__intro__copy {
    --margin-top: 40px;
  }
  .atelier__content__group {
    margin-top: 85px;
    grid-template-columns: 100%;
    gap: 0;
  }
  .atelier__content__group:nth-of-type(even) {
    direction: ltr;
  }
  .atelier__content__group__enheading {
    grid-column: 1;
    --margin-bottom: 40px;
  }
  .atelier__content__group__heading {
    grid-row: auto;
    text-align: center;
  }
  .atelier__content__group__photo {
    grid-column: 1;
    grid-row: auto;
    margin-top: 40px;
  }
  .atelier__content__group__desc {
    grid-row: auto;
  }
  .atelier__content__group__desc__copy {
    --margin-top: 30px;
  }
}



/* .interview {
} */
.interview__content {
  position: relative;
  z-index: 1;
  padding-block: 140px;
}
.interview__content__photo {
  position: absolute;
  z-index: -1;
  inset: 0;
}
.interview__content__photo img {
  height: 100%;
  object-fit: cover;
}
.interview__content__photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(var(--color-deepblue), .4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.interview__content__group {
  max-width: 1350px;
  grid-template-columns: minmax(0, 1fr) calc(600 / 1350 * 100%);
  align-items: center;
  gap: 0 calc(50 / 1350 * 100%);
}
.interview__content__group__heading {
  grid-column: 1;
  align-self: end;
  filter: drop-shadow(0 0 5px rgba(var(--color-deepblue), .5));
}
.interview__content__group__photo {
  grid-column: 2;
  grid-row: 1 / 3;
}
.interview__content__group__btn {
  grid-column: 1;
  align-self: start;
  margin-top: 65px;
  grid-template-columns: minmax(0, 360px);
  align-items: start;
  gap: 30px 0;
}
.interview__content__group__btn__item {
  width: 100%;
}
@media screen and (max-width: 480px){
  .interview__content {
    padding-block: 60px;
  }
  .interview__content__photo::after {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .interview__content__group {
    grid-template-columns: 100%;
    align-items: start;
    gap: 0;
  }
  .interview__content__group__heading {
    font-size: 18px;
    line-height: 2.111111111;
    text-align: center;
  }
  .interview__content__group__photo {
    grid-column: 1;
    grid-row: auto;
    max-width: 300px;
    margin-top: 40px;
    margin-inline: auto;
  }
  .interview__content__group__btn {
    margin-top: 40px;
    grid-template-columns: minmax(0, 300px);
    gap: 20px 0;
    justify-content: center;
  }
}