@charset "UTF-8";
/* ============================================================================
   pg-lift.css ── 下層20ページの「格」を上げる層（2026-08-18 第3次改修）
   ----------------------------------------------------------------------------
   仕様の正: _scripts/design_system_2026-08-18.md（本ファイルは §5-2 の署名寸法・
   §3 の色・§9-4 のブレークポイントをすべて継承する。新色・新BPは追加しない）

   【なぜ作ったか（CEO指摘）】
   「ホームがダイナミックかつスマート。その他のページが見劣りする」
   実測（1440px・第一画面）:
     ・最大の字   ホーム 68px / 下層19ページ 40px（19/19が同値）
     ・非白ピクセル率 ホーム 98.3% / 下層 1.4〜9.9%（写真を持つ3ページを除く）
     ・第一画面に「面」を持つページ ホーム=あり / 下層19ページ中 実質0
   ＝ 下層は「白い紙に小さな見出しが1行あるだけ」で第一画面が成立していなかった。

   【解き方 ── 写真を1枚も増やさずに解く】
   ページの冒頭を「扉（とびら）」にする。巻末プレート .scy-foot と同じ地色・
   同じ左端基準線・同じ内部余白で全幅の面を敷き、その上に既存の標番と h1 を置く。
   h1 は clamp で 32 → 64px。
   これで19ページが「扉ではじまり、奥付でおわる」＝ 標番（文書番号）と噛み合う
   1冊の体裁になる。新しい概念（新クラス・新色・新余白）を1つも増やしていない。

   【やらなかったこと】
   ・ホームのスクラブ演出を下層に足さない（ホームが主役という役割分担を守る）
   ・写真の新規追加・uploads/story/ の転用・生成AI画像の持ち込み（全て禁止事項）
   ・巨大数字タイル／英語の眉／中央揃えヒーロー（仕様書 §1 の「やらないこと」）
   ・sticky な節見出し等の追加演出（過剰。扉の一手に集中させる）

   【責任範囲】このファイルが持つのは次の5つだけ。
     1. display（h1）のスケール
     2. 扉 .scy-pagehead の面化
     3. リロケーション支援ヒーロー／社会貢献の頭 ── 同じスケールへの合流
     4. 扉の出現演出（面は最初から在り、字だけが起き上がる）
     5. 上記のレスポンシブ（1200 / 960 / 782 の3本のみ）
   ============================================================================ */

/* ============================================================
   1. display（h1）のスケール
   ------------------------------------------------------------
   ホームの見出しは --scy-fs-display: clamp(2.5rem, 4.8vw, 4.25rem)（1440で68px）。
   下層は「大きいが太くない」＝ weight 500 のまま字面だけを上げる。
   太さで張り合わない（実在10社の実測で 700単独は1/10・仕様書 §1）ので、
   ホームが「叫ぶ」／下層が「静かに大きい」という役割の差はそのまま残る。
   line-height はホームと同じ 1.08〜1.12 帯へ（40px時の1.30は小さい字のための値）。
   ============================================================ */
:is(.scy-pg .post_content, .scy-pg) .scy-pagehead__title,
.scy-pg .scy-pagehead__title,
.scy-lift .scy-pagehead__title {
	font-size: clamp(2.25rem, 4.4vw, 4rem); /* 実測 SP390:31.6px → PC1440:63.4px */
	line-height: 1.12;
	letter-spacing: -.015em;
	text-wrap: balance;
}

/* ============================================================
   2. 扉 ── ページ冒頭を全幅の面にする
   ------------------------------------------------------------
   (2-1) 面が chrome（パンくず）と地続きに見えないよう、パンくずの地を白に戻す。
         SWELL 既定の -bg-on（#f7f7f7）は扉の #f5f6f7 とほぼ同値で、
         残すと「パンくずまで扉の一部」に見えて面の輪郭がぼやける（実測で確認）。
   (2-2) .l-content の padding-top 64px を 0 にして、扉をパンくずの直下に付ける。
         リロケーション支援の写真ヒーロー・社会貢献の頭も同じだけ上がる（意図どおり）。
   (2-3) 全幅化の式は .scy-band / .scy-foot と完全に同じ（新機構を作らない）。
   (2-4) 下罫は引かない。面が変わること自体が最も強い区切りである
         （検収レポート B-1 の裁定と同じ思想。19ページで罫が1本ずつ減る）。
   ============================================================ */
.scy-lift .p-breadcrumb {
	background: transparent;
}
.scy-lift .l-content {
	padding-top: 0;
}

/* 【スコープの書き方】`.scy-pg .post_content >` の順序で書く。
   社会貢献の標番ブロックは `.post_content` の**中**に `.scy-pg` を持つ入れ子なので、
   この順序なら自動的に外れる（社会貢献は §3-2 で別に扱う）。 */
.scy-pg .post_content > .scy-pagehead,
.scy-pg .l-mainContent__inner > .scy-pagehead,
.scy-lift .scy-soc__sec--head > .scy-soc__inner > .scy-soc__pghead {
	position: relative;
	left: calc(-1 * var(--swl-pad_container, 0px) + var(--swl-scrollbar_width, 0px) / 2);
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
	background: var(--scy-surface-2);
	border-bottom: 0;
	/* 内部余白は巻末プレート .scy-foot__idx と同じ語彙（sp-8 / sp-8）で揃える */
	padding: var(--scy-sp-8) var(--swl-pad_container, 0px);
	margin: 0 0 var(--scy-gap-m);
}
/* 面は全幅・字は本文幅で止める（左端は基準線のまま＝S1不変） */
.scy-pg .post_content > .scy-pagehead > *,
.scy-pg .l-mainContent__inner > .scy-pagehead > * {
	max-width: var(--scy-bodyw, 1600px);
}

