/* 
■■■■ flow ■■■■
*/


/* ================
    contents
   ================ */
/* ----------タイトルキャッチ---------- */
  #flow_catch .ca_title{
  margin-top: 50px;
  text-align: center;
  line-height: 40px;
}

#flow_catch .ca_title h1{
	font-size:24px;
}

#flow_catch h1 span br {
  display: none;
  }

#flow_catch .ca_title p{
  font-size: 1rem;
  color: rgb(155, 153, 153);
  font-family: sans-serif;
}

#flow_catch .howto p{
  width: 650px;
  line-height: 30px;
  margin: 40px auto 50px;
}

/* ----------作業の流れ---------- */

#flow_body{
  width: 850px;
  margin: auto;
  
}

/* ---subject---*/
#flow_body .part{
  width: 850px;
  margin-top: 15px;
}
#flow_body .part .subject{
  display: flex;
  height: 40px;
}
#flow_body .part .subject h3{
  height: fit-content;
  margin: auto 10px;
	font-size:20px;
}
#flow_body .part .subject img{
  width: 40px;
  height: auto;
}
/* ---description---*/
#flow_body .description{
  text-align: right;
  border-left: solid 1px;
  margin: 15px 0 10px 20px;
  padding-left: 30px;
  min-height: 200px;
}
#flow_body .description p{
  /* font-family: "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; */
  font-size: 0.9rem;
  width: 530px;
  line-height: 30px;
  display: block;
  /* float: left; */
  text-align: left;
}
#flow_body .description img{
  width: 230px;
  height: auto;
  float: right;
}





@media screen and (max-width: 740px) {
/*表示領域が0～740pxに適用*/

  /* =========================
    contents(max-width: 740px)
    ========================= */
  #flow_catch .ca_title {
    margin-top: 35px;
  }
  #flow_catch  h1 span br {
    display: inline;
  }

  #flow_catch .howto p{
    width: 100%;
    margin: 40px auto;
  }
  #flow_body { 
    width: 100%; 
  }
  #flow_body .part{ 
    width: 100%;
    display: inline-block;
  }
  #flow_body .description{
    border-left: none;
    margin: 15px 0;
    padding-left: 0px;
    min-height: unset;
  }
  
  #flow_body .description p{
    width: 100%; 
  }
  #flow_body .description img{
    width: 33%;
    margin-left: 5px;
  }
}