/* ============================================================
   RELAMEE — 白地デザインシステム
   Anton はロゴのみ。見出しは Noto Sans JP bold。
   色は必ず下記のトークンを使うこと（ベタ書き禁止）。
   ============================================================ */
:root{
  --bg:#ffffff;        /* ページ地 */
  --bg-alt:#f4f7f3;    /* 交互に敷くセクション背景 */
  --bg-warm:#fffcf2;   /* 強調セクションのクリーム地 */
  --card:#ffffff;      /* カード地 */
  --line:#e3e7df;      /* 罫線 */
  --txt:#333333;       /* 本文 */
  --muted:#6e7268;     /* 補足テキスト */
  --accent:#4e8c1f;    /* 主アクセント／主CTA */
  --accent-lt:#9ccc3c; /* 小さな装飾・バッジ・★ */
  --accent2:#3f5b6c;   /* 副CTA */
  --danger:#c0392b;    /* 警告 */
  /* ---- 役割トークン ----------------------------------------------
     同じ役割の色が画面ごとに別の値になるのを防ぐために置いている。
     ここに無い色を各ビューでベタ書きしないこと（役割が増えたらここに足す）。
     例：「薄い緑地」は以前 #f5faec / #f3f8ec / #f7fbf1 / #f7fbf0 / #fbfdf7 の
     5種類がファイルを跨いで乱立していた。 */
  --ok-bg:#f5faec;      /* 成功・有効・受付中を示す淡い緑地 */
  --ok-line:#c9e2b6;    /* 同上の罫線 */
  --warn-bg:#fdf1ef;    /* 注意・警告の淡い地 */
  --warn-line:#eabbb2;  /* 同上の罫線 */
  --warn-txt:#8f2c1f;   /* 同上の文字 */
  --note-bg:#fdf3d8;    /* 保留・補足（アンバー） */
  --note-txt:#8a6d1f;
  --accent-dk:#3f7318;  /* 主アクセントのホバー暗色 */
  --accent2-bg:#eef3f6; /* 副アクセントの淡い地 */
  --accent2-line:#cfd9e0;
  --ph:#b3bda6;         /* 写真なしプレースホルダの文字 */
  --radius:8px;
  --shadow:0 1px 3px rgba(0,0,0,.06);
}

/* ---------- リセット / 基本 ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--txt);
  font-family:'Noto Sans JP',sans-serif;
  font-size:15px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
overflow-x:clip;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- コンテナ ---------- */
.wrap{max-width:720px;margin:0 auto;padding:0 18px;}
/* .wrap を入れ子にしても左右パディングが二重にならないようにする */
.wrap .wrap{max-width:none;padding-left:0;padding-right:0;}

main{padding:26px 0 56px;}

/* ---------- ヘッダー ---------- */
header{
  border-bottom:1px solid var(--line);
  padding:12px 0;
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.logo{font-family:Anton,sans-serif;font-size:23px;color:var(--accent);letter-spacing:.05em;flex:none;line-height:1.2;}
.logo:hover{text-decoration:none;}
.logo span{color:var(--txt);}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 14px;min-width:0;}
/* タップ判定を 44px 以上にする（padding で稼ぐ。文字サイズは変えない） */
.nav a{color:var(--muted);font-size:13px;white-space:nowrap;padding:12px 2px;line-height:1.6;}
.nav a:hover{color:var(--accent);text-decoration:none;}
.nav a.on{color:var(--accent);font-weight:700;}

/* ---------- 見出し ---------- */
h1{font-size:27px;font-weight:700;line-height:1.45;margin-bottom:8px;letter-spacing:.01em;}
h2{font-size:20px;font-weight:700;line-height:1.5;margin:26px 0 10px;}
h3{font-size:16px;font-weight:700;line-height:1.6;margin:16px 0 6px;}
.lead{color:var(--muted);margin-bottom:22px;font-size:14px;}
p{margin-bottom:12px;}
p:last-child{margin-bottom:0;}

/* ---------- カード ---------- */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;margin-bottom:18px;
  box-shadow:var(--shadow);
}

/* ---------- フォーム ---------- */
label{display:block;font-size:13px;font-weight:700;margin:14px 0 6px;color:var(--txt);}
label .req{color:var(--danger);font-size:11px;margin-left:6px;font-weight:500;}
/* 入力欄が1つに定まらない見出し（ラジオ／チェックの群、変更できない表示値）。
   <label> は入力欄と1対1で結ぶもの（for か、入力欄を包む形）。そうでない場所は
   これを使う。見た目は label と同じ。 */
