@charset "utf-8";
/*--------------------------------------------------------------------------------
 
  form message

--------------------------------------------------------------------------------*/
.c-form-msg {
  padding-bottom: var(--space-m);
}

/*--------------------------------------------------------------------------------
  .c-form-alert
--------------------------------------------------------------------------------*/
.c-form-alert {
  line-height: var(--line-height-m);
  color: var(--color-red);
  padding: var(--inner-space-s);
  border: 1px solid var(--color-red);
}
.c-form-alert:not(:has(.c-form-alert_ttl)) {
  padding: var(--inner-space-2s);
  line-height: var(--line-height-s);
}
.c-form-alert:not(:has(+ .c-form-area-btn)) {
  margin-bottom: var(--space-m);
}
.c-form-alert.-sendok {
  margin-top: 1rem;
}
.c-form-alert_ttl {
  font-weight: bold;
  font-size: var(--fs-2m);
  margin-bottom: 0.5em;
}

/*--------------------------------------------------------------------------------
 
  form

--------------------------------------------------------------------------------*/
.c-form {
  --ttl-fs: 1.1rem;
  display: grid;
}
.c-form_ttl {
  font-size: var(--ttl-fs);
  font-weight: bold;
  display: grid;
  align-content: start;
  column-gap: var(--space-s);
}
.c-form_field + .c-form_field {
  margin-top: 1rem;
}
.c-form_info {
  margin-bottom: 1rem;
}
@media not (max-width: 760px) {
  .c-form {
    grid-template-columns: auto 1fr;
  }
  .c-form_ttl:not(:first-of-type),
  .c-form_ttl:not(:first-of-type) + .c-form_field {
    margin-top: var(--space-m);
  }
  .c-form_ttl:has(+ .c-form_field > .c-txtbox),
  .c-form_ttl:has(+ .c-form_field > .c-select-field){
    padding-top: calc(var(--input-pd) - 0.25rem);
  }
  .c-form_field {
    align-self: center;
  }
  .c-form_ttl {
    grid-template-columns: 1fr auto;
    padding-right: var(--space-m);
  }
  .c-form_field + .c-form_field {
    grid-column: 2 / -1;
    margin-top: 1rem;
  }
}
@media (max-width: 760px) {
  .c-form_ttl {
    grid-template-columns: auto 1fr;
    padding-bottom: 1rem;
  }
  .c-form_ttl:not(:first-of-type) {
    margin-top: var(--space-m);
  }
}

/*--------------------------------------------------------------------------------
  .c-form_label
--------------------------------------------------------------------------------*/
.c-form_label {
  justify-self: start;
  align-self: start;
  font-size: var(--fs-3s-rem);
  font-weight: normal;
  color: #FFF;
  margin-top: calc(var(--ttl-fs) - 1em);
  line-height: 1;
  padding: 0.5em;
  border-radius: 0.2rem;
}
.c-form_label.-required { background-color: var(--color-red); }
.c-form_label.-optional { background-color: var(--color-gray); }

/*--------------------------------------------------------------------------------
  .c-form_errmsg
--------------------------------------------------------------------------------*/
.c-form_errmsg {
  display: none;
  color: var(--color-red);
}
.c-form_field:has(.is-err) .c-form_errmsg { display: block; }
.c-form_field .c-form_errmsg:not(:has(+ .c-form_errmsg)) { padding-bottom: 0.75rem; }

/*--------------------------------------------------------------------------------

  form table

--------------------------------------------------------------------------------*/
.c-form-tbl {
  width: 100%;
  border-collapse: collapse;
  line-height: var(--line-height-m);
  container-type: inline-size;
}
.c-form-tbl th {
  font-weight: bold;
  background-color: var(--bg-gray);
}
@media not (max-width: 760px) {
  .c-form-tbl th {
    width: 25%;
    white-space: nowrap;
  }
  .c-form-tbl th,
  .c-form-tbl td {
    text-align: left;
    vertical-align: top;
    padding: 1rem;
    border: 1px solid var(--border-color);
  }
}
@media (max-width: 760px) {
  .c-form-tbl {
    display: grid;
    border-top: 1px solid var(--border-color);
  }
  .c-form-tbl tr {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }
  .c-form-tbl th {
    padding: 0.5rem 0.75rem;
  }
  .c-form-tbl td {
    padding: var(--space-s) 0.75rem;
    border-bottom: 1px solid var(--border-color);
  }
}

