@charset "UTF-8";

/* --------------------------------------------------------------------------
  LAYOUT
-------------------------------------------------------------------------- */
.l-hero__block__image {
  max-width: calc(94 / var(--font-size) * 1rem);
  width: 100%;
  right: calc(-10 / var(--font-size) * 1rem);
  bottom: calc(-62 / var(--font-size) * 1rem);
}
.l-container__body {
  padding-block: calc(40 / var(--font-size) * 1rem) calc(48 / var(--font-size) * 1rem);
}

@media all and (min-width: 820px), print {
  .l-hero__block__image {
    max-width: calc(94 / var(--font-size) * 1rem);
    width: 100%;
    bottom: calc(-49 / var(--font-size) * 1rem);
  }
  .l-container__body {
    padding-block: calc(40 / var(--font-size) * 1rem) calc(48 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  PRODUCT
-------------------------------------------------------------------------- */

.flow-section {
  margin-top: calc(56 / var(--font-size) * 1rem);
}
.flow-section .l-section__inner {
  padding-left: 0;
  padding-right: 0;
}
.c-section-title.c-section-title--twoline-02.flow-section-title{
  gap: 0;
}

.attention-detail-list {
  margin-top: calc(24 / var(--font-size) * 1rem);
}

.attention-detail-list.c-list .c-list__item__icon:before {
  content: "";
  background-color: var(--color-btn-02);
  border-radius: 100%;
  display: block;
  width: calc(6 / var(--font-size) * 1rem);
  height: calc(6 / var(--font-size) * 1rem);
  position: relative;
  top: calc(9 / var(--font-size) * 1rem);
  left: calc(2 / var(--font-size) * 1rem);
}

.attention-detail-list.c-list .c-list__item__label {
  line-height: 1.5;
  color: var(--color-btn-02);
}

.attention-annotation{
  margin-top: calc(16 / var(--font-size) * 1rem);
}

.attention-annotation .c-list__item{
  justify-content: center;
}

@media all and (min-width: 820px), print {
  .flow-section {
    margin-top: calc(56 / var(--font-size) * 1rem);
  }
  .flow-section .l-section__inner {
    padding-left: 0;
    padding-right: 0;
  }
  .c-section-title.c-section-title--twoline-02.flow-section-title{
    gap: 0;
  }

  .attention-detail-list {
    margin-top: calc(24 / var(--font-size) * 1rem);
  }

  .attention-detail-list.c-list .c-list__item__icon:before {
    content: "";
    background-color: var(--color-btn-02);
    border-radius: 100%;
    display: block;
    width: calc(6 / var(--font-size) * 1rem);
    height: calc(6 / var(--font-size) * 1rem);
    position: relative;
    top: calc(9 / var(--font-size) * 1rem);
    left: calc(2 / var(--font-size) * 1rem);
  }

  .attention-detail-list.c-list .c-list__item__label {
    line-height: 1.5;
    color: var(--color-btn-02);
  }

  .attention-annotation{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }

  .attention-annotation .c-list__item{
    justify-content: center;
  }
}

.step-list {
  margin-top: calc(40 / var(--font-size) * 1rem);
}

.step-list__box__body {
  background-color: var(--color-bg-table);
  padding: calc(47 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem) calc(40 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem);
  border: calc(2 / var(--font-size) * 1rem) solid var(--color-border);
  border-radius: calc(8 / var(--font-size) * 1rem);
  position: relative;
}

.step-list__box__number {
  padding-top: calc(8 / var(--font-size) * 1rem);
  border-top: calc(4 / var(--font-size) * 1rem) solid var(--color-btn-02);
  display: flex;
  align-items: flex-end;
  position: absolute;
  top: calc(-2 / var(--font-size) * 1rem);
  left: calc(30 / var(--font-size) * 1rem);
  z-index: 10;
  gap: calc(4 / var(--font-size) * 1rem);
}

.step-list__box__number__label {
  font-size: calc(var(--text-size-xxs) / var(--font-size) * 1rem);
  font-weight: 700;
  color: var(--color-btn-02);
  line-height: 1;
}

.step-list__box__number__unit {
  font-size: calc(var(--text-size-m) / var(--font-size) * 1rem);
  font-weight: 700;
  color: var(--color-btn-02);
  line-height: 1;
}

.step-list__box {
  position: relative;
}

.step-list__box__annotation{
  margin-top: calc(24 / var(--font-size) * 1rem);
  letter-spacing: -0.03em;
}

.step-list__arrow{
  margin-block: calc(16 / var(--font-size) * 1rem);
}

.step-list__arrow__icon:before {
  content: "";
  background-image: url(/site_norlevo/img/common/ico_cursor.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  max-width: calc(19 / var(--font-size) * 1rem);
  width: 100%;
  height: calc(12 / var(--font-size) * 1rem);
  bottom: calc(16 / var(--font-size) * 1rem);
  left: 0;
  right: 0;
  margin: 0 auto;
}

.step-list__arrow__text{
  font-size: calc(16 / var(--font-size) * 1rem);
  color: var(--color-btn-02);
  text-align: center;
  font-weight: 700;
  margin-top: calc(16 / var(--font-size) * 1rem);
  padding-bottom: calc(8 / var(--font-size) * 1rem);
}

.step-list__box__title {
  font-size: calc(var(--text-size-xxl) / var(--font-size) * 1rem);
  font-weight: 700;
  line-height: 1.5;
}

.step-list__box__text {
  font-size: calc(var(--text-size-m) / var(--font-size) * 1rem);
  font-weight: 500;
  line-height: 1.7;
  margin-top: calc(24 / var(--font-size) * 1rem);
}

.step-list__box__text .strong {
  color: var(--color-btn-02);
  font-weight: 700;
}

.step-list__box .c-button-list {
  margin-top: calc(24 / var(--font-size) * 1rem);
}

.step-list__box .c-button {
  max-width: calc(255 / var(--font-size) * 1rem);
}

.step-list__box .c-link-list {
  margin-top: calc(24 / var(--font-size) * 1rem);
}

.step-list__box__cushion {
  margin-top: calc(24 / var(--font-size) * 1rem);
}
.step-list__box__cushion__body {
  background-color: var(--color-white);
  padding: calc(24 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem);
  border-radius: calc(20 / var(--font-size) * 1rem);
}

.step-list__box__cushion__title {
  font-size: calc(var(--text-size-l) / var(--font-size) * 1rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--color-btn-02);
}

.step-list__box__cushion__text {
  font-size: calc(var(--text-size-m) / var(--font-size) * 1rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  margin-top: calc(16 / var(--font-size) * 1rem);
}

.step-list__item__text-box__text {
  padding: 0 calc(15 / var(--font-size) * 1rem);
}

.step-list__item__text-box__title {
  font-size: calc(var(--text-size-xxl) / var(--font-size) * 1rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--color-btn-02);
}

.step-list__item__text-box__text {
  font-size: calc(var(--text-size-m) / var(--font-size) * 1rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-top: calc(16 / var(--font-size) * 1rem);
}

.step-list__item__text-box__text .strong {
  color: var(--color-btn-02);
  font-weight: 700;
}

.step-list__item__image {
  margin-top: calc(24 / var(--font-size) * 1rem);
}

.flow-section-bottom {
  margin-top: calc(56 / var(--font-size) * 1rem);
}

@media all and (min-width: 820px), print {
  .step-list {
    margin-top: calc(40 / var(--font-size) * 1rem);
  }

  .step-list__box__body {
    background-color: var(--color-bg-table);
    padding: calc(47 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem) calc(40 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem);
    border: calc(2 / var(--font-size) * 1rem) solid var(--color-border);
    border-radius: calc(8 / var(--font-size) * 1rem);
    position: relative;
  }

  .step-list__box__number {
    padding-top: calc(8 / var(--font-size) * 1rem);
    border-top: calc(4 / var(--font-size) * 1rem) solid var(--color-btn-02);
    display: flex;
    align-items: flex-end;
    position: absolute;
    top: calc(-2 / var(--font-size) * 1rem);
    left: calc(30 / var(--font-size) * 1rem);
    z-index: 10;
    gap: calc(4 / var(--font-size) * 1rem);
  }

  .step-list__box__number__label {
    font-size: calc(var(--text-size-xxs) / var(--font-size) * 1rem);
    font-weight: 700;
    color: var(--color-btn-02);
    line-height: 1;
  }

  .step-list__box__number__unit {
    font-size: calc(var(--text-size-m) / var(--font-size) * 1rem);
    font-weight: 700;
    color: var(--color-btn-02);
    line-height: 1;
  }

  .step-list__box {
    position: relative;
  }

  .step-list__box__annotation{
    margin-top: calc(24 / var(--font-size) * 1rem);
    letter-spacing: -0.03em;
  }

  .step-list__arrow{
    margin-block: calc(16 / var(--font-size) * 1rem);
  }

  .step-list__arrow__icon:before {
    content: "";
    background-image: url(/site_norlevo/img/common/ico_cursor.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    max-width: calc(19 / var(--font-size) * 1rem);
    width: 100%;
    height: calc(12 / var(--font-size) * 1rem);
    bottom: calc(16 / var(--font-size) * 1rem);
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .step-list__arrow__text{
    font-size: calc(16 / var(--font-size) * 1rem);
    color: var(--color-btn-02);
    text-align: center;
    font-weight: 700;
    margin-top: calc(16 / var(--font-size) * 1rem);
    padding-bottom: calc(8 / var(--font-size) * 1rem);
  }

  .step-list__box__title {
    font-size: calc(var(--text-size-xxl) / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.5;
  }

  .step-list__box__text {
    font-size: calc(var(--text-size-m) / var(--font-size) * 1rem);
    font-weight: 500;
    line-height: 1.7;
    margin-top: calc(24 / var(--font-size) * 1rem);
  }

  .step-list__box__text .strong {
    color: var(--color-btn-02);
    font-weight: 700;
  }

  .step-list__box .c-button-list {
    margin-top: calc(34 / var(--font-size) * 1rem);
  }

  .step-list__box .c-button {
    max-width: calc(255 / var(--font-size) * 1rem);
  }

  .step-list__box .c-link-list {
    margin-top: calc(24 / var(--font-size) * 1rem);
  }

  .step-list__box__cushion {
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .step-list__box__cushion__body {
    background-color: var(--color-white);
    padding: calc(24 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem);
    border-radius: calc(20 / var(--font-size) * 1rem);
  }

  .step-list__box__cushion__title {
    font-size: calc(var(--text-size-l) / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: var(--color-btn-02);
  }

  .step-list__box__cushion__text {
    font-size: calc(var(--text-size-m) / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }

  .step-list__item__text-box__text {
    padding: 0 calc(15 / var(--font-size) * 1rem);
  }

  .step-list__item__text-box__title {
    font-size: calc(var(--text-size-xxl) / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: var(--color-btn-02);
  }

  .step-list__item__text-box__text {
    font-size: calc(var(--text-size-m) / var(--font-size) * 1rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-top: calc(16 / var(--font-size) * 1rem);
  }

  .step-list__item__text-box__text .strong {
    color: var(--color-btn-02);
    font-weight: 700;
  }

  .step-list__item__image {
    margin-top: calc(24 / var(--font-size) * 1rem);
  }

  .flow-section-bottom {
    margin-top: calc(56 / var(--font-size) * 1rem);
  }
}