.lbl-head{display:block;font-size:13px;font-weight:700;margin:14px 0 6px;color:var(--txt);}
.lbl-head .req{color:var(--danger);font-size:11px;margin-left:6px;font-weight:500;}
input,textarea,select{
  width:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 12px;
  color:var(--txt);font-size:16px;font-family:inherit;line-height:1.5;
}
select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(78,140,31,.12);}
input::placeholder,textarea::placeholder{color:#a9ada3;}
.hint{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6;}
.row{display:flex;gap:12px;flex-wrap:wrap;}
.row>div{flex:1;min-width:120px;}
.check{display:flex;align-items:flex-start;gap:8px;margin-top:18px;font-size:13px;color:var(--muted);}
.check input{width:auto;margin-top:6px;flex:none;accent-color:var(--accent);}
.check a{text-decoration:underline;}

/* ---------- ボタン ---------- */
.btn{
  display:block;width:100%;
  background:var(--accent);color:#fff;
  font-weight:700;font-size:16px;font-family:inherit;
  padding:14px;border:none;border-radius:var(--radius);
  cursor:pointer;margin-top:22px;text-align:center;line-height:1.4;
  transition:background .15s ease;
}
.btn:hover{background:#3f7318;color:#fff;text-decoration:none;}
.btn.alt{background:var(--accent2);}
.btn.alt:hover{background:#334a58;}
.btn.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent);}
.btn.ghost:hover{background:var(--bg-alt);color:var(--accent);}
.btn.sm{font-size:14px;padding:10px 16px;margin-top:12px;}
.btn.inline{display:inline-block;width:auto;padding-left:26px;padding-right:26px;}

/* ---------- 通知・補足 ---------- */
.alert{padding:12px 14px;border-radius:var(--radius);margin-bottom:16px;font-size:14px;line-height:1.7;}
.alert.err{background:#fdf1ef;border:1px solid #eabbb2;color:#8f2c1f;}
.alert.ok{background:#f0f7e8;border:1px solid #bcd99a;color:#2f6112;}
.note{
  background:#f3f8ec;border-left:3px solid var(--accent-lt);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:12px 14px;font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.75;
}
.badge{display:inline-block;font-size:11px;font-weight:700;border:1px solid var(--accent-lt);
  background:#f5faec;color:var(--accent);padding:1px 8px;border-radius:999px;line-height:1.7;}
.badge.gray{border-color:var(--line);background:var(--bg-alt);color:var(--muted);}

/* ---------- セラピスト横型カード（一覧・検索結果） ---------- */
.tcard{
  display:flex;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;margin-bottom:12px;box-shadow:var(--shadow);
}
.tcard .ph{
  width:84px;height:104px;flex:none;border-radius:var(--radius);
  background:var(--bg-alt);background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  color:#b3bda6;font-weight:700;font-size:24px;
}
.tcard .nm{font-size:17px;font-weight:700;line-height:1.5;}
.tcard .meta{font-size:12px;color:var(--muted);margin:2px 0 6px;}
.tcard .price{font-size:13px;font-weight:700;color:var(--accent);}

/* ============================================================
   汎用セクション
   使い方: <section class="sec sec-alt"><div class="wrap"> … </div></section>
   .sec-alt / .sec-warm は box-shadow で画面幅いっぱいに背景を敷くため、
   main > .wrap の内側に置いても全幅になる（横スクロールは発生しない）。
   ============================================================ */
.sec{padding:34px 0;}
/* 全幅背景は疑似要素で敷く。
   巨大スプレッドの box-shadow(0 0 0 100vmax) は描画コストが高く、
   セクションが複数あるページで描画が破綻するため使用しない。 */
.sec-alt,.sec-warm,.hero{position:relative;}
.sec-alt::before,.sec-warm::before,.hero::before{
  content:'';position:absolute;z-index:-1;
  top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;
}
.sec-alt::before{background:var(--bg-alt);}
.sec-warm::before{background:var(--bg-warm);}
/* ヒーロー背景。--hero-img をインラインで渡すと写真が入る。
   白のグラデーションを写真の上に重ね、文字の可読性を確保する。 */
.hero::before{
  background-color:#f3f8ec;
  background-image:linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.80)),var(--hero-img,none);
  background-size:cover;background-position:center;
}

/* セクション見出し（中央寄せ＋英字サブラベル）
   <div class="sec-head"><span class="en">THERAPISTS</span><h2>…</h2><p>…</p></div> */
.sec-head{text-align:center;margin-bottom:22px;}
.sec-head .en{
  display:block;font-size:11px;font-weight:700;letter-spacing:.18em;
  color:var(--accent);text-transform:uppercase;margin-bottom:2px;
}
.sec-head h2{margin:0 0 6px;font-size:20px;}
.sec-head p{font-size:13.5px;color:var(--muted);margin:0;}

/* ---------- ヒーロー ---------- */
.hero{
  padding:34px 0 30px;text-align:center;margin-bottom:0;
}
main .wrap>.hero:first-child{margin-top:-26px;}
.hero h1{font-size:26px;line-height:1.5;margin-bottom:10px;}
.hero h1 .ac{color:var(--accent);}
.hero p{font-size:14px;color:var(--muted);margin-bottom:0;}
.hero .stats{
  display:flex;justify-content:center;gap:6px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
}
.hero .stats>div{flex:1 1 0;min-width:0;}
.hero .stats .num{font-size:23px;font-weight:700;color:var(--accent);line-height:1.3;letter-spacing:.01em;}
.hero .stats .num small{font-size:12px;font-weight:700;margin-left:1px;}
.hero .stats .lbl{font-size:11.5px;color:var(--muted);line-height:1.5;}

/* ---------- トップの検索フォーム ---------- */
.searchbox{
  display:flex;flex-wrap:wrap;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;box-shadow:var(--shadow);margin-top:20px;text-align:left;
}
.searchbox select,.searchbox input{flex:1 1 45%;width:auto;min-width:0;font-size:16px;padding:11px 12px;}
.searchbox select{padding-right:34px;}
.searchbox .btn{flex:1 1 100%;width:auto;margin-top:0;padding:12px;font-size:15px;}
@media (min-width:560px){
  .searchbox select,.searchbox input{flex:1 1 0;}
  .searchbox .btn{flex:0 0 auto;padding-left:26px;padding-right:26px;}
}

/* ---------- セラピストのグリッド（スマホ2列 / 広い画面3列） ---------- */
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media (min-width:600px){.tgrid{grid-template-columns:repeat(3,1fr);}}
.tgrid .tc{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;color:var(--txt);
  box-shadow:var(--shadow);
}
.tgrid .tc:hover{text-decoration:none;border-color:var(--accent-lt);}
.tgrid .tc .ph{
  width:100%;height:auto;aspect-ratio:3/4;border-radius:0;
  background:var(--bg-alt);background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  color:#b3bda6;font-weight:700;font-size:26px;
}
.tgrid .tc .body{padding:9px 10px 11px;}
.tgrid .tc .nm{font-size:14px;font-weight:700;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tgrid .tc .meta{font-size:11.5px;color:var(--muted);line-height:1.5;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tgrid .tc .price{font-size:12.5px;font-weight:700;color:var(--accent);margin-top:2px;}
.tgrid .tc .stars{font-size:12px;}

/* ---------- ★評価 ---------- */
.stars{color:var(--accent-lt);letter-spacing:.08em;font-size:13px;line-height:1.6;white-space:nowrap;}
.stars .off{color:#d7dccf;}
.stars .n{color:var(--muted);font-size:11.5px;letter-spacing:0;margin-left:4px;}

/* ---------- 口コミカード ---------- */
.rvcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow);
}
.rvcard .stars{font-size:14px;}
.rvcard .cm{font-size:14px;line-height:1.8;margin:6px 0 10px;}
.rvcard .meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;}
.rvcard .meta .to{font-weight:700;color:var(--txt);}

/* ---------- 番号付きステップ ---------- */
.steps{list-style:none;counter-reset:stp;padding:0;margin:0;}
.steps>li,.steps>div{position:relative;padding:0 0 0 46px;margin-bottom:20px;}
.steps>li:last-child,.steps>div:last-child{margin-bottom:0;}
.steps>li::before,.steps>div::before{
  counter-increment:stp;content:counter(stp);
  position:absolute;left:0;top:1px;width:32px;height:32px;
  border-radius:50%;background:var(--accent);color:#fff;
  font-size:15px;font-weight:700;line-height:32px;text-align:center;
}
.steps h3{font-size:15.5px;font-weight:700;margin:0 0 2px;line-height:1.6;}
.steps p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.75;}

/* ---------- 施術メニュー紹介カード ---------- */
.mcard{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin-bottom:10px;box-shadow:var(--shadow);
}
.mcard .ic{
  flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--bg-alt);display:flex;align-items:center;justify-content:center;
  font-size:21px;line-height:1;
}
/* 絵文字アイコンの代わりに写真を置く場合 */
.mcard .ph{flex:none;width:56px;height:56px;border-radius:10px;object-fit:cover;display:block;}
/* メニュー詳細ページの横長写真 */
.m-img{
  display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;
  border-radius:var(--radius);margin:0 0 14px;background:var(--bg-alt);
}
.mcard .nm{font-size:15.5px;font-weight:700;line-height:1.5;}
.mcard p{font-size:13.5px;color:var(--muted);margin:2px 0 0;line-height:1.75;}

