/* ============================================================
   研修の世界（小さな会議室と前の画面）の見た目。土台（gyoshu/_engine/engine.css）の上に重ねる。
   例の出方：声の札が、映写機の光を受けたスライドのように、ちらっと点いて広がる。
   流れの3つ：ホワイトボードに、磁石で1枚ずつ留められる。
   画面のイメージ：机の上のノートパソコンの画面として置く。
   ============================================================ */

/* 見出しの下に、スライドの送りの点（3つ） */
.w-kenshu .hero__h1::after{content:"";display:block;width:58px;height:8px;margin-top:16px;
  background:radial-gradient(circle 4px at 4px 4px,#F3C969 98%,transparent) 0 0 / 25px 8px repeat-x;opacity:.9}
.w-kenshu .hero__eyebrow{letter-spacing:.1em;font-size:14px}

/* 一覧は、研修の進行表（左に時間の帯） */
.w-kenshu .toc__list{border-top:0}
.w-kenshu .toc__list a{border-bottom:1px dashed var(--line);padding-left:14px;position:relative}
.w-kenshu .toc__list a::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:2px;background:#2F8F80}
.w-kenshu .toc__list li:nth-child(2) a::before{background:#F3C969}
.w-kenshu .toc__list li:nth-child(3) a::before{background:#E07A5F}
.w-kenshu .toc__list li:nth-child(4) a::before{background:#9FD3C7}

/* ---------- 声の札：映されたスライド ---------- */
.w-kenshu .vcard{max-width:min(100%,660px);filter:drop-shadow(0 0 40px rgba(159,211,199,.22))}
.w-kenshu .vcard__in{border-radius:4px;padding:30px 24px 30px;border-top:7px solid #2F8F80;
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 0 60px rgba(20,34,36,.06)}
/* スライドの下の送りの点（何枚目か） */
.w-kenshu .vcard__in::after{content:"";position:absolute;right:20px;bottom:12px;width:58px;height:7px;
  background:radial-gradient(circle 3px at 3.5px 3.5px,rgba(22,33,31,.25) 98%,transparent) 0 0 / 17px 7px repeat-x}
.w-kenshu .vcard__in::before{content:"";position:absolute;bottom:12px;width:7px;height:7px;border-radius:50%;background:#2F8F80;right:71px}
.w-kenshu .scene:nth-of-type(2) .vcard__in::before{right:54px}
.w-kenshu .scene:nth-of-type(3) .vcard__in::before{right:37px}
.w-kenshu .scene:nth-of-type(4) .vcard__in::before{right:20px}
.w-kenshu .vcard__code{display:inline-block;padding:3px 12px;border-radius:999px;background:#16211F;color:#F7F5EE;font-size:13px;letter-spacing:.1em}
.w-kenshu .vcard__voice .q{color:#2F8F80}
/* 映写機が点く：横の帯が上下に開き、明るさが一度ちらつく */
html.lp-on.w-kenshu .vcard{opacity:1;transform:none}
html.lp-on.w-kenshu .vcard__in{clip-path:inset(calc((1 - var(--eo,1)) * 48%) 0 calc((1 - var(--eo,1)) * 48%) 0);
  filter:brightness(calc(1 + (1 - var(--e2,1)) * .5 * var(--e1,1)))}

/* ---------- こう変わる ---------- */
.w-kenshu .scene__title::before{content:"";display:inline-block;width:.42em;height:.42em;margin-right:12px;vertical-align:.12em;
  border-radius:50%;background:#F3C969;box-shadow:0 0 0 5px rgba(243,201,105,.2)}

/* ---------- 流れ：ホワイトボードに磁石で留める ---------- */
.w-kenshu .flow__list{gap:12px}
.w-kenshu .flow__list li{border:0;border-radius:3px;background:#F7F5EE;color:#16211F;box-shadow:0 8px 18px rgba(0,0,0,.35);
  padding-top:14px}
.w-kenshu .flow__list li:nth-child(2){transform:rotate(-.6deg)}
.w-kenshu .flow__list li:nth-child(3){transform:rotate(.5deg)}
.w-kenshu .flow__list li::after{content:"";position:absolute;left:50%;top:-6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#F7A189,#E07A5F 60%,#9E4A35);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.w-kenshu .flow__list li:nth-child(2)::after{background:radial-gradient(circle at 35% 35%,#FBE3A0,#F3C969 60%,#A9822C)}
.w-kenshu .flow__list li:nth-child(3)::after{background:radial-gradient(circle at 35% 35%,#7FCBBE,#2F8F80 60%,#1C5A50)}
.w-kenshu .flow__list li + li::before{display:none}
.w-kenshu .flow__n{border-radius:50%;background:#16211F;color:#F7F5EE}
.w-kenshu .flow__t{color:#16211F}
html.lp-on.w-kenshu .flow__list li{opacity:var(--r,1);transform:translate3d(0,calc((1 - var(--r,1)) * -26px),0) rotate(calc((1 - var(--r,1)) * 4deg))}

/* ---------- 画面のイメージ：机の上のノートパソコン ---------- */
.w-kenshu .scene__demo{padding-bottom:22px}
.w-kenshu .mock{position:relative}
.w-kenshu .mock__body{border-radius:10px;border:9px solid #1E2627;border-bottom-width:12px;box-shadow:0 0 50px rgba(143,224,207,.18),0 30px 60px rgba(0,0,0,.55)}
.w-kenshu .mock__body::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%)}
/* 本体の下の台（キーボードの縁） */
.w-kenshu .mock__cap{position:relative;padding-top:16px}
.w-kenshu .mock__cap::before{content:"";position:absolute;left:-6%;right:-6%;top:-2px;height:10px;border-radius:0 0 12px 12px;
  background:linear-gradient(#3A4446,#1B2122);box-shadow:0 10px 18px rgba(0,0,0,.45)}
html.lp-on.w-kenshu .mock{opacity:var(--m0,1);transform:perspective(900px) rotateX(calc((1 - var(--m0,1)) * 28deg));transform-origin:50% 100%}

.w-kenshu .tile{border-radius:4px}

/* ---------- 見本（2026-11-14）：画面のイメージの下に、見本の絵と「見本を開く」 ---------- */
.w-kenshu .sample{display:block;width:100%;max-width:400px;margin-top:18px;text-decoration:none;color:var(--ink);
  border-radius:8px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.32);
  transition:transform .25s ease,box-shadow .25s ease}
.w-kenshu .sample__img{display:block;width:100%;height:auto}
.w-kenshu .sample__btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 16px;
  font-size:15px;font-weight:700;letter-spacing:.04em;background:var(--accent);color:var(--accent-ink)}
.w-kenshu .sample__btn svg{width:18px;height:18px}
.w-kenshu .sample:hover,.w-kenshu .sample:focus-visible{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.w-kenshu .sample:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* 頼み方の節の案内の見本：小さく、添え書きを横に（大きな LINE のボタンを最初の画面から押し出さない） */
.w-kenshu .ask__sample{display:grid;grid-template-columns:132px 1fr;gap:6px 16px;align-items:center;margin:16px 0 20px;max-width:440px}
.w-kenshu .sample--ask{margin:0;max-width:132px;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.w-kenshu .sample--ask .sample__btn{min-height:40px;padding:6px 8px;font-size:13px;gap:4px}
.w-kenshu .sample--ask .sample__btn svg{width:14px;height:14px}
.w-kenshu .ask__sample .mock__cap{margin-top:0;padding-top:0}
.w-kenshu .ask__sample .mock__cap::before{content:none}
@media (prefers-reduced-motion:reduce){.w-kenshu .sample{transition:none}}