/* =========================================================
   MT.net (iframe内) Form Styling（整理版・決定稿）
   - 表：電話番号まで（個人情報は表の外）
   - 回答の要否：横並び + カスタムラジオ（緑）
   - 個人情報：説明 → 同意（順序固定）+ 中央寄せ
   - リンク：アイコン付き + アイコンまで下線
========================================================= */

#container.container{
  --brand: #01A758;
  --bg-th: #E2F0CE;
  --bg-td: #FFFFF3;
  --text: #222;
  --muted: rgba(0,0,0,.65);
  --border: rgba(1,167,88,.9);
  --danger: #e64242;

  color: var(--text);
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  box-sizing: border-box;
}
#container.container *,
#container.container *::before,
#container.container *::after{ box-sizing: inherit; }

/* Layout */
#container .content{
  width: 100%;
  max-width: 1023px;
  margin: 0 auto;
  padding: 0;
}
#container .content-form form{ margin: 0; }

/* form-page枠は使わない */
#container .form-page{
  border: 0 !important;
  background: transparent;
}

/* ---------------------------------------------------------
   表行（個人情報以外）
--------------------------------------------------------- */
#container .form-column{
  margin: 0;
  padding: 0;
}

/* 表として残す行（個人情報以外） */
#container .form-column[data-column]:not([data-column="個人情報について"]){
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-top: 1px solid var(--border) !important;
  background: var(--bg-td) !important;
}

/* 電話番号で表を閉じる */
#container .form-column[data-column="電話番号"]{
  border-bottom: 1px solid var(--border) !important;
}

/* ラベル（左セル） */
#container .form-column > .label,
#container .form-column fieldset > legend.label{
  background: var(--bg-th) !important;
  padding: 14px 14px;
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* バッジ（角丸なし） */
#container .badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 0 !important;
  white-space: nowrap;
}
#container .badge-required{ background: var(--danger); color:#fff; }
#container .badge-optional{ background: rgba(0,0,0,.18); color:#fff; }

/* ---------------------------------------------------------
   入力ブロック
--------------------------------------------------------- */
#container fieldset{ border: 0; margin: 0; padding: 0; }

#container .input-group{
  background: var(--bg-td);
  padding: 12px 14px 14px;
}

#container label.option{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px 16px 6px 0;
  font-size: 14px;
  cursor: pointer;
}
#container label.option input{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
}
#container .option-text{
  display: inline-block;
  transform: translateY(1px);
}

#container .description-block{
  background: var(--bg-td);
  padding: 0 14px 14px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
#container .description-block p{ margin: 8px 0 0; }

/* 入力ボックスは白 */
#container .form-column textarea,
#container .form-column input[type="text"],
#container .form-column input[type="email"],
#container .form-column input[type="tel"]{
  display: block;
  width: calc(100% - 28px);
  margin: 12px 14px 14px;
  padding: 12px 14px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
}
#container .form-column textarea{ min-height: 180px; resize: vertical; }
#container .form-column textarea:focus,
#container .form-column input:focus{
  outline: none;
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(0,0,0,.07);
}

/* ---------------------------------------------------------
   回答の要否：横並び + カスタムラジオ（緑）
--------------------------------------------------------- */
#container .form-column[data-column="回答の要否"] .input-group{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 28px;
}
#container .form-column[data-column="回答の要否"] label.option{
  margin: 0;
  white-space: nowrap;
}

/* カスタムラジオ */
#container .form-column[data-column="回答の要否"] input[type="radio"]{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cfcfcf;
  background: #fff;
  display: inline-grid;
  place-content: center;
}
#container .form-column[data-column="回答の要否"] input[type="radio"]::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0);
  background: var(--brand);
  transition: transform .12s ease;
}
#container .form-column[data-column="回答の要否"] input[type="radio"]:checked{
  border-color: var(--brand);
}
#container .form-column[data-column="回答の要否"] input[type="radio"]:checked::before{
  transform: scale(1);
}

