@charset "UTF-8";
/*
 * fx/index.php（特長は extend.css の tinted-panel ＋ media-block--center、レート一覧は rate-board、マーケット情報は feature-card--dark）
 */

/* 最新の高機能ツール（白いカード：見出し、取引画面 | ロゴ＋文章） */
.fx-index .fx-index__card {
  padding: var(--space-32) var(--space-16);
  background-color: var(--white);
  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
}

.fx-index .fx-index__card-caption {
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: 1.5;
  color: var(--dark-blue);
}

.fx-index .fx-index__mt5-logo {
  display: block;
  width: 100%;
  max-width: 36rem;
  height: auto;
  margin-top: var(--space-8);
}

@media screen and (min-width: 768px) {
  .fx-index .fx-index__card {
    padding: var(--space-48);
  }

  .fx-index .fx-index__card-caption {
    font-size: var(--font-size-16);
  }
}

/* 取引コスト：文章の右に「¥0」 */
.fx-index .fx-index__cost {
  display: grid;
  grid-template-columns: 1fr 9.6rem;
  align-items: center;
  gap: var(--space-16);
}

.fx-index .fx-index__cost img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .fx-index .fx-index__cost {
    grid-template-columns: 1fr 14rem;
    gap: var(--space-32);
  }
}

/* 少額：最低取引単位と必要証拠金の枠 */
.fx-index .fx-index__amount {
  padding: var(--space-24);
  background-color: var(--blue-50);
}

.fx-index .fx-index__amount-unit {
  font-size: var(--font-size-14);
  font-weight: 700;
  color: var(--dark-blue);
}

.fx-index .fx-index__amount-required {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  margin: var(--space-16) 0;
}

.fx-index .fx-index__amount-label {
  padding: var(--space-4) var(--space-16);
  border-radius: 999px;
  background-color: var(--dark-blue);
  font-size: var(--font-size-14);
  font-weight: 700;
  color: var(--white);
}

.fx-index .fx-index__amount-value {
  font-size: var(--font-size-20);
  font-weight: 700;
  color: var(--dark-blue);
}

.fx-index .fx-index__amount-value strong {
  font-size: var(--font-size-36);
  line-height: 1;
}

/* 各種コラムおよびレポート：濃紺のリンク（1 つ目は幅いっぱい、残りは 2 列）＋ 更新頻度のラベル */
.fx-index .fx-index__reports {
  display: grid;
  gap: var(--space-16);
}

.fx-index .fx-index__report,
.fx-index .fx-index__mypage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16);
  text-decoration: none;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.fx-index .fx-index__report {
  background-color: var(--dark-blue);
  color: var(--white);
}

.fx-index .fx-index__report:hover {
  background-color: var(--blue);
}

.fx-index .fx-index__report-title {
  font-size: var(--font-size-16);
  font-weight: 700;
  line-height: 1.5;
}

.fx-index .fx-index__report-sub {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--font-size-12);
  font-weight: 400;
}

.fx-index .fx-index__report-label {
  flex-shrink: 0;
  white-space: nowrap;
}

.fx-index .fx-index__report .fx-index__report-label {
  border-color: var(--white);
  color: var(--white);
}

.fx-index .fx-index__mypage-heading {
  margin-bottom: var(--space-16);
  font-size: var(--font-size-16);
  font-weight: 700;
  text-align: center;
  color: var(--dark-blue);
}

.fx-index .fx-index__mypage {
  display: grid;
  gap: var(--space-8);
  list-style: none;
}

.fx-index .fx-index__mypage-item {
  background-color: var(--light-gray);
  color: var(--base-text-color);
}

.fx-index .fx-index__mypage-item:hover {
  box-shadow: inset 0 0 0 1px var(--dark-blue);
}

.fx-index .fx-index__mypage-title {
  display: block;
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: 1.6;
  color: var(--dark-blue);
}

.fx-index .fx-index__mypage-name {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--font-size-14);
}

@media screen and (min-width: 768px) {
  .fx-index .fx-index__reports {
    grid-template-columns: 1fr 1fr;
  }

  .fx-index .fx-index__report--large {
    grid-column: span 2;
  }

  .fx-index .fx-index__report,
  .fx-index .fx-index__mypage-item {
    padding: var(--space-16) var(--space-24);
  }

  .fx-index .fx-index__report-title {
    font-size: var(--font-size-18);
  }

  .fx-index .fx-index__report--large .fx-index__report-title {
    font-size: var(--font-size-24);
  }

  .fx-index .fx-index__report-sub {
    display: inline;
    margin: 0 0 0 var(--space-16);
    font-size: var(--font-size-14);
  }
}

/* FXがはじめての方へ：バナー画像 */
.fx-index .fx-index__banner {
  display: block;
  transition: opacity 0.2s;
}

.fx-index .fx-index__banner:hover {
  opacity: 0.8;
}

.fx-index .fx-index__banner img {
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .fx-index .fx-index__report,
  .fx-index .fx-index__mypage-item,
  .fx-index .fx-index__banner {
    transition: none;
  }
}