/* ═══════════════════════════════════════════════════════════
   v3-reserve.css — ご予約フォーム（/reserve）

   ■ 触るときの約束
     送信処理は functions.php の ailea_handle_reserve() が受けています。
     name 属性（name / kana / email / tel / date1〜3 / time1〜3 など）と
     nonce、ハニーポット（.rv-hp の company）は絶対に変えないでください。
     HTMLは元のまま、見た目だけをここで作り直しています。

   ■ v3としての考え方
     フォームだけは、他のページより「枠」を強く出します。
     余白で区切る作法は読みものには効きますが、入力欄では
     「どこに書くのか」が分からなくなるためです。
     ただし囲みは使わず、下線1本で受けます（紙に書く感覚に近づけます）。
   ═══════════════════════════════════════════════════════════ */

body.v3 #reserveApp{
  padding:0 var(--gut) clamp(110px,16vh,200px);
  max-width:var(--maxw); margin:0 auto;
}

/* ─────────── 冒頭 ─────────── */
body.v3 .rv-head{ padding-top:clamp(40px,7vh,86px); max-width:46em; }
body.v3 .rv-eyebrow{ display:block; margin-bottom:clamp(26px,4vh,46px); }
body.v3 .rv-eyebrow .idx,
body.v3 .rv-eyebrow .lab{
  font-family:var(--fl); font-size:10px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-3);
}
body.v3 .rv-eyebrow .idx{ margin-right:14px; }
body.v3 .rv-eyebrow .bar{ display:none; }
body.v3 .rv-head h1,
body.v3 .rv-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 20px;
}
body.v3 .rv-lead{
  font-size:13px; line-height:2.5; letter-spacing:.1em; color:var(--ink-2); margin:0;
}

/* ─────────── フォーム本体 ─────────── */
body.v3 .rv-wrap{ max-width:760px; margin:0; padding-top:clamp(56px,8vh,110px); }
body.v3 .rv-form{ margin:0; }
body.v3 .rv-notice{
  border:0; border-left:1px solid var(--line-link); background:none; border-radius:0;
  padding:4px 0 4px 22px; margin:0 0 clamp(46px,6vh,80px);
  font-size:11.5px; line-height:2.4; letter-spacing:.09em; color:var(--ink-sub);
}
body.v3 .rv-notice strong{ color:var(--ink); font-weight:500; }
body.v3 .rv-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

body.v3 .rv-field{ margin-bottom:clamp(34px,4.6vh,48px); }
body.v3 .rv-row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--colgap);
}
body.v3 .rv-label{
  display:block; margin-bottom:12px;
  font-family:var(--fl); font-size:10.5px; letter-spacing:.18em; color:var(--ink-2);
}
body.v3 .rv-req{
  margin-left:10px; font-size:9px; letter-spacing:.16em; color:var(--ink-sub);
}

/* 入力欄。囲まず、下線1本で受けます */
body.v3 .rv-form input[type="text"],
body.v3 .rv-form input[type="email"],
body.v3 .rv-form input[type="tel"],
body.v3 .rv-form input[type="date"],
body.v3 .rv-form select,
body.v3 .rv-form textarea{
  width:100%; display:block;
  background:none; border:0; border-bottom:1px solid var(--line);
  border-radius:0; padding:10px 2px; margin:0;
  font-family:var(--fb); font-size:14px; letter-spacing:.06em; color:var(--ink);
  transition:border-color .5s var(--ease);
  -webkit-appearance:none; appearance:none;
}
body.v3 .rv-form textarea{ min-height:7em; line-height:2.2; resize:vertical; }
body.v3 .rv-form select{
  /* 自前の三角。appearance を切ると標準の矢印も消えるため */
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 9px) calc(50% + 1px), calc(100% - 4px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:22px;
}
body.v3 .rv-form input:focus,
body.v3 .rv-form select:focus,
body.v3 .rv-form textarea:focus{
  outline:none; border-bottom-color:var(--ink);
}
body.v3 .rv-form input::placeholder,
body.v3 .rv-form textarea::placeholder{ color:var(--ink-3); }

