@charset "UTF-8";

/*
 * Form pages (reservation / contact) — 来店予約体裁を流用
 * お問い合わせは項目差分のみ（CF7 HTML）。余白・幅はスクショ近似（⏳ 微調整可）
 */

.p-form {
  --form-accent: #91714c;
  --form-input-bg: #EFEFEF;
  --form-req: #91714c;
  --form-dot: min(10px, calc(10 / var(--pc-artboard-w) * 100vw));
  --form-placeholder: #727171;
  --form-col: min(1045px, calc(1045 / var(--pc-artboard-w) * 100vw));
  --form-label-track: minmax(0, 300fr);
  --form-field-track: minmax(0, 745fr);
  --form-side-gutter: min(50px, calc(50 / var(--pc-artboard-w) * 100vw));
  /* 左右余白は __inner の width で確保（1045 未満のみ）。白線は actions::before */
  /* PC: 1920 基準。拡大・狭幅時は vw で縮む（SP max-width:900 は別） */
  padding: min(300px, calc(300 / var(--pc-artboard-w) * 100vw)) 0 min(50px, calc(50 / var(--pc-artboard-w) * 100vw));
}

.p-form__inner {
  box-sizing: border-box;
  /* 1045 以上: 1045 固定 / 未満: 左右 50px を残して縮む */
  width: min(var(--form-col), calc(100% - var(--form-side-gutter) * 2));
  margin-inline: auto;
  padding-inline: 0;
}

.p-form__inner--complete {
  width: min(
    800px,
    calc(800 / var(--pc-artboard-w) * 100vw),
    calc(100% - var(--form-side-gutter) * 2)
  );
  text-align: center;
}

.p-form__header {
  margin-bottom: 0;
  text-align: center;
}

.p-form__header--complete {
  margin-bottom: 0;
}

.p-form__title {
  margin: 0 0 min(80px, calc(80 / var(--pc-artboard-w) * 100vw));
  color: #000;
  font-family: var(--font-en);
  font-size: min(55px, calc(55 / var(--pc-artboard-w) * 100vw));
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: lowercase;
}

.p-form__lead {
  margin: 0 0 min(30px, calc(30 / var(--pc-artboard-w) * 100vw));
  color: #000;
  font-family: var(--font-sans);
  font-size: min(18px, calc(18 / var(--pc-artboard-w) * 100vw));
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.67;
}

.p-form__required-note {
  margin: 0 0 min(96px, calc(96 / var(--pc-artboard-w) * 100vw));
  color: #000;
  font-family: var(--font-sans);
  font-size: min(18px, calc(18 / var(--pc-artboard-w) * 100vw));
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1;
}

.p-form__req {
  color: var(--form-req);
  font-family: var(--font-sans);
}

/* 必須 * の直前に半角スペース */
.p-form .p-form__label .p-form__req::before {
  content: " ";
}

.p-form__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #fff;
}

.p-form__complete-message {
  margin: 0;
  color: #000;
  font-family: var(--font-sans);
  font-size: min(18px, calc(18 / var(--pc-artboard-w) * 100vw));
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.67;
}

.p-form__body {
  margin-top: 0;
  padding-top: min(96px, calc(96 / var(--pc-artboard-w) * 100vw));
}

.p-form__breadcrumb {
  box-sizing: border-box;
  width: 100%;
  /* 15 基準。margin-top は em 追従（拡大時にパンくず〜フッタ間だけ開くのを防ぐ） */
  font-size: min(15px, calc(15 / var(--pc-artboard-w) * 100vw));
  margin-top: calc(100 / 15 * 1em);
  padding-inline: min(50px, calc(50 / var(--pc-artboard-w) * 100vw));
  color: #000;
  font-weight: 300;
  letter-spacing: 0.015em;
  line-height: 1;
  text-align: left;
}

.p-form__breadcrumb-link {
  color: #727171;
  font-family: var(--font-inter);
  font-weight: 300;
}

.p-form__breadcrumb-sep {
  font-family: var(--font-sans);
  font-weight: 500;
}

.p-form__breadcrumb-current {
  font-family: var(--font-inter);
  font-weight: 300;
}

.p-form--complete .p-form__breadcrumb {
  margin-top: calc(200 / 15 * 1em);
}

/* CF7 layout
 * -------------------------------------------------------------- */
.p-form .wpcf7 {
  margin: 0;
}

.p-form .wpcf7-form {
  display: grid;
  gap: min(70px, calc(70 / var(--pc-artboard-w) * 100vw));
}

.p-form .p-form__row {
  display: grid;
  /* 300:745 比率で縮む（固定 px 禁止。768〜1045 帯のあふれ防止） */
  grid-template-columns: var(--form-label-track) var(--form-field-track);
  column-gap: 0;
  /* エラー文言が出てもラベルが下がらないよう上揃え。
     ラベルは padding-top で入力（h70）の上下中央に合わせる */
  align-items: start;
}

