@charset "utf-8";
/* =========================================================================
   出現アニメーション
   ・発火は既存の IntersectionObserver（.kb-inview → .is-inview / section → .is-seen）
   ・スクロール制御は一切しない
   ・blur と will-change は使わない（描画とスクリーンショットが壊れるため）

   🔴設計の要点
   セクションタイトルと目立つキャッチは「左から滑り込む」。
   ただし要素そのものを translateX すると、まだ発火していないセクションで
   box がカラムの外へ出てしまう（はみ出し検査に引っかかる）。
   そこで **親を clip-path で横だけ密着クリップし、中の span だけを動かす**。
   box は常にカラム内にあるまま、見た目だけ左から入ってくる。
   ========================================================================= */

/* ---------- 0. 出現のタイミング表 ----------
   0.00s ラベルの星  →  0.10s ラベル文字  →  0.32s セクションタイトル
   0.57s 本文・雲・カード  →  0.80s 補足  →  1.02s 締め
   イラストは 0.62s から 0.14s 刻み、マーカーは題字が止まってから 1.05s
   ここを詰めると「全部一気に出た」感になるので、間隔は広く取る。       */

.kb-inview.is-inview    { transition: opacity .52s var(--easeOut), transform .66s var(--easeBack); }
.kb-inview.is-inview.d1 { transition-delay: .30s; }
.kb-inview.is-inview.d2 { transition-delay: .55s; }
.kb-inview.is-inview.d3 { transition-delay: .78s; }
.kb-inview.is-inview.d4 { transition-delay: 1.00s; }
.kb-inview.is-inview.d5 { transition-delay: 1.20s; }


/* =========================================================================
   1. 左から滑り込む（セクションタイトル・ラベル・キャッチ）
   ========================================================================= */

/* 親＝マスク。縦は 14px 逃がして字の頭と足が切れないようにする。
   clip-path はレイアウトを1pxも動かさないので、100dvh の詰めに影響しない。 */
.kb-label, .kb-h, .kb-note, .kb-hero_close {
  clip-path: inset(-14px 0px -14px 0px);
}
.kb-hero_title { clip-path: inset(0px -14px 0px -14px); }   /* 縦書きなので上下を密着 */

/* 中身。マスクの外（左）で待機し、滑り込んでくる。
   opacity は動かさない — 途中でふっと現れるとスライド感が消えるため。 */
.kb-sl {
  display: block;
  transform: translateX(-108%);
  transition: transform .92s cubic-bezier(.17, .84, .27, 1);
}
.kb-sl--v {                       /* 縦書きの巨大タイトルは上から落とす */
  transform: translateY(-112%);
  transition: transform 1.02s cubic-bezier(.17, .84, .27, 1);
}
.is-inview .kb-sl { transform: none; }

/* タイトルは親の縦移動を打ち消し、純粋に横だけの動きにする */
.kb-inview.kb-label, .kb-inview.kb-h,
.kb-inview.kb-note, .kb-inview.kb-hero_close, .kb-inview.kb-hero_title { transform: none; }

/* 中身の遅延は親の d クラスから受け取る（親より少しだけ後ろ） */
.is-inview .kb-sl        { transition-delay: .10s; }
.is-inview.d1 .kb-sl     { transition-delay: .32s; }
.is-inview.d2 .kb-sl     { transition-delay: .57s; }
.is-inview.d3 .kb-sl     { transition-delay: .80s; }
.is-inview.d4 .kb-sl     { transition-delay: 1.02s; }

/* ラベルの星は文字より先に、少し勢いをつけて飛び込む */
.kb-label::before {
  transform: translateX(-300%) rotate(-90deg);
  transition: transform .72s var(--easeBack);
}
.is-inview.kb-label::before { transform: none; }

/* ABOUT US の4つの吹き出し（支給素材）。1枚ずつ間を空けて弾ませながら出す。
   奥の2枚（しっかり・副業）→ 手前の2枚（週1日・いつか独立）の順。
   尻尾が下にあるので、拡大の基点は下寄りに置いて「下から膨らむ」形にする。
   最後の1枚が止まりきるのは .82 + .84 = 1.66s（撮影待ちの 3200ms 内）。 */
