/*==========================================
  家づくりの流れ
===========================================*/
.fwb {
  font-weight: bold;
}
.none {
  display: none;
}
.sp_none {
  display: block;
}
.pc_none {
  display: none;
}
.br {
  display: inline-block;
  padding: 0;
}
.flex {
  display: flex;
}
.pc_flex {
  display: flex;
}
.sp_flex {
  display: inline-block;
}
@media screen and (max-width: 1130px){
  .sp_none {
    display: none;
  }
  .pc_none {
    display: block;
  }
  .pc_flex {
    display: inline-block;
  }
  .sp_flex {
    display: flex;
  }
}
.wrap01 {
  width: 100%;
  max-width: 1130px;
  margin: 0 auto;
}
.wrap02 {
  width: 100%;
  max-width: 1130px;
  margin: 0 auto;
  padding: 0 3%;
}
.relative {
  position: relative;
}
.flow_arw {
  margin: 0 1% 0 1%;
  text-align: center;
}
.flow_arw_none {
  text-align: center;
}
.flow_arw_img {
  max-width: 16px;
}
.flow_arw_img_02 {
  max-width: 33px;
  margin: 30px 0;
}
.flow_arw_02 {
  margin: 0 1.5% 0 1.5%;
  text-align: center;
}
.flow_arw_03 {
  margin: 0 1% 0 1%;
  text-align: center;
}
@media screen and (max-width: 1130px){

}
.flow_text {
  text-align: center;
  margin: 0 2%;
  font-size: 18px;
}

.flow_main {
  margin: -88px 0 0 0;
}
.clear {
  clear: both;
}
@media screen and (max-width: 1130px){
  .flow_main .flow_main02,.flow_main .flow_main03,.flow_main .flow_main04,.flow_main .flow_main05,.flow_main .flow_main06,.flow_main .flow_main07,.flow_main .flow_main08 {
    margin: 0;
  }
  .flow_main01a,.flow_main01b,.flow_main01c,.flow_main02a,.flow_main02b,.flow_main02c,.flow_main03a,.flow_main03b,.flow_main03c,.flow_main04a,.flow_main04b,.flow_main04c,.flow_main05a,.flow_main05b,.flow_main06a,.flow_main06b,.flow_main06c,.flow_main06d,.flow_main07a,.flow_main07b,.flow_main07c,.flow_main07d,.flow_main07e,.flow_main08a,.flow_main08b,.flow_main08c {
    margin-left: auto;
    margin-right: auto;
  }
  .flow_main {
    margin: 0 0 0 0;
  }
}
  html body {
    height: 0 !important;
  }
#pc_menu_list > li a:after, #pc_menu_list .list_detail a:after {
  bottom: 12px;
}

/*
  1列目
================================*/
.flow_main01 {
  justify-content: center;
  align-items: center;
  width: 100%;
}
.flow_main01a {
  max-width: 180px;
  min-height: 184px;
  background: #5f5f5f;
  flex-basis: 15%;
}
.flow_main01a_txt {
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  margin: 0;
  padding: 60px 0 0 0;
  text-align: center;
}
.flow_main01b {
  max-width: 350px;
  border: solid 1px #a8a8a8;
  min-height: 184px;
  background: #fff;
  flex-basis: 29%;
}
.flow_main01b_txt {
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}
.flow_main01c {
  max-width: 350px;
  border: solid 1px #a8a8a8;
  min-height: 184px;
  background: #fff;
  flex-basis: 29%;
}
.flow_main01c_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 10px 0;
  text-align: center;
}
.flow_main01c_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 21px 0 21px;
}
@media(max-width:1130px) {
  .flow_main01 {
    margin-top: 0;
  }
  .flow_main01b {
    margin-bottom: 200px;
  }
}
@media(max-width:767px) {
  .flow_main01 {
    margin-top: -580px;
  }
  .flow_main01b {
    margin-bottom: 200px;
  }
}

