:root { --ink:#505050; --muted:#999; --accent:#12cad5; --accent-dark:#087984; --line:#d4d4d4; --paper:#f8f8f8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif; font-size:16px; line-height:1.55; }
[hidden] { display:none!important; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.5; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #086973; outline-offset:3px; }
.visually-hidden,.steps { position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.demo-notice { padding:5px 12px; font-size:10px; text-align:center; color:#745830; background:#fff4df; }
.demo-notice strong { margin-right:9px; }
.site-header { background:var(--accent); color:white; }
.header-inner { max-width:900px; min-height:84px; margin:auto; padding:12px 22px; display:flex; align-items:center; gap:19px; }
.header-mark { object-fit:contain; filter:brightness(0) invert(1); flex-shrink:0; }
#header-clinic { font-size:20px; font-weight:700; line-height:1.4; }
.page-navigation { position:relative; background:white; border-bottom:1px solid var(--line); min-height:58px; display:flex; align-items:center; justify-content:center; padding:12px 100px; }
.page-navigation h1 { margin:0; max-width:720px; font-size:21px; font-weight:700; text-align:center; line-height:1.45; }
#page-back { position:absolute; left:max(14px,calc((100% - 900px)/2)); top:50%; transform:translateY(-50%); border:0; padding:7px 0; background:white; color:var(--accent-dark); font-size:17px; font-weight:700; }
main { max-width:900px; margin:auto; padding:24px 16px 30px; }
.panel { margin:0 0 22px; background:white; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.selection-panel { background:transparent; border:0; border-radius:0; overflow:visible; }
#search-form { padding:0; }
.clinic-fields { background:white; padding:16px; border:1px solid var(--line); border-radius:4px; margin-bottom:18px; }
.clinic-fields label { display:block; font-weight:600; margin-bottom:8px; }
.menu-cards { display:flex; flex-direction:column; gap:8px; }
.menu-card { position:relative; display:block; text-align:left; width:100%; background:white; color:var(--ink); border:1px solid #cfcfcf; border-radius:4px; padding:14px 16px; min-height:60px; font-size:21px; line-height:1.45; font-weight:700; overflow-wrap:anywhere; }
.category-card { padding-right:40px; }
.card-arrow { position:absolute; right:17px; top:50%; transform:translateY(-50%); font-size:31px; font-weight:400; color:#999; }
.card-name { display:block; }
.card-caption { display:block; font-size:15px; font-weight:600; color:#999; line-height:1.5; margin-top:2px; }
.menu-groups { display:flex; flex-direction:column; gap:9px; }
.menu-group { background:white; border:1px solid #cfcfcf; border-radius:4px; overflow:hidden; }
.menu-group summary { list-style:none; cursor:pointer; position:relative; padding:14px 40px 14px 16px; font-size:21px; font-weight:700; }
.menu-group summary::-webkit-details-marker { display:none; }
.menu-group summary::after { content:"⌄"; position:absolute; right:16px; top:50%; transform:translateY(-55%); color:#999; font-size:24px; }
.menu-group[open] summary { background:#def1f2; }
.menu-group[open] summary::after { content:"⌃"; }
.menu-group-body { display:flex; flex-direction:column; gap:10px; padding:12px; }
.menu-group-body .menu-card { box-shadow:0 1px 3px #00000012; }
.notice-heading { font-size:20px; margin:20px 0 12px; }
.phone-notice { background:white; padding:15px; border:1px solid var(--line); border-radius:5px; }
.phone-link { display:block; color:var(--accent-dark); font-size:23px; margin:15px 0 28px; text-decoration:none; }
.phone-link:focus-visible,.menu-group summary:focus-visible { outline:3px solid var(--accent-dark); outline-offset:3px; }
#catalog-fields { background:white; border:1px solid var(--line); border-radius:4px; padding:20px; }
.panel-content { padding:22px; }
.section-heading { margin:0; padding:16px 22px; background:white; border-bottom:1px solid var(--line); font-size:20px; }
.section-heading:focus,.result-panel:focus,#page-title:focus { outline:none; }
.panel-note { font-size:14px; margin:0 0 20px; }
.field { margin-bottom:23px; }
.field label { display:block; margin-bottom:8px; font-size:14px; font-weight:600; }
.required { display:inline-block; margin-left:6px; color:#a64237; font-size:10px; font-weight:400; border:1px solid #e8c9c5; background:#fff1f0; padding:0 4px; border-radius:2px; }
.optional,.field-hint { font-size:12px; color:#737373; font-weight:400; }
.field-hint { margin:8px 0 0; line-height:1.7; }
input:not([type=hidden]):not([type=checkbox]),select,textarea { width:100%; border:1px solid #c5c5c5; border-radius:4px; padding:10px 12px; background:white; color:var(--ink); min-height:46px; }
textarea { resize:vertical; }
.primary,.secondary { display:block; width:100%; min-height:48px; padding:12px 18px; border-radius:4px; font-size:15px; font-weight:600; }
.primary { background:var(--accent-dark); color:white; border:1px solid var(--accent-dark); }
.primary span { float:right; }
.secondary { background:white; color:var(--ink); border:1px solid #c5c5c5; margin-top:12px; }
.text-button { background:transparent; color:var(--accent-dark); border:0; padding:12px 4px; text-decoration:underline; font-size:13px; }
.service-card { background:white; padding:13px 15px; border:1px solid var(--line); border-radius:7px; margin-bottom:16px; }
.service-card strong { display:block; font-size:21px; line-height:1.4; }
.service-card>span { display:block; color:#999; font-size:15px; font-weight:600; margin-top:2px; }
.service-card p { font-size:14px; margin:7px 0 0; }
.calendar-heading { font-size:21px; margin:18px 0 16px; font-weight:700; }
.week-navigation { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; border:1px solid var(--line); border-radius:8px 8px 0 0; background:white; margin:0; min-height:58px; }
.week-navigation strong { text-align:center; font-size:18px; }
.week-navigation button { border:0; padding:4px; height:50px; background:white; color:#666; font-size:30px; border-radius:8px; }
.refresh-button { display:block; width:100%; background:white; border:1px solid var(--line); border-top:0; padding:6px; margin:0; font-size:11px; }
.status { font-size:12px; color:#687676; margin:7px 0; }
.status:empty { display:none; }
.error { color:#a0392f; }
#slots-section { margin-top:0; }
#slots { width:100%; }
.availability-table { border-collapse:collapse; table-layout:fixed; width:100%; background:white; font-size:19px; }
.availability-table th,.availability-table td { border:1px solid #ededed; text-align:center; padding:0; height:52px; font-weight:400; }
.availability-table thead th { height:63px; }
.availability-table thead strong { display:block; font-size:21px; }
.availability-table thead span { display:block; font-size:17px; }
.availability-table th.time-column { width:74px; font-size:12px; color:#777; }
.availability-table tbody th { font-size:18px; }
.availability-table .sunday { color:#dd3732; }
.availability-table .saturday { color:#194acb; }
.available-slot { display:block; width:100%; height:51px; margin:0; padding:0; border:0; border-radius:0; background:white; color:var(--accent); font-size:30px; line-height:1; }
.available-slot:hover { background:#e6fafb; }
.unavailable-slot { color:#606060; font-size:28px; }
.calendar-note { padding:8px 3px; font-size:10px; }
.selected-summary { padding:13px 14px; border:1px solid var(--line); border-radius:4px; font-size:14px; line-height:1.7; }
.consent { display:flex; align-items:flex-start; gap:9px; font-size:13px; margin:20px 0; }
.consent input { width:18px; height:18px; flex-shrink:0; accent-color:var(--accent-dark); }
#confirm-panel { border:0; background:transparent; overflow:visible; }
#confirm-panel>.panel-content { padding:0; }
.confirmation-intro { font-size:18px; margin:0 0 24px; }
.confirmation-card { display:block; background:white; border:1px solid var(--line); border-radius:8px; padding:22px; margin:0 0 24px; overflow-wrap:anywhere; }
.confirmation-list>div+div { margin-top:28px; }
.confirmation-list dt { font-size:14px; color:#737373; margin:0 0 4px; }
.confirmation-list dd { font-size:20px; font-weight:700; margin:0; line-height:1.5; overflow-wrap:anywhere; }
.confirmation-caption { display:block; font-size:14px; color:#999; font-weight:500; margin-top:3px; }
.confirmation-heading { display:block; font-size:20px; font-weight:700; margin:26px 0 22px; }
.confirmation-card>.confirmation-heading { margin:0 0 12px; }
.confirmation-card p { margin:12px 0; }
#confirm-notes { margin-bottom:24px; white-space:pre-wrap; }
.policy-card h3 { margin:0 0 26px; font-size:21px; }
.policy-card ul { padding-left:1.2em; margin:0; font-size:17px; line-height:1.85; }
.policy-card li+li { margin-top:28px; }
.confirmation-note { font-size:12px; margin:28px 0 18px; color:#737373; }
#confirm-submit { width:80%; margin:0 auto 24px; background:var(--accent); border-color:var(--accent); border-radius:999px; font-size:20px; min-height:56px; }
#edit-details { background:transparent; border:0; color:var(--accent-dark); text-decoration:underline; }
.receipt { font-size:14px; font-family:monospace; }
.booking-notes { font-size:12px; color:#777; padding:0 4px; margin-top:28px; }
.booking-notes h2 { font-size:14px; margin:0 0 7px; }
.booking-notes ul { margin:0; padding-left:19px; }
footer { max-width:868px; margin:auto; border-top:1px solid var(--line); padding:20px 4px 30px; font-size:11px; color:#777; }
footer span { float:right; }
@media(max-width:600px) {
  body { font-size:15px; }
  .header-inner { min-height:61px; padding:7px 17px; gap:17px; }
  .header-mark { width:38px; height:43px; }
  #header-clinic { font-size:15px; }
  .page-navigation { min-height:43px; padding:11px 77px; }
  .page-navigation h1 { font-size:18px; line-height:1.45; }
  #page-back { left:12px; font-size:16px; }
  main { padding:24px 14px 26px; }
  .menu-card { font-size:18px; padding:10px 15px; min-height:55px; line-height:1.45; }
  .category-card { padding:10px 34px 10px 15px; min-height:65px; }
  .card-arrow { right:15px; font-size:26px; }
  .card-caption { font-size:12px; line-height:1.4; }
  .menu-group summary { padding:12px 36px 12px 15px; font-size:18px; }
  .menu-group-body { padding:10px; gap:9px; }
  .service-card { padding:11px 12px; }
  .service-card strong { font-size:18px; }
  .service-card>span { font-size:12px; }
  .service-card p { font-size:12px; margin-top:7px; }
  .calendar-heading { font-size:18px; margin:16px 0; }
  .week-navigation strong { font-size:15px; }
  .week-navigation { grid-template-columns:28px 1fr 28px; min-height:52px; }
  .week-navigation button { height:50px; font-size:28px; }
  .availability-table th.time-column { width:56px; font-size:10px; }
  .availability-table thead th { height:57px; }
  .availability-table thead strong { font-size:18px; }
  .availability-table thead span { font-size:14px; }
  .availability-table th,.availability-table td { height:44px; }
  .availability-table tbody th { font-size:15px; }
  .available-slot { height:43px; font-size:27px; }
  .unavailable-slot { font-size:25px; }
  .panel-content { padding:19px; }
  .section-heading { font-size:18px; padding:13px 18px; }
  .confirmation-card { padding:14px 12px; margin-bottom:15px; }
  .confirmation-list>div+div { margin-top:25px; }
  .confirmation-list dt { font-size:13px; }
  .confirmation-list dd { font-size:18px; }
  .confirmation-caption { font-size:12px; }
  .confirmation-intro { font-size:17px; margin-bottom:20px; }
  .confirmation-heading { font-size:19px; margin:24px 0 20px; }
  .policy-card h3 { font-size:20px; margin-bottom:24px; }
  .policy-card ul { font-size:16px; }
  footer { margin:0 18px; }
  footer span { display:block; float:none; margin-top:4px; }
}