/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 14 2026 | 18:38:05 */
/* =========================
   Z2K LP (scoped)
   Only affects elements under .lp-z2k
========================= */
.lp-z2k{
  --z2k-max:1180px;
  --z2k-pad:20px;
  --z2k-text:#0b1220;
  --z2k-muted:rgba(11,18,32,.72);
  --z2k-card:#ffffff;
  --z2k-border:rgba(15,23,42,.10);
  --z2k-shadow:0 14px 40px rgba(15,23,42,.08);
}

/* Base */
.lp-z2k{ color:var(--z2k-text); }
.lp-z2k .z2k-section{
  max-width:var(--z2k-max);
  margin:0 auto;
  padding:80px var(--z2k-pad);
}
.lp-z2k h2{
  margin:0 0 14px;
  letter-spacing:-.02em;
  line-height:1.15;
}
.lp-z2k p{ line-height:1.75; }
.lp-z2k ul{ padding-left:18px; line-height:1.8; }
.lp-z2k .z2k-cols{ gap:42px; }
.lp-z2k .z2k-eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(11,18,32,.60);
  margin:0 0 10px;
}
.lp-z2k .z2k-lead{ color:rgba(11,18,32,.78); max-width:72ch; margin:0 0 20px; }
.lp-z2k .z2k-muted{ color:var(--z2k-muted); }
.lp-z2k .z2k-hr{ border:0; height:1px; background:rgba(15,23,42,.12); margin:16px 0; }

/* Card */
.lp-z2k .z2k-card{
  background:var(--z2k-card);
  border:1px solid var(--z2k-border);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--z2k-shadow);
}
.lp-z2k .z2k-card--light{ background:rgba(255,255,255,.92); }
.lp-z2k .z2k-card--cta{
  border-radius:18px;
  padding:44px;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(43,124,255,.10), transparent 55%),
    radial-gradient(900px 500px at 85% 30%, rgba(32,199,255,.10), transparent 60%),
    rgba(255,255,255,.94);
}

/* Buttons */
.lp-z2k .z2k-btn-primary,
.lp-z2k .z2k-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
}
.lp-z2k .z2k-btn-primary{
  color:#0b1220;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.18) inset;
}
.lp-z2k .z2k-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 18px 40px rgba(0,0,0,.24); }
.lp-z2k .z2k-btn-secondary{
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
}
.lp-z2k .z2k-btn-secondary:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);
}

/* =========================
   HERO
========================= */

/* =================================================
   HERO FIX (for your exact HTML)
   Paste this at the VERY END of your CSS
================================================= */

/* 1) Hero全体を full-bleed（外枠の余白/角丸を潰す） */
.lp-z2k-hero,
.lp-z2k-hero > .wp-block-cover.z2k-hero{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 2) “くすみ”原因になりやすい filter / opacity をカット（親側） */
.lp-z2k-hero > .wp-block-cover.z2k-hero,
.lp-z2k-hero > .wp-block-cover.z2k-hero .wp-block-cover__inner-container,
.lp-z2k-hero > .wp-block-cover.z2k-hero .wp-block-group,
.lp-z2k-hero .z2k-hero-single{
  filter: none !important;
  opacity: 1 !important;
}

/* 3) Coverの暗幕は「背景だけ」に効かせる（文字には効かせない） */
.lp-z2k-hero > .wp-block-cover.z2k-hero > .wp-block-cover__background.has-background-dim{
  opacity: .22 !important;              /* 暗ければ .18 / 濃くなら .30 */
  background-color: #0b1220 !important;
}

/* 4) Stripe風の背景レイヤー（濃すぎない） */
.lp-z2k-hero > .wp-block-cover.z2k-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 620px at 15% 20%, rgba(56,189,248,.16), transparent 62%),
    radial-gradient(1000px 620px at 85% 30%, rgba(99,102,241,.14), transparent 62%),
    radial-gradient(900px 520px at 55% 90%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #070b14 100%);
  z-index: 0;
}

/* 5) 中身は必ず前面へ */
.lp-z2k-hero > .wp-block-cover.z2k-hero .wp-block-cover__inner-container{
  position: relative !important;
  z-index: 2 !important;
}

/* 6) ここが本命：文字色を“強制的に白”にする（灰色化の最終手段込み） */
.lp-z2k-hero .z2k-hero-badge,
.lp-z2k-hero .z2k-hero-title,
.lp-z2k-hero .z2k-hero-sub{
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-text-fill-color: #ffffff !important; /* Safari対策 */
}

.lp-z2k-hero .z2k-hero-sub{
  color: rgba(255,255,255,.88) !important; /* サブは少し柔らかく */
}

/* 7) CTAは視認性アップ */
.lp-z2k-hero .z2k-btn-primary{
  background: #ffffff !important;
  color: #0b1220 !important;
}
.lp-z2k-hero .z2k-btn-secondary{
  color: #ffffff !important;
  border-color: rgba(255,255,255,.25) !important;
}

/* 8) 3ピル：CTAと見分ける（情報バッジっぽく） */
.lp-z2k-hero .z2k-hero-mini--pillars .z2k-mini-pill{
  color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: none !important;
}
.lp-z2k-hero .z2k-mini-pill strong{ color:#ffffff !important; }
.lp-z2k-hero .z2k-mini-pill--a strong{ color:#38bdf8 !important; }
.lp-z2k-hero .z2k-mini-pill--b strong{ color:#818cf8 !important; }
.lp-z2k-hero .z2k-mini-pill--c strong{ color:#34d399 !important; }

/* =========================
   HERO FIX: header overlap + pills spacing
   Paste at VERY END
========================= */

/* 1) ヘッダーに埋もれないように上側の余白を確保 */
.lp-z2k-hero{
  padding-top: clamp(22px, 3vw, 56px) !important; /* まずはこれで沈み込み解消 */
}

/* もしヘッダーが position:fixed の場合の保険（より確実） */
.lp-z2k-hero > .wp-block-cover.z2k-hero{
  padding-top: clamp(18px, 2.6vw, 48px) !important;
}

/* 2) 3つの特徴(ピル)を“ちゃんと間隔を空けて”並べる */
.lp-z2k-hero .z2k-hero-mini--pillars{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 14px !important;          /* 横/縦の間隔 */
  margin-top: 18px !important;
  align-items: center;
}

/* ピル自体が詰まる・くっつくのを防ぐ */
.lp-z2k-hero .z2k-hero-mini--pillars .z2k-mini-pill{
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap;                 /* ZTA/ZKP/PKIが変に改行しない */
  padding: 10px 14px !important;
  border-radius: 999px !important;

  /* 3) “枠”や“変な線”を完全に消す（テーマ由来の outline/shadow を殺す） */
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  /* バッジらしい見え方（薄い面だけ） */
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.90) !important;
}

/* 強調文字 */
.lp-z2k-hero .z2k-mini-pill strong{
  margin-right: 6px !important;
  font-weight: 800 !important;
}

/* モバイルは1列で読みやすく */
@media (max-width: 640px){
  .lp-z2k-hero{
    padding-top: 18px !important;
  }
  .lp-z2k-hero .z2k-hero-mini--pillars{
    gap: 10px !important;
  }
  .lp-z2k-hero .z2k-hero-mini--pillars .z2k-mini-pill{
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ピル（3つの特徴）の下に余白を追加 */
.lp-z2k-hero .z2k-hero-mini--pillars{
  margin-bottom: 32px !important;  /* 24〜48pxの間で好みに調整 */
}

/* HERO と次セクションの間の隙間を消す */
.lp-z2k-hero{
  margin-bottom: 0 !important;
}

.lp-z2k-hero + section,
.lp-z2k-hero + .wp-block-group,
.lp-z2k-hero + .wp-block-cover{
  margin-top: 0 !important;
}

/* ======================================================
   HERO: 背景だけをヘッダー直下の空白まで埋める（コンテンツは動かさない）
   Paste at the VERY END
====================================================== */

/* ① ヘッダー下の空白ぶんだけ背景を上へ伸ばす量（必要なら調整） */
:root{
  --z2k-header-gap: 84px; /* ← ここだけ調整（72/80/96 など） */
}

/* ② Heroセクションに「上へ伸びる背景」を追加（100vwでフルブリード） */
.lp-z2k-hero{
  position: relative;
  overflow: visible;
}

.lp-z2k-hero::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  /* Heroの外側（上）に伸ばして“空白”を背景で埋める */
  top: calc(var(--z2k-header-gap) * -1);
  height: calc(100% + var(--z2k-header-gap));

  background: #050B18; /* cover背景と同じ */
  z-index: 0;
}

/* ③ Hero内部は背景より前に */
.lp-z2k-hero > .z2k-hero,
.lp-z2k-hero .wp-block-cover__inner-container{
  position: relative;
  z-index: 1;
}

/* ④ coverが持つ背景レイヤーは「二重」になるので消す（任意だが推奨） */
.lp-z2k-hero .wp-block-cover__background{
  opacity: 0 !important;
}
.lp-z2k-hero .wp-block-cover{
  background: transparent !important;
}

/* ⑤ ついでに “Hero自身の上マージン” があれば潰す（背景のスキマ原因になりがち） */
.lp-z2k-hero,
.lp-z2k-hero .z2k-hero.wp-block-cover{
  margin-top: 0 !important;
}

/* ======================================================
   HERO TOP GAP FIX (single-source background)
   Paste at the VERY END
====================================================== */

:root{
  --z2k-header-gap: 84px; /* ← 72/80/96 で微調整 */
}

/* ① まず「帯」の原因：heroセクション側の余白を消す */
.lp-z2k-hero{
  padding-top: 0 !important;
  margin-top: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

/* ② 背景だけを上へ伸ばしてヘッダー直下まで埋める（フル幅） */
.lp-z2k-hero::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  top: calc(var(--z2k-header-gap) * -1);
  height: calc(100% + var(--z2k-header-gap));
  background: #050B18; /* ヘッダー直下の“帯”を確実に同色で埋める */
  z-index: 0;
}

/* ③ Hero本体は背景より前へ */
.lp-z2k-hero > .wp-block-cover.z2k-hero{
  position: relative !important;
  z-index: 1 !important;
  padding-top: 0 !important; /* ← ここも消す（帯の原因になり得る） */
}

/* ④ “コンテンツの位置”は inner-container 側で確保（見た目は変えない） */
.lp-z2k-hero .wp-block-cover__inner-container{
  padding-top: var(--z2k-header-gap) !important;
}

/* ⑤ Cover由来の背景は二重になるので完全に無効化（境界の線を消す） */
.lp-z2k-hero .wp-block-cover__background{
  opacity: 0 !important;
}
.lp-z2k-hero > .wp-block-cover.z2k-hero::before{
  /* あなたのStripe風グラデは残したいなら消さない。
     もし境界が出るなら、これを有効化して “片方だけ” にする。 */
}

/* ⑥ 念のため：直前要素の margin-bottom が残ってるケースを潰す */
#z2k-faq{ margin-bottom: 0 !important; }
#z2k-faq + *{ margin-top: 0 !important; }



/* =========================
   PROOF VERIFICATION (Z2K)
   Scope: #z2k-proof only
========================= */

#z2k-proof{
  position: relative;
  padding: 64px 20px;
  background: radial-gradient(900px 500px at 18% 10%, rgba(56,189,248,.10), transparent 60%),
              radial-gradient(900px 500px at 82% 20%, rgba(99,102,241,.08), transparent 60%),
              linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

#z2k-proof .z2k-proof-inner{
  max-width: 1180px;
  margin: 0 auto;
}

#z2k-proof .z2k-eyebrow{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
  margin: 0 0 10px;
}

#z2k-proof .z2k-proof-title{
  margin: 0 0 10px;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(28px, 3.2vw, 44px);
}

#z2k-proof .z2k-proof-lead{
  margin: 0 0 22px;
  max-width: 72ch;
  line-height: 1.65;
  color: rgba(15,23,42,.72);
  font-size: 16px;
}

