@charset "utf-8";
* {
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

body {
  width: 98% !important;
  max-width: 560px !important;
  margin: 5px auto !important;
  line-height: 1.2 !important;
}

footer {
  font-size: 75% !important;
  text-align: center !important;
  border-top: solid 4px #04003c !important;
  padding-top: 10px !important;
}

#content {
  width: 100% !important;
}

p, #content h2 {
  margin: 20px 5% !important;
  line-height: 1.2 !important;
}

input[type="text"] {
    width: 100% !important;
    height: 3.5em !important;
    display: inherit !important;
    padding: 8px !important;
    border-radius: 6px !important;
    font-size: inherit !important;
}

dl {
  width: 90% !important;
  margin: auto !important;
}
dt {
  margin-top: 15px !important;
}
dt:before {
}
dt span {
    font-size: .6em !important;
    background: #04003c !important;
    color: #fff !important;
    margin-left: 1em !important;
    padding: .2em .5em !important;
    border-radius: 25% !important;
    display: inline-block !important;
    position: relative !important;
    top: -.3em !important;
}

dd {
}

dd label {
  margin-right: 2% !important;
}
#regist dt, #regist_confirm dt {
    font-size: 110% !important;
    font-weight: bold !important;
    margin-bottom: 3px !important;
}
#regist dd label {
display: flex !important;
}

dd label input.HOW_KNOW {
  margin-right: .5em !important;
}

select {
    height: 3.5em !important;
    display: inherit !important;
  padding: 8px !important;
  border-radius: 6px !important;
    font-size: inherit !important;
}

dd span {
  letter-spacing: initial !important;
  font-size: 90% !important;
}

#reserve {
  min-height: 1380px !important;
}

#reserve_datetime {
    width: 90% !important;
    max-width: 300px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#reserve form dt, #complete dt, #view dt {
  font-size: 115% !important;
  font-weight: bold !important;
  margin-bottom: 5px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   ↓ modern UI layer (旧 style_new.css 由来)
━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   style_new.css
   reset.css / style.css の後に読み込む
━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  --navy:    #04003c !important;
  --navy2:   #0a0660 !important;
  --gold:    #c8a84b !important;
  --crimson: #c0243a !important;
  --tel:     #d97706 !important;
  --surface: #f5f3ef !important;
  --card:    #ffffff !important;
  --border:  #ddd8d0 !important;
  --muted:   #6b6480 !important;
  --ink:     #1c1830 !important;
  --ok:      #2e7d52 !important;
}

html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body {
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  font-weight: 300 !important;
  padding-bottom: 80px !important;
  width: 100% !important;
}

