@charset "utf-8";

.main {
  /* ==== illust ==== */
  &::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 2;
    display: block flow;
    inline-size: 544px;
    aspect-ratio: 544 / 490;
    pointer-events: none;
    content: '';
    background-image: url('../../img/_common/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  @media (width <= 768px) {
    &::before {
      inline-size: calc((100 / 390) * 144 * 1vw);
    }
  }
}

/* =====================
  Form
===================== */
.form {
  /* サイトメインカラー */
  --_main-color: var(--primary, '#33508f');
  --_red: #b61024;
  --_gray: #575757;

  /* フォーム背景 */
  --_input-bg-color: #f2f4f6;

  /* 表の枠色 */
  --_table-bd-color: #e1e1e1;

  /* Step */
  --_active-color: var(--_main-color);
  --_inactive-color: #989898;
}

.form,
.form * {
  box-sizing: border-box;
}

.form {
  max-inline-size: 843px;
  padding-block-end: 159px;
  margin-inline: auto;
}

@media not all and (width >= 768px) {
  .form {
    padding-block-end: 11.1vw;
    padding-inline: 0;
  }
}

/* 文章 */
.form .form-text {
  font-weight: 500;
  line-height: 1.8;
  text-align: left;

  @media not all and (width >= 768px) {
    padding-inline: 0;
    font-size: calc((100 / 750) * 28 * 1vw);
  }
}

.form .form-text.tac {
  font-weight: 500;
  text-align: center;

  @media not all and (width >=768px) {
    text-align: left;
  }
}

.form[data-id='complete'] .form-text.tac {
  @media not all and (width >=768px) {
    text-align: center;
  }
}

/* Desktop */
@media print, screen and (width >= 768px) {
  .form .form-text br.sp {
    display: none;
  }
}

/* =====================
  h1
===================== */
.form h1 {
  margin-block-end: 16px;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

@media not all and (width >= 768px) {
  .form h1 {
    font-size: calc((100 / 750) * 40 * 1vw);
  }
}

/* =====================
  Index
===================== */
[data-id='index'] .form-text {
  margin-block-start: 155px;
  text-align: center;
}

[data-id='confirm'] .form-text {
  margin-block-start: 162px;
  text-align: center;
}

[data-id='complete'] .form-text {
  margin-block-start: 52px;
  text-align: center;
}

@media not all and (width >= 768px) {
  [data-id='index'] .form-text {
    margin-block-start: calc((100 / 750) * 63.1 * 1vw);
    text-align: left;
  }
}

/* =====================
  step
===================== */
.step {
  position: relative;
  inline-size: 288px;
  block-size: 59px;
  margin-block: 101px 117px;
  margin-inline: auto;
  font-weight: bold;
  color: var(--_inactive-color);
  pointer-events: none;
  user-select: none;
}

@media not all and (width >= 768px) {
  .step {
    inline-size: calc((100 / 750) * 427 * 1vw);
    block-size: calc((100 / 750) * 87 * 1vw);
    margin-block: calc((100 / 750) * 64 * 1vw) calc((100 / 750) * 88 * 1vw);
  }
}

/* 線 */
.step::before {
  position: absolute;
  top: 24px;
  left: 50%;
  display: block;
  align-self: start;
  inline-size: 90%;
  block-size: 1px;
  content: '';
  background: currentcolor;
  translate: -50% 0;
}

@media not all and (width >= 768px) {
  .step::before {
    top: 2.4vw;
    inline-size: 80%;
  }
}

/* 点 */
.step span {
  position: absolute;
  bottom: -1px;
  display: block;
  font-size: 14px;
  line-height: 1;
}

@media not all and (width >= 768px) {
  .step span {
    bottom: 2vw;
    font-size: calc((100 / 750) * 26 * 1vw);
  }
}

/* 円 */
.step span::before {
  position: absolute;
  top: -27px;
  left: 8px;
  display: block;
  inline-size: 11px;
  aspect-ratio: 1 / 1;
  content: '';
  background: currentcolor;
  border-radius: calc(infinity * 1px);
}

@media not all and (width >= 768px) {
  .step span::before {
    top: -4.9vw;
    inline-size: calc((100 / 750) * 18 * 1vw);
  }
}

/* 入力 */
.step span:nth-child(1) {
  left: 0;
}

.step span:nth-child(1)::after {
  content: '入力';
  translate: 0 -20vw;
}

@media not all and (width >= 768px) {
  .step span:nth-child(1) {
    left: 1.5vw;
  }
}

.step span:nth-child(1)::before {
  left: 50%;
  transform: translateX(-50%);
}

/* 確認 */
.step span:nth-child(2) {
  left: 50%;
  translate: -50% 0;
}

.step span:nth-child(2)::after {
  content: '確認';
}

/* 完了 */
.step span:nth-child(3) {
  right: 0;
}

.step span:nth-child(3)::after {
  content: '完了';
}

@media not all and (width >= 768px) {
  .step span:nth-child(3) {
    right: 1.5vw;
  }
}

.step span:nth-child(3)::before {
  right: 0;
}

/* アクティブ */
.form[data-id='index'] .step span:nth-child(1) {
  color: var(--_active-color);
}

.form[data-id='index'] .step span:nth-child(1)::before {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--_active-color) 20%, transparent 100%);

  @media not all and (width >=768px) {
    box-shadow: 0 0 0 1.4vw color-mix(in srgb, var(--_active-color) 20%, transparent 100%);
  }
}

