@charset "UTF-8";

/* =============================================================
 * キャンペーンバナー（◯月の申込者様限定特典）
 *
 * atenai (lightning テーマ) の _g3/assets/css/campaign.css から
 * キャンペーン部分だけを移植し、配色を THE MATH の Figma に合わせたもの。
 * 寸法・ブレークポイント (767px) は atenai 版から変えていない。
 * 元ファイルにあった「お知らせ枠」(p-announcement / c-announcement-*
 * / c-notice-box / c-text-note) は THE MATH では使わないため除いている。
 *
 * マークアップは template-parts/section-campaign.php。
 * 月次で変わる文言・割引率は inc/campaign.php。
 *
 * 配色 (Figma: node 38:7350「ASIRキャンペーン_PC」)
 * atenai は紺ベースだったが、THE MATH 版は水色ベース。
 * 大半が home-style.css の :root で定義済みのブランド変数と一致するので、
 * 生の hex ではなくその変数を使う。ブランド色を変えれば追従する。
 *   セクション背景   #E6EEF7  var(--main3)
 *   パネル背景       #D1DFEF  ← 変数化されていない唯一の色
 *   バッジ / リボン   #262B38  var(--main1)
 *   CTA ボタン       #E9D074  var(--main6)
 *   文字・罫線       #1F1F1F  var(--primary1)
 *   カード / 白地     #FFFFFF  var(--primary7)
 *   ％OFF の数字      #B69241  (atenai と同値。ブランド変数には無い)
 *   チェックアイコン  #3A81D9  images/icons/check-blue.svg
 *
 * フォントは Figma どおり2書体を使い分ける。
 *   Noto Serif JP … 和文の見出し・説明文 (サイト共通の書体)
 *   游明朝 (YuMincho) … 数字まわり
 *     「2」大特典 / リボンの 1・2 / 50・30 / ％・OFF /
 *     価格と「円」「→」/ 特典1の「1科目55分」
 * 游明朝は Google Fonts に無い OS 標準フォントなので、Web フォントの
 * 読み込みは増えない (--campaign-font-mincho のスタックで指定)。
 * 移植元 atenai は Shippori Mincho B1 + Noto Sans JP だったが、
 * 本サイトでは使わないので Google Fonts の読み込みごと header.php から外した。
 *
 * 既定は Noto Serif JP。游明朝にしたい要素にだけ
 * font-family: var(--campaign-font-mincho) を足す方針。
 * ============================================================= */

/* セクションの基点。
   既定の font-family はここだけで指定する (子は継承)。
   パネルの水色はブランド変数に無いので、ここで名前を付けておく。 */
.p-campaign {
  --campaign-panel-bg: #d1dfef;

  /* 游明朝は環境ごとに名前が違うので候補を並べる。
     macOS: 游明朝体 / Hiragino Mincho、Windows: Yu Mincho / MS P明朝。 */
  --campaign-font-mincho: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;

  font-family: "Noto Serif JP", serif;
}

/* -------------------------------------------------------------
 * ホスト側 (home-style.css) との差分を吸収するリセット
 *
 * home-style.css は `* { font-family: "Noto Serif JP"; font-weight: 500 }`
 * を当てている。`*` は継承ではなく全要素に直接効くので、
 * 親に指定した font-weight: 600 が子の span で 500 に戻ってしまう。
 * セクション内だけ inherit にして、親の指定が子まで伝わるようにする。
 * (font-family は今はサイト共通の書体と同じ値だが、.p-campaign 側を
 *  差し替えるだけでセクション全体を変えられるよう同じ扱いにしている)
 *
 * 詳細度は `.p-campaign *` = (0,1,0) で `*` (0,0,0) には勝つが、
 * 同じ (0,1,0) のコンポーネント側とは同点になる。
 * このファイルの先頭に置いてあるので、後続のコンポーネント指定が勝つ。
 * 順番を入れ替えると font-weight の指定が全部無効になるので注意。
 * ------------------------------------------------------------- */

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

/* home-style.css には `ul { list-style: none }` が無いので、
   チェックリストの行頭記号をここで消す。 */
.p-campaign ul {
  list-style: none;
}

