/* form grid */
.form-set {
  display: grid;
  gap: 10px;
}

.chefsrec-form-wrapper .form-set {
  margin-bottom: var(--space-XS);
}

.select-wrapper + .form-set,
.form-set + .select-wrapper,
.input-common + .form-set,
.form-set + .input-common {
  margin-top: var(--space-XS);
}

.form-set .input-common {
  width: 100%;
}

.form-two-piece {
  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
}

.form-two-piece .form-left {
  grid-column: 1 / 2;
}

.form-two-piece .form-right {
  grid-column: 2 / 3;
}

/* form input */
input {
  font-size: var(--text-M);
}

input::placeholder {
  color: var(--color-dark-grey);
}

.icon-check {
  margin-top: var(--space-XXS);
  display: block;
}

.password-rules-checklist .password-rule {
  display: flex;
  align-items: center;
  margin: 2px 0;
  height: auto;
}

.password-rules-checklist .password-rule .icon-check_gray {
  color: #999999;
}

.password-rules-checklist .password-rule i {
  margin: 0 4px 0 0;
}

.password-strength-container {
  margin-bottom: var(--space-XS);
}

.password-strength-label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
  font-size: var(--text-S);
  color: var(--color-dark-grey);
}

.password-strength-progress {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
}

.password-strength-progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 4px;
}