#z2k-proof .z2k-proof-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 980px){
  #z2k-proof .z2k-proof-grid{
    grid-template-columns: 1fr;
  }
}

/* Cards */
#z2k-proof .z2k-proof-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  padding: 18px;
  overflow: hidden;
}

#z2k-proof .z2k-proof-card-h{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

#z2k-proof .z2k-proof-chip{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.9);
  color: rgba(15,23,42,.78);
}

#z2k-proof .z2k-proof-chip--muted{
  color: rgba(15,23,42,.55);
  background: rgba(248,250,252,.65);
}

/* Code block */
#z2k-proof .z2k-code{
  margin: 0;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.86));
  color: rgba(255,255,255,.90);
  overflow: auto;
  font-size: 13px;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Minimal syntax tint */
#z2k-proof .z2k-code .k{ color: rgba(56,189,248,.95); }
#z2k-proof .z2k-code .p{ color: rgba(255,255,255,.92); font-weight: 700; }
#z2k-proof .z2k-code .m{ color: rgba(167,139,250,.95); }
#z2k-proof .z2k-code .c{ color: rgba(148,163,184,.85); }

/* Note */
#z2k-proof .z2k-proof-note{
  margin: 12px 0 0;
  color: rgba(15,23,42,.68);
  line-height: 1.55;
  font-size: 13.5px;
}

/* Outcomes */
#z2k-proof .z2k-proof-kpis{
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

#z2k-proof .z2k-kpi{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.85);
}

#z2k-proof .z2k-kpi-ico{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  color: rgba(15,23,42,.82);
}

#z2k-proof .z2k-kpi-ico.ok{
  border-color: rgba(16,185,129,.25);
  background: rgba(16,185,129,.10);
  color: rgba(6,95,70,.95);
}

#z2k-proof .z2k-kpi-ico.warn{
  border-color: rgba(99,102,241,.25);
  background: rgba(99,102,241,.10);
  color: rgba(67,56,202,.95);
}

#z2k-proof .z2k-kpi .t{
  font-weight: 900;
  margin: 0 0 2px;
  line-height: 1.25;
}

#z2k-proof .z2k-kpi .d{
  color: rgba(15,23,42,.68);
  line-height: 1.45;
  font-size: 13.5px;
}

/* Callout */
#z2k-proof .z2k-proof-callout{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(248,250,252,.92), rgba(241,245,249,.92));
}

#z2k-proof .z2k-proof-callout .a{
  font-weight: 900;
  margin-bottom: 4px;
}

#z2k-proof .z2k-proof-callout .b{
  color: rgba(15,23,42,.68);
  line-height: 1.5;
  font-size: 13.5px;
}

/* If theme forces narrow inner containers, neutralize inside this section */
#z2k-proof .wp-block-group,
#z2k-proof .wp-block-cover__inner-container{
  max-width: none !important;
}

/* =========================
   FORCE FULL-WIDTH for PROOF section
========================= */

#z2k-proof{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative;
  overflow: hidden;
}

/* Gutenberg / theme の中央寄せ制限を無効化 */
#z2k-proof .wp-block-group,
#z2k-proof .wp-block-cover__inner-container,
#z2k-proof .z2k-proof-inner{
  max-width: none !important;
  width: 100% !important;
}

/* ただし中身は読みやすい幅に戻す */
#z2k-proof .z2k-proof-inner{
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
}




/* =========================
   HOW IT WORKS (Flow + Steps)
========================= */

/* =========================
   HOW IT WORKS (Stripe-like)
   Scope: only #how-it-works
   Paste at the VERY END
========================= */

#how-it-works{
  /* セクションの余白を統一（Hero/Why Z2K と揃える） */
  padding: 96px 20px;
  position: relative;
  overflow: hidden;

  /* Stripeっぽい “白ベース + うっすら色” */
  background:
    radial-gradient(900px 520px at 15% 12%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(900px 520px at 85% 18%, rgba(99,102,241,.14), transparent 62%),
    radial-gradient(900px 520px at 55% 92%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 55%, #ffffff 100%);
}

/* ヘッダー固定でアンカーが隠れるのを防ぐ */
#how-it-works{ scroll-margin-top: 96px; }

@media (max-width: 780px){
  #how-it-works{ padding: 72px 18px; scroll-margin-top: 84px; }
}

/* Eyebrow / H2 */
#how-it-works .z2k-eyebrow{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(15,23,42,.60);
  margin: 0 0 10px;
}

#how-it-works h2{
  margin: 0 0 18px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #0b1220;
  max-width: 46ch;
}

/* =========================
   Flow (top)
========================= */

#how-it-works .z2k-flow{
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
}

/* カード（Flow） */
#how-it-works .z2k-flow-card{
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 16px 50px rgba(2,6,23,.08);
  backdrop-filter: blur(8px);
  min-height: 156px;
}

#how-it-works .z2k-flow-card--dark{
  background: linear-gradient(180deg, #0b1220 0%, #070b14 100%);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
}

#how-it-works .z2k-flow-head{
  font-weight: 900;
  color: #0b1220;
  font-size: 14px;
  letter-spacing: .02em;
}

#how-it-works .z2k-flow-card--dark .z2k-flow-head{
  color: #fff;
}

#how-it-works .z2k-flow-text{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(15,23,42,.78);
}

