/* ── ボタン配置の特長（5サイト共通） ─────────────────────
   配色は .lf--{base,gaming,office,home,mac} で各サイトに合わせる */
.lf {
  --lf-bg: #ffffff;
  --lf-surface: #f5f6fa;
  --lf-text: #0d1b2a;
  --lf-muted: #3d5068;
  --lf-accent: #2563eb;
  --lf-border: #e2e6ee;
  --lf-radius: 16px;
  --lf-head-font: inherit;

  background: var(--lf-bg);
  color: var(--lf-text);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius);
  padding: 48px 40px;
}
.lf-wrap { padding: 96px 0; }

.lf-eyebrow {
  font-family: var(--lf-head-font);
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--lf-accent);
  margin-bottom: 10px;
}
.lf-title {
  font-family: var(--lf-head-font);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lf-text);
  margin-bottom: 14px;
}
.lf-lead {
  color: var(--lf-muted);
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 28px;
}

.lf img { display: block; width: 100%; height: auto; }

.lf-compare { margin: 0 0 36px; }
.lf-compare img { border-radius: 12px; border: 1px solid var(--lf-border); }
.lf-compare figcaption {
  display: flex;
  margin-top: 14px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: var(--lf-muted);
}
.lf-compare figcaption span { flex: 1; }
.lf-compare .lf-ours { color: var(--lf-accent); }

.lf-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.lf-point {
  background: var(--lf-surface);
  border: 1px solid var(--lf-border);
  border-radius: 12px;
  padding: 16px 16px 20px;
}
.lf-point img {
  border-radius: 8px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 14px;
}
.lf-point-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--lf-text);
  margin-bottom: 6px;
}
.lf-num {
  font-family: var(--lf-head-font);
  color: var(--lf-accent);
  margin-right: 8px;
}
.lf-point p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--lf-muted);
}

.lf-callout {
  border-left: 4px solid var(--lf-accent);
  background: var(--lf-surface);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin-bottom: 32px;
}
.lf-callout strong { display: block; color: var(--lf-text); margin-bottom: 4px; }
.lf-callout p { font-size: 14px; line-height: 1.8; color: var(--lf-muted); }

.lf-scene { margin: 0; }
.lf-scene img { border-radius: 12px; }
.lf-scene figcaption {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--lf-text);
}

/* 基本版（ダーク・シアン） */
.lf--base {
  --lf-bg: #0a1520;
  --lf-surface: #0d1e30;
  --lf-text: #e8f0f8;
  --lf-muted: #b8cfe0;
  --lf-accent: #00d4ff;
  --lf-border: rgba(0,180,255,0.15);
  --lf-radius: 12px;
  --lf-head-font: 'Orbitron', 'Noto Sans JP', sans-serif;
  grid-column: 1 / -1;
}
/* ゲーミング版（ネオン） */
.lf--gaming {
  --lf-bg: #0a0020;
  --lf-surface: #000a1a;
  --lf-text: #e8e0ff;
  --lf-muted: #b8aedd;
  --lf-accent: #00ffff;
  --lf-border: rgba(255,0,204,0.35);
  --lf-radius: 4px;
  --lf-head-font: 'Orbitron', 'Noto Sans JP', monospace;
  grid-column: 1 / -1;
  box-shadow: 0 0 24px rgba(255,0,204,0.15);
}
.lf--gaming .lf-compare .lf-ours { color: #ff00cc; }
/* オフィス版（ネイビー・パープル） */
.lf--office {
  --lf-bg: #ffffff;
  --lf-surface: #f5f6fa;
  --lf-text: #0d1b2a;
  --lf-muted: #3d5068;
  --lf-accent: #6b46ff;
  --lf-border: #e2e6ee;
  --lf-radius: 20px;
}
/* 家庭版（クリーム・テラコッタ） */
.lf--home {
  --lf-bg: #fdfaf7;
  --lf-surface: #f0ebe1;
  --lf-text: #3d3228;
  --lf-muted: #6b5f52;
  --lf-accent: #c17a5a;
  --lf-border: #ddd5c4;
  --lf-radius: 28px;
  --lf-head-font: 'Playfair Display', 'Noto Sans JP', serif;
}
/* Mac版（Apple風ホワイト・ブルー） */
.lf--mac {
  --lf-bg: #ffffff;
  --lf-surface: #f5f5f7;
  --lf-text: #1d1d1f;
  --lf-muted: #6e6e73;
  --lf-accent: #0071e3;
  --lf-border: #d2d2d7;
  --lf-radius: 28px;
}

@media (max-width: 768px) {
  .lf { padding: 32px 20px; }
  .lf-wrap { padding: 64px 0; }
  .lf-title { font-size: 24px; }
  .lf-lead { font-size: 15px; }
  .lf-points { grid-template-columns: 1fr; gap: 16px; }
  .lf-scene figcaption { font-size: 16px; }
  .lf-compare figcaption { font-size: 16px; margin-top: 10px; }
}