.brand {
	position: relative;
	width: 100%;
	min-height: 900px;
	overflow: hidden;
	background-color: var(--c-white);
	color: var(--c-black);
	padding: 160px 24px 160px 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.brand__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.brand__bg picture {
	display: block;
	width: 100%;
	height: 100%;
}

.brand__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Figma: 背景画像は右寄り・やや上のトリミング（人物が左寄りに大きく見える） */
	object-position: 65% 43%;
}

/* PC: Figma の配置（2400×1650 を x:-742, y:-256 に敷く）を再現する拡大トリミング。
   ※現在の背景画像（brand_bg_neutral_02 / 1600×1100）に合わせたチューニング値。 */
@media (min-width: 1024px) {
	.brand__bg img {
		transform: scale(1.45);
		transform-origin: 65% 43%;
	}
}

/* パララックス時に背景画像が translateY で端に隙間が出ないよう、
   PC のみ高さを上下に拡張しておく（振幅 80px の余裕を含む）。
   data-parallax は JS が PC のみ動作させるので SP は影響なし。 */
@media (min-width: 1024px) {
	.js-reveal-ready .brand__bg [data-parallax] {
		height: calc(100% + 200px);
		top: -100px;
		position: relative;
		display: block;
	}
}

.brand__inner {
	position: relative;
	z-index: 1;
	width: 496px;
	/* Figma: テキストブロックはセクション中央より 114px 上に配置（y=175〜） */
	margin-bottom: 228px;
}

.brand__title {
	font-family: var(--ff-jp);
	font-weight: var(--fw-regular);
	font-size: 40px;
	letter-spacing: 2.4px;
	line-height: 58px;
	color: var(--c-black);
	white-space: nowrap;
}

.brand__body {
	font-family: var(--ff-jp);
	font-size: 14px;
	letter-spacing: 0.56px;
	line-height: 26px;
	color: var(--c-black);
	margin-top: 50px;
}

.brand__body p {
	margin: 0;
}

.brand__body p + p {
	margin-top: 26px;
}

@media (max-width: 1023px) {
	.brand {
		min-height: 716px;
		padding: 117px 32px 118px 61px;
		align-items: flex-start;
	}

	.brand__bg::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.brand__inner {
		width: 100%;
	}

	.brand__title {
		font-size: 32px;
		letter-spacing: 1.92px;
		line-height: 32px;
	}

	.brand__body {
		font-size: 12px;
		letter-spacing: 0.48px;
		line-height: 22px;
		margin-top: 55px;
	}

	.brand__body p + p {
		margin-top: 23px;
	}
}

/* ===== 反転モード（PC/SP独立） =====
   デフォルトは PC/SP とも黒文字。invert ON で白文字に切替。 */

/* PC 反転 */
@media (min-width: 1024px) {
	.brand--invert-pc,
	.brand--invert-pc .brand__title,
	.brand--invert-pc .brand__body {
		color: var(--c-white);
	}
}

/* SP 反転 */
@media (max-width: 1023px) {
	.brand--invert-sp,
	.brand--invert-sp .brand__title,
	.brand--invert-sp .brand__body {
		color: var(--c-white);
	}
}