@charset "UTF-8";
input, textarea, button {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
}
/* テキスト入力、メール、電話、住所など */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea {
  max-width: 250px;
  width: 100%;
  padding: 5px 12px;
  border: 1px solid #ccc;
  border-radius:2px;
  background-color: #f1f8f8;
  transition: border-color 0.3s, box-shadow 0.3s;
}
/* テキストエリア */
textarea {
  max-width: 650px;
  width: 100%;
  resize: vertical;
}
/* 数字 */
input[type="number"]
{
  max-width: 100px;
  padding: 5px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f1f8f8;
  transition: border-color 0.3s, box-shadow 0.3s;
}
/* セレクト */
select {
  max-width: 100px;
  padding: 5px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f1f8f8;
  transition: border-color 0.3s, box-shadow 0.3s;
	
}
/* チェックボックス横ならび */
.checkbox-wrap {
  display: flex;
  flex-wrap: wrap; /* 横に並べて折り返し可 */
  gap: 0.5em 1.5em; /* 上下・左右の間隔 */
}
.checkbox-wrap label {
  white-space: nowrap; /* 項目内では折り返さない */
}
/* フォーカス時 */
input:focus, textarea:focus {
  border-color: #F4F4F4;
  box-shadow: 0 0 5px rgba(102, 175, 233, 0.3);
  outline: none;
}
/* hidden は非表示（念のため） */
input[type="hidden"] {
  display: none;
}
/* 送信・修正ボタンを横並びに配置 */
.input_btn {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;
  margin: 30px 0 80px 0;
}
/* 各 form を適切に並べる */
.input_btn form {
  flex: 1 1 200px; /* 最小200pxで伸縮、横並び */
  max-width: 400px;
}
/* 親コンテナを横並びに */
.input_btn {
  display: flex;
  gap: 10px; /* ボタン間の余白 */
  justify-content: center; /* 中央寄せ */
}
/* ボタン共通スタイル */
.input_btn input[type="submit"],.input_btn button[type="submit"], input[type="button"], .input_btn button[type="button"] {
  flex: 1; /* 横幅を均等にする */
  padding: 5px 0;
  background-color: #18b7cd;
  border: solid 1px #18b7cd;
  color: #fff;
  font-size: 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  width: 120px!important
}
.btn-home{width: 300px}
/* ホバー時のボタン（共通） */
.input_btn input[type="submit"]:hover, button[type="submit"]:hover, .input_btn input[type="button"]:hover, button[type="button"]:hover,.btn-home:hover {
  background-color: #fff;
  color: #18b7cd;
}
/* 修正ボタン専用スタイル（明るいボタン） */
.correction input[type="button"], .correction button[type="button"] {
  background-color: #fff;
  color: #18b7cd;
}
/* 修正ボタンのホバー時（色反転） */
.correction input[type="button"]:hover, .correction button[type="button"]:hover {
  background-color: #18b7cd;
  color: #fff;	
}
/* 戻るボタン */
a.btn-home{
  padding: 5px 0;
  background-color: #18b7cd;
  border: solid 1px #18b7cd;
  color: #fff;
  font-size: 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
	display: block;
	width: 180px;
text-align: center}

a.btn-home:hover,input[type="submit"].btn-back:hover{  background-color: #fff;
  color: #18b7cd;}

/*修正するボタン */
input[type="submit"].btn-back{
  padding: 5px 0;
  background-color: #fff;
  border: solid 1px #18b7cd;
  color: #18b7cd;
  font-size: 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
	display: block;
	width: 180px;
text-align: center}

input[type="submit"].btn-back:hover{  background-color: #18b7cd;;
  color: #fff;}