/* ---------- FAQ アコーディオン（details / summary） ---------- */
.faq{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);}
.faq details{border-top:1px solid var(--line);}
.faq details:first-child{border-top:none;}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:14px 44px 14px 16px;font-size:14.5px;font-weight:700;line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'';position:absolute;right:18px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .15s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;}
.faq summary:hover{background:var(--bg-alt);}
.faq .a{padding:0 16px 16px;font-size:13.5px;color:var(--muted);line-height:1.8;}

/* ---------- タブ（JavaScript不使用 / ラジオ + :checked ~） ----------
   <div class="tabs">
     <input type="radio" name="g" id="g1" checked><input type="radio" name="g" id="g2">
     <nav><label for="g1">60分</label><label for="g2">90分</label></nav>
     <div class="tab">…</div><div class="tab">…</div>
   </div>
   ※ パネルは div、タブ見出しは nav > label で並べること。最大4枚。 */
.tabs{margin-bottom:18px;}
.tabs>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.tabs>nav{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);margin-bottom:14px;}
.tabs>nav label{
  cursor:pointer;font-size:13.5px;font-weight:700;color:var(--muted);
  padding:9px 14px;margin-bottom:-1px;border:1px solid transparent;border-radius:var(--radius) var(--radius) 0 0;
}
.tabs>nav label:hover{color:var(--accent);}
.tabs>div.tab{display:none;}
.tabs>input:nth-of-type(1):checked~nav label:nth-of-type(1),
.tabs>input:nth-of-type(2):checked~nav label:nth-of-type(2),
.tabs>input:nth-of-type(3):checked~nav label:nth-of-type(3),
.tabs>input:nth-of-type(4):checked~nav label:nth-of-type(4){
  color:var(--accent);background:#fff;border-color:var(--line);border-bottom-color:#fff;
}
.tabs>input:nth-of-type(1):checked~div.tab:nth-of-type(1),
.tabs>input:nth-of-type(2):checked~div.tab:nth-of-type(2),
.tabs>input:nth-of-type(3):checked~div.tab:nth-of-type(3),
.tabs>input:nth-of-type(4):checked~div.tab:nth-of-type(4){display:block;}
/* CSSが効かない環境・印刷時は全パネルを表示（内容が読めなくならないように） */
@media print{.tabs>div.tab{display:block !important;}}

