/* ============================================================
   OkiWork デザインドラフト — 共通デザイントークン & コンポーネント
   コンセプト：隠岐の海と岩肌をモチーフにした「落ち着いた自然派・上質」
   ============================================================ */

:root {
  /* --- カラーパレット --- */
  --c-bg: #FAF7F1;           /* オフホワイト・サンド（背景） */
  --c-bg-alt: #F1EAE0;       /* 少し濃いサンド（セクション区切り） */
  --c-surface: #FFFFFF;      /* カード等の面 */
  --c-ink: #1D2B33;          /* 本文テキスト（藍に近いダーク） */
  --c-ink-soft: #4E5D65;     /* 補助テキスト（AA余裕を確保した値。もとは #5B6B72） */
  --c-border: #E4DDCF;       /* 罫線・区切り */

  --c-navy: #16374A;         /* メインカラー：深い海の藍色（**文字・罫線として**使う） */
  --c-navy-dark: #0F2733;    /* ホバー・強調用の濃色 */
  --c-teal: #3C6E71;         /* サブアクセント：凪の海 */
  --c-terracotta: #C1694F;   /* アクセント：珊瑚・強調バッジ */

  /* --- ブランド色を「塗る面」として使うとき ---
     --c-navy は2つの役割を兼ねていた。文字色（見出し・リンク）としての藍と、
     ボタン・フッター・法人セクションを**塗りつぶす面**としての藍である。
     明るい地の上では同じ色でよいが、暗い地では正反対の向きに動く。
     文字は明るくしないと沈み、面は暗いままでないと白文字が乗らない。
     1つのトークンで両方は表せないので、面のほうを分けた。
     明るいテーマでは従来と同じ値なので、見た目は変わらない。 */
  /* アクセントを「地」として使うときの色。--c-terracotta(#C1694F) は文字・罫線用の明るさで、
     白文字を乗せると 3.9:1 しかなく AA(4.5:1) に届かない。濃くした一段を別に持つ。
     浮かせた予約の小窓が濃紺のフッターに溶けたのが発端（2026-08-07）。 */
  --c-accent-surface: #A9492F;       /* 白文字で 5.7:1 */
  --c-accent-surface-hover: #8F3D27;

  /* アクセントを「文字」として使うときの色（2026-08-15 UIレビュー #5）。
     --c-terracotta(#C1694F) は生成りの地で 3.64:1、白地で 3.89:1 しかなく AA(4.5:1) に届かない。
     13px は「大きい文字」に当たらないので緩和も効かない。
     **いちばん読ませたい文（押せない理由）が、いちばん読みにくかった。**
     地が生成り(#FAF7F1)でも白でも 5.7:1 以上になる一段を別に持つ。 */
  --c-accent-ink: #A9492F;

  --c-brand-surface: #16374A;        /* ボタン・フッター・濃色セクションの地 */
  --c-brand-surface-hover: #0F2733;  /* その押下・ホバー */
  --c-on-brand: #FFFFFF;             /* その上に乗る文字 */

  /* ヘッダーは背後が透ける（backdrop-filter）ので、地の色を半透明で持つ。 */
  --c-header-bg: rgba(250, 247, 241, 0.92);
  /* ロゴSVGは藍色の版が1つだけ。暗い地では反転させる（明るいテーマでは何もしない）。 */
  --logo-filter: none;

  /* プルダウンの「∨」。appearance:none でブラウザ標準の矢印が消えるため、自前で置く。
     線の色はSVGの中に焼き込むしかない（currentColor は data: URI に効かない）ので、
     地の明暗で本文色に合わせた版に差し替える。 */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231D2B33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* 濃色セクション（法人利用・CTA帯・特集LP）の中に置く「白抜きボタン」。
     地が明暗どちらでも濃色のままなので、ボタンは**明るい面＋暗い文字**で固定する。
     ここを --c-navy で書いてはいけない。暗いテーマでは藍が明るい側へ動くため、
     白い面に明るい藍の文字＝コントラスト1.9:1 の読めないボタンになる。 */
  --c-inverse-btn-bg: #FFFFFF;
  --c-inverse-btn-bg-hover: #EDE7DA;
  --c-inverse-btn-ink: #16374A;

  /* 淡い地のお知らせ・相談帯。暗いテーマでは同じ意味の暗い色に置き換える。 */
  --c-info-bg: #EAF0EE;
  --c-info-ink: #375147;
  --c-info-border: #D4E2DC;
  --c-notice-ink: #6B5217;
  --c-notice-border: #E9D9AC;
  /* 入力欄の地。明るいテーマでは白、暗いテーマではカードより一段沈める。 */
  --c-field-bg: #FFFFFF;

  /* 注意喚起（「必須」マーク・緊急のお知らせ・運営コンソールの警告）。
     赤系はここ1色だけ。新しい警告色を足さないこと。
     テラコッタと同系で浮かず、クリーム地でコントラスト 6.40（AA本文基準4.5を満たす）。 */
  --c-alert: #a3341f;

  --c-status-pending-bg: #F6ECD2;
  --c-status-pending-fg: #6E5414;
  --c-status-confirmed-bg: #E4EEE6;
  --c-status-confirmed-fg: #3E6B4F;
  --c-status-rejected-bg: #F1E4E1;
  --c-status-rejected-fg: #A0453A;
  --c-status-changing-bg: #EAE6F1;
  --c-status-changing-fg: #6A5A96;

  /* --- 通知・補助の面と文字 ---
     プラグイン側（PHP）が style 属性に直書きしていた色を、ここに集約したもの。
     直書きのままだと暗いテーマで動かせず、明るい面に明るい文字が乗って読めなくなる
     （2026-08-02、カートの「予約内容を更新」が 1.01:1、承認待ちバッジが 1.09:1 で見つかった）。

     置き換えは var(--token, 元の色) の形にしてある。帳票（領収書・見積書・旅程表）は
     テーマのCSSを読まずに単体で印刷されることがあり、そこでは変数が無い。
     フォールバックを書いておけば、その場合は元の色のまま出る。 */
  /* 状態に色を持たない中立のチップ（予約の状態ラベル・エリア名など）。
     状態別の --c-status-*-bg とは別に持つ。1つのチップに4つの状態が入れ替わりで出るため、
     どれか1つの状態色を借りると、他の状態のときに意味の合わない色になる。 */
  --c-chip-bg: #EEEEFF;
  --c-chip-ink: #2F3B57;

  --c-surface-soft: #FAF8F2;   /* 生成りの小カード（領収書の宛名欄など） */
  --c-notice-bg: #FCF3E6;      /* 注意（黄）の帯 */
  --c-tip-bg: #F4F7FB;         /* 補足（青）の帯 */
  --c-danger-bg: #FDEEF0;      /* エラー（赤）の帯 */
  --c-danger-ink: #B32D2E;
  --c-success-ink: #2E6B45;
  --c-warn-ink: #A9701A;
  --c-link: #2563EB;


  /* --- 文字サイズ ---
     直書きの px を1か所に集約する。ここに無い値を新しく足さないこと。
     ウェイトは Noto Sans JP の 400 / 500 / 700 / 900 のみ読み込んでいる。
     600・800 を書いても 700・900 で描画されるため、その2つは使わない。 */
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-23: 23px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-34: 34px;
  --fs-40: 40px;
  --fs-52: 52px;

  /* --- タイポグラフィ --- */
  --font-base: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* --- スペーシング --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* --- 角丸・シャドウ --- */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --shadow-card: 0 2px 8px rgba(15, 39, 51, 0.06), 0 1px 2px rgba(15, 39, 51, 0.04);
  --shadow-elevated: 0 12px 32px rgba(15, 39, 51, 0.12);

  --max-width: 1120px;
}

