@charset "UTF-8";

/* =============================================================
 * お知らせ枠 / キャンペーンバナー
 *
 * atenai (Lightning) テーマの _g3/assets/css/campaign.css を、
 * 値・配色・ブレークポイント (767px) を一切変えずに移植したもの。
 * 元をたどると sg-juku (asir) テーマの下記 SCSS パーシャル。
 *   assets/scss/component/_announcement-box.scss
 *   assets/scss/component/_announcement-heading.scss
 *   assets/scss/component/_notice-box.scss
 *   assets/scss/component/_text-note.scss
 *   assets/scss/component/_check-list.scss
 *   assets/scss/component/_campaign-banner.scss
 *   assets/scss/component/_benefit-card.scss
 *   assets/scss/component/_button.scss (c-button-cta)
 *   assets/scss/page/_front.scss (p-campaign)
 *   assets/scss/page/_sections.scss (p-intro__announcement-wrap)
 *   assets/scss/utility/_display.scss (u-pc-only / u-sp-only)
 * クラス名はサイト間で共通なので、見比べながら直せる。
 * 移植元と同じディレクトリ構成 (assets/css → ../images/icons) なので、
 * ファイルの中身は 1 バイトも変えていない (このコメントを除く)。
 *
 * このテーマの additional.scss とは独立した素の CSS として持つ。
 * SCSS のビルドをかけてもこのファイルは影響を受けない。
 *
 * .p-announcement / .c-announcement-* / .c-notice-box / .c-text-note は
 * 現時点のこのサイトでは未使用。移植元と差分を出さないため残してある。
 * ============================================================= */

/* -------------------------------------------------------------
 * ホスト側との差分を吸収するリセット
 *
 * このコンポーネントは、テーマ全体のベース CSS で
 *   h1〜h6 { margin: 0 }  ul { margin: 0; padding: 0; list-style: none }
 *   p { margin-top: 0; margin-bottom: 0 }
 * が当たっている前提で組まれている。
 * medion_v2 の assets/css/style.css はこの3つを満たしているので実質は no-op だが、
 * 他の CSS が要素セレクタで余白を足してきた場合の保険として残す。
 * 効くのは移植したセクションの中だけで、ページの他の部分には影響しない。
 * ------------------------------------------------------------- */

/* 詳細度の置き方が要点。「祖先はクラスのまま / 対象要素だけ :where() で 0」にして
   このルール全体を 0,1,0 (クラス1個ぶん) にしている。
     - `p { margin-bottom: 24px }` のような要素セレクタ (0,0,1) には
       読み込み順に関係なく勝てる。
     - 一方 `.c-check-list__item { padding-left: 1.8em }` などのコンポーネント側とは
       同点になるので、同じファイル内で後に書いてある方 (＝コンポーネント) が勝つ。
   `.p-campaign li` と書くと後者にも勝ってしまい、チェックアイコンが文字に重なる。 */
.p-announcement :where(h1, h2, h3, p, ul, li),
.p-campaign :where(h1, h2, h3, p, ul, li) {
  margin: 0;
  padding: 0;
}

.p-announcement :where(ul),
.p-campaign :where(ul) {
  list-style: none;
}

/* ホストのテーマが h2 に付ける装飾 (罫線・擬似要素) を消す。
   移植元 (atenai) では my_style.css の
   `h2 { color / font-weight / margin-bottom: !important }` を打ち消す必要があり、
   各コンポーネント側の !important はその名残。medion_v2 には該当ルールが無いので
   実害は無いが、移植元と差分を出さないためそのまま残している。 */
/* お知らせの見出しは自前で border-bottom (罫線) を引くので、ここには含めない。
   `.p-announcement h2` (0,1,1) は `.c-announcement-heading` (0,1,0) より
   詳細度が高く、どちらも !important なので罫線が消えてしまう。
   お知らせ側は .c-announcement-heading の中で border を制御している。 */
.p-campaign h2 {
  border: none !important;
}

.p-announcement h2::after,
.p-announcement h2::before,
.p-campaign h2::after,
.p-campaign h2::before {
  content: none;
}

/* asir は body に line-height: 2 が効いている前提なので、
   行送りを明示していないテキスト (お知らせ本文・注記) のために同じ値を与える。 */
.p-announcement,
.p-campaign {
  line-height: 2;
}

/* -------------------------------------------------------------
 * u-pc-only / u-sp-only (utility/_display.scss)
 * ------------------------------------------------------------- */

@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;
  }
}

/* -------------------------------------------------------------
 * p-announcement / p-intro__announcement-wrap
 * asir の .p-intro (上下 40px・白背景) と、その中の 900px ラッパー。
 * ------------------------------------------------------------- */

.p-announcement {
  padding: 40px 0;
  background-color: #fff;
}

/* Figma (node 29:3205) の枠は 1000px 幅。キャンペーンの
   .p-campaign__inner と同じ幅なので、縦に並べたときに左右が揃う。 */
.p-intro__announcement-wrap {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}

