/* ============================================================
   介護の世界（朝の部屋）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：右上から斜めの光が差し込むように、札が現れ、光の帯が通り抜ける。
   流れの3つ：木の手すりに、受け金具で順に掛かる。
   ============================================================ */

/* 見出しの下に、木の手すり */
.w-kaigo .hero__h1::after{content:"";display:block;width:min(100%,calc(var(--h1-col) * .74));height:8px;margin-top:16px;border-radius:4px;
  background:linear-gradient(180deg,#E2AE78 0%,#B97D45 45%,#7E4F27 100%);box-shadow:0 4px 0 rgba(120,80,40,.15)}
.w-kaigo .hero__eyebrow{letter-spacing:.16em}

/* 困りごとの一覧 */
.w-kaigo .toc__list{border-top:2px solid rgba(156,70,20,.45)}
.w-kaigo .toc__no{padding:2px 10px;border-radius:999px;background:#9C4614;color:#FFFFFF}

/* ---------- 光が差して現れる札 ---------- */
.w-kaigo .scene__voice{justify-items:center}
.w-kaigo .vcard{max-width:min(100%,560px)}
html.lp-on.w-kaigo .vcard{opacity:1;transform:none}
.w-kaigo .vcard__in{overflow:hidden;padding:30px 26px 32px;border-radius:16px;
  background:linear-gradient(160deg,#FFFFFF 0%,#FFF8EE 60%,#FCEBD6 100%);
  box-shadow:0 0 0 1px rgba(200,140,80,.28),0 30px 60px rgba(160,96,40,.2),-30px -24px 80px rgba(255,214,150,.55)}
html.lp-on.w-kaigo .vcard__in{clip-path:polygon(calc(100% - var(--eo,1) * 160%) 0,140% 0,140% 100%,calc(100% - var(--eo,1) * 160% + 60%) 100%)}
/* 通り抜ける光の帯 */
.w-kaigo .vcard__in::after{content:"";position:absolute;inset:-20% -50%;pointer-events:none;opacity:0;
  background:linear-gradient(240deg,transparent 40%,rgba(255,226,170,.85) 50%,transparent 60%)}
html.lp-on.w-kaigo .vcard__in::after{opacity:calc(1 - var(--e2,1));transform:translate3d(calc(50% - var(--eo,1) * 100%),0,0)}
.w-kaigo .vcard__code{padding:2px 12px;border-radius:999px;background:#9C4614;color:#FFFFFF;font-size:13px;letter-spacing:.12em}
.w-kaigo .vcard__voice .q{color:#B5651E}

/* ---------- こう変わる ---------- */
.w-kaigo .scene__title::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.45em;vertical-align:.04em;border-radius:50%;
  background:radial-gradient(circle,#FFF4DE 0 30%,#F2A65A 31% 60%,rgba(242,166,90,0) 61%);box-shadow:0 0 16px 4px rgba(242,166,90,.45)}

/* ---------- 流れ：木の手すりに掛かる ---------- */
.w-kaigo .flow__list{position:relative;gap:14px;padding-left:30px}
.w-kaigo .flow__list::before{content:"";position:absolute;left:0;top:-6px;bottom:-6px;width:10px;border-radius:5px;
  background:linear-gradient(90deg,#E2AE78 0%,#B97D45 45%,#7E4F27 100%);box-shadow:3px 4px 0 rgba(120,80,40,.15);transform-origin:50% 0}
html.lp-on.w-kaigo .flow__list::before{transform:scaleY(var(--fm,1))}
.w-kaigo .flow__list li{border:1px solid rgba(200,140,80,.3);border-radius:14px;background:rgba(255,252,246,.92);box-shadow:0 10px 24px rgba(160,96,40,.12)}
.w-kaigo .flow__list li::after{content:"";position:absolute;left:-21px;top:50%;width:21px;height:4px;margin-top:-2px;background:#B9A48A}
.w-kaigo .flow__list li + li::before{display:none}
.w-kaigo .flow__n{border-radius:50%;background:#9C4614;color:#FFFFFF}
html.lp-on.w-kaigo .flow__list li{opacity:var(--r,1);transform:translate3d(calc((1 - var(--r,1)) * 22px),0,0)}

/* ---------- 画面のイメージ：朝の光の中に ---------- */
.w-kaigo .mock__body{box-shadow:0 0 0 1px rgba(200,140,80,.28),0 26px 56px rgba(160,96,40,.22),-26px -22px 70px rgba(255,214,150,.6)}
html.lp-on.w-kaigo .mock{opacity:var(--m0,1);transform:translate3d(calc((1 - var(--m0,1)) * 30px),calc((1 - var(--m0,1)) * -20px),0)}

.w-kaigo .tags li{border-color:rgba(200,140,80,.35)}

@media (min-width:980px){
  .w-kaigo .scene__voice{justify-items:start}
  .w-kaigo .vcard{margin-left:6%}
}