/* ==========================================================================
   LP制作ツール CSS（整理版）
   ========================================================================== */

/* ==========================================================================
   1. リセットCSS・基本設定
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   2. CSS変数・グローバルスタイル
   ========================================================================== */

:root {
  --main-color: #007bff;
  --sub-color: #6c757d;
  --font-family: Arial, sans-serif;
  --font-size: 16px;
  --font-size-h1: calc(var(--font-size) * 1.8);
  --font-size-h2: 25px;
  --font-size-h3: calc(var(--font-size) * 1.2);
  --font-size-h4: calc(var(--font-size) * 1.1);
  --font-size-h5: calc(var(--font-size) * 1.05);
  --font-size-h6: var(--font-size);
  --column-width: 800px;
  --column-padding: 15px;
}

/* すべての見出しタグのデフォルトマージンとパディングを完全にリセットし、中央揃えも強制 */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 !important; /* すべてのマージンをリセット */
  padding: 0 !important; /* すべてのパディングをリセット */
  color: var(--main-color);
  font-family: var(--font-family);
  line-height: 1.2;
}

h1 {
  font-size: var(--font-size-h1);
}
h2 {
  font-size: var(--font-size-h2);
}
h3 {
  font-size: var(--font-size-h3);
}
h4 {
  font-size: var(--font-size-h4);
}
h5 {
  font-size: var(--font-size-h5);
}
h6 {
  font-size: var(--font-size-h6);
}

/* ==========================================================================
   3. 全体レイアウト
   ========================================================================== */

.lp-builder {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.builder-main {
  flex: 1;
  display: grid;
  grid-template-columns: 250px 1fr;
  overflow: hidden;
}

/* ==========================================================================
   4. ヘッダー
   ========================================================================== */

.builder-header {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.builder-header h1 {
  font-size: 1.5rem;
  color: #333;
}

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

.title-edit {
  display: flex;
  align-items: center;
}

.title-input {
  flex-grow: 1;
}

.template-mode-indicator {
  font-size: 1rem;
  color: #28a745;
  font-weight: bold;
  background-color: #e8f5e9;
  padding: 6px 12px;
  border-radius: 15px;
  margin-right: 15px;
  white-space: nowrap;
}

.width-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.width-control label {
  font-size: 0.875rem;
  color: #666;
}

.width-input {
  width: 80px;
  padding: 0.25rem 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* ==========================================================================
   5. ボタン（共通）
   ========================================================================== */

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  transition: all 0.2s ease;
  color: white !important;
}

.btn:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: #007bff !important;
  color: white !important;
}

.btn-secondary {
  background: #6c757d !important;
  color: white !important;
}

.btn-success {
  background: #28a745 !important;
  color: white !important;
}

.btn-info {
  background: #17a2b8 !important;
  color: white !important;
}

.btn-warning {
  background: #ffc107 !important;
  color: #212529 !important;
}

.btn-danger {
  background: #dc3545 !important;
  color: white !important;
}

/* ==========================================================================
   6. サイドバー（パーツリスト）
   ========================================================================== */

.parts-sidebar {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  color: #333 !important;
  /* スクロールを有効にするための修正 */
  overflow-y: auto; /* 垂直方向のスクロールバーを表示 */
  height: 100%; /* 親要素の高さに合わせる */
  display: flex; /* 子要素の配置のためflexboxを使用 */
  flex-direction: column; /* 子要素を縦に並べる */
  padding-bottom: 1rem; /* スクロール時に一番下の要素が見切れないように余白を追加 */
}

.parts-sidebar * {
  font-family: inherit !important;
  color: inherit !important;
}

.parts-list {
  padding: 1rem;
  /* flex-grow: 1; を削除し、コンテンツがはみ出した時にスクロールできるようにする */
  /* heightをautoにすることでコンテンツの高さに合わせる */
  height: auto;
}

.part-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  color: #333 !important;
}

.part-item * {
  font-family: inherit !important;
  color: inherit !important;
}

.part-item:hover {
  background-color: #e9ecef;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.part-item:active {
  transform: translateX(2px);
}

.part-item.dragging {
  opacity: 0.5;
  cursor: move;
}

.part-icon {
  font-size: 1.25rem;
  margin-right: 0.5rem;
}

/* 管理者専用パーツ */
.part-item[data-type="advanced-editor"] {
  background-color: #f8f9fa;
  border: 1px solid #ddd;
}

.part-item[data-type="advanced-editor"]:hover {
  background-color: #e9ecef;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.part-item[data-type="advanced-editor"] .part-icon {
  color: inherit;
  text-shadow: none;
}

.part-item[data-type="advanced-editor"] span {
  color: inherit;
  font-weight: normal;
}

/* ==========================================================================
   7. エディターエリア
   ========================================================================== */

/* エディターエリア */
.editor-area {
  flex: 1;
  background-color: #e9ecef;
  padding: 2rem;
  overflow-y: auto;
  font-family: var(--font-family);
  font-size: var(--font-size);
}

