@charset "utf-8";

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


  ◇◆◇ 施術の流れ ◇◆◇
  
  
========================================================================================================================*/

.flow-info {
  border:3px solid #fcbccf;
  background-color:#fef2f5;
  text-align:center;
  position:relative;
}

.flow-info p {
  z-index:2;
  padding:2.5em 1em;
}

.flow-info p:before,
.flow-info p:after {
  content:"";
  display:inline-block;
  width:137px;
  height:158px;
  position:absolute;
}

.flow-info p:before {
  background:url(../image/bgL.png) no-repeat left bottom;
  bottom:10px;
  left:10px;
}

.flow-info p:after {
  background:url(../image/bgR.png) no-repeat right top;
  top:10px;
  right:10px;
}

@media screen and (max-width:640px) {
  .flow-info {
    text-align:left;
    border:0;
    background-color:transparent;
  }
  
  .flow-info p {
    padding:0;
  }

  .flow-info p:before,
  .flow-info p:after {
    display:none;
  }
}


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

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

.flow-list {
  border:1px solid #e8e0dc;
  background-color:#fff;
  padding:25px 25px 25px 30px;
  box-sizing:border-box;
  margin-top:20px;
  position:relative;
}

.flow-list.step01 {
  margin-top:40px;
}

.flow-list:after {
  content:"";
  display:block;
  width:100%;
  height:30px;
  background:url(../image/step-next.png) no-repeat center top;
  background-size:auto 30px;
  position:absolute;
  left:0;
  bottom:-30px;
  z-index:2;
}

.step07:after {
  display:none;
}

.flow-list--headline {
  display:block;
  color:#8abf4b;
  position:relative;
  padding-left:85px;
  padding-bottom:0.75em;
}

.flow-list--headline:before {
  content:"";
  display:inline-block;
  position:absolute;
  left:-15px;
  top:-35px;
  z-index:2;
  width:80px;
  height:80px;
  background-repeat:no-repeat;
  background-size:contain;
}

.step01 .flow-list--headline:before { background-image:url(../image/ic-step01.png); }
.step02 .flow-list--headline:before { background-image:url(../image/ic-step02.png); }
.step03 .flow-list--headline:before { background-image:url(../image/ic-step03.png); }
.step04 .flow-list--headline:before { background-image:url(../image/ic-step04.png); }
.step05 .flow-list--headline:before { background-image:url(../image/ic-step05.png); }
.step06 .flow-list--headline:before { background-image:url(../image/ic-step06.png); }
.step07 .flow-list--headline:before { background-image:url(../image/ic-step07.png); }

.flow-list--photo {
  float:right;
  width:280px;
  margin-left:30px;
  margin-top:-3.75em;
  line-height:0;
  display:inline-block;
}

.flow-list--photo2 {
  width:100%;
  list-style:none;
  margin-top:1.5em;
}

.flow-list--photo2 li {
  width:358px;
  float:right;
  line-height:0;
  position:relative;
}

.flow-list--photo2 li:first-child {
  float:left;
  margin-right:22px;
}

.flow-list--photo2 li small {
  width:100%;
  display:block;
  text-align:center;
  position:absolute;
  left:0;
  bottom:0;
  z-index:2;
  background-color:rgba(176,146,134,0.8);
  color:#fff;
  padding:0.5em 1em;
  box-sizing:border-box;
}

.no-rgba .flow-list--photo2 li small {
  background-color:#bea59b;
  position:relative;
}
  
.tel-link {
  line-height:1;
}

@media screen and (max-width:640px) {
  .flow-list {
    margin-top:1.25em;
    padding:1.15em 1em 1.5em 1em;
    margin-left:-1em;
    margin-right:-1em;
    border-left:0;
    border-right:0;
    border-top-color:#f2edeb;
    border-bottom-color:#f2edeb;
  }
  
  .flow-list.step01 {
    margin-top:2em;
  }
  
  .flow-list.step07 {
    border-bottom:0;
  }
  
  .flow-list:after {
    background-size:auto 25px;
    height:25px;
    bottom:-25px;
  }
  
  .flow-list--headline {
    padding-left:70px;
  }

  .flow-list--headline:before {
    left:-0.25em;
    top:-1em;
    width:60px;
    height:60px;
  }
  
  .flow-list--photo {
    width:40%;
    margin-left:1em;
    margin-top:0;
  }
  
  .flow-list--photo2 {
    margin-top:1.25em;
  }

  .flow-list--photo2 li {
    width:48.5%;
  }
  
  .flow-list--photo2 li:first-child {
    margin-right:1.5%;
  }
  
  .tel-link {
    text-decoration:underline;
  }
}

@media screen and (max-width:500px) {
  .flow-list {
    padding:1.15em 1em 1.5em 1em;
  }
  
  .flow-list.step01 {
  }
  
  .flow-list--headline {
    padding-left:70px;
  }

  .flow-list--headline:before {
    top:-1.25em;
    width:60px;
    height:60px;
  }
  
  .flow-list--photo {
    width:100%;
    margin-left:0;
    margin-bottom:1em;
    float:none;
    text-align:center;
  }
  
  .flow-list--photo img {
    max-width:300px;
    width:100%;
  }
  
  .flow-list--photo2 {
    margin-top:1em;
  }
  
  .flow-list--photo2 li small {
    background-color:#bea59b;
    position:relative;
  }
}

@media screen and (max-width:400px) {
  .flow-list.step01 {
    margin-top:1.5em;
    padding-bottom:1.25em;
  }
  
  .flow-list--headline {
    padding-left:60px;
  }

  .flow-list--headline:before {
    top:-1em;
    width:50px;
    height:50px;
  }
  
  .flow-list--photo2 li small {
    font-size:68.8%;
  }
}

@media screen and (max-width:360px) {
  .flow-list--headline:before {
    top:-1.15em;
  }
}