@charset "utf-8";

/* ============================================================
   campaign.css — 太陽光・蓄電池 導入応援キャンペーン
   対象: 誘導ボタン(c-campaign-btn) / MVキャンペーン帯(p-mv__campaign) /
         完成までの流れ特典バッジ(p-flow__step-gift) / キャンペーンモーダル(c-campaign-modal)
   注意: ライブラリ・ビルド無しの素のCSS。既存の .p-mv / .p-flow のレイアウトは
         上書きしない（このファイルは追加要素にのみスタイルを当てる）。
   出典: Figma 元ファイル（eneluca_cta.fig の btn_campaign×2 / modal_campaign、
         エネルカキャンペーン_SP の MV・wrap_03）を直接デコードした実測値。
         SP390 のフレームしか無いため、PC(>=768px)は SP の比率を保った拡大。
   ============================================================ */

:root {
  /* このプロジェクトの --color-* とは別名（既存トークンは再定義しない） */
  --cp-navy: #020077; /* Navy 主色・見出し帯・ボタン */
  --cp-navy-2: #002791; /* Navy 2 hover・リストドット */
  --cp-blue: #0550c0; /* Blue 特典カードヘッダー */
  --cp-overlay: rgba(17, 17, 61, 0.2); /* モーダル背景（+blur） */
  --cp-white: #fff;
  --cp-black: #000;
  --cp-yellow: rgb(255, 239, 51); /* Yellow グロー・特典バッジ文字 */
  --cp-yellow-2: rgb(255, 234, 0); /* Yellow 2 番号丸 */
  --cp-gold: rgb(255, 217, 46); /* Gold 金額文字・グラデ上 */
  --cp-orange: rgb(255, 144, 0); /* Orange グラデ下 */
  --cp-lemon: rgb(255, 236, 8); /* Lemon グラデ最上 */
  --cp-limited: rgb(255, 213, 0); /* 期間限定リボン */
  --cp-bg-light: rgb(227, 241, 255); /* MVキャンペーン帯の地色（style.cssの--color-bg-light #e3f1ffと同値・確認済み。変数自体は参照/再定義せず値で保持） */
  --cp-gold-gradient: linear-gradient(180deg, var(--cp-lemon) 0%, var(--cp-gold) 40%, var(--cp-orange) 100%);
  /* ギフト券画像。擬似要素で重ね描き（同一URLなので追加リクエストは発生しない）。
     CSSファイル基準の相対パスなのでサブディレクトリ配置でも解決できる */
  --cp-giftcard: url(../img/campaign/gift-jcb.webp);
  /* 既存 .c-float-cta は z-index:90（style.css）。モーダルはそれより必ず高くする */
  --cp-z-modal: 1000;
}

/* == 誘導ボタン (c-campaign-btn) =============================
   デザインシステム btn_campaign / btn_campaign2。340×88 =
   ラベル行(24px) + gap8px + ピル(56px)。
   --dark: 写真・暗背景用（白ラベル／白ピル・紺文字＝btn_campaign）
   --light: 白・淡色背景用（紺ラベル／紺ピル・白文字＝btn_campaign2）。hoverはNavy 2
   矢印サークルはピルの地色と反転する（--light は白丸・紺矢印）。
   ============================================================ */