.password-strength-progress.strength-very-weak::-webkit-progress-value { background-color: #d9534f; }
.password-strength-progress.strength-weak::-webkit-progress-value { background-color: #f0ad4e; }
.password-strength-progress.strength-moderate::-webkit-progress-value { background-color: #5bc0de; }
.password-strength-progress.strength-strong::-webkit-progress-value { background-color: #5cb85c; }
.password-strength-progress.strength-very-strong::-webkit-progress-value { background-color: #4cae4c; }

.password-wrapper {
  position: relative;
}

.password-toggle-button i {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: 16px;
}

.icon-eye, .icon-eye-blocked {
  color: var(--color-dark-grey);
}

.input-common {
  background: var(--color-white);
  border: 1px solid var(--color-grey);
  border-radius: var(--radius-common);
  height: 44px;
  width: 100%;
}

.input-common:focus {
  border: 1px solid transparent;
  outline: 1px solid var(--color-red-hover);
}

.input-common.input-error,
.validate-wrapper.input-error {
  border: 1px solid var(--color-red-hover);
}

.input-common:disabled,
.input-common[readonly],
.input-common[readonly]:focus {
  background: var(--color-ddd);
  border: none;
  outline: none;
  cursor: default;
}

.input-common:disabled i {
  color: var(--color-grey);
}

.input-common.input-error {
  background: var(--color-light-pink);
}

.input-error-text {
  display: none;
}

.input-error-wrapper .input-error-text {
  display: block;
  background: var(--color-light-pink);
  padding: var(--space-S) var(--space-XS);
  font-size: var(--text-L);
  font-weight: bold;
  color: var(--color-red);
}

.input-common.view-only {
  align-items: center;
  background: var(--color-black-opacity-4);
  border: none;
  display: flex;
  font-size: var(--text-M);
  gap: 20px;
  height: auto;
  padding: var(--space-XS);
}

.input-common.view-only img {
  border-radius: var(--radius-common);
  height: 66px;
  min-width: 100px;
  max-width: 100px;
}

.input-common.view-only .radio-box-category {
  display: block;
  padding-bottom: var(--space-XS);
}

.input-common.view-only .radio-box-category:last-child {
  padding-bottom: 0;
}

.input-date-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-date-wrapper i {
  position: absolute;
  left: 10px;
}

.input-date-wrapper i::before {
  color: var(--color-red);
}

.input-date-wrapper .input-date {
  padding-left: var(--space-XL);
}

.input-date::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.input-date::-webkit-inner-spin-button,
.input-date::-webkit-clear-button {
  -webkit-appearance: none;
}

.input-sub-text {
  color: var(--color-grey);
  margin-top: var(--space-XS);
}

.input-with-icon-wrapper {
  display: flex;
  position: relative;
}

.input-with-icon-wrapper > i {
  color: var(--color-red);
  position: absolute;
  left: 10px;
  top: 10px;
}

.input-with-icon-wrapper .icon-cancel {
  left: unset;
  right: 10px;
}

.input-with-icon-wrapper-disabled i {
  color: var(--color-grey);
}

.input-textbox {
  background: var(--color-pale-grey);
  border: none;
  padding-left: var(--space-XL);
}

.input-textbox-simple {
  padding-left: var(--space-XS);
}

.input-textbox-simple::placeholder {
  color: var(--color-grey);
}

.input-textbox-simple + .input-textbox-simple {
  margin-top: var(--space-XS);
}

.input-textbox-set,
.input-select-set {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--text-L);
}

.select-wrapper {
  display: flex;
  font-size: var(--text-L);
  position: relative;
}

.select-wrapper select {
  color: var(--color-black);
  cursor: pointer;
  padding: var(--space-XS);
}

.select-option-unselected select {
  color: var(--color-grey);
}

.select-wrapper i {
  position: absolute;
  right: 10px;
  top: 10px;
  pointer-events: none;
}

.select-wrapper-sort select {
  border: none;
  padding-left: var(--space-XL);
}

.select-wrapper-sort .icon-sort {
  left: 10px;
}

.input-select-set.select-three-piece {
  gap: unset;
  justify-content: space-between;
}

.select-three-piece .select-wrapper {
  width: 33%;
}

.select-three-piece .select-wrapper select {
  background: var(--color-pale-grey);
  border: none;
  border-radius: 0;
  padding-left: var(--space-L);
  line-height: 1.6;
}

.select-three-piece .select-wrapper:first-child select {
  border-radius: var(--radius-common) 0 0 var(--radius-common);
}

.select-three-piece .select-wrapper:last-child select {
  border-radius: 0 var(--radius-common) var(--radius-common) 0;
}

.select-three-piece .select-wrapper i {
  right: 0;
}

.select-three-piece .select-wrapper .select-column-icon {
  font-size: var(--icon-S);
  left: 5px;
  top: 14px;
}

.select-three-piece .select-wrapper .select-column-icon::before {
  color: var(--color-red);
}

.chefsrec-form-wrapper .select-wrapper select {
  background: var(--color-black-opacity-4);
  border: none;
  color: var(--color-red);
  font-size: var(--text-M);
}

.chefsrec-form-wrapper .button-base {
  font-size: var(--text-M);
}

.input-textarea {
  font-size: var(--text-M);
  height: 98px;
  padding: var(--space-XS);
}

/* checkbox */
.check-sausage {
  align-items: center;
  background: var(--color-light-red);
  border-radius: var(--radius-sausage);
  color: var(--color-dark-grey);
  display: inline-flex;
  font-size: var(--text-M);
  height: 32px;
  line-height: 19px;
  min-width: max-content;
  padding: var(--space-XXS) var(--space-S) var(--space-XXS) var(--space-XS);
}

.check-sausage .input-checkbox-text {
  font-size: var(--text-S);
}

.check-sausage.checkbox-label {
  display: inline-flex;
  padding-left: var(--space-radio-text);
}

.check-sausage.checkbox-label::before {
  height: 18px;
  left: 10px;
  top: 7px;
  width: 18px;
}

/* radio */
.radio-label {
  cursor: pointer;
  padding: var(--space-XS) 0 var(--space-XS) var(--space-L);
  position: relative;
}

.radio-label::before {
  border: 1px solid var(--color-red);
  border-radius: var(--radius-circle);
  content: '';
  display: inline-block;
  height: 16px;
  left: 3px;
  top: auto;
  position: absolute;
  width: 16px;
}

.radio-label input[type='radio']:checked + .input-radio-text,
.radio-label input[type='checkbox']:checked + .input-radio-text {
  position: relative;
}

.radio-label input[type='radio']:checked + .input-radio-text::before,
.radio-label input[type='checkbox']:checked + .input-radio-text::before {
  background: var(--color-red);
  border-radius: var(--radius-circle);
  content: '';
  display: inline-block;
  height: 10px;
  left: -24px;
  top: 7px;
  position: absolute;
  width: 10px;
}

.radio-label:focus::before {
  background: var(--color-light-red);
}

.radio-box {
  border: 1px solid var(--color-grey);
  font-size: var(--text-M);
  height: auto;
  padding: 0 var(--space-XS);
}

.radio-box + .radio-box {
  margin-top: var(--space-XS);
}

.radio-box-disabled {
  background: var(--color-ddd);
  border: 0;
}

.radio-box .button-base {
  background: var(--color-white);
  border: 1px solid var(--color-ddd);
  box-shadow: none;
  color: var(--color-black);
  font-weight: normal;
  width: 80px;
}

.radio-box-category {
  align-items: center;
  border-bottom: 1px solid var(--color-ddd);
  display: flex;
  flex-wrap: wrap;
  line-height: 20px;
}

.radio-box-category:last-child {
  border-bottom: 0;
}

.radio-box-category:only-child {
  border-bottom: 0;
}

.radio-box-category .radio-label {
  align-items: center;
  display: flex;
  flex: 1 1 50%;
  line-height: 24px;
}

.radio-box-category .radio-description {
  padding: var(--space-XS) 0;
}

.radio-box-category [class*='icon-'] {
  font-size: var(--text-M);
  margin-right: var(--space-XS);
}

.radio-box-disabled,
.radio-box-disabled .radio-label {
  pointer-events: none;
}

.radio-box-disabled .radio-label::before {
  background: var(--color-ef);
  border: 1px solid var(--color-grey);
}

.radio-box .link-text {
  border-bottom: 1px solid var(--color-red);
}

.check-sausage {
  background: var(--color-black-opacity-4);
  border: 1px solid var(--color-black-opacity-4);
  border-radius: var(--radius-sausage);
  color: var(--color-black-333);
  display: inline-flex;
  font-size: var(--text-S);
  height: 32px;
  line-height: 10px;
  padding: var(--space-XS) var(--space-S) var(--space-XS) var(--space-radio-text);
}

.check-sausage::before {
  left: 12px;
  top: 7px;
}

.check-sausage input[type='radio']:checked + .input-radio-text::before,
.check-sausage input[type='checkbox']:checked + .input-radio-text::before {
  left: -20px;
  top: 0;
}

.radio-icon::before {
  display: none;
}

.radio-icon i {
  color: var(--color-red);
  font-size: var(--title-S);
  left: 14px;
  position: absolute;
  top: 5px;
}

.radio-inputted {
  background: var(--color-light-red);
  border: 1px solid var(--color-red);
}

.input-common.radio-inputted:hover {
  background: var(--color-light-red);
}

.radio-label-text-long::before {
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.radio-label-text-long input[type='radio']:checked + .input-radio-text,
.radio-label-text-long input[type='checkbox']:checked + .input-radio-text {
  position: initial;
}

.radio-label-text-long input[type='radio']:checked + .input-radio-text::before,
.radio-label-text-long input[type='checkbox']:checked + .input-radio-text::before {
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

/* checkbox */
.checkbox-label {
  cursor: pointer;
  display: inline-block;
  padding-left: var(--space-XS);
  position: relative;
}

.checkbox-label::before {
  border: 1px solid var(--color-grey);
  border-radius: var(--radius-checkbox-inner);
  content: '';
  display: inline-block;
  height: 21px;
  left: 3px;
  top: auto;
  position: absolute;
  width: 21px;
}

.checkbox-label input[type='checkbox']:checked + .input-checkbox-text {
  position: relative;
}

.checkbox-label input[type='checkbox']:checked + .input-checkbox-text::before {
  content: '';
  display: inline-block;
  left: -22px;
  top: 3px;
  position: absolute;
  width: 13px;
  height: 7px;
  border: 2.5px solid var(--color-red);
  border-top: 0;
  border-right: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(-45deg);
}

.input-checkbox-text {
  font-size: var(--text-input-title);
  position: relative;
}

.input-common.checkbox-label {
  font-size: var(--text-M);
  height: auto;
  padding: var(--space-XS) var(--space-XS) var(--space-XS) var(--space-XL);
  line-height: 24px;
  display: flex;
  align-items: center;
}

.input-common.checkbox-label::before {
  left: 10px;
  height: 18px;
  width: 18px;
}

.input-common .input-checkbox-text {
  font-size: var(--text-M);
}

.input-common.checkbox-label input[type='checkbox']:checked + .input-checkbox-text::before {
  left: -27px;
  top: calc(50% - 3px);
}

.checkbox-label.checkbox-disabled,
.checkbox-label.checkbox-disabled .input-checkbox-text {
  pointer-events: none;
}

.checkbox-label.checkbox-disabled::before {
  background: var(--color-ef);
  border: 1px solid var(--color-grey);
}

.checkbox-label.checkbox-disabled .input-checkbox-text {
  color: var(--color-grey);
}

/* error message */
.error-message, .emphasis-message {
  color: var(--color-pink);
  font-size: var(--text-XS);
  margin-top: var(--space-XXXS);
}

/* 予約 */
.login-link-wrapper {
  background: var(--color-red);
  border-radius: var(--radius-banner);
  padding: var(--space-M);
}

.login-link-wrapper .button-base {
  display: inline-flex;
  padding: var(--space-M) var(--space-S);
  margin-bottom: var(--space-XS);
  width: fit-content;
}

.login-link-text {
  color: var(--color-white);
  display: inline;
  font-size: var(--text-L);
  font-weight: bold;
  margin-bottom: var(--space-S);
}

@media (min-width: 768px) {
  /* form grid */
  .chefsrec-form-wrapper .form-set,
  .chefsrec-form-wrapper .button-base {
    width: 560px;
  }

  .chefsrec-form-wrapper .select-wrapper {
    width: 100%;
  }

  .chefsrec-form-wrapper .form-set {
    margin-top: var(--space-XL);
  }

  /* form input */
  .input-common:hover {
    background: var(--color-black-opacity-4);
  }

  .input-common:disabled:hover,
  .input-common[readonly]:hover {
    background: var(--color-ddd);
    border: none;
    pointer-events: none;
  }

  .input-common.input-error:hover {
    background: var(--color-light-pink);
  }

  .input-textbox:hover {
    background: var(--color-black-opacity-8);
  }

  /* radio */
  .radio-label:hover {
    color: var(--color-red-hover);
  }

  .radio-label:hover::before {
    background: var(--color-light-red);
  }

  .radio-label-text-long:hover .input-radio-text {
    color: var(--color-black);
  }

  /* textbox */
  .input-common {
    width: 350px;
  }

  .input-with-icon-wrapper,
  .select-wrapper {
    width: max-content;
  }

  .input-with-icon-wrapper .icon-cancel {
    display: none;
  }

  .input-with-icon-wrapper:hover .icon-cancel {
    display: block;
  }
}