@charset "UTF-8";

/* =========================================================
   TSJ Form (form.php専用) - form-style.css 全文置換版（リファクタ）
   - header：タイトル(横1行) → 次行にSTEP10個（横並び再発を封じる）
   - STEP番号：常に1行10個（はみ出し/消える問題を解消）
   - STEP5/6：checkbox行を完全統一（サイズも同一）
   - STEP6アラート：stepErrorBox と同トーン（赤系） ※場所は現状のまま
   - STEP7：生年月日selectの潰れ対策（縮み過ぎ防止）
   - 注釈/同意：文字サイズ統一（本文=16 / 注釈=13）
   - footer(ギザギザ)被り対策：パターンAで最小の下余白を確保
   ========================================================= */


/* =========================================================
   scope & base
   ========================================================= */
#contactForm,
#contactForm *{
  box-sizing: border-box;
}

#contactForm{
  width: 100%;
  /* パターンA：最小の“逃げ”だけ。空きすぎ対策 */
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* 色ユーティリティ */
#contactForm .cl-white{ color:#fff; }
#contactForm .cl-blue { color:#3878D7; }
#contactForm .cl-navy { color:#003782; }
#contactForm .cl-red  { color:#BD000D; }


/* =========================================================
   HEADER：タイトルの下にSTEPを“必ず”落とす（縦積み固定）
   ========================================================= */
#contactForm .form-header.se10-ttl-area.flexbox--between{
  display: block;               /* style.cssのflexに引っ張られない */
  width: 100%;
  padding: 0 0 8px;             /* 少し締める */
  border-bottom: 1px solid #003782;
  text-align: center;
}

/* タイトル：横1行「簡単60秒お申し込み STEP」 */
#contactForm .form-title{
  display: block;               /* flexにしない */
  width: 100%;
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: .02em;
  font-weight: 700;             /* 太さ統一 */
  font-size: clamp(20px, 4.6vw, 28px);
  white-space: nowrap;          /* 1行固定 */
  word-spacing: 0;
}

/* 上段/下段を inline 化して1行にする（HTMLはそのまま） */
#contactForm .form-title__top,
#contactForm .form-title__bottom{
  display: inline;
  font: inherit;
  margin: 0;
}

/* 「簡単60秒」だけ色（太さは変えない） */
#contactForm .form-title__em{
  color:#3878D7;
  font-weight: inherit;
}

/* 「お申し込み」と「STEP」の間を最小だけ空ける */
#contactForm .form-title__bottom{
  letter-spacing: .04em;
  padding-left: 4px;
}

/* 超小さい端末の保険（1行維持） */
@media (max-width: 360px){
  #contactForm .form-title{
    font-size: 18px;
    letter-spacing: .01em;
  }
  #contactForm .form-title__bottom{ padding-left: 3px; }
}

/* STEP番号：必ず次行に出す（タイトル横に行かせない最終保険） */
#contactForm .step-numbers{
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* 数字 */
#contactForm .step-numbers .step{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EBEBEB;
  color: #9AA0A6;
  font-weight: 800;
  line-height: 1;
  border-radius: 0;

  width: clamp(22px, 7.6vw, 32px);
  height: clamp(22px, 7.6vw, 32px);
  font-size: clamp(12px, 3.8vw, 18px);
}

#contactForm .step-numbers .step.active{
  background: #3878D7;
  color: #fff;
}


/* =========================================================
   STEP表示
   ========================================================= */
#contactForm .tab{
  display: none;
  padding-top: 14px; /* 18→14：ヘッダー下の“間”を締める */
}
#contactForm .tab.current{ display:block; }

/* 見出し */
#contactForm h3{
  margin: 22px 0 14px;
  text-align: left;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.01em;
  font-size: clamp(16px, 3.6vw, 20px);
}

/* 必須バッジ */
#contactForm h3 span{
  background: #FF8700;
  color:#fff;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 800;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 4px;
}

#contactForm #step10 h3{
  font-size: clamp(15px, 3.4vw, 19px);
}

/* wrap */
#contactForm .form-wrap{
  width: 100%;
  margin-top: 10px;
}


/* =========================================================
   Radio cards
   ========================================================= */
#contactForm .radio_btn_common-03{
  position: relative;
}

#contactForm .radio_btn_common-03 input[type="radio"]{
  position: absolute;
  opacity: 0;
}

#contactForm .radio_btn_common-03 .radio-inner{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  width: 100%;
}

#contactForm .radio_btn_common-03 input[type="radio"] + .radio-label{
  cursor: pointer;
  width: 100%;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #fff;
  border: 1px solid #0A4099;
  color: #0A4099;
  border-radius: 10px;
  font-weight: 800;
  transition: 0.2s ease-in-out;
  margin: 0;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
  font-size: clamp(14px, 3.4vw, 18px);
}

#contactForm .radio_btn_common-03 input[type="radio"] + .radio-label.label-last{
  border: 1px solid #A8A8A8;
  color: #6E6E6E;
}

#contactForm .radio_btn_common-03 input[type="radio"]:checked + .radio-label{
  color: #3878D7;
  background: #E9F7FF;
  border: 1px solid #3878D7;
}

/* 描画安定 */
#contactForm .radio-label{
  transform: translateZ(0);
}


/* =========================================================
   Select
   ========================================================= */
#contactForm .select-wrap{
  position: relative;
  width: 100%;
}

