/* =========================================================
   order — 申し込みページ専用
   ========================================================= */
/* =========================================================
   order.html 専用
   ========================================================= */
body.page-order{background:var(--forest); overflow-x:hidden}
.page-order canvas#scene{opacity:1; pointer-events:auto}
.bar--order{
  background:rgba(31,71,46,.90); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(238,243,231,.14);
}
.bar--order .bar-logo{color:#EEF3E7}
.steps{
  margin:0 auto; display:flex; align-items:center; gap:12px;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; color:#7B8C76;
}
.steps .on{color:#8CC05A}
.steps i{width:22px; height:1px; background:rgba(238,243,231,.24)}
.bar-back{
  font-size:12.5px; letter-spacing:.06em; color:#A6B79F; text-decoration:none;
  transition:color .35s var(--ease);
}
.bar-back:hover{color:#EEF3E7}
#boxStage{
  padding-bottom:calc(72px + 8vh);   /* 「この内容で進む」の下に余白を残す */
  --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(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 .btn{margin-top:26px}
.box-panel .btn + *{margin-top:0}

/* =========================================================
   08 お届け先
   ・左に入力、右に集計（集計は追従する）
   ・入力欄は44px以上。スマホで押しにくいと最後の一歩で落ちる
   ========================================================= */
.dv-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:24px; margin-top:52px; align-items:start}
.dv-main{display:grid; gap:14px}
.dv-set{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:26px 26px 24px; border-width:1px;
}
.dv-set legend{padding:0; margin-bottom:16px}
.dv-row--2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.dv-grid .fld{display:flex; flex-direction:column; gap:7px; margin-top:14px}
.dv-row--2 .fld{margin-top:0}
.dv-set .fld:first-of-type{margin-top:0}
.fld label{font-size:13px; color:var(--soft); letter-spacing:.03em}
.fld label .opt{
  font-size:11px; color:var(--dim); margin-left:8px; letter-spacing:.06em;
  border:1px solid var(--line); border-radius:999px; padding:1px 8px;
}
.fld input,.fld select{
  font-family:"Noto Sans JP",sans-serif; font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:11px;
  padding:12px 14px; min-height:46px; width:100%;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fld select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
                   linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%, calc(100% - 14px) 51%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.fld input:focus,.fld select:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(62,124,58,.14);
}
.fld-hint{font-size:12px; color:var(--dim); line-height:1.7}
/* 郵便番号から入れたときだけ出る一行。空のときは場所を取らない */
.fld-auto{color:var(--acc)}
.fld-auto:empty{display:none}
.fld-err{font-size:12.5px; color:#B4402C; line-height:1.7}
.fld.bad input,.fld.bad select{border-color:#B4402C}

/* ---- 択一（受け取り方・周期・支払い） ---- */
.dv-choice{display:grid; gap:10px}
.dv-opt{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  border:1px solid var(--line); border-radius:13px; padding:14px 16px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.dv-opt:hover{border-color:rgba(27,42,28,.30)}
.dv-opt input{accent-color:var(--leaf); margin-top:3px; width:17px; height:17px; flex:none}
.dv-opt:has(input:checked){border-color:var(--leaf); background:rgba(62,124,58,.07)}
.dv-opt-body b{display:block; font-size:14.5px; font-weight:500; letter-spacing:.03em}
.dv-opt-body i{display:block; font-style:normal; font-size:12.5px; color:var(--dim); margin-top:4px; line-height:1.7}

.dv-note{font-size:12.5px; color:var(--dim); line-height:1.85; margin-top:14px}
.dv-note--tight{margin-top:10px}
.dv-note b{color:var(--soft); font-weight:500}

/* ---- 苦手な野菜 ---- */
.dv-chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px}
.dv-chip{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:"Noto Sans JP",sans-serif; font-size:13.5px; color:var(--soft);
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:10px 16px; min-height:42px;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.dv-chip:hover{border-color:var(--leaf)}
.dv-chip .dv-dot{width:9px; height:9px; border-radius:50%; background:var(--c); flex:none}
.dv-chip.on{border-color:var(--leaf); background:rgba(62,124,58,.09); color:var(--ink)}
/* 外した品目は取り消し線。06のリストと同じ見せ方に揃える */
.dv-chip.on{text-decoration:line-through; text-decoration-thickness:1px}
.dv-chip.off{opacity:.34; cursor:not-allowed}

/* ---- 右の集計 ---- */
.dv-side{position:sticky; top:88px}
.dv-sum{
  background:var(--card); border:1px solid var(--leaf); border-radius:18px;
  padding:28px 26px 26px;
}
.dv-money{margin-top:4px}
.dv-sum .order-total{margin-top:18px}
.dv-sum .btn{display:block; width:100%; text-align:center; margin-top:22px}

/* hidden 属性は、要素に display が指定されていると負けます。
   .fld は display:flex、.dv-grid は display:grid を持っているので、
   ここで明示的に打ち消さないと「置き配なのに時間帯が出たまま」になります。
   （JS 側の el.hidden は true なので、プロパティを見ても気づけません） */
.dv-grid[hidden],
.dv-grid [hidden]{display:none}

/* =========================================================
   お申し込みの控え（thanks.html）
   ・3Dを持たないので、器は普通のセクションのまま
   ・「済んだこと」より「このあと起きること」に紙面を割く
   ========================================================= */
body.page-thanks{background:var(--paper)}
.page-thanks .steps .done{color:#8CC05A}
.tk{max-width:1180px}
.tk-h{
  font-family:"Shippori Mincho",serif; font-weight:600;
  font-size:clamp(30px,4.4vw,52px); letter-spacing:.08em; line-height:1.5; margin-top:20px;
}
.tk-lead{font-size:15px; color:var(--soft); line-height:2.05; margin-top:24px; max-width:600px}
.tk-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:22px; margin-top:48px; align-items:start}
.tk-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:30px 28px 28px;
}
.tk-card--sum{border-color:var(--leaf)}
.tk-next{margin-top:44px}
.tk-steps{list-style:none; counter-reset:tk; margin-top:18px; border-top:1px solid var(--line)}
.tk-steps li{
  counter-increment:tk; position:relative; padding:16px 0 16px 44px;
  border-bottom:1px solid var(--line); font-size:14px; color:var(--soft); line-height:1.95;
}
.tk-steps li::before{
  content:counter(tk); position:absolute; left:0; top:16px;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--acc);
  font-family:"JetBrains Mono",monospace; font-size:11.5px;
}
.tk-fake{
  margin-top:40px; padding:20px 22px; border-radius:14px;
  background:rgba(62,124,58,.07); border:1px solid var(--line);
  font-size:13px; color:var(--soft); line-height:1.95; max-width:720px;
}
.tk-fake b{color:var(--ink); font-weight:500}
.tk-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:36px}

@media (max-width:900px){
  .tk-grid{grid-template-columns:1fr; gap:14px; margin-top:32px}
  .tk-card{padding:24px 20px 22px}
  .tk-cta .btn{flex:1 1 100%; text-align:center}
}

@media (max-width:900px){
  .dv-grid{grid-template-columns:1fr; gap:16px; margin-top:34px}
  .dv-side{position:static}
  .dv-set,.dv-sum{padding:22px 20px 20px}
  /* 姓名は横並びのまま（1行に収まる）。それ以外は縦に積む */
  .steps{display:none}
  .page-order canvas#scene{position:fixed; top:auto; bottom:0; height:46vh}
  #boxStage{padding-bottom:50vh}
  /* canvas は画面の下半分に貼りついたまま。品目リストはその上を
     通り過ぎるので、文字側に地を敷かないと木箱に重なって読めない。
     （実際に「長ネギ 3本」「なす 5本」が木目に埋もれていました）
     リストが終われば下の余白ぶんだけ箱がそのまま見えます */
  .box-panel{
    background:rgba(18,44,28,.86); backdrop-filter:blur(10px);
    border:1px solid rgba(238,243,231,.14); border-radius:16px;
    padding:24px 20px 26px;
  }
}