:where(.p-form *) {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  font-size: 100%;
  font: inherit;
  line-height: 1;
  border: 0;
  outline: 0;
  box-sizing: border-box;

  ol,
  ul {
    list-style: none;
  }

  li {
    list-style-type: none;
  }

  &::before,
  &::after {
    box-sizing: border-box;
  }

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

:where(.p-form select, .p-form textarea, .p-form button) {
  cursor: pointer;
  appearance: none;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  color: currentColor;
  background: none;
  border: none;
  outline: none;
  border-radius: 0;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;

  &:disabled {
    cursor: default;
  }
}

:where(.p-form input, .p-form select, .p-form textarea) {
  line-height: 1.6;
}

:where(.p-form textarea) {
  field-sizing: content;
}

:where(.p-form select::-ms-expand) {
  display: none;
}

.p-form {
  --point-color: #fc606e;
  --point-contrast-color: #fff;
  --transition: 0.3s ease;
  text-align: left;
  padding-block: min((90 / 750 * 100vw), 90px * 0.75)
    min((180 / 750 * 100vw), 180px * 0.75);
}

.p-form--confirm {
  .p-form__label {
    padding-left: 0;
  }
}

.p-form__title {
  text-align: center;
  margin-bottom: 1em;
  font-size: min((45 / 750 * 100vw), 45px * 0.75);
  font-weight: 600;
}

.p-form__errors {
  margin-bottom: 1em;
  padding: 2em;
  font-size: min((24 / 750 * 100vw), 24px * 0.75);
  line-height: 1.6;
  color: var(--point-color);
  background-color: var(--point-contrast-color);
  border: 2px solid;

  h2 {
    margin-bottom: 1em;
    font-size: 1.5em;
    font-weight: 600;
  }

  ul {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
    padding-left: 1em;
    text-indent: -1em;
  }

  li {
  }

  a {
    color: var(--point-color);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

.p-form__body {
  display: flex;
  flex-direction: column;
  gap: min((45 / 750 * 100vw), 45px * 0.75);
  padding: min((60 / 750 * 100vw), 60px * 0.75)
    min((36 / 750 * 100vw), 36px * 0.75) min((180 / 750 * 100vw), 180px * 0.75);
  background-color: #fff;

  .form-error,
  .error {
    padding-inline: 0.25em;
    font-size: min((24 / 750 * 100vw), 24px * 0.75);
    font-weight: 600;
    line-height: 1.6;
    color: var(--point-color);

    &:first-of-type {
      margin-top: 0.25em;
    }
  }
}

.p-form__item {
  :where(input:not([type='radio'], [type='checkbox']), select, textarea) {
    width: 100%;
    min-height: min((90 / 750 * 100vw), 90px * 0.75);
    padding: 0.5em 1em;
    font-size: clamp(16px, (30 / 750 * 100vw), 30px * 0.75);
    color: #000;
    background-color: #f5f5f5;
    border-radius: 5px;
    transition: var(--transition);
    transition-property: box-shadow;

    &:focus {
      box-shadow: 0 0 0 1px #000;
    }

    @media (any-hover: hover) {
      &:hover {
        box-shadow: 0 0 0 1px #000;
      }
    }
  }

  :where(select) {
    width: fit-content;
    padding-right: min((55 / 750 * 100vw), 55px * 0.75);
    max-width: 100%;
    background: #f5f5f5 url('../../imgs/omf/icon-arrow-down.svg') no-repeat
      right min((21 / 750 * 100vw), 21px * 0.75) center /
      min((13 / 750 * 100vw), 13px * 0.75) min((8 / 750 * 100vw), 8px * 0.75);
  }

  :where(textarea) {
    padding: 1em;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    min-height: min((450 / 750 * 100vw), 450px * 0.75);
  }

  :where(textarea[name='address']) {
    min-height: min((225 / 750 * 100vw), 225px * 0.75);
  }
}

.p-form__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  margin-bottom: 0.5em;
  padding-left: 0.25em;
  font-size: min((27 / 750 * 100vw), 27px * 0.75);
  font-weight: 600;
  cursor: pointer;

  .required {
    padding: 0.25em 0.5em;
    font-size: 0.75em;
    color: var(--point-contrast-color);
    background-color: var(--point-color);
    border-radius: 100vmax;
  }
}

.p-form__text {
  font-size: min((30 / 750 * 100vw), 30px * 0.75);
  line-height: 1.6;
}

.p-form__field {
}

.p-form__note {
  margin-bottom: 0.5em;
  font-size: min((21 / 750 * 100vw), 21px * 0.75);
  color: #555;
}

.p-form__radios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  font-size: clamp(16px, (30 / 750 * 100vw), 30px * 0.75);
  margin-top: 1em;

  &.radio-vertical {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5em;
  }
}

.p-form__radio-unit {
  display: grid;
  gap: 0.25em;
}

.p-form__radio-option {
  input {
    min-height: 0;
    padding: 0 0.5em;
    background-color: transparent;
    border-radius: 0;
    border-bottom: 1px solid #555;
    transition-property: border-bottom-color, opacity;

    &:focus {
      box-shadow: none;
      border-bottom-color: var(--point-color);
    }

    @media (any-hover: hover) {
      &:hover {
        box-shadow: none;
        border-bottom-color: var(--point-color);
      }
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.1;
    }
  }
}

.p-form__radio {
  display: block;
  cursor: pointer;

  &:has(.radio__selector) {
    width: fit-content;
    max-width: 100%;
  }

  .radio__input {
    &:checked {
      ~ .radio__button {
        color: var(--point-color);
        background-color: var(--point-contrast-color);
        box-shadow: 0 0 0 1px var(--point-color) inset;
      }

      ~ .radio__selector::after {
        opacity: 1;
        scale: 1;
      }

      ~ .radio__selector::before {
        background-color: var(--point-color);
        box-shadow: 0 0 0 1px var(--point-color);
        border-color: var(--point-color);
      }
    }
  }

  .radio__button {
    display: grid;
    place-items: center;
    min-height: min((90 / 750 * 100vw), 90px * 0.75);
    padding: 0.5em 1em;
    font-size: min((24 / 750 * 100vw), 24px * 0.75);
    font-weight: 500;
    color: #555;
    background-color: #f5f5f5;
    border-radius: 5px;
    transition: var(--transition);
    transition-property: color, background-color, box-shadow;
  }

  .radio__selector {
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75em;
    width: fit-content;
    max-width: 100%;
    padding: 0.5em;
    font-size: min((24 / 750 * 100vw), 24px * 0.75);
    font-weight: 500;

    &::before,
    &::after {
      grid-column: 1;
      grid-row: 1;
      content: '';
      display: block;
      width: 1em;
      height: 1em;
      border-radius: 3px;
    }

    &::before {
      background-color: #fff;
      border: 1px solid #828282;
      transition: var(--transition);
      transition-property: background-color, box-shadow, border-color;
    }

    &::after {
      opacity: 0;
      scale: 0;
      z-index: 10;
      background-color: #fff;
      mask: url('../../imgs/omf/icon-checkbox.png') no-repeat center center /
        calc(15 / 22 * 100%);
      transition: var(--transition);
      transition-property: opacity, scale;
    }
  }
}

.p-form__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: min((30 / 750 * 100vw), 30px * 0.75);
  padding: min((30 / 750 * 100vw), 30px * 0.75);
  background-color: #f5f5f5;
  border-radius: 5px;

  input:not([type='radio'], [type='checkbox']),
  select,
  textarea {
    width: 100%;
    min-height: min((45 / 750 * 100vw), 45px * 0.75);
    padding: 0.5em 1em;
    color: #000;
    background-color: #fff;
    box-shadow: 0 0 0 1px #828282;
    border-radius: 3px;

    &:focus {
      box-shadow: 0 0 0 1px #000;
    }
  }

  textarea {
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    min-height: min((180 / 750 * 100vw), 180px * 0.75);
  }
}

