/*
 * KAKEAI Corporate — 'kk-' design tokens, header, footer, buttons, TOP hero.
 * Source: webflow-export/kakeai/site/index.html, inline <style> embeds
 * (this design is authored per-page in Webflow as embedded CSS, not in
 * the shared kakeai-service-site.webflow.css). Consolidated here once so
 * kk-header / kk-footer render identically on every Corporate page.
 * Copied verbatim (Preserve first — migration-spec.md $26); not refactored.
 */
:root{
  --paper:#ffffff;
  --product:#f5f5f0;        /* 実プロダクトの背景（page-bg） */
  --ink:#141432;            /* ロゴネイビー */
  --ink-2:#3f3f5c;          /* 本文用（レギュレーション: 読ませる文はink-2以上） */
  --ink-3:#73738e;          /* ラベル・キャプション専用（本文には使わない） */
  --line:#e4e3dc;           /* プロダクトのborder */
  --line-strong:#c6c5ba;
  --accent:#244dae;         /* プロダクトのprimary */
  --mint:#93ebec;           /* KVのミント */
  --orb-a:rgba(36,77,174,.42);
  --orb-b:rgba(147,235,236,.6);
  --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --max:1200px;
  /* ==== 台帳v1 機能層トークン ==== */
  --fs-cta:14px; --fs-strong:13.5px; --fs-body:12.5px; --fs-note:11.5px; --fs-caption:10.5px; --fs-badge:10px;
  --fs-ex-ptnum:15px; --fs-ex-alert:15px; --fs-ex-count:13px; --fs-ex-brand:14.5px; --fs-ex-tagline:12.5px;
  /* ==== 台帳v1 暗面白3階調・機能色 ==== */
  --c-w-hi:rgba(255,255,255,.92); --c-w-body:rgba(255,255,255,.80); --c-w-amb:rgba(255,255,255,.62);
  --c-alert:#b3372e; --c-ok:#2f8066; --c-gold:#dbb251;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--gothic);
  color:var(--ink);
  background:var(--paper);
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(147,235,236,.45)}
a{color:inherit;text-decoration:none}
img,svg{display:block}
/* ---------- header ---------- */
.kk-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  padding:20px clamp(20px,4vw,48px);
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.kk-header-in{
  width:100%;max-width:1440px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
}
.kk-header.kk-scrolled{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
  padding-top:12px;padding-bottom:12px;
}
.kk-brand{display:flex;align-items:center;gap:14px}
.kk-brand img{height:34px;width:auto;transition:height .4s ease}
.kk-header.kk-scrolled .kk-brand img{height:26px}
.kk-brand-sub{font-family:var(--mincho);font-weight:500;font-size:var(--fs-body);letter-spacing:.22em;color:var(--ink-2);border-left:1px solid var(--line-strong);padding-left:14px;line-height:1}
.kk-header-actions{display:flex;align-items:center;gap:18px}
.kk-login{font-size:var(--fs-strong);font-weight:500;letter-spacing:.14em;color:var(--ink-2);transition:color .3s;padding:6px 2px}
.kk-login:hover{color:var(--ink)}
.kk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--gothic);font-weight:500;font-size:var(--fs-cta);letter-spacing:.08em;
  height:46px;padding:0 34px;box-sizing:border-box;
  border-radius:2px;border:1px solid var(--ink);
  transition:all .35s cubic-bezier(.2,.7,.2,1);cursor:pointer;background:transparent;color:var(--ink);
  white-space:nowrap;line-height:1;flex:none;
}
.kk-btn .kk-ar{font-size:var(--fs-cta);line-height:1;display:inline-block}
.kk-btn.kk-fill{background:var(--ink);color:#fff}
.kk-btn.kk-fill:hover{background:var(--accent);border-color:var(--accent)}
.kk-btn.kk-ghost:hover{background:var(--ink);color:#fff}
.kk-btn .kk-ar{transition:transform .35s}
.kk-btn:hover .kk-ar{transform:translateX(4px)}
.kk-header .kk-btn{height:48px;padding:0 40px;min-width:168px}
@media(max-width:720px){.kk-brand-sub{display:none}.kk-btn.kk-ghost,.kk-login{display:none}.kk-brand img{height:24px}}
/* ---------- hero ---------- */
.kk-hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;
  padding:clamp(92px,10.5vh,120px) clamp(20px,5vw,64px) 0;
  overflow:hidden;background:var(--paper);
}
.kk-hero-inner{position:relative;max-width:var(--max);margin:auto;width:100%}
/* — ブランドマーク・ウォーターマーク（ヒーロー通過後に出現し、追従） — */
.kk-mark-wm{
  position:fixed;inset:0;z-index:5;
  pointer-events:none;
  opacity:0;                     /* JSがスクロール量で制御 */
  transition:opacity .1s linear;
}
.kk-mark-wm svg{
  width:100%;height:100%;
  animation:wm-breathe 16s ease-in-out infinite;
}
.kk-mark-wm path{fill:var(--ink);fill-opacity:.032}
@keyframes wm-breathe{
  0%,100%{opacity:.45;transform:translateX(-0.6%) scale(1.02)}
  50%{opacity:1;transform:translateX(0.6%) scale(1.02)}
}
/* — ヒーロー：稼働図のゴーストネットワーク（覗き） — */
.kk-heronet{
  position:absolute;z-index:0;top:calc(min(46svh, 47%) + 91px);right:max(-6vw,-90px);
  transform:translateY(-50%);
  width:min(900px,68vw);pointer-events:none;
  opacity:0;animation:fadein 2.4s ease forwards 2.4s;
  -webkit-mask-image:radial-gradient(ellipse 64% 60% at 50% 46%, #000 55%, transparent 94%);
  mask-image:radial-gradient(ellipse 64% 60% at 50% 46%, #000 55%, transparent 94%);
}
.kk-heronet svg{width:100%;height:auto;display:block}
.kk-heronet .kk-hedges path{fill:none;stroke:var(--ink);stroke-width:1;opacity:.13}
.kk-heronet .kk-hmark{display:none} /* edit25①: ヒーローの＜＞はトル */
.kk-heronet .kk-horb{
  transform-box:fill-box;transform-origin:center;
  animation:breathe-ui 5s ease-in-out infinite, orbwalk-h 7s ease-in-out infinite;
}
@keyframes orbwalk-h{0%,100%{translate:-14px 0}50%{translate:14px 0}}
.kk-heronet .kk-hnd{fill:var(--paper);stroke:var(--ink);stroke-width:1;opacity:.4}
.kk-heronet .kk-hsq{opacity:.45}
.kk-heronet .kk-hpk{fill:var(--accent);opacity:0}
@media(max-width:900px){
  .kk-heronet{top:auto;bottom:-2%;right:-18%;width:110vw;transform:none}
}
/* — 観測儀（アーミラリー）：中盤（記憶）用 — */
.kk-armillary{
  position:absolute;z-index:0;top:44%;right:-4%;
  width:min(780px,82vw);aspect-ratio:1;
  transform:translateY(-50%);
  perspective:1400px;transform-style:preserve-3d;
  pointer-events:none;
  opacity:0;animation:armin 2.2s ease forwards 2.2s;
}
@keyframes armin{to{opacity:1}}
.kk-armillary .kk-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(20,20,50,.20);
  transform-style:preserve-3d;
}
.kk-armillary .kk-r1{animation:spinA 52s linear infinite}
.kk-armillary .kk-r2{border-color:rgba(36,77,174,.34);animation:spinB 68s linear infinite}
.kk-armillary .kk-r3{border-color:rgba(20,20,50,.13);animation:spinC 80s linear infinite}
.kk-armillary .kk-r4{inset:11%;border-color:rgba(64,196,199,.55);animation:spinD 44s linear infinite}
.kk-armillary .kk-r5{inset:24%;border-color:rgba(20,20,50,.15);animation:spinE 60s linear infinite}
.kk-armillary .kk-r6{
  inset:4.5%;border:1px dashed rgba(20,20,50,.22);
  animation:spinC 140s linear infinite reverse;
}
@keyframes spinA{from{transform:rotateY(66deg) rotateX(9deg) rotateZ(0deg)}to{transform:rotateY(66deg) rotateX(9deg) rotateZ(360deg)}}
@keyframes spinB{from{transform:rotateY(-58deg) rotateX(20deg) rotateZ(360deg)}to{transform:rotateY(-58deg) rotateX(20deg) rotateZ(0deg)}}
@keyframes spinC{from{transform:rotateX(76deg) rotateZ(0deg)}to{transform:rotateX(76deg) rotateZ(360deg)}}
@keyframes spinD{from{transform:rotateY(26deg) rotateX(-62deg) rotateZ(0deg)}to{transform:rotateY(26deg) rotateX(-62deg) rotateZ(360deg)}}
@keyframes spinE{from{transform:rotateY(-30deg) rotateX(58deg) rotateZ(360deg)}to{transform:rotateY(-30deg) rotateX(58deg) rotateZ(0deg)}}
.kk-armillary .kk-halo{
  position:absolute;inset:31%;border-radius:50%;
  background:radial-gradient(circle at 40% 36%, rgba(84,120,255,.30), transparent 62%),
             radial-gradient(circle at 62% 66%, rgba(147,235,236,.38), transparent 58%);
  filter:blur(30px);
  animation:armbreathe 8s ease-in-out infinite;
}
.kk-armillary .kk-core{
  position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,-50%);
  box-shadow:0 0 22px rgba(36,77,174,.55), 0 0 60px rgba(147,235,236,.45);
  animation:armbreathe 8s ease-in-out infinite;
}
@keyframes armbreathe{0%,100%{opacity:.6}50%{opacity:1}}
@media(max-width:900px){
  .kk-armillary{top:auto;bottom:-6%;right:-16%;width:96vw;transform:none}
}
/* — 打ち消し行 — */
.kk-negate{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em;
  font-size:clamp(17px,2.4vw,26px);
  font-weight:500;letter-spacing:.12em;color:var(--ink-2);
  margin-bottom:clamp(20px,3.2vh,38px);
}
.kk-negate .kk-w{
  position:relative;opacity:0;transform:translateY(12px);
  animation:rise .55s cubic-bezier(.2,.7,.2,1) forwards;
}
.kk-negate .kk-w:nth-child(1){animation-delay:.15s}
.kk-negate .kk-w:nth-child(2){animation-delay:.4s}
.kk-negate .kk-w:nth-child(3){animation-delay:.65s}
.kk-negate .kk-w::after{
  content:"";position:absolute;left:-2%;top:54%;height:1px;width:104%;
  background:var(--ink-3);transform:scaleX(0);transform-origin:left center;
  animation:strike .4s cubic-bezier(.6,0,.2,1) forwards;
}
.kk-negate .kk-w:nth-child(1)::after{animation-delay:1.05s}
.kk-negate .kk-w:nth-child(2)::after{animation-delay:1.2s}
.kk-negate .kk-w:nth-child(3)::after{animation-delay:1.35s}
.kk-negate .kk-not{
  font-family:var(--mincho);font-weight:600;color:var(--ink);
  opacity:0;animation:fadein .8s ease forwards;animation-delay:1.55s;
}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
@keyframes strike{to{transform:scaleX(1)}}
@keyframes fadein{to{opacity:1}}
/* — メインコピー — */
.kk-maincopy{
  position:relative;z-index:1;
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(46px,8.6vw,116px);
  line-height:1.22;letter-spacing:.04em;
  color:var(--ink);
}
.kk-maincopy{line-height:1.16;min-height:calc(2.32em)}
.kk-maincopy .kk-line{display:block;min-height:1.16em}
.kk-hcaret{
  display:inline-block;width:.05em;height:.86em;
  background:var(--accent);margin-left:.05em;vertical-align:-.04em;
  animation:blink 1s steps(1) infinite;
  opacity:0;transition:opacity .3s;
}
.kk-hcaret.kk-on{opacity:1}
.kk-hcaret.kk-off{opacity:0!important}
/* — サブコピー・タグライン — */
.kk-subcopy{
  position:relative;z-index:1;
  margin-top:clamp(22px,3.6vh,40px);
  max-width:41em;
  font-size:clamp(13px,1.3vw,15px);
  line-height:1.95;letter-spacing:.1em;color:var(--ink-2);
  opacity:0;animation:fadein 1.2s ease forwards;animation-delay:2.9s;
}
.kk-subcopy strong{color:var(--ink);font-weight:700}
.kk-tagline-fixed{
  /* 位置はJSが実測で設定（横＝資料DLボタン右端の1/3内側／縦＝ヒーロー打ち消し行の高さ）。下は初期値 */
  position:fixed;top:31vh;right:64px;z-index:45;
  writing-mode:vertical-rl;white-space:nowrap;
  font-family:var(--mincho);font-weight:500;
  font-size:var(--fs-ex-tagline);letter-spacing:.5em;
  color:#fff;mix-blend-mode:difference;
  opacity:0;animation:fadein 1.6s ease forwards 3.1s;
  pointer-events:none;
}
/* differenceブレンド下で、白地上に #244dae（資料DLホバーの青）として見える逆算色 */
.kk-tagline-fixed .kk-tf-bar{color:rgb(219,178,81);font-weight:700}
@media(max-width:1100px){.kk-tagline-fixed{display:none}}
/* — 利用企業 — */
.kk-hero-clients{
  position:relative;z-index:1;
  margin-top:clamp(22px,3.4vh,40px);
  padding-bottom:22px;
  opacity:0;animation:fadein 1.4s ease forwards;animation-delay:3.2s;
}
.kk-clients-head{
  max-width:var(--max);margin:0 auto 22px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.kk-live-strip{display:flex;flex-direction:column;gap:14px}
.kk-live-main{display:flex;flex-direction:column;gap:2px}
.kk-live-label{display:flex;align-items:center;gap:9px;font-size:clamp(10.5px,1.05vw,12px);letter-spacing:.22em;color:var(--ink-2)}
.kk-live-dot{width:8px;height:8px;border-radius:50%;background:#2f8066;animation:uidot2 2s ease-in-out infinite;flex:none}
@keyframes uidot2{0%,100%{opacity:1}50%{opacity:.3}}
.kk-live-count b{font-family:var(--gothic);font-weight:700;font-size:clamp(42px,5vw,68px);letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .25s;line-height:1.15}
.kk-live-count b.kk-tick{color:var(--accent)}
.kk-live-count i{font-style:normal;font-family:var(--gothic);font-size:clamp(14px,1.5vw,18px);margin-left:6px;color:var(--ink-2)}
.kk-live-themes{display:flex;flex-wrap:wrap;gap:8px 10px}
.kk-live-themes .kk-lt{
  display:inline-flex;align-items:baseline;gap:9px;
  font-size:var(--fs-body);font-weight:500;letter-spacing:.08em;color:var(--ink);
  background:var(--product);border:1px solid var(--line);border-radius:99px;
  padding:8px 15px;
}
.kk-live-themes .kk-lt b{font-family:var(--gothic);font-weight:700;font-size:var(--fs-strong);color:var(--accent);font-variant-numeric:tabular-nums;transition:transform .25s}
.kk-live-themes .kk-lt b.kk-tick{transform:translateY(-2px)}
@keyframes dropcue{0%{top:-40%}70%,100%{top:110%}}
.kk-marquee{
  position:relative;overflow:hidden;
  margin:0 calc(-1 * clamp(20px,5vw,64px));
  padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.kk-marquee .kk-track{
  display:flex;align-items:center;gap:clamp(56px,7vw,104px);
  width:max-content;
  animation:slide 47s linear infinite;
  padding-right:clamp(56px,7vw,104px);
}
.kk-marquee img{
  height:clamp(33px,3.8vw,48px);width:auto;
}
@keyframes slide{to{transform:translateX(-50%)}}
/* ---------- section common ---------- */
.kk-section{padding:clamp(90px,13vh,160px) clamp(20px,5vw,64px)}
.kk-section{background:var(--paper)}
.kk-section.kk-gray{background:var(--product)}
.kk-wrap{max-width:var(--max);margin:0 auto}
.kk-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:var(--fs-note);font-weight:500;letter-spacing:.42em;color:var(--ink-3);
  margin-bottom:26px;
}
.kk-eyebrow::before{content:"";width:34px;height:1px;background:var(--ink)}
/* reveal on scroll */
.kk-rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.kk-rv.kk-in{opacity:1;transform:none}
.kk-rv.kk-d1{transition-delay:.12s}.kk-rv.kk-d2{transition-delay:.24s}.kk-rv.kk-d3{transition-delay:.36s}
/* ---------- points intro ---------- */
.kk-pt-intro h2{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(26px,3.7vw,45px);letter-spacing:.06em;line-height:1.65;
}
.kk-intro-grid{
  display:grid;grid-template-columns:1fr minmax(340px,480px);
  gap:clamp(32px,5vw,80px);align-items:start;
}
@media(max-width:920px){.kk-intro-grid{grid-template-columns:1fr}}
.kk-intro-line{
  margin-top:26px;
  font-size:clamp(13px,1.3vw,15px);line-height:2.3;letter-spacing:.1em;color:var(--ink-2);
}
.kk-io-contrast{display:grid;grid-template-columns:1fr 1fr;padding-top:6px}
.kk-io-col{padding:0 clamp(16px,2vw,28px)}
.kk-io-col.kk-out{border-right:1px solid var(--line-strong);padding-left:0}
.kk-io-label{
  font-family:var(--mincho);font-weight:500;
  font-size:clamp(24px,2.8vw,34px);letter-spacing:.2em;color:var(--ink-3);
  margin-bottom:14px;
}
.kk-io-col.kk-inn .kk-io-label{color:var(--accent)}
.kk-io-col ul{list-style:none}
.kk-io-col li{
  border-top:1px solid var(--line);padding:11px 2px;
  font-size:var(--fs-body);font-weight:700;letter-spacing:.1em;color:var(--ink-3);
}
.kk-io-col li span{display:block;font-weight:400;font-size:var(--fs-note);letter-spacing:.12em;color:var(--ink-2);margin-top:3px}
.kk-io-col.kk-inn li{color:var(--ink)}
.kk-io-col.kk-inn li span{color:var(--ink-2)}
.kk-io-col li.kk-hero-li{position:relative;padding-left:18px}
.kk-io-col li.kk-hero-li::before{
  content:"";position:absolute;left:0;top:16px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%, rgba(102,81,184,.9), rgba(36,77,174,.6) 62%, rgba(147,235,236,.5));
}
.kk-arc-lead{
  font-family:var(--gothic);font-size:var(--fs-note);letter-spacing:.24em;color:var(--ink-3);
  margin-right:14px;
}
.kk-pt-arc{
  margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;
  font-family:var(--mincho);font-size:clamp(15px,1.8vw,20px);letter-spacing:.16em;color:var(--ink);
}
.kk-pt-arc .kk-step{padding:6px 2px}
.kk-pt-arc .kk-arr{color:var(--ink-3);font-family:var(--gothic);font-size:.85em;padding:0 8px}
/* ---------- point sections ---------- */
.kk-point .kk-wrap{
  display:grid;grid-template-columns:150px 1fr;gap:clamp(24px,4vw,72px);
  align-items:start;
}
.kk-pt-rail{position:relative;padding-top:8px}
.kk-pt-num{
  font-family:var(--mincho);font-weight:400;
  font-size:var(--fs-ex-ptnum);letter-spacing:.24em;color:var(--ink-3);
}
.kk-pt-num b{
  display:block;font-weight:500;font-size:clamp(44px,5vw,64px);
  letter-spacing:.02em;color:var(--ink);line-height:1.1;margin-top:6px;
}
.kk-pt-stage{
  margin-top:22px;display:inline-block;
  writing-mode:vertical-rl;
  font-size:var(--fs-note);letter-spacing:.44em;color:var(--ink-2);
  border-left:1px solid var(--line-strong);padding-left:12px;
  min-height:110px;
}
.kk-pt-body h3{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(23px,2.75vw,35px);
  line-height:1.8;letter-spacing:.05em;color:var(--ink);
  margin-bottom:clamp(24px,3.5vh,38px);
}
.kk-pt-body h3 .kk-q{color:var(--accent)}
.kk-pt-body h3 .kk-nb,.kk-pt-body h3 .kk-q{display:inline-block}
.kk-pt-body p{
  max-width:41em;font-size:clamp(13.5px,1.35vw,15.5px);
  line-height:2.35;letter-spacing:.1em;color:var(--ink-2);
}
.kk-pt-body p+p{margin-top:1.6em}
.kk-pt-body p strong{color:var(--ink);font-weight:700}
@media(max-width:880px){
  .kk-point .kk-wrap{grid-template-columns:1fr;gap:26px}
  .kk-pt-rail{display:flex;align-items:center;gap:22px;padding-top:0}
  .kk-pt-stage{writing-mode:horizontal-tb;min-height:0;margin-top:0;border-left:none;
    border-top:1px solid var(--line-strong);padding:10px 0 0;letter-spacing:.3em}
  .kk-pt-num b{display:inline;margin-top:0;margin-left:10px}
}
/* ---------- ポイント内 2カラム（テキスト＋証拠） ---------- */
.kk-pt-cols{display:grid;grid-template-columns:1.15fr minmax(280px,410px);gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:1020px){.kk-pt-cols{grid-template-columns:1fr}}
/* ---------- プロダクトUI断片（プロトのDesign Tokens準拠） ---------- */
.kk-ui-frame{
  --ui-bg:#f5f5f0;--ui-surface:#ffffff;--ui-border:#e4e3dc;--ui-border-sub:#efeee9;
  --ui-text:#0f0f0d;--ui-text2:#57564f;--ui-blue:#244dae;--ui-navy:#0f2762;
  --ui-lav:#6651b8;--ui-lav-soft:#f1eefa;--ui-blue-soft:#ebeff9;--ui-green:#2f8066;--ui-green-soft:#eaf3ef;
  font-family:'Inter',system-ui,var(--gothic);
  background:var(--ui-bg);
  border:1px solid var(--ui-border);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(15,39,98,.10);
  overflow:hidden;
  font-feature-settings:normal;
}
.kk-ui-bar{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;background:var(--ui-surface);
  border-bottom:1px solid var(--ui-border);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--ui-navy);
}
.kk-ui-dot{width:7px;height:7px;border-radius:50%;background:var(--ui-green);flex:none}
.kk-ui-dot.kk-live{animation:uidot 2s ease-in-out infinite}
@keyframes uidot{0%,100%{opacity:1}50%{opacity:.35}}
.kk-ui-bar .kk-ui-right{margin-left:auto;font-weight:400;color:var(--ui-text2);letter-spacing:.06em}
.kk-ui-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.kk-ui-cap{
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--ui-text2);
  margin-bottom:8px;
}
.kk-ui-badge{
  font-size:9.5px;font-weight:500;letter-spacing:.06em;
  color:var(--ui-blue);background:var(--ui-blue-soft);
  border-radius:99px;padding:2px 9px;
}
.kk-ui-badge.kk-pulse{animation:badgepulse .6s ease}
@keyframes badgepulse{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.kk-ui-block{background:var(--ui-surface);border:1px solid var(--ui-border-sub);border-radius:10px;padding:14px 16px}
.kk-ui-record{
  font-size:12px;line-height:1.95;letter-spacing:.02em;color:var(--ui-text);
  min-height:4.2em;transition:opacity .45s ease;
}
.kk-ui-record.kk-swap{opacity:0}
.kk-ui-card-step{
  background:var(--ui-surface);border:1px solid var(--ui-border-sub);border-left:3px solid var(--ui-blue);
  border-radius:10px;padding:13px 16px;
  opacity:0;transform:translateY(10px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1) .15s,transform .7s cubic-bezier(.2,.7,.2,1) .15s;
}
.kk-ui-frame.kk-play .kk-ui-card-step{opacity:1;transform:none}
.kk-ui-card-step p{font-size:12.5px;font-weight:700;color:var(--ui-text);letter-spacing:.02em;line-height:1.7}
.kk-ui-chips{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.kk-ui-chips span{
  font-size:10px;letter-spacing:.04em;color:var(--ui-navy);
  background:var(--ui-blue-soft);border-radius:99px;padding:3px 10px;
}
.kk-ui-chips span.kk-ok{color:var(--ui-green);background:var(--ui-green-soft)}
.kk-ui-orbrow{
  display:flex;align-items:flex-start;gap:11px;
  opacity:0;transform:translateY(10px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1) .5s,transform .7s cubic-bezier(.2,.7,.2,1) .5s;
}
.kk-ui-frame.kk-play .kk-ui-orbrow{opacity:1;transform:none}
.kk-ui-orb{
  flex:none;width:26px;height:26px;border-radius:50%;margin-top:2px;
  background:radial-gradient(circle at 36% 32%, rgba(102,81,184,.85), rgba(36,77,174,.55) 62%, rgba(147,235,236,.5));
  animation:breathe-ui 4.5s ease-in-out infinite;
}
@keyframes breathe-ui{0%,100%{transform:scale(1);filter:saturate(1)}50%{transform:scale(1.1);filter:saturate(1.25)}}
.kk-ui-bubble{
  background:var(--ui-lav-soft);border:1px solid #e4ddf5;border-radius:10px;border-top-left-radius:3px;
  padding:11px 14px;font-size:11.5px;line-height:1.85;color:var(--ui-text);letter-spacing:.02em;
}
.kk-ui-bubble b{color:var(--ui-lav)}
.kk-ui-bubble span{display:block;font-size:10.5px;color:var(--ui-text2);margin-top:2px}
.kk-ui-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.kk-ui-list li{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--ui-surface);border:1px solid var(--ui-border-sub);border-radius:10px;
  padding:12px 14px;font-size:11.5px;line-height:1.85;letter-spacing:.02em;color:var(--ui-text);
}
.kk-ui-list li b{color:var(--ui-navy)}
.kk-ui-list .kk-mk{
  flex:none;margin-top:5px;width:6px;height:6px;border-radius:50%;background:var(--ui-blue);
}
.kk-ui-list .kk-mk.kk-amber{background:#c97828}
.kk-ui-ga-item{
  background:var(--ui-surface);border:1px solid var(--ui-border-sub);border-radius:10px;
  padding:13px 16px;
}
.kk-ui-ga-item .kk-tag{
  display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  border-radius:99px;padding:2px 10px;margin-bottom:7px;
}
.kk-ui-ga-item .kk-tag.kk-st{color:var(--ui-green);background:var(--ui-green-soft)}
.kk-ui-ga-item .kk-tag.kk-gw{color:#8f4f16;background:#faf0e4}
.kk-ui-ga-item h4{font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--ui-text);margin-bottom:4px}
.kk-ui-ga-item p{font-size:11px;line-height:1.9;letter-spacing:.02em;color:var(--ui-text2)}
.kk-ui-foot{
  font-size:10px;letter-spacing:.06em;color:var(--ui-text2);
  padding:0 2px;
}
.kk-ui-caption{
  margin-top:14px;font-family:var(--gothic);
  font-size:11px;letter-spacing:.2em;color:var(--ink-3);
  display:flex;align-items:center;gap:10px;
}
.kk-ui-caption::before{content:"";width:22px;height:1px;background:var(--line-strong)}
/* ---------- 細線の図解（③・⑤） ---------- */
.kk-dgm{width:100%;height:auto}
.kk-dgm .kk-ln{
  fill:none;stroke:var(--ink);stroke-width:1;opacity:.75;
  stroke-dasharray:900;stroke-dashoffset:900;
  transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1) .2s;
}
.kk-dgm.kk-in .kk-ln{stroke-dashoffset:0}
.kk-dgm .kk-ln.kk-soft{opacity:.35}
.kk-dgm .kk-nd{opacity:0;transition:opacity .8s ease}
.kk-dgm.kk-in .kk-nd{opacity:1}
.kk-dgm.kk-in .kk-n1{transition-delay:.9s}
.kk-dgm.kk-in .kk-n2{transition-delay:1.25s}
.kk-dgm.kk-in .kk-n3{transition-delay:1.6s}
.kk-dgm.kk-in .kk-n4{transition-delay:1.95s}
.kk-dgm.kk-in .kk-n5{transition-delay:2.3s}
.kk-dgm text{font-family:var(--gothic)}
.kk-dgm .kk-t-main{font-size:13px;font-weight:700;letter-spacing:2px;fill:var(--ink)}
.kk-dgm .kk-t-sub{font-size:10px;letter-spacing:1.5px;fill:var(--ink-2)}
.kk-dgm .kk-t-note{font-size:9.5px;letter-spacing:1px;fill:var(--ink-3)}
.kk-dgm .kk-arrowhead{fill:var(--ink);opacity:.75}
.kk-dgm .kk-flowdot{opacity:0;transition:opacity 1s ease 2.4s}
.kk-dgm.kk-in .kk-flowdot{opacity:1}
/* ---------- 気配（額縁なしの産物表示） ---------- */
.kk-ghost{display:flex;flex-direction:column;gap:22px;padding:8px 0}
.kk-g-rec{
  font-size:clamp(13px,1.3vw,15px);line-height:2.2;letter-spacing:.08em;color:var(--ink-2);
  min-height:4.4em;transition:opacity .45s ease;
}
.kk-g-rec.kk-swap{opacity:0}
#gRec{transition:opacity .45s ease}
#gRec.kk-swap{opacity:0}
.kk-wcaret{
  display:inline-block;width:1.5px;height:1em;background:var(--accent);
  margin-left:3px;vertical-align:-.12em;animation:blink 1s steps(1) infinite;
}
.kk-g-orbline{
  display:flex;align-items:flex-start;gap:12px;
  font-size:clamp(12.5px,1.25vw,14px);line-height:2;letter-spacing:.08em;color:var(--ink-2);
  opacity:0;transform:translateY(8px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1) .3s,transform .9s cubic-bezier(.2,.7,.2,1) .3s;
}
.kk-ghost.kk-play .kk-g-orbline{opacity:1;transform:none}
.kk-g-subline{
  font-size:clamp(11.5px,1.15vw,13px);line-height:2;letter-spacing:.1em;color:var(--ink-3);
  border-left:1px solid var(--line-strong);padding-left:14px;
  opacity:0;transform:translateY(8px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1) 1.1s,transform .9s cubic-bezier(.2,.7,.2,1) 1.1s;
}
.kk-ghost.kk-play .kk-g-subline{opacity:1;transform:none}
.kk-g-orbline b{color:var(--ink);font-weight:700}
.kk-g-orb{
  flex:none;width:18px;height:18px;border-radius:50%;margin-top:5px;
  background:radial-gradient(circle at 36% 32%, rgba(102,81,184,.85), rgba(36,77,174,.55) 62%, rgba(147,235,236,.5));
  animation:breathe-ui 4.5s ease-in-out infinite;
}
.kk-ghost-roster{display:flex;flex-direction:column}
.kk-ghost-roster .kk-role{
  font-family:var(--gothic);font-weight:700;
  font-size:clamp(14.5px,1.5vw,17px);letter-spacing:.14em;color:var(--ink);
  padding:15px 2px;border-top:1px solid var(--line);
}
.kk-ghost-roster .kk-role span{
  font-family:var(--gothic);font-weight:400;font-size:11px;letter-spacing:.16em;color:var(--ink-3);
  margin-left:16px;
}
.kk-ghost-roster .kk-role.kk-knw{color:var(--accent)}
.kk-ghost-roster .kk-role.kk-knw span{color:var(--ink-2)}
.kk-ghost-roster .kk-role.kk-rest{
  font-family:var(--gothic);font-weight:400;font-size:12px;letter-spacing:.2em;color:var(--ink-3);
  border-bottom:1px solid var(--line);
}
/* ---------- 配属図（POINT02） ---------- */
.kk-deploy-map{position:relative;display:flex;flex-direction:column}
.kk-dm-row{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:15px 2px;border-top:1px solid var(--line)}
.kk-dm-name{font-family:var(--gothic);font-weight:700;font-size:clamp(14.5px,1.5vw,17px);
  letter-spacing:.14em;color:var(--ink)}
.kk-dm-dots{display:inline-flex;gap:14px;flex:none}
.kk-dm-g{display:inline-flex;gap:6px;align-items:center}
.kk-dm-g i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);opacity:.55;flex:none}
.kk-dm-g i.kk-knw{background:var(--accent);opacity:1;
  box-shadow:0 0 0 3px rgba(147,235,236,.45), 0 0 10px rgba(36,77,174,.35)}
