/* くすナビ B2B ヒーロー (kusunavi-hero.js)。面の大きさは差し替え前の図と同じ (PC 888x563 / スマホ 343x587 の比)。 */
.kh{position:relative;width:100%;--kh-tone:hue-rotate(-14deg) saturate(.72) brightness(1.1)}
.kh-panel{position:relative;width:100%;aspect-ratio:888/563;border-radius:8px;overflow:hidden;isolation:isolate;background:#F0A8A3}
@media(max-width:767px){.kh-panel{aspect-ratio:343/587}}

/* 背景: biosono のヒーローの絵 (mv.png) を角丸 8px の面に cover で敷くだけ。
   色は --kh-tone で調整する (くすナビのコーラル寄りに寄せる)。 */
.kh-field{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block;filter:var(--kh-tone,none)}

/* くすまる: 面の中央。下から +20px でふわっと現れ、画面外へ出ると同じ動きで戻る */
.kh-stage{position:absolute;left:50%;top:50%;z-index:1;width:var(--km-w,0);height:var(--km-h,0);
  transform:translate(-50%,-50%) translateY(20px);opacity:0;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.kh.is-in .kh-stage{opacity:1;transform:translate(-50%,-50%)}
.kh-body{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform}
/* 落ち影は足元の楕円 1 枚だけ (model-sheet 5. 影と設置: 幅 0.62×H・高 0.10×H・rgba(44,34,32,.22)) */
.kh-shadow{position:absolute;left:50%;top:calc(100% + var(--km-h,0px) * .16);width:calc(var(--km-h,0px) * .62);height:calc(var(--km-h,0px) * .10);
  border-radius:50%;background:radial-gradient(closest-side,rgba(44,34,32,.22),rgba(44,34,32,0));transform:translateX(-50%);will-change:transform,opacity}

@media(prefers-reduced-motion:reduce){
  .kh-stage{transition:none;opacity:1;transform:translate(-50%,-50%)}
}
.kh-km{width:100%;height:auto;display:block;pointer-events:none;user-select:none}

/* ヒーローの見出し: 3 行目「守る、整える、自動化する。」(13 字) が 1 行に収まる大きさにする (「る。」だけが 4 行目に落ちないように) */
@media (min-width: 768px) { h1.hero-name { font-size: min(3.85vw, 71px) !important; } }  /* 欄は最大 963px で止まるので、文字もそこで止める */
@media (max-width: 767px) { h1.hero-name { font-size: calc((100vw - 32px) / 13.4) !important; } }

/* スマホ: 見出しとヒーローの面の間に残っていた、MECHA のスマホ用の立体の入れ物 (くすまるの線画を外して空) を詰める */
@media (max-width: 991px) { .mobile-render { display: none !important; } }

/* Hero wrapper retained after removing the Palantir service renderer. */
.km-hero{position:relative;isolation:isolate;width:100%;margin:32px 0 16px;max-width:100%;flex:none}
.section.is-hero{height:auto;min-height:100vh}.hero-container{height:auto}.hero-infographics{margin-top:16px}
@media(max-width:991px){.km-hero{margin:24px 0 16px}}