/* =====================================================
   SedoNote — lp.css（B-87: 非ログイン向けLP・文書ページ方式）
   v2（2026-08-16）: Claude Design受領デザインを正典フラット様式へ落とし込み。
   旧ヒーロー3案（lp-hero-v1/v2/v3）は退役＝git v0.314 参照。
   正典: sn.cssトークンへ全面マッピング（ダーク/ライトはbody.lightで自動追従）。
   影・グラデ・ぼかし・Webフォント不使用。角R: カード7px / 小型バッジ4px。
   実データ帯（lp-search/lp-widgets/lp-row系）はv1から不変（サジェストはv0.318でsn.css .gb-suggestへ移設）。
   ===================================================== */

.lp-content{max-width:1280px;margin:0 auto;padding:0 32px 150px;}  /* 下部余白=常時表示の検索バー+ドックの逃げ */

/* ── セクション共通 ─────────────────────────────── */
.lp-sec-head{margin:0 0 18px;}
.lp-sec-head h2{font-size:20px;font-weight:700;color:var(--text);margin:0 0 6px;letter-spacing:.01em;}
.lp-sec-sub{font-size:12px;color:var(--text3);}

/* ── CTA部品（共通） ────────────────────────────── */
.lp-cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:36px;}
.lp-cta-row.lp-center{justify-content:center;margin-top:0;}
.lp-btn-primary{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12px 28px;background:var(--action);color:#fff;border-radius:7px;text-decoration:none;
  font-size:15px;font-weight:700;line-height:1.3;transition:background .15s;}
.lp-btn-primary:hover{background:var(--action-h);}
.lp-btn-note{font-size:10px;font-weight:400;opacity:.85;}
.lp-btn-ghost{font-size:13px;color:var(--action);text-decoration:none;}
.lp-btn-ghost:hover{text-decoration:underline;}

/* ── 1. ヒーロー（左コピー＋右比較カード） ─────────── */
.lp-hero{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:88px 0;}
  /* ↑左右幅=全体の半分ずつ（IZUNA指定 2026-08-16最終）。
     経緯: 1.1fr 1fr（原案）→ auto 1fr（左=内容幅）→ 1fr 1fr（等分・確定） */
.lp-hero h1{margin:0;font-size:clamp(30px,3.1vw,39px);line-height:1.4;font-weight:700;color:var(--text);}  /* 42→39: 2行目15字（字下げ4+本文11）が半分幅594pxに収まる上限（IZUNA文言変更 2026-08-16） */
.lp-h1-line2{white-space:nowrap;}
.lp-h1-indent{visibility:hidden;}
.lp-lede{margin:22px 0 0;color:var(--text2);font-size:16px;line-height:1.9;}
/* 統計行: 左カラム横いっぱいの3分割タイル・数字を大きく上段に（IZUNA指定 2026-08-16） */
.lp-hero .lp-cta-row{justify-content:center;}   /* CTA2つを左カラム内でセンタリング（IZUNA指定 2026-08-16） */
.lp-hero-stats{display:flex;width:100%;gap:20px;margin-top:32px;color:var(--text2);font-size:12px;font-variant-numeric:tabular-nums;}
.lp-hero-stats span{flex:1;white-space:nowrap;min-width:0;}
.lp-hero-stats b{display:block;color:var(--text);font-size:20px;font-weight:700;line-height:1.2;margin-bottom:3px;}
.lp-hero-stats span + span{border-left:1px solid var(--border2);padding-left:20px;}

/* ヒーロー比較カード（実データ・カード全体が商品ページへのリンク） */
.lp-cmp-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:7px;
  overflow:hidden;text-decoration:none;transition:border-color .15s;font-variant-numeric:tabular-nums;}
a.lp-cmp-card:hover{border-color:var(--border2);text-decoration:none;}
.lp-cmp-head{padding:14px 18px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;gap:12px;}
.lp-cmp-title{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-cmp-meta{font-size:11px;color:var(--text3);flex-shrink:0;}
.lp-cmp-row{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-top:1px solid var(--line-soft);}
.lp-cmp-row:first-of-type{border-top:none;}
.lp-cmp-row.top{background:var(--surface2);}
.lp-cmp-shop{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-cmp-row.top .lp-cmp-shop{color:var(--text);}
.lp-cmp-price{font-size:14px;color:var(--text2);flex-shrink:0;}
.lp-cmp-row.top .lp-cmp-price{font-size:15px;font-weight:700;color:var(--text);}
.lp-cmp-badge{background:var(--sn-badge-gold-bg);color:var(--sn-badge-gold-tx);font-size:10px;padding:2px 6px;border-radius:4px;flex-shrink:0;}
.lp-cmp-foot{padding:11px 18px;border-top:1px solid var(--line-soft);color:var(--text3);font-size:11px;}

/* ── 1.5 アプリ画面ショーケース（Safari風フレーム・実物ホームの等縮尺iframe） ── */
.lp-appshot{padding:0 0 72px;}
.lp-safari{background:var(--surface);border:1px solid var(--border2);border-radius:7px;overflow:hidden;}
.lp-safari-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface2);
  border-bottom:1px solid var(--border);position:relative;}
