@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="button"] {
  position: relative;
  display: inline-block;
  padding: 0.5em 1.0em;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  border: none;
}

input[type="button"].gray {
  color: #FFF;
  background: #999999;
  border-bottom: solid 2px #666666;
}

input[type="button"].red {
  color: #FFF;
  background: #ff3300;
  border-bottom: solid 2px #ff0000;
}
input[type="button"].red:hover {
  background: #ff0066;
  border-bottom: solid 2px #ff3300;
}

input[type="button"].green {
  color: #FFF;
  background: #66cc00;
  border-bottom: solid 2px #669900;
}
input[type="button"].green:hover {
  background: #66ff00;
  border-bottom: solid 2px #66cc00;
}

input[type="button"].orange {
  color: #FFF;
  background: #ffa500;
  border-bottom: solid 2px #ff8c00;
}
input[type="button"].orange:hover {
  background: #ffd700;
  border-bottom: solid 2px #ffa500;
}

input[type="button"].cyan {
  color: #FFF;
  background: #20b2aa;
  border-bottom: solid 2px #008080;
}
input[type="button"].cyan:hover {
  background: #00ced1;
  border-bottom: solid 2px #20b2aa;
}