* { box-sizing: border-box; }

html, body {
  font-size: 20px;
  height: 100vh;
  margin: 0;
  background-color: #fff;
}

.form-wrapper {
  position: relative;
  display: grid;
  height: 100%;
  margin: 0;
  place-items: center;
  max-width: 100%;
  padding: 2rem;
}

form {
  margin: auto;
  width: 100%;
  max-width: 800px;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #444;
}

input {
  display: block;
  width: 100%;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  font-size: 1rem;
  border: 0;
  border-radius: 0.125rem 0.25rem;
  background-color: hsl(222, 20%, 95%);
}

button {
  display: block;
  padding: 0.5rem;
  border: 0;
  border-radius: 0.125rem 0.25rem;
  background-color: #40cb90;
  color: #fff;
  margin: 2rem 0 0 auto;
}

input:focus,
button:focus{
  outline: 0;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

textarea {
    width: 100%; /* 横幅を親要素の全幅に */
    height: 150px; /* 高さを150pxに */
    resize: none; /* ユーザーによるリサイズを無効にする場合 */
  }

  .name-fields {
    display: flex;          /* 子要素を横並びに配置 */
    gap: 20px;              /* 要素間の間隔を設定 */
    margin-bottom: 15px;    /* フィールド全体の下マージン */
    flex-wrap: wrap;        /* 横幅が狭い場合に折り返し */
  }
  
  .name-field {
    flex: 1;                /* 各要素が均等に横幅を取る */
    min-width: 30%;         /* 各フィールドの最小幅を設定 */
  }
  
  .name-field label {
    display: block;         /* ラベルを上部に表示 */
    margin-bottom: 5px;     /* ラベルと入力欄の間隔 */
  }
  
  .name-field input {
    width: 100%;            /* フィールド全幅に合わせる */
    padding: 8px;           /* 入力欄の内側余白 */
    font-size: 14px;        /* 入力欄の文字サイズ */
    border: 1px solid #ccc; /* 入力欄の枠線 */
    border-radius: 5px;     /* 角丸 */
    box-sizing: border-box; /* パディングを含む幅調整 */
  }

  .required {
    color: red;           /* 必須マークを赤色で表示 */
    font-weight: bold;    /* 太字に設定 */
    margin-left: 5px;     /* ラベルとの間隔を調整 */
    font-size: 14px;      /* 文字サイズを統一 */
  }
 /* チェックボックスグループのスタイル */
 /* チェックボックスグループのスタイル (共通) */
.checkbox-group {
  display: flex;
  gap: 20px; /* 横並び時のチェックボックス間の間隔 */
  flex-wrap: wrap; /* 画面幅が小さいときに改行されるように */
  width: 100%;
  justify-content: flex-start; /* 左寄せ */
}

/* チェックボックスのラベル */
.checkbox-group label {
  display: flex;
  align-items: center; /* チェックボックスとラベルを垂直に揃える */
  gap: 10px; /* チェックボックスとラベル間のスペース */
  font-size: 16px;
  white-space: nowrap; /* 文字を改行しない */
}

/* チェックボックスのスタイル */
input[type="checkbox"] {
  transform: scale(1.5); /* チェックボックスのサイズを調整 */
  vertical-align: middle; /* チェックボックスを文字と垂直方向に中央揃え */
  margin: 0; /* 余計なマージンを除去 */
}

/* チェックボックスとラベルを横並びにする */
.form-container {
  text-align: center; /* テキストを中央揃え */
}

.agree-container {
  display: inline-flex; /* チェックボックスと文字を横並びに */
  align-items: center; /* 垂直方向を中央揃え */
  gap: 10px; /* チェックボックスと文字の間隔 */
}


.agree-container span {
  font-size: 16px;
  white-space: nowrap; /* 文字を改行しない */
}

/* スマホ表示対応 */
@media (max-width: 768px) {
  html, body {
    font-size: 16px; /* フォントサイズを少し小さく */
  }

  .form-wrapper {
    padding: 1rem; /* パディングを調整 */
  }

  .name-fields {
    flex-direction: column; /* 横並びから縦並びに変更 */
    gap: 15px; /* 間隔を少し広げる */
  }

  .name-field {
    min-width: 100%; /* 横幅を100%にして折り返し */
  }

  .checkbox-group {
    flex-direction: column; /* 縦並びに変更 */
    gap: 10px; /* チェックボックス間の間隔を縮小 */
    justify-content: flex-start; /* 上に揃えて表示 */
    width: 100%; /* 幅を100%に設定 */
    flex-wrap: nowrap; /* 改行しない */
  }

  .checkbox-group label {
    width: 100%; /* ラベルの幅を100%に設定 */
    padding: 5px 0; /* 上下の余白を設定 */
    font-size: 14px; /* フォントサイズを調整 */
  }

  button {
    width: 100%; /* ボタンを全幅に変更 */
    font-size: 1rem; /* ボタンの文字サイズを少し大きく */
  }

  textarea {
    height: 120px; /* スマホ用に高さを調整 */
  }
}