/* メンエス・コンパス 公開ページ用
   配色（2026-09-26 変更）：oboro-media.co.jp/menes/ の色の雰囲気に合わせた
   空色 #81d6fc（メイン）＋ ピンク #fcb0e4（アクセント）＋ 白地・文字 #333。見出し帯は空色→ピンクのグラデーション
   ※合わせたのは色だけ。ロゴ・画像・文章・レイアウトは写していない
   境界ルール（講座4-5）：html/body は白。外周のグレー枠・浮いたカードの見せ方はしない */
:root{
  --main:#81d6fc; --main-deep:#2f9fd3; --main-pale:#f3fdff; --main-soft:#e3f6fe;
  --pink:#fcb0e4; --pink-deep:#d764b5; --pink-pale:#fff2f0;
  --grad:linear-gradient(to right,#81d6fc,#fcb0e4);
  --cta:linear-gradient(135deg,#92baf8 0%,#deb2ef 55%,#d777f4 100%);
  --link:#3b67f7; --ink:#333333; --muted:#666666; --line:#dcdcdc; --bg-soft:#f8f9fa; --radius:6px;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;-webkit-text-size-adjust:100%}
a{color:var(--link)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ロゴ（左の列とフッターで使う） */
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.logo svg{width:40px;height:40px;flex:none}
.logo-name{font-family:var(--serif);font-size:24px;letter-spacing:.06em;line-height:1.1;display:block}
.logo-sub{font-size:11px;letter-spacing:.2em;color:var(--main-deep);display:block}
.page-h1-bar{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.page-h1{margin:0;padding:6px 0;font-size:12px;font-weight:400;color:var(--muted)}

/* ヒーロー（キャッチはH1にしない） */
.hero{position:relative;color:var(--ink);background:#141a2a url(../img/hero-bg.jpg) center right/cover no-repeat;min-height:440px;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(243,253,255,.86) 45%,rgba(252,176,228,.30) 100%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;width:100%;padding-top:48px;padding-bottom:48px}
.hero-catch{font-family:var(--serif);font-size:52px;line-height:1.35;letter-spacing:.08em;margin:0 0 20px}
.hero-lead{margin:0 0 24px;font-size:15px;line-height:2;opacity:.95}
.hero-tag{display:flex;align-items:center;gap:14px;font-size:13px;opacity:.9}
.hero-tag::before{content:"";width:44px;height:2px;background:var(--grad)}
.search-box{background:#fff;border:2px solid var(--main);box-shadow:0 4px 14px rgba(129,214,252,.25);padding:22px;border-radius:var(--radius);backdrop-filter:blur(2px)}
.search-box label{display:block;font-size:15px;margin-bottom:10px}
.search-row{display:flex}
.search-row select{flex:1;min-width:0;height:52px;border:1px solid var(--line);border-right:0;border-radius:var(--radius) 0 0 var(--radius);padding:0 14px;font-size:15px;color:var(--ink);background:#fff}
.search-row button{height:52px;border:0;padding:0 26px;background:var(--cta);color:#fff;font-size:16px;border-radius:0 var(--radius) var(--radius) 0;cursor:pointer}
.search-row button:hover{opacity:.88}
.search-note{font-size:12px;margin-top:10px;opacity:.85}

/* セクション見出し */
.sec{padding:64px 0}
.sec-soft{background:var(--main-pale)}
.sec-head{text-align:center;margin-bottom:32px}
.sec-en{display:block;color:var(--main-deep);font-family:var(--serif);font-size:12px;letter-spacing:.3em}
.sec-title{font-family:var(--serif);font-size:30px;font-weight:600;margin:4px 0 6px;letter-spacing:.04em}
.sec-sub{color:var(--muted);font-size:14px;margin:0}

/* エリアボタン */
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.area-btn{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:var(--ink);background:#fff;font-weight:500}
.area-btn:hover{border-color:var(--main)}
.area-btn .pin{color:var(--main);flex:none}
.area-btn .cnt{margin-left:auto;font-size:12px;color:var(--muted);font-weight:400}
.pref-list{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:14px}
.pref-list span{color:#b7b7b7}

/* ランキングカード（トップ・県） */
.rank3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px 20px}
.rcard .ribbon{position:absolute;top:-10px;left:18px}
.rcard-area{font-size:12px;color:var(--muted);margin:14px 0 2px}
.rcard-name{font-size:18px;font-weight:700;margin:0 0 8px;line-height:1.5}
.rcard-name a{text-decoration:none;color:var(--ink)}
.rcard-name a:hover{color:var(--main-deep)}
.rcard-desc{font-size:13px;color:#454b57;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tags li{font-size:12px;background:var(--main);color:#fff;padding:2px 10px;border-radius:5px}

/* 使い方3ステップ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{display:flex;gap:16px;align-items:flex-start}
.step-num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--main);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif)}
.step-ico{flex:none;color:var(--pink-deep)}
.step h3{margin:0 0 4px;font-size:17px}
.step p{margin:0;font-size:13px;color:var(--muted)}

/* パンくず・ページ見出し */
.crumb{font-size:13px;color:var(--muted);padding:14px 0;margin:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumb li+li::before{content:"›";margin-right:6px;color:#bbb}
.crumb a{color:var(--muted)}
.ph{padding:8px 0 26px;border-bottom:1px solid var(--line);position:relative}
.ph h1{font-family:var(--serif);font-size:30px;line-height:1.45;margin:0 0 10px}
.ph .catch{font-size:16px;color:var(--main-deep);font-weight:700;margin:0 0 8px}
.ph .lead{margin:0;color:#3f4552;font-size:15px}
.ph .deco{position:absolute;right:0;top:-20px;width:120px;opacity:.9;pointer-events:none}

/* 絞り込み */
.filter{margin:26px 0;padding:16px 18px;background:var(--main-pale);border:1px solid var(--main);border-radius:var(--radius);display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.filter-title{font-weight:700;font-size:14px}
.filter label{font-size:14px;display:flex;align-items:center;gap:6px;cursor:pointer}
.filter button{margin-left:auto;background:var(--cta);color:#fff;border:0;border-radius:var(--radius);padding:8px 18px;cursor:pointer}
.filter .clear{font-size:13px}

/* エリアのランキング */
.h2{font-family:var(--serif);font-size:22px;margin:40px 0 18px;line-height:1.5;background:var(--grad);color:#fff;padding:10px 16px;border-radius:4px}
.shop-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.scard{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:#fff;position:relative}
.scard.first{border-color:var(--main);box-shadow:0 0 0 1px var(--main) inset}
.scard-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rank-no{display:inline-flex;align-items:center;gap:4px;font-family:var(--serif);font-size:20px;color:var(--main-deep);font-weight:700}
.scard.first .rank-no{color:var(--pink-deep)}
.type{font-size:12px;background:var(--main);color:#fff;padding:0 8px;border-radius:5px}
.score{margin-left:auto;font-size:14px;color:var(--pink-deep);font-weight:700}
.scard h3{margin:8px 0 6px;font-size:20px;line-height:1.5}
.scard h3 a{color:var(--ink);text-decoration:none}
.scard h3 a:hover{color:var(--main-deep)}
.meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;color:#3f4552;margin:0 0 12px;padding:0;list-style:none}
.meta b{font-weight:400;color:var(--muted);margin-right:4px}
.fx{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0 0 12px;padding:0;list-style:none}
.fx li{text-align:center;font-size:12px;padding:6px 4px;border-right:1px solid var(--line);background:#fff}
.fx li:last-child{border-right:0}
.fx .mk{display:block;font-size:16px;line-height:1.3}
.fx .on{background:var(--main-soft)}
.fx .on .mk{color:var(--main-deep)}
.fx .off .mk{color:#c3c3c3}
.intro{font-size:14px;color:#3f4552;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.coupon{display:flex;gap:10px;align-items:center;background:var(--pink-pale);border:1px dashed var(--pink);border-radius:var(--radius);padding:8px 12px;font-size:14px;margin:0 0 12px}
.coupon .lbl{background:var(--pink-deep);color:#fff;font-size:11px;padding:1px 8px;border-radius:3px;letter-spacing:.1em}
.coupon small{color:var(--muted);display:block}
.today{font-size:13px;color:var(--main-deep);margin:0 0 12px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--radius);text-decoration:none;font-size:14px;font-weight:700}
.btn-main{background:var(--cta);color:#fff}
.btn-main:hover{opacity:.88}
.btn-sub{background:#fff;color:var(--main-deep);border:1px solid var(--main)}
.btn-gold{background:var(--cta);color:#fff}
.empty{padding:30px;text-align:center;background:var(--bg-soft);border-radius:var(--radius);color:var(--muted)}
.area-info{background:var(--pink-pale);border-radius:var(--radius);padding:22px 24px;font-size:15px}
.area-info p{margin:0}
.near{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.near a{display:inline-block;border:1px solid var(--line);border-radius:var(--radius);padding:6px 14px;text-decoration:none;color:var(--ink);font-size:14px}
.near a:hover{border-color:var(--main)}
.near .cur{background:var(--main);color:#fff;border-color:var(--main)}

/* 店舗ページ */
.spec{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 20px}
.spec th,.spec td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top}
.spec th{width:28%;color:var(--ink);font-weight:500;background:var(--bg-soft)}
/* 店舗画像（元サイト＝近くのランキングと同じ出し方：PCはカード左に幅280px、SPはカード上に全幅。枠は684:400で object-fit:cover） */
/* 一覧は1列。min-width:0 が無いと、横スクロールの出勤列の幅でカードが画面より広がる（375pxで実測） */
.shop-list{grid-template-columns:minmax(0,1fr)}
.scard{min-width:0}
.scard-main{display:flex;gap:20px;align-items:flex-start}
.scard-img{flex:none;width:280px;display:block;text-decoration:none}
.scard-info{flex:1;min-width:0}
.simg,.shop-hero{position:relative;aspect-ratio:684/400;overflow:hidden;background:#fff;border-radius:4px}
.simg img,.shop-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.scard-img:hover .simg img{transform:scale(1.05)}
.noimg{display:flex;align-items:center;justify-content:center;background:var(--bg-soft);border:1px solid var(--line);color:#aaa;font-size:13px;letter-spacing:.15em}
.shop-hero{max-width:760px;margin:20px auto 4px}

/* セラピストのカード（メンエスLIFEと同じ形：縦長97:139の写真に名前(年齢)と身長を重ね、出勤時刻は下に時計つき） */
.thc{display:flex;flex-direction:column;gap:4px}
.thc-photo{position:relative;aspect-ratio:97/139;border-radius:5px;overflow:hidden;background:linear-gradient(180deg,var(--main-soft),var(--pink-pale));color:#c9dfea}
.thc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thc-photo .sil{position:absolute;inset:0;width:100%;height:100%}
.thc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 57%,rgba(0,0,0,.62) 100%);pointer-events:none}
.thc-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;color:#fff;text-align:center;padding:6px 4px;line-height:1.3}
.thc-cap .nm{font-size:14px;font-weight:700}
.thc-cap .ag{font-size:11px;margin-left:2px}
.thc-cap .ms{display:block;font-size:11px}
.thc-time{display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid var(--main);background:var(--main-pale);color:var(--main-deep);border-radius:4px;font-size:12px;font-weight:700;height:24px;white-space:nowrap}
.thc-cm{font-size:12px;color:var(--muted);margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* エリアページ：本日出勤のセラピスト（メンエスLIFEのカード内の横スクロール列。今日出勤で、まだ終わっていない人を早い順に10人まで） */
.today-th{margin:14px 0 12px;border-top:1px dashed var(--line);padding-top:12px}
.today-th-head{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--main-deep)}
.today-th-head span{margin-left:8px;background:var(--main);color:#fff;border-radius:10px;padding:0 8px;font-size:12px}
.th-scroll{display:flex;gap:8px;overflow-x:auto;list-style:none;margin:0;padding:0 0 6px;scroll-snap-type:x mandatory}
.th-scroll li{flex:none;width:112px;scroll-snap-align:start}
.sample-note{margin:0 0 12px;padding:6px 10px;background:var(--pink-pale);border-radius:4px}

/* 店舗ページ：出勤情報（メンエスLIFEと同じく7日ぶんの日付タブ→その日の出勤者をカードで並べる） */
.sec-en-l{margin:40px 0 4px;font-size:12px}
.h2-en{margin-top:0}
.sd-tabs{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--main);border-radius:5px;overflow:hidden;margin:0 0 16px}
.sd-tab{text-align:center;padding:8px 2px;cursor:pointer;border-right:1px solid var(--main);background:#fff;line-height:1.3;font-size:12px;color:var(--ink)}
.sd-tab:last-child{border-right:0}
.sd-tab b{display:block;font-size:15px}
.sd-tab.sat span{color:#3b67f7}
.sd-tab.sun span{color:#e44141}
.sd-panel{display:none}
.sd-count{margin:0 0 10px;font-size:14px}
.sd-count b{color:var(--pink-deep);font-size:18px}
#sd0:checked~.sd-tabs label[for=sd0],#sd1:checked~.sd-tabs label[for=sd1],#sd2:checked~.sd-tabs label[for=sd2],#sd3:checked~.sd-tabs label[for=sd3],#sd4:checked~.sd-tabs label[for=sd4],#sd5:checked~.sd-tabs label[for=sd5],#sd6:checked~.sd-tabs label[for=sd6]{background:var(--main);color:#fff}
#sd0:checked~.sd-tabs label[for=sd0] span,#sd1:checked~.sd-tabs label[for=sd1] span,#sd2:checked~.sd-tabs label[for=sd2] span,#sd3:checked~.sd-tabs label[for=sd3] span,#sd4:checked~.sd-tabs label[for=sd4] span,#sd5:checked~.sd-tabs label[for=sd5] span,#sd6:checked~.sd-tabs label[for=sd6] span{color:#fff}
#sd0:checked~.sd-panels .sd-p0,#sd1:checked~.sd-panels .sd-p1,#sd2:checked~.sd-panels .sd-p2,#sd3:checked~.sd-panels .sd-p3,#sd4:checked~.sd-panels .sd-p4,#sd5:checked~.sd-panels .sd-p5,#sd6:checked~.sd-panels .sd-p6{display:block}
.sd input:focus-visible~.sd-tabs{outline:2px solid var(--main-deep);outline-offset:2px}
.th-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px 18px;list-style:none;margin:0 0 12px;padding:0}

.note{font-size:12px;color:var(--muted)}

/* フッター */
.gf{background:var(--main);color:#fff;margin-top:64px}
.gf .wrap{padding-top:36px;padding-bottom:24px}
.gf-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.gf-nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px}
.gf-nav a{color:#fff;text-decoration:none;opacity:.9}
.gf-bottom{border-top:1px solid rgba(255,255,255,.45);margin-top:24px;padding-top:14px;display:flex;justify-content:space-between;font-size:12px;opacity:.8;flex-wrap:wrap;gap:8px}

@media (max-width:900px){
  .hero{min-height:0}
  .hero .wrap{grid-template-columns:1fr;gap:24px;padding-top:36px;padding-bottom:36px}
  .hero-catch{font-size:34px}
  .area-grid{grid-template-columns:repeat(2,1fr)}
  .rank3,.steps{grid-template-columns:1fr}
  .th-grid{grid-template-columns:repeat(3,1fr);gap:10px 8px}
  .scard-main{flex-direction:column;gap:12px}
  .scard-img{width:100%}
  .sd-tab{font-size:11px;padding:6px 0}
  .sd-tab b{font-size:13px}
  .ph h1{font-size:24px}
  .ph .deco{display:none}
  .fx li{font-size:11px;padding:6px 2px}
  .sec{padding:44px 0}
  .sec-title{font-size:24px}
}
@media (max-width:420px){
  .wrap{padding:0 16px}
  .logo-name{font-size:20px}
  .search-row button{padding:0 16px}
}

/* ================================================================
   X（旧Twitter）と同じ3列の配置（2026-09-26）。背景は白・色は oboro の空色／ピンクのまま
   PC：左275px（ロゴ・メニュー・店舗オーナー。画面の高さに固定）｜真ん中760px（本文。左右に細い罫線）｜右350px（検索・人気エリア。囲まずに並べる。本文との間に24px）
   狭い画面の切り替え（Xと同じ順番）：
     1410px以上        … 3列（275＋760＋24＋350＝1409px）
     1080〜1409px      … 右の列を消す（左275px＋本文）
     700〜1079px       … 左の列をアイコンだけの細い列（72px）に
     699px以下（スマホ）… 左のメニューは画面下のタブバー、ロゴと店舗オーナーは上の細い帯、右の列の中身（検索・人気エリア）は本文の下
   ================================================================ */
:root{--xline:#e5e9ec}
.xl{display:grid;grid-template-columns:275px minmax(0,760px) 374px;grid-template-areas:"left main right" "left foot right";grid-template-rows:1fr auto;justify-content:center;min-height:100vh}
.xl-left{grid-area:left;position:sticky;top:0;align-self:start;height:100vh;height:100dvh}
.xl-left-in{height:100%;display:flex;flex-direction:column;padding:10px 20px 20px 8px;overflow-y:auto}
.xl-left .logo{padding:10px 12px;margin-bottom:6px;border-radius:9999px}
.xl-left .logo:hover{background:var(--main-pale)}
.xl-left .logo-name{font-size:20px;letter-spacing:.02em;white-space:nowrap}
.xl-left .logo-sub{white-space:nowrap;letter-spacing:.08em}
.xnav{display:flex;flex-direction:column;gap:2px}
.xnav-a{display:flex;align-items:center;gap:18px;padding:11px 16px 11px 12px;border-radius:9999px;color:var(--ink);text-decoration:none;font-size:19px;line-height:1.3;width:max-content;max-width:100%}
.xnav-a:hover{background:var(--main-pale)}
.xnav-a .xi{flex:none}
.xnav-a.is-cur{font-weight:700;color:var(--ink)}
.xnav-a.is-cur .xi{color:var(--main-deep);stroke-width:2.4}
.xowner{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 0;height:52px;border-radius:9999px;background:var(--cta);color:#fff;text-decoration:none;font-size:16px;font-weight:700;box-shadow:0 4px 12px rgba(215,119,244,.25)}
.xowner:hover{opacity:.9}
.xowner .xi{display:none}
.xl-main{grid-area:main;min-width:0;border-left:1px solid var(--xline);border-right:1px solid var(--xline);background:#fff}
.xl-main>.wrap{max-width:none}
.xl-main>.wrap:last-child{padding-bottom:40px}
.gf{grid-area:foot;min-width:0;margin-top:0;border-left:1px solid var(--xline);border-right:1px solid var(--xline)}
.xl-right{grid-area:right;position:sticky;top:0;align-self:start;max-height:100vh;max-height:100dvh;overflow-y:auto;padding:16px 0 24px 24px;min-width:0}
/* 縦のスクロールバーは画面に出さない（れのぼ指示・Xの画面にも見えていない）。スクロールそのものはマウスホイール・タッチでできる
   対象＝ページ全体と、固定して残す左右の列。本文の中の横スクロール（本日出勤の列）は今までどおり */
html,body,.xl-left-in,.xl-right{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,.xl-left-in::-webkit-scrollbar,.xl-right::-webkit-scrollbar{display:none;width:0;height:0}
.xr-in{display:flex;flex-direction:column;gap:28px}
/* 右の列：検索と人気エリアは囲まずにそのまま並べる（れのぼ指示：角丸の囲み・枠線・背景色の区切りを作らない） */
.xr-title{display:block;font-size:19px;font-weight:700;line-height:1.4;margin:0 0 10px}
.xsearch .search-row select{height:46px;font-size:14px;padding:0 10px}
.xsearch .search-row button{height:46px;padding:0 18px;font-size:15px}
.xr-list{list-style:none;margin:0;padding:0}
.xrow{display:flex;flex-direction:column;padding:8px 0;text-decoration:none;color:var(--ink);line-height:1.45}
.xrow:hover .xrow-main{color:var(--main-deep)}
.xrow-main{font-size:15px;font-weight:700}
.xrow-sub{font-size:12px;color:var(--muted)}
/* 本文の列が760pxになったので、横に4つ並べていたエリアのボタンは3つに。ヒーローのキャッチも列に収まる大きさに */
.xl-main .area-grid{grid-template-columns:repeat(3,1fr)}
.xl-main .hero-catch{font-size:40px}
.xl-main .ph .deco{right:8px}

@media (max-width:1409px){
  .xl{grid-template-columns:275px minmax(0,760px);grid-template-areas:"left main" "left foot"}
  .xl-right{display:none}
}
@media (max-width:1079px){
  .xl{grid-template-columns:72px minmax(0,760px)}
  .xl-left-in{padding:10px 8px 20px;align-items:center}
  .xl-left .logo{padding:8px}
  .logo-txt,.xnav-t,.xowner-t{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .xnav{align-items:center}
  .xnav-a{padding:12px;gap:0}
  .xowner{width:52px;height:52px;padding:0}
  .xowner .xi{display:block}
}
@media (max-width:699px){
  .xl{grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "main" "right" "foot";grid-template-rows:auto;padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .xl-left{position:static;height:auto;border-bottom:1px solid var(--xline)}
  .xl-left-in{flex-direction:row;align-items:center;justify-content:space-between;padding:6px 12px;overflow:visible}
  .xl-left .logo{padding:4px;min-width:0;gap:6px}
  .xl-left-in{gap:8px}
  .logo-txt{position:static!important;width:auto;height:auto;overflow:visible;clip:auto}
  .xl-left .logo svg{width:32px;height:32px}
  .xl-left .logo-name{font-size:17px;letter-spacing:0}
  .xl-left .logo-sub{font-size:9px;letter-spacing:.02em}
  .xowner{flex:none;margin:0;width:auto;height:34px;padding:0 12px;font-size:12px;box-shadow:none}
  .xowner .xi{display:none}
  .xowner-t{position:static!important;width:auto;height:auto;overflow:visible;clip:auto}
  .xnav{position:fixed;left:0;right:0;bottom:0;z-index:50;flex-direction:row;justify-content:space-around;align-items:stretch;gap:0;background:rgba(255,255,255,.97);border-top:1px solid var(--xline);padding:0 0 env(safe-area-inset-bottom)}
  .xnav-a{flex:1;flex-direction:column;justify-content:center;gap:2px;padding:6px 0 5px;border-radius:0;font-size:10px;width:auto;max-width:none;height:60px}
  .xnav-a .xi{width:24px;height:24px}
  .xnav-t{position:static!important;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap;letter-spacing:-.04em}
  .xl-main,.gf{border-left:0;border-right:0}
  .xl-right{display:block;position:static;max-height:none;overflow:visible;padding:16px 16px 28px}
  .xl-main .area-grid{grid-template-columns:repeat(2,1fr)}
  .xl-main .hero-catch{font-size:34px}
}

/* ================================================================
   16. エリアページの店舗カードの「上の部分」（2026-09-26・PCだけ＝901px以上）
   元サイト＝近くのメンズエステランキング（menesthe.heteml.net）の PREMIUM／標準枠のカードと同じ並び・大きさ・形にした
   （実測＝area.php?pref=tokyo&area=shinjuku の1枚目のカードの計算済みの値。色だけこのサイトの空色・ピンク）
   　画像（左280px・カードの高さいっぱい・最低180px）｜情報（余白15px 20px）
   　情報＝[順位の枠(14px太字・2px枠)][営業形態(12px・丸い札)][店名(18px太字)]…[評価] → アクセス・営業時間・料金（13px・アイコン）
   　　　→ 比べる項目（このサイトだけ）→ 紹介文（14px・3行）→ クーポン（点線枠・COUPONの見出し）→ ボタン（13px太字・余白8px 18px・角4px）
   その下に「本日出勤のセラピスト」の横スクロールの列を今のまま置く。900px以下は今までどおり（ここの指定は効かない）
   ================================================================ */
.ci{display:none}
@media (min-width:901px){
  .scard{padding:0;border:2px solid var(--main);border-top:0;border-radius:4px;display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:1fr auto auto;grid-template-areas:"img info" "img act" "th th";transition:box-shadow .2s;isolation:isolate}
  .scard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#81d6fc,#b5e8fe,#81d6fc);z-index:2}
  .scard:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}
  .scard.first{border-color:var(--main);box-shadow:none}
  .scard.first:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}
  .scard-main{display:contents}
  .scard-img{grid-area:img;width:280px;min-height:180px;position:relative;overflow:hidden}
  .scard-img .simg{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
  .scard-img .noimg{border:0}
  .scard-info{grid-area:info;padding:15px 20px 0;display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;column-gap:12px}
  .scard-top{display:contents}
  .ci{display:inline-block;flex:none;vertical-align:-1px}
  .rank-no{order:1;margin:0 0 8px;gap:5px;padding:2px 10px;border:2px solid currentColor;border-radius:4px;font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.6;color:var(--main-deep)}
  .rank-no .ci{width:12px;height:12px}
  .type{order:2;margin:0 0 8px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500;line-height:1.6;background:var(--main-soft);color:var(--main-deep)}
  .scard h3{order:3;margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.4;min-width:0}
  .scard h3 a{color:var(--main-deep)}
  .scard h3 a:hover{color:var(--main-deep);opacity:.8}
  .score{order:4;margin:0 0 8px auto}
  .meta{order:5;flex-basis:100%;margin:0 0 10px;gap:0 12px;font-size:13px;color:#666;line-height:1.6}
  .meta li{display:inline-flex;align-items:center}
  .meta b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .meta .ci{margin-right:4px;color:var(--main)}
  .fx{order:6;flex-basis:100%}
  .intro{order:7;flex-basis:100%;margin:0 0 12px;font-size:14px;line-height:1.6;color:#444}
  .coupon{order:8;flex-basis:100%;display:block;margin:0 0 14px;padding:12px 14px;border:1.5px dashed var(--pink);border-radius:6px;background:repeating-linear-gradient(-45deg,transparent,transparent 6px,rgba(252,176,228,.08) 6px,rgba(252,176,228,.08) 12px),linear-gradient(135deg,#fff 0%,var(--pink-pale) 100%)}
  .coupon .lbl{display:flex;align-items:center;gap:6px;margin:0 0 6px;padding:0;background:none;color:var(--pink-deep);font-size:11px;font-weight:700;letter-spacing:1px;border-radius:0}
  .coupon .lbl .ci{width:22px;height:22px;padding:5px;box-sizing:border-box;border-radius:50%;background:linear-gradient(135deg,var(--pink-deep),var(--pink));color:#fff}
  .coupon>div{font-size:15px;font-weight:700;line-height:1.5;color:var(--ink)}
  .coupon small{margin-top:2px;font-size:11px;font-weight:400;line-height:1.4;color:var(--muted)}
  .scard>.actions{grid-area:act;padding:0 20px 15px;gap:10px}
  .scard>.actions .btn{gap:5px;padding:8px 18px;border-radius:4px;font-size:13px;font-weight:700;line-height:1.6}
  .scard>.today-th{grid-area:th;margin:0;padding:12px 20px 14px;min-width:0}
}

/* ================================================================
   17. エリアページの店舗カードの上の部分（PCだけ・2026-09-26 れのぼ指摘の3点）
   ① 店名を1行目（順位の枠・営業形態の札と同じ行）に並べる。評価点は1行目から外し、画像の左上に小さく載せる
   ② 比べる項目（○／−の枠）はカードから外す（れのぼ指示）。かわりに営業形態・完全個室をアイコンつきの並び（アクセス等の行）に足す
   ③ クーポンの数字（<span class="num">）をピンクに（元サイトと同じ。文字の大きさは元サイトも同じ15px）
   エリアページのカード（.scard-info の中）だけに効かせる（都道府県ページの .scard には効かせない）
   900px以下は今までどおり（.meta-pc は出さない・.num は色を付けない）
   ================================================================ */
.meta li.meta-pc{display:none}
@media (min-width:901px){
  .scard-info h3{flex:1 1 0;min-width:0}
  .scard-info .score{position:absolute;top:12px;left:10px;z-index:3;margin:0;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,.92);font-size:12px;line-height:1.6;pointer-events:none}
  .scard-info .fx{display:none}
  .meta li.meta-pc{display:inline-flex}
  .coupon .num{color:var(--pink-deep)}
}

/* 18. れのぼ指示（2026-09-26）：PCのエリアページの店舗カードから「料金・出勤を見る」「電話」のボタンを外す（店名と画像から店舗ページへは行ける） */
@media (min-width:901px){
  .area-shops .scard .actions{display:none}
}

/* 19. れのぼ指示（2026-09-26）：フッターを色付きにしない。背景はほかと同じ白。文字は本文と同じ色、上に細い罫線で区切る */
.gf{background:#fff;color:var(--ink);border-top:1px solid var(--xline)}
.gf-nav a{color:var(--ink);opacity:1}
.gf .logo{color:var(--ink)}
.gf-bottom{border-top:1px solid var(--line);color:var(--muted);opacity:1}