/* H-25A: MERFOIS progressive public reservation screen */
.mf-reservation-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(62px,8vw,104px) 0;
  background:#090708;
  color:#fff;
  border-bottom:1px solid rgba(213,176,92,.34);
}
.mf-reservation-hero__backdrop{
  position:absolute;
  z-index:-2;
  inset:0;
  background-position:center 42%;
  background-size:cover;
  opacity:.28;
  filter:saturate(.72) contrast(1.08);
  transform:scale(1.025);
}
.mf-reservation-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(90deg,rgba(8,5,6,.97) 0%,rgba(17,7,10,.9) 46%,rgba(45,12,20,.72) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.64));
}
.mf-reservation-hero__inner{position:relative;z-index:1}
.mf-reservation-hero>div>span,.mf-reservation-hero__inner>span{
  color:#e5c77b;
  font-family:"Cormorant Garamond",serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.2em;
}
.mf-reservation-hero h1{
  margin:7px 0 10px;
  color:#f7ecdc;
  font-family:"Cormorant Garamond","Noto Sans JP",serif;
  font-size:clamp(42px,6vw,72px);
  font-weight:600;
  line-height:1.08;
  text-shadow:0 5px 34px rgba(0,0,0,.34);
}
.mf-reservation-hero p{margin:0;color:rgba(255,255,255,.78);font-size:12px}