/* ---------------------------------------------------------
   個人情報：表の外／中央寄せ／説明 → 同意
--------------------------------------------------------- */
#container .form-column[data-column="個人情報について"]{
  border: 0 !important;
  background: transparent !important;
  margin-top: 28px !important;
  padding: 0 !important;
  width: 100%;
  text-align: center;
}

/* legend は画面上は隠す */
#container .form-column[data-column="個人情報について"] legend.label{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* fieldset 内で order を効かせる（説明 → 同意） */
#container .form-column[data-column="個人情報について"] fieldset{
  display: flex;
  flex-direction: column;
  width: 100%;
}

#container .form-column[data-column="個人情報について"] fieldset > .description-block{
  order: 1;
  background: transparent;
  padding: 0;
  margin: 0 auto 14px;
  text-align: center;
  color: var(--text);
  font-size: 14px;
}
#container .form-column[data-column="個人情報について"] fieldset > .description-block p{ margin: 0; }

#container .form-column[data-column="個人情報について"] fieldset > .input-group{
  order: 2;
  background: transparent;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#container .form-column[data-column="個人情報について"] .input-group > label.option{
  margin: 0;
}

/* 必須バッジを同意の横に */
#container .form-column[data-column="個人情報について"] .input-group > label.option::after{
  content: "必須";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 0;
  background: var(--danger);
  color: #fff;
}

/* リンク：アイコンまで下線 */
#container a.contactForm1__link{
  color: var(--brand);
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
#container a.contactForm1__link::after{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("https://reins-hp-test.databee.jp/images/icon/external-link-green.svg") no-repeat center / contain;
  transform: translateY(1px);
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
#container .button-group{
  margin-top: 22px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
}

#container .button{
  appearance: none;
  border: none;
  border-radius: 3px;
  padding: 16px 14px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
#container .button-confirm{
  background: var(--brand) !important;
  color: #fff !important;
  width: 100%;
  max-width: 520px;
  padding: 22px 16px;
  font-size: 18px;
}
#container .help-block{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

/* misc */
#container .preview-block{
  background: var(--bg-td);
  padding: 12px 14px 14px;
  margin: 0;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 15px;
}
#container .hidden{ display: none !important; }
#container br.u-pc{ display: none; }

/* ---------------------------------------------------------
   PC (907px+)：2カラム
--------------------------------------------------------- */
@media (min-width: 907px){
  #container .form-column[data-column]:not([data-column="個人情報について"]){
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: stretch;
  }

  #container .form-column[data-column]:not([data-column="個人情報について"]) > .label,
  #container .form-column[data-column]:not([data-column="個人情報について"]) fieldset > legend.label{
    border-right: 1px solid var(--border);
    padding: 18px;
    font-size: 15px;
    display: flex;
    align-items: center;
  }

  #container .form-column textarea,
  #container .form-column input[type="text"],
  #container .form-column input[type="email"],
  #container .form-column input[type="tel"]{
    width: calc(100% - 36px);
    margin: 18px;
  }

  #container .input-group{ padding: 18px; }
  #container .description-block{ padding: 0 18px 18px; }

  #container br.u-pc{ display: inline; }
}

@media (min-width: 907px){
  #container .form-column[data-column="回答の要否"] .input-group{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 28px !important;
  }
  #container .form-column[data-column="回答の要否"] .input-group > label.option{
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   個人情報について：PCの2カラムgridから外して幅100%に戻す（決定打）
========================================================= */
@media (min-width: 907px){

  /* 行そのものを grid から外す */
  #container .form-column.form-column-checkbox[data-column="個人情報について"]{
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    margin-top: 28px !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* gridの配置指定を強制解除（これがないと 280px に残ります） */
  #container .form-column.form-column-checkbox[data-column="個人情報について"] *,
  #container .form-column.form-column-checkbox[data-column="個人情報について"] *::before,
  #container .form-column.form-column-checkbox[data-column="個人情報について"] *::after{
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
  }

  /* 説明文は100%幅で中央 */
  #container .form-column.form-column-checkbox[data-column="個人情報について"] .description-block{
    display: block !important;
    width: 100% !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: center !important;
  }
  #container .form-column.form-column-checkbox[data-column="個人情報について"] .description-block > p.contactForm1__agreeText{
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* 同意チェック行は中央配置 */
  #container .form-column.form-column-checkbox[data-column="個人情報について"] .input-group{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
  }
}