/* 編集画面でプレビューと同じスタイルを適用 */
.editor-area .dropped-part {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: 1.6;
}

.editor-area .dropped-part h1,
.editor-area .dropped-part h2,
.editor-area .dropped-part h3,
.editor-area .dropped-part h4,
.editor-area .dropped-part h5,
.editor-area .dropped-part h6 {
  color: var(--main-color);
  font-family: var(--font-family);
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.editor-area .dropped-part h1 {
  font-size: calc(var(--font-size) * 1.3);
}
.editor-area .dropped-part h2 {
  font-size: 25px;
}
.editor-area .dropped-part h3 {
  font-size: calc(var(--font-size) * 1.1);
}
.editor-area .dropped-part h4 {
  font-size: calc(var(--font-size) * 1.05);
}
.editor-area .dropped-part h5 {
  font-size: calc(var(--font-size) * 1.02);
}
.editor-area .dropped-part h6 {
  font-size: var(--font-size);
}

.editor-area .dropped-part p,
.editor-area .dropped-part ul,
.editor-area .dropped-part ol,
.editor-area .dropped-part li {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: 1.6;
  padding-left: 0;
}

/*  影響範囲を、パーツ内のコンテンツとして配置されるボタン(.button-preview内のボタンなど)に限定します */
.editor-area .dropped-part .button-preview button:not(.edit-button-btn),
.editor-area .dropped-part .form-preview button:not(.edit-form-btn),
.editor-area .dropped-part .lp-part a.btn {
  background: var(--main-color);
  color: white;
  font-family: var(--font-family);
  font-size: var(--font-size);
}

.editor-area .dropped-part img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.editor-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  min-height: 600px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.editor-header {
  background-color: #f8f9fa;
  padding: 1rem 2rem;
  border-bottom: 1px solid #dee2e6;
}

.editor-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
}

.editor-header p {
  margin: 0.25rem 0 0 0;
  font-size: 0.875rem;
  color: #666;
}

/* ==========================================================================
   8. ドロップエリア
   ========================================================================== */

.drop-area {
  min-height: 600px;
  padding: 2rem;
  position: relative;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  background-color: #fafafa;
  transition: all 0.3s ease;
}

.drop-area:hover {
  border-color: #adb5bd;
  background-color: #f8f9fa;
}

.drop-area.drag-over {
  background-color: #e3f2fd;
  border: 2px dashed #1976d2;
  box-shadow: inset 0 0 20px rgba(25, 118, 210, 0.1);
}

.empty-state {
  text-align: center;
  color: #999;
  font-size: 1.1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 80%;
}

/* ==========================================================================
   9. ドロップされたパーツ
   ========================================================================== */

.dropped-part {
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 2px solid transparent; /* デフォルトの透明ボーダーを維持 */
  border-radius: 4px;
  transition: all 0.2s;
  cursor: move;
  z-index: 1;
  overflow: visible; /* outlineが切り取られないようにする */
}

.dropped-part:hover {
  border-color: #007bff;
}

.dropped-part.selected {
  outline: 3px solid #007cba !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  z-index: 2;
}

/* 画像パーツのデフォルト（非選択時）の余白なしを確保するが、borderは維持する */
/* 選択時のパディング/マージンはJavaScriptで動的に設定される */
.dropped-part[data-type="image"] {
  padding: 0 !important;
  margin: 0 !important;
  /* border-width: 0 !important; や border-top: none !important; を削除し、
     .dropped-part のデフォルトボーダー（透明）が適用されるようにする */
  background-color: transparent !important;
}

.dropped-part.dragging-part {
  opacity: 0.5;
  cursor: grabbing;
}

/* パーツアクション */
.part-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  gap: 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #333 !important;
}

.part-actions * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background: #f8f9fa !important;
  color: #333 !important;
}

.dropped-part:hover .part-actions {
  display: flex;
}

.action-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6c757d !important;
  color: white !important;
}

.action-icon.delete-icon {
  background: #dc3545 !important;
}

.action-icon.copy-icon {
  background: #007bff !important;
}

.dropped-part .remove-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  font-size: 0.75rem;
  line-height: 1;
}

.dropped-part:hover .remove-btn,
.dropped-part.selected .remove-btn {
  display: block;
}

/* ==========================================================================
   10. ドラッグ&ドロップ プレースホルダー
   ========================================================================== */

.drop-placeholder {
  height: 4px;
  background-color: #007bff;
  margin: 0.5rem 0;
  border-radius: 2px;
  animation: pulse 1s ease-in-out infinite;
}