/* ============================================================
   ダークモード（端末の設定に追従）
   ============================================================
   反転ではなく、別に組んだ「夜の海」の配色。

   ・地は純黒にしない（#000 は日本語の細い字が滲んで見え、写真も浮く）。
     昼の砂色に対して、夜の海の紺black を置く。
   ・文字は純白にしない。昼のクリームの気配を残した砂色にすることで、
     ブランドが別物に見えないようにする。
   ・藍（--c-navy）は**明るい側へ**動かす。暗い地で濃い藍は沈んで読めない。
     一方でボタンやフッターの**面**は暗いままにする（白文字が乗るため）。
     この向きの違いが、1トークンでは表せなかったところ。

   コントラスト（地 #101A21 に対して）
     本文  #ECE5D8 … 14.5:1   補助 #A9B6BC … 7.8:1
     藍    #8FC4DE … 9.4:1    警告 #F0937A … 7.4:1
   いずれも本文基準 4.5:1 を満たす。

   運営コンソール（/manage/）は対象外。CSSがPHP内の直書きに散っており、
   別の作業として切り分けている。 */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #101A21;
    --c-bg-alt: #16232C;
    --c-surface: #1B2A34;
    --c-ink: #ECE5D8;
    --c-ink-soft: #A9B6BC;
    --c-border: #2E404C;

    --c-navy: #8FC4DE;
    --c-navy-dark: #B4DBEF;
    --c-teal: #7FB5B8;
    --c-terracotta: #E5977B;
    --c-alert: #F0937A;
    /* 暗い画面では、逆に明るくしないと沈む（地は #101A21）。 */
    --c-accent-ink: #F0A184;

    /* アクセントの地は明暗で変えない。暗い画面の地(#101A21)とは十分に差があり、
       明るくすると乗せた白文字が AA を割る。 */

    /* 面は暗いまま。ただし地(#101A21)から浮くところまで明るくする。 */
    --c-brand-surface: #21536E;
    --c-brand-surface-hover: #2C6E92;
    --c-on-brand: #FFFFFF;

    --c-header-bg: rgba(16, 26, 33, 0.92);
    --logo-filter: brightness(0) invert(1);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ECE5D8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* 濃色セクションの白抜きボタン。面は砂色（純白は暗い画面で刺さる）、
       文字は昼と同じ濃い藍のまま。ここだけは明暗で反転させない。 */
    --c-inverse-btn-bg: #ECE5D8;
    --c-inverse-btn-bg-hover: #D8CFBD;
    --c-inverse-btn-ink: #14313F;

    --c-info-bg: #1C2E2A;
    --c-info-ink: #A8C9BC;
    --c-info-border: #2C4740;
    --c-notice-ink: #E8C978;
    --c-notice-border: #4A3D1C;
    --c-field-bg: #14202A;

    /* 状態バッジ。地と文字の対を、暗い地でも同じ意味に見えるように組み直す。 */
    --c-status-pending-bg: #3A3018;
    --c-status-pending-fg: #E8C978;
    --c-status-confirmed-bg: #1E3327;
    --c-status-confirmed-fg: #8FCBA6;
    --c-status-rejected-bg: #3A2320;
    --c-status-rejected-fg: #F0A093;
    --c-status-changing-bg: #2A2540;
    --c-status-changing-fg: #B7A9E0;

    /* 通知・補助の面と文字（明るいテーマの対になる値）。
       面は地に沈めて、文字は明るい側へ動かす。両方を同じ向きに動かすと読めなくなる。 */
    --c-chip-bg: #24313F;
    --c-chip-ink: #CFE0EA;

    --c-surface-soft: #16232C;
    --c-notice-bg: #2A2415;
    --c-tip-bg: #16242F;
    --c-danger-bg: #2E1B1D;
    --c-danger-ink: #F0937A;
    --c-success-ink: #8FD3A8;
    --c-warn-ink: #E8B45C;
    --c-link: #8FC4DE;

    /* 暗い地では薄い影は見えない。落とす影を濃くして、面の段差を保つ。 */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.55);

    /* 入力欄・チェックボックス・スクロールバーなど、ブラウザ自身が描くものを暗くする。
       これが無いと、暗い画面の中でフォームだけ白いままになる。 */
    color-scheme: dark;
  }

  /* 写真が未登録の宿ではWooCommerceの白いプレースホルダー画像が出る。
     暗い画面では白い板が並んで、そこだけ穴が空いたように見える。 */
  img.woocommerce-placeholder { opacity: 0.18; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: 0.01em; }

