@charset "UTF-8";

/* ----------------------------------------------------------------
    Shotoku (shtk-*)
----------------------------------------------------------------- */

/* .shtk-salary
----------------------------------------------- */
.shtk-salary {
  width: 100%;
  display: flex;
  gap: var(--acq-spacing-xl);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--acq-spacing-lg);
}

.shtk-salary_label {
  color: #22254c;
  font-size: var(--acq-font-size-xl);
  font-weight: var(--acq-font-weight-bold);
  line-height: var(--acq-line-height);
}

.shtk-salary_label > span {
  font-size: var(--acq-font-size-md);
  font-weight: var(--acq-font-weight);
  line-height: 2.25;
}

.shtk-salary_input > input {
  padding: 16px;
  background-color: var(--acq-color-white);
  width: 240px;
  font-size: var(--acq-font-size-md);
  line-height: 1.75;
  text-align: right;
  border-radius: 4px;
  border: none;
  color: #22254c;
  margin-right: 16px;
}

.shtk-salary_input > input::-webkit-outer-spin-button,
.shtk-salary_input > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shtk-salary_input > span {
  font-weight: var(--acq-font-weight-bold);
}

.shtk-horizon {
  margin: var(--acq-spacing-lg) 0;
  border-top: 1px solid var(--acq-color-beige);
  border-bottom: none;
}

.shtk-result {
  background-color: var(--acq-color-white);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 160px;
}

.shtk-result_num {
  color: var(--acq-color-highlight);
  font-size: var(--acq-font-size-lg);
  font-weight: var(--acq-font-weight-bold);
  margin-bottom: 0;
}

.shtk-result_num > span {
  display: inline-block;
  margin-right: 4px;
  font-size: var(--acq-font-size-7xl);
}

@media only screen and (max-width: 1024px) {
  .shtk-salary {
    gap: var(--acq-spacing-lg);
  }

  .shtk-salary_label {
    font-size: var(--acq-font-size-lg);
  }

  .shtk-result {
    gap: var(--acq-spacing-xl);
  }
}

@media only screen and (max-width: 767px) {
  .shtk-salary {
    flex-direction: column;
    gap: var(--acq-spacing-sm);
  }

  .shtk-salary_label {
    font-size: var(--acq-font-size-xl);
  }

  .shtk-salary_label > span {
    display: block;
  }

  .shtk-result {
    padding: var(--acq-spacing-md) var(--acq-spacing-sm);
    flex-direction: column;
    gap: var(--acq-spacing-md);
  }

  .shtk-result_num {
    font-size: var(--acq-font-size-md);
    line-height: 1.75;
  }

  .shtk-result_num > span {
    font-size: 3.6rem;
    line-height: 1;
  }
}