@charset "UTF-8";
/* ==========================================================================
   玉野自動車教習所 入所申込フォーム用 CSS
   対象範囲: #formBox 内のフォーム部分のみ
   設計方針: シンプル・見やすい・打ち込みやすい / PC・SP 両対応
   ========================================================================== */

/* --------------------------------------------------------------------------
   変数（色・サイズの一元管理）
   ※ ここの値を変えるだけで全体の色味・余白を調整できます
   -------------------------------------------------------------------------- */
#formBox {
  --form-primary:        #1f8fd6;   /* メインの青（ヘッダーに合わせた色） */
  --form-primary-dark:   #1772ac;   /* 押した時などの濃い青 */
  --form-text:           #333333;   /* 本文の文字色 */
  --form-text-sub:       #777777;   /* 補足説明の文字色 */
  --form-border:         #d5dce2;   /* 入力欄・線の色 */
  --form-border-focus:   #1f8fd6;   /* 入力中の枠線の色 */
  --form-bg:             #ffffff;   /* 入力欄の背景 */
  --form-bg-th:          #f4f7f9;   /* 項目名（左側）の背景 */
  --form-bg-panel:       #eef5fb;   /* 案内パネルの背景 */
  --form-required:       #e8473f;   /* 「必須」バッジの色 */
  --form-red:            #d83b34;   /* 注意書きの赤文字 */
  --form-radius:         6px;       /* 角丸 */
  --form-gap:            16px;      /* 標準の余白 */

  /* ロゴ枠(.sds-header__top: 中央寄せ最大1280px + 左右padding28px)に左端を合わせる。
     親要素(.wrap / #content)の幅・余白に左右されないよう、ビューポート中央(50vw)を基準にする。
     ロゴ先頭 = 画面中央から左へ (1280/2 - 28) = 612px の位置。
     ※ %ではなく vw を使うことで、親要素の幅に依存せずロゴと同じ基準になる。 */
  width: auto;
  max-width: 1224px;                          /* ロゴ枠の内側幅 1280 - 28×2 */
  margin-left: max(16px, calc(50vw - 545px)); /* 画面中央から左へ596px（ロゴ「D」の描画開始位置に合わせて微調整） */
  margin-right: max(16px, calc(50vw - 545px));/* 左右対称に */
  margin-top: 150px;                           /* 固定ヘッダー(#commonHeader)の高さ分の逃げ */
  margin-bottom: 0;
  padding: 0;
  color: var(--form-text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}
#formBox *,
#formBox *::before,
#formBox *::after {
  box-sizing: border-box;
}

ol, ul {
  list-style: none;
}

/* --------------------------------------------------------------------------
   進捗表示（Step1 → 確認 → 完了）
   -------------------------------------------------------------------------- */
#formBox .form_header {
  margin: 0 0 24px;
  border-radius: var(--form-radius);
  overflow: hidden;
  border: 1px solid #cfe3f4;
}
#formBox .form_header__bar {
  background: var(--form-primary);
  padding: 14px 18px;
}
#formBox .form_header__title {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
}
#formBox .form_header__sub {
  display: block;
  margin-top: 2px;
  color: #cfe6f7;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: .04em;
}
#formBox .form_breadcrumb {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 14px 18px;
  background: #fff;
  gap: 6px;
}
#formBox .form_breadcrumb li {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: var(--form-text-sub);
  line-height: 1.3;
}
#formBox .form_breadcrumb li::before {
  content: "";
  display: block;
  height: 6px;
  margin-bottom: 8px;
  border-radius: 3px;
  background: #d5dce2;
}
#formBox .form_breadcrumb li.current,
#formBox .form_breadcrumb li.done {
  color: var(--form-primary-dark);
}
#formBox .form_breadcrumb li.current::before,
#formBox .form_breadcrumb li.done::before {
  background: var(--form-primary);
}

/* --------------------------------------------------------------------------
   案内パネル（青背景の説明ボックス）
   -------------------------------------------------------------------------- */
#formBox .panel {
  background: var(--form-bg-panel);
  border: 1px solid #cfe3f4;
  border-radius: var(--form-radius);
  padding: 16px 18px;
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.8;
}
#formBox .panel ul {
  margin: 0;
  padding-left: 1em;
  list-style: none;
}
#formBox .panel ul li {
  text-indent: -1em;
  padding-left: 1em;
}
#formBox .panel .textTel {
  font-weight: bold;
  color: var(--form-primary-dark);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   セクション見出し（お客様情報 / 質問事項 など）
   -------------------------------------------------------------------------- */
