/* ============================================================
   事務を1つ減らす世界（机の上の1枚の付箋）の見た目。
   例の出方：声の札が、上から付箋のように斜めに来て、ぺたりと貼られる（上に糊の帯）。
   流れの3つ：やることの四角に、順にレ点が入る。
   画面のイメージ：机の上の紙を、画びょうで留める。
   ============================================================ */
.w-hitotsu .hero__h1::after{content:"";display:block;width:44px;height:44px;margin-top:16px;background:#F7D54A;transform:rotate(-4deg);
  box-shadow:3px 5px 0 rgba(70,45,20,.15)}
.w-hitotsu .hero__eyebrow{letter-spacing:.12em}

.w-hitotsu .toc__list a{position:relative;padding-left:30px}
.w-hitotsu .toc__list a::before{content:"";position:absolute;left:4px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid #2B2418;border-radius:2px}

/* ---------- 声の札：付箋 ---------- */
.w-hitotsu .vcard{max-width:min(100%,600px)}
.w-hitotsu .vcard__in{border-radius:2px;background:#FFF3B0;padding-top:34px;box-shadow:5px 9px 0 rgba(70,45,20,.12),0 20px 40px rgba(70,45,20,.18)}
.w-hitotsu .scene:nth-of-type(2) .vcard__in{background:#DCEFF8}
.w-hitotsu .scene:nth-of-type(3) .vcard__in{background:#FBE0DD}
.w-hitotsu .scene:nth-of-type(4) .vcard__in{background:#E5F3D6}
.w-hitotsu .vcard__in::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:rgba(0,0,0,.05)}
.w-hitotsu .vcard__code{padding:2px 10px;border:2px solid #2B2418;font-size:13px;letter-spacing:.08em}
.w-hitotsu .vcard__voice .q{color:#B23A1E}
html.lp-on.w-hitotsu .vcard{opacity:var(--e1,1);transform-origin:50% 0;
  transform:translate3d(calc((1 - var(--eo,1)) * 30px),calc((1 - var(--eo,1)) * -50px),0) rotate(calc(-1.2deg + (1 - var(--es,1)) * 9deg))}
.w-hitotsu .vcard{transform:rotate(-1.2deg)}

.w-hitotsu .scene__title::before{content:"";display:inline-block;width:.42em;height:.24em;margin-right:14px;vertical-align:.2em;
  border-left:3px solid #B23A1E;border-bottom:3px solid #B23A1E;transform:rotate(-45deg)}

/* ---------- 流れ：やることの四角にレ点 ---------- */
.w-hitotsu .flow__list li{border:0;border-bottom:1px dashed var(--line);border-radius:0;background:transparent;grid-template-columns:30px 1fr 24px}
.w-hitotsu .flow__list li + li::before{display:none}
.w-hitotsu .flow__n{border-radius:50%;background:#2B2418;color:#FFFDF6}
.w-hitotsu .flow__list li::after{content:"";width:16px;height:9px;border-left:3px solid #B23A1E;border-bottom:3px solid #B23A1E;transform:rotate(-45deg) scale(1);
  justify-self:center;margin-top:-4px}
html.lp-on.w-hitotsu .flow__list li::after{transform:rotate(-45deg) scale(var(--r,1));opacity:var(--r,1)}
html.lp-on.w-hitotsu .flow__list li{opacity:calc(.4 + .6 * var(--r,1))}

/* ---------- 画面のイメージ：画びょうで留める ---------- */
.w-hitotsu .mock{position:relative}
.w-hitotsu .mock::before{content:"";position:absolute;left:50%;top:-8px;z-index:3;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#F6A08C,#C8492C 60%,#7E2A17);box-shadow:2px 3px 3px rgba(0,0,0,.25)}
.w-hitotsu .mock__body{border-radius:6px;box-shadow:4px 8px 0 rgba(70,45,20,.1),0 18px 40px rgba(70,45,20,.2)}
html.lp-on.w-hitotsu .mock{opacity:var(--m0,1);transform:translate3d(0,calc((1 - var(--m0,1)) * 24px),0)}
.w-hitotsu .tile{background:rgba(255,251,240,.75);border-radius:2px}