/* 素の <h1> にサイズを与える。指定が無いとブラウザ既定の 2em（＝32px・weight 700）が出て、
   .okiwork-page-title を持つページ（30px・weight 900）と見出しが2種類に割れていた。
   「2つの設計」ではなく片方が定義漏れだったので、設計値のほうへ揃える。

   ここで color は指定しないこと。文字色は「地の色」に対して決まるものなので、
   要素セレクタで固定すると暗い背景まで塗ってしまう。実際、一度ここに navy を書いた結果、
   ヒーロー（.hero）と特集LP（.feature-hero）は container 側の color:#fff を継承していたため、
   夕景の写真の上に紺の見出しが乗って読めなくなった。色はコンテナ側で持たせる。 */
h1 {
  font-size: var(--fs-30);
  font-weight: 900;
  line-height: 1.3;
}

p { margin: 0; }

button, input { font-family: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* ---------------- ヘッダー ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 900;
  font-size: var(--fs-22);
  color: var(--c-navy);
  letter-spacing: 0.02em;
}

.logo-img {
  height: 30px;
  width: auto;
  display: block;
  /* ロゴSVGは藍色の1版しかない。暗い地では白抜きに反転させる
     （明るいテーマでは --logo-filter が none なので何も起きない）。 */
  filter: var(--logo-filter);
}

