/* =====================================================================
   週一メンエスおじさん — site.css（editorial / 静かな編集デザイン）

   紙の地・墨色の文字・ボルドー1色。明朝は「名前」（サイト名・h1・h2・都府県名・
   18px 以上の数字）にだけ使い、本文と UI はゴシック。区切りは罫線で、箱は
   「開閉するもの・入力欄・補足の囲み」にしか使わない。

   外部フォント・画像（店舗ロゴを除く）・JS（検索ページを除く）は使わない。
   1本の CSS を複数の作業単位で分担して編集するため、下の section の区切りの
   中だけを触る。画面幅ごとの指定もその section の中に書き、ファイル末尾に
   全体の @media 節は作らない（どこに何があるかを1か所で追えるように）。
   ===================================================================== */

/* ==== section: tokens ==== */
:root {
  color-scheme: light dark;

  /* color — light */
  --paper: #ffffff;          /* ページの地 */
  --paper-2: #f3f2f0;        /* 表の見出し・注記の地・フッター */
  --surface: #ffffff;        /* 面（パネル・入力欄・名簿・料金の囲み）。地と同じ白で、枠線で区切る */
  --ink: #1f1b17;            /* 本文 17.1:1（paper） */
  --sub: #544c44;            /* 補足 8.4:1 */
  --muted: #6f675e;          /* 控えめ 5.6:1（paper）/ 5.0:1（paper-2） */
  --rule: #e4e1dd;           /* 髪の毛ほどの細い線（飾り） */
  --rule-strong: #c7c2bb;    /* チップ・ボタンの枠（文字ラベルがあるので飾り扱い） */
  --field-line: #8b857c;     /* 入力欄の枠 3.7:1（paper）/ 3.3:1（paper-2）── WCAG 1.4.11 を満たす */
  --accent: #7b2a3b;         /* ボルドー 9.4:1（paper / surface） */
  --accent-ink: #ffffff;     /* アクセントの地に載せる文字 9.4:1 */
  --accent-soft: #f4e8e7;    /* 出勤バッジ・レポートのある名簿の行・選択中の地 */
  --accent-line: #dcbcc0;    /* アクセントの淡い線、ヒストグラムの範囲内の棒 */
  --primary-bg: #7b2a3b;     /* 主ボタン・選択中のタグ・件数バーのボタン */
  --primary-ink: #ffffff;
  --logo-plate: #ffffff;     /* ロゴの台紙（ダークでも明るいまま） */
  --logo-plate-dark: #23201c;/* 白い文字のロゴ用の台紙（salon_logos.csv の plate=dark） */
  --hover: rgba(123, 42, 59, .045);
  --scrim: rgba(31, 27, 23, .42);

  /* type */
  --serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho,
           "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", "BIZ UDPMincho", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --latin: Georgia, "Times New Roman", var(--serif);   /* 英字の見出しラベルと目次の見出しだけ */
  --fs-xs: 13px;   /* 最小（表の中のバッジも13px）。例外は docs/design.md §3 の1つだけ（文字の台紙の店名） */
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;   /* h2 */
  --fs-2xl: 26px;  /* h1 */
  --fs-hero: 31px; /* ホームの h1 */
  --fs-salon: 30px;/* 店舗名（h1 の1段目） */
  --lh-body: 1.85;
  --lh-ui: 1.5;
  --lh-tight: 1.35;

  /* space（4の倍数） */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 20px;

  /* shape */
  --r1: 4px;       /* チップ・タグ・ロゴの台紙 */
  --r2: 8px;       /* ボタン・パネル・名簿・料金の囲み */
  --r-pill: 999px; /* バッジだけ（並び替えの枠は --r2） */
  --shadow-pop: 0 18px 40px -18px rgba(45, 30, 20, .35), 0 1px 0 rgba(45, 30, 20, .04);
  --shadow-bar: 0 -8px 24px -12px rgba(45, 30, 20, .25);

  /* layout */
  --wrap-wide: 1080px;  /* ヘッダー・本文・フッターの共通の外枠（全ページ同じ） */
  --measure: 720px;     /* 文章の段の最大幅（外枠の中で左寄せ） */
  --row1: 48px;         /* スマホ: サイト名の段（スクロールで上に消える） */
  --bar-h: 46px;        /* 画面に残るメニューの段の高さ */
  --jump-h: 44px;       /* 店舗ページのページ内目次の高さ */
}
@media (max-width: 359px) { :root { --gutter: 16px; } }
@media (min-width: 720px) {
  :root { --gutter: 32px; --fs-xl: 24px; --fs-2xl: 32px; --fs-hero: 44px; --fs-salon: 40px; }
}
@media (min-width: 960px) {
  :root { --row1: 0px; --bar-h: 64px; }   /* PC はヘッダー1段・64px を丸ごと固定 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15130f;
    --paper-2: #1d1a16;
    --surface: #1f1c18;
    --ink: #ede7dd;          /* 15.1:1 */
    --sub: #c4bbae;          /* 9.8:1 */
    --muted: #a0968a;        /* 6.4:1（paper）/ 5.8:1（surface） */
    --rule: #332e28;
    --rule-strong: #4a433a;
    --field-line: #7a7064;   /* 3.5:1（surface）/ 3.8:1（paper） */
    --accent: #c9a0a3;       /* くすんだローズ 8.0:1（paper）/ 7.3:1（surface）。ホットピンクにしない */
    --accent-ink: #1a1210;
    --accent-soft: #2a2022;  /* accent 6.8:1 / ink 12.9:1 */
    --accent-line: #5b3f44;
    --primary-bg: #ede7dd;   /* 主ボタンは生成りの地に墨色の文字 15.1:1。ピンクの面を作らない */
    --primary-ink: #15130f;
    --logo-plate: #f6f2ea;
    --logo-plate-dark: #2a2621;
    --hover: rgba(201, 160, 163, .07);
    --scrim: rgba(0, 0, 0, .6);
    --shadow-pop: 0 18px 40px -18px rgba(0, 0, 0, .7);
    --shadow-bar: 0 -8px 24px -12px rgba(0, 0, 0, .6);
  }
}

/* ==== section: base ==== */
*, *::before, *::after { box-sizing: border-box; }
/* JS が hidden 属性で出し入れする要素（検索ページ）を、display を持つクラスが
   上書きして見えてしまわないようにする */
[hidden] { display: none !important; }
/* 画面上部に残る部分（メニューの段＋店舗ページの目次）の裏に、#id で飛んだ先の
   見出しが隠れないようにする */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
       scroll-padding-top: calc(var(--bar-h) + 12px); }
/* 目次の段（.jumpnav）があるのは店舗ページだけ。全ページで目次の高さを足していたときは、
   ホームの #areas や検索の「結果を見る」で飛んだ先が 44px 下にずれ、前の節が見えていた */
html:has(.jumpnav) { scroll-padding-top: calc(var(--bar-h) + var(--jump-h) + 12px); }
/* html の地はフッターと同じ色にする。本文の短いページでは画面の下がフッターより
   余り、html の地がフッターの下に帯として見えるため（body は下で --paper を明示する） */
html { background: var(--paper-2); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  line-break: strict;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--rule-strong);
    text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
strong, b { font-weight: 700; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s2); z-index: 99; background: var(--surface); padding: var(--s2) var(--s3); }

/* 見出し・UI にだけ詰め組み（本文には掛けない ── 長文で字間が詰まると読みにくい） */
h1, h2, h3, .wordmark, .gnav-top, .btn, .chip, .eyebrow, .badge, .srch-tag, .jumpnav a {
  font-feature-settings: "palt";
}
/* 明朝は「名前」だけ。h1 はどのページでも同じ書体にする */
h1 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: var(--fs-2xl);
     line-height: 1.42; letter-spacing: .03em; }
h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: var(--fs-xl); line-height: 1.45; letter-spacing: .04em; }
h3 { margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.5; }
h1, h2, h3 { text-wrap: balance; word-break: auto-phrase; }
/* 行末に1〜2文字だけ残る改行を防ぐ（対応していないブラウザでは効かないだけ） */
p, li, dd, figcaption { text-wrap: pretty; }
/* 1〜3行の短い注記・説明は文節で折り返す。「そのう／ち」「レ／ポート」のように
   語の途中で切れると、短い文ほど壊れて見えるため。長い本文は字単位のまま
   （文節で折ると行末がでこぼこになる）。.dotlist li と .finenote には掛けない ──
   試したところ1行が長すぎる行ができた */
.figures-note, .hero-lede, .steps-d, .sec-lede, .srch-hint, .srch-note, .guidelink-d, .helpbox-d,
.agenotice, .sitefoot-notes p, .intro-note, .rosterbox-d, .btn, .pagehead-meta {
  word-break: auto-phrase;
}
/* 画面には出さず、読み上げにだけ渡す文字（店舗ページ・検索ページのラベルの補足などで使う） */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 表の共通の指定。縦の罫線は引かない（罫線で区切り、箱で区切らない） */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-sm); line-height: 1.4;
        font-variant-numeric: tabular-nums; }
th, td { padding: 10px var(--s3); border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; vertical-align: middle; }
thead th { background: var(--paper-2); font-size: var(--fs-xs); font-weight: 600; color: var(--sub); letter-spacing: .04em; }
/* 見出しと値の位置をそろえる（数字の列は右寄せ） */
th.num, td.num { text-align: right; }

/* ==== section: icons ==== */
/* アイコンは CSS のマスクで描く。HTML に <svg> を並べると、数百行の名簿や検索結果の
   ページで容量が膨らむため。色は currentColor に従う */
.i { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.125em;
     background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-down   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.i-go     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.i-ext    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 4.5h6v6M11.5 4.5L4.5 11.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.i-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10.5 10.5L14 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
details[open] > summary .i-down { transform: rotate(180deg); }
.i-down { transition: transform .2s ease; }
@media (forced-colors: active) { .i { background: CanvasText; } }

/* ==== section: layout ==== */
/* ヘッダー・パンくず・本文・フッターの左端を、どの幅でもそろえる。
   文章のページはこの枠の中で .prose-layout を使って左寄せにする */
.page { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--gutter) var(--s8); }

/* 英字の見出しラベル。HTML には先頭だけ大文字で書き、大文字化は CSS に任せる
   （verify の英字の隠語検査は大文字と小文字を区別するので、HTML に大文字の連なりを書かない） */
.eyebrow { display: flex; align-items: center; margin: 0 0 var(--s2); font-family: var(--latin);
           font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
           line-height: 1.4; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; margin-right: 10px; }
.eyebrow-sep { width: 1px; height: 10px; background: currentColor; opacity: .5; margin: 0 10px; }

.pagehead { padding: var(--s4) 0 var(--s5); }
/* 見出しの直下に線、説明文は線の下（サイト全体の規則。docs/design.md §1-4・D11） */
.pagehead > h1 { padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); }
.pagehead-meta { margin: var(--s3) 0 0; color: var(--sub); font-size: var(--fs-sm); line-height: var(--lh-ui);
                 font-variant-numeric: tabular-nums; }
.pagehead-meta b { font-size: var(--fs-md); color: var(--ink); }

/* 節は見出しが先、その**直下**に墨色の 1px の線。説明文（.sec-lede）は線の下に置く
   ── 線は「見出し」と「それ以降」の境で、説明文は見出しではなく中身の側（持ち主の指示。2026-10-04） */
.sec { margin-top: var(--s7); }
.sec--tight { margin-top: var(--s4); }
.sec-head { margin-bottom: var(--s4); }
.sec-head > h2 { padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); }
.sec-count { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
             letter-spacing: .02em; margin-left: var(--s3); font-variant-numeric: tabular-nums; }
.sec-lede { margin: var(--s3) 0 0; font-size: var(--fs-sm); color: var(--sub); line-height: 1.7; }
.more { margin: var(--s5) 0 0; }
.finenote { margin: var(--s4) 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; }
.notice { background: var(--paper-2); padding: var(--s3) var(--s4); border-radius: var(--r2); font-size: var(--fs-sm); }

/* dl の補足の囲み（検索の noscript・スコアの説明・スコア一覧） */
.howto { margin: var(--s5) 0; padding: var(--s4); background: var(--paper-2); border-radius: var(--r2);
         font-size: var(--fs-sm); line-height: 1.7; }
.howto dl { margin: 0; }
.howto dt { font-weight: 700; margin-top: var(--s3); }
.howto dt:first-child { margin-top: 0; }
.howto dd { margin: 2px 0 0; color: var(--sub); }

