/* ============================================================
   会社の事務の世界（夜の事務所）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：斜めにずれて置かれた書類が、まっすぐにそろい（後ろの1枚も一緒に）、そろってから黄色い付箋がぺたっと貼られる。
   流れの3つ：付箋が、1枚ずつ貼られて並ぶ。
   画面のイメージ：斜めの所から、まっすぐにそろって置かれる（後ろに、もう1枚）。
   ============================================================ */

.w-jimu .hero__eyebrow{letter-spacing:.16em}
.w-jimu .hero__h1::after{content:"";display:block;width:64px;height:10px;margin-top:16px;background:#F2CF4A;transform:rotate(-2deg);
  box-shadow:0 3px 8px rgba(0,0,0,.35)}

/* 困りごとの一覧：ファイルの見出しのように、番号は黄色い付箋 */
.w-jimu .toc__list{border-top:1px solid rgba(238,241,244,.35)}
.w-jimu .toc__no{padding:3px 9px;border-radius:1px;background:#F2CF4A;color:#1A2028;text-shadow:none;transform:rotate(-2deg);box-shadow:0 2px 4px rgba(0,0,0,.35)}
.w-jimu .toc__list li:nth-child(2n) .toc__no{transform:rotate(1.5deg)}

/* ---------- 声の札：ずれた書類が、そろって置かれる ---------- */
.w-jimu .vcard{max-width:min(100%,600px);margin-top:16px}
html.lp-on.w-jimu .vcard{opacity:clamp(0,var(--e,1) * 2.4,1);
  transform:translate3d(calc((1 - var(--eo,1)) * -44px),calc((1 - var(--eo,1)) * 36px),0) rotate(calc((1 - var(--es,1)) * -11deg))}
.w-jimu .vcard__in{z-index:1;padding:30px 24px 30px;border-radius:2px;background:linear-gradient(160deg,#FAFBFC,#E3E8EE);
  box-shadow:0 24px 46px rgba(0,0,0,.5)}
.w-jimu .vcard__in::before{content:"";position:absolute;left:24px;right:24px;top:0;height:5px;background:#5D7590}
/* 後ろの1枚（一緒にそろう） */
.w-jimu .vcard::before{content:"";position:absolute;z-index:0;inset:0;border-radius:2px;background:#C9D1DB;box-shadow:0 16px 30px rgba(0,0,0,.4);
  transform:translate(8px,8px)}
html.lp-on.w-jimu .vcard::before{transform:translate(calc(8px + (1 - var(--eo,1)) * 30px),calc(8px - (1 - var(--eo,1)) * 14px)) rotate(calc((1 - var(--eo,1)) * 14deg))}
/* 付箋 */
.w-jimu .vcard::after{content:"";position:absolute;z-index:2;right:16px;top:-20px;width:62px;height:58px;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,0) 26%),repeating-linear-gradient(180deg,transparent 0 17px,rgba(60,50,10,.22) 17px 19px) 10px 6px / 42px 44px no-repeat,#F2CF4A;
  box-shadow:0 6px 10px rgba(0,0,0,.35);transform:rotate(5deg)}
html.lp-on.w-jimu .vcard::after{opacity:clamp(0,var(--e2,1) * 4,1);transform:rotate(calc(5deg + (1 - var(--e2,1)) * -20deg)) scale(calc(1.5 - .5 * var(--e2,1)))}
.w-jimu .vcard__code{padding:2px 10px;border-radius:2px;background:#1A2028;color:#F2CF4A;letter-spacing:.12em}

/* ---------- こう変わる：小さな付箋 ---------- */
.w-jimu .scene__title::before{content:"";display:block;width:26px;height:22px;margin-bottom:14px;background:#F2CF4A;transform:rotate(-6deg);
  box-shadow:0 3px 6px rgba(0,0,0,.35)}

/* ---------- 流れ：付箋が、1枚ずつ貼られる ---------- */
.w-jimu .flow__list{gap:14px;max-width:440px}
.w-jimu .flow__list li{min-height:58px;padding:12px 16px;border:0;border-radius:1px;background:linear-gradient(180deg,#F5D65E,#F2CF4A 30%,#EBC53C);
  box-shadow:0 8px 14px rgba(0,0,0,.4)}
.w-jimu .flow__list li:nth-child(1){transform:rotate(-1deg)}
.w-jimu .flow__list li:nth-child(2){background:linear-gradient(180deg,#F6BCB6,#F2A6A0 30%,#EA9891);transform:rotate(.8deg);margin-left:10px}
.w-jimu .flow__list li:nth-child(3){background:linear-gradient(180deg,#B6DDF0,#9FD0E8 30%,#90C5DF);transform:rotate(-.5deg);margin-left:20px}
.w-jimu .flow__list li + li::before{display:none}
.w-jimu .flow__n{border-radius:50%;background:#1A2028;color:#F5F7F9}
.w-jimu .flow__t{color:#1A2028}
html.lp-on.w-jimu .flow__list li{opacity:clamp(0,var(--r,1) * 3,1)}
html.lp-on.w-jimu .flow__list li:nth-child(1){transform:rotate(calc(-1deg + (1 - var(--r,1)) * -10deg)) scale(calc(1.25 - .25 * var(--r,1)))}
html.lp-on.w-jimu .flow__list li:nth-child(2){transform:rotate(calc(.8deg + (1 - var(--r,1)) * 9deg)) scale(calc(1.25 - .25 * var(--r,1)))}
html.lp-on.w-jimu .flow__list li:nth-child(3){transform:rotate(calc(-.5deg + (1 - var(--r,1)) * -8deg)) scale(calc(1.25 - .25 * var(--r,1)))}

/* ---------- 画面のイメージ：ずれた所から、そろって置かれる ---------- */
.w-jimu .mock__body{box-shadow:10px 10px 0 -1px #AEB8C5,0 28px 56px rgba(0,0,0,.6),0 0 0 1px rgba(238,241,244,.18)}
html.lp-on.w-jimu .mock{opacity:var(--m0,1);transform:translate3d(calc((1 - var(--m0,1)) * 36px),calc((1 - var(--m0,1)) * 20px),0) rotate(calc((1 - var(--m0,1)) * 7deg))}

.w-jimu .tags li{border-radius:3px}
.w-jimu .tile{border-radius:4px}