:root {
  /* ===== ブランドカラー ===== */
  --resea-blue-main:   #6FAED4; /* ボタン・アクティブ状態・強調 */
  --resea-blue-deep:   #4F93BE; /* ホバー・リンク・グラデーション終端 */

  /* ===== 背景 ===== */
  --resea-bg-light:    #EAF4FB; /* カード内薄青背景・バッジ背景 */
  --resea-bg-lightest: #F3F9FD; /* テーブルヘッダー・ドロワー内背景 */
  --resea-border:      #D6E6F0; /* ボーダー全般 */

  /* ===== フラッシュメッセージ ===== */
  --resea-success-text:   #1f5c39; /* flash-success テキスト */
  --resea-success-bg:     #edf8f1; /* flash-success 背景 */
  --resea-success-border: #bfe4cd; /* flash-success ボーダー */

  --resea-warning-text:   #7a4f00; /* flash-warning テキスト（入力ミス） */
  --resea-warning-bg:     #fff8e1; /* flash-warning 背景 */
  --resea-warning-border: #ffe08a; /* flash-warning ボーダー */

  --resea-error-text:     #8a2f36; /* flash-error テキスト（システムエラー） */
  --resea-error-bg:       #fdeff1; /* flash-error 背景 */
  --resea-error-border:   #f5c2c8; /* flash-error ボーダー */

  /* ===== ボタン ===== */
  --resea-btn-success-bg:     #6FAED4; /* btn-success 背景（登録完了系） */
  --resea-btn-success-border: #4F93BE; /* btn-success ボーダー */
  --resea-btn-danger-bg:      #D86C6C; /* btn-danger 背景（削除・警告系） */
  --resea-btn-danger-border:  #B85D5D; /* btn-danger ボーダー */

  --resea-white:        #fff;    /* ボタンテキスト白・白背景汎用 */

  /* ===== テーブル ===== */
  --resea-table-stripe: #fcfeff; /* table-striped 偶数行背景 */

  /* ===== 警告（オレンジ系） ===== */
  --resea-warn-bg:     #F3E6D8; /* ログインエラー・注意カード背景 */
  --resea-warn-text:   #C07A3D; /* 警告テキスト */

  /* ===== 無効・非活性 ===== */
  --resea-disabled-bg: #E3EBF1; /* disabled ボタン・スロット背景 */
  --resea-disabled-ic: #649fff; /* disabled テキスト・アイコン */

  /* ===== 予約選択UI（staff-reservation-select.css 専用） ===== */
  --resea-closed-bg:       #DADADA; /* 休診日・選択不可セル背景 */
  --resea-select-red:      #D86C6C; /* 選択中セルのボーダー赤 */
  --resea-select-red-deep: #B85D5D; /* スロット選択ボーダー赤（濃） */
  --resea-select-bg:       #FFF7F7; /* 選択中セルの薄ピンク背景 */
  --resea-slot-bg:         #FFFDFD; /* 選択中スロットの背景 */
  --resea-green-main:      #3E9D5B; /* 月ラベル・空き数グリーン */

  /* ===== テキスト ===== */
  --resea-text-main:   #2F3A40; /* 本文・見出し */
  --resea-text-sub:    #6E7F89; /* 補足テキスト・プレースホルダー */

  /* ===== ベース背景・カード白 ===== */
  --resea-base-white:  #F9FCFE; /* ページ背景（やや青みがかった白） */
  --resea-card-white:  #FFFFFF; /* カード・モーダルの白 */

  /* ===== 互換エイリアス（旧名称との後方互換） ===== */
  --resea-blue-soft: var(--resea-bg-lightest); /* ナビ hover/active 背景 */
  --resea-bg:        var(--resea-base-white);
  --resea-surface:   var(--resea-card-white);
  --resea-line:      var(--resea-border);
  --resea-text:      var(--resea-text-main);
  --resea-muted:     var(--resea-text-sub);

  /* ===== 各 CSS で使用されていたが未定義だった変数 ===== */
  --resea-primary:    var(--resea-blue-deep);  /* 強調・リンク・タブ active */
  --resea-danger:     #c0392b;                  /* 危険操作テキスト・hover */
  --resea-text-muted: var(--resea-muted);       /* --resea-muted エイリアス */

  /* ===== 汎用トークン ===== */
  --shadow: 0 10px 30px rgba(47, 58, 64, 0.10); /* カード・ドロワーの影 */
  --radius: 14px; /* カード角丸 */

  /* ===== フォントサイズ（SP基準） ===== */
  /* レスポンシブ対応: タブレット(768px+) / PC(1024px+) で一段階ずつ大きくなる */
  --font-xs:   11px; /* バッジ・極小ラベル */
  --font-sm:   12px; /* 補足テキスト・ラベル */
  --font-nav:  13px; /* ナビゲーション */
  --font-base: 14px; /* 本文（基準） */
  --font-md:   15px; /* やや大きめ本文・sub-heading */
  --font-lg:   16px; /* UIラベル・ボタン・見出し小 */
  --font-xl:    18px; /* 見出し中 */
  --font-2xl:   20px; /* 見出し大 */
  --font-title: 22px; /* モーダルタイトル・セクション見出し */
  --font-3xl:   24px; /* ページタイトル */
  --font-hero:  42px; /* 予約区分ヒーロー表示など超大型 */

  /* ===== フォントウェイト ===== */
  --fw-medium: 500; /* medium */
  --fw-semi:   600; /* semi-bold */
  --fw-bold:   700; /* bold（bold キーワード相当） */
  --fw-xbold:  800; /* extra-bold */
  --fw-black:  900; /* black（極太） */

  /* ===== 行間 ===== */
  --lh-flat:    1;     /* バッジ・アイコンボタン */
  --lh-title:   1.05;  /* ブランドタイトル */
  --lh-tight:   1.1;   /* 見出し */
  --lh-compact: 1.2;   /* コンパクト見出し */
  --lh-snug:    1.4;   /* コンパクトテキスト */
  --lh-base:    1.5;   /* 標準 */
  --lh-relaxed: 1.7;   /* 本文・説明文 */
  --lh-loose:   1.8;   /* ゆったりテキストブロック */

  /* ===== 字間 ===== */
  --ls-base:   0.02em; /* 基本（ナビ・ラベル） */
  --ls-wide:   0.04em; /* やや広め */
  --ls-wider:  0.06em; /* 広め */
  --ls-widest: 0.08em; /* 最広（ヒーロー表示） */
  --ls-fixed:  2px;    /* 固定px字間（一部UI専用） */
  --ls-1px:    1px;    /* 印刷用字間 */
  --ls-3px:    3px;    /* 印刷用字間（広め） */

  /* ===== フォントサイズ（rem系：ブラウザ基準フォントサイズ連動） ===== */
  /* 主にカレンダーグリッド等タイトなコンポーネントで使用 */
  --font-rem-xl:  1.1rem;   /* 〜17.6px 大見出し */
  --font-rem-lg:  0.9rem;   /* 〜14.4px 大きめ   */
  --font-rem-md:  0.85rem;  /* 〜13.6px 中       */
  --font-rem-sm:  0.8rem;   /* 〜12.8px 小       */
  --font-rem-xs:  0.75rem;  /* 〜12px   極小     */
  --font-rem-2xs: 0.72rem;  /* 〜11.5px 超小     */
  --font-rem-3xs: 0.68rem;  /* 〜10.9px 最小     */

  /* ===== 週ビュー weekCard 予約区分カラー ===== */
  /* reservation_type の id に対応。後からここで色変更可能 */
  --weekCard-type-1-bg:     #E8F6FF; --weekCard-type-1-border:  #3D9BE9; /* スカイ */
  --weekCard-type-2-bg:     #ECFDF5; --weekCard-type-2-border:  #10B981; /* ミント */
  --weekCard-type-3-bg:     #FFF9E6; --weekCard-type-3-border:  #F6C84C; /* レモン */
  --weekCard-type-4-bg:     #FFF1F2; --weekCard-type-4-border:  #F43F5E; /* ローズ */
  --weekCard-type-5-bg:     #F5F0FF; --weekCard-type-5-border:  #7C3AED; /* ラベンダー */
  --weekCard-type-6-bg:     #FFF6ED; --weekCard-type-6-border:  #FB923C; /* アプリコット */
  --weekCard-type-7-bg:     #E8FDFB; --weekCard-type-7-border:  #06B6D4; /* アクア */
  --weekCard-type-8-bg:     #FFF0F6; --weekCard-type-8-border:  #DB2777; /* ブラッシュ */
  --weekCard-type-9-bg:     #F5F7FA; --weekCard-type-9-border:  #64748B; /* スレート */
  --weekCard-type-10-bg:    #F0F7FF; --weekCard-type-10-border: #2563EB; /* スチール */
  --weekCard-type-11-bg:    #F7FFE6; --weekCard-type-11-border: #84CC16; /* ライム */
  --weekCard-type-12-bg:    #FFF6F1; --weekCard-type-12-border: #A16207; /* ココア */
  --weekCard-type-13-bg:    #ECFEFF; --weekCard-type-13-border: #14B8A6; /* シアン */
  --weekCard-type-14-bg:    #FFF0FB; --weekCard-type-14-border: #BE185D; /* フクシア */
  --weekCard-type-15-bg:    #F7F9ED; --weekCard-type-15-border: #6B8E23; /* オリーブ */
  --weekCard-type-16-bg:    #F4F6FF; --weekCard-type-16-border: #4F46E5; /* インディゴ */
}

