/* === scy-soc 社会貢献ページ専用CSS（2026-08-17 全面再設計版） ===
   仕様の正: _scripts/design_spec_apple_2026-08-14.md
   設計根拠: _scripts/design_research/社会貢献ページ_実在サイト研究_2026-08-17.md（実在11サイトの実測）

   【初版からの変更点と根拠（すべて実測に基づく）】
   - ヒーロー（英語眉＋標語＋中央揃えリード）を全廃。
     P1: 英語オールキャップスの眉を日本語見出しの上に置く実在サイト 0/10
     P3: 白地に標語だけを単独で置く実在サイト 0/10
     P2: タイトル層は実在10/10が2層以内（当サイトは4層だった）
   - ページ名 → 事実リード → 実績テーブル → 事例、の三井不動産型に置換。
     P11: 社会貢献の実ページの密度は654〜833字/1000px（当サイトは203字/1000px＝索引ページ並み）
   - 見出しウェイト 700 → 500。P6: 実在10社で700単独は1社のみ、400〜500が6社。
   - 本文 --scy-fs-lead(18.72px) → --scy-fs-body(16px)。P7: 日本語8サイト中7サイトが14〜16px。
     これは spec からの逸脱ではなく spec への復帰（--scy-fs-body は本文用トークン）。
   - measure を 40em → 43em 相当（2カラム時の実測1行43字）に。P8: 実在は36〜64字・中央値40。
   - 写真から 角丸／枠線／内側パディング／object-fit:contain を除去し cover の「面」に。
     P5: 角丸0pxが9/10、枠線＋padding＋containの組み合わせは0/10。
   - 証憑（証書・盾）は写真と分離し --scy-surface-2 の面上に置く。枠線なし・拡大なし。
   - 巨大数字タイルは作らない。P10: 実在0/10。金額・年はテーブルと本文に置く。
   - 新色ゼロ／シャドウ・グラデーションなし／8ptグリッド維持。

   【ヒーロー写真を採らなかった理由（実装時に実写検証）】
   現有素材の実解像度は 授与式 417×561 / 3.11式典 670×455 / 捐贈証書 376×244 / 表彰盾 220×573。
   研究レポート §5-4 の指示どおり cover トリミングを実際に生成して目視した結果
   （_scripts/qa/2026-08-17/redesign/hero_crop_test/）、
     - 授与式写真を 1440×380 に cover → 3.45倍拡大。両名の頭部が完全に切れ、被写体が判別不能。
     - 3.11式典写真を 1440×380 に cover → 2.15倍拡大。「3.11」ロゴ上端と登壇者頭部が切れ、右端に暗幕の黒帯。
   いずれも破綻するため全幅の写真プレートは不採用とした。
   代替として、写真ゼロで654字/1000pxを成立させている三菱地所の構成（ページ名 → 即本文 → テーブル）を採る。
   ベタ帯（反転色）も採らない：タスクAで全ページのページ名体裁を統一したばかりであり、
   このページだけ反転色の帯にすると全体の一貫性が崩れるため。 */

/* ---- ページ先頭（ページ名＋事実リード。実績テーブルと同じ帯に置く） ----
   ページ名 h1 は assets/page-title.css の .scy-pagehead__title を共有する（全ページで同一体裁）。 */
.post_content .scy-soc__lead {
	margin: var(--scy-sp-3) 0 0;
	/* 43em＝本文と同じ測度。18.72pxで1行43字（研究レポート P8「40〜46字」の範囲内）。
	   34emだと同じ文量で7行になり、密度（字/1000px）を落としていた。 */
	max-width: 43em;
	font-family: var(--scy-sans);
	font-size: var(--scy-fs-lead);
	line-height: var(--scy-lh-lead);
	color: var(--scy-ink); /* ink-2は白地で4.39:1とAA(4.5:1)を割るため本文系はink一本 */
	text-align: left; /* 中央揃え禁止（P3・§3-3） */
}
/* PCでは2段に流す（2026-08-18 仕上げ）。
   1段のままだと 48〜865px にしか物が無く、右599pxが184px分そのまま空いていた
   ＝ページの一番上、最初に目に入る場所に死に領域があった。
   段組みにすれば1行の字数（約42字）を保ったままコンテナの端まで届く。
   ご挨拶ページの挨拶文（pages.css .scy-flow2）と同じ型で、サイト内で一貫する。 */