/* ご希望日（3つ） */
body.v3 .rv-dates{ display:grid; gap:clamp(22px,3vh,30px); }
body.v3 .rv-date{
  display:grid; grid-template-columns:5.5em minmax(0,1fr) 7em;
  gap:0 var(--colgap); align-items:end;
}
body.v3 .rv-date-n{
  font-family:var(--fl); font-size:10px; letter-spacing:.16em; color:var(--ink-sub);
  padding-bottom:12px;
}

/* 追加スタイルなどの選択肢 */
/* ■ 説明文との間を必ず空けること（2026-10-05）
     margin-top が無いと、説明文と1つ目の項目の間が実測5.5〜7.5pxになります。
     説明文自身の行間（6.5px）と同じなので、説明が1つ目の項目の一部に見えます。
     見出し→説明が19.5pxなので、ここはそれ以上にして段を分けます。
     ※ margin の値と見た目の間隔は一致しません（上下の行間の半分ずつ入ります）。
       数字を変えるときは文字box間で測り直してください。 */
body.v3 .rv-opts{ display:grid; gap:14px; margin-top:18px; }
body.v3 .rv-opt{
  display:flex; align-items:flex-start; gap:12px;
  font-size:13px; line-height:2.1; letter-spacing:.08em; color:var(--ink);
  cursor:pointer;
}
body.v3 .rv-opt input[type="checkbox"],
body.v3 .rv-opt input[type="radio"],
body.v3 .rv-agree input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:13px; height:13px; margin:.55em 0 0; flex:0 0 auto;
  border:1px solid var(--line-link); background:none; border-radius:0;
  cursor:pointer; position:relative;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
body.v3 .rv-opt input[type="radio"]{ border-radius:50%; }
body.v3 .rv-opt input:checked,
body.v3 .rv-agree input:checked{ background:var(--ink); border-color:var(--ink); }

/* オプションの「何名分」（2026-10-04）。
   お友達同士でお越しになると、全員が同じオプションを希望されるとは限りません。
   チェックの右に数だけ置きます。選んでいない行は薄くして、
   「まずチェック、人数はそのあと」と読める順にしています。 */
body.v3 .rv-opt-row{ display:flex; align-items:flex-start; gap:clamp(14px,2.2vw,26px); }
body.v3 .rv-opt-row .rv-opt{ flex:1 1 auto; }
body.v3 .rv-opt-n{
  flex:0 0 auto; display:flex; align-items:baseline; gap:5px;
  opacity:.38; transition:opacity .45s var(--ease);
}
body.v3 .rv-opt-n[hidden]{ display:none; }
body.v3 .rv-opt-row:has(input:checked) .rv-opt-n{ opacity:1; }
body.v3 .rv-form .rv-opt-n select{
  width:auto; min-width:3.4em; padding:2px 20px 4px 2px;
  font-size:13px;
  background-position:calc(100% - 8px) calc(50% + 1px), calc(100% - 3px) calc(50% + 1px);
}
body.v3 .rv-opt-n .u{
  font-family:var(--fl); font-size:10px; letter-spacing:.14em; color:var(--ink-sub);
}

/* ─────────── 撮影イメージ（2026-10-05） ─────────── */
/* 9項目あるので2列です。1列に積むと、ここだけで画面が1枚ぶん埋まります。
   英字（Natural）が選ぶ手がかり、和文は補足なので、級数と色で差をつけます。 */
body.v3 .rv-moods{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px var(--colgap); margin-top:18px; }
body.v3 .rv-mood{ align-items:flex-start; }
body.v3 .rv-mood-n{
  display:block;
  font-family:var(--fl); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); line-height:1.9;
}
body.v3 .rv-mood-d{
  display:block; margin-top:2px;
  font-size:11.5px; line-height:1.9; letter-spacing:.07em; color:var(--ink-sub);
}
/* 上限に達して押せなくなったもの。消すのではなく沈めます
   （消えると「さっきあった項目が無い」と読まれます）。 */
body.v3 .rv-mood.is-off{ opacity:.35; cursor:default; }
body.v3 .rv-mood.is-off input{ cursor:default; }
@media (max-width:600px){
  body.v3 .rv-moods{ grid-template-columns:minmax(0,1fr); gap:12px; }
}
body.v3 .rv-opt-note{
  display:block; margin-top:4px;
  font-family:var(--fl); font-size:10px; letter-spacing:.14em; color:var(--ink-sub);
}
/* 説明文のすぐ下に入力欄が来る場合も、同じだけ空けます（2026-10-05）。
   「ご質問・ご要望」は実測3.5pxで、説明文がテキスト欄にくっついていました。
   チェックボックスの一覧（.rv-opts / .rv-moods）と同じ18pxに揃えます。 */