.drag-placeholder {
  height: 4px;
  background: linear-gradient(90deg, #007cba, #00d4ff);
  margin: 8px 0;
  border-radius: 2px;
  animation: pulse 1s ease-in-out infinite;
}

.drag-over {
  background: rgba(0, 123, 255, 0.05);
  border: 2px dashed #007bff;
  border-radius: 8px;
}

.custom-field-item.drag-over {
  border-color: #007cba !important;
  background-color: #f0f8ff !important;
}

/* ==========================================================================
   11. アニメーション
   ========================================================================== */

@keyframes pulse {
  0% {
    opacity: 0.6;
    transform: scaleY(1);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.2);
  }
  100% {
    opacity: 0.6;
    transform: scaleY(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes highlight {
  0% {
    background-color: #f9f9f9;
  }
  50% {
    background-color: #e3f2fd;
  }
  100% {
    background-color: #f9f9f9;
  }
}

@keyframes dropSuccess {
  0% {
    background-color: #f9f9f9;
  }
  50% {
    background-color: #d4edda;
  }
  100% {
    background-color: #f9f9f9;
  }
}

/* ボタン・画像アニメーション */
@keyframes shine {
  0% {
    left: -150%;
  }
  40% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}

@keyframes rotate-shake {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(2deg);
  }
  20% {
    transform: rotate(-2deg);
  }
  30% {
    transform: rotate(2deg);
  }
  40% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(1deg);
  }
  60% {
    transform: rotate(-1deg);
  }
  70% {
    transform: rotate(1deg);
  }
  80% {
    transform: rotate(-1deg);
  }
  90% {
    transform: rotate(0.5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ==========================================================================
   12. パーツ固有スタイル
   ========================================================================== */

/* 基本パーツ */
.part-heading {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}

.part-text {
  color: #666;
  line-height: 1.6;
}

.part-button {
  display: inline-block;
  padding: 0.75rem 2rem;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.part-spacer {
  height: 2rem;
  /* 編集画面でのみ枠線を表示し、公開・プレビューでは非表示にする */
  border: 1px dashed transparent;
  margin-left: auto;
  margin-right: auto;
}
.editor-area .part-spacer {
  border-color: #ddd;
}

.part-footer {
  padding: 2rem;
  text-align: center;
  color: #666;
  border-top: 1px solid #ddd;
}

.part-image {
  text-align: center;
}

/* 動画パーツ */
.part-video {
  text-align: center;
  margin-bottom: 1rem;
}

.video-container {
  max-width: 100%;
  margin: 0 auto;
}

.video-placeholder {
  border: 2px dashed #ddd;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.video-placeholder:hover {
  border-color: #007bff;
  background-color: #f8f9fa;
}

.uploaded-video {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.youtube-video iframe {
  border-radius: 8px;
}

.video-file-btn,
.video-url-btn {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.video-file-btn:hover,
.video-url-btn:hover {
  background-color: #0056b3;
}

/* 画像リンク */
.image-container a {
  display: inline-block;
  transition: transform 0.2s ease;
}

.image-container a:hover {
  transform: scale(1.02);
}

/* アニメーション適用 */
.image-animation-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  line-height: 0;
}

.dropped-part img {
  transition: transform 0.2s ease-out;
}

.shine-animation::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 4s infinite ease-in-out;
  animation-delay: 1s;
}

.pulse-animation {
  animation: pulse 2s infinite;
}

.shake-animation {
  animation: rotate-shake 0.5s ease-in-out infinite;
}

/* ==========================================================================
   13. グローバルスタイル適用（エディター内パーツ）
   ========================================================================== */

.dropped-part h1,
.dropped-part h2,
.dropped-part h3,
.dropped-part h4,
.dropped-part h5,
.dropped-part h6 {
  color: var(--main-color);
}

.dropped-part button,
.dropped-part .btn {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.dropped-part button:hover,
.dropped-part .btn:hover {
  background-color: color-mix(in srgb, var(--main-color) 85%, black);
  border-color: color-mix(in srgb, var(--main-color) 85%, black);
}

/* ==========================================================================
   14. 高度なエディターパーツ（Quill.js）
   ========================================================================== */

.advanced-editor-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.advanced-editor-preview:hover .advanced-editor-overlay {
  display: none !important;
}

.advanced-editor-toolbar {
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
  padding: 8px;
  border-radius: 6px 6px 0 0;
}

.advanced-editor-content {
  min-height: 200px;
  padding: 15px;
  border-radius: 0 0 6px 6px;
  font-family: var(--font-family);
  font-size: var(--font-size);
}

.advanced-editor-content:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.advanced-editor-container {
  font-family: var(--font-family);
}

.ql-custom-button {
  background: #28a745;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  margin: 0 2px;
  cursor: pointer;
}

.ql-custom-button:hover {
  background: #218838;
}

/* ==========================================================================
   15. テキストツールバー
   ========================================================================== */

.text-toolbar {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px 4px 0 0;
  padding: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.toolbar-group {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 4px;
  border-right: 1px solid #dee2e6;
}

.toolbar-group:last-child {
  border-right: none;
}

.toolbar-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ced4da;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s;
  position: relative;
}

.toolbar-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.toolbar-btn:active {
  background: #dee2e6;
  transform: translateY(1px);
}

.toolbar-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.color-btn,
.marker-btn {
  position: relative;
  overflow: hidden;
}

.color-picker,
.marker-picker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.link-btn,
.table-btn {
  font-size: 16px;
}

.dropped-part.selected .part-content[contenteditable="true"] {
  border: 2px solid #007bff;
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 12px;
  min-height: 60px;
  background: white;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* テキストエディター内の要素 */
/* テキストエディター内の要素 */
.part-content table,
.editor-area table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  font-size: inherit;
}

.part-content table td,
.part-content table th,
.editor-area table td,
.editor-area table th {
  padding: 8px;
  border: 1px solid #ddd;
  min-width: 50px;
  position: relative;
}

.part-content table td:focus {
  background: #f8f9fa;
  outline: 2px solid #007bff;
}

.part-content table th,
.editor-area table th {
  background-color: #f8f9fa;
  font-weight: bold;
}

.part-content table td,
.editor-area table td {
  background-color: white;
}

.part-content ul,
.part-content ol,
.ql-editor ul,
.ql-editor ol,
.mce-content-body ul,
.mce-content-body ol {
  margin: 10px 0;
  padding-left: 0;
}

.part-content li,
.ql-editor li,
.mce-content-body li {
  margin: 4px 0;
}

.part-content span[style*="background"] {
  padding: 2px 4px;
  border-radius: 2px;
}

/* ==========================================================================
   16. アンカーリンク
   ========================================================================== */

.lp-part[id] {
  scroll-margin-top: 20px;
}

.preview-part[id] {
  scroll-margin-top: 20px;
}

.anchor-display {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #6c757d !important;
  color: white !important;
  padding: 0 !important;
  border-radius: 5px !important;
  font-size: 0 !important;
  font-family: "Courier New", monospace !important;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  opacity: 0.8 !important;
}

.anchor-display:hover {
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  position: relative !important;
  left: -20px !important;
}

.anchor-name {
  font-weight: bold !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
  font-size: 11px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
}

.anchor-copy-btn,
.anchor-edit-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  color: white !important;
  cursor: pointer;
  padding: 3px;
  font-size: 14px !important;
  opacity: 0.9;
  transition: all 0.2s;
  border-radius: 3px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}

.anchor-copy-btn:hover,
.anchor-edit-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   17. フォーム・FAQ・お客様の声パーツ
   ========================================================================== */

/* フォームパーツ */
.dropped-part[data-type="form"] .form-preview {
  border-color: var(--main-color);
}

.dropped-part[data-type="form"] .form-preview h3 {
  color: var(--main-color);
}

.dropped-part[data-type="form"] .form-preview .form-preview-fields > div {
  font-family: var(--font-family);
  font-size: var(--font-size);
}

.dropped-part[data-type="form"] .form-preview button {
  background-color: var(--main-color);
  border-color: var(--main-color);
  font-family: var(--font-family);
  font-size: var(--font-size);
}

.dropped-part[data-type="form"] .form-preview button:hover {
  background-color: color-mix(in srgb, var(--main-color) 85%, black);
}

/* FAQパーツ */
.dropped-part[data-type="faq"] .faq-preview {
  background: transparent;
  padding: 20px;
}
.faq-preview .faq-title {
  margin: 0 0 20px 0;
  color: var(--main-color);
  text-align: center;
  font-family: var(--font-family);
  font-size: var(--font-size-h3);
}
.faq-preview .faq-items {
  max-width: 800px;
  margin: 0 auto;
}
/* QAセットのデザイン */
.faq-preview .faq-item {
  border: none;
  background: none;
  /* QAセット間の余白 */
  margin-bottom: 2em;
  text-align: left;
}
.faq-preview .faq-question {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  /* QとAの余白を調整 */
  padding-bottom: 0.5em;
  font-weight: bold;
  background: transparent;
  border-bottom: 1px solid #eee;
}
.faq-preview .faq-answer {
  display: none;
  align-items: flex-start;
  /* QとAの余白とインデントを調整 */
  padding: 1em 0 0 1em;
}
.faq-preview .faq-item.is-open > .faq-answer {
  display: flex;
}
.faq-preview .faq-icon-wrapper {
  margin-right: 10px;
  flex-shrink: 0;
}
.faq-preview .faq-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: var(--main-color);
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
  font-size: 14px;
}
.faq-preview .faq-question-text,
.faq-preview .faq-answer-text {
  flex-grow: 1;
  color: #333;
  margin: 0;
  padding-top: 2px;
  line-height: 1.7;
  font-family: var(--font-family);
  font-size: var(--font-size);
}
.faq-preview .faq-toggle-arrow {
  margin-left: auto;
  padding-left: 16px;
  color: #888;
  transition: transform 0.2s ease;
}
.faq-preview .faq-item:not(.is-open) .faq-toggle-arrow::before {
  content: "▼";
}
.faq-preview .faq-item.is-open .faq-toggle-arrow {
  transform: rotate(180deg);
}
.faq-preview .faq-item.is-open .faq-toggle-arrow::before {
  content: "▼";
}

/* お客様の声パーツ */
.dropped-part[data-type="testimonial"] .testimonial-preview {
  border-color: var(--sub-color);
}

.dropped-part[data-type="testimonial"] .testimonial-preview h3 {
  color: var(--main-color);
  font-family: var(--font-family);
  font-size: var(--font-size-h3);
  text-align: center !important;
}

.dropped-part[data-type="testimonial"] .testimonial-name {
  color: var(--main-color);
  font-family: var(--font-family);
  font-weight: bold;
}

.dropped-part[data-type="testimonial"] .testimonial-title {
  font-family: var(--font-family);
  font-size: calc(var(--font-size) * 0.875);
  color: var(--sub-color);
}

.dropped-part[data-type="testimonial"] .testimonial-content {
  font-family: var(--font-family);
  font-size: var(--font-size);
}

.dropped-part[data-type="testimonial"] .testimonial-item {
  border-color: var(--sub-color);
}

/* 設定ボタンの統一スタイル */
button[class*="edit-"],
.edit-form-btn,
.edit-faq-btn,
.edit-testimonial-btn {
  background-color: #6c757d !important;
  color: white !important;
  border-color: #6c757d !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

button[class*="edit-"]:hover,
.edit-form-btn:hover,
.edit-faq-btn:hover,
.edit-testimonial-btn:hover {
  background-color: #5a6268 !important;
}

/* ==========================================================================
   18. カスタムフィールド（ドラッグ&ドロップ）
   ========================================================================== */

.custom-field-item {
  transition: background-color 0.3s ease, border 0.2s ease;
  position: relative;
}

.custom-field-item h5 {
  cursor: move;
  user-select: none;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.custom-field-item h5:hover {
  background-color: #e3f2fd;
  color: #007cba;
}

.custom-field-item h5:active {
  cursor: grabbing;
  background-color: #bbdefb;
}

.custom-field-item[draggable="true"] {
  cursor: move;
}

.drag-handle:hover {
  color: #007cba !important;
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

/* ==========================================================================
   19. モーダル（共通）
   ========================================================================== */

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
}

.modal-content {
  display: flex;
  flex-direction: column;
  height: 85vh;
  max-height: 750px;
  width: 90%;
  max-width: 800px;
  background: #fefefe;
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
  padding: 0;
  border: none;
}

.modal-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #dee2e6;
  background: #fdfdfd;
}

.modal-header h2,
.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

.modal-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #dee2e6;
  background: #f8f9fa;
}

.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: black;
}

/* モーダル表示時の背景ブラー */
body.modal-open .parts-sidebar,
body.modal-open .builder-header,
body.modal-open .editor-area {
  filter: blur(3px);
  pointer-events: none;
  transition: filter 0.3s ease;
}

/* モーダル内のフォーム要素 */
.modal * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  /* color: #333 !important; ← この行をコメントアウト */
}

/* モーダル内のテキスト要素のみに色を適用 */
.modal p,
.modal span,
.modal label,
.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6 {
  color: #333 !important;
}

/* モーダル内のボタンは白文字 */
.modal button,
.modal .btn {
  color: white !important;
}

/* ==========================================================================
   20. カスタムアラート・確認モーダル
   ========================================================================== */

.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.custom-modal {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  min-width: 300px;
  max-width: 500px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease;
}

.custom-modal-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.custom-modal-icon {
  font-size: 2rem;
  margin-right: 1rem;
}

.custom-modal-icon.success {
  color: #28a745;
}

.custom-modal-icon.error {
  color: #dc3545;
}

.custom-modal-icon.warning {
  color: #ffc107;
}

.custom-modal-icon.info {
  color: #17a2b8;
}

.custom-modal-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}

.custom-modal-body {
  margin-bottom: 1.5rem;
  color: #666;
  line-height: 1.5;
}

.custom-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.custom-modal-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.custom-modal-btn.primary {
  background: #007bff;
  color: white;
}

.custom-modal-btn.primary:hover {
  background: #0056b3;
}

.custom-modal-btn.secondary {
  background: #6c757d;
  color: white;
}

.custom-modal-btn.secondary:hover {
  background: #545b62;
}

.custom-modal-btn.success {
  background: #28a745;
  color: white;
}

.custom-modal-btn.success:hover {
  background: #218838;
}

.custom-modal-btn.danger {
  background: #dc3545;
  color: white;
}

.custom-modal-btn.danger:hover {
  background: #c82333;
}

.custom-modal-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 1rem 0;
  font-size: 0.875rem;
}

