@charset "utf-8";

/*====================================================================================================

  家づくりの流れ

====================================================================================================*/

/*--------------------------------------------------------------------------------
  ページタイトル
--------------------------------------------------------------------------------*/

#pgTtl {
  background-image:url(../image/pgTtl_bg.jpg);
}

#pgTtl h2 {
  background-image:url(../image/pgTtl.png?v=2);
}


/*----------------------------------------------------------------------------------------------------

  流れ
  
----------------------------------------------------------------------------------------------------*/

.flowBlock {
  position:relative;
}

.flow-no {
  line-height:1.4;
  background-color:#f2e146;
  text-align:center;
  display:inline-block;
  padding-top:0.5em;
  z-index:3;
}

.flow-photo {
  position:relative;
  display:block;
}

.flow-ct {
  background-color:#fff;
}

.flow-ttl {
  padding-bottom:1.8em;
}

.flow-ttl span {
  line-height:1.4;
  padding-bottom:0.3em;
  display:inline-block;
  border-bottom:1px solid #464137;
}

@media print,screen and (min-width:641px) {
  .flow-hdline {
    padding-top:70px;
    padding-bottom:10px;
  }
  
  .flow-lo {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:115px;
  }
  
  .flowBlock {
    text-align:left;
    padding-left:420px;
    margin-top:80px;
  }
  
  .flow-no {
    font-size:1.5em;
    width:120px;
    position:absolute;
    left:0;
    top:0;
  }
  
  .flow-photoLo {
    width:460px;
    position:absolute;
    left:40px;
    top:60px;
  }

  .flow-photo:before {
    content:"";
    width:100%;
    height:100%;
    display:block;
    position:absolute;
    right:-20px;
    bottom:-20px;
    background:url(../../image/pattern.svg) repeat left top;
  }

  .flow-photo img {
    position:relative;
    z-index:2;
  }

  .flow-ct {
    width:780px;
    min-height:425px;
    padding:80px 60px 80px 160px;
  }
  
  .flow-ttl span {
    font-size:1.8em;
  }
}

@media screen and (max-width:640px) {
  .flow-hdline {
    padding-top:8%;
    padding-left:6%;
    padding-right:6%;
    padding-bottom:4%;
  }
  
  .flow-lo {
    padding-left:6%;
    padding-right:6%;
    padding-bottom:10%;
  }
  
  .flowBlock {
    margin-top:14%;
  }
  
  .flow-no {
    font-size:1.3em;
    width:90px;
    position:absolute;
    left:4%;
    top:-4%;
  }
  
  .flow-ct {
    padding:8% 2.7rem;
  }
  
  .flow-ttl span {
    font-size:1.8em;
  }
  
  .flow-ct p {
    text-align:left;
  }
}

@media screen and (max-width:500px) {
  .flow-no {
    font-size:4.4vw;
    width:calc(115 / 640 * 100vw);
  }
  
  .flow-ct {
    padding:8% 6%;
  }
  
  .flow-ttl span {
    font-size:6vw;
  }
}