/* vi-index.css — トップページ固有のビジュアル（VISUAL-SPEC §3 index・2026-10-21）
   共通部品は visual.css。ここは index.html だけの置き方。1画面目（.kv6）は触らない。 */

/* ② 5つのステップ：左下→右上の道＋各段の上に場面の絵 ---------------- */
.st4-track { padding-top: 112px; margin-top: -10px; }
.st4 .st4-stairs { margin-top: 0; }
.st4-road { top: 0; bottom: auto; height: 400px; }
.st4-road-sp { display: none; }
.st4-iso { position: absolute; top: -96px; left: calc(50% - 60px); width: 120px; height: auto; z-index: 2; pointer-events: none; }
.st4 .st4-lv { gap: 8px; }
.st4 .st4-lv .stone { font-size: 20px; letter-spacing: 0; }

/* ③ お悩みから選ぶ：行の左にアイコン ------------------------------ */
.sol4-q { display: flex; align-items: center; gap: 12px; }

/* ④ 研修の受け方：表紙の左上に種類アイコン・KIポスターに実物の枠 ---- */
.pl4-cover { position: relative; }
.pl4-kind { position: absolute; top: 16px; left: 16px; z-index: 1; }
.pl4-clinic .real-frame img { box-shadow: none; }
.pl4 > .v3-wrap, .tm4 > .v3-wrap { position: relative; z-index: 1; }

/* ⑤ 研修のあとのサービス：場面の絵 96px ---------------------------- */
.af4-top { grid-template-columns: 96px minmax(0, 1fr); }
.af4-top img { width: 96px; height: auto; }

/* ⑥ 声：動画と院長写真に実物の枠・写真のない成果にアイコン ---------- */
.voice3-video .real-frame video { box-shadow: none; }
.voice3-who .real-frame { margin: 0 12px 12px 0; }
.voice3-who .real-frame img { width: 100%; aspect-ratio: 4 / 5; }
.voice3-card > .vi { justify-self: start; }

/* ⑧ メンバー：丸抜き＋グラデの輪 ----------------------------------- */
.tm4-card .real-frame--round { --rf-size: 168px; margin: 0 0 18px; }
.tm4-card .real-frame--round img { width: 100%; height: 100%; margin: 0; border: 0; box-shadow: none; }

