@charset "UTF-8";
/**
 * 仕事を知る(Works)ページ固有スタイル。
 * Job Categories / Pick up jobtype / Section1〜3(役割図・仕事の流れ・BPの魅力)/ Case study / Our Clients。
 * 共通トークン・ヘッダー・フッター・見出しはcommon.css。
 * Figma:PC 1440 / SP 390。
 *
 * PC(≥769px)はビューポートで相似縮小させず固定rem(--u-fix)。フォント・余白は固定サイズを保ち、
 * 幅が狭まったら枠・写真を幅追従で縮小し、中間幅(769〜1339px)では2カラム領域を1カラムへ畳む。SP(≤768px)は純vw(--u-sp)。
 * アクセントは赤グラデ#FF999E→#F83639(設計SVGのpaint0と同値)。
 * Case studyを除く写真は枠(.work-ph)に嵌める。枠の背景色は読み込み前の下地。
 */

.work {
	--u: var(--u-fix);
	--grad-work: linear-gradient(180deg, #ff999e 0%, #f83639 100%);
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
}

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

.work-defs {
	position: absolute;
}

/**
 * 写真枠。背景色は画像の読み込み前に見える下地。
 * 画像は枠と同じ比で書き出してあるためcoverの切り取りは生じない。
 */
.work-ph {
	background: #d9d9d9;
}

.work-ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * SP/PC専用の改行トグル。共通テキストに、SPだけ/PCだけの折返しを足すために使う
 * (page-work.phpの<br data-sp>/<br data-pc>)。
 */
.work br[data-sp] {
	display: none;
}

.work br[data-pc] {
	display: inline;
}

/**
 * アクセントグラデで塗る文字(番号ラベル・バッジ)。
 */
.work-jobcat__pointlabel,
.work-jobsec__badge,
.work-flow__num-inner {
	background-image: var(--grad-work);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/**
 * Job Categories(職種):見出し+説明パネル(左)/ 円環セレクタ(右)/ Point帯。
 * 円環は8職種を設計座標(800×800基準)へ絶対配置。ノードクリックで当該ノードが
 * 赤くハイライトし、左パネルが通常説明→職種詳細へ切り替わる(work.js)。
 */
.work-jobcat {
	margin-top: calc(80 * var(--u));
}

/**
 * 左パネルと円環を設計座標で並べる土台。高さは円環に合わせる。
 */
.work-jobcat__selector {
	position: relative;
	height: calc(800.53 * var(--u));
}

/**
 * 左パネル:見出し + 通常説明 / 選択時は職種詳細。
 */
.work-jobcat__panel {
	position: absolute;
	top: calc(184.27 * var(--u));
	left: calc(60 * var(--u));
	width: calc(372 * var(--u));
}

.work-jobcat__heading {
	position: relative;
	padding-left: calc(86 * var(--u));
}

.work-jobcat__heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(23 * var(--u));
	width: calc(60 * var(--u));
	height: 1px;
	background: var(--c-black);
}

.work-jobcat__en {
	margin: 0;
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(36 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.work-jobcat__ja {
	margin: calc(10 * 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;
}

/**
 * 通常時の説明文(職種未選択)。
 * 設計の説明文y=748 −(和文サブy=672 + 18×1.6)= 47.2。
 * 設計の見出しフレームは高さ79だが中身の実テキストは81.8あり(和文サブの枠26<テキスト28.8)、
 * 枠を信じて50を足すと2.8px下がる。行box基準で引く。
 */
.work-jobcat__desc {
	margin: calc(47.2 * var(--u)) 0 0;
	padding-left: calc(86 * 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;
}

/**
 * 職種選択時の詳細(通常はhiddenで非表示)。位置は通常時の説明文と同じ(設計クリック時フレームのy=748)。
 */
.work-jobcat__detail {
	margin-top: calc(47.2 * var(--u));
	padding-left: calc(86 * var(--u));
}

/**
 * 高さはバッジ(41)で固定する。職種名の行box(24×2=48)はこの行より高いが、設計もテキスト枠32に対し
 * 行box48がはみ出す状態(textAlignVertical:CENTER)なので、align-items:centerで中心を合わせればグリフは設計に一致する。
 * height指定が無いと行box48が行を押し広げ、直下の__detailbodyが7px下がる。
 */
.work-jobcat__detailhead {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	height: calc(41 * var(--u));
}

.work-jobcat__badge {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(41 * var(--u));
	height: calc(41 * var(--u));
	border-radius: 50%;
	background-image: var(--grad-work);
	color: var(--c-white);
}

.work-jobcat__badge svg {
	width: calc(25 * var(--u));
	height: calc(25 * var(--u));
}

.work-jobcat__detailname {
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(24 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
	color: var(--c-black);
}

.work-jobcat__detailbody {
	display: flex;
	gap: calc(20 * var(--u));
	margin-top: calc(25 * var(--u));
}

.work-jobcat__detailbody::before {
	content: "";
	flex-shrink: 0;
	align-self: stretch;
	width: 1px;
	background-image: var(--grad-work);
}

.work-jobcat__detailtext {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
	color: var(--c-black);
}

/**
 * SP円環の自動回転角(work.jsが更新)。@property化でtransition可能に(未対応環境は0degのまま=静止)。
 */
@property --orbit-rot {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}

/**
 * 円環セレクタ(右)800×800。
 */
.work-jobcat__circle {
	position: absolute;
	top: 0;
	left: calc(516 * var(--u));
	width: calc(800.46 * var(--u));
	height: calc(800.53 * var(--u));
}

/**
 * ノード群ラッパー。PC/中間幅ではdisplay:contentsで透過させ、ノードを円環へ直接絶対配置する。
 * SP(≤768)では回転レイヤーになる。
 */
.work-jobcat__nodes {
	display: contents;
}

/**
 * 8職種の中心を通す細いリング(ノードで隠れて弧状に見える)。
 */
.work-jobcat__ring {
	position: absolute;
	left: calc(93 * var(--u));
	top: calc(93.27 * var(--u));
	width: calc(615 * var(--u));
	height: calc(614 * var(--u));
	border: 1px solid var(--c-black);
	border-radius: 50%;
}

/**
 * 各職種ノード。--cx/--cyは円環コンテナ左上基準の設計px中心座標。
 */
.work-jobcat__node {
	position: absolute;
	left: calc(var(--cx) * var(--u));
	top: calc(var(--cy) * var(--u));
	transform: translate(-50%, -50%);
	width: calc(187 * var(--u));
	height: calc(187 * var(--u));
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #dcdddd;
	color: var(--c-black);
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s, color 0.2s;
}

.work-jobcat__node-icon {
	position: absolute;
	top: calc(38 * var(--u));
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	color: inherit;
}

.work-jobcat__node-icon svg {
	display: block;
	width: auto;
	height: calc(var(--ih) * var(--u));
}

.work-jobcat__node-text {
	position: absolute;
	top: calc(112 * var(--u));
	right: 0;
	left: 0;
	transform: translateY(-50%);
	color: inherit;
	text-align: center;
}

.work-jobcat__node-en {
	display: block;
	font-family: var(--ff-mont);
	font-weight: 700;
	font-size: calc(20 * var(--u));
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.work-jobcat__node-ja {
	display: block;
	margin-top: calc(2 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: calc(11 * var(--u));
	line-height: 1.2;
	color: #727171;
}

.work-jobcat__node-roles {
	display: block;
	margin-top: calc(9 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: calc(13 * var(--u));
	line-height: 1.6;
	letter-spacing: 0.02em;
}

.work-jobcat__node.is-active {
	background: none;
	background-image: var(--grad-work);
	color: var(--c-white);
}

.work-jobcat__node.is-active .work-jobcat__node-ja {
	color: var(--c-white);
}

.work-jobcat__node:focus-visible {
	outline: calc(2 * var(--u)) solid #f83639;
	outline-offset: calc(2 * var(--u));
}

.work-jobcat__point {
	display: grid;
	/* テキスト列は設計のテキスト枠幅457に固定(minmax(0,1fr)だと538になりPoint本文2行目の折返しが設計とずれる)。 */
	grid-template-columns: calc(742 * var(--u)) minmax(0, calc(457 * var(--u)));
	column-gap: calc(100 * var(--u));
	align-items: center;
	margin-top: calc(30 * var(--u));
	padding-right: calc(60 * var(--u));
}

.work-jobcat__photo {
	width: calc(742 * var(--u));
	aspect-ratio: 742 / 620;
	clip-path: url(#work-leaf);
}

.work-jobcat__pointlabel {
	margin: 0;
	width: fit-content;
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(36 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.work-jobcat__pointlead {
	margin: calc(6 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(28 * var(--u)));
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.work-jobcat__pointtext {
	/* 設計はlead枠が固定96px(テキスト78+下余白18)。lead→本文の間隔は設計bounds実測で43(=lead枠下端170−lead上端49−78相当)。 */
	margin: calc(43 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
}

/**
 * Pick up jobtype(ビジネスプロデューサー)。
 */
.work-pickup {
	/* 設計: 見出し英題y=2023 − Point帯地端1884.5 = 138.5。 */
	margin-top: calc(138.5 * var(--u));
}

/**
 * 設計はHORIZONTALオートレイアウト(gap80・上下センター)。左カラム(バッジ+BP名)と
 * リード文を横並びにし、リード文を左カラム高さ(92)に対して縦センター配置する。
 */
.work-pickup__intro {
	display: flex;
	align-items: center;
	gap: calc(80 * var(--u));
	/* 設計: intro y=2111 − 英題の行box地端2066.2(y2023+36×1.2) = 44.8。 */
	margin-top: calc(44.8 * var(--u));
	padding-left: calc(150 * var(--u));
	padding-right: calc(60 * var(--u));
}

.work-pickup__col {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: calc(10 * var(--u));
	width: calc(404 * var(--u));
}

/**
 * 高さは設計の行(PC40=アイコン径 / SP32)で固定する。ラベルの行box(24×2=48)はこれより高いが、
 * 設計もテキスト枠32に対し行box48がはみ出す(textAlignVertical:CENTER)ため、
 * align-items:centerで中心を合わせればグリフは設計に一致する。height無しだと行が48へ広がりBP名が8px下がる。
 */
.work-pickup__badge {
	display: inline-flex;
	align-items: center;
	gap: calc(10 * var(--u));
	margin: 0;
	height: calc(40 * var(--u));
}

.work-pickup__badge-icon {
	display: flex;
	flex-shrink: 0;
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	border-radius: 50%;
	background-image: var(--grad-work);
}

.work-pickup__badge-icon svg {
	width: 100%;
	height: 100%;
}

.work-pickup__badge-label {
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(24 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
}

.work-pickup__lead {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(18 * var(--u)));
	line-height: 1.6;
	letter-spacing: 0;
}

/**
 * 和欧混植(和文Noto+「(BP)」Montserrat)。インライン流し込みでベースラインは自動で揃う。
 * flex+align-items:baselineにすると各spanが別の行boxを作り、両フォントのascent差ぶん行が44.5へ膨らむ(設計42)。
 */
.work-pickup__name {
	display: block;
	margin: 0;
	font-weight: 600;
	font-size: max(1.2rem, calc(30 * var(--u)));
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.work-pickup__name-ja {
	font-family: var(--ff-jp);
}

/**
 * strutは親(和文)のまま。lh:1でMontserratのインラインboxが行boxを押し広げないようにする
 * (グリフはベースライン基準なので動かない)。行box=設計の42。
 */
.work-pickup__name-en {
	font-family: var(--ff-mont);
	line-height: 1;
}

/**
 * Section 1〜3共通(角丸枠+番号ラベル+和文見出し+本文+写真)。
 *
 * 設計: 枠1200×(可変) cornerRadius30 padding80/128 stroke1px(strokeAlign:INSIDE)。
 * strokeAlign:INSIDEなので設計のbounds=CSSのborder-box。よってwidth:1200・radius:30のまま、
 * paddingは枠線1px分を引いて79/127とするとcontentが設計どおり x=248 / w=944(=456+488)に載る。
 */
.work-jobsec {
	display: grid;
	grid-template-columns: calc(456 * var(--u)) minmax(0, calc(488 * var(--u)));
	align-items: start;
	width: min(calc(1200 * var(--u)), calc(100% - calc(120 * var(--u))));
	margin: calc(80 * var(--u)) auto 0;
	padding: calc(79 * var(--u)) calc(127 * var(--u));
	border: 1px solid var(--c-black);
	border-radius: calc(30 * var(--u));
	background: var(--c-white);
}

.work-jobsec--role {
	margin-top: calc(60 * var(--u));
}

.work-jobsec__head {
	grid-column: 1;
}

.work-jobsec__badge {
	margin: 0;
	width: fit-content;
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(24 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.work-jobsec__title {
	margin: calc(25 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(34 * var(--u)));
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.work-jobsec__body {
	grid-column: 1;
	margin: calc(40 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
}

.work-jobsec__photo {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: start;
	/* カードpadding-top80基準で写真上端を設計112.5に合わせる(80+32.5)。Section2は--flow側で0上書き。 */
	margin-top: calc(32.5 * var(--u));
	width: 100%;
	aspect-ratio: 488 / 321;
	border-radius: calc(20 * var(--u));
}

/**
 * Section 1:役割図(BPを中心に5役割を楕円上へ配置)。
 * 設計858×448。幅が足りない中間幅では枠を幅追従で縮小し、内部は%配置+cqwフォントで
 * 相似スケールする(1440では設計と一致)。
 */
.work-role {
	grid-column: 1 / -1;
	position: relative;
	width: min(calc(858 * var(--u)), 100%);
	aspect-ratio: 858 / 448;
	margin: calc(50 * var(--u)) auto 0;
	container-type: inline-size;
}

.work-role__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.work-role__center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, 3.263cqw);
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.work-role__node {
	position: absolute;
	left: calc((var(--cx) - 75) / 858 * 100%);
	top: calc((var(--cy) - 75) / 448 * 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(150 / 858 * 100%);
	height: calc(150 / 448 * 100%);
	border-radius: 50%;
	background-image: var(--grad-work);
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, 2.331cqw);
	line-height: 1.6;
	color: var(--c-white);
	text-align: center;
}

/**
 * Section 2:仕事の流れ(4ステップ)。
 * 設計944×698(card内)。上段=[head+本文(391)|写真(488, gap65)]の2カラム。
 * head+本文ブロック(高258)は写真(高321)に対し縦中央。下段=全幅の4ステップフロー(gap60)。
 * 2カラム化・head縦リズム・写真天付き・両端揃えはPC(≥1340px)限定。
 * 中間幅/SP(≤1339px)は共通の.work-jobsec 1カラム畳みへ委ねる(intro内でhead+本文が縦積み)。
 */
.work-jobsec--flow .work-jobsec__intro {
	display: flex;
	flex-direction: column;
}

.work-flow {
	grid-column: 1 / -1;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, calc(184 * var(--u)));
	justify-content: space-between;
	margin: calc(32 * var(--u)) 0 0;
	padding: 0;
	list-style: none;
}

/**
 * ステップ番号をつなぐ横のグラデ線(番号円の中心を通し、白い円の背面へ敷く)。≤1339pxは非表示。
 */
.work-flow::before {
	content: "";
	position: absolute;
	top: calc(24.5 * var(--u));
	left: calc(92 * var(--u));
	right: calc(92 * var(--u));
	height: calc(4 * var(--u));
	transform: translateY(-50%);
	background-image: linear-gradient(90deg, #f83639 0%, #ff999e 100%);
}

.work-flow__step {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.work-flow__num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(49 * var(--u));
	height: calc(49 * var(--u));
	border: calc(3 * var(--u)) solid transparent;
	border-radius: 50%;
	background: linear-gradient(var(--c-white), var(--c-white)) padding-box, var(--grad-work) border-box;
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(24 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.work-flow__label {
	margin: calc(20 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(26 * var(--u)));
	line-height: 1.4;
	text-align: center;
}

.work-flow__body {
	align-self: stretch;
	margin: calc(20 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
	/* Figmaと同じ行頭禁則(ー/、/。を行頭に置かない)。ステップ2本文の折返しを設計と一致させる。 */
	line-break: strict;
}

/**
 * PC(≥1340px):設計どおりの2カラム上段+head縦リズム+写真天付き+本文/ステップ本文の両端揃え。
 * 1340未満は中間幅として1カラムへ畳む(円環の絶対配置はdataノード右端≒1316pxで、
 * 収める+余白のため境界を1340に。下の中間幅ブロックと対)。
 */
@media (min-width: 1340px) {
	.work-jobsec--flow {
		grid-template-columns: calc(391 * var(--u)) minmax(0, calc(488 * var(--u)));
		column-gap: calc(65 * var(--u));
		align-items: center;
	}

	/**
	 * head+本文を1ブロック化し、写真(高321)に対して縦中央に置く。
	 */
	.work-jobsec--flow .work-jobsec__intro {
		grid-column: 1;
	}

	/**
	 * バッジ:箱29(lh1.2)/タイトル:gap10・箱51(lh1.5)=head計90。
	 */
	.work-jobsec--flow .work-jobsec__badge {
		line-height: 1.2;
	}

	.work-jobsec--flow .work-jobsec__title {
		margin-top: calc(10 * var(--u));
		line-height: 1.5;
	}

	/**
	 * Section1もバッジ→タイトルgapは設計10(基底25はSection3設計値)。
	 */
	.work-jobsec--role .work-jobsec__title {
		margin-top: calc(10 * var(--u));
	}

	/**
	 * 本文:設計391幅・両端揃え4行(先頭のみ強制改行、以降は自然折返し)。
	 */
	.work-jobsec--flow .work-jobsec__body {
		margin-top: calc(40 * var(--u));
		max-width: calc(391 * var(--u));
		text-align: justify;
	}

	/**
	 * 写真:上段の上端に揃える(縦中央のhead+本文に対し天付き)。
	 */
	.work-jobsec--flow .work-jobsec__photo {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		margin-top: 0;
	}

	.work-flow {
		/* 上段(高321)とフローの間隔=設計60。 */
		margin-top: calc(60 * var(--u));
	}

	.work-flow__body {
		text-align: justify;
	}

	/**
	 * 4ステップ目の本文のみ設計は字間1%(「KGI・KPIの達成に向けて」を1行へ収める)。
	 */
	.work-flow__step:last-child .work-flow__body {
		letter-spacing: 0.01em;
	}
}

/**
 * Section 3:BPの魅力(2×2)。
 * 設計:カード内容944幅の単一カラム。本文は480幅・見出しは自然幅。
 * 本文/リード/写真の縦リズムは設計(項目=タイトル+リード→写真→本文を各20px間隔)。
 */
.work-jobsec--charm {
	grid-template-columns: minmax(0, 1fr);
}

.work-jobsec--charm .work-jobsec__body {
	max-width: calc(480 * var(--u));
	text-align: justify;
}

.work-charm {
	grid-column: 1 / -1;
	display: grid;
	/* 1440では2列(各420)。幅が足りなければ1列へ自動で落とす。 */
	grid-template-columns: repeat(auto-fit, minmax(calc(280 * var(--u)), 1fr));
	column-gap: calc(104 * var(--u));
	row-gap: calc(60 * var(--u));
	margin: calc(60 * var(--u)) 0 0;
}

.work-charm__title {
	position: relative;
	margin: 0;
	padding-left: calc(39 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(26 * var(--u)));
	line-height: 1.4;
}

.work-charm__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	border-radius: 50%;
	background-image: var(--grad-work);
}

.work-charm__lead {
	margin: calc(10 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(20 * var(--u)));
	line-height: 1.6;
}

.work-charm__photo {
	margin-top: calc(20 * var(--u));
	width: 100%;
	aspect-ratio: 420 / 200;
	border-radius: calc(20 * var(--u));
}

.work-charm__body {
	margin: calc(20 * var(--u)) 0 0;
	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: justify;
}

/**
 * Case study(3枚のサムネイル+View More)。
 */
.work-cases {
	/* 設計: 見出し英題y=6021 − Section3カード地端5738 = 283。 */
	margin-top: calc(283 * var(--u));
}

/**
 * リード文が設計どおりx455から始まるよう左カラム幅を395に調整(既定405)。
 */
.work-cases .section-heading {
	grid-template-columns: calc(395 * var(--u)) 1fr;
}

/**
 * 本ページの設計はリード文y=6021=英題yで、共通の既定padding-top:7.5ぶん下がらない。
 */
.work-cases .section-heading__lead {
	padding-top: 0;
}

.work-cases__list {
	display: grid;
	/* 1440では3列(各379)。幅が足りなければ2→1列へ自動で落とす。 */
	grid-template-columns: repeat(auto-fit, minmax(calc(300 * var(--u)), calc(379 * var(--u))));
	column-gap: calc(32 * var(--u));
	row-gap: calc(32 * var(--u));
	justify-content: center;
	/* 設計: サムネy=6177 − 見出しブロック地端6117(リード3行96) = 60。 */
	margin-top: calc(60 * var(--u));
}

.work-cases__thumb {
	/* aリンクのため、width/aspect-ratioが効くようblock化する。 */
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 379 / 199;
}

.work-cases__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work-cases__logo {
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(139 * var(--u));
	height: calc(46 * var(--u));
	background: var(--c-white);
	/* 設計は左上のみ角丸10(右・下辺はカード端に接するため直角)。 */
	border-radius: calc(10 * var(--u)) 0 0 0;
}

/**
 * バッジ内のパートナーロゴ。位置・寸法はインラインの--lx/--ly/--lw/--lhで各社個別に指定。
 */
.work-cases__logo-img {
	position: absolute;
	left: calc(var(--lx) * var(--u));
	top: calc(var(--ly) * var(--u));
	width: calc(var(--lw) * var(--u));
	height: calc(var(--lh) * var(--u));
	object-fit: contain;
}

.work-cases__more {
	display: flex;
	justify-content: center;
	margin-top: calc(60 * var(--u));
}

.work-cases__more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(10 * var(--u));
	width: calc(275 * var(--u));
	height: calc(45 * var(--u));
	border: 1px solid var(--c-black);
	/* 設計cornerRadius30→高さ45でスタジアム状にクランプ。 */
	border-radius: calc(30 * var(--u));
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(18 * var(--u)));
	line-height: 1.4;
	letter-spacing: 0.02em;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/**
 * ホバー:黒地・白文字へ反転(company.cssのcmp-more__btnと同一挙動)。
 */
.work-cases__more-btn:hover {
	background-color: var(--c-black);
	color: var(--c-white);
}

.work-cases__more-btn:hover .work-cases__more-icon {
	color: var(--c-white);
}

.work-cases__more-icon {
	width: calc(16 * var(--u));
	height: calc(14 * var(--u));
	color: var(--c-black);
	transition: color 0.3s ease;
}

/**
 * Our Clients(パートナーロゴ一覧)。
 */
.work-clients {
	/* 設計: 見出し英題y=6631 − View Moreボタン地端6481 = 150。 */
	margin-top: calc(150 * var(--u));
	/* 設計: フッターy=7406.9 − ロゴ地端7246 = 160.9。 */
	margin-bottom: calc(160.9 * var(--u));
}

.work-clients__logos {
	/* 設計: ロゴy=6762 − 見出しブロック地端6712.8(和文サブ地端) = 49.2。 */
	margin: calc(49.2 * var(--u)) auto 0;
	width: min(calc(1262 * var(--u)), calc(100% - calc(120 * var(--u))));
}

/**
 * パートナー約40社のロゴ一覧(Figma抽出の1枚画像・1262×484)。
 */
.work-clients__logos-img {
	display: block;
	width: 100%;
	height: auto;
}

/**
 * 仕事の流れ:4ステップ横並び(+接続線)はPC(≥1340)のみ。中間幅/SP(≤1339)はセクション同様2×2へ畳む
 * (≥1115なら4列も収まるが窮屈なため、中間幅の1カラム畳みと足並みを揃える。
 * SPの行接続線は別途SPブロックで描画)。
 */
@media (max-width: 1339px) {
	.work-flow {
		grid-template-columns: repeat(2, 1fr);
		column-gap: calc(30 * var(--u));
		row-gap: calc(60 * var(--u));
	}

	.work-flow::before {
		display: none;
	}
}

/**
 * 中間幅(769〜1339px):固定remのまま、2カラム領域を1カラムへ畳む(姉妹ページと同方針)。
 * 上限1339は、円環の絶対配置(dataノード右端≒1316px)がPC 2カラムで収まる直前まで。
 *
 * ただしJob Categoriesだけは畳まず2カラムを保ち、節ごとvwで相似縮小する(下の個別指定)。
 * 1440固定のままだと1339以下で縦に割れ、実機の幅(1280等)で設計と違う見え方になるため。
 */
@media (min-width: 769px) and (max-width: 1339px) {
	/**
	 * Case study見出し:共通どおり縦積み(395上書きを打ち消す)。
	 */
	.work-cases .section-heading {
		grid-template-columns: 1fr;
	}

	/**
	 * Job Categoriesは畳まず2カラムのまま、節ごと1440基準で相似縮小する。
	 * 左パネル・円環・上下左右の余白がすべて同率で縮むため、設計の構図がそのまま保たれる。
	 * 位置も寸法も同じ--uで書かれているので、単位の差し替えだけで足りる。
	 */
	.work-jobcat {
		--u: var(--u-pc);
	}

	/* Pointも2カラムのまま。写真・テキスト列・余白は--uで書かれているので上書き不要。 */


	.work-pickup__intro {
		flex-direction: column;
		align-items: flex-start;
		gap: calc(24 * var(--u));
	}

	.work-pickup__col {
		width: auto;
	}

	.work-jobsec {
		grid-template-columns: 1fr;
	}

	.work-jobsec__body {
		margin-top: calc(30 * var(--u));
	}

	/**
	 * 1カラム畳み時は写真を列追従(100%)にする。488px固定だと列が広がった分だけ右に空白ができ小さく浮くため。
	 */
	.work-jobsec__photo {
		grid-column: 1;
		grid-row: auto;
		margin-top: calc(30 * var(--u));
		width: 100%;
	}
}

/**
 * SP(Figma:390基準・純vw)。円環・図解はSP設計へ積み替える。
 * 設計frame: 9744:4899(390×9120)。主要ブロック間は120px・カード間は30pxリズム。
 */
@media (max-width: 768px) {
	.work {
		--u: var(--u-sp);
	}

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

	/**
	 * PC専用改行はSPで抑止(文中のPC折返しを消し、設計の自然折返しに寄せる)。
	 */
	.work br[data-pc] {
		display: none;
	}

	.work-cases .section-heading {
		grid-template-columns: 1fr;
	}

	/**
	 * Job Categories:見出し+説明(常時)+円環バンド(全幅・左弧クリップ)+選択時詳細。
	 */
	.work-jobcat {
		margin-top: calc(80 * var(--u));
	}

	/**
	 * 見出し→説明→円環バンドを縦積み。
	 */
	.work-jobcat__selector {
		height: auto;
	}

	.work-jobcat__panel {
		position: static;
		width: auto;
		padding-inline: calc(25 * var(--u));
	}

	.work-jobcat__heading {
		padding-left: calc(42 * var(--u));
	}

	.work-jobcat__heading::before {
		top: calc(19 * var(--u));
		width: calc(35 * var(--u));
	}

	.work-jobcat__en {
		font-size: max(1.2rem, calc(30 * var(--u)));
	}

	.work-jobcat__ja {
		font-size: max(1.2rem, calc(15 * var(--u)));
	}

	/**
	 * 常時表示の説明文(職種選択後もJSのhidden化を打ち消して表示継続)。
	 */
	.work-jobcat__desc {
		margin-top: calc(20 * var(--u));
		padding-left: calc(43 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: calc(24 / 15);
	}

	.work-jobcat__desc[hidden] {
		display: block;
	}

	/**
	 * 選択職種の詳細:円環の右開口部(C字の空き)へ絶対配置でフロート。
	 * top = パネル高234 + 円環上margin8 + 詳細の円環内オフセット270 = 512。
	 *
	 * パネル高234は説明文(.work-jobcat__desc)が6行=144pxである前提に依存(下の__point margin-top:53も同様)。
	 * 説明文の行数が変われば top と __point margin-top を再計算すること。
	 * PCは詳細を左パネル内に置く仕様(work.js が panel.querySelector で参照)のため、円環内への再parentは不可。
	 */
	.work-jobcat__detail {
		position: absolute;
		left: calc(181 * var(--u));
		top: calc(512 * var(--u));
		width: calc(184 * var(--u));
		margin-top: 0;
		padding-left: 0;
		z-index: 1;
	}

	.work-jobcat__detailhead {
		display: none;
	}

	.work-jobcat__detailbody {
		margin-top: 0;
		gap: 0;
	}

	.work-jobcat__detailbody::before {
		display: none;
	}

	.work-jobcat__detailtext {
		font-size: max(1.2rem, calc(14 * var(--u)));
		line-height: calc(21 / 14);
		letter-spacing: 0;
		text-align: justify;
	}

	/**
	 * 円環バンド:全幅・ビューポート端でクリップ(ページ横スクロール禁止)。
	 * PC円環を644/800=0.805倍。中心がページx329に来る右開き"C"字で、左弧5ノードのみ視認。
	 * 右のPlanning/Data/Advertisingはクリップ(DOM/キーボードでは到達可)。
	 */
	.work-jobcat__circle {
		--u: var(--u-sp);
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: calc(644 * var(--u-sp));
		margin: calc(8 * var(--u-sp)) auto 0;
		/* clip(hidden不可)=スクロールコンテナを作らずクリップ。hiddenだとクリップした右3ノードへの
		   キーボードフォーカスでリングが横スクロールしてしまう。html/bodyのoverflow-x:clipと同idiom。 */
		overflow: clip;
	}

	.work-jobcat__ring {
		left: calc(82 * var(--u-sp));
		top: calc(75 * var(--u-sp));
		width: calc(494 * var(--u-sp));
		height: calc(494 * var(--u-sp));
	}

	/**
	 * 自動回転レイヤー:リング中心(329,322)を軸に回転。--orbit-rotをwork.jsが更新(反時計回りは負角)。
	 * @property未対応環境ではtransitionされず即時切替になるだけで見た目は保たれる。
	 */
	.work-jobcat__nodes {
		display: block;
		position: absolute;
		inset: 0;
		transform-origin: calc(329 * var(--u-sp)) calc(322 * var(--u-sp));
		transform: rotate(var(--orbit-rot));
		transition: --orbit-rot 0.85s cubic-bezier(0.65, 0, 0.35, 1);
	}

	/**
	 * ノードのローカル--uを150/187倍に再定義=ノード径150＋アイコン/EN/JA/役割も同率縮小。
	 * ラッパーの軌道回転に対しノードは逆回転してラベルを正立に保つ(inheritした--orbit-rotで同期)。
	 */
	.work-jobcat__node {
		--u: calc(150 / 187 * var(--u-sp));
		transform: translate(-50%, -50%) rotate(calc(-1 * var(--orbit-rot)));
	}

	.work-jobcat__node[data-jobcat-key="produce"] {
		left: calc(329 * var(--u-sp));
		top: calc(75 * var(--u-sp));
	}

	.work-jobcat__node[data-jobcat-key="creative"] {
		left: calc(155 * var(--u-sp));
		top: calc(147 * var(--u-sp));
	}

	.work-jobcat__node[data-jobcat-key="planning"] {
		left: calc(504 * var(--u-sp));
		top: calc(147 * var(--u-sp));
	}

	.work-jobcat__node[data-jobcat-key="system"] {
		left: calc(82 * var(--u-sp));
		top: calc(322 * var(--u-sp));
	}

	.work-jobcat__node[data-jobcat-key="data"] {
		left: calc(576 * var(--u-sp));
		top: calc(322 * var(--u-sp));
	}

	.work-jobcat__node[data-jobcat-key="generative-ai"] {
		left: calc(154 * var(--u-sp));
		top: calc(496 * var(--u-sp));
	}

	.work-jobcat__node[data-jobcat-key="advertising"] {
		left: calc(504 * var(--u-sp));
		top: calc(496 * var(--u-sp));
	}

	.work-jobcat__node[data-jobcat-key="media"] {
		left: calc(329 * var(--u-sp));
		top: calc(569 * var(--u-sp));
	}

	/**
	 * Point(SP:写真なし・単一カラムのテキスト)。
	 */
	.work-jobcat__point {
		grid-template-columns: 1fr;
		/* 円環バンド下端(視覚)→Point。設計の公称120から円環overflow分を差引いた実ギャップ。 */
		margin-top: calc(53 * var(--u));
		padding-inline: calc(25 * var(--u));
	}

	/**
	 * SP設計のPointには葉っぱ写真が無い(PCは維持)。
	 */
	.work-jobcat__photo {
		display: none;
	}

	.work-jobcat__pointlabel {
		font-size: max(1.2rem, calc(30 * var(--u)));
	}

	.work-jobcat__pointlead {
		margin-top: calc(10 * var(--u));
		font-size: max(1.2rem, calc(26 * var(--u)));
		line-height: 1.4;
		letter-spacing: 0;
	}

	/**
	 * 設計の本文y=1428 −(リード上端1264 + 4行×36.4)= 18.4。
	 * 設計のautoLayout gapは20だが、これはFigmaのリード枠bounds(144)基準で、実際の行box(4×36.4=145.6)とは1.6ずれる。
	 * 行box基準で引く。
	 */
	.work-jobcat__pointtext {
		margin-top: calc(18.4 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: calc(24 / 15);
		letter-spacing: 0;
	}

	/**
	 * Pick up jobtype。
	 */
	.work-pickup {
		/* 設計: 見出し英題y=1764 − Point本文の行box地端1644(y1428+9行×24) = 120。
		   設計のPoint本文は枠(192)より実テキスト(216)が高くはみ出すので、枠ではなく行boxで引く。 */
		margin-top: calc(120 * var(--u));
	}

	.work-pickup__intro {
		flex-direction: column;
		align-items: flex-start;
		gap: calc(10 * var(--u));
		/* 設計: intro y=1820 − 英題の行box地端1800(y1764+30×1.2) = 20。 */
		margin-top: calc(20 * var(--u));
		/* badge/name/leadを見出しテキスト左端(section pad25+title pad45=70)に揃える。 */
		padding-inline: calc(70 * var(--u)) calc(25 * var(--u));
	}

	.work-pickup__col {
		width: auto;
		gap: calc(10 * var(--u));
	}

	/**
	 * 設計のSPバッジ行は高さ32(アイコン28はその中で上下センター)。
	 */
	.work-pickup__badge {
		height: calc(32 * var(--u));
	}

	.work-pickup__badge-icon {
		width: calc(28 * var(--u));
		height: calc(28 * var(--u));
	}

	.work-pickup__badge-label {
		font-size: max(1.2rem, calc(20 * var(--u)));
	}

	.work-pickup__name {
		/* 設計SPは「(BP)」も含め全てNoto Sans JP・字間0(PCはMontserrat混植・字間2%)。 */
		font-size: max(1.2rem, calc(26 * var(--u)));
		line-height: 1.4;
		letter-spacing: 0;
	}

	.work-pickup__name-en {
		font-family: var(--ff-jp);
		line-height: inherit;
	}

	.work-pickup__lead {
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: calc(24 / 15);
	}

	/**
	 * Section 1〜3 共通カード(3枚とも padding 50/22/50/23・カード間30・幅340)。
	 *
	 * 設計: 枠340 padding50/25 stroke1px(INSIDE)。ただし中身のフレームは幅295で、
	 * padding後の内寸290を超えたぶんが counterAxisAlign:CENTER で左右へ均等にはみ出す(=実効 x=22.5 / 幅295)。
	 * CSSでは枠線1pxを引いた padding 21.5 でこの実効値を直接再現する(content x=47.5 / w=295)。
	 * 上下も枠線1px分を引いて49(=設計50)。
	 */
	.work-jobsec {
		grid-template-columns: 1fr;
		width: calc(340 * var(--u));
		margin-top: calc(30 * var(--u));
		padding: calc(49 * var(--u)) calc(21.5 * var(--u));
	}

	/**
	 * Section1(--role)のPC上書きをSP共通のカード間30へ戻す。
	 */
	.work-jobsec--role {
		margin-top: calc(30 * var(--u));
	}

	.work-jobsec__title {
		margin-top: calc(25 * var(--u));
		font-size: max(1.2rem, calc(26 * var(--u)));
		line-height: 1.4;
		letter-spacing: 0;
	}

	.work-jobsec__body {
		margin-top: calc(30 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: calc(24 / 15);
		letter-spacing: 0;
	}

	.work-jobsec__photo {
		grid-column: 1;
		grid-row: auto;
		margin-top: calc(30 * var(--u));
		aspect-ratio: 295 / 194;
		border-radius: calc(10 * var(--u));
	}

	/**
	 * Section 1「BPの役割」:見出し→写真→本文→役割図。
	 */
	.work-jobsec--role .work-jobsec__photo {
		order: 1;
		margin-top: calc(15 * var(--u));
	}

	.work-jobsec--role .work-jobsec__body {
		order: 2;
	}

	.work-jobsec--role .work-role {
		order: 3;
	}

	/**
	 * 役割図はSP設計専用ラスター(295×286の円形配置)。PCベクター(858×448楕円)はSP幾何に合わず流用不可。
	 */
	.work-role {
		width: 100%;
		aspect-ratio: 295 / 286;
		margin-top: calc(50 * var(--u));
		background: url(../img/work-role-sp.png) center / contain no-repeat;
	}

	.work-role__ring,
	.work-role__center,
	.work-role__node {
		display: none;
	}

	/**
	 * Section 2「仕事の流れ」。
	 */
	.work-jobsec--flow .work-jobsec__title {
		margin-top: calc(25 * var(--u));
	}

	.work-jobsec--flow .work-jobsec__body {
		margin-top: calc(15 * var(--u));
		text-align: justify;
	}

	/**
	 * 2×2化・接続線非表示は @media(max-width:1339px) が担当。SPは列/行間と上余白を設計値へ。
	 */
	.work-jobsec--flow .work-flow {
		margin-top: calc(30 * var(--u));
		column-gap: calc(20 * var(--u));
		row-gap: calc(40 * var(--u));
	}

	.work-flow__label {
		margin-top: calc(20 * var(--u));
		font-size: max(1.2rem, calc(24 * var(--u)));
	}

	.work-jobsec--flow .work-flow__body {
		margin-top: calc(20 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: calc(24 / 15);
		letter-spacing: 0;
		text-align: justify;
	}

	/**
	 * 接続線:上段step1・下段step4の::beforeで行ごとに1本、番号円中心(24.5)を横断。
	 * 円(z-index:1)の背面へ回り、片端は円に潜り片端はカード内容端で切れる(左右鏡像)。
	 */
	.work-jobsec--flow .work-flow__step {
		position: relative;
	}

	.work-jobsec--flow .work-flow__step:nth-child(1)::before,
	.work-jobsec--flow .work-flow__step:nth-child(4)::before {
		content: "";
		position: absolute;
		top: calc(24.5 * var(--u));
		height: calc(4 * var(--u));
		transform: translateY(-50%);
	}

	/**
	 * 上段:内(左=円中心)濃 → 外(右=カード端)淡。-100%(隣列幅)+20u(列間)でカード端まで。
	 */
	.work-jobsec--flow .work-flow__step:nth-child(1)::before {
		left: 50%;
		right: calc(-100% - 20 * var(--u));
		background-image: linear-gradient(90deg, #f83639 0%, #ff999e 100%);
	}

	/**
	 * 下段:外(左=カード端)淡 → 内(右=円中心)濃。
	 */
	.work-jobsec--flow .work-flow__step:nth-child(4)::before {
		right: 50%;
		left: calc(-100% - 20 * var(--u));
		background-image: linear-gradient(90deg, #ff999e 0%, #f83639 100%);
	}

	/**
	 * Section 3「ADDIXのBPの魅力」。
	 */
	.work-jobsec--charm .work-jobsec__title {
		margin-top: calc(25 * var(--u));
	}

	.work-jobsec--charm .work-jobsec__body {
		margin-top: calc(15 * var(--u));
	}

	.work-charm {
		grid-template-columns: 1fr;
		row-gap: calc(60 * var(--u));
		margin-top: calc(30 * var(--u));
	}

	/**
	 * ●付きタイトルはPCの26/600/1.4を継承(SP専用の上書きなし)。
	 * 設計SPは①経験できること/③働く仲間・体制だけが22/700/lh1.5で、②関われる範囲/④案件・フィールドは
	 * PCと同じ26/600/1.4=設計内の不整合。多数派(PC全4枚+SP2枚)かつ設計システムのウェイト(350/500/600)側に統一。
	 * ①③のリードは設計比+3.4px下がる(要クライアント確認)。
	 */

	.work-charm__lead {
		margin-top: calc(10 * var(--u));
	}

	.work-charm__photo {
		margin-top: calc(20 * var(--u));
		aspect-ratio: 295 / 140;
	}

	.work-charm__body {
		margin-top: calc(20 * var(--u));
	}

	/**
	 * Case study。
	 */
	.work-cases {
		/* 設計: 見出し英題y=6706 − Section3カード地端6586 = 120。 */
		margin-top: calc(120 * var(--u));
	}

	/**
	 * リード右padを詰め、設計の右端(page x328)まで伸ばして2行目折返しを防ぐ(共通65→37)。
	 */
	.work-cases .section-heading__lead {
		padding-right: calc(37 * var(--u));
	}

	.work-cases__list {
		grid-template-columns: calc(340 * var(--u));
		row-gap: calc(30 * var(--u));
		/* 設計: サムネy=6946 − リード地端6916 = 30。 */
		margin-top: calc(30 * var(--u));
	}

	.work-cases__thumb {
		aspect-ratio: 340 / 178;
	}

	.work-cases__more {
		margin-top: calc(60 * var(--u));
	}

	/**
	 * Our Clients(SP専用の縦長ロゴシート 340×451。<picture>でSP画像へ差替)。
	 */
	.work-clients {
		/* 設計: 見出し英題y=7766 − View Moreボタン地端7646 = 120。 */
		margin-top: calc(120 * var(--u));
		/* 設計: フッターy=8437.18 − ブロック地端8317.2 = 120。 */
		margin-bottom: calc(120 * var(--u));
	}

	.work-clients__logos {
		/* 設計: Our Clientsブロック551.2 = 見出し70 + gap30.2 + ロゴ451。 */
		margin-top: calc(30.2 * var(--u));
		width: calc(340 * var(--u));
		aspect-ratio: 340 / 451;
	}

	.work-clients__logos-img {
		height: 100%;
		object-fit: contain;
	}
}