@charset "utf-8";
/* =========================================================
   店頭引き取り・通販 ご注文フォーム（/contact/order/）
   contact.css の cf-* を土台に、注文フォーム固有の部品だけ足す。
   ・商品名＋数量が並ぶ「品目行」
   ・お届け先の出し分けグループ（表示切替は features/order-form.js）
   ・チェックボックス（contact.css はラジオのみ整えている）
   ========================================================= */

/* 冒頭の注意書き（電話でのお問い合わせ喚起）。読み飛ばされない強さで、けれど品よく。 */
.cf-notice{
  margin:0 0 clamp(28px,3.6vw,44px); padding:16px 22px; border-radius:3px;
  border:.5px solid rgba(184,147,90,.45); background:rgba(184,147,90,.1);
  color:rgba(255,255,255,.88); font-size:14px; line-height:1.9; letter-spacing:.03em; text-align:center;
}

/* ── 品目行（商品名 …… [数量] 個） ─────────────────────────
   通常の cf-row はラベル210px固定だが、商品名は長いので幅を入れ替える。 */
.cf-row--qty{gap:9px;}
.cf-row--qty .cf-label{align-items:baseline; font-weight:400; color:rgba(255,255,255,.82); line-height:1.7;}
.cf-price{margin-left:.6em; color:var(--gold,#b8935a); font-size:13px; letter-spacing:.04em; white-space:nowrap;}
.cf-field--qty{display:flex; align-items:center; gap:10px;}
.cf-field--qty .wpcf7-form-control-wrap{width:auto;}
.cf-field--qty input[type=number]{width:96px; text-align:right; padding:11px 12px;}
.cf-unit{font-size:14px; color:rgba(255,255,255,.7);}

/* 品目行どうしは薄い罫で仕切る。9品目が続くので、目が行を追える手がかりを置く。 */
.cf-row--qty + .cf-row--qty{padding-top:14px; border-top:.5px solid rgba(184,147,90,.16);}

@media(min-width:700px){
  /* .cf-wrap は当サイトでは1200px超まで広がる。商品名と数量欄が離れすぎて対応が読めなく
     なるので、品目行だけは読みやすい幅に収める（他の行は従来どおり全幅）。 */
  .cf-row--qty{align-items:center; gap:20px; max-width:660px;}
  .cf-row--qty .cf-label{flex:1 1 auto; padding-top:0;}
  .cf-row--qty .cf-field{flex:0 0 auto;}
}

/* ── お届け先グループ ──────────────────────────────────
   既定は表示。JS が条件に合わないときだけ hidden を付ける
   （＝JSが動かない環境でも入力欄が消えてしまわない）。 */
.cf-group{display:flex; flex-direction:column; gap:20px;}
.cf-group[hidden]{display:none;}

/* ── チェックボックス（contact.css はラジオのみ） ───────────── */
.cf-field .wpcf7-checkbox{display:flex; gap:22px; flex-wrap:wrap; padding-top:5px;}
.cf-field input[type=checkbox]{accent-color:var(--gold,#b8935a); width:18px; height:18px;}
/* 選択肢が長い（受け取り方法など）ので、狭い画面では縦に積む */
@media(max-width:699px){
  .cf-field .wpcf7-checkbox,.cf-field .wpcf7-radio{flex-direction:column; gap:12px;}
}

/* ── 末尾の但し書き ─────────────────────────────────── */
.cf-note{
  margin:26px 0 0; padding-top:22px; border-top:.5px solid rgba(184,147,90,.3);
  color:rgba(255,255,255,.6); font-size:13px; line-height:1.9; letter-spacing:.03em; text-align:center;
}

/* ── 非日本語の来訪者への案内 ──────────────────────────
   このフォームは日本語・国内配送のみ（page-order.php の冒頭コメント参照）。
   翻訳ページを作らない代わりに、購入導線を外部ショップへ渡す一言を置く。
   本文より一段落として、日本語の読者の邪魔にならない濃度にとどめる。 */
.cf-foreign{
  max-width:680px; margin:-14px auto clamp(30px,3.8vw,46px); padding:14px 20px;
  border-left:2px solid rgba(184,147,90,.45);
  color:rgba(255,255,255,.55); font-size:12.5px; line-height:1.95; letter-spacing:.02em;
}
.cf-foreign a{color:var(--gold,#b8935a); text-decoration:underline; text-underline-offset:3px;}
.cf-foreign a:hover{opacity:.8;}

/* ── おせちのご注文（/contact/osechi/）─────────────────────
   数量は選択欄（—／1〜10）。水たきは、おせちを選ぶまで選べない（features/osechi-form.js）。 */
.cf-field--qty select{width:96px; padding:11px 36px 11px 14px; text-align:left;}
.cf-row--qty.is-locked .cf-label{color:rgba(255,255,255,.45);}
.cf-row--qty.is-locked .cf-price{opacity:.55;}
.cf-row--qty.is-locked select{opacity:.45; cursor:not-allowed;}
.cf-osechi-lock{margin:-6px 0 0; font-size:12px; line-height:1.8; color:rgba(255,255,255,.55); letter-spacing:.03em;}
.cf-osechi-lock[hidden]{display:none;}
/* 選択肢の下に添える但し書き（組数制限・お支払いごとの案内） */
.cf-field .cf-hint strong{color:rgba(255,255,255,.8); font-weight:500;}