/* ---------- 定義リスト風の2列表（特商法・手数料表など） ----------
   <dl class="dl"><dt>販売事業者</dt><dd>…</dd> … </dl> */
.dl{display:grid;grid-template-columns:36% 1fr;border-top:1px solid var(--line);font-size:13.5px;}
.dl dt{padding:11px 14px;background:var(--bg-alt);font-weight:700;border-bottom:1px solid var(--line);line-height:1.7;}
.dl dd{padding:11px 14px;border-bottom:1px solid var(--line);line-height:1.7;word-break:break-word;}
@media (max-width:560px){
  .dl{grid-template-columns:1fr;}
  .dl dt{padding:9px 12px 8px;border-bottom:none;}
  .dl dd{padding:0 12px 11px;}
}

/* ---------- フッター ---------- */
footer{border-top:1px solid var(--line);background:var(--bg-alt);
  padding:26px 0;color:var(--muted);font-size:12px;text-align:center;line-height:1.9;}
.fnav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;margin-bottom:12px;}
.fnav a{color:var(--muted);white-space:nowrap;}
.fnav a:hover{color:var(--accent);}

/* ---------- バッジ（core/Badge.php が出力する） ---------- */
.bdgs{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;}
.bdg{
  display:inline-block;
  background:var(--bg-alt);color:var(--accent);
  border:1px solid var(--line);border-radius:999px;
  padding:2px 9px;
  font-size:11.5px;line-height:1.6;font-weight:500;
  white-space:normal;word-break:break-word;
  cursor:help;
}