#how-it-works .z2k-flow-card--dark .z2k-flow-text{
  color: rgba(244,247,255,.82);
}

/* タグ */
#how-it-works .z2k-flow-tags{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#how-it-works .z2k-flow-tags span{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.78);
}

#how-it-works .z2k-flow-card--dark .z2k-flow-tags span{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: rgba(244,247,255,.86);
}

/* 矢印 */
#how-it-works .z2k-flow-arrow{
  display: grid;
  place-items: center;
  color: rgba(15,23,42,.35);
  font-weight: 900;
  font-size: 20px;
  user-select: none;
}

/* モバイルは縦積み＋矢印↓ */
@media (max-width: 980px){
  #how-it-works .z2k-flow{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #how-it-works .z2k-flow-arrow{
    font-size: 18px;
    padding: 2px 0;
  }
  #how-it-works .z2k-flow-arrow::before{
    content: "↓";
  }
  #how-it-works .z2k-flow-arrow{ color: rgba(15,23,42,.28); }
}

/* =========================
   Steps (bottom)
========================= */

#how-it-works .z2k-steps{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

@media (max-width: 980px){
  #how-it-works .z2k-steps{ grid-template-columns: 1fr; }
}

#how-it-works .z2k-step{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;

  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 40px rgba(2,6,23,.07);
}

#how-it-works .z2k-step-num{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: #0b1220;
  background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(99,102,241,.16));
  border: 1px solid rgba(15,23,42,.10);
}

#how-it-works .z2k-step-body h3{
  margin: 2px 0 6px;
  font-size: 16px;
  line-height: 1.25;
  color: #0b1220;
}

#how-it-works .z2k-step-body p{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(15,23,42,.78);
}

/* =========================
   Result callout
========================= */

#how-it-works .z2k-result{
  margin: 22px 0 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.82);
  line-height: 1.7;
}

#how-it-works .z2k-result strong{
  color: #0b1220;
  font-weight: 950;
}

/* HOW IT WORKS: 背景だけを100vwでフルブリードにする（確実版） */
#how-it-works{
  position: relative;
  overflow: visible; /* 背景が切られないように */
}

/* 背景レイヤー（これが全幅） */
#how-it-works::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #e9f7ff 0%, #f1f3ff 45%, #efeaff 100%);
  z-index: 0;
}

/* 中身を背景より前に出す */
#how-it-works > *{
  position: relative;
  z-index: 1;
}

/* How it works の下の余白を完全に消す */
#how-it-works{
  margin-bottom: 0 !important;
}

/* 次のセクション（Key features 側）の上余白も念のため潰す */
#how-it-works + section,
#how-it-works + .wp-block-group{
  margin-top: 0 !important;
}

/* =========================
   FEATURES (full-width)
========================= */
.lp-z2k section.alignfull.z2k-features-wrap{
  position:relative;
  overflow:hidden;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:96px var(--z2k-pad);
  color:#EAF2FF;
}
.lp-z2k section.alignfull.z2k-features-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(86,208,255,.22), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(140,120,255,.20), transparent 60%),
    linear-gradient(180deg, #071022 0%, #060B18 55%, #050A16 100%);
}
.lp-z2k .z2k-features-wrap > *{ position:relative; z-index:1; }
.lp-z2k .z2k-features-head{
  max-width:var(--z2k-max);
  margin:0 auto 26px;
}
.lp-z2k .z2k-kicker{
  letter-spacing:.18em;
  font-weight:800;
  font-size:12px;
  color:rgba(234,242,255,.75);
  margin:0 0 12px;
}
.lp-z2k .z2k-h2{
  color:#fff;
  font-weight:900;
  font-size:clamp(28px, 3vw, 44px);
  margin:0 0 12px;
}
.lp-z2k .z2k-sub{
  color:rgba(234,242,255,.78);
  font-size:16px;
  line-height:1.65;
  margin:0;
  max-width:760px;
}
.lp-z2k .z2k-feature-grid{
  max-width:var(--z2k-max);
  margin:0 auto;
  display:grid;
  gap:18px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.lp-z2k .z2k-feature-card{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:22px 20px 18px;
  box-shadow:0 18px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
@media (hover:hover){
  .lp-z2k .z2k-feature-card:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.26);
  }
}
.lp-z2k .z2k-icon{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:12px;
  background:rgba(86,208,255,.14);
  border:1px solid rgba(86,208,255,.22);
  margin:0 0 12px;
}
.lp-z2k .z2k-icon svg{ width:20px; height:20px; fill:rgba(234,242,255,.92); }
.lp-z2k .z2k-h3{ color:#fff; font-weight:900; font-size:16px; margin:0 0 8px; }
.lp-z2k .z2k-p{ color:rgba(234,242,255,.80); font-size:13.5px; line-height:1.6; margin:0 0 12px; }
.lp-z2k .z2k-ul{ margin:0; padding-left:18px; color:rgba(234,242,255,.86); }
.lp-z2k .z2k-ul li{ margin:6px 0; font-size:13px; }

/* Key Features サブテキストの改行を自然にする */
#lp-z2k .z2k-sub {
  max-width: 720px;   /* 行幅を少し広げる */
}

/* FIX: Key Features の説明文で "gateway." が孤立しないように（強制上書き） */
#lp-z2k #z2k-features .z2k-features-head .z2k-sub{
  max-width: 100% !important;     /* まず幅制限を外す */
  text-wrap: balance;              /* 対応ブラウザで折返し最適化 */
}

/* =========================
   FAQ
========================= */
/* =========================
   FAQ – Stripe-like finish
========================= */

#z2k-faq{
  background: #ffffff;
}

/* FAQ全体のレイアウト */
#z2k-faq .z2k-faq{
  margin-top: 32px;
  display: grid;
  gap: 16px;
}

/* 各FAQアイテム（カード化） */
#z2k-faq .z2k-faq-item{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  padding: 4px 0;
  transition: all .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

/* hover時 */
#z2k-faq .z2k-faq-item:hover{
  border-color: #d1d5db;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

/* summary（質問部分） */
#z2k-faq summary{
  cursor: pointer;
  padding: 18px 22px;
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
  list-style: none;
  position: relative;
}

/* デフォルトの三角を消す */
#z2k-faq summary::-webkit-details-marker{
  display: none;
}

/* 右側に＋アイコン */
#z2k-faq summary::after{
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #64748b;
  transition: transform .2s ease, color .2s ease;
}

/* open時は × に */
#z2k-faq details[open] summary::after{
  content: "–";
  color: #0f172a;
}

/* 回答文 */
#z2k-faq p{
  margin: 0;
  padding: 0 22px 18px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #475569;
  max-width: 70ch;
}

/* open時だけ少し強調 */
#z2k-faq details[open]{
  border-color: #cbd5e1;
  background: #f9fafb;
}

/* モバイル調整 */
@media (max-width: 640px){
  #z2k-faq summary{
    font-size: 16px;
    padding: 16px 18px;
  }

  #z2k-faq p{
    padding: 0 18px 16px;
  }
}

/* FAQ typography → match KEY FEATURES */
#z2k-faq .z2k-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 12px;
}

#z2k-faq h2 {
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 24px;
}

/* FAQセクションにも How it works と同じ背景を適用 */
#z2k-faq {
  position: relative;
  overflow: hidden;
  padding: 96px 20px;

  /* How it works と同じ背景トーン */
  background: linear-gradient(
    180deg,
    #f8fafc 0%,
    #f1f5f9 100%
  );

  /* 全幅に広げる（WordPress constrained対策） */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 中身は読みやすい幅に制限 */
#z2k-faq > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* セクション外側の余白だけを調整（中身は触らない） */
.z2k-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Gutenbergの親ラッパーによる余白を潰す */
.entry-content > .wp-block-group {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================
   FAQ FIX (no #lp-z2k dependency)
   Paste at VERY END
========================= */

/* section base */
#z2k-faq{
  position: relative;
  padding: 84px 20px !important;
  margin: 0 !important;
  background: transparent !important;
}

/* IMPORTANT: WPテーマ側の余白/幅制約を食い止める */
#z2k-faq.wp-block-group{
  max-width: none !important;
}

#z2k-faq .z2k-faq-wrap {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

@media (max-width: 900px){
  #z2k-faq .z2k-faq-wrap{ padding: 36px 20px; border-radius: 22px; }
}

/* header */
#z2k-faq .z2k-faq-sub{
  margin: 10px 0 0;
  color: rgba(15,23,42,.70);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 78ch;
}

/* layout: left tabs + right panels */
#z2k-faq .z2k-faq-layout{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 22px;
  margin-top: 22px;
}
@media (max-width: 980px){
  #z2k-faq .z2k-faq-layout{ grid-template-columns: 1fr; }
}