#contactForm select{
  display: block;
  width: 100%;
  height: 56px;
  line-height: 56px;
  padding: 0 44px 0 14px;
  border: 1px solid #003782;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border-radius: 8px;
  color: #9aa0a6;
  position: relative;
  z-index: 1;
}

#contactForm select.is-selected{ color:#111; }
#contactForm select option{ color:#111; }

#contactForm .select-wrap:after{
  content: "▼";
  width: 40px;
  height: 56px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #003782;
  color: #fff;
  font-size: 11px;
  pointer-events: none;
  z-index: 2;
  border-radius: 0 8px 8px 0;
}


/* =========================================================
   Inputs / textarea
   ========================================================= */
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm input[type="tel"]{
  width: 100%;
  height: 56px;
  padding: 0 14px;
  border: 1px solid #003782;
  font-size: 16px;
  border-radius: 8px;
  background: #fff;
  color: #111;
}

#contactForm textarea{
  width: 100%;
  min-height: 160px;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.6;
  border: 1px solid #003782;
  border-radius: 8px;
  resize: vertical;
  background: #fff;
  color: #111;
}

/* STEP6：補足 textarea は浅め */
#contactForm #step6 textarea{
  min-height: 110px;
}


/* =========================================================
   STEP5/6：チェック行（完全統一）
   ========================================================= */
#contactForm .checkbox-column{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#contactForm .cb-line{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  width: 100%;
  margin: 0;
  line-height: 1.55;
}

#contactForm .cb-line input[type="checkbox"]{
  margin: 4px 0 0 0;
  flex: 0 0 auto;
}

#contactForm .cb-line span{
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  font-size: 16px;     /* STEP5/6統一（16〜17の範囲でまず16） */
  font-weight: 600;
  color: #111;
}


/* =========================================================
   STEP6：アラート＆補足ラベルの余白調整
   ========================================================= */
/* stepErrorBox と同トーン（赤系） */
#contactForm .form-alert{
  display: none; /* JSで出す前提 */
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(189, 0, 13, 0.28);
  background: rgba(189, 0, 13, 0.06);
  color: #bd000d;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

/* 「連絡希望の補足（任意）」：余白詰め */
#contactForm .contact-note__label{
  display: block;
  margin: 16px 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  text-align: left;
}

/* textarea の mt--sl を打ち消し（!important無しでスコープ強め） */
#contactForm #step6 .form-wrap textarea.mt--sl{
  margin-top: 0;
}


/* =========================================================
   STEP7：生年月日 select の“潰れ”防止（!important無し）
   ========================================================= */
#contactForm #step7 .flexbox--basic.form-wrap{
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

/* step7内だけ：w20/w10より後勝ちさせる */
#contactForm #step7 .flexbox--basic.form-wrap > .w20,
#contactForm #step7 .flexbox--basic.form-wrap > .w10{
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

/* select-wrap 自体も縮み過ぎないように */
#contactForm #step7 .select-wrap{
  flex: 1 1 0;
  min-width: 0;
}


/* =========================================================
   STEP8：住所
   ========================================================= */
#contactForm #step8 .form-wrap.flexbox--wrap{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#contactForm #step8 .w25{ width: 100%; }
#contactForm #step8 input.address{ width: 100%; }

@media (min-width: 768px){
  #contactForm #step8 .w25{ width: 260px; }
  #contactForm #step8 input.address{ flex: 1 1 auto; }
}


/* =========================================================
   注釈（※ハイフンは自動で除去〜）
   ========================================================= */
#contactForm .form-note{
  font-size: 13px;
  line-height: 1.6;
  margin-top: 8px;
  color: #111;
}


/* =========================================================
   STEP10：個人情報 同意（本文サイズ統一＆エラー赤・同サイズ）
   ========================================================= */
#contactForm .privacy-check{
  font-size: 16px; /* 本文サイズに統一 */
  line-height: 1.6;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

#contactForm .privacy-check__text{
  font-size: 16px;
  font-weight: 600;
  color: #111;
}

#contactForm .privacy-check__link{
  text-decoration: underline;
}

/* 「個人情報の取り扱いに同意してください。」：同サイズ、赤 */
#contactForm .form-error{
  display: none;      /* JSで出す前提 */
  margin-top: 8px;
  color: #bd000d;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
}


/* =========================================================
   Buttons（JS制御前提）
   ========================================================= */
#contactForm input[type="submit"],
#contactForm input[type="button"],
#contactForm input[type="reset"]{
  -webkit-appearance: none;
  appearance: none;
}

#contactForm .previous,
#contactForm .next,
#contactForm .submit{
  display: inline-flex; /* JSが none/inline-flex を上書き */
}

#contactForm .btn-orange,
#contactForm .btn-gray{
  height: 60px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  min-width: 0;
}

#contactForm .btn-orange{
  background: #FF8700;
  color:#fff;
}

#contactForm .btn-gray{
  background: #CDCDCD;
  color:#fff;
}

#contactForm .form-buttons{
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 20px;
  padding-bottom: 24px; /* 44→24：空きすぎ解消 */
}

#contactForm .btn-gray{ width: 140px; }
#contactForm .btn-orange{ width: 180px; }


/* =========================================================
   共通エラーボックス（STEP移動時）
   ========================================================= */
#contactForm .step-error{
  display: none; /* JSで出す前提 */
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(189, 0, 13, 0.28);
  background: rgba(189, 0, 13, 0.06);
  color: #bd000d;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}