@charset "utf-8";
:root {
  /* --- primitive --- */
  --primitive-base-white: #FFFFFF; --primitive-base-brand: #E77314;
  --primitive-neutral-50: #FAF8F5; --primitive-neutral-100: #F5F3F0; --primitive-neutral-150: #EBE9E6; --primitive-neutral-200: #E0DEDC; --primitive-neutral-300: #B7B5B3; --primitive-neutral-400: #807F7D; --primitive-neutral-500: #706F6E; --primitive-neutral-600: #6B6A69; --primitive-neutral-700: #454444; --primitive-neutral-800: #323231; --primitive-neutral-900: #1E1E1D;
  --primitive-orange-50: #FFEEDF; --primitive-orange-100: #FFDDBA; --primitive-orange-150: #FFCA90; --primitive-orange-200: #FFB866; --primitive-orange-300: #FF9F00; --primitive-orange-400: #E58F00; --primitive-orange-500: #CD7F00; --primitive-orange-600: #A96800; --primitive-orange-700: #875200; --primitive-orange-800: #673D00;
  --primitive-navy-700: #1B2A6B; --primitive-navy-800: #152052;
  --primitive-cream-50: #FAF2E6;

  /* --- semantic --- */
  --semantic-brand-primary: var(--primitive-orange-300);
  --semantic-brand-logo: var(--primitive-base-brand);
  --semantic-brand-secondary-navy: var(--primitive-navy-700);
  --semantic-text-primary: var(--primitive-neutral-900);
  --semantic-text-secondary: var(--primitive-neutral-600);
  --semantic-text-disabled: var(--primitive-neutral-400);
  --semantic-text-disabled-no-bg: var(--primitive-neutral-300);
  --semantic-text-link: #0D6EFD;
  --semantic-surface-primary: var(--primitive-neutral-50);
  --semantic-surface-secondary: var(--primitive-cream-50);
  --semantic-surface-disabled: var(--primitive-neutral-100);
  --semantic-border-default: var(--primitive-neutral-300);
  --semantic-border-disabled: var(--primitive-neutral-200);
  --semantic-danger-bg: #FFE6E6; --semantic-danger-text: #FF0000; --semantic-danger-text-strong: #A10100;
  --semantic-success-text-strong: #008D36;
  --semantic-error-text: var(--semantic-danger-text);
  --semantic-error-outline: #FF0000;
  --semantic-error-bg-pink: var(--semantic-danger-bg);

  /* --- radius / gap / padding / text-size --- */
  --radius-none: 0px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-3xl: 40px; --radius-full: 999px;
  --gap-4: 4px; --gap-8: 8px; --gap-12: 12px; --gap-16: 16px; --gap-24: 24px; --gap-32: 32px; --gap-40: 40px; --gap-48: 48px; --gap-56: 56px; --gap-64: 64px; --gap-80: 80px; --gap-96: 96px; --gap-128: 128px;
  --padding-2: 2px; --padding-4: 4px; --padding-6: 6px; --padding-8: 8px; --padding-10: 10px; --padding-12: 12px; --padding-14: 14px; --padding-16: 16px; --padding-20: 20px; --padding-24: 24px; --padding-28: 28px; --padding-32: 32px; --padding-40: 40px; --padding-48: 48px; --padding-56: 56px; --padding-64: 64px; --padding-80: 80px; --padding-96: 96px; --padding-128: 128px;
  --text-size-2xs: 10px; --text-size-xs: 12px; --text-size-sm: 14px; --text-size-md: 16px; --text-size-lg: 18px; --text-size-xl: 20px; --text-size-2xl: 24px; --text-size-3xl: 28px; --text-size-4xl: 32px; --text-size-5xl: 40px; --text-size-6xl: 48px; --text-size-7xl: 56px;

  /* --- typography --- */
  --font-zen: "Zen Kaku Gothic Antique", sans-serif;
  --font-jost: "Jost", "Zen Kaku Gothic Antique", sans-serif;
  --web-letter-spacing: 0.04em; --web-letter-spacing-jost: 0em; --web-lh: 1.5; --web-lh-180: 1.8;
  --web-weight-regular: 400; --web-weight-medium: 500; --web-weight-bold: 700; --web-weight-black: 900;

  /* --- welp → Bootstrap マッピング --- */
  --bs-body-font-family: var(--font-zen);
  --bs-body-font-size: var(--text-size-md);
  --bs-body-line-height: var(--web-lh);
  --bs-body-color: var(--semantic-text-primary);
  --bs-body-bg: var(--primitive-base-white);
  --bs-secondary-color: var(--semantic-text-secondary);
  --bs-border-color: var(--semantic-border-default);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-xs);
  --bs-border-radius-lg: var(--radius-md);
  --bs-primary: var(--semantic-brand-primary);
  --bs-danger: var(--semantic-error-text);
  --bs-danger-rgb: 255, 0, 0;
  --bs-success: var(--semantic-success-text-strong);
  --bs-link-color: var(--semantic-text-link);
  --bs-form-invalid-color: var(--semantic-error-text);
  --bs-form-invalid-border-color: var(--semantic-error-outline);

  /* --- header-footer.css用トークン --- */
  --color-surface-primary: var(--primitive-base-white);
  --color-surface-secondary: var(--semantic-surface-secondary);
  --color-border-default: var(--semantic-border-default);
  --color-overlay-default: rgba(30, 30, 29, 0.5);
  --color-text-accent: var(--semantic-brand-primary);
  --color-text-inverse: var(--primitive-base-white);
  --font-family-numeric: var(--font-jost);
  --font-size-4xl: var(--text-size-4xl);
  --header-drawer-width: 320px;
  --primitive-amber-50: var(--primitive-orange-50);
}