/* =========================================================
   PC(907px+): 左ラベルを縦中央（最終・単独パッチ）
   - 5つの入力行：そのまま縦中央
   - 回答の要否：その行だけ fieldset を display:contents で「左＝legend / 右＝中身」に戻す
========================================================= */
@media (min-width: 907px){

  /* --- 5つの入力行（お問い合わせ内容/お名前/ふりがな/メール/電話） --- */
  #container .form-column[data-column="お問い合わせ内容"] > .label,
  #container .form-column[data-column="お名前"] > .label,
  #container .form-column[data-column="お名前（ふりがな）"] > .label,
  #container .form-column[data-column="メールアドレス"] > .label,
  #container .form-column[data-column="電話番号"] > .label{
    align-self: stretch !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  /* --- 回答の要否：左ラベルを legend に戻して縦中央 --- */
  #container .form-column[data-column="回答の要否"]{
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  /* fieldset の箱を消して、中身を grid item にする */
  #container .form-column[data-column="回答の要否"] > fieldset{
    display: contents !important;
  }

  /* legend（左セル） */
  #container .form-column[data-column="回答の要否"] > fieldset > legend.label{
    grid-column: 1 / 2 !important;
    align-self: stretch !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    border-right: 1px solid var(--border) !important;
    padding: 18px !important;
    margin: 0 !important;
    background: var(--bg-th) !important;
  }

  /* 右セル（既存の見た目はそのまま） */
  #container .form-column[data-column="回答の要否"] > fieldset > .input-group,
  #container .form-column[data-column="回答の要否"] > fieldset > .description-block{
    grid-column: 2 / 3 !important;
    min-width: 0 !important;
  }

  /* “希望する/希望しない” は横並び固定（既存を念押し） */
  #container .form-column[data-column="回答の要否"] > fieldset > .input-group{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 28px !important;
  }
  #container .form-column[data-column="回答の要否"] > fieldset > .input-group > label.option{
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* labelがwrapしている場合の縦中央（align-contentが原因） */
#container .form-column > label.label,
#container .form-column fieldset > legend.label{
  align-content: center !important; /* ← flex-start を潰す */
}

/* =========================================================
   SP(〜906px)：左右罫線をwrapperに一本化 + 表の地をbg-tdに
   ※PCには影響させない
========================================================= */
@media (max-width: 906px){
  #container .form-page{
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    background: var(--bg-td) !important;
  }
  #container .form-column[data-column]:not([data-column="個人情報について"]){
    border-left: 0 !important;
    border-right: 0 !important;
  }
  #container .form-column > .label,
  #container .form-column fieldset > legend.label{
    background: var(--bg-th) !important;
  }
}

/* 回答の要否：SPでも横並び（labelが100%幅になるのを潰す） */
#container .form-column[data-column="回答の要否"] .input-group{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 18px !important;
}

#container .form-column[data-column="回答の要否"] .input-group > label.option{
  display: inline-flex !important;
  width: auto !important;      /* ←これが決定打 */
  flex: 0 0 auto !important;   /* ←念押し */
  margin: 0 !important;
  white-space: nowrap !important;
}

/* MT.net フォーム：フォーカス時に placeholder を消す */
#form-container {
  // 通常時の placeholder（色もここで薄くできます）
  input::placeholder,
  textarea::placeholder {
    color: rgba(0, 0, 0, 0.35);
    transition: opacity 0.15s ease;
  }

  // フォーカス（クリックして入力状態）で placeholder を消す
  input:focus::placeholder,
  textarea:focus::placeholder {
    opacity: 0;
  }

  /* Safari等の互換（必要な環境がある場合のみ有効になります） */
  input:focus::-webkit-input-placeholder,
  textarea:focus::-webkit-input-placeholder {
    opacity: 0;
  }
}