@media (min-width: 960px) {
	/* 2026-08-18: 2段組（columns:2）は段の間で読み順が折り返して読みにくい（CEO指摘）。
	   /message/ の .scy-flow2 と同じ判断で1段に戻す。右が空くのは許容する。 */
	.post_content .scy-soc__lead {
		max-width: 43em;
	}
}

/* ---- セクション帯（白と#f5f6f7の交互） ----
   縦パディングは --scy-section（clamp 96〜160px）ではなく 24px（--scy-sp-3）を用いる。
   帯の縦余白は情報密度（字/1000px）を最も強く押し下げる要素で、初版の実測では
   帯6本 × 上下192px ＝ 1,024px を余白だけで消費していた。
   2026-08-17 第2次改訂で節が4→6本に増えた（自社メディア／東日本／四川を独立させたCEO指示）ため、
   64px → 24px まで詰めている。帯の切れ目は地色の交替（白 / #f5f6f7）が担うので、
   パディングを削っても節の境界は失われない（実測: 441 → 548字/1000px。目標550・研究の実在値654〜833）。
   横パディングは --scy-gutter（max(24px,5vw)＝1512pxで75.6px）ではなく SWELL のコンテナ内側
   余白 --swl-pad_container（PCで48px／960〜1200pxで32px／SP 4vw）に合わせる。
   ヘッダーロゴ・パンくず・本文の左端を1本の基準線に揃えるため（2026-08-17 CEO指摘・タスク3）。 */
.scy-soc__sec {
	background: var(--scy-surface);
	padding: var(--scy-sp-3) var(--swl-pad_container, 4vw);
}
.scy-soc__sec--head { padding-top: var(--scy-sp-2); }
.scy-soc__sec--alt { background: var(--scy-surface-2); }
/* 中央寄せではなく左端揃え。基準線 = ヘッダーロゴ／パンくずと同じ --swl-pad_container */
.scy-soc__inner { max-width: var(--scy-container); margin: 0 auto 0 0; }

/* ---- 節ラベル（旧: 英語オールキャップスの眉 → 日本語ラベル） ---- */
.scy-soc__label {
	display: block;
	font-family: var(--scy-sans);
	font-size: var(--scy-fs-eyebrow);
	font-weight: 600;
	letter-spacing: .04em; /* --scy-ls-eyebrow(.14em) は走り文の頭で視線が止まるため本用途では下げる */
	color: var(--scy-ink-3);
	margin: 0 0 8px;
	text-align: left;
}

/* ---- 見出し（SWELL .post_content h2/h3 装飾の打ち消し込み） ---- */
.post_content .scy-soc__title {
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 var(--scy-sp-2);
	font-family: var(--scy-sans);
	/* 24 → 32px。--scy-fs-h2（clamp 28→40px）をそのまま使うとページ名h1(40px)と同寸になり、
	   「ページ名より節見出しの方が大きい／同じ」という現状の破綻がそのまま残るため、
	   このページでは一段下げて h1 40 > h2 32 > h3 22 の3段を作る。トークン自体は改訂しない。 */
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 500; /* P6 */
	line-height: var(--scy-lh-heading);
	letter-spacing: var(--scy-ls-heading);
	color: var(--scy-ink);
}
.post_content .scy-soc__subtitle {
	background: none;
	border: none;
	padding: 0;
	margin: var(--scy-sp-3) 0 8px;
	font-family: var(--scy-sans);
	font-size: var(--scy-fs-h3);
	font-weight: 500;
	line-height: var(--scy-lh-heading);
	letter-spacing: var(--scy-ls-heading);
	color: var(--scy-ink);
}
/* リード直後の節見出しは、リードと地続きに見えないよう1段ぶん余白を空ける
   （--after-lead は節ラベルが付く場合はラベル側に、付かない場合は見出し側に当てる） */