.mf-reservation-section{
  min-height:60vh;
  padding:clamp(46px,7vw,82px) 0 clamp(72px,9vw,116px);
  background:
    radial-gradient(circle at 82% 4%,rgba(93,29,43,.28),transparent 32%),
    radial-gradient(circle at 12% 65%,rgba(111,54,30,.12),transparent 28%),
    linear-gradient(145deg,#090708 0%,#160c0f 54%,#241016 100%);
}
.mf-reservation-flow{width:min(980px,calc(100% - 48px));max-width:980px}

.mf-reservation-steps{
  margin:0 0 22px;
  border:1px solid rgba(213,176,92,.28);
  background:rgba(13,9,10,.84);
  box-shadow:0 18px 52px rgba(0,0,0,.2);
  backdrop-filter:blur(12px);
}
.mf-reservation-steps li{
  min-height:68px;
  border-right-color:rgba(255,255,255,.1);
  background:transparent;
  color:rgba(255,255,255,.62);
}
.mf-reservation-steps li.is-current{
  background:linear-gradient(145deg,rgba(100,31,47,.92),rgba(49,16,24,.94));
  color:#fff;
}
.mf-reservation-steps li.is-done{background:rgba(213,176,92,.08);color:#e6d3ac}
.mf-reservation-steps b{border-color:rgba(229,199,123,.46);background:rgba(255,255,255,.06);color:#e1cfad}
.mf-reservation-steps li.is-current b{border-color:#e5c77b;background:#e5c77b;color:#241117}
.mf-reservation-steps li.is-done b{border-color:#b88b3b;background:#b88b3b;color:#140d0f}

[data-mf-reservation-errors]{margin-bottom:18px}
[data-mf-reservation-errors][hidden]{display:none}
.mf-reservation-errors{
  margin:0;
  border:1px solid rgba(220,142,153,.58);
  background:rgba(72,17,27,.96);
  color:#fff0f2;
  box-shadow:0 14px 42px rgba(0,0,0,.18);
}
.mf-reservation-errors p{margin:5px 0 0;color:rgba(255,255,255,.88)}

[data-mf-progressive-step]{scroll-margin-top:98px}
[data-mf-progressive-step]+[data-mf-progressive-step]{margin-top:24px}
.mf-progressive-mount{height:0;overflow:hidden}
.mf-reservation-panel{
  position:relative;
  padding:34px 38px;
  border:1px solid rgba(213,176,92,.34);
  background:#fffdf8;
  color:#2d2527;
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}
.mf-reservation-panel.is-loading{pointer-events:none}
.mf-reservation-panel.is-loading::after{
  content:"更新中…";
  position:absolute;
  z-index:4;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(255,253,248,.84);
  color:#681f30;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  backdrop-filter:blur(2px);
}
.mf-reservation-panel__head{margin-bottom:25px;padding-bottom:17px;border-bottom:1px solid rgba(91,53,59,.18)}
.mf-reservation-panel__head>span,.mf-reservation-complete>span:not(.mf-complete-mark){color:#805313;font-weight:700}
.mf-reservation-panel__head h2,.mf-reservation-complete h2{
  margin:5px 0 7px;
  color:#211a1c;
  font-family:"Noto Sans JP",sans-serif;
  font-size:clamp(22px,3vw,28px);
  font-weight:650;
}
.mf-reservation-panel__head--nested{margin:34px 0 20px;padding-top:30px;border-top:1px solid rgba(91,53,59,.18)}
.mf-reservation-panel__head--nested h2{font-size:22px}
.mf-reservation-panel__head p{color:#5c5154}

.mf-reservation-section .mf-choice-card>span,
.mf-reservation-section .mf-reservation-therapist-radio span,
.mf-reservation-section .mf-course-choice,
.mf-reservation-section .mf-extra-grid span,
.mf-reservation-section .mf-slot-grid span{
  color:#2d2527;
  transition:border-color .18s,background-color .18s,box-shadow .18s,transform .18s;
}
.mf-reservation-section .mf-choice-card small,
.mf-reservation-section .mf-course-choice small,
.mf-reservation-section .mf-extra-grid small,
.mf-reservation-section .mf-customer-grid small{color:#605558}
.mf-choice-card input:checked+span,.mf-reservation-therapist-radio input:checked+span,
.mf-extra-grid input:checked+span{
  border-color:#8c5d1f;
  background:#fff1db;
  color:#281e20;
  box-shadow:inset 0 0 0 1px rgba(140,93,31,.24);
}
.mf-course-choice.is-selected{border-color:#8c5d1f;box-shadow:0 0 0 1px rgba(140,93,31,.24)}
.mf-course-choice__main span b,.mf-course-extras h3,.mf-form-heading{color:#714713}
.mf-course-choice__main em{color:#633e12;font-weight:700}
.mf-course-extras{background:#fbf5eb;color:#2d2527}
.mf-slot-day header{background:linear-gradient(110deg,#4a1924,#241116);color:#fff}
.mf-slot-day header span{background:#d0a84f;color:#1b1113}
.mf-slot-grid input:checked+span{border-color:#812238;background:#812238;color:#fff}
.mf-customer-grid label>span{color:#352b2e;font-weight:600}
.mf-customer-grid label>span em{color:#a1263f;font-style:normal;font-weight:700}
.mf-customer-grid input,.mf-customer-grid textarea{background:#fff;color:#211a1c;border-color:#c7bbb5}
.mf-customer-grid input::placeholder,.mf-customer-grid textarea::placeholder{color:#847a7c;opacity:1}
.mf-customer-grid input:focus,.mf-customer-grid textarea:focus{border-color:#8c5d1f;box-shadow:0 0 0 2px rgba(140,93,31,.14)}

.mf-progressive-help{
  margin:16px 0 0;
  padding:11px 13px;
  border-left:3px solid #a97322;
  background:#fff7e8;
  color:#4f4547;
  font-size:10px;
  line-height:1.8;
}
.mf-customer-step{scroll-margin-top:98px}
.mf-customer-step[hidden]{display:none}
.mf-customer-step:not([hidden]){animation:mfReservationReveal .28s ease both}
@keyframes mfReservationReveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.mf-reservation-summary-mini{color:#2d2527}
.mf-reservation-summary-mini span{color:#62575a}
.mf-reservation-summary-mini strong{color:#211a1c}
.mf-reservation-total{
  border:1px solid #6f1d30;
  background:linear-gradient(135deg,#4a1924,#76263a);
  box-shadow:0 8px 22px rgba(74,25,36,.16);
}
.mf-reservation-total span,.mf-reservation-total strong{color:#fff}
.mf-reservation-total strong{font-size:1.25em}

.mf-confirm-list dt{color:#62575a}
.mf-confirm-list dd{color:#211a1c}
.mf-confirm-total{
  border-color:#6f1d30;
  background:linear-gradient(135deg,#4a1924,#76263a);
}
.mf-confirm-total dt,.mf-confirm-total dd{color:#fff;font-weight:800}
.mf-confirm-total dd{font-size:1.28em}
.mf-agreement{color:#30272a;background:#fff8ed;border-color:#d5c5ad}
.mf-agreement span{color:#30272a}
.mf-agreement a{color:#7b1f35;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:800}
.mf-agreement a:hover{color:#a1263f}

.mf-reservation-section .mf-button--gold{
  border-color:#9a671f;
  background:linear-gradient(135deg,#a9792e,#e0bd68);
  color:#1c1214;
  font-weight:700;
}
.mf-reservation-section .mf-button--gold:hover{border-color:#c3973d;background:linear-gradient(135deg,#b48432,#ebce82)}
.mf-reservation-section .mf-button--line-dark{border-color:#a99c97;background:#fff;color:#3e3437}

.mf-footer{
  border-top:1px solid rgba(213,176,92,.25);
  background:#0d090a;
  color:rgba(255,255,255,.76);
}
.mf-footer__simple span,.mf-footer__simple small{color:rgba(255,255,255,.66)}
.mf-mobile-actions{background:#120d0f;border-top-color:rgba(213,176,92,.3)}
.mf-mobile-actions a{border-right-color:rgba(255,255,255,.1);color:#fff}
.mf-mobile-actions a b{color:#e5c77b}
.mf-mobile-actions a span{color:rgba(255,255,255,.68)}
.mf-mobile-actions .is-reserve,.mf-mobile-actions .is-reserve.is-current{background:linear-gradient(135deg,#a9792e,#e0bd68);color:#1a1012}
.mf-mobile-actions .is-reserve b,.mf-mobile-actions .is-reserve span{color:#1a1012}

@media(max-width:700px){
  .mf-reservation-hero{padding:48px 0 42px}
  .mf-reservation-hero__backdrop{background-position:58% center;opacity:.25}
  .mf-reservation-hero h1{font-size:42px}
  .mf-reservation-hero p{max-width:88%;font-size:10px;line-height:1.8}
  .mf-reservation-section{padding:30px 0 88px}
  .mf-reservation-flow{width:min(calc(100% - 22px),980px)}
  .mf-reservation-steps{grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;margin-bottom:14px}
  .mf-reservation-steps li{min-width:0;min-height:56px;padding:7px 2px}
  .mf-reservation-steps b{width:20px;height:20px;font-size:10px}
  .mf-reservation-steps span{font-size:7px;line-height:1.3}
  .mf-reservation-panel{padding:22px 14px}
  [data-mf-progressive-step]+[data-mf-progressive-step]{margin-top:16px}
  .mf-reservation-panel__head{margin-bottom:18px;padding-bottom:13px}
  .mf-reservation-panel__head h2,.mf-reservation-complete h2{font-size:20px}
  .mf-reservation-panel__head--nested{margin-top:26px;padding-top:23px}
  .mf-reservation-panel__head--nested h2{font-size:19px}
  .mf-choice-card>span{padding:15px}
  .mf-slot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px}
  .mf-slot-grid span{padding:9px 3px}
  .mf-form-actions{grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
  .mf-progressive-help{font-size:9px}
  .mf-reservation-total strong,.mf-confirm-total dd{font-size:1.16em}
}

@media(prefers-reduced-motion:reduce){
  .mf-customer-step:not([hidden]){animation:none}
}