.conceptSect__head {
  background-color: #5E594F;
}
@media screen and (min-width: 768px) {
  .conceptSect__head {
    margin: 0 -8rem;
    padding: 10rem 0;
  }
}
@media screen and (max-width: 768px) {
  .conceptSect__head {
    margin: 0 -3.2rem;
    padding: 8rem 3.2rem;
  }
}
.conceptSect__inner {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .conceptSect__inner {
    align-items: center;
    display: flex;
    gap: 14rem;
    justify-content: center;
    width: 120rem;
  }
}
@media screen and (max-width: 768px) {
  .conceptSect__inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
}
.conceptSect__ttl {
  color: #B9A87A;
  flex-shrink: 0;
  letter-spacing: 0.3em;
  line-height: 1.4;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .conceptSect__ttl {
    font-size: 5rem;
  }
}
@media screen and (max-width: 768px) {
  .conceptSect__ttl {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 768px) {
  .conceptSect__body {
    text-align: center;
  }
}
.conceptSect__body .heading {
  color: #B9A87A;
}
.conceptSect__body .txt {
  color: #fff;
  line-height: 2.4;
}
.conceptSect__cont {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .conceptSect__cont {
    aspect-ratio: 1440/600;
    margin: 0 -8rem;
  }
}
@media screen and (max-width: 768px) {
  .conceptSect__cont {
    aspect-ratio: 390/180;
    margin: 0 -3.2rem;
  }
}
.conceptSect__cont .parallaxPhoto {
  height: 100%;
}
@media screen and (min-width: 768px) {
  .facadeSect {
    padding: 14rem 0;
  }
}
@media screen and (max-width: 768px) {
  .facadeSect {
    padding-bottom: 10rem;
  }
}
@media screen and (min-width: 768px) {
  .facadeSect__head {
    align-items: center;
    display: flex;
    gap: 18rem;
    justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  .facadeSect__head {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10rem;
  }
}
@media screen and (max-width: 768px) {
  .facadeSect__head .heading {
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .facadeSect__head .heading--large:before {
    content: none;
  }
}
@media screen and (min-width: 768px) {
  .facadeSect__cont {
    margin-top: 10rem;
  }
}
@media screen and (max-width: 768px) {
  .facadeSect__cont {
    margin: 6rem -3.2rem 0;
  }
}
.landscapeSect {
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .landscapeSect {
    margin: 0 -8rem;
    padding-top: 18rem;
  }
}
@media screen and (max-width: 768px) {
  .landscapeSect {
    margin: 0 -3.2rem;
    padding-top: 14rem;
  }
}
.landscapeSect::before {
  background-color: rgba(185, 168, 122, 0.5);
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  transform: rotate(-45deg);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .landscapeSect::before {
    left: -110rem;
    top: 29rem;
    width: 300rem;
  }
}
@media screen and (max-width: 768px) {
  .landscapeSect::before {
    left: -30rem;
    top: 6.5rem;
    width: 75rem;
  }
}
.landscapeSect__inner {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .landscapeSect__inner {
    width: 128rem;
  }
}
@media screen and (max-width: 768px) {
  .landscapeSect__inner {
    padding: 0 3.2rem;
  }
}
@media screen and (min-width: 768px) {
  .landscapeSect__head .heading {
    text-align: right;
  }
}
@media screen and (max-width: 768px) {
  .landscapeSect__head .heading {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 768px) {
  .landscapeSect__cont {
    margin-top: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .landscapeSect__cont {
    margin: 5.6rem -3.2rem 0;
  }
}
@media screen and (min-width: 768px) {
  .materialSect {
    padding-top: 14rem;
  }
}
@media screen and (max-width: 768px) {
  .materialSect {
    padding-top: 12rem;
  }
}
@media screen and (min-width: 768px) {
  .materialSect__inner {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (max-width: 768px) {
  .materialSect__inner {
    display: flex;
    flex-direction: column;
    gap: 8rem;
  }
}
.materialSect__visual {
  text-align: right;
}
@media screen and (min-width: 768px) {
  .materialSect__visual {
    flex-shrink: 0;
    width: 38.9rem;
  }
}
.materialSect__body {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .materialSect__body {
    gap: 12rem;
    width: 50.1rem;
  }
}
@media screen and (max-width: 768px) {
  .materialSect__body {
    gap: 10rem;
  }
}
.interviewSect {
  border-top: 1px solid rgba(185, 168, 122, 0.5);
}
@media screen and (min-width: 768px) {
  .interviewSect {
    margin: 14rem auto 0;
    padding: 8rem 0 20rem;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media screen and (max-width: 768px) {
  .interviewSect {
    margin-top: 12rem;
    padding: 4rem 0 14rem;
  }
}
@media screen and (min-width: 768px) {
  .interviewSect__inner {
    align-items: center;
    display: flex;
    gap: 11rem;
    justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  .interviewSect__inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
}
.interviewSect__profile {
  display: flex;
  gap: 2.4rem;
}
@media screen and (min-width: 768px) {
  .interviewSect__profile {
    align-items: flex-end;
  }
}
@media screen and (max-width: 768px) {
  .interviewSect__profile {
    align-items: flex-start;
    justify-content: center;
  }
}
.interviewSect__photo {
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .interviewSect__photo {
    width: 22.2rem;
  }
}
@media screen and (max-width: 768px) {
  .interviewSect__photo {
    width: 15.2rem;
  }
}
.interviewSect__desc {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .interviewSect__desc {
    gap: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .interviewSect__desc {
    gap: 1rem;
  }
}
.interviewSect__name {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.interviewSect__name .role {
  color: #4D5357;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.interviewSect__name .person {
  color: #9A8857;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .interviewSect__name .person {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 768px) {
  .interviewSect__name .person {
    font-size: 2.4rem;
  }
}
.interviewSect__logo {
  mix-blend-mode: multiply;
}
@media screen and (min-width: 768px) {
  .interviewSect__logo {
    width: 18rem;
  }
}
@media screen and (max-width: 768px) {
  .interviewSect__logo {
    width: 11rem;
  }
}
@media screen and (min-width: 768px) {
  .interviewSect__body {
    width: 38.9rem;
  }
}
@media screen and (max-width: 768px) {
  .interviewSect__body {
    width: 32.6rem;
  }
}
.landplanSect {
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .landplanSect {
    padding: 20rem 0 30.4rem;
  }
}
@media screen and (max-width: 768px) {
  .landplanSect {
    padding: 14rem 0;
  }
}
.landplanSect::before {
  background: no-repeat center top/cover;
  content: "";
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .landplanSect::before {
    background-image: url("../imgs/pc/bg-landplan-01@1.5x.jpg");
    margin: 0 -8rem;
  }
}
@media screen and (max-width: 768px) {
  .landplanSect::before {
    background-image: url("../imgs/sp/bg-landplan-01.jpg");
    margin: 0 -3.2rem;
  }
}
.landplanSect__head {
  align-items: center;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .landplanSect__head {
    gap: 6rem;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .landplanSect__head {
    gap: 4rem;
  }
}
.landplanSect__ttl {
  color: #9A8857;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .landplanSect__ttl {
    font-size: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .landplanSect__ttl {
    font-size: 2.2rem;
  }
}
.landplanSect__ttl sup {
  font-size: 0.65em;
  vertical-align: super;
}
.landplanSect__main {
  display: flex;
}
@media screen and (min-width: 768px) {
  .landplanSect__main {
    justify-content: center;
    margin-top: 6rem;
  }
}
@media screen and (max-width: 768px) {
  .landplanSect__main {
    flex-direction: column;
    margin-top: 5.6rem;
  }
}
.landplanSect__bottom {
  border-top: 1px solid rgba(185, 168, 122, 0.3);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .landplanSect__bottom {
    gap: 4rem;
    margin: 14rem auto 0;
    padding-top: 4rem;
    width: 93.9rem;
  }
}
@media screen and (max-width: 768px) {
  .landplanSect__bottom {
    gap: 4rem;
    margin-top: 10rem;
    padding-top: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .landplanSect__bottom .headingUnit {
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (min-width: 768px) {
  .landplanSect__bottom .headingUnit .heading {
    flex-shrink: 0;
  }
}
@media screen and (min-width: 768px) {
  .landplanSect__bottom .headingUnit .txt {
    margin-top: 0;
    width: 64.6rem;
  }
}
.landplanMap {
  position: relative;
}
@media screen and (min-width: 768px) {
  .landplanMap {
    flex-shrink: 0;
    width: 80rem;
  }
}
@media screen and (min-width: 768px) {
  .landplanMap__att {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .landplanMap__att {
    align-items: center;
    display: flex;
    font-size: 1.4rem;
    gap: 1.4rem;
    left: 0;
    letter-spacing: 0.1em;
    line-height: 1.8;
    margin: 0 -3.2rem;
    padding-left: 1rem;
    padding-top: 1rem;
    position: absolute;
    top: 0;
    z-index: 1;
  }
}
.landplanMap__guide {
  align-items: center;
  aspect-ratio: 1/1;
  background-color: rgba(34, 34, 34, 0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  width: 5rem;
}
.landplanMap__guide .icon {
  aspect-ratio: 21/28;
  width: 2.1rem;
}
.landplanMap__view {
  position: relative;
}
@media screen and (min-width: 768px) {
  .landplanMap__view {
    aspect-ratio: 1/1;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .landplanMap__view {
    height: 69rem;
    margin: 0 -3.2rem;
    overflow: scroll;
  }
  .landplanMap__view::-webkit-scrollbar {
    display: none;
  }
}
.landplanMap__inner {
  position: relative;
}
@media screen and (max-width: 768px) {
  .landplanMap__inner {
    height: 100%;
    max-width: none !important;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media screen and (max-width: 768px) {
  .landplanMap__img {
    height: 100%;
    max-width: none;
    width: -moz-fit-content;
    width: fit-content;
  }
  .landplanMap__img .photo,
  .landplanMap__img .photo__pic,
  .landplanMap__img .photo__image {
    height: 100%;
    max-width: none;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.landplanMap__note {
  margin-top: 1rem;
  text-align: right;
}
.landplanMap__plots {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}
.landplanMap__trigger {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: absolute;
  text-align: left;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .landplanMap__trigger:hover .landplanMap__guide {
    background: rgba(154, 136, 87, 0.9);
  }
}
@media (hover: hover) and (pointer: fine) {
  .landplanMap__trigger:hover .landplanMap__guide {
    background: rgba(154, 136, 87, 0.9);
  }
}
.landplanMap__trigger .pill {
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .landplanMap__trigger .pill {
    gap: 0.7rem;
    padding: 0.7rem 1.4rem 0.7rem 3.4rem;
  }
}
@media screen and (max-width: 768px) {
  .landplanMap__trigger .pill {
    gap: 0.6rem;
    padding: 0.6rem 1.2rem 0.6rem 3rem;
  }
}
.landplanMap__trigger .num {
  align-items: center;
  background: #4D5256;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-family: "Cormorant Infant", serif;
  justify-content: center;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .landplanMap__trigger .num {
    font-size: 1.2rem;
    height: 2.1rem;
    width: 2.1rem;
  }
}
@media screen and (max-width: 768px) {
  .landplanMap__trigger .num {
    font-size: 1.1rem;
    height: 1.8rem;
    width: 1.8rem;
  }
}
.landplanMap__trigger .name {
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.landplanMap__trigger--a {
  left: 19.77%;
  top: 71.56%;
}
.landplanMap__trigger--b {
  left: 6.77%;
  top: 62.68%;
}
.landplanMap__trigger--c {
  left: 30.23%;
  top: 65.43%;
}
.landplanMap__trigger--d {
  left: 26.85%;
  top: 58.56%;
}
.landplanMap__trigger--e {
  left: 76%;
  top: 62.26%;
}
.landplanMap__trigger--f {
  left: 69.98%;
  top: 79.28%;
}
.landplanMap__trigger--g {
  left: 66.49%;
  top: 19.34%;
}
.landplanMap__trigger--h {
  left: 50.42%;
  top: 53.28%;
}
.landplanMap__trigger--i {
  left: 75.37%;
  top: 70.51%;
}
.landplanMap__zoom {
  align-items: center;
  background: rgba(34, 34, 34, 0.5);
  border: 0.1rem solid #fff;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
}
@media screen and (min-width: 768px) {
  .landplanMap__zoom {
    height: 4.6rem;
    width: 4.6rem;
  }
}
@media screen and (max-width: 768px) {
  .landplanMap__zoom {
    height: 4rem;
    width: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .landplanMap__zoom .icon {
    height: 2rem;
    width: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .landplanMap__zoom .icon {
    height: 1.8rem;
    width: 1.8rem;
  }
}
.landplanModal {
  background: #fff;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  .landplanModal {
    align-items: center;
    display: flex;
    gap: 5.6rem;
    justify-content: center;
    max-width: 114.6rem;
    padding: 6rem 10rem;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .landplanModal {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    padding: 6rem 2.4rem 4rem;
  }
}
.landplanModal__close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: rgba(34, 34, 34, 0.5);
  border: 0;
  cursor: pointer;
  height: 4.6rem;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.6rem;
}
.landplanModal__close::before, .landplanModal__close::after {
  background: #fff;
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 1.8rem;
}
.landplanModal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.landplanModal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.landplanModal__visual {
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .landplanModal__visual {
    width: 50.1rem;
  }
}
@media screen and (max-width: 768px) {
  .landplanModal__visual {
    width: 100%;
  }
}
.landplanModal__body {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
@media screen and (min-width: 768px) {
  .landplanModal__body {
    width: 38.9rem;
  }
}
.landplanModal__body .heading--medium + .txt,
.landplanModal__body .txt + .caption {
  margin-top: 0;
}
.landplanModal__head {
  align-items: flex-start;
  display: flex;
  gap: 0.8rem;
}
.landplanModal__num {
  align-items: center;
  background: #4D5256;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-family: "Cormorant Infant", serif;
  font-size: 1.4rem;
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  width: 2.5rem;
}
.landplanModal__name {
  color: #163F2D;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .gardenSect {
    padding-bottom: 14rem;
  }
}
@media screen and (max-width: 768px) {
  .gardenSect {
    padding-bottom: 12rem;
  }
}
@media screen and (min-width: 768px) {
  .gardenSect__inner {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (max-width: 768px) {
  .gardenSect__inner {
    display: flex;
    flex-direction: column;
    gap: 6rem;
  }
}
.gardenSect__body {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .gardenSect__body {
    gap: 20rem;
    padding-top: 19rem;
    width: 60.8rem;
  }
}
@media screen and (max-width: 768px) {
  .gardenSect__body {
    gap: 6rem;
  }
}
@media screen and (min-width: 768px) {
  .gardenSect__lead .heading--medium + .txt {
    margin-top: 2.4rem;
  }
}
@media screen and (max-width: 768px) {
  .gardenSect__lead .heading--medium + .txt {
    margin-top: 2.4rem;
  }
}
.gardenSect__plants {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .gardenSect__plants .gardenSect__lead {
    margin-top: 7rem;
  }
}
@media screen and (max-width: 768px) {
  .gardenSect__plants .gardenSect__lead {
    margin-top: 5rem;
  }
}
.gardenSect__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}
@media screen and (min-width: 768px) {
  .gardenSect__grid {
    gap: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .gardenSect__grid {
    gap: 1.6rem 0.8rem;
  }
}
.gardenSect__grid + .caption {
  margin-top: 0.8rem;
}
.gardenSect__square {
  position: relative;
  text-align: center;
}
.gardenSect__square .name {
  color: #4D5357;
  letter-spacing: 0.01em;
  line-height: 1.6;
  margin-top: 0.4rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .gardenSect__square .name {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 768px) {
  .gardenSect__square .name {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  .gardenSect__visual {
    flex-shrink: 0;
    width: 38.9rem;
  }
}
@media screen and (max-width: 768px) {
  .gardenSect__visual {
    margin: 0 -3.2rem;
    order: -1;
  }
}
/*# sourceMappingURL=style.css.map */