/* =========================================================
   Kintone-compatible Design System — CLEANED (drop-in)
   ※ 現状のレイアウト/デザインを維持したまま重複と競合を整理 
   ========================================================= */

/* ===== TOKENS ===== */
:root{
  --kb-bg:#f7f9fa;
  --kb-surface:#fff;
  --kb-text:#23272a;
  --kb-sub:#6b7280;
  --kb-line:#e6eef7;
  --kb-primary:#2f64e2;
  --kb-primary-050:#f3f6ff;
  --kb-primary-100:#eaf0ff;
  --kb-primary-200:#d8e4ff;
  --kb-primary-300:#c4d4ff;
  --kb-primary-600:#2b57c7;
  --kb-primary-700:#224bb1;
  --kb-ink:#0b1f33;
  --kb-radius:14px;
  --kb-gap:8px;
  --kb-gap-lg:16px;
}
.kb-root[data-kb-theme="soft-dark"]{
  --kb-bg:#2c2f33;
  --kb-surface:#30343a;
  --kb-text:#f5f6fa;
  --kb-sub:#c5c7ce;
  --kb-line:#3c4047;
  --kb-primary:#7289da;
  --kb-primary-600:#667bd0;
  --kb-primary-700:#4f63a8;
  --kb-ink:#0f1115;
}

