/* kintone-landing-rich.css — Twilight effects + page polish (Orange brand & rich services) */

/* ==== Brand (Orange) ==== */
:root{
    --brand:#ff7a1a;        /* メイン */
    --brand-dark:#e56000;   /* 濃いめ */
    --brand-2:#ff9950;      /* 補助 */
    --brand-3:#ffcf66;      /* 明るめ */
    --ink:#101828; --muted:#667085; --panel:#fafafa;
  }
  
  /* ===== Twilight pack (effects) ===== */
  .tw-aurora{position:relative;overflow:hidden;isolation:isolate;}
  .tw-aurora::before,.tw-aurora::after{
    content:"";position:absolute;inset:-25%;
    /* オレンジ寄りのオーロラ */
    background:conic-gradient(from 0deg at 30% 30%,
      var(--brand-3), var(--brand-2), var(--brand), #ff6b6b, var(--brand-3));
    filter:blur(72px) saturate(1.2);opacity:.55;z-index:-1;animation:tw-rotate 20s linear infinite;
  }
  .tw-aurora::after{animation-duration:32s;mix-blend-mode:screen;opacity:.42;}
  @keyframes tw-rotate{to{transform:rotate(360deg);}}
  
  /* ノイズフィルム */
  .tw-noise{position:relative;isolation:isolate;}
  .tw-noise::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.04'/></feComponentTransfer></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  mix-blend-mode:soft-light;opacity:.5;}
  
  /* ガラス風 */
  .tw-glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:16px;
  backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 16px 40px rgba(2,12,27,.14);}
  
  /* グラデ境界線 */
  .tw-gradient-border{position:relative;border-radius:16px;}
  .tw-gradient-border::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--brand-3),var(--brand));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
  
  /* グラデ文字 */
  .tw-gradient-text{
    background:linear-gradient(90deg,var(--brand-dark), #ff6b6b, var(--brand-2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .tw-gradient-text.tw-shimmer{background-size:200% 100%;animation:tw-sheen 5s linear infinite;}
  @keyframes tw-sheen{to{background-position:-200% 0;}}
  
  /* ボタンエフェクト */
  .tw-btn{position:relative;overflow:hidden;transform:translateZ(0);box-shadow:0 10px 25px rgba(15,76,92,.22);transition:transform .15s ease,box-shadow .15s ease;}
  .tw-btn:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(15,76,92,.3);}
  .tw-btn--shine::after{content:"";position:absolute;top:-120%;left:-40%;width:45%;height:340%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.9),transparent);
  transform:rotate(25deg);animation:tw-shine 3.6s cubic-bezier(.3,.8,.3,1) infinite;}
  @keyframes tw-shine{0%{left:-40%;}60%,100%{left:120%;}}
  
  .tw-float{transition:transform .18s ease, box-shadow .18s ease;}
  .tw-float:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,24,40,.18);}
  
  /* スクロールリビール */
  @supports (animation-timeline: view()){
    .tw-reveal{opacity:0;transform:translateY(10px);animation:tw-reveal 1ms linear both;animation-timeline:view();animation-range:entry 20% cover 30%;}
    @keyframes tw-reveal{to{opacity:1;transform:none;}}
  }
  
  /* スポットライト */
  .tw-spotlight{position:relative;overflow:hidden;}
  .tw-spotlight::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(200px 200px at 70% 30%,rgba(255,255,255,.16),transparent 60%);
  mix-blend-mode:soft-light;transition:background-position .25s ease;}
  .tw-spotlight:hover::after{background:radial-gradient(200px 200px at 40% 60%,rgba(255,255,255,.18),transparent 60%);}
  
  @media (prefers-reduced-motion: reduce){
    .tw-aurora::before,.tw-aurora::after,.tw-btn--shine::after,.tw-gradient-text.tw-shimmer{animation:none;}
  }
  
  /* ===== Page polish (Kintone LP) ===== */
  .kintone-landing{font-feature-settings:"palt";color:var(--ink);}
  .kl-section{padding:64px 0;}
  .kl-section__title{font-size:1.8rem;font-weight:800;text-align:center;margin:0 0 28px;letter-spacing:.01em;}
  
  /* Hero */
  .kl-hero{padding:108px 0 140px;}
  .kl-hero__title{font-size:2.4rem;line-height:1.15;margin:0 0 10px;}
  .kl-hero__lead{max-width:44rem;margin:0 0 22px;line-height:1.8;color:#113a3a;}
  /* ボタンはブランド色に */
  .kl-btn--primary{background:var(--brand);}
  .kl-btn--primary:hover{box-shadow:0 10px 28px rgba(255,122,26,.25);}
  
  /* Benefits */
  .kl-benefits{margin-top:28px;display:grid;gap:16px;grid-template-columns:1fr;}
  .kl-benefits .kl-card{background:#fff;border:1px solid #eef1f5;border-radius:14px;padding:18px 16px;box-shadow:0 4px 14px rgba(16,24,40,.06);}
  
  /* ==== Services (rich cards) ==== */
  .kl-services__grid{
    display:grid; gap:24px;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  }
  .kl-service{
    position:relative; border-radius:20px;
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
    border:1px solid #eef1f5; padding:22px;
    box-shadow:0 8px 24px rgba(16,24,40,.08);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .kl-service::before{
    /* グラデ境界線（内側は透過） */
    content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
    background:linear-gradient(135deg, var(--svc1, var(--brand-3)), var(--svc2, var(--brand)));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; opacity:.95; pointer-events:none;
  }
  .kl-service::after{
    /* 右上の光沢 */
    content:""; position:absolute; inset:1px; border-radius:calc(20px - 1px);
    background:radial-gradient(120px 80px at 85% -10%, rgba(255,255,255,.65), transparent 60%);
    pointer-events:none; opacity:.55; transition:opacity .2s ease;
  }
  .kl-service:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(16,24,40,.14); }
  .kl-service:hover::after{ opacity:.9; }
  
  .kl-service__head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .kl-badge{
    width:44px; height:44px; border-radius:9999px;
    background:linear-gradient(135deg, var(--svc1, var(--brand-3)), var(--svc2, var(--brand)));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), 0 10px 20px rgba(255,122,26,.20);
    display:flex; align-items:center; justify-content:center;
  }
  .kl-badge__emoji{ font-size:22px; line-height:1; }
  
  .kl-service__title{ font-size:1.22rem; font-weight:800; margin:0; letter-spacing:.01em; }
  .kl-service__lead{ color:#667085; margin:2px 0 12px; }
  
  .kl-services .kl-list li{ margin:.25rem 0; }
  
  .kl-link{
    margin-top:12px; display:inline-block; text-decoration:none; color:var(--brand); font-weight:700; position:relative;
  }
  .kl-link::after{
    content:""; display:block; height:2px; background:currentColor;
    transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
  }
  .kl-link:hover::after{ transform:scaleX(1); }
  
  /* アクセント別（任意でカードごとに色味を微調整） */
  .kl-service--accent-1{ --svc1:#ffcf66; --svc2:#ff9950; }
  .kl-service--accent-2{ --svc1:#ffd1a8; --svc2:#ff7a1a; }
  .kl-service--accent-3{ --svc1:#ffe2b8; --svc2:#ff8f5a; }
  
  /* Steps as timeline */
  .kl-steps{background:var(--panel);}
  .kl-steps__list{position:relative;list-style:none;margin:0;padding:0;max-width:48rem;margin-inline:auto;display:grid;gap:12px;}
  .kl-steps__list::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:2px;background:linear-gradient(#d9e2ec,#edf2f7);}
  .kl-steps__list li{position:relative;background:#fff;border:1px solid #eef1f5;border-radius:12px;padding:14px 16px 14px 64px;}
  .kl-steps__list li::before{content:"";position:absolute;left:16px;top:18px;width:16px;height:16px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px #e6f0f2;}
  .kl-step__num{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px;}
  
  /* CTA */
  .kl-cta{background:linear-gradient(135deg,#ffd47a 0%,#ff9950 100%);padding:56px 0;text-align:center;border-radius:16px;margin-top:24px;}
  .kl-cta__lead{font-size:1.2rem;font-weight:800;margin:0 0 16px;color:#0f2a2a;}
  /* CTAのノイズ擬似要素を角丸でしっかりクリップ */
  .kl-cta{ overflow: hidden; }
  
  /* Mobile sticky CTA */
  @media (max-width: 768px){
    .kl-cta-fixed{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:var(--brand);color:#fff;border-radius:9999px;text-align:center;padding:12px 16px;box-shadow:0 10px 24px rgba(0,0,0,.18);}
    .kl-cta-fixed a{color:#fff;text-decoration:none;display:block;}
    body{padding-bottom:76px;}
  }
  
  /* Layout breakpoints */
  @media (min-width: 600px){
    .kl-hero{padding:128px 0 168px;}
    .kl-hero__title{font-size:2.8rem;}
    .kl-benefits{grid-template-columns:repeat(2,1fr);}
    .kl-services__grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (min-width: 960px){
    .kl-hero__title{font-size:3.1rem;}
    .kl-benefits{grid-template-columns:repeat(4,1fr);}
    .kl-services__grid{grid-template-columns:repeat(3,1fr);}
  }
  
  /* Utility */
  .tw-center{max-width:48rem;margin-inline:auto;}
  
  /* ==== Header OFF (template-scoped) ==== */
  body:is(.page-template-page-kintone-landing-rich,
          .page-template-page-kintone-landing-rich-php) .l-header,
  body:is(.page-template-page-kintone-landing-rich,
          .page-template-page-kintone-landing-rich-php) header.l-header,
  body:is(.page-template-page-kintone-landing-rich,
          .page-template-page-kintone-landing-rich-php) .l-header--fix,
  body:is(.page-template-page-kintone-landing-rich,
          .page-template-page-kintone-landing-rich-php) .p-globalNav,
  body:is(.page-template-page-kintone-landing-rich,
          .page-template-page-kintone-landing-rich-php) .p-headBar,
  body:is(.page-template-page-kintone-landing-rich,
          .page-template-page-kintone-landing-rich-php) .c-breadcrumb,
  body:is(.page-template-page-kintone-landing-rich,
          .page-template-page-kintone-landing-rich-php) .p-breadcrumb,
  body:is(.page-template-page-kintone-landing-rich,
          .page-template-page-kintone-landing-rich-php) .l-fixHeader--space {
    display: none !important;
  }
  
  /* ヘッダー分の余白を詰める */
  body:is(.page-template-page-kintone-landing-rich,
          .page-template-page-kintone-landing-rich-php) .l-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* ログイン中は管理バー分だけヒーローに余白 */
  @media (min-width: 783px){
    body.admin-bar:is(.page-template-page-kintone-landing-rich,
                      .page-template-page-kintone-landing-rich-php) .kl-hero { margin-top: 32px; }
  }
  @media (max-width: 782px){
    body.admin-bar:is(.page-template-page-kintone-landing-rich,
                      .page-template-page-kintone-landing-rich-php) .kl-hero { margin-top: 46px; }
  }
  
  /* もしフッターも消すなら追加（任意）
  body:is(.page-template-page-kintone-landing-rich,.page-template-page-kintone-landing-rich-php) .l-footer { display:none !important; }
  */
  
  /* ==== LP markup compatibility patch ==== */
  
  /* Hero: 背景画像版 */
  .kl-hero--image{
    position:relative; background:center/cover no-repeat;
    min-height:420px; display:flex; align-items:center;
  }
  @media (min-width:768px){ .kl-hero--image{ min-height:560px; } }
  .kl-hero--image::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(255,255,255,.7) 0%,
                                     rgba(255,255,255,.35) 40%,
                                     rgba(255,255,255,0) 80%);
  }
  .kl-hero__inner{ position:relative; padding:64px 0 80px; }
  
  /* 共通グリッド（.kl-grid） */
  .kl-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
  .kl-grid--2{ grid-template-columns:repeat(1,1fr); }
  .kl-grid--4{ grid-template-columns:repeat(2,1fr); }
  @media (min-width:768px){
    .kl-grid--2{ grid-template-columns:repeat(2,1fr); }
    .kl-grid--4{ grid-template-columns:repeat(4,1fr); }
  }
  
  /* ミニカード（お任せください！） */
  .kl-miniCard{
    background:#fff; border:1px solid #eef1f5; border-radius:14px;
    padding:16px; text-align:center; box-shadow:0 4px 14px rgba(16,24,40,.06);
  }
  .kl-miniCard__icon{ display:block; margin:0 auto 8px; }
  .kl-miniCard__body{ font-weight:700; }
  
  /* 痛み枠・リスト */
  .kl-card{ background:#fff; border:1px solid #eef1f5; border-radius:16px;
    padding:20px; box-shadow:0 6px 20px rgba(16,24,40,.06); }
  .kl-list{ list-style:none; margin:0; padding:0; }
  .kl-list--checks li{ position:relative; padding-left:28px; margin:.5rem 0; }
  .kl-list--checks li::before{
    content:""; position:absolute; left:0; top:.35em; width:18px; height:18px;
    border-radius:50%; background:var(--brand); box-shadow:inset 0 0 0 2px #fff;
  }
  
  /* サービス（.kl-serviceBox 系に対応） */
  .kl-serviceGrid{ align-items:start; }
  .kl-serviceBox{
    background:#fff; border:1px solid #eef1f5; border-radius:16px; padding:20px;
    box-shadow:0 8px 24px rgba(16,24,40,.08);
  }
  .kl-serviceBox--alt{ background:linear-gradient(180deg,#fff,#fffaf6); }
  .kl-serviceBox__title{ font-size:1.2rem; font-weight:800; margin:0 0 8px; }
  .kl-serviceBox__lead{ color:#667085; margin:0 0 12px; }
  .kl-serviceBox__fig img{
    width:100%; height:auto; border-radius:12px;
    box-shadow:0 10px 30px rgba(16,24,40,.12);
  }
  
  /* フロー（<ol class="kl-steps"><li class="kl-step">…） */
  .kl-flow__wrap{ display:grid; gap:24px; align-items:start; }
  @media (min-width:960px){ .kl-flow__wrap{ grid-template-columns:1.2fr .8fr; } }
  .kl-steps{ list-style:none; margin:0; padding:0; max-width:48rem; margin-inline:auto; }
  .kl-step{
    position:relative; background:#fff; border:1px solid #eef1f5; border-radius:12px;
    padding:14px 16px 14px 64px; margin:10px 0;
  }
  .kl-step::before{
    content:""; position:absolute; left:16px; top:18px; width:16px; height:16px;
    border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px #e6f0f2;
  }
  .kl-step__num{ font-size:.85rem; color:var(--muted); margin-bottom:4px; }
  .kl-flow__figure img{ width:100%; height:auto; border-radius:12px;
    box-shadow:0 10px 30px rgba(16,24,40,.12); }
  
  /* 画像のはみ出し防止（テーマ差分吸収） */
  .kintone-landing img{ max-width:100%; height:auto; }
  
  /* ===== Reliefs band (orange full-bleed section) ===== */
  .kl-reliefs--band{
    /* ページ端まで広げる（コンテナ内でも全面帯に） */
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: linear-gradient(135deg,#ffd47a 0%, #ff9950 100%);
    padding: 56px 0 72px;
    color:#fff;
    border-radius: 0;
  }
  .kl-reliefs__title--light{
    color:#fff; text-align:center; font-weight:800;
    font-size:1.8rem; letter-spacing:.02em; margin:0 0 24px;
  }
  /* カードグリッド */
  .kl-reliefsGrid{
    display:grid; gap:24px; grid-template-columns: repeat(4,1fr);
  }
  @media (max-width:1024px){ .kl-reliefsGrid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width:599px){  .kl-reliefsGrid{ grid-template-columns: 1fr; } }
  
  .kl-reliefItem{ display:flex; flex-direction:column; gap:14px; }
  
  /* 上段：画像カード */
  .kl-reliefItem__fig{
    background:#fff; border-radius:12px; padding:14px;
    box-shadow:0 8px 24px rgba(16,24,40,.12);
  }
  .kl-reliefItem__fig img{
    width:100%; height:auto; display:block;
    aspect-ratio: 4 / 3; object-fit: cover; border-radius:8px;
  }
  
  /* 下段：付箋メモカード（折り返し角） */
  .kl-reliefItem__note{
    position:relative; border-radius:12px;
    padding:16px 18px; font-weight:800; line-height:1.9;
    color:#113a3a; background:#ffe6b0;
    box-shadow:0 8px 24px rgba(16,24,40,.12);
  }
  .kl-reliefItem__note::after{
    content:""; position:absolute; top:0; right:0; width:22px; height:22px;
    background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,0));
    border-top-right-radius:12px; clip-path:polygon(0 0,100% 0,100% 100%);
  }
  /* 付箋カラー（Yellow / Blue / Pink / Green） */
  .kl-reliefItem__note--y{ background:#ffd47a; }
  .kl-reliefItem__note--b{ background:#cfe4ff; }
  .kl-reliefItem__note--p{ background:#ffe2de; }
  .kl-reliefItem__note--g{ background:#dff1e3; }
  
  /* ===== Cards pairing (service section image/card look unified) ===== */
  
  /* 共通トークン（好みで数値だけ変えれば両方に反映） */
  :root{
    --kl-card-radius: 16px;
    --kl-card-border: 1px solid #eef1f5;
    --kl-card-shadow: 0 10px 30px rgba(16,24,40,.12);
    --kl-card-pad: 20px;
  }
  
  /* サービスメニュー右側の画像を4:3で統一 */
  .kl-serviceBox__fig img{
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16,24,40,.12);
  }
  
  /* 左のカード（既存）をトークンに合わせる */
  .kl-serviceBox{
    border-radius: var(--kl-card-radius);
    border: var(--kl-card-border);
    box-shadow: var(--kl-card-shadow);
    padding: var(--kl-card-pad);
    background: #fff;
  }
  
  /* 右の画像枠もカードと同一仕様に */
  .kl-serviceBox__fig{
    border-radius: var(--kl-card-radius);
    border: var(--kl-card-border);
    box-shadow: var(--kl-card-shadow);
    padding: var(--kl-card-pad);
    background:#fff;
    display:flex;
    align-items:center;
  }
  
  /* 画像は枠の内側で角丸。影は外枠に任せる（重複防止） */
  .kl-serviceBox__fig img{
    width:100%;
    height:auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: calc(var(--kl-card-radius) - 4px);
    box-shadow: none;
    display:block;
  }
  
  /* 行間や高さの揃え（任意） */
  .kl-serviceGrid{ align-items: stretch; gap: 20px; }
  
  /* ===== Services コンパクト版（PCで 2/3：1/3）===== */
@media (min-width: 960px){
  /* 2カラム → 左2/3・右1/3 に */
  .kintone-landing .kl-services .kl-serviceGrid{
    grid-template-columns: 2fr 1fr;
    align-items: start;
    gap: 16px;
  }

  /* 左カードの余白や行間を少し詰める（任意） */
  .kintone-landing .kl-services .kl-serviceBox{ padding:16px; }
  .kintone-landing .kl-services .kl-serviceBox__title{ margin-bottom:6px; }
  .kintone-landing .kl-services .kl-serviceBox__lead{ font-size:.95rem; margin:0 0 8px; }
  .kintone-landing .kl-services .kl-serviceBox .kl-list li{ margin:.15rem 0; }

  /* 右の画像カードを控えめサイズに（1/3感を出す） */
  .kintone-landing .kl-services .kl-serviceBox__fig{ padding:12px; }
  .kintone-landing .kl-services .kl-serviceBox__fig img{
    aspect-ratio: 3 / 2;
    max-height: clamp(160px, 24vh, 240px);
    object-fit: cover;
    border-radius: calc(var(--kl-card-radius) - 4px);
  }
}

/* もっと右画像を小さくしたい時（PCワイドで ≒29%） */
@media (min-width: 1280px){
  .kintone-landing .kl-services .kl-serviceGrid{
    grid-template-columns: 2.5fr 1fr; /* 左71%：右29% */
  }
}

/* === サービスメニュー見出しを少し大きく/詰める =================== */
.kintone-landing .kl-services .kl-sec__title{
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  letter-spacing: .02em;
  margin: 0 0 18px;
}

/* === 各カードのタイトルとリード文を格上げ ========================= */
/* タイトルを1.2rem → 1.35rem 相当へ */
.kintone-landing .kl-serviceBox__title{
  font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem);
  line-height: 1.3;
}

/* リード文（サブタイトル）を少し大きく & 読みやすい色に */
.kintone-landing .kl-serviceBox__lead{
  font-size: clamp(.95rem, .9rem + .25vw, 1.05rem);
  line-height: 1.7;
  color: #475467; /* 既存 #667085 よりコントラストUP */
  margin-bottom: 10px; /* タイトルとの間隔を控えめに */
}

/* 「伴走支援サービス」側だけもう少しだけ強くしたい場合（任意） */
.kintone-landing .kl-serviceBox--alt .kl-serviceBox__lead{
  font-size: clamp(1rem, .95rem + .3vw, 1.1rem);
}

/* === 導入までの流れ：見出し・本文を強化 ============================= */
.kintone-landing .kl-flow .kl-sec__title{
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  letter-spacing:.02em;
  margin: 0 0 18px;
}

/* Stepカードのタイムライン表現（縦ライン＋番号バッジ） */
.kintone-landing .kl-steps{
  position: relative;
  counter-reset: flowstep;
}
.kintone-landing .kl-steps::before{
  content:"";
  position:absolute; left:32px; top:0; bottom:0; width:2px;
  background:linear-gradient(#d9e2ec,#edf2f7);
}
.kintone-landing .kl-step{
  margin:12px 0;
  padding:16px 16px 16px 80px;         /* 左に余白を増やしてバッジ分を確保 */
  border-radius:12px; border:1px solid #eef1f5;
  background:#fff; box-shadow:0 6px 20px rgba(16,24,40,.06);
}
.kintone-landing .kl-step::before{
  /* 番号バッジ（1,2,3...） */
  content: counter(flowstep);
  counter-increment: flowstep;
  position:absolute; left:18px; top:18px;
  width:32px; height:32px; border-radius:9999px;
  background:var(--brand); color:#fff; font-weight:800;
  display:grid; place-items:center;
  box-shadow:0 0 0 4px #e6f0f2;
}

/* 既存の「STEP 1」ラベルは非表示にして重複を回避 */
.kintone-landing .kl-step__num{ display:none; }

/* Stepタイトルと本文のサイズアップ */
.kintone-landing .kl-step__title{
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  line-height:1.35; margin:0 0 4px;
}
.kintone-landing .kl-step .kl-step__body p{
  font-size: clamp(.95rem, .9rem + .25vw, 1.05rem);
  line-height:1.7; color:#475467;
}

/* 右側の図版もカードと同じ見た目に統一 */
.kintone-landing .kl-flow__figure{
  border-radius: var(--kl-card-radius);
  border: var(--kl-card-border);
  box-shadow: var(--kl-card-shadow);
  padding: var(--kl-card-pad);
  background:#fff;
}
.kintone-landing .kl-flow__figure img{
  width:100%; height:auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: calc(var(--kl-card-radius) - 4px);
}

/* レイアウトの間隔を微調整 */
.kintone-landing .kl-flow__wrap{ gap:20px; align-items:start; }