/*
  Xserverメールフォーム スタイルシート
  =====================================
  ナクシオ株式会社サイトのトンマナに合わせたフォームデザインです。
  本ファイルを Xserver のメールフォームフォルダ内の ./css/form.css にアップロードしてください。
  例: メールフォームURL が https://naxio.co.jp/script/mailform/contact/ の場合
      → https://naxio.co.jp/script/mailform/contact/css/form.css に配置

  サイトとの統一ポイント:
  - カラーパレット（#0f172a, #0284c7, #f4f6f8）
  - Noto Sans JP フォント
  - 角丸・余白・シャドウ
  - ホバー時のアクセントカラー変化
*/

/* ========== デザイントークン（サイトと統一） ========== */
.naxio-form-page,
#wrapper.naxio-form-page {
  --color-primary: #0f172a;
  --color-accent: #0284c7;
  --color-text: #1a202c;
  --color-text-muted: #64748b;
  --color-surface: #f4f6f8;
  --color-border: #e2e8f0;
  --color-background: #ffffff;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 8rem;
  --max-width: 800px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-form: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  --focus-ring: 0 0 0 3px rgba(2, 132, 199, 0.15);

  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--color-surface);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding: var(--spacing-2xl) 0;
}

/* ========== ページレイアウト ========== */
.naxio-form-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.naxio-form-header {
  background-color: var(--color-surface);
  padding: var(--spacing-2xl) 0 var(--spacing-xl);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.naxio-form-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 var(--spacing-sm) 0;
  letter-spacing: -0.02em;
}

.naxio-form-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin: 0;
}

.naxio-form-section {
  padding: var(--spacing-2xl) 0;
}

/* ========== フォームボックス（お問い合わせページと同様） ========== */
.naxio-form-box {
  background-color: var(--color-background);
  padding: var(--spacing-xl);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-form);
}

/* ========== エラー表示 {$form_error}（空の場合は非表示） ========== */
.naxio-form-error,
.red_txt.naxio-form-error {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  color: #b91c1c;
  font-size: 0.95rem;
}

/* {$form_error}が空の場合に枠を非表示 */
.naxio-form-error:empty,
.red_txt.naxio-form-error:empty,
.naxio-form-error:has(> span:empty),
.red_txt.naxio-form-error:has(> span:empty) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ========== 説明文 ========== */
.naxio-form-explain {
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.naxio-form-explain p {
  margin: 0;
}

/* ========== 入力画面テーブル {$form_data}（デフォルトはtable形式） ========== */
.naxio-form-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
}

.naxio-form-table th,
.naxio-form-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.naxio-form-table th {
  font-weight: 600;
  color: var(--color-primary);
  width: 30%;
  min-width: 120px;
}

.naxio-form-table td {
  color: var(--color-text);
}

.naxio-form-table input[type="text"],
.naxio-form-table input[type="email"],
.naxio-form-table input[type="tel"],
.naxio-form-table input[type="number"],
.naxio-form-table textarea,
.naxio-form-table select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  box-sizing: border-box;
}

.naxio-form-table textarea {
  resize: vertical;
  min-height: 120px;
}

.naxio-form-table input[type="radio"],
.naxio-form-table input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

.naxio-form-table label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-weight: normal;
  color: var(--color-text);
}

/* サイトへ戻るリンク ========== */
.naxio-form-back {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

/* サイトへ戻る（テキストリンク・入力・確認画面用） */
.naxio-form-back a:not(.naxio-form-back-link) {
  color: var(--color-accent);
  text-decoration: none;
}

.naxio-form-back a:not(.naxio-form-back-link):hover {
  text-decoration: underline;
}

/* ========== フォーム要素 {$form_data}（div形式の場合） ========== */
.naxio-form-data {
  font-size: 1rem;
}

.naxio-form-data label {
  display: block;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.naxio-form-data input[type="text"],
.naxio-form-data input[type="email"],
.naxio-form-data input[type="tel"],
.naxio-form-data input[type="number"],
.naxio-form-data textarea,
.naxio-form-data select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  margin-bottom: var(--spacing-md);
  box-sizing: border-box;
}

.naxio-form-data input:focus,
.naxio-form-data textarea:focus,
.naxio-form-data select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
  background-color: var(--color-background);
}

.naxio-form-data textarea {
  resize: vertical;
  min-height: 150px;
}

/* ラジオ・チェックボックス（flex子要素として横並び、改行時も崩れない） */
.naxio-form-data input[type="radio"],
.naxio-form-data input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
  margin: 0.2em 8px 0 0;
}

/* ラジオ・チェックを含むラベル（flexで横並び、テキスト折り返し時に正しく揃える） */
.naxio-form-data label:has(input[type="radio"]),
.naxio-form-data label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  font-weight: normal;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
}