.post_content .scy-soc__title--after-lead { margin-top: var(--scy-sp-6); }
.scy-soc__label--after-lead { margin-top: var(--scy-sp-6); }

.post_content .scy-soc__title::before,
.post_content .scy-soc__title::after,
.post_content .scy-soc__subtitle::before,
.post_content .scy-soc__subtitle::after { content: none; display: none; }

/* ---- 本文 ---- */
.post_content .scy-soc__body {
	margin: 0 0 var(--scy-sp-2);
	max-width: 43em; /* 実測1行43字。単カラム時の上限 */
	font-family: var(--scy-sans);
	font-size: var(--scy-fs-body); /* 16px。P7 */
	line-height: var(--scy-lh-body);
	color: var(--scy-ink);
}
.post_content .scy-soc__body:last-child { margin-bottom: 0; }

/* ---- 実績テーブル（横罫のみ・縦罫なし・ゼブラなし） ----
   実測の根拠: 三井 12px/lh2.08、三菱地所 14px/lh1.57 → 中間の14px/lh1.7 を採る。 */
.post_content .scy-soc__table {
	width: 100%;
	margin: var(--scy-sp-4) 0 0;
	border-collapse: collapse;
	font-family: var(--scy-sans);
	font-size: var(--scy-fs-caption); /* 14px */
	line-height: 1.7;
	color: var(--scy-ink);
}
.post_content .scy-soc__table th,
.post_content .scy-soc__table td {
	padding: 6px var(--scy-sp-3) 6px 0;
	border: none;
	border-bottom: 1px solid var(--scy-line);
	text-align: left;
	vertical-align: top;
	background: none;
}
.post_content .scy-soc__table thead th {
	font-weight: 600;
	color: var(--scy-ink-3);
	border-bottom: 1px solid var(--scy-line);
	white-space: nowrap;
}
.post_content .scy-soc__table tbody th {
	font-weight: 400;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.post_content .scy-soc__table td:last-child,
.post_content .scy-soc__table th:last-child { padding-right: 0; }
.scy-soc__table-col--year { width: 10%; }
.scy-soc__table-col--field { width: 12%; }
.scy-soc__table-col--body { width: 48%; }
.scy-soc__table-col--proof { width: 30%; }
.post_content .scy-soc__note {
	margin: var(--scy-sp-2) 0 0;
	font-family: var(--scy-sans);
	font-size: var(--scy-fs-caption);
	line-height: 1.7;
	color: var(--scy-ink);
	max-width: 43em;
}

/* ---- 本文＋図版の2カラム（三井型の回り込みに相当） ---- */
.scy-soc__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 304px;
	gap: var(--scy-sp-4);
	align-items: start;
}
.scy-soc__cols .scy-soc__body { max-width: none; } /* 実測1行43字。カラム幅が measure を担う */

/* ---- 写真（出来事の記録）: cover・角丸0・枠線なし・パディングなし ---- */
.post_content .scy-soc__fig { margin: 0; }
.scy-soc__fig img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border: none;
	border-radius: 0;
	padding: 0;
	background: var(--scy-surface-2);
}
.scy-soc__fig--portrait img { aspect-ratio: 3 / 4; }
.scy-soc__fig--wide {
	max-width: 880px; /* 元画像670px幅に対し1.31倍。これ以上の拡大は像が崩れる */
	margin-top: var(--scy-sp-4);
}
/* 16:9。元画像は1.47:1のため上下が約17%切れるが、バックボードの文言・登壇者・演台は全て残る
   （検証: _scripts/qa/2026-08-17/redesign/hero_crop_test/fig_311_880x495_16to9.jpg）。 */
.scy-soc__fig--wide img { aspect-ratio: 16 / 9; }
/* 右レール（.scy-soc__cols の2列目）に置く写真。3:2＝元画像1.47:1に近く、切れ量が最小。
   2026-08-17 第2次改訂で 3.11式典写真を全幅図版（880×495px）からこの右レールへ移した。
   本文と縦位置を共有するため、写真ぶんの縦（約440px）がまるごと密度に効く。 */
