/* ============================================================
   OkiWork 本デザイン — v1.71 追加コンポーネント
   （第一弾 style.css を土台に、要件定義 v1.71 の新要素を追加）
   ・検索ウィジェット / 特集バナー / 法人(B2B)ストリップ
   ・コンシェルジュ相談帯 / 言語ドロップダウン(4言語) / 法定表示
   base の設計トークン（--c-navy 等）をそのまま利用
   ============================================================ */

/* ---------------- 言語ドロップダウン（4言語） ---------------- */
.lang-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--c-ink-soft);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  white-space: nowrap;
}
.lang-dropdown:hover { color: var(--c-navy); border-color: var(--c-navy); }
.lang-dropdown .caret { font-size: var(--fs-10); opacity: 0.7; }

/* 法人利用ナビ（さりげない差別化） */
.nav-links a.nav-b2b { color: var(--c-teal); font-weight: 700; }

/* ---------------- ヒーロー内 検索ウィジェット ---------------- */
.hero-search {
  margin-top: var(--sp-6);
  background: var(--c-surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-elevated);
  padding: var(--sp-4);
  display: grid;
  /* チェックイン／人数・部屋数（ポップアップ）／泊数／ボタン の4列。
     人数と部屋数を1つにまとめたので、以前の5列から減っている。 */
  grid-template-columns: 1.1fr 1.4fr 0.9fr auto;
  gap: var(--sp-3);
  align-items: end;
  max-width: 920px;
}
.hero-search .field label { color: var(--c-ink); font-size: var(--fs-12); }
/* ポップアップは絶対配置で開くので、押した欄が重なり順で上に来るようにする。 */
.hero-search .field-guests { position: relative; z-index: 2; }
.hero-search .btn-search {
  background: var(--c-brand-surface);
  color: #fff;
  height: 48px;
  padding: 0 30px;
  align-self: end;
}
.hero-search .btn-search:hover { background: var(--c-brand-surface-hover); }
.hero-search-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, 0.85);
}
.hero-search-note .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #E6C066; flex: none;
}

/* ---------------- 宿泊検索（ヒーローの下・特集の上に独立配置） ----------------
   写真に重ねていた頃の指定（白文字・上マージン）を、明るい背景のセクション用に上書きする。 */
.search-section { padding: var(--sp-6) 0 0; }
.search-section .hero-search {
  margin-top: 0;
  max-width: none;
  border: 1px solid var(--c-border);
}
.search-section .hero-search-note { color: var(--c-ink-soft); }

