@charset "UTF-8";

#flow01 + .contents_box01 .wrapper_item,
#flow02 + .contents_box01 .wrapper_item,
#flow03 + .contents_box01 .wrapper_item,
#flow04 + .contents_box01 .wrapper_item,
#flow05 + .contents_box01 .wrapper_item,
#flow06 + .contents_box01 .wrapper_item,
#flow07 + .contents_box01 .wrapper_item,
#flow08 + .contents_box01 .wrapper_item,
#flow09 + .contents_box01 .wrapper_item,
#flow10 + .contents_box01 .wrapper_item,
#flow11 + .contents_box01 .wrapper_item,
#flow12 + .contents_box01 .wrapper_item,
#flow13 + .contents_box01 .wrapper_item,
#flow14 + .contents_box01 .wrapper_item,
#flow15 + .contents_box01 .wrapper_item{
  position: relative;
  width: 90%;
  margin-left: auto;
  border: solid 1px #51555e;
  padding: max(3%,2rem);
  padding-bottom: max(3%,2rem) !important;
  background: #fff;
}

#flow01 + .contents_box01 .wrapper_item::after,
#flow02 + .contents_box01 .wrapper_item::after,
#flow03 + .contents_box01 .wrapper_item::after,
#flow04 + .contents_box01 .wrapper_item::after,
#flow05 + .contents_box01 .wrapper_item::after,
#flow06 + .contents_box01 .wrapper_item::after,
#flow07 + .contents_box01 .wrapper_item::after,
#flow08 + .contents_box01 .wrapper_item::after,
#flow09 + .contents_box01 .wrapper_item::after,
#flow10 + .contents_box01 .wrapper_item::after,
#flow11 + .contents_box01 .wrapper_item::after,
#flow12+ .contents_box01 .wrapper_item::after,
#flow13 + .contents_box01 .wrapper_item::after,
#flow14 + .contents_box01 .wrapper_item::after,
#flow15 + .contents_box01 .wrapper_item::after{
  position: absolute;
  content: "";
  left: calc(-10% + 24px);
  top: 50%;
  width: calc(10% - 24px);
  height: 10px;
  border-top: dashed 1px #51555e;
}
#flow01 + .contents_box01 .contents_btn01 .content_wrapper,
#flow02 + .contents_box01 .contents_btn01 .content_wrapper,
#flow03 + .contents_box01 .contents_btn01 .content_wrapper,
#flow04 + .contents_box01 .contents_btn01 .content_wrapper,
#flow05 + .contents_box01 .contents_btn01 .content_wrapper,
#flow06 + .contents_box01 .contents_btn01 .content_wrapper,
#flow07 + .contents_box01 .contents_btn01 .content_wrapper,
#flow08 + .contents_box01 .contents_btn01 .content_wrapper,
#flow09 + .contents_box01 .contents_btn01 .content_wrapper,
#flow10 + .contents_box01 .contents_btn01 .content_wrapper,
#flow11 + .contents_box01 .contents_btn01 .content_wrapper,
#flow12 + .contents_box01 .contents_btn01 .content_wrapper,
#flow13 + .contents_box01 .contents_btn01 .content_wrapper,
#flow14 + .contents_box01 .contents_btn01 .content_wrapper,
#flow15 + .contents_box01 .contents_btn01 .content_wrapper{
  text-align: left;
}
#flow01 + .contents_box01> .content_wrapper,
#flow02 + .contents_box01> .content_wrapper,
#flow03 + .contents_box01> .content_wrapper,
#flow04 + .contents_box01> .content_wrapper,
#flow05 + .contents_box01> .content_wrapper,
#flow06 + .contents_box01> .content_wrapper,
#flow07 + .contents_box01> .content_wrapper,
#flow08 + .contents_box01> .content_wrapper,
#flow09 + .contents_box01> .content_wrapper,
#flow10 + .contents_box01> .content_wrapper,
#flow11 + .contents_box01> .content_wrapper,
#flow12 + .contents_box01> .content_wrapper,
#flow13 + .contents_box01> .content_wrapper,
#flow14 + .contents_box01> .content_wrapper,
#flow15 + .contents_box01> .content_wrapper{
  position: relative;
}
#flow_text01 + section .wrapper_item,
#flow_text02 + section .wrapper_item,
#flow_text03 + section .wrapper_item{
  position: relative;
}
#flow_text01 + section .wrapper_item .inner_item_txt p:nth-last-of-type(1),
#flow_text02 + section .wrapper_item .inner_item_txt p:nth-last-of-type(1),
#flow_text03 + section .wrapper_item .inner_item_txt p:nth-last-of-type(1){
  padding-left: 10%;
}
@media screen and (max-width: 900px){
  #flow_text01 + section .wrapper_item .inner_item_txt p:nth-last-of-type(1),
  #flow_text02 + section .wrapper_item .inner_item_txt p:nth-last-of-type(1),
  #flow_text03 + section .wrapper_item .inner_item_txt p:nth-last-of-type(1){
    padding-left: 20%;
  }
}
#flow01 + .contents_box01> .content_wrapper::before,
#flow02 + .contents_box01> .content_wrapper::before,
#flow03 + .contents_box01> .content_wrapper::before,
#flow04 + .contents_box01> .content_wrapper::before,
#flow05 + .contents_box01> .content_wrapper::before,
#flow06 + .contents_box01> .content_wrapper::before,
#flow07 + .contents_box01> .content_wrapper::before,
#flow08 + .contents_box01> .content_wrapper::before,
#flow09 + .contents_box01> .content_wrapper::before,
#flow10 + .contents_box01> .content_wrapper::before,
#flow11 + .contents_box01> .content_wrapper::before,
#flow12 + .contents_box01> .content_wrapper::before,
#flow13 + .contents_box01> .content_wrapper::before,
#flow14 + .contents_box01> .content_wrapper::before,
#flow15 + .contents_box01> .content_wrapper::before,
#flow_text01 + section .wrapper_item::before,
#flow_text02 + section .wrapper_item::before,
#flow_text03 + section .wrapper_item::before{
  position: absolute;
  content: "";
  left: 54px;
  top: -10px;
  width:1px;
  height: calc(100% + 20px);
  background: #51555e;
}
#flow_text01 + section .wrapper_item::before,
#flow_text02 + section .wrapper_item::before,
#flow_text03 + section .wrapper_item::before{
  left: 34px;
  height: calc(100% + 70px);
}
#flow01 + .contents_box01> .content_wrapper::before,
#flow04 + .contents_box01> .content_wrapper::before,
#flow09 + .contents_box01> .content_wrapper::before,
#flow15 + .contents_box01> .content_wrapper::before{
  top: -60px;
  height: calc(100% + 70px);
}

