@charset "utf-8";

:root {
	--focus-color: #ffd700;
	--color: #666;
	--font-size: 16px;
	--number-size: 20px;
}

input[type="text"]:focus{background-color: var(--focus-color);}
input[type="password"]:focus{background-color: var(--focus-color);}
input[type="date"]:focus{background-color: var(--focus-color);}
input[type="email"]:focus{background-color: var(--focus-color);}
input[type="datetime-local"]:focus{background-color: var(--focus-color);}
input[type="month"]:focus{background-color: var(--focus-color);}
input[type="number"]:focus{background-color: var(--focus-color);}
textarea:focus{background-color: var(--focus-color);}
select:focus{background-color: var(--focus-color);}


input[type="text"] {
	color: var(--color);
	font-size: var(--font-size);
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #999;
	text-align: left;
}

input[type="text"][data-numeric] {
	color: var(--color);
	font-size: var(--number-size);
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #999;
	text-align: right;
}

input[type="password"] {
	color: var(--color);
	font-size: var(--font-size);
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #999;
	text-align: left;
}

input[type="date"] {
	color: var(--color);
	font-size: var(--font-size);
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #999;
	text-align: left;
}

input[type="email"] {
	color: var(--color);
	font-size: var(--font-size);
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #999;
	text-align: left;
}

input[type="datetime-local"] {
	color: var(--color);
	font-size: var(--font-size);
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #999;
	text-align: left;
}

input[type="month"] {
	color: var(--color);
	font-size: var(--font-size);
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #999;
	text-align: left;
}

input[type="number"] {
	color: var(--color);
	font-size: var(--number-size);
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #999;
	text-align: right;
}

textarea {
	color: var(--color);
	font-size: var(--font-size);
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #999;
	text-align: left;
}

select {
	color: var(--color);
	font-size: var(--font-size);
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #999;
	text-align: left;
}

label {
	color: var(--color);
	font-size: var(--font-size);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* すべての input を非表示にする */
input[type="checkbox"],
input[type="radio"] {
  display: none;
}

/* ✅ チェックボックス */
span.checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #999;
  border-radius: 4px;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
}

label:has(input[type="checkbox"]:checked) span.checkbox {
  background-color: var(--color);
  border-color: var(--color);
}

label:has(input[type="checkbox"]:checked) span.checkbox::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 🔘 ラジオボタン */
span.radio {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #999;
  border-radius: 50%;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
}

label:has(input[type="radio"]:checked) span.radio {
  border-color: var(--color);
}

label:has(input[type="radio"]:checked) span.radio::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--color);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*** Submitボタンカスタマイズ************************************/

input[type="submit"].btnR {
  display: block;
  text-decoration: none;
  background: #a2301e;
  background: linear-gradient(#d43e2a, #a2301e);
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding: 15px;
  border-radius: 4px;
  letter-spacing: 0.2em;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  width:100%;
}
input[type="submit"]:hover.btnR {
  position: relative;top:1px;left:1px;
  box-shadow: none;
  background: linear-gradient(#a2301e, #d43e2a);
}

input[type="submit"].btnG {
  display: block;
  text-decoration: none;
  background: #20a21e;
  background: linear-gradient(#2ad43e, #20a21e);
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding: 15px;
  border-radius: 4px;
  letter-spacing: 0.2em;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  width:100%;
}
input[type="submit"]:hover.btnG {
  position: relative;top:1px;left:1px;
  box-shadow: none;
  background: linear-gradient(#20a21e, #2ad43e);
}

input[type="submit"].btnB {
  display: block;
  text-decoration: none;
  background: #1e22a2;
  background: linear-gradient(#302ad4, #1e22a2);
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding: 15px;
  border-radius: 4px;
  letter-spacing: 0.2em;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  width:100%;
}
input[type="submit"]:hover.btnB {
  position: relative;top:1px;left:1px;
  box-shadow: none;
  background: linear-gradient(#1e22a2, #302ad4);
}