.p-form .p-form__row:has(textarea),
.p-form .p-form__row:has(.wpcf7-checkbox) {
  align-items: start;
}

.p-form .p-form__label {
  margin: 0;
  padding-top: min(26px, calc(26 / var(--pc-artboard-w) * 100vw)); /* (70px - 18px) / 2 … 入力ボックス中央 */
  color: #000;
  font-family: var(--font-sans);
  font-size: min(18px, calc(18 / var(--pc-artboard-w) * 100vw));
  font-weight: normal;
  letter-spacing: 0.015em;
  line-height: 1;
}

.p-form .p-form__label-note {
  display: block;
  margin-top: min(8px, calc(8 / var(--pc-artboard-w) * 100vw));
  font-family: var(--font-sans);
  font-size: min(18px, calc(18 / var(--pc-artboard-w) * 100vw)); /* ラベル本体と同サイズ */
  font-weight: normal;
  letter-spacing: 0.015em;
  line-height: 1;
}

/* きっかけ: PC は2行（タイトル* / 注記）、SP は1行 */
.p-form .p-form__label--with-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0;
  row-gap: min(8px, calc(8 / var(--pc-artboard-w) * 100vw));
}

.p-form .p-form__label--with-note .p-form__label-main {
  order: 1;
}

.p-form .p-form__label--with-note .p-form__req {
  order: 2;
}

.p-form .p-form__label--with-note .p-form__label-note {
  order: 3;
  flex: 0 0 100%;
  margin-top: 0;
}

.p-form .p-form__row:has(textarea) .p-form__label,
.p-form .p-form__row:has(.wpcf7-checkbox) .p-form__label {
  padding-top: 0;
}

/* textarea の padding-top に合わせてラベルを placeholder 行に揃える */
.p-form .p-form__row:has(textarea) .p-form__label {
  padding-top: min(24px, calc(24 / var(--pc-artboard-w) * 100vw));
}

/* 同意事項: ラベルは左カラム幅を超えて1行（改行しない）+ gap 70 + 右にリンク／同意 */
.p-form .p-form__row--privacy {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: min(70px, calc(70 / var(--pc-artboard-w) * 100vw));
}

.p-form .p-form__row--privacy .p-form__label {
  flex: 0 0 auto;
  padding-top: 0;
  white-space: nowrap;
}

.p-form .p-form__controls--privacy {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  /* ポリシー文言・同意の基準（18）。margin は em 追従 */
  font-size: min(18px, calc(18 / var(--pc-artboard-w) * 100vw));
}

.p-form .p-form__privacy-text {
  margin: 0 0 calc(26 / 18 * 1em);
  color: #000;
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: normal;
  letter-spacing: 0.015em;
  line-height: 1;
}

.p-form .p-form__privacy-text a {
  color: inherit;
  /* 下線アニメは components.css（`.c-link` / privacy-text a） */
}

