/*
 * GCS-325 スポンサー LP（/sponsor）専用スタイル。
 * Turbo Drive 配下では head 内 inline <style> がマージで揺れるため、外部化必須。
 * CSS 変数は legacy/zenkoku/import.css 由来（--main-color / --accent-color 等）を使い回す。
 * --accent-color-rgb のみ LP 専用で定義（rgba() でアクセントカラーに透明度を載せるため）。
 * すべて .sponsor-lp スコープでグローバルへの汚染を防ぐ。
 */

.sponsor-lp {
  --accent-color-rgb: 44, 179, 74;
  font-family: 'Noto Sans JP', sans-serif;
  color: #1f2933;
  background: #fff;
}

.sponsor-lp .text-main   { color: var(--main-color); }
.sponsor-lp .bg-main     { background: var(--main-color); }
.sponsor-lp .text-accent { color: var(--accent-color); }
.sponsor-lp .bg-accent   { background: var(--accent-color); }
.sponsor-lp .border-accent { border-color: var(--accent-color); }

/* カード共通のソフトシャドウ + ホバーで軽く持ち上げる */
.sponsor-lp .card-soft {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  transition: all .2s ease;
}
.sponsor-lp .card-soft:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

/* CTA ボタン群 — display:inline-block を付けないと <a> の transform が効かない */
.sponsor-lp .btn-primary {
  display: inline-block;
  background: var(--accent-color);
  color: #fff;
  transition: all .15s ease;
}
.sponsor-lp .btn-primary:hover {
  filter: brightness(.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

.sponsor-lp .btn-outline {
  display: inline-block;
  border: 1.5px solid var(--main-color);
  color: var(--main-color);
  transition: all .15s ease;
}
.sponsor-lp .btn-outline:hover {
  background: var(--main-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

.sponsor-lp .btn-lift {
  display: inline-block;
  transition: all .15s ease;
}
.sponsor-lp .btn-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
  opacity: .92;
}

/* プレースホルダ（ヒーロー画像の暫定塗り） */
.sponsor-lp .ph {
  background: repeating-linear-gradient(
    45deg,
    #e9edf1, #e9edf1 12px,
    #eef2f5 12px, #eef2f5 24px
  );
  color: #8a98a8;
}

/* フォーム種別トグル */
.sponsor-lp .cta-toggle {
  padding: .6rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .875rem;
  color: var(--main-color);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all .15s ease;
}
.sponsor-lp .cta-toggle-active {
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--accent-color-rgb), .35);
}

/* フォーム要素 */
.sponsor-lp .f-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--main-color);
  margin-bottom: .35rem;
}
.sponsor-lp .f-req {
  color: var(--alert-color);
  font-size: .7rem;
  margin-left: .25rem;
}
.sponsor-lp .f-input {
  width: 100%;
  border: 1px solid var(--dark-base-color);
  border-radius: .6rem;
  padding: .6rem .8rem;
  font-size: .9rem;
  background: #fff;
  color: #1f2933;
  transition: border-color .15s;
}
.sponsor-lp .f-input:focus {
  outline: none;
  border-color: var(--main-color);
}
.sponsor-lp textarea.f-input {
  resize: none;
}

/* honeypot（スパム対策）— 画面外に飛ばして人間には見えなくする */
.sponsor-lp .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* home layout は Tailwind の preflight を無効にしているため、
   ブラウザデフォルトの ul/ol の padding-left: 40px と margin が残ってしまう。
   .sponsor-lp スコープ内のリストをフラットに戻す（list-disc / list-decimal や pl-* の
   明示クラスは Tailwind ユーティリティ側で上書きされるため共存可能）。 */
.sponsor-lp ul,
.sponsor-lp ol {
  margin: 0;
  padding-left: 0;
}

/* ========================================================================
 * 差別化比較表（観点 | 一般 | GCS）
 * 参考: TOKIUM の比較表レイアウト（自社列をアクセント色で塗り強調、横罫線のみ）
 * 配色は LP のシステムカラー（--accent-color / --light-base-color / --base-color）に統一
 * ======================================================================== */
.sponsor-lp .comparison-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: .875rem;
}
.sponsor-lp .comparison-table th,
.sponsor-lp .comparison-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--base-color);
}
.sponsor-lp .comparison-table thead th {
  font-weight: 700;
  font-size: .9rem;
}

/* 観点列（左）— 薄グレー背景でラベル列と判別。左端のみ角丸 */
.sponsor-lp .comparison-table .col-criterion {
  background: var(--light-base-color);
  color: var(--main-color);
  font-weight: 700;
  width: 22%;
}
.sponsor-lp .comparison-table thead .col-criterion {
  color: var(--gray-text-color);
  font-weight: 700;
  border-top-left-radius: .75rem;
}
.sponsor-lp .comparison-table tbody tr:last-child td.col-criterion {
  border-bottom-left-radius: .75rem;
}

/* 一般メディア列（中央）— ごく薄い背景でテーブル一体感を出しつつ控えめ */
.sponsor-lp .comparison-table .col-general {
  background: #fafbfc;
  color: var(--gray-text-color);
}
.sponsor-lp .comparison-table thead .col-general {
  color: var(--gray-text-color);
}

/* GCS 列（右）— アクセント色で強調。右端のみ角丸 */
.sponsor-lp .comparison-table .col-gcs {
  background: rgba(var(--accent-color-rgb), .08);
  color: var(--main-color);
}
.sponsor-lp .comparison-table thead .col-gcs {
  background: var(--accent-color);
  color: #fff;
  border-bottom-color: var(--accent-color);
}
/* GCS 列の上端は thead の右上のみ角丸 */
.sponsor-lp .comparison-table thead tr th.col-gcs {
  border-top-right-radius: .75rem;
}
/* GCS 列の下端は最終行の td の右下のみ角丸 */
.sponsor-lp .comparison-table tbody tr:last-child td.col-gcs {
  border-bottom-right-radius: .75rem;
}
/* 最終行の横罫線は消す（外箱の角丸とぶつかるため） */
.sponsor-lp .comparison-table tbody tr:last-child td {
  border-bottom: none;
}

/* チェックマーク（丸付き）— GCS 列の箇条書き内で使う */
.sponsor-lp .comparison-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--accent-color);
  color: #fff;
  border-radius: 9999px;
  font-size: .625rem;
  flex-shrink: 0;
  margin-top: .15rem;
}

/* スムーズスクロール — Tailwind `scroll-smooth` を <html> に当てると効かないケース対策で
   ページ専用に有効化（layout 全体には影響しない） */
.sponsor-lp { scroll-behavior: smooth; }

/* ページ内アンカー（#cta-bottom など）への sticky ヘッダー分のオフセット */
.sponsor-lp [id^="cta-"] {
  scroll-margin-top: 80px;
}