@charset "UTF-8";
/* ==========================================================================
   フォーム共通スタイル（form / formWrap / formRow …）
   --------------------------------------------------------------------------
   Smooth CMS が出力するフォームHTML（`<!-- ここからフォームHTML（編集禁止） -->`
   で囲まれた範囲）に当てるスタイル。**HTMLとクラス名は変更しない前提**なので、
   すべてこのCSS側だけでカンプの見た目に寄せている。
   確認・完了ページなど他のフォームページでも使い回せるよう、
   ページ固有のもの（パネル・見出し・装飾円など）は contact.css 側に置いた。

   カンプ: Figma winjeLDXMguhfDP4yN4FVL / node-id 1289-2491（お問い合わせ）

   ※ フォームHTMLだけは使用可能タグの制約（div/a/p/h1〜h5/img）の対象外。
      form / label / input / textarea / button はCMSが出力するものをそのまま使う。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. フォーム全体の枠
      カンプは入力欄の幅 710px・ラベルを上、入力欄を下に置く1カラム。
      HTMLは `col-md-4`（ラベル）/ `col-md-8`（入力欄）の2カラムなので、
      クラスを変えずにCSSでカラム幅を100%に戻して縦積みにしている。
   -------------------------------------------------------------------------- */
.formWrap {
  color: var(--c-navy);
}

/* カンプのフォーム幅 718px。Bootstrap の container（1140px＋左右15px）を上書き */
.formWrap .container {
  width: 100%;
  max-width: 718px;
  padding-left: 0;
  padding-right: 0;
}

/* 行（カンプは行間30px）。row の負マージンも殺す */
.formRow {
  margin-left: 0;
  margin-right: 0;
}

.formRow + .formRow {
  margin-top: 30px;
}

/* col-md-4 / col-md-8 / col-md-6 を1カラムに戻す（HTMLを触らないための上書き） */
.formRow > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* --------------------------------------------------------------------------
   2. 見出し（ラベル＋必須バッジ）
      カンプ: ラベル 16px Medium ／ 間隔16px ／ 必須バッジ（紺ベタ・白12px）
              ラベル行と入力欄の間は12px
   -------------------------------------------------------------------------- */
.formTh {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.label {
  margin-bottom: 0;
}

.labelText01 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

.labelText01 p {
  margin: 0;
}

/* 必須バッジ（カンプ 青ベタ・左右padding 20px・12px Medium 白・角丸なし） */
.requiredText {
  margin-left: 16px;
  padding: 0 20px;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

/* --------------------------------------------------------------------------
   3. 入力欄（input / textarea）
      カンプ: 幅710px（＝親いっぱい）・高さ32px（テキストエリアは120px）・
              白地・1px の紺枠・角丸5px
   -------------------------------------------------------------------------- */
.formInput,
.formTextArea {
  display: block;
  width: 100%;
  padding: 4px 12px;
  background: var(--c-white);
  border: 1px solid var(--c-navy);
  border-radius: 5px;
  color: var(--c-navy);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

.formInput {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
}

.formTextArea {
  height: 120px;
  padding-top: 8px;
  padding-bottom: 8px;
  resize: vertical;
}

.formInput::placeholder,
.formTextArea::placeholder {
  color: rgba(24, 61, 129, 0.4);
}

.formInput:focus,
.formTextArea:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 2px rgba(36, 96, 207, 0.2);
}

/* --------------------------------------------------------------------------
   4. ラジオボタン（お問い合わせ種別）
      カンプ: 16px の丸（紺枠）＋ 12px の間隔 ＋ ラベル16px。項目間は32px
      ネイティブの見た目を消して input 自体を丸として描く
      （label は input の兄弟なので ::before を使わなくても組める）
   -------------------------------------------------------------------------- */
.radioArea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 項目間32px。折り返したときの行間は12px */
  gap: 12px 32px;
}

/* d-inline-block のラッパーを flex の子として扱う */
.radioArea > .d-inline-block {
  display: flex !important;
  align-items: center;
}

.formRadio {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 12px 0 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--c-white);
  border: 1px solid var(--c-navy);
  border-radius: 50%;
  cursor: pointer;
}

.formRadio:checked {
  /* 中心の点は背景で描く（::before は使わない） */
  background-image: radial-gradient(var(--c-navy) 0 45%, transparent 46%);
}

.formRadio:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

.labelText02 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
}

.labelText02 p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. チェックボックス（プライバシーポリシー）
      カンプ: 16px の四角（#d9d9d9 の枠・角丸2px）＋ 12px の間隔 ＋ ラベル16px
   -------------------------------------------------------------------------- */
.formBtnTd,
.formRow .text-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.formCheck {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 12px 0 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--c-white);
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
}

.formCheck:checked {
  background-color: var(--c-blue);
  border-color: var(--c-blue);
  /* チェックの✓は背景画像で描く（要素を増やさない） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.3l2.3 2.3 4.7-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.formCheck:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

.privacyLabel {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
}

.privacyLabel p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. 送信ボタン
      カンプ: 300×52・グラデ塗り・角丸32px・Noto Bold 20px 白・中央寄せ
   -------------------------------------------------------------------------- */
.formBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  min-height: 52px;
  padding: 10px 24px;
  background: var(--c-gradient);
  border: 0;
  border-radius: var(--r-panel);
  color: var(--c-white);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.formBtn:hover {
  opacity: 0.75;
}

.formBtn:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. レスポンシブ（SP 〜767px / タブレット 768〜991px / PC 992px〜）
      ※ フォームのSPカンプは無いので、こちら側で設計した値
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .formRow + .formRow { margin-top: 24px; }

  .formTh { margin-bottom: 8px; }

  .requiredText {
    margin-left: 12px;
    padding: 0 12px;
  }

  /* 種別のラジオは1行に収まらないので縦積みにする */
  .radioArea { gap: 10px 24px; }
  .radioArea > .d-inline-block { width: 100%; }

  .labelText02 { line-height: 1.5; }

  .formInput { height: 40px; }
  .formTextArea { height: 160px; }

  .formBtn { width: 100%; max-width: 320px; }
}