/* ---------------- 特集バナー（最大3枠） ---------------- */
.promo-section { padding: var(--sp-8) 0 0; }
.promo-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.promo-card {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  min-height: 232px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.promo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-elevated); }
.promo-card .promo-bg { position: absolute; inset: 0; z-index: 0; }
.promo-card .promo-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15, 39, 51, 0.82) 0%, rgba(15, 39, 51, 0.15) 55%, transparent 100%);
}
.promo-period {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 1;
  font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.02em;
  color: #fff;
  background: rgba(15, 39, 51, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 4px 12px;
}
.promo-body { position: relative; z-index: 1; padding: var(--sp-5); }
.promo-body .promo-label {
  font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
}
/* 大見出しは2行まで。3行目からは省略記号にして、カードの高さを揃える。
   文字数の上限（40字）は functions.php 側でも切っているが、改行の入れ方や
   画面幅によっては40字でも3行になりうるので、見た目はここで止める。 */
.promo-body h3 {
  font-size: var(--fs-18); margin-top: 6px; line-height: 1.5; color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.promo-body p { font-size: var(--fs-12); color: rgba(255, 255, 255, 0.8); margin-top: 6px; }

/* ---------------- 特集一覧（固定ページ /feature/ の [okiwork_features]） ----------------
   カードはトップと同じ .promo-card / .promo-grid をそのまま使う（見え方を1つに保つため）。
   ここで足すのは、見出しとの間の余白と、掲載中の特集が無いときの1文だけ。 */
.feature-index-grid { margin-top: var(--sp-5); }
.feature-index-empty {
  margin-top: var(--sp-5);
  padding: var(--sp-6);
  text-align: center;
  color: var(--c-ink-soft);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
}

/* ---------------- 法人（B2B）ストリップ ---------------- */
.b2b { background: var(--c-brand-surface); color: #fff; padding: var(--sp-9) 0; }
.b2b .eyebrow { color: #AED4D6; }   /* 濃色の地で 4.49:1 と僅かに不足していたので明るく */
.b2b-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
.b2b-copy h2 { font-size: var(--fs-30); color: #fff; line-height: 1.4; }
.b2b-copy p { color: rgba(255, 255, 255, 0.82); margin-top: var(--sp-4); line-height: 1.9; }
.b2b-copy .b2b-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.b2b-copy .btn-primary { background: var(--c-inverse-btn-bg); color: var(--c-inverse-btn-ink); }
.b2b-copy .btn-primary:hover { background: var(--c-inverse-btn-bg-hover); }
.b2b-copy .btn-secondary { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.b2b-copy .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }

.b2b-card { background: var(--c-surface); color: var(--c-ink); border-radius: var(--radius-l); padding: var(--sp-6); box-shadow: var(--shadow-elevated); }
.b2b-card .b2b-card-title { font-size: var(--fs-13); font-weight: 700; color: var(--c-ink-soft); letter-spacing: 0.04em; margin: 0; }
.b2b-feature { display: flex; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-border); }
.b2b-feature:last-of-type { border-bottom: 0; }
.b2b-feature .b2b-ic {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg-alt); color: var(--c-teal); font-size: var(--fs-16);
}
/* 事業の差別化点（法人向け3項目）。14pxでは「補足情報」に見えるため引き上げる。 */
.b2b-feature h4 { font-size: var(--fs-16); margin: 0; }
.b2b-feature p { font-size: var(--fs-13); color: var(--c-ink-soft); margin-top: 2px; line-height: 1.6; }
/*
 * 法人利用の登録への導線。**地の文に埋もれて、リンクだと気づかれない**
 *（2026-08-16 オーナー指摘）。周りの説明文と同じ細字・同じ色で、行の途中に置いていた。
 * 行を分け、色・太さ・下線・矢印を与える。ホバーとキーボードのフォーカスでも変化させる
 * ——**色だけに頼ると、色を区別しにくい方に何も伝わらない。**
 */
.b2b-feature .b2b-cta { margin-top: 8px; }
.b2b-feature .b2b-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-13); font-weight: 700; color: var(--c-teal);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.b2b-feature .b2b-link::after { content: "→"; transition: transform .15s ease; }
.b2b-feature .b2b-link:hover { color: var(--c-navy); text-decoration-thickness: 2px; }
.b2b-feature .b2b-link:hover::after { transform: translateX(3px); }
.b2b-feature .b2b-link:focus-visible {
  outline: 2px solid var(--c-navy); outline-offset: 3px; border-radius: 4px;
}

/* 関係人口の従属ブロック（.b2b-relation）はここにあったが、2026-08-03に
   トップページから枠ごと外したので削除した。同じ趣旨をデジタル島民会議の
   セクション（.council-intro / front.css）がより具体的に語っている。 */

/* ---------------- コンシェルジュ相談帯 ---------------- */
.concierge { padding: var(--sp-8) 0; }
.concierge-inner {
  background: var(--c-info-bg);
  border: 1px solid var(--c-info-border);
  border-radius: var(--radius-l);
  padding: var(--sp-6) var(--sp-7);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
}
.concierge-inner .concierge-text h3 { font-size: var(--fs-20); color: var(--c-ink); }
.concierge-inner .concierge-text p { font-size: var(--fs-14); color: var(--c-info-ink); margin-top: var(--sp-2); line-height: 1.8; }
.concierge-inner .btn-secondary { border-color: var(--c-teal); color: var(--c-ink); flex: none; }
.concierge-inner .btn-secondary:hover { background: rgba(60, 110, 113, 0.08); }

/* ---------------- フッター：法定表示の見出し ---------------- */
/* フッターの小見出し。白50%では地の上で 3.38:1 しかなく、明暗どちらでもAAに届いていなかった
   （明るいテーマの濃い藍でも 4.4:1 で不足）。読める濃さまで上げる。 */
.footer-links .footer-head {
  font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--sp-1);
}

/* ---------------- レスポンシブ ---------------- */
@media (max-width: 860px) {
  /*
   * 狭い画面では**1列**にする。
   *
   * 2列だと、人数・部屋数の欄が右半分に来る。この欄はポップアップを開くので、
   * 右半分から340pxの箱を出すと**画面の外へはみ出して「＋」も数字も押せない**
   *（stgの実機で発生。2026-08-10）。1列にすれば欄そのものが全幅になり、
   * ポップアップも収まる。
   *
   * **この指定より前に同じことを書いても効かない。** 後ろのこれに上書きされる
   *（実際、上のほうに書いた 1fr が効かずに2列のままだった）。
   */
  .hero-search { grid-template-columns: 1fr; }
  .hero-search .btn-search { grid-column: auto; width: 100%; }
  .promo-grid { grid-template-columns: 1fr; }
  .b2b-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .b2b-copy .b2b-actions { flex-direction: column; }
  .b2b-copy .b2b-actions .btn { width: 100%; }
  .concierge-inner { flex-direction: column; align-items: flex-start; }
  .promo-head { flex-direction: column; align-items: flex-start; }
}

/* ---- インラインstyle廃止（Artifact/CSPでstyle属性が無効化されるため全てクラス化） ---- */
.promo-bg-a { background: linear-gradient(160deg, #2E5A6E 0%, #16374A 60%, #0F2733 100%); }
.promo-bg-b { background: linear-gradient(160deg, #5C8262 0%, #375845 55%, #20362B 100%); }
.promo-bg-c { background: linear-gradient(160deg, #C7B79B 0%, #A98F68 60%, #7C6A4A 100%); }
/*
 * **箱に写真と同じ比を与える（2026-08-25）。**
 *
 * ここは `background-size: cover` で写真を敷いている。箱の比が写真より
 * 横長だと、**はみ出した天地が切られる**——OkiDeskのカードで、
 * 手に持ったスマホの頭と足が落ちていた。
 *
 * 画像側に余白やぼかしを足して逃げると、**箱の比が変わるたびに作り直す**ことになる。
 * 箱を写真の比に合わせれば、切り抜きも埋め草も要らない。
 * 写真は 16:9 で用意する（`OkiDesk_カード用_16x9.png`）。
 */
.pkg-photo { border-radius: var(--radius-m); min-height: 180px; aspect-ratio: 16 / 9; }
.promo-head .back-link { margin: 0; }
.footer-tagline { max-width: 280px; opacity: 0.7; }

/* ============================================================
   宿詳細（ホテル詳細）＋ プラン（v1.72：宿の下位概念）
   プラン＝フラットな選択肢（部屋タイプ＋食事＋料金を1つに）。
   料金は1人1泊あたり（人数×宿泊日数×プラン単価）。
   ============================================================ */
.detail-shell { padding: var(--sp-6) 0 var(--sp-9); }

.detail-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.detail-gallery .ph-photo { border-radius: var(--radius-m); }
.detail-gallery .g-main { grid-row: span 2; min-height: 412px; }

.hotel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap; }
.hotel-head .hotel-area { font-size: var(--fs-13); color: var(--c-ink-soft); font-weight: 700; letter-spacing: 0.02em; }
.hotel-head h1 { font-size: var(--fs-30); margin-top: 4px; }
.hotel-rating { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: 700; color: var(--c-navy); margin-top: var(--sp-3); }
.hotel-rating .stars { color: #E0A100; letter-spacing: 1px; }
.hotel-rating .count { color: var(--c-ink-soft); font-weight: 500; }
.fact-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.hotel-desc { margin-top: var(--sp-5); color: var(--c-ink-soft); line-height: 1.9; max-width: 760px; }

/* 条件バー（検索条件の引き継ぎ） */
.cond-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  background: var(--c-bg-alt); border: 1px solid var(--c-border);
  border-radius: var(--radius-m); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-14); font-weight: 700; color: var(--c-navy);
}
.cond-bar .cond-items { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; }
.cond-bar .cond-items span { display: inline-flex; align-items: center; gap: 6px; }
.cond-bar .cond-edit { font-size: var(--fs-13); color: var(--c-teal); font-weight: 700; }

/* プラン一覧 */
.plan-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }
.plan-card { display: grid; grid-template-columns: 210px 1fr 200px; gap: var(--sp-5); padding: var(--sp-4); align-items: stretch; }
.plan-thumb { border-radius: var(--radius-m); min-height: 150px; }
.plan-info { display: flex; flex-direction: column; }
.plan-info h3 { font-size: var(--fs-18); }
.plan-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.plan-desc { font-size: var(--fs-13); color: var(--c-ink-soft); line-height: 1.7; }
.plan-meta { font-size: var(--fs-12); color: var(--c-ink-soft); margin-top: auto; padding-top: var(--sp-3); }
.plan-price-col {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: var(--sp-2); border-left: 1px solid var(--c-border); padding-left: var(--sp-5);
}
.plan-price { font-size: var(--fs-26); font-weight: 900; color: var(--c-navy); font-variant-numeric: tabular-nums; line-height: 1.1; }
.plan-price .cur { font-size: var(--fs-16); }
.plan-unit { font-size: var(--fs-12); color: var(--c-ink-soft); font-weight: 500; }
.plan-example { font-size: var(--fs-12); color: var(--c-ink-soft); }
.plan-price-col .btn { width: 100%; }

/* プラン選択（予約フォーム）。カード全体がラジオのラベル。
   ラジオ自体は隠すが、キーボード操作でも選べるようフォーカス時に枠を出す。
   ※ .okiwork-booking-fields label{display:block} に勝つ必要があるため、
     .okiwork-plans で始まる詳細度の高いセレクタで書く。 */
.okiwork-plans .plan-card {
  display: grid; cursor: pointer; position: relative;
  border: 1px solid var(--c-border); margin: 0;
}
/* 掲載時期（閑散期限定プランなど）の期間外はカードごと消す。
   上の display:grid はブラウザ標準の [hidden]{display:none} に勝つ（作者スタイルはUAスタイルより強い）ので、
   打ち消しておかないと、隠したはずのカードが**見えたまま選択だけできない**状態になる。
   display を書く要素に hidden を付ける設計にするなら、必ずこの一行が要る。 */
.okiwork-plans .plan-card[hidden] { display: none; }

/* 条件を満たしていないプランは、隠さずに「選べない理由」を添えて出す。
   隠すと**そのプランが存在しないように見える**。長期滞在プランや団体プランは
   先に条件を入れた人にしか届かず、「7泊にすれば安くなる」ことに気づけなかった
   （2026-08-06 オーナー指摘）。選べるプランを先に読ませたいので、並びは後ろへ送る。 */
.okiwork-plans .plan-card.is-locked {
  order: 1;
  background: var(--c-bg-alt);
  border-style: dashed;
  /* **境界を地から離す。**このカードの地（#F1EAE0）は、載っている
     `.okiwork-booking-fields` の地とまったく同じで **1.00:1** ＝ 地としては存在していない。
     破線も #E4DDCF で 1.13:1 だった。枠だけで「別の箱」と分かるようにする
     （#4E5D65 対 #F1EAE0 ＝ 5.0:1。WCAG 1.4.11 の 3:1 を満たす）。 */
  border-color: var(--c-ink-soft);
  cursor: default;
}
/* 押せると誤解させない。ホバーで枠が濃くなるのは「押せる」の合図なので消す。 */
.okiwork-plans .plan-card.is-locked:hover { border-color: var(--c-ink-soft); }
.okiwork-plans .plan-card.is-locked .plan-thumb-img { opacity: .5; }
.okiwork-plans .plan-card.is-locked .plan-price { color: var(--c-ink-soft); }
.okiwork-plans .plan-card.is-locked .plan-pick { display: none; }
/* 理由は選択ボタンと同じ位置・同じ大きさに置く。カードの高さが揃い、
   並べたときに「ここが選ぶところ」という視線の流れが崩れない。
   文字は薄くしすぎない——読ませたいのは金額ではなくこちらなので。 */
/* **箱にしない（2026-08-15 UIレビュー #7）。**
   枠＋角丸＋面色を持たせていたため、隣のカードの「このプランを選ぶ」（押せる・6px角丸・
   同じ幅・同じ padding）と**3px違いで並ぶ**形になっていた。押せる箱と押せない箱が
   見分けにくい。しかも破線は #E4DDCF で、白地に対して 1.35:1・カード地に対して 1.13:1 ——
   区別として働いていたのは文字色と文言だけだった。
   左の縦罫に変える。**高さは min-height で保つ**ので、カードの高さは揃ったまま。 */
.plan-lock {
  margin: 0; width: 100%; text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border: 0; border-left: 3px solid var(--c-ink-soft);
  border-radius: 0;
  background: transparent;
  min-height: 45px;
  font-size: var(--fs-12); font-weight: 700; line-height: 1.6; color: var(--c-ink-soft);
}
.plan-lock span { display: block; }
.plan-lock span + span { margin-top: 2px; }

/* 安い道の案内。**「選べない理由」と見分けが付く色にする。**
   .plan-lock は灰の縦罫（できないこと）、こちらは緑（できること・得なこと）。 */
.plan-cheaper {
  margin: var(--sp-2) 0 0; width: 100%; text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid #1a7f37;
  background: rgba(26, 127, 55, 0.06);
  font-size: var(--fs-12); line-height: 1.6; color: var(--c-ink);
}
.plan-cheaper-msg { display: block; font-weight: 700; }
/* ラベルの中にあるボタン。押す場所だとすぐ分かる形にする。 */
.plan-cheaper-go {
  display: inline-block; margin-top: var(--sp-2);
  padding: 6px 12px; border: 1px solid #1a7f37; border-radius: 999px;
  background: #fff; color: #1a7f37;
  font-size: var(--fs-12); font-weight: 700; line-height: 1.4; cursor: pointer;
}
.plan-cheaper-go:hover { background: #1a7f37; color: #fff; }
.okiwork-plans .plan-card .plan-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.okiwork-plans .plan-card.is-selected { border-color: var(--c-navy); box-shadow: 0 0 0 1px var(--c-navy) inset; }
.okiwork-plans .plan-card:hover { border-color: var(--c-navy); }
.okiwork-plans .plan-card:focus-within { outline: 2px solid var(--c-navy); outline-offset: 2px; }
.okiwork-plans .plan-info h3 { margin: 0; }
.plan-thumb--empty { background: var(--c-surface); border: 1px dashed var(--c-border); }
.plan-thumb-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-m); display: block; }
.okiwork-plans .plan-pick {
  display: inline-block; width: 100%; text-align: center; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-s); border: 1px solid var(--c-navy); color: var(--c-navy);
  font-size: var(--fs-13); font-weight: 700;
}
/* 選択済みは「状態の表示」であって押すものではない。塗りつぶしの主ボタンのままだと、
   下の「予約を進める」より目立ち、押しても何も起きない偽のCTAになる。 */
.okiwork-plans .plan-card.is-selected .plan-pick {
  /* **ベージュを「選べません」専用に戻す（2026-08-15 UIレビュー #6）。**
     同じベージュが「選択中」と「選べません」の両方を意味していた。
     選択中はカードの枠がネイビーなので、チップもネイビー寄りに揃える。
     2行に分けるのは、color-mix の無い環境で素の面色に落とすため
     （そこでも ✓ と枠で状態は伝わる）。 */
  background: var(--c-surface);
  background: color-mix(in srgb, var(--c-navy) 10%, var(--c-surface));
  color: var(--c-navy);
  border-style: solid;
  font-weight: 700;
}
.okiwork-plans .plan-card.is-selected .plan-pick::before { content: "✓ "; }
.okiwork-plans-head .description { display: block; font-size: .85em; color: var(--c-ink-soft); margin-top: 2px; }

/* 予約フォームは商品ページの狭い右カラムに入るため、
   ビューポートではなく「カードの入れ物の幅」でレイアウトを切り替える。 */
/* 基準は .plan-list ではなく親に置く。コンテナクエリは「自分自身」には効かないため、
   .plan-list をコンテナにすると中のカードしか切り替えられず、一覧そのものをグリッドにできない。 */
.okiwork-plans { container-type: inline-size; }
.okiwork-plans .plan-card { grid-template-columns: 1fr; gap: var(--sp-3); }
.okiwork-plans .plan-price-col {
  border-left: 0; padding-left: 0; border-top: 1px solid var(--c-border);
  padding-top: var(--sp-3); align-items: stretch;
}
/* 広い画面ではプランを横に並べる。
   プランは「見比べて選ぶ」ためのものなので、縦に積むと画面を行き来しないと比較できない
   （横長カードだと1枚300px前後になり、3プランで画面を1回スクロールしてしまう）。
   カード内は 写真 → 内容 → 料金 の縦並びにし、料金と選択ボタンを下端で揃えて比較しやすくする。 */
@container (min-width: 620px) {
  .okiwork-plans .plan-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
  }
  /* 高さを揃えるため、カードはグリッドではなく縦のフレックスにする。 */
  .okiwork-plans .plan-card { display: flex; flex-direction: column; gap: var(--sp-3); }
  .okiwork-plans .plan-info { flex: 1 1 auto; }
  .okiwork-plans .plan-thumb { height: 160px; min-height: 0; }
  .okiwork-plans .plan-price-col {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--c-border); padding-top: var(--sp-3);
    align-items: stretch; justify-content: flex-end;
  }
}

/* カートに申込みが残っているときの案内（進めると「追加」になることを伝える） */
.okiwork-cart-notice {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-brand-surface, var(--c-border));
  border-radius: var(--radius-s);
}
.okiwork-cart-notice p { margin: 0 0 var(--sp-1); }
.okiwork-cart-notice p:last-child { margin-bottom: 0; }
.okiwork-cart-notice-head { font-weight: 700; color: var(--c-ink); }
.okiwork-cart-notice-sub { font-size: var(--fs-13); color: var(--c-ink-soft); }
.okiwork-cart-notice-link { font-size: var(--fs-13); text-decoration: underline; }

/* プランを自動で切り替えたときの案内（人数に合わせて寄せたことを伝える） */
.okiwork-plan-switched {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-13);
  color: var(--c-ink);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
}

/* 部屋タイプ・食事のタグ配色 */
.tag-room { background: #EAF0F4; color: #2E5A6E; border-color: #D5E2EA; }
.tag-meal { background: #E9F0EC; color: #3E6B4F; border-color: #D2E2D8; }

/* 設備 */
.facilities { margin-top: var(--sp-8); }
.amenity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.amenity { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-s); padding: var(--sp-3) var(--sp-4); }
.amenity .a-ic { font-size: var(--fs-16); }

@media (max-width: 860px) {
  .detail-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .detail-gallery .g-main { grid-column: span 2; grid-row: auto; min-height: 220px; }
  .plan-card { grid-template-columns: 1fr; }
  .plan-thumb { min-height: 180px; }
  .plan-price-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--c-border); padding-top: var(--sp-4); align-items: stretch; }
  .amenity-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   検索・一覧（顧客/01：条件バー常設・空室バッジ・満室=相談可）
   宿カードは「¥最低プラン〜」＝プランの最安を表示
   ============================================================ */
.search-layout { padding: var(--sp-6) 0 var(--sp-9); }

/* パンくずは独自ページと WooCommerce ページの2系統がある。文字サイズ・色・区切りを
   揃えないと、同じ役割の部品がページによって別物に見える（woocommerce.css 側も同じ値）。 */