.form[data-id='confirm'] .step span:nth-child(2) {
  color: var(--_active-color);
}

.form[data-id='confirm'] .step span:nth-child(2)::before {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--_active-color) 20%, transparent 100%);

  @media not all and (width >=768px) {
    box-shadow: 0 0 0 1.4vw color-mix(in srgb, var(--_active-color) 20%, transparent 100%);
  }
}

.form[data-id='complete'] .step span:nth-child(3) {
  color: var(--_active-color);
}

.form[data-id='complete'] .step span:nth-child(3)::before {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--_active-color) 20%, transparent 100%);

  @media not all and (width >=768px) {
    box-shadow: 0 0 0 1.4vw color-mix(in srgb, var(--_active-color) 20%, transparent 100%);
  }
}

/* =====================
  パーツ
===================== */

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select) {
  position: relative;
  inline-size: 100%;
  padding-block: 1.25em;
  padding-inline: 1em;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  background-color: var(--_input-bg-color);
  border: none;
  border-radius: 2px;
}

@media not all and (width >= 768px) {
  /* prettier-ignore */
  .form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select) {
    padding-block: calc((100 / 750) * 27 * 1vw);
    font-size: calc((100 / 750) * 28 * 1vw);
  }

  .form :where(select) {
    padding-block: calc((100 / 750) * 27 * 1vw);
    padding-right: 7vw;
    font-size: clamp(16px, calc((100 / 750) * 28 * 1vw), calc((100 / 750) * 28 * 1vw));
    color: inherit;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2023.6%2013.5%22%3E%20%3Cpath%20d%3D%22M11.8%209.4%2020.7.5c.7-.7%201.7-.7%202.4%200s.7%201.7%200%202.4L13%2013c-.6.6-1.7.7-2.3%200L.5%202.9C-.2%202.2-.2%201.2.5.5s1.7-.7%202.4%200z%22%20style%3D%22fill%3A%20currentColor%3B%22%20%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: 97% center;
    background-size: 2.3vw 1.3vw;
  }
}

/* テキストエリア */
.form textarea {
  min-block-size: 256px;
  max-block-size: 50vh;

  @media print, screen and (width >=768px) {
    &[data-row='1'] {
      --_block-size: 2.7lh;
    }

    &[data-row='2'] {
      --_block-size: 4lh;
    }
  }

  @media not all and (width >=768px) {
    &[data-row='1'] {
      --_block-size: calc((100 / 750) * 247 * 1vw);
    }

    &[data-row='2'] {
      --_block-size: calc((100 / 750) * 252 * 1vw);
    }
  }

  &[data-row] {
    min-block-size: var(--_block-size);
    max-block-size: var(--_block-size);
    resize: none;
  }
}

@supports (field-sizing: content) {
  .form textarea {
    field-sizing: content;
  }
}

@media not all and (width >= 768px) {
  .form textarea {
    min-block-size: calc((100 / 750) * 377 * 1vw);
  }
}

/* セレクトボックス */
.form select {
  inline-size: fit-content;
  min-width: 280px;
}

@media not all and (width >= 768px) {
  .form select {
    min-width: calc((100 / 750) * 462 * 1vw);
  }
}

/* =====================
  error
===================== */

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid {
  outline: 1px solid var(--_red);
}

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid + .error {
  position: absolute;
  top: 50%;
  right: 2em;
  display: block !important;
  translate: 0 -50%;
}

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']),textarea, select):focus {
  outline-color: var(--_gray);
}

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid + .error::before {
  content: attr(data-text);
}

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid:is([name='address']) + .error {
  top: 77%;
}

/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid:is(textarea) + .error {
  top: 13%;
}

