html, body { margin: 0; padding: 0; background: #0b1220; }
body { font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif; color: #1c2b3a; -webkit-font-smoothing: antialiased; }
a { color: #2f7dc0; text-decoration: none; }
a:hover { color: #1e5a8a; }
* { box-sizing: border-box; }
.sp-hide { display: none; }

/* ライブデモ: お知らせ一覧の行（クリックで詳細へ） */
.demo-news-row { cursor: pointer; transition: background .12s ease; }
.demo-news-row:hover { background: #f8fafc; }

/* ライブデモ: 詳細ビューの「一覧に戻る」ボタン */
.demo-back-btn { background: none; border: none; padding: 0; margin: 0 0 16px; color: #2f7dc0; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.demo-back-btn:hover { color: #1e5a8a; }

/* ライブデモ: 公開APIの本文（ProseMirror/Tiptap JSON）のレンダリング */
.pm > :first-child { margin-top: 0; }
.pm h1 { font-size: 19px; font-weight: 800; line-height: 1.6; margin: 18px 0 10px; color: #1c2b3a; }
.pm h2 { font-size: 16.5px; font-weight: 800; line-height: 1.6; margin: 18px 0 10px; color: #1c2b3a; }
.pm h3 { font-size: 14px; font-weight: 700; line-height: 1.6; margin: 16px 0 8px; color: #1c2b3a; }
.pm p { font-size: 13px; color: #334155; line-height: 2; margin: 0 0 12px; }
.pm p:last-child { margin-bottom: 0; }
.pm ul, .pm ol { margin: 0 0 12px; padding-left: 1.5em; }
.pm li { font-size: 13px; color: #334155; line-height: 1.9; }
.pm a { color: #2f7dc0; text-decoration: underline; }
.pm strong { font-weight: 700; }
.pm blockquote { margin: 0 0 12px; padding: 6px 14px; border-left: 3px solid #cbd5e1; color: #475569; }
.pm blockquote p { margin: 0; }
.pm hr { border: none; border-top: 1px solid #e6ebf1; margin: 18px 0; }
.pm code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: #f1f5f9; color: #05ae99; padding: 1px 5px; border-radius: 4px; }
.pm pre.pm-code { background: #0f1a2e; color: #c9d6e3; border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 0 0 12px; }
.pm pre.pm-code code { background: none; color: inherit; padding: 0; }
.pm mark { border-radius: 3px; padding: 0 2px; }
.pm img { max-width: 100%; height: auto; border-radius: 6px; margin: 0 0 12px; }
.pm .pm-file { display: inline-flex; gap: 4px; font-size: 12.5px; }
.pm ul.pm-tasklist { list-style: none; padding-left: 0; }
.pm ul.pm-tasklist li { display: flex; gap: 8px; align-items: flex-start; }
.pm .pm-task-box { flex: none; width: 15px; height: 15px; margin-top: 3px; border: 1px solid #cbd5e1; border-radius: 3px; font-size: 11px; line-height: 13px; text-align: center; color: #05ae99; }
.pm .pm-task-box.is-checked { background: #e0f5f1; border-color: #05ae99; }
/* FAQ回答は一覧内でやや小さめ・グレーで表示 */
.pm-answer p { font-size: 12.5px; color: #475569; line-height: 1.85; margin: 0; }

/* ライブデモ: 読み込み中・エラー・フォールバック通知 */
.demo-msg { font-size: 12.5px; color: #94a3b8; padding: 6px 0; }
.demo-notice { font-size: 11.5px; color: #9a6a00; background: #fdf6e3; border: 1px solid #f0e0a8; border-radius: 6px; padding: 9px 12px; margin: 0 0 14px; line-height: 1.7; }

/* =========================================================
   料金プラン比較表（microCMS風）
   ========================================================= */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e6ebf1; border-radius: 12px; }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; font-size: 12.5px; }
.cmp th, .cmp td { padding: 13px 14px; border-bottom: 1px solid #eef2f6; text-align: center; color: #475569; vertical-align: middle; }
.cmp thead th { border-bottom: 2px solid #e6ebf1; background: #fff; vertical-align: top; padding: 18px 14px; }
.cmp .cmp-plan-name { font-size: 15px; font-weight: 800; color: #1c2b3a; }
.cmp .cmp-plan-price { font-size: 19px; font-weight: 900; color: #1c2b3a; margin-top: 6px; }
.cmp .cmp-plan-price small { font-size: 11px; font-weight: 500; color: #94a3b8; }
.cmp .cmp-plan-note { font-size: 10.5px; color: #94a3b8; margin-top: 4px; line-height: 1.5; }
.cmp thead th.is-rec { position: relative; overflow: hidden; }
.cmp .cmp-rec-ribbon { position: absolute; top: 0; right: 0; width: 78px; height: 78px; overflow: hidden; pointer-events: none; }
.cmp .cmp-rec-ribbon span { position: absolute; top: 15px; right: -28px; width: 110px; background: #05ae99; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-align: center; padding: 2px 0; transform: rotate(45deg); }
.cmp .rowhead { text-align: left; font-weight: 600; color: #334155; white-space: nowrap; background: #fafcff; }
.cmp .cmp-group th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #2f7dc0; background: #eef6fb; padding: 9px 14px; }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: none; }
.cmp .yes { color: #05ae99; font-weight: 800; font-size: 14px; }
.cmp .no { color: #cbd5e1; font-weight: 700; }
.cmp .num { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-variant-numeric: tabular-nums; color: #1c2b3a; }
.cmp .cmp-strong { color: #1c2b3a; font-weight: 700; }
/* おすすめ列（Standard = 3列目）を薄くハイライト */
.cmp td:nth-child(3), .cmp thead th:nth-child(3) { background: #f0fbf8; }

/* =========================================================
   レスポンシブ対応
   各要素はインラインstyleでレイアウトされているため、
   style属性の部分一致セレクタ + !important で上書きする。
   ========================================================= */

/* ---- タブレット以下（〜900px） ---- */
@media (max-width: 900px) {
  /* ヒーロー: 2カラム → 1カラム */
  [style*="grid-template-columns:1.05fr .95fr"] { grid-template-columns: 1fr !important; gap: 40px !important; }
  /* ライブデモ: リクエスト/レンダリングの2カラム → 1カラム */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* セキュリティ外側: 2カラム → 1カラム */
  [style*="grid-template-columns:.8fr 1.2fr"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* カード3カラム（課題・機能）→ 2カラム */
  [style*="grid-template-columns:repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* 料金カード4カラム → 2カラム */
  [style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- スマホ（〜640px） ---- */
@media (max-width: 640px) {
  /* セクションの左右余白を圧縮 */
  [style*="max-width:1120px"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* ヘッダー: セクションリンクを隠し、ロゴ＋CTAのみ表示 */
  header nav a[style*="#c4d2df"] { display: none !important; }
  header nav { gap: 0 !important; }

  /* カード3カラム → 1カラム */
  [style*="grid-template-columns:repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  /* 料金カード4カラム → 1カラム */
  [style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }

  /* 見出しの縮小 */
  [style*="font-size:42px; font-weight:900"] { font-size: 30px !important; }
  [style*="font-size:28px; font-weight:800"] { font-size: 22px !important; }

  /* ヒーローの数値スタッツ: 折り返し、区切り線は非表示 */
  [style*="gap:28px"] { flex-wrap: wrap !important; gap: 16px 22px !important; }
  [style*="width:1px; background:rgba(255,255,255,.12)"] { display: none !important; }

  /* 仕組み: 横並び → 縦並び、矢印を下向きに回転 */
  [style*="align-items:stretch; gap:0"] { flex-direction: column !important; }
  [style*="color:#cbd5e1; font-size:22px"] { transform: rotate(90deg); padding: 2px 0 !important; }

  /* ボタン行: 折り返しを許可 */
  [style*="gap:12px; margin-bottom:34px"] { flex-wrap: wrap !important; }
  [style*="gap:12px; justify-content:center"] { flex-wrap: wrap !important; }

  .sp-hide { display: inherit; }
}

/* =========================================================================
   フォーム送信完了カード（デモLP・お問い合わせフォーム）
   ========================================================================= */
.cms-success-card {
  text-align: center;
  background: #fff;
  border: 1px solid #e6ebf1;
  border-radius: 12px;
  padding: 48px 28px;
  box-shadow: 0 10px 30px rgba(5, 174, 153, 0.08);
  animation: cms-fade-up 0.5s ease both;
}
.cms-success-check {
  width: 88px;
  height: 88px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #e7f7f3;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cms-pop 0.45s cubic-bezier(0.18, 1.25, 0.4, 1) both;
}
.cms-success-check svg { width: 54px; height: 54px; }
.cms-success-check circle {
  fill: none;
  stroke: #05ae99;
  stroke-width: 3;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: cms-stroke 0.55s cubic-bezier(0.65, 0, 0.45, 1) 0.15s forwards;
}
.cms-success-check path {
  fill: none;
  stroke: #05ae99;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: cms-stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.55s forwards;
}
.cms-success-card h3 { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0 0 10px; }
.cms-success-card p { font-size: 14px; color: #475569; line-height: 1.9; margin: 0 0 18px; }
.cms-success-receipt {
  display: inline-block;
  font-size: 13px;
  color: #0d9488;
  background: #e0f5f1;
  border: 1px solid #b6e6dd;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
}
.cms-success-receipt strong { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; }
.cms-success-note { font-size: 11px; color: #94a3b8; line-height: 1.9; margin: 18px auto 0; max-width: 460px; }
.cms-success-note code { color: #0d9488; font-family: 'JetBrains Mono', monospace; }
.cms-success-again {
  margin-top: 24px;
  background: transparent;
  color: #05ae99;
  border: 1px solid #05ae99;
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cms-success-again:hover { background: #05ae99; color: #fff; }
@keyframes cms-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cms-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes cms-stroke { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cms-success-card, .cms-success-check { animation: none; }
  .cms-success-check circle, .cms-success-check path { animation: none; stroke-dashoffset: 0; }
}