/* mixins */
/* functions */
.cond-detail-heading {
  text-align: center;
}
.cond-detail-heading .title {
  font-size: 7.4666666667vw;
  letter-spacing: 0.05em;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .cond-detail-heading .title {
    font-size: 45px;
  }
}
.cond-detail-heading .sub {
  font-size: 3.2vw;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .cond-detail-heading .sub {
    font-size: 15px;
    font-weight: 500;
  }
}

/*======================================================================================*/
.information {
  padding-top: 26.6666666667vw;
}
@media screen and (min-width: 768px) {
  .information {
    padding-top: 150px;
  }
}
.information .cond-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.information .cond-heading .title {
  font-size: 3.4666666667vw;
  letter-spacing: 0.02em;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .information .cond-heading .title {
    font-size: 20px;
  }
}
.information .cond-heading .title > span {
  display: inline-block;
  font-size: 5.3333333333vw;
  margin-left: 0.5em;
}
@media screen and (min-width: 768px) {
  .information .cond-heading .title > span {
    font-size: 32px;
  }
}
.information .cond-heading .lot {
  position: relative;
  margin-top: 5.3333333333vw;
  font-size: 12vw;
  padding-inline: 1em;
  padding-bottom: 0.1em;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .information .cond-heading .lot {
    margin-top: 32px;
    font-size: 72px;
    line-height: 1.1;
  }
}
.information .cond-heading .lot::before, .information .cond-heading .lot::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3.2vw;
  height: 100%;
  border: 1px solid #000;
}
@media screen and (min-width: 768px) {
  .information .cond-heading .lot::before, .information .cond-heading .lot::after {
    width: 20px;
  }
}
.information .cond-heading .lot::before {
  left: 0;
  border-right: none;
}
.information .cond-heading .lot::after {
  right: 0;
  border-left: none;
}
.information .cond-heading .lot > span {
  font-size: 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .information .cond-heading .lot > span {
    font-size: 32px;
  }
}
.information .cond-read {
  margin-top: 8vw;
  font-size: 3.2vw;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .information .cond-read {
    margin-top: 50px;
    font-size: 20px;
  }
}
.information .cond-tags {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 1.3333333333vw;
  margin-top: 10.6666666667vw;
}
@media screen and (min-width: 768px) {
  .information .cond-tags {
    gap: 10px;
    margin-top: 50px;
  }
}
.information .cond-tags .tag {
  display: inline-block;
  padding: 0.5333333333vw 1.0666666667vw;
  color: #fff;
  font-size: 4vw;
  font-weight: 500;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .information .cond-tags .tag {
    font-size: 18px;
  }
}
.information .cond-tags .tour {
  background-color: var(--c-wine-red);
}
.information .cond-floor {
  margin-top: 4vw;
  font-size: 6.9333333333vw;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .information .cond-floor {
    margin-top: 20px;
    font-size: 33px;
  }
}
.information .cond-area {
  margin-top: 4.8vw;
  padding: 5.3333333333vw var(--base-inline-half-sp);
  background-color: var(--c-subtle);
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .information .cond-area {
    max-width: 595px;
    margin-inline: auto;
    margin-top: 18px;
    padding: 15px 1em;
  }
}
.information .cond-area-inner + .cond-area-inner {
  margin-left: 0.8em;
  padding-left: 0.8em;
  border-left: 1px dashed #000;
}
.information .cond-area__txt {
  font-size: 3.2vw;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .information .cond-area__txt {
    font-size: 17px;
    line-height: 1.6;
  }
}

.gallery {
  width: 100%;
  max-width: 100%;
  margin: 5.3333333333vw auto 0;
  padding-inline: var(--base-inline-half-sp);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .gallery {
    margin-top: 60px;
    padding: 0;
  }
}
.gallery .gallery__layout {
  display: block;
}
@media screen and (min-width: 768px) {
  .gallery .gallery__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 375px;
    gap: 16px;
  }
}
@media screen and (min-width: 1100px) {
  .gallery .gallery__layout {
    grid-template-columns: minmax(0, 1fr) 30%;
  }
}
.gallery .gallery__main-slider {
  width: 100%;
  aspect-ratio: 240/135;
}
@media screen and (min-width: 768px) {
  .gallery .gallery__main-slider {
    aspect-ratio: auto;
  }
}
.gallery .gallery__main-slider .splide__track,
.gallery .gallery__main-slider .splide__list,
.gallery .gallery__main-slider .splide__slide {
  height: 100%;
}
.gallery .gallery__main-slider .splide__slide img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  .gallery .gallery__right {
    display: flex;
    flex-direction: column;
  }
}
.gallery .gallery__side {
  display: none;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
@media screen and (min-width: 768px) {
  .gallery .gallery__side {
    display: grid;
  }
}
.gallery .gallery__thumb {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
}
.gallery .gallery__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s ease, transform 0.35s ease;
}
.gallery .gallery__thumb:hover img {
  opacity: 0.82;
  transform: scale(1.025);
}
.gallery .gallery__footer {
  flex: 0 0 76px;
  padding-top: 10px;
}
.gallery .gallery__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-bottom: 17px;
}
.gallery .gallery__arrow {
  position: relative;
  display: block;
  width: 2.9333333333vw;
  height: 2.9333333333vw;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .gallery .gallery__arrow {
    width: 15px;
    height: 15px;
  }
}
.gallery .gallery__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid #555;
  border-right: 1px solid #555;
}
.gallery .gallery__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000000;
  transform: translateY(-50%);
}
.gallery .gallery__arrow--prev::before {
  left: 0;
  transform: translateY(-50%) rotate(-135deg);
}
.gallery .gallery__arrow--next::before {
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}
.gallery .gallery__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery .gallery__pagination-button {
  display: block;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #a7a7a7;
  cursor: pointer;
}
.gallery .gallery__pagination-button.is-active {
  background: #d21663;
}
.gallery .gallery__caption {
  margin: 0;
  padding: 0;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 500;
  color: #111;
}
@media screen and (min-width: 768px) {
  .gallery .gallery__caption {
    padding: 0 8px;
    font-size: 11px;
  }
}

