/*
 * WooCommerce ブリッジCSS。
 * WooCommerce 既定のマークアップ（ul.products / li.product / div.product 等）を
 * v171 デザイン（components.css の .result-card / .card / .btn など）に寄せる。
 * 予約フォーム等のプラグイン出力を壊さないよう、見た目のみを調整する。
 */

/* ================================================================== *
 * 共通：メインラッパ・パンくず・見出し
 * ================================================================== */
.okiwork-wc {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-9);
}
/* WCページ（カート/決済/マイページ）の見出し */
.okiwork-page-title {
  font-size: var(--fs-30);
  font-weight: 900;
  color: var(--c-navy);
  line-height: 1.3;
  margin-bottom: var(--sp-5);
}
.okiwork-wc-page .breadcrumb {
  font-size: var(--fs-13);
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-3);
}
.okiwork-wc-page .breadcrumb a { color: var(--c-navy); text-decoration: none; }
.okiwork-wc-page .breadcrumb a:hover { text-decoration: underline; }

/* ================================================================== *
 * マイページ（my-account）— ナビをサイドバー化
 * ================================================================== */
.woocommerce-account .woocommerce {
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 220px;
  flex: 0 0 220px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--c-surface);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-14);
  font-weight: 500;
  border-bottom: 1px solid var(--c-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--c-bg-alt); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--c-brand-surface);
  color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1;
  min-width: 0;
}
@media (max-width: 860px) {
  .woocommerce-account .woocommerce { flex-direction: column; }
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; flex: none; }
}

/* WooCommerce側は `.woocommerce:where(body:not(…)) .woocommerce-breadcrumb a` で (0,2,1)。
   `.woocommerce` は body 自身に付くため、子孫セレクタ（body .woocommerce …）では一致しない。
   body に直接くっつけて (0,2,2) にする。 */
body.woocommerce .woocommerce-breadcrumb {
  font-size: var(--fs-13);
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-4);
}
body.woocommerce .woocommerce-breadcrumb a {
  color: var(--c-navy);
  text-decoration: none;
}
body.woocommerce .woocommerce-breadcrumb a:hover { text-decoration: underline; }
/* モバイルでのタップ領域を確保する（実測18〜21pxだった）。 */
@media (max-width: 860px) {
  body .woocommerce-breadcrumb a,
  .breadcrumb a { display: inline-block; padding: 6px 0; }
}

.woocommerce-products-header__title,
.woocommerce div.product .product_title {
  font-size: var(--fs-30);
  font-weight: 900;
  color: var(--c-navy);
  line-height: 1.3;
}
.woocommerce-products-header { margin-bottom: var(--sp-4); }

/* ================================================================== *
 * 宿一覧（archive / shop）— result-card を縦に積む
 * ================================================================== */

/* 件数・並び替えを1行に */
.woocommerce .woocommerce-result-count {
  float: left;
  margin: 0;
  color: var(--c-ink-soft);
  font-size: var(--fs-13);
  line-height: 40px;
}
.woocommerce .woocommerce-ordering {
  float: right;
  margin: 0 0 var(--sp-4);
}
.woocommerce .woocommerce-ordering select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-14);
}

/* WCの商品ループ（ul.products）を result-list（縦積み）に矯正 */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  clear: both;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
  display: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 100%;
  float: none;
  margin: 0;
  clear: none;
  text-align: left;
}
/*
 * モバイルで宿カードが半分の幅になる問題の修正。
 *
 * WooCommerce の woocommerce-smallscreen.css が 768px 以下で
 *   .woocommerce ul.products[class*="columns-"] li.product { width: 48%; float: left; }
 * を当てるため、上の width:100% が負けて2カラム相当の幅になり、
 * カードが縦に積まれたまま右半分が空く（実測 171.8px / コンテナ 358px）。
 * 属性セレクタのぶん詳細度が高いので、同じ形の指定でないと打ち消せない。
 * 宿一覧は横型カードを1行1件で積む設計（loop_shop_columns も1）。
 */
@media screen and (max-width: 768px) {
  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product,
  /* 偶数番目を右に寄せる指定も打ち消す。今は親が flex なので効かないが、
     残しておくと将来レイアウトを変えたときに2カラムへ戻る。 */
  .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
  .woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) {
    width: 100%;
    float: none;
    clear: none;
    margin: 0;
  }
}

/* WC既定の見出し・価格・ボタンの余白リセット（result-card 内は独自要素を使う） */
.woocommerce ul.products li.product.result-card::before,
.woocommerce ul.products li.product.result-card::after { content: none; }

/* 画像はカードの高さにぴったり充填する。height:100% の連鎖に頼らず、
   リンクを基準に画像を絶対配置で inset:0 させて隙間（余白）を出さない。 */
.result-thumb-link {
  display: block;
  position: relative;
  height: 100%;
  min-height: 172px;
  overflow: hidden;
  background: var(--c-bg-alt);
  border-radius: var(--radius-m);
}
.result-thumb {
  position: absolute;
  inset: 0;
}
.result-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.result-info h3 { margin: 0; }
.result-info h3 a {
  color: var(--c-navy);
  text-decoration: none;
}
.result-info h3 a:hover { text-decoration: underline; }
.result-desc { margin-top: var(--sp-3); font-size: var(--fs-14); color: var(--c-ink-soft); line-height: 1.8; }
.result-price-col .btn { text-decoration: none; }

/* ページネーション */
.woocommerce nav.woocommerce-pagination { margin-top: var(--sp-6); text-align: center; }
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 6px;
  border: none;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none;
  margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  color: var(--c-navy);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--c-brand-surface);
  color: #fff;
  border-color: var(--c-navy);
}

/* ================================================================== *
 * 宿詳細（single-product）
 * WooCommerce 既定の2カラム（ギャラリー48% / サマリー48%・float）を活かし、
 * 宿情報・レビュー・関連商品は float をクリアして下に全幅で積む。
 * grid 化すると中身の狭いブロックが縮むため、既定レイアウトを尊重する。
 * ================================================================== */
.woocommerce div.product {
  margin-top: var(--sp-2);
  overflow: hidden; /* 内部の float を包む */
}
/*
 * **左右の向きは、ここで決めきる（2026-08-17）。**
 * これまで幅だけを指定し、左右はWooCommerce本体のCSS任せだった。
 * 「料金の目安を写真の下に落とす」には**どちらが左でどちらが右か**が確定している必要がある
 *（本体のCSSが読み込まれない構成で崩れると、原因が遠くなる）。
 */
.woocommerce div.product .woocommerce-product-gallery {
  float: left;
  clear: left;
  width: 48%;
  margin-bottom: var(--sp-5);
}
.woocommerce div.product .entry-summary {
  float: right;
  width: 48%;
  margin-bottom: var(--sp-5);
}
/*
 * **宿名は2カラムの上に全幅で。**右カラムの先頭に置くと、そのぶん
 * カレンダーだけが写真より下から始まり、上端が揃わない。
 */
.woocommerce div.product > .product_title {
  clear: both;
  width: 100%;
  margin: 0 0 var(--sp-3);
}
/*
 * **「パッケージ料金の目安」は写真の下（左カラム）。**
 * ギャラリーと同じ左寄せ・同じ幅にして、右のカレンダーと高さを噛み合わせる。
 */
.woocommerce div.product > .okiwork-single-rate {
  float: left;
  clear: left;
  width: 48%;
  margin-bottom: var(--sp-5);
}
@media (max-width: 860px) {
  /* 狭い画面では縦に積む（左右に分ける意味が無い）。 */
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product .entry-summary,
  .woocommerce div.product > .okiwork-single-rate {
    float: none;
    width: 100%;
  }
}
/* 予約ブロック・宿情報ブロック・レビュー・関連商品はギャラリー/サマリーの下に全幅で並べる */
.woocommerce div.product .okiwork-booking-section,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .okiwork-hinfo,
.woocommerce div.product .related.products,
.woocommerce div.product .okiwork-reviews {
  clear: both;
  width: 100%;
  float: none;
}

/* 予約ブロック（プラン選択＋予約フォーム）。全幅で出すため、
   入力欄は横並びにして縦の長さを抑える。 */
.woocommerce div.product .okiwork-booking-section { margin-top: var(--sp-6); }
.okiwork-booking-section form.cart { margin: 0; }
.okiwork-booking-section form.cart button.single_add_to_cart_button { max-width: 420px; }
.okiwork-booking-section .okiwork-quote-cta { max-width: 420px; }
/*
 * 見積書ボタンにも WooCommerce の `form.cart .button { float: left }` が効いてしまい、
 * すぐ下の取引条件の注記が**ボタンの右に回り込んで**いた。
 * 相手のセレクタは (0,4,2)。同じ祖先を書かないと詳細度で負ける。
 */
.woocommerce div.product form.cart .okiwork-quote-cta .button,
.okiwork-quote-cta .button {
  display: inline-block;
  float: none;
}
/*
 * 「予約を進める」も float:left なので、見積の一節がその**右半分に押し込まれて**いた。
 * clear で下に落とす。予約が主、見積は法人向けの補助——縦に並ぶのが正しい順序。
 */
.okiwork-quote-cta { overflow: hidden; clear: both; }