/*--------------------------------------------------------------------------------

  form button

--------------------------------------------------------------------------------*/
.c-form-area-btn {
  padding-top: var(--space-l);
  display: flex;
  justify-content: center;
  column-gap: min(3cqw, 1.5rem);
}
.c-form_btn {
  --btn-width: min(100%, 320px);
  height: 100%;
  text-align: center;
}
.c-form_btn.-back {
  --btn-bg: var(--color-gray);
  --btn-bg-hover: var(--color-gray-light);
}

/*--------------------------------------------------------------------------------

  input

--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
  .c-input-group
--------------------------------------------------------------------------------*/
.c-input-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--input-group-gap, 1rem);
}
.c-input-group:has(.c-label) {
  --input-group-gap: 1rem 2rem;
}

/*--------------------------------------------------------------------------------
  .c-txtbox
  .c-txtarea
  .c-select
--------------------------------------------------------------------------------*/
:root {
  --input-border: 1px solid var(--border-color);
  --input-border-focus: 1px solid var(--border-color);
  --input-border-error: 1px solid var(--color-red);
  --input-bg: var(--bg-gray);
  --input-bg-focus: #FFF;
  --input-bg-error: #FFF;
  --input-radius: 0;
  --input-pd: 0.5rem;
}
.c-txtbox { width: 100%; }
.c-txtbox.-auto { width: auto; }
.c-txtbox.-sm { width: max(10em, 25%); }
@media not (max-width:760px) {
  .c-txtbox.-md { width: max(20em, 50%); }
  .c-txtbox.-lg { width: max(30em, 75%); }
}
@media (max-width:760px) {
  .c-txtbox.-md,
  .c-txtbox.-lg { width: 100%; }
}
.c-txtbox,
.c-txtarea,
.c-select {
  display: inline-block;
  outline: none;
  padding: var(--input-pd);
  border-radius: var(--input-radius);
  border: var(--input-border);
  background-color: var(--input-bg);
  transition: background-color ease-out 0.1s, border-color ease-out 0.1s;
  line-height: var(--line-height-s);
}
.c-txtarea {
  width: 100%;
  resize: vertical;
}
.c-txtbox:focus,
.c-txtarea:focus {
  border: var(--input-border-focus);
  background-color: var(--input-bg-focus);
}
.c-txtbox.is-err,
.c-txtarea.is-err {
  border: var(--input-border-error);
  background-color: var(--input-bg-error);
}

/* .c-select
----------------------------------------*/
:root {
  --select-icon-area: 2rem;
  --select-icon-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4,7l8,10,8-10H4Z"/></svg>');
  --select-icon: var(--txt-color);
  --select-icon-size: 50%;
}
.c-select-field {
  display: inline-block;
  position: relative;
}
.c-select-field:after {
  content: "";
  width: var(--select-icon-area);
  height: 100%;
  position: absolute;
  right: calc(var(--input-pd) / 2);
  top: 0;
  pointer-events: none;
  mask-image: var(--select-icon-image);
  mask-repeat: no-repeat;
  mask-size: var(--select-icon-size);
  mask-position: center center;
  background-color: var(--select-icon);
}
.c-select {
  width: 100%;
  overflow-x: hidden;
  cursor: pointer;
  padding-right: calc(var(--select-icon-area) + var(--input-pd));
}
.c-select:focus {
  border: var(--input-border-focus);
  background-color: var(--input-bg-focus);
}
.c-select.is-err {
  border: var(--input-border-error);
  background-color: var(--input-bg-error);
}

