/* ============================================================
   建築の世界（青焼きの図面）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：図面の紙が左から広がり、上に寸法線が伸びる。
   流れの3つ：工程表の棒が、段々に伸びてつながる。
   ============================================================ */

/* 見出しの下に、寸法線を1本 */
.w-kenchiku .hero__h1::after{content:"";display:block;width:min(100%,calc(var(--h1-col) * .86));height:9px;margin-top:12px;
  border-left:1px solid #EAF3FF;border-right:1px solid #EAF3FF;opacity:.55;
  background:linear-gradient(#EAF3FF,#EAF3FF) center / 100% 1px no-repeat}
.w-kenchiku .hero__eyebrow{letter-spacing:.2em}

/* 困りごとの一覧は、図面の一覧表のように */
.w-kenchiku .toc__list{border-top:2px solid #EAF3FF;border-bottom:2px solid #EAF3FF}
.w-kenchiku .toc__list li:last-child a{border-bottom:0}
.w-kenchiku .toc__list a{gap:0;padding:0 4px 0 0}
.w-kenchiku .toc__no{align-self:stretch;display:grid;place-items:center;padding:0 12px;border-right:1px solid var(--line);letter-spacing:.06em}
.w-kenchiku .toc__t{padding:10px 12px}

/* ---------- 図面の紙が広がる ---------- */
.w-kenchiku .scene__voice{justify-items:start}
.w-kenchiku .vcard{max-width:min(100%,620px);margin-top:26px;filter:drop-shadow(0 20px 26px rgba(2,10,24,.6))}
html.lp-on.w-kenchiku .vcard{opacity:1;transform:none}
.w-kenchiku .vcard__in{padding:26px 24px 30px 28px;border-radius:0;box-shadow:none;background-color:#EEF4FB;
  background-image:linear-gradient(rgba(11,37,69,.075) 1px,rgba(11,37,69,0) 1px),linear-gradient(90deg,rgba(11,37,69,.075) 1px,rgba(11,37,69,0) 1px);
  background-size:22.75px 22.75px}
html.lp-on.w-kenchiku .vcard__in{clip-path:inset(0 calc((1 - var(--eo,1)) * 100%) 0 0)}
/* 巻いてあった紙の端（広がる先を進み、広がりきると消える） */
.w-kenchiku .vcard::after{content:"";position:absolute;top:-5px;bottom:-5px;left:calc(var(--eo,1) * 100% - 15px);width:30px;border-radius:15px;
  background:linear-gradient(90deg,#8CA3BF 0%,#FFFFFF 36%,#DCE7F3 60%,#6F86A6 100%);box-shadow:12px 0 22px rgba(2,10,24,.5);opacity:0}
html.lp-on.w-kenchiku .vcard::after{opacity:calc(1 - var(--e2,1))}
/* 上の寸法線（紙が広がってから、左から右へ引かれる） */
.w-kenchiku .vcard::before{content:"3,640";position:absolute;left:0;right:0;top:-27px;height:15px;
  color:#EAF3FF;font:600 12px/15px var(--gothic);letter-spacing:.1em;text-align:center;
  border-left:1px solid #EAF3FF;border-right:1px solid #EAF3FF;
  background:
    linear-gradient(#EAF3FF,#EAF3FF) left center / calc(50% - 30px) 1px no-repeat,
    linear-gradient(#EAF3FF,#EAF3FF) right center / calc(50% - 30px) 1px no-repeat}
html.lp-on.w-kenchiku .vcard::before{clip-path:inset(-3px calc((1 - var(--e2,1)) * 100%) -3px -1px)}
.w-kenchiku .scene:nth-of-type(2) .vcard::before{content:"2,730"}
.w-kenchiku .scene:nth-of-type(3) .vcard::before{content:"4,550"}
.w-kenchiku .scene:nth-of-type(4) .vcard::before{content:"1,820"}
.w-kenchiku .scene:nth-of-type(5) .vcard::before{content:"5,460"}
.w-kenchiku .vcard__code{padding:2px 12px;border:1.5px solid #0B2545;font-size:13px;letter-spacing:.12em}
.w-kenchiku .vcard__voice .q{color:#0B2545;opacity:.45}

/* ---------- こう変わる ---------- */
.w-kenchiku .scene__title::before{content:"";display:inline-block;width:0;height:0;margin-right:12px;vertical-align:.04em;
  border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:15px solid var(--accent)}

/* ---------- 流れ：工程表の棒が、段々に伸びる ---------- */
.w-kenchiku .flow__list{gap:16px}
.w-kenchiku .flow__list li{min-height:50px;padding:8px 10px 10px 0;border:0;border-radius:0;background:none}
.w-kenchiku .flow__list li:nth-child(2){margin-left:9%}
.w-kenchiku .flow__list li:nth-child(3){margin-left:18%}
.w-kenchiku .flow__list li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--accent);transform-origin:0 50%}
.w-kenchiku .flow__list li + li::before{left:0;top:-16px;width:1px;height:16px;background:#EAF3FF}
.w-kenchiku .flow__n{border:1.5px solid #EAF3FF;border-radius:0;background:none;color:#EAF3FF}
.w-kenchiku .flow__t{text-shadow:0 0 12px var(--bg)}
html.lp-on.w-kenchiku .flow__list li{opacity:calc(.15 + .85 * var(--r,1));transform:none}
html.lp-on.w-kenchiku .flow__list li::after{transform:scaleX(var(--r,1))}

/* ---------- 画面のイメージ：図面に貼った詳細図のように、角に印 ---------- */
.w-kenchiku .scene__demo{position:relative;padding:16px 0}
.w-kenchiku .scene__demo::before,.w-kenchiku .scene__demo::after{content:"";position:absolute;width:24px;height:24px;border:1.5px solid #EAF3FF;opacity:.85}
.w-kenchiku .scene__demo::before{left:-8px;top:0;border-right:0;border-bottom:0}
.w-kenchiku .scene__demo::after{right:-8px;bottom:0;border-left:0;border-top:0}
.w-kenchiku .mock__body{border-radius:6px;box-shadow:0 22px 50px rgba(2,10,24,.6),0 0 0 1px rgba(234,243,255,.4)}
html.lp-on.w-kenchiku .mock{opacity:var(--m0,1);transform:scale(calc(.94 + .06 * var(--m0,1)))}

/* 札・箱の角は、図面らしく四角く */
.w-kenchiku .tags li{border-radius:0}
.w-kenchiku .tile,.w-kenchiku .smp{border-radius:2px}

@media (min-width:980px){
  .w-kenchiku .vcard{margin-left:0}
}