/* --fl-unit is not defined at all on production (confirmed against bk/public_html/assets/css/style.css) —
   without this, every calc(N * var(--fl-unit)) rule below resolves to nothing */
:root {
  --fl-unit: min(calc(100vw / 1440), 1px);
}
@media screen and (max-width: 768px) {
  :root {
    --fl-unit: calc(100vw / 375);
  }
}

.market--tryjpy .highLvlSwap__inner.--southafrica {
  max-width: 720px;
  margin-inline: auto;
}

main .highLvlSwap__top__text.--southafrica {
  font-size: clamp(32px, 3.2vw, 50px);
}

.swapFig__area {
  width: 100%;
  background-color: #fff6e5;
  padding: calc(25 * var(--fl-unit));
  border: 2px solid #000000;
}

.swapFig__heading {
  font-weight: bold;
  font-size: clamp(16px, calc(3.19vw + -15.92px), 30px);
  margin-bottom: calc(20 * var(--fl-unit));
}

@media screen and (max-width: 1000px) {
  .swapFig__heading {
    font-size: clamp(24px, calc(3.45vw + -2.48px), 32px);
    margin-bottom: calc(20 * var(--fl-unit));
  }
}

.swapFig__list {
  display: flex;
  flex-direction: row;
  gap: calc(60 * var(--fl-unit));
  justify-content: space-evenly;
  align-items: flex-end;
}

.swapFig__container {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--fl-unit));
}

.swapFig__country {
  font-weight: bold;
  text-align: center;
  font-size: clamp(16px, calc(0.6vw + 11.43px), 20px);
}

/*日本だけ下付き*/

.swapFig__country--graph img {
  border: none;
}

.swapFig__desc {
  text-align: center;
  font-weight: bold;
  font-size: clamp(30px, calc(4.55vw + -15.45px), 50px);
  line-height: 1.2;
  padding-top: calc(24 * var(--fl-unit));
}

@media screen and (max-width: 768px) {
  .swapFig__desc {
    font-size: clamp(18px, calc(4.59vw + 0.78px), 36px);
  }
}

.swapFig__desc > span {
  display: block;
  text-align: center;
  font-size: 60%;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .swapFig__area {
    padding: calc(12 * var(--fl-unit));
  }
  .swapFig__heading {
    font-size: clamp(13px, calc(3.06vw + 1.52px), 25px);
    margin-bottom: calc(16 * var(--fl-unit));
  }

  .swapFig__list {
    gap: calc(36 * var(--fl-unit));
  }

  .swapFig__country {
    font-size: clamp(14px, calc(1.53vw + 8.26px), 20px);
  }

  .swapFig__desc {
    font-size: clamp(16px, calc(1.02vw + 12.17px), 20px);
    padding-top: calc(16 * var(--fl-unit));
  }

  .swapFig__desc > span {
    font-size: 80%;
  }
}