.p-form__row {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr);
  column-gap: min((18 / 750 * 100vw), 18px * 0.75);
  font-size: min((24 / 750 * 100vw), 24px * 0.75);
}

.p-form__row-label {
  padding-top: 1em;
}

.p-form__row-field {
  input[name='postal_code'] {
    width: min((230 / 750 * 100vw), 230px * 0.75);
  }

  select {
    width: min((230 / 750 * 100vw), 230px * 0.75);
  }
}

.p-form__agree {
  margin-top: min((30 / 750 * 100vw), 30px * 0.75);

  .error {
    width: fit-content;
    margin-inline: auto;
  }
}

.p-form__check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  font-size: min((27 / 750 * 100vw), 27px * 0.75);
  cursor: pointer;

  a {
    color: var(--point-color);
    text-decoration: underline;
  }

  input[type='checkbox'] {
    &:checked ~ .row::after {
      opacity: 1;
      scale: 1;
    }

    &:checked ~ .row::before {
      background-color: var(--point-color);
      box-shadow: 0 0 0 1px var(--point-color);
      border-color: var(--point-color);
    }
  }

  .row {
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75em;

    &::before,
    &::after {
      grid-column: 1;
      grid-row: 1;
      content: '';
      display: block;
      width: min((36 / 750 * 100vw), 36px);
      height: min((36 / 750 * 100vw), 36px);
      border-radius: min((6 / 750 * 100vw), 6px);
    }

    &::before {
      background-color: #fff;
      border: 1px solid #828282;
      transition: var(--transition);
      transition-property: background-color, box-shadow, border-color;
    }

    &::after {
      opacity: 0;
      scale: 0;
      z-index: 10;
      background-color: #fff;
      mask: url('../../imgs/omf/icon-checkbox.png') no-repeat center center /
        calc(15 / 22 * 100%);
      transition: var(--transition);
      transition-property: opacity, scale;
    }
  }

  .text {
    grid-column: 2;
  }
}

