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

  layout

--------------------------------------------------------------------------------*/
.sec-contact-form {
  padding-top: var(--space-2l);
  padding-bottom: var(--space-2l);
}
.sec-formmail {
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}

/*--------------------------------------------------------------------------------
  .form-ttl
--------------------------------------------------------------------------------*/
.form-ttl {
  text-align: center;
  font-family: var(--ff-go);
  font-size: var(--fs-4l);
  font-weight: 700;
  line-height: var(--line-height-s);
  margin-bottom: calc(var(--space-m) + 1rem);
}

/*--------------------------------------------------------------------------------
  .form-step
--------------------------------------------------------------------------------*/
.form-step {
  --cgap: var(--space-s);
  --circle-size: 1.25em;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: calc(var(--space-l) + 1rem);
  display: flex;
  justify-content: center;
}
.form-step_item {
  width:calc(100% / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.75rem;
  z-index: 1;
  white-space: nowrap;
  padding: 0 var(--cgap);
  font-family: var(--ff-go);
  font-size:  1.1rem;
  font-weight: 600;
}
.form-step_item .no {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.25em;
  color: var(--color-tertiary);
  font-weight: 500;
  font-size: var(--fs-s-rem);
}
.form-step_item .no:after {
  content: "";
  display: inline-block;
  width: var(--circle-size);
  height: var(--circle-size);
  border: 1px solid var(--color-tertiary);
  border-radius: 50%;
  background-color: #FFF;
}
.form-step_item.prev .no:after,
.form-step_item.current .no:after {
  background-color: var(--color-tertiary);
}
.form-step_item:not(:last-child) .no:before {
  content: "";
  position: absolute;
  top: calc(var(--circle-size) + 1.25em + 1px);
  left: 50%;
  z-index: -1;
  width: calc(200% + (var(--cgap) * 2) - var(--circle-size) - 1px);
  height: 2px;
  background-color: var(--border-color-light);
}
.form-step_item.prev .no:before {
  background-color: var(--color-tertiary);
}

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

--------------------------------------------------------------------------------*/
.c-form-msg {
  padding-bottom: var(--space-m);
}
.c-form-msg.-center {
  width: fit-content;
  margin-inline: auto;
}

/*--------------------------------------------------------------------------------
  .c-form-alert
--------------------------------------------------------------------------------*/
.c-form-alert {
  line-height: var(--line-height-s);
  padding: var(--inner-space-s);
  border: 1px solid var(--color-red-light);
  background-color: var(--bg-red);
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
}
.c-form-alert:not(:has(.c-form-alert_ttl)) {
  padding: var(--inner-space-2s);
}
.c-form-alert:not(:has(+ .c-form-btn-area)) {
  margin-bottom: var(--space-l);
}
.c-form-alert.-sendok {
  width: fit-content;
  margin-inline: auto;
  margin-top: 1rem;
  line-height: var(--line-height-n);
}
.c-form-alert_ttl {
  font-weight: bold;
  font-size: var(--fs-2m);
  color: var(--color-red);
}

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

--------------------------------------------------------------------------------*/
.c-form {
  display: grid;
  border-top: 1px solid var(--border-color);
}
.c-form_ttl {
  font-size: 1.1rem;
  font-weight: bold;
  display: grid;
  align-content: start;
  column-gap: var(--space-s);
}
.c-form_field:not(:has(+ .c-form_field)) {
  border-bottom: 1px solid var(--border-color);
}
@media not (max-width: 1000px) {
  .c-form {
    grid-template-columns: auto 1fr;
  }
  .c-form_ttl,
  .c-form_field {
    padding: 1.75rem 0;
  }
  .c-form_ttl {
    border-bottom: 1px solid var(--border-color);
    grid-template-columns: 1fr auto;
    padding-right: var(--space-m);
  }
  .c-form_ttl:has(+ .c-form_field > .c-txtbox),
  .c-form_ttl:has(+ .c-form_field > .c-txtarea) {
    padding-top: calc(1.5rem + var(--input-pd));
  }
  .c-form_ttl:has(+ .c-form_field + .c-form_field) {
    grid-row: span 2;
  }
  .c-form_field + .c-form_field {
    grid-column: 2 / -1;
    padding-top: 0;
  }
}
@media (max-width: 1000px) {
  .c-form_ttl {
    grid-template-columns: auto 1fr;
    padding: 1.5rem 0;
  }
  .c-form_field {
    padding-bottom: 1.5rem;
  }
}

/*--------------------------------------------------------------------------------
  .c-form_label
--------------------------------------------------------------------------------*/
.c-form_label {
  justify-self: start;
  align-self: start;
  font-size: var(--fs-3s-rem);
  font-weight: bold;
  color: #FFF;
  margin-top: calc(1rem - 1em);
  line-height: 1;
  padding: 0.5em;
  border-radius: 0.25rem;
}
.c-form_label.-required { background-color: var(--color-quinary); }
.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; }
@media not (max-width: 1000px) {
  .c-form_field:has(> .c-txtbox.is-err) .c-form_errmsg,
  .c-form_field:has(> .c-txtarea.is-err) .c-form_errmsg {
    padding-top: var(--input-pd);
  }
}

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

  form table

