@charset "UTF-8";
/* CSS Document */
table.contact-mail { font-size: 1.8rem; display: block; }
table.contact-mail td { font-weight: bold; color: #682017; padding:0.5em;}
table.contact-mail td.ttl { width:35%; vertical-align: top;}
table.contact-mail td.body { width:65%;}
td span { font-size: 1rem; color:#FF0000; }
input.txt { width:100%!important;}
.ind-1 { text-indent: -1em; padding-left:1em;font-size: 1.4rem; line-height: 24px; color: #682017;}
.tensen {
  background-image: repeating-linear-gradient(90deg, #682017, #682017 3px, transparent 3px, transparent 7px);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 100% 1px; margin-top:4%;
}

/* ==========================================================
   スマートフォン用の設定（画面幅767px以下）
   ========================================================== */
@media screen and (max-width: 767px) {
  /* テーブル本体と行（tr）をブロック要素にして1列にする */
  .contact-mail,
  .contact-mail tbody,
  .contact-mail tr {
    display: block;
    width: 100% !important;
  }

  /* セル（td）もすべてブロック要素にし、縦に並べる */
  .contact-mail td {
    display: block;
    width: 100% !important;
    box-sizing: border-box; /* 余白や枠線が幅からはみ出すのを防ぐ */
  }

  /* 上段（タイトル部分）の装飾調整 */
  .contact-mail td.ttl {
    padding-top: 15px;
    padding-bottom: 5px;
    font-weight: bold;
    /* 必要に応じて、背景色を少し変えるなどすると見やすくなります */
    /* background-color: #f9f9f9; */ 
  }

  /* 下段（入力フォーム部分）の装飾調整 */
  .contact-mail td.body,
  .contact-mail td:not(.ttl) { /* クラス名がない「お問い合わせ内容」の右隣のtdも対象にする */
    padding-top: 0;
    padding-bottom: 15px;
  }

  /* 入力エリア（input, textarea）がスマホ画面からはみ出さないように100%にする */
  .contact-mail input[type="text"].txt,
  .contact-mail textarea.txt {
    width: 100% !important;
    box-sizing: border-box;
  }
  
  /* 電話番号のグループを横並びで固定する */
  .contact-mail .tel-group {
    display: flex;
    align-items: center; /* 「-」と入力欄の上下中央を揃える */
    gap: 8px;            /* 入力欄と「-」の間の程よい隙間 */
    width: 100%;
  }

  /* 電話番号の中のinput要素の幅を自動調整する */
  .contact-mail .tel-group input[type="text"] {
    flex: 1;             /* 3つの入力欄が画面幅に合わせて均等に伸び縮みする */
    min-width: 0;        /* 画面幅が狭くなっても潰れないようにするおまじない */
    box-sizing: border-box;
    padding: 2px 6px;        /* スマホでタップしやすいように内側の余白を少し取る */
  }

  /* ハイフン（-）の文字が縮まないように固定 */
  .contact-mail .tel-group span {
    flex-shrink: 0;
    color: #333;
  }
}

/* 親要素（ボタンを囲むコンテナ） */
.button-container {
  display: flex;           /* Flexboxを有効にする */
  justify-content: center; /* 子要素（ボタン）を左右中央に配置する */
  width: 100%;             /* 横幅いっぱいに広げる */
  margin-top: 30px;        /* [任意] ボタンの上の余白 */
}

/* 画像ボタン共通の設定（前回お渡ししたもの） */
.custom-img-btn {
  background: none;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  transition: opacity 0.2s;
  
  /* ボタンの表示サイズ（横幅）を指定（デザインに合わせて調整してください） */
  width: 200px; 
  margin: 0 10px;
}

.custom-img-btn:hover {
  opacity: 0.8;
}

.custom-img-btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------
   追加：前画面に戻るボタン用の設定（中央寄せ ＆ サイズ統一）
-------------------------------------------------- */

/* ボタンを囲む親要素を中央寄せにする */
.form-button-container {
  text-align: center;
  margin-top: 20px; /* 必要に応じて上下の余白を調整してください */
  margin-bottom: 20px;
}

.form-buttons .custom-img-btn {
  margin: 0 10px; /* ボタンとボタンの間に少し隙間（左右に10pxずつ）をあける */
  width: 200px;   /* 必要に応じてボタンの表示サイズ（横幅）を指定してください */
}

/* 「前画面に戻る」ボタンの表示サイズ指定 */
.form-button-container .custom-img-btn {
  width: 200px; /* 前回の2つ並びの時に指定した横幅（例: 200px）と同じサイズにします */
}