/* =====================================================================
   予約フォーム（2026-10-15 作り直し）。/studio/{slug}/reserve 専用。
   レイアウト: 左＝番号つきの入力セクション / 右＝追従する「ご予約内容」
   ⚠️ JS が参照する id・class（rsv-*）は残している。見た目はすべて .bk 配下で完結させる
   ===================================================================== */
.bk {
  --bk-ink: #1A1A1A;
  --bk-text: #2B2B2E;
  --bk-muted: #6B6B70;
  --bk-line: #E4E4E7;
  --bk-soft: #F6F6F7;
  --bk-accent: #FFF200;
  --bk-danger: #B91C1C;
  --bk-radius: 0.75em;
  color: var(--bk-text);
  padding: 0.5em 0 4em;
}
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }

/* 戻るリンク・見出し */
.bk .bk-back { display: inline-block; margin: 0 0 1.25em; font-size: 0.8125em; color: var(--bk-muted); text-decoration: none; }
.bk .bk-back:hover { color: var(--bk-ink); }
.bk .bk-head { display: flex; align-items: center; gap: 1.25em; margin: 0 0 2em; }
.bk .bk-head__thumb { width: 6.5em; height: 4.875em; object-fit: cover; border-radius: 0.625em; flex: none; }
.bk .bk-head__eyebrow { margin: 0 0 0.25em; font-size: 0.75em; font-weight: 700; letter-spacing: 0.08em; color: var(--bk-muted); }
.single-studio .wrapper main article .single .container .bk .bk-head__title { margin: 0; font-size: 1.625em; line-height: 1.35; color: var(--bk-ink); }
.bk .bk-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.75em; margin: 0.375em 0 0; font-size: 0.8125em; color: var(--bk-muted); }
.bk .bk-chip { display: inline-block; padding: 0.1875em 0.75em; border-radius: 999em; background: var(--bk-soft); color: var(--bk-ink); font-size: 0.9em; font-weight: 700; }

