@charset "UTF-8";
@import url("base.css");

/* =========================================================
面接までの流れ
========================================================= */
#flow{ padding-bottom: 80px;}
#flow .flow_inner{ box-sizing: border-box; background: #fff; border-radius: 10px; padding: 30px 0;}

.step_wrap{ width: 1140px; margin: 0 auto; position: relative;}

.step_wrap.step01,
.step_wrap.step02,
.step_wrap.step03{ height: 440px; margin-bottom: 20px;}
.step_wrap.step04{ height: 380px;}

.step_wrap.step01{ background: url(../images_design/flow/bg1.png) center top no-repeat;}
.step_wrap.step02{ background: url(../images_design/flow/bg2.png) center top no-repeat;}
.step_wrap.step03{ background: url(../images_design/flow/bg3.png) center top no-repeat;}
.step_wrap.step04{ background: url(../images_design/flow/bg4.png) center top no-repeat; margin-bottom: 40px;}

.step_wrap .step_inner{ box-sizing: border-box; width: 470px; position: absolute; top: 37px; left: 290px;}

.step_wrap .step_inner h3{ height: 46px; line-height: 46px; text-align: center; border-radius: 23px; background: #fff; color: #f1227e; font-size: 20px; font-weight: bold; margin-bottom: 30px;}
.step_wrap .step_inner h4{ background: #f1227e; color: #fff; text-align: center; border-radius: 8px; font-size: 18px; margin-bottom: 20px; padding: 10px 0;}
.step_wrap .step_inner .txt{ font-size: 18px;}

.step_wrap.step01 ul{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px;}
.step_wrap.step01 li{ box-sizing: border-box; width: 230px; background: #f1227e; color: #fff; text-align: center; border-radius: 8px; font-size: 18px; margin-bottom: 10px; padding: 10px 0;}

.btn_contact{ width: 80%; text-align: center; margin: 0 auto;}
.btn_contact img{ width: 100%;}