/* ============================================================
   保育の世界（積み木とクレヨン）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：画用紙の札が少し傾いて置かれ、クレヨンが、上 → 右 → 下 → 左 の順に枠を描く（2回なぞる）。
   流れの3つ：積み木が、上から落ちてきて、積まれる。
   画面のイメージ：壁に、マスキングテープで貼られる。
   ============================================================ */

.w-hoiku .hero__eyebrow{display:inline-block;padding:2px 12px;border-radius:999px;background:rgba(255,253,246,.8);color:#2A6498;text-shadow:none}

/* 困りごとの一覧：番号は、クレヨンの色の丸札 */
.w-hoiku .toc__list{border-top:0}
.w-hoiku .toc__list a{border-bottom:2px dashed rgba(27,40,51,.16)}
.w-hoiku .toc__no{padding:2px 11px;border-radius:999px;background:#2A6498;color:#fff;text-shadow:none}
.w-hoiku .toc__list li:nth-child(5n+1) .toc__no{background:#B5473A}
.w-hoiku .toc__list li:nth-child(5n+2) .toc__no{background:#3F7A3C}
.w-hoiku .toc__list li:nth-child(5n+3) .toc__no{background:#9A5718}
.w-hoiku .toc__list li:nth-child(5n+4) .toc__no{background:#6E5296}

/* ---------- 声の札：画用紙に、クレヨンの枠 ---------- */
.w-hoiku .scene__voice{justify-items:center}
.w-hoiku .vcard{max-width:min(100%,600px);transform:rotate(-.6deg)}
html.lp-on.w-hoiku .vcard{opacity:var(--e1,1);
  transform:translate3d(0,calc((1 - var(--eo,1)) * 46px),0) rotate(calc((1 - var(--es,1)) * -5deg - .6deg))}
.w-hoiku .vcard__in{padding:28px 24px 30px;border-radius:3px;
  background:linear-gradient(180deg,#FFFEFA,#FBF7EC);box-shadow:0 18px 40px rgba(40,64,84,.2),0 2px 0 rgba(40,64,84,.06)}
.w-hoiku .vcard__code{display:inline-block;padding:2px 14px;border-radius:999px;background:#F6D982;color:#3B2B05;letter-spacing:.12em}
/* クレヨンの枠（1回目は太く、2回目は細く、少しずらしてなぞる） */
.w-hoiku .vcard::before,.w-hoiku .vcard::after{content:"";position:absolute;pointer-events:none;z-index:2;border-radius:6px;background-repeat:no-repeat;
  -webkit-mask:repeating-linear-gradient(62deg,#000 0 5px,rgba(0,0,0,.45) 5px 6px,#000 6px 9px,rgba(0,0,0,.7) 9px 10px);
          mask:repeating-linear-gradient(62deg,#000 0 5px,rgba(0,0,0,.45) 5px 6px,#000 6px 9px,rgba(0,0,0,.7) 9px 10px)}
.w-hoiku .vcard::before{inset:-13px -11px -12px -14px;transform:rotate(.7deg);
  background-image:linear-gradient(#D45D4C,#D45D4C),linear-gradient(#3F7DB4,#3F7DB4),linear-gradient(#5C9A58,#5C9A58),linear-gradient(#E5B23A,#E5B23A);
  background-position:left top,right top,right bottom,left bottom;
  background-size:100% 6px,6px 100%,100% 6px,6px 100%}
.w-hoiku .vcard::after{inset:-8px -15px -16px -9px;transform:rotate(-.9deg);opacity:.75;
  background-image:linear-gradient(#D45D4C,#D45D4C),linear-gradient(#3F7DB4,#3F7DB4),linear-gradient(#5C9A58,#5C9A58),linear-gradient(#E5B23A,#E5B23A);
  background-position:left top,right top,right bottom,left bottom;
  background-size:100% 3px,3px 100%,100% 3px,3px 100%}
html.lp-on.w-hoiku .vcard::before{background-size:
  calc(clamp(0,var(--e2,1) * 4.4,1) * 100%) 6px,6px calc(clamp(0,var(--e2,1) * 4.4 - 1.1,1) * 100%),
  calc(clamp(0,var(--e2,1) * 4.4 - 2.2,1) * 100%) 6px,6px calc(clamp(0,var(--e2,1) * 4.4 - 3.3,1) * 100%)}
html.lp-on.w-hoiku .vcard::after{background-size:
  calc(clamp(0,var(--e2,1) * 4.4 - .5,1) * 100%) 3px,3px calc(clamp(0,var(--e2,1) * 4.4 - 1.6,1) * 100%),
  calc(clamp(0,var(--e2,1) * 4.4 - 2.7,1) * 100%) 3px,3px calc(clamp(0,var(--e2,1) * 4.4 - 3.4,1) * 100%)}

/* ---------- こう変わる：積み木の頭のような、3色の点 ---------- */
.w-hoiku .scene__title::before{content:"";display:block;width:58px;height:14px;margin-bottom:14px;
  background:radial-gradient(circle,#D45D4C 0 6px,transparent 6.5px) 0 0 / 20px 14px no-repeat,
             radial-gradient(circle,#E5B23A 0 6px,transparent 6.5px) 20px 0 / 20px 14px no-repeat,
             radial-gradient(circle,#3F7DB4 0 6px,transparent 6.5px) 40px 0 / 20px 14px no-repeat}

/* ---------- 流れ：積み木が、上から落ちてきて積まれる ---------- */
.w-hoiku .flow__list{gap:18px;max-width:460px}
.w-hoiku .flow__list li{border:0;border-radius:6px;background:#FFFDF6;padding:12px 16px;
  box-shadow:7px 7px 0 #D45D4C,0 12px 22px rgba(40,64,84,.16)}
.w-hoiku .flow__list li:nth-child(2){box-shadow:7px 7px 0 #E5B23A,0 12px 22px rgba(40,64,84,.16);margin-left:12px}
.w-hoiku .flow__list li:nth-child(3){box-shadow:7px 7px 0 #3F7DB4,0 12px 22px rgba(40,64,84,.16);margin-left:24px}
.w-hoiku .flow__n{border-radius:50%;background:#2A6498;color:#fff}
.w-hoiku .flow__list li:nth-child(1) .flow__n{background:#B5473A}
.w-hoiku .flow__list li:nth-child(3) .flow__n{background:#3F7A3C}
.w-hoiku .flow__t{color:#1B2833}
.w-hoiku .flow__list li + li::before{left:30px;top:-18px;width:0;height:18px;background:none;border-left:3px dotted #3F7DB4}
html.lp-on.w-hoiku .flow__list li{opacity:clamp(0,var(--r,1) * 3,1);
  transform:translate3d(0,calc((1 - var(--r,1)) * -64px),0) rotate(calc((1 - var(--r,1)) * 7deg))}

/* ---------- 画面のイメージ：壁にテープで貼る ---------- */
.w-hoiku .mock{position:relative}
.w-hoiku .mock::before{content:"";position:absolute;z-index:2;left:50%;top:-12px;width:96px;height:26px;margin-left:-48px;
  background:rgba(240,206,118,.78);box-shadow:0 1px 2px rgba(60,50,20,.15);transform:rotate(-3deg);
  -webkit-mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent calc(100% - 2px));
          mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent calc(100% - 2px))}
.w-hoiku .mock__body{box-shadow:0 24px 46px rgba(40,64,84,.24),0 0 0 1px rgba(27,40,51,.08)}
html.lp-on.w-hoiku .mock{opacity:var(--m0,1);transform:translate3d(0,calc((1 - var(--m0,1)) * -30px),0) rotate(calc((1 - var(--m0,1)) * 5deg + .6deg))}
.w-hoiku .mock__cap{text-shadow:none}

.w-hoiku .tags li{border-radius:6px}
.w-hoiku .tile{border-radius:12px}