@charset "utf-8";

/**
 * 個人情報お問い合わせ（/privacy/* の入力・確認など #main.privacy-form を含むページ）専用
 *
 * 1) common/style.css の #main2ColumnArea #main { width:680px } は ID×2 で
 *    #mainContent .privacy-form より詳細度が高く、こちらが効かず列幅が狭いままになる。
 * 2) contact.css の .contactForm .formTable select { width:86% } は #mainContent 付きで上書き。
 *
 * body.privacy-inquiry-form は privacy/parent.blade.php の script で付与（:has 非依存）。
 * コンテンツが必要とする幅まで広げ、viewport や #mainContent（960px）を超えないよう max-width で抑える。
 *
 * 読み込み: form.blade / check.blade 等で @push('privacy_extra_style') により
 *            privacy/parent の @stack('privacy_extra_style') に差し込む。
 */

/*
 * フォーム全体をコンテンツ幅に（余白まで無理に広げない）。
 * max-width:100% で #mainContent / viewport を超えない。/contact とは body クラスで切り分け。
 * 中央寄せはしない（従来どおり左端位置を維持）。
 */
body.privacy-inquiry-form form#main2ColumnArea {
  width: fit-content;
  max-width: 100%;
}

/* contact.css の .submitArea { width:680px; float:left } を外し、フォーム幅をテーブル主体に */
body.privacy-inquiry-form .contactForm .submitArea {
  float: none;
  width: auto;
  max-width: 100%;
}

@media screen and (min-width: 700px) {
  /* ID×2 + クラス1 で #main2ColumnArea #main { width:680px } を上書き */
  #main2ColumnArea #main.privacy-form {
    float: none;
    width: auto;
    max-width: 100%;
  }
}

/* 入力列が縮みすぎないようテーブルは自動レイアウト（幅は中身に合わせる） */
#mainContent .privacy-form .formTable {
  table-layout: auto;
  width: auto;
  max-width: 100%;
}

/* データセル側に余白を譲る（子の 100% 幅の基準を確実にする） */
#mainContent .privacy-form .formTable td {
  width: auto;
  min-width: 0;
}

#mainContent .privacy-form .formTable td > div {
  min-width: 0;
  max-width: 100%;
}

/*
 * contact.css より詳細度を上げ、必要箇所のみ !important で 86%/92% を上書き
 * （#mainContent は contact_style.css 側のセレクタ整合のため付与）
 */
#mainContent .privacy-form .formTable select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

/* 生年月日（type=date）は contact.css どおり幅 auto のまま */
#mainContent .privacy-form .formTable input.inputText:not([type="date"]),
#mainContent .privacy-form .formTable textarea.textarea {
  width: 100% !important;
  max-width: 100% !important;
}

#mainContent .privacy-form .formTable input[type="date"].privacy-input-date {
  width: auto !important;
  max-width: 100% !important;
  min-height: 40px;
  box-sizing: border-box !important;
}

/* エラー帯の最大幅（入力列が広いときの横伸びを抑える） */
body.privacy-inquiry-form #mainContent .contactForm .formTable p.error.c-form-error-text {
  max-width: 416px;
  box-sizing: border-box;
}

/*
 * SP: 上段と同じ「ブロック化された表」に揃える＋長い th 見出しの nowrap はみ出しを防ぐ。
 * （条件付き tbody の display は privacyvalidaterules.js で block / table-row-group を切替）
 */
@media screen and (max-width: 699px) {
  body.privacy-inquiry-form form#main2ColumnArea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #main2ColumnArea #main.privacy-form {
    width: 100%;
    max-width: 100%;
    float: none;
  }

  #mainContent .privacy-form .formTable {
    width: 100%;
    max-width: 100%;
  }

  #mainContent .privacy-form .formTable th .th_label {
    white-space: normal;
    flex-wrap: wrap;
  }
}