.plan {
  background-color: var(--c-subtle);
  padding-block: 13.3333333333vw 14.6666666667vw;
  margin-top: 6.6666666667vw;
}
@media screen and (min-width: 768px) {
  .plan {
    margin-top: 0;
    padding-block: 80px 100px;
  }
}
.plan .plan-inner {
  width: var(--base-width-sp);
  margin-top: 12vw;
  margin-inline: auto;
  padding-block: 13.3333333333vw;
  background-color: #fff;
  border-radius: 25px;
}
@media screen and (min-width: 768px) {
  .plan .plan-inner {
    margin-top: 50px;
    padding-block: 100px 95px;
    font-size: 55px;
  }
}
.plan .plan-container {
  width: var(--base-width-sp);
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .plan .plan-container {
    max-width: 930px;
  }
}
@media screen and (min-width: 768px) {
  .plan .plan-image {
    padding-inline: 0.35em;
  }
}
.plan .plan-image .plan-image-note {
  margin-top: 8vw;
  font-size: 3.2vw;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .plan .plan-image .plan-image-note {
    width: 80%;
    margin-top: 35px;
    font-size: 18px;
    line-height: 1.7;
  }
}
.plan .plan-point {
  margin-top: 10.6666666667vw;
}
@media screen and (min-width: 768px) {
  .plan .plan-point {
    margin-top: 50px;
    display: flex;
    justify-content: center;
  }
}
.plan .plan-point .plan-point-item + .plan-point-item {
  margin-top: 6.6666666667vw;
  padding-top: 6.6666666667vw;
  background-image: repeating-linear-gradient(90deg, var(--c-ash), var(--c-ash) 5px, transparent 5px, transparent 10px);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 100% 1px;
}
@media screen and (min-width: 768px) {
  .plan .plan-point .plan-point-item + .plan-point-item {
    margin-top: 0;
    padding-top: 0;
    margin-left: 3%;
    padding-left: 3%;
    background-image: repeating-linear-gradient(180deg, var(--c-ash), var(--c-ash) 5px, transparent 5px, transparent 10px);
    background-position: left top;
    background-repeat: repeat-y;
    background-size: 1px 100%;
  }
}
.plan .plan-point .plan-point__title {
  font-size: 4vw;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .plan .plan-point .plan-point__title {
    font-size: 18px;
  }
}
.plan .plan-point .plan-point__read {
  font-size: 3.2vw;
}
@media screen and (min-width: 768px) {
  .plan .plan-point .plan-point__read {
    font-size: 15px;
  }
}

.plot-map {
  padding-block: 14.6666666667vw 6.6666666667vw;
}
@media screen and (min-width: 768px) {
  .plot-map {
    padding-block: 90px 45px;
  }
}
.plot-map .plot-map-image {
  margin-top: 10.6666666667vw;
  width: var(--base-width-sp);
  margin-inline: auto;
  overflow: clip;
}
@media screen and (min-width: 768px) {
  .plot-map .plot-map-image {
    margin-top: 50px;
  }
}
.plot-map .plot-map-image img {
  width: 148%;
  max-width: 1200px;
  margin-left: -24%;
}
@media screen and (min-width: 768px) {
  .plot-map .plot-map-image img {
    margin-left: -15%;
    width: 135%;
  }
}
@media screen and (min-width: 1000px) {
  .plot-map .plot-map-image img {
    width: 100%;
    margin-inline: auto;
  }
}
.plot-map .plot-map-links {
  display: flex;
  justify-content: center;
  gap: 1.5em;
}
.plot-map .plot-map-link {
  display: inline-block;
  font-size: 4vw;
  letter-spacing: 0.09em;
  border-bottom: 1px solid #000;
  padding-bottom: 0.1em;
  margin-top: 24vw;
}
@media screen and (min-width: 768px) {
  .plot-map .plot-map-link {
    margin-top: 75px;
    font-size: 19px;
  }
}
.plot-map .plot-map-link .icon {
  display: inline-block;
  width: 3.7333333333vw;
  vertical-align: -1px;
}
@media screen and (min-width: 768px) {
  .plot-map .plot-map-link .icon {
    width: auto;
  }
}

