/* ══════════════════════════════════════════════════════════════
   開発応援キャンペーン 申込フロー 固有レイアウト
   色・サイズ・余白はすべて HamLab 2.0 の共通トークン(--hl-*)を使う。
   ボタン=.lqsl-btn / アラート=.lqsl-alert / 入力欄=.lqsl-input は
   共通コンポーネント（style.css）を使用し、ここでは定義しない。
   ══════════════════════════════════════════════════════════════ */

/* ── キャンペーン専用カラートークン ───────────────────────── */
/* --hl-accent をオレンジに上書き → lqsl-btn--primary / ステップ数字 /
   ホバーボーダー等 var(--hl-accent) を使う箇所が全てオレンジになる   */
/* 値の正本は unified-header.css の --hl-campaign。ここでは別名を付けるだけ。
   両方に色を書くと、片方だけ変えたときに画面ごとに色が食い違う。 */
:root {
  --camp-orange:       var(--hl-campaign);
  --camp-orange-hover: var(--hl-campaign-hover);
  --camp-orange-soft:  var(--hl-campaign-soft);
}
/* 通常申込（キャンペーン価格ではない）用のグリーン。
   オレンジは「キャンペーンの特典」を表す色なので、通常価格の申込に使うと
   キャンペーンだと誤解される。--hl-accent ごと差し替えることで、
   ボタン・帯・枠・ステップ数字など var(--hl-accent) を使う箇所が一括で変わる。 */
:root {
  --camp-green:       #15803d;
  --camp-green-hover: #116932;
  --camp-green-soft:  #f0fdf4;
}

