/* ============================================================
   ページ上部のヒーロー（全ページ共通）
   ------------------------------------------------------------
   写真の上に紺色の膜をかけて、その上に見出しを置く形。
   /philosophy/ と /access/ で同じものを2回書いていたので、
   1か所にまとめました。**新しいページでもこれを使ってください。**

   【使い方】HTML
     <header class="pg-hero">
       <img class="pg-hero-img" src="…" alt="…" width="…" height="…"
            fetchpriority="high" decoding="async">
       <div class="○○-wrap">
         <div class="pg-hero-text">
           <p class="eyebrow">LABEL — ラベル</p>
           <h1>見出し</h1>
           <span class="pg-hero-rule" aria-hidden="true"></span>
         </div>
       </div>
     </header>

   【ページごとの調整】CSS（それぞれ1行）
     .page-○○ {
       --hero-h:   440px;         高さ
       --hero-pos: center 34%;    写真のどこを見せるか
       --hero-w:   620px;         見出しの折り返し幅
     }

   ★ヒーロー画像に loading="lazy" を付けないこと。
     開いて最初に見える画像なので、遅延させると表示が一拍遅れます。
   ============================================================ */

.pg-hero {
  position: relative;
  isolation: isolate;        /* 中の重なり順をこのブロック内で完結させる */
  overflow: hidden;
  min-height: var(--hero-h, 440px);
  display: flex;
  align-items: center;
  padding: 60px 0;
  background: var(--navy);   /* 写真が出るまでの下地 */
}

.pg-hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, center 34%);
}

/* 文字を読ませるための膜。左が濃く、右にいくほど写真が出る */
.pg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(10, 26, 46, .95) 0%,
    rgba(10, 26, 46, .88) 34%,
    rgba(10, 26, 46, .55) 66%,
    rgba(10, 26, 46, .18) 100%);
}

/* ★ヒーローは flex なので、中の wrap を width:100% にしないと
      「文章が短いページだけ中央に寄る」という揺れが出ます。 */
.pg-hero > div { width: 100%; }

.pg-hero-text { max-width: var(--hero-w, 620px); }

.pg-hero .eyebrow { color: #8fd0f5; }

.pg-hero h1 {
  margin: 0;
  font-size: clamp(24px, 6.2vw, 42px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
  word-break: auto-phrase;   /* 日本語を文節の切れ目で折り返す */
}

/* 見出しの下に続く1〜2行の説明（無くても可） */
.pg-hero-lead {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.95;
  color: #cfe0ee;
  max-width: 34em;
  word-break: auto-phrase;
}
.pg-hero-lead a {
  color: #8fd0f5;
  text-underline-offset: 3px;
}

/* 見出しの下の黄色い線（サイトのサブカラー） */
.pg-hero-rule {
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--sub);
  margin-top: 24px;
}

/* ============================================================
   動き（ページを開いた瞬間）
   ------------------------------------------------------------
   CSSだけで動かしているので、JavaScriptが止まっていても表示されます。
   速さを変えるならこの4つの数値。
   ============================================================ */
@keyframes pgHeroZoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
@keyframes pgHeroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pgHeroRule {
  from { width: 0; }
  to   { width: 46px; }
}

.pg-hero-img      { animation: pgHeroZoom 1.8s  cubic-bezier(.22, .61, .36, 1) both; }
.pg-hero .eyebrow { animation: pgHeroRise  .7s  .10s cubic-bezier(.22, .61, .36, 1) both; }
.pg-hero h1       { animation: pgHeroRise  .85s .24s cubic-bezier(.22, .61, .36, 1) both; }
.pg-hero-lead     { animation: pgHeroRise  .85s .42s cubic-bezier(.22, .61, .36, 1) both; }
.pg-hero-rule     { animation: pgHeroRule  .6s  .60s cubic-bezier(.22, .61, .36, 1) both; }

/* ============================================================
   スマホ
   ------------------------------------------------------------
   縦画面には「右側」が無いので、横方向のグラデーションをやめて
   全体に均一の膜をかけます。どこに文字が来ても読めるように。
   ============================================================ */
@media (max-width: 600px) {
  .pg-hero {
    min-height: var(--hero-h-sp, 380px);
    padding: 48px 0;
  }
  .pg-hero-img { object-position: var(--hero-pos-sp, center 30%); }
  .pg-hero-text { max-width: none; }
  .pg-hero::after {
    background: linear-gradient(180deg,
      rgba(10, 26, 46, .74) 0%,
      rgba(10, 26, 46, .86) 100%);
  }
  .pg-hero-lead { font-size: 14.5px; }
}