@media (min-width: 861px) {
  /* 日程・人数など基本条件は1行に。 */
  /* チェックイン日／宿泊日数／人数・部屋数 の3欄。
     人数と部屋数を1つのポップアップにまとめたので、以前の4列から減っている。
     人数の欄は中身（大人・お子さま・室数の要約）が長いので幅を厚めに取る。 */
  .okiwork-booking-section .okiwork-stay-basics {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 0 var(--sp-5);
    align-items: start;
  }
  /* ポップアップは絶対配置で開くので、押した欄が重なり順で上に来るようにする。 */
  .okiwork-booking-section .okiwork-stay-guests { position: relative; z-index: 2; }
  /* 会社名・部署は2列。 */
  .okiwork-booking-section .okiwork-corp-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--sp-5);
  }
  /* 泊ごとの宿・プラン、区間ごとのレンタカー、同行者は横に並べる。 */
  .okiwork-booking-section #okiwork_hotels_container,
  .okiwork-booking-section #okiwork_cars_container,
  .okiwork-booking-section #okiwork_companions_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0 var(--sp-5);
  }
  /* 泊ごとの宿・プランだけは列を広く取る。プラン名は部屋種別と単価まで入るので、
     260px（3列）だと「【朝食付】ツインルーム（ツイン・¥14,0…」で切れていた
     （実測：必要357px に対し 319px）。どのプランを選んでいるかが読めないと、
     泊ごとに変えるための欄として用をなさない。 */
  .okiwork-booking-section #okiwork_hotels_container {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
  .okiwork-booking-section #okiwork_hotels_container select { width: 100%; }
  .okiwork-booking-section #okiwork_hotels_container .okiwork-plan-select { margin-left: 0; margin-top: 6px; }
  .okiwork-booking-section .okiwork-companion-row input { width: 100%; }
}

/* 室料表示（価格差し替え） */
.okiwork-single-rate { margin: var(--sp-3) 0 var(--sp-4); }
.okiwork-single-rate .price-from { font-size: var(--fs-28); }
.okiwork-rate-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-12);
  color: var(--c-ink-soft);
  line-height: 1.7;
}

/* パッケージ料金の目安（下の予約フォームに追随してサーバー側で計算した額） */
.okiwork-package-price {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
}
.okiwork-package-price .price-label {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-ink-soft);
  margin-bottom: 2px;
}
.okiwork-package-price .price-from { font-size: var(--fs-32); }
.okiwork-package-price .price-unit { margin-top: 4px; }
/* 計算中は薄くするだけにする。高さを変えると、入力のたびに下の内容が跳ねる。 */
.okiwork-package-price.is-busy .price-from,
.okiwork-package-price.is-busy .price-unit { opacity: .45; transition: opacity .15s; }

/* 申し込めない組み合わせのとき。**枠ごと色を変える。**
   それまでは金額が「—」になり、理由が本文と同じ薄いグレーで続くだけだったので、
   読み飛ばされて「なぜ進めないのか分からない」状態になっていた（2026-08-07 オーナー指摘）。
   下の満室の案内（.okiwork-soldout）と同じ色にして、「止まっている」を1つの合図にまとめる。 */
.okiwork-package-price.is-blocked {
  border-color: var(--c-terracotta);
  border-left: 4px solid var(--c-terracotta);
  /* 地の色は**その場で混ぜる**。色を直に書くと、暗い配色のときに白い面が1枚だけ残る。
     color-mix が使えない環境では、下の行が無視されて素の面色になる（枠線と文字色だけで伝わる）。 */
  background: var(--c-surface);
  background: color-mix(in srgb, var(--c-terracotta) 12%, var(--c-surface));
}
/* 金額の代わりの「—」は主役ではない。理由のほうを読ませる。 */
.okiwork-package-price.is-blocked .price-from { color: var(--c-ink-soft); }
.okiwork-package-price.is-blocked .price-unit {
  color: var(--c-accent-ink);   /* 3.64:1 → 5.7:1（UIレビュー #5） */
  font-weight: 700;
  font-size: var(--fs-14);      /* 13px だと「大きい文字」の緩和も効かない */
  line-height: 1.7;
}

/* 室料の単価は内訳として小さく残す（パッケージ額が主役） */
.okiwork-rate-breakdown {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-13);
  color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums;
}
.okiwork-rate-breakdown .price-from,
.okiwork-rate-breakdown .amount { font-size: var(--fs-15); font-weight: 700; color: var(--c-ink); }
.okiwork-rate-breakdown .price-minstay { font-weight: 700; color: var(--c-teal); }
/* 既定の ¥0 価格が万一残っても隠す（室料表示に一本化） */
.woocommerce div.product p.price del,
.woocommerce div.product p.price ins { text-decoration: none; }

/* 予約入力欄（プラグイン出力：.okiwork-booking-fields）を整える */
.okiwork-booking-fields {
  margin: var(--sp-4) 0;
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-bg-alt);
}
.okiwork-booking-fields .form-row { margin: 0 0 var(--sp-4); }

/* 項目グループの見出し（法人利用／外国籍／同行者／宿泊施設・プラン／レンタカー／紹介コード）。
   見出しも入力欄のラベルも同じ 13px 太字だったため、「宿泊」と「レンタカー」が地続きに見え、
   どこまでが一つの項目なのか判別できなかった。区切り線と一回り大きい文字で段落を立てる。

   セレクタが2本あるのは詳細度のため。WooCommerce本体の
   `.woocommerce form .form-row { padding:3px; margin:0 0 6px }` は 0,2,1 あり、
   クラス2つだけの指定では負けて余白が出ない。`.woocommerce` を前置して 0,3,1 で上書きする。 */
.okiwork-booking-fields .okiwork-group-head,
.woocommerce .okiwork-booking-fields p.okiwork-group-head {
  margin: var(--sp-6) 0 var(--sp-4);
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--c-border);
}
.okiwork-booking-fields .okiwork-group-head > label {
  font-size: var(--fs-15);
  line-height: 1.5;
  margin-bottom: var(--sp-1);
}
.okiwork-booking-fields .okiwork-group-head .description {
  display: block;
  font-size: var(--fs-13);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-ink);
  opacity: .72;
  margin-top: 2px;
}
/* 紹介コードは見出し・入力欄・説明が1つの p に同居している。線と余白だけ効かせ、
   入力欄が見出しに貼りつかないよう間隔を作る。 */
.okiwork-booking-fields .okiwork-group-head.okiwork-ref-row input { margin-top: var(--sp-1); }
.okiwork-booking-fields .okiwork-group-head.okiwork-ref-row .description { margin-top: var(--sp-2); }

/* レンタカーは「島の見出し＋その島の泊ごとの選択欄」。
   車は島ごとの事業者が出すので島で束ね、貸出は1日単位なので泊ごとに選ばせる。 */
.okiwork-booking-fields .okiwork-car-area,
.woocommerce .okiwork-booking-fields p.okiwork-car-area {
  margin: var(--sp-4) 0 var(--sp-2);
  padding: 0;
}
.okiwork-booking-fields .okiwork-car-area > label { font-size: var(--fs-14); }
.okiwork-booking-fields .okiwork-car-nights {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-3);
}
.okiwork-booking-fields .okiwork-car-nights .form-row,
.woocommerce .okiwork-booking-fields .okiwork-car-nights p.form-row {
  margin: 0;
  padding: 0;
}
.okiwork-booking-fields .okiwork-car-nights label {
  font-size: var(--fs-13);
  font-weight: 400;
  opacity: .8;
}
/* 連続していない指定への注意。申込みボタンを押せなくするので、理由は必ず見える場所に置く。 */
.okiwork-booking-fields .okiwork-car-gap {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--c-terracotta);
  background: var(--c-surface);
  border-radius: var(--radius-s);
  font-size: var(--fs-14);      /* 13px だと 4.5:1 が要る側なので、字も上げる */
  line-height: 1.6;
  color: var(--c-accent-ink);   /* 3.89:1 → 5.7:1（UIレビュー #5） */
}

/*
 * 予約ボタンの直前に出す「押せない理由」（2026-08-15 UIレビュー #24・#14）。
 *
 * これまで理由は「パッケージ料金の目安」＝ページのいちばん上にしか出ておらず、
 * 押した場所から **1,160〜1,500px** 離れていた。宿詳細はスマホで13,520px。
 * **上まで戻らないと理由に行き着かない。**
 */