.p-form__submit {
  display: grid;
  place-items: center;
  width: fit-content;
  margin-inline: auto;
  margin-top: min((30 / 750 * 100vw), 30px * 0.75);

  &::before,
  &::after {
    opacity: 0;
    transform: scale(0.9);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 1.5em;
    height: 1.5em;
    aspect-ratio: 1/1;
    margin: auto;
    border-radius: 50%;
    transition: var(--transition);
    transition-property: opacity, transform;
  }

  &:has(.is-loading) {
    position: relative;
    color: currentColor;

    &::before,
    &::after {
      transform: none;
    }

    &::before {
      opacity: 1;
      z-index: 10;
      border: 3px solid transparent;
      border-top: 3px solid var(--point-color);
      animation: Spin 0.5s linear infinite;
      animation-fill-mode: both;
    }

    &::after {
      opacity: 0.3;
      z-index: 5;
      box-shadow: 0 0 0 3px var(--point-color) inset;
    }
  }
}

.p-form__button {
  display: grid;
  place-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: min((600 / 750 * 100vw), 600px * 0.75);
  min-height: min((90 / 750 * 100vw), 90px * 0.75);
  margin-inline: auto;
  padding: 1.25em 1em;
  font-size: min((30 / 750 * 100vw), 30px * 0.75);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--point-contrast-color);
  background-color: var(--point-color);
  border-radius: 10px;
  transition: var(--transition);
  transition-property: opacity, box-shadow, color, background-color;

  &:disabled {
    opacity: 0.2;
    cursor: not-allowed;
  }
}

@keyframes Spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.p-form__back-btn {
  display: block;
  width: fit-content;
  margin-bottom: 1em;
  font-size: min((21 / 750 * 100vw), 21px * 0.75);
  color: rgba(0, 0, 0, 0.5);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.p-form__message {
  text-align: center;
  font-size: min((24 / 750 * 100vw), 24px * 0.75);

  > * {
    margin-block: 1.5em;
    line-height: 1.6;
  }

  > :first-child {
    margin-top: 0 !important;
  }

  > :last-child {
    margin-bottom: 0 !important;
  }

  h2 {
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1.6;
  }
}

.p-form__gotop {
  display: grid;
  place-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: min((600 / 750 * 100vw), 600px * 0.75);
  min-height: min((90 / 750 * 100vw), 90px * 0.75);
  margin-inline: auto;
  margin-top: min((30 / 750 * 100vw), 30px * 0.75);
  padding: 1em;
  font-size: min((30 / 750 * 100vw), 30px * 0.75);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--point-contrast-color);
  background-color: var(--point-color);
  border-radius: 10px;
}

