/* ═══════════════════════════════════════════════════════════
   v3-booking.css — ご予約内容を選ぶ（/booking）

   ■ 触るときの約束
     このページは assets/js/booking.js が動かしています。
     JSが見ているのは「クラス名とid」なので、下のものは改名禁止です。

       #bookingApp / #planGrid / .plan-opt[data-plan]
       #styleGrid-standard / #styleGrid-premium / .opt-card
       #step2 #step2Ttl #step2En #step2Note
       .panel / #panel-kimono #panel-dress #panel-shifuku #panel-premium #panel-concept
       .set-card / #bkResult #bkResultText #lineBtn #formBtn #bkResetBtn
       .sumbar / #chips #chipPlan #chipStyle #chipSet #sumPrice #goBtn
       状態クラス： .sel（選択中） .show（表示） .empty（未選択） .is-hidden

     見た目だけをここで作り直しています。HTMLはほぼ元のままです。

   ■ v3としての考え方
     選択UIなので、ここだけは「押せること」が最優先です。
     他のページのように罫線1本では押し場所が分からないため、
     写真のある選択肢は面で、プランは行で、選択中は細い枠と印で示します。
     ただし色は足しません。選択中＝墨、未選択＝薄墨の濃淡だけで表します。
   ═══════════════════════════════════════════════════════════ */

body.v3 #bookingApp{
  padding:0 var(--gut) clamp(140px,20vh,240px);
  max-width:var(--maxw); margin:0 auto;
}

/* ─────────── 冒頭 ─────────── */
body.v3 .bk-head{ padding-top:clamp(40px,7vh,86px); max-width:52em; }
body.v3 .bk-eyebrow{ display:block; margin-bottom:clamp(26px,4vh,46px); }
body.v3 .bk-eyebrow .idx,
body.v3 .bk-eyebrow .lab{
  font-family:var(--fl); font-size:10px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-3);
}
body.v3 .bk-eyebrow .idx{ margin-right:14px; }
body.v3 .bk-eyebrow .bar{ display:none; }   /* v3では飾りの罫線は置きません */
body.v3 .bk-head h1,
body.v3 .bk-head h2{
  font-family:var(--fe); font-style:italic; font-weight:400;
  font-size:clamp(15px,1.65vw,22px); letter-spacing:.06em;
  line-height:1.75; color:var(--ink-lead); margin:0 0 14px;
}
body.v3 .bk-head .ja{
  font-family:var(--fd); font-weight:500;
  font-size:clamp(17px,1.75vw,25px); line-height:2.35; letter-spacing:.16em;
  color:var(--ink); margin:0 0 clamp(30px,4.6vh,54px);
}
body.v3 .bk-head .lead{
  font-size:13px; line-height:2.5; letter-spacing:.1em; color:var(--ink-2); margin:0;
}

/* ─────────── 段（ステップ） ─────────── */
body.v3 .bk-wrap{ max-width:none; }
body.v3 .step{ padding-top:clamp(70px,11vh,150px); }
body.v3 .step-head{
  display:flex; align-items:baseline; gap:clamp(16px,2.4vw,30px);
  padding-bottom:20px; border-bottom:1px solid var(--line-f);
}
body.v3 .step-no{
  font-family:var(--fe); font-style:italic;
  font-size:clamp(18px,1.9vw,26px); line-height:1; color:var(--ink-3);
}
body.v3 .step-ttl{
  font-family:var(--fd); font-weight:500;
  font-size:clamp(14px,1.3vw,17px); letter-spacing:.16em; color:var(--ink);
}
body.v3 .step-en{
  margin-left:auto;
  font-family:var(--fl); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-3);
}
body.v3 .step-note{
  margin:22px 0 clamp(34px,4.6vh,52px);
  font-size:12.5px; line-height:2.4; letter-spacing:.09em; color:var(--ink-2);
}

/* ─────────── 01 プラン ─────────── */
/* 2枚を囲まず、罫線で分けた行にします（プランのページと同じ扱い）。
   選択中だけ、左に1本の墨線を引いて示します。 */
body.v3 .plan-choose{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--colgap);
  align-items:start;   /* 上と同じ理由。中身の量が違っても上端をそろえます */
}
/* ■ 選択の印は「丸」です
     以前は上の罫線を濃くし、左に縦線を引いていました。
     結果としてL字に見え、「枠が描きかけで壊れている」と読まれました。
     選択UIで図形を半分だけ描いてはいけません。
     いまは予約フォームのラジオと同じ丸にしてあります。
     押して選ぶものだと、形そのものが伝えます。
     ※ 上の罫線は両方とも同じ色です。区切りであって、選択の合図ではありません。 */