.okiwork-cta-reason {
  margin: 0 0 var(--sp-3);
  max-width: 420px;
  padding: var(--sp-3);
  border-left: 3px solid var(--c-terracotta);
  border-radius: var(--radius-s);
  background: var(--c-surface);
  color: var(--c-accent-ink);
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.6;
}
/* 空きが無い日程の案内。断って終わらせず、代わりの宿と相談導線をここに置く。
   赤一色にすると「もう無理」に見えるので、見出しだけ強くして本文は落ち着かせる。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  /* トークン名は --c-border（--c-line は存在せず、ダークモードで枠線だけ明色に取り残されていた）。 */
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-terracotta);
  border-radius: var(--radius-s);
  background: var(--c-surface);
}
/* 見出しの色は --c-terracotta ではなく地用の濃い一段を使う。
   #C1694F は白地に対して 3.89:1 で、16px・太字は「通常の文字」扱い（AAは4.5:1必要）。
   --c-accent-surface は 5.70:1（2026-08-07 実測）。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-head {
  margin: 0 0 var(--sp-2);
  font-weight: 700;
  color: var(--c-accent-surface);
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-sub {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-14);
}
/* 別の宿の候補。**行ぜんぶが押せる**ことが分かる形にする。
   点つきの箇条書きだと、上の日程の候補（枠つき）と並んだときに
   こちらだけ「読むだけの文章」に見えてしまう。
   日程は横に並ぶ小さな札、宿は縦に積む横長の帯——同じ「押せる」でも形は分ける
   （「この宿の別の日程」と「別の宿」を、ひと目で別の選択として読ませたい）。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
/*
 * **枠は行（li）が持つ（2026-08-17 オーナー指摘）。**
 *
 * もとは `<a>` に枠を付けていたので、その外に置いた「この宿について」が
 * **枠の外にはみ出し、2軒並ぶとどちらの宿の話か分からなくなっていた**
 *（`<a>` の中に `<details>` は置けない——入れ子が壊れる）。
 * 枠を行へ移すと、リンクの帯も紹介も**同じ宿の箱の中**に収まる。
 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts li {
  margin: 0;
  line-height: 1.7;
  border: 1px solid var(--c-navy);
  border-radius: var(--radius-s);
  background: var(--c-surface);
  overflow: hidden;             /* 角の丸みから帯の塗りがはみ出さないように */
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2em .7em;
  padding: var(--sp-2) var(--sp-4);
  color: var(--c-navy);
  font-size: var(--fs-14);
  text-decoration: none;
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts .okiwork-soldout-alt-name { font-weight: 700; }
/* 間隔は gap が持つ。下の共通ルールの margin-left が残ると、そのぶん二重に空く。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts .okiwork-soldout-area,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts .okiwork-soldout-roomtype,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts .okiwork-soldout-newtab,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts .okiwork-soldout-rate { margin-left: 0; }
/*
 * 部屋の種類（定員つき）と、新しいタブで開くことわり（2026-08-16 オーナー指摘）。
 * 宿名・料金より一段弱く。**判断の材料であって、主役ではない。**
 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-roomtype,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-newtab {
  font-size: var(--fs-12, 12px);
  color: var(--c-ink-soft, #6f695e);
}
/* 「別のタブで開きます」は最後に置く。矢印（::after）の手前で右へ寄せる。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts .okiwork-soldout-newtab { margin-left: auto; }
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a::after { margin-left: .5em; }
/* 押せることを字でも示す。右端の矢印は飾りなので、読み上げには渡さない（content は拾われない）。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a::after {
  content: "→";
  margin-left: auto;
  padding-left: .5em;
  font-weight: 700;
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:hover,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:focus {
  background: var(--c-navy);
  color: #fff;
}
/* 帯を塗ったら、中の薄い文字も一緒に反転させる。ここを書かないと
   濃紺の上に薄いグレーが残って、島名と料金だけ読めなくなる。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:hover .okiwork-soldout-area,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:hover .okiwork-soldout-rate,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:focus .okiwork-soldout-area,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:hover .okiwork-soldout-roomtype,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:focus .okiwork-soldout-roomtype,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:hover .okiwork-soldout-newtab,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:focus .okiwork-soldout-newtab,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:focus .okiwork-soldout-rate { color: inherit; }
/* 同じ宿で日をずらす案。宿の候補（上の箇条書き）と**見た目を分ける**。
   どちらも同じ点つきリストだと、「この宿の別日程」と「別の宿」が1つの並びに見えて、
   何を選んでいるのか分からなくなる。日程は押せる札にして、まず目に入るようにする。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-dates {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  padding: 0;
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-dates a {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-navy);
  border-radius: var(--radius-s);
  background: var(--c-surface);
  color: var(--c-navy);
  font-size: var(--fs-13);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.6;
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-dates a:hover,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-dates a:focus {
  background: var(--c-navy);
  color: #fff;
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-area,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-rate {
  font-size: var(--fs-13);
  color: var(--c-ink-soft, #666);
  margin-left: .4em;
}
/* ボタンが float すると次の注記が横へ回り込む。
   WooCommerce の `.woocommerce div.product form.cart .button` が float:left を当てており、
   クラス3つの素直なセレクタでは**詳細度で負ける**（向こうは 0,4,2）。
   同じ祖先を書いて土俵を合わせる。ここを削るとボタンに文章が食い込む。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-consult {
  margin: 0 0 var(--sp-2);
  overflow: hidden;
}
.woocommerce div.product form.cart .okiwork-soldout-consult .button,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-consult .button {
  display: inline-block;
  float: none;
}
/* **いちばん押してほしいものを、いちばん強くする。**
   この宿の取れるぶんで進むボタンは、共通の .button（生成りの地）のままだと
   代替宿の帯（紺の枠線）や「コンシェルジュに相談する」より弱く見えていた
   ——実測（375px）で、主CTAが最も目立たない状態だった（2026-08-07）。
   詳細度は WooCommerce の `.woocommerce div.product form.cart .button`（0,4,2）に
   負けないよう、同じ祖先を書いて土俵を合わせる。 */
.woocommerce div.product form.cart .okiwork-soldout-consult .button.okiwork-partial-hold,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-consult .button.okiwork-partial-hold {
  background: var(--c-brand-surface);
  border-color: var(--c-brand-surface);
  color: var(--c-on-brand);
}
.woocommerce div.product form.cart .okiwork-soldout-consult .button.okiwork-partial-hold:hover,
.woocommerce div.product form.cart .okiwork-soldout-consult .button.okiwork-partial-hold:focus,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-consult .button.okiwork-partial-hold:hover,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-consult .button.okiwork-partial-hold:focus {
  background: var(--c-brand-surface-hover);
  border-color: var(--c-brand-surface-hover);
  color: var(--c-on-brand);
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-note {
  margin: 0;
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--c-ink-soft, #666);
}


/* 提案どおりまとめて申し込むボタン。宿の帯の中に置くので、帯より一段控えめにする
   （帯そのものが「この宿を見る」で、こちらは「決めて進む」）。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alt-take {
  margin: var(--sp-2) 0 0;
  overflow: hidden;
}
.woocommerce div.product form.cart .okiwork-soldout-alt-take .button,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alt-take .button {
  display: inline-block;
  float: none;
  font-size: var(--fs-13);
  padding: var(--sp-2) var(--sp-4);
}
/* 予約内容の確認に出す不足の案内。宿ページと違い、まわりが表なので下に間隔を置く。 */
.okiwork-cart-shortage { margin: 0 0 var(--sp-5); }

/*
 * 押せない状態が見た目でも分かるように。
 *
 * **`opacity` で薄めるだけにしていたのが誤りだった**（2026-08-15 UIレビュー #1）。
 * WooCommerce本体の `button.alt.disabled{background-color:#7f54b3}` が残るため、
 * 無効になった瞬間だけ**紫**——OkiWorkの配色に無い色——になり、
 * 薄めた結果、文字とのコントラストが **2.14:1**（有効時は12.5:1）まで落ちていた。
 * 最重要のボタンが、押せない瞬間だけ他社の色になって文字も読めない状態。
 *
 * **薄めるのではなく、無効のための色を自前で持つ。**
 * `#55616A` on `#E3E6E8` は **5.0:1**（ブラウザで測った実測値）。
 * 16pxの太字は WCAG の「大きい文字」に**当たらない**ので、必要なのは4.5:1。
 * 最初 `#6B7780` で置いたら 3.66:1 で届かず、測り直して詰めた。
 * **変えるときは必ず測り直すこと。**目分量では届かない。
 */
.okiwork-booking-fields ~ .single_add_to_cart_button[disabled],
.woocommerce div.product form.cart .single_add_to_cart_button[disabled],
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.alt:disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.alt.disabled {
  background: #E3E6E8;
  background-color: #E3E6E8;
  color: #55616A;
  opacity: 1;
  cursor: not-allowed;
}
/* 押せないものに手応えを返さない（本体の :hover は alt.disabled にも当たる）。 */
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled:hover {
  background: #E3E6E8;
  background-color: #E3E6E8;
  color: #55616A;
  transform: none;
}

.okiwork-booking-fields label {
  display: block;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 6px;
}
.okiwork-booking-fields input[type="date"],
.okiwork-booking-fields input[type="number"],
.okiwork-booking-fields input[type="text"],
.okiwork-booking-fields select {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: inherit;
  /* iOSの自動拡大よけ。16px未満にしない（#23）。 */
  font-size: var(--fs-16);
}
.okiwork-booking-fields .okiwork-office-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.okiwork-booking-fields .okiwork-office-label input { width: auto; height: auto; }
.okiwork-booking-fields .okiwork-office-note {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-12);
  font-weight: 400;
  color: var(--c-ink-soft);
  line-height: 1.7;
}

/* 会員登録が要ることの予告（申込ボタンの下・カートの「予約手続きへ」の上） */
.okiwork-signup-ahead {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-border);
  font-size: var(--fs-12);
  line-height: 1.8;
  color: var(--c-ink-soft);
}
/* カート側は、ボタンとの間を空けて上に置く */
.woocommerce .cart-collaterals .okiwork-signup-ahead,
.cart_totals .okiwork-signup-ahead {
  margin: 0 0 var(--sp-3);
}

/* 取引条件の提示（宿詳細）と、予約リクエストの同意チェック */
.okiwork-legal-note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-12);
  line-height: 1.8;
  color: var(--c-ink-soft);
}
.okiwork-legal-links { display: block; margin-top: 2px; }
.okiwork-legal-links a { color: var(--c-navy); text-decoration: underline; }
.okiwork-consent {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-bg-alt);
}
.okiwork-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-14);
  line-height: 1.7;
  cursor: pointer;
}
.okiwork-consent-label input[type="checkbox"] {
  width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; cursor: pointer;
}
.okiwork-consent-label a { color: var(--c-navy); text-decoration: underline; }
.okiwork-consent-label .required { color: var(--c-alert); text-decoration: none; border: 0; }
.okiwork-consent-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-12);
  line-height: 1.8;
  color: var(--c-ink-soft);
}

/* 単一商品のカート追加ボタン（＝予約へ進む） */
.woocommerce div.product form.cart button.single_add_to_cart_button {
  width: 100%;
  height: 52px;
  background: var(--c-brand-surface);
  color: #fff;
  border: none;
  border-radius: var(--radius-m);
  font-weight: 700;
  font-size: var(--fs-16);
  cursor: pointer;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
  background: var(--c-brand-surface-hover);
}

