/* 採用背景：仏壇を右、見出しを左に配置。/knowledge 専用。 */
.page-head.knowledge-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(22.5rem, 33.333vw, 40rem);
  padding: 3rem 0;
  background: #f1ebdf;
  border-bottom-color: #e1d6c4;
}
.knowledge-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("knowledge-hero-butsudan-20260913.png") center / cover no-repeat;
}
.knowledge-hero .knowledge-hero-copy {
  max-width: 58%;
}
.knowledge-hero .eyebrow.dark {
  margin-bottom: 1.1rem;
  color: #756044 !important;
  font-size: .875rem !important;
  letter-spacing: .12em !important;
}
.knowledge-hero h1 {
  max-width: none;
  color: #493a2d;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.6;
  letter-spacing: .025em;
}
.knowledge-hero h1 span {
  display: block;
}
.knowledge-hero p {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  color: #5b4e40;
  font-size: 1rem;
  line-height: 1.95;
}
@media (max-width: 680px) {
  .page-head.knowledge-hero {
    --knowledge-image-height: clamp(12.2rem, 54vw, 15.6rem);
    min-height: 0;
    padding: 1.8rem 0 calc(var(--knowledge-image-height) + .5rem);
    background-color: #f1ebdf;
  }
  .knowledge-hero::before {
    inset: auto 0 0;
    height: var(--knowledge-image-height);
    background-size: auto 100%;
    background-position: right bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%);
    mask-image: linear-gradient(to bottom, transparent, #000 18%);
  }
  .knowledge-hero .knowledge-hero-copy {
    max-width: 100%;
  }
  .knowledge-hero .eyebrow.dark {
    margin-bottom: .8rem;
  }
  .knowledge-hero h1 {
    font-size: clamp(1.45rem, 6.7vw, 1.875rem);
    line-height: 1.6;
    letter-spacing: .015em;
  }
  .knowledge-hero p {
    max-width: 36rem;
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.9;
  }
}
@media print {
  .page-head.knowledge-hero { min-height: 0; padding: 1.5rem 0; }
  .knowledge-hero::before { display: none; }
  .knowledge-hero .knowledge-hero-copy { max-width: 100%; }
}
