@charset "UTF-8";
/**
 * 働き方・環境ページ(福利厚生 / スキルタグ / データで見るADDIX)。
 *
 * 固定rem(--u-fix=1px相当)で1440カンプに一致。中間幅はカラム落とし・SPはvw復帰。
 * 図(ドーナツ・リング・棒・円グラフ・数値アイコン)は設計SVGから切り出して等倍配置。
 */

.environment {
	--u: var(--u-fix);
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
}

.environment .page-heading--environment {
	--accent-grad: linear-gradient(180deg, #6ee24e 0%, #12ae0a 100%);
}

/**
 * PC(≥1025)のみ:リード列を広く取り、"Employee Benefits"等が折返さないようにする。
 * 見出しENは設計どおり左端(短線x60/EN x146)。
 */
@media (min-width: 1025px) {
	.environment .section-heading {
		grid-template-columns: calc(544 * var(--u)) 1fr;
	}
	/* 共通は英題の7.5下(他ページの設計)だが、本ページの設計はリード文y=453=英題yと同一。 */
	.environment .section-heading__lead {
		padding-top: 0;
	}
}

/**
 * セクション縦リズム。
 */

/* 設計の区切り線はy=353(+1px)=354。§1見出しはy=453。 */
.env-benefits {
	margin-top: calc(99 * var(--u));
}

/* 設計の§2見出しはy=2001(§1グリッド地端1581の420下)。 */
.env-skill {
	position: relative;
	isolation: isolate;
	/* スキルタグ節の共有トークン(黒帯::before・タグ雲・アニメが参照する単一ソース)。SPで一部上書き。 */
	--sk-fade: 120;          /* 反転黒帯・タグ雲の上下フェード帯の高さ(SPは60)。 */
	--sk-top: -270;          /* 黒帯/タグ雲の上端=設計スキル節上端1731(=見出しy2001の270上)。 */
	--sk-h: 1074;            /* 黒帯/タグ雲の高さ=設計スキル節高。 */
	--sk-invert-dur: 0.55s;  /* 反転の色トランジション。 */
	--sk-marquee-dur: 32s;   /* マーキー1周の時間。 */
	margin-top: calc(420 * var(--u));
	min-height: calc(600 * var(--u));
}

/**
 * スクロール反転(黒背景・白文字)。
 *
 * スキルタグ節がビューポート中央帯に入ると .is-inverted が付与される(inc/assets.php + environment.js)。
 * 黒帯は上下120px(SP60px)をグラデでページ白へ馴染ませる。文字は白へトランジション。
 */
.env-skill::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	top: calc(var(--sk-top) * var(--u));   /* cloudと同じ上端。フェードはタグの無い余白に落ちる。 */
	width: 100vw;   /* フルブリード。縦スクロールバー幅ぶんの微小横あふれは親side(overflow-x)で吸収する前提。 */
	height: calc(var(--sk-h) * var(--u));
	transform: translateX(-50%);
	background: linear-gradient(to bottom, transparent, #000 calc(var(--sk-fade) * var(--u)), #000 calc(100% - var(--sk-fade) * var(--u)), transparent);
	opacity: 0;
	transition: opacity var(--sk-invert-dur) ease;
	pointer-events: none;
}

.env-skill.is-inverted::before {
	opacity: 1;
}

/* コンテンツ(見出し/リード)は黒帯より前面。タグ雲(z-index:1)の前面へ。
   タグ雲のz-index/位置は本体定義(.env-skill-cloud)に集約。 */
.env-skill .section-heading,
.env-skill__lead {
	position: relative;
	z-index: 2;
}

/* 反転時の白文字(既定色→白へトランジション)。 */
.env-skill .section-heading__en,
.env-skill .section-heading__ja,
.env-skill__lead,
.env-skill-tag__tag,
.env-skill-tag__role {
	transition: color var(--sk-invert-dur) ease;
}

.env-skill .section-heading__en::before {
	transition: background-color var(--sk-invert-dur) ease;
}

.env-skill.is-inverted .section-heading__en,
.env-skill.is-inverted .section-heading__ja,
.env-skill.is-inverted .env-skill__lead,
.env-skill.is-inverted .env-skill-tag__tag,
.env-skill.is-inverted .env-skill-tag__role {
	color: #fff;
}

.env-skill.is-inverted .section-heading__en::before {
	background: #fff;
}

/* 設計の§3見出しはy=2955(§2の地端2601の354下)。 */
.env-nums {
	margin-top: calc(354 * var(--u));
	margin-bottom: calc(150 * var(--u));
}

/**
 * §1 福利厚生。
 */

/* 設計は行の地端(917)→次行(997)が80。グリッド上端635は和文サブの行box地端534.8の100.2下。 */
.env-benefit-grid {
	display: grid;
	grid-template-columns: repeat(4, calc(225 * var(--u)));
	column-gap: calc(40 * var(--u));
	row-gap: calc(80 * var(--u));
	justify-content: center;
	margin-top: calc(100.2 * var(--u));
}

.env-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.env-benefit__icon {
	width: calc(70 * var(--u));
	height: calc(70 * var(--u));
}

.env-benefit__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 設計はアイコン地端705の15下(y=720)。行box32(=16×200%)。 */
.env-benefit__title {
	margin: calc(15 * var(--u)) 0 0;
	font-size: max(1.2rem, calc(16 * var(--u)));
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.02em;
	text-align: center;
	/* 複数行タイトルはZWSP(設計の改行位置)でのみ折返す。 */
	word-break: keep-all;
}

/* 設計はタイトルの行box地端752の15下(y=767)。 */
.env-benefit__desc {
	margin: calc(15 * var(--u)) 0 0;
	align-self: stretch;
	font-size: max(1.2rem, calc(15 * var(--u)));
	font-weight: 500;
	line-height: 2;
	text-align: justify;
}

/**
 * §2 スキルタグ(右→左 無限ループ・マーキー)。
 *
 * 左に見出し+リード(固定)、その右〜背後をタグ散布が右から左へ流動。設計散布は画面幅より広く、
 * 右端のタグが流れ込む。上下120pxはグラデでフェード(タグの無い余白に落ちる)、左端は見出し/
 * リード帯の背後へ吸い込むようマスクで消す。右端はビューポート幅で見切れて流入。
 */

/* 設計は和文サブの行box地端2082.8の47.2下(リードy=2130)。 */
.env-skill__lead {
	position: relative;
	z-index: 2;
	max-width: calc(462 * var(--u));
	margin-top: calc(47.2 * var(--u));
	padding-left: calc(149 * var(--u));
	font-family: var(--ff-jp);
	font-size: max(1.2rem, calc(16 * var(--u)));
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.02em;
	text-align: justify;
}

.env-skill__lead p {
	margin: 0;
}

/* リードの文単位改行はSPのみ(設計:PCは各段落を流し、SPは文ごとに改行)。 */
.env-skill__lead br[data-sp] {
	display: none;
}

/**
 * 流動クラウドのビューポート。
 *
 * 高さは設計スキル節(1074)に一致=上下120pxフェードはタグの無い余白に落ちる。
 * cloud上端top=設計y1731。
 */
.env-skill-cloud {
	--sk-origin: 1731;   /* 設計スキル節の上端y。タグtopの基準。 */
	--sk-period: 1390;   /* 1セット幅=散布の水平周期(設計 x=439..1829 / SP -120..1270)。 */
	--sk-mask-left: 559; /* 設計のタグ容器左端。ここより左のタグは見切れる(見出し/リード帯との間に余白)。 */
	/* 左端見切れ(x559)+上下フェード(--sk-fade)の合成マスク。webkit/標準で同一値を参照。 */
	--sk-mask:
		linear-gradient(to right, transparent, transparent calc((var(--sk-mask-left) - 4) * var(--u)), #000 calc(var(--sk-mask-left) * var(--u))),
		linear-gradient(to bottom, transparent, #000 calc(var(--sk-fade) * var(--u)), #000 calc(100% - var(--sk-fade) * var(--u)), transparent);
	z-index: 1;
	position: absolute;
	left: 0;
	top: calc(var(--sk-top) * var(--u));
	width: 100%;
	height: calc(var(--sk-h) * var(--u));
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: var(--sk-mask);
	-webkit-mask-composite: source-in;   /* = 標準の intersect(左マスク∩上下フェード)。 */
	mask-image: var(--sk-mask);
	mask-composite: intersect;
}

/* 同一散布を2セット横並びにし、1セット幅(--sk-period)ぶん左へ流して継ぎ目なくループ。 */
.env-skill-track {
	display: flex;
	width: max-content;
	height: 100%;
	will-change: transform;
	animation: env-skill-marquee var(--sk-marquee-dur) linear infinite;
}

.env-skill-set {
	position: relative;
	flex: 0 0 auto;
	width: calc(var(--sk-period) * var(--u));
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

@keyframes env-skill-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(var(--sk-period) * var(--u) * -1));
	}
}

/* motion配慮: マーキー停止 + 反転の色遷移も瞬時に(反転自体は残す)。 */
@media (prefers-reduced-motion: reduce) {
	.env-skill-track {
		animation: none;
	}
	.env-skill::before,
	.env-skill .section-heading__en,
	.env-skill .section-heading__ja,
	.env-skill__lead,
	.env-skill-tag__tag,
	.env-skill-tag__role,
	.env-skill .section-heading__en::before {
		transition: none;
	}
}

/**
 * 散布タグ1件。
 *
 * 設計のタグは行間AUTO(=Noto Sans JPの自然行間。ascent1.16em+descent0.29em)。
 * CSSのline-height:normalが同一メトリクスを使うので、--y(ベースライン)からascent
 * 1.16emだけ戻せば行box上端が設計に一致する。
 */
.env-skill-tag {
	position: absolute;
	left: calc(var(--x) * var(--u));
	/* --yはタグ#のベースライン。em(=タグfont-size)基準で行ボックス上端へ補正し設計に一致。 */
	top: calc((var(--y) - var(--sk-origin)) * var(--u));
	white-space: nowrap;
	transform: translateY(-1.16em);
	font-family: var(--ff-jp);
	font-weight: 500;
	line-height: normal;
}

.env-skill-tag__tag {
	display: block;
	line-height: normal;
}

.env-skill-tag__role {
	display: block;
	line-height: normal;
}

/* tierのfont-sizeはli自身に置く(translateYのemがタグ実サイズに追従する)。
   職種名のmargin-topは、設計の職種名y − タグの行box地端(y + font-size×1.45)の実測差。
   設計は手置きでtierごとに違う(l=-2.38 / m=+1.3 / s=+0.85)。 */
.env-skill-tag--l {
	font-size: max(1.2rem, calc(50 * var(--u)));
}
.env-skill-tag--m {
	font-size: max(1.2rem, calc(36.59 * var(--u)));
}
.env-skill-tag--s {
	font-size: max(1.2rem, calc(23.58 * var(--u)));
}
.env-skill-tag--l .env-skill-tag__role {
	margin-top: calc(-2.38 * var(--u));
	font-size: max(1.2rem, calc(25 * var(--u)));
}
.env-skill-tag--m .env-skill-tag__role {
	margin-top: calc(1.3 * var(--u));
	font-size: max(1.2rem, calc(20.64 * var(--u)));
}
.env-skill-tag--s .env-skill-tag__role {
	margin-top: calc(0.85 * var(--u));
	font-size: max(1.2rem, calc(13.3 * var(--u)));
}

/**
 * §3 データで見るADDIX。
 *
 * 2カラムのマソンリー(左右独立高さ)。設計はカード503 + gap30 = 1036(x202..1238)。
 * 枠線1pxはstrokeAlign:INSIDE=border-boxと同義なので、boundsの503がそのままCSS幅。
 */
.env-nums__grid {
	display: grid;
	grid-template-columns: repeat(2, calc(503 * var(--u)));
	gap: calc(30 * var(--u));
	justify-content: center;
	align-items: start;
	/* 設計のカード上端3137は和文サブの行box地端3036.8の100.2下。 */
	margin-top: calc(100.2 * var(--u));
}

.env-nums__col {
	display: flex;
	flex-direction: column;
	gap: calc(30 * var(--u));
}

/* 設計のpaddingは上40・右48・下39・左48(strokeAlign:INSIDE)。枠線1pxはその内側に描かれる
   =CSSのborder-boxではborder1px+paddingが設計padding。よって39/47/38/47。 */
.env-stat {
	min-height: calc(var(--card-h, 0) * var(--u));
	border: 1px solid var(--c-black);
	border-radius: calc(20 * var(--u));
	padding: calc(39 * var(--u)) calc(47 * var(--u)) calc(38 * var(--u));
	display: flex;
	flex-direction: column;
}

.env-stat__title {
	margin: 0;
	font-size: max(1.2rem, calc(22 * var(--u)));
	font-weight: 600;
	line-height: 1.5;
}

/* 設計はタイトルの行box地端3210の15下(y=3225)。 */
.env-stat__lead {
	margin: calc(15 * var(--u)) 0 0;
	font-size: max(1.2rem, calc(16 * var(--u)));
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.02em;
	text-align: justify;
}

.env-stat__body {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: calc(20 * var(--u));
}

.env-stat__fig {
	width: calc(var(--fw) * var(--u));
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* 設計の注記は図の直下(カード下端ではない)。図→注記の間隔はカードごとに10/20/25と異なり、
   カード高が中身より高いぶんは下に余白として残る(設計のautoLayoutがtop揃え)。
   margin:autoで下端に貼ると、余白のあるカード(右列)で7〜10px下がるため--note-gapで置く。 */
.env-stat__note {
	margin: calc(var(--note-gap, 10) * var(--u)) 0 0;
	font-size: max(1.2rem, calc(14 * var(--u)));
	font-weight: 500;
	line-height: 1.5;
	text-align: right;
}

/**
 * 中間幅(769〜1024px): 固定remのまま畳む。
 */
@media (min-width: 769px) and (max-width: 1024px) {
	.env-benefit-grid {
		grid-template-columns: repeat(2, calc(225 * var(--u)));
		row-gap: calc(70 * var(--u));
	}
	.env-nums__grid {
		grid-template-columns: 1fr;
		max-width: calc(502 * var(--u));
		margin-inline: auto;
	}
	.env-stat {
		min-height: 0;
		width: auto;
	}
	/* スキルタグは流動をやめ、見出し下に折返し表示(他ページの中間幅方針に準拠)。 */
	.env-skill {
		min-height: 0;
	}
	/* 中間幅はタグが縦に伸びるので、黒帯は節全体を覆う(フェードは±--sk-fadeの余白に落とす)。 */
	.env-skill::before {
		top: calc(var(--sk-fade) * -1 * var(--u));
		height: calc(100% + var(--sk-fade) * 2 * var(--u));
	}
	.env-skill-cloud {
		position: static;
		width: auto;
		height: auto;
		margin-top: calc(40 * var(--u));
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.env-skill-track {
		display: block;
		width: auto;
		animation: none;
	}
	/* 重複セットは中間幅では不要(折返し1組のみ)。 */
	.env-skill-set + .env-skill-set {
		display: none;
	}
	.env-skill-set {
		position: static;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: calc(24 * var(--u)) calc(40 * var(--u));
		width: auto;
		height: auto;
		padding-left: calc(149 * var(--u));
	}
	.env-skill-tag {
		position: static;
		transform: none;
	}
	/* 折返し表示では散布用のtier別オフセットは使わない(本体と同じ詳細度で打ち消す)。 */
	.env-skill-tag--l .env-skill-tag__role,
	.env-skill-tag--m .env-skill-tag__role,
	.env-skill-tag--s .env-skill-tag__role {
		margin-top: calc(4 * var(--u));
	}
}

/**
 * SP(≤768px): vw復帰・縦積み(390カンプ)。
 */
@media (max-width: 768px) {
	.environment {
		container-type: inline-size;
		--u: 0.25641cqi;
	}
	/* §1/§3は親(.env-benefits/.env-nums)がpadding-inlineを持つため、section-heading自身の左右padを外して二重インデントを解消。 */
	.env-benefits .section-heading,
	.env-nums .section-heading {
		padding-inline: 0;
	}
	/* 和文サブ(y=361)・リード文(y=405)の位置は共通SPの10/20で設計に一致する。 */
	.environment .section-heading__lead {
		/* 設計のリード枠はx=68..328(w=260)。共通の右pad65では枠が広く、両端揃えが設計より伸びる。 */
		padding-left: calc(43 * var(--u));
		padding-right: calc(37 * var(--u));
		/* リードはZWSP(設計の改行点=「…づくりを／大切に…」)でのみ折返す。 */
		word-break: keep-all;
		text-align: justify;
	}
	.env-benefits,
	.env-nums {
		padding-inline: calc(25 * var(--u));
	}
	/* 設計SPの区切り線はy=199(+1px)=200.1。§1見出しはy=279。 */
	.env-benefits {
		margin-top: calc(78.9 * var(--u));
	}
	/* 設計はリード文の行box地端453の40下(グリッド上端493)。行間も設計40。 */
	.env-benefit-grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: calc(20 * var(--u));
		row-gap: calc(40 * var(--u));
		margin-top: calc(40 * var(--u));
	}
	/* 設計SPはアイコン地端の10下(y=574)・タイトル行box地端の10下(desc y=616)。 */
	.env-benefit__title {
		margin-top: calc(10 * var(--u));
	}
	/* 設計SPの2行タイトルだけ行間150%(1行のものは200%)。枠h=48はこの150%でのみ一致する。
	   折返し位置はタイトルのZWSPが決める(page-environment.phpのwrap指定と対) */
	.env-benefit__title--2l {
		line-height: 1.5;
	}
	.env-benefit__desc {
		font-size: max(1.2rem, calc(14 * var(--u)));
		line-height: 2;
		margin-top: calc(10 * var(--u));
	}

	/* スキル(SP): 見出し+リードの下段でタグが右→左へ流動(両側は設計どおり見切れ)。反転帯は60pxフェード。
	   設計SPの§2見出しはy=2411。§1グリッド地端は設計2271だが、設計はカード1だけgap=11
	   (他11枚は10)で1行目が2px高い。実装はgapを10で揃えるためグリッドは2px低く終わる。
	   §2以降を設計の絶対位置に戻すため、その2pxをここで吸収する(140+2)。 */
	.env-skill {
		--sk-fade: 60;
		margin-top: calc(142 * var(--u));
		min-height: calc(1045 * var(--u));
	}
	/* SPの黒帯は節上端の少し上から。見出し/タグは実黒の上(フェードは余白に落とす)。 */
	.env-skill::before {
		top: calc(-90 * var(--u));
		height: calc(1300 * var(--u));
	}
	/* 設計SPは和文サブの行box地端2481の20下(リードy=2501)。枠はx=68..328(w=260)。 */
	.env-skill__lead {
		max-width: none;
		padding-inline: calc(68 * var(--u)) calc(62 * var(--u));
		margin-top: calc(20 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: calc(24 / 15);
	}
	.env-skill__lead br[data-sp] {
		display: inline;
	}
	/* SP: 見出し/リードの下段でタグが右→左へ流動。左マスク不要(帯が見出しと重ならない)。
	   上下フェードは60px。top:0(PCの--sk-topオフセットは不要)。 */
	.env-skill-cloud {
		/* 雲の上端(top:0)=.env-skill上端=設計の見出しy2411。タグtopはここが基準。 */
		--sk-origin: 2411;
		/* SPは左マスク不要=--sk-maskを上下フェード1層に差し替え(合成相手なしなのでcompositeは無効=本体のintersectのままでよい)。 */
		--sk-mask: linear-gradient(to bottom, transparent, #000 calc(var(--sk-fade) * var(--u)), #000 calc(100% - var(--sk-fade) * var(--u)), transparent);
		top: 0;
		height: calc(1189 * var(--u));
	}
	.env-skill-tag {
		left: calc(var(--sx) * var(--u));
		top: calc((var(--sy) - var(--sk-origin)) * var(--u));
	}

	/* 設計SPの最終カード地端8441→フッター8489が48。 */
	.env-nums {
		margin-top: calc(104 * var(--u));
		margin-bottom: calc(48 * var(--u));
	}
	/* 設計SPはリード文の行box地端3734の40下(カード上端3774)。カード間は全て20。 */
	.env-nums__grid {
		grid-template-columns: 1fr;
		gap: calc(20 * var(--u));
		margin-top: calc(40 * var(--u));
	}
	.env-nums__col {
		gap: calc(20 * var(--u));
	}
	/* 設計SPのpaddingは上40・左右30・下39(枠線1pxはその内側)。 */
	.env-stat {
		min-height: calc(var(--card-h-sp, 0) * var(--u));
		width: auto;
		padding: calc(39 * var(--u)) calc(29 * var(--u)) calc(38 * var(--u));
	}
	/* SPは見出し→リード10(PCは15)・リード→図20。 */
	.env-stat__lead {
		margin-top: calc(10 * var(--u));
	}
	.env-stat__body {
		margin-top: calc(20 * var(--u));
	}
	/* SPの注記だけは下端貼り(PCの--note-gap=図直下ではない)。設計SPのカードは注記の地端が
	   カード地端の39上に来るよう高さが決められており(10枚中6枚が39・残り43〜44)、下端貼りで
	   最大5px。PCは右列に注記の“下”の余白があるため図直下(--note-gap)が正しく、モデルが逆。 */
	.env-stat__note {
		margin-top: auto;
	}
	/* SPは20px・行間160%(PCは22px・150%)。 */
	.env-stat__title {
		font-size: max(1.2rem, calc(20 * var(--u)));
		line-height: 1.6;
	}
	/* 設計SPの図はPCと別寸(丸系は径258・棒/数値系は257〜280とカードごとに異なる)ため、
	   --fw-spで設計幅を直接与える(高さは縦横比で従う)。 */
	.env-stat__fig {
		width: calc(var(--fw-sp) * var(--u));
	}
}