#formBox .header-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--form-primary-dark);
  border-left: 5px solid var(--form-primary);
  padding: 6px 0 6px 12px;
  margin: 36px 0 14px;
  line-height: 1.4;
}
#formBox .header-title:first-of-type {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   入力テーブル本体
   PC: 「項目名｜入力欄」の横並び / SP: 縦積み（後述のメディアクエリで切替）
   -------------------------------------------------------------------------- */
#formBox .formTbl01 {
  margin-bottom: 8px;
}
#formBox .formTbl01 table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  overflow: hidden;
}
#formBox .formTbl01 th,
#formBox .formTbl01 td {
  border-top: 1px solid var(--form-border);
  text-align: left;
  vertical-align: top;
  padding: 18px 18px;
}
#formBox .formTbl01 tr:first-child th,
#formBox .formTbl01 tr:first-child td {
  border-top: none;
}
/* 項目名（左側のセル） */
#formBox .formTbl01 th {
  width: 280px;
  background: var(--form-bg-th);
  font-weight: bold;
  font-size: 15px;
  line-height: 1.5;
  border-right: 1px solid var(--form-border);
}
#formBox .formTbl01 td {
  background: var(--form-bg);
}

/* 「必須」バッジ */
#formBox .itemTag {
  display: inline-block;
  background: var(--form-required);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: 2px;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   入力欄（テキスト・メール・電話・セレクト・テキストエリア）
   -------------------------------------------------------------------------- */
#formBox .form_row {
  margin-bottom: 8px;
}
#formBox .form_row:last-child {
  margin-bottom: 0;
}

#formBox input[type="text"],
#formBox input[type="tel"],
#formBox input[type="email"],
#formBox input[type="number"],
#formBox select,
#formBox textarea {
  font-size: 16px;          /* iOSで拡大ズームを防ぐため16px以上 */
  font-family: inherit;
  color: var(--form-text);
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  padding: 12px 14px;
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#formBox textarea {
  min-height: 110px;
  resize: vertical;
}

/* 入力中（フォーカス時）に枠を青く光らせる */
#formBox input[type="text"]:focus,
#formBox input[type="tel"]:focus,
#formBox input[type="email"]:focus,
#formBox input[type="number"]:focus,
#formBox select:focus,
#formBox textarea:focus {
  outline: none;
  border-color: var(--form-border-focus);
  box-shadow: 0 0 0 3px rgba(31, 143, 214, 0.18);
}

/* セレクトボックスに下向き矢印を付ける */
#formBox select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23777' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

/* 入力欄の幅バリエーション（元HTMLのclassに対応） */
#formBox input.small,
#formBox select.small   { width: auto; min-width: 90px; max-width: 100%; }
#formBox select.mini   { width: auto; min-width: 90px; max-width: 100%; }
#formBox input.small01  { width: 5em;  text-align: center; }   /* 年・月・日 */
#formBox input.medium00 { width: 8em; }                         /* 郵便番号 */
#formBox input.medium01 { width: 100%; max-width: 280px; }
#formBox input.medium02 { width: 100%; }
#formBox input.large01,
#formBox textarea.large01 { width: 100%; }

/* 生年月日・郵便番号などの「年/月/日」「〒」を欄と揃える */
#formBox td {
  font-size: 15px;
}
#formBox input.small01 + br { display: none; }

/* 補足説明テキスト */
#formBox .txtSmall {
  font-size: 13px;
  color: var(--form-text-sub);
  line-height: 1.7;
  margin: 8px 0 0;
}
#formBox .textRed,
#formBox .fRed,
#formBox .look-red {
  color: var(--form-red);
  font-weight: bold;
}
#formBox .txtSmall a {
  color: var(--form-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   ラジオボタン・チェックボックス
   文字も含めてタップしやすいよう、ラベルごとボックス化
   -------------------------------------------------------------------------- */
#formBox input[type="radio"],
#formBox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  vertical-align: -4px;
  accent-color: var(--form-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* ラベル（選択肢の文字）をタップ範囲に含める */
#formBox .control-label {
  display: inline-flex;
  align-items: flex-start;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 18px 8px 0;
  padding: 4px 6px 4px 0;
}

/* 選択肢を縦に並べる箱（職業・進路・現有免許など） */
#formBox .radioItem,
#formBox .checkboxItem,
#formBox td > .form_row > .form_row {
  display: inline-block;
  margin-bottom: 4px;
}
#formBox .radioItem .control-label,
#formBox .checkboxItem .control-label,
#formBox td > .form_row > .form_row .control-label {
  margin-right: 0;
  margin-bottom: 0;
}