/* body / 基本適用 */

/* iOS Safari のテキスト自動縮小を明示的に無効化 */
/* (contentが viewport より広い要素を含む場合、Safari がフォントを縮小する挙動を防ぐ) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--resea-bg);
  color: var(--resea-text);
}

/* ===== レスポンシブ フォントスケール ===== */
/* タブレット(768px+): 全サイズを1段階UP
   iPad Air 4th gen portrait (820px) もこの範囲に入る。
   同じ CSS px でも iPad は DPI が高く物理的に小さく見えるため、
   mobile より一段階大きくする。 */
@media (min-width: 768px) {
  :root {
    --font-xs:    12px;
    --font-sm:    13px;
    --font-nav:   14px;  /* 13 → 14: ナビリンク・サイドバー */
    --font-base:  15px;  /* 14 → 15: 本文・ボタン */
    --font-md:    16px;  /* 15 → 16 */
    --font-lg:    17px;  /* 16 → 17 */
    --font-xl:    19px;  /* 18 → 19 */
    --font-2xl:   21px;  /* 20 → 21 */
    --font-title: 23px;  /* 22 → 23 */
    --font-3xl:   25px;  /* 24 → 25 */
    --font-hero:  44px;  /* 42 → 44 */
  }
}

/* PC(1024px+): ページタイトルとヒーローのみさらに一段階UP（他は 768px と同値） */
@media (min-width: 1024px) {
  :root {
    --font-3xl:  26px;  /* 25 → 26: ページタイトル */
    --font-hero: 46px;  /* 44 → 46: ヒーロー表示 */
  }
}