.custom-modal-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* ==========================================================================
   21. プロパティパネル（非表示だが念のため保持）
   ========================================================================== */

.properties-sidebar {
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  color: #333 !important;
}

.properties-sidebar * {
  font-family: inherit !important;
  color: inherit !important;
}

.properties-panel,
.properties-panel * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  color: #333 !important;
}

.property-group {
  margin-bottom: 15px;
}

.property-label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.property-select,
.property-input,
.property-textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.property-select:focus,
.property-input:focus,
.property-textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.property-input[type="checkbox"] {
  width: auto;
  margin-right: 0.5rem;
}

.help-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.property-actions {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
}

.property-actions .btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: white !important;
  transition: all 0.2s ease;
}

/* ==========================================================================
   22. SEO設定・スタイル設定
   ========================================================================== */

.seo-settings {
  max-height: 60vh;
  overflow-y: auto;
  padding: 1rem;
}

.seo-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #dee2e6;
}

.seo-section:last-child {
  border-bottom: none;
}

.seo-section h3 {
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.2rem;
}

.style-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #dee2e6;
}

.style-section:last-child {
  border-bottom: none;
}

.style-section h3 {
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.2rem;
}

.property-textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
}

.color-grid input[type="color"] {
  cursor: pointer;
  border: 2px solid #ddd;
}