/* 行全体がリンクになる案内の箱 */
.guidelink, .helpbox { display: grid; grid-template-columns: minmax(0, 1fr) 16px; column-gap: var(--s3); align-items: center;
                       padding: var(--s4); background: var(--surface); border: 1px solid var(--rule);
                       border-radius: var(--r2); text-decoration: none; line-height: var(--lh-ui); }
.guidelink-t, .helpbox-t { font-weight: 700; }
.guidelink-d, .helpbox-d { grid-column: 1; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.guidelink .i-go, .helpbox .i-go { grid-column: 2; grid-row: 1 / 3; color: var(--muted); }
@media (hover: hover) {
  .guidelink:hover, .helpbox:hover { border-color: var(--rule-strong); background: var(--hover); }
  .guidelink:hover .i-go, .helpbox:hover .i-go { color: var(--accent); }
}

/* 文字の間の区切り（中黒）。要素の間の空白に頼らない（trim_blocks で消えるため）。
   旧モックの .dot はスコアのグラフの <circle class="dot"> とぶつかるので改名した */
.sep { display: inline-block; flex: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor;
       opacity: .55; margin: 0 .5em; vertical-align: middle; }
/* 折り返す並び（レポート本数・在籍・新人、年齢・身長・カップ）の区切り。
   各項目が自分の頭に点を1つ持ち、入れ物を点1つ分（幅 3px ＋ 左右の余白 .5em×2）
   左へずらしてその分を切り取る。こうすると各行の先頭の点だけが隠れ、折り返しても
   点が行末・行頭に取り残されない（span.sep を項目の間に挟む方式では避けられなかった）。
   項目の中では折り返さない（「Gカッ／プ」を防ぐ）。
   リンクを並べる .seplist（店舗の見出しの「最寄り」.salonhead-where、ホームの「その他のエリア」
   .region-other）は下の別の方式（column-gap ＋ overflow-x: clip）で点を隠すので、入れ物のずらしを掛けない。
   両方が効くと、左へずらした分だけ最初の駅名の頭（「新宿」の「新」）が切れた */
.seplist:not(.salonhead-where > *, .region-other > *), .salonrow-meta, .rep-spec, .newrep-spec {
  display: flex; flex-wrap: wrap; align-items: center;
  margin-left: calc(-1em - 3px); clip-path: inset(-6px -6px -6px calc(1em + 3px));
}
.seplist > *, .salonrow-meta > *, .rep-spec > *, .newrep-spec > * { white-space: nowrap; }
.seplist > *::before, .salonrow-meta > *::before, .rep-spec > *::before, .newrep-spec > *::before {
  content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 .5em; border-radius: 50%;
  background: currentColor; opacity: .55; vertical-align: middle;
}
/* リンクを並べる .seplist。リンクは押せる範囲を上下に 12px 広げている（§9 の 44px）ので、
   上の clip-path（上下 6px で切る）を掛けると押せる範囲とフォーカスの輪郭が削れる。
   代わりに区切りの点を各項目の左の隙間に描き、並びの左端より外に出た点（＝行頭の点）を
   overflow-x: clip で切り落とす。「・公式サイト」が行の頭に来ない。縦は clip しない。
   親（.salonhead-where / .region-other）はラベルとこの並びを横に置く flex で、並びが折り返すと
   2行目はラベルの右から始まる（ぶら下げ） */
.salonhead-where .seplist, .region-other .seplist {
  display: flex; flex-wrap: wrap; align-items: baseline; flex: 1 1 0; min-width: 0;
  column-gap: 1em; overflow-x: clip;
  /* clip の境界を左に 4px 広げて、1件目のリンクのフォーカスの輪郭が左で欠けないようにする。
     区切りの点は項目の 6.5〜9.5px 左にあるので、4px 広げても行頭の点は切られたまま */
  padding-left: 4px; margin-left: -4px;
}
.salonhead-where .seplist > span, .region-other .seplist > span { position: relative; }
.salonhead-where .seplist > span::before, .region-other .seplist > span::before {
  content: ""; position: absolute; left: calc(-.5em - 1.5px); top: calc(50% - 1.5px);
  width: 3px; height: 3px; margin: 0; border-radius: 50%; background: currentColor; opacity: .55;
}
/* 「Gカッ／プ」のような単語の途中の改行を防ぐ */
.nw { white-space: nowrap; }

/* 行き先の「ワクスト ↗」。ホーム・店舗・検索の3つで共通（価格は出さない。2026-10-04） */
.dest { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); color: var(--muted);
        white-space: nowrap; line-height: 1.3; }

/* ==== section: masthead ==== */
/* スマホ: 1段目（サイト名）はスクロールで上に消え、2段目（メニュー）だけが画面上部に
   残る。top を「1段目の高さぶんのマイナス」にすると、ヘッダー全体が sticky のまま
   1段目だけ画面の外へ出る。どこからでも「条件で探す」「買い方」に1タップで行ける。
   ※ .masthead / .gnav-list とその祖先に transform / filter / backdrop-filter / contain /
     will-change を付けないこと。position:fixed の基準が変わり、幕とパネルが壊れる */
.masthead { position: sticky; top: calc(-1 * var(--row1)); z-index: 40; background: var(--paper);
            box-shadow: 0 1px 0 var(--rule); }          /* border は使わない（高さの計算を狂わせない） */
.masthead-in { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--gutter);
               display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.wordmark { display: flex; align-items: center; gap: 10px; min-height: var(--row1); min-width: 0; text-decoration: none; line-height: 1.2; }
/* 「週」の印。aria-hidden なので読み上げはサイト名だけ。
   塗りは主ボタンと同じトークン。ダークでは生成りの地になり、ピンクの面を作らない */
.wordmark-seal { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r1);
                 background: var(--primary-bg); color: var(--primary-ink); font-family: var(--serif); font-size: 17px; font-weight: 600; }
.wordmark-text { display: flex; flex-direction: column; min-width: 0; }
.wordmark-ja { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: .08em; white-space: nowrap; }
.wordmark-sub { display: none; font-size: var(--fs-xs); color: var(--muted); letter-spacing: .06em; margin-top: 2px; }
.gnav { flex: 1 1 100%; margin: 0 calc(var(--gutter) * -1); box-shadow: inset 0 1px 0 var(--rule); }
/* メニューの段に重なりの基準を作る。開いたときの幕（z-index:-1）はこの中に閉じ、
   段そのもの（地の色あり）は幕より手前、パネル（z-index:1）はさらに手前に来る */
.gnav-list { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0;
             display: grid; grid-template-columns: 1.2fr 1fr .8fr; }
/* publish.scores=true で「ばらつきで選ぶ」が入ると4項目になる。列を項目数に合わせて等分する */
.gnav-list:has(> li:nth-child(4)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.gnav-list > li + li { box-shadow: inset 1px 0 0 var(--rule); }
.gnav-top { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
            min-height: var(--bar-h); padding: 0 var(--s3); background: var(--paper);
            font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; color: var(--ink);
            text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; -webkit-user-select: none; user-select: none; }
/* サイト名とメニューのフォーカスの枠は内側に描く。ヘッダーは sticky で画面の上端（y=0）に
   貼り付き、隣の項目も地の色で塗られているので、外側に描いた枠は上端・下の段・隣の項目に
   塗りつぶされて辺が欠けていた。.gnav-top に z-index を付けて前に出す方法は使わない ──
   重なりの基準ができて、開いたときの幕（::before, z-index:-1）が summary の中に閉じ込められる */
.masthead .wordmark:focus-visible, .gnav-top:focus-visible { outline-offset: -3px; }   /* フッターのサイト名は外側のまま */
.gnav-top::-webkit-details-marker { display: none; }
.gnav-top::marker { content: ""; }
.gnav-s { display: none; }
/* 400px 未満では「エリアから探す」を「エリア」にして、320px でも項目名を1行に収める */
@media (max-width: 399px) { .gnav-l { display: none; } .gnav-s { display: inline; } .gnav-top { padding: 0 var(--s2); } }
.gnav-top[aria-current], .gnav-drop[data-here] > .gnav-top { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.gnav-drop[open] > .gnav-top { color: var(--accent); background: var(--surface); }
/* 開いている間の幕。<summary> の一部なので、幕を押すとメニューが閉じる（JS 不要） */
.gnav-drop[open] > .gnav-top::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--scrim); cursor: default; }
.gnav-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: var(--surface);
              border-bottom: 1px solid var(--rule); box-shadow: var(--shadow-pop);
              max-height: calc(100vh - 118px); max-height: calc(100dvh - var(--row1) - var(--bar-h) - 24px);
              overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 8px; }
/* キーボードの操作でフォーカスがパネルの外（条件で探す・パンくずなど）へ出たら、
   パネルと幕を見た目の上で閉じる。開いたままだと、フォーカスした要素が幕とパネルの
   裏に隠れる（WCAG 2.4.11）。検索ページ以外は JS を使わない方針なので、<details> の
   open 自体は外せない ── :has() と :focus-visible で「表示だけ」を消している。
   :focus-visible はマウス・タッチのフォーカスでは付かないので、指やマウスで開いた
   パネルがこれで閉じることはない。Esc キーで閉じられないのは JS を使わない方針の
   既知の制約（summary に戻って Enter／Space で閉じる） */
html:has(:focus-visible:not(.gnav-drop *)) .gnav-drop[open] > .gnav-panel,
html:has(:focus-visible:not(.gnav-drop *)) .gnav-drop[open] > .gnav-top::before { display: none; }
.gnav-panel-in { max-width: var(--wrap-wide); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s5); }
.gnav-panel-label { margin: 0 0 var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.gnav-regions { display: grid; gap: var(--s4); }
.gnav-region-head { display: flex; align-items: center; gap: var(--s3); min-height: 44px; margin: 0 0 var(--s3);
                    text-decoration: none; border-bottom: 1px solid var(--rule); }
.gnav-region-name { font-family: var(--serif); font-size: var(--fs-lg); font-weight: 600; letter-spacing: .06em; }
/* 件数は .sep で区切る1行の並び。折り返すと点が行末に残るので、塊のまま折らない */
.gnav-region-n { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gnav-region-head .i-go { margin-left: auto; color: var(--muted); }
.gnav-all { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: var(--s5);
            padding: 0 var(--s4); border: 1px solid var(--rule-strong); border-radius: var(--r2);
            text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
@media (hover: hover) {
  a.gnav-top:hover, .gnav-drop:not([open]) > .gnav-top:hover { color: var(--accent); }
  a.gnav-region-head:hover .gnav-region-name { text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: .22em; }
  .gnav-all:hover { border-color: var(--ink); background: var(--hover); }
}
@media (min-width: 960px) {
  /* PC はヘッダー1段（64px）を丸ごと画面上部に残す（--row1 が 0 になる） */
  .masthead-in { flex-wrap: nowrap; }
  .wordmark { min-height: var(--bar-h); }
  .wordmark-ja { font-size: 22px; }
  .wordmark-sub { display: block; }
  .gnav { flex: none; margin: 0; box-shadow: none; }
  /* 項目の間に隙間を空けない。幕（z-index:-1）は .gnav-list 自身の地より手前に描かれるので、
     隙間があるとそこから幕が透けて、開いている間だけメニューの段が縞になる */
  .gnav-list { display: flex; gap: 0; }
  .gnav-list > li + li { box-shadow: none; }
  .gnav-top { min-height: var(--bar-h); padding: 0 var(--s4); font-size: 15px; }
  .gnav-drop[open] > .gnav-top { background: var(--paper); }
  /* 幕はヘッダーの下から敷く。全画面に敷くと、ヘッダーは暗くなるのにメニュー項目の裏
     （.gnav-list の地）だけが明るく残り、切り抜いたように見えた。ヘッダー全体を明るいまま
     にして、暗くするのは下のページだけにする（幕を押すと閉じるのは変わらない） */
  .gnav-drop[open] > .gnav-top::before { inset: var(--bar-h) 0 0 0; }
  /* パネルは画面幅いっぱいに出す。基準を画面にするため fixed にする */
  .gnav-panel { position: fixed; top: var(--bar-h); max-height: calc(100vh - 96px); max-height: calc(100dvh - var(--bar-h) - 32px); }
  .gnav-regions { grid-template-columns: 2fr 1fr 1fr; column-gap: var(--s6); row-gap: var(--s5); }
  .gnav-region:first-child { grid-row: span 2; }
  .gnav-all { display: inline-flex; gap: var(--s4); }
}

/* ==== section: crumb ==== */
/* 幅が足りないときは折り返さずに横へ送る（2行になるとページの頭が下がるため） */
.crumb { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.crumb::-webkit-scrollbar { display: none; }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; white-space: nowrap;
            font-size: var(--fs-xs); color: var(--muted); }
/* li にも nowrap を直に書く。base の「li { text-wrap: pretty }」が ol から受け継いだ nowrap を
   打ち消し、長い店名のページでパンくずが2〜3行に折れて「ホー／ム」のように語の途中でも切れたため */
.crumb li { display: flex; align-items: center; white-space: nowrap; }
.crumb li + li::before { content: ""; flex: none; width: 5px; height: 5px; margin: 0 10px;
                         border-top: 1px solid var(--rule-strong); border-right: 1px solid var(--rule-strong);
                         transform: rotate(45deg); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
/* フォーカスの枠は内側に描く。.crumb は横に送る入れ物（overflow-x:auto）なので、
   外側に描いた枠は上下と端で切り取られて見えなくなる。左右に 4px の padding を足し、
   同じだけの負の margin で打ち消して、枠が文字に掛からないようにする（並びの位置は変えない） */
.crumb a { padding-inline: 4px; margin-inline: -4px; }
.crumb a:focus-visible { outline-offset: -3px; }
/* 現在地は1行に収める。長い店名でパンくずが画面の何倍にも伸びないように省略するが、
   実際に幅が足りないときだけ省略する（固定の max-width だと、1280px で数百 px 空いていても
   「ナメックスパ（旧レッド…」と切れていた）。縮むのは現在地だけで、祖先のリンクは縮めない */
.crumb li:not([aria-current]) { flex: none; }
.crumb li[aria-current] { display: block; flex: 0 1 auto; min-width: 0; max-width: none; overflow: hidden;
                          text-overflow: ellipsis; line-height: 44px; color: var(--sub); }
.crumb li[aria-current]::before { display: inline-block; vertical-align: middle; }

/* ==== section: buttons ==== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
       min-height: 48px; padding: 0 var(--s5); border-radius: var(--r2); border: 1px solid transparent;
       font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1.3;
       text-decoration: none; text-align: center; cursor: pointer; }
/* 主ボタンの塗りはアクセントとは別のトークン。ダークでは生成りの地に墨色の文字になる */
.btn-primary { background: var(--primary-bg); color: var(--primary-ink); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--rule-strong); font-weight: 600; font-size: var(--fs-sm); }
.btn-block { display: flex; width: 100%; }
.btn .i-go { color: var(--muted); }
@media (hover: hover) {
  .btn-primary:hover { filter: brightness(1.08); }
  .btn-secondary:hover, .btn-quiet:hover { background: var(--hover); border-color: var(--ink); }
}

/* ==== section: chips-badges ==== */
/* チップは高さ 40px（44px に届かない分、間を 8px 空けて押し分けられるようにする） */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s3);
        border: 1px solid var(--rule-strong); border-radius: var(--r1); background: var(--surface);
        text-decoration: none; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; line-height: 1.2; }
.chip-n { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums;
          padding-left: var(--s2); border-left: 1px solid var(--rule); }
/* 自分の駅のチップ */
.chip[aria-current] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chips--sm .chip { min-height: 40px; }
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }
/* スマホでは1行に並べて横に送る（ホームの最初の画面の高さを抑えるため） */
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
                 -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll > li { flex: none; }
