/* 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; }
/* 見出しを SP で2行に割る補助：句読点は PC のみ表示、改行は SP のみ有効。 */
.lp-sp-br { display: none; }
.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; white-space: nowrap;
  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 ---- */
/* 寸法は app の .app-topnav と完全一致（theme.css の --topnav-* / --brand-logo を共有）。
   見た目の差（sticky / すりガラス背景）は LP 固有として残し、サイズだけ揃える。 */
.lp-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: var(--topnav-h); padding: 0 var(--topnav-pad-x); 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: var(--fs-lead); color: inherit; text-decoration: none; }
.lp-brand img { width: var(--brand-logo); height: var(--brand-logo); }
.lp-nav { display: flex; align-items: center; gap: 8px; }
.lp-nav-login { color: var(--accent, #115E59); text-decoration: none; padding: 8px 12px; font-weight: 600; font-size: var(--fs-small); white-space: nowrap; }

/* ---- 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-tax { font-size: var(--fs-caption); font-weight: 500; color: var(--text-muted, #64748b); margin-left: 5px; }
.lp-plan-ex { color: var(--text-muted, #475569); font-size: var(--fs-small); font-weight: 500; margin: 3px 0 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); }
/* 個人名はスクレイピング避けでアウトライン化SVGとして表示（DOMに文字列を残さない）。
   currentColor で本文色に追従、高さは本文サイズに合わせる。 */
.pii-name { height: 1.05em; width: auto; vertical-align: -0.12em; display: inline-block; }
/* .legal-header は廃止（法務ページは LP の .lp-header に統一）。 */

/* ---- レスポンシブ ---- */
/* ヒーローは横長イラストを大きく見せるため枠を広げている(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-steps { grid-template-columns: 1fr; }
  /* 機能スクショは縦長で全部積むとページが長すぎる → 横スワイプのカルーセルに。
     1枚ずつ snap し、次カードの端をチラ見せして「スワイプできる」と示す。CSS のみ。 */
  .lp-bento {
    display: flex;
    align-items: flex-start;              /* 各カードを内容なりの高さに（最長カードへ伸ばさずスカスカ防止）*/
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 10px;                 /* スクロールバー/余白 */
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
  }
  .lp-bento-item {
    flex: 0 0 86%;                         /* 1枚＋次をチラ見せ */
    scroll-snap-align: center;
  }
  /* タイトル＋アイコン: 折返してもアイコンを行頭(上)に固定し、潰れさせない。 */
  .lp-bento-text h3 { align-items: flex-start; }
  .lp-bento-text h3 i { flex-shrink: 0; margin-top: 3px; }
  /* 縦長スクショはカード内で上端基準に高さを抑える（カルーセルが極端に高くならないよう）。 */
  .lp-bento .lp-shot:has(img) img { max-height: 48vh; object-fit: cover; object-position: top center; }
}
@media (max-width: 520px) {
  .lp-cards-3 { grid-template-columns: 1fr; }
  /* 料金カードは1列全幅だと縦に長く情報密度が低い → 2×2 のコンパクトなグリッドに。
     余白・価格サイズを詰めて 4 プランを一望できるようにする。 */
  .lp-cards-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lp-cards-4 .lp-plan { padding: 16px 12px; border-radius: 12px; }
  .lp-cards-4 .lp-plan h3 { margin-bottom: 4px; }
  .lp-cards-4 .lp-plan-price { font-size: 22px; }
  /* セクションの縦余白を圧縮（88→48px）＋左右も詰めて横幅を稼ぐ（ヘッダーと同じ 16px）。 */
  .lp-section { padding: 48px 16px; }
  .lp-cta { padding: 48px 16px; }
  .lp-hero-inner { padding: 28px 16px 40px; }
  /* 長いタイトル（ガイドライン取込＋法令プリセット）が汚く折れないよう一段小さく。 */
  .lp-bento-text h3 { font-size: 16px; }
}

/* スマホ: ヘッダー（ブランド + ログイン + CTA を 1 行に収める）とフッターの最適化。
   nowrap は基底で付与済み。ここでは収まるよう余白・サイズだけ圧縮する。 */
@media (max-width: 600px) {
  /* 見出しの読点を消し、その位置で改行（公開前のチェック→2行 等）。 */
  .lp-pc-only { display: none; }
  .lp-sp-br   { display: inline; }
  .lp-header { padding: 0 16px; gap: 10px; }
  .lp-brand { font-size: 15px; gap: 6px; }
  .lp-brand img { width: 24px; height: 24px; }
  .lp-nav { gap: 6px; }
  .lp-nav-login { padding: 8px 6px; }
  .lp-nav .lp-btn { padding: 9px 14px; font-size: var(--fs-small); }
  /* フッター: 横並び(space-between)だとブランドとリンクが重なる → 縦積みに。 */
  .lp-footer { flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 20px; }
  .lp-footer-links { gap: 8px 18px; }

  /* 用途カード（3つ）: 画像主役の全幅は過剰 → サムネ小＋テキスト横並びのリスト型に。
     1列に積み、各カードは「小さい正方形サムネ｜タイトル＋説明」のコンパクト構成。 */
  .lp-cards-3 { grid-template-columns: 1fr; gap: 10px; }
  .lp-usecase { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
  .lp-usecase .lp-shot-spot { width: 60px; flex: 0 0 60px; border-radius: 9px; border-bottom: none; }
  .lp-usecase:has(img) .lp-shot-spot { border-bottom: none; }
  .lp-usecase .lp-shot-spot::before { padding-top: 100%; }   /* 60px 正方形（小さめ） */
  .lp-usecase h3 { padding: 0; margin: 0 0 3px; font-size: 14px; line-height: 1.35; }
  .lp-usecase p { padding: 0; font-size: var(--fs-caption); line-height: 1.55; }
}
/* 極小幅: ブランド語尾を 1 段縮めて確実に 1 行を維持。 */
@media (max-width: 360px) {
  .lp-brand { font-size: 14px; }
}

/* ---- お問い合わせフォーム（contact.html） ---- */
.contact-form { max-width: 560px; margin: 8px 0 0; display: grid; gap: 16px; }
.contact-form .field { display: grid; gap: 6px; }
.contact-form label { font-size: var(--fs-small); font-weight: 600; color: var(--text, #1f2937); }
.contact-form .req { color: var(--accent, #115E59); }
.contact-form input, .contact-form select, .contact-form textarea {
  font-family: inherit; font-size: var(--fs-body); color: var(--text, #1f2937);
  padding: 10px 12px; border: 1px solid var(--border, #cbd5e1); border-radius: 10px;
  background: #fff; width: 100%; box-sizing: border-box;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--accent, #115E59); box-shadow: 0 0 0 3px var(--accent-soft, #f0fdfa);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .lp-btn-lg { justify-self: start; }
.contact-status { margin: 0; font-size: var(--fs-small); }
.contact-status.ok { color: var(--accent, #115E59); }
.contact-status.err { color: #b91c1c; }
.contact-note { color: var(--text-muted, #64748b); font-size: var(--fs-caption); margin: 16px 0 0; }

/* ---- セキュリティ/信頼セクション（LP） ---- */
.lp-trust { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.lp-trust li { display: flex; gap: 14px; align-items: flex-start; }
.lp-trust i, .lp-trust svg { color: var(--accent, #115E59); width: 24px; height: 24px; flex: 0 0 auto; margin-top: 2px; }
.lp-trust h3 { font-size: 16px; margin: 0 0 4px; }
.lp-trust p { color: var(--text-muted, #475569); font-size: var(--fs-small); margin: 0; }

/* ---- FAQ（LP・アコーディオン） ---- */
.lp-faq-list { max-width: 760px; margin: 0 auto; }
.lp-faq-item { border-bottom: 1px solid var(--border-soft, #f1f5f9); }
.lp-faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 28px 18px 0; position: relative;
  font-weight: 600; font-size: var(--fs-lead); color: var(--text, #1f2937);
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after { content: "＋"; position: absolute; right: 4px; top: 16px; color: var(--accent, #115E59); }
.lp-faq-item[open] summary::after { content: "−"; }
.lp-faq-a { padding: 0 28px 18px 0; color: var(--text-muted, #475569); font-size: var(--fs-small); line-height: 1.85; }
.lp-faq-a a { color: var(--accent, #115E59); }

@media (max-width: 600px) {
  .lp-trust { grid-template-columns: 1fr; gap: 16px; }
}