@charset "UTF-8";

/* =============================================================
 * キャンペーンバナー（◯月の申込者様限定特典）
 *
 * the-math テーマ（math-course）の assets/css/campaign.css を移植したもの。
 * 寸法・配色・ブレークポイント (767px) は移植元から変えていない。
 *
 * マークアップは template-parts/section-campaign.php。
 * 月次で変わる文言・割引率は inc/campaign.php。
 *
 * 移植元からの変更点は3つ。いずれも当テーマ側の前提が違うことによる。
 *
 * 1. 配色をローカル変数化
 *    移植元は home-style.css の :root で定義されたブランド変数
 *    (--main1 / --main3 / --main6 / --primary1) を参照していたが、
 *    当テーマにその定義が無いので .p-campaign 上で同じ値を定義し直した。
 *    このファイル単体で完結する。
 *
 * 2. box-sizing を自前で持つ
 *    移植元は home-style.css の `* { box-sizing: border-box }` が
 *    前提だが、当テーマにグローバルな指定が無い。
 *    これが無いと幅指定のあるバッジ・カード・CTA が padding 分だけ広がる。
 *
 * 3. 和文の書体
 *    Figma の指定どおり "Noto Serif JP"（数字だけ游明朝）の2書体構成。
 *    当テーマは元々このウェブフォントを読み込んでいないため、
 *    front-page.php で Google Fonts から読み込んでいる。
 *
 * 配色・書体は i塾 の Figma に合わせてある。
 * (Figma: pLXNOyoldSDLxOv8vmfow9 / node 50:7882「ASIRキャンペーン_PC」)
 * the-math から移植した時点の配色とは別物なので、the-math 側を直しても
 * こちらは追従しない。逆も同じ。
 *
 * 配色
 *   セクション背景   #D9DBE7  --campaign-section-bg
 *   パネル背景       #C7CBE1  --campaign-panel-bg
 *   バッジ / リボン   #040A74  --campaign-accent   （紺）
 *   見出し           #040A74  --campaign-title    （紺。本文色とは別）
 *   CTA ボタン       #9B1222  --campaign-cta-bg   （臙脂。文字は白）
 *   文字・罫線       #1F1F1F  --campaign-text
 *   カード / 白地     #FFFFFF
 *   ％OFF の数字      #B69241
 *   チェックアイコン  #8A8BD6  images/icons/check-periwinkle.svg
 * ============================================================= */

/* セクションの基点。
   既定の font-family と配色はここだけで指定する (子は継承 / var 参照)。 */
.p-campaign {
  /* --- 配色 (i塾 Figma) --- */
  --campaign-section-bg: #d9dbe7;
  --campaign-panel-bg: #c7cbe1;
  --campaign-accent: #040a74;
  --campaign-title: #040a74;
  --campaign-cta-bg: #9b1222;
  --campaign-cta-text: #fff;
  --campaign-text: #1f1f1f;

  /* --- 書体 (i塾 Figma) ---
     和文 (base) は Noto Serif JP SemiBold、数字まわり (mincho) は游明朝、
     という2書体の使い分け。Figma の指定どおり。
     游明朝は環境ごとに名前が違うので候補を並べる。
     macOS: 游明朝体 / Hiragino Mincho、Windows: Yu Mincho / MS P明朝。
     游明朝は OS 標準フォントなのでウェブフォントの読み込みは増えない。
     Noto Serif JP は front-page.php で Google Fonts から読み込んでいる。 */
  --campaign-font-mincho: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  --campaign-font-base: "Noto Serif JP", serif;

  font-family: var(--campaign-font-base);

  /* 移植元は body に line-height: 2 が効いている前提。
     当テーマも同じ値だが、依存を断つため明示しておく。 */
  line-height: 2;
}

/* -------------------------------------------------------------
 * ホスト側 (style.css / additional.css) との差分を吸収するリセット
 *
 * style.css は `h1〜h6 { font-weight: 300 }` `a { font-weight: 300 }` を
 * 当てている。セクション内だけ inherit にして、親で指定した font-weight が
 * 子まで伝わるようにする。
 * (font-family も、.p-campaign 側を差し替えるだけでセクション全体を
 *  変えられるよう同じ扱いにしている)
 *
 * 詳細度は `.p-campaign *` = (0,1,0)。同じ (0,1,0) のコンポーネント側とは
 * 同点になるので、このファイルの先頭に置いてある。
 * 順番を入れ替えると font-weight の指定が全部無効になるので注意。
 *
 * box-sizing もここでまとめて当てる（移植元はグローバル指定が前提だった）。
 * ------------------------------------------------------------- */