/* ⑨ ご利用の流れ：横の道＋番号の石＋石の下にアイコン ---------------- */
.fl4-road { top: -16px; bottom: auto; height: 80px; }
.fl4-road-sp { display: none; }
.fl4 .fl4-list { gap: 24px; }
.fl4 .fl4-step { background: none; padding: 0; gap: 0; justify-items: start; }
.fl4 .fl4-step::before { content: ""; position: absolute; inset: 72px 0 0 0; background: var(--apr, #FFF5E8); border-radius: 14px; z-index: -1; }
.fl4 .fl4-step:not(:last-child)::after { content: none; }
.fl4 .fl4-no { margin-left: 20px; font-size: 20px; color: var(--vi-navy); line-height: 1; }
.fl4-step .vi { margin: 40px 20px 12px; }
.fl4 .fl4-step h3 { padding: 0 20px; }
.fl4 .fl4-step p { padding: 0 20px 26px; margin-top: 8px; }

/* ⑪ 最後のCTA：左から来た道がボタンの手前で止まる ------------------- */
.cta4-road { height: 52%; }

/* SP ------------------------------------------------------------- */
@media (max-width: 767px) {
  .st4-road { display: none; }
  .st4-road-sp { display: block; left: -22px; top: 0; bottom: 0; }
  .st4-track { padding-top: 32px; margin-top: 0; }
  .st4 .st4-stairs { gap: 40px; }
  .st4 .st4-step { margin-left: 40px !important; }
  .st4-iso { top: -30px; left: auto; right: 6px; width: 88px; }
  .st4 .st4-step h3 { padding-right: 78px; }

  .sol4-q { gap: 10px; }

  .fl4-road { display: none; }
  .fl4-road-sp { display: block; left: -16px; top: 0; bottom: 0; }
  .fl4 .fl4-list { gap: 16px; }
  .fl4 .fl4-step { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; }
  .fl4 .fl4-step::before { inset: 0 0 0 64px; }
  .fl4 .fl4-no { grid-row: 1 / span 3; margin: 16px 0 0; font-size: 20px; }
  .fl4-step .vi { margin: 16px 16px 8px; }
  .fl4 .fl4-step h3 { padding: 0 16px; }
  .fl4 .fl4-step p { padding: 0 16px 18px; }

  .tm4-card .real-frame--round { --rf-size: 136px; }
  .cta4-road { height: 30%; }
}

/* クリニック×AI研修の段: 写真のポスターをやめ、ほかの表紙と同じ絵柄の iso-clinic に（2026-10-21 梅村さん「デザイン的に違和感」） */
.pl4-clinic .pl4-clinic-iso img { width: 200px; border-radius: 0; box-shadow: none; }
@media (max-width: 767px) { .pl4-clinic .pl4-clinic-iso img { width: 96px; } }

/* 料金表の助成金の列（2026-10-21 梅村さん「助成金の金額だけ書いといて」） */
.pr4-table td .pr4-sub { white-space: nowrap; font-family: var(--ff-en); font-weight: 800; font-size: 16px; color: #B35900; }

/* 受講した会社の声（ジョイント工業さま）のカード: 白地に余白と角丸を付ける（スマホで文字が白地の端に付いて崩れて見えた・2026-10-21 梅村さん） */
.vo4 .voices-co-card { padding: 28px; border-radius: 24px; box-shadow: 0 24px 60px -30px rgba(26, 26, 46, .18); }
@media (max-width: 767px) {
  .vo4 .voices-co-card { padding: 14px 14px 20px; border-radius: 20px; gap: 18px; }
  .vo4 .voices-co-body { padding: 0 6px; }
  .vo4 .voices-co-q { border-radius: 0 0 14px 14px; }
}

/* eラーニングのカード: コースが1つなので横幅いっぱいに・ほかのコースは1行ずつの一覧に（2026-10-21 梅村さん「バイブのカードが半分で右が空いている」） */
.pl4-card--wide .pl4-courses { grid-template-columns: minmax(0, 1fr); }
.pl4-alt { margin-top: 20px; }
.pl4-alt-h { display: flex; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 800; color: var(--ink); }
.pl4-alt-h small { font-size: 12px; font-weight: 800; color: var(--or-t); }
.pl4-alt ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.pl4-alt li { border-bottom: 1px solid var(--line); }
.pl4-alt a { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 22px; align-items: center; gap: 12px; padding: 12px 4px; text-decoration: none; color: inherit; transition: background-color .2s; }
.pl4-alt a:hover { background: #FFF6EA; }
.pl4-alt b { font-size: 15px; font-weight: 900; color: var(--ink); line-height: 1.5; }
.pl4-alt span { font-size: 14px; line-height: 1.6; }
.pl4-alt svg { width: 22px; height: 10px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.pl4-card--wide .pl4-btn { margin-top: 20px; }

/* ④' クリニック向けLPへのバナー（グラデの舞台・文字は紺） ---------------- */
.cb4 { position: relative; overflow: hidden; padding: 96px 0 120px; background: linear-gradient(135deg, #FFB700 0%, #FF9900 52%, #FF6B6B 100%); color: var(--vi-navy); }
.cb4-en { position: absolute; right: -12px; bottom: 28px; font-family: var(--ff-en); font-weight: 800; font-size: 150px; line-height: 1; letter-spacing: .02em; color: rgba(255, 255, 255, .18); white-space: nowrap; pointer-events: none; }
.cb4 > .v3-wrap { position: relative; z-index: 1; }
.cb4-link { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 56px; text-decoration: none; color: inherit; border-radius: 24px; }
.cb4-body { display: grid; justify-items: start; gap: 16px; }
.cb4-for { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .55); font-size: 14px; font-weight: 800; line-height: 1.5; }
.cb4-for::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vi-navy); flex: none; }
.cb4-h { font-size: 36px; font-weight: 900; line-height: 1.45; color: var(--vi-navy); }
.cb4-sub { font-size: 20px; font-weight: 800; line-height: 1.7; }
.cb4-txt { font-size: 16px; font-weight: 500; line-height: 1.85; color: rgba(26, 26, 46, .9); }
.cb4-btn { margin-top: 8px; gap: 12px; padding: 0 28px 0 12px; }
.cb4-free { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--vi-gold); color: var(--vi-navy); font-size: 13px; font-weight: 900; line-height: 1.4; }
.cb4-link:hover .cb4-btn { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(26, 26, 46, .6); }
.cb4-link:hover .cb4-fig img { transform: scale(1.015); }
.cb4-fig { margin: 0 12px 12px 0; overflow: visible; }
.cb4-fig img { background: #fff; transition: transform .3s var(--ease); }
.cb4-link:focus-visible { outline: 3px solid var(--vi-navy); outline-offset: 8px; }
@media (max-width: 1023px) {
  .cb4-link { gap: 40px; }
  .cb4-h { font-size: 30px; }
}
@media (max-width: 767px) {
  .cb4 { padding: 56px 0 72px; }
  .cb4-en { font-size: 64px; right: -6px; bottom: 16px; }
  .cb4-link { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cb4-h { font-size: 24px; }
  .cb4-sub { font-size: 17px; }
  .cb4-txt { font-size: 15px; }
  .cb4-btn { width: 100%; }
  .cb4-fig { margin: 0 8px 8px 0; }
  .pl4-alt a { grid-template-columns: minmax(0, 1fr) 22px; gap: 2px 12px; }
  .pl4-alt b { grid-column: 1; }
  .pl4-alt span { grid-column: 1; grid-row: 2; font-size: 13px; }
  .pl4-alt svg { grid-column: 2; grid-row: 1 / span 2; }
}
.cb4-ib { display: inline-block; }
.pl4-alt-h::after { content: none; }