@media (max-width: 860px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

/* ============================================================
   注文受付完了（order-received / thankyou）— リクエスト制の完了画面
   ============================================================ */
.okiwork-received { max-width: 760px; }
.okiwork-received-badge {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-status-confirmed-bg); color: var(--c-status-confirmed-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-30); line-height: 1; margin: var(--sp-2) 0 var(--sp-4);
}
.okiwork-received-lead {
  font-size: 1.02rem; line-height: 1.9; color: var(--c-ink);
  margin: 0 0 var(--sp-6);
}
.okiwork-steps {
  list-style: none; margin: 0 0 var(--sp-6); padding: 0;
  border: 1px solid var(--c-border); border-radius: var(--radius-m);
  background: var(--c-surface); overflow: hidden;
}
.okiwork-step {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.okiwork-step:first-child { border-top: none; }
.okiwork-step-num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-bg-alt); color: var(--c-ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
}
.okiwork-step.is-current .okiwork-step-num { background: var(--c-brand-surface); color: #fff; }
.okiwork-step-body { display: flex; flex-direction: column; gap: 2px; }
.okiwork-step-body strong { color: var(--c-ink); }
.okiwork-step-body span { color: var(--c-ink-soft); font-size: .95rem; line-height: 1.7; }
.okiwork-received-overview {
  list-style: none; margin: 0 0 var(--sp-6); padding: var(--sp-4) var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  border: 1px solid var(--c-border); border-radius: var(--radius-m);
  background: var(--c-bg-alt);
}
.okiwork-received-overview li {
  border: none; margin: 0; padding: 0;
  color: var(--c-ink-soft); font-size: .9rem;
}
.okiwork-received-overview li strong { display: block; color: var(--c-ink); font-size: 1.02rem; margin-top: 2px; }
.okiwork-received-cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6);
}
@media (max-width: 560px) {
  .okiwork-received-cta .btn { width: 100%; }
}

/*
 * 宿詳細のサムネイル列。
 *
 * WooCommerce既定は float + 25%幅で、写真が3枚だと右に1枚分の空きが残り、
 * 列が途中で切れて「揃っていない」ように見える（高さ・上端自体はずれていない）。
 * 枚数に合わせて横幅を使い切るグリッドにする。写真が増えたら折り返す。
 */
/*
 * 列数を「枚数（最大4）」に合わせる。すべてのサムネイルが同じ大きさになり、
 * 5枚以上は4列で折り返す。flex で余りを引き伸ばす作りにすると、行をまたいだとき
 * 段ごとに大きさが変わってしまう（6枚だと2行目の1枚だけが極端に大きくなる）。
 */
.woocommerce div.product .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}
.woocommerce div.product .flex-control-thumbs:has(li:last-child:nth-child(1)) { grid-template-columns: 1fr; }
.woocommerce div.product .flex-control-thumbs:has(li:last-child:nth-child(2)) { grid-template-columns: repeat(2, 1fr); }
.woocommerce div.product .flex-control-thumbs:has(li:last-child:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }

.woocommerce div.product .flex-control-thumbs::before,
.woocommerce div.product .flex-control-thumbs::after { content: none; display: none; }
/*
 * flexslider が li にインラインで幅（％）を書き込むため、スタイルシートの width では負ける。
 * 指定しないと枠が1/4に潰れ、写真だけが小さく間隔が広い不自然な並びになる（実測29px／枠114px）。
 */
.woocommerce div.product .flex-control-thumbs li {
  float: none;
  width: auto !important;
  margin: 0;
  list-style: none;
}
.woocommerce div.product .flex-control-thumbs li img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-s);
  opacity: 1;
}

/* ---- 宿詳細：右カラムの予約入口 -------------------------------------------
   予約フォーム本体は2カラムの下に全幅で出しているため、最初の画面には価格しか
   残らず右カラムが空いていた。要約と入口だけをここに置き、本体へ送る。 */
.okiwork-book-cta {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-bg-alt);
}
.okiwork-book-cta__btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* 44px を下回らないよう、行の高さではなく最小高さで確保する。 */
  min-height: 48px;
  padding: 13px 20px;
  border-radius: var(--radius-s);
  background: var(--c-brand-surface, #1d3242);
  color: var(--c-on-brand, #fff);
  font-weight: 700;
  font-size: var(--fs-15);
  text-align: center;
  text-decoration: none;
}
.okiwork-book-cta__btn:hover,
.okiwork-book-cta__btn:focus { color: var(--c-on-brand, #fff); opacity: .92; }
.okiwork-book-cta__note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-13);
  line-height: 1.75;
  color: var(--c-ink-soft);
}
.okiwork-book-cta__note strong { color: var(--c-ink); }

/* ------------------------------------------------------------------ *
 * WooCommerce が自前で色を持っている部品
 *
 * カート・ご予約手続きの一部は、WooCommerce のスタイルシートが背景色を
 * 直接指定している。テーマ側で文字色だけを暗いテーマ用に変えると、
 * 「明るい面に明るい文字」になって読めなくなる。
 * 2026-08-02 に実測で見つかったのは次の2つ。
 *   ・カートの「予約内容を更新」  1.01 : 1（ほぼ同色）
 *   ・マイページの状態バッジ      1.09 : 1
 * 面のほうもテーマのトークンに寄せて、両方が同じ向きに動くようにする。
 * ------------------------------------------------------------------ */

/* ボタン全般（WooCommerce 既定は薄いグレー地＋暗い文字）。 */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--c-bg-alt);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--c-surface);
  color: var(--c-ink);
}

/* 主要な操作（予約リクエストへ進む／送信する）。
   WooCommerce 既定の紫 #7F54B3 はブランドの色ではないので、藍に寄せる。 */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button {
  background: var(--c-brand-surface);
  color: var(--c-on-brand);
  border-color: var(--c-brand-surface);
  /* **形もサイトに揃える（2026-08-15 UIレビュー #10）。**
     副ボタン（:not(.btn):not(.alt)）と `.btn` は 999px なのに、
     予約手続きの主ボタンだけ WooCommerce 既定の角丸のままだった——
     **申込みの最後の一押しが、サイトで一番よそ者の形**になる。 */
  border-radius: 999px;
  min-height: 48px;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover {
  background: var(--c-brand-surface-hover);
  color: var(--c-on-brand);
  border-color: var(--c-brand-surface-hover);
}

/* 入力欄。ご予約手続きでは WooCommerce 既定の白いままの欄が残り、
   暗い地の中で白い箱だけが浮いていた（38個中14個）。 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce .select2-container .select2-selection--single,
#coupon_code {
  background: var(--c-field-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
}
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce-checkout input.input-text::placeholder,
.woocommerce-checkout textarea::placeholder {
  color: var(--c-ink-soft);
}

/* クーポンの折りたたみ帯・通知帯。既定は白地なので、面をテーマに合わせる。 */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  background: var(--c-tip-bg);
  color: var(--c-ink);
}

/* WooCommerce 自身のスタイルより詳細度を上げる必要がある部分。
   セレクタを短く書くと（例：`a.remove`）、WooCommerce の `.woocommerce a.remove` に負ける。
   読み込み順はこちらが後だが、詳細度が低いと後勝ちにはならない。 */

/* 削除リンク「×」。WooCommerce 既定は #a00 で、暗い地では 2.27:1。
 *
 * **大きさも足す（2026-08-15 UIレビュー #9）。**本体は
 * `.woocommerce a.remove { font-size:1.5em; height:1em; width:1em }` で **24×24px**。
 * 予約内容から1件消す操作＝**取り返しのつかない側**なのに、画面でいちばん小さい的だった。
 * 本体の `!important` は color にしか付いていないので、大きさは素直に上書きできる。
 * 見た目の丸は 24px のまま、**押せる範囲だけ 44px** に広げる（表が間延びしない）。 */
.woocommerce a.remove,
.woocommerce table.shop_table a.remove {
  color: var(--c-danger-ink);
  position: relative;
}
.woocommerce a.remove::after,
.woocommerce table.shop_table a.remove::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.woocommerce a.remove:hover,
.woocommerce table.shop_table a.remove:hover {
  background: var(--c-danger-ink);
  color: var(--c-on-brand);
}

/* 金額まわりの小さな注記（「(税込)」「消費税を含む」）。
   WooCommerce は #767676 を当てており、暗い地では 3.88:1（AA未満）。
   合計欄の `.woocommerce table.shop_table td small` が効いているので、同じ形で受ける。 */
.woocommerce table.shop_table td small,
.woocommerce table.shop_table td small .woocommerce-Price-amount,
.woocommerce table.shop_table td small .woocommerce-Price-currencySymbol,
.woocommerce .cart_totals table td small,
.woocommerce-checkout-review-order table td small,
.woocommerce small.tax_label,
.woocommerce small.includes_tax {
  color: var(--c-ink-soft);
}

/* ここだけ !important を使う。
   WooCommerce 側がこの2つに `!important` を付けており、詳細度をいくら上げても勝てない。
   打ち消すには同じ手を使うしかない。対象を2つに限っているのは、
   !important を広く撒くと、あとから普通の指定で直せない箇所が増えるため。 */
.woocommerce a.remove { color: var(--c-danger-ink) !important; }
.woocommerce small.tax_label,
.woocommerce small.includes_tax,
.woocommerce table.shop_table td small { color: var(--c-ink-soft) !important; }

/* 注文メモの textarea は .woocommerce の包みの外に出るため、上の指定が当たらない。 */
textarea.input-text,
textarea#order_comments {
  background: var(--c-field-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
}

/* カート・予約手続きの金額内訳（見積書と同じ項目を出す） */
.okiwork-breakdown th {
  font-weight: 400;
  color: var(--c-ink-soft);
  padding-left: 1em;
}
.okiwork-breakdown td { color: var(--c-ink-soft); }

