/* ============================================================
   不動産の世界（夕暮れの街並み）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：間取り図の壁の線が4辺に引かれ、窓と扉の印が入って、札になる。
   流れの3つ：廊下でつながる部屋のように。番号は、灯った窓。
   ============================================================ */

/* 見出しの下に、灯った窓の列 */
.w-fudosan .hero__h1::after{content:"";display:block;width:min(100%,calc(var(--h1-col) * .6));height:9px;margin-top:16px;
  background:linear-gradient(90deg,#F4C95D 0 7px,transparent 7px) left center / 14px 9px repeat-x;opacity:.85}
.w-fudosan .hero__eyebrow{letter-spacing:.18em}

/* 困りごとの一覧：番号は灯った窓 */
.w-fudosan .toc__list{border-top:2px solid rgba(244,201,93,.6)}
.w-fudosan .toc__no{padding:2px 9px;border-radius:1px;background:#F4C95D;color:#1A1404;box-shadow:0 0 14px rgba(244,201,93,.45)}

/* ---------- 間取り図の札 ---------- */
.w-fudosan .scene__voice{justify-items:start}
.w-fudosan .vcard{max-width:min(100%,600px);filter:drop-shadow(0 22px 36px rgba(2,5,25,.6))}
html.lp-on.w-fudosan .vcard{opacity:1;transform:none}
.w-fudosan .vcard__in{padding:34px 26px 40px 30px;border-radius:0;box-shadow:none;
  background:
    linear-gradient(#14204A,#14204A) left top / calc(var(--eo,1) * 100%) 6px no-repeat,
    linear-gradient(#14204A,#14204A) right top / 6px calc(var(--eo,1) * 100%) no-repeat,
    linear-gradient(#14204A,#14204A) right bottom / calc(var(--eo,1) * 100%) 6px no-repeat,
    linear-gradient(#14204A,#14204A) left bottom / 6px calc(var(--eo,1) * 100%) no-repeat,
    linear-gradient(rgba(20,32,74,.07) 1px,transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg,rgba(20,32,74,.07) 1px,transparent 1px) 0 0 / 18px 18px,
    #F5F3EC}
html.lp-on.w-fudosan .vcard__in > *{opacity:var(--e1,1)}
/* 窓の印（上の壁に、細い2本線） */
.w-fudosan .vcard__in::before{content:"";position:absolute;top:0;right:18%;width:22%;height:6px;
  background:linear-gradient(#14204A,#14204A) 0 1px / 100% 1px no-repeat,linear-gradient(#14204A,#14204A) 0 4px / 100% 1px no-repeat,#FFFCF2;
  border-left:2px solid #14204A;border-right:2px solid #14204A}
/* 扉の印（下の壁の切れ目と、開く向きの弧） */
.w-fudosan .vcard__in::after{content:"";position:absolute;left:12%;bottom:0;width:54px;height:54px;
  background:
    linear-gradient(#F5F3EC,#F5F3EC) left bottom / 54px 6px no-repeat,
    linear-gradient(#14204A,#14204A) left bottom / 2px 54px no-repeat,
    radial-gradient(circle at 0 100%,transparent 0 51px,rgba(20,32,74,.75) 51.5px 52.5px,transparent 53px)}
html.lp-on.w-fudosan .vcard__in::before,html.lp-on.w-fudosan .vcard__in::after{opacity:var(--e2,1)}
html.lp-on.w-fudosan .vcard__in::after{transform-origin:0 100%;transform:scaleY(var(--e2,1))}
.w-fudosan .vcard__code{padding:2px 10px;border:1.5px solid #14204A;font-size:13px;letter-spacing:.12em}
.w-fudosan .vcard__voice .q{color:#A7451E}

/* ---------- こう変わる ---------- */
.w-fudosan .scene__title::before{content:"";display:inline-block;width:.5em;height:.66em;margin-right:.45em;vertical-align:.02em;
  background:linear-gradient(#0E1640,#0E1640) center / 100% 2px no-repeat,linear-gradient(#0E1640,#0E1640) center / 2px 100% no-repeat,#F4C95D;
  box-shadow:0 0 18px rgba(244,201,93,.6)}

/* ---------- 流れ：廊下でつながる部屋 ---------- */
.w-fudosan .flow__list{gap:16px}
.w-fudosan .flow__list li{border:3px solid rgba(240,242,255,.82);border-radius:0;background:rgba(12,19,56,.82)}
.w-fudosan .flow__n{border-radius:1px;background:#F4C95D;color:#1A1404;box-shadow:0 0 16px rgba(244,201,93,.55)}
.w-fudosan .flow__list li + li::before{left:30px;top:-19px;width:14px;height:16px;background:none;
  border-left:2px dashed rgba(240,242,255,.6);border-right:2px dashed rgba(240,242,255,.6)}
html.lp-on.w-fudosan .flow__list li{opacity:calc(.2 + .8 * var(--r,1));transform:none;
  clip-path:inset(-22px calc((1 - var(--r,1)) * 100%) -4px -4px)}
html.lp-on.w-fudosan .flow__n{box-shadow:0 0 calc(var(--r,1) * 18px) rgba(244,201,93,.6)}

/* ---------- 画面のイメージ：窓に灯りがともるように ---------- */
.w-fudosan .mock__body{box-shadow:0 26px 60px rgba(2,5,25,.6),0 0 0 1px rgba(244,201,93,.5)}
html.lp-on.w-fudosan .mock{opacity:var(--m0,1);transform:translate3d(0,calc((1 - var(--m0,1)) * 24px),0)}
html.lp-on.w-fudosan .mock__body{box-shadow:0 26px 60px rgba(2,5,25,.6),0 0 0 1px rgba(244,201,93,.5),0 0 calc(var(--m,1) * 70px) rgba(244,201,93,.32)}

.w-fudosan .tags li{border-radius:2px}

@media (min-width:980px){
  .w-fudosan .vcard{margin-left:3%}
}