@charset "utf-8";

/* ========================================================================== */
/* ロングライフ エコロジー
   ========================================================================== */

/* メインビジュアルの下のメニュー */
.featureChildNav a {
  border-color: #7bbd26;
  color: #7bbd26;
}

.featureChildNav a:before {
  border-color: #7bbd26;
}

.featureChildNav a[href]:hover {
  background: #7bbd26;
  opacity: 1;
}

/* 大見出し */
.featureTitle {
  border-left-color: #7bbd26;
}

.featureTitle:before {
  color: #679e19;
}


/* sec2： エネルギー収支ゼロへ
   -------------------------------------------------------------------------- */

.ecologySec1 .picWrap .pic {
  vertical-align: bottom;
}

/* sec3： 最高水準の高断熱
   -------------------------------------------------------------------------- */

.ecologySec3 .row {
  margin-top: 40px;
}

.ecologySec3 .row p {
  float: left;
  width: 210px;
  margin-right: 14px;
}

.ecologySec3 .row .pic {
  float: right;
  width: -webkit-calc(100% - 224px);
  width: calc(100% - 224px);
  margin-top: 0;
}

.ecologySec3 .pic2 {
  max-width: 298px;
  width: 100%;
}

@media only screen and (max-width: 738px) {
  .ecologySec3 .row {
    margin-top: 20px;
  }

  .ecologySec3 .row p {
    float: none;
    width: auto;
    margin-right: 0;
  }

  .ecologySec3 .row .pic {
    float: none;
    width: auto;
    margin-top: 20px;
  }



}

/* sec5： 大空間を高気密・高断熱で包み込む
   -------------------------------------------------------------------------- */

.ecologySec5 .row1 .col {
  width: 310px;
  max-width: 40%;
  float: left;
}

.ecologySec5 .row1 .pic {
  float: right;
  max-width: 60%;
  margin-top: 0;
  box-sizing: border-box;
  padding-left: 20px;
}

/*
.ecologySec5 .row2 p {
  width: 310px;
  float: left;
  margin-top: 0;
}

.ecologySec5 .row2 .pic {
  float: right;
  margin-top: 0;
}
*/

@media only screen and (max-width: 480px) {
  .ecologySec5 .row1 .col {
    width: auto;
    max-width: none;
    float: none;
  }

  .ecologySec5 .row1 .col img {
    width: 100%;
  }

  .ecologySec5 .row1 .pic {
    float: none;
    max-width: none;
    margin-top: 0;
    box-sizing: border-box;
    padding-left: 0;
  }
  /*
  .ecologySec5 .row2 p {
    width: auto;
    float: none;
    margin-top: 0;
  }

  .ecologySec5 .row2 .pic {
    float: none;
    margin-top: 30px;
  }
  */
}


/* ページ下部 
   -------------------------------------------------------------------------- */

/* 枠ありボックス */
.featureBox {
  border-color: #7bbd26;
}

.featureBoxTitle {
  background: #7bbd26;
}

.featureBox {
  border-color: #7bbd26;
}

.featureBox p {
  float: left;
  width: 580px;
  width: -webkit-calc(100% - 240px);
  width: calc(100% - 240px);
}

.featureBox .note {
  display: block;
  font-size: 0.7em;
  margin-top: 0.5em;
  text-indent: -1em;
  margin-left: 1em;
}

.featureBox .picWrap {
  text-align: center;
}

.featureBox .picWrap img {
  max-width: 237px;
  width: 100%;
}

.aboutReport {
  clear: both;
  padding: 20px 0 0;
}

.aboutReport:after {
  content: '';
  display: block;
  clear: both;
}

.aboutReportContents {
  border-top: 1px solid #7bbd26;
}

.aboutReportBody {
  float: right;
  width: calc(100% - 280px);
}

.aboutReport .title {
  margin: .75em 0;
  color: #7bbd26;
}

.aboutReport p {
  float: none;
  width: auto;
}

.aboutReport ul {
  padding-left: 1.2em;
}

.aboutReport .picWrap {
  margin: 0 0 20px;
  text-align: center;
}

.aboutReport .picWrap img {
  max-width: 200px;
}

.aboutReportBtn,
.aboutReportBtn[href] {
  text-decoration: none;
	display: flex;
  justify-content: center;
  align-items: center;
	margin: 0 auto 0;
	max-width: 280px;
	min-height: 40px;
	background: #7bbd26;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	position: relative;
	text-decoration: none;
	line-height: 30px;
	transition: all .2s ease;
	box-sizing: border-box;
	padding: 10px;
	line-height: 1.3;
	letter-spacing: -0.4;
}

.aboutReportBtn:before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}

.aboutReportBtn:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent #fff #fff transparent;
    border-width: 5px;
    position: absolute;
    right: 3px;
    bottom: 3px;
}

/* ページ最下部のボタン */
a.nextPageBtn {
  border-color: #7bbd26;
  color: #7bbd26;
}

a.nextPageBtn:before {
  border-bottom-color: #7bbd26;
  border-right-color: #7bbd26;
}

a.nextPageBtn:hover {
  background: #7bbd26;
  color: #fff;
}

a.nextPageBtn:hover:before {
  border-bottom-color: #fff;
  border-right-color: #fff;
}

@media only screen and (max-width: 738px) {

  .aboutReportBody {
    width: calc(100% - 240px);
  }

  .aboutReport .picWrap img {
    
  }

}

