@charset "UTF-8";
/**
 * カンパニー(Company / ADDIXを知る)ページ固有スタイル。
 * Our Business(共通見出し+バナー写真) / 事業構造(ツリー図) / Section1〜3(番号見出し+本文+図解)。
 * 共通トークン・ヘッダー・フッター・見出しはcommon.css。
 * Figma:PC 1440 / SP 390。
 *
 * PC(≥769px)は他の下層ページ同様、ビューポートで相似縮小させず固定rem(--u-fix)。フォント・余白は
 * 固定サイズを保ち、幅が狭まったら枠・図解を幅追従で縮小(width:min/100%)し、中間幅(769〜1024px)では
 * 2カラム領域を1カラムへ畳む。SP(≤768px)は純vw(--u-sp)。図解はPC/SPで別レイアウトのためデザインSVGから
 * 各版を抽出しCSSで出し分ける。共通見出し(page/section-heading)は自前の--u-fixをそのまま使う。
 */

.company {
	--u: var(--u-fix);
	/* page-heading半円・●・Sectionバッジのシアングラデ。設計SVGのpaint0〜4と同値。 */
	--grad-company: linear-gradient(180deg, #8bd9ef 0%, #29b2df 100%);
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
}

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

/**
 * 設計は"ADDIX"だけMontserrat。familyごとMontserrat優先にするとstrutまで欧文になり
 * ベースラインが2.7px上がるため、spanで差し替える。
 * lh:1は行boxを膨らませないため(字はベースライン基準なので動かない)。
 */
.company .page-heading__brand {
	font-family: var(--ff-mont);
	line-height: 1;
}

/**
 * Our Businessのリード文が設計どおりx499から始まるよう左カラム幅を439に調整(既定405)。
 * 中間幅では共通どおり1カラムへ畳む(中間幅ブロックで上書き)。
 */
.company .section-heading {
	grid-template-columns: calc(439 * var(--u)) 1fr;
}

/**
 * 共通の7.5は人を知るの設計値。本ページの設計はリード文が英題と同じ高さから始まる。
 */
.company .section-heading__lead {
	padding-top: 0;
}

/**
 * Our Business(共通見出し+全幅バナー写真)。
 */
.cmp-business {
	margin-top: calc(149 * var(--u));
}

.cmp-business__media {
	/* 設計1320px。ビューポートが狭い時は左右60pxのガターを残して縮小。 */
	margin: calc(80 * var(--u)) auto 0;
	width: min(calc(1320 * var(--u)), calc(100% - calc(120 * var(--u))));
	aspect-ratio: 1320 / 437.1;
}

.cmp-business__media img,
.cmp-group__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 設計マスクは画像中央より下の帯を見せる(object-position約61%)。 */
	object-position: center 61%;
}

/**
 * ADDIXの事業構造(左:見出し+本文 / 右:ツリー図)。
 */
.cmp-structure {
	display: grid;
	/* ツリー列は幅追従で縮小可(minmax)。設計は左120/右78のガター。 */
	grid-template-columns: calc(385 * var(--u)) minmax(0, calc(857 * var(--u)));
	align-items: start;
	margin-top: calc(100 * var(--u));
	padding-inline: calc(120 * var(--u)) calc(78 * var(--u));
}

.cmp-structure__text {
	margin-top: calc(58 * var(--u));
}

/**
 * ADDIX(Mont36)と和文(Noto34)の混植。設計の行boxは大きい方のrunの120%=43.2で、
 * 34pxに対する1.2ではない。CSSはinline boxごとにhalf-leadingを配るので、strutへ43.2の
 * 絶対値を与えbrandはlh:1に寝かせないと一致しない。
 */
.cmp-structure__title {
	display: flex;
	align-items: center;
	gap: calc(15 * var(--u));
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(34 * var(--u)));
	line-height: calc(43.2 * var(--u));
	letter-spacing: 0.02em;
}

.cmp-structure__mark {
	flex-shrink: 0;
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	border-radius: 50%;
	background-image: var(--grad-company);
}

.cmp-structure__brand {
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(36 * var(--u)));
	line-height: 1;
}

