@charset "utf-8";
.page_title {
  &::before {
    background: url(../../img/page_title.png) no-repeat left bottom;
    background-size: cover;
  }
}
.breadcrumb {
  margin-bottom: 40px;
}

.intro_txt {
  width: 90%;
  max-width: 1024px;
  margin: 0 auto 44px;
  color: var(--dark-blue);
  font-size: 2.4rem;
  letter-spacing: 2.4px;
  line-height: 1.7;
  font-weight: bold;
  display: flex;
  justify-content: center;
  @media screen and (max-width: 767px) {
    font-size: 2rem;
    letter-spacing: 2px;
  }
}

.flow_sec {
  padding-bottom: 120px;
  @media screen and (max-width: 767px) {
    padding-bottom: 48px;
  }
}
.flow_art {
  position: relative;
  width: 100%;
  margin-bottom: 104px;
  &:last-child {margin-bottom: 0;}
  &::before {
    content: '';
    position: absolute;
    background: url(../img/tri_01.png)no-repeat center;
    background-size: contain;
    width: 93px;
    height: 42px;
    bottom: -76px;
    right: 0;
    left: 0;
    margin: auto;
  }
}
.flow_art:nth-child(2)::before {
  background: url(../img/tri_02.png)no-repeat center;
  background-size: contain;
}
.flow_art:nth-child(3)::before {
  background: url(../img/tri_03.png)no-repeat center;
  background-size: contain;
}
.flow_art:nth-child(4)::before {
  background: url(../img/tri_04.png)no-repeat center;
  background-size: contain;
}
.flow_art:nth-child(5)::before {
  background: url(../img/tri_05.png)no-repeat center;
  background-size: contain;
}
.flow_art:nth-child(6)::before {
  background: url(../img/tri_06.png)no-repeat center;
  background-size: contain;
}
.flow_art:nth-child(7)::before {
  display: none;
}


.flow_ttl {
  position: relative;
  width: 100%;
  border-radius: 0 50px 0 0;
  padding: 30px;
  padding-left: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  font-size: 3.6rem;
  letter-spacing: 1.8px;
  color: #fff;
  span {
    min-width: 90px;
    font-size: 6.4rem;
    font-weight: 700;
    font-family: var(--en-font);
    color: var(--sub-color);
  }
  @media screen and (max-width: 767px) {
    font-size: 2.4rem;
    letter-spacing: 2.4px;
    padding: 20px;
    padding-left: 30px;
    span {
      min-width: 42px;
      font-size: 2.8rem;
      /* margin-top: 2px; */
    }
  }
}
.flow_art:nth-child(1) .flow_ttl {background: #0D368A;}
.flow_art:nth-child(2) .flow_ttl {background: #114998;}
.flow_art:nth-child(3) .flow_ttl {background: #145DA5;}
.flow_art:nth-child(4) .flow_ttl {background: #1870B3;}
.flow_art:nth-child(5) .flow_ttl {background: #1D85C2;}
.flow_art:nth-child(6) .flow_ttl {background: #2199D0;}
.flow_art:nth-child(7) .flow_ttl {background: #25ABDD;}

.flow_flex {
  position: relative;
  width: 100%;
  min-height: 240px;
  background: #EFF8FF;
  border-radius: 0 0 0 50px;
  padding: 40px 64px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px 56px;
  @media screen and (max-width: 767px) {
    padding: 40px 5%;
    flex-direction: column;
    align-items: center;
  }
}
.flow_flex--txt {
  width: 100%;
  max-width: 500px;
  .cmn_link {
    margin-left: 0;
  }
  & + figure {
    position: absolute;
    top: -40px;
    right: 64px;
  }
  @media screen and (max-width: 767px) {
    .cmn_link {
      margin-left: auto;
    }
    & + figure {
      position: relative;
      top: auto;
      right: auto;
    }
  }
}
.flow_flex--txt span.indent {
  display: block;
}