.camp {
  --hl-accent:      var(--camp-orange);
  --hl-accent-hover: var(--camp-orange-hover);
  --hl-accent-soft:  var(--camp-orange-soft);
  --camp-price-ink:  #9a5600;   /* 帯の金額（オレンジ系の濃い色） */

  /* 内容が短いページでもフッターを画面下端へ張り付ける（sticky footer） */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 通常価格の申込。.camp に後から足すことでアクセント色だけを上書きする。 */
.camp--regular {
  --hl-accent:       var(--camp-green);
  --hl-accent-hover: var(--camp-green-hover);
  --hl-accent-soft:  var(--camp-green-soft);
  --camp-price-ink:  #14532d;   /* 帯の金額（グリーン系の濃い色） */
}

.camp > .camp-main { flex: 1 0 auto; }
.camp > .site-footer { margin-top: auto; }


/* ── LP ヘッダー・フッターの復元（HamLab app CSS による上書きを戻す）── */
/* HamLab の style.css が body に font-family/letter-spacing を設定するため
   LP 本来の値をヘッダー・フッター内だけ上書きして戻す                       */
.site-header,
.site-footer {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: 0;
}
.site-header a:not(.button) { color: #10213c; }
.site-footer a { color: #bbcee2; }
.site-footer a:hover { color: #fff; }

/* HamLab の style.css は全リンク共通で a:hover{text-decoration:underline} を持つ。
   LP のヘッダー／フッターにはこの指定が無く、申込フローだけ
   「青いラインの演出」と「下線」が二重に出てしまうため解除する。
   青ラインの演出（.global-nav>a:after）はそのまま活かす。 */
.site-header a:hover,
.site-footer a:hover { text-decoration: none; }

/* ── ヘッダースペーサー（LP site-header は fixed 78px / sp 68px）── */
.camp-header-spacer { height: 78px; }
@media (max-width: 900px) { .camp-header-spacer { height: 68px; } }

/* ── レイアウト ───────────────────────────────────────────── */
.camp-wrap { width: min(calc(100% - (var(--hl-container-px) * 2)), 760px); margin-inline: auto; }
.camp-main { padding: var(--hl-container-pt) 0 var(--hl-container-pb); }
@media (max-width: 640px) {
  .camp-wrap { width: calc(100% - (var(--hl-container-px-sp) * 2)); }
  .camp-main { padding: var(--hl-container-pt-sp) 0 var(--hl-container-pb-sp); }
}


/* ── ステップ表示 ─────────────────────────────────────────── */
.camp-steps { background: var(--hl-bc); border-top: var(--hl-bw) solid var(--hl-bc-input); border-bottom: var(--hl-bw) solid var(--hl-bc-input); }
/* margin-inline:auto を殺さないよう縦方向のみ 0 にする（.camp-wrap で中央寄せ） */
.camp-steps__list { display: flex; gap: 4px; padding: 12px 0; margin-block: 0; list-style: none; overflow-x: auto; }
.camp-step {
  display: flex; align-items: center; gap: 7px; flex: 1 0 auto;
  font-size: var(--hl-fs-xs); color: var(--hl-text-subtle); white-space: nowrap;
}
.camp-step__no {
  width: 22px; height: 22px; flex: none; border-radius: var(--hl-r-pill);
  display: grid; place-items: center;
  background: var(--hl-bc); color: var(--hl-text-subtle);
  font-size: 12px; font-weight: 700; line-height: 1;
}
.camp-step.is-current { color: var(--hl-page-title-color); font-weight: 700; }
.camp-step.is-current .camp-step__no { background: var(--hl-accent); color: var(--hl-white); }
.camp-step.is-done .camp-step__no { background: var(--hl-success); color: var(--hl-white); }

/* ══════════════════════════════════════════════════════════════
   文字の光学補正（Noto Sans JP は字面が下に沈むため 1px 上へ）
   このフロー内のみ。共通コンポーネントの定義自体は変更しない。
   ══════════════════════════════════════════════════════════════ */
/* ボタンは共通トークン側で補正済み（--hl-btn-pd / --hl-pd-btn / --lg）。ここでは上書きしない。 */
.camp-header__tag    { padding: 2px 12px 4px; }
.camp-step__no       { padding-bottom: 1px; }

/* ── 金額は Roboto Condensed（数字）＋ Noto（円・税込）───────── */
.camp-plan__price,
.camp-plan__was,
.camp-sum__price {
  font-family: 'Roboto Condensed', 'Noto Sans JP', sans-serif;
}

/* ── アラート内の見出し行（このフローのみ・共通定義は変更しない） ── */
.camp .lqsl-alert > strong:first-child { display: block; margin-bottom: 2px; }
.camp .lqsl-alert { font-size: var(--hl-fs-xs); line-height: 1.8; }

/* ── 見出し ──────────────────────────────────────────────── */
.camp-title {
  font-size: var(--hl-page-title-size); font-weight: var(--hl-page-title-weight);
  color: var(--hl-page-title-color); line-height: 1.4; letter-spacing: .02em; margin: 0 0 8px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.camp-title__icon { color: var(--hl-accent); font-size: 1.15em; line-height: 1; flex: none; }
.camp-lead { font-size: var(--hl-fs-base); color: var(--hl-text-muted); margin: 0 0 var(--hl-mb-section); }
@media (max-width: 640px) { .camp-title { font-size: var(--hl-page-title-size-sp); } }

/* ── 旧HamLab キャンペーンバナー ───────────────────────────── */
.camp-banner {
  margin: 0 auto var(--hl-mb-section); max-width: 460px;
  border: var(--hl-bw) solid var(--hl-bc); border-radius: var(--hl-r-lg);
  overflow: hidden; background: var(--hl-white); line-height: 0;
}
.camp-banner img { width: 100%; height: auto; display: block; }
@media (max-width: 560px) { .camp-banner { max-width: 100%; } }

/* ── カード ──────────────────────────────────────────────── */
.camp-card {
  background: var(--hl-white); border: var(--hl-bw) solid var(--hl-bc);
  border-radius: var(--hl-r-xl); padding: var(--hl-pd-section);
  margin-bottom: var(--hl-mb-section);
}
.camp-card--center { text-align: center; }

/* ── プランカード ─────────────────────────────────────────── */
.camp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: var(--hl-mb-section); }
@media (max-width: 640px) { .camp-plans { grid-template-columns: 1fr; } }
.camp-plan {
  background: var(--hl-white); border: var(--hl-bw-md) solid var(--hl-bc);
  border-radius: var(--hl-r-xl); padding: 20px; display: flex; flex-direction: column;
  transition: border-color .15s;
}
.camp-plan:hover { border-color: var(--hl-accent); }
.camp-plan__name {
  font-size: var(--hl-fs-lg); font-weight: 700; color: var(--hl-page-title-color); line-height: 1.4;
  display: flex; align-items: center; gap: 8px;
}
.camp-plan__icon { color: var(--hl-accent); font-size: 1.15em; line-height: 1; flex: none; }
.camp-plan__sub  { font-size: var(--hl-fs-xs); color: var(--hl-text-subtle); margin-top: 2px; }
.camp-plan__legacy {
  font-size: var(--hl-fs-xs); color: var(--hl-accent);
  background: var(--hl-accent-soft); border-radius: var(--hl-r-sm);
  padding: 3px 10px 5px; margin: 8px 0 0; display: inline-block; line-height: 1.5;
}
.camp-plan__legacy strong { font-weight: 700; }

.camp-plan__tags { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.camp-tag { font-size: var(--hl-fs-xs); font-weight: 700; line-height: 1.5; padding: 1px 10px 3px; border-radius: var(--hl-r-pill); }
.camp-tag--campaign { background: var(--hl-accent-soft); color: var(--hl-accent); border: var(--hl-bw) solid var(--hl-accent); }
.camp-tag--keep     { background: var(--hl-success-bg); color: var(--hl-success); border: var(--hl-bw) solid var(--hl-success-border); }

.camp-plan__price { margin-top: 16px; font-size: 28px; font-weight: 700; color: var(--hl-page-title-color); line-height: 1.2; letter-spacing: -.01em; }
.camp-plan__price small { font-size: var(--hl-fs-xs); font-weight: 700; color: var(--hl-text-subtle); letter-spacing: 0; }
.camp-plan__was { font-size: var(--hl-fs-xs); color: var(--hl-text-subtle); text-decoration: line-through; margin-top: 4px; }
.camp-plan__cta { margin-top: 18px; }

/* ── 支払い間隔ごとの区切り ─────────────────────────────────
   年払いと月払いを1枚のカードに並べるため、境目が分からないと
   どちらの金額を見ているのか迷う。2つ目以降に区切り線を入れる。 */
.camp-plan__option + .camp-plan__option {
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--hl-bw) solid var(--hl-bc);
}
.camp-plan__interval {
  margin-top: 14px;
  font-size: var(--hl-fs-xs);
  font-weight: 700;
  color: var(--hl-text-subtle);
  letter-spacing: .04em;
}
.camp-plan__option + .camp-plan__option .camp-plan__interval { margin-top: 0; }
/* 年払いの「月あたり」「おトク額」。金額本体より控えめだが読める大きさにする。 */
.camp-plan__permonth {
  margin-top: 6px;
  font-size: var(--hl-fs-xs);
  color: var(--hl-text-muted);
  line-height: 1.7;
}
.camp-plan__permonth strong { color: var(--hl-text); font-weight: 700; }
.camp-plan__save {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px 2px;
  border-radius: var(--hl-r-pill);
  background: var(--hl-success-bg);
  color: var(--hl-success);
  font-weight: 700;
}

/* ── フォーム（入力欄そのものは .lqsl-form__group の共通定義に従う） ── */
.camp-field { margin-bottom: var(--hl-gap-form); }
.camp-field:last-of-type { margin-bottom: 0; }
.camp-hint { font-size: var(--hl-fs-xs); color: var(--hl-text-subtle); margin-top: 4px; line-height: 1.7; }
/* コールサイン欄は他の入力欄より大きく（全体共通ルール） */
.camp-field--callsign input {
  font-family: var(--hl-font-cs); text-transform: uppercase;
  font-weight: 700; font-size: var(--hl-fs-cs-lg); letter-spacing: 2px;
}
.camp-agree {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--hl-bg); border: var(--hl-bw) solid var(--hl-bc);
  border-radius: var(--hl-r-md); padding: 12px 14px;
}
.camp-agree input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.camp-agree label { font-size: var(--hl-fs-xs); color: var(--hl-text); line-height: 1.8; letter-spacing: 0; font-weight: 400; }
.camp-form-actions { margin-top: var(--hl-mb-section); }

/* ── 内容確認テーブル ─────────────────────────────────────── */
.camp-sum { width: 100%; border-collapse: collapse; }
.camp-sum th, .camp-sum td { text-align: left; padding: 12px 2px; border-bottom: var(--hl-bw) solid var(--hl-bc-subtle); vertical-align: top; }
.camp-sum th { width: 40%; font-size: var(--hl-fs-sm); font-weight: 700; color: var(--hl-text-subtle); }
.camp-sum td { font-size: var(--hl-fs-base); color: var(--hl-text); }
.camp-sum tr:last-child th, .camp-sum tr:last-child td { border-bottom: none; }
.camp-sum__price { font-size: var(--hl-fs-lg); font-weight: 700; color: var(--hl-page-title-color); }
.camp-sum__price small { font-size: var(--hl-fs-xs); font-weight: 700; color: var(--hl-text-subtle); }

/* ── アクション行 ─────────────────────────────────────────── */
.camp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 480px) { .camp-actions { flex-direction: column; align-items: stretch; } }

/* ── 注記リスト ──────────────────────────────────────────── */
.camp-notes { margin: var(--hl-mb-section) 0 0; padding-left: 20px; color: var(--hl-text-subtle); font-size: var(--hl-fs-xs); line-height: 1.9; }

/* ── 完了・保留アイコン ───────────────────────────────────── */
.camp-status-icon {
  width: 56px; height: 56px; border-radius: var(--hl-r-pill);
  display: grid; place-items: center; margin: 0 auto 12px; font-size: 28px; line-height: 1;
}
.camp-status-icon--done    { background: var(--hl-success); color: var(--hl-white); }
.camp-status-icon--pending { background: var(--hl-info-bg); color: var(--hl-info); border: var(--hl-bw-md) solid var(--hl-info-border); }

/* ── 状態バッジ ──────────────────────────────────────────── */
.camp-state { display: inline-block; font-size: var(--hl-fs-xs); font-weight: 700; padding: 2px 12px 4px; border-radius: var(--hl-r-pill); margin-bottom: 12px; }
.camp-state--success { background: var(--hl-success-bg); color: var(--hl-success); border: var(--hl-bw) solid var(--hl-success-border); }
.camp-state--info    { background: var(--hl-info-bg);    color: var(--hl-info);    border: var(--hl-bw) solid var(--hl-info-border); }
.camp-state--warn    { background: var(--hl-warning-bg); color: var(--hl-warning); border: var(--hl-bw) solid var(--hl-warning-border); }


/* ── 申込手続き中を示す小さなキャンペーン帯 ───────────────────
   入力・確認画面でも「いまキャンペーンの申込中」だと分かるようにする。
   入口と同じバナー画像を小さく使い、追加画像は用意しない。          */
.camp-ribbon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 var(--hl-mb-section);
  padding: 10px 14px 10px 10px;
  /* 色は --hl-accent 経由。通常申込（.camp--regular）ではグリーンになる */
  border: 1px solid var(--hl-accent-soft);
  border-left: 4px solid var(--hl-accent);
  border-radius: var(--hl-r-lg);
  background: linear-gradient(100deg, var(--hl-accent-soft), rgba(255, 255, 255, .6));
}
.camp-ribbon__img {
  flex: none;
  width: 120px;
  height: auto;
  border-radius: 6px;
  background: var(--hl-white);
}
.camp-ribbon__body { min-width: 0; }
.camp-ribbon__tag {
  display: inline-block;
  padding: 2px 9px 3px;
  border-radius: 999px;
  background: var(--hl-accent);
  color: var(--hl-white);
  font-size: var(--hl-fs-xs);
  font-weight: 900;
  line-height: 1.3;
}
.camp-ribbon__plan {
  margin: 6px 0 2px;
  color: var(--hl-text);
  font-size: var(--hl-fs-xs);
  font-weight: 700;
  line-height: 1.5;
}
/* プラン名は「いま何を申し込んでいるか」の答えなので、この帯で一番先に目に入るべき。
   以前は金額(16px)より小さい13pxで、プラン名を探す動きが必要だった。 */
.camp-ribbon__plan strong {
  font-size: var(--hl-fs-lg);
  color: var(--hl-page-title-color);
}
.camp-ribbon__price {
  margin-left: 6px;
  color: var(--camp-price-ink);
  font-size: var(--hl-fs-base);
  font-weight: 900;
}
.camp-ribbon__price small { font-size: var(--hl-fs-xs); font-weight: 700; }
.camp-ribbon__note { margin: 0; color: var(--hl-text-muted); font-size: var(--hl-fs-xs); line-height: 1.6; }

@media (max-width: 640px) {
  .camp-ribbon { gap: 10px; padding: 9px 11px 9px 8px; }
  .camp-ribbon__img { width: 84px; }
}