@charset "UTF-8";
html {
  /* Primary color */
  --color-primary-1: #2563eb;
  --color-primary-2: #7ba3f0;
  --color-primary-3: #bdd0f7;
  --color-primary-4: #dae5fb;
  --color-primary-5: #e8effd;
  --color-primary-6: #4a6fad;
  /* Neutral color */
  --color-neutral-1: #000000;
  --color-neutral-2: #333333;
  --color-neutral-3: #666666;
  --color-neutral-4: #bbbbbb;
  --color-neutral-5: #cccccc;
  --color-neutral-6: #e3e3e3;
  --color-neutral-7: #e5e5e5;
  --color-neutral-8: #f5f5f5;
  --color-neutral-9: #ffffff;
  /* Accent color */
  --color-accent-red: #ff0000;
  --color-accent-blue: #3f00eb;
  --color-accent-yellow: #ffff00;
  --color-accent-orange: #ffb100;
  --color-accent-pink: #eb0088;
}
html.stg {
  --color-primary-1: #d4a017;
  --color-primary-2: #e2c56b;
  --color-primary-3: #f0e0a8;
  --color-primary-6: #9e7a15;
}
html {
  /* System (管理画面) */
}
html.system {
  --color-primary-1: #6b3fa0;
  --color-primary-2: #a48bc4;
  --color-primary-3: #cfc2de;
  --color-primary-4: #e2dae9;
  --color-primary-5: #ede7f3;
  --color-primary-6: #7d6899;
}
html.stg.system {
  --color-primary-1: #dc2626;
  --color-primary-2: #e87a7a;
  --color-primary-3: #f3b8b8;
  --color-primary-6: #a31d1d;
}

/* Font family */
html {
  font-family: "Noto Sans JP";
}

@media (max-width: 767px) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  html {
    font-size: 1.6vh;
  }
}
button {
  border-radius: 9999px;
  border-width: 0.125rem;
  height: fit-content;
  white-space: nowrap;
}
button:not(:has(label)) {
  padding: 0.5rem 1rem;
}
button:has(label) {
  padding: 0;
}
button:has(label) label {
  display: block;
  padding: 0.5rem 1rem;
}
button:has(label) label:has(:where(i, img)) {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5rem;
}
button:disabled:disabled {
  background: var(--color-neutral-6);
  color: var(--color-neutral-3);
  border-style: solid;
  border-color: var(--color-neutral-4);
}
button:not(:disabled).primary {
  background: var(--color-primary-1);
  color: var(--color-neutral-9);
  border-style: solid;
  border-color: var(--color-primary-2);
}
button:not(:disabled).secondary {
  background: var(--color-neutral-9);
  color: var(--color-primary-1);
  border-style: solid;
  border-color: var(--color-primary-1);
}
button:not(:disabled).tertiary {
  background: var(--color-neutral-9);
  color: var(--color-neutral-2);
  border-style: solid;
  border-color: var(--color-neutral-5);
}
button:not(:disabled).delete {
  background: var(--color-primary-6);
  color: var(--color-neutral-9);
  border: none;
}
button:not(:disabled).square {
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1rem;
  background: var(--color-neutral-9);
  border-radius: 0.5rem;
  border: 3px solid var(--color-neutral-5);
  font-size: 1rem;
}
button:not(:disabled).square img {
  width: 1.5rem;
  height: 1.5rem;
}
button:not(:disabled):hover {
  opacity: 0.8;
}
button:disabled.primary {
  background: var(--color-neutral-5);
  color: var(--color-neutral-9);
  border-style: solid;
  border-color: var(--color-neutral-4);
}
button a {
  text-decoration: none;
  color: inherit;
}
button:has(:where(i, img)) {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5rem;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=number],
textarea {
  outline: none;
  border-radius: 0.25rem;
  border-style: solid;
  background-color: var(--color-neutral-9);
  border-color: var(--color-primary-1);
  color: var(--color-neutral-2);
  padding: 0.5rem;
  border-width: 1px;
}
input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=month]:focus,
input[type=number]:focus,
textarea:focus {
  border-width: 2px;
}
input[type=text]:disabled, input[type=text]:read-only,
input[type=tel]:disabled,
input[type=tel]:read-only,
input[type=email]:disabled,
input[type=email]:read-only,
input[type=date]:disabled,
input[type=date]:read-only,
input[type=datetime-local]:disabled,
input[type=datetime-local]:read-only,
input[type=month]:disabled,
input[type=month]:read-only,
input[type=number]:disabled,
input[type=number]:read-only,
textarea:disabled,
textarea:read-only {
  background-color: var(--color-neutral-7);
  border-color: var(--color-neutral-3);
  color: var(--color-neutral-1);
}
input[type=text]::placeholder,
input[type=tel]::placeholder,
input[type=email]::placeholder,
input[type=date]::placeholder,
input[type=datetime-local]::placeholder,
input[type=month]::placeholder,
input[type=number]::placeholder,
textarea::placeholder {
  color: var(--color-neutral-4);
}

input[type=number] {
  text-align: right;
}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type^=date],
input[type=month] {
  position: relative;
}
input[type^=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  background: transparent;
  z-index: 1;
}
input[type^=date]::after,
input[type=month]::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 1rem;
  height: 1rem;
  right: 0.5rem;
}
input[type^=date],
input[type=month] {
  appearance: none;
}
input[type^=date]::-webkit-date-and-time-value,
input[type=month]::-webkit-date-and-time-value {
  text-align: left;
}

input[type=date]::after,
input[type=month]::after {
  background-image: url(/users/webapp/images/icons/calendar.svg);
}

input[type=datetime-local]::after {
  background-image: url(/users/webapp/images/icons/clock.svg);
}

a {
  color: var(--color-neutral-2);
}

.input-field {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
.input-field > .title {
  font-size: 0.8rem;
}
.input-field > input, .input-field > textarea, .input-field > .range input {
  font-size: 1rem;
  height: 2.5rem;
}
.input-field > textarea {
  resize: vertical;
}
.input-field .select-box {
  height: 2.5rem;
}
.input-field[required] .title:after {
  content: "必須";
  background: var(--color-accent-red);
  color: var(--color-neutral-9);
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
}

.value-with-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  justify-items: end;
  border-bottom: 1px solid var(--color-neutral-1);
  color: var(--color-neutral-1);
}
.value-with-label .label {
  font-size: 0.8rem;
}
.value-with-label .label:after {
  content: "：";
}
.value-with-label .value {
  font-size: 1.2rem;
}

.scroll {
  overflow-y: auto;
  overflow-x: auto;
}
.scroll::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.5rem;
}
.scroll::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 0.5rem;
}
.scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-primary-1);
  border-radius: 0.5rem;
}

.disabled-back {
  background: var(--color-neutral-7);
}

label input[type=file] {
  display: none;
}

/* Text */
.al-right {
  text-align: right;
}

.al-center {
  text-align: center;
}

/* Flex */
.flex-container {
  display: flex;
}

.direction-vertical {
  flex-direction: column;
}

.direction-horizontal {
  flex-direction: row;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-start {
  justify-content: flex-start;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: end;
}

.align-items-start {
  align-items: start;
}

.c-gap-1 {
  column-gap: 1rem;
}

.c-gap-2 {
  column-gap: 2rem;
}

.r-gap-1 {
  row-gap: 1rem;
}

.r-gap-2 {
  row-gap: 2rem;
}

@media (min-width: 768px) {
  .value-with-label {
    min-width: 20rem;
  }
}