.p-form .p-form__controls {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* 第一・第二希望: 日付 + 時間帯を1行で横並び（基準 360 + 25 + 360 = 745）
 * CF7 autop で <p> に包まれても横並びにするため、直下の子を対象にする
 * align-items: start … 片方だけ tip が出ても入力枠の高さを揃える */
.p-form .p-form__controls--pair {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: min(25px, calc(25 / var(--pc-artboard-w) * 100vw));
}

.p-form .p-form__controls--pair > * {
  box-sizing: border-box;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.p-form .p-form__controls--pair .wpcf7-form-control-wrap,
.p-form .p-form__controls--pair .p-form__date-wrap {
  display: block;
  width: 100%;
}

/* お名前〜その他ご質問など: 入力幅はフィールド列の 600/745（希望日ペア・同意は除外） */
.p-form .p-form__controls:not(.p-form__controls--pair):not(.p-form__controls--privacy) {
  width: calc(600 / 745 * 100%);
  max-width: 100%;
}

.p-form .p-form__controls:not(.p-form__controls--pair):not(.p-form__controls--privacy)
  > .wpcf7-form-control-wrap,
.p-form .p-form__controls:not(.p-form__controls--pair):not(.p-form__controls--privacy)
  > input,
.p-form .p-form__controls:not(.p-form__controls--pair):not(.p-form__controls--privacy)
  > select,
.p-form .p-form__controls:not(.p-form__controls--pair):not(.p-form__controls--privacy)
  > textarea {
  width: 100%;
  max-width: 100%;
}

.p-form .p-form__hint {
  margin: min(8px, calc(8 / var(--pc-artboard-w) * 100vw)) 0 0;
  color: #727171;
  font-size: min(12px, calc(12 / var(--pc-artboard-w) * 100vw));
  letter-spacing: 0.015em;
  line-height: 1.5;
}

.p-form input[type="text"],
.p-form input[type="email"],
.p-form input[type="tel"],
.p-form input[type="date"],
.p-form .p-form__date-wrap input,
.p-form select {
  box-sizing: border-box;
  width: 100%;
  height: min(70px, calc(70 / var(--pc-artboard-w) * 100vw));
  margin: 0;
  padding: 0 min(48px, calc(48 / var(--pc-artboard-w) * 100vw)) 0 min(30px, calc(30 / var(--pc-artboard-w) * 100vw));
  border: none;
  border-radius: min(10px, calc(10 / var(--pc-artboard-w) * 100vw));
  background-color: var(--form-input-bg);
  color: #000;
  font-family: var(--font-sans);
  font-size: min(18px, calc(18 / var(--pc-artboard-w) * 100vw));
  font-weight: normal;
  letter-spacing: 0.015em;
  line-height: 1;
  appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.p-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: min(200px, calc(200 / var(--pc-artboard-w) * 100vw));
  margin: 0;
  padding: min(24px, calc(24 / var(--pc-artboard-w) * 100vw)) min(30px, calc(30 / var(--pc-artboard-w) * 100vw));
  border: none;
  border-radius: min(10px, calc(10 / var(--pc-artboard-w) * 100vw));
  background-color: var(--form-input-bg);
  color: #000;
  font-family: var(--font-sans);
  font-size: min(18px, calc(18 / var(--pc-artboard-w) * 100vw));
  font-weight: normal;
  letter-spacing: 0.015em;
  line-height: 1.67;
  resize: vertical;
  appearance: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.p-form input:focus,
.p-form input:focus-visible,
.p-form select:focus,
.p-form select:focus-visible,
.p-form textarea:focus,
.p-form textarea:focus-visible,
.p-form .wpcf7-list-item input:focus,
.p-form .wpcf7-list-item input:focus-visible,
.p-form .wpcf7-acceptance input:focus,
.p-form .wpcf7-acceptance input:focus-visible,
.p-form .wpcf7-submit:focus,
.p-form .wpcf7-submit:focus-visible {
  outline: none;
  box-shadow: none;
}

.p-form input::placeholder,
.p-form textarea::placeholder {
  color: var(--form-placeholder);
}

/* Select / date: #EFEFEF box + accent ● */
.p-form select,
.p-form input[type="date"],
.p-form .p-form__date-wrap input {
  position: relative;
  background-image: radial-gradient(
    circle closest-side,
    var(--form-accent) 0 100%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-position: right min(30px, calc(30 / var(--pc-artboard-w) * 100vw)) center;
  background-size: var(--form-dot) var(--form-dot);
  cursor: pointer;
}

.p-form select:required:invalid,
.p-form select.is-placeholder {
  color: var(--form-placeholder);
}

.p-form select:not(.is-placeholder):not(:required:invalid) {
  color: #000;
}

.p-form select option {
  color: #000;
}

.p-form__date-wrap {
  position: relative;
  width: 100%;
}

.p-form__date-wrap.is-empty::before {
  position: absolute;
  top: 50%;
  left: min(30px, calc(30 / var(--pc-artboard-w) * 100vw));
  z-index: 1;
  color: var(--form-placeholder);
  font-family: var(--font-sans);
  font-size: min(18px, calc(18 / var(--pc-artboard-w) * 100vw));
  font-weight: normal;
  letter-spacing: 0.015em;
  line-height: 1;
  content: attr(data-placeholder);
  transform: translateY(-50%);
  pointer-events: none;
}

.p-form__date-wrap.is-empty input[type="date"],
.p-form__date-wrap.is-empty input {
  color: transparent;
}

.p-form input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* iOS/WebKit: 選択後の日付が中央寄せになるのを左寄せに揃える */
.p-form input[type="date"],
.p-form .p-form__date-wrap input {
  text-align: left;
}

.p-form input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

.p-form input[type="date"]::-webkit-datetime-edit {
  width: 100%;
  padding: 0;
  text-align: left;
}

.p-form input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.p-form .wpcf7-checkbox,
.p-form .wpcf7-acceptance {
  /* ラベル 18 基準。行間・●・横余白は em 追従 */
  font-size: min(18px, calc(18 / var(--pc-artboard-w) * 100vw));
}

.p-form .wpcf7-list-item {
  margin: 0 calc(40 / 18 * 1em) 0 0;
}

.p-form .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0;
  row-gap: calc(20 / 18 * 1em);
  max-width: 100%;
}

/* 同意チェックは下余白なし */
.p-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.p-form .wpcf7-acceptance {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.p-form .wpcf7-list-item label,
.p-form .wpcf7-acceptance label {
  display: inline-flex;
  align-items: center;
  gap: calc(14 / 18 * 1em);
  color: #000;
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 300;
  letter-spacing: 0.015em;
  line-height: 1;
  cursor: pointer;
}

/* きっかけ: 未選択=白● / 選択=茶●（スクショ準拠） */
.p-form .wpcf7-list-item input[type="checkbox"],
.p-form .wpcf7-acceptance input[type="checkbox"] {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin: 0;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  appearance: none;
  cursor: pointer;
}

.p-form .wpcf7-list-item input[type="checkbox"]:checked,
.p-form .wpcf7-acceptance input[type="checkbox"]:checked {
  border: none;
  background-color: var(--form-accent);
  box-shadow: none;
}

.p-form .p-form__actions {
  /* コンテナはフォーム幅（最大 1045）。白線だけ ::before でビューポート全幅
   * 基準 font-size=送信ボタン 18。余白・ボタン寸法は em 追従（拡大時に隙間だけ開くのを防ぐ）
   * form gap 70 差し引きで線上 100 相当 → margin-top 30/18 em */
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  font-size: min(18px, calc(18 / var(--pc-artboard-w) * 100vw));
  margin-top: calc(30 / 18 * 1em);
  margin-right: 0;
  margin-left: 0;
  padding-top: calc(100 / 18 * 1em);
  border-top: none;
}

.p-form .p-form__actions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  border-top: 1px solid #fff;
  transform: translateX(-50%);
  pointer-events: none;
}

/* CF7 送信スピナー: 非表示（visibility:hidden でも 24px を占有するため display で外す） */
.p-form .wpcf7-spinner {
  display: none;
}

.p-form .wpcf7-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 / 18 * 1em);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: calc(120 / 18 * 1em);
  padding: 0 calc(32 / 18 * 1em);
  border: min(1px, calc(1 / var(--pc-artboard-w) * 100vw)) solid #000;
  border-radius: calc(10 / 18 * 1em);
  background-color: transparent;
  color: #000;
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.4s ease;
}

.p-form .p-form__submit-label {
  display: inline-block;
}

.p-form .p-form__submit-arrow {
  flex-shrink: 0;
  width: calc(10 / 18 * 1em);
  height: calc(8 / 18 * 1em);
}

/* reCAPTCHA バッジ非表示時の必須表記（Google FAQ） */
.p-form .p-form__recaptcha-note {
  margin: calc(32 / 18 * 1em) 0 0;
  color: #2b2926;
  font-family: var(--font-sans);
  font-size: calc(12 / 18 * 1em);
  font-weight: 300;
  letter-spacing: 0.015em;
  line-height: 1.6;
  text-align: center;
}

.p-form .p-form__recaptcha-link {
  color: inherit;
  /* 下線アニメは components.css `.c-link` */
}

/* 必須＋同意充足時のみ通常カーソル / 白背景 hover */
.p-form .wpcf7-submit.is-ready {
  cursor: pointer;
}

.p-form .wpcf7-submit.is-ready:hover {
  background-color: #fff;
}

/* 未充足（必須 or 同意不足）: 禁止カーソル（reservation / contact 共通） */
.p-form .wpcf7-submit:disabled,
.p-form .wpcf7-submit:not(.is-ready) {
  cursor: not-allowed;
  opacity: 1;
}

/* CF7 styles.css は `.wpcf7 form .wpcf7-response-output`（0,2,1）のため、
 * 同型の form 要素付きセレクタで勝たせる（`.wpcf7form` はクラス名として存在しない） */
.p-form .wpcf7 form .wpcf7-response-output,
.p-form .wpcf7-form .wpcf7-response-output {
  margin: min(8px, calc(8 / var(--pc-artboard-w) * 100vw)) 0 0;
  padding: 0;
  border: none;
  font-size: min(13px, calc(13 / var(--pc-artboard-w) * 100vw));
  letter-spacing: 0.015em;
}

/* 送信成功時は完了ページへリダイレクトするため、緑枠メッセージは出さない */
.p-form .wpcf7 form.sent .wpcf7-response-output,
.p-form .wpcf7-form.sent .wpcf7-response-output {
  display: none !important;
}

.p-form .wpcf7 form.invalid .wpcf7-response-output,
.p-form .wpcf7 form.unaccepted .wpcf7-response-output,
.p-form .wpcf7 form.payment-required .wpcf7-response-output,
.p-form .wpcf7 form.spam .wpcf7-response-output,
.p-form .wpcf7 form.aborted .wpcf7-response-output,
.p-form .wpcf7 form.failed .wpcf7-response-output,
.p-form .wpcf7-form.invalid .wpcf7-response-output,
.p-form .wpcf7-form.unaccepted .wpcf7-response-output,
.p-form .wpcf7-form.payment-required .wpcf7-response-output,
.p-form .wpcf7-form.spam .wpcf7-response-output,
.p-form .wpcf7-form.aborted .wpcf7-response-output,
.p-form .wpcf7-form.failed .wpcf7-response-output {
  border: none;
}

/* バリデーション注意書きは入力枠の外へ absolute（行間にも影響させない）
 * CF7 floating tip（.use-floating-validation-tip の top: -2ex）を打ち消す */
.p-form .wpcf7-form-control-wrap {
  position: relative;
  display: block;
}

.p-form .wpcf7-not-valid-tip,
.p-form .use-floating-validation-tip .wpcf7-not-valid-tip,
.p-form.use-floating-validation-tip .wpcf7-not-valid-tip,
.p-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  position: absolute;
  top: 100%;
  right: auto;
  bottom: auto;
  left: 0;
  z-index: 3;
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  margin: min(6px, calc(6 / var(--pc-artboard-w) * 100vw)) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dc3232;
  font-size: min(13px, calc(13 / var(--pc-artboard-w) * 100vw));
  font-weight: normal;
  letter-spacing: 0.015em;
  line-height: 1.4;
  white-space: nowrap;
  transform: none;
}

