/* =========================================================================
   全ページ共通のグレイニー地紋（ランステック ピンク × 西原商会 グリーン）
   - 色グラデは「背面のページ背景」（z-index:-1）。セクション背景を透過させて見せる。
   - グレイン（ざらざら）は全面に薄く重ねる（カード・文字の上にも均一に乗る）。
   - 強度はすべて :root の変数で調整可能。
   ========================================================================= */
:root {
  /* ブランドカラー（index.html の --pink / --green と同値・RGB成分） */
  --ground-pink:  212, 99, 126;   /* #D4637E ランステック */
  --ground-green:  26, 157, 87;   /* #1A9D57 西原商会     */

  /* 色あしらいの濃さ（四隅。中央=可読エリアは透明に抜く） */
  /* FloatingLines アニメ背景と併用するため、競合しないよう静的ウォッシュは控えめに */
  --ground-pink-strength:  .28;
  --ground-green-strength: .22;

  /* ざらざら（グレイン）の強さ：0 で無効。白基調なので .05〜.12 が適正 */
  --ground-grain-opacity:  .07;

  /* 背景アニメ(FloatingLines)のブラー量。FV以外の全セクションに適用。
     値を上げるほど背景が強くぼける（0px で無効）。 */
  --bg-blur: 14px;

}

/* --- FloatingLines（WebGL）アニメ背景：白ベースの上・本文の下 ----------------- */
/* assets/js/floating-lines.js が <div.floating-lines-bg> を生成。                */
/* 白地にブランドカラー（ピンク/グリーン）のラインを薄く流す。three は CDN(ESM)。 */
.floating-lines-bg {
  position: fixed;
  inset: 0;
  z-index: -2;               /* 白ベース(body::before:-3)の前／角ライン(-1)・本文の後ろ */
  pointer-events: none;
}
.floating-lines-bg canvas { display: block; width: 100%; height: 100%; }

/* --- ページ背景（背面）：四隅にピンク/グリーンをにじませる ------------------ */
/* html::before に置いた理由：body { opacity: 0 } でも消えないようにするため。  */
/* body::before は body の opacity 合成グループに含まれ、opacity:0 で消える。   */
/* html::before は body の外側にあるため常に表示される → 真っ白にならない。    */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;               /* 最背面：アニメ背景(-2)・角ライン(-1)・本文より後ろ */
  pointer-events: none;
  background-color: #ffffff; /* ベースは白 */
  background-image:
    /* ピンク：左上 */
    radial-gradient(70vmax 70vmax at 0% 0%,
      rgba(var(--ground-pink), var(--ground-pink-strength)) 0%, transparent 60%),
    /* グリーン：右下 */
    radial-gradient(66vmax 66vmax at 100% 100%,
      rgba(var(--ground-green), var(--ground-green-strength)) 0%, transparent 60%),
    /* ピンク：右上の控えめなアクセント */
    radial-gradient(48vmax 48vmax at 100% 0%,
      rgba(var(--ground-pink), calc(var(--ground-pink-strength) * .5)) 0%, transparent 55%);
}

/* --- ざらざらのグレイン：全面に均一な質感（最前面・操作透過） ---------------- */
/* normal ブレンド：白・色地・濃色のいずれにも均一に粒状感が乗る
   （soft-light/overlay/multiply は純白の上では効かないため使わない）。 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 500;              /* 本文(1-2)・ヘッダー(200)の上／内部ツール(9999)の下 */
  pointer-events: none;
  opacity: var(--ground-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* 角の「3本線の扇」あしらい（左上＋右下）は削除（全ページ非表示） */

/* --- セクション帯：4パターンの処理でリズムをつくる -------------------------- */
/* 単調な全幅フロストをやめ、セクションの性格で処理を使い分ける:               */
/* [透明] アニメそのまま  [カード] wrap幅のみガラス化  [淡帯] 全幅で薄色  [画像] */

body {
  background: transparent !important;
  font-size: 18px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* ページ遷移ディゾルブ：JS が pgt-visible を付与するまで不可視 */
  opacity: 0;
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1);
}
body.pgt-visible { opacity: 1; }

