@charset "UTF-8";
/**
 * カルチャー(Culture)ページ固有スタイル。
 * Purpose(声明+リーフ画像) / Culture(オフィス画像+6つの行動指針) / Symbol Mark / 全幅ビジュアル。
 * 共通トークン・ヘッダー・フッター・見出しはcommon.css。
 *
 * 設計はFigmaのPC 1440 / SP 390基準。
 * リーフ画像が画面端へブリードし本文と一体で動くため、ページ全体をvwスケール(--u-pc)で
 * 組む(1440で設計px一致、以下は相似縮小)。Purposeの画像は.culture基準の絶対配置で設計座標に置く。
 * Cultureの画像はPCのみ2カラムグリッドの左をsticky固定=右の行動指針リストだけがスクロールする。
 * SP(≤768)は画像をフローへ戻し1カラムに積む。
 */

.culture {
	--u: var(--u-pc);
	/* アクセント(page-heading半円・行動指針の●)の縦グラデ。設計SVGのpaint0〜6と同値。 */
	--grad-orange: linear-gradient(180deg, #f89941 0%, #ed6a18 100%);
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
}

/**
 * 共通見出しもページ本文と同じvwスケールで動かし、横位置のズレを防ぐ。
 */
.culture .page-heading,
.culture .section-heading {
	--u: var(--u-pc);
}

.culture .page-heading--culture {
	--accent-grad: var(--grad-orange);
}

.cul-defs {
	position: absolute;
	width: 0;
	height: 0;
}

/**
 * SP専用の改行トグル(page-culture.phpの<br data-sp>)。SP(≤768px)で表示へ反転する。
 * work/environmentと同じ方式。
 */
.culture br[data-sp] {
	display: none;
}

/**
 * Purposeのリーフ画像(右ブリード)。.culture基準の絶対配置で設計の矩形位置に置き、
 * 正規化clip-pathで葉型に切り抜く。
 */
.cul-purpose__media {
	position: absolute;
	top: calc(385.082 * var(--u));
	left: calc(544.284 * var(--u));
	width: calc(1218.37 * var(--u));
	aspect-ratio: 1218.37 / 792.75;
	clip-path: url(#cul-leaf-purpose);
}

/**
 * Cultureのオフィス画像(左ブリード)。PCは2カラム左をsticky固定し、右のリストだけをスクロールさせる。
 * align-self:startで画像高を保ちsticky可動域を残す。topは画像高の半分だけ上へ引いて中央固定+ヘッダー下限クランプ。
 */
.cul-culture__media {
	position: sticky;
	top: max(calc(var(--header-h) + 16 * var(--u)), calc(50vh - 622.194 * var(--u) / 2));
	align-self: start;
	margin-left: calc(-181.275 * var(--u));
	width: calc(933.844 * var(--u));
	aspect-ratio: 933.844 / 622.194;
	clip-path: url(#cul-leaf-culture);
}

.cul-purpose__media img,
.cul-culture__media img,
.cul-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * Cultureの2枚は同じ枠に重ねて置き、不透明度で入れ替える。
 * 枠の高さはaspect-ratioが決めるため、absoluteにしても潰れない。
 */
.cul-culture__photo {
	position: absolute;
	inset: 0;
	transition: opacity 0.6s ease;
}

.cul-culture__photo--alt {
	opacity: 0;
}

/* 入れ替え後。JSが付かない環境(縦積み/JS無効)では1枚目のまま。 */
.cul-culture__media.is-alt .cul-culture__photo {
	opacity: 0;
}

.cul-culture__media.is-alt .cul-culture__photo--alt {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.cul-culture__photo {
		transition: none;
	}
}

/**
 * Purpose(声明+右ブリードのリーフ画像)。
 */
.cul-purpose {
	/* 設計の英題はy=499。page-heading地端(区切り線y=353+1px)との差145がmargin。 */
	margin-top: calc(145 * var(--u));
}

.cul-purpose__body {
	/* 設計の声明はy=692。英題の行box(43.2)の地端542.2との差149.8がmargin。 */
	margin-top: calc(149.8 * var(--u));
	padding-left: calc(145 * var(--u));
	/* 右のリーフ画像(絶対配置・下端≈y1176)ぶんの縦スペースを確保する。 */
	min-height: calc(484 * var(--u));
}

.cul-purpose__statement {
	margin: 0;
	max-width: calc(450 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(32 * var(--u)));
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.cul-purpose__lead {
	/* 設計のリードはy=802。声明の行box(44.8×2行=89.6)の地端781.6との差20.4がmargin。 */
	margin: calc(20.4 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(18 * var(--u)));
	line-height: 1.6;
}

/**
 * Culture(左ブリードのオフィス画像+6つの行動指針)。
 */
.cul-culture {
	/* 設計の英題はy=1189。Purpose(声明y=692+min-height484)の地端1176との差13がmargin。 */
	margin-top: calc(13 * var(--u));
}

.cul-culture__body {
	/* 設計の指針1つめはy=1348。英題の行box(43.2)の地端1232.2との差115.8がmargin。 */
	margin-top: calc(115.8 * var(--u));
	/* 左=sticky画像 / 右=スクロールするリストの2カラム(左815で画像の右端≈752を包む)。 */
	display: grid;
	grid-template-columns: calc(815 * var(--u)) 1fr;
	padding-right: calc(60 * var(--u));
}

.cul-list {
	display: flex;
	flex-direction: column;
	max-width: calc(452 * var(--u));
}

.cul-item {
	/* 設計は見出しベースライン間203pxの等ピッチ。見出しが2行の項目も等ピッチに収めるため
	   項目高さを固定する(2行見出し+2行本文=約163<203)。 */
	min-height: calc(203 * var(--u));
}

.cul-item:nth-child(4) {
	/* 設計はitem4の前だけ余白が22px広い(他は等ピッチ)。 */
	margin-top: calc(22 * var(--u));
}

.cul-item__title {
	position: relative;
	margin: 0;
	padding-left: calc(32 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(32 * var(--u)));
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.cul-item__title::before {
	content: "";
	position: absolute;
	left: 0;
	/* 見出しは2行折返しがありtop:50%が使えない。設計の●は中心が見出し天端の22.5下
	   (例: 見出しy=1348に対し●y=1359+半径11.5)なので、その実測値を直接指定する。 */
	top: calc(22.5 * var(--u));
	width: calc(23 * var(--u));
	height: calc(23 * var(--u));
	border-radius: 50%;
	background: var(--grad-orange);
	transform: translateY(-50%);
}

.cul-item__desc {
	/* 設計の本文は見出しy=1348に対しy=1413。見出しの行box(44.8)の地端との差20.2がmargin。 */
	margin: calc(20.2 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(18 * var(--u)));
	line-height: 1.6;
}

/**
 * Symbol Mark(中央の"/"マーク+中央寄せの説明文)。
 */
.cul-symbol {
	/* 設計の英題はy=2650。Culture(指針リスト:203×6+item4の22)の地端2588との差62がmargin。 */
	margin-top: calc(62 * var(--u));
}

.cul-symbol__mark {
	display: flex;
	justify-content: center;
	/* 設計のマークはy=2844。英題の行box(43.2)の地端2693.2との差150.8がmargin。 */
	margin-top: calc(150.8 * var(--u));
}

.cul-symbol__mark img {
	width: calc(239 * var(--u));
	height: auto;
}

.cul-symbol__desc {
	/* 設計の説明文はy=3215。マーク(296高)の地端3140との差75がmargin。 */
	margin: calc(75 * var(--u)) auto 0;
	max-width: calc(785 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
	text-align: center;
}

/**
 * 全幅ビジュアル(フッター直前・コンテナ幅ブリード)。
 */
.cul-visual {
	/* 設計のビジュアルはy=3399。説明文の行box(32×2行=64)の地端3279との差120がmargin。 */
	margin-top: calc(120 * var(--u));
	width: 100%;
	aspect-ratio: 1440 / 675;
}

/**
 * SP(Figma:390基準・純vw)。リーフ画像はフローへ戻し1カラムに積む。
 */
@media (max-width: 768px) {
	.culture {
		--u: var(--u-sp);
	}

	.culture .page-heading,
	.culture .section-heading {
		--u: var(--u-sp);
	}

	.culture br[data-sp] {
		display: inline;
	}

	/**
	 * Purpose:声明→リード→リーフ画像(右ブリード)を縦積み。
	 */
	.cul-purpose {
		/* 設計SPの英題はy=279。page-heading地端(区切り線y=199+1px)との差78.9がmargin。 */
		margin-top: calc(78.9 * var(--u));
	}

	.cul-purpose__body {
		/* 設計SPの声明はy=375。英題の行box(36)の地端315との差60がmargin。 */
		margin-top: calc(60 * var(--u));
		padding-left: calc(25 * var(--u));
		min-height: 0;
	}

	.cul-purpose__statement {
		max-width: none;
		font-weight: 700;
		font-size: max(1.2rem, calc(22 * var(--u)));
		line-height: 1.5;
		letter-spacing: 0;
	}

	.cul-purpose__lead {
		/* 設計SPのリードはy=461。声明の行box(33×2行=66)の地端441との差20がmargin。 */
		margin-top: calc(20 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: 1.6;
	}

	/**
	 * 画像は左端へブリード(bodyのpadding-left25を打ち消す)。
	 * 設計SPの葉の見える上端はy=525(リード地端509の16下)。clip-pathの最上点は画像高の
	 * 7.68%下なので、画像boxの天端は525-387.736*0.0768=495.2=リード地端の13.78上に置く。
	 */
	.cul-purpose__media {
		position: static;
		width: calc(595.906 * var(--u));
		margin: calc(-13.78 * var(--u)) 0 0 calc(-73.227 * var(--u));
		aspect-ratio: 595.906 / 387.736;
	}

	/**
	 * Culture:見出し→オフィス画像(左ブリード)→行動指針リスト。
	 */
	.cul-culture {
		/* 設計SPの英題はy=910。Purpose(画像box地端≈882.9)との差27.04がmargin。 */
		margin-top: calc(27.04 * var(--u));
	}

	.cul-culture__body {
		display: block;
		margin-top: calc(-3 * var(--u));
		padding-right: 0;
	}

	/* 写真2枚をabsoluteで重ねる基準を枠に残す(staticだと.culture基準へ逃げて葉が空になる)。topはPCの値を打ち消す。 */
	.cul-culture__media {
		position: relative;
		top: auto;
		width: calc(459.371 * var(--u));
		/* 設計SPの葉はy=986(英題の行box36の地端946の40下)。この葉のclip-pathは最上点が
		   画像boxの天端(0%)なので、body側の-3を差し引いた43がmargin。 */
		margin: calc(43 * var(--u)) 0 0 calc(-89.172 * var(--u));
		aspect-ratio: 459.371 / 306.066;
	}

	.cul-list {
		/* 設計SPの指針は1つめがy=1330.74・以降40間隔。葉の画像box地端≈1292との差38.7がmargin。 */
		gap: calc(40 * var(--u));
		max-width: none;
		margin-top: calc(38.7 * var(--u));
		/* 右は13:設計の行動指針見出し(1行)が右端近くまで伸びるため。 */
		padding: 0 calc(13 * var(--u)) 0 calc(25 * var(--u));
	}

	.cul-item {
		min-height: 0;
	}

	.cul-item:nth-child(4) {
		margin-top: 0;
	}

	.cul-item__title {
		padding-left: calc(22 * var(--u));
		font-weight: 700;
		font-size: max(1.2rem, calc(22 * var(--u)));
		line-height: 1.5;
		letter-spacing: 0;
	}

	.cul-item__title::before {
		/* 設計SPの●は中心が見出し天端の18.5下(例: 見出しy=1330.74に対し●y=1341.74+半径7.5)。 */
		top: calc(18.5 * var(--u));
		width: calc(15 * var(--u));
		height: calc(15 * var(--u));
	}

	.cul-item__desc {
		margin-top: calc(20 * var(--u));
		max-width: calc(340 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: 2;
	}

	/**
	 * Symbol Mark:マークを縮小し説明文を中央寄せ。
	 */
	.cul-symbol {
		/* 設計SPの英題はy=2349。指針リストの地端2268.74との差80.26がmargin。 */
		margin-top: calc(80.26 * var(--u));
	}

	.cul-symbol__mark {
		/* 設計SPのマークはy=2445。英題の行box(36)の地端2385との差60がmargin。 */
		margin-top: calc(60 * var(--u));
	}

	.cul-symbol__mark img {
		width: calc(146 * var(--u));
	}

	.cul-symbol__desc {
		/* 設計SPの説明文はy=2665で幅340・7行(=210)。マークは設計146×180だがSVG実比(239:296)では
		   180.82になるため、その地端2625.82との差39.18がmargin。 */
		margin-top: calc(39.18 * var(--u));
		max-width: calc(340 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: 2;
		letter-spacing: 0;
	}

	.cul-visual {
		/* 設計SPのビジュアルはy=2955。説明文(30×7行=210)の地端2875との差80がmargin。 */
		margin-top: calc(80 * var(--u));
		aspect-ratio: 390 / 183;
	}
}