@charset "UTF-8";
#flow .l_container {
 max-width: 1000px;
 width: calc(100% - 100px);
 margin: 0 auto;
}
@media (max-width:820px) {
 #flow .l_container {
  width: 90%;
 }
}
#flow .flow__list {
 position: relative;
}
#flow .flow__list::before {
 content: '';
 position: absolute;
 top: 0;
 left: 160px;
 height: 100%;
 width: 2px;
 background-color: #0d4394;
}
@media (max-width:820px) {
 #flow .flow__list::before {
  left: 50%;
 }
}
#flow .flow__item {
 display: flex;
 justify-content: center;
 flex-direction: row-reverse;
 border: 2px solid #0d4394;
 border-radius: 10px;
 margin-bottom: 8rem;
 padding: 40px 50px 40px 0;
 background: #fff;
 position: relative;
 z-index: 2;
}
@media (max-width:820px) {
 #flow .flow__item {
  display: block;
  padding: 20px;/*40px 20px;*/
 }
}
#flow .flow__item:last-child {
 margin-bottom: 0;
}
#flow .flow__body {
 width: 60%;
}
@media (max-width:820px) {
 #flow .flow__body {
  width: 100%;
 }
}
#flow .flow__title {
 display: flex;
 align-items: center;
 color: #0d4394;
 font-weight: bold;
 margin: 10px 0 30px;
 gap: 25px;
 line-height: 1.2;
}
@media (max-width:820px) {
 #flow .flow__title {
  gap: 15px;
  margin: 0 0 20px;
 }
}
#flow .flow__num {
 font-size: 50px;
  line-height: 1;
}
#flow .flow__desc {
 text-align: justify;
}
@media (max-width:820px) {
 #flow .flow__desc {
  margin-bottom: 15px;
 }
}
#flow .flow__media {
 width: 40%;
 max-width: 374px;
 transform: translateX(-50px);
}
@media (max-width:820px) {
 #flow .flow__media {
  width: 100%;
  transform: translateX(0);
  margin: 0 auto;
 }
}