@media only screen and (max-width: 480px) {
  .featureBox p {
    float: none;
    width: auto;
  }
  .featureBox .picWrap {
    margin-top: 1em;
  }
  .aboutReport {
    padding: 1em 0 0;
  }
  .aboutReportBody {
    float: none;
    width: auto;
  }
  .aboutReport .picWrap {
    margin: 1em 0;
  }
}

/* sec6： 自然の恵みを活かす
   -------------------------------------------------------------------------- */

.ecologySec6 .row1 {
  margin-top: 40px;
}

.ecologySec6 .row1 .col {
  float: left;
  padding-bottom: 3%;
}

.ecologySec6 .row1 .col p {
  padding-left: 1em;
  padding-right: 1em;
}

.ecologySec6 .row1 .col1 {
  width: 52.3%;
}

.ecologySec6 .row1 .col2 {
  width: 47.7%;
}

.ecologySec6 .row2 .col {
  margin-bottom: 0.5em;
}

.ecologySec6 .row2 .col1 {
  width: 59.32%;
  float: left;
}

.ecologySec6 .row2 .col2 {
  width: 38%;
  float: right;
}

@media only screen and (max-width: 738px) {
  .ecologySec6 {
    text-align: center;
  }
  
  .ecologySec6 .row .col {
    float: none;
  }
  
  .ecologySec6 .row .col {
    width: auto;
  }
  
  .ecologySec6 .row1 {
    text-align: left;
  }

  .ecologySec6 .row1 img {
    display: block;
    margin: 0 auto;
  }
  /*
  .ecologySec6 .row2 .col1 img {
    width: 100%;
  }
  */
  .ecologySec6 .row2 {
    display: inline-block;
    text-align: left;
  }

  .ecologySec6 .row2 img {
    padding-bottom: 3%;
  }
}

/* sec7： ウィンドキャッチ
   -------------------------------------------------------------------------- */

.ecologySec7:after {
  content: '';
  display: block;
  clear: both;
}

.ecologySec7 .row {
  margin-top: 40px;
  text-align: center;
}

.ecologySec7 .col {
  float: left;
  padding-bottom: 3%;
}

.ecologySec7 .col1 img {
  max-width: 268px;
  width: 100%;
}

.ecologySec7 .col1 {
  max-width: 30.8%;
}

.ecologySec7 .col2 {
  max-width: 69.2%;
}

@media only screen and (max-width: 738px) {

  .ecologySec7 .row {
    margin-top: 20px;
  }

  .ecologySec7 .col {
    float: none;
    max-width: none;
  }

  .ecologySec7 .col1 {
    padding-left: 15%;
    padding-right: 15%;
    padding-bottom: 5%;
  }

  .ecologySec7 .col2 {
    padding-bottom: 0%;
  }

}

.ecologySec7 .col:last-child {
  padding-bottom: 0;
}

/* sec8： フル3Dウィンドウ
   -------------------------------------------------------------------------- */

.ecologySec8 .row {
  position: relative;
}

.ecologySec8 .row:after {
  content: '';
  display: block;
  clear: both;
}

.ecologySec8 .col {
  width: 50%;
  float: left;
}

.ecologySec8 p {
  margin-top: 0;
}

.ecologySec8 .col1 {
  box-sizing: border-box;
  padding-right: 40px;
  padding-bottom: 20.58%;
  padding-bottom: -webkit-calc(20.58% + 1em);
  padding-bottom: calc(20.58% + 1em);
}

.ecologySec8 .col1 div {
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  padding-right: 40px;
  width: 50%;
}

@media only screen and (max-width: 480px) {

  .ecologySec8 .col {
    float: none;
    width: auto;
  }

  .ecologySec8 .col1 {
    padding-right: 0;
    padding-bottom: 1.5em;
  }

  .ecologySec8 .col1 p {
    padding-bottom: 1.5em;
  }

  .ecologySec8 .col1 div {
    position: static;
    padding-right: 0;
    width: auto;
  }

  .ecologySec8 .col2 img {
    width: 100%;
  }

}

/* sec9： 太陽光発電システム
   -------------------------------------------------------------------------- */

.ecologySec9:after {
  content: '';
  display: block;
  clear: both;
}

.ecologySec9 .col {
  width: 50%;
  float: left;
}

.ecologySec9 .ttl {
  margin-top: 0.4em;
}

.ecologySec9 .col1 {
  box-sizing: border-box;
  padding-right: 40px;
}

@media only screen and (max-width: 480px) {

  .ecologySec9 .col {
    float: none;
    width: auto;
  }

  .ecologySec9 .col1 {
    padding: 0 0 1em;
  }

  .ecologySec9 .col2 img {
    width: 100%;
  }

}

/* sec10： HEMS
   -------------------------------------------------------------------------- */

.ecologySec10:after {
  content: '';
  display: block;
  clear: both;
}

.ecologySec10 .col {
  float: left;
  width: 37.7%;
}

.ecologySec10 .col2 {
  float: right;
  width: 62.3%;
  text-align: right;
}

@media only screen and (max-width: 480px) {

  .ecologySec10 .col {
    float: none;
    width: auto;
  }

  .ecologySec10 .col1 {
    max-width: 80%;
    margin: 0 auto;
    padding-bottom: 5%;
  }

  .ecologySec10 .col1 img:last-child {
    display: block;
    margin: 0 auto;
  }

  .ecologySec10 .col2 img {
    width: 100%;
  }

}