@charset "UTF-8";

/* =============================================================
 * キャンペーンバナー（◯月报名者专享优惠）
 *
 * 骨格は darwin-biology テーマから移植したが、配色・書体・文言・文字
 * サイズは Figma (中国語版) に合わせ直している。
 *   PC: pLXNOyoldSDLxOv8vmfow9 / node 61:8405「ASIRキャンペーン_PC」
 *   SP: pLXNOyoldSDLxOv8vmfow9 / node 63:8543「ASIRキャンペーン_SP」
 * ブレークポイント (767px) は移植元のまま。SP の Figma は 393px 幅で、
 * 左右 20px を除いた 353px がパネル・カードの幅になっている。
 * パネル 1000px・カード 271×237・CTA 386×54 などは PC の Figma と一致。
 *
 * マークアップは template-parts/section-campaign.php。
 * 月次で変わる文言・割引は inc/campaign.php。
 *
 * 配色 (Figma 実測。SVG アセットの fill を直接確認した)
 *   セクション背景   #484848  --campaign-section-bg
 *   パネル背景       #323232  --campaign-panel-bg
 *   バッジ / リボン   #0B0B0B  --campaign-accent
 *   CTA ボタン       #C9A500  --campaign-cta-bg
 *   本文・罫線       #1F1F1F  --campaign-text
 *   見出し           #FFFFFF  (濃いグレーのパネル上に載るので白)
 *   カード / 白地     #FFFFFF
 *   「◯折」の数字     #B69241  --campaign-off
 *   チェックアイコン  枠 #1F1F1F + チェック #C9A500
 *                    assets/images/icons/check-gold.svg
 *
 * 割引は中国語の慣習どおり「折」で出す。日本語版・韓国語版の
 * 「◯％OFF」を2段組みで置いていた場所に、「折」1文字が入る。
 *
 * フォントは Figma どおり2書体を使い分ける。
 *   Noto Serif SC … 中国語の見出し・説明文（「折」もこちら）
 *   游明朝 (YuMincho) … 数字まわり
 *     「2」大优惠活动 / リボンの 1・2 / 5・7 /
 *     価格と「日元」「→」
 * Noto Serif SC はサイトの既定書体 (Noto Sans SC) と一緒に
 * header.php で読み込んでいる。
 * 游明朝は Google Fonts に無い OS 標準フォントなので、Web フォントの
 * 読み込みは増えない (--campaign-font-mincho のスタックで指定)。
 *
 * 既定は Noto Serif SC。游明朝にしたい要素にだけ
 * font-family: var(--campaign-font-mincho) を足す方針。
 * ============================================================= */

/* セクションの基点。
   既定の font-family と配色トークンはここだけで指定する (子は継承 / var 参照)。 */
