/* ============================================================
   事務の流れの世界（荷物が流れる仕分けの台）の見た目。
   例の出方：声の札が、ベルトに乗って左から流れてきて、読み取りの門の光（上の色の線）をくぐって止まる。
   流れの3つ：ひと続きのベルトの上に、3つの札が順に流れて並ぶ。
   画面のイメージ：棚の灯りの下に置く。
   ============================================================ */
.w-nagare .hero__h1::after{content:"";display:block;width:min(100%,calc(var(--h1-col) * .8));height:10px;margin-top:16px;border-radius:5px;
  background:repeating-linear-gradient(90deg,#2A323D 0 10px,#3A4452 10px 14px)}
.w-nagare .hero__eyebrow{letter-spacing:.14em}

.w-nagare .toc__list a{position:relative;padding-left:16px}
.w-nagare .toc__list a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;background:#F2CF4A}
.w-nagare .toc__list li:nth-child(2) a::before{background:#5CC8A0}
.w-nagare .toc__list li:nth-child(3) a::before{background:#F06A6A}
.w-nagare .toc__list li:nth-child(4) a::before{background:#6FA8F2}

/* ---------- 声の札：ベルトに乗って流れてくる ---------- */
.w-nagare .vcard{max-width:min(100%,640px);padding-bottom:16px}
.w-nagare .vcard__in{border-radius:4px;border-top:6px solid #F2CF4A;box-shadow:0 22px 50px rgba(0,0,0,.55)}
.w-nagare .scene:nth-of-type(2) .vcard__in{border-top-color:#5CC8A0}
.w-nagare .scene:nth-of-type(3) .vcard__in{border-top-color:#F06A6A}
.w-nagare .scene:nth-of-type(4) .vcard__in{border-top-color:#6FA8F2}
/* 下のベルト */
.w-nagare .vcard::after{content:"";position:absolute;left:-40px;right:-40px;bottom:0;height:12px;border-radius:6px;
  background:repeating-linear-gradient(90deg,#2A323D 0 12px,#3A4452 12px 16px)}
.w-nagare .vcard__code{padding:2px 10px;border-radius:3px;background:#141B23;color:#F2CF4A;font-size:13px;letter-spacing:.08em}
.w-nagare .vcard__voice .q{color:#3E8C70}
html.lp-on.w-nagare .vcard__in{opacity:var(--e1,1);transform:translate3d(calc((1 - var(--eo,1)) * -110%),0,0)}
html.lp-on.w-nagare .vcard{opacity:1;transform:none}
html.lp-on.w-nagare .vcard::after{background-position:calc(var(--eo,1) * 160px) 0}

.w-nagare .scene__title::before{content:"";display:inline-block;width:.6em;height:.3em;margin-right:12px;vertical-align:.12em;
  background:linear-gradient(90deg,#F2CF4A 0 30%,transparent 30% 40%,#5CC8A0 40% 70%,transparent 70% 80%,#6FA8F2 80%)}

/* ---------- 流れ：ひと続きのベルト ---------- */
.w-nagare .flow__list{position:relative;gap:10px;padding-left:16px}
.w-nagare .flow__list::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:6px;border-radius:3px;
  background:repeating-linear-gradient(180deg,#2A323D 0 10px,#3A4452 10px 14px)}
.w-nagare .flow__list li + li::before{display:none}
.w-nagare .flow__list li{border-color:rgba(242,207,74,.3);border-radius:4px}
.w-nagare .flow__n{border-radius:3px}
html.lp-on.w-nagare .flow__list li{opacity:var(--r,1);transform:translate3d(0,calc((1 - var(--r,1)) * -30px),0)}

/* ---------- 画面のイメージ：棚の灯りの下 ---------- */
.w-nagare .scene__demo{position:relative;padding-top:18px}
.w-nagare .scene__demo::before{content:"";position:absolute;left:50%;top:0;width:min(70%,280px);height:6px;transform:translateX(-50%);border-radius:3px;
  background:#F2CF4A;box-shadow:0 0 30px 8px rgba(242,207,74,.25)}
.w-nagare .mock__body{border-radius:8px}
html.lp-on.w-nagare .mock{opacity:var(--m0,1);transform:translate3d(calc((1 - var(--m0,1)) * 40px),0,0)}
.w-nagare .tile{border-radius:4px}