/* ラジオとラベルが兄弟要素のパターン（XserverのHTMLに応じて） */
.naxio-form-data div:has(> input[type="radio"]),
.naxio-form-data div:has(> input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

.naxio-form-data div:has(> input[type="radio"]) label,
.naxio-form-data div:has(> input[type="checkbox"]) label {
  display: inline;
  margin-bottom: 0;
  cursor: pointer;
}

.naxio-form-data .form_group,
.naxio-form-data .formGroup,
.naxio-form-data > div {
  margin-bottom: var(--spacing-lg);
}

/* 確認ボタン用ラッパー（テンプレートに明示的に配置した場合） */
.naxio-form-submit {
  margin-top: var(--spacing-lg);
}

/* 必須・任意バッジ（Xserverが出力する場合に備え、汎用スタイル） */
.naxio-form-data .required,
.naxio-form-data [class*="required"] {
  background-color: #ef4444;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: normal;
  margin-left: 4px;
}

.naxio-form-data .optional,
.naxio-form-data [class*="optional"] {
  background-color: var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: normal;
  margin-left: 4px;
}

/* ========== 確認ボタン「入力内容を確認する」（Xserverのメッセージ設定で変更可能） ========== */
/* 複数セレクタで確実に適用（XserverのHTML構造・デフォルトCSS上書き対策） */
.naxio-form-page input[type="submit"],
.naxio-form-page input[name="submit_button"],
.naxio-form-page button[type="submit"],
.naxio-form-box input[type="submit"],
.naxio-form-box input[name="submit_button"],
.naxio-form-box button[type="submit"],
.naxio-form-data input[type="submit"],
.naxio-form-data input[name="submit_button"],
.naxio-form-data button[type="submit"] {
  display: block !important;
  width: 100% !important;
  background-color: var(--color-primary) !important;
  color: white !important;
  padding: 1rem !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  margin-top: var(--spacing-lg) !important;
  margin-bottom: 0 !important;
  transition: background-color var(--transition-fast), transform var(--transition-fast) !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.naxio-form-page input[type="submit"]:hover,
.naxio-form-page input[name="submit_button"]:hover,
.naxio-form-page button[type="submit"]:hover,
.naxio-form-box input[type="submit"]:hover,
.naxio-form-box input[name="submit_button"]:hover,
.naxio-form-box button[type="submit"]:hover,
.naxio-form-data input[type="submit"]:hover,
.naxio-form-data input[name="submit_button"]:hover,
.naxio-form-data button[type="submit"]:hover {
  background-color: var(--color-accent) !important;
  transform: translateY(-2px);
  color: white !important;
}

/* ========== 確認画面 {$form_confirm} ========== */
.naxio-form-confirm {
  font-size: 1rem;
}

.naxio-form-confirm table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
}

.naxio-form-confirm th,
.naxio-form-confirm td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.naxio-form-confirm th {
  font-weight: 600;
  color: var(--color-primary);
  width: 30%;
  min-width: 120px;
}

.naxio-form-confirm td {
  color: var(--color-text);
}

.naxio-form-confirm tr:last-child th,
.naxio-form-confirm tr:last-child td {
  border-bottom: none;
}

/* 確認画面のボタン（戻る・送信する） */
.naxio-form-confirm input[type="submit"],
.naxio-form-confirm input[type="button"],
.naxio-form-confirm button {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-right: var(--spacing-md);
  margin-top: var(--spacing-md);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.naxio-form-confirm input[type="submit"],
.naxio-form-confirm button[type="submit"] {
  background-color: var(--color-primary);
  color: white;
  border: none;
}

.naxio-form-confirm input[type="submit"]:hover,
.naxio-form-confirm button[type="submit"]:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px);
}

/* 戻るボタン（セカンダリ） */
.naxio-form-confirm input[type="button"],
.naxio-form-confirm button[type="button"] {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.naxio-form-confirm input[type="button"]:hover,
.naxio-form-confirm button[type="button"]:hover {
  background-color: var(--color-border);
}

/* 定義リスト形式（dl/dt/dd）の確認表示用 */
.naxio-form-confirm dl {
  margin: 0 0 var(--spacing-lg) 0;
}

.naxio-form-confirm dt {
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
}

.naxio-form-confirm dt:first-child {
  margin-top: 0;
}

.naxio-form-confirm dd {
  margin: 0;
  color: var(--color-text);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

/* ========== 完了画面 ========== */
.naxio-form-complete-box {
  text-align: center;
}

.naxio-form-complete-message {
  font-size: 1.1rem;
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: var(--spacing-xl);
}

.naxio-form-complete-link {
  margin: 0;
}

.naxio-form-back-link {
  display: inline-block;
  padding: 0.75rem 2rem;
  background-color: var(--color-primary);
  color: white !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.naxio-form-back-link:hover,
.naxio-form-back-link:focus,
.naxio-form-back-link:visited {
  color: white !important;
  text-decoration: none !important;
}

.naxio-form-back-link:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px);
}

/* 完了画面のサイトへ戻るボタン（XserverデフォルトCSS上書き用） */
.naxio-form-complete-box .naxio-form-back-link,
.naxio-form-page .naxio-form-complete-box a.naxio-form-back-link {
  color: white !important;
}