@charset "UTF-8";

/* =============================================================
 * キャンペーンバナー（◯月の申込者様限定特典）
 *
 * asir テーマ（i塾）の css/campaign.css をそのまま移植したもの。
 * 寸法・ブレークポイント (767px) は移植元から変えていない。
 * 配色は Figma に合わせ、和文書体は Shippori Mincho B1 に変更（下記参照）。
 *
 * マークアップは template-parts/sections/section-06-campaign.php。
 * 月次で変わる文言・割引率は inc/campaign.php。
 *
 * このファイルは単体で完結している。配色は .p-campaign 上のローカル変数、
 * box-sizing とリセットも自前で持つので、当テーマの他の CSS には依存しない
 * （style.css の `h1〜h6 { font-weight: 300 }` `a { font-weight: 300 }` を
 *  打ち消す指定は下にある。この前提は asir / 当テーマで共通）。
 *
 * 唯一の外部依存はチェックアイコン assets/images/sections/06-checkbox.svg で、
 * このファイルからの相対パス ../images/sections/ で参照している。
 * CSS を別の場所に移すときはこのパスも直すこと。
 *
 * 書体は和文・数字とも "Shippori Mincho B1"。
 * header.php の Google Fonts で 500・600 を読み込んでいる。
 *
 * 配色・書体は当サイトの Figma に合わせてある。
 * (Figma: pLXNOyoldSDLxOv8vmfow9 / node 69:4334「ASIRキャンペーン_PC」)
 * レイアウトは asir（i塾）から移植したものだが、配色は別物。
 * あちらを直してもこちらは追従しない。逆も同じ。
 *
 * 配色（カッコ内は additional.scss の同値トークン。値を変えるときは向こうも見ること）
 *   セクション背景   #E2EDF3  --campaign-section-bg  （$color-light-grey）
 *   パネル背景       #CAE0EA  --campaign-panel-bg    （このデザイン固有）
 *   バッジ / リボン   #06314B  --campaign-accent      （.bg-navy-3）
 *   見出し           #1F1F1F  --campaign-title       （本文と同色だが、変数は別に持つ）
 *   CTA ボタン       #000046 → #1CB5E0 の横グラデーション
 *                             --campaign-cta-bg      （.bg-cta-gradient と同じ。文字は白）
 *   文字・罫線       #1F1F1F  --campaign-text
 *   カード / 白地     #FFFFFF
 *   ％OFF の数字      #B69241
 *   チェックアイコン  images/sections/06-checkbox.svg
 *                     チェック #19A4D1（水色）/ 枠 #1F1F1F
 * ============================================================= */

/* セクションの基点。
   既定の font-family と配色はここだけで指定する (子は継承 / var 参照)。 */
