._inner_o4b66_1 {
  --column-number: 1;

  display: grid;
  grid-template-columns: repeat(var(--column-number), minmax(0, 1fr));
  gap: var(--SPACE-BLOCK-SPACING-48);

  > * {
    height: 100%;
  }

  ._item_o4b66_12 {
    list-style: none;
    position: relative;
  }

  &._justify-start_o4b66_17 {
    justify-content: flex-start;
  }

  &._justify-center_o4b66_21 {
    justify-content: center;
  }

  &._justify-end_o4b66_25 {
    justify-content: flex-end;
  }

  /* SP Viewport */
  @media (width <= 768px) {
    gap: var(--SPACE-BLOCK-SPACING-16);

    &._columnSP-2_o4b66_33 {
      grid-template-columns: repeat(auto-fill, minmax(284px, 1fr));
    }

    &._columnSP-auto_o4b66_37 {
      display: flex;
      flex-wrap: wrap;

      > * {
        flex: 0 0 auto;
        max-width: 100%;
      }
    }
  }

  /* PC Viewport */
  @media (768px < width) {
    gap: var(--SPACE-BLOCK-SPACING-8) var(--SPACE-BLOCK-SPACING-24);

    &._columnPC-2_o4b66_52 {
      --column-number: 2;
    }

    &._columnPC-3_o4b66_56 {
      grid-template-columns: repeat(auto-fill, minmax(312px, 1fr));
    }

    &._columnPC-4_o4b66_60 {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    &._columnPC-auto_o4b66_64 {
      display: flex;
      flex-wrap: wrap;

      > * {
        flex: 0 0 auto;
        max-width: 100%;
      }
    }
  }
}

/* .item {
} */
._FormButton_hs888_1 {
  --local-foreground: var(--TEXT-WHITE);
  --local-background: var(--BG-WHITE);
  --local-outline: var(--TEXT-BLACK);
  --local-icon-size: 16px;

  display: inline-flex;
  position: relative;

  &::before,
  &::after {
    content: '';
    display: block;
    height: var(--local-icon-size);
    left: 0;
    position: absolute;
    top: 0.25em;
    width: var(--local-icon-size);

    @media (width > 768px) {
      top: calc(var(--HALF-LEADING) * -1);
    }
  }

  /* outside */
  &::before {
    background-color: var(--local-background);
    border: 1px solid var(--local-outline);
  }

  /* inside */
  &::after {
    background-color: var(--local-foreground);
    opacity: 0;
    transform: scale(0.5);
  }

  &:has([type='radio']:checked) {
    &::before {
      border-width: 4px;
    }
  }

  &:has([type='checkbox']:checked) {
    &::before {
      --local-background: var(--local-foreground);
    }

    :where(._text_hs888_49) {
      padding-left: calc(var(--local-icon-size) + var(--SPACE-BLOCK-SPACING-8));
    }
  }

  &:has(:disabled) {
    --local-foreground: #8e8e94;
    --local-background: #f2f2f5;

    cursor: not-allowed;
    color: var(--local-foreground);
  }

  &:has(:checked) {
    &::before {
      background-color: var(--BG-BLACK);
    }

    &::after {
      opacity: 1;
    }
  }

  &:has(:focus-visible) {
    outline: medium solid currentColor;
    outline-offset: 2px;
  }

  &:has([type='radio']) {
    &::before,
    &::after {
      border-radius: 50%;
    }
  }

  &:has([type='checkbox']) {
    &::after {
      background-color: var(--local-background);
      mask-image: url('/assets/images/common/icon-check.svg');
      mask-repeat: no-repeat;
      mask-size: cover;
      transform: scale(0.8);
    }
  }
}

._item_hs888_95 {
  appearance: none;
  height: 1px;
  left: 10px;
  opacity: 0;
  position: absolute;
  top: 10px;
  width: 1px;
}

._text_hs888_49 {
  color: currentColor;
  line-height: 1.5;
  font-size: var(--FONT-SIZE-XS);
  padding-left: calc(var(--local-icon-size) + var(--SPACE-BLOCK-SPACING-8));
  position: relative;

  @media (768px < width) {
    font-size: var(--FONT-SIZE-BASE);
  }
}

._icon_hs888_117 {
  height: 1lh;
  margin-right: var(--SPACE-BLOCK-SPACING-4);

  @media (768px < width) {
    width: 24px;
    padding-inline: 2px;
  }
}
._FormSelect_1xc5g_1 {
  --local-foreground: var(--TEXT-BLACK);
  --local-background: var(--BG-WHITE);
  --local-outline: var(--COLOR-GRAY-400);
  --local-placeholder: var(--TEXT-BLACK);
  --local-padding: var(--SPACE-BLOCK-SPACING-16);
  --local-width: 240px;

  border: 1px solid var(--local-outline);
  display: inline-flex;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  width: 100%;

  @media (768px < width) {
    width: var(--local-width);
  }

  &:focus-within {
    outline: medium solid currentColor;
  }

  &:has(select) {
    /* icon */
    &::before {
      background-color: currentColor;
      content: '';
      width: 16px;
      height: 16px;
      mask-image: url('/assets/images/common/icon-pulldown.svg');
      mask-repeat: no-repeat;
      mask-size: contain;
      pointer-events: none;
      position: absolute;
      right: var(--local-padding);
      top: 50%;
      transform: translateY(-50%);
    }

    :where(._item_1xc5g_41) {
      padding-right: var(--SPACE-BLOCK-SPACING-40);
    }
  }

  :where(._item_1xc5g_41) {
    appearance: none;
    background-color: var(--local-background);
    border: 0;
    color: var(--local-foreground);
    font-size: var(--FONT-SIZE-XS);
    line-height: 1.5;
    display: block;
    outline: none;
    padding: var(--SPACE-BLOCK-SPACING-8) var(--local-padding);
    width: 100%;

    @media (768px < width) {
      font-size: var(--FONT-SIZE-BASE);
    }

    &::placeholder {
      color: var(--local-placeholder);
      opacity: 0.5;
    }
  }

  &._theme-large_1xc5g_68 {
    --local-width: 480px;
  }

  &._theme-full_1xc5g_72 {
    --local-width: 100%;
  }
}
._FormText_11bo1_1 {
  --local-foreground: var(--TEXT-BLACK);
  --local-background: var(--BG-WHITE);
  --local-outline: var(--COLOR-GRAY-400);
  --local-placeholder: var(--COLOR-GRAY-400);
  --local-padding-block: var(--SPACE-BLOCK-SPACING-8);
  --local-padding-inline: var(--SPACE-BLOCK-SPACING-16);
  --local-width: 240px;

  border: 1px solid var(--local-outline);
  display: inline-flex;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  width: 100%;

  @media (768px < width) {
    width: var(--local-width);
  }

  &:focus-within {
    outline: medium solid currentColor;
  }

  :where(._item_11bo1_25) {
    appearance: none;
    background-color: var(--local-background);
    border: 0;
    color: var(--local-foreground);
    display: block;
    font-size: var(--FONT-SIZE-XS);
    height: 40px;
    line-height: 1.5;
    outline: none;
    padding: var(--local-padding-block) var(--local-padding-inline);
    width: 100%;

    &::placeholder {
      color: var(--local-placeholder);
      opacity: 0.5;
    }

    @media (width > 768px) {
      font-size: var(--FONT-SIZE-BASE);
    }
  }

  &:has(:disabled) {
    --local-background: #f2f2f5;
    --local-foreground: #8e8e94;

    :is(&::before, &::placeholder, &::-webkit-datetime-edit-fields-wrapper) {
      color: var(--local-foreground);
    }

    :is(._item_11bo1_25) {
      cursor: not-allowed;
    }
  }

  &._theme-large_11bo1_61 {
    --local-width: 480px;
  }

  &._theme-full_11bo1_65 {
    --local-width: 100%;
  }

  &:has([type='date']) {
    /* icon */
    &::before {
      background-color: currentColor;
      content: '';
      height: 24px;
      mask-image: url('/assets/images/common/icon-calendar.svg');
      mask-repeat: no-repeat;
      mask-size: cover;
      pointer-events: none;
      position: absolute;
      right: var(--local-padding-inline);
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      color: var(--COLOR-GRAY-700);
    }
  }

  :where([type='date']) {
    font-size: var(--FONT-SIZE-XS) !important;
    line-height: normal;

    @media (width > 768px) {
      font-size: var(--FONT-SIZE-BASE) !important;
    }
  }
}
._FormTextarea_1aezl_1 {
  --local-foreground: var(--TEXT-BLACK);
  --local-background: var(--BG-WHITE);
  --local-outline: var(--COLOR-GRAY-400);
  --local-placeholder: var(--COLOR-GRAY-400);
  --local-padding-block: var(--SPACE-BLOCK-SPACING-8);
  --local-padding-inline: var(--SPACE-BLOCK-SPACING-16);
  --local-width: 240px;

  border: 1px solid var(--local-outline);
  display: inline-flex;
  max-width: 100%;
  position: relative;
  width: 100%;

  @media (768px < width) {
    width: fit-content;
  }

  &:focus-within {
    outline: medium solid currentColor;
  }

  &:has(textarea) {
    display: flex;

    :where(._item_1aezl_27) {
      min-height: 200px;
    }
  }

  :where(._item_1aezl_27) {
    appearance: none;
    background-color: var(--local-background);
    border: 0;
    color: var(--local-foreground);
    display: block;
    font-size: var(--FONT-SIZE-XS);
    outline: none;
    overflow: auto;
    padding: var(--local-padding-block) var(--local-padding-inline);
    resize: both;
    width: 100%;
    max-width: min(
      100vw -
      var(--SPACE-BLOCK-SPACING-32),
      var(--CONTENT-WIDTH-PC)
    );

    @media (768px < width) {
      width: var(--local-width);
    }

    @media (width > 768px) {
      font-size: var(--FONT-SIZE-BASE);
    }

    &::placeholder {
      color: var(--local-placeholder);
      opacity: 0.5;
    }
  }

  &:has(:disabled) {
    --local-background: #f2f2f5;
    --local-foreground: #8e8e94;

    :is(&::before, &::placeholder, &::-webkit-datetime-edit-fields-wrapper) {
      color: var(--local-foreground);
    }

    :is(._item_1aezl_27) {
      cursor: not-allowed;
    }
  }

  &._theme-large_1aezl_77 {
    :where(._item_1aezl_27) {
      --local-width: 480px;
    }
  }

  &._theme-full_1aezl_83 {
    width: 100%;

    :where(._item_1aezl_27) {
      --local-width: 100%;

      resize: vertical;
    }
  }
}
._TextPlaceholder_1r3r6_1 {
  margin-top: var(--SPACE-BLOCK-SPACING-8);
  font-size: var(--FONT-SIZE-XS);
  color: var(--TEXT-GRAY);

  @media (width > 768px) {
    font-size: var(--FONT-SIZE-BASE);
  }
}
._TextWarning_1qmxl_1 {
  color: var(--TEXT-RED);
  display: flex;
  flex-direction: column;
  gap: var(--SPACE-BLOCK-SPACING-8);
  margin-top: var(--SPACE-BLOCK-SPACING-16);
  padding-left: 1.5em;
  position: relative;

  /* icon */
  &::before {
    background-color: currentColor;
    content: '';
    display: block;
    height: 1em;
    left: 0;
    mask-image: url('/assets/images/common/icon-warning.svg');
    mask-repeat: no-repeat;
    mask-size: cover;
    position: absolute;
    top: calc((var(--LINE-HEIGHT) - 1) / 2 * 1em);
    width: 1em;
  }
}

._item_1qmxl_26 {
  flex: 0 0 auto;
  width: 100%;

  :where(strong) {
    font-weight: var(--FONT-WEIGHT-NORMAL);
    font-size: var(--FONT-SIZE-XS);
  }
}