body.v3 .rv-opt-note + textarea,
body.v3 .rv-opt-note + input,
body.v3 .rv-opt-note + select{ margin-top:14px; }
body.v3 .rv-note{
  margin-top:12px;
  font-family:var(--fl); font-size:10px; line-height:2.2; letter-spacing:.14em; color:var(--ink-sub);
}

body.v3 .rv-agree{
  display:flex; align-items:flex-start; gap:12px;
  margin:clamp(40px,5.4vh,64px) 0 clamp(34px,4.6vh,48px);
  padding-top:clamp(34px,4.6vh,48px); border-top:1px solid var(--line-f);
  font-size:12.5px; line-height:2.2; letter-spacing:.08em; color:var(--ink-2);
}
body.v3 .rv-agree a{ color:var(--ink); border-bottom:1px solid var(--line-link); text-decoration:none; }
body.v3 .rv-agree a:hover{ border-bottom-color:var(--ink); }

body.v3 .rv-submit{
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  padding:17px 44px; cursor:pointer; font:inherit;
  font-family:var(--fl); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  transition:background .5s var(--ease), color .5s var(--ease);
}
body.v3 .rv-submit:hover{ background:none; color:var(--ink); }

/* 入力の誤り */
body.v3 .rv-errors{
  border:0; border-left:1px solid var(--ink); background:none; border-radius:0;
  padding:6px 0 6px 22px; margin:0 0 clamp(40px,5.4vh,64px);
}
body.v3 .rv-errors-t{
  margin:0 0 10px;
  font-family:var(--fl); font-size:10.5px; letter-spacing:.18em; color:var(--ink);
}
body.v3 .rv-errors ul{ margin:0; padding-left:1.3em; }
body.v3 .rv-errors li{
  font-size:12.5px; line-height:2.2; letter-spacing:.08em; color:var(--ink-2);
}

/* 送信後 */
body.v3 .rv-thanks{ max-width:40em; padding-top:clamp(30px,4vh,50px); }
body.v3 .rv-thanks-mark{
  width:34px; height:34px; border:1px solid var(--line-link); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--ink-3); margin-bottom:clamp(30px,4vh,44px);
}
body.v3 .rv-thanks h2{
  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(26px,3.6vh,38px);
}
body.v3 .rv-thanks-no{
  font-family:var(--fl); font-size:10.5px; letter-spacing:.2em; color:var(--ink-sub);
  margin:0 0 clamp(26px,3.6vh,38px);
}
body.v3 .rv-thanks-no strong{ color:var(--ink); font-weight:500; letter-spacing:.14em; }
body.v3 .rv-thanks p{
  font-size:13px; line-height:2.5; letter-spacing:.09em; color:var(--ink-2); margin:0 0 1.6em;
}
body.v3 .rv-thanks-note{
  font-family:var(--fl); font-size:10px; line-height:2.2; letter-spacing:.14em; color:var(--ink-sub);
}
body.v3 .rv-thanks-note a{ color:var(--ink); border-bottom:1px solid var(--line-link); text-decoration:none; }
body.v3 .rv-home{
  display:inline-block; margin-top:clamp(30px,4vh,44px); position:relative;
  text-decoration:none; padding-bottom:9px;
  font-family:var(--fl); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--line-link);
}
body.v3 .rv-home:hover{ border-bottom-color:var(--ink); }

@media (max-width:900px){
  body.v3 .rv-row{ grid-template-columns:minmax(0,1fr); }
  body.v3 .rv-row .rv-field{ margin-bottom:clamp(34px,6vw,44px); }
  body.v3 .rv-date{ grid-template-columns:4.6em minmax(0,1fr); }
  body.v3 .rv-date select{ grid-column:2; margin-top:12px; }
  body.v3 .rv-submit{ width:100%; padding:18px; }
}

/* ─────────── 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%; }
}