/*見出し*/
#flow_ttl01 + section .heading.block_header_7 p,
#flow_ttl02 + section .heading.block_header_7 p,
#flow_ttl03 + section .heading.block_header_7 p,
#flow_ttl04 + section .heading.block_header_7 p{
  border: solid 1px #51555e;
  color: #51555e;
  background: transparent;
  font-size: 3rem;
}
#flow_ttl02 + section .heading.block_header_7 .h,
#flow_ttl03 + section .heading.block_header_7 .h,
#flow_ttl04 + section .heading.block_header_7 .h{
  position: relative;
  padding-bottom: 2.6rem;
}
#flow_ttl02 + section .heading.block_header_7 .h::after,
#flow_ttl03 + section .heading.block_header_7 .h::after,
#flow_ttl04 + section .heading.block_header_7 .h::after{
  position: absolute;
  bottom: 0;
  left: 20px;
  padding: 0.2em 0.5em;
  background: #f4f6f7;
  color: var(--i_sub_color);
  font-size: 12px;
  white-space: nowrap;
}
#flow_ttl02 + section .heading.block_header_7 .h::after{
  content: "期間の目安：約1~2ヵ月";
}
#flow_ttl03 + section .heading.block_header_7 .h::after{
  content: "期間の目安：約4ヵ月";
}
#flow_ttl04 + section .heading.block_header_7 .h::after{
  content: "期間の目安：ずっと";
}
@media screen and (max-width: 900px){
  #flow01 + .contents_box01 .wrapper_item,
  #flow02 + .contents_box01 .wrapper_item,
  #flow03 + .contents_box01 .wrapper_item,
  #flow04 + .contents_box01 .wrapper_item,
  #flow05 + .contents_box01 .wrapper_item,
  #flow06 + .contents_box01 .wrapper_item,
  #flow07 + .contents_box01 .wrapper_item,
  #flow08 + .contents_box01 .wrapper_item,
  #flow09 + .contents_box01 .wrapper_item,
  #flow10 + .contents_box01 .wrapper_item,
  #flow11 + .contents_box01 .wrapper_item,
  #flow12 + .contents_box01 .wrapper_item,
  #flow13 + .contents_box01 .wrapper_item,
  #flow14 + .contents_box01 .wrapper_item,
  #flow15 + .contents_box01 .wrapper_item{
    width: 100%;
  }
  #flow01 + .contents_box01 .wrapper_item::after,
  #flow02 + .contents_box01 .wrapper_item::after,
  #flow03 + .contents_box01 .wrapper_item::after,
  #flow04 + .contents_box01 .wrapper_item::after,
  #flow05 + .contents_box01 .wrapper_item::after,
  #flow06 + .contents_box01 .wrapper_item::after,
  #flow07 + .contents_box01 .wrapper_item::after,
  #flow08 + .contents_box01 .wrapper_item::after,
  #flow09 + .contents_box01 .wrapper_item::after,
  #flow10 + .contents_box01 .wrapper_item::after,
  #flow11 + .contents_box01 .wrapper_item::after,
  #flow12 + .contents_box01 .wrapper_item::after,
  #flow13 + .contents_box01 .wrapper_item::after,
  #flow14 + .contents_box01 .wrapper_item::after,
  #flow15 + .contents_box01 .wrapper_item::after{
    display: none;
  }
}