.color-grid input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-grid input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}

#stylePreview h2 {
  color: var(--main-color);
  font-family: var(--font-family);
  font-size: var(--font-size-h2);
}

#stylePreview p {
  font-family: var(--font-family);
  font-size: var(--font-size);
}

#stylePreview button {
  background-color: var(--main-color);
  font-family: var(--font-family);
}

/* ==========================================================================
   23. ランディングページリスト（読み込み機能）
   ========================================================================== */

.lp-list {
  max-height: 400px;
  overflow-y: auto;
  margin-top: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f9fa;
  padding: 0.5rem;
}

.lp-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: white;
  transition: background-color 0.2s;
}

.lp-item:hover {
  background: #f0f8ff;
  border-color: #007bff;
}

.lp-item:last-child {
  margin-bottom: 0;
}

.lp-info {
  flex: 1;
}

.lp-info h4 {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.1rem;
}

.lp-meta {
  margin: 0 0 0.5rem 0;
  color: #666;
  font-size: 0.875rem;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: bold;
  margin-top: 0.25rem;
}

.status-badge.published {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-badge.draft {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.load-lp-btn {
  min-width: 100px;
  margin-left: 1rem;
}

.no-lps {
  text-align: center;
  color: #666;
  padding: 2rem;
  font-style: italic;
}

/* ==========================================================================
   24. モーダル内の個別設定
   ========================================================================== */

/* フォーム設定モーダル */
.form-dialog .modal-content {
  display: flex;
  flex-direction: column;
  height: 85vh;
  max-height: 750px;
}

.form-dialog .modal-header {
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #dee2e6;
  background: #fdfdfd;
}

.form-dialog .modal-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.form-dialog .modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #dee2e6;
  background: #f8f9fa;
}

/* お客様の声・FAQ編集モーダル内のボタン */
.faq-item-edit h5 button,
.testimonial-item-edit h5 button,
.custom-field-item h5 button {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: normal;
}

.testimonial-item-edit .upload-image-btn {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* ==========================================================================
   25. レスポンシブ対応
   ========================================================================== */

@media (max-width: 768px) {
  .builder-main {
    grid-template-columns: 1fr;
  }

  .parts-sidebar {
    position: fixed;
    left: -250px;
    top: 0;
    height: 100vh;
    z-index: 999;
    transition: left 0.3s ease;
    background: white;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  }

  .parts-sidebar.open {
    left: 0;
  }

  .text-toolbar {
    flex-wrap: wrap;
    gap: 4px;
  }

  .toolbar-group {
    margin-bottom: 4px;
  }

  .toolbar-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .modal-content {
    width: 95%;
    height: 90vh;
  }

  .editor-area {
    padding: 1rem;
  }

  .editor-container {
    max-width: 100%;
  }
}

/* ==========================================================================
   画像パーツの余白完全削除（修正厳禁）
   ========================================================================== */

/* 画像パーツのコンテナ全般の垂直方向の余白を完全に削除 */
.dropped-part[data-type="image"],
.lp-part-image,
.preview-part[style*="margin-top: 0"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
  /* border-top: none !important; および border-bottom: none !important; を削除 */
  /* border-width: 0 !important; も削除 */
}

/* 画像パーツ内のコンテンツエリアの垂直方向の余白を完全に削除 */
.dropped-part[data-type="image"] .part-content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
}

/* 画像要素自体の垂直方向の余白、パディング、ボーダーを完全に削除し中央揃え */
.dropped-part[data-type="image"] img,
.lp-part-image img,
.preview-part[style*="margin-top: 0"] img {
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 0 !important;
  display: block !important;
  vertical-align: top !important;
  /* border: none !important; を削除 */
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* アニメーションラッパーがある場合も垂直方向の余白を完全に削除し中央揃え */
.dropped-part[data-type="image"] .image-animation-wrapper,
.lp-part-image .image-animation-wrapper,
.preview-part[style*="margin-top: 0"] .image-animation-wrapper {
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 0 !important;
  display: block !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 画像リンクがある場合も垂直方向の余白を完全に削除し中央揃え */
.dropped-part[data-type="image"] a,
.lp-part-image a,
.preview-part[style*="margin-top: 0"] a {
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 0 !important;
  display: block !important;
  text-decoration: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 見出しで画像を囲んでいる場合、Hタグの垂直方向の余白を完全に削除し中央揃え */
.dropped-part[data-type="image"] h1,
.dropped-part[data-type="image"] h2,
.dropped-part[data-type="image"] h3,
.dropped-part[data-type="image"] h4,
.dropped-part[data-type="image"] h5,
.dropped-part[data-type="image"] h6,
.lp-part-image h1,
.lp-part-image h2,
.lp-part-image h3,
.lp-part-image h4,
.lp-part-image h5,
.lp-part-image h6,
.preview-part[style*="margin-top: 0"] h1,
.preview-part[style*="margin-top: 0"] h2,
.preview-part[style*="margin-top: 0"] h3,
.preview-part[style*="margin-top: 0"] h4,
.preview-part[style*="margin-top: 0"] h5,
.preview-part[style*="margin-top: 0"] h6 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 画像パーツ内のすべての要素に対する最終的な垂直方向の余白リセット */
.dropped-part[data-type="image"] *:not(.action-icon),
.lp-part-image *:not(.action-icon),
.preview-part[style*="margin-top: 0"] *:not(.action-icon) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
  /* border-top: none !important; および border-bottom: none !important; を削除 */
  outline: none !important;
  box-sizing: border-box !important;
}
/*
 * 注意事項:
 * - スペーサーパーツを使用して余白を調整してください
 * - この設定により画像パーツは完全に隙間なく配置されます
 * - 今後のCSS変更時も、この設定は保持してください
 */

/* サイドバーの「パーツ」見出しのスタイル調整 */
.parts-sidebar h2 {
  font-size: 1.2rem;
  padding: 1rem 0.5rem !important;
  font-weight: 600;
  border-bottom: dotted 1px #ccc;
  margin-bottom: 15px !important;
}

/*
  お客様の声パーツのアイテム間マージン調整
  - エディター画面での表示を確実に変更するため、より詳細なセレクタで指定します。
*/
.editor-area
  .dropped-part[data-type="testimonial"]
  .testimonial-item
  + .testimonial-item {
  margin-top: 30px !important;
}

/* =================================================================== */
/* Quillエディター ツールバー日本語化 & スタイル修正 (最終版)        */
/* =================================================================== */

/* --- 見出し(header) --- */
/* ツールバーのデフォルト表示を「見出し」に */
body .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="false"]::before,
body .ql-snow .ql-picker.ql-header .ql-picker-label::before {
  content: "見出し" !important;
}
/* ドロップダウン内の各項目を日本語化 */
body .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "見出し 1" !important;
}
body .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "見出し 2" !important;
}
body .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "見出し 3" !important;
}
body .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "見出し 4" !important;
}
body .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "見出し 5" !important;
}
body .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "見出し 6" !important;
}
/* "Normal" を "標準テキスト" に変更 (複数のセレクタで確実に指定) */
body .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="false"]::before,
body .ql-snow .ql-picker.ql-header .ql-picker-item:not([data-value])::before {
  content: "標準テキスト" !important;
}