/* [基本] 全セクション透明 — アニメをそのまま見せる */
section { background: transparent !important; }

/* [背景ブラー] FV以外の全セクションで、背後の背景アニメをぼかす。
   backdrop-filter は「背後」だけをぼかすため、セクション内のテキスト・カードは鮮明なまま。
   FV(.fv＝TOPのヒーロー)はぼかさず crisp に見せる。強度は --bg-blur で調整。 */
section:not(.fv) {
  -webkit-backdrop-filter: blur(var(--bg-blur));
  backdrop-filter: blur(var(--bg-blur));
}
.page-hero {
  /* 白パネルは無し（透明）のまま、背後の背景アニメだけをぼかす（FV以外の方針に合わせる） */
  background: transparent !important;
  -webkit-backdrop-filter: blur(var(--bg-blur)) !important;
  backdrop-filter: blur(var(--bg-blur)) !important;
  border-bottom: none !important;
  /* 高さをコンパクトに：下余白を全ページ・全幅で統一短縮（上余白は header.css が管理） */
  padding-bottom: 36px !important;
  overflow: hidden;
}

/* タイトル直後の最初のセクションだけ上余白を詰める（タイトルとの間隔短縮）。
   各ページCSSの section { padding:120px 0 } を上書き。後続セクション間は据え置き。 */
.page-hero + section { padding-top: 40px !important; }

/* ===== PAGE HERO: 英日二段タイポグラフィ型 =====
   eyebrow を大型・透過テキストとして配置し、
   h1 が手前に重なることで奥行きと格調を演出する。
   .page-hero .eyebrow（詳細度 0,2,0）が各ページの
   .eyebrow（0,1,0）を上書きするため !important 不要。
*/
.page-hero .eyebrow {
  font-family: 'Outfit', sans-serif !important;
  font-size: clamp(48px, 7.5vw, 84px) !important;
  font-weight: 800 !important;
  color: rgba(212, 99, 126, 0.10) !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  margin-bottom: -22px !important;
  text-transform: uppercase !important;
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

@media (max-width: 768px) {
  .page-hero .eyebrow { font-size: clamp(32px, 10vw, 52px) !important; margin-bottom: -14px !important; }
  .page-hero { padding-bottom: 28px !important; }
  .page-hero + section { padding-top: 24px !important; }
}
.news-teaser { background: rgba(255,255,255,0.88) !important; }

/* [淡い全幅帯] GROUP — 全幅に微グリーンを引いて視覚アンカーを置く */
/* SERVICES/INTERVIEW は各カードが自前で白背景を持つので透明のまま  */
.group { background: rgba(237,248,242,0.40) !important; }

/* [コンテンツカード] RECRUIT — コンテンツ幅だけをガラスカード化 */
/* section の padding(120px)が外側余白、.wrap がカード本体として浮く   */
.recruit > .wrap {
  background: rgba(255,255,255,0.84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 4px 40px rgba(0,0,0,0.07), 0 1px 6px rgba(0,0,0,0.03);
  padding: 52px 56px;
}

@media (max-width: 768px) {
  .recruit > .wrap {
    border-radius: 16px;
    padding: 36px 24px;
  }
}

/* --- A11y: eyebrow（小さいピンク大文字ラベル）を AA 確保のため濃いピンクに ----- */
/* 各ページのインライン .eyebrow{color:var(--pink)} を全ページ横断で上書き。       */
/* ピル型背景でセクション冒頭を視覚的に明示しつつ、アニメ背景でも読みやすくする。  */
.eyebrow {
  color: var(--pink-dark, #B84A66) !important;
  display: inline-block !important;
  background: rgba(255,255,255,0.90) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  padding: 4px 14px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(184,74,102,0.20) !important;
  font-size: 12px !important; /* 11px → 12px：小さすぎず */
}

/* 印刷時は地紋を出さない */
@media print {
  body::before,
  body::after,
  .floating-lines-bg { display: none; }
}