:root {
  --color-main01: #AF9147;
  --color-green: #007864;
}

:root {
  --vw-size11: clamp(10px, calc(((11 + 2) / 1360) * 100vw), 11px);
  --vw-size12: clamp(10px, calc(((12 + 2) / 1360) * 100vw), 12px);
  --vw-size14: clamp(12px, calc(((14 + 2) / 1360) * 100vw), 14px);
  --vw-size16: clamp(13px, calc(((16 + 2) / 1360) * 100vw), 16px);
  --vw-size18: clamp(14px, calc(((18 + 2) / 1360) * 100vw), 18px);
  --vw-size20: clamp(15px, calc(((20 + 2) / 1920) * 100vw), 20px);
  --vw-size24: clamp(18px, calc(((24 + 2) / 1360) * 100vw), 24px);
  --vw-size28: clamp(19px, calc(((28 + 2) / 1360) * 100vw), 28px);
  --vw-size30: clamp(20px, calc(((30 + 2) / 1360) * 100vw), 30px);
  --vw-size32: clamp(20px, calc(((32 + 2) / 1360) * 100vw), 32px);
  --vw-size40: clamp(22px, calc(((40 + 2) / 1360) * 100vw), 40px);
  --vw-size45: clamp(24px, calc(((45 + 2) / 1920) * 100vw), 45px);
  --vw-size48: clamp(26px, calc(((48 + 2) / 1360) * 100vw), 48px);
  --vw-size56: clamp(30px, calc(((56 + 2) / 1360) * 100vw), 56px);
  --vw-size80: clamp(40px, calc(((80 + 2) / 1360) * 100vw), 80px);
  --vw-size100: clamp(50px, calc(((100 + 2) / 1360) * 100vw), 100px);
}

