/*portfolio
--------------------------------------------------------*/
#portfolio_top {
  padding: 100px 0;
}

.box_title_portfolio {
  display: flex;
  margin: 0 auto 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.title_portfolio {
  background: #fff;
  border: 2px solid #dde8eb;
  font-size: 1.6rem;
  color: #5F9EAF;
  padding: 10px 30px;
  margin-bottom: 30px;
  text-align: center;
  box-shadow: 10px 10px 0 #DDE8EB;
  line-height: 1.4;
  letter-spacing: .18rem;
}

.title_portfolio_en {
  color: #666;
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: .14rem;
}

.main_box {
  cursor: pointer;
  padding: 0;
}

.container_house {
  width: 100%;
}

.container_house_mb60 {
  margin-bottom: 60px;
}

.box_name_house {
  display: flex;
  align-items: baseline;
  margin-bottom: 20px;
  justify-content: center;
}

.txt_blue {
  padding-right: 20px;
}

.name_house {
  color: #666;
  font-size: 1.4rem;
  background: #e2f5fa;
  padding: 10px 20px;
  border-radius: 4px;
}

/*.data_house {z
  color: #666;
  letter-spacing: .14rem;
}
*/

.heading_house {
  font-size: 1.4rem;
  color: #5F9EAF;
  padding: 0 10px 10px;
  border-bottom: 2px solid #0086ad;
  display: table;
  letter-spacing: .14rem;
  margin: 0 auto 6px;
  text-align: center;
}

.description_title {
  padding-bottom: 4px;
  font-size: 1.3rem;
  text-align: left;
}

.txt_area {
  color: #5F9EAF;
  padding-right: 4px;
}

.description_house {
  text-align: left;
  line-height: 2;
  margin-bottom: 2px;
}

.description_bottom {
  margin-bottom: 60px;
}

.container_relative {
  position: relative;
  display: flex;
  margin: 0 auto 20px;
}

.container_img_slider {
  flex: 3;
  margin: 4px;
  padding: 0;
  width: 100%;
  cursor: pointer;
}

.container_thumb_box {
  flex: 1;
  width: 100%;
}

li.box_item_house {
  display: none;
  height: 490px;
  width: 100%;
}

.img_popup_content {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
}

.overlay {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .8);
}

.container_modal {
  position: absolute;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 410px;
  height: auto;
  text-align: center;
  padding: 1rem 3rem 2.2rem;
  display: flex;
  flex-direction: column;
}

.container_modal.container_modal_branches {
  position: absolute;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 1000px;
  text-align: center;
  padding: 0.4rem 2rem 2rem;
  display: flex;
  flex-direction: column;
}

.box_btn_close {
  text-align: right;
  cursor: pointer;
}

.item_popup {
  display: none;
}

