@charset "UTF-8";

/* ============================================================
 * スワップポイント運用とは？ (/triauto/about/swap-income/)
 * Figma: 「スワップPC版」frame 59:23
 * ------------------------------------------------------------
 * ここに書くのはレイアウト（並び・グリッド・余白・寸法）だけ。
 * font-size / font-weight / color / line-height は書かない。
 * 文字は app.css の共通クラスを使う:
 *   見出し帯 .ta-section-heading / 本文 .ta-text-body / 注記 .ta-text-caption
 *   24px .ta-h3 / 20px .ta-card-title / 16px太字 .ta-h4 / 数値 .ta-h1
 *   SP heroの28px/1.7は共通token --ta-type-h1-sp を参照する。
 *
 * ページ専用 img/ の画像は各スロットに埋め込み、object-fit: contain で
 * Figma の寸法内に収めている。hero の imagehero も同じルールで表示する。
 * ============================================================ */

body.swap-income-page-body {
  /* hero と特徴セクションが 100vw の全幅指定を使うため横スクロールを抑止 */
  overflow-x: clip;
}

.swap-income-page p,
.swap-income-page ul {
  margin: 0;
}

/* ------------------------------------------------------------
 * hero (Figma PC 59:67 / SP 59:367-59:371)
 * PCはH1の右に129x86の装飾画像をgap 40pxで並べる。
 * SPは136px高の帯内で、2行タイトルと80px枠の画像をgap 8pxで並べる。
 * ---------------------------------------------------------- */
.swap-income-hero__row {
  align-items: center;
  display: flex;
  gap: var(--ta-space-2xl);
  justify-content: center;
}

.swap-income-hero__sp-break {
  display: none;
}

.swap-income-hero__title-line {
  white-space: nowrap;
}

.swap-income-sp-break {
  display: none;
}

.swap-income-media-slot {
  flex: none;
  min-width: 0;
}

.swap-income-media-slot img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.swap-income-media-slot--hero {
  display: none;
  height: 86px;
  width: 129px;
}

/* ------------------------------------------------------------
 * 導入 (Figma 59:73 introduction)
 * ---------------------------------------------------------- */
.swap-income-intro {
  display: grid;
  gap: var(--ta-space-text-gap); /* Figma article gap 28px */
}

/* Figma 59:76 firstsec: 中央寄せの誘導文＋ページ内アンカー */
.swap-income-intro__support {
  display: grid;
  gap: 0;
  justify-items: center;
  text-align: center;
}

.swap-income-intro__support .ta-link::after {
  content: "\00a0↓";
}

/* ------------------------------------------------------------
 * 通常セクションの中身
 * ---------------------------------------------------------- */
.swap-income-section {
  min-width: 0;
}

.swap-income-section__body,
.swap-income-text-stack {
  display: grid;
  gap: var(--ta-space-text-gap); /* Figma article gap 28px */
  min-width: 0;
}

/* Figma 59:79 column は gap 10px。図版と注記の間だけ詰める */
.swap-income-section__body--simulation {
  gap: 0;
}

/* ------------------------------------------------------------
 * スワップポイント運用シミュレーション (Figma 59:79)
 * 左テキスト / 右 370x279 図版。注記は af1 の外・全幅に置く。
 * ---------------------------------------------------------- */
.swap-income-simulation {
  align-items: start;
  display: grid;
  gap: var(--ta-space-2xl); /* Figma af1 gap 40px */
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--ta-space-l); /* Figma af1 p-20 */
}

.swap-income-media-slot--simulation {
  height: 279px;
  width: 370px;
}

.swap-income-note-list {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
}

/* ------------------------------------------------------------
 * スワップポイントカレンダーへの CTA (Figma 59:95)
 * ---------------------------------------------------------- */
.swap-income-cta {
  align-items: center;
  background: var(--ta-color-primary-light);
  border-radius: 6px;
  box-sizing: border-box;
  flex-direction: row;
  flex-shrink: 0;
  gap: 16px;
  height: 70px;
  justify-content: center;
  justify-self: center;
  max-width: none;
  padding: 18px 40px;
  white-space: nowrap;
  width: 452px;
}

.swap-income-cta__label {
  font: inherit;
}

.swap-income-cta__arrow {
  font: var(--ta-type-body);
}

