@charset "utf-8";
picture{display:block; position: relative; font-size:0;}
.mv_bg picture{display:revert;}

.mv {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100lvh;
}
.mv_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  margin: auto;
}
.mv_bg img {
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}
.mv_bg .caption {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 5px;
  color: #fff;
  line-height: 1;
}
.mv_copy {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  font-size:62px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color:#fff;
  font-family: var(--fontEn);
}

@media screen and (max-width:750px) {
  .mv {
    height: 0;
    padding-bottom: 168.8%;
  }
  .mv_copy {
    font-size: calc((( 80 / var(--media_sp)) * 100) * var(--vw));
  }
}

.intro_wrap{
  width:100%;
  text-align: center;
  background-image: url("../img/plan/bg_intro_pc.webp");
  background-size: cover;
  background-repeat: no-repeat;
  padding:165px 0 140px;
}
.inner_wrap{
  width:95%;
  max-width: 1280px;
  margin:0 auto;
}
.intro_copy_ttl{
  font-size:30px;
  line-height: 1;
  margin-bottom:52px;
  font-family: var(--fontJp);
  letter-spacing: 0.5em;
}
.intro_copy_ttl .ls{
  letter-spacing: 0.1em;
}
.intro_copy_ttl sup{
  font-size: 45%;
  letter-spacing: 0.02em;
  position: relative;
  left: -0.5em;
  top: -1em;
}
.intro_copy_txt{
  font-size:17px;
  line-height: 3;
  margin-bottom:91px;
  letter-spacing: 0.35em;
}
.intro_img_wrap{
  display: flex;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}
.spacer.left {
  flex: 273 1 0;
  min-width: 0;
}
.spacer.right {
  flex: 106 1 0;
  min-width: 0;
}
.intro_img{
  flex: 0 1 auto;
  width: 901px;
  max-width: 100%;
}
.intro_img .cap{
  position: absolute;
  bottom: -9px;
  right: 18.48%;
  font-size:12px;
}

