/* ============================================================
   ホームページの世界（机の上で組み上がるページ）の見た目。
   例の出方：声の札が、ブラウザの窓として上から降りてきて、ぴたりと置かれる。
   流れの3つ：点線の枠（下書き）に、部品が1つずつはまる。
   画面のイメージ：ブラウザの窓の中に置く。
   ============================================================ */
.w-homepage .hero__h1::after{content:"";display:block;width:min(100%,calc(var(--h1-col) * .7));height:10px;margin-top:16px;
  border:1.5px dashed rgba(44,93,143,.55);border-radius:3px}
.w-homepage .hero__eyebrow{letter-spacing:.12em}

.w-homepage .toc__list{border-top:0;display:grid;gap:8px}
.w-homepage .toc__list a{border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.7);padding:8px 12px}

/* ---------- 声の札：ブラウザの窓 ---------- */
.w-homepage .vcard{max-width:min(100%,640px);filter:drop-shadow(0 18px 30px rgba(60,45,25,.18))}
.w-homepage .vcard__in{padding:52px 24px 28px;border-radius:12px;box-shadow:0 0 0 1px rgba(29,36,48,.12)}
.w-homepage .vcard__in::before{content:"";position:absolute;left:0;right:0;top:0;height:32px;border-radius:12px 12px 0 0;
  background:
    radial-gradient(circle 5px at 18px 16px,#E5786D 98%,transparent),
    radial-gradient(circle 5px at 34px 16px,#F2C14E 98%,transparent),
    radial-gradient(circle 5px at 50px 16px,#7BC47F 98%,transparent),
    linear-gradient(#FFFFFF,#FFFFFF) 72px 9px / calc(100% - 100px) 14px no-repeat,
    #E8E3DA}
.w-homepage .vcard__code{padding:2px 10px;border-radius:4px;background:#2C5D8F;color:#fff;font-size:13px;letter-spacing:.08em}
.w-homepage .vcard__voice .q{color:#2C5D8F}
html.lp-on.w-homepage .vcard{opacity:var(--e1,1);transform:translate3d(0,calc((1 - var(--es,1)) * -70px),0)}
/* 置かれた瞬間に、まわりの点線の枠が消える */
.w-homepage .vcard::after{content:"";position:absolute;inset:-10px;border:1.5px dashed rgba(44,93,143,.6);border-radius:16px;opacity:0;pointer-events:none}
html.lp-on.w-homepage .vcard::after{opacity:calc(1 - var(--e2,1))}

.w-homepage .scene__title::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:12px;vertical-align:.08em;
  border:3px solid #2C5D8F;border-radius:3px}

/* ---------- 流れ：点線の枠に、部品がはまる ---------- */
.w-homepage .flow__list li{border:1.5px dashed rgba(44,93,143,.45);background:transparent}
.w-homepage .flow__list li::after{content:"";position:absolute;inset:-1.5px;border-radius:8px;background:#FFFFFF;
  box-shadow:0 6px 16px rgba(60,45,25,.12);z-index:-1}
.w-homepage .flow__list{isolation:isolate}
.w-homepage .flow__n{border-radius:4px;background:#2C5D8F;color:#fff}
html.lp-on.w-homepage .flow__list li::after{opacity:var(--r,1);transform:translate3d(0,calc((1 - var(--r,1)) * -18px),0)}
html.lp-on.w-homepage .flow__list li{opacity:calc(.35 + .65 * var(--r,1))}

/* ---------- 画面のイメージ：ブラウザの窓の中 ---------- */
.w-homepage .mock__body{border-radius:10px;padding-top:26px;background:#fff;box-shadow:0 22px 50px rgba(60,45,25,.22),0 0 0 1px rgba(29,36,48,.12)}
.w-homepage .mock__body::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;z-index:2;
  background:radial-gradient(circle 4px at 14px 13px,#E5786D 98%,transparent),radial-gradient(circle 4px at 27px 13px,#F2C14E 98%,transparent),
    radial-gradient(circle 4px at 40px 13px,#7BC47F 98%,transparent),#E8E3DA}
html.lp-on.w-homepage .mock{opacity:var(--m0,1);transform:translate3d(0,calc((1 - var(--m0,1)) * -30px),0)}
.w-homepage .tile{background:rgba(255,255,255,.75)}
.w-homepage .ask__more{margin-top:18px}