@charset "UTF-8";

@media screen and (max-width: 768px) {
  .main {
    overflow: hidden;
  }
}

/* intro
---------------------------------------------- */
.intro {
  padding-top: clamp(60px, 2.99rem + 3.24vw, 110px);
  position: relative;
  z-index: 0;
}

.landplan {
  /* height: calc(100vh - 50px); */
  margin-top: 100px;
  padding-block: 40px 130px;
  /* padding-bottom: 100vh; */
  position: relative;
  z-index: 0;
}
/* .landplanWrap {
  position: sticky;
  top: 50px;
} */
/* .landplanBox {
  width: 100%;
  height: calc(100vh - 50px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
} */
.landplan__inner {
  width: min(80%, 1560px);
  /* height: 100%; */
  margin-inline: auto;
}

.landplanHead {
  flex: 1;
}
.landplan__text {
  margin-top: 2.5em;
}

.landplanMeritWrap {
  margin-top: 100px;
  position: relative;
  z-index: 0;
}
.landplanMerit {
  max-width: 470px;
  border-top: 1px solid #afa59f;
  border-bottom: 1px solid #afa59f;
  margin-inline: auto;
  padding-block: 40px;
  text-align: center;
  transition: .4s;
}
.landplanMerit02 {
  width: 100%;
  max-width: 470px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
}
.landplanMerit__text {
  font-size: clamp(18px, 0.12rem + 2.09vw, 42px);
  letter-spacing: 0.1em;
  line-height: 1.8;
}
.landplanMerit__text .small {
  display: block;
  font-size: 15px;
  letter-spacing: .01em;
  line-height: 1.6;
}
.landplanMerit02 .landplanMerit__text {
  font-size: clamp(15px, 0.19rem + 1.56vw, 33px);
  line-height: 1.8;
}

.landplanBox.is-active .landplanMerit01 {
  opacity: 0;
}
.landplanBox.is-active .landplanMerit02 {
  opacity: 1;
}

.landplanBody {
  width: calc(1000 / 1560 * 100%);
  position: relative;
  z-index: 0;
}
.landplan__img {
  mix-blend-mode: multiply;
  transition: .4s;
}
.landplan__img02 {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.landplanBox.is-active .landplan__img01 {
  opacity: 0;
}
.landplanBox.is-active .landplan__img02 {
  opacity: 1;
}

.layoutSpacer {
  height: calc(100vh - 50px);
}

@media (min-width: 769px) and (min-aspect-ratio: 1920/900) {
  .landplan__inner {
    transform: scale(.7);
  }
}

@media screen and (max-width: 768px) {
  .landplan {
    margin-top: 40px;
    padding-block: 30px 50px;
  }
  /* .landplanWrap {
    top: 0;
  } */
  /* .landplanBox {
    height: 100vh;
    height: 100svh;
  } */
  .landplan__inner {
    display: block;
    width: calc(1800 / 1920 * 100%);
    flex-direction: column;
    row-gap: 30px;
    margin-right: 0;
    overflow: hidden;
  }
  .landplanHead {
    width: calc(320 / 350 * 100%);
    margin-inline: auto;
  }
  .landplanMeritWrap {
    margin-top: 20px;
  }
  .landplanMerit {
    max-width: 240px;
    border: none;
    padding-block: 0;
  }
  .landplanMerit__text .small {
    font-size: 10px;
  }
  .landplanBody {
    width: 100%;
    margin-top: 10px;
    margin-inline: auto;
  }
  .landplan__img {
    /* width: 100vw; */
    /* margin-left: 100%; */
  }
}

/* view
---------------------------------------------- */
.view {
  position: relative;
  z-index: 10;
}

/* corridor
---------------------------------------------- */
.corridor {
  padding-top: 150px;
  padding-right: 0;
  position: relative;
  z-index: 10;
}
.corridorWrap {
  background-color: #231815;
}
.corridor__inner {
  padding-block: 5%;
}
.corridorHead {
  flex: 1;
}
.corridorHead__inner {
  width: min(80%, 600px);
  margin-inline: auto;
}
.corridor__text {
  margin-top: 1em;
}
.corridorHead__img {
  max-width: 510px;
  margin-top: 25px;
}

.corridorBody {
  width: calc(920 / 1680 * 100%);
}
.corridor__img {
  height: 100%;
}
.corridor__img img {
  height: 100%;
  object-fit: cover;
}

.dust {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .corridor {
    width: calc(1800 / 1920 * 100%);
    padding-top: 50px;
  }
  .corridor__inner {
    flex-direction: column;
    padding-block: 0;
  }
  .corridorHead {
    padding-block: 40px;
  }
  .corridorHead__inner {
    width: 100%;
  }
  .corridor__copy {
    width: calc(310 / 350 * 100%);
    margin-inline: auto;
  }
  .corridor__text {
    width: calc(310 / 350 * 100%);
    margin-top: 2em;
    margin-inline: auto;
  }
  .corridorHead__img {
    width: calc(310 / 350 * 100%);
    margin-top: 30px;
    margin-inline: auto;
  }
  .corridor__img {
    margin-block: 30px;
  }

  .dust {
  margin-top: 0;
  }
  .dust + .dust {
    margin-top: 30px;
  }
}

/* planArea
---------------------------------------------- */
.planArea {
  margin-top: 130px;
}
.planArea__copy {
  text-align: center;
}

.planListWrap {
  margin-top: 120px;
}
.planList {
  display: flex;
  justify-content: center;
  gap: 40px calc(90 / 1440 * 100%);
}
.planList > li {
  width: calc(420 / 1440 * 100%);
}
.planList__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 0;
}
/* .planList__link::before {
  content: '';
  width: 100%;
  height: 86%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
} */