.c-campaign-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 340px;
  max-width: 100%;
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.c-campaign-btn__label {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}
/* ラベル両端の斜線（Figma: 3×24・radius2・±25.8deg・行の下端そろえ） */
.c-campaign-btn__label::before,
.c-campaign-btn__label::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 24px;
  border-radius: 2px;
}
.c-campaign-btn__label::before {
  left: 0;
  transform: rotate(-25.8deg);
}
.c-campaign-btn__label::after {
  right: 0;
  transform: rotate(25.8deg);
}
.c-campaign-btn__pill {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 16px 20px;
  border-radius: 40px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: background-color 0.2s;
}
.c-campaign-btn__arrow {
  position: absolute;
  top: 16px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
/* 矢印はフォントの「›」ではなく作図（Figma: 太さ2.2・長さ8.8の2本＝8×12のシェブロン）。
   45度回すと見た目の中心が右へ寄るので translate で戻す */
.c-campaign-btn__arrow::before {
  content: "";
  box-sizing: border-box;
  width: 8.8px;
  height: 8.8px;
  border-top: 2.2px solid currentcolor;
  border-right: 2.2px solid currentcolor;
  transform: translateX(-2px) rotate(45deg);
}
.c-campaign-btn:focus-visible .c-campaign-btn__pill {
  outline: 2px solid var(--cp-navy-2);
  outline-offset: 2px;
}

/* --dark: 写真・暗背景用（btn_campaign）。ラベル白＋紺影、ピル白／紺文字。
   現在のLPでは未使用（キャンペーン帯は淡色背景のため --light に統一）だが、
   デザインシステム由来のバリアントとして残置 */
.c-campaign-btn--dark .c-campaign-btn__label {
  color: var(--cp-white);
  filter: drop-shadow(2px 2px 12px rgba(2, 0, 119, 0.4));
}
.c-campaign-btn--dark .c-campaign-btn__label::before,
.c-campaign-btn--dark .c-campaign-btn__label::after {
  background: var(--cp-white);
}
.c-campaign-btn--dark .c-campaign-btn__pill {
  background: var(--cp-white);
  color: var(--cp-navy);
}
.c-campaign-btn--dark .c-campaign-btn__arrow {
  background: var(--cp-navy);
  color: var(--cp-white);
}
.c-campaign-btn--dark:hover .c-campaign-btn__pill {
  background: #f7fbff;
}

/* --light: 白・淡色背景用（btn_campaign2＝色反転） */
.c-campaign-btn--light .c-campaign-btn__label {
  color: var(--cp-navy);
  filter: drop-shadow(2px 2px 12px rgba(255, 255, 255, 0.5));
}
.c-campaign-btn--light .c-campaign-btn__label::before,
.c-campaign-btn--light .c-campaign-btn__label::after {
  background: var(--cp-navy);
}
.c-campaign-btn--light .c-campaign-btn__pill {
  background: var(--cp-navy);
  color: var(--cp-white);
}
.c-campaign-btn--light .c-campaign-btn__arrow {
  background: var(--cp-white);
  color: var(--cp-navy);
}
.c-campaign-btn--light:hover .c-campaign-btn__pill {
  background: var(--cp-navy-2);
}

/* 本文内の誘導ボタンの置き場。ボタン自身は幅340固定なので中央に寄せる。
   地色を明示しないと（html/bodyに背景が無いため）ブラウザのキャンバス色が
   そのまま出る。デザインで --light のボタンが載る地色＝#E3F1FF に合わせ、
   直後の .p-flow と同色にして継ぎ目を作らない */
.c-campaign-btn-wrap {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 32px 15px 0;
  background: var(--cp-bg-light);
}

/* == MVキャンペーン帯 (p-mv__campaign) ========================
   MV(.p-mv)の直後に続く独立した帯（MVへの重ね表示ではない）。地色は
   ビューポート左右端まで届かせ、中身は .p-mv__campaign-card の max-width で
   中央に収める。構成は TOP-campaign の campaign_card どおり:
     期間限定リボン（-margin で白パネルに重なる）
       → パネル（グリッド。金額＋ギフト券 / 受付期間ラベル＋パネル / 誘導ボタン）
   白地はパネル自身ではなく擬似要素が敷くため、SPでは誘導ボタンだけが白地の外
   （帯の地色の上・従来どおりの見た目）に出る。PCはボタンも白地の中の右列に入る。
   影は帯ではなく白地（擬似要素）に付ける（帯に filter を掛けると地色ごと影が出る）。
   横幅は既存LPの流儀に合わせ「内容列の max-width ＋ 流体の左右余白 min(2.78vw,40px)」で決める。
   ============================================================ */
.p-mv__campaign {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 48px 15px 56px;
  background: var(--cp-bg-light);
}
.p-mv__campaign-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
}
/* 期間限定リボン。Figma実測 302×40・#FFD500・Bold20px・紺文字＋白3px縁取り。
   両端は「内向きのV字を切り欠いた」リボン端（幅16の帯の中で頂点が11px入る）で、
   下端はギザギザにしない。白パネルには 16px 重なる */