/* 横に送る入れ物は外にはみ出したものを切り取るので、フォーカスの枠はチップの内側に描く。
   フォーカスが入っている間は右端をぼかすマスクを外し、Tab で送ったチップが端で
   薄れないようにする。scroll-margin はフォーカスで送ったチップを画面の端に貼り付かせないため */
.chips--scroll .chip:focus-visible { outline-offset: -3px; }
.chips--scroll:focus-within { -webkit-mask: none; mask: none; }
.chips--scroll > li, .chips--scroll .chip { scroll-margin-inline: var(--gutter); }
@media (min-width: 720px) { .chips--scroll { flex-wrap: wrap; overflow: visible; -webkit-mask: none; mask: none; margin: 0; padding: 0; } }
/* キーボードで移動中だけ折り返して全チップを画面に入れる（:focus-visible はタッチ・マウスでは付かない）。
   Chromium は一部でも見えているチップへフォーカスしても横に送らないので、320px では
   「中目黒」が 11px しか見えなかった。ホームは JS を使わないので、送る代わりに折り返す。
   幅いっぱいに出すための負の margin と padding も、折り返している間は外す */
.chips--scroll:has(:focus-visible) { flex-wrap: wrap; overflow: visible; -webkit-mask: none; mask: none; margin: 0; padding: 0; }

.badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: var(--r-pill);
         border: 1px solid var(--rule-strong); font-size: var(--fs-xs); font-weight: 600; line-height: 1.2;
         color: var(--sub); white-space: nowrap; letter-spacing: .02em; }
.badge--work { border-color: transparent; color: var(--accent); background: var(--accent-soft); }
/* 新人の枠はアクセント色にしない（行ごとにボルドーの枠が並ぶとうるさいため） */
.badge--new { border-color: var(--rule-strong); color: var(--accent); }
.badge--off { background: var(--paper-2); border-color: transparent; color: var(--muted); }
/* 表の中。最小の文字サイズ 13px は表の中でも守る（12px の例外は廃止） */
.badge--xs { min-height: 20px; padding: 0 6px; margin-left: 6px; font-size: var(--fs-xs); }

/* ==== section: salonrow ==== */
/* 店舗の行（partials/salonrows.html）。ホーム・地域・駅・店舗ページの「近くの店舗」で共通 */
.salonlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.salonlist > li { border-bottom: 1px solid var(--rule); }
.salonrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) 16px; gap: var(--s3) var(--s4); align-items: center;
            min-height: 84px; padding: var(--s3) 0; text-decoration: none; }
.salonrow-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: var(--lh-ui); }
.salonrow-name { font-weight: 700; font-size: var(--fs-md); letter-spacing: .02em; word-break: auto-phrase; }
/* 旧店名は2行目に下げる。括弧まで1行に並べると店名が2〜3行に折り返すため */
.salonrow-aka { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* 行頭の全角括弧「（旧レッドリボン）」は字面の左に約半角の空きがあり、上の店名より
   右にずれて見えた。行頭の約物の空きを詰め、店名と左端をそろえる */
.salonrow-aka { text-spacing-trim: trim-start; font-feature-settings: "palt"; }
/* position: relative は区切りに添えた読み上げ専用の「・」（.vh、position: absolute）を箱の中に留めるため */
.salonrow-sta { position: relative; font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salonrow-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); color: var(--sub);
                 font-variant-numeric: tabular-nums; }
.salonrow-meta b { color: var(--accent); font-size: var(--fs-sm); margin: 0 1px; }
/* 新人は枠付きのバッジにせず文字だけで出す（32行に32個のボルドーの枠が並ぶのを避ける） */
.salonrow-new { color: var(--accent); font-weight: 600; }
.salonrow > .i-go { color: var(--muted); }
@media (hover: hover) {
  .salonrow:hover .salonrow-name { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .22em; }
  .salonrow:hover > .i-go { color: var(--accent); }
}
/* 行の幅が狭いところではロゴの台紙を 80×50 に縮める。空いた 16px で「25本・在籍224・新人10」が
   1行に収まり、行ごとの高さがそろう（2段に折れる行が混じると一覧がでこぼこになる）。
   狭いのは3か所: 480px 未満の1列、720〜959px の2列（1列あたり約 330px）、
   店舗ページの右の段（約 340px の「近くの店舗」） */
@media (max-width: 479px) {
  .salonrow { grid-template-columns: 80px minmax(0, 1fr) 16px; }
  .salonrow .logoplate { width: 80px; height: 50px; }
}
@media (min-width: 720px) and (max-width: 959px) {
  .salonlist--grid .salonrow { grid-template-columns: 80px minmax(0, 1fr) 16px; }
  .salonlist--grid .salonrow .logoplate { width: 80px; height: 50px; }
}
.salon-side .salonrow { grid-template-columns: 80px minmax(0, 1fr) 16px; }
.salon-side .salonrow .logoplate { width: 80px; height: 50px; }
@media (min-width: 720px) {
  .salonlist--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); border-top: 0; }
  .salonlist--grid > li { border-top: 1px solid var(--rule); border-bottom: 0; }
  .salonlist--grid > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

/* ロゴの台紙。縦横比も余白もばらばらなロゴを、同じ明るい台紙に contain で載せる。
   ダークモードでも台紙は明るいまま（暗くすると黒い文字のロゴが消える） */
.logoplate { display: flex; align-items: center; justify-content: center; width: 96px; height: 60px;
             padding: 3px; background: var(--logo-plate); border: 1px solid var(--rule); border-radius: var(--r1);
             overflow: hidden; }
.logoplate img { width: 100%; height: 100%; object-fit: contain; }
/* 白い文字のロゴ用（salon_logos.csv の plate=dark） */
.logoplate--dark { background: var(--logo-plate-dark); }
/* ロゴの無い店は、スラッグから決めた色の淡い地に明朝の店名（コントラスト 5.5〜8.4:1） */
.logoplate--text { background: hsl(var(--hue) 22% 93%); border-color: hsl(var(--hue) 18% 84%);
                   container-type: inline-size; }
/* 以前の頭文字2字をやめて店名を入れる。「なに」「フロ」「リミ」のような2字は
   別の語に読めたり、読み込み前の仮の表示に見えたりしたため。2行を超える店名は省略する。
   語の途中では折らない（keep-all）。折ってよい所は render._plate_name が <wbr> で入れる
   （「リミテッド｜スパ」「なにわ｜女子」）。以前の overflow-wrap: anywhere は「リミテッドス／パ」
   「ファムファ／タール」と語の途中で折っていた。
   字の大きさは、折れない最長の塊の幅（--n、em。_plate_name が測る）が台紙の内側（100cqi）に
   1行で収まる大きさにし、13px を上限・9px を下限にする（「ファムファタール」は 80px の台紙で約10px）。
   cqi が読めないブラウザでは2つ目の font-size が捨てられて 13px のまま残るので、下の @supports で
   以前の折り方（anywhere）に戻す ── 語の途中で折れても、台紙からはみ出すよりよい */
.logoplate-name { font-family: var(--serif); font-size: 13px; font-size: clamp(9px, calc((100cqi - 4px) / var(--n, 6)), 13px);
                  line-height: 1.25; font-weight: 600; text-align: center;
                  padding: 0 2px; font-feature-settings: "palt"; word-break: keep-all; overflow-wrap: normal; text-wrap: balance;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                  color: hsl(var(--hue) 30% 30%); }
@supports not (width: 1cqi) {
  .logoplate-name { font-size: 12px; overflow-wrap: anywhere; }
}
/* ダークでは文字の台紙（ロゴの無い店）だけを暗くする。本物のロゴは黒い文字が消えるので
   明るい台紙のままにするが、文字の台紙にはその理由が無く、明るい色の四角が並ぶと眩しい。
   切り替えは tokens の section と同じ条件（prefers-color-scheme だけ） */
@media (prefers-color-scheme: dark) {
  .logoplate--text { background: hsl(var(--hue) 14% 20%); border-color: hsl(var(--hue) 12% 28%); }
  .logoplate-name { color: hsl(var(--hue) 30% 82%); }
  /* 白い地の JPEG のロゴ（carinna・offSuit・fiorespa）は、ダークの生成りの台紙の中で
     白い四角や帯として浮いていた。乗算で白を台紙の色に溶かす（黒い文字はそのまま残る）。
     白い文字のロゴ（--dark）と文字の台紙には掛けない */
  .logoplate:not(.logoplate--dark):not(.logoplate--text) img { mix-blend-mode: multiply; }
}
.logoplate--lg { width: 104px; height: 68px; padding: 6px; }
@media (min-width: 720px) {
  .logoplate--lg { width: 180px; height: 120px; padding: 12px; }
}

/* ==== section: footer ==== */
.sitefoot { background: var(--paper-2); border-top: 1px solid var(--rule); }
.sitefoot-in { max-width: var(--wrap-wide); margin: 0 auto; padding: var(--s6) var(--gutter) var(--s7); display: grid; gap: var(--s5); }
.wordmark--foot { min-height: 0; }
.wordmark--foot .wordmark-ja { font-size: 18px; }
.sitefoot-tag { margin: var(--s1) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.agenotice { display: flex; align-items: center; gap: var(--s3); margin: 0; padding: var(--s3) var(--s4);
             border: 1px solid var(--accent-line); border-radius: var(--r2); background: var(--surface);
             font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; }
.agemark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
           border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font-family: var(--latin);
           font-size: 14px; font-weight: 700; position: relative; }
