/*
Theme Name: Funabashi Heartbeat BBQ
Theme URI: https://funabashikeiba-bbq.com/
Description: 船橋ケイバ ハートビートBBQ専用のWelcart子テーマ。予約日連携、商品セット内容、カート・会員・配送日機能を含みます。
Version: 1.0.1
Author: GORDON
Template: welcart_basic
Text Domain: funabashi-heartbeat
*/

/* --------------------------------------------------------------
 * デザイン本体は assets/css/sagiyama.css（参考デザインのCSS）。
 * このファイルは WordPress 固有のクラスと微調整だけを持つ。
 * ------------------------------------------------------------ */

/* JS無効時にリビール対象が消えたままにならないようにする */
[data-reveal] { opacity: 1; }

/* WordPress 標準クラス ------------------------------------------------ */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  color: var(--ink);
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .12);
  display: block;
  top: 5px;
  left: 5px;
  text-decoration: none;
}

.alignleft  { float: left;  margin-right: 1.5em; margin-bottom: 1.2em; }
.alignright { float: right; margin-left: 1.5em;  margin-bottom: 1.2em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; margin-bottom: 1.6em; }
.wp-caption img { display: block; }
.wp-caption-text { font-size: 13px; color: #80766d; text-align: center; margin-top: .6em; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

/* 通常ページ／投稿の下地 ---------------------------------------------- */
.pageShell {
  max-width: 860px;
  margin: 0 auto;
  padding: 140px 20px 90px;
}
.pageShell h1 {
  font-size: clamp(28px, 4vw, 40px);
  color: var(--brown);
  margin-bottom: .6em;
  line-height: 1.35;
}
.pageShell h2 { font-size: 24px; color: var(--brown); margin: 2em 0 .7em; }
.pageShell h3 { font-size: 19px; color: var(--brown-2); margin: 1.6em 0 .6em; }
.pageShell p,
.pageShell li { line-height: 2; color: var(--ink); }
.pageShell p { margin-bottom: 1.4em; }
.pageShell ul,
.pageShell ol { margin: 0 0 1.6em 1.4em; }
.pageShell a { color: var(--orange-deep); text-decoration: underline; }
.pageShell img { max-width: 100%; height: auto; border-radius: 12px; }
.pageShell table { width: 100%; border-collapse: collapse; margin-bottom: 1.8em; }
.pageShell th,
.pageShell td { border: 1px solid var(--gray-2); padding: 12px 14px; text-align: left; }
.pageShell th { background: var(--gray); color: var(--brown); font-weight: 800; }

.pageShell .entryMeta { color: #8b8177; font-size: 13px; font-weight: 800; margin-bottom: 1.8em; }
.pageShell .postList { list-style: none; margin: 0; padding: 0; }
.pageShell .postList li {
  border-bottom: 1px solid var(--gray-2);
  padding: 18px 0;
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}
.pageShell .postList time { color: #8b8177; font-size: 13px; font-weight: 800; }
.pageShell .postList a { text-decoration: none; color: var(--brown); font-weight: 800; }
.pageShell .postList a:hover { color: var(--orange-deep); }

.pageNav { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; }
.pageNav a { color: var(--orange-deep); font-weight: 800; text-decoration: none; }

/* --------------------------------------------------------------
 * 「お申込み前にご確認ください」（重要なお知らせ）
 * リンク先が指定されていないお知らせは、クリックできない見た目にする。
 * ------------------------------------------------------------ */
.preflightList .preflightItem.is-static {
  display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px;
  min-height: 72px; padding: 15px 22px;
  border-bottom: 1px solid var(--gray-2);
  cursor: default;
}
.preflightList .preflightItem.is-static:last-child { border-bottom: 0; }

@media (max-width: 820px) {
  .preflightList .preflightItem.is-static {
    grid-template-columns: 82px 1fr; gap: 10px; min-height: 70px; padding: 14px 16px;
  }
}

/* --------------------------------------------------------------
 * 商品詳細ページの補助（参考デザインのCSSに無い部分だけ）
 * ------------------------------------------------------------ */

/* Welcartのオプション選択 */
.productBuyBox .item-option { display: grid; gap: 12px; margin-bottom: 20px; }
.productBuyBox .opt-row label {
  display: block; margin-bottom: 6px; font-size: 14px; font-weight: 900; color: var(--brown);
}
.productBuyBox .opt-row select,
.productBuyBox .opt-row input[type="text"] {
  width: 100%; min-height: 52px; padding: 0 14px; font: inherit; font-size: 15px;
  color: var(--brown); background: #f7f2e9; border: 2px solid #cec4b7; border-radius: 0;
}
.productBuyBox .opt-row select:focus,
.productBuyBox .opt-row input[type="text"]:focus {
  border-color: var(--orange); background: #fff; outline: 3px solid rgba(223, 95, 11, .14);
}

.productBuyBox .itemsoldout {
  background: #fff1ef; border-left: 6px solid #d94134; color: #b5362d;
  padding: 14px 16px; font-weight: 900;
}
.productBuyBox .error_message:empty { display: none; }

/* サブ画像（button要素なので見た目を整える） */
.itemsubimg { display: block; width: 100%; }

/* 予約日カレンダーのモーダル */
.sagiyamaModal { position: fixed; inset: 0; z-index: 200; }
.sagiyamaModal[hidden] { display: none; }
.sagiyamaModalShade { position: absolute; inset: 0; background: rgba(40, 29, 18, .72); }
.sagiyamaModalBody {
  position: relative; z-index: 1; width: min(920px, calc(100% - 28px));
  max-height: 86vh; margin: 6vh auto 0; display: flex; flex-direction: column;
  background: #fff; border: 3px solid var(--brown); box-shadow: 14px 15px 0 var(--yellow);
}
.sagiyamaModalHead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 2px solid var(--gray-2);
}
.sagiyamaModalHead h3 { margin: 0; font-size: 21px; color: var(--brown); }
.sagiyamaModalHead button {
  background: none; border: 0; cursor: pointer; color: var(--brown); padding: 6px; line-height: 0;
}
.sagiyamaModalHead button:hover { color: var(--orange); }
.sagiyamaModalScroll { overflow-y: auto; padding: 24px; background: var(--cream); }

@media (max-width: 560px) {
  .sagiyamaModalBody { margin-top: 3vh; max-height: 92vh; box-shadow: 8px 9px 0 var(--yellow); }
  .sagiyamaModalScroll { padding: 16px; }
}

/* Welcartが出すインラインCSS（.skuform .skubutton を黒にする）を上書きする。
   Welcart管理画面のボタン色設定より、さぎ山デザインを優先させたい。 */
.productBuyBox .skuform .skubutton,
.productBuyBox .skuform .skubutton:link,
.productBuyBox .skuform .skubutton:visited {
  background: var(--orange);
  color: #fff;
  border: 3px solid var(--brown);
}
.productBuyBox .skuform .skubutton:hover {
  background: var(--orange-deep);
  color: #fff;
}

/* --------------------------------------------------------------
 * 商品カテゴリー一覧の補助（参考デザインのCSSに無い部分だけ）
 * ------------------------------------------------------------ */

/* 在庫切れ。参考デザインには売り切れ状態が無いので自前で用意する。 */
.shopProductItem .item_photo { position: relative; }
.shopProductItem .productSoldOut {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(40, 29, 18, .62); color: #fff;
  font-size: 14px; font-weight: 900; letter-spacing: .08em;
}
.shopProductItem.is-soldout .item_price { opacity: .6; }

.shopProductEmpty {
  padding: 70px 20px; text-align: center;
  color: var(--brown); font-weight: 800;
}

/* ページ送り */
.shopPagination { display: flex; justify-content: center; margin-top: 52px; }
.shopPagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.shopPagination li { display: flex; }
.shopPagination a,
.shopPagination span.page-numbers {
  display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px;
  background: #fff; border: 3px solid var(--brown); color: var(--brown);
  font-weight: 900; text-decoration: none;
}
/* いま見ているページと hover は同じ見た目にそろえる（枠・背景・文字色すべて） */
.shopPagination a:hover,
.shopPagination a:focus-visible,
.shopPagination span.current {
  background: var(--brown); border-color: var(--brown); color: #fff;
}
/* 「…」は枠を付けない（黒い四角に見えてしまうため） */
.shopPagination span.dots {
  min-width: 0; height: auto; padding: 0 4px;
  background: none; border: 0; color: #8a7d71;
}

/* --------------------------------------------------------------
 * カートページ（Welcartが出すHTMLをデザインに合わせる）
 * ------------------------------------------------------------ */

/* 通過済みステップ */
.cart-steps li.is-done { color: var(--brown); }
.cart-steps li.is-done > span { background: var(--brown); color: #fff; border-color: var(--brown); }

/* Welcart本来のボタン（機能だけ使う）は画面外へ。display:none だと動かない場合がある。 */
.sagiyamaWelcartControls {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  white-space: nowrap;
}

/* カート表：Welcartは 番号／写真／商品名／単価／数量／小計／在庫／削除 の8列を出す。
   デザインには番号と在庫の列が無いので隠し、残りを見た目に合わせる。 */
#cart_table th.hNum,
#cart_table td.num,
#cart_table th.hStock,
#cart_table td.stock { display: none; }

#cart_table td.thumbnail { width: 172px; }
#cart_table td.thumbnail img {
  display: block; width: 150px; height: 150px; object-fit: cover;
}
#cart_table td.productname {
  color: var(--brown); font-size: 21px; font-weight: 900; line-height: 1.45;
}
#cart_table td.productname a { color: inherit; text-decoration: none; }
#cart_table td.unitprice,
#cart_table td.subtotal {
  color: var(--brown); font-size: 19px; font-weight: 900; white-space: nowrap; text-align: right;
}
/* Welcartは数量セルにも class="quantity" を付けるので、
   商品ページの数量ステッパー用のスタイル（枠つきグリッド）が誤爆する。ここで打ち消す。 */