/* チェック/ラジオを行ごとに分けるラッパに余白とライン */
#formBox .form_row > .form_row {
  padding: 6px 0;
  border-bottom: 1px dashed #e4e9ed;
}
#formBox .form_row > .form_row:last-child {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   郵便番号→住所 自動入力ボタン
   -------------------------------------------------------------------------- */
#formBox .zipcode-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#formBox .zipcode-search-btn {
  background: var(--form-primary);
  color: #fff;
  border: none;
  border-radius: var(--form-radius);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}
#formBox .zipcode-search-btn:hover {
  background: var(--form-primary-dark);
}
#formBox .zipcode-search-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* --------------------------------------------------------------------------
   アコーディオン（受講可能時間帯・補足入力欄など）
   ※ 開閉のJS動作は既存のまま。ここでは見た目だけ整える
   -------------------------------------------------------------------------- */
/* 曜日ごとの開閉枠（JSなし・HTML標準のdetails/summaryで開閉） */
#formBox .accordion-details {
  margin-bottom: 6px;
}
/* summaryのデフォルト三角マーカーを消す */
#formBox .accordion-toggle {
  display: block;
  background: var(--form-primary);
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  padding: 12px 16px;
  border-radius: var(--form-radius);
  cursor: pointer;
  position: relative;
  user-select: none;
  list-style: none;
}
#formBox .accordion-toggle::-webkit-details-marker {
  display: none;
}
#formBox .accordion-details[open] .accordion-toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#formBox .accordion-toggle:hover {
  background: var(--form-primary-dark);
}
#formBox .accordion-toggle .accordion-toggle-icon {
  display: block;
}
/* 右側に開閉の▼マークを表示（開いたとき回転） */
#formBox .accordion-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
#formBox .accordion-details[open] .accordion-toggle::after {
  transform: translateY(-30%) rotate(225deg);
}

/* アコーディオンの中身（detailsが閉じている間は自動で非表示） */
#formBox .accordion {
  border: 1px solid var(--form-border);
  border-top: none;
  border-radius: 0 0 var(--form-radius) var(--form-radius);
  padding: 14px 16px;
  background: #fafcfe;
}
/* アコーディオン内に直接ある label（曜日見出し）と全選択チェックは控えめに */
#formBox .accordion > label {
  font-weight: bold;
  font-size: 14px;
  margin-right: 8px;
}

/* 時間帯の選択肢をタイル状に並べる（指で押しやすい） */
#formBox .lecture_time {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  border: none;
  padding: 0;
}
#formBox .lecture_time-item {
  margin: 0;
  border: none;
  padding: 0;
}
#formBox .lecture_time-item .control-label {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  background: #fff;
  font-size: 14px;
  white-space: nowrap;
}
#formBox .lecture_time-item .control-label:hover {
  border-color: var(--form-primary);
  background: #f0f8fe;
}

/* --------------------------------------------------------------------------
   誓約書（番号付きリスト）
   -------------------------------------------------------------------------- */
/* 誓約書アコーディオン（JSなし・details/summaryで開閉） */
#formBox .pledge-details {
  margin: 36px 0 24px;
}
#formBox .pledge-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 18px;
  font-weight: bold;
  color: var(--form-primary-dark);
  border-left: 5px solid var(--form-primary);
  padding: 8px 32px 8px 12px;
  line-height: 1.4;
  cursor: pointer;
  position: relative;
  user-select: none;
  list-style: none;
}
#formBox .pledge-summary::-webkit-details-marker {
  display: none;
}
#formBox .pledge-summary:hover {
  background: var(--form-bg-panel);
}
/* 「タップして内容をご確認ください」の促し文（小さめ・通常色） */
#formBox .pledge-summary-hint {
  font-size: 13px;
  font-weight: normal;
  color: var(--form-text-sub, #666);
}
/* 開閉の▼マーク（開いたとき回転） */
#formBox .pledge-summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--form-primary);
  border-bottom: 2px solid var(--form-primary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
#formBox .pledge-details[open] .pledge-summary::after {
  transform: translateY(-30%) rotate(225deg);
}
/* 開いたとき、誓約書本文（panel）の上の余白を詰めて見出しと繋げる */
#formBox .pledge-details .panel {
  margin-top: 10px;
  margin-bottom: 0;
}