/* =========================================================
   [今日追加分・最小セット]
   SP(〜906px)：表は各行border-bottom方式 / 個人情報は白で独立
========================================================= */
@media (max-width: 906px){

  /* wrapperは線を持たない（個人情報への回り込み防止） */
  #container .form-page{
    border-left: 0 !important;
    border-right: 0 !important;
    background: transparent !important;
  }

  /* 表行（個人情報以外）：左右＋下罫線を“全行”に付与 */
  #container .form-column[data-column]:not([data-column="個人情報について"]){
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: 0 !important;
    background: var(--bg-td) !important;
  }

  /* 表の最上段だけ上罫線 */
  #container .form-column[data-column]:not([data-column="個人情報について"]):first-child{
    border-top: 1px solid var(--border) !important;
  }

  /* 個人情報ブロック：表の外（白背景で独立） */
  #container .form-column.form-column-checkbox[data-column="個人情報について"]{
    border: 0 !important;
    background: #fff !important;
    margin-top: 22px !important;
    padding: 0 !important;
  }

  #container .form-column.form-column-checkbox[data-column="個人情報について"] .description-block{
    background: transparent !important;
    padding: 0 14px 14px !important;
    margin: 0 !important;
    text-align: center !important;
  }
  #container .form-column.form-column-checkbox[data-column="個人情報について"] .input-group{
    background: transparent !important;
    padding: 0 14px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }
}

/* =========================================================
   背景ブレ（1135/1137等）の根治：form-pageは常に透明
========================================================= */
#container .form-page{
  background: transparent !important;
}

/* =========================================================
   SP(<=906)：clean.css の display:grid を潰してSP表示にする（決定打）
========================================================= */
@media (max-width: 906px){
  #container .form-column[data-column]:not([data-column="個人情報について"]){
    display: block !important;
  }
  #container .form-column[data-column]:not([data-column="個人情報について"]) > *,
  #container .form-column[data-column]:not([data-column="個人情報について"]) *{
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
  }
  #container .form-column[data-column]:not([data-column="個人情報について"]) > .label,
  #container .form-column[data-column]:not([data-column="個人情報について"]):is(.form-column-radio,.form-column-checkbox) legend.label{
    border-right: 0 !important;
  }
}

/* =========================================================
   今日分・最小構成（決定版）
   - ブレークポイント：SP <=1023 / PC >=1024（親1024付近でSPに寄せる）
   - SP：表（個人情報以外）は「各行 border-bottom 方式」で罫線安定
   - SP：個人情報ブロックは表から分離（白背景）
   - SP：clean.css の grid を確実に潰す
   - 任意：SPでも「同意する」前で改行（br.u-pc を出す）
   ※ custom.css の一番最後に置く
========================================================= */

/* 0) wrapper(form-page)は常に透明（面色は“行”が持つ） */
#container .form-page{
  background: transparent !important;
  border: 0 !important;
}

/* =========================================================
   SP（<=906px）
========================================================= */
@media (max-width: 906px){

  /* 1) clean.css の display:grid を確実に潰す（SP縦積みの決定打） */
  #container .form-column[data-column]:not([data-column="個人情報について"]){
    display: block !important;
  }
  #container .form-column[data-column]:not([data-column="個人情報について"]) > *,
  #container .form-column[data-column]:not([data-column="個人情報について"]) *{
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
  }
  /* PC用の左セル縦線が残る場合の保険 */
  #container .form-column[data-column]:not([data-column="個人情報について"]) > .label,
  #container .form-column[data-column]:not([data-column="個人情報について"]):is(.form-column-radio,.form-column-checkbox) legend.label{
    border-right: 0 !important;
  }

  /* 2) 表（個人情報以外）：左右＋下罫線を“全行”に付ける（途中で切れない） */
  #container .form-column[data-column]:not([data-column="個人情報について"]){
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: 0 !important;                 /* 二重線防止 */
    background: var(--bg-td) !important;      /* 表の面 */
  }
  #container .form-column[data-column]:not([data-column="個人情報について"]):first-child{
    border-top: 1px solid var(--border) !important; /* 先頭だけ上罫線 */
  }

  /* 3) 個人情報：表から分離（白背景） */
  #container .form-column.form-column-checkbox[data-column="個人情報について"]{
    border: 0 !important;
    background: #fff !important;
    margin-top: 22px !important;  /* 表から離す */
    padding: 18px 0 !important;   /* “背景が残る帯”を白で塗る（上下も含めて） */
    width: 100% !important;
    text-align: center !important;
  }
  #container .form-column.form-column-checkbox[data-column="個人情報について"] .description-block{
    background: transparent !important;
    padding: 0 14px 14px !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
  #container .form-column.form-column-checkbox[data-column="個人情報について"] .input-group{
    background: transparent !important;
    padding: 0 14px !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* 4) ボタン周りも白（表の面色と切り離す） */
  #container .button-group{
    background: #fff !important;
  }

  /* 5) 任意：SPでも「同意する」前で改行したい場合 */
  #container br.u-pc{ display: block !important; }
}

