/* ホストポータル — 2つのサービスで色を分ける（オーナー指定 2026-09-09）
   ┌ 口コミ・ポータル（お客さま向け）… 参照：ホスホス host2.jp ＝ 白 × ピンク × 濃茶
   └ 求人（ホストになりたい人向け）… 参照：夜キャリ／STAQING ＝ 白 × 紺 × 金
   ＝ 画面の色でどちらのサービスにいるかが分かる。切替は <body data-theme="jobs"> の1か所。

   ★出所（実測）
     ピンク側：2026-09-09 に https://host2.jp/css/{template,pc,clm/style-pc,cta/style-pc}.css を取得し
              16進色を数えた（726件・104種）。#ffffff 132 / #cccccc 76 / #f37497 54 / #333333 46 /
              #2d2427 44 / #f8f8f8 25 / #666666 14 / #ffcc55 8 → 上位をそのまま採用。
              ※淡いピンク（--brand-l / --brand-b）は元CSSに無いため #f37497 を白で薄めた派生値。
     紺側　：2026-09-09 に夜キャリ／STAQING の営業資料3枚の画素を集計（彩度0.35超のみ）。
              3枚すべてで #1e5a82 が最頻（44.2% / 22.3% / 17.9%）・アクセント #d2960a。
   ★借りたのは配色と骨格だけ。ロゴ・写真・文言は使っていない。
   ★絵文字はUIに使わない（app/icons.php の自作SVGに統一）
     ＝Appleの絵文字フォントはApple製品上でしか使えず、ストア提出物に写し込めないため */
:root{
  /* 既定＝口コミ・ポータル：ティファニーブルー（2026-09-14 オーナー決定）
     ★以前はホスホス実測のピンクだった。機能を似せるので、見た目は変えて別物にする。
     ★ティファニーの本物の色は **#81D8D0 の明るい水色**。白との対比は 1.66:1 しかないので、
       ティファニーの箱と同じく「**青の面に濃い文字**」で使う（白文字は載せない）。
       --brand   #81D8D0 … 面（ヘッダー帯・ボタン・チップ）
       --brand-d #0b4f4c … その上に載せる文字＋白地の上の文字（面の上 5.66:1／白地 9.39:1）
       --brand-l #eaf8f6 … 薄い面（本文#333と 11.59:1）
       --brand-b #a4ded8 … 境界線
     ⚠️ **#81D8D0 を文字色に使わない**（白地で1.66:1＝読めない）。 */
  --brand:#81d8d0; --brand-d:#0b4f4c; --brand-l:#eaf8f6; --brand-b:#a4ded8;
  /* ★ブランド面（--brand）の上に載せる文字色。ティファニーは明るいので【濃い文字】、
     求人の紺は暗いので【白】。ここを分けないと、どちらかのテーマが必ず読めなくなる。 */
  --on-brand:#0b4f4c;
  --accent:#ffcc55; --accent-l:#fff7e4; --accent-b:#efd9a6; --accent-ink:#5a4408;  /* ★#8a6a10 は金の上で3.38:1＝小さい文字が読めない（2026-09-14 実測）→ 6.19 に */
  --ink:#333333; --ink-2:#5a5054; --sub:#666666;
  --bg:#ffffff; --gray:#f8f8f8; --line:#cccccc;
  --ok:#1f7a4d; --ng:#c0392b;
  color-scheme:light;
}
/* 求人側＝夜キャリ／STAQING実測の紺。色の指定はここだけで切り替わる */
body[data-theme="jobs"]{
  --brand:#1e5a82; --brand-d:#1e3246; --brand-l:#e8f0f6; --brand-b:#c5d9e8;
  --on-brand:#ffffff;
  --accent:#d2960a; --accent-l:#fdf4e0; --accent-b:#ecd9a8; --accent-ink:#8a6a10;
  --ink:#1a2430; --ink-2:#4a5867; --sub:#5f6b78;   /* ★#8894a2=3.09 / #67737f=4.47 とも足りず（2026-09-14 実測）。#5f6b78 で 5.44 */
  --bg:#ffffff; --gray:#f4f6f8; --line:#dfe5eb;
}
*{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;max-width:100vw;overflow-x:hidden;background:var(--gray);color:var(--ink);
  font-family:-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.65;padding-bottom:62px}
a{color:inherit;text-decoration:none}
main{max-width:960px;margin:0 auto;padding:12px 14px 24px}
.ic{vertical-align:-3px;flex:none}
.ic.empty{opacity:.28}