.agemark::after { content: ""; position: absolute; width: 1.5px; height: 34px; background: var(--accent); transform: rotate(45deg); opacity: .8; }
.footnav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
.footnav li { border-bottom: 1px solid var(--rule); }
.footnav a { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); text-decoration: none; }
.footnav a:hover { text-decoration: underline; }
.sitefoot-notes p { margin: 0; font-size: var(--fs-xs); color: var(--sub); line-height: 1.75; }
.sitefoot-notes p + p { margin-top: var(--s2); }
/* 削除の窓口へのリンクは、補足の地の色（--sub）のままだと周りの文と見分けがつかない
   （下線を含めて約1.5:1）。本文の墨色とアクセントの下線でリンクと分かるようにする。
   墨色と補足の色の差は 2.0:1 しかなく、淡い下線（--accent-line）も地に対して
   1.45:1（ダーク 1.85:1）で見えなかったので、下線は文字と同じ墨色の実線にする */
.sitefoot-notes a { color: var(--ink); text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.sitefoot-updated { margin: 0; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 720px) {
  .footnav ul { grid-template-columns: repeat(2, 1fr); column-gap: var(--s6); }
}
@media (min-width: 960px) {
  .sitefoot-in { grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
  .sitefoot-brand, .agenotice { grid-column: 1; align-self: start; }   /* 右の案内の高さに引き伸ばされない */
  .footnav { grid-column: 2; grid-row: 1 / 3; }
  .footnav ul { grid-template-columns: 1fr; }
  .sitefoot-notes, .sitefoot-updated { grid-column: 1 / -1; }
}

/* ==== section: home ==== */
/* ホームの最初の画面。390×844 に「キャッチコピー・数字3つ・入口ボタン2つ・駅のチップ1段目」が
   収まる高さに詰める（ここで離脱されると、エリアもレポートも見られずに終わるため） */
.hero { padding: var(--s5) 0 var(--s2); }
.hero-title { font-size: var(--fs-hero); line-height: 1.4; letter-spacing: .04em; margin: var(--s1) 0 0; }
.hero-lede { margin: var(--s3) 0 0; color: var(--sub); font-size: 15px; line-height: 1.75; }
/* 記事の種類（個別記事とセット記事）。箱は作らず、項目ごとに上の細い線で区切る。
   PC では横に2つ並べる */
.kinds { margin: 0; display: grid; gap: var(--s4); }
.kinds > div { padding-top: var(--s3); border-top: 1px solid var(--rule); }
.kinds dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); font-weight: 700; }
.kinds-n { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.kinds dd { margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--sub); line-height: 1.8; }
.kinds dd strong { color: var(--ink); }
@media (min-width: 720px) {
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
}

/* 実績の数字は3つだけ。罫線で挟み、箱にはしない */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--s4) 0 0;
           border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.figures > div { padding: var(--s2) 0; min-width: 0; }
.figures > div + div { border-left: 1px solid var(--rule); padding-left: var(--s3); }
.figures dt { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .04em; line-height: 1.4; }
.figures dd { margin: 2px 0 0; font-size: var(--fs-sm); line-height: 1.2; white-space: nowrap; }
/* 320px でも4桁の人数（「4,903名」のようなカンマ入り）が1行に収まるよう、画面幅に合わせて縮める */
.fig { font-family: var(--serif); font-size: clamp(22px, 7vw, 28px); font-weight: 600; margin-right: 2px;
       font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; }
/* 在籍情報の出どころの注記。数字のすぐ下に置き、数字と切り離さない */
.figures-note { margin: var(--s2) 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.hero-cta { display: grid; gap: var(--s2); margin-top: var(--s4); }
.hero-cta .btn { width: 100%; }
.quick { margin-top: var(--s4); }
.quick-label { margin: 0 0 var(--s2); font-size: var(--fs-xs); color: var(--muted); letter-spacing: .06em; }
.br-sp { display: inline; }
/* 使い方の3手順。スマホでは本文の流れの中、PC では右の列の囲みにする */
.hero-side { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s2);
            padding: var(--s3) 0; line-height: var(--lh-ui); }
.steps li + li { border-top: 1px solid var(--rule); }
.steps li::before { content: counter(st); grid-row: 1 / 3; font-family: var(--serif); font-size: 24px; font-weight: 600;
                    line-height: 1; color: var(--accent); padding-top: 2px; }
.steps-t { font-weight: 700; font-size: 15px; }
.steps-d { font-size: var(--fs-xs); color: var(--sub); margin-top: 2px; line-height: 1.65; }

/* 最近公開したレポート。行全体（名前・条件・公開年月・価格）がワクストへの1本のリンクで、
   店名はその下の別のリンク（サイト内）。class="rep" は付けない（verify の件数照合は店舗ページだけ） */
.newreps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.newrep { border-bottom: 1px solid var(--rule); }
.newrep-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); align-items: center;
               min-height: 64px; padding: var(--s3) 0 var(--s2); text-decoration: none; line-height: var(--lh-ui); }
.newrep-link > :not(.rep-buy) { grid-column: 1; min-width: 0; }
.newrep-name { font-weight: 700; font-size: var(--fs-md); }
.newrep-spec { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); color: var(--sub);
               font-variant-numeric: tabular-nums; }
.newrep-meta { font-size: var(--fs-xs); color: var(--muted); }
/* 右端に価格と「ワクスト ↗」の2段。どこへ移るのかを行ごとに明示する */
.newrep .rep-buy { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: flex-end;
                   gap: 2px; text-align: right; }
.newrep-salon { display: flex; align-items: center; gap: var(--s1); min-height: 44px;
                border-top: 1px dashed var(--rule); font-size: var(--fs-sm); color: var(--sub); text-decoration: none; }
.newrep-salon .i-go { color: var(--muted); }
/* 行の輪郭が隣の行に切られないよう内側に出す */
.newrep-link:focus-visible, .newrep-salon:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
  .newrep-link:hover { background: var(--hover); }
  .newrep-link:hover .newrep-name { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .22em; }
  .newrep-salon:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .22em; }
}

/* はじめての方へ */
.guide p { margin: 0; font-size: 15px; color: var(--sub); }
.guidelinks { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }

@media (min-width: 720px) {
  .hero { padding-top: var(--s7); }
  /* .br-sp は 720px 以上でも消さない。44px の明朝ではキャッチコピーが1行に収まらず
     （右に使い方の列が入る 960px 以上ではなおさら）、改行を消すと「実際に／通って」の
     ように語の途中で折れるため。読点の後で折るほうが読みやすい */
  .hero-lede { font-size: var(--fs-md); max-width: 36em; }
  .figures, .figures-note { max-width: 560px; }
  .figures > div + div { padding-left: var(--s4); }
  .fig { font-size: 34px; }
  .hero-cta { grid-template-columns: auto auto; justify-content: start; }
  .hero-cta .btn { width: auto; }
  .newreps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); border-top: 0; }
  .newrep { border-top: 1px solid var(--rule); border-bottom: 0; }
  .newreps > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .guidelinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  /* PC は右に 320px の列を取り、使い方の3手順を囲みにして置く */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--s8); align-items: start; }
  .hero-side { margin-top: 44px; padding: var(--s5); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r2); }
  .guide p { max-width: 40em; }
}

/* ==== section: area ==== */
/* 都府県の行と駅のチップ（ホームの「エリアから選ぶ」）。都府県名は「名前」なので明朝 */
.regions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.region-head { display: flex; align-items: baseline; gap: var(--s3); min-height: 48px; padding: var(--s2) 0;
               text-decoration: none; border-bottom: 1px solid var(--rule); margin-bottom: var(--s3); }
.region-name { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: .08em; }
.region-meta { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.region-meta b { color: var(--ink); font-size: var(--fs-sm); }
.region-head .i-go { margin-left: auto; align-self: center; color: var(--muted); }
.region-other { margin: var(--s5) 0 0; font-size: var(--fs-sm); color: var(--sub); }
/* 「その他のエリア：」と店の並び（.seplist）を横に置く。形は店舗の見出しの「最寄り」と同じで、
   区切りの点は section: layout のリンクを並べる .seplist が描く。店が増えて折り返しても
   点が行頭・行末に残らない（以前は文字の「・」で、行頭に来ることがあった） */
.region-other { display: flex; flex-wrap: wrap; align-items: baseline; }
.region-other-l { flex: none; }
/* ホームからこの店へ行く道はここだけなので、文字の大きさのまま押しやすくする（行の高さは変えずに当たり判定だけ上下に広げる） */
.region-other a { display: inline-block; padding-block: 12px; margin-block: -12px; }
@media (hover: hover) {
  .region-head:hover .region-name { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .22em; }
  .region-head:hover .i-go { color: var(--accent); }
}
@media (min-width: 720px) {
  /* 東京は駅が多いので1段を丸ごと使い、ほかの都府県は2列に並べる */
  .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
  .regions > li:first-child { grid-column: 1 / -1; }
}

/* 地域ページの「駅から絞る」。ページ見出しの直後なので、見出しの下の墨色の線を引かない
   （線が2本続くと、見出しと駅のチップが別のまとまりに見えるため） */
.sec-head--plain { margin-bottom: var(--s4); }
.sec-head--plain > h2 { padding-bottom: 0; border-bottom: 0; }
/* 地域ページは駅のチップの直後に店舗の一覧を置く。節の間を標準（48px）より詰めて、
   390px 幅の最初の画面に1件目の店舗の行が丸ごと入るようにする（東京は駅が13あり、チップが4段になる）。
   600px 未満ではそれでも東京の1件目が画面の下端（390×844 で 866px）にはみ出したので、
   飾りの英字の小見出し「Salons」と、チップの数字の説明（読み上げ専用に残す）を画面から外す。
   360×800 ではそれでも 16px 足りなかったので、節の間と見出しまわりの余白も一段ずつ詰める
   （見出しの下は「駅から絞る」と同じ 12px にそろえる。墨色の線は残すので、節の切れ目は見える） */
.k-region #salons { margin-top: var(--s6); }
@media (max-width: 599px) {
  .k-region #salons { margin-top: var(--s5); }
  .k-region #salons > .sec-head { margin-bottom: var(--s3); }
  .k-region #salons > .sec-head > h2 { padding-bottom: var(--s2); }
  .k-region #salons .eyebrow { display: none; }
  .area-chips-lede { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
                     clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* 駅ページの「新宿で、年齢・身長・カップから探す」。店舗の行の直後に少し離して置く */
/* 720px 以上で外枠いっぱい（約1016px）に伸びると、左の見出しと右の矢印が離れすぎて
   1つのリンクに見えない。文章の段と同じ幅で止める */
.area-search { margin-top: var(--s5); max-width: var(--measure); }
/* publish.scores のときだけ出る「ばらつき」の説明（地域ページの末尾） */
.area-note { margin-top: var(--s5); }

/* サイトマップの1行1リンク。件数は右端にそろえて、店舗の規模を縦に見比べられるようにする */
.chips + .linklist { margin-top: var(--s4); }
.linklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.linklist > li { border-bottom: 1px solid var(--rule); }
.linklist a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px;
              padding: var(--s1) 0; text-decoration: none; font-size: var(--fs-sm); line-height: var(--lh-ui); }
.linklist a > span:first-child { min-width: 0; }
.linklist-n { flex: none; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .linklist a:hover > span:first-child { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .22em; }
}
/* サイトマップの都府県名（h2 の中のリンク）。見出しとして読ませるので下線は引かない */
.k-sitemap .sec-head h2 a { text-decoration: none; }
/* 文字だけだと高さ 29px で、指で押す目安の 44px に届かない。行の高さで押せる範囲を広げる */
.sitemap-h { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) { .k-sitemap .sec-head h2 a:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); } }
@media (min-width: 720px) {
  /* 2列にしたら上の線は各行に持たせる（最後の行が1つでも下の線が途切れないように） */
  .linklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); border-top: 0; }
  .linklist > li { border-top: 1px solid var(--rule); border-bottom: 0; }
  .linklist > li:last-child, .linklist > li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--rule); }
}

/* ==== section: salon ==== */
/* 店舗ページ（templates/pages/salon.html）。サイトの購入導線の本体。
   スマホでは「メニューの段 46px＋ページ内の目次 44px」だけを画面上部に残し、
   1件目のレポートを 390×844 の1画面目に入れる（一覧の上に置くのは区分の見出しだけ）。 */