body { font-family: var(--font-zen); letter-spacing: var(--web-letter-spacing); background: var(--primitive-base-white); }
p { line-height: var(--web-lh-180); }
a { color: var(--semantic-text-link); }
a:hover { color: var(--primitive-navy-700); }

/* ---------- Form controls：高さ44px（タップ領域）／角丸8px ---------- */
.form-control, .form-select {
  min-height: 44px;
  padding: var(--padding-10) var(--padding-12);
  font-size: var(--text-size-md);
  border-color: var(--semantic-border-default);
  border-radius: var(--radius-sm);
}
textarea.form-control { min-height: 104px; }
.form-control::placeholder { color: var(--semantic-text-disabled-no-bg); }
.form-control:focus, .form-select:focus {
  border-color: var(--semantic-brand-primary);
  box-shadow: 0 0 0 3px rgba(255, 159, 0, .25);
}
.form-control:disabled {
  background: var(--semantic-surface-disabled);
  border-color: var(--semantic-border-disabled);
  color: var(--semantic-text-disabled);
}
.form-label {
  font-size: var(--text-size-sm);
  font-weight: var(--web-weight-bold);
  color: var(--semantic-text-primary);
  margin-bottom: var(--gap-8);
}
.form-text { font-size: var(--text-size-xs); color: var(--semantic-text-secondary); }
.invalid-feedback { font-size: var(--text-size-sm); font-weight: var(--web-weight-bold); color: var(--semantic-error-text); }
.form-control.is-invalid, .form-select.is-invalid {
  border-width: 1.5px;
  border-color: var(--semantic-error-outline);
  background-color: var(--semantic-error-bg-pink);
  background-image: none;
}
.form-control.is-valid, .form-select.is-valid { border-color: var(--semantic-border-default); background-image: none; }

/* ---------- Checkbox：24px＋44pxタップ領域 ---------- */
.form-check-input { width: 24px; height: 24px; margin-top: 0; border: 1.5px solid var(--semantic-border-default); border-radius: var(--radius-xs); }
.form-check-input:checked { background-color: var(--semantic-brand-primary); border-color: var(--semantic-brand-primary); }
.form-check-input:focus { border-color: var(--semantic-brand-primary); box-shadow: 0 0 0 3px rgba(255, 159, 0, .25); }
.form-check-input.is-invalid { border-color: var(--semantic-error-outline); }
.welp-check { display: flex; align-items: center; gap: var(--gap-8); min-height: 44px; cursor: pointer; margin: 0; padding-left: 0; }
.welp-check .form-check-input { flex: 0 0 24px; margin: 0; }
.welp-check .form-check-label { font-size: var(--text-size-sm); cursor: pointer; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: var(--web-weight-bold); letter-spacing: var(--web-letter-spacing); }
.btn-lg { min-height: 60px; font-size: var(--text-size-md); padding: var(--padding-16) var(--padding-32); }
.btn-welp-primary { background: var(--semantic-brand-primary); border: 1.5px solid var(--semantic-brand-primary); color: var(--primitive-base-white); }
.btn-welp-primary:hover { background: var(--primitive-orange-400); border-color: var(--primitive-orange-400); color: var(--primitive-base-white); }
.btn-welp-primary:disabled { background: var(--semantic-surface-disabled); border-color: var(--semantic-border-disabled); color: var(--semantic-text-disabled); }
.btn-welp-outline { background: var(--primitive-base-white); border: 1.5px solid var(--semantic-text-primary); color: var(--semantic-text-primary); }
.btn-welp-outline:hover { background: var(--primitive-neutral-100); color: var(--semantic-text-primary); }

