@charset "UTF-8";
/*
  FormNest のフォームを旧 MW WP Form のデザイン（assets/scss/object/project/_contact.scss）に合わせる
  FormNest はマークアップを変えられないため、CSS の上書きだけで再現する
  プラグインの CSS（formnest-frontend-render）の後に読み込む（functions.php）
————————————————————————————————————————— */

/* フォーム全体（旧 .p-contact__form-box） */
.formnest-form-container {
  /* プラグインの max-width: 600px / margin: 0 200px / padding: 20px を打ち消す */
  max-width: 880px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.formnest-form-container .formnest-form-fields,
.formnest-form-container form.formnest-form {
  width: 100%;
  max-width: none;
}
.formnest-form-container .formnest-form-fields,
.formnest-form-container .formnest-form-table {
  margin-bottom: 0;
}
.formnest-form-container .formnest-form-messages:empty {
  display: none;
}

/* 行（旧 .p-contact__dl） */
.formnest-form-container .formnest-form-table,
.formnest-form-container .formnest-form-table tbody {
  display: block;
  width: 100%;
  border: none;
}
.formnest-form-container .formnest-form-table tr.formnest-form-row {
  display: flex;
  align-items: center;
  border-top: 1px solid #bbb;
  border-bottom: none;
}
.formnest-form-container .formnest-form-table th,
.formnest-form-container .formnest-form-table td {
  border-bottom: none;
}
/* hidden だけの行（個人フォームのご利用地域・ご利用サービス）は出さない */
.formnest-form-input tr.formnest-form-row:not(:has(input:not([type='hidden']), textarea, select)) {
  display: none;
}

/* ラベル列（旧 .p-contact__dt） */
.formnest-form-container th.formnest-form-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 245px;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  padding: 0;
  background: none;
}

/* 入力列（旧 .p-contact__dd） */
.formnest-form-container td.formnest-form-field {
  display: block;
  width: 100%;
  border-left: 1px solid #bbb;
  padding: 1.25rem 0 1.25rem 2.5rem;
  box-sizing: border-box;
  font-size: inherit !important;
}

/* 必須・任意のバッジ（旧 .req / .no-req） */
.formnest-form-container .formnest-required,
.formnest-form-input th.formnest-form-label:not(:has(.formnest-required))::before {
  order: -1;
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 4px;
  margin: 0 0.75rem 0 0;
  height: 16px;
  box-sizing: border-box;
  line-height: 1;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  max-width: 40px;
  width: 100%;
  background-color: #da0044;
  text-align: center;
  border-radius: 4px;
}
/* FormNest は必須マークしか出さないので、任意バッジは疑似要素で出す（確認画面には付けない） */
.formnest-form-input th.formnest-form-label:not(:has(.formnest-required))::before {
  content: '任意';
  background-color: #979798;
}

/* 1行の入力欄（旧 .con_name / .con_mail） */
.formnest-form-container input.formnest-field__input[type='text'],
.formnest-form-container input.formnest-field__input[type='tel'],
.formnest-form-container input.formnest-field__input[type='email'],
.formnest-form-container input.formnest-field__input[type='date'] {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 28px;
  padding: 0 1rem;
  font-size: 1rem !important;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #bbb;
  border-radius: 4px;
  box-shadow: none;
  outline: unset;
  box-sizing: border-box;
}

/* テキストエリア（旧 .con_comment、.p-contact__dl2） */
.formnest-form-container textarea.formnest-field__input {
  display: block;
  width: 100%;
  max-width: 555px;
  height: 290px;
  padding: 1rem;
  font-size: 1rem !important;
  border: 1px solid #bbb;
  border-radius: 4px;
  box-shadow: none;
  outline: unset;
  box-sizing: border-box;
}
.formnest-form-container tr.formnest-form-row:has(textarea) {
  margin-bottom: 5.625rem;
}