.p-mv__campaign-limited {
  --cp-ribbon-notch: 11px;

  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 302px;
  max-width: 100%;
  height: 40px;
  margin: 0 0 -16px;
  background: var(--cp-limited);
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--cp-ribbon-notch)) 50%,
    100% 100%,
    0 100%,
    var(--cp-ribbon-notch) 50%
  );
  color: var(--cp-navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  -webkit-text-stroke: 6px var(--cp-white);
  paint-order: stroke fill;
  filter: drop-shadow(2px 2px 8px rgba(2, 0, 119, 0.2));
}
/* SPは1列3行（金額＋ギフト券 / 受付期間 / 誘導ボタン）。白地は ::before が1〜2行目だけを
   覆うので、3行目の誘導ボタンは帯の地色の上に出る（＝従来の「白カードの外のボタン」の見た目）。
   padding は白地の広がりと同じ量を ::before の負マージンで打ち消すため変数で共有する。 */
.p-mv__campaign-panel {
  --cp-panel-px: 15px;
  --cp-panel-pt: 40px;
  --cp-panel-pb: 0px;

  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "headline"
    "period"
    "cta";
  row-gap: 12px;
  width: 100%;
  /* Figma は padding-top 24px。リボンが 16px 重なるぶんを足して 40px にしている。
     下は0（白地の下端 14px は ::before の負マージンが作り、その外はボタン行） */
  padding: var(--cp-panel-pt) var(--cp-panel-px) var(--cp-panel-pb);
}
/* 白地・角丸・影の実体。グリッド領域（SP=1〜2行目 / PC=全行）より padding ぶん外へ
   広げるので、負マージンは padding と同値。下端だけは Figma の 14px を別に持つ。 */
.p-mv__campaign-panel::before {
  content: "";
  grid-area: 1 / 1 / 3 / -1;
  margin: calc(-1 * var(--cp-panel-pt)) calc(-1 * var(--cp-panel-px)) -14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 2px 2px 8px rgba(2, 0, 119, 0.1);
}
/* 誘導ボタンの置き場。SPは白地の下端（::before が -14px はみ出す）から従来と同じ 28px 空ける
   （row-gap 12px ＋ margin-top 30px ＝ 42px = 白地のはみ出し 14px ＋ 28px）。
   左右はパネルの padding を打ち消してカード幅いっぱいに使う（ボタンの 340px 幅を従来どおり保つ）。 */
.p-mv__campaign-cta {
  grid-area: cta;
  display: flex;
  justify-content: center;
  margin: 30px calc(-1 * var(--cp-panel-px)) 0;
}
/* 金額とギフト券の段。SPはギフト券を右下に重ね、PCは display:contents で
   金額とギフト券をパネルのグリッドに直接並べる（PC節で上書き） */
.p-mv__campaign-headline {
  grid-area: headline;
  position: relative;
  width: 100%;
}
.p-mv__campaign-amount {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  color: var(--cp-navy);
  font-size: 40px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: 2px 2px 8px rgba(2, 0, 119, 0.2);
  -webkit-text-stroke: 8px var(--cp-white);
  paint-order: stroke fill;
}
/* 「最大105,000円分」は途中で折らない */
.p-mv__campaign-amount-line {
  white-space: nowrap;
}
/* Figma実測: 基準40px に対し「最大」「円分」は32px・数字は48px */
.p-mv__campaign-amount-unit {
  font-size: 32px;
}
.p-mv__campaign-amount strong {
  font-size: 48px;
  font-weight: inherit;
}
/* ギフト券。Figma は 146.58×93.59 の枠に 130.74×62.59 を5枚、-4.6deg から
   3deg 刻みで扇状に重ねる（奥は opacity .8）。3枚に間引いて両端と中央を再現する */
