@charset "utf-8";
/* ==========================================================================
   reserve.css — 予約フロー（reserve.html）専用。予約完了ページでも上部（p-reserve-head）を共用する
   共通部品（c-steps / c-selected / c-avail / c-form-table など）は site.css
   ========================================================================== */

/* 店名・クーポン名・ご要望などに空白の無い長い英数字が入っても横にはみ出さない
   （overflow-wrap は継承されるので、本文内の共通部品 c-selected / c-coupon / c-deftable などにも効く） */
.p-reserve { overflow-wrap: anywhere; }

/* ---------- 全STEP共通の上部（即時予約バッジ + サロン名） ---------- */
.p-reserve-head { padding: 6px 0 0; }
.p-reserve-head__meta { display: flex; align-items: center; gap: 8px; color: var(--c-sub); font-size: 11px; }
.p-reserve-head__badge { flex: none; padding: 0 8px; border: 1px solid var(--c-primary); border-radius: 2px; background: var(--c-primary-pale); color: var(--c-primary-dark); font-size: 11px; font-weight: bold; line-height: 18px; }
.p-reserve-head__name { margin-top: 5px; color: var(--c-heading); font-size: 20px; font-weight: bold; line-height: 1.4; }
.p-reserve-head__name a { color: inherit; }
.p-reserve-head__kana { display: block; margin-top: 1px; color: var(--c-sub); font-size: 11px; font-weight: normal; letter-spacing: .04em; }

/* ---------- 下部（戻る・ご利用ガイド） ---------- */
.p-reserve-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--c-border-light); }
.p-reserve-back { min-width: 120px; }
.p-reserve-help { color: var(--c-sub); font-size: 12px; }
.p-reserve-faq { margin-top: 16px; padding: 12px 16px; border: 1px solid var(--c-border-light); background: var(--c-bg-soft); }
.p-reserve-faq__title { margin-bottom: 4px; color: var(--c-heading); font-size: 12px; font-weight: bold; }
.p-reserve-faq__list { display: flex; flex-wrap: wrap; gap: 2px 24px; font-size: 12px; line-height: 1.8; }

/* ---------- 注記リスト ---------- */
.p-reserve-notes { margin: 0 0 14px; color: #555; font-size: 12px; line-height: 1.75; }
.p-reserve-notes li { position: relative; padding-left: 1.1em; }
.p-reserve-notes li::before { content: "・"; position: absolute; left: 0; }
.p-reserve-notes b { color: var(--c-text); }

/* ---------- STEP1: 絞り込み・並び順 ---------- */
.p-reserve-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 10px; }
.p-reserve-step1 .c-filter { margin-bottom: 10px; }
.p-reserve-step1 .c-countbar { margin-bottom: 14px; }
.p-reserve-step1 .c-countbar__count b { margin-left: 3px; }
.p-reserve-remarks { margin-top: 20px; }
.p-reserve-remarks__title { margin-bottom: 4px; color: var(--c-heading); font-weight: bold; }
.p-reserve-remarks p { font-size: 12px; line-height: 1.75; }

/* STEP1: メニュー行（ボタンを2つ並べる） */
.p-reserve-menu .p-reserve-menu__action { flex: 0 0 300px; display: flex; justify-content: flex-end; gap: 6px; }
.p-reserve-menu .p-reserve-menu__action .c-btn { min-width: 0; white-space: nowrap; }

