/* ============================================================
   士業の世界（書斎）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：罫の入った紙が、上から机に置かれ（後ろにもう1枚）、置かれてから、右上に朱の「受付」印が押される。
   流れの3つ：書類が1枚ずつ置かれて、少しずれて重なる。番号は朱の丸印。
   画面のイメージ：クリップで留めた書類として、置かれる。
   ============================================================ */

.w-shigyo .hero__eyebrow{letter-spacing:.24em}
.w-shigyo .hero__h1::after{content:"";display:block;width:min(64%,320px);height:2px;margin-top:16px;border-radius:2px;
  background:linear-gradient(90deg,rgba(243,238,228,0),rgba(243,238,228,.75) 18%,rgba(243,238,228,.75) 70%,rgba(243,238,228,0))}

/* 困りごとの一覧：帳簿の罫と、朱の枠の番号 */
.w-shigyo .toc__list{border-top:1px solid rgba(243,238,228,.45);border-bottom:1px solid rgba(243,238,228,.45)}
.w-shigyo .toc__list li + li a{border-top:0}
.w-shigyo .toc__no{padding:1px 8px;border:1.5px solid var(--accent);border-radius:3px;font-family:var(--mincho);letter-spacing:.1em}

/* ---------- 声の札：紙が置かれ、朱印が押される ---------- */
.w-shigyo .vcard{max-width:min(100%,600px);margin-top:18px}
html.lp-on.w-shigyo .vcard{opacity:clamp(0,var(--e,1) * 2.2,1);
  transform:translate3d(0,calc((1 - var(--eo,1)) * -34px),0) scale(calc(1.06 - .06 * var(--eo,1))) rotate(calc((1 - var(--eo,1)) * 2.5deg))}
.w-shigyo .vcard__in{z-index:1;padding:30px 24px 30px 34px;border-radius:1px;box-shadow:0 26px 44px rgba(0,4,14,.55);
  background:
    linear-gradient(90deg,transparent 18px,rgba(194,59,38,.45) 18px 19px,transparent 19px),
    repeating-linear-gradient(180deg,transparent 0 33px,rgba(30,44,82,.1) 33px 34px),
    linear-gradient(160deg,#FAF7EF,#EEE7D8)}
/* 後ろに、もう1枚 */
.w-shigyo .vcard::before{content:"";position:absolute;z-index:0;inset:0;border-radius:1px;background:#DCD3C0;
  box-shadow:0 18px 30px rgba(0,4,14,.45);transform:translate(9px,10px) rotate(1.6deg)}
html.lp-on.w-shigyo .vcard::before{transform:translate(calc(9px * var(--eo,1)),calc(10px * var(--eo,1))) rotate(calc(1.6deg * var(--eo,1)))}
/* 朱の「受付」印 */
.w-shigyo .vcard::after{content:"受付";position:absolute;z-index:2;right:16px;top:14px;display:grid;place-items:center;width:58px;height:58px;
  border:3px solid #C23B26;border-radius:9px;color:#C23B26;font:800 17px/1.05 var(--mincho);letter-spacing:.1em;
  -webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;background:none;transform:rotate(-9deg);
  -webkit-mask:radial-gradient(circle at 30% 70%,rgba(0,0,0,.55) 0 1.2px,#000 1.8px) 0 0 / 9px 8px;
          mask:radial-gradient(circle at 30% 70%,rgba(0,0,0,.55) 0 1.2px,#000 1.8px) 0 0 / 9px 8px}
html.lp-on.w-shigyo .vcard::after{opacity:clamp(0,var(--e2,1) * 3,1);transform:rotate(-9deg) scale(calc(2.3 - 1.3 * var(--e2,1)))}
.w-shigyo .vcard__code{padding:1px 10px;border:1.5px solid #14213A;border-radius:2px;font-family:var(--mincho);letter-spacing:.14em}
.w-shigyo .vcard__label{letter-spacing:.24em}
.w-shigyo .vcard__voice .q{color:#B33620}

/* ---------- こう変わる：小さな朱の角印 ---------- */
.w-shigyo .scene__title::before{content:"";display:inline-block;width:15px;height:15px;margin-right:12px;vertical-align:.08em;
  border:2.5px solid var(--accent);border-radius:3px;transform:rotate(-8deg)}

/* ---------- 流れ：書類が1枚ずつ置かれて、重なる ---------- */
.w-shigyo .flow__list{gap:0;max-width:440px}
.w-shigyo .flow__list li{min-height:58px;margin-top:-6px;padding:14px 16px 14px 14px;border:0;border-radius:1px;
  background:linear-gradient(160deg,#F8F4EA,#E7E0D1);box-shadow:0 10px 22px rgba(0,4,14,.5)}
.w-shigyo .flow__list li:first-child{margin-top:0}
.w-shigyo .flow__list li:nth-child(1){transform:rotate(-1.2deg)}
.w-shigyo .flow__list li:nth-child(2){margin-left:14px;transform:rotate(.9deg)}
.w-shigyo .flow__list li:nth-child(3){margin-left:28px;transform:rotate(-.6deg)}
.w-shigyo .flow__list li + li::before{display:none}
.w-shigyo .flow__n{width:30px;height:30px;border:2px solid #C23B26;border-radius:50%;background:none;color:#B33620;font-family:var(--mincho)}
.w-shigyo .flow__t{color:#14213A}
html.lp-on.w-shigyo .flow__list li{opacity:clamp(0,var(--r,1) * 2.5,1)}
html.lp-on.w-shigyo .flow__list li:nth-child(1){transform:translate3d(calc((1 - var(--r,1)) * 60px),calc((1 - var(--r,1)) * -16px),0) rotate(calc(-1.2deg + (1 - var(--r,1)) * 8deg))}
html.lp-on.w-shigyo .flow__list li:nth-child(2){transform:translate3d(calc((1 - var(--r,1)) * 60px),calc((1 - var(--r,1)) * -16px),0) rotate(calc(.9deg + (1 - var(--r,1)) * -7deg))}
html.lp-on.w-shigyo .flow__list li:nth-child(3){transform:translate3d(calc((1 - var(--r,1)) * 60px),calc((1 - var(--r,1)) * -16px),0) rotate(calc(-.6deg + (1 - var(--r,1)) * 6deg))}

/* ---------- 画面のイメージ：クリップで留めた書類 ---------- */
.w-shigyo .mock{position:relative}
.w-shigyo .mock::before{content:"";position:absolute;z-index:3;left:26px;top:-16px;width:16px;height:50px;border:3px solid #C9CFD9;border-radius:8px;
  box-shadow:1px 2px 2px rgba(0,0,0,.35)}
.w-shigyo .mock::after{content:"";position:absolute;z-index:3;left:31px;top:-8px;width:6px;height:34px;border:2.5px solid #AEB5C1;border-radius:4px}
.w-shigyo .mock__body{border-radius:4px;box-shadow:0 26px 50px rgba(0,4,14,.6),8px 9px 0 -1px #D5CCB8,8px 9px 18px rgba(0,4,14,.4)}
html.lp-on.w-shigyo .mock{opacity:var(--m0,1);transform:translate3d(0,calc((1 - var(--m0,1)) * -26px),0) rotate(calc((1 - var(--m0,1)) * -4deg))}

.w-shigyo .tags li{border-radius:2px}
.w-shigyo .tile,.w-shigyo .smp{border-radius:3px}