/* ============================================================
   小売・専門店の世界（夕方の店内）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：真鍮の縁の棚板が先に伸び、その上に声の札が上から置かれて、少し弾んで止まる。番号は値札のように揺れる。
   流れの3つ：品が棚の上に、ひとつずつ置かれる。
   ============================================================ */

/* 困りごとの一覧：値札の並ぶ品書き */
.w-kouri .toc__list{border-top:3px solid #B8914A}
.w-kouri .toc__list a{border-bottom:1px solid rgba(217,180,106,.22)}
.w-kouri .toc__no{position:relative;padding:2px 10px 2px 16px;border-radius:3px 12px 12px 3px;background:#D9B46A;color:#1C1406}
.w-kouri .toc__no::before{content:"";position:absolute;left:5px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#0E2B22}

/* ---------- 棚板が伸び、札が置かれる ---------- */
.w-kouri .scene__voice{justify-items:start}
.w-kouri .vcard{max-width:min(100%,600px);margin-bottom:22px}
.w-kouri .vcard::after{content:"";position:absolute;left:-16px;right:-16px;bottom:-20px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,#F3D99A 0,#C9A050 2px,#7C5A24 4px,#4E301A 4.5px,#2A180C 100%);
  box-shadow:0 22px 30px rgba(0,0,0,.6);transform-origin:0 50%}
html.lp-on.w-kouri .vcard{opacity:1;transform:none}
html.lp-on.w-kouri .vcard::after{transform:scaleX(var(--e1,1))}
.w-kouri .vcard__in{padding:30px 26px 32px;border-radius:4px;background:linear-gradient(180deg,#FFF9EC,#F4E8CF);
  box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 #FFFFFF}
html.lp-on.w-kouri .vcard__in{opacity:var(--ko,1);transform-origin:50% 100%;
  transform:translate3d(0,calc((1 - var(--kd,1)) * -90px),0) rotate(calc((1 - var(--kd,1)) * -2.5deg))}
/* 番号は、値札のように */
.w-kouri .vcard__code{position:relative;display:inline-block;padding:3px 13px 3px 20px;border-radius:3px 14px 14px 3px;
  background:#2F5D4A;color:#FBF5E8;font-size:13.5px;transform-origin:4px 50%;transform:rotate(var(--sw,0deg))}
.w-kouri .vcard__code::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#FBF5E8}
.w-kouri .vcard__voice .q{color:#9B2F22}

/* ---------- こう変わる：真鍮の値札の印 ---------- */
.w-kouri .scene__title::before{content:"";display:block;width:44px;height:20px;margin-bottom:14px;border-radius:3px 12px 12px 3px;
  background:radial-gradient(circle at 9px 50%,#0E2B22 0 3px,transparent 3.6px),linear-gradient(90deg,#F1D394,#B8914A)}

/* ---------- 流れ：品が棚の上に、ひとつずつ置かれる ---------- */
.w-kouri .flow__list{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;max-width:470px;padding-bottom:16px}
.w-kouri .flow__list::after{content:"";position:absolute;left:-8px;right:-8px;bottom:0;height:13px;border-radius:2px;
  background:linear-gradient(180deg,#F3D99A 0,#C9A050 2px,#7C5A24 4px,#4E301A 4.5px,#2A180C 100%);box-shadow:0 16px 22px rgba(0,0,0,.5);transform-origin:0 50%}
html.lp-on.w-kouri .flow__list::after{transform:scaleX(var(--fm,1))}
.w-kouri .flow__list li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:22px 12px 14px;border:0;
  border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#F7EBCF,#E8D4A6);color:#2A2112;
  box-shadow:inset 0 -10px 18px rgba(120,80,30,.18),0 6px 0 rgba(0,0,0,.25)}
.w-kouri .flow__list li::after{content:"";position:absolute;left:10px;right:10px;top:-6px;height:9px;border-radius:3px;
  background:linear-gradient(180deg,#F3D99A,#9C7330)}
.w-kouri .flow__list li:nth-child(2){padding-top:34px}
.w-kouri .flow__list li:nth-child(3){padding-top:28px}
.w-kouri .flow__list li + li::before{display:none}
.w-kouri .flow__n{border-radius:50%;background:#2F5D4A;color:#FBF5E8}
.w-kouri .flow__t{font-size:14.5px;line-height:1.55}
html.lp-on.w-kouri .flow__list li{opacity:clamp(0,calc(var(--r,1) * 3),1);transform:translate3d(0,calc((1 - var(--r,1)) * -46px),0)}

/* ---------- 画面のイメージ：ショーケースの真鍮の枠 ---------- */
.w-kouri .mock__body{box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 3px #B8914A,0 0 0 4px rgba(0,0,0,.5),0 0 60px rgba(242,180,100,.18)}
html.lp-on.w-kouri .mock{opacity:var(--m0,1);transform:translate3d(0,calc((1 - var(--m0,1)) * -40px),0)}

.w-kouri .tags li{border-color:rgba(217,180,106,.35)}

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