/* landing.css — 公開 LP 専用スタイル（theme.css のトークンに準拠） */

.lp {
  margin: 0;
  /* アプリ（theme.css body）と同一スタックに統一。英字/数字を Space Grotesk で揃える。 */
  font-family: 'Space Grotesk', 'Noto Sans JP', system-ui, sans-serif;
  color: var(--text, #1a1a2e);
  background: var(--bg, #fff);
  line-height: 1.7;
}
.lp * { box-sizing: border-box; }
.lp img { max-width: 100%; display: block; }

/* ---- 共通 ---- */
.lp-section { max-width: 1080px; margin: 0 auto; padding: 88px 24px; }
.lp-h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 20px; }
.lp-h1-accent { color: var(--accent, #115E59); }
.lp-h2 { font-size: clamp(24px, 3.5vw, 34px); font-weight: 700; text-align: center; margin: 0 0 12px; letter-spacing: -.01em; }
.lp-section-sub { text-align: center; color: var(--text-muted, #667); margin: 0 0 40px; }
.lp-sub { font-size: clamp(15px, 2vw, 18px); color: var(--text-muted, #475569); margin: 0 0 28px; }

.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; text-decoration: none; border-radius: 10px; padding: 10px 20px;
  border: 1px solid transparent; transition: background .15s, border-color .15s, transform .05s; cursor: pointer; }
.lp-btn:active { transform: translateY(1px); }
.lp-btn-primary { background: var(--accent, #115E59); color: #fff; }
.lp-btn-primary:hover { background: var(--accent-hover, #0F4F4A); }
.lp-btn-ghost { background: #fff; color: var(--accent, #115E59); border-color: var(--border, #cbd5e1); }
.lp-btn-ghost:hover { background: var(--bg-hover, #f5f5f5); }
.lp-btn-lg { padding: 14px 30px; font-size: var(--fs-lead); }

/* ---- Header ---- */
.lp-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 64px; padding: 0 24px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border, #cbd5e1); }
.lp-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; color: inherit; text-decoration: none; }
.lp-brand img { width: 28px; height: 28px; }
.lp-nav { display: flex; align-items: center; gap: 8px; }
.lp-nav-link { color: var(--text-muted, #475569); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: var(--fs-small); }
.lp-nav-link:hover { background: var(--bg-hover, #f5f5f5); }
.lp-nav-login { color: var(--accent, #115E59); text-decoration: none; padding: 8px 12px; font-weight: 600; font-size: var(--fs-small); }

/* ---- Hero ---- */
.lp-hero { background: url('brand/hero-bg.webp') center / cover no-repeat; }
.lp-hero-inner { max-width: 1200px; margin: 0 auto; padding: 64px 24px 72px;
  display: grid; grid-template-columns: 0.74fr 1fr; gap: 32px; align-items: center; }
.lp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-hero-note { font-size: var(--fs-caption); color: var(--text-muted, #64748b); margin: 0; }

/* ---- 画像プレースホルダ（実画像差し込み前） ---- */
.lp-shot { position: relative; width: 100%; border: 1.5px dashed var(--border, #cbd5e1);
  border-radius: 14px; background: var(--accent-soft, #f0fdfa);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lp-shot::before { content: ""; display: block; padding-top: 62%; } /* 16:10 既定 */
.lp-shot-label { position: absolute; color: var(--accent, #115E59); font-size: var(--fs-caption); font-weight: 600; opacity: .65; text-align: center; padding: 0 12px; }
.lp-shot-hero::before { padding-top: 66%; }
.lp-shot-spot { background: #fff; }
.lp-shot-spot::before { padding-top: 100%; }
/* 画像が入ったら <img> を中に置けば placeholder 装飾は隠れる */
.lp-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-shot:has(img) { border: 1px solid var(--border-soft, #f1f5f9); background: none; }
/* 機能スクショは上部（判定・1枚目の指摘）が主役 → cover クロップで上を残す */
.lp-bento [data-slot^="feat-"] img { object-position: top center; }
/* ヒーローのイラストは白背景の独立画像。枠/固定アスペクト/cover を外し、
   実比率で全体（両端の ⚠️/✓ カードまで）を見せる。 */
.lp-shot-hero:has(img) { border: none; background: none; overflow: visible; }
.lp-shot-hero:has(img)::before { content: none; }
.lp-shot-hero:has(img) img { position: static; width: 100%; height: auto; }

/* ---- Problem ---- */
.lp-problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lp-problem-visual img { width: 100%; height: auto; border-radius: 14px; }
.lp-problem-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.lp-problem-item { display: flex; gap: 16px; align-items: flex-start; }
.lp-problem-item .lp-card-icon { flex: 0 0 auto; margin-top: 2px; }
.lp-problem-item h3 { font-size: 17px; margin: 0 0 6px; }
.lp-problem-item p { color: var(--text-muted, #475569); font-size: var(--fs-small); margin: 0; }

/* ---- Cards ---- */
.lp-cards { display: grid; gap: 20px; }
.lp-cards-3 { grid-template-columns: repeat(3, 1fr); }
.lp-cards-4 { grid-template-columns: repeat(4, 1fr); }
.lp-card { background: #fff; border: 1px solid var(--border-soft, #f1f5f9); border-radius: 14px; padding: 24px; }
.lp-card h3 { font-size: 17px; margin: 12px 0 8px; }
.lp-card p { color: var(--text-muted, #475569); font-size: var(--fs-small); margin: 0; }
.lp-card-icon { color: var(--accent, #115E59); width: 26px; height: 26px; }
/* 用途カード: イラストを主役にする全幅サムネイル（横長クロップ）。 */
.lp-usecase { padding: 0; overflow: hidden; }
.lp-usecase .lp-shot-spot { width: 100%; background: var(--bg-subtle, #fafafa); border-radius: 0; border: none; margin: 0; }
.lp-usecase .lp-shot-spot::before { padding-top: 66%; }
.lp-usecase:has(img) .lp-shot-spot { border: none; border-bottom: 1px solid var(--border-soft, #f1f5f9); }
.lp-usecase h3 { padding: 0 24px; margin-top: 20px; }
.lp-usecase p { padding: 0 24px 24px; }

/* ---- Features（1カラム積み上げ・スクショ全幅で大きく見せる）---- */
.lp-bento { display: grid; grid-template-columns: 1fr; gap: 28px; }
.lp-bento-item { background: var(--bg-subtle, #fafafa); border: 1px solid var(--border-soft, #f1f5f9); border-radius: 16px; padding: 24px; }
/* デスクトップは2カラムの masonry（ピンタレスト風）。高さの違う4枚を各列で上下に
   詰め、行ごとの余白を無くして列の下端が揃いやすいようにする。
   grid → multicol（display:block + column-count）に切替。縦間隔は margin で確保。
   下限は 1 カラム化(<900)と重ならない 900px。狭い画面で窮屈な2カラムにしない。 */
@media (min-width: 900px) {
  .lp-bento { display: block; column-count: 2; column-gap: 28px; }
  .lp-bento-item { break-inside: avoid; margin-bottom: 28px; }
}
.lp-bento-text h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 8px; }
.lp-bento-text h3 i { color: var(--accent, #115E59); }
.lp-bento-text p { color: var(--text-muted, #475569); font-size: var(--fs-small); margin: 0; }
.lp-bento-item > .lp-shot { margin-top: 16px; }
/* プレースホルダ（img 無し）は横長の枠で高さを確保 */
.lp-bento .lp-shot:not(:has(img))::before { padding-top: 52%; }

/* 実スクショ（img あり）= ブラウザ風ウィンドウ枠で見せる（画像は無加工・CSSのみ） */
.lp-bento .lp-shot:has(img) {
  position: relative;
  padding-top: 38px;                 /* ウィンドウバーの高さ分 */
  background: #fff;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .13);
}
.lp-bento .lp-shot:has(img)::before {            /* ウィンドウバー */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 38px; padding: 0;
  background: linear-gradient(#fbfcfd, #f1f3f5);
  border-bottom: 1px solid var(--border-soft, #f1f5f9);
}
.lp-bento .lp-shot:has(img)::after {             /* 信号機ドット（3つ） */
  content: "";
  position: absolute; top: 14px; left: 16px; z-index: 1;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff5f57;
  box-shadow: 17px 0 #febc2e, 34px 0 #28c840;
}
.lp-bento .lp-shot:has(img) img { position: static; width: 100%; height: auto; display: block; }

/* ---- Steps ---- */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-step { text-align: center; padding: 8px; }
.lp-step-num { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--accent, #115E59); color: #fff; font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center; }
.lp-step h3 { font-size: 17px; margin: 0 0 6px; }
.lp-step p { color: var(--text-muted, #475569); font-size: var(--fs-small); margin: 0; }

/* ---- Who (chips) ---- */
.lp-who { text-align: center; }
.lp-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lp-chips li { display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-soft, #f0fdfa); color: var(--accent, #115E59);
  border: 1px solid var(--accent-border, #99f6e4); border-radius: 999px; padding: 8px 16px; font-size: var(--fs-small); font-weight: 500; }
.lp-chips li i, .lp-chips li svg { width: 1em; height: 1em; flex: 0 0 auto; }
/* 4+4 の2行に揃える強制改行（装飾なし） */
.lp-chips li.lp-chip-break { flex-basis: 100%; height: 0; padding: 0; margin: 0; border: 0; background: none; }
@media (max-width: 560px) { .lp-chips li.lp-chip-break { display: none; } }

/* ---- Pricing ---- */
.lp-plan { background: #fff; border: 1px solid var(--border-soft, #f1f5f9); border-radius: 14px; padding: 24px; text-align: center; }
.lp-plan-feat { border: 2px solid var(--accent, #115E59); }
.lp-plan h3 { font-size: var(--fs-lead); margin: 0 0 8px; color: var(--text-muted, #475569); }
.lp-plan-price { font-size: 26px; font-weight: 700; margin: 0; }
.lp-plan-q { color: var(--text-muted, #667); font-size: var(--fs-small); margin: 4px 0 0; }
.lp-pricing-note { text-align: center; color: var(--text-muted, #64748b); font-size: var(--fs-caption); margin: 24px 0 0; }

/* ---- Closing CTA ---- */
.lp-cta { text-align: center; padding: 80px 24px; background: var(--accent-soft, #f0fdfa); border-top: 1px solid var(--border-soft, #f1f5f9); }
.lp-cta .lp-h2 { margin-bottom: 24px; }
.lp-cta .lp-hero-note { margin-top: 14px; }

/* ---- Footer ---- */
.lp-footer { max-width: 1080px; margin: 0 auto; padding: 32px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-brand-sm { font-size: var(--fs-body); }
.lp-brand-sm img { width: 22px; height: 22px; }
.lp-footer-copy { color: var(--text-muted, #64748b); font-size: var(--fs-caption); margin: 0; }
.lp-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.lp-footer-links a { color: var(--text-muted, #64748b); font-size: var(--fs-caption); text-decoration: none; }
.lp-footer-links a:hover { color: var(--accent, #115E59); }

/* ---- 法務ページ（特商法 / プライバシー / 規約） ---- */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.legal h1 { font-size: 28px; margin: 0 0 6px; }
.legal-updated { color: var(--text-muted, #64748b); font-size: var(--fs-caption); margin: 0 0 28px; }
.legal h2 { font-size: 17px; margin: 30px 0 8px; }
.legal p, .legal li { color: var(--text, #1f2937); font-size: var(--fs-small); line-height: 1.9; }
.legal ul, .legal ol { padding-left: 1.4em; margin: 6px 0; }
.legal a { color: var(--accent, #115E59); }
.legal-back { display: inline-block; margin-top: 36px; color: var(--accent, #115E59); font-size: var(--fs-caption); text-decoration: none; }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--border-soft, #f1f5f9); line-height: 1.8; }
.legal-table th { width: 32%; white-space: nowrap; color: var(--text-muted, #475569); font-weight: 600; background: var(--bg-subtle, #fafafa); }
.legal-header { max-width: 760px; margin: 0 auto; padding: 20px 24px 0; }
.legal-header a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink, #1f2937); font-weight: 600; text-decoration: none; }
.legal-header img { width: 24px; height: 24px; }

/* ---- レスポンシブ ---- */
/* ヒーローは横長イラストを大きく見せるため枠を広げている(1200)。コピー(H1 52px)が
   折れない幅を確保できない狭い画面では早めに1カラムへ落とす。 */
@media (max-width: 1199px) {
  .lp-hero-inner { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; }
  .lp-hero-visual { max-width: 620px; margin-inline: auto; }
}
@media (max-width: 860px) {
  .lp-hero-inner { grid-template-columns: 1fr; padding-top: 40px; gap: 32px; }
  .lp-problem-grid { grid-template-columns: 1fr; gap: 32px; }
  .lp-cards-3, .lp-cards-4 { grid-template-columns: 1fr 1fr; }
  .lp-bento { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-nav-link { display: none; }
}
@media (max-width: 520px) {
  .lp-cards-3, .lp-cards-4 { grid-template-columns: 1fr; }
  .lp-section { padding: 56px 20px; }
}