@layer components {
  .no-staff {
    position: relative;
    isolation: isolate;
    block-size: 205.25cqi;
    background-color: oklch(0.94 0 0);
    color: var(--color-text-primary);
    font-family: var(--font-hero);
  }

  .no-staff::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    block-size: 202.25cqi;
    background-color: oklch(1 0 0 / 0.11);
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .no-staff__bg {
    position: absolute;
    z-index: -2;
    inset-block-start: 0;
    inset-inline-start: -18.5cqi;
    inline-size: 136.75cqi;
    block-size: 205.25cqi;
    max-inline-size: none;
    object-fit: cover;
  }

  .no-staff__syatyo {
    position: absolute;
    inset-block-start: -10cqi;
    inset-inline-start: 70cqi;
    inline-size: 30cqi;
    block-size: 40.4cqi;
    max-inline-size: none;
    transform: rotate(0deg);
  }

  .no-staff__title {
    position: absolute;
    inset-block-start: 12cqi;
    inset-inline-start: 50%;
    inline-size: 63.625cqi;
    block-size: 20.375cqi;
    transform: translateX(-50%);
  }

  .no-staff__title-image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: contain;
  }

  .no-staff__ribbon {
    position: absolute;
    inset-block-start: 38.5cqi;
    inset-inline-start: 10.5cqi;
    inline-size: 78.75cqi;
    block-size: 8cqi;
  }

  .no-staff__ribbon-image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: contain;
  }

  .no-staff__text {
    position: absolute;
    inset-inline-start: 10cqi;
    inline-size: 80cqi;
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.2cqi;
    text-align: center;
  }

  .no-staff__text span {
    display: block;
  }

  .no-staff__text strong {
    color: var(--color-instagram-dark);
    font-weight: 900;
  }

  .no-staff__text--first {
    inset-block-start: 52.5cqi;
  }

  .no-staff__text--second {
    inset-block-start: 71cqi;
  }

  .no-staff__text--third {
    inset-block-start: 89.5cqi;
    inset-inline-start: 10cqi;
    inline-size: 80cqi;
  }

  .no-staff__text--third span:first-child {
    transform: translateX(2cqi);
  }

  .no-staff__phone {
    position: absolute;
    z-index: 3;
    inset-block-start: 88.5cqi;
    inset-inline-start: 0.5cqi;
    inline-size: 26cqi;
    block-size: 33cqi;
    max-inline-size: none;
    object-fit: cover;
    object-position: 46% 0;
    transform: rotate(8deg);
    filter:
      drop-shadow(0 1cqi 8.5cqi oklch(0 0 0 / 0.03))
      drop-shadow(-1cqi 0.75cqi 1cqi oklch(0 0 0 / 0.11));
  }

  .no-staff__cta {
    position: absolute;
    z-index: 2;
    inset-block-start: 110cqi;
    inset-inline-start: 3.75cqi;
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: 92.5cqi;
    min-block-size: 76.75cqi;
    padding: 8cqi 2.25cqi 9cqi;
    border-radius: 7.5cqi;
    overflow: hidden;
    background-color: transparent;
    background-image: url("../../assets/images/cta/cta-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 8px 24px oklch(0 0 0 / 0.24);
  }

  .no-staff__cta-heading {
    inline-size: 88cqi;
    margin-block-end: 1cqi;
    color: var(--color-instagram-dark);
    font-size: 5cqi;
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: 0;
    text-align: center;
    text-shadow:
      0 -0.5cqi 0 oklch(1 0 0),
      0.5cqi -0.5cqi 0 oklch(1 0 0),
      0.5cqi 0 0 oklch(1 0 0),
      0.5cqi 0.5cqi 0 oklch(1 0 0),
      0 0.5cqi 0 oklch(1 0 0),
      -0.5cqi 0.5cqi 0 oklch(1 0 0),
      -0.5cqi 0 0 oklch(1 0 0),
      -0.5cqi -0.5cqi 0 oklch(1 0 0);
  }

  .no-staff__cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
    inline-size: 88cqi;
    margin-block-end: 4cqi;
  }

  .no-staff__cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 20cqi;
    border-radius: 2.5cqi;
    font-family: var(--font-hero);
    text-align: center;
    text-decoration: none;
  }

  .no-staff__cta-btn--web {
    background-image: linear-gradient(101deg, oklch(0.69 0.17 45), var(--color-warm));
    box-shadow: inset 0 -4px 0 0 var(--color-warm-dark);
    color: var(--color-highlight);
    font-size: 5.5cqi;
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: 0;
  }

  .no-staff__cta-btn--tel {
    flex-direction: column;
    gap: 0.5cqi;
    border: 2px solid oklch(1 0 0);
    background-color: oklch(1 0 0);
    box-shadow: inset 0 -4px 0 0 oklch(0.8 0.01 260);
    color: var(--color-instagram);
  }

  .no-staff__cta-btn-label {
    font-size: 3.75cqi;
    font-weight: 700;
    line-height: 1.35;
  }

  .no-staff__cta-btn-number {
    font-size: 5cqi;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .no-staff__cta-hours {
    inline-size: 88cqi;
    color: oklch(1 0 0);
    font-size: 3.5cqi;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
  }
}