.logo .logo-sub {
  font-weight: 500;
  font-size: var(--fs-11);
  color: var(--c-ink-soft);
  letter-spacing: 0.15em;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--c-border);
}

/* フッター（濃色背景）ではロゴを白抜きにする */
.site-footer .logo-img { filter: brightness(0) invert(1); height: 26px; }

.nav-links {
  display: flex;
  gap: var(--sp-5);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--c-ink);
}

/* 項目の途中で改行させない。
   ヘッダーは flex で、リンクは縮められる側にいる。幅が足りなくなると
   「宿泊施設を探/す」「アクティビテ/ィ」のように語の途中で折り返してしまう。
   ここで折り返しを止め、入りきらない幅ではハンバーガーに切り替える
   （下の「ヘッダーが入りきらなくなる幅」を参照）。 */
.nav-links > a { white-space: nowrap; }

.nav-links a { opacity: 0.8; transition: opacity .15s; }
.nav-links a:hover { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }

.header-lang {
  font-size: var(--fs-12);
  color: var(--c-ink-soft);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: var(--sp-1) var(--sp-3);
}

/* ---------------- ボタン ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-15);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--c-brand-surface);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn-primary:hover { background: var(--c-brand-surface-hover); }

.btn-secondary {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.btn-secondary:hover { background: rgba(22, 55, 74, 0.06); }

.btn-ghost {
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-border);
}

.btn-block { width: 100%; }
.btn-lg { padding: 18px 32px; font-size: var(--fs-16); }
.btn-sm { padding: 8px 18px; font-size: var(--fs-13); }

.btn-danger-outline {
  background: transparent;
  color: var(--c-status-rejected-fg);
  border-color: #E3C9C4;
}
.btn-danger-outline:hover { background: var(--c-status-rejected-bg); }

/* ---------------- バッジ / ステータス ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge-pending { background: var(--c-status-pending-bg); color: var(--c-status-pending-fg); }
.badge-confirmed { background: var(--c-status-confirmed-bg); color: var(--c-status-confirmed-fg); }
.badge-rejected { background: var(--c-status-rejected-bg); color: var(--c-status-rejected-fg); }
.badge-changing { background: var(--c-status-changing-bg); color: var(--c-status-changing-fg); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 700;
  background: var(--c-bg-alt);
  color: var(--c-navy);
  border: 1px solid var(--c-border);
}

/* ---------------- カード ---------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

/* ---------------- プレースホルダー画像（SVG風グラデーション） ---------------- */
.ph-photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #2E5A6E 0%, #16374A 55%, #0F2733 100%);
  color: rgba(255,255,255,0.92);
  display: flex;
  align-items: flex-end;
  min-height: 160px;
}
.ph-photo::before {
  /* 水平線 + 波のレイヤー */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 15% 110%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(255,255,255,0.06) 56%, transparent 58%);
}
.ph-photo .ph-caption {
  position: relative;
  z-index: 1;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-12);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  background: linear-gradient(0deg, rgba(15,39,51,0.55), transparent);
  width: 100%;
}
.ph-photo.tone-sand { background: linear-gradient(160deg, #C7B79B 0%, #A98F68 60%, #7C6A4A 100%); }
.ph-photo.tone-teal { background: linear-gradient(160deg, #4C868A 0%, #2E5A6E 55%, #16374A 100%); }
.ph-photo.tone-dusk { background: linear-gradient(160deg, #6E5566 0%, #3E3C57 55%, #232A3E 100%); }

/* ---------------- フォーム部品 ---------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--c-ink);
}
.field .hint { font-size: var(--fs-12); color: var(--c-ink-soft); font-weight: 400; }

.input, select.input {
  appearance: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  padding: 13px 14px;
  /* **16px を下回らない（2026-08-15 UIレビュー #23）。**
     iOS Safari は 16px未満の入力欄をタップすると勝手に拡大する。
     一度拡大されると、そのあとは横スクロールの要る画面になったままになる。
     見た目の差は1pxで、読みやすさはむしろ上がる。 */
  font-size: var(--fs-16);
  background: var(--c-surface);
  color: var(--c-ink);
  width: 100%;
}

/* 高さを揃える。
   上下の padding だけで背を作ると、部品ごとに高さがずれる。line-height が normal だと
   中身の高さを部品自身が決めるため——実測で 日付52px / プルダウン44.5px / ボタン48px と
   3種類になっていた（同じ padding・同じ文字サイズなのに、である）。
   日付欄はブラウザが内部に持つ年月日のウィジェットが背を押し上げ、プルダウンは逆に低い。

   そこで高さを直接決め、上下の padding は 0 にする（入力部品は中身を自分で上下中央に置く）。
   48px はボタン（.btn の padding 14px 上下）と同じ値で、指で押す的の大きさとしても十分。
   textarea に .input を付けたときに巻き込まれないよう、input と select だけに当てている。 */
input.input, select.input {
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
}
/* プルダウンだと分かるようにする。
   appearance:none を当てたまま矢印を足していなかったため、エリア・人数・泊数が
   テキスト入力と見分けがつかず、「選べる」こと自体に気づかれなかった。
   padding-right は矢印(12px)＋左右の余白(14px×2)ぶんを確保している。 */
select.input {
  padding-right: 40px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

.input:focus, select.input:focus {
  outline: none;
  border-color: var(--c-navy);
  box-shadow: 0 0 0 3px rgba(22, 55, 74, 0.12);
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--c-surface);
}
.stepper button {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: var(--fs-18);
  color: var(--c-navy);
  cursor: pointer;
}
.stepper button:hover { background: var(--c-bg-alt); }
.stepper .stepper-value {
  min-width: 64px;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-15);
}

.checkbox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-bg-alt);
  border-radius: var(--radius-m);
}
.checkbox-row .checkbox-label { font-weight: 700; font-size: var(--fs-14); }
.checkbox-row .checkbox-desc { font-size: var(--fs-12); color: var(--c-ink-soft); margin-top: 2px; }

.switch {
  position: relative;
  width: 46px;
  height: 26px;
  flex: none;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--c-brand-surface);
  border-radius: 999px;
}
.switch .knob {
  position: absolute;
  top: 3px; left: 23px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: left .15s;
}

/* ---------------- 注意バナー ---------------- */
.notice {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-m);
  background: var(--c-status-pending-bg);
  color: var(--c-notice-ink);
  font-size: var(--fs-13);
  line-height: 1.6;
  border: 1px solid var(--c-notice-border);
}
.notice.notice-info {
  background: var(--c-info-bg);
  color: var(--c-info-ink);
  border-color: var(--c-info-border);
}
.notice strong { color: inherit; }