/* left tabs */
#z2k-faq .z2k-faq-nav{
  position: sticky;
  top: 18px;
  align-self: start;
  display: grid;
  gap: 10px;
}
@media (max-width: 980px){
  #z2k-faq .z2k-faq-nav{
    position: relative;
    top: auto;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    overflow: auto;
    padding-bottom: 6px;
  }
}
#z2k-faq .z2k-faq-tab{
  display: block;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13.5px;
  color: rgba(15,23,42,.78);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
#z2k-faq .z2k-faq-tab.is-active{
  color: rgba(15,23,42,.92);
  border-color: rgba(56,189,248,.45);
  background: linear-gradient(180deg, rgba(56,189,248,.18), rgba(255,255,255,.94));
}

/* panels */
#z2k-faq .z2k-faq-panel{
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(15,23,42,.08);
}
#z2k-faq .z2k-faq-panel + .z2k-faq-panel{ margin-top: 14px; }

#z2k-faq .z2k-faq-panel-title{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15,23,42,.62);
}

/* accordion cards */
#z2k-faq details.z2k-faq-item{
  border-radius: 14px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  overflow: hidden;
}
#z2k-faq details.z2k-faq-item + details.z2k-faq-item{ margin-top: 10px; }

/* summary */
#z2k-faq details.z2k-faq-item summary{
  cursor: pointer;
  list-style: none !important;
  padding: 16px 46px 16px 16px;
  font-weight: 850;
  color: rgba(15,23,42,.92);
  position: relative;
}
#z2k-faq details.z2k-faq-item summary::-webkit-details-marker{ display:none; }

/* WPテーマが勝手に入れる＋/−を消す（重要） */
#z2k-faq details.z2k-faq-item summary::after{ content: none !important; }

/* custom plus */
#z2k-faq .z2k-faq-plus{
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
}
#z2k-faq .z2k-faq-plus::before,
#z2k-faq .z2k-faq-plus::after{
  content:"";
  position:absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  background: rgba(15,23,42,.55);
  border-radius: 2px;
  transform: translateY(-50%);
}
#z2k-faq .z2k-faq-plus::after{
  left: 50%;
  width: 2px;
  height: 100%;
  top: 0;
  right: auto;
  transform: translateX(-50%);
}
#z2k-faq details[open] .z2k-faq-plus::after{ opacity: 0; }

/* answer */
#z2k-faq .z2k-faq-answer{
  padding: 0 16px 16px 16px;
  color: rgba(15,23,42,.76);
  line-height: 1.75;
  font-size: 15.5px;
}
#z2k-faq .z2k-faq-answer p{ margin: 0; }
#z2k-faq .z2k-faq-answer strong{ color: rgba(15,23,42,.92); }

/* --- kill theme's plus/minus (strong override) --- */
#z2k-faq details > summary::after,
#z2k-faq details > summary::before{
  content: none !important;
  display: none !important;
}

/* summary layout: keep text + custom plus aligned */
#z2k-faq details.z2k-faq-item summary{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-right: 16px !important; /* (custom plus is inside, so no extra 46px needed) */
}

/* ensure our plus always visible */
#z2k-faq .z2k-faq-plus{
  flex: 0 0 auto;
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}

#z2k-faq details.z2k-faq-item{
  box-shadow: 0 12px 30px rgba(2,6,23,.08) !important;
}
#z2k-faq details.z2k-faq-item[open]{
  border-color: rgba(56,189,248,.30) !important;
  box-shadow: 0 16px 40px rgba(2,6,23,.10) !important;
}

/* =========================
   FAQ icon override (force)
   Paste at VERY END
========================= */

/* hide native marker */
#z2k-faq summary::-webkit-details-marker{ display:none; }
#z2k-faq summary::marker{ content:""; }

/* nuke theme icons (common patterns) */
#z2k-faq details > summary svg,
#z2k-faq details > summary .icon,
#z2k-faq details > summary .toggle,
#z2k-faq details > summary .wp-block-details__toggle{
  display:none !important;
}

/* base summary layout */
#z2k-faq details.z2k-faq-item > summary{
  position: relative !important;
  padding-right: 56px !important; /* space for our icon */
}

/* FORCE our +/− */
#z2k-faq details.z2k-faq-item > summary::after{
  content: "+" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(255,255,255,.9);

  display: grid !important;
  place-items: center !important;

  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: rgba(15,23,42,.75);
}

/* open state */
#z2k-faq details.z2k-faq-item[open] > summary::after{
  content: "–" !important; /* en dash */
  color: rgba(2,6,23,.75);
}

/* hover focus polish */
#z2k-faq details.z2k-faq-item > summary:hover::after{
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
}

/* ===== FAQ full-width background ===== */

#z2k-faq {
  background: linear-gradient(
    180deg,
    #f7faff 0%,
    #eef4ff 50%,
    #f7faff 100%
  );
  padding: 96px 0;
}

/* 中のラッパーは幅制限だけ担当 */
#z2k-faq .z2k-faq-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* =========================
   FAQ: How it works と同じ全幅背景（panelではなくセクション背景）
   Paste at the VERY END
========================= */

#z2k-faq{
  position: relative;
  overflow: visible;
  background: none !important; /* 既存の背景（パネル/塗り）を殺す */
  padding: 96px 0;            /* ← コンテンツ余白は維持（左右は内側で付ける） */
  margin-top: 0 !important;   /* ← 上のセクションとのスキマを潰す */
}

/* 全幅背景レイヤー（How it works と同じ） */
#z2k-faq::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #e9f7ff 0%, #f1f3ff 45%, #efeaff 100%);
  z-index: 0;
}

/* FAQ内コンテンツは前面に */
#z2k-faq > *{
  position: relative;
  z-index: 1;
}

/* コンテンツ幅＆左右余白（読みやすさを維持） */
#z2k-faq .z2k-faq-wrap{
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 780px){
  #z2k-faq{ padding: 72px 0; }
  #z2k-faq .z2k-faq-wrap{ padding: 0 18px; }
}


/* =========================
   Z2K: THE SOLUTION FIX
   Targets: #lp-z2k #z2k-solution
========================= */

#lp-z2k #z2k-solution{
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* Columns: 上揃え + gap固定（テーマ上書き） */
#lp-z2k #z2k-solution .z2k-cols{
  align-items: flex-start !important;
  column-gap: 48px !important;
}

/* 右カラムのカードが「沈む/中央寄り」になるのを止める */
#lp-z2k #z2k-solution .z2k-cols > .wp-block-column:last-child{
  align-self: flex-start !important;
}

/* 右カードの先頭余白をゼロに */
#lp-z2k #z2k-solution .z2k-card{
  margin-top: 0 !important;
}

/* 見出し〜リードの余白調整（上が空きすぎるのを防ぐ） */
#lp-z2k #z2k-solution .z2k-eyebrow{ margin: 0 0 10px !important; }
#lp-z2k #z2k-solution h2{ margin: 0 0 12px !important; letter-spacing: -0.02em; line-height: 1.12; }
#lp-z2k #z2k-solution .z2k-lead{ margin: 0 0 18px !important; max-width: 72ch; }

/* 箇条書きの余白を安定化 */
#lp-z2k #z2k-solution .z2k-bullets{
  margin: 0 !important;
  padding-left: 1.2em !important;
}
#lp-z2k #z2k-solution .z2k-bullets li{
  margin: 10px 0 !important;
  line-height: 1.7 !important;
}

/* スマホは自然に縦積みで全幅 */
@media (max-width: 900px){
  #lp-z2k #z2k-solution .z2k-cols{
    row-gap: 18px !important;
  }
  #lp-z2k #z2k-solution .z2k-cols > .wp-block-column:last-child .z2k-card{
    max-width: 100%;
  }
}

/* THE SOLUTION: カード左の余白（列間）を詰める */
#lp-z2k #z2k-solution .z2k-cols{
  column-gap: px !important;  /* ← ここで空白が縮む（16〜28pxで調整） */
}

/* ついでに左右の配分も少し寄せて、右カードを左に寄せる */
#lp-z2k #z2k-solution .z2k-cols > .wp-block-column:first-child{
  flex-basis: 52% !important;
}
#lp-z2k #z2k-solution .z2k-cols > .wp-block-column:last-child{
  flex-basis: 48% !important;
}

/* =========================
   Difference section
========================= */

/* =========================================
   WHY Z2K — White background + colored cards
   Scope: #z2k-diff only
   Paste at the VERY END
========================================= */

