/* --- 全体的な調整 --- */
#form-input {
  max-width: 950px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

#form-input h1 {
  font-size: 22px;
  color: #fc7355;
  border-left: 6px solid #fc7355;
  padding: 5px 15px;
  margin-bottom: 30px;
}

/* --- テーブルスタイルのブラッシュアップ --- */
.table_form_add {
  width: 100%;
  margin: 0 0 50px 0;
  border-collapse: collapse;
  font-size: 15px; /* 少し大きく */
  line-height: 1.6;
}

.table_form_add th {
  width: 25%; /* 20%だと狭いので少し広げました */
  padding: 25px 20px;
  border-bottom: solid 1px #e5e5e5;
  background-color: #f9f9f9; /* 見出しに薄い色をつけて視認性アップ */
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
  font-weight: bold;
}

.table_form_add td {
  padding: 20px;
  border-bottom: solid 1px #e5e5e5;
  box-sizing: border-box;
}

/* --- 入力要素の強化 --- */
.table_form_add input[type="text"],
.table_form_add input[type="email"],
.table_form_add input[type="number"],
.table_form_add textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px; /* 少し角を丸める */
  box-sizing: border-box;
  font-size: 16px; /* スマホのズーム防止 */
  background-color: #fff;
  transition: all 0.3s;
  outline: none;
  -webkit-appearance: none;
}

.table_form_add .input_half {
  width: 50%;
  min-width: 250px;
}

.table_form_add .input_post {
  width: 150px;
  margin-bottom: 10px;
  display: inline-block;
}

.table_form_add .input_sheets {
  width: 120px;
  display: inline-block;
}

/* フォーカス時の色をネイビーに */
.table_form_add input:focus,
.table_form_add textarea:focus {
  border: 1px solid #fc7355 !important;
  box-shadow: 0 0 5px rgba(35, 40, 127, 0.2);
}

/* --- ラジオボタン・チェックボックス --- */
.table_form_add label {
  display: inline-block;
  margin-right: 15px;
  cursor: pointer;
  padding: 5px 0;
}

.table_form_add .radio, 
.table_form_add .cheackbox {
  margin: 0 5px 0 0;
  transform: scale(1.1);
}

/* --- 必須ラベルと注意書き --- */
.table_form_add span.required {
  margin: 0 0 0 8px;
  padding: 2px 6px;
  font-size: 11px;
  color: #fff;
  background: #cc0000; /* 赤背景に白文字で目立たせる */
  border-radius: 3px;
  vertical-align: middle;
}

.table_form_add td span.caution {
  margin: 10px 0 5px;
  font-size: 13px;
  color: #cc0000;
  display: block;
  line-height: 1.4;
}

/* エラーメッセージ（PHPから出力される用） */
.error_msg {
  display: block;
  color: #cc0000;
  font-size: 14px;
  font-weight: bold;
  margin-top: 5px;
}

/* --- レスポンシブ (スマホ対応) --- */
@media screen and (max-width: 767px) {
  .table_form_add th, 
  .table_form_add td {
    display: block;
    width: 100% !important;
    border-bottom: none;
    padding: 10px 15px;
  }

  .table_form_add th {
    background-color: #fc7355;
    color: #fff;
    padding: 8px 15px;
  }
  
  .table_form_add th span.required {
    background: #fff;
    color: #cc0000;
  }

  .table_form_add td {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 25px;
  }

  .table_form_add .input_half,
  .table_form_add .input_post,
  .table_form_add .input_sheets {
    width: 100%; /* スマホでは横幅いっぱい */
  }
}









/* ボタンのリストを横並びにする */
.btn_table_form_add {
  display: flex;             /* 横並び */
  justify-content: center;   /* 中央寄せ */
  gap: 20px;                 /* ボタン同士の間隔 */
  margin: 50px auto;
  padding: 0;
  list-style: none;
}

