@layer components {
  :where(.c-card-001) {
    counter-reset: c-101__counter;
  }

  :where(.c-card-001) * {
    min-width: 0 !important;
  }

  :where(.c-card-001.wp-block-columns) {
    display: grid;
    gap: var(--wp--preset--spacing--xs);
    grid-template-columns: repeat(
      auto-fit,
      minmax(var(--wp--preset--spacing--9-xl), 1fr)
    );
  }

  @media (max-width: 781px) {
    :where(.c-card-001.wp-block-columns) {
      gap: var(--wp--preset--spacing--xl);
    }
  }

  :where(.c-card-001) .wp-block-column {
    padding: var(--wp--preset--spacing--base);
    border-radius: var(--wp--custom--border--radius--md);
    background: var(--wp--preset--color--gray-lightest);
    position: relative;
    display: grid;
    gap: var(--wp--preset--spacing--base);
    grid-template-rows: subgrid;
    grid-row: span 4;
  }

  :where(.c-card-001__cat) {
    counter-increment: c-101__counter;
    background: var(--gradient-01);
    color: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xl);
    line-height: 1;
    position: absolute;
    border-radius: var(--wp--custom--border--radius--full);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--bold);
    left: 10px;
    top: -13px;
  }

  :where(.c-card-001__cat)::after {
    position: absolute;
    left: calc(100% - 10px);
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border--radius--full);
    border: var(--wp--custom--border--width--1) solid
      var(--wp--preset--color--info);
    display: grid;
    place-items: center;
    color: var(--wp--preset--color--info);
    font-size: 13px;
    content: counter(c-101__counter);
  }

  :where(.c-card-001__en) {
    /* 縦書き英語装飾 */
    writing-mode: vertical-rl;
    position: absolute;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--bold);
    letter-spacing: var(--wp--custom--letter-spacing--xl);
    color: var(--wp--preset--color--gray-light);
    right: var(--wp--preset--spacing--base);
    top: var(--wp--preset--spacing--base);
    margin: 0;
  }

  :where(.c-card-001__title) {
    font-size: var(--wp--preset--font-size--lg);
    font-weight: var(--wp--custom--font-weight--bold);
    margin-bottom: var(--wp--preset--spacing--xs);
  }

  :where(.c-card-001__text) {
    margin: 0;
  }

  :where(.c-card-001) .wp-block-image {
    margin: 0;
  }

  :where(.c-card-001) .wp-block-image img {
    margin: 0;
    border-radius: var(--wp--custom--border--radius--md);
  }

  :where(.c-card-001) .wp-block-buttons {
    margin-top: 0;
  }

  :where(.c-card-001) .wp-block-button {
    width: 100%;
  }
}