.banner-wrap {
  display: flex;
  flex-direction: column;
  gap: 4vw;
  width: var(--base-width-sp);
  max-width: 880px;
  margin-inline: auto;
  padding-block: 6.6666666667vw 9.3333333333vw;
}
@media screen and (min-width: 768px) {
  .banner-wrap {
    grid-area: 35px;
    padding-block: 45px 120px;
  }
}

.model-house {
  width: var(--base-width-sp);
  max-width: 1100px;
  margin-inline: auto;
  margin-top: 14.6666666667vw;
  padding-block: 8vw 18.6666666667vw;
  border-top: 1px solid var(--c-gray-light);
}
@media screen and (min-width: 768px) {
  .model-house {
    padding-block: 70px 140px;
    margin-top: 70px;
  }
}

.model-house-heading {
  letter-spacing: 0.05em;
}
.model-house-heading .title {
  font-size: 6.6666666667vw;
  font-weight: 500;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .model-house-heading .title {
    font-size: 45px;
    line-height: 1.6;
  }
}
.model-house-heading .sub {
  font-size: 3.4666666667vw;
}
@media screen and (min-width: 768px) {
  .model-house-heading .sub {
    font-size: 14px;
  }
}

.model-house-wrap {
  display: flex;
  justify-content: flex-start;
  gap: 4%;
  margin-top: 12vw;
}
@media screen and (min-width: 768px) {
  .model-house-wrap {
    margin-top: 40px;
  }
}
.model-house-wrap .model-house-item {
  width: 48%;
}
.model-house-wrap .model-house-plot {
  font-size: 4.2666666667vw;
  font-weight: 500;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .model-house-wrap .model-house-plot {
    font-size: 20px;
  }
}
.model-house-wrap .model-house-read {
  margin-top: 2.1333333333vw;
  font-size: 2.9333333333vw;
  letter-spacing: 0.05em;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .model-house-wrap .model-house-read {
    font-size: 18px;
    margin-top: 10px;
  }
}
.model-house-wrap .model-house-image {
  position: relative;
  margin-top: 2.1333333333vw;
}
@media screen and (min-width: 768px) {
  .model-house-wrap .model-house-image {
    margin-top: 15px;
  }
}
.model-house-wrap .model-house-link {
  position: absolute;
  right: -1.6vw;
  bottom: -2.1333333333vw;
  width: 10em;
  padding: 0.5em;
  background-color: #fff;
  border: 1px solid #000;
  font-size: 2.6666666667vw;
  letter-spacing: 0.05em;
  text-align: center;
  text-indent: -1em;
}
@media screen and (min-width: 768px) {
  .model-house-wrap .model-house-link {
    right: -15px;
    bottom: -15px;
    font-size: 20px;
  }
}
.model-house-wrap .model-house-link .arrow {
  position: absolute;
  top: 50%;
  right: 2.6666666667vw;
  display: inline-block;
  width: 3.2vw;
  height: 1px;
  margin: 1.3333333333vw 0;
  border-radius: 9999px;
  background-color: #000000;
  transform: translateY(-1.2vw);
}
@media screen and (min-width: 768px) {
  .model-house-wrap .model-house-link .arrow {
    top: 37%;
    right: 15px;
    width: 19px;
    margin: 7.8px 0;
    transform: translateY(-50%);
  }
}
.model-house-wrap .model-house-link .arrow::before, .model-house-wrap .model-house-link .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0px);
  right: 0;
  width: 1.8666666667vw;
  height: 1px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: calc(100% - 0px) 50%;
}
@media screen and (min-width: 768px) {
  .model-house-wrap .model-house-link .arrow::before, .model-house-wrap .model-house-link .arrow::after {
    top: calc(50% - 0px);
    width: 11px;
  }
}
.model-house-wrap .model-house-link .arrow::before {
  transform: rotate(45deg);
}
.model-house-wrap .model-house-link .arrow::after {
  transform: rotate(-45deg);
}
.model-house-wrap:hover {
  background-color: #000;
  color: #fff;
}
.model-house-wrap:hover .arrow {
  right: 1.8666666667vw;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .model-house-wrap:hover .arrow {
    right: 6px;
  }
}
.model-house-wrap:hover .arrow::before, .model-house-wrap:hover .arrow::after {
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .model-house-container {
    max-width: var(--base-width);
    display: flex;
    justify-content: flex-start;
    gap: 3%;
  }
}/*# sourceMappingURL=detail.css.map */