--------------------------------------------------------------------------------*/
.c-form-tbl {
  width: 100%;
  border-collapse: collapse;
  line-height: var(--line-height-s);
  font-size: clamp(var(--fs-s), 3cqw, var(--fs-n));
}
.c-form-tbl th,
.c-form-tbl td {
  padding: min(3cqw, 1.25rem);
  border: 1px solid var(--color-gray-light);
}
.c-form-tbl th {
  width: 25%;
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
  background-color: var(--bg-gray);
}

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

  form button

--------------------------------------------------------------------------------*/
.c-form-btn-area {
  padding-top: var(--space-l);
  display: flex;
  justify-content: center;
  column-gap: min(3cqw, 1.5rem);
}
.c-form-btn-area_item {
  --btn-width: 100%;
  --btn-txt-fw: 600;
  --btn-pd-side: 1rem;
  width: min(100%, 320px);
  text-align: center;
}
.c-form-btn-area_item button {
  height: 100%;
}
.c-form-btn[type="submit"] {
  --btn-bg: var(--color-tertiary);
  --btn-bg-hover: var(--color-tertiary-light);
}
.c-form-btn:not([type="submit"]) {
  --btn-bg: var(--color-gray);
  --btn-bg-hover: var(--color-gray-light);
}
.c-form-btn-area_item:has([type="submit"]) { order: 2; }
.c-form-btn-area_item:has(:not([type="submit"])) { order: 1; }

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

  input

--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
  .c-txtbox
  .c-txtarea
  .c-select
--------------------------------------------------------------------------------*/
:root {
  --input-border: 1px solid var(--color-gray-light);
  --input-border-focus: 1px solid var(--color-gray-dark);
  --input-border-error: 1px solid var(--color-red-light);
  --input-bg: var(--bg-gray);
  --input-bg-focus: #FFF;
  --input-bg-error: var(--bg-red);
  --input-radius: 0;
  --input-pd: 0.5rem;
}
.c-txtbox { width: 100%; }
.c-txtbox.-auto { width: auto; }
.c-txtbox.-sm { width: max(10em, 25%); }
@media (min-width:761px) {
  .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(--color-gray-light);
  --label-border-checked: 1px solid var(--color-secondary-light);
  --label-border-error: 1px solid var(--color-red-light);
  --label-bg: #FFF;
  --label-bg-checked: var(--bg-secondary);
  --label-bg-error: var(--bg-red);
  --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(--color-gray-light);
  --checkbox-border-checked: 0;
  --checkbox-border-error: 1px solid var(--color-red-light);
  --checkbox-bg: var(--bg-gray);
  --checkbox-bg-checked: var(--color-secondary);
  --checkbox-bg-error: var(--bg-red);
  --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(--color-gray-light);
  --radio-border-checked: 0;
  --radio-border-error: 1px solid var(--color-red-light);
  --radio-bg: var(--bg-gray);
  --radio-bg-checked: var(--color-secondary);
  --radio-bg-error: var(--bg-red);
  --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); }

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