#formBox .pledge-list {
  margin: 0;
  padding-left: 1.6em;
  font-size: 14px;
  line-height: 1.8;
}
#formBox .pledge-list li {
  margin-bottom: 12px;
}
#formBox .pledge-list li:last-child {
  margin-bottom: 0;
}
#formBox .pledge-list p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   ファイル選択（本人確認書類）
   -------------------------------------------------------------------------- */
#formBox input[type="file"] {
  font-size: 14px;
  padding: 10px;
  border: 1px dashed var(--form-border);
  border-radius: var(--form-radius);
  background: #fafcfe;
  width: 100%;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   送信ボタン
   -------------------------------------------------------------------------- */
#formBox #submitBtn {
  text-align: center;
  margin: 32px 0 48px;
}
#formBox input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: var(--form-primary);
  border: none;
  border-radius: 50px;
  padding: 16px 64px;
  min-width: 280px;
  max-width: 100%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(31, 143, 214, 0.3);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
#formBox input[type="submit"]:hover {
  background: var(--form-primary-dark);
  box-shadow: 0 6px 16px rgba(31, 143, 214, 0.4);
}
#formBox input[type="submit"]:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(31, 143, 214, 0.3);
}

/* ==========================================================================
   スマホ・タブレット対応（768px以下）
   テーブルを縦積みに切り替える
   ========================================================================== */
@media screen and (max-width: 768px) {
  #formBox {
    font-size: 15px;
    /* スマホは従来どおり：中央寄せ・左右12px余白に戻す（PC用のcalcマージンを打ち消す） */
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    padding: 0 12px;
  }

  #formBox .header-title {
    font-size: 16px;
    margin: 28px 0 12px;
  }

  /* テーブルの行を縦積みに */
  #formBox .formTbl01 table,
  #formBox .formTbl01 tbody,
  #formBox .formTbl01 tr,
  #formBox .formTbl01 th,
  #formBox .formTbl01 td {
    display: block;
    width: 100%;
  }
  #formBox .formTbl01 table {
    border-radius: var(--form-radius);
  }
  /* 項目名は上、入力欄は下 */
  #formBox .formTbl01 th {
    border-right: none;
    border-bottom: none;
    padding: 14px 14px 8px;
    font-size: 14px;
  }
  #formBox .formTbl01 td {
    padding: 14px 16px;
    border-top: none;
  }
  /* 行と行の区切り */
  #formBox .formTbl01 tr {
    border-top: 1px solid var(--form-border);
  }
  #formBox .formTbl01 tr:first-child {
    border-top: none;
  }

  /* 選択肢の文字を大きめ・行間広めに（押しやすく） */
  #formBox .control-label {
    font-size: 15px;
    margin-bottom: 6px;
  }

  /* 生年月日などの横並びが窮屈にならないよう調整 */
  #formBox input.small01 {
    width: 4em;
  }

  #formBox .breadcrumb,
  #formBox .form_breadcrumb li {
    font-size: 12px;
    padding: 8px 2px;
  }

  /* 送信ボタンは幅いっぱい */
  #formBox input[type="submit"] {
    width: 100%;
    min-width: 0;
    padding: 16px;
    font-size: 17px;
  }
}

/* さらに小さい画面（480px以下）の微調整 */
@media screen and (max-width: 480px) {
  #formBox .lecture_time {
    gap: 6px;
  }
  #formBox .lecture_time-item .control-label {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   未使用フィールドの非表示
   violation_check_2_disdate_year は from～to で期間入力が完結するため画面には
   表示しない。ただしHTML上は出力しておき、form_end による未出力フィールドの
   自動表示（ボタン下への露出）を防ぐ。
   -------------------------------------------------------------------------- */
#formBox .sds-hidden-field {
  display: none !important;
}

/* --------------------------------------------------------------------------
   確認画面ボタン（横並び対応）
   -------------------------------------------------------------------------- */
.formButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;          /* ボタン同士の間隔 */
  margin: 48px 0;
  width: 100%;
}

.formButton-wrap {
  flex: 1;
  max-width: 280px;   /* ボタンの最大幅 */
  width: 100%;
}

/* ボタン共通のベーススタイル */
.formButtons input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  font-size: 18px;
  font-weight: bold;
  border-radius: 50px;
  padding: 16px 0;    /* 左右のパディングをなくし、幅100%で均等にします */
  width: 100%;
  min-width: 0;       /* 既存のmin-width設定を上書き */
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  text-align: center;
  display: block;
}