#cart_table td.quantity {
  display: table-cell; text-align: center;
  background: none; border: 0; border-bottom: 1px solid #ddd6cc;
  grid-template-columns: none; width: auto; min-width: 0;
}
#cart_table td.quantity input.quantity {
  width: 92px; height: 44px; padding: 0 8px; text-align: center;
  font: inherit; font-size: 17px; font-weight: 900; color: var(--brown);
  background: #f7f2e9; border: 2px solid #cec4b7; border-radius: 0;
}
#cart_table td.quantity input.quantity:focus {
  border-color: var(--orange); background: #fff; outline: 3px solid rgba(223, 95, 11, .14);
}
#cart_table td.action { text-align: center; }
#cart_table td.action input.delButton {
  padding: 7px; background: none; border: 0; cursor: pointer;
  color: #705f51; font-size: 13px; font-weight: 900; text-decoration: underline;
}
#cart_table td.action input.delButton:hover { color: var(--orange-deep); }

/* エラー・空カート */
.sagiyamaNotice {
  background: #fff1ef; border-left: 6px solid #d94134; color: #b5362d;
  padding: 16px 18px; margin-bottom: 28px; font-weight: 900;
}
.cartEmpty {
  border: 3px solid var(--brown); background: #fff; box-shadow: 10px 11px #ded8cd;
  padding: 56px 32px; text-align: center;
}
.cartEmpty p { font-size: 19px; font-weight: 900; color: var(--brown); margin: 0 0 26px; }
.cartEmpty .button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 60px;
  padding: 16px 30px; background: var(--brown); color: #fff;
  border: 3px solid var(--brown); font-size: 16px; font-weight: 900; text-decoration: none;
}