/* 共通のボタンスタイル */
.btn_table_form_add li input {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  padding: 16px 30px 16px 54px; /* アイコンのスペースを左に確保 */
  border-radius: 4px;
  transition: all 0.3s;
  background-repeat: no-repeat;
  background-position: 20px center; /* アイコンの位置 */
  background-size: 20px;            /* アイコンのサイズ */
  min-width: 220px;
}

/* 「戻る」ボタンのスタイル（シンプルにグレー系） */
.btn_table_form_add input[type="button"] {
  background-color: #f0f0f0;
  color: #666;
  border: 1px solid #ccc;
  /* 左向き矢印アイコン（SVGデータ） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
}

.btn_table_form_add input[type="button"]:hover {
  background-color: #e5e5e5;
}

/* 「送信する」ボタンのスタイル（キーカラー） */
.btn_table_form_add input[type="submit"] {
  background-color: #fc7355; /* キーカラー */
  color: #fff;
  /* 紙飛行機アイコン（SVGデータ） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19l9 2-9-18-9 18 9-2zm0 0v-8'/%3E%3C/svg%3E");
}

.btn_table_form_add input[type="submit"]:hover {
  background-color: #e5684d; /* ホバー時に少し濃く */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(252, 115, 85, 0.3);
}

/* スマホ対応：画面が狭いときは縦に並べる */
@media screen and (max-width: 600px) {
  .btn_table_form_add {
    flex-direction: column-reverse; /* 戻るを下に、送信を上に */
    align-items: center;
    gap: 15px;
  }
  .btn_table_form_add li,
  .btn_table_form_add input {
    width: 100%;
    max-width: 300px;
  }
}





/* 完了ページ全体のレイアウト */
.thanks {
  max-width: 800px;
  margin: 60px auto;
  padding: 0 20px;
  text-align: center;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* タイトル：ネイビーで信頼感を */
.thanks h1 {
  font-size: 26px;
  color: #23287f;
  margin-bottom: 40px;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}

/* タイトルの下の飾り線（キーカラーを使用） */
.thanks h1::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #fc7355;
}

/* コンテンツを囲むボックス */
.thanks-box {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 50px 30px;
  margin-bottom: 40px;
}

/* メインの御礼メッセージ：キーカラーで明るく */
.table_form_add_thanks {
  font-size: 22px;
  font-weight: bold;
  color: #fc7355;
  line-height: 1.6;
  margin-bottom: 30px !important;
  padding: 0 !important;
}

/* 補足説明：安心感を与えるテキスト */
.thanks-note {
  font-size: 15px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 40px;
}

/* トップへ戻るボタン：シンプル＆アイコン付き */
.btn-top {
  display: inline-block;
  background-color: #23287f; /* ボタンはあえて落ち着いたネイビーに */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 16px 50px 16px 70px;
  border-radius: 4px;
  transition: all 0.3s;
  position: relative;
}

/* ボタンの中の家（ホーム）アイコン */
.btn-top::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.btn-top:hover {
  background-color: #1a1e60;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(35, 40, 127, 0.2);
}

/* スマホ対応 */
@media screen and (max-width: 600px) {
  .thanks {
    margin: 40px auto;
  }
  .thanks h1 {
    font-size: 22px;
  }
  .thanks-box {
    padding: 30px 15px;
  }
  .table_form_add_thanks {
    font-size: 18px;
  }
  .btn-top {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px 16px 40px;
  }
}




/* 1. 郵便番号の枠 */
.form-address .input_post {
  width: 140px !important;    /* 郵便番号に適切な幅 */
  display: inline-block !important; 
  vertical-align: middle;
  margin: 0 10px 0 5px !important;
}

/* 2. 住所の枠（下の段にする） */
.form-address .input_all {
  display: block !important;  /* これで住所だけが次の行に落ちる */
  width: 100% !important;     /* 住所は横幅いっぱい */
  margin-top: 12px !important; /* 郵便番号との隙間 */
}

/* 3. 〒マークの微調整 */
.form-address {
  line-height: 1; /* 行間をリセットして位置を合わせやすくする */
}