body.v3 .plan-opt{
  position:relative; display:block; width:100%; text-align:left;
  background:none; border:0; border-top:1px solid var(--line);
  padding:clamp(26px,3.6vh,36px) 0 clamp(26px,3.6vh,36px) 30px;
  cursor:pointer; font:inherit; color:inherit;
}
body.v3 .plan-opt::before{
  content:''; position:absolute; left:0; top:calc(clamp(26px,3.6vh,36px) + 3px);
  width:11px; height:11px; border-radius:50%;
  border:1px solid var(--line-link); background:none;
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
body.v3 .plan-opt:hover::before{ border-color:var(--ink-sub); }
body.v3 .plan-opt.sel::before{ background:var(--ink); border-color:var(--ink); }
body.v3 .po-badge{
  display:block; margin-bottom:14px;
  font-family:var(--fl); font-size:10px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-3);
  transition:color .45s var(--ease);
}
body.v3 .plan-opt.sel .po-badge{ color:var(--ink); }
body.v3 .po-price{
  display:block; margin-bottom:16px;
  font-family:var(--fe); font-weight:400;
  font-size:clamp(22px,2.4vw,32px); line-height:1.15; color:var(--ink);
}
body.v3 .po-price small{
  display:block; margin-top:8px;
  font-family:var(--fl); font-size:10px; letter-spacing:.18em; color:var(--ink-sub);
}
body.v3 .po-for{
  display:block; margin-bottom:10px;
  font-size:12.5px; line-height:2.2; letter-spacing:.09em; color:var(--ink-2);
}
body.v3 .po-styles{
  display:block;
  font-family:var(--fl); font-size:10px; letter-spacing:.16em;
  line-height:2.1; color:var(--ink-sub);
}
/* ✓ は出しません。左の墨線が選択の印です（印が2つあると迷います） */
body.v3 .po-mark{ display:none; }

/* ─────────── 01 人数（ソロのときだけ出ます） ─────────── */
/* プランのような面は作りません。1〜4の数を選ぶだけなので、
   選択中に1本だけ下線を引きます（v3でリンクの合図に使っている動きと同じです）。
   hidden 属性で出し入れするので、display を書く以上は [hidden] も要ります。 */
body.v3 .cnt-row{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:10px clamp(18px,2.6vw,30px);
  margin-top:clamp(26px,3.4vh,40px);
}
body.v3 .cnt-row[hidden]{ display:none; }
body.v3 .cnt-k{
  font-family:var(--fl); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-3);
}
body.v3 .cnt-opts{ display:flex; gap:clamp(4px,1vw,12px); margin:-9px -11px; }
/* 指で押す面を確保するため、余白は文字の外側に付けています（押せる幅44px前後）。
   下線は padding のぶん内側に戻して、文字の幅に合わせます。 */
body.v3 .cnt-opt{
  position:relative; background:none; border:0; padding:9px 11px;
  font:inherit; font-size:13px; letter-spacing:.1em;
  color:var(--ink-3); cursor:pointer;
  transition:color .45s var(--ease);
}
body.v3 .cnt-opt::after{
  content:''; position:absolute; left:11px; right:11px; bottom:6px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
body.v3 .cnt-opt:hover{ color:var(--ink-2); }
body.v3 .cnt-opt.sel{ color:var(--ink); }
body.v3 .cnt-opt.sel::after{ transform:scaleX(1); }
/* 内訳の一文。2名以上のときだけ中身が入ります（空のときは行を作りません） */
body.v3 .cnt-note{
  flex:1 1 100%; margin:0;
  font-size:12.5px; line-height:2.4; letter-spacing:.09em; color:var(--ink-2);
}
body.v3 .cnt-note:empty{ display:none; }

/* ─────────── 02・03 写真の選択肢 ─────────── */
body.v3 .style-grid,
body.v3 .set-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(26px,3.4vw,44px) var(--colgap);
  /* align-items:start は必須です。
     既定（stretch）だと、格子が全カードを同じ高さに引き伸ばします。
     選択肢は <button> なので、引き伸ばされた分だけ中身が
     ブラウザによって縦中央へ寄せられ、説明が1行だけ短いカードが
     ひとつだけ下にずれます（1200px幅で12pxずれました）。
     写真の上端をそろえるのは、ここの1行です。 */
  align-items:start;
}
body.v3 .set-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
body.v3 .opt-card,
body.v3 .set-card{
  position:relative; display:block; width:100%; text-align:left;
  background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit;
}
/* ■ 枠の比は素材に合わせること
     スタイルの写真は 1122×1402＝0.800（4:5）、
     撮影セットの写真は 640×396＝1.616（16:10 の横長）です。
     ここを 3/4 にしていたため、スタイルは上下が3.3%ずつ切れ、
     セットは横を54%も捨てて縦長の帯になっていました。
     素材を入れ替えるときは、比もここで合わせてください。 */