.kk-dm-fade{opacity:.35}
.kk-dm-more .kk-dm-name{color:var(--ink-3);font-weight:400;letter-spacing:.3em}
.kk-dm-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:15px 2px 6px;border-top:1px solid var(--line);
  font-family:var(--gothic);font-weight:700;font-size:var(--fs-strong);letter-spacing:.1em;color:var(--accent)}
.kk-dm-key b{font-weight:700;white-space:nowrap}
.kk-dm-key span{white-space:nowrap}
@media(max-width:480px){.kk-dm-key span{white-space:normal}}
.kk-dm-key i.kk-knw{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px rgba(147,235,236,.45)}
.kk-dm-key span{font-weight:400;font-size:var(--fs-note);letter-spacing:.12em;color:var(--ink-2)}
@keyframes dm-twinkle{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes dm-drop{0%{top:-30px;opacity:0}10%{opacity:1}82%{opacity:1}100%{top:100%;opacity:0}}
.kk-dm-g i{animation:dm-twinkle var(--tw,3.4s) ease-in-out infinite var(--twd,0s)}
.kk-dm-g i.kk-hit{background:var(--accent);
  box-shadow:0 0 0 3px rgba(147,235,236,.6),0 0 12px rgba(36,77,174,.75);
  transition:box-shadow .16s ease, background .16s ease}
.kk-dm-rain{position:absolute;top:10px;bottom:86px;right:2px;width:226px;pointer-events:none;overflow:hidden}
.kk-dm-drop{position:absolute;width:2px;height:30px;border-radius:2px;opacity:0;
  background:linear-gradient(180deg, rgba(36,77,174,0), rgba(36,77,174,.9) 55%, rgba(36,77,174,0));
  animation:dm-drop var(--dd,3.2s) cubic-bezier(.5,0,.7,1) infinite var(--ddl,0s)}
@keyframes dm-rise{0%{top:100%;opacity:0}10%{opacity:1}82%{opacity:1}100%{top:-30px;opacity:0}}
.kk-dm-drop.kk-up{background:linear-gradient(0deg, rgba(36,77,174,0), rgba(36,77,174,.9) 55%, rgba(36,77,174,0));
  animation-name:dm-rise}
.kk-dm-rest{font-family:var(--gothic);font-weight:400;font-size:var(--fs-body);letter-spacing:.2em;color:var(--ink-3);
  padding:10px 2px 14px;border-bottom:1px solid var(--line)}
.kk-g-tag{
  font-size:10.5px;font-weight:700;letter-spacing:.3em;
}
.kk-g-tag.kk-st{color:#2f8066}
.kk-g-tag.kk-gw{color:#8f4f16}
.kk-gm-item{transition:opacity .55s ease}
.kk-gm-item.kk-swap{opacity:0}
.kk-gm-t{
  font-family:var(--gothic);font-weight:700;
  font-size:clamp(14.5px,1.6vw,18px);line-height:1.9;letter-spacing:.1em;color:var(--ink);
  margin:8px 0 8px;
}
.kk-gm-b{
  font-size:clamp(12px,1.2vw,13.5px);line-height:2.2;letter-spacing:.08em;color:var(--ink-2);
  max-width:36em;
}
/* ---------- 統合ステージ：ある一組の、ひと月 ---------- */
.kk-stage-head h2{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(30px,4.6vw,54px);letter-spacing:.06em;line-height:1.6;
}
.kk-stage-head p{
  margin-top:24px;max-width:42em;
  font-size:clamp(13px,1.3vw,15px);line-height:2.3;letter-spacing:.1em;color:var(--ink-2);
}
.kk-stage-grid{
  margin-top:clamp(44px,7vh,72px);
  display:grid;grid-template-columns:minmax(220px,300px) 1fr;
  gap:clamp(28px,4vw,72px);align-items:start;
}
@media(max-width:920px){.kk-stage-grid{grid-template-columns:1fr}}
.kk-stage-nav{display:flex;flex-direction:column}
.kk-stage-step{
  position:relative;text-align:left;background:none;border:none;cursor:pointer;
  padding:17px 2px 17px 26px;border-top:1px solid var(--line);
  transition:opacity .4s ease;
  font-family:var(--gothic);
}
.kk-stage-step:last-child{border-bottom:1px solid var(--line)}
.kk-stage-step::before{
  content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;
  border:1px solid var(--line-strong);background:transparent;
  transition:background .4s ease,border-color .4s ease;
}
.kk-stage-step .kk-st-when{
  display:block;font-size:var(--fs-caption);letter-spacing:.3em;color:var(--ink-3);margin-bottom:4px;
  transition:color .4s ease;
}
.kk-stage-step .kk-st-who{
  display:block;font-family:var(--mincho);font-weight:600;
  font-size:clamp(15px,1.5vw,18px);letter-spacing:.12em;color:var(--ink-3);
  transition:color .4s ease;
}
.kk-stage-step.kk-active::before{background:var(--accent);border-color:var(--accent)}
.kk-stage-step.kk-active .kk-st-when{color:var(--accent)}
.kk-stage-step.kk-active .kk-st-who{color:var(--ink)}
.kk-stage-step:hover .kk-st-who{color:var(--ink)}
.kk-stage-window .kk-ui-bar .kk-ui-right{transition:opacity .3s ease}
.kk-stage-panels{display:grid;position:relative}
.kk-stage-panel{
  grid-area:1/1;
  opacity:0;transform:translateY(6px);
  transition:opacity .6s ease,transform .6s ease;
  pointer-events:none;
  padding:16px;display:flex;flex-direction:column;gap:12px;
}
.kk-stage-panel.kk-active{opacity:1;transform:none;pointer-events:auto}
.kk-stage-progress{
  height:2px;background:var(--line);position:relative;overflow:hidden;
}
.kk-stage-progress i{
  position:absolute;inset:0;background:var(--accent);transform-origin:left;
  transform:scaleX(0);
}
.kk-stage-progress i.kk-run{animation:stgrun var(--stage-ms,5600ms) linear forwards}
@keyframes stgrun{to{transform:scaleX(1)}}
/* ---------- 立場の宣言 ---------- */
.kk-declare h2{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(30px,4.2vw,52px);letter-spacing:.05em;line-height:1.55;
}
.kk-declare h2 .kk-nb,.kk-pt-intro h2 .kk-nb{display:inline-block}
.kk-declare-grid{
  display:grid;grid-template-columns:1fr minmax(340px,520px);
  gap:clamp(32px,5vw,88px);align-items:start;
}
@media(max-width:920px){.kk-declare-grid{grid-template-columns:1fr}}
.kk-declare-close{
  margin-top:26px;
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(15px,1.9vw,21px);letter-spacing:.14em;line-height:2;color:var(--ink-2);
}
.kk-declare-rows{padding-top:6px}
.kk-d-row{border-top:1px solid var(--line-strong);padding:22px 2px}
.kk-d-row:last-child{border-bottom:1px solid var(--line-strong)}
.kk-d-label{
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.32em;color:var(--ink-3);
  margin-bottom:10px;
}
.kk-d-text{
  font-size:clamp(13px,1.3vw,14.5px);line-height:2.15;letter-spacing:.1em;color:var(--ink);
}
.kk-declare-stats{
  margin-top:clamp(48px,7vh,76px);
  border-top:1px solid var(--line-strong);
  padding-top:clamp(32px,5vh,48px);
}
.kk-ds-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:clamp(26px,4vh,38px)}
.kk-ds-title{font-size:var(--fs-body);font-weight:700;letter-spacing:.24em;color:var(--ink)}
.kk-ds-sub{font-size:var(--fs-caption);letter-spacing:.22em;color:var(--ink-3)}
.kk-ds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,32px)}
@media(max-width:760px){
  .kk-ds-grid{grid-template-columns:1fr;gap:0}
  .kk-ds-item{border-left:none!important;border-top:1px solid var(--line);padding:18px 2px!important}
}
.kk-ds-item{border-left:1px solid var(--line-strong);padding-left:clamp(18px,2.4vw,30px)}
.kk-ds-label{font-size:clamp(12px,1.2vw,14px);font-weight:500;letter-spacing:.2em;color:var(--ink-2);margin-bottom:8px}
.kk-ds-num{
  font-family:var(--gothic);font-weight:700;color:var(--ink);
  font-size:clamp(44px,5.8vw,82px);line-height:1.15;letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.kk-ds-num .kk-plus{font-size:.42em;color:var(--accent);vertical-align:.42em;margin-right:.05em;font-weight:700}
.kk-ds-num .kk-pct{font-size:.4em;color:var(--ink-2);margin-left:.06em}
/* ---------- 時間の一撃 ---------- */
.kk-time{
  background:var(--ink);color:#fff;
  position:relative;overflow:hidden;
}
.kk-time .kk-eyebrow{color:rgba(255,255,255,.45)}
.kk-time .kk-eyebrow::before{background:var(--mint)}
.kk-time-big{
  font-family:var(--mincho);font-weight:800;
  font-size:clamp(46px,8.6vw,116px);letter-spacing:.03em;line-height:1.3;
  color:#fff;
}
.kk-time-big .kk-num{font-variant-numeric:tabular-nums}
.kk-time-body{
  margin-top:36px;max-width:40em;
  font-size:clamp(13.5px,1.35vw,15.5px);line-height:2.4;letter-spacing:.1em;
  color:rgba(255,255,255,.72);
}
.kk-time-body strong{color:#fff;font-weight:700}
.kk-time-pivot{
  margin-top:clamp(40px,6vh,60px);
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(18px,2.6vw,28px);letter-spacing:.14em;line-height:2;
  color:#fff;
}
.kk-time-pivot .kk-dim{color:rgba(255,255,255,.5)}
.kk-time .kk-armillary{
  top:56%;right:-10%;width:min(600px,66vw);
  opacity:0;animation:armin 2.4s ease forwards .4s;
}
/* 中盤は「静かな同心」——傾きを揃えた層構造＋周回する衛星（記憶が巡る） */
.kk-time .kk-armillary .kk-ring{border-color:rgba(255,255,255,.22)}
.kk-time .kk-armillary .kk-r1{inset:0;animation:spinT1 70s linear infinite}
.kk-time .kk-armillary .kk-r2{inset:14%;border-color:rgba(147,235,236,.5);animation:spinT2 56s linear infinite}
.kk-time .kk-armillary .kk-r3{inset:28%;border-color:rgba(255,255,255,.14);animation:spinT1 90s linear infinite reverse}
.kk-time .kk-armillary .kk-r4{inset:42%;border-color:rgba(147,235,236,.7);animation:spinT2 40s linear infinite reverse}
.kk-time .kk-armillary .kk-r5{inset:56%;border-color:rgba(255,255,255,.12);animation:spinT1 110s linear infinite}
.kk-time .kk-armillary .kk-r6{display:none}
@keyframes spinT1{from{transform:rotateX(64deg) rotateY(-12deg) rotateZ(0deg)}to{transform:rotateX(64deg) rotateY(-12deg) rotateZ(360deg)}}
@keyframes spinT2{from{transform:rotateX(64deg) rotateY(-12deg) rotateZ(360deg)}to{transform:rotateX(64deg) rotateY(-12deg) rotateZ(0deg)}}
.kk-time .kk-armillary .kk-sat{
  position:absolute;inset:14%;border-radius:50%;
  animation:orbit2d 16s linear infinite;
}
.kk-time .kk-armillary .kk-sat::before{
  content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 14px rgba(147,235,236,.9);
}
@keyframes orbit2d{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.kk-time .kk-armillary .kk-halo{
  background:radial-gradient(circle at 40% 36%, rgba(147,235,236,.35), transparent 60%),
             radial-gradient(circle at 62% 66%, rgba(84,120,255,.3), transparent 58%);
}
.kk-time .kk-armillary .kk-core{background:var(--mint);box-shadow:0 0 22px rgba(147,235,236,.7), 0 0 70px rgba(147,235,236,.4)}
.kk-rules-head{
  margin-top:clamp(56px,8vh,84px);
  display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;
  border-top:1px solid var(--line-strong);padding-top:clamp(30px,5vh,44px);
}
.kk-rules-head h3{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(20px,2.7vw,31px);letter-spacing:.08em;color:var(--ink);
}
.kk-rules-head p{font-size:var(--fs-note);letter-spacing:.14em;color:var(--ink-3);line-height:2}
.kk-rules-grid{
  margin-top:30px;
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(40px,5vw,72px);row-gap:0;
}
@media(max-width:880px){.kk-rules-grid{grid-template-columns:1fr}}
.kk-rule-block{
  border-top:1px solid var(--ink);
  padding:24px 2px 26px;
}
.kk-rule-block .kk-r-no{
  display:flex;align-items:center;gap:9px;
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.32em;color:var(--ink);
  margin-bottom:12px;
}
.kk-rule-block .kk-r-no::before{
  content:"";width:7px;height:7px;background:var(--accent);flex:none;
}
.kk-rule-block h4{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(17px,1.9vw,21px);letter-spacing:.08em;line-height:1.75;color:var(--ink);
}
.kk-rule-block p:not(.kk-r-no){
  margin-top:9px;font-size:var(--fs-body);line-height:2.05;letter-spacing:.06em;color:var(--ink-2);
}
/* ---------- team ---------- */
.kk-team{text-align:left}
.kk-team .kk-big{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(28px,4.6vw,54px);line-height:1.7;letter-spacing:.06em;
}
.kk-team .kk-big em{font-style:normal;font-weight:800;font-size:1.28em;letter-spacing:.02em}
.kk-team .kk-note{
  margin-top:24px;max-width:40em;
  font-family:var(--gothic);font-weight:700;
  font-size:clamp(15px,1.7vw,19px);line-height:2.05;letter-spacing:.1em;color:var(--ink);
}
.kk-team-grid{
  margin-top:clamp(44px,7vh,72px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
@media(max-width:1080px){.kk-team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kk-team-grid{grid-template-columns:1fr}}
.kk-team-card{
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  padding:30px 26px 26px;
  display:flex;flex-direction:column;
  transition:border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.kk-team-card:hover{border-color:var(--line-strong);box-shadow:0 12px 32px rgba(20,20,50,.07);transform:translateY(-3px)}
.kk-tc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}
.kk-tc-name{font-family:var(--mincho);font-weight:700;font-size:clamp(17px,1.6vw,19px);letter-spacing:.08em}
.kk-tc-count{font-family:var(--mincho);font-weight:500;font-size:var(--fs-ex-count);letter-spacing:.1em;color:var(--accent);white-space:nowrap}
.kk-tc-when{font-size:var(--fs-caption);letter-spacing:.26em;color:var(--ink-3);margin-bottom:18px}
.kk-tc-members{list-style:none;display:flex;flex-direction:column;gap:14px}
.kk-tc-members li b{display:block;font-size:var(--fs-strong);font-weight:700;letter-spacing:.08em;color:var(--ink);margin-bottom:3px}
.kk-tc-members li span{display:block;font-size:var(--fs-note);line-height:1.85;letter-spacing:.06em;color:var(--ink-2)}
/* ---------- 稼働図（Live Operations Map） ---------- */
.kk-opsmap{
  margin-top:clamp(40px,6vh,60px);
  background:var(--ink);
  border-radius:2px;
  overflow:hidden;
  position:relative;
  box-shadow:0 24px 64px rgba(15,15,40,.28);
}
.kk-opsmap .kk-ops{max-width:1280px;margin:0 auto}

.kk-ops-bar{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:16px clamp(18px,2.6vw,30px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.kk-ops-live{
  display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(13px,1.4vw,16px);font-weight:700;letter-spacing:.26em;color:#7fe3e0;
}
.kk-ops-live i{width:9px;height:9px;border-radius:50%;background:#7fe3e0;animation:uidot2 1.8s ease-in-out infinite;flex:none}
.kk-ops-title{font-size:clamp(13px,1.4vw,16px);font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.95)}
.kk-ops-note{font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.4);margin-left:auto}
.kk-ops{width:100%;height:auto;display:block;padding:clamp(8px,1.4vw,18px) clamp(6px,1vw,14px) 4px}
.kk-ops-foot{
  display:flex;flex-wrap:wrap;gap:8px 26px;
  padding:14px clamp(18px,2.6vw,30px) 18px;
  border-top:1px solid rgba(255,255,255,.08);
}
.kk-ops-foot span{font-size:var(--fs-note);letter-spacing:.12em;color:var(--c-w-body);line-height:2;font-weight:500}
.kk-ops-bar .kk-of-src{margin-left:auto;color:#7fe3e0;font-weight:700;font-size:var(--fs-note);letter-spacing:.12em}
@media(max-width:700px){.kk-ops-foot .kk-of-src{margin-left:0}}
/* エッジ（幹線／毛細の2階層） */
.kk-ops .kk-edge{
  fill:none;
  transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1);
}
.kk-opsmap.kk-in .kk-ops .kk-edge{stroke-dashoffset:0!important}
.kk-ops .kk-k-trunk{stroke-width:1.7}
.kk-ops .kk-k-cap{stroke-width:1.3;opacity:.7}
.kk-ops .kk-k-out{stroke-width:1;stroke-dasharray:none}
.kk-ops .kk-e-live{stroke:rgba(167,149,242,.6)}
.kk-ops .kk-e-live.kk-k-cap{stroke:rgba(167,149,242,.28)}
.kk-ops .kk-e-ban{stroke:rgba(143,169,255,.55)}
.kk-ops .kk-e-ban.kk-k-cap{stroke:rgba(143,169,255,.24)}
.kk-ops .kk-e-kan{stroke:rgba(255,255,255,.36)}
.kk-ops .kk-e-kan.kk-k-cap{stroke:rgba(255,255,255,.18)}
.kk-ops .kk-e-get{stroke:rgba(127,227,224,.55)}
.kk-ops .kk-e-get.kk-k-cap{stroke:rgba(127,227,224,.22)}
.kk-ops .kk-e-mach{stroke:rgba(200,205,220,.45)}
.kk-ops .kk-e-mach.kk-k-cap{stroke:rgba(200,205,220,.20)}
.kk-ops .kk-k-out{stroke:rgba(255,255,255,.22)!important}
/* 幹線ラベル（運ばれる文書名） */
.kk-ops .kk-elabel{
  font-family:var(--gothic);font-size:10.5px;font-weight:700;letter-spacing:2px;
  fill:rgba(255,255,255,.72);
  opacity:0;transition:opacity 1s ease;
  paint-order:stroke;stroke:#141432;stroke-width:4px;stroke-linejoin:round;
}
.kk-opsmap.kk-in .kk-ops .kk-elabel{opacity:1}
.kk-ops .kk-el-live{fill:#c7bcf5}
.kk-ops .kk-el-ban{fill:#b7c7ff}
.kk-ops .kk-el-get{fill:#a7ecea}
.kk-ops .kk-el-mach{fill:#d6dae8}
/* パケット */
.kk-ops .kk-pk{opacity:0}
.kk-ops .kk-pk-live{fill:#a795f2}
.kk-ops .kk-pk-ban{fill:#8fa9ff}
.kk-ops .kk-pk-kan{fill:#d3d6ea}
.kk-ops .kk-pk-get,.kk-ops .kk-pk-ret{fill:#7fe3e0}
/* ふたり */
.kk-ops .kk-pmark{
  filter:brightness(0) invert(1);
  opacity:0;transition:opacity 1.1s ease .15s;
}
.kk-opsmap.kk-in .kk-ops .kk-pmark{opacity:.56}
.kk-ops .kk-pair-orb{
  transform-box:fill-box;transform-origin:center;
  animation:breathe-ui 4.5s ease-in-out infinite;
}
.kk-ops .kk-pk-cap{opacity:0}
.kk-ops .kk-plabel{
  font-family:var(--gothic);font-size:12px;font-weight:700;letter-spacing:3px;fill:rgba(255,255,255,.75);
  opacity:0;transition:opacity .8s ease .9s;
}
.kk-opsmap.kk-in .kk-ops .kk-plabel{opacity:1}
/* 層ラベル */
.kk-ops .kk-tname{
  font-family:var(--gothic);font-size:12.5px;font-weight:700;letter-spacing:2.5px;
  opacity:0;transition:opacity .9s ease 1.2s;
}
.kk-opsmap.kk-in .kk-ops .kk-tname{opacity:1}
.kk-ops .kk-t-live{fill:#a795f2}
.kk-ops .kk-t-ban{fill:#8fa9ff}
.kk-ops .kk-t-kan{fill:rgba(255,255,255,.75)}
.kk-ops .kk-t-get{fill:#7fe3e0}
.kk-ops .kk-twhen{
  font-family:var(--gothic);font-size:10.5px;letter-spacing:2px;fill:rgba(255,255,255,.55);
  opacity:0;transition:opacity .9s ease 1.35s;
}
.kk-opsmap.kk-in .kk-ops .kk-twhen{opacity:1}
/* ノード */
.kk-ops .kk-node{
  opacity:0;
  transition:opacity .7s ease;
}
.kk-opsmap.kk-in .kk-ops .kk-node{opacity:1}
.kk-ops .kk-node .kk-shell{
  fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.30);stroke-width:1;
}
.kk-ops .kk-nd-live .kk-shell{stroke:rgba(167,149,242,.65)}
.kk-ops .kk-nd-ban .kk-shell{stroke:rgba(143,169,255,.55)}
.kk-ops .kk-nd-get .kk-shell{stroke:rgba(127,227,224,.6)}
.kk-ops .kk-nd-mach .kk-mshell{
  fill:rgba(200,205,220,.05);stroke:rgba(200,205,220,.55);stroke-width:1;
}
.kk-ops .kk-nsub{
  font-family:var(--gothic);font-size:11px;letter-spacing:.8px;fill:rgba(255,255,255,.58);
  opacity:0;transition:opacity .8s ease;
}
.kk-opsmap.kk-in .kk-ops .kk-nsub{opacity:1}
.kk-gl-mach line{stroke:rgba(200,205,220,.85)}
.kk-ops .kk-nlabel{
  font-family:var(--gothic);font-size:12px;font-weight:500;letter-spacing:1.5px;
  fill:rgba(255,255,255,.88);
  opacity:0;transition:opacity .8s ease;
}
.kk-opsmap.kk-in .kk-ops .kk-nlabel{opacity:1}
/* グリフ（職務の体現） */
.kk-ops .kk-gl,.kk-ops .kk-gl line,.kk-ops .kk-gl path,.kk-ops .kk-gl rect,.kk-ops .kk-gl circle{
  stroke:rgba(255,255,255,.9);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.kk-ops .kk-gl .kk-fill,.kk-ops .kk-gl-dot{fill:rgba(255,255,255,.9);stroke:none}
/* 書記：行が書き直され続ける */
.kk-gl-write line{transform-origin:left center;transform-box:fill-box}
.kk-gl-write line:nth-child(1){animation:glwrite 3.4s ease-in-out infinite}
.kk-gl-write line:nth-child(2){animation:glwrite 3.4s ease-in-out infinite .5s}
.kk-gl-write line:nth-child(3){animation:glwrite 3.4s ease-in-out infinite 1s}
@keyframes glwrite{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.55)}}
/* オーブ：呼吸 */
.kk-gl-orbring{animation:glring 4s ease-in-out infinite}
@keyframes glring{0%,100%{opacity:.5}50%{opacity:1}}
/* 選び手：候補の一つが選ばれる */
.kk-gl-select .kk-pick{animation:glpick 2.8s ease-in-out infinite;stroke:#8fa9ff}
@keyframes glpick{0%,100%{fill:rgba(143,169,255,0)}50%{fill:rgba(143,169,255,.55)}}
/* 事前：入り方の矢印 */
.kk-gl-pre .kk-mv{animation:glmv 2.4s ease-in-out infinite}
@keyframes glmv{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
/* 事後：チェックが繰り返し描かれる */
.kk-gl-check{animation:glcheck 3.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes glcheck{0%{stroke-dashoffset:30}40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-30}}
/* 秘書：時計 */
.kk-gl .kk-hand{
  transform-box:fill-box;transform-origin:center bottom;
  animation:glhand 8s linear infinite;
}
@keyframes glhand{to{transform:rotate(360deg)}}
/* 観測：レーダー */
.kk-gl-radar{animation:glradar 3s ease-out infinite}
@keyframes glradar{0%{opacity:1}70%{opacity:.35}100%{opacity:1}}
/* 関係：ふたつの点が近づく */
.kk-gl-bond .kk-bl{animation:glbl 3.6s ease-in-out infinite}
.kk-gl-bond .kk-br{animation:glbr 3.6s ease-in-out infinite}
@keyframes glbl{0%,100%{transform:translateX(0)}50%{transform:translateX(2.5px)}}
@keyframes glbr{0%,100%{transform:translateX(0)}50%{transform:translateX(-2.5px)}}
/* 主体性：針が上がる */
.kk-gl .kk-needle{transform-origin:0px 6px;animation:glneedle 4s ease-in-out infinite}
@keyframes glneedle{0%,100%{transform:rotate(-38deg)}55%,70%{transform:rotate(30deg)}}
/* 司書：本が棚に収まる */
.kk-gl .kk-book{animation:glbook 3.8s ease-in-out infinite;fill:rgba(255,255,255,.25)}
@keyframes glbook{0%,20%{transform:translateY(-9px);opacity:0}45%,85%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
/* 記憶：層が積み上がる */
.kk-gl-layers .kk-top{animation:gltop 3.6s ease-in-out infinite}
@keyframes gltop{0%,25%{opacity:0;transform:translateY(-4px)}55%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}
/* 得意：マトリクスが灯る */
.kk-gl-matrix .kk-c{fill:rgba(255,255,255,.10);stroke:rgba(255,255,255,.35)}
.kk-gl-matrix .kk-c0{animation:glcell 4.2s ease-in-out infinite .2s}
.kk-gl-matrix .kk-c4{animation:glcell 4.2s ease-in-out infinite .9s}
.kk-gl-matrix .kk-c5{animation:glcell 4.2s ease-in-out infinite 1.6s}
.kk-gl-matrix .kk-c7{animation:glcell 4.2s ease-in-out infinite 2.3s}
@keyframes glcell{0%,100%{fill:rgba(255,255,255,.10)}50%{fill:rgba(127,227,224,.75)}}
/* 編纂：断片が文書へ */
.kk-gl-compile .kk-s1{animation:glconv 3.4s ease-in-out infinite}
.kk-gl-compile .kk-s2{animation:glconv 3.4s ease-in-out infinite .4s}
.kk-gl-compile .kk-s3{animation:glconv 3.4s ease-in-out infinite .8s}
@keyframes glconv{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(5px);opacity:.4}}
/* 成長：曲線が描かれる */
.kk-gl-curve{animation:glcurve 4.4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes glcurve{0%{stroke-dashoffset:32}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-32}}
/* 組織知：粒が型になる */
.kk-gl-funnel .kk-d1{fill:rgba(255,255,255,.85);stroke:none;animation:gldrop 3s ease-in infinite}
.kk-gl-funnel .kk-d2{fill:rgba(255,255,255,.85);stroke:none;animation:gldrop 3s ease-in infinite .5s}
.kk-gl-funnel .kk-d3{fill:rgba(255,255,255,.85);stroke:none;animation:gldrop 3s ease-in infinite 1s}
@keyframes gldrop{0%,20%{transform:translateY(0);opacity:1}60%{transform:translateY(9px);opacity:0}100%{opacity:0}}
/* transform基準の明示（SVG要素のCSSアニメ用） */
.kk-gl-select .kk-pick,.kk-gl-bond .kk-bl,.kk-gl-bond .kk-br,.kk-gl .kk-book,.kk-gl-layers .kk-top,
.kk-gl-compile .kk-s1,.kk-gl-compile .kk-s2,.kk-gl-compile .kk-s3,
.kk-gl-funnel .kk-d1,.kk-gl-funnel .kk-d2,.kk-gl-funnel .kk-d3,.kk-gl-pre .kk-mv{
  transform-box:fill-box;transform-origin:center;
}
@media(max-width:700px){
  .kk-ops .kk-nlabel{font-size:17px}
  .kk-ops .kk-tname{font-size:16px}
  .kk-ops .kk-twhen{font-size:13px}
  .kk-ops .kk-plabel{font-size:15px}
  .kk-ops-note{display:none}
}
/* ---------- 監査バンド ---------- */
.kk-opsmap .kk-team-audit{margin-top:0;border-radius:0;box-shadow:none;padding-top:4px}
.kk-team-audit{
  margin-top:22px;
  border-radius:0;background:var(--ink);color:#fff;
  border-radius:2px;
  padding:clamp(28px,4.5vh,42px) clamp(24px,3.5vw,48px);
}
.kk-ta-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:24px;max-width:var(--max);margin-left:auto;margin-right:auto}
.kk-ta-head h3{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(13px,1.4vw,16px);letter-spacing:.12em;color:#fff;
}
.kk-ta-head p{font-size:var(--fs-body);letter-spacing:.14em;color:var(--c-w-body)}
.kk-ta-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:var(--max);margin:0 auto}
@media(max-width:880px){.kk-ta-list{grid-template-columns:1fr}}
.kk-ta-list li{position:relative;padding-left:26px}
.kk-ta-list li::before{
  content:"";position:absolute;left:0;top:3px;
  width:13px;height:13px;border:1px solid rgba(200,205,220,.6);border-radius:3px;
}
.kk-ta-list b{display:block;font-size:13.5px;font-weight:700;letter-spacing:.1em;color:var(--c-w-hi);margin-bottom:6px}
.kk-ta-list span{display:block;font-size:var(--fs-body);line-height:2;letter-spacing:.06em;color:var(--c-w-body)}
.kk-tc-why{
  font-family:var(--mincho);font-weight:600;
  font-size:12.5px;letter-spacing:.12em;color:var(--ink);
  margin:-10px 0 16px;
}
/* ---------- オプション機能群 ---------- */
.kk-options{padding-top:clamp(56px,8vh,84px)}
.kk-opt-cat{
  margin-top:clamp(34px,5vh,50px);
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  font-size:var(--fs-strong);font-weight:700;letter-spacing:.14em;color:var(--ink);
  border-top:1px solid var(--ink);padding-top:18px;
}
.kk-opt-cat span{font-size:var(--fs-note);font-weight:500;letter-spacing:.14em;color:var(--ink-2)}
.kk-eye-grid{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:880px){.kk-eye-grid{grid-template-columns:1fr}}
.kk-eye-card{background:var(--product);border:1px solid var(--line);border-radius:2px;padding:24px 24px 22px}
.kk-ec-tag{
  display:flex;align-items:center;gap:9px;
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.3em;color:var(--accent);margin-bottom:10px;
}
.kk-ec-tag .kk-beta{
  font-size:var(--fs-badge);font-weight:700;letter-spacing:.12em;color:#fff;
  background:#2a9d9f;padding:2px 9px;border-radius:99px;
}
.kk-eye-card h4{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(15.5px,1.25vw,18px);letter-spacing:.08em;line-height:1.7;color:var(--ink);
}
.kk-ec-what{margin-top:10px;font-size:var(--fs-body);line-height:2;letter-spacing:.05em;color:var(--ink-2)}
.kk-ec-so{margin-top:8px;font-size:var(--fs-body);line-height:2;letter-spacing:.05em;color:var(--ink);font-weight:500}
.kk-eye-note{margin-top:14px;font-size:var(--fs-note);letter-spacing:.08em;line-height:2;color:var(--ink-2)}
.kk-opt-groups{margin-top:clamp(40px,6vh,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:880px){.kk-opt-groups{grid-template-columns:1fr}}
.kk-og-card{border:1px solid var(--line);border-radius:2px;padding:20px 22px;background:var(--paper)}
.kk-og-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:4px;
}
.kk-og-head span{
  flex:none;font-size:9.5px;font-weight:700;letter-spacing:.2em;color:#fff;
  background:var(--ink-3);padding:2px 10px;border-radius:99px;
}
.kk-og-card ul{list-style:none}
.kk-og-card li{
  font-size:12.5px;line-height:1.95;letter-spacing:.04em;color:var(--ink-2);
  padding:9px 0;border-bottom:1px solid #f0efe9;
}
.kk-og-card li:last-child{border-bottom:none}
.kk-opt-rows{margin-top:clamp(34px,5vh,50px);border-top:1px solid var(--ink)}
.kk-opt-row{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:14px 2px;border-bottom:1px solid var(--line);
  font-size:var(--fs-strong);font-weight:700;letter-spacing:.1em;color:var(--ink);
}
.kk-opt-row b{font-size:var(--fs-caption);font-weight:700;letter-spacing:.2em;color:var(--accent);flex:none}
.kk-opt-row span{font-size:var(--fs-body);font-weight:700;letter-spacing:.08em;color:var(--ink-2)}
.kk-opt-row .kk-opt-detail{font-weight:400}
.kk-opt-row .kk-opt-t{font-family:var(--mincho);font-weight:700;font-size:clamp(15.5px,1.25vw,18px);letter-spacing:.08em;color:var(--ink)}
.kk-opt-row .kk-opt-t span{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit}
.kk-opt-row .kk-opt-detail{flex-basis:100%;margin-top:2px}
/* ---------- 誠実ブロック ---------- */
.kk-cta-caution{
  margin:clamp(44px,6.5vh,60px) auto 0;max-width:46em;
  background:#fcf3f1;border:1px solid #e3b5ad;border-radius:2px;
  padding:22px 26px 20px;
  text-align:left;
}
.kk-cc-head{
  font-size:var(--fs-ex-alert);font-weight:900;letter-spacing:.12em;color:var(--c-alert);
  margin-bottom:10px;
}
.kk-cc-body{
  font-size:var(--fs-body);line-height:2.1;letter-spacing:.06em;color:var(--ink);
}
/* ---------- 基本機能群 ---------- */
.kk-foundation{padding-top:clamp(56px,8vh,84px);padding-bottom:clamp(48px,7vh,72px)}
.kk-fd-lead{
  margin-top:6px;
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(15px,1.7vw,19px);letter-spacing:.12em;color:var(--ink);
}
.kk-fd-list{
  margin-top:14px;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3vw,48px);
}
@media(max-width:880px){.kk-fd-list{grid-template-columns:1fr}}
.kk-fd-list li{
  font-size:var(--fs-body);line-height:1.9;letter-spacing:.06em;color:var(--ink-2);
  padding:10px 2px;border-bottom:1px solid var(--line);
}
/* ---------- CTA ---------- */
.kk-cta{text-align:center}
.kk-cta-chat{
  min-height:calc(2 * 1.9em);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(23px,3.6vw,42px);letter-spacing:.06em;line-height:1.9;
  color:var(--ink);
}
.kk-cta-chat .kk-typed{white-space:pre-wrap}
.kk-caret{
  display:inline-block;width:2px;height:.95em;
  background:var(--accent);margin-left:4px;vertical-align:-.12em;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.kk-cta-flag{
  margin-top:22px;
  font-family:var(--mincho);font-weight:500;
  font-size:clamp(20px,2.6vw,30px);
  letter-spacing:.3em;padding-left:.3em;
  line-height:1;
}
.kk-cta-sub{
  margin-top:14px;
  font-family:var(--mincho);font-weight:500;
  font-size:clamp(13px,1.3vw,16px);letter-spacing:.14em;line-height:1.9;
  color:var(--ink-2);
}
.kk-cta p.kk-cta-desc{margin:26px auto 0;max-width:36em;font-size:var(--fs-cta);line-height:2.2;letter-spacing:.1em;color:var(--ink-2)}
.kk-ds-note{font-size:var(--fs-caption);letter-spacing:.08em;line-height:2;color:var(--ink-3);margin:18px auto 0;max-width:var(--max)}
.kk-fp-count{font-size:var(--fs-caption);font-weight:700;letter-spacing:.1em;color:var(--ink-2);margin-bottom:4px}
.kk-cta-actions{margin-top:34px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.kk-cta .kk-btn{height:58px;padding:0 48px;font-size:var(--fs-cta)}
/* ---------- footer ---------- */
.kk-footer{
  background:var(--product);
  border-top:1px solid var(--line);
  padding:clamp(64px,10vh,96px) clamp(20px,5vw,64px) 40px;
}
.kk-footer .kk-wrap{max-width:var(--max);margin:0 auto}
.kk-footer-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:48px;flex-wrap:wrap;
  padding-bottom:clamp(44px,7vh,68px);
}
.kk-f-logo{height:28px;width:auto}
.kk-f-copy{
  margin-top:22px;
  font-family:var(--mincho);font-weight:600;
  font-size:var(--fs-ex-brand);letter-spacing:.24em;color:var(--ink);
}
.kk-f-tag{
  margin-top:10px;
  font-size:var(--fs-caption);letter-spacing:.3em;color:var(--ink-3);
}
.kk-f-nav{display:flex;gap:clamp(40px,6vw,88px);padding-top:8px}
.kk-f-col{list-style:none;display:flex;flex-direction:column;gap:20px}
.kk-f-col a{
  position:relative;
  font-size:var(--fs-strong);font-weight:500;letter-spacing:.16em;color:var(--ink);
  padding-bottom:7px;
}
.kk-f-col a .kk-f-note{font-size:var(--fs-caption);letter-spacing:.08em;color:var(--ink-3);font-weight:400}
.kk-f-col a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.kk-f-col a:hover::after{transform:scaleX(1)}
.kk-f-souken{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  padding:clamp(24px,3.6vh,32px) clamp(24px,3.5vw,40px);
  transition:border-color .45s ease, box-shadow .45s ease;
}
.kk-f-souken:hover{border-color:var(--ink);box-shadow:0 14px 34px rgba(20,20,50,.08)}
.kk-fs-label{font-size:var(--fs-caption);font-weight:700;letter-spacing:.34em;color:var(--ink-3);margin-bottom:10px}
.kk-fs-title{
  font-family:var(--mincho);font-weight:700;
  font-size:clamp(20px,2.4vw,28px);letter-spacing:.14em;color:var(--ink);
}
.kk-fs-desc{margin-top:8px;font-size:var(--fs-body);letter-spacing:.14em;color:var(--ink-2);line-height:1.9}
.kk-fs-arrow{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border:1px solid var(--ink);border-radius:50%;
  font-size:18px;color:var(--ink);
  transition:background .4s ease,color .4s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.kk-f-souken:hover .kk-fs-arrow{background:var(--ink);color:#fff;transform:translateX(6px)}
.kk-f-patent{
  margin-top:clamp(36px,5vh,52px);
  border-top:1px solid var(--line);
  padding-top:clamp(28px,4vh,38px);
  display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;
}
.kk-fp-label{
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.34em;color:var(--ink-3);
  padding-top:4px;
}
.kk-fp-title{
  font-family:var(--mincho);font-weight:600;
  font-size:var(--fs-body);letter-spacing:.06em;line-height:2;color:var(--ink);
}
.kk-fp-nums{
  margin-top:8px;
  font-size:var(--fs-caption);letter-spacing:.06em;line-height:2.1;color:var(--ink-3);
}
@media(max-width:640px){.kk-f-patent{grid-template-columns:1fr;gap:8px}}
.kk-footer-bottom{
  margin-top:clamp(36px,5vh,52px);
  border-top:1px solid var(--line);
  padding-top:30px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.kk-f-certs{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.kk-f-cert{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:12px 22px;min-height:76px;
}
.kk-f-cert img{height:44px;width:auto;display:block}
.kk-f-legal{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.kk-f-policies{display:flex;gap:26px}
.kk-f-policies a{
  font-size:var(--fs-note);letter-spacing:.14em;color:var(--ink-2);
  border-bottom:1px solid transparent;transition:border-color .3s ease,color .3s ease;
  padding-bottom:2px;
}
.kk-f-policies a:hover{color:var(--ink);border-color:var(--ink)}
.kk-f-copyright{font-size:var(--fs-caption);letter-spacing:.16em;color:var(--ink-3)}
@media(max-width:640px){
  .kk-footer-top{flex-direction:column;gap:36px}
  .kk-f-nav{flex-direction:column;gap:20px}
  .kk-f-legal{align-items:flex-start}
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
  .kk-dm-drop,.kk-dm-g i{animation:none;opacity:1}
  .kk-negate .kk-w,.kk-subcopy,.kk-tagline-v,.kk-hero-clients,.kk-armillary{opacity:1;transform:none}
  .kk-hcaret{display:none}
  .kk-rv{opacity:1;transform:none}
  .kk-marquee .kk-track{animation:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* ds-promise: 数字直下の約束行 */
p.kk-ds-promise{margin-top:14px;font-size:14px;letter-spacing:.06em;color:var(--ink)}
/* live: 本日累計を主、実施中を従に。内訳は掲示板の罫線行 */
.kk-live-now{margin-left:0;font-size:14px;letter-spacing:.06em;color:var(--ink-2)}
.kk-live-now b{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:0}
.kk-live-rows{margin-top:6px;max-width:520px}
.kk-lr{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 2px;margin:0;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.04em}
.kk-lr b{font-weight:700;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: no-preference){
  .kk-live-dot{animation:livepulse 2.4s ease-in-out infinite}
  @keyframes livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
}
/* hero live: PCでは右カラム＝ロゴの下に。脈動の強化 */
.kk-live-dot{position:relative;width:10px;height:10px}
.kk-live-dot::after{content:'';position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(56,190,150,.55);animation:liveripple 1.8s ease-out infinite}
@keyframes liveripple{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion: reduce){.kk-live-dot::after{animation:none;display:none}}
.kk-nbx{white-space:nowrap}
/* PC: 内訳を1行の罫線ボードに圧縮（ヒーローを1画面に戻す） */
@media (min-width:641px){
    .kk-live-rows{display:flex;align-items:center;max-width:none;margin-top:8px}
  .kk-lr{border-bottom:none;border-left:1px solid var(--line);padding:2px 18px;gap:10px;font-size:13.5px}
  .kk-lr:first-child{border-left:none;padding-left:2px}
}
/* ドラム: 変わった桁が下から回り込む */
.kk-dr{display:inline-block;animation:drin .34s cubic-bezier(.2,.75,.2,1)}
@keyframes drin{from{transform:translateY(.9em);opacity:0}to{transform:none;opacity:1}}
/* フィード: 生身の気配の一行 */
.kk-live-feed{margin-left:14px;font-size:12.5px;letter-spacing:.04em;color:var(--ink-2);
  opacity:0;transition:opacity .5s ease}
.kk-live-feed.kk-on{opacity:1}
.kk-lr-lead{color:var(--ink-3);letter-spacing:.14em;font-size:11.5px}
@media (max-width:640px){
  .kk-live-feed{display:block;margin:8px 0 0;min-height:1.4em}
  .kk-lr-lead{border-bottom:none;padding-bottom:2px}
}
@media (min-width:641px){
  .kk-live-label{margin:0 0 2px}
  .kk-live-count{margin:0}
  .kk-live-rows{margin-top:8px}
  .kk-lr-lead{border-left:none;padding-left:2px}
}
/* 低背ビューポート（業務用Windows等）: ヒーローをさらに詰める */
@media (min-width:641px) and (max-height:820px){
  .kk-hero{padding-top:clamp(64px,7.5vh,88px)}
  .kk-heronet{width:min(700px,54vw);top:calc(max(46svh, 300px) - 64px)}
  .kk-live-num{font-size:clamp(38px,5.2vh,54px)}
  .kk-negate{margin-bottom:8px}
  .kk-maincopy{font-size:clamp(54px,11.5vh,110px)}
  .kk-subcopy{margin-top:12px;font-size:15px;line-height:1.75}
  .kk-live-main{margin-top:14px}
  .kk-hero-clients{margin-top:0}
}
/* さらに低背（1366x768実効等） */
@media (min-width:641px) and (max-height:700px){
  .kk-hero{padding-top:52px}
  .kk-maincopy{font-size:clamp(46px,10.2vh,92px)}
  .kk-subcopy{margin-top:10px;font-size:14px;line-height:1.68}
  .kk-live-num{font-size:40px}
  .kk-live-label{font-size:12px}
  .kk-lr{font-size:12.5px;padding:2px 14px}
}
@media (prefers-reduced-motion: reduce){.kk-dr{animation:none}}
/* edit26: 数字演出の強化 */
.kk-live-num.kk-pop{animation:numpop .5s cubic-bezier(.2,1.5,.3,1)}
@keyframes numpop{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
.kk-plus1{position:absolute;font-weight:700;font-size:18px;color:var(--acc, #244dae);
  animation:plus1 1s ease forwards;pointer-events:none;letter-spacing:.02em}
@keyframes plus1{0%{opacity:0;transform:translateY(6px)}18%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
.kk-live-count{position:relative}
.kk-live-feed{font-size:14px;color:var(--ink)}
.kk-dr{animation-duration:.5s;animation-timing-function:cubic-bezier(.2,1.35,.3,1)}
/* edit28: 折返し品質（孤立行の回避・句節折り） */
p, h1, h2, h3, h4, li, .kk-d-text, .kk-ui-record, .kk-lr span{text-wrap:pretty}
@supports (word-break:auto-phrase){ h1, h2, h3, h4, .kk-d-label{word-break:auto-phrase} }
/* edit28: BASEカードを3カラム全幅＋輪郭の明確化 */
.kk-foundation .kk-eye-card{grid-column:1 / -1;border-color:var(--line-strong);background:var(--paper);
  box-shadow:0 1px 0 rgba(20,20,50,.04)}
.kk-foundation .kk-eye-card h4{font-size:clamp(17px,1.6vw,21px)}
.kk-nbr{white-space:nowrap}
/* 暁の縦線: 星の正値。呼吸9s・輝きの降下12s。ヘッダーの下層に住む */
.kk-akv{position:fixed;top:0;bottom:0;left:2px;width:6px;z-index:5;pointer-events:none}
.kk-akv-glow{position:absolute;inset:0 auto 0 -2px;width:6px;filter:blur(4px);
  background:linear-gradient(180deg,#FFD08C 0%,#F79AAE 36%,#C79ED8 68%,#8FD6E0 100%);
  animation:akvGlow 9s ease-in-out infinite}
.kk-akv-core{position:absolute;top:0;bottom:0;left:0;width:2px;overflow:hidden;
  background:linear-gradient(180deg,#FFD08C 0%,#F79AAE 36%,#C79ED8 68%,#8FD6E0 100%);
  animation:akvBreathe 9s ease-in-out infinite}
.kk-akv-shine{position:absolute;left:0;width:100%;height:30%;top:-35%;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 100%);
  animation:akvShine 12s ease-in-out infinite}
@keyframes akvBreathe{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes akvGlow{0%,100%{opacity:0}50%{opacity:.55}}
@keyframes akvShine{0%{top:-35%}100%{top:135%}}
@media (prefers-reduced-motion: reduce){.kk-akv-glow,.kk-akv-core,.kk-akv-shine{animation:none}.kk-akv-core{opacity:.7}}
@media (max-width:640px){.kk-akv{left:2px}}
/* 価格表記: 誠実の明朝、単位は小さく静かに */
.kk-ec-price{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0 0 10px}
.kk-ec-price b{font-family:var(--mincho);font-weight:700;font-size:21px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.kk-ec-price span{font-size:13px;color:var(--ink-2);letter-spacing:.06em}
.kk-ec-price s{color:var(--ink-3);font-size:14px;font-weight:400;margin-right:2px}
.kk-foundation .kk-ec-price b{font-size:26px}
.kk-opt-price{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:1px;align-self:flex-start}
.kk-opt-price b{white-space:nowrap}
.kk-opt-price span{white-space:nowrap;line-height:1.5}
.kk-opt-price b{font-family:var(--mincho);font-weight:700;font-size:16px;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.kk-opt-price span{font-size:12.5px;color:var(--ink-2);letter-spacing:.05em;font-weight:400}
@media (max-width:640px){.kk-ec-price b{font-size:19px}.kk-foundation .kk-ec-price b{font-size:22px}.kk-opt-price b{font-size:14.5px}}
/* 価格注記とパック帯 */
.kk-opt-note{font-size:12px;color:var(--ink-2);letter-spacing:.06em;margin:14px 0 0;text-align:right}
.kk-pack{background:#fff;border:2px solid var(--accent);border-radius:2px;margin-top:26px;padding:26px 30px 24px;scroll-margin-top:100px}
[id]{scroll-margin-top:100px}
@media (max-width:640px){.kk-pack{scroll-margin-top:88px}}
.kk-pack-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.kk-pack-tag{font-size:11.5px;letter-spacing:.28em;font-weight:700;color:#fff;background:var(--accent);padding:7px 14px;border-radius:2px}
.kk-pack-t{font-family:var(--mincho);font-weight:700;font-size:clamp(20px,1.9vw,25px);letter-spacing:.06em}
.kk-pack-cond{font-size:13.5px;color:var(--ink-2);margin-bottom:10px}
.kk-pack-cond b{color:var(--ink)}
.kk-pack-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.kk-pack-chips span{border:1px solid var(--line-strong);border-radius:2px;padding:7px 13px;font-size:12.5px;font-weight:700;letter-spacing:.04em;background:var(--product)}
.kk-pack-chips i{font-style:normal;color:var(--ink-3);font-weight:700}
.kk-pack-ex{border-top:1px solid var(--line);padding-top:16px}
.kk-pack-ex .kk-pe-l{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.05em;margin-bottom:7px;display:flex;align-items:center;gap:10px}
.kk-pack-ex .kk-pe-l span{font-size:10.5px;letter-spacing:.24em;color:var(--ink-2);border:1px solid var(--line-strong);border-radius:2px;padding:3px 8px;font-weight:700}
.kk-pack-ex .kk-pe-f{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.kk-pack-note{font-size:13.5px;color:var(--ink-2);margin-top:10px}
.kk-pack-ex b{font-family:var(--mincho);font-weight:700;font-size:clamp(19px,1.9vw,25px);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.kk-pack-ex em{font-style:normal;font-size:clamp(24px,2.4vw,32px)}
.kk-pack-ex .kk-pe-r{font-size:12.5px;color:var(--ink-2)}
@media (max-width:640px){.kk-pack{padding:20px 16px}.kk-pack-head{flex-wrap:wrap;gap:10px}.kk-pack-ex .kk-pe-l{font-size:13.5px}.kk-pack-ex b{font-size:18px}.kk-pack-ex em{font-size:23px}}
.kk-cta-actions .kk-btn{padding:15px 26px;display:inline-flex;align-items:center;justify-content:center;line-height:1.4}
/* ---- edit54: BASEカードの初期費用行（価格の指定席） ---- */
.kk-foundation .kk-ec-price.kk-ec-init{margin-top:2px}
.kk-foundation .kk-ec-price.kk-ec-init b{font-size:18px}
/* ---- edit54: パック帯・打ち消しの指定席 ---- */
.kk-pack-prices{margin:2px 0 16px;display:flex;flex-direction:column;gap:8px}
.kk-pack-prices p{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.kk-pack-prices .kk-pp-l{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-2);min-width:4.5em}
.kk-pack-prices b{font-family:var(--mincho);font-weight:700;font-size:clamp(19px,1.9vw,24px);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.kk-pack-prices s{color:var(--ink-3);font-size:15px;font-weight:400;margin-right:2px}
.kk-pack-prices .kk-pp-u{font-size:12.5px;color:var(--ink-2);letter-spacing:.05em}
.kk-pack-keep{margin-top:12px;font-size:13.5px;line-height:2;letter-spacing:.05em;color:var(--ink-2)}
@media (max-width:640px){.kk-pack-prices b{font-size:18px}.kk-pack-prices s{font-size:13px}.kk-pack-prices .kk-pp-l{min-width:auto}}
/* ---- edit54: パックへの道標（プライマリー） ---- */
.kk-ec-pack-link{margin-top:16px}
.kk-ec-pack-link a{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:14.5px;font-weight:700;letter-spacing:.05em;line-height:1.9;border-bottom:1px solid var(--accent);padding-bottom:3px}
.kk-ec-pack-link .kk-epl-a{font-weight:400;transform:translateY(1px)}
.kk-ec-pack-link a:hover{opacity:.75}
@media (max-width:640px){.kk-ec-pack-link a{font-size:13.5px}}
/* ---- edit54: 特許（TEAMの結び・奥付） ---- */
.kk-patent-seal{margin-top:clamp(56px,8vh,84px);border-top:1px solid var(--line-strong);padding-top:clamp(30px,5vh,44px)}
.kk-ps-kicker{font-size:var(--fs-caption);font-weight:700;letter-spacing:.3em;color:var(--ink-3);margin-bottom:16px}
.kk-ps-lead{font-family:var(--mincho);font-weight:700;font-size:clamp(18px,2.1vw,25px);letter-spacing:.08em;line-height:2;max-width:34em}
.kk-ps-titles{margin-top:24px;padding:4px 0 4px 22px;border-left:1px solid var(--line-strong)}
.kk-ps-titles p{font-family:var(--mincho);font-weight:600;font-size:clamp(13px,1.3vw,15.5px);letter-spacing:.08em;line-height:2.3;color:var(--ink-2)}
.kk-ps-note{margin-top:16px;font-size:var(--fs-body);letter-spacing:.08em;color:var(--ink-2)}
@media (max-width:640px){.kk-ps-titles{padding-left:14px}}
/* cta2: 価格直後の締め */
.kk-cta2{padding:64px 0 72px;text-align:center}
.kk-cta2-line{font-family:var(--mincho);font-weight:700;font-size:clamp(17px,1.6vw,21px);letter-spacing:.1em;margin-bottom:22px}
.kk-cta2 .kk-cta-actions{justify-content:center}
/* plm: 旧io-contrastの2カラム定義を無効化し、3段の積みに */
.kk-io-contrast{display:block;grid-template-columns:none;border:none;gap:0}
.kk-io-contrast::before,.kk-io-contrast::after{display:none}
/* pt-tier: 梯子の段札 */
.kk-pt-tier{font-family:var(--mincho);font-weight:700;margin-right:12px;padding-right:12px;border-right:1px solid var(--line-strong)}
.kk-plm-ref{font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;margin-top:5px}
/* plm: 点/線/面の3段構造 */
.kk-plm-tier{display:grid;grid-template-columns:52px 1fr;gap:0 16px;padding:13px 2px;border-bottom:1px solid var(--line);align-items:start}
.kk-plm-tier:last-child{border-bottom:none}
.kk-plm-key{font-family:var(--mincho);font-weight:700;font-size:26px;line-height:1.2;color:var(--ink-3)}
.kk-plm-tier.kk-line .kk-plm-key,.kk-plm-tier.kk-men .kk-plm-key{color:var(--ink)}
.kk-plm-who{font-weight:700;font-size:13px;letter-spacing:.04em;margin-bottom:3px;color:var(--ink-2)}
.kk-plm-tier.kk-line .kk-plm-who,.kk-plm-tier.kk-men .kk-plm-who{color:var(--ink);font-size:14px}
.kk-plm-what{font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.kk-plm-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2fae8f;margin-left:8px;vertical-align:1px}
@media (max-width:640px){.kk-plm-key{font-size:22px}.kk-plm-tier{grid-template-columns:40px 1fr}}
/* g-stream: 実施中、AIが処理し続けている気配（高速） */
.kk-g-stream{height:252px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 26%);mask-image:linear-gradient(to bottom, transparent 0, #000 26%)}
.kk-g-stream p{margin:0;font-size:12.5px;line-height:1.55;letter-spacing:.02em;color:var(--ink-2);animation:gsin .16s ease}
.kk-g-stream p.kk-ai{color:var(--ink)}
@keyframes gsin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ui-title: プロダクトが生成する見出し（記録のタイトル） */
.kk-ui-title{font-weight:700;font-size:16px;line-height:1.75;letter-spacing:.02em;margin-bottom:6px}
/* dm-rest-sub: 図の結語への補足（一段下の格） */
p.kk-dm-rest-sub{margin-top:6px;font-size:13px;color:var(--ink-2);letter-spacing:.05em}
/* ===== mobile (edit13) ===== */
@media (max-width:640px){
  .kk-wrap{padding-left:20px;padding-right:20px}
  .kk-brand-sub{display:none}
  .kk-header .kk-login{display:none}
  .kk-header-actions{gap:8px}
  .kk-header-actions .kk-btn{padding:10px 12px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
  .kk-brand img{height:26px}
  .kk-heronet{display:none}
  img,svg{max-width:100%;height:auto}
  .kk-intro-grid,.kk-pt-cols,.kk-stage-grid,.kk-footer-top{display:block}
  .kk-pt-cols>div+div{margin-top:28px}
  .kk-stage-grid>*+*{margin-top:24px}
  .kk-intro-grid>*+*{margin-top:24px}
  .kk-footer-top>*+*{margin-top:28px}
  .kk-pt-rail{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
  .kk-stage-nav{display:flex;overflow-x:auto;gap:8px;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .kk-stage-step{flex:0 0 auto}
  .kk-eye-card h4{font-size:15px;line-height:1.6;letter-spacing:.04em}
  .kk-opt-row .kk-opt-t{font-size:15px}
  .kk-rule-block h4{font-size:19px;line-height:1.75;letter-spacing:.03em}
  html,body{overflow-x:hidden}
  /* +X%: 中央揃え */
  .kk-ds-grid{grid-template-columns:1fr}
  .kk-ds-item{display:flex;flex-direction:column;align-items:center;text-align:center}
  /* 見出し: 句点単位で折る（途中改行の禁止）とサイズ調整 */
  .kk-intro-grid h2, .kk-pt-cols h3{font-size:23px;line-height:1.6;letter-spacing:.04em}
  p.kk-big{font-size:26px !important;line-height:1.6;letter-spacing:.06em}
  h2 .kk-nb, h3 .kk-nb, h2 .kk-q, h3 .kk-q{white-space:nowrap}
}
/* ============================================================
   暁の入場（1.8秒・確定値）——広告から着地した時だけ出す
   常在の暁の縦線（.kk-akv＝確定仕様）には手を触れず、上に重ねるだけ
   ============================================================ */
.kk-ake{position:fixed;inset:0;z-index:200;pointer-events:none;
  /* 後端（左）は白く溶けながらページを置いていく */
  /* 両端は輪郭を持たないS字の減衰——境目のない光 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.03) 6%,rgba(0,0,0,.1) 12%,rgba(0,0,0,.24) 18%,rgba(0,0,0,.45) 24%,rgba(0,0,0,.7) 30%,rgba(0,0,0,.9) 36%,#000 42%,#000 58%,rgba(0,0,0,.9) 64%,rgba(0,0,0,.7) 70%,rgba(0,0,0,.45) 76%,rgba(0,0,0,.24) 82%,rgba(0,0,0,.1) 88%,rgba(0,0,0,.03) 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.03) 6%,rgba(0,0,0,.1) 12%,rgba(0,0,0,.24) 18%,rgba(0,0,0,.45) 24%,rgba(0,0,0,.7) 30%,rgba(0,0,0,.9) 36%,#000 42%,#000 58%,rgba(0,0,0,.9) 64%,rgba(0,0,0,.7) 70%,rgba(0,0,0,.45) 76%,rgba(0,0,0,.24) 82%,rgba(0,0,0,.1) 88%,rgba(0,0,0,.03) 94%,transparent 100%);
  animation:akePass 1.45s cubic-bezier(.55,.055,.675,.19) forwards}
.kk-ake-dawn{position:absolute;top:0;bottom:0;left:0;width:100%;
  /* 広告v8の光：虹彩のような多色が斜めに重なり、左は白へ溶ける */
  background:
    radial-gradient(58% 52% at 80% 10%, rgba(255,178,92,.60) 0%, rgba(255,178,92,0) 62%),
    radial-gradient(66% 58% at 96% 34%, rgba(247,120,176,.55) 0%, rgba(247,120,176,0) 66%),
    radial-gradient(72% 66% at 86% 82%, rgba(168,128,236,.50) 0%, rgba(168,128,236,0) 66%),
    radial-gradient(88% 80% at 46% 48%, rgba(112,214,226,.42) 0%, rgba(112,214,226,0) 62%),
    radial-gradient(46% 42% at 64% 90%, rgba(140,226,178,.30) 0%, rgba(140,226,178,0) 60%);
  filter:blur(8px);
  transform-origin:left center;
  animation:akeBreath 1.45s ease forwards}
/* 光の粒——広告の光のきらめき */
.kk-ake-grain{position:absolute;top:0;bottom:0;left:0;width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.kk-w3.kk-org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  transform-origin:left center;
  animation:akeGrainB 1.45s ease forwards}
@keyframes akeGrainB{0%,100%{opacity:.22}}
.kk-ake-spark{position:absolute;left:0;width:9px;height:26%;top:-30%;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 100%);
  filter:blur(2.5px);
  animation:akeSpark .4s cubic-bezier(.3,0,.2,1) forwards .95s}
/* 光の通過：左から現れ、止まらずに右へ抜ける */
@keyframes akePass{
  0%{transform:translateX(-112vw)}
  100%{transform:translateX(112vw)}
}
@keyframes akeBreath{0%,100%{opacity:.96}}
/* 光の芯——光源のそばは白く飛び、凝縮とともに線へ落ちる */
.kk-ake-light{position:absolute;top:0;bottom:0;left:0;width:100%;
  background:radial-gradient(85% 130% at 0% 50%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 26%, rgba(255,255,255,0) 55%);
  transform-origin:left center;
  animation:akeBreath 1.45s ease forwards}
@keyframes akeSpark{to{top:130%}}
.kk-ake.kk-off{display:none}
@media (prefers-reduced-motion: reduce){.kk-ake{display:none}}
/* ============================================================
   モバイルのヘッダー：「詳細説明」と「資料DL」の2ボタンを出す
   （PCは従来どおり。本体CSSには手を入れず、追加だけで上書き）
   ============================================================ */
.kk-lbl-sp{display:none}
@media (max-width:720px){
  .kk-header .kk-lbl-pc{display:none}
  .kk-header .kk-lbl-sp{display:inline}
  .kk-header .kk-btn.kk-ghost.kk-hdl{display:inline-flex}
  .kk-header .kk-btn{height:40px;min-width:0;padding:0 14px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
  .kk-header-actions{gap:8px}
}
/* ============================================================
   箇条書きの規律と行間の締め直し
   ・「・」はぶら下げ（折り返し2行目以降が文字位置に揃う）
   ============================================================ */
/* ルール：本文直後のリスト1行目の上の間隔は、リスト行間と同等以上 */
.kk-kk-li{display:block;padding-left:1.05em;text-indent:-1.05em;line-height:1.8;margin-top:8px}
.kk-kk-li::before{content:"・"}
/* 本文を持たず箇条書きで始まるブロックの先頭だけ、余白なし */
.kk-ec-list > .kk-kk-li:first-child,
.kk-pack-cond > .kk-kk-li:first-child{margin-top:0}
/* カード本文の行間：2.0 → 1.8 に締める */
.kk-ec-what,.kk-ec-so{line-height:1.8}
.kk-ec-what{margin-top:8px}
/* オプション01-03カード：価格は本文の下・右寄せ */
.kk-options .kk-eye-card .kk-ec-price{align-items:flex-end;margin:14px 0 0}
/* オプション04-10：価格は本文の下・右寄せ（既存の右寄せを維持） */
.kk-opt-row .kk-opt-price{margin-top:8px}
.kk-pack-cond .kk-kk-li{line-height:1.8}
/* ---------- サイト共通 .ly_body 配下（下層ページ）でのフォント上書き対策 ---------- */
.ly_body .kk-header,
.ly_body .kk-footer{
  font-family: var(--gothic);
}

/*
 * Phase 9-5K.2 update: the Corporate inner-page header is now `.khd`
 * (template-parts/corporate/header.php), a direct port of Production's own
 * real inner-page header component, with zero extra breathing room before
 * `.page-header`/`<main>` (confirmed directly against Production's own
 * `/about` page: header-bottom and main-top are the same pixel value at
 * both 1440px and 390px — no gap at all).
 *
 * Phase 9-5N.1 correction: this rule was a fixed 64px/56px approximation
 * (visually matched only at the two widths tested at the time). Human
 * Review on /event found the breadcrumb/title spacing still off — re-
 * reading Production's own embedded `<style>` block (confirmed fresh, not
 * reused from an older capture) found its REAL rule is viewport-scaled, not
 * fixed:
 *   .page-header{margin-top:clamp(64px, 4.4444vw, 88px)}
 *   @media screen and (max-width:767px){.page-header{margin-top:56px}}
 * The fixed 64px this theme had was only ever correct up to exactly
 * 1440px (clamp's own floor), silently wrong at any wider viewport — this
 * theme's own `.khd` header height uses the identical scaling formula
 * (`--fs:clamp(16px,1.1111vw,22px)`, `--hd:calc(var(--fs)*4)` — 4.4444vw is
 * exactly 4× 1.1111vw), so the two were always meant to move together.
 * Porting the real formula instead of a fixed value keeps them in lockstep
 * at every width, not just the ones manually checked. The breakpoint itself
 * is also corrected from an approximated 760px to Production's own real
 * 767px (`.khd`'s unrelated 760px internal breakpoint for its OWN height is
 * a separate, independently-confirmed value in Production's code — not the
 * same rule, left untouched).
 */
.page-header{
  margin-top: clamp(64px, 4.4444vw, 88px);
}
@media (max-width: 767px){
  .page-header{
    margin-top: 56px;
  }
}

/*
 * Phase 2.2: minimal loading state for `.kakeai-cms-archive` async
 * Filter/Pagination (assets/corporate/js/cms-archive.js). Not part of
 * production's own CSS — a small, self-contained addition rather than a
 * new large loader UI, so the existing Visual Matching result is preserved
 * while a fetch is in flight.
 */
.kakeai-cms-archive [data-kakeai-results].is-loading {
  opacity: .5;
  transition: opacity .15s;
  pointer-events: none;
}

/*
 * News/Case Single share row: production's "Link" (copy-URL) share item is
 * an <a> (template-parts/corporate/share-buttons.php's Facebook/X items are
 * <a> too, confirmed via production's own markup — no background on any of
 * them). This one is a real <button> instead (better semantics for a
 * JS-only copy action than the original's `href="#"`), which picks up the
 * browser's native UA button background (`buttonface`, ~#efefef) that
 * `.bl_share_item` was never written to reset since it never expected to
 * sit on a <button>. `border` is already reset to 0 by webflow.css's own
 * `button, [type='button'], [type='reset'] { border: 0; }` — only
 * `background`/`appearance` were left at the UA default.
 */
.kakeai-copy-url {
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

/*
 * News Single Featured Image (`.el_img_opg`, single-news.php's
 * the_post_thumbnail()) stretches vertically on Desktop only. Confirmed via
 * DOM/Computed Style: production's own <img> for this component carries no
 * width/height attributes at all, so its `aspect-ratio: 1.91` (unchanged,
 * kakeai-service-site.webflow.css) freely determines the box height.
 * WordPress's the_post_thumbnail() adds HTML width/height attributes
 * (e.g. 1024x587) that don't exist in production; with those attributes
 * present, Chrome locks the rendered height to the attribute-derived
 * intrinsic size (587px) instead of the authored ratio (verified: removing
 * the attributes recomputes height to 798/1.91 = 417.8px, matching this
 * fix). `height: auto` makes the box height fully CSS-derived again,
 * restoring the aspect-ratio without touching the attributes or markup.
 */
.el_img_opg {
  height: auto;
}

/*
 * Phase 4-4.5: Event Single Speaker photo (`.el_img_square`,
 * single-event.php's the_post_thumbnail( $id, 'medium', ... )) stretches
 * vertically on Desktop only — the exact same root cause as `.el_img_opg`
 * above. Confirmed via DOM/computed style: production's own <img> for this
 * component carries literal `width="Auto" height="Auto"` (the string
 * "Auto", not a number — so the browser parses no numeric size hint at
 * all), letting `.el_img_square{aspect-ratio:1}` (kakeai-service-site.
 * webflow.css) freely resolve both dimensions to a perfect square.
 * WordPress's the_post_thumbnail() instead writes real numeric attributes
 * (e.g. width="300" height="300"); the surrounding flex layout then shrinks
 * the rendered width (e.g. to ~85px) while the attribute-derived height
 * stays pinned at 300px, stretching the photo. `height: auto` makes the box
 * height fully CSS-derived again so aspect-ratio can do its job, without
 * touching the markup or re-importing the image.
 */
.el_img_square {
  height: auto;
}

/*
 * Phase 4-4.5: `/event/thanks`'s "一覧を見る" buttons (.bl_btn_top.is-dl /
 * .is-event) render pink locally (this theme's vendored
 * kakeai-service-site.webflow.css: is-dl = var(--pale-red)/var(--deep-red),
 * is-event = var(--pale-pink)/var(--deep-pink)) but blue on production.
 * Confirmed via production's own live CSS bundle (fetched directly:
 * cdn.prod.website-files.com/.../kakeai-service-site.webflow.shared.
 * *.min.css, a newer build than this project's vendored snapshot) and a
 * real computed-style/hover check: both buttons use var(--pale-blue) in
 * BOTH normal and hover state (identical — no color change on hover on
 * production either). A Designer-side color edit made after this project's
 * CSS was exported, per this file's own established pattern of layering
 * such drift fixes here rather than hand-editing the vendored file.
 */
.bl_btn_top.is-dl,
.bl_btn_top.is-dl:hover,
.bl_btn_top.is-event,
.bl_btn_top.is-event:hover {
  background-color: var(--pale-blue);
}

/*
 * Phase 4-4.5: `/event/thanks`'s "Download"/"Seminar" section headings
 * (.el_sec_ttl_small) render in Manrope (gothic) locally — this theme's
 * vendored kakeai-service-site.webflow.css sets font-family: Manrope,
 * sans-serif for this class — but in Shippori Mincho B1 (serif) on
 * production for both headings identically (confirmed via production's own
 * live CSS bundle, same newer build referenced above, and via computed
 * style: both "Download" and "Seminar" measured with identical
 * `font-family: "Shippori Mincho B1", sans-serif`). Same Designer-side
 * drift as the button color fix above — this class's `color`/`line-height`
 * already match production (inherited elsewhere), only font-family needed
 * an override.
 */
.el_sec_ttl_small {
  font-family: "Shippori Mincho B1", "Noto Sans JP", sans-serif;
}

/*
 * News/Case Share "Copy Link" tooltip (`.bl_share_link_status`,
 * `.el_share_status`/`.el_share_status_ractangle` — all base positioning and
 * shape rules already exist verbatim in kakeai-service-site.webflow.css,
 * migrated along with the rest of that file). The hover-reveal trigger rule
 * itself was NOT migrated, though: production authors it per-page in
 * Webflow's embedded <style> block (webflow-export/kakeai/site/
 * detail_news.html line ~306, detail_case.html likewise) rather than in the
 * shared kakeai-service-site.webflow.css this theme ported — confirmed via
 * CSS.getMatchedStylesForNode showing no matching rule anywhere in the
 * theme's CSS for `.bl_share_item_link:hover .bl_share_link_status`, despite
 * the shape rules it reveals being present. Reproduced verbatim below, plus
 * two additions, both confirmed against production's own click handler in
 * the same export files:
 *
 * 1. `:focus-within` alongside production's `:hover` — production's own
 *    tooltip only ever appears on mouse hover; this adds the same reveal for
 *    keyboard focus, since the Copy Link control is a real, keyboard
 *    operable <button>.
 * 2. `.is-copied` (toggled by assets/corporate/js/share.js on click/copy):
 *    force-shows the tooltip regardless of hover/focus — needed because a
 *    tap on touch/mobile doesn't reliably sustain a CSS :hover state — and
 *    swaps its background to `var(--dull-grey75)`, matching production's own
 *    post-copy color swap (there done via inline
 *    `.css('background-color', 'var(--dull-grey75)')`; reproduced here as a
 *    class instead of inline-style manipulation).
 */
.bl_share_item_link:hover .bl_share_link_status,
.bl_share_item_link:focus-within .bl_share_link_status,
.bl_share_link_status.is-copied {
  opacity: 1;
}

.bl_share_link_status.is-copied .el_share_status,
.bl_share_link_status.is-copied .el_share_status_ractangle {
  background-color: var(--dull-grey75);
}

/*
 * Case Archive pagination (Phase 3-5.5): still plain paginate_links() —
 * production's own pagination is a structurally different "1 / N + 次へ"
 * counter widget (Finsweet), not a page-number list, so byte-for-byte
 * markup parity isn't possible without replacing paginate_links() itself
 * (out of scope this phase, matching cms-archive.js/kakeai_cms_pagination()
 * being deferred). This only brings the existing .page-numbers links'
 * spacing/active state in line with the rest of the site's visual language
 * (the same current-page treatment already used by kakeai_cms_pagination()
 * for News: text-color background, white text).
 */
.kakeai-case-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 4.5rem;
}
/*
 * Phase 3-5.8: page-number square/border styling scoped away from
 * `.next`/`.prev` (production's own `.bl_cms_pn_num` — the square/bordered
 * pill — is a visually and semantically separate element from
 * `.bl_cms_pn_btn` — the borderless "次へ"/"前へ" text+arrow link, confirmed
 * via its own CSS: no border, no fixed width/aspect-ratio, transparent
 * background, just padding). `:not(...)` keeps that same separation of
 * responsibility on top of WordPress's own `paginate_links()` classes,
 * rather than styling every `.page-numbers` link identically.
 *
 * Phase 3-5.8.1 fix: the exclusion is wrapped in `:where()` so it
 * contributes zero specificity of its own (`:where()`'s specificity is
 * always zero, by spec, regardless of its argument — unlike a plain
 * `:not(.next):not(.prev)`, which was adding two classes' worth and so
 * this rule's specificity, 0-2-0, was accidentally beating `.page-numbers
 * .current` below, 0-3-0 — confirmed via CSS.getMatchedStylesForNode
 * showing both rules matched on the current-page element, with this one's
 * `color` winning and rendering navy-on-navy). No `!important` needed;
 * `.current` now wins purely because it has one more class in a selector
 * this rule no longer artificially outweighs.
 */
.kakeai-case-pagination .page-numbers:not(:where(.next, .prev)) {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 2.75rem;
  border: .0625rem solid var(--text);
  border-radius: .25rem;
  color: var(--text);
  font-size: .875rem;
  text-decoration: none;
}
.kakeai-case-pagination a.page-numbers:not(:where(.next, .prev)):hover {
  background-color: var(--text);
  color: var(--white);
}
.kakeai-case-pagination .page-numbers.current {
  background-color: var(--text);
  color: var(--white);
}
.kakeai-case-pagination .page-numbers.dots {
  height: auto;
}
.kakeai-case-pagination .page-numbers.next,
.kakeai-case-pagination .page-numbers.prev {
  display: flex;
  align-items: center;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.75;
  text-decoration: none;
}
.kakeai-case-pagination .page-numbers.next:hover,
.kakeai-case-pagination .page-numbers.prev:hover {
  color: var(--dull-gray46);
}

/*
 * Phase 3-5.8 (Human Visual Review): production's own hover rules for
 * these SVG icons are authored per-page in Webflow's embedded <style>
 * (webflow-export/kakeai/site/case.html lines 97-103/333-337) rather than
 * in the shared kakeai-service-site.webflow.css this theme ported — the
 * base (non-hover) shape/color rules for `.bl_case_slide_btn_left/right`
 * and `.bl_case_card`/`.bl_pick_card_h2` did get ported, but these two
 * hover-only fill overrides did not, so the arrow silently inherited the
 * un-overridden `fill="var(--white)"` SVG attribute (invisible against the
 * hover background, which itself already ported correctly). Reproduced
 * verbatim; no new SVGs or pseudo-elements added.
 */
.bl_case_slide_btn_left:hover .bl_svg,
.bl_case_slide_btn_right:hover .bl_svg {
  fill: var(--text);
}
.bl_case_card:hover .bl_svg,
.bl_pick_card_h2:hover .bl_svg {
  fill: var(--text);
}