/* p-page-header — 下層ページヘッダー（Figma 3191:33385 full / 3191:33459 simple） */

.p-page-header {
  padding-block: var(--space-120);
  background: var(--color-bg-beige); /* #FFF + rgba(168,153,144,0.1) */
}

.p-page-header__inner {
  display: flex;
  gap: var(--space-72);
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-40);
}

/* --- タイトル側 --- */
.p-page-header__title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  color: var(--color-text);
}

.p-page-header__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-display); /* 1.15 */
}

.p-page-header__heading-ja {
  font-size: var(--font-size-h2); /* 32px */
}

.p-page-header__heading-en {
  font-size: var(--font-size-large); /* 64px */
}

/* 上段大きめ（Figma カフェ 3191:24175「Cafe」） */
.p-page-header__heading-ja--lg {
  font-size: var(--font-size-h1); /* 42.667px */
}

/* 白背景版（Figma アート工房 3191:24330） */
.p-page-header--white {
  background: var(--color-white);
}

/* ダーク版（Figma カフェ 3191:24175） */
.p-page-header--dark {
  background: var(--color-primary);
}

/* セクション自体を白文字にする（仕切り線の currentColor もこれを継承する）。
   __title / __lead-text は既定色を明示していたが、継承させたいので上書きを外す。 */
.p-page-header--dark,
.p-page-header--dark .p-page-header__title,
.p-page-header--dark .p-page-header__lead-text {
  color: var(--color-white);
}



/* simple: 1段タイトル 42.667px / lh1.4 */
.p-page-header__heading-single {
  margin: 0;
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-normal); /* 1.4（Figma実測） */
}

/* 実施拠点リスト（[ At NIZA ーNIZAで実施中 ]） */
.p-page-header__locations {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  letter-spacing: var(--letter-spacing-wider); /* Figma 1.6px（32px基準 0.05em） */
  line-height: var(--line-height-body);
}

.p-page-header__location {
  display: flex;
  align-items: baseline;
  gap: var(--space-8); /* inferred: Figmaは空白文字spanで間隔表現 */
  white-space: nowrap; /* [At NIZA ー実施中] は1行固定（Figmaどおり折返さない） */
}

.p-page-header__location-bracket,
.p-page-header__location-name {
  font-size: var(--font-size-h2); /* 32px */
  font-weight: var(--font-weight-black);
}

.p-page-header__location-note {
  font-size: var(--font-size-h3); /* 18.29px */
  font-weight: var(--font-weight-bold);
}

/* 縦罫線（SVGは使わずCSS borderで代替）。
   色は currentColor なのでダーク版（白文字）でも自動で追従する。 */
.p-page-header__divider {
  align-self: stretch;
  border-left: var(--border-width-medium) solid currentColor;
}

/* --- リード側 --- */
.p-page-header__lead {
  width: 37.5rem; /* 600px */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-40);
}

.p-page-header__lead-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  color: var(--color-text);
}

.p-page-header__subheading {
  margin: 0;
  font-size: var(--font-size-h2-lead); /* 25.6px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.p-page-header__body {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose); /* 1.8 */
}

/* --- LINE予約ボタン（fullのみ・外部リンク2段ラベル） --- */
/* 矢印装飾（右端はみ出し。Figma: left:346.5px top:24.5px / w50 h6） */
/* --- SP（767px以下・inferred: SPフレーム未提供のため暫定） --- */
@media (max-width: 767px) {
  .p-page-header {
    position: relative; /* 装飾見出しの基準 */
    padding-block: var(--space-40) var(--space-56);
  }

  /* simple版（Figma アート工房 3191:24330「Art Studio Project」）は
     直後のブロックと地続きに見せるため下余白を持たない。
     full版（「アート工房」等）は上記の56を残す。 */
  .p-page-header--simple {
    padding-bottom: 0;
  }

  /* p-cta__heading / p-heading__title と同じ扱い: 実施拠点リストを持たないヘッダーは
     大見出しを読ませる要素ではなく背景装飾として左上に敷く。
     1行目の行ボックス中心を、リード側1行目（__subheading）の中心に合わせる。 */
  .p-page-header__title:not(:has(.p-page-header__locations)) .p-page-header__heading {
    position: absolute;
    top: calc(
      var(--space-40) +
      (var(--font-size-h2-lead) * var(--line-height-body) -
       var(--font-size-large) * var(--line-height-display)) / 2 -
      var(--space-4)
    );
    left: 0;
    right: 0;
    z-index: 0;
    opacity: 0.07;
    pointer-events: none;
  }

  /* 装飾は英字だけで見せる（和文は装飾スケールだと収まらず、リード側と重複するため） */
  .p-page-header__title:not(:has(.p-page-header__locations)) .p-page-header__heading-ja {
    display: none;
  }

  /* 装飾になった見出しと本文を仕切る意味がなくなるため出さない */
  .p-page-header__title:not(:has(.p-page-header__locations)) ~ .p-page-header__divider {
    display: none;
  }

  /* __title は中身のない箱として残るので、__inner の gap ぶんを打ち消して詰める
     （:has() の入れ子は不正なので、inner側ではなく title側で相殺する） */
  .p-page-header__title:not(:has(.p-page-header__locations)) {
    margin-bottom: calc(-1 * var(--space-24));
  }

  .p-page-header__lead {
    position: relative; /* 装飾より前面に */
    z-index: 1;
  }

  .p-page-header__inner {
    flex-direction: column;
    gap: var(--space-24);
    padding-inline: var(--space-24);
  }


  /* 縦積みでは横罫線に。色は currentColor（ダーク版でも見える） */
  .p-page-header__divider {
    border-left: 0;
    border-top: var(--border-width-medium) solid currentColor;
  }

  .p-page-header__lead {
    width: 100%;
  }

}