/* 未ログインで予約手続きに来たときの案内（行き止まりにしない） */
.okiwork-checkout-login {
  max-width: 560px;
  margin: 0 auto var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
}
.okiwork-checkout-login-head { margin: 0 0 var(--sp-2); font-size: var(--fs-20); }
.okiwork-checkout-login-lead { margin: 0 0 var(--sp-4); color: var(--c-ink-soft); font-size: var(--fs-14); }
.okiwork-checkout-login .woocommerce-form-login { margin: 0; padding: 0; border: 0; }
.okiwork-checkout-login-register {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-14);
}
.okiwork-checkout-login-register .button { display: block; margin-top: var(--sp-2); text-align: center; }

/* ---- ログインの欄を1カラムに ----
 *
 * WooCommerce 既定（woocommerce-layout.css）は `form-row-first` を左へ、
 * `form-row-last` を右へ浮かせて2カラムにする。**この枠は 560px しかない**ので、
 * 片方だけ220pxになり、「ユーザー名またはメールアドレス」の見出しが2行に折れて
 * パスワードの欄と**段違いになる**（実測：見出し 64px と 32px）。
 *
 * 幅の広い画面でも2カラムにする理由が無い（入力は2つだけ）。
 * テーマ自身のログイン画面（`.okiwork-auth`）と同じ姿に揃える。
 *
 * 詳細度：ここは (0,3,0)、本体の `.woocommerce form .form-row-first` は (0,2,1)。
 * **クラスの数で先に比べる**ので、こちらが勝つ。
 */
.okiwork-checkout-login .woocommerce-form-login .form-row-first,
.okiwork-checkout-login .woocommerce-form-login .form-row-last {
  float: none;
  width: 100%;
  margin: 0 0 var(--sp-3);
}
.okiwork-checkout-login .woocommerce-form-login .form-row { margin: 0 0 var(--sp-3); }
.okiwork-checkout-login .woocommerce-form-login label {
  display: block;
  margin: 0 0 var(--sp-1);
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--c-ink);
}
.okiwork-checkout-login .woocommerce-form-login input:not([type="checkbox"]) {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-field-bg);
  color: var(--c-ink);
  font-family: inherit;
  font-size: var(--fs-15);
}
.okiwork-checkout-login .woocommerce-form-login input:focus {
  outline: none;
  border-color: var(--c-navy);
  box-shadow: 0 0 0 3px rgba(22, 55, 74, 0.12);
}
/* 「ログイン状態を保存」は自然幅のまま、文字と同じ行に置く。 */
.okiwork-checkout-login .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: var(--fs-14);
}
.okiwork-checkout-login .woocommerce-form-login input[type="checkbox"] { width: auto; height: auto; margin: 0; }
/* 「パスワードをお忘れですか？」は行の高さぶんの余白を持たせる。 */
.okiwork-checkout-login .woocommerce-form-login .lost_password { margin: var(--sp-3) 0 0; font-size: var(--fs-14); }

/* 紹介コードの枠（島民会議の中に埋もれないように） */
.okiwork-referral-block {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
}
.okiwork-referral-block > h3 { margin-top: 0; }

/* 予約一覧から紹介コードへの道しるべ */
.okiwork-referral-pointer {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-s);
  font-size: var(--fs-14);
  color: var(--c-ink-soft);
}
.okiwork-referral-pointer a { font-weight: 700; text-decoration: underline; }

/* プルダウンだと分かるようにする。
   WooCommerce 本体が `.form-row select` に appearance:none を当てて標準の矢印を消している
   （本体は select2 に差し替える前提のため）。当サイトは素の select をそのまま使う場所が
   あるので、消えたぶんをこちらで描き直さないと、テキスト入力欄と見分けがつかない。
   ユーザーテストで「どの操作で宿を変更できるのかが分からなかった」と報告された箇所で、
   実測すると予約フォームの select 10個のうち9個が矢印を失っていた。
   矢印は style.css の --select-chevron（ダークモードで色が入れ替わる）を使う。 */
.okiwork-booking-fields select,
.woocommerce form .form-row select,
.woocommerce-checkout select {
  appearance: none;
  padding-right: 36px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

/* 泊別プランナーで、その泊に選べるプランが無いときの説明。
   空のプルダウンを出す代わりに理由を書く（→ frontend-fields のコメント）。 */
.okiwork-plan-none {
  margin: 6px 0 0;
  padding: 8px 10px;
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--c-ink-soft);
  background: var(--c-tip-bg);
  border-radius: var(--radius-s);
}

/* 選んだプランのベッド構成と単価。閉じたプルダウンは長い名前で末尾を切るので、
   金額はプルダウンの外にも置く（→ frontend-fields のコメント）。 */
.okiwork-plan-chosen {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--c-ink-soft);
}
.okiwork-plan-chosen:empty { display: none; }

/* 同行者の入力欄。見出しはプレースホルダではなくラベルとして置く
   （入力するとプレースホルダが消えて、どの欄か分からなくなるため）。 */
.okiwork-booking-section .okiwork-field {
  display: block;
}
.okiwork-booking-section .okiwork-field-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--c-ink-soft);
}

/* 泊ごとの宿とプランは、同じ幅で縦に並ぶ2つの欄。左右をきっちり揃える。
   （プラン側にだけインラインの left margin が付いていて、6px ずれていた） */
.okiwork-booking-section #okiwork_hotels_container .okiwork-plan-select {
  margin-left: 0;
  margin-top: 6px;
  width: 100%;
}

/* アクティビティのカード。情報量が違っても申込ボタンの位置を揃える。
   （カードの高さはグリッドが揃えていたが、ボタンは中身の下にぶら下がるだけで、
   実測で下の余白が 96px / 48px / 17px とばらついていた） */
.okiwork-activity-card > div:last-child { flex: 1; }
.okiwork-activity-card form {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.okiwork-activity-card .okiwork-activity-submit {
  margin: auto 0 0;   /* 上を伸ばして下端へ。カードの高さが違ってもボタンの高さが揃う */
  padding-top: .6em;
}

/* 姓と名（セイとメイ）は横に2列。狭い画面では縦に落ちる。 */
.okiwork-booking-section .okiwork-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 480px) {
  .okiwork-booking-section .okiwork-field-pair { grid-template-columns: 1fr; }
}

/* 宿一覧カードの料金欄。主役は総額、単価はその内訳として小さく残す
   （詳細ページの「パッケージ料金の目安」と同じ組み立てにして、進んだ先で数字が変わらない）。 */
.result-price-col .price-label {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--c-ink-soft);
  margin-bottom: 2px;
}
.result-price-col .price-rate {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-12);
  color: var(--c-ink-soft);
}
/* 単価はここでは脇役。カード内で総額より目立たせない。 */
.result-price-col .price-rate .price-from,
.result-price-col .price-rate .from { font-size: var(--fs-13); font-weight: 700; }
.result-price-col .price-rate span { margin-left: 2px; }

/* その人数・部屋数では泊まれない宿。金額の代わりに理由を出す
   （宿ページと同じ扱い。申し込めないものに値段を付けない）。 */
.result-price-col .price-over {
  margin-top: 4px;
  font-size: var(--fs-12);
  line-height: 1.6;
  color: var(--c-ink-soft);
}

/* その日程が満室の宿。**一覧からは落とさない**（宿が少ないので、落とすと
   その宿の存在自体が伝わらない）。金額の代わりに理由を出す。
   **色だけに頼らない**——「満室です」の文字が主。 */
.result-price-col .price-full {
  margin-top: 4px;
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-accent-ink, #A9492F);
}

/* 一覧の先頭に置く検索フォーム。トップと同じ部品だが、ヒーローの上ではないので
   面を持たせて本文から浮かせる。 */
.okiwork-shop-search {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
}
.okiwork-shop-search .hero-search { margin: 0; box-shadow: none; }

/* 料金欄は上から積む。以前は縦中央だったため、写真の高さでカードが伸びると
   「詳細・予約へ」だけが右下の隅に取り残されて見えた（オーナー指摘・2026-08-06）。
   ボタンは金額の直後に置き、単価はその下（→ content-product.php のコメント）。 */
.result-price-col { justify-content: flex-start; }
.result-price-col .btn { margin-top: var(--sp-2); }
/* ボタンの下に回した補助情報は、金額まわりより控えめに。 */
.result-price-col .price-rate {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
}

/* 料金欄の左右の余白を揃える。
   `padding-left` だけが指定されていて右が無く、幅100%のボタンが
   カードの右縁に貼り付いていた（実測：左25px／右1px）。
   区切り線からの距離と、カード右端までの距離を同じにする。 */
.result-price-col,
.result-soldout { padding-right: var(--sp-5); }

/* 「予約内容を更新」は押せる場面が無いので出さない（2026-08-07 オーナー指摘で確認）。
   カートに入るのは宿泊だけで、数量は1に固定してある（`lock_cart_quantity`）。
   アクティビティはカートを通らず注文を直接作る。**変えられるものが1つも無い**ので、
   WooCommerce はこのボタンを常に disabled のまま出し続けていた。
   押せないボタンが並んでいると、何か操作が要るように見えて手が止まる。

   クーポンの適用は別のボタンなので、そちらは残る。 */
.woocommerce .cart .actions button[name="update_cart"],
.woocommerce .cart .actions input[name="update_cart"] { display: none; }
/* クーポンコードの入力欄。
   WooCommerce 既定は 80px しかなく、**placeholder の「クーポンコード」すら切れていた**
   （2026-08-07 実測：80px。32文字を入れると 260px 必要）。
   紹介コードは32文字まで（Referral の sanitize_code）、御礼クーポンは THANKS-XXXXXX の13文字。
   いちばん長い32文字が末尾まで見える幅にする。

   ch は「0の幅」なので、英数字のコードとは相性がよい。狭い画面では折り返して全幅に。 */