.p-campaign {
  /* --- 配色 (Figma) --- */
  --campaign-section-bg: #e2edf3;
  --campaign-panel-bg: #cae0ea;
  --campaign-accent: #06314b;
  --campaign-title: #1f1f1f;
  --campaign-cta-bg: linear-gradient(90deg, #000046 0%, #1cb5e0 100%);
  --campaign-cta-text: #fff;
  --campaign-text: #1f1f1f;

  /* --- 書体 ---
     現在は和文 (base)・数字まわり (mincho) とも Shippori Mincho B1。
     移植元 asir・Figma の記録では base = Noto Serif JP / mincho = 游明朝の
     2書体構成だったが、指示によりどちらも Shippori Mincho B1 に変更した
     (2026-09)。使用ウェイトは 600 と 500（％OFF の単位のみ）で、
     header.php の Google Fonts で両方読み込み済み。
     変数を2本のまま残してあるのは、数字まわりだけ書体を戻せるようにする
     ため。mincho のフォールバックには従来の游明朝の候補列を残している
     （macOS: 游明朝体 / Hiragino、Windows: Yu Mincho / MS P明朝）。 */
  --campaign-font-mincho: "Shippori Mincho B1", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  --campaign-font-base: "Shippori Mincho B1", "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/sections/06-checkbox.svg を背景画像として使用。
 * ------------------------------------------------------------- */

/* 寸法はすべて Figma 実測（アイコン 23px / 文字との間隔 11px / 本文 18px）。
   アイコンはテキスト1行目の中央に来るよう background-position で下げている。
   3px = (行の高さ 18 × 1.6 = 28.8px - アイコン 23px) ÷ 2 */
.c-check-list__item {
  position: relative;
  margin-bottom: 10px;
  padding-left: 34px;
  background-repeat: no-repeat;
  background-position: 0 3px;
  background-size: 23px 23px;
  color: var(--campaign-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}

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

/* チェックマークが水色のアイコン。キャンペーンバナーで使用。
   枠から飛び出すチェックの形も含めて Figma のベクターそのまま。
   同じ場所にある 06-checkbox.png は別デザイン（紺一色の塗り）なので使わない。 */
.c-check-list__item--blue {
  background-image: url("../images/sections/06-checkbox.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 … バッジは全幅で独立し、水色はタイトルと写真まで。特典カードは面の外に出る
 * ------------------------------------------------------------- */

/* 横 padding 29px は Figma 実測から。Figma は写真の左 33px / カードの右 25px と
   左右で違うが、中身は __cards 側で中央揃えしているので、平均の 29px を
   両側に入れれば同じ見え方になる（内寸 942px = 写真 374 + カード 271×2 + gap 13×2）。 */
.c-campaign-banner__panel {
  position: relative;
  padding: 39px 29px 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」だけ数字用書体 (--campaign-font-mincho)。
   親は align-items: center なので、各 span は「行ボックス」の中心で揃う。
   ところが行ボックスの中で字面が占める位置はフォントごとに違うため、
   素のままだと「2」が浮いて見える。margin-bottom は中央揃えの item を
   その半分だけ押し上げるので、これで位置を補正している。
   フォントを変えたら測り直すこと (値は書体の縦メトリクス依存)。
   游明朝時代は -5px。Shippori Mincho B1 は縦箱 (ascent+descent ≈ 1.46em)
   が游明朝 (1.0em) より大きく字面が約 5.7px 沈むため、+6px に変更 (2026-09。
   Canvas の TextMetrics で新旧の光学差が一致する値を逆算した)。 */
.c-campaign-banner__title-num {
  margin-right: 4px;
  margin-bottom: 6px;
  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: 13px;
}

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

/* 写真は Figma のとおり1枚。画像 (06-teachers, 558×254) の縦横比が
   Figma の枠 (374×170) とほぼ一致するので、切り抜きも拡大も要らない。
   幅 374px で高さは 170px になる。
   カード (237px) より背が低いぶん、縦は中央に置く。
   SP では水色の面の一部になるので、背景と余白をここで持つ。 */
.c-campaign-banner__photos {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 374px;
}

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

/* <picture> は既定でインライン。flex アイテムになると幅を持たないので、
   ブロックにして幅いっぱいに広げる（中の <img> は下の指定で追従する）。 */
.c-campaign-banner__photos picture {
  display: block;
  width: 100%;
}

.c-campaign-banner__photo {
  width: 100%;
  height: auto;
}

/* 下段: 白いお悩み解決ボックス (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;
}

/* リボンの数字だけ数字用書体 (--campaign-font-mincho)。 */
.c-benefit-card__ribbon-num {
  font-family: var(--campaign-font-mincho);
  font-size: 21px;
}

/* 見出し行 (リボンを避けるため左に余白を取る)。SP は縦積み。
   padding-left は特典1 (体験授業) 用。カード左端から見出しまで
   12px (カードの padding) + 74px = 86px。Figma 実測は 85.6px。 */
/* 名前とリードは必ず横一列。折り返すと、リードが名前の右ではなく
   下に落ちてしまう（PC の特典2は名前+リードで実測 184.5px / 使える幅 188px
   と余裕が 3.5px しかないので、リードの font-size をいじると簡単に折り返す）。
   特典1 だけは注記を下の行に落としたいので、--stacked 側で wrap に戻す。 */
.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;
  }
}

/* 特典1 (体験授業) は「体験授業 + 1科目55分」の下に注記が1行入る。
   注記側の width: 100% で改行させるため、ここだけ wrap を許す。
   特典1 は名前 + リードで約 149px（使える幅 173px）と余裕があるので、
   特典2 のように意図せず折り返す心配はない。 */
.c-benefit-card__head--stacked {
  flex-wrap: wrap;
}

/* 特典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「1科目 / 55分」は数字なので数字用書体、11px・行送り 1.18 (Figma 指定)。
   改行位置は <br> だけで決めたいので nowrap で自動折り返しを止める。
   margin-top 9px は Figma 実測（名前の上端 247px に対しリードは 255.87px）。 */
.c-benefit-card__lead {
  margin-top: 9px;
  color: var(--campaign-text);
  font-family: var(--campaign-font-mincho);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.18;
  white-space: nowrap;
}

/* 特典1 の下段の注記「※お一人様一回のみとなります」。
   width: 100% で名前・リードの行から折り返させ、左端は名前と揃える
   （親の padding-left 74px がそのまま効く）。
   和文なので書体は既定 (Shippori Mincho B1) のまま。サイズは Figma 指定。
   名前の行ボックス (26px × 1.6 = 41.6px) は字面より下に余りがあるので、
   負のマージンで詰めて Figma の位置に合わせている。 */
.c-benefit-card__note {
  width: 100%;
  margin-top: -3px;
  color: var(--campaign-text);
  font-size: 9.62px;
  font-weight: 600;
  line-height: 1.2;
}

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

/* 特典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」。数字・記号ともに数字用書体 (--campaign-font-mincho)。
   子の __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 行。金額・「円」「→」「(税込)」はすべて数字用書体
   (--campaign-font-mincho)。子要素はここから継承するので、行内で唯一の和文である
   「通常価格」だけ __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;
  }
}