/*
  2列目
================================*/
.flow_main02 {
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  margin: 129px 0 0 0;
  width: 100%;
}
.flow_main02a {
  max-width: 162px;
  border: solid 1px #a8a8a8;
  min-height: 80px;
  background: #fff;
  flex-basis: 25%;
}
.flow_main02a_txt {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin: 25px 0 0 0;
}
.flow_main02b {
  max-width: 500px;
  border: solid 1px #a8a8a8;
  min-height: 174px;
  background: #fff;
  flex-basis: 50%;
}
.flow_main02b_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 10px 0;
  text-align: center;
}
.flow_main02b_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 21px 10px 21px;
}
.flow_main02c {
  max-width: 162px;
  border: solid 1px #a8a8a8;
  min-height: 80px;
  background: #fff;
  flex-basis: 25%;
}
.flow_main02c_txt {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}
@media(max-width: 1130px) {
  .flow_main02b {
    margin-bottom: 450px;
  }
}
@media(max-width: 767px) {
  .flow_main02b {
    margin-bottom: 450px;
  }
}

/*
  3列目
================================*/
.flow_main03 {
  justify-content: center;
  align-items: center;
  margin: 127px 0 0 0;
  width: 100%;
}
.flow_main03a {
  max-width: 295px;
  border: solid 1px #a8a8a8;
  min-height: 151px;
  background: #fff;
  flex-basis: 25%;
}
.flow_main03a_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 10px 0;
  text-align: center;
}
.flow_main03a_txt {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin: 0 21px 0 21px;
}
.flow_main03b {
  max-width: 373px;
  border: solid 1px #a8a8a8;
  min-height: 239px;
  background: #fff;
  flex-basis: 50%;
}
.flow_main03b_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 10px 0;
  text-align: center;
}
.flow_main03b_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 21px 0 21px;
}
.flow_main03c {
  max-width: 220px;
  border: solid 1px #a8a8a8;
  min-height: 104px;
  background: #fff;
  flex-basis: 50%;
}
.flow_main03c_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 10px 0;
  text-align: center;
}
.flow_main03c_txt {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin: 0 11px 0 11px;
}
@media(max-width: 1130px) {
  .flow_main03c {
    margin-bottom: 120px;
  }
}
@media(max-width: 767px) {
  .flow_main03c {
    margin-bottom: 120px;
  }
}

/*
  4列目
================================*/
.flow_main04 {
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  margin: 136px 0 0 0;
  width: 100%;
}
.flow_main04a {
  max-width: 218px;
  border: solid 1px #a8a8a8;
  min-height: 80px;
  background: #fff;
  flex-basis: 25%;
}
.flow_main04a_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 25px 0 10px 0;
  text-align: center;
}
.flow_main04b {
  max-width: 320px;
  border: solid 1px #a8a8a8;
  min-height: 133px;
  background: #fff;
  flex-basis: 50%;
}
.flow_main04b_ttl {
  font-size: 21px;
  font-weight: bold;
  margin: 15px 0 10px 0;
  text-align: center;
}
.flow_main04b_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 30px 0 30px;
}
.flow_main04c {
  max-width: 351px;
  border: solid 1px #a8a8a8;
  min-height: 240px;
  background: #fff;
  flex-basis: 50%;
}
.flow_main04c_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 10px 0;
  text-align: center;
}
.flow_main04c_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 30px 0 30px;
}
@media(max-width: 1130px) {
  .flow_main04b {
    margin-bottom: 160px;
  }
}
@media(max-width: 767px) {
  .flow_main04b {
    margin-bottom: 160px;
  }
}

/*
  5列目
================================*/
.flow_main05 {
  justify-content: center;
  align-items: center;
  margin: 126px 0 0 0;
  width: 100%;
}
.flow_main05a {
  max-width: 441px;
  border: solid 1px #a8a8a8;
  min-height: 200px;
  background: #fff;
  flex-basis: 50%;
}
.flow_main05a_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 10px 0;
  text-align: center;
}
.flow_main05a_ttl_span {
  background: linear-gradient(transparent 50%, #f2f2f2 0%);
  line-height: 1.4em;
}
.flow_main05a_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 21px 10px 21px;
}
.flow_main05b {
  max-width: 375px;
  border: solid 1px #a8a8a8;
  min-height: 200px;
  background: #fff;
  flex-basis: 50%;
}
.flow_main05b_ttl {
  font-size: 21px;
  font-weight: bold;
  margin: 50px 0 10px 0;
  text-align: center;
}
.flow_main05b_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 21px 0 21px;
}

@media(max-width: 1130px) {
  .flow_main05a {
    margin-bottom: 320px;
  }
  .flow_main05b {
    margin-bottom: 115px;
    min-height: 185px;
  }
}
@media(max-width: 767px) {
  .flow_main05a {
    margin-bottom: 340px;
  }
  .flow_main05b {
    margin-bottom: 115px;
    min-height: 185px;
  }
}

