@charset "utf-8";
/* CSS Document */
.center {
  display: flex;
  justify-content: center;
  margin: 40px 0 0;
}
.flow{
  padding-bottom: 60px;
}
.flow_block{
  max-width: 1024px;
  width: 90%;
  margin: 40px auto 0;
  padding: 50px 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  --main-color: #04378C;
  --bg-color: #04378C1A;
  background: var(--bg-color);
  &:nth-child(2){
  --main-color: #04498C;
  --bg-color: #04498C1A;
  }
  &:nth-child(3){
  --main-color: #04558C;
  --bg-color: #04558C1A;
  }
  &:nth-child(4){
  --main-color: #04628C;
  --bg-color: #04628C1A;
  }
  &:nth-child(5){
  --main-color: #046E8C;
  --bg-color: #046E8C1A;
  }
  &:nth-child(6){
  --main-color: #04808C;
  --bg-color: #04808C1A;
  }
  &:nth-child(7){
  --main-color: #048C81;
  --bg-color: #048C811A;
  }
}
.flow_box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 520px;
  line-height: 2;
}
.flow_head {
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--main-color);
  display: flex;
  align-items: center;
}
.flow_num {
  display: flex;
  width: 31px;
  min-width: 31px;
  height: 31px;
  line-height: 0;
  justify-content: center;
  align-items: center;
  background: var(--main-color);
  color: #fff;
  margin-right: 15px;
}
@media screen and ( max-width: 1023px ) {

}
@media screen and ( max-width: 767px ) {
.intro {
  padding: 0;
}
.flow_block{
  flex-direction: column;
  align-items: center;
  padding: 40px 5%;
  gap:30px;
}
.flow_head {
  align-items: baseline;
  line-height: 1.5;
}
}