.breadcrumb { font-size: var(--fs-13); color: var(--c-ink-soft); margin-bottom: var(--sp-4); }
.breadcrumb a { color: var(--c-navy); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.search-panel {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  display: grid; grid-template-columns: 1.3fr 1fr 0.8fr 0.8fr auto; gap: var(--sp-3); align-items: end;
}
.search-panel .btn-search { background: var(--c-brand-surface); color: #fff; height: 48px; padding: 0 30px; align-self: end; }
.search-panel .btn-search:hover { background: var(--c-brand-surface-hover); }
.search-note { font-size: var(--fs-12); color: var(--c-ink-soft); margin-top: var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-2); }
.search-note .dot { width: 7px; height: 7px; border-radius: 50%; background: #E6C066; flex: none; }

.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-4); flex-wrap: wrap; }
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip { font-size: var(--fs-13); font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink); cursor: pointer; }
.chip:hover { border-color: var(--c-navy); }
.chip.is-active { background: var(--c-brand-surface); color: #fff; border-color: var(--c-navy); }
.filter-right { display: flex; align-items: center; gap: var(--sp-4); }
.result-count { font-size: var(--fs-14); color: var(--c-ink-soft); font-weight: 700; }
/* 並び替えのプルダウン。**16px未満にしない**——iOSが勝手に拡大する（#23）。
   指で押せる高さ（44px）も確保する。 */
.sort-select { border: 1px solid var(--c-border); border-radius: var(--radius-s); padding: 8px 12px; min-height: 44px; font-size: var(--fs-16); background: var(--c-surface); color: var(--c-ink); }

.result-list { display: flex; flex-direction: column; gap: var(--sp-4); }
/* 金額列は 210px だと「1名1泊あたり（室料・最安プラン）」が折り返して
   「プラン）」だけが次行に残るため、注記が1〜2行で収まる幅を確保する。 */
.result-card { display: grid; grid-template-columns: 240px 1fr 250px; gap: var(--sp-5); padding: var(--sp-4); align-items: stretch; }
.result-thumb { border-radius: var(--radius-m); min-height: 172px; }
.result-info { display: flex; flex-direction: column; }
.result-info .r-area { font-size: var(--fs-12); color: var(--c-ink-soft); font-weight: 700; }
.result-info h3 { font-size: var(--fs-19); margin-top: 3px; }
.result-rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 700; color: var(--c-navy); margin-top: var(--sp-2); }
.result-rating .stars { color: #E0A100; letter-spacing: 1px; }
.result-rating .count { color: var(--c-ink-soft); font-weight: 500; }
.result-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0; }
.result-desc { font-size: var(--fs-13); color: var(--c-ink-soft); line-height: 1.7; margin-top: auto; }

.result-price-col, .result-soldout {
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2);
  border-left: 1px solid var(--c-border); padding-left: var(--sp-5);
}
/* 金額・注記を右端に張り付けず、全幅の「詳細・予約へ」ボタンと左端を揃える。 */
.result-price-col { align-items: flex-start; text-align: left; }
.result-soldout { align-items: flex-start; text-align: left; }
.price-from { font-size: var(--fs-24); font-weight: 900; color: var(--c-navy); font-variant-numeric: tabular-nums; line-height: 1.1; }
.price-from .cur { font-size: var(--fs-15); }
.price-from .from { font-size: var(--fs-13); font-weight: 700; }
.price-unit { font-size: var(--fs-12); color: var(--c-ink-soft); }
/* 最低泊数。1泊単価のすぐ下に置き、単価と同じ強さで読ませる（見落とすと金額を読み違える） */
.price-minstay { margin-top: 2px; font-size: var(--fs-12); font-weight: 700; color: var(--c-teal); }
.result-price-col .btn, .result-soldout .btn { width: 100%; }
.soldout-label { font-size: var(--fs-15); font-weight: 700; color: var(--c-ink-soft); }
.soldout-sub { font-size: var(--fs-12); color: var(--c-ink-soft); }
.badge-soldout { background: #EFEAE3; color: #8A7A63; }

@media (max-width: 860px) {
  .search-panel { grid-template-columns: 1fr 1fr; }
  .search-panel .btn-search { grid-column: span 2; width: 100%; }
  .result-card { grid-template-columns: 1fr; }
  /*
   * カードには外側のpadding が無く（WooCommerce の li.product が padding:0 を当てる）、
   * 1カラムでは写真も文字も枠線ぴったりに並ぶ。写真は全幅で意図的に見えるが、
   * 文字が枠線に張り付くと窮屈に見えるため、本文側だけ左右に余白を入れる。
   */
  .result-card .result-info,
  .result-card .result-price-col,
  .result-card .result-soldout {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  .result-card .result-price-col,
  .result-card .result-soldout {
    border-left: 0; border-top: 1px solid var(--c-border);
    padding-top: var(--sp-4); padding-bottom: var(--sp-4);
    align-items: stretch; text-align: left;
  }
  /*
   * 1カラムになると写真は全幅の帯になる。写真本体は absolute で高さを持たないため、
   * height:100% は解決先が無く min-height:172px まで潰れ、
   * 幅360px × 高さ172px の極端な横長になって被写体が切れる（屋根だけが写る）。
   * 幅に追随する比率で確保する。
   */
  .result-card .result-thumb-link {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

/* ============================================================
   予約フォーム（04）＝選択プランを引き継ぎ・B2B・複数名・見積書
   ============================================================ */
.book-shell { padding: var(--sp-6) 0 var(--sp-9); }

/* 注意バナー：絵文字＋本文＋太字がインラインで並ぶため、flexではなく通常フローで表示（flexだと各語が別アイテムに分断されて改行が崩れる）。太字用語は語中で折り返さない。 */
.notice { display: block; }
.notice strong { white-space: nowrap; }

/* ステップインジケータ */
.steps { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-6); flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); font-weight: 700; color: var(--c-ink-soft); }
.step .step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-12); background: var(--c-bg-alt); color: var(--c-ink-soft); border: 1px solid var(--c-border); }
.step.is-active { color: var(--c-navy); }
.step.is-active .step-num { background: var(--c-brand-surface); color: #fff; border-color: var(--c-navy); }
.step.is-done .step-num { background: var(--c-teal); color: #fff; border-color: var(--c-teal); }
.step-sep { color: var(--c-ink-soft); opacity: 0.5; }

/* 選択プランのバナー */
.plan-banner { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); margin-bottom: var(--sp-5); }
.plan-banner .pb-thumb { width: 100px; min-height: 74px; border-radius: var(--radius-s); flex: none; }
.plan-banner .pb-info { flex: 1; }
.plan-banner .pb-hotel { font-size: var(--fs-13); color: var(--c-ink-soft); font-weight: 700; }
.plan-banner .pb-plan { font-size: var(--fs-18); font-weight: 700; margin-top: 2px; }
.plan-banner .pb-tags { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.plan-banner .pb-right { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; }
.plan-banner .pb-price { font-weight: 900; color: var(--c-navy); font-size: var(--fs-18); }
.plan-banner .pb-unit { font-size: var(--fs-11); color: var(--c-ink-soft); font-weight: 500; }
.plan-banner .pb-change { font-size: var(--fs-13); color: var(--c-teal); font-weight: 700; }

/* 2カラム */
.book-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-6); align-items: start; }

.form-section { padding: var(--sp-5); margin-bottom: var(--sp-4); }
.form-section > h3 { font-size: var(--fs-16); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.form-section .opt { font-size: var(--fs-12); font-weight: 500; color: var(--c-ink-soft); }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.formgrid .full { grid-column: 1 / -1; }

/* 同行者（複数名） */
.companion-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.companion-row { display: flex; align-items: center; gap: var(--sp-3); }
.companion-row .input { flex: 1; }
.companion-row .rm { color: var(--c-status-rejected-fg); cursor: pointer; font-size: var(--fs-13); font-weight: 700; white-space: nowrap; }

/* 右側サマリー */
.summary-card { padding: var(--sp-5); position: sticky; top: 88px; }
.summary-card > h3 { font-size: var(--fs-15); margin-bottom: var(--sp-4); }
.summary-line { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-13); color: var(--c-ink-soft); margin-bottom: var(--sp-2); }
.summary-line .lbl { color: var(--c-ink-soft); flex: none; }
.summary-line span:last-child { font-weight: 700; color: var(--c-ink); text-align: right; }
.quote-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 700; color: var(--c-teal); margin-top: var(--sp-3); }
.quote-link:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .book-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .formgrid { grid-template-columns: 1fr; }
}

/* ============================================================
   確認・決済（05）＝最終確認・パスポート（外国籍・任意）・カード登録
   ============================================================ */
.review-list { display: flex; flex-direction: column; }
.review-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-14); }
.review-row:last-child { border-bottom: 0; }
.review-row .rv-label { color: var(--c-ink-soft); font-weight: 700; flex: none; width: 130px; }
.review-row .rv-value { flex: 1; color: var(--c-ink); }
.review-row .rv-edit { color: var(--c-teal); font-weight: 700; font-size: var(--fs-13); white-space: nowrap; }
/* 代表者などを項目立てして改行表示（スラッシュ区切りをやめる） */
.rv-kv { display: flex; gap: var(--sp-3); margin-bottom: 5px; }
.rv-kv:last-child { margin-bottom: 0; }
.rv-kv .rv-k { color: var(--c-ink-soft); font-weight: 500; min-width: 104px; flex: none; }
.rv-kv .rv-v { color: var(--c-ink); }

/* パスポート欄の見出し補足 */
.passport-fields { margin-top: var(--sp-4); }

/* カード（決済）欄 */
.card-brands { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-11); font-weight: 700; color: var(--c-ink-soft); }
.card-brands .brand { border: 1px solid var(--c-border); border-radius: 4px; padding: 2px 7px; background: var(--c-surface); letter-spacing: 0.03em; }
.secure-note { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); color: var(--c-ink-soft); margin-top: var(--sp-3); }

/* 約款同意 */
.agree-box { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); background: var(--c-bg-alt); border-radius: var(--radius-m); font-size: var(--fs-13); line-height: 1.8; }
.agree-box input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.agree-box a { color: var(--c-teal); font-weight: 700; text-decoration: underline; }

/* ============================================================
   完了（06）＝「保留アイコン」ではなく進捗ステッパーで表現
   リクエスト完了 → 運営確認中 → 予約確定
   ============================================================ */
.complete-shell { padding: var(--sp-8) 0 var(--sp-9); }
.complete-card { max-width: 720px; margin: 0 auto; padding: var(--sp-8) var(--sp-7); text-align: center; }
.complete-icon { width: 64px; height: 64px; 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); margin: 0 auto var(--sp-4); }
.complete-card h1 { font-size: var(--fs-26); }
.complete-card .lead { color: var(--c-ink-soft); margin-top: var(--sp-3); line-height: 1.9; max-width: 520px; margin-left: auto; margin-right: auto; }
.receipt-no { display: inline-block; margin-top: var(--sp-4); font-size: var(--fs-14); font-weight: 700; color: var(--c-navy); background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 999px; padding: 7px 18px; }

