@charset "UTF-8";
/* =============================================================
   お問い合わせページ専用スタイル
   page-contact.php / デザイン: untracked/contact.png
   ※ フォームのフィールドレイアウト（2カラム・バッジ・白帯・中央寄せ等）は
     assets/css/form.css に集約（catalog と共通）。本ファイルは contact 固有のみ。
   ============================================================= */

/* 下層hero（.page-hero）／パンくずは共通のため main.css に定義 */

/* ---- 見出し（左）＋電話ボックス（右）の2カラム行 ---------- */
.contact-form__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  max-width: 1300px;
  margin: 0 auto 40px;
}
.contact-form__head-left .section__title {
  margin-top: 2px;
}
.contact-form__head-right {
  flex: 0 0 auto;
}

/* お電話はこちら（ラベル）＋営業時間 を横並び */
.contact-form__tel-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
}
/* ラベル「お電話はこちら」：recruit-subhead と同じ（青丸＋見出し） */
.contact-form__tel-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #303030;
  font-family: "Noto Sans JP", var(--font-base);
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 31px;
}
.contact-form__tel-label::before {
  content: "";
  flex: none;
  width: 25.96px;
  height: 25.96px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #0684f5;
}
/* 電話番号ボックス：.contact__tel と同じ */
.contact-form__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 74px;
  padding: 14px 88px;
  border: 1px solid var(--color-primary-dark);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-primary-dark);
}
.contact-form__tel:hover {
  opacity: 1;
  border-color: var(--color-primary);
}
.contact-form__tel-icon {
  width: 30px;
  height: 30px;
  flex: none;
}
.contact-form__tel-num {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 10px;
  color: #0050a3;
  font-family: "Montserrat", var(--font-en);
  font-size: 42px;
  font-style: italic;
  font-weight: 600;
  line-height: normal;
}
/* 営業時間：お電話はこちらの右隣 */
.contact-form__hours {
  color: #352723;
  text-align: center;
  font-family: "Inter", var(--font-base);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

/* フォーム本体の全幅背景帯（.contact-form / .contact-form__body）は form.css に集約 */

/* ---- 同意チェック（プライバシーポリシー）は背景の外＋中央寄せ（contact のみ）----
   ※ catalog の通常チェックボックス（アンケート）に影響させないため contact 限定。 */
.contact-form__body .listcheckbox-container {
  position: relative;
  z-index: 0;
  margin: 0;
}
.contact-form__body .listcheckbox-container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -30px; /* 送信ボタンの白帯と重ねて間の背景を消す */
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--color-bg);
  z-index: -1;
}
.contact-form__body .listcheckbox-wrap {
  justify-content: center;
  border-bottom: 0;
}
.contact-form__body .listcheckbox-wrap .nf-field-label {
  display: none; /* 「プライバシーポリシー」ラベルは非表示 */
}
.contact-form__body .listcheckbox-wrap .nf-field-element {
  flex: 0 0 auto;
  width: auto;
  margin-left: 0;
}
.contact-form__body .listcheckbox-wrap .nf-field-element ul {
  justify-content: center;
}
.contact-form__body .listcheckbox-wrap a {
  color: #d24345;
  font-family: "Noto Sans JP", var(--font-base);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* 同意チェックを資料DL（catalog）と同じ大きさ（scale(2)≒40px）にする。
   form.css の共通 20px を contact スコープ＋高詳細度で上書き＝catalog/他に影響しない */
.contact-form .tm-testform .nf-field-element input[type="checkbox"] {
  transform: scale(2);
  transform-origin: center;
  margin-right: 2px;
}

/* 同意欄は中央寄せのため、必須エラー文も中央配置に上書き（共通の left:330px を解除） */
#nf-field-39-container .tm-field-msg {
  right: 0;
  left: 0;
  margin: auto;
  top: 50px;
  width: fit-content;
}

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 900px) {
  .contact-form__head {
    flex-direction: column;
    align-items: stretch;
  }
  .contact-form__head-right {
    flex: none;
    width: 100%;
  }
  .contact-form__tel-label {
    margin-top: 8px;
  }
}