.bk .bk-flash { margin: 0 0 1.5em; padding: 0.875em 1.125em; border-radius: var(--bk-radius); background: #FFFCCC; color: #1a1a1a; font-size: 0.875em; line-height: 1.7; }
.bk .bk-flash.is-error { background: #FEF2F2; color: #991B1B; }
.bk .bk-flash.is-warn { background: #fff200; color: #1a1a1a; }
.bk .bk-flash p { margin: 0; }

/* 2カラム */
.bk .bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22em; gap: 2.5em; align-items: start; }
.bk .bk-main { display: flex; flex-direction: column; gap: 1.25em; min-width: 0; }

/* 予約の種類（セグメント） */
.bk .bk-kind { display: inline-flex; align-self: flex-start; gap: 0.25em; padding: 0.3125em; border-radius: 999em; background: var(--bk-soft); }
.bk .bk-kind button { padding: 0.625em 1.375em; border: 0; border-radius: 999em; background: transparent; color: var(--bk-muted); font: inherit; font-size: 0.875em; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.bk .bk-kind button:hover { color: var(--bk-ink); }
.bk .bk-kind button.active { background: #fff; color: var(--bk-ink); box-shadow: 0 0.0625em 0.25em rgba(0, 0, 0, 0.1); }

/* セクション */
.bk .bk-sec { padding: 0; background: none; } /* 枠線・背景なし。余白と番号つき見出しで区切る(2026-10-15) */
.bk .bk-main { gap: 2.75em; }
.bk .bk-sec__title { display: flex; align-items: center; gap: 0.625em; margin: 0 0 1.25em; font-size: 1.0625em; font-weight: 700; color: var(--bk-ink); line-height: 1.4; }
.bk .bk-sec__title small { margin-left: 0.25em; font-size: 0.75em; font-weight: 500; color: var(--bk-muted); }
.bk .bk-sec__num { display: inline-flex; align-items: center; justify-content: center; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--bk-ink); color: #fff; font-size: 0.8125em; font-weight: 700; flex: none; }

/* 入力欄 */
.bk .bk-field { display: flex; flex-direction: column; gap: 0.5em; min-width: 0; }
.bk .bk-field + .bk-field, .bk .bk-field + .bk-grid, .bk .bk-grid + .bk-field { margin-top: 1.25em; }
.bk .bk-grid > .bk-field { margin-top: 0; } /* 横並びの欄は上端をそろえる */
.bk .bk-label { display: flex; align-items: center; gap: 0.5em; font-size: 0.8125em; font-weight: 700; color: var(--bk-ink); }
.bk .bk-label em { font-style: normal; font-size: 0.85em; font-weight: 700; color: var(--bk-danger); }
.bk .bk-grid { display: grid; gap: 1em 1.25em; }
.bk .bk-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk .bk-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bk input[type="text"], .bk input[type="email"], .bk input[type="tel"], .bk input[type="date"], .bk select, .bk textarea {
  display: block; width: 100%; min-height: 3em; margin: 0; padding: 0.75em 0.9375em;
  border: 1px solid transparent; border-radius: 0.625em; background-color: var(--bk-soft);
  color: var(--bk-ink); font: inherit; font-size: 0.9375em; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s; outline: none; -webkit-appearance: none; appearance: none;
}
.bk textarea { min-height: 6em; resize: vertical; line-height: 1.7; }
.bk input:hover, .bk select:hover, .bk textarea:hover { background-color: #EFEFF1; }
.bk input:focus, .bk select:focus, .bk textarea:focus { background-color: #fff; }
.bk input:focus, .bk select:focus, .bk textarea:focus { border-color: var(--bk-ink); box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08); }
.bk input::placeholder, .bk textarea::placeholder { color: #A9A9B0; }
.bk select {
  padding-right: 2.5em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9375em center; background-size: 0.75em;
}
.bk select.is-placeholder { color: #A9A9B0; }
.bk .bk-static { display: flex; align-items: center; min-height: 3em; padding: 0 0.9375em; border-radius: 0.625em; background: var(--bk-soft); font-size: 0.9375em; color: var(--bk-ink); }

/* 日付: 「2026年10月15日」表示（JS が --date-label を入れる） */
.bk input[type="date"].js-date-ph { position: relative; cursor: pointer; }
.bk input[type="date"].js-date-ph::-webkit-datetime-edit { opacity: 0; }
.bk input[type="date"].js-date-ph::before { content: var(--date-label, "- 年 - 月 - 日"); position: absolute; left: 0.9375em; top: 50%; transform: translateY(-50%); color: var(--bk-ink); pointer-events: none; }
.bk input[type="date"].js-date-ph.is-empty::before { color: #A9A9B0; }

/* 選択カード（撮影用途・お支払い方法） */
.bk .bk-choices { display: grid; gap: 0.75em; }
.bk .bk-choices.is-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk .bk-choice { position: relative; display: flex; align-items: flex-start; gap: 0.75em; margin: 0; padding: 1em 1.125em; border: 0; border-radius: var(--bk-radius); background: var(--bk-soft); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.bk .bk-choice:hover { background: #EFEFF1; }
.bk .bk-choice:has(input:checked) { background: #fff; }
.bk .bk-choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--bk-ink); }
.bk .bk-choice input[type="radio"] { flex: none; width: 1.25em; height: 1.25em; margin: 0.125em 0 0; border: 1.5px solid #B4B4BB; border-radius: 50%; background: #fff; -webkit-appearance: none; appearance: none; cursor: pointer; }
.bk .bk-choice input[type="radio"]:checked { border-color: var(--bk-ink); box-shadow: inset 0 0 0 0.25em #fff; background: var(--bk-ink); }
.bk .bk-choice__body { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
.bk .bk-choice__body strong { font-size: 0.9375em; color: var(--bk-ink); }
.bk .bk-choice__body span { font-size: 0.8125em; color: var(--bk-muted); line-height: 1.5; }

/* オプション・機材 */
.bk .bk-items { list-style: none; margin: 0; padding: 0; }
.bk .bk-item { display: flex; align-items: center; justify-content: space-between; gap: 1.25em; padding: 1em 1.125em; border-radius: var(--bk-radius); background: var(--bk-soft); }
.bk .bk-item + .bk-item { margin-top: 0.5em; }
.bk .bk-item__text { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
.bk .bk-item__text strong { font-size: 0.9375em; color: var(--bk-ink); }
.bk .bk-item__text span { font-size: 0.8125em; color: var(--bk-muted); line-height: 1.6; }
.bk .bk-item__desc { white-space: pre-line; }
.bk .bk-item select { width: 11em; flex: none; background-color: #fff; } /* グレーの行の上では白で欄と分かるように */
.bk .bk-toggle { display: inline-flex; flex: none; padding: 0.25em; border-radius: 0.625em; background: #E9E9EC; }
.bk .bk-toggle label { margin: 0; cursor: pointer; }
.bk .bk-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bk .bk-toggle span { display: block; padding: 0.5em 1em; border-radius: 0.5em; font-size: 0.8125em; font-weight: 700; color: var(--bk-muted); white-space: nowrap; transition: background-color .15s, color .15s; }
.bk .bk-toggle input:checked + span { background: #fff; color: var(--bk-ink); box-shadow: 0 0.0625em 0.25em rgba(0, 0, 0, 0.1); }
.bk .bk-toggle input:focus-visible + span { outline: 2px solid var(--bk-ink); }

.bk .bk-help { margin: 0.75em 0 0; font-size: 0.8125em; color: var(--bk-muted); line-height: 1.7; }
.bk .bk-sec__title + .bk-help { margin: -0.5em 0 1.25em; }
.bk .bk-help a { color: var(--bk-ink); text-decoration: underline; }
.bk .bk-avail { margin: 1em 0 0; padding: 0.75em 1em; border-radius: 0.625em; font-size: 0.875em; font-weight: 700; }
.bk .bk-avail.is-ok { background: #FFFCCC; color: #1a1a1a; }
.bk .bk-avail.is-ng { background: #FEF2F2; color: #B91C1C; }
.bk .bk-alert { margin: 1em 0 0; padding: 0.75em 1em; border-radius: 0.625em; background: #FEF2F2; color: var(--bk-danger); font-size: 0.8125em; }

/* ご予約内容（右・追従） */
.bk .bk-aside { position: sticky; top: 6em; }
.bk .bk-summary { padding: 1.5em; border-radius: 1em; background: #fff; box-shadow: 0 0.25em 1.5em rgba(17, 17, 26, 0.08), 0 0 0 1px var(--bk-line); }
.bk .bk-summary__head { margin: 0 0 1em; font-size: 0.9375em; font-weight: 700; color: var(--bk-ink); }
.bk .rsv-sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 0.375em 0; font-size: 0.8125em; }
.bk .rsv-sum-label { color: var(--bk-muted); white-space: nowrap; }
.bk .rsv-sum-value { color: var(--bk-ink); font-weight: 500; text-align: right; }
.bk .bk-summary__lines:not(:empty) { margin: 0.75em 0 0; padding: 0.75em 0 0; border-top: 1px dashed var(--bk-line); }
.bk .bk-summary__total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 1em; margin: 0.875em 0 0; padding: 0.875em 0 0; border-top: 1px solid var(--bk-line); }
.bk .bk-summary__total-label { font-size: 0.8125em; font-weight: 700; color: var(--bk-ink); }
.bk .bk-summary__total-value { font-size: 1.75em; font-weight: 700; color: var(--bk-ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.bk .bk-summary__total-value small { margin-left: 0.125em; font-size: 0.5em; font-weight: 700; }
.bk .bk-summary__tax { grid-column: 1 / -1; justify-self: end; font-size: 0.75em; color: var(--bk-muted); }
.bk .bk-summary__placeholder { margin: 0.875em 0 0; padding: 1em; border-radius: 0.625em; background: var(--bk-soft); font-size: 0.8125em; color: var(--bk-muted); text-align: center; }
.bk .bk-submit { display: block; width: 100%; min-height: 3.25em; margin: 1.25em 0 0; padding: 0.875em 1em; border: 0; border-radius: 0.75em; background: var(--bk-ink); color: #fff; font: inherit; font-size: 1em; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: background-color .15s, transform .15s; }
.bk .bk-submit:hover:not(:disabled) { background: #000; transform: translateY(-1px); }
.bk .bk-submit:disabled { background: #E4E4E7; color: #8E8E95; cursor: not-allowed; }
.bk .bk-summary__cancel { margin: 1.25em 0 0; padding: 1em 1.125em 0.5em; border-radius: 0.75em; background: var(--bk-soft); }
.bk .bk-summary__cancel .rsv-cancel__title { margin: 0 0 0.375em; font-size: 0.75em; font-weight: 700; color: var(--bk-ink); }
.bk .bk-summary__cancel .cancel-fees { margin: 0; }
.bk .bk-summary__agree { margin: 0.875em 0 0; font-size: 0.75em; line-height: 1.7; color: var(--bk-muted); }
.bk .bk-summary__agree a { color: var(--bk-ink); text-decoration: underline; }
.bk .bk-note { margin: 0.75em 0 0; padding: 0.75em 0.875em; border-radius: 0.625em; background: #FFFCCC; font-size: 0.75em; line-height: 1.7; color: #5C4A00; }

/* スマホ下部の料金バー */
#rsv-mobile-badge { display: none; }

@media (max-width: 769px) {
  .bk { padding-bottom: 6em; }
  .bk .bk-head { gap: 0.875em; margin-bottom: 1.5em; }
  .bk .bk-head__thumb { width: 4.5em; height: 3.375em; }
  .single-studio .wrapper main article .single .container .bk .bk-head__title { font-size: 1.25em; }
  .bk .bk-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25em; }
  .bk .bk-kind { display: flex; align-self: stretch; }
  .bk .bk-kind button { flex: 1; padding: 0.625em 0.5em; }
  .bk .bk-main { gap: 2.25em; }
  .bk .bk-grid.is-2, .bk .bk-grid.is-3, .bk .bk-choices.is-cols-2 { grid-template-columns: minmax(0, 1fr); }
  .bk .bk-item { flex-direction: column; align-items: stretch; gap: 0.625em; }
  .bk .bk-item select { width: 100%; }
  .bk .bk-toggle { align-self: flex-start; }
  .bk .bk-aside { position: static; }
  .bk input[type="text"], .bk input[type="email"], .bk input[type="tel"], .bk input[type="date"], .bk select, .bk textarea { font-size: 1em; } /* iOS の自動ズームを防ぐ(16px以上) */
  #rsv-mobile-badge { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; align-items: center; gap: 1em; padding: 0.75em 1em calc(0.75em + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -0.25em 1em rgba(17, 17, 26, 0.1); }
  #rsv-mobile-badge .rsv-mobile-price { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.2; }
  #rsv-mobile-badge .rsv-mobile-label { font-size: 0.6875em; color: #6B6B70; }
  #rsv-mobile-badge .rsv-mobile-price > span:last-child { font-size: 1.375em; font-weight: 700; color: #1A1A1A; font-variant-numeric: tabular-nums; }
  #rsv-mobile-badge .rsv-mobile-price small { margin-left: 0.125em; font-size: 0.55em; }
  #rsv-mobile-badge button { flex: none; padding: 0.875em 1.25em; border: 0; border-radius: 0.75em; background: #1A1A1A; color: #fff; font: inherit; font-size: 0.875em; font-weight: 700; cursor: pointer; white-space: nowrap; }
  #rsv-mobile-badge button:disabled { background: #E4E4E7; color: #8E8E95; cursor: not-allowed; }
}

/* 決済画面・予約完了（2026-10-15） */
.bk .bk-card-form { display: flex; flex-direction: column; gap: 1em; margin-top: 1.25em; }
.bk .bk-card-form .bk-submit { margin-top: 0.25em; }
.bk.bk-done { max-width: 36em; margin: 0 auto; text-align: center; }
.bk .bk-done__mark { display: inline-flex; align-items: center; justify-content: center; width: 3.5em; height: 3.5em; margin: 1em 0 1.25em; border-radius: 50%; background: #1A1A1A; color: #fff; font-size: 1.25em; font-weight: 700; }
.single-studio .wrapper main article .single .container .bk .bk-done__title { margin: 0 0 0.75em; font-size: 1.625em; line-height: 1.4; }
.bk .bk-done__lead { margin: 0 0 1.75em; font-size: 0.9375em; line-height: 1.8; color: var(--bk-muted); }
.bk .bk-done__card { margin: 0 0 1.75em; padding: 1.25em 1.5em; border-radius: 1em; background: var(--bk-soft); text-align: left; }
.bk .bk-done__card div { display: flex; justify-content: space-between; gap: 1em; padding: 0.5em 0; font-size: 0.875em; }
.bk .bk-done__card dt { color: var(--bk-muted); white-space: nowrap; }
.bk .bk-done__card dd { margin: 0; color: var(--bk-ink); font-weight: 500; text-align: right; }
.bk .bk-done__actions { display: flex; flex-direction: column; align-items: center; gap: 1em; }
.bk .bk-done__actions .bk-submit { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.bk .bk-done__sub { font-size: 0.875em; color: var(--bk-ink); text-decoration: underline; }