/* 東京女風静岡店 ネイティブ予約フォーム (2026-09)
   設計レビューで承認済みのプロトタイプ(Artifact)の配色・レイアウトを踏襲。
   すべて .johoo-resform 配下にスコープしてテーマ全体のスタイルと衝突しないようにしている。 */

.johoo-resform{
  --jrf-ground:#faf5f4;
  --jrf-surface:#ffffff;
  --jrf-surface-soft:#fdf3f0;
  --jrf-border:#f0d4d9;
  --jrf-border-strong:#e3b3bd;
  --jrf-ink:#3a2e2e;
  --jrf-ink-soft:#8a7574;
  --jrf-heading:#6b3a44;
  --jrf-accent:#d68a95;
  --jrf-accent-strong:#c26a78;
  --jrf-accent-contrast:#ffffff;
  --jrf-note-bg:#fff8f5;
  --jrf-note-border:#f0d4d9;
  --jrf-danger:#b3435a;
  --jrf-gold:#a9822f;
  --jrf-gold-bg:#faf2df;
  --jrf-shadow: 0 10px 30px rgba(107,58,68,0.10);

  box-sizing:border-box;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  line-height:1.8;
  color:var(--jrf-ink);
  background:var(--jrf-ground);
  padding:24px 16px 130px;
  border-radius:16px;
  margin:0 0 40px;
}
.johoo-resform *{box-sizing:border-box;}
.johoo-resform h1,.johoo-resform h2,.johoo-resform h3{
  font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;
}

.johoo-resform .jrf-progress-rail{ position:sticky; top:0; z-index:15; height:4px; background:var(--jrf-border); border-radius:999px; overflow:hidden; margin-bottom:18px; }
.johoo-resform .jrf-progress-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--jrf-accent-strong), var(--jrf-accent)); transition:width .25s ease; }

.johoo-resform .jrf-wrap{ max-width:640px; margin:0 auto; }

.johoo-resform .jrf-intro{ text-align:center; margin-bottom:26px; }
.johoo-resform .jrf-intro .jrf-eyebrow{
  display:inline-block; font-size:12px; letter-spacing:0.14em; color:var(--jrf-accent-strong);
  background:var(--jrf-surface-soft); border:1px solid var(--jrf-border); padding:4px 14px;
  border-radius:999px; margin-bottom:14px;
}
.johoo-resform .jrf-intro h1{ font-size:24px; font-weight:800; color:var(--jrf-heading); margin:0 0 10px; }
.johoo-resform .jrf-intro p{ color:var(--jrf-ink-soft); font-size:14px; margin:0; max-width:46ch; margin-inline:auto; }

