.@charset "UTF-8";


.bgWrap{
  padding-bottom: 140px;
  background: var(--color-white);
}

/* for sp*/
@media screen and (max-width: 767px) {
  .bgWrap{
    padding-bottom: 70px;
  }
}


/*floor
--------------------------------- */
.floor{
  margin: 150px 0 0 0;
}
.floor ul{
  display: flex;
  justify-content: space-between;
}
.floor li{
  position: relative;
  width: calc((320 / var(--cont-width-nv-pc)) * 100%);
  color: #fff;
}
.floor li div{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 25px 0;
}
.floor li div::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #5a5a5a;
  mix-blend-mode: multiply;
}
.floor li div p{
  position: relative;
  padding: 0 0 0 0.05em;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.0;
}
.floor li div .fEn{
  font-size: clamp(calc(35px * var(--font-markup)), calc(35vw / var(--vw-pc)), 35px);/*35 / 30*/
}
.floor li div .fEn + p{
  margin: 10px 0 0 0;
}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 834px) and (orientation:portrait) {

}

/* for sp*/
@media screen and (max-width: 767px) {
  .floor{
    margin-top: 80px;
  }
  .floor ul{
    display: block;
    width: 85%;
    margin: 0 auto;
  }
  .floor li{
    width: 100%;
  }
  .floor li + li{
    margin-top: 20px;
  }
  .floor li div{
    padding: 20px 0;
  }
  .floor li div::before{}
  .floor li div p{}
  .floor li div .fEn{
    font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-sp)), 30px);/*35 / 30*/
  }
  .floor li div .fEn + p{}
}

/*ceiling
--------------------------------- */
.ceiling{
  margin: 150px 0;
}
.ceiling figure{
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 834px) and (orientation:portrait) {
  /*縦向きのみの記述 --- iPad Pro12.9はPC表示*/
}

/* for sp*/
@media screen and (max-width: 767px) {
  .ceiling{
    margin: 80px 0;
  }
  .ceiling figure{}
}


/*technology
--------------------------------- */
.technology{
  position: relative;
  padding: 100px 0 130px 0;
  background: url("../img/plan/bg_tech_pc.jpg") no-repeat center center;
  background-size: cover;
  color: var(--color-white);
}
.technology::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #333;
  mix-blend-mode: multiply;
}
.technology ul{
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 850px;
  margin: 0 auto;
}
.technology ul li{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((250 / 850) * 100%);
  min-height: 250px;
  border: 1px solid var(--color-white);
  font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-pc)), 22px);/*22 / 18*/
  text-align: center;
}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 834px) and (orientation:portrait) {
  /*縦向きのみの記述 --- iPad Pro12.9はPC表示*/
}

/* for sp*/
@media screen and (max-width: 767px) {
  .technology{
    padding: 50px 0 60 0;
    background-image: url("../img/plan/bg_tech_sp.jpg");
  }
  .technology::before{}
  .technology ul{
    display: block;
  }
  .technology ul li{
    display: block;
    width: 100%;
    min-height: initial;
    padding: 20px 10px;
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*22 / 18*/
  }
}


/*pickup
--------------------------------- */
.pickup{
  padding: 150px 0;
}
.pickup .ttlEn{
  letter-spacing: 0.05em;
}
.pickup .puH{
  padding: 45px 0;
  background: #c8c3b7;
  color: var(--color-white);
}
.pickup .puH h5{
  font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*30 / 24*/
  line-height: 1.0;
  letter-spacing: 0.05em;
}
.pickup .puH h5 + p{
  margin: 15px 0 45px 0;
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-pc)), 14px);/*14 / 13*/
  line-height: 1.0;
}
.pickup .puH .data{
  display: flex;
  justify-content: center;
  text-align: center;
}
.pickup .puH .data .num{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  font-size: clamp(calc(40px * var(--font-markup)), calc(40vw / var(--vw-pc)), 40px);/*40 / 32*/
  line-height: 1.0;
  text-align: center;
}
.pickup .puH .data .num + div{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0 0 0 25px;
}
.pickup .puH .data .layout{
  width: 100%;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*20 / 16*/
  line-height: 1.0;
  text-align: left;
  letter-spacing: 0.1em;
}
.pickup .puH .data .layout span{
  font-size: calc((23 / 20) * 100%);
}
.pickup .puH .data .area{
  display: flex;
  width: 100%;
}
.pickup .puH .data .area {
  margin: 10px 0 0 0;
}
.pickup .puH .data .area li{
  display: flex;
  align-items: baseline;
  font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*30 / 24*/
  line-height: 1.0;
  text-align: left;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}
.pickup .puH .data .area li + li{
  margin: 0 0 0 1em;
}
.pickup .puH .data .area li span{
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-pc)), 13px);/*13 / 12*/
  line-height: 1.0;
}

.pickup .puFig{
  margin: 120px 0 0 0;
}


.legWrap{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 70px 0 0 0;
  text-align: right;
}
.legWrap li{
	font-size: 10px;/*10*/
	margin: 0 0 0 10px;
	text-align: left;
	line-height: 1.0;
}
.legWrap li.yuka::before{
  content: "";
  display: inline-block;
  width: 35px;
  height: 12px;
  background: #f3dfcc;
  margin: 0 2px 0 0;
}

.pickup .puMerit{
  display: flex;
  flex-wrap: wrap;
  margin: 25px 0 0 0;
  background: var(--color-white);
  border: 1px solid var(--color-key01);
}
.pickup .puMerit li{
  display: flex;
  width: calc(100% / 3);
  padding: 25px 10px;
  justify-content: center;
  color:  var(--color-key01);
  text-align: center;
  line-height: 1.4;
  border-left: 1px solid var(--color-key01);
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*16 / 15*/
}
.pickup .puMerit li:nth-of-type(3n+1){
  border-left: none;
}
.pickup .puMerit li:nth-of-type(n+4){
  border-top: 1px solid var(--color-key01);
}

