/* =========================================================
   stage — 3Dの区間（00 かじる / 箱に詰める）
   canvas は position:fixed で1枚だけ。
   .stage に z-index を付けないこと（中の文字まで canvas の下に潜ります）
   ========================================================= */
/* =========================================================
   統合ぶんの追加
   ・#heroStage … 00 かじって選ぶ
   ・#boxStage  … 06 あなたの箱
   canvasは1枚だけ。この2区間でだけ描画します
   ========================================================= */
canvas#scene{
  position:fixed; inset:0; z-index:1; width:100%; height:100%;
  pointer-events:none; opacity:0; transition:opacity .6s var(--ease);
}
canvas#scene.on{opacity:1; pointer-events:auto}
/* 重なり順
   canvas(1) < 静的セクション(2) < ステージの中身(3) < ヘッダー(20)
   .stage には z-index を付けない。付けると中の文字まで canvas の下に潜るため */
.stage{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  /* 中身が増えても画面端に張り付かないよう、上下に余白を確保する */
  padding:calc(64px + 6vh) 0 calc(48px + 6vh);
}
.stage .wrap{
  position:relative; z-index:3; width:min(1180px,90vw); margin:0 auto;
  pointer-events:none;              /* 器はクリックを通す。canvas を覆わないため */
}
.box-panel{pointer-events:auto}
/* ★ ヒーローの文字はクリックを通します。
   縦画面では canvas が画面の下54%に固定され、文字がその上を流れるので、
   文字ブロックがタップを奪うと、その裏の野菜がかじれなくなります
   （375×667 で文字が canvas に197px、375×812 でも149px 侵入します）。
   押せる必要があるのはボタンだけなので、そこだけ auto に戻します。
   文字の選択はできなくなりますが、ヒーローでは触れることのほうが大事です。 */
.hero-info{pointer-events:none}
.hero-info .hero-cta{pointer-events:auto}
.scrolldown,.dragcue{pointer-events:none}
.sec{z-index:2}
.foot{position:relative; z-index:2}

/* ---- 共通ヘッダー ---- */
.bar-cta{margin-left:auto; padding:10px 24px; font-size:12.5px}
.bar.dark{
  background:rgba(31,71,46,.86); border-bottom-color:rgba(238,243,231,.14);
  --btn-bg:var(--leaf-bright); --btn-ink:#12210F;
}
.bar.dark .bar-logo{color:#EEF3E7}

/* =========================================================
   00 かじって選ぶ（6品を同時に大きく置く）
   ========================================================= */
#heroStage{
  --ink:#EEF3E7; --soft:#A6B79F; --dim:#9CB095; --acc:var(--leaf-bright);
  --line:rgba(238,243,231,.17); color:var(--ink);
  --btn-bg:var(--leaf-bright); --btn-ink:#12210F;
  background:
    radial-gradient(30% 36% at 58% 44%, rgba(150,132,80,.34), transparent 66%),
    radial-gradient(46% 38% at 8% 6%,   rgba(58,102,68,.34), transparent 70%),
    linear-gradient(#1D4229, #123021 52%, #0A1B11);
}
#heroStage .hero-veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(12,30,18,.72) 0%, rgba(12,30,18,.42) 30%, transparent 58%),
    radial-gradient(66% 58% at 58% 46%, transparent 34%, rgba(5,15,9,.80));
}
.hero-info{position:relative; z-index:4; width:min(486px,46vw)}
.hero-info h1{
  font-family:"Shippori Mincho",serif; font-weight:600;
  font-size:clamp(36px,5.2vw,60px); letter-spacing:.06em; line-height:1.4; margin-top:18px;
  white-space:nowrap;               /* 1行に収める。折り返すと見出しの力が落ちる */
  text-shadow:0 2px 30px rgba(8,20,12,.7);
}
.hero-info h1 u{
  text-decoration:none; background:linear-gradient(transparent 62%, rgba(140,192,90,.34) 62%);
}
.hero-sub{
  font-family:"Shippori Mincho",serif; font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.10em; color:var(--acc); margin-top:16px;
  text-shadow:0 1px 16px rgba(8,20,12,.7);
}
.hero-lead{font-size:14.5px; color:var(--soft); margin-top:18px; line-height:2.0}
.hero-lead b{color:var(--ink); font-weight:500}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero-cta .btn.ghost{background:none; border-color:var(--line); color:var(--ink)}
.hero-cta .btn.ghost:hover{box-shadow:none; background:rgba(238,243,231,.08)}
.hero-trust{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:20px;
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.08em; color:var(--dim);
  text-shadow:0 1px 12px rgba(8,20,12,.85);
}
.hero-hint{
  margin-top:26px; padding-left:14px; border-left:1px solid var(--acc);
  font-size:13px; color:var(--soft); letter-spacing:.03em; line-height:1.85;
  text-shadow:0 1px 12px rgba(8,20,12,.85);
}
.scrolldown{
  position:absolute; z-index:5; left:5vw; bottom:24px;
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.3em; color:#7B8C76;
}