/* --- フォントサイズ(size) --- */
/* ツールバーのデフォルト表示を「フォントサイズ」に */
body .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="false"]::before,
body .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="normal"]::before,
body .ql-snow .ql-picker.ql-size .ql-picker-label::before {
  content: "サイズ" !important;
}
/* ドロップダウン内の各項目を日本語化 */
body .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "小" !important;
}
body .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "大" !important;
}
body .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "特大" !important;
}
/* "Normal" を "標準" に変更 (複数のセレクタで確実に指定) */
body .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="false"]::before,
body .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="normal"]::before,
body .ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before {
  content: "標準" !important;
}

/* --- Quill Editor Font Size Classes (プレビュー＆公開ページ用) --- */
.ql-size-small {
  font-size: 0.8em;
}
.ql-size-large {
  font-size: 1.5em;
}
.ql-size-huge {
  font-size: 2.5em;
}

/* パーツ移動用ハンドルのスタイル */
.dropped-part .part-actions .drag-handle {
  background-color: #6c757d !important; /* グレー */
  cursor: grab !important;
}

.dropped-part .part-actions .drag-handle:active {
  cursor: grabbing !important;
}

/* パーツの操作ボタン（複製・削除など） */
.part-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  z-index: 1001;
}

/* 画面幅が768px以下の時（スマホ表示の目安）に適応されるスタイル */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 24px;
  }

  /* リストの余白を縮小 */
  ul,
  ol {
    margin: 0.3em 0 0.8em 0;
    padding-left: 0;
  }

  li {
    margin: 0.1em 0;
    line-height: 1.4;
  }

  /* 全体的な余白を縮小 */
  .lp-part-container {
    padding: 0 10px;
  }

  /* 見出しの上下余白を縮小 */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0.5em 0 0.3em 0;
  }

  /* パラグラフの余白を縮小 */
  p {
    margin: 0 0 0.8em 0;
  }
}

