@charset "UTF-8";

/* 既存スワップLPの構造を再利用。ユーザー指定で本文幅1100pxを維持する。
   Figma固有の赤・緑／数値／PC本文20pxは了承済みのページ専用仕様。 */
.mxn-swap-campaign {
  --mxn-swap-navy: #0b3472;
  --mxn-swap-blue: #2459b8;
  --mxn-swap-text: #26364d;
  --mxn-swap-border: #c7d9f2;
  --mxn-swap-pale-blue: #f1f6fd;
  --mxn-swap-red: #b01501;
  --mxn-swap-green: #015933;
  --mxn-swap-font-number: "Inter", var(--ta-font-family-ja);
  --mxn-swap-type-performance-number: 700 88px/1 var(--mxn-swap-font-number);
  --mxn-swap-type-performance-unit: 700 36px/1 var(--mxn-swap-font-number);
  --mxn-swap-type-table-number: 700 42px/1 var(--mxn-swap-font-number);
  --mxn-swap-type-table-unit: 700 21px/1 var(--mxn-swap-font-number);
  --mxn-swap-type-pair: var(--ta-type-card-title-sp);
  --ta-type-h1-pc: 700 24px/1.5 var(--ta-font-family-ja);
  --ta-type-h1-sp: var(--ta-type-h1-pc);
  --ta-type-h2-pc: 700 20px/1.5 var(--ta-font-family-ja);
  --ta-type-h2-sp: var(--ta-type-h2-pc);
  --ta-type-h3-pc: 700 16px/1.5 var(--ta-font-family-ja);
  --ta-type-h3-sp: var(--ta-type-h3-pc);
  --ta-type-body: var(--ta-ja-sp-body-medium);
  --ta-type-body-sp: var(--ta-type-body);
}

.mxn-swap-main {
  color: var(--mxn-swap-text);
  letter-spacing: 0;
}

.mxn-swap-main *,
.mxn-swap-main *::before,
.mxn-swap-main *::after { box-sizing: border-box; }
.mxn-swap-main :where(p, h1, h2, h3, dl, dd, ol, ul) { margin: 0; }
.mxn-swap-main .ta-text-body { color: var(--mxn-swap-text); letter-spacing: 0; }
.mxn-swap-main img { display: block; max-width: 100%; }
.mxn-swap-br-sp { display: inline; }

/* アップロード画像を切り抜かず表示。下の余白は.mxn-swap-performanceのmargin-top。 */
.mxn-swap-mainvisual { width: 100%; }
.mxn-swap-mainvisual picture { display: block; }
.mxn-swap-mainvisual img { width: 100%; height: auto; aspect-ratio: 800 / 960; }

.mxn-swap-content.ta-section__inner {
  width: min(calc(100% - 32px), 1100px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

/* ユーザー指定：直前の.mxn-swap-mainvisualからSP40px／PC80px。 */
.mxn-swap-performance { margin-top: 40px; }
.mxn-swap-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.mxn-swap-section-heading > img {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 2px;
}
.mxn-swap-section-heading .ta-h1 {
  flex: 0 1 auto;
  max-width: calc(100% - 24px);
  color: var(--mxn-swap-navy);
  letter-spacing: 0;
  text-align: center;
}

.mxn-swap-performance__cards {
  display: grid;
  grid-template-columns: minmax(0, 530px);
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}
.mxn-swap-performance-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 24px 12px;
  border: 2px solid var(--mxn-swap-red);
  border-radius: 10px;
  background: #feeae9;
}
.mxn-swap-performance-card + .mxn-swap-performance-card {
  border-color: var(--mxn-swap-green);
  background: #eef7f2;
}
.mxn-swap-performance-card__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.mxn-swap-performance-card__flags {
  display: flex;
  flex: 0 0 85px;
  align-items: center;
  gap: 5px;
}
.mxn-swap-performance-card__flags img {
  flex: none;
  width: 40px;
  height: 30px;
  object-fit: cover;
}
.mxn-swap-performance-card__pair.ta-h3,
.mxn-swap-overview-table__pair.ta-h3 {
  font: var(--mxn-swap-type-pair);
  color: var(--mxn-swap-navy);
  letter-spacing: 0;
  text-align: center;
}
.mxn-swap-performance-card__pair { flex: 1; min-width: 0; }
.mxn-swap-performance-card__bottom { display: flex; justify-content: center; margin-top: 8px; }
.mxn-swap-performance-card__amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--mxn-swap-red);
  font: var(--mxn-swap-type-performance-number);
  white-space: nowrap;
  transform: skewX(-10deg) scaleY(.98);
}
.mxn-swap-performance-card + .mxn-swap-performance-card .mxn-swap-performance-card__amount { color: var(--mxn-swap-green); }
.mxn-swap-performance-card__amount strong { font: inherit; letter-spacing: -.06em; }
.mxn-swap-performance-card__amount span { font: var(--mxn-swap-type-performance-unit); }
.mxn-swap-performance__caption { margin-top: 40px; }
.mxn-swap-note-text,
.mxn-swap-overview__limits {
  --ta-type-body: var(--ta-ja-pc-body-medium);
  --ta-type-body-sp: var(--ta-ja-sp-body-medium);
}