.p-campaign,
.p-campaign * {
  box-sizing: border-box;
}

.p-campaign * {
  font-family: inherit;
  font-weight: inherit;
}

/* チェックリストの行頭記号を消す。
   当テーマの style.css は `ul { list-style: none }` を持っているので
   実質は保険だが、移植元と同じくこのファイル内で完結させておく。 */
.p-campaign ul {
  list-style: none;
}

/* -------------------------------------------------------------
 * u-pc-only / u-sp-only
 * ------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .u-pc-only {
    display: none;
  }
}

.u-sp-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .u-sp-only {
    display: revert;
  }
}

/* -------------------------------------------------------------
 * c-check-list
 * チェックボックス風アイコン付きのリスト。
 * アイコンは images/icons/check-periwinkle.svg を背景画像として使用。
 * ------------------------------------------------------------- */

/* アイコンは line-height 基準の中央に揃うように em 単位 + background-position で配置 */
.c-check-list__item {
  position: relative;
  margin-bottom: 10px;
  padding-left: 1.8em; /* アイコン幅 (1.2em) + 余白 (0.6em) */
  background-repeat: no-repeat;
  background-position: 0 0.2em; /* テキストの1行目に合わせて配置 */
  background-size: 1.2em 1.2em;
  color: var(--campaign-text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .c-check-list__item {
    font-size: 15px;
  }
}

/* チェックマークが藤色のアイコン。キャンペーンバナーで使用。 */
.c-check-list__item--blue {
  background-image: url("../images/icons/check-periwinkle.svg");
}

/* SP はアイコンを 21px 固定にする (font-size 基準の em だと小さくなりすぎる)。
   行の高さ (14px * 1.5 = 21px) とアイコンが同寸なので、
   background-position を下げるとその分だけ下端が切れる。必ず 0 にすること。 */
@media screen and (max-width: 767px) {
  .c-check-list__item--blue {
    margin-bottom: 18px;
    padding-left: 29px;
    background-position: 0 0;
    background-size: 21px 21px;
    font-size: 14px;
    line-height: 1.5;
  }
}

/* -------------------------------------------------------------
 * p-campaign
 * 申込者様限定特典セクション。背景と余白だけを持つ外枠。
 * padding-top はバッジがパネル上辺から 25px はみ出す分を含む。
 * ------------------------------------------------------------- */

.p-campaign {
  padding: 72px 15px 50px;
  background-color: var(--campaign-section-bg);
}

/* SP はバッジがパネルからはみ出さないので、上の余白も 20px でよい */
@media screen and (max-width: 767px) {
  .p-campaign {
    padding: 20px;
  }
}

.p-campaign__inner {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}

.p-campaign__cta {
  margin-top: 46px;
}

@media screen and (max-width: 767px) {
  .p-campaign__cta {
    margin-top: 20px;
  }
}

/* -------------------------------------------------------------
 * c-campaign-banner
 * 上から: 水色パネル (バッジ / 見出し / 写真 + 特典カード2枚)
 *         → 白いお悩み解決ボックス。
 * PC … バッジは上辺にまたがり、パネルは写真と特典カード2枚まで覆う
 * SP … バッジは全幅で独立し、水色はタイトルと写真まで。特典カードは面の外に出る
 * ------------------------------------------------------------- */

.c-campaign-banner__panel {
  position: relative;
  padding: 39px 40px 23px;
  background-color: var(--campaign-panel-bg);
}

/* SP では水色の面は __title / __photos 側が持つ */
@media screen and (max-width: 767px) {
  .c-campaign-banner__panel {
    padding: 0;
    background-color: transparent;
  }
}

/* PC はパネル上辺にまたがる紺バッジ / SP は全幅の帯 */
.c-campaign-banner__badge {
  position: absolute;
  top: -25px;
  left: 50%;
  width: 290px;
  padding: 13px 15px;
  transform: translateX(-50%);
  background-color: var(--campaign-accent);
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.95px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .c-campaign-banner__badge {
    position: static;
    width: 100%;
    padding: 12px 17px; /* 高さ 50px */
    transform: none;
    font-size: 22px;
    letter-spacing: 1.1px;
  }
}

/* 見出し「夏休み集中応援 2大特典キャンペーン」
   PC は1行、SP は「夏休み集中応援 / 2大特典 / キャンペーン」の3行に積む。 */
.c-campaign-banner__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 86px;
  margin-bottom: 19px;
  color: var(--campaign-title); /* 本文色ではなく紺 */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

/* 水色の面はバッジの直下から始まるので、間に隙間は作らない
   (バッジと見出しの間隔は、この padding-top で取る)。 */
@media screen and (max-width: 767px) {
  .c-campaign-banner__title {
    display: block;
    height: auto;
    margin-bottom: 0;
    padding-top: 20px;
    background-color: var(--campaign-panel-bg);
  }
}

.c-campaign-banner__title-lead {
  margin-right: 20px;
  font-size: 54px;
  letter-spacing: 2.16px;
}

/* SP は3行組みの1行目。「2大特典」との行間を負のマージンで詰める */
@media screen and (max-width: 767px) {
  .c-campaign-banner__title-lead {
    display: block;
    margin-right: 0;
    margin-bottom: -8px;
    font-size: 41px;
  }
}

/* 「2」だけ游明朝 (移植元の Figma 指定)。
   親は align-items: center なので、各 span は「行ボックス」の中心で揃う。
   ところが行ボックスの中で字面が占める位置はフォントごとに違うため、
   素のままだと「2」が浮いて見える。margin-bottom は中央揃えの item を
   その半分だけ押し上げるので、これで位置を補正している。
   フォントを変えたら測り直すこと (値は書体の縦メトリクス依存)。 */
.c-campaign-banner__title-num {
  margin-right: 4px;
  margin-bottom: -5px;
  font-family: var(--campaign-font-mincho);
  font-size: 72px;
}

/* SP は見出しが display: block になるぶん、span 間の改行が半角スペース
   (約10px) として描画され、PC 用の margin-right: 4px と合わせて
   「2」と「大特典」が離れて見える。負のマージンで詰めている。
   また SP はインライン要素なのでベースライン揃えになり、53px の「2」が
   41px の「大特典」より上に飛び出す。vertical margin はインラインでは
   効かないため、position: relative で下げて字面の中心を揃えている。 */
@media screen and (max-width: 767px) {
  .c-campaign-banner__title-num {
    position: relative;
    top: 4.9px;
    margin-right: -4px;
    margin-bottom: 0;
    font-size: 53px;
    letter-spacing: 3.71px;
  }
}

.c-campaign-banner__title-main {
  margin-right: 4px;
  font-size: 54px;
  letter-spacing: 2.16px;
}

@media screen and (max-width: 767px) {
  .c-campaign-banner__title-main {
    margin-right: 0;
    font-size: 41px;
  }
}

/* 「キャンペーン」だけ小さめ + 字間を詰める */
.c-campaign-banner__title-sub {
  font-size: 41px;
  letter-spacing: -0.17em;
}

@media screen and (max-width: 767px) {
  .c-campaign-banner__title-sub {
    display: block;
    font-size: 35px;
  }
}

/* 写真 + 特典カード2枚の横並び (SP では縦積み)。
   SP は gap を持たない。写真とカード1は接し (水色の面がそこで終わる)、
   カード同士の間隔は c-benefit-card 側の隣接セレクタで作る。 */
.c-campaign-banner__cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
}

