body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    margin: 0; /* マージンをリセット */
    padding: 20px; /* パディングを追加 */
}
.container {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
    text-align: center;
    color: #0056b3;
    margin-bottom: 30px;
}

.logo p {
    text-align: center;
}

.logo p img {
    width: 30%;
}

.intro-text {
  /* text-align: center; */
  /* margin-bottom: 35px; */
  color: #555;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e0e0e0; /* 破線の下線 */
}
.intro-text p {
  font-size: 0.95em;
  line-height: 1.5;
  color: #666;
}

.benefits-section {
    padding: 15px;
    margin-bottom: 25px; /* フォーム本体との間隔をさらに調整 */
}
.benefits-section h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    text-align: center;
}
.benefits-section li {
    font-size: 0.9em;
    margin-bottom: 8px;
    padding-left: 20px;
}
.benefits-section li::before {
    font-size: 1.1em;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}
.form-group input[type="date"] {
    padding-right: 40px;
}
.form-group textarea {
    resize: vertical;
    min-height: 100px;
}
.form-group button {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.form-group button:hover {
    background-color: #0056b3;
}
.required::after {
    content: " *";
    color: red;
}

.privacy-consent {
    margin-top: 20px;
    padding-top: 15px;
}
.privacy-consent p {
    font-size: 0.8em;
}
.privacy-consent .checkbox-group {
    flex-direction: column; /* チェックボックスとラベルを縦並びに */
    align-items: flex-start; /* 左寄せ */
    margin-top: 15px;
    margin-bottom: 20px;
}
.privacy-consent .checkbox-group input[type="checkbox"] {
    margin-right: 0;
    margin-bottom: 8px; /* チェックボックスとラベルの間にスペース */
    align-self: center; /* チェックボックスを中央寄せ */
}
.privacy-consent .checkbox-group label {
    text-align: left;
    width: 100%; /* ラベルの幅をいっぱいに */
}

#loading {
    display: none;
    color: #ff2b2b;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: opacity;
  justify-content: center;
  align-items: center;
}

.overlay.is-visible {
  display: flex;
  opacity: 1;
}

.overlay-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  /* position: relative; */ /* 後述のabsolute配置のために必要になる可能性あり */
  /* overflow: hidden; コンテンツ切り替え時のアニメーションのために */
  max-height: 90vh; /* ビューポートの高さの90%を最大高さとする */
  overflow-y: auto; /* 高さを超えた場合に垂直スクロールバーを表示 */
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズに */
}

/* 各セクションの共通スタイル */
.overlay-section {
  width: 100%;
  /* transition: transform 0.5s ease-in-out; /* 必要であればスライドアニメーションを追加 */
  /* position: absolute; top: 0; left: 0; right: 0; bottom: 0; */ /* これでoverlay-content内でabsolute配置可能 */
  /* padding: inherit; */ /* overlay-contentからパディングを継承 */
}

/* 非表示にするためのクラス */
.hidden {
  display: none; /* 初期状態では非表示 */
}

.confirmation-table {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  border-collapse: collapse; /* セルの境界線を結合 */
  margin-top: 20px; /* 上部に余白 */
  margin-bottom: 20px; /* 下部に余白 */
  text-align: left; /* テーブル全体の子要素のデフォルトテキストを左揃えに設定 */
}

.confirmation-table th,
.confirmation-table td {
  padding: 8px 0; /* 上下左右のパディング */
  border-bottom: 1px solid #eee; /* 各行の下に細い線を引く */
  vertical-align: top; /* 複数行になった場合に上揃えにする */
}

.confirmation-table th {
  width: 30%; /* 項目名が占める幅の目安 */
  min-width: 100px; /* 最小幅 */
  padding-right: 10px; /* 項目名と内容の間にスペース */
  font-weight: bold; /* 項目名を太字に */
  color: #333;
  white-space: nowrap; /* 項目名が改行されないように */
}

.confirmation-table td {
  color: #555;
  word-break: break-word; /* 長い内容でも改行されるように */
}

/* 最後の行の下線は表示しない */
.confirmation-table tbody tr:last-child th,
.confirmation-table tbody tr:last-child td {
  border-bottom: none;
}

/* その他の既存CSS（変更なし） */
.overlay-content h2 {
  margin-top: 0;
  color: #333;
  font-size: 1.8em;
}

.overlay-content p {
  font-size: 1.1em;
  line-height: 1.6;
  color: #555;
  word-break: break-word;
  text-align: left;
}

.overlay-content span {
  font-size: 0.7em;
  color: rgb(255, 56, 56);
}

.overlay-content button {
  padding: 10px 20px;
  margin: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

#editButton {
  background-color: #6c757d;
  color: white;
}

#editButton:hover {
  background-color: #5a6268;
}

#sendButton {
  background-color: #007bff;
  color: white;
}

#sendButton:hover {
  background-color: #0056b3;
}

/* 新しいボタンのスタイル */
#closeSuccessButton, #closeErrorButton {
    background-color: #4CAF50; /* 成功は緑 */
    color: white;
}
#closeErrorButton {
    background-color: #f44336; /* 失敗は赤 */
}
#closeSuccessButton:hover {
    background-color: #45a049;
}
#closeErrorButton:hover {
    background-color: #da190b;
}

/* --- レスポンシブ対応のためのメディアクエリ --- */
@media (max-width: 767px) {
    .container {
        padding: 20px; /* 小さい画面ではパディングを減らす */
        margin: 0 10px; /* 左右に少しマージンを取る */
    }
    h1 {
        font-size: 24px; /* タイトルを小さくする */
    }
    .form-group label {
        font-size: 14px; /* ラベルのフォントサイズを調整 */
    }
    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-group button {
        font-size: 16px; /* 入力欄やボタンのフォントサイズを調整 */
        padding: 12px; /* パディングを少し増やす */
    }
    .form-group input[type="date"] {
        padding-right: 12px; /* 日付入力欄の右パディングを調整 */
    }

    .overlay-content {
    width: 95%;
    padding: 20px;
  }
  .overlay-content h2 {
    font-size: 1.5em;
  }
  .overlay-content p {
    font-size: 1em;
  }
  .overlay-content button {
    font-size: 0.9em;
    padding: 8px 15px;
    margin: 5px;
  }
}

@media (max-width: 479px) {
    body {
        padding: 10px; /* さらに小さい画面ではパディングを減らす */
    }
    .container {
        padding: 15px; /* さらに小さい画面ではパディングを減らす */
        margin: 0 5px; /* 左右のマージンを減らす */
    }

    .overlay-content {
    width: 98%;
    padding: 15px;
  }
  .overlay-content h2 {
    font-size: 1.3em;
  }
  .overlay-content p {
    font-size: 0.95em;
  }

  /* ボタンを縦に並べるか、もう少し小さくするなどの調整も検討 */
  .overlay-content button {
    display: block; /* ボタンをブロックレベル要素にして縦に並べる */
    width: calc(100% - 20px); /* 幅を広げる（左右マージン分を引く） */
    margin: 10px auto; /* 中央寄せ */
  }
}