/* ---------- Layout ---------- */
.welp-pagehead { background: var(--semantic-surface-primary); padding: var(--padding-48) 0 var(--padding-24); text-align: center; }
.welp-pagehead h1 { font-size: var(--text-size-4xl); font-weight: var(--web-weight-black); color: var(--semantic-text-primary); margin: 0; letter-spacing: var(--web-letter-spacing); }
.welp-pagehead .kicker { font-family: var(--font-jost); font-size: var(--text-size-sm); font-weight: 500; color: var(--semantic-text-secondary); letter-spacing: .24em; }
.welp-main { background: var(--semantic-surface-primary); padding: 0 0 var(--padding-64); }
.welp-card { background: var(--primitive-base-white); border-radius: var(--radius-sm); padding: var(--padding-48); max-width: 640px; margin: 0 auto; }
.welp-card--wide { max-width: 800px; }
.welp-agree { background: var(--semantic-surface-primary); border-radius: var(--radius-sm); padding: var(--padding-20); }
.welp-agree.is-invalid-box { background: var(--semantic-error-bg-pink); border: 1.5px solid var(--semantic-error-outline); }
/* .is-invalid ~ .invalid-feedback が効かないケースの明示対応 */
.welp-agree .invalid-feedback:not(.d-none) { display: block; }

/* ---------- 確認画面（PHP側で出力される table） ---------- */
.welp-confirm-table { width: 100%; border-collapse: collapse; }
.welp-confirm-table th,
.welp-confirm-table td { padding: var(--padding-16) 0; border-bottom: 1px solid var(--semantic-border-disabled); text-align: left; vertical-align: top; }
.welp-confirm-table th { width: 220px; font-size: var(--text-size-sm); font-weight: var(--web-weight-bold); color: var(--semantic-text-secondary); }
.welp-confirm-table td { font-size: var(--text-size-md); color: var(--semantic-text-primary); }

/* ---------- PHP側のエラー表示 ---------- */
.error_messe {
  font-size: var(--text-size-sm);
  font-weight: var(--web-weight-bold);
  color: var(--semantic-error-text);
  background: var(--semantic-error-bg-pink);
  border-radius: var(--radius-sm);
  padding: var(--padding-12) var(--padding-16);
  margin: 0 0 var(--gap-8);
}

/* ---------- サンクスページ ---------- */
.welp-thanks-icon { width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--semantic-success-text-strong); color: var(--primitive-base-white); display: flex; align-items: center; justify-content: center; font-size: var(--text-size-2xl); }
.welp-contactbox { background: var(--semantic-surface-secondary); border-radius: var(--radius-sm); padding: var(--padding-28) var(--padding-32); display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-32); }
.welp-contactbox__tel { display: flex; flex-direction: column; gap: var(--gap-12); }
.welp-contactbox__lead { display: flex; align-items: center; gap: var(--gap-8); font-size: var(--text-size-sm); font-weight: var(--web-weight-bold); color: var(--semantic-text-primary); }
.welp-contactbox__lead svg { color: var(--semantic-brand-logo); flex: 0 0 20px; }
.welp-contactbox .tel { display: block; background: var(--primitive-base-white); border-radius: var(--radius-sm); padding: var(--padding-10) var(--padding-24); font-family: var(--font-jost); font-size: var(--text-size-4xl); font-weight: 800; color: var(--semantic-text-primary); letter-spacing: var(--web-letter-spacing-jost); text-decoration: none; text-align: center; }
.welp-contactbox__info { display: flex; flex-direction: column; gap: var(--gap-8); align-items: flex-start; padding-left: var(--padding-32); border-left: 1px solid var(--semantic-border-default); }
.welp-contactbox__name { font-size: var(--text-size-md); font-weight: var(--web-weight-bold); color: var(--semantic-text-primary); }
.welp-contactbox__hours { font-size: var(--text-size-sm); color: var(--semantic-text-primary); }
.welp-badge { background: var(--primitive-orange-50); color: var(--primitive-orange-600); border-radius: var(--radius-xs); padding: var(--padding-6) var(--padding-12); font-size: var(--text-size-xs); font-weight: var(--web-weight-bold); }
.welp-num { font-family: var(--font-jost); letter-spacing: var(--web-letter-spacing-jost); }

@media (max-width: 767.98px) {
  .welp-contactbox { flex-direction: column; align-items: stretch; gap: var(--gap-16); padding: var(--padding-20); }
  .welp-contactbox .tel { font-size: var(--text-size-3xl); }
  .welp-contactbox__info { padding-left: 0; padding-top: var(--padding-16); border-left: none; border-top: 1px solid var(--semantic-border-default); }

  .welp-pagehead { padding: var(--padding-32) 0 var(--padding-16); }
  .welp-pagehead h1 { font-size: var(--text-size-2xl); }
  .welp-main { padding: 0 0 var(--padding-32); }
  .welp-card { background: var(--primitive-base-white); padding: var(--padding-24) var(--padding-16); }
  .welp-confirm-table th,
  .welp-confirm-table td { display: block; width: auto; }
  .welp-confirm-table th { border-bottom: none; padding-bottom: var(--padding-4); font-size: var(--text-size-xs); }
  .welp-confirm-table td { padding-top: 0; }
}