@media screen and (max-width: 767px) {
  .c-campaign-banner__cards {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
}

/* 2枚の写真は隙間なく突き合わせる。
   SP では水色の面の一部になるので、背景と余白をここで持つ。 */
.c-campaign-banner__photos {
  display: flex;
  flex-shrink: 0;
  width: 335px;
}

@media screen and (max-width: 767px) {
  .c-campaign-banner__photos {
    width: 100%;
    padding: 13px 20px 19px;
    background-color: var(--campaign-panel-bg);
  }
}

/* 写真1枚ぶんの切り抜き枠。
   object-fit: cover だけだと引き (人物が小さい) になるため、
   枠でクリップしたうえで画像側を scale して寄せる。 */
.c-campaign-banner__photo-frame {
  width: 50%;
  height: 237px;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .c-campaign-banner__photo-frame {
    height: 221px;
  }
}

.c-campaign-banner__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 50%;
  transform: scale(1.26);
}

.c-campaign-banner__photo--right {
  object-position: 60% 38%;
  transform: scale(1.4);
}

/* 下段: 白いお悩み解決ボックス (c-check-list を流用)
   PC はリストのほうが背が高いので、padding-top がそのまま
   1項目目の上の余白になる。 */
.c-campaign-banner__resolve {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 38px 21px 28px;
  background-color: #fff;
}