/* 定休日メモも tip 同様、入力枠の外へ absolute */
.p-form .c-form-note {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  margin: min(6px, calc(6 / var(--pc-artboard-w) * 100vw)) 0 0;
  color: #91714c;
  font-size: min(13px, calc(13 / var(--pc-artboard-w) * 100vw));
  letter-spacing: 0.015em;
  line-height: 1.4;
}

.p-form .c-form-note.is-visible {
  display: block;
}

/* Form footer (input: info only / complete: banners + info)
 * -------------------------------------------------------------- */
.l-form-footer {
  --footer-divider: 1.5px solid #fff;
  --footer-easing: cubic-bezier(0.215, 0.61, 0.355, 1);
  --footer-duration: 0.8s;
  background-color: var(--color-bg);
}

.l-form-footer__banners-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, min(180px, calc(180 / var(--pc-artboard-w) * 100vw)));
  border-top: var(--footer-divider);
  border-bottom: var(--footer-divider);
}

/* TOPフッタ同様: 右列に縦仕切り、下段に横仕切り */
.l-form-footer__banners-pc > :nth-child(2n) {
  border-left: var(--footer-divider);
}

.l-form-footer__banners-pc > :nth-child(n + 3) {
  border-top: var(--footer-divider);
}

.l-form-footer__banners-sp {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-form-footer__cell {
  position: relative;
  display: block;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  background-color: var(--color-bg);
  color: #000;
  text-decoration: none;
  transition: color var(--footer-duration) var(--footer-easing);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 斜線: 左下 → 右上（／） */
.l-form-footer__cell--diagonal {
  background:
    linear-gradient(
      to top left,
      transparent calc(50% - 0.75px),
      #fff calc(50% - 0.75px),
      #fff calc(50% + 0.75px),
      transparent calc(50% + 0.75px)
    );
}

.l-form-footer__cell-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.l-form-footer__cell-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.1);
  transition:
    opacity var(--footer-duration) var(--footer-easing),
    transform var(--footer-duration) var(--footer-easing);
}