/* =========================================================
   PC（>=907px）
   - いまのPC設計は維持（既存の min-width:908px 体系はそのままでOK）
   - ただし「個人情報」だけは grid 巻き込みを遮断して中央維持
========================================================= */
@media (min-width: 907px){
  #container .form-column.form-column-checkbox[data-column="個人情報について"]{
    display: block !important;            /* display:grid を潰す */
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    column-gap: 0 !important;
    row-gap: 0 !important;

    border: 0 !important;
    background: #fff !important;
    margin-top: 28px !important;
    padding: 0 !important;

    width: 100% !important;
    text-align: center !important;
  }
  #container .form-column.form-column-checkbox[data-column="個人情報について"] *{
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
  }

  /* PCでは br.u-pc を“PC用”として出したいなら */
  #container br.u-pc{ display: block !important; }
}

/* =========================================================
   FIX：個人情報について（全幅共通）
   - 1006〜854pxで左寄せになる問題を根治
   - clean.css の grid / justify-content 巻き込みを遮断
   ※custom.css の一番最後に置く
========================================================= */

/* 行そのものを「常に」gridから外す */
#container #form-container .form-column.form-column-checkbox[data-column="個人情報について"]{
  display: block !important;
  width: 100% !important;

  /* grid由来のズレを全殺し */
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  justify-content: initial !important;

  border: 0 !important;
  background: #fff !important;
  margin-top: 22px !important;
  padding: 0 !important;

  text-align: center !important;
}

/* 中身は100%幅で中央（= 280px拘束を起こさない） */
#container #form-container .form-column.form-column-checkbox[data-column="個人情報について"] fieldset{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 auto !important;
  align-items: center !important;
}

/* 説明文は必ず中央（幅100%） */
#container #form-container .form-column.form-column-checkbox[data-column="個人情報について"] .description-block{
  order: 1 !important;
  width: 100% !important;
  max-width: 1023px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center !important;
}
#container #form-container .form-column.form-column-checkbox[data-column="個人情報について"] .description-block > p{
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

/* 同意（チェック）行は中央固定 */
#container #form-container .form-column.form-column-checkbox[data-column="個人情報について"] .input-group{
  order: 2 !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 念のため：子要素のgrid配置指定を解除 */
#container #form-container .form-column.form-column-checkbox[data-column="個人情報について"] *{
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  align-self: auto !important;
}

/* SP：確認画面へボタンは常に全幅 */
@media (max-width: 906px){
  #container .button-confirm{
    width: 100% !important;
    max-width: none !important; /* 520px制限を解除 */
  }
}

/* 430px以下：説明文は改行させない（br.u-pc を無効化） */
@media (max-width: 430px){
  #container .contactForm1__agreeText br.u-pc{
    display: none !important;
  }
}


/* 戻るボタン文言を「入力内容を修正する」に見た目上変更 */
.button-back{
  font-size: 0; /* 元の文字を隠す（見た目のみ） */
}

/* 戻るボタン：元の文字を見えなくして、擬似要素で差し替え */
.button-back{
  position: relative;
  color: transparent !important;        /* 元テキストを非表示 */
  text-shadow: none !important;
}

