@charset "UTF-8";
/* ============================================================
   記事専用スタイル: クレジットカードの還元率（card-reward）

   本文の型は /shared/css/*.css と /column/css/article/common.css に
   依存している。ここには「共通CSSに型が無い要素」だけを書く。

   - .article_table.--auto   : 表全体の幅を内容なりにする（SPは100%に戻す）
   - .article_table.--center : セルのテキストを中央揃えにする
   - .formula_box    : 原稿の「＜クレジットカードのポイント還元率の基本的な計算式＞」
   - .related_links  : 原稿の「＜関連記事＞」のリンク集

   色・文字サイズは既存サイトの値に合わせている（1rem = 10px）。
   ※.related_links は No.1(ponta-earn) 以降の各記事と同一。共通パーツ導入時に
     /column/css/article/common_article.css へ集約する想定。
   ============================================================ */

/* ---- 表 ---------------------------------------------------- */
/* 3列・内容が短い表なので、幅いっぱいに広げず内容なりの幅にする */
.article_table.--auto {
  width: auto;
}

/* 数値だけのセルなので中央揃えにする（caption は共通CSSの左揃えのまま） */
.article_table.--center th,
.article_table.--center td {
  text-align: center;
}

/* ---- 計算式 ------------------------------------------------ */
/* 枠の型は .step_box / .check_box（No.12記事）と揃えている */
.formula_box {
  padding: 3.2rem;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: .8rem;
}

.formula_box_title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.7;
}

.formula_text {
  margin-top: 2rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: #d23a00;
}

/* ---- 関連記事リンク --------------------------------------- */
.related_links_title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.7;
}

.related_links_list {
  margin-top: 1.2rem;
  list-style: none;
}

.related_links_list > li + li {
  margin-top: 1.2rem;
}

/* ---- SP --------------------------------------------------- */
@media screen and (max-width: 640px) {
  /* セルが短く横スクロールの必要がないため、SPでは幅いっぱいにする */
  .article_table.--auto {
    width: 100%;
  }

  .formula_box {
    padding: 2rem;
  }

  .formula_box_title {
    font-size: 1.4rem;
  }

  .formula_text {
    font-size: 1.6rem;
  }

  .related_links_title,
  .related_links_list {
    font-size: 1.4rem;
  }
}