@charset "utf-8";

/*====================================================================================================

  住宅プラン

====================================================================================================*/

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

  ページタイトル
  
----------------------------------------------------------------------------------------------------*/

#s-pgTtl {
  width:100%;
  position:relative;
  overflow:hidden;
}

@media print,screen and (min-width:641px) {
  #s-pgTtl {
    min-height:590px;
  }
  
  .s-pgTtl__hdline {
    padding-top:90px;
    padding-bottom:90px;
    text-align:left;
  }

  .s-pgTtl__hdline h2 {
    width:1180px;
    margin:0 auto;
  }

  .s-pgTtl__photo-wrap {
    width:-webkit-calc(50% + 90px);
    width:calc(50% + 90px);
    height:500px;
    display:block;
    position:absolute;
    top:90px;
    left:-webkit-calc(50% - 90px);
    left:calc(50% - 90px);
    z-index:3;
  }

  .s-pgTtl__photo {
    width:100%;
    height:100%;
    display:block;
    position:relative;
    overflow:hidden;
  }
    
  .s-pgTtl__photo img {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    min-width:875px;
    min-height:500px;
  }

  #s-pgTtl p {
    width:1180px;
    margin:0 auto;
    text-align:left;
    padding-top:70px;
    text-align:left;
    line-height:2.2;
  }
}

@media screen and (max-width:640px) {
  .s-pgTtl__hdline {
    padding-top:10%;
    padding-bottom:28%;
  }
  
  .s-pgTtl__hdline h2 {
    padding-left:6%;
    padding-right:6%;
    text-align:center;
  }
  
  .s-pgTtl__photo-wrap {
    padding-left:6%;
    padding-right:6%;
    margin-top:-20%;
  }
  
  #s-pgTtl p {
    padding-top:8%;
    line-height:2;
  }
}


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

  特徴
  
----------------------------------------------------------------------------------------------------*/

#s-tokuchoList {
  list-style:none;
}

#s-tokucho li {
  line-height:1.5;
  height:5.5em;
  float:left;
}

.s-tokucho__box {
  width:100%;
  height:100%;
  position:relative;
  background-color:#fff;
  text-align:left;
}

.s-tokucho__box:after {
  content:"";
  width:1px;
  height:2.5em;
  background-color:#e0e0de;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.s-tokucho__box:before {
  content:"";
  height:100%;
  display:block;
  float:left;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:90% auto;
}
  
.s-tokucho__label {
  display:block;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  text-align:center;
}

.s-tokucho__label span {
  display:inline-block;
  text-align:left;
}

@media print,screen and (min-width:641px) {
  #s-tokucho {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
    padding-top:60px;
    padding-bottom:60px;
  }

  #s-tokuchoList {
    margin-left:-5px;
    margin-right:-5px;
  }

  #s-tokucho li {
    padding-left:5px;
    padding-right:5px;
  }

  .s-tokuchoList--cols5 li {
    width:20%;
    font-size:0.95em;
  }
  
  .s-tokuchoList--cols4 li {
    width:25%;
  }
  
  .s-tokuchoList--cols5 li:nth-child(n+6),
  .s-tokuchoList--cols4 li:nth-child(n+5) {
    padding-top:10px;
  }
  
  .s-tokucho__box:after {
    left:80px;
  }
  
  .s-tokucho__box:before {
    width:80px;
  }
  
  .s-tokucho__label {
    left:80px;
    width:-webkit-calc(100% - 80px);
    width:calc(100% - 80px);
  }
}

@media screen and (max-width:640px) {
  #s-tokuchoList {
    margin-left:5%;
    margin-right:5%;
    padding-top:8%;
    padding-bottom:8%;
  }
  
  #s-tokucho li {
    font-size:2.8vw;
    padding-left:1%;
    padding-right:1%;
    width:50% !important;
  }
  
  #s-tokucho li:nth-child(n+3) {
    padding-top:2%;
  }
  
  .s-tokucho__box:after {
    left:-webkit-calc(80 / 640 * 100vw);
    left:calc(80 / 640 * 100vw);
  }
  
  .s-tokucho__box:before {
    width:-webkit-calc(80 / 640 * 100vw);
    width:calc(80 / 640 * 100vw);
  }
  
  .s-tokucho__label {
    left:-webkit-calc(80 / 640 * 100vw);
    left:calc(80 / 640 * 100vw);
    width:-webkit-calc(100% - 80 / 640 * 100vw);
    width:calc(100% - 80 / 640 * 100vw);
  }
}


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

  仕様
  
----------------------------------------------------------------------------------------------------*/