/* もしアイコン等がある場合は、必要に応じて個別に戻す
.button-back .icon { color: inherit; } など */
.button-back::before{
  content: "入力内容を修正する";
  position: absolute;
  inset: 0;                              /* ボタン全面に配置 */
  display: grid;
  place-items: center;                   /* 文字を中央へ */
  color: inherit;                        /* ボタンの文字色を継承 */
  pointer-events: none;                  /* クリック阻害しない */
}
.button-back::before{ color: #fff; }

/* 送信ボタン先頭の鍵アイコンを非表示 */
.button-submit .icon-lock,
.button-submit .fa-lock{
  display: none !important;
}
/* 送信ボタン色変更 */
.button-submit{
  background-color: #01A758 !important;
  border-color: #01A758 !important;
  color: #fff !important; /* 文字は白に */
}

@media (min-width: 900px){
  /* ボタンエリア全体を中央寄せで整える */
  .button-group{
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;             /* 画面が狭いときは折り返し */
    margin-top: 24px;
  }

  /* 2つのボタンを同サイズで揃える */
  .button-group .button{
    width: 280px;
    max-width: 100%;
    margin: 0 !important;        /* 既存marginを無効化 */
  }

  /* 「暗号化されて送信」注記をボタン下へ */
  .button-group .help-block{
    flex-basis: 100%;
    order: 3;
    text-align: center;
    margin: 10px 0 0 !important;
  }
}


/* =================================================
   （個人情報について/同意）
   ・入力画面：説明文は表示
   ・確認画面（preview-blockが出る画面）だけ：説明文は非表示
   ・確認画面の「同意する」を表の1行として整形（SP/PC）
   ================================================= */

/* --- 1) 入力画面：説明文を表示（復帰） ---------------------------- */
/* ※確認画面側の「強い非表示」を後段で上書きするため、先に“表示”を宣言 */
#container .form-column.form-column-checkbox[data-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"] .description-block{
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

/* --- 2) 確認画面だけ：同意を表の1行に整形 ------------------------ */
/* 対象：preview-block（確認画面の値表示）が存在するfieldestのみ */
#container .form-column.form-column-checkbox[data-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]
fieldset:has(> .preview-block[data-tf-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]){
  /* SP：縦積み（見出し→値） */
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;

  width: 100% !important;
  min-inline-size: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  /* SPの行罫線（左右＋下） */
  border-left: 1px solid var(--cf1-border, #7bbf9a) !important;
  border-right: 1px solid var(--cf1-border, #7bbf9a) !important;
  border-bottom: 1px solid var(--cf1-border, #7bbf9a) !important;

  background: transparent !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}

/* legend は余白/行高の原因になるので非表示 */
#container .form-column.form-column-checkbox[data-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]
fieldset:has(> .preview-block[data-tf-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]) > legend{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 左セル（見出し） */
#container .form-column.form-column-checkbox[data-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]
fieldset:has(> .preview-block[data-tf-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"])::before{
  content: "個人情報のお取り扱い";
  display: flex;
  align-items: center;

  padding: 14px 16px;
  box-sizing: border-box;

  background: #E2F0CE !important;
  color: #222 !important;
  font-weight: 700;

  /* SPは上下で区切る */
  border-bottom: 1px solid var(--cf1-border, #7bbf9a) !important;
}

/* 右セル（値：同意する） */
#container .form-column.form-column-checkbox[data-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]
fieldset:has(> .preview-block[data-tf-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]) > .preview-block{
  display: flex !important;
  align-items: center;

  width: 100%;
  margin: 0 !important;
  padding: 14px 16px !important;
  box-sizing: border-box;

  background: var(--bg-td, #f4fbf4);
  color: #222 !important;
  line-height: 1.6;
}

/* --- 3) 確認画面だけ：説明文を非表示（余白も残さない） ----------- */
#container .form-column.form-column-checkbox[data-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]
fieldset:has(> .preview-block[data-tf-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"])
> .description-block{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* --- 4) SP：同意行の上罫線（欠け対策） ---------------------------- */
@media (max-width: 899px){
  #container .form-column.form-column-checkbox[data-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]
  fieldset:has(> .preview-block[data-tf-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]){
    border-top: 1px solid var(--cf1-border, #7bbf9a) !important;
  }
}

/* --- 5) PC(900px+)：2列（280px/1fr）＋表と罫線をつなぐ ----------- */
@media (min-width: 900px){
  #container .form-column.form-column-checkbox[data-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]
  fieldset:has(> .preview-block[data-tf-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]){
    grid-template-columns: 280px 1fr !important;

    /* 上の表（電話番号行など）の下線と一体化 */
    margin-top: -1px !important;

    /* PCは上下区切りではなく左右区切り */
    border-top: 1px solid var(--cf1-border, #7bbf9a) !important;
  }

  #container .form-column.form-column-checkbox[data-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"]
  fieldset:has(> .preview-block[data-tf-column-id="beff0fb3-873f-430f-bfe9-32a6cdb627d9"])::before{
    border-bottom: 0 !important;
    border-right: 1px solid var(--cf1-border, #7bbf9a) !important;
  }
}

/* 確認画面のメッセージ文言を中央寄せ */
#message-container .message-block.message-block-confirmation{
  text-align: center !important;
}

/* =========================================
   確認画面メッセージ：注意文を上に追加
   ========================================= */

#message-container .message-block.message-block-confirmation{
  text-align: center !important;
}

/* 上に注意文を疑似要素で追加 */
#message-container .message-block.message-block-confirmation::before{
  content: "まだ送信は完了されておりません。";
  display: block;

  font-weight: 500;
  color: #E64242;
  font-size: 20px;

  margin-bottom: 12px; /* 下の文との間隔 */
}

/* =================================================
   Chrome入力時の薄い青（focus）／自動入力（autofill）対策
   対象：MT.net フォーム内のみ
================================================= */

/* 1) 入力中（フォーカス時）に背景色が変わらないよう固定 */
#container .form-column input:focus,
#container .form-column textarea:focus,
#container .form-column select:focus {
  background-color: #fff !important;
}

/* 視認性は枠線やアウトラインで担保（背景を変えない） */
#container .form-column input:focus-visible,
#container .form-column textarea:focus-visible,
#container .form-column select:focus-visible {
  outline: 2px solid rgba(0, 143, 75, 0.35); /* 必要なら色調整 */
  outline-offset: 2px;
}

/* 2) Chromeの自動入力（autofill）で背景色が付くのを抑制 */
#container .form-column input:-webkit-autofill,
#container .form-column textarea:-webkit-autofill,
#container .form-column select:-webkit-autofill,
#container .form-column input:-webkit-autofill:hover,
#container .form-column input:-webkit-autofill:focus,
#container .form-column input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 9999s ease-out 0s; /* チラつき抑制 */
}

/* =================================
   入力エラー表示（MT.net）
================================= */

/* エラー入力欄 */
#container input.mt-invalid,
#container textarea.mt-invalid,
#container select.mt-invalid {
  background-color: #fff2f2 !important;
  border-color: #E64242 !important;
}

/* エラー時にフォーカスした場合 */
#container input.mt-invalid:focus,
#container textarea.mt-invalid:focus,
#container select.mt-invalid:focus {
  background-color: #fff2f2 !important;
  border-color: #E64242 !important;
  outline: 2px solid rgba(230,66,66,0.25);
}

/* エラーメッセージ */
#container .message-block-error {
  color: #E64242;
  font-weight: 500;
}

/* =================================
   チェックボックス表示復旧（MTフォーム）
================================= */

#container input[type="checkbox"]{
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

/* =========================================
   チェックボックス：エラー時の見せ方
========================================= */

/* 「同意する」などチェック項目の “枠” を赤くする */
#container label.option:has(input.mt-invalid),
#container .form-column-checkbox:has(input.mt-invalid) label.option {
  border: 1px solid #E64242;
  background: #fff2f2;
  border-radius: 4px;
  padding: 10px 12px;
}

/* 文字色も少し赤寄せ（任意） */
#container label.option:has(input.mt-invalid) .option-text {
  color: #E64242;
  font-weight: 500;
}

/* チェックボックス自体のアクセントも赤に寄せたい場合（任意） */
#container label.option:has(input.mt-invalid) input[type="checkbox"]{
  accent-color: #E64242;
}