.cmp-structure__sub {
	margin: calc(9.8 * 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;
}

.cmp-structure__body {
	/* 幅は設計の枠幅。最終段落の折返し位置がこれで決まる。 */
	width: calc(338 * var(--u));
	margin: calc(57.2 * 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;
}

.cmp-structure__body + .cmp-structure__body {
	/* 段落間の空行(設計の1行アキ)。 */
	margin-top: calc(32 * var(--u));
}

/**
 * PNGの縦横比が設計の矩形と微妙に違い、height:auto任せだと図の高さが狂って以降が全部ずれる。
 */
.cmp-structure__img {
	width: 100%;
	height: auto;
}

.cmp-structure__img--pc {
	aspect-ratio: 857 / 968;
}

.cmp-structure__img--sp {
	display: none;
	aspect-ratio: 340 / 524;
}

/**
 * Section 1〜3共通(角丸枠+番号ラベル+和文見出し+本文+図解)。
 * 設計の線はstrokeAlign:INSIDE=boundsがborder-box相当。幅・角丸は設計値のまま、
 * paddingは設計の内容オフセット(上下80/左右128)から線1pxを引く。
 */
.cmp-section {
	display: grid;
	grid-template-columns: calc(464 * var(--u)) 1fr;
	align-items: start;
	/* 設計1200px。狭い時は左右ガターを残して縮小(横スクロール防止)。 */
	width: min(calc(1200 * var(--u)), calc(100% - calc(120 * var(--u))));
	margin: calc(60 * 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);
}

.cmp-section__head {
	grid-column: 1;
}

.cmp-section__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;
	background-image: var(--grad-company);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

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

.cmp-section__sub {
	margin: calc(10.2 * 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;
}

.cmp-section__body {
	grid-column: 2;
	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;
	text-align: justify;
}

/**
 * 事業構造ブロック→Section1の間隔(セクション間60より広い)。SP(≤768)は等間隔60。
 */
@media (min-width: 769px) {
	.cmp-section--flow {
		margin-top: calc(150 * var(--u));
	}
}

.cmp-section__diagram {
	grid-column: 1 / -1;
	margin-top: calc(50 * var(--u));
}

.cmp-section__diagram img {
	height: auto;
}

.cmp-flow1__img--pc {
	width: 100%;
}

.cmp-flow2__img--pc {
	display: block;
	/* Section2の図解だけ設計が枠内容(944)より狭い941。100%にすると縦に伸びて以降がずれる。 */
	width: calc(941 * var(--u));
	aspect-ratio: 941 / 321;
	margin-inline: auto;
}

.cmp-flow1__img--sp,
.cmp-flow2__img--sp {
	display: none;
}

/**
 * SP/PC専用の改行トグル(page-about.phpの<br data-sp>/<br data-pc>)。
 * work/culture/environmentと同じ方式。
 */
.company br[data-sp] {
	display: none;
}

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

/**
 * Section 2メディア(図解の下:3枚のメディアカード+Moreボタン)。
 */
.cmp-media {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: calc(59 * var(--u));
	margin-top: calc(50 * var(--u));
}

.cmp-media__thumb {
	width: 100%;
	aspect-ratio: 275 / 181;
}

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

.cmp-media__tag {
	display: inline-flex;
	align-items: center;
	margin-top: calc(15 * var(--u));
	padding: calc(2 * var(--u)) calc(8 * var(--u));
	border-radius: calc(5 * var(--u));
	background: var(--c-black);
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(15 * var(--u)));
	line-height: 1.6;
	color: var(--c-white);
}

.cmp-more {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	margin-top: calc(50 * var(--u));
}

.cmp-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);
	/* 角丸30は高さ45で22.5へクランプされピルになる(Figmaと同じ)。 */
	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;
}

/**
 * ホバー:黒地・白文字へ反転。背景はborder-boxまで塗られるので黒枠と一体化する。
 * ラベルはa{color:inherit}でボタンから色を継承するが、アイコンは色を直指定しているため
 * 個別に反転させる必要がある。
 */
.cmp-more__btn:hover {
	background-color: var(--c-black);
	color: var(--c-white);
}

.cmp-more__btn:hover .cmp-more__icon {
	color: var(--c-white);
}

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

/**
 * Section 3 JR東海グループ(本文の下:全幅バナー写真)。
 */
.cmp-group__media {
	grid-column: 1 / -1;
	margin-top: calc(50 * var(--u));
	aspect-ratio: 944 / 332;
}

.cmp-section--group {
	margin-bottom: calc(150 * var(--u));
}

/**
 * 中間幅(769〜1024px):固定remのまま2カラム領域を1カラムへ畳む。
 * フォント・余白は縮小せず、枠・図解は幅追従。
 */
