@layer components {
  .point {
    background-color: oklch(0.5 0.2 265);
    padding-block: 14cqi;
  }

  /* Card */
  .point__card {
    padding-inline: 6cqi;
    margin-block-end: 10cqi;
  }

  .point__card-header {
    background-color: var(--color-accent-light);
    border-start-start-radius: 2.5cqi;
    border-start-end-radius: 2.5cqi;
    padding-block: 2.5cqi 2cqi;
    padding-inline: 3cqi;
    text-align: center;
  }

  .point__card-header-sub {
    font-family: var(--font-hero);
    font-size: 4.5cqi;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-accent);
  }

  .point__card-header-main {
    font-family: var(--font-hero);
    font-size: 7cqi;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-accent);
  }

  .point__card-body {
    background-color: oklch(1 0 0);
    border: 4px solid var(--color-accent-light);
    border-block-start: none;
    border-end-start-radius: 2.5cqi;
    border-end-end-radius: 2.5cqi;
    padding: 4cqi;
  }

  .point__card-texts {
    display: flex;
    flex-direction: column;
    gap: 3cqi;
  }

  .point__card-text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.6;
    color: oklch(0 0 0);
    max-inline-size: none;
    text-wrap: wrap;
  }

  .point__card-text .point__em {
    font-weight: 800;
    color: oklch(0.55 0.22 25);
  }

  .point__card-bottom {
    display: flex;
    align-items: center;
    gap: 3cqi;
  }

  .point__card-bottom .point__card-text {
    flex: 1;
    min-width: 0;
  }

  .point__card-surprise {
    inline-size: 16cqi;
    block-size: auto;
    flex-shrink: 0;
  }

  /* Appeal */
  .point__appeal {
    position: relative;
    padding-inline: 6cqi;
    padding-block-start: 10cqi;
  }

  .point__appeal-tsumari {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 4cqi;
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    gap: 0.5cqi;
    font-family: var(--font-hero);
    font-size: 4.5cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(1 0 0);
    rotate: -8deg;
  }

  .point__appeal-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqi;
    margin-block-end: 6cqi;
    text-align: center;
  }

  .point__appeal-line {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    padding-block: 1cqi;
    padding-inline: 2cqi;
    font-family: var(--font-hero);
    font-size: 6.5cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(1 0 0);
  }

  .point__appeal-line--accent {
    color: var(--color-accent-light);
  }

  .point__appeal-img {
    display: block;
    inline-size: 92cqi;
    block-size: auto;
    margin-inline: auto;
    border-radius: 2.5cqi;
  }
}