/* ============================================================
   apply.css — オンライン申請フォーム専用スタイル
   元 申請フォーム.html のインライン <style> を移植したもの。
   配色・フォント等は Tailwind 設定（apply レイアウト）と併用する。
   ============================================================ */

body {
  background-color: #f7f9fb;
  font-family: "Public Sans", "Noto Sans JP", sans-serif;
}

/* Material Symbols のデフォルトウェイト等 */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* 細いボーダー（ヘッダー下線など） */
.hairline-b {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ステップ切り替え時のフェードイン */
.fade-step {
  animation: fadeStep .35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fadeStep {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 金額表示などの等幅数字 */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* number 入力のスピナーを消す */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* プレースホルダーの色 */
input::placeholder,
textarea::placeholder {
  color: #d4d9df !important;
  opacity: 1;
  font-weight: 400;
}

input,
select,
textarea {
  color: #191c1e;
}