@charset "utf-8";
:root {  
  /* quinary color（beige） */
  --color-quinary: #E6E2DA;
  --color-quinary-light: #F4F2EE;
  --color-quinary-rgb: 230,226,218;
  --color-quinary-light-rgb: 244,242,238;
  
  /* warning color */
  --color-warning: var(--color-quaternary);
  --color-warning-rgba: var(--color-quaternary-rgb);
  
  --cubic-bezier: cubic-bezier(.23,1,.32,1);
  --hover-trans: color 0.2s ease-in-out, opacity 0.2s ease-in-out, background 0.2s ease-in-out, border 0.15s ease-in-out, fill 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.2s ease-in-out;
}

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

--------------------------------------------------------------------------------*/
.c-form {
  display: grid;
  align-items: start;
}
.c-form_ttl {
  font-weight: bold;
  font-size: var(--fs-m);
  display: flex;
  align-items: center;
}
@media print, screen and (min-width:801px) {
  .c-form {
    grid-template-columns: auto 1fr;
    grid-column-gap: 2rem;
    grid-row-gap: 3rem;
  }
  .c-form_ttl {
    justify-content: space-between;
    column-gap: 3rem;
    padding-top: 0.5rem;
  }
}
@media screen and (max-width:800px) {
  .c-form {
    grid-template-columns: 1fr;
    grid-row-gap: 1rem;
  }
  .c-form_ttl {
    column-gap: 1.5rem;
  }
  .c-form_ttl:not(:first-of-type) {
    margin-top: 1.5rem;
  }
}

/* .c-input-group
----------------------------------------*/
.c-input-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* .c-label-group
----------------------------------------*/
.c-label-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
}
@media screen and (min-width:801px) {
  .c-label-group.-pdt { padding-top: 0.9rem; }
}

/*--------------------------------------------------------------------------------
  .c-txtbox
  .c-txtarea
  .c-select
--------------------------------------------------------------------------------*/
:root {
  --input-border: 1px solid rgba(50,60,65,0.20);
  --input-border-focus: 1px solid rgba(50,60,65,1);
  --input-border-error: 1px solid var(--color-warning);
  --input-border-checked: 1px solid rgba(50,60,65,1);
  --input-bg: #FFF;
  --input-bg-focus: #FFF;
  --input-bg-error: #FFF;
  --input-bg-checked: #FFF;
  --input-radius: 0;
  --input-pd: 0.75rem;
}
.c-txtbox { width: 100%; }
.c-txtbox.-auto { width: auto; }
.c-txtbox.-min { width: max(5em, 15%); }
.c-txtbox.-small { width: max(10em, 25%); }
@media (min-width:1000px) {
  .c-txtbox.-medium { width: max(20em, 50%); }
  .c-txtbox.-large { width: max(30em, 75%); }
}
@media (max-width:999px) {
  .c-txtbox.-medium,
  .c-txtbox.-large { 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: 1.5;
}
.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: #323C41;
  --select-icon-size: 60%;
}
.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-check
  .c-radio
--------------------------------------------------------------------------------*/
:root {
  --checkbox-size: 1.5rem;
  --checkbox-radius: 0;
  --checkbox-border: 2px solid rgba(50,60,65,0.2);
  --checkbox-border-checked: 0;
  --checkbox-bg: transparent;
  --checkbox-bg-checked: var(--color-primary-light);
  --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;
  
  --radio-size: 1.5rem;
  --radio-border: 0;
  --radio-border-checked: 0;
  --radio-bg: rgba(50,60,65,0.2);
  --radio-bg-checked: var(--color-primary-light);
  --radio-icon-size: 35%;
  --radio-icon: #FFF;
  --radio-icon-checked: #FFF;
  --radio-mgt: 0;
}

.c-check-field,
.c-radio-field {
  cursor: pointer;
  display: flex;
  column-gap: 0.75rem;
  align-self: flex-start;
  padding: calc(var(--input-pd) + 0.25rem);
  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: 1.5;
}
.c-check-field.-normal,
.c-radio-field.-normal {
  padding: 0;
  border-radius: 0;
  border: 0;
  background: none;
}
.c-check-field:not(.-normal):has(input:checked) { border: var(--input-border-checked); background-color: var(--input-bg-checked); }
.c-radio-field:not(.-normal):has(input:checked) { border: var(--input-border-checked); background-color: var(--input-bg-checked); }
.c-check-field:not(.-normal):has(.is-err),
.c-radio-field:not(.-normal):has(.is-err) {
  border: var(--input-border-error);
  background-color: var(--input-bg-error);
}
.c-check-field_txt,
.c-radio-field_txt {
  flex: 1;
}
.c-check-field_input,
.c-radio-field_input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-check-field_input input,
.c-radio-field_input input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0, 0);
  border: 0;
}
.c-check-field_input:after,
.c-radio-field_input:after {
  content: "";
}