/* for sp*/
@media screen and (max-width: 767px) {
  .pickup{
    padding: 80px 0;
  }
  .pickup .ttlEn{}
  .pickup .puH{
    padding: 30px 0;
    background: #c8c3b7;
    color: var(--color-white);
  }
  .pickup .puH h5{
    font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-sp)), 24px);/*30 / 24*/
  }
  .pickup .puH h5 + p{
    margin: 10px 0 30px 0;
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*14 / 13*/
  }
  .pickup .puH .data{
    display: block;
  }
  .pickup .puH .data .num{
    width: 40%;
    margin: 0 auto;
    padding: 10px 0;
    font-size: clamp(calc(32px * var(--font-markup)), calc(32vw / var(--vw-sp)), 32px);/*40 / 32*/
  }
  .pickup .puH .data .num + div{
    display: block;
    margin: 20px 0 0 0;
  }
  .pickup .puH .data .layout{
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*20 / 20*/
    text-align: center;
  }
  .pickup .puH .data .layout span{}
  .pickup .puH .data .area {
    justify-content: center;
    margin: 20px 0 0 0;
  }
  .pickup .puH .data .area li{
    display: block;
    margin: 0 0.5em;
    font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-sp)), 30px);/*30 / 30*/
    letter-spacing: normal;
    text-align: left;
  }
  .pickup .puH .data .area li + li{
    margin: 0 0.5em;
  }
  .pickup .puH .data .area li span{
    display: block;
    margin: 0 0 10px 0;
    font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-sp)), 12px);/*13 / 12*/
  }

  .pickup .puFig{
    margin-top: 40px;
  }


  .legWrap{
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 20px;
    text-align: left;
  }
  .legWrap li{
    margin: 10px 0 0 0;
  }
  .legWrap li.yuka::before{
    width: 20px;
    height: 10px;
  }

  .pickup .puMerit{
    display: block;
  }
  .pickup .puMerit li{
    display: block;
    width: 100%;
    padding: 20px 10px;
    border-left: none;
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*16 / 15*/
  }
  .pickup .puMerit li + li,
  .pickup .puMerit li:nth-of-type(n+4){
    border-top: 1px solid var(--color-key01);
  }
}

/*cvWrap
--------------------------------- */
.cvWrap{
  margin: 0 0 120px 0;
  text-align: center;
}
.cvWrap .btn{
  width: 100%;
  max-width: 600px;
  height: 120px;
  margin: 30px auto 0 auto;
}
.cvWrap .btn a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-left: 0.5em;
  background: var(--color-key01);
  color: var(--color-white);
  font-size: clamp(calc(23px * var(--font-markup)), calc(23vw / var(--vw-pc)), 23px);/*23 / 18*/
  letter-spacing: 0.5em;
  text-decoration: none;
}
.cvWrap .btn a::after{
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  display: block;
  width: 30px;
  height: 7px;
  background: url("../img/cmn/ico_arrow_wh.svg") no-repeat right center;
  background-size: cover;
  transform: translate(0,-50%);
  transition: var(--transition-duration01);
}
.cvWrap .btn a:hover{
  background: var(--color-def01);
}
.cvWrap .btn a:hover::after{
  transform: translate(5px,-50%);
}

/* for sp*/
@media screen and (max-width: 767px) {
  .cvWrap{
    margin-bottom: 60px;
  }
  .cvWrap .btn{
    height: 100px;
    margin-top: 20px;
  }
  .cvWrap .btn a{
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*23 / 18*/
  }
  .cvWrap .btn a::after{
    right: 10px;
    width: 24px;
    height: 6px;
  }
  .cvWrap .btn a:hover{}
  .cvWrap .btn a:hover::after{}
}

/*planBtns
--------------------------------- */
/*baseに移動*/




/*planDtl
--------------------------------- */
.planDtl .planBtnsWrap{
  padding: 100px 0;
  background: #f6f4ee;
}
.planDtl .planBtnsWrap > .fEn{
  margin: 0 0 70px 0;
  font-size: 1.8rem;/*18 / 16*/
  text-align: center;
  line-height: 1.0;
  letter-spacing: 0.5em;
}
.planDtl .planBtns .btn > div .unitH{
  padding: 0;
}
.planDtl .planBtns .btn .data{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  background: #fff;
  color: #202124;
}
.planDtl .planBtns .btn .plaNo{
  width: 50%;
  margin-bottom: 0;
  text-align: center;
  line-height: 1.0;
  color: #c8a57d;
}
.planDtl .planBtns .btn .plaNo span{
  font-size: 3.0rem;/*30 / 26*/
}
.planDtl .planBtns .btn .plaNo span::before{
  content: "STAGE";
  display: inline-block;
  vertical-align: middle;
  padding-left: 0.4em;
  font-size: 50%;
  letter-spacing: 0.4em;
}
.planDtl .planBtns .btn .plaNo span::after{
  content: none;
  display: block;
}

.planDtl .planBtns .btn .plaTxt{
  margin: 0;
  padding: 40px 0;
  color: #fff;
}


.planDtl .planBtns .btn .data .area{
  width: 50%;
  display: block;
  border-left: 1px solid #202124;
  text-align: center;
}
.planDtl .planBtns .btn .data .area li{
  display:block;
  text-align: center;
  margin: 10px 0;
}
.planDtl .planBtns .btn .data .area li strong{
  display: inline-block;
  vertical-align: middle;
  min-width: 4.0em;
  margin-left: 10px;
  text-align: right;
}

.planDtl .planBtns .btn .data .area li + li::before{
  content: none;
}