.scy-soc__fig--rail img { aspect-ratio: 3 / 2; }

/* ---- 自社誌『SUPER CITY』の表紙3点（2026-08-17 歴史ページから移設） ----
   表紙は「読み物」ではなく実在の証拠なので、本文を押しのけない寸法に留める。
   原寸は 640×978 / 615×977 / 551×856px。160px幅＝原寸の約1/4で、拡大は発生しない。 */
.scy-soc__covers {
	display: grid;
	grid-template-columns: repeat(3, 160px);
	gap: var(--scy-sp-3);
	margin: var(--scy-sp-3) 0 var(--scy-sp-2);
}
.post_content .scy-soc__cover { margin: 0; }
.scy-soc__cover img {
	display: block;
	width: 100%;
	height: auto;
	/* 3点は 1:1.528 / 1:1.588 / 1:1.553 と縦横比が微妙に違い、そのまま並べると
	   画像の下端＝キャプションの開始位置が3列でバラバラになる（実測で最大22pxのズレ）。
	   2:3（1:1.5）に揃えると切り取りは最大約6%で、いずれも誌名・号数は欠けない。 */
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: top center;
	border: none;
	border-radius: 0;
	padding: 0;
	background: var(--scy-surface-2);
}
.post_content .scy-soc__cover figcaption {
	margin-top: var(--scy-sp-2);
	font-family: var(--scy-sans);
	font-size: var(--scy-fs-caption);
	line-height: 1.6;
	color: var(--scy-ink);
	text-align: left;
}
.post_content .scy-soc__fig figcaption {
	margin-top: var(--scy-sp-2);
	font-family: var(--scy-sans);
	font-size: var(--scy-fs-caption);
	line-height: 1.6;
	color: var(--scy-ink); /* AA担保（ink-2は4.39:1） */
	text-align: left;
	max-width: 43em;
}

/* ---- 証憑（文書・物体）: 面の上に原寸以下で置く。枠線なし・拡大なし ---- */
/* 3点（捐贈証書／表彰盾／栄誉証書）。栄誉証書は2026-08-17に歴史ページの証書ギャラリーから移設。 */
.scy-soc__proofs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--scy-sp-4) var(--scy-sp-3);
	margin: var(--scy-sp-4) 0 0;
}
.post_content .scy-soc__proof { margin: 0; }
.scy-soc__proof-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;
	padding: var(--scy-sp-2);
	background: var(--scy-surface-2);
}
.scy-soc__sec--alt .scy-soc__proof-frame { background: var(--scy-surface); }
.scy-soc__proof-frame img {
	/* 原寸を超えて拡大しない（素材の実解像度が小さいため、拡大すると像が崩れる） */
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border: none;
	border-radius: 0;
	padding: 0;
}
.post_content .scy-soc__proof figcaption {
	margin-top: var(--scy-sp-2);
	font-family: var(--scy-sans);
	font-size: var(--scy-fs-caption);
	line-height: 1.6;
	color: var(--scy-ink);
	text-align: left;
}

/* ---- フォーカスリング ---- */
.scy-soc__sec a:focus-visible {
	outline: 2px solid var(--scy-ink);
	outline-offset: 4px;
	border-radius: var(--scy-r-card);
}

/* ---- タブレット（〜1080px）: 2カラムの右レールを縮める ---- */
@media (max-width: 1080px) {
	.scy-soc__cols { grid-template-columns: minmax(0, 1fr) 280px; }
	.scy-soc__covers { grid-template-columns: repeat(3, minmax(0, 176px)); }
}