/* 狭い画面ではヘッダーを折り返さない。
   .nav a.opt（施術メニュー／ご利用ガイド）はフッターの .fnav に同じリンクがあるため、
   横一列に収まらない幅では隠す。折り返すと sticky ヘッダーが2行=100px を占有し、
   さらに上下のリンクが 2px 間隔で並んで誤タップの原因になっていた。 */
@media (max-width:600px){
  .nav a.opt{display:none;}
}
/* 「セラピスト募集」はいちばん優先度が低い（フッターの .fnav にもある）。
   5項目が1行に収まる幅でだけ出す。 */
/* .opt2 は「セラピスト募集」をテキストリンクとして出していたときの
   折り返し対策だったが、募集をボタン（.navcta）にして
   【全幅で出す】方針に変えたため、この非表示は廃止した。
   狭い幅での収まりは .navcta 側のサイズ調整で担保する。 */

/* ---------- ヘッダー内のボタン（セラピスト募集）----------
   募集は事業上の最優先なので、テキストリンクではなくボタンにする。
   ただしページ本体の主CTA（塗りつぶしの緑）と競合させないため、
   枠線タイプにする。塗りにすると画面内に緑の塊が2つ並んで焦点がぼける。
   タップ領域は .nav a と同じく 44px 以上を確保する。 */
.nav a.navcta{
  color:var(--accent);
  border:1.5px solid var(--accent);
  border-radius:999px;
  padding:11px 13px;
  font-weight:700;
  line-height:1.5;
  white-space:nowrap;
}
.nav a.navcta:hover{background:var(--accent);color:var(--card);text-decoration:none;}

/* 狭い幅ではナビのラベルを短くして1行に収める。
   「セラピスト募集」ボタンを全幅で出すと、フルラベルのままでは
   320〜414px で2行に折り返し、sticky ヘッダーが 153px（iPhone SE の17%）を
   占有してしまう。募集ボタンを残すことを優先し、前半を隠す。
   ・セラピストを探す → 探す
   ・会員登録/ログイン → ログイン
   いずれも文脈から意味が取れ、フッターにはフルラベルが残る。 */
@media (max-width:640px){
  .nav .lw{display:none;}
}

/* ---------- スマホ調整 ---------- */
@media (max-width:480px){
  body{font-size:14.5px;}
  .logo{font-size:20px;}
  /* 狭い幅ではボタンを詰める（1行に収めるため。高さ44pxは維持する） */
  .nav a.navcta{padding:11px 10px;font-size:12px;}
  .nav{gap:8px 12px;}
  .nav a{font-size:12px;padding:13px 2px;}
  h1{font-size:23px;}
  h2{font-size:18px;}
  .hero h1{font-size:22px;}
  .hero .stats .num{font-size:20px;}
  .card{padding:16px;}
  .sec{padding:28px 0;}
  .fnav{gap:3px 12px;font-size:11.5px;}
}

/* ---------- メッセージへ導くボタン（お客様側・セラピスト側で共通） ----------
   以前は customer_home.php と therapist_home.php に一字一句同じ定義が
   別々に置かれていて、片方だけ直すと両者の見た目がずれる状態だった。 */
.msbtn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
  color:var(--accent);border:1px solid var(--accent);background:var(--card);
  border-radius:var(--radius);padding:8px 14px;line-height:1.6;}
.msbtn:hover{background:var(--bg-alt);text-decoration:none;}
.msbtn.hot{background:var(--accent);color:#fff;border-color:var(--accent);}
.msbtn.hot:hover{background:var(--accent-dk);color:#fff;}
.msun{display:inline-block;min-width:19px;text-align:center;font-size:11px;font-weight:700;
  border-radius:999px;padding:1px 6px;line-height:1.6;background:var(--danger);color:#fff;}
.msbtn.hot .msun{background:#fff;color:var(--danger);}

/* ---------- 見本（デザイン確認用）のセラピストに付ける印 ----------
   実在しない掲載であることを一目で示す。予約は book.php 側で必ず止めている
   （表示だけの対策にしない）。 */
.smp{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--note-bg);color:var(--note-txt);border:1px solid var(--warn-line);
  font-size:11px;font-weight:700;vertical-align:middle;}