/* ============================================================
   Obscura — landing.css（集客用ランディングページ 専用）
   common.css の後に読み込む。記事型の読みやすいレイアウト。
   ============================================================ */

.lp { max-width: 760px; margin: 0 auto; padding: 40px 20px 8px; }

/* パンくず */
.lp__crumbs { font-size: 0.82rem; color: var(--text-mute); margin-bottom: 22px; }
.lp__crumbs a { color: var(--text-mute); text-decoration: none; }
.lp__crumbs a:hover { color: var(--lens); text-decoration: underline; }
.lp__crumbs span { margin: 0 6px; opacity: 0.5; }

/* ヒーロー */
.lp__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lens); margin-bottom: 14px;
}
.lp__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lens); }
.lp__title { font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1.3; margin: 0 0 16px; letter-spacing: 0.01em; }
.lp__lead { font-size: 1.05rem; line-height: 1.9; color: var(--text-mute); margin: 0 0 24px; }
.lp__hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.lp__hero-note { font-size: 0.85rem; color: var(--text-mute); margin-top: 12px; }

/* 本文セクション */
.lp__section { margin-top: 44px; }
.lp__h2 {
  font-size: 1.45rem; line-height: 1.4; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.lp__section p { line-height: 1.95; margin: 0 0 16px; color: var(--text); }
.lp__section ul { margin: 0 0 16px; padding-left: 1.25em; }
.lp__section li { line-height: 1.9; margin-bottom: 8px; }
.lp__section strong { color: var(--text); }

/* 手順（3ステップ） */
.lp__steps { list-style: none; counter-reset: step; padding: 0; margin: 8px 0 16px; }
.lp__steps li {
  position: relative; counter-increment: step;
  padding: 16px 18px 16px 60px; margin-bottom: 12px;
  background: var(--surface, rgba(0,0,0,0.02)); border: 1px solid var(--line); border-radius: var(--radius-sm, 12px);
}
.lp__steps li::before {
  content: counter(step); position: absolute; left: 16px; top: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lens); color: #211a08; font-weight: 700; font-family: var(--font-mono);
}
.lp__steps b { display: block; margin-bottom: 4px; }

/* FAQ */
.lp__faq { margin-top: 12px; }
.lp__faq-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.lp__faq-q { font-weight: 600; margin: 0 0 8px; }
.lp__faq-q::before { content: "Q. "; color: var(--lens); font-family: var(--font-mono); }
.lp__faq-a { margin: 0; line-height: 1.9; color: var(--text-mute); }

/* ---- 料金表（fragments/landing :: pricing） ----
   記事幅（760px）に収まる表組み。狭い端末では表だけを横スクロールさせ、
   ページ全体が横に伸びないようにする。 */
.lp-price__scroll { overflow-x: auto; margin: 8px 0 12px; }
.lp-price { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 460px; }
.lp-price th, .lp-price td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.lp-price th {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-mute); font-weight: 400; white-space: nowrap;
}
.lp-price td { white-space: nowrap; }
.lp-price tbody tr:last-child td { border-bottom: 0; }
/* 無料枠は主役なので背景で強調する */
.lp-price__free td { background: rgba(200, 153, 63, 0.08); }
.lp-price__free td:first-child { font-weight: 600; }
.lp-price__badge {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--lens); color: #211a08; font-size: 0.7rem; font-weight: 700;
}
.lp-price__note { font-size: 0.85rem; color: var(--text-mute); margin: 0; }

/* ページ下部の行動喚起バンド */
.lp-cta { margin-top: 48px; background: radial-gradient(120% 120% at 50% 0%, var(--ink-2), var(--ink) 60%); color: var(--text-inv); }
.lp-cta__inner { max-width: 720px; margin: 0 auto; padding: 56px 20px; text-align: center; }
.lp-cta__title { font-size: clamp(1.5rem, 3.6vw, 2rem); margin: 0 0 12px; }
.lp-cta__lead { color: var(--text-inv-mute); line-height: 1.8; margin: 0 auto 24px; max-width: 34em; }
.lp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lp-cta .btn--line { color: var(--text-inv); border-color: var(--line-inv); }
.lp-cta .btn--line:hover { border-color: var(--lens); color: var(--lens-soft); }
.lp-cta__note { color: var(--text-inv-mute); font-size: 0.85rem; margin-top: 16px; }