.devbar{background:var(--brand-d);color:rgba(255,255,255,.72);font-size:11px;text-align:center;padding:5px 8px}
/* ★サンプル（ダミー）を表示している間だけ赤くする。見落とさないための帯なので薄くしない */
.devbar.warn{background:var(--ng);color:#fff;font-weight:700}
/* 店舗・運営としてログイン中の帯（お客様向けの画面に降りても管理画面へ戻れる） */
.staffbar{background:var(--ink);color:#fff;font-size:12px;display:flex;gap:10px;align-items:center;
  justify-content:center;flex-wrap:wrap;padding:6px 10px}
.staffbar a{color:#fff;text-decoration:underline;font-weight:700}
.devbar a{color:#fff;text-decoration:underline}

/* ヘッダー＝濃紺のベタ帯（参照の骨格） */
/* ★2026-09-19（04k）：viewport-fit=coverを足したので、上に固定するヘッダーは常にsafe-area-inset-topを
   足す（ノッチ・ダイナミックアイランドに文字が隠れないため）。env()未対応環境は0扱いで今までと同じ。 */
.hd{display:flex;gap:10px;align-items:center;padding:calc(11px + env(safe-area-inset-top,0px)) 14px 11px;background:var(--brand);color:var(--on-brand);position:sticky;top:0;z-index:20}
.hd .logo{font-weight:800;letter-spacing:.03em;font-size:16px;color:var(--on-brand)}
.hd .logo small{display:block;font-size:10px;color:var(--on-brand);opacity:.78;font-weight:400;letter-spacing:.04em}
.hd .acct{margin-left:auto;font-size:12px;text-align:right;color:var(--on-brand)}
.hd .acct .pt{color:var(--accent-l);font-weight:800}

/* 下部タブ（2026-09-19 オーナー指示04k＝メニューバーのデザイン改善）
   ★5つを同じ大きさにそろえる（旧「来店」だけ色の四角＋marginでサイズが違っていた事故の是正）。
   min-height:44pxで押す的を確保（本文36px基準より一段厳しい・オーナー指示の数字）。 */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:#fff;border-top:1px solid var(--line);z-index:30;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:44px;padding:6px 2px;font-size:10px;color:var(--sub)}
.tabbar a.on{color:var(--brand-d);font-weight:700}
/* ★「来店」は色の四角（背景を塗りつぶす）ではなく、アイコンだけ丸い色付きバッジにする＝
   他の4つと大きさ・並びを揃えたまま、来店だけ視認性を上げる。 */
.tabbar a.cta .ctaicon{width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--on-brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:1px}
.tabbar .dot{position:absolute;transform:translate(12px,-6px);background:var(--accent);color:#fff;font-size:9px;border-radius:99px;padding:0 5px}

/* 店頁だけのスマホ固定帯「初回予約」「電話」（2026-09-30 オーナー指示・店ページの改善2周目§1）。
   ★.mobhdを流用しているので@media(min-width:720px){.mobhd{display:none!important}}でPCは自動的に消える
   （下部タブ.tabbarと同じ720px境界＝境界がズレて帯だけ残る事故を防ぐ）。
   ★bottom値=62px（body{padding-bottom:62px}と同じ数値＝既存コードがタブバーの実高さ用に調整済みの値を
     そのまま使う。実測measure_els.mjsでタブバー高さ60.5px・帯の下端が796.0pxとタブバー上端783.5pxの
     間に重なりが出ないことをSHOPFIXCTA-01で確認・確定＝#[[measure-never-imagine-placement]]）に
     さらに自分のsafe-area-inset-bottomも足す＝ノッチ端末でタブバーの上端にぴったり接する。 */
.shopfixcta{position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;
  padding:8px 14px;background:var(--bg);border-top:1px solid var(--line);z-index:25;box-shadow:0 -2px 8px rgba(0,0,0,.08)}
.shopfixcta a{flex:1;min-height:44px;box-sizing:border-box}
.shopfixcta-space{height:64px}

/* ★2026-09-19 オーナー指示04k：PC幅（720px以上）専用のヘッダー＋メニュー。
   スマホの下部タブ（.mobhd）をそのまま引き伸ばさず、別の骨格（ロゴ左・メニュー横1列・
   来店は小さな角丸ボタン）をCSSで出し分ける（既定=非表示・720px以上だけ表示）。 */
.pchd{display:none}
@media(min-width:720px){
  .mobhd{display:none!important}
  .pchd{display:block;background:var(--bg);color:var(--brand-d);
    padding:env(safe-area-inset-top,0px) 12px 0;box-sizing:border-box;border-bottom:1px solid var(--line)}
  /* ★720px（下限ちょうど）で実測して詰めた値＝ロゴ・5メニュー・来店ボタン・ログインが1行に
     収まりきらず「ログイン」が画面外にはみ出す事故を確認したため、gap/paddingを切り詰めた
     （measure-never-imagine-placementの精神＝実際にshot_390.mjsでSHOT_W=720を撮って確認）。 */
  .pchd-inner{display:flex;align-items:center;gap:10px;max-width:960px;min-height:60px;margin:0 auto;min-width:0}
  .pchd .logo{font-size:17px;font-weight:800;color:var(--brand-d);letter-spacing:.02em;flex:0 0 auto}
  /* ★2026-09-19 テスラ目視：PCヘッダーのロゴが文字「ホストーク」になっていた（ブランドのロゴ画像に戻す・高さ32px） */
  .pchd .logo img{height:32px;width:auto;display:block}
  .pcnav{display:flex;align-items:center;gap:14px;margin:0 auto 0 16px;min-width:0}
  .pcnav a{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--ink-2);
    padding:4px 1px;border-bottom:2px solid transparent;white-space:nowrap}
  .pcnav a .ic{opacity:.85}
  .pcnav a.on{color:var(--brand-d);border-bottom-color:var(--brand)}
  .pcacct{display:flex;align-items:center;gap:10px;flex:0 0 auto;font-size:12.5px;white-space:nowrap}
  .pcacct .cta{display:flex;align-items:center;gap:4px;background:var(--brand);color:var(--on-brand);
    font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:999px;flex:0 0 auto}
  .pcacct a:not(.cta){color:var(--brand-d);font-weight:600}
  .pcacct .pt{color:var(--accent-ink);font-weight:800;margin-right:3px}
}

/* 見出し */
h1{font-size:19px;margin:14px 0 6px;letter-spacing:.01em}
/* ★2026-09-30（オーナー指示・店ページの改善§5）：無印の<h2>（在籍ホスト／口コミ／よくある質問 等）に
   CSSの指定が一切無く、ブラウザ既定（約1.5em≈24px太字）でh1(19px)より大きく描画されていた＝店名より
   「在籍ホスト（14名）」の方が大きい実測の原因。h1が常に一番大きい見出しになるよう明示的に指定する
   （.sec h2＝節見出しは下でさらに小さく上書き）。 */
h2{font-size:16px;margin:16px 0 6px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.sec{display:flex;align-items:center;gap:8px;margin:20px 0 8px}
.sec h2{font-size:14px;margin:0;font-weight:700;color:var(--ink-2);letter-spacing:.04em}
.sec .more{margin-left:auto;font-size:12px;color:var(--brand-d);font-weight:700}

/* ★2026-09-26 オーナー指示「ホスホスの『SPONSORED LINKS』というふうな表示に」：トップ「スポンサー」節の
   見出しだけ、通常の.sec（見出し＋もっと見るを横並びにするflex）から外し、節の幅いっぱいの細い線で挟んだ
   中央寄せの英字＋その下（線の外）に小さく日本語、という専用の見た目にする。
   色は新しいトークンを作らず、既存の「PR」表示と同じ色（--accent-ink・.badge.prと共有）を再利用した。 */
.sec.sponsorhead{display:block;text-align:center;margin:22px 0 8px}
.sponsorlinks{margin:0}
.sponsorlinks .lines{display:block;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:7px 4px;font-size:13px;font-weight:800;letter-spacing:.22em;color:var(--accent-ink)}
.sponsorlinks .ja{display:block;margin-top:5px;font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--sub)}
.lead{color:var(--ink-2);font-size:13px;margin:0 0 12px}
.small{font-size:12px;color:var(--sub);line-height:1.6}
/* ★2026-09-28（オーナー承認：エリア頁の紹介文）：見出し直下の1段落。スマホは読みやすいゆったり行間、
   PCは本文幅いっぱい（横幅を絞らない＝.card等と同じ幅に自然に収まる）。 */
.areaintro{font-size:14px;line-height:1.9;color:var(--ink-2);margin:0 0 12px}

/* カード（参照＝白・角丸・薄枠・影は最小） */
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0}
.closeup{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;
  padding:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0}
.closeup .lbl{font-size:11px;letter-spacing:.12em;color:var(--brand-d);font-weight:700}
.closeup .nm{font-size:20px;font-weight:800;margin:2px 0;display:inline-block}
.closeup .cp{font-size:13px;color:var(--ink-2)}
.closeup .ph{width:76px;height:96px;border-radius:8px;background:var(--brand-l);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--brand-d)}

/* 数値カウンタ（参照＝ラベル小・値大） */
.counter{display:flex;gap:8px;margin:12px 0}
.counter>div{flex:1;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center}
.counter b{display:block;font-size:19px;color:var(--brand-d);line-height:1.3;font-variant-numeric:tabular-nums}
.counter span{font-size:11px;color:var(--sub)}

/* メニュー（線画アイコン＋短いラベル） */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.grid a{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 4px;text-align:center;
  font-size:11px;line-height:1.4;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px}
.grid a .ic{color:var(--brand-d)}
.grid a:active{background:var(--brand-l)}

/* 行（一覧）— 情報を3段までに抑える */
.row{display:flex;gap:10px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.row:last-child{border-bottom:0}
.row .no{width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--gray);color:var(--ink-2);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* ★2026-09-18（第12回敵対的レビュー新規-Cの是正）：口コミ0件の行は番号でなく「集計中」の文字を出す
   （rank_no_html()）＝丸い22px固定だと文字が収まらないので、その行だけ角丸の横長に広げる。 */
.row .no.na{width:auto;min-width:44px;height:19px;border-radius:9.5px;padding:0 6px;font-size:11px;font-weight:600;
  background:var(--gray);color:var(--sub)}
/* ★「集計中」の行（口コミ0件）は、たまたま1〜3番目に来ても金・銀色のランキング色を出さない
   （順位ではないものに順位の見た目を付けない＝表示の意味を実装に合わせる） */
.row:nth-child(1) .no:not(.na){background:var(--brand);color:var(--on-brand)}
.row:nth-child(2) .no:not(.na),.row:nth-child(3) .no:not(.na){background:var(--brand-l);color:var(--brand-d)}
.row>div:not(.no):not(.sc):not(.avatar){flex:1 1 55%;min-width:0}
.row .nm{font-weight:700;overflow-wrap:anywhere}
.row .meta{font-size:11.5px;color:var(--sub);overflow-wrap:anywhere}
.row .sc{margin-left:auto;text-align:right;flex:0 1 auto;min-width:0}
.sc b{color:var(--brand-d);font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}

/* ★2026-09-19（オーナー決定04g）：トップの「いま営業中」節を撤去した際、この節専用だった横スクロール／
   2列グリッド（.hscroll・.hscroll.opennow系）のCSSも削除（app/pages/public.php全体でclass="hscroll"を
   出す場所が無くなった＝実測して確認済み）。/shops?open=1一覧は別のマークアップ（.row等）を使う。 */

/* 日付リスト */
.topics .it{display:flex;gap:9px;padding:9px 2px;border-bottom:1px solid var(--line);align-items:flex-start}
.topics .d{flex:0 0 48px;font-size:11px;color:var(--sub);padding-top:2px;font-variant-numeric:tabular-nums}
.topics .k{flex:0 0 auto;font-size:11px;background:var(--brand-l);color:var(--brand-d);border-radius:3px;padding:1px 6px;font-weight:700}
.topics .t{font-size:13px;font-weight:600}
.topics .a{font-size:11px;color:var(--sub)}

/* バッジ（★1カードに2つまでに絞る運用） */
.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:1px 7px;border-radius:4px;
  border:1px solid var(--line);margin-left:4px;color:var(--ink-2);background:var(--gray);vertical-align:1px}
.badge.rank{border-color:var(--accent-b);color:var(--accent-ink);background:var(--accent-l)}
.badge.v{border-color:#b7dcc7;color:var(--ok);background:#eefaf3}
.badge.new{border-color:var(--line);color:var(--sub)}
.badge.unc{border-color:var(--accent-b);color:var(--accent-ink);background:var(--accent-l)}   /* 店舗確認前（公開情報から運営が作成）★色は直書きせずトークン */
.badge.pt{border-color:var(--accent-b);color:var(--accent-ink);background:var(--accent-l);font-weight:700}
.badge.today{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-l);font-weight:700}

/* PR（広告）＝掲載店の枠と行。★背景を「少しだけ」変える＋必ずPRの文字を併記する
   （ステルスマーケティング規制：広告だと分からない表示は不当表示になる） */
.card.pr{background:var(--accent-l);border-color:var(--accent-b)}
.row.pr{background:var(--accent-l);border-radius:8px;padding-left:8px;padding-right:8px}
.row.pr .no{background:var(--accent);color:var(--accent-ink)}   /* ★白文字は金の上で1.50:1＝読めない */
.badge.pr{border-color:var(--accent);color:var(--accent-ink);background:#fff;font-weight:700;letter-spacing:.06em}

/* お店からの返信（口コミの下に足す。口コミ本文は書き換えられない） */
.rv .reply{margin:8px 0 0 12px;padding:8px 10px;background:var(--gray);border-left:3px solid var(--brand);border-radius:0 8px 8px 0;font-size:13px}
.rv .reply .h{font-size:11px;color:var(--sub);margin-bottom:3px;display:flex;align-items:center;gap:4px}

/* ボタン（参照＝主は紺ベタ・副は白地に枠） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);color:var(--on-brand);
  font-weight:700;padding:11px 16px;border-radius:8px;border:0;cursor:pointer;font-size:14px}
.btn:active{background:var(--brand-d)}
.btn.sub{background:#fff;color:var(--brand-d);border:1px solid var(--brand-d)}
.btn.wide{display:flex;width:100%}
/* ★2026-09-17（第4回敵対的レビュー後・門番contrast_check.mjs実測）：求人テーマ（body[data-theme="jobs"]）
   の--accent(#d2960a)の上に--accent-ink(#8a6a10)を乗せると1.95:1（要4.5）。--accent-inkは--accent-l
   （薄い面）の上で使う前提のトークンで、--accent（濃い面）の上には合わない＝ここだけ--ink（濃い面の上でも
   両テーマとも4.5以上を実測）に差し替える。新しい色は足さない（既存トークンの使い分けを直すだけ）。 */
.btn.today{background:var(--accent);color:var(--ink)}
.btn.today:active{filter:brightness(.92)}
.btn.today.sm{font-size:13px;padding:9px 14px;width:auto;display:inline-flex;min-height:36px;align-items:center;justify-content:center}

input,select,textarea{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px;font-size:15px;width:100%}
label{display:block;font-size:12px;color:var(--ink-2);margin:9px 0 2px;font-weight:600}
/* 検索フォームのチェックボックス行（押す的36px以上・2026-09-16「いま営業中」絞り込み用） */
.formchk{display:flex;align-items:center;gap:6px;min-height:36px;font-size:13px;color:var(--ink-2);font-weight:600;margin:9px 0 2px}
.formchk input{width:auto}
.tabs{display:flex;gap:7px;margin:10px 0;flex-wrap:wrap}
.tabs a{font-size:12.5px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink-2)}
.tabs a.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand);font-weight:700}