.pointArea {
  background: url(../img/plan/bg_point.jpg) no-repeat center top/cover;
  padding: 60px 0;
  position: relative;
}
@media (max-width: 767px) {
  .pointArea {
    padding: 40px 0;
    background: url(../img/plan/bg_point_sp.jpg) no-repeat center top/cover;
  }
}
.pointArea .en, .pointArea .en * {
  font-family: "Cinzel", serif !important;
  font-weight: 400;
}
.pointArea .inner01 {
  max-width: 1100px;
}
.pointArea .cap01 {
  font-size: 10px;
  line-height: 1;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
.pointArea .point {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 767px) {
  .pointArea .point {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 10px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.pointArea .point li {
  width: 24%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  border-radius: 50%;
  aspect-ratio: 1/1;
  background: -webkit-radial-gradient(rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0) 70%);
  background: radial-gradient(rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0) 70%);
}
@media (max-width: 767px) {
  .pointArea .point li {
    width: calc((100% - 10px) / 2);
  }
}
.pointArea .point li:last-child p.txt {
  margin-top: clamp(8px, 0.9558823529vw, 11px);
}
.pointArea .point li p.ttl {
  color: var(--color-green);
  font-size: var(--vw-size16);
  line-height: 1;
  margin-bottom: clamp(20px, 2.9411764706%, 40px);
}
.pointArea .point li p.subTxt {
  font-size: var(--vw-size20);
}
.pointArea .point li p.txt {
  font-size: var(--vw-size32);
  line-height: 1.2;
}
.pointArea .point li p.txt strong {
  font-size: 150%;
  line-height: 1;
  font-weight: normal;
}
.pointArea .point li p.txt strong.en01 {
  font-size: 175%;
  line-height: 1;
}

.planListArea {
  padding: clamp(100px, 14.7058823529%, 200px) 0;
}
.planListArea .en, .planListArea .en * {
  font-family: "Cinzel", serif !important;
  font-weight: 400;
}
.planListArea .inner02 {
  width: 95%;
  max-width: 1720px;
}
@media (max-width: 767px) {
  .planListArea .inner02 {
    width: 90%;
    margin: 0 auto;
  }
}
.planListArea .planListWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: clamp(30px, 6.976744186%, 120px);
     -moz-column-gap: clamp(30px, 6.976744186%, 120px);
          column-gap: clamp(30px, 6.976744186%, 120px);
}
@media (max-width: 767px) {
  .planListArea .planListWrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 60px;
  }
}
.planListArea .planListWrap .imgWrap {
  width: 44.476744186%;
  position: relative;
}
@media (max-width: 767px) {
  .planListArea .planListWrap .imgWrap {
    width: 100%;
  }
}
.planListArea .planListWrap .imgWrap .wrapInner {
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
}
.planListArea .planListWrap .imgWrap h3 {
  padding-left: 5vw;
}
@media (max-width: 767px) {
  .planListArea .planListWrap .imgWrap h3 {
    padding-left: 0;
  }
}
.planListArea .planListWrap .listWrap {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.planListArea .planListWrap .listWrap .planList01 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 20px;
}
.planListArea .planListWrap .listWrap .planList01 + h4 {
  margin-top: clamp(50px, 11.9760479042%, 100px);
}
.planListArea .planListWrap .listWrap .planList01 li {
  width: calc((100% - 20px) / 2);
}
@media (max-width: 767px) {
  .planListArea .planListWrap .listWrap .planList01 li {
    width: 100%;
  }
}
.planListArea .planListWrap .listWrap .planList01 li a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  height: 100%;
  padding: clamp(20px, 9.828009828%, 40px);
  border: solid 1px rgba(35, 24, 21, 0.5);
  -webkit-transition: border-color 0.4s ease 0s;
  transition: border-color 0.4s ease 0s;
}
@media (min-width: 992px) {
  .planListArea .planListWrap .listWrap .planList01 li a:hover {
    border-color: var(--color-green);
  }
}
@media (min-width: 992px) {
  .planListArea .planListWrap .listWrap .planList01 li a:hover p.view span::before {
    width: 20px;
  }
}
.planListArea .planListWrap .listWrap .planList01 li a .tag {
  position: absolute;
  top: 0;
  right: 0;
}
.planListArea .planListWrap .listWrap .planList01 li a .tag p {
  color: #fff;
  font-size: var(--vw-size16);
  line-height: 1;
  padding: 6px 10px;
}
.planListArea .planListWrap .listWrap .planList01 li a .tag p.tag01 {
  background: var(--color-green);
}
.planListArea .planListWrap .listWrap .planList01 li a p {
  font-family: "EB garamond", YuMincho, "Yu Mincho", A1 Mincho, "Hiragino Mincho ProN", serif;
  letter-spacing: 0.04em;
}
.planListArea .planListWrap .listWrap .planList01 li a p * {
  font-family: "EB garamond", YuMincho, "Yu Mincho", A1 Mincho, "Hiragino Mincho ProN", serif;
}
.planListArea .planListWrap .listWrap .planList01 li a p strong {
  font-weight: normal;
}
.planListArea .planListWrap .listWrap .planList01 li a p.type {
  font-size: var(--vw-size24);
  line-height: 1;
  margin-bottom: clamp(20px, 11.0565110565%, 45px);
}
.planListArea .planListWrap .listWrap .planList01 li a p.type strong {
  font-size: 200%;
  line-height: 1;
  margin-right: 5px;
}
.planListArea .planListWrap .listWrap .planList01 li a p.type strong span {
  font-family: YuMincho, "Yu Mincho", A1 Mincho, "Hiragino Mincho ProN", serif;
}
.planListArea .planListWrap .listWrap .planList01 li a p.madori {
  font-size: var(--vw-size24);
  line-height: 1;
  margin-bottom: 5px;
}
.planListArea .planListWrap .listWrap .planList01 li a p.madori strong {
  font-size: 166%;
  line-height: 1;
}
.planListArea .planListWrap .listWrap .planList01 li a p.madori small {
  font-size: var(--vw-size14);
}
.planListArea .planListWrap .listWrap .planList01 li a p.spec {
  font-size: var(--vw-size20);
  line-height: 1.2;
  margin-bottom: clamp(25px, 11.7936117936%, 48px);
}
.planListArea .planListWrap .listWrap .planList01 li a p.spec span {
  font-size: 80%;
  display: inline-block;
  margin-right: 5px;
}
.planListArea .planListWrap .listWrap .planList01 li a p.spec strong {
  font-size: 200%;
  line-height: 1;
}
.planListArea .planListWrap .listWrap .planList01 li a p.view {
  color: var(--color-green);
  font-size: var(--vw-size16);
  text-align: right;
  margin-top: auto;
  line-height: 1;
}
.planListArea .planListWrap .listWrap .planList01 li a p.view span {
  display: inline-block;
  position: relative;
  padding-left: 8px;
}
.planListArea .planListWrap .listWrap .planList01 li a p.view span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-green);
  position: absolute;
  top: calc(50% - 2px);
  right: 100%;
  -webkit-transition: width 0.4s ease 0s;
  transition: width 0.4s ease 0s;
}

