/* =============================================================
   lp.css — Kashinoya-biz LP サンプル集（10 案）
   名前空間：k8-lp-（v48.css とは独立。テーマは body .k8-lp--<theme> で切替）
   フォント：Noto Sans JP / Inter / Shippori Mincho（v48.css と共通・shell が読込）
   中華フォント不使用・フォールバック先頭は日本語フォント（CLAUDE.md §10 準拠）
   ============================================================= */

/* ---- テーマ既定（blue を基準値に） ---- */
.k8-lp-body {
  --lp-bg: #ffffff;
  --lp-bg2: #f3f7fb;
  --lp-ink: #0a2540;
  --lp-soft: #46586b;
  --lp-accent: #0f4c81;
  --lp-accent-d: #0a3a66;
  --lp-accent2: #e8a838;
  --lp-card: #ffffff;
  --lp-line: #e3eaf1;
  --lp-hero-bg: linear-gradient(160deg, #0f4c81 0%, #2d7ab3 60%, #4a9ed6 100%);
  --lp-hero-ink: #ffffff;
  --lp-band-bg: linear-gradient(160deg, #0a3a66 0%, #0f4c81 100%);
  --lp-band-ink: #ffffff;
  --lp-head: var(--sans, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif);
  --lp-radius: 16px;

  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--sans, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* ===== レイアウト基本 ===== */
.k8-lp-wrap { width: min(1120px, 92vw); margin-inline: auto; }
.k8-lp-wrap--narrow { width: min(840px, 92vw); }
.k8-lp-sec { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.k8-lp-sec--alt { background: var(--lp-bg2); }
.k8-lp-h2 {
  font-family: var(--lp-head);
  font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem);
  text-align: center; margin-bottom: 2.2rem; color: var(--lp-ink);
}
.k8-lp-fine { display: block; font-size: .8rem; color: var(--lp-soft); line-height: 1.7; }
.k8-lp-fine--light { color: rgba(255,255,255,.85); }
.k8-lp-center-note { text-align: center; color: var(--lp-soft); margin-top: 1.6rem; font-size: .95rem; }

/* ===== レビュー用バー ===== */
.k8-lp-revbar {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .5rem 5vw; background: #0b1220; color: #cdd6e2; font-size: .8rem;
}
.k8-lp-revbar a { color: #cdd6e2; text-decoration: underline; text-underline-offset: 2px; }
.k8-lp-revbar a:hover { color: #fff; }
.k8-lp-revbar-tag { background: var(--lp-accent2); color: #0b1220; font-weight: 800; padding: .1rem .5rem; border-radius: 5px; letter-spacing: .04em; }
.k8-lp-revbar-dir { color: #8d9bad; margin-right: auto; }

/* ===== ヒーロー共通 ===== */
.k8-lp-hero { position: relative; overflow: hidden; }
.k8-lp-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .85rem; letter-spacing: .04em;
  color: var(--lp-accent); margin-bottom: 1rem;
}
.k8-lp-eyebrow svg { width: 17px; height: 17px; }
.k8-lp-eyebrow--light { color: rgba(255,255,255,.92); }
.k8-lp-eyebrow--center { justify-content: center; width: 100%; }
.k8-lp-eyebrow--serif { font-family: var(--en, "Inter", sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--lp-soft); }
.k8-lp-h1 {
  font-family: var(--lp-head);
  font-weight: 900; font-size: clamp(1.9rem, 5.2vw, 3.2rem);
  line-height: 1.28; letter-spacing: .01em; color: var(--lp-ink); margin-bottom: 1.1rem;
}
.k8-lp-h1--light { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.16); }
.k8-lp-h1--center { text-align: center; }
.k8-lp-mark { color: var(--lp-accent); }
.k8-lp-mark-gold { color: var(--lp-accent2); }
.k8-lp-mark-warm { color: var(--lp-accent); }
.k8-lp-lead { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--lp-soft); margin-bottom: 1.8rem; max-width: 40em; }
.k8-lp-lead--light { color: rgba(255,255,255,.94); }
.k8-lp-lead--center { margin-inline: auto; text-align: center; }

/* split ヒーロー */
.k8-lp-hero--split { background: var(--lp-bg); padding: clamp(2.5rem, 5vw, 4.5rem) 0 0; }
.k8-lp-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.k8-lp-hero-panel {
  background: var(--lp-bg2); border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius); padding: 1.6rem; box-shadow: 0 18px 50px rgba(11,18,32,.08);
}
.k8-lp-pills { list-style: none; display: grid; gap: .9rem; }
.k8-lp-pills li { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: .8rem; align-items: center; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 12px; padding: .8rem 1rem; }
.k8-lp-pills svg { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--lp-accent); }
.k8-lp-pills b { font-size: .98rem; }
.k8-lp-pills span { font-size: .82rem; color: var(--lp-soft); }

/* center ヒーロー */
.k8-lp-hero--center { background: var(--lp-hero-bg); color: #fff; padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem); text-align: center; }
.k8-lp-hero--center .k8-lp-h1 { color: #fff; }
.k8-lp-hero--center .k8-lp-eyebrow { color: rgba(255,255,255,.92); }

/* banner ヒーロー（重厚） */
.k8-lp-hero--banner { background: var(--lp-hero-bg); color: #fff; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.k8-lp-hero-banner-inner { max-width: 56em; }
.k8-lp-stat-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1.8rem; }
.k8-lp-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: .7rem 1.1rem; }
.k8-lp-stat b { display: block; font-size: .82rem; color: var(--lp-accent2); font-weight: 800; }
.k8-lp-stat span { font-size: 1.02rem; font-weight: 700; }

/* tech ヒーロー（ダーク・グリッド） */
.k8-lp-hero--tech { background: radial-gradient(120% 120% at 80% -10%, #0e3a52 0%, #0a1622 55%, #070d16 100%); color: #fff; padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 8vw, 6.5rem); }
.k8-lp-tech-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(6,182,212,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(6,182,212,.08) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(80% 70% at 50% 0%, #000 30%, transparent 80%); }
.k8-lp-tech-inner { position: relative; text-align: center; }
.k8-lp-grad-text { background: linear-gradient(90deg, #22d3ee, #818cf8); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* warm ヒーロー（暖色・親しみ） */
.k8-lp-hero--warm { background: linear-gradient(165deg, #fff6e9 0%, #fdeedd 55%, #f7f3 ); background: linear-gradient(165deg, #fff7ec 0%, #fceede 60%, #f4f7f0 100%); padding: clamp(2.5rem, 5vw, 4.5rem) 0 0; }
.k8-lp-hero-panel--warm { background: #fff; }
.k8-lp-panel-h { font-size: 1rem; font-weight: 800; margin-bottom: .9rem; color: var(--lp-accent); }
.k8-lp-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.k8-lp-tags li { background: var(--lp-bg2); border: 1px solid var(--lp-line); border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; font-weight: 600; color: var(--lp-accent-d); }

/* editorial ヒーロー（明朝・余白） */
.k8-lp-hero--editorial { background: var(--lp-bg); padding: clamp(4rem, 9vw, 7rem) 0 clamp(2rem, 4vw, 3.5rem); }
.k8-lp-h1--serif, .k8-lp-hero--editorial .k8-lp-h1 { font-family: var(--serif, "Shippori Mincho", "Yu Mincho", serif); font-weight: 700; letter-spacing: .03em; line-height: 1.5; }
.k8-lp-lead--serif { font-size: 1.12rem; line-height: 2; }
.k8-lp-editorial-lead { font-size: 1.1rem; line-height: 2.1; color: var(--lp-ink); border-left: 3px solid var(--lp-accent); padding-left: 1.4rem; margin-bottom: 2.6rem; }
.k8-lp-edlist { display: grid; gap: 1.4rem; }
.k8-lp-edlist > div { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.3rem; align-items: baseline; padding-bottom: 1.4rem; border-bottom: 1px solid var(--lp-line); }
.k8-lp-edno { font-family: var(--en, "Inter", sans-serif); font-size: 1.4rem; font-weight: 800; color: var(--lp-accent); }
.k8-lp-edlist h3 { font-family: var(--serif, "Shippori Mincho", serif); font-size: 1.2rem; }
.k8-lp-edlist p { grid-column: 2; color: var(--lp-soft); }

/* gradient ヒーロー（SaaS） */
.k8-lp-hero--gradient { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 40%, #db2777 100%); color: #fff; padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 8vw, 6.5rem); }
.k8-lp-grad-inner { text-align: center; }
.k8-lp-hero--gradient .k8-lp-grad-text { background: linear-gradient(90deg, #fde047, #fb923c); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* urgent ヒーロー */
.k8-lp-alert { display: flex; align-items: center; justify-content: center; gap: .5rem; background: #b91c1c; color: #fff; font-size: .88rem; font-weight: 600; padding: .55rem 1rem; text-align: center; }
.k8-lp-alert svg { width: 18px; height: 18px; }
.k8-lp-hero--urgent { background: linear-gradient(165deg, #fff 0%, #fff1f1 100%); color: var(--lp-ink); padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 6vw, 5.5rem); }
/* urgent は center ヒーローだが背景が明色のため、文字色を反転（白→濃色）に戻す */
.k8-lp-hero--urgent .k8-lp-h1 { color: var(--lp-ink); }
.k8-lp-hero--urgent .k8-lp-eyebrow { color: #b91c1c; }
.k8-lp-hero--urgent .k8-lp-lead { color: var(--lp-soft); }
.k8-lp-hero--urgent .k8-lp-btn--ghost { color: var(--lp-accent); }
.k8-lp-hero--urgent .k8-lp-cta-note { color: var(--lp-soft); }
.k8-lp-eyebrow--urgent { color: #b91c1c; }
.k8-lp-hero--urgent .k8-lp-mark { color: #dc2626; }

/* ===== CTA ===== */
.k8-lp-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.k8-lp-hero--center .k8-lp-cta, .k8-lp-tech-inner .k8-lp-cta, .k8-lp-grad-inner .k8-lp-cta, .k8-lp-hero--urgent .k8-lp-wrap--narrow .k8-lp-cta, .k8-lp-band-inner .k8-lp-cta { justify-content: center; }
.k8-lp-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1rem; padding: .95rem 1.7rem; border-radius: 999px;
  border: 2px solid transparent; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.k8-lp-btn svg { width: 18px; height: 18px; }
.k8-lp-btn--primary { background: var(--lp-accent2); color: #1a1305; box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.k8-lp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.22); }
.k8-lp-btn--ghost { background: transparent; border-color: currentColor; color: var(--lp-accent); }
.k8-lp-btn--ghost:hover { background: rgba(15,76,129,.08); }
.k8-lp-cta-note { font-size: .82rem; color: var(--lp-soft); margin-top: .8rem; }
/* 反転背景上の ghost ボタン文字を白に */
.k8-lp-hero--center .k8-lp-btn--ghost, .k8-lp-hero--banner .k8-lp-btn--ghost,
.k8-lp-hero--tech .k8-lp-btn--ghost, .k8-lp-hero--gradient .k8-lp-btn--ghost,
.k8-lp-band .k8-lp-btn--ghost { color: #fff; }
.k8-lp-hero--center .k8-lp-btn--ghost:hover, .k8-lp-hero--banner .k8-lp-btn--ghost:hover,
.k8-lp-hero--tech .k8-lp-btn--ghost:hover, .k8-lp-hero--gradient .k8-lp-btn--ghost:hover,
.k8-lp-band .k8-lp-btn--ghost:hover { background: rgba(255,255,255,.14); }
.k8-lp-hero--center .k8-lp-cta-note, .k8-lp-hero--banner .k8-lp-cta-note,
.k8-lp-hero--tech .k8-lp-cta-note, .k8-lp-hero--gradient .k8-lp-cta-note,
.k8-lp-band .k8-lp-cta-note { color: rgba(255,255,255,.85); }

/* ===== カード/グリッド ===== */
.k8-lp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.k8-lp-card { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 1.6rem 1.5rem; box-shadow: 0 6px 24px rgba(11,18,32,.06); }
.k8-lp-card h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.k8-lp-card p { color: var(--lp-soft); font-size: .95rem; }
.k8-lp-card--warn { border-color: #f3c9c9; background: #fff8f8; }
.k8-lp-card--warn .k8-lp-ico { background: #fbe3e3; color: #b91c1c; }
.k8-lp-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--lp-bg2); color: var(--lp-accent); margin-bottom: .9rem; }
.k8-lp-ico svg { width: 24px; height: 24px; }
.k8-lp-ico--grad { background: linear-gradient(135deg, #6366f1, #db2777); color: #fff; }

/* feature grid (2x2) */
.k8-lp-feature { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.k8-lp-feature-card { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 1.6rem; }
.k8-lp-feature-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.k8-lp-feature-card p { color: var(--lp-soft); font-size: .95rem; }

/* qcards (診断) */
.k8-lp-qcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.k8-lp-qcard { position: relative; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: 1.8rem 1.5rem 1.5rem; box-shadow: 0 6px 24px rgba(11,18,32,.06); }
.k8-lp-qno { position: absolute; top: -14px; left: 1.3rem; background: var(--lp-accent); color: #fff; font-family: var(--en, "Inter", sans-serif); font-weight: 800; font-size: .9rem; padding: .25rem .7rem; border-radius: 8px; }
.k8-lp-qcard h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.k8-lp-qcard p { color: var(--lp-soft); font-size: .9rem; }

/* numlist (実績) */
.k8-lp-numlist { list-style: none; display: grid; gap: .8rem; }
.k8-lp-numlist li { display: flex; align-items: baseline; gap: .9rem; border-bottom: 1px dashed var(--lp-line); padding-bottom: .7rem; }
.k8-lp-numlist b { font-family: var(--en, "Inter", sans-serif); font-size: 1.8rem; font-weight: 800; color: var(--lp-accent); min-width: 2.6em; }
.k8-lp-numlist span { color: var(--lp-soft); font-size: .92rem; }

/* ===== フロー ===== */
.k8-lp-flow { list-style: none; display: grid; gap: 1rem; max-width: 760px; margin-inline: auto; }
.k8-lp-flow li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 14px; padding: 1.2rem 1.4rem; }
.k8-lp-step { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lp-accent); color: #fff; font-family: var(--en, "Inter", sans-serif); font-weight: 800; }
.k8-lp-flow h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.k8-lp-flow p { color: var(--lp-soft); font-size: .93rem; }

/* ===== FAQ ===== */
.k8-lp-faq { display: grid; gap: .7rem; }
.k8-lp-faq details { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 12px; padding: .2rem 1.2rem; }
.k8-lp-faq summary { cursor: pointer; font-weight: 700; padding: .95rem 0; list-style: none; position: relative; padding-right: 1.6rem; }
.k8-lp-faq summary::-webkit-details-marker { display: none; }
.k8-lp-faq summary::after { content: "+"; position: absolute; right: .2rem; top: .8rem; font-size: 1.3rem; color: var(--lp-accent); }
.k8-lp-faq details[open] summary::after { content: "−"; }
.k8-lp-faq p { color: var(--lp-soft); font-size: .94rem; padding: 0 0 1rem; }

/* ===== 比較表 ===== */
.k8-lp-table-wrap { overflow-x: auto; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); }
.k8-lp-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--lp-card); }
.k8-lp-table th, .k8-lp-table td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--lp-line); font-size: .92rem; }
.k8-lp-table thead th { background: var(--lp-accent); color: #fff; font-weight: 700; }
.k8-lp-table tbody th { font-weight: 800; color: var(--lp-accent-d); white-space: nowrap; }
.k8-lp-table tbody tr:last-child td, .k8-lp-table tbody tr:last-child th { border-bottom: 0; }
.k8-lp-table tbody tr:nth-child(even) { background: var(--lp-bg2); }

/* ===== CTA 帯 ===== */
.k8-lp-band { position: relative; background: var(--lp-band-bg); color: var(--lp-band-ink); text-align: center; }
.k8-lp-band-inner { position: relative; z-index: 1; }
.k8-lp-band-h { font-family: var(--lp-head); font-weight: 800; font-size: clamp(1.3rem, 3vw, 1.9rem); margin-bottom: .7rem; }
.k8-lp-band-sub { color: rgba(255,255,255,.9); margin-bottom: 1.6rem; }
.k8-lp-band .k8-lp-btn--ghost { color: #fff; }

/* ===== ウェーブ ===== */
.k8-lp-wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; pointer-events: none; }
.k8-lp-wave svg { width: 100%; height: clamp(40px, 6vw, 80px); display: block; }
.k8-lp-wave path { fill: var(--lp-bg); }
.k8-lp-wave--top { top: -1px; bottom: auto; transform: scaleY(-1); }
.k8-lp-wave--top path { fill: var(--lp-bg2); }
.k8-lp-hero--center .k8-lp-wave path, .k8-lp-wave--tech path { fill: var(--lp-bg); }
.k8-lp-wave--grad path { fill: var(--lp-bg); }
.k8-lp-wave--urgent path { fill: var(--lp-bg); }

/* ===== フッタ ===== */
.k8-lp-foot { background: #0b1220; color: #aab6c4; padding: 2.6rem 0; text-align: center; }
.k8-lp-foot-brand { font-weight: 800; color: #fff; font-size: 1.05rem; margin-bottom: .3rem; }
.k8-lp-foot-sm { font-size: .85rem; margin-bottom: .4rem; }
.k8-lp-foot small { display: block; margin-top: 1rem; font-size: .78rem; color: #6b7888; }
.k8-lp-foot .k8-lp-fine { color: #8d9bad; }

/* =============================================================
   テーマ別オーバーライド
   ============================================================= */

/* 02 teal（診断） */
.k8-lp--teal { --lp-accent: #0f8a6e; --lp-accent-d: #0b6e58; --lp-accent2: #f4b740; --lp-bg2: #eef8f4; --lp-line: #d6ece4; --lp-hero-bg: linear-gradient(160deg, #0f8a6e 0%, #15b08a 60%, #4fd1b0 100%); --lp-band-bg: linear-gradient(160deg, #0b6e58 0%, #0f8a6e 100%); }

/* 03 navy（ものづくり・重厚） */
.k8-lp--navy { --lp-accent: #1d3557; --lp-accent-d: #14263f; --lp-accent2: #d4a548; --lp-bg2: #f1f3f7; --lp-line: #dde2eb; --lp-hero-bg: linear-gradient(155deg, #14263f 0%, #1d3557 55%, #2a4a73 100%); --lp-band-bg: linear-gradient(155deg, #14263f 0%, #1d3557 100%); --lp-ink: #14263f; }

/* 04 tech（ダーク） */
.k8-lp--tech { --lp-accent: #0e7490; --lp-accent-d: #0a5066; --lp-accent2: #22d3ee; --lp-bg2: #eef6f9; --lp-line: #d4e7ee; --lp-band-bg: linear-gradient(155deg, #0a1622 0%, #0e3a52 100%); --lp-band-ink: #fff; }
.k8-lp--tech .k8-lp-band-h { color: #fff; }

/* 05 warm（持続化・暖色） */
.k8-lp--warm { --lp-accent: #b9612a; --lp-accent-d: #8f4a1f; --lp-accent2: #e08a2e; --lp-bg: #fffdf9; --lp-bg2: #fdf3e6; --lp-line: #efe1cf; --lp-ink: #4a3520; --lp-soft: #7a6450; --lp-band-bg: linear-gradient(160deg, #b9612a 0%, #e08a2e 100%); }

/* 06 editorial（明朝・モノトーン） */
.k8-lp--editorial { --lp-accent: #1f3a5f; --lp-accent-d: #142944; --lp-accent2: #c8a04e; --lp-bg: #fbfaf7; --lp-bg2: #f3f1ea; --lp-line: #e6e1d6; --lp-ink: #1c2733; --lp-soft: #51606f; --lp-head: var(--serif, "Shippori Mincho", serif); --lp-band-bg: linear-gradient(160deg, #1c2733 0%, #2b3a4a 100%); }

/* 07 slate（実績） */
.k8-lp--slate { --lp-accent: #334155; --lp-accent-d: #1e293b; --lp-accent2: #f0a500; --lp-bg2: #f1f4f8; --lp-line: #dde3ec; --lp-hero-bg: linear-gradient(160deg, #1e293b 0%, #334155 60%, #475569 100%); --lp-band-bg: linear-gradient(160deg, #1e293b 0%, #334155 100%); }
.k8-lp--slate .k8-lp-hero--proof { background: var(--lp-bg); }

/* 08 urgent（赤） */
.k8-lp--urgent { --lp-accent: #dc2626; --lp-accent-d: #b91c1c; --lp-accent2: #f59e0b; --lp-bg2: #fff4f4; --lp-line: #f3d9d9; --lp-band-bg: linear-gradient(160deg, #b91c1c 0%, #dc2626 100%); }

/* 09 gradient（SaaS） */
.k8-lp--gradient { --lp-accent: #6d28d9; --lp-accent-d: #5b21b6; --lp-accent2: #fbbf24; --lp-bg2: #f5f1fe; --lp-line: #e6dcfb; --lp-band-bg: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%); }

/* 10 compare（情報型・青緑） */
.k8-lp--compare { --lp-accent: #0d6e8c; --lp-accent-d: #0a566e; --lp-accent2: #e8a838; --lp-bg2: #eef6f9; --lp-line: #d6e8ee; --lp-hero-bg: linear-gradient(160deg, #0d6e8c 0%, #1592b3 60%, #4ab8d6 100%); --lp-band-bg: linear-gradient(160deg, #0a566e 0%, #0d6e8c 100%); }

/* =============================================================
   LP 一覧ギャラリー
   ============================================================= */
.k8-lp-gallery-body { background: #0b1220; color: #e7edf4; }
.k8-lp-gallery { width: min(1180px, 92vw); margin-inline: auto; padding: clamp(2.5rem, 5vw, 4rem) 0 4rem; }
.k8-lp-ghead { text-align: center; max-width: 60em; margin-inline: auto 2.5rem; margin-bottom: 2.6rem; }
.k8-lp-ghead .k8-lp-eyebrow { color: #6ee7d6; justify-content: center; font-family: var(--en, "Inter", sans-serif); letter-spacing: .12em; }
.k8-lp-ghead h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 1rem; }
.k8-lp-glead { color: #aab6c4; line-height: 1.9; }
.k8-lp-gmeta { margin-top: 1rem; }
.k8-lp-gmeta a { color: #6ee7d6; text-decoration: underline; text-underline-offset: 3px; }
.k8-lp-ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.k8-lp-gcard { border-radius: 16px; overflow: hidden; }
.k8-lp-gcard a { display: block; background: #131c2b; border: 1px solid #243043; border-radius: 16px; padding: 0 1.4rem 1.4rem; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; height: 100%; }
.k8-lp-gcard a:hover { transform: translateY(-4px); border-color: var(--lp-accent2); box-shadow: 0 20px 44px rgba(0,0,0,.4); }
.k8-lp-gswatch { display: block; height: 96px; margin: 0 -1.4rem 1.1rem; background: var(--lp-hero-bg); }
.k8-lp--gradient .k8-lp-gswatch { background: linear-gradient(135deg, #4f46e5, #7c3aed 50%, #db2777); }
.k8-lp--tech .k8-lp-gswatch { background: radial-gradient(120% 120% at 80% -10%, #0e3a52, #0a1622 70%); }
.k8-lp--warm .k8-lp-gswatch { background: linear-gradient(135deg, #fff7ec, #e08a2e); }
.k8-lp--editorial .k8-lp-gswatch { background: linear-gradient(135deg, #fbfaf7, #c8a04e); }
.k8-lp--urgent .k8-lp-gswatch { background: linear-gradient(135deg, #fff1f1, #dc2626); }
.k8-lp-gno { display: inline-block; font-family: var(--en, "Inter", sans-serif); font-weight: 800; font-size: .82rem; color: #0b1220; background: var(--lp-accent2); padding: .15rem .55rem; border-radius: 6px; margin-bottom: .7rem; }
.k8-lp-gcard h2 { font-size: 1.16rem; font-weight: 800; margin-bottom: .35rem; color: #fff; }
.k8-lp-gdir { color: #95a3b4; font-size: .88rem; margin-bottom: 1rem; }
.k8-lp-glink { display: inline-flex; align-items: center; gap: .4rem; color: #6ee7d6; font-weight: 700; font-size: .9rem; }
.k8-lp-glink svg { width: 16px; height: 16px; }
.k8-lp-gfoot { text-align: center; margin-top: 2.5rem; color: #6b7888; }

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 860px) {
  .k8-lp-hero-grid { grid-template-columns: 1fr; }
  .k8-lp-grid3, .k8-lp-qcards, .k8-lp-feature { grid-template-columns: 1fr; }
  .k8-lp-revbar-dir { display: none; }
}
@media (max-width: 560px) {
  .k8-lp-btn { width: 100%; justify-content: center; }
  .k8-lp-cta { flex-direction: column; }
}

/* =============================================================
   写真コンポーネント（v2：画像でリッチ化）
   ============================================================= */

/* 写真背景ヒーロー（暗背景＋オーバーレイで可読性確保） */
.k8-lp-hero--photo { position: relative; isolation: isolate; }
.k8-lp-hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.k8-lp-hero-ov { position: absolute; inset: 0; z-index: -1; }
/* テーマ別オーバーレイ（左から効かせて文字を読みやすく） */
.k8-lp--blue .k8-lp-hero-ov,
.k8-lp--slate .k8-lp-hero-ov,
.k8-lp--compare .k8-lp-hero-ov { background: linear-gradient(100deg, rgba(8,28,52,.92) 0%, rgba(10,37,64,.78) 45%, rgba(10,37,64,.45) 100%); }
.k8-lp--navy .k8-lp-hero-ov { background: linear-gradient(100deg, rgba(12,24,40,.94) 0%, rgba(20,38,63,.8) 50%, rgba(29,53,87,.5) 100%); }
.k8-lp--teal .k8-lp-hero-ov { background: linear-gradient(100deg, rgba(8,55,45,.92) 0%, rgba(15,138,110,.72) 55%, rgba(15,138,110,.4) 100%); }
.k8-lp--tech .k8-lp-hero-ov { background: linear-gradient(120deg, rgba(7,13,22,.95) 0%, rgba(10,40,56,.8) 55%, rgba(6,30,42,.55) 100%); }
.k8-lp--gradient .k8-lp-hero-ov { background: linear-gradient(125deg, rgba(49,46,129,.9) 0%, rgba(124,58,173,.78) 50%, rgba(190,24,93,.62) 100%); }
.k8-lp-hero--photo.k8-lp-hero--center,
.k8-lp-hero--photo.k8-lp-hero--banner,
.k8-lp-hero--photo.k8-lp-hero--gradient { background: transparent; }

/* split ヒーローの写真パネル（明背景ヒーロー用） */
.k8-lp-hero-photo-card { border-radius: var(--lp-radius); overflow: hidden; box-shadow: 0 24px 60px rgba(11,18,32,.22); aspect-ratio: 4 / 3.2; }
.k8-lp-hero-photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k8-lp-hero-photo-wrap { position: relative; }
.k8-lp-hero-badge { position: absolute; left: -14px; bottom: 18px; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 14px; padding: .8rem 1.1rem; box-shadow: 0 14px 34px rgba(11,18,32,.16); display: flex; align-items: center; gap: .6rem; max-width: 78%; }
.k8-lp-hero-badge svg { width: 30px; height: 30px; color: var(--lp-accent); flex-shrink: 0; }
.k8-lp-hero-badge b { display: block; font-size: .95rem; }
.k8-lp-hero-badge span { font-size: .78rem; color: var(--lp-soft); }

/* お悩みセクション */
.k8-lp-pains { background: var(--lp-bg2); }
.k8-lp-pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 880px; margin: 0 auto 1.6rem; }
.k8-lp-pain { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; background: var(--lp-card); border: 1px solid var(--lp-line); border-left: 4px solid var(--lp-accent); border-radius: 12px; padding: 1.1rem 1.3rem; }
.k8-lp-pain svg { width: 22px; height: 22px; color: var(--lp-accent); margin-top: .2rem; }
.k8-lp-pain p { font-weight: 600; font-size: .98rem; }
.k8-lp-pain-arrow { text-align: center; color: var(--lp-accent); font-weight: 800; margin-bottom: 1rem; font-size: 1rem; }

/* 画像＋コピー（交互） */
.k8-lp-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.4rem); align-items: center; }
.k8-lp-split2--rev .k8-lp-split2-media { order: 2; }
.k8-lp-split2-media { border-radius: var(--lp-radius); overflow: hidden; box-shadow: 0 18px 46px rgba(11,18,32,.16); aspect-ratio: 5 / 4; }
.k8-lp-split2-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k8-lp-split2-body h2 { font-family: var(--lp-head); font-weight: 800; font-size: clamp(1.3rem, 2.8vw, 1.8rem); margin-bottom: .9rem; }
.k8-lp-split2-body > p { color: var(--lp-soft); margin-bottom: 1.1rem; }
.k8-lp-ticks { list-style: none; display: grid; gap: .6rem; }
.k8-lp-ticks li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.k8-lp-ticks svg { width: 20px; height: 20px; color: var(--lp-accent); margin-top: .25rem; }
.k8-lp-ticks b { font-weight: 700; }

/* 写真バンド（フルブリード・パララックス風） */
.k8-lp-photoband { position: relative; isolation: isolate; padding: clamp(3.5rem, 7vw, 6rem) 0; color: #fff; text-align: center; }
.k8-lp-photoband-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.k8-lp-photoband-ov { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,15,28,.78), rgba(8,15,28,.84)); }
.k8-lp-photoband h2 { font-family: var(--lp-head); font-weight: 800; font-size: clamp(1.4rem, 3.4vw, 2.1rem); margin-bottom: .8rem; color: #fff; }
.k8-lp-photoband p { color: rgba(255,255,255,.9); max-width: 40em; margin: 0 auto 1.6rem; }

/* ギャラリーカードのサムネ写真 */
.k8-lp-gswatch--photo { background-size: cover !important; background-position: center; position: relative; }
.k8-lp-gswatch--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(19,28,43,.55)); }

@media (max-width: 860px) {
  .k8-lp-pain-grid { grid-template-columns: 1fr; }
  .k8-lp-split2 { grid-template-columns: 1fr; }
  .k8-lp-split2--rev .k8-lp-split2-media { order: 0; }
  .k8-lp-hero-badge { position: static; max-width: none; margin-top: 1rem; }
}