/* ============================================================
   飲食の世界（夜の厨房）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：伝票が、レールを右から流れてきて、揺れて止まる。
   流れの3つ：お品書きの木札が、横木に順に掛かる。
   ============================================================ */

/* のれんと提灯の下から、字が始まる */
.w-inshoku{--hero-top:clamp(140px,22vh,212px)}
@supports (height:1svh){.w-inshoku{--hero-top:clamp(140px,22svh,212px)}}
@media (min-width:980px){.w-inshoku{--hero-top:max(17vh,128px)}}

/* 困りごとの一覧は、お品書きのように */
.w-inshoku .toc__list{border-top:2px solid rgba(246,238,226,.5)}
.w-inshoku .toc__list a{border-bottom:1px dashed rgba(246,238,226,.3)}
.w-inshoku .toc__no{padding:1px 9px;border:1px solid var(--accent);border-radius:2px;font-family:var(--mincho);letter-spacing:.12em}

/* ---------- 伝票とレール ---------- */
.w-inshoku .scene__voice{align-content:start;justify-items:center;padding-top:0}
html:not(.lp-on).w-inshoku .scene__voice{padding-top:0}      /* 止めた時も、伝票はレールに付けておく */
.w-inshoku .scene__voice::before{content:"";position:absolute;z-index:2;left:calc(50% - 50vw);top:11vh;width:100vw;height:16px;
  background:linear-gradient(180deg,#6E6A64 0%,#F3F0EA 20%,#BEB9B0 46%,#67635D 74%,#262422 100%);
  box-shadow:0 14px 26px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.6)}
.w-inshoku .vcard{z-index:1;margin-top:calc(11vh + 9px);max-width:min(100%,540px);transform-origin:50% 0;
  filter:drop-shadow(0 24px 22px rgba(0,0,0,.55))}
html.lp-on.w-inshoku .vcard{opacity:1;
  transform:translate3d(calc((1 - var(--eo,1)) * 112vw),0,0) rotate(calc((1 - var(--es,1)) * 9deg + var(--sw,0deg)))}
.w-inshoku .vcard__in{padding:36px 24px 46px;border-radius:1px;box-shadow:none;
  background:
    linear-gradient(rgba(167,69,30,.34),rgba(167,69,30,.34)) 20px 72px / calc(100% - 40px) 1px no-repeat,
    linear-gradient(rgba(167,69,30,.34),rgba(167,69,30,.34)) 20px 75px / calc(100% - 40px) 1px no-repeat,
    linear-gradient(180deg,#F8F0DF 0%,#F0E4CC 100%);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 14px 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 14px 100%}
.w-inshoku .vcard__no{margin-bottom:22px}
.w-inshoku .vcard__code{padding:1px 12px;border:1.5px solid #A7451E;border-radius:2px;color:#A03F1A;font-family:var(--mincho);
  font-size:15px;letter-spacing:.16em}
.w-inshoku .badge{padding:1px 9px;border-width:2px;border-radius:3px;font-family:var(--mincho);letter-spacing:.1em;transform:rotate(-3deg)}
.w-inshoku .badge i{display:none}
/* 伝票が止まってから、「稼働中」の判が押される */
html.lp-on.w-inshoku .vcard .badge{opacity:var(--e2,1);transform:rotate(-3deg) scale(calc(1.7 - .7 * var(--e2,1)))}
.w-inshoku .vcard__voice{font-size:clamp(24px,6.7vw,38px)}

/* ---------- こう変わる ---------- */
.w-inshoku .scene__title::before{content:"";display:block;width:46px;height:3px;margin-bottom:16px;border-radius:2px;background:var(--accent)}

/* ---------- 流れ：木札が、横木に順に掛かる ---------- */
.w-inshoku .flow__list{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start;max-width:440px;padding-top:28px}
.w-inshoku .flow__list::before{content:"";position:absolute;left:-6px;right:-6px;top:4px;height:6px;border-radius:3px;
  background:linear-gradient(180deg,#8A5A30,#3A2311);box-shadow:0 6px 12px rgba(0,0,0,.5);transform-origin:0 50%}
html.lp-on.w-inshoku .flow__list::before{transform:scaleX(var(--fm,1))}
.w-inshoku .flow__list li{display:flex;flex-direction:row;align-items:center;gap:12px;height:14.4em;min-height:0;padding:30px 6px 14px;
  -webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;-webkit-text-orientation:upright;text-orientation:upright;border:1px solid rgba(255,214,160,.24);border-radius:3px 3px 6px 6px;
  background:
    radial-gradient(circle at 50% 13px,#0F0905 0 3.4px,rgba(15,9,5,0) 4px),
    linear-gradient(90deg,#2A1B0F 0%,#4B321D 24%,#3A2615 62%,#261709 100%);
  box-shadow:inset 0 1px 0 rgba(255,225,180,.2),0 14px 24px rgba(0,0,0,.55);transform-origin:50% -22px}
.w-inshoku .flow__list li::after{content:"";position:absolute;left:50%;top:-23px;width:2px;height:36px;margin-left:-1px;
  background:linear-gradient(180deg,#D8B57C,#8C6A3A)}
.w-inshoku .flow__list li + li::before{display:none}
.w-inshoku .flow__n{flex:none;-webkit-writing-mode:horizontal-tb;writing-mode:horizontal-tb;border-radius:2px;background:#A7451E;color:#fff}
.w-inshoku .flow__t{font-family:var(--mincho);font-size:17px;line-height:1.55;letter-spacing:.08em;color:#F8EAD3}
html.lp-on.w-inshoku .flow__list li{opacity:var(--r,1);
  transform:translate3d(0,calc((1 - var(--r,1)) * -30px),0) rotate(calc((1 - var(--r,1)) * -8deg))}

/* ---------- 画面のイメージ：カウンターの上を、灯りの方から滑ってくる ---------- */
.w-inshoku .mock__body{box-shadow:0 30px 60px rgba(0,0,0,.62),0 0 0 1px rgba(255,205,150,.24),-18px -14px 60px rgba(240,138,60,.16)}
html.lp-on.w-inshoku .mock{opacity:var(--m0,1);transform:translate3d(calc((1 - var(--m0,1)) * 48px),0,0)}

/* ---------- 自分の店の数字 ---------- */
.w-inshoku .big{padding-left:18px;border-left:3px solid var(--shu)}
.w-inshoku .big__row--a .big__v{text-shadow:0 0 40px rgba(242,154,74,.45),0 0 30px var(--bg)}

@media (min-width:980px){
  .w-inshoku .scene__voice{justify-items:start}
  .w-inshoku .vcard{margin-left:7%}
  .w-inshoku .flow__list{max-width:470px}
}