:root {
  --guarantee-color-base-first: #444;
  --guarantee-color-base-second: #666;
  --guarantee-color-base-third: #cdcdcd;
  --guarantee-color-base-fourth: #f3f3f3;
  --guarantee-color-base-fifth: #f1f1f1;
  --guarantee-color-base-sixth: #fff;
  --guarantee-color-base-seventh: #263238;

  --guarantee-color-accent-first: #f00;
}

.wdb-guarantee-firstview {
  @media (min-width: 768px) {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    justify-content: center;
    padding-block: 3rem;
    background-color: var(--guarantee-color-base-fifth);
  }
}

.wdb-guarantee-firstview-table {
  padding: 1.25rem .625rem 1.5rem;

  @media (min-width: 768px) {
    width: 542px;
  }
}

.wdb-guarantee-firstview-table-content {
  border: 2px solid var(--guarantee-color-base-first);
  padding: 1.25rem .9375rem;
  background-color: var(--guarantee-color-base-sixth);
  font-size: 14px;
  font-weight: bold;

  & .wdb-guarantee-salary-table {
    margin-bottom: 1rem;
  }

  @media (min-width: 768px) {
    padding-inline: 2rem;
  }
}

.wdb-guarantee-firstview-table-content-heading {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .75rem;
}

.wdb-guarantee-firstview-table-content-heading__top {
  font-size: 18px;
}

.wdb-guarantee-firstview-table-content-heading__bottom {
  font-size: clamp(21px, 6vw, 24px);
}

.wdb-guarantee-firstview-table-content-heading__highlight {
  display: inline-block;
  color: var(--guarantee-color-accent-first);
  font-size: 30px;

  & > :last-child {
    margin-inline: .125rem;
  }
}

.wdb-guarantee-firstview-table-content-heading__highlight-small {
  font-size: 14px;
}

.wdb-guarantee-firstview-conversion {
  padding: 1.5rem 2rem;
  background-color: var(--guarantee-color-base-fifth);

  & > * + * {
    margin-top: 1rem;
  }
}

.wdb-guarantee-firstview-conversion__text {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;

  @media (min-width: 768px) {
    font-size: 28px;
    line-height: 1.8;
  }
}

.wdb-guarantee-salary-table {
  table-layout: fixed;
  border: 1px solid var(--guarantee-color-base-seventh);
  border-collapse: collapse;
  width: 100%;
  color: var(--guarantee-color-base-seventh);
  font-feature-settings: "palt";
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;

  & th:first-child,
  & td:first-child {
    width: 15%;
    background-color: var(--guarantee-color-base-fourth);
  }

  & th,
  & td {
    border: 1px solid var(--guarantee-color-base-seventh);
    padding: .25rem;
  }

  &.wdb-guarantee-salary-table--size-change-first {
    & th:first-child,
    & td:first-child {
      width: 19%;
      font-size: 10px;
    }

    & th:nth-child(n+2):nth-child(-n+3),
    & td:nth-child(n+2):nth-child(-n+3) {
      width: 23%;
    }

    & th,
    & td {
      padding-block: .625rem;
    }

    & .wdb-guarantee-salary-table__heading {
      & th,
      & td {
        padding-block: .25rem;
      }
    }
  }

  @media (min-width: 768px) {
    font-size: 15px;

    & th:first-child,
    & td:first-child {
      padding-left: 2.25rem;
      font-size: 14px;
      text-align: left;
    }

    & th,
    & td {
      padding-block: .625rem;
    }

    &.wdb-guarantee-salary-table--size-change-first {
      & th:first-child,
      & td:first-child {
        padding-left: .25rem;
        font-size: 12px;
        text-align: center;
      }
    }
  }
}

.wdb-guarantee-salary-table__heading {
  & > :nth-child(2) {
    background-color: var(--guarantee-color-base-third);
  }

  & > :nth-child(3),
  & > :nth-child(4) {
    background-color: var(--guarantee-color-base-second);
    color: var(--guarantee-color-base-sixth);
  }
}

.wdb-guarantee-salary-table__amount {
  display: inline-block;
  width: max-content;
  font-size: 15px;
  text-align: right;

  @media (min-width: 768px) {
    font-size: 19px;
  }
}

.wdb-guarantee-salary-table__difference {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 100vmax;
  width: max-content;
  padding: .25rem;
  background-color: var(--guarantee-color-base-second);
  color: var(--guarantee-color-base-sixth);

  &.wdb-guarantee-salary-table__difference--large {
    padding-inline: .75rem;

    @media (min-width: 768px) {
      padding-inline: 1.5rem;
    }
  }
}

.wdb-guarantee-main {
  margin-inline: auto;
  max-width: 976px;
  padding: 1.5rem 1rem;

  @media (min-width: 768px) {
    padding: 3rem .5rem;
  }
}

.wdb-guarantee-main-section,
.wdb-guarantee-main-section__content {
  & + & {
    margin-top: 1.5rem;
  }
}

.wdb-guarantee-main-section__sub-content {
  & + & {
    margin-top: 1rem;
  }
}

.wdb-guarantee-main-section {
  border-top: 1px solid var(--guarantee-color-base-first);
  padding-top: 1.5rem;

  @media (min-width: 768px) {
    padding-top: 3rem;

    & + & {
      margin-top: 3rem;
    }

    &:first-child {
      border-top: none;
      padding-top: 0;
    }
  }
}

.wdb-guarantee-main-section__content {
  &.wdb-guarantee-main-conversion {
    @media (min-width: 768px) {
      margin-inline: auto;
      width: 30rem;
    }
  }
}

.wdb-guarantee-main-tables {
  & > * + * {
    margin-top: 1rem;
  }

  @media (min-width: 768px) {
    & .wdb-service-heading {
      font-size: 18px;
    }
  }
}

.wdb-guarantee-main-tables__caution {
  margin-top: .5rem;
  font-size: 12px;
}

.wdb-guarantee-main-conversion {
  padding-inline: 1rem;

  & > * + * {
    margin-top: .25rem;
  }
}

.wdb-guarantee-main-conversion__text {
  font-weight: bold;
  text-align: center;
}