/* ---- SP（〜782px） ---- */
@media (max-width: 782px) {
	.scy-soc__sec { padding: var(--scy-sp-6) var(--swl-pad_container, 4vw); }
	.scy-soc__cols { grid-template-columns: 1fr; gap: var(--scy-sp-4); }
	.scy-soc__fig--portrait { max-width: 320px; }
	/* 表紙3点は 320px 幅の画面でも 3列を維持する（1列にすると縦に1,000px超を食う）。
	   minmax(0,1fr) なので余白ぶんが自動で割り振られ、はみ出さない。 */
	.scy-soc__covers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--scy-sp-2); }
	.scy-soc__proofs { grid-template-columns: 1fr; gap: var(--scy-sp-4); }
	.scy-soc__proof-frame { height: 260px; }

	/* テーブルは横スクロールさせず、行ごとの定義リストとして積む（縦罫なしの方針を維持） */
	.post_content .scy-soc__table,
	.post_content .scy-soc__table tbody,
	.post_content .scy-soc__table tr,
	.post_content .scy-soc__table th,
	.post_content .scy-soc__table td { display: block; width: auto; }
	.post_content .scy-soc__table thead { display: none; }
	.post_content .scy-soc__table tr {
		padding: var(--scy-sp-2) 0;
		border-bottom: 1px solid var(--scy-line);
	}
	.post_content .scy-soc__table th,
	.post_content .scy-soc__table td {
		padding: 0;
		border-bottom: none;
	}
	.post_content .scy-soc__table td::before {
		content: attr(data-label) '：';
		color: var(--scy-ink-3);
	}
	.post_content .scy-soc__table tbody th { color: var(--scy-ink-3); }
}

/* ============================================================================
   【2026-08-18 追記】レイアウト再設計 ─ 右側の死に領域を消す
   ----------------------------------------------------------------------------
   CEO指摘「右寄せのデザインはないわ、、、これって読みやすいのであってデザイン性は
   ないよね。」に対応する差分。内容の順序（自社誌→東日本大震災→実績テーブル→
   嫣然天使基金→四川大地震→文化スポーツ）は CEO 指示により変更していない。
   文章も一字も変えていない。変えたのは幅・列・図版の寸法だけ。

   実測（1512px幅・_scripts/qa/2026-08-18/relayout/summary_before.json）:
       コンテナ実効幅 1416px に対し、実際に使っていた平均幅は 921px。
       走査した本文行の 100% で右に200px以上の空白があり、
       最長の死に帯は 3,744px（＝ページ全高のほぼ全部）だった。

   原因は2つ:
     (a) .scy-soc__inner が --scy-container（1080px）で頭打ちになっていた
     (b) 図版（表紙3点・証憑3点）が固定160px／220pxで、広い面を使っていなかった
   ============================================================================ */

/* ---- (a) 帯の内側コンテナを本文コンテナ幅まで開ける ----
   --scy-bodyw は assets/pages.css が body.scy-wide に対して 1600px を入れる。
   帯は alignfull なので、1512px画面では左右48pxのパディングを引いた 1416px になる。 */
.scy-soc__inner { max-width: var(--scy-bodyw, 1080px); }

/* ---- 本文＋図版の2カラム: 測度を左列に固定し、余りは全て図版に渡す ----
   旧: minmax(0,1fr) 304px … 本文が1,080pxまで伸びて1行67字になってしまう
   新: 43em（＝1行43字）｜ 残り全部 … 測度は守ったまま、写真が右端まで届く */
.scy-soc__cols {
	grid-template-columns: minmax(0, 43em) minmax(0, 1fr);
	gap: var(--scy-sp-8);
}

/* ---- 冒頭セクション（自社メディア）: 誌の表紙を右のレールに立てる ----
   本文の右が空くのは、表紙3点が本文の「下」に置かれていたため。
   順序は保ったまま（読み順は 見出し→本文→表紙）、表紙だけを右列へ送る。
   grid の自動配置に任せず行番号を固定するのは、間に <span> ラベルが挟まるため。 */