/* ── TOP BAR ── */
header.top-bar {
  background: var(--navy) !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  line-height: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  float: none !important;
  clear: both !important;
}
header.top-bar .logo {
  font-size: .82rem !important;
  color: #fff !important;
  letter-spacing: .12em !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  top: 0 !important;
  border-radius: 0 !important;
}
header.top-bar img.top-logo {
  height: 36px !important;
  width: auto !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* ── STEP BAR ── */
nav.step-bar {
  background: #fff !important;
  border-bottom: 1px solid #e5e3df !important;
  padding: 14px 0 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
nav.step-bar ol {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
nav.step-bar li {
  display: flex !important;
  align-items: center !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 44px !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
nav.step-bar li .dot {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  font-size: .65rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
nav.step-bar li.done   .dot { background: #e8e4f0 !important; color: var(--navy) !important; }
nav.step-bar li.active .dot { background: var(--navy) !important; color: #fff !important; font-weight: 600 !important; }
nav.step-bar li.future .dot { background: #f0eeee !important; color: #ccc !important; }
nav.step-bar li .lbl {
  font-size: .55rem !important;
  letter-spacing: .02em !important;
  background: none !important;
  padding: 0 !important;
  position: static !important;
  top: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
nav.step-bar li.done   .lbl { color: #999 !important; }
nav.step-bar li.active .lbl { color: var(--navy) !important; font-weight: 500 !important; }
nav.step-bar li.future .lbl { color: #ccc !important; }
nav.step-bar li .arrow {
  color: #ccc !important;
  font-size: .7rem !important;
  padding-bottom: 16px !important;
  margin: 0 !important;
  background: none !important;
}

/* ── content リセット ── */
#content.box {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
#content h1 { display: none !important; }
#content h1.legacy-title {
  display: block !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--navy) !important;
  margin: 16px 16px 12px !important;
  letter-spacing: .1em !important;
}

/* ── NOTICE ── */
div.notice {
  display: block !important;
  margin: 20px 16px 0 !important;
  width: auto !important;
  background: #fffbf0 !important;
  border: 1px solid #e8d898 !important;
  border-left: 4px solid var(--gold) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 16px !important;
  font-size: .78rem !important;
  color: #6b5c1e !important;
  line-height: 1.9 !important;
  box-sizing: border-box !important;
}
div.notice strong {
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
  color: #6b5c1e !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: .78rem !important;
  position: static !important;
  top: 0 !important;
  margin-left: 0 !important;
}
ul.notice-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
ul.notice-list li {
  font-size: .78rem !important;
  color: #6b5c1e !important;
  padding: 3px 0 3px 1em !important;
  position: relative !important;
  line-height: 1.5 !important;
}
ul.notice-list li::before {
  content: "・" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--gold) !important;
}

/* ── メッセージ ── */
p.msg {
  margin: 16px auto !important;
  width: 92% !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  font-size: .85rem !important;
  line-height: 1.7 !important;
}
p.msg.error { background: #fdf0ee !important; border: 1px solid #e8b4ae !important; color: var(--crimson) !important; }
p.msg.done  { background: #edf7f1 !important; border: 1px solid #a3d4b5 !important; color: var(--ok) !important; }

/* ── CARD ── */
div.card {
  display: block !important;
  background: var(--card) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(4,0,60,.07) !important;
  margin: 16px 16px !important;
  width: auto !important;
  padding: 24px 20px 28px !important;
  box-sizing: border-box !important;
}
div.card-title {
  display: block !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  color: var(--navy) !important;
  letter-spacing: .1em !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 20px !important;
  background: none !important;
}

/* ── FIELD ── */
div.field {
  display: block !important;
  margin-bottom: 22px !important;
  width: 100% !important;
}
div.field:last-child { margin-bottom: 0 !important; }
div.field-label {
  display: flex !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  letter-spacing: .1em !important;
  margin-bottom: 9px !important;
  align-items: center !important;
  gap: 6px !important;
  background: none !important;
}
div.field-label .req {
  font-size: .6rem !important;
  background: var(--crimson) !important;
  color: #fff !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  letter-spacing: 0 !important;
  display: inline-block !important;
  position: static !important;
  top: 0 !important;
  margin-left: 0 !important;
}

/* ── 店舗ラジオ ── */
div.shop-group {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
div.shop-group input[type=radio] { display: none !important; }
div.shop-group label {
  display: inline-block !important;
  padding: 9px 20px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 24px !important;
  font-size: .85rem !important;
  cursor: pointer !important;
  color: var(--muted) !important;
  background: #fafafa !important;
  margin-right: 0 !important;
  line-height: 1.4 !important;
  transition: all .15s !important;
}
div.shop-group input[type=radio]:checked + label {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}

/* ── セレクト ── */
div.sel-wrap {
  position: relative !important;
  display: inline-block !important;
  width: 100% !important;
  max-width: 300px !important;
}
div.sel-wrap::after {
  content: "▾" !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--muted) !important;
  pointer-events: none !important;
  font-size: .8rem !important;
}
div.sel-wrap select {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  padding: 11px 36px 11px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: .9rem !important;
  font-family: inherit !important;
  color: var(--ink) !important;
  background: #fff !important;
  cursor: pointer !important;
  height: auto !important;
  display: block !important;
  transition: border-color .15s !important;
}
div.sel-wrap select:focus { outline: none !important; border-color: var(--navy) !important; }

/* ── 日付行 ── */
div.date-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  justify-content: flex-start !important;
}
#birthday {
  justify-content: flex-start !important;
  letter-spacing: normal !important;
  max-width: 100% !important;
}
div.date-row div.sel-wrap { width: auto !important; max-width: none !important; flex-shrink: 0 !important; }
div.date-row div.sel-wrap select { width: auto !important; min-width: 64px !important; padding: 11px 28px 11px 10px !important; }
div.date-row .unit { font-size: .82rem !important; color: var(--muted) !important; flex-shrink: 0 !important; }

/* ── 時間スロット（既存 startDatetime を上書き） ── */
dd.startDatetime,
div.startDatetime {
  display: flex !important;
  flex-direction: column !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
dd.startDatetime br,
div.startDatetime br { display: none !important; }

/* JSが生成するinput+label+brをslot-row風に */
dd.startDatetime input[type=radio],
div.startDatetime input[type=radio] { display: none !important; }

dd.startDatetime label,
div.startDatetime label {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 13px 18px !important;
  cursor: pointer !important;
  gap: 12px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font-size: 1rem !important;
  background: #fff !important;
  transition: background .12s !important;
  box-sizing: border-box !important;
}
dd.startDatetime label:last-of-type,
div.startDatetime label:last-of-type { border-bottom: none !important; }
dd.startDatetime label:hover,
div.startDatetime label:hover { background: #f5f3ef !important; }
dd.startDatetime input[type=radio]:checked + label,
div.startDatetime input[type=radio]:checked + label { background: #ebebf8 !important; }
dd.startDatetime input[type=radio]:disabled + label,
div.startDatetime input[type=radio]:disabled + label {
  cursor: not-allowed !important;
  opacity: .5 !important;
  background: #fafafa !important;
}

/* 時刻テキスト */
dd.startDatetime label span.startDatetimeTime,
div.startDatetime label span.startDatetimeTime {
  font-size: .95rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  min-width: 54px !important;
  background: none !important;
  width: auto !important;
  text-align: left !important;
  padding: 0 !important;
  display: inline !important;
  border: none !important;
  margin: 0 !important;
}

/* ◎ バッジ（予約可）*/
dd.startDatetime label span:not(.startDatetimeTime):not(.badge-tel),
div.startDatetime label span:not(.startDatetimeTime):not(.badge-tel) {
  font-size: .78rem !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  width: auto !important;
  text-align: center !important;
  margin: 0 !important;
  color: var(--ok) !important;
  background: #e6f4ec !important;
}
/* disabled（受付不可）*/
dd.startDatetime input[type=radio]:disabled + label span:not(.startDatetimeTime):not(.badge-tel),
div.startDatetime input[type=radio]:disabled + label span:not(.startDatetimeTime):not(.badge-tel) {
  color: #aaa !important;
  background: #f0f0f0 !important;
}
/* TEL */
dd.startDatetime label span.badge-tel,
div.startDatetime label span.badge-tel {
  font-size: .78rem !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  width: auto !important;
  text-align: center !important;
  margin: 0 !important;
  color: var(--tel) !important;
  background: #fef3c7 !important;
}

/* ── ボタン ── */
div.btn-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: auto !important;
  margin: 8px 16px 32px !important;
  box-sizing: border-box !important;
}
div.btn-area input[type=submit],
div.btn-area button[type=submit],
div.btn-area input[type=button].btn-submit,
div.btn-area input.btn-submit {
  display: block !important;
  width: 100% !important;
  padding: 16px !important;
  background: var(--navy2) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  cursor: pointer !important;
  height: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
}
div.btn-area a { display: block !important; }
div.btn-area input[type=button],
div.btn-area input.btn-cancel {
  display: block !important;
  width: 100% !important;
  padding: 12px !important;
  background: #f0eff5 !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
  border-radius: 10px !important;
  font-size: .9rem !important;
  font-family: inherit !important;
  cursor: pointer !important;
  height: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ── アニメーション ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
div.notice { animation: fadeUp .4s ease both !important; }
div.card   { animation: fadeUp .4s ease both !important; }
/* div.btn-area { animation: fadeUp .4s .15s ease both !important; } */ /* 一時無効化 */

/* ── 完了画面 ── */
div.complete-banner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 32px 16px 24px !important;
  text-align: center !important;
}
div.complete-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--navy) !important;
  color: #fff !important;
  font-size: 1.6rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}
div.complete-title {
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  color: var(--navy) !important;
  letter-spacing: .08em !important;
  margin-bottom: 8px !important;
}
div.complete-sub {
  font-size: .82rem !important;
  color: var(--muted) !important;
}

/* 重要事項（赤系） */
div.notice-alert {
  background: #fff8f8 !important;
  border: 1px solid #f5c0c0 !important;
  border-left: 4px solid var(--crimson) !important;
}
div.notice-alert strong {
  color: var(--crimson) !important;
}
div.notice-alert ul.notice-list li {
  color: #7a2020 !important;
}
div.notice-alert ul.notice-list li::before {
  color: var(--crimson) !important;
}

/* 予約内容サマリー */
dl.summary-dl {
  width: 100% !important;
  margin: 0 !important;
}
div.summary-row {
  display: flex !important;
  align-items: baseline !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  gap: 16px !important;
}
div.summary-row:last-child { border-bottom: none !important; }
div.summary-row dt {
  font-size: .75rem !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  min-width: 60px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
div.summary-row dd {
  font-size: .92rem !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* ── テキスト入力 ── */
div.field input[type=text] {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: .9rem !important;
  font-family: inherit !important;
  color: var(--ink) !important;
  background: #fff !important;
  height: auto !important;
  display: block !important;
  box-sizing: border-box !important;
  transition: border-color .15s !important;
}
div.field input[type=text]:focus {
  outline: none !important;
  border-color: var(--navy) !important;
}
div.btn-area input.btn-cancel-danger {
  display: block !important;
  width: 100% !important;
  padding: 16px !important;
  background: var(--crimson) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
  height: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   ログイン画面専用
━━━━━━━━━━━━━━━━━━━━━━━━ */
.login-wrap {
  max-width: 400px;
  margin: 32px auto;
  padding: 0 16px;
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
}
.login-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #04003c;
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #ddd8d0;
  margin-bottom: 24px;
  letter-spacing: .1em;
}
.login-field { margin-bottom: 16px; }
.login-label {
  display: block;
  font-size: .75rem;
  color: #6b6480;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: .08em;
}
.login-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #ddd8d0;
  border-radius: 8px;
  font-size: .9rem;
  color: #1c1830;
  background: #fff;
  height: auto;
  display: block;
  box-sizing: border-box;
}
.login-input:focus { outline: none; border-color: #04003c; }
.login-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: #04003c;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .12em;
  cursor: pointer;
  margin-top: 24px;
  height: auto;
}
.login-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  text-align: center;
}
.login-links a {
  font-size: .85rem;
  color: #04003c;
  text-decoration: none;
  padding: 10px;
  border: 1.5px solid #ddd8d0;
  border-radius: 8px;
  display: block;
}
.login-links a.line-btn {
  color: #06c755;
  border-color: #06c755;
}
.login-links a.forgot {
  font-size: .8rem;
  color: #6b6480;
  border: none;
  padding: 4px;
}
.msg.error {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #fdf0ee;
  border: 1px solid #e8b4ae;
  border-radius: 6px;
  font-size: .85rem;
  color: #c0243a;
  line-height: 1.7;
}

/* ============================================
   登録フォーム 案内パーツ（2026-05-21 追加）
   ============================================ */

/* 初回登録案内カード（クリーム×ゴールド） */
.info-card-cream {
  background: #fdf6e3;
  border-left: 3px solid #c5a76b;
  border-radius: 4px;
  padding: 5px 10px;
  margin: 0 0 4px;
}
.info-card-cream p {
  margin: 0;
  color: #5a4423;
  line-height: 1.4;
  font-size: .78rem;
}

/* コンパクト補足説明（緑） */
.notice-compact-green {
  margin: 2px 0 4px;
  padding: 3px 8px;
  background: #eaf5ea;
  border-left: 3px solid #5fa55f;
  border-radius: 3px;
  color: #2d5a2d;
  font-size: .72rem;
  line-height: 1.35;
}

/* ============================================
   主要CTAボタン強調（2026-05-21 追加）
   class="btn-cta" を付与で適用
   ============================================ */
div.btn-area input[type=submit].btn-cta,
div.btn-area input.btn-submit.btn-cta,
div.btn-area .btn-cta {
  padding: 18px 24px !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  box-shadow: 0 3px 8px rgba(4, 0, 60, .15) !important;
  transition: transform .1s ease, box-shadow .1s ease, opacity .15s ease;
}
div.btn-area input[type=submit].btn-cta:hover,
div.btn-area input.btn-submit.btn-cta:hover,
div.btn-area .btn-cta:hover {
  opacity: .92;
}
div.btn-area input[type=submit].btn-cta:active,
div.btn-area input.btn-submit.btn-cta:active,
div.btn-area .btn-cta:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(4, 0, 60, .15) !important;
}

/* ============================================
   予約可能な占い師リスト（#reserveList）
   時間選択後にJSが生成する .staff-row を装飾
   2026-07-15 追加 / CSSのみ（JS未変更）
   ============================================ */
#reserveList {
  margin-top: 14px !important;
  font-size: .82rem !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
}
#reserveList:empty { margin: 0 !important; }

/* 各占い師カード */
#reserveList .staff-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 9px !important;
  padding: 12px 14px !important;
  margin: 10px 0 0 !important;
  background: var(--card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
}
/* 占い師名（金色アクセントバー付き） */
#reserveList .staff-name {
  font-size: .95rem !important;
  font-weight: 500 !important;
  color: var(--navy) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#reserveList .staff-name::before {
  content: "" !important;
  width: 3px !important;
  height: 15px !important;
  background: var(--gold) !important;
  border-radius: 2px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* 時間チップ群 */
#reserveList .staff-times {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
#reserveList .staff-times input[type=radio] { display: none !important; }

/* 予約可 = クリックできる予約ボタン風ピル */
#reserveList .staff-times label[for] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 16px !important;
  border: 1.5px solid var(--navy) !important;
  border-radius: 22px !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: var(--navy) !important;
  background: #fff !important;
  cursor: pointer !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  transition: background .15s, color .15s, transform .08s !important;
}
/* クリック可能とわかる矢印 */
#reserveList .staff-times label[for]::after {
  content: "›" !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  opacity: .65 !important;
  margin-left: 1px !important;
}
#reserveList .staff-times label[for]:hover { background: #f0f0fa !important; }
#reserveList .staff-times label[for]:active { transform: translateY(1px) !important; }
#reserveList .staff-times input[type=radio]:checked + label {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}
#reserveList .staff-times input[type=radio]:checked + label::after { opacity: .9 !important; }

/* 空き少（△）/ 満席メッセージ = 選択不可の情報ピル */
#reserveList .staff-times label:not([for]) {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  border: 1.5px dashed var(--border) !important;
  border-radius: 20px !important;
  font-size: .82rem !important;
  color: var(--muted) !important;
  background: #fafafa !important;
  cursor: default !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* ── 占い師グループ（ちょうど / 前後 / 満席）─ C / 2026-07-15 追加 ── */
#reserveList .staff-group { margin-top: 14px !important; }
#reserveList .staff-group-head {
  font-size: .74rem !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  display: inline-block !important;
}
#reserveList .staff-group-head.is-open     { color: var(--ok) !important;    background: #e6f4ec !important; }
#reserveList .staff-group-head.is-fullhead { color: var(--muted) !important; background: #f0eee8 !important; }
#reserveList .staff-group.is-full          { opacity: .72 !important; }

/* ── 末尾の時間変更ガイド ─ 2026-07-15 追加 ── */
#reserveList .reserve-hint {
  margin: 14px auto 0 !important;
  max-width: 300px !important;
  padding: 10px 12px !important;
  font-size: .76rem !important;
  color: #3a3570 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  background: #eef0fb !important;
  border: 1px solid #dcdff2 !important;
  border-radius: 8px !important;
}

/* ── ローディング表示 / 空き状況メッセージ ─ 2026-07-15 追加 ── */
#slot-loading.slot-loading {
  text-align: center !important;
  color: var(--muted) !important;
  font-size: .8rem !important;
  padding: 16px 0 !important;
  margin: 14px 0 0 !important;
}
#slot-loading.slot-loading::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-right: 8px !important;
  border: 2px solid var(--border) !important;
  border-top-color: var(--navy) !important;
  border-radius: 50% !important;
  vertical-align: -2px !important;
  animation: slotspin .7s linear infinite !important;
}
@keyframes slotspin { to { transform: rotate(360deg); } }
.reserve-empty {
  margin: 14px 0 0 !important;
  padding: 16px 14px !important;
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--muted) !important;
  font-size: .82rem !important;
  line-height: 1.6 !important;
  text-align: center !important;
}