.swap-income-cta.invast-sp-service__button--fx {
  box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2);
}

.swap-income-section__body--confirmation {
  gap: var(--ta-space-text-gap);
}

.swap-income-cta-wrap {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: var(--ta-space-l);
}

/* ------------------------------------------------------------
 * スワップ運用の注意点 (Figma 59:103)
 * 「・」始まりの2行は Figma では行間だけで続くので gap を入れない。
 * ---------------------------------------------------------- */
.swap-income-caution-list {
  list-style: none;
  padding: 0;
}

.swap-income-caution-list li {
  padding-left: 1em;
  position: relative;
}

.swap-income-caution-list li::before {
  content: "・";
  left: 0;
  position: absolute;
}

/* ------------------------------------------------------------
 * トライオートFXの特徴 (Figma 59:105 topic_content)
 * 画面端まで届く淡いブルー帯。中身は他セクションと同じ 1000px 幅に収める。
 * ---------------------------------------------------------- */
.swap-income-features {
  background: var(--ta-color-primary-pale);
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: var(--ta-space-2xl); /* Figma content1 の下 padding 40px 相当 */
  padding-bottom: var(--ta-space-2xl);
  padding-top: var(--ta-space-2xl);
  position: relative;
  scroll-margin-top: 48px; /* 共通ヘッダー SP 実高 */
  width: 100vw;
}

.swap-income-features__anchor {
  height: 0;
  left: 0;
  position: absolute;
  top: -8px;
  width: 1px;
}

