/* vi-lp.css — 院内ポータルLP（clinic-portal）だけのビジュアル強化（VISUAL-SPEC §3 LP・2026-10-21）
   共通部品は visual.css。ここではLPの既存の箱に合わせる調整だけを書く。 */

/* 1. 中身を先に作るのが、ポイントです：台の上の場面の絵（obj-binder/note/cal） --------
   新しい絵は台ごと描いてあり、影も絵に入っているので drop-shadow を外す。
   場面が細かいので少し大きくし、点線（HTML の svg）の始点を絵の端に合わせてある */
.lp .gather { width: min(100%, 700px); }
.lp .gather-obj { width: 28%; filter: none; }
.lp .gather-obj--binder { left: 0; top: -6%; }
.lp .gather-obj--note { left: 2%; top: auto; bottom: -10%; }
.lp .gather-obj--cal { left: auto; right: 0; top: 18%; width: 30%; }
.lp .gather-phone { z-index: 1; }
@media (max-width: 767px) {
  .lp .gather { margin-bottom: 24px; }
  .lp .gather-obj { width: 30%; }
  .lp .gather-obj--cal { width: 31%; }
}

/* 2. ポータルづくりの進め方：見出しの左のA層アイコン ------------------------------ */
.lp .build-title .vi { margin-right: 2px; }
@media (max-width: 767px) { .lp .build-title { gap: 10px; } }

/* 3. 使い始める前に、決めておきたいこと：カードの頭のA層アイコン（48px） ------------ */
.lp .before-card .vi { margin-bottom: 4px; }

/* 4. お申し込みからの流れ：白い道＋番号の石 ----------------------------------------- */
.vlp-flow { margin-top: 60px; }
.vlp-flow .flow-steps { margin-top: 0; }
.lp .flow-step:not(:last-child)::after { content: none; } /* 点線のつなぎは道に置きかえ */
.lp .flow-step .line-icon { margin-top: 22px; }
/* PC：石の中心（各列の中央）を左右にゆるくうねって通る道 */
.vlp-road-x { inset: auto; top: -16px; height: 80px; left: 12.5%; right: 12.5%; }
.vlp-road-y { display: none; }
@media (max-width: 767px) {
  .vlp-flow { margin-top: 44px; }
  .lp .flow-step { grid-template-columns: 48px 1fr; }
  .lp .flow-step .stone { grid-row: 1 / 4; }
  .vlp-road-x { display: none; }
  /* SP：石の列（中心 24px）の下を縦に。最初の石から最後の石まで */
  .vlp-road-y { display: block; width: 80px; left: -16px; top: 24px; bottom: 110px; }
}

/* 5. デモ画面の画像（lp-f1〜5）：実物の枠 -------------------------------------------
   .feat-img は ::before をブラウザの上帯に使っているので、.real-frame の板（::before）と
   ぶつかる。同じ見た目（右下12pxにずらした #FFE08A の板・角丸24px）を box-shadow で出す */
.lp .feat-img {
  border-radius: 24px;
  overflow: hidden;
  margin: 0 12px 12px 0;
  box-shadow: 12px 12px 0 #FFE08A, 0 14px 34px -18px rgba(26,26,46,.28);
}
@media (max-width: 767px) {
  .lp .feat-img { border-radius: 20px; margin: 0 8px 8px 0; box-shadow: 8px 8px 0 #FFE08A, 0 10px 24px -16px rgba(26,26,46,.28); }
}

/* 6. KIの動画：実物の枠（.real-frame）。板が切れないよう overflow を外し、角丸は動画側に */
.lp .voice-video.real-frame { overflow: visible; background: none; box-shadow: none; border-radius: 24px; }
.lp .voice-video.real-frame > video { height: 100%; object-fit: contain; background: #000; box-shadow: 0 30px 60px -30px rgba(26,26,46,.45); }
@media (max-width: 767px) { .lp .voice-video.real-frame { border-radius: 20px; } }