/* 送信ボタンの装飾（既存のデザインを踏襲） */
.formButton-submit input[type="submit"] {
  color: #fff;
  background: var(--form-primary);
  border: none;
  box-shadow: 0 4px 12px rgba(31, 143, 214, 0.3);
}
.formButton-submit input[type="submit"]:hover {
  background: var(--form-primary-dark);
  box-shadow: 0 6px 16px rgba(31, 143, 214, 0.4);
}

/* 修正するボタンの装飾（白背景に青文字の引き算デザイン） */
.formButton-back input[type="submit"] {
  color: var(--form-primary);
  background: #000 !important;
  border: 2px solid var(--form-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.formButton-back input[type="submit"]:hover {
  color: #fff;
  background: var(--form-primary);
  box-shadow: 0 6px 16px rgba(31, 143, 214, 0.2);
}

/* クリック時の共通エフェクト */
.formButtons input[type="submit"]:active {
  transform: translateY(1px);
}

/* スマートフォン表示（768px以下）での調整 */
@media screen and (max-width: 768px) {
  .formButtons {
    flex-direction: column-reverse; /* スマホでは「修正」を下に、「送信」を上に縦積みします */
    gap: 14px;
    padding: 0 16px;
  }
  .formButton-wrap {
    max-width: 100%; /* スマホでは画面幅いっぱいに広げます */
  }
  .formButtons input[type="submit"] {
    font-size: 17px;
    padding: 14px 0;
  }
}

/* --------------------------------------------------------------------------
   完了画面（サンクスページ）のスタイリング
   -------------------------------------------------------------------------- */
.sds-thanks {
  text-align: center;
  padding: 40px 20px 60px;
  background: #fff;
  border-radius: var(--form-radius);
}

/* チェックマークのアイコン */
.sds-thanks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: #e6f4ea; /* 薄い緑の背景 */
  color: #137333;            /* 濃い緑のチェック */
  font-size: 32px;
  font-weight: bold;
  border-radius: 50%;
  margin-bottom: 24px;
}

/* メインタイトル */
.sds-thanks__title {
  font-size: 24px;
  font-weight: bold;
  color: var(--form-text);
  margin: 0 0 16px;
  line-height: 1.4;
}

/* 説明文 */
.sds-thanks__body {
  font-size: 15px;
  color: var(--form-text-sub);
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto 36px; /* 中央寄せにしてボタンとの間隔を空ける */
}

/* ボタンのコンテナ */
.sds-thanks #returnBtn {
  text-align: center;
}

/* サイトトップへ戻るボタン */
.sds-thanks__btn {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: var(--form-primary);
  background: #fff;
  border: 2px solid var(--form-primary);
  border-radius: 50px;
  padding: 14px 48px;
  min-width: 240px;
  text-decoration: none; /* リンクの下線を消す */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}

/* ボタンホバー時 */
.sds-thanks__btn:hover {
  color: #fff;
  background: var(--form-primary);
  box-shadow: 0 6px 16px rgba(31, 143, 214, 0.2);
}

/* ボタンクリック時 */
.sds-thanks__btn:active {
  transform: translateY(1px);
}

/* スマートフォン表示（768px以下）での微調整 */
@media screen and (max-width: 768px) {
  .sds-thanks {
    padding: 30px 10px 40px;
  }
  .sds-thanks__icon {
    width: 56px;
    height: 56px;
    font-size: 26px;
    margin-bottom: 18px;
  }
  .sds-thanks__title {
    font-size: 20px;
  }
  .sds-thanks__body {
    font-size: 14px;
    text-align: left; /* スマホの長文は左寄せの方が見やすいため */
  }
  .sds-thanks__btn {
    width: 100%; /* スマホではボタンを横いっぱいに広げる */
    padding: 14px 0;
  }
}

.formTbl01 table td li {
	float: left;
	margin-right: 10px;
}

@media screen and (max-width: 768px) {
	.formTbl01 table td li {
		float: none;
		margin-right: 0;
	}
}

@media screen and (min-width: 769px) {
	.address table th{
		width: 120px !important;
	}
}

/* error
------------------------------- */
.errorTxt {
	margin-top: 8px;
	font-size: 83.4%;
	color: #ff0000;
}

div.form_error_box {
    margin: 10px auto;
	padding: 10px;
	color: #F00;
	border: solid 1px #CE4844;
	background: #FDF3F5;
	border-radius: 3px;
	clear: both;
}