.kb-bub {
  opacity: 0;
  transform: translateY(22px) scale(.82);
  transform-origin: 50% 88%;
  transition: opacity .5s var(--easeOut), transform .84s var(--easeBack);
}
.is-inview .kb-bub { opacity: 1; transform: none; }
.is-inview .kb-bub--shikkari  { transition-delay: .10s; }
.is-inview .kb-bub--fukugyo   { transition-delay: .34s; }
.is-inview .kb-bub--shu1      { transition-delay: .58s; }
.is-inview .kb-bub--dokuritsu { transition-delay: .82s; }


/* =========================================================================
   2. 蛍光マーカー：題字が止まりきってから左→右に引かれる
   ========================================================================= */
.kb-mark, .kb-h .kb-y, .kb-hc_sub, .kb-msg_title span {
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .78s cubic-bezier(.22, .9, .28, 1) 1.05s;
}
.is-inview .kb-mark,
.is-inview.kb-h .kb-y,
.is-inview .kb-h .kb-y,
.is-inview .kb-msg_title span { background-size: 100% 100%; }

/* 筆ストローク（安定/自由の下敷き）は横に伸びる */
.kb-hc_word span::before {
  transform-origin: left center;
  scale: 0 1;
  transition: scale .62s var(--easeBack) 1.05s;
}
.kb-hero_choice.is-inview .kb-hc_word span::before { scale: 1 1; }


/* =========================================================================
   3. イラスト：本文が出そろってから、1点ずつ弾んで現れる
   ========================================================================= */
.kb-illust, .kb-msg_il, .kb-topil, .kb-visual_people, .kb-hero_people, .kb-figpair_il {
  opacity: 0;
  transform: translateY(18px) scale(.86);
  transition: opacity .5s var(--easeOut) .62s, transform .82s var(--easeBack) .62s;
}
.is-inview.kb-illust, .is-inview .kb-illust,
.kb-plate.is-seen .kb-msg_il, .kb-plate.is-seen .kb-topil,
.kb-msg.is-seen .kb-msg_il,
.kb-visual.is-seen .kb-visual_people,
.kb-hero.is-seen .kb-hero_people,
.is-inview .kb-figpair_il { opacity: 1; transform: none; }

/* 複数並ぶイラストは 0.14s 刻み */
.is-seen .kb-msg_il--tr { transition-delay: .66s; }
.is-seen .kb-msg_il--bl { transition-delay: .84s; }
.is-seen .kb-msg_il--br { transition-delay: 1.02s; }


/* =========================================================================
   4. バッジ：タイトルと一緒に、回り込みながら弾む
   ========================================================================= */
.kb-merit_badge, .kb-num {
  transform: scale(.5) rotate(-24deg);
  opacity: 0;
  transition: transform .76s var(--easeBack) .18s, opacity .4s var(--easeOut) .18s;
}
.is-inview .kb-merit_badge, .is-inview.kb-merit_head .kb-merit_badge,
.is-inview .kb-num, .is-inview.kb-num { transform: none; opacity: 1; }


/* =========================================================================
   5. 二択カード：左 → 右の順に、間を空けて起き上がる
   （カード内に絶対配置の筆ストロークがあるためマスクは掛けられない。
     横移動はカラム外へ出てしまうので、縦＋拡縮で「順番に」を作る）
   ========================================================================= */
.kb-hero_choice .kb-hc {
  opacity: 0;
  transform: translateY(26px) scale(.92);
  transition: opacity .5s var(--easeOut), transform .86s var(--easeBack);
}
.kb-hero_choice.is-inview .kb-hc { opacity: 1; transform: none; }
.kb-hero_choice.is-inview .kb-hc:first-of-type { transition-delay: .55s; }
.kb-hero_choice.is-inview .kb-hc:last-of-type  { transition-delay: .82s; }
/* or は両方そろってから最後にポンと出る */
.kb-hero_or { opacity: 0; transform: scale(.3) rotate(-16deg); transition: all .66s var(--easeBack) 1.06s; }
.kb-hero_choice.is-inview .kb-hero_or { opacity: 1; transform: none; }


/* =========================================================================
   6. 吹き出し・紙カード：奥から手前へ
   ========================================================================= */