table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
td,th{border-bottom:1px solid var(--line);padding:8px 4px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
th{color:var(--ink-2);font-weight:600;width:38%}

.flash{max-width:960px;margin:10px auto;padding:10px 14px;background:var(--brand-l);border:1px solid var(--brand-b);
  border-radius:8px;font-size:13px;color:var(--brand-d)}
.warn{background:var(--accent-l);border:1px solid var(--accent-b);border-radius:8px;padding:11px;font-size:13px}
.okbox{background:#eefaf3;border:1px solid #b7dcc7;border-radius:8px;padding:11px;font-size:13px}
.todaybox{background:var(--accent-l);border:1px solid var(--accent);border-radius:10px;padding:13px;margin:12px 0}
.todaybox .tl{font-weight:800;color:var(--accent-ink);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.bonusline{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--accent-ink);background:var(--accent-l);
  border:1px solid var(--accent-b);border-radius:4px;padding:2px 7px;margin-top:4px}
.bonusbox{background:var(--accent-l);border:1px solid var(--accent);border-radius:10px;padding:12px;margin:12px 0}
.bonusbox .bl{font-weight:800;color:var(--accent-ink);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.bonusbox b{color:var(--accent-ink);font-size:16px}

.rv{border-bottom:1px solid var(--line);padding:11px 0}
.rv .h{font-size:11.5px;color:var(--sub);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.rv.removed{opacity:.55}
.stars{display:inline-flex;gap:1px;color:var(--accent);vertical-align:-2px}
.empty{color:var(--sub);font-size:13px;padding:16px;text-align:center;background:var(--gray);border-radius:8px}
footer{max-width:960px;margin:22px auto 0;padding:16px 14px 28px;border-top:1px solid var(--line);font-size:12px;color:var(--sub)}

.qrbox{text-align:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.qrimg svg{width:min(230px,70vw);height:auto}
.urlbox{font-size:11px;color:var(--sub);word-break:break-all;background:var(--gray);border-radius:6px;padding:6px;margin:8px 0 0}
.bigpt{font-size:32px;font-weight:800;color:var(--brand-d);line-height:1.2;font-variant-numeric:tabular-nums}
.unset{color:var(--sub);background:var(--gray);border-radius:4px;padding:0 6px;font-size:12px}
/* ★2026-09-18（第10回敵対的レビュー item5の是正）：<small>はブラウザ既定でsmaller（親の約83%）に
   縮むため、.unset（12px）の中の<small>（「幅のため店舗にご確認ください」等の料金注記）が実測10px前後
   まで沈んでいた＝床(11px)割れ。既定の自動縮小を打ち消し、明示的に11px以上を出す。 */
.unset small{font-size:11px}
.tpl{margin:6px 0}
/* ★スマホで指で押す的は36px以上（実測で32pxだった・tools/mobile_check.mjs が見張る） */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;background:#fff;border:1px solid var(--line);min-height:36px;
  border-radius:99px;padding:5px 11px;margin:3px 4px 0 0;cursor:pointer;color:var(--ink-2)}
.chip:active{background:var(--brand-l);border-color:var(--brand)}
.chip.radio input{width:auto;margin-right:3px;vertical-align:-1px}
.custsig b{display:block;color:var(--brand-d);font-size:18px;line-height:1.2;font-variant-numeric:tabular-nums}
.custsig .lb{display:block;font-size:11px;color:var(--sub)}
.custsig .lb2{display:block;font-size:11px;color:var(--ok);font-weight:700}

/* 応募のやり取り */
.chat{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.bub{max-width:78%;padding:9px 12px;border-radius:12px;font-size:14px}
.bub .t{font-size:10px;color:var(--sub);margin-top:3px}
.bub.you{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:3px}
.bub.me{align-self:flex-end;background:var(--brand-l);border:1px solid var(--brand-b);border-bottom-right-radius:3px}
.bub.me .t{text-align:right}

/* 選考のステップ（参照の骨格：横並びのドット＋線） */
.steps{display:flex;align-items:center;gap:0;margin:10px 0}
.steps .s{flex:1;text-align:center;position:relative;font-size:10px;color:var(--sub)}
.steps .s::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:var(--line);margin:0 auto 4px}
.steps .s::after{content:"";position:absolute;top:4px;left:50%;width:100%;height:2px;background:var(--line);z-index:-1}
.steps .s:last-child::after{display:none}
.steps .s.on{color:var(--brand-d);font-weight:700}
.steps .s.on::before{background:var(--brand)}

@media(max-width:540px){
  .row .sc{white-space:normal;font-size:13px;text-align:left;flex:1 1 100%;margin-left:32px}
  .row .sc .meta{margin-left:2px}
  h1{font-size:18px}
}
@media(min-width:720px){
  .grid{grid-template-columns:repeat(8,1fr)}
  body{padding-bottom:0}
  .tabbar{position:static;border-top:0;border-bottom:1px solid var(--line)}
}
/* ===== 請求書・領収書（そのまま印刷して使える） ===== */
.doc{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:22px 20px;max-width:720px;margin:0 auto}
.doc h1{font-size:22px;letter-spacing:.2em;text-align:center;margin:0 0 4px}
.doc .to{font-size:16px;border-bottom:1px solid var(--ink);padding-bottom:4px;margin:14px 0 10px}
.doc .amount{font-size:15px;margin:10px 0 14px}
.doc .amount b{font-size:26px;letter-spacing:.02em}
table.inv{width:100%;border-collapse:collapse;margin:12px 0}
table.inv th,table.inv td{border:1px solid var(--line);padding:7px 9px;font-size:13px;text-align:left}
table.inv th{background:var(--gray);font-weight:700}
table.inv .num{text-align:right;font-variant-numeric:tabular-nums}
table.inv tr.sum th{text-align:right}
table.inv tr.total td,table.inv tr.total th{font-weight:800;font-size:15px}
.doc .issuer{margin-top:16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;line-height:1.8}
@media print{
  .devbar,.staffbar,.hd,.tabbar,.shopfixcta,footer,.noprint{display:none!important}
  body{background:#fff;padding-bottom:0}
  main{padding:0;max-width:none}
  .doc{border:none;border-radius:0;max-width:none;padding:0}
}

/* ホストの写真（一覧＝小さい丸／詳細＝大きい四角）。写真が無い人は線画アイコン */
.row>.avatar,.avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;overflow:hidden;background:var(--brand-l);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--brand-d)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.closeup .ph img,.hosthead .ph img{width:100%;height:100%;object-fit:cover;display:block}
.closeup .ph,.hosthead .ph{overflow:hidden;flex:0 0 auto}
.hosthead{display:flex;gap:12px;align-items:flex-start;margin:6px 0 2px}
.hosthead .ph{width:96px;height:120px;border-radius:10px;background:var(--brand-l);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--brand-d)}
.hosthead h1{margin:2px 0 4px}

/* ホストのカード並び（2026-09-14：一覧を写真のカードにする） */
.hgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0}
@media(min-width:560px){.hgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.hgrid{grid-template-columns:repeat(5,1fr)}}
/* ★2026-09-23（オーナー指示05a §4）→2026-09-30（オーナー指示・店ページの改善§2）：店頁の在籍グリッドだけ
   スマホ3列・PC6列に固定（/hostsの列数は変えない）。実測（本番・スマホ2列）＝40人で約20画面あり長すぎた。
   .hgrid.roster は .hgrid より詳細度が高いので、上の2つのmedia queryより後でも先でも必ず勝つ。 */
.hgrid.roster{grid-template-columns:repeat(3,1fr);gap:7px}
@media(min-width:720px){.hgrid.roster{grid-template-columns:repeat(6,1fr);gap:10px}}
.hcard{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  text-decoration:none;color:var(--ink)}
.hcard .ph{display:block;position:relative;aspect-ratio:3/4;background:var(--brand-l);
  display:flex;align-items:center;justify-content:center;color:var(--brand-d);overflow:hidden}
.hcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.hcard .ph .no{position:absolute;top:6px;left:6px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;
  background:var(--brand);color:var(--on-brand);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* ★2026-09-18（第12回敵対的レビュー新規-Cの是正）：口コミ0件は「集計中」＝順位の色（--brand）を出さない */
.hcard .ph .no.na{background:var(--gray);color:var(--sub);font-size:11px;font-weight:600}
.hcard .b{display:block;padding:8px 9px 10px}
.hcard .nm{display:block;font-weight:700;font-size:14px;overflow-wrap:anywhere}
/* ★2026-09-30（オーナー指示・店ページの改善§2）：店頁の在籍グリッド（3〜6列＝/hostsより狭い）だけ、
   名前を1行に収め、収まらなければ省略記号にする（/hostsの列数・折り返しは変えない＝.roster限定）。 */
.hgrid.roster .hcard .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .meta{display:block;font-size:11.5px;color:var(--sub);margin-top:2px;overflow-wrap:anywhere}
.hcard .s{color:var(--brand-d);font-weight:700}
.hcard .s small{color:var(--sub);font-weight:400;font-size:11px}
/* ★2026-09-30（オーナー指示・店ページの改善§2）：在籍12人までは直接出し、残りは<details>「全員を見る」で
   開く（JS無し・骨格は.morefeesと同じ流儀＝summaryを押す的の高さでボタンらしく見せる）。 */
.rosterall{margin-top:8px}
.rosterall summary{cursor:pointer;list-style:none;min-height:36px;display:flex;align-items:center;
  justify-content:center;gap:6px;font-weight:700;font-size:13px;color:var(--brand-d);
  border:1px solid var(--brand-d);border-radius:8px;padding:8px 14px}
.rosterall summary::-webkit-details-marker{display:none}
.rosterall[open] summary{margin-bottom:8px}
.rosterall .hgrid.roster{margin-top:0}

/* 店舗ページのヘッダー（画像でも動画でも同じ枠。host詳細のPR動画枠もこのクラスを使う＝変えない） */
.shophead{margin:8px 0 10px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--brand-l);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.shophead img,.shophead video{width:100%;height:100%;object-fit:cover;display:block}
.shophead .fallback{padding:10px;text-align:center;font-weight:700;font-size:15px;color:var(--brand-d)}

/* ★2026-09-23（オーナー指示05a §1）店頁ヒーロー＝店が登録した写真/動画（.shophead）があるときだけ、
   下端の黒グラデーション越しに店名・エリア・初回料金を写真の上に重ねる（PC 3:1 前後・スマホ 4:3 前後）。
   出し分けの判断はPHP側 shop_hero_render() 1関数（'kind'）だけ＝ここは見た目だけを担当する。 */
.shophero{position:relative;margin:8px 0 8px}
.shophero .shophead{margin:0;aspect-ratio:4/3}
@media(min-width:720px){.shophero .shophead{aspect-ratio:3/1}}
.shophero-ov{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;border-radius:0 0 12px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.38) 55%, rgba(0,0,0,0));pointer-events:none}
.shophero-ov h1{margin:0;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.shophero-meta{margin:4px 0 0;font-size:13px;color:#fff;opacity:.96;text-shadow:0 1px 4px rgba(0,0,0,.55)}

/* ★写真ゼロの301店のうち、在籍ホストの写真があるとき＝2〜3枚を並べた帯（1枚を引き伸ばさない）。
   grid-auto-flow:columnで実際の枚数ぶんだけ等幅に割る（1枚しか無い場合の事故を避けるため
   PHP側は常に「無ければ0枚＝'none'に落とす」＝ここは1枚以上が来る前提でよい）。 */
.shopherob{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;margin:8px 0 10px;
  border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--brand-l)}
@media(min-width:720px){.shopherob{aspect-ratio:3/1}}
.shopherob .bph{display:block;overflow:hidden}
.shopherob .bph img{width:100%;height:100%;object-fit:cover;display:block}

/* ★2026-09-19（オーナー指示04f §2）→ 2026-09-23（05a §2）ヒーロー直下の要点チップ行
   （初回料金・営業時間・定休日・在籍数・エリア）。.chip は既存の36px規格をそのまま流用（押す的ではないが
   高さの物差しはそろえる）。 */
.shopchips{display:flex;flex-wrap:wrap;gap:6px 0;margin:2px 0 8px}
.shopchips .chip{cursor:default}
/* ★2026-09-23（05a §2）店舗評価は在籍数をチップへ移したぶん軽い1行に（旧・箱型.counterの間延び事故を再発させない） */
.shoprate{display:flex;align-items:center;gap:4px;margin:0 0 8px;font-size:14px;color:var(--brand-d)}
.shoprate b{font-variant-numeric:tabular-nums}
.shoprate .small{color:var(--sub)}

/* ★2026-09-23（オーナー指示05a §3）料金表＝よく見る3項目（初回料金・通常料金・指名料）は常に表示、
   残りは<details>で開閉。骨格は既存の地方別開閉（.arealinks.regions summary）と同じ流儀にそろえる。 */
.card details.morefees{margin-top:8px;border-top:1px solid var(--line)}
.card details.morefees summary{cursor:pointer;list-style:none;padding:10px 2px;min-height:36px;
  display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px;color:var(--brand-d)}
.card details.morefees summary::-webkit-details-marker{display:none}
.card details.morefees summary::after{content:"＋";font-weight:700}
.card details.morefees[open] summary::after{content:"－"}
.card details.morefees table{margin-top:2px}

/* ★2026-09-30（オーナー指示・店ページの改善§3）：通常料金を【見出し】／区切りで小さな表に分けたとき
   （price_text_rows()）のネスト表。外側の<table>の中に置くので枠線を持たず、行間だけ詰める。 */
.pricesub{width:100%}
.pricesub tr:last-child th,.pricesub tr:last-child td{border-bottom:none}
.pricesub th{width:34%;font-size:12.5px}

/* ★2026-09-23（オーナー指示05a §5）押す導線＝「掲示板を見る」「気になるに入れる」を横並びの2ボタンに */
/* ★2026-09-24 オーナー指摘「枠の大きさ統一」の是正。
   実測（本番・CDP）：掲示板を見る=高さ108.4px／気になるリスト=66px（390px幅）、68.2px／45px（1280px幅）。
   幅は両方そろっていた（177px・462px）が、右側は<form>の中がボタン＋注記の2段で、その高さに
   左の<a>が引き伸ばされていた（flexの既定 align-items:stretch）。
   → ①上端で揃える（align-items:start）②2つのボタンの高さを同じ最小値で固定する。
   ③注記はボタンの外（下）に置いたままにする＝ボタンの枠には含めない。 */
.shopcta{display:flex;align-items:start;gap:8px;margin:10px 0;flex-wrap:wrap}
/* ★高さは実測でそろえる。本番実測（2026-09-24）：
   直す前 108.4 vs 66（390px）／68.2 vs 45（1280px）＝右の注記の高さに左が引き伸ばされていた。
   align-items:start で直したあと 47.1 vs 45（1280px）＝**.btn.sub の枠線1px×2**が残っていた
   → box-sizing:border-box と同じ min-height を両方に当てて完全にそろえる。 */
.shopcta>a.btn,.shopcta>.favbox .btn{min-height:46px;justify-content:center;box-sizing:border-box;line-height:1.3}
.shopcta>a.btn{flex:1 1 140px}
.shopcta>.favbox{flex:1 1 140px;margin:0}
.shopcta>.favbox .btn{width:100%}
/* スマホ幅は横に2つ並べると1つ177pxしかなく「気になるリストに入れる」が2行に折り返して
   高さがそろわない（実測 47.1 vs 66）。縦積みにして全幅にする＝両方1行・同じ高さになる。 */
@media (max-width:430px){
  .shopcta{flex-direction:column}
  .shopcta>a.btn,.shopcta>.favbox{flex:none;width:100%}
}

/* キャストのフォトギャラリー */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0 12px}
@media(min-width:560px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery .g{display:block;aspect-ratio:3/4;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--brand-l)}
.gallery .g img{width:100%;height:100%;object-fit:cover;display:block}

/* ★お客様向けヘッダー：ロゴ画像を中央に置く（2026-09-14）
   ロゴの水色はティファニーの帯(#81d8d0)の上だと対比1.34＝ほぼ見えないので、
   **この帯だけ白地**にしてロゴを主役にする。求人側（紺）は今までどおり。 */
.hd.center{background:var(--bg);color:var(--brand-d);justify-content:space-between;gap:6px}
.hd.center .side{flex:0 0 84px;min-width:84px}
.hd.center .logo{flex:1 1 auto;display:flex;justify-content:center;align-items:center;padding:0}
.hd.center .logo img{height:34px;width:auto;display:block}
.hd.center .acct{margin-left:0;text-align:right;color:var(--brand-d)}
.hd.center .acct a{color:var(--brand-d)}
@media(min-width:560px){.hd.center .logo img{height:40px}}

/* 気になるリストのボタン */
.favbox{margin:10px 0;display:flex;flex-direction:column;gap:4px}
.favbox .small{color:var(--sub)}

/* ホストのプロフィール（2026-09-15）：度合いは●○で。色はトークンだけ */
table.profile{width:100%;border-collapse:collapse}table.profile th{width:34%;text-align:left;color:var(--sub);font-weight:600;padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}table.profile td{padding:6px 4px;border-bottom:1px solid var(--line)}
.lvl i{display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--accent-b);background:var(--gray);margin-right:2px;vertical-align:middle}.lvl i.on{background:var(--accent);border-color:var(--accent)}
.topics .avatar{display:inline-block;width:40px;height:40px;border-radius:50%;overflow:hidden;vertical-align:middle;margin-right:6px;background:var(--gray)}.topics .avatar img{width:100%;height:100%;object-fit:cover;display:block}.topics .avatar.none{display:inline-flex;align-items:center;justify-content:center;color:var(--sub)}