/* prettier-ignore */
@media not all and (width >= 768px) {
  .form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid:is(textarea) + .error {
    top: 86%;
  }
}

/* ==== パーツ下部エラー ==== */
.form .error:empty {
  display: none;
}

.form .error {
  position: relative;
  display: block;
  inline-size: fit-content;
  padding-block: 5px;
  padding-inline: 11px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--_red);
  word-break: break-all;
  background: color-mix(in srgb, currentcolor 10%, transparent 100%);
  border: 1px solid currentcolor;
  border-radius: 2px;
}

@media not all and (width >= 768px) {
  .form .error {
    padding-block: calc((100 / 750) * 11 * 1vw);
    padding-inline: calc((100 / 750) * 13 * 1vw);
    font-size: calc((100 / 750) * 18 * 1vw);
  }
}

/* ==== table ==== */
.form .table {
  display: grid;
  grid-template-rows: 1fr;
  gap: 47px;
}

@media not all and (width >= 768px) {
  .form .table {
    gap: calc((100 / 750) * 56 * 1vw);
  }
}

/* ==== table row ==== */
.form .table .tr {
  display: grid;
  grid-template-rows: 1fr;
  gap: 20px;
  padding-block-end: 40px;
  border-bottom: 1px solid var(--_table-bd-color);
}

@media not all and (width >= 768px) {
  .form .table .tr {
    gap: calc((100 / 750) * 29 * 1vw);
    padding-block-end: calc((100 / 750) * 58.3 * 1vw);
  }
}

.form .table .tr:last-child {
  border-bottom: 1px solid transparent;
}

/* ==== dt ==== */
.form .table dt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px;
  align-items: center;
  margin-block: calc((1em - 1lh) / 2);
  font-weight: bold;
}

@media not all and (width >= 768px) {
  .form .table dt {
    gap: 2vw;
    font-size: calc((100 / 750) * 28 * 1vw);
  }
}

.form .table .tr:has(:where(input, textarea, select)) dt::before {
  display: grid;
  place-content: center;
  padding-block: 4px;
  padding-inline: 6px;
  font-size: 13px;
  line-height: 1;
  color: var(--_gray);
  content: '任意';
  border: 1px solid currentcolor;
}

@media not all and (width >= 768px) {
  .form .table .tr:has(:where(input, textarea, select)) dt::before {
    padding-block: calc((100 / 750) * 6 * 1vw);
    padding-inline: calc((100 / 750) * 6.3 * 1vw);
    font-size: calc((100 / 750) * 22 * 1vw);
  }
}

.form .table .tr:has([required], [data-required]) dt::before {
  color: var(--_red);
  content: '必須';
  border-color: currentcolor;
}

/* ==== dd ==== */
.form .table dd {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  gap: 16px;
  line-height: 2;
  word-break: break-all;
}

@media not all and (width >= 768px) {
  .form .table dd {
    gap: calc((100 / 750) * 24 * 1vw);
  }
}

/* ==== 郵便番号、生年月日 ==== */
.form .table dd .text {
  display: grid;
  grid-template-columns: auto 280px 1fr;
  gap: 16px;
  align-items: center;
  font-size: 14px;
}

@media not all and (width >= 768px) {
  .form .table dd .text {
    grid-template-columns: auto calc((100 / 750) * 300 * 1vw) 1fr;
    gap: calc((100 / 750) * 16 * 1vw);
    font-size: calc((100 / 750) * 22 * 1vw);
  }
}

.form .table dd .text:has([name='postalcode']) > span:first-child {
  padding-inline-start: 1em;
  font-weight: bold;
}

.form .table dd .text:has([name='birth']) {
  grid-template-columns: auto 1fr;
}

@media not all and (width >= 768px) {
  .form .table dd .text:has([name='birth']) {
    grid-template-columns: auto;
  }
}

/* 縦並び */
.form .table dd .text[data-type='row'] {
  grid-template-columns: 1fr;
}

/* ==== confirm ==== */
@media print, screen and (width >= 768px) {
  .form[data-id='confirm'] .table {
    grid-template-columns: minmax(auto, 200px) 1fr;
  }

  .form[data-id='confirm'] .table .tr {
    grid-template-rows: auto;
    grid-template-columns: subgrid;
    grid-column: span 2;
    align-items: flex-start;
  }

  .form[data-id='confirm'] .table .tr:last-child {
    border-bottom: 1px solid var(--_table-bd-color);
  }

  .form[data-id='confirm'] .table .tr dt {
    margin-block-start: unset;
  }
}