/* ---------- STEP1b: メニュー追加の表 ---------- */
.p-reserve-anchors { align-items: center; margin: 0 0 10px; font-size: 12px; }
.p-reserve-anchors__label { margin-right: 4px; color: var(--c-sub); }
.p-reserve-menutable { width: 100%; border: 1px solid var(--c-border); background: #fff; }
.p-reserve-menutable th, .p-reserve-menutable td { padding: 9px 12px; border-top: 1px solid var(--c-border-light); vertical-align: middle; }
.p-reserve-menutable thead th { border-top: 0; background: var(--c-bg-soft); color: var(--c-heading); font-size: 12px; font-weight: bold; }
.p-reserve-menutable .p-reserve-menutable__check { width: 46px; padding-right: 0; text-align: center; }
.p-reserve-menutable .p-reserve-menutable__price { width: 120px; font-weight: bold; text-align: right; white-space: nowrap; }
.p-reserve-menutable .p-reserve-menutable__time { width: 140px; color: #555; text-align: right; white-space: nowrap; }
.p-reserve-menutable thead .p-reserve-menutable__price, .p-reserve-menutable thead .p-reserve-menutable__time { color: var(--c-heading); }
.p-reserve-menutable__cat th { padding: 6px 12px; border-top: 1px solid var(--c-border); background: #fbf8f5; color: var(--c-heading); font-weight: bold; scroll-margin-top: 8px; }
.p-reserve-menutable tbody tr[data-menu-id] { cursor: pointer; }
.p-reserve-menutable tbody tr[data-menu-id]:hover td { background: #fdf9f6; }
.p-reserve-menutable tbody tr.is-checked td { background: var(--c-primary-pale); }
.p-reserve-menutable tbody tr.is-checked:hover td { background: #fbe5eb; }
.p-reserve-menutable tbody tr.is-na { cursor: default; }
.p-reserve-menutable tbody tr.is-na td { background: #faf8f6; color: #a39b94; }
.p-reserve-menutable input[type="checkbox"] { width: 17px; height: 17px; margin: 0; vertical-align: middle; accent-color: var(--c-primary); cursor: pointer; }
.p-reserve-menutable label { display: block; cursor: pointer; }
.p-reserve-menutable__name { font-weight: bold; }
.p-reserve-menutable__desc { display: block; margin-top: 1px; color: #666; font-size: 11px; line-height: 1.6; }
.p-reserve-menutable tr.is-na .p-reserve-menutable__desc { color: inherit; }
.p-reserve-menutable__sp { display: none; }

.p-reserve-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--c-border); background: var(--c-bg-soft); }
.p-reserve-summary__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 22px; font-size: 12px; }
.p-reserve-summary__nums b { margin-left: 4px; font-size: 16px; }
.p-reserve-summary__nums .p-reserve-summary__price b { color: var(--c-price); font-size: 18px; }
.p-reserve-summary .c-btn { flex: none; min-width: 320px; min-height: 46px; font-size: 15px; }

/* ---------- STEP2: 選択済ブロック（SP は「目安・合計」の1行に畳み、タップで開く。PC は常に全体を表示） ---------- */
.p-reserve-selbar { display: none; }

/* ---------- STEP2: 指名 ---------- */
.p-reserve-stylists { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.p-reserve-stylist { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; min-height: 74px; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; color: var(--c-text); font-size: 13px; line-height: 1.45; text-align: left; -webkit-appearance: none; appearance: none; transition: border-color .12s, background-color .12s; }
.p-reserve-stylist:hover { border-color: var(--c-primary); background: var(--c-primary-pale); }
.p-reserve-stylist__photo { flex: 0 0 42px; border-radius: 2px; }
.p-reserve-stylist__photo--free { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; border: 1px dashed #cfc6bd; background: var(--c-bg-soft); color: #94897f; font-size: 10px; font-weight: bold; line-height: 1.35; text-align: center; }
.p-reserve-stylist__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-reserve-stylist__role { overflow: hidden; color: var(--c-sub); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
/* 氏名は省略せず2行まで折り返す（長い氏名でも誰か分かるように） */
.p-reserve-stylist__name { display: -webkit-box; overflow: hidden; font-weight: bold; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* 選択中は右上の「選択中」ラベルと1行目（役職 or 氏名）が重ならないようにする */
.p-reserve-stylist.is-current .p-reserve-stylist__body > :first-child { padding-right: 42px; }
.p-reserve-stylist__fee { color: #555; font-size: 11px; }
.p-reserve-stylist__fee b { color: var(--c-text); }
.p-reserve-stylist__ng { color: var(--c-error); font-size: 10px; line-height: 1.4; }
.p-reserve-stylist.is-current { border-color: var(--c-primary); background: var(--c-primary-pale); box-shadow: inset 0 0 0 1px var(--c-primary); }
.p-reserve-stylist.is-current::after { content: "選択中"; position: absolute; top: 6px; right: 6px; padding: 0 6px; border-radius: 2px; background: var(--c-primary); color: #fff; font-size: 10px; font-weight: bold; line-height: 16px; }
.p-reserve-stylist[disabled] { border-color: var(--c-border-light); background: #f8f6f3; color: #a39b94; cursor: not-allowed; }
.p-reserve-stylist[disabled] .p-reserve-stylist__fee, .p-reserve-stylist[disabled] .p-reserve-stylist__role { color: inherit; }
.p-reserve-stylist[disabled] .c-thumb img { opacity: .45; filter: grayscale(1); }
.p-reserve-stylists-note { margin: 0 0 4px; }

/* ---------- STEP2: 空き状況 ---------- */
.p-reserve-avail { position: relative; min-height: 120px; }
.p-reserve-avail.is-loading > * { opacity: .45; pointer-events: none; transition: opacity .1s; }
.p-reserve-avail.is-loading::after { content: ""; position: absolute; left: 50%; top: 70px; width: 26px; height: 26px; margin-left: -13px; border: 3px solid #eedfe2; border-top-color: var(--c-primary); border-radius: 50%; animation: c-spin .8s linear infinite; }
.p-reserve-avail .c-alert { margin-bottom: 10px; }
.p-reserve-avail__lead b { margin: 0 2px; }
.p-reserve-avail__notes { margin-top: 6px; }
.p-reserve-avail__bottomnav { margin-top: 12px; }
.p-reserve-avail .c-avail-nav > a, .p-reserve-avail .c-avail-nav > .is-disabled { flex: none; white-space: nowrap; }
.p-reserve-avail .c-avail-nav__range { min-width: 0; text-align: center; }
.p-reserve-avail .c-avail th.p-reserve-dayoff { background: #ebe7e2; color: #8b8178; }
.p-reserve-avail .c-avail td.is-holiday { background: #f4f1ed; }
.p-reserve-dayoff__label { display: block; margin-top: 1px; font-size: 9px; font-weight: bold; letter-spacing: .02em; white-space: nowrap; }
.p-reserve-closed__tel { margin-top: 6px; }
.p-reserve-closed__tel .c-tel__num { font-size: 20px; }

/* ---------- STEP3 / STEP4 ---------- */
.p-reserve-table .c-deftable th { width: 200px; }
.p-reserve-when { font-size: 15px; }
.p-reserve-when-sub { margin-left: 6px; color: #555; }
.p-reserve-change { margin-left: 14px; font-size: 12px; }
.p-reserve-tag { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid var(--c-primary); border-radius: 2px; background: #fff; color: var(--c-primary-dark); font-size: 10px; font-weight: bold; line-height: 16px; vertical-align: 1px; }
.p-reserve-items li { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.p-reserve-items li + li { margin-top: 2px; padding-top: 4px; border-top: 1px dotted var(--c-border); }
.p-reserve-items__kind { flex: 0 0 52px; color: var(--c-sub); font-size: 11px; }
.p-reserve-items__name { flex: 1; min-width: 0; font-weight: bold; }
.p-reserve-items__price { flex: none; white-space: nowrap; }
.p-reserve-total { color: var(--c-price); font-size: 19px; line-height: 1.3; }
.p-reserve-total__note { margin-left: 8px; color: #555; font-size: 12px; }
.p-reserve-name-kana { margin-left: 8px; color: var(--c-sub); font-size: 12px; }
.p-reserve-question { margin-bottom: 6px; padding: 8px 10px; border-left: 3px solid var(--c-primary); background: var(--c-primary-pale); font-size: 12px; line-height: 1.7; }
.p-reserve-question__label { display: block; color: var(--c-primary-dark); font-size: 11px; font-weight: bold; }
.p-reserve-counter { margin-top: 2px; color: var(--c-sub); font-size: 11px; text-align: right; }
.p-reserve-counter.is-over { color: var(--c-error); font-weight: bold; }
.p-reserve-empty { color: var(--c-sub); }
.p-reserve-policy { font-size: 12px; line-height: 1.75; }
.p-reserve-policy__title { margin-bottom: 2px; color: var(--c-heading); font-weight: bold; }
.p-reserve-policy__title:not(:first-child) { margin-top: 10px; }
.p-reserve-policy .p-reserve-notes { margin-bottom: 0; }
.p-reserve-agree { color: #555; font-size: 12px; text-align: center; }
.p-reserve .c-form-actions { margin-top: 20px; }
.p-reserve .c-alert ul { margin-top: 2px; }
.p-reserve .c-alert li { position: relative; padding-left: 1.1em; }
.p-reserve .c-alert li::before { content: "・"; position: absolute; left: 0; }
.p-reserve-flash:empty { display: none; }

/* SP 固定バー（STEP1b: 合計 + ボタンの2段） */
.p-reserve-bar { flex: 1; min-width: 0; }
.p-reserve-bar__sum { margin-bottom: 5px; overflow: hidden; color: #555; font-size: 12px; line-height: 1.4; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.p-reserve-bar__sum b { color: var(--c-price); font-size: 15px; }
.p-reserve-bar .c-btn { width: 100%; }

/* ==========================================================================
   スマホ（< 768px）
   ========================================================================== */
@media (max-width: 767px) {
  .p-reserve-head__name { font-size: 17px; }
  .p-reserve-foot { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .p-reserve-back { align-self: flex-start; }
  .p-reserve-help { display: none; } /* SP は下の「よくあるご質問」からご利用ガイドへ */
  .p-reserve-faq { padding: 12px; border-radius: 6px; }
  .p-reserve-faq__list { display: block; font-size: 13px; }
  .p-reserve-faq__list li + li { margin-top: 2px; }
  .p-reserve-notes { font-size: 13px; }

  .p-reserve-step1 > .c-heading .c-heading__more { display: none; } /* SP は下部の「ご利用ガイド」リンクに任せる */
  .p-reserve-controls { display: block; }
  .p-reserve-controls .c-sort { margin-top: 10px; font-size: 13px; }
  .p-reserve-step1 .c-filter__body { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .p-reserve-step1 .c-filter__body::-webkit-scrollbar { display: none; }
  .p-reserve-step1 .c-countbar { display: block; }
  .p-reserve-step1 .c-countbar__page { margin-top: 2px; font-size: 11px; }
  .p-reserve-menu .p-reserve-menu__action { flex: 1 1 100%; flex-wrap: wrap; order: 5; margin-top: 4px; }
  .p-reserve-menu .p-reserve-menu__action .c-btn { flex: 1 1 auto; padding: 4px 8px; white-space: nowrap; }

  .p-reserve-anchors { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .p-reserve-anchors::-webkit-scrollbar { display: none; }
  .p-reserve-anchors .c-chip { flex: none; padding: 2px 11px; font-size: 12px; }
  .p-reserve-menutable thead { display: none; }
  .p-reserve-menutable th, .p-reserve-menutable td { padding: 11px 10px; }
  .p-reserve-menutable .p-reserve-menutable__check { width: 40px; }
  .p-reserve-menutable .p-reserve-menutable__price { width: 88px; padding-left: 0; font-size: 14px; }
  .p-reserve-menutable .p-reserve-menutable__time { display: none; }
  .p-reserve-menutable__desc { font-size: 12px; }
  .p-reserve-menutable__sp { display: block; margin-top: 2px; color: var(--c-sub); font-size: 12px; font-weight: normal; }
  .p-reserve-menutable input[type="checkbox"] { width: 20px; height: 20px; }
  .p-reserve-summary { display: block; padding: 12px; border-radius: 6px; }
  .p-reserve-summary__nums { font-size: 13px; }
  .p-reserve-summary .c-btn { display: none; } /* ボタンは画面下の固定バーに出す */

  .p-reserve-selbar { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; width: 100%; margin: 0 0 16px; padding: 11px 36px 11px 12px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-bg-soft); color: var(--c-text); font-size: 13px; line-height: 1.5; text-align: left; }
  .p-reserve-selbar::after { content: ""; position: absolute; top: 50%; right: 15px; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid #8b8178; border-bottom: 2px solid #8b8178; transform: rotate(45deg); transition: transform .15s; }
  .p-reserve-selbar__title { color: var(--c-heading); font-weight: bold; }
  .p-reserve-selbar__sum { color: #555; font-size: 12px; }
  .p-reserve-selbar__sum b { margin-left: 2px; color: var(--c-price); font-size: 15px; }
  .p-reserve-sel:not(.is-open) .p-reserve-selbody { display: none; }
  .p-reserve-sel.is-open .p-reserve-selbar { margin-bottom: 0; border-bottom: 0; border-radius: 6px 6px 0 0; }
  .p-reserve-sel.is-open .p-reserve-selbar::after { margin-top: -2px; transform: rotate(-135deg); }
  .p-reserve-sel.is-open .c-selected { border-top: 1px dashed var(--c-border); border-radius: 0 0 6px 6px; }
  .p-reserve-sel .c-selected__title { display: none; } /* 上の帯と同じ見出しなので省く */

  .p-reserve-stylists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .p-reserve-stylist { min-height: 70px; padding: 7px 8px; gap: 8px; }
  .p-reserve-stylist__photo { flex-basis: 38px; }
  .p-reserve-stylist.is-current::after { top: 4px; right: 4px; padding: 0 4px; font-size: 9px; line-height: 15px; }
  .p-reserve-stylist.is-current .p-reserve-stylist__body > :first-child { padding-right: 34px; }

  .p-reserve-table .c-deftable th { width: 96px; }
  .p-reserve-when { font-size: 15px; }
  .p-reserve-when-sub { display: block; margin-left: 0; }
  .p-reserve-change { display: block; margin: 4px 0 0; }
  .p-reserve-items li { flex-wrap: wrap; gap: 0 8px; }
  .p-reserve-items__kind { flex: 0 0 auto; }
  .p-reserve-items__name { flex: 1 1 100%; order: 2; }
  .p-reserve-items__price { margin-left: auto; }
  .p-reserve-total__note { display: block; margin-left: 0; }
  .p-reserve-policy { font-size: 13px; }

  body.has-fixed-cta.p-reserve-tallbar { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}