/* ===== トップ再設計（2026-09-16・docs/design/2026-09-16_トップ再設計/04_統合仕様_トップ再設計.md）=====
   ★見出しだけ Google Fonts「Zen Kaku Gothic New」weight 900（読み込みは layout.php の <head> に1行）。
     新しい色トークンは足していない＝既存の --brand/--accent/--ink 系だけを使う（UI-12）。 */
h1,h2{font-family:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP',sans-serif;font-weight:900}

/* 検索ヒーロー（--brand の面の上に白い検索カード）＝ファーストビューの核。
   ★2026-09-19（オーナー指示04f §3・実測28.9%→写真中心の目標50%以上への是正）：旧来は
   「上部UI（帯＋ヘッダー＋検索カード）」を30%以内に収めることだけを狙って.heroを組んでいたが、
   検索カード自体（h1・1行の説明・都道府県＋エリアの2段・チェック＋ボタン）が縦に積み上がって
   180px（+チップ4つが2段でさらに78px）を占めていた＝写真が最初の1画面に入る余地を検索側が
   食っていた。ここから「1〜2行の小さな検索バー」に詰める：
     ①.lead（1行説明）はhtmlには残す（SEO・意味は消さない）が画面には出さない（display:none）。
     ②エリアの2段目はホームでは隠す（#homeSearchArea・都道府県だけで/shopsに渡す＝
       「都道府県・今すぐ行ける・探す」の3点だけを仕様どおり残す。エリア指定は/shops側で行う）。
     ③.searchcardをflex-wrapにし、都道府県セレクトとチェック＋ボタンを横に並べ、幅が足りない
       端末だけ自動で2行目へ折り返す（固定で2行にはしない＝広い端末では1行で収まる）。
   （チップ4つは .hero の外＝合格条件の「検索カード」の面積計算に含めない。実測は 04_統合仕様...md 合格条件4）。 */
.hero{background:var(--brand);color:var(--on-brand);border-radius:12px;padding:5px 12px 6px;margin:5px 0 3px}
.hero h1{font-size:15px;line-height:1.3;margin:0 0 6px}
.hero .lead{display:none}
.searchcard{background:#fff;border-radius:9px;padding:6px 8px;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.searchcard select{margin:0;flex:1 1 120px;min-width:90px;font-size:13px;min-height:36px;padding:0 6px}
/* ★ホームの検索バーは都道府県だけ（エリアは/shopsの絞り込みフォームに任せる・判断はこの1行だけ）。
   idは pref_area_select_html('homeSearch', …) が生成するもの固定＝/shopsの#shopsSearchAreaは対象外。 */
#homeSearchArea{display:none}
.searchcard .scrow2{display:flex;align-items:center;gap:8px;margin:0;flex:1 1 150px}
/* ★2026-09-17（第7回敵対的レビュー新規-Eの是正）：実描画で高さ20pxしか無く、押す的が同じ検索カード内の
   「探す」ボタンに近すぎて誤操作を招いていた（基準36px・.formchkと同じ最小高に揃える＝判断1か所）。 */
.searchcard label.chk{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);margin:0;font-weight:600;flex:1 1 auto;min-width:0;min-height:36px;white-space:nowrap}
.searchcard label.chk input{width:auto;flex:none}
.searchcard .btn{padding:0 16px;font-size:13px;flex:0 0 auto;min-height:36px}
/* ★チップ4つは1行に固定し、幅が足りなければ横スクロール（縦に2段化して高さを食わない・押す的36pxは維持）。 */
.chiprow{margin:2px 0 2px;display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0}
.chiprow .chip{flex:0 0 auto}
/* ★2026-09-19 オーナー決定（04g）：トップ最上位バナー枠「TOP」。検索カード直下＝チップ列の下＝
   最初の1画面に置く唯一の広告枠（S・A・Bは最初の1画面に置かない仕様のまま＝この枠だけの例外）。
   S特集（.feature）と同じ表紙型＝店の指定サイズ画像1200×400（AD_SIZE_S＝04iでバナーを1段細く・
   旧1200×600の2:1から3:1へ）をそのまま流用（テンプレ共有）。 */
.topslot{padding:0;overflow:hidden;margin:2px 0 12px}
.topslot .tph{aspect-ratio:3/1;background:var(--brand-l);position:relative}
.topslot .tph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.topslot .tph .fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:var(--brand-d);text-align:center;padding:12px}