body.v3 .oc-img,
body.v3 .sc-img{
  display:block; width:100%;
  background-size:cover; background-position:center;
  margin-bottom:16px; position:relative;
  transition:opacity .6s var(--ease);
}
body.v3 .oc-img{ aspect-ratio:4 / 5; }    /* 人物：縦 */
body.v3 .sc-img{ aspect-ratio:16 / 10; }  /* セット：横 */
/* 選択されていないものは、わずかに退かせます。
   選んだものが「前に出る」ように見えるので、✓ だけより分かりやすい。 */
body.v3 .style-grid .opt-card .oc-img,
body.v3 .set-grid .set-card .sc-img{ opacity:.78; }
body.v3 .opt-card:hover .oc-img,
body.v3 .set-card:hover .sc-img,
body.v3 .opt-card.sel .oc-img,
body.v3 .set-card.sel .sc-img{ opacity:1; }
/* 選択中は紙を1本はさんだ墨の枠。写真の上に線を乗せません */
body.v3 .opt-card.sel .oc-img::after,
body.v3 .set-card.sel .sc-img::after{
  content:''; position:absolute; inset:-7px;
  border:1px solid var(--ink); pointer-events:none;
}
body.v3 .oc-en,
body.v3 .sc-en{
  display:block; margin-bottom:8px;
  font-family:var(--fl); font-size:9.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3);
}
body.v3 .oc-ja,
body.v3 .sc-name{
  display:block; margin-bottom:10px;
  font-family:var(--fd); font-weight:500;
  font-size:13px; line-height:1.9; letter-spacing:.14em; color:var(--ink);
}
/* コンセプトの型番を見出しに置く場合。明朝のままだと数字と英字の幅が
   揃わず記号に見えないので、ラベル用の書体と広い字間に替えます
   （/style/concept/ の .s-card-name.is-code と同じ扱い）。 */
body.v3 .sc-name.is-code{
  font-family:var(--fl); letter-spacing:.22em; text-transform:uppercase;
}
body.v3 .oc-desc,
body.v3 .sc-mood{
  display:block;
  font-size:11.5px; line-height:2.1; letter-spacing:.08em; color:var(--ink-sub);
}
body.v3 .oc-mark,
body.v3 .sc-mark{ display:none; }
body.v3 .set-group-label{
  display:block; margin-bottom:clamp(24px,3.2vh,34px);
  font-family:var(--fl); font-size:10px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-3);
}
body.v3 .set-group-label span{ display:none; }

body.v3 .panel{ display:none; }
body.v3 .panel.show{ display:block; animation:bk-in .9s var(--ease-slow) both; }
@keyframes bk-in{ from{ opacity:0; transform:translate3d(0,14px,0); } to{ opacity:1; transform:none; } }

/* ─────────── 結果 ─────────── */
body.v3 .bk-result{ display:none; }
body.v3 .bk-result.show{
  display:block; animation:bk-in .9s var(--ease-slow) both;
  margin-top:clamp(70px,11vh,150px);
  padding-top:clamp(44px,6vh,76px); border-top:1px solid var(--line);
  max-width:46em;
}
body.v3 .bk-result h3{
  font-family:var(--fd); font-weight:500;
  font-size:clamp(15px,1.4vw,19px); letter-spacing:.16em; color:var(--ink); margin:0 0 14px;
}
body.v3 .r-sub{ font-size:12.5px; line-height:2.3; letter-spacing:.09em; color:var(--ink-2); margin:0 0 26px; }
body.v3 #bkResultText{
  margin:0 0 clamp(30px,4vh,42px); padding:24px 0;
  border-top:1px solid var(--line-f); border-bottom:1px solid var(--line-f);
  background:none; font-family:var(--fb);
  font-size:12.5px; line-height:2.4; letter-spacing:.08em; color:var(--ink);
  white-space:pre-wrap;
}
body.v3 .r-btns{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(22px,3vw,40px); }
/* リンクはサイト共通の作法（薄い下線 → ホバーで墨の下線） */
body.v3 .r-btn,
body.v3 .bk-reset{
  position:relative; display:inline-block; text-decoration:none;
  background:none; border:0; padding:0 0 9px; cursor:pointer; font:inherit;
  font-family:var(--fl); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink);
}
body.v3 .bk-reset{ color:var(--ink-3); }
body.v3 .r-btn::before, body.v3 .r-btn::after,
body.v3 .bk-reset::before, body.v3 .bk-reset::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
}
body.v3 .r-btn::before, body.v3 .bk-reset::before{ background:var(--line-link); }
body.v3 .r-btn::after, body.v3 .bk-reset::after{
  background:var(--ink); transform:scaleX(0); transform-origin:right center;
  transition:transform .7s var(--ease);
}
body.v3 .r-btn:hover::after,
body.v3 .bk-reset:hover::after{ transform:scaleX(1); transform-origin:left center; }
body.v3 .r-note{
  margin-top:clamp(26px,3.4vh,36px);
  font-family:var(--fl); font-size:10px; letter-spacing:.16em; line-height:2.2; color:var(--ink-sub);
}

