.heading__area {
  * {
    transition: all 0.3s ease;
  }
  position: relative;
  margin-bottom: var(--space-3xl);
  .heading__image {
    width: 100%;
    height: 40rem;
    overflow: hidden;
    position: relative;
    @media (max-width: 768px) {
      height: 60rem;
    }
    img {
      position: absolute;
      width: 192rem;
      /* 上下左右中央寄せ */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: none;
      @media (max-width: 1200px) {
        width: 140rem;
        transform: translate(-50%, -40%);
      }
      @media (max-width: 768px) {
        width: 100rem;
        transform: translate(-50%, -40%);
      }
    }
    .heading__area--single & {
      height: 30rem;
    }
    .heading__area--column & {
      img {
        transform: translate(-50%, -40%);
        @media (max-width: 1200px) {
          width: 140rem;
          transform: translate(-50%, -50%);
        }
        @media (max-width: 768px) {
          width: 100rem;
          transform: translate(-50%, -50%);
        }
      }
    }
  }

  .heading__filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    z-index: 1;
  }

  .heading__content {
    position: relative;
    z-index: 2;
    bottom: -4rem;
    padding: var(--space-md);
    text-align: left;
    background: var(--color-background);
    position: absolute;
    border-radius: var(--radius-lg);
    max-width: 60rem;
    left: 6rem;
    .heading__area--single & {
      left: 0;
      right: 0;
      margin: 0 auto;
    }
    @media (max-width: 768px) {
      width: calc(100% - 6rem);
      left: 3rem;
    }
  }
  .heading__copy {
    font-family: var(--font-family-english);
    color: rgba(0, 0, 0, 0.3);
    font-size: var(--font-6xl);
    top: calc(-1 * var(--space-md));
    right: var(--space-md);
    margin-bottom: var(--space-md);
    position: absolute;
    line-height: 1;
  }
  .heading__text {
    max-width: 800px;
    margin: 0 auto;
  }
  .heading__title {
    font-family: var(--font-family-serif);
    font-size: var(--font-3xl);
    font-weight: 400;
    margin-bottom: var(--space-md);
  }
  .heading__page-title {
    font-family: var(--font-family-serif);
    font-size: var(--font-lg);
    font-weight: 400;
    margin: var(--space-md) 0;
  }
  .heading__type {
    font-size: var(--font-sm);
  }

  .heading__description {
    font-size: var(--font-sm);
    font-family: var(--font-family-sans);
  }
  .heading-category__list {
    margin-bottom: var(--space-md);
    .heading-category__items {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .heading-category__item {
      font-size: var(--font-xs);
      background: var(--color-primary-100);
      color: var(--color-primary-700);
      padding: var(--space-xxs) var(--space-xs);
      border-radius: var(--radius-sm);
      font-weight: var(--font-weight-medium);
      border: 1px solid var(--color-primary-200);
    }
  }
}