@charset "UTF-8";

/* --------------------------
quality
-------------------------- */

.content_Wrap .flex{ justify-content: space-between}

.content_Wrap .ttl_area h1{
  width: 100%;
  max-width: 174px;
  margin: 0 auto;
  padding: 61px 0 0;
}
.content{
  width: 94%;
  max-width: 1200px;
  margin: 0 auto;
}
.content h2{
  text-align: center;
  margin: 100px auto 60px;
  font-size: 22px;
  line-height: 1.5;
  color: #000;
}
.tab_Box{
  margin: 0 auto 100px;
  justify-content: space-between;
}
.tab_Box li{
  width: calc( 100% / 3);
  max-width: 380px;
  margin-right: 10px;
}
.tab_Box li a{
  display: block;
  background: #fff;
  border: 1px solid #4b392c;
  padding: 15px 20px;
  text-align: center;
  color: #4b392c;
  transition: 0.3s;
  font-size: 20px;
  letter-spacing: 2px;
}
.tab_Box li a:hover{
  opacity: 1;
  background: #4b392c;
  color: #fff;
}
.tab_Box li.here a{
  background: #4b392c;
  color: #fff;
}

.q_Box{
  margin: 0 auto 100px;
}
.q_ttl{
  position: relative;
  width: 100%;
}
.q_ttl span{
  position: relative;
  z-index: 3;
  padding: 20px 0.5em 20px 0;
  color: #9c8c3e;
  font-size: 30px;
  letter-spacing: 0.1em;
  background: #fff;
  display: block;
}
.mgb_20{ margin-bottom: 20px;}

/* ----------------
EQUIPMENT
---------------- */
#kitchen .q_ttl span{ max-width: 5em;}
#bathroom .q_ttl span{ max-width: 6.5em;}
#sanitary .q_ttl span{ max-width: 5.5em;}
.q_ttl::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  background: #9c8c3e;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
}
.q_Box h4{
  font-size: 20px;
  line-height: 2;
  text-align: center;
  margin: 30px auto 50px ;
}
.q_container{
  width: 100%;
  justify-content: space-between;
  margin-bottom: 50px;
  flex-wrap: wrap;
}
.q_Box figure{ position: relative;}
.q_Box .notes{
  font-size: 12px;
  margin-top: 5px;
}
.col1-1{
  width: 100%;
  /* margin-bottom: 50px; */
}
.col2-1{
  width: 48%;
  /* margin-bottom: 50px; */
  /* margin-right: 10px; */
}
.col3-1{
  width: 32%;
  margin-bottom: 50px;
}
.col3-2{ width: 65% !important;}
.col4-1{ width: 23%;}
.col5-1{ width: 18%;}
h5{
  font-size: 18px;
  line-height: 1.2;
  margin-top: 20px;
  color: #9c8c3e;
  text-align: center;
}
.q_txt{
  font-size: 16px;
  line-height: 1.4;
  margin: 10px 0;
  text-align: justify;
}
.q_txt small{ font-size: 12px;}
.q_txt strong{ font-size: 18px;}
.bg_w{
  background: #fff;
  width: 100%;
  padding: 20px;
}

/* 個別設定 */
#kitchen .main_img{
  width: 100%;
  margin: 0 auto 50px;
}
.q_container:nth-of-type(3) .notes{ text-align: right;}
.col2-1 h5{
  text-align: left;
  margin-top: 0;
}
#kitchen .bg_w .top_Box,#kitchen .bg_w .bottom_Box{ justify-content: space-between;}
#kitchen .bg_w .top_Box{
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
}
#kitchen .bg_w .bottom_Box{ padding-top: 20px;}
#kitchen .bg_w .top_Box > figure{
  width: 65%;
  max-width: 620px;
  margin-right: 10px;
}
#kitchen .bg_w .top_Box > div{
  width: 22%;
  margin-right: 10px;
}
#kitchen .bg_w .top_Box > div:last-child{ margin-right: 0;}
#kitchen .bg_w .bottom_Box > figure{
  width: 34%;
  margin-right: 10px;
}
#kitchen .bg_w .bottom_Box > div{ width: 64%;}
#kitchen .bg_w .bottom_Box > div h5{ text-align: left;}