/*
  6列目
================================*/
.flow_main06 {
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  margin: 133px 0 0 0;
  width: 100%;
}
.flow_main06a {
  max-width: 280px;
  border: solid 1px #a8a8a8;
  min-height: 150px;
  background: #fff;
  flex-basis: 30%;
}
.flow_main06a_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 30px 0 10px 0;
  text-align: center;
}
.flow_main06a_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 21px 0 21px;
}
.flow_main06b {
  max-width: 129px;
  border: solid 1px #a8a8a8;
  min-height: 80px;
  background: #fff;
  flex-basis: 15%;
}
.flow_main06b_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 25px 0 10px 0;
  text-align: center;
}
.flow_main06c {
  max-width: 319px;
  border: solid 1px #a8a8a8;
  min-height: 150px;
  background: #fff;
  flex-basis: 30%;
}
.flow_main06c_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 30px 0 10px 0;
  text-align: center;
}
.flow_main06c_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 11px 0 11px;
}
.flow_main06d {
  max-width: 167px;
  border: solid 1px #a8a8a8;
  min-height: 80px;
  background: #fff;
  flex-basis: 15%;
}
.flow_main06d_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 25px 0 10px 0;
  text-align: center;
}
@media(max-width: 1130px) {
  
}
@media(max-width: 767px) {
  
}

/*
  7列目
================================*/
.flow_main07 {
  justify-content: center;
  align-items: center;
  margin: 124px 0 0 0;
  width: 100%;
}
.flow_main07a {
  max-width: 250px;
  border: solid 1px #a8a8a8;
  min-height: 150px;
  background: #fff;
  flex-basis: 20%;
}
.flow_main07a_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 30px 0 10px 0;
  text-align: center;
}
.flow_main07a_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 21px 0 21px;
}
.flow_main07b {
  max-width: 142px;
  border: solid 1px #a8a8a8;
  min-height: 84px;
  background: #fff;
  flex-basis: 12%;
}
.flow_main07b_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 25px 0 10px 0;
  text-align: center;
}
.flow_main07c {
  max-width: 142px;
  border: solid 1px #a8a8a8;
  min-height: 84px;
  background: #fff;
  flex-basis: 12%;
}
.flow_main07c_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 25px 0 10px 0;
  text-align: center;
}
.flow_main07c_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 11px 0 11px;
}
.flow_main07d {
  max-width: 250px;
  border: solid 1px #a8a8a8;
  min-height: 150px;
  background: #fff;
  flex-basis: 20%;
}
.flow_main07d_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 25px 0 10px 0;
  text-align: center;
}
.flow_main07d_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 21px 0 21px;
}
.flow_main07e {
  max-width: 116px;
  border: solid 1px #a8a8a8;
  min-height: 84px;
  background: #fff;
  flex-basis: 12%;
}
.flow_main07e_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 25px 0 10px 0;
  text-align: center;
}
@media(max-width:1130px) {
  .flow_main07d {
    margin-bottom: 240px;
  }
}
@media(max-width:767px) {
  .flow_main07d {
    margin-bottom: 200px;
  }
}

/*
  8列目
================================*/
.flow_main08 {
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  margin: 142px 0 0 0;
  padding: 0 0 140px 0;
  width: 100%;
}
.flow_main08a {
  max-width: 140px;
  border: solid 1px #a8a8a8;
  min-height: 80px;
  background: #fff;
  flex-basis: 15%;
}
.flow_main08a_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 25px 0 10px 0;
  text-align: center;
}
.flow_main08b {
  max-width: 175px;
  border: solid 1px #a8a8a8;
  min-height: 80px;
  background: #fff;
  flex-basis: 15%;
}
.flow_main08b_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 10px 0;
  text-align: center;
}
.flow_main08c {
  max-width: 247px;
  border: solid 1px #a8a8a8;
  min-height: 212px;
  background: #fff;
  flex-basis: 30%;
}
.flow_main08c_ttl {
  font-size: 18px;
  font-weight: bold;
  margin: 50px 0 10px 0;
  text-align: center;
}
.flow_main08c_txt {
  font-size: 14px;
  font-weight: 500;
  margin: 0 17px 0 17px;
}
.flow_main08d {
  max-width: 280px;
  min-height: 175px;
  background: #fff;
  flex-basis: 30%;
  margin: 0 0 0 1%;
}
.flow_main08d_img {
  margin: -60px 0 0 0;
}
@media(max-width: 1130px) {
  .flow_main08 {
    padding: 0;
  }
}
@media(max-width: 767px) {
  .flow_main08 {
    padding: 0;
  }
}

