/* ==========================================================================
   page-hero.css — 下層ページのヒーロー（トップページ以外の共通基盤）
   --------------------------------------------------------------------------
   2026-09-14 に三嶋が決定。サービス詳細ページで詰めた形を、
   トップページ以外の全ページの共通ルールに昇格させたもの。
   （それまでの page-head.css を置き換えた。page-head は本番ページで未使用だった）

   ★★中身は 3 つだけ。増やさない。
       パンくず ／ h1（サービス名・ページ名） ／ CTA 2 本
     読ませる文章（キャッチコピー・リード・定義）は **ヒーローの外**、
     直下の .page-intro へ置く。ヒーローに文章を戻さないこと。

   ★★見出しは左揃え。中央揃えにしない（CLAUDE.md の才流との差別化）。
     同じ構成の才流のページは中央揃えだが、そこは寄せない。

   マークアップ：
     <section class="page-hero page-hero--photo on-inverse has-photo"
              style="--page-hero-photo: url(/assets/img/servicetop.webp)">
       <p class="page-hero__wordmark" aria-hidden="true" data-audit-ignore>SERVICE</p>
       <div class="container">
         <nav class="page-hero__crumb">…</nav>
         <h1 class="page-hero__title" style="--page-hero-title-chars: 10">…</h1>
         <div class="page-hero__actions">…btn × 2…</div>
       </div>
     </section>
   PHP から使うときは includes/page-hero.php を require する。書き写さない。

   面（4 つ）：
     .page-hero--plain  白地。ヘッダーは通常（sticky）。$header_overlay は使わない
     .page-hero--navy   紺ベタ。.on-inverse も付ける
     .page-hero--poly   紺のローポリ。塗りは紺のトーン展開 5 段だけ
     .page-hero--photo  写真。★暗幕（スクリム）が要る。下の注意を読むこと

   ★紺の面（navy / poly / photo）では $header_overlay = true にする。
     しないと白いヘッダーが帯の上に乗り、表紙が横に切られる。
     ★白地（plain）では **使わない**。透明状態の文字が白なので最初の状態で消える。
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;   /* 巨大文字の下端を切る */
  padding-block: var(--space-16) var(--space-40);
}

/* ヘッダーを重ねる面は、ヘッダー高（80px）ぶん上を余分に取る */
.page-hero--navy,
.page-hero--poly,
.page-hero--photo {
  padding-block: var(--space-24) var(--space-40);
}

/* ★下の余白は «巨大文字の居場所» でもある。詰めると CTA の行と重なる（実測）。
   巨大文字を大きくするなら、ここも一緒に増やすこと。 */

/* 中身を巨大文字より前に出す。
   ★★container に position を付けないこと。付けると巨大文字（絶対配置）の基準が
     section ではなく container になり、下端が切れなくなる（2026-09-14 に実際に踏んだ）。
   ★container-type: inline-size は h1 の大きさ計算のため（下の .page-hero__title）。
     これで «実際に使える幅» が 100cqi で取れる。100vw から余白とスクロールバーを
     引き算しなくてよくなる。position は付かないので巨大文字の基準は section のまま。 */
.page-hero .container {
  z-index: 1;
  isolation: isolate;
  container-type: inline-size;
}

/* --------------------------------------------------------------------------
   パンくず
   -------------------------------------------------------------------------- */
.page-hero__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  /* ★h1 との間。ヒーローの中身が 3 つだけなので、ここを空けて «表紙» の間を作る */
  margin-bottom: var(--space-20);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.page-hero__crumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.page-hero__crumb a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.on-inverse .page-hero__crumb a:hover {
  color: var(--color-text-on-inverse);
}

/* --------------------------------------------------------------------------
   h1
   ★★大きさは «375px で何字を 1 行に収めたいか» から決まる。
     --page-hero-title-chars（既定 10）に最長行の字数を入れると、
     コンテナの «実際に使える幅» から割り出して自動で収まる。手で clamp を引き直さない。
       10 字 → 375px で 31.4px（10 字 = 317px。使える幅 320px に収まる）
       15 字 → 375px で 20.9px（15 字 = 317px）

   ★★基準は 100cqi（親 .container の内側の幅）。**100vw を使わない。**
     100vw は余白もスクロールバーも含むため、引き算で合わせにいくと必ずずれる。
     2026-09-14 に «新規事業立ち上げ支援» が «…支／援» と割れたのはこれが原因
     （100vw 基準では 322.2px と出たが、実際に使える幅は 320px だった）。
   ★1.02 は詰めの遊び。内訳は letter-spacing（--ls-heading = 0.01em）が
     1 字あたり 1% 分、残り 1% が端数の逃げ。和文は 1 文字 ≒ 1em。
   ★上限は --text-5xl と同じ 52px。ここを超えると «見出しの最小 40px» の
     決めごと（CLAUDE.md）との釣り合いが崩れる。
   -------------------------------------------------------------------------- */
