@charset "UTF-8";

/* ========================================
  project: Housing Loan Preorder Flow
======================================== */

.c-form-flow--preorder {
  --form-flow-size: 44px;
  --form-flow-gap: clamp(40px, 8vw, 88px);
  --form-flow-line-width: calc(var(--form-flow-gap) - 20px);
  --form-flow-active: var(--color-primary, #313C95);
  --form-flow-text-active: var(--color-primary, #313C95);
  --form-flow-inactive: var(--c-form-color-gray-6, #8b8b8b);

}

.c-form-flow--preorder .c-form-flow__item {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}

.c-form-flow--preorder .c-form-flow__item::after,
.c-form-flow--preorder .c-form-flow__item:not(:last-child)::after {
  align-items: center;
  justify-content: center;
}

.c-form-flow--preorder .c-form-flow__item:nth-child(5)::before {
  content: "";
}

.c-form-flow--preorder .c-form-flow__item:nth-child(6) {
  margin-left: 0;
}

.c-form-flow--preorder .c-form-flow__item:nth-child(6)::before {
  content: none;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .c-form-flow--preorder {
    --form-flow-size: 44px;
    --form-flow-gap: clamp(30px, 5vw, 52px);
    --form-flow-line-width: calc(var(--form-flow-gap) - 14px);

    flex-wrap: nowrap;
    gap: var(--form-flow-gap);
  }

  .c-form-flow--preorder .c-form-flow__item {
    width: var(--form-flow-size);
    min-height: 81px;
    flex: 0 0 var(--form-flow-size);
    padding-top: calc(var(--form-flow-size) + 8px);
    font-size: 16px;
  }

  .c-form-flow--preorder .c-form-flow__item::after,
  .c-form-flow--preorder .c-form-flow__item:not(:last-child)::after {
    width: var(--form-flow-size);
    height: var(--form-flow-size);
    font-size: 20px;
  }

  .c-form-flow--preorder .c-form-flow__item:not(:last-child)::before {
    top: calc(var(--form-flow-size) / 2);
    left: calc(100% + 7px);
    width: var(--form-flow-line-width);
  }

  .c-form-flow--preorder .c-form-flow__label {
    font-size: 16px;
    line-height: 1.8;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .c-form-flow--preorder {
    --form-flow-size: 44px;
    --form-flow-gap: clamp(34px, 5vw, 56px);
    --form-flow-line-width: calc(var(--form-flow-gap) - 14px);

    gap: var(--form-flow-gap);
  }
}

/* preorder-flow-sp-375-tuning:start */
/* preorder-flow-sp-375-tuning:end */

/* preorder-flow-sp-figma-refine:start */
/* preorder-flow-sp-figma-refine:end */

/* preorder-flow-final-unify:start */
@media screen and (min-width: 768px) {
  .p-preorder-definition__flow,
  .l-form-page__flow {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .c-form-flow--preorder .c-form-flow__item:nth-child(5)::before {
    content: "" !important;
  }

  .c-form-flow--preorder .c-form-flow__item:nth-child(6) {
    margin-left: 0 !important;
  }

  .c-form-flow--preorder .c-form-flow__label {
    white-space: nowrap !important;
  }
}

@media screen and (max-width: 767px) {
  .p-preorder-definition__flow,
  .l-form-page__flow {
    max-width: 100% !important;
    overflow: visible !important;
  }

}
/* preorder-flow-final-unify:end */

/* preorder-flow-label-align-20260719:start */

@media screen and (max-width: 767px) {
  .c-form-flow--preorder .c-form-flow__item {
    display: flex !important;
    justify-content: center !important;
  }

  .c-form-flow--preorder .c-form-flow__label {
    justify-self: center !important;
  }
}
/* preorder-flow-label-align-20260719:end */

/* preorder-flow-label-center-review6-20260719:start */

@media screen and (max-width: 767px) {
  .c-form-flow--preorder .c-form-flow__item {
    align-items: flex-start !important;
  }

  .c-form-flow--preorder .c-form-flow__label {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
/* preorder-flow-label-center-review6-20260719:end */

/* preorder-flow-final-review7-20260719:start */

.c-form-flow--preorder {
  box-sizing: border-box !important;
}

/* preorder-flow-final-review7-20260719:end */

/* preorder-flow-final-review8-20260719:start */

.c-form-flow--preorder .c-form-flow__item {
  box-sizing: border-box !important;
}

.c-form-flow--preorder .c-form-flow__label {
  right: auto !important;
}

@media screen and (min-width: 768px) {
  .p-preorder-definition__flow,
  .l-form-page__flow {
    justify-content: center !important;
  }

  .c-form-flow--preorder {
    --form-flow-size: 44px;
    --form-flow-gap: clamp(30px, 5vw, 56px);
    --form-flow-line-width: calc(var(--form-flow-gap) - 14px);

    width: fit-content !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: var(--form-flow-gap) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .c-form-flow--preorder .c-form-flow__item {
    width: var(--form-flow-size) !important;
    min-height: 81px !important;
    flex: 0 0 var(--form-flow-size) !important;
    padding-top: calc(var(--form-flow-size) + 8px) !important;
    font-size: 16px !important;
  }

  .c-form-flow--preorder .c-form-flow__item::after,
  .c-form-flow--preorder .c-form-flow__item:not(:last-child)::after {
    width: var(--form-flow-size) !important;
    height: var(--form-flow-size) !important;
    font-size: 20px !important;
  }

  .c-form-flow--preorder .c-form-flow__item:not(:last-child)::before {
    top: calc(var(--form-flow-size) / 2) !important;
    left: calc(100% + 7px) !important;
    width: var(--form-flow-line-width) !important;
    content: "" !important;
  }

  .c-form-flow--preorder .c-form-flow__item:nth-child(6)::before,
  .c-form-flow--preorder .c-form-flow__item:last-child::before {
    content: none !important;
  }

  .c-form-flow--preorder .c-form-flow__label {
    top: calc(var(--form-flow-size) + 8px) !important;
    width: 90px !important;
    max-width: 90px !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
  }
}

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

  .c-form-flow--preorder {
    --form-flow-gap: 24px;
    --form-flow-line-width: 24px;

  }

  .c-form-flow--preorder .c-form-flow__item {
    font-size: 12px !important;
  }

}
/* preorder-flow-final-review8-20260719:end */

/* preorder-flow-content-width-20260719:start */
@media screen and (max-width: 767px) {
  .p-preorder-definition__flow,
  .l-form-page__flow {
    width: 100% !important;
  }

  .c-form-flow--preorder {
    --form-flow-size: 32px;

    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .c-form-flow--preorder .c-form-flow__item {
    text-align: center !important;
  }

  .c-form-flow--preorder .c-form-flow__item::after,
  .c-form-flow--preorder .c-form-flow__item:not(:last-child)::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .c-form-flow--preorder .c-form-flow__item:not(:last-child)::before {
    content: "" !important;
  }

  .c-form-flow--preorder .c-form-flow__label {
    top: 38px !important;
    left: 50% !important;
    width: 56px !important;
    max-width: 56px !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}
/* preorder-flow-content-width-20260719:end */

/* figma-flow-17273-87824-20260729:start
 * PC: circle 44px / item gap 100px / connector 80px / label gap 8px
 */
.p-preorder-definition__flow,
.l-form-page__flow {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center !important;
  overflow: visible !important;
}

.c-form-flow--preorder {
  --preorder-flow-size: 44px;
  --preorder-flow-gap: 100px;
  --preorder-flow-line: 80px;
  --preorder-flow-active: var(--color-primary, #313C95);
  --preorder-flow-active-line: var(--color-primary, #313C95);
  --preorder-flow-active-text: var(--color-primary, #313C95);
  --preorder-flow-inactive: var(--c-form-color-gray-5, #8b8b8b);
  --preorder-flow-inactive-line: var(--c-form-color-border, #b9b9b9);
  --preorder-flow-inactive-text: var(--c-form-color-gray-6, #636363);

  display: flex !important;
  width: max-content !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: var(--preorder-flow-gap) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
  counter-reset: preorder-flow !important;
}

.c-form-flow--preorder .c-form-flow__item {
  position: relative !important;
  display: flex !important;
  width: var(--preorder-flow-size) !important;
  min-width: var(--preorder-flow-size) !important;
  min-height: 81px !important;
  flex: 0 0 var(--preorder-flow-size) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: calc(var(--preorder-flow-size) + 8px) 0 0 !important;
  color: var(--preorder-flow-inactive-text) !important;
  text-align: center !important;
  white-space: nowrap !important;
  counter-increment: preorder-flow !important;
}

/* step circle */
.c-form-flow--preorder .c-form-flow__item::after,
.c-form-flow--preorder .c-form-flow__item:not(:last-child)::after {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  display: grid !important;
  width: var(--preorder-flow-size) !important;
  height: var(--preorder-flow-size) !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--preorder-flow-inactive) !important;
  color: #fff !important;
  content: counter(preorder-flow) !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateX(-50%) !important;
}

/* connector: 10px space at both ends */
.c-form-flow--preorder .c-form-flow__item:not(:last-child)::before {
  position: absolute !important;
  top: calc(var(--preorder-flow-size) / 2) !important;
  left: calc(100% + 10px) !important;
  display: block !important;
  width: var(--preorder-flow-line) !important;
  height: 1px !important;
  border: 0 !important;
  background: var(--preorder-flow-inactive-line) !important;
  content: "" !important;
  transform: translateY(-50%) !important;
}

.c-form-flow--preorder .c-form-flow__item.is-current,
.c-form-flow--preorder .c-form-flow__item.is-complete {
  color: var(--preorder-flow-active-text) !important;
}

.c-form-flow--preorder .c-form-flow__item.is-current::after,
.c-form-flow--preorder .c-form-flow__item.is-complete::after {
  background: var(--preorder-flow-active) !important;
}

.c-form-flow--preorder .c-form-flow__item.is-current:not(:last-child)::before,
.c-form-flow--preorder .c-form-flow__item.is-complete:not(:last-child)::before {
  background: var(--preorder-flow-active-line) !important;
}

.c-form-flow--preorder .c-form-flow__label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  color: inherit !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.8 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
}

.c-form-flow--preorder .c-form-flow__label::before {
  content: none !important;
}

.c-form-flow--preorder .c-form-flow__label::after {
  content: "." counter(preorder-flow) !important;
}

.c-form-flow--preorder .c-form-flow__label--plain::after {
  content: none !important;
}

.c-form-flow--preorder .c-form-flow__num,
.c-form-flow--preorder .c-form-flow__number {
  display: none !important;
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .c-form-flow--preorder {
    --preorder-flow-gap: clamp(36px, 7vw, 80px);
    --preorder-flow-line: calc(var(--preorder-flow-gap) - 20px);
  }
}

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

  .c-form-flow--preorder .c-form-flow__item {
    min-height: 58px !important;
  }

  .c-form-flow--preorder .c-form-flow__item:not(:last-child)::before {
    top: calc(var(--preorder-flow-size) / 2) !important;
    left: calc(50% + (var(--preorder-flow-size) / 2)) !important;
    width: calc(100% - var(--preorder-flow-size)) !important;
  }

  .c-form-flow--preorder .c-form-flow__item:nth-child(6)::before,
  .c-form-flow--preorder .c-form-flow__item:last-child::before {
    content: none !important;
  }

}
/* figma-flow-17273-87824-20260729:end */

/* preorder-flow-sp-5perrow-20260910:start
 * スマホ表示（767px以下）は1行あたり最大5ステップまでとし、6番目以降は2行目へ折り返す。
 * ステップ間の余白は24px、円の直径は32pxを維持する。
 */
@media screen and (max-width: 767px) {
  .p-preorder-definition__flow,
  .l-form-page__flow {
    justify-content: flex-start !important;
  }

  .c-form-flow--preorder {
    --preorder-flow-size: 32px;
    --preorder-flow-item-width: calc((100% - 24px * 4) / 5);

    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 24px !important;
  }

  .c-form-flow--preorder .c-form-flow__item {
    width: var(--preorder-flow-item-width) !important;
    min-width: 0 !important;
    flex: 0 0 var(--preorder-flow-item-width) !important;
    padding-top: 40px !important;
  }

  .c-form-flow--preorder .c-form-flow__item::after,
  .c-form-flow--preorder .c-form-flow__item:not(:last-child)::after {
    width: var(--preorder-flow-size) !important;
    height: var(--preorder-flow-size) !important;
    font-size: 18px !important;
  }

  /* 1〜4番目：次のステップの円まで連結線をつなぐ（円の右端から次の円の左端まで）
     ※ここでの100%は自身（.c-form-flow__item）の幅を指す。 */
  .c-form-flow--preorder .c-form-flow__item:not(:nth-child(5)):not(:nth-child(6)):not(:last-child)::before {
    top: calc(var(--preorder-flow-size) / 2) !important;
    left: calc(50% + (var(--preorder-flow-size) / 2)) !important;
    width: calc(100% - var(--preorder-flow-size) + 24px) !important;
    content: "" !important;
  }

  /* 5番目は1行目の末尾のため連結線を表示しない（続きは2行目の6番目の手前に表示する） */
  .c-form-flow--preorder .c-form-flow__item:nth-child(5)::before {
    content: none !important;
  }

  /* 6番目：2行目の先頭。5番目から続く連結線を左側の余白に短く表示する */
  .c-form-flow--preorder .c-form-flow__item:nth-child(6) {
    margin-left: 24px !important;
  }

  .c-form-flow--preorder .c-form-flow__item:nth-child(6)::before {
    position: absolute !important;
    top: calc(var(--preorder-flow-size) / 2) !important;
    left: -24px !important;
    display: block !important;
    width: calc(24px + 50% - (var(--preorder-flow-size) / 2)) !important;
    height: 1px !important;
    border: 0 !important;
    background: var(--preorder-flow-inactive-line) !important;
    content: "" !important;
    transform: translateY(-50%) !important;
  }

  .c-form-flow--preorder .c-form-flow__item:nth-child(6).is-current::before,
  .c-form-flow--preorder .c-form-flow__item:nth-child(6).is-complete::before {
    background: var(--preorder-flow-active-line) !important;
  }

  .c-form-flow--preorder .c-form-flow__label {
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
}
/* preorder-flow-sp-5perrow-20260910:end */