/*
  高機能エディター（TinyMCE）がアクティブな際の
  操作ボタンの表示位置を調整します。
*/
.dropped-part[data-type="advanced-editor"] .tox-tinymce {
  margin-top: 45px;
}

/* --- フッターパーツのスタイル --- */
.lp-footer {
  /* 背景色をサブカラーの薄い色に設定 */
  background-color: color-mix(in srgb, var(--sub-color) 15%, white);
  padding: 2em 1em;
  text-align: center;
  /* 上下の余白をなくし、横幅いっぱいに */
  margin: 0;
  width: 100%;
  box-sizing: border-box; /* paddingを含めて幅を100%にする */
}

.lp-footer .company-name {
  /* 会社名のスタイル */
  font-weight: normal;
  font-size: 0.9em;
  color: #333;
  margin: 0;
}

.lp-footer .extra-line {
  /* 追加テキストのスタイル */
  font-size: 0.8em;
  color: #666;
  margin: 0.5em 0 0 0;
}

/* --- 公開ページ用 FAQスタイル --- */
.faq-section {
  margin: 30px 0;
}
.faq-section .faq-title {
  text-align: center;
  margin: 0 0 30px 0;
  color: var(--main-color);
  font-family: var(--font-family);
  font-size: var(--font-size-h3);
}
.faq-section .faq-items {
  max-width: 800px;
  margin: 0 auto;
}
.faq-section .faq-item {
  border: none;
  background: none;
  margin-bottom: 2em;
  text-align: left;
}
.faq-section .faq-question {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  padding-bottom: 0.5em;
  font-weight: bold;
  background: transparent;
  border-bottom: 1px solid #eee;
}
.faq-section .faq-answer {
  display: none;
  align-items: flex-start;
  padding: 1em 0 0 1em;
}
.faq-section .is-open > .faq-answer {
  display: flex;
}
.faq-section .faq-icon-wrapper {
  margin-right: 10px;
  flex-shrink: 0;
}
.faq-section .faq-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: var(--main-color);
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
  font-size: 14px;
}
.faq-section .faq-question-text,
.faq-section .faq-answer-text {
  flex-grow: 1;
  color: #333;
  margin: 0;
  padding-top: 2px;
  line-height: 1.7;
  font-family: var(--font-family);
  font-size: var(--font-size);
}
.faq-section .faq-toggle-arrow {
  margin-left: auto;
  padding-left: 16px;
  color: #888;
  transition: transform 0.2s ease;
}
.faq-section .faq-item:not(.is-open) .faq-toggle-arrow::before {
  content: "▼";
}
.faq-section .faq-item.is-open .faq-toggle-arrow {
  transform: rotate(180deg);
}
.faq-section .faq-item.is-open .faq-toggle-arrow::before {
  content: "▼";
}