/* 横型プログレスステッパー */
.progress { display: flex; align-items: flex-start; justify-content: center; margin: var(--sp-8) auto var(--sp-6); max-width: 520px; }
.pstep { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); position: relative; }
.pstep .pdot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-15); font-weight: 700; background: var(--c-bg-alt); color: var(--c-ink-soft); border: 2px solid var(--c-border); position: relative; z-index: 1; }
.pstep .plabel { font-size: var(--fs-13); font-weight: 700; color: var(--c-ink-soft); }
.pstep .psub { font-size: var(--fs-11); color: var(--c-ink-soft); }
.pstep::before { content: ""; position: absolute; top: 19px; right: 50%; width: 100%; height: 2px; background: var(--c-border); z-index: 0; }
.pstep:first-child::before { display: none; }
.pstep.done .pdot { background: var(--c-teal); color: #fff; border-color: var(--c-teal); }
.pstep.done .plabel { color: var(--c-teal); }
.pstep.done::before { background: var(--c-teal); }
.pstep.current .pdot { background: var(--c-brand-surface); color: #fff; border-color: var(--c-navy); box-shadow: 0 0 0 5px rgba(22, 55, 74, 0.12); }
.pstep.current .plabel { color: var(--c-navy); }
.pstep.current::before { background: linear-gradient(90deg, var(--c-teal), var(--c-navy)); }

.next-box { text-align: left; background: var(--c-bg-alt); border-radius: var(--radius-m); padding: var(--sp-5) var(--sp-6); margin-top: var(--sp-6); }
.next-box h3 { font-size: var(--fs-15); margin-bottom: var(--sp-3); }
.next-box ol { margin: 0; padding-left: 20px; color: var(--c-ink-soft); font-size: var(--fs-14); line-height: 2; }
.next-box ol strong { color: var(--c-ink); }

.mini-summary { text-align: left; border-top: 1px solid var(--c-border); margin-top: var(--sp-6); padding-top: var(--sp-5); }
.mini-summary .summary-line { margin-bottom: var(--sp-2); }

.complete-actions { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-7); flex-wrap: wrap; }

.complete-mail { font-size: var(--fs-13); color: var(--c-ink-soft); margin-top: var(--sp-5); }

/* ============================================================
   マイページ（07）＝予約一覧・却下カード（理由＋別の宿/相談）・履歴
   ============================================================ */
.mypage-shell { padding: var(--sp-6) 0 var(--sp-9); }
.mypage-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--c-brand-surface); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-17); font-weight: 900; letter-spacing: 0.03em; flex: none; }
.mypage-head h1 { font-size: var(--fs-23); }
.mypage-head .mp-sub { font-size: var(--fs-13); color: var(--c-ink-soft); margin-top: 2px; }

.itinerary-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-l); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.itinerary-banner h3 { font-size: var(--fs-16); }
.itinerary-banner p { font-size: var(--fs-13); color: var(--c-ink-soft); margin-top: 4px; }

.mypage-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-6); align-items: start; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-s); font-size: var(--fs-14); font-weight: 700; color: var(--c-ink-soft); }
.side-nav a:hover { background: var(--c-bg-alt); color: var(--c-navy); }
.side-nav a.is-active { background: var(--c-brand-surface); color: #fff; }

.content-title { font-size: var(--fs-18); margin-bottom: var(--sp-4); }
.booking-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.booking-card { padding: var(--sp-5); }
.booking-card .bc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.booking-card h3 { font-size: var(--fs-17); }
.booking-card .bc-plan { font-size: var(--fs-13); color: var(--c-ink-soft); margin-top: 3px; }
.booking-card .bc-meta { font-size: var(--fs-13); color: var(--c-ink-soft); margin-top: var(--sp-3); }
.booking-card .bc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); flex-wrap: wrap; }
.booking-card .bc-price { font-size: var(--fs-20); font-weight: 900; color: var(--c-navy); font-variant-numeric: tabular-nums; }
.bc-status-note { font-size: var(--fs-13); font-weight: 700; color: var(--c-ink-soft); }
.bc-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 却下カード */
.booking-card.is-rejected { border-color: #E3C9C4; }
.reject-reason { display: flex; gap: var(--sp-3); background: var(--c-status-rejected-bg); border: 1px solid #E9D2CE; border-radius: var(--radius-m); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-13); color: #7A3A32; line-height: 1.7; }
.reject-reason strong { color: #7A3A32; }

/* 履歴 */
.history-card { padding: var(--sp-2) var(--sp-5); }
.history-list { display: flex; flex-direction: column; }
.history-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-border); flex-wrap: wrap; }
.history-row:last-child { border-bottom: 0; }
.history-row .h-main { flex: 1; min-width: 220px; }
.history-row .h-dates { font-weight: 700; font-size: var(--fs-14); }
.history-row .h-hotel { font-size: var(--fs-13); color: var(--c-ink-soft); margin-top: 2px; }
.history-row .h-price { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; }

@media (max-width: 860px) {
  .mypage-layout { grid-template-columns: 1fr; }
  .side-nav { flex-direction: row; overflow-x: auto; gap: var(--sp-1); }
  .side-nav a { white-space: nowrap; }
  .history-row .h-price { text-align: left; }
}

/* ============================================================
   アカウント（会員登録・ログイン）
   ============================================================ */
.auth-shell { padding: var(--sp-8) 0 var(--sp-9); }
.auth-card { max-width: 520px; margin: 0 auto; padding: var(--sp-7); }
.auth-card.wide { max-width: 760px; }
.auth-head { text-align: center; margin-bottom: var(--sp-6); }
.auth-head h1 { font-size: var(--fs-24); }
.auth-head p { color: var(--c-ink-soft); font-size: var(--fs-14); margin-top: var(--sp-2); }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form .subhead { font-size: var(--fs-13); font-weight: 700; color: var(--c-ink-soft); padding-top: var(--sp-2); border-top: 1px solid var(--c-border); }
.forgot { text-align: right; margin-top: calc(-1 * var(--sp-2)); }
.forgot a { color: var(--c-teal); font-weight: 700; font-size: var(--fs-13); }
.auth-alt { text-align: center; margin-top: var(--sp-6); font-size: var(--fs-14); color: var(--c-ink-soft); }
.auth-alt a { color: var(--c-teal); font-weight: 700; }
.auth-agree { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-13); line-height: 1.7; }
.auth-agree input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.auth-agree a { color: var(--c-teal); font-weight: 700; text-decoration: underline; }

/* ============================================================
   アクティビティ（一覧・詳細）＝交流体験・OkiWork予約者限定・現地決済
   ============================================================ */
.section-lead { max-width: 640px; color: var(--c-ink-soft); margin-top: var(--sp-3); line-height: 1.9; }

.activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-5); }
.activity-card { display: flex; flex-direction: column; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
a.activity-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-elevated); }
.activity-card .ac-photo { min-height: 190px; }
.activity-card .ac-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.activity-card h3 { font-size: var(--fs-17); line-height: 1.5; }
.activity-card .ac-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 2px 0 var(--sp-2); }
.activity-card .ac-desc { font-size: var(--fs-13); color: var(--c-ink-soft); line-height: 1.7; flex: 1; }
.activity-card .ac-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.activity-card .ac-price { font-weight: 900; color: var(--c-navy); font-size: var(--fs-17); }
.activity-card .ac-price small { font-size: var(--fs-11); color: var(--c-ink-soft); font-weight: 500; }
.ac-duration { font-size: var(--fs-12); color: var(--c-ink-soft); }

/* 詳細 */
.activity-detail-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-6); align-items: start; }
.info-list { display: flex; flex-direction: column; margin-top: var(--sp-4); }
.info-row { display: flex; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-14); }
.info-row:last-child { border-bottom: 0; }
.info-row .info-label { color: var(--c-ink-soft); font-weight: 700; width: 116px; flex: none; }
.info-row .info-value { color: var(--c-ink); flex: 1; }

.request-card { padding: var(--sp-5); position: sticky; top: 88px; }
.request-card .rq-price { font-size: var(--fs-24); font-weight: 900; color: var(--c-navy); }
.request-card .rq-price small { font-size: var(--fs-12); color: var(--c-ink-soft); font-weight: 500; }
.request-card .rq-fields { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-5) 0; }

@media (max-width: 860px) {
  .activity-grid { grid-template-columns: 1fr; }
  .activity-detail-layout { grid-template-columns: 1fr; }
  .request-card { position: static; }
}

/* ============================================================
   コンシェルジュ相談・お問い合わせ・FAQ（contact基盤）
   ============================================================ */
textarea.input { min-height: 130px; resize: vertical; line-height: 1.7; font-family: inherit; }

.radio-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.radio-option { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--radius-m); cursor: pointer; font-size: var(--fs-14); font-weight: 700; }
.radio-option:hover { border-color: var(--c-navy); }
.radio-option input { margin-top: 3px; flex: none; }
.radio-option .ro-desc { font-size: var(--fs-12); color: var(--c-ink-soft); font-weight: 400; margin-top: 2px; }

.cond-recall { background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: var(--sp-4); }
.cond-recall .cr-head { display: flex; justify-content: space-between; font-size: var(--fs-12); font-weight: 700; color: var(--c-ink-soft); margin-bottom: var(--sp-2); }
.cond-recall .cr-head a { color: var(--c-teal); }
.cond-recall .cr-items { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-14); font-weight: 700; color: var(--c-navy); }
.cond-recall .cr-items span { display: inline-flex; align-items: center; gap: 6px; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: var(--sp-2); }
.faq details { border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-surface); overflow: hidden; }
.faq summary { padding: var(--sp-4); font-weight: 700; font-size: var(--fs-14); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; color: var(--c-teal); font-weight: 700; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq .faq-body { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-13); color: var(--c-ink-soft); line-height: 1.9; }
.faq .faq-body a { color: var(--c-teal); font-weight: 700; }

/* ============================================================
   予約詳細・変更・キャンセル
   ============================================================ */
.booking-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.booking-status-head .bsh-no { font-size: var(--fs-13); color: var(--c-ink-soft); font-weight: 700; }
.booking-status-head h1 { font-size: var(--fs-24); margin-top: 3px; }

/* 変更：差額 */
.diff-box { background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-4); }
.diff-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-14); margin-bottom: var(--sp-2); color: var(--c-ink-soft); }
.diff-row span:last-child { color: var(--c-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.diff-row.diff-total { border-top: 1px dashed var(--c-border); margin-top: var(--sp-2); padding-top: var(--sp-3); font-size: var(--fs-18); }
.diff-row.diff-total span { color: var(--c-navy); font-weight: 900; }
.diff-amount.plus { color: var(--c-status-rejected-fg) !important; }
.diff-amount.minus { color: var(--c-status-confirmed-fg) !important; }

/* キャンセル：ポリシー表・返金 */
.policy-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); margin-top: var(--sp-4); }
.policy-table th, .policy-table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.policy-table th { background: var(--c-bg-alt); font-weight: 700; font-size: var(--fs-12); color: var(--c-ink-soft); }
.policy-table td:last-child, .policy-table th:last-child { text-align: right; }
/* 面はトークン、文字は直値、という組み合わせを作らないこと。
   暗いテーマでは面だけが沈み、文字が明るいテーマの値のまま残って読めなくなる
   （この行は 1.76:1 だった。2026-08-02 実測）。 */
.policy-table tr.is-current td { background: var(--c-status-pending-bg); font-weight: 700; color: var(--c-status-pending-fg); }
.refund-box { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--c-status-confirmed-bg); border: 1px solid var(--c-info-border); border-radius: var(--radius-m); margin-top: var(--sp-5); }
.refund-box .rf-label { font-weight: 700; color: var(--c-status-confirmed-fg); }
.refund-box .rf-amount { font-size: var(--fs-22); font-weight: 900; color: var(--c-status-confirmed-fg); font-variant-numeric: tabular-nums; }
.pay-status { font-size: var(--fs-13); color: var(--c-ink-soft); margin-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }

/* ============================================================
   帳票（見積書・旅程表）＝印刷/PDF前提のドキュメント体裁
   ============================================================ */