#z2k-diff{
  /* keep background white */
  background: #ffffff !important;
  color: #0b1220;
  padding: clamp(56px, 6vw, 88px) 20px;
}

/* keep inner width */
#z2k-diff > .z2k-eyebrow,
#z2k-diff > h2,
#z2k-diff > .z2k-lead,
#z2k-diff > .z2k-diff-grid,
#z2k-diff > .z2k-compare{
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* Headings / lead */
#z2k-diff .z2k-eyebrow{
  color: rgba(11,18,32,.55);
}
#z2k-diff h2{
  color: #0b1220;
  margin: 0 0 14px;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  max-width: 46ch;
}
#z2k-diff .z2k-lead{
  margin: 0 0 24px;
  max-width: 78ch;
  font-size: 18px;
  line-height: 1.75;
  color: rgba(11,18,32,.78);
}

/* 2 cards grid: add CLEAR spacing */
#z2k-diff .z2k-diff-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;              /* ← カード間の隙間を強化 */
  margin-top: 22px;
  margin-bottom: 26px;    /* ← 次の比較表との隙間 */
}
@media (max-width: 980px){
  #z2k-diff .z2k-diff-grid{ grid-template-columns: 1fr; }
}

/* Card base: colored background + strong contrast */
#z2k-diff .z2k-diff-card{
  padding: 22px 22px 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 48px rgba(2,6,23,.08) !important;
}

/* CISO card color */
#z2k-diff .z2k-diff-card:first-child{
  background: linear-gradient(180deg, rgba(56,189,248,.14), rgba(56,189,248,.06)) !important;
}
/* Engineers card color */
#z2k-diff .z2k-diff-card:last-child{
  background: linear-gradient(180deg, rgba(99,102,241,.14), rgba(99,102,241,.06)) !important;
}

/* Card typography */
#z2k-diff .z2k-diff-kicker{
  color: rgba(11,18,32,.60);
  font-weight: 900;
  letter-spacing: .18em;
  font-size: 12px;
}
#z2k-diff .z2k-diff-card h3{
  color: #0b1220;
  margin: 8px 0 10px;
  font-size: 18px;
  line-height: 1.25;
}

/* Bullets */
#z2k-diff .z2k-bullets--compact{
  margin: 10px 0 0;
  padding-left: 18px;
}
#z2k-diff .z2k-bullets--compact li{
  color: rgba(11,18,32,.78);
  margin: 7px 0;
  line-height: 1.55;
}
#z2k-diff .z2k-bullets--compact strong{ color:#0b1220; }

/* KPI: readable */
#z2k-diff .z2k-kpi--compact{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 720px){
  #z2k-diff .z2k-kpi--compact{ grid-template-columns: 1fr; }
}
#z2k-diff .z2k-kpi-item{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 14px !important;
  padding: 12px 12px 10px !important;
}
#z2k-diff .z2k-kpi-item .k{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,18,32,.62);
}
#z2k-diff .z2k-kpi-item .v{
  font-size: 22px;
  font-weight: 900;
  margin-top: 6px;
  color: #0b1220;
}
#lp-z2k #z2k-diff .z2k-note--mini{
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0,0,0,.55); /* 背景が白の場合 */
}

/* Engineers mini table */
#z2k-diff .z2k-mini-metrics--compact{
  margin-top: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  overflow: hidden;
}
#z2k-diff .z2k-mini-row{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
#z2k-diff .z2k-mini-row:last-child{ border-bottom: none; }
#z2k-diff .z2k-mini-row .a{ font-weight: 900; color: rgba(11,18,32,.82); }
#z2k-diff .z2k-mini-row .b{ color: rgba(11,18,32,.72); }
@media (max-width: 640px){
  #z2k-diff .z2k-mini-row{ grid-template-columns: 1fr; }
}

/* Comparison card: separate spacing + slightly tinted */
#z2k-diff .z2k-compare{
  margin-top: 26px;                 /* ← 上のカード群と離す */
  padding: 22px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.015)) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 48px rgba(2,6,23,.06) !important;
}
#z2k-diff .z2k-compare-title{ color:#0b1220; }
#z2k-diff .z2k-compare-sub{
  margin: 0 0 14px;
  color: rgba(11,18,32,.66);
  font-size: 14px;
  line-height: 1.65;
}

/* Table: keep readable on white */
#z2k-diff .z2k-table-wrap{
  border-radius: 14px;
  overflow: auto;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}
#z2k-diff .z2k-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 980px;
}
#z2k-diff .z2k-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  color: rgba(11,18,32,.86);
  font-weight: 900;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}
#z2k-diff .z2k-table td{
  padding: 12px 12px;
  vertical-align: top;
  color: rgba(11,18,32,.74);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
#z2k-diff .z2k-table tbody tr:nth-child(odd) td{
  background: rgba(2,6,23,.02);
}
#z2k-diff .z2k-table td.ok{ color:#0f766e; font-weight: 900; }
#z2k-diff .z2k-table td.mid{ color: rgba(11,18,32,.74); font-weight: 700; }
#z2k-diff .z2k-table td.no{ color: rgba(11,18,32,.45); font-weight: 700; }

/* ============================
   Improve CISO card typography
============================ */

/* 見出しを少し強く、余白を整理 */
#z2k-diff .z2k-diff-card h3 {
  font-size: 20px;
  line-height: 1.35;
  margin-bottom: 14px;
}

/* 箇条書きを読みやすく */
#z2k-diff .z2k-bullets--compact {
  margin-top: 0;
}
#z2k-diff .z2k-bullets--compact li {
  margin: 10px 0;
  line-height: 1.6;
}

/* KPI全体を少し下に分離して“セクション感”を出す */
#z2k-diff .z2k-kpi--compact {
  margin-top: 18px;
}

/* KPIカードの中身を左揃えに変更 */
#z2k-diff .z2k-kpi-item {
  text-align: left;
  padding: 14px 14px 12px !important;
}

/* KPIラベルを小さく・整理 */
#z2k-diff .z2k-kpi-item .k {
  font-size: 11.5px;
  letter-spacing: .14em;
  margin-bottom: 6px;
}

/* 数値を主役に */
#z2k-diff .z2k-kpi-item .v {
  font-size: 24px;
  font-weight: 900;
}

/* KPI下の注釈を少し離す */
#z2k-diff .z2k-note--mini {
  margin-top: 14px;
  line-height: 1.6;
}

/* =========================
   WHY Z2K – Comparison table polish
   Paste at the VERY END
========================= */

#lp-z2k #z2k-diff .z2k-table-wrap{
  border-radius: 16px;
  overflow: auto;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

/* table base */
#lp-z2k #z2k-diff .z2k-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 980px;
  background: #fff;
}

/* header (sticky) */
#lp-z2k #z2k-diff .z2k-table thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  color: rgba(15,23,42,.88);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .01em;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}

/* first column sticky (Capability) */
#lp-z2k #z2k-diff .z2k-table th:first-child,
#lp-z2k #z2k-diff .z2k-table td:first-child{
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  border-right: 1px solid rgba(15,23,42,.08);
}

/* Z2K column emphasis (soft) */
#lp-z2k #z2k-diff .z2k-table th:nth-child(2),
#lp-z2k #z2k-diff .z2k-table td:nth-child(2){
  background: linear-gradient(180deg, rgba(56,189,248,.10), rgba(56,189,248,.05));
}

/* body cells */
#lp-z2k #z2k-diff .z2k-table td{
  padding: 14px 14px;
  vertical-align: top;
  color: rgba(15,23,42,.78);
  font-size: 14px;
  line-height: 1.55;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

/* zebra */
#lp-z2k #z2k-diff .z2k-table tbody tr:nth-child(odd) td{
  background: rgba(15,23,42,.015);
}
#lp-z2k #z2k-diff .z2k-table tbody tr:nth-child(odd) td:first-child{
  background: rgba(15,23,42,.015);
}

/* hover: help scanning */
#lp-z2k #z2k-diff .z2k-table tbody tr:hover td{
  background: rgba(56,189,248,.08);
}
#lp-z2k #z2k-diff .z2k-table tbody tr:hover td:first-child{
  background: rgba(56,189,248,.08);
}

/* Capability column typography */
#lp-z2k #z2k-diff .z2k-table td:first-child strong{
  color: rgba(15,23,42,.92);
  font-weight: 800;
}

/* Status cells: make them “chips” */
#lp-z2k #z2k-diff .z2k-table td.ok,
#lp-z2k #z2k-diff .z2k-table td.mid,
#lp-z2k #z2k-diff .z2k-table td.no{
  font-weight: 700;
  border-radius: 10px;
}