.p-mv__campaign-giftcard {
  position: absolute;
  right: -6px;
  bottom: -10px;
  z-index: 1;
  width: 146px;
  aspect-ratio: 146.58 / 93.59;
  line-height: 0;
  filter: drop-shadow(2px 2px 6px rgba(2, 0, 119, 0.14));
}
.p-mv__campaign-giftcard::before,
.p-mv__campaign-giftcard::after {
  content: "";
  position: absolute;
  width: 89%; /* 130.74 / 146.58 */
  aspect-ratio: 600 / 287;
  background: var(--cp-giftcard) center / contain no-repeat;
  opacity: 0.8;
}
.p-mv__campaign-giftcard::before {
  left: 10.6%;
  top: 33.1%;
  z-index: 1;
  transform: rotate(-4.6deg);
}
.p-mv__campaign-giftcard::after {
  left: 5.6%;
  top: 31%;
  z-index: 2;
  transform: rotate(1.4deg);
}
.p-mv__campaign-giftcard img {
  position: absolute;
  left: 0;
  top: 29%;
  z-index: 3;
  display: block;
  width: 89%;
  height: auto;
  transform: rotate(7.4deg);
}
.p-mv__campaign-period {
  grid-area: period;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* 受付期間ラベル: 紺ピル／黄文字。ls分の右寄りを padding-left で打ち消す */
.p-mv__campaign-period-label {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 21px;
  padding: 0 20px 0 calc(20px + 0.4em);
  border-radius: 20px;
  background: var(--cp-navy);
  color: var(--cp-yellow);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.4em;
  line-height: 1;
}
.p-mv__campaign-period-text {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-top: -12px;
  padding: 17px 13px 15px;
  border-radius: 8px;
  background: var(--cp-white);
  box-shadow: inset 0 0 0 2px var(--cp-navy);
  color: var(--cp-navy);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

/* == 完成までの流れ 特典バッジ (p-flow__step-gift) ==============
   既存 .p-flow__step-text の直後に置く（既存スタイルは変更しない）。
   デザインでは白カードの中に入るが、既存マークアップ（p要素）を変えないため
   カード直下の紺帯として出す。Figma実測 310×66・radius4・上下padding7・
   Bold20px/lh1.28・#FFEF33（金額だけ Black）。 */
.p-flow__step-gift {
  margin: 10px 0 0;
  padding: 7px 10px;
  border-radius: 4px;
  background: var(--cp-navy);
  color: var(--cp-yellow);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.28;
  text-align: center;
}
/* Figma は「JCBギフトカード ○円分」だけ Black で1行目、2行目が「プレゼント!〜」。
   block にして折り返し位置をデザインと同じに固定する */
.p-flow__step-gift-amount {
  display: block;
  font-size: inherit;
  font-weight: 900;
}
.p-flow__step-gift-note {
  font-size: inherit;
  font-weight: inherit;
  margin-left: 2px;
}

/* == キャンペーンモーダル (c-campaign-modal) ====================
   .c-campaign-modal を position:fixed; inset:0; overflow-y:auto の
   スクロールコンテナとして使い、__overlay は fixed 背景（blur）のみ。
   __panel 自体には overflow を持たせない（内部スクロール禁止＝デザインどおり
   ページ全体がスクロールする）。寸法は幅390基準で固定（PCでも拡大しない）。
   ============================================================ */
.c-campaign-modal {
  position: fixed;
  inset: 0;
  z-index: var(--cp-z-modal);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.c-campaign-modal[hidden] {
  display: none;
}
body.is-campaign-modal-open {
  overflow: hidden;
}
.c-campaign-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--cp-overlay);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.c-campaign-modal__panel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 24px 0 140px;
  font-family: "Noto Sans JP", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  color: var(--cp-black);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

/* 開閉モーション。hidden の解除だけでは初期値が確定しないため、JS が hidden を外して
   レイアウトを1度確定させたあとに .is-open を付ける（campaign.js）。
   閉じる側は .is-open を外してから __panel の opacity の transitionend（保険で 300ms の
   タイマー）で hidden に戻す。OS側でモーション低減が指定されていれば即時に切り替える。 */
.c-campaign-modal.is-open .c-campaign-modal__overlay {
  opacity: 1;
}
.c-campaign-modal.is-open .c-campaign-modal__panel {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .c-campaign-modal__overlay,
  .c-campaign-modal__panel {
    transition: none;
  }
}

/* 閉じるボタン: 48白丸・紺2px内枠・右10。デザインどおり position:sticky で
   スクロール中も上端(12px)に留まり、負のmargin-bottomで場所を取らない */
.c-campaign-modal__close {
  position: sticky;
  top: 12px;
  z-index: 5;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 10px -48px 0;
  border: 0;
  border-radius: 50%;
  background: var(--cp-white);
  box-shadow:
    inset 0 0 0 2px var(--cp-navy),
    2px 2px 8px rgba(2, 0, 119, 0.1);
  cursor: pointer;
}
.c-campaign-modal__close:hover {
  background: rgb(247, 251, 255);
}
.c-campaign-modal__close:focus-visible {
  outline: 2px solid var(--cp-navy-2);
  outline-offset: 2px;
}
.c-campaign-modal__close::before,
.c-campaign-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20.5px;
  height: 2px;
  border-radius: 10px;
  background: var(--cp-navy);
}
.c-campaign-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.c-campaign-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* アウトライン見出し（キャッチコピー）: 白文字＋紺ストローク（Figma 3px = 6px指定） */
.c-campaign-modal__catch {
  width: 320px;
  max-width: calc(100% - 20px);
  margin: 0 0 0 10px;
  color: var(--cp-white);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: 0.06em;
  white-space: nowrap;
  -webkit-text-stroke: 6px var(--cp-navy);
  paint-order: stroke fill;
}

/* タイトル帯: h88 紺。Figma では幅752の帯が左は画面外へ抜け、右端だけが
   画面内（右へ8px残す）に斜めの切り口として見える。斜度は 28.8px/88px。
   1行目=白 / 2行目=ゴールドグラデ。文字サイズは実測の行幅（235 / 323）に合わせ、
   狭い端末では min() で縮めて帯から溢れさせない */
.c-campaign-modal__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden; /* 極端に狭い端末で帯からはみ出させない（横スクロール防止） */
  height: 88px;
  margin: 10px 8px 0 0;
  padding: 0 17px;
  background: var(--cp-navy);
  clip-path: polygon(0 0, 100% 0, calc(100% - 29px) 100%, 0 100%);
  text-align: center;
}
.c-campaign-modal__band-main {
  display: block;
  color: var(--cp-white);
  font-size: min(35px, 9.3vw);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(2, 0, 119, 0.2);
}
.c-campaign-modal__band-sub {
  display: block;
  background: var(--cp-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: min(33px, 8.8vw);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

/* 見出し帯（特典 230×40 / 受付期間ほか 250×32）。Figma実測では箱だけが
   平行四辺形（上辺が右へ 14.3px・11.3px = 約19.6度）で、文字は倒していない。
   ls の分だけ右へ寄るので同量の padding-left で中央に戻す。 */
.c-campaign-modal__heading {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  max-width: 100%;
  height: 40px;
  margin: 0 auto;
  background: var(--cp-navy);
  clip-path: polygon(6.2% 0, 100% 0, 93.8% 100%, 0 100%);
}
.c-campaign-modal__heading > span {
  display: block;
  padding-left: 0.8em;
  color: var(--cp-white);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.8em;
  line-height: 1;
  white-space: nowrap;
}
.c-campaign-modal__heading--sub {
  position: relative;
  z-index: 2;
  width: 250px;
  height: 32px;
  clip-path: polygon(4.5% 0, 100% 0, 95.5% 100%, 0 100%);
}
.c-campaign-modal__heading--sub > span {
  padding-left: 0.2em;
  font-size: 24px;
  letter-spacing: 0.2em;
}

/* 特典セクション: gap29 / 左右20 / タイトル帯からの余白48 */
.c-campaign-modal__benefits {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
  width: 100%;
  margin: 48px 0 0;
  padding: 0 20px;
}
.c-campaign-modal__benefit {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  width: 100%;
  padding: 0 0 24px;
  border-radius: 12px;
  background: var(--cp-white);
}
.c-campaign-modal__benefit-head {
  box-sizing: border-box;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  margin: 0;
  padding: 8px 0;
  background: var(--cp-blue);
  color: var(--cp-white);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
}
/* 番号丸: 36 / Yellow 2 / 紺 Bold 24 */
.c-campaign-modal__benefit-num {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cp-yellow-2);
  color: var(--cp-navy);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1;
}
/* 改行は nl2br の <br> が担うため white-space は既定のまま（pre-line だと二重改行になる） */
.c-campaign-modal__benefit-lead {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 12px;
  color: #222;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
/* 金額。Figma実測は「JCBギフトカード」28px＋数字（1枚目40px / 2枚目52px・
   レモン色）＋「円分」28px＋「プレゼント!」（1枚目24px / 2枚目36px）で、
   全体が白抜き＋紺4pxストローク（CSSは中心線なので8px指定）。
   1枚目は金額と「プレゼント!」が同じ行、2枚目は3行に分かれる。 */
.c-campaign-modal__benefit-amount {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0 12px;
  color: var(--cp-white);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.06;
  text-align: center;
  -webkit-text-stroke: 8px var(--cp-navy);
  paint-order: stroke fill;
}
.c-campaign-modal__benefit-amount-value {
  font-size: inherit;
  line-height: 1;
}
.c-campaign-modal__benefit-amount-value strong {
  color: var(--cp-lemon);
  font-size: 40px;
  font-weight: inherit;
}
.c-campaign-modal__benefit-amount-present {
  font-size: 24px;
}
/* 1枚目は「5,000円分プレゼント!」を1行に流す（ブランド名だけ行を占める） */
.c-campaign-modal__benefit:nth-of-type(1) .c-campaign-modal__benefit-amount {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 0;
  row-gap: 8px;
}
.c-campaign-modal__benefit:nth-of-type(1) .c-campaign-modal__benefit-amount-brand {
  width: 100%;
}
.c-campaign-modal__benefit:nth-of-type(2) .c-campaign-modal__benefit-amount-value strong {
  font-size: 52px;
}
.c-campaign-modal__benefit:nth-of-type(2) .c-campaign-modal__benefit-amount-present {
  font-size: 36px;
}
/* ギフト券: 190×120 の枠に3枚重ね（奥2枚は擬似要素）＋黄色グロー＋白グロー。
   Figma は 168.12×80.49 を5枚、-5deg から3deg 刻みで扇状（手前が +7deg） */
.c-campaign-modal__benefit-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 120px;
  /* デザインの inset:-30px のグローを background-size で再現（190+60 × 120+60） */
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 239, 51, 0.8) 0%, rgba(255, 239, 51, 0) 70%) center / 250px 180px no-repeat;
  filter: drop-shadow(0 0 15px var(--cp-white));
}
.c-campaign-modal__benefit-img::before,
.c-campaign-modal__benefit-img::after {
  content: "";
  position: absolute;
  width: 168px;
  height: 80.5px;
  background: var(--cp-giftcard) center / contain no-repeat;
}
.c-campaign-modal__benefit-img::before {
  z-index: 1;
  transform: rotate(-5deg) translate(12px, 4px);
  opacity: 0.8;
}
.c-campaign-modal__benefit-img::after {
  z-index: 2;
  transform: rotate(1deg) translate(4px, 0);
  opacity: 0.8;
}
.c-campaign-modal__benefit-img img {
  position: relative;
  z-index: 3;
  display: block;
  width: 168px;
  height: auto;
  transform: rotate(7deg) translate(-6px, -4px);
}
.c-campaign-modal__benefit-body {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 12px;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 0 8px var(--cp-white);
}