@media screen and (max-width:750px) {
  .intro_wrap{
    background-image: url("../img/plan/bg_intro_sp.webp");
    background-size: cover;
    background-repeat: no-repeat;
    padding:calc((( 142 / var(--media_sp)) * 100) * var(--vw)) 0 calc((( 188 / var(--media_sp)) * 100) * var(--vw));
  }
  .inner_wrap{
    width:89.333%;
    max-width: inherit;
  }
  .intro_wrap .inner_wrap{
    width:100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .intro_copy_ttl{
    font-size: calc((( 46 / var(--media_sp)) * 100) * var(--vw));
    line-height: 2.217;
    margin:0 auto calc((( 45 / var(--media_sp)) * 100) * var(--vw));
    writing-mode: vertical-rl;
    font-feature-settings: initial;
    text-align: left;
    white-space: nowrap;
  }
  .intro_copy_ttl .ls{
    position: relative;
    line-height: 1;
  }
  .intro_copy_ttl sup{
    left: auto;
    right:-10%;
    top: 4%;
    writing-mode: initial;
    vertical-align: super;
    line-height: 1;
    margin-top:-4%;
  }
  .intro_copy_txt{
    width:100%;
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
    line-height: 3;
    letter-spacing: 0.3em;
    margin-bottom: calc((( 80 / var(--media_sp)) * 100) * var(--vw));
  }
  .intro_img_wrap{
    display: block;
    max-width: inherit;
  }
  .spacer.left,
  .spacer.right{
    display: none;
  }
  .intro_img{
    width: 93.2%;
    max-width: inherit;
    margin:0 auto 0 5.333%;
  }
  .intro_img .cap{
    bottom: -3.6vw;
    right: 4.667%;
    font-size:2.667vw;
  }
}

.floor_wrap{
  width:100%;
  text-align: center;
  background-color:#585348;
  padding:190px 0;
}
.floor_wrap.p_floor_wrap{
  background-image: url("../img/plan/bg_pf_pc.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
h2{
  font-size:40px;
  font-family: var(--fontEn);
  line-height: 1;
  color:#dbc08f;
  margin-bottom:88px;
  letter-spacing: 0.1em;
}
h2 .jp{
  display:block;
  font-size:19px;
  color:#dbc08f;
  margin-top:9px;
  font-family: var(--fontJp);
  letter-spacing: 0.02em;
}
.r_floor_wrap h2,
.r_floor_wrap h2 .jp{
  color:#fff;
}
.plan_wrap{
  width:100%;
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:40px;
}
.plan_box{
  width:620px;
}
.plan_box > a{
  display:block;
  background-color:#fff;
  color:#fff;
  position: relative;
}
.plan_box.soon > a{
  pointer-events: none;
}
.plan_box.limited > a::before{
  content:'';
  display:inline-block;
  position: absolute;
  top:-10px;
  right:-10px;
  width:60px;
  height:60px;
  background-image: url("../img/plan/wap_limited.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.plan_box.update > a::after{
  content:'UPDATE';
  display: block;
  position: absolute;
  padding: 15px;
  background-color: #715e2f;
  top:0;
  left:0;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #fff;
}
.r_floor_wrap .plan_box{
  width:400px;
}
.plan_type{
  background-color:#9d854f;
  padding:29px 0 27px;
}
.r_floor_wrap .plan_type{
  background-color:#312d24;
}
.plan_type *{
  line-height:1;
  font-family: var(--fontEn);
  letter-spacing: 0.12em;
}
.plan_type .type{
  font-size:25px;
  margin-bottom:22px;
}
.plan_type .type strong{
  font-weight: normal;
  font-size:2em;
  margin-right:20px;
}
.r_floor_wrap .plan_type .type strong{
  margin-right:7px;
}
.plan_type .ldk{
  font-size:32px;
  margin-bottom: 20px;
}
.plan_type .ldk .sml{
  font-size:22px;
  letter-spacing: 0.06em;
}
.plan_type .area{
  display:flex;
  align-items: center;
  justify-content: center;
  font-size:32px;
  letter-spacing: 0.1em;
}
.plan_type .area span{
  font-size: 11px;
  line-height: 1;
  font-family: var(--fontJp);
  position: relative;
  top:-3px;
  margin-right: 5px;
}
.plan_area{
  position: relative;
  image-rendering: auto;
  image-rendering: smooth;
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
}
.soon .plan_area::before{
  content:'';
  display:block;
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  background-color:rgba(157,133,79,.3);
}
.p_floor_wrap .plan_box .plan_area{
  padding-bottom:101.129%;
}
.r_floor_wrap .plan_box .plan_area{
  padding-bottom:122.25%;
}
.type_m .plan_area{
  background-image: url("../img/plan/fig_m_thum.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
.type_j .plan_area{
  background-image: url("../img/plan/fig_j_thum.webp?v=25112700");
  background-size: cover;
  background-repeat: no-repeat;
}
.type_e .plan_area{
  background-image: url("../img/plan/fig_e_thum.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
.type_g .plan_area{
  background-image: url("../img/plan/fig_g_thum.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
.type_j.soon .plan_area{
  background-image: url("../img/plan/fig_j_thum_soon.webp");
}
.type_e.soon .plan_area{
  background-image: url("../img/plan/fig_e_thum_soon.webp");
}
.type_g.soon .plan_area{
  background-image: url("../img/plan/fig_g_thum_soon.webp");
}
.plan_area .plan_btn_wrap{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:100%;
  height:auto;
  box-sizing: border-box;
}
.plan_btn_wrap > a{
  pointer-events: none;
}
.plan_area .plan_btn_wrap .plna_copy_txt{
  font-size:30px;
  line-height: 1;
  margin-bottom:0;
  color:#000;
  letter-spacing: 0.12em;
}
.entry_btn-wrap {
  margin-top: 30px;
  margin-inline: auto;
  width: fit-content;
}
.entry_btn {
  position: relative;
  background: linear-gradient(to right, #785d2f, #b39a6c, #785d2f);
  display: block;
  width: 300px;
  height: 70px;
  line-height: 70px;
  font-size: 21px;
  letter-spacing: 0.12em;
  color: #fff;
  text-align: center;
}
.entry_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  translate: 0 -50%;
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transform-origin: center;
}

@media screen and (max-width:750px) {
  .floor_wrap{
    padding:calc((( 140 / var(--media_sp)) * 100) * var(--vw)) 0 calc((( 190 / var(--media_sp)) * 100) * var(--vw));
  }
  .floor_wrap.p_floor_wrap{
    background-image: url("../img/plan/bg_pf_sp.webp");
    background-size: cover;
    background-repeat: no-repeat;
  }
  h2{
    font-size: calc((( 55.76 / var(--media_sp)) * 100) * var(--vw));
    margin-bottom: calc((( 90 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.1em;
  }
  h2 .jp{
    font-size: calc((( 26.48 / var(--media_sp)) * 100) * var(--vw));
    margin-top: calc((( 15 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.02em;
  }
  .plan_wrap{
    display:block;
  }
  .plan_box{
    width:100%;
    margin:0 auto;
  }
  .plan_box:nth-child(n+2){
    margin-top: calc((( 40 / var(--media_sp)) * 100) * var(--vw));
  }
  .plan_box.limited > a::before{
    top: calc((( -10 / var(--media_sp)) * 100) * var(--vw));
    right: calc((( -14 / var(--media_sp)) * 100) * var(--vw));
    width:10.8vw;
    height:10.8vw;
  }
  .plan_box.update > a::after{
    padding: calc((( 21 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
  }
  .r_floor_wrap .plan_box{
    width:65.672%;
  }
  .plan_type{
    padding:calc((( 34 / var(--media_sp)) * 100) * var(--vw)) 0;
  }
  .plan_type .type{
    font-size: calc((( 26.93 / var(--media_sp)) * 100) * var(--vw));
    margin-bottom: calc((( 23 / var(--media_sp)) * 100) * var(--vw));
  }
  .plan_type .type strong{
    margin-right: calc((( 20 / var(--media_sp)) * 100) * var(--vw));
  }
  .r_floor_wrap .plan_type .type strong{
    margin-right: calc((( 7 / var(--media_sp)) * 100) * var(--vw));
  }
  .plan_type .ldk{
    font-size: calc((( 36 / var(--media_sp)) * 100) * var(--vw));
    margin-bottom: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
  }
  .plan_type .ldk .sml{
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.06em;
  }
  .plan_type .area{
    font-size: calc((( 34.48 / var(--media_sp)) * 100) * var(--vw));
    letter-spacing: 0.1em;
  }
  .plan_type .area span{
    font-size: calc((( 11.86 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1.089;
    top: calc((( -3 / var(--media_sp)) * 100) * var(--vw));
    margin-right: calc((( 5 / var(--media_sp)) * 100) * var(--vw));
  }
  .plan_area .plan_btn_wrap .plna_copy_txt{
    font-size: calc((( 32 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_btn-wrap {
    margin-top: calc((( 35 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_btn {
    width:  calc((( 323 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 76 / var(--media_sp)) * 100) * var(--vw));
    line-height: calc((( 76 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 24 / var(--media_sp)) * 100) * var(--vw));
  }
  .r_floor_wrap .entry_btn {
    width:  calc((( 330 / var(--media_sp)) * 100) * var(--vw));
  }
  .entry_btn::after {
    top: 50%;
    right: calc((( 32 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 11 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 11 / var(--media_sp)) * 100) * var(--vw));
    border-top: calc((( 2 / var(--media_sp)) * 100) * var(--vw)) solid #fff;
    border-right: calc((( 2 / var(--media_sp)) * 100) * var(--vw)) solid #fff;
  }
}

.outro_wrap{
  padding:100px 0 110px;
  text-align: center;
}
.outro_btn-wrap {
  margin-inline: auto;
  width: fit-content;
}
.outro_btn {
  position: relative;
  background-color: #595242;
  display: block;
  width: 400px;
  height: 70px;
  line-height: 70px;
  font-size: 21px;
  letter-spacing: 0.12em;
  color: #fff;
  text-align: center;
}
.outro_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 30px;
  translate: 0 -50%;
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(225deg);
  transform-origin: center;
}

@media screen and (max-width:750px) {
  .outro_wrap{
    padding: calc((( 90 / var(--media_sp)) * 100) * var(--vw)) 0;
  }
  .outro_btn {
    width: calc((( 571 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 101 / var(--media_sp)) * 100) * var(--vw));
    line-height: calc((( 101 / var(--media_sp)) * 100) * var(--vw));
    font-size: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
  }
  .outro_btn::after {
    top: 50%;
    left: calc((( 30 / var(--media_sp)) * 100) * var(--vw));
    width: calc((( 13 / var(--media_sp)) * 100) * var(--vw));
    height: calc((( 13 / var(--media_sp)) * 100) * var(--vw));
    border-top: calc((( 2 / var(--media_sp)) * 100) * var(--vw)) solid #fff;
    border-right: calc((( 2 / var(--media_sp)) * 100) * var(--vw)) solid #fff;
  }
}

/* zeh */
.zeh_blk {
  padding-block: 90px;
  background-color: #efefef;
}
.zeh-label {
  margin-inline: auto;
  width: 400px;
}
.zeh_blk .caption {
  margin-top: 4px;
  margin-inline: auto;
  width: 400px;
  line-height: 1.333;
}
@media screen and (max-width:750px) {
  .zeh_blk {
    padding-block: calc((( 90 / var(--media_sp)) * 100) * var(--vw));
  }
  .zeh-label {
    width: calc((( 570 / var(--media_sp)) * 100) * var(--vw));
  }
  .zeh_blk .caption {
    margin-top: calc((( 10 / var(--media_sp)) * 100) * var(--vw));
    margin-inline: auto;
    width: calc((( 570 / var(--media_sp)) * 100) * var(--vw));
    line-height: 1.2;
  }
}
/* zeh */

.notes_blk {
  background-color: #fff;
}
.notes_blk .notes{
  color:#121212;
}
.notes_blk .notes .img {
  width:432px;
  display:block;
  margin-bottom:8px;
}
.notes_blk .notes span {
  color:#000;
}

@media screen and (max-width:750px) {
  .notes_blk .notes .img {
    width: 100%;
    margin-bottom: calc((( 10 / var(--media_sp)) * 100) * var(--vw));
  }
}


.cv_btn_wrap a.entry_btn::after {
  content: none;
}