#lp-z2k #z2k-diff .z2k-table td.ok{
  color: rgba(5,150,105,.95);
  background: rgba(16,185,129,.10);
}
#lp-z2k #z2k-diff .z2k-table td.mid{
  color: rgba(15,23,42,.72);
  background: rgba(148,163,184,.18);
}
#lp-z2k #z2k-diff .z2k-table td.no{
  color: rgba(100,116,139,.75);
  background: rgba(148,163,184,.10);
}

/* mobile: let it scroll nicely */
@media (max-width: 820px){
  #lp-z2k #z2k-diff .z2k-table-wrap{
    -webkit-overflow-scrolling: touch;
  }
}

/* ==================================================
   WHY Z2K table – Readability-first (force override)
   Scope: only #z2k-diff .z2k-compare table
   Paste at the VERY END
================================================== */

/* container */
#z2k-diff .z2k-compare .z2k-table-wrap{
  border-radius: 16px !important;
  overflow: auto !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 18px 52px rgba(2,6,23,.08) !important;
  -webkit-overflow-scrolling: touch !important;
}

/* table */
#z2k-diff .z2k-compare table.z2k-table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  min-width: 980px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(15,23,42,.86) !important;
}

/* sticky header */
#z2k-diff .z2k-compare table.z2k-table thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(10px) !important;
  color: #0b1220 !important;
  font-weight: 900 !important;
  padding: 14px 14px !important;
  border-bottom: 1px solid rgba(15,23,42,.12) !important;
  white-space: nowrap !important;
}

/* first column sticky */
#z2k-diff .z2k-compare table.z2k-table th:first-child,
#z2k-diff .z2k-compare table.z2k-table td:first-child{
  position: sticky !important;
  left: 0 !important;
  z-index: 11 !important;
  background: #fff !important;
  border-right: 1px solid rgba(15,23,42,.10) !important;
}

/* width of first column */
#z2k-diff .z2k-compare table.z2k-table th:first-child{
  width: 290px !important;
  min-width: 290px !important;
}

/* cells */
#z2k-diff .z2k-compare table.z2k-table td{
  padding: 14px 14px !important;
  vertical-align: top !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  color: rgba(15,23,42,.80) !important;
  background: transparent !important;
}

/* zebra */
#z2k-diff .z2k-compare table.z2k-table tbody tr:nth-child(odd) td{
  background: rgba(2,6,23,.018) !important;
}
#z2k-diff .z2k-compare table.z2k-table tbody tr:nth-child(odd) td:first-child{
  background: #fff !important;
}

/* emphasize Z2K column (2nd) */
#z2k-diff .z2k-compare table.z2k-table th:nth-child(2),
#z2k-diff .z2k-compare table.z2k-table td:nth-child(2){
  background: rgba(56,189,248,.12) !important;
  color: rgba(11,18,32,.92) !important;
  font-weight: 700 !important;
}

/* hover scan */
@media (hover:hover){
  #z2k-diff .z2k-compare table.z2k-table tbody tr:hover td{
    background: rgba(99,102,241,.06) !important;
  }
  #z2k-diff .z2k-compare table.z2k-table tbody tr:hover td:nth-child(2){
    background: rgba(56,189,248,.18) !important;
  }
  #z2k-diff .z2k-compare table.z2k-table tbody tr:hover td:first-child{
    background: #fff !important;
  }
}

/* capability text */
#z2k-diff .z2k-compare table.z2k-table td:first-child strong{
  color: #0b1220 !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

/* status chips */
#z2k-diff .z2k-compare table.z2k-table td.ok,
#z2k-diff .z2k-compare table.z2k-table td.mid,
#z2k-diff .z2k-compare table.z2k-table td.no{
  font-weight: 800 !important;
  border-radius: 10px !important;
}

#z2k-diff .z2k-compare table.z2k-table td.ok{
  color: rgba(5,150,105,.98) !important;
  background: rgba(16,185,129,.12) !important;
}
#z2k-diff .z2k-compare table.z2k-table td.mid{
  color: rgba(30,41,59,.82) !important;
  background: rgba(148,163,184,.18) !important;
}
#z2k-diff .z2k-compare table.z2k-table td.no{
  color: rgba(100,116,139,.82) !important;
  background: rgba(148,163,184,.10) !important;
}

/* mobile tweaks */
@media (max-width: 640px){
  #z2k-diff .z2k-compare table.z2k-table{
    font-size: 13.5px !important;
  }
  #z2k-diff .z2k-compare table.z2k-table thead th,
  #z2k-diff .z2k-compare table.z2k-table td{
    padding: 12px 12px !important;
  }
}

/* =========================================================
   WHY Z2K – Comparison table (readability-first, override)
   Scope: #z2k-diff .z2k-compare table
   Paste at the VERY END
========================================================= */

#z2k-diff .z2k-compare{
  padding: 22px !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 16px 48px rgba(2,6,23,.06) !important;
}

/* wrapper */
#z2k-diff .z2k-table-wrap{
  border-radius: 14px;
  overflow: auto;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

/* table base */
#z2k-diff .z2k-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 980px;
  background: #fff;
}

/* header */
#z2k-diff .z2k-table thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  color: rgba(15,23,42,.88);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .01em;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(15,23,42,.12);
  white-space: nowrap;
}

/* first column sticky */
#z2k-diff .z2k-table thead th:first-child,
#z2k-diff .z2k-table tbody td:first-child{
  position: sticky;
  left: 0;
  z-index: 4;
  background: #fff;
  border-right: 1px solid rgba(15,23,42,.10);
}

/* body cells */
#z2k-diff .z2k-table tbody td{
  padding: 14px 14px;
  vertical-align: top;
  color: rgba(15,23,42,.78);
  font-size: 14px;
  line-height: 1.55;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

/* zebra */
#z2k-diff .z2k-table tbody tr:nth-child(odd) td{
  background: rgba(2,6,23,.018);
}
#z2k-diff .z2k-table tbody tr:nth-child(odd) td:first-child{
  background: rgba(2,6,23,.018);
}

/* row hover: scanning helper */
#z2k-diff .z2k-table tbody tr:hover td{
  background: rgba(56,189,248,.08);
}
#z2k-diff .z2k-table tbody tr:hover td:first-child{
  background: rgba(56,189,248,.08);
}

/* ===== Make Z2K column the "hero" ===== */
#z2k-diff .z2k-table thead th:nth-child(2){
  color: rgba(3,105,161,.92);
  background: linear-gradient(180deg, rgba(56,189,248,.18), rgba(56,189,248,.08));
  border-bottom-color: rgba(56,189,248,.25);
}

#z2k-diff .z2k-table tbody td:nth-child(2){
  background: linear-gradient(180deg, rgba(56,189,248,.12), rgba(56,189,248,.06));
  color: rgba(15,23,42,.86);
  font-weight: 800;
}

/* keep sticky first col on top of Z2K bg when scrolled */
#z2k-diff .z2k-table tbody td:first-child{
  font-weight: 800;
  color: rgba(15,23,42,.92);
}

/* ===== Status cells: chip look ===== */
#z2k-diff .z2k-table td.ok,
#z2k-diff .z2k-table td.mid,
#z2k-diff .z2k-table td.no{
  font-weight: 800;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,.08);
}

/* ok */
#z2k-diff .z2k-table td.ok{
  color: rgba(5,150,105,.95);
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.18);
}

/* mid */
#z2k-diff .z2k-table td.mid{
  color: rgba(51,65,85,.85);
  background: rgba(148,163,184,.20);
  border-color: rgba(148,163,184,.24);
}

/* no */
#z2k-diff .z2k-table td.no{
  color: rgba(100,116,139,.80);
  background: rgba(148,163,184,.12);
  border-color: rgba(148,163,184,.18);
}

/* tighten long text on small screens */
@media (max-width: 820px){
  #z2k-diff .z2k-compare{ padding: 18px !important; }
  #z2k-diff .z2k-table tbody td{ font-size: 13.5px; }
}

/* =========================================================
   WHY Z2K: Comparison table — Readability first (FORCE)
   Scope: #z2k-diff .z2k-compare だけに効かせる
   Paste at the VERY END
========================================================= */

#lp-z2k #z2k-diff .z2k-compare,
#z2k-diff .z2k-compare{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(2,6,23,.08) !important;
  padding: 22px !important;
}

/* タイトル/説明文の可読性 */
#lp-z2k #z2k-diff .z2k-compare-title,
#z2k-diff .z2k-compare-title{
  margin: 0 0 10px !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  color: #0b1220 !important;
}

#lp-z2k #z2k-diff .z2k-compare-sub,
#z2k-diff .z2k-compare-sub{
  margin: 0 0 16px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(15,23,42,.70) !important;
}

