body {
    background-color:#FCEC9E ;
}

.text{
    font-family: "Arial", sans-serif; /* フォント */
    color: #000000;               /* 文字の色 */
    text-align: center;
}

#report-type{
    display: block;
    margin: 0 auto; /* 左右のマージンを自動調整して中央寄せ */
}

#other-input-container {
      display: none;
      margin-top: 10px;
    }

#btn {
    width: 50%;              /* 横幅 */
    height: 10vw;              /* 高さ */

    background-color: transparent; /* 背景色 */
    color: #000000;              /* 文字色 */
    border: 2px solid #000000;

    font-size: 4vw;           /* 文字の大きさ */
    font-family: "Arial", sans-serif;

    border-radius: 50px;       /* 角の丸さ */

    cursor: pointer;           /* マウスを乗せたとき指にする */

    display: block;
    margin: 0 auto; /* 左右のマージンを自動調整して中央寄せ */
}

/* 1. ドロップダウン（select）のスタイル */
#report-type {
  width: 50%;                 /* ボタンの横幅に合わせる */
  padding: 12px 16px;
  font-size: 16px;
  color: #333333;
  background-color: transparent;
  border: 2px solid #000000;   /* ボタンと同じ2pxの黒枠 */
  border-radius: 8px;         /* 角を少し丸くする */
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  display: block;
  margin: 0 auto 15px auto;   /* 中央寄せ ＆ 下に余白 */
  transition: all 0.3s ease;
}

/* ドロップダウンにフォーカスした時（選択時） */
#report-type:focus {
  border-color: #007bff;      /* 枠線を青色にしてわかりやすくする */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

#report-type option {
  background-color: #FCEC9E;   /* 選択肢の背景色 */
  color: #000000;              /* 選択肢の文字色 */
}

/* 2. 「その他」の入力欄エリア */
#other-input-container {
  width: 50%;                 /* 全体の横幅に合わせる */
  margin: 0 auto 15px auto;   /* 中央寄せ */
}

/* 3. テキストエリア（textarea）のスタイル */
#other-text {
  width: 100%;
  height: 100px;              /* 高さ */
  padding: 12px;
  font-size: 15px;
  font-family: inherit;       /* フォントを全体と合わせる */
  color: #333333;
  border: 2px solid #000000;   /* 枠線 */
  border-radius: 8px;
  outline: none;
  resize: vertical;           /* 縦方向のみサイズ変更可能にする */
  box-sizing: border-box;
  transition: all 0.3s ease;
  background-color: transparent;
}

/* テキストエリア入力中 */
#other-text:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}