/* 9rem→--space-5xl(9.6rem), 6rem→--space-4xl(8rem)が近いのでそれを利用 */
.c-heading__area {
  margin-top: var(--space-5xl);
  margin-bottom: var(--space-2xl);
  @media (max-width: 768px) {
    margin-top: var(--space-4xl);
  }
  * {
    transition: all 0.3s ease;
  }
  position: relative;
}
.c-heading__image {
  width: 100%;
  height: 30rem; /* 変数未定義。必要なら--heading-image-height: 30rem; を追加 */
  overflow: hidden;
  position: relative;
  @media (max-width: 768px) {
    height: 18rem;
  }
  img {
    position: absolute;
    width: 100%;
    /* 上下左右中央寄せ */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    @media (max-width: 768px) {
      /* スマホは横幅基準で100% */
      width: auto;
      height: 100%;
    }
  }
}

.c-heading__filter {
}

.c-heading__content {
  padding-top: var(--space-4xl); /* 10rem→8rem(4xl)で近似 */
}
.c-heading__copy {
  font-size: var(--font-3xl);
  color: var(--color-primary, #c00000);
  text-align: center;
  font-family: "Josefin Sans";
  letter-spacing: var(--letter-spacing-widest, 0.2em);
  font-weight: var(--font-weight-medium, 500);
  position: relative;
  &:after {
    content: "";
    width: var(--heading-copy-underline-width, 6.9rem); /* 69.296px→6.9rem */
    height: var(--heading-copy-underline-height, 0.2rem); /* 2px→0.2rem */
    background: url(https://bijinrakan.jp/wp-content/themes/bijin-theme/assets/images/back/line-01.png)
      lightgray 50% / cover no-repeat;
    position: absolute;
    bottom: calc(
      var(--space-base, 1.6rem) * -1
    ); /* -1.6rem→-var(--space-base) */
    left: 50%;
    transform: translateX(-50%);
  }
  &.is-style-left {
    text-align: left;
    &:after {
      left: 0;
      transform: translateX(0);
    }
  }
}
.c-heading__text {
  max-width: var(--content-width, 80rem); /* 800px→80rem */
  margin: 0 auto;
}
.c-heading__title {
  margin-top: var(--space-md);
  text-align: center;
  font-size: var(--font-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-md);
}
.c-heading__page-title {
  font-size: var(--font-lg);
  font-weight: 400;
  margin: var(--space-md) 0;
}
.c-heading__type {
  font-size: var(--font-sm);
}

.c-heading__description {
  font-size: var(--font-sm);
  font-family: var(--font-family-sans);
}
.c-heading-category__list {
  margin-bottom: var(--space-md);
  .c-heading-category__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .c-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);
  }
}

/* Added: lead text under heading copy for top media-text component */
.c-heading__lead {
  font-size: var(--font-xl, 2.4rem); /* 24px→2.4rem */
  line-height: var(--line-height-loose, 1.9);
  letter-spacing: var(--letter-spacing-wide, 0.08em);
  font-weight: var(--font-weight-semibold, 600);
  font-family: var(--font-family-serif, "Noto Serif JP");
}
@media (max-width: 767px) {
  .c-heading__lead {
    font-size: var(--font-xs, 1.2rem); /* 12px */
    margin: var(--space-md, 2.4rem) 0 var(--space-lg, 3.2rem);
  }
}