/* ========================================

   Flow Page

======================================== */

.flow-page {

  width: 100%;

}


/* ========================================

   Flow Process

======================================== */

.flow-process {

  padding:

    72px

    0

    var(--section-space);

  background-color: var(--color-bg);

}


/* ========================================

   Flow Lead

======================================== */

.flow-process__lead {

  margin-bottom: 58px;

  text-align: center;

}

.flow-process__lead-text {

  margin: 0;

  color: var(--color-text);

  font-family: var(--font-heading);

  font-size: 14px;

  line-height: 2.1;

  letter-spacing: 0.05em;

}

.flow-process__lead-line {

  display: block;

  width: 28px;

  height: 1px;

  margin:

    22px

    auto

    0;

  background-color: var(--color-main);

}


/* ========================================

   Flow Steps

======================================== */

.flow-process__steps {

  position: relative;

  max-width: 1040px;

  margin:

    0

    auto;

}

.flow-process__steps::before {

  content: "";

  position: absolute;

  top: 32px;

  bottom: 32px;

  left: 31px;

  width: 1px;

  background-color: var(--color-main);

}


/* ========================================

   Flow Step

======================================== */

.flow-step {

  position: relative;

  display: grid;

  grid-template-columns:

    64px

    minmax(0, 1fr);

  gap: 30px;

}

.flow-step + .flow-step {

  margin-top: 18px;

}


/* ========================================

   Step Number

======================================== */

.flow-step__number-wrap {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

}

.flow-step__number {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background-color: var(--color-main);

  color: var(--color-white);

  font-family: var(--font-heading);

  font-size: 14px;

  line-height: 1;

  letter-spacing: 0.06em;

}


/* ========================================

   Step Card

======================================== */

.flow-step__card {

  display: grid;

  grid-template-columns:

    minmax(220px, 0.75fr)

    minmax(0, 1.7fr);

  align-items: center;

  min-height: 112px;

  border: 1px solid var(--color-border);

  background-color: var(--color-bg);

}


/* ========================================

   Step Heading

======================================== */

.flow-step__heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  min-width: 0;

  padding:

    24px

    34px;

  border-right: 1px solid var(--color-border);

}

.flow-step__title {

  margin: 0;

  color: var(--color-heading);

  font-family: var(--font-heading);

  font-size: 18px;

  font-weight: 400;

  line-height: 1.6;

  letter-spacing: 0.05em;

}


/* ========================================

   Step Icon

======================================== */

.flow-step__icon {

  flex-shrink: 0;

  display: block;

  width: 56px;

  height: 56px;

  object-fit: contain;

}


/* ========================================

   Step Content

======================================== */

.flow-step__content {

  padding:

    24px

    34px;

}

.flow-step__text {

  margin: 0;

  color: var(--color-text-sub);

  font-size: 11px;

  line-height: 1.9;

  letter-spacing: 0.03em;

}


/* ========================================

   Preparation

======================================== */

.flow-prepare {

  padding:

    72px

    0

    80px;

  background-color: var(--color-bg-sub);

}


/* ========================================

   Preparation Heading

======================================== */

.flow-prepare__heading {

  margin-bottom: 42px;

  text-align: center;

}

.flow-prepare__title {

  margin: 0;

  color: var(--color-main);

  font-family: var(--font-heading);

  font-size: 20px;

  font-weight: 400;

  line-height: 1.6;

  letter-spacing: 0.1em;

}

.flow-prepare__line {

  display: block;

  width: 28px;

  height: 1px;

  margin:

    18px

    auto

    0;

  background-color: var(--color-main);

}


/* ========================================

   Preparation Grid

======================================== */

.flow-prepare__grid {

  display: grid;

  grid-template-columns:

    repeat(4, minmax(0, 1fr));

}


/* ========================================

   Preparation Item

======================================== */

.flow-prepare-item {

  min-width: 0;

  padding:

    8px

    30px

    12px;

  text-align: center;

}

.flow-prepare-item + .flow-prepare-item {

  border-left: 1px solid var(--color-border);

}


/* ========================================

   Preparation Icon

======================================== */

.flow-prepare-item__icon {

  display: block;

  width: 56px;

  height: 56px;

  margin:

    0

    auto

    22px;

  object-fit: contain;

}


/* ========================================

   Preparation Title

======================================== */

.flow-prepare-item__title {

  margin: 0;

  color: var(--color-heading);

  font-family: var(--font-heading);

  font-size: 14px;

  font-weight: 400;

  line-height: 1.7;

  letter-spacing: 0.04em;

}


/* ========================================

   Preparation Text

======================================== */

.flow-prepare-item__text {

  margin:

    14px

    0

    0;

  color: var(--color-text-sub);

  font-size: 11px;

  line-height: 1.9;

  letter-spacing: 0.03em;

}


/* ========================================

   Communication

======================================== */

