/* ReLUMIブランド（LPと同じトーン）: ivory地 × gold差し色 × 明朝見出し。
   色はLP styles.css の :root トークンに合わせる（ink/ivory/gold/gold-deep/gold-wash） */
* { box-sizing: border-box; }
body { font-family: -apple-system, "Hiragino Sans", sans-serif; margin: 0; color: #2a2723; background: #fbf8f2; }
.bookhead { background: linear-gradient(135deg, #b6934d, #957236); color: #fff; padding: 14px 16px; }
.bookhead h1 { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 17px; margin: 0; letter-spacing: 0.04em; }
.booknote { margin: 8px 0 0; font-size: 16px; font-weight: 700; line-height: 1.5; color: #fff; letter-spacing: 0.02em; }
#app { max-width: 520px; margin: 0 auto; padding: 12px 14px 40px; }
.step { background: #fff; border: 1px solid rgba(149, 114, 54, 0.18); border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(76, 58, 31, 0.06); }
.step h2 { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 15px; margin: 0 0 10px; letter-spacing: 0.03em; }
.choices { display: flex; flex-direction: column; gap: 8px; }
/* hidden属性より .choices の display:flex が勝ってしまい、隠したい要素が出続けていた
   （会長指摘 2026-07-28: 美容整体kaiinでスタッフ名が最初から並んでいた）。
   hidden を付けた要素は必ず隠す。ブラウザ既定の display:none は詳細度が低く負けるため明示する */
[hidden] { display: none !important; }
.choices button { text-align: left; padding: 12px; border: 1px solid #ddd5c4; border-radius: 10px; background: #fff; font-size: 15px; cursor: pointer; color: #2a2723; }
.choices button.sel { border-color: #957236; background: #f5ecd8; }
.choices button small { color: #706960; display: block; font-size: 12px; }
#datePick { padding: 10px; font-size: 16px; border: 1px solid #ddd5c4; border-radius: 10px; width: 100%; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.slots button { padding: 10px 0; border: 1px solid #ddd5c4; border-radius: 8px; background: #fff; font-size: 14px; cursor: pointer; }
.slots button.sel { border-color: #957236; background: #f5ecd8; font-weight: 600; }
.slots .none { grid-column: 1 / -1; color: #918a80; font-size: 13px; }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 12px; color: #706960; margin-bottom: 4px; }
.field input, .field textarea { width: 100%; padding: 11px; border: 1px solid #ddd5c4; border-radius: 10px; font-size: 16px; background: #fff; }
.summary { background: #f5ecd8; border-radius: 10px; padding: 12px; font-size: 14px; line-height: 1.7; margin: 12px 0; }
.policynote { color: #706960; font-size: 12px; line-height: 1.6; margin: 0 0 10px; }
button.primary { width: 100%; padding: 14px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #b6934d, #957236); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
button.primary:disabled { opacity: .5; }
.error { color: #dc2626; font-size: 13px; }
.muted { color: #706960; font-size: 13px; }

/* ---- 週間○×グリッド ---- */
.weeknav { display: flex; justify-content: space-between; margin-bottom: 8px; }
.weeknav button { padding: 8px 12px; border: 1px solid #ddd5c4; border-radius: 8px; background: #fff; font-size: 13px; cursor: pointer; }
.weeknav button:disabled { opacity: .35; }
.weekwrap { overflow-x: auto; }
#weekGrid { border-collapse: collapse; width: 100%; min-width: 340px; }
#weekGrid th { font-size: 11px; color: #706960; padding: 4px 2px; text-align: center; font-weight: 600; white-space: nowrap; }
#weekGrid th small { color: #918a80; }
/* 罫線: 行・列を目で追いやすく（2026-07-18会長指示・アプリ版と同トーン） */
#weekGrid td { text-align: center; padding: 2px 1px; border-top: 1px solid #efe6d2; border-left: 1px solid #efe6d2; }
#weekGrid tr + tr th { border-top: 1px solid #efe6d2; }
#weekGrid tr:first-child th { border-bottom: 1.5px solid #e2d6bb; }
#weekGrid button.ok { width: 100%; min-width: 34px; padding: 8px 0; border: 1px solid #ddcda8; border-radius: 6px; background: #faf6ec; color: #957236; font-size: 14px; font-weight: 700; cursor: pointer; }
#weekGrid button.ok.sel { background: #957236; color: #fff; border-color: #957236; }
#weekGrid .ng { color: #d6cfc2; font-size: 13px; }
#weekGrid .none { color: #918a80; font-size: 13px; padding: 12px; }


/* 予約フォーム冒頭の安心ブロック（2026-07-27）。写真＋要点。読ませず目に入れるだけ */
.bookintro { margin: 0 0 14px; }
.bookintro img { width: 100%; height: 168px; object-fit: cover; border-radius: 10px; display: block; }
.bookintro ul { list-style: none; margin: 10px 0 0; padding: 0; }
.bookintro li { position: relative; padding: 0 0 0 20px; margin-bottom: 5px; font-size: 13px; line-height: 1.6; color: #4b4640; }
.bookintro li::before { content: "✓"; position: absolute; left: 2px; color: #b6934d; font-weight: 700; }
.bookintro-addr { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #706960; }
.bookintro-addr a { color: #8f611c; margin-left: 6px; white-space: nowrap; }

/* 冒頭のキャッチ＋一言＋実在の口コミ（転換率改善 2026-07-29）。
   フォーム到達後、実際に見た人でも予約0.88%（GA4実測）。冷たい新規を口説くための販売要素。
   すべて settings 駆動で、未設定の店舗・会員には出ない。口コミは会長が選んだ実文のみを入れる */
.bookintro-catch { margin: 12px 2px 0; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: 0.03em; color: #3a332a; text-align: center; }
.bookintro-subcopy { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.65; color: #6f6659; text-align: center; }
.bookintro-reviews { margin: 12px 0 0; }
.bookintro-reviews-h { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #8f611c; margin-bottom: 7px; }
.bookintro-reviews .rv { margin: 0 0 7px; padding: 9px 11px; background: #faf7f1; border-radius: 10px;
  font-size: 12.5px; line-height: 1.55; color: #3a332a; }
.bookintro-reviews .stars { display: block; font-size: 11px; letter-spacing: 2px; color: #e0a92e; margin-bottom: 2px; }
.bookintro-reviewlink { display: block; margin: 12px 0 0; text-align: center; font-size: 13px; font-weight: 600;
  color: #8f611c; text-decoration: none; border: 1px solid #e0cba2; border-radius: 999px; padding: 10px 14px; background: #fffdf8; }
.bookintro-reviewlink::after { content: " →"; }

/* 予約完了画面の来店場所（2026-07-27） */
.doneplace { margin-top: 14px; padding: 12px 14px; border: 1px solid #e2ddd2; border-radius: 10px; }
.doneplace-h { font-size: 12px; font-weight: 700; color: #706960; margin-bottom: 6px; }
.doneplace p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: #4b4640; }
.doneplace a { display: inline-block; font-size: 13px; color: #8f611c; font-weight: 600; text-decoration: none; border: 1px solid #e0cba2; border-radius: 8px; padding: 7px 12px; }
.bookintro video { width: 100%; height: 168px; object-fit: cover; border-radius: 10px; display: block; background: #efece6; }

/* 冒頭ブロックの写真スライド（会長指示 2026-07-27）。
   動画ファイルを用意しなくても「動いている店内」を出すための、CSSだけのケンバーンズ効果。
   JSは使わない（読み込みを増やさない・確実に動く）。

   ■仕組み（アニメーション2本を別々の周期で回す）
   ・入れ替わり(kbFadeN): 周期 = 2秒 × 枚数。自分の番だけ表示する。枚数ぶんのキーフレームが要る
   ・動き(kbZoomIn/kbPan/kbZoomOut): 周期 = 2秒ちょうど。**枚数に依存しない**。
     入れ替わりの周期が2秒の倍数なので、自分の番が来るたび動きも必ず頭から始まる。
     こうしないと、動きが周期全体に伸びて「見えている2秒はほとんど動かない」ことになる（実測 2026-07-27）
   ・動きは1枚ごとに変える（寄る→横に流れる→引く）。同じ動きの繰り返しより映像らしく見える

   ■切り取り位置
   横長の枠に4:3の写真を入れるので上下が切れる。--focus（top/center/bottom）で店舗ごとに選ぶ。
   枠は 16:10。4:3の写真の縦83%が見える（190px固定=縦67%では切れすぎると会長指摘 2026-07-27）。
   拡大も最大1.05倍まで。寄ると被写体が枠から外れて「見当違いのところ」が映る。 */
.bookintro-kb {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px;
  overflow: hidden; background: #efece6;
  --kb-slide: 2s;   /* 1枚あたりの持ち時間（会長指示「画像は2秒で切り替えて」） */
}
.bookintro-kb img, .bookintro-kb video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center var(--focus, center); opacity: 0;
  animation-iteration-count: infinite, infinite;
  animation-timing-function: linear, ease-in-out;
  /* -0.3s: 開いた瞬間に1枚目がもう映っている状態から始める（0からだと最初の一瞬が空白の箱になる） */
  animation-delay: calc(var(--i) * var(--kb-slide) - 0.3s), calc(var(--i) * var(--kb-slide) - 0.3s);
  animation-duration: var(--kb-cycle), var(--kb-slide);
  will-change: transform, opacity;
}
/* 周期 = 1枚あたりの持ち時間 × 枚数。--n はテンプレートが数値で渡す */
.bookintro-kb > * { --kb-cycle: calc(var(--n) * var(--kb-slide)); }
.bookintro-kb[data-n="2"] > * { --kb-fade: kbFade2; }
.bookintro-kb[data-n="3"] > * { --kb-fade: kbFade3; }
.bookintro-kb[data-n="4"] > * { --kb-fade: kbFade4; }
/* 動画が混ざる店舗は1枚あたりを長くする。2秒では動画が何をしているか読み取れない */
.bookintro-kb[data-video="1"] { --kb-slide: 4s; }
/* 静止画の動きは1枚ごとに変える。3枚1組で 寄る → 横に流れる → 引く。
   動画は自分で動いているので寄りは付けない（二重に動くと酔う） */
.bookintro-kb img:nth-child(3n+1) { --kb-motion: kbZoomIn; }
.bookintro-kb img:nth-child(3n+2) { --kb-motion: kbPan; }
.bookintro-kb img:nth-child(3n+3) { --kb-motion: kbZoomOut; }
.bookintro-kb img { animation-name: var(--kb-fade), var(--kb-motion); }
.bookintro-kb video {
  animation-name: var(--kb-fade);
  animation-duration: var(--kb-cycle);
  animation-timing-function: linear;
}

/* 1枚だけの店舗（ピラティス）は入れ替わりが無いので、ゆっくり寄って戻る往復にする */
.bookintro-kb[data-n="1"] img, .bookintro-kb[data-n="1"] video {
  opacity: 1;
  animation-name: kbSolo; animation-duration: 12s; animation-delay: 0s;
  animation-timing-function: ease-in-out;
}
@keyframes kbSolo {
  0%, 100% { transform: scale(1.00); }
  50%      { transform: scale(1.05); }
}

/* 動き（2秒ちょうど・枚数に依存しない） */
@keyframes kbZoomIn  { from { transform: scale(1.00); }                    to { transform: scale(1.05); } }
@keyframes kbZoomOut { from { transform: scale(1.05); }                    to { transform: scale(1.00); } }
@keyframes kbPan     { from { transform: scale(1.06) translateX(-1.8%); }  to { transform: scale(1.06) translateX(1.8%); } }

/* 入れ替わり（周期=2秒×枚数・前後0.3秒でクロスフェード） */
@keyframes kbFade2 {
  0% { opacity: 0; } 7% { opacity: 1; } 43% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes kbFade3 {
  0% { opacity: 0; } 5% { opacity: 1; } 28% { opacity: 1; } 33.3% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes kbFade4 {
  0% { opacity: 0; } 4% { opacity: 1; } 21% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; }
}
/* 動きが苦手な人（OSの設定）には動かさず1枚目を出す。体調に関わる画面なので必ず用意する */
@media (prefers-reduced-motion: reduce) {
  .bookintro-kb img, .bookintro-kb video { animation: none; opacity: 0; transform: none; }
  .bookintro-kb > *[style*="--i:0"] { opacity: 1; }
}