.kb-about_cloud, .kb-plate_cloud, .kb-msg_balloon, .kb-hero_paper, .kb-balloon {
  transition: opacity .6s var(--easeOut), transform .88s var(--easeBack);
}
.kb-inview.kb-about_cloud, .kb-inview.kb-plate_cloud,
.kb-inview.kb-msg_balloon, .kb-inview.kb-hero_paper {
  opacity: 0; transform: translateY(26px) scale(.955);
}
.is-inview.kb-about_cloud, .is-inview.kb-plate_cloud,
.is-inview.kb-msg_balloon, .is-inview.kb-hero_paper { opacity: 1; transform: none; }
/* 🔴 2026-09-18 FV作り替え：紙カードはカンプどおり水平。
   ここに rotate が残っていると hero.css で傾きを外しても復活する。 */
.is-inview.kb-hero_paper { transform: none; }


/* =========================================================================
   7. 装飾：星はふわり、放射はゆっくり回る
   ========================================================================= */
.kb-hero_stars i, .kb-visual_stars i {
  opacity: 0; transform: scale(.4);
  transition: opacity .5s var(--easeOut), transform .9s var(--easeBack);
}
.is-seen .kb-hero_stars i, .is-seen .kb-visual_stars i { opacity: 1; transform: none; }
.is-seen .kb-hero_stars i:nth-child(1), .is-seen .kb-visual_stars i:nth-child(1) { transition-delay: .70s; }
.is-seen .kb-hero_stars i:nth-child(2), .is-seen .kb-visual_stars i:nth-child(2) { transition-delay: .82s; }
.is-seen .kb-hero_stars i:nth-child(3), .is-seen .kb-visual_stars i:nth-child(3) { transition-delay: .94s; }
.is-seen .kb-hero_stars i:nth-child(4), .is-seen .kb-visual_stars i:nth-child(4) { transition-delay: 1.06s; }
.is-seen .kb-hero_stars i:nth-child(5), .is-seen .kb-visual_stars i:nth-child(5) { transition-delay: 1.18s; }
.is-seen .kb-hero_stars i:nth-child(6), .is-seen .kb-visual_stars i:nth-child(6) { transition-delay: 1.30s; }

.kb-hero_sun, .kb-visual_sun { animation: kb-sunspin 70s linear infinite; }
@keyframes kb-sunspin { to { rotate: 360deg; } }

/* 星は現れた後も小さく明滅を続ける（止まった絵に見えないように） */
.is-seen .kb-hero_stars i, .is-seen .kb-visual_stars i {
  animation: kb-twinkle 3.2s ease-in-out infinite;
}
.is-seen .kb-hero_stars i:nth-child(2), .is-seen .kb-visual_stars i:nth-child(2) { animation-duration: 2.6s; animation-delay: .4s; }
.is-seen .kb-hero_stars i:nth-child(3), .is-seen .kb-visual_stars i:nth-child(3) { animation-duration: 3.6s; animation-delay: .9s; }
.is-seen .kb-hero_stars i:nth-child(4), .is-seen .kb-visual_stars i:nth-child(4) { animation-duration: 2.9s; animation-delay: 1.3s; }
.is-seen .kb-hero_stars i:nth-child(5), .is-seen .kb-visual_stars i:nth-child(5) { animation-duration: 3.3s; animation-delay: .2s; }
.is-seen .kb-hero_stars i:nth-child(6), .is-seen .kb-visual_stars i:nth-child(6) { animation-duration: 2.7s; animation-delay: 1.6s; }
@keyframes kb-twinkle {
  0%, 100% { opacity: 1;  scale: 1; }
  50%      { opacity: .45; scale: .78; }
}


/* =========================================================================
   7b. FV強化（2026-09-18 ユーザー指示「アニメが弱くなったのでリッチに」）
   一般のイラスト演出（3.）より一段強い動きを、FVの主役2点にだけ与える。
   セレクタの詳細度を上げて（.kb-hero_top を付ける）一般ルールより優先させる。
   ========================================================================= */
/* 3人の作業員：下から大きく・回転しながら弾んで立ち上がる */
.kb-hero_top .kb-hero_people {
  opacity: 0;
  transform: translateY(58px) scale(.6) rotate(-6deg);
  transition: opacity .6s var(--easeOut) .45s, transform 1.15s var(--easeBack) .45s;
}
.kb-hero.is-seen .kb-hero_top .kb-hero_people { opacity: 1; transform: none; }