/* 移植元 (asir) は body に line-height: 2 が効いている前提なので、
   行送りを明示していないテキストのために同じ値を与える。 */
.p-campaign {
  line-height: 2;
}

/* -------------------------------------------------------------
 * 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-blue.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: #1f1f1f;
  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-blue.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(--main3); /* #E6EEF7 */
}

/* 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 {
  box-sizing: border-box;
  position: absolute;
  top: -25px;
  left: 50%;
  width: 290px;
  padding: 13px 15px;
  transform: translateX(-50%);
  background-color: var(--main1); /* #262B38 */
  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(--primary1); /* #1F1F1F。水色パネルの上なので atenai の白から反転 */
  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 を
   その半分だけ押し上げるので、これで位置を補正している。

   字面の高さは「2」53px / 「大特典」51px とほぼ同じなので、
   ベースラインを揃えると「2」が 7.4px 浮く。ここでは見た目を優先して
   字面の下端が揃う位置に合わせた (中央揃えより 1.35px 上)。
   canvas に実描画してピクセル走査した実測値。
   フォントを変えたら測り直すこと (値は書体の縦メトリクス依存)。 */
.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」と「大特典」が離れて見える。負のマージンで詰めている
   (実測 14.2px → 6.2px)。letter-spacing の分の右アキも一緒に打ち消している。
   また SP はインライン要素なのでベースライン揃えになり、53px の「2」が
   41px の「大特典」より上に飛び出す。vertical margin はインラインでは
   効かない (margin-bottom も 0 に戻している) ため、position: relative で
   下げて字面の中心を揃えている。ベースラインからの字面中心は
   「2」が -20.5px、「大特典」が -15.5px なので、その差の 4.9px。 */
@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 {
  box-sizing: border-box;
  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: #1f1f1f;
  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 {
  box-sizing: border-box;
  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(--main1) transparent transparent var(--main1); /* #262B38 */
}

/* 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 指定)。「特典」の label は Noto Serif JP のまま */
.c-benefit-card__ribbon-num {
  font-family: var(--campaign-font-mincho);
  font-size: 23px;
}

/* 見出し行 (リボンを避けるため左に余白を取る)。
   PC は注記を折り返して名前の下に落とす。SP は縦積み。
   padding-left は特典1 (体験授業) 用。カード左端から見出しまで
   12px (カードの padding) + 74px = 86px。 */
.c-benefit-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 6px; /* 折り返した注記は名前の直下に詰めたいので row-gap は 0 */
  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: #1f1f1f;
  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;
  }
}

/* 「入会金」は3文字しかないので、「体験授業」と同じ字間だと間延びして見える */
.c-benefit-card__head--compact .c-benefit-card__name {
  letter-spacing: 0.8px;
}

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

/* 特典2「体験授業の翌日までに / ご入会希望頂くと、」は和文なので Noto Serif JP に戻す */
.c-benefit-card__head--compact .c-benefit-card__lead {
  font-family: "Noto Serif JP", serif;
}

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

/* 特典1の「※お一人様一回のみとなります」
   PC は width: 100% で名前の下に折り返し、SP は名前の右に置く。 */
.c-benefit-card__note {
  width: 100%;
  color: #1f1f1f;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

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

/* 「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」の位置がカードごとにずれる
   (特典1 は「※お一人様一回のみとなります」があるぶん左列が広い)。
   グリッドの右端は両カードで揃っているので、右寄せにして縦を合わせる。 */
@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 共通。
   Figma では数字が游明朝 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 側で Noto Serif JP に戻している。
   baseline 揃えなのは通常価格と割引後価格の下端を合わせるため。 */
.c-benefit-card__result {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  color: #1f1f1f;
  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 #1f1f1f;
}

@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 で数字の左端にラベルが揃う。
   価格行で唯一の和文なので、親から継承した游明朝を Noto Serif JP に戻す。 */
.c-benefit-card__before-label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Noto Serif JP", serif;
  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 {
  box-sizing: border-box;
  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(--main6); /* #E9D074 */
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
  color: #1f1f1f;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.c-button-cta--campaign:hover,
.c-button-cta--campaign:focus {
  color: #1f1f1f;
  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: #1f1f1f;
  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;
  }
}