/**
 * 会社専用LP（ランディングページ）スタイル
 * デザインパターン対応: standard, modern, classic, minimal, colorful
 */

/* ========================================
   LP共通スタイル
   ======================================== */

.lp-body {
  --lp-primary: #6366f1;
  --lp-primary-dark: #4f46e5;
  --lp-accent: #f59e0b;
  --lp-text: #1f2937;
  --lp-text-light: #6b7280;
  --lp-bg: #ffffff;
  --lp-bg-gray: #f9fafb;
  --lp-border: #e5e7eb;
  --lp-highlight: #dc2626;
  /* ヒーローバリアント用（Approach A） */
  --lp-primary-light: #f5f3ff;
  --lp-primary-alpha: rgba(99, 102, 241, 0.08);

  /* 拡張カスタマイズ変数 */
  --lp-hero-title-color: #ffffff;
  --lp-hero-subtitle-color: rgba(255,255,255,0.8);
  --lp-hero-bg-color: var(--lp-primary);
  --lp-hero-overlay-opacity: 0.55;
  --lp-merit-bg: var(--lp-accent);
  --lp-merit-text: #ffffff;
  --lp-section-title-color: var(--lp-text);
  --lp-cta-bg: var(--lp-primary);
  --lp-cta-text: #ffffff;
  --lp-card-bg: #ffffff;

  /* フォント設定 */
  --lp-font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --lp-title-font-family: var(--lp-font-family);
  --lp-hero-title-size: 2.5rem;
}

/* フォント・カラー変数の適用 */
.lp-body {
  font-family: var(--lp-font-family);
}
.lp-hero-title {
  font-family: var(--lp-title-font-family);
  font-size: var(--lp-hero-title-size);
}
.lp-section-title,
.lp-section-heading {
  font-family: var(--lp-title-font-family);
  color: var(--lp-section-title-color);
}
.lp-btn-apply-hero,
.lp-btn-apply-main,
.lp-cta-button {
  background-color: var(--lp-cta-bg);
  color: var(--lp-cta-text);
}

/* ========================================
   LP専用ヘッダー
   ======================================== */

.lp-header {
  /* デフォルトでは非表示（会社設定がない場合のみJSで表示） */
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
}

.lp-logo .logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lp-primary);
  text-decoration: none;
}

.lp-logo .logo-img {
  height: 28px;
  width: auto;
}

.lp-header-cta {
  display: flex;
  gap: 0.5rem;
}

.lp-btn-apply-header,
.lp-btn-tel-header {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.lp-btn-apply-header {
  background: var(--lp-primary);
  color: #fff;
}

.lp-btn-apply-header:hover {
  background: var(--lp-primary-dark);
}

.lp-btn-tel-header {
  background: var(--lp-highlight);
  color: #fff;
}

.lp-btn-tel-header:hover {
  background: #b91c1c;
}

.tel-icon {
  display: flex;
  align-items: center;
}

/* ========================================
   ヒーローセクション
   ======================================== */

.lp-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1rem 3rem;
  overflow: hidden;
}

.lp-hero-bg {
  position: absolute;
  inset: 0;
  background-color: var(--lp-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* デフォルトのグラデーション（背景画像がない場合） */
.lp-hero-bg:not([style*="background-image"]),
.lp-hero-bg[style=""],
.lp-hero-bg[style*="background-image: url('')"] {
  background-image: linear-gradient(135deg, var(--lp-primary) 0%, #8b5cf6 100%);
}

.lp-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.lp-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  max-width: 800px;
}

.lp-hero-company {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.lp-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.lp-hero-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.lp-hero-highlights {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.lp-highlight-item {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  text-align: center;
}

.lp-highlight-item.bonus {
  background: rgba(245, 158, 11, 0.3);
  border-color: rgba(245, 158, 11, 0.5);
}

.lp-highlight-label {
  display: block;
  font-size: 0.875rem;
  opacity: 0.9;
  margin-bottom: 0.25rem;
}

.lp-highlight-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 900;
}

.lp-hero-cta {
  margin-top: 2rem;
}

.lp-btn-apply-hero {
  display: inline-block;
  background: var(--lp-accent);
  color: #fff;
  padding: 1rem 3rem;
  border-radius: 50px;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
  transition: all 0.3s;
  animation: pulse 2s infinite;
}

.lp-btn-apply-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(245, 158, 11, 0.5);
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
  }
  50% {
    box-shadow: 0 4px 30px rgba(245, 158, 11, 0.6);
  }
}

/* ========================================
   セクション共通
   ======================================== */

.lp-section-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}

.lp-section-title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--lp-text);
  margin-bottom: 1.5rem;
  position: relative;
}

.lp-section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--lp-primary);
  margin: 0.75rem auto 0;
  border-radius: 2px;
}

/* ========================================
   ポイントセクション
   ======================================== */

.lp-points {
  background: var(--lp-bg-gray);
}

.lp-points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.lp-point-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-point-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.lp-point-number {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  background: var(--lp-primary);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.lp-point-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lp-text);
  margin-bottom: 0.75rem;
}

.lp-point-desc {
  font-size: 0.9375rem;
  color: var(--lp-text-light);
  line-height: 1.7;
  white-space: pre-line;
}

/* ========================================
   求人一覧セクション
   ======================================== */

.lp-jobs {
  background: #fff;
}

.lp-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.lp-job-card {
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s;
  position: relative;
  display: flex;
  flex-direction: column;
}

.lp-job-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 新着タグ */
.lp-job-new-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  color: #dc2626;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  z-index: 10;
}

.lp-job-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: var(--lp-bg-gray);
  border-bottom: 1px solid var(--lp-border);
}

.lp-job-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--lp-text);
  margin: 0;
}

.lp-job-type {
  background: var(--lp-primary);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.lp-job-card-body {
  padding: 1.5rem;
  flex: 1;
}

.lp-job-info {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.lp-job-info li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  color: var(--lp-text);
}

.lp-job-info li.highlight {
  color: var(--lp-highlight);
  font-weight: 600;
}

.lp-info-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--lp-primary);
}

.lp-info-truncate {
  max-width: 100%;
  min-width: 0;
}

.lp-info-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.lp-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lp-job-tag {
  background: var(--lp-bg-gray);
  color: var(--lp-text-light);
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

.lp-job-card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--lp-border);
  text-align: right;
}

.lp-btn-detail {
  display: inline-block;
  background: var(--lp-primary);
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.lp-btn-detail:hover {
  background: var(--lp-primary-dark);
}

/* ========================================
   募集要項セクション
   ======================================== */

.lp-details {
  background: var(--lp-bg-gray);
}

.lp-details-table {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.lp-detail-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  border-bottom: 1px solid var(--lp-border);
}

.lp-detail-row:last-child {
  border-bottom: none;
}

.lp-detail-label {
  background: var(--lp-bg-gray);
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--lp-text);
  border-right: 1px solid var(--lp-border);
}

.lp-detail-value {
  padding: 1rem 1.25rem;
  color: var(--lp-text);
  line-height: 1.7;
}

/* ========================================
   FAQセクション
   ======================================== */

.lp-faq {
  background: #fff;
}

.lp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.lp-faq-item {
  background: var(--lp-bg-gray);
  border-radius: 12px;
  overflow: hidden;
}

