@charset "UTF-8";
@import url("global.css");
#bodyarea {
  margin-bottom: 120px;
}

.flow_list li .inner {
  padding: 0 1.5vw 60px;
  position: relative;
}
.flow_list li .inner::before, .flow_list li .inner::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 1px;
  width: 100%;
  background-color: #A8A8A8;
}
.flow_list li .inner::after {
  z-index: 2;
  width: 100px;
  background-color: #9E8F7A;
}
.flow_list li .inner .number {
  padding: 35px 0 30px;
}
.flow_list li .inner .number span {
  display: block;
  line-height: 1;
  font-family: "Albert Sans", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: #9E8F7A;
}
.flow_list li .inner > dl {
  padding: 20px 0 35px 4%;
  position: relative;
}
.flow_list li .inner > dl::before {
  content: "";
  position: absolute;
  left: .5vw;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(158, 143, 122, 0.5);
}
.flow_list li .inner > dl dt {
  font-size: 24px;
  font-weight: 600;
}
.flow_list li .inner > dl dd {
  margin-top: 15px;
  text-align: justify;
}
.flow_list li .inner > dl dd .text > p {
  font-size: 93.75%;
}
.flow_list li .inner > dl dd .text > p + p {
  margin-top: 1em;
}
.flow_list li .inner > dl dd .subbox {
  margin-top: 35px;
  padding: 30px;
  max-width: 90%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #E5E1D9;
  display: flex;
  align-items: flex-start;
  font-size: 87.5%;
}
.flow_list li .inner > dl dd .subbox > p + p {
  margin-top: 1em;
}
.flow_list li .inner > dl dd .subbox .ph {
  width: 30%;
  flex-shrink: 0;
  margin-right: 30px;
}
.flow_list li .inner > dl dd .subbox .textarea .linkbox {
  margin-top: 10px;
  justify-content: flex-end;
}
.flow_list li .inner > dl dd .subbox .textarea .linkbox .icon_btn {
  margin: 10px 0 0 10px;
}
.flow_list li .inner > dl dd .linkbox {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
}
.flow_list li .inner > dl dd .linkbox .icon_btn {
  margin: 20px 30px 0 0;
}

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

 Responsive-Breakpoint-1 (1600px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 (1300px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #bodyarea {
    margin-bottom: 90px;
  }

  .flow_list li .inner {
    padding: 0 2vw 50px;
  }
  .flow_list li .inner::after {
    width: 80px;
  }
  .flow_list li .inner .number {
    padding: 30px 0 25px;
  }
  .flow_list li .inner .number span {
    font-size: 27px;
  }
  .flow_list li .inner > dl {
    padding: 15px 0 35px 6%;
  }
  .flow_list li .inner > dl::before {
    left: .7vw;
  }
  .flow_list li .inner > dl dt {
    font-size: 20px;
  }
  .flow_list li .inner > dl dd {
    margin-top: 15px;
  }
  .flow_list li .inner > dl dd .subbox {
    margin-top: 30px;
  }
  .flow_list li .inner > dl dd .linkbox .icon_btn {
    margin: 20px 25px 0 0;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #bodyarea {
    margin-bottom: 65px;
  }
  #bodyarea .narrow > .link_btn .btn_inner {
    font-size: 90%;
  }

  .flow_list li .inner {
    padding: 0 2vw 35px;
  }
  .flow_list li .inner .number {
    padding: 25px 0 20px;
  }
  .flow_list li .inner .number span {
    font-size: 20px;
  }
  .flow_list li .inner > dl {
    padding: 10px 0 25px 6%;
  }
  .flow_list li .inner > dl::before {
    left: 1vw;
  }
  .flow_list li .inner > dl dt {
    font-size: 18px;
  }
  .flow_list li .inner > dl dd .subbox {
    display: block;
    margin-top: 20px;
    padding: 25px 20px;
    max-width: initial;
  }
  .flow_list li .inner > dl dd .subbox .ph {
    width: auto;
    max-width: 200px;
    margin: 0 auto 20px;
  }
  .flow_list li .inner > dl dd .subbox .textarea .linkbox {
    margin-top: 5px;
  }
  .flow_list li .inner > dl dd .subbox .textarea .linkbox .icon_btn {
    margin: 5px 0 0 7px;
  }
  .flow_list li .inner > dl dd .linkbox {
    margin-top: 5px;
  }
  .flow_list li .inner > dl dd .linkbox .icon_btn {
    margin: 10px 10px 0 0;
  }
}