/* 表のラッパー：スクロールと枠 */
#lp-z2k #z2k-diff .z2k-table-wrap,
#z2k-diff .z2k-table-wrap{
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  overflow: auto !important;
  background: #fff !important;
  -webkit-overflow-scrolling: touch;
}

/* テーブル基本 */
#lp-z2k #z2k-diff table.z2k-table,
#z2k-diff table.z2k-table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  min-width: 980px !important;
  background: #fff !important;
  font-size: 14px !important;
}

/* ヘッダー（sticky + くっきり） */
#lp-z2k #z2k-diff .z2k-table thead th,
#z2k-diff .z2k-table thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.14) !important;

  padding: 14px 14px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  color: rgba(15,23,42,.90) !important;
  text-align: left !important;
  white-space: nowrap;
}

/* Capability列：sticky + 視線の起点に */
#lp-z2k #z2k-diff .z2k-table th:first-child,
#lp-z2k #z2k-diff .z2k-table td:first-child,
#z2k-diff .z2k-table th:first-child,
#z2k-diff .z2k-table td:first-child{
  position: sticky !important;
  left: 0 !important;
  z-index: 4 !important;
  background: #fff !important;
  border-right: 1px solid rgba(15,23,42,.10) !important;
  min-width: 260px;
}

/* ボディセル：行間/余白を増やして読むための表に */
#lp-z2k #z2k-diff .z2k-table td,
#z2k-diff .z2k-table td{
  padding: 14px 14px !important;
  vertical-align: top !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;

  color: rgba(15,23,42,.78) !important;
  line-height: 1.55 !important;
}

/* ゼブラ（薄く） */
#lp-z2k #z2k-diff .z2k-table tbody tr:nth-child(odd) td,
#z2k-diff .z2k-table tbody tr:nth-child(odd) td{
  background: rgba(2,6,23,.015) !important;
}

/* Z2K列を“強すぎない”強調（Stripe/Linearぽく） */
#lp-z2k #z2k-diff .z2k-table th:nth-child(2),
#lp-z2k #z2k-diff .z2k-table td:nth-child(2),
#z2k-diff .z2k-table th:nth-child(2),
#z2k-diff .z2k-table td:nth-child(2){
  background: linear-gradient(180deg, rgba(56,189,248,.14), rgba(56,189,248,.06)) !important;
}

/* ホバー：行の追跡を手助け（やり過ぎない） */
#lp-z2k #z2k-diff .z2k-table tbody tr:hover td,
#z2k-diff .z2k-table tbody tr:hover td{
  background: rgba(56,189,248,.10) !important;
}

/* Capabilityの太字を“見出し化” */
#lp-z2k #z2k-diff .z2k-table td:first-child strong,
#z2k-diff .z2k-table td:first-child strong{
  font-weight: 900 !important;
  color: rgba(15,23,42,.92) !important;
}

/* ok/mid/no を “チップ化”して読み取り速度UP */
#lp-z2k #z2k-diff .z2k-table td.ok,
#lp-z2k #z2k-diff .z2k-table td.mid,
#lp-z2k #z2k-diff .z2k-table td.no,
#z2k-diff .z2k-table td.ok,
#z2k-diff .z2k-table td.mid,
#z2k-diff .z2k-table td.no{
  font-weight: 800 !important;
  border-radius: 10px !important;
}

#lp-z2k #z2k-diff .z2k-table td.ok,
#z2k-diff .z2k-table td.ok{
  color: rgba(5,150,105,.95) !important;
  background: rgba(16,185,129,.14) !important;
}

#lp-z2k #z2k-diff .z2k-table td.mid,
#z2k-diff .z2k-table td.mid{
  color: rgba(15,23,42,.74) !important;
  background: rgba(148,163,184,.22) !important;
}

#lp-z2k #z2k-diff .z2k-table td.no,
#z2k-diff .z2k-table td.no{
  color: rgba(100,116,139,.80) !important;
  background: rgba(148,163,184,.14) !important;
}

/* 最下行（Primary trust model）だけ“結論行”として強調 */
#lp-z2k #z2k-diff .z2k-table tbody tr:last-child td,
#z2k-diff .z2k-table tbody tr:last-child td{
  background: rgba(99,102,241,.08) !important;
  border-bottom: 0 !important;
}

#lp-z2k #z2k-diff .z2k-table tbody tr:last-child td:first-child strong,
#z2k-diff .z2k-table tbody tr:last-child td:first-child strong{
  color: rgba(30,41,59,.95) !important;
}



/* =========================
   CTA v2 – Stripe-like (append)
========================= */

#z2k-contact.z2k-cta2{
  /* full-bleed background */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 72px 20px;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(900px 520px at 15% 18%, rgba(56,189,248,.14), transparent 62%),
    radial-gradient(900px 520px at 88% 26%, rgba(99,102,241,.14), transparent 62%),
    linear-gradient(180deg, #f7fafc 0%, #eef2ff 55%, #f8fafc 100%);
}

#z2k-contact.z2k-cta2::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  z-index:0;
}

#z2k-contact.z2k-cta2 .z2k-cta2-inner{
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

#z2k-contact.z2k-cta2 .z2k-cta2-top{
  margin-bottom: 18px;
}

#z2k-contact.z2k-cta2 .z2k-eyebrow{
  color: rgba(11,18,32,.60);
  letter-spacing: .16em;
  font-weight: 900;
}

#z2k-contact.z2k-cta2 h2{
  margin: 10px 0 10px;
  color: #0b1220;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

#z2k-contact.z2k-cta2 .z2k-cta2-lead{
  margin: 0;
  color: rgba(11,18,32,.72);
  font-size: 18px;
  line-height: 1.7;
  max-width: 78ch;
}

/* Card container */
#z2k-contact.z2k-cta2 .z2k-cta2-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 16px;

  background: #ffffff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 26px 80px rgba(2,6,23,.12);
}

@media (max-width: 900px){
  #z2k-contact.z2k-cta2{ padding: 56px 18px; }
  #z2k-contact.z2k-cta2 .z2k-cta2-grid{ grid-template-columns: 1fr; }
}

/* Left */
#z2k-contact.z2k-cta2 .z2k-cta2-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

#z2k-contact.z2k-cta2 .z2k-cta2-list li{
  position: relative;
  padding-left: 34px;
  color: rgba(11,18,32,.82);
  line-height: 1.55;
}

#z2k-contact.z2k-cta2 .z2k-cta2-list li strong{
  color: #0b1220;
  font-weight: 900;
}

#z2k-contact.z2k-cta2 .z2k-cta2-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #0b1220;
  background: rgba(56,189,248,.18);
  border: 1px solid rgba(56,189,248,.35);
}

/* Pills */
#z2k-contact.z2k-cta2 .z2k-cta2-pills{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#z2k-contact.z2k-cta2 .z2k-cta2-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.08);
  color: rgba(11,18,32,.72);
  font-size: 13px;
  font-weight: 750;
}

/* Right box */
#z2k-contact.z2k-cta2 .z2k-cta2-right{
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.00));
  display: grid;
  gap: 10px;
  align-content: start;
}

#z2k-contact.z2k-cta2 .z2k-cta2-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

#z2k-contact.z2k-cta2 .z2k-cta2-btn--primary{
  background: #0b1220;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.20);
}
#z2k-contact.z2k-cta2 .z2k-cta2-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(2,6,23,.28);
}

#z2k-contact.z2k-cta2 .z2k-cta2-btn--ghost{
  background: #fff;
  color: #0b1220 !important;
  border-color: rgba(2,6,23,.14);
}
#z2k-contact.z2k-cta2 .z2k-cta2-btn--ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
}

/* Tip */
#z2k-contact.z2k-cta2 .z2k-cta2-tip{
  margin-top: 6px;
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(56,189,248,.10);
  border: 1px solid rgba(56,189,248,.22);
  color: rgba(11,18,32,.78);
  font-size: 14px;
  line-height: 1.55;
}

#z2k-contact.z2k-cta2 .z2k-cta2-tip-title{
  font-weight: 900;
  color: #0b1220;
  margin-bottom: 4px;
}

/* Force full-bleed for CTA section even inside WP constrained group */
.wp-block-group:has(#z2k-contact.z2k-cta2){
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

#z2k-contact.z2k-cta2{
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* CTAセクションの背景は完全に無しにする */
#z2k-contact{
  background: transparent !important;
  box-shadow: none !important;
}

#z2k-contact::before,
#z2k-contact::after{
  content: none !important;
  display: none !important;
}

/* CTAパネルを主役にする */
#z2k-contact .z2k-card--cta{
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.06),
    0 2px 8px rgba(0,0,0,0.04);
  padding: 48px;
}