/* ★契約0のとき（オーナー指示）：本物の店の広告に見えない見た目＝写真なし・淡い地・
   点線ではなく細い線の枠に「PR枠　この場所に広告を掲載できます」＋/listingへのリンクだけ。 */
.topslot.empty .tph{background:var(--gray);border:1px solid var(--line);position:static;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:18px 14px}
.topslot.empty .tph .badge.pr{position:static;margin:0}
.topslot .tmsg, .areafeature .tmsg, .hbtile .tmsg{margin:0;font-size:13px;color:var(--ink-2)}
.topslot .tlink, .areafeature .tlink, .hbtile .tlink{font-size:13px;font-weight:700;color:var(--brand-d)}

/* ★2026-09-19（04j）：トップの「ホストグラビア」節（雑誌型モザイク・.mosaic/.mcard・PR混入告知の
   .adnotice）は廃止した（その場所はB枠に置き換え）。2026-09-21（04m）：B枠自体もその後「店もホストも
   同じ見た目の小さいバナー一覧」に作り替え、専用クラス.areafeature.bbandは廃止＝下の.hostbannergrid/
   .hbtile（個人バナーと共有する部品）に統一した（下記）。 */

/* パス（初回特典）カード */
.passcard .ttl{font-size:16px;font-weight:800;margin:0 0 4px;color:var(--brand-d)}

