@charset "utf-8";

#main .headding {
  margin: calc(24 * 100vw / 750);
}
#main .flow_item:not(:first-child):before {
  display: block;
  content: "";
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  width: 100%;
  height: calc(120 * 100vw / 750);
}
#main .flow_item:nth-of-type(2) {
  background: #f2f2f2;
}
#main .flow_item:nth-of-type(2)::before {
  background: #fff;
}
#main .flow_item:nth-of-type(3) {
  background: #e5e5e5;
}
#main .flow_item:nth-of-type(3)::before {
  background: #f2f2f2;
}
#main .flow_inner {
  padding: calc(64 * 100vw / 750) calc(72 * 100vw / 750);
  text-align: center;
}
#main .flow_inner:last-child {
  padding-bottom: calc(160 * 100vw / 750);
}
#main .flow_img {
  margin-inline: auto;
  margin-bottom: calc(52 * 100vw / 750);
  width: calc(280 * 100vw / 750);
}
#main .flow_step {
  font-family: "korolev", sans-serif;
  margin-inline: auto;
  margin-bottom: calc(12 * 100vw / 750);
  padding-top: calc(8 * 100vw / 750);
  width: calc(188 * 100vw / 750);
  font-size: calc(44 * 100vw / 750);
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: .1em;
  border-radius: calc(6 * 100vw / 750);
  background: var(--color-sub-base);
  color: #fff;
}
#main .flow_title {
  font-size: calc(48 * 100vw / 750);
  font-weight: bold;
}
#main .flow_desc {
  font-size: calc(32 * 100vw / 750);
  text-align: justify;
}
#main .flow_desc a {
  font-weight: bold;
}

@media screen and (min-width: 920px) {
#main .headding {
  margin: 20px;
}
#main .flow_item:not(:first-child):before {
  height: 96px;
}
#main .flow_inner {
  padding: 52px 60px;
}
#main .flow_inner:last-child {
  padding-bottom: 120px;
}
#main .flow_img {
  margin-inline: auto;
  margin-bottom: 40px;
  width: 224px;
}
#main .flow_step {
  margin-bottom: 10px;
  padding-top: 6px;
  width: 150px;
  font-size: 32px;
  border-radius: 4px;
}
#main .flow_title {
  font-size: 36px;
}
#main .flow_desc {
  font-size: 24px;
}
#main .flow_desc a.link {
  font-size: 20px;
  gap: 0 6px;
}
#main .flow_desc a.link::before {
  width: 20px;
  height: 20px;
}
}