/* ------------------------------------------------------------
   monday CRM 無料相談フォーム
   色・角丸・影・フォントは genero.jp/monday-crm の実測値に合わせている
     主要CTA  #008a8a / 角丸11px
     カード   角丸14〜16px / 境界線 #ebedf2
     背景     #f6f8fb（製品ページのセクション背景）
     文字     #242b36 / フォントはテーマ既定の Zen Kaku Gothic New を継承
   ------------------------------------------------------------ */

/* ページ全体 */
body.path-webform {
  background-color: #f6f8fb;
}

body.path-webform h1 {
  max-width: 720px;
  margin: 0 auto 26px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.4;
  color: #242b36;
}

/* フォームをカードにする */
form.webform-submission-form {
  max-width: 720px;
  margin: 0 auto 72px;
  padding: clamp(24px, 4vw, 44px);
  color: #242b36;
  background: #fff;
  border: 1px solid #ebedf2;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(24, 27, 52, .04), 0 18px 44px rgba(0, 120, 120, .06);
}

form.webform-submission-form * {
  box-sizing: border-box;
}

/* カード上部のブランド表示 */
form.webform-submission-form .lp-formhead {
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid #ebedf2;
}

form.webform-submission-form .lp-formhead-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

form.webform-submission-form .lp-formhead-logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #242b36;
  white-space: nowrap;
}

form.webform-submission-form .lp-formhead-by {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 500;
  color: #007070;
  background: #fff;
  border: 1px solid #c7ecec;
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0, 138, 138, .10);
  white-space: nowrap;
}

/* ページ見出しと重複するので隠す */
form.webform-submission-form .lp-formhead-title {
  display: none;
}

form.webform-submission-form .lp-formhead-sub {
  font-size: 15px;
  line-height: 1.85;
  color: #5c6675;
}

/* 入力項目 */
form.webform-submission-form .form-item {
  margin: 0 0 22px;
}

form.webform-submission-form .form-item > label {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #242b36;
}

form.webform-submission-form input.form-text,
form.webform-submission-form input.form-email,
form.webform-submission-form input.form-tel,
form.webform-submission-form input.form-url,
form.webform-submission-form textarea.form-textarea,
form.webform-submission-form textarea {
  display: block !important;
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: #242b36;
  background-color: #fff !important;
  border: 1.5px solid #dfe3ea !important;
  border-radius: 10px !important;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

form.webform-submission-form textarea {
  min-height: 136px;
  resize: vertical;
}

form.webform-submission-form input.form-text:hover,
form.webform-submission-form input.form-email:hover,
form.webform-submission-form textarea:hover {
  border-color: #b9c0cd !important;
}

form.webform-submission-form input.form-text:focus,
form.webform-submission-form input.form-email:focus,
form.webform-submission-form input.form-tel:focus,
form.webform-submission-form input.form-url:focus,
form.webform-submission-form textarea:focus {
  outline: none;
  border-color: #008a8a !important;
  box-shadow: 0 0 0 3px rgba(0, 138, 138, .14);
}

form.webform-submission-form ::placeholder {
  color: #9aa3b0;
  opacity: 1;
}

/* 必須マークを「*」から「必須」バッジに差し替える */
form.webform-submission-form label.form-required::after {
  content: "必須";
  display: inline-block;
  margin-left: 8px;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  color: #b42318;
  background: #fee4e2;
  border-radius: 4px;
  vertical-align: 2px;
}

/* プライバシーポリシーの説明と同意チェック */
form.webform-submission-form .lp-privacy-box {
  margin: 30px 0 18px;
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #5c6675;
  background: #f6f8fb;
  border: 1px solid #ebedf2;
  border-radius: 14px;
}

form.webform-submission-form .lp-privacy-box a,
form.webform-submission-form label a {
  color: #007070;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

form.webform-submission-form .form-type-checkbox,
form.webform-submission-form .js-form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 26px;
}

form.webform-submission-form input.form-checkbox {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #008a8a;
  cursor: pointer;
}

form.webform-submission-form .form-type-checkbox > label,
form.webform-submission-form .js-form-type-checkbox > label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
}

/* 送信ボタン（製品ページのCTAと同じ色・角丸） */
form.webform-submission-form .form-actions {
  margin: 8px 0 0;
}

form.webform-submission-form input.webform-button--submit {
  display: block !important;
  width: 100% !important;
  padding: 17px 32px !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff !important;
  background-color: #008a8a !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: 0 10px 26px rgba(0, 138, 138, .22);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .18s ease, transform .18s ease;
}

form.webform-submission-form input.webform-button--submit:hover {
  background-color: #007070 !important;
  transform: translateY(-1px);
}

form.webform-submission-form input.webform-button--submit:active {
  transform: none;
}

form.webform-submission-form input.webform-button--submit:focus-visible {
  outline: 3px solid rgba(0, 138, 138, .35);
  outline-offset: 2px;
}

/* エラー表示 */
form.webform-submission-form .form-item--error-message,
form.webform-submission-form .form-item .error {
  margin-top: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #b42318;
}

form.webform-submission-form input.error,
form.webform-submission-form textarea.error,
form.webform-submission-form input[aria-invalid="true"],
form.webform-submission-form textarea[aria-invalid="true"] {
  border-color: #f04438 !important;
}

/* 送信後の完了画面 */
.webform-confirmation {
  max-width: 720px;
  margin: 0 auto 72px;
  padding: clamp(28px, 4vw, 44px);
  font-size: 15px;
  line-height: 1.9;
  color: #242b36;
  text-align: center;
  background: #fff;
  border: 1px solid #ebedf2;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(24, 27, 52, .04), 0 18px 44px rgba(0, 120, 120, .06);
}

.webform-confirmation p {
  margin: 0;
}

.webform-confirmation__back {
  margin-top: 24px;
}

.webform-confirmation__back a {
  display: inline-flex;
  align-items: center;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #007070;
  background: #fff;
  border: 1.5px solid #c7ecec;
  border-radius: 11px;
  text-decoration: none;
}

.webform-confirmation__back a:hover {
  background: #f0fafa;
  border-color: #008a8a;
}

/* スマートフォン */
@media (max-width: 640px) {
  form.webform-submission-form {
    margin-bottom: 44px;
    padding: 22px 18px;
    border-radius: 14px;
  }

  form.webform-submission-form .lp-formhead-brand {
    flex-wrap: wrap;
    gap: 10px;
  }

  body.path-webform h1 {
    margin-bottom: 20px;
  }

  .webform-confirmation {
    padding: 24px 18px;
    border-radius: 14px;
  }
}

/* 完了画面の2段落目（製品ページへのリンク）をボタンに見せる */
.webform-confirmation p + p {
  margin-top: 24px;
}

.webform-confirmation a {
  display: inline-flex;
  align-items: center;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #007070;
  background: #fff;
  border: 1.5px solid #c7ecec;
  border-radius: 11px;
  text-decoration: none;
}

.webform-confirmation a:hover {
  background: #f0fafa;
  border-color: #008a8a;
  text-decoration: none;
}