@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600&family=Shippori+Mincho:wght@500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
/* 「注文番号で注文」(products/order_by_code.php・site_frame を使わない独立ページ)専用の見た目。デザイン統一 2026-10-17〜。
   ページ側の head に、クッキー __cjcdz=off でない人だけ html に cjc-dz を付けてこのCSSを読む数行を足す。すべて html.cjc-dz の下に書く。
   触らない: 入力欄の name・行の追加/削除・数量・自動表示・カート投入のJSとフォーム(見た目だけ)。 */
html.cjc-dz{
  --dz-paper:#FAF8F1; --dz-card:#FFFDF8; --dz-sand:#F3EEE1; --dz-line:#E4DDCB;
  --dz-ink:#2B2723; --dz-sub:#6B655A; --dz-green:#3C4A2C; --dz-leaf:#E2ECD6;
  --dz-caramel:#946032; --dz-caramel2:#7C4F26; --dz-wine:#8C3B4A;
  --dz-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --dz-sans:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  --dz-script:"Cormorant Garamond","Garamond","Times New Roman",serif;
  --forest:#3C4A2C; --ochre:#946032; --ink:#2B2723; --parchment:#F3EEE1; --parchment-deep:#E4DDCB;
}
html.cjc-dz body{ background:var(--dz-paper) !important; color:var(--dz-ink) !important; font-family:var(--dz-sans) !important; font-size:16px !important; padding:0 16px 64px !important; }
html.cjc-dz .wrap{ max-width:980px !important; background:var(--dz-card); border:1px solid var(--dz-line); border-radius:18px; padding:18px 26px 28px !important; box-sizing:border-box; box-shadow:0 6px 24px rgba(60,74,44,.06); }
/* 上部: ロゴ(ほかのページのヘッダーと同じ書体)と「TOPへ戻る」 */
html.cjc-dz body::before{ content:"Chikyujin Club"; display:block; max-width:980px; margin:0 auto; font-family:var(--dz-script); font-style:italic; font-weight:600; font-size:30px; color:var(--dz-green); line-height:1; padding:22px 0 14px; }
html.cjc-dz .wrap::after{ content:""; display:block; clear:both; }
html.cjc-dz a.backlink{ display:inline-flex !important; align-items:center; min-height:44px; margin:0 0 6px !important; font-size:16px !important; font-weight:700; color:var(--dz-green) !important; text-decoration:underline !important; text-underline-offset:4px; }
/* 白いカード */
html.cjc-dz form#order_form{ margin-top:4px; }
html.cjc-dz h1{ font-family:var(--dz-serif) !important; font-weight:500 !important; color:var(--dz-green) !important; font-size:30px !important; letter-spacing:.04em; margin:6px 0 10px !important; }
html.cjc-dz p.lead{ font-size:16px !important; line-height:1.8 !important; color:var(--dz-ink) !important; margin:0 0 12px !important; }
html.cjc-dz ul.notice-list{ margin:0 0 22px !important; padding:12px 18px 12px 34px !important; background:var(--dz-leaf) !important; border:0 !important; border-radius:12px !important; font-size:16px !important; line-height:1.8 !important; color:var(--dz-green) !important; }
/* 表(PC) */
html.cjc-dz table.order-table{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; border-collapse:separate !important; border-spacing:0 8px !important; }
html.cjc-dz table.order-table th{ background:transparent !important; color:var(--dz-ink) !important; font-size:16px !important; font-weight:700 !important; padding:4px 10px !important; border-bottom:1px solid var(--dz-line) !important; }
html.cjc-dz table.order-table tr.order-row td{ background:#fff !important; border-top:1px solid var(--dz-line) !important; border-bottom:1px solid var(--dz-line) !important; padding:10px !important; font-size:16px !important; }
html.cjc-dz table.order-table tr.order-row td:first-child{ border-left:1px solid var(--dz-line) !important; border-radius:12px 0 0 12px; }
html.cjc-dz table.order-table tr.order-row td:last-child{ border-right:1px solid var(--dz-line) !important; border-radius:0 12px 12px 0; text-align:center; }
html.cjc-dz input.code-input{ width:120px !important; min-height:44px !important; box-sizing:border-box !important; font-size:17px !important; border:1px solid var(--dz-line) !important; border-radius:10px !important; padding:0 10px !important; background:#fff !important; color:var(--dz-ink) !important; }
html.cjc-dz input.code-input:focus{ outline:none !important; border-color:var(--dz-green) !important; box-shadow:0 0 0 3px rgba(60,74,44,.25) !important; }
html.cjc-dz .prod-name{ color:var(--dz-ink) !important; font-weight:700 !important; line-height:1.5; }
html.cjc-dz .unit-price, html.cjc-dz .subtotal{ color:var(--dz-ink) !important; font-variant-numeric:tabular-nums; white-space:nowrap; }
html.cjc-dz .subtotal{ font-weight:700 !important; }
/* エラー: 色だけに頼らず「!」と文言、薄いワイン色の帯 */
html.cjc-dz .prod-name.error{ color:#8E1F1A !important; font-weight:700 !important; }
html.cjc-dz td.prod-name.error{ background:#F3E3E6 !important; }
html.cjc-dz .prod-name.error::before{ content:"！"; display:inline-block; margin-right:4px; font-weight:700; }
/* 数量 −[1]＋ と 削除× は 44px */
html.cjc-dz .qty-stepper{ border:1px solid var(--dz-line) !important; border-radius:10px !important; background:#fff !important; }
html.cjc-dz button.qty-btn{ width:44px !important; height:44px !important; background:var(--dz-sand) !important; color:var(--dz-green) !important; font-size:20px !important; }
html.cjc-dz button.qty-btn:active{ background:var(--dz-green) !important; color:#fff !important; }
html.cjc-dz input.qty-input{ width:52px !important; height:44px !important; font-size:17px !important; color:var(--dz-ink) !important; }
html.cjc-dz button.row-delete-btn{ width:44px !important; height:44px !important; border:1px solid var(--dz-line) !important; border-radius:10px !important; color:var(--dz-sub) !important; font-size:20px !important; background:#fff !important; }
html.cjc-dz button.row-delete-btn:hover{ border-color:#8E1F1A !important; color:#8E1F1A !important; }
/* ボタンと合計 */
html.cjc-dz .btns{ gap:10px !important; margin-top:8px !important; }
html.cjc-dz button.ghost-btn{ min-height:46px !important; padding:0 22px !important; font-size:16px !important; font-weight:700 !important; color:var(--dz-green) !important; border:1.5px solid var(--dz-green) !important; background:transparent !important; border-radius:24px !important; }
html.cjc-dz button.ghost-btn:hover{ background:var(--dz-leaf) !important; color:var(--dz-green) !important; }
html.cjc-dz .total-bar{ background:var(--dz-sand) !important; border-radius:12px !important; font-size:17px !important; color:var(--dz-ink) !important; padding:16px 20px !important; margin-top:16px !important; }
html.cjc-dz .total-bar strong{ font-size:26px !important; color:var(--dz-ink) !important; font-variant-numeric:tabular-nums; }
html.cjc-dz button.submit-btn{ width:100% !important; min-height:56px !important; padding:0 20px !important; font-size:18px !important; background:var(--dz-caramel) !important; color:#fff !important; border-radius:28px !important; box-shadow:0 2px 8px rgba(169,112,63,.25) !important; }
html.cjc-dz button.submit-btn:hover{ background:var(--dz-caramel2) !important; }
html.cjc-dz .error-msg{ color:#8E1F1A !important; background:#F3E3E6; border-radius:10px; padding:10px 14px; }
html.cjc-dz button:focus-visible, html.cjc-dz a:focus-visible{ outline:2px solid var(--dz-green) !important; outline-offset:2px !important; }
/* スマホ: 1行を3段のカードに(上=商品コード・削除 / 中=商品名 / 下=単価・数量・小計) */
@media (max-width:640px){
  html.cjc-dz body{ padding:0 16px 56px !important; }
  html.cjc-dz .wrap{ padding:12px 12px 20px !important; }
  html.cjc-dz body::before{ font-size:26px; padding:16px 0 10px; }
  html.cjc-dz h1{ font-size:24px !important; }
  html.cjc-dz table.order-table{ border-spacing:0 !important; }
  html.cjc-dz table.order-table tr.order-row{ display:grid !important; grid-template-columns:auto minmax(0,1fr) 44px; grid-template-areas:"code code del" "name name name" "price qty sub"; gap:8px 10px; align-items:center; border:1px solid var(--dz-line) !important; border-radius:12px !important; background:#fff !important; padding:12px !important; margin:0 0 10px !important; }
  html.cjc-dz table.order-table tr.order-row td{ border:0 !important; border-radius:0 !important; padding:0 !important; background:transparent !important; display:flex !important; align-items:center; gap:8px; justify-content:flex-start !important; text-align:left !important; }
  html.cjc-dz table.order-table tr.order-row td:first-child, html.cjc-dz table.order-table tr.order-row td:last-child{ border:0 !important; border-radius:0 !important; }
  html.cjc-dz table.order-table tr.order-row td:nth-child(1){ grid-area:code; min-width:0 !important; }
  html.cjc-dz table.order-table tr.order-row td:nth-child(2){ grid-area:name; min-height:28px; }
  html.cjc-dz table.order-table tr.order-row td:nth-child(3){ grid-area:price; }
  html.cjc-dz table.order-table tr.order-row td:nth-child(4){ grid-area:qty; justify-content:center !important; }
  html.cjc-dz table.order-table tr.order-row td:nth-child(5){ grid-area:sub; justify-content:flex-end !important; }
  html.cjc-dz table.order-table tr.order-row td:nth-child(6){ grid-area:del; order:0 !important; align-self:center !important; justify-content:flex-end !important; }
  html.cjc-dz table.order-table td[data-label]:not([data-label=""])::before{ font-size:16px !important; color:var(--dz-ink) !important; font-weight:700 !important; white-space:nowrap; }
  html.cjc-dz table.order-table td[data-label="数量"]::before, html.cjc-dz table.order-table td[data-label="小計"]::before{ display:none !important; }
  html.cjc-dz table.order-table td .code-input{ flex:1 1 auto !important; min-width:0 !important; max-width:none !important; width:100% !important; text-align:left !important; }
  html.cjc-dz table.order-table td.prod-name.error{ padding:6px 8px !important; border-radius:8px !important; background:#F3E3E6 !important; }
  html.cjc-dz .btns button.ghost-btn{ flex:1 1 0 !important; }
}