.l-form-footer__cell-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-form-footer__cell-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.l-form-footer__cell-logo,
.l-form-footer__banner-sp-logo {
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.l-form-footer__cell-logo {
  width: min(
    calc(var(--logo-w) * 1px),
    calc(var(--logo-w) / var(--pc-artboard-w) * 100vw)
  );
  height: min(
    calc(var(--logo-h) * 1px),
    calc(var(--logo-h) / var(--pc-artboard-w) * 100vw)
  );
}

/* フォームページのみ SP 縦積みは 900px 以下（サイト共通 BP 767 とは独立） */
@media (min-width: 901px) {
  .l-form-footer__cell:not(.l-form-footer__cell--diagonal):hover,
  .l-form-footer__cell:not(.l-form-footer__cell--diagonal):focus-visible {
    color: #fff;
  }

  .l-form-footer__cell:not(.l-form-footer__cell--diagonal):hover
    .l-form-footer__cell-img,
  .l-form-footer__cell:not(.l-form-footer__cell--diagonal):focus-visible
    .l-form-footer__cell-img {
    opacity: 1;
    transform: scale(1);
  }
}

.l-form-footer__banner-sp {
  position: relative;
  display: block;
  overflow: hidden;
  color: #fff;
}

.l-form-footer__banner-sp img {
  width: 100%;
  height: auto;
  aspect-ratio: 750 / 180;
  object-fit: cover;
}

.l-form-footer__banner-sp-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: calc(
    var(--logo-w) / var(--logo-h) * 27 / var(--sp-artboard-w) * 100vw
  );
  height: calc(27 / var(--sp-artboard-w) * 100vw);
  transform: translate(-50%, -50%);
}

.l-form-footer__info {
  box-sizing: border-box;
  /* タイポ・縦余白の基準。子の margin は em で追従させ、拡大時に隙間だけ開くのを防ぐ */
  font-size: min(15px, calc(15 / var(--pc-artboard-w) * 100vw));
  padding: min(50px, calc(50 / var(--pc-artboard-w) * 100vw))
    min(50px, calc(50 / var(--pc-artboard-w) * 100vw))
    min(60px, calc(60 / var(--pc-artboard-w) * 100vw));
}