.doc-shell { background: var(--c-bg-alt); padding: var(--sp-6) 0 var(--sp-9); }
.doc-actions { max-width: 820px; margin: 0 auto var(--sp-4); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.doc-actions .da-back { font-size: var(--fs-13); font-weight: 700; color: var(--c-ink-soft); }
.doc-page { max-width: 820px; margin: 0 auto; background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-card); padding: var(--sp-8); }
.receipt-editor { max-width: 820px; margin: 0 auto var(--sp-4); padding: var(--sp-5) var(--sp-6); }
.receipt-editor h3 { font-size: var(--fs-15); margin-bottom: var(--sp-2); }
/* 宛名＝氏名記入欄＋敬称プルダウン（様／御中） */
.addr-input { display: flex; gap: var(--sp-2); align-items: stretch; }
.addr-input .addr-name { flex: 1; min-width: 0; }
.addr-input .addr-honorific { flex: none; width: 96px; }

.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5); border-bottom: 2px solid var(--c-navy); padding-bottom: var(--sp-5); margin-bottom: var(--sp-6); }
.doc-head .logo { margin-bottom: var(--sp-2); }
.doc-issuer { font-size: var(--fs-12); color: var(--c-ink-soft); line-height: 1.9; text-align: right; }
.doc-issuer .di-name { font-size: var(--fs-14); font-weight: 900; color: var(--c-navy); }
.doc-tagline { font-size: var(--fs-12); color: var(--c-ink-soft); line-height: 1.9; }
.doc-title { font-size: var(--fs-26); font-weight: 900; letter-spacing: 0.14em; text-align: center; color: var(--c-navy); margin-bottom: var(--sp-6); }

.doc-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); margin-bottom: var(--sp-5); font-size: var(--fs-13); flex-wrap: wrap; }
.doc-meta .dm-right { text-align: right; color: var(--c-ink-soft); line-height: 1.9; }
.doc-to { font-size: var(--fs-20); font-weight: 700; border-bottom: 1px solid var(--c-ink); padding: 0 var(--sp-5) 4px 0; display: inline-block; }
.doc-subject { font-size: var(--fs-14); margin: var(--sp-4) 0; }
.doc-subject strong { font-size: var(--fs-15); }

.doc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); margin: var(--sp-4) 0; }
.doc-table th { background: var(--c-brand-surface); color: #fff; padding: var(--sp-3) var(--sp-4); text-align: left; font-size: var(--fs-12); font-weight: 700; }
.doc-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); vertical-align: top; }
.doc-table td .td-sub { font-size: var(--fs-11); color: var(--c-ink-soft); margin-top: 2px; }
.doc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 基本情報の左見出しテーブル（ネイビー見出しではなくラベル体裁） */
.doc-table.doc-kv th { background: var(--c-bg-alt); color: var(--c-ink-soft); width: 140px; font-weight: 700; vertical-align: top; }
.doc-page h3 { font-size: var(--fs-15); color: var(--c-ink); }

.doc-total-box { display: flex; justify-content: flex-end; margin-top: var(--sp-5); }
.doc-total-table { min-width: 320px; font-size: var(--fs-14); }
.doc-total-table .dt-row { display: flex; justify-content: space-between; padding: var(--sp-2) 0; color: var(--c-ink-soft); }
.doc-total-table .dt-row span:last-child { color: var(--c-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.doc-total-table .dt-grand { border-top: 2px solid var(--c-navy); margin-top: var(--sp-2); padding-top: var(--sp-3); font-size: var(--fs-20); font-weight: 900; }
.doc-total-table .dt-grand span { color: var(--c-navy) !important; }

.doc-note { font-size: var(--fs-12); color: var(--c-ink-soft); line-height: 1.9; border: 1px solid var(--c-border); border-radius: var(--radius-s); padding: var(--sp-4); margin-top: var(--sp-6); background: var(--c-bg); }
.doc-note .dn-head { font-weight: 700; color: var(--c-ink); margin-bottom: var(--sp-1); }
.doc-amount-box { display: flex; align-items: baseline; gap: var(--sp-4); border-bottom: 2px solid var(--c-navy); padding-bottom: var(--sp-3); margin: var(--sp-6) 0 var(--sp-4); }
.doc-amount-box .da-label { font-size: var(--fs-14); font-weight: 700; color: var(--c-ink-soft); flex: none; }
.doc-amount-box .da-value { font-size: var(--fs-34); font-weight: 900; color: var(--c-navy); font-variant-numeric: tabular-nums; }
.doc-amount-box .da-tax { font-size: var(--fs-13); color: var(--c-ink-soft); margin-left: auto; }
.doc-seal { display: flex; justify-content: flex-end; margin-top: var(--sp-6); }
.doc-seal .seal-box { width: 84px; height: 84px; border: 1px dashed var(--c-border); border-radius: var(--radius-s); display: flex; align-items: center; justify-content: center; font-size: var(--fs-11); color: var(--c-ink-soft); text-align: center; }

/* 旅程表タイムライン */
.itin-day { margin-bottom: var(--sp-5); }
.itin-day .id-date { font-size: var(--fs-15); font-weight: 900; color: var(--c-navy); border-left: 4px solid var(--c-teal); padding-left: var(--sp-3); margin-bottom: var(--sp-2); }
.itin-item { display: flex; gap: var(--sp-4); padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); font-size: var(--fs-13); border-bottom: 1px solid var(--c-border); }
.itin-item:last-child { border-bottom: 0; }
.itin-item .it-time { font-weight: 700; color: var(--c-navy); width: 96px; flex: none; }
.itin-item .it-title { font-weight: 700; }
.itin-item .it-desc { color: var(--c-ink-soft); font-size: var(--fs-12); margin-top: 2px; }

@media (max-width: 860px) {
  .doc-page { padding: var(--sp-5); }
  .doc-head { flex-direction: column; }
  .doc-issuer { text-align: left; }
  .doc-total-table { min-width: 0; width: 100%; }
}

/* ============================================================
   特集LP（キャンペーン・ランディング）
   ============================================================ */
.feature-hero { position: relative; min-height: 400px; display: flex; align-items: center; color: #fff; overflow: hidden; }
.feature-hero .fh-bg { position: absolute; inset: 0; z-index: 0; }
.feature-hero .fh-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,30,40,0.84) 0%, rgba(11,30,40,0.45) 60%, rgba(11,30,40,0.2) 100%); }
.feature-hero .wrap { position: relative; z-index: 1; padding: var(--sp-8) 0; }
.fh-period { display: inline-block; font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.1em; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; padding: 6px 16px; margin-bottom: var(--sp-4); }
.feature-hero h1 { font-size: var(--fs-40); line-height: 1.35; max-width: 700px; font-weight: 900; }
.feature-hero .fh-lead { margin-top: var(--sp-4); font-size: var(--fs-17); color: rgba(255,255,255,0.9); max-width: 560px; line-height: 1.9; }
.feature-hero .fh-cta { margin-top: var(--sp-6); }
.feature-hero .btn-primary { background: var(--c-inverse-btn-bg); color: var(--c-inverse-btn-ink); }
.feature-hero .btn-primary:hover { background: var(--c-inverse-btn-bg-hover); }

.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-5); }
.benefit { text-align: center; padding: var(--sp-6) var(--sp-5); }
.benefit .b-ic { font-size: var(--fs-32); }
.benefit h3 { font-size: var(--fs-17); margin-top: var(--sp-3); }
.benefit p { font-size: var(--fs-13); color: var(--c-ink-soft); margin-top: var(--sp-2); line-height: 1.8; }

.step-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-5); counter-reset: step; }
.flow-step { position: relative; padding-left: 48px; }
.flow-step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--c-brand-surface); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: var(--fs-15); }
.flow-step h4 { font-size: var(--fs-15); }
.flow-step p { font-size: var(--fs-13); color: var(--c-ink-soft); margin-top: 4px; line-height: 1.7; }

/* ============================================================
   法定表示（特商法・旅行業）
   ============================================================ */
.legal-shell { padding: var(--sp-7) 0 var(--sp-9); }
.legal-content { max-width: 840px; margin: 0 auto; }
/* 見出しの色は「明るい地の上」であるこのコンテナ側で持つ。
   要素セレクタ（h1{}）側に書くと、暗い背景のヒーローまで塗ってしまう。 */
.legal-content h1 { color: var(--c-navy); }
.legal-content h2 { font-size: var(--fs-20); margin: var(--sp-8) 0 var(--sp-2); }
.legal-content h2:first-of-type { margin-top: var(--sp-5); }
.legal-content h3 { font-size: var(--fs-16); margin: var(--sp-6) 0 var(--sp-2); color: var(--c-navy); }
.legal-content h4 { font-size: var(--fs-14); margin: var(--sp-4) 0 2px; color: var(--c-ink); }
.legal-content p { font-size: var(--fs-14); line-height: 1.95; color: var(--c-ink-soft); margin-bottom: var(--sp-2); }
.legal-content ul { margin: var(--sp-2) 0 var(--sp-3) 1.4em; font-size: var(--fs-14); line-height: 1.95; color: var(--c-ink-soft); }
.legal-content .clause { margin-bottom: var(--sp-3); }
.legal-content .clause .cl-body { padding-left: 1em; }
.legal-content h5 { font-size: var(--fs-13); font-weight: 700; margin: var(--sp-3) 0 2px; color: var(--c-ink); }
.legal-content h6 { font-size: var(--fs-13); font-weight: 700; margin: var(--sp-2) 0 2px; color: var(--c-ink-soft); }
.legal-updated { font-size: var(--fs-13); color: var(--c-ink-soft); margin-top: var(--sp-2); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); margin-top: var(--sp-4); }
.legal-table th { text-align: left; vertical-align: top; width: 210px; background: var(--c-bg-alt); color: var(--c-ink); font-weight: 700; padding: var(--sp-4); border: 1px solid var(--c-border); font-size: var(--fs-13); }
.legal-table td { padding: var(--sp-4); border: 1px solid var(--c-border); line-height: 1.9; }
.legal-table td a { color: var(--c-teal); font-weight: 700; }
.legal-todo { color: var(--c-status-rejected-fg); font-weight: 700; font-size: var(--fs-12); }

@media (max-width: 860px) {
  .benefit-grid, .step-flow { grid-template-columns: 1fr; }
  .feature-hero h1 { font-size: var(--fs-28); }
  .legal-table th { width: 130px; }
}

/* ============================================================
   運営（管理）シェル ＝ 統一サイドバー（12項目）＋メイン
   wp-admin風。ベンダーは別シェル（後述）。
   ============================================================ */
.admin-body { display: flex; align-items: stretch; min-height: 100vh; background: var(--c-bg); }
.admin-side { width: 240px; flex: none; background: var(--c-brand-surface-hover); color: rgba(255,255,255,0.85); display: flex; flex-direction: column; }
.admin-side .as-logo { padding: var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,0.1); }
.admin-side .as-logo img { height: 24px; filter: brightness(0) invert(1); }
.admin-side .as-logo .as-badge { font-size: var(--fs-10); font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; padding: 2px 6px; }
.admin-nav { flex: 1; padding: var(--sp-3) 0; }
.admin-nav a { display: flex; align-items: center; gap: var(--sp-3); padding: 11px var(--sp-5); font-size: var(--fs-13); font-weight: 700; color: rgba(255,255,255,0.7); }
.admin-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-nav a.is-active { background: var(--c-teal); color: #fff; }
.admin-nav a .an-ic { width: 20px; text-align: center; flex: none; }
.admin-nav a .an-badge { margin-left: auto; background: var(--c-terracotta); color: #fff; font-size: var(--fs-10); font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.admin-side .as-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid rgba(255,255,255,0.1); font-size: var(--fs-12); color: rgba(255,255,255,0.5); }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.admin-topbar h1 { font-size: var(--fs-18); }
.admin-topbar .at-sub { font-size: var(--fs-12); color: var(--c-ink-soft); font-weight: 500; margin-left: var(--sp-3); }
.admin-topbar .at-user { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-13); color: var(--c-ink-soft); }
.admin-topbar .at-user .at-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--c-brand-surface); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-12); font-weight: 900; }
.admin-content { padding: var(--sp-6); flex: 1; }