.planDetailArea {
  padding: 40px 0 clamp(120px, 11.7647058824%, 160px);
}
.planDetailArea .detailWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 767px) {
  .planDetailArea .detailWrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.planDetailArea .detailWrap .txtWrap {
  width: 38.6029411765%;
  position: relative;
  padding-top: clamp(120px, 11.7647058824%, 160px);
}
@media (max-width: 767px) {
  .planDetailArea .detailWrap .txtWrap {
    width: 100%;
  }
}
.planDetailArea .detailWrap .txtWrap .txtInner {
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
}
.planDetailArea .detailWrap .txtWrap .tag {
  margin-bottom: clamp(20px, 7.619047619%, 40px);
}
.planDetailArea .detailWrap .txtWrap .tag p {
  display: inline-block;
  color: #fff;
  font-size: var(--vw-size16);
  line-height: 1;
  padding: clamp(8px, 2.8571428571%, 15px) clamp(10px, 3.8095238095%, 20px);
}
.planDetailArea .detailWrap .txtWrap .tag p.tag01 {
  background: var(--color-green);
}
.planDetailArea .detailWrap .txtWrap p {
  font-family: "EB garamond", YuMincho, "Yu Mincho", A1 Mincho, "Hiragino Mincho ProN", serif;
}
.planDetailArea .detailWrap .txtWrap p * {
  font-family: "EB garamond", YuMincho, "Yu Mincho", A1 Mincho, "Hiragino Mincho ProN", serif;
}
.planDetailArea .detailWrap .txtWrap p strong {
  font-weight: normal;
}
.planDetailArea .detailWrap .txtWrap p.type {
  font-size: var(--vw-size24);
  line-height: 1;
  margin-bottom: clamp(20px, 7.619047619%, 40px);
  border-bottom: solid 1px rgba(0, 0, 0, 0.5);
  padding-bottom: clamp(4px, 1.5238095238%, 8px);
}
.planDetailArea .detailWrap .txtWrap p.type strong {
  font-size: 200%;
  line-height: 1;
  margin-right: 5px;
}
.planDetailArea .detailWrap .txtWrap p.type strong span {
  font-family: YuMincho, "Yu Mincho", A1 Mincho, "Hiragino Mincho ProN", serif;
}
.planDetailArea .detailWrap .txtWrap p.madori {
  font-size: var(--vw-size32);
  line-height: 1;
  margin-bottom: clamp(10px, 3.0476190476%, 16px);
}
.planDetailArea .detailWrap .txtWrap p.madori strong {
  font-size: 200%;
  line-height: 1;
}
.planDetailArea .detailWrap .txtWrap p.madori small {
  font-size: var(--vw-size20);
}
.planDetailArea .detailWrap .txtWrap p.spec01 {
  font-size: var(--vw-size20);
  line-height: 1.2;
  margin-bottom: clamp(10px, 4.5714285714%, 24px);
}
.planDetailArea .detailWrap .txtWrap p.spec01 span {
  font-size: 80%;
  display: inline-block;
  margin-right: 5px;
}
.planDetailArea .detailWrap .txtWrap p.spec01 strong {
  font-size: 200%;
  line-height: 1;
}
.planDetailArea .detailWrap .txtWrap p.spec02 {
  font-size: var(--vw-size20);
  line-height: 1.2;
}
.planDetailArea .detailWrap .txtWrap p.spec02 span {
  font-size: 70%;
  display: inline-block;
  margin-right: 5px;
}
.planDetailArea .detailWrap .txtWrap p.spec02 strong {
  font-size: 140%;
  line-height: 1;
}
.planDetailArea .detailWrap .imgWrap {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.planDetailArea .planNote {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px 20px;
}
.planDetailArea .planNote > span {
  display: inline-block;
  line-height: 1;
  font-size: var(--vw-size12);
}
.planDetailArea .planNote > span span {
  width: 30px;
  height: 15px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}
@media (max-width: 767px) {
  .planDetailArea .planNote > span span {
    width: 25px;
    height: 13px;
    margin-right: 5px;
  }
}
.planDetailArea .planNote > span span.storage {
  background: #d4cab7;
}
.planDetailArea .planNote > span span.heating {
  background: #eeeae3;
}