@media (min-width: 769px) and (max-width: 1024px) {
	/**
	 * Our Business:共通どおり縦積み(PCの439上書きを打ち消す)。
	 */
	.company .section-heading {
		grid-template-columns: 1fr;
	}

	.cmp-structure {
		grid-template-columns: 1fr;
		padding-inline: calc(120 * var(--u));
	}

	.cmp-structure__text {
		margin-top: 0;
	}

	.cmp-structure__figure {
		margin-top: calc(45 * var(--u));
	}

	.cmp-section {
		grid-template-columns: 1fr;
	}

	.cmp-section__body {
		grid-column: 1;
		margin-top: calc(30 * var(--u));
	}
}

/**
 * SP(Figma:390基準・純vw)。図解はSP版へ差替え、各セクションは1カラムに積む。
 */
@media (max-width: 768px) {
	.company {
		--u: var(--u-sp);
	}

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

	/**
	 * 共通の左45/右65では設計の枠幅(260)にならず折返しが1行増える。
	 */
	.company .section-heading__lead {
		padding-left: calc(43 * var(--u));
		padding-right: calc(37 * var(--u));
	}

	.cmp-business {
		margin-top: calc(79.3 * var(--u));
	}

	.cmp-business__media {
		margin-top: calc(40 * var(--u));
		width: calc(340 * var(--u));
		aspect-ratio: 340 / 192;
	}

	.cmp-structure {
		grid-template-columns: 1fr;
		margin-top: calc(120 * var(--u));
		padding-inline: 0;
		text-align: center;
	}

	.cmp-structure__text {
		margin-top: 0;
	}

	.cmp-structure__title {
		justify-content: center;
		/* 設計は●の逃げを見出し文字列の先頭スペース3つで作っている。gapはその字面位置から逆算した値。 */
		gap: calc(5.67 * var(--u));
		font-size: max(1.2rem, calc(26 * var(--u)));
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: 0;
	}

	.cmp-structure__mark {
		width: calc(19 * var(--u));
		height: calc(19 * var(--u));
	}

	.cmp-structure__brand {
		font-size: max(1.2rem, calc(30 * var(--u)));
		letter-spacing: 0.02em;
	}

	.cmp-structure__sub {
		margin-top: calc(9.6 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
	}

	.cmp-structure__body {
		/* 幅はPCの338に対しSPは260。最終段落の折返し位置が変わる。 */
		width: calc(260 * var(--u));
		margin-top: calc(20 * var(--u));
		margin-inline: auto;
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: 1.6;
		letter-spacing: 0;
	}

	.cmp-structure__body + .cmp-structure__body {
		margin-top: calc(24 * var(--u));
	}

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

	.cmp-structure__img--pc {
		display: none;
	}

	.cmp-structure__img--sp {
		display: block;
		width: calc(340 * var(--u));
	}

	.cmp-section {
		grid-template-columns: 1fr;
		width: calc(340 * var(--u));
		margin-top: calc(60 * var(--u));
		padding: calc(49 * var(--u)) calc(21.5 * var(--u));
	}

	.cmp-section__title {
		font-size: max(1.2rem, calc(26 * var(--u)));
		line-height: 1.4;
		letter-spacing: 0;
	}

	.cmp-section__sub {
		margin-top: calc(9.6 * var(--u));
		font-size: max(1.2rem, calc(18 * var(--u)));
		font-weight: 500;
	}

	.cmp-section__body {
		grid-column: 1;
		margin-top: calc(30 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: 1.6;
		letter-spacing: 0;
	}

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

	.company br[data-pc] {
		display: none;
	}

	.cmp-section__diagram {
		display: flex;
		justify-content: center;
	}

	.cmp-flow1__img--pc,
	.cmp-flow2__img--pc {
		display: none;
	}

	.cmp-flow1__img--sp {
		display: block;
		width: calc(294 * var(--u));
		/* PNGの縦横比が設計の矩形と違うため設計比で固定する(ツリー図と同じ)。 */
		aspect-ratio: 294 / 486;
	}

	.cmp-flow2__img--sp {
		display: block;
		width: calc(248 * var(--u));
	}

	.cmp-media {
		grid-template-columns: 1fr;
		row-gap: calc(30 * var(--u));
		margin-top: calc(50 * var(--u));
		padding-inline: calc(22.5 * var(--u));
	}

	.cmp-media__thumb {
		aspect-ratio: 250 / 164;
	}

	.cmp-more {
		margin-top: calc(30 * var(--u));
	}

	.cmp-more__btn {
		width: calc(250 * var(--u));
		height: calc(40 * var(--u));
	}

	.cmp-group__media {
		margin-top: calc(30 * var(--u));
		aspect-ratio: 294.5 / 192;
	}

	.cmp-section--group {
		margin-bottom: calc(120 * var(--u));
	}
}