@charset "utf-8";

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


  ◇◆◇ 畳替えの流れ ◇◆◇
  
  
========================================================================================================================*/

#hd { background-image:url(../image/pdHd_bg.jpg); }
#pgHd h2:before { content:url(../image/pdHd_icon.png); }


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

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

#flow-warp {
  padding-bottom:100px;
}

.flow {
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  margin-top:180px;
  position:relative;
  box-sizing:border-box;
  padding-left:410px;
}

.flow.layL {
  padding-left:0;
}

.flow_photo {
  z-index:2;
  position:absolute;
  left:0;
  top:-65px;
}

.flow.layL .flow_photo {
  left:inherit;
  right:0;
}

.flow_step {
  width:690px;
  min-height:290px;
  background-color:#fff;
  text-align:left;
  position:relative;
}

.flow_step:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.step_hd {
  display:inline-block;
  text-align:center;
  float:left;
  margin-top:-100px;
  margin-left:78px;
  padding-bottom:40px;
}

.flow.layL .step_hd {
  float:right;
  margin-left:0;
  margin-right:78px;
}

.step_hd_no {
  width:124px;
  height:70px;
  color:#fff;
  position:relative;
  display:block;
  text-align:center;
}

.step_hd_no:before,
.step_hd_no:after {
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:0;
}

.step_hd_no:before {
  top:0;
  border-left:62px solid transparent;
  border-right:62px solid transparent;
  border-bottom:35px solid #464678;
}

.step_hd_no:after {
  bottom:0;
  border-top:35px solid #464678;
  border-left:62px solid transparent;
  border-right:62px solid transparent;
}

.step_hd_no span {
  height:100%;
  display:inline-block;
  position:relative;
  z-index:2;
  text-align:center;
  font-size:112.5%;
}

.step_hd h3 {
  font-weight:400;
  font-size:187.5%;
  display:inline-block;
  position:relative;
  padding-top:85px;
  line-height:1.4;
}

.step_hd h3:before {
  content:"";
  width:1px;
  height:85px;
  background-color:#afafc3;
  position:absolute;
  left:50%;
  top:-15px;
  z-index:3;
}

.step_hd h3 small {
  font-size:62.5%;
  font-weight:200;
}

.step_hd h3 .free {
  display:inline-block;
  font-weight:200;
  font-size:56.3%;
  border:1px solid #3c3c3c;
  padding:0.25em 0.05em;
  margin-top:0.15em;
}

.step_hd h3 .after {
  display:inline-block;
  padding-top:1.15em;
}

.step_body {
  float:left;
  width:480px;
  padding:55px 30px 55px 35px;
  box-sizing:border-box;
}

.flow.layL .step_body {
  float:right;
  padding:55px 30px 55px 35px;
}

.step_body .tel_no {
  display:inline-block;
  font-weight:400;
  font-size:137.5%;
  margin-right:0.25em;
}