/*アフターサポート*/
.box_wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-top: 2rem;
}
.box{
  width: calc(50% - 2rem * 1 / 2) ;
  padding: 2rem;
  background:#f4f6f7;
  box-sizing: border-box;
}
.box_head{
  display: flex;
  align-items: center;
  column-gap: 1rem;
  color: var(--i_sub_color);
  font-weight: 700;
}
.box_num{
  font-size: 3rem;
}

@media screen and (max-width: 700px){
  .box{
    width: 100%;
  }
}

/*家づくりの目安*/
.top_wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
}
.top_left,
.top_right{
  width: calc(50% - 2rem * 1 / 2);
}
.top_left{
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.top_s_box{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
  width: calc(50% - 2rem * 1 / 2);
  background: #f4f6f7;
  padding: 2rem;
  min-height: 150px;
  box-sizing: border-box;
}
.top_l_box{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
  width: 100%;
  background: #f4f6f7;
  padding: 2rem;
  min-height: 150px;
  box-sizing: border-box;
}
.f_l{
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  padding: 0 0.2em;
}
.f_m{
  font-size: 1.2em;
}
@media screen and (max-width: 800px){
  .top_wrapper{
    flex-direction: column;
  }
  .top_left,
  .top_right{
    width: 100%;
  }
}
@media screen and (max-width: 500px){
  .top_s_box{
    width: 100%;
    min-height: 120px;
  }
  .top_l_box{
    min-height: 120px;
  }
}
  
@media screen and (max-width: 768px){
#flow15 + .contents_box01> .content_wrapper::before {
    height: 100%;
}
}