/* ---- かじった結果：右下からにゅっと出る小さなカード ---- */
.bite-card{
  position:fixed; z-index:13; right:2.0vw; bottom:2.0vw; width:min(268px,90vw);
  background:rgba(23,52,33,.92); backdrop-filter:blur(16px);
  border:1px solid rgba(238,243,231,.22); border-radius:16px; padding:18px 18px 16px;
  box-shadow:0 22px 56px rgba(4,14,8,.5);
  opacity:0; visibility:hidden; transform:translate(16px,-10px) scale(.97);
  transition:opacity .4s var(--ease), transform .5s var(--ease), visibility .5s;
  color:#EEF3E7; overflow:hidden;
}
.bite-card.on{opacity:1; visibility:visible; transform:none}
/* 残り時間。5秒かけて縮み、消えるタイミングが目でわかる */
.bc-bar{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--leaf-bright), rgba(140,192,90,.3));
  transform-origin:left; transform:scaleX(1);
}
.bc-x{
  position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%;
  background:none; border:1px solid rgba(238,243,231,.22); color:#A6B79F;
  font-size:12px; line-height:1; cursor:pointer; display:grid; place-items:center;
}
.bc-x:hover{color:#EEF3E7}
.bc-en{
  display:flex; align-items:center; gap:10px;
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.28em; color:#9CB095;
}
.bc-dots{letter-spacing:.16em; color:#8CC05A; font-size:11px}
.bite-card h3{font-family:"Shippori Mincho",serif; font-weight:600; font-size:19px; letter-spacing:.08em; margin-top:6px}
.bc-marks{margin-top:12px; border-top:1px solid rgba(238,243,231,.16)}
.bc-marks p{display:flex; align-items:center; gap:12px; line-height:1.95; border-bottom:1px solid rgba(238,243,231,.16)}
.bc-marks i{font-style:normal; font-size:12px; color:#A6B79F; min-width:86px}
.bc-marks b{font-size:10.5px; letter-spacing:.2em; color:#8CC05A; font-weight:400}
.bc-marks .wait i{color:#7B8C76}
.bc-marks .wait b{color:#4C6249}
.bc-marks .in{animation:mark-in .5s var(--ease) both}
@keyframes mark-in{from{opacity:0; transform:translateX(-6px)} to{opacity:1; transform:none}}
.bc-body{font-size:12px; color:#A6B79F; line-height:1.85; margin-top:10px}
.bc-more{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em; color:#9CB095; margin-top:12px}
.bc-buy{
  display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap;
  padding-top:12px; border-top:1px solid rgba(238,243,231,.16);
}
.bc-price{font-family:"Shippori Mincho",serif; font-size:22px; letter-spacing:.02em; white-space:nowrap}
.bc-price em{font-style:normal; font-size:11.5px; color:#A6B79F; margin-left:4px}
.bc-buy .btn{padding:11px 20px; font-size:12.5px; background:#8CC05A; border-color:#8CC05A; color:#12210F}

.tip{
  position:fixed; z-index:12; pointer-events:none;
  background:#EEF3E7; color:#14251A;
  font-family:"Shippori Mincho",serif; font-weight:600; font-size:13px; letter-spacing:.12em;
  padding:8px 16px; border-radius:999px; white-space:nowrap;
  opacity:0; transform:translate(-50%,8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.tip.on{opacity:1; transform:translate(-50%,0)}
.pop-note{
  position:fixed; z-index:14; transform:translate(-50%,0); pointer-events:none;
  font-family:"Shippori Mincho",serif; font-weight:600; font-size:22px; letter-spacing:.1em;
  color:#EEF3E7; text-shadow:0 2px 24px rgba(6,17,10,.95);
  opacity:0; transition:opacity .5s var(--ease), transform .9s var(--ease);
}
.pop-note.on{opacity:1; transform:translate(-50%,-48px)}

/* =========================================================
   06 あなたの箱
   ========================================================= */
#boxStage{
  --ink:#EEF3E7; --soft:#A6B79F; --dim:#9CB095; --acc:var(--leaf-bright);
  --line:rgba(238,243,231,.17); color:var(--ink);
  background:
    radial-gradient(42% 46% at 66% 46%, rgba(174,156,96,.26), transparent 68%),
    radial-gradient(56% 44% at 12% 6%, rgba(84,130,90,.32), transparent 70%),
    linear-gradient(#28563A, #1F472E 58%, #17351F);
}
.box-panel{position:relative; z-index:4; width:min(392px,44vw)}
/* ★ 上限を base.css の 46px から 39px に下げています。下げないでください。
   見出しは「{プラン名}の箱は、<br>この内容です。」の二行組みですが、
   392px のパネルに 46px で組むと1行目が入りません。

     ふだん便の箱は、    398px（6px 超過）
     おためし便の箱は、  448px（56px 超過）
     たっぷり便の箱は、  448px（56px 超過）

   超えたぶんが <br> の前でもう一度折り返して、**「は、」だけの行**ができます。

     ふだん便の箱
     は、
     この内容です。

   3プランとも1行に収まる上限が 39px でした。
   ★ 1031px 以下では起きません。狭い画面だけで見ていると気づけません。
     出るのは 1032px 以上（46px に達する 1200px 以上では3プランとも）。
   プラン名を長くするか文言を変えるときは、ここも測り直してください。 */
.box-panel h2{margin-top:16px; font-size:clamp(28px,3.9vw,39px)}
.box-lead{font-size:13.5px; color:var(--soft); margin-top:16px; line-height:2}
.lines{list-style:none; margin-top:20px; border-top:1px solid var(--line)}
.lines li{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line);
  transition:opacity .4s var(--ease);
}
.lines li.out{opacity:.38}
.lines li.out .ln{text-decoration:line-through; text-decoration-thickness:1px}
.lines .ld{width:9px; height:9px; border-radius:50%; flex:none; background:var(--c)}
.lines .ln{font-size:14px; letter-spacing:.04em}
.lines .lp{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--soft)}
.lines .lx{
  flex:none; border-radius:999px; cursor:pointer; padding:5px 13px;
  background:none; border:1px solid var(--line); color:var(--soft);
  font-family:"Noto Sans JP",sans-serif; font-size:11.5px; letter-spacing:.04em;
  transition:border-color .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease);
}
.lines .lx:hover{border-color:var(--acc); color:var(--acc)}
.lines li.out .lx{border-color:var(--acc); color:var(--acc)}
.lines .lx.off{opacity:.28; pointer-events:none}
.excl-note{font-size:12px; color:var(--dim); margin-top:14px; line-height:1.85}
.excl-reset{
  display:none; margin-top:10px; background:none; border:none; cursor:pointer; padding:0;
  font-family:"Noto Sans JP",sans-serif; font-size:12px; color:var(--acc);
  text-decoration:underline; text-underline-offset:4px;
}
.excl-reset.on{display:inline-block}
.box-empty{display:none; font-size:13px; color:var(--dim); padding:20px 0; border-bottom:1px solid var(--line)}
.box-empty.on{display:block}
/* 06 は「詰める」だけ。金額は 07 に集約する */
.box-count{
  display:flex; align-items:baseline; gap:8px; margin-top:20px;
  padding-top:16px; border-top:1px solid var(--line);
  font-family:"Shippori Mincho",serif; font-size:34px; letter-spacing:.02em;
}
.box-count em{font-style:normal; font-size:13px; color:var(--soft)}
.box-count i{
  font-style:normal; margin-left:auto; font-family:"Noto Sans JP",sans-serif;
  font-size:12.5px; color:var(--acc); letter-spacing:.04em;
}
.box-panel .btn{display:block; width:100%; text-align:center; margin-top:22px}
.box-panel .btn.ghost{background:none; border-color:var(--line); color:var(--ink)}
.box-panel .btn.ghost:hover{box-shadow:none; background:rgba(238,243,231,.08)}

/* =========================================================
   07 申し込む
   ========================================================= */
.order-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:22px; margin-top:56px;
  align-items:start;
}
.order-box,.order-sum{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:30px 28px 28px;
}
.order-sum{border-color:var(--leaf)}
.order-cap{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.22em;
  color:var(--dim); margin-bottom:16px;
}
.order-lines{list-style:none; border-top:1px solid var(--line)}
.order-lines li{
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--line); font-size:14px;
}
.order-lines .od{width:9px; height:9px; border-radius:50%; flex:none; background:var(--c)}
.order-lines .op{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--soft)}
.order-empty{font-size:13px; color:var(--dim); padding:18px 0}
.order-rows{border-top:1px solid var(--line)}
.order-rows div{
  display:flex; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--line);
}
.order-rows dt{font-size:12.5px; color:var(--soft)}
.order-rows dd{margin-left:auto; font-size:13.5px; font-weight:500}
.order-total{display:flex; align-items:baseline; gap:14px; margin-top:20px}
.order-total span{font-size:12.5px; color:var(--soft)}
.order-total b{margin-left:auto; font-family:"Shippori Mincho",serif; font-weight:600; font-size:36px; letter-spacing:.02em}
.order-was{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--dim); text-align:right; margin-top:4px}
.order-sum .btn{display:block; width:100%; text-align:center; margin-top:22px}
.order-sum .btn.off{opacity:.4; pointer-events:none}
.order-fine{font-size:12px; color:var(--dim); margin-top:14px; line-height:1.9}
.chips{
  position:absolute; z-index:5; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; gap:8px; padding:7px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); backdrop-filter:blur(12px);
}
.chip{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:none; border:none; border-radius:999px; padding:9px 14px 9px 17px;
  font-family:"Noto Sans JP",sans-serif; color:#A6B79F;
  transition:background .4s var(--ease), color .4s var(--ease), opacity .4s var(--ease);
}
.chip:hover{background:rgba(238,243,231,.10); color:#EEF3E7}
.chip-n{font-size:12.5px; letter-spacing:.06em}
.chip-p{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:#9CB095}
.chip-add{font-size:14px; color:var(--acc); line-height:1}
.chip.off{opacity:.32; pointer-events:none}
.dragcue{
  position:absolute; z-index:5; right:5vw; bottom:34px;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.26em; color:#9CB095;
}

.boot{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center; background:#1B3D28;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.3em; color:#9CB095;
  transition:opacity .8s var(--ease);
}
.boot.done{opacity:0; pointer-events:none}
.boot .err{max-width:440px; text-align:center; line-height:2; color:#E8A07E; font-family:"Noto Sans JP",sans-serif; letter-spacing:normal; font-size:13px}

@media (max-width:900px){
  .hero-info,.box-panel{width:auto; max-width:none}
  .order-grid{grid-template-columns:1fr; gap:16px; margin-top:36px}
  .order-box,.order-sum{padding:24px 22px 22px}
  .order-total b{font-size:30px}
  /* 縦画面では、野菜に画面の下半分をまるごと渡します（order.html と同じ手法）。
     全画面のままだと文字が画面の51%を占め、野菜は31%に押し込まれて小さすぎました。
     ここを専有領域にすると、文字を削らずに面積が倍になります。
     ★ canvas の大きさが変わるので、hero.js の resize は
       innerWidth/innerHeight ではなく canvas の実寸で計算すること（6-2）。 */
  body:not(.page-order) canvas#scene{
    top:auto; bottom:0; height:54vh;
  }
  /* 文字は canvas の上に流します。重ならないぶんだけタップを奪いません */
  .stage{align-items:flex-start; padding-top:13vh; padding-bottom:56vh}
  /* 横並びを前提にした斜めの覆いは、1カラムでは効かない。
     文字が上・野菜が下に来るので、覆いも縦に切り替える。
     これが無いと「初回 半額…」や注記がにんじんの上に直接乗って読めない。
     ただし覆いは文字の帯だけ。野菜のいる下half は抜いておかないと、
     主役の3Dが沈んで見えなくなる（周囲だけ落とす） */
  #heroStage .hero-veil{
    background:
      linear-gradient(rgba(10,26,16,.92) 0%, rgba(10,26,16,.80) 26%,
                      rgba(10,26,16,.36) 44%, transparent 56%),
      radial-gradient(74% 46% at 50% 70%, transparent 34%, rgba(5,15,9,.70));
  }
  .hero-info h1{font-size:clamp(30px,8.4vw,44px); letter-spacing:.04em}
  .hero-sub{font-size:15px; margin-top:12px}
  .hero-lead{font-size:14px; margin-top:16px}
  .hero-cta{margin-top:22px}
  .hero-hint{margin-top:18px; font-size:12.5px}
  .bite-card{right:4vw; left:4vw; bottom:16px; width:auto}
  .chips{
    left:0; right:0; bottom:0; transform:none; border-radius:0;
    border-left:none; border-right:none; justify-content:flex-start;
    overflow-x:auto; padding:7px 5vw;
  }
  .chip{flex:none}
  .dragcue,.scrolldown{display:none}
  .bar-basket{padding:6px 8px 6px 12px}
  .bar-basket span{font-size:11px}
  .bar-basket .btn{padding:8px 14px; font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  canvas#scene,.hero-body,.hero-buy,.lines li,.hero-marks .in,.bar-basket{transition:none; animation:none}
}

/* ---- 実写（01 朝の畑） ---- */
.photo{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:#1B2A1C;
}
.photo img{width:100%; height:auto; display:block}
/* LPのトーンになじませる覆い。上下をわずかに沈めて文字と干渉させない */
.photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(rgba(21,42,26,.30), transparent 26%, transparent 68%, rgba(21,42,26,.42)),
    radial-gradient(78% 120% at 50% 40%, transparent 46%, rgba(14,28,18,.34));
}
.photo figcaption{
  position:absolute; left:20px; bottom:16px; z-index:2;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.18em;
  color:rgba(238,243,231,.92); text-shadow:0 1px 10px rgba(8,20,12,.9);
}
@media (max-width:860px){
  .photo figcaption{left:14px; bottom:12px; font-size:11px; letter-spacing:.1em}
}

/* ---- 生産者の写真 ---- */
.grower .photo{aspect-ratio:4/5}
.grower .photo img{width:100%; height:100%; object-fit:cover}
.grower .photo::after{
  background:
    linear-gradient(rgba(21,42,26,.10), transparent 30%, transparent 62%, rgba(21,42,26,.34)),
    radial-gradient(80% 100% at 50% 34%, transparent 52%, rgba(14,28,18,.26));
}

/* ---- 箱詰めの写真（21:9） ---- */
.hands.photo{margin-top:60px}
.hands.photo img{width:100%; height:auto}

/* ---- 07 プランの切り替え ---- */
.plan-pick{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.pp{
  display:flex; flex-direction:column; gap:4px; cursor:pointer; text-align:left;
  background:none; border:1px solid var(--line); border-radius:12px; padding:13px 14px;
  font-family:"Noto Sans JP",sans-serif; color:var(--soft);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.pp:hover{border-color:var(--leaf)}
.pp.on{border-color:var(--leaf); background:rgba(62,124,58,.07); color:var(--ink)}
.pp-n{font-size:13px; letter-spacing:.04em}
.pp-d{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--dim)}
.pp.on .pp-d{color:var(--leaf)}
.order-note{font-size:11.5px; color:var(--dim); margin-top:12px; line-height:1.85}
.bc-note{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  color:#8CC05A; margin-left:auto;
}
@media (max-width:900px){
  .plan-pick{grid-template-columns:1fr}
  .pp{flex-direction:row; align-items:baseline; gap:10px}
  .pp-d{margin-left:auto}
}

/* =========================================================
   同じ地色のセクションが続くところの間隔
   ・04 と 05 はどちらも白なので、余白だけが境目になる
   ・開けすぎると「終わった」ように見え、詰めすぎると混ざる
   ・細い罫線を1本引いて、余白を約6割に詰める
   ========================================================= */
.sec--paper + .sec--paper{
  padding-top:calc(var(--gap) * 0.62);
  border-top:1px solid rgba(27,42,28,.10);
}
.sec--paper + .sec--paper > .wrap{position:relative}
/* 注記のあとは少しだけ間を詰める */
.sec .note:last-child{margin-bottom:calc(var(--gap) * -0.22)}

/* ---- FAQ：狭い画面では1列に ---- */
@media (max-width:900px){
  .faq{grid-template-columns:1fr; gap:10px; margin-top:36px}
  .compare-row.wide .compare-bar b{left:0; right:auto; position:static; margin-top:8px}
  .faq-q{padding:17px 18px; font-size:14.5px; gap:11px}
  .faq-q .peek{font-size:12px}
  .faq-a p{padding:16px 0 20px; margin:0 18px 18px 49px; font-size:13px}
  .faq-item.open .faq-a{max-height:420px}
}