/*
Theme Name: Hambytown — Asahi Body Care
Text Domain: hambytown
Version: 0.1.0
Author: Miraiso Okinawa
Description: English-first LP theme for 沖縄北谷あさひ整骨院ハンビータウン院, based on the aoba-kyozuka design tokens.
*/

  /* ============================================================
     ハンビー英語LP（経塚デザイン踏襲版）
     - カラー変数・タイポ・コンポーネントを経塚 release/ から移植
     - 文言は現状維持（English-Friendly版）
     ============================================================ */

  :root {
    --paper:        #FBFAF7;
    --paper-d:      #F4F1EA;
    --paper-xd:     #E8E2D2;
    --ink:          #1A2540;
    --ink-m:        #4A5568;
    --ink-l:        #6B7280;
    --gold:         #BFA372;
    --gold-d:       #8B6F3A;
    --gold-darker:  #725A2F;  /* ラベル用。WCAG AA 実測: 6.52:1 on #fff／6.25:1 on paper／5.78:1 on paper-d */
    --gold-l:       #E8DFC9;
    --gold-xl:      #F5F0E2;
    --cta:          #C76A1A;
    --cta-d:        #A85814;
    --cta-l:        #FBEDDC;
    --cta-darker:   #8A4710;  /* ヘッダーCTAのホバー用。WCAG AA 実測: 7.02:1 on #fff
                                 （旧 --cta #C76A1A は 3.81:1 でAA未達だった。ホバーで明るくなる
                                   逆方向の変化だったため、暗くする方向に統一） */
    --line:         #E5DECA;
    --line-l:       #F0EADA;
    --line-green:   #06C755;
    --line-green-d: #048138;
    --radius-s:     6px;
    --radius:       10px;
    --radius-l:     16px;

    --ph-bg:        #FBF1DD;
    --ph-border:    #BFA372;
    --ph-text:      #8B6F3A;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.9;
    font-size: 15px;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 64px;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; height: auto; display: block; }

  .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 28px; }
  .container-narrow { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 28px; }

  /* ===== Skip link ===== */
  .skip {
    position: absolute;
    top: -60px; left: 12px;
    background: var(--ink); color: #fff;
    padding: 8px 12px; border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
  }
  .skip:focus { top: 12px; }

  /* ===== Placeholder ===== */
  .ph {
    background:
      linear-gradient(135deg, rgba(191,163,114,.08) 0%, rgba(26,37,64,.04) 100%),
      var(--paper-d);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-l);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .12em;
    position: relative;
    overflow: hidden;
    min-height: 200px;
  }
  [data-placeholder] {
    background: var(--ph-bg);
    border: 1.5px dashed var(--ph-border);
    color: var(--ph-text);
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.9em;
    display: inline-block;
  }

  /* ===== Header ===== */
  .site-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    background: rgba(251,250,247,.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-l);
    z-index: 100;
  }
  /* ログイン中はWP管理バー（--wpbar-h: html:has()で32/46px・ログアウト時0px）の下に配置。
     日本語誘導バー表示時は後方の .has-ja-notice 系規則が calc() 込みで上書きする */
  body.admin-bar .site-header { top: var(--wpbar-h); }
  .header-utility {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .logo { display: flex; align-items: center; gap: 14px; min-width: 0; flex-shrink: 1; }
  .logo-mark {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--gold-xl);
    border: 1px solid var(--gold);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--gold-d);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0;
    font-family: "Helvetica Neue", system-ui, sans-serif;
  }
  .logo-image { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
  .logo-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
  .logo-text strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .logo-text-sub {
    display: block;
    color: var(--ink-l);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-cta-area { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
  .header-tel { display: none; flex-direction: column; align-items: flex-end; line-height: 1.2; white-space: nowrap; }
  .header-tel small { color: var(--ink-l); font-size: 10px; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; }
  .header-tel a {
    color: var(--ink);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-family: "Helvetica Neue", system-ui, sans-serif;
    margin-top: 2px;
    white-space: nowrap;
  }
  .header-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cta-d);
    color: #fff;
    padding: 11px 22px;
    border: 1px solid var(--cta-d);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: background .25s, color .25s, transform .25s;
    white-space: nowrap;
    min-height: 40px;
  }
  .header-btn:hover { background: var(--cta-darker); border-color: var(--cta-darker); color: #fff; transform: translateY(-1px); }

  /* ===== Hero (D2: full-bleed photo + navy scrim・安達承認 2026-08-16) ===== */
  .hero-bleed {
    position: relative;
    display: grid;
    align-items: center;
    overflow: hidden;
    padding: 150px 0 72px;
    background: var(--ink);
  }
  .hero-bleed .hero-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-bleed::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(20,28,50,.86) 0%, rgba(20,28,50,.62) 55%, rgba(20,28,50,.45) 100%);
  }
  .hero-bleed .container {
    position: relative;
    z-index: 2;
  }
  .hero-content {
    max-width: 800px;
    display: grid;
    gap: 26px;
  }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--gold-d);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin-bottom: 18px;
  }
  .hero-eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--gold);
    flex-shrink: 0;
  }
  .hero h1 {
    color: var(--ink);
    font-size: clamp(26px, 3.4vw, 36px);
    line-height: 1.55;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin-bottom: 22px;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .hero h1 .accent { color: var(--gold-d); }
  /* D2配色：.hero-bleed のときだけ白地/金へ上書き（.hero/.hero-eyebrow/.hero-lead本体は他テンプレ流用時の既定値として残す） */
  .hero-bleed h1 { color: #fff; }
  .hero-bleed h1 .accent { color: var(--gold); }
  .hero-bleed .hero-eyebrow { color: var(--gold); }
  .hero-lead {
    color: var(--ink-m);
    font-size: 14.5px;
    line-height: 2.05;
    letter-spacing: 0.04em;
    margin-bottom: 28px;
    max-width: 540px;
  }
  .hero-bleed .hero-lead { color: rgba(255,255,255,.88); }
  /* D2は .hero-content の grid gap で行間を統一するため、旧ヒーロー由来の margin-bottom を無効化
     （残すと gap と二重加算され、モックより間延びする） */
  .hero-bleed .hero-eyebrow,
  .hero-bleed h1,
  .hero-bleed .hero-lead,
  .hero-bleed .hero-actions { margin-bottom: 0; }
  .hero-checks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px 26px;
  }
  .hero-checks li {
    list-style: none;
    display: flex;
    gap: 9px;
    align-items: baseline;
    color: rgba(255,255,255,.85);
    font-size: 13px;
    letter-spacing: 0.03em;
    line-height: 1.7;
  }
  .hero-checks li::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 1px;
    background: var(--gold);
    transform: translateY(-1px) rotate(45deg);
  }
  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
  }
  .hero-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
  }
  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--cta-d);
    color: #fff;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: background .25s, transform .25s, filter .25s;
    min-height: 56px;
    box-sizing: border-box;
  }
  .btn-primary:hover { transform: translateY(-2px); filter: brightness(0.95); }
  .btn-primary svg { width: 18px; height: 18px; flex-shrink: 0; }
  .btn-line-filled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--line-green-d);
    color: #fff;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: background .25s, transform .25s, filter .25s;
    min-height: 56px;
    box-sizing: border-box;
  }
  .btn-line-filled:hover { transform: translateY(-2px); filter: brightness(1.05); }
  .btn-line-filled svg { width: 18px; height: 18px; flex-shrink: 0; }
  .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #0B6E62;
    color: #fff;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: background .25s, transform .25s, filter .25s;
    min-height: 56px;
    box-sizing: border-box;
  }
  .btn-whatsapp:hover { transform: translateY(-2px); filter: brightness(1.05); }
  .btn-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    color: var(--ink);
    padding: 0 28px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: background .25s, color .25s, transform .25s;
    min-height: 56px;
    box-sizing: border-box;
  }
  .btn-secondary:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
  .btn-ghost-light {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 30px;
    border-radius: 999px;
    border: 1.5px solid #fff;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    justify-content: center;
    text-align: center;
    transition: background .25s, transform .25s;
  }
  .btn-ghost-light svg { width: 17px; height: 17px; flex-shrink: 0; }
  .btn-ghost-light:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
  .btn-ghost-light.is-soon { opacity: .55; cursor: default; pointer-events: none; }
  /* .soon-tag の既定色(var(--ink-l))はネイビー背景上で視認性が低いため、既存の白上書きパターン
     （.btn-whatsapp.is-soon/.btn-line-filled.is-soon と同様）をここでも適用する */
  .btn-ghost-light.is-soon .soon-tag { color: #fff; }
  .hero-subnote {
    color: rgba(255,255,255,.78); /* .62はモバイル下部スクリム上で4.5:1ぎりぎりのため引き上げ */
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  /* ===== Section common ===== */
  section.std { padding: 72px 0; }
  section.std.bg-paper { background: var(--paper); }
  section.std.bg-paper-d { background: var(--paper-d); }
  .section-head { text-align: center; margin-bottom: 48px; }
  .section-eyebrow {
    display: inline-block;
    color: var(--gold-d);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    margin-bottom: 14px;
    font-family: "Helvetica Neue", system-ui, sans-serif;
    text-transform: uppercase;
  }
  .section-head h2 {
    color: var(--ink);
    font-size: clamp(22px, 3.4vw, 30px);
    line-height: 1.55;
    letter-spacing: 0.08em;
    font-weight: 700;
  }
  /* ===== 改行・可読性（経塚踏襲: word-break:keep-all ＋ text-wrap） ===== */
  .hero h1, .section-head h2, .cta-final h2 { text-wrap: balance; overflow-wrap: break-word; }
  .hero h1 .accent { white-space: nowrap; }
  .hero-lead, .lead, .es-upfront p, .es-closing, .help-closing p, .cta-final p, .offer-disclaimer { word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
  .sp-only { display: none; }
  .section-head .lead {
    margin-top: 18px;
    color: var(--ink-m);
    font-size: 13.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ===== Who We Help ===== */
  .help-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 880px;
    margin: 0 auto 28px;
  }
  .help-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 14px;
    align-items: baseline;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: 14px 20px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.85;
    letter-spacing: 0.04em;
  }
  .help-item::before {
    content: "";
    width: 12px; height: 12px;
    border: 1.5px solid var(--gold);
    border-radius: 2px;
    margin-top: 6px;
  }
  /* Workflow P1-2: 塗りカード→白背景＋濃い金茶ボーダーで経塚と並走整合 */
  .help-closing {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid var(--gold-d);
    border-radius: var(--radius);
    color: var(--ink);
  }
  .help-closing strong {
    display: block;
    color: var(--gold-d);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .help-closing p {
    color: var(--ink-m);
    font-size: 13.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }

  /* ===== What We Offer ===== */
  .offer-list {
    list-style: none;
    max-width: 880px;
    margin: 0 auto;
    padding: 0;
  }
  .offer-list li {
    padding: 22px 0;
    border-bottom: 1px solid var(--line-l);
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 18px;
    align-items: baseline;
  }
  .offer-list li:last-child { border-bottom: 0; }
  .offer-num {
    color: var(--gold);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.04em;
    font-family: "Helvetica Neue", system-ui, sans-serif;
    padding-top: 2px;
  }
  .offer-content strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    line-height: 1.65;
  }
  .offer-content span {
    color: var(--ink-m);
    font-size: 13.5px;
    line-height: 1.85;
    letter-spacing: 0.04em;
    display: block;
  }
  /* note-flat（案A）：枠なし・経塚踏襲パターン。WCAG AA 6.67:1（ink-m on bg-paper-d） */
  .offer-disclaimer {
    max-width: 880px;
    margin: 22px auto 0;
    color: var(--ink-m);
    font-size: 11.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
  .offer-disclaimer strong { color: var(--ink); font-weight: 700; }

  /* ===== English Support ===== */
  .es-upfront {
    max-width: 880px;
    margin: 0 auto 36px;
    background: #fff;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 26px 30px;
  }
  .es-upfront strong {
    display: block;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    line-height: 1.65;
  }
  .es-upfront p {
    color: var(--ink-m);
    font-size: 13.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
  .es-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto 28px;
  }
  .es-card {
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .es-card .es-num {
    display: block;
    color: var(--gold);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    font-family: "Helvetica Neue", system-ui, sans-serif;
  }
  .es-card h3 {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .es-card p {
    color: var(--ink-m);
    font-size: 13px;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
  .es-closing {
    max-width: 880px;
    margin: 0 auto;
    color: var(--ink-m);
    font-size: 13.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    text-align: center;
  }

  /* ===== How It Works ===== */
  .steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
  }
  .step-block {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    align-items: start;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }
  .step-block:last-child { border-bottom: none; padding-bottom: 0; }
  .step-num {
    color: var(--gold);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.04em;
    font-family: "Helvetica Neue", system-ui, sans-serif;
    padding-top: 4px;
  }
  .step-block h3 {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
  }
  .step-block p {
    color: var(--ink-m);
    font-size: 13px;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
  .step-block p strong { color: var(--cta-d); font-weight: 500; }

  /* ===== Walk-ins ===== */
  .walkin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto 24px;
  }
  .walkin-col {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 28px;
  }
  /* Workflow P1-2: 塗りカード→白背景＋濃い金茶ボーダーで経塚と並走整合 */
  .walkin-col.primary {
    background: #fff;
    border-color: var(--gold-d);
  }
  .walkin-col .tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--paper-d);
    color: var(--ink-l);
    margin-bottom: 12px;
    text-transform: uppercase;
  }
  .walkin-col.primary .tag {
    background: var(--gold-darker);
    color: #fff;
  }
  .walkin-col h3 {
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    line-height: 1.65;
  }
  .walkin-col p {
    color: var(--ink-m);
    font-size: 13px;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
  .walkin-col p strong { color: var(--ink); font-weight: 700; }
  /* note-label（案B）：枠なし・金茶 small-caps ラベル＋本文。WCAG AA達成 */
  .walkin-note {
    max-width: 880px;
    margin: 28px auto 0;
    font-size: 11.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    color: var(--ink-m);
  }
  .walkin-note .label {
    display: block;
    color: var(--gold-darker);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .walkin-note strong { color: var(--ink); font-weight: 700; }

  /* ===== Walk-In Guide Calendar (Kyozuka reception style) ===== */
  .reception {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    max-width: 1080px;
    margin: 28px auto 24px;
  }
  .reception-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .reception-head h4 {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
  .reception-updated { color: var(--ink-l); font-size: 11px; letter-spacing: 0.04em; }
  .reception-sub {
    color: var(--ink-m);
    font-size: 13px;
    line-height: 1.85;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
  }
  .reception-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .reception-scroll:focus-visible { outline: 2px solid var(--gold-darker); outline-offset: 2px; }
  .reception-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 12.5px;
    min-width: 520px;
  }
  .reception-table th,
  .reception-table td {
    padding: 10px 4px;
    text-align: center;
    border-bottom: 1px solid var(--line-l);
    color: var(--ink-m);
    font-weight: 400;
  }
  .reception-table th { color: var(--ink-l); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
  .reception-table th small {
    display: block;
    color: var(--ink-l);
    font-size: 9.5px;
    font-weight: 400;
    margin-top: 3px;
    letter-spacing: 0;
    font-family: "Helvetica Neue", system-ui, sans-serif;
  }
  .reception-table .time-label { text-align: left; color: var(--ink); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; white-space: nowrap; }
  .mark {
    display: inline-block;
    width: 22px; height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    border-radius: 50%;
  }
  .mark.best { color: var(--cta); }
  .mark.ok { color: #5A8A6F; }
  .mark.warn { color: #B89048; }
  .mark.ng { color: #B07060; }
  .reception-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--ink-l);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-l);
  }
  .reception-note {
    margin-top: 6px;
    color: var(--ink-l);
    font-size: 11.5px;
    line-height: 1.95;
    letter-spacing: 0.02em;
  }
  .reception-note p { margin-bottom: 4px; }
  .reception-note p:last-child { margin-bottom: 0; }
  .reception-note strong { color: var(--cta-d); font-weight: 600; }

  /* ===== English Receipts ===== */
  /* English Receipts：枠なし縦並び・経塚踏襲 */
  .receipt-box {
    max-width: 880px;
    margin: 0 auto;
  }
  .receipt-main {
    margin-bottom: 28px;
  }
  .receipt-main h3 {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    line-height: 1.65;
  }
  .receipt-main p {
    color: var(--ink-m);
    font-size: 13.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
  /* note-label（案B） — receipt-note。WCAG AA達成 */
  .receipt-note {
    font-size: 11.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    color: var(--ink-m);
  }
  .receipt-note .label {
    display: block;
    color: var(--gold-darker);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .receipt-note p {
    color: var(--ink-m);
    font-size: 11.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
  .receipt-note strong { color: var(--ink); font-weight: 700; }

  /* ===== Access ===== */
  .access-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
  }
  .access-info {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 28px;
  }
  .access-info dl {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px 18px;
    font-size: 13.5px;
    line-height: 1.85;
  }
  .access-info dt {
    color: var(--gold-d);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-top: 2px;
  }
  .access-info dd { color: var(--ink); letter-spacing: 0.04em; }
  .access-map {
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    overflow: hidden;
    background: #fff;
  }
  .access-map img { display: block; width: 100%; height: auto; }
  .access-map .ph { width: 100%; height: 100%; min-height: 280px; }
  .access-geo { display: grid; gap: 16px; margin-top: 20px; }
  .access-geo iframe { width: 100%; height: 320px; border: 0; border-radius: var(--radius-s); display: block; }
  .geo-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 16px 18px; }
  .geo-foot img { width: 104px; height: 104px; flex-shrink: 0; }
  .geo-foot > div { font-size: 12.5px; color: var(--ink-m); line-height: 1.85; letter-spacing: 0.02em; }
  .geo-foot a { color: var(--gold-darker); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

  /* ===== Hours ===== */
  .hours-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 28px;
    max-width: 600px;
    margin: 0 auto;
  }
  .hours-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
  }
  .hours-table th, .hours-table td {
    padding: 12px 8px;
    text-align: left;
    font-size: 13.5px;
    border-bottom: 1px solid var(--line-l);
    letter-spacing: 0.04em;
  }
  .hours-table th {
    color: var(--gold-d);
    font-weight: 700;
    width: 140px;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .hours-table td { color: var(--ink); }
  .hours-card .note {
    color: var(--ink-m);
    font-size: 12.5px;
    line-height: 1.85;
    letter-spacing: 0.04em;
  }

  /* ===== FAQ ===== */
  .faq-list {
    max-width: 880px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
  }
  .faq-q {
    display: block;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }
  .faq-q-summary {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 22px 20px;
    cursor: pointer;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.06em;
    list-style: none;
    position: relative;
    transition: background .2s;
  }
  .faq-q-summary:hover { background: var(--paper-d); }
  .faq-q-summary::-webkit-details-marker { display: none; }
  .faq-q-summary::marker { display: none; }
  .faq-q-summary::before {
    content: "Q";
    color: var(--gold-d);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    align-self: center;
    width: 18px;
  }
  .faq-q-summary > span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .faq-q-summary::after {
    content: "";
    margin-left: auto;
    width: 12px; height: 1px;
    background: var(--ink);
    flex-shrink: 0;
    align-self: center;
    transition: transform .3s;
  }
  details[open] > .faq-q-summary::after { transform: rotate(90deg); }
  details[open] > .faq-q-summary { background: var(--paper-d); }
  .faq-a {
    display: flex;
    gap: 16px;
    padding: 4px 20px 24px 20px;
    color: var(--ink-m);
    font-size: 13.5px;
    line-height: 2;
    letter-spacing: 0.04em;
    background: var(--paper-d);
  }
  .faq-a::before {
    content: "A";
    color: var(--gold-d);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    width: 18px;
  }
  .faq-a > div { flex: 1; min-width: 0; }

  /* ===== Contact Form ===== */
  .form-wrap {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 28px;
  }
  .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .form-field { display: flex; flex-direction: column; }
  .form-field .field-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--gold-darker);
    margin-bottom: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .form-field .field-label .req { color: var(--cta-d); margin-left: 4px; }
  .form-field .field-label .opt { color: var(--ink-l); font-weight: 400; font-size: 10px; margin-left: 6px; text-transform: none; letter-spacing: 0.04em; }
  .form-field input,
  .form-field textarea,
  .form-field select {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    letter-spacing: 0.02em;
    transition: border-color .2s, background .2s;
  }
  /* Workflow P1-3 + v7 P1: WCAG 2.4.7/2.4.11 完全達成 — 不透明 outline で3:1以上を保証 */
  .form-field input:focus,
  .form-field textarea:focus,
  .form-field select:focus {
    outline: 2px solid var(--gold-darker);
    outline-offset: 2px;
    border-color: var(--gold-d);
    background: #fff;
  }
  .form-field textarea { resize: vertical; min-height: 110px; }
  .form-field .options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 0;
  }
  .form-field .options label {
    font-weight: 400;
    color: var(--ink);
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.04em;
    cursor: pointer;
  }
  .form-field .options input { width: auto; padding: 0; margin: 0; flex-shrink: 0; }
  /* note-label（案B） — form-note。WCAG AA達成 */
  .form-note {
    margin-top: 22px;
    font-size: 11.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    color: var(--ink-m);
  }
  .form-note .label {
    display: block;
    color: var(--gold-darker);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .form-note strong { color: var(--ink); font-weight: 700; }
  .form-privacy {
    margin-top: 18px;
    font-size: 11.5px;
    color: var(--ink-l);
    line-height: 1.85;
    letter-spacing: 0.04em;
  }
  .form-submit {
    margin-top: 26px;
    text-align: center;
  }
  .btn-submit {
    background: var(--cta-d);
    color: #fff;
    border: 0;
    padding: 0 56px;
    min-height: 56px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 999px;
    cursor: pointer;
    transition: filter .25s, transform .25s;
    font-family: inherit;
  }
  .btn-submit:hover { filter: brightness(0.95); transform: translateY(-2px); }
  /* 送信ボタンだけフォーカスリングが未定義でブラウザ既定の青が出ていた（2026-08-28）。
     サイト内の他のフォーカス表示（--gold-darker）に合わせる。 */
  .btn-submit:focus-visible { outline: 2px solid var(--gold-darker); outline-offset: 3px; }

  /* ===== Final CTA ===== */
  .cta-final {
    background: var(--paper-d);
    padding: 72px 0;
    text-align: center;
    border-top: 1px solid var(--line);
  }
  .cta-final h2 {
    color: var(--ink);
    font-size: clamp(22px, 3.4vw, 28px);
    line-height: 1.65;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 16px;
  }
  .cta-final p {
    color: var(--ink-m);
    font-size: 13.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    margin-bottom: 32px;
  }
  .cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  /* ===== Disclaimer ===== */
  .disclaimer {
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: 36px 0;
  }
  .disclaimer-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 28px;
    color: var(--ink-l);
    font-size: 12px;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
  .disclaimer-inner strong {
    color: var(--ink);
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.06em;
  }

  /* ===== Footer ===== */
  .site-footer {
    background: var(--paper);
    padding: 56px 0 32px;
    border-top: 1px solid var(--line);
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 36px;
  }
  .footer-logo { width: 54px; height: 54px; object-fit: contain; margin-bottom: 12px; }
  .footer-brand h3 {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
  }
  .footer-brand p {
    color: var(--ink-m);
    font-size: 12.5px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
  }
  .footer-brand a {
    color: var(--ink);
    letter-spacing: 0.02em;
  }
  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .footer-nav h4 {
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 14px;
    text-transform: uppercase;
  }
  .footer-nav ul { list-style: none; }
  .footer-nav li { margin-bottom: 10px; }
  .footer-nav a {
    color: var(--ink-m);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    transition: color .25s;
  }
  .footer-nav a:hover { color: var(--cta); }
  .footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--ink-l);
    font-size: 11px;
    line-height: 1.85;
    letter-spacing: 0.04em;
  }

  /* ===== SP fixed CTA ===== */
  .sp-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(251,250,247,.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    display: flex;
    padding: 8px 12px;
    gap: 8px;
    z-index: 90;
  }
  /* ボタン本数（WhatsApp/LINEの有効・無効）に自動追従させる。
     grid の固定3カラムだと、1本だけ有効なときに幅1/3のまま残ってしまう。 */
  .sp-cta > * { flex: 1 1 0; min-width: 0; }
  /* 3本を等幅にし、フォームは白背景＝チャット2本を主役にする（安達判断 2026-08-31） */
  .sp-cta a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: var(--radius-s);
    background: var(--cta-d);
  }
  .sp-cta a.sp-line { background: var(--line-green-d); }
  .sp-cta a.sp-whatsapp { background: #0B6E62; }
  .sp-cta a.sp-form { background: #fff; color: var(--ink); border: 1px solid var(--gold-d); }  /* 枠線が操作部品の主な手掛かりのため 1.4.11 の3:1を満たす色にする（実測4.74:1） */
  .sp-cta svg { width: 15px; height: 15px; flex-shrink: 0; }

  /* ===== Responsive ===== */
  @media (min-width: 768px) {
    body { padding-bottom: 0; }
    .hero-bleed { min-height: 640px; padding: 180px 0 96px; }
    .hero-bleed::before {
      /* 斜めグラデだが右端でも最低 .55 を維持する（Codex実測：旧 .18/.05 では768〜1100px帯で
         右列チェック2.7:1・サブノート2.9:1までコントラスト低下＝AA割れのため） */
      background: linear-gradient(100deg, rgba(20,28,50,.88) 0%, rgba(20,28,50,.74) 45%, rgba(20,28,50,.55) 100%);
    }
    .hero-checks { grid-template-columns: 1fr 1fr; }
    .help-grid { grid-template-columns: 1fr 1fr; }
    .es-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .walkin-grid { grid-template-columns: 1fr 1fr; }
    .access-inner { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1.2fr 2fr; }
    .footer-nav { grid-template-columns: repeat(3, 1fr); }
    .sp-cta { display: none; }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-field.full { grid-column: 1 / -1; }
  }

  @media (min-width: 1024px) {
    .header-tel { display: flex; }
    section.std { padding: 96px 0; }
    .section-head { margin-bottom: 64px; }
    .cta-final { padding: 96px 0; }
  }

  @media (max-width: 767px) {
    .header-utility { height: 60px; }
    .logo-mark { width: 38px; height: 38px; font-size: 14px; }
    .logo-image { width: 40px; height: 40px; }
    /* SPは省略記号で店舗名が切れていたため、2行に折り返して全文を表示する（安達指摘 2026-08-25）。
       .logo-sep（EN の「 — 」）を隠し、.logo-suffix を改行させることで
       「Asahi Body Care / Hamby Town」「沖縄北谷あさひ整骨院 / ハンビータウン院」と分割する。 */
    .logo-text strong {
      font-size: 12px;
      letter-spacing: 0.02em;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      max-width: none;
    }
    .logo-text strong .logo-sep { display: none; }
    .logo-text strong .logo-suffix { display: block; }
    .logo-text-sub { display: none; }
    .header-btn { padding: 9px 14px; font-size: 11px; }
    .hero h1 { font-size: 24px; letter-spacing: 0.04em; }
    .sp-only { display: inline; }
    .hero-actions-row { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
    .hero-actions-row > * { width: 100%; }
    .hero-actions { align-items: stretch; }
    section.std { padding: 56px 0; }
    .section-head { margin-bottom: 36px; }
    .reception { padding: 18px 16px; }
    .reception-table { font-size: 11.5px; }
    .reception-table th, .reception-table td { padding: 6px 3px; }
    .form-wrap { padding: 22px 18px; }
    .cta-final { padding: 56px 0; }
    .cta-actions { flex-direction: column; align-items: stretch; }
    .cta-actions > * { width: 100%; }
  }

/* ===== WPテーマ追加分（P2-A・静的CSS抽出には含まれない） ===== */
/* ===== 館内マップ（figure.access-map） =====
 * 画像は1545px幅。PCは最大1080px（約70%）で読めるが、SPでは約20%となり文字が判読不能。
 * そのためSPは横スクロール（最小幅を確保して指でパン）＋タップで原寸を別タブ表示にする。 */
figure.access-map { margin: 0; padding: 0; }
.access-map .map-caption {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: #FCFAF6;
  color: var(--gold-d);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-align: center;
}
.access-map .map-frame { display: block; }
/* 横スクロール領域はキーボード操作（矢印キー）でも動かせるよう tabindex を付与している。
   その際にフォーカス位置が分かるようアウトラインを明示する。 */
.access-map .map-frame:focus-visible { outline: 2px solid var(--cta); outline-offset: -2px; }
.access-map .map-zoom { display: block; text-decoration: none; }
.access-map .map-zoom img { display: block; width: 100%; height: auto; }
.access-map .map-zoom-hint {
  margin: 0;
  padding: 9px 14px 11px;
  border-top: 1px solid var(--line);
  background: #FCFAF6;
  color: var(--ink-l);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 767px) {
  /* SPでは横スクロールで拡大表示（最小760px確保＝主要ラベルが読める倍率）。
     ヒントはスクロール領域の外に置くため常に見える。 */
  .access-map .map-frame { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .access-map .map-zoom img { width: 760px; max-width: none; }
}

/* 汎用固定ページ（page.php）の主見出し＝h1をsection-head h2と同格に */
.section-head h1 { color: var(--ink); font-size: clamp(22px, 3.4vw, 30px); line-height: 1.55; letter-spacing: 0.08em; font-weight: 700; text-wrap: balance; overflow-wrap: break-word; }
/* 言語スイッチャー（header.php） */
/* 言語スイッチャー用CSSは削除（2026-07-27 英語のみ運用へ変更・header.phpから撤去済み） */

/* ===== 日本語サイト誘導バー（header.php・.ja-notice） =====
 * 英語のみのサイトに日本語話者が来たときの受け皿。1行の細いバー。
 *
 * 重要：.site-header は position:fixed; top:0 のため、通常フローに置くと固定ヘッダーの
 * 下に隠れてしまう。そこでバーも fixed にし、ヘッダーをバーの高さ分だけ下げる。
 * ページ全体は body の padding-top で押し下げる（各ブレークポイントの .hero padding を
 * 個別に触らずに済む＝改修範囲を最小化）。
 * スクロールすると ui.js がバーを隠してヘッダーを最上部へ戻す（SPの画面占有を抑える）。 */
:root { --ja-bar-h: 36px; --wpbar-h: 0px; }
/* WordPress管理バー（ログイン中のみ・32px／782px以下は46px）の高さを html 側に持たせる。
   html に置くことで、body配下のレイアウトと html の scroll-padding-top の両方から参照できる。
   :has() 非対応環境では 0px のまま＝ログアウト時と同じ従来挙動。 */
html:has(body.admin-bar) { --wpbar-h: 32px; }
@media screen and (max-width: 782px) { html:has(body.admin-bar) { --wpbar-h: 46px; } }

.ja-notice {
  position: fixed;
  top: var(--wpbar-h); left: 0;
  width: 100%;
  height: var(--ja-bar-h);
  background: var(--ink);
  z-index: 101; /* .site-header(100) より前面 */
  transition: transform .25s ease;
}
body.has-ja-notice { padding-top: var(--ja-bar-h); }
body.has-ja-notice .site-header { top: calc(var(--wpbar-h) + var(--ja-bar-h)); transition: top .25s ease; }
/* スクロール後：バーを隠し、ヘッダーを最上部へ。
   visibility を transform 完了後に切り替えることで、隠れたリンクへのTabフォーカスを防ぐ。 */
body.ja-notice-hidden .ja-notice {
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s .25s;
}
body.ja-notice-hidden .site-header { top: var(--wpbar-h); }
/* 600px以下では管理バーが position:absolute になりスクロールで流れるため、
   バーを隠した時点（＝スクロール後）はヘッダーを最上部へ戻す。 */
@media screen and (max-width: 600px) {
  body.admin-bar.ja-notice-hidden .site-header { top: 0; }
  /* 誘導バーなし文脈（/ja/等）も同様：600px以下は管理バーがスクロールで流れるため、
     top:46pxを維持すると流出後に空白が残る。初期表示の一瞬の重なりはWP標準挙動として許容 */
  body.admin-bar:not(.has-ja-notice) .site-header { top: 0; }
}

/* アンカー遷移時のオフセット：固定クローム（管理バー＋バー＋ヘッダー）に合わせて可変。
   :has() 非対応環境は既定の80pxにフォールバックする。 */
html:has(body.has-ja-notice:not(.ja-notice-hidden)) { scroll-padding-top: calc(80px + var(--wpbar-h) + var(--ja-bar-h)); }
html:has(body.admin-bar.ja-notice-hidden) { scroll-padding-top: calc(80px + var(--wpbar-h)); }
/* 600px以下は管理バーが流れて消えるため、バー非表示時は管理バー分を足さない */
@media screen and (max-width: 600px) {
  html:has(body.admin-bar.ja-notice-hidden) { scroll-padding-top: 80px; }
}

/* 汎用ページ（page.php / 404.php / index.php）の先頭セクションが、SPで固定ヘッダー
   （60px+境界1px）に約5px潜り込む既存の不具合を解消する。LPは .hero が独自の
   padding-top を持つため対象外。 */
@media (max-width: 767px) {
  main > section.std:first-child { padding-top: 76px; }
}

.ja-notice .container { padding-top: 0; padding-bottom: 0; }
.ja-notice-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;      /* 常に1行（高さを固定するため折り返させない） */
  white-space: nowrap;
  gap: 10px;
  height: var(--ja-bar-h);
  color: #fff;            /* var(--ink)#1A2540 上で白＝コントラスト比 約15:1 */
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
}
.ja-notice-link:hover .ja-notice-label,
.ja-notice-link:focus-visible .ja-notice-label { text-decoration-thickness: 2px; }
.ja-notice-link:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ja-notice-label {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ja-notice-site { color: rgba(255, 255, 255, .82); font-size: 11.5px; }
.ja-notice-link svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 480px) {
  .ja-notice .container { padding-left: 14px; padding-right: 14px; }
  .ja-notice-link { font-size: 11.5px; gap: 7px; }
  .ja-notice-site { font-size: 10.5px; }
  .ja-notice-site .ja-pref { display: none; } /* 狭幅では「沖縄北谷」を省いて1行を維持 */
}
/* 導線ボタンのプレビュー「準備中」状態（hamby_cta_preview・P?-新規）
 * WhatsApp・英語LINEのURL未設定時、Customizerで「導線ボタンのプレビュー表示」がONの間だけ、
 * 実リンク（<a>）の代わりに同じ見た目・同じクラスの非クリック要素（<span class="... is-soon">）を表示する。
 * .btn-whatsapp / .btn-line-filled は要素非依存のクラスなのでそのまま流用され、padding/border-radius/
 * font はベースクラスから継承される。SP固定CTA（.sp-cta a 系）だけは a 要素前提のレイアウト定義のため、
 * span 用に .sp-cta .is-soon でレイアウト/配色を別途用意する。 */
.is-soon {
  cursor: default;
  pointer-events: none;
}
.btn-whatsapp.is-soon,
.btn-line-filled.is-soon {
  background: var(--ink-l);
}
/* SP固定CTAの準備中: 1列幅が約93〜125pxのため、アイコン＋ラベル＋タグを縦積みにして溢れを防ぐ */
.sp-cta .is-soon {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius-s);
  background: var(--ink-l);
  color: #fff; /* rgba(.92)は#6B7280上で4.39:1のためAA不足 → #fffで4.83:1 */
  text-align: center;
  line-height: 1.25;
}
.sp-cta .is-soon .soon-tag {
  display: block;
  margin-left: 0;
  font-size: 9px;
  letter-spacing: 0.04em;
}
.soon-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-l);
  white-space: nowrap;
}
.btn-whatsapp.is-soon .soon-tag,
.btn-line-filled.is-soon .soon-tag,
.sp-cta .is-soon .soon-tag {
  color: #fff;
}

/* ===== reCAPTCHA v3（2026-08-25 設定） =====
 * バッジは既定で画面右下に固定表示されるが、SP固定CTA（.sp-cta）と重なるため非表示にする。
 * Googleの規約上、バッジを隠す場合はフォーム付近に帰属表示を出すことが条件のため、
 * front-page.php / page-ja.php に .recaptcha-note を配置している（セットで運用すること）。 */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note {
  margin-top: 14px;
  color: var(--ink-l);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-align: center;
}
.recaptcha-note a { color: var(--ink-m); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Contact Form 7 互換（2026-08-28 実測にもとづく修正）

   CF7は入力欄を <p><label><span class="wpcf7-form-control-wrap"> で包み、
   input に size="40"、textarea に cols="40" を付けて出力する。
   テーマ側は静的モックの <div class="form-field"><input> を前提に書かれており
   width を指定していなかったため、実測（viewport 386px）で次の破綻が出ていた。

     .form-grid   292px（正しい）
     .form-field  347px  ← 親グリッドを55px超過。viewport も8px超過
     input        336px（size="40" の固有幅がそのまま出ていた）
     select       250px  ← 入力欄だけ幅が不揃い

   body の overflow-x:hidden が超過分を隠すため一見崩れて見えないが、
   実際はフォームカードの右パディングが潰れ、入力欄の右端が切れていた。
   ========================================================================== */
.form-field,
.form-field > label,
.form-field p,
.form-field .wpcf7-form-control-wrap { min-width: 0; }

.form-field > label { display: block; width: 100%; }
.form-field p { margin: 0; width: 100%; }
.form-field .wpcf7-form-control-wrap { display: block; width: 100%; }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* チェックボックス群は幅100%にしない（横に伸びるため）。
   静的モックの .options と同じ見た目に揃える。 */
.form-field .wpcf7-checkbox { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.form-field .wpcf7-list-item { margin: 0; }
.form-field .wpcf7-list-item label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ink); cursor: pointer; }
.form-field input[type="checkbox"] { width: auto; min-width: 0; margin: 0; }

/* CF7のエラー・応答表示をテーマのトンマナに合わせる
   （既定のままだと赤枠＋素のsans-serifでページから浮く） */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: var(--cta-d);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.form-field input.wpcf7-not-valid,
.form-field select.wpcf7-not-valid,
.form-field textarea.wpcf7-not-valid { border-color: var(--cta-d); background: #fff; }

.wpcf7-response-output {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.8;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { border-color: var(--cta-d); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--line-green-d); }

/* ヒーローのチャット導線（WhatsApp / LINE）。
   SPでは2本を横並び1行に収め、縦積み3本でファーストビューを圧迫しないようにする。 */
.hero-chat-group { display: flex; gap: 12px; }
@media (max-width: 767px) {
  .hero-chat-group { width: 100%; }
  .hero-chat-group > * { flex: 1 1 0; min-width: 0; }
}

/* ヒーローのチャットボタン：SPでは幅が足りず "Chat on WhatsApp" が必ず2行になるため、
   接頭辞を落として1行に収める（下部固定CTAの「アイコン＋短いラベル」と流儀を揃える）。
   デスクトップは横幅に余裕があるので "Chat on" を残す。 */
@media (max-width: 767px) {
  .hero-chat-group .btn-ghost-light { padding-left: 14px; padding-right: 14px; gap: 7px; }
  .hero-chat-group .btn-prefix { display: none; }
}

/* ===== 館内マップの横スクロール手がかり（本部 宗源氏の指摘・2026-08-28） =====
   SPでは画像を760px幅で表示して横スクロールさせているが、
   スクロールできること自体が画面から分からなかった。
   両端のフェードと矢印で「まだ先がある」ことを示し、
   端まで来たらその側のフェードを消す（状態はmap.jsが付与）。 */
.map-scroll-wrap { position: relative; }
.map-zoom-hint .hint-sp { display: none; }
/* 矢印はSPの横スクロール時のみ使う。既定で非表示にしないと、
   PC幅ではスタイルの当たらない裸の文字としてマップ下に出てしまう。 */
.map-scroll-cue { display: none; }

@media (max-width: 767px) {
  .map-zoom-hint .hint-sp { display: inline; }

  .map-scroll-wrap::before,
  .map-scroll-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 1;
  }
  .map-scroll-wrap::before {
    left: 0;
    background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,.9));
  }
  .map-scroll-wrap::after {
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.9));
  }
  /* 端に達した側のフェードは消す */
  .map-scroll-wrap.at-start::before { opacity: 0; }
  .map-scroll-wrap.at-end::after { opacity: 0; }

  /* 右端に矢印を出して、横に動かせることを明示する */
  .map-scroll-wrap .map-scroll-cue {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(26,37,64,.72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 2;
  }
  .map-scroll-wrap.at-end .map-scroll-cue { opacity: 0; }
}

/* ===== チャット導線を主役にする配色（安達判断 2026-08-31） =====
   ヒーローのWhatsApp/LINEを輪郭線から塗りへ。暗いヒーロー写真の上でも
   背景と分離するよう、白い枠線は残す。実際の値は下の各宣言のコメント参照。 */
.btn-ghost-light.wa { background: #0F7A6C; }  /* 白文字 5.22:1 実測・AA達成。
   旧 #0B6E62 は 6.14:1 と暗く、LINE #048138（5.00:1）と並べたとき
   WhatsApp側だけくすんで見えていたため、明度をLINEに寄せた。
   WhatsApp公式teal #128C7E は 4.14:1 でAA未達のため不採用。 */
.btn-ghost-light.line { background: var(--line-green-d); }

/* 最終CTAのフォームボタン。--paper-d の明るい背景に置く輪郭線ボタン。 */
.btn-outline-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--gold-d);  /* 実測 4.2:1 on --paper-d・WCAG 1.4.11 */
  padding: 0 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  min-height: 56px;
  box-sizing: border-box;
  text-decoration: none;
  transition: border-color .25s, transform .25s;
}
.btn-outline-ink:hover { border-color: var(--gold-d); transform: translateY(-2px); }
.btn-outline-ink:focus-visible { outline: 2px solid var(--gold-darker); outline-offset: 3px; }

/* ヒーロー下段のフォーム導線。チャット2本を主役にしたうえで、
   フォームも残すための控えめなリンク（安達判断 2026-08-31）。
   タップ領域を確保するため min-height 44px を確保する。 */
.hero-form-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  margin-top: 4px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness .2s;
}
.hero-form-link:hover { text-decoration-thickness: 2px; }
.hero-form-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* Access欄のリンク識別（2026-08-31 Codexレビュー指摘）。
   グローバルの a { color: inherit; text-decoration: none } により、
   LINEアイコンを外したあと本文と見分けがつかなくなっていた。 */
.access-info dd a {
  color: var(--gold-darker);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.access-info dd a:hover { text-decoration-thickness: 2px; }

/* フッターのプライバシーポリシー導線（2026-08-31）。
   グローバルの a { color: inherit; text-decoration: none } でリンクと分からなくなるため、
   下線を明示する。フッターは暗い背景のため色は継承のままで十分なコントラストがある。 */
.footer-privacy-link { text-decoration: underline; text-underline-offset: 3px; }
.footer-privacy-link:hover { text-decoration-thickness: 2px; }
.footer-sep { opacity: .5; margin: 0 4px; }