/* ===== RESET & BASE ===== */
.kb-root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;color:var(--kb-text);background:var(--kb-bg);line-height:1.6}
.kb-root*,.kb-root*::before,.kb-root*::after{box-sizing:border-box}
.kb-root h1,.kb-root h2,.kb-root h3,.kb-root h4,.kb-root h5,.kb-root h6,
.kb-root p,.kb-root ul,.kb-root ol{margin:0;padding:0}
.kb-root ul{list-style:none}
.kb-root a{color:var(--kb-primary);text-decoration:none}
.kb-root a:hover{text-decoration:underline}
.kb-root a:focus-visible{outline:2px solid var(--kb-primary-600);outline-offset:2px}
.kb-article{background:#fff;border:1px solid var(--kb-line);border-radius:24px;padding:0 0 56px;box-shadow:0 22px 48px rgba(15,23,42,.09);max-width:940px;margin:0 auto 96px;overflow:hidden}
.kb-article-header{padding:48px 56px 40px;background:linear-gradient(150deg,#f6f9ff 0%,#fff 42%,#eef3ff 100%)}
.kb-article-header h1{font-size:30px;font-weight:800;line-height:1.35;margin:6px 0 0}
.kb-article-label{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kb-primary);background:#ecf2ff;border-radius:999px;padding:6px 18px;box-shadow:0 4px 12px rgba(47,100,226,.18)}
.kb-article-meta{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;font-size:14px}
.kb-meta-chip{background:#fff;border-radius:16px;padding:12px 16px;border:1px solid rgba(47,100,226,.14);display:flex;gap:8px;align-items:flex-start;color:var(--kb-sub);line-height:1.7;box-shadow:0 12px 28px rgba(15,23,42,.05)}
.kb-meta-chip strong{color:var(--kb-text)}
.kb-article-body{padding:0 56px}
.kb-article-section{margin-top:40px}
.kb-article-section:first-of-type{margin-top:32px}
.kb-article-section h2{font-size:22px;font-weight:800;margin:0;color:var(--kb-text)}
.kb-article-paragraph{margin-top:12px;color:var(--kb-sub);line-height:1.8}
.kb-section-card{margin-top:18px;background:linear-gradient(140deg,#fff,#f8fbff);border:1px solid rgba(116,140,180,.18);border-radius:20px;padding:24px 28px;box-shadow:0 20px 44px rgba(15,23,42,.06)}
.kb-section-card--stack{display:grid;gap:18px}
.kb-article-list,.kb-article-check{list-style:none;margin:0;display:grid;gap:12px;color:var(--kb-text)}
.kb-article-list li,.kb-article-check li{position:relative;padding:14px 18px 14px 42px;border-radius:16px;background:#fff;border:1px solid rgba(45,60,86,.08);box-shadow:0 4px 10px rgba(15,23,42,.04)}
.kb-article-list li::before{content:"📄";position:absolute;left:16px;top:14px;font-size:16px}
.kb-article-check li::before{content:"✔";position:absolute;left:16px;top:14px;font-size:16px;color:#15803d;font-weight:700}
.kb-article-ordered{list-style:decimal;padding-left:1.6em;margin:12px 0 0;display:grid;gap:6px;font-weight:600}
.kb-article-ordered a{color:var(--kb-primary)}
.kb-article-toc{margin:48px 0;background:linear-gradient(160deg,#f7f9ff 0%,#edf2ff 100%);border-radius:24px;padding:32px 36px;box-shadow:0 18px 32px rgba(47,100,226,.12);color:#3a4b74;border:1px solid rgba(47,100,226,.12)}
.kb-article-toc h2{margin:0 0 16px;font-size:18px;font-weight:700;color:#2c3a64}
.kb-article-toc a{color:#3758a0;font-weight:600}
.kb-article-toc a:hover{color:#223b7d}
.kb-article-steps{list-style:none;margin:0;display:grid;gap:18px;color:var(--kb-text);counter-reset:step}
.kb-article-steps li{position:relative;padding:24px 26px 24px 132px;border-radius:22px;background:#fff;border:1px solid rgba(45,60,86,.08);box-shadow:0 16px 30px rgba(15,23,42,.05)}
.kb-article-steps li::before{content:counter(step,decimal-leading-zero);counter-increment:step;background:var(--kb-primary-100);color:#27428f;font-weight:700;border-radius:16px;display:flex;align-items:center;justify-content:center;width:60px;height:60px;font-size:16px;position:absolute;left:36px;top:24px;box-shadow:0 8px 18px rgba(47,100,226,.14);border:1px solid var(--kb-primary-200)}
.kb-article-steps h3{font-size:17px;font-weight:700;margin:0 0 8px;color:var(--kb-text)}
.kb-article-steps p{margin:0 0 6px;color:var(--kb-sub);line-height:1.7}
.kb-article-callout{margin-top:20px;padding:20px 24px;border-radius:18px;background:#fff9ed;border:1px solid rgba(245,158,11,.26);font-size:14px;color:#8a5a06;box-shadow:0 12px 26px rgba(245,158,11,.14)}
.kb-article-callout strong{color:#b45309}
.kb-article-hint{margin-top:20px;padding:18px 24px;border-radius:18px;background:linear-gradient(140deg,#f3f7ff 0%,#eef4ff 100%);border:1px solid rgba(59,130,246,.22);color:#2f4a7a;font-size:14px;box-shadow:0 12px 26px rgba(59,130,246,.14)}
.kb-screenshot-callout{margin-top:14px;padding:14px 18px;border-radius:14px;border:1px dashed var(--kb-line);background:#f9fbff;font-size:13px;color:#4b5563}
.kb-article-subheading{margin:28px 0 10px;font-size:18px;font-weight:700;color:var(--kb-text)}
.kb-article-footer{margin-top:56px;font-size:12.5px;color:var(--kb-sub);text-align:center}
.kb-support-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}
.kb-support-card{background:#fff;border-radius:18px;padding:18px 20px;border:1px solid rgba(47,100,226,.14);box-shadow:0 14px 30px rgba(15,23,42,.05);display:grid;gap:10px}
.kb-support-card strong{font-size:15px;color:var(--kb-text)}
.kb-support-card ul{margin:0;list-style:none;padding:0;display:grid;gap:6px;color:var(--kb-sub)}
.kb-support-card ul li::before{content:"• ";color:var(--kb-primary);font-weight:700}
.kb-support-meta{font-size:13px;color:var(--kb-sub)}
.kb-divider{margin:48px auto 0;height:1px;width:100%;max-width:520px;background:linear-gradient(90deg,rgba(47,100,226,0),rgba(47,100,226,.35),rgba(47,100,226,0))}
@media (max-width:720px){
  .kb-article{margin-bottom:56px}
  .kb-article-header{padding:36px 28px}
  .kb-article-header h1{font-size:26px}
  .kb-article-body{padding:0 24px}
  .kb-meta-chip{flex-direction:column;gap:4px}
  .kb-article-toc{margin:36px 0;padding:24px}
  .kb-article-steps li{padding:24px 20px 24px 96px}
  .kb-article-steps li::before{width:48px;height:48px;left:28px;top:24px;font-size:15px;border-radius:14px}
}

/* ===== LAYOUT ===== */
.kb-container{max-width:1080px;margin:0 auto;padding:24px}
.kb-section{padding:48px 0}
.kb-section-title{font-size:24px;margin:28px 0 14px;font-weight:800;text-align:left;color:var(--kb-text)}

/* ===== TOP BAR / SWITCHER ===== */
.kb-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.kb-brand{font-weight:800;letter-spacing:.2px}
.kb-language-switcher{display:flex;gap:8px;align-items:center}
.kb-lang{color:#2a4a86;border:1px solid #d7e3f3;padding:6px 10px;border-radius:10px;background:#fff}
.kb-lang:hover{background:#edf4ff}
.kb-currency-btn{border:1px solid #d7e3f3;background:#fff;padding:6px 10px;border-radius:10px;cursor:pointer;font-weight:600}
.kb-currency-btn.active{background:#ecf3ff;border-color:#bcd1ff}
.kb-back{color:#3a6fd8}
.kb-back:hover{text-decoration:underline}

/* ===== BUTTONS ===== */
.kb-btn{display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;padding:8px 12px;border-radius:10px;font-weight:600;border:1px solid #d7e3f3;background:#fff;color:#2a4a86;cursor:pointer;transition:.16s}
.kb-btn:hover{background:#edf4ff;border-color:#c7daf9}
.kb-btn-primary{background:var(--kb-primary);color:#fff;border-color:var(--kb-primary)}
.kb-btn-primary:hover{background:var(--kb-primary-600);border-color:var(--kb-primary-600)}
.kb-buy-btn{display:inline-block;background:var(--kb-primary);color:#fff;padding:10px 18px;border-radius:10px;font-weight:700;border:1px solid var(--kb-primary-600);box-shadow:0 4px 12px rgba(47,100,226,.25)}
.kb-buy-btn:hover{background:var(--kb-primary-600);border-color:var(--kb-primary-700)}

/* ===== HERO (INDEX) ===== */
.kb-hero{
  background:
    radial-gradient(1200px 440px at 15% -20%,rgba(55,125,255,.12),transparent),
    linear-gradient(180deg,rgba(0,0,0,.02),transparent);
}
.kb-hero .kb-container{padding:72px 0 60px}
.kb-hero-title{font-size:40px;line-height:1.2;margin:0 0 12px;font-weight:800}
.kb-hero-sub{color:#5b6b7a;margin:0 0 18px}
.kb-hero-guarantee{
  margin:24px 0 32px;
  padding:16px 20px;
  border-radius:18px;
  background:#f5f7ff;
  color:#1e2d55;
  font-size:15px;
  font-weight:400;
  line-height:1.7;
  text-align:center;
  width:100%;
}
.kb-hero-guarantee a{
  display:inline-block;
  margin-top:6px;
  color:inherit;
  font-weight:500;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.kb-hero-guarantee a:hover{opacity:.85}
.kb-root .kb-cta-primary,
.kb-root .kb-cta-primary:visited{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:180px;padding:12px 24px;border-radius:12px;background:var(--kb-primary);color:#fff;box-shadow:0 6px 18px rgba(47,100,226,.25);font-weight:800}
.kb-cta-primary:hover{filter:brightness(1.08);box-shadow:0 8px 22px rgba(47,100,226,.35)}

/* ===== PRODUCT GRID (INDEX) ===== */
#kb-product-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.kb-card{display:grid;grid-template-rows:170px auto;background:#fff;border:1px solid var(--kb-line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:transform .18s,box-shadow .18s,border-color .18s}
.kb-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(16,24,40,.10);border-color:#d6e3f7}
.kb-card-img,.kb-card-media{background:linear-gradient(180deg,#f6f9ff,#eff4fb);display:flex;align-items:center;justify-content:center}
.kb-card-img .kb-hero-image,.kb-card-media .kb-hero-image{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.06))}
.kb-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.kb-card-title{font-size:15.5px;line-height:1.4;font-weight:700;letter-spacing:.1px}
.kb-card-sub{font-size:12.5px;color:#5b6b7a}
.kb-badges{display:flex;gap:6px;flex-wrap:wrap}
.kb-badge{font-size:11.5px;padding:3px 8px;border-radius:999px;background:#eef4ff;color:#325bcb;border:1px solid #d9e6ff}
.kb-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
.kb-price-badge,.kb-price{font-weight:800;letter-spacing:.2px;background:var(--kb-primary);color:#fff;padding:6px 10px;border-radius:10px;border:1px solid var(--kb-primary-600);box-shadow:0 4px 12px rgba(47,100,226,.20)}

/* ===== PRODUCT DETAIL (1-column center, image above price) ===== */
.kb-product-hero--split{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px;margin:0 auto;padding:28px 16px 22px;gap:18px}
.kb-hero-col{width:100%}
.kb-hero-col h1{font-size:28px;font-weight:800;margin-bottom:8px}
.kb-hero-col .kb-summary{margin-bottom:12px;color:#555}
.kb-hero-col .kb-tags{margin:8px 0}
.kb-hero-side{margin:16px 0;display:flex;justify-content:center;width:100%}
.kb-hero-side .kb-hero-image{max-width:420px;width:100%;border:1px solid #e9eff7;border-radius:14px;padding:12px;background:#fbfcff}
.kb-price-box{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:8px}
#product-price{color:#fff;font-weight:800;font-size:18px}
.kb-guarantee-note{
  margin:20px auto 0;
  padding:20px 28px;
  border-radius:18px;
  background:#f5f7ff;
  color:#1e2d55;
  font-size:15px;
  font-weight:400;
  line-height:1.7;
  text-align:center;
  width:100%;
  max-width:720px;
}
.kb-guarantee-note a{
  display:inline-block;
  margin-top:6px;
  color:inherit;
  font-weight:500;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.kb-guarantee-note a:hover{opacity:.85}

.kb-product-cta{
  padding:40px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-align:center;
}
.kb-product-cta .kb-price-box{
  margin-top:0;
  flex-wrap:wrap;
}
.kb-product-cta .kb-guarantee-note{
  margin:0 auto;
}

/* Tags (product hero) */
.kb-hero-col .kb-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center; /* 左寄せにしたければ消す */
  margin:8px 0;
}
.kb-tag{
  font-size:12px;
  line-height:1;
  padding:5px 10px;
  border-radius:9999px;
  background:#eef4ff;
  color:#325bcb;
  border:1px solid #d9e6ff;
  white-space:nowrap;
}


/* Info / Features / Limitations */
.kb-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:32px}
.kb-info-grid strong{font-weight:700}
.kb-info-grid p{color:#5b6b7a;margin:4px 0 0}
.kb-feature-list,.kb-limitation-list{max-width:600px;margin:32px auto 0}
.kb-feature-list li,.kb-limitation-list li{padding:16px;margin-bottom:10px;background:#fff;border:1px solid var(--kb-line);border-radius:10px;font-size:14px;line-height:1.5}
.kb-feature-list li::before{content:"✓ ";color:var(--kb-primary);font-weight:700}
.kb-limitation-list li::before{content:"⚠ ";color:#e74c3c;font-weight:700}

/* Screenshots */
.kb-screenshots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:32px}
.kb-screenshots img{width:100%;height:auto;border:1px solid var(--kb-line);border-radius:14px}

/* FAQ */
.kb-faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-width:1080px;margin:0 auto}
.kb-faq .kb-faq-item{background:#fff;border:1px solid var(--kb-line);border-radius:14px;padding:16px 18px;text-align:left;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.kb-faq .kb-faq-item h3{margin:0 0 6px;font-size:15px}
.kb-faq .kb-faq-item p{margin:0;color:#5b6b7a}

/* Related products */
.kb-related-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:32px}
.kb-related-card{display:block;background:#fff;border:1px solid #e8edf3;border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:transform .18s,box-shadow .18s,border-color .18s}
.kb-related-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.08);border-color:#d7e3f3}
.kb-related-card .kb-hero-image{width:100%;height:160px;object-fit:contain;background:#f6f9fc}
.kb-related-title{font-weight:600;color:#0b1f33;padding:12px 14px 4px;line-height:1.3}
.kb-related-price{padding:10px 14px 14px;font-weight:700;color:#0b1f33}

/* Footer */
.kb-footer{margin-top:28px;padding:16px 0;border-top:1px solid #eef2f7;color:#5b6b7a}
.kb-footer-links{display:flex;gap:12px;margin-bottom:8px}

/* ===== RESPONSIVE ===== */
@media (max-width:840px){ .kb-hero-title{font-size:32px} }
@media (max-width:768px){
  .kb-container{padding:16px}
  .kb-hero-title{font-size:28px}
  .kb-hero-sub{font-size:16px}
  .kb-section-title{font-size:22px}
}

@media (max-width:600px){
  .kb-hero-guarantee,
  .kb-guarantee-note{
    margin:20px 0;
    padding:18px;
    text-align:center;
  }
}

/* === Safe overrides: center hero & 4-col grid === */

/* 1) ヒーロー（見出し/サブ/ボタンを中央寄せ） */
.kb-hero { text-align: center; }
.kb-hero .kb-container { display: flex; flex-direction: column; align-items: center; }
.kb-hero-title, .kb-hero-subtitle { margin-left: auto; margin-right: auto; }
/* ボタンが左に流れないよう保証 */
.kb-cta-primary { display: inline-flex; align-items: center; justify-content: center; }

/* 2) 商品カード：4カラムグリッド（レスポンシブ） */
.kb-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}
/* 幅縮小時は 3→2→1 列 */
@media (max-width: 1100px) { .kb-card-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 840px)  { .kb-card-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px)  { .kb-card-grid { grid-template-columns: 1fr !important; } }

/* 3) カードが“全幅化”するのを防止（万一の幅指定に負けないように） */
.kb-card-grid > .kb-card { width: 100%; max-width: none; }

/* 商品一覧とFAQの間に余白を追加 */
.kb-card-grid {
  margin-bottom: 48px; /* ← 下に余白を追加 */
}

/* FAQブロック上にも余白を確保 */
.kb-faq-block {
  margin-top: 64px;   /* FAQの始まりを下げる */
}
/* ==== Purchase button: text always visible & bold ==== */
.kb-price-box .kb-buy-btn,
.kb-price-box .kb-buy-btn:visited {
  color:#fff !important;
  font-weight:800;
  letter-spacing:.2px;
}
.kb-price-box .kb-buy-btn{
  background: var(--kb-primary);
  border:1px solid var(--kb-primary-600);
  box-shadow:0 4px 12px rgba(47,100,226,.25);
  padding:10px 18px;
  min-width:120px;
}
.kb-price-box .kb-buy-btn:hover{
  background: var(--kb-primary-600);
  border-color: var(--kb-primary-700);
  filter:brightness(1.02);
}

/* ==== Steps (使い方): 3-column with big numbered pills ==== */
/* 既存の .kb-steps / .kb-step / .kb-step-number / h3 / p をそのまま利用 */
.kb-steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  margin-top:32px;
  text-align:center;
  align-items:start;
}
.kb-step-number{
  width:56px; height:56px; border-radius:9999px;
  background: var(--kb-primary);
  color:#fff; font-weight:800; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px;
  box-shadow:0 6px 18px rgba(47,100,226,.25);
}
.kb-step h3{
  font-size:16px; font-weight:700; margin:0 0 6px;
}
.kb-step p{
  font-size:14px; color:var(--kb-sub); margin:0;
}

/* モバイルで1カラムに */
@media (max-width: 900px){
  .kb-steps{ grid-template-columns: 1fr; row-gap:16px; }
}

/* ==== カード群とFAQの間隔を少し広げる ==== */
.kb-faq-block{ margin-top:40px; }

/* Video tile (screenshots グリッドに溶け込む) */
.kb-video {
  position: relative;
  border: 1px solid var(--kb-line);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.kb-video video { display:block; width:100%; height:auto; }
.kb-video-play {
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer; display: grid; place-items: center;
  transition: transform .12s ease, filter .12s ease;
}
.kb-video-play:hover { transform: scale(1.05); filter: brightness(1.05); }
.kb-video-caption {
  font-size: 12.5px; color: var(--kb-sub);
  padding: 6px 8px 10px; background: #fff;
}
/* --- Fix: video overlay clickability --- */
.kb-video { 
  position: relative; 
  isolation: isolate;         /* ← スタッキングコンテキストを作る */
}

.kb-video video,
.kb-video .kb-video-el {
  position: relative; 
  z-index: 1;                 /* ← 動画は下層 */
  display: block; 
  width: 100%; 
  height: auto; 
}

.kb-video-play {
  position: absolute; 
  inset: 0;
  display: grid; 
  place-items: center;
  background: transparent; 
  border: 0; 
  cursor: pointer;
  z-index: 3;                 /* ← ボタンを最前面へ */
}

.kb-video-play svg { 
  pointer-events: none;       /* ← SVGがクリックをブロックしないように */
}

/* --- Screenshots: equal height + captions for image & video --- */
.kb-screenshots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

/* 共通フレーム */
.kb-shot {
  border: 1px solid var(--kb-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

/* メディア枠は同じ比率に固定（16:9）*/
.kb-shot-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;            /* 余白が出る動画・画像の下地 */
  isolation: isolate;
}

.kb-shot-media img,
.kb-shot-media video,
.kb-video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;         /* はみ出さず全体を見せる */
  position: relative;
  z-index: 1;
}

/* 再生ボタンは最前面でクリック可能に */
.kb-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
}
.kb-video-play svg { pointer-events: none; }

/* キャプション（画像・動画共通） */
.kb-shot figcaption,
.kb-video-caption {
  font-size: 12.5px;
  color: var(--kb-sub);
  padding: 8px 10px 12px;
  background: #fff;
}

/* ==== Patch: layout-safe additions (video / screenshots / spacing / modal) ==== */

/* 商品一覧とFAQの間に余白 */
.kb-card-grid { margin-bottom: 48px; }

/* FAQブロックの頭に余白（index/product 両方） */
.kb-faq-block { margin-top: 64px; }

/* 購入ボタンの文字が薄くなるのを強制防止 */
.kb-price-box .kb-buy-btn,
.kb-price-box .kb-buy-btn:visited { color:#fff !important; font-weight:800; letter-spacing:.2px; }

/* ---- Screenshots（“元の見た目”を壊さない軽量版） ---- */
.kb-screenshots{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:16px;
  margin-top:32px;
}
.kb-shot{ border:1px solid var(--kb-line); border-radius:14px; overflow:hidden; background:#fff; }
.kb-shot-media{ position:relative; background:#fff; }
.kb-shot-media img, .kb-shot-media video{ display:block; width:100%; height:auto; }
.kb-shot figcaption{ font-size:12.5px; color:var(--kb-sub); padding:8px 10px 12px; }

/* 動画の再生オーバーレイ（クリック可能を最優先） */
.kb-video-play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px;
  border:0; border-radius:999px; background:transparent; cursor:pointer;
  display:grid; place-items:center; z-index:3;
}
.kb-video-play svg{ pointer-events:none; }
.kb-video-el{ position:relative; z-index:1; }

/* ---- Image modal (拡大表示) ---- */
.kb-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; z-index:1000; }
.kb-modal.open{ display:flex; align-items:center; justify-content:center; }
.kb-modal img, .kb-modal video{ max-width:min(96vw,1200px); max-height:92vh; border-radius:12px; background:#000; }
.kb-modal .kb-modal-close{
  position:fixed; top:16px; right:16px; background:#fff; border:1px solid #ddd;
  border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer;
}
/* ===== Lightbox (image/video zoom) ===== */
#kb-lightbox{
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.65); z-index: 9999;
}
#kb-lightbox.open{ display: flex; }
#kb-lightbox .kb-lb-inner{
  position: relative; max-width: min(96vw, 1200px); max-height: 90vh;
}
#kb-lightbox img, #kb-lightbox video{
  display: block; max-width: 100%; max-height: 90vh;
  box-shadow: 0 12px 32px rgba(0,0,0,.35); border-radius: 12px;
}
#kb-lightbox .kb-lb-close{
  position: absolute; top: 8px; right: 8px;
  padding: 6px 10px; font-size: 14px; line-height: 1;
  background: #111; color: #fff; border: 0; border-radius: 8px;
  opacity: .85; cursor: pointer;
}
#kb-lightbox .kb-lb-close:hover{ opacity: 1; }

/* Screenshots: 動画を含むタイルは全幅で1カラム表示 */
.kb-screenshots .kb-shot:has(video), .kb-screenshots .kb-video:has(video) {grid-column: 1 / -1;      /* グリッドを横断（全幅） */}

/* もし“動画は必ず16:9で大きく”見せたい場合（任意） */
.kb-screenshots .kb-shot:has(video) .kb-shot-media {aspect-ratio: 16 / 9;     /* 既定と同じでもOK。必要なら高さを確保 */}

.kb-ins-screenshot {max-width: 220px; width:100%; height: auto; border: 1px solid #ddd; border-radius: 4px; padding: 4px;}
.kb-screenshot-callout {width: 100%;box-sizing: border-box;}
.kb-screenshot-callout img {max-width: 100%;height: auto;display: block;margin: 0 auto;}

.kb-card-body { display:flex; flex-direction:column; gap:8px; }
.kb-card-desc {color:#374151; font-size:0.92rem; line-height:1.4; min-height:2.5em; /* 2行分を確保して高さブレ抑制 */ margin:0;}
.kb-card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.kb-tag { display:inline-block; padding:2px 8px; border-radius:999px; background:#5D93FF; color:#fff; font-weight:600; font-size:12px;}
.kb-price-badge.kb-price-free { background:#10B981; /* 緑 */ color:#fff; border:none; box-shadow:none;}
.kb-price-badge.kb-price-free:hover, .kb-card-foot a:hover, .kb-btn:hover { text-decoration: none !important; box-shadow: none !important;}

/* ===== Install Guide Section ===== */
.kb-install-guide {text-align: center;margin: 64px auto 32px;}
.kb-install-box {background: linear-gradient(135deg, #f6f9ff, #eaf0ff);border: 1px solid rgba(47,100,226,.14);border-radius: 20px;padding: 32px 24px;box-shadow: 0 12px 24px rgba(47,100,226,.08);}
.kb-install-title {font-size: 20px;font-weight: 800;color: #27428f;margin: 0 0 8px;}
.kb-install-desc {font-size: 14.5px;color: #4b5563;margin: 0 0 16px;}
.kb-install-btn {display: inline-block;background: var(--kb-primary);color: #fff !important;padding: 10px 24px;border-radius: 10px;font-weight: 700;text-decoration: none;box-shadow: 0 6px 14px rgba(47,100,226,.25);transition: all 0.2s ease;}
.kb-install-btn:hover {background: var(--kb-primary-600);transform: translateY(-2px);}

/* 一覧カード：準備中 */
.kb-card--coming { position: relative; opacity: .55; }
.kb-card--coming::after { content: "COMING SOON"; position: absolute; top: 8px; right: 8px; font-size: 12px; font-weight: 700; background: #0B63F3; color: #fff; padding: 4px 8px; border-radius: 8px;}
.is-coming-soon .kb-buy-btn { pointer-events: none; opacity: .4; cursor: not-allowed; }
.kb-coming-label { display: none; margin-left: 8px; font-weight: 700; color: #0B63F3; }
.is-coming-soon .kb-coming-label { display: inline-block; }
.kb-price-coming {background: #999; color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 12px;}

/* ===== Index リニューアル用スタイル ===== */

/* Header */
.kb-brand-link { display:flex; align-items:center; text-decoration:none !important; }
.kb-logo-img { height:40px; width:auto; display:block; }
.kb-topbar-nav { display:flex; align-items:center; gap:20px; font-size:14px; font-weight:600; }
.kb-topbar-nav a { color:var(--kb-sub); text-decoration:none; transition:color .16s; }
.kb-topbar-nav a:hover { color:var(--kb-text); text-decoration:none; }

/* Hero */
.kb-eyebrow { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--kb-primary); margin:0 0 12px; }
.kb-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.kb-cta-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 22px; border-radius:12px; background:#fff; color:var(--kb-primary); border:2px solid var(--kb-primary-200); font-weight:700; text-decoration:none; transition:border-color .16s, background .16s; }
.kb-cta-secondary:hover { background:var(--kb-primary-050); border-color:var(--kb-primary-300); text-decoration:none; }

/* Launcher Card */
.kb-launcher-card { display:flex; align-items:center; gap:28px; background:#fff; border:1px solid var(--kb-line); border-radius:20px; padding:28px 32px; text-decoration:none; color:inherit; box-shadow:0 4px 16px rgba(15,23,42,.06); transition:box-shadow .2s, transform .2s; }
.kb-launcher-card:hover { box-shadow:0 10px 28px rgba(47,100,226,.14); transform:translateY(-2px); text-decoration:none; }
.kb-launcher-card-body { flex:1; display:flex; flex-direction:column; gap:10px; }
.kb-launcher-tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--kb-primary); background:var(--kb-primary-100); border:1px solid var(--kb-primary-200); border-radius:999px; padding:4px 12px; align-self:flex-start; }
.kb-launcher-card-body h3 { font-size:20px; font-weight:800; margin:0; line-height:1.3; }
.kb-launcher-card-body p { margin:0; color:var(--kb-sub); font-size:15px; line-height:1.7; }
.kb-launcher-cta { align-self:flex-start; margin-top:4px; }
.kb-launcher-card-visual { flex-shrink:0; }
.kb-launcher-logo { width:96px; height:96px; object-fit:contain; border-radius:20px; }

/* 空状態 */
.kb-coming-notice { margin-top:20px; padding:28px; text-align:center; border:1px dashed var(--kb-line); border-radius:16px; color:var(--kb-sub); }

/* モバイル */
@media (max-width:720px) {
  .kb-topbar-nav a:not(:last-child) { display:none; }
  .kb-hero-actions { flex-direction:column; }
  .kb-cta-primary, .kb-cta-secondary { width:100%; }
  .kb-launcher-card { flex-direction:column; padding:20px; gap:16px; }
  .kb-launcher-card-visual { display:none; }
}