/*==========================================
  マイホーム完成
===========================================*/
.flow_bottom {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 30px 1% 50px 1%;
  border: solid 1px #a8a8a8;
  background: #f2f2f2;
}
.flow_bottom_ttl {
  text-align: center;
}
.flow_bottom_ttl_span {
  display: inline-block;
}
.flow_bottom_ttl_span img {
  width: 19px;
  margin: -10px 0 0 0;
}
.flow_bottom_ttl_h2 {
  font-size: 28px;
  display: inline-block;
  margin: 0 0 20px 0;
  font-weight: bold;
}
.flow_bottom_flex {
  list-style: none;
  align-items: center;
  padding: 0;
}
.flow_bottom_item {
  flex-basis: 25%;
  margin: 0 0.5% 0 0.5%;
}
.flow_bottom_txt {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  margin: 30px 0 30px 0;
}
.flow_bottom_btn {
  text-align: center;
}
.flow_bottom_btn div {
  display: inline-block;
  margin: 0 2%;
}
.flow_bottom_btn div a {
  border: solid 1px #000;
  display: inline-block;
  text-align: center;
  width: 100%;
  min-width: 290px;
  padding: 7px 0;
  background: #f2f2f2;
  font-weight: bold;
  text-decoration: none;
}
.flow_bottom_btn div a:hover {
  text-decoration: none;
  transition: .3s all;
  background: #fff;
  letter-spacing: 0.1em;
}
.flow_bottom_btn_span {
  margin: 0 8% 0 0;
}

@media(max-width: 1130px) {
  .flow_bottom {
    padding: 30px 1% 30px 1%;
  }
  .flow_bottom_btn div {
    margin: 4px 2%;
  }
  .flow_bottom_btn div a {
    min-width: 200px;
  }
  .flow_bottom_ttl_h2 {
    font-size: 20px;
  }
  .flow_bottom_txt {
    font-size: 16px;
    margin: 20px 0 10px 0;
  }
}
@media(max-width: 767px) {
  .flow_bottom {
    padding: 30px 1% 30px 1%;
  }
  .flow_bottom_btn div {
    margin: 4px 2%;
  }
  .flow_bottom_btn div a {
    min-width: 200px;
  }
  .flow_bottom_ttl_h2 {
    font-size: 20px;
  }
  .flow_bottom_txt {
    font-size: 16px;
    margin: 20px 0 10px 0;
  }
}












/*==========================================
  木ここちのいい家とは
===========================================*/
.bnr_area {
  margin-bottom: 9%;
  font-size: 16px;
}
.bnr_box {
  padding-left: 10px;
  padding-right: 10px;
}
.bnr_box .box {
  position: relative;
}
.bnr_box .texts {
  width: 100%;
  position: absolute;
  margin-top: 13%;
  color: #ffffff;
  overflow: hidden;
  text-align: center;
  font-weight: bold;
}
.bnr_box .texts h3 {
  margin-bottom: 14%;
  font-weight: bold;
}
.texts > span {
  display: inline-block;
}
.detail_button {
  width: 100%;
  position: absolute;
  bottom: 14%;
  text-align: center;
}
.bnr_box button {
  background-color: rgba(255,255,255,0);
  border: #ffffff 1px solid;
  color: #ffffff;
  margin-top: 16%;
  padding: 5px 28px;
}
.bnr_box a {
  text-decoration: none;
  /* color: #ffffff; */
}
.bnr_box button:hover {
  background-color: #ffffff;
  border: #ffffff 1px solid;
  color:  #000000;
}
.bnr_archive_overlay {
  background-color: #000000
}
.bnr_archive_overlay img {
  opacity: .3;
  display: block;
}

h2 {
  text-align: center;
  margin-bottom: 8.5%;
  padding: 0 15px;
}
.text {
  padding-left: 54px;
  padding-right: 54px;
  margin-bottom: 5%;
  font-weight: 500;
  line-height: 36px;
}
.kicocochi_area span {
  display: inline-block;
}

@media(max-width: 767px) {
  .text {
    padding-left: 20px;
    padding-right: 20px;
  }
}