/* ============================================================
   卸売・問屋の世界（朝の倉庫）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：段ボール箱が上から置かれて弾み、ふたの2枚が左右に開いて、中のラベル（声）が見える。
   流れの3つ：箱が、ローラーのコンベアを順に滑ってくる。
   画面のイメージ：右からコンベアに乗って届く（下にローラー）。
   ============================================================ */

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

/* 困りごとの一覧は、棚の札のように */
.w-oroshi .toc__no{padding:1px 9px;border-radius:1px;background:#C9975B;color:#1E140A;box-shadow:0 2px 0 #8A6236}

/* ---------- 声の札：箱が置かれて、ふたが開く ---------- */
.w-oroshi .vcard{max-width:min(100%,580px);margin:22px 11px 0;perspective:1100px}
html.lp-on.w-oroshi .vcard{opacity:var(--e1,1);transform:translate3d(0,calc((1 - var(--es,1)) * -70px),0)}
.w-oroshi .vcard__in{padding:26px 24px 30px;border-radius:2px;border:2px solid #7A5530;
  background:linear-gradient(180deg,#FFFDF8,#F6EFE2);
  box-shadow:0 0 0 9px #C9975B,0 0 0 11px #8A6236,0 30px 46px rgba(0,0,0,.55)}
/* ふた（左右の2枚。真ん中にテープ） */
.w-oroshi .vcard::before,.w-oroshi .vcard::after{content:"";position:absolute;z-index:3;top:-11px;bottom:-11px;width:calc(50% + 11px);display:none;
  pointer-events:none;box-shadow:inset 0 0 0 1px rgba(80,45,15,.4)}
.w-oroshi .vcard::before{left:-11px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(0,0,0,0) calc(100% - 22px),rgba(242,222,182,.95) calc(100% - 22px)),
    linear-gradient(160deg,#DDB077,#C08C52 60%,#A97842)}
.w-oroshi .vcard::after{right:-11px;transform-origin:100% 50%;
  background:linear-gradient(90deg,rgba(242,222,182,.95) 22px,rgba(0,0,0,0) 22px),
    linear-gradient(200deg,#D3A468,#B5814A 60%,#9C6D3B)}
html.lp-on.w-oroshi .vcard::before,html.lp-on.w-oroshi .vcard::after{display:block;opacity:calc(1 - var(--e2,1))}
html.lp-on.w-oroshi .vcard::before{transform:rotateY(calc(var(--e2,1) * -118deg))}
html.lp-on.w-oroshi .vcard::after{transform:rotateY(calc(var(--e2,1) * 118deg))}
.w-oroshi .vcard__code{padding:2px 12px;border:1.5px solid #7A5530;border-radius:1px;color:#5E3E1E;letter-spacing:.12em;background:#F3E3C8}
.w-oroshi .vcard__voice .q{color:#A7451E}

/* ---------- こう変わる：箱の印 ---------- */
.w-oroshi .scene__title::before{content:"";display:inline-block;width:20px;height:16px;margin-right:13px;vertical-align:.02em;border-radius:1px;
  background:linear-gradient(90deg,rgba(0,0,0,0) 8px,#F2DEB6 8px 12px,rgba(0,0,0,0) 12px),#C9975B;box-shadow:0 3px 0 #8A6236}

/* ---------- 流れ：箱がコンベアを滑ってくる ---------- */
.w-oroshi .flow__list{position:relative;gap:10px;max-width:460px;padding-left:22px}
.w-oroshi .flow__list::before{content:"";position:absolute;left:0;top:-4px;bottom:-4px;width:12px;border-radius:6px;
  background:repeating-linear-gradient(180deg,#A6B2C6 0 5px,#3E4B66 5px 9px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 4px 10px rgba(0,0,0,.5)}
html.lp-on.w-oroshi .flow__list::before{background-position:0 calc(var(--fm,1) * 72px)}
.w-oroshi .flow__list li{padding:10px 44px 10px 12px;border:0;border-radius:2px;color:#1E140A;
  background:linear-gradient(180deg,#D7A96E,#B5844C);box-shadow:inset 0 -3px 0 rgba(0,0,0,.16),inset 0 1px 0 rgba(255,240,210,.5),0 8px 14px rgba(0,0,0,.45)}
.w-oroshi .flow__list li::after{content:"";position:absolute;top:0;bottom:0;right:16px;width:14px;background:rgba(242,222,182,.8)}
.w-oroshi .flow__list li + li::before{display:none}
.w-oroshi .flow__n{background:#14213D;color:#F4EFE6}
.w-oroshi .flow__t{color:#1E140A}
html.lp-on.w-oroshi .flow__list li{opacity:var(--r,1);transform:translate3d(0,calc((1 - var(--r,1)) * -40px),0)}

/* ---------- 画面のイメージ：コンベアに乗って届く ---------- */
.w-oroshi .scene__demo{position:relative;padding-bottom:22px}
.w-oroshi .scene__demo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;border-radius:6px;
  background:repeating-linear-gradient(90deg,#A6B2C6 0 9px,#3E4B66 9px 14px);box-shadow:0 6px 12px rgba(0,0,0,.5)}
.w-oroshi .mock__body{border-radius:10px;box-shadow:0 26px 54px rgba(0,0,0,.55),0 0 0 1px rgba(221,168,103,.3)}
html.lp-on.w-oroshi .mock{opacity:var(--m0,1);transform:translate3d(calc((1 - var(--m0,1)) * 90px),0,0)}

.w-oroshi .tags li{border-radius:2px}
.w-oroshi .tile{border-radius:2px}

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