/* ---------------- 料金内訳 ---------------- */
.price-box {
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.price-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-14);
  color: var(--c-ink-soft);
}
.price-row.total {
  border-top: 1px dashed var(--c-border);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  font-size: var(--fs-20);
  font-weight: 900;
  color: var(--c-navy);
}
.price-row.total span:last-child { font-variant-numeric: tabular-nums; }

/* ---------------- セクション見出し ---------------- */
.eyebrow {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-teal);
  text-transform: uppercase;
}

.section-title {
  font-size: var(--fs-28);
  margin-top: var(--sp-2);
}

/* ---------------- フッター ---------------- */
.site-footer {
  margin-top: var(--sp-9);
  background: var(--c-brand-surface);
  color: rgba(255,255,255,0.72);
  padding: var(--sp-7) 0 var(--sp-6);
  font-size: var(--fs-13);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-6);
}
.site-footer .logo { color: #fff; }
.site-footer a { opacity: 0.8; }
.site-footer a:hover { opacity: 1; }
.footer-links { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-bottom {
  max-width: var(--max-width);
  margin: var(--sp-6) auto 0;
  padding: var(--sp-4) var(--sp-5) 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: var(--fs-12);
  opacity: 0.6;
}

/* ---------------- レイアウトユーティリティ ---------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); }
.mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)} .mt-7{margin-top:var(--sp-7)}
.mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}
.text-soft { color: var(--c-ink-soft); }
.text-center { text-align: center; }

.page-shell { padding: var(--sp-7) 0 var(--sp-9); }
.narrow { max-width: 620px; margin: 0 auto; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--c-ink-soft);
  margin-bottom: var(--sp-5);
}
.back-link:hover { color: var(--c-navy); }

/* ---------------- レスポンシブ ---------------- */

/* ヘッダーが入りきらなくなる幅 ＝ コンテナの上限（--max-width 1120px）。
   日本語のナビ5項目はロゴ・言語・ボタン2つと合わせて内側1072pxをほぼ使い切る（余り39px）。
   コンテナはこの幅で頭打ちになるので、1120pxを超えている限り見え方は変わらない。
   逆に下回ると即座に足りなくなるため、ここを境にハンバーガーへ切り替える。
   中途半端に詰まった状態を作らないための線引きなので、
   ナビ項目や文言を増やすときは実測して、この値を見直すこと。
   （バーガー側の指定は components.css の同じ幅のブロックにある） */
@media (max-width: 1120px) {
  .nav-links { display: none; }
}

@media (max-width: 860px) {
  .header-lang { display: none; }
  .logo .logo-sub { display: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .section-title { font-size: var(--fs-23); }
  .site-header .wrap { height: 60px; }
  .page-shell { padding: var(--sp-6) 0 var(--sp-8); }
  .wrap { padding: 0 var(--sp-4); }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .btn-lg { width: 100%; }
}

/* ------------------------------------------------------------------
   背景写真の後追い読み込み（okiwork_bg_style / theme.js と対で使う）

   背景写真は <img> ではないので loading="lazy" が効かない。URLを
   カスタムプロパティ --okbg に入れておき、必要になった時点で .okbg-on を
   付けて background-image に流し込む。

   **!important なのは、URLが要素の style 属性にあるため。**
   通常の規則では inline に勝てないので、止める側も出す側も important で揃える。

   **.okjs が付くのは JavaScript が動いたときだけ。**動かない環境では
   この2行がどこにも当たらず、要素側の background-image:var(--okbg) が
   そのまま出る＝写真が消えない。遅らせるつもりが消える、を既定で防ぐ。
   ------------------------------------------------------------------ */
.okjs [data-okbg] {
  background-image: none !important;
  /*
   * **止めるとクラス側のグラデーションも一緒に消える。**
   * `.promo-bg-a` や `.ph-photo.tone-teal` は `background` の一括指定で下地を
   * 描いているので、`background-image` を none にすると下地ごと無くなり、
   * 写真が届くまで**透明な枠**になる。読み込み中の「入れ物」が見えないと、
   * 崩れているのか待っているのか分からない。
   *
   * ここは**写真が入る場所だと分かる無地**を1つ置く。クラスごとの色を写して
   * 持つと、デザインを直したときにこちらだけ古くなるので、あえて写さない。
   */
  background-color: var(--c-bg-alt);
}
.okjs [data-okbg].okbg-on { background-image: var(--okbg) !important; }