/* トップの 5 つの事業。舞台の布の上のすりガラスの板（.glass。site.css）に、事業ごとの色の図（アニメーション）。
   図は画面に見えている間だけ動かす（.play）。動きを減らす設定では、途中の 1 コマで止めて見せる */
/* 事業の一番下まで来たら、事業はそこで止め（下端を画面の下にそろえて貼りつく）、「私たちについて」が下から覆いかぶさる（2026-11-01 の指示）。
   止まる位置（top）は intro.js が事業の高さから決める。JS が無いときは top が auto のままで、ふつうに流れる */
.biz{position:sticky;padding:clamp(88px,10vw,136px) 0}
.biz .sec-head{margin-bottom:clamp(40px,5vw,64px)}
.bz-list{display:grid;gap:36px}   /* 板の影が隙間で重なって灰色の帯にならないよう、間を空ける */
.bz{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(20px,3vw,40px);border-radius:32px;padding:clamp(16px,1.6vw,20px) clamp(16px,1.6vw,20px) clamp(16px,1.6vw,20px) clamp(28px,4vw,56px)}
.bz.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding:clamp(16px,1.6vw,20px) clamp(28px,4vw,56px) clamp(16px,1.6vw,20px) clamp(16px,1.6vw,20px)}
.bz.flip .bz-copy{order:2}
.bz-copy{padding:clamp(12px,2vw,24px) 0}
.bz-no{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--ink2);font-variant-numeric:tabular-nums}
.bz .h3{margin-top:10px;font-size:clamp(26px,2.8vw,38px)}
.bz-copy>p:not(.bz-no){margin-top:16px;color:var(--ink2)}
.bz .more,.bz .btn{margin-top:24px}
/* 図の地はカードの色にそろえる（2026-11-01 の指示「イラストの背景をカードの色に揃えて」。地を塗らずにカードの面を透かす）。
   各図の地の色（--tint）は HTML に残してあり、戻すときは background:var(--tint)。
   地が白に近くなるので、図の中の白い部品（札・カード・丸）には、カードと同じく四方へ淡い影を落として形を見せる（#vsh は 1 つ目の図の defs） */
.viz{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:600/440}
.viz rect[fill="#fff"],.viz circle[r="32"][fill="#fff"],.viz circle[r="62"][fill="#fff"]{filter:url(#vsh)}
.viz svg{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:860px){
  /* 狭い画面：説明 → 図 → ボタン（カードのいちばん下の中央）。説明の箱をほどいて、ボタンだけを図の下へ回す */
  .bz,.bz.flip{grid-template-columns:1fr;row-gap:0;padding:clamp(24px,5vw,40px) clamp(16px,4vw,24px) clamp(20px,4.5vw,28px)}
  .bz-copy{display:contents}
  .bz-copy>*{margin-inline:clamp(4px,1vw,12px)}
  .viz{margin-top:24px}
  .bz .btn{order:1;justify-self:center;min-width:200px;margin-top:20px}
}

/* 図の中の文字 */
.viz text{font-family:var(--sans);font-feature-settings:"palt"}
.v-t{font-size:19px;font-weight:700;fill:#1d1d1f}
.v-t.s{font-size:16px;font-weight:600}
.v-t.m{fill:#475569}
.v-chip{font-size:13px;font-weight:700;fill:#fff}
.v-q{font-size:15px;font-weight:600}
@media (max-width:640px){.v-t{font-size:23px}.v-t.s{font-size:19px}.v-t.v-q{font-size:16px}.v-chip{font-size:16px}}

/* 再生の切り替え：見えていない間は止める */
.viz *{animation-play-state:paused}
.viz.play *{animation-play-state:running}
.viz [class*="v-a"]{transform-box:fill-box;transform-origin:center}

/* 1 製剤輸入代行：出発地が脈打つ */
.v1{--c:#3b82f6}
.v-ping{animation:v-ping 2s ease-out infinite;transform-box:fill-box;transform-origin:center}
.v-ping.d2{animation-delay:1s}
@keyframes v-ping{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(3.2);opacity:0}}

/* 2 集患サポート */
.v-aheart{animation:v-heart 2.4s var(--ease) infinite}
@keyframes v-heart{0%,40%{transform:scale(1)}48%{transform:scale(1.45)}60%,100%{transform:scale(1)}}
.v-aplus{animation:v-plus 2.4s var(--ease) infinite}
@keyframes v-plus{0%,42%{opacity:0;transform:translateY(8px)}55%{opacity:1}80%,100%{opacity:0;transform:translateY(-14px)}}
.v-astar{animation:v-star 4s var(--ease) infinite;animation-delay:calc(var(--i) * .22s);opacity:.25}
@keyframes v-star{0%{opacity:.22;transform:scale(.7)}10%{opacity:1;transform:scale(1.18)}16%,82%{opacity:1;transform:scale(1)}92%,100%{opacity:.22;transform:scale(.85)}}
.v-abar{animation:v-bar 3.2s linear infinite;transform-origin:left center}
@keyframes v-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.v-ablink{animation:v-blink 1.1s steps(1) infinite}
@keyframes v-blink{50%{opacity:0}}
.v-aslot{animation:v-slot 6.4s var(--ease) infinite;animation-delay:calc(var(--i) * .32s);opacity:0}
@keyframes v-slot{0%{opacity:0;transform:scale(.55)}5%{opacity:1;transform:scale(1.08)}8%,70%{opacity:1;transform:scale(1)}78%,100%{opacity:0;transform:scale(.9)}}

/* 3 クリニック運営事業支援：中心の院がゆっくり呼吸する */
.v-abreath{animation:v-breath 3.6s ease-in-out infinite}
@keyframes v-breath{50%{transform:scale(1.04)}}

/* 4 経営コンサルティング・マーケティング調査 */
.v-sweep{animation:v-sweep 4.5s linear infinite;transform-box:view-box;transform-origin:300px 220px}
@keyframes v-sweep{to{transform:rotate(360deg)}}
.v-apop{animation:v-pop 7s var(--ease) infinite;animation-delay:calc(var(--i) * .12s);opacity:0}
@keyframes v-pop{0%{opacity:0;transform:scale(.3)}6%{opacity:1;transform:scale(1.15)}9%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.6)}}

/* 5 クリニック事業承継：窓の明かりがやわらかく揺れる（患者さまを迎え続ける） */
.v-awin{animation:v-win 3s ease-in-out infinite;animation-delay:calc(var(--i) * .37s)}
@keyframes v-win{50%{opacity:.6}}

@media (prefers-reduced-motion:reduce){
  .viz *{animation-play-state:paused!important;animation-delay:-2.2s!important}
}