.woocommerce .cart .actions .coupon { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.woocommerce .cart .actions .coupon input.input-text {
  width: auto;
  flex: 1 1 280px;
  min-width: 280px;   /* 32文字が末尾まで見える幅（実測：内容に260px＋左右の余白） */
  max-width: 420px;
}
@media (max-width: 600px) {
  .woocommerce .cart .actions .coupon input.input-text { flex-basis: 100%; min-width: 0; max-width: none; }
}
/* 現在の検索条件。満室の案内より先に置き、**何の日程の話なのか**をその場で分かるようにする。
   下の入力欄までスクロールしないと条件が確かめられなかった（2026-08-07 オーナー指摘）。
   主役は下の案内なので、こちらは落ち着いた面にして帯だけで区切る。 */
.okiwork-booking-fields .okiwork-search-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-navy);
  border-radius: var(--radius-s);
  background: var(--c-surface);
  font-size: var(--fs-14);
}
.okiwork-booking-fields .okiwork-search-summary-label {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-ink-soft);
}
.okiwork-booking-fields .okiwork-search-summary-items {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
}
.okiwork-booking-fields .okiwork-search-summary-item {
  display: inline-flex; align-items: baseline; gap: 4px;
}
/* 見出しは薄く、値は濃く。拾い読みしたときに値だけが目に入るようにする。 */
.okiwork-booking-fields .okiwork-search-summary-key {
  font-size: var(--fs-12);
  color: var(--c-ink-soft);
  font-weight: 500;
}
.okiwork-booking-fields .okiwork-search-summary-key::after { content: "："; }
.okiwork-booking-fields .okiwork-search-summary-val {
  font-weight: 700;
  color: var(--c-navy);
}
/* 項目のあいだの区切り。**文字として持たせない**——読み上げに「スラッシュ」が混ざる。 */
.okiwork-booking-fields .okiwork-search-summary-item + .okiwork-search-summary-item::before {
  content: "／";
  margin-right: var(--sp-2);
  color: var(--c-border);
  font-weight: 400;
}
/* 指で押せる大きさ（44px）。この画面の他の押せるものは折り返しで44pxを超えていたが、
   このリンクだけ22pxしかなかった（2026-08-07 実測）。 */
.okiwork-booking-fields .okiwork-search-summary-edit {
  margin-left: auto;
  font-size: var(--fs-13);
  color: var(--c-navy);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-2);
}
@media (max-width: 600px) {
  .okiwork-booking-fields .okiwork-search-summary-edit { margin-left: 0; padding-left: 0; }
}

/* 代わりの宿の帯に出す「2名×3泊の室料 目安 ¥43,200」。
   宿名と同じ行に流し込むと桁が読みにくいので、行を分ける。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts .okiwork-soldout-est {
  flex-basis: 100%;
  font-size: var(--fs-12);
  color: var(--c-ink-soft, #666);
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:hover .okiwork-soldout-est,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts a:focus .okiwork-soldout-est { color: inherit; }

/* 「この内容で進む（この案内を閉じる）」。急かす案内から降りる道なので、
   目立たせない——ただし押せることは分かるようにする。 */
.okiwork-cart-shortage .okiwork-shortage-done {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-13);
  color: var(--c-ink-soft, #666);
}

/* ==========================================================================
   WooCommerce既定のボタンを、サイトのボタンに揃える（2026-08-15 UIレビュー #3・#29）

   テーマの `.btn` が当たらない箇所が残っていて、**Woo既定のベージュ38px**のまま出ていた。
   実測で並べると、いちばん弱いボタンが**いちばん要るところ**に置かれていた。

     コンシェルジュに相談する   225×38  ベージュ  ← 満室時の唯一の逃げ道
     見積書を作成               258×38  ベージュ  ← 法人の社内稟議の入口
     ログイン（予約手続き）      98×38  ベージュ  ← ここを通らないと予約できない
     （比較）予約を進める       420×52  ネイビー

   代替が0件になる4室・8室では、**225×38のベージュが画面上の唯一の出口**になる。

   **マークアップは触らない。**プラグイン側の `class="button"` を書き換えると、
   同じ文字列が3か所に散っていて漏れる。ここで受ける。
   ========================================================================== */

/*
 * 既定のボタン＝副ボタンの見た目に。
 * **`.alt` は除く**——WooCommerceの `.alt` は主ボタンの意味で、
 * 「予約を進める」「予約手続きへ進む」がこれに当たる（別途ネイビーで定義済み）。
 */
.woocommerce a.button:not(.btn):not(.alt),
.woocommerce button.button:not(.btn):not(.alt),
.woocommerce input.button:not(.btn):not(.alt),
.woocommerce-page a.button:not(.btn):not(.alt),
.woocommerce-page button.button:not(.btn):not(.alt),
.woocommerce-page input.button:not(.btn):not(.alt) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*
   * **float を必ず落とす。**
   * WooCommerce本体は `a.button` を `float: left` にしている。浮いたままだと親の
   * `<p>` からはみ出し、**次に来る `overflow: hidden` の枠（＝BFC）が浮きを避けて
   * 幅0になる**。相談ボタンが 50×242 に縦潰れしたのはこれだった（実測で突き止めた）。
   */
  float: none;
  min-height: 44px;              /* 指で押せる大きさ。38pxだった */
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--c-navy);
  background: transparent;
  color: var(--c-navy);
  font-weight: 700;
  font-size: var(--fs-15);
  line-height: 1.2;
  text-decoration: none;
}
.woocommerce a.button:not(.btn):not(.alt):hover,
.woocommerce button.button:not(.btn):not(.alt):hover,
.woocommerce input.button:not(.btn):not(.alt):hover,
.woocommerce-page a.button:not(.btn):not(.alt):hover,
.woocommerce-page button.button:not(.btn):not(.alt):hover,
.woocommerce-page input.button:not(.btn):not(.alt):hover {
  background: rgba(22, 55, 74, 0.06);
  color: var(--c-navy);
}

/*
 * 満室時の「ご相談ください」は**主ボタンに格上げする。**
 * 代替が0件のときは、これが唯一の出口になる。
 */
.okiwork-soldout-consult a.button,
.okiwork-soldout-consult a.button:not(.btn):not(.alt),
.okiwork-soldout-alt-take a.button,
.okiwork-soldout-alt-take a.button:not(.btn):not(.alt),
.okiwork-soldout-combo-take a.button,
.okiwork-soldout-combo-take a.button:not(.btn):not(.alt) {
  width: 100%;
  max-width: 420px;
  min-height: 48px;
  float: none;                   /* 上と同じ理由。ここは Woo の float を直に受ける */
  background: var(--c-brand-surface);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-card);
}
/*
 * **本体の指定のほうが詳細度が高い。**
 * `.woocommerce div.product form.cart .button { float: left }` は 4クラス＋2要素で、
 * `.okiwork-soldout-consult a.button`（2クラス＋1要素）では外せない。
 * `!important` に逃げず、**同じ土俵に乗せて**外す。
 *
 * 浮いたままだと親の `<p>` からはみ出し、次に来る `overflow: hidden` の枠が
 * 浮きを避けて**幅0**になる（相談ボタンが 50×242 に縦潰れした）。
 */
.woocommerce div.product form.cart .okiwork-soldout a.button {
  float: none;
  width: 100%;
  max-width: 420px;
}
.okiwork-soldout-consult a.button:hover,
.okiwork-soldout-consult a.button:not(.btn):not(.alt):hover,
.okiwork-soldout-alt-take a.button:hover,
.okiwork-soldout-combo-take a.button:hover {
  background: var(--c-brand-surface-hover);
  color: #fff;
}
/*
 * 分ける先の内訳。**どこに何室か**が読めないと、押す判断ができない。
 * ボタンより先に、静かに置く。
 */
.okiwork-soldout-combo {
  margin: var(--sp-2) 0;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--c-ink);
}
/* 相談の返事がいつ来るか。代替も組み合わせも出せなかったとき、ここだけが出口になる。 */
.okiwork-soldout-reply {
  margin: calc(var(--sp-2) * -1) 0 var(--sp-3);
  font-size: var(--fs-13);
  color: var(--c-ink-soft);
}

/*
 * 予約手続きのログイン壁。
 * **ローンチ直後はほぼ全員が新規**なのに、「会員登録」が「ログイン」より
 * 下・より小さい配置だった。両方とも主ボタンの大きさにする。
 */
/*
 * **同じ土俵に乗せる（2026-08-16）。**
 *
 * 上の副ボタンの規則は `.woocommerce button.button:not(.btn):not(.alt)`＝(0,4,1)。
 * ここの `.okiwork-checkout-login .woocommerce-form-login button[name="login"]` は
 * (0,3,1)、`.okiwork-checkout-login-register a.button` は (0,2,1) で**どちらも負ける**。
 * その結果、`background` `color` `min-height` は副ボタンのまま——
 * **画面には塗りつぶしのネイビーが1つも出ていなかった**（実測で確認）。
 * 効いていたのは `width` `max-width` `box-shadow` だけ（副ボタンが持たない宣言）。
 *
 * `!important` に逃げず、満室の相談ボタン（上）と同じく `:not(.btn):not(.alt)` の
 * 双子を並べて詳細度を合わせる。**片方だけ書くと、また静かに負ける。**
 */