/* -------------------------------------------------------------
 * c-announcement-box
 * ベージュ背景の「お知らせ」枠。
 * 上から: 日付 → 見出し → 罫線 → 本文 → (1行あけて) 注記。
 * Figma: node 29:3205 (1000x302 / 背景 #F7F0E1 / 文字・罫線 #37342D)
 * ------------------------------------------------------------- */

.c-announcement-box {
  margin-right: auto;
  margin-left: auto;
  padding: 33px 40px 30px;
  background: #f7f0e1;
}

/* SP では左右余白を他セクションと揃えて 15px に縮小し、本文の横幅を確保する */
@media screen and (max-width: 767px) {
  .c-announcement-box {
    padding: 25px 15px;
  }
}

/* -------------------------------------------------------------
 * c-announcement-heading
 * お知らせ枠内の h2 見出し。内部に __date span を保持。
 * 下の罫線は Figma の Line 158 (左右 40px を除いた全幅) に相当し、
 * 見出しが枠のコンテンツ幅いっぱいのブロックなので border-bottom で足りる。
 * ------------------------------------------------------------- */

/* color / font-weight / margin-bottom の !important は、
   my_style.css の h2 ルール (同じく !important) を打ち消すために必要。 */
.c-announcement-heading {
  margin-bottom: 24px !important;
  padding-bottom: 22px;
  border: none !important; /* Lightning が付ける上下の罫線を消してから */
  border-bottom: 1px solid #37342d !important; /* デザインの罫線を引き直す */
  color: #37342d !important;
  font-family: "Noto Serif JP", serif;
  font-size: 21px;
  font-weight: 600 !important;
  line-height: 1.282;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .c-announcement-heading {
    margin-bottom: 18px !important;
    padding-bottom: 16px;
    font-size: 18px;
  }
}

/* 日付の prefix (「【2026/5/1更新】」) */
.c-announcement-heading__date {
  display: block;
  margin-bottom: 7px;
  font-size: 17px;
}

@media screen and (max-width: 767px) {
  .c-announcement-heading__date {
    font-size: 14px;
  }
}

/* -------------------------------------------------------------
 * c-notice-box / c-text-note
 * 本文は中央寄せではなく左揃え (Figma node 29:3209)。
 * 明朝は Figma 指定の YuMincho。テーマの .font-family-yumincho と同じ
 * フォントスタックを、コンポーネント内で完結させるためここにも書いている。
 * ------------------------------------------------------------- */

.c-notice-box {
  padding: 0;
  color: #37342d;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  text-align: left;
}

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

/* 注釈・補足説明用の小さいテキスト (「※〜」のような注意書き)。
   本文との間は Figma と同じく1行あける (本文 16px × line-height 1.8)。 */
.c-text-note {
  display: block;
  margin-top: 28.8px;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .c-text-note {
    margin-top: 27px;
    font-size: 13px;
  }
}

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

.c-check-list--two-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

/* アイコンは line-height 基準の中央に揃うように em 単位 + background-position で配置 */
.c-check-list__item {
  position: relative;
  margin-bottom: 10px;
  padding-left: 1.8em; /* アイコン幅 (1.2em) + 余白 (0.6em) */
  background-image: url("../images/icons/check.svg");
  background-repeat: no-repeat;
  background-position: 0 0.2em; /* テキストの1行目に合わせて配置 */
  background-size: 1.2em 1.2em;
  color: #37342d;
  font-family: "Noto Sans JP", sans-serif;
  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--two-cols .c-check-list__item {
  width: 40%;
}

@media screen and (max-width: 767px) {
  .c-check-list--two-cols .c-check-list__item {
    width: 100%;
  }
}

.c-check-list__item--bordered {
  border-bottom: 1px dashed #828282;
}

/* チェックマークが金色のアイコン。キャンペーンバナーで使用。
   (asir は青 #3A81D9 だったが、Figma の atenai 版は #F5B658。
   枠の色は本文と同じ #37342D に合わせてある) */
.c-check-list__item--gold {
  background-image: url("../images/icons/check-gold.svg");
}

/* SP はアイコンを 21px 固定にする (font-size 基準の em だと小さくなりすぎる)。
   行の高さ (14px * 1.5 = 21px) とアイコンが同寸なので、
   background-position を下げるとその分だけ下端が切れる。必ず 0 にすること。 */
@media screen and (max-width: 767px) {
  .c-check-list__item--gold {
    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: #f7f0e1;
}

/* 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: #eee2c8;
}

/* 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: #5b5750;
  color: #fff;
  font-family: "Shippori Mincho B1", serif;
  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 !important; /* my_style.css の h2 ルールを打ち消すため */
  color: #37342d !important;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600 !important;
  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 !important;
    padding-top: 20px;
    background-color: #eee2c8;
  }
}

.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」だけ和文フォントの数字が下寄りに出るので、
   margin-bottom で押し上げて「大特典」の天地に合わせる。 */