.planDtl{}
.planDtl .unitWrap{
  margin-top: 20px;
}
.planDtl .unit{
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.planDtl .unit .unitH{
  position: relative;
}

.planDtl .unit .spec{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.planDtl .unit .plaNo{
  width: 210px;
  text-align: center;
  /*line-height: 1.0;*/
}
.planDtl .unit .plaNo span{
  font-size: 5.0rem;/*50 / 30*/
}
.planDtl .unit .plaNo span::before{
  content: "STAGE";
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.8em;
  margin-right: 10px;
  /*padding-left: 0.4em;*/
  font-size: calc((18 / 50) * 100%);
  letter-spacing: 0.1em;
}

.planDtl .unit .plaNo + .copy04{
  position: relative;
  /*width: calc(100% - 210px);*/
  margin-bottom: 0;
  padding-left: 60px;
  text-align: left;
  letter-spacing: 0.2em;
}
.planDtl .unit .plaNo + .copy04::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 1px;
  height: 180%;
  background: rgba(0,0,0,0.4);
  transform: rotate(25deg) translate(0,-50%);
}


.planDtl .unit .spec .kagu{
  height: 32px;
  line-height: 32px;
  margin-left: auto;
  padding: 0 0.5em 0 calc(0.5em + 0.2em);
  background: #d75035;
  color: #fff;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  text-align: center;
}


.planDtl .unit .data{
  width: 100%;
  margin: 15px auto 0 auto;
  padding: 25px 0 0 0;
  border-top: 1px solid #383c3c;
  text-align: center;
  line-height: 1.0;
}
.planDtl .unit .data .layout{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 30px 0;
  font-size: 3.0rem;/*30 / 24*/
  line-height: 1.0;
}
.planDtl .unit .data .layout span{
  margin: 0 0 0 5px;
  font-size: 50%;
}

.planDtl .unit .data .area{
  margin: 0 0 50px 0;
  padding: 40px 0;
  background: #554738;
  color: #fff;
  text-align: left;
  line-height: 1.0;
}
.planDtl .unit .data .area dl{
  display: flex;
  justify-content: center;
  align-items: baseline;
  line-height: 1.0;
}
.planDtl .unit .data .area dt,
.planDtl .unit .data .area dd{}
.planDtl .unit .data .area dt,
.planDtl .unit .data .area dd span{
  font-size: 1.5rem;/*15 / 13*/
}
.planDtl .unit .data .area dd{
  margin: 0 0 0 5px;
  font-size: 3.0rem;/*30 / 26*/
}
.planDtl .unit .data .area dd i{
  display: none;
}

.planDtl .unit .data .area.type02{
  display: none;
  margin: 0;
}
.planDtl .unit .data .area.type02 dd{
  margin: 0 1em 0 5px;
  font-size: 1.5rem;/*15 / 13*/
}

.planDtl .unit .photo{
  position: relative;
  width: calc((380 / 890) * 100%);
}
.planDtl .unit .photo figcaption{
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-size: 1.0rem;
}


.planDtl .unit .choki{
  position: absolute;
  left: 50%;
  bottom: -25px;
  width: 640px;
  height: 50px;
  background: #fff;
  /*border: 1px solid #465244;*/
  border: 1px solid #202124;
  border-radius: 200px;
  color: #202124;
  font-size: 1.8rem;/*18 / 16*/
  text-align: center;
  line-height: 48px;
  transform: translate(-50%,0);
  
}

.planDtl .unit .fig{
  /*max-width: 980px;*/
  max-width: 1070px;
  margin: 0 auto;
  padding: 80px 0 40px 0;
}
.planDtl .unit .fig .cap{
  max-width: 95%;
  margin: 10px auto 0 auto;
}




.planDtl .planMerit{
  margin-top: 40px;
}
.planDtl .planMerit > .fEn{
  margin: 0 0 30px 0;
  font-size: 1.8rem;/*18 / 16*/
  text-align: center;
  line-height: 1.0;
  letter-spacing: 0.5em;
}
.planDtl .planMerit > div{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.planDtl .planMerit > div::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: calc((100 / 900) * 100%);
  height: 60px;
  background: #fff;
  transform: translate(-50%,-50%);
  z-index: 10;
}
.planDtl .planMerit > div dl{
  width: 50%;
  padding: 20px 5% 50px 5%;
  border-bottom: 1px solid #202124;
}
.planDtl .planMerit > div dl:nth-last-of-type(-n+2){
  padding-top: 50px;
  padding-bottom: 20px;
  border-bottom: none;
}
.planDtl .planMerit > div dl:nth-of-type(2n){
  border-left: 1px solid #202124;
}

.planDtl .planMerit > div dl dt{
  margin: 0 0 20px 0;
  font-size: 2.0rem;/*20 / 18*/
  line-height: 1.0;
  text-align: center;
}
.planDtl .planMerit > div dl dd{
  font-size: 1.4rem;/*14 / 14*/
  line-height: 1.8;
  text-align: left;
}


/*.planDtl */.planPoint{
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
/*.planDtl */.planPoint li{
  position: relative;
  width: calc((430 / 900) * 100%);
  padding: 26px 0 26px 0.2em;
  background: #554738;
  color: #fff;
  font-size: 2.3rem;/*23 / 20*/
  letter-spacing: 0.2em;
  line-height: 1.0;
  text-align: center;
}
/*.planDtl */.planPoint li::before{
  content: none;
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: block;
  width: 100%;
  height: 100%;
  /*border: 1px solid #333;*/
  background: repeating-linear-gradient(
    90deg,     /* 角度の指定 */
    #fff,      /* 色A ... 開始 */
    #fff 3px,  /* 色A ... 終了 */
    #9b7d72 3px,      /* 色B ... 開始 */
    #9b7d72 4px   /* 色B ... 終了 */
    );
  z-index: -1;
}


/*モデルハウス*/
.planDtl .mh{}
.planDtl .mh{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.planDtl .mh li{
  width: calc((430/900)*100%);
}


.planDtl .planBtns .btn{
  background: #fff;
}
.planDtl .planBtns .btn .more{
  margin: 0 auto 20px auto;
  border: 1px solid #4b3e28;
}


/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 834px) and (orientation:portrait) {
  /*縦向きのみの記述 --- iPad Pro12.9はPC表示*/
  
}


/* for sp*/
@media screen and (max-width: 767px) {
  .planDtl .planBtnsWrap{
    padding: 40px 0;
  }
  .planDtl .planBtns{}
  
  .planDtl .planBtns .btn .plaNo{
    width: 45%;
  }
  .planDtl .planBtns .btn .data .area{
    width: 55%;
  }
  
  
  .planDtl .unitWrap{}
  .planDtl .unit{}
  .planDtl .unit .unitH{}

  .planDtl .unit .spec{
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .planDtl .unit .plaNo{
    width: 100%;
    margin: 0 0 20px 0;
    text-align: center;
  }
  .planDtl .unit .plaNo span{
    font-size: 5.0rem;/*50 / 50*/
  }
  .planDtl .unit .plaNo span::before{
    margin-right: 5px;
  }
  
  .planDtl .unit .plaNo + .copy04{
    width: 100%;
    padding-left: 0;
    text-align: center;
    letter-spacing: 0.1em;
  }
  .planDtl .unit .plaNo + .copy04::before{
    content: none;
  }
  
  .planDtl .unit .spec .kagu{
    width: 80%;
    height: 30px;
    margin: 10px auto 0 auto;
    font-size: 1.6rem;
  }

  .planDtl .unit .data{
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
    padding: 15px 0 0 0;
  }
  
  
  .planDtl .unit .data .layout{
    font-size: 2.4rem;/*30 / 24*/
  }
  .planDtl .unit .data .layout span{
    margin: 0 0 0 5px;
    text-align: left;
  }

  .planDtl .unit .data .area{
    margin: 0 0 20px 0;
    padding: 10px 0;
  }
  .planDtl .unit .data .area dl{
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    line-height: 1.0;
  }
  .planDtl .unit .data .area dt,
  .planDtl .unit .data .area dd{
    padding: 5px 0;
  }
  .planDtl .unit .data .area dt,
  .planDtl .unit .data .area dd span{
    font-size: 1.3rem;/*15 / 13*/
  }
  .planDtl .unit .data .area dt{
    width: 30%;
    margin-right: 10px;
    text-align: right;
  }
  .planDtl .unit .data .area dd{
    /*width: calc(100% - 5.5em);*/
    width: 60%;
    margin: 0;
    font-size: 2.6rem;/*30 / 26*/
    text-align: left;
  }
  .planDtl .unit .data .area dd i{
    display: inline-block;
    width: 0.5em;
  }


  .planDtl .unit .data .area.type02{
    margin: 5px 0 0 0;
  }
  .planDtl .unit .data .area.type02 dd{
    font-size: 1.3rem;/*15 / 13*/
  }
  
  .planDtl .unit .photo{
    width: 80%;
    margin: 20px auto 10px auto;
  }

  .planDtl .unit .fig{
    width: 90%;
    padding: 40px 0 20px 0;
    overflow: hidden;
  }
  
  .planDtl .unit .choki{
    width: 85%;
    font-size: 1.6rem;/*18 / 16*/

  }

  
  
  .planDtl .plan26 .unit .fig .scroll,
  .planDtl .plan31 .unit .fig .scroll{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }
  .planDtl .plan23 .unit .fig .scroll,
  .planDtl .plan32 .unit .fig .scroll{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .planDtl .plan23 .unit .fig .scroll > div{
    width: calc((700 / 560) * 100%);
    padding-bottom: 20px;
  }
  .planDtl .plan26 .unit .fig .scroll > div{
    width: calc((950 / 560) * 100%);
    padding-bottom: 20px;
  }
  .planDtl .plan31 .unit .fig .scroll > div{
    width: calc((640 / 560) * 100%);
    padding-bottom: 20px;
  }
  .planDtl .plan32 .unit .fig .scroll > div{
    width: calc((640 / 560) * 100%);
    padding-bottom: 20px;
  }
  .planDtl .plan23 .unit .fig figure,
  .planDtl .plan26 .unit .fig figure,
  .planDtl .plan31 .unit .fig figure,
  .planDtl .plan32 .unit .fig figure{
    width: 100%;
  }
  .planDtl .plan23 .unit .fig img,
  .planDtl .plan26 .unit .fig img,
  .planDtl .plan31 .unit .fig img,
  .planDtl .plan32 .unit .fig img{
    width: 100%;
  }
  
  
  
  

  
  
  .planDtl .planMerit{}
  .planDtl .planMerit > .fEn{
    font-size: 1.6rem;/*18 / 16*/
  }
  .planDtl .planMerit > div{
    display: block;
  }
  .planDtl .planMerit > div::after{
    content: none;
  }
  .planDtl .planMerit > div dl{
    width: 100%;
    padding: 20px 1%;
  }
  .planDtl .planMerit > div dl:nth-of-type(1){
    border-top: 1px solid #202124;
  }
  .planDtl .planMerit > div dl:nth-last-of-type(-n+2){
    padding: 20px 1%;
    border-bottom: 1px solid #202124;
  }
  .planDtl .planMerit > div dl:nth-of-type(2n){
    border-left: none;
  }

  .planDtl .planMerit > div dl dt{
    font-size: 1.8rem;/*20 / 18*/
  }
  .planDtl .planMerit > div dl dd{}



    /*モデルハウス*/
    .planDtl .mh{}
    .planDtl .mh{
      display: block;
    }
    .planDtl .mh li{
      width: 90%;
      margin: 0 auto 20px auto;
    }
    .planDtl .mh li:last-of-type{
      margin-bottom: 0;
    }

}







.planDtl .planPhoto{
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  max-width: 700px;
  margin: 0 auto 30px auto;
}
.planDtl .planPhoto li{
  position: relative;
  width: calc((340 / 700) * 100%);
}
.planDtl .planPhoto li figcaption{
  margin: 5px 0 0 0;
  padding: 0;
  font-size: 1.0rem;
  text-align: right;
}

.planDtl .planPict{
  max-width: 900px;
  margin: 0 auto ;
}


/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 834px) and (orientation:portrait) {
  /*縦向きのみの記述 --- iPad Pro12.9はPC表示*/
  
  .planBtns .btn .data .layout {
    font-size: 3.2rem;
}
  
  

  
  /*.planDtl */.planPoint{
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  /*.planDtl */.planPoint li{
    font-size: 2.0rem;/*23 / 20*/
  }
  
  .planDtl .planPict{
    max-width: 700px;
  }  
  .planDtl .legWrap + .cap{
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* for sp*/
@media screen and (max-width: 767px) {
  .planDtl .planPhoto{
    display: block;
    margin: 20px auto 0 auto;
  }
  .planDtl .planPhoto li{
    width: 100%;
    margin: 10px 0 0 0;
  }
  .planDtl .planPhoto li figcaption{}

  /*.planDtl */.planPoint{
    display: block;
  }
  /*.planDtl */.planPoint li{
    width: 100%;
    margin: 0 0 10px 0;
    padding: 16px 0 18px 0.1em;
    font-size: 2.0rem;/*23 / 20*/
    letter-spacing: 0.1em;
  }
  /*.planDtl */.planPoint li::before{}

  .planDtl .planPict{
    max-width: 900px;
    margin: 0 auto ;
  }

}


/*planHensai
--------------------------------- */
/*.planDtl */.planHensai{
  margin: 0 0 30px 0;
  padding: 30px 5%;
  border: 1px solid #202124;
}
/*.planDtl */.planHensai > div{
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px 0;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #202124;
}
/*.planDtl */.planHensai > div > p{
  width: 95px;
  height: 95px;
  line-height: 95px;
  padding: 0 0 0 0.1em;
  background: #5a5a5a;
  color: #fff;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}
/*.planDtl */.planHensai > div > div{
  width: calc(100% - 140px);
}


/*.planDtl */.planHensai > div > div > div{
  display: flex;
  align-items: center;
}
/*.planDtl */.planHensai > div > div > div p{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 20px;
  border-left: 1px solid rgba(0,0,0,0.4);
  font-size: 5.5rem;/*55 / 40*/
  line-height: 1.0;
}
/*.planDtl */.planHensai > div > div > div p span{
  font-size: calc((18 / 55) * 100%);
  line-height: 1.0;
}
/*.planDtl */.planHensai > div > div > div p span:last-of-type{
  align-self: flex-end;
  font-size: calc((28 / 55) * 100%);
}

/*.planDtl */.planHensai > div > div > div p span br{
  display: none;
}
/*.planDtl */.planHensai > div > div > div p strong{
  margin: 0 0.1em 0 0.3em;
  line-height: 0.8;
}

/*.planDtl */.planHensai > div > div > p{
  margin: 20px 0 0 0;
  font-size: 1.5rem;/*15 / 12*/
  text-align: left;
}

/*.planDtl */.planHensai p.cap{
  line-height: 1.6;
  text-align: left;
}


/* for sp*/
@media screen and (max-width: 767px) {
  /*.planDtl */.planHensai{
    margin: 0 0 20px 0;
    padding: 15px 5%;
  }
  /*.planDtl */.planHensai > div{
    display: block;
  }
  /*.planDtl */.planHensai > div > p{
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
    padding: 10px 0;
    line-height: 1.0;
    font-size: 1.4rem;
  }
  /*.planDtl */.planHensai > div > div{
    width: 100%;
  }


  
  
  
  /*.planDtl */.planHensai > div > div > div{
    margin: 25px 0 20px 0;
  }
  /*.planDtl */.planHensai > div > div > div p{
    padding: 5px 10px;
    font-size: 3.4rem;/*55 / 3.4*/
    line-height: 1.0;
  }
  /*.planDtl */.planHensai > div > div > div p span:nth-of-type(1){
    display: inline-block;
    width: 2.5em;
  }
  /*.planDtl */.planHensai > div > div > div2 p span em{
    display: none;
  }
  /*.planDtl */.planHensai > div > div > div p span:last-of-type{}
  /*.planDtl */.planHensai > div > div > div p span br{
    display: block;
  }
  /*.planDtl */.planHensai > div > div > div p strong{
    margin: 0 2px 0 2px;
    line-height: 0.8;
  }
  

  /*.planDtl */.planHensai > div > div > p{
    margin: 10px 0 0 0;
    font-size: 1.2rem;/*15 / 12*/
  }

  /*.planDtl */.planHensai p.cap{}
}



/*plaList
--------------------------------- */
.plaList{
  padding: 30px 50px;
}

/* for sp*/
@media screen and (max-width: 767px) {
  .plaList{
    padding: 40px 0;
  }
}

/*plaDes
--------------------------------- */
.plaDes{
  padding: 80px 0;
}
.plaDes ul{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.plaDes ul li{
  width: calc((320/1080)*100%);
}
.plaDes ul li:nth-of-type(2){
  width: calc((320/1080)*100% + ((100% - ((320/1080)*100%)*3)/2) + 2px);
  margin: 0 calc((100% - ((320/1080)*100%)*3)/4);
  padding: 0 calc((100% - ((320/1080)*100%)*3)/4);
  border-left: 1px solid #2f4f4f;
  border-right: 1px solid #2f4f4f;
}
.plaDes ul li .copy02{
  margin-bottom: 25px;
  padding: 20px 0;
  background: #2f4f4f;
  color: #fff;
}
.plaDes ul li .copy02 span{
  font-size: 84%;
}
.plaDes ul li .copy02 + p{

}
.plaDes ul li figure{
  margin: 20px 0 0 0;
}
/* for sp*/
@media screen and (max-width: 767px) {
  .plaDes{}
  .plaDes ul{
    display: block;
  }
  .plaDes ul li{
    width: 100%;
    margin: 0 0 30px 0;
    padding: 0;
  }
  .plaDes ul li:nth-of-type(2){
    width: 100%;
    margin: 0 0 30px 0;
    padding: 0;
    border-left: none;
    border-right: none;
  }
  .plaDes ul li:last-of-type{
    margin-bottom: 0;
  }
  .plaDes ul li .copy02{
    margin-bottom: 15px;
    padding: 10px 0;
  }
  .plaDes ul li .copy02 span{}
  .plaDes ul li .copy02 + p{}
  .plaDes ul li figure{
    margin: 15px 0 0 0;
  }
}

/*plaMH
--------------------------------- */
.plaMH{
  padding: 80px 0 60px 0;
}
.plaMH .copy02{
  padding-left: 0.2em;
  letter-spacing: 0.2em;
}
.plaMH ul{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.plaMH ul li{
  width: calc((410/1280)*100%);
}

.btnMH{
  width: 300px;
  margin: 50px auto 0 auto;
  border-radius: 200px;
  text-align: center;
  overflow: hidden;
}
.btnMH a{
  display: block;
  height: 50px;
  line-height: 48px;
  background: #fff;
  font-size: 1.6rem;/*16 / 13*/
  color: #202124;
  text-decoration: none;
}
.btnMH .icoArr.arrR::before{
  background: #202124;
}
.btnMH .icoArr.arrR::after{
  border-color: #202124;
}
.btnMH a:hover{
  background: #202124 !important;
  color: #fff !important;
}
.btnMH .icoArr.arrR:hover::before{
  background: #fff;
}
.btnMH .icoArr.arrR:hover::after{
  border-color: #fff;
}


/* for sp*/
@media screen and (max-width: 767px) {
  .plaMH{
    padding: 40px 0 30px 0;
  }
  .plaMH .copy02{
    padding-left: 0.1em;
    letter-spacing: 0.1em;
  }
  .plaMH ul{
    display: block;
  }
  .plaMH ul li{
    width: 100%;
    margin: 0 0 20px 0;
  }
  .plaMH ul li:last-of-type{
    margin-bottom: 0;
  }
  .btnMH{
    width: 80%;
    max-width: 300px;
    margin-top: 30px;
  }
  .btnMH a{
    height: 40px;
    line-height: 38px;
  }
  .btnMH .icoArr.arrR::before{}
  .btnMH .icoArr.arrR::after{}
  .btnMH a:hover{}
  .btnMH .icoArr.arrR:hover::before{}
  .btnMH .icoArr.arrR:hover::after{}
}

/*plaQua
--------------------------------- */
.plaQua{
  padding: 70px 0;
  background: #e5eef2
}
.plaQua .copy03{
  margin-bottom: 50px;
}
.plaQua li{
  position: relative;
  display: inline-block;
  width: 220px;
  height: 220px;
  margin: 0 10px;
  background: #64afc3;
  border-radius: 100%;
  color: #fff;
  text-align: center;
}
.plaQua li > *:not(.cap){
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  font-size: 2.2rem;
  line-height: 1.4;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.plaQua li:last-of-type > *:not(.cap){
 line-height: 1.3;
}
.plaQua li > * > span{
  display: inline-block;
  font-size: 70%;
  line-height: 2.0;
}
.plaQua li > p.cap{
  position: absolute;
  left: 0;
  bottom: 55px;
  width: 100%;
  font-size: 1.0rem;
}
.plaQua li i{
  font-style: normal;
}
.plaQua li i span{
  font-style: normal;
}
.plaQua li sup{
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  font-size: 1.0rem;
  text-align: center;
}
  
/* for sp*/
@media screen and (max-width: 767px) {
  .plaQua{
    padding: 40px 20px;
  }
  .plaQua .copy03{
    margin-bottom: 20px;
  }
  .plaQua li{
    position: relative;
    display: block;
    width: 38vw;
    height: 38vw;
    margin: 0 0 10px 0;;
  }
  .plaQua li:nth-of-type(2n+1){
    clear: both;
    float: left;
  }
  .plaQua li:nth-of-type(2n){
    float: right;
  }
  .plaQua li > *:not(.cap){
    font-size: 1.8rem;
    line-height: 1.4;
  }

  .plaQua li:last-of-type > *:not(.cap){}
  .plaQua li > * > span{}
  .plaQua li > p.cap{
    bottom: 30px;
  }
  .plaQua li i span{
    font-size: 90%;
    letter-spacing: -0.1em;
  }
  .plaQua li sup{
    bottom: 10px;
  }
  
  .plaQua li:nth-of-type(1) > *:not(.cap),
  .plaQua li:nth-of-type(2) > *:not(.cap){
    top: 42%;
  }
  .plaQua li:nth-of-type(1) > p.cap,
  .plaQua li:nth-of-type(2) > p.cap{
    bottom: auto;
    top: calc(42% + 2.5em);
  }
  .plaQua li:nth-of-type(1) sup,
  .plaQua li:nth-of-type(2) sup{
    bottom: auto;
    top: calc(42% + 2.5em + 2em);
  }
  
  .plaQua li:nth-of-type(3) > *:not(.cap){
    top: 54%;
  }
  
}

/*----------------------------------------------------------- */
/*----------------------------------------------------------- */
/*----------------------------------------------------------- */





/*set aos
--------------------------------- */
/* for sp*/
@media screen and (min-width: 768px) {
  .merit li:nth-of-type(3n+1),
  .merit02 li:nth-of-type(3n+1){
    transition-delay: 0;
  }
  .merit li:nth-of-type(3n+2),
  .merit02 li:nth-of-type(3n+2){
    transition-delay: .1s;
  }
  .merit li:nth-of-type(3n),
  .merit02 li:nth-of-type(3n){
    transition-delay: 0.2s;
  }
  
  .plaList li:nth-of-type(2n+1){
    transition-delay: 0;
  }
  .plaList li:nth-of-type(2n){
    transition-delay: 0.1s;
  }
  
  .plaDes li:nth-of-type(3n+1){
    transition-delay: 0;
  }
  .plaDes li:nth-of-type(3n+2){
    transition-delay: .1s;
  }
  .plaDes li:nth-of-type(3n){
    transition-delay: 0.2s;
  }
  
  .plaQua li:nth-of-type(4n+1){
    transition-delay: 0;
  }
  .plaQua li:nth-of-type(4n+2){
    transition-delay: .1s;
  }
  .plaQua li:nth-of-type(4n+3){
    transition-delay: .2s;
  }
  .plaQua li:nth-of-type(4n){
    transition-delay: 0.3s;
  }
}
/* for sp*/
@media screen and (max-width: 767px) {
}




/*ecoSumai
--------------------------------- */
.highlight {
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 20px; /* 線の太さ */
  text-decoration-color: rgba(255, 255, 0, 0.8); /* 線の色 */
  text-underline-offset: -10px; /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

.ecoSumai{
  padding: 120px 0 70px 0;
  background: #f8f4e6;
}
.ecoSumai > div{
  max-width: 800px;
  margin: 0 auto;
}

/*es01*/
.ecoSumai .es01{
  position: relative;
  margin: 0 0 80px 0;
  padding: 0 0 50px 0;
  background: #fff;
  border: 1px solid #202124;
}
.ecoSumai .es01::before{
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: block;
  width: 100%;
  height: 100%;
  border-right: 1px solid #202124;
  border-bottom: 1px solid #202124;
}
.ecoSumai .es01::after{
  content: "";
  position: absolute;
  left: -50px;
  bottom: -20px;
  display: block;
  width: 200px;
  height: 204px;
  background: url("../img/plan/es01.png") no-repeat center center;
  background-size: cover;
}
.ecoSumai .es01 h2{
  width: 450px;
  height: 70px;
  line-height: 68px;
  margin: -35px auto 40px auto;
  background: #ffff00;
  border: 1px solid #202124;
  border-radius: 200px;
  text-align: center;
  font-size: 2.8rem;
  font-weight: 400;
}
.ecoSumai .es01 .t01{
  margin: 0 0 10px 0;
  padding: 0 0 0 0.1em;
  text-align: center;
  font-size: 2.3rem;
  letter-spacing: 0.1em;
}

.ecoSumai .es01 .t02{
  margin: 0 0 10px 0;
  text-align: center;
  line-height: 1.0;
}
.ecoSumai .es01 .t02 span{
  vertical-align: baseline;
}
.ecoSumai .es01 .t02 span:nth-of-type(1){
  font-size: 11.5rem;
}
.ecoSumai .es01 .t02 span:nth-of-type(2){
  font-size: 5.5rem;
}
.ecoSumai .es01 .t02 span:nth-of-type(3){
  font-size: 3.0rem;
}
.ecoSumai .es01 .lead03{
  margin: 40px 0 0 0;
}


/*es02*/
.ecoSumai .es02{
  position: relative;
  height: 175px;
  margin: 0 auto 100px auto;
  padding: 10px 0;
}
.ecoSumai .es02::before,
.ecoSumai .es02::after{
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 13px;
  height: 100%;
  background-position: center center;
  background-size: cover;
}
.ecoSumai .es02::before{
  left: 0;
  background-image:url("../img/plan/frame_l.png");
}
.ecoSumai .es02::after{
  right: 0;
  background-image:url("../img/plan/frame_r.png");
}

.ecoSumai .es02 > *{
  position: relative;
  width: calc((700/800)*100%);
  margin-left: auto;
  margin-right: auto;
}
.ecoSumai .es02 > .copy02{
  margin-bottom: 15px;
}



/*es03*/
.ecoSumai .es03{}
.ecoSumai .es03 h2{
  width: 450px;
  height: 70px;
  line-height: 68px;
  margin: 0 auto 70px auto;
  background: #fff;
  border: 1px solid #202124;
  border-radius: 200px;
  text-align: center;
  font-size: 2.3rem;
  font-weight: 400;
}
.ecoSumai .es03 h2 span{
  vertical-align: baseline;
  font-size: 1.8rem;
}
.ecoSumai .es03 section:not(:last-of-type){
  padding: 0 0 70px 0;
}
.ecoSumai .es03 h3{
  position: relative;
  margin: 0 0 50px 0;
}
.ecoSumai .es03 h3 span{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  line-height: 90px;
  margin: 0 auto;
  background: #504b46;
  border-radius: 50%;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 400;
  text-align: center;
}
.ecoSumai .es03 h3::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 100%;
  height: 1px;
  background: #504b46;
}


.ecoSumai .es03 section:first-of-type{
  position: relative;
}
.ecoSumai .es03 section:first-of-type::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: calc((220/800)*100%);
  height: 100%;
  background: url("../img/plan/es02.png") no-repeat center bottom;
  background-size: 100% auto;
}
.ecoSumai .es03 section:first-of-type p:nth-of-type(2){
  margin: 25px 0;
}


.ecoSumai .es03 section:nth-of-type(2){}
.ecoSumai .es03 section:nth-of-type(2) p:nth-of-type(2){
  margin: 25px 0;
  text-align: center;
  line-height: 1.0;
}
.ecoSumai .es03 section:nth-of-type(2) p:nth-of-type(2) span{
  vertical-align: baseline;
}
.ecoSumai .es03 section:nth-of-type(2) p:nth-of-type(2) span:nth-of-type(1){
  font-size: 11.5rem;
}
.ecoSumai .es03 section:nth-of-type(2) p:nth-of-type(2) span:nth-of-type(2){
  font-size: 5.5rem;
}
.ecoSumai .es03 section:nth-of-type(2) p:nth-of-type(2) span:nth-of-type(3){
  font-size: 3.0rem;
}

.ecoSumai .es03 section li{
  position: relative;
  margin: 45px 0 0 0;
  padding-left: 36px;
  background: url("../img/plan/es03.png") no-repeat left top;
  background-size: 24px auto;
  text-align: left;
}

.ecoSumai .es03 section ul + .btn{
  width: 200px;
  height: 40px;
  margin: 80px auto 0 auto;
  line-height: 40px;
  border-radius: 200px;
  text-align: center;
  font-size: 1.6rem;/*16 / 13*/
}
.ecoSumai .es03 section ul + .btn a{
  display: block;
  height: 100%;
  background: #bbb;
  border-radius: inherit;
  color: #fff;
  text-decoration: none;
  transition: .3s;
}
.ecoSumai .es03 section ul + .btn a:hover{
  background: #333;
}



/* for sp*/
@media screen and (max-width: 767px) {
  .ecoSumai{
    padding: 70px 0 40px 0;
  }
  .ecoSumai > div{}

  /*es01*/
  .ecoSumai .es01{
    margin: 0 0 70px 0;
    padding: 0 0 30px 0;
  }
  .ecoSumai .es01::before{}
  .ecoSumai .es01::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 100px;
    height: 102px;
  }
  .ecoSumai .es01 h2{
    width: 90%;
    height: 50px;
    line-height: 48px;
    margin: -25px auto 20px auto;
    font-size: 2.2rem;
  }
  .ecoSumai .es01 .t01{
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 2.0rem;
    letter-spacing: normal;
  }

  .ecoSumai .es01 .t02{
    margin: 0 0 10px 0;
    text-align: center;
    line-height: 1.0;
  }
  .ecoSumai .es01 .t02 span{}
  .ecoSumai .es01 .t02 span:nth-of-type(1){
    font-size: 9.5rem;
  }
  .ecoSumai .es01 .t02 span:nth-of-type(2){
    font-size: 5.0rem;
  }
  .ecoSumai .es01 .t02 span:nth-of-type(3){
    font-size: 2.5rem;
  }
  .ecoSumai .es01 .lead03{
    margin: 20px 0 0 0;
  }
  
  /*es02*/
  .ecoSumai .es02{
    height: auto;
    margin: 0 auto 60px auto;
  }
  .ecoSumai .es02::before,
  .ecoSumai .es02::after{
    background-size: 100% 100%;
  }
  .ecoSumai .es02::before{}
  .ecoSumai .es02::after{}

  .ecoSumai .es02 > *{
    position: relative;
    width: calc((700/800)*100%);
    margin-left: auto;
    margin-right: auto;
  }
  .ecoSumai .es02 > .copy02{
    margin-bottom: 15px;
  }



  /*es03*/
  .ecoSumai .es03{}
  .ecoSumai .es03 h2{
    width: 90%;
    height: 50px;
    margin-bottom: 40px;
    font-size: 2.0rem;
    line-height: 48px;
  }
  .ecoSumai .es03 h2 span{
    vertical-align: baseline;
    font-size: 1.6rem;
  }
  .ecoSumai .es03 section{
    padding: 0 0 50px 0;
  }
  .ecoSumai .es03 h3{
    margin: 0 0 30px 0;
  }

  .ecoSumai .es03 section:first-of-type{
    padding-bottom: 120px;
  }
  .ecoSumai .es03 section:first-of-type::after{
    width: calc((330/800)*100%);
  }
  .ecoSumai .es03 section:first-of-type p:nth-of-type(2){
    margin: 20px 0;
  }


  .ecoSumai .es03 section:nth-of-type(2){}
  .ecoSumai .es03 section:nth-of-type(2) p:nth-of-type(2){
    margin: 20px 0;
  }
  .ecoSumai .es03 section:nth-of-type(2) p:nth-of-type(2) span{}
  .ecoSumai .es03 section:nth-of-type(2) p:nth-of-type(2) span:nth-of-type(1){
    font-size: 9.5rem;
  }
  .ecoSumai .es03 section:nth-of-type(2) p:nth-of-type(2) span:nth-of-type(2){
    font-size: 5.0rem;
  }
  .ecoSumai .es03 section:nth-of-type(2) p:nth-of-type(2) span:nth-of-type(3){
    font-size: 2.5rem;
  }

  .ecoSumai .es03 section li{
    margin: 30px 0 0 0;
  }

  .ecoSumai .es03 section ul + .btn{
    width: 160px;
    height: 36px;
    margin: 50px auto 0 auto;
    line-height: 36px;
    font-size: 1.3rem;/*16 / 13*/
  }
  .ecoSumai .es03 section ul + .btn a{}
  .ecoSumai .es03 section ul + .btn a:hover{}
}


/* for sp*/
@media screen and (max-width: 767px) {
}




/*recommend
--------------------------------- */
.recommend{
  padding: 0 0 120px 0;
}
.recIntro{
  padding: 100px 11% 200px 11%;
  background: #fff;
}
.recommend .ttlEn{
  font-size: 3.5rem;/*35 / 30*/
}
.recommend .recCopy{
  position: relative;
  width: 600px;
  margin: 0 auto 50px auto;
  padding: 70px 0;
  border: 1px solid #202124;
  font-size: 3.5rem;/*35 / 23*/
  font-weight: normal;
  text-align: center;
  line-height: 1.6;
  font-feature-settings: "palt";
}
.recommend .recCopy::after{
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: block;
  width: 100%;
  height: 100%;
  border-color: #202124;
  border-style: solid;
  border-width: 0 1px 1px 0;
}

.recMerit{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.recMerit::after{
  content: none;
}
.recMerit dl{
  width: calc((350 / 800) * 100%);
  margin: 130px 0 0 0;
}
.recMerit dl dt{
  position: relative;
  margin: 0 0 40px 0;
  padding: 40px 0 36px 0;
  border: 1px solid #202124;
  font-size: 2.5rem;/*25 / 18*/
  text-align: center;
  line-height: 1.0;
}
.recMerit dl dt .num{
  position: absolute;
  left: 50%;
  top: -50px;
  display: inline-block;
  padding: 0 10px;
  background: #fff;
  font-size: 5.5rem;/*55 / 36*/
  transform: translate(-50%,0);
}
.recMerit dl dt .num::before{
  content: "merit";
  display: block;
  font-size: 2.0rem;/*20 / 16*/
  line-height: 1.0;
}
.recMerit dl dd{  
  font-size: 1.5rem;/*15 / 14*/
  line-height: 1.8;
  text-align: left;
}

.recPlan{
  margin-top: -180px;
}
.recPlan h4.copy04{
  letter-spacing: 0.1em;
}





.recPlan .unit{
  position: relative;
  padding: 0 11%;
}
.recPlan .unit .unitH{
  position: relative;
  margin: 0 0 100px 0;
  padding: 30px 0;
  background: #c8a57d;
  color: #fff;
}
.recPlan .unit .spec{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 585px;
  margin: 0 auto;
}
.recPlan .unit .spec::after{
  content: none;
}
.recPlan .unit .plaNo{
  text-align: left;
  line-height: 1.0;
}
.recPlan .unit .plaNo span{
  font-size: 5.0rem;/*50 / 30*/
}
.recPlan .unit .plaNo span::before{
  content: "STAGE";
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.8em;
  margin-right: 10px;
  font-size: calc((18 / 50) * 100%);
  letter-spacing: 0.1em;
}

.recPlan .unit .layout{
  font-size: 3.0rem;/*30 / 24*/
  line-height: 1.0;
}

.recPlan .unit .area{
  width: 100%;
  margin: 30px 0 0 0;
  padding: 30px 0 0 0;
  border-top: 1px solid #fff;
  text-align: center;
  line-height: 1.0;
}
.recPlan .unit .area dl{
  display: flex;
  justify-content: center;
  align-items: baseline;
  line-height: 1.0;
}
.recPlan .unit .area dl::after{
  content: none;
}
.recPlan .unit .area dt,
.recPlan .unit .area dd{}
.recPlan .unit .area dt,
.recPlan .unit .area dd span{
  font-size: 1.5rem;/*15 / 13*/
}
.recPlan .unit .area dd{
  margin: 0 0 0 5px;
  font-size: 3.0rem;/*30 / 26*/
}

.recPlan .unit .copy04{
  margin-bottom: 50px;
  letter-spacing: 0.2em;
}



.recPlan .unit .fig{
  margin: 0 0 30px 0;
}
.recPlan .unit .fig02{
  max-width: 540px;
  margin: 0 auto 80px auto;
}

.recommend .recCP{}
.recommend .recCP h5{
  margin: 0 0 30px 0;
  color: #d75035;
  font-size: 1.8rem;/*18 / 16*/
  text-align: center;
  line-height: 1.0;
}
.recommend .recCP ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 750px;
  margin: 0 auto;
}
.recommend .recCP li{
  position: relative;
  width: calc((350 / 750) * 100%);
  margin: 0 0 20px 0;
  padding: 0 0 0 1.2em;
  font-size: 1.4rem;/*14 / 13*/
  text-align: left;
  line-height: 1.6;
  font-feature-settings: "palt";
}
.recommend .recCP li::before{
  content: "⚫︎";
  position: absolute;
  left: 0;
  top: 0;
  color: #d75035;
}

.recommend .planPoint li{
  background: #c8a57d;
}
.recommend .mh{
  display: flex;
  justify-content: space-between;
}
.recommend .mh li{
  width: calc((520 / 1080) * 100%);
}
.recommend .mh li figure{
  position: relative;
}
.recommend .mh li figcaption{
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-size: 1.0rem;
  color: #fff;
}


/* for sp*/
@media screen and (max-width: 767px) {
  .recommend{
    padding-bottom: 50px;
  }
  .recIntro{
    padding: 50px 5% 120px 5%;
  }
  .recommend .ttlEn{
    font-size: 3.0rem;/*35 / 30*/
  }
  .recommend .recCopy{
    width: 100%;
    margin: 0 auto 30px auto;
    padding: 30px 0;
    font-size: 2.3rem;/*35 / 23*/
  }
  .recommend .recCopy::after{}
  
  
  .recMerit{
    display: block;
  }
  .recMerit dl{
    width: 100%;
    margin: 60px 0 0 0;
  }
  .recMerit dl dt{
    margin: 0 0 20px 0;
    padding: 24px 0 20px 0;
    font-size: 1.8rem;/*25 / 18*/
  }
  .recMerit dl dt .num{
    top: -40px;
    font-size: 3.6rem;/*55 / 36*/
  }
  .recMerit dl dt .num::before{
    font-size: 1.6rem;/*20 / 16*/
  }
  .recMerit dl dd{  
    font-size: 1.4rem;/*15 / 14*/
  }

  .recPlan{
    margin-top: -120px;
  }
  .recPlan h4.copy04{
    letter-spacing: 0.1em;
  }

  .recPlan .unit{
    padding: 0 5%;
  }
  .recPlan .unit .unitH{
    margin: 0 0 50px 0;
    padding: 20px 0;
  }
  .recPlan .unit .spec{
    width: 90%;
  }
  .recPlan .unit .plaNo{}
  .recPlan .unit .plaNo span{
    font-size: 4.0rem;/*50 / 40*/
  }
  .recPlan .unit .plaNo span::before{}

  .recPlan .unit .layout{
    font-size: 2.4rem;/*30 / 24*/
  }

  .recPlan .unit .area{
    margin: 15px auto 0 auto;
    padding: 15px 0 0 0;
  }
  .recPlan .unit .area dl{
    flex-wrap: wrap;
    justify-content: center;
  }
  .recPlan .unit .area dt,
  .recPlan .unit .area dd{
    font-feature-settings: "palt";
  }
  .recPlan .unit .area dt,
  .recPlan .unit .area dd span{
    font-size: 1.3rem;/*15 / 13*/
  }
  .recPlan .unit .area dt{
    width: 24%;
    margin-left: 5px;
  }
  .recPlan .unit .area dd{
    /*width: 70%;*/
    font-size: 2.6rem;/*30 / 26*/
  }

  .recPlan .unit .copy04{
    margin-bottom: 30px;
  }


  .recPlan .unit .fig{
    margin: 0 0 20px 0;
  }
  .recPlan .unit .fig02{
    margin: 0 auto 50px auto;
  }

  .recommend .recCP{}
  .recommend .recCP h5{
    margin: 0 0 20px 0;
    font-size: 1.6rem;/*18 / 16*/
  }
  .recommend .recCP ul{
    display: block;
  }
  .recommend .recCP li{
    width: 100%;
    font-size: 1.3rem;/*14 / 13*/
  }
  .recommend .recCP li::before{}

  .recommend .planPoint li{}
  .recommend .mh{
    display: block;
  }
  .recommend .mh li{
     width: 90%;
    margin: 0 auto 20px auto;
  }
  .recommend .mh li figure{}
  .recommend .mh li figcaption{}

}