/* ─────────── 下の確認バー ─────────── */
/* 画面下に貼りつく唯一の面です。紙色で塗り、上に罫線1本だけ。
   影は落としません（このサイトに影は1つもありません）。 */
body.v3 .sumbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(var(--paper-rgb),.94); backdrop-filter:blur(10px) saturate(1.05);
  border-top:1px solid var(--line); box-shadow:none;
}
body.v3 .sumbar.is-hidden{ display:none; }
body.v3 .sumbar-in{
  max-width:none; margin:0; padding:16px var(--gut);
  display:flex; align-items:center; gap:clamp(18px,3vw,40px);
}
body.v3 .sum-chips{ display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,28px); }
body.v3 .chip{ display:flex; align-items:baseline; gap:8px; }
body.v3 .chip .ck{
  font-family:var(--fl); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-sub);
}
body.v3 .chip b{ font-weight:400; font-size:12px; letter-spacing:.09em; color:var(--ink); }
body.v3 .chip.empty b{ color:var(--ink-3); }
body.v3 .sum-cta{ margin-left:auto; display:flex; align-items:center; gap:clamp(18px,2.6vw,34px); }
body.v3 .sum-price{
  font-family:var(--fe); font-weight:400; font-size:clamp(15px,1.4vw,19px); color:var(--ink);
}
body.v3 .sum-price small{
  font-family:var(--fl); font-size:9.5px; letter-spacing:.14em; color:var(--ink-sub); margin-left:6px;
}
body.v3 .btn-go{
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  padding:13px 26px; cursor:pointer; font:inherit;
  font-family:var(--fl); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
body.v3 .btn-go:hover:not(:disabled){ background:none; color:var(--ink); }
body.v3 .btn-go:disabled{
  background:none; color:var(--ink-3); border-color:var(--line); cursor:default;
}

/* ─────────── 狭い画面 ─────────── */
@media (max-width:900px){
  body.v3 .plan-choose{ grid-template-columns:minmax(0,1fr); }
  body.v3 .style-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.v3 .set-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.v3 .step-head{ flex-wrap:wrap; gap:10px 16px; }
  body.v3 .step-en{ margin-left:0; width:100%; }
  /* 確認バーは2行に収めます。
     価格を大きいままにすると「（税込…）」が折り返し、
     ボタンの文字も折れて、バーだけで画面の1/4を占めていました。 */
  body.v3 .sumbar-in{ flex-wrap:wrap; gap:10px; padding:12px var(--gut); }
  body.v3 .sum-chips{ width:100%; gap:14px; }
  body.v3 .sum-cta{ margin-left:0; width:100%; justify-content:space-between; gap:12px; }
  body.v3 .sum-price{ font-size:15px; white-space:nowrap; }
  body.v3 .sum-price small{ margin-left:4px; letter-spacing:.1em; }
  body.v3 .btn-go{
    padding:12px 14px; font-size:9.5px; letter-spacing:.14em; white-space:nowrap;
  }
  /* 指で触る画面は、選択肢が薄いままだと押せるか分かりません */
  body.v3 .style-grid .opt-card .oc-img,
  body.v3 .set-grid .set-card .sc-img{ opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  body.v3 .panel.show,
  body.v3 .bk-result.show{ animation:none !important; }
}

/* ─────────── 20. 開催中のキャンペーン（1行のお知らせ） ─────────── */
/* 予約フォームと予約の選択画面に出ます。
   面も画像も持たせません。入力の途中に「宣伝の塊」が挟まると、
   読む対象が増えて手が止まります。
   ラベル・名前・期限の3つを1行に置くだけにしてあります。
   ※ v3-reserve.css / v3-booking.css の両方から参照されるので、
     ここ（共通）に置いています。読み込み順はどちらでも効きます。 */
body.v3 .cmp-note{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
  padding:14px 0 15px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:0 0 clamp(40px,5.4vh,64px);
}
body.v3 .cmp-note-l{
  font-family:var(--fl); font-size:9.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3);
}
body.v3 .cmp-note-t{
  font-size:12.5px; letter-spacing:.09em; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line-link);
  transition:border-color .5s var(--ease);
}
body.v3 .cmp-note-t:hover{ border-bottom-color:var(--ink); }
body.v3 .cmp-note-d{
  margin-left:auto;
  font-family:var(--fl); font-size:10px; letter-spacing:.16em; color:var(--ink-sub);
}
@media (hover: none){
  body.v3 .cmp-note-t{ border-bottom-color:var(--ink-3); }
}
@media (max-width:900px){
  body.v3 .cmp-note-d{ margin-left:0; width:100%; }
}