/* --- 見出し（店名・最寄り・ロゴ・facts） --- */
/* ロゴは grid の列にせず右に float する。列にすると見出しの全行がロゴの幅ぶん細くなり、
   長い店名がスマホで3〜5行に折れて1件目のレポートが1画面目から落ちる。float なら
   ロゴの横に並ぶのは店名の行だけで、その下の行は全幅を使える。
   ※ .salonhead-text・h1 を BFC（flex / overflow / display:flow-root）にしないこと。回り込みが効かなくなる */
.salonhead { padding: var(--s1) 0 0; }
/* ロゴは英字ラベルの高さぶん下げて、店名の頭とそろえる */
.salonhead > .logoplate { float: right; margin: 22px 0 0 var(--s4); }   /* 下の余白は 0。2段目の2行目がロゴの下端に掛からず全幅に戻る高さにしてある */
/* h1 の文言は page.title のまま、店名を大きく・「のセラピスト一覧と体験レポート」を2段目に小さく */
.salon-title-main, .salon-title-sub { display: block; }
/* word-break は h1 から受け継ぐはずだが、span を display:block にしているので明示する
   （カタカナの店名を「ザ・／プレミアムス／パ」のように語の途中で折らないため） */
.salon-title-main { font-size: var(--fs-salon); line-height: 1.3; letter-spacing: .04em; word-break: auto-phrase; }
/* 2段目は balance にしない。h1 の balance を受け継ぐと、ロゴの横の狭い行に合わせて
   全行が短く折られ、1行で済む文が3行になる */
.salon-title-sub { margin-top: 4px; font-size: var(--fs-md); font-weight: 500; line-height: 1.5; color: var(--sub); letter-spacing: .04em;
                   text-wrap: wrap; }
/* 旧店名と「の」は1段目の後ろに2段目と同じ小さな文字で付ける（2段目を「の」で始めないため。salon.html 参照） */
.salon-title-aka { font-size: var(--fs-md); color: var(--sub); font-weight: inherit; }
.salonhead-where { margin: 0; font-size: var(--fs-sm); color: var(--sub); line-height: 1.6; }
.salonhead-where .label { font-size: var(--fs-xs); color: var(--muted); margin-right: var(--s2); }
/* 駅名と公式サイトは 20px ほどの高さしか無く指で押しにくい。上下の padding で押せる範囲を
   44px 以上に広げ、同じだけの負の margin で打ち消して行の高さと配置は変えない */
.salonhead-where a { display: inline-block; padding-block: 12px; margin-block: -12px; }
/* 「最寄り」と、駅・公式サイトの並び（.seplist）を横に置く。並びが折り返すと2行目は
   ラベルの右から始まる（ぶら下げ）ので、駅名の列が崩れない。区切りの点は section: layout の
   リンクを並べる .seplist が描く */
.salonhead-where { display: flex; flex-wrap: wrap; align-items: baseline; }
.salonhead-where .label { flex: none; }
/* 読み上げ専用の文字（「（別タブ）」など）。共通の .vh が無いビルドでも見えてしまわないよう、ここにも置く */
.salonhead .vh, .salon-cols .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
                                  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* 400px 未満では店名を大きく組むとロゴの横で3行に折れ、1件目のレポートが1画面目から落ちる。
   ロゴを小さくして店名の行の幅を空け、文字の大きさも画面の幅に合わせて下げる */
@media (max-width: 399px) {
  .salonhead > .logoplate--lg { width: 72px; height: 48px; padding: 4px; margin-top: 24px; }
  .salon-title-main { font-size: clamp(22px, 7.2vw, 30px); }
}
.extlink { display: inline-flex; align-items: center; gap: 2px; }

/* 店名（h1）の直下の線。線より下は店名を説明するもの（最寄り・数字）で、サイト全体の規則と同じ。
   clear: both で右のロゴの回り込みを抜けてから引く（h1 に border を付けると、ロゴのほうが
   背の高い店でロゴの下を線が横切る）。
   facts は項目が1〜3個のどれでも崩れないよう flex で等分する。
   1本の価格はここに出さない（持ち主の指示。D-013） */
.salonhead-under { clear: both; margin: var(--s4) 0 0; padding-top: var(--s3);
                   border-top: 1px solid var(--ink); }
.salonhead-under > :first-child { margin-top: 0; }
.facts { display: flex; flex-wrap: wrap; margin: var(--s3) 0 0; }
.facts > div { flex: 1 1 0; min-width: 0; padding: var(--s3) var(--s4) var(--s2) 0; }
.facts dt { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; white-space: nowrap; }
.facts dd { margin: 2px 0 0; font-size: var(--fs-xs); line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.facts .fig { font-family: var(--serif); font-size: 22px; font-weight: 600; margin-right: 2px;
              font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; }

/* --- ページ内の目次。メニューの段の直下に残す（地は単色。backdrop-filter は
   性能と position:fixed の基準の事故を避けるため使わない）。
   等分の格子（＝タブに見える形）をやめ、左寄せの文字を点で区切って並べる。件数も出さない
   ── すぐ上の facts と同じ数字が2段続き、タブの見た目と相まって読みにくかった（持ち主の指摘。
   2026-10-04）。入り切らない幅では横に送る（折り返すと段の高さが変わり、sticky の位置がずれる） --- */
.jumpnav { position: sticky; top: var(--bar-h); z-index: 20; display: flex; align-items: center; gap: var(--s3);
           height: var(--jump-h); margin: var(--s4) calc(var(--gutter) * -1) 0;
           padding-inline: var(--gutter); background: var(--paper);
           box-shadow: 0 1px 0 var(--rule); overflow-x: auto; scrollbar-width: none; }
.jumpnav::-webkit-scrollbar { display: none; }
.jumpnav a { display: inline-flex; align-items: center; flex: none; min-height: 44px;
             font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; white-space: nowrap;
             text-decoration: none; color: var(--sub); }
/* 区切りは点。線で仕切るとまたタブに見える */
.jumpnav a + a::before { content: ""; flex: none; width: 3px; height: 3px; border-radius: 50%;
                         background: currentColor; opacity: .45; margin-right: var(--s3); }
.jumpnav a:focus-visible { outline-offset: -2px; }
/* 狭い画面では字間と左右の余白を詰める（4項目でも横に送らずに収まる） */
@media (max-width: 399px) {
  .jumpnav { gap: var(--s2); }
  .jumpnav a { letter-spacing: 0; }
  .jumpnav a + a::before { margin-right: var(--s2); }
}
@media (hover: hover) { .jumpnav a:hover { color: var(--accent); } }

/* --- 段組み。左右の段の最初の節は同じ margin-top にして、段の頭の線をそろえる --- */
/* スマホでは目次の直後なので詰める（1件目のレポートを1画面目に入れるため） */
.salon-main > .sec:first-child { margin-top: var(--s5); }
#reports > .sec-head { margin-bottom: var(--s4); }

/* --- レポートの一覧（行全体が a.rep）。class="rep" は verify の件数照合に使うので
   見た目は親の .replist から当てる。一覧・区分の帯・罫線は本文の列の幅にそろえる
   （はみ出させると、見出しの線や facts の線と端が 8px ずれて見える）。
   hover の地だけは box-shadow で左右に 8px 広げる（レイアウトに影響しない）。
   フォーカスの輪郭は内側に描く（outline-offset:-2px） --- */
.replist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.replist > li { border-bottom: 1px solid var(--rule); }
.replist > li:target { background: var(--accent-soft); }   /* ページ外から #r-ID で来たときにその行を示す */
/* 区分の見出し（h3）。区分ごとに <h3> と <ol> を1組ずつ出す（件数を正しく読ませ、見出しで飛べるように）。
   帯は列の幅いっぱい、文字だけ 8px 内側に置く。帯の上の線は直前の一覧の下の線と重ねない */
.replist-group { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
                 min-height: 32px; margin: 0; padding: 0 var(--s2); background: var(--paper-2);
                 font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; color: var(--sub);
                 letter-spacing: .04em; line-height: 1.3; text-wrap: wrap; }
.replist-group + .replist { border-top: 0; }
.replist + .replist-group { border-top: 0; }
.replist-group-n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.replist a.rep, .replist .rep-static { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); row-gap: 3px;
                                       align-items: center; min-height: 76px; padding: var(--s3) 0;
                                       text-decoration: none; color: inherit; line-height: var(--lh-ui); }
.replist a.rep:focus-visible { outline-offset: -2px; border-radius: 0; }
.rep-head { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); min-width: 0; }
.rep-name { font-size: 17px; font-weight: 700; letter-spacing: .03em; margin-right: 2px; }
.rep-spec { grid-column: 1; font-size: var(--fs-sm); color: var(--sub); font-variant-numeric: tabular-nums; }
.rep-meta { grid-column: 1; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
/* 右端に「価格」と「ワクスト ↗」。どこへ移るのかを行ごとに明示する */
.rep-buy { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
/* 退店済みは opacity で薄くしない（文字のコントラストが 3:1 を割るため）。--muted で 5.0:1 を保つ */
.replist li.is-retired a.rep, .replist li.is-retired .rep-spec { color: var(--muted); }
@media (hover: hover) {
  .replist a.rep:hover { background: var(--hover); box-shadow: -8px 0 0 var(--hover), 8px 0 0 var(--hover); }
  .replist a.rep:hover .rep-name { text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: .22em; }
  .replist a.rep:hover .dest { color: var(--accent); }
}
.replist-after { margin-top: var(--s5); display: grid; gap: var(--s4); }
.replist-after .finenote { margin: 0; }
/* まとめ売りの案内。結論を小見出しにして、理由は3点に分ける。**--sub（注記の灰色）で書かない**
   ── すぐ上の「年齢・身長…」の注記と同じ色だと、読み飛ばしてよい文に見える（2026-10-04） */
.setbuy { margin: 0; }
.setbuy-h { margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-ui); }
.setbuy-list { margin: var(--s2) 0 0; padding-left: 1.3em; font-size: var(--fs-sm); line-height: 1.8; }
.setbuy-list li + li { margin-top: var(--s1); }
.setbuy-list li::marker { color: var(--accent); }
/* 「まとめて買う」は店名が長いと2行になる。中央寄せの2行は読みにくいので左寄せにし、↗ を右端に置く */
.replist-after .btn-block { justify-content: space-between; text-align: left; padding: var(--s2) var(--s4); }

/* --- 新人（名簿の節の頭）。最初の4枚だけ見せ、残りは開閉にする --- */
.newcomers { margin-bottom: var(--s5); }
.minihead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); font-size: var(--fs-sm); }
.minihead .sec-count { margin-left: 0; }
.morebox { margin-top: var(--s2); border-top: 1px solid var(--rule); }
.morebox-sum { display: flex; align-items: center; gap: var(--s2); min-height: 48px; cursor: pointer; list-style: none;
               font-size: var(--fs-sm); font-weight: 700; }
.morebox-sum::-webkit-details-marker { display: none; }
.morebox-sum::marker { content: ""; }
.morebox-sum .i-down { margin-left: auto; color: var(--accent); }

/* --- 名簿。<details> で畳み、開くと見出し行と名前の列を固定した枠の中で縦横に送る --- */
.rosterbox { border: 1px solid var(--rule-strong); border-radius: var(--r2); background: var(--surface); }
.rosterbox-sum { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: var(--s3); align-items: center;
                 min-height: 64px; padding: var(--s3) var(--s4); cursor: pointer; list-style: none; line-height: var(--lh-ui); }
.rosterbox-sum::-webkit-details-marker { display: none; }
.rosterbox-sum::marker { content: ""; }
.rosterbox-t { font-weight: 700; }
.rosterbox-d { grid-column: 1; font-size: var(--fs-xs); color: var(--muted); }
.rosterbox-sum > .i-down { grid-column: 2; grid-row: 1 / 3; width: 20px; height: 20px; color: var(--accent); }
.rosterbox[open] > .rosterbox-sum { border-bottom: 1px solid var(--rule); }
.rosterbox-legend { margin: 0; padding: var(--s2) var(--s4); font-size: var(--fs-xs); color: var(--sub); line-height: 1.6; }
.rosterbox > .finenote { margin: 0; padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--rule); }
/* 枠の高さは「画面の高さ − 画面に残る部分 − 120px」まで。枠の外に指を置ける場所が必ず残り、
   そこからページを送れる。overscroll-behavior は付けない：端まで送ったらページのスクロールに
   引き継ぐ（指が枠に閉じ込められない） */