/* SP ではカードとの間に 9px 空け、見出しを上・リストを下に積む。 */
@media screen and (max-width: 767px) {
  .c-campaign-banner__resolve {
    flex-direction: column;
    align-items: stretch;
    gap: 34px;
    margin-top: 9px;
    padding: 23px 20px;
  }
}

.c-campaign-banner__resolve-lead {
  flex-shrink: 0;
  width: 152px;
  color: var(--campaign-text);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

/* SP は「体験授業を受けると」を1行で中央に置く (改行は u-pc-only で消える) */
@media screen and (max-width: 767px) {
  .c-campaign-banner__resolve-lead {
    width: 100%;
  }
}

/* -------------------------------------------------------------
 * c-benefit-card
 * キャンペーンバナー内の白い特典カード。
 * 左上の紺色リボンは ::before の三角形で描画する。
 * ------------------------------------------------------------- */

.c-benefit-card {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 271px;
  height: 237px;
  padding: 6px 12px;
  overflow: hidden;
  background-color: #fff;
}

/* SP は高さ 174px が基準だが、フォント差で溢れると overflow: hidden で
   文字が切れてしまうので min-height にしている。 */
@media screen and (max-width: 767px) {
  .c-benefit-card {
    width: 100%;
    height: auto;
    min-height: 174px;
    padding: 30px 20px 25px;
  }
}

/* 左上のリボン (直角三角形)。バッジと同じ紺 */
.c-benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-width: 41px;
  border-style: solid;
  border-color: var(--campaign-accent) transparent transparent var(--campaign-accent);
}

/* SP はカードが縦積みになるので、カード同士だけ 9px 空ける */
@media screen and (max-width: 767px) {
  .c-benefit-card + .c-benefit-card {
    margin-top: 9px;
  }
}

/* SP の特典2は「入会金 + 注記」と「30%OFF」を左右に並べ、価格行を下段に敷く。
   左は中身ぶんだけ (auto)、余りは右列 (1fr) に流して2つが隣り合うようにしている。 */
@media screen and (max-width: 767px) {
  .c-benefit-card--split {
    display: grid;
    align-items: start;
    grid-template-columns: auto 1fr;
    column-gap: 5px;
  }
}

/* 三角形の角からの余白が上下左右で揃って見えるよう、top と left を同値にしている */
.c-benefit-card__ribbon {
  display: flex;
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  width: 28px;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/* 「特典」は全角2文字なので、font-size を親の width (28px) の半分より
   大きくすると溢れる。14px が上限。 */
.c-benefit-card__ribbon-label {
  font-size: 14px;
}

/* リボンの数字だけ游明朝 (移植元の Figma 指定)。 */
.c-benefit-card__ribbon-num {
  font-family: var(--campaign-font-mincho);
  font-size: 23px;
}

/* 見出し行 (リボンを避けるため左に余白を取る)。
   PC は注記を折り返して名前の下に落とす。SP は縦積み。
   padding-left は特典1 (体験授業) 用。カード左端から見出しまで
   12px (カードの padding) + 74px = 86px。 */
/* 名前とリードは必ず横一列。折り返すと、リードが名前の右ではなく
   下に落ちてしまう（PC の特典2は名前+リードで実測 184.5px / 使える幅 188px
   と余裕が 3.5px しかないので、リードの font-size をいじると簡単に折り返す）。
   注記を名前の下に落としていた頃の名残で wrap にしていたが、
   その注記は無くなったので nowrap でよい。 */
.c-benefit-card__head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0 6px;
  padding-left: 74px;
}