.lp-tl{width:12px;height:12px;border-radius:50%;}
.lp-tl.red{background:#ff5f57;}
.lp-tl.yellow{background:#febc2e;}
.lp-tl.green{background:#28c840;}   /* macOS信号色＝ブラウザ枠の描写であり自パレット外で可 */
.lp-safari-url{position:absolute;left:50%;transform:translateX(-50%);font-size:12px;color:var(--text3);
  background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 42px;white-space:nowrap;}
#lp-app-frame{display:block;width:100%;aspect-ratio:16/10;border:0;background:var(--bg);}
  /* ウィジェット実動作化のためクリック遮断は解除（IZUNA指示 2026-08-16）。
     フレーム内で無効化する部品は home_doc.css の body.home-embed 節が管理（ドック/検索） */

/* ── 2. 実データ帯（ウィジェットはv1から不変＝js/lp.jsの契約） ───── */
.lp-data{padding:28px 0 8px;border-top:1px solid var(--border);}
/* 検索サジェスト: v0.318 で js/gbar_search.js＋sn.css .gb-suggest へchrome部品化（移設・改名） */

.lp-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.lp-widget{background:var(--surface);border:1px solid var(--border);border-radius:7px;overflow:hidden;}
.lp-w-head{display:flex;align-items:center;gap:7px;padding:11px 14px;font-size:12px;font-weight:600;
  color:var(--text);border-bottom:1px solid var(--border);}
.lp-dot{width:7px;height:7px;border-radius:50%;background:var(--action);flex-shrink:0;}
.lp-dot.gold{background:var(--accent);}
.lp-dot.green{background:var(--success);}
.lp-w-list{padding:4px 0;}
.lp-w-empty{padding:14px;font-size:11px;color:var(--text3);}
.lp-row{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:12px;color:var(--text);text-decoration:none;}
a.lp-row{cursor:pointer;}
a.lp-row:hover{background:var(--surface2);}
.lp-row-rank{width:16px;flex-shrink:0;text-align:right;color:var(--text3);font-size:11px;font-weight:600;}
.lp-row-rank.top{color:var(--accent);}
.lp-row-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-row-val{flex-shrink:0;font-weight:600;white-space:nowrap;font-size:11px;color:var(--text2);}
.lp-row-val.gold{color:var(--accent);}
.lp-row-val.up{color:var(--success);}
.lp-row-val.down{color:var(--danger);}
.lp-gray{display:inline-block;margin-left:4px;padding:0 4px;border:1px solid rgba(217,119,87,.5);
  border-radius:4px;color:var(--sn-claude,#d97757);font-size:9px;line-height:1.6;vertical-align:middle;}

/* ── 3. 機能紹介（交互2カラム） ───────────────────── */
.lp-features{border-top:1px solid var(--border);padding:72px 0;margin-top:28px;
  display:flex;flex-direction:column;gap:72px;}
.lp-feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.lp-kicker{color:var(--accent);font-size:13px;margin-bottom:12px;font-variant-numeric:tabular-nums;}
.lp-feature h3{margin:0 0 12px;font-size:22px;font-weight:700;color:var(--text);}
.lp-feature p{margin:0;color:var(--text2);font-size:15px;line-height:1.9;}
.lp-mini-card{background:var(--surface);border:1px solid var(--border);border-radius:7px;overflow:hidden;
  font-variant-numeric:tabular-nums;}
.lp-ledger-head{display:grid;grid-template-columns:2fr 1fr 1fr;padding:10px 16px;border-bottom:1px solid var(--line-soft);color:var(--text3);font-size:11px;}
.lp-ledger-row{display:grid;grid-template-columns:2fr 1fr 1fr;padding:12px 16px;font-size:13px;color:var(--text);border-bottom:1px solid var(--line-soft);}
.lp-ledger-row:last-child{border-bottom:none;}
.lp-ledger-head .r,.lp-ledger-row .r{text-align:right;color:var(--text2);}
.lp-ledger-head .r{color:var(--text3);}
.lp-ledger-row .profit{text-align:right;color:var(--success);font-weight:700;}
.lp-chart-card{padding:20px;}
.lp-chart-head{display:flex;justify-content:space-between;margin-bottom:14px;}
.lp-chart-head .t{font-size:13px;font-weight:700;color:var(--text);}
.lp-chart-head .up{font-size:12px;color:var(--success);}
.lp-grid-line{stroke:var(--line-soft);}
.lp-chart-line{stroke:var(--action);}
.lp-chart-axis{display:flex;justify-content:space-between;color:var(--text3);font-size:11px;margin-top:8px;}
.lp-insight-card{padding:20px;display:flex;flex-direction:column;gap:14px;}
.lp-insight-card .t{font-size:13px;font-weight:700;color:var(--text);}
.lp-insight-card .t small{color:var(--text3);font-weight:400;font-size:11px;margin-left:6px;}
.lp-insight{display:flex;gap:10px;font-size:13px;color:var(--text2);line-height:1.7;}
.lp-insight .up-mark{color:var(--success);}
.lp-insight .down-mark{color:var(--danger);}
.lp-insight .flat-mark{color:var(--action);}

/* ── 4. 信頼帯 ───────────────────────────────── */
.lp-trust{border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr 1fr;}
.lp-trust > div{padding:44px 24px;text-align:center;}
.lp-trust > div + div{border-left:1px solid var(--border);}
.lp-trust .big{font-size:34px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;}
.lp-trust .big small{font-size:16px;color:var(--text2);margin-left:4px;font-weight:700;}
.lp-trust .sub{color:var(--text2);font-size:13px;margin-top:8px;}

/* ── 5. 最終CTA ─────────────────────────────── */
/* ── FAQ（v0.320・フラット様式・details開閉） ── */
.lp-faq{border-top:1px solid var(--border);padding:64px 24px;max-width:760px;margin:0 auto;}
.lp-faq h2{margin:0 0 28px;font-size:24px;font-weight:700;color:var(--text);text-align:center;}
.lp-faq-item{border:1px solid var(--border);border-radius:7px;background:var(--surface);}
.lp-faq-item + .lp-faq-item{margin-top:10px;}
.lp-faq-item summary{padding:14px 18px;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer;list-style-position:inside;}
.lp-faq-item summary:hover{color:var(--text);background:var(--surface2,rgba(255,255,255,.03));border-radius:7px;}
.lp-faq-item p{margin:0;padding:0 18px 16px 18px;font-size:13.5px;line-height:1.9;color:var(--text2);}
.lp-final{text-align:center;padding:72px 24px;border-top:1px solid var(--border);background:var(--surface);
  border-radius:7px;margin-top:0;border:1px solid var(--border);}
.lp-final h2{margin:0;font-size:28px;font-weight:700;color:var(--text);}
.lp-final-sub{margin:14px 0 32px;color:var(--text2);font-size:15px;}

/* ── レスポンシブ ─────────────────────────────── */
@media (max-width:860px){
  .lp-content{padding:0 20px 150px;}  /* [B-143] 40px では拡大後の#gbar（上端約137px）にLP末尾が隠れる＝拡大前から不足していた分もあわせて是正 */
  .lp-hero{grid-template-columns:1fr;gap:36px;padding:48px 0 40px;}
  .lp-hero h1{font-size:28px;line-height:1.45;}
  .lp-h1-indent{display:none;}
  .lp-hero h1 br{display:none;}
  .lp-h1-line2{white-space:normal;}
  .lp-lede{font-size:14px;}
  .lp-lede br{display:none;}
  .lp-cta-row{flex-direction:column;gap:16px;align-items:stretch;text-align:center;margin-top:28px;}
  .lp-btn-primary{width:100%;}
  .lp-hero-stats{justify-content:center;gap:16px;}
  .lp-hero-stats span + span{padding-left:16px;}
  .lp-widgets{grid-template-columns:1fr;}
  .lp-features{padding:48px 0;gap:40px;}
  .lp-feature{grid-template-columns:1fr;gap:16px;}
  .lp-feature.lp-media-first .lp-mini-card{order:2;}
  .lp-feature h3{font-size:18px;}
  .lp-feature p{font-size:13px;line-height:1.8;}
  .lp-appshot{padding-bottom:40px;}
  #lp-app-frame{aspect-ratio:4/3;}
  .lp-trust > div{padding:32px 12px;}
  .lp-trust .big{font-size:22px;}
  .lp-trust .big small{font-size:12px;}
  .lp-trust .sub{font-size:11px;}
  .lp-final{padding:48px 20px;}
  .lp-final h2{font-size:20px;}
  .lp-final-sub{font-size:13px;}
}