@charset 'UTF-8';
/*----------------------------------------

	- first
		- flow

-----------------------------------------*/

/*----------------------------------------
first
-----------------------------------------*/
.first {
  margin-top: 48px;
}

.first > p {
  text-align: center;
}

.first > p > span {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.first > p > span::before,
.first > p > span::after {
  width: 1px;
  height: 48px;
  content: "";
  background-color: var(--color_cmn-heading);
}

.first > p > span::before {
  margin-right: 16px;
  transform-origin: bottom right;
  transform: rotate(-30deg);
}

.first > p > span::after {
  margin-left: 16px;
  transform-origin: bottom left;
  transform: rotate(30deg);
}

@media screen and (max-width: 800px) {
  .first > p {
    font-size: var(--font-size18);
  }
}

/*----------------------------------------
flow
-----------------------------------------*/

.flow {
  margin-block-start: 48px;
  margin-inline: auto;
  max-width: 800px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.flow li {
  display: grid;
  grid-template-columns: 208px 1fr;
  gap: 48px;
}

.flow .flow_left {
  display: flex;
  align-items: flex-start;
}

.flow .flow_left .step {
  display: block;
  width: 184px;
  height: 70px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.flow.first_flow li:nth-of-type(1) .flow_left .step {
  background-image: url(/first/img/i03_step01.svg);
}

.flow.first_flow li:nth-of-type(2) .flow_left .step {
  background-image: url(/first/img/i03_step02.svg);
}

.flow.first_flow li:nth-of-type(3) .flow_left .step {
  background-image: url(/first/img/i03_step03.svg);
}

.flow.first_flow li:nth-of-type(4) .flow_left .step {
  background-image: url(/first/img/i03_step04.svg);
}

.flow .flow_left .icon_box {
  height: 100%;
  position: relative;
}

.flow .flow_left .icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--color_cmn-line);
  border-radius: 50%;
  margin-top: calc(35px - 12px);
  position: relative;
  z-index: 1;
}

.flow:not(:has(li.current)) .flow_left .icon {
  background-color: var(--color_aquamarine-500);
}

.flow li.current .flow_left .icon,
.flow li:not(.current ~ li) .flow_left .icon {
  background-color: var(--color_aquamarine-500);
}

.flow li.current .flow_left .icon::after,
.flow:has(.current) li:not(.current ~ li) .flow_left .icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: 100%;
  height: 100%;
  background-color: var(--color_white);
  mask-image: var(--ic_check-mark);
  mask-repeat: no-repeat;
  mask-size: auto;
  mask-position: center;
  z-index: 2;
}

.flow li:not(:last-of-type) .flow_left .icon_box::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: 4px;
  height: calc(100% + 48px);
  background-color: var(--color_cmn-line);
}

.flow .flow_right {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.flow .flow_right .heading_m2 {
  margin-top: calc(35px - 18px);
}

@media screen and (max-width: 800px) {
  .flow {
    margin-block-start: 32px;
    max-width: 640px;
    gap: 32px;
  }

  .flow li {
    grid-template-columns: 117px 1fr;
    gap: 12px;
  }

  .flow .flow_left .step {
    display: block;
    height: 40px;
  }

  .flow .flow_left .icon {
    margin-top: calc(20px - 12px);
  }

  .flow li:not(:last-of-type) .flow_left .icon_box::before {
    top: 20px;
    height: calc(100% + 32px);
  }

  .flow .flow_right {
    gap: 10px;
  }

  .flow .flow_right .heading_m2 {
    margin-top: calc(20px - 13.5px);
    font-size: var(--font-size18);
  }

  .flow .flow_right .font16 {
    font-size: var(--font-size14);
  }
}