/* ============================================================
   清掃・造園・設備点検の世界（朝の現場）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：くもった札を、スクイージーが左から拭き取って現れる。拭いた面に、ときどき光が走る。
   流れの3つ：点検表の行に、順にチェックが入り、蛍光の色が引かれる。
   画面のイメージ：斜めに拭き取られて現れる。
   ============================================================ */

.w-genba .hero__eyebrow{letter-spacing:.18em}

/* 困りごとの一覧は、点検表のように */
.w-genba .toc__list{border-top:2px solid var(--ink)}
.w-genba .toc__list a{background:rgba(255,255,255,.42)}
.w-genba .toc__no{padding:1px 8px;border:1.5px solid var(--accent);border-radius:3px;background:#fff}

/* ---------- 声の札：くもりを拭き取って現れる ---------- */
.w-genba .vcard{max-width:min(100%,600px);filter:drop-shadow(0 18px 28px rgba(20,70,95,.24))}
html.lp-on.w-genba .vcard{opacity:var(--e1,1);transform:translate3d(0,calc((1 - var(--eo,1)) * 30px),0)}
.w-genba .vcard__in{overflow:hidden;border-radius:4px;border:1px solid rgba(12,39,51,.14);padding:26px 24px 28px;
  background:linear-gradient(135deg,#FFFFFF 0%,#F2FAFD 55%,#E6F4FA 100%);
  box-shadow:inset 0 0 0 6px rgba(150,205,228,.22),inset 0 2px 0 rgba(255,255,255,.9)}
/* くもり（泡の膜）。拭いた所から消える */
.w-genba .vcard__in::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;display:none;
  background:
    radial-gradient(circle at 18% 32%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,0) 26%),
    radial-gradient(circle at 64% 68%,rgba(255,255,255,.9) 0 7%,rgba(255,255,255,0) 22%),
    radial-gradient(circle at 86% 24%,rgba(255,255,255,.85) 0 5%,rgba(255,255,255,0) 18%),
    linear-gradient(160deg,rgba(214,231,238,.97),rgba(196,219,228,.97))}
html.lp-on.w-genba .vcard__in::after{display:block;clip-path:inset(0 0 0 calc(var(--e2,1) * 100%))}
/* スクイージー（くもりの左の端を進む） */
.w-genba .vcard::after{content:"";position:absolute;z-index:4;top:-12px;bottom:-12px;left:calc(var(--e2,1) * 100% - 8px);width:16px;
  border-radius:5px;display:none;pointer-events:none;
  background:linear-gradient(90deg,#7E95A1 0%,#F6FAFC 38%,#93A9B4 62%,#1B262C 62%,#1B262C 88%,#8ED0EC 88%);
  box-shadow:6px 0 14px rgba(70,150,190,.35)}
html.lp-on.w-genba .vcard::after{display:block;opacity:calc(var(--e1,1) * (1 - var(--e2,1)) * 5)}
/* 拭いた面に走る光 */
.w-genba .vcard__in::before{content:"";position:absolute;z-index:2;top:-30%;bottom:-30%;width:30%;pointer-events:none;
  left:calc(var(--gl,2) * 100% - 40%);transform:skewX(-20deg);
  background:linear-gradient(90deg,rgba(170,225,245,0),rgba(190,232,248,.55),rgba(170,225,245,0))}
html.lp-on.w-genba .vcard__in::before{opacity:var(--e2,1)}
html:not(.lp-on).w-genba .vcard__in::before{display:none}
.w-genba .vcard__code{padding:2px 12px;border:1.5px solid var(--accent);border-radius:3px;color:#0E5E41;letter-spacing:.12em}
.w-genba .vcard__voice .q{color:#1E86B4}

/* ---------- こう変わる：しずくの印 ---------- */
.w-genba .scene__title::before{content:"";display:inline-block;width:15px;height:15px;margin-right:13px;vertical-align:.08em;
  border-radius:0 50% 50% 50%;transform:rotate(45deg);background:linear-gradient(135deg,#8ED0EC,#1E86B4)}

/* ---------- 流れ：点検表に、順にチェックが入る ---------- */
.w-genba .flow__list{gap:0;max-width:470px;border-top:2px solid var(--ink)}
.w-genba .flow__list li{grid-template-columns:30px 1fr;min-height:56px;padding:10px 46px 10px 8px;border:0;border-bottom:1px solid rgba(12,39,51,.22);
  border-radius:0;background:linear-gradient(90deg,rgba(18,122,85,.13),rgba(18,122,85,.13)) 0 0 / calc(var(--r,1) * 100%) 100% no-repeat,rgba(255,255,255,.62)}
.w-genba .flow__list li + li::before{display:none}
.w-genba .flow__n{border-radius:4px;border:2px solid var(--accent);background:#fff;color:var(--accent)}
.w-genba .flow__list li::after{content:"";position:absolute;right:18px;top:50%;width:10px;height:20px;margin-top:-14px;
  border:solid var(--accent);border-width:0 4px 4px 0;transform:rotate(42deg);transform-origin:50% 60%}
html.lp-on.w-genba .flow__list li{opacity:calc(.25 + .75 * var(--r,1));transform:none}
html.lp-on.w-genba .flow__list li::after{opacity:var(--r,1);transform:rotate(42deg) scale(calc(.2 + .8 * var(--r,1)))}

/* ---------- 画面のイメージ：斜めに拭き取られて現れる ---------- */
.w-genba .mock__body{box-shadow:0 24px 50px rgba(20,70,95,.28),0 0 0 1px rgba(12,39,51,.12),inset 0 0 0 1px rgba(255,255,255,.6)}
html.lp-on.w-genba .mock{opacity:var(--m0,1);transform:none;
  clip-path:polygon(-10% -10%,calc(var(--m0,1) * 240% - 10%) -10%,calc(var(--m0,1) * 240% - 130%) 115%,-10% 115%)}

/* 札・箱 */
.w-genba .tags li{border-radius:3px}
.w-genba .tile{border-radius:4px}

@media (min-width:980px){
  .w-genba .vcard{margin-left:3%}
}