.gp-discount-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; }

@media (max-width: 820px) {
  #cart_table td.thumbnail { width: auto; grid-column: 1 / -1; }
  #cart_table td.thumbnail img { width: 100%; height: auto; aspect-ratio: 1; }
  #cart_table td.productname { grid-column: 1 / -1; }
  #cart_table td.unitprice,
  #cart_table td.subtotal { text-align: left; }
  #cart_table td.quantity { display: block; text-align: left; border-bottom: 0; }
}

/* --------------------------------------------------------------
 * お客様情報／ご利用日時ページ
 * Welcartの customer_form（th/td の表）を、参考デザインの入力欄の見た目にする。
 * ------------------------------------------------------------ */

.checkoutForm table.customer_form { width: 100%; border: 0; border-collapse: collapse; }
.checkoutForm table.customer_form tbody { display: grid; gap: 18px; }
.checkoutForm table.customer_form tr { display: grid; gap: 6px; border: 0; }
.checkoutForm table.customer_form th {
  display: block; padding: 0; border: 0; background: none;
  text-align: left; font-size: 14px; font-weight: 900; color: var(--brown);
}
.checkoutForm table.customer_form td { display: block; padding: 0; border: 0; }

/* Welcartは必須マークを <em>*</em> で出すので「必須」バッジに見せる */
.checkoutForm table.customer_form th em {
  display: inline-block; margin: 0 7px 0 0; padding: 3px 9px;
  background: var(--orange); color: #fff;
  font-size: 0; font-style: normal; line-height: 1.5; vertical-align: 2px;
}
.checkoutForm table.customer_form th em::after { content: "必須"; font-size: 11px; font-weight: 900; }