.swap-income-features__inner {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: var(--content-width);
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

/* 帯側の padding が上下余白を担うため、内側の見出しは上マージンを持たない */
.swap-income-features .ta-section-heading {
  margin-bottom: var(--ta-space-2xl);
  margin-top: 0;
}

.swap-income-feature-grid {
  display: grid;
  gap: var(--ta-space-l); /* Figma easyGrid gap 20px */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 白背景・1px #EBF3FC・角丸6px・影は .ta-card が担当（Figma ma1 と一致） */
.swap-income-feature-card {
  align-items: center;
  column-gap: var(--ta-space-l);
  display: flex;
  min-width: 0;
  padding: var(--ta-space-l);
}

.swap-income-feature-card__label {
  min-width: 0;
}

/* Figma ma1 の 12px オレンジ丸。画像ではなく装飾なので CSS で描く */
.swap-income-feature-card::before {
  background: var(--ta-color-accent-light);
  border-radius: 50%;
  content: "";
  flex: none;
  height: 12px;
  width: 12px;
}

/* ------------------------------------------------------------
 * 1日に受け取るスワップポイント (Figma 59:139 stepsRow)
 * 4枚横並び。各カードは国旗2枚 + 通貨ペア名 + 金額。
 * ---------------------------------------------------------- */
.swap-income-swap-grid {
  display: grid;
  gap: var(--ta-space-l);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.swap-income-swap-card {
  background: var(--ta-color-primary-pale);
  border-radius: 16px;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 25px 17px; /* Figma step2 px-17 / py-25 */
  row-gap: var(--ta-space-xs);
  text-align: center;
}

/* Figma Frame 519: 国旗2枚を gap 16px・高さ 78px で横並び */
.swap-income-swap-card__flags {
  align-items: center;
  display: flex;
  gap: var(--ta-space-m);
  height: 78px;
  justify-content: center;
  width: 100%;
}

.swap-income-media-slot--flags {
  aspect-ratio: 543 / 234;
  display: flex;
  gap: var(--ta-space-m);
  height: 78px;
  max-width: 181px;
  width: 100%;
}

.swap-income-media-slot--flags img {
  flex: 0 1 calc((100% - var(--ta-space-m)) / 2);
  height: auto;
  min-width: 0;
  object-fit: contain;
  width: auto;
}

.swap-income-swap-card__amount {
  align-items: flex-end;
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 62px;
}

.swap-income-swap-card__value {
  --ta-type-h1-pc: 700 72px/1 var(--ta-font-family-en);
  --ta-type-h1-sp: 700 56px/1 var(--ta-font-family-en);
  letter-spacing: 2px;
}

.swap-income-swap-card__unit {
  --ta-type-h3-pc: 400 24px/1 var(--ta-font-family-ja);
  --ta-type-h3-sp: 400 18px/1 var(--ta-font-family-ja);
}

.swap-income-swap-card__sp-break {
  display: none;
}

/* ------------------------------------------------------------
 * 豊富な高金利通貨ペア (Figma 59:171 stepsRow)
 * 行そのものが左右 50px 内側に入る。
 * ---------------------------------------------------------- */
.swap-income-pair-grid {
  display: grid;
  gap: var(--ta-space-l);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: 50px;
  padding-right: 50px;
}

.swap-income-pair-card {
  align-content: start;
  background: var(--ta-color-primary-pale);
  border-radius: 16px;
  box-sizing: border-box;
  display: grid;
  gap: 15px;
  min-width: 0;
  padding: 15px 30px;
}

.swap-income-page .swap-income-pair-list {
  align-content: start;
  display: grid;
  gap: var(--ta-space-xs);
  list-style: disc;
  padding-left: 30px; /* Figma ms-[30px] */
}

.swap-income-pair-list li {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------
 * 図版付き詳細セクション
 * (Figma 59:178 / 59:186 / 59:194 / 59:203)
 * 図版は左右交互。寸法は Figma のまま個別に指定する。
 * ---------------------------------------------------------- */
.swap-income-detail {
  align-items: start;
  display: grid;
  gap: var(--ta-space-2xl); /* Figma af1 gap 40px */
  min-width: 0;
  padding: var(--ta-space-l); /* Figma af1 p-20 */
}

.swap-income-detail--media-right {
  grid-template-columns: minmax(0, 1fr) auto;
}

.swap-income-detail--media-left {
  grid-template-columns: auto minmax(0, 1fr);
}

/* 薄青の面を持つ図版スロット。4枚ともテキスト横では 300x200px に揃える */
.swap-income-media-slot--transfer,
.swap-income-media-slot--calendar,
.swap-income-media-slot--autotrade,
.swap-income-media-slot--lot {
  background: var(--ta-color-primary-pale);
  border-radius: var(--ta-radius-l);
  height: 200px;
  overflow: hidden;
  width: 300px;
}

@media (min-width: 940px) {
  .swap-income-swap-card__title--compact {
    --ta-type-h4-pc: var(--ta-type-body-sm);
  }

  .swap-income-media-slot--hero {
    display: block;
  }

  .swap-income-features {
    margin-top: var(--ta-space-4xl);
    padding-bottom: var(--ta-space-4xl); /* Figma topic_content pb-80 */
    padding-top: var(--ta-space-4xl);
    scroll-margin-top: 112px; /* 共通ヘッダー PC 実高 */
  }

  .swap-income-features__anchor {
    top: -32px;
  }

  .swap-income-features__inner {
    padding-left: var(--content-gutter-pc);
    padding-right: var(--content-gutter-pc);
  }
}

@media (max-width: 939px) {
  .swap-income-page-body .ta-hero {
    min-height: 136px;
    padding: 20px;
  }

  .swap-income-hero__row {
    gap: 8px;
    width: 100%;
  }

  .swap-income-hero__row .ta-hero__title {
    flex: 0 1 231px;
    font: var(--ta-type-h1-sp);
    max-width: calc(100% - 88px);
    min-width: 0;
    overflow: visible;
    text-align: left;
    white-space: normal;
  }

  .swap-income-hero__sp-break {
    display: inline;
  }

  .swap-income-sp-break {
    display: inline;
  }

  .swap-income-media-slot--hero {
    display: block;
    flex: 0 0 80px;
    height: 80px;
    overflow: visible;
    width: 80px;
  }

  .swap-income-media-slot--hero img {
    height: 86px;
    max-width: none;
    position: relative;
    left: -24.5px;
    top: -3px;
    width: 129px;
  }

  .swap-income-simulation,
  .swap-income-detail {
    gap: var(--ta-space-l);
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .swap-income-simulation {
    gap: var(--ta-space-text-gap);
  }

  /* SP は1カラム。薄青の面だけテキスト幅いっぱいに広げ、図版は PC と同じ実寸のまま中央に置く */
  .swap-income-media-slot--transfer,
  .swap-income-media-slot--calendar,
  .swap-income-media-slot--autotrade,
  .swap-income-media-slot--lot {
    width: 100%;
  }

  /* 図版は引き伸ばさない。余った左右幅はスロットの薄青が受け持つ */
  .swap-income-media-slot--transfer img,
  .swap-income-media-slot--calendar img,
  .swap-income-media-slot--autotrade img,
  .swap-income-media-slot--lot img {
    margin-inline: auto;
    max-width: 300px;
  }

  /* グラフは透過PNGで薄青の面を持たないため、実寸のまま中央寄せ（狭い端末でのはみ出しだけ抑える） */
  .swap-income-media-slot--simulation {
    aspect-ratio: 370 / 279;
    height: auto;
    justify-self: center;
    max-width: 100%;
    width: min(370px, 100%);
  }

  .swap-income-media-slot--flags {
    height: auto;
    max-width: 100%;
  }

  .swap-income-cta {
    box-sizing: border-box;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    padding: 18px 15px;
    width: min(350px, 100%);
  }

  .swap-income-cta__label {
    font: var(--ta-type-h4-sp);
  }

  .swap-income-cta-wrap {
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    padding: 20px 0;
    width: 100%;
  }

  .swap-income-section__body--confirmation {
    gap: 0;
  }

  .swap-income-feature-grid {
    box-sizing: border-box;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, minmax(0, 1fr));
    height: 582px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 20px;
    width: calc(100% + 40px);
  }

  .swap-income-features .ta-section-heading {
    margin-bottom: 25px;
  }

  .swap-income-feature-card {
    box-sizing: border-box;
    display: flex;
    height: 80px;
    padding: 20px;
    --ta-type-card-title-sp: var(--ta-type-card-title-pc);
  }

  .swap-income-feature-card__label {
    flex: 0 1 auto;
  }

  .swap-income-feature-card:nth-child(1) .swap-income-feature-card__label {
    width: 229px;
  }

  .swap-income-feature-card:nth-child(2) .swap-income-feature-card__label,
  .swap-income-feature-card:nth-child(3) .swap-income-feature-card__label,
  .swap-income-feature-card:nth-child(4) .swap-income-feature-card__label {
    white-space: nowrap;
  }

  .swap-income-feature-card:nth-child(5) .swap-income-feature-card__label {
    width: 237px;
  }

  .swap-income-feature-card:nth-child(6) .swap-income-feature-card__label {
    width: 254px;
  }

  .swap-income-swap-grid {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .swap-income-swap-card {
    height: auto;
    padding: var(--ta-space-l);
    row-gap: 5px;
  }

  .swap-income-swap-card__title--compact {
    --ta-type-h4-sp: 700 14px/1.7 var(--ta-font-family-ja);
  }

  .swap-income-swap-card__flags {
    height: 42.75px;
  }

  .swap-income-media-slot--flags {
    aspect-ratio: auto;
    height: 42.75px;
    max-width: 100%;
  }

  .swap-income-swap-card__amount {
    height: 62px;
    min-height: 62px;
  }

  .swap-income-swap-card:nth-child(-n + 2) {
    height: 178.75px;
  }

  .swap-income-swap-card:nth-child(n + 3) {
    height: 202.75px;
  }

  .swap-income-swap-card:nth-child(1) .swap-income-swap-card__unit {
    --ta-type-h3-sp: 400 20px/1 var(--ta-font-family-ja);
  }

  .swap-income-swap-card__sp-break {
    display: block;
  }

  .swap-income-pair-grid {
    gap: 28px;
    grid-template-columns: minmax(0, 1fr);
    padding-left: 4px;
    padding-right: 4px;
  }

  .swap-income-pair-card {
    --ta-type-card-title-sp: var(--ta-type-card-title-pc);
    --ta-type-h3-sp: var(--ta-type-card-title-pc);
    gap: var(--ta-space-l);
    height: 343px;
    padding: var(--ta-space-l) 17px;
  }

  .swap-income-pair-card:nth-child(2) {
    height: 247px;
  }

  .swap-income-page .swap-income-pair-list {
    gap: 0;
  }

  .swap-income-section__body--pairs .swap-income-text-stack,
  .swap-income-detail .swap-income-text-stack {
    gap: 0;
  }

  .swap-income-detail {
    gap: var(--ta-space-text-gap);
  }

  .swap-income-detail--media-left .swap-income-text-stack {
    order: 1;
  }

  .swap-income-detail--media-left .swap-income-media-slot {
    order: 2;
  }
}