/*house_01*/
#house_01 li.item_house_01 {
  background: url(../img/img_house_01_01.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.item_house_02 {
  background: url(../img/img_house_01_02.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.item_house_03 {
  background: url(../img/img_house_01_03.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.item_house_04 {
  background: url(../img/img_house_01_04.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.item_house_05 {
  background: url(../img/img_house_01_05.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.item_house_06 {
  background: url(../img/img_house_01_06.jpg) no-repeat center center;
  background-size: cover;

}

#house_01 li.item_house_07 {
  background: url(../img/img_house_01_07.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.item_house_08 {
  background: url(../img/img_house_01_08.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.thumb_01 {
  background: url(../img/img_house_01_01.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.thumb_02 {
  background: url(../img/img_house_01_02.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.thumb_03 {
  background: url(../img/img_house_01_03.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.thumb_04 {
  background: url(../img/img_house_01_04.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.thumb_05 {
  background: url(../img/img_house_01_05.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.thumb_06 {
  background: url(../img/img_house_01_06.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.thumb_07 {
  background: url(../img/img_house_01_07.jpg) no-repeat center center;
  background-size: cover;
}

#house_01 li.thumb_08 {
  background: url(../img/img_house_01_08.jpg) no-repeat center center;
  background-size: cover;
}

/*house_02*/
#house_02 li.item_house_01 {
  background: url(../img/img_house_02_01.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.item_house_02 {
  background: url(../img/img_house_02_02.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.item_house_03 {
  background: url(../img/img_house_02_03.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.item_house_04 {
  background: url(../img/img_house_02_04.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.item_house_05 {
  background: url(../img/img_house_02_05.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.item_house_06 {
  background: url(../img/img_house_02_06.jpg) no-repeat center center;
  background-size: cover;

}

#house_02 li.item_house_07 {
  background: url(../img/img_house_02_07.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.item_house_08 {
  background: url(../img/img_house_02_08.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.thumb_01 {
  background: url(../img/img_house_02_01.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.thumb_02 {
  background: url(../img/img_house_02_02.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.thumb_03 {
  background: url(../img/img_house_02_03.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.thumb_04 {
  background: url(../img/img_house_02_04.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.thumb_05 {
  background: url(../img/img_house_02_05.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.thumb_06 {
  background: url(../img/img_house_02_06.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.thumb_07 {
  background: url(../img/img_house_02_07.jpg) no-repeat center center;
  background-size: cover;
}

#house_02 li.thumb_08 {
  background: url(../img/img_house_02_08.jpg) no-repeat center center;
  background-size: cover;
}

/*house_04*/
#house_04 li.item_house_01 {
  background: url(../img/img_house_04_01.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.item_house_02 {
  background: url(../img/img_house_04_02.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.item_house_03 {
  background: url(../img/img_house_04_03.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.item_house_04 {
  background: url(../img/img_house_04_04.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.item_house_05 {
  background: url(../img/img_house_04_05.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.item_house_06 {
  background: url(../img/img_house_04_06.jpg) no-repeat center center;
  background-size: cover;

}

#house_04 li.item_house_07 {
  background: url(../img/img_house_04_07.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.item_house_08 {
  background: url(../img/img_house_04_08.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.thumb_01 {
  background: url(../img/img_house_04_01.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.thumb_02 {
  background: url(../img/img_house_04_02.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.thumb_03 {
  background: url(../img/img_house_04_03.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.thumb_04 {
  background: url(../img/img_house_04_04.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.thumb_05 {
  background: url(../img/img_house_04_05.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.thumb_06 {
  background: url(../img/img_house_04_06.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.thumb_07 {
  background: url(../img/img_house_04_07.jpg) no-repeat center center;
  background-size: cover;
}

#house_04 li.thumb_08 {
  background: url(../img/img_house_04_08.jpg) no-repeat center center;
  background-size: cover;
}

/*house_05*/
#house_05 li.item_house_01 {
  background: url(../img/img_house_05_01.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.item_house_02 {
  background: url(../img/img_house_05_02.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.item_house_03 {
  background: url(../img/img_house_05_03.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.item_house_04 {
  background: url(../img/img_house_05_04.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.item_house_05 {
  background: url(../img/img_house_05_05.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.item_house_06 {
  background: url(../img/img_house_05_06.jpg) no-repeat center center;
  background-size: cover;

}

#house_05 li.item_house_07 {
  background: url(../img/img_house_05_07.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.item_house_08 {
  background: url(../img/img_house_05_08.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.thumb_01 {
  background: url(../img/img_house_05_01.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.thumb_02 {
  background: url(../img/img_house_05_02.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.thumb_03 {
  background: url(../img/img_house_05_03.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.thumb_04 {
  background: url(../img/img_house_05_04.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.thumb_05 {
  background: url(../img/img_house_05_05.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.thumb_06 {
  background: url(../img/img_house_05_06.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.thumb_07 {
  background: url(../img/img_house_05_07.jpg) no-repeat center center;
  background-size: cover;
}

#house_05 li.thumb_08 {
  background: url(../img/img_house_05_08.jpg) no-repeat center center;
  background-size: cover;
}

/*house_06*/
#house_06 li.item_house_01 {
  background: url(../img/img_house_06_01.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.item_house_02 {
  background: url(../img/img_house_06_02.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.item_house_03 {
  background: url(../img/img_house_06_03.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.item_house_04 {
  background: url(../img/img_house_06_04.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.item_house_05 {
  background: url(../img/img_house_06_05.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.item_house_06 {
  background: url(../img/img_house_06_06.jpg) no-repeat center center;
  background-size: cover;

}

#house_06 li.item_house_07 {
  background: url(../img/img_house_06_07.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.item_house_08 {
  background: url(../img/img_house_06_08.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.thumb_01 {
  background: url(../img/img_house_06_01.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.thumb_02 {
  background: url(../img/img_house_06_02.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.thumb_03 {
  background: url(../img/img_house_06_03.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.thumb_04 {
  background: url(../img/img_house_06_04.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.thumb_05 {
  background: url(../img/img_house_06_05.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.thumb_06 {
  background: url(../img/img_house_06_06.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.thumb_07 {
  background: url(../img/img_house_06_07.jpg) no-repeat center center;
  background-size: cover;
}

#house_06 li.thumb_08 {
  background: url(../img/img_house_06_08.jpg) no-repeat center center;
  background-size: cover;
}

.line_thumb {
  flex: 1;
}

.box_item_thumb {
  height: 116.6px;
  width: 100%;
}

.container_thumb_box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.thumb_box {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}

.thumb_box li {
  cursor: pointer;
  margin: 4px;
  transition: .2s;
}

.thumb_box li:hover {
  opacity: .5;
  transition: .2s;
}

.img_thumb {
  border-radius: 0;
  transition: all .2s ease-in-out;
  max-width: 100%;
  height: auto;
  margin-bottom: 0;
  height: 420px;
}

.thumb_box li:hover img {
  opacity: 0.8;
  transition: .3s;
}
/*@media (max-width: 992px)
--------------------------------------------------------*/
@media (max-width: 992px) {
  /*portfolio
  --------------------------------------------------------*/
  #portfolio_top {
    padding: 70px 0 40px;
    overflow: hidden;
  }

  .box_title_portfolio {
    flex-direction: column;
    margin-bottom: 20px;
  }

  .title_portfolio {
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 0 0 15px;
    padding: 8px 20px;
  }

  .title_portfolio_en {
    font-size: .8rem;
  }

  .name_house {
    margin: 0 0 -4px;
    font-size: 1.1rem;
    line-height: 1.4;
    text-align: center;
    width: 98%;
    padding: 6px 0;
  }

  .data_house {
    font-size: .9rem;
  }

  .description_title {
    padding-bottom: 2px;
    font-size: 1.1rem;
  }

  .description_bottom {
    margin-bottom: 30px;
  }

  .container_relative {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    width: 100%;
    margin-bottom: 10px;
  }

  .container_house {
    width: 100%;
    margin: 0 auto 20px;
  }

  .box_name_house {
    margin-bottom: 0;
    justify-content: center;
  }

  .container_img_slider {
    width: 98%;
  }

  li.box_item_house {
    height: 40vh;
  }

  .container_thumb_box {
    flex-direction: row;
  }

  .box_item_thumb {
    height: 10vh;
  }

  .heading_house {
    font-size: 1.1rem;
    letter-spacing: .1rem;
    padding: 0 0 8px;
    width: auto;
  }

  .description_house {
    line-height: 1.8;
  }

  .container_house {
    padding-bottom: 0;
  }