/* KPI */
.admin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.admin-kpi { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: var(--sp-4) var(--sp-5); }
.admin-kpi .ak-label { font-size: var(--fs-12); color: var(--c-ink-soft); font-weight: 700; }
.admin-kpi .ak-value { font-size: var(--fs-28); font-weight: 900; color: var(--c-navy); margin-top: 4px; font-variant-numeric: tabular-nums; }
.admin-kpi .ak-value small { font-size: var(--fs-14); font-weight: 700; color: var(--c-ink-soft); }
.admin-kpi.alert { border-color: #E3C9C4; background: #FCF6F4; }
.admin-kpi.alert .ak-value { color: var(--c-terracotta); }

/* タブ */
.admin-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.admin-tab { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-13); font-weight: 700; color: var(--c-ink-soft); border-bottom: 2px solid transparent; cursor: pointer; }
.admin-tab:hover { color: var(--c-navy); }
.admin-tab.is-active { color: var(--c-navy); border-bottom-color: var(--c-navy); }
.admin-tab .at-count { color: var(--c-terracotta); margin-left: 4px; }

/* フィルタ行 */
.admin-filter { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.admin-filter .input, .admin-filter select.input { max-width: 200px; padding: 9px 12px; font-size: var(--fs-13); }
.admin-filter .af-search { flex: 1; min-width: 160px; max-width: 320px; }
.admin-filter .af-right { margin-left: auto; font-size: var(--fs-13); color: var(--c-ink-soft); }

/* テーブル */
.admin-table-wrap { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m); overflow: hidden; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.admin-table th { background: var(--c-bg-alt); text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-12); color: var(--c-ink-soft); font-weight: 700; white-space: nowrap; }
.admin-table td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-border); vertical-align: middle; }
.admin-table tr:hover td { background: var(--c-bg); }
.admin-table .t-main { font-weight: 700; color: var(--c-ink); }
.admin-table .t-sub { font-size: var(--fs-11); color: var(--c-ink-soft); margin-top: 2px; }
.admin-table .t-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.admin-table .t-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; white-space: nowrap; }

@media (max-width: 1024px) {
  .admin-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .admin-side { display: none; }
  .admin-table-wrap { overflow-x: auto; }
}

/* ============================================================
   集計分析ダッシュボード（関係人口ほか）＝CSSチャート
   ============================================================ */
.dash-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.dash-kpi { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: var(--sp-4); }
.dash-kpi .dk-label { font-size: var(--fs-11); color: var(--c-ink-soft); font-weight: 700; line-height: 1.4; }
.dash-kpi .dk-value { font-size: var(--fs-24); font-weight: 900; color: var(--c-navy); margin-top: 4px; font-variant-numeric: tabular-nums; }
.dash-kpi .dk-value small { font-size: var(--fs-12); color: var(--c-ink-soft); }
.dash-kpi .dk-trend { font-size: var(--fs-11); font-weight: 700; margin-top: 2px; color: var(--c-ink-soft); }
.dash-kpi .dk-trend.up { color: var(--c-status-confirmed-fg); }

.widget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.widget { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: var(--sp-5); }
.widget.wide { grid-column: 1 / -1; }
.widget .w-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.widget .w-head h3 { font-size: var(--fs-14); }
.widget .w-head .w-sub { font-size: var(--fs-11); color: var(--c-ink-soft); }

/* 関係の階段（ファネル） */
.funnel { display: flex; flex-direction: column; gap: var(--sp-2); }
.funnel-row { display: flex; align-items: center; gap: var(--sp-3); }
.funnel-row .f-label { width: 132px; flex: none; font-size: var(--fs-12); font-weight: 700; }
.funnel-track { flex: 1; }
.funnel-row .f-bar { height: 32px; border-radius: var(--radius-s); display: flex; align-items: center; padding: 0 var(--sp-3); color: #fff; font-weight: 700; font-size: var(--fs-13); min-width: 52px; }
.funnel-row .f-conv { width: 84px; flex: none; font-size: var(--fs-11); color: var(--c-ink-soft); text-align: right; }
.fc1 { background: #0F2733; } .fc2 { background: #16374A; } .fc3 { background: #3C6E71; } .fc4 { background: #5F8F91; } .fc5 { background: #C1694F; }

/* コホート維持率（ヒート） */
.heat { display: grid; grid-template-columns: 96px repeat(6, 1fr); gap: 3px; font-size: var(--fs-11); }
.heat .h-head, .heat .h-label { color: var(--c-ink-soft); font-weight: 700; padding: 7px 4px; }
.heat .h-label { text-align: left; }
.heat .h-cell { padding: 9px 4px; text-align: center; border-radius: 3px; color: #fff; font-weight: 700; }
.hi5 { background: #16374A; } .hi4 { background: #3C6E71; } .hi3 { background: #6E9B9C; } .hi2 { background: #A9C7C8; color: #2E5148; } .hi1 { background: #DCE7E7; color: #3C6E71; } .hi0 { background: var(--c-bg-alt); color: var(--c-ink-soft); }

/* 棒グラフ（滞在分布ほか） */
.bars { display: flex; flex-direction: column; gap: var(--sp-3); }
.bar-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-12); }
.bar-row .b-label { width: 128px; flex: none; font-weight: 700; }
.bar-row .b-track { flex: 1; height: 20px; background: var(--c-bg-alt); border-radius: 999px; overflow: hidden; }
.bar-row .b-fill { height: 100%; background: var(--c-teal); border-radius: 999px; }
.bar-row .b-fill.accent { background: var(--c-terracotta); }
.bar-row .b-val { width: 52px; flex: none; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ランキング */
.rank-list { display: flex; flex-direction: column; }
.rank-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-13); }
.rank-row:last-child { border-bottom: 0; }
.rank-row .r-no { width: 24px; height: 24px; border-radius: 50%; background: var(--c-bg-alt); color: var(--c-navy); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: var(--fs-12); flex: none; }
.rank-row .r-no.top { background: var(--c-brand-surface); color: #fff; }
.rank-row .r-name { flex: 1; font-weight: 700; }
.rank-row .r-metric { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }

/* 定着パイプライン */
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.pipe-stage { text-align: center; padding: var(--sp-5); border-radius: var(--radius-m); border: 1px solid var(--c-border); background: var(--c-bg); }
.pipe-stage .p-ic { font-size: var(--fs-26); }
.pipe-stage .p-count { font-size: var(--fs-26); font-weight: 900; color: var(--c-navy); margin-top: var(--sp-2); }
.pipe-stage .p-label { font-size: var(--fs-13); font-weight: 700; margin-top: 2px; }
.pipe-stage .p-desc { font-size: var(--fs-11); color: var(--c-ink-soft); margin-top: var(--sp-2); line-height: 1.6; }

/* 幅ユーティリティ（チャート用・インラインstyle回避） */
.bw-100{width:100%}.bw-94{width:94%}.bw-88{width:88%}.bw-82{width:82%}.bw-76{width:76%}.bw-70{width:70%}.bw-64{width:64%}.bw-58{width:58%}.bw-52{width:52%}.bw-46{width:46%}.bw-40{width:40%}.bw-34{width:34%}.bw-28{width:28%}.bw-22{width:22%}.bw-16{width:16%}.bw-10{width:10%}

@media (max-width: 1200px) { .dash-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .widget-grid { grid-template-columns: 1fr; } .pipeline { grid-template-columns: 1fr; } }

/* ============================================================
   モーダル（却下理由ダイアログ 等）
   ============================================================ */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 39, 51, 0.5); display: none; align-items: center; justify-content: center; z-index: 100; padding: var(--sp-5); }
.modal-backdrop:target { display: flex; }
.modal { background: var(--c-surface); border-radius: var(--radius-l); max-width: 540px; width: 100%; box-shadow: var(--shadow-elevated); }
.modal-head { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-size: var(--fs-17); }
.modal-head .modal-x { font-size: var(--fs-20); color: var(--c-ink-soft); cursor: pointer; line-height: 1; }
.modal-body { padding: var(--sp-5) var(--sp-6); }
.modal-foot { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--c-border); display: flex; justify-content: flex-end; gap: var(--sp-2); background: var(--c-bg); border-radius: 0 0 var(--radius-l) var(--radius-l); }