.okiwork-checkout-login .woocommerce-form-login button[name="login"],
.okiwork-checkout-login .woocommerce-form-login button[name="login"]:not(.btn):not(.alt),
.okiwork-checkout-login-register a.button,
.okiwork-checkout-login-register a.button:not(.btn):not(.alt) {
  width: 100%;
  max-width: 420px;
  min-height: 48px;
  background: var(--c-brand-surface);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-card);
}
.okiwork-checkout-login .woocommerce-form-login button[name="login"]:hover,
.okiwork-checkout-login .woocommerce-form-login button[name="login"]:not(.btn):not(.alt):hover,
.okiwork-checkout-login-register a.button:hover,
.okiwork-checkout-login-register a.button:not(.btn):not(.alt):hover {
  background: var(--c-brand-surface-hover);
  color: #fff;
}
/*
 * iOS Safari は 16px未満の入力欄をタップすると勝手に拡大する（実測13.33px）。
 * 拡大されると、そのあと横スクロールが要る画面になってしまう。
 */
.okiwork-checkout-login input[type="text"],
.okiwork-checkout-login input[type="email"],
.okiwork-checkout-login input[type="password"] {
  font-size: 16px;
  min-height: 44px;
}

/* ==========================================================================
   下端の料金バー（2026-08-15 UIレビュー #12）

   **金額が変わる場所と、金額が見える場所が 2,961px 離れていた。**
   レンタカーを3泊とも1台にすると +34,155円（+37.5%）になるのに、
   その数字が出るのは操作地点から約3,000px上。宿詳細はスマホで 13,520px
   （812pxの端末で約16画面）あり、金額はいちばん上の1画面にしかなかった。
   ========================================================================== */