.lp-faq-question,
.lp-faq-answer {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.lp-faq-question {
  background: var(--lp-primary);
  color: #fff;
  font-weight: 600;
}

.lp-faq-answer {
  background: #fff;
  color: var(--lp-text);
  line-height: 1.7;
}

.lp-faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

.lp-faq-question .lp-faq-icon {
  background: rgba(255, 255, 255, 0.2);
}

.lp-faq-answer .lp-faq-icon {
  background: var(--lp-accent);
  color: #fff;
}

/* ========================================
   FAQ チャットUI（LINE風）
   ======================================== */

.lp-faq-chat {
  background: #e8e8e8;
}

.lp-faq-chat-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.lp-faq-chat-pair {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lp-faq-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

/* 質問（左側） */
.lp-faq-chat-question {
  flex-direction: row;
}

/* 回答（右側） */
.lp-faq-chat-answer {
  flex-direction: row;
  justify-content: flex-end;
}

/* アバター */
.lp-faq-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-faq-chat-avatar svg {
  width: 20px;
  height: 20px;
}

.lp-faq-chat-avatar-user {
  background: #a8d8ea;
  color: #2d6a7e;
}

.lp-faq-chat-avatar-support {
  background: var(--lp-primary, #667eea);
  color: #fff;
}

/* 吹き出し */
.lp-faq-chat-bubble {
  max-width: 80%;
  padding: 0.875rem 1rem;
  border-radius: 18px;
  line-height: 1.6;
  font-size: 0.9375rem;
  position: relative;
}

/* ユーザーの吹き出し（質問） */
.lp-faq-chat-bubble-user {
  background: #a8d8ea;
  color: #1a3c48;
  border-bottom-right-radius: 4px;
}

/* サポートの吹き出し（回答） */
.lp-faq-chat-bubble-support {
  background: #fff;
  color: #333;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lp-faq-chat-text {
  display: block;
}

/* モバイル対応 */
@media (max-width: 640px) {
  .lp-faq-chat-container {
    gap: 1.25rem;
  }

  .lp-faq-chat-avatar {
    width: 32px;
    height: 32px;
  }

  .lp-faq-chat-avatar svg {
    width: 18px;
    height: 18px;
  }

  .lp-faq-chat-bubble {
    max-width: 85%;
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
  }
}

/* ========================================
   応募セクション
   ======================================== */

.lp-apply {
  background: linear-gradient(135deg, var(--lp-primary) 0%, #8b5cf6 100%);
  color: #fff;
  text-align: center;
}

.lp-apply-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.lp-apply-text {
  font-size: 1.125rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.lp-apply-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.lp-btn-apply-main {
  display: inline-block;
  background: var(--lp-accent);
  color: #fff;
  padding: 1rem 3rem;
  border-radius: 50px;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.lp-btn-apply-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.lp-btn-tel-main {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  color: var(--lp-text);
  padding: 0.75rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s;
}

.lp-btn-tel-main:hover {
  transform: translateY(-2px);
}

.tel-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lp-highlight);
}

.tel-note {
  font-size: 0.75rem;
  color: var(--lp-text-light);
}

.lp-apply-line {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.lp-apply-line p {
  margin-bottom: 0.75rem;
  opacity: 0.9;
}

.lp-btn-line {
  display: inline-block;
  background: #06c755;
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
}

.lp-btn-line:hover {
  background: #05b14a;
}

/* 応募セクション - 改善版スタイル */
.lp-apply-content {
  max-width: 400px;
  margin: 0 auto;
}

.lp-apply-lead {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.lp-apply-methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lp-apply-method {
  text-align: center;
}

.lp-apply-method-header {
  margin-bottom: 0.75rem;
}

.lp-apply-method-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

.lp-apply-method-note {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.lp-btn-tel-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--lp-text, #1f2937);
  padding: 0.875rem 1.5rem;
  border-radius: 50px;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
}

.lp-btn-tel-main:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.lp-btn-tel-main svg {
  flex-shrink: 0;
}

/* モバイルプレビュー用の応募セクション調整 */
body.lp-preview-mode-mobile .lp-apply-content {
  max-width: 100%;
  padding: 0 0.5rem;
}

body.lp-preview-mode-mobile .lp-apply-lead {
  font-size: 0.875rem;
}

body.lp-preview-mode-mobile .lp-btn-apply-main {
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
}

body.lp-preview-mode-mobile .lp-btn-tel-main {
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
}

body.lp-preview-mode-mobile .lp-apply-method-note {
  font-size: 0.75rem;
}

/* ========================================
   LPフッター
   ======================================== */

.lp-footer {
  background: var(--lp-text);
  color: #fff;
}

.lp-footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 3rem 1rem 2rem;
}

.lp-footer-cta {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-footer-cta-text {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.lp-footer-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.lp-btn-apply-footer,
.lp-btn-tel-footer {
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.lp-btn-apply-footer {
  background: var(--lp-accent);
  color: #fff;
}

.lp-btn-tel-footer {
  background: #fff;
  color: var(--lp-text);
}

.lp-footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.lp-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.lp-footer-links a:hover {
  color: #fff;
}

.lp-footer-copyright {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
}

/* ========================================
   エラー表示
   ======================================== */

.lp-error {
  text-align: center;
  padding: 8rem 1rem;
}

.lp-error h2 {
  font-size: 1.5rem;
  color: var(--lp-text);
  margin-bottom: 1rem;
}

.lp-error p {
  color: var(--lp-text-light);
  margin-bottom: 2rem;
}

.lp-btn-back {
  display: inline-block;
  background: var(--lp-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s;
}

.lp-btn-back:hover {
  background: var(--lp-primary-dark);
}

/* ========================================
   ローディング
   ======================================== */

.lp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 8rem 1rem;
}

/* ========================================
   デザインパターン: Standard（紫・デフォルト）
   ======================================== */

.lp-pattern-standard {
  --lp-primary: #667eea;
  --lp-primary-dark: #5a67d8;
  --lp-accent: #764ba2;
  --lp-primary-light: #f5f3ff;
  --lp-primary-alpha: rgba(102, 126, 234, 0.08);
}

.lp-pattern-standard .lp-hero-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.lp-pattern-standard .lp-point-number {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.lp-pattern-standard .lp-apply {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.lp-pattern-standard .lp-section-title::after {
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.lp-pattern-standard .lp-faq-q {
  background: #667eea;
}

.lp-pattern-standard .lp-btn-apply-hero,
.lp-pattern-standard .lp-btn-apply-main,
.lp-pattern-standard .lp-btn-apply-footer {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.lp-pattern-standard .lp-btn-apply-hero:hover,
.lp-pattern-standard .lp-btn-apply-main:hover,
.lp-pattern-standard .lp-btn-apply-footer:hover {
  background: linear-gradient(135deg, #5a67d8, #6b46c1);
}

/* Standard: FAQ Chat */
.lp-pattern-standard .lp-faq-chat {
  background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
}

.lp-pattern-standard .lp-faq-chat-avatar-support {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.lp-pattern-standard .lp-faq-chat-bubble-user {
  background: #ddd6fe;
  color: #4c1d95;
}

/* Standard: Footer */
.lp-pattern-standard .lp-footer {
  background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
}

/* Standard: Details */
.lp-pattern-standard .lp-details {
  background: #f5f3ff;
}

.lp-pattern-standard .lp-details-table th {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

/* Standard: Jobs */
.lp-pattern-standard .lp-job-card {
  border-left: 4px solid #667eea;
}

.lp-pattern-standard .lp-job-card:hover {
  border-left-color: #764ba2;
}

/* ========================================
   デザインパターン: Modern
   ======================================== */

.lp-pattern-modern {
  --lp-primary: #1e40af;
  --lp-primary-dark: #1e3a8a;
  --lp-accent: #3b82f6;
  --lp-primary-light: #eff6ff;
  --lp-primary-alpha: rgba(30, 64, 175, 0.08);
}

.lp-pattern-modern .lp-hero-bg {
  background: linear-gradient(180deg, #0f172a 0%, #1e3a8a 100%);
}

.lp-pattern-modern .lp-point-card {
  border-radius: 20px;
}

.lp-pattern-modern .lp-point-number {
  background: linear-gradient(135deg, #1e40af, #3b82f6);
}

.lp-pattern-modern .lp-apply {
  background: linear-gradient(180deg, #0f172a 0%, #1e3a8a 100%);
}

.lp-pattern-modern .lp-btn-apply-hero,
.lp-pattern-modern .lp-btn-apply-main,
.lp-pattern-modern .lp-btn-apply-footer {
  background: #3b82f6;
}

.lp-pattern-modern .lp-btn-apply-hero:hover,
.lp-pattern-modern .lp-btn-apply-main:hover,
.lp-pattern-modern .lp-btn-apply-footer:hover {
  background: #1e40af;
}

.lp-pattern-modern .lp-faq-q {
  background: #1e40af;
}

.lp-pattern-modern .lp-section-title::after {
  background: linear-gradient(90deg, #1e40af, #3b82f6);
}

/* Modern: FAQ Chat */
.lp-pattern-modern .lp-faq-chat {
  background: linear-gradient(180deg, #f0f4ff 0%, #e0e7ff 100%);
}

.lp-pattern-modern .lp-faq-chat-avatar-support {
  background: #1e40af;
}

.lp-pattern-modern .lp-faq-chat-bubble-user {
  background: #dbeafe;
  color: #1e3a8a;
}

/* Modern: Footer */
.lp-pattern-modern .lp-footer {
  background: linear-gradient(180deg, #0f172a 0%, #1e3a8a 100%);
}

.lp-pattern-modern .lp-btn-apply-footer {
  background: #3b82f6;
}

/* Modern: Details */
.lp-pattern-modern .lp-details {
  background: #f0f4ff;
}

.lp-pattern-modern .lp-details-table th {
  background: #1e40af;
  color: #fff;
}

/* Modern: Jobs */
.lp-pattern-modern .lp-job-card {
  border-left: 4px solid #3b82f6;
}

.lp-pattern-modern .lp-job-card:hover {
  border-left-color: #1e40af;
}

/* ========================================
   デザインパターン: Classic
   ======================================== */

.lp-pattern-classic {
  --lp-primary: #dc2626;
  --lp-primary-dark: #b91c1c;
  --lp-accent: #fbbf24;
  --lp-primary-light: #fef2f2;
  --lp-primary-alpha: rgba(220, 38, 38, 0.08);
}

.lp-pattern-classic .lp-hero-bg {
  background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%);
}

.lp-pattern-classic .lp-section-title::after {
  background: var(--lp-accent);
}

.lp-pattern-classic .lp-point-card {
  border-radius: 8px;
  border: 2px solid var(--lp-border);
}

.lp-pattern-classic .lp-apply {
  background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%);
}

.lp-pattern-classic .lp-btn-apply-hero,
.lp-pattern-classic .lp-btn-apply-main,
.lp-pattern-classic .lp-btn-apply-footer {
  background: #dc2626;
}

.lp-pattern-classic .lp-btn-apply-hero:hover,
.lp-pattern-classic .lp-btn-apply-main:hover,
.lp-pattern-classic .lp-btn-apply-footer:hover {
  background: #b91c1c;
}

.lp-pattern-classic .lp-faq-q {
  background: #dc2626;
}

/* Classic: FAQ Chat */
.lp-pattern-classic .lp-faq-chat {
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
}

.lp-pattern-classic .lp-faq-chat-avatar-support {
  background: #dc2626;
}

.lp-pattern-classic .lp-faq-chat-bubble-user {
  background: #fecaca;
  color: #7f1d1d;
}

/* Classic: Footer */
.lp-pattern-classic .lp-footer {
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
}

/* Classic: Details */
.lp-pattern-classic .lp-details {
  background: #fef2f2;
}

.lp-pattern-classic .lp-details-table th {
  background: #dc2626;
  color: #fff;
}

/* Classic: Jobs */
.lp-pattern-classic .lp-job-card {
  border-left: 4px solid #dc2626;
}

/* ========================================
   デザインパターン: Minimal
   ======================================== */

.lp-pattern-minimal {
  --lp-primary: #1f2937;
  --lp-primary-dark: #111827;
  --lp-accent: #1f2937;
  --lp-primary-light: #f9fafb;
  --lp-primary-alpha: rgba(31, 41, 55, 0.08);
}

.lp-pattern-minimal .lp-hero {
  min-height: 60vh;
}

.lp-pattern-minimal .lp-hero-bg {
  background: #fff;
}

.lp-pattern-minimal .lp-hero-overlay {
  background: none;
}

.lp-pattern-minimal .lp-hero-content {
  color: var(--lp-text);
}

.lp-pattern-minimal .lp-hero-company,
.lp-pattern-minimal .lp-hero-subtitle {
  opacity: 1;
  color: var(--lp-text-light);
}

.lp-pattern-minimal .lp-highlight-item {
  background: var(--lp-bg-gray);
  border-color: var(--lp-border);
}

.lp-pattern-minimal .lp-btn-apply-hero,
.lp-pattern-minimal .lp-btn-apply-main,
.lp-pattern-minimal .lp-btn-apply-footer {
  background: var(--lp-text);
  box-shadow: none;
  animation: none;
}

.lp-pattern-minimal .lp-btn-apply-hero:hover,
.lp-pattern-minimal .lp-btn-apply-main:hover,
.lp-pattern-minimal .lp-btn-apply-footer:hover {
  background: #374151;
}

.lp-pattern-minimal .lp-faq-q {
  background: var(--lp-text);
}

.lp-pattern-minimal .lp-point-card {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--lp-border);
}

.lp-pattern-minimal .lp-apply {
  background: var(--lp-text);
}

/* Minimal: FAQ Chat */
.lp-pattern-minimal .lp-faq-chat {
  background: #f9fafb;
}

.lp-pattern-minimal .lp-faq-chat-avatar-support {
  background: #1f2937;
}

.lp-pattern-minimal .lp-faq-chat-bubble-user {
  background: #e5e7eb;
  color: #1f2937;
}

/* Minimal: Footer */
.lp-pattern-minimal .lp-footer {
  background: #1f2937;
}

/* Minimal: Details */
.lp-pattern-minimal .lp-details {
  background: #f9fafb;
}

.lp-pattern-minimal .lp-details-table th {
  background: #1f2937;
  color: #fff;
}

/* Minimal: Jobs */
.lp-pattern-minimal .lp-job-card {
  border-left: 4px solid #1f2937;
  border-radius: 0;
}

/* ========================================
   デザインパターン: Colorful
   ======================================== */

.lp-pattern-colorful {
  --lp-primary: #8b5cf6;
  --lp-primary-dark: #7c3aed;
  --lp-accent: #f59e0b;
  --lp-primary-light: #faf5ff;
  --lp-primary-alpha: rgba(139, 92, 246, 0.08);
}

.lp-pattern-colorful .lp-hero-bg {
  background: linear-gradient(135deg, #f472b6 0%, #8b5cf6 50%, #06b6d4 100%);
}

.lp-pattern-colorful .lp-points {
  background: linear-gradient(180deg, #fdf4ff 0%, #f0f9ff 100%);
}

.lp-pattern-colorful .lp-point-number {
  background: linear-gradient(135deg, #f472b6, #8b5cf6);
}

.lp-pattern-colorful .lp-apply {
  background: linear-gradient(135deg, #f472b6 0%, #8b5cf6 50%, #06b6d4 100%);
}

.lp-pattern-colorful .lp-section-title::after {
  background: linear-gradient(90deg, #f472b6, #8b5cf6, #06b6d4);
}

.lp-pattern-colorful .lp-btn-apply-hero,
.lp-pattern-colorful .lp-btn-apply-main,
.lp-pattern-colorful .lp-btn-apply-footer {
  background: linear-gradient(135deg, #f472b6, #8b5cf6);
}

.lp-pattern-colorful .lp-btn-apply-hero:hover,
.lp-pattern-colorful .lp-btn-apply-main:hover,
.lp-pattern-colorful .lp-btn-apply-footer:hover {
  background: linear-gradient(135deg, #ec4899, #7c3aed);
}

.lp-pattern-colorful .lp-faq-q {
  background: #8b5cf6;
}

/* Colorful: FAQ Chat */
.lp-pattern-colorful .lp-faq-chat {
  background: linear-gradient(180deg, #fdf4ff 0%, #f0f9ff 100%);
}

.lp-pattern-colorful .lp-faq-chat-avatar-support {
  background: linear-gradient(135deg, #f472b6, #8b5cf6);
}

.lp-pattern-colorful .lp-faq-chat-bubble-user {
  background: linear-gradient(135deg, #fce7f3, #e9d5ff);
  color: #581c87;
}

/* Colorful: Footer */
.lp-pattern-colorful .lp-footer {
  background: linear-gradient(135deg, #581c87 0%, #1e3a8a 100%);
}

/* Colorful: Details */
.lp-pattern-colorful .lp-details {
  background: linear-gradient(180deg, #fdf4ff 0%, #f0f9ff 100%);
}

.lp-pattern-colorful .lp-details-table th {
  background: linear-gradient(135deg, #f472b6, #8b5cf6);
  color: #fff;
}

/* Colorful: Jobs */
.lp-pattern-colorful .lp-job-card {
  border-left: 4px solid #8b5cf6;
  background: linear-gradient(90deg, #fdf4ff 0%, #fff 20%);
}

.lp-pattern-colorful .lp-job-card:hover {
  border-left-color: #f472b6;
}

/* ========================================
   デザインパターン: Blue
   ======================================== */

.lp-pattern-blue {
  --lp-primary: #3b82f6;
  --lp-primary-dark: #1d4ed8;
  --lp-accent: #0ea5e9;
  --lp-primary-light: #eff6ff;
  --lp-primary-alpha: rgba(59, 130, 246, 0.08);
}

.lp-pattern-blue .lp-hero-bg {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

.lp-pattern-blue .lp-point-number {
  background: linear-gradient(135deg, #3b82f6, #0ea5e9);
}

.lp-pattern-blue .lp-apply {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

.lp-pattern-blue .lp-section-title::after {
  background: linear-gradient(90deg, #3b82f6, #0ea5e9);
}

.lp-pattern-blue .lp-faq-q {
  background: #3b82f6;
}

.lp-pattern-blue .lp-btn-apply-hero,
.lp-pattern-blue .lp-btn-apply-main,
.lp-pattern-blue .lp-btn-apply-footer {
  background: #0ea5e9;
}

.lp-pattern-blue .lp-btn-apply-hero:hover,
.lp-pattern-blue .lp-btn-apply-main:hover,
.lp-pattern-blue .lp-btn-apply-footer:hover {
  background: #06b6d4;
}

/* Blue: FAQ Chat */
.lp-pattern-blue .lp-faq-chat {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}

.lp-pattern-blue .lp-faq-chat-avatar-support {
  background: #3b82f6;
}

.lp-pattern-blue .lp-faq-chat-bubble-user {
  background: #bfdbfe;
  color: #1e3a8a;
}

/* Blue: Footer */
.lp-pattern-blue .lp-footer {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
}

/* Blue: Details */
.lp-pattern-blue .lp-details {
  background: #eff6ff;
}

.lp-pattern-blue .lp-details-table th {
  background: #3b82f6;
  color: #fff;
}

/* Blue: Jobs */
.lp-pattern-blue .lp-job-card {
  border-left: 4px solid #3b82f6;
}

.lp-pattern-blue .lp-job-card:hover {
  border-left-color: #0ea5e9;
}

/* ========================================
   デザインパターン: Orange
   ======================================== */

.lp-pattern-orange {
  --lp-primary: #f97316;
  --lp-primary-dark: #ea580c;
  --lp-accent: #fb923c;
  --lp-primary-light: #fff7ed;
  --lp-primary-alpha: rgba(249, 115, 22, 0.08);
}

.lp-pattern-orange .lp-hero-bg {
  background: linear-gradient(135deg, #9a3412 0%, #f97316 100%);
}

.lp-pattern-orange .lp-point-number {
  background: linear-gradient(135deg, #f97316, #fb923c);
}

.lp-pattern-orange .lp-apply {
  background: linear-gradient(135deg, #9a3412 0%, #f97316 100%);
}

.lp-pattern-orange .lp-section-title::after {
  background: linear-gradient(90deg, #f97316, #fb923c);
}

.lp-pattern-orange .lp-faq-q {
  background: #f97316;
}

.lp-pattern-orange .lp-btn-apply-hero,
.lp-pattern-orange .lp-btn-apply-main,
.lp-pattern-orange .lp-btn-apply-footer {
  background: #ea580c;
}

.lp-pattern-orange .lp-btn-apply-hero:hover,
.lp-pattern-orange .lp-btn-apply-main:hover,
.lp-pattern-orange .lp-btn-apply-footer:hover {
  background: #c2410c;
}

/* Orange: FAQ Chat */
.lp-pattern-orange .lp-faq-chat {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
}

.lp-pattern-orange .lp-faq-chat-avatar-support {
  background: #f97316;
}

.lp-pattern-orange .lp-faq-chat-bubble-user {
  background: #fed7aa;
  color: #9a3412;
}

/* Orange: Footer */
.lp-pattern-orange .lp-footer {
  background: linear-gradient(135deg, #9a3412 0%, #c2410c 100%);
}

/* Orange: Details */
.lp-pattern-orange .lp-details {
  background: #fff7ed;
}

.lp-pattern-orange .lp-details-table th {
  background: #f97316;
  color: #fff;
}

/* Orange: Jobs */
.lp-pattern-orange .lp-job-card {
  border-left: 4px solid #f97316;
}

.lp-pattern-orange .lp-job-card:hover {
  border-left-color: #ea580c;
}

/* ========================================
   デザインパターン: Athome（アットホーム）
   温かみのあるオレンジ系。親しみやすさ重視
   ======================================== */

.lp-pattern-athome {
  --lp-primary: #f39c12;
  --lp-primary-dark: #e67e22;
  --lp-accent: #fff176;
  --lp-primary-light: #fffbeb;
  --lp-primary-alpha: rgba(243, 156, 18, 0.08);
}

.lp-pattern-athome .lp-hero-bg {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
}

.lp-pattern-athome .lp-point-number {
  background: linear-gradient(135deg, #f39c12, #fbbf24);
}

.lp-pattern-athome .lp-apply {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
}

.lp-pattern-athome .lp-section-title::after {
  background: linear-gradient(90deg, #f39c12, #fbbf24);
}

.lp-pattern-athome .lp-faq-q {
  background: #f39c12;
}

.lp-pattern-athome .lp-btn-apply-hero,
.lp-pattern-athome .lp-btn-apply-main,
.lp-pattern-athome .lp-btn-apply-footer {
  background: #f39c12;
}

.lp-pattern-athome .lp-btn-apply-hero:hover,
.lp-pattern-athome .lp-btn-apply-main:hover,
.lp-pattern-athome .lp-btn-apply-footer:hover {
  background: #e67e22;
}

/* Athome: FAQ Chat */
.lp-pattern-athome .lp-faq-chat {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
}

.lp-pattern-athome .lp-faq-chat-avatar-support {
  background: #f39c12;
}

.lp-pattern-athome .lp-faq-chat-bubble-user {
  background: #fde68a;
  color: #92400e;
}

/* Athome: Footer */
.lp-pattern-athome .lp-footer {
  background: linear-gradient(135deg, #92400e 0%, #b45309 100%);
}

/* Athome: Details */
.lp-pattern-athome .lp-details {
  background: #fffbeb;
}

.lp-pattern-athome .lp-details-table th {
  background: #f39c12;
  color: #fff;
}

/* Athome: Jobs */
.lp-pattern-athome .lp-job-card {
  border-left: 4px solid #f39c12;
}

.lp-pattern-athome .lp-job-card:hover {
  border-left-color: #e67e22;
}

/* ========================================
   デザインパターン: Cute（キュート）
   ポップで可愛いパステル調。女性向けに最適
   ======================================== */

.lp-pattern-cute {
  --lp-primary: #ff8fa3;
  --lp-primary-dark: #f472b6;
  --lp-accent: #fff59d;
  --lp-primary-light: #fff0f3;
  --lp-primary-alpha: rgba(255, 143, 163, 0.08);
}

.lp-pattern-cute .lp-hero-bg {
  background: linear-gradient(135deg, #ff8fa3 0%, #fab1a0 50%, #ffeaa7 100%);
}

.lp-pattern-cute .lp-point-number {
  background: linear-gradient(135deg, #ff8fa3, #f472b6);
}

.lp-pattern-cute .lp-point-card {
  border-radius: 20px;
  border: 2px solid #fce7f3;
}

.lp-pattern-cute .lp-apply {
  background: linear-gradient(135deg, #ff8fa3 0%, #f472b6 100%);
}

.lp-pattern-cute .lp-section-title::after {
  background: linear-gradient(90deg, #ff8fa3, #f472b6);
}

.lp-pattern-cute .lp-faq-q {
  background: #ff8fa3;
}

.lp-pattern-cute .lp-btn-apply-hero,
.lp-pattern-cute .lp-btn-apply-main,
.lp-pattern-cute .lp-btn-apply-footer {
  background: linear-gradient(135deg, #ff8fa3, #f472b6);
  border-radius: 30px;
}

.lp-pattern-cute .lp-btn-apply-hero:hover,
.lp-pattern-cute .lp-btn-apply-main:hover,
.lp-pattern-cute .lp-btn-apply-footer:hover {
  background: linear-gradient(135deg, #f472b6, #ec4899);
}

/* Cute: FAQ Chat */
.lp-pattern-cute .lp-faq-chat {
  background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 100%);
}

.lp-pattern-cute .lp-faq-chat-avatar-support {
  background: linear-gradient(135deg, #ff8fa3, #f472b6);
}

.lp-pattern-cute .lp-faq-chat-bubble-user {
  background: #fbcfe8;
  color: #9d174d;
}

.lp-pattern-cute .lp-faq-chat-bubble-support,
.lp-pattern-cute .lp-faq-chat-bubble-user {
  border-radius: 20px;
}

/* Cute: Footer */
.lp-pattern-cute .lp-footer {
  background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
}

/* Cute: Details */
.lp-pattern-cute .lp-details {
  background: #fdf2f8;
  border-radius: 20px;
}

.lp-pattern-cute .lp-details-table th {
  background: #ff8fa3;
  color: #fff;
}

/* Cute: Jobs */
.lp-pattern-cute .lp-job-card {
  border-left: 4px solid #ff8fa3;
  border-radius: 16px;
}

.lp-pattern-cute .lp-job-card:hover {
  border-left-color: #f472b6;
}

/* ========================================
   デザインパターン: Trust（信頼）
   誠実で堅実な印象。ビジネス・企業向け
   ======================================== */

.lp-pattern-trust {
  --lp-primary: #0077c2;
  --lp-primary-dark: #1a2a3a;
  --lp-accent: #fff176;
  --lp-primary-light: #f0f9ff;
  --lp-primary-alpha: rgba(0, 119, 194, 0.08);
}

.lp-pattern-trust .lp-hero-bg {
  background: linear-gradient(135deg, #1a2a3a 0%, #0077c2 100%);
}

.lp-pattern-trust .lp-point-number {
  background: linear-gradient(135deg, #0077c2, #0ea5e9);
}

.lp-pattern-trust .lp-point-card {
  border-radius: 4px;
  border-left: 4px solid #0077c2;
}

.lp-pattern-trust .lp-apply {
  background: linear-gradient(135deg, #1a2a3a 0%, #0077c2 100%);
}

.lp-pattern-trust .lp-section-title::after {
  background: #0077c2;
}

.lp-pattern-trust .lp-faq-q {
  background: #0077c2;
}

.lp-pattern-trust .lp-btn-apply-hero,
.lp-pattern-trust .lp-btn-apply-main,
.lp-pattern-trust .lp-btn-apply-footer {
  background: #0077c2;
}

.lp-pattern-trust .lp-btn-apply-hero:hover,
.lp-pattern-trust .lp-btn-apply-main:hover,
.lp-pattern-trust .lp-btn-apply-footer:hover {
  background: #005a94;
}

/* Trust: FAQ Chat */
.lp-pattern-trust .lp-faq-chat {
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
}

.lp-pattern-trust .lp-faq-chat-avatar-support {
  background: #0077c2;
}

.lp-pattern-trust .lp-faq-chat-bubble-user {
  background: #bae6fd;
  color: #0c4a6e;
}

/* Trust: Footer */
.lp-pattern-trust .lp-footer {
  background: linear-gradient(135deg, #1a2a3a 0%, #1e3a5f 100%);
}

/* Trust: Details */
.lp-pattern-trust .lp-details {
  background: #f0f9ff;
}

.lp-pattern-trust .lp-details-table th {
  background: #0077c2;
  color: #fff;
}

/* Trust: Jobs */
.lp-pattern-trust .lp-job-card {
  border-left: 4px solid #0077c2;
}

.lp-pattern-trust .lp-job-card:hover {
  border-left-color: #0ea5e9;
}

/* ========================================
   デザインパターン: Kenchiku（建築）
   力強いオレンジ + ダーク。建設・土木業界向け
   ======================================== */

.lp-pattern-kenchiku {
  --lp-primary: #f39c12;
  --lp-primary-dark: #1a1a1a;
  --lp-accent: #fff176;
  --lp-primary-light: #fffaf0;
  --lp-primary-alpha: rgba(243, 156, 18, 0.08);
}

.lp-pattern-kenchiku .lp-hero-bg {
  background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 50%, #f39c12 100%);
}

.lp-pattern-kenchiku .lp-hero-content {
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.lp-pattern-kenchiku .lp-point-number {
  background: linear-gradient(135deg, #f39c12, #fbbf24);
}

.lp-pattern-kenchiku .lp-point-card {
  border-radius: 0;
  border-left: 6px solid #f39c12;
  background: #fff;
}

.lp-pattern-kenchiku .lp-apply {
  background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
}

.lp-pattern-kenchiku .lp-section-title {
  font-weight: 900;
}

.lp-pattern-kenchiku .lp-section-title::after {
  background: #f39c12;
  height: 4px;
}

.lp-pattern-kenchiku .lp-faq-q {
  background: #1a1a1a;
}

.lp-pattern-kenchiku .lp-btn-apply-hero,
.lp-pattern-kenchiku .lp-btn-apply-main,
.lp-pattern-kenchiku .lp-btn-apply-footer {
  background: #f39c12;
  font-weight: 700;
}

.lp-pattern-kenchiku .lp-btn-apply-hero:hover,
.lp-pattern-kenchiku .lp-btn-apply-main:hover,
.lp-pattern-kenchiku .lp-btn-apply-footer:hover {
  background: #e67e22;
}

/* Kenchiku: FAQ Chat */
.lp-pattern-kenchiku .lp-faq-chat {
  background: linear-gradient(180deg, #f5f5f5 0%, #e5e5e5 100%);
}

.lp-pattern-kenchiku .lp-faq-chat-avatar-support {
  background: #1a1a1a;
}

.lp-pattern-kenchiku .lp-faq-chat-bubble-user {
  background: #fde68a;
  color: #1a1a1a;
}

/* Kenchiku: Footer */
.lp-pattern-kenchiku .lp-footer {
  background: #1a1a1a;
}

/* Kenchiku: Details */
.lp-pattern-kenchiku .lp-details {
  background: #f5f5f5;
}

.lp-pattern-kenchiku .lp-details-table th {
  background: #1a1a1a;
  color: #fff;
}

/* Kenchiku: Jobs */
.lp-pattern-kenchiku .lp-job-card {
  border-left: 6px solid #f39c12;
  border-radius: 0;
}

.lp-pattern-kenchiku .lp-job-card:hover {
  border-left-color: #e67e22;
}

/* ========================================
   テンプレートデザイン: Yellow（イエロー）
   親しみやすい明るいデザイン（構造のみ）
   ======================================== */

/* Yellow: Hero - 背景オーバーレイ濃く(0.4)、テキストシャドウ強化 */
.lp-layout-yellow .lp-hero-bg {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
}

.lp-layout-yellow .lp-hero-overlay {
  background: rgba(0, 0, 0, 0.4);
}

.lp-layout-yellow .lp-hero-content {
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}

.lp-layout-yellow .lp-hero-title {
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.4);
  font-size: clamp(2.5rem, 6vw, 4rem);
}

.lp-layout-yellow .lp-hero-subtitle {
  font-size: 1.25rem;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

/* Yellow: ハイライト（メリット表示）- 大きく目立たせる */
.lp-layout-yellow .lp-hero-highlights {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2rem 0;
}

.lp-layout-yellow .lp-highlight-item {
  background: rgba(255, 255, 255, 0.95);
  padding: 1.25rem 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.lp-layout-yellow .lp-highlight-label {
  display: block;
  font-size: 0.8rem;
  color: #78350f;
  margin-bottom: 0.25rem;
  text-shadow: none;
}

.lp-layout-yellow .lp-highlight-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: #d97706;
  text-shadow: none;
}

/* Yellow: セクション間の余白を2倍に拡大（高級感） */
.lp-layout-yellow section {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.lp-layout-yellow .lp-hero {
  padding-top: 10rem;
  padding-bottom: 8rem;
}

/* Yellow: ポイントカード - 余白1.5倍、ドロップシャドウ強化 */
.lp-layout-yellow .lp-point-card {
  background: #fff;
  border-radius: 24px;
  border: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s, transform 0.3s;
  padding: 2.5rem 2rem;
}

.lp-layout-yellow .lp-point-title {
  margin-bottom: 1rem;
}

.lp-layout-yellow .lp-point-desc {
  line-height: 1.8;
}

.lp-layout-yellow .lp-point-card:hover {
  box-shadow: 0 12px 40px rgba(245, 158, 11, 0.15), 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.lp-layout-yellow .lp-point-number {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.lp-layout-yellow .lp-section-title {
  color: #92400e;
}

.lp-layout-yellow .lp-section-title::after {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* Yellow: 応募セクション - 余白2倍 */
.lp-layout-yellow .lp-apply {
  background: linear-gradient(180deg, #fefce8 0%, #fef3c7 100%);
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.lp-layout-yellow .lp-apply-content {
  max-width: 600px;
  margin: 0 auto;
}

.lp-layout-yellow .lp-apply-lead {
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
}

.lp-layout-yellow .lp-apply-method {
  padding: 2rem;
}

.lp-layout-yellow .lp-apply .lp-section-title,
.lp-layout-yellow .lp-apply-lead,
.lp-layout-yellow .lp-apply-method h3,
.lp-layout-yellow .lp-apply-method p,
.lp-layout-yellow .lp-apply-divider,
.lp-layout-yellow .lp-apply-note {
  color: #78350f;
}

.lp-layout-yellow .lp-apply .lp-section-title::after {
  background: #f59e0b;
}

/* Yellow: 応募セクション - 要素の余白を大幅に改善 */
.lp-layout-yellow .lp-apply-methods {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 3rem;
}

.lp-layout-yellow .lp-apply-method {
  padding: 3rem 2.5rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.lp-layout-yellow .lp-apply-method h3 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.lp-layout-yellow .lp-apply-method p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.lp-layout-yellow .lp-apply-divider {
  padding: 1.5rem 0;
  font-size: 1rem;
  font-weight: 500;
  position: relative;
}

.lp-layout-yellow .lp-apply-divider span {
  background: #fef3c7;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
}

/* 電話ボタン - より大きく、余白追加 */
.lp-layout-yellow .lp-btn-tel-main {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  color: #78350f;
  padding: 1.25rem 2.5rem;
  border-radius: 50px;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.lp-layout-yellow .lp-btn-tel-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.lp-layout-yellow .lp-btn-tel-main svg {
  width: 28px;
  height: 28px;
  color: #f59e0b;
}

/* 注記テキスト - 余白追加 */
.lp-layout-yellow .lp-apply-note {
  margin-top: 3rem;
  font-size: 0.9rem;
  opacity: 0.8;
}

.lp-layout-yellow .lp-faq-q {
  background: #f9f9f9;
  color: #374151;
}

/* Yellow: CTAボタン - サイズ拡大、インパクト強化 */
.lp-layout-yellow .lp-btn-apply-hero,
.lp-layout-yellow .lp-btn-apply-main,
.lp-layout-yellow .lp-btn-apply-footer,
.lp-layout-yellow .lp-apply .lp-btn-apply-main {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 12px 24px rgba(245, 158, 11, 0.35) !important;
  color: #fff !important;
  font-size: 1.25rem !important;
  padding: 1.25rem 3rem !important;
  border-radius: 50px !important;
}

.lp-layout-yellow .lp-btn-apply-hero:hover,
.lp-layout-yellow .lp-btn-apply-main:hover,
.lp-layout-yellow .lp-btn-apply-footer:hover {
  filter: brightness(0.95);
  transform: scale(1.05);
  box-shadow: 0 16px 32px rgba(245, 158, 11, 0.4) !important;
}

/* Yellow: マイクロコピー用スタイル */
.lp-layout-yellow .lp-cta-microcopy {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: #78350f;
  opacity: 0.9;
}

.lp-layout-yellow .lp-apply .lp-cta-microcopy {
  color: #92400e;
}

/* Yellow: FAQ Chat - 余白2倍、吹き出し改善 */
.lp-layout-yellow .lp-faq-chat {
  background: linear-gradient(180deg, #fefce8 0%, #fef9c3 100%);
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.lp-layout-yellow .lp-faq-chat-container {
  max-width: 700px;
  margin: 0 auto;
}

.lp-layout-yellow .lp-faq-chat-pair {
  margin-bottom: 2.5rem;
}

/* アイコンを円形に、サイズ拡大 */
.lp-layout-yellow .lp-faq-chat-avatar-support,
.lp-layout-yellow .lp-faq-chat-avatar-user {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-layout-yellow .lp-faq-chat-avatar-support {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.lp-layout-yellow .lp-faq-chat-avatar-user {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.lp-layout-yellow .lp-faq-chat-avatar-support svg,
.lp-layout-yellow .lp-faq-chat-avatar-user svg {
  width: 24px;
  height: 24px;
  color: #fff;
}

/* 質問（サポート側）- 薄いグレー背景 */
.lp-layout-yellow .lp-faq-chat-bubble-support {
  background: #f3f4f6;
  border: none;
  border-radius: 24px 24px 24px 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  color: #374151;
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
}

/* 回答（ユーザー側）- ブランドカラー、大きめ・太字で解決感 */
.lp-layout-yellow .lp-faq-chat-bubble-user {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 24px 24px 4px 24px;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15);
  color: #713f12;
  padding: 1.5rem 1.75rem;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.7;
}

/* Yellow: Footer - チャコールグレー背景、オレンジボタンが映える */
.lp-layout-yellow .lp-footer {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  padding: 5rem 2rem 3rem;
}

.lp-layout-yellow .lp-footer-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.lp-layout-yellow .lp-footer-content {
  color: #fff;
  font-size: 1rem;
}

.lp-layout-yellow .lp-footer-logo {
  margin-bottom: 2rem;
}

.lp-layout-yellow .lp-footer-logo img {
  max-height: 50px;
  filter: brightness(0) invert(1);
}

.lp-layout-yellow .lp-footer p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 1rem;
}

.lp-layout-yellow .lp-footer a {
  color: #fbbf24;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.lp-layout-yellow .lp-footer a:hover {
  color: #fef08a;
}

/* フッターリンク一覧 */
.lp-layout-yellow .lp-footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 2rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-layout-yellow .lp-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.lp-layout-yellow .lp-footer-links a:hover {
  color: #fff;
}

/* フッターCTAボタン - オレンジが映える */
.lp-layout-yellow .lp-footer .lp-btn-apply-footer {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  border: none;
  font-weight: 600;
  font-size: 1.125rem;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
  margin-bottom: 1.5rem;
}

.lp-layout-yellow .lp-footer .lp-btn-apply-footer:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(245, 158, 11, 0.5);
}

.lp-layout-yellow .lp-footer .lp-btn-secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.4);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
}

.lp-layout-yellow .lp-footer .lp-btn-secondary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.lp-layout-yellow .lp-footer .lp-btn-secondary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.lp-layout-yellow .lp-footer-copyright {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  margin-top: 3rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Yellow: フッター内の要素間隔を改善 */
.lp-layout-yellow .lp-footer-cta {
  margin-bottom: 3rem;
}

.lp-layout-yellow .lp-footer-info {
  margin-bottom: 2rem;
}

.lp-layout-yellow .lp-footer-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

.lp-layout-yellow .lp-footer-tel-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.lp-layout-yellow .lp-footer-tel-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.05em;
}

/* Yellow: Details - 余白2倍、クリーンなデザイン */
.lp-layout-yellow .lp-details {
  background: #fffbeb;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.lp-layout-yellow .lp-details-table th {
  background: #f59e0b;
  color: #fff;
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
}

.lp-layout-yellow .lp-details-table td {
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  line-height: 1.7;
}

.lp-layout-yellow .lp-details-table {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  overflow: hidden;
}

/* Yellow: Jobs - カードデザイン改善、アイコン付き */
.lp-layout-yellow .lp-jobs {
  background: #fefce8;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.lp-layout-yellow .lp-jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.lp-layout-yellow .lp-job-card {
  background: #fff;
  border: none;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s, transform 0.3s;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.lp-layout-yellow .lp-job-card:hover {
  box-shadow: 0 12px 40px rgba(245, 158, 11, 0.12), 0 6px 20px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

.lp-layout-yellow .lp-job-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 1.25rem;
}

/* 求人メタ情報 - アイコン付き */
.lp-layout-yellow .lp-job-meta {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lp-layout-yellow .lp-job-salary::before {
  content: '💰 ';
}

.lp-layout-yellow .lp-job-location::before {
  content: '📍 ';
}

.lp-layout-yellow .lp-job-type::before {
  content: '🏢 ';
}

.lp-layout-yellow .lp-job-salary,
.lp-layout-yellow .lp-job-location,
.lp-layout-yellow .lp-job-type {
  font-size: 0.95rem;
  color: #4b5563;
}

.lp-layout-yellow .lp-job-salary {
  font-weight: 600;
  color: #d97706;
  font-size: 1.1rem;
}

/* 「詳細を見る」ボタン - 落ち着いた色で差別化 */
.lp-layout-yellow .lp-job-btn,
.lp-layout-yellow .lp-job-card .lp-btn-details {
  background: #f3f4f6;
  color: #4b5563;
  border: none;
  padding: 0.875rem 1.5rem;
  border-radius: 10px;
  font-weight: 500;
  margin-top: auto;
  text-align: center;
  transition: all 0.2s;
}

.lp-layout-yellow .lp-job-btn:hover,
.lp-layout-yellow .lp-job-card .lp-btn-details:hover {
  background: #e5e7eb;
  color: #374151;
}

/* Yellow: ポイントセクション - 余白2倍 */
.lp-layout-yellow .lp-points {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.lp-layout-yellow .lp-points-grid {
  gap: 2rem;
}

/* ========================================
   テンプレートデザイン: Impact（インパクト）
   黒背景の強烈なデザイン（構造のみ）
   ======================================== */

.lp-layout-impact {
  background: #000;
  color: #fff;
}

.lp-layout-impact .lp-hero {
  min-height: 90vh;
}

.lp-layout-impact .lp-hero-bg {
  background: #000;
}

.lp-layout-impact .lp-hero-overlay {
  background: none;
}

.lp-layout-impact .lp-hero-content {
  color: #fff;
}

.lp-layout-impact .lp-hero-title {
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--lp-primary);
  letter-spacing: -0.02em;
}

.lp-layout-impact .lp-hero-subtitle {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
}

.lp-layout-impact .lp-points,
.lp-layout-impact .lp-detail,
.lp-layout-impact .lp-faq,
.lp-layout-impact .lp-jobs,
.lp-layout-impact .lp-apply,
.lp-layout-impact .lp-footer {
  background: #000;
  color: #fff;
}

.lp-layout-impact .lp-section-title {
  color: var(--lp-primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.lp-layout-impact .lp-section-title::after {
  background: var(--lp-primary);
}

.lp-layout-impact .lp-point-card {
  background: #111;
  border-left: 5px solid var(--lp-primary);
  border-radius: 0;
  color: #fff;
}

.lp-layout-impact .lp-point-title {
  color: #fff;
  font-weight: 900;
  font-size: 1.5rem;
}

.lp-layout-impact .lp-point-number {
  background: var(--lp-primary);
  color: #000;
}

.lp-layout-impact .lp-detail-table th {
  background: #111;
  color: #666;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.lp-layout-impact .lp-detail-table td {
  background: #000;
  color: #fff;
  border-color: #333;
}

.lp-layout-impact .lp-faq-q {
  background: #111;
  color: var(--lp-primary);
}

.lp-layout-impact .lp-faq-a {
  background: #000;
  color: #fff;
}

.lp-layout-impact .lp-btn-apply-hero,
.lp-layout-impact .lp-btn-apply-main,
.lp-layout-impact .lp-btn-apply-footer {
  background: var(--lp-accent, var(--lp-primary));
  color: #000;
  font-weight: 900;
  font-size: 1.5rem;
  text-transform: uppercase;
  transform: skewX(-10deg);
  border-radius: 0;
  padding: 1.5rem 3rem;
}

.lp-layout-impact .lp-btn-apply-hero:hover,
.lp-layout-impact .lp-btn-apply-main:hover,
.lp-layout-impact .lp-btn-apply-footer:hover {
  background: #fff;
  transform: skewX(-10deg) scale(1.1);
}

.lp-layout-impact .lp-footer {
  background: #000;
  color: #666;
}

/* Impact: FAQ Chat */
.lp-layout-impact .lp-faq-chat {
  background: #111;
}

.lp-layout-impact .lp-faq-chat-avatar-support {
  background: var(--lp-primary, #f00);
}

.lp-layout-impact .lp-faq-chat-avatar-user {
  background: #333;
  color: #fff;
}

.lp-layout-impact .lp-faq-chat-bubble-user {
  background: #333;
  color: #fff;
}

.lp-layout-impact .lp-faq-chat-bubble-support {
  background: #222;
  color: #fff;
  border: 1px solid #444;
}

/* Impact: Details */
.lp-layout-impact .lp-details {
  background: #0a0a0a;
}

.lp-layout-impact .lp-details-table {
  background: #111;
}

.lp-layout-impact .lp-details-table th {
  background: var(--lp-primary, #f00);
  color: #fff;
}

.lp-layout-impact .lp-details-table td {
  color: #ccc;
  border-bottom: 1px solid #333;
}

/* Impact: Jobs */
.lp-layout-impact .lp-job-card {
  background: #111;
  border-left: 4px solid var(--lp-primary, #f00);
  color: #fff;
}

.lp-layout-impact .lp-job-card:hover {
  background: #1a1a1a;
}

/* ========================================
   テンプレートデザイン: Trust（信頼）
   ビジネス向けの信頼感あるデザイン（構造のみ）
   ======================================== */

.lp-layout-trust .lp-hero {
  min-height: 70vh;
  border-left: 20px solid var(--lp-primary);
}

.lp-layout-trust .lp-hero-bg {
  background: var(--lp-bg-gray, #f4f7f9);
}

.lp-layout-trust .lp-hero-overlay {
  background: none;
}

.lp-layout-trust .lp-hero-content {
  color: var(--lp-primary);
}

.lp-layout-trust .lp-hero-title {
  color: var(--lp-primary);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.lp-layout-trust .lp-hero-subtitle,
.lp-layout-trust .lp-hero-company {
  color: var(--lp-text);
  opacity: 1;
}

.lp-layout-trust .lp-section-title {
  color: var(--lp-primary);
  letter-spacing: 0.05em;
}

.lp-layout-trust .lp-section-title::after {
  background: var(--lp-primary);
}

.lp-layout-trust .lp-point-card {
  border-top: 1px solid var(--lp-primary);
  border-radius: 0;
  box-shadow: none;
  padding-top: 20px;
}

.lp-layout-trust .lp-point-number {
  background: none;
  color: var(--lp-primary);
  font-size: 0.8rem;
  font-weight: bold;
  width: auto;
  height: auto;
  padding: 0;
}

.lp-layout-trust .lp-detail-table {
  border-top: 2px solid var(--lp-primary);
}

.lp-layout-trust .lp-detail-table th {
  color: var(--lp-primary);
  font-weight: 600;
  background: #fafafa;
}

.lp-layout-trust .lp-faq-q {
  background: var(--lp-primary);
}

.lp-layout-trust .lp-apply {
  background: #fff;
  border-top: 1px solid #eee;
}

.lp-layout-trust .lp-btn-apply-hero,
.lp-layout-trust .lp-btn-apply-main,
.lp-layout-trust .lp-btn-apply-footer {
  background: var(--lp-primary);
  border-radius: 0;
  letter-spacing: 0.2em;
  font-weight: bold;
  padding: 1rem 4rem;
}

.lp-layout-trust .lp-btn-apply-hero:hover,
.lp-layout-trust .lp-btn-apply-main:hover,
.lp-layout-trust .lp-btn-apply-footer:hover {
  filter: brightness(0.85);
}

.lp-layout-trust .lp-highlight-item {
  background: var(--lp-bg-gray, #f4f7f9);
  border-color: var(--lp-primary);
}

/* Trust: FAQ Chat */
.lp-layout-trust .lp-faq-chat {
  background: #f8fafc;
}

.lp-layout-trust .lp-faq-chat-avatar-support {
  background: var(--lp-primary);
}

.lp-layout-trust .lp-faq-chat-bubble-user {
  background: #e2e8f0;
  color: #1e293b;
}

.lp-layout-trust .lp-faq-chat-bubble-support {
  background: #fff;
  border: 1px solid #e2e8f0;
}

/* Trust: Footer */
.lp-layout-trust .lp-footer {
  background: #1e293b;
}

/* Trust: Details */
.lp-layout-trust .lp-details {
  background: #f8fafc;
}

/* Trust: Jobs */
.lp-layout-trust .lp-jobs {
  background: #fff;
}

.lp-layout-trust .lp-job-card {
  border-left: 4px solid #1e40af;
  border-radius: 0;
}

/* ========================================
   テンプレートデザイン: Athome（アットホーム）
   丸みのあるフレンドリーなデザイン
   ======================================== */

.lp-layout-athome .lp-hero {
  border-radius: 0 0 100px 100px;
  overflow: hidden;
}

.lp-layout-athome .lp-hero-bg {
  background: linear-gradient(135deg, #ccfbf1 0%, #fff 100%);
}

.lp-layout-athome .lp-hero-overlay {
  background: none;
}

.lp-layout-athome .lp-hero-content {
  color: #0d9488;
}

.lp-layout-athome .lp-hero-title {
  color: #0d9488;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}

.lp-layout-athome .lp-hero-subtitle,
.lp-layout-athome .lp-hero-company {
  color: #374151;
  opacity: 1;
}

.lp-layout-athome .lp-section-title {
  color: #0d9488;
  text-align: center;
}

.lp-layout-athome .lp-section-title::after {
  left: 50%;
  transform: translateX(-50%);
}

.lp-layout-athome .lp-point-card {
  border-radius: 30px;
  border: 3px solid #ccfbf1;
  position: relative;
  padding-top: 40px;
}

.lp-layout-athome .lp-point-card::before {
  content: '★';
  position: absolute;
  top: -15px;
  left: 20px;
  background: #14b8a6;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.lp-layout-athome .lp-point-number {
  display: none;
}

.lp-layout-athome .lp-detail {
  background: #f0fdfa;
  border-radius: 40px;
}

.lp-layout-athome .lp-detail-table th {
  background: #0d9488;
  color: #fff;
  border-radius: 8px 0 0 8px;
}

.lp-layout-athome .lp-faq-item {
  border-radius: 20px;
  overflow: hidden;
}

.lp-layout-athome .lp-btn-apply-hero,
.lp-layout-athome .lp-btn-apply-main,
.lp-layout-athome .lp-btn-apply-footer {
  border-radius: 50px;
  padding: 1rem 2.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.lp-layout-athome .lp-btn-apply-hero:hover,
.lp-layout-athome .lp-btn-apply-main:hover,
.lp-layout-athome .lp-btn-apply-footer:hover {
  transform: scale(1.05);
}

/* Athome: FAQ Chat */
.lp-layout-athome .lp-faq-chat {
  background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
  border-radius: 40px;
  margin: 0 1rem;
  padding: 2rem;
}

.lp-layout-athome .lp-faq-chat-avatar-support {
  background: linear-gradient(135deg, #0d9488, #14b8a6);
}

.lp-layout-athome .lp-faq-chat-avatar-user {
  background: #99f6e4;
}

.lp-layout-athome .lp-faq-chat-bubble-user {
  background: #99f6e4;
  color: #134e4a;
  border-radius: 20px 20px 5px 20px;
}

.lp-layout-athome .lp-faq-chat-bubble-support {
  background: #fff;
  border-radius: 20px 20px 20px 5px;
}

/* Athome: Footer */
.lp-layout-athome .lp-footer {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  border-radius: 50px 50px 0 0;
}

/* Athome: Details */
.lp-layout-athome .lp-details {
  background: #f0fdfa;
  border-radius: 40px;
  margin: 1rem;
}

/* Athome: Jobs */
.lp-layout-athome .lp-jobs {
  background: #ecfdf5;
}

.lp-layout-athome .lp-job-card {
  border-radius: 20px;
  border-left: none;
  border-bottom: 4px solid #14b8a6;
}

/* ========================================
   テンプレートデザイン: Local（地域密着）
   和風モダンの落ち着いたデザイン
   ======================================== */

.lp-layout-local .lp-hero {
  min-height: 60vh;
}

.lp-layout-local .lp-hero-bg {
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3));
}

.lp-layout-local .lp-hero-content {
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.lp-layout-local .lp-hero-title {
  font-size: clamp(2rem, 5vw, 2.5rem);
  color: #fff;
}

.lp-layout-local .lp-section-title {
  text-align: center;
  color: #166534;
}

.lp-layout-local .lp-section-title span {
  display: block;
  font-size: 0.8rem;
  color: #22c55e;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}

.lp-layout-local .lp-section-title::after {
  display: none;
}

.lp-layout-local .lp-points {
  background: #f0fdf4;
}

.lp-layout-local .lp-point-card {
  background: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border-radius: 4px;
}

.lp-layout-local .lp-point-title {
  color: #16a34a;
  border-bottom: 2px solid #22c55e;
  display: inline-block;
  padding-bottom: 5px;
}

.lp-layout-local .lp-point-number {
  background: #22c55e;
}

.lp-layout-local .lp-detail-table {
  border-collapse: collapse;
}

.lp-layout-local .lp-detail-table th {
  background: #166534;
  color: #fff;
  width: 30%;
}

.lp-layout-local .lp-detail-table td {
  border-bottom: 1px solid #eee;
}

.lp-layout-local .lp-btn-apply-hero,
.lp-layout-local .lp-btn-apply-main,
.lp-layout-local .lp-btn-apply-footer {
  background: #22c55e;
  border-radius: 5px;
  padding: 1rem 3rem;
  transition: 0.3s;
}

.lp-layout-local .lp-btn-apply-hero:hover,
.lp-layout-local .lp-btn-apply-main:hover,
.lp-layout-local .lp-btn-apply-footer:hover {
  background: #16a34a;
}

.lp-layout-local .lp-faq-q {
  background: #166534;
}

/* Local: FAQ Chat */
.lp-layout-local .lp-faq-chat {
  background: #f0fdf4;
}

.lp-layout-local .lp-faq-chat-avatar-support {
  background: #22c55e;
}

.lp-layout-local .lp-faq-chat-bubble-user {
  background: #bbf7d0;
  color: #14532d;
}

.lp-layout-local .lp-faq-chat-bubble-support {
  background: #fff;
  border: 1px solid #86efac;
}

/* Local: Footer */
.lp-layout-local .lp-footer {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%);
}

.lp-layout-local .lp-btn-apply-footer {
  background: #22c55e;
}

.lp-layout-local .lp-btn-apply-footer:hover {
  background: #16a34a;
}

/* Local: Details */
.lp-layout-local .lp-details {
  background: #f0fdf4;
}

.lp-layout-local .lp-details-table th {
  background: #166534;
  color: #fff;
}

/* Local: Jobs */
.lp-layout-local .lp-jobs {
  background: #ecfdf5;
}

.lp-layout-local .lp-job-card {
  border-left: 4px solid #22c55e;
  background: #fff;
}

.lp-layout-local .lp-job-card:hover {
  border-left-color: #16a34a;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

/* Local: Apply section */
.lp-layout-local .lp-apply {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%);
}

/* ========================================
   レイアウトスタイル
   ======================================== */

/* --- デフォルト (default) --- */
.lp-layout-default .lp-section-title {
  text-align: center;
}

.lp-layout-default .lp-section-title::after {
  left: 50%;
  transform: translateX(-50%);
}

/* --- ボールド (bold) --- */
.lp-layout-bold .lp-hero-title {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.lp-layout-bold .lp-hero-subtitle {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 600;
}

.lp-layout-bold .lp-hero-overlay {
  background: rgba(0, 0, 0, 0.6);
}

.lp-layout-bold .lp-section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  text-align: center;
  letter-spacing: -0.01em;
}

.lp-layout-bold .lp-point-title {
  font-size: 1.25rem;
  font-weight: 800;
}

/* --- エレガント (elegant) --- */
.lp-layout-elegant .lp-section-title {
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.lp-layout-elegant .lp-section-title::after {
  left: 0;
  transform: none;
  width: 60px;
  height: 2px;
}

.lp-layout-elegant .lp-section-inner {
  padding: 4rem 2rem;
}

.lp-layout-elegant .lp-point-card {
  border-radius: 4px;
  border: 1px solid var(--lp-border, #e5e7eb);
  box-shadow: none;
}

.lp-layout-elegant .lp-hero-content {
  text-align: left;
  align-items: flex-start;
}

.lp-layout-elegant .lp-hero-title {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.lp-layout-elegant .lp-btn-apply-hero {
  border-radius: 4px;
}

/* --- ポップ (playful) --- */
.lp-layout-playful .lp-section-title {
  text-align: center;
}

.lp-layout-playful .lp-section-title::after {
  display: none;
}

.lp-layout-playful .lp-point-card {
  border-radius: 20px;
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.lp-layout-playful .lp-point-number {
  border-radius: 12px;
  transform: rotate(-3deg);
}

.lp-layout-playful .lp-btn-apply-hero,
.lp-layout-playful .lp-btn-apply-main {
  border-radius: 50px;
  padding: 1rem 2.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.lp-layout-playful .lp-faq-item {
  border-radius: 16px;
}

.lp-layout-playful section {
  position: relative;
}

.lp-layout-playful .lp-points::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath fill='%23f8f9fa' d='M0,60 C300,0 900,0 1200,60 L1200,60 L0,60 Z'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}

/* --- コーポレート (corporate) --- */
.lp-layout-corporate .lp-section-title {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lp-layout-corporate .lp-section-title::before {
  content: '';
  width: 4px;
  height: 1.5em;
  background: var(--lp-primary, #667eea);
  border-radius: 2px;
}

.lp-layout-corporate .lp-section-title::after {
  display: none;
}

.lp-layout-corporate .lp-point-card {
  border-radius: 0;
  box-shadow: none;
  border-left: 3px solid var(--lp-primary, #667eea);
  background: #fff;
}

.lp-layout-corporate .lp-point-number {
  width: auto;
  height: auto;
  min-width: unset;
  min-height: unset;
  background: none;
  border-radius: 0;
}

.lp-layout-corporate .lp-btn-apply-hero,
.lp-layout-corporate .lp-btn-apply-main {
  border-radius: 4px;
}

.lp-layout-corporate .lp-points {
  background: #fff;
}

.lp-layout-corporate .lp-points:nth-child(even) {
  background: #f8f9fa;
}

/* --- マガジン (magazine) --- */
.lp-layout-magazine .lp-hero {
  min-height: 100vh;
}

.lp-layout-magazine .lp-hero-content {
  max-width: 800px;
}

.lp-layout-magazine .lp-hero-title {
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1.15;
}

.lp-layout-magazine .lp-section-title {
  font-size: 2.5rem;
  text-align: left;
  margin-bottom: 2.5rem;
}

.lp-layout-magazine .lp-section-title::after {
  display: none;
}

.lp-layout-magazine .lp-section-inner {
  max-width: 1000px;
  padding: 5rem 2rem;
}

.lp-layout-magazine .lp-point-card {
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--lp-border, #e5e7eb);
  padding: 2rem 0;
  background: transparent;
}

.lp-layout-magazine .lp-point-card:last-child {
  border-bottom: none;
}

.lp-layout-magazine .lp-points-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lp-layout-magazine .lp-gallery-grid {
  gap: 4px;
}

.lp-layout-magazine .lp-gallery-item {
  border-radius: 0;
}

/* ========================================
   レスポンシブ
   ======================================== */

@media (max-width: 768px) {
  .lp-header-inner {
    padding: 0.5rem 0.75rem;
  }

  .lp-logo .logo-text {
    font-size: 1rem;
  }

  .lp-btn-apply-header,
  .lp-btn-tel-header {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }

  .lp-btn-tel-header span:last-child {
    display: none;
  }

  .lp-hero {
    min-height: 70vh;
    padding: 6rem 1rem 3rem;
  }

  .lp-hero-highlights {
    flex-direction: column;
    align-items: center;
  }

  .lp-highlight-item {
    width: 100%;
    max-width: 280px;
  }

  .lp-btn-apply-hero {
    padding: 0.875rem 2rem;
    font-size: 1.125rem;
  }

  .lp-section-inner {
    padding: 3rem 1rem;
  }

  .lp-section-title {
    font-size: 1.5rem;
  }

  .lp-points-grid,
  .lp-points-grid--custom {
    grid-template-columns: 1fr !important;
    display: grid !important;
    overflow-x: visible !important;
    flex-wrap: wrap !important;
  }

  .lp-point-card--custom {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .lp-detail-row {
    grid-template-columns: 1fr;
  }

  .lp-detail-label {
    border-right: none;
    border-bottom: 1px solid var(--lp-border);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  .lp-detail-value {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
  }

  .lp-apply-buttons {
    flex-direction: column;
    align-items: center;
  }

  .lp-btn-apply-main {
    width: 100%;
    max-width: 300px;
  }

  .lp-btn-tel-main {
    width: 100%;
    max-width: 300px;
  }

  .lp-footer-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .lp-btn-apply-footer,
  .lp-btn-tel-footer {
    width: 100%;
    max-width: 250px;
    text-align: center;
  }

  .lp-footer-links {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .lp-hero-title {
    font-size: 1.75rem;
  }

  .lp-highlight-value {
    font-size: 1.5rem;
  }

  .lp-job-info {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* 求人カードヘッダー - モバイルでは縦並びに */
  .lp-job-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
  }

  .lp-job-type {
    align-self: flex-start;
  }

  .lp-job-title {
    font-size: 1rem;
  }

  /* 求人カードフッター - ボタンを中央寄せ */
  .lp-job-card-footer {
    text-align: center;
    padding: 0.75rem 1rem;
  }

  /* 求人リスト - 横スワイプ対応 */
  .lp-jobs-list {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lp-jobs-list::-webkit-scrollbar {
    height: 4px;
  }

  .lp-jobs-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
  }

  .lp-jobs-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
  }

  .lp-job-card {
    flex: 0 0 85%;
    min-width: 280px;
    max-width: 320px;
    scroll-snap-align: start;
  }
}

/* ========================================
   編集モード
   ======================================== */

.lp-edit-mode {
  padding-top: 60px;
}

/* 編集ツールバー */
.lp-edit-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #1f2937;
  color: #fff;
  z-index: 2000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.lp-edit-toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
}

.lp-edit-toolbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lp-edit-mode-badge {
  background: var(--lp-accent);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.lp-edit-hint {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.lp-edit-toolbar-actions {
  display: flex;
  gap: 0.75rem;
}

.lp-edit-btn-cancel,
.lp-edit-btn-save,
.lp-edit-btn-preview {
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.lp-edit-btn-cancel {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.lp-edit-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lp-edit-btn-preview {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.lp-edit-btn-preview:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lp-edit-btn-save {
  background: #667eea;
  color: #fff;
}

.lp-edit-btn-save:hover {
  background: #5a6fd6;
}

.lp-edit-btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 編集可能要素 */
.lp-edit-mode .lp-editable,
.lp-edit-mode .lp-editable-btn {
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
}

.lp-edit-mode .lp-editable::before,
.lp-edit-mode .lp-editable-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px dashed rgba(99, 102, 241, 0.5);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.lp-edit-mode .lp-editable:hover::before,
.lp-edit-mode .lp-editable-btn:hover::before {
  opacity: 1;
}

.lp-edit-mode .lp-editable:hover,
.lp-edit-mode .lp-editable-btn:hover {
  background: rgba(99, 102, 241, 0.1);
}

/* 編集済みマーク */
.lp-edit-mode .lp-edited::after {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  background: #10b981;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* プレースホルダー */
.lp-edit-mode .lp-placeholder {
  opacity: 0.5;
  font-style: italic;
}

/* 編集ラベル（ツールチップ） */
.lp-edit-label {
  background: #1f2937;
  color: #fff;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  z-index: 1500;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 0.15s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* インラインエディタ */
.lp-inline-editor {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 1rem;
  z-index: 2500;
  min-width: 250px;
  max-width: 500px;
  animation: fadeInScale 0.15s ease;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lp-inline-editor-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--lp-text-light);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.lp-inline-editor-input,
.lp-inline-editor-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--lp-border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lp-inline-editor-input:focus,
.lp-inline-editor-textarea:focus {
  outline: none;
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.lp-inline-editor-textarea {
  resize: vertical;
  min-height: 80px;
}

.lp-inline-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.lp-inline-editor-cancel,
.lp-inline-editor-apply {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.lp-inline-editor-cancel {
  background: var(--lp-bg-gray);
  color: var(--lp-text);
}

.lp-inline-editor-cancel:hover {
  background: var(--lp-border);
}

.lp-inline-editor-apply {
  background: var(--lp-primary);
  color: #fff;
}

.lp-inline-editor-apply:hover {
  background: var(--lp-primary-dark);
}

.lp-inline-editor-clear {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  background: #fee2e2;
  color: #dc2626;
}

.lp-inline-editor-clear:hover {
  background: #fecaca;
}

/* 画像編集エディタ */
.lp-image-editor {
  max-width: 500px;
}

.lp-image-url-input {
  margin-bottom: 0.75rem;
}

/* 画像タブ切り替え */
.lp-image-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.lp-image-tab {
  flex: 1;
  padding: 0.5rem 1rem;
  border: 1px solid var(--lp-border);
  border-radius: 6px;
  background: var(--lp-bg-gray);
  color: var(--lp-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-image-tab:hover {
  background: var(--lp-border);
}

.lp-image-tab.active {
  background: var(--lp-primary);
  border-color: var(--lp-primary);
  color: #fff;
}

/* プリセット画像グリッド */
.lp-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 0.75rem;
  padding: 0.25rem;
}

.lp-preset-image {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s;
  background: var(--lp-bg-gray);
}

.lp-preset-image:hover {
  border-color: var(--lp-primary);
  transform: scale(1.02);
}

.lp-preset-image.selected {
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.lp-preset-image img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  display: block;
}

.lp-preset-label {
  display: block;
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  background: var(--lp-bg-gray);
  color: var(--lp-text-light);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 画像アップロードエリア */
.lp-image-upload-area {
  border: 2px dashed var(--lp-border);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--lp-bg-gray);
  margin-bottom: 0.75rem;
  position: relative;
}

.lp-image-upload-area:hover {
  border-color: var(--lp-primary);
  background: rgba(99, 102, 241, 0.05);
}

.lp-image-upload-area.drag-over {
  border-color: var(--lp-primary);
  background: rgba(99, 102, 241, 0.1);
  border-style: solid;
}

.lp-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.lp-upload-icon {
  font-size: 2rem;
}

.lp-upload-placeholder p {
  margin: 0;
  color: var(--lp-text-light);
  font-size: 0.875rem;
}

.lp-upload-hint {
  font-size: 0.75rem !important;
  color: var(--lp-text-light);
  opacity: 0.7;
}

.lp-upload-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
}

.lp-upload-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--lp-border);
  border-top-color: var(--lp-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.lp-upload-loading p {
  margin: 0;
  color: var(--lp-text-light);
  font-size: 0.875rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 画像プレビュー */
.lp-image-preview {
  margin-bottom: 0.75rem;
  border-radius: 6px;
  overflow: hidden;
  background: var(--lp-bg-gray);
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-image-preview img {
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: cover;
}

.lp-image-preview p {
  color: var(--lp-text-light);
  font-size: 0.875rem;
  margin: 0;
  padding: 1rem;
}

/* 編集可能画像のスタイル（ヒーロー背景は除外：オーバーレイの下に維持） */
.lp-edit-mode .lp-editable-image:not(.lp-hero-bg) {
  cursor: pointer;
  z-index: 5;
}

.lp-edit-mode .lp-hero-bg.lp-editable-image {
  cursor: pointer;
}

.lp-edit-mode .lp-hero-overlay {
  pointer-events: none;
}

.lp-edit-mode .lp-editable-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
}

.lp-edit-mode .lp-editable-image::after {
  content: '📷 クリックして画像を変更';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.lp-edit-mode .lp-editable-image:hover::after {
  opacity: 1;
}

.lp-editable-image.lp-edited {
  outline: 3px solid var(--lp-accent);
  outline-offset: -3px;
}

/* 編集モードでのヒーロー要素調整 */
.lp-edit-mode .lp-hero-title,
.lp-edit-mode .lp-hero-subtitle {
  display: inline-block;
}

/* ヒーローコンテンツを表示するためにz-indexを確保 */
.lp-edit-mode .lp-hero-content {
  z-index: 10;
}

/* 会社名、ハイライト、ボタン等もクリック可能に */
.lp-edit-mode .lp-hero-company,
.lp-edit-mode .lp-hero-highlights,
.lp-edit-mode .lp-hero-cta,
.lp-edit-mode .lp-hero-content .lp-editable,
.lp-edit-mode .lp-hero-content .lp-btn-apply-hero {
  pointer-events: auto;
}

/* ========================================
   セクション並び替え機能
   ======================================== */

.lp-edit-mode .lp-sortable-section {
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.lp-section-drag-handle {
  display: none;
}

.lp-edit-mode .lp-section-drag-handle {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
  background: rgba(99, 102, 241, 0.95);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  user-select: none;
}

.lp-edit-mode .lp-section-drag-handle:hover {
  background: #6366f1;
}

.lp-section-drag-icon {
  font-size: 16px;
  opacity: 0.8;
  letter-spacing: -2px;
}

.lp-edit-mode .lp-sortable-section:hover {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
}

.lp-edit-mode .lp-section-dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.7);
}

.lp-edit-mode .lp-section-dragging .lp-section-drag-handle {
  cursor: grabbing;
  background: #4f46e5;
}

/* ヒーローセクションのドラッグハンドル位置調整 */
.lp-edit-mode .lp-hero .lp-section-drag-handle {
  top: auto;
  bottom: 10px;
  left: 10px;
}

/* レスポンシブ - 編集ツールバー */
@media (max-width: 768px) {
  .lp-edit-toolbar-inner {
    flex-direction: column;
    gap: 0.75rem;
  }

  .lp-edit-hint {
    display: none;
  }

  .lp-inline-editor {
    left: 10px !important;
    right: 10px !important;
    min-width: auto;
  }

  .lp-edit-mode .lp-section-drag-handle {
    padding: 4px 8px;
    font-size: 11px;
  }

  .lp-section-label {
    display: none;
  }
}

/* ========================================
   カスタムセクション
   ======================================== */

.lp-custom {
  padding: 4rem 0;
}

.lp-custom:nth-child(even) {
  background: var(--lp-bg-gray);
}

.lp-custom-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--lp-text);
}

.lp-custom-content strong {
  font-weight: 700;
}

.lp-custom-content em {
  font-style: italic;
}

/* テキストのみバリエーション */
.lp-custom-text-only .lp-custom-content {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* 画像のみバリエーション */
.lp-custom-image-only .lp-custom-image-container {
  max-width: 800px;
  margin: 0 auto;
}

.lp-custom-image-only .lp-custom-image-container img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 分割レイアウト（テキスト左/右） */
.lp-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.lp-split-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lp-custom-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lp-text);
  margin: 0;
}

.lp-split-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.lp-image-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--lp-bg-gray);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 中央揃えバリエーション */
.lp-custom-centered {
  text-align: center;
}

.lp-custom-centered .lp-custom-content {
  max-width: 600px;
  margin: 0 auto 2rem;
}

.lp-custom-image-centered {
  max-width: 500px;
  margin: 0 auto 2rem;
}

.lp-custom-image-centered img {
  width: 100%;
  border-radius: 12px;
}

/* フルワイドバナーバリエーション */
.lp-custom-banner {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.lp-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.lp-custom-banner .lp-section-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.lp-banner-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
}

.lp-banner-content {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
}

/* ボタン共通スタイル */
.lp-custom-button-wrapper {
  margin-top: 1.5rem;
}

.lp-custom-button-wrapper.centered,
.lp-custom-button-wrapper.banner {
  text-align: center;
}

.lp-btn {
  display: inline-block;
  padding: 0.875rem 2rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
}

.lp-btn-primary {
  background: var(--lp-primary);
  color: #fff;
}

.lp-btn-primary:hover {
  background: var(--lp-primary-dark);
  transform: translateY(-2px);
}

.lp-btn-secondary {
  background: #fff;
  color: var(--lp-primary);
  border: 2px solid var(--lp-primary);
}

.lp-btn-secondary:hover {
  background: var(--lp-primary);
  color: #fff;
}

.lp-btn-accent {
  background: var(--lp-accent);
  color: #fff;
}

.lp-btn-accent:hover {
  filter: brightness(1.1);
}

/* ========================================
   ギャラリーセクション
   ======================================== */

.lp-gallery {
  background: #fff;
}

.lp-gallery:nth-child(even) {
  background: var(--lp-bg-gray);
}

/* グリッドギャラリー */
.lp-gallery-items {
  display: grid;
  gap: 1rem;
}

.lp-gallery-items.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.lp-gallery-items.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.lp-gallery-items.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.lp-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4/3;
}

.lp-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.lp-gallery-item:hover img {
  transform: scale(1.05);
}

.lp-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  padding: 2rem 1rem 1rem;
  font-size: 0.875rem;
}

/* メイソンリーギャラリー */
.lp-gallery-masonry-grid {
  column-gap: 1rem;
}

.lp-gallery-masonry-grid.cols-2 {
  column-count: 2;
}

.lp-gallery-masonry-grid.cols-3 {
  column-count: 3;
}

.lp-gallery-masonry-grid.cols-4 {
  column-count: 4;
}

.lp-gallery-masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.lp-gallery-masonry-item img {
  width: 100%;
  display: block;
  transition: transform 0.3s;
}

.lp-gallery-masonry-item:hover img {
  transform: scale(1.02);
}

/* スライダーギャラリー */
.lp-gallery-slider-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.lp-gallery-slider-track {
  display: flex;
  transition: transform 0.5s ease;
}

.lp-gallery-slide {
  flex: 0 0 100%;
  display: none;
}

.lp-gallery-slide.active {
  display: block;
}

.lp-gallery-slide img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.lp-gallery-slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  padding: 2rem 1.5rem 1.5rem;
}

.lp-gallery-slider-prev,
.lp-gallery-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--lp-text);
  transition: all 0.2s;
  z-index: 10;
}

.lp-gallery-slider-prev {
  left: 1rem;
}

.lp-gallery-slider-next {
  right: 1rem;
}

.lp-gallery-slider-prev:hover,
.lp-gallery-slider-next:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lp-gallery-slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.lp-gallery-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lp-border);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-gallery-dot.active {
  background: var(--lp-primary);
  transform: scale(1.2);
}

/* ========================================
   社員の声セクション
   ======================================== */

.lp-testimonial {
  background: var(--lp-bg-gray);
}

.lp-testimonial:nth-child(even) {
  background: #fff;
}

/* カードスタイル */
.lp-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.lp-testimonial-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
}

.lp-testimonial-quote-mark {
  font-size: 4rem;
  line-height: 1;
  color: var(--lp-primary);
  opacity: 0.2;
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-family: Georgia, serif;
}

.lp-testimonial-quote {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--lp-text);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.lp-testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lp-testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.lp-testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-testimonial-avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--lp-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
}

.lp-testimonial-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lp-testimonial-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--lp-text);
  margin: 0;
}

.lp-testimonial-role {
  font-size: 0.875rem;
  color: var(--lp-text-light);
  margin: 0;
}

.lp-testimonial-years {
  font-size: 0.75rem;
  color: var(--lp-primary);
  margin: 0;
}

/* リストスタイル */
.lp-testimonial-items {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.lp-testimonial-list-item {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.lp-testimonial-list-item.lp-testimonial-reverse {
  flex-direction: row-reverse;
}

.lp-testimonial-list-avatar {
  flex-shrink: 0;
}

.lp-testimonial-list-avatar img,
.lp-testimonial-list-avatar .lp-testimonial-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.lp-testimonial-list-content {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  flex: 1;
}

.lp-testimonial-list-header {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--lp-border);
}

/* スライダースタイル */
.lp-testimonial-slider-container {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.lp-testimonial-slider-track {
  position: relative;
}

.lp-testimonial-slide {
  display: none;
}

.lp-testimonial-slide.active {
  display: block;
}

.lp-testimonial-slide-inner {
  background: #fff;
  border-radius: 16px;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.lp-testimonial-slide .lp-testimonial-quote-mark {
  position: static;
  margin-bottom: -1.5rem;
}

.lp-testimonial-slide .lp-testimonial-author {
  justify-content: center;
}

.lp-testimonial-slider-prev,
.lp-testimonial-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--lp-text);
  transition: all 0.2s;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.lp-testimonial-slider-prev {
  left: -60px;
}

.lp-testimonial-slider-next {
  right: -60px;
}

.lp-testimonial-slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.lp-testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lp-border);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-testimonial-dot.active {
  background: var(--lp-primary);
  transform: scale(1.2);
}

/* ========================================
   新セクション レスポンシブ
   ======================================== */

@media (max-width: 768px) {
  .lp-split-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .lp-custom-text-right .lp-split-layout {
    direction: ltr;
  }

  .lp-custom-text-right .lp-split-layout > * {
    direction: ltr;
  }

  .lp-gallery-items.cols-3,
  .lp-gallery-items.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-gallery-masonry-grid.cols-3,
  .lp-gallery-masonry-grid.cols-4 {
    column-count: 2;
  }

  .lp-testimonial-list-item,
  .lp-testimonial-list-item.lp-testimonial-reverse {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .lp-testimonial-slider-prev {
    left: 0.5rem;
  }

  .lp-testimonial-slider-next {
    right: 0.5rem;
  }

  .lp-banner-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .lp-gallery-items.cols-2,
  .lp-gallery-items.cols-3,
  .lp-gallery-items.cols-4 {
    grid-template-columns: 1fr;
  }

  .lp-gallery-masonry-grid.cols-2,
  .lp-gallery-masonry-grid.cols-3,
  .lp-gallery-masonry-grid.cols-4 {
    column-count: 1;
  }

  .lp-testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   エディタサイドバー
   ============================================ */

.lp-editor-sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  width: 280px;
  height: calc(100vh - 60px);
  background: #1a1a2e;
  color: #fff;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.lp-editor-sidebar.collapsed {
  transform: translateX(-240px);
}

/* 折りたたみ時のヘッダー調整 */
.lp-editor-sidebar.collapsed .lp-sidebar-header {
  justify-content: flex-end;
  padding-right: 0.5rem;
}

.lp-editor-sidebar.collapsed .lp-sidebar-title {
  display: none;
}

.lp-editor-sidebar.collapsed .lp-sidebar-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background: #16213e;
  border-radius: 0 4px 4px 0;
  padding: 0 0.75rem;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  width: 40px;
  justify-content: center;
}

.lp-editor-sidebar.collapsed .lp-sidebar-content,
.lp-editor-sidebar.collapsed .lp-sidebar-footer {
  opacity: 0;
  pointer-events: none;
}

.lp-sidebar-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: #16213e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-sidebar-title {
  font-weight: 600;
  font-size: 1rem;
}

.lp-sidebar-toggle {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background 0.2s;
}

.lp-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lp-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.lp-sidebar-sections {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.lp-sidebar-section-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #e5e7eb;
}

.lp-sidebar-section-item:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.lp-sidebar-section-item.selected {
  background: rgba(99, 102, 241, 0.05);
  border-color: var(--lp-editor-primary, #6366f1);
}

.lp-sidebar-section-handle {
  color: #9ca3af;
  cursor: grab;
  font-size: 1rem;
}

.lp-sidebar-section-icon {
  font-size: 1.25rem;
}

.lp-sidebar-section-name {
  flex: 1;
  font-size: 0.875rem;
  color: #374151;
}

.lp-sidebar-section-actions {
  display: flex;
  gap: 0.25rem;
}

.lp-sidebar-section-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.lp-sidebar-section-btn:hover {
  opacity: 1;
}

.lp-sidebar-empty {
  text-align: center;
  color: #9ca3af;
  padding: 2rem;
  font-size: 0.875rem;
}

.lp-btn-add-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem;
  background: var(--lp-editor-primary, #6366f1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-btn-add-section:hover {
  background: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.lp-btn-add-icon {
  font-size: 1.25rem;
  font-weight: 700;
}

.lp-sidebar-footer {
  padding: 1rem;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 0.5rem;
}

.lp-sidebar-btn {
  flex: 1;
  padding: 0.75rem;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-sidebar-btn-preview {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.lp-sidebar-btn-preview:hover {
  background: #e5e7eb;
}

.lp-sidebar-btn-save {
  background: var(--lp-editor-primary, #6366f1);
  color: #fff;
}

.lp-sidebar-btn-save:hover {
  background: #4f46e5;
}

/* サイドバーセクション */
.lp-sidebar-section {
  margin-bottom: 1.5rem;
}

.lp-sidebar-section-header {
  margin-bottom: 0.75rem;
}

.lp-sidebar-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* デザインパターンセレクター */
.lp-design-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.lp-design-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.lp-design-option:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.lp-design-option.selected {
  background: rgba(99, 102, 241, 0.05);
  border-color: var(--lp-editor-primary, #6366f1);
}

.lp-design-option-colors {
  display: flex;
  gap: 3px;
}

.lp-design-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.lp-design-option-name {
  font-size: 0.6875rem;
  color: #374151;
  text-align: center;
}

/* レイアウトスタイルセレクター */
.lp-layout-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lp-layout-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.lp-layout-option:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.lp-layout-option.selected {
  background: rgba(99, 102, 241, 0.05);
  border-color: var(--lp-editor-primary, #6366f1);
}

.lp-layout-option-preview {
  width: 50px;
  height: 32px;
  background: #f3f4f6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lp-layout-preview-text {
  font-size: 0.5rem;
  color: #6b7280;
  text-align: center;
  line-height: 1.2;
  padding: 2px;
}

.lp-layout-option-name {
  flex: 1;
  font-size: 0.8125rem;
  color: #374151;
}

.lp-layout-option-check {
  color: var(--lp-editor-primary, #6366f1);
  font-size: 0.75rem;
}

.lp-design-option-check {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.625rem;
  color: var(--lp-editor-primary, #6366f1);
}

/* コンテンツエリアの調整 */
.lp-content-with-sidebar {
  margin-right: 380px;
  transition: margin-right 0.3s ease;
}

.lp-content-sidebar-collapsed {
  margin-right: 0;
}

/* ============================================
   LP編集パネル（右側タブ形式）
   採用ページエディターとデザインを統一
   ============================================ */

.lp-edit-mode {
  overflow-x: hidden;
}

.lp-editor-panel {
  --lp-editor-primary: #6366f1;
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: 100vh;
  background: #fff;
  color: #1f2937;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 20px rgba(0, 0, 0, 0.15);
  font-family: 'Noto Sans JP', sans-serif;
}

.lp-editor-panel.collapsed {
  transform: translateX(340px);
}

.lp-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.lp-editor-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: #1f2937;
}

.lp-editor-actions {
  display: flex;
  gap: 0.5rem;
}

.lp-editor-actions button {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #374151;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.lp-editor-actions button:hover {
  background: #e5e7eb;
}

/* プレビューモード切り替え */
.lp-editor-actions .preview-mode-toggle {
  display: flex;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.lp-editor-actions .btn-preview-mode {
  background: transparent;
  border: none;
  color: #6b7280;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.lp-editor-actions .btn-preview-mode:hover {
  background: #e5e7eb;
}

.lp-editor-actions .btn-preview-mode.active {
  background: #fff;
  color: #1f2937;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lp-editor-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* タブナビゲーション */
.lp-editor-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 8px;
}

.lp-editor-tabs::-webkit-scrollbar {
  display: none;
}

.lp-editor-tab {
  flex: 0 0 auto;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6b7280;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.lp-editor-tab:hover {
  color: #374151;
  background: rgba(0, 0, 0, 0.02);
}

.lp-editor-tab.active {
  color: var(--lp-editor-primary);
  border-bottom-color: var(--lp-editor-primary);
}

/* タブコンテンツ */
.lp-editor-tab-content {
  display: none;
  padding: 1rem;
  flex: 1;
  overflow-y: auto;
}

.lp-editor-tab-content.active {
  display: block;
}

/* セクションヘッダー */
.lp-editor-panel .editor-section {
  margin-bottom: 1.5rem;
}

.lp-editor-panel .editor-section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.lp-editor-panel .section-description,
.lp-editor-panel .editor-section-desc {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

/* テンプレートグリッド（採用ページエディターと統一） */
.lp-editor-panel .layout-style-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lp-editor-panel .layout-style-grid .template-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-editor-panel .layout-style-grid .template-item:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.lp-editor-panel .layout-style-grid .template-item.selected {
  border-color: var(--lp-editor-primary);
  background: rgba(99, 102, 241, 0.05);
}

.lp-editor-panel .layout-style-grid .template-item input[type="radio"] {
  display: none;
}

.lp-editor-panel .layout-style-grid .template-preview {
  width: 48px;
  height: 36px;
  border-radius: 4px;
  flex-shrink: 0;
}

.lp-editor-panel .layout-style-grid .template-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-editor-panel .layout-style-grid .template-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1f2937;
}

.lp-editor-panel .layout-style-grid .template-desc {
  font-size: 0.6875rem;
  color: #6b7280;
  line-height: 1.4;
}

.lp-editor-panel .layout-style-grid .template-industries {
  font-size: 0.625rem;
  color: #9ca3af;
  margin-top: 2px;
}

/* コンテンツ編集フォーム */
.lp-editor-panel .editor-form-group {
  margin-bottom: 0.875rem;
}

.lp-editor-panel .editor-form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 0.375rem;
}

.lp-editor-panel .editor-form-group input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #1f2937;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lp-editor-panel .editor-form-group input[type="text"]:focus {
  outline: none;
  border-color: var(--lp-editor-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.lp-editor-panel .editor-form-group input[type="text"]::placeholder {
  color: #9ca3af;
}

/* サイドバー画像アップロードエリア */
.editor-image-upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #f9fafb;
  position: relative;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-image-upload-area:hover {
  border-color: var(--lp-editor-primary, #6366f1);
  background: rgba(99, 102, 241, 0.05);
}

.editor-image-upload-area.drag-over {
  border-color: var(--lp-editor-primary, #6366f1);
  background: rgba(99, 102, 241, 0.1);
  border-style: solid;
}

.editor-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.editor-image-icon {
  font-size: 1.5rem;
}

.editor-image-text {
  font-size: 0.75rem;
  color: #6b7280;
}

.editor-image-preview {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  border-radius: 4px;
}

.editor-image-loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.editor-image-loading .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--lp-editor-primary, #6366f1);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.editor-image-clear-btn {
  margin-top: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: #dc2626;
  background: transparent;
  border: 1px solid #fecaca;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.editor-image-clear-btn:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

/* 折りたたみセクション */
.editor-section-collapsible {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.editor-section-header-collapsible {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  cursor: pointer;
  transition: background 0.2s;
}

.editor-section-header-collapsible:hover {
  background: #f3f4f6;
}

.editor-section-header-collapsible .editor-section-title {
  margin: 0;
  font-size: 0.875rem;
}

.editor-section-toggle {
  color: #6b7280;
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.editor-section-collapsible.open .editor-section-toggle {
  transform: rotate(180deg);
}

.editor-section-body {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
}

/* バリアントセレクター（LPエディタ） */
.editor-variant-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.editor-variant-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  background: #fff;
  transition: all 0.15s;
  overflow: hidden;
  text-align: center;
}
.editor-variant-card:hover {
  border-color: #a5b4fc;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12);
  transform: translateY(-1px);
}
.editor-variant-card.active {
  border-color: #6366f1;
  background: #f5f3ff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.editor-variant-card-preview {
  width: 100%;
  padding: 4px 4px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border-bottom: 1px solid #f0f0f0;
}
.editor-variant-card.active .editor-variant-card-preview {
  background: #eef2ff;
  border-bottom-color: #e0e7ff;
}
.editor-variant-card-preview svg {
  width: 100%;
  height: 32px;
  display: block;
}
.editor-variant-card-info {
  padding: 3px 4px;
  width: 100%;
}
.editor-variant-card-name {
  font-size: 0.6rem;
  font-weight: 600;
  color: #374151;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* カラー設定グリッド */
.color-settings-grid {
  display: grid;
  gap: 0.75rem;
}

.color-setting-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.color-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5563;
}

.color-label-text {
  flex: 1;
}

.color-input-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.color-picker {
  width: 36px;
  height: 36px;
  padding: 2px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.color-picker::-webkit-color-swatch {
  border-radius: 4px;
  border: none;
}

.color-text {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: monospace;
}

.btn-reset-colors {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: #6b7280;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
}

.btn-reset-colors:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* サイドバー ポイントスタイル設定 */
.sidebar-points-style {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.sidebar-style-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sidebar-style-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-style-label .style-value {
  color: #6b7280;
  font-weight: 400;
}

.sidebar-style-buttons {
  display: flex;
  gap: 0.25rem;
}

.sidebar-style-buttons .style-btn {
  flex: 1;
  padding: 0.375rem 0.5rem;
  font-size: 0.6875rem;
  color: #6b7280;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.sidebar-style-buttons .style-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.sidebar-style-buttons .style-btn.active {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}

.sidebar-style-buttons .style-btn .style-btn-icon {
  font-size: 0.875rem;
}

.sidebar-style-range {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}

.sidebar-style-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #6366f1;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s;
}

.sidebar-style-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.sidebar-style-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #6366f1;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.sidebar-color-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-color-input input[type="color"] {
  width: 32px;
  height: 32px;
  padding: 2px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
}

.sidebar-color-input input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.sidebar-color-input input[type="color"]::-webkit-color-swatch {
  border-radius: 4px;
  border: none;
}

.sidebar-color-input .color-value {
  font-size: 0.6875rem;
  color: #6b7280;
  font-family: monospace;
}

.btn-reset-style {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: #6b7280;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
}

.btn-reset-style:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* ヘルプアイコン（ツールチップ） */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: bold;
  color: #9ca3af;
  background: #f3f4f6;
  border-radius: 50%;
  cursor: help;
  position: relative;
}

.help-icon:hover {
  color: #6b7280;
  background: #e5e7eb;
}

.help-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: normal;
  white-space: nowrap;
  max-width: 200px;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.help-icon:hover::after {
  opacity: 1;
  visibility: visible;
}

/* チェックボックスラベル */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--lp-editor-primary, #6366f1);
}

/* テキストエリア */
.lp-editor-panel textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
  min-height: 60px;
}

.lp-editor-panel textarea:focus {
  outline: none;
  border-color: var(--lp-editor-primary, #6366f1);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* 4タブ対応 */
.lp-editor-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
}

.lp-editor-tab {
  flex: 1;
  padding: 0.625rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.lp-editor-tab:hover {
  color: #374151;
  background: #f9fafb;
}

.lp-editor-tab.active {
  color: var(--lp-editor-primary, #6366f1);
  border-bottom-color: var(--lp-editor-primary, #6366f1);
}

/* 保存インジケーター */
.lp-editor-save-indicator {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #6b7280;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.lp-editor-save-indicator.saving {
  color: #f59e0b;
}

.lp-editor-save-indicator.saved {
  color: #10b981;
}

.lp-editor-save-indicator.unsaved {
  color: #ef4444;
}

/* エディター内アクションボタン */
.lp-editor-panel .editor-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #4b5563;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-editor-panel .editor-action-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #1f2937;
}

.lp-editor-panel .editor-action-btn span {
  font-size: 0.875rem;
}

/* セクションヘッダー（タイトル＋ヒント/ボタン） */
.lp-editor-panel .editor-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.lp-editor-panel .editor-section-header .editor-section-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.lp-editor-panel .editor-section-hint {
  font-size: 0.6875rem;
  color: #9ca3af;
}

.lp-editor-panel .editor-add-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lp-editor-primary, #6366f1);
  color: #fff;
  border: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-editor-panel .editor-add-btn:hover {
  background: #4f46e5;
  transform: scale(1.1);
}

/* サイドバーアイテムリスト（ポイント・FAQ） */
.lp-editor-panel .sidebar-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lp-editor-panel .sidebar-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

.lp-editor-panel .sidebar-item.empty {
  opacity: 0.6;
}

.lp-editor-panel .sidebar-item.has-content {
  border-color: #d1d5db;
}

.lp-editor-panel .sidebar-item.open {
  border-color: var(--lp-editor-primary, #6366f1);
}

.lp-editor-panel .sidebar-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background 0.2s;
}

.lp-editor-panel .sidebar-item-header:hover {
  background: #f9fafb;
}

.lp-editor-panel .sidebar-item-number {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lp-editor-primary, #6366f1);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-editor-panel .sidebar-item.empty .sidebar-item-number {
  background: #9ca3af;
}

.lp-editor-panel .sidebar-item-title {
  flex: 1;
  font-size: 0.8125rem;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-editor-panel .sidebar-item.empty .sidebar-item-title {
  color: #9ca3af;
}

.lp-editor-panel .sidebar-item-toggle {
  font-size: 0.625rem;
  color: #9ca3af;
  transition: transform 0.2s;
}

.lp-editor-panel .sidebar-item.open .sidebar-item-toggle {
  transform: rotate(180deg);
}

.lp-editor-panel .sidebar-item-body {
  padding: 0 0.75rem 0.75rem;
  border-top: 1px solid #f3f4f6;
  background: #fafafa;
}

.lp-editor-panel .sidebar-item-field {
  margin-top: 0.625rem;
}

.lp-editor-panel .sidebar-item-field label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.lp-editor-panel .sidebar-item-field input[type="text"],
.lp-editor-panel .sidebar-item-field textarea {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.2s;
  resize: vertical;
}

.lp-editor-panel .sidebar-item-field input:focus,
.lp-editor-panel .sidebar-item-field textarea:focus {
  outline: none;
  border-color: var(--lp-editor-primary, #6366f1);
}

.lp-editor-panel .sidebar-item-field input::placeholder,
.lp-editor-panel .sidebar-item-field textarea::placeholder {
  color: #9ca3af;
}

.lp-editor-panel .sidebar-item-clear,
.lp-editor-panel .sidebar-item-delete {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.375rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-editor-panel .sidebar-item-clear:hover {
  background: #f3f4f6;
  color: #374151;
}

.lp-editor-panel .sidebar-item-delete:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

/* サイドバー空メッセージ */
.lp-editor-panel .sidebar-empty-message {
  padding: 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: #9ca3af;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  line-height: 1.6;
}

/* カスタムセクションリスト（採用ページ形式） */
.lp-editor-panel .custom-sections-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.lp-editor-panel .custom-section-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.lp-editor-panel .section-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.lp-editor-panel .section-drag-handle {
  display: flex;
  width: 24px;
  height: 24px;
  background: #e5e7eb;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  cursor: grab;
  font-size: 0.75rem;
  color: #6b7280;
}

.lp-editor-panel .section-type-badge {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
}

.lp-editor-panel .section-item-actions {
  display: flex;
  gap: 0.25rem;
}

.lp-editor-panel .section-item-actions button {
  width: 24px;
  height: 24px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-editor-panel .section-item-actions button:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.lp-editor-panel .section-item-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lp-editor-panel .btn-remove-section:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.lp-editor-panel .section-item-content {
  padding: 0.75rem;
}

.lp-editor-panel .section-field {
  margin-bottom: 0.625rem;
}

.lp-editor-panel .section-field:last-child {
  margin-bottom: 0;
}

.lp-editor-panel .section-field label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.lp-editor-panel .section-field-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.2s;
  resize: vertical;
}

.lp-editor-panel .section-field-input:focus {
  outline: none;
  border-color: var(--lp-editor-primary, #6366f1);
}

.lp-editor-panel .section-field-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

.lp-editor-panel .section-image-preview {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

/* サムネイル付き横並びレイアウト */
.lp-editor-panel .inline-list-item-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lp-editor-panel .inline-image-thumb {
  width: 64px;
  height: 48px;
  min-width: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}

.lp-editor-panel .inline-image-thumb-empty {
  width: 64px;
  height: 48px;
  min-width: 64px;
  border-radius: 4px;
  border: 1px dashed #d1d5db;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #9ca3af;
}

.lp-editor-panel .inline-list-item-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* コンテンツ追加ボタン */
.lp-editor-panel .add-section-buttons {
  margin-top: 0.5rem;
}

.lp-editor-panel .btn-open-template-selector {
  width: 100%;
  padding: 0.625rem 1rem;
  background: #fff;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-editor-panel .btn-open-template-selector:hover {
  background: #f9fafb;
  border-color: var(--lp-editor-primary, #6366f1);
  color: var(--lp-editor-primary, #6366f1);
}

/* セクション説明文 */
.lp-editor-panel .section-description {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

/* デザインパターングリッド（カラーテーマ） */
.lp-editor-panel .design-pattern-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.lp-editor-panel .design-pattern-grid .lp-design-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-editor-panel .design-pattern-grid .lp-design-option:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.lp-editor-panel .design-pattern-grid .lp-design-option.selected {
  border-color: var(--lp-editor-primary);
  background: rgba(99, 102, 241, 0.05);
}

.lp-editor-panel .design-pattern-grid .lp-design-option-colors {
  display: flex;
  gap: 4px;
}

.lp-editor-panel .design-pattern-grid .lp-design-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.lp-editor-panel .design-pattern-grid .lp-design-option-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
}

.lp-editor-panel .design-pattern-grid .lp-design-option-check {
  color: var(--lp-editor-primary);
  font-weight: 600;
  font-size: 0.875rem;
}

/* フッター */
.lp-editor-footer {
  padding: 1rem 1.25rem;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.btn-save-lp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--lp-editor-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-save-lp:hover {
  background: #4f46e5;
}

.btn-save-lp:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .lp-editor-panel {
    width: 100%;
    height: 50vh;
    top: auto;
    bottom: 0;
    border-radius: 16px 16px 0 0;
  }

  .lp-content-with-sidebar {
    margin-right: 0;
  }
}

/* セクション追加パネル */
.lp-add-section-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  z-index: 1100;
  overflow: hidden;
}

.lp-add-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  color: #1f2937;
  font-weight: 600;
}

.lp-add-section-close {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.lp-add-section-close:hover {
  background: #e5e7eb;
  color: #1f2937;
}

.lp-add-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 1.25rem;
  max-height: 60vh;
  overflow-y: auto;
}

.lp-add-section-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: #374151;
}

.lp-add-section-card:hover {
  border-color: var(--lp-editor-primary, #6366f1);
  background: rgba(99, 102, 241, 0.05);
}

.lp-add-section-icon {
  font-size: 2rem;
}

.lp-add-section-name {
  font-size: 0.75rem;
  color: #374151;
  text-align: center;
}

/* セクション選択状態 */
.lp-section-selected {
  outline: 3px solid var(--lp-editor-primary, #6366f1);
  outline-offset: -3px;
  position: relative;
}

/* フローティングアクションメニュー */
.lp-section-action-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 0.25rem;
  background: #fff;
  padding: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border: 1px solid #e5e7eb;
  z-index: 100;
}

.lp-action-btn {
  background: #f3f4f6;
  border: none;
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
}

.lp-action-btn:hover {
  background: #e5e7eb;
  transform: scale(1.1);
}

.lp-action-delete:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* モバイル対応 */
@media (max-width: 768px) {
  .lp-editor-sidebar {
    width: 100%;
    height: auto;
    max-height: 50vh;
    top: auto;
    bottom: 0;
    transform: translateY(0);
    border-radius: 20px 20px 0 0;
  }

  .lp-editor-sidebar.collapsed {
    transform: translateY(calc(100% - 50px));
  }

  .lp-content-with-sidebar {
    margin-left: 0;
    margin-bottom: 50vh;
  }

  .lp-content-sidebar-collapsed {
    margin-left: 0;
    margin-bottom: 50px;
  }

  .lp-sidebar-toggle-icon {
    transform: rotate(90deg);
  }

  .lp-editor-sidebar.collapsed .lp-sidebar-toggle-icon {
    transform: rotate(-90deg);
  }

  .lp-add-section-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-section-action-menu {
    top: 5px;
    right: 5px;
    padding: 0.35rem;
  }

  .lp-action-btn {
    padding: 0.35rem;
    font-size: 0.875rem;
  }
}

/* ============================================
   保存モーダル
   ============================================ */

.lp-save-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}

.lp-save-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.lp-save-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #1a1a2e;
  color: #fff;
}

.lp-save-modal-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.lp-save-modal-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.lp-save-modal-close:hover {
  opacity: 1;
}

.lp-save-modal-body {
  padding: 1.5rem;
}

.lp-save-modal-message {
  margin: 0 0 1rem;
  color: #374151;
  line-height: 1.6;
}

.lp-save-modal-changes {
  background: #f3f4f6;
  border-radius: 8px;
  padding: 1rem;
}

.lp-save-modal-hint {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.lp-save-modal-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: #374151;
}

.lp-save-modal-list li {
  margin-bottom: 0.25rem;
}

.lp-save-modal-list li:last-child {
  margin-bottom: 0;
}

.lp-save-modal-empty {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem;
}

.lp-save-modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.lp-save-modal-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s;
}

.lp-save-modal-btn-secondary {
  background: #e5e7eb;
  color: #374151;
}

.lp-save-modal-btn-secondary:hover {
  background: #d1d5db;
}

.lp-save-modal-btn-primary {
  background: #8b5cf6;
  color: #fff;
}

.lp-save-modal-btn-primary:hover {
  background: #7c3aed;
}

.lp-save-modal-btn-primary:disabled {
  background: #c4b5fd;
  cursor: not-allowed;
}

/* 保存成功トースト */
.lp-save-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: #10b981;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
  z-index: 100000;
  animation: lp-toast-slide-in 0.3s ease;
}

.lp-save-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 14px;
}

.lp-save-toast-message {
  font-size: 0.9375rem;
  font-weight: 500;
}

.lp-save-toast-hide {
  animation: lp-toast-slide-out 0.3s ease forwards;
}

@keyframes lp-toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes lp-toast-slide-out {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

/* ============================================
   レイアウト固有のセクションスタイル（BEM修飾子）
   ============================================ */

/* イエローレイアウト - ヒーロー */
.lp-hero--yellow {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
  text-align: center;
  padding: 6rem 1.5rem 4rem;
  position: relative;
  overflow: hidden;
  min-height: 80vh;
}

.lp-hero--yellow .lp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* 背景画像がある場合のみオーバーレイを表示 */
.lp-hero--yellow .lp-hero-bg[style*="background-image"]:not([style*="url('')"]) + .lp-hero-overlay {
  background: rgba(0, 0, 0, 0.3);
}

.lp-hero--yellow .lp-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lp-hero--yellow::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 2;
}

.lp-hero--yellow .lp-hero-content {
  position: relative;
  z-index: 3;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-hero--yellow .lp-hero-pretitle {
  font-size: 1.125rem;
  color: #fff;
  margin-bottom: 0.75rem;
  font-weight: 600;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.lp-hero--yellow .lp-hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.75rem;
  line-height: 1.3;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

.lp-hero--yellow .lp-hero-company {
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

/* ハイライト（特典情報） */
.lp-hero--yellow .lp-hero-highlights {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.lp-hero--yellow .lp-highlight-item {
  background: rgba(255, 255, 255, 0.95);
  padding: 1rem 1.5rem;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.lp-hero--yellow .lp-highlight-label {
  display: block;
  font-size: 0.75rem;
  color: #92400e;
  margin-bottom: 0.25rem;
}

.lp-hero--yellow .lp-highlight-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #d97706;
}

/* CTAボタン */
.lp-hero--yellow .lp-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-hero--yellow .lp-btn-apply-hero {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  font-size: 1.25rem;
  padding: 1.25rem 3rem;
  border-radius: 50px;
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.4);
  transition: all 0.3s;
}

.lp-hero--yellow .lp-btn-apply-hero:hover {
  transform: scale(1.05);
  box-shadow: 0 16px 40px rgba(245, 158, 11, 0.5);
}

.lp-hero--yellow .lp-cta-microcopy {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.lp-hero--yellow .lp-hero-image-container {
  max-width: 400px;
  margin: 0 auto;
}

.lp-hero--yellow .lp-hero-image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(120, 53, 15, 0.2);
}

/* インパクトレイアウト - ヒーロー */
.lp-hero--impact {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), #0f172a;
  background-size: cover;
  background-position: center;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
}

.lp-hero--impact .lp-hero-content {
  max-width: 900px;
}

.lp-hero--impact .lp-hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
  margin-bottom: 1rem;
}

.lp-hero--impact .lp-hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto;
  font-style: italic;
}

/* 信頼レイアウト - ヒーロー */
.lp-hero--trust {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 3rem 2rem;
  text-align: left;
  min-height: auto;
}

.lp-hero--trust .lp-hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding-left: 2rem;
  border-left: 4px solid #3b82f6;
}

.lp-hero--trust .lp-hero-pretitle {
  font-size: 0.875rem;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.lp-hero--trust .lp-hero-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.4;
  margin-bottom: 1rem;
  text-shadow: none;
}

.lp-hero--trust .lp-hero-subtitle {
  font-size: 1rem;
  color: #64748b;
}

/* アットホームレイアウト - ヒーロー */
.lp-hero--athome {
  background: linear-gradient(180deg, #fef3c7 0%, #fff7ed 50%, #fff 100%);
  padding: 3rem 1.5rem;
  text-align: center;
  min-height: auto;
}

.lp-hero--athome .lp-hero-content {
  max-width: 600px;
  margin: 0 auto;
}

.lp-hero--athome .lp-hero-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ea580c;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  text-shadow: none;
}

.lp-hero--athome .lp-hero-subtitle {
  font-size: 1rem;
  color: #78350f;
  background: #fef3c7;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

.lp-hero--athome .lp-hero-image-container {
  max-width: 350px;
  margin: 0 auto;
}

.lp-hero--athome .lp-hero-image {
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 10px 30px rgba(234, 88, 12, 0.2);
}

/* 地域密着レイアウト - ヒーロー */
.lp-hero--local {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #4ade80;
  background-size: cover;
  background-position: center;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
}

.lp-hero--local .lp-hero-content {
  max-width: 700px;
}

.lp-hero--local .lp-hero-title {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 1rem;
}

.lp-hero--local .lp-hero-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.95);
}

/* イエローレイアウト - ポイントセクション */
.lp-points--yellow {
  background: #fff;
  padding: 3rem 1.5rem;
}

.lp-points--yellow .lp-section-title {
  text-align: center;
  font-size: 1.5rem;
  color: #78350f;
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
  width: 100%;
}

.lp-points--yellow .lp-section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: #fbbf24;
  margin: 0.75rem auto 0;
  border-radius: 2px;
}

.lp-points--yellow .lp-points-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.lp-points--yellow .lp-point-card {
  background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 100%);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
  border: none;
  box-shadow: 0 2px 8px rgba(120, 53, 15, 0.08);
}

.lp-points--yellow .lp-point-number {
  background: #fbbf24;
  color: #78350f;
  font-weight: 900;
  font-size: 1.25rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-points--yellow .lp-point-content {
  flex: 1;
}

.lp-points--yellow .lp-point-title {
  font-size: 1rem;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 0.25rem;
}

.lp-points--yellow .lp-point-description {
  font-size: 0.875rem;
  color: #92400e;
  line-height: 1.5;
}

/* インパクトレイアウト - ポイントセクション */
.lp-points--impact {
  background: #0f172a;
  padding: 4rem 2rem;
}

.lp-points--impact .lp-section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lp-points--impact .lp-section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  margin: 1rem auto 0;
  border-radius: 2px;
}

.lp-points--impact .lp-points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.lp-points--impact .lp-point-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.lp-points--impact .lp-point-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(139, 92, 246, 0.2);
}

.lp-points--impact .lp-point-number {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  font-weight: 900;
  font-size: 1.5rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
}

.lp-points--impact .lp-point-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.lp-points--impact .lp-point-description {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* 信頼レイアウト - ポイントセクション */
.lp-points--trust {
  background: #fff;
  padding: 3rem 2rem;
}

.lp-points--trust .lp-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2rem;
  padding-left: 1rem;
  border-left: 4px solid #3b82f6;
}

.lp-points--trust .lp-points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.lp-points--trust .lp-point-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
}

.lp-points--trust .lp-point-number {
  background: #3b82f6;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-points--trust .lp-point-content {
  flex: 1;
}

.lp-points--trust .lp-point-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.lp-points--trust .lp-point-description {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.6;
}

/* アットホームレイアウト - ポイントセクション */
.lp-points--athome {
  background: linear-gradient(180deg, #fff 0%, #fff7ed 100%);
  padding: 3rem 1.5rem;
}

.lp-points--athome .lp-section-title {
  text-align: center;
  font-size: 1.5rem;
  color: #ea580c;
  margin-bottom: 2rem;
}

.lp-points--athome .lp-section-title::after {
  content: '♪';
  display: block;
  font-size: 1.25rem;
  margin-top: 0.5rem;
  color: #fb923c;
}

.lp-points--athome .lp-points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  max-width: 800px;
  margin: 0 auto;
}

.lp-points--athome .lp-point-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.1);
  border: 2px solid #fed7aa;
  position: relative;
  overflow: hidden;
}

.lp-points--athome .lp-point-card::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #fed7aa 0%, transparent 50%);
  border-radius: 50%;
}

.lp-points--athome .lp-point-number {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  color: #fff;
  font-weight: 900;
  font-size: 1.25rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  position: relative;
  z-index: 1;
}

.lp-points--athome .lp-point-title {
  font-size: 1rem;
  font-weight: 700;
  color: #ea580c;
  margin-bottom: 0.5rem;
}

.lp-points--athome .lp-point-description {
  font-size: 0.875rem;
  color: #78350f;
  line-height: 1.6;
}

/* 地域密着レイアウト - ポイントセクション */
.lp-points--local {
  background: #f0fdf4;
  padding: 3rem 1.5rem;
}

.lp-points--local .lp-section-title {
  text-align: center;
  font-size: 1.5rem;
  color: #166534;
  margin-bottom: 2rem;
}

.lp-points--local .lp-section-title span {
  background: linear-gradient(transparent 60%, #bbf7d0 60%);
  padding: 0 0.5rem;
}

.lp-points--local .lp-points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.lp-points--local .lp-point-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
  border-left: 4px solid #22c55e;
  box-shadow: 0 2px 8px rgba(22, 101, 52, 0.08);
}

.lp-points--local .lp-point-number {
  background: #22c55e;
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-points--local .lp-point-content {
  flex: 1;
}

.lp-points--local .lp-point-title {
  font-size: 1rem;
  font-weight: 700;
  color: #166534;
  margin-bottom: 0.25rem;
}

.lp-points--local .lp-point-description {
  font-size: 0.875rem;
  color: #15803d;
  line-height: 1.5;
}

/* 地域密着レイアウト - FAQチャット */
.lp-faq-chat--local {
  background: #f0fdf4;
  padding: 2rem 1.5rem;
}

.lp-faq-chat--local .lp-faq-chat-avatar-support {
  background: #22c55e;
}

.lp-faq-chat--local .lp-faq-chat-bubble-user {
  background: #bbf7d0;
  color: #14532d;
}

.lp-faq-chat--local .lp-faq-chat-bubble-support {
  background: #fff;
  border: 1px solid #86efac;
}

/* 地域密着レイアウト - 募集要項 */
.lp-details--local {
  background: #f0fdf4;
  padding: 2rem 1.5rem;
}

.lp-details--local .lp-details-table th {
  background: #16a34a;
  color: #fff;
}

.lp-details--local .lp-details-table td {
  border-bottom: 1px solid #bbf7d0;
}

/* 地域密着レイアウト - 求人一覧 */
.lp-jobs--local {
  background: #ecfdf5;
  padding: 2rem 1.5rem;
}

.lp-jobs--local .lp-job-card {
  border-left: 4px solid #22c55e;
  background: #fff;
}

.lp-jobs--local .lp-job-card:hover {
  border-left-color: #16a34a;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

/* 地域密着レイアウト - フッター */
.lp-footer--local {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%);
}

.lp-footer--local .lp-btn-apply-footer {
  background: #22c55e;
}

.lp-footer--local .lp-btn-apply-footer:hover {
  background: #16a34a;
}

/* 地域密着レイアウト - 応募セクション */
.lp-apply--local {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%);
}

.lp-apply--local .lp-btn-apply-main {
  background: #22c55e;
  color: #fff;
}

.lp-apply--local .lp-btn-apply-main:hover {
  background: #16a34a;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .lp-hero--yellow .lp-hero-title,
  .lp-hero--athome .lp-hero-title {
    font-size: 1.5rem;
  }
  
  .lp-hero--impact .lp-hero-title {
    font-size: 2rem;
  }
  
  .lp-hero--trust .lp-hero-content {
    padding-left: 1rem;
  }
  
  .lp-hero--local .lp-hero-title {
    font-size: 1.5rem;
  }
  
  .lp-points--impact .lp-points-grid,
  .lp-points--trust .lp-points-grid,
  .lp-points--athome .lp-points-grid,
  .lp-points--local .lp-points-grid {
    grid-template-columns: 1fr;
  }

  /* Yellow: モバイル応募セクション - 余白調整 */
  .lp-layout-yellow .lp-apply {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lp-layout-yellow .lp-apply-methods {
    gap: 2rem;
    margin-top: 2rem;
  }

  .lp-layout-yellow .lp-apply-method {
    padding: 2rem 1.5rem;
  }

  .lp-layout-yellow .lp-apply-method h3 {
    font-size: 1.25rem;
  }

  .lp-layout-yellow .lp-btn-tel-main {
    padding: 1rem 2rem;
    font-size: 1.25rem;
  }

  .lp-layout-yellow .lp-btn-tel-main svg {
    width: 24px;
    height: 24px;
  }

  .lp-layout-yellow .lp-apply-note {
    margin-top: 2rem;
    padding: 0 1rem;
  }

  /* Yellow: モバイルフッター - 余白調整 */
  .lp-layout-yellow .lp-footer {
    padding: 4rem 1.5rem 3rem;
  }

  .lp-layout-yellow .lp-footer-tel {
    padding: 1.5rem;
  }

  .lp-layout-yellow .lp-footer-tel-number {
    font-size: 1.5rem;
  }

  .lp-layout-yellow .lp-footer-copyright {
    margin-top: 2rem;
    padding-bottom: 1.5rem;
  }
}

/* ============================================
   ポイントセクション編集エディタ
   ============================================ */

.lp-points-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}

.lp-points-editor {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.lp-points-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

.lp-points-editor-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.lp-points-editor-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border-radius: 6px;
  transition: background 0.2s;
}

.lp-points-editor-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lp-points-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.lp-points-editor-hint {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: #64748b;
  background: #f8fafc;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border-left: 3px solid #6366f1;
}

.lp-points-editor-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lp-point-editor-item {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.2s;
}

.lp-point-editor-item.has-content {
  border-color: #6366f1;
  background: #faf5ff;
}

.lp-point-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.lp-point-editor-number {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6366f1;
}

.lp-point-editor-clear {
  background: none;
  border: 1px solid #e2e8f0;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: #64748b;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-point-editor-clear:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

.lp-point-editor-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lp-point-editor-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lp-point-editor-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lp-point-editor-title,
.lp-point-editor-desc {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}

.lp-point-editor-title:focus,
.lp-point-editor-desc:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.lp-point-editor-desc {
  resize: vertical;
  min-height: 60px;
}

.lp-points-editor-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.lp-points-editor-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.lp-points-editor-btn-secondary {
  background: #fff;
  color: #475569;
  border: 1px solid #d1d5db;
}

.lp-points-editor-btn-secondary:hover {
  background: #f1f5f9;
}

.lp-points-editor-btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

.lp-points-editor-btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* モバイル対応 */
@media (max-width: 640px) {
  .lp-points-editor {
    max-height: 95vh;
    border-radius: 12px 12px 0 0;
    margin-top: auto;
  }

  .lp-points-editor-body {
    padding: 1rem;
  }

  .lp-point-editor-item {
    padding: 0.75rem;
  }
}

/* FAQエディタ */
.lp-faq-editor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}

.lp-faq-editor {
  background: #fff;
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.lp-faq-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.lp-faq-editor-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111;
}

.lp-faq-editor-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.lp-faq-editor-close:hover {
  color: #111;
}

.lp-faq-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.lp-faq-editor-hint {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: #f0f9ff;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #0369a1;
}

.lp-faq-editor-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lp-faq-editor-item {
  padding: 1rem;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}

.lp-faq-editor-item.has-content {
  background: #fff;
  border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.lp-faq-editor-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.lp-faq-editor-number {
  font-weight: 600;
  color: #6366f1;
  font-size: 0.875rem;
}

.lp-faq-editor-delete {
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.lp-faq-editor-delete:hover {
  background: #fee2e2;
  color: #dc2626;
}

.lp-faq-editor-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lp-faq-editor-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.lp-faq-editor-field label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}

.lp-faq-editor-question,
.lp-faq-editor-answer {
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9375rem;
  transition: all 0.2s;
  font-family: inherit;
}

.lp-faq-editor-question:focus,
.lp-faq-editor-answer:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.lp-faq-editor-add-btn {
  width: 100%;
  margin-top: 1rem;
  padding: 0.75rem;
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  color: #6b7280;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-faq-editor-add-btn:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
  color: #374151;
}

.lp-faq-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.lp-faq-editor-btn {
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-faq-editor-btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.lp-faq-editor-btn-secondary:hover {
  background: #e5e7eb;
}

.lp-faq-editor-btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

.lp-faq-editor-btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* モバイル対応 */
@media (max-width: 640px) {
  .lp-faq-editor {
    max-height: 95vh;
    border-radius: 12px 12px 0 0;
    margin-top: auto;
  }

  .lp-faq-editor-body {
    padding: 1rem;
  }

  .lp-faq-editor-item {
    padding: 0.75rem;
  }
}

/* セクションクイック編集ボタン */
.lp-section-quick-edit-btn {
  display: none;
  margin: 1.5rem auto 0;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.lp-edit-mode .lp-section-quick-edit-btn {
  display: block;
}

.lp-section-quick-edit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.lp-section-quick-edit-btn:active {
  transform: translateY(0);
}

/* プレビューモードバナー */
.lp-preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.lp-preview-banner button {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.lp-preview-banner button:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* プレビューモード時のbodyにpadding-topを追加 */
body:has(.lp-preview-banner) {
  padding-top: 50px;
}

body:has(.lp-preview-banner) .lp-header {
  top: 50px;
}

/* ============================================
   2025年版 テンプレートデザイン改善
   ガイドラインに基づく大幅アップデート
   ============================================ */

/* ----------------------------------------
   1. 信頼・ビジネス系 (Trust / Corporate / Default)
   ターゲット: 正社員、エンジニア、営業職
   配色: ネイビー/ブルー + グリーンorオレンジアクセント
   ---------------------------------------- */

/* Trust: カラーパレット改善 */
.lp-layout-trust {
  --trust-primary: #1e3a8a;
  --trust-secondary: #3b82f6;
  --trust-accent: #059669;
  --trust-bg: #f8fafc;
  --trust-text: #1e293b;
}

.lp-layout-trust .lp-hero {
  background: linear-gradient(135deg, var(--trust-bg) 0%, #e0f2fe 100%);
  border-left: 6px solid var(--trust-primary);
}

.lp-layout-trust .lp-hero-title {
  color: var(--trust-primary);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Trust: 数字を大きく太字に（給与、時間） */
.lp-layout-trust .lp-highlight-value,
.lp-layout-trust .lp-job-salary {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--trust-primary);
}

.lp-layout-trust .lp-job-salary::before {
  content: '¥ ';
  font-size: 1rem;
  color: var(--trust-accent);
}

/* Trust: 福利厚生アイコン */
.lp-layout-trust .lp-point-card {
  border: none;
  border-left: 4px solid var(--trust-accent);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.5rem 2rem;
}

.lp-layout-trust .lp-point-number {
  background: var(--trust-primary);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Trust: CTAボタン - アクセントカラー */
.lp-layout-trust .lp-btn-apply-hero,
.lp-layout-trust .lp-btn-apply-main {
  background: var(--trust-accent);
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.lp-layout-trust .lp-btn-apply-hero:hover,
.lp-layout-trust .lp-btn-apply-main:hover {
  background: #047857;
}

/* Corporate: より厳格なビジネス感 */
.lp-layout-corporate {
  --corp-primary: #0f172a;
  --corp-secondary: #334155;
  --corp-accent: #ea580c;
  --corp-bg: #fff;
}

.lp-layout-corporate .lp-hero {
  background: var(--corp-bg);
  min-height: 60vh;
}

.lp-layout-corporate .lp-hero-bg {
  opacity: 0.1;
}

.lp-layout-corporate .lp-hero-title {
  color: var(--corp-primary);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
}

.lp-layout-corporate .lp-section-title {
  color: var(--corp-primary);
  font-weight: 700;
  text-align: left;
  padding-left: 1rem;
  border-left: 4px solid var(--corp-accent);
}

.lp-layout-corporate .lp-section-title::after {
  display: none;
}

/* Corporate: 数字強調 */
.lp-layout-corporate .lp-highlight-value,
.lp-layout-corporate .lp-job-salary {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--corp-primary);
}

.lp-layout-corporate .lp-btn-apply-hero,
.lp-layout-corporate .lp-btn-apply-main {
  background: var(--corp-accent);
  border-radius: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ----------------------------------------
   2. 親しみ・地域密着系 (Athome / Local)
   ターゲット: パート、主婦、介護、地域店舗
   配色: 暖色系、パステル、紙テクスチャ感
   ---------------------------------------- */

/* Athome: 暖かみのある配色 */
.lp-layout-athome {
  --athome-primary: #0d9488;
  --athome-secondary: #14b8a6;
  --athome-warm: #fef3c7;
  --athome-text: #374151;
}

.lp-layout-athome .lp-hero {
  background: linear-gradient(180deg, #ecfdf5 0%, #fff 100%);
  border-radius: 0 0 60px 60px;
}

.lp-layout-athome .lp-hero-title {
  color: var(--athome-primary);
  font-weight: 700;
}

/* Athome: 手書き風あしらい、丸み */
.lp-layout-athome .lp-point-card {
  background: #fff;
  border: 2px dashed #99f6e4;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.1);
}

.lp-layout-athome .lp-section-title::after {
  background: linear-gradient(90deg, var(--athome-primary), var(--athome-secondary));
  border-radius: 2px;
}

/* Athome: 生活に寄り添うコピー用 */
.lp-layout-athome .lp-hero-pretitle {
  background: var(--athome-warm);
  color: #92400e;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  display: inline-block;
}

.lp-layout-athome .lp-cta-microcopy {
  color: var(--athome-primary);
  font-weight: 500;
}

/* Local: 和風モダン、落ち着き */
.lp-layout-local {
  --local-primary: #166534;
  --local-secondary: #22c55e;
  --local-earth: #f5f5dc;
  --local-text: #1f2937;
}

.lp-layout-local .lp-hero {
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
}

.lp-layout-local .lp-hero-title {
  color: var(--local-primary);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Local: 創業○年バッジ風 */
.lp-layout-local .lp-hero-company {
  background: var(--local-primary);
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
}

.lp-layout-local .lp-point-card {
  background: #fff;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.lp-layout-local .lp-section-title {
  color: var(--local-primary);
}

.lp-layout-local .lp-btn-apply-hero,
.lp-layout-local .lp-btn-apply-main {
  background: var(--local-primary);
  border-radius: 8px;
}

/* ----------------------------------------
   3. インパクト・力強さ系 (Bold / Impact)
   ターゲット: 高収入、ドライバー、建築現場
   配色: 黒×黄、黒×ゴールド、高コントラスト
   ---------------------------------------- */

/* Impact: ダーク＆ネオン */
.lp-layout-impact {
  --impact-bg: #0a0a0a;
  --impact-primary: #facc15;
  --impact-secondary: #fbbf24;
  --impact-neon: #22d3ee;
}

.lp-layout-impact body,
.lp-layout-impact .lp-hero {
  background: var(--impact-bg);
}

.lp-layout-impact .lp-hero-title {
  color: #fff;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 900;
  text-shadow: 0 0 40px rgba(250, 204, 21, 0.5);
  letter-spacing: -0.02em;
}

/* Impact: 金額を超巨大に */
.lp-layout-impact .lp-highlight-value,
.lp-layout-impact .lp-job-salary {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--impact-primary);
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
}

.lp-layout-impact .lp-highlight-item {
  background: rgba(250, 204, 21, 0.1);
  border: 2px solid var(--impact-primary);
  border-radius: 0;
}

/* Impact: 斜めボタン */
.lp-layout-impact .lp-btn-apply-hero,
.lp-layout-impact .lp-btn-apply-main {
  background: linear-gradient(135deg, var(--impact-primary), var(--impact-secondary));
  color: #000;
  font-weight: 900;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0;
  transform: skewX(-5deg);
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.5);
}

.lp-layout-impact .lp-btn-apply-hero:hover,
.lp-layout-impact .lp-btn-apply-main:hover {
  transform: skewX(-5deg) scale(1.05);
}

.lp-layout-impact .lp-section-title {
  color: #fff;
  font-weight: 800;
}

.lp-layout-impact .lp-section-title::after {
  background: var(--impact-primary);
}

.lp-layout-impact .lp-point-card {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 0;
  color: #fff;
}

.lp-layout-impact .lp-point-title {
  color: var(--impact-primary);
}

.lp-layout-impact .lp-footer {
  background: #000;
}

/* Impact: 求人カード詳細テキスト */
.lp-layout-impact .lp-jobs {
  background: #0a0a0a;
}

.lp-layout-impact .lp-job-card {
  background: #111;
  border: 1px solid #333;
  color: #fff;
}

.lp-layout-impact .lp-job-title {
  color: #fff;
}

.lp-layout-impact .lp-job-card-header {
  background: #1a1a1a;
  border-bottom: 2px solid var(--impact-primary, #facc15);
}

.lp-layout-impact .lp-job-card-body {
  background: #111;
}

.lp-layout-impact .lp-job-card-footer {
  background: #111;
  border-top: 1px solid #333;
}

.lp-layout-impact .lp-job-type {
  background: var(--impact-primary, #facc15);
  color: #000;
}

.lp-layout-impact .lp-job-info li {
  color: #ccc;
}

.lp-layout-impact .lp-info-icon {
  color: var(--impact-primary, #facc15);
}

.lp-layout-impact .lp-btn-detail {
  background: transparent;
  border: 2px solid var(--impact-primary, #facc15);
  color: var(--impact-primary, #facc15);
}

.lp-layout-impact .lp-btn-detail:hover {
  background: var(--impact-primary, #facc15);
  color: #000;
}

.lp-layout-impact .lp-job-location,
.lp-layout-impact .lp-job-employment,
.lp-layout-impact .lp-job-description,
.lp-layout-impact .lp-job-card p,
.lp-layout-impact .lp-job-card span {
  color: #ccc;
}

.lp-layout-impact .lp-job-tags {
  color: #fff;
}

.lp-layout-impact .lp-job-tag {
  background: #333;
  color: #fff;
  border: 1px solid #555;
}

.lp-layout-impact .lp-job-salary {
  color: var(--impact-primary, #facc15);
}

/* Impact: 募集要項セクション */
.lp-layout-impact .lp-requirements,
.lp-layout-impact .lp-detail {
  background: #0a0a0a;
  color: #fff;
}

.lp-layout-impact .lp-requirements-table,
.lp-layout-impact .lp-detail-table {
  background: #111;
}

.lp-layout-impact .lp-requirements-table th,
.lp-layout-impact .lp-detail-table th {
  background: #1a1a1a;
  color: var(--impact-primary, #facc15);
  border-bottom: 1px solid #333;
}

.lp-layout-impact .lp-requirements-table td,
.lp-layout-impact .lp-detail-table td {
  color: #fff;
  background: #111;
  border-bottom: 1px solid #333;
}

/* Impact: 募集要項 dl/dt/dd構造 */
.lp-layout-impact .lp-details-table {
  background: #111;
}

.lp-layout-impact .lp-detail-row {
  border-bottom: 1px solid #333;
}

.lp-layout-impact .lp-detail-label {
  background: #1a1a1a;
  color: var(--impact-primary, #facc15);
  font-weight: bold;
}

.lp-layout-impact .lp-detail-value {
  background: #111;
  color: #fff;
}

/* Impact: 応募セクション */
.lp-layout-impact .lp-apply {
  background: #0a0a0a;
  color: #fff;
}

.lp-layout-impact .lp-apply-content,
.lp-layout-impact .lp-apply-lead,
.lp-layout-impact .lp-apply-method h3,
.lp-layout-impact .lp-apply-method p,
.lp-layout-impact .lp-apply-note {
  color: #fff;
}

.lp-layout-impact .lp-apply-divider span {
  color: #666;
  background: #0a0a0a;
}

.lp-layout-impact .lp-cta-microcopy {
  color: #999;
}

/* Bold: 赤×白のパワフルデザイン */
.lp-layout-bold {
  --bold-primary: #dc2626;
  --bold-secondary: #b91c1c;
  --bold-gold: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.lp-layout-bold .lp-hero-title {
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 3px 3px 0 var(--bold-primary);
}

.lp-layout-bold .lp-highlight-value,
.lp-layout-bold .lp-job-salary {
  font-size: 2rem;
  font-weight: 900;
  color: var(--bold-primary);
}

.lp-layout-bold .lp-btn-apply-hero,
.lp-layout-bold .lp-btn-apply-main {
  background: var(--bold-primary);
  font-weight: 900;
  font-size: 1.25rem;
  border-radius: 0;
  box-shadow: 4px 4px 0 #7f1d1d;
}

.lp-layout-bold .lp-btn-apply-hero:hover,
.lp-layout-bold .lp-btn-apply-main:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #7f1d1d;
}

/* ----------------------------------------
   4. 上品・洗練系 (Elegant / Magazine)
   ターゲット: 美容、デザイナー、ブライダル
   配色: グレージュ、シャンパンゴールド、くすみピンク
   ---------------------------------------- */

/* Elegant: 洗練されたミニマル */
.lp-layout-elegant {
  --elegant-primary: #78716c;
  --elegant-gold: #d4af37;
  --elegant-pink: #e8cdc4;
  --elegant-bg: #fafaf9;
  --elegant-text: #44403c;
}

.lp-layout-elegant .lp-hero {
  background: var(--elegant-bg);
  min-height: 80vh;
}

.lp-layout-elegant .lp-hero-title {
  color: var(--elegant-text);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  letter-spacing: 0.15em;
  line-height: 1.8;
}

.lp-layout-elegant .lp-hero-subtitle {
  color: var(--elegant-primary);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
}

/* Elegant: 余白たっぷり */
.lp-layout-elegant section {
  padding: 6rem 2rem;
}

.lp-layout-elegant .lp-section-title {
  color: var(--elegant-text);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-weight: 400;
  letter-spacing: 0.15em;
  font-size: 1.25rem;
}

.lp-layout-elegant .lp-section-title::after {
  background: var(--elegant-gold);
  height: 1px;
  width: 60px;
}

.lp-layout-elegant .lp-point-card {
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #e7e5e4;
  padding: 2rem 0;
}

.lp-layout-elegant .lp-point-title {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.lp-layout-elegant .lp-btn-apply-hero,
.lp-layout-elegant .lp-btn-apply-main {
  background: var(--elegant-text);
  border-radius: 0;
  font-weight: 400;
  letter-spacing: 0.2em;
  padding: 1rem 3rem;
}

.lp-layout-elegant .lp-btn-apply-hero:hover,
.lp-layout-elegant .lp-btn-apply-main:hover {
  background: var(--elegant-gold);
  color: #fff;
}

/* Magazine: 雑誌風レイアウト */
.lp-layout-magazine {
  --mag-primary: #a8a29e;
  --mag-accent: #c4b5a5;
  --mag-text: #292524;
}

.lp-layout-magazine .lp-hero {
  background: #fff;
}

.lp-layout-magazine .lp-hero-title {
  color: var(--mag-text);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.lp-layout-magazine .lp-section-title {
  color: var(--mag-text);
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.875rem;
}

.lp-layout-magazine .lp-section-title::after {
  background: var(--mag-accent);
}

.lp-layout-magazine section {
  padding: 5rem 2rem;
}

.lp-layout-magazine .lp-point-card {
  background: transparent;
  border: none;
  text-align: center;
}

.lp-layout-magazine .lp-btn-apply-hero,
.lp-layout-magazine .lp-btn-apply-main {
  background: transparent;
  border: 1px solid var(--mag-text);
  color: var(--mag-text);
  border-radius: 0;
  font-weight: 400;
  letter-spacing: 0.15em;
}

.lp-layout-magazine .lp-btn-apply-hero:hover,
.lp-layout-magazine .lp-btn-apply-main:hover {
  background: var(--mag-text);
  color: #fff;
}

/* ----------------------------------------
   5. ポップ・カジュアル系 (Yellow / Playful)
   ターゲット: 学生バイト、飲食、アパレル
   配色: ビタミンカラー、賑やか、エネルギッシュ
   ---------------------------------------- */

/* Playful: ビタミンカラー */
.lp-layout-playful {
  --playful-yellow: #fbbf24;
  --playful-pink: #f472b6;
  --playful-green: #4ade80;
  --playful-blue: #60a5fa;
  --playful-text: #1f2937;
}

.lp-layout-playful .lp-hero-bg {
  background: linear-gradient(135deg, #fef3c7 0%, #fce7f3 50%, #dbeafe 100%);
}

.lp-layout-playful .lp-hero-title {
  color: var(--playful-text);
  font-weight: 800;
  font-size: clamp(1.75rem, 6vw, 3rem);
}

/* Playful: カラフルなアクセント */
.lp-layout-playful .lp-hero-pretitle {
  background: var(--playful-pink);
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: 25px;
  font-weight: 700;
  display: inline-block;
  transform: rotate(-2deg);
}

.lp-layout-playful .lp-point-card {
  background: #fff;
  border-radius: 20px;
  border: 3px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.lp-layout-playful .lp-point-card:nth-child(3n+1) {
  border-color: var(--playful-yellow);
}

.lp-layout-playful .lp-point-card:nth-child(3n+2) {
  border-color: var(--playful-pink);
}

.lp-layout-playful .lp-point-card:nth-child(3n+3) {
  border-color: var(--playful-green);
}

.lp-layout-playful .lp-section-title {
  color: var(--playful-text);
  font-weight: 800;
}

.lp-layout-playful .lp-section-title::after {
  background: linear-gradient(90deg, var(--playful-yellow), var(--playful-pink), var(--playful-green));
  height: 4px;
  border-radius: 2px;
}

.lp-layout-playful .lp-btn-apply-hero,
.lp-layout-playful .lp-btn-apply-main {
  background: linear-gradient(135deg, var(--playful-pink), #ec4899);
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.125rem;
  box-shadow: 0 4px 15px rgba(244, 114, 182, 0.4);
}

.lp-layout-playful .lp-btn-apply-hero:hover,
.lp-layout-playful .lp-btn-apply-main:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(244, 114, 182, 0.5);
}

.lp-layout-playful .lp-cta-microcopy {
  color: var(--playful-pink);
  font-weight: 600;
}

.lp-layout-playful .lp-footer {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
}

/* ----------------------------------------
   Modern: 洗練されたモダンデザイン
   ターゲット: IT、製造、オフィスワーク
   ---------------------------------------- */

.lp-layout-modern {
  --modern-primary: #2d3436;
  --modern-secondary: #0984e3;
  --modern-accent: #fff176;
  --modern-bg: #f8fafc;
}

.lp-layout-modern .lp-hero-bg {
  background: linear-gradient(135deg, #2d3436 0%, #0984e3 100%);
}

.lp-layout-modern .lp-hero-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lp-layout-modern .lp-point-card {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: none;
}

.lp-layout-modern .lp-point-number {
  background: linear-gradient(135deg, #2d3436, #0984e3);
  border-radius: 8px;
}

.lp-layout-modern .lp-section-title::after {
  background: linear-gradient(90deg, #2d3436, #0984e3);
}

.lp-layout-modern .lp-btn-apply-hero,
.lp-layout-modern .lp-btn-apply-main {
  background: #0984e3;
  border-radius: 8px;
  font-weight: 600;
}

.lp-layout-modern .lp-btn-apply-hero:hover,
.lp-layout-modern .lp-btn-apply-main:hover {
  background: #0077b6;
}

/* ----------------------------------------
   Cute: ポップで可愛いパステル調
   ターゲット: 保育、美容、アパレル
   ---------------------------------------- */

.lp-layout-cute {
  --cute-primary: #ff8fa3;
  --cute-secondary: #f472b6;
  --cute-accent: #fff59d;
  --cute-bg: #fdf2f8;
}

.lp-layout-cute .lp-hero-bg:not([style*="background-image"]),
.lp-layout-cute .lp-hero-bg[style=""],
.lp-layout-cute .lp-hero-bg[style*="background-image: url('')"] {
  background-image: linear-gradient(135deg, #ff8fa3 0%, #fab1a0 50%, #ffeaa7 100%);
}

.lp-layout-cute .lp-hero-title {
  font-weight: 800;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.5);
}

.lp-layout-cute .lp-point-card {
  border-radius: 20px;
  border: 2px solid #fce7f3;
  background: #fff;
}

.lp-layout-cute .lp-point-number {
  background: linear-gradient(135deg, #ff8fa3, #f472b6);
  border-radius: 50%;
}

.lp-layout-cute .lp-section-title {
  font-weight: 700;
}

.lp-layout-cute .lp-section-title::after {
  background: linear-gradient(90deg, #ff8fa3, #f472b6);
  border-radius: 2px;
}

.lp-layout-cute .lp-btn-apply-hero,
.lp-layout-cute .lp-btn-apply-main {
  background: linear-gradient(135deg, #ff8fa3, #f472b6);
  border-radius: 30px;
  font-weight: 700;
}

.lp-layout-cute .lp-btn-apply-hero:hover,
.lp-layout-cute .lp-btn-apply-main:hover {
  background: linear-gradient(135deg, #f472b6, #ec4899);
  transform: scale(1.02);
}

.lp-layout-cute .lp-footer {
  background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
}

/* ----------------------------------------
   Kenchiku: 建設・土木業界向け
   力強いオレンジ + ダーク
   ---------------------------------------- */

.lp-layout-kenchiku {
  --kenchiku-primary: #f39c12;
  --kenchiku-secondary: #1a1a1a;
  --kenchiku-accent: #fff176;
  --kenchiku-bg: #f5f5f5;
}

.lp-layout-kenchiku .lp-hero-bg {
  background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 50%, #f39c12 100%);
}

.lp-layout-kenchiku .lp-hero-title {
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 4rem);
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);
}

.lp-layout-kenchiku .lp-point-card {
  border-radius: 0;
  border-left: 6px solid #f39c12;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.lp-layout-kenchiku .lp-point-number {
  background: #f39c12;
  border-radius: 0;
  font-weight: 900;
}

.lp-layout-kenchiku .lp-section-title {
  font-weight: 900;
  color: #1a1a1a;
}

.lp-layout-kenchiku .lp-section-title::after {
  background: #f39c12;
  height: 4px;
}

.lp-layout-kenchiku .lp-btn-apply-hero,
.lp-layout-kenchiku .lp-btn-apply-main {
  background: #f39c12;
  border-radius: 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lp-layout-kenchiku .lp-btn-apply-hero:hover,
.lp-layout-kenchiku .lp-btn-apply-main:hover {
  background: #e67e22;
}

.lp-layout-kenchiku .lp-footer {
  background: #1a1a1a;
}

/* ============================================
   エナジーテンプレート
   出前館LP風: 赤基調、左右分割ヒーロー、大胆なCTA
   ============================================ */

/* --- カラー変数 --- */
.lp-layout-energy {
  --energy-primary: #DA3734;
  --energy-primary-dark: #b82e2b;
  --energy-secondary: #1a1a1a;
  --energy-accent: #ff6b6b;
  --energy-bg: #fff8f8;
  --energy-text: #1a1a1a;
}

/* --- パターン（全体のカラースキーム） --- */
.lp-pattern-energy {
  --lp-primary: #DA3734;
  --lp-accent: #ff6b6b;
  --lp-primary-light: #fdf5f5;
  --lp-primary-alpha: rgba(218, 55, 52, 0.08);
}

.lp-pattern-energy .lp-hero-bg {
  background: linear-gradient(135deg, #DA3734, #ff6b6b);
}

.lp-pattern-energy .lp-point-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(218, 55, 52, 0.1);
}

.lp-pattern-energy .lp-point-number {
  background: #DA3734;
  border-radius: 50%;
  font-weight: 900;
}

.lp-pattern-energy .lp-apply {
  background: linear-gradient(135deg, #fff0f0, #fff8f8);
}

.lp-pattern-energy .lp-section-title::after {
  background: #DA3734;
  height: 4px;
  border-radius: 2px;
}

.lp-pattern-energy .lp-btn-apply-hero,
.lp-pattern-energy .lp-btn-apply-main,
.lp-pattern-energy .lp-btn-apply-footer {
  background: #DA3734;
  border-radius: 60px;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 15px rgba(218, 55, 52, 0.4);
}

.lp-pattern-energy .lp-btn-apply-hero:hover,
.lp-pattern-energy .lp-btn-apply-main:hover,
.lp-pattern-energy .lp-btn-apply-footer:hover {
  background: #b82e2b;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(218, 55, 52, 0.5);
}

.lp-pattern-energy .lp-faq-chat-bubble-user {
  background: #DA3734;
  color: #fff;
}

.lp-pattern-energy .lp-footer {
  background: #1a1a1a;
}

.lp-pattern-energy .lp-job-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.lp-pattern-energy .lp-job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(218, 55, 52, 0.15);
}

.lp-pattern-energy .lp-details-table th {
  background: #DA3734;
  color: #fff;
}

/* --- ヒーロー: 白ベース + 赤丸デコレーション --- */
.lp-hero--energy {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  background: #fdf5f5;
}

/* 装飾的な赤い丸（出前館風） */
.lp-hero-energy-deco-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(218, 55, 52, 0.08);
  z-index: 0;
}

.lp-hero-energy-deco-circle--top {
  width: 500px;
  height: 500px;
  top: -150px;
  right: -100px;
}

.lp-hero-energy-deco-circle--bottom {
  width: 350px;
  height: 350px;
  bottom: -100px;
  left: -80px;
}

.lp-hero-energy-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
  gap: 3rem;
}

.lp-hero-energy-text {
  flex: 1;
  color: #1a1a1a;
  min-width: 0;
}

.lp-hero-energy-label {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #DA3734;
  margin-bottom: 1rem;
  padding: 0.4rem 1rem;
  border: 2px solid #DA3734;
  border-radius: 4px;
}

.lp-hero--energy .lp-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.3;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

.lp-hero--energy .lp-hero-company {
  font-size: 1rem;
  color: #666;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.lp-hero--energy .lp-hero-highlights {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.lp-hero--energy .lp-highlight-item {
  background: #fff;
  border: 2px solid #DA3734;
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  text-align: center;
}

.lp-hero--energy .lp-highlight-label {
  color: #DA3734;
  font-weight: 700;
}

.lp-hero--energy .lp-highlight-value {
  color: #1a1a1a;
  font-weight: 800;
}

.lp-hero--energy .lp-highlight-item.bonus {
  background: #DA3734;
  border-color: #DA3734;
}

.lp-hero--energy .lp-highlight-item.bonus .lp-highlight-label,
.lp-hero--energy .lp-highlight-item.bonus .lp-highlight-value {
  color: #fff;
}

.lp-hero-energy-image {
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-hero-energy-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(218, 55, 52, 0.15);
  object-fit: cover;
}

.lp-hero-energy-img-placeholder {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #fce8e8, #f5d0d0);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-hero-energy-img-placeholder::after {
  content: '画像を追加';
  color: #DA3734;
  font-size: 1rem;
  font-weight: 500;
}

/* 波形の下部装飾（出前館風） */
.lp-hero-energy-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 3;
  line-height: 0;
}

.lp-hero-energy-wave svg {
  width: 100%;
  height: 60px;
}

/* ============================================
   ヒーローバリアント（Approach A: テンプレート非依存）
   CSS custom propertiesで色を制御。
   .lp-pattern-{template} が --lp-primary, --lp-primary-light 等を設定。
   ============================================ */

/* --- バリアント: center-bg（センター背景画像） --- */
.lp-hero--center-bg {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
}

.lp-hero--center-bg .lp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  background-color: var(--lp-primary-dark, #4f46e5);
}

.lp-hero--center-bg .lp-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.lp-hero--center-bg .lp-hero-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  margin: 0 auto;
  color: #fff;
}

.lp-hero--center-bg .lp-hero-company {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

.lp-hero--center-bg .lp-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 0.75rem;
}

.lp-hero--center-bg .lp-hero-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
}

.lp-hero--center-bg .lp-hero-highlights {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.lp-hero--center-bg .lp-highlight-item {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  text-align: center;
}

.lp-hero--center-bg .lp-highlight-label {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.25rem;
}

.lp-hero--center-bg .lp-highlight-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

/* --- バリアント: split（左右分割） --- */
.lp-hero--split {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  background: var(--lp-primary-light, #f5f5f5);
}

/* 装飾サークル */
.lp-hero-split-deco {
  position: absolute;
  border-radius: 50%;
  background: var(--lp-primary-alpha, rgba(0, 0, 0, 0.08));
  z-index: 0;
}

.lp-hero-split-deco--top {
  width: 500px;
  height: 500px;
  top: -150px;
  right: -100px;
}

.lp-hero-split-deco--bottom {
  width: 350px;
  height: 350px;
  bottom: -100px;
  left: -80px;
}

.lp-hero-split-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
  gap: 3rem;
}

.lp-hero-split-text {
  flex: 1;
  color: var(--lp-text, #1a1a1a);
  min-width: 0;
}

.lp-hero-split-label {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--lp-primary);
  margin-bottom: 1rem;
  padding: 0.4rem 1rem;
  border: 2px solid var(--lp-primary);
  border-radius: 4px;
}

.lp-hero--split .lp-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.3;
  color: var(--lp-text, #1a1a1a);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
  text-shadow: none;
}

.lp-hero--split .lp-hero-company {
  font-size: 1rem;
  color: var(--lp-text-light, #666);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.lp-hero--split .lp-hero-highlights {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.lp-hero--split .lp-highlight-item {
  background: #fff;
  border: 2px solid var(--lp-primary);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  text-align: center;
}

.lp-hero--split .lp-highlight-label {
  color: var(--lp-primary);
  font-weight: 700;
}

.lp-hero--split .lp-highlight-value {
  color: var(--lp-text, #1a1a1a);
  font-weight: 800;
}

.lp-hero--split .lp-highlight-item.bonus {
  background: var(--lp-primary);
  border-color: var(--lp-primary);
}

.lp-hero--split .lp-highlight-item.bonus .lp-highlight-label,
.lp-hero--split .lp-highlight-item.bonus .lp-highlight-value {
  color: #fff;
}

.lp-hero-split-image {
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-hero-split-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 40px var(--lp-primary-alpha, rgba(0, 0, 0, 0.15));
  object-fit: cover;
}

.lp-hero-split-img-placeholder {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--lp-primary-light, #f5f5f5), var(--lp-primary-alpha, rgba(0,0,0,0.05)));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-hero-split-img-placeholder::after {
  content: '画像を追加';
  color: var(--lp-primary);
  font-size: 1rem;
  font-weight: 500;
}

/* 波形装飾 */
.lp-hero-split-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 3;
  line-height: 0;
}

.lp-hero-split-wave svg {
  width: 100%;
  height: 60px;
}

/* --- バリアント: overlay-dark（ダークオーバーレイ） --- */
.lp-hero--overlay-dark {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), var(--lp-primary-dark, #0f172a);
  background-size: cover;
  background-position: center;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
}

.lp-hero--overlay-dark .lp-hero-content {
  max-width: 900px;
}

.lp-hero--overlay-dark .lp-hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 0 40px var(--lp-primary-alpha, rgba(139, 92, 246, 0.5));
  margin-bottom: 1rem;
}

.lp-hero--overlay-dark .lp-hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto 1.5rem;
  font-style: italic;
}

.lp-hero--overlay-dark .lp-hero-highlights {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.lp-hero--overlay-dark .lp-highlight-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  text-align: center;
}

.lp-hero--overlay-dark .lp-highlight-label {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.25rem;
}

.lp-hero--overlay-dark .lp-highlight-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

/* --- バリアント: text-clean（テキスト中心） --- */
.lp-hero--text-clean {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 3rem 2rem;
  text-align: left;
  min-height: auto;
}

.lp-hero--text-clean .lp-hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding-left: 2rem;
  border-left: 4px solid var(--lp-primary);
  color: var(--lp-text, #1e293b);
}

.lp-hero--text-clean .lp-hero-pretitle {
  font-size: 0.875rem;
  color: var(--lp-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.lp-hero--text-clean .lp-hero-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.4;
  margin-bottom: 1rem;
  text-shadow: none;
}

.lp-hero--text-clean .lp-hero-subtitle {
  font-size: 1rem;
  color: #64748b;
}

.lp-hero--text-clean .lp-hero-highlights {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.lp-hero--text-clean .lp-highlight-item {
  background: #fff;
  border: 1px solid var(--lp-border, #e5e7eb);
  border-left: 3px solid var(--lp-primary);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  text-align: left;
}

.lp-hero--text-clean .lp-highlight-label {
  display: block;
  font-size: 0.75rem;
  color: var(--lp-text-light, #6b7280);
  margin-bottom: 0.25rem;
}

.lp-hero--text-clean .lp-highlight-value {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--lp-text, #1e293b);
}

/* --- バリアント: image-bottom（画像下配置） --- */
.lp-hero--image-bottom {
  background: linear-gradient(180deg, var(--lp-primary-light, #fef3c7) 0%, #fff7ed 50%, #fff 100%);
  padding: 3rem 1.5rem;
  text-align: center;
  min-height: auto;
}

.lp-hero--image-bottom .lp-hero-content {
  max-width: 600px;
  margin: 0 auto;
  color: var(--lp-text, #1a1a1a);
}

.lp-hero--image-bottom .lp-hero-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--lp-primary);
  margin-bottom: 0.75rem;
  line-height: 1.4;
  text-shadow: none;
}

.lp-hero--image-bottom .lp-hero-subtitle {
  font-size: 1rem;
  color: var(--lp-text, #78350f);
  background: var(--lp-primary-light, #fef3c7);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}

.lp-hero--image-bottom .lp-hero-image-container {
  max-width: 350px;
  margin: 0 auto 1.5rem;
}

.lp-hero--image-bottom .lp-hero-image {
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 10px 30px var(--lp-primary-alpha, rgba(234, 88, 12, 0.2));
}

.lp-hero--image-bottom .lp-hero-highlights {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.lp-hero--image-bottom .lp-highlight-item {
  background: #fff;
  border: 2px solid var(--lp-primary);
  border-radius: 16px;
  padding: 0.75rem 1.25rem;
  text-align: center;
}

.lp-hero--image-bottom .lp-highlight-label {
  display: block;
  font-size: 0.75rem;
  color: var(--lp-primary);
  margin-bottom: 0.25rem;
}

.lp-hero--image-bottom .lp-highlight-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--lp-text, #1a1a1a);
}

/* --- ヒーローバリアント: デュオトーン+メリットカード --- */
.lp-hero--duotone-merits {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lp-hero--duotone-merits .lp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  z-index: 0;
}

.lp-hero--duotone-merits .lp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--lp-primary, #c0392b) 0%, color-mix(in srgb, var(--lp-primary, #c0392b) 80%, #000) 100%);
  mix-blend-mode: multiply;
  z-index: 1;
}

.lp-hero--duotone-merits .lp-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 4rem 2rem;
  max-width: 900px;
  width: 100%;
}

.lp-hero--duotone-merits .lp-hero-title {
  color: #fff;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.lp-hero--duotone-merits .lp-hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  margin-bottom: 2rem;
}

/* メリットカード */
.lp-hero-merits {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.lp-hero-merit-card {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 1.5rem 2rem;
  min-width: 180px;
  max-width: 240px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 4px;
  transition: transform 0.2s ease;
}

.lp-hero-merit-card:hover {
  transform: translateY(-4px);
}

.lp-hero-merit-text {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* デュオトーン: ハイライト表示 */
.lp-hero--duotone-merits .lp-hero-highlights {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.lp-hero--duotone-merits .lp-highlight-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
  color: #fff;
}

.lp-hero--duotone-merits .lp-highlight-label {
  color: rgba(255, 255, 255, 0.7);
}

.lp-hero--duotone-merits .lp-highlight-value {
  color: #fff;
  font-weight: 800;
}

/* --- ヒーローバリアント: レスポンシブ --- */
@media (max-width: 768px) {
  .lp-hero-split-inner {
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 1rem;
  }

  .lp-hero-split-image {
    flex: none;
    max-width: 100%;
    width: 100%;
    order: -1;
  }

  .lp-hero-split-img {
    max-width: 320px;
    border-radius: 16px;
  }

  .lp-hero--split .lp-hero-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .lp-hero--split .lp-hero-highlights {
    justify-content: center;
  }

  .lp-hero--overlay-dark .lp-hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .lp-hero--center-bg {
    min-height: 60vh;
    padding: 4rem 1rem 3rem;
  }

  .lp-hero--duotone-merits {
    min-height: 65vh;
  }

  .lp-hero--duotone-merits .lp-hero-content {
    padding: 3rem 1rem;
  }

  .lp-hero-merits {
    gap: 0.75rem;
  }

  .lp-hero-merit-card {
    min-width: 140px;
    padding: 1rem 1.25rem;
  }
}

@media (max-width: 600px) {
  .lp-hero--center-bg .lp-hero-title,
  .lp-hero--image-bottom .lp-hero-title {
    font-size: 1.75rem;
  }

  .lp-hero--center-bg .lp-hero-highlights,
  .lp-hero--overlay-dark .lp-hero-highlights,
  .lp-hero--image-bottom .lp-hero-highlights {
    flex-direction: column;
    align-items: center;
  }

  .lp-hero--duotone-merits .lp-hero-title {
    font-size: 1.75rem;
  }

  .lp-hero-merits {
    flex-direction: column;
    align-items: center;
  }

  .lp-hero-merit-card {
    min-width: 100%;
    max-width: 100%;
  }

  .lp-hero--text-clean .lp-hero-content {
    padding-left: 1rem;
  }
}

/* ===== dark-badges バリアント（#1） ===== */
.lp-hero--dark-badges {
  position: relative;
  min-height: 520px;
  background: #1a1a1a;
  color: #fff;
  overflow: hidden;
}
.lp-hero--dark-badges .lp-hero-split-inner {
  display: flex;
  align-items: center;
  min-height: 520px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
  gap: 2rem;
}
.lp-hero--dark-badges .lp-hero-split-text {
  flex: 1;
  z-index: 1;
}
.lp-hero--dark-badges .lp-hero-split-image {
  flex: 1;
  z-index: 1;
}
.lp-hero--dark-badges .lp-hero-split-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}
.lp-hero--dark-badges .lp-hero-title {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.lp-hero--dark-badges .lp-hero-subtitle {
  font-size: 0.95rem;
  color: var(--lp-accent, #f5c518);
  margin-bottom: 1rem;
}
.lp-hero-merits--badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
}
.lp-hero-badge {
  display: inline-block;
  background: var(--lp-accent, #f5c518);
  color: #1a1a1a;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 2px;
}

/* ===== hex-badges バリアント（#4） ===== */
.lp-hero--hex-badges {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.lp-hero--hex-badges .lp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.lp-hero--hex-badges .lp-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.lp-hero--hex-badges .lp-hero-content {
  position: relative;
  z-index: 1;
  padding: 3rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.lp-hero--hex-badges .lp-hero-title {
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  border-left: 4px solid var(--lp-accent, #e67e22);
  padding-left: 1rem;
}
.lp-hero--hex-badges .lp-hero-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.lp-hero-merits--hex {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0;
}
.lp-hero-hex-badge {
  width: 110px;
  height: 110px;
  background: var(--lp-accent, #e67e22);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lp-hero-hex-text {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem;
  line-height: 1.3;
}

/* ===== casual-cards バリアント（#6） ===== */
.lp-hero--casual-cards {
  position: relative;
  overflow: hidden;
}
.lp-hero--casual-cards .lp-hero-bg {
  height: 380px;
  background-size: cover;
  background-position: center;
}
.lp-hero--casual-cards .lp-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 380px;
  background: rgba(0, 0, 0, 0.35);
}
.lp-hero--casual-cards .lp-hero-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.lp-hero--casual-cards .lp-hero-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
  line-height: 1.4;
}
.lp-hero-casual-bottom {
  background: #fff;
  padding: 2rem;
}
.lp-hero-merits--casual {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.lp-hero-casual-card {
  flex: 1;
  background: var(--lp-accent, #fef3c7);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: left;
}
.lp-hero-casual-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--lp-primary, #d97706);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}
.lp-hero-casual-text {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
}

/* ===== bold-circles バリアント（#7） ===== */
.lp-hero--bold-circles {
  position: relative;
  min-height: 520px;
  background: var(--lp-primary, #1e3a8a);
  color: #fff;
  overflow: hidden;
}
.lp-hero--bold-circles .lp-hero-split-inner {
  display: flex;
  align-items: center;
  min-height: 520px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
  gap: 2rem;
}
.lp-hero--bold-circles .lp-hero-split-text {
  flex: 1;
  z-index: 1;
}
.lp-hero--bold-circles .lp-hero-split-image {
  flex: 1;
  z-index: 1;
}
.lp-hero--bold-circles .lp-hero-split-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 8px;
}
.lp-hero--bold-circles .lp-hero-title {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  background: var(--lp-accent, #facc15);
  color: var(--lp-primary, #1e3a8a);
  display: inline;
  padding: 0.1em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.lp-hero--bold-circles .lp-hero-subtitle {
  font-size: 1.1rem;
  margin: 1rem 0;
  line-height: 1.6;
}
.lp-hero-merits--circles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
}
.lp-hero-circle-badge {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lp-hero-circle-text {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.3rem;
}

/* ===== minimal-list バリアント（#9） ===== */
.lp-hero--minimal-list {
  position: relative;
  min-height: 480px;
  background: #fff;
  display: flex;
  align-items: center;
}
.lp-hero--minimal-list .lp-hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2rem;
}
.lp-hero--minimal-list .lp-hero-pretitle {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: #999;
  margin-bottom: 1rem;
}
.lp-hero--minimal-list .lp-hero-title {
  font-size: 3rem;
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.4;
  margin-bottom: 2rem;
}
.lp-hero-merits--minimal {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}
.lp-hero-minimal-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.05rem;
  color: #333;
}
.lp-hero-minimal-dash {
  color: var(--lp-primary, #1a1a1a);
  font-weight: 700;
  flex-shrink: 0;
}
.lp-hero-minimal-text {
  font-weight: 500;
}

/* ===== split-list バリアント（#12） ===== */
.lp-hero--split-list {
  position: relative;
  min-height: 520px;
  background: #fff;
  overflow: hidden;
}
.lp-hero--split-list .lp-hero-split-inner {
  display: flex;
  align-items: stretch;
  min-height: 520px;
  max-width: 1200px;
  margin: 0 auto;
}
.lp-hero--split-list .lp-hero-split-text {
  flex: 1;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lp-hero--split-list .lp-hero-split-image {
  flex: 1;
}
.lp-hero--split-list .lp-hero-split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-hero--split-list .lp-hero-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 2rem;
}
.lp-hero-merits--split-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lp-hero-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border: 1px solid #e5e5e5;
  border-bottom: none;
  padding: 1rem;
}
.lp-hero-list-item:last-child {
  border-bottom: 1px solid #e5e5e5;
}
.lp-hero-list-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: #999;
  flex-shrink: 0;
}
.lp-hero-list-text {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}
.lp-hero-list-arrow {
  font-size: 0.8rem;
  font-weight: 700;
  color: #999;
  flex-shrink: 0;
}

/* ===== solid-cards バリアント（#15） ===== */
.lp-hero--solid-cards {
  position: relative;
  min-height: 520px;
  background: var(--lp-primary, #4338ca);
  color: #fff;
  display: flex;
  align-items: center;
}
.lp-hero--solid-cards .lp-hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2rem;
}
.lp-hero--solid-cards .lp-hero-title {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.lp-hero--solid-cards .lp-hero-title em,
.lp-hero--solid-cards .lp-hero-title i {
  font-style: italic;
  color: var(--lp-primary-light, #a5b4fc);
}
.lp-hero--solid-cards .lp-hero-subtitle {
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 1rem;
}
.lp-hero-merits--solid {
  display: flex;
  gap: 1rem;
  margin: 2.5rem 0;
}
.lp-hero-solid-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.2s;
}
.lp-hero-solid-card:hover {
  transform: translateY(-2px);
}
.lp-hero-solid-text {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ===== split-check バリアント（#16） ===== */
.lp-hero--split-check {
  position: relative;
  min-height: 480px;
  background: #fff;
  overflow: hidden;
}
.lp-hero--split-check .lp-hero-split-inner {
  display: flex;
  align-items: stretch;
  min-height: 480px;
  max-width: 1200px;
  margin: 0 auto;
}
.lp-hero--split-check .lp-hero-split-text {
  flex: 1;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lp-hero--split-check .lp-hero-split-image {
  flex: 1;
}
.lp-hero--split-check .lp-hero-split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-hero--split-check .lp-hero-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}
.lp-hero-merits--check {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;
}
.lp-hero-check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  background: #f0fdf4;
  border-radius: 8px;
  border-left: 4px solid #22c55e;
}
.lp-hero-check-icon {
  width: 28px;
  height: 28px;
  background: #22c55e;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.lp-hero-check-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}

/* ===== mono-bold バリアント（#17） ===== */
.lp-hero--mono-bold {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.lp-hero--mono-bold .lp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
}
.lp-hero--mono-bold .lp-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
}
.lp-hero--mono-bold .lp-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
  padding: 3rem 2rem;
}
.lp-hero--mono-bold .lp-hero-title {
  font-size: 3rem;
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.4;
  margin-bottom: 2rem;
  text-shadow: 0 2px 8px rgba(255,255,255,0.5);
}
.lp-hero-merits--mono {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}
.lp-hero-mono-card {
  background: var(--lp-primary, #dc2626);
  color: #fff;
  padding: 1.5rem 2rem;
  text-align: center;
  min-width: 140px;
}
.lp-hero-mono-card--accent {
  background: #1a1a1a;
  border: 3px solid var(--lp-primary, #dc2626);
}
.lp-hero-mono-text {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

/* ===== banner-bar バリアント（#18） ===== */
.lp-hero--banner-bar {
  position: relative;
  background: var(--lp-primary, #1e40af);
  color: #fff;
  overflow: hidden;
}
.lp-hero--banner-bar .lp-hero-split-inner {
  display: flex;
  align-items: center;
  min-height: 420px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
  gap: 2rem;
}
.lp-hero--banner-bar .lp-hero-split-text {
  flex: 1;
  z-index: 1;
}
.lp-hero--banner-bar .lp-hero-split-image {
  flex: 1;
  z-index: 1;
}
.lp-hero--banner-bar .lp-hero-split-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 8px;
}
.lp-hero--banner-bar .lp-hero-title {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.lp-hero--banner-bar .lp-hero-subtitle {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  opacity: 0.8;
  margin-bottom: 1rem;
}
.lp-hero-merits--bar {
  display: flex;
  justify-content: center;
  gap: 2rem;
  background: var(--lp-primary-dark, #1e3a5f);
  padding: 1rem 2rem;
}
.lp-hero-bar-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lp-hero-bar-dot {
  font-size: 0.6rem;
  opacity: 0.6;
}
.lp-hero-bar-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

/* ===== dark-pills バリアント（#19） ===== */
.lp-hero--dark-pills {
  position: relative;
  min-height: 520px;
  background: #1f1f2e;
  color: #fff;
  overflow: hidden;
}
.lp-hero--dark-pills .lp-hero-split-inner {
  display: flex;
  align-items: center;
  min-height: 520px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
  gap: 2rem;
}
.lp-hero--dark-pills .lp-hero-split-image {
  flex: 1;
  z-index: 1;
}
.lp-hero--dark-pills .lp-hero-split-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 12px;
}
.lp-hero--dark-pills .lp-hero-split-text {
  flex: 1;
  z-index: 1;
}
.lp-hero--dark-pills .lp-hero-title {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 2rem;
}
.lp-hero-merits--pills {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.lp-hero-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--lp-primary, #6366f1);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  transition: transform 0.2s;
}
.lp-hero-pill:hover {
  transform: translateX(4px);
}
.lp-hero-pill-num {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.lp-hero-pill-text {
  font-size: 0.9rem;
  font-weight: 600;
}

/* --- 新バリアント レスポンシブ（768px） --- */
@media (max-width: 768px) {
  .lp-hero--dark-badges .lp-hero-split-inner,
  .lp-hero--bold-circles .lp-hero-split-inner,
  .lp-hero--split-list .lp-hero-split-inner,
  .lp-hero--split-check .lp-hero-split-inner,
  .lp-hero--banner-bar .lp-hero-split-inner,
  .lp-hero--dark-pills .lp-hero-split-inner {
    flex-direction: column;
    min-height: auto;
  }

  .lp-hero--dark-badges .lp-hero-split-img,
  .lp-hero--bold-circles .lp-hero-split-img,
  .lp-hero--split-list .lp-hero-split-img,
  .lp-hero--split-check .lp-hero-split-img,
  .lp-hero--banner-bar .lp-hero-split-img,
  .lp-hero--dark-pills .lp-hero-split-img {
    height: 250px;
  }

  .lp-hero--dark-badges .lp-hero-title,
  .lp-hero--bold-circles .lp-hero-title {
    font-size: 1.8rem;
  }

  .lp-hero--hex-badges .lp-hero-title,
  .lp-hero--mono-bold .lp-hero-title,
  .lp-hero--minimal-list .lp-hero-title {
    font-size: 2rem;
  }

  .lp-hero--solid-cards .lp-hero-title {
    font-size: 2.5rem;
  }

  .lp-hero--split-list .lp-hero-title,
  .lp-hero--split-check .lp-hero-title,
  .lp-hero--banner-bar .lp-hero-title,
  .lp-hero--dark-pills .lp-hero-title {
    font-size: 1.8rem;
  }

  .lp-hero--casual-cards .lp-hero-title {
    font-size: 1.8rem;
  }

  .lp-hero-merits--casual {
    flex-direction: column;
    gap: 1rem;
  }

  .lp-hero-merits--solid {
    flex-direction: column;
  }

  .lp-hero-merits--mono {
    flex-direction: column;
    align-items: center;
  }

  .lp-hero-hex-badge {
    width: 90px;
    height: 90px;
  }

  .lp-hero-merits--bar {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}

/* --- レイアウト: セクション全体のスタイル --- */
.lp-layout-energy .lp-hero-bg {
  display: none;
}

.lp-layout-energy .lp-hero-overlay {
  display: none;
}

/* --- セクション見出し: 英語+日本語の二段構成 --- */
.lp-layout-energy .lp-section-title {
  font-weight: 800;
  color: #1a1a1a;
  text-align: center;
  position: relative;
  padding-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.lp-layout-energy .lp-section-title::before {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #DA3734;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.lp-layout-energy .lp-section-title::after {
  width: 40px;
  height: 4px;
  background: #DA3734;
  border-radius: 2px;
}

/* 各セクションの英語ラベル */
.lp-layout-energy .lp-points .lp-section-title::before { content: 'MERIT'; }
.lp-layout-energy .lp-details .lp-section-title::before { content: 'REQUIREMENTS'; }
.lp-layout-energy .lp-faq .lp-section-title::before { content: 'FAQ'; }
.lp-layout-energy .lp-apply .lp-section-title::before { content: 'ENTRY'; }
.lp-layout-energy .lp-jobs .lp-section-title::before { content: 'JOBS'; }
.lp-layout-energy .lp-gallery .lp-section-title::before { content: 'GALLERY'; }
.lp-layout-energy .lp-testimonial .lp-section-title::before { content: 'VOICE'; }
.lp-layout-energy .lp-custom .lp-section-title::before { content: 'ABOUT'; }

/* --- ポイントセクション（出前館風メリットカード） --- */
/* --- エナジー: 赤背景 + 白角丸カード --- */
.lp-points--energy {
  background: #DA3734;
  padding: 4rem 1rem 3rem;
}

.lp-points--energy .lp-section-title {
  text-align: center;
  color: #fff;
  margin-bottom: 2.5rem;
}

.lp-points--energy .lp-section-title::before {
  color: rgba(255, 255, 255, 0.7);
}

.lp-points-grid--energy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* 各カード: 白背景・角丸・影 */
.lp-point-card--energy {
  background: #fff;
  padding: 1.75rem 1.5rem 1.5rem;
  position: relative;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 大きな番号（左上に独立表示、薄い赤・透過風） */
.lp-point-card-energy-num {
  display: block;
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(218, 55, 52, 0.2);
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  margin-bottom: 0.25rem;
}

/* タイトル（番号の下、左寄せ、太字） */
.lp-point-card--energy .lp-point-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.5;
  text-align: left;
  margin: 0 0 0.75rem 0;
}

/* SVGアイコン（中央） */
.lp-point-card-energy-icon {
  width: 110px;
  height: 110px;
  margin: 0 auto 1rem;
}

.lp-point-card-energy-icon svg {
  width: 100%;
  height: 100%;
}

.lp-point-card-energy-custom-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* 説明文（下部、グレー小さめ） */
.lp-point-card--energy .lp-point-desc {
  font-size: 0.8rem;
  color: #888;
  line-height: 1.7;
  text-align: left;
  margin: 0;
}

/* レスポンシブ: タブレット2列 */
@media (max-width: 960px) {
  .lp-points-grid--energy {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* レスポンシブ: スマホ1列 */
@media (max-width: 600px) {
  .lp-points-grid--energy {
    grid-template-columns: 1fr;
  }

  .lp-point-card--energy {
    padding: 1.25rem 1rem;
  }

  .lp-point-card-energy-num {
    font-size: 2.5rem;
  }

  .lp-point-card-energy-icon {
    width: 80px;
    height: 80px;
  }
}

/* --- 募集要項セクション --- */
.lp-layout-energy .lp-details {
  background: #f9fafb;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.lp-layout-energy .lp-details-table {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  border: none;
}

.lp-layout-energy .lp-detail-row {
  border-bottom: 1px solid #f0f0f0;
}

.lp-layout-energy .lp-detail-row:last-child {
  border-bottom: none;
}

.lp-layout-energy .lp-detail-label {
  background: #DA3734;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 1.25rem 1.5rem;
  border-right: none;
  letter-spacing: 0.03em;
}

.lp-layout-energy .lp-detail-value {
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.8;
  background: #fff;
}

/* --- FAQセクション（出前館風: グレー背景 + 白カード + 赤Qマーク） --- */
.lp-layout-energy .lp-faq {
  background: #f5f5f5;
}

.lp-layout-energy .lp-faq-item {
  border-radius: 12px;
  border: none;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.lp-layout-energy .lp-faq-q {
  font-weight: 700;
  color: #1a1a1a;
  padding-left: 3rem;
  position: relative;
}

.lp-layout-energy .lp-faq-q::before {
  content: 'Q';
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 900;
  color: #DA3734;
}

.lp-layout-energy .lp-faq-a {
  padding-left: 3rem;
  position: relative;
}

.lp-layout-energy .lp-faq-a::before {
  content: 'A';
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-size: 1.25rem;
  font-weight: 900;
  color: #666;
}

.lp-layout-energy .lp-faq-chat-bubble-user {
  background: #DA3734;
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}

.lp-layout-energy .lp-faq-chat-bubble-support {
  border-radius: 16px 16px 16px 4px;
}

/* --- 応募セクション --- */
.lp-layout-energy .lp-apply {
  background: linear-gradient(135deg, #DA3734 0%, #ff6b6b 100%);
  position: relative;
}

.lp-layout-energy .lp-apply .lp-section-title {
  color: #fff;
}

.lp-layout-energy .lp-apply .lp-section-title::before {
  color: rgba(255, 255, 255, 0.7);
}

.lp-layout-energy .lp-apply .lp-section-title::after {
  background: rgba(255, 255, 255, 0.5);
}

.lp-layout-energy .lp-apply .lp-apply-text {
  color: rgba(255, 255, 255, 0.9);
}

.lp-layout-energy .lp-apply .lp-btn-apply-main {
  background: #fff;
  color: #DA3734;
  font-weight: 800;
  border-radius: 60px;
  padding: 1.25rem 3rem;
  font-size: 1.1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.lp-layout-energy .lp-apply .lp-btn-apply-main:hover {
  background: #fff8f8;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* --- 求人カードセクション --- */
.lp-layout-energy .lp-jobs {
  background: #fff;
}

.lp-layout-energy .lp-job-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}

.lp-layout-energy .lp-job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(218, 55, 52, 0.12);
}

/* --- ギャラリーセクション --- */
.lp-layout-energy .lp-gallery {
  background: #fff8f8;
}

.lp-layout-energy .lp-gallery-item img {
  border-radius: 12px;
  transition: transform 0.3s;
}

.lp-layout-energy .lp-gallery-item:hover img {
  transform: scale(1.03);
}

/* --- 社員の声セクション --- */
.lp-layout-energy .lp-testimonial {
  background: #f9fafb;
}

.lp-layout-energy .lp-testimonial-card {
  border-radius: 16px;
  border-top: 4px solid #DA3734;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* --- カスタムセクション --- */
.lp-layout-energy .lp-custom {
  background: #fff;
}

/* --- フッター --- */
.lp-layout-energy .lp-footer {
  background: #1a1a1a;
}

/* --- モバイル対応 --- */
@media (max-width: 768px) {
  .lp-hero--energy {
    min-height: auto;
  }

  .lp-hero-energy-bg {
    width: 100%;
    height: 60%;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  }

  .lp-hero-energy-inner {
    flex-direction: column;
    padding: 3rem 1.5rem 2rem;
    gap: 2rem;
  }

  .lp-hero-energy-image {
    flex: none;
    max-width: 100%;
    width: 100%;
    order: -1;
  }

  .lp-hero-energy-img {
    max-width: 320px;
    border-radius: 16px;
  }

  .lp-hero--energy .lp-hero-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .lp-hero-energy-decoration {
    height: 30px;
  }

  .lp-hero--energy .lp-hero-highlights {
    justify-content: center;
  }

  .lp-layout-energy .lp-section-title {
    padding-top: 2rem;
    font-size: 1.5rem;
  }

  .lp-layout-energy .lp-detail-row {
    grid-template-columns: 1fr;
  }

  .lp-layout-energy .lp-detail-label {
    padding: 0.75rem 1.25rem;
  }

  .lp-layout-energy .lp-detail-value {
    padding: 1rem 1.25rem;
  }
}

/* ============================================
   レスポンシブ調整（テンプレート改善用）
   ============================================ */

@media (max-width: 768px) {
  /* Impact: モバイルでも大きな数字 */
  .lp-layout-impact .lp-highlight-value,
  .lp-layout-impact .lp-job-salary {
    font-size: 2rem;
  }

  /* Elegant: モバイルでも余白キープ */
  .lp-layout-elegant section {
    padding: 4rem 1.5rem;
  }

  /* Playful: モバイルでも楽しさキープ */
  .lp-layout-playful .lp-hero-pretitle {
    transform: rotate(-1deg);
  }
}

/* ========================================
   セクション背景パターン
   ======================================== */

.lp-section-bg-wrap {
  position: relative;
}

/* ラップ内のセクションの背景を透明にして、親の背景を見せる */
.lp-section-bg-wrap > section {
  background: transparent !important;
}

/* ドットパターン */
.lp-bg-pattern-dots {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ストライプパターン */
.lp-bg-pattern-stripes {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 19px,
    rgba(0, 0, 0, 0.04) 19px,
    rgba(0, 0, 0, 0.04) 20px
  );
}

/* 斜線パターン */
.lp-bg-pattern-diagonal {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 14px,
    rgba(0, 0, 0, 0.04) 14px,
    rgba(0, 0, 0, 0.04) 15px
  );
}

/* グリッドパターン */
.lp-bg-pattern-grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ウェーブパターン */
.lp-bg-pattern-wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cpath d='M0 15 Q15 0 30 15 Q45 30 60 15' fill='none' stroke='rgba(0,0,0,0.06)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 30px;
}

/* ジグザグパターン */
.lp-bg-pattern-zigzag {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 20 L10 0 L20 20 L30 0 L40 20' fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 20px;
}

/* 背景画像 + パターンの併用時はオーバーレイ */
.lp-section-bg-wrap[style*="background-image: url"].lp-bg-pattern-dots,
.lp-section-bg-wrap[style*="background-image: url"].lp-bg-pattern-stripes,
.lp-section-bg-wrap[style*="background-image: url"].lp-bg-pattern-diagonal,
.lp-section-bg-wrap[style*="background-image: url"].lp-bg-pattern-grid {
  background-blend-mode: overlay;
}

/* ========================================
   カルーセルセクション
   ======================================== */

.lp-carousel {
  padding: 4rem 1rem;
  background: var(--lp-bg);
}

.lp-carousel .lp-section-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.lp-carousel .lp-section-title {
  text-align: center;
  margin-bottom: 2rem;
}

.lp-carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.lp-carousel-track {
  position: relative;
  width: 100%;
}

.lp-carousel-slide {
  display: none;
  width: 100%;
}

.lp-carousel-slide.active {
  display: block;
  animation: carouselFadeIn 0.5s ease-in-out;
}

@keyframes carouselFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lp-carousel-slide-inner {
  position: relative;
}

.lp-carousel-slide img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  display: block;
}

.lp-carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: #fff;
  font-size: 0.9375rem;
}

/* カルーセルボタン */
.lp-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.lp-carousel-btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.1);
}

.lp-carousel-btn svg {
  width: 24px;
  height: 24px;
  color: #333;
}

.lp-carousel-prev {
  left: 1rem;
}

.lp-carousel-next {
  right: 1rem;
}

/* カルーセルドット */
.lp-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.lp-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--lp-border);
  cursor: pointer;
  transition: all 0.2s;
}

.lp-carousel-dot:hover {
  background: var(--lp-text-light);
}

.lp-carousel-dot.active {
  background: var(--lp-primary);
  transform: scale(1.2);
}

/* カルーセルカウンター */
.lp-carousel-counter {
  text-align: center;
  margin-top: 0.75rem;
  color: var(--lp-text-light);
  font-size: 0.875rem;
}

/* カルーセル空状態 */
.lp-carousel-placeholder {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--lp-bg-gray);
  border-radius: 12px;
  color: var(--lp-text-light);
}

/* カルーセルレスポンシブ */
@media (max-width: 768px) {
  .lp-carousel {
    padding: 3rem 1rem;
  }

  .lp-carousel-btn {
    width: 36px;
    height: 36px;
  }

  .lp-carousel-btn svg {
    width: 18px;
    height: 18px;
  }

  .lp-carousel-prev {
    left: 0.5rem;
  }

  .lp-carousel-next {
    right: 0.5rem;
  }

  .lp-carousel-slide img {
    max-height: 400px;
  }
}

/* ========================================
   動画セクション
   ======================================== */

.lp-video {
  padding: 4rem 1rem;
  background: var(--lp-bg);
}

.lp-video .lp-section-inner {
  max-width: 900px;
  margin: 0 auto;
}

.lp-video .lp-section-title {
  text-align: center;
  margin-bottom: 2rem;
}

.lp-video-wrapper {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

/* アスペクト比 */
.lp-video-aspect-16-9 {
  padding-top: 56.25%;
}

.lp-video-aspect-4-3 {
  padding-top: 75%;
}

.lp-video-aspect-1-1 {
  padding-top: 100%;
}

.lp-video-aspect-9-16 {
  padding-top: 177.78%;
  max-width: 400px;
  margin: 0 auto;
}

.lp-video-wrapper iframe,
.lp-video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.lp-video-description {
  margin-top: 1rem;
  text-align: center;
  color: var(--lp-text-light);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* 動画エラー */
.lp-video-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background: rgba(220, 38, 38, 0.9);
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 0.875rem;
}

/* 動画プレースホルダー */
.lp-video-placeholder {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--lp-bg-gray);
  border-radius: 12px;
}

.lp-video-placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.lp-video-placeholder p {
  color: var(--lp-text-light);
}

/* 全幅表示 */
.lp-video-fullwidth .lp-section-inner {
  max-width: 100%;
  padding: 0;
}

.lp-video-fullwidth .lp-video-wrapper {
  border-radius: 0;
}

/* 動画レスポンシブ */
@media (max-width: 768px) {
  .lp-video {
    padding: 3rem 1rem;
  }

  .lp-video-aspect-9-16 {
    max-width: 100%;
    padding-top: 100%;
  }
}

/* ========================================
   管理画面エディター追加スタイル
   ======================================== */

/* カルーセル・動画エディターアイテム */
.carousel-items .editor-item,
.video-preview {
  background: #f9fafb;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.video-preview {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-preview img {
  max-width: 100%;
  border-radius: 8px;
}

.preview-empty,
.preview-info {
  color: #6b7280;
  font-size: 0.875rem;
}

.form-hint {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* プレースホルダー共通スタイル */
.lp-carousel-placeholder,
.lp-gallery-placeholder,
.lp-custom-placeholder {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--lp-bg-gray);
  border-radius: 12px;
  border: 2px dashed var(--lp-border);
}

.lp-carousel-placeholder-icon,
.lp-gallery-placeholder-icon,
.lp-custom-placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.lp-placeholder-hint {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--lp-text-light);
}

/* ========================================
   カルーセルエディタ（編集モード）
   ======================================== */

.lp-carousel-editor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lp-carousel-editor {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.lp-carousel-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.lp-carousel-editor-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.lp-carousel-editor-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.lp-carousel-editor-close:hover {
  color: #111827;
}

.lp-carousel-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.lp-carousel-editor-field {
  margin-bottom: 1rem;
}

.lp-carousel-editor-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}

.lp-carousel-editor-title {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9375rem;
}

.lp-carousel-editor-title:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.lp-carousel-editor-hint {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

.lp-carousel-editor-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.lp-carousel-editor-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lp-carousel-editor-item.has-content {
  border-color: #6366f1;
}

.lp-carousel-editor-item.lp-carousel-item-dragging {
  opacity: 0.5;
}

.lp-carousel-editor-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.lp-carousel-editor-handle {
  cursor: grab;
  color: #9ca3af;
  font-size: 1rem;
}

.lp-carousel-editor-number {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  flex: 1;
}

.lp-carousel-editor-delete {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.lp-carousel-editor-delete:hover {
  opacity: 1;
}

.lp-carousel-editor-fields {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  align-items: start;
}

.lp-carousel-editor-preview {
  width: 120px;
  height: 80px;
  background: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-carousel-editor-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-carousel-no-image {
  font-size: 0.75rem;
  color: #9ca3af;
  text-align: center;
}

.lp-carousel-editor-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lp-carousel-editor-inputs .lp-carousel-editor-field {
  margin-bottom: 0;
}

.lp-carousel-editor-inputs label {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.lp-carousel-editor-url,
.lp-carousel-editor-alt,
.lp-carousel-editor-caption {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.8125rem;
}

.lp-carousel-editor-url:focus,
.lp-carousel-editor-alt:focus,
.lp-carousel-editor-caption:focus {
  outline: none;
  border-color: #6366f1;
}

.lp-carousel-editor-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem;
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-carousel-editor-add-btn:hover {
  background: #e5e7eb;
  border-color: #6366f1;
  color: #6366f1;
}

.lp-carousel-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}

.lp-carousel-editor-btn {
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-carousel-editor-btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}

.lp-carousel-editor-btn-secondary:hover {
  background: #f3f4f6;
}

.lp-carousel-editor-btn-primary {
  background: #6366f1;
  color: #fff;
}

.lp-carousel-editor-btn-primary:hover {
  background: #4f46e5;
}

/* ========================================
   動画エディタ（編集モード）
   ======================================== */

.lp-video-editor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lp-video-editor {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.lp-video-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.lp-video-editor-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.lp-video-editor-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.lp-video-editor-close:hover {
  color: #111827;
}

.lp-video-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.lp-video-editor-field {
  margin-bottom: 1rem;
}

.lp-video-editor-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}

.lp-video-editor-title,
.lp-video-editor-url {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9375rem;
}

.lp-video-editor-title:focus,
.lp-video-editor-url:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.lp-video-editor-hint {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.375rem;
}

.lp-video-editor-description {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9375rem;
  resize: vertical;
  min-height: 60px;
}

.lp-video-editor-description:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.lp-video-editor-preview-container label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

.lp-video-editor-preview {
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  padding-top: 56.25%;
}

.lp-video-editor-preview iframe,
.lp-video-editor-preview video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.lp-video-no-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #9ca3af;
  font-size: 0.875rem;
  text-align: center;
}

.lp-video-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}

.lp-video-editor-btn {
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-video-editor-btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}

.lp-video-editor-btn-secondary:hover {
  background: #f3f4f6;
}

.lp-video-editor-btn-primary {
  background: #6366f1;
  color: #fff;
}

.lp-video-editor-btn-primary:hover {
  background: #4f46e5;
}

/* エディタ レスポンシブ */
@media (max-width: 640px) {
  .lp-carousel-editor,
  .lp-video-editor {
    margin: 0.5rem;
    max-height: calc(100vh - 1rem);
  }

  .lp-carousel-editor-fields {
    grid-template-columns: 1fr;
  }

  .lp-carousel-editor-preview {
    width: 100%;
    height: 150px;
  }

  .lp-carousel-editor-footer,
  .lp-video-editor-footer {
    flex-direction: column;
  }

  .lp-carousel-editor-btn,
  .lp-video-editor-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   ヒーローCTAセクション（応募ボタン・動画ボタン）
   ======================================== */

.lp-hero-cta-section {
  background: linear-gradient(135deg, var(--lp-bg-gray) 0%, #ffffff 100%);
  padding: 1rem;
}

.lp-hero-cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.lp-hero-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 400px;
  min-height: 5rem;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.lp-hero-cta-btn--apply {
  background: linear-gradient(135deg, var(--lp-primary) 0%, var(--lp-primary-dark) 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.lp-hero-cta-btn--apply:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

.lp-hero-cta-btn--video {
  background: #ffffff;
  color: var(--lp-text);
  border: 2px solid var(--lp-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.lp-hero-cta-btn--video:hover {
  border-color: var(--lp-primary);
  color: var(--lp-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.lp-hero-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.lp-hero-cta-btn--video .lp-hero-cta-icon {
  background: var(--lp-highlight);
  color: #ffffff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

.lp-hero-cta-btn--video .lp-hero-cta-icon svg {
  width: 14px;
  height: 14px;
}

/* ========================================
   動画モーダル
   ======================================== */

.lp-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.lp-video-modal.active {
  opacity: 1;
  visibility: visible;
}

.lp-video-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.lp-video-modal-content {
  position: relative;
  width: 90%;
  max-width: 900px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.lp-video-modal.active .lp-video-modal-content {
  transform: scale(1);
}

.lp-video-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 10;
}

.lp-video-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lp-video-modal-player {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background: #000;
}

.lp-video-modal-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* レスポンシブ */
@media (min-width: 768px) {
  .lp-hero-cta-section {
    padding: 1.25rem 1.5rem;
  }

  .lp-hero-cta-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
  }

  .lp-hero-cta-btn {
    width: auto;
    min-width: 280px;
    padding: 1.25rem 2.5rem;
  }
}

@media (max-width: 480px) {
  .lp-hero-cta-btn {
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }

  .lp-video-modal-close {
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
  }
}

/* ========================================
   共通レイアウトコンポーネント
   ヘッダー、フッター、固定CTAバー
   ======================================== */

/* --- サイトヘッダー --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.site-header-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 10px;
}

.site-header-logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.site-header-company-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.3px;
}

/* ロゴ画像がある場合は会社名を少し控えめに */
.site-header-logo-img + .site-header-company-name {
  font-size: 0.95rem;
  font-weight: 600;
}

.site-header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header-nav-link {
  text-decoration: none;
  color: #1e293b;
  font-weight: bold;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.site-header-nav-link:hover {
  color: var(--lp-primary, #6366f1);
}

.site-header-back-link {
  text-decoration: none;
  color: #64748b;
  font-size: 0.85rem;
  transition: color 0.2s;
}

.site-header-back-link:hover {
  color: #1e293b;
}

/* ヘッダーがある場合のbodyパディング */
.has-fixed-header {
  padding-top: 70px;
}

/* --- サイトフッター --- */
.site-footer {
  background: #1e293b;
  color: #fff;
  padding: 60px 20px 120px;
  text-align: center;
}

.site-footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.site-footer-company {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.site-footer-copyright {
  opacity: 0.6;
  font-size: 0.85rem;
  margin: 0;
}

/* CTAバーがある場合のフッターパディング */
.has-fixed-cta-bar .site-footer {
  padding-bottom: 140px;
}

/* --- 固定CTAバー --- */
.fixed-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  padding: 15px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 1900;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.fixed-cta-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e293b;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.fixed-cta-phone:hover {
  color: var(--lp-primary, #6366f1);
}

.fixed-cta-phone-icon {
  font-size: 1.1rem;
}

.fixed-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-primary, #6366f1);
  color: #fff;
  padding: 14px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  transition: all 0.2s;
}

.fixed-cta-button:hover {
  background: var(--lp-primary-dark, #4f46e5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/* CTAバーがある場合のbodyパディング */
.has-fixed-cta-bar {
  padding-bottom: 80px;
}

/* レスポンシブ: 共通レイアウト */
@media (max-width: 768px) {
  .site-header {
    height: 60px;
  }

  .has-fixed-header {
    padding-top: 60px;
  }

  .site-header-logo-img {
    height: 32px;
  }

  .site-header-company-name {
    font-size: 1.1rem;
  }

  .site-header-back-link {
    display: none;
  }

  .fixed-cta-bar {
    flex-direction: column;
    padding: 12px 15px;
    gap: 10px;
  }

  .fixed-cta-phone {
    font-size: 0.85rem;
  }

  .fixed-cta-button {
    width: 100%;
    padding: 12px 20px;
    font-size: 0.95rem;
  }

  .has-fixed-cta-bar {
    padding-bottom: 110px;
  }

  .site-footer {
    padding-bottom: 140px;
  }
}

/* ========================================
   イエローテンプレート専用スタイル
   ======================================== */

/* イエローテンプレート用CSS変数 */
.lp-body[data-layout-style="yellow"] {
  --lp-primary: #ff9800;
  --lp-primary-dark: #f57c00;
  --lp-accent: #ff9800;
}

/* イエロー: ヘッダー */
.site-header[data-pattern="yellow"],
.lp-body[data-layout-style="yellow"] .site-header {
  border-bottom-color: #ff980020;
}

.lp-body[data-layout-style="yellow"] .site-header-nav-link:hover {
  color: #ff9800;
}

/* イエロー: ヒーロー */
.lp-hero--yellow {
  min-height: calc(100vh - 70px);
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6));
  background-size: cover;
  background-position: center;
}

.lp-hero--yellow .lp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.lp-hero--yellow .lp-hero-overlay {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6));
}

.lp-hero--yellow .lp-hero-content {
  max-width: 800px;
  z-index: 10;
  color: #fff;
}

.lp-hero--yellow .lp-hero-pretitle {
  color: #ff9800;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 15px;
  letter-spacing: 0.1em;
}

.lp-hero--yellow .lp-hero-title {
  font-size: clamp(2.2rem, 7vw, 3.8rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 20px;
  color: #fff;
}

.lp-hero--yellow .lp-hero-title span {
  color: #ff9800;
}

.lp-hero--yellow .lp-hero-company {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 30px;
}

.lp-hero--yellow .lp-hero-highlights {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.lp-hero--yellow .lp-highlight-item {
  border-left: 4px solid #ff9800;
  padding-left: 15px;
  text-align: left;
}

.lp-hero--yellow .lp-highlight-label {
  display: block;
  font-size: 0.85rem;
  opacity: 0.8;
}

.lp-hero--yellow .lp-highlight-value {
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
}

/* イエロー: 数字セクション */
.lp-body[data-layout-style="yellow"] .lp-section-title span,
.lp-body[data-layout-style="yellow"] .lp-section-pretitle {
  color: #ff9800;
}

.lp-body[data-layout-style="yellow"] .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  text-align: center;
}

.lp-body[data-layout-style="yellow"] .number-box {
  background: #f8fafc;
  padding: 40px 20px;
  border-radius: 20px;
  border: 1px solid #eef2f6;
}

.lp-body[data-layout-style="yellow"] .number-box .num {
  font-size: 3rem;
  font-weight: 900;
  color: #ff9800;
}

/* イエロー: 求人カード */
.lp-body[data-layout-style="yellow"] .recruit-job-card,
.lp-body[data-layout-style="yellow"] .lp-job-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 30px;
  transition: all 0.3s;
}

.lp-body[data-layout-style="yellow"] .recruit-job-card:hover,
.lp-body[data-layout-style="yellow"] .lp-job-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.lp-body[data-layout-style="yellow"] .job-tag {
  background: #fff3e0;
  color: #e65100;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
}

.lp-body[data-layout-style="yellow"] .job-salary {
  color: #ff9800;
  font-size: 1.4rem;
  font-weight: 900;
}

/* イエロー: タブナビゲーション */
.lp-body[data-layout-style="yellow"] .tab-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.lp-body[data-layout-style="yellow"] .tab-btn {
  padding: 12px 30px;
  border: 2px solid #ff9800;
  border-radius: 50px;
  background: #fff;
  font-weight: bold;
  cursor: pointer;
  color: #ff9800;
  transition: all 0.3s;
}

.lp-body[data-layout-style="yellow"] .tab-btn.active,
.lp-body[data-layout-style="yellow"] .tab-btn:hover {
  background: #ff9800;
  color: #fff;
}

/* イエロー: CTAボタン */
.lp-body[data-layout-style="yellow"] .fixed-cta-button {
  background: #ff9800;
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}

.lp-body[data-layout-style="yellow"] .fixed-cta-button:hover {
  background: #f57c00;
  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}

.lp-body[data-layout-style="yellow"] .lp-apply-btn,
.lp-body[data-layout-style="yellow"] .lp-cta-button {
  background: #ff9800;
}

.lp-body[data-layout-style="yellow"] .lp-apply-btn:hover,
.lp-body[data-layout-style="yellow"] .lp-cta-button:hover {
  background: #f57c00;
}

/* イエロー: フッター */
.lp-body[data-layout-style="yellow"] .site-footer {
  background: #1e293b;
}

/* レスポンシブ: イエローテンプレート */
@media (max-width: 768px) {
  .lp-hero--yellow .lp-hero-highlights {
    flex-direction: column;
    gap: 15px;
  }

  .lp-hero--yellow .lp-highlight-value {
    font-size: 1.3rem;
  }
}

/* ========================================
   セクション追加モーダル（LP設定と統一）
   ======================================== */

.template-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.template-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.template-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #4AA7C0;
  color: #fff;
}

.template-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.template-modal-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.template-modal-close:hover {
  opacity: 1;
}

.template-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.template-modal-description {
  margin: 0 0 20px;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
}

.template-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.template-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.template-item:hover {
  border-color: #4AA7C0;
  box-shadow: 0 2px 8px rgba(74, 167, 192, 0.1);
}

.template-thumbnail {
  flex-shrink: 0;
  width: 100px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.template-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-info {
  flex: 1;
  min-width: 0;
}

.template-name {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.template-description {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.btn-add-template {
  flex-shrink: 0;
  padding: 8px 16px;
  background: #fff;
  color: #4AA7C0;
  border: 1px solid #4AA7C0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-template:hover {
  background: #4AA7C0;
  color: #fff;
}

.template-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.btn-template-cancel {
  padding: 10px 32px;
  background: #fff;
  color: #4AA7C0;
  border: 1px solid #4AA7C0;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-template-cancel:hover {
  background: #f0f9fb;
}

/* 無効化されたテンプレートアイテム */
.template-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.template-item.disabled:hover {
  border-color: #e5e7eb;
  box-shadow: none;
}

.btn-add-template:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #d1d5db;
}

.btn-add-template:disabled:hover {
  background: #f3f4f6;
  color: #9ca3af;
}

/* レスポンシブ: セクション追加モーダル */
@media (max-width: 640px) {
  .template-modal {
    max-width: 100%;
    margin: 10px;
  }

  .template-item {
    flex-wrap: wrap;
    gap: 12px;
  }

  .template-thumbnail {
    width: 80px;
    height: 56px;
  }

  .template-info {
    flex: 1 1 calc(100% - 96px);
  }

  .btn-add-template {
    width: 100%;
    text-align: center;
  }
}

/* ===========================================
   LP編集モード: モバイルプレビュー
   =========================================== */

/* モバイルプレビュー時の背景 */
body.lp-preview-mode-mobile.lp-edit-mode {
  background: #e5e7eb;
}

/* モバイルプレビュー時のメインエリア */
body.lp-preview-mode-mobile.lp-edit-mode #lp-main {
  background: #e5e7eb;
  padding: 20px 0;
  min-height: 100vh;
}

/* モバイルプレビュー時のコンテンツ - スマホフレーム風 */
body.lp-preview-mode-mobile.lp-edit-mode #lp-content {
  width: 375px !important;
  max-width: 375px !important;
  min-height: 667px;
  margin: 0 auto !important;
  margin-right: calc(380px + ((100vw - 380px - 375px) / 2)) !important;
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

/* モバイルプレビュー時のヘッダー非表示 */
body.lp-preview-mode-mobile.lp-edit-mode .site-header,
body.lp-preview-mode-mobile.lp-edit-mode .lp-header {
  display: none !important;
}

/* モバイルプレビュー時のツールバー調整 */
body.lp-preview-mode-mobile.lp-edit-mode .lp-edit-toolbar {
  width: calc(100% - 380px);
}

/* モバイルプレビュー時の固定CTAバー非表示 */
body.lp-preview-mode-mobile.lp-edit-mode .fixed-cta-bar {
  display: none !important;
}

/* モバイルプレビュー時のフッター */
body.lp-preview-mode-mobile.lp-edit-mode .lp-footer {
  display: none !important;
}

body.lp-preview-mode-mobile.lp-edit-mode .site-footer {
  border-radius: 0 0 32px 32px;
  margin: 0;
}

/* モバイルプレビュー時のセクション編集ボタン調整 */
body.lp-preview-mode-mobile.lp-edit-mode .lp-section-edit-btn,
body.lp-preview-mode-mobile.lp-edit-mode .lp-section-quick-edit-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
}

/* モバイルプレビュー時のドラッグハンドル */
body.lp-preview-mode-mobile.lp-edit-mode .lp-section-drag-handle {
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
}

/* モバイルプレビュー時のヒーロー調整 */
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero {
  border-radius: 32px 32px 0 0;
  overflow: hidden;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-title {
  font-size: 1.25rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-subtitle {
  font-size: 0.875rem;
}

/* モバイルプレビュー時の各セクション調整 */
body.lp-preview-mode-mobile.lp-edit-mode .lp-section-inner {
  padding: 1rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-section-title {
  font-size: 1.125rem;
}

/* モバイルプレビュー時の募集要項（リアルタイムプレビューと同じ2カラム形式） */
body.lp-preview-mode-mobile.lp-edit-mode .lp-detail-row {
  grid-template-columns: 90px 1fr;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-detail-label {
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-detail-value {
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

/* モバイルプレビュー時のポイントカード */
body.lp-preview-mode-mobile.lp-edit-mode .lp-points-grid,
body.lp-preview-mode-mobile.lp-edit-mode .lp-points-grid--custom {
  grid-template-columns: 1fr !important;
  display: grid !important;
  overflow-x: visible !important;
  gap: 0.75rem !important;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-point-card,
body.lp-preview-mode-mobile.lp-edit-mode .lp-point-card--custom {
  padding: 1rem;
  flex: 1 1 100% !important;
  min-width: 0 !important;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-point-title {
  font-size: 0.9375rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-point-desc {
  font-size: 0.8125rem;
}

/* モバイルプレビュー時のFAQ */
body.lp-preview-mode-mobile.lp-edit-mode .lp-faq-chat-bubble {
  max-width: 85%;
  font-size: 0.8125rem;
}

/* モバイルプレビュー時の求人カード - 横スワイプ対応 */
body.lp-preview-mode-mobile.lp-edit-mode .lp-jobs-list {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  margin: 0 -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-jobs-list::-webkit-scrollbar {
  height: 4px;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-jobs-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-jobs-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-job-card {
  flex: 0 0 85%;
  min-width: 280px;
  max-width: 320px;
  scroll-snap-align: start;
  padding: 1rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-job-title {
  font-size: 0.9375rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-job-card-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-job-type {
  align-self: flex-start;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-job-card-footer {
  text-align: center;
  padding: 0.75rem 1rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-job-info {
  font-size: 0.75rem;
}

/* モバイルプレビュー時の応募セクション */
body.lp-preview-mode-mobile.lp-edit-mode .lp-apply-methods {
  flex-direction: column;
  gap: 1rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-apply-method {
  padding: 1rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-btn-apply-main,
body.lp-preview-mode-mobile.lp-edit-mode .lp-btn-tel-main {
  font-size: 0.9375rem;
  padding: 0.75rem 1.5rem;
}

/* モバイルプレビュー時のヒーロー（基本レスポンシブ - @media 768pxの代替） */
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero {
  min-height: 70vh;
  padding: 6rem 1rem 3rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-highlights {
  flex-direction: column;
  align-items: center;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-highlight-item {
  width: 100%;
  max-width: 280px;
}

/* モバイルプレビュー時のヒーローバリアント: split（左右分割→縦並び） */
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-split-inner {
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 1rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-split-image {
  flex: none;
  max-width: 100%;
  width: 100%;
  order: -1;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-split-img {
  max-width: 320px;
  border-radius: 16px;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--split .lp-hero-title {
  font-size: clamp(1.75rem, 7vw, 2.5rem);
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--split .lp-hero-highlights {
  justify-content: center;
}

/* モバイルプレビュー時のヒーローバリアント: center-bg */
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--center-bg {
  min-height: 60vh;
  padding: 4rem 1rem 3rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--center-bg .lp-hero-title {
  font-size: 1.75rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--center-bg .lp-hero-highlights {
  flex-direction: column;
  align-items: center;
}

/* モバイルプレビュー時のヒーローバリアント: overlay-dark */
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--overlay-dark .lp-hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
}

/* モバイルプレビュー時のヒーローバリアント: duotone-merits */
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--duotone-merits {
  min-height: 65vh;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--duotone-merits .lp-hero-content {
  padding: 3rem 1rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--duotone-merits .lp-hero-title {
  font-size: 1.75rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-merits {
  gap: 0.75rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-merit-card {
  min-width: 140px;
  padding: 1rem 1.25rem;
}

/* モバイルプレビュー時のヒーローバリアント: text-clean */
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--text-clean .lp-hero-content {
  padding-left: 1rem;
}

/* モバイルプレビュー時の新バリアント（split系）: 縦並び化 */
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--dark-badges .lp-hero-split-inner,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--bold-circles .lp-hero-split-inner,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--split-list .lp-hero-split-inner,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--split-check .lp-hero-split-inner,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--banner-bar .lp-hero-split-inner,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--dark-pills .lp-hero-split-inner {
  flex-direction: column;
  min-height: auto;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--dark-badges .lp-hero-split-img,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--bold-circles .lp-hero-split-img,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--split-list .lp-hero-split-img,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--split-check .lp-hero-split-img,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--banner-bar .lp-hero-split-img,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--dark-pills .lp-hero-split-img {
  height: 250px;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--dark-badges .lp-hero-title,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--bold-circles .lp-hero-title {
  font-size: 1.8rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--hex-badges .lp-hero-title,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--mono-bold .lp-hero-title,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--minimal-list .lp-hero-title {
  font-size: 2rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--solid-cards .lp-hero-title {
  font-size: 2.5rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--split-list .lp-hero-title,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--split-check .lp-hero-title,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--banner-bar .lp-hero-title,
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--dark-pills .lp-hero-title {
  font-size: 1.8rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero--casual-cards .lp-hero-title {
  font-size: 1.8rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-merits--casual {
  flex-direction: column;
  gap: 1rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-merits--solid {
  flex-direction: column;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-merits--mono {
  flex-direction: column;
  align-items: center;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-hex-badge {
  width: 90px;
  height: 90px;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-merits--bar {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* モバイルプレビュー時のCTAボタン */
body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-cta-buttons {
  flex-direction: column;
  gap: 0.5rem;
}

body.lp-preview-mode-mobile.lp-edit-mode .lp-hero-cta-btn {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

/* PCプレビュー時はデフォルト表示 */
body.lp-preview-mode-pc.lp-edit-mode #lp-content {
  background: #fff;
}

/* ==================== LPエディター UX改善 ==================== */

/* ヘッダー上部レイアウト */
.lp-editor-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

/* Undo/Redoボタン */
.lp-editor-undo-redo {
  display: flex;
  gap: 0.25rem;
}

.btn-undo,
.btn-redo {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-undo:hover:not(:disabled),
.btn-redo:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.btn-undo:disabled,
.btn-redo:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* パネル折りたたみボタン */
.btn-collapse-panel {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #6b7280;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-collapse-panel:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* パネル折りたたみ状態 */
.lp-editor-panel.collapsed {
  width: 48px;
  overflow: hidden;
}

.lp-editor-panel.collapsed .lp-editor-header-top,
.lp-editor-panel.collapsed .lp-editor-tabs,
.lp-editor-panel.collapsed .lp-editor-tab-content,
.lp-editor-panel.collapsed .lp-editor-footer-status,
.lp-editor-panel.collapsed .btn-save-text,
.lp-editor-panel.collapsed .shortcut-hint {
  display: none;
}

.lp-editor-panel.collapsed .lp-editor-header {
  padding: 0.5rem;
}

.lp-editor-panel.collapsed .lp-editor-actions {
  flex-direction: column;
  gap: 0.5rem;
}

.lp-editor-panel.collapsed .btn-save-lp {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
}

.lp-content-sidebar-collapsed {
  margin-right: 48px !important;
}

/* フッターステータス */
.lp-editor-footer-status {
  margin-bottom: 0.5rem;
}

/* 自動保存インジケーター */
.autosave-indicator-editor {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #6b7280;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.autosave-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af;
  transition: all 0.2s;
}

.autosave-indicator-editor.saving .autosave-dot {
  background: #f59e0b;
  animation: pulse 1s infinite;
}

.autosave-indicator-editor.saved .autosave-dot {
  background: #10b981;
}

.autosave-indicator-editor.saving {
  color: #f59e0b;
}

.autosave-indicator-editor.saved {
  color: #10b981;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 保存ボタン改善 */
.btn-save-lp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  position: relative;
}

.btn-save-lp .shortcut-hint {
  font-size: 0.625rem;
  opacity: 0.7;
  padding: 0.125rem 0.25rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  margin-left: 0.25rem;
}

.btn-save-lp.has-changes {
  animation: glow 1.5s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); }
}

/* 未保存バッジ */
.unsaved-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* 小さいローディングスピナー */
.loading-spinner-small {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 画像ホバープレビュー */
.image-hover-preview {
  position: fixed;
  z-index: 10000;
  max-width: 200px;
  max-height: 150px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  background: #fff;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

.image-hover-preview.visible {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   動画URL入力フィールド改善
   ======================================== */

.video-url-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.video-url-input-wrapper input {
  flex: 1;
  padding-right: 36px;
}

.video-url-input-wrapper input.is-valid {
  border-color: #10b981;
  background-color: #f0fdf4;
}

.video-url-input-wrapper input.is-invalid {
  border-color: #ef4444;
  background-color: #fef2f2;
}

.video-url-clear-btn {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: #9ca3af;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.video-url-clear-btn:hover {
  background: #6b7280;
}

.video-url-validation {
  margin-top: 4px;
  font-size: 12px;
  min-height: 18px;
}

.video-url-validation.valid .validation-success {
  color: #10b981;
}

.video-url-validation.invalid .validation-error {
  color: #ef4444;
}

.video-url-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: #9ca3af;
}

.video-service-icon {
  font-size: 10px;
  color: #ef4444;
}

/* 動画プレビューコンテナ */
.video-preview-container {
  margin-top: 12px;
}

.video-preview-thumbnail {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #1f2937;
  aspect-ratio: 16 / 9;
}

.video-preview-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.2s;
}

.video-preview-thumbnail:hover .video-preview-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.video-preview-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  font-size: 16px;
  color: #1f2937;
  transition: transform 0.2s;
}

.video-preview-thumbnail:hover .video-preview-play {
  transform: scale(1.1);
}

.video-preview-service {
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 8px;
  border-radius: 4px;
}

/* サービス別プレースホルダ */
.video-preview-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.video-preview-placeholder.youtube {
  background: linear-gradient(135deg, #ff0000, #cc0000);
}

.video-preview-placeholder.vimeo {
  background: linear-gradient(135deg, #1ab7ea, #0f7ca8);
}

.video-preview-placeholder.tiktok {
  background: linear-gradient(135deg, #000000, #25f4ee);
}

.video-preview-placeholder.direct {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

/* エラー表示 */
.video-preview-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 13px;
}

.video-preview-error-icon {
  font-size: 16px;
}

/* ========================================
   ポイントエディタ タブ対応
   ======================================== */

.lp-points-editor--with-tabs {
  max-width: 700px;
}

.lp-points-editor-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 24px;
  background: #f9fafb;
}

.lp-points-editor-tab {
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
}

.lp-points-editor-tab:hover {
  color: #1f2937;
}

.lp-points-editor-tab.active {
  color: #6366f1;
  border-bottom-color: #6366f1;
  background: #fff;
}

.lp-points-editor-tab-content {
  display: none;
}

.lp-points-editor-tab-content.active {
  display: block;
}

/* ========================================
   ポイントスタイル設定
   ======================================== */

.points-style-settings {
  padding: 16px 0;
}

.style-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f3f4f6;
}

.style-section:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.style-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.style-field {
  margin-bottom: 16px;
}

.style-field:last-child {
  margin-bottom: 0;
}

.style-field > label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 8px;
}

.style-value {
  font-size: 12px;
  color: #9ca3af;
  font-family: monospace;
}

/* ボタングループ */
.style-button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.style-btn {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #4b5563;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.style-btn:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.style-btn.active {
  border-color: #6366f1;
  background: #eef2ff;
  color: #6366f1;
}

/* スライダー */
.style-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.style-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s;
}

.style-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.style-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.style-slider-sm {
  width: 60%;
}

/* カラー入力 */
.style-color-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.style-color {
  width: 40px;
  height: 32px;
  padding: 2px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
}

.style-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.style-color::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.style-color-sm {
  width: 32px;
  height: 28px;
}

.style-color-text {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: monospace;
  color: #4b5563;
}

.style-color-text:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 枠線行 */
.style-border-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* カスタムポイントセクション */
.lp-points--custom .lp-point-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.lp-points-grid--custom {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.lp-points-grid--custom::-webkit-scrollbar {
  height: 6px;
}

.lp-points-grid--custom::-webkit-scrollbar-track {
  background: transparent;
}

.lp-points-grid--custom::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

/* ========================================
   ポイントセクション 20バリアント
   ======================================== */

/* --- 共通ベーススタイル --- */
.lp-points {
  padding: 60px 0;
}
.lp-points .lp-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.lp-points .lp-section-title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 40px;
  color: #1f2937;
}
.lp-points .lp-points-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-points .lp-points-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --- 1. 王道コーポレート --- */
/* No Imageプレースホルダー共通 */
.lp-point-no-image {
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 500;
}

.lp-points--corporate {
  background: #f8fafc;
}
.lp-points--corporate .lp-point-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  border-top: 8px solid var(--lp-primary, #1e3a5f);
}
.lp-points--corporate .lp-point-card .lp-point-image,
.lp-points--corporate .lp-point-card .lp-point-no-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.lp-points--corporate .lp-point-body {
  padding: 24px;
}
.lp-points--corporate .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  color: var(--lp-primary, #1e3a5f);
  font-weight: 900;
  font-size: 0.85rem;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}
.lp-points--corporate .lp-point-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1f2937;
}
.lp-points--corporate .lp-point-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.7;
}

/* --- 2. インパクト・マネー --- */
.lp-points--impact-money {
  background: #fefce8;
}
.lp-points--impact-money .lp-point-card {
  background: #facc15;
  padding: 32px 28px;
  border: 4px solid #000;
  position: relative;
  transform: rotate(-1deg);
  transition: transform 0.3s;
}
.lp-points--impact-money .lp-point-card:hover {
  transform: rotate(0deg);
}
.lp-points--impact-money .lp-point-number {
  position: absolute;
  top: -14px;
  left: -14px;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff;
  font-weight: 900;
  padding: 4px 16px;
  font-size: 1.1rem;
}
.lp-points--impact-money .lp-point-title {
  font-size: 1.35rem;
  font-weight: 900;
  margin-top: 8px;
  margin-bottom: 12px;
  color: #000;
  line-height: 1.4;
}
.lp-points--impact-money .lp-point-desc {
  font-size: 0.875rem;
  font-weight: 700;
  border-top: 2px solid #000;
  padding-top: 14px;
  color: #000;
}

/* --- 3. ライフスタイル・ソフト --- */
.lp-points--lifestyle {
  background: #f0fdf4;
}
.lp-points--lifestyle .lp-points-grid {
  gap: 40px;
}
.lp-points--lifestyle .lp-point-card {
  text-align: center;
}
.lp-points--lifestyle .lp-point-icon {
  width: 96px;
  height: 96px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: #16a34a;
}
.lp-points--lifestyle .lp-point-icon svg {
  width: 36px;
  height: 36px;
}
.lp-points--lifestyle .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  color: #16a34a;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.lp-points--lifestyle .lp-point-title {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 12px;
  color: #1e293b;
}
.lp-points--lifestyle .lp-point-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.7;
  padding: 0 16px;
}

/* --- 4. ネオン・フューチャー --- */
.lp-points--neon {
  background: #0f172a;
  padding: 60px 0;
}
.lp-points--neon .lp-section-title {
  color: #e2e8f0;
}
.lp-points--neon .lp-point-card {
  background: #1e293b;
  border: 1px solid rgba(217, 70, 239, 0.3);
  padding: 32px 24px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.lp-points--neon .lp-point-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  background: rgba(217, 70, 239, 0.1);
  filter: blur(40px);
  transition: background 0.3s;
}
.lp-points--neon .lp-point-card:hover .lp-point-glow {
  background: rgba(217, 70, 239, 0.3);
}
.lp-points--neon .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  color: #e879f9;
  font-family: monospace;
  font-size: 0.75rem;
  margin-bottom: 14px;
}
.lp-points--neon .lp-point-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.lp-points--neon .lp-point-desc {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.7;
}

/* --- 5. マガジン・スタイル --- */
.lp-points--magazine {
  background: #fff;
}
.lp-points--magazine .lp-points-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.lp-points--magazine .lp-point-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
@media (min-width: 769px) {
  .lp-points--magazine .lp-point-row {
    flex-direction: row;
    gap: 48px;
  }
  .lp-points--magazine .lp-point-row--reverse {
    flex-direction: row-reverse;
  }
}
.lp-points--magazine .lp-point-image-wrap {
  width: 100%;
  position: relative;
}
@media (min-width: 769px) {
  .lp-points--magazine .lp-point-image-wrap {
    flex: 0 0 50%;
    width: auto;
  }
}
.lp-points--magazine .lp-point-image-wrap .lp-point-image,
.lp-points--magazine .lp-point-image-wrap .lp-point-no-image {
  width: 100% !important;
  height: 256px !important;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.3s;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: block;
}
.lp-points--magazine .lp-point-image-wrap:hover .lp-point-image {
  filter: grayscale(0%);
}
.lp-points--magazine .lp-point-number {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  background: #0f172a !important;
  border-radius: 0 !important;
  color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.5rem;
  z-index: 1;
}
.lp-points--magazine .lp-point-content {
  flex: 1;
  width: 100%;
}
.lp-points--magazine .lp-point-title {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 12px;
  color: #1e293b;
}
.lp-points--magazine .lp-point-desc {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
}

/* --- 6. クレイモフィズム --- */
.lp-points--clay {
  background: #f1f5f9;
}
.lp-points--clay .lp-points-grid {
  gap: 40px;
}
.lp-points--clay .lp-point-card {
  border-radius: 40px;
  background: #fff;
  box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lp-points--clay .lp-point-icon {
  width: 64px;
  height: 64px;
  background: #e0f2fe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
  color: #38bdf8;
}
.lp-points--clay .lp-point-icon svg {
  width: 28px;
  height: 28px;
}
.lp-points--clay .lp-point-title {
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 10px;
  color: #334155;
}
.lp-points--clay .lp-point-desc {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 700;
  line-height: 1.7;
}

/* --- 7. 斜めカッティング --- */
.lp-points--skew {
  background: #fff;
  overflow: hidden;
  padding: 40px 0;
}
.lp-points--skew .lp-section-title {
  display: none;
}
.lp-points--skew .lp-points-grid {
  gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 769px) {
  .lp-points--skew .lp-points-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.lp-points--skew .lp-point-card {
  background: var(--lp-primary, #dc2626) !important;
  color: #fff !important;
  padding: 48px 32px;
  transform: skewX(-12deg) !important;
  transition: filter 0.3s;
  cursor: default;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left;
}
.lp-points--skew .lp-point-card:hover {
  filter: brightness(0.85);
}
.lp-points--skew .lp-point-card-inner {
  transform: skewX(12deg);
}
.lp-points--skew .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  font-size: 2rem;
  font-weight: 900;
  opacity: 0.3;
  color: inherit;
}
.lp-points--skew .lp-point-title {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 12px;
  margin-top: 8px;
  font-style: italic;
}
.lp-points--skew .lp-point-desc {
  font-size: 0.8rem;
  opacity: 0.9;
}

/* --- 8. 女性活躍・クリーン --- */
.lp-points--feminine {
  background: #fff5f7;
}
.lp-points--feminine .lp-point-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px 24px;
  border: 2px solid #fce7f3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s;
}
.lp-points--feminine .lp-point-card:hover {
  box-shadow: 0 8px 24px rgba(244, 114, 182, 0.15);
}
.lp-points--feminine .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #f472b6 !important;
  color: #fff;
  border-radius: 9999px !important;
  padding: 4px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.lp-points--feminine .lp-point-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #db2777;
  margin-bottom: 12px;
}
.lp-points--feminine .lp-point-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.7;
}

/* --- 9. ダーク・テック --- */
.lp-points--dark-tech {
  background: #000;
  padding: 64px 0;
}
.lp-points--dark-tech .lp-section-title {
  color: #e2e8f0;
}
.lp-points--dark-tech .lp-points-grid {
  gap: 0;
  background: transparent;
  grid-template-columns: 1fr;
}
@media (min-width: 769px) {
  .lp-points--dark-tech .lp-points-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.lp-points--dark-tech .lp-point-card {
  background: #000 !important;
  padding: 32px;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left;
  position: relative;
}
/* PC: カード間の縦の仕切り線（途中まで） */
@media (min-width: 769px) {
  .lp-points--dark-tech .lp-point-card:not(:nth-child(3n))::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: #334155;
  }
}
/* スマホ: カード間の横の仕切り線（途中まで） */
@media (max-width: 768px) {
  .lp-points--dark-tech .lp-point-card:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 1px;
    background: #334155;
  }
}
.lp-points--dark-tech .lp-point-card:hover .lp-point-title {
  color: #3b82f6;
}
.lp-points--dark-tech .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  color: #3b82f6;
  font-family: monospace;
  font-size: 0.875rem;
  margin-bottom: 20px;
}
.lp-points--dark-tech .lp-point-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  transition: color 0.3s;
}
.lp-points--dark-tech .lp-point-desc {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.7;
}
/* ポラロイド風 - 画像+ボディ構造 */
.lp-points--polaroid .lp-point-card .lp-point-image,
.lp-points--polaroid .lp-point-card .lp-point-no-image {
  width: 100%;
  height: 192px;
  object-fit: cover;
  margin-bottom: 16px;
}
.lp-points--polaroid .lp-point-body-polaroid {
  padding: 0 8px 8px;
}

/* --- 10. ネオ・ブルータリズム --- */
.lp-points--neo-brutal {
  background: #f1f5f9;
}
.lp-points--neo-brutal .lp-point-card {
  padding: 32px;
  box-shadow: 8px 8px 0px 0px #000;
  border: 3px solid #000;
}
.lp-points--neo-brutal .lp-point-card--indigo { background: #818cf8; }
.lp-points--neo-brutal .lp-point-card--lime { background: #a3e635; }
.lp-points--neo-brutal .lp-point-card--orange { background: #fb923c; }
.lp-points--neo-brutal .lp-point-card--pink { background: #f472b6; }
.lp-points--neo-brutal .lp-point-card--cyan { background: #22d3ee; }
.lp-points--neo-brutal .lp-point-card--yellow { background: #facc15; }
.lp-points--neo-brutal .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  font-weight: 900;
  font-size: 1.5rem;
  color: #000;
  margin-bottom: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lp-points--neo-brutal .lp-point-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #000;
  margin-bottom: 12px;
}
.lp-points--neo-brutal .lp-point-desc {
  font-size: 0.875rem;
  font-weight: 700;
  color: #000;
}

/* --- 11. ステップ・フロー --- */
.lp-points--step-flow {
  background: #f3f4f6;
}
.lp-points--step-flow .lp-points-grid {
  position: relative;
  gap: 48px;
}
.lp-points--step-flow .lp-points-connector {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background: #fed7aa;
  transform: translateY(-50%);
  z-index: 0;
}
@media (min-width: 769px) {
  .lp-points--step-flow .lp-points-connector {
    display: block;
  }
}
.lp-points--step-flow .lp-point-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.lp-points--step-flow .lp-point-number {
  width: 56px;
  height: 56px;
  background: var(--lp-primary, #f97316);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.35rem;
  border: 6px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}
.lp-points--step-flow .lp-point-body {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-align: center;
  width: 100%;
  border: none;
}
.lp-points--step-flow .lp-point-title {
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--lp-primary, #ea580c);
  font-size: 1rem;
}
.lp-points--step-flow .lp-point-desc {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.7;
}

/* --- 12. ミニマル・ボーダー --- */
.lp-points--minimal-border {
  background: #fff;
}
.lp-points--minimal-border .lp-points-grid {
  gap: 0;
}
.lp-points--minimal-border .lp-point-card {
  padding: 40px;
}
.lp-points--minimal-border .lp-point-card--bordered {
  border-bottom: 1px solid #e2e8f0;
}
@media (min-width: 769px) {
  .lp-points--minimal-border .lp-point-card--bordered {
    border-bottom: none;
    border-right: 1px solid #e2e8f0;
  }
}
.lp-points--minimal-border .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  font-size: 2rem;
  font-weight: 900;
  color: #e2e8f0;
  font-style: italic;
  margin-bottom: 20px;
}
.lp-points--minimal-border .lp-point-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #1e293b;
  margin-bottom: 12px;
}
.lp-points--minimal-border .lp-point-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.7;
}

/* --- 13. グリッド・カード --- */
.lp-points--grid-emerald {
  background: #f0fdf4;
}
.lp-points--grid-emerald .lp-points-grid {
  gap: 1px;
  background: #a7f3d0;
  border: 2px solid #a7f3d0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  grid-template-columns: 1fr;
}
@media (min-width: 769px) {
  .lp-points--grid-emerald .lp-points-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.lp-points--grid-emerald .lp-point-card {
  background: #fff;
  padding: 44px 32px;
  transition: background 0.3s;
  text-align: left;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.lp-points--grid-emerald .lp-point-card:hover {
  background: #ecfdf5;
}
.lp-points--grid-emerald .lp-point-icon {
  color: #10b981;
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.lp-points--grid-emerald .lp-point-title {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 12px;
  color: #1e293b;
}
.lp-points--grid-emerald .lp-point-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.7;
}

/* --- 14. ポラロイド風 --- */
.lp-points--polaroid {
  background: #fefce8;
}
.lp-points--polaroid .lp-point-card {
  background: #fff;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transition: transform 0.3s;
}
.lp-points--polaroid .lp-point-card:hover {
  transform: rotate(0deg) !important;
}
.lp-points--polaroid .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  color: #d97706;
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 6px;
}
.lp-points--polaroid .lp-point-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #334155;
  margin-bottom: 8px;
}
.lp-points--polaroid .lp-point-desc {
  font-size: 0.8rem;
  color: #94a3b8;
  font-style: italic;
}

/* --- 15. グラスモフィズム --- */
.lp-points--glass {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 80px 0;
}
.lp-points--glass .lp-section-title {
  color: #fff;
}
.lp-points--glass .lp-point-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 28px 24px;
  color: #fff;
}
.lp-points--glass .lp-point-number {
  background: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 1rem;
  color: #fde68a;
}
.lp-points--glass .lp-point-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.lp-points--glass .lp-point-desc {
  font-size: 0.8rem;
  opacity: 0.9;
  line-height: 1.7;
}

/* --- 16. ベントー・グリッド --- */
.lp-points--bento {
  background: #f1f5f9;
}
.lp-points--bento .lp-points-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 16px;
}
.lp-points--bento .lp-point-card {
  border-radius: 24px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.lp-points--bento .lp-point-card--featured {
  grid-column: span 2;
  grid-row: span 2;
  background: #2563eb;
  color: #fff;
  padding: 40px;
  position: relative;
  overflow: hidden;
}
.lp-points--bento .lp-point-card--featured .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  opacity: 0.6;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: inherit;
}
.lp-points--bento .lp-point-card--featured .lp-point-title {
  font-size: 1.75rem;
  color: #fff;
}
.lp-points--bento .lp-point-card--featured .lp-point-desc {
  color: rgba(255,255,255,0.8);
}
.lp-points--bento .lp-point-card:not(.lp-point-card--featured):nth-child(odd) {
  background: #1e293b;
  color: #fff;
}
.lp-points--bento .lp-point-card:not(.lp-point-card--featured):nth-child(odd) .lp-point-title {
  color: #fff;
}
.lp-points--bento .lp-point-card:not(.lp-point-card--featured):nth-child(odd) .lp-point-desc {
  color: rgba(255,255,255,0.7);
}
.lp-points--bento .lp-point-card:not(.lp-point-card--featured):nth-child(even) {
  background: #fff;
  border: 2px solid #f1f5f9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.lp-points--bento .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  font-size: 0.75rem;
  color: #94a3b8;
  margin-bottom: 8px;
}
.lp-points--bento .lp-point-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #1e293b;
}
.lp-points--bento .lp-point-desc {
  font-size: 0.8rem;
  line-height: 1.6;
  color: #64748b;
}

/* --- 17. 縦型・詳細型 --- */
.lp-points--vertical-detail {
  background: #fff;
}
.lp-points--vertical-detail .lp-point-card {
  background: #fff;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-left: 8px solid #1e293b;
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.lp-points--vertical-detail .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  font-size: 2.5rem;
  font-weight: 900;
  color: #e2e8f0;
  flex-shrink: 0;
  line-height: 1;
}
.lp-points--vertical-detail .lp-point-content {
  flex: 1;
}
.lp-points--vertical-detail .lp-point-title {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 8px;
  color: #1e293b;
}
.lp-points--vertical-detail .lp-point-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.7;
}

/* --- 18. サークル・セントリック --- */
.lp-points--circle-centric {
  background: #eff6ff;
}
.lp-points--circle-centric .lp-points-grid {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
.lp-points--circle-centric .lp-points-center {
  width: 120px;
  height: 120px;
  background: #2563eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
  z-index: 2;
}
.lp-points--circle-centric .lp-point-card {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border: 1px solid #dbeafe;
  max-width: 260px;
  transition: transform 0.3s;
}
.lp-points--circle-centric .lp-point-card:hover {
  transform: scale(1.05);
}
.lp-points--circle-centric .lp-point-number {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: none !important;
  border-radius: 0 !important;
  display: inline !important;
  font-weight: 900;
  color: #2563eb;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.lp-points--circle-centric .lp-point-title {
  font-weight: 900;
  color: #2563eb;
  margin-bottom: 8px;
  font-size: 1rem;
}
.lp-points--circle-centric .lp-point-desc {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.6;
}

/* --- 19. アイソメトリック --- */
.lp-points--isometric {
  background: #eef2ff;
}
.lp-points--isometric .lp-points-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
@media (min-width: 769px) {
  .lp-points--isometric .lp-points-layout {
    flex-direction: row;
  }
}
.lp-points--isometric .lp-points-visual {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.lp-points--isometric .lp-points-visual-box {
  width: 200px;
  height: 200px;
  background: #c7d2fe;
  border-radius: 24px;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  box-shadow: 0 16px 48px rgba(99, 102, 241, 0.2);
  position: relative;
}
.lp-points--isometric .lp-points-visual-box > * {
  transform: rotate(-45deg);
}
.lp-points--isometric .lp-points-list {
  flex: 1;
  gap: 28px;
}
.lp-points--isometric .lp-point-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.lp-points--isometric .lp-point-number {
  background: #4f46e5;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-style: italic;
  flex-shrink: 0;
}
.lp-points--isometric .lp-point-content {
  flex: 1;
}
.lp-points--isometric .lp-point-title {
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
  font-size: 1rem;
}
.lp-points--isometric .lp-point-desc {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.6;
}

/* --- 20. チェックリスト形式 --- */
.lp-points--checklist {
  background: #f0fdf4;
}
.lp-points--checklist .lp-section-inner {
  max-width: 680px;
}
.lp-points--checklist .lp-section-title {
  font-style: italic;
}
.lp-points--checklist .lp-points-list {
  background: #fff;
  padding: 48px;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border-top: 8px solid #10b981;
  gap: 36px;
}
.lp-points--checklist .lp-point-card {
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.lp-points--checklist .lp-point-check {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid #d1fae5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.3s;
}
.lp-points--checklist .lp-point-card:hover .lp-point-check {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.lp-points--checklist .lp-point-content {
  flex: 1;
}
.lp-points--checklist .lp-point-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #334155;
  margin-bottom: 4px;
}
.lp-points--checklist .lp-point-desc {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 700;
}

/* --- ポイントバリアント共通モバイル対応 --- */
@media (max-width: 768px) {
  .lp-points .lp-points-grid {
    grid-template-columns: 1fr;
  }
  .lp-points--magazine .lp-point-row {
    flex-direction: column;
    gap: 24px;
  }
  .lp-points--magazine .lp-point-row--reverse {
    flex-direction: column;
  }
  .lp-points--skew .lp-point-card {
    transform: skewX(0deg);
  }
  .lp-points--skew .lp-point-card-inner {
    transform: skewX(0deg);
  }
  .lp-points--bento .lp-points-grid {
    grid-template-columns: 1fr;
  }
  .lp-points--bento .lp-point-card--featured {
    grid-column: span 1;
    grid-row: span 1;
  }
  .lp-points--circle-centric .lp-points-grid {
    flex-direction: column;
    min-height: auto;
  }
  .lp-points--circle-centric .lp-point-card {
    max-width: 100%;
  }
  .lp-points--checklist .lp-points-list {
    padding: 28px 20px;
  }
}

/* モバイル対応 */
@media (max-width: 640px) {
  .lp-points-editor--with-tabs {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
  }

  .style-button-group {
    flex-wrap: wrap;
  }

  .style-btn {
    flex: 1;
    min-width: calc(50% - 4px);
    text-align: center;
  }

  .style-border-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .style-slider-sm {
    width: 100%;
  }
}

/* ========================================
   FAQ アコーディオン（開閉式）
   ======================================== */
.lp-faq-accordion {
  background: #f9fafb;
}

.lp-faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 800px;
  margin: 0 auto;
}

.lp-faq-accordion-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid #eee;
}

.lp-faq-accordion-q {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: #1a1a1a;
  transition: background 0.2s;
}

.lp-faq-accordion-q:hover {
  background: #fafafa;
}

.lp-faq-accordion-q::-webkit-details-marker {
  display: none;
}

.lp-faq-accordion-q-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lp-primary, #DA3734);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 900;
}

.lp-faq-accordion-q-text {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.5;
}

.lp-faq-accordion-arrow {
  flex-shrink: 0;
  color: #999;
  transition: transform 0.3s;
  display: flex;
}

details[open] > .lp-faq-accordion-q .lp-faq-accordion-arrow {
  transform: rotate(180deg);
}

.lp-faq-accordion-a {
  display: flex;
  gap: 0.75rem;
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid #f0f0f0;
  padding-top: 1.25rem;
  margin: 0 1rem;
}

.lp-faq-accordion-a-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #666;
  font-size: 0.875rem;
  font-weight: 900;
}

.lp-faq-accordion-a-text {
  flex: 1;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.8;
  padding-top: 0.25rem;
}

/* ========================================
   FAQ カード型（常に表示）
   ======================================== */
.lp-faq-card {
  background: #f9fafb;
}

.lp-faq-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.lp-faq-card-item {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lp-faq-card-q {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.lp-faq-card-q-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lp-primary, #DA3734);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
}

.lp-faq-card-q-text {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
}

.lp-faq-card-a {
  padding-left: calc(28px + 0.75rem);
}

.lp-faq-card-a-text {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .lp-faq-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   FAQ シンプルリスト
   ======================================== */
.lp-faq-simple {
  background: #fff;
}

.lp-faq-simple-list {
  max-width: 800px;
  margin: 0 auto;
}

.lp-faq-simple-item {
  border-bottom: 1px solid #eee;
  padding: 1.5rem 0;
}

.lp-faq-simple-item:first-child {
  border-top: 1px solid #eee;
}

.lp-faq-simple-q {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.lp-faq-simple-q-mark {
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--lp-primary, #DA3734);
  line-height: 1.5;
}

.lp-faq-simple-q-text {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
}

.lp-faq-simple-a {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-left: 0.25rem;
}

.lp-faq-simple-a-mark {
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #aaa;
  line-height: 1.5;
}

.lp-faq-simple-a-text {
  flex: 1;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.8;
}

/* ========================================
   FAQ タイムライン風
   ======================================== */
.lp-faq-timeline {
  background: #fff;
}

.lp-faq-timeline-list {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding-left: 2rem;
}

/* 左の縦ライン */
.lp-faq-timeline-list::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--lp-primary, #DA3734), rgba(218, 55, 52, 0.2));
  border-radius: 3px;
}

.lp-faq-timeline-item {
  position: relative;
  padding: 0 0 2rem 1.5rem;
}

.lp-faq-timeline-item:last-child {
  padding-bottom: 0;
}

/* ドット */
.lp-faq-timeline-dot {
  position: absolute;
  left: -1.75rem;
  top: 0.25rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lp-primary, #DA3734);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--lp-primary, #DA3734);
}

.lp-faq-timeline-content {
  background: #f9fafb;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  border: 1px solid #eee;
}

.lp-faq-timeline-q {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.lp-faq-timeline-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lp-primary, #DA3734);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
}

.lp-faq-timeline-a {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.8;
  padding-left: calc(28px + 0.75rem);
}

@media (max-width: 600px) {
  .lp-faq-timeline-list {
    padding-left: 1.5rem;
  }

  .lp-faq-timeline-item {
    padding-left: 1rem;
  }

  .lp-faq-timeline-dot {
    left: -1.25rem;
    width: 12px;
    height: 12px;
  }
}

/* ========================================
   FAQ バブル（丸い吹き出し交互配色）
   ======================================== */
.lp-faq-bubble {
  background: #f9fafb;
}

.lp-faq-bubble-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.lp-faq-bubble-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lp-faq-bubble-q {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.lp-faq-bubble-item--right .lp-faq-bubble-q {
  flex-direction: row-reverse;
}

.lp-faq-bubble-q-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lp-primary, #DA3734);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.875rem;
}

.lp-faq-bubble-q-text {
  background: #fff;
  border-radius: 18px;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a1a;
  line-height: 1.5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  max-width: 80%;
}

.lp-faq-bubble-a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  justify-content: flex-end;
}

.lp-faq-bubble-item--right .lp-faq-bubble-a {
  justify-content: flex-start;
}

.lp-faq-bubble-a-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e9ecef;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.875rem;
}

.lp-faq-bubble-a-text {
  background: var(--lp-primary-light, #fdf5f5);
  border-radius: 18px;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.8;
  max-width: 80%;
}

/* ========================================
   FAQ ストライプ（交互背景色）
   ======================================== */
.lp-faq-stripe {
  background: #fff;
}

.lp-faq-stripe-list {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.lp-faq-stripe-item {
  padding: 1.25rem 1.5rem;
}

.lp-faq-stripe-item--even {
  background: #fff;
}

.lp-faq-stripe-item--odd {
  background: var(--lp-primary-light, #fdf5f5);
}

.lp-faq-stripe-q {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.lp-faq-stripe-q-mark {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 900;
  color: var(--lp-primary, #DA3734);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-primary-alpha, rgba(218, 55, 52, 0.08));
  border-radius: 6px;
}

.lp-faq-stripe-q-text {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
}

.lp-faq-stripe-a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 0.25rem;
}

.lp-faq-stripe-a-mark {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 900;
  color: #999;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 6px;
}

.lp-faq-stripe-a-text {
  flex: 1;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.8;
}

/* ========================================
   FAQ 2カラム（横並び番号付き）
   ======================================== */
.lp-faq-twocol {
  background: #f9fafb;
}

.lp-faq-twocol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.lp-faq-twocol-item {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid #eee;
}

.lp-faq-twocol-num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--lp-primary-alpha, rgba(218, 55, 52, 0.15));
  line-height: 1;
  margin-bottom: 0.75rem;
}

.lp-faq-twocol-q {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--lp-primary-alpha, rgba(218, 55, 52, 0.1));
}

.lp-faq-twocol-a {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .lp-faq-twocol-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   FAQ ナンバーサークル（大きな番号サークル）
   ======================================== */
.lp-faq-numcircle {
  background: #fff;
}

.lp-faq-numcircle-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.lp-faq-numcircle-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: #f9fafb;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #eee;
}

.lp-faq-numcircle-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lp-primary, #DA3734);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 900;
}

.lp-faq-numcircle-content {
  flex: 1;
}

.lp-faq-numcircle-q {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.lp-faq-numcircle-a {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .lp-faq-numcircle-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ========================================
   FAQ 左ボーダー（アクセントカラー）
   ======================================== */
.lp-faq-bordered {
  background: #fff;
}

.lp-faq-bordered-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lp-faq-bordered-item {
  border-left: 4px solid var(--lp-primary, #DA3734);
  background: #f9fafb;
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem;
  transition: box-shadow 0.2s;
}

.lp-faq-bordered-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.lp-faq-bordered-q {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.lp-faq-bordered-q-mark {
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--lp-primary, #DA3734);
}

.lp-faq-bordered-q-text {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
}

.lp-faq-bordered-a {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding-left: 0.1rem;
}

.lp-faq-bordered-a-mark {
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 900;
  color: #aaa;
}

.lp-faq-bordered-a-text {
  flex: 1;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.8;
}

/* ========================================
   応募セクション バリアント
   ======================================== */

/* センター */
.lp-apply--centered .lp-apply-centered-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.lp-apply--centered .lp-apply-centered-btn {
  display: inline-block;
  padding: 1.25rem 3rem;
  font-size: 1.2rem;
  margin: 1rem 0;
}
.lp-apply--centered .lp-apply-centered-tel {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #666;
}
.lp-apply--centered .lp-apply-centered-tel a {
  color: var(--lp-primary, #DA3734);
  font-weight: 700;
  text-decoration: none;
}
.lp-apply--centered .lp-apply-tel-hours {
  font-size: 0.8rem;
  color: #999;
}

/* 左右分割 */
.lp-apply--split .lp-apply-split-content {
  display: flex;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.lp-apply--split .lp-apply-split-main {
  flex: 2;
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.lp-apply--split .lp-apply-split-sub {
  flex: 1;
  background: #f9fafb;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  border: 1px solid #eee;
}
.lp-apply--split h3 {
  font-size: 0.9rem;
  margin: 0.5rem 0 1rem;
  color: #333;
}
@media (max-width: 600px) {
  .lp-apply--split .lp-apply-split-content { flex-direction: column; }
}

/* バナー */
.lp-apply--banner {
  background: var(--lp-primary, #DA3734) !important;
  color: #fff;
}
.lp-apply--banner .lp-apply-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  gap: 2rem;
}
.lp-apply--banner h2 {
  font-size: 1.5rem;
  margin: 0;
  color: #fff;
}
.lp-apply--banner p {
  margin: 0.25rem 0 0;
  opacity: 0.9;
}
.lp-apply--banner .lp-btn-apply-main {
  background: #fff;
  color: var(--lp-primary, #DA3734);
  white-space: nowrap;
}
.lp-apply--banner .lp-apply-banner-tel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .lp-apply--banner .lp-apply-banner-inner { flex-direction: column; text-align: center; }
}

/* カード */
.lp-apply--card .lp-apply-card-box {
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.lp-apply--card .lp-apply-card-title {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.lp-apply--card .lp-apply-card-lead {
  color: #666;
  margin-bottom: 1.5rem;
}
.lp-apply--card .lp-apply-card-divider {
  width: 60px;
  height: 1px;
  background: #e5e7eb;
  margin: 1.5rem auto;
}
.lp-apply--card .lp-apply-card-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #666;
  text-decoration: none;
  font-size: 0.9rem;
}
.lp-apply--card .lp-apply-card-tel span {
  font-size: 0.8rem;
  color: #999;
}

/* グラデーション */
.lp-apply--gradient {
  background: linear-gradient(135deg, var(--lp-primary, #DA3734), var(--lp-accent, #ff6b6b)) !important;
  color: #fff;
  text-align: center;
}
.lp-apply--gradient .lp-apply-gradient-title {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0.5rem;
}
.lp-apply--gradient .lp-apply-gradient-lead {
  color: rgba(255,255,255,0.9);
}
.lp-apply--gradient .lp-apply-gradient-btn {
  background: #fff;
  color: var(--lp-primary, #DA3734);
  display: inline-block;
  margin-top: 1rem;
}
.lp-apply--gradient .lp-apply-gradient-tel {
  margin-top: 1rem;
}
.lp-apply--gradient .lp-apply-gradient-tel a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.lp-apply--gradient .lp-apply-gradient-tel span {
  font-size: 0.8rem;
  opacity: 0.8;
  display: block;
}

/* ミニマル */
.lp-apply--minimal .lp-apply-minimal-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}
.lp-apply--minimal .lp-apply-minimal-divider {
  color: #ccc;
  font-size: 0.85rem;
}
.lp-apply--minimal .lp-apply-minimal-tel {
  color: var(--lp-primary, #DA3734);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
}
@media (max-width: 600px) {
  .lp-apply--minimal .lp-apply-minimal-content { flex-direction: column; gap: 0.75rem; }
}

/* ========================================
   詳細セクション バリアント
   ======================================== */

/* カードグリッド */
.lp-details--card-grid .lp-details-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}
.lp-details--card-grid .lp-details-card-item {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid #eee;
}
.lp-details--card-grid .lp-details-card-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lp-primary, #DA3734);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.lp-details--card-grid .lp-details-card-value {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.7;
}
@media (max-width: 600px) {
  .lp-details--card-grid .lp-details-card-grid { grid-template-columns: 1fr; }
}

/* 2カラム */
.lp-details--two-column .lp-details-twocol {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
}
.lp-details--two-column .lp-details-twocol-item {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
}
.lp-details--two-column .lp-details-twocol-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #555;
  margin-bottom: 0.25rem;
}
.lp-details--two-column .lp-details-twocol-value {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.7;
}
@media (max-width: 600px) {
  .lp-details--two-column .lp-details-twocol { grid-template-columns: 1fr; }
}

/* アコーディオン */
.lp-details--accordion .lp-details-accordion-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lp-details--accordion .lp-details-accordion-item {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eee;
  overflow: hidden;
}
.lp-details--accordion .lp-details-accordion-label {
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
  color: #333;
}
.lp-details--accordion .lp-details-accordion-label::-webkit-details-marker { display: none; }
.lp-details--accordion .lp-details-accordion-value {
  padding: 0 1.25rem 1rem;
  font-size: 0.875rem;
  color: #555;
  line-height: 1.8;
  border-top: 1px solid #f0f0f0;
  margin: 0 0.5rem;
  padding-top: 1rem;
}

/* ストライプ */
.lp-details--stripe .lp-details-stripe-list {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
}
.lp-details--stripe .lp-details-stripe-row {
  display: flex;
  padding: 1rem 1.25rem;
  gap: 1rem;
}
.lp-details--stripe .lp-details-stripe-row--even { background: #fff; }
.lp-details--stripe .lp-details-stripe-row--odd { background: var(--lp-primary-light, #fdf5f5); }
.lp-details--stripe .lp-details-stripe-label {
  flex-shrink: 0;
  width: 120px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #555;
}
.lp-details--stripe .lp-details-stripe-value {
  flex: 1;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.7;
}
@media (max-width: 600px) {
  .lp-details--stripe .lp-details-stripe-row { flex-direction: column; gap: 0.25rem; }
  .lp-details--stripe .lp-details-stripe-label { width: auto; }
}

/* ボーダー付き */
.lp-details--bordered .lp-details-bordered-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lp-details--bordered .lp-details-bordered-item {
  border-left: 4px solid var(--lp-primary, #DA3734);
  padding: 1rem 1.25rem;
  background: #f9fafb;
  border-radius: 0 8px 8px 0;
}
.lp-details--bordered .lp-details-bordered-label {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--lp-primary, #DA3734);
  margin-bottom: 0.25rem;
}
.lp-details--bordered .lp-details-bordered-value {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.7;
}

/* ミニマル */
.lp-details--minimal .lp-details-minimal-list {
  max-width: 700px;
  margin: 0 auto;
}
.lp-details--minimal .lp-details-minimal-item {
  display: flex;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 1rem;
}
.lp-details--minimal .lp-details-minimal-label {
  flex-shrink: 0;
  width: 100px;
  font-size: 0.8rem;
  color: #999;
  font-weight: 600;
}
.lp-details--minimal .lp-details-minimal-value {
  flex: 1;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.7;
}

/* ========================================
   求人一覧セクション バリアント
   ======================================== */

/* リスト型 */
.lp-jobs--list .lp-jobs-list-vertical {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.lp-jobs--list .lp-job-list-item {
  display: flex;
  align-items: center;
  padding: 1.25rem;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.lp-jobs--list .lp-job-list-item:hover { background: #f9fafb; }
.lp-jobs--list .lp-job-list-main { flex: 1; }
.lp-jobs--list .lp-job-list-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.25rem;
}
.lp-jobs--list .lp-job-list-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: #666;
}
.lp-jobs--list .lp-job-list-arrow {
  font-size: 1.5rem;
  color: #ccc;
  margin-left: 1rem;
}
.lp-jobs--list .lp-job-new-tag {
  background: var(--lp-primary, #DA3734);
  color: #fff;
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: 700;
  margin-right: 0.5rem;
}

/* コンパクト */
.lp-jobs--compact .lp-jobs-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  max-width: 900px;
  margin: 0 auto;
}
.lp-jobs--compact .lp-job-compact-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eee;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s;
}
.lp-jobs--compact .lp-job-compact-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.lp-jobs--compact .lp-job-compact-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
}
.lp-jobs--compact .lp-job-compact-salary {
  font-size: 0.8rem;
  color: var(--lp-primary, #DA3734);
  font-weight: 600;
}
.lp-jobs--compact .lp-job-compact-location {
  font-size: 0.75rem;
  color: #999;
}

/* グリッド */
.lp-jobs--grid .lp-jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}
.lp-jobs--grid .lp-job-grid-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}
.lp-jobs--grid .lp-job-grid-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
}
.lp-jobs--grid .lp-job-grid-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: #666;
}

/* ボーダー付き */
.lp-jobs--bordered .lp-jobs-bordered-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lp-jobs--bordered .lp-job-bordered-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-left: 4px solid var(--lp-primary, #DA3734);
  padding: 1rem 1.25rem;
  background: #f9fafb;
  border-radius: 0 10px 10px 0;
}
.lp-jobs--bordered .lp-job-bordered-content { flex: 1; }
.lp-jobs--bordered .lp-job-bordered-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.25rem;
}
.lp-jobs--bordered .lp-job-bordered-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: #666;
  flex-wrap: wrap;
}

/* 詳細表示 */
.lp-jobs--detailed .lp-jobs-detailed-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.lp-jobs--detailed .lp-job-detailed-item {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid #eee;
  position: relative;
}
.lp-jobs--detailed .lp-job-detailed-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.lp-jobs--detailed .lp-job-detailed-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  flex: 1;
}
.lp-jobs--detailed .lp-job-detailed-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1.5rem;
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 1rem;
}
.lp-jobs--detailed .lp-job-detailed-info strong {
  color: #333;
  margin-right: 0.5rem;
}
@media (max-width: 600px) {
  .lp-jobs--detailed .lp-job-detailed-info { grid-template-columns: 1fr; }
}

/* ミニマル */
.lp-jobs--minimal .lp-jobs-minimal-list {
  max-width: 600px;
  margin: 0 auto;
}
.lp-jobs--minimal .lp-job-minimal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: #1a1a1a;
  transition: color 0.15s;
}
.lp-jobs--minimal .lp-job-minimal-item:hover { color: var(--lp-primary, #DA3734); }
.lp-jobs--minimal .lp-job-minimal-title {
  font-size: 0.95rem;
  font-weight: 600;
}
.lp-jobs--minimal .lp-job-minimal-arrow {
  font-size: 1.2rem;
  color: #ccc;
}

/* ===== 社員の声バリアント ===== */

/* グリッド */
.lp-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.lp-testimonial-grid .lp-testimonial-grid-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.lp-testimonial-grid .lp-testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.75rem;
}
.lp-testimonial-grid .lp-testimonial-name {
  font-weight: 700;
  color: var(--lp-text, #1f2937);
}
.lp-testimonial-grid .lp-testimonial-role {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.lp-testimonial-grid .lp-testimonial-quote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #374151;
}

/* 吹き出し */
.lp-testimonial-bubble .lp-testimonial-bubble-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}
.lp-testimonial-bubble .lp-testimonial-bubble-item:nth-child(even) {
  flex-direction: row-reverse;
}
.lp-testimonial-bubble .lp-testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.lp-testimonial-bubble .lp-testimonial-bubble-content {
  background: var(--lp-primary-light, #ede9fe);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  position: relative;
  max-width: 70%;
}
.lp-testimonial-bubble .lp-testimonial-bubble-item:nth-child(even) .lp-testimonial-bubble-content {
  background: #f1f5f9;
}
.lp-testimonial-bubble .lp-testimonial-bubble-quote::before {
  content: '\201C';
  font-size: 2rem;
  color: var(--lp-primary, #6366f1);
  opacity: 0.3;
  line-height: 1;
}
.lp-testimonial-bubble .lp-testimonial-name {
  font-weight: 600;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

/* ミニマル */
.lp-testimonial-minimal .lp-testimonial-minimal-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid #e5e7eb;
}
.lp-testimonial-minimal .lp-testimonial-minimal-item:last-child {
  border-bottom: none;
}
.lp-testimonial-minimal .lp-testimonial-quote {
  font-size: 1rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 0.75rem;
}
.lp-testimonial-minimal .lp-testimonial-meta {
  font-size: 0.85rem;
  color: #6b7280;
}
.lp-testimonial-minimal .lp-testimonial-name {
  font-weight: 600;
  color: var(--lp-text, #1f2937);
}

/* ボーダー */
.lp-testimonial-bordered .lp-testimonial-bordered-item {
  border-left: 4px solid var(--lp-primary, #6366f1);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: #f9fafb;
  border-radius: 0 8px 8px 0;
}
.lp-testimonial-bordered .lp-testimonial-quote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 0.75rem;
}
.lp-testimonial-bordered .lp-testimonial-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lp-testimonial-bordered .lp-testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.lp-testimonial-bordered .lp-testimonial-name {
  font-weight: 600;
  font-size: 0.9rem;
}
.lp-testimonial-bordered .lp-testimonial-role {
  font-size: 0.8rem;
  color: #6b7280;
}

/* ===== ギャラリーバリアント ===== */

/* フィルムストリップ */
.lp-gallery-filmstrip {
  display: flex;
  overflow-x: auto;
  gap: 0.5rem;
  padding: 1rem 0;
  scroll-snap-type: x mandatory;
}
.lp-gallery-filmstrip .lp-gallery-filmstrip-item {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
  border: 3px solid #1a1a1a;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}
.lp-gallery-filmstrip .lp-gallery-filmstrip-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* カード */
.lp-gallery-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.lp-gallery-cards .lp-gallery-card-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.lp-gallery-cards .lp-gallery-card-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.lp-gallery-cards .lp-gallery-card-caption {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: #374151;
}

/* ライトボックス */
.lp-gallery-lightbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
}
.lp-gallery-lightbox .lp-gallery-lightbox-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  aspect-ratio: 1;
}
.lp-gallery-lightbox .lp-gallery-lightbox-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.lp-gallery-lightbox .lp-gallery-lightbox-item:hover img {
  transform: scale(1.05);
}
.lp-gallery-lightbox .lp-gallery-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
}
.lp-gallery-lightbox .lp-gallery-lightbox-item:hover .lp-gallery-lightbox-overlay {
  opacity: 1;
}

/* ミニマル */
.lp-gallery-minimal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.25rem;
}
.lp-gallery-minimal .lp-gallery-minimal-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.lp-gallery-minimal .lp-gallery-minimal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}
.lp-gallery-minimal .lp-gallery-minimal-item:hover img {
  opacity: 0.85;
}

/* ===== カルーセルバリアント ===== */

.lp-carousel-fade .lp-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.lp-carousel-fade .lp-carousel-slide.active {
  opacity: 1;
  position: relative;
}

.lp-carousel-cards .lp-carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem 0;
}
.lp-carousel-cards .lp-carousel-slide {
  flex: 0 0 calc(33.333% - 0.67rem);
  scroll-snap-align: start;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.lp-carousel-fullwidth .lp-carousel-wrapper {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.lp-carousel-fullwidth .lp-carousel-slide img {
  height: 500px;
  object-fit: cover;
}

.lp-carousel-thumbnail .lp-carousel-thumbnails {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: center;
}
.lp-carousel-thumbnail .lp-carousel-thumb {
  width: 60px;
  height: 45px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
  border: 2px solid transparent;
}
.lp-carousel-thumbnail .lp-carousel-thumb.active {
  opacity: 1;
  border-color: var(--lp-primary, #6366f1);
}
.lp-carousel-thumbnail .lp-carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-carousel-minimal .lp-carousel-controls {
  display: none;
}
.lp-carousel-minimal .lp-carousel-dots {
  display: none;
}

.lp-carousel-bordered .lp-carousel-wrapper {
  border: 2px solid var(--lp-primary, #6366f1);
  border-radius: 12px;
  overflow: hidden;
  padding: 0.5rem;
}

/* ===== 動画セクションバリアント ===== */

.lp-video-cinema {
  background: #0a0a0a;
  padding: 3rem 0;
}
.lp-video-cinema .lp-section-inner {
  max-width: 900px;
}
.lp-video-cinema .lp-section-title {
  color: #fff;
}
.lp-video-cinema .lp-video-description {
  color: #d1d5db;
}

.lp-video-card .lp-video-embed-wrapper {
  background: #fff;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.lp-video-split .lp-section-inner {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.lp-video-split .lp-video-text-side {
  flex: 1;
}
.lp-video-split .lp-video-embed-side {
  flex: 1.5;
}

.lp-video-banner {
  padding: 0;
}
.lp-video-banner .lp-section-inner {
  max-width: 100%;
  padding: 0;
}

.lp-video-bordered .lp-video-embed-wrapper {
  border: 2px solid var(--lp-primary, #6366f1);
  border-radius: 12px;
  overflow: hidden;
  padding: 0.5rem;
}

.lp-video-minimal {
  padding: 1rem 0;
}
.lp-video-minimal .lp-section-title {
  display: none;
}

/* ===== ヒーローCTAバリアント ===== */

.lp-hero-cta-centered {
  text-align: center;
  padding: 2rem 0;
}
.lp-hero-cta-centered .lp-hero-cta-buttons {
  justify-content: center;
}
.lp-hero-cta-centered .lp-cta-main-btn {
  font-size: 1.2rem;
  padding: 1rem 3rem;
}

.lp-hero-cta-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
}
.lp-hero-cta-split .lp-hero-cta-text {
  flex: 1;
}
.lp-hero-cta-split .lp-hero-cta-buttons {
  flex-shrink: 0;
}

.lp-hero-cta-banner {
  background: var(--lp-primary, #6366f1);
  padding: 2rem;
  text-align: center;
}
.lp-hero-cta-banner .lp-cta-main-btn {
  background: #fff;
  color: var(--lp-primary, #6366f1);
}

.lp-hero-cta-gradient {
  background: linear-gradient(135deg, var(--lp-primary, #6366f1), var(--lp-accent, #818cf8));
  padding: 2rem;
  text-align: center;
  border-radius: 12px;
}
.lp-hero-cta-gradient .lp-cta-main-btn {
  background: #fff;
  color: var(--lp-primary, #6366f1);
}

.lp-hero-cta-minimal {
  padding: 1rem 0;
  text-align: center;
}
.lp-hero-cta-minimal .lp-cta-main-btn {
  background: transparent;
  border: 2px solid var(--lp-primary, #6366f1);
  color: var(--lp-primary, #6366f1);
}

.lp-hero-cta-floating {
  position: relative;
  z-index: 10;
  margin: -2rem auto 0;
  max-width: 600px;
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem 2rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  text-align: center;
}

/* ===== カスタムセクション追加バリアント ===== */

.lp-custom-card .lp-section-inner {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.lp-custom-gradient-bg {
  background: linear-gradient(135deg, var(--lp-primary, #6366f1), var(--lp-accent, #818cf8));
  color: #fff;
  padding: 3rem 0;
}
.lp-custom-gradient-bg .lp-custom-title {
  color: #fff;
}
.lp-custom-gradient-bg .lp-custom-content {
  color: rgba(255,255,255,0.9);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .lp-testimonial-grid {
    grid-template-columns: 1fr;
  }
  .lp-testimonial-bubble .lp-testimonial-bubble-content {
    max-width: 85%;
  }
  .lp-gallery-filmstrip .lp-gallery-filmstrip-item {
    width: 180px;
  }
  .lp-carousel-cards .lp-carousel-slide {
    flex: 0 0 calc(50% - 0.5rem);
  }
  .lp-video-split .lp-section-inner {
    flex-direction: column;
  }
  .lp-hero-cta-split {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* ヒーロー背景画像のリピート防止
   パターン/レイアウトのbackgroundショートハンドがbackground-size等をリセットする対策
   全パターン/レイアウト定義より後に配置する必要がある */
[class*="lp-pattern"] .lp-hero-bg,
[class*="lp-layout"] .lp-hero-bg,
.lp-hero--yellow .lp-hero-bg,
.lp-hero--impact,
.lp-hero--local {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}