/* ============================================================================
   reservation.html 専用スタイル
   v0.9.13j-fix119（2026-06-01）: inline <style> 外部 CSS 化（R4 案 X 7 ページ目、堅牢性最優先）
   読込順: cookie-consent → variables → base → style → home → page-hero → reservation
   ============================================================================ */

/* reservation.html — LIFF 予約システム（k9-liff/src/views/steps/Step1-5.vue）完全踏襲版 */
/* design-spec §A-7 補強仕様 v0.9.13a (2026-05-06) 準拠 */

html { scroll-snap-type: none !important; }
section { scroll-snap-align: none !important; scroll-snap-stop: normal !important; }

body { padding-top: 80px; }

/* ==== 既存会員 QR 帯 ==== */
.member-qr-banner {
  background: linear-gradient(90deg, rgba(47,93,98,0.92) 0%, rgba(87,195,194,0.92) 100%);
  color: #fff;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 13px; letter-spacing: 0.04em; flex-wrap: wrap; text-align: center;
}
.member-qr-banner strong { font-weight: 500; }
.member-qr-banner button {
  font: inherit; background: var(--c-brand-white); color: var(--ocean-500, #2F5D62);
  border: 0; border-radius: 999px; padding: 6px 16px;
  font-size: 12px; letter-spacing: 0.06em; cursor: pointer; font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}
.member-qr-banner button:hover { background: var(--turquoise-300, #88d3d2); color: #fff; }

.member-qr-fab {
  position: fixed; top: 96px; right: 16px; z-index: 90;
  background: var(--ocean-500, #2F5D62); color: #fff;
  border: 0; border-radius: 999px; padding: 8px 14px;
  font-size: 12px; letter-spacing: 0.04em; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.2s ease;
}
.member-qr-fab:hover { background: var(--turquoise-400, #57C3C2); }
@media (max-width: 767px) {
  .member-qr-fab { top: 88px; right: 8px; padding: 6px 10px; font-size: 11px; }
}

/* HERO + breadcrumb は assets/css/page-hero.css の共通テンプレートに統一（v0.9.13c 2026-05-06） */

/* ==== Section ==== */
.reservation-section { padding: 80px 0; }
  /* v0.9.13j-fix116: セクション内 eyebrow override 削除（home.css base .eyebrow + body.pd-b10 override 統一規約に移譲） */
.reservation-section > .container > h2 {
  text-align: center;
  font-size: var(--fs-t7, clamp(24px, 4vw, 36px));
  font-weight: 500; margin: 0 0 16px;
  color: var(--c-text-sumi, #333); letter-spacing: 0.04em;
}
.reservation-section > .container > .section-lead {
  text-align: center; color: var(--muted, #555);
  font-size: var(--fs-t3, 14px); margin: 0 0 16px;
}
.reservation-section > .container > .member-inline-link {
  text-align: center; font-size: 13px;
  color: var(--muted, #555); margin: 0 0 48px; letter-spacing: 0.04em;
}
.reservation-section > .container > .member-inline-link a {
  color: var(--ocean-500, #2F5D62); text-decoration: underline;
  text-underline-offset: 3px; font-weight: 500; margin-left: 4px;
  transition: color 0.2s ease;
}
.reservation-section > .container > .member-inline-link a:hover {
  color: var(--turquoise-400, #57C3C2);
}

/* ==== Form Wrap & Steps ==== */
.reservation-form-wrap {
  max-width: 760px; margin: 0 auto; background: var(--c-brand-white);
  border: 1px solid var(--section-border, #e8eced);
  border-radius: 12px; padding: 36px 32px;
}
@media (max-width: 767px) { .reservation-form-wrap { padding: 28px 20px; } }

/* Progress dots — 5 ステップ */
.step-progress {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 0 0 36px; padding: 0; list-style: none;
}
.step-progress-item {
  display: flex; flex-direction: column; align-items: center;
  flex: 0 0 auto; position: relative;
  font-size: 11px; color: var(--muted, #555); letter-spacing: 0.04em;
}
.step-progress-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-brand-white); border: 2px solid var(--section-border, #d4dadb);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: var(--muted, #555);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  margin-bottom: 8px;
}
.step-progress-item.is-active .step-progress-dot {
  background: var(--turquoise-400, #57C3C2);
  border-color: var(--turquoise-400, #57C3C2); color: #fff;
}
.step-progress-item.is-done .step-progress-dot {
  background: var(--ocean-500, #2F5D62);
  border-color: var(--ocean-500, #2F5D62); color: #fff;
}
.step-progress-item.is-active .step-progress-label,
.step-progress-item.is-done .step-progress-label {
  color: var(--c-text-sumi, #333); font-weight: 500;
}
.step-progress-line {
  flex: 1; height: 2px; background: var(--section-border, #e8eced);
  max-width: 50px; min-width: 16px; margin: 0 3px 26px;
  transition: background 0.3s;
}
.step-progress-line.is-done { background: var(--ocean-500, #2F5D62); }
@media (max-width: 767px) {
  .step-progress-line { max-width: 24px; min-width: 8px; }
  .step-progress-item { font-size: 9px; }
  .step-progress-dot { width: 24px; height: 24px; font-size: 11px; }
}

/* Step panel */
.step-panel { display: none; border: 0; padding: 0; margin: 0; }
.step-panel.is-active { display: block; animation: stepFade 0.3s ease; }
@keyframes stepFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .step-panel.is-active { animation: none; } }

.step-panel h3 {
  font-size: var(--fs-t5, 20px); font-weight: 500;
  margin: 0 0 8px; color: var(--c-text-sumi, #333); letter-spacing: 0.04em;
}
.step-panel p.step-desc {
  font-size: 13px; color: var(--muted, #555); margin: 0 0 24px;
}

/* ==== Card（汎用） ==== */
.r-card {
  border: 1px solid var(--section-border, #e8eced);
  border-radius: 12px; padding: 20px 18px; margin-bottom: 16px; background: var(--c-brand-white);
}
.r-card .form-label {
  display: block; font-size: 13px; color: var(--muted, #555);
  margin-bottom: 8px; letter-spacing: 0.04em; font-weight: 500;
}
.r-card .form-label.required::after {
  content: '必須'; color: var(--copper-500, #C87A56);
  font-size: 11px; font-weight: 400; margin-left: 6px;
}

/* Form group */
.form-group { margin-bottom: 16px; }
.form-group:last-child { margin-bottom: 0; }
.form-group label {
  display: block; font-size: 13px; color: var(--c-text-sumi, #333);
  margin-bottom: 6px; letter-spacing: 0.03em; font-weight: 500;
}
.form-group label.required::after,
.form-group .required-tag {
  content: '必須'; color: var(--copper-500, #C87A56);
  font-size: 11px; font-weight: 400; margin-left: 6px;
}
.form-group .required-tag::before { content: '必須'; }
.form-group label.required::after { content: '必須'; }
.form-group .help { display: block; font-size: 11px; color: var(--muted, #555); margin-top: 4px; }
.form-group .form-error { display: none; font-size: 12px; color: var(--copper-500, #C87A56); margin-top: 6px; line-height: 1.5; }
.form-group.has-error .form-error { display: block; }

.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"],
.form-group input[type="number"], .form-group select, .form-group textarea {
  width: 100%; font: inherit; padding: 12px 14px;
  border: 1px solid var(--section-border, #d4dadb); border-radius: 8px;
  background: var(--c-brand-white); color: var(--c-text-sumi, #333);
  font-size: 15px; letter-spacing: 0.02em; box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--turquoise-400, #57C3C2);
  box-shadow: 0 0 0 3px rgba(87, 195, 194, 0.15);
}
.form-group input.is-invalid, .form-group select.is-invalid, .form-group textarea.is-invalid {
  border-color: var(--copper-500, #C87A56);
  box-shadow: 0 0 0 3px rgba(200, 122, 86, 0.12);
}

/* .r-card 内のフォーム要素（備考 textarea・支払い select 等）も form-group と同じ体裁に統一 */
.r-card input[type="text"], .r-card input[type="email"], .r-card input[type="tel"],
.r-card input[type="number"], .r-card select, .r-card textarea {
  width: 100%; font: inherit; padding: 12px 14px;
  border: 1px solid var(--section-border, #d4dadb); border-radius: 8px;
  background: var(--c-brand-white); color: var(--c-text-sumi, #333);
  font-size: 15px; letter-spacing: 0.02em; box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.r-card input:focus, .r-card select:focus, .r-card textarea:focus {
  outline: none; border-color: var(--turquoise-400, #57C3C2);
  box-shadow: 0 0 0 3px rgba(87, 195, 194, 0.15);
}
.r-card textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
/* select は OS 既定の見た目を排してカスタム矢印に */
.r-card select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%232F5D62' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* キャンセル料アコーディオン（注意事項内・details/summary） */
.cancel-fee-acc { margin-top: 10px; border-top: 1px solid var(--section-border, #f0f3f4); padding-top: 10px; }
.cancel-fee-acc summary {
  cursor: pointer; font-size: 13px; color: var(--ocean-500, #2F5D62); font-weight: 500;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.cancel-fee-acc summary::-webkit-details-marker { display: none; }
.cancel-fee-acc summary::before { content: '▸'; font-size: 11px; transition: transform 0.2s; }
.cancel-fee-acc[open] summary::before { transform: rotate(90deg); }
.cancel-fee-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.cancel-fee-table th, .cancel-fee-table td { padding: 8px 10px; border-bottom: 1px solid var(--section-border, #f0f3f4); text-align: left; }
.cancel-fee-table th { color: var(--muted, #555); font-weight: 400; font-size: 12px; }
.cancel-fee-table td:last-child { text-align: right; font-weight: 500; }

/* Radio / Checkbox */
.radio-group, .checkbox-group { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-group.cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.radio-group.cols-3 { grid-template-columns: repeat(3, 1fr); }
.radio-label, .checkbox-label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 14px; color: var(--c-text-sumi, #333);
}
.radio-label input, .checkbox-label input { accent-color: var(--turquoise-400, #57C3C2); width: 16px; height: 16px; }

.checkbox-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--c-text-sumi, #333);
  line-height: 1.7; cursor: pointer; margin-bottom: 10px;
}
.checkbox-row input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 3px;
  accent-color: var(--turquoise-400, #57C3C2); flex-shrink: 0;
}
.checkbox-row a, .checkbox-row .text-link {
  color: var(--ocean-500, #2F5D62); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}
.checkbox-row.is-bold { font-weight: 500; }

/* ==== Step1: Selection ==== */
.selected-trainer-display {
  font-size: 14px; color: var(--c-text-sumi, #333);
  background: var(--c-base-washi, #FAFAFA);
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--section-border, #e8eced);
}

/* メニュー選択カード（contact.html radio-card パターン踏襲） */
.menu-card-list { display: flex; flex-direction: column; gap: 10px; }
.menu-card-empty {
  font-size: 13px; color: var(--muted, #555);
  padding: 14px 16px; text-align: center;
  border: 1px dashed var(--section-border, #d4dadb); border-radius: 8px;
}
.menu-card {
  display: block; cursor: pointer; position: relative;
  border: 1px solid var(--section-border, #e8eced);
  border-radius: 8px; padding: 16px 18px;
  background: var(--c-brand-white);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.menu-card:hover { border-color: var(--turquoise-300, #88d3d2); }
.menu-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.menu-card.is-selected {
  border-color: var(--turquoise-400, #57C3C2); border-width: 2px;
  background: rgba(87, 195, 194, 0.06);
  box-shadow: 0 0 0 3px rgba(87, 195, 194, 0.10);
  padding: 15px 17px; /* border 1px 増分を相殺 */
}
.menu-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 4px;
}
.menu-card-name {
  font-size: 15px; font-weight: 500; color: var(--c-text-sumi, #333);
  letter-spacing: 0.04em;
}
.menu-card-price {
  font-size: 16px; font-weight: 500; color: var(--ocean-500, #2F5D62);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.menu-card-meta {
  font-size: 12px; color: var(--muted, #555);
  letter-spacing: 0.04em; margin-bottom: 6px;
}
.menu-card-desc {
  font-size: 13px; color: var(--c-text-body, #555);
  line-height: 1.7; margin-top: 4px;
}
.new-user-notice {
  background: rgba(87, 195, 194, 0.08);
  border: 1px solid var(--turquoise-300, #88d3d2);
  color: var(--ocean-500, #2F5D62);
  padding: 14px 16px; border-radius: 8px;
  font-size: 13px; line-height: 1.7; margin-bottom: 16px;
}

/* 既存照合結果（インライン QR + LINE ボタン） */
.existing-check-result {
  margin: 16px 0 0; padding: 18px 20px;
  background: rgba(87, 195, 194, 0.06);
  border: 1px solid var(--turquoise-300, #88d3d2);
  border-radius: 8px; text-align: center;
  color: var(--ocean-500, #2F5D62); line-height: 1.7;
}
.existing-check-result .check-msg-headline {
  font-size: 15px; font-weight: 500; margin: 0 0 4px;
  color: var(--c-text-sumi, #333); letter-spacing: 0.04em;
}
.existing-check-result .check-msg-lead {
  font-size: 13px; margin: 0 0 14px; color: var(--ocean-500, #2F5D62);
}
.existing-check-result .existing-check-qr {
  width: 140px; height: 140px; margin: 0 auto 14px;
  background: linear-gradient(135deg, #f7f7f7 25%, var(--c-brand-white) 25%, var(--c-brand-white) 50%, #f7f7f7 50%, #f7f7f7 75%, var(--c-brand-white) 75%);
  background-size: 6px 6px;
  border: 1px solid var(--section-border, #e8eced);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--muted, #555); letter-spacing: 0.04em;
  line-height: 1.5; padding: 8px; text-align: center;
}
.existing-check-result .check-msg-line {
  font-size: 13px; margin: 0 0 14px; color: var(--c-text-sumi, #333);
  font-weight: 500;
}
.existing-check-result .existing-check-line-btn {
  display: inline-block; padding: 10px 28px;
  background: #06c755; color: #fff;
  text-decoration: none; font-size: 14px; font-weight: 500;
  border-radius: 999px; letter-spacing: 0.04em;
  transition: background 0.2s;
}
.existing-check-result .existing-check-line-btn:hover { background: #05a647; }

/* 新規顧客向けあいさつ（既存照合カード内に表示） */
.voucher-msg.new-user-greeting {
  display: block; margin: 16px 0 0; padding: 14px 16px;
  background: var(--c-base-washi, #FAFAFA);
  border: 1px solid var(--section-border, #e8eced);
  border-radius: 8px;
  font-size: 13px; color: var(--c-text-sumi, #333);
  line-height: 1.7;
}

/* 統合 r-card 内の選択ブロック（縦余白のみ、divider なし） */
.selection-block { margin-bottom: 18px; }
.selection-block.selection-block--last { margin-bottom: 0; }
.multi-dog-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--c-text-sumi, #333);
  line-height: 1.6; cursor: pointer;
}
.multi-dog-row input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 2px;
  accent-color: var(--turquoise-400, #57C3C2); flex-shrink: 0;
}
.multi-dog-meta { display: block; font-size: 12px; color: var(--muted, #555); margin-top: 2px; }

/* ==== Step2: Calendar（LIFF と同色 #57C3C2 / #F5A623 / #D0021B） ==== */
.calendar-controls {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 8px;
}
.calendar-controls button {
  font: inherit; background: var(--c-brand-white);
  border: 1px solid var(--section-border, #d4dadb);
  border-radius: 6px; padding: 6px 12px;
  font-size: 13px; color: var(--ocean-500, #2F5D62); cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.calendar-controls button:hover {
  background: rgba(87,195,194,0.08); border-color: var(--turquoise-400, #57C3C2);
}
.calendar-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
.calendar-month-label {
  font-size: 16px; font-weight: 500;
  color: var(--c-text-sumi, #333); letter-spacing: 0.04em;
}
.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.calendar-weekday {
  text-align: center; font-size: 11px;
  color: var(--muted, #555); letter-spacing: 0.06em; padding: 6px 0;
}
.calendar-weekday.is-sun { color: #D0021B; }
.calendar-weekday.is-sat { color: #2F5D62; }
.calendar-day {
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 4px; border-radius: 8px;
  font-size: 13px; font: inherit;
  color: var(--c-text-sumi, #333);
  background: var(--c-brand-white); border: 1px solid var(--section-border, #e8eced);
  cursor: pointer; transition: all 0.15s;
}
.calendar-day.empty { background: transparent; border-color: transparent; cursor: default; pointer-events: none; }
.calendar-day:hover:not(:disabled):not(.is-past):not(.is-closed):not(.is-full):not(.is-deadline-passed):not(.empty) {
  background: rgba(87, 195, 194, 0.08); border-color: var(--turquoise-400, #57C3C2);
}
.calendar-day.is-past, .calendar-day.is-closed, .calendar-day.is-full, .calendar-day.is-deadline-passed {
  color: #c0c4c5; cursor: not-allowed; background: #fafafa;
}
.calendar-day.is-today { border: 2px solid #57C3C2; }
.calendar-day.is-selected {
  background: #57C3C2 !important; color: #fff !important;
  border-color: #57C3C2 !important;
}
.calendar-day .day-number { font-weight: 500; font-size: 13px; }
.calendar-day .day-dot {
  width: 6px; height: 6px; border-radius: 50%; margin-top: 4px;
  background: transparent;
}
.calendar-day.is-status-available .day-dot { background: #57C3C2; }
.calendar-day.is-status-few       .day-dot { background: #F5A623; }
.calendar-day.is-status-full      .day-dot { background: #D0021B; }
.calendar-day.is-selected .day-dot { background: var(--c-brand-white) !important; }
.calendar-day.is-deadline-passed .day-dot { background: transparent !important; }
/* 一部予約あり（占有1件以上・満員/休業以外）をセル背景の黄色で識別 */
.calendar-day.is-partial { background: #FFF6D5; border-color: #EAD58A; }

.calendar-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  justify-content: center; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--section-border, #e8eced);
  font-size: 11px; color: var(--muted, #555);
}
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.calendar-legend span::before {
  content: ''; width: 8px; height: 8px;
  border-radius: 50%; display: inline-block;
}
.calendar-legend .lg-available::before { background: #57C3C2; }
.calendar-legend .lg-few::before       { background: #F5A623; }
.calendar-legend .lg-full::before      { background: #D0021B; }

.selected-datetime {
  margin-top: 12px;
  background: rgba(87, 195, 194, 0.08);
  border: 1px solid var(--turquoise-300, #88d3d2);
  color: var(--ocean-500, #2F5D62);
  padding: 10px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
}

/* 時間スロットモーダル（LIFF Modal position="bottom" ボトムシート風） */
.slot-modal {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.5);
  align-items: flex-end; justify-content: center;
}
.slot-modal.is-shown { display: flex; }
.slot-modal-card {
  background: var(--c-brand-white); width: 100%; max-width: 520px;
  border-radius: 16px 16px 0 0;
  padding: 24px 20px 32px; position: relative;
  max-height: 80vh; overflow-y: auto;
  animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.slot-modal-card h4 { font-size: 16px; font-weight: 500; margin: 0 0 4px; color: var(--c-text-sumi, #333); }
.slot-modal-card .slot-modal-date {
  font-size: 12px; color: var(--muted, #555);
  margin: 0 0 18px; letter-spacing: 0.04em;
}
.slot-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; font-size: 22px;
  line-height: 1; cursor: pointer; color: var(--muted, #555); padding: 4px 8px;
}
.slot-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 768px) { .slot-list { grid-template-columns: repeat(3, 1fr); } }
.slot-list button {
  font: inherit; padding: 12px 8px;
  border: 1px solid var(--section-border, #d4dadb);
  border-radius: 6px; background: var(--c-brand-white);
  font-size: 14px; color: var(--c-text-sumi, #333);
  cursor: pointer; letter-spacing: 0.04em;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.slot-list button:hover {
  border-color: var(--turquoise-400, #57C3C2);
  background: rgba(87, 195, 194, 0.06);
}
.slot-list .slot-empty {
  grid-column: 1 / -1; text-align: center;
  font-size: 13px; color: var(--muted, #555); padding: 20px 0;
}

/* ==== Step3: Confirm ==== */
.summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.summary-row .summary-label { color: var(--muted, #555); }
.divider { border-top: 1px solid var(--section-border, #e8eced); margin: 16px 0; }

.price-breakdown { margin-bottom: 8px; }
.price-row {
  display: flex; justify-content: space-between;
  padding: 4px 0; font-size: 14px; align-items: center;
}
.price-row.subtotal { border-top: 1px solid var(--section-border, #f0f3f4); padding-top: 8px; margin-top: 4px; }
.price-row.total { border-top: 1px solid var(--section-border, #d4dadb); padding-top: 12px; margin-top: 8px; font-weight: 500; font-size: 16px; }
.price-row.discount { color: #2ecc71; }
.text-muted { color: var(--muted, #555); font-size: 12px; }

.travel-fee-table {
  margin-top: 10px; font-size: 12px; width: 100%;
  border: 1px solid var(--section-border, #f0f3f4); border-radius: 6px; overflow: hidden;
}
.travel-fee-table summary {
  padding: 8px 12px; background: var(--c-base-washi, #FAFAFA);
  cursor: pointer; color: var(--ocean-500, #2F5D62);
  font-size: 12px; letter-spacing: 0.04em;
}
.travel-fee-table table { width: 100%; border-collapse: collapse; }
.travel-fee-table td { padding: 6px 12px; font-size: 12px; border-top: 1px solid var(--section-border, #f0f3f4); }
.travel-fee-table td:last-child { text-align: right; color: var(--muted, #555); }

.voucher-input-group { display: flex; gap: 8px; }
.voucher-input-group input { flex: 1; }
.voucher-input-group button {
  font: inherit; padding: 12px 18px;
  border: 1px solid var(--section-border, #d4dadb);
  border-radius: 6px; background: var(--c-brand-white);
  color: var(--ocean-500, #2F5D62);
  font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: border-color 0.2s ease;
}
.voucher-input-group button:hover { border-color: var(--turquoise-400, #57C3C2); }
.voucher-input-group button:disabled { opacity: 0.5; cursor: not-allowed; }
.voucher-msg { font-size: 12px; margin-top: 6px; }
.voucher-msg.is-error { color: var(--copper-500, #C87A56); }
.voucher-msg.is-success { color: #2ecc71; }

.notice-card {
  background: rgba(47, 93, 98, 0.04);
  border: 1px solid rgba(47, 93, 98, 0.2);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 16px;
}
.notice-card .notice-title { font-size: 13px; color: var(--ocean-500, #2F5D62); font-weight: 500; margin: 0 0 6px; }
.notice-list { list-style: disc; list-style-position: inside; font-size: 13px; line-height: 1.8; color: var(--c-text-sumi, #555); margin: 0; padding: 0; }

.important-card {
  background: rgba(200, 122, 86, 0.05);
  border: 1px solid rgba(200, 122, 86, 0.3);
  border-radius: 8px; padding: 16px 18px; margin-bottom: 16px;
}
.important-card .notice-title { color: var(--copper-500, #C87A56); }
.important-card p { font-size: 14px; margin: 0 0 6px; line-height: 1.8; }

.cancellation-info { margin-top: 12px; }
.cancellation-info table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cancellation-info th, .cancellation-info td { padding: 8px 10px; border-bottom: 1px solid var(--section-border, #f0f3f4); text-align: left; }
.cancellation-info th { color: var(--muted, #555); font-weight: 400; font-size: 12px; }
.cancellation-info td:last-child { text-align: right; font-weight: 500; }

/* 規約モーダル */
.terms-modal {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55);
  align-items: center; justify-content: center; padding: 16px;
}
.terms-modal.is-shown { display: flex; }
.terms-modal-card {
  background: var(--c-brand-white); max-width: 540px; width: 100%;
  max-height: 80vh;
  border-radius: 12px; padding: 28px 24px; position: relative;
  display: flex; flex-direction: column;   /* ヘッダー固定＋本文のみスクロール（長文全文化対応） */
}
.terms-modal-card h4 { font-size: 17px; font-weight: 500; margin: 0 0 16px; flex: 0 0 auto; }
.terms-modal-card .terms-content {
  font-size: 13px; color: var(--c-text-sumi, #555);
  line-height: 1.8; white-space: pre-line;
  flex: 1 1 auto; overflow-y: auto; min-height: 0;   /* 本文だけをスクロール（タイトル/閉じるは固定） */
}
/* 全文化: 生成本文HTML（見出し・段落・リスト・表）を規約小窓で描画する場合の体裁 */
.terms-modal-card .terms-content--full { white-space: normal; }
.terms-content--full h2 {
  font-size: 14px; font-weight: 600; color: var(--c-sub-deep-ocean, #2F5D62);
  margin: 18px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--turquoise-300, #88D6D6); letter-spacing: 0.03em;
}
.terms-content--full h2:first-child { margin-top: 0; }
.terms-content--full p { margin: 0 0 10px; }
.terms-content--full ul, .terms-content--full ol { margin: 0 0 12px 20px; padding: 0; }
/* 規約モーダルは断片を .legal-section で包まず注入するため、base.css の番号/中黒復活が効かない。ここで同等に復活（項＝番号・小項目＝中黒）。2026-07-06 */
.terms-content--full ol { list-style: decimal inside; }
.terms-content--full ul { list-style: none; }
.terms-content--full ul > li::before { content: "・"; }
.terms-content--full li { margin: 3px 0; }
.terms-content--full a { color: var(--ocean-500, #2F5D62); word-break: break-all; }
.terms-content--full table {
  width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 12px;
  border: 1px solid var(--c-border-color, #DEE2E6);
}
.terms-content--full th, .terms-content--full td {
  padding: 8px 10px; border: 1px solid var(--c-border-color, #DEE2E6);
  text-align: left; vertical-align: top;
}
.terms-content--full th { background: var(--c-base-washi, #faf8f5); font-weight: 600; }
.terms-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; font-size: 22px;
  line-height: 1; cursor: pointer; color: var(--muted, #555); padding: 4px 8px;
}

/* ==== Step4: Accordion + Square + Lock Timer ==== */
.lock-timer {
  border: 1px solid var(--turquoise-300, #88d3d2);
  background: rgba(87, 195, 194, 0.08);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;
  font-size: 13px; color: var(--ocean-500, #2F5D62);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; letter-spacing: 0.03em;
}
.lock-timer-count {
  font-size: 17px; font-weight: 500;
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.lock-timer.is-warning {
  border-color: var(--copper-500, #C87A56);
  background: rgba(200, 122, 86, 0.10);
  color: var(--copper-500, #C87A56);
}

.accordion-section { border: 1px solid var(--section-border, #e8eced); border-radius: 8px; margin-bottom: 12px; background: var(--c-brand-white); }
.accordion-header-new {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; cursor: pointer;
  font-size: 14px; color: var(--c-text-sumi, #333);
  letter-spacing: 0.04em; user-select: none;
}
.accordion-step {
  background: var(--section-border, #e8eced);
  color: var(--muted, #555);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
}
.accordion-header-new.completed .accordion-step { background: #2ecc71; color: #fff; }
.accordion-header-new.open .accordion-step { background: var(--turquoise-400, #57C3C2); color: #fff; }
.accordion-title { flex: 1; font-weight: 500; }
.accordion-icon {
  font-size: 12px; color: var(--muted, #555);
  transition: transform 0.2s; font-style: normal;
}
.accordion-header-new.open .accordion-icon { transform: rotate(180deg); }
.accordion-content-new { display: none; padding: 4px 16px 18px; }
.accordion-content-new.open { display: block; }

.zip-input-group { display: flex; gap: 8px; }
.zip-input-group input { flex: 1; }
.zip-input-group button {
  font: inherit; padding: 0 14px;
  border: 1px solid var(--section-border, #d4dadb);
  border-radius: 6px; background: var(--c-brand-white);
  color: var(--ocean-500, #2F5D62); font-size: 13px;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.2s ease;
}
.zip-input-group button:hover { border-color: var(--turquoise-400, #57C3C2); }

.age-input-group { display: flex; align-items: center; gap: 6px; }
.age-input-group select { flex: 1; }
.age-input-group .age-unit { font-size: 13px; color: var(--muted, #555); }

.payment-method-notice {
  padding: 12px 14px; background: var(--c-base-washi, #FAFAFA);
  border-radius: 6px; font-size: 13px;
  color: var(--c-text-sumi, #333); margin-bottom: 16px;
  border: 1px solid var(--section-border, #e8eced);
}

/* Square モック */
.square-card-mock {
  border: 1px dashed var(--section-border, #d4dadb);
  border-radius: 6px; padding: 16px;
  background: var(--c-base-washi, #FAFAFA);
}
.square-card-mock-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted, #555); margin-bottom: 12px;
}
.square-card-mock-head .ic {
  width: 22px; height: 14px;
  background: linear-gradient(135deg, #2F5D62, #57C3C2);
  border-radius: 3px;
}
.square-card-mock .row {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 8px;
}
@media (min-width: 768px) { .square-card-mock .row.cols-2 { grid-template-columns: 1fr 1fr; } }
.square-card-mock .input {
  border: 1px solid var(--section-border, #d4dadb); background: var(--c-brand-white);
  border-radius: 6px; padding: 10px 12px;
  font-size: 13px; color: var(--muted, #555); letter-spacing: 0.04em;
}
.square-card-mock .note {
  font-size: 11px; color: var(--muted, #555);
  margin-top: 8px; line-height: 1.6;
}

.summary-box {
  background: var(--c-base-washi, #FAFAFA);
  border-radius: 8px; padding: 14px 16px;
  margin-bottom: 16px; font-size: 13px;
}
.summary-box h4 {
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--turquoise-400, #57C3C2);
  margin: 0 0 8px; font-weight: 500;
}

.payment-error-banner {
  background: rgba(200, 122, 86, 0.08);
  border: 1px solid rgba(200, 122, 86, 0.4);
  border-radius: 6px; padding: 12px 14px; margin-bottom: 12px;
}
.payment-error-banner .msg { color: var(--copper-500, #C87A56); font-size: 13px; margin: 0 0 8px; }
.payment-error-banner button {
  font: inherit; padding: 8px 14px;
  background: var(--copper-500, #C87A56); color: #fff;
  border: 0; border-radius: 6px; font-size: 13px; cursor: pointer;
}

/* ==== Step Nav buttons ==== */
.step-nav {
  display: flex; gap: 12px; margin-top: 28px;
  padding-top: 24px; border-top: 1px solid var(--section-border, #e8eced);
}
.step-nav-back, .step-nav-next, .step-nav-submit {
  font: inherit; padding: 14px 24px; border-radius: 999px;
  font-size: 14px; letter-spacing: 0.06em; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.step-nav-back {
  background: var(--c-brand-white); color: var(--ocean-500, #2F5D62);
  border: 1px solid var(--section-border, #d4dadb);
}
.step-nav-back:hover {
  border-color: var(--ocean-500, #2F5D62);
  background: rgba(47, 93, 98, 0.04);
}
.step-nav-next, .step-nav-submit {
  background: var(--section-border, #d4dadb); color: var(--muted, #555);
  border: 1px solid var(--section-border, #d4dadb); flex: 1;
}
.step-nav-next.is-ready, .step-nav-submit.is-ready {
  background: var(--turquoise-400, #57C3C2);
  color: #fff; border-color: var(--turquoise-400, #57C3C2);
}
.step-nav-next.is-ready:hover, .step-nav-submit.is-ready:hover {
  background: var(--ocean-500, #2F5D62);
  border-color: var(--ocean-500, #2F5D62);
}
.step-nav-submit:disabled, .step-nav-next:disabled { opacity: 0.6; cursor: not-allowed; }
.step-nav-submit.is-loading, .step-nav-next.is-loading { pointer-events: none; opacity: 0.85; }
.step-nav-submit.is-loading::before, .step-nav-next.is-loading::before {
  content: ''; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Draft notice */
.draft-notice {
  display: none;
  background: rgba(87, 195, 194, 0.08);
  border: 1px solid var(--turquoise-300, #88d3d2);
  color: var(--ocean-500, #2F5D62);
  padding: 12px 16px; border-radius: 6px;
  font-size: 13px; margin-bottom: 24px;
  align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.draft-notice.is-shown { display: flex; }
.draft-notice button {
  font: inherit; background: transparent;
  border: 1px solid var(--ocean-500, #2F5D62);
  color: var(--ocean-500, #2F5D62); padding: 6px 12px;
  border-radius: 4px; font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.draft-notice button:hover { background: var(--ocean-500, #2F5D62); color: #fff; }

/* ==== Step5: Complete ==== */
.complete-panel { text-align: center; padding: 16px 0; display: none; }
.complete-panel.is-shown { display: block; }
.complete-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(87, 195, 194, 0.12);
  color: var(--turquoise-400, #57C3C2);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 0 20px;
}
.complete-panel h3 {
  font-size: 22px; font-weight: 500;
  margin: 0 0 12px; color: var(--c-text-sumi, #333);
}
.complete-panel .reservation-code {
  display: inline-block; margin: 8px 0 24px;
  padding: 10px 22px; border: 1px dashed var(--ocean-500, #2F5D62);
  border-radius: 6px; font-size: 15px;
  letter-spacing: 0.08em; color: var(--ocean-500, #2F5D62);
  background: rgba(87, 195, 194, 0.04);
  font-variant-numeric: tabular-nums;
}
.complete-summary {
  text-align: left; background: var(--c-base-washi, #FAFAFA);
  border-radius: 8px; padding: 16px 20px;
  margin: 0 auto 24px; max-width: 480px;
}
.complete-summary .row {
  display: flex; justify-content: space-between;
  font-size: 14px; padding: 6px 0;
  border-bottom: 1px dashed var(--section-border, #f0f3f4);
}
.complete-summary .row:last-child { border-bottom: 0; }
.complete-summary .label { color: var(--muted, #555); font-size: 13px; }
.complete-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.complete-actions a, .complete-actions button {
  font: inherit; padding: 10px 22px; border-radius: 999px;
  font-size: 13px; letter-spacing: 0.06em;
  text-decoration: none; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.complete-actions .a-primary { background: var(--turquoise-400, #57C3C2); color: #fff; border: 0; }
.complete-actions .a-primary:hover { background: var(--ocean-500, #2F5D62); }
.complete-actions .a-secondary {
  background: var(--c-brand-white); color: var(--ocean-500, #2F5D62);
  border: 1px solid var(--section-border, #d4dadb);
}
.complete-actions .a-secondary:hover { border-color: var(--ocean-500, #2F5D62); }
/* LINE連携ボタン（完了画面の主CTA・塗りは1個の基準に合わせ Google カレンダーは a-secondary へ降格済み）。
   LINE緑 #06c755 は existing-check-line-btn / qr-modal-line と同一の承認済み既存慣行。 */
.complete-actions .a-line { background: #06c755; color: #fff; border: 0; font-weight: 500; }
.complete-actions .a-line:hover { background: #05a647; }
/* 2026-07-05: スマホは完了画面のアクションを縦積み・全幅・タップ領域44px以上（平田氏指示: トップへ戻る導線追加とスマホUI/UX） */
@media (max-width: 767px) {
  .complete-actions { flex-direction: column; align-items: stretch; }
  .complete-actions a, .complete-actions button {
    width: 100%; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* カード決済処理中モーダル（2026-07-05: 決済中の明示・処理中の離脱/再読み込み抑止） */
.pay-processing-modal {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(51, 51, 51, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pay-processing-modal[hidden] { display: none; }
.pay-processing-card {
  background: var(--c-brand-white, #FAFAFA);
  border-radius: 12px;
  padding: 28px 24px;
  max-width: 320px; width: 100%;
  text-align: center;
  box-shadow: 0 12px 32px rgba(51, 51, 51, 0.25);
}
.pay-processing-spinner {
  width: 36px; height: 36px; margin: 0 auto 14px;
  border: 3px solid rgba(87, 195, 194, 0.25);
  border-top-color: var(--turquoise-400, #57C3C2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.pay-processing-title {
  color: var(--ocean-500, #2F5D62);
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  margin: 0 0 8px;
}
.pay-processing-note {
  color: var(--muted, #555);
  font-size: 12px; line-height: 1.8; margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pay-processing-spinner { animation: none; border-top-color: var(--turquoise-400, #57C3C2); }
}

/* QR モーダル（既存会員 LIFF 誘導） */
.qr-modal {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55);
  align-items: center; justify-content: center; padding: 16px;
}
.qr-modal.is-shown { display: flex; }
.qr-modal-card {
  background: var(--c-brand-white); border-radius: 12px;
  max-width: 420px; width: 100%; padding: 32px 28px;
  text-align: center; position: relative;
}
.qr-modal-card h4 { font-size: 17px; font-weight: 500; margin: 0 0 8px; color: var(--c-text-sumi, #333); }
.qr-modal-card p { font-size: 13px; color: var(--muted, #555); line-height: 1.8; margin: 0 0 20px; }
.qr-modal-image {
  width: 200px; height: 200px; margin: 0 auto 20px;
  background: linear-gradient(135deg, #f7f7f7 25%, var(--c-brand-white) 25%, var(--c-brand-white) 50%, #f7f7f7 50%, #f7f7f7 75%, var(--c-brand-white) 75%);
  background-size: 8px 8px;
  border: 1px solid var(--section-border, #e8eced);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--muted, #555); letter-spacing: 0.04em;
}
/* QR 実画像（会員案内・モーダル/既存会員チェック共通）。プレースホルダ枠内に収める。 */
.qr-modal-image img,
.existing-check-result .existing-check-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--c-brand-white);
  border-radius: 6px;
}
.qr-modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.qr-modal-actions a, .qr-modal-actions button {
  font: inherit; padding: 10px 20px;
  border-radius: 999px; font-size: 13px;
  letter-spacing: 0.04em; cursor: pointer; text-decoration: none;
  transition: background 0.2s ease;
}
.qr-modal-line { background: #06c755; color: #fff; border: 0; }
.qr-modal-line:hover { background: #05a647; }
.qr-modal-close {
  background: transparent;
  border: 1px solid var(--section-border, #d4dadb);
  color: var(--muted, #555);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.qr-modal-close:hover { border-color: var(--ocean-500, #2F5D62); color: var(--ocean-500, #2F5D62); }
.qr-modal-x {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; font-size: 22px;
  line-height: 1; cursor: pointer; color: var(--muted, #555); padding: 4px 8px;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== 2026-06-16: tablet(768-1023px) 調整。reservation.css は reservation 専用のため直接追記。desktop(≥1024)・mobile(≤767) は不変 ===== */
/* 2026-07-19 平田氏指示: スマホは左右40px固定ガター・カード枠と余計な余白を除去（フラット化）。
   根本: home.css .container{max-width:90%; padding:0 60px} のモバイル調整がこのページに無く、
   合計幅が画面幅を超えて Step2 カレンダー右端が切れていた（tablet帯は下の:952ブロックで調整済み）。 */
@media (max-width: 767px) {
  .reservation-section > .container { max-width: none; width: auto; margin: 0; padding: 0 40px; box-sizing: border-box; }
  .reservation-form-wrap { max-width: none; background: transparent; border: 0; border-radius: 0; padding: 0; }
  .step-panel { min-width: 0; }
  /* 内側カードもフラット化（枠・角丸・内側余白なし。ブロック間の縦16pxは維持） */
  .r-card { border: 0; border-radius: 0; padding: 0; background: transparent; }
  /* カレンダーセル: aspect-ratio 1/1 が内容高さ(≈44px)を最小幅へ転写し 1fr トラックが縮めず58pxはみ出していた
     （playwright 393px 実測: 修正前 maxDayRight=392/枠右端353 → 修正後 353=ぴったり）。
     モバイルは正方形をやめ高さ44px固定（タップ領域維持）・幅は7等分に従う。 */
  .calendar-day { aspect-ratio: auto; min-width: 0; min-height: 44px; }
}

@media (min-width:768px) and (max-width:1023px) {
  /* ③ ページ横ガターを index と整合（flat 40px）。home.css ≤1023 の .container{padding:0 32px} + base max-width:90% を上書き */
  .container { max-width: none; padding: 0 40px; }
  /* ② 補助ボタンのタップ領域を 44px 以上に（現状 banner≈32px / fab≈34px）。mobile/desktop は現状維持 */
  .member-qr-banner button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .member-qr-fab { min-height: 44px; }
}

/* 2026-07-06: モバイル/タブレット(≤1023px)の入力欄を 16px に。iOS Safari は入力欄 font-size<16px でフォーカス時に自動ズームするため。desktop(≥1024)は base 15px のまま不変。 */
@media (max-width: 1023px) {
  .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"],
  .form-group input[type="number"], .form-group select, .form-group textarea,
  .r-card input[type="text"], .r-card input[type="email"], .r-card input[type="tel"],
  .r-card input[type="number"], .r-card select, .r-card textarea {
    font-size: 16px;
  }
}