.planList__spec {
  /* width: calc(240 / 420 * 100%); */
  width: 100%;
  background-color: #3c3c46;
  color: #c8bb9b;
  margin-inline: auto;
  text-align: center;
}

.specBox {
  width: calc(180 / 240 * 100%);
  margin-inline: auto;
  padding-block: 30px;
}

.typeName {
  font-size: clamp(24px, 1.25rem + 0.52vw, 30px);
  letter-spacing: 0.04em;
  border-bottom: 1px solid #c8bb9b;
  padding-bottom: 5px;
}
.typeName .em {
  font-size: calc(42 / 30 * 100%);
}
.spec {
  font-size: clamp(17px, 0.31rem + 1.56vw, 35px);
  margin-top: 5px;
}
.spec .em {
  font-size: calc(70 / 35 * 100%);
  line-height: 1;
}
.area {
  font-size: clamp(11px, 0.31rem + 0.78vw, 20px);
  margin-top: 20px;
}
.area__title {
  display: block;
  font-size: max(11px, calc(16 / 20 * 100%));
}
.area .em {
  font-size: calc(40 / 20 * 100%);
  line-height: 1;
}
.area .small {
  font-size: calc(17 / 20 * 100%);
}

.planList__spec .moreBtn {
  justify-content: center;
  font-size: 16px;
  background-color: #696969;
  padding: 1em;
}
.planList__spec .moreBtn::after {
  background-color: #c8bb9b;
}

.typeMerit {
  margin-top: 25px;
}
.typeMerit__item {
  border: 1px solid #a19689;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  padding: 0.8em;
  text-align: center;
}

.planList__body {
  flex: 1;
  display: grid;
  place-content: center;
  padding: 35px .5em;
}
.planList__text {
  color: #231815;
  font-size: clamp(14px, 0.54rem + 0.7vw, 22px);
  letter-spacing: 0.05em;
  line-height: 1.8;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .planList__link:hover .moreBtn::after {
    transform: translateX(10px);
  }
}

@media screen and (max-width: 1000px) {
  .planList {
    gap: 40px calc(50 / 1440 * 100%);
  }

  .planList > li {
    width: calc(450 / 1440 * 100%);
  }
  .planList__spec {
    width: 100%;
    max-width: revert;
  }
}

@media screen and (max-width: 768px) {
  .planArea {
    width: calc(1800 / 1920 * 100%);
    margin-top: 80px;
    padding-right: 0;
  }
  .planArea__copy {
    width: calc(320 / 350 * 100%);
    margin-inline: auto;
  }
  .planListWrap {
    margin-top: 70px;
  }
  .planList {
    flex-direction: column;
  }
  .planList > li {
    width: 100%;
  }

  .planList__spec {
    max-width: 280px;
    margin-inline: auto;
  }
  .specBox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    padding-block: 10px;
  }
  .typeName {
    border-bottom: none;
    padding-bottom: 0;
  }
  .typeSpec {
    border-left: 1px solid #c8bb9b;
    margin-left: 18px;
    padding-left: 20px;
    text-align: left;
  }
  .spec {
    margin-top: 0;
  }
  .area {
    margin-top: 15px;
    padding-bottom: 5px;
  }
  .area__title {
    margin-bottom: 5px;
  }

  .typeMerit {
    width: min(90%, 240px);
    margin-block: 15px 10px;
  }
  .typeMerit__item {
    font-size: 13px;
  }

  .planList__img img{
    aspect-ratio: 350 / 140;
    object-fit: cover;
  }

  .planList__body {
    display: block;
    padding: 1em;
  }
  .planList__text {
    text-align: left;
  }
}

/* equipment
---------------------------------------------- */
.equipment {
  margin-top: 160px;
}
.equipment__title {
  font-size: clamp(15px, 0.14rem + 1.65vw, 34px);
  letter-spacing: 0.25em;
  text-align: center;
}
.equipment__copy {
  margin-top: 2em;
  text-align: center;
}
.equipmentList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px calc(30 / 1440 * 100%);
  margin-top: 50px;
}
.equipmentList__text {
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin-top: 1em;
  text-align: center;
}

