/* =========================================================
   page-hero.css — 下層4ページ共通のヒーロー＋パンくず
   （建築模型・ペーパークラフト・ワークショップ・ギャラリー）
   - 4ページとも同じ HTML・同じ CSS。HTML で変えるのは文字だけ（背景の輪郭英字は data-outline）
   - 上端基準：上の余白は固定。ボタンの有無など中身の量が違っても、ラベルと h1 は同じ位置から始まる
   - 文字の大きさも4ページ共通。いちばん長い文字列が画面に収まる大きさにそろえる
       --ow  … 輪郭英字の最長語「PAPERCRAFT」の語幅（Arial・字間-.09em の em 値）
       --h1w … h1 の最長行「ペーパークラフトを、」の行幅（Zen Old Mincho・字間-.04em の em 値）×1.05
     文言を変えてこれより長くなる場合は、この2つの値を実測し直す
   ========================================================= */

.page-hero {
  --ow: 5.75;
  --h1w: 10.08;
  --avail: calc(100vw - 2 * max(var(--gx), calc((100vw - 82rem) / 2)));
  --h1: min(clamp(3.7rem, 6.5vw, 7.4rem), calc(var(--avail) / var(--h1w)));
  --ofs: min(clamp(8rem, 22vw, 24rem), calc(var(--avail) / var(--ow)));
  --label-h: .9rem;                     /* ラベル1行の高さ（12px × 1.2） */
  --label-gap: 2.5rem;                  /* ラベル → h1 */
  --outline-base: calc(var(--label-h) + var(--label-gap) + .42 * var(--h1));  /* 輪郭英字のベースライン位置（h1 1行目に掛ける） */
  --hero-paper: #fff;
  --dots: radial-gradient(rgba(0, 0, 0, .035) .7px, transparent .7px);
  position: relative;
  margin-top: var(--header-h);
  padding: clamp(7rem, 10vw, 9rem) var(--wrap) clamp(4rem, 7vw, 6rem);
  overflow: hidden;
  color: var(--ink);
  background: var(--hero-paper) var(--dots) 0 0 / 5px 5px;
}

.page-hero__inner {
  position: relative;
  isolation: isolate;
  min-width: 0;
}

/* 背景の輪郭英字（文字は HTML の data-outline） */
.page-hero__inner::before {
  position: absolute;
  z-index: -1;
  top: calc(var(--outline-base) - .8465 * var(--ofs));   /* Arial・line-height 1 のベースラインは上端から .8465em */
  left: 0;
  margin-left: -.04em;
  color: transparent;
  font: 400 var(--ofs) / 1 Arial, "Helvetica Neue", sans-serif;
  letter-spacing: -.09em;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(0, 0, 0, .16);
  content: attr(data-outline);
  pointer-events: none;
  user-select: none;
}

.page-hero__label {
  margin: 0 0 var(--label-gap);
  font: 700 .75rem / 1.2 Arial, "Helvetica Neue", sans-serif;
  letter-spacing: .17em;
}

.page-hero__title {
  margin: 0;
  font-family: var(--mincho);
  font-size: var(--h1);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.page-hero__title em { font-style: normal; }

.page-hero__lead {
  max-width: 42rem;
  margin: 2.5rem 0 0;
  color: var(--text);
  font-size: .9375rem;
  line-height: 1.9;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.page-hero__action {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  height: 48px;
  margin-top: 2rem;
  padding: 0 1.25rem;
  border: 1px solid var(--ink);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  transition: color .2s ease, background .2s ease;
}

.page-hero__action:hover,
.page-hero__action:focus-visible { color: var(--hero-paper); background: var(--ink); }
.page-hero__action:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- パンくず ---------- */
.breadcrumb {
  padding: 1.1rem var(--wrap);
  border-bottom: 1px solid var(--ink);
  background: var(--hero-paper, #fff) radial-gradient(rgba(0, 0, 0, .035) .7px, transparent .7px) 0 0 / 5px 5px;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  letter-spacing: .06em;
  line-height: 1.5;
}

.breadcrumb__list li { color: var(--sub); }
.breadcrumb__list li + li::before { margin-right: .55rem; content: "/"; }
.breadcrumb__list a { display: inline-block; padding: .35rem 0; color: var(--text); }
.breadcrumb__list a:hover,
.breadcrumb__list a:focus-visible { text-decoration: underline; text-underline-offset: .25em; }

/* ---------- ≤700：スマートフォン（輪郭英字はラベルの背後に置く） ---------- */
@media (max-width: 700px) {
  .page-hero {
    --h1: min(clamp(3.3rem, 14vw, 5.2rem), calc(var(--avail) / var(--h1w)));
    --ofs: min(26vw, calc((100vw - max(var(--gx), calc((100vw - 82rem) / 2))) / var(--ow)));
    --label-gap: 2rem;
    --outline-base: calc(var(--label-h) + .4rem);
    padding: 8rem var(--wrap) 4rem;
  }

  .page-hero__lead { margin-top: 2rem; }
  .page-hero__action { margin-top: 1.75rem; }
  .breadcrumb { padding-block: .8rem; }
}