@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 768px) {
  .fixBtn {
    opacity: 1;
  }
}
/* span */
span {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* common */
.container {
  width: 100%;
  min-width: 1366px;
  display: grid;
  grid-template-columns: var(--grid_pc_col);
}

.trajan {
  font-family: "TrajanPro-Regular";
}

.img {
  font-size: 0;
  line-height: 1;
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
}

@media screen and (max-width: 1680px) {
  .container {
    grid-template-columns: var(--grid_note_col);
  }
}
@media screen and (max-width: 768px) {
  .container {
    min-width: 100%;
    grid-template-columns: var(--grid_sp_col);
  }
  figcaption {
    font-size: calc(12 / var(--media_sp) * 100vw);
  }
  .img {
    min-width: 0;
  }
}
.hero,
.limited {
  grid-column: 1/4;
  display: grid;
  grid-template-columns: var(--grid_pc_col);
}

@media screen and (max-width: 1680px) {
  .hero,
  .limited {
    grid-template-columns: var(--grid_note_col);
  }
}
@media screen and (max-width: 768px) {
  .hero,
  .limited {
    grid-column: 1/4;
    display: grid;
    grid-template-columns: var(--grid_sp_col);
  }
}
.hero {
  margin-top: 200px;
}
.hero .img {
  margin-top: 88px;
  grid-column: 1/3;
}
.hero .img figcaption {
  font-size: 12px;
  color: #fff;
}

.hero_ttl {
  margin-top: 16px;
  margin-left: -7px;
  grid-column: 2/3;
  font-size: 154px;
  line-height: 221px;
  color: #111;
}

.hero_copy {
  margin-top: 14px;
  margin-left: 4.5px;
  grid-column: 2/3;
  font-size: 31px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: #231815;
}

.hero_txt {
  margin-top: 101px;
  margin-right: -7px;
  grid-column: 2/3;
  justify-self: end;
  font-size: 17px;
  line-height: 3;
  letter-spacing: 0.09em;
  text-align: right;
}

@media screen and (max-width: 768px) {
  .hero {
    margin: 0;
    margin-top: calc(107 / var(--media_sp) * 100vw);
    padding-top: calc(53 / var(--media_sp) * 100vw);
  }
  .hero .img {
    margin-top: calc(67 / var(--media_sp) * 100vw);
    grid-column: 1/4;
  }
  .hero .img figcaption {
    font-size: calc(20 / var(--media_sp) * 100vw);
  }
  .hero_ttl {
    margin-top: calc(-14 / var(--media_sp) * 100vw);
    margin-left: calc(3 / var(--media_sp) * 100vw);
    font-size: calc(100 / var(--media_sp) * 100vw);
    line-height: 1;
    letter-spacing: 0;
  }
  .hero_copy {
    margin: 0;
    margin-top: calc(12 / var(--media_sp) * 100vw);
    font-size: calc(26 / var(--media_sp) * 100vw);
    letter-spacing: 0.06em;
    line-height: 2;
  }
  .hero_txt {
    margin: 0;
    margin-top: calc(65 / var(--media_sp) * 100vw);
    font-size: calc(26 / var(--media_sp) * 100vw);
    line-height: 2;
    letter-spacing: -0.085em;
    justify-self: start;
    text-align: left;
  }
  .hero_txt.noWrap {
    white-space: nowrap;
  }
}
.plan {
  margin-top: 90px;
  padding-bottom: 122px;
  grid-column: 2/3;
  --sec_inner_gap: 32px;
}
.plan .sec_wrap {
  margin: 0 auto;
  width: 1280px;
  display: flex;
  justify-content: space-between;
  gap: 110px;
}
.plan .sec_ttl {
  margin-top: -4px;
  margin-left: -15px;
  font-size: 73px;
  line-height: 1;
  writing-mode: vertical-rl;
  color: #111;
}
.plan .sec_inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sec_inner_gap);
}
.plan .con_wrap {
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: block;
  padding-left: 61px;
  width: calc((100% - var(--sec_inner_gap)) / 2 - 61px);
  color: #fff;
  position: relative;
  background: linear-gradient(-30deg, #252440 20%, #344975 80%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.plan .con_wrap.sold {
  pointer-events: none;
  cursor: auto;
  user-select: none;
  background-color: #000;
}
.plan .con_wrap.sold::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #17182b;
  opacity: .9;
}
.plan .con_wrap.menu.sold::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #291f15;
  opacity: .9;
}
.plan .con_wrap.prio.sold::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #291f15;
  opacity: .9;
}
.plan .con_wrap.garden.sold::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #13230d;
  opacity: .9;
}
.plan .con_wrap.sold::after,
.plan .con_wrap.menu.sold::after,
.plan .con_wrap.prio.sold::after,
.plan .con_wrap.garden.sold::after {
  content: "完売御礼";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: transparent;
  color: #fff;
  font-size: 35px;
  letter-spacing: 0.2em;
}
.plan .con_wrap.menu {
  background: linear-gradient(270deg, #9a7955 20%, #cbae83 80%);
}
.plan .con_wrap.garden {
  background: linear-gradient(270deg, #213e17 20%, #213e17 48%, #426132 80%);
  background-size: 120% 100%;
}
.plan .con_wrap:hover {
  opacity: 0.7;
}
.plan .con_txt_wrap {
  padding: 43px 0 53px;
}
.plan .new::before {
  content: "NEW";
  position: absolute;
  top: 17px;
  left: 19px;
  font-size: 13px;
  letter-spacing: 0.07em;
}
.plan .lim {
  background: -webkit-gradient(linear, right top, left top, from(rgb(154, 121, 85)), color-stop(48%, rgb(162, 128, 90)), to(rgb(203, 174, 131)));
  background: linear-gradient(270deg, rgb(154, 121, 85) 0%, rgb(162, 128, 90) 48%, rgb(203, 174, 131) 100%);
}
.plan .lim::after {
  content: "限定サイト\aにて\a公開中";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  background-color: #3d2811;
  display: grid;
  place-content: center;
  font-size: 16px;
  line-height: 1.25;
  white-space: pre;
  text-align: center;
}
/* .plan .con_wrap.menu::after {
  content: "プレミアム\aプラン\a掲載中";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  background-color: #3d2811;
  display: grid;
  place-content: center;
  font-size: 16px;
  line-height: 1.25;
  white-space: pre;
  text-align: center;
} */
/* .plan .con_wrap.garden::after {
  content: "専用庭付き\aプラン\a掲載中";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  background-color: #4b8a2c;
  display: grid;
  place-content: center;
  font-size: 16px;
  line-height: 1.25;
  white-space: pre;
  text-align: center;
} */
.plan .con_wrap.menu::after {
  content: "駐車場優先権付\aプレミアムプラン掲載中";
  white-space: pre-wrap;
  position: absolute;
  top: -20px;
  right: -20px;
  min-width: 260px;
  min-height: 75px;
  padding: 8px 25px;
  border-radius: 100vmax;
  background-color: #3a2a15;
  display: grid;
  place-content: center;
  box-sizing: border-box;
  font-size: 19px;
  line-height: 1.527;
  text-align: center;
}
.plan .con_wrap.garden::after {
  content: "専用庭付きプラン掲載中";
  white-space: pre-wrap;
  position: absolute;
  top: -20px;
  right: -20px;
  min-width: 260px;
  min-height: 75px;
  padding: 8px 25px;
  border-radius: 100vmax;
  background-color: #5a883a;
  display: grid;
  place-content: center;
  box-sizing: border-box;
  font-size: 19px;
  line-height: 1.527;
  text-align: center;
}
.plan .con_wrap.prio::after {
  content: "駐車場優先権付\aプレミアムプラン掲載中";
  white-space: pre-wrap;
  position: absolute;
  top: -20px;
  right: -20px;
  min-width: 260px;
  min-height: 75px;
  padding: 8px 25px;
  border-radius: 100vmax;
  background-color: #008ad1;
  display: grid;
  place-content: center;
  box-sizing: border-box;
  font-size: 19px;
  line-height: 1.527;
  text-align: center;
}
.plan .con_ttl {
  font-size: 25px;
}
.plan .con_ttl span {
  font-size: 50px;
}
.plan .con_txt_plan {
  position: relative;
  margin-top: 47px;
  margin-left: -2px;
  font-size: 25px;
  letter-spacing: 0.04em;
}
.plan .con_txt_plan span {
  font-size: 35px;
  letter-spacing: 0.04em;
}
.plan .con_txt_plan span.rb {
  font: inherit;
  letter-spacing: -0.01em;
  position: absolute;
  top: 40px;
  left: 0;
}
.plan .con_txt_area {
  margin-top: 35px;
  font-size: 17px;
  letter-spacing: 0.03em;
}
.plan .con_txt_area span {
  margin-left: 9px;
  font-size: 30px;
}
.plan .con_txt_area span .strong {
  margin: 0;
  font-size: 45px;
}

@media screen and (max-width: 768px) {
  .plan {
    margin-top: calc(70 / var(--media_sp) * 100vw);
    padding-bottom: calc(120 / var(--media_sp) * 100vw);
    grid-column: 2/3;
  }
  .plan .sec_wrap {
    width: 100%;
    display: block;
  }
  .plan .sec_ttl {
    margin: 0;
    margin-left: calc(-7 / var(--media_sp) * 100vw);
    font-size: calc(60 / var(--media_sp) * 100vw);
    line-height: 1;
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
  }
  .plan .sec_inner {
    margin-top: calc(39 / var(--media_sp) * 100vw);
    width: 100%;
    display: block;
  }
  .plan .sec_inner > * + * {
    margin-top: calc(40 / var(--media_sp) * 100vw);
  }
  .plan .con_wrap {
    padding-left: calc(78 / var(--media_sp) * 100vw);
    width: calc(100% - 78 / var(--media_sp) * 100vw);
  }
  .plan .con_txt_wrap {
    padding-top: calc(41 / var(--media_sp) * 100vw);
    padding-bottom: calc(69 / var(--media_sp) * 100vw);
  }
  .plan .new::before {
    top: calc(25 / var(--media_sp) * 100vw);
    left: calc(30 / var(--media_sp) * 100vw);
    font-size: calc(16.5 / var(--media_sp) * 100vw);
    letter-spacing: 0.1em;
  }
  .plan .lim::after {
    bottom: calc(-25 / var(--media_sp) * 100vw);
    right: calc(-25 / var(--media_sp) * 100vw);
    width: calc(142.24 / var(--media_sp) * 100vw);
    height: calc(142.24 / var(--media_sp) * 100vw);
    font-size: calc(20.32 / var(--media_sp) * 100vw);
  }
  /* .plan .con_wrap.menu::after {
    bottom: calc(-25 / var(--media_sp) * 100vw);
    right: calc(-25 / var(--media_sp) * 100vw);
    width: calc(142.24 / var(--media_sp) * 100vw);
    height: calc(142.24 / var(--media_sp) * 100vw);
    font-size: calc(20.32 / var(--media_sp) * 100vw);
  }
  .plan .con_wrap.garden::after {
    bottom: calc(-25 / var(--media_sp) * 100vw);
    right: calc(-25 / var(--media_sp) * 100vw);
    width: calc(142.24 / var(--media_sp) * 100vw);
    height: calc(142.24 / var(--media_sp) * 100vw);
    font-size: calc(20.32 / var(--media_sp) * 100vw);
  } */
  .plan .con_wrap.menu::after,
  .plan .con_wrap.garden::after,
  .plan .con_wrap.prio::after {
    top: calc(-23 / var(--media_sp) * 100vw);
    right: calc(-23 / var(--media_sp) * 100vw);
    min-width: calc(330 / var(--media_sp) * 100vw);
    min-height: calc(95 / var(--media_sp) * 100vw);
    font-size: calc(24 / var(--media_sp) * 100vw);
    padding: 1.041vw 4.166vw;
  }
  .plan .con_ttl {
    margin-top: calc(15 / var(--media_sp) * 100vw);
    font-size: calc(31.75 / var(--media_sp) * 100vw);
  }
  .plan .con_ttl span {
    font-size: calc(63.5 / var(--media_sp) * 100vw);
  }
  .plan .con_txt_plan {
    margin-top: calc(58 / var(--media_sp) * 100vw);
    margin-left: calc(-2 / var(--media_sp) * 100vw);
    font-size: calc(31.75 / var(--media_sp) * 100vw);
  }
  .plan .con_txt_plan span {
    font-size: calc(44.45 / var(--media_sp) * 100vw);
  }
  .plan .con_txt_plan span.rb {
    top: calc(50 / var(--media_sp) * 100vw);
  }
  .plan .con_txt_area {
    margin-top: calc(45 / var(--media_sp) * 100vw);
    margin-left: 0;
    font-size: calc(20 / var(--media_sp) * 100vw);
    letter-spacing: 0.14em;
  }
  .plan .con_txt_area span {
    margin-left: calc(11 / var(--media_sp) * 100vw);
    font-size: calc(37 / var(--media_sp) * 100vw);
    letter-spacing: 0.04em;
  }
  .plan .con_txt_area span .strong {
    font-size: calc(55 / var(--media_sp) * 100vw);
  }
  .plan .con_wrap.sold::after,
  .plan .con_wrap.menu.sold::after,
  .plan .con_wrap.garden.sold::after {
    font-size: calc((( 44.45 / var(--media_sp)) * 100) * var(--vw));
  }
}
.limited {
  margin-top: 122px;
  grid-column: 1/4;
  place-content: center;
}
.limited .bg_img {
  grid-column: 1/4;
  grid-row: 1/2;
  height: 646px;
  overflow: hidden;
}
.limited .bg_img img {
  min-height: 646px;
  object-fit: cover;
  object-position: center;
}
.limited .txt_wrap {
  grid-column: 2/3;
  grid-row: 1/2;
  text-align: center;
  color: #fff;
}
.limited .sec_ttl {
  margin-top: 153px;
  font-size: 74px;
  background: -webkit-gradient(linear, right top, left top, color-stop(20%, #9a7955), color-stop(80%, #cbae83));
  background: linear-gradient(270deg, #9a7955 20%, #cbae83 80%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.limited .sec_txt {
  margin-top: 12px;
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #c5a77d;
}
.limited .btn {
  margin: 51px auto 0;
  width: fit-content;
  width: 420px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.limited .btn a {
  display: grid;
  place-content: center;
  position: relative;
  width: 100%;
  height: 60px;
  border-radius: 30px;
  background: -webkit-gradient(linear, right top, left top, from(rgb(154, 121, 85)), color-stop(48%, rgb(162, 128, 90)), to(rgb(203, 174, 131)));
  background: linear-gradient(270deg, rgb(154, 121, 85) 0%, rgb(162, 128, 90) 48%, rgb(203, 174, 131) 100%);
}
.limited .btn p {
  /* font-size: 15px; */
  font-size: 18px;
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.limited .btn .arrow {
  position: absolute;
  top: 49%;
  /* right: 129px; */
  right: 60px;
  width: 7px;
  height: 7px;
  -webkit-transform: rotate(45deg) translateY(-50%);
          transform: rotate(45deg) translateY(-50%);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

@media screen and (max-width: 768px) {
  .limited {
    margin-top: calc(120 / var(--media_sp) * 100vw);
  }
  .limited .bg_img {
    height: auto;
    overflow: auto;
  }
  .limited .bg_img img {
    min-height: auto;
  }
  .limited .sec_ttl {
    margin-top: calc(154 / var(--media_sp) * 100vw);
    font-size: calc(84 / var(--media_sp) * 100vw);
  }
  .limited .sec_txt {
    margin-top: calc(27 / var(--media_sp) * 100vw);
    font-size: calc(52 / var(--media_sp) * 100vw);
  }
  .limited .btn {
    margin: calc(63 / var(--media_sp) * 100vw) auto 0;
    width: 100%;
    /* width: calc(540 / var(--media_sp) * 100vw); */
  }
  .limited .btn a {
    height: calc(90 / var(--media_sp) * 100vw);
    border-radius: calc(45 / var(--media_sp) * 100vw);
  }
  .limited .btn p {
    /* font-size: calc(28 / var(--media_sp) * 100vw); */
    font-size: calc(32 / var(--media_sp) * 100vw);
  }
  .limited .btn .arrow {
    position: absolute;
    top: 48%;
    /* right: calc(79 / var(--media_sp) * 100vw); */
    right: calc(38 / var(--media_sp) * 100vw);
    width: calc(13 / var(--media_sp) * 100vw);
    height: calc(13 / var(--media_sp) * 100vw);
    -webkit-transform: rotate(45deg) translateY(-50%);
            transform: rotate(45deg) translateY(-50%);
    border-top: calc(2 / var(--media_sp) * 100vw) solid #fff;
    border-right: calc(2 / var(--media_sp) * 100vw) solid #fff;
  }
}

/* garden banner */
.garden-wrap {
  /* width: 100%; */
  grid-column: 2 / 3;
}

@media screen and (min-width:769px) {
  .garden-wrap {
    margin-block: 120px 45px;
  }
  .garden-wrap a {
    display: block;
    max-width: 1280px;
    margin-inline: auto;
  }
}
@media screen and (max-width:768px) {
  .garden-wrap {
    margin-top: calc((( 100 / var(--media_sp)) * 100) * var(--vw));
    margin-bottom: calc((( 45 / var(--media_sp)) * 100) * var(--vw));
  }
}
/* garden banner */