.c-campaign-banner__title-num {
  margin-right: 4px;
  margin-bottom: 8px;
  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 はインラインでは
   効かないので、PC の margin-bottom による押し上げも使えない。
   position: relative で下げて天地中央を合わせている
   (実測で両者の中心が 4.5px ずれていた。行ボックスの高さは変えたくないので
   vertical-align ではなく relative で逃がす)。 */
@media screen and (max-width: 767px) {
  .c-campaign-banner__title-num {
    position: relative;
    top: 4.5px;
    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: #eee2c8;
  }
}

/* 写真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: #37342d;
  font-family: "Shippori Mincho B1", serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

/* SP は「SG塾の有料診断では」を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;
  }
}

/* 左上のリボン (直角三角形)。Figma の Rectangle 4151 (81.633px / #5B5750) 相当 */
.c-benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-width: 41px;
  border-style: solid;
  border-color: #5b5750 transparent transparent #5b5750;
}

/* 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-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

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

.c-benefit-card__ribbon-num {
  font-size: 23px;
}

/* 見出し行 (リボンを避けるため左に余白を取る)。
   PC は注記を折り返して名前の下に落とす。SP は縦積み。
   padding-left は特典1 (体験授業) 用。カード左端から見出しまで
   12px (カードの padding) + 74px = 86px となり、
   Figma (node 29:2610 / カード左端から 85.6px) と一致する。 */
.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 (入会金) は見出しの右に注記が並ぶので、左余白を詰めて注記の横幅を確保する。
   12px + 59px = 71px で、Figma (node 29:2586 / カード左端から 71.25px) と一致。 */
.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: #37342d;
  font-family: "Shippori Mincho B1", serif;
  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の「体験授業の翌日までに / ご入会希望頂くと、」
   改行位置は <br> だけで決めたいので nowrap で自動折り返しを止める。 */
.c-benefit-card__lead {
  margin-top: 10px;
  color: #37342d;
  font-family: "Shippori Mincho B1", serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

@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: #37342d;
  font-family: "Shippori Mincho B1", serif;
  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;
  }
}

/* 「30％OFF」(特典2)
   SP はグリッドの右上セルに入るので、上下の auto マージンは効かせない。 */
.c-benefit-card__off {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  color: #b69241;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  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」は左端を揃える (Figma node 29:2570 も items-start)。
   中央揃えだと文字数の違いで「％」が右にずれて見える。PC / SP 共通。 */
.c-benefit-card__off-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 5px;
}

.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 行。
   baseline 揃えなのは「11,000円」と「0円」の下端を合わせるため。 */
.c-benefit-card__result {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  color: #37342d;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  line-height: 1.2;
}

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

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

@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-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;
}

/* 特典1の「0円」(金色・特大) */
.c-benefit-card__free {
  flex-shrink: 0;
  color: #b69241;
  font-size: 101px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* SP はカード高さ 174px に収めるため行送りを詰める */
@media screen and (max-width: 767px) {
  .c-benefit-card__free {
    font-size: 75px;
    line-height: 1.2;
  }
}

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

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

.c-benefit-card__unit-lg {
  font-size: 31px;
}

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

/* 特典2の「35,000円(税込)」 */
.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 ボタン (丸形・白文字)。
 * ------------------------------------------------------------- */

.c-button-cta {
  box-sizing: border-box;
  display: flex;
  position: relative; /* __badge を左端に絶対配置するための基準 */
  align-items: center;
  justify-content: center;
  width: 400px;
  margin-right: auto;
  margin-left: auto;
  padding: 15px 10px;
  border-radius: 50px;
  background: linear-gradient(160deg, #ca0027 0%, #8f0909 100%);
  color: #fff;
  font-family: "Shippori Mincho B1", serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.c-button-cta:hover,
.c-button-cta:focus {
  color: #fff;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .c-button-cta {
    width: 100%;
    font-size: 15px;
  }
}

.c-button-cta__arrow {
  width: 20px;
  height: 20px;
  margin-bottom: 3px;
  margin-left: 10px;
  vertical-align: middle;
}

/* Modifier: キャンペーンバナー用。
   左端に「60秒完了」バッジを置き、バッジ分だけ幅と左パディングを広げる。
   Figma (node 33:7134) は 386x54 / 角丸 33.483px / #F5B658 / 文字 #37342D。
   上下パディングと行送りはボタン高さ 54px に合わせている。 */
.c-button-cta--campaign {
  width: 386px;
  padding: 14px 50px;
  border-radius: 33.483px;
  background: #f5b658;
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
  color: #37342d;
  font-size: 18px;
  line-height: 1.4;
}

.c-button-cta--campaign:hover,
.c-button-cta--campaign:focus {
  color: #37342d;
}

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

/* 丸で囲まれた矢印アイコン。ラベルの直後ではなくボタン右端に置く。
   左右のパディングを対称にしてあるので、矢印を流れから外すと
   ラベルがボタン中央に揃う。 */
.c-button-cta--campaign .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--campaign .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: #37342d;
  font-family: "Shippori Mincho B1", serif;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.1;
}

/* SP はバッジも一回り小さくする */
@media screen and (max-width: 767px) {
  .c-button-cta--campaign .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;
  }
}