@media (width >= 800px) {
  .p-form {
    max-width: clamp(600px, (800 / 1440 * 100vw), 800px);
    margin-inline: auto;
    padding-block: min((90 / 1440 * 100vw), 90px)
      min((180 / 1440 * 100vw), 180px);
  }

  .p-form__title {
    font-size: min((36 / 1440 * 100vw), 36px);
  }

  .p-form__errors {
    font-size: min((15 / 1440 * 100vw), 15px);
    a {
      @media (any-hover: hover) {
        transition: var(--transition);
        transition-property: opacity;

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }

  .p-form__body {
    gap: min((30 / 1440 * 100vw), 30px);
    padding: min((60 / 1440 * 100vw), 60px) min((90 / 1440 * 100vw), 90px)
      min((120 / 1440 * 100vw), 120px);
    border-radius: 10px;

    .form-error,
    .error {
      font-size: min((15 / 1440 * 100vw), 15px);
    }
  }

  .p-form__item {
    :where(input:not([type='radio'], [type='checkbox']), select, textarea) {
      min-height: min((45 / 1440 * 100vw), 45px);
      padding: min((10 / 1440 * 100vw), 10px) 1em;
      font-size: min((18 / 1440 * 100vw), 18px);

      @media (any-hover: hover) {
        &:hover {
          box-shadow: 0 0 0 1px #000;
        }
      }
    }

    :where(select) {
      padding-right: min((55 / 1440 * 100vw), 55px);
      background-position: right min((21 / 1440 * 100vw), 21px) center;
      background-size: min((13 / 1440 * 100vw), 13px)
        min((8 / 1440 * 100vw), 8px);
    }

    :where(textarea) {
      min-height: min((240 / 1440 * 100vw), 240px);
      padding: 1em;
    }

    :where(textarea[name='address']) {
      min-height: min((120 / 1440 * 100vw), 100px);
    }
  }

  .p-form__label {
    font-size: min((15 / 1440 * 100vw), 15px);
  }

  .p-form__field {
  }

  .p-form__note {
    font-size: min((12 / 1440 * 100vw), 12px);
  }

  .p-form__radios {
    /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
    font-size: min((18 / 1440 * 100vw), 18px);
  }

  .p-form__radio-unit {
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1em;
  }

  .p-form__radio-option {
  }

  .p-form__radio {
    .radio__input {
    }
    .radio__button {
      min-height: min((75 / 1440 * 100vw), 75px * 0.75);
      font-size: min((15 / 1440 * 100vw), 15px);

      @media (any-hover: hover) {
        &:hover {
          box-shadow: 0 0 0 1px #555 inset;
        }
      }
    }

    .radio__selector {
      font-size: min((15 / 1440 * 100vw), 15px);
      @media (any-hover: hover) {
        &:hover {
          &::before {
            border-color: var(--point-color);
          }
        }
      }
    }
  }

  .p-form__group {
    row-gap: min((18 / 1440 * 100vw), 18px);
    padding: min((30 / 1440 * 100vw), 30px) min((45 / 1440 * 100vw), 45px);
    border-radius: 5px;

    input:not([type='radio'], [type='checkbox']),
    select,
    textarea {
      min-height: min((45 / 1440 * 100vw), 45px);
      padding: 0.5em 1em;
    }

    textarea {
      min-height: min((90 / 1440 * 100vw), 90px);
    }
  }

  .p-form__row {
    column-gap: min((18 / 1440 * 100vw), 18px);
    font-size: min((15 / 1440 * 100vw), 15px);
  }

  .p-form__row-label {
  }

  .p-form__row-field {
    input[name='postal_code'] {
      width: min((230 / 1440 * 100vw), 230px);
    }

    select {
      width: min((230 / 1440 * 100vw), 230px);
    }
  }

  .p-form__agree {
    margin-top: min((15 / 1440 * 100vw), 15px);
  }

  .p-form__check {
    font-size: min((18 / 1440 * 100vw), 18px);

    .row {
      &::before,
      &::after {
        width: min((24 / 1440 * 100vw), 24px);
        height: min((24 / 1440 * 100vw), 24px);
        border-radius: 5px;
      }
    }

    @media (any-hover: hover) {
      &:hover {
        .row::before {
          border-color: var(--point-color);
        }
      }
    }

    a {
      @media (any-hover: hover) {
        transition: var(--transition);
        transition-property: opacity;

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }

  .p-form__submit {
    margin-top: min((15 / 1440 * 100vw), 15px);
  }

  .p-form__button {
    min-width: min((360 / 1440 * 100vw), 360px);
    min-height: min((60 / 1440 * 100vw), 60px);
    font-size: min((18 / 1440 * 100vw), 18px);
    &:not(:disabled) {
      @media (any-hover: hover) {
        &:hover {
          color: var(--point-color);
          background-color: var(--point-contrast-color);
          box-shadow: 0 0 0 3px var(--point-color);
        }
      }
    }
  }

  .p-form__back-btn {
    font-size: min((12 / 1440 * 100vw), 12px);

    @media (any-hover: hover) {
      transition: color var(--transition);

      &:hover {
        color: #000;
      }
    }
  }

  .p-form__text {
    font-size: min((18 / 1440 * 100vw), 18px);

    &.preline {
      white-space: pre-line;
    }
  }

  .p-form__message {
    font-size: min((15 / 1440 * 100vw), 15px);
  }

  .p-form__gotop {
    min-width: min((360 / 1440 * 100vw), 360px);
    min-height: min((60 / 1440 * 100vw), 60px);
    margin-top: min((30 / 1440 * 100vw), 30px);
    font-size: min((18 / 1440 * 100vw), 18px);
    transition: var(--transition);
    transition-property: opacity, box-shadow, color, background-color;

    @media (any-hover: hover) {
      &:hover {
        color: var(--point-color);
        background-color: var(--point-contrast-color);
        box-shadow: 0 0 0 3px var(--point-color);
      }
    }
  }
}