/* 特集PR枠（契約店の表紙カード。1枚だけ・契約ゼロなら出さない）。
   ★2026-09-16 修正：「PR」は絶対配置で店名に重ねない＝店名の前にインラインで置く（表紙型＝上16:9写真・下に文字）。
   ★2026-09-26 オーナー指示（アプリ画面のスクショに赤丸つき「PRの所、画像だけにして」）：下の文字帯
   （旧.fb＝PRバッジ＋店名＋説明文）は消し、**画像だけ**にした。景品表示法のステマ規制（広告と分かる表示）は
   S特集を包む「スポンサー」見出し（home_sponsor_section_html()）が担う＝この.featureは常にその見出しの
   節の中でしか使わない（節の外に単独では出さない）。旧.fb関連のCSSも実体が無くなったため削除した。 */
.feature{padding:0;overflow:hidden}
/* ★2026-09-17（第7回敵対的レビュー新規-Fの是正）：実描画で絵の上端706px・PRラベルの上端919pxとなり、
   1画面目（844px）に絵だけが入りラベルは画面外だった（景表法ステマ規制＝広告と分からない表示になりうる）。
   ①高さを16:9(≈219px)より短くする（16:9〜D枠の3:1(130px)の中間＝2:1(195px)）②ラベルは絵の上に絶対配置で
   重ね、絵が1pxでも見えた瞬間に必ず一緒に見える形にする＝高さの調整に頼らない二重の対策にする。
   ★2026-09-19 オーナー決定（04i・バナーを1段細く）：2:1→3:1（画像1200×600→1200×400＝AD_SIZE_S）。
   高さがさらに縮むのでラベル絶対配置の二重対策は今回も維持（絵が1pxでも見えれば必ず一緒に見える）。
   ★2026-09-26：画像だけになったため、上記の「絵の上に絶対配置で重ねる」対策は不要になった（そもそも
   重ねるラベル自体が無い）。CSSのコメントとして経緯だけ残す。 */
.feature .fph{aspect-ratio:3/1;background:var(--brand-l);position:relative}
.feature .fph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.feature .fph .fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--brand-d);font-weight:700;font-size:14px;padding:10px;text-align:center}

/* ★2026-09-26 オーナー指示（広告動画 第1段）：TOP枠・S特集は動画（<video class="admedia">）も出せる。
   画像<img>と同じ箱にぴったり収める（.tph/.fph側のaspect-ratioは変えない＝箱の形は共通のまま）。
   poster用の<img class="admedia adposter">は既定で隠す（videoが出ている間は不要）。
   ★読み込み失敗時：<video>のonerror（home_feature_media_html()）がこのvideoをdisplay:noneにし、
     直後のadposter（同じ絵の静止画）をdisplay:blockにする＝JSでの明示的な切り替え。
   ★prefers-reduced-motionのときは、JSを待たずCSSだけで最初からvideoを隠しposterを出す
     （自動再生する動画を見せない、が優先＝OSの設定を尊重）。 */