.flow-communication {

  padding:

    82px

    0;

  background-color: var(--color-bg);

}

.flow-communication__inner {

  display: grid;

  grid-template-columns:

    minmax(0, 0.82fr)

    minmax(0, 1.65fr);

  align-items: center;

  gap: 70px;

  max-width: 1040px;

}


/* ========================================

   Communication Visual

======================================== */

.flow-communication__visual {

  min-width: 0;

  overflow: hidden;

}

.flow-communication__image {

  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;

}


/* ========================================

   Communication Content

======================================== */

.flow-communication__content {

  min-width: 0;

}

.flow-communication__title {

  margin: 0;

  color: var(--color-main);

  font-family: var(--font-heading);

  font-size: 20px;

  font-weight: 400;

  line-height: 1.6;

  letter-spacing: 0.1em;

}

.flow-communication__lead {

  margin:

    18px

    0

    0;

  color: var(--color-text-sub);

  font-size: 12px;

  line-height: 1.9;

  letter-spacing: 0.03em;

}


/* ========================================

   Communication List

======================================== */

.flow-communication__list {

  margin:

    22px

    0

    0;

  padding: 0;

  list-style: none;

}

.flow-communication__list li {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  color: var(--color-text-sub);

  font-size: 11px;

  line-height: 1.9;

  letter-spacing: 0.03em;

}

.flow-communication__list li + li {

  margin-top: 8px;

}

.flow-communication__check {

  flex-shrink: 0;

  color: var(--color-main);

  font-size: 13px;

  font-weight: 600;

}


/* ========================================

   Period & Revision

======================================== */

.flow-info {

  padding:

    0

    0

    92px;

  background-color: var(--color-bg);

}


/* ========================================

   Info Heading

======================================== */

.flow-info__heading {

  margin-bottom: 38px;

  text-align: center;

}

.flow-info__title {

  margin: 0;

  color: var(--color-main);

  font-family: var(--font-heading);

  font-size: 20px;

  font-weight: 400;

  line-height: 1.6;

  letter-spacing: 0.1em;

}

.flow-info__line {

  display: block;

  width: 28px;

  height: 1px;

  margin:

    18px

    auto

    0;

  background-color: var(--color-main);

}


/* ========================================

   Info Grid

======================================== */

.flow-info__grid {

  display: grid;

  grid-template-columns:

    repeat(2, minmax(0, 1fr));

  gap: 20px;

  max-width: 1040px;

  margin:

    0

    auto;

}


/* ========================================

   Info Card

======================================== */

.flow-info-card {

  display: grid;

  grid-template-columns:

    58px

    minmax(0, 1fr);

  align-items: flex-start;

  gap: 22px;

  min-width: 0;

  padding:

    28px

    30px;

  border: 1px solid var(--color-border);

  background-color: var(--color-bg);

}


/* ========================================

   Info Icon

======================================== */

.flow-info-card__icon-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 58px;

  height: 58px;

}

.flow-info-card__icon {

  display: block;

  width: 56px;

  height: 56px;

  object-fit: contain;

}


/* ========================================

   Info Content

======================================== */

.flow-info-card__title {

  margin: 0;

  color: var(--color-heading);

  font-family: var(--font-heading);

  font-size: 14px;

  font-weight: 400;

  line-height: 1.7;

  letter-spacing: 0.05em;

}

.flow-info-card__text {

  margin:

    10px

    0

    0;

  color: var(--color-text-sub);

  font-size: 11px;

  line-height: 1.9;

  letter-spacing: 0.03em;

}


/* ========================================

   Tablet

======================================== */

@media screen and (max-width: 1024px) {

  .flow-process {

    padding:

      64px

      0

      90px;

  }

  .flow-process__lead {

    margin-bottom: 48px;

  }

  .flow-step {

    gap: 24px;

  }

  .flow-step__card {

    grid-template-columns:

      minmax(200px, 0.8fr)

      minmax(0, 1.5fr);

  }

  .flow-step__heading {

    padding:

      22px

      26px;

  }

  .flow-step__content {

    padding:

      22px

      26px;

  }

  .flow-step__icon {

    width: 50px;

    height: 50px;

  }


  /* Preparation */

  .flow-prepare {

    padding:

      68px

      0

      74px;

  }

  .flow-prepare__grid {

    grid-template-columns:

      repeat(2, minmax(0, 1fr));

    row-gap: 40px;

  }

  .flow-prepare-item {

    padding:

      8px

      34px

      12px;

  }

  .flow-prepare-item:nth-child(3) {

    border-left: none;

  }


  /* Communication */

  .flow-communication {

    padding:

      72px

      0;

  }

  .flow-communication__inner {

    grid-template-columns:

      minmax(0, 0.9fr)

      minmax(0, 1.4fr);

    gap: 48px;

  }


  /* Info */

  .flow-info {

    padding-bottom: 82px;

  }

  .flow-info-card {

    padding:

      26px

      24px;

  }

}


