/* ============================================================
   画像の世界（並ぶ紙と色の見本）の見た目。
   例の出方：声の札が、刷り上がった紙として傾いて落ちてきて、まっすぐに置かれる。四隅にトンボ。
   流れの3つ：色の見本のかけらのように、左に色の帯。
   画面のイメージ：作業台にテープで留める。
   ============================================================ */
.w-gazo .hero__h1::after{content:"";display:block;width:min(100%,calc(var(--h1-col) * .6));height:12px;margin-top:16px;
  background:linear-gradient(90deg,#20345B 0 14%,#2E6FB0 0 28%,#2E9C8F 0 42%,#8CC084 0 56%,#F4C430 0 70%,#F29544 0 84%,#D6457A 0)}
.w-gazo .hero__eyebrow{letter-spacing:.12em}

.w-gazo .toc__list a{position:relative;padding-left:16px}
.w-gazo .toc__list a::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:8px;background:#20345B}
.w-gazo .toc__list li:nth-child(2) a::before{background:#2E9C8F}
.w-gazo .toc__list li:nth-child(3) a::before{background:#F29544}
.w-gazo .toc__list li:nth-child(4) a::before{background:#D6457A}

/* ---------- 声の札：刷り上がった紙 ---------- */
.w-gazo .vcard{max-width:min(100%,640px);margin:22px 0}
.w-gazo .vcard__in{border-radius:0;box-shadow:6px 10px 0 rgba(30,34,48,.12),0 18px 40px rgba(30,34,48,.14);border-top:10px solid #20345B}
.w-gazo .scene:nth-of-type(2) .vcard__in{border-top-color:#2E9C8F}
.w-gazo .scene:nth-of-type(3) .vcard__in{border-top-color:#F29544}
.w-gazo .scene:nth-of-type(4) .vcard__in{border-top-color:#D6457A}
/* 四隅のトンボ */
.w-gazo .vcard::before,.w-gazo .vcard::after{content:"";position:absolute;width:26px;height:26px;pointer-events:none}
.w-gazo .vcard::before{left:-16px;top:-16px;border-left:1px solid #1E2230;border-top:1px solid #1E2230;
  transform:translate(-4px,-4px)}
.w-gazo .vcard::after{right:-16px;bottom:-16px;border-right:1px solid #1E2230;border-bottom:1px solid #1E2230;transform:translate(4px,4px)}
html.lp-on.w-gazo .vcard::before,html.lp-on.w-gazo .vcard::after{opacity:var(--e2,1)}
.w-gazo .vcard__code{padding:2px 10px;background:#1E2230;color:#F4C430;font-size:13px;letter-spacing:.08em}
.w-gazo .vcard__voice .q{color:#D6457A}
html.lp-on.w-gazo .vcard{opacity:var(--e1,1);
  transform:translate3d(0,calc((1 - var(--eo,1)) * -80px),0) rotate(calc((1 - var(--es,1)) * -6deg))}

.w-gazo .scene__title::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:12px;vertical-align:.08em;
  background:conic-gradient(#20345B 0 25%,#F4C430 0 50%,#D6457A 0 75%,#2E9C8F 0)}

/* ---------- 流れ：色の見本のかけら ---------- */
.w-gazo .flow__list li{border:0;border-radius:2px;background:#FFFFFF;box-shadow:0 4px 12px rgba(30,34,48,.1);border-left:12px solid #2E6FB0}
.w-gazo .flow__list li:nth-child(2){border-left-color:#F4C430}
.w-gazo .flow__list li:nth-child(3){border-left-color:#D6457A}
.w-gazo .flow__list li + li::before{display:none}
.w-gazo .flow__n{border-radius:50%;background:#1E2230;color:#FFFFFF}
html.lp-on.w-gazo .flow__list li{opacity:var(--r,1);transform:rotate(calc((1 - var(--r,1)) * -5deg)) translate3d(calc((1 - var(--r,1)) * -24px),0,0)}

/* ---------- 画面のイメージ：テープで留める ---------- */
.w-gazo .mock{position:relative}
.w-gazo .mock::before{content:"";position:absolute;left:50%;top:-12px;z-index:3;width:90px;height:24px;margin-left:-45px;
  background:rgba(244,196,48,.55);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.w-gazo .mock__body{border-radius:4px;box-shadow:0 18px 40px rgba(30,34,48,.18),0 0 0 1px rgba(30,34,48,.08)}
html.lp-on.w-gazo .mock{opacity:var(--m0,1);transform:rotate(calc((1 - var(--m0,1)) * 4deg))}
.w-gazo .tile{background:rgba(255,255,255,.8);border-radius:2px}