.checkoutForm table.customer_form input[type="text"],
.checkoutForm table.customer_form input[type="tel"],
.checkoutForm table.customer_form input[type="email"],
.checkoutForm table.customer_form input[type="password"],
.checkoutForm table.customer_form select,
.checkoutForm table.customer_form textarea {
  width: 100%; min-height: 56px; padding: 12px 14px;
  font: inherit; font-size: 16px; color: var(--brown);
  background: #f7f2e9; border: 2px solid #cec4b7; border-radius: 0;
}
.checkoutForm table.customer_form textarea { min-height: 130px; line-height: 1.8; }
.checkoutForm table.customer_form input:focus,
.checkoutForm table.customer_form select:focus,
.checkoutForm table.customer_form textarea:focus {
  border-color: var(--orange); background: #fff; outline: 3px solid rgba(223, 95, 11, .14);
}
.checkoutForm table.customer_form input[type="radio"],
.checkoutForm table.customer_form input[type="checkbox"] {
  width: auto; min-height: 0; margin-right: 8px; accent-color: var(--orange);
}
.checkoutForm table.customer_form label { font-weight: 800; }
.checkoutForm table.customer_form .instruction,
.checkoutForm .participantNote {
  display: block; margin-top: 7px; font-size: 13px; font-weight: 800; color: #6b6157;
}
.checkoutForm .participantNote { margin-top: 16px; }

/* 姓と名、セイとメイは横に並べる（Welcartは td を2つに分けて出す） */
.checkoutForm table.customer_form tr#name_row,
.checkoutForm table.customer_form tr#furikana_row {
  grid-template-columns: 1fr 1fr; column-gap: 12px;
}
.checkoutForm table.customer_form tr#name_row > th,
.checkoutForm table.customer_form tr#furikana_row > th { grid-column: 1 / -1; }
.checkoutForm table.customer_form .member_name,
.checkoutForm table.customer_form .member_furigana {
  display: block; margin-bottom: 4px; font-size: 13px; font-weight: 800; color: #6b6157;
}