.tph .admedia, .fph .admedia{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.tph .adposter, .fph .adposter{display:none}
@media(prefers-reduced-motion:reduce){
  .tph video.admedia, .fph video.admedia{display:none}
  .tph .adposter, .fph .adposter{display:block}
}

/* D エリア頁の先頭（文脈広告・仕様書04b）。全幅4:1＝.feature（3:1）より低い帯。同じ表紙型で流用する。
   ★2026-09-19 オーナー決定（04i・バナーを1段細く）：3:1→4:1（画像1200×400→1200×300＝AD_SIZE_A）。
   ★2026-09-20 オーナー決定（04l）：個人バナーは480×160（3:1）専用の寸法に独立したため、
   このクラス（.areafeature .afph・4:1）はもう個人バナーとは共有しない（下記.hostbannergrid/.hostbannerself
   が個人バナー専用のCSS＝AD_SIZE_Aを直してもここは追随しない・個人バナーの寸法はAD_SIZE_HOST1か所）。
   ★2026-09-21 オーナー決定（04m）：B枠も個人バナーと同じAD_SIZE_HOSTへ移ったため、B枠は
   もうこの.areafeature（4:1）を使わない＝Aエリア帯（.areafeature adband）専用のクラスになった。 */
.areafeature{padding:0;overflow:hidden;margin-bottom:12px}
.areafeature .afph{aspect-ratio:4/1;background:var(--brand-l)}
.areafeature .afph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.areafeature .afph .fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--brand-d);font-weight:700;font-size:14px;padding:10px;text-align:center}
.areafeature .afb{padding:10px 12px 12px}
.areafeature .afb .badge.pr{font-size:13px;margin:0 6px 0 0;vertical-align:2px;background:#fff}
.areafeature .afb .nm{font-size:16px;font-weight:800;color:var(--ink)}
.areafeature .afb .small{margin:5px 0 0}

/* ★2026-09-20 オーナー決定（04l）→2026-09-21 オーナー決定（04m）：個人バナーの「小さいタイル形式」
   （実測ホスホスのトップ大バナー724×100・一覧タイル230×78を参考に480×160＝3:1＝AD_SIZE_HOSTに決定）を
   店の広告枠（B＝「スポンサー」）にもそのまま共有した＝**タイルの見た目（角丸・PR位置）を店用と同じ
   部品にする＝CSSクラスを共通化して2種類書かない**（04m §2）というオーナー決定。
   ★2026-09-22 オーナー決定（04m追記2）：見出し「ホストからのPR」の節は「スポンサー」節（B）に統合
   された＝店の契約バナーとホストの契約個人バナーが**同じ一覧・同じタイル**として混ざって出る
   （home_sponsor_grid_html()・app/pages/public.php が唯一の呼び出し元）。列数（PC3列・スマホ2列）を
   ここで1回変えれば一覧全体が変わる。
   ①個人ページ上部の単体掲載（リンク無し）＝.hostbannerself（host_banner_card_html()）はこれと別（下記）。
   ★2026-09-21 追記（オーナー「バナー表示の方法もホスホスに合わせたい」§1・§4）：タイルは**画像だけ**
   （下の文字箱.hbb/.nm/.shは廃止）。「PR」だけは景表法のステマ規制（明瞭区分）のため画像の上に小さく
   重ねる＝.feature .fph .badge.pr（S特集・TOP枠）と同じ絶対配置の流儀に揃えた。 */
.hostbannergrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0}
.hbtile{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;color:inherit;text-decoration:none}
.hbtile .hbph{aspect-ratio:3/1;background:var(--brand-l);position:relative}
.hbtile .hbph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}

/* ★契約0（候補0件）のときの空タイル1枚＝topslot.empty／旧areafeature.emptyと同じ考え方（写真なし・
   淡い地・細い線＋「PR枠　この場所に広告を掲載できます」＋/listing）。.hbtileは<a>のことも<div>（空枠）
   のこともあるので、text-decoration:none等の基本ルールはタグに関わらず.hbtileセレクタ1つで効く。 */
.hbtile.empty .hbph{background:var(--gray);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:14px 10px}
.hbtile.empty .hbph .badge.pr{position:static;margin:0}
/* ★2026-09-26：空き枠は実タイルと同じ3:1に必ず収める（中身で縦に伸ばさない＝padding/gapを詰めてはみ出しは隠す） */
/* ★サイト共通の .empty（padding:16px・灰色の地）が .hbtile.empty の外枠にも効き、枠が実タイルより縦に伸びていた（実測 304×124 vs 304×103）＝外枠の余白と地を打ち消す */
.hbtile.empty{padding:0}
.hbtile.empty .hbph{padding:4px 8px;gap:2px;overflow:hidden}
.hbtile.empty .tmsg{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.08em;display:flex;align-items:center;gap:6px}
.hbtile.empty .tlink{font-size:11px}
/* ★2026-09-26 オーナー指示「空き枠も並べて埋める」：契約が少ない間は空き枠（プレースホルダ）で
   埋めて合計を最低9枚に見せる（sponsor_grid_total_count()）。PC3列は割り切れるが、スマホ2列だと
   合計が9（奇数）のとき最後の行が1枚だけ半端に残る＝最後の空き枠1枚だけスマホ幅で隠す
   （実タイル・実契約の枠は絶対に隠さない＝隠すクラスを付けるのはhome_sponsor_empty_tile_html()の
   プレースホルダだけ）。 */
.hbtile.hidemobile{display:none}
@media(min-width:720px){.hostbannergrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:720px){.hbtile.hidemobile{display:block}}