.p-campaign {
  --campaign-section-bg: #484848;
  --campaign-panel-bg: #323232;
  --campaign-accent: #0b0b0b;
  --campaign-cta-bg: #c9a500;
  --campaign-text: #1f1f1f;
  --campaign-off: #b69241;

  /* 游明朝は環境ごとに名前が違うので候補を並べる。
     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 SC", serif;
}

/* -------------------------------------------------------------
 * ホスト側 (css/style.css) との差分を吸収するリセット
 *
 * asir の style.css は `body { font-weight: 300 }` に加えて
 * `a { font-weight: 300 }` `h1,h2,...,h6 { font-weight: 300 }` を
 * 要素セレクタで当てている。要素セレクタは継承より強いので、
 * 親に指定した font-weight: 600 が子の a / h2 で 300 に戻ってしまう。
 * セクション内だけ inherit にして、親の指定が子まで伝わるようにする。
 * (font-family も同じ扱いにして、.p-campaign 側を差し替えるだけで
 *  セクション全体の書体を変えられるようにしている)
 *
 * 詳細度は `.p-campaign *` = (0,1,0) で要素セレクタ (0,0,1) には勝つが、
 * 同じ (0,1,0) のコンポーネント側とは同点になる。
 * このファイルの先頭に置いてあるので、後続のコンポーネント指定が勝つ。
 * 順番を入れ替えると font-weight の指定が全部無効になるので注意。
 * ------------------------------------------------------------- */

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

/* asir の 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
 * asir の hide-pc / hide-sp とは別系統。移植元の命名のまま持ってきている。
 * ------------------------------------------------------------- */

@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
 * チェックボックス風アイコン付きのリスト。
 * アイコンは assets/images/icons/check-gold.svg を背景画像として使用。
 *
 * PC の数値は Figma のとおり。アイコン 23px、テキストとの間隔 11px、
 * 行の高さ 37.991px (= 18px × 2.111)。項目の間隔もこの行送りだけで作るので
 * margin は持たせない。アイコンは行の縦中央 ((38 - 23) / 2 ≒ 7.5px)。
 * ------------------------------------------------------------- */

.c-check-list__item {
  position: relative;
  padding-left: 34px; /* アイコン幅 (23px) + 余白 (11px) */
  background-repeat: no-repeat;
  background-position: 0 7.5px;
  background-size: 23px 23px;
  color: var(--campaign-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 2.111;
}

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

/* SP はアイコンを 21px 固定にする (PC の 23px だと窮屈)。
   行の高さ (14px * 1.5 = 21px) とアイコンが同寸なので、
   background-position を下げるとその分だけ下端が切れる。必ず 0 にすること。
   行送りが詰まるぶん、項目の間隔は margin で作る。 */
@media screen and (max-width: 767px) {
  .c-check-list__item {
    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 はみ出す分を含む。
 * ------------------------------------------------------------- */

/* 背景の帯を前後のセクション（お知らせ / 「ASIR日本应试塾」の見出し帯）から
   切り離すための、上下の白い余白。

   margin ではなく白い border で作っているのは、margin だと隙間に body の
   背景 (#f6f8f9) が出てしまい純白にならないため。border は background より
   後ろに描画されるので、背景の #484848 の上に白が乗って白帯になる。
   body 側をいじらずにこのセクションだけで完結させられる。

   padding 側は Figma の寸法なので触らないこと
   (上 72px + バッジのはみ出し 25px = Figma のパネル上端 97px、下 50px)。 */
.p-campaign {
  border-top: 70px solid #fff;
  border-bottom: 70px solid #fff;
  padding: 72px 15px 50px;
  background-color: var(--campaign-section-bg);
}

/* SP はバッジがパネルからはみ出さないので、上の余白も 20px でよい */
@media screen and (max-width: 767px) {
  .p-campaign {
    border-top-width: 40px;
    border-bottom-width: 40px;
    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(--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大优惠活动」の2行に積む。 */
.c-campaign-banner__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 86px;
  margin-bottom: 19px;
  color: #fff; /* 濃緑のパネルの上に載るので白 */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

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

/* margin-right は Figma のリードと「2」の間隔 25px (node 61:8471 の gap)。 */
.c-campaign-banner__title-lead {
  margin-right: 25px;
  font-size: 54px;
  letter-spacing: 2.16px;
}

/* 9文字以上のリード (6月・9月・10月) 用。
   Figma の 54px のままだと「2大优惠活动」と合わせてパネルの内寸 920px を
   1px ほど超え、見出しが途中で折り返してしまう。
   10文字 × 46px + 字間 = 478px で、残り 442px に「2大优惠活动」が収まる。
   クラスの付け外しは template-parts/section-campaign.php が文字数で行う。 */
.c-campaign-banner__title-lead--long {
  font-size: 46px;
  letter-spacing: 1.84px;
}

/* SP は2行組みの1行目 (Figma node 63:8604)。
   40px / 行送り 1.6 / 字間なし、下の行との間を -10px で詰める。

   font-size が min() なのは、狭い端末で折り返させないため。
   簡体字は字間なしだと「文字数 × font-size」がそのまま行の幅になるので、
   使える幅を最大文字数で割れば必ず1行に収まる。
   使える幅は「画面幅 − セクションの左右 padding 40px」だが、
   スクロールバーぶんの誤差を見て 48px 引いている。
   Figma の 393px 幅なら min() の左側が選ばれ、指定どおり 40px になる。 */
@media screen and (max-width: 767px) {
  .c-campaign-banner__title-lead {
    display: block;
    margin-right: 0;
    margin-bottom: -10px;
    font-size: min(40px, (100vw - 48px) / 8); /* 8 は --long が付かない月の最大文字数 */
    line-height: 1.6;
    letter-spacing: normal;
  }

  /* 9文字以上の月。Figma の 393px 幅で 10文字 × 34px = 340px。 */
  .c-campaign-banner__title-lead--long {
    font-size: min(34px, (100vw - 48px) / 10); /* 10 は --long が付く月の最大文字数 */
  }
}

/* 「2」だけ游明朝。
   親は align-items: center なので、各 span は「行ボックス」の中心で揃う。
   ところが行ボックスの中で字面が占める位置はフォントごとに違うため、
   素のままだと「2」が浮いて見える。margin-bottom は中央揃えの item を
   その半分だけ動かすので、これで位置を補正している。
   Figma (node 61:8476/61:8477) では「大优惠活动」の字面の中心が「2」より
   4px 上にあるので、負の値で「2」を 4px 下げている。
   書体の縦メトリクス依存なので、フォントを変えたら測り直すこと。

   margin-right は Figma の「2」と「大优惠活动」の間隔 8px
   (node 61:8476 の ml 45.97px − 「2」の幅 38px)。 */
.c-campaign-banner__title-num {
  margin-right: 8px;
  margin-bottom: -8px;
  font-family: var(--campaign-font-mincho);
  font-size: 72px;
  letter-spacing: 5.04px;
}

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

/* 「大优惠活动」。日本語版・韓国語版は「大特典」と「キャンペーン」で
   span を分けていたが、Figma (node 61:8476) は5文字を1続きで組んでいるので
   ここに統合してある (__title-sub は無い)。
   見出しの末尾なので margin-right は持たせない。 */
.c-campaign-banner__title-main {
  font-size: 54px;
  letter-spacing: 2.7px;
}

/* 文字サイズ・字間は Figma SP (node 63:8607) の 40px / 1.6px。 */
@media screen and (max-width: 767px) {
  .c-campaign-banner__title-main {
    font-size: 40px;
    letter-spacing: 1.6px;
  }
}

/* 写真 + 特典カード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;
}

/* padding は Figma SP の実測。見出しの下端から写真まで 5px、
   写真の下端から特典1カードの上端まで 19px。 */
@media screen and (max-width: 767px) {
  .c-campaign-banner__photos {
    width: 100%;
    padding: 5px 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 空け、見出しを上・リストを下に積む。
   gap は Figma SP の「参加体验课后」の下端から1項目目まで 28px。 */
@media screen and (max-width: 767px) {
  .c-campaign-banner__resolve {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    margin-top: 9px;
    padding: 23px 20px;
  }
}

/* 幅は Figma (node 61:8417) の 164px。「参加体验课后」は6文字なので1行で収まる。 */
.c-campaign-banner__resolve-lead {
  flex-shrink: 0;
  width: 164px;
  color: var(--campaign-text);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

/* SP は「参加体验课后」を1行で中央に置く */
@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 にしている。 */
/* padding-top は Figma SP のカード上端から「体验课」までの 26px。
   padding-bottom は価格行の下端からカード下端までの 6px。
   これで中身が 172px 前後になり、min-height の 174px に収まる。 */
@media screen and (max-width: 767px) {
  .c-benefit-card {
    width: 100%;
    height: auto;
    min-height: 174px;
    padding: 26px 20px 6px;
  }
}

/* 左上のリボン (直角三角形)。バッジと同じ紺 */
.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;
}

/* リボンの数字だけ游明朝。「特典」の label は Noto Serif SC のまま */
.c-benefit-card__ribbon-num {
  font-family: var(--campaign-font-mincho);
  font-size: 21px;
}

/* 見出し行 (リボンを避けるため左に余白を取る)。
   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: 44px;
  }
}

/* 特典2 (入会金) は見出しの右に注記が並ぶので、左余白を詰めて注記の横幅を確保する。
   Figma (node 61:8459) では「入会金」＋注記でカードの内寸をほぼ使い切っており、
   左余白は 53px 相当しかない。ここが広いと注記が折り返して2行目に落ち、
   カードの高さを 17px 超えて価格行が overflow: hidden で切れる。
   48px にして 4px ほど余裕を持たせたうえで、flex-wrap も止めてある
   (1px でも溢れると行が落ちて一気に高さが変わる、という崖をなくすため)。 */
.c-benefit-card__head--compact {
  flex-wrap: nowrap;
  padding-left: 48px;
  column-gap: 5px;
}

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

/* Figma (node 61:8460 / 61:8464) は「体验课」「入会金」とも同じ指定。
   どちらも3文字なので、韓国語版のような特典2用の字間調整は要らない。 */
.c-benefit-card__name {
  color: var(--campaign-text);
  font-size: 26.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1.85px;
  white-space: nowrap;
}

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

/* 見出しの右に添える小さい説明「1门科目 / 55分钟」。
   Figma (node 61:8465) は Noto Serif SC なので、親から継承したままでよい。
   改行位置は <br> だけで決めたいので nowrap で自動折り返しを止める。 */
.c-benefit-card__lead {
  margin-top: 10px;
  color: var(--campaign-text);
  font-size: 10.8px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* 特典2「如果您在体验课结束后的 / 第二天之前申请入会，」は
   文字数が多いぶん、特典1の「1门科目 55分钟」より一段小さい
   (Figma node 61:8461: 9.624px)。 */
.c-benefit-card__head--compact .c-benefit-card__lead {
  font-size: 9.6px;
  line-height: 1.2;
}

/* SP は見出しの真下に置く (Figma SP は「体验课」の行の直後から始まる)。
   PC より一段大きい 12px なのは、SP では改行せず1行に収まるため。 */
@media screen and (max-width: 767px) {
  .c-benefit-card__lead {
    margin-top: 0;
    font-size: 12px;
  }

  .c-benefit-card__head--compact .c-benefit-card__lead {
    font-size: 10px;
  }
}

/* 特典1の「※每人仅限一次」
   PC は width: 100% で名前の下に折り返し、SP は名前の右に置く。 */
.c-benefit-card__note {
  width: 100%;
  color: var(--campaign-text);
  font-size: 9.6px;
  font-weight: 600;
  line-height: 1.2;
}

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

/* 「5折」「7折」。数字は游明朝、「折」は __off-unit 側で Noto Serif SC に戻す。
   SP はグリッドの右上セルに入るので、上下の auto マージンは効かせない。 */
.c-benefit-card__off {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  color: var(--campaign-off);
  font-family: var(--campaign-font-mincho);
  font-weight: 600; /* 数字は游明朝 Demibold */
  line-height: 1;
}

/* SP は特典1と特典2で左列 (見出し) の幅が違うため、左寄せだと
   「5折」と「7折」の位置がカードごとにずれる
   (特典1 は「※每人仅限一次」があるぶん左列が広い)。
   グリッドの右端は両カードで揃っているので、右寄せにして縦を合わせる。 */
/* padding-right は Figma SP の「折」の右端からカード内側の右端までの余白。
   flex-end のままだと右端に張り付いてしまう。 */
@media screen and (max-width: 767px) {
  .c-benefit-card__off {
    justify-content: flex-end;
    margin-top: 0;
    padding-right: 30px;
  }
}

.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: 83px;
    letter-spacing: -0.02em;
  }
}

/* 「折」。Figma (node 61:8445) は Noto Serif SC Medium 56px なので、
   親から継承した游明朝と font-weight: 600 を戻している。

   margin-top は数字との縦位置の差。親が align-items: center なので、
   margin は指定値の半分だけ item を動かす。Figma では「折」の字面の中心が
   数字より 10px 下にあるため、その倍の 20px を上に足している。 */
.c-benefit-card__off-unit {
  margin-top: 20px;
  margin-left: 5px;
  font-family: "Noto Serif SC", serif;
  font-size: 56px;
  font-weight: 500;
}

/* Figma SP (node 63:8612) は 46px。数字との縦のズレも 8.5px に広がるので
   margin-top はその倍の 17px。 */
@media screen and (max-width: 767px) {
  .c-benefit-card__off-unit {
    margin-top: 17px;
    font-size: 46px;
  }
}

/* 価格の before → after 行。金額・「日元」「→」は Figma どおり游明朝。
   子要素はここから継承するので、中国語の語である「原价」「（含税）」だけ
   Noto Serif SC に戻している。
   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;
}

/* SP は中央揃えではなく、Figma SP どおり見出し (「体验课」「入会金」) の
   左端に揃える。padding-left は __head の 44px と同値。 */
@media screen and (max-width: 767px) {
  .c-benefit-card__result {
    justify-content: flex-start;
    margin-top: 0;
    padding-left: 44px;
  }
}

/* 「◯％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 で数字の左端にラベルが揃う。
   「原价」は Figma でも明朝系なので、親から継承した游明朝を
   Noto Serif SC に戻す (「价」は游明朝に無く、フォールバックすると
   1文字だけ書体が変わってしまうため)。 */
.c-benefit-card__before-label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Noto Serif SC", 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: 17.9px;
}

/* 通貨単位の「日元」。「日」「元」はどちらも游明朝にあるので、
   Figma どおり親から游明朝を継承させる (font-family の指定は不要)。
   字間は Figma の tracking (-1px / 10px、-1.7px / 17px = -0.1em)。 */
.c-benefit-card__unit-sm {
  font-size: 10px;
  letter-spacing: -0.1em;
}

.c-benefit-card__unit-md {
  font-size: 17px;
  letter-spacing: -0.1em;
}

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

/* 「（含税）」は Noto Serif SC に戻す。「税」の字体が游明朝 (日本の字形) と
   簡体字で違ううえ、親の游明朝のままだと全角括弧が広く出て字間が空いて見える。
   字間は Figma の tracking (-1px / 10px = -0.1em)。

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

/* -------------------------------------------------------------
 * 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(--campaign-cta-bg);
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
  color: var(--campaign-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

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

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

/* 丸で囲まれた矢印アイコン。ラベルの直後ではなくボタン右端に置く。
   左右のパディングを対称にしてあるので、矢印を流れから外すと
   ラベルがボタン中央に揃う。 */
.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;
  }
}

/* 「完成」は2文字なので Figma (node 61:8440) どおり 10px。
   「60秒」の「秒」は親の 8px (node 61:8441) をそのまま継承する。 */
.c-button-cta__badge-text {
  font-size: 10px;
  white-space: nowrap;
}

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