/* ============================================================
   柾風 春岡（MASAKAZE Haruoka）pages-form.css
   reserve.html（ご来館予約）・business.html（法人の方へ）専用のフォーム部品。
   style.css / pages.css のトークン・部品（--ink/--paper/--line/--mute/--bg/
   --fg/--ln/--mt/--font-en/--font-ja/--ease、.page-head/.chapter/.sub-head/
   .prose/.spec-table/.text-link/.meta-line/.cta-band 等）を前提にする。
   pages.css の後に読み込むこと。アクセントカラーは作らない（--ink一色）。
   単位は px 固定幅を作らず rem/em/% を基本にする。
   ============================================================ */

/* ============================================================
   form-notice（?event= 付きで開いた場合のイベント申込み帯。reserve.htmlのみ）
   <div class="form-notice" id="eventNotice" hidden>
     <p class="form-notice__label">Event Entry</p>
     <p class="form-notice__title" id="eventNoticeTitle"></p>
   </div>
   ============================================================ */
.form-notice{
  margin-bottom:clamp(28px,4vw,40px);
  padding:18px 20px;
  border:1px solid var(--line);
}
.form-notice__label{
  font-family:var(--font-en);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
}
.form-notice__title{margin-top:8px;font-size:14px;letter-spacing:.02em;color:var(--fg)}

/* ============================================================
   form-error-banner（送信失敗時の上部エラー。HTMLに常時テキストを置き、
   JSはhidden属性のみ切り替える＝role="alert"の内容変化に頼らない）
   ============================================================ */
.form-error-banner{
  margin-bottom:clamp(28px,4vw,40px);
  padding:16px 20px;
  border:1px solid var(--ink);
  font-size:13px;line-height:1.9;color:var(--fg);
}

/* ============================================================
   form（フォーム全体のラッパー）
   ============================================================ */
.form{max-width:38rem}
.form__row{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,40px)}
.form__row .field{flex:1 1 14rem}

/* ハニーポット（website）。視覚的にも読み上げからも隠す */
.form__honeypot{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}

/* ============================================================
   field（1項目分のラッパー。テキスト系はdiv、チップ系はfieldset）
   <div class="field" data-field="name">
     <label class="field__label" for="f-name">
       <span class="field__label-text">Name ／ お名前</span>
       <span class="field__required">必須</span>
     </label>
     <input class="field__input" id="f-name" name="name" …>
     <p class="field__error" id="f-name-error" role="alert" hidden></p>
   </div>
   ============================================================ */
.field{margin-top:clamp(28px,4vw,40px)}
.field:first-child{margin-top:0}
.field__label{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;padding:0}
.field__label-text{
  font-family:var(--font-en);font-size:12px;letter-spacing:.05em;color:var(--fg);
}
.field__required{
  font-family:var(--font-ja);font-size:10px;letter-spacing:.04em;color:var(--mute);
}
.field__optional{
  font-family:var(--font-ja);font-size:10px;letter-spacing:.04em;color:var(--mute);
}

.field__input{
  display:block;width:100%;padding:10px 2px;
  background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  font-family:var(--font-ja);font-size:14px;color:var(--fg);
  transition:border-color .25s var(--ease);
}
.field__input::placeholder{color:var(--mute)}
.field__input:focus{outline:0;border-bottom-color:var(--ink)}
textarea.field__input{resize:vertical;min-height:6.5em;line-height:1.9}

.field__error{
  margin-top:8px;font-size:11px;letter-spacing:.02em;color:var(--ink);
}

.field.is-invalid .field__input{border-bottom-width:2px;border-bottom-color:var(--ink)}
.field.is-invalid .chip-group{border-bottom-width:2px;border-bottom-color:var(--ink);padding-bottom:12px}

/* fieldsetのデフォルト装飾を消す（.field--chipで使う） */
fieldset.field{border:0;padding:0;min-width:0}
fieldset.field legend.field__label{padding:0}

/* ============================================================
   chip-group / chip（radio・checkboxを枠のみのチップに置き換える）
   <div class="chip-group">
     <label class="chip">
       <input type="radio" name="time" value="10:00" class="chip__input">
       <span class="chip__label">10:00</span>
     </label>
     …
   </div>
   ============================================================ */
.chip-group{
  display:flex;flex-wrap:wrap;gap:10px;
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease);
}
.chip{position:relative;display:inline-flex}
.chip__input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.chip__label{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 18px;border:1px solid var(--line);border-radius:0;
  font-family:var(--font-en);font-size:12px;letter-spacing:.04em;color:var(--fg);
  cursor:pointer;user-select:none;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.chip__input:checked + .chip__label{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip__input:focus-visible + .chip__label{outline:2px solid var(--ink);outline-offset:2px}
.chip__input:disabled + .chip__label{opacity:.4;cursor:not-allowed}

/* ============================================================
   form-actions / submit button（黒塗りピル。cta-band__ctaと同じ見た目）
   ============================================================ */
.form-actions{margin-top:clamp(36px,5vw,52px)}
.form__submit{
  display:inline-flex;align-items:center;justify-content:center;
  padding:18px 44px;border-radius:999px;border:0;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-en);font-size:13px;letter-spacing:.08em;
  cursor:pointer;transition:opacity .25s;
}
.form__submit:hover{opacity:.78}
.form__submit:disabled{opacity:.5;cursor:default}

.form-footnote{margin-top:clamp(28px,4vw,40px)}

/* ============================================================
   form-complete（送信完了ブロック。.page-headと同格の英字見出し）
   <div class="form-complete" id="visitComplete" hidden>
     <p class="form-complete__en">Thank you</p>
     <p class="form-complete__ja">送信しました</p>
     <p class="form-complete__body">…</p>
     <div class="form-complete__links">…</div>
   </div>
   ============================================================ */
.form-complete__en{
  font-family:var(--font-en);font-weight:400;font-size:clamp(2.25rem,5vw,4.5rem);
  letter-spacing:-.03em;line-height:1;color:var(--fg);
}
.form-complete__ja{margin-top:14px;font-family:var(--font-ja);font-size:13px;letter-spacing:.08em;color:var(--mute)}
.form-complete__body{margin-top:clamp(20px,3vw,32px);max-width:34em;font-size:14px;line-height:2.0;color:var(--fg)}
.form-complete__links{display:flex;flex-wrap:wrap;gap:24px;margin-top:clamp(28px,4vw,40px)}

/* ============================================================
   大画面：1800px以上（style.css の html rem拡張に追従）
   ============================================================ */
@media (min-width:1800px){
  .form{max-width:42rem}
  .field__input{font-size:1rem}
  .form-complete__body{max-width:38em;font-size:1rem}
}