/* 管理の詳細まわり補助 */
.admin-detail { padding: var(--sp-6); }
.admin-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.admin-head-row h2 { font-size: var(--fs-16); }
.admin-head-row .admin-tabs { margin-bottom: 0; border-bottom: 0; }
.stock-check { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-13); }
.stock-badge { font-size: var(--fs-12); font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.stock-badge.ok { background: var(--c-status-confirmed-bg); color: var(--c-status-confirmed-fg); }
.stock-badge.low { background: var(--c-status-pending-bg); color: var(--c-status-pending-fg); }

/* ============================================================
   在庫カレンダー（宿の稼働＋レンタカーの2軸）
   ============================================================ */
.cal-toolbar { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.cal-toolbar > select.input { max-width: 220px; }
.cal-month { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-16); font-weight: 900; color: var(--c-navy); }
.cal-month .cm-nav { width: 30px; height: 30px; border-radius: var(--radius-s); border: 1px solid var(--c-border); background: var(--c-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-ink-soft); }
.cal-legend { display: flex; gap: var(--sp-4); font-size: var(--fs-12); margin-left: auto; flex-wrap: wrap; }
.cal-legend .cl-item { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--c-ink-soft); }
.cal-legend .cl-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cl-dot.ok { background: #3E6B4F; } .cl-dot.low { background: #C79A2E; } .cl-dot.full { background: #A0453A; }

.cal-section { margin-bottom: var(--sp-6); }
.cal-section > h3 { font-size: var(--fs-14); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-head { text-align: center; font-size: var(--fs-12); font-weight: 700; color: var(--c-ink-soft); padding: var(--sp-2) 0; }
.cal-head.sun { color: #A0453A; } .cal-head.sat { color: #2E5A6E; }
.cal-cell { min-height: 66px; border: 1px solid var(--c-border); border-left-width: 3px; border-radius: var(--radius-s); padding: 5px 8px; background: var(--c-surface); }
.cal-cell .cc-date { font-size: var(--fs-12); font-weight: 700; color: var(--c-ink); }
.cal-cell .cc-info { font-size: var(--fs-11); font-weight: 700; margin-top: var(--sp-3); }
.cal-cell.out { background: var(--c-bg-alt); border-left-color: var(--c-border); }
.cal-cell.out .cc-date { color: var(--c-ink-soft); }
.cal-cell.ok { border-left-color: #3E6B4F; } .cal-cell.ok .cc-info { color: #3E6B4F; }
.cal-cell.low { border-left-color: #C79A2E; background: #FCF9EF; } .cal-cell.low .cc-info { color: #8A6B1E; }
.cal-cell.full { border-left-color: #A0453A; background: #FBF1EF; } .cal-cell.full .cc-info { color: #A0453A; }
.cal-cell.sun .cc-date { color: #A0453A; }

/* ============================================================
   運営：レンタカー事業者 / 精算・請求 / 口コミ審査（3画面 追加）
   既存の admin-table / stock-badge / tag / card を流用し最小追加
   ============================================================ */
/* 在庫バッジ：満車/完売バリアント（カレンダーの full 配色に合わせる） */
.stock-badge.full { background: #FBF1EF; color: #A0453A; }

/* タグ：注意（個人情報・NG語 等）／中立 */
.tag-warn { background: #FBF1EF; color: #A0453A; border-color: #E9D2CE; }
.tag-plain { background: var(--c-bg-alt); color: var(--c-ink-soft); border-color: var(--c-border); }

/* 事業者の種別ドット（宿泊/アクティビティ/レンタカー） */
.vtype { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; white-space: nowrap; }
.vtype .vt-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.vt-dot.stay { background: #2E5A6E; } .vt-dot.act { background: #3E6B4F; } .vt-dot.car { background: #C1694F; }

/* 精算サマリーの合計行 */
.admin-table tr.t-total td { background: var(--c-bg-alt); border-top: 2px solid var(--c-navy); font-weight: 900; color: var(--c-navy); }
.admin-table tr.t-total td.t-num { font-size: var(--fs-14); }

/* テーブル下の注記 */
.table-note { font-size: var(--fs-12); color: var(--c-ink-soft); line-height: 1.9; margin-top: var(--sp-3); }

/* 口コミ審査カード */
.mod-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.mod-card { padding: var(--sp-5); }
.mod-card.is-flagged { border-color: #E3C9C4; }
.mod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.mod-who .mod-name { font-weight: 700; font-size: var(--fs-15); }
.mod-who .mod-sub { font-size: var(--fs-12); color: var(--c-ink-soft); margin-top: 2px; }
.mod-who .mod-target { font-size: var(--fs-12); color: var(--c-ink-soft); font-weight: 700; margin-top: 4px; }
.mod-who .mod-target strong { color: var(--c-navy); }
.mod-rating { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.mod-stars { color: #E0A100; letter-spacing: 1px; font-size: var(--fs-15); }
.mod-score { font-weight: 900; color: var(--c-navy); font-variant-numeric: tabular-nums; }
.mod-title { font-weight: 700; font-size: var(--fs-14); margin: var(--sp-4) 0 var(--sp-1); }
.mod-body { font-size: var(--fs-13); color: var(--c-ink-soft); line-height: 1.9; }
.mod-body .flag-txt { background: #FBEFEA; color: #A0453A; font-weight: 700; padding: 0 3px; border-radius: 3px; }
.mod-flags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.mod-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); flex-wrap: wrap; }
.mod-foot .mod-date { font-size: var(--fs-12); color: var(--c-ink-soft); }
.mod-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ============================================================
   印刷／PDF：帳票本体（.doc-page）のみを出力する
   操作バー（印刷/PDF/戻る）・発行設定カード・サイト共通UIは
   印刷しない。ブラウザ印刷と「PDFに保存」の両方に適用される。
   見積書・旅程表・領収書に共通。
   ============================================================ */
@media print {
  .doc-actions,
  .receipt-editor,
  .site-header,
  .site-footer,
  .no-print { display: none !important; }
  .doc-shell { background: #fff; padding: 0; }
  .doc-shell .wrap { max-width: none; padding: 0; }
  .doc-page { max-width: none; margin: 0; border: 0; box-shadow: none; padding: 0; }
  /* 帳票を1枚に収めるため印刷時のみ縦の余白を圧縮 */
  .doc-head { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); }
  .doc-title { margin-bottom: var(--sp-4); }
  .doc-amount-box { margin-top: var(--sp-4); }
  .doc-seal { margin-top: var(--sp-3); }
  .doc-seal .seal-box { width: 62px; height: 62px; }
  .doc-note { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  @page { margin: 13mm; }
}

/* ============================================================
   各種設定（メインビジュアル＝ヒーロー管理 ほか）
   ============================================================ */
.settings-card { padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-4); }
.settings-card > h3 { font-size: var(--fs-15); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.settings-card .field-note { font-size: var(--fs-12); color: var(--c-ink-soft); margin-top: 4px; }
/* 動画ファイルの現在値表示 */
.file-current { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-s); padding: var(--sp-3) var(--sp-4); }
.file-current .fc-name { font-weight: 700; font-size: var(--fs-13); }
.file-current .fc-size { font-size: var(--fs-12); color: var(--c-ink-soft); }
.file-current .fc-actions { margin-left: auto; display: flex; gap: var(--sp-2); }
/* スライドのサムネイル（16:9） */
.hero-thumb { width: 116px; height: 66px; min-height: 0; border-radius: var(--radius-s); flex: none; }
.ord-cell { font-weight: 900; color: var(--c-navy); font-variant-numeric: tabular-nums; text-align: center; width: 44px; }
/* 保存バー */
.save-bar { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.save-bar .save-note { margin-right: auto; font-size: var(--fs-12); color: var(--c-ink-soft); }

/* ============================================================
   事業者（ベンダー）ポータル ＝ 運営コンソールとは別シェル
   上部ナビ型・自社限定ビュー（宿の例。アクティビティ/レンタカーも同シェル流用）
   ============================================================ */
.vendor-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.vendor-header > .wrap { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 0; }
.vendor-header .logo img { height: 26px; }
.vendor-badge { font-size: var(--fs-10); font-weight: 700; letter-spacing: .08em; color: var(--c-teal); border: 1px solid var(--c-teal); border-radius: 4px; padding: 3px 8px; }
.vendor-biz { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-13); color: var(--c-ink-soft); }
.vendor-biz .vb-name { font-weight: 700; color: var(--c-ink); }
.vendor-biz .vb-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--c-teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-13); font-weight: 900; flex: none; }
.vendor-nav { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.vendor-nav > .wrap { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.vendor-nav a { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-14); font-weight: 700; color: var(--c-ink-soft); border-bottom: 2px solid transparent; white-space: nowrap; }
.vendor-nav a:hover { color: var(--c-navy); }
.vendor-nav a.is-active { color: var(--c-teal); border-bottom-color: var(--c-teal); }
.vendor-nav a .vn-badge { margin-left: 6px; background: var(--c-terracotta); color: #fff; font-size: var(--fs-10); font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.vendor-main { padding: var(--sp-7) 0 var(--sp-9); }
.vendor-page-head { margin-bottom: var(--sp-5); }
.vendor-page-head h1 { font-size: var(--fs-24); }
.vendor-page-head .vph-sub { color: var(--c-ink-soft); font-size: var(--fs-14); margin-top: 4px; }
.vendor-quick { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }

/* ダッシュボード：今日の予定 */
.today-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.today-card { padding: var(--sp-5); }
.today-card > h3 { font-size: var(--fs-14); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.today-list { display: flex; flex-direction: column; }
.today-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-13); }
.today-row:last-child { border-bottom: 0; }
.today-row .tr-time { font-weight: 900; color: var(--c-navy); width: 54px; flex: none; font-variant-numeric: tabular-nums; }
.today-row .tr-name { font-weight: 700; }
.today-row .tr-sub { font-size: var(--fs-12); color: var(--c-ink-soft); margin-top: 1px; }
.today-row .tr-badge { margin-left: auto; flex: none; }
.today-empty { font-size: var(--fs-13); color: var(--c-ink-soft); padding: var(--sp-3) 0; }

/* 空室管理カレンダーの「停止」セル＋凡例 */
.cal-cell.stop { background: repeating-linear-gradient(45deg, #F1ECE4, #F1ECE4 6px, #E6DED2 6px, #E6DED2 12px); border-left-color: #9A8C78; }
.cal-cell.stop .cc-info { color: #6E6257; }
.cl-dot.stop { background: #9A8C78; }

@media (max-width: 860px) {
  .today-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   各種設定＞権限管理：ロールバッジ＋ロール説明
   ============================================================ */
.role { display: inline-block; font-size: var(--fs-11); font-weight: 700; padding: 3px 11px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.role.admin { background: var(--c-brand-surface); color: #fff; border-color: var(--c-navy); }
.role.power { background: #EAF0F4; color: #2E5A6E; border-color: #D5E2EA; }
.role.user { background: var(--c-bg-alt); color: var(--c-ink-soft); border-color: var(--c-border); }
.role.vendor { background: #E9F0EC; color: #3E6B4F; border-color: #D2E2D8; }
.role-guide { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.role-guide .rg-item { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-bg); }
.role-guide .rg-item h4 { font-size: var(--fs-14); margin: var(--sp-2) 0 4px; }
.role-guide .rg-item p { font-size: var(--fs-12); color: var(--c-ink-soft); line-height: 1.75; }
/* 設定のサブタブをリンクにしたときの見た目統一 */
a.admin-tab { text-decoration: none; }
@media (max-width: 860px) { .role-guide { grid-template-columns: 1fr; } }

/* ============================================================
   イーチケット（アクティビティ・QRチケット／モバイル前提）
   ============================================================ */
.eticket-shell { background: var(--c-bg-alt); padding: var(--sp-7) 0 var(--sp-9); min-height: 100vh; }
.eticket-back { max-width: 420px; margin: 0 auto var(--sp-3); }
.eticket-back a { font-size: var(--fs-13); font-weight: 700; color: var(--c-ink-soft); }
.eticket { max-width: 420px; margin: 0 auto; background: var(--c-surface); border-radius: var(--radius-l); box-shadow: var(--shadow-elevated); overflow: hidden; }
.eticket-top { background: var(--c-brand-surface); color: #fff; padding: var(--sp-5) var(--sp-6); text-align: center; }
.eticket-top .et-brand { font-size: var(--fs-11); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.eticket-top h1 { font-size: var(--fs-20); color: #fff; margin-top: 6px; line-height: 1.45; }
.eticket-top .et-status { display: inline-block; margin-top: var(--sp-3); font-size: var(--fs-12); font-weight: 700; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 4px 14px; }
.eticket-qr { padding: var(--sp-6) var(--sp-6) var(--sp-4); text-align: center; }
.eticket-qr svg { width: 216px; height: 216px; }
.eticket-qr .et-code { margin-top: var(--sp-3); font-size: var(--fs-15); font-weight: 900; letter-spacing: .08em; color: var(--c-navy); font-variant-numeric: tabular-nums; }
.eticket-qr .et-hint { font-size: var(--fs-12); color: var(--c-ink-soft); margin-top: 4px; }
.et-perf { border-top: 2px dashed var(--c-border); margin: 0 var(--sp-4); position: relative; }
.eticket-body { padding: var(--sp-4) var(--sp-6) 0; }
.et-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-14); }
.et-row:last-child { border-bottom: 0; }
.et-row .et-k { color: var(--c-ink-soft); font-weight: 700; flex: none; }
.et-row .et-v { text-align: right; font-weight: 700; }
.et-pay { color: var(--c-terracotta); }
.eticket-note { background: var(--c-bg-alt); border-radius: var(--radius-m); padding: var(--sp-4); margin: var(--sp-5) var(--sp-6) var(--sp-6); font-size: var(--fs-12); color: var(--c-ink-soft); line-height: 1.85; }
.eticket-note strong { color: var(--c-ink); }

/* ============================================================
   事業者：施設・プラン編集（写真管理グリッド）
   ============================================================ */
.photo-manager { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.photo-item { position: relative; border-radius: var(--radius-m); overflow: hidden; min-height: 110px; }
.photo-item .pi-main { position: absolute; top: 6px; left: 6px; background: var(--c-brand-surface); color: #fff; font-size: var(--fs-10); font-weight: 700; border-radius: 999px; padding: 2px 9px; z-index: 1; }
.photo-item .pi-rm { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(15,39,51,.6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--fs-12); z-index: 1; }
.photo-add { display: flex; align-items: center; justify-content: center; min-height: 110px; border: 1px dashed var(--c-border); border-radius: var(--radius-m); color: var(--c-ink-soft); font-size: var(--fs-13); font-weight: 700; background: var(--c-bg-alt); }
label.amenity { cursor: pointer; }
label.amenity input { margin-right: 2px; }
@media (max-width: 860px) { .photo-manager { grid-template-columns: repeat(2, 1fr); } }


/* ===== レビュー是正（🟡）：コントラスト＋キーボードフォーカス可視化 =====
   トークンの上書きはここに置かないこと。
   もとは :root { --c-ink-soft; --c-status-pending-fg } をこのファイルで再定義していたが、
   components.css は style.css より**あとに**読み込まれるため、
   style.css のダークモード指定を打ち消していた（暗い地に暗い補助文字が残り、
   コントラスト 2.16:1 の読めない文字が40か所出た）。
   値は style.css の :root へ移してある。トークンの定義は1か所に集める。 */
.badge-soldout { color: #6B5D45; }                 /* was #8A7A63 (3.48:1) → AA */
.admin-nav a .an-badge,
.vendor-nav a .vn-badge { background: #A0453A; }   /* 白文字のAA達成（deep terracotta） */
.admin-tab .at-count { color: #A0453A; }           /* was terracotta 3.64:1 → AA */

/* キーボード操作時のみフォーカスリングを表示（マウス時は出さない） */
a:focus-visible, button:focus-visible, .btn:focus-visible, .chip:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, .admin-tab:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
  border-radius: 4px;
}
/*
 * 白いリングは**暗い面の上に置かれるものだけ**に限る。
 *
 * `.btn-primary` をここに入れていたのが誤り（2026-08-15 UIレビュー #2）。
 * `outline-offset: 2px` なのでリングはボタンの**外**＝生成りのページ背景の上に描かれ、
 * **周囲とのコントラストが 1.07:1**——キーボードだけで操作する方には、
 * 主CTAだけ現在位置が分からなくなっていた。
 * 管理画面のサイドバー（`.admin-side` `.vendor-nav`）は面そのものが濃紺なので白のまま。
 */
.admin-side a:focus-visible, .vendor-nav a:focus-visible { outline-color: #fff; }


/*
 * モバイル横スクロール（横溢れ）防止ガード。
 *
 * **`body` には掛けない**（2026-08-15 UIレビュー #32）。
 * `overflow` を指定された `body` は自身がスクロールコンテナになり、
 * **`position: sticky` がビューポートではなく body の全高に対して効く**。
 * その結果 `header.site-header` が固定されず、PC・スマホとも画面外へ流れていた
 *（宿詳細はスマホで13,520px＝約16画面。その間ずっとナビが出てこない）。
 * `html` 側だけなら sticky は生きる。
 */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; }

/* ===== 顧客ヘッダーのハンバーガーメニュー（CSSのみ・JS不要／バーガーは絶対配置で右端固定） =====
   切り替える幅は style.css の `.nav-links { display: none }` と必ず揃えること。
   ずれると「ナビもバーガーも無い」か「両方出る」幅が生まれる。 */
.site-header .nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.site-header .nav-burger { display: none; }
@media (max-width: 1120px) {
  .site-header .wrap { position: relative; }
  .site-header .lang-dropdown { display: none; }         /* モバイルは言語切替をヘッダーから外す（メニュー化はWP実装で） */
  .site-header .header-actions { margin-right: 54px; }    /* 右端の絶対配置バーガーと重ならないよう余白確保 */
  .site-header .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    position: absolute; top: 50%; right: var(--sp-4); transform: translateY(-50%);
    width: 44px; height: 44px; padding: 12px 10px; box-sizing: border-box; cursor: pointer;
    border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface); z-index: 60;
  }
  .site-header .nav-burger span { display: block; width: 20px; height: 2px; background: var(--c-brand-surface); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .site-header .nav-toggle:checked ~ .nav-links {
    display: flex; flex-direction: column; gap: 0; width: 100%;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: var(--c-surface); border-top: 1px solid var(--c-border);
    box-shadow: 0 12px 24px rgba(15,39,51,.12);
  }
  .site-header .nav-toggle:checked ~ .nav-links a { padding: 15px var(--sp-4); border-bottom: 1px solid var(--c-border); opacity: 1; }
  .site-header .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .site-header .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--c-navy); outline-offset: 2px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


/* ===== モバイルメニュー内の言語切替 ＋ メニュー微調整 ===== */
.nav-lang { display: none; }
@media (max-width: 1120px) {
  .site-header .nav-toggle:checked ~ .nav-links { max-height: calc(100vh - 64px); overflow-y: auto; }
  .site-header .nav-toggle:checked ~ .nav-links a:hover { background: var(--c-bg-alt); }
  .site-header .nav-toggle:checked ~ .nav-links .nav-lang {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 14px var(--sp-4) 18px; background: var(--c-bg-alt); border-bottom: none;
  }
  .site-header .nav-toggle:checked ~ .nav-links .nav-lang .nav-lang-label {
    flex-basis: 100%; font-size: var(--fs-12); font-weight: 700; color: var(--c-ink-soft); letter-spacing: .04em; margin-bottom: 2px;
  }
  .site-header .nav-toggle:checked ~ .nav-links .nav-lang a {
    padding: 7px 14px; border: 1px solid var(--c-border); border-radius: 999px;
    font-size: var(--fs-13); font-weight: 700; background: var(--c-surface); opacity: 1;
  }
  .site-header .nav-toggle:checked ~ .nav-links .nav-lang a:hover { border-color: var(--c-navy); background: var(--c-surface); }
}

/* 宿一覧のエリア絞り込みの表示。件数が少ないのを在庫のせいだと誤解させないための帯。 */
.okiwork-area-filter {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  font-size: .92rem;
  color: var(--c-ink-soft);
}
.okiwork-area-filter a { color: var(--c-navy); font-weight: 700; margin-left: .4em; }

/* トップのお客様向けお知らせ（ヒーローと検索の間）。
   検索の直前に置くので、読み飛ばされない程度に目立ち、ヒーローの余韻は壊さない濃度にする。 */
.okiwork-front-notices { padding: var(--sp-6) 0 0; }
.okiwork-front-notice {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-navy);
  border-radius: var(--radius-m);
  background: var(--c-surface);
}
.okiwork-front-notice + .okiwork-front-notice { margin-top: var(--sp-3); }
.okiwork-front-notice .fn-title { margin: 0; font-weight: 700; color: var(--c-navy); }
.okiwork-front-notice .fn-body { margin-top: var(--sp-2); font-size: .94rem; color: var(--c-ink-soft); }
.okiwork-front-notice .fn-body p { margin: 0 0 .5em; }
.okiwork-front-notice .fn-body p:last-child { margin-bottom: 0; }
.okiwork-front-notice.is-notice { border-left-color: #b8860b; }
.okiwork-front-notice.is-notice .fn-title { color: #7a5c12; }
.okiwork-front-notice.is-urgent { border-left-color: var(--c-alert); }
.okiwork-front-notice.is-urgent .fn-title { color: #96233a; }

/* ===== モバイル：ヘッダーの詰まりと、指で押せる大きさ ========================
   375px幅では ロゴ＋β版＋新規登録＋予約する＋バーガー が並びきらず、
   β版バッジと「新規登録」が12px重なって文字が読めなくなっていた。
   ヘッダーは「予約する」だけに絞り、登録はハンバーガーの中へ移す。
   あわせて、実測で18〜40pxしかなかった操作要素を44px以上にする。 */
.nav-only-mobile { display: none; }

/* 進行中のお申込みへ戻る小窓。ヘッダーに入れるとロゴと接触したので、画面の隅に浮かせる。
   右下は「上に戻る」やチャットの定位置と重なりやすいが、この画面にはどちらも無い。
   セーフエリア（iPhoneのホームバー）を避ける。 */
.okiwork-cart-float {
  position: fixed;
  right: max(var(--sp-4), env(safe-area-inset-right));
  bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  z-index: 60;
}
.okiwork-cart-float-link {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 999px;
  /* 地色はアクセント。ブランドの藍（--c-navy）はフッターや濃色セクションの地と同じ色で、
     その上に来ると輪郭が消える（実際にフッター上で溶けていた）。
     この小窓はページのどこにでも重なるため、**どの地の上でも見える**必要がある。 */
  background: var(--c-accent-surface); color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  line-height: 1.4;
}
.okiwork-cart-float-link:hover,
.okiwork-cart-float-link:focus { background: var(--c-accent-surface-hover, var(--c-accent-surface)); color: #fff; }
.okiwork-cart-float-main { font-size: var(--fs-14); font-weight: 700; }
/* 12pxの補助文字。地に合成した実効色で測ると .85 で 4.60:1、.9 で 4.95:1。
   AA(4.5:1)の際に置きたくないので、余裕のある方を採る。 */
.okiwork-cart-float-sub { font-size: var(--fs-12); opacity: .9; }
.okiwork-cart-float-sub:empty { display: none; }
/* 動きを減らす設定の人には出しっぱなしにする（浮かせるだけで動かさない）。 */
@media (max-width: 600px) {
  .okiwork-cart-float { left: max(var(--sp-4), env(safe-area-inset-left)); }
  .okiwork-cart-float-link { align-items: center; }
}

@media (max-width: 860px) {
  /* ヘッダーを詰まらせない。
     非表示の指定は、下のタップ領域の指定（.site-header .header-actions .btn ＝ 0,3,0）に
     負けないよう要素セレクタを足して 0,3,1 にする。同じファイル内で競合させない。 */
  .site-header .header-actions a.header-signup { display: none; }
  .site-header .nav-only-mobile { display: block; }
  /* 狭い画面では文字を落として、アイコンと件数だけにする。
     ヘッダーは ロゴ＋β版バッジ＋操作 が並びきらず、以前これで文字が重なった（375px）。
     消すのではなく縮める——進行中のお申込みへ戻る道は、狭い画面でこそ要る。 */
  /* ロゴは縮んでよいが、β版バッジは切らない（overflow:hidden を使うとバッジが欠ける）。 */
  .site-header .logo { min-width: 0; flex: 0 1 auto; }
  .site-header .logo-img { max-width: 100%; }
  .site-header .logo-badge { flex: 0 0 auto; }
  .site-header .header-actions { flex: 0 0 auto; gap: var(--sp-2); }

  /* 指で押せる大きさ（44px）。文中のリンクは対象にしない——行間が崩れるため、
     単独で並ぶ操作要素だけを広げる。 */
  .site-header .header-actions .btn,
  .site-footer .footer-links a,
  .okiwork-legal-links a,
  .woocommerce-breadcrumb a,
  .breadcrumb a {
    display: inline-block;
    min-height: 44px;
    line-height: 1.5;
    padding-top: 11px;
    padding-bottom: 11px;
    box-sizing: border-box;
  }
  /* ボタン・フォーム部品は高さだけ確保する（余白は各コンポーネントの指定を残す）。 */
  .site-header .header-actions .btn,
  .okiwork-booking-section button,
  .okiwork-booking-section select,
  .okiwork-quote-cta,
  button.single_add_to_cart_button { min-height: 44px; }

  /* フッターは1リンク＝1行なので、縦の余白を詰めて間延びを防ぐ。 */
  .site-footer .footer-links a { padding-top: 9px; padding-bottom: 9px; }

  /* ロゴ（トップへ戻る導線）。高さ20pxしかなかった。 */
  .site-header .logo { min-height: 44px; align-items: center; }

  /* 単独で置かれるテキストリンク・一覧の操作。段落内のリンクは対象にしない。 */
  .back-link,
  .okiwork-language-switcher a,
  .promo-more,
  .woocommerce .woocommerce-ordering select,
  .woocommerce nav.woocommerce-pagination a,
  .woocommerce nav.woocommerce-pagination span,
  .woocommerce ul.products li.product a.woocommerce-loop-product__link,
  .result-info h3 a,
  .result-card .name a {
    display: inline-block; min-height: 44px; box-sizing: border-box;
    padding-top: 11px; padding-bottom: 11px; line-height: 1.4;
  }
  .woocommerce .woocommerce-ordering select { padding-top: 0; padding-bottom: 0; }
  .woocommerce nav.woocommerce-pagination a,
  .woocommerce nav.woocommerce-pagination span { min-width: 44px; text-align: center; }
}

/* ---- インラインSVGアイコン（絵文字からの置き換え）------------------------
   絵文字はOSごとに絵柄も色も変わり、色を指定できない。1色のSVGにして
   親の color を継承させることで、配色の中に収まる。 */
.okiwork-ic { display: block; flex: none; }
.lang-current .okiwork-ic { display: inline-block; vertical-align: -2px; margin-right: 5px; }