/* サロクル 予約ページ（お客様用）— ホットペッパービューティー風 */
:root {
  /* 色 ― 赤をサロンの色とし、灰色はほんのり赤みを混ぜて全体をなじませています */
  --red: #e5324b; --red-dark: #c9203a; --pink-bg: #fff3f5; --pink-line: #f7c4cc;
  --orange: #ff7a00; --orange-dark: #e66d00; --orange-bg: #fff6ea;
  --text: #241f20; --sub: #79706f; --sub-2: #958b8a;
  --line: #ebe6e6; --line-2: #ddd6d6; --line-3: #cfc8c7; --bg: #f6f4f3; --white: #fff;
  --text-2: #57504f;                 /* 本文より一段やわらかい文字 */
  --surf-1: #faf8f7; --surf-2: #f4f1f0; --ph-bg: #ede8e7;   /* 面の色・写真の下地 */
  --blue: #2a7de1; --green: #2fa36b; --star: #f5a623;
  --radius: 8px; --radius-lg: 12px; --max: 640px;
  /* 影 ― 濃さの段階をそろえています */
  --sh-1: 0 1px 2px rgba(36,31,32,.06);
  --sh-2: 0 2px 8px rgba(36,31,32,.08);
  --sh-3: 0 12px 32px rgba(36,31,32,.18);
  /* 動き */
  --dur: .16s; --ease: cubic-bezier(.4, 0, .2, 1);
  --ring: 0 0 0 3px rgba(229,50,75,.28);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Segoe UI", "Yu Gothic UI", Meiryo, sans-serif;
  color: var(--text); background: var(--bg); line-height: 1.7;
  font-feature-settings: "palt" 1;   /* 日本語の字間を詰めて読みやすくします */
  text-rendering: optimizeLegibility;
  line-break: strict;   /* 行頭に「。」や「）」が来ないようにします */
}
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: .01em; }
p { text-wrap: pretty; }
a { color: var(--blue); text-decoration: none; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
button { font-family: inherit; font-size: inherit; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
input, select, textarea { font-family: inherit; font-size: 16px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
img { max-width: 100%; display: block; }
::selection { background: rgba(229,50,75,.18); }

/* キーボード操作でいまどこにいるか分かるようにします（マウス操作では出ません） */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--red); box-shadow: var(--ring); }

/* 金額・時刻・件数は桁をそろえます */
.price, .p, .amt, .cf .v, .yen, .num, time, .rating b { font-variant-numeric: tabular-nums; }

/* 線画アイコン ― 文字の中に置いても行が崩れないようにします */
.ico { display: inline-block; vertical-align: -.18em; flex: none; }
.ic { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.btn .ico, .more-btn .ico, .bm-btn .ico, .mypage .ico { margin-right: 5px; vertical-align: -.2em; }
.sty-card .cnt .ico, .sp-cnt .ico { margin-right: 3px; vertical-align: -.15em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.wrap { max-width: var(--max); margin: 0 auto; background: var(--white); min-height: 100vh; position: relative; }
@media (min-width: 900px) { .wrap { box-shadow: 0 0 0 1px var(--line); } }

/* header */
.hdr { position: sticky; top: 0; z-index: 30; background: var(--white); border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; height: 52px; padding: 0 12px; gap: 10px; }
.hdr .back { width: 36px; height: 36px; border: 0; background: none; font-size: 22px; color: var(--text); display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.hdr .back:active { background: var(--bg); }
.hdr .ttl { flex: 1; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr .brand { display: flex; align-items: center; gap: 7px; font-weight: 800; color: var(--text); font-size: 19px; letter-spacing: .02em; flex: none; white-space: nowrap; min-width: 0; }
.hdr .brand .logo { width: 25px; height: 25px; flex: none; background:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'><defs><linearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='1'><stop%20offset='0'%20stop-color='%23ff8a4c'/><stop%20offset='1'%20stop-color='%23e5324b'/></linearGradient></defs><circle%20cx='16'%20cy='16'%20r='12'%20fill='none'%20stroke='url%28%23g%29'%20stroke-width='4.6'%20stroke-linecap='round'%20stroke-dasharray='57%2019'%20transform='rotate%28-58%2016%2016%29'/><circle%20cx='16'%20cy='16'%20r='4.6'%20fill='url%28%23g%29'/></svg>") center/contain no-repeat; }
.hdr .brand .logo::after { content: none; }
.hdr .brand small { white-space: nowrap; font-size: 9px; color: var(--sub); letter-spacing: .14em; margin-left: 2px; align-self: flex-end; padding-bottom: 4px; font-weight: 600; }
.hdr .mypage { border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 4px 10px; font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 4px; flex: none; white-space: nowrap; }

/* tabs */
.tabs { display: flex; overflow-x: auto; scrollbar-width: none; background: var(--white); border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: 1 0 auto; min-width: 84px; text-align: center; padding: 11px 10px 9px; font-size: 13px; color: var(--sub); border-bottom: 3px solid transparent; white-space: nowrap; font-weight: 600; }
.tabs a.on { color: var(--red); border-bottom-color: var(--red); }

/* hero */
.hero { position: relative; background: #222; }
.slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 3; max-height: 420px; }
.slider::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-weight: 700; font-size: 18px; letter-spacing: .1em; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.slide .ph small { font-size: 12px; font-weight: 400; letter-spacing: .05em; opacity: .8; }
.dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.dots i.on { background: #fff; }
.hero .cnt { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; }

.salon-head { padding: 14px 16px 10px; }
.salon-head .genre { font-size: 11px; color: var(--sub); }
.salon-head h1 { margin: 2px 0 4px; font-size: 19px; line-height: 1.35; }
.salon-head .catch { font-size: 13px; color: var(--sub); margin: 0 0 8px; }
.rating { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.stars { color: var(--star); letter-spacing: -1px; font-size: 15px; }
.stars.gray { color: var(--line-2); }
.rating b { font-size: 16px; color: var(--text); }
.rating .cnt { color: var(--sub); }
.feat { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.feat span { font-size: 11px; line-height: 1.7; border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px; color: var(--text-2); background: var(--surf-1); white-space: nowrap; }
.feat a { font-size: 11px; line-height: 1.7; border: 1px dashed var(--line-2); border-radius: 3px; padding: 2px 8px; color: var(--red); background: #fff; white-space: nowrap; font-weight: 600; }
.feat a:hover { background: var(--pink-bg); border-color: var(--pink-line); }
.access-line { display: flex; gap: 8px; align-items: flex-start; padding: 0 16px 12px; font-size: 12px; color: var(--text-2); }
.access-line .ic { color: var(--sub-2); margin-top: 3px; }

/* sections */
.sec { border-top: 8px solid var(--bg); }
.sec-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.sec-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
.sec-h a { font-size: 12px; }
.sec-h h2 { display: flex; align-items: center; gap: 7px; }
.sec-h h2 .ic { color: var(--red); }
.more-btn { display: block; margin: 8px 16px 16px; padding: 11px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-size: 14px; color: var(--text); }

/* coupon card */
.cp-filter { display: flex; gap: 6px; padding: 8px 16px 4px; overflow-x: auto; scrollbar-width: none; }
.cp-filter button { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 5px 12px; font-size: 12px; color: var(--text-2); }
.cp-filter button.on { background: var(--red); border-color: var(--red); color: #fff; }
.cp-cat { font-size: 13px; font-weight: 700; color: var(--text-2); padding: 12px 16px 6px; background: var(--surf-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
div.cp { margin: 10px 16px; border: 1px solid var(--pink-line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--sh-1); }   /* クーポンカード。バッジの .tag.cp と名前が重なるため div に限定します */
div.cp.menu { border-color: var(--line); }
.cp-top { padding: 12px 12px 8px; }
.cp-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.tag { display: inline-flex; align-items: center; flex: none; white-space: nowrap; font-size: 10px; line-height: 1.6; padding: 2px 7px; border-radius: 3px; font-weight: 700; letter-spacing: .02em; }
.tag.new { background: var(--red); color: #fff; }
.tag.all { background: #4a90e2; color: #fff; }
.tag.repeat { background: var(--green); color: #fff; }
.tag.cp { background: var(--pink-bg); color: var(--red); border: 1px solid var(--pink-line); }
.tag.badge { background: var(--orange-bg); color: var(--orange-dark); border: 1px solid #ffd9b0; }
.cp-name { font-size: 14px; font-weight: 700; line-height: 1.45; margin: 0 0 6px; }
.cp-price { display: flex; align-items: baseline; gap: 8px; }
.cp-price .before { font-size: 12px; color: var(--sub); text-decoration: line-through; }
.cp-price .now { font-size: 20px; font-weight: 800; color: var(--red); }
.cp-price .dur { font-size: 12px; color: var(--sub); margin-left: auto; }
.cp-desc { font-size: 12px; color: var(--text-2); margin: 6px 0 0; }
.cp-cond { font-size: 11px; color: var(--sub); margin: 4px 0 0; }
.cp-btm { display: flex; gap: 8px; padding: 8px 12px 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius); border: 1px solid transparent; padding: 11px 14px; font-weight: 700; font-size: 14px; line-height: 1.2; text-align: center; }
.btn.orange { background: var(--orange); color: #fff; box-shadow: 0 2px 0 var(--orange-dark); }
.btn.orange:active { transform: translateY(1px); box-shadow: none; }
.btn.red { background: var(--red); color: #fff; box-shadow: 0 2px 0 var(--red-dark); }
.btn.ghost { background: #fff; border-color: var(--line); color: var(--text); }
.btn.line { background: #06c755; color: #fff; }
.btn.blk { width: 100%; }
.btn.sm { padding: 8px 12px; font-size: 13px; }
.btn.lg { padding: 15px 16px; font-size: 16px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.cp-btm .btn { flex: 1; }

/* staff */
.staff-scroll { display: flex; gap: 10px; padding: 4px 16px 16px; overflow-x: auto; scrollbar-width: none; }
.staff-scroll::-webkit-scrollbar { display: none; }
.stf { flex: 0 0 150px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.stf-list .stf { flex: none; margin: 10px 16px; display: flex; gap: 12px; padding: 12px; }
.avatar { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 34px; background: var(--line-3); position: relative; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.stf-list .avatar { width: 92px; height: 92px; flex: none; border-radius: var(--radius); font-size: 28px; }
.stf-b { padding: 8px 10px 10px; }
.stf-list .stf-b { padding: 0; flex: 1; min-width: 0; }
.stf-role { font-size: 10px; color: var(--sub); }
.stf-name { font-weight: 700; font-size: 14px; margin: 1px 0 2px; }
.stf-meta { font-size: 11px; color: var(--sub); }
.stf-cm { font-size: 12px; color: var(--text-2); margin: 6px 0 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stf-list .stf-cm { -webkit-line-clamp: 4; }
.stf-fee { font-size: 11px; color: var(--red); font-weight: 700; }

/* reviews */
.rv { margin: 0 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rv-h { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sub); }
.rv-h b { color: var(--text); font-size: 13px; }
.rv-t { font-weight: 700; font-size: 14px; margin: 6px 0 2px; }
.rv-b { font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.rv-m { font-size: 11px; color: var(--sub); margin-top: 6px; }
.rv-reply { margin-top: 8px; background: var(--surf-1); border-radius: 6px; padding: 8px 10px; font-size: 12px; color: var(--text-2); }
.rv-reply b { display: block; font-size: 11px; color: var(--sub); margin-bottom: 2px; }
.rv-sum { display: flex; align-items: center; gap: 14px; padding: 8px 16px 6px; }
.rv-sum .big { font-size: 34px; font-weight: 800; line-height: 1; }
.rv-sum .bars { flex: 1; font-size: 11px; color: var(--sub); }
.rv-sum .bar { display: flex; align-items: center; gap: 6px; }
.rv-sum .bar i { flex: 1; height: 6px; background: var(--ph-bg); border-radius: 3px; overflow: hidden; display: block; }
.rv-sum .bar i b { display: block; height: 100%; background: var(--star); }

/* info table */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.tbl th { width: 30%; background: var(--surf-1); font-weight: 600; color: var(--text-2); }
.tbl td { white-space: pre-wrap; }
.map-ph { margin: 0 16px 16px; height: 150px; border-radius: var(--radius); background: linear-gradient(135deg, #e9eef5, #dfe7f1); display: flex; align-items: center; justify-content: center; color: #7a8796; font-size: 13px; }

/* footer */
.ftr { padding: 24px 16px 120px; font-size: 11px; color: var(--sub); text-align: center; }
.ftr a { color: var(--sub); margin: 0 6px; }

/* sticky CTA */
.cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); backdrop-filter: blur(6px); }
.cta-in { max-width: var(--max); margin: 0 auto; display: flex; gap: 8px; align-items: center; }
.cta .tel { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--radius); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 20px; background: #fff; }
.cta .btn { flex: 1; }

/* booking flow */
.steps { display: flex; padding: 12px 8px 6px; gap: 2px; }
.steps span { flex: 1; min-width: 0; font-size: 10px; text-align: center; color: var(--sub-2); position: relative; padding-top: 23px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.steps span::before { content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 19px; height: 19px; border-radius: 50%; background: var(--line-2); color: #fff; font-size: 10px; line-height: 19px; font-weight: 700; transition: background var(--dur) var(--ease); }
/* 段と段をつなぐ線。どこまで進んだかが一目で分かります */
.steps span::after { content: ''; position: absolute; top: 9px; left: calc(-50% + 12px); right: calc(50% + 12px); height: 2px; background: var(--line-2); }
.steps span:first-child::after { display: none; }
.steps span.on { color: var(--red); font-weight: 700; }
.steps span.on::before { background: var(--red); }
.steps span.done { color: var(--sub); }
.steps span.done::before { content: '✓'; background: #f3a4b0; }
.steps span.done::after, .steps span.on::after { background: #f3a4b0; }
.bk-h { padding: 8px 16px 4px; }
.bk-h h2 { margin: 0; font-size: 17px; }
.bk-h p { margin: 4px 0 0; font-size: 12px; color: var(--sub); }
.sel-row { display: flex; align-items: center; gap: 10px; margin: 6px 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; }
.sel-row.on { border-color: var(--red); background: var(--pink-bg); }
.sel-row .chk { width: 22px; height: 22px; border: 2px solid var(--line-3); border-radius: 4px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.sel-row.radio .chk { border-radius: 50%; }
.sel-row.on .chk { background: var(--red); border-color: var(--red); }
.sel-row .b { flex: 1; min-width: 0; }
.sel-row .n { font-size: 14px; font-weight: 700; }
.sel-row .m { font-size: 12px; color: var(--sub); }
.sel-row .p { font-weight: 800; color: var(--red); font-size: 15px; white-space: nowrap; }
.sel-row .av { width: 44px; height: 44px; min-width: 0; border-radius: 50%; flex: none; font-size: 16px; }
.sum-bar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); z-index: 20; }
.sum-bar .l { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--sub); margin-bottom: 8px; }
.sum-bar .l b { font-size: 18px; color: var(--red); }
.note { margin: 6px 16px; font-size: 12px; color: var(--sub); }
.note.warn { color: #b3261e; background: #fff4f3; border: 1px solid #f3c4c0; border-radius: 6px; padding: 9px 11px; }
/* 規定やご案内。赤やオレンジの中で浮かないよう、落ち着いた無彩色にしています */
.note.info { background: #f5f4f2; border: 1px solid #e3ded9; border-left: 3px solid #bdb5ae; color: var(--text-2); border-radius: 6px; padding: 9px 12px; line-height: 1.75; }

/* availability table */
.av-nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; }
.av-nav b { font-size: 14px; }
.av-nav button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 6px 10px; font-size: 12px; }
.av-nav button[disabled] { opacity: .35; }
.av-legend { display: flex; gap: 10px; padding: 0 16px 6px; font-size: 11px; color: var(--sub); }
.av-wrap { overflow-x: auto; margin: 0 0 8px; }
table.av { border-collapse: collapse; width: 100%; min-width: 360px; table-layout: fixed; font-size: 13px; }   /* 空き状況の表。スタッフ写真の .av と名前が重なるため table に限定します */
.av th, .av td { border: 1px solid var(--line); text-align: center; padding: 0; height: 36px; }
.av th { background: var(--surf-1); font-size: 11px; font-weight: 600; line-height: 1.2; }
.av th:first-child, .av td:first-child { width: 48px; font-size: 11px; color: var(--sub); background: var(--surf-1); position: sticky; left: 0; z-index: 1; }
.av th.sat { color: #2a6fd6; } .av th.sun, .av th.hol { color: #d93b3b; }
.av td button { width: 100%; height: 100%; border: 0; background: none; font-size: 15px; color: var(--red); font-weight: 700; }
.av td button.ok2 { color: var(--red); } .av td button.ok1 { color: var(--orange-dark); }
.av td.ng { color: var(--sub-2); background: var(--surf-2); font-size: 12px; }
.av td.past { color: var(--line-3); background: var(--surf-2); font-size: 11px; }
.av td button:active { background: var(--pink-bg); }

/* form */
.frm { padding: 4px 16px; }
.fld { margin: 12px 0; }
.fld label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.fld label .req { color: #fff; background: var(--red); font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-left: 6px; font-weight: 600; vertical-align: 1px; }
.fld label .opt { color: var(--sub); background: var(--ph-bg); font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-left: 6px; font-weight: 600; vertical-align: 1px; }
.fld input[type=text], .fld input[type=tel], .fld input[type=email], .fld select, .fld textarea { width: 100%; border: 1px solid var(--line-3); border-radius: 6px; padding: 11px 12px; background: #fff; }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(229,50,75,.12); }
.fld .help { font-size: 11px; color: var(--sub); margin-top: 4px; }
.fld .err { font-size: 12px; color: #c62828; margin-top: 4px; }
.fld.has-err input, .fld.has-err select { border-color: #c62828; background: #fff7f7; }
.rad { display: flex; gap: 8px; }
.rad label { flex: 1; border: 1px solid var(--line-3); border-radius: 6px; padding: 10px; text-align: center; font-size: 13px; font-weight: 600; margin: 0; }
.rad input { display: none; }
.rad label.on { border-color: var(--red); background: var(--pink-bg); color: var(--red); }
.chkline { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 10px 0; }
.chkline input { width: 18px; height: 18px; }

/* confirm */
.cf { margin: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cf .r { display: flex; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; gap: 10px; }
.cf .r:last-child { border-bottom: 0; }
.cf .r .k { width: 84px; flex: none; color: var(--sub); }
.cf .r .v { flex: 1; white-space: pre-wrap; }
.cf .r.total .v { font-weight: 800; color: var(--red); font-size: 16px; }
.cf .r .edit { font-size: 12px; color: var(--blue); white-space: nowrap; }

/* done */
.done { text-align: center; padding: 28px 16px 8px; }
.done .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; font-size: 34px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.done h2 { margin: 0 0 6px; font-size: 20px; }
.done p { margin: 0; font-size: 13px; color: var(--sub); }
.resno { margin: 14px 16px; padding: 12px; background: var(--pink-bg); border: 1px dashed var(--pink-line); border-radius: var(--radius); text-align: center; }
.resno small { display: block; font-size: 11px; color: var(--sub); }
.resno b { font-size: 24px; letter-spacing: .06em; color: var(--red); }

/* mypage */
.my { margin: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.my .st { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 3px; font-weight: 700; margin-bottom: 6px; }
.st.reserved { background: #e8f1ff; color: #1d5bb8; } .st.visited { background: #e8f6ee; color: #1f7a48; } .st.cancelled { background: #f1f1f1; color: var(--sub); } .st.noshow { background: #fdecea; color: #b3261e; }
.my .d { font-size: 16px; font-weight: 800; }
.my .m { font-size: 12px; color: var(--text-2); margin: 4px 0; }
.my .actions { display: flex; gap: 8px; margin-top: 8px; }

.empty { text-align: center; color: var(--sub); font-size: 13px; padding: 30px 16px; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: rgba(40,40,40,.92); color: #fff; padding: 10px 16px; border-radius: 20px; font-size: 13px; z-index: 100; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90%; }
.toast.show { opacity: 1; }
.loading { position: fixed; inset: 0; background: rgba(255,255,255,.7); z-index: 90; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--sub); }
.spin { width: 28px; height: 28px; border: 3px solid var(--ph-bg); border-top-color: var(--red); border-radius: 50%; animation: sp .8s linear infinite; margin-right: 10px; }
@keyframes sp { to { transform: rotate(360deg); } }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.modal { background: #fff; width: 100%; max-width: var(--max); border-radius: 14px 14px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 85vh; overflow: auto; }
.modal h3 { margin: 0 0 10px; font-size: 16px; }
.modal .btns { display: flex; gap: 8px; margin-top: 12px; }
.modal .btns .btn { flex: 1; }
.hidden { display: none !important; }
.pc-note { display: none; }
@media (min-width: 900px) {
  body { background: #ececec; }
  .pc-note { display: block; position: fixed; left: 24px; top: 24px; width: 220px; font-size: 12px; color: #666; background: #fff; border-radius: 8px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
}

/* ===== v2 追加：HPB寄せ ===== */
.hdr .icons { display: flex; gap: 4px; }
.hdr .icon-btn { width: 34px; height: 34px; border: 0; background: none; font-size: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text); }
.hdr .icon-btn.on { color: var(--red); }
.msg-box { margin: 0 16px 12px; padding: 12px; background: var(--pink-bg); border: 1px solid var(--pink-line); border-radius: var(--radius); font-size: 13px; white-space: pre-wrap; color: var(--text-2); }
.msg-box.clamp { max-height: 88px; overflow: hidden; position: relative; }
.msg-box.clamp::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(to bottom, rgba(255,243,245,0), var(--pink-bg) 78%); pointer-events: none; }
/* 枠のすぐ下に、枠と地続きに見える帯として置きます */
.msg-more { display: block; text-align: center; font-size: 12px; font-weight: 600; margin: 0 16px 12px; padding: 9px; border: 1px solid var(--pink-line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--pink-bg); color: var(--red); }
.msg-more:hover { background: #ffe9ed; }
.msg-box.clamp { border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; margin-bottom: 0; }
.hash { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 0 16px 12px; font-size: 12px; }
.hash a { color: var(--blue); }
/* 空席状況 mini */
.avmini-wrap { overflow-x: auto; padding: 0 16px 8px; }
.avmini { border-collapse: collapse; width: 100%; min-width: 340px; table-layout: fixed; font-size: 12px; text-align: center; }
.avmini th, .avmini td { border: 1px solid var(--line); padding: 6px 0; }
.avmini th { background: var(--surf-1); font-weight: 600; font-size: 11px; line-height: 1.2; }
.avmini th.sat { color: #2a6fd6; } .avmini th.sun { color: #d93b3b; }
.avmini td { font-weight: 700; font-size: 15px; }
.avmini td.ok2 { color: var(--red); } .avmini td.ok1 { color: var(--orange-dark); } .avmini td.ng { color: var(--sub-2); background: var(--surf-2); font-size: 12px; font-weight: 400; }
.avmini td a { display: block; color: inherit; }
/* style gallery */
.sty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 16px 12px; }
.sty { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; display: block; color: var(--text); }
.sty .ph { aspect-ratio: 3 / 4; background: var(--ph-bg); display: flex; align-items: flex-end; justify-content: flex-start; position: relative; overflow: hidden; }
.sty .ph img { width: 100%; height: 100%; object-fit: cover; }
.sty .ph .len { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 3px; }
.sty .b { padding: 8px; }
.sty .t { font-size: 12px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sty .s { font-size: 11px; color: var(--sub); margin-top: 3px; }
.sty-detail .ph { aspect-ratio: 3 / 4; max-height: 480px; background: var(--ph-bg); }
.sty-detail .ph img { width: 100%; height: 100%; object-fit: cover; }
.sty-detail h1 { font-size: 17px; margin: 12px 16px 4px; }
.sty-detail .meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 8px; }
.sty-detail .desc { padding: 0 16px 12px; font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.sty-staff { display: flex; align-items: center; gap: 10px; margin: 0 16px 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.sty-staff .avatar { width: 44px; height: 44px; border-radius: 50%; font-size: 16px; flex: none; }
.sty-staff .n { font-weight: 700; font-size: 13px; }
.sty-staff .r { font-size: 11px; color: var(--sub); }
.sty-staff a { margin-left: auto; font-size: 12px; white-space: nowrap; }
/* blog */
.blog { display: flex; gap: 12px; margin: 0 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.blog .ph { width: 84px; height: 84px; flex: none; border-radius: 6px; background: var(--ph-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--sub-2); font-size: 20px; }
.blog .ph img { width: 100%; height: 100%; object-fit: cover; }
.blog .t { font-weight: 700; font-size: 14px; line-height: 1.4; }
.blog .s { font-size: 11px; color: var(--sub); margin-top: 4px; }
.blog .x { font-size: 12px; color: var(--text-2); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-detail { padding: 0 16px 16px; }
.blog-detail h1 { font-size: 18px; margin: 14px 0 4px; }
.blog-detail .s { font-size: 12px; color: var(--sub); margin-bottom: 12px; }
.blog-detail .ph { border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.blog-detail .body { font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
/* staff detail */
.stf-hero { display: flex; gap: 14px; padding: 16px; }
.stf-hero .avatar { width: 110px; height: 110px; border-radius: var(--radius); flex: none; font-size: 32px; }
.stf-hero h1 { font-size: 18px; margin: 2px 0 4px; }
.stf-hero .role { font-size: 11px; color: var(--sub); }
.stf-hero .meta { font-size: 12px; color: var(--text-2); }
.stf-hero .fee { font-size: 12px; color: var(--red); font-weight: 700; margin-top: 4px; }
.stf-comment { padding: 0 16px 12px; font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.stf-stats { display: flex; gap: 8px; padding: 0 16px 12px; }
.stf-stats span { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: 8px 4px; font-size: 11px; color: var(--sub); }
.stf-stats span b { display: block; font-size: 16px; color: var(--text); }
/* review sub ratings */
.rv-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--sub); margin-top: 6px; }
.rv-sub b { color: var(--star); font-weight: 700; margin-left: 2px; }
.rv-filter { display: flex; gap: 6px; padding: 6px 16px; overflow-x: auto; scrollbar-width: none; }
.rv-filter button { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 5px 12px; font-size: 12px; color: var(--text-2); }
.rv-filter button.on { background: var(--red); border-color: var(--red); color: #fff; }
.rate-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; font-size: 13px; }
.rate-grid .stars-in { display: flex; gap: 2px; }
.rate-grid .stars-in button { border: 0; background: none; font-size: 24px; color: var(--line-2); padding: 0 2px; line-height: 1; }
.rate-grid .stars-in button.on { color: var(--star); }
/* こだわり条件 grid */
.cond-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 16px 12px; }
.cond-grid span { font-size: 12px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surf-1); }
.cond-grid span::before { content: '✓'; color: var(--green); font-weight: 700; margin-right: 6px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 16px 12px; }
.gallery div { aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--ph-bg); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.bm-btn { border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 5px 10px; font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.bm-btn.on { color: var(--red); border-color: var(--pink-line); background: var(--pink-bg); }
.sec-h .bm-btn { margin-left: auto; }
.tabs a { min-width: 72px; padding: 11px 8px 9px; }
.hist-list .my .d { font-size: 14px; }
.subnav { display: flex; gap: 8px; padding: 8px 16px 4px; font-size: 12px; }
.subnav a { border: 1px solid var(--line); border-radius: 14px; padding: 4px 10px; color: var(--text-2); }
.subnav a.on { background: var(--red); border-color: var(--red); color: #fff; }
.pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #f0f0f0; color: var(--text-2); }

/* ===== v3 追加：SNS連携・デモ ===== */
.sns-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 14px; }
.sns-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 20px; padding: 7px 13px; font-size: 12px; font-weight: 700; color: #fff; background: var(--sub); }
.sns-btn .ic { width: 16px; height: 16px; display: block; }
.sns-btn.lg { flex: 1; justify-content: center; padding: 12px; font-size: 14px; border-radius: var(--radius); }
.sns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 0 16px 14px; }
.sns-grid a { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; color: var(--text); background: #fff; }
.sns-grid a .dot { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
.sns-grid a .dot svg { width: 15px; height: 15px; fill: #fff; }
.share-bar { display: flex; gap: 6px; padding: 10px 16px 14px; flex-wrap: wrap; align-items: center; }
.share-bar .lbl { font-size: 12px; color: var(--sub); margin-right: 2px; }
.share-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 0; }
.share-ic svg { width: 16px; height: 16px; fill: #fff; }
.share-ic.copy { background: #8a94a0; }
.demo-bar { background: #2b2f36; color: #fff; font-size: 12px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.demo-bar b { color: #ffd166; }
.demo-bar a, .demo-bar button { color: #fff; border: 1px solid rgba(255,255,255,.5); background: none; border-radius: 14px; padding: 3px 10px; font-size: 11px; }

/* ===== v3.1 タッチ操作の最適化（実機テストでの指摘反映） ===== */
.hdr .mypage { padding: 8px 12px; }
.hdr .icon-btn { width: 40px; height: 40px; }
.sec-h a { padding: 8px 0 8px 8px; margin: -8px 0; }
.rating .cnt { padding: 6px 4px; margin: -6px 0; }
.feat a { padding: 5px 9px; }
  .msg-more { padding: 11px 9px; }
/* 空席状況・予約カレンダーは指で押せる高さを確保 */
.avmini th, .avmini td { padding: 0; height: 44px; }
.avmini td a { display: flex; align-items: center; justify-content: center; height: 100%; }
.avmini th { padding: 4px 2px; }
.av th, .av td { height: 44px; }
.av td button { font-size: 17px; }
.cp-filter button, .rv-filter button { padding: 9px 14px; }
.tabs a { padding: 13px 10px 11px; }
.sty .b { padding: 10px 8px; }
.sns-grid a { padding: 12px; }
.share-ic { width: 40px; height: 40px; }
.blog { padding: 14px 0; }
.demo-bar a, .demo-bar button { padding: 6px 12px; }
.sel-row { padding: 14px 12px; }
.tbl td a[href^="tel:"] { display: inline-block; padding: 8px 0; font-weight: 700; }
.stf-name a, .blog .t { display: inline-block; padding: 3px 0; }
.hash a { padding: 7px 0; }

/* ===== v4 写真表示の強化 ===== */
/* ヒーロー：写真を大きく、枚数カウンタとサムネ */
.hero .slide { background-size: cover; background-position: center; }
.hero .all { position: absolute; right: 10px; bottom: 34px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 18px; border: 0; }
.hero-thumbs { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 6px 16px 0; }
.hero-thumbs::-webkit-scrollbar { display: none; }
.hero-thumbs button { flex: 0 0 56px; height: 42px; border-radius: 5px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--ph-bg); }
.hero-thumbs button.on { border-color: var(--red); }
.hero-thumbs img { width: 100%; height: 100%; object-fit: cover; }
/* 写真ギャラリー */
.gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 8px 16px 16px; }
.gal.g3 { grid-template-columns: repeat(3, 1fr); }
.gal button { padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: var(--ph-bg); }
.gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-count { padding: 0 16px 6px; font-size: 12px; color: var(--sub); }
/* ライトボックス（スワイプ・拡大） */
.lb { position: fixed; inset: 0; background: #0c0e11; z-index: 200; display: flex; flex-direction: column; }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; color: #fff; font-size: 13px; }
.lb-top button { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; padding: 4px 8px; }
.lb-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lb-track::-webkit-scrollbar { display: none; }
.lb-track .s { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.lb-track img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-cap { color: #cfd5dc; font-size: 12px; text-align: center; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
.lb-thumbs { display: flex; gap: 5px; overflow-x: auto; padding: 0 14px 10px; scrollbar-width: none; }
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumbs button { flex: 0 0 48px; height: 48px; border: 2px solid transparent; border-radius: 5px; overflow: hidden; padding: 0; background: #222; }
.lb-thumbs button.on { border-color: #fff; }
.lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }
/* メニューカードの写真 */
.cp-photo { width: 100%; aspect-ratio: 16/9; background: var(--ph-bg); display: block; }
.cp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-row { display: flex; gap: 10px; }
.cp-row .th { width: 96px; height: 96px; flex: none; border-radius: 7px; overflow: hidden; background: var(--ph-bg); }
.cp-row .th img { width: 100%; height: 100%; object-fit: cover; }
/* スタイル：一覧を大きく、詳細はスワイプ */
.sty-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sty .ph { aspect-ratio: 3 / 4; }
.sty .cnt { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 9px; }
.sty-swipe { position: relative; background: var(--surf-2); }
.sty-swipe .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 3/4; max-height: 520px; }
.sty-swipe .track::-webkit-scrollbar { display: none; }
.sty-swipe .track > div { flex: 0 0 100%; scroll-snap-align: start; }
.sty-swipe .track img { width: 100%; height: 100%; object-fit: cover; }
.sty-swipe .cnt { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 3px 9px; border-radius: 11px; }
/* スタッフ詳細の作品写真 */
.stf-photos { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 14px; scrollbar-width: none; }
.stf-photos::-webkit-scrollbar { display: none; }
.stf-photos button { flex: 0 0 120px; height: 160px; border: 0; border-radius: 8px; overflow: hidden; padding: 0; background: var(--ph-bg); }
.stf-photos img { width: 100%; height: 100%; object-fit: cover; }
/* ブログの写真 */
.blog-detail .gal { padding: 0 0 14px; }

/* ===== v5 カウンセリング・キャンセル待ち・スタンプ ===== */
.counsel-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 6px 16px 12px; background: #fcfcfd; }
.counsel-box .ttl { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.counsel-box .sub { font-size: 12px; color: var(--sub); margin-bottom: 12px; }
.counsel-q { margin-bottom: 14px; }
.counsel-q:last-child { margin-bottom: 0; }
.counsel-q > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.opt-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.opt-wrap label { border: 1px solid var(--line-3); border-radius: 18px; padding: 9px 14px; font-size: 13px; background: #fff; cursor: pointer; }
.opt-wrap label.on { border-color: var(--red); background: var(--pink-bg); color: var(--red); font-weight: 700; }
.opt-wrap input { display: none; }
.counsel-q input.cq { width: 100%; border: 1px solid var(--line-3); border-radius: var(--radius); padding: 10px 12px; background: #fff; }
.counsel-q input.cq:focus { outline: none; border-color: var(--red); box-shadow: var(--ring); }
/* キャンセル待ち */
.av td.ng { position: relative; }
.wait-cta { margin: 10px 16px; border: 1px solid var(--pink-line); background: var(--pink-bg); border-radius: var(--radius); padding: 13px 15px; }
.wait-cta b { display: block; font-size: 14px; margin-bottom: 3px; }
.wait-cta p { margin: 0 0 10px; font-size: 12px; color: #6b5b5e; line-height: 1.7; }
.wait-done { text-align: center; padding: 26px 16px 10px; }
.wait-done .ic { width: 58px; height: 58px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
/* スタンプカード */
.stampcard { margin: 12px 16px; border: 1px solid var(--pink-line); border-radius: var(--radius); padding: 14px 16px; background: linear-gradient(160deg, #fff7f8, #fff); }
.stampcard .h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.stampcard .h b { font-size: 14px; }
.stampcard .h span { font-size: 12px; color: var(--sub); }
.stampcard .row { display: flex; gap: 7px; flex-wrap: wrap; }
.stampcard i { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed #e4b9c1; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; color: transparent; }
.stampcard i.on { background: var(--red); border: 2px solid var(--red); color: #fff; }
.stampcard .rw { font-size: 12px; color: #6b5b5e; margin-top: 10px; line-height: 1.7; }
.stampcard .got { background: var(--orange-bg); border: 1px solid #ffd9b0; color: var(--orange-dark); border-radius: 6px; padding: 8px 10px; font-size: 12px; font-weight: 700; margin-top: 8px; }

/* ---- ホットペッパービューティーに合わせた表示 ---- */

/* パンくず（いまサロンのどのページを見ているか） */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; padding: 8px 16px; font-size: 11px; color: var(--sub); background: var(--surf-1); border-bottom: 1px solid var(--line); }
.crumbs i { font-style: normal; color: var(--line-3); }
.crumbs span[aria-current] { color: var(--text-2); font-weight: 600; }

/* 空き記号 ◎ ○ △ × の色分け */
.av td button.ok0, .av-mini td.ok0 a { color: var(--sub); font-weight: 700; }
.av-mini td.ok2 a { color: var(--red); } .av-mini td.ok1 a { color: var(--orange-dark); }
.av-legend { flex-wrap: wrap; align-items: center; gap: 3px 4px; }
.av-legend .m2 { color: var(--red); font-weight: 700; }
.av-legend .m1 { color: var(--orange-dark); font-weight: 700; }
.av-legend .m0 { color: var(--sub); font-weight: 700; }
.av-legend .mx { color: var(--sub-2); font-weight: 700; }
.av-legend span + span { margin-left: 6px; }

/* 所要時間の時計アイコン */
.cp-price .dur .ico { margin-right: 3px; vertical-align: -.15em; }

/* 通常メニューの価格表（クーポンはカード、メニューは一覧） */
.mn-cat { font-size: 12px; font-weight: 700; color: var(--text-2); padding: 14px 16px 5px; }
.mn-list { border-top: 1px solid var(--line); background: #fff; }
.mn-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: #fff; padding: 13px 16px; font: inherit; color: inherit; }
.mn-row:active { background: var(--pink-bg); }
.mn-row .mn-th { width: 54px; height: 54px; flex: none; border-radius: 6px; overflow: hidden; background: var(--ph-bg); }
.mn-row .mn-th img { width: 100%; height: 100%; object-fit: cover; }
.mn-row .mn-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mn-row .mn-n { font-size: 14px; font-weight: 700; line-height: 1.45; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mn-row .mn-d { font-size: 12px; color: var(--sub); line-height: 1.6; }
.mn-row .mn-m { font-size: 11px; color: var(--sub-2); display: flex; align-items: center; gap: 3px; }
.mn-row .mn-m .ico { vertical-align: -.15em; }
.mn-row .mn-p { display: flex; align-items: center; gap: 4px; flex: none; align-self: center; }
.mn-row .mn-p s { font-size: 11px; color: var(--sub-2); }
.mn-row .mn-p b { font-size: 16px; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.mn-row .mn-p i { font-style: normal; color: var(--line-3); font-size: 17px; margin-left: 1px; }

/* 下部の予約バー ― 電話ボタンに文字を添え、予約ボタンに受付時間の一言を入れます */
.cta .tel { flex-direction: column; gap: 1px; width: 52px; height: 50px; color: var(--text-2); }
.cta .tel span { font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.cta .btn.lg { flex-direction: column; gap: 0; line-height: 1.25; padding-top: 7px; padding-bottom: 7px; }
.cta .btn.lg small { font-size: 10px; font-weight: 600; opacity: .9; letter-spacing: .01em; }
/* 電話番号の下の一言 */
.tel-note { display: block; font-size: 11px; color: var(--sub); margin-top: 3px; line-height: 1.6; }

/* 追加メニューのおすすめ */
.addon { margin: 14px 16px 0; border: 1px solid var(--pink-line); border-radius: var(--radius); background: var(--pink-bg); overflow: hidden; }
.addon-h { padding: 11px 14px 9px; }
.addon-h b { display: block; font-size: 14px; color: var(--red); }
.addon-h span { font-size: 11px; color: var(--sub); }
.addon .sel-row.addon-row { margin: 0; border: 0; border-top: 1px solid var(--pink-line); border-radius: 0; background: #fff; padding: 11px 14px; }
.addon .sel-row.addon-row .chk { color: var(--red); font-weight: 800; }
.addon .sel-row.addon-row.on { background: #fff7f8; }
.addon .sel-row.addon-row .n { font-size: 13.5px; }

/* 言語の切り替え ― ヘッダーが窮屈にならないように、狭い画面では店名の英字を隠します */
@media (max-width: 420px) {
  .hdr .brand small { display: none; }
  .hdr-in { gap: 7px; padding: 0 10px; }
  .hdr .mypage span, .hdr .mypage { font-size: 11px; }
}
/* 言語の切り替え */
.langsw select { border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--text-2); font-size: 12px; font-weight: 700; padding: 5px 8px; appearance: none; text-align: center; min-width: 54px; }
.langsw select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.hdr .icons { display: flex; align-items: center; gap: 7px; }

/* 本日の順番待ち */
.qband { display: flex; align-items: center; gap: 12px; margin: 10px 16px; padding: 13px 15px; border: 1px solid var(--pink-line); background: var(--pink-bg); border-radius: var(--radius); color: var(--text); }
.qband.on { border-color: #bfe3ca; background: #eefaf1; }
.qband .l { flex: 1; min-width: 0; }
.qband b { display: block; font-size: 14px; }
.qband span { font-size: 12px; color: var(--sub); }
.qband .go { flex: none; font-size: 12px; font-weight: 700; color: var(--red); }
.qband.on .go { color: var(--green); }
.q-card { margin: 14px 16px; padding: 24px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: center; background: #fff; box-shadow: var(--sh-1); }
.q-card .lbl { font-size: 12px; color: var(--sub); letter-spacing: .06em; }
.q-card .no { font-size: 56px; font-weight: 800; line-height: 1.1; color: var(--red); font-variant-numeric: tabular-nums; margin: 2px 0 10px; }
.q-card .msg { font-size: 15px; line-height: 1.8; }
.q-card .msg b { font-size: 26px; color: var(--red); font-variant-numeric: tabular-nums; }
.q-card .msg.called { color: var(--green); font-weight: 700; background: #eefaf1; border-radius: var(--radius); padding: 12px; }
.q-card .note { margin-top: 12px; font-size: 12px; color: var(--sub); }