html {
  scroll-behavior: smooth;
}


/* Flash message */
.flash-area {
  margin-bottom: 12px;
}

.flash {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: var(--font-base);
  font-weight: var(--fw-bold);
}

.flash-success {
  color: var(--resea-success-text);
  background: var(--resea-success-bg);
  border-color: var(--resea-success-border);
}

.flash-warning {
  color: var(--resea-warning-text);
  background: var(--resea-warning-bg);
  border-color: var(--resea-warning-border);
}

.flash-error {
  color: var(--resea-error-text);
  background: var(--resea-error-bg);
  border-color: var(--resea-error-border);
}

/* ユーザーページのフォントを高齢者向けに拡大（スタッフ画面には影響しない） */
:root {
  --font-xs:   13px;
  --font-sm:   14px;
  --font-nav:  15px;
  --font-base: 16px;
  --font-md:   17px;
  --font-lg:   18px;
  --font-xl:   20px;
  --font-2xl:  22px;
}

* {
  box-sizing: border-box;
}

/* iOS Chrome/Safari: button 等のフォント継承強制 */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

body {
  margin: 0;
  background: var(--resea-base-white);
  color: var(--resea-text-main);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.topbar {
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  background: rgba(249, 252, 254, .85);
  border-bottom: 1px solid var(--resea-border);
  z-index: 10;
}

.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-base);
  flex: 1;
  min-width: 0;
}

.brand-text {
  min-width: 0;
  overflow: hidden;
}

