/* ============================================================
   弁当の世界（朝の調理場と、漆のお重）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：金の縁の漆のふたが、右上へ持ち上がって外れ、朱の縁の札が現れる。
   流れの3つ：お重の升目に、料理が1つずつ入るように。
   ============================================================ */

/* 見出しの下に、金の二本線 */
.w-bento .hero__h1::after{content:"";display:block;width:min(100%,calc(var(--h1-col) * .7));height:5px;margin-top:14px;
  border-top:1px solid #D9AE5C;border-bottom:1px solid #D9AE5C;opacity:.8}

/* 困りごとの一覧：お品書きの升目 */
.w-bento .toc__list{border-top:2px solid #D9AE5C}
.w-bento .toc__no{padding:2px 9px;border:1px solid #D9AE5C;border-radius:1px;background:rgba(154,46,31,.35);font-family:var(--mincho);letter-spacing:.12em}

/* ---------- 朱の縁の札と、漆のふた ---------- */
.w-bento .scene__voice{justify-items:center}
.w-bento .vcard{max-width:min(100%,560px);filter:drop-shadow(0 26px 30px rgba(0,0,0,.6))}
html.lp-on.w-bento .vcard{opacity:1;transform:translate3d(0,calc((1 - var(--eo,1)) * 24px),0)}
.w-bento .vcard__in{padding:34px 28px 32px;border-radius:6px;
  background:linear-gradient(180deg,#FDF8EE 0%,#F5EADA 100%);
  box-shadow:inset 0 0 0 7px #9A2E1F,inset 0 0 0 8.5px #D9AE5C,inset 0 0 0 13px #1A0D0B,inset 0 0 0 14px rgba(217,174,92,.5)}
/* ふた：動いている時だけ出す（止めた時と JS が無い時は、ふたは無い） */
.w-bento .vcard::after{content:none}
html.lp-on.w-bento .vcard::after{content:"";position:absolute;z-index:2;inset:-6px;border-radius:8px;pointer-events:none;
  background:
    radial-gradient(circle at 62% 46%,transparent 0 17%,#D9AE5C 17.4% 18.2%,transparent 18.6%),
    radial-gradient(circle at 70% 46%,transparent 0 17%,#D9AE5C 17.4% 18.2%,transparent 18.6%),
    radial-gradient(circle at 78% 46%,transparent 0 17%,#D9AE5C 17.4% 18.2%,transparent 18.6%),
    linear-gradient(135deg,#46302B 0%,#160B0A 45%,#060303 100%);
  box-shadow:inset 0 0 0 8px #160B0A,inset 0 0 0 9.5px #D9AE5C,0 30px 40px rgba(0,0,0,.6);
  opacity:calc(1 - var(--e2,1));
  transform:translate3d(calc(var(--eo,1) * 46%),calc(var(--eo,1) * -78%),0) rotate(calc(var(--eo,1) * 9deg))}
.w-bento .vcard__code{padding:2px 12px;border-radius:1px;background:#9A2E1F;color:#FFF6E8;font-family:var(--mincho);font-size:14px;letter-spacing:.14em}
.w-bento .vcard__voice .q{color:#9A2E1F}
.w-bento .badge{font-family:var(--mincho)}
html.lp-on.w-bento .vcard__in > *{opacity:calc(.25 + .75 * var(--eo,1))}

/* ---------- こう変わる ---------- */
.w-bento .scene__title::before{content:"";display:inline-block;width:.62em;height:.62em;margin-right:.45em;vertical-align:.02em;
  border:2px solid #D9AE5C;background:linear-gradient(#9A2E1F,#9A2E1F) center / 40% 40% no-repeat}

/* ---------- 流れ：お重の升目に、1つずつ入る ---------- */
.w-bento .flow__list{gap:6px;padding:7px;border:2px solid #D9AE5C;border-radius:4px;background:#9A2E1F;
  box-shadow:inset 0 0 0 3px #1A0D0B,0 18px 34px rgba(0,0,0,.5)}
.w-bento .flow__list li{border:0;border-radius:1px;background:linear-gradient(135deg,#2E120D,#170907);min-height:58px}
.w-bento .flow__list li + li::before{display:none}
.w-bento .flow__n{border-radius:50%;background:#D9AE5C;color:#1A1206;font-family:var(--mincho)}
html.lp-on.w-bento .flow__list li{opacity:1;transform:none}
html.lp-on.w-bento .flow__list li > *{opacity:var(--r,1);transform:translate3d(0,calc((1 - var(--r,1)) * -14px),0) scale(calc(.6 + .4 * var(--r,1)))}

/* ---------- 画面のイメージ：漆の盆にのせて出す ---------- */
.w-bento .scene__demo{padding:14px;border-radius:10px;background:linear-gradient(135deg,#2B1714,#0C0606);
  box-shadow:inset 0 0 0 1px rgba(217,174,92,.6),0 24px 50px rgba(0,0,0,.5)}
.w-bento .mock__body{box-shadow:0 10px 26px rgba(0,0,0,.5)}
html.lp-on.w-bento .mock{opacity:var(--m0,1);transform:translate3d(0,calc((1 - var(--m0,1)) * -30px),0) scale(calc(.94 + .06 * var(--m0,1)))}

@media (min-width:980px){
  .w-bento .scene__voice{justify-items:start}
  .w-bento .vcard{margin-left:5%}
  .w-bento .scene__demo{justify-items:center}
}