@media screen and (max-width: 767px) {
  .c-benefit-card__head {
    flex-direction: column;
    padding-left: 48px;
  }
}

/* 特典2 (入会金) は見出しの右に注記が並ぶので、左余白を詰めて注記の横幅を確保する。 */
.c-benefit-card__head--compact {
  padding-left: 59px;
  column-gap: 5px;
}

@media screen and (max-width: 767px) {
  .c-benefit-card__head--compact {
    padding-left: 48px;
  }
}

.c-benefit-card__name {
  color: var(--campaign-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1.82px;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .c-benefit-card__name {
    font-size: 25px;
    letter-spacing: 1.75px;
  }
}

/* 見出しの右に添える小さい説明。2枚のカードで中身も書体もサイズも違う。
   特典1「（90分）」は数字なので游明朝、10.827px (Figma 指定)。
   改行位置は <br> だけで決めたいので nowrap で自動折り返しを止める。 */
.c-benefit-card__lead {
  margin-top: 10px;
  color: var(--campaign-text);
  font-family: var(--campaign-font-mincho);
  font-size: 10.83px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* 特典2「体験授業の翌日までに / ご入会希望頂くと、」は和文なので既定の書体に戻す。
   サイズも特典1とは別で 9.624px (Figma 指定)。
   ここを 10px にすると「体験授業の翌日までに」が 100px になり、
   名前 (83.46px) + gap (5px) と合わせて 188.46px。使える幅 188px を
   0.46px 超えて、リードが名前の下に落ちる。安易に上げないこと。 */
.c-benefit-card__head--compact .c-benefit-card__lead {
  font-family: var(--campaign-font-base);
  font-size: 9.62px;
}

@media screen and (max-width: 767px) {
  .c-benefit-card__lead {
    margin-top: 5px;
  }
}

/* 「50％OFF」「30％OFF」。数字・記号ともに游明朝 (Figma 指定)。
   子の __off-num / __off-unit はここから継承する。
   SP はグリッドの右上セルに入るので、上下の auto マージンは効かせない。 */
.c-benefit-card__off {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  color: #b69241;
  font-family: var(--campaign-font-mincho);
  font-weight: 600; /* 数字は游明朝 Demibold */
  line-height: 1;
}

/* SP は特典1と特典2で左列 (見出し) の幅が違うため、左寄せだと
   「50％OFF」と「30％OFF」の位置がカードごとにずれる
   (特典2 は「体験授業の翌日までに…」の2行があるぶん左列が広い)。
   グリッドの右端は両カードで揃っているので、右寄せにして縦を合わせる。 */
@media screen and (max-width: 767px) {
  .c-benefit-card__off {
    justify-content: flex-end;
    margin-top: 0;
  }
}

.c-benefit-card__off-num {
  font-size: 101px;
  letter-spacing: -0.02em;
}

@media screen and (max-width: 767px) {
  .c-benefit-card__off-num {
    font-size: 75px;
    letter-spacing: -0.02em;
  }
}

/* 「％」と「OFF」は左端を揃える。
   中央揃えだと文字数の違いで「％」が右にずれて見える。PC / SP 共通。
   数字が Demibold・こちらは Medium と一段細いので、
   継承した font-weight: 600 を 500 に落としている。 */
.c-benefit-card__off-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 5px;
  font-weight: 500;
}

.c-benefit-card__off-percent {
  font-size: 40px;
}

@media screen and (max-width: 767px) {
  .c-benefit-card__off-percent {
    font-size: 30px;
  }
}

.c-benefit-card__off-text {
  font-size: 31px;
}

@media screen and (max-width: 767px) {
  .c-benefit-card__off-text {
    font-size: 23px;
  }
}

/* 価格の before → after 行。金額・「円」「→」「(税込)」はすべて游明朝
   (移植元の Figma 指定)。子要素はここから継承するので、行内で唯一の和文である
   「通常価格」だけ __before-label 側で既定の書体に戻している。
   baseline 揃えなのは通常価格と割引後価格の下端を合わせるため。 */
.c-benefit-card__result {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  color: var(--campaign-text);
  font-family: var(--campaign-font-mincho);
  font-weight: 600;
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .c-benefit-card__result {
    margin-top: 0;
  }
}

/* 「◯％OFF」との間に区切り線を入れる。
   価格が3要素あって横幅がぎりぎりなので、gap も詰める。 */
.c-benefit-card__result--bordered {
  gap: 5px;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid var(--campaign-text);
}

@media screen and (max-width: 767px) {
  .c-benefit-card__result--bordered {
    grid-column: 1 / -1;
    margin-top: 10px;
  }
}

/* 各要素は縮めない (縮むと「円」や「(税込)」が折り返して枠外に切れる)。
   ラベルを絶対配置にしているのは、この要素の baseline を価格の行に取るため。 */
.c-benefit-card__before {
  position: relative;
  flex-shrink: 0;
  padding-top: 15px; /* ラベル1行ぶん */
  white-space: nowrap;
}

/* この要素の幅は価格そのものなので、left: 0 で数字の左端にラベルが揃う。
   価格行で唯一の和文なので、親から継承した游明朝を既定の書体に戻す。 */
.c-benefit-card__before-label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--campaign-font-base);
  font-size: 12px;
  letter-spacing: 0.6px;
}