.brand-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-logo{
    width: 36px;
  height: 36px;
  display: block;
  object-fit: contain;
}
.pill {
  border: 1px solid var(--resea-border);
  background: var(--resea-surface);
  color: var(--resea-text-sub);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: var(--font-sm);
  white-space: nowrap;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

h1 {
  margin: 14px 0 6px;
  font-size: var(--font-xl);
}

.sub {
  margin: 0 0 14px;
  color: var(--resea-text-sub);
  font-size: var(--font-nav);
  line-height: var(--lh-relaxed);
}

.grid {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 16px;
  align-items: start;
}

/* トップページ: 左=カレンダー(広め) / 右=予約セクション */
.grid--top {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 980px) {
  .grid,
  .grid--top {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--resea-card-white);
  border: 1px solid var(--resea-border);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(47, 58, 64, .06);
  overflow: hidden;
}

.card-hd {
  padding: 14px 16px;
  background: var(--resea-bg-lightest);
  border-bottom: 1px solid var(--resea-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-title {
  font-weight: var(--fw-black);
  font-size: var(--font-base);
}

.card-body {
  padding: 20px 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: var(--fw-black);
  font-size: var(--font-sm);
  border: 1px solid transparent;
}

.badge-info {
  background: var(--resea-bg-light);
  color: var(--resea-blue-deep);
  border-color: var(--resea-border);
}

.badge-warn {
  background: var(--resea-warn-bg);
  color: var(--resea-warn-text);
  border-color: rgba(192, 122, 61, .22);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  opacity: .65;
}

.muted {
  color: var(--resea-text-sub);
  font-size: var(--font-nav);
  line-height: var(--lh-relaxed);
}

.btn {
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: var(--fw-black);
  font-size: var(--font-base);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.btn-primary {
  background: var(--resea-blue-main);
  color: var(--resea-white);
}

.btn-primary:hover {
  background: var(--resea-blue-deep);
}

.btn-outline {
  background: var(--resea-surface);
  border-color: var(--resea-border);
  color: var(--resea-text-main);
}

.btn-ghost {
  background: var(--resea-bg-light);
  border-color: var(--resea-border);
  color: var(--resea-blue-deep);
}

.btn-full {
  width: 100%;
}

.infoBox {
  border: 1px solid var(--resea-border);
  background: var(--resea-bg-light);
  border-radius: 14px;
  padding: 12px;
}

/* ===== ご案内カード（アイコン付き） ===== */
.noticeCard {
  background: var(--resea-card-white);
  border: 1px solid var(--resea-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(47, 58, 64, .06);
  margin-bottom: 0;
}

.noticeItem {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--resea-border);
  align-items: flex-start;
}

.noticeItem:last-child {
  border-bottom: none;
}

.noticeIcon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: var(--fw-black);
  font-style: italic;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: 0;
}

.noticeIcon--blue {
  background: var(--resea-bg-light);
  color: var(--resea-blue-deep);
}

.noticeIcon--orange {
  background: #fff3e0;
  color: #c07a3d;
}

.noticeIcon--red {
  background: #fdecea;
  color: #c0392b;
}

.noticeContent {
  flex: 1;
  min-width: 0;
}

.noticeTitle {
  font-weight: var(--fw-black);
  font-size: var(--font-base);
  color: var(--resea-text-main);
  margin-bottom: 4px;
}

.noticeBody {
  font-size: var(--font-nav);
  color: var(--resea-text-sub);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.sectionTitle {
  font-weight: var(--fw-black);
  margin: 14px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sectionTitle small {
  font-weight: var(--fw-bold);
  color: var(--resea-text-sub);
}

.checkGroup {
  border: 1px solid var(--resea-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--resea-surface);
}

.checkWrap {
  border-top: 1px solid var(--resea-border);
}

.checkWrap:first-child {
  border-top: 0;
}

.checkItem {
  display: flex;
  gap: 10px;
  padding: 12px 12px;
  align-items: flex-start;
  background: var(--resea-surface);
}

.chk {
  width: 20px;
  height: 20px;
  accent-color: var(--resea-blue-deep);
  margin-top: 2px;
  flex: 0 0 auto;
}

.checkLabel {
  font-weight: var(--fw-black);
}

.checkDesc {
  margin-top: 4px;
  font-size: var(--font-sm);
  color: var(--resea-text-sub);
  line-height: var(--lh-base);
}

.inlineGuide {
  display: none;
  padding: 0 12px 12px;
  background: var(--resea-surface);
}

.inlineCard {
  border: 1px solid var(--resea-border);
  border-radius: 14px;
  background: var(--resea-bg-lightest);
  padding: 12px;
}

.inlineTitle {
  font-weight: var(--fw-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.inlineBody {
  font-size: var(--font-nav);
  line-height: var(--lh-relaxed);
  color: var(--resea-text-main);
}

details {
  border: 1px solid var(--resea-border);
  border-radius: 14px;
  background: var(--resea-surface);
  overflow: hidden;
}

summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 12px;
  font-weight: var(--fw-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--resea-bg-lightest);
  border-bottom: 1px solid var(--resea-border);
}

summary::-webkit-details-marker {
  display: none;
}

.detailsBody {
  padding: 12px;
}

.chev {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid var(--resea-border);
  display: grid;
  place-items: center;
  color: var(--resea-blue-deep);
  background: var(--resea-surface);
  flex: 0 0 auto;
  font-weight: var(--fw-black);
}

.divider {
  height: 1px;
  background: var(--resea-border);
  margin: 14px 0;
}

.twoBtns {
  display: grid;
  gap: 16px; /* 戻る／実行ボタンの間隔（指での誤タップ防止） */
}

@media (min-width: 520px) {
  .twoBtns {
    grid-template-columns: 1fr 1fr;
  }
}

.footerNote {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--resea-border);
  background: var(--resea-bg-lightest);
  color: var(--resea-text-sub);
  font-size: var(--font-sm);
  line-height: var(--lh-relaxed);
}

.pcGuide {
  display: block;
}

@media (max-width: 980px) {
  .pcGuide {
    display: none;
  }
}


/* ===== First TOP (hero) ===== */
.heroCard {
  border-radius: 18px;
}

.heroBody {
  padding: 18px;
}

.heroTitle {
  margin: 0 0 14px;
  font-size: var(--font-2xl);
  font-weight: var(--fw-black);
  text-align: center;
}

.heroInfo {
  border: 1px solid var(--resea-border);
  background: var(--resea-bg-light);
  border-radius: 14px;
  padding: 14px;
}

.heroInfoText {
  margin: 0;
  text-align: center;
  font-weight: var(--fw-black);
  line-height: var(--lh-relaxed);
}

/* stack spacing */
.stack {
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

/* dashed message box */
.dashBox {
  border: 1px dashed var(--resea-border);
  border-radius: 14px;
  padding: 14px;
  background: var(--resea-surface);
}

.dashBox--danger {
  border-color: rgba(192, 57, 43, .3);
  background: rgba(192, 57, 43, .04);
}

.dashText {
  margin: 0;
  font-size: var(--font-lg);
  line-height: var(--lh-loose);
  color: var(--resea-text-main);
}

/* font-size を base に上書き（通知文・補足テキスト等） */
.dashText--base { font-size: var(--font-base); }

/* 危険色バリアント */
.dashText--danger { color: var(--resea-danger); font-size: var(--font-base); }

.emWarn {
  color: var(--resea-warn-text);
  font-weight: var(--fw-black);
}

.emInfo {
  color: var(--resea-blue-deep);
  font-weight: var(--fw-black);
}

/* CTA */
.ctaArea {
  margin-top: 8px;
  display: grid;
  gap: 10px;
}

/* margin utilities */
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }

/* 高さスペーサー（旧パターンとの互換） */
.h-8  { height: 8px; }
.h-10 { height: 10px; }
.h-14 { height: 14px; }
.h-16 { height: 16px; }

.ctaBtn {
  border-radius: 999px;
  padding: 14px 16px;
  font-size: var(--font-md);
}

.ctaNote {
  margin: 0;
  text-align: center;
  color: var(--resea-text-sub);
  font-size: var(--font-sm);
}



/* ===== first/select 用（最低限） ===== */
.pageHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.pageTitle{ margin: 10px 0 6px; font-size: var(--font-xl); }

.btn-sm{ padding:10px 12px; border-radius:12px; font-size: var(--font-nav); }

.monthNav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.monthNav-center{
  display:flex;
  align-items:center;
  gap:10px;
}

.monthLabel{
  min-width: 140px;
  text-align:center;
  font-weight: var(--fw-black);
  color: var(--resea-blue-deep);
}

.calendar{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calDow{
  text-align:center;
  font-size: var(--font-sm);
  color: var(--resea-text-sub);
  padding: 6px 0;
}

.calDay{
  border: 1px solid var(--resea-border);
  background: var(--resea-surface);
  border-radius: 12px;
  padding: 10px 0;
  font-weight: var(--fw-black);
  cursor:pointer;
}

.calDay:hover{ background: var(--resea-bg-lightest); }

.calDay.disabled{
  background: var(--resea-disabled-bg);
  color: var(--resea-disabled-ic);
  cursor:not-allowed;
}

.hintBox{
  border:1px dashed var(--resea-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--resea-bg-lightest);
}

.slotList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ===== 時間帯ボタン ===== */

.slotBtn{
  border: 1px solid var(--resea-border);
  position: relative;
  background: var(--resea-card-white);
  color: var(--resea-text-main);

  border-radius: 14px;
  padding: 12px 14px;
  font-weight: var(--fw-black);
  cursor: pointer;
  text-align: center;

  transition: background .15s ease,
              border-color .15s ease,
              transform .05s ease;
}

/* hover */
.slotBtn:hover{
  border-color: var(--resea-blue-main);
  background: var(--resea-bg-lightest);
}

/* クリック感 */
.slotBtn:active{
  transform: scale(1.02);
}

/* ===== 選択状態 ===== */

.slotBtn.active{
  background: var(--resea-blue-main);
  border-color: var(--resea-blue-main);
  color: var(--resea-card-white);
}

/* 選択中 hover */
.slotBtn.active:hover{
  background: var(--resea-blue-deep);
  border-color: var(--resea-blue-deep);
}
.slotBtn.active::after{
  content: "✓";
  position: absolute;
  right: 14px;
  top: 10px;

  font-weight: var(--fw-black);
  font-size: var(--font-base);

  color: var(--resea-card-white);
}
.selectedBox{
  border: 1px solid var(--resea-border);
  border-radius: 14px;
  padding: 12px;
  background: var(--resea-surface);
}

.selectedDt{
  font-weight: var(--fw-black);
  text-align:center;
}

/* 予約日時表示 ─ 青色・XL サイズ（完了・確認ページ） */
.selectedDt--blue {
  font-size: var(--font-xl);
  color: var(--resea-blue-deep);
}

/* 予約日時表示 ─ LG サイズ（選択中・確認フォーム） */
.selectedDt--lg {
  font-size: var(--font-lg);
  word-break: break-all;
}

/* 取り消し線（変更後の旧予約表示など） */
.selectedDt--struck {
  color: var(--resea-muted);
  text-decoration: line-through;
}

.formLabel{
  display:block;
  font-weight: var(--fw-black);
  margin-bottom:6px;
}

.input{
  width:100%;
  border:1px solid var(--resea-border);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: var(--font-lg);
  outline:none;
}

.input:focus{
  border-color: rgba(79,147,190,.6);
  box-shadow: 0 0 0 4px rgba(79,147,190,.12);
}

.input--error{
  border-color: var(--resea-error-border) !important;
  background: var(--resea-error-bg);
}

.field-error{
  display: block;
  color: var(--resea-error-text);
  font-size: .82rem;
  font-weight: 600;
  margin-top: 5px;
  min-height: 1.1em;
}

.errorText{
  margin-top:10px;
  padding:10px 12px;
  border-radius: 12px;
  background: var(--resea-warn-bg);
  color: var(--resea-warn-text);
  font-weight: var(--fw-black);
  font-size: var(--font-nav);
}

/* 日付ボタン */
.calDay{
  border: 1px solid var(--resea-border);
  background: var(--resea-surface);
  border-radius: 12px;
  padding: 10px 0;
  cursor: pointer;
  font-weight: var(--fw-xbold);
}

.calDay:hover{
  border-color: var(--resea-blue-main);
}

/* 無効 */
.calDay.disabled,
.calDay:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* 選択状態（青枠） */
.calDay.is-selected{
  border: 2px solid var(--resea-blue-main);
  background: var(--resea-bg-light);
  color: var(--resea-blue-deep);
}

#slotArea{
  scroll-margin-top: 80px;
}


/* ===== 最短空き表示 ===== */
.earliestBox{
  border: 1px solid var(--resea-border);
  background: var(--resea-bg-lightest);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.earliestLeft{
  display:flex;
  align-items:center;
  gap:10px;
}

.earliestLabel{
  font-weight: var(--fw-black);
  color: var(--resea-blue-deep);
  white-space: nowrap;
}

.earliestValue{
  font-weight: var(--fw-black);
}

.earliestBtn{
  padding: 10px 14px;
  border-radius: 12px;
  font-size: var(--font-nav);
  white-space: nowrap;
  background: var(--resea-blue-main);
  border-color: var(--resea-blue-main);
  color: var(--resea-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.earliestBtn:hover{
  background: var(--resea-blue-deep);
  border-color: var(--resea-blue-deep);
}

/* ===== カレンダー日付の状態 ===== */

/* 休診（薄い赤） */
.calDay.is-holiday,
.calDay.is-holiday:disabled{
  background: var(--resea-warn-bg);
  border-color: rgba(192, 122, 61, .22);
  color: var(--resea-warn-text);
  opacity: 1;
}

/* 外来はあるが予約が開いていない（薄い灰） */
.calDay.is-closed,
.calDay.is-closed:disabled{
  background: var(--resea-disabled-bg);
  border-color: var(--resea-border);
  color: var(--resea-disabled-ic);
  opacity: 1;
}

/* 選択状態（青枠） */
.calDay.is-selected{
  border: 2px solid var(--resea-blue-main);
  background: var(--resea-bg-light);
  color: var(--resea-blue-deep);
}

/* ===== 再診予約 (revisit) ===== */
.revisitTopbar-meta {
  margin-left: auto;
  font-size: var(--font-nav);
  color: var(--resea-text-sub);
  white-space: nowrap;
}

.revisitHero {
  margin-top: 12px;
  margin-bottom: 16px;
  padding: 28px 28px 30px;
  border: 1px solid var(--resea-border);
  border-radius: 24px;
  background: #fff;
}

.revisitHero-label {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--resea-bg-light);
  color: var(--resea-blue-deep);
  font-size: var(--font-sm);
  font-weight: var(--fw-bold);
}

.revisitHero-title {
  margin: 0 0 10px;
  font-size: var(--font-3xl);
  line-height: var(--lh-base);
  color: var(--resea-text-main);
}

.revisitHero-sub {
  margin: 0;
  color: var(--resea-text-sub);
  line-height: var(--lh-loose);
}

.revisitGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}

/* デスクトップ: 予約履歴は2列幅いっぱいに広げる */
.revisit-history--full {
  grid-column: 1 / -1;
}

.revisitInfoRows {
  display: grid;
  gap: 0;
}

.revisitInfoRow {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #edf3f7;
}

.revisitInfoRow:last-child {
  border-bottom: none;
}

.revisitInfoLabel {
  color: var(--resea-text-sub);
  font-size: var(--font-nav);
}

.revisitInfoValue {
  color: var(--resea-text-main);
  font-weight: var(--fw-bold);
}

.revisitActionList {
  display: grid;
  gap: 14px;
}

.revisitActionBtn {
  width: 100%;
}

.revisitEmpty {
  color: var(--resea-text-sub);
  line-height: var(--lh-loose);
}

.revisitManageList {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.revisitManageDt {
  font-size: var(--font-base);
  color: var(--resea-blue-deep);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.revisitManageActions {
  display: flex;
  gap: 10px;
}

.revisitManageBtn {
  flex: 1;
}

.btn-danger {
  background: var(--resea-btn-danger-bg);
  border-color: var(--resea-btn-danger-border);
  color: var(--resea-white);
}

.btn-danger:hover {
  opacity: .88;
}

/* ===== 日次制限 警告バナー ===== */
.limit-warning {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--resea-warning-bg);
  border: 2px solid var(--resea-warning-border);
  border-radius: 12px;
  margin-bottom: 16px;
}

.limit-warning-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.limit-warning-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.limit-warning-title {
  font-weight: 700;
  color: var(--resea-warning-text);
  font-size: var(--font-md, 15px);
  margin: 0;
}

.limit-warning-msg {
  color: var(--resea-warning-text);
  margin: 0;
  font-size: var(--font-base, 14px);
}

.limit-warning-note {
  font-size: var(--font-sm, 12px);
  color: var(--resea-warning-text);
  opacity: 0.8;
  margin: 0;
}

/* メールアドレス未登録のご案内（前日リマインダーメール） */
.mailNotice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-bottom: 16px;
  border: 2px solid var(--resea-warning-border);
  background: var(--resea-warning-bg);
  border-radius: 12px;
}

.mailNotice-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mailNotice-title {
  margin: 0;
  font-weight: var(--fw-bold);
  color: var(--resea-warning-text);
  font-size: var(--font-md, 15px);
}

.mailNotice-msg {
  margin: 0;
  color: var(--resea-warning-text);
  font-size: var(--font-base, 14px);
  line-height: var(--lh-relaxed);
}

/* 警告続行ボタン（アンバー） */
.btn-caution {
  background: #D97706;
  border-color: #B45309;
  color: #fff;
}

.btn-caution:hover {
  background: #B45309;
}

.revisitManageNote {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--resea-bg-lightest);
  border: 1px solid var(--resea-line);
  color: var(--resea-text-sub);
  font-size: var(--font-sm);
  line-height: var(--lh-relaxed);
}

.revisitReservationList {
  display: grid;
  gap: 0;
}

.revisitReservationItem {
  padding: 14px 0;
  border-bottom: 1px solid #edf3f7;
}

.revisitReservationItem:last-child {
  border-bottom: none;
}

.revisitReservationName {
  margin-bottom: 6px;
  color: var(--resea-text-main);
  font-weight: var(--fw-bold);
  font-size: var(--font-md);
  line-height: var(--lh-relaxed);
}

.revisitReservationDatetime {
  color: var(--resea-text-sub);
  font-size: var(--font-base);
  line-height: var(--lh-relaxed);
}

.revisitReservationNotice {
  margin-top: 6px;
  font-size: var(--font-sm);
  color: var(--resea-warning-text);
  background: var(--resea-warning-bg);
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-block;
}

/* mypage 予約履歴 */
.revisitHistoryList {
  display: grid;
  gap: 0;
}

.revisitHistoryItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #edf3f7;
}

.revisitHistoryItem:last-child {
  border-bottom: none;
}

.revisitHistoryName {
  font-weight: var(--fw-bold);
  font-size: var(--font-base);
  color: var(--resea-text-main);
  margin-bottom: 3px;
}

.revisitHistoryDatetime {
  font-size: var(--font-nav);
  color: var(--resea-text-sub);
}

.revisitHistoryBadge {
  flex-shrink: 0;
  font-size: var(--font-xs);
  font-weight: var(--fw-bold);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.revisitHistoryBadge--reserved {
  background: #e8f4f0;
  color: #2e8a62;
}

.revisitHistoryBadge--cancelled {
  background: #fdecea;
  color: #c0392b;
}

/* mypage QR */
.revisitReservationQr {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #d0e4ef;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.revisitReservationQrLabel {
  font-size: var(--font-sm);
  color: var(--resea-text-sub);
  letter-spacing: var(--ls-base);
}

.revisitReservationQrCanvas img {
  display: block;
}

.revisitReservationQrCode {
  font-size: var(--font-nav);
  font-family: monospace;
  color: var(--resea-text-main);
  letter-spacing: var(--ls-widest);
}

@media (max-width: 767px) {
  .topbar-inner {
    flex-wrap: wrap;
  }

  .revisitTopbar-meta {
    width: 100%;
    font-size: var(--font-sm);
    color: var(--resea-text-sub);
    padding-top: 2px;
    border-top: 1px solid var(--resea-border);
  }

  .revisitHero {
    padding: 22px 18px 24px;
  }

  .revisitHero-title {
    font-size: var(--font-title);
  }

  .revisitGrid {
    grid-template-columns: 1fr;
  }

  /* モバイルでの表示順: ご利用情報→予約状況→メニュー→ご案内→予約履歴 */
  .revisit-info    { order: 1; }
  .revisit-status  { order: 2; }
  .revisit-menu    { order: 3; }
  .revisit-notice  { order: 4; }
  .revisit-history { order: 5; }

  .revisitInfoRow {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ===== kv (key-value) 確認テーブル ===== */
.kv {
  display: grid;
  gap: 0;
}

.kv-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--resea-border);
  align-items: baseline;
}

.kv-row:last-child {
  border-bottom: none;
}

.kv-k {
  color: var(--resea-text-sub);
  font-size: var(--font-nav);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.kv-v {
  font-weight: var(--fw-bold);
  color: var(--resea-text-main);
  overflow-wrap: break-word;
}

/* ===== Submit loading overlay ===== */
.submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(47, 58, 64, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.submit-overlay[hidden] {
  display: none;
}

.submit-overlay-spinner {
  width: 52px;
  height: 52px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: submit-overlay-spin 0.8s linear infinite;
}

.submit-overlay-text {
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

@keyframes submit-overlay-spin {
  to { transform: rotate(360deg); }
}

/* ===== ys-card（外来カレンダー等で使う新デザインカード） ===== */
.ys-card {
  background: var(--resea-card-white);
  border: 1px solid var(--resea-border);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(47, 58, 64, .06);
  overflow: hidden;
}

.ys-card-hd {
  padding: 14px 16px;
  background: var(--resea-bg-lightest);
  border-bottom: 1px solid var(--resea-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ys-card-title {
  font-weight: var(--fw-black);
  font-size: var(--font-base);
}

.ys-card-body {
  padding: 16px;
}

.ys-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: var(--fw-black);
  font-size: var(--font-sm);
  border: 1px solid transparent;
}

.ys-badge-warn {
  background: var(--resea-warn-bg);
  color: var(--resea-warn-text);
  border-color: rgba(192, 122, 61, .22);
}

.ys-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .65;
  flex-shrink: 0;
}

/* ===== 外来カレンダー（表示専用セル） ===== */
.calGrid {
  gap: 5px;
}

.calDow--sun { color: #d4614c; }
.calDow--sat { color: var(--resea-blue-deep); }

.calCell {
  border: 1px solid var(--resea-border);
  border-radius: 8px;
  background: var(--resea-surface);
  min-height: 56px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.calCell--empty {
  border-color: transparent;
  background: transparent;
}

.calCell--sun { background: #fff9f7; }
.calCell--sat { background: #f6f8ff; }

.calCell--today {
  border-color: var(--resea-blue-main);
  background: var(--resea-bg-light);
}

.calCell-num {
  font-size: var(--font-sm);
  font-weight: var(--fw-black);
  line-height: 1;
}

.calCell-num--today {
  color: var(--resea-blue-deep);
}

.calCell--sun .calCell-num  { color: #d4614c; }
.calCell--sat .calCell-num  { color: var(--resea-blue-deep); }

.calEvent {
  display: block;
  font-size: 10px;
  font-weight: var(--fw-bold);
  background: var(--resea-warn-bg);
  color: var(--resea-warn-text);
  border-radius: 4px;
  padding: 1px 4px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calLegend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--font-sm);
  color: var(--resea-text-sub);
}

.calNav--disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

/* ===== 外来カレンダー アジェンダ（リスト）表示 ===== */
.calAgenda {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border: 1px solid var(--resea-border);
  border-radius: 12px;
  overflow: hidden;
}

.calAgenda-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--resea-border);
  background: var(--resea-surface);
}

.calAgenda-row:last-child {
  border-bottom: none;
}

.calAgenda-date {
  flex: 0 0 52px;
  font-weight: var(--fw-black);
  font-size: var(--font-base);
  white-space: nowrap;
  padding-top: 2px;
}

.calAgenda-dow {
  font-size: var(--font-sm);
  font-weight: var(--fw-bold);
  margin-left: 2px;
}

.calAgenda-dow--sat { color: var(--resea-blue-deep); }
.calAgenda-dow--week { color: var(--resea-text-sub); }

.calAgenda-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calAgenda-event {
  font-size: var(--font-nav);
  line-height: var(--lh-relaxed);
  color: var(--resea-text-main);
  background: var(--resea-warn-bg);
  color: var(--resea-warn-text);
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-block;
}

.calAgenda-empty {
  margin: 14px 0 0;
  color: var(--resea-text-sub);
  font-size: var(--font-nav);
}

.calAgenda-note {
  margin: 10px 0 0;
  font-size: var(--font-sm);
  color: var(--resea-text-sub);
}

.calAgenda-row--sun {
  /* 日曜は曜日の文字色（赤）のみで区別 — 背景なし */
  background: transparent;
}

.calAgenda-row--today {
  background: var(--resea-bg-light);
}

.calAgenda-dow--sun  { color: #d4614c; }
.calAgenda-dow--sat  { color: var(--resea-blue-deep); }
.calAgenda-dow--week { color: var(--resea-text-sub); }

.calAgenda-event--closed {
  /* 日曜の休診チップは通常イベントと同じウォームオレンジ */
}

.calAgenda-no-event {
  font-size: var(--font-nav);
  color: var(--resea-text-sub);
}

.calAgenda-month {
  display: block;
  font-size: var(--font-sm);
  color: var(--resea-text-sub);
  line-height: 1.3;
}