.sgb-app{max-width:520px;margin:18px auto;background:#f5f7fb;color:#152238;border-radius:18px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic",sans-serif}.sgb-head{background:#17345f;color:#fff;padding:20px}.sgb-logo{font-size:28px;font-weight:900}.sgb-head>div:last-child{font-size:12px;opacity:.85}.sgb-body{padding:14px}.sgb-card{background:#fff;border:1px solid #e5e7eb;border-radius:17px;padding:16px;margin-bottom:13px}.sgb-card h3{margin:0 0 8px}.sgb-muted{font-size:12px;color:#6b7280;margin:0 0 12px}.sgb-trainers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sgb-trainer{border:2px solid #e5e7eb;background:#fff;border-radius:15px;padding:14px;text-align:left;color:#152238}.sgb-trainer.active{border-color:#17345f;background:#edf3fb}.sgb-trainer strong,.sgb-price{display:block}.sgb-price{font-size:20px;font-weight:900;margin-top:5px}.sgb-trainer em{display:inline-block;font-style:normal;font-size:11px;background:#eef2ff;padding:4px 8px;border-radius:999px;margin-top:8px}.sgb-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.sgb-slot{padding:12px;border:1px solid #dbe1e8;border-radius:12px;background:#fff}.sgb-slot.active{background:#17345f;color:#fff}.sgb-loading,.sgb-empty{grid-column:1/-1;color:#6b7280;font-size:13px}.sgb-card label{display:block;font-size:13px;font-weight:700;margin-top:10px}.sgb-card input{width:100%;box-sizing:border-box;border:1px solid #dbe1e8;border-radius:11px;padding:12px;margin-top:5px;font-size:16px}.sgb-summary{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:14px}.sgb-submit{width:100%;background:#17345f;color:#fff;border:0;border-radius:14px;padding:15px;font-size:16px;font-weight:900}.sgb-submit:disabled{opacity:.4}.sgb-success,.sgb-error{padding:12px;border-radius:12px;margin-bottom:12px}.sgb-success{background:#ecfdf5;color:#065f46}.sgb-error{background:#fef2f2;color:#991b1b}@media(max-width:420px){.sgb-app{margin:0;border-radius:0}.sgb-trainers{grid-template-columns:1fr 1fr}.sgb-slots{grid-template-columns:1fr 1fr}}
.sgb-services{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sgb-service{border:2px solid #e5e7eb;background:#fff;border-radius:15px;padding:14px;text-align:left;color:#152238}.sgb-service.active{border-color:#17345f;background:#edf3fb}.sgb-service strong{display:block;font-size:14px}.sgb-service span{display:block;margin-top:6px;font-size:18px;font-weight:900;color:#17345f}@media(max-width:420px){.sgb-services{grid-template-columns:1fr}}

.sgb-service input,.sgb-trainer input,.sgb-slot input{position:absolute;opacity:0;pointer-events:none}
.sgb-service,.sgb-trainer,.sgb-slot{position:relative;cursor:pointer}
.sgb-slot{display:block}
.sgb-slot span{display:block;width:100%}
.sgb-slot.active{background:#17345f!important;color:#fff!important;border-color:#17345f!important}

.sgb-calendar-wrap{margin-top:12px}
.sgb-calendar-head{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;margin-bottom:10px;text-align:center}
.sgb-calendar-head strong{font-size:17px}
.sgb-cal-nav{border:1px solid #e5e7eb;background:#fff;color:#17345f;border-radius:10px;height:38px;font-size:24px;line-height:1;cursor:pointer}
.sgb-cal-nav:disabled{opacity:.25;cursor:default}
.sgb-calendar-week,.sgb-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.sgb-calendar-week{margin-bottom:5px;color:#6b7280;font-size:11px;text-align:center}
.sgb-calendar-week span{padding:3px 0}
.sgb-cal-blank{aspect-ratio:1/1}
.sgb-cal-day{aspect-ratio:1/1;border:1px solid #e5e7eb;border-radius:10px;background:#f8fafc;color:#94a3b8;font-size:14px;font-weight:700}
.sgb-cal-day.has-slots{background:#fff;color:#17345f;border-color:#b8c7da;cursor:pointer;box-shadow:0 1px 4px rgba(15,23,42,.04)}
.sgb-cal-day.has-slots::after{content:"";display:block;width:5px;height:5px;border-radius:50%;background:#17345f;margin:3px auto 0}
.sgb-cal-day.active{background:#17345f;color:#fff;border-color:#17345f}
.sgb-cal-day.active::after{background:#fff}
.sgb-cal-day.today{outline:2px solid rgba(23,52,95,.16);outline-offset:1px}
.sgb-time-area{margin-top:16px}
.sgb-selected-date{font-weight:800;margin-bottom:10px}
.sgb-time-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sgb-time{position:relative;display:block;cursor:pointer}
.sgb-time input{position:absolute;opacity:0;pointer-events:none}
.sgb-time span{display:block;border:1px solid #dbe2ea;border-radius:12px;background:#fff;padding:12px 6px;text-align:center;font-weight:800;color:#17345f}
.sgb-time.active span{background:#17345f;color:#fff;border-color:#17345f}
@media(max-width:380px){.sgb-time-list{grid-template-columns:repeat(2,1fr)}}

.sgb-customer-booking{border:1px solid #e5e7eb;border-radius:14px;padding:14px;margin:12px 0;background:#fff}
.sgb-customer-booking-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}
.sgb-status{font-size:11px;padding:5px 8px;border-radius:999px;background:#eef2f7;color:#475569}
.sgb-status.confirmed{background:#ecfdf5;color:#166534}
.sgb-status.cancelled{background:#f3f4f6;color:#6b7280}
.sgb-customer-booking-grid{display:grid;grid-template-columns:90px 1fr;gap:8px 12px;font-size:14px}
.sgb-customer-booking-grid span{color:#64748b}
.sgb-customer-booking-grid b{text-align:right}
.sgb-customer-booking-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sgb-customer-booking-actions a{display:block;text-align:center;text-decoration:none;border-radius:10px;padding:11px;border:1px solid #17345f;color:#17345f;font-weight:700}
.sgb-customer-booking-actions a.danger{border-color:#fecaca;color:#b91c1c}

.sgb-trainer-thumb{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 8px;border:1px solid #e5e7eb}

/* v0.50 予約内容を縦並びにしてスマホ表示崩れを防止 */
.sgb-summary{
  display:block !important;
}
.sgb-summary > span,
.sgb-summary > b{
  display:block !important;
  width:100% !important;
  text-align:left !important;
}
.sgb-summary > span{
  margin-top:14px !important;
  margin-bottom:4px !important;
  font-size:12px !important;
  color:#64748b !important;
}
.sgb-summary > span:first-child{
  margin-top:0 !important;
}
.sgb-summary > b{
  padding-bottom:12px !important;
  border-bottom:1px solid #e5e7eb !important;
  font-size:16px !important;
  line-height:1.55 !important;
  word-break:break-word !important;
}
.sgb-summary > b:last-child{
  border-bottom:0 !important;
  padding-bottom:0 !important;
}

.sgb-card textarea{
  width:100%;
  box-sizing:border-box;
  min-height:110px;
  resize:vertical;
  font:inherit;
  border:1px solid #dbe2ea;
  border-radius:10px;
  padding:11px 12px;
  background:#fff;
}

/* v0.61 予約方法選択 */
.sgb-booking-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sgb-booking-method{display:block;border:2px solid #e1e6ee;border-radius:14px;padding:14px;cursor:pointer;background:#fff}
.sgb-booking-method.active{border-color:#17345f;background:#eef4fb}
.sgb-booking-method input{position:absolute;opacity:0;pointer-events:none}
.sgb-booking-method strong{display:block;font-size:16px;line-height:1.4;color:#152238}
.sgb-booking-method span{display:block;margin-top:5px;font-size:12px;line-height:1.5;color:#64748b}
.sgb-time span strong{display:block}
.sgb-time span small{display:block;margin-top:3px;font-size:10px;font-weight:500;line-height:1.3}
@media(max-width:420px){
  .sgb-booking-methods{grid-template-columns:1fr}
}

/* v0.62 トレーナー自己紹介 */
.sgb-trainer-intro{
  display:block;
  width:100%;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #e5e7eb;
  font-size:12px;
  line-height:1.6;
  font-weight:400;
  color:#64748b;
  text-align:left;
}

/* v0.63 トレーナー選択を縦並びに */
.sgb-trainers{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
}
.sgb-trainer{
  width:100% !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  column-gap:12px !important;
  row-gap:6px !important;
  text-align:left !important;
}
.sgb-trainer-thumb{
  grid-row:1 / span 3 !important;
  margin:0 !important;
}
.sgb-trainer > strong{
  align-self:end !important;
}
.sgb-trainer > .sgb-price{
  justify-self:end !important;
  align-self:end !important;
}
.sgb-trainer > em{
  grid-column:2 / 4 !important;
  margin:0 !important;
}
.sgb-trainer-intro{
  grid-column:2 / 4 !important;
  margin-top:4px !important;
}
@media(max-width:480px){
  .sgb-trainer{
    grid-template-columns:56px 1fr auto !important;
    padding:14px !important;
  }
  .sgb-trainer-thumb{
    width:56px !important;
    height:56px !important;
  }
}