/* 郵便番号＋住所検索ボタン */
.checkoutForm table.customer_form tr#zipcode_row > td {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.checkoutForm table.customer_form tr#zipcode_row input#zipcode { flex: 0 0 auto; width: 210px; }
.checkoutForm table.customer_form input.search-zipcode,
.checkoutForm table.customer_form #search_zipcode {
  flex: 0 0 auto; width: auto; min-height: 56px; padding: 0 24px; cursor: pointer;
  background: var(--brown); color: #fff; border: 3px solid var(--brown);
  font: inherit; font-size: 15px; font-weight: 900;
}
.checkoutForm table.customer_form input.search-zipcode:hover,
.checkoutForm table.customer_form #search_zipcode:hover {
  background: var(--orange); border-color: var(--orange);
}

/* 入力欄ごとのエラー表示 */
.fieldError {
  display: block; margin-top: 8px; padding: 10px 13px;
  background: #fff1ef; border-left: 5px solid #d94134; color: #b5362d;
  font-size: 14px; font-weight: 900; line-height: 1.6;
}
.checkoutForm table.customer_form tr.has-error input,
.checkoutForm table.customer_form tr.has-error select {
  border-color: #d94134; background: #fff6f4;
}

/* 会員登録の案内（パスワードの上に大きく出す） */
.passwordNotice {
  margin: 0; padding: 16px 18px;
  background: var(--yellow); border: 3px solid var(--brown);
  font-size: 16px; font-weight: 900; line-height: 1.7; color: var(--brown);
}
.passwordNotice small { display: block; margin-top: 4px; font-size: 13px; font-weight: 800; }

/* 押せるものはすべて指カーソルにする */
.cartCheckout,
.cartUpdate,
.cartRemove,
.checkoutBack,
.checkoutNext,
.confirmPurchase,
.memberDelete,
.checkoutMemberLogin summary,
.checkoutMemberLogin button,
.checkoutForm .change-date-btn,
.memberEditActions button,
.memberFormSubmitWrap input[type="submit"],
.memberFormSubmitWrap button,
.loginbox .member_login_button,
#cart_table td.action input.delButton { cursor: pointer; }

/* 「お客様情報へ進む」は横幅いっぱいに */
.cartSummary .cartCheckout { width: 100%; }

/* 開催日を変えるボタン */
.checkoutForm .change-date-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 10px 16px; background: #fff; border: 3px solid var(--brown);
  color: var(--brown); font-size: 14px; font-weight: 900; cursor: pointer;
}
.checkoutForm .change-date-btn:hover { background: var(--orange); color: #fff; }

/* お支払い方法の案内カード */
.paymentPreview {
  margin-top: 28px; padding: 24px 26px;
  background: var(--yellow); border: 3px solid var(--brown); box-shadow: 8px 9px #d9d1c5;
}
.paymentPreview small { display: block; font-size: 13px; font-weight: 900; }
.paymentPreview strong { display: block; margin-top: 4px; font-size: 22px; color: var(--brown); }
.paymentPreview p { margin: 8px 0 0; font-size: 14px; font-weight: 800; }

/* 会員ログインの折りたたみの中はフォームが1枚挟まる */
.checkoutMemberLogin > div > form { display: contents; }
.checkoutMemberLinks {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 18px;
  margin: 4px 0 0; font-size: 13px; font-weight: 900;
}

/* --------------------------------------------------------------
 * 内容確認ページ
 * ------------------------------------------------------------ */

/* 確認画面の商品表。ブロック自体が枠で囲まれているので、表の枠と影は消して
   「枠の中に枠」にならないようにする。見出し行（商品／単価／数量／小計）も出さない。 */
#cart_table.confirmTable {
  border: 0; background: none; box-shadow: none;
}
#cart_table.confirmTable thead { display: none; }
#cart_table.confirmTable td.action { display: none; }
#cart_table.confirmTable td { padding: 20px 14px; }
#cart_table.confirmTable tr:last-child td { border-bottom: 0; }
#cart_table.confirmTable td.quantity { border-bottom: 1px solid #ddd6cc; }
#cart_table.confirmTable tr:last-child td.quantity { border-bottom: 0; }