.johoo-resform .jrf-card{
  background:var(--jrf-surface); border:1px solid var(--jrf-border); border-radius:14px;
  box-shadow:var(--jrf-shadow); margin-bottom:18px; overflow:hidden;
}
.johoo-resform .jrf-card.jrf-divider-before{ margin-top:30px; position:relative; }
.johoo-resform .jrf-card.jrf-divider-before::before{
  content:attr(data-divider); position:absolute; top:-24px; left:0; right:0;
  text-align:center; font-size:12px; color:var(--jrf-ink-soft); letter-spacing:.08em;
}
.johoo-resform .jrf-card > .jrf-head{ padding:14px 20px; background:linear-gradient(90deg, var(--jrf-surface-soft), var(--jrf-surface)); border-bottom:1px solid var(--jrf-border); }
.johoo-resform .jrf-card > .jrf-head h2{ margin:0; font-size:16px; color:var(--jrf-heading); font-weight:700; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.johoo-resform .jrf-card > .jrf-head .jrf-req{ font-size:11px; color:var(--jrf-danger); border:1px solid var(--jrf-danger); border-radius:999px; padding:1px 8px; font-weight:500; }
.johoo-resform .jrf-card > .jrf-head .jrf-opt{ font-size:11px; color:var(--jrf-ink-soft); border:1px solid var(--jrf-border); border-radius:999px; padding:1px 8px; font-weight:500; }
.johoo-resform .jrf-card > .jrf-head .jrf-sub{ margin:6px 0 0; font-size:12.5px; color:var(--jrf-ink-soft); font-weight:400; }
.johoo-resform .jrf-card > .jrf-body{ padding:18px 20px 20px; }

.johoo-resform .jrf-field-label{ display:block; font-size:13px; font-weight:700; color:var(--jrf-ink); margin-bottom:8px; }
.johoo-resform .jrf-subhead{ font-size:12.5px; font-weight:700; color:var(--jrf-heading); margin:16px 0 8px; }
.johoo-resform .jrf-subhead:first-child{ margin-top:0; }

.johoo-resform input[type="text"], .johoo-resform input[type="email"], .johoo-resform input[type="tel"],
.johoo-resform input[type="date"], .johoo-resform input[type="time"], .johoo-resform input[type="number"],
.johoo-resform select, .johoo-resform textarea{
  width:100%; font-family:inherit; font-size:15px; line-height:1.4; color:var(--jrf-ink); background:var(--jrf-ground);
  border:1px solid var(--jrf-border); border-radius:9px; padding:11px 13px; transition:border-color .15s ease;
}
.johoo-resform select{
  min-height:44px; line-height:normal; padding-top:10px; padding-bottom:10px;
  -webkit-appearance:menulist; appearance:menulist;
}
.johoo-resform input:focus, .johoo-resform select:focus, .johoo-resform textarea:focus{
  outline:none; border-color:var(--jrf-accent-strong); box-shadow:0 0 0 3px rgba(214,138,149,0.22);
}
.johoo-resform textarea{resize:vertical; min-height:72px;}
.johoo-resform .jrf-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.johoo-resform .jrf-choice-list{display:flex; flex-direction:column; gap:10px;}
.johoo-resform .jrf-choice{
  display:flex; align-items:center; gap:11px; border:1px solid var(--jrf-border); border-radius:10px;
  padding:11px 14px; cursor:pointer; background:var(--jrf-ground);
}
.johoo-resform .jrf-choice:has(input:checked){ border-color:var(--jrf-accent-strong); background:var(--jrf-surface-soft); }
.johoo-resform .jrf-choice input{accent-color:var(--jrf-accent-strong); width:17px; height:17px; flex:none;}
.johoo-resform .jrf-choice .jrf-txt{flex:1; font-size:14.5px;}
.johoo-resform .jrf-choice .jrf-badge{
  font-size:10.5px; font-weight:700; color:var(--jrf-gold); background:var(--jrf-gold-bg);
  border-radius:999px; padding:2px 9px; letter-spacing:.03em;
}
.johoo-resform .jrf-choice .jrf-price{ font-size:13px; font-weight:700; color:var(--jrf-heading); font-variant-numeric:tabular-nums; white-space:nowrap; }
.johoo-resform .jrf-choice .jrf-price .jrf-was{ color:var(--jrf-ink-soft); text-decoration:line-through; font-weight:500; margin-right:5px; }
.johoo-resform .jrf-choice.jrf-disabled{ opacity:0.4; cursor:not-allowed; }
.johoo-resform .jrf-choice.jrf-disabled input{pointer-events:none;}

.johoo-resform .jrf-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:480px){ .johoo-resform .jrf-grid-2{grid-template-columns:1fr;} }

.johoo-resform .jrf-hint{font-size:12px; color:var(--jrf-ink-soft); margin-top:8px;}
.johoo-resform .jrf-note{ background:var(--jrf-note-bg); border:1px dashed var(--jrf-note-border); border-radius:9px; padding:10px 13px; font-size:12.5px; color:var(--jrf-ink-soft); margin-bottom:14px; }

.johoo-resform .jrf-terms-list{display:flex; flex-direction:column; gap:12px;}
.johoo-resform .jrf-terms-item{ display:flex; gap:11px; align-items:flex-start; border:1px solid var(--jrf-border); border-radius:10px; padding:12px 14px; background:var(--jrf-ground); }
.johoo-resform .jrf-terms-item:has(input:checked){border-color:var(--jrf-accent-strong); background:var(--jrf-surface-soft);}
.johoo-resform .jrf-terms-item input{margin-top:3px; accent-color:var(--jrf-accent-strong); width:17px; height:17px; flex:none;}
.johoo-resform .jrf-terms-item .jrf-txt{font-size:13.5px;}

.johoo-resform .jrf-field-gap{margin-bottom:16px;}
.johoo-resform .jrf-field-gap:last-child{margin-bottom:0;}

.johoo-resform .jrf-ext-field{ margin-top:12px; background:var(--jrf-surface-soft); border:1px solid var(--jrf-border); border-radius:9px; padding:12px 14px; }
.johoo-resform .jrf-ext-field input[type="number"]{ width:110px; }

