@charset "utf-8";

.plan {
  padding-bottom: 150px;
  background: var(--bg-underpage);
}
.plan::before {
  content: "";
  display: block;
  width: 1px;
  height: 80px;
  margin-inline: auto;
  background: linear-gradient(0deg, rgba(var(--color-brown), 1) 20px, #BEBEBE 20px);
}
.plan__heading {
  --margin-top: 50;
  --margin-bottom: 80;
}
/* .plan__content {
} */
.plan__content__list {
  gap: 50px 30px;
}
.plan__content__list__item {
  flex: 0 1 calc((100% - 60px) / 3);
  box-shadow: 0 0 30px rgba(0, 0, 0, .2);
}
.plan__content__list__item__link {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(var(--color-lightbrown), 1);
  padding: 65px calc(38 / 380 * 100%) 40px;
  background: #fff;
}
.plan__content__list__item__link__point {
  position: absolute;
  z-index: 1;
  top: calc(20 / 13 * 1em);
  left: calc(20 / 13 * 1em);
  width: calc(70 / 13 * 1em);
  height: calc(70 / 13 * 1em);
  --font-size-min: 10;
  --font-size-max: 13;
  line-height: 1.230769231;
  background: linear-gradient(0deg, #fff, #fff) no-repeat top 1px center/calc(100% - 2px) 1.5px,
              linear-gradient(0deg, #fff, #fff) no-repeat bottom 1px center/calc(100% - 2px) 1.5px,
              linear-gradient(0deg, #fff, #fff) no-repeat center left 1px/1.5px calc(100% - 2px),
              linear-gradient(0deg, #fff, #fff) no-repeat center right 1px/1.5px calc(100% - 2px),
              linear-gradient(45deg, rgba(196, 137, 53, 1) 5%, rgba(202, 148, 67, 1) 11.84%, rgba(224, 185, 115, 1) 37.31%, rgba(232, 199, 133, 1) 50%, rgba(224, 185, 115, 1) 62.69%, rgba(202, 148, 67, 1) 88.16%, rgba(196, 137, 53, 1) 95%) no-repeat center/100% 100%;
}
.plan__content__list__item__link__type {
  --font-size-min: 14;
  --font-size-max: 34;
}
.plan__content__list__item__link__type em {
  font-size: calc(70 / 34 * 100%);
  letter-spacing: .1em;
  line-height: 0;
}
.plan__content__list__item__link__type em small {
  font-size: 70%;
}
.plan__content__list__item__link__type::after {
  content: "";
  display: block;
  height: 1px;
  padding-bottom: calc(20 / 34 * 1em);
  border-bottom: 1px solid rgba(var(--color-lightbrown), 1);
  margin-bottom: calc(25 / 34 * 1em);
}
.plan__content__list__item__link__data {
  gap: 1em 0;
}
.plan__content__list__item__link__data__item {
  --font-size-min: 18;
  --font-size-max: 38;
  white-space: nowrap;
}
.plan__content__list__item__link__data__item em {
  font-family: "Noto Serif JP", serif;
}
.plan__content__list__item__link__data__item--main em {
  font-size: 140%;
}
.plan__content__list__item__link__data__item--sub {
  --font-size-min: 14;
  --font-size-max: 28;
}
.plan__content__list__item__link__data__item--sub::before {
  content: "+";
  padding-inline: .25em;
}
.plan__content__list__item__link__data2 {
  margin-top: 20px;
  --font-size-min: 11;
  --font-size-max: 14;
}
.plan__content__list__item__link__data2__name {
  font-size: 100%;
}
.plan__content__list__item__link__data2__data {
  font-size: 100%;
}
.plan__content__list__item__link__data2__data em {
  font-size: 160%;
}
.plan__content__list__item__link__data2__data em em {
  font-size: calc(240 / 160 * 100%);
}
.plan__content__list__item__link__data2__data em em em {
  font-size: calc(300 / 240 * 100%);
}
.plan__content__list__item__link__more {
  height: calc(50 / 16 * 1em);
  margin-top: 25px;
  box-sizing: border-box;
  padding: .5em;
  font-size: clamp(11px, calc(16 / 1200 * 100vw), 16px);
  background: linear-gradient(0deg, #bebebe, #bebebe) no-repeat center right/calc(40 / 16 * 1em) 1px rgba(var(--color-lightbrown), 1);
}
.plan__content__list__item__link__tolimited {
  position: absolute;
  z-index: 10;
  inset: 0;
  box-sizing: border-box;
  padding: 10px;
  background: rgba(var(--color-green), .4);
}
.plan__content__list__item__link__tolimited__copy {
  --font-size-min: 12;
  --font-size-max: 18;
  line-height: 1.5;
}
.plan__content__list__item__link__tolimited__copy em {
  display: block;
  font-size: calc(34 / 18 * 100%);
  margin-top: .2em;
}
.plan__content__list__item__link--limited::before {
  content: "限定公開間取り";
  position: absolute;
  z-index: 1;
  top: -1px;
  right: -1px;
  display: flex;
  place-items: center;
  width: fit-content;
  box-sizing: border-box;
  padding: .5em;
  font-size: clamp(11px, calc(16 / 1200 * 100vw), 16px);
  letter-spacing: .1em;
  line-height: 1.2;
  text-indent: .25em;
  color: #fff;
  background: linear-gradient(45deg, rgba(114, 91, 68, 1) 0%, rgba(121, 99, 77, 1) 17.5%, rgba(138, 120, 101, 1) 45.96%, rgba(142, 124, 106, 1) 50.8%, rgba(138, 120, 101, 1) 55.49%, rgba(121, 99, 77, 1) 83.05%, rgba(114, 91, 68, 1) 100%);
}
@media screen and (min-width: 481px) and (max-width: 1200px) {
  .plan__content__list__item__link__point {
    top: calc(10 / 13 * 1em);
    left: calc(10 / 13 * 1em);
  }
}
@media screen and (min-width: 481px) and (max-width: 767px) {
  .plan__content__list__item {
    flex: 0 1 calc((100% - 30px) / 2);
  }
}
@media screen and (max-width: 480px){
  .plan {
    padding-bottom: 100px;
  }
  .plan::before {
    height: 60px;
    background: linear-gradient(0deg, rgba(var(--color-brown), 1) 15px, #BEBEBE 15px);
  }
  .plan__heading {
    --margin-top: 35;
    --margin-bottom: 40;
  }
  .plan__content__list {
    gap: 30px 0;
    width: calc(304 / 380 * 100vw);
  }
  .plan__content__list__item {
    flex: 1 0 100%;
    min-height: calc(293 / 380 * 100vw);
  }
  .plan__content__list__item__link {
    padding: 50px calc(31 / 304 * 100%) 30px;
  }
  .plan__content__list__item__link__point {
    top: calc(10 / 11 * 1em);
    left: calc(10 / 11 * 1em);
    --font-size-max: 11;
  }
  .plan__content__list__item__link__type {
    --font-size-max: 27;
  }
  .plan__content__list__item__link__type::after {
    padding-bottom: calc(15 / 27 * 1em);
    margin-bottom: calc(20 / 27 * 1em);
  }
  .plan__content__list__item__link__data__item {
    --font-size-max: 30;
  }
  .plan__content__list__item__link__data__item--sub {
    --font-size-max: 22;
  }
  .plan__content__list__item__link__data2 {
    margin-top: 15px;
    --font-size-max: 12;
  }
  .plan__content__list__item__link__more {
    height: calc(40 / 13 * 1em);
    margin-top: 20px;
    font-size: calc(13 / 380 * 100vw);
  }
  .plan__content__list__item__link__tolimited__copy {
    --font-size-max: 16;
  }
  .plan__content__list__item__link--limited::before {
    font-size: calc(12 / 380 * 100vw);
  }
}



.detail {
  padding-top: 120px;
  padding-bottom: 50px;
  background: url(../../img/common/bg_detail.jpg) no-repeat top left/clamp(300px, calc(500 / 1200 * 100vw), 500px) auto;
}
.detail__content {
  max-width: 1100px;
  grid-template: "desc madori" auto "sample madori" 1fr / max(280px, calc(400 / 1100 * 100%)) minmax(0, 1fr);
  align-items: start;
  gap: 0 calc(50 / 1100 * 100%);
}
.detail__content__desc {
  grid-area: desc;
  margin-top: calc(85 / 400 * 100%);
}
.detail__content__desc__type {
  --font-size-min: 26;
  --font-size-max: 46;
}
.detail__content__desc__type em {
  font-size: calc(82 / 46 * 100%);
  letter-spacing: .1em;
  line-height: 0;
}
.detail__content__desc__type em small {
  font-size: 70%;
}
.detail__content__desc__type::after {
  content: "";
  display: block;
  height: 1px;
  padding-bottom: calc(50 / 46 * 1em);
  border-bottom: 1px solid rgba(var(--color-lightbrown), 1);
  margin-bottom: calc(55 / 46 * 1em);
}
.detail__content__desc__data {
  gap: 1em 0;
}
.detail__content__desc__data__item {
  --font-size-min: 18;
  --font-size-max: 38;
  white-space: nowrap;
}
.detail__content__desc__data__item em {
  font-family: "Noto Serif JP", serif;
}
.detail__content__desc__data__item--main em {
  font-size: 140%;
}
.detail__content__desc__data__item--sub {
  --font-size-min: 14;
  --font-size-max: 28;
}
.detail__content__desc__data__item--sub::before {
  content: "+";
  padding-inline: .25em;
}
.detail__content__desc__data2 {
  width: fit-content;
  margin-inline: auto;
  margin-top: 60px;
  grid-template-columns: 100%;
  gap: 15px 0;
}
.detail__content__desc__data2__item {
  --font-size-min: 11;
  --font-size-max: 14;
  line-height: 1.5;
}
/* .detail__content__desc__data2__item--main .detail__content__desc__data2__item__name {
} */
.detail__content__desc__data2__item--main .detail__content__desc__data2__item__data {
  font-size: calc(16 / 14 * 100%);
  margin-top: -.25em;
  margin-bottom: .5em;
}
.detail__content__desc__data2__item--main .detail__content__desc__data2__item__data em {
  font-size: 160%;
}
.detail__content__desc__data2__item--main .detail__content__desc__data2__item__data em em {
  font-size: calc(240 / 160 * 100%);
}
.detail__content__desc__data2__item--main .detail__content__desc__data2__item__data em em em {
  font-size: calc(300 / 240 * 100%);
}
.detail__content__desc__data2__item__name::before {
  content: "■";
  color: rgba(var(--color-lightbrown), 1);
  padding-right: .5em;
}
.detail__content__desc__merit {
  margin-top: 50px;
  grid-template-columns: 100%;
  gap: 20px;
}
.detail__content__desc__merit__item {
  min-height: calc(80 / 14 * 1em);
  place-items: center;
  --font-size-min: 10;
  --font-size-max: 14;
  line-height: 1.857142857;
  margin-block: 0;
  box-sizing: border-box;
  padding: calc(14 / 14 * 1em) .5em;
  background: rgba(var(--color-lightgreen), .2);
}
.detail__content__madori {
  grid-area: madori;
}
.detail__content__madori__photo {
  text-align: center;
}
.detail__content__sample {
  grid-area: sample;
  margin-top: 50px;
}
.detail__content__sample__list {
  font-size: 10px;
  gap: 10px 2em;
}
.detail__content__sample__list + .detail__content__sample__list {
  margin-top: 10px;
}
.detail__content__sample__item {
  font-size: inherit;
  margin-block: 0;
  white-space: nowrap;
}
.detail__content__sample__item--storage::before {
  content: "";
  display: inline-block;
  width: 2.5em;
  height: 1em;
  margin-right: .5em;
  background: #e8e3d1;
}
.detail__content__sample__item--floor::before {
  content: "";
  display: inline-block;
  width: 2.5em;
  height: 1em;
  margin-right: .5em;
  background: #f3e2df;
}
.detail__content__sample__item--light::before {
  content: "";
  display: inline-block;
  width: 2.5em;
  height: 1em;
  margin-right: .5em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="5.43" viewBox="0 0 20 5.43"><polygon points="0 2.715 20 5.43 20 0 0 2.715" fill="%23ce945d"/></svg>') no-repeat center/100% auto;
}
.detail__content__sample__item--wind::before {
  content: "";
  display: inline-block;
  width: 2.5em;
  height: 1em;
  margin-right: .5em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="4.892" viewBox="0 0 20 4.892"><path d="M0,4.226C4.282-.241,9.862,3.262,9.862,3.262c6.345,4.488,10.138-1.713,10.138-1.713,0,0-3.676,3.553-9.567-.602,0,0-5.649-3.614-10.433,3.278" fill="%238db1d1"/></svg>') no-repeat center/100% auto;
}
.detail__back {
  max-width: 400px;
  margin-top: 100px;
}
@media screen and (max-width: 480px){
  .detail {
    padding-top: 80px;
    padding-bottom: 0;
    background-size: calc(250 / 380 * 100%) auto;
  }
  .detail__content {
    grid-template: "desc" auto "madori" auto "sample" auto / 100%;
    gap: 0;
  }
  .detail__content__desc {
    margin-top: 0;
  }
  .detail__content__desc__type {
    --font-size-max: 30;
  }
  .detail__content__desc__type em {
    font-size: calc(66 / 30 * 100%);
  }
  .detail__content__desc__type::after {
    padding-bottom: calc(20 / 30 * 1em);
    margin-bottom: calc(25 / 30 * 1em);
  }
  .detail__content__desc__data__item {
    --font-size-max: 30;
  }
  .detail__content__desc__data__item--sub {
    --font-size-max: 22;
  }
  .detail__content__desc__data2 {
    margin-top: 30px;
    gap: 12px 0;
  }
  .detail__content__desc__data2__item {
    --font-size-max: 12;
  }
  .detail__content__desc__data2__item--main .detail__content__desc__data2__item__data {
    font-size: calc(16 / 12 * 100%);
    margin-top: -.7em;
    margin-bottom: 0;
  }
  .detail__content__desc__merit {
    margin-top: 30px;
    gap: 10px;
  }
  .detail__content__desc__merit__item {
    min-height: calc(70 / 14 * 1em);
    --font-size-max: 14;
    line-height: 1.571428571;
    padding: calc(12 / 14 * 1em) 1.25em;
    text-align: justify;
  }
  .detail__content__madori {
    margin-top: 40px;
  }
  .detail__content__sample {
    margin-top: 30px;
  }
  .detail__back {
    max-width: 260px;
    margin-top: 40px;
  }
}