/* 受付期間／対象者／対象エリア／注意事項:
   見出し(Sub heading M)が内容パネルに -10px 重なる。パネル幅は Figma実測348
   （390 - 左右21）、section間gap28。受付期間だけ直前の特典セクションからの余白が66px。 */
.c-campaign-modal__info,
.c-campaign-modal__targets,
.c-campaign-modal__area,
.c-campaign-modal__notes {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 28px 0 0;
  padding: 0 21px;
}
.c-campaign-modal__info {
  margin-top: 66px;
}
.c-campaign-modal__info-text,
.c-campaign-modal__area-text {
  box-sizing: border-box;
  width: 100%;
  margin: -10px 0 0;
  padding: 32px 9px 24px;
  border-radius: 12px;
  background: var(--cp-white);
  color: var(--cp-black);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
.c-campaign-modal__list {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: -10px 0 0;
  padding: 32px 9px 24px;
  border-radius: 12px;
  background: var(--cp-white);
  list-style: none;
}
.c-campaign-modal__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #222;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}
/* 行頭の点は Figma実測 4×4。16幅の枠の中で左から6px の位置なので同じ量を空ける */
.c-campaign-modal__list li::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  margin: 8px 0 0 6px;
  border-radius: 2px;
  background: var(--cp-navy-2);
}