.c-benefit-card__before-price {
  font-size: 18px;
  letter-spacing: 0.54px;
}

/* 前後の価格より小さいので、baseline 揃えのままだと矢印が沈んで見える。 */
.c-benefit-card__arrow {
  position: relative;
  top: -5px;
  flex-shrink: 0;
  font-size: 18px;
}

.c-benefit-card__unit-sm {
  font-size: 11px;
}

.c-benefit-card__unit-md {
  font-size: 17px;
}

/* 割引後価格 (「5,500円(税込)」など) */
.c-benefit-card__after {
  flex-shrink: 0;
  font-size: 29px;
  letter-spacing: 0.58px;
  white-space: nowrap;
}

/* 「(税込)」を幅そのままで数えると価格の塊が左に寄って見え、
   逆に完全に外すと右に寄りすぎる。負のマージンで幅を一部だけ打ち消して、
   目で見た中央に合わせている。 */
.c-benefit-card__tax {
  margin-right: -7px;
  font-size: 10px;
}

/* -------------------------------------------------------------
 * c-button-cta
 * キャンペーン下部の CTA ボタン。
 * 左端に「60秒完了」バッジを置き、バッジ分だけ幅と左パディングを広げる。
 * ------------------------------------------------------------- */

.c-button-cta {
  display: flex;
  position: relative; /* __badge を左端に絶対配置するための基準 */
  align-items: center;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.c-button-cta--campaign {
  width: 386px;
  padding: 14px 50px;
  border-radius: 33.483px;
  background: var(--campaign-cta-bg);
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
  color: var(--campaign-cta-text); /* 臙脂地なので白抜き */
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.c-button-cta--campaign:hover,
.c-button-cta--campaign:focus {
  color: var(--campaign-cta-text);
  text-decoration: none;
}

/* SP は全幅・高さ 49px */
@media screen and (max-width: 767px) {
  .c-button-cta--campaign {
    width: 100%;
    padding: 14px 44px;
    font-size: 14px;
  }
}

/* 丸で囲まれた矢印アイコン。ラベルの直後ではなくボタン右端に置く。
   左右のパディングを対称にしてあるので、矢印を流れから外すと
   ラベルがボタン中央に揃う。 */
.c-button-cta__arrow {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 22px;
  height: 22px;
  margin: 0;
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
  .c-button-cta__arrow {
    right: 16px;
    width: 20px;
    height: 20px;
  }
}

.c-button-cta__badge {
  display: flex;
  position: absolute;
  top: 50%;
  left: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #fff;
  color: var(--campaign-text);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.1;
}

/* SP はバッジも一回り小さくする */
@media screen and (max-width: 767px) {
  .c-button-cta__badge {
    left: 9px;
    width: 35px;
    height: 35px;
    font-size: 7.7px;
  }
}

.c-button-cta__badge-num {
  font-size: 13px;
}

@media screen and (max-width: 767px) {
  .c-button-cta__badge-num {
    font-size: 12px;
  }
}

.c-button-cta__badge-text {
  font-size: 10px;
}

@media screen and (max-width: 767px) {
  .c-button-cta__badge-text {
    font-size: 9px;
  }
}