@media screen and (max-width: 1000px) {
  .equipmentList {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .equipment {
    margin-top: 60px;
  }
  .equipmentList {
    grid-template-columns: 1fr 1fr;
    /* width: calc(245 / 300 * 100%); */
    margin-top: 20px;
    margin-inline: auto;
  }
  .equipmentList__text {
    font-size: 10px;
  }
}

/* premium
---------------------------------------------- */
.premium {
  background-color: #231815;
  margin-top: clamp(60px, 1.93rem + 7.77vw, 180px);
}

.premiumMain {
  position: relative;
  z-index: 10;
}

.premiumContents {
  padding-block: clamp(60px, 2.99rem + 3.24vw, 110px);
}

.premium__title {
  text-align: center;
}

.premiumHead {
  margin-top: 60px;
  text-align: center;
}
.premium__text {
  margin-top: 3em;
  text-align: center;
}

.merit {
  margin-top: 50px;
}
.meritList {
  gap: 10px calc(30 / 1440 * 100%);
}
.meritList > li {
  display: grid;
  place-content: center;
  width: calc(325 / 1440 * 100%);
  background-color: #fff;
  position: relative;
  z-index: 0;
}
.meritList > li::before {
  content: '';
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 1px solid #a19689;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.meritList__text {
  color: #604c3f;
  font-size: clamp(12px, 0.62rem + 0.26vw, 15px);
  letter-spacing: 0.1em;
  line-height: 1.6;
  padding: 0.7em;
  text-align: center;
}

.premium__landplan {
  max-width: 1400px;
  margin-top: 60px;
  margin-inline: auto;
}

.premium .planList__link::before {
  background-color: #3e3a39;
}
.premium .planList__link::after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #c8bb9b;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.premium .planList__text {
  color: #c8bb9b;
}
.premium .planList__spec {
  background-color: #7a6a56;
}

.premium .planList__spec .moreBtn {
  background-color: #292c32;
}

.env {
  max-width: 330px;
  margin-top: 140px;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .premiumContents {
    width: calc(1800 / 1920 * 100%);
    padding-right: 0;
  }

  .premium__title {
    width: calc(320 / 350 * 100%);
    margin-inline: auto;
  }

  .premiumHead {
    width: calc(320 / 350 * 100%);
    margin-inline: auto;
    margin-top: 40px;
  }
  .premium__text {
    margin-top: 2em;
  }

  .merit {
    max-width: 220px;
    margin-top: 30px;
    margin-inline: auto;
  }
  .meritList{
    flex-direction: column;
  }
  .meritList > li {
    width: 100%;
    min-height: 50px;
  }

  .premium__landplan {
    width: 110vw;
    /* max-width: 560px; */
    margin-top: 20px;
    margin-inline: calc(140% - 140vw);
  }

  .premium .planList__link::after {
    content: '';
    width: 100%;
    max-width: 280px;
    height: 1px;
    background-color: #c8bb9b;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
  }
  .premium .planList__text {
    color: #c8bb9b;
  }
  .premium .planList__spec {
    background-color: #7a6a56;
  }

  .env {
    max-width: 260px;
    margin-top: 60px;
  }
}

/* sustainability
---------------------------------------------- */
.sustainability {
  padding-block: clamp(60px, 2.38rem + 5.83vw, 150px);
}

.sustainability__title {
  text-align: center;
}

.zeh {
  background-color: #fff;
  color: #231815;
  margin-top: clamp(40px, 1.59rem + 3.88vw, 100px);
  padding-block: clamp(40px, 1.59rem + 3.88vw, 100px);
}
.zeh__inner {
  gap: 50px calc(60 / 1200 * 100%);
  width: min(calc(300 / 350 * 100%), 1200px);
  margin-inline: auto;
}
.zehHead {
  flex: 1;
}
.zehHead__img {
  max-width: 320px;
}
.zehHead__copy {
  margin-top: 1em;
}
.zehHead__copy .small {
  font-size: max(10px, 60%);
}
.zehHead__text {
  margin-top: 1em;
}

.zehBody {
  width: calc(660 / 1200 * 100%);
}
.zehMeritItem {
  width: calc(305 / 660 * 100%);
}

@media screen and (max-width: 1000px) {
  .zeh__inner {
    max-width: 560px;
  }
  .zehHead,
  .zehBody {
    width: 100%;
  }
  .zehHead__img {
    margin-inline: auto;
  }
  .zehHead__copy {
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .zeh__inner {
    row-gap: 30px;
  }
  .zehHead__copy {
    font-size: 18px;
  }
  .zehHead__text {
    font-size: 12px;
  }
  .zehMerit {
    row-gap: 50px;
    max-width: 280px;
    margin-inline: auto;
  }
  .zehMeritItem {
    width: 100%;
  }
}