/* == PC対応 (>=768px) =========================================
   SP390基準からの上書き。TOP / PC 1280 の実測値に合わせ、768〜1280の間は
   ビューポート比で連続的に詰める（固定値のままだと768で横にはみ出す）。
   モーダル・特典バッジは実測値がPC/SPで同一なので上書きしない（誘導ボタンだけは
   キャンペーン帯の右列に収める必要があるため、この節で幅を流体化する）。
   ============================================================ */
@media (width >= 768px) {
  /* 帯はフルブリードのまま。縦を詰め（1280で帯の高さ 726px → 約495px）、左右余白は
     既存LPの流体余白 min(2.78vw,40px) に合わせる */
  .p-mv__campaign {
    padding: 32px min(2.78vw, 40px) 40px;
  }
  /* 内容列の上限は既存LPの最大級（.p-reason__cards 960 / .p-sunlight__diagram min(75vw,1080)）に
     合わせて 960px。768〜960px では金額テキストが収まる 720px を下限にする（.p-flow__list と同じ clamp 流儀） */
  .p-mv__campaign-card {
    max-width: clamp(720px, 75vw, 960px);
  }
  /* SP302×40 を 400px 幅へ等倍拡大（×1.325）。切り欠きと縁取りも同率 */
  .p-mv__campaign-limited {
    --cp-ribbon-notch: 14.6px;

    width: 400px;
    height: 53px;
    margin-bottom: -21px;
    font-size: 26px;
    -webkit-text-stroke-width: 8px;
  }
  /* PCは2列2行。左=金額／受付期間、右=ギフト券／誘導ボタン。
     padding-top はリボンの重なり 21px ＋ 金額までの余白 19px。白地は全行を覆う */
  .p-mv__campaign-panel {
    --cp-panel-px: min(2.78vw, 40px);
    --cp-panel-pt: 40px;
    --cp-panel-pb: 24px;

    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "amount gift"
      "period cta";
    column-gap: clamp(16px, 3.1vw, 40px);
    row-gap: 16px;
  }
  .p-mv__campaign-panel::before {
    grid-area: 1 / 1 / -1 / -1;
    margin: calc(-1 * var(--cp-panel-pt)) calc(-1 * var(--cp-panel-px)) calc(-1 * var(--cp-panel-pb));
    border-radius: 21px;
  }
  /* 金額とギフト券をラッパーごしではなくパネルのグリッドへ直接置く（右列にボタンを入れるため） */
  .p-mv__campaign-headline {
    display: contents;
  }
  .p-mv__campaign-amount {
    grid-area: amount;
    align-self: center;
    font-size: clamp(38px, 4.375vw, 56px);
    -webkit-text-stroke-width: 10px;
  }
  /* SPと同じ比率（基準の 0.8 倍 / 1.2 倍）を保つ */
  .p-mv__campaign-amount-unit {
    font-size: clamp(30px, 3.5vw, 45px);
  }
  .p-mv__campaign-amount strong {
    font-size: clamp(46px, 5.3vw, 68px);
  }
  /* PCは3枚重ね（奥2枚は擬似要素）。Figma実測は枠 400×248・カードは枠の88%で、
     translate の % はカード自身（352×168.4）基準なので実測pxを換算して持つ。
     枠の実寸は下で 360 に縮めるが、比率指定なので重なりはそのまま保たれる */
  .p-mv__campaign-giftcard {
    grid-area: gift;
    /* 右列の幅は下のボタン（最小272px）が決めることがあるため、ギフト券は列の中央に置いて
       ボタンと中心線をそろえる */
    justify-self: center;
    position: relative;
    right: auto;
    bottom: auto;
    /* 帯の縦を詰めるため 400→360 に縮小（1280基準・帯の高さを決める最大要素） */
    width: min(28.125vw, 360px);
    aspect-ratio: 400 / 248;
  }
  .p-mv__campaign-giftcard::before,
  .p-mv__campaign-giftcard::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 88%; /* 352 / 400 */
    aspect-ratio: 600 / 287;
    background: var(--cp-giftcard) center / contain no-repeat;
  }
  /* 扇の向きはSPと同じ（奥 -5deg → 手前 +7deg・奥は opacity .8） */
  .p-mv__campaign-giftcard::before {
    transform: rotate(-5deg) translate(2.27%, 14.25%); /* 8px, 24px */
  }
  .p-mv__campaign-giftcard::after {
    transform: rotate(1deg) translate(6.82%, 21.4%); /* 24px, 36px */
  }
  .p-mv__campaign-giftcard img {
    position: absolute;
    left: 0;
    top: 0;
    width: 88%;
    transform: rotate(7deg) translate(11.4%, 28.5%); /* 40px, 48px */
  }
  .p-mv__campaign-period {
    align-self: center;
  }
  .p-mv__campaign-period-label {
    height: 28px;
    padding: 0 27px 0 calc(27px + 0.4em);
    border-radius: 16px;
    font-size: 19px;
  }
  /* 受付期間は左列（金額の下）に入り幅が狭くなるため、日付が2行に折れないよう
     文字サイズも流体にする（1280で実測の24px、768〜1024は19px台で1行に収まる） */
  .p-mv__campaign-period-text {
    margin-top: -16px;
    padding: 25px 17px 17px;
    border-radius: 11px;
    font-size: clamp(19px, 1.875vw, 24px);
  }
  /* 誘導ボタンは白地の中・ギフト券の下（右列）。SP用の上マージン・食い込みは戻す */
  .p-mv__campaign-cta {
    align-self: center;
    margin: 0;
  }

  /* 誘導ボタン。340×88 固定のままだと 768px で右列に収まらないため、768→1280px で
     0.8→1.0 倍に連続スケールさせる（1280px 以上は Figma 実測の等倍で止める）。
     下限＝実測値×0.8（整数丸め）、vw係数＝実測値/1280。SP(<768px)は現行の実測値のまま。
     矢印サークル内のシェブロンは線幅 2.2px を保ち、大きさだけ追従させる。 */
  .c-campaign-btn {
    gap: clamp(6px, 0.625vw, 8px);
    width: clamp(272px, 26.5625vw, 340px);
  }
  .c-campaign-btn__label {
    font-size: clamp(19px, 1.875vw, 24px);
  }
  .c-campaign-btn__label::before,
  .c-campaign-btn__label::after {
    height: clamp(19px, 1.875vw, 24px);
  }
  .c-campaign-btn__pill {
    height: clamp(45px, 4.375vw, 56px);
    padding: clamp(13px, 1.25vw, 16px) clamp(16px, 1.5625vw, 20px);
    font-size: clamp(14px, 1.40625vw, 18px);
  }
  .c-campaign-btn__arrow {
    top: clamp(13px, 1.25vw, 16px);
    right: clamp(16px, 1.5625vw, 20px);
    width: clamp(19px, 1.875vw, 24px);
    height: clamp(19px, 1.875vw, 24px);
  }
  .c-campaign-btn__arrow::before {
    width: clamp(7px, 0.6875vw, 8.8px);
    height: clamp(7px, 0.6875vw, 8.8px);
  }
}
@media (width < 360px) {
  .p-mv__campaign-amount { font-size:32px; -webkit-text-stroke-width:6px; }
  .p-mv__campaign-amount-unit { font-size:25px; }
  .p-mv__campaign-amount strong { font-size:38px; }
}