.l-form-footer__info-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3em; /* 45 / 15 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-form-footer__info-instagram,
.l-form-footer__info-copy,
.l-form-footer__info-copyright {
  margin: 0;
}

.l-form-footer__info-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em; /* 6 / 15 */
  color: #000;
  font-family: var(--font-inter);
  font-size: 1em;
  font-weight: 300;
  letter-spacing: 0.015em;
  line-height: 1;
}

.l-form-footer__info-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.l-form-footer__info-arrow {
  width: 0.8em; /* 12 / 15 */
  height: 0.8em;
}

.l-form-footer__info-instagram {
  margin-top: calc(24 / 15 * 1em);
}

.l-form-footer__info-copy,
.l-form-footer__info-copyright {
  color: #000;
  font-family: var(--font-inter);
  font-size: 1em;
  font-weight: 300;
  letter-spacing: 0.015em;
  line-height: 1.6;
}

.l-form-footer__info-copy {
  margin-top: calc(24 / 15 * 1em);
}

.l-form-footer__info-copyright {
  margin-top: calc(16 / 15 * 1em);
}

@media (max-width: 900px) {
  /* 768〜900 では base の --sp-artboard-w が無いためフォーム範囲で定義 */
  .p-form,
  .l-form-footer {
    --sp-artboard-w: 750;
  }

  .p-form {
    overflow-x: clip;
    padding: calc(256 / var(--sp-artboard-w) * 100vw) 0
      calc(50 / var(--sp-artboard-w) * 100vw);
    /*
     * 入力文字: 見た目は XD（26/750 vw）。iOS フォーカスズーム防止のため
     * 実体 font-size は max(16px, …)、枠は scale + margin 補正（tip を隠さない）
     */
    --form-sp-input-fs: calc(26 / var(--sp-artboard-w) * 100vw);
    --form-sp-input-scale: min(1, calc(var(--form-sp-input-fs) / 16px));
    --form-sp-input-h: calc(100 / var(--sp-artboard-w) * 100vw);
  }

  .p-form__inner {
    width: 100%;
    padding-inline: calc(50 / var(--sp-artboard-w) * 100vw);
  }

  .p-form__inner--complete {
    width: 100%;
  }

  .p-form__title {
    margin-bottom: calc(100 / var(--sp-artboard-w) * 100vw);
    font-size: calc(63 / var(--sp-artboard-w) * 100vw);
  }

  .p-form__lead {
    margin-bottom: calc(50 / var(--sp-artboard-w) * 100vw);
    font-size: calc(24 / var(--sp-artboard-w) * 100vw);
    line-height: 1.7;
    text-align: left;
  }

  /* SP: 1つ目の br を無効化（1行目と2行目を連続表示） */
  .p-form__lead br:first-of-type {
    display: none;
  }

  .p-form__required-note {
    margin-bottom: calc(96 / var(--sp-artboard-w) * 100vw);
    font-size: calc(22 / var(--sp-artboard-w) * 100vw);
    text-align: left;
  }

  .p-form__complete-message {
    font-size: calc(24 / var(--sp-artboard-w) * 100vw);
    line-height: 1.7;
    text-align: left;
  }

  /* SP: 1つ目の br を無効化（1行目+2行目を連続、3行目で改行） */
  .p-form__complete-message br:first-of-type {
    display: none;
  }

  .p-form__body {
    margin-top: 0;
    padding-top: calc(96 / var(--sp-artboard-w) * 100vw);
  }

  .p-form__breadcrumb {
    margin-top: calc(200 / var(--sp-artboard-w) * 100vw);
    padding-inline: calc(50 / var(--sp-artboard-w) * 100vw);
    font-size: calc(25 / var(--sp-artboard-w) * 100vw);
  }

  .p-form--complete .p-form__breadcrumb {
    margin-top: calc(190 / var(--sp-artboard-w) * 100vw);
  }

  .p-form .wpcf7-form {
    gap: calc(90 / var(--sp-artboard-w) * 100vw);
  }

  .p-form .p-form__row {
    grid-template-columns: 1fr;
    gap: calc(30 / var(--sp-artboard-w) * 100vw);
    align-items: start;
  }

  .p-form .p-form__row--privacy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(30 / var(--sp-artboard-w) * 100vw);
  }

  .p-form .p-form__row--privacy .p-form__label {
    white-space: normal;
  }

  .p-form .p-form__controls--privacy {
    width: 100%;
    font-size: calc(24 / var(--sp-artboard-w) * 100vw);
  }

  .p-form .p-form__privacy-text {
    margin: 0 0 calc(26 / 24 * 1em);
    font-size: 1em;
  }

  .p-form .p-form__label {
    padding-top: 0;
    font-size: calc(26 / var(--sp-artboard-w) * 100vw);
  }

  .p-form .p-form__row:has(textarea) .p-form__label {
    padding-top: 0;
  }

  /* SP: きっかけを1行に（きっかけ（複数選択可） *） */
  .p-form .p-form__label--with-note {
    flex-wrap: nowrap;
    row-gap: 0;
    white-space: nowrap;
  }

  .p-form .p-form__label--with-note .p-form__label-main {
    order: 1;
  }

  .p-form .p-form__label--with-note .p-form__label-note {
    order: 2;
    flex: 0 0 auto;
    display: inline;
    margin: 0;
    font-size: calc(26 / var(--sp-artboard-w) * 100vw);
  }

  .p-form .p-form__label--with-note .p-form__req {
    order: 3;
  }

  .p-form .p-form__label-note {
    margin-top: 0;
    font-size: calc(26 / var(--sp-artboard-w) * 100vw);
  }

  .p-form .p-form__controls {
    width: 100%;
  }

  .p-form .p-form__controls--pair {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: calc(24 / var(--sp-artboard-w) * 100vw);
  }

  .p-form .p-form__controls--pair > * {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .p-form .p-form__controls--pair > .wpcf7-form-control-wrap {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .p-form .p-form__controls:not(.p-form__controls--pair):not(.p-form__controls--privacy),
  .p-form .p-form__controls:not(.p-form__controls--pair):not(.p-form__controls--privacy)
    > .wpcf7-form-control-wrap,
  .p-form .p-form__controls:not(.p-form__controls--pair):not(.p-form__controls--privacy)
    > input,
  .p-form .p-form__controls:not(.p-form__controls--pair):not(.p-form__controls--privacy)
    > select,
  .p-form .p-form__controls:not(.p-form__controls--pair):not(.p-form__controls--privacy)
    > textarea {
    width: 100%;
  }

  /* scale で枠が縮まないよう幅・高さを先に広げ、margin でレイアウト占有を戻す
   * （wrap に overflow:hidden するとバリデーション tip が消えるため使わない） */
  .p-form input[type="text"],
  .p-form input[type="email"],
  .p-form input[type="tel"],
  .p-form input[type="date"],
  .p-form .p-form__date-wrap input,
  .p-form select {
    box-sizing: border-box;
    width: calc(100% / var(--form-sp-input-scale));
    max-width: none;
    height: calc(var(--form-sp-input-h) / var(--form-sp-input-scale));
    margin-right: calc(100% * (1 - 1 / var(--form-sp-input-scale)));
    margin-bottom: calc(var(--form-sp-input-h) * (1 - 1 / var(--form-sp-input-scale)));
    padding: 0 calc(56 / var(--sp-artboard-w) * 100vw / var(--form-sp-input-scale)) 0
      calc(30 / var(--sp-artboard-w) * 100vw / var(--form-sp-input-scale));
    border-radius: calc(10 / var(--sp-artboard-w) * 100vw / var(--form-sp-input-scale));
    font-size: max(16px, var(--form-sp-input-fs));
    transform: scale(var(--form-sp-input-scale));
    transform-origin: top left;
  }

  .p-form textarea {
    box-sizing: border-box;
    width: calc(100% / var(--form-sp-input-scale));
    max-width: none;
    min-height: calc(240 / var(--sp-artboard-w) * 100vw / var(--form-sp-input-scale));
    margin-right: calc(100% * (1 - 1 / var(--form-sp-input-scale)));
    margin-bottom: calc(
      240 / var(--sp-artboard-w) * 100vw * (1 - 1 / var(--form-sp-input-scale))
    );
    padding: calc(28 / var(--sp-artboard-w) * 100vw / var(--form-sp-input-scale))
      calc(30 / var(--sp-artboard-w) * 100vw / var(--form-sp-input-scale));
    border-radius: calc(10 / var(--sp-artboard-w) * 100vw / var(--form-sp-input-scale));
    font-size: max(16px, var(--form-sp-input-fs));
    transform: scale(var(--form-sp-input-scale));
    transform-origin: top left;
  }

  .p-form select,
  .p-form input[type="date"],
  .p-form .p-form__date-wrap input {
    background-position: right
      calc(30 / var(--sp-artboard-w) * 100vw / var(--form-sp-input-scale)) center;
    background-size: calc(14 / var(--sp-artboard-w) * 100vw / var(--form-sp-input-scale))
      calc(14 / var(--sp-artboard-w) * 100vw / var(--form-sp-input-scale));
  }

  /* 日付プレースホルダはフォーカス対象外 → XD サイズのまま（scale しない） */
  .p-form__date-wrap.is-empty::before {
    left: calc(30 / var(--sp-artboard-w) * 100vw);
    font-size: var(--form-sp-input-fs);
    transform: translateY(-50%);
  }

  /* きっかけ: 折り返し2〜3列想定。row-gap で行揃え（24 基準 em） */
  .p-form .wpcf7-checkbox,
  .p-form .wpcf7-acceptance {
    font-size: calc(24 / var(--sp-artboard-w) * 100vw);
  }

  .p-form .wpcf7-list-item {
    margin: 0 calc(36 / 24 * 1em) 0 0;
  }

  .p-form .wpcf7-checkbox {
    row-gap: 1em; /* 24 / 24 */
    max-width: 100%;
  }

  .p-form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
  }

  .p-form .wpcf7-list-item label,
  .p-form .wpcf7-acceptance label {
    gap: calc(14 / 24 * 1em);
    font-size: 1em;
  }

  .p-form .wpcf7-list-item input[type="checkbox"],
  .p-form .wpcf7-acceptance input[type="checkbox"] {
    width: calc(28 / 24 * 1em);
    height: calc(28 / 24 * 1em);
  }

  /* 同意〜border / border〜ボタン 各 90（form gap 90 が上側）
   * 線は ::before 全幅。ボタンは inner 左右 50 に合わせて padding
   * SP は artboard vw で上書き（PC の em 基準は使わない） */
  .p-form .p-form__actions {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: calc(26 / var(--sp-artboard-w) * 100vw);
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    padding-top: calc(90 / var(--sp-artboard-w) * 100vw);
    padding-inline: 0;
  }

  .p-form .wpcf7-submit {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: calc(100 / var(--sp-artboard-w) * 100vw);
    gap: calc(10 / 26 * 1em);
    padding: 0 calc(32 / 26 * 1em);
    border: none;
    border-radius: calc(10 / var(--sp-artboard-w) * 100vw);
    background-color: #fff;
    font-size: 1em;
  }

  .p-form .wpcf7-submit.is-ready:hover {
    background-color: #fff;
  }

  .p-form .p-form__submit-arrow {
    width: calc(14 / 26 * 1em);
    height: calc(11 / 26 * 1em);
  }

  .p-form .p-form__recaptcha-note {
    margin-top: calc(40 / 26 * 1em);
    font-size: calc(20 / 26 * 1em);
    line-height: 1.6;
  }

  .p-form .wpcf7-not-valid-tip,
  .p-form .use-floating-validation-tip .wpcf7-not-valid-tip,
  .p-form.use-floating-validation-tip .wpcf7-not-valid-tip,
  .p-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip,
  .p-form .c-form-note {
    font-size: calc(22 / var(--sp-artboard-w) * 100vw);
    white-space: normal;
  }

  /* 第一・第二希望の日付/時間 tip・定休日メモのみ
   * 下余白不足のため入力枠内へ暫定表示 */
  .p-form .p-form__controls--pair .wpcf7-not-valid-tip,
  .p-form .p-form__controls--pair .c-form-note {
    margin-top: -14px;
    margin-left: 3px;
    font-size: 10px;
  }

  .l-form-footer__banners-pc {
    display: none;
  }

  .l-form-footer__banners-sp {
    display: block;
  }

  .l-form-footer--complete .l-form-footer__banners-sp {
    padding-bottom: calc(100 / var(--sp-artboard-w) * 100vw);
  }

  .l-form-footer__info {
    padding: 0 calc(50 / var(--sp-artboard-w) * 100vw)
      calc(100 / var(--sp-artboard-w) * 100vw);
  }

  .l-form-footer__info-list {
    flex-direction: column;
    gap: calc(25 / var(--sp-artboard-w) * 100vw);
  }

  .l-form-footer__info-list li {
    line-height: 1;
  }

  .l-form-footer__info-instagram {
    margin-top: calc(50 / var(--sp-artboard-w) * 100vw);
    line-height: 1;
  }

  .l-form-footer__info-copy {
    margin-top: calc(28 / var(--sp-artboard-w) * 100vw);
  }

  .l-form-footer__info-copyright {
    margin-top: calc(25 / var(--sp-artboard-w) * 100vw);
  }

  .l-form-footer__info-link,
  .l-form-footer__info-copy,
  .l-form-footer__info-copyright {
    font-size: calc(25 / var(--sp-artboard-w) * 100vw);
  }

  .l-form-footer__info-arrow {
    width: calc(16 / var(--sp-artboard-w) * 100vw);
    height: calc(16 / var(--sp-artboard-w) * 100vw);
  }
}

/* Flatpickr（来店希望日）— フォームアクセントに合わせる
 * カレンダーは body 直下に出るため .p-form 外でも効くよう記述 */
.flatpickr-calendar {
  z-index: 10050;
  border: none;
  border-radius: min(10px, calc(10 / var(--pc-artboard-w) * 100vw));
  box-shadow: 0 min(8px, calc(8 / var(--pc-artboard-w) * 100vw)) min(28px, calc(28 / var(--pc-artboard-w) * 100vw)) rgba(0, 0, 0, 0.14);
  font-family: var(--font-sans);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-weekdays,
span.flatpickr-weekday {
  color: #000;
  fill: #000;
  font-weight: normal;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: #91714c;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #6f5639;
}

.flatpickr-day {
  border-radius: 50%;
  color: #000;
  font-weight: normal;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(145, 113, 76, 0.12);
  border-color: transparent;
}

.flatpickr-day.today {
  border-color: #91714c;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: #91714c;
  border-color: #91714c;
  color: #fff;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #c8c7c7;
  background: transparent;
  cursor: not-allowed;
}