/* .c-check */
.c-check-field_input {
  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-field_input: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-field_input:has(input:checked) { border: var(--checkbox-border-checked); background-color: var(--checkbox-bg-checked); }
.c-check-field_input:has(input:checked):after { background-color: var(--checkbox-icon-checked); }

/* .c-radio */
.c-radio-field_input {
  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-field_input:after {
  width: var(--radio-icon-size);
  height: var(--radio-icon-size);
  border-radius: 100%;
  background-color: var(--radio-icon);
}
.c-radio-field_input:has(input:checked) { border: var(--radio-border-checked); background-color: var(--radio-bg-checked); }
.c-radio-field_input:has(input:checked):after { background-color: var(--radio-icon-checked); }

/*--------------------------------------------------------------------------------
  .c-form-label
--------------------------------------------------------------------------------*/
.c-form-label {
  display: inline-block;
  width: 3.5rem;
  text-align: center;
  line-height: 1;
  padding: 0.5em;
  font-size: var(--fs-3s);
  font-weight: normal;
  color: #FFF;
  background-color: var(--color-tertiary);
}

/*--------------------------------------------------------------------------------
  .c-form-errmsg
--------------------------------------------------------------------------------*/
.c-form-errmsg {
  display: none;
  font-size: var(--fs-s);
  color: var(--color-warning);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.c-form-errmsg + .c-form-errmsg { padding-top: 0; margin-top: -0.75rem; }
.c-form_input.is-err .c-form-errmsg { display: block; }

/*--------------------------------------------------------------------------------
  .c-form-btn
--------------------------------------------------------------------------------*/
.c-form-btn-area {
  padding-top: var(--space-m);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width:641px) {
  .c-form-btn-area { flex-direction: row-reverse; }
  .c-form-btn-area_item { width: min(100%, 400px); }
}
@media (max-width:640px) {
  .c-form-btn-area { flex-direction: column; }
  .c-form-btn-area_item { width: 100%; }
}

.c-form-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  border: none;
  margin: 0;
  outline: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 1.25rem 2.5rem;
  font-size: 1.1rem;
  width: 100%;
  transition: var(--hover-trans);
}
.c-form-btn { background-color: var(--color-secondary); color: #FFF; }
.c-form-btn[type="submit"] { background-color: var(--color-secondary); color: #FFF; }
@media (hover: hover) {
  .c-form-btn:hover { background-color: var(--color-secondary-light); }
  .c-form-btn[type="submit"]:hover { background-color: var(--color-secondary-light); }
}

/*--------------------------------------------------------------------------------
  .d-form-btn
--------------------------------------------------------------------------------*/
.d-form-btn-area {
  padding-top: var(--space-m);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width:641px) {
  .d-form-btn-area { flex-direction: row-reverse; }
  .d-form-btn-area_item { width: min(100%, 400px); }
}
@media (max-width:640px) {
  .d-form-btn-area { flex-direction: column; }
  .d-form-btn-area_item { width: 100%; }
}

.d-form-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  border: none;
  margin: 0;
  outline: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 1.25rem 2.5rem;
  font-size: 1.1rem;
  width: 100%;
  transition: var(--hover-trans);
}
.d-form-btn { background-color: var(--color-primary); color: #fff; }
.d-form-btn[type="submit"] { background-color: var(--color-primary); color: #fff; }
@media (hover: hover) {
  .d-form-btn:hover { background-color: var(--color-primary-light); }
  .d-form-btn[type="submit"]:hover { background-color: var(--color-primary-light); }
}


/*--------------------------------------------------------------------------------
  .c-form-tbl
--------------------------------------------------------------------------------*/
.c-form-tbl {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.6;
}
.c-form-tbl th,
.c-form-tbl td {
  padding: clamp(1rem, 2vw, 1.25rem);
}
.c-form-tbl tr:not(:last-child) {
  border-bottom: 1px solid rgba(50,60,65,0.15);
}
.c-form-tbl th {
  width: 25%;
  min-width: 7em;
  font-weight: bold;
  text-align: left;
  vertical-align: top;
  background-color: var(--color-quinary);
}
.c-form-tbl td {
  background-color: #FFF;
  vertical-align: middle;
}

/*--------------------------------------------------------------------------------
  .c-form-alert
--------------------------------------------------------------------------------*/
.c-form-alert {
  padding: var(--box-space-s);
  border: 1px solid var(--color-quaternary);
  background-color: #FCE1E1;
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
  margin-bottom: var(--space-m);
}
.c-form-alert.-sendok {
  padding: var(--box-space-m);
  margin-bottom: 0;
}
.c-form-alert_ttl {
  font-family: var(--ff-go);
  font-weight: 600;
  font-size: var(--fs-l);
  color: var(--color-quaternary);
}

/*--------------------------------------------------------------------------------
  .c-form-sendok
--------------------------------------------------------------------------------*/
.c-form-sendok {
  margin-bottom: var(--space-m);
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.c-form-sendok_ttl {
  font-family: var(--ff-go);
  font-weight: 600;
  font-size: var(--fs-l);
}

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