.johoo-resform details.jrf-prefs-accordion{ border:1px solid var(--jrf-border); border-radius:10px; overflow:hidden; }
.johoo-resform details.jrf-prefs-accordion summary{
  cursor:pointer; padding:12px 14px; font-size:13.5px; font-weight:700; color:var(--jrf-heading);
  background:var(--jrf-surface-soft); list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.johoo-resform details.jrf-prefs-accordion summary::-webkit-details-marker{ display:none; }
.johoo-resform details.jrf-prefs-accordion summary::after{ content:'\25BE'; font-size:12px; color:var(--jrf-ink-soft); transition:transform .15s ease; flex:none; }
.johoo-resform details.jrf-prefs-accordion[open] summary::after{ transform:rotate(180deg); }
.johoo-resform .jrf-prefs-accordion-body{ padding:16px 14px 4px; }

.johoo-resform #jrfMeetingNote{display:none;}
.johoo-resform #jrfGroupCountField{display:none;}
.johoo-resform #jrfTrialLockNote{display:none;}
.johoo-resform #jrfJosouPrefs{display:none;}
.johoo-resform fieldset.jrf-duration-group{display:none;}
.johoo-resform fieldset{border:none; padding:0; margin:0;}

.johoo-resform .jrf-goal-message{
  text-align:center; font-size:13px; color:var(--jrf-accent-strong); font-weight:700; margin:-4px 0 18px; display:none;
}

.johoo-resform .jrf-loading{ text-align:center; padding:30px 10px; color:var(--jrf-ink-soft); font-size:14px; }
.johoo-resform .jrf-error{ text-align:center; padding:16px; color:var(--jrf-danger); font-size:13.5px; background:var(--jrf-note-bg); border:1px solid var(--jrf-note-border); border-radius:10px; }

.jrf-summary-bar{ position:fixed; left:0; right:0; bottom:0; background:var(--jrf-surface,#fff); border-top:1px solid var(--jrf-border,#f0d4d9); box-shadow:0 -8px 24px rgba(107,58,68,0.14); padding:12px 16px; z-index:9999; }
.jrf-summary-inner{ max-width:640px; margin:0 auto; display:flex; align-items:center; gap:14px; }
.jrf-summary-figures{flex:1; min-width:0;}
.jrf-summary-figures .jrf-label{ font-size:11px; color:var(--jrf-ink-soft,#8a7574); letter-spacing:.04em; }
.jrf-summary-figures .jrf-amount{ font-size:22px; font-weight:800; color:var(--jrf-heading,#6b3a44); font-variant-numeric:tabular-nums; line-height:1.3; }
.jrf-summary-figures .jrf-amount small{font-size:13px; font-weight:600;}
.jrf-summary-figures .jrf-amount small#jrfTotalSuffix{color:var(--jrf-danger,#b3435a); font-weight:700; margin-left:4px;}
.jrf-summary-figures .jrf-breakdown{ font-size:11px; color:var(--jrf-ink-soft,#8a7574); font-variant-numeric:tabular-nums; white-space:nowrap; overflow-x:auto; }
.jrf-summary-figures .jrf-caveat{font-size:10.5px; color:var(--jrf-danger,#b3435a); margin-top:2px;}
button.jrf-submit-btn{
  font:inherit; font-weight:700; font-size:14.5px; color:var(--jrf-accent-contrast,#fff);
  background:linear-gradient(90deg, var(--jrf-accent-strong,#c26a78), var(--jrf-accent,#d68a95)); border:none; border-radius:999px;
  padding:13px 22px; cursor:pointer; white-space:nowrap; box-shadow:0 4px 12px rgba(214,138,149,0.35);
}
button.jrf-submit-btn:disabled{ opacity:0.6; cursor:not-allowed; }
button.jrf-submit-btn:active:not(:disabled){opacity:0.85;}

.jrf-toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(8px);
  background:var(--jrf-heading,#6b3a44); color:#fff; padding:10px 18px; border-radius:999px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:10000; white-space:nowrap; max-width:90vw; text-overflow:ellipsis; overflow:hidden;
}
.jrf-toast.jrf-show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ページ最上位のアコーディオン(他のご予約方法を先に見せ、フォームは開閉式にする) */
.jrf-toplevel-accordion{
  border:1px solid #f0d4d9; border-radius:14px; overflow:hidden;
  background:#fff; box-shadow:0 10px 30px rgba(107,58,68,0.10);
}
.jrf-toplevel-accordion summary{
  cursor:pointer; list-style:none; padding:18px 20px;
  background:linear-gradient(90deg, #fdf3f0, #ffffff);
  display:flex; flex-direction:column; gap:4px;
}
.jrf-toplevel-accordion summary::-webkit-details-marker{ display:none; }
.jrf-toplevel-accordion summary::after{
  content:'予約フォームを開く ▾'; display:inline-block; margin-top:8px;
  font-size:12.5px; font-weight:700; color:#c26a78;
}
.jrf-toplevel-accordion[open] summary::after{ content:'閉じる ▴'; }
.jrf-toplevel-accordion-title{
  font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;
  font-size:18px; font-weight:800; color:#6b3a44;
}
.jrf-toplevel-accordion-sub{ font-size:12.5px; color:#8a7574; }
.jrf-toplevel-accordion-body{ border-top:1px solid #f0d4d9; padding:20px 0 0; }
.jrf-toplevel-accordion .johoo-resform{ padding-top:8px; margin-bottom:0; }
.jrf-toplevel-accordion .jrf-intro{ margin-bottom:18px; text-align:left; }
.jrf-toplevel-accordion .jrf-intro p{ margin:0; max-width:none; }

.jrf-primary-methods{ margin-top:8px; }