.scy-soc__sec--head .scy-soc__inner {
	display: grid;
	grid-template-columns: minmax(0, 43em) minmax(0, 1fr);
	column-gap: var(--scy-sp-8);
	align-content: start;
}
.scy-soc__sec--head .scy-soc__inner > * { grid-column: 1; }
.scy-soc__sec--head .scy-soc__inner > .scy-soc__pghead,
.scy-soc__sec--head .scy-soc__inner > .scy-soc__lead { grid-column: 1 / -1; }
.scy-soc__sec--head .scy-soc__covers {
	grid-column: 2;
	grid-row: 3 / span 5;
	align-self: start;
	/* 固定160px → 列幅に追従。原寸は640×978等なので拡大は起きない */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 0;
}

/* ---- 文化・スポーツ: 「スポーツ」「音楽・芸術」を2列に並べる ----
   小見出し＋短い本文が縦に積まれていたので、面で並べてコンテナ幅を使う。
   markup 側では .scy-soc__inner--pair のクラスを足しただけ（順序・文章は不変）。 */
.scy-soc__inner--pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--scy-sp-8);
	align-content: start;
}
.scy-soc__inner--pair > .scy-soc__label,
.scy-soc__inner--pair > .scy-soc__title { grid-column: 1 / -1; }
.scy-soc__inner--pair > .scy-soc__subtitle:nth-of-type(1) { grid-column: 1; grid-row: 3; }
.scy-soc__inner--pair > .scy-soc__body:nth-of-type(1)     { grid-column: 1; grid-row: 4; }
.scy-soc__inner--pair > .scy-soc__subtitle:nth-of-type(2) { grid-column: 2; grid-row: 3; }
.scy-soc__inner--pair > .scy-soc__body:nth-of-type(2)     { grid-column: 2; grid-row: 4; }
.scy-soc__inner--pair > .scy-soc__body { max-width: none; }

/* ---- (b) 証憑3点: 面を広げる ----
   列幅が160px級から約450pxになったので、面の高さもそれに見合わせる。
   画像側の「原寸を超えて拡大しない」規則（上の .scy-soc__proof-frame img）は
   そのまま効くので、素材が荒れることはない。 */
.scy-soc__proofs { gap: var(--scy-sp-4); }
.scy-soc__proof-frame { height: 320px; }

/* ---- 実績テーブル: 4列の配分を広い面に合わせ直す ---- */
.scy-soc__table-col--year  { width: 6%; }
.scy-soc__table-col--field { width: 9%; }
.scy-soc__table-col--body  { width: 50%; }
.scy-soc__table-col--proof { width: 35%; }

@media (max-width: 1080px) {
	.scy-soc__sec--head .scy-soc__inner,
	.scy-soc__inner--pair { display: block; }
	.scy-soc__sec--head .scy-soc__covers { grid-template-columns: repeat(3, minmax(0, 176px)); margin-top: var(--scy-sp-3); }
	.scy-soc__cols { grid-template-columns: minmax(0, 1fr) 304px; gap: var(--scy-sp-4); }
	.scy-soc__proof-frame { height: 240px; }
}


/* ============================================================
   標番プレートと巻末プレート（2026-08-18 追加）
   ------------------------------------------------------------
   体裁そのものは pg-core.css の共有部品（.scy-pagehead / .scy-mark / .scy-foot /
   .scy-cta）が持つ。ここで足すのは、このページの帯構造に載せるための
   「外側の余白」だけ。中身の寸法・色・字は一切ここで定義しない。
   ============================================================ */
.scy-soc__pghead { margin: 0; }
/* pg-core の .scy-pagehead は下に 48px の余白を持つ。社会貢献はプレート直後に
   リードが来るので、節の内部間隔（24px）に詰める。 */
.post_content .scy-soc__pghead .scy-pagehead { margin-bottom: var(--scy-sp-3); }

.scy-soc__foot { padding: 0; }
.scy-soc__foot .scy-pg { display: block; }
/* .scy-foot 自身が地色（#f5f6f7）を敷くので、節側では敷かない */
.post_content .scy-soc__foot .scy-foot { margin-top: 0; }
.post_content .scy-soc__foot .scy-foot__in {
	max-width: var(--scy-container);
	margin: 0 auto 0 0;
	padding: 0;
}