@charset "utf-8";
/* フォーム全体のスタイル */
form {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 2カラム用レイアウト */
.flex-layout {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 0px;
}

.flex-layout .form-group {
  flex: 1 1 calc(50% - 20px);
}

/* 入力グループ */
.form-group {
  margin-bottom: 15px;
  position: relative;
}

/* ラベル */
label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

/* 必須ラベルの追加 */
label.required::after {
  content: "必須";
  background-color:#000000;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 6px;
  margin-left: 1em;
  border-radius: 3px;
  display: inline-block;
  vertical-align: middle;
}



/* テキスト入力、メール、電話、日付、数値 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* テキストエリア */
textarea {
  min-height: 80px;
  resize: vertical;
}

/* ラジオボタン・チェックボックスの整列 */
.radio-group label,
.checkbox-group label {
  display: inline;vertical-align: top;
     -webkit-tap-highlight-color: transparent;
}


.radio-group label::after,
.checkbox-group label::after {
content: '';
  display: block;
}


input[type="radio"] {
  -webkit-tap-highlight-color: transparent;
}



input[type="radio"],
input[type="checkbox"] {
  accent-color: #000;
  width: 16px;
  height: 16px;

}


/* ファイルのプレビュー画像 */
.previewWrapper img {
  display: block;
  margin-top: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* レンジスライダー */
input[type="range"] {
  width: 100%;
}

/* フォーカス時のスタイル */
input:focus,
textarea:focus,
select:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* プレースホルダーの色 */
::placeholder {
  color: #aaa;
}

/* ファイルアップロード（よりシンプルで落ち着いたボタン風） */
input[type="file"] {
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  color: #333;
   max-width:280px;
}

input[type="file"]::file-selector-button {
  background-color: #444;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

input[type="file"]::file-selector-button:hover {
  background-color: #222;
}

/* プレビュー画像・動画に余白を追加 */
.previewWrapper img,
.previewWrapper video {
  margin-top: 10px;
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* レンジスライダーの強化 */
input[type="range"] {
  appearance: none;
  height: 6px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid white;
}

/* レンジ値の表示 */
.range-value {
  display: inline-block;
  font-weight: bold;
  margin-left: 10px;
  font-size: 14px;
  color: #333;
}

/* 共通ボタンスタイル */
button,
input[type="submit"],
input[type="button"] {
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

/* ホバー時（PC） */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #333;
}

/* 押下時（スマホ含む） */
button:active,
input[type="submit"]:active,
input[type="button"]:active {
  background-color: #555;
  transform: scale(0.98);
}

/* 無効時 */
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
  background-color: #aaa;
  cursor: not-allowed;
}
/* ========== レスポンシブ対応 2カラムレイアウト ========== */
.flex-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.flex-layout .form-group {
  flex: 1 1 0;
  /*min-width: 200px;*/
  max-width: 100%;
  box-sizing: border-box;
}