/* ラジオボタン（個人フォームの性別。旧 .mwform-radio-field.horizontal-item の横並び） */
.formnest-form-container .formnest-radio-group {
  display: block;
  padding: 0;
  border: none;
  background: none;
}
.formnest-form-container .formnest-radio-label {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  background: none;
  border: none;
}
/* 旧フォームは input と文字の間・項目の後ろに改行の空白（約 5px）があった分を余白で足す */
.formnest-form-container .formnest-radio-label + .formnest-radio-label {
  margin-left: 14px;
}
.formnest-form-container .formnest-radio-label input[type='radio'] {
  width: auto;
  height: auto;
  margin: 3px 10px 0 5px;
}

/* 相談希望日（個人フォーム）。ほかの1行の入力欄と同じ見た目（2026-11-04）。右の余白はカレンダーのアイコンの分 */
.formnest-form-container input.formnest-field__input.formnest-date-display {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 28px;
  padding: 0 35px 0 1rem;
  font-size: 1rem !important;
  border: 1px solid #bbb;
  border-radius: 4px;
  box-sizing: border-box;
}
.formnest-form-container input.formnest-date-display::placeholder {
  color: transparent;
}

/* エラーメッセージ（入力中の表示と、サーバー側で戻されたときの表示） */
.formnest-form-container .formnest-field__error,
.formnest-form-container .formnest-field-error-message {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.25rem;
  color: #da0044;
  font-size: 0.875rem;
}

