/* ============================================================
   運送・物流の世界（夜明け前の道）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：札が、左から車のように走り込んで止まる（赤い尾灯の筋が縮む）。止まると、行き先のピンが落ちる。
   流れの3つ：道筋の停車地が、点線でつながる。
   画面のイメージ：カーナビの画面のように、寝た角度から起き上がる。
   ============================================================ */

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

/* 困りごとの一覧は、道路の案内標識のように */
.w-unso .toc__no{padding:2px 9px;border-radius:4px;background:#13306E;color:#FFFFFF;border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 2px #13306E,inset 0 0 0 3px rgba(255,255,255,.5)}

/* ---------- 声の札：走り込んで止まり、ピンが落ちる ---------- */
.w-unso .vcard{max-width:min(100%,600px);margin-top:30px}
html.lp-on.w-unso .vcard{opacity:var(--e1,1);
  transform:translate3d(calc((1 - var(--eo,1)) * -105vw),0,0) skewX(calc((1 - var(--es,1)) * -16deg))}
.w-unso .vcard__in{padding:24px 22px 28px 40px;border-radius:6px;
  background:
    repeating-linear-gradient(180deg,#FFFFFF 0 12px,rgba(255,255,255,0) 12px 24px) 7px 0 / 2px 100% no-repeat,
    linear-gradient(#10204A,#10204A) 0 0 / 16px 100% no-repeat,
    linear-gradient(180deg,#F6F8FC,#E9EEF7);
  box-shadow:0 26px 50px rgba(0,0,0,.55),0 0 0 1px rgba(160,190,255,.25)}
/* 尾灯の筋（走っている間だけ長く、止まると縮む） */
.w-unso .vcard::before{content:"";position:absolute;right:100%;top:22%;height:56%;width:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,64,52,0),rgba(255,64,52,.55) 70%,rgba(255,180,170,.9));border-radius:40px 0 0 40px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
html.lp-on.w-unso .vcard::before{width:calc((1 - var(--e2,1)) * 80vw)}
/* 行き先のピン */
.w-unso .vcard::after{content:"";position:absolute;z-index:2;right:22px;top:-22px;width:30px;height:30px;border-radius:50% 50% 50% 0;
  background:radial-gradient(circle at 50% 50%,#FFFFFF 0 5px,#E8463B 6px);transform:rotate(-45deg);
  box-shadow:-4px 4px 10px rgba(0,0,0,.45)}
html.lp-on.w-unso .vcard::after{opacity:var(--e2,1);transform:translate3d(0,calc((1 - var(--e2,1)) * -46px),0) rotate(-45deg)}
.w-unso .vcard__code{padding:2px 12px;border-radius:4px;background:#13306E;color:#FFFFFF;letter-spacing:.12em}
.w-unso .vcard__voice .q{color:#C8392D}

/* ---------- こう変わる：進む向きの印 ---------- */
.w-unso .scene__title::before{content:"";display:inline-block;width:13px;height:13px;margin:0 16px 0 2px;vertical-align:.14em;
  border-top:3.5px solid var(--accent);border-right:3.5px solid var(--accent);transform:rotate(45deg)}

/* ---------- 流れ：停車地が点線でつながる ---------- */
.w-unso .flow__list{gap:16px;max-width:460px}
.w-unso .flow__list li{grid-template-columns:32px 1fr;min-height:48px;padding:4px 0;border:0;border-radius:0;background:none}
.w-unso .flow__n{width:32px;height:32px;border-radius:50%;background:#10204A;color:#FFFFFF;box-shadow:0 0 0 2.5px #FF6A5C,0 0 16px rgba(255,106,92,.55)}
.w-unso .flow__list li:last-child .flow__n{background:#FF5A4E;color:#160404;box-shadow:0 0 0 2.5px #FFFFFF,0 0 18px rgba(255,106,92,.8)}
.w-unso .flow__list li + li::before{left:15px;top:-22px;width:2px;height:26px;background:repeating-linear-gradient(180deg,#EEF2FA 0 4px,rgba(238,242,250,0) 4px 8px)}
.w-unso .flow__t{text-shadow:0 0 12px var(--bg)}
html.lp-on.w-unso .flow__list li{opacity:calc(.2 + .8 * var(--r,1));transform:translate3d(calc((1 - var(--r,1)) * -26px),0,0)}

/* ---------- 画面のイメージ：カーナビの画面のように起き上がる ---------- */
.w-unso .mock{transform-origin:50% 100%}
.w-unso .mock__body{box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(140,180,255,.35),0 0 46px rgba(80,140,255,.2)}
html.lp-on.w-unso .mock{opacity:var(--m0,1);transform:perspective(900px) rotateX(calc((1 - var(--m0,1)) * 42deg)) translate3d(0,calc((1 - var(--m0,1)) * 40px),0)}

.w-unso .tags li{border-radius:4px}

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