#bathroom .main_flex > figure,
#sanitary .main_flex > figure{
  width: 68%;
  max-width: 770px;
}
#bathroom .main_flex > .q_container,
#sanitary .main_flex > .q_container{ width: 32%;}
#bathroom .main_flex > .q_container .col3-1,
#sanitary .main_flex > .q_container .col3-1{
  width: 100%;
}
.sub_img{
  position: absolute;
  top: -20%;
  right: -15%;
  width: 40%;
}
#bathroom .bg_w > figure{
  width: 63%;
  max-width: 720px;
}
.clean{
  position: relative;
  font-size: 20px;
  margin: 30px auto 10px;
}
.clean span {
  position: relative;
  z-index: 3;
  padding: 20px 0 20px 0;
  background: #fff;
  display: block;
  max-width: 8em;
}
.clean::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background: #000;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
}

/* ----------------
COMFORT&ECOLOGY
---------------- */
#comfort .q_ttl span{ max-width: 12.5em;}
#ecology .q_ttl span{ max-width: 5em;}

.w_65{
  width: 65%;
  max-width: 760px;
  /* margin-bottom: 50px; */
}
.w_34{
  width: 34%;
  max-width: 400px;
  /* margin-bottom: 50px; */
}
.w_100{
  width: 100%;
}
#ecology .q_container li h6{
  position: relative;
}
#ecology .q_container li h6 span{
  position: relative;
  display: block;
  background: #fff;
  padding: 15px 15px 15px 0;
  color: #9c8c3e;
  font-size: 24px;
  letter-spacing: 0.1em;
  z-index: 3;
}
#ecology .q_container li h6::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background: #9c8c3e;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
}
#ecology .q_container li.kit h6 span{ max-width: 5em;}
#ecology .q_container li.bath h6 span{ max-width: 6.4em;}
#ecology .q_container li.eco h6 span{ max-width: 168px;}
#ecology .q_container li.toilet h6 span{ max-width: 4em;}
#ecology .q_container li.internet h6 span{ max-width: 5.5em;}
#ecology .q_container li.insulation h6 span{ max-width: 6.8em;}
#ecology .q_container li.collective h6 span{ max-width: 495px;}

/* 個別設定 */
#comfort .q_container li.w_34:nth-of-type(4) h5{
  text-align: left;
  margin-top: 0;
}
figure.eco03-1{
  width: 20%;
  margin-bottom: 20px;
}
#ecology .q_container li.eco div.flex .col2-1:last-child{ margin-top: 45px;}

#ecology .q_container li.toilet div.flex figure:first-child{ width: 25%;}
#ecology .q_container li.toilet div.flex figure:last-child{ width: 73%;}

#comfort .q_container li,#ecology .q_container li{ margin-bottom: 50px;}

/* ----------------
SECURITY&STRUCTURE
---------------- */
#security .q_ttl span{ max-width: 5.5em;}
#structure .q_ttl span{ max-width: 6.5em;}

#security .q_container li.sec_center{
  flex-wrap: wrap;
  padding-right: 20px;
  border-right: 1px solid #333;
}
#security .q_container li .col2-1 h5{
  text-align: center;
  margin-top: 20px;
}
#security .q_container li.sec_right div.flex{ margin-top: 50px;}
#security .q_container li.bouhan{ margin-bottom: 0;}
#security .q_container li.bouhan div.autolock{ margin-bottom: 50px;}
#security .q_container li.bouhan .bg_w figure{ width: 37%;}
#security .q_container li.bouhan .bg_w div{ width: 58%;}
#security .q_container li.bouhan .bg_w div h5{ font-size: 16px;}
#security .q_container li.bouhan .bg_w div .q_txt{ font-size: 14px;}

.gray_border{ border: #ccc 1px solid;}

#security .q_container li.bousai{ margin-bottom: 50px;}
#security .q_container li.bousai h5{
  text-align: left;
  margin-top: 10px;
}
#security .q_container li.bousai .q_txt{ margin-bottom: 30px;}
.bousai_content{
  margin-top: 30px;
  padding-right: 30px;
}
.bousai_content li{
  align-items: center;
  margin-bottom: 50px;
}
.bousai_content li figure{ margin: 0 auto;}
.bousai_content li:nth-child(1) figure{ width: 30%;}
.bousai_content li:nth-child(2) figure{ width: 25%;}
.bousai_content li:nth-child(3) figure{ width: 20%;}
.bousai_content li figure .cap_txt{
  left: 50%;
  transform: translateX(-50%);
  bottom: -30px;
}
.bousai_content li .bousai_txt{ width: 60%;}
.bousai_content li .bousai_txt h6{
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}

#structure .q_container li.col3-1 figure{ border: 1px solid #ccc; }