/* =====================
  プライバシーポリシーチェック
===================== */
.form label[for='agree'] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  inline-size: fit-content;
  margin-block-start: 41px;
  margin-inline: auto;
  font-weight: 700;
  cursor: pointer;
}

@media not all and (width >= 768px) {
  .form label[for='agree'] {
    margin-block-start: calc((100 / 750) * 76 * 1vw);
    font-size: calc((100 / 750) * 28 * 1vw);
  }
}

.form label[for='agree'] input[type='checkbox'] {
  inline-size: 24px;
  aspect-ratio: 1 / 1;
  margin: unset;
  cursor: pointer;
}

@media not all and (width >= 768px) {
  .form label[for='agree'] input[type='checkbox'] {
    inline-size: calc((100 / 750) * 50 * 1vw);
    block-size: calc((100 / 750) * 50 * 1vw);
    appearance: none;
    border: 1px solid var(--_gray);
  }

  .form label[for='agree'] input[type='checkbox']:checked {
    appearance: auto;
  }
}

.form label[for='agree'] a {
  font-weight: bold;
  color: var(--_main-color);
  text-decoration: underline;

  @media (any-hover: hover) {
    &:hover {
      opacity: 0.5;
    }
  }
}

/* =====================
  submit
===================== */
.form .submit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 46px;
  inline-size: 304px;
  margin-block-start: 49px;
  margin-inline: auto;
}

@media not all and (width >= 768px) {
  .form .submit {
    gap: calc((100 / 750) * 56 * 1vw);
    inline-size: calc((100 / 750) * 350 * 1vw);
    margin-block-start: calc((100 / 750) * 53 * 1vw);
  }
}

.form .submit button {
  grid-template-columns: auto auto;
  margin-inline: auto;
  appearance: none;
  cursor: pointer;

  @media not all and (width >=768px) {
    grid-template-columns: auto auto;
    inline-size: 100%;
  }
}

.form .submit button:is([form='post'], [form='submit']) {
  appearance: none;
  border-block-end-color: var(--black);
}

.form .submit button:is([form='post'], [form='submit']):where([disabled]) {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
}

@media not all and (width >= 768px) {
  .form .submit button:is([form='post'], [form='submit']) {
    appearance: none;
  }
}

.form .submit button[form='back'] {
  font-size: inherit;
  font-weight: 500;
  text-align: center;
  text-decoration: underline;
  appearance: none;
  transition: color 250ms ease 0s;
  will-change: color;

  @media not all and (width >=768px) {
    font-size: calc((100 / 750) * 26 * 1vw);
  }

  @media (any-hover: hover) {
    &:hover {
      color: color-mix(in srgb, var(--_gray) 80%, transparent 100%);
    }
  }
}

/* =====================
  form-anchor
===================== */
.form-anchor {
  inline-size: 366px;
  margin-block-start: 72px;
  margin-inline: auto;

  & a {
    margin-inline: auto;
  }

  @media not all and (width >=768px) {
    inline-size: calc((100 / 750) * 488 * 1vw);
    margin-block-start: calc((100 / 750) * 80 * 1vw);
  }
}

@media not all and (width >= 768px) {
  .form-anchor {
    margin-block-start: calc((100 / 750) * 72 * 1vw);
  }
}

/* =====================
  resume
===================== */
.form .resume .file {
  position: relative;
  display: grid;
  grid-template-columns: 246px 1fr 24px;
  gap: 16px;
  align-items: center;
  margin-block-end: 13px;
}

.form .resume .file input[type='file'] {
  display: none;
  appearance: none;
}

/* ファイル選択ボタン */
.form .resume .file span:first-of-type {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  justify-content: center;
  inline-size: fit-content;
  min-width: 246px;
  padding-block: 24px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: var(--primary);
  text-align: center;
  cursor: pointer;
  background: var(--_input-bg-color);
  border-radius: calc(infinity * 1px);
  transition: background 250ms ease 0s;
  will-change: background;

  @media (any-hover: hover) {
    &:hover {
      background: color-mix(in srgb, currentcolor 70%, transparent 100%);
    }
  }
}

@media not all and (width >= 768px) {
  .form .resume .file span:first-of-type {
    gap: calc((100 / 750) * 13 * 1vw);
    inline-size: calc((100 / 750) * 390 * 1vw);
    min-width: calc((100 / 750) * 390 * 1vw);
    padding-block: calc((100 / 750) * 40 * 1vw);
    margin-block-start: calc((100 / 750) * 17 * 1vw);
    font-size: calc((100 / 750) * 26 * 1vw);
  }
}