.hostbannerself{padding:0;overflow:hidden;margin-bottom:12px}
.hostbannerself .hbsph{aspect-ratio:3/1;background:var(--brand-l)}
.hostbannerself .hbsph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.hostbannerself .hbsb{padding:6px 10px}
.hostbannerself .hbsb .badge.pr{font-size:12px;margin:0;background:#fff}

/* ★2026-09-18 オーナー指示（04d）§2：トップ「ホストYouTube特集」。押すとYouTubeを新しいタブで開くだけ
   （iframeは埋め込まない＝外部のJS・Cookieを読み込まない）。サムネは元が4:3(hqdefault)なので
   CSSのaspect-ratio+object-fit:coverで16:9の箱に収める（実寸を偽らずwidth/heightは書かない）。 */
.ytgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0}
.ytcard{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;color:inherit;text-decoration:none}
.ytcard .ytthumb{display:block;aspect-ratio:16/9;background:var(--brand-l);position:relative}
.ytcard .ytthumb img{width:100%;height:100%;object-fit:cover;display:block}
.ytcard .ytthumb .badge{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.72);color:#fff;font-size:11px}
.ytcard .ytb{display:block;padding:8px 10px 10px}
.ytcard .yttitle{font-size:13px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.ytcard .ytmeta{font-size:11px;color:var(--sub);margin-top:4px}

/* エリアから探す（都道府県をJIS順＝北海道→沖縄で束ねた文字リンク。1都道府県＝1行に流し込む） */
.arealinks{display:grid;grid-template-columns:1fr;gap:5px 16px;margin:8px 0 4px}
.arealinks .pg{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;font-size:12.5px;line-height:1.9;overflow-wrap:anywhere}
.arealinks .pref{flex:0 0 auto;color:var(--ink-2);font-weight:700}
.arealinks .links{display:flex;flex-wrap:wrap;column-gap:2px}
.arealinks .links a{color:var(--brand-d)}
.arealinks .links .sep{color:var(--sub);padding:0 2px}
@media(min-width:560px){.arealinks{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.arealinks{grid-template-columns:repeat(3,1fr)}}

/* 新しく参加したホスト（文字リンクだけ・写真なし。2026-09-16 否定レビュー：内部リンク本数の是正） */
.textlinks{display:flex;flex-wrap:wrap;gap:8px 16px;margin:8px 0 4px}
.textlinks a{font-size:12.5px;color:var(--brand-d);line-height:1.4}
.textlinks a .sh{display:block;font-size:11px;color:var(--sub);font-weight:400}

/* 今日の数字（実測できる当日の数字だけ・1行） */
.todayline{margin:14px 0;font-size:12px;color:var(--sub)}

/* ページ送り（2026-09-17 第3弾・重要-7） */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0}
.pager .cur{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pager span.btn[aria-disabled]{opacity:.4;pointer-events:none}
/* ★2026-09-19（オーナー「バナーデカすぎる」・PC幅1440で実測）：スマホ用の全幅カードがPCではそのまま
   拡大され、S特集が約940×470pxになっていた。S特集とA帯は中央寄せで幅に上限を置く（スマホ幅は不変）。 */
/* ★2026-09-27 オーナー指示「PC版、大きいバナー画像がカラム幅が整頓されていないので合わせたい」：
   09-19の「720に揃えて」（当時は2:1で940×470と大きすぎた）を撤回し、TOP枠・S特集・A帯は本文の段
   （スポンサー一覧・見出しと同じ幅）いっぱいに揃える。寸法は3:1（A帯は4:1）なのでPC1280で約932×311。 */
/* ★2026-09-19 エリアから探す＝地方ごとの開閉（押すと都道府県が出る）。開いた地方は横幅いっぱいに広がる */
.arealinks.regions{grid-template-columns:repeat(2,1fr);gap:8px}
.arealinks.regions .region{border:1px solid var(--line);border-radius:10px;background:#fff}
.arealinks.regions .region[open]{grid-column:1/-1}
.arealinks.regions summary{cursor:pointer;list-style:none;padding:0 14px;min-height:44px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:14px;color:var(--ink)}
.arealinks.regions summary::-webkit-details-marker{display:none}
.arealinks.regions summary::after{content:"＋";color:var(--brand-d);font-weight:700}
.arealinks.regions .region[open] summary::after{content:"－"}
.arealinks.regions .rbody{padding:0 14px 10px;display:grid;gap:4px}
@media(min-width:560px){.arealinks.regions{grid-template-columns:repeat(4,1fr)}}
/* ★2026-09-19 YouTubeの動画カードもPC幅で巨大化していた（2列のまま1枚 約460px幅）→ PC幅は4列（トップ・/youtube・店頁で共通） */
@media(min-width:720px){.ytgrid{grid-template-columns:repeat(4,1fr)}}
/* ★2026-09-19 オーナー「バナーはリンクしてね」：広告バナー（TOP・S・A帯・Aエリア・B・個人）は絵と店名ごと押せる */
.adlink{display:block;color:inherit;text-decoration:none}
.adlink:hover .nm{text-decoration:underline}

/* ===== アプリのダウンロード導線（2026-09-23 App Store 配信開始・オーナー決定「フッター＋トップに帯」） =====
   ★見た目の判断はここだけ。HTMLを出すのは app/appdownload.php の1か所（.appdl / .asbadge）。
   ★面の色は必ずトークンで書く（memory `theme-tokens-never-hardcode-surface-colors`）＝直書きしない。
   ★バッジはApple公式の絵をそのまま置く＝上から文字や色を重ねない。 */
.appdl{display:flex;align-items:center;gap:12px;background:var(--gray);border:1px solid var(--line);
  border-radius:10px;padding:12px;margin:10px 0}
.appdl-icon{border-radius:12px;flex:0 0 auto;display:block}
.appdl-text{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.appdl-text b{font-size:14px;font-weight:800;color:var(--ink)}
.appdl-text span{font-size:12px;color:var(--ink-2)}
.asbadge{flex:0 0 auto;display:inline-block;line-height:0}
.asbadge img{display:block;height:40px;width:auto}
/* フッターのバッジは左そろえで1つだけ置く */
.asbadge-footer{margin-top:10px}
/* スマホ幅（〜430px）では帯を2段にする＝バッジが文字を押し出して改行地獄になるのを防ぐ */
@media (max-width:430px){
  .appdl{flex-wrap:wrap}
  .appdl-badge{width:100%;margin-top:2px}
  .appdl-badge img{margin:0 auto}
}

/* ===== SNS（アイコン＋アカウント名＋リンク）2026-09-24 オーナー指示 =====
   ★出すのは app/seo.php の sns_links_html() 1か所。ここは見た目だけ。
   ★押す的は36px以上（mobile_check.mjs の物差しに合わせる）。面の色はトークンで書く。 */
.snsrow{display:flex;flex-wrap:wrap;gap:8px}
.snslink{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 10px;
  border:1px solid var(--line);border-radius:999px;background:var(--gray);
  font-size:13px;font-weight:700;color:var(--ink-2);text-decoration:none;line-height:1.2}
.snslink .ic{flex:0 0 auto}
.snsname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14em}

/* ===== 広告の「PR」は画像の下に置く（2026-09-25 オーナー指示「画像の中にあるPRを無くして」）=====
   ⚠️PRの表示そのものは景品表示法のステマ規制（広告と分かる表示）で必要＝消さずに場所だけ移す。
   これまでは position:absolute で画像の左上に重ねていた（TOP枠・S特集・スポンサー・個人バナー）。
   Aエリアは元から画像の下（.afb）だったので、そちらに全部そろえる＝流儀を1つにする。
   ★2026-09-26 オーナー指示で「スポンサー」節（S特集＋タイル一覧）はさらに画像だけへ変わった＝
   S特集・タイル・個人バナー（節の中の分）はこの.adprを使わなくなった。**TOP枠（契約あり）だけ**が
   引き続き.adprを使う（TOP枠は「スポンサー」節の外＝見出しで広告と分からないため、PRは残す）。
   門番 AD-PR-OUTSIDE-01 が「見出しが1つ・節の中は画像だけ・節の外にはPRが残っている」を見る。 */
.adpr{padding:6px 10px;line-height:1}
.adpr .badge.pr{margin:0;font-size:12px;font-weight:800;background:#fff}

/* ★2026-10-02 グループ特集（/groups）：グループごとのカード。バナー（3:1）は幅いっぱい・PCでは420pxまで。
   店の一覧は既存の .row、残りの店とグループは既存の <details>（.morefees／.rosterall）をそのまま使う。 */
.groupcard{scroll-margin-top:70px}
.groupcard .gbanner{display:block;max-width:420px;border-radius:10px;overflow:hidden;margin-bottom:8px}
.groupcard .gbanner img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
.groupcard h2{margin:2px 0 4px;font-size:20px}
/* ★実描画で発覚：既存の .row .nm（店一覧の大きい店名）のままだと店名がグループ名より大きく見え、見出しの上下が逆になる */
.groupcard .row{padding:8px 2px}
.groupcard .row .nm{font-size:14.5px;font-weight:600}
.groupcard > .meta{font-size:12.5px;color:var(--sub);margin-bottom:4px}
.groupcard .row .meta{font-size:12px;color:var(--sub);margin-left:auto}
.groupsall{margin:12px 0}


/* ★2026-10-04 Apple／Googleでのログイン。色・余白は各社の指針の値をそのまま使う（サイトの色トークンに寄せない）。
   Apple＝公式のボタン画像（appleid.cdn-apple.com の画像APIで取得・ja_JP・黒）を加工せず表示。
   Google＝Light：塗り#FFFFFF／線#747775 1px／文字#1F1F1F 14px／左12px・ロゴ後10px・右12px。Gロゴは公式素材から切り出し（色・形は無加工）。 */
.oidc-buttons{display:flex;flex-direction:column;align-items:center;gap:12px;margin:8px 0 12px}
.oidc-btn{display:inline-flex;align-items:center;justify-content:center;width:300px;max-width:100%;height:44px;text-decoration:none;box-sizing:border-box}
.oidc-apple img{display:block;width:300px;max-width:100%;height:auto}
.oidc-google{background:#FFFFFF;border:1px solid #747775;border-radius:8px;color:#1F1F1F;font-size:14px;line-height:20px;font-weight:500;
  font-family:"Google Sans",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif;padding:0 12px}
.oidc-google img{width:20px;height:20px;margin-right:10px;flex:none}
details.phone-login{margin:12px 0}
details.phone-login>summary{cursor:pointer;color:var(--sub);font-size:13px;padding:6px 0}