.okiwork-price-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;                 /* カートの浮遊ボタン(60)より上、Cookieバナー(900)より下 */
  background: var(--c-surface, #fff);
  border-top: 1px solid var(--c-border, #E4DDCF);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .10);
  /* iPhoneのホームバーを避ける。 */
  padding-bottom: env(safe-area-inset-bottom);
}
.okiwork-price-bar[hidden] { display: none; }
.okiwork-price-bar .opb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px max(var(--sp-4), env(safe-area-inset-left)) 10px max(var(--sp-4), env(safe-area-inset-right));
}
.okiwork-price-bar .opb-text { min-width: 0; }
.okiwork-price-bar .opb-label {
  display: block;
  font-size: var(--fs-12, 12px);
  color: var(--c-ink-soft, #6f695e);
}
.okiwork-price-bar .opb-amount {
  display: block;
  font-size: var(--fs-18, 18px);
  font-weight: 700;
  color: var(--c-ink, #2B2B2B);
  line-height: 1.3;
}
.okiwork-price-bar .opb-cta {
  flex: none;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--c-brand-surface, #16374A);
  color: #fff;
  font-size: var(--fs-15);
  font-weight: 700;
  cursor: pointer;
}
.okiwork-price-bar .opb-cta:hover { background: var(--c-brand-surface-hover, #0F2733); }
/* 無効の見た目は上の主CTAと同じ色にそろえる（#1 で決めた 5.0:1 の組み合わせ）。 */
.okiwork-price-bar .opb-cta:disabled {
  background: #E3E6E8;
  color: #55616A;
  cursor: not-allowed;
}
/* 申し込めないときは、金額の代わりに理由が入る。長くなるので字を落とす。 */
.okiwork-price-bar.is-blocked .opb-amount {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--c-accent-ink);
}
/*
 * **変わったことを、静かに知らせる。**
 * 数字が差し替わるだけでは気づけない（それが #12 の中身）。
 * 一瞬だけ色を差す。動きを減らす設定の方には出さない。
 */
@keyframes okiwork-price-bar-changed {
  from { background: #FFF6E5; }
  to   { background: var(--c-surface, #fff); }
}
.okiwork-price-bar.is-changed { animation: okiwork-price-bar-changed .9s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .okiwork-price-bar.is-changed { animation: none; }
}

/*
 * バーが出ている間は、カートの浮遊ボタンをその上へ逃がす。
 * **重なると、どちらも押せなくなる。**
 */
body:has(.okiwork-price-bar:not([hidden])) .okiwork-cart-float {
  bottom: calc(max(var(--sp-4), env(safe-area-inset-bottom)) + 76px);
}

/*
 * #33 スマホでCookieバナーがカートの浮遊ボタンを完全に隠す。
 * バナー（z-index:900）の帯の中に浮遊ボタン（60）が丸ごと入っていた。
 * 見ているのは初回訪問者＝まさに「予約を確認する」を必要とする人。
 * バナーが出ている間は、浮遊ボタンも料金バーもその上へ逃がす。
 */
body:has(.okiwork-cookie:not([hidden])) .okiwork-cart-float {
  bottom: calc(max(var(--sp-4), env(safe-area-inset-bottom)) + 200px);
}
body:has(.okiwork-cookie:not([hidden])) .okiwork-price-bar {
  bottom: 184px;
}
@media (min-width: 768px) {
  /* PCではバナーが横に並ぶので、逃がす量は小さくてよい。 */
  body:has(.okiwork-cookie:not([hidden])) .okiwork-cart-float {
    bottom: calc(max(var(--sp-4), env(safe-area-inset-bottom)) + 96px);
  }
  body:has(.okiwork-cookie:not([hidden])) .okiwork-price-bar { bottom: 88px; }
}
/* いまの条件（日付・泊数・人数・部屋数・レンタカー）。金額の下に、静かに置く。 */
.okiwork-price-bar .opb-cond {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-12, 12px);
  color: var(--c-ink-soft, #6f695e);
  line-height: 1.5;
}
.okiwork-price-bar .opb-cond[hidden] { display: none; }

/*
 * 「見ていた宿に戻る」（2026-08-16 オーナー指摘）。
 * 削除したあと「宿泊施設を探す」しか無く、一覧からやり直すしかなかった。
 * 主ボタンではないので控えめに。ただし**リンクだと分かる**形にする。
 */
.okiwork-back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--c-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.okiwork-back-link:hover { color: var(--c-navy); text-decoration-thickness: 2px; }
.okiwork-back-link:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   満室ブロックのボタンの並び（2026-08-16 オーナー指摘）

   紺のボタンが3つ同じ強さで縦に並び、**どれを押せばよいか分からない**状態だった。
   「進む」（決める操作）と「相談する」（決められないときの逃げ道）は、
   同じ重さで置くものではない。

   ■ 決める操作＝塗り（紺）／相談＝枠線だけ
     相談を弱くするのではなく、**先に読ませたいものを強くする**。
     枠線でも 420×48・紺の枠（12.5:1）で、以前の 225×38 ベージュより十分に押せる。

   ■ 相談の前に区切りを入れる
     すぐ上の「◯軒に分けて進む」と地続きだと、3つ目の選択肢に見える。
     「ここまでで決まらなければ」という段が変わることを、線と間隔で示す。
   ========================================================================== */
.woocommerce div.product form.cart .okiwork-soldout .okiwork-soldout-ask,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-ask {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border, #E4DDCF);
}
.woocommerce div.product form.cart .okiwork-soldout .okiwork-soldout-ask a.button,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-ask a.button {
  background: transparent;
  border: 1px solid var(--c-navy, #16374A);
  color: var(--c-navy, #16374A);
  box-shadow: none;
}
.woocommerce div.product form.cart .okiwork-soldout .okiwork-soldout-ask a.button:hover,
.woocommerce div.product form.cart .okiwork-soldout .okiwork-soldout-ask a.button:focus,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-ask a.button:hover,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-ask a.button:focus {
  background: rgba(22, 55, 74, .06);
  color: var(--c-navy, #16374A);
}

/*
 * 「◯軒に分ければ」の案内・内訳・ボタンを、**ひと塊に見せる。**
 * 平らに並ぶと、どの説明がどのボタンのものか分からない。
 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-combo,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-combo-take {
  margin-left: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--c-border, #E4DDCF);
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-combo { margin-bottom: 0; padding-bottom: var(--sp-2); }
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-combo-take { margin-top: 0; padding-bottom: var(--sp-1); }

/*
 * 分ける相手の宿を、写真つきで出す（2026-08-17 オーナー指摘）。
 * **名前と室数だけでは、初見で選びようがない。**
 * 宿の紹介は1回、分け方は下に並べる——違うのは室数の配り方だけなので、
 * 同じ写真を2度出すと違いのほうが埋もれる。
 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-combo-hotels {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-combo-hotel {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-combo-thumb { flex: 0 0 72px; }
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-combo-thumb img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-s, 6px);
}
/* min-width:0 が無いと、長い宿名で写真ごと横にはみ出す（flexの既定は縮まない）。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-combo-body {
  display: flex;
  flex-direction: column;
  gap: .15em;
  min-width: 0;
  font-size: var(--fs-14, 14px);
  line-height: 1.7;
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-combo-body .okiwork-soldout-alt-name { font-weight: 700; }

/*
 * その場で開く宿の紹介。**ポップアップにしない**理由はPHP側に書いた。
 * 開けることが分かるように、字は下線つき——押せるものは押せる形で。
 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-hotel-more { margin: .3em 0 0; }
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-hotel-more > summary {
  cursor: pointer;
  font-size: var(--fs-13, 13px);
  color: var(--c-navy, #16374A);
  text-decoration: underline;
  text-underline-offset: .2em;
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-hotel-more-body {
  padding: .5em 0 .2em;
  font-size: var(--fs-13, 13px);
  line-height: 1.8;
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-hotel-catch { margin: 0 0 .2em; font-weight: 700; }
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-hotel-lead { margin: 0 0 .5em; }
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-hotel-shots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 .5em;
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-hotel-shots img {
  display: block;
  width: 104px;
  height: 78px;
  object-fit: cover;
  border-radius: var(--radius-s, 6px);
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-hotel-more-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2em .6em;
  margin: 0;
}

/* 分け方の並び。囲みは案ごとに——どの説明がどのボタンのものかを、線で示す。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-combo-lead {
  margin: 0 0 var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-14, 14px);
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-combo-picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-combo-picks > li {
  margin: 0 0 0 var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--c-border, #E4DDCF);
}
/* 線は案の囲みが持つ。中の段落にも残ると、二重に引かれて内側が階段状にずれる。 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-combo-picks .okiwork-soldout-combo,
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-combo-picks .okiwork-soldout-combo-take {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

/*
 * 「こちらもオススメ」（旧・関連商品）の境界（2026-08-16 オーナー指摘）。
 *
 * 宿の説明（`.okiwork-hinfo`）は max-width:960px の中央寄せなのに、
 * こちらは幅も余白も区切りも無く、**どこまでが宿の話なのか分からなかった。**
 * 幅を合わせ、上に線を引いて、別の話が始まることを示す。
 */
.woocommerce div.product .related.products {
  max-width: 960px;
  margin: var(--sp-8, 48px) auto 0;
  padding-top: var(--sp-6, 32px);
  border-top: 1px solid var(--c-border, #E4DDCF);
}
.woocommerce div.product .related.products > h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-20, 20px);
  color: var(--c-navy, #16374A);
}

/* 料金バーの右側。行き先の切り替えと、主CTAを並べる（2026-08-16）。 */
.okiwork-price-bar .opb-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}
/*
 * 「宿の詳細」／「プランを選ぶ」。**主CTAより一段弱く。**
 * 押してほしいのは予約で、こちらは行き来のための補助。
 */
.okiwork-price-bar .opb-jump {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--c-navy, #16374A);
  border-radius: 999px;
  background: transparent;
  color: var(--c-navy, #16374A);
  font-size: var(--fs-13);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.okiwork-price-bar .opb-jump:hover { background: rgba(22, 55, 74, .06); }
.okiwork-price-bar .opb-jump[hidden] { display: none; }
/* 狭い画面では、条件の行を折り返して場所を作る。 */
@media (max-width: 560px) {
  .okiwork-price-bar .opb-cond { display: none; }
  .okiwork-price-bar .opb-jump { padding: 0 12px; }
  .okiwork-price-bar .opb-cta { padding: 0 16px; }
}


/* ------------------------------------------------------------------ *
 * 空き状況カレンダー（2026-08-16）
 *
 * **記号だけで色を頼らない。**○△✕ の文字が主で、色は補助。
 * 色覚と、印刷・高コントラストのどちらでも同じことが伝わるようにする。
 * ------------------------------------------------------------------ */
.okiwork-calendar {
  margin: 1em 0 1.4em;
  padding: 1em;
  border: 1px solid var(--c-line, #d9d2c4);
  border-radius: 8px;
  background: var(--c-surface, #fff);
}
.okiwork-calendar-head { margin: 0 0 .4em; }
.okiwork-calendar-type { display: block; }
.okiwork-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  margin: .6em 0;
}
.okiwork-calendar-nav button {
  min-height: 44px;                /* 指で押せる大きさ */
  padding: 8px 16px;
  border: 1px solid var(--c-navy, #16374A);
  border-radius: 999px;
  background: transparent;
  color: var(--c-navy, #16374A);
  font-weight: 700;
  cursor: pointer;
}
.okiwork-calendar-nav button[disabled] { opacity: .4; cursor: default; }
.okiwork-calendar-label { font-weight: 700; }

/* 表は横に潰さない。狭い画面では自分の枠の中で横スクロールさせる。 */
.okiwork-calendar-grid { overflow-x: auto; }
.okiwork-calendar-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.okiwork-calendar-table th,
.okiwork-calendar-table td {
  border: 1px solid var(--c-line, #d9d2c4);
  padding: 4px 2px;
  text-align: center;
  vertical-align: top;
  font-size: var(--fs-13, 13px);
}
.okiwork-calendar-table td { height: 44px; }
.okiwork-cal-day { display: block; color: var(--c-ink-soft, #55616A); }
.okiwork-cal-mark { display: block; font-size: var(--fs-15, 15px); font-weight: 700; }

.okiwork-cal-open .okiwork-cal-mark { color: var(--c-navy, #16374A); }
/* **△は「まだ取れる」。**アクセント（テラコッタ）は、このサイトでは
   「止まっている／取れない」の色として使っている——満室の見出し・押せない理由・
   一覧の「この日程は満室です」がすべてそれ。△に同じ色を当てると、
   **同じ表の中で「取れない ✕」が灰色、「取れる △」が警告色**という反転になる。
   しかも光の配色では `--c-accent-ink` と `--c-accent-surface` が同じ画素値で、
   すぐ下の満室見出しと色で区別がつかない（2026-08-16 UIレビュー #8）。
   注意の色（`--c-notice-ink`）は既にあるので、新しい赤系を足さない。 */
.okiwork-cal-few  .okiwork-cal-mark { color: var(--c-notice-ink, #6B5217); }
/* 満室・室数不足・「この日からは受けない」は、どれも「取れない日」。同じ見え方にする
   （理由は読み上げと凡例で分ける。→ calendar.php の month_days のコメント）。 */
.okiwork-cal-full,
.okiwork-cal-closed,
.okiwork-cal-short { background: #EFEBE3; }
.okiwork-cal-full .okiwork-cal-mark,
.okiwork-cal-closed .okiwork-cal-mark,
.okiwork-cal-short .okiwork-cal-mark { color: #55616A; }
.okiwork-cal-past { background: #F5F3EE; }
.okiwork-cal-past .okiwork-cal-day,
.okiwork-cal-past .okiwork-cal-mark { color: #8A8A8A; }

/* 押してチェックイン日を入れる日（○・△ だけ）。
   セルいっぱいのボタンにする——数字と記号のあいだの余白を押しても効くように。
   ✕ と — はボタンにしない（押した先で断ることが分かっている日は押させない）。 */
.okiwork-calendar-table td.is-pickable { padding: 0; }
.okiwork-cal-pick {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}
.okiwork-cal-pick:hover { background: var(--c-bg-alt, #F5F1E8); }
/* リングはサイト共通のネイビー。アクセントは「取れない」の色なので使わない。 */
.okiwork-cal-pick:focus-visible {
  outline: 2px solid var(--c-navy, #16374A);
  outline-offset: -2px;
}

/* 選んだご滞在。初日は濃く、続きの泊は淡く。
   8%では白とほぼ見分けがつかなかったので（実測 #ECEFF0）、地はここまで上げる。
   数字はネイビーに寄せて、濃い地でも読めるようにする。 */
.okiwork-calendar-table td.is-stay { background: color-mix(in srgb, var(--c-navy, #16374A) 14%, var(--c-surface, #fff)); }
.okiwork-calendar-table td.is-checkin {
  background: color-mix(in srgb, var(--c-navy, #16374A) 26%, var(--c-surface, #fff));
  box-shadow: inset 0 0 0 2px var(--c-navy, #16374A);
}
.okiwork-calendar-table td.is-stay .okiwork-cal-day { color: var(--c-navy, #16374A); }

/* ------------------------------------------------------------------ *
 * 宿名の右に置く空き状況（2026-08-17 オーナー要望）
 *
 * ここは**最初の画面**で、写真と並ぶ1カラム。申込フォームの中にあった頃と
 * 同じ大きさでは縦を取りすぎる（注記だけで4段落ある）。
 * **記号の大きさは落とさない**——押せる／押せないを読む主役はそこなので、
 * 詰めるのは余白と説明文のほう。
 * ------------------------------------------------------------------ */
.okiwork-hero-availability { margin: 0 0 var(--sp-4, 20px); }
.okiwork-hero-availability .okiwork-calendar {
  margin: 0;
  padding: .8em .9em;
}
.okiwork-hero-availability .okiwork-calendar-nav { margin: .4em 0; }
/* ナビは指で押せる大きさを保ったまま、左右の余白だけ詰める。 */
.okiwork-hero-availability .okiwork-calendar-nav button { padding: 6px 12px; }
.okiwork-hero-availability .okiwork-calendar-table th,
.okiwork-hero-availability .okiwork-calendar-table td { padding: 2px 1px; }
.okiwork-hero-availability .okiwork-calendar-table td { height: 38px; }
/*
 * 注記は4段落ある（凡例・部屋数・押せること・承認制）。本文の大きさのまま積むと、
 * カレンダー本体より説明のほうが高くなる。**消さずに小さくする**——
 * どれも「押したのに断られた」を防ぐために足した文で、消すと元の失敗に戻る。
 */
.okiwork-hero-availability .okiwork-calendar .description {
  margin: .2em 0 0;
  font-size: var(--fs-12, 12px);
  line-height: 1.55;
}
.okiwork-hero-availability .okiwork-calendar-legend { margin-top: .5em; }

/*
 * 「プランを選ぶ」の飛び先。ヘッダーが sticky なので、そのぶん上に余白を取らないと
 * 見出しがヘッダーの下に潜る（`#okiwork-search` と同じ 84px に揃える）。
 */
/*
 * 「プランを選ぶ」の飛び先は**申込ブロックの先頭（＝検索条件）**。
 * プラン一覧の `#okiwork-plans` も残しておく（条件が決まっている人を後から案内できるように）。
 * どちらも sticky ヘッダーのぶん上に余白を取る（`#okiwork-search` と同じ 84px）。
 */
#okiwork-booking,
#okiwork-plans { scroll-margin-top: 84px; }

/*
 * 候補の宿の「この宿について」は、その宿の箱の中に収める（2026-08-17）。
 * 帯（リンク）と地続きに見せたいので、左右の余白は帯に合わせる。
 */
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts .okiwork-hotel-more {
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-2);
  border-top: 1px solid var(--c-border, #E4DDCF);
}
:is(.okiwork-booking-fields, .okiwork-cart-shortage) .okiwork-soldout-alts .okiwork-hotel-more > summary {
  padding: .5em 0;
}