/* 同意（旧 .p-contact__check。[チェック] プライバシーポリシーに同意する の1行） */
.formnest-form-container .formnest-form-table tr.formnest-form-row:has(.formnest-agreement-wrapper) {
  border-top: none;
  justify-content: center;
}
.formnest-form-container tr.formnest-form-row:has(.formnest-agreement-wrapper) th.formnest-form-label {
  display: none;
}
.formnest-form-container tr.formnest-form-row:has(.formnest-agreement-wrapper) td.formnest-form-field {
  border-left: none;
  text-align: center;
  padding: 0;
}
.formnest-form-container .formnest-agreement-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 28px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.formnest-form-container .formnest-agreement-checkbox {
  order: -1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
/* チェックボックスはブラウザ標準の大きさ・余白（旧フォームと同じ） */
.formnest-form-container .formnest-agreement-checkbox input[type='checkbox'] {
  width: 13px;
  height: 13px;
  margin: 3px 5px 3px 4px;
}
.formnest-form-container .formnest-agreement-checkbox span {
  display: none;
}
.formnest-form-container .formnest-agreement-content,
.formnest-form-container .formnest-agreement-content p {
  font-size: 0.9375rem;
  line-height: 1.75;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.formnest-form-container .formnest-agreement-content a {
  color: #036e94;
  text-decoration: underline;
}

/* ボタン（旧 .con_submit / .con_back） */
.formnest-form-container .formnest-form-submit {
  margin: 2.5rem 0 0;
}
.formnest-form-container .formnest-form-submit,
.formnest-form-container .form_submit_btn_area {
  width: 100% !important;
  max-width: none !important;
}
.formnest-form-container .form_submit_btn_area {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.formnest-form-container .formnest-submit-button,
.formnest-form-container .formnest-button-back {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 280px;
  max-width: 280px;
  height: 50px;
  margin: 0;
  padding: 0;
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  background: #a10d23;
  border: 1px solid #a10d23;
  border-radius: 25px;
  text-align: center;
  outline: none;
  box-shadow: none;
  transition: all 0.3s;
}
.formnest-form-container .formnest-submit-button:hover,
.formnest-form-container .formnest-button-back:hover,
.formnest-form-container .formnest-submit-button:focus,
.formnest-form-container .formnest-button-back:focus {
  box-shadow: none;
  transform: none;
}
/* 右端の矢印（旧 .fa-chevron-right）
   Font Awesome は Kit の JS で SVG に置き換える方式で Web フォントが無いため、同じ形の SVG を mask で描く */
.formnest-form-container .formnest-submit-button::after,
.formnest-form-container .formnest-button-back::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 29px;
  width: 23px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 34z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 34z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateY(-50%);
  transition: all 0.3s;
}
.formnest-form-container .formnest-submit-button:hover {
  color: #a10d23;
  background: #fff;
}
.formnest-form-container .formnest-button-back {
  background: #b4b5b5;
  border-color: #b4b5b5;
}
.formnest-form-container .formnest-button-back:hover {
  color: #b4b5b5;
  background: #fff;
}
/* ボタンの文言は入力画面と確認画面で共用の設定（送信する）。入力画面だけ「確認画面へ」にする */
.formnest-form-input .formnest-submit-text {
  font-size: 0;
}
.formnest-form-input .formnest-submit-text::after {
  content: '確認画面へ';
  font-size: 1rem;
}
/* 確認画面（旧 .mw_wp_form_confirm） */
.formnest-form-container td.formnest-form-field {
  line-height: 1.75;
}
/* お問い合わせ内容の行の下は、入力画面と同じだけ空ける（旧 .p-contact__dl2） */
.formnest-form-confirm tr.formnest-form-row:has(input[type='hidden'][name='message']) {
  margin-bottom: 5.625rem;
}
.formnest-form-confirm .formnest-form-submit {
  margin-top: 3.75rem;
  padding-top: 0;
  border-top: none;
}
/* ボタンの並びは旧フォームと同じ「送信する」「戻る」の順 */
.formnest-form-confirm .formnest-button-back {
  order: 1;
}

/* reCAPTCHA の案内文の下の余白（旧フォームでは案内文の後に高さ 28px の空の段落があった） */
.formnest-form-container + .p-contact__text {
  margin-bottom: 28px;
}

/* 「* 必須項目」の注記は旧フォームに無い */
.formnest-form-container .formnest-form-footer {
  display: none;
}

/* 確認画面ではリンクにしない */
.formnest-form-confirm td.formnest-form-field a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

/* OS がダークモードでも、ライトモードと同じ色で表示する
   プラグインの @media (prefers-color-scheme: dark) が文字を白系・入力欄を濃い灰色にするため、白い背景に白い文字になる
   値はライトモードでの表示（サイトの文字色 #141414、プラグインの #374151）に合わせている */
.formnest-form-container {
  color: #141414;
  color-scheme: light;
  border: none !important;
}
.formnest-form-container input.formnest-field__input[type='text'],
.formnest-form-container input.formnest-field__input[type='tel'],
.formnest-form-container input.formnest-field__input[type='email'],
.formnest-form-container input.formnest-field__input[type='date'],
.formnest-form-container input.formnest-field__input.formnest-date-display,
.formnest-form-container textarea.formnest-field__input,
.formnest-form-container select.formnest-select {
  color: #374151;
  background-color: #fff;
}
.formnest-form-container .formnest-radio-text,
.formnest-form-container .formnest-checkbox-text,
.formnest-form-container .formnest-agreement-content,
.formnest-form-container td.formnest-confirm-value {
  color: #374151;
}

/* 旧 _sp.scss の .p-contact__form-box { width: 90% } */
@media screen and (max-width: 1024px) {
  .formnest-form-container {
    width: 90% !important;
  }
}

@media screen and (max-width: 767px) {
  .formnest-form-container td.formnest-form-field {
    padding-left: 1.25rem;
  }
}

@media screen and (max-width: 480px) {
  .formnest-form-container .formnest-form-table tr.formnest-form-row {
    flex-wrap: wrap;
    padding-top: 1.125rem;
    margin-top: 1.125rem;
  }
  .formnest-form-container .formnest-form-table tr.formnest-form-row:has(.formnest-agreement-wrapper) {
    padding-top: 0;
    margin-top: 0;
  }
  .formnest-form-container th.formnest-form-label {
    width: 100% !important;
    max-width: 245px;
  }
  .formnest-form-container td.formnest-form-field {
    border-left: none;
    padding: 0;
  }
  .formnest-form-container tr.formnest-form-row:has(textarea),
  .formnest-form-confirm tr.formnest-form-row:has(input[type='hidden'][name='message']) {
    margin-bottom: 2.625rem;
  }
  .formnest-form-container .formnest-form-submit {
    margin-top: 1.5rem;
  }
  .formnest-form-confirm .formnest-form-submit {
    margin-top: 2.75rem;
  }
  .formnest-form-confirm .form_submit_btn_area {
    flex-wrap: wrap;
    gap: 1rem;
  }
}