.s-shiyoTtl {
  font-weight:900;
  line-height:1.5;
  position:relative;
}

.s-shiyoTtl:before,
.s-shiyoTtl:after {
  content:"";
  width:100%;
  height:12px;
  position:absolute;
  left:0;
  display:block;
  background:url(../../image/pattern.svg) repeat left top;
}

.s-shiyoTtl:before { top:0; }
.s-shiyoTtl:after { bottom:0; }

.s-shiyoTtl .plus {
  display:inline-block;
  margin-left:0.5rem;
  margin-right:0.5rem;
  font-weight:400;
  font-size:0.8em;
  vertical-align:middle;
  margin-bottom:0.2em;
}

.s-shiyoBlock {
  background-color:#fff;
}

.s-shiyoBlockTtl {
  line-height:1.5;
}

@media print,screen and (min-width:641px) {
  .s-shiyo {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
    padding-top:90px;
  }
  
  .s-shiyoTtl-wrap {
    padding-bottom:30px;
  }
  
  .s-shiyoTtl {
    font-size:2.1em;
    display:inline-block;
    min-width:940px;
    padding:1em;
  }
  
  .s-shiyoBlock {
    margin-top:60px;
    padding-top:60px;
    padding-bottom:60px;
  }
  
  .s-shiyoBlockTtl {
    padding-left:60px;
    padding-bottom:30px;
    text-align:left;
  }
}

@media screen and (max-width:640px) {
  .s-shiyo {
    padding-top:8%;
  }
  
  .s-shiyoTtl-wrap {
    padding-left:6%;
    padding-right:6%;
    padding-bottom:6%;
  }
  
  .s-shiyoTtl {
    font-size:5.4vw;
    padding:1.25em 0;
  }
  
  .s-shiyoTtl .plus {
    line-height:1;
    margin-bottom:0;
  }
  
  .s-shiyo .s-shiyoBlock {
    margin-top:4%;
  }
  
  .s-shiyoBlockTtl {
    text-align:center;
    padding-top:8%;
    padding-bottom:5%;
    padding-left:6%;
    padding-right:6%;
  }
}

@media screen and (max-width:500px) {
  .s-shiyoTtl:before,
  .s-shiyoTtl:after {
    height:-webkit-calc(12 / 500 * 100vw);
    height:calc(12 / 500 * 100vw);
  }
}


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

  標準装備
  
----------------------------------------------------------------------------------------------------*/

.s-hSobi-lo {
  width:100%;
  position:relative;
}

.s-hSobi-wrap {
  color:#fff;
}

.s-hSobiTtl {
  font-weight:700;
  font-size:2em;
  line-height:1.5;
  padding-bottom:0.4em;
}

.s-hSobiList {
  list-style:none;
}

.s-hSobiList li {
  width:50%;
  float:left;
  text-align:center;
}

.s-hSobiList li span {
  display:block;
  background-color:#fff;
  color:#322d23;
  padding:0.6em;
}

@media print,screen and (min-width:641px) {
  .s-hSobi-lo {
    margin-top:110px;
    padding-bottom:52px;
    margin-bottom:115px;
  }
  
  .s-hSobi-wrap {
    width:-webkit-calc(50% + 590px);
    width:calc(50% + 590px);
    background-color:#6b675f;
    float:right;
  }
  
  .s-hSobi-photo {
    position:absolute;
    right:-webkit-calc(50% - 90px);
    right:calc(50% - 90px);
    top:60px;
  }
  
  .s-hSobi-photo img {
    width:auto;
    max-width:inherit;
    height:570px;
  }
  
  .s-hSobi {
    position:relative;
    z-index:2;
    width:1180px;
    padding-left:610px;
    padding-top:110px;
    padding-bottom:90px;
  }
  
  .s-hSobiList {
    padding-top:40px;
    margin:-5px;
  }
  
  .s-hSobiList li {
    padding:5px;
  }
}

@media screen and (max-width:640px) {
  .s-hSobi-lo {
    background-color:#6b675f;
    margin-top:18%;
  }
  
  .s-hSobi-photo {
    margin-left:6%;
    margin-right:6%;
  }
  
  .s-hSobi-photo img {
    margin-top:-10%;
    position:relative;
  }
  
  .s-hSobi {
    padding-top:8%;
    padding-bottom:10%;
  }
  
  .s-hSobiList {
    padding-left:5%;
    padding-right:5%;
    padding-top:8%;
  }
  
  .s-hSobiList li {
    padding:0 1%;
  }
  
  .s-hSobiList li:nth-child(n+3) {
    padding-top:2%;
  }
}