/* ============================================================
   3. 自前の頭を持つ2ページの合流
   ------------------------------------------------------------
   3-1 リロケーション支援は写真ヒーローが既に「面」なので、地色は足さず
       display のスケールだけ他18ページに合わせる。
   3-2 社会貢献は標番ブロック（.scy-soc__pghead）を §2 のセレクタで扉にしてある。
       ここではその前後の余白だけを整える。
   ============================================================ */
:is(.scy-pg .post_content, .scy-pg) h1.scy-gm__hero-title {
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	line-height: 1.12;
	letter-spacing: -.015em;
	/* このh1だけ em 単位の margin-top を持っており、字を大きくすると標番の
	   margin-bottom(10px) と相殺されて S1 の「標番〜h1 = 10px」が崩れる
	   （実測 40px時=8px→10px合格 / 63.36px時=12.67px→不合格）。0 に固定する。 */
	margin-top: 0;
}

/* 社会貢献 ── 標番ブロックだけを扉にする（上の §2 のセレクタで一緒に面化済み）。
   このページは既に「白 / #f5f6f7」を交互に敷く帯構造を持っており、頭セクション全体を
   面にすると次の .scy-soc__sec--alt と地色が隣接して S3 に違反する。
   よって扉は標番ブロックの範囲で止め、リードと表紙は従来どおり白のまま残す。
   （＝この面の下は必ず白。19ページと同じ「扉 → 白い本文」の並びになる） */
.scy-lift .scy-soc__sec--head {
	padding-top: 0;
}
.scy-lift .scy-soc__sec--head > .scy-soc__inner > .scy-soc__pghead {
	/* 節の内部間隔（24px）まで詰めていた既存の下余白は、面になったので節間隔に戻す */
	margin-bottom: var(--scy-gap-s);
}
.scy-lift .post_content .scy-soc__pghead .scy-pagehead {
	margin: 0;
	padding: 0;
	border-bottom: 0;
	background: none;
}

/* ============================================================
   4. 扉の出現演出（S6の範囲内）
   ------------------------------------------------------------
   面そのものはフェードさせない。地が薄く浮き上がるのは安っぽい。
   面は最初から在り、標番 → h1 の順に字だけが起き上がる（stagger 80ms）。
   easing / duration はホームのトークン（--scy-ease / --scy-dur-base）をそのまま使う。
   prefers-reduced-motion: reduce ではこのブロックごと無効＝完全停止。
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	/* 親（面）は動かさない。pg-core.css §11 の初期状態を打ち消す */
	:is(.scy-pg .post_content, .scy-pg) .scy-pagehead.scy-reveal,
	.scy-lift .scy-soc__sec--head .scy-pagehead.scy-reveal {
		opacity: 1;
		transform: none;
	}
	:is(.scy-pg .post_content, .scy-pg) .scy-pagehead.scy-reveal > .scy-mark,
	:is(.scy-pg .post_content, .scy-pg) .scy-pagehead.scy-reveal > .scy-pagehead__title,
	.scy-lift .scy-soc__sec--head .scy-pagehead.scy-reveal > .scy-mark,
	.scy-lift .scy-soc__sec--head .scy-pagehead.scy-reveal > .scy-pagehead__title {
		opacity: 0;
		transform: translateY(12px);
		transition:
			opacity   var(--scy-dur-base, .6s) var(--scy-ease, ease),
			transform var(--scy-dur-base, .6s) var(--scy-ease, ease);
	}
	:is(.scy-pg .post_content, .scy-pg) .scy-pagehead.scy-reveal.is-visible > .scy-mark,
	:is(.scy-pg .post_content, .scy-pg) .scy-pagehead.scy-reveal.is-visible > .scy-pagehead__title,
	.scy-lift .scy-soc__sec--head .scy-pagehead.scy-reveal.is-visible > .scy-mark,
	.scy-lift .scy-soc__sec--head .scy-pagehead.scy-reveal.is-visible > .scy-pagehead__title {
		opacity: 1;
		transform: none;
	}
	:is(.scy-pg .post_content, .scy-pg) .scy-pagehead.scy-reveal.is-visible > .scy-pagehead__title,
	.scy-lift .scy-soc__sec--head .scy-pagehead.scy-reveal.is-visible > .scy-pagehead__title {
		transition-delay: 80ms;
	}
}

/* ============================================================
   5. レスポンシブ（1200 / 960 / 782 の3本のみ・新設禁止）
   ============================================================ */
@media (max-width: 960px) {
	.scy-pg .post_content > .scy-pagehead,
	.scy-pg .l-mainContent__inner > .scy-pagehead,
	.scy-lift .scy-soc__sec--head > .scy-soc__inner > .scy-soc__pghead {
		padding-block: var(--scy-sp-6);
		margin-bottom: var(--scy-gap-s);
	}
}
@media (max-width: 782px) {
	.scy-pg .post_content > .scy-pagehead,
	.scy-pg .l-mainContent__inner > .scy-pagehead,
	.scy-lift .scy-soc__sec--head > .scy-soc__inner > .scy-soc__pghead {
		padding-block: var(--scy-sp-4);
	}
}