/* 03 お客様情報は横幅いっぱいで見せる（アイコン＋中身の2カラム） */
.confirmCustomer { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
#confirm_table.confirmAddressTable tr { grid-template-columns: 190px 1fr; }

#confirm_table.confirmAddressTable { width: 100%; border-collapse: collapse; }
#confirm_table.confirmAddressTable tr { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 15px 0; border-bottom: 2px solid #ded8cd; }
#confirm_table.confirmAddressTable tr:last-child { border-bottom: 0; }
#confirm_table.confirmAddressTable th { padding: 0; text-align: left; font-size: 14px; font-weight: 900; color: #6b6157; background: none; border: 0; }
#confirm_table.confirmAddressTable td { padding: 0; font-size: 16px; font-weight: 800; color: var(--brown); border: 0; }
#confirm_table.confirmAddressTable tr.ttl { display: none; }

/* Welcartは「お客様情報」と「お届け先」を両方出すが、
   さぎ山は配達しないので、お届け先側の行は出さない（同じ住所が二重に見えてしまう） */
#confirm_table.confirmAddressTable tr[class*="delivery-"] { display: none; }

/* FAXは入力してもらっていないので確認画面にも出さない */
#confirm_table.confirmAddressTable tr.fax-row { display: none; }

.confirmPurchase {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  min-height: 76px; margin-top: 8px; cursor: pointer;
  background: var(--orange); color: #fff; border: 3px solid var(--brown);
  font: inherit; font-size: 20px; font-weight: 900;
}
.confirmPurchase:hover:not(:disabled) { background: var(--orange-deep); }
.confirmPurchase:disabled { background: #c9c0b5; border-color: #a89e91; cursor: not-allowed; }

@media (max-width: 700px) {
  #confirm_table.confirmAddressTable tr { grid-template-columns: 1fr; gap: 4px; }
}

/* --------------------------------------------------------------
 * ご予約完了ページ
 * ------------------------------------------------------------ */

.completionNote ul { margin: 0; padding-left: 1.2em; }

/* --------------------------------------------------------------
 * 会員ページ（ログイン／マイページ／新規登録）
 * ------------------------------------------------------------ */

/* Welcartが出すボタンを、デザインのボタンの見た目にする */
.loginbox .sagiyamaLoginSubmit { display: grid; }
.loginbox .member_login_button,
.memberFormSubmitWrap input[type="submit"],
.memberFormSubmitWrap button {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 66px; cursor: pointer;
  background: var(--orange); color: #fff; border: 3px solid var(--brown);
  font: inherit; font-size: 18px; font-weight: 900;
}
.loginbox .member_login_button:hover,
.memberFormSubmitWrap input[type="submit"]:hover,
.memberFormSubmitWrap button:hover { background: var(--orange-deep); }

.memberLogout a { color: inherit; text-decoration: none; }

.member_submenu { list-style: none; margin: 0; padding: 0; }
.member_submenu li { display: contents; }

/* ログイン中に読み込まれる旧テーマのCSSが、メニューをグレーにしてしまうので打ち消す */
.memberSidebar .member_submenu a,
.memberSidebar .member_submenu a:link,
.memberSidebar .member_submenu a:visited { background: #fff; color: var(--brown); }
.memberSidebar .member_submenu a:hover,
.memberSidebar .member_submenu a.is-current { background: #fff6dd; color: var(--orange-deep); }
.memberSidebar .member_submenu a svg { flex: none; color: var(--orange); }
.memberSidebar .member_submenu a.is-current svg { color: var(--orange-deep); }
.memberSidebar > strong svg { flex: none; }
.memberLogout svg { flex: none; color: #8a7d71; }

.memberEmpty { padding: 40px 10px; text-align: center; font-weight: 800; color: #6a6057; }

/* 会員情報：ふだんは読むだけ、編集ボタンでフォームを開く */
#sagiyamaProfileForm[hidden],
#sagiyamaProfileView[hidden],
#sagiyamaEditToggle[hidden] { display: none; }
.memberProfile .memberEditForm { margin-top: 26px; }
.memberSectionHeading button { cursor: pointer; }

/* 会員情報の編集フォーム（.checkoutForm のルールを共有している） */
.memberEditActions { flex-wrap: wrap; }
.memberDelete {
  padding: 14px 20px; background: none; border: 0; cursor: pointer;
  color: #8a7d71; font: inherit; font-size: 13px; font-weight: 900; text-decoration: underline;
}
.memberDelete:hover { color: #b5362d; }

.memberFormBack {
  display: block; margin-top: 18px; text-align: center;
  font-size: 14px; font-weight: 900; color: var(--brown-2);
}

.memberConsentWrap { margin: 24px 0; font-weight: 800; }
.memberConsentWrap input[type="checkbox"] { margin-right: 8px; accent-color: var(--orange); }

/* ご注文履歴は Welcart の表を使わず自前で組んでいる（wc_member_page.php）。
   行をクリックすると明細が開く。 */
.memberHistoryTable > a { cursor: pointer; color: var(--brown); text-decoration: none; }
.memberHistoryTable > a strong { color: var(--orange-deep); font-family: Impact, sans-serif; font-size: 17px; }
.memberHistoryHead,
.memberHistoryTable > a.memberHistoryRow { grid-template-columns: 105px 110px 1fr 100px 80px 24px; }
.memberHistoryChevron { display: grid; place-items: center; color: #8a7d71; transition: transform .2s; }
.memberHistoryRow[aria-expanded="true"] { background: #fff6dd; }
.memberHistoryRow[aria-expanded="true"] .memberHistoryChevron { transform: rotate(180deg); }

.memberHistoryDetail {
  border-top: 1px solid #d8d0c5; background: #faf6ee; padding: 24px 20px;
}
.memberHistoryDetail[hidden] { display: none; }

.orderItemList { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.orderItemList li {
  display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto;
  align-items: center; gap: 16px;
  background: #fff; border: 2px solid #e2dad0; padding: 12px 16px;
}
.orderItemList img { width: 70px; height: 70px; object-fit: cover; }
.orderItemList small { display: block; color: var(--orange-deep); font-size: 12px; font-weight: 900; }
.orderItemList a,
.orderItemList strong {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: 16px; font-weight: 900; color: var(--brown); text-decoration: none;
}
.orderItemList a:hover { color: var(--orange-deep); }
.orderItemQty { font-size: 13px; font-weight: 800; color: #6a6057; white-space: nowrap; }
.orderItemSub { font-size: 17px; font-weight: 900; color: var(--brown); white-space: nowrap; }

.orderFacts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0 0 18px; }
.orderFacts > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid #ded8cd; }
.orderFacts dt { font-size: 13px; font-weight: 900; color: #6a6057; }
.orderFacts dd { margin: 0; font-size: 14px; font-weight: 800; color: var(--brown); }

.orderTotal {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 14px;
  margin: 0 0 18px; font-weight: 900;
}
.orderTotal strong { color: var(--orange-deep); font-family: Impact, sans-serif; font-size: 30px; }

.orderDetailActions { display: flex; flex-wrap: wrap; gap: 10px; }
.orderDetailActions a {
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px;
  background: var(--brown); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 900;
}
.orderDetailActions a:last-child { background: var(--yellow); color: var(--brown); border: 2px solid var(--brown); }
.orderDetailActions a:hover { background: var(--orange); color: #fff; border-color: var(--orange); }

/* 「予約内容を詳しく見る」などのボタンは、hoverしても文字が背景に溶けないようにする */
.memberReservationActions a:hover { background: var(--orange); color: #fff; }
.memberReservationActions a:last-child:hover { background: var(--orange); color: #fff; border-color: var(--orange); }

/* 会員情報の編集フォームは、外側のカードの中にあるので枠は要らない */
.memberProfile .memberEditForm {
  border: 0; background: none; box-shadow: none; padding: 0;
}

@media (max-width: 900px) {
  .memberHistoryHead,
  .memberHistoryTable > a.memberHistoryRow { grid-template-columns: 90px 100px 1fr 90px 75px 20px; }
  .orderItemList li { grid-template-columns: 60px minmax(0, 1fr); }
  .orderItemList img { width: 60px; height: 60px; }
  .orderItemQty, .orderItemSub { grid-column: 2; }
  .orderFacts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .memberHistoryTable > a.memberHistoryRow { grid-template-columns: 1fr auto; }
  .memberHistoryChevron { grid-column: 2; }
}

/* ログイン欄：Welcartは type="text" で出すので、デザインの入力欄と同じ見た目にする */
.loginbox input[type="text"] {
  width: 100%; height: 60px; padding: 0 17px;
  font: inherit; font-size: 16px; color: var(--brown);
  background: #f6f1e8; border: 2px solid #cfc5b7;
}
.loginbox input[type="text"]:focus,
.loginbox input[type="password"]:focus,
.memberForm input:focus {
  border-color: var(--orange); background: #fff; outline: 3px solid rgba(223, 95, 11, .14);
}

/* パスワード再設定・変更ページ */
.memberReset .memberFormSubmitWrap { margin-top: 8px; }
.memberResetNote {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 18px 0 0; font-size: 13px; font-weight: 800; line-height: 1.8; color: #5d534b;
}
.memberResetNote svg { flex: none; color: var(--orange); margin-top: 2px; }
.memberReset .password_policy,
.memberReset .instruction { display: block; margin: 8px 0 0; font-size: 13px; font-weight: 800; color: #6b6157; }

/* 予約日カードの「日付を変更する」。
   船橋では funabashi.css で「黄色いボタン＋濃紺の文字」にしているが、
   さぎ山から引き継いだこの指定（文字も黄色）が後から上書きしてしまい、
   黄色地に黄色文字＝まったく読めない状態になっていた。 */
.productReserveDate > a,
.productReserveDate > a:link,
.productReserveDate > a:visited { color: var(--navy-deep); }
.productReserveDate > a:hover { background: #fff; color: var(--navy-deep); }

/* 「最近チェックした商品」の履歴削除ボタン：カードにくっつきすぎていたので離す */
.recentItemsClear { margin-top: 26px; text-align: right; }
.recentItemsClear button {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer; text-decoration: underline;
}
.recentItemsClear button:hover { color: var(--orange); }

/* 主なセット内容：見出しの英字（参考デザインに合わせる） */
.productSetDetailsHeading .kicker { margin: 0 0 6px; }

/* 主なセット内容：押した場所の行と列をハイライトする（assets/js/sagiyama.js）
   ※1列目のth・区切り行など、もともと背景色が指定されているセルに勝つ必要があるので
     !important を付けている。見出し行（thead）と区切り行は対象外。
     背景色は個別指定＋リテラル値で書くこと（background の一括指定＋var() だと負ける）。 */
.productSetTable tbody td,
.productSetTable tbody th { cursor: pointer; transition: background-color .12s; }

table.productSetTable tbody tr.is-crossRow > td,
table.productSetTable tbody tr.is-crossRow > th,
table.productSetTable tbody td.is-crossCol,
table.productSetTable tbody th.is-crossCol { background-color: #eaf1f9 !important; }

/* 押したセルは背景だけ濃くする。文字色は変えない */
table.productSetTable tbody td.is-crossCell,
table.productSetTable tbody th.is-crossCell { background-color: #ffdc00 !important; }

table.productSetTable tbody tr.is-crossRow { background-color: #eaf1f9 !important; }

.productSetTable .productSetGroup > th,
.productSetTable .productSetGroup > td { cursor: default; }