/* CSR活動ページ（ヒルトン東京ベイ・クリスマス・トレイン）。
   メイン部分の背景は #f4f5f0。導入は写真＋本文の2カラム、会場写真・活動写真は横並び。 */

/* メイン部分（ヘッダーとパンくずの間）の背景。 */
.csr-main { background: #f4f5f0; }
/* タイトル帯の sticky 用の帯（既定は白）を CSR の地色に合わせる。 */
.csr-main .title-band::before { background: #f4f5f0; }
/* ページ内ナビ（トップ／参加企業／活動報告）は共通の .title-band-nav の構造・CSS を流用する。 */

/* 導入の装飾フレーム（cream）。上=csr_area_bg、下=csr_area_bg3、地色 #f4f0e8。 */
.csr-main .csr-frame {
	max-width: 960px;
	margin: 0 auto;
	padding: 48px 56px 60px;
	box-sizing: border-box;
	/* 飾り画像（960px幅）は常に枠幅へ合わせる（アスペクト維持）。下地は十分高いので bottom 固定で
	   側罫線が枠全体に届く。これでタブレット等 960 未満でも左右が切れない。 */
	background:
		url("../images/csr/csr_area_bg.jpg") top center / 100% auto no-repeat,
		url("../images/csr/csr_area_bg3.jpg") bottom center / 100% auto no-repeat;
	background-color: #f4f0e8;
}
/* タイトルはロゴ画像（csr_title.gif）。テキストは隠して画像で見せる。区切り線は出さない。 */
.csr-main .csr-frame .csr-title-logo {
	max-width: 550px;
	margin: 4px auto 0;
	aspect-ratio: 550 / 128;
	background: url("../images/csr/csr_title.gif") center / contain no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	padding: 0;
}
.csr-main .csr-frame .csr-title-logo::before { content: none; }
.csr-main .csr-frame .csr-lead { margin-top: 12px; }
.csr-main .csr-frame .csr-intro { margin-top: 28px; }

/* 導入のタグライン（旧 csr_title2 のテキスト復元）。中央寄せの見出し風リード。 */
.csr-main .csr-lead {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
	font-family: var(--wp--custom--brand-heading);
	font-size: clamp(13px, 1.4vw, 16px);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.08em;
}

/* 導入: 写真（左）＋本文3段（右）。SP は縦積み。 */
.csr-main .csr-intro {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	margin-top: 32px;
}
.csr-main .csr-intro__media { flex: 0 0 38%; margin: 0; }
.csr-main .csr-intro__img { margin: 0; }
.csr-main .csr-intro__img img { width: 100%; height: auto; }
.csr-main .csr-intro__text { flex: 1 1 0; min-width: 0; }

/* 参加企業の会場写真4点。横並び（PC4枚）→ SP は2列。 */
.csr-main .csr-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}
.csr-main .csr-thumbs .csr-thumb { flex: 1 1 0; min-width: 0; margin: 0; }
.csr-main .csr-thumbs .csr-thumb img { width: 100%; height: auto; }

/* 活動報告の写真2点（キャプション付き）。背景 #e4e0d4 のパネル。横並び→ SP 縦積み。 */
.csr-main .csr-photos {
	display: flex;
	gap: 24px;
	justify-content: center;
	align-items: flex-start;
	padding: 32px;
	background: #e4e0d4;
}
.csr-main .csr-photos .csr-photo { flex: 0 1 320px; margin: 0; }
.csr-main .csr-photos .csr-photo img { width: 100%; height: auto; }
.csr-main .csr-photos figcaption {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--warm-grey, #6b6b6b);
	text-align: left;
}

/* 小見出し（地元の子どもたちへのサポート）。 */
.csr-main .csr-subtitle { font-weight: 700; margin-bottom: 4px; }

/* ボタンは中央寄せ。 */
.csr-main .csr-btn { justify-content: center; }

/* 協賛企業一覧。項目間にすこし間隔を取る。読みやすさのため広い画面では2〜3カラム。 */
.csr-main .csr-companies { max-width: 1000px; margin-inline: auto; columns: 3; column-gap: 40px; }
.csr-main .csr-companies li { margin: 0 0 0.7em; line-height: 1.7; break-inside: avoid; }
@media (max-width: 900px) { .csr-main .csr-companies { columns: 2; } }
@media (max-width: 560px) { .csr-main .csr-companies { columns: 1; } }

@media (max-width: 700px) {
	/* フレームの飾り画像（960px）は SP では枠幅に合わせる。下地(csr_area_bg3)は枠いっぱいに
	   伸ばして側罫線を途切れさせず、上飾り(csr_area_bg)は横幅 100% で上枠・リボンを見せる。 */
	.csr-main .csr-frame {
		padding: 28px 18px 40px;
		background:
			url("../images/csr/csr_area_bg.jpg") top center / 100% auto no-repeat,
			url("../images/csr/csr_area_bg3.jpg") center / 100% 100% no-repeat;
		background-color: #f4f0e8;
	}
	.csr-main .csr-frame .csr-title-logo { max-width: 78%; }
	.csr-main .csr-intro { flex-direction: column; gap: 20px; }
	.csr-main .csr-intro__media { flex-basis: auto; width: 100%; max-width: 400px; margin: 0 auto; }
	.csr-main .csr-thumbs .csr-thumb { flex: 1 1 calc(50% - 8px); }
	.csr-main .csr-photos { flex-direction: column; align-items: center; }
	.csr-main .csr-photos .csr-photo { flex-basis: auto; width: 100%; max-width: 360px; }
}