/*
 * GEMCEREY 下層ページ用 hero
 * 白系のグラデーションがゆっくり流れる背景＋中央にテキスト。JSなしのCSSだけで動く。
 * 全セレクタを .gc-subhero 配下（gc-subhero__*）に閉じ、組み込み先のCSSと衝突しないようにしている。
 */

/* 文字は既存の下層ページ（.page-title）に合わせている。高さは直接指定しているので、
   罫線などを足しても変わらない（既存ページの586px/394pxより少し詰めてある） */
.gc-subhero {
  --ink: #4f4a44; /* 暖かみのあるチャコール。背景の金系と体温を揃えている */
  --gold: rgba(138, 116, 72, .55);
  position: relative;
  overflow: hidden;
  display: grid;
  place-content: center;
  text-align: center;
  min-height: 450px;
  padding: 48px 24px;
  background: #fbfaf7;
  color: var(--ink);
  isolation: isolate;
  /* border-top: 1px solid var(--color-border-gray); */
  border-bottom: 1px solid var(--color-border-gray);
}
.gc-subhero,
.gc-subhero * {
  box-sizing: border-box;
  margin: 0;
}

/* 背景（シェーダー）：WebGLで白系の光がにじみながら流れる。
   使えない環境では描かれず、下のCSSグラデーションがそのまま見える */
.gc-subhero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* 背景（CSS・シェーダーが使えないときの受け皿）：大きな光の玉を2枚重ね、別々の速さで回しながら動かす。
   回転と拡大だけを動かしているので、描き直しの負荷が小さい */
.gc-subhero__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 回しても角が見えないよう、画面の対角線より大きい正方形にする */
  width: 180%;
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.gc-subhero__bg--a {
  background:
    radial-gradient(38% 42% at 28% 32%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(34% 38% at 72% 26%, rgba(244, 233, 216, .95) 0%, rgba(244, 233, 216, 0) 72%),
    radial-gradient(40% 44% at 62% 74%, rgba(233, 236, 240, .9) 0%, rgba(233, 236, 240, 0) 70%);
  animation: gc-subhero-drift-a 42s linear infinite;
}
.gc-subhero__bg--b {
  background:
    radial-gradient(36% 40% at 22% 70%, rgba(247, 238, 238, .9) 0%, rgba(247, 238, 238, 0) 72%),
    radial-gradient(30% 34% at 78% 60%, rgba(238, 240, 232, .85) 0%, rgba(238, 240, 232, 0) 72%),
    radial-gradient(44% 48% at 48% 18%, rgba(255, 252, 245, .95) 0%, rgba(255, 252, 245, 0) 70%);
  animation: gc-subhero-drift-b 58s linear infinite;
}
@keyframes gc-subhero-drift-a {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.12); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
@keyframes gc-subhero-drift-b {
  0% { transform: translate(-50%, -50%) rotate(360deg) scale(1.08); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1.08); }
}

/* 中央だけ白を強めて文字を読みやすくする */
.gc-subhero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(44% 40% at center, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 75%);
}

.gc-subhero__title {
  font-family: Marcellus, serif;
  font-weight: 500;
  font-size: 70px;
  line-height: 1.35;
  text-transform: capitalize;
}
/* 上下の金のヘアライン。装飾と、白いナビ・白い本文との境目を兼ねる */
.gc-subhero::after {
  /* content: ""; */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent) bottom / 100% 1px no-repeat;
}

/* 金の細い罫線。トップheroとの接点である「金」を視覚的に示す */
.gc-subhero__rule {
  width: 48px;
  height: 1px;
  margin: 1px auto 19px; /* 見出しの行間ぶん（下に約12px）を差し引き、上下の見た目を揃えている */
  border: 0;
  background: var(--gold);
}
.gc-subhero__lead {
  font-family: Inter, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .gc-subhero { min-height: 340px; }
  /* 70px のままだと360px幅や長い英字タイトルで2行になり、高さが崩れる */
  .gc-subhero__title { font-size: min(70px, 11.5vw); }
  .gc-subhero__lead { font-size: min(26px, 5vw); }
}

/* 初回表示：文字がわずかに浮き上がる */
.gc-subhero__heading-group {
  animation: gc-subhero-rise .6s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes gc-subhero-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-subhero__bg { animation: none; }
  .gc-subhero__heading-group { animation: none; }
}