.page-hero__title {
  margin-bottom: var(--space-10);
  color: var(--color-text-strong);
  font-size: min(
    calc(100cqi / (var(--page-hero-title-chars, 10) * 1.02)),
    var(--page-hero-title-max, 3.25rem)
  );
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

/* 2 行以上に割るときは <span> で行を切る。折り返し任せにしない */
.page-hero__title span {
  display: block;
}

/* --------------------------------------------------------------------------
   CTA（2 本）
   ★本数を増やさない。競合 6 社の実測でも本文中の CTA は 1〜2 本に収束している。
   -------------------------------------------------------------------------- */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   装飾の巨大文字（右下・下端を切る）
   ★★装飾。aria-hidden ＋ data-audit-ignore を必ず付ける。
     パンくずと同じ意味しか持たないので読み上げない。
     WCAG も装飾テキストにはコントラスト比を求めない。
     docs/audit-page.js はこの属性が付いた要素を飛ばす。
     ★本当に装飾のときだけ。読ませたい文字に付けて基準を逃げないこと。
   ★Oswald は使わない。CLAUDE.md は Oswald を «見せる数字» だけに限っている。
   ★動かさない。置くだけ（社長 NG「ギミック多用」）。
   ★font-style: italic を使わない。Noto Sans JP に italic の字形が無く、
     ブラウザの合成斜体になって角度が選べず字も歪む。skewX で傾ける。
   -------------------------------------------------------------------------- */
.page-hero__wordmark {
  position: absolute;
  z-index: 0;
  right: var(--container-gutter);
  bottom: -0.22em;   /* em なので文字サイズが変わっても切れ方の比率は変わらない */
  margin: 0;
  font-size: clamp(4rem, 13vw, 12rem);
  font-weight: var(--fw-bold);   /* ★700 が上限。900 は読み込んでいないので効かない */
  line-height: var(--lh-none);
  letter-spacing: -0.06em;
  transform: skewX(-9deg);
  transform-origin: 100% 100%;
  white-space: nowrap;
  user-select: none;
  color: var(--navy-100);
}

.on-inverse .page-hero__wordmark {
  /* ★ベタの navy-700 にすると «面» に見えて背景の図形と競る。薄く敷く */
  color: rgba(255, 255, 255, 0.14);
}

/* --------------------------------------------------------------------------
   面：紺ベタ
   ★面の色と文字色は .on-inverse が担う（base.css）。ここでは書かない。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   面：紺のローポリ
   ★塗りは紺のトーン展開 5 段だけ。第 2 色相を足さない。
   ★意味トークンは紺の濃淡を 2 段しか持たないため、ここだけ生のスケールを使う
     （tokens.css 2-3 の例外扱い）。
   ★白文字はいちばん明るい navy-600（#312b97）の上でも 10.96:1 ある。
   -------------------------------------------------------------------------- */
.page-hero__poly {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.page-hero__poly .t0 { fill: var(--navy-950); }
.page-hero__poly .t1 { fill: var(--navy-900); }
.page-hero__poly .t2 { fill: var(--navy-800); }
.page-hero__poly .t3 { fill: var(--navy-700); }
.page-hero__poly .t4 { fill: var(--navy-600); }

/* --------------------------------------------------------------------------
   面：写真
   ★★**暗幕（スクリム）を必ず入れる。** 写真の上に白文字を乗せるため。
     ★濃さは «その写真の画素» を測って決めること。決め打ちにしない。
       docs/audit-page.js は背景色しか見ないので、画像の上の文字は検出できない。
       canvas で画素を読み、グラデーションの α を座標から計算して合成した色で測る。
     ★servicetop.webp で測った値が下の 0.60 → 0.18。文字の最低 8.78:1（1425px）。
       別の写真に差し替えたら必ず測り直すこと。
   ★暗幕も紺（navy-950）。第 2 色相を足さない。
   ★画像は WebP にする。PNG のままだと FV の LCP を直撃する。
   -------------------------------------------------------------------------- */
.page-hero--photo.has-photo {
  background-image:
    linear-gradient(
      100deg,
      rgba(4, 2, 39, 0.60) 0%,
      rgba(4, 2, 39, 0.50) 38%,
      rgba(4, 2, 39, 0.28) 68%,
      rgba(4, 2, 39, 0.18) 100%
    ),
    var(--page-hero-photo);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* ★900px 未満は 1 行が短くなって文字が右端まで伸びるので、
     横方向のスクリムは効かない。縦方向の一様なスクリムに切り替える。
   ★背景の位置も動かす。縦長の器に cover で敷くと横が大きく切られ、
     既定の center では写真の暗い側だけが出ることがある。 */
@media (max-width: 899px) {
  .page-hero--photo.has-photo {
    background-image:
      linear-gradient(
        180deg,
        rgba(4, 2, 39, 0.48) 0%,
        rgba(4, 2, 39, 0.42) 60%,
        rgba(4, 2, 39, 0.36) 100%
      ),
      var(--page-hero-photo);
    background-position: center, 70% center;
  }
}

/* ==========================================================================
   page-intro — ヒーローの直下に置く導入ブロック
   --------------------------------------------------------------------------
   2026-09-14 三嶋決定。3 案を見比べたうえで **案 I-3 タイポグラフィ**に決着し、
   リードと定義を左揃えにした（三嶋の指示）。3 案の中身は docs/decisions.md に残した
   （デモは本実装に置き換えたので、もう画面では見られない）。

   ★ヒーローから下ろした «読ませる文章» の置き場。
     キャッチコピー（50 字前後）／リード（120〜200 字）／定義の 1 文（70 字前後）。

   ★★**装飾を使わない。** 罫線も面の塗りも持たせない。
     «文字の大小差» と «余白» だけで組む。社長の言う
     「しっかりユニクロを着こなす」に最も近い作り方。
     キャッチの左に罫を引いていた旧版は «引用ブロック» に見えて平板だった（三嶋指摘）。
     飾りを足したくなったら、まずキャッチの文字を大きくするほうを試すこと。

   ★★**すべて左揃え・左寄せ。** 中央揃えにしないのはもちろん、
     広い画面で右へ «段» を作ることもしない（2026-09-14 三嶋の指示）。
     幅は --measure（42em）で止める。左端が 1 本の線に揃うのが本サイトの通し方。

   ★★定義の 1 文は **AI が引用する単位**。人向けのコピーより後ろに置く。
     ★★2026-09-14 三嶋判断で **.page-intro__def をやめ、リードとして組む**ことにした。
       上に 2px の横罫 1 本を引いていたが、あれは «ラベル（〜とは）＋定義文» の
       2 段組みを受けるためのもので、ラベルを外して 1 段にした時点で役目が終わっていた。
       このブロックは «装飾を使わない» と決めた場所なので、罫は唯一の例外になっていた。
     ★★**<p> は分ける。** ここが «AI が引用する単位» である理由は
       罫ではなく «独立した段落であること»。上のリードと 1 つの <p> にまとめない。
       罫は CSS なので、そもそも AI には見えていない。

   マークアップ：
     <section class="section section--lg page-intro" aria-label="このページについて">
       <div class="container">
         <p class="page-intro__catch">キャッチコピー</p>
         <p class="page-intro__lead">リード</p>
         <p class="page-intro__lead">定義の 1 文（主語は自社。ラベルは付けない。段落は分ける）</p>
       </div>
     </section>
   ========================================================================== */

/* キャッチ。★見出し級まで上げる。ここがこのブロックの主役 */
.page-intro__catch {
  max-width: 16em;
  margin-bottom: var(--space-12);
  color: var(--color-text-strong);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  /* ★★この 2 つは必ず対で書く。balance だけだと文節を無視して割れる。
     実測：«構想で終／わらせず» と語中で折れた（2026-09-14）。
     auto-phrase が文節で切り、balance が行の長さを均す。
     rows / section-head / faq と同じ組み合わせ。 */
  word-break: auto-phrase;
  text-wrap: balance;
}

.page-intro__lead {
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
}

.page-intro__lead + .page-intro__lead {
  margin-top: var(--space-4);
}

/* ★★定義の 1 文のための .page-intro__def は 2026-09-14 に廃止した（三嶋判断）。
     定義の 1 文も .page-intro__lead で組む。段落（<p>）だけ分ける。

     経緯：もとは «ラベル（新規事業立ち上げ支援とは）＋定義文» の 2 段組みで、
     上の 2px の横罫はその対を受けるためのものだった。
     同日ラベルを外して 1 段にしたとき、罫だけが残っていた。

     外した理由は 3 つ。
       1. 罫の役目（ラベルと定義文の対を受ける）が無くなっていた
       2. このブロックは «装飾を使わない。文字の大小差と余白だけ»（案 I-3）と
          決めた場所で、罫はそこで唯一の例外だった
       3. 定義文が 17px（--text-base）で、すぐ上のリード 19px より小さいのに、
          いちばん強い装飾が付いていた。大小の序列と装飾の序列が逆だった
          ★行長の上限が em なので罫も 714px で止まり、リード 798px と
            右端が 84px ずれていた（1425px 実測）

     ★AIO 上の損はない。罫は CSS なので AI には見えていない。
       «引用の単位» を作っているのは独立した <p> のほうで、それは残している。 */