/* ============================================================
   農業・直売の世界（朝霧の畑）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：札が土の中から、下から上へ伸びるように現れ、伸びきると札の上に芽が出る。
   流れの3つ：畝の行ごとに、芽が順に大きく育つ（種 → 芽 → 葉）。
   画面のイメージ：土から生えるように、下から現れる。
   ============================================================ */

.w-nogyo .hero__eyebrow{letter-spacing:.18em}

/* 困りごとの一覧は、畝の札のように */
.w-nogyo .toc__list a{border-bottom:2px dashed rgba(190,140,100,.4)}
.w-nogyo .toc__no{padding:1px 10px;border:1px solid var(--accent);border-radius:999px}

/* ---------- 声の札：土から伸びて、芽が出る ---------- */
.w-nogyo .vcard{max-width:min(100%,600px);margin-top:54px}
html.lp-on.w-nogyo .vcard{opacity:1;transform:none}
.w-nogyo .vcard__in{padding:26px 24px 30px;border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,#FFFBF1,#F3EBD7);
  box-shadow:0 12px 0 -3px #4A3226,0 30px 40px rgba(0,0,0,.5),inset 0 -3px 0 rgba(120,90,60,.12)}
html.lp-on.w-nogyo .vcard__in{clip-path:inset(calc((1 - var(--eo,1)) * 100%) -30px -40px -30px);
  transform:translate3d(0,calc((1 - var(--eo,1)) * 26px),0)}
/* 土の盛り上がり（札の足もと） */
.w-nogyo .vcard::after{content:"";position:absolute;z-index:-1;left:-5%;right:-5%;bottom:-22px;height:30px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,#7A5640 0%,#4A3226 55%,rgba(74,50,38,0) 72%)}
html.lp-on.w-nogyo .vcard::after{opacity:var(--e1,1)}
/* 芽（札が伸びきってから、ぽんと出る） */
.w-nogyo .vcard::before{content:"";position:absolute;z-index:2;left:30px;top:-46px;width:46px;height:48px;transform-origin:50% 100%;
  background:
    radial-gradient(ellipse 13px 6px at 30% 28%,#A8E06C 0 96%,rgba(168,224,108,0) 100%),
    radial-gradient(ellipse 13px 6px at 70% 20%,#8DD05A 0 96%,rgba(141,208,90,0) 100%),
    linear-gradient(#5E9E3A,#5E9E3A) 50% 100% / 3px 74% no-repeat}
html.lp-on.w-nogyo .vcard::before{transform:scale(var(--e2,1)) rotate(calc((1 - var(--e2,1)) * -14deg))}
.w-nogyo .vcard__code{padding:2px 12px;border-radius:999px;background:#E7F2D6;color:#2F4A12;border:1px solid #9CC46A;letter-spacing:.12em}
.w-nogyo .vcard__voice .q{color:#A7451E}

/* ---------- こう変わる：葉の印 ---------- */
.w-nogyo .scene__title::before{content:"";display:inline-block;width:18px;height:18px;margin-right:13px;vertical-align:.02em;
  border-radius:0 100% 0 100%;background:linear-gradient(135deg,#C2EC8C,#5E9E3A)}

/* ---------- 流れ：畝ごとに、芽が順に育つ ---------- */
.w-nogyo .flow__list{gap:6px;max-width:460px}
.w-nogyo .flow__list li{min-height:58px;padding:10px 54px 12px 2px;border:0;border-bottom:2px dashed rgba(190,140,100,.55);border-radius:0;background:none}
.w-nogyo .flow__list li + li::before{display:none}
.w-nogyo .flow__n{border-radius:50%;background:#A6DB6E;color:#122006}
.w-nogyo .flow__t{text-shadow:0 0 12px var(--bg)}
.w-nogyo .flow__list li::after{content:"";position:absolute;right:12px;bottom:2px;width:34px;height:40px;transform-origin:50% 100%;
  background:
    radial-gradient(ellipse 10px 5px at 28% 30%,#A8E06C 0 96%,rgba(168,224,108,0) 100%),
    radial-gradient(ellipse 10px 5px at 72% 22%,#8DD05A 0 96%,rgba(141,208,90,0) 100%),
    linear-gradient(#5E9E3A,#5E9E3A) 50% 100% / 2.5px 72% no-repeat;
  transform:scale(var(--k,1))}
.w-nogyo .flow__list li:nth-child(1){--k:.5}
.w-nogyo .flow__list li:nth-child(2){--k:.78}
.w-nogyo .flow__list li:nth-child(3){--k:1.06}
html.lp-on.w-nogyo .flow__list li{opacity:calc(.25 + .75 * var(--r,1));transform:none}
html.lp-on.w-nogyo .flow__list li::after{transform:scale(calc(var(--r,1) * var(--k,1)))}

/* ---------- 画面のイメージ：土から生えるように ---------- */
.w-nogyo .mock__body{box-shadow:0 26px 56px rgba(0,0,0,.55),-18px -16px 60px rgba(255,170,110,.16),0 0 0 1px rgba(255,220,180,.2)}
html.lp-on.w-nogyo .mock{opacity:var(--m0,1);clip-path:inset(calc((1 - var(--m0,1)) * 100%) -60px -80px -60px);
  transform:translate3d(0,calc((1 - var(--m0,1)) * 34px),0)}

.w-nogyo .tags li{border-radius:999px}

@media (min-width:980px){
  .w-nogyo .vcard{margin-left:4%}
}