@media (max-width: 767px) {

  .content_Wrap .btn_flex{ justify-content: center;}

  .content_Wrap .ttl_area h1{
    padding: 38px 0 0;
  }
  .content h2{
    margin: 60px auto 30px;
    font-size: 16px;
  }

  .q_ttl span{ font-size: 24px;}

  .tab_Box{
    flex-wrap: wrap;
    margin: 0 auto 50px;
  }
  .tab_Box li{
    width: 90%;
    margin: 0 auto 10px;
  }
  .tab_Box li a{
    padding: 12px 20px;
    font-size: 18px;
  }
  .q_Box{ margin: 0 auto 50px;}
  .q_Box h4,h5{ font-size: 16px;}
  .q_txt{ font-size: 14px;}
  .q_txt strong{ font-size: 16px;}
  .col3-1,.col2-1,.w_65,.w_34{ width: 100%;}
  .col5-1{ width: 48%;}
  .q_container,.col3-1{ margin-bottom: 30px;}

  .col2-1 h5{
    text-align: center;
    margin-top: 20px;
  }

  /* ----------------
  EQUIPMENT
  ---------------- */
  /* #kitchen .q_ttl span{ max-width: 30%;} */
  /* #bathroom .q_ttl span{ max-width: 40%;} */
  /* #sanitary .q_ttl span{ max-width: 35%;} */
  #kitchen .bg_w .top_Box, #kitchen .bg_w .bottom_Box{ flex-wrap: wrap;}
  #kitchen .bg_w .top_Box > figure,
  #kitchen .bg_w .top_Box > div,
  #kitchen .bg_w .top_Box > div:last-child,
  #kitchen .bg_w .bottom_Box > figure,
  #kitchen .bg_w .bottom_Box > div{ width: 100%;}
  #kitchen .bg_w .top_Box > figure,#kitchen .bg_w .bottom_Box > figure{ margin-right: 0;}
  #kitchen .bg_w .top_Box > div:last-child{ margin-top: 20px;}
  #kitchen .bg_w .bottom_Box > div h5{ text-align: center;}

  #bathroom .main_flex,
  #sanitary .main_flex{ flex-wrap: wrap;}
  #bathroom .main_flex > figure,
  #sanitary .main_flex > figure{
    width: 100%;
    max-width: none;
    margin-bottom: 20px;
  }
  #bathroom .main_flex > .q_container,
  #sanitary .main_flex > .q_container{ width: 100%;}
  .sub_img {
    top: -10%;
    right: 0%;
    width: 30%;
  }

  #bathroom .bg_w{ flex-wrap: wrap;}
  #bathroom .bg_w > figure{
    width: 100%;
    max-width: none;
  }
  #bathroom .bg_w > div.col3-1{ margin: 20px 0 0;}
  .col4-1{ width: 48%;}

  /* ----------------
  COMFORT&ECOLOGY
  ---------------- */

  /* #comfort .q_ttl span { max-width: 85%;} */
  /* #ecology .q_ttl span{ max-width: 30%;} */

  #comfort .q_container li, #ecology .q_container li{ margin-bottom: 20px;}

  #comfort .q_container li.w_65:nth-of-type(3){ margin-bottom: 10px;}

  #ecology .q_container li.kit div.flex .col2-1:first-child,
  #ecology .q_container li.bath div.flex .col2-1:first-child,
  #ecology .q_container li.insulation div.flex .col2-1:first-child{ margin-right: 10px;}
  #ecology .q_container li.eco div.flex{ flex-wrap: wrap;}
  #ecology .q_container li.eco div.flex .col2-1:last-child{ margin-top: 20px;}

  figure.eco03-1{ margin-left: 10px;}

  /* ----------------
  SECURITY&STRUCTURE
  ---------------- */
  /* #security .q_ttl span{ max-width: 35%;} */
  /* #structure .q_ttl span { max-width: 40%;} */
  #security .q_container li.sec_center{
    padding-right: 0;
    border-right: none;
  }
  #security .q_container li .col2-1{ width: 48%;}

  #security .q_container li.bousai{
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .col3-2{ width: 100% !important;}
  .bousai_content{ padding-right: 0;}
  .bousai_content li{
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .bousai_content li figure{ margin: 0 auto 50px;}
  .bousai_content li:nth-child(1) figure{ width: 80%;}
  .bousai_content li:nth-child(2) figure{ width: 75%;}
  .bousai_content li:nth-child(3) figure{ width: 70%;}
  .bousai_content li .bousai_txt{ width: 100%;}
  .bousai_content li .bousai_txt h6{
    font-size: 18px;
    text-align: center;
    line-height: 1.4;
  }
}