.mxn-swap-panel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  min-height: 72px;
  margin-top: 40px;
  padding: 20px 16px;
  border: 1px solid var(--mxn-swap-border);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
}
.mxn-swap-panel-link .ta-h3 { min-width: 0; color: var(--mxn-swap-blue); letter-spacing: 0; text-align: center; }
.mxn-swap-panel-link:focus-visible,
.mxn-swap-cta:focus-visible { outline: 3px solid var(--mxn-swap-blue); outline-offset: 3px; }
.mxn-swap-arrow-box {
  display: flex;
  flex: 0 0 14px;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 30px;
}
/* SVGの線の張り出しを含む33×17pxを保持。 */
.mxn-swap-arrow-box img { flex: 0 0 33px; width: 33px; max-width: none; height: 17px; transform: rotate(-90deg); }

.mxn-swap-overview,
.mxn-swap-about,
.mxn-swap-details,
.mxn-swap-notes { margin-top: 40px; }
.mxn-swap-overview__lead { margin-top: 40px; }
.mxn-swap-overview__table-wrap { margin-top: 40px; overflow: hidden; border-radius: 10px 10px 0 0; }
.mxn-swap-overview-table { width: 100%; table-layout: fixed; border-spacing: 0; border-collapse: collapse; }
.mxn-swap-overview-table th,
.mxn-swap-overview-table td { width: 33.333333%; padding: 12px 4px; border: 2px solid var(--mxn-swap-border); text-align: center; vertical-align: middle; }
.mxn-swap-overview-table thead th.ta-h2 { font: 500 16px/1.5 var(--ta-font-family-ja); background: var(--mxn-swap-navy); color: #fff; letter-spacing: 0; }
.mxn-swap-overview-table thead .ta-h4 { color: inherit; font: inherit; letter-spacing: 0; }
.mxn-swap-overview-table tbody td { white-space: nowrap; }
.mxn-swap-overview-table__flags { display: flex; justify-content: center; align-items: center; gap: 6px; }
.mxn-swap-overview-table__flags img { flex: none; width: 32px; height: 24px; object-fit: cover; }
.mxn-swap-overview-table__pair { display: block; margin-top: 10px; }
.mxn-swap-overview-table__number,
.mxn-swap-overview-table__unit { display: inline-block; color: var(--mxn-swap-red); transform: skewX(-10deg) scaleY(.98); }
.mxn-swap-overview-table__number { font: var(--mxn-swap-type-table-number); letter-spacing: -.04em; }
.mxn-swap-overview-table__unit { font: var(--mxn-swap-type-table-unit); }
.mxn-swap-overview-table tbody tr + tr .mxn-swap-overview-table__number,
.mxn-swap-overview-table tbody tr + tr .mxn-swap-overview-table__unit { color: var(--mxn-swap-green); }
.mxn-swap-overview__limits { margin-top: 20px; }
.mxn-swap-overview__limits ul { padding-left: 1.5em; }

.mxn-swap-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 450px);
  min-height: 60px;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--mxn-swap-red);
  color: #fff;
  text-decoration: none;
}
.mxn-swap-cta__text.ta-h2 { font: 700 18px/1.4 var(--ta-font-family-ja); color: #fff; letter-spacing: 0; white-space: nowrap; }
.mxn-swap-about { padding: 40px 16px; border-radius: 10px; background: var(--mxn-swap-pale-blue); }
.mxn-swap-about .ta-h1 { color: var(--mxn-swap-blue); letter-spacing: 0; text-align: center; }
.mxn-swap-about__text,
.mxn-swap-about__links { margin-top: 40px; }
.mxn-swap-about__links { display: grid; grid-template-columns: 1fr; gap: 40px; }
.mxn-swap-about__links .mxn-swap-panel-link { position: relative; margin-top: 0; border-left-width: 6px; }
.mxn-swap-about__links .mxn-swap-arrow-box { position: absolute; right: 16px; }
.mxn-swap-panel-link--mxn { border-color: var(--mxn-swap-red); }
.mxn-swap-panel-link--chf { border-color: var(--mxn-swap-green); }

.mxn-swap-details__list { display: flex; flex-direction: column; margin-top: 40px; }
.mxn-swap-details__item + .mxn-swap-details__item { margin-top: 40px; }
.mxn-swap-details__term.ta-h2 { padding-left: 20px; border-left: 4px solid var(--mxn-swap-navy); color: var(--mxn-swap-blue); }
.mxn-swap-details__description { margin-top: 20px; }
.mxn-swap-details__description > p + p,
.mxn-swap-details__description > p + ul { margin-top: 20px; }
.mxn-swap-details__description ul { padding-left: 1.5em; }
.mxn-swap-details__examples > p + p { margin-top: 0; }

/* Figmaの算出図は元PNGの上下トリミング＋中央SVGの3レイヤー。
   元の974×476pxを基準に全レイヤーを同じ比率で縮小。SPでも全体を表示する。 */
.mxn-swap-calculation-wrap { width: 100%; margin-top: 40px; }
.mxn-swap-calculation { width: min(100%, 974px); margin: 0 auto; }
.mxn-swap-calculation__top,
.mxn-swap-calculation__bottom { position: relative; width: 100%; overflow: hidden; }
.mxn-swap-calculation__top { aspect-ratio: 974 / 274; }
.mxn-swap-calculation__bottom { aspect-ratio: 974 / 167; }
.mxn-swap-calculation__top img,
.mxn-swap-calculation__bottom img { position: absolute; left: 0; width: 100%; height: auto; }
.mxn-swap-calculation__top img { top: 0; }
.mxn-swap-calculation__bottom img { bottom: 0; }
.mxn-swap-calculation__connector { width: 100%; height: auto; }

.mxn-swap-notes { padding-bottom: 40px; }
.mxn-swap-notes__body { margin-top: 40px; }
.mxn-swap-notes__body ol { padding-left: 1.5em; }
.mxn-swap-notes__steps { margin-top: 0; }
.mxn-swap-notes__swap { margin-top: 40px; }
.mxn-swap-notes__swap .ta-text-body { font: inherit; }

/* フォリントキャンペーンと同じSP表字級。通貨ペア名を抑え、数値を読み取りやすくする。 */
@media (max-width: 767px) {
  .mxn-swap-overview-table__pair.ta-h3 {
    font: 700 10px/1.4 var(--ta-font-family-ja);
  }
}

@media (max-width: 374px) {
  .mxn-swap-campaign {
    --mxn-swap-type-table-number: 700 40px/1 var(--mxn-swap-font-number);
    --mxn-swap-type-table-unit: 700 20px/1 var(--mxn-swap-font-number);
  }
}

@media (max-width: 364px) {
  .mxn-swap-campaign {
    --mxn-swap-type-table-number: 700 36px/1 var(--mxn-swap-font-number);
    --mxn-swap-type-table-unit: 700 18px/1 var(--mxn-swap-font-number);
  }
}

@media (max-width: 359px) {
  .mxn-swap-campaign {
    --mxn-swap-type-performance-number: 700 72px/1 var(--mxn-swap-font-number);
    --mxn-swap-type-performance-unit: 700 30px/1 var(--mxn-swap-font-number);
    --mxn-swap-type-table-number: 700 36px/1 var(--mxn-swap-font-number);
    --mxn-swap-type-table-unit: 700 18px/1 var(--mxn-swap-font-number);
  }
  .mxn-swap-cta { gap: 8px; padding: 0 8px; }
  .mxn-swap-cta__text.ta-h2 { font-size: 16px; }
}

@media (min-width: 768px) {
  .mxn-swap-mainvisual img { aspect-ratio: 1920 / 800; }
  .mxn-swap-performance { margin-top: 80px; }
  .mxn-swap-campaign {
    --ta-type-h1-pc: 700 40px/1.2 var(--ta-font-family-ja);
    --ta-type-h2-pc: var(--ta-ja-pc-h2-bold);
    --ta-type-h3-pc: var(--ta-ja-pc-h3-bold);
    --ta-type-body: 500 20px/1.45 var(--ta-font-family-ja);
    --mxn-swap-type-pair: 700 20px/1.2 var(--ta-font-family-ja);
    --mxn-swap-type-table-number: 700 72px/1 var(--mxn-swap-font-number);
    --mxn-swap-type-table-unit: 700 36px/1 var(--mxn-swap-font-number);
  }
  .mxn-swap-br-sp { display: none; }
  .mxn-swap-section-heading { gap: 20px; }
  .mxn-swap-performance-card { height: 245px; padding: 26px 15px; }
  .mxn-swap-performance-card__flags { flex-basis: 141px; }
  .mxn-swap-performance-card__flags img { width: 68px; height: 51px; }
  .mxn-swap-performance-card__bottom { margin-top: 0; }
  .mxn-swap-performance-card__amount { --mxn-swap-type-performance-number: 700 128px/1 var(--mxn-swap-font-number); --mxn-swap-type-performance-unit: 700 52px/1 var(--mxn-swap-font-number); }
  .mxn-swap-overview,
  .mxn-swap-about,
  .mxn-swap-details,
  .mxn-swap-notes { margin-top: 80px; }
  .mxn-swap-overview-table thead th.ta-h2 { font-size: 28px; height: 114px; }
  .mxn-swap-overview-table tbody th,
  .mxn-swap-overview-table tbody td { height: 154px; padding: 10px; }
  .mxn-swap-overview-table__flags { gap: 17px; }
  .mxn-swap-overview-table__flags img { width: 100px; height: 75px; }
  .mxn-swap-cta { width: min(100%, 750px); min-height: 86px; margin-top: 80px; padding: 0 40px; border-radius: 15px; }
  .mxn-swap-cta__text.ta-h2 { font-size: 36px; }
  .mxn-swap-about { padding: 40px; }
  .mxn-swap-about__links .ta-h3 { font: 700 20px/1.2 var(--ta-font-family-ja); }
  .mxn-swap-notes { padding-bottom: 80px; }
}

@media (min-width: 1101px) {
  .mxn-swap-campaign {
    --mxn-swap-type-table-number: 700 110px/1 var(--mxn-swap-font-number);
    --mxn-swap-type-table-unit: 700 52px/1 var(--mxn-swap-font-number);
  }
  .mxn-swap-performance__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mxn-swap-performance-card:first-child .mxn-swap-performance-card__flags { flex-basis: 168px; padding: 0 10px; }
  .mxn-swap-overview-table thead th.ta-h2 { font-size: 36px; }
  .mxn-swap-about__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}