/* 関連ページ */
.lp-related { max-width: 760px; margin: 0 auto; padding: 40px 20px 8px; }
.lp-related__title { font-size: 1.1rem; margin: 0 0 14px; }
.lp-related__title--sub { margin-top: 28px; }
.lp-related__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.lp-related__list a { color: var(--lens); text-decoration: none; }
.lp-related__list a:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 560px) {
  .lp-related__list { grid-template-columns: 1fr; }
}

/* ---- お知らせ（/news） ---- */
.lp-news__item { padding: 26px 0; border-bottom: 1px solid var(--line); }
.lp-news__item:first-of-type { padding-top: 8px; }
.lp-news__date {
  display: inline-block; font-family: var(--font-mono); font-size: 0.8rem;
  letter-spacing: 0.06em; color: var(--lens);
}
.lp-news__title { font-size: 1.3rem; line-height: 1.45; margin: 8px 0 12px; }
.lp-news__item p { line-height: 1.95; margin: 0 0 14px; color: var(--text); }
.lp-news__item ul { margin: 0 0 14px; padding-left: 1.25em; }
.lp-news__item li { line-height: 1.9; margin-bottom: 6px; }
.lp-news__item a { color: var(--lens); }
.lp-news__item a:hover { color: var(--text); }

/* ---- 場面別ガイド（学校・介護・防犯カメラ・屋外撮影・不動産）で使う部品 ---- */
.lp__h3 { font-size: 1.1rem; line-height: 1.5; margin: 26px 0 10px; }

/* 法的な記述の出典 */
.lp__src { font-size: 0.85rem; line-height: 1.8; color: var(--text-mute); }
.lp__src a { color: var(--lens); }

/* 「一般的な情報で、法的助言ではない」旨の注記 */
.lp__disclaimer {
  margin: 18px 0 0; padding: 12px 16px;
  border-left: 3px solid var(--line); background: rgba(0, 0, 0, 0.025);
  font-size: 0.85rem; line-height: 1.8; color: var(--text-mute);
}

/* 向いている場面／向いていない場面。できないことを先に書いておくと、
   合わない人が登録してから失望する事態を防げる（信頼の維持） */
.lp__fit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 16px; }
.lp__fit-col { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm, 12px); }
.lp__fit-col h3 { font-size: 1rem; margin: 0 0 10px; }
.lp__section .lp__fit-col ul { margin: 0; padding-left: 1.2em; }
.lp__fit-col li { font-size: 0.95rem; line-height: 1.8; margin-bottom: 6px; }
.lp__fit-col--ok h3::before { content: "○ "; color: var(--lens); }
.lp__fit-col--ng h3::before { content: "× "; color: var(--text-mute); }

/* 公開範囲ごとの考え方などの比較表 */
.lp-table__scroll { overflow-x: auto; margin: 8px 0 16px; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 480px; }
.lp-table th, .lp-table td { padding: 12px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.75; }
.lp-table th { font-size: 0.82rem; color: var(--text-mute); font-weight: 600; white-space: nowrap; }
.lp-table td:first-child { font-weight: 600; white-space: nowrap; }

@media (max-width: 560px) {
  .lp__fit { grid-template-columns: 1fr; }
}

/* 処理サンプル（fragments/landing :: demo）。.lp__section p の余白・行間が
   注記に効いてしまうので、ここで上書きする。 */
.lp-demo .demo { margin-top: 16px; }
.lp__section .demo__note { margin: 14px 0 0; line-height: 1.7; }