.roster-scroll { overflow: auto; max-height: min(640px, calc(100vh - 210px));
                 max-height: min(640px, calc(100dvh - var(--bar-h) - var(--jump-h) - 120px));
                 min-height: 240px; border-top: 1px solid var(--rule);
                 /* Tab で名前のリンクへ移ったとき、固定した見出しの行（44px＋線）と名前の列の下に
                    隠れないよう、その分だけ内側に寄せて送る（WCAG 2.4.11）。
                    名前の列は .roster（--fs-sm）の 7.5em＝105px。ここで 7.5em と書くと枠の文字の大きさ（16px）で
                    120px になり列と合わないので、--fs-sm から計算する */
                 scroll-padding-top: 45px; scroll-padding-left: calc(var(--fs-sm) * 7.5); }
.roster-scroll:focus-visible { outline-offset: -2px; }
.roster { font-size: var(--fs-sm); }
.roster th, .roster td { height: 44px; padding: 0 10px; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.roster thead th { position: sticky; top: 0; z-index: 2; background: var(--paper-2); font-size: var(--fs-xs); color: var(--sub); }
.roster tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--rule);
                   font-weight: 700; }
/* 名前の列は 7.5em で止め、長い名前は列の中で折り返す。名前に合わせて列が広がると、
   390px 幅で「身長」まで見えなくなり、固定した列が画面の半分を覆うため */
.roster tbody th, .roster thead th:first-child { width: 7.5em; min-width: 7.5em; max-width: 7.5em; white-space: normal;
                                                 line-height: 1.3; overflow-wrap: anywhere; }
/* 左上の見出しは最前面（縦にも横にも固定） */
.roster thead th:first-child { left: 0; z-index: 3; box-shadow: 1px 0 0 var(--rule); }
/* 名簿の名前は店舗公式のプロフィールへ（2026-10-04）。最大 660 行が全部リンクになるので、
   色は本文のまま下線だけにする ── すべてアクセントにすると表が赤い面になり、同じ行の
   「レポート」（ワクストへ＝押してほしいほう）と見分けが付かない */
.roster-prof { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink);
               text-decoration: underline; text-decoration-color: var(--rule-strong);
               text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* 外部リンクの印は CSS で描く（660行の HTML にアイコンの要素を足さない）。
   代替テキストを付けないと「櫻ななお 矢印」と記号で読まれ、行き先も別タブになることも伝わらない */
.roster-prof::after { content: "↗"; content: "↗" / "（公式サイト・別タブ）"; margin-left: 2px;
                      font-size: var(--fs-xs); color: var(--muted); text-decoration: none; }
/* 「体験談」の列。レポートのある人だけ中身が入る（1人も居ない店では列ごと出さない） */
.roster-rep { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 700;
              text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
              white-space: nowrap; }
.roster td.repcell { color: var(--muted); }
.roster-rep::after { content: "↗"; content: "↗" / "（ワクスト・別タブ）"; margin-left: 2px; text-decoration: none; }
/* 名簿の開閉で「を開く／を閉じる」を切り替える */
.rosterbox[open] .when-closed, .rosterbox:not([open]) .when-open { display: none; }
.roster td.cup { font-weight: 700; }
.roster .badge--xs { vertical-align: 1px; }
/* --- 体験レポートの表（D-013）。ワクストのまとめ記事の「セラピスト一覧」と同じ列・同じ書き方
   （単位なしの数、「-」、出勤日の日付の並び、退店済みはグレーの行）。名簿と同じ .roster の表を、
   畳まずに横だけ送る枠に入れる。
   縦に送る枠にしないのは、ページの本体の一覧が枠の中と外の二重のスクロールになるため。
   ワクストへのリンクは名前のセルの a.rep の1本（verify の件数照合。class は rep だけなので親から当てる） */
.reptable-scroll { overflow-x: auto; border-top: 1px solid var(--rule);
                   scroll-padding-left: calc(var(--fs-sm) * 7.5); }   /* Tab で移った先が固定した名前の列に隠れない */
.reptable-scroll:focus-visible { outline-offset: -2px; }
.reptable a.rep { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 700;
                  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.reptable a.rep::after { content: "↗"; content: "↗" / "（ワクスト・別タブ）"; margin-left: 2px; font-size: var(--fs-xs); text-decoration: none; }
.reptable a.rep:focus-visible { outline-offset: -2px; }
/* 出勤日（「10/1,3,5」）と新人の列。レポートの表・名簿で共通（ワクストのまとめ記事と同じ列） */
.roster td.wd { font-variant-numeric: tabular-nums; }
.roster td.new { color: var(--accent); font-weight: 700; }             /* 新人の印（§2 の状態のアクセント） */
/* 新人の表。ワクスト版と同じく入店日が先頭の列なので、名前の列（2列目）は固定しない。
   固定すると横に送ったとき入店日の列の上に重なる。列が6つで短いので固定しなくても読める */
.newtable tbody th, .newtable thead th:first-child { position: static; width: auto; min-width: 0; max-width: none;
                                                     white-space: nowrap; box-shadow: none; }
.newtable tbody th { background: transparent; }                         /* 固定しないので、列だけ色の違う地にしない */
.newtable thead th:first-child { position: sticky; }                    /* 見出しの行は固定のまま（top: 0） */
.newtable td:first-child { font-variant-numeric: tabular-nums; }
.reptable tbody th { font-weight: 700; }
/* 退店済みはワクスト版のグレーの行と同じ意味。地は --paper-2、文字は --muted（opacity で薄めない。§9） */
.reptable tr.is-retired > * { background: var(--paper-2); }
.reptable tr.is-retired a.rep, .reptable tr.is-retired td, .reptable tr.is-retired th { color: var(--muted); }
.reptable-scroll + .finenote { margin-top: var(--s2); }
.reptable-scroll + .replist-group, .finenote + .replist-group { margin-top: var(--s5); }
/* 見出しで並べ替える（roster.js が見出しの文字をボタンで包み、表に .roster--sortable を付ける）。
   セルの余白をボタンに移して見出しのセル全体を押せる面にする（高さ 44px）。向きの ▲▼ は検索の
   並び替え（.srch-th .dir）と同じ形・同じアクセント。JS が動かない環境では素の見出しのまま */
.roster--sortable thead th { padding: 0; }
.roster-sort { display: inline-flex; align-items: center; gap: 2px; width: 100%; min-height: 44px; padding: 0 10px;
               border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; line-height: 1.2;
               white-space: nowrap; cursor: pointer; }
.roster thead th.num .roster-sort { justify-content: flex-end; }
.roster thead th[aria-sort] { color: var(--ink); }
.roster-sort .dir { font-size: var(--fs-xs); color: var(--accent); }
/* 空の印に幅を取らせない（右揃えの数の列で、見出しが数字より 1em 左にずれていた） */
.roster-sort .dir:empty { display: none; }
.roster-sort:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .roster-sort:hover { background: var(--hover); } }

/* --- 料金とルーム。「時間：金額」は左右2列（dl.kv）、そのほかの「・」行は点の箇条書き --- */
.intro { padding: var(--s4); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r2); }
.intro-sec + .intro-sec { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.intro-h { margin: 0 0 var(--s2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.intro-body { font-size: var(--fs-sm); line-height: 1.75; font-variant-numeric: tabular-nums; }
.intro-body p { margin: 0; }
.intro-body p + p { margin-top: 2px; }
/* pricelines が Markdown に戻したとき。.dotlist は除く ── .intro-body ul（0,1,1）が .dotlist（0,1,0）に
   勝ち、料金の囲みの点の並びにまで字下げと余白の打ち消しが掛かっていたため */
.intro-body ul:not(.dotlist) { margin: 0; padding-left: 1.2em; }
.intro-sub { margin: var(--s3) 0 var(--s1); font-weight: 700; font-size: var(--fs-sm); }
.intro-body .intro-sub:first-child { margin-top: 0; }
/* 小見出しが束ねる範囲（pricelines の div.intro-grp）。左の線で範囲を見せる。線が無いと、
   範囲の後ろの「指名料」が直前の「昼割」「SPIRALコース」の料金に読めた */
.intro-grp { margin-top: var(--s3); padding-left: var(--s3); border-left: 2px solid var(--rule-strong); }
.intro-body > .intro-grp:first-child { margin-top: 0; }
.intro-grp + :is(.kv, .dotlist, p) { margin-top: var(--s3); }
.kv { margin: 0; display: grid; }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: 8px 0;
            border-bottom: 1px dashed var(--rule-strong); }
.kv > div:last-child { border-bottom: 0; }
/* 時間の側は縮めない（「基本コース」が1字ずつ縦に折れるのを防ぐ）。長い見出しだけ半分の幅で折り返す */
.kv dt { flex: none; max-width: 50%; }
.kv dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.dotlist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.kv + .dotlist, .dotlist:first-child { margin-top: 0; }
.dotlist li { position: relative; padding-left: 14px; line-height: 1.7; color: var(--sub); }
/* 点は CSS で描く（「・」の文字は pricelines が取り除くので二重にならない） */
.dotlist li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.intro-note { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; }

@media (min-width: 720px) {
  .salon-title-sub { font-size: var(--fs-lg); }
  .salonhead > .logoplate { margin-top: 8px; margin-left: var(--s5); }
  .facts { margin-top: var(--s5); }
  .facts .fig { font-size: 26px; }
}
@media (min-width: 960px) {
  .facts { flex-wrap: nowrap; }
  .facts > div { flex: 0 0 auto; padding-right: var(--s6); }
  /* PC では目次を本文の枠に収め、項目は左詰めにする。地は左右に 8px はみ出させて、
     画面に残っている間に下を流れる行の hover の地（box-shadow で 8px 広がる）が目次の脇から覗かないようにする。
     下の線は地と違って列の幅にそろえる（facts や一覧の線と端が合うように）ので、box-shadow ではなく
     左右 8px ずつ短い背景の線で引く */
  .jumpnav { margin-left: calc(var(--s2) * -1); margin-right: calc(var(--s2) * -1); padding: 0 var(--s2);
             gap: var(--s5); box-shadow: none;
             background: linear-gradient(var(--rule), var(--rule)) no-repeat center bottom / calc(100% - 16px) 1px, var(--paper); }
  .jumpnav a + a::before { margin-right: var(--s5); }
  .salon-cols--side { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--s7); align-items: start; }
  /* 右の段（料金・近くの店舗）が無い店は、レポートの行が 1000px 超に伸びて名前と価格が離れすぎる。
     本文の段の幅（--measure）で止める */
  .salon-cols:not(.salon-cols--side) > .salon-main { max-width: var(--measure); }
  .salon-main > .sec:first-child, .salon-side > .sec:first-child { margin-top: var(--s6); }
  .replist a.rep { min-height: 72px; }
}

/* --- スコアの表示（publish.scores=true のときだけ描かれる）。U5 のために旧 CSS から
   そのまま移したもの。変えたのは、無くなったトークン（--band / --line）の置き換え、
   13px 未満の文字の引き上げ、.dot を svg の中に限ったこと（.sep と別物にするため）、
   使っていない .dot-hit の削除だけ。.howto は section: layout にある。
   分布図（.dist）だけは後から作り直した: viewBox で縮めると目盛の字が 390px 幅で約 5.5px になり、
   点もアクセントで塗っていたため（§2・§3 の違反）。 --- */
/* スコアの節。線は引かない ── サイト全体の規則で線は見出し（h1 / h2）が持ち、この節は
   見出しの文言を持たないため（publish.scores を true に戻すときは h2 を付けて線をそこに引く） */
.scores { padding-top: var(--s4); }
.stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 .6em; }
.stat { flex: 1 1 150px; padding: 14px 16px; background: var(--paper-2); border-radius: var(--r2); }
.stat .k { font-size: var(--fs-xs); color: var(--sub); letter-spacing: .02em; }
.stat .v { font-size: 2.1rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat .u { font-size: var(--fs-xs); color: var(--sub); font-weight: 400; margin-left: .25em; }
.stat .n { font-size: var(--fs-xs); color: var(--sub); margin-top: .2em; }
figure { margin: 1.6em 0; }
/* 分布図は viewBox を使わない（salon.html）。横の位置は %、字・点・段の高さは CSS の px なので、
   字は画面の幅によらず --fs-xs のまま。高さは svg の height 属性が決める ── ここで height を
   書くと属性が負けるので書かない。右の余白は「5.0」の字（中央揃え）が、左の余白は下限（2.7）の
   点（半径 5px）が図の外に出ない分 */
.dist-plot { padding: 0 var(--s3) 0 var(--s2); }
.dist-plot svg { display: block; width: 100%; overflow: visible; }
figcaption { font-size: var(--fs-xs); color: var(--sub); margin-top: .5em; line-height: 1.7; }
.axis-line { stroke: var(--rule-strong); stroke-width: 1; }
.axis-tick { stroke: var(--rule); stroke-width: 1; }
.axis-label { fill: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
/* 平均の線は墨の破線、点は --sub の塗り。色の濃さと線の形の両方で見分ける。
   アクセントは使わない（§2: アクセントで面や印を塗らない）。
   コントラスト（地 --paper に対して）: --ink 15.5:1 / 15.1:1、--sub 7.6:1 / 9.8:1（ライト / ダーク）。 */
.mean-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mean-label { fill: var(--ink); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 縁取りは地の色。積んだ点・隣り合う点の境目を見せる */
svg .dot { fill: var(--sub); stroke: var(--paper); stroke-width: 1.5; }
@media (max-width: 480px) { .stat .v { font-size: 1.8rem; } }

/* ==== section: search ==== */
/* 検索ページ（search.html と search.js）。
   スマホ: 条件パネル → 結果 → 件数バーの1列。件数バーは画面下に残す（#search の範囲の中だけ）。
   PC（960px〜）: 左に条件パネル（画面に残す）、右に件数バーと結果の2段組み。
   行は JS が組むので、クラス名は search.js と対にして読むこと */

/* 件数バーの高さ（44px のボタン＋上下の余白＋ホームバーの安全域）。
   下のスクロールの余白とバーの最小の高さの両方がこの値を土台にする */
:root { --srch-bar-h: calc(44px + 16px + env(safe-area-inset-bottom)); }
/* PC の条件パネルの中を送れることを示す縁の影の色。暗い地では薄い影が見えないので濃くする */
:root { --srch-edge: rgba(45, 30, 20, .16); }
@media (prefers-color-scheme: dark) {
  :root { --srch-edge: rgba(0, 0, 0, .6); }
}
/* Tab で移ったフォーカスがスクロールで画面に入ってきても、画面下に残る件数バーの裏に
   着地しないようにする（WCAG 2.4.11）。バーを下に残すのは 960px 未満だけ */
@media (max-width: 959px) {
  html:has(.srch-bar) { scroll-padding-bottom: calc(var(--srch-bar-h) + 8px); }
}

/* --- 条件パネル。箱にするのは「入力欄」だから（罫線で区切り、箱で区切らない原則の例外） --- */
.srch { padding: var(--s4); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r2); }
.srch-note { margin: 0 0 var(--s4); padding: var(--s2) var(--s3); background: var(--paper-2); border-radius: var(--r1);
             font-size: var(--fs-xs); color: var(--sub); line-height: 1.6; }
.srch-q { display: block; }
.srch-q-label { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-ui); }
.srch-q-field { position: relative; display: block; }
.srch-q-field .i-search { position: absolute; left: 14px; top: 50%; margin-top: -.5em; color: var(--muted); pointer-events: none; }
/* 16px 未満にすると iOS が入力のたびに画面を拡大する */
.srch-q input { width: 100%; min-height: 48px; padding: 0 var(--s3) 0 40px; border: 1px solid var(--field-line);
                border-radius: var(--r2); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.srch-q input::placeholder { color: var(--muted); opacity: 1; }
.srch-q input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }

.srch-group { margin-top: var(--s5); }
.srch-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s3);
                   margin-bottom: var(--s2); line-height: var(--lh-ui); }