/* モバイル */
@media (max-width: 768px){
  #z2k-contact .z2k-card--cta{
    padding: 28px 20px;
  }
}

#z2k-contact .z2k-btn-primary{
  background: #0f172a;
  color: #fff;
  border-radius: 999px;
  padding: 14px 20px;
  font-weight: 600;
}

#z2k-contact .z2k-btn-secondary{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
}

#z2k-contact .z2k-tip{
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 14px;
}

/* =========================
   DESIGNED FOR (#z2k-fit)
   Paste at the VERY END
========================= */

/* =========================
   DESIGNED FOR (No animation)
   Scope: only #z2k-fit
   Paste at the VERY END
========================= */

#z2k-fit, #z2k-fit *{ box-sizing: border-box; }

/* テーマ干渉で「重なる」事故を止める */
#z2k-fit .z2k-fit-card,
#z2k-fit .z2k-fit-card *{
  position: static;
}

/* セクション背景（How it works と同系統） */
#z2k-fit{
  padding: 96px 20px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 15% 12%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(900px 520px at 85% 18%, rgba(99,102,241,.10), transparent 62%),
    radial-gradient(900px 520px at 55% 92%, rgba(16,185,129,.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 55%, #ffffff 100%);
}

@media (max-width: 780px){
  #z2k-fit{ padding: 72px 18px; }
}

#z2k-fit .z2k-fit-inner{
  max-width: 1180px;
  margin: 0 auto;
}

/* Typography reset（WPテーマの余計な余白を抑制） */
#z2k-fit p{ margin: 0; }
#z2k-fit ul{ margin: 0; padding-left: 18px; }
#z2k-fit li{ margin: 6px 0; line-height: 1.55; }

/* Headings */
#z2k-fit .z2k-eyebrow{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(15,23,42,.60);
  margin: 0 0 10px;
}

#z2k-fit h2{
  margin: 0 0 16px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #0b1220;
  max-width: 52ch;
}

#z2k-fit .z2k-fit-sub{
  max-width: 78ch;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(15,23,42,.75);
  margin: 0 0 40px;
}

/* Grid */
#z2k-fit .z2k-fit-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

@media (max-width: 900px){
  #z2k-fit .z2k-fit-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Cards: flexで中身を確実に縦並び（重なり防止） */
#z2k-fit .z2k-fit-card{
  display: flex;
  flex-direction: column;
  gap: 12px;

  background: rgba(255,255,255,.92);
  border-radius: 20px;
  padding: 28px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 60px rgba(2,6,23,.06);
  backdrop-filter: blur(8px);
}

#z2k-fit .z2k-fit-card h3{
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  color: #0b1220;
}

#z2k-fit .z2k-fit-card .desc{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(15,23,42,.60);
}

#z2k-fit .z2k-fit-list{
  margin: 0;
}

#z2k-fit .z2k-fit-list li{
  font-size: 14.5px;
  color: rgba(15,23,42,.80);
}

#z2k-fit .z2k-fit-card .why{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: rgba(37,99,235,.88);
}

/* Callout */
#z2k-fit .z2k-fit-callout{
  margin-top: 48px;
  padding: 22px 26px;
  border-radius: 18px;
  background: rgba(37,99,235,.04);
  border: 1px solid rgba(37,99,235,.12);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(15,23,42,.82);
}

#z2k-fit .z2k-fit-callout strong{
  color: #0b1220;
  font-weight: 950;
}

#z2k-fit .z2k-fit-callout em{
  font-style: italic;
}

/* =========================
   FAQ → CTA Full-bleed dark bridge
========================= */

.z2k-bridge-dark{
  position: relative;
  padding: 88px 20px;
  overflow: visible;
}

/* 背景だけを100vwでフルブリード */
.z2k-bridge-dark::before{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;

  background:
    radial-gradient(900px 520px at 15% 20%, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(99,102,241,.22), transparent 62%),
    linear-gradient(180deg, #05080f 0%, #070b14 100%);
}

/* 中身は通常幅 */
.z2k-bridge-dark-inner{
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

/* Typography */
.z2k-bridge-eyebrow{
  font-size: 12px;
  letter-spacing: .22em;
  font-weight: 900;
  color: rgba(255,255,255,.45);
  margin-bottom: 14px;
}

.z2k-bridge-title{
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: #ffffff;
  margin: 0 auto 18px;
  max-width: 36ch;
}

.z2k-bridge-sub{
  font-size: 18px;
  line-height: 1.7;
  color: rgba(244,247,255,.72);
  max-width: 62ch;
  margin: 0 auto;
}

/* モバイル調整 */
@media (max-width: 720px){
  .z2k-bridge-dark{
    padding: 72px 18px;
  }
}

/* =========================
   FAQ → Dark bridge: 背景のスキマだけ消す
   （コンテンツの余白は維持）
========================= */

/* FAQセクションの“外側”余白をゼロに（背景のスキマ原因） */
#z2k-faq{
  margin-bottom: 0 !important;
}

/* ブリッジの“外側”余白をゼロに（上側のスキマ原因） */
.z2k-bridge-dark{
  margin-top: 0 !important;
}

/* WordPress/Gutenbergで親側に余白が付くケースを潰す */
#z2k-faq.wp-block-group,
#z2k-faq.wp-block-group > .wp-block-group__inner-container{
  margin-bottom: 0 !important;
}


/* =========================
   Z2K LP – Section rhythm (GLOBAL)
   Paste at the VERY END
   Scope: only inside #lp-z2k
========================= */

#lp-z2k{
  /* section paddings */
  --z2k-sec-y: 96px;
  --z2k-sec-y-sm: 72px;

  /* content width */
  --z2k-max: 1180px;

  /* vertical rhythm */
  --z2k-gap-1: 12px;  /* eyebrow → h2 */
  --z2k-gap-2: 16px;  /* h2 → lead */
  --z2k-gap-3: 32px;  /* lead → body/grid */
  --z2k-gap-4: 24px;  /* card internal spacing */

  /* typography */
  --z2k-h2-size: clamp(28px, 3vw, 44px);
  --z2k-h2-lh: 1.12;
  --z2k-h2-ls: -0.02em;

  --z2k-lead-size: 18px;
  --z2k-lead-lh: 1.7;
  --z2k-lead-max: 72ch;

  /* section bg alternation */
  --z2k-bg-soft: rgba(15,23,42,0.03);
}

/* 0) Ensure every major section is centered the same way */
#lp-z2k .z2k-section{
  max-width: var(--z2k-max);
  margin-left: auto;
  margin-right: auto;
  padding: var(--z2k-sec-y) 20px;
}

/* 1) Eyebrow (small kicker) */
#lp-z2k .z2k-eyebrow{
  margin: 0 0 var(--z2k-gap-1);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .78;
}

/* 2) H2 styling consistency */
#lp-z2k .z2k-section h2{
  margin: 0 0 var(--z2k-gap-2);
  font-size: var(--z2k-h2-size);
  line-height: var(--z2k-h2-lh);
  letter-spacing: var(--z2k-h2-ls);
  text-wrap: balance;
}

/* 3) Lead consistency */
#lp-z2k .z2k-lead{
  margin: 0 0 var(--z2k-gap-3);
  font-size: var(--z2k-lead-size);
  line-height: var(--z2k-lead-lh);
  max-width: var(--z2k-lead-max);
  opacity: .92;
}

/* lead tight variant (if used) */
#lp-z2k .z2k-lead--tight{
  margin-bottom: 24px;
  max-width: 78ch;
}

/* 4) Default spacing between blocks inside sections */
#lp-z2k .z2k-section > *:last-child{ margin-bottom: 0; }
#lp-z2k .z2k-section p{ margin-top: 0; }

/* 5) Make columns/grid start at the same visual point */
#lp-z2k .z2k-cols,
#lp-z2k .z2k-diff-grid,
#lp-z2k .z2k-feature-grid,
#lp-z2k .z2k-flow,
#lp-z2k .z2k-steps,
#lp-z2k .z2k-diagrams{
  margin-top: 0;
}

/* 6) Soft background alternation (optional but Stripe-like)
   Add class "z2k-section--soft" to sections you want slightly tinted */
#lp-z2k .z2k-section.z2k-section--soft{
  background: var(--z2k-bg-soft);
  border-radius: 24px;
}

/* 7) Responsive rhythm */
@media (max-width: 780px){
  #lp-z2k .z2k-section{
    padding: var(--z2k-sec-y-sm) 20px;
  }
  #lp-z2k .z2k-lead{
    font-size: 16px;
    margin-bottom: 24px;
  }
}