@charset "utf-8";

.flow_wrap { width:100%; display:flex; flex-wrap:wrap; }
.flow { width:100%; display:flex; flex-wrap:wrap; align-items: flex-start; position:relative; }
.flow.reverse { flex-direction: column-reverse; position:relative; }
.flow li { width:100%; position:relative; }
.flow li p { margin-bottom:24px; text-align:justify;}
.flow li .button { margin:0 auto; display:block; }
.flow li.flow_box { width:100%; height:auto; background:#fff; border-radius:10px; padding:30px 5% 40px 5%; display:block; position:relative; z-index:2;  }
.flow li.road_box { width:100%; display:flex; padding:0; }
.flow li.road_box .illust_step1 { width:133px; position:absolute; top:-20px; left:10%; z-index:3; }
.flow li.road_box .illust_step2 { width:150px; position:absolute; top:-20px; right:10%; z-index:3;}
.flow li.road_box .illust_step3 { width:108px; position:absolute; left:-20px; left:20%; z-index:3;}
.flow li.road_box .illust_step3_2 { width:34px; position:absolute; right:30%; top:10%; z-index:3;}
.flow li.road_box .illust_step4_1 { width:72px; position:absolute; top:-20px; left:40%; z-index:3;}
.flow li.road_box .illust_step4_2 { width:58px; position:absolute; top:-20px; right:20%; z-index:3;}
.flow li.road_box .illust_step5 { width:105px; position:absolute; top:-10px; left:0; z-index:3;}
.flow li.road_box .illust_step6 { width:35%; position:absolute; top:-50px; right:0; z-index:3; right: 10%;}

.flow li.road_box .illust_step7_1 { width:80px; position:absolute; top:-10px; left:10%; z-index:3; }
.flow li.road_box .illust_step7_2 { width:40px; position:absolute; top:10%; right:20%; z-index:3; }
.flow li.road_box .illust_step8 { width:50%; position:absolute; top:-10px; z-index:3; }
.flow.reverse .road_box { margin-right:auto; }
@media (min-width:768px) {
  .flow.reverse { flex-direction: initial;}
  .illust_step1 { width:200px; position:relative; }
  .flow li .button { margin:30px 0 0 0; }
  .flow li p { margin-bottom:0; }
  .flow li.flow_box { width:68%; padding:0 5% 30px 5%; margin-bottom:30px; position:relative; z-index:10; }
  .flow li.road_box  { width:32%; margin-top:80px; padding:0; }
  .flow li.flow_box .box { width:100%; height:auto; background:#fff; border-radius:10px; padding:50px 0 0 0; display:block; }
  .flow li.road_box .illust_step1 { width:10vw; left:10vw; top:5vw; }
  .flow li.road_box .illust_step2 { width:15vw; left:0; top:0; }
  .flow li.road_box .illust_step3 { width:8vw; left:10vw; top:2vw; }/*木*/
  .flow li.road_box .illust_step3_2 { width:3vw;right:0%; bottom:20%; }/*女性*/
  .flow li.road_box .illust_step4_1 { width:5vw;left:0; top:-5vw; }
  .flow li.road_box .illust_step4_2 { width:5vw;right:10vw; top:0; }/*営業マン*/
  .flow li.road_box .illust_step5 { width:9vw;left:15vw; right:0; top:0; }
  .flow li.road_box .illust_step6 { width:200px;right:10%; bottom:20%; }
  .flow li.road_box .illust_step7_1 { width:7vw; top:-5vw; left:60%; }
  .flow li.road_box .illust_step7_2 { width:4vw; top:7vw; right:7vw; }
  .flow li.road_box .illust_step8 { width:20vw;right:-1vw; top:0; }
  .flow.reverse .flow-road { position:absolute; right:0; }
  .road_box .flow-road { margin-left:-3vw; }
  .flow.reverse .road_box { display:flex; }
}
@media (min-width:1025px) {
  .flow_wrap { margin-bottom: 0; }

}

.line-animation {stroke-dasharray: 1000;stroke-dashoffset: 1000;animation: draw-line 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
@keyframes draw-line {
    to {
      stroke-dashoffset: 0;
    }
}


.curve-wrap {transform: rotate(110deg);width:30vw;height:130px;transform-origin: center center; margin-left:auto; }
.flow.reverse .curve-wrap {transform: rotate(290deg);width:30vw;height:130px;transform-origin: center center; margin-right:70vw; }


.link_text {  color:#529535; font-weight:bold; margin:0;  }
@media (min-width:768px) {
  .link_text { display:flex; align-items:center; margin:30px 0 0 0; flex-wrap:wrap;}
}
.contact_back.contents_bg_contact { position:relative; z-index:2; }


@keyframes draw-road {
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes draw-road {
  to {
    stroke-dashoffset: 0;
  }
}

@media (min-width:768px) {
  .flow-road {width: 300px;height: auto;margin-top: 50px;}
  .flow-road--flip-x {transform: scaleX(-1);margin-left: auto;}
  .flow-road-path {fill: none; stroke: #fff6e6;stroke-miterlimit: 30;stroke-width: 80px;stroke-linecap: round;stroke-dasharray: 1000;stroke-dashoffset: 1000;}


}

.flow-road-path.is-animating {animation: draw-road 3s ease-out forwards;-webkit-animation: draw-road 3s ease-out forwards;}



@media (min-width:768px) and (max-width:1024px) {
  .road_box .flow-road { position:absolute; right:10%; margin-top:70px; }
  .flow.reverse .road_box .flow-road { position:absolute; left:15%; }


}