/* --- プレビュー・公開ページ用の追加スタイル調整 --- */

/* スペーサーパーツの枠線を常に非表示にする */
.lp-part-container .dropped-part[data-type="spacer"] .part-content,
.lp-part-full-bleed-content .dropped-part[data-type="spacer"] .part-content {
  border: none !important;
}

/* 「横幅いっぱい」設定時の、フォーム・お客様の声・FAQの不要な枠線と背景を削除 */
.lp-part-full-bleed-content .form-preview,
.lp-part-full-bleed-content .testimonial-preview,
.lp-part-full-bleed-content .faq-preview {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 「横幅いっぱい」設定時の、フォーム・お客様の声・FAQの不要な枠線と背景を削除 */
.lp-part-full-bleed-content .form-preview,
.lp-part-full-bleed-content .testimonial-preview,
.lp-part-full-bleed-content .faq-preview {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* FAQパーツの表示タイプ用CSS */
.dropped-part.faq-full-bleed {
  margin: 20px -20px !important;
  background: transparent !important;
}

.dropped-part.faq-full-bleed .faq-container {
  background: color-mix(in srgb, var(--sub-color) 15%, white) !important;
}

.dropped-part.faq-block {
  margin: 20px 0 !important;
  background: transparent !important;
}

.dropped-part.faq-block .faq-container {
  background: transparent !important;
}

/* スマホ用改行 */
.mobile-br {
  display: none;
}

@media (max-width: 768px) {
  .mobile-br::before {
    content: "\A";
    white-space: pre;
  }
}