@charset "UTF-8";

.reserve-title {
  text-align: center;
  margin: 80px 0;
}

.connecting {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 126px 0;
}

.connecting-wrap {
  width: 470px;
  border: 1px #fff solid;
  padding: 0 20px;
}

.connecting-wrap h3 {
  margin: 30px auto;
  border-bottom: 1px #fff solid;
  width: fit-content;
  padding: 8px 0;
}

.connecting-wrap h4 {
  text-align: center;
  border: 2px #D79AB5 solid;
  padding: 10px;
  box-shadow: 2px 3px 10px -3px #D79AB5;
  color: #E63383;
  border-radius: 20px;
}

.connecting-wrap p {
  margin: 30px 0;
  text-align: center;
}

.connecting-wrap ul {
  margin: 40px 0;
}

.flow-wrap img {
  width: 323px;
  margin: 24px auto;
}

.flow-wrap h3,
.flow-wrap p {
  text-align: center;
}

.flow-wrap p {
  width: 410px;
  margin: 10px auto;
}

.flow-wrap p a {
  color: #E63383;
}

.fa-arrow-down-long {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 54px;
  color: #fff;
  margin: 40px;
}

@media screen and (min-width:375px) and (max-width:430px) {
  .connecting {
    display: block;
  }

  .connecting-wrap {
    width: 340px;
    margin: 20px auto;
  }

  .connecting-icon {
    gap: 120px;
  }

  .connecting-icon img {
    width: 60px;
  }

  .flow-wrap img {
    width: 70%;
  }

  .flow-wrap p {
    width: 70%;
  }
}

@media screen and (min-width:768px) and (max-width:960px) {
  .connecting {
    gap: 30px;
  }

  .connecting-wrap {
    width: 354px;
  }
}