/* ========================================

   Smartphone

======================================== */

@media screen and (max-width: 768px) {

  .flow-process {

    padding:

      56px

      0

      var(--section-space-sm);

  }


  /* ========================================
     Lead
  ======================================== */

  .flow-process__lead {

    margin-bottom: 42px;

    text-align: left;

  }

  .flow-process__lead-text {

    font-size: 13px;

    line-height: 2;

  }

  .flow-process__lead-text br {

    display: none;

  }

  .flow-process__lead-line {

    margin:

      20px

      0

      0;

  }


  /* ========================================
     Steps
  ======================================== */

  .flow-process__steps::before {

    top: 26px;

    bottom: 26px;

    left: 22px;

  }

  .flow-step {

    grid-template-columns:

      46px

      minmax(0, 1fr);

    gap: 14px;

  }

  .flow-step + .flow-step {

    margin-top: 16px;

  }


  /* ========================================
     Number
  ======================================== */

  .flow-step__number-wrap {

    align-items: flex-start;

    padding-top: 18px;

  }

  .flow-step__number {

    width: 38px;

    height: 38px;

    font-size: 12px;

  }


  /* ========================================
     Card
  ======================================== */

  .flow-step__card {

    display: block;

    min-height: 0;

  }


  /* ========================================
     Heading
  ======================================== */

  .flow-step__heading {

    padding:

      22px

      16px

      18px;

    border-right: none;

    border-bottom: 1px solid var(--color-border);

  }

  .flow-step__title {

    font-size: 16px;

  }

  .flow-step__icon {

    width: 50px;

    height: 50px;

  }


  /* ========================================
     Content
  ======================================== */

  .flow-step__content {

    padding:

      18px

      16px

      20px;

  }

  .flow-step__text {

    font-size: 11px;

    letter-spacing: 0.01em;

    text-wrap: pretty;

  }

  .flow-step__text br {

    display: none;

  }


  /* ========================================
     Preparation
  ======================================== */

  .flow-prepare {

    padding:

      58px

      0

      64px;

  }

  .flow-prepare__heading {

    margin-bottom: 34px;

    text-align: left;

  }

  .flow-prepare__title {

    font-size: 18px;

  }

  .flow-prepare__line {

    margin:

      16px

      0

      0;

  }

  .flow-prepare__grid {

    display: block;

  }

  .flow-prepare-item {

    display: grid;

    grid-template-columns:

      54px

      minmax(0, 1fr);

    grid-template-rows:

      54px

      auto;

    align-items: center;

    column-gap: 22px;

    row-gap: 14px;

    padding:

      24px

      0;

    text-align: left;

  }

  .flow-prepare-item + .flow-prepare-item {

    border-top: 1px solid var(--color-border);

    border-left: none;

  }

  .flow-prepare-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

  .flow-prepare-item__icon {

    grid-column: 1;

    grid-row: 1;

    align-self: center;

    width: 54px;

    height: 54px;

    margin: 0;

  }

  .flow-prepare-item__title {

    grid-column: 2;

    grid-row: 1;

    align-self: center;

    margin: 0;

    font-size: 14px;

    line-height: 1.7;

  }

  .flow-prepare-item__text {

    grid-column:

      1

      / -1;

    grid-row: 2;

    margin: 0;

    font-size: 12px;

    letter-spacing: 0.01em;

    line-height: 1.9;

    text-wrap: pretty;

  }

  .flow-prepare-item__text br {

    display: none;

  }


  /* ========================================
     Communication
  ======================================== */

  .flow-communication {

    padding:

      58px

      0

      64px;

  }

  .flow-communication__inner {

    display: block;

  }

  .flow-communication__visual {

    margin-bottom: 32px;

  }

  .flow-communication__title {

    font-size: 18px;

  }

  .flow-communication__lead {

    margin-top: 16px;

    font-size: 12px;

  }

  .flow-communication__list {

    margin-top: 20px;

  }


  /* ========================================
     Period & Revision
  ======================================== */

  .flow-info {

    padding:

      0

      0

      64px;

  }

  .flow-info__heading {

    margin-bottom: 30px;

    text-align: left;

  }

  .flow-info__title {

    font-size: 18px;

  }

  .flow-info__line {

    margin:

      16px

      0

      0;

  }

  .flow-info__grid {

    display: block;

  }

  .flow-info-card {

    grid-template-columns:

      46px

      minmax(0, 1fr);

    gap: 18px;

    padding:

      24px

      20px;

  }

  .flow-info-card + .flow-info-card {

    margin-top: 16px;

  }

  .flow-info-card__icon-wrap {

    width: 46px;

    height: 46px;

  }

  .flow-info-card__icon {

    width: 46px;

    height: 46px;

  }

  .flow-info-card__text br {

    display: none;

  }

}