.form .resume .file span:first-of-type::before {
  inline-size: 14px;
  aspect-ratio: 1 / 1;
  content: '';
  background-color: currentcolor;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" inline-size="14" block-size="14" viewBox="0 0 14 14" fill="none"><path d="M6 8H0V6H6V0H8V6H14V8H8V14H6V8Z" fill="currentColor"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  @media not all and (width >= 768px) {
    inline-size: calc((100 / 750) * 22 * 1vw);
  }
}

/* ファイル名 */
.form .resume .file .resume-title {
  inline-size: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

@media not all and (width >= 768px) {
  .form .resume .file .resume-title {
    inline-size: calc((100 / 750) * 327 * 1vw);
  }
}

/* ファイル削除ボタン */
.form .resume .file .resume-cancel {
  z-index: 2;
  display: grid;
  place-content: center;
  inline-size: 24px;
  block-size: 24px;
  margin-inline: auto 0;
  color: var(--blue);
  cursor: pointer;
  outline: none;
  background: var(--_input-bg-color);
  border: none;
  border-radius: calc(infinity * 1px);
  transition: all 250ms ease 0s;

  @media (any-hover: hover) {
    &:hover {
      background: color-mix(in srgb, currentcolor 70%, transparent 100%);
    }
  }
}

.form .resume .file .resume-cancel[hidden] {
  display: none;
}

.form .resume .file .resume-cancel::after {
  inline-size: 11px;
  aspect-ratio: 1 / 1;
  content: '';
  background-color: var(--_gray);
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" inline-size="10" block-size="10" viewBox="0 0 10 10" fill="none"><path d="M5.00002 6.13568L1.59299 9.5427L0.457319 8.40703L3.86434 5L0.457319 1.59297L1.59299 0.457299L5.00002 3.86432L8.40705 0.457299L9.54272 1.59297L6.1357 5L9.54272 8.40703L8.40705 9.5427L5.00002 6.13568Z" fill="currentColor"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* モバイルはgirdシステムで表示 */
@media not all and (width >= 768px) {
  .form .resume .file {
    grid-template: auto 1fr / auto auto;
    grid-template-areas:
      'select select'
      'title button';
    gap: calc((100 / 750) * 28 * 1vw);
    margin-block-end: calc((100 / 750) * 18 * 1vw);
  }

  .form .resume .file span:first-of-type {
    grid-area: select;

    .form .resume .file {
      grid-template:
        'select select'
        'title button' / auto auto;
      gap: calc((100 / 750) * 28 * 1vw);
      margin-block-end: calc((100 / 750) * 18 * 1vw);
    }
  }

  .form .resume .file .resume-title {
    grid-area: title;
  }

  .form .resume .file button {
    grid-area: button;
  }
}

/* 注釈 */
.form .resume p {
  padding-inline-start: 1em;
  font-size: 14px;
  text-indent: -1em;
}

@media not all and (width >= 768px) {
  .form .resume p {
    font-size: calc((100 / 750) * 22 * 1vw);
  }
}

.form .resume p::before {
  content: '※';
}

/* =====================
  チェックボックス
===================== */
.form .checkbox {
  display: grid;
  grid-auto-flow: column;
  gap: 23px;
  justify-content: flex-start;
}

@media not all and (width >= 768px) {
  .form .checkbox {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-flow: row;
    gap: calc((100 / 750) * 10 * 1vw);
  }
}

.form .checkbox label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}

@media not all and (width >= 768px) {
  .form .checkbox label {
    font-size: calc((100 / 750) * 28 * 1vw);
  }
}

.form .checkbox input:is([type='checkbox'], [type='radio']) {
  inline-size: 16px;
  aspect-ratio: 1 / 1;
  margin: unset;
  cursor: pointer;
}

@media not all and (width >= 768px) {
  .form .checkbox input:is([type='checkbox'], [type='radio']) {
    inline-size: calc((100 / 750) * 24 * 1vw);
    block-size: calc((100 / 750) * 24 * 1vw);
    appearance: none;
    border: 1px solid var(--_gray);
  }

  .form .checkbox input[type='checkbox']:checked {
    appearance: auto;
  }
}

/* =====================
  UIlock
===================== */
.ui-lock {
  position: relative;
  pointer-events: none;
  user-select: none;
  opacity: 0.8;
}

.ui-lock * {
  pointer-events: none;
  user-select: none;
}

.ui-lock::after {
  position: absolute;
  inset: 0;
  z-index: calc(infinity * 1px);
  display: block;
  inline-size: 100%;
  block-size: 100%;
  content: '';
  background: #ffffff05;
}