/* color */
.bg-primary {
	background-color: #4b5563;
}
.bg-primary-hover:hover {
	background-color: #9ca3af;
}
.bg-primary:disabled {
	background-color: #d2d8e1;
	cursor: default;
}
.bg-normal {
	background-color: #9ca3af;
}
.bg-light {
	background-color: #e5f2ff;
}
.focus-visible-primary:focus-visible {
  outline-color: #9ca3af;
}
.border-primary {
  border-color: #9ca3af;
}
.focus-input-ring:focus {
  --tw-ring-color: #9ca3af;
}
.text-primary {
	color: #9ca3af;
}
.text-accent {
	color: #9ca3af;
}
.text-link {
	color: #2563eb;
}

/* reset */
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea {
  -webkit-appearance: none;
}
[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}


/* original */
.max-w-1024 {
  max-width: 1024px;
}

.border-1 {
  border-width: 1px;
}
.border-r-1 {
  border-right: 1px solid;
}
.border-b-1 {
  border-bottom: 1px solid;
}


.validation {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
	background-color: rgb(255 228 230);
	border-radius: 0.5rem;
	color: rgb(190 18 60);
}


/* 直接 class を付けられない入力欄 ( input, select タグ ) */
.input-area > [type='text'],
.input-area > [type='email'],
.input-area > [type='url'],
.input-area > [type='password'],
.input-area > [type='number'],
.input-area > [type='date'],
.input-area > [type='search'],
.input-area > [type='tel'],
.input-area > [type='time'],
.input-area > [type='week'],
.input-area > [multiple],
.input-area > textarea {
  width: 100%;
  padding: 0.375rem;
  border-radius: 0.375rem;
  border-width: 0px;
  line-height: 1.5rem;
  font-size: 0.875rem;
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.input-area > select {
  width: 100%;
  max-width: 20rem;
  height: 2.4rem;
  background-color: #FFF;
  padding: 0.375rem;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(209, 213, 219, 1);
  border-radius: 0.375rem;
  font-size: 0.875rem;
}
.input-area > [type='text']:focus,
.input-area > [type='email']:focus,
.input-area > [type='url']:focus,
.input-area > [type='password']:focus,
.input-area > [type='number']:focus,
.input-area > [type='date']:focus,
.input-area > [type='search']:focus,
.input-area > [type='tel']:focus,
.input-area > [type='time']:focus,
.input-area > [type='week']:focus,
.input-area > [multiple]:focus,
.input-area > textarea:focus,
.input-area > select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-opacity: 1;
  --tw-ring-color: #9ca3af;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


@media (max-width: 640px) {
  .input-area > select {
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
}