/* 街のシルエット：奥から迫り上がる感を出すため、拡縮も足す */
.kb-hero_top .kb-hero_town {
  transform: translateY(24px) scaleY(.85);
  transform-origin: bottom center;
  opacity: 0;
  transition: transform 1.05s var(--easeOut) .1s, opacity .6s var(--easeOut) .1s;
}
.kb-hero.is-seen .kb-hero_top .kb-hero_town { transform: none; opacity: 1; }

/* 紙カード：もう少し大きく揺れながら着地する（旧版より振り幅を拡大）
   🔴 opacity は section6 の規則（.kb-inview.kb-hero_paper→0 / .is-inview.kb-hero_paper→1）に
   任せる。ここで opacity:0 を再宣言すると、ファイル後方にあるこのブロックが
   同じ詳細度で「表示状態(opacity:1)」を上書きしてしまい、カードが消えたまま
   になる（実際に発生した不具合）。ここでは transform だけを上書きする。 */
.kb-inview.kb-hero_paper {
  transform: translateY(40px) scale(.9) rotate(2.5deg);
}
.is-inview.kb-hero_paper { transform: none; }

/* 看板「知っていますか？」：落ちてきた後、一度だけ小さく弾む */
.kb-hero.is-seen .kb-hero_title { animation: kb-titledrop .6s var(--easeBack) 1.05s both; }
@keyframes kb-titledrop {
  0%   { rotate: -2.8deg; }
  55%  { rotate: -5.5deg; }
  100% { rotate: -2.8deg; }
}

/* 二択の「◯を諦める」ピルは、出そろった後もそっと呼吸を続けて視線を誘う */
.kb-hero_choice.is-inview .kb-hc_pill {
  animation: kb-pillpulse 2.6s ease-in-out 1.9s infinite;
}
@keyframes kb-pillpulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.045; }
}


/* =========================================================================
   8. 街のシルエット：下からせり上がる（背景なので一番先に動かす）
   ========================================================================= */
.kb-hero_town, .kb-visual_town {
  transform: translateY(30px); opacity: 0;
  transition: transform .95s var(--easeOut) .08s, opacity .6s var(--easeOut) .08s;
}
.is-seen .kb-hero_town, .is-seen .kb-visual_town { transform: none; opacity: 1; }


/* =========================================================================
   9. 定義リスト・入力欄：上から1行ずつ流れ込む
   ========================================================================= */
.kb-dl.is-inview > div { animation: kb-rowin .6s var(--easeBack) both; }
.kb-dl.is-inview > div:nth-child(1) { animation-delay: .60s; }
.kb-dl.is-inview > div:nth-child(2) { animation-delay: .70s; }
.kb-dl.is-inview > div:nth-child(3) { animation-delay: .80s; }
.kb-dl.is-inview > div:nth-child(4) { animation-delay: .90s; }
.kb-dl.is-inview > div:nth-child(5) { animation-delay: 1.00s; }
.kb-dl.is-inview > div:nth-child(6) { animation-delay: 1.10s; }
.kb-dl.is-inview > div:nth-child(n+7) { animation-delay: 1.20s; }
@keyframes kb-rowin { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }


/* =========================================================================
   10. CTAボタン：常時のかすかな呼吸
   ========================================================================= */
.kb-gutter--right .kb-btn:last-child, .kb-submit .kb-btn {
  animation: kb-breathe 3.4s var(--easeOut) infinite;
}
@keyframes kb-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }


/* =========================================================================
   停止
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .kb-label, .kb-h, .kb-note, .kb-hero_close, .kb-hero_title { clip-path: none; }
  .kb-sl, .kb-sl--v { transform: none !important; transition: none !important; }
  .kb-label::before { transform: none !important; transition: none !important; }
  .kb-mark, .kb-h .kb-y, .kb-hc_sub, .kb-msg_title span { background-size: 100% 100%; transition: none; }
  .kb-bub { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kb-hc_word span::before { scale: 1 1; transition: none; }
  .kb-illust, .kb-msg_il, .kb-topil, .kb-visual_people, .kb-hero_people, .kb-figpair_il,
  .kb-merit_badge, .kb-num, .kb-hero_choice .kb-hc, .kb-hero_or,
  .kb-hero_stars i, .kb-visual_stars i, .kb-hero_town, .kb-visual_town {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .kb-hero_sun, .kb-visual_sun,
  .kb-gutter--right .kb-btn:last-child, .kb-submit .kb-btn { animation: none; }
  .kb-dl.is-inview > div { animation: none; }

  /* 2026-09-18 FV強化ぶんも止める */
  .kb-cloud, .kb-clouds_track, .kb-hero_title, .kb-hero_choice.is-inview .kb-hc_pill,
  .is-seen .kb-hero_stars i, .is-seen .kb-visual_stars i { animation: none !important; }
  .kb-hero_top .kb-hero_people, .kb-hero_top .kb-hero_town,
  .kb-inview.kb-hero_paper { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* 2026-09-17 追加分もここで止める */
  .kb-plate--m3 .kb-topil--brush, .kb-plate--m3 .kb-topil--thinker,
  .kb-plate--m3 .kb-topil--card,  .kb-plate--m3 .kb-topil--boss {
    transform: none !important; transition: none !important;
  }
  .kb-plate--m3.is-seen .kb-topil--thinker,
  .kb-plate--m3.is-seen .kb-topil--boss,
  .kb-hero.is-seen .kb-hero_people,
  .kb-cloud { animation: none !important; }
  .kb-plate2 { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kb-btn { transition: none !important; }
}


/* =========================================================================
   会社概要（s10）— 外側の余白に対して内側のgapが小さく、
   中央に固まって見えるので、この画面だけ間隔を広げて縦を埋める。
   ========================================================================= */
/* 🔴 2026-09-17 参照デザインに合わせて黒枠(.kb-cofr)＋リード＋区切り線を足した。
   枠自体が縦を埋めるため、ここの余白は詰める（旧値のままだと確実にあふれる）。 */
.kb-company .kb-h              { margin-top: clamp(4px, 1dvh, 10px); }
.kb-company .kb-photo          { margin-top: clamp(8px, 2dvh, 22px); }
.kb-company .kb-dl             { margin-top: clamp(8px, 2.2dvh, 24px); }
.kb-company .kb-photo > .kb-photo_in { height: clamp(66px, 15dvh, 170px); }


/* =========================================================================
   新しく足した見出し（リボン帯・GALLERYの小見出し）
   この2つは中に背景SVGを敷いているので、親を clip-path で切ると枠線まで切れる。
   よって左スライドは使わず、親のフェード＋せり上がりだけにする。
   （切らずに translateX すると、発火前に box がカラムの外へ出る）
   ========================================================================= */
.kb-ribbon .kb-sl, .kb-gallcap .kb-sl { transform: none; transition: none; }

.kb-inview.kb-ribbon  { transform: translateY(16px) scale(.92); }
.is-inview.kb-ribbon  { transform: none; }
.kb-inview.kb-gallcap { transform: translateY(12px); }
.is-inview.kb-gallcap { transform: none; }


/* =========================================================================
   11. MERIT3 の周辺イラスト（2026-09-17 差し替え）
   🔴 旧クラス名 il1〜il4 の時間差指定が brush/card/thinker/boss へ改名した際に
      どこにも当たらなくなり、4点が同時に出ていた。置いた位置に合わせて
      「外側から雲へ寄ってくる」方向を与え直す。
   ※ .kb-topil は translate で中心合わせ、rotate で傾きを持っているので、
      動きは transform だけに書く（別プロパティなので合成される）。
   ========================================================================= */
.kb-plate--m3 .kb-topil--brush   { transform: translateX(-42px) rotate(-26deg) scale(.78); }
.kb-plate--m3 .kb-topil--thinker { transform: translateX(42px)  scale(.84); }
.kb-plate--m3 .kb-topil--card    { transform: translate(-34px, 18px) rotate(-16deg) scale(.8); }
.kb-plate--m3 .kb-topil--boss    { transform: translate(38px, 12px) scale(.84); }
.kb-plate--m3.is-seen .kb-topil  { transform: none; }

.kb-plate--m3.is-seen .kb-topil--brush   { transition-delay: .62s; }
.kb-plate--m3.is-seen .kb-topil--thinker { transition-delay: .78s; }
.kb-plate--m3.is-seen .kb-topil--card    { transition-delay: .94s; }
.kb-plate--m3.is-seen .kb-topil--boss    { transition-delay: 1.10s; }


/* =========================================================================
   12. 人物イラストの常時のかすかな浮遊
   🔴 振幅は 3px まで。これ以上入れると本文との実測クリアランスを食う。
      .kb-topil は translate で中心合わせしているので、キーフレーム側にも
      -50% を必ず含める（含め忘れると中心がズレて飛ぶ）。
   ========================================================================= */
.kb-plate--m3.is-seen .kb-topil--thinker { animation: kb-floatc 5.2s var(--easeOut) 1.9s infinite; }
.kb-plate--m3.is-seen .kb-topil--boss    { animation: kb-floatc 5.8s var(--easeOut) 2.4s infinite; }
@keyframes kb-floatc {
  0%, 100% { translate: -50% -50%; }
  50%      { translate: -50% calc(-50% - 3px); }
}
/* 🔴 2026-09-18 FV作り替え：人物は中央基準(-50%)ではなく左基準で置くようになったので、
   浮遊アニメの translate から -50% を外す。ここに -50% が残っていると
   CSS側の left 指定を打ち消して画面外へ飛ぶ（実測 x=-164px）。 */
.kb-hero.is-seen .kb-hero_people { animation: kb-float 5.5s var(--easeOut) 1.6s infinite; }
@keyframes kb-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -3px; }
}


/* =========================================================================
   13. GALLERY のスライダー：1枚ずつ送れて現れる
   （ul 全体が一度に is-inview になるため、li 単位で遅延を足す）
   ========================================================================= */
.kb-slider.is-inview > li:nth-child(1) .kb-illust { transition-delay: .60s; }
.kb-slider.is-inview > li:nth-child(2) .kb-illust { transition-delay: .74s; }
.kb-slider.is-inview > li:nth-child(3) .kb-illust { transition-delay: .88s; }
.kb-slider.is-inview > li:nth-child(4) .kb-illust { transition-delay: 1.02s; }


/* =========================================================================
   14. 「その1 / その2」の山形プレート：くるっと回りながら出る
   ========================================================================= */
.kb-plate2 {
  opacity: 0; transform: scale(.55) rotate(-12deg);
  transition: opacity .42s var(--easeOut) .26s, transform .72s var(--easeBack) .26s;
}
.is-inview .kb-plate2, .is-inview.kb-wanted .kb-plate2 { opacity: 1; transform: none; }


/* =========================================================================
   15. ボタンの手応え（マウス環境のみ。タップ環境には出さない）
   ========================================================================= */
@media (hover: hover) {
  .kb-btn { transition: transform .2s var(--easeOut), filter .2s var(--easeOut); }
  .kb-btn:hover  { transform: translateY(-2px); filter: brightness(1.06); }
  .kb-btn:active { transform: translateY(0); }
}


/* =========================================================================
   16. FV の雲：左から右へ流れ続ける（2026-09-18 ユーザー指示）
   🔴 継ぎ目なしループの作り方
   HTML側で同じ雲のセットを2組置いてある（A: x=0 / B: x=-390）。
   このトラックを viewBox 幅ぶん（390ユーザー単位）だけ右へ動かすと、
   動き終わった瞬間に B が A のいた位置へ来て、開始時と完全に同じ絵になる。
   linear + infinite なので、途中で止まったり飛んだりしない。
   ・親SVGは preserveAspectRatio:none。390 = 画面幅なので、
     どの画面幅でも「画面1枚ぶんを渡りきる」時間が一定になる。
   ・各雲には縦のゆらぎだけを与える。2組は同じクラス＝同じ位相なので、
     ゆらぎを足しても継ぎ目は崩れない。
   ========================================================================= */
.kb-clouds_track {
  will-change: transform;
  animation: kb-cloudflow 60s linear infinite;
}
@keyframes kb-cloudflow {
  from { transform: translateX(0); }
  to   { transform: translateX(390px); }   /* = viewBox 幅（画面1枚ぶん） */
}

/* 縦のゆらぎ。横の流れとは別軸なので、流れの速さには影響しない */
.kb-cloud { animation: kb-cloudbob 9s ease-in-out infinite; }
.kb-cloud--1 { animation-duration: 11s; animation-delay: -2s; }
.kb-cloud--2 { animation-duration: 8s;  animation-delay: -5s; }
.kb-cloud--3 { animation-duration: 13s; animation-delay: -1s; }
.kb-cloud--4 { animation-duration: 10s; animation-delay: -7s; }
@keyframes kb-cloudbob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}