/*--------------------------------------------------------------------------------
  .c-label
  .c-label-field
--------------------------------------------------------------------------------*/
:root {
  --label-border: 1px solid var(--border-color);
  --label-border-checked: 1px solid var(--color-secondary);
  --label-border-error: 1px solid var(--color-red);
  --label-bg: #FFF;
  --label-bg-checked: var(--bg-secondary);
  --label-bg-error: #FFF;
  --label-radius: 0;
  --label-pd: 0.75rem;
}
.c-label,
.c-label-field {
  width: fit-content;
  cursor: pointer;
  display: flex;
  column-gap: 0.75rem;
  align-self: flex-start;
  transition: background-color ease-out 0.1s, border-color ease-out 0.1s;
  line-height: var(--line-height-s);
}
.c-label-field {
  padding: var(--label-pd);
  border-radius: var(--label-radius);
  border: var(--label-border);
  background-color: var(--label-bg);
}
.c-label-field:has(input:checked) { border: var(--label-border-checked); background-color: var(--label-bg-checked); }
.c-label-field:has(.is-err) { border: var(--label-border-error); background-color: var(--label-bg-error); }

/*--------------------------------------------------------------------------------
  .c-check
  .c-radio
--------------------------------------------------------------------------------*/
:root {
  --checkbox-size: 1.25rem;
  --checkbox-radius: 0;
  --checkbox-border: 1px solid var(--border-color);
  --checkbox-border-checked: 0;
  --checkbox-border-error: 1px solid var(--color-red);
  --checkbox-bg: var(--bg-gray);
  --checkbox-bg-checked: var(--color-secondary);
  --checkbox-bg-error: #FFF;
  --checkbox-icon-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="currentColor"><polygon points="25.0881481 5.0147733 12.9413981 17.1615229 4.9118515 9.1325232 1 13.0437734 9.0295471 21.0733197 12.9413981 24.9852267 16.8527026 21.0733197 29 8.9266799 25.0881481 5.0147733"/></svg>');
  --checkbox-icon-size: 65%;
  --checkbox-icon: transparent;
  --checkbox-icon-checked: #FFF;
  --checkbox-mgt: 0.15rem;
  
  --radio-size: 1.25rem;
  --radio-border: 1px solid var(--border-color);
  --radio-border-checked: 0;
  --radio-border-error: 1px solid var(--color-red);
  --radio-bg: var(--bg-gray);
  --radio-bg-checked: var(--color-secondary);
  --radio-bg-error: #FFF;
  --radio-icon-size: 35%;
  --radio-icon: transparent;
  --radio-icon-checked: #FFF;
  --radio-mgt: 0.15rem;
}
.c-check,
.c-radio {
  flex-shrink: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-check input,
.c-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0, 0);
  border: 0;
}
.c-check:after,
.c-radio:after {
  content: "";
}

/* .c-check
----------------------------------------*/
.c-check {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border-radius: var(--checkbox-radius);
  border: var(--checkbox-border);
  background-color: var(--checkbox-bg);
  margin-top: var(--checkbox-mgt);
}
.c-check:after {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  mask-image: var(--checkbox-icon-image);
  mask-repeat: no-repeat;
  mask-size: var(--checkbox-icon-size);
  mask-position: center center;
  background-color: var(--checkbox-icon);
}
.c-check:has(input:checked) { border: var(--checkbox-border-checked); background-color: var(--checkbox-bg-checked); }
.c-check:has(input:checked):after { background-color: var(--checkbox-icon-checked); }
.c-check:has(.is-err) { border: var(--checkbox-border-error); background-color: var(--checkbox-bg-error); }

/* .c-radio
----------------------------------------*/
.c-radio {
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: 100%;
  border: var(--radio-border);
  background-color: var(--radio-bg);
  margin-top: var(--radio-mgt);
}
.c-radio:after {
  width: var(--radio-icon-size);
  height: var(--radio-icon-size);
  border-radius: 100%;
  background-color: var(--radio-icon);
}
.c-radio:has(input:checked) { border: var(--radio-border-checked); background-color: var(--radio-bg-checked); }
.c-radio:has(input:checked):after { background-color: var(--radio-icon-checked); }
.c-radio:has(.is-err) { border: var(--radio-border-error); background-color: var(--radio-bg-error); }