/* ============================================================
   美容の世界（鏡と灯り）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：上がアーチの鏡（真鍮の縁）が、横から回ってこちらを向き、ぼやけた映りが澄んで、光の筋が走る。上に電球が灯る。
   流れの3つ：真鍮の輪の番号と、丸い札。
   ============================================================ */

/* 見出しの下に、真鍮の細い線と小さな輪 */
.w-biyo .hero__h1::after{content:"";display:block;width:min(100%,calc(var(--h1-col) * .62));height:10px;margin-top:14px;
  background:radial-gradient(circle at 5px 5px,transparent 0 3px,#8C5E2A 3.2px 4.6px,transparent 5px) left center / 10px 10px no-repeat,
    linear-gradient(#B88C4A,#B88C4A) 14px center / calc(100% - 14px) 1px no-repeat}
.w-biyo .hero__eyebrow{letter-spacing:.2em}

/* 困りごとの一覧 */
.w-biyo .toc__list{border-top:1px solid #B88C4A}
.w-biyo .toc__no{padding:2px 11px;border:1px solid #B88C4A;border-radius:999px;background:rgba(255,251,250,.7)}

/* ---------- 鏡の札 ---------- */
.w-biyo .scene__voice{justify-items:center;perspective:1100px}
.w-biyo .vcard{max-width:min(100%,520px);margin-top:30px}
html.lp-on.w-biyo .vcard{opacity:var(--e1,1);transform-origin:50% 60%;
  transform:rotateY(calc((1 - var(--eo,1)) * 74deg)) scale(calc(.9 + .1 * var(--eo,1)));
  filter:blur(calc((1 - var(--e1,1)) * 9px))}
.w-biyo .vcard__in{overflow:hidden;padding:64px 28px 34px;border-radius:260px 260px 18px 18px / 130px 130px 18px 18px;
  background:linear-gradient(165deg,#FFFFFF 0%,#FBF3F4 50%,#EFE1E4 100%);
  box-shadow:0 0 0 3px #B88C4A,0 0 0 7px #F0D9A6,0 0 0 8.5px #8A6430,0 34px 56px rgba(120,64,74,.28)}
@media (max-width:420px){.w-biyo .vcard__in{padding-top:56px;border-radius:200px 200px 16px 16px / 92px 92px 16px 16px}}
/* 光の筋（映ってから、左上から右下へ走る） */
.w-biyo .vcard__in::after{content:"";position:absolute;inset:-10% -60%;pointer-events:none;
  background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%);transform:translate3d(60%,0,0);opacity:0}
html.lp-on.w-biyo .vcard__in::after{opacity:calc(1 - var(--e2,1) * var(--e2,1));transform:translate3d(calc(-60% + var(--e2,1) * 120%),0,0)}
/* 鏡の上の電球 */
.w-biyo .vcard::before{content:"";position:absolute;z-index:2;left:18%;right:18%;top:-30px;height:16px;
  background:radial-gradient(circle,#FFFDF5 0 4px,#E3B873 4.5px 5.8px,rgba(255,200,130,.45) 6px,transparent 10px) center / 38px 16px repeat-x}
html.lp-on.w-biyo .vcard::before{opacity:var(--e2,1)}
.w-biyo .vcard__no{justify-content:center}
.w-biyo .vcard__label{text-align:center}
.w-biyo .vcard__code{padding:2px 14px;border-radius:999px;background:#2A1A1F;color:#FFF6F2;font-size:13px;letter-spacing:.14em}
.w-biyo .vcard__voice .q{color:#9A5A64}

/* ---------- こう変わる ---------- */
.w-biyo .scene__title::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.4em;vertical-align:.04em;border-radius:50%;
  border:3px solid #B88C4A;background:radial-gradient(circle at 35% 35%,#FFFFFF,#E9D9DC)}

/* ---------- 流れ：丸い札 ---------- */
.w-biyo .flow__list li{border:1px solid rgba(184,140,74,.55);border-radius:999px;background:rgba(255,251,250,.82);padding:9px 20px 9px 10px;
  box-shadow:0 10px 24px rgba(120,64,74,.12)}
.w-biyo .flow__n{border-radius:50%;background:#2A1A1F;color:#FFF6F2;box-shadow:0 0 0 2px #FFFBFA,0 0 0 3.5px #B88C4A}
.w-biyo .flow__list li + li::before{left:32px;background:#B88C4A;width:1px}
html.lp-on.w-biyo .flow__list li{opacity:var(--r,1);transform:translate3d(calc((1 - var(--r,1)) * 34px),0,0)}

/* ---------- 画面のイメージ：鏡のように回って向く ---------- */
.w-biyo .scene__demo{perspective:1100px}
.w-biyo .mock__body{box-shadow:0 0 0 1px rgba(184,140,74,.7),0 30px 60px rgba(120,64,74,.25)}
html.lp-on.w-biyo .mock{opacity:var(--m0,1);transform:rotateY(calc((1 - var(--m0,1)) * 50deg));transform-origin:0 50%}

.w-biyo .tags li{border-color:rgba(184,140,74,.5)}

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