.srch-group-label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; }
.srch-group-note { font-size: var(--fs-xs); color: var(--muted); }

/* タグはチップと同じ扱い（44px に届かない代わりに間を 8px 空ける） */
.srch-tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.srch-tag { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 var(--s3);
            border: 1px solid var(--rule-strong); border-radius: var(--r1); background: var(--surface); color: var(--ink);
            font: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.srch-group--cup .srch-tag { min-width: 60px; }
.srch-tag .n { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 選択中の塗りは --primary-*。ダークモードでは生成りの地になり、ピンクの面を作らない */
.srch-tag.on { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-ink); }
.srch-tag.on .n { color: inherit; }
/* 0件の選択肢。押しても空振りするだけなので、押せないことを破線でも示す。
   opacity で薄めない ── 文字が 2.4:1 まで落ちて読めなくなる。文字は --muted、地は紙の色にして
   「押せない」を形（破線）と地で伝える */
.srch-tag:disabled { cursor: not-allowed; opacity: 1; color: var(--muted); background: var(--paper); border-style: dashed; }
.srch-tag:disabled .n { color: var(--muted); }
@media (hover: hover) {
  .srch-tag:not(:disabled):not(.on):hover { background: var(--hover); border-color: var(--ink); }
}

/* 畳む部分（ほかの駅／スリーサイズ）。開閉の summary は店舗ページの .morebox-sum と同じ 48px */
.srch-more { margin-top: var(--s5); border-top: 1px solid var(--rule); }
.srch-more-sum { display: flex; align-items: center; gap: var(--s2); min-height: 48px; cursor: pointer; list-style: none;
                 font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-ui); }
.srch-more-sum::-webkit-details-marker { display: none; }
.srch-more-sum::marker { content: ""; }
.srch-more-note { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.srch-more-sum .i-down { margin-left: auto; color: var(--accent); }
.srch-more--sta { margin-top: var(--s2); border-top: 0; }
.srch-more--sta > .srch-more-sum { color: var(--sub); font-weight: 600; }
.srch-more--sta > .srch-tags { padding-bottom: var(--s1); }
.srch-more-body { padding-bottom: var(--s2); }
.srch-more-body > .srch-group:first-child { margin-top: var(--s2); }

/* --- スライダー。つまみ2つは <input type=range> を2枚重ねて作る（ライブラリを足さないため）。
   入力全体は pointer-events:none にして、つまみだけ拾わせる --- */
/* input を左右につまみの押せる範囲の半分（22px）はみ出させる。range のつまみは中心が入力枠の
   内側 22px から動きはじめるので、そうしないと「端まで寄せたつまみ」と「トラックの端」が
   ずれる。はみ出すぶんのうち、見た目の丸の半径（11px）はこの左右の余白が受ける */
.srch-range { padding: 0 11px; }
.srch-hist { display: flex; align-items: flex-end; gap: 1px; height: 40px; }
.srch-hbar { flex: 1 1 0; min-width: 0; background: var(--rule); border-radius: 1px 1px 0 0; }
.srch-hbar.in { background: var(--accent-line); }
/* 押せる高さは 44px（WCAG 2.5.7 / spec §1.1）。トラックそのものも押せる（search.js が
   click を拾って近いほうのつまみを動かす）ので、箱の高さ全体が押せる範囲になる */
.srch-slider { position: relative; height: 44px; cursor: pointer; }
.srch-slider .track, .srch-slider .fill { position: absolute; top: 21px; height: 2px; }
.srch-slider .track { left: 0; right: 0; background: var(--rule-strong); }
.srch-slider .fill { background: var(--accent); }
/* つまみの押せる範囲は 44×44 だが、見た目は 22px の丸のまま。中心は input の内側 22px から
   動きはじめるので、左右に 22px はみ出させる（11px は .srch-range の余白、残りの 11px は
   パネルの余白 16px が受ける。はみ出しがパネルの内側に収まるので横スクロールは出ない） */
.srch-slider input[type=range] { position: absolute; top: 0; left: -22px; width: calc(100% + 44px); height: 44px;
                                 margin: 0; padding: 0; background: transparent; pointer-events: none;
                                 -webkit-appearance: none; appearance: none; }
.srch-slider input[type=range]:focus { outline: none; }
/* 透明な 11px の枠で押せる範囲を広げ、地は内側（22px）だけに塗る。輪郭は border では描けない
   （枠が透明なので）ため、内側の影で 2px の輪を描く */
.srch-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; box-sizing: border-box;
  width: 44px; height: 44px; border-radius: 50%; border: 11px solid transparent; background: var(--surface);
  background-clip: content-box; box-shadow: inset 0 0 0 2px var(--accent); cursor: pointer; }
.srch-slider input[type=range]::-moz-range-thumb { pointer-events: auto; box-sizing: border-box; width: 44px; height: 44px;
  border-radius: 50%; border: 11px solid transparent; background: var(--surface); background-clip: content-box;
  box-shadow: inset 0 0 0 2px var(--accent); cursor: pointer; }
.srch-slider input[type=range]::-moz-range-track { background: transparent; border: 0; }
/* フォーカスの輪は見た目の丸（半径 11px）の 2px 外に出す。外枠（半径 22px）から内へ 9px */
.srch-slider input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: -9px; }
.srch-slider input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: -9px; }
/* 両端いっぱい＝条件になっていない状態。塗りとつまみを控えめにして、効いていない
   スライダーが効いているように見えないようにする（opacity は使わない。つまみの輪郭が
   背景に溶けて、どこを掴めばよいか分からなくなる） */
.srch-slider.off .fill { background: var(--rule-strong); }
.srch-slider.off input[type=range]::-webkit-slider-thumb { box-shadow: inset 0 0 0 2px var(--field-line); }
.srch-slider.off input[type=range]::-moz-range-thumb { box-shadow: inset 0 0 0 2px var(--field-line); }
.srch-range-val { margin-top: 2px; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--accent);
                  font-variant-numeric: tabular-nums; line-height: var(--lh-ui); }
.srch-slider.off + .srch-range-val { color: var(--muted); font-weight: 500; }

/* --- 結果 --- */
.srch-out { margin-top: var(--s6); }
/* 見出しで移動できるよう h2 にしたが、見た目は並びの説明文のまま（明朝の大見出しにしない） */
.srch-resulthead { margin: 0; font-family: var(--sans); font-size: var(--fs-sm); font-weight: 700; letter-spacing: normal;
                   line-height: var(--lh-ui); }
.srch-hint { margin: 2px 0 var(--s3); font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }

/* 並び替えは結果の表の列の見出し。独立した並び替えの段は置かない（同じ項目が2か所に出る）。
   地も枠も持たない素のボタンにして、見出しの文字のまま押せるようにする */
.srch-th { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0;
           background: none; border: 0; font: inherit; color: inherit; letter-spacing: inherit;
           cursor: pointer; }
.srch-th.on { color: var(--accent); font-weight: 700; }
.srch-th .dir { font-size: var(--fs-xs); }
.srch-th .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
               clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.srch-th:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .srch-th:hover { color: var(--accent); } }

/* 結果は表。店舗ページのレポートの表（.roster .reptable）をそのまま使い、名前の列を固定して
   横に送る。カードで1件ずつ積むのをやめた理由は、名前の長さで数字の位置がずれて縦に比べられず、
   1件 135px で30件が約4,000px になっていたため（2026-10-04。持ち主の指摘） */
.srchtable { width: 100%; }
/* 9列あるので、セルの余白を店舗ページの表（10px）より詰めて PC の段（約700px）に収める */
.srchtable th, .srchtable td { padding: 0 8px; }
.srchtable td.num { font-variant-numeric: tabular-nums; }
/* 名前はワクストへ。class は rep にしない（verify の件数照合はレポートの表だけを数える） */
.srch-name { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 700;
             text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.srch-name::after { content: "↗"; content: "↗" / "（ワクスト・別タブ）"; margin-left: 2px;
                    font-size: var(--fs-xs); text-decoration: none; }
.srch-name:focus-visible { outline-offset: -2px; }
/* 店舗の列は当サイトの店舗ページへ。駅はその下に小さく出す（列にすると横幅を食う） */
.srchtable td.srch-salon-cell { white-space: normal; width: 11em; max-width: 11em; line-height: 1.35; }
.srch-salon { display: block; max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
              font-weight: 600; color: var(--ink); text-decoration: underline;
              text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.srchtable .res-sta { display: block; max-width: 11em; }
.srchtable .badge { margin-left: var(--s2); }
/* まとめ売りの札。人の名前に見えないよう、地の色で区別する（退店済みと同じ控えめな札） */
.srchtable .badge--set { background: var(--paper-2); border-color: transparent; color: var(--sub); }
/* 駅は1行に収め、はみ出たら「…」で切る（折り返さないので区切りは .sep）。
   position: relative は、読み上げ用の「・」（.vh。absolute）を overflow: hidden で一緒に切るため */
.res-sta { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
           font-size: var(--fs-xs); color: var(--muted); }
@media (hover: hover) { .srch-salon:hover { color: var(--accent); text-decoration-color: currentColor; } }

.srch-morebtn { margin-top: var(--s4); }
.srch-foot { margin: var(--s3) 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.srch-empty { margin: 0; padding: var(--s6) 0; text-align: center; color: var(--muted); }

/* --- 件数バー。スマホでは画面下に残す。#search の最後の子なので、効くのは #search の範囲の
   中だけで、結果の最後の行と「さらに表示」はバーより前に来て裏に隠れない --- */
/* min-height は「結果を見る」を隠したときにバーが縮んで跳ねないようにするため */
.srch-bar { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; gap: var(--s2);
            min-height: calc(44px + 8px + max(8px, env(safe-area-inset-bottom)));
            margin: var(--s5) calc(var(--gutter) * -1) 0; padding: 8px var(--gutter);
            padding-bottom: max(8px, env(safe-area-inset-bottom));
            background: var(--surface); border-top: 1px solid var(--rule); box-shadow: var(--shadow-bar); }
/* flex にしない。flex にすると文字の間の空白が消え、コピーした文字が「該当74件」に詰まる */
.srch-count { min-width: 0; margin-right: auto; font-size: var(--fs-sm); line-height: 1.3; font-variant-numeric: tabular-nums; }
.srch-count b { font-family: var(--serif); font-size: 22px; color: var(--accent); margin: 0 2px; }
.srch-count .muted { display: inline-block; font-size: var(--fs-xs); }   /* 折り返すなら「／全N件」をまとめて次の行へ */
.srch-clear { flex: none; min-height: 44px; padding: 0 var(--s2); border: 0; background: none; color: var(--sub);
              font: inherit; font-size: var(--fs-xs); line-height: 1.3; text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
              white-space: nowrap; }
.srch-jump { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border-radius: var(--r2);
             background: var(--primary-bg); color: var(--primary-ink); font-size: var(--fs-sm); font-weight: 700;
             text-decoration: none; white-space: nowrap; }
/* 結果が見えている間は「結果を見る」を見えなくするが、場所は空けたままにする（display:none に
   しない）。詰めると隣の「すべて外す」がこの位置へ滑り込み、同じ場所をもう一度押した指で
   条件が全部消える。押し間違いで条件が消えるのを防ぐため（search.js watchJump） */
.srch-jump.is-idle { visibility: hidden; }
/* 320〜399px では3つが1行に入らない。ボタン（「すべて外す」「結果を見る」）は折らず、
   件数の「／全N件」だけが次の行へ回る（.srch-count .muted が inline-block）。
   「条件をすべて外す」を幅で絞ると「条件をす／べて外す」と語の途中で割れていた */
@media (max-width: 399px) {
  .srch-jump { padding: 0 var(--s3); }
}

/* 「数字について」 */
.qa-list { max-width: var(--measure); margin: 0; }
.qa-list dt { margin-top: var(--s4); font-weight: 700; line-height: var(--lh-ui); }
.qa-list dt:first-child { margin-top: 0; }
.qa-list dd { margin: var(--s1) 0 0; font-size: 15px; color: var(--sub); line-height: 1.8; }

@media (min-width: 960px) {
  .srch-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto 1fr;
                 column-gap: var(--s6); align-items: start; }
  /* 条件パネルは画面に残し、パネルの中だけを送る。結果を読み進めても条件を足せるように */
  .srch { grid-column: 1; grid-row: 1 / 3; position: sticky; top: calc(var(--bar-h) + 16px);
          max-height: calc(100vh - var(--bar-h) - 32px); max-height: calc(100dvh - var(--bar-h) - 32px); overflow-y: auto;
          /* パネルの中を送れることを、上下の縁の影で示す（下に身長・スリーサイズ・「すべて外す」が
             隠れていても、影が無いと「ここで終わり」に見える）。JS を使わない定番の形:
             中身と一緒に動く地の色の帯（local）が、枠に留まる影（scroll）を端に着いたときだけ覆い隠す */
          background:
            linear-gradient(var(--surface) 30%, transparent) center top / 100% 32px no-repeat local,
            linear-gradient(transparent, var(--surface) 70%) center bottom / 100% 32px no-repeat local,
            radial-gradient(farthest-side at 50% 0, var(--srch-edge), transparent) center top / 100% 12px no-repeat scroll,
            radial-gradient(farthest-side at 50% 100%, var(--srch-edge), transparent) center bottom / 100% 12px no-repeat scroll,
            var(--surface); }
  /* タグの地はパネルと同じ色なので、透明にしても見た目は変わらない。不透明のままだと
     縁の影がタグの裏に隠れ、上端・下端にタグが並んだときに影が途切れて見える */
  .srch-tag { background: transparent; }
  .srch-out { grid-column: 2; grid-row: 2; margin-top: 0; }
  /* 件数バーは結果の上に置き、固定しない（結果と条件が横に並んで見えているので要らない） */
  .srch-bar { grid-column: 2; grid-row: 1; position: static; min-height: 0; margin: 0 0 var(--s3); padding: 0 0 var(--s3);
              background: none; border-top: 0; border-bottom: 1px solid var(--rule); box-shadow: none; }
  .srch-count b { font-size: 28px; }
  .srch-jump { display: none; }
}

/* 強制カラーでは地の色が消えるので、選択中のタグと並び替えを輪郭で示す */
@media (forced-colors: active) {
  .srch-tag.on, .srch-th.on { outline: 2px solid Highlight; outline-offset: -2px; }
  /* トラックと「効いていない」塗りは CanvasText で必ず見せる。.srch-slider.off .fill の指定の
     ほうが強いので、ここで同じ強さ以上に書かないとトラックが消える */
  .srch-slider .track, .srch-slider.off .fill { background: CanvasText; }
  .srch-slider:not(.off) .fill { background: Highlight; }
  /* つまみの輪は内側の影で描いているが、強制カラーでは影が消えて丸が見えなくなる。
     地の色を塗りつぶしの丸にして残す（透明な枠の外側は押せる範囲のまま） */
  .srch-slider input[type=range]::-webkit-slider-thumb { forced-color-adjust: none; background-color: ButtonText; }
  .srch-slider input[type=range]::-moz-range-thumb { forced-color-adjust: none; background-color: ButtonText; }
  .srch-tag:disabled { border-color: GrayText; color: GrayText; }
  .srch-tag:disabled .n { color: GrayText; }
}

/* ==== section: prose ==== */
/* 文章のページ。外枠（.page）の左端はほかのページとそろえたまま、段の幅だけを
   --measure に絞る（1行が長すぎると読みにくい）。中央寄せにしないのは、ヘッダーや
   パンくずと左端がずれて「別のサイト」に見えるため */
.prose-layout { max-width: var(--measure); }
/* 店舗ページ用のページ内目次（--jump-h）が無いので、#見出し へ飛んだときの余白は
   メニューの段の高さだけにする。:has が効かないブラウザでは base の値（目次の分だけ
   広い）に落ちるが、見出しが隠れることはない */
html:has(.prose-layout) { scroll-padding-top: calc(var(--bar-h) + 16px); }

.pagehead--prose { padding-bottom: var(--s4); }

/* 目次（h2 が3つ以上のときだけ出る）。行ごとに 44px 取り、指で押し分けられるようにする */
.toc { margin: var(--s5) 0 0; padding: var(--s3) var(--s4); background: var(--surface);
       border: 1px solid var(--rule); border-radius: var(--r2); }
.toc-label { margin: 0 0 var(--s1); font-family: var(--latin); font-size: var(--fs-xs); letter-spacing: .18em;
             text-transform: uppercase; color: var(--accent); line-height: 1.4; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; border-top: 1px solid var(--rule); }
.toc li:first-child { border-top: 0; }
.toc a { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: var(--s1) 0;
         text-decoration: none; font-size: 15px; font-weight: 600; line-height: var(--lh-tight);
         word-break: auto-phrase; text-wrap: balance; }   /* PC の狭い列で「につ／いて」と切れないように */
.toc a::before { content: counter(toc, decimal-leading-zero); flex: none; min-width: 2ch; font-family: var(--sans);
                 font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
@media (hover: hover) { .toc a:hover { color: var(--accent); } }

/* 本文。strong にはマーカー風の下地を付けない（強調が多いページで面がまだらになる） */
.prose { font-size: var(--fs-md); line-height: var(--lh-body); }
.prose > :first-child { margin-top: var(--s5); }
.prose p { margin: var(--s4) 0 0; text-wrap: pretty; }
.prose h2 { margin: var(--s7) 0 0; padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); }
.prose h3 { margin: var(--s6) 0 0; font-size: var(--fs-lg); padding-left: var(--s3); border-left: 2px solid var(--accent); line-height: 1.4; }
.prose h3 + p { margin-top: var(--s2); }
.prose ol, .prose ul { margin: var(--s4) 0 0; padding-left: 1.4em; }
.prose li + li { margin-top: var(--s2); }
.prose ul li::marker { color: var(--accent); }
/* 番号付きの箇条は「手順」として読ませたいので、丸囲みの番号と罫線で1段ずつ区切る */
.prose ol { counter-reset: step; list-style: none; padding-left: 0; }
.prose ol > li { counter-increment: step; position: relative; margin: 0;
                 padding: var(--s3) 0 var(--s3) 44px; border-top: 1px solid var(--rule); }
.prose ol > li:last-child { border-bottom: 1px solid var(--rule); }
.prose ol > li::before { content: counter(step); position: absolute; left: 0; top: calc(var(--s3) + 2px);
                         display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
                         border-radius: 50%; border: 1px solid var(--accent); color: var(--accent);
                         font-family: var(--sans); font-size: var(--fs-xs); font-weight: 700;
                         font-variant-numeric: tabular-nums; line-height: 1; }
.prose strong { color: var(--ink); }
.prose a { text-decoration-color: var(--accent-line); }
@media (hover: hover) { .prose a:hover { text-decoration-color: currentColor; } }
/* 本文の末尾の「〇年〇月時点の内容です」のような注記は、hr の後に置く決まりにしている */
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s7) 0 0; }
.prose hr + p { font-size: var(--fs-sm); color: var(--sub); line-height: 1.8; }
.prose dl dt { font-weight: 700; margin-top: var(--s3); }
.prose dl dd { margin: 0; }
/* 本文の表は .tablewrap で包まれないので、狭い画面では表の中だけを横に送る */
.prose table { display: block; overflow-x: auto; margin-top: var(--s4); }

/* PC: 1列目に見出しと本文、2列目に目次。目次はメニューの段の下に残す */
@media (min-width: 960px) {
  .prose-layout { max-width: none; display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
                  column-gap: var(--s7); align-items: start; }   /* 仕様は s8。目次の列を 16px 広げて見出しの折り返しを減らす */
  .prose-layout > :not(.toc) { grid-column: 1; }
  .prose-layout > .toc { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--bar-h) + 24px);
                         margin-top: var(--s4); max-height: calc(100vh - var(--bar-h) - 48px); overflow-y: auto; }
}

/* スコア一覧（/variance/。publish.scores=true のときだけ描画される） */
.tbl td a { font-weight: 600; text-decoration-color: var(--accent-line); }
.tablewrap + .howto { margin-top: var(--s5); }

/* ==== section: a11y ==== */
/* 動きを減らす設定の人には、アイコンの回転などの動きを出さない */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* 強制カラー（Windows のハイコントラスト）では地の色が消えるので、枠線で形を残す */
@media (forced-colors: active) {
  .btn, .chip, .badge, .logoplate, .helpbox, .guidelink, .gnav-all { border: 1px solid CanvasText; }
  .gnav-top[aria-current], .gnav-drop[data-here] > .gnav-top { text-decoration: underline; }
  .sep { background: CanvasText; }
  .seplist > *::before, .salonrow-meta > *::before, .rep-spec > *::before,
  .newrep-spec > *::before, .jumpnav a + a::before { background: CanvasText; }
  /* 画面上部に残る段の下端は box-shadow で描いているが、強制カラーでは影が消えて
     本文との境目が無くなる。目次の区切り・英字ラベルの横線・自分の駅のチップも同じ */
  .masthead, .jumpnav { border-bottom: 1px solid CanvasText; }
  .eyebrow::before { background: CanvasText; }
  .chip[aria-current] { outline: 2px solid Highlight; outline-offset: -2px; }
}
/* 画面の高さが低いとき（400% の拡大・横向きのスマホ）は、上下に残る段を固定しない。
   320×256 相当では メニュー＋目次 や メニュー＋件数バー だけで画面の 1/3 以上を覆い、
   本文を読む場所が残らないため。エリアのパネルは .gnav-list を基準に出るので、
   ヘッダーが流れても開ける */
@media (max-height: 480px) {
  .masthead, .jumpnav, .srch-bar { position: static; }
  html, html:has(.srch-bar), html:has(.jumpnav) { scroll-padding-top: 0; scroll-padding-bottom: 0; }
}