@charset "UTF-8";
/**
 * ADDIX Recruit全ページ共通スタイル。
 * デザイントークン・リセット・ヘッダー・フッター・アクセシビリティ。
 * ページ固有のスタイルはassets/css/<page>.cssへ分割する。
 * Figmaデザイン(PC:1440 / SP:390)。
 *
 * スケール単位--u:
 *   PC = min(1px, 0.06944vw)…1px@1440。1440以上は据え置き、以下はvw比例縮小。
 *   SP = 0.25641vw…1px@390。純vwでビューポート幅に比例(画面フィット)。
 * 各寸法はcalc(設計px * var(--u))で表現し、設計幅(1440/390)でカンプと1px一致。
 * 線幅(1px)・行間・字間(em)・比率・色は--u非依存。
 * font-sizeはmax(1.2rem, calc(設計px * --u))。下限1.2rem(既定16pxで12px)はrem基準で、ユーザーの文字サイズ設定に追従する。
 */

:root {
	--c-white: #fff;
	--c-black: #000;
	--c-apply: #323333;
	--c-sub: #7e8387;
	/* 人を知る系のブランドグラデーション(page-heading半円・interviewのラベル/丸で共用)。 */
	--grad-person: linear-gradient(180deg, #6893ff 0%, #2839f1 100%);
	--ff-mont: "Montserrat", sans-serif;
	--ff-jp: "Noto Sans JP", sans-serif;
	/* スケール単位の候補。--u-pc=PC相似縮小(vw)/--u-sp=SP純vw/--u-fix=PC固定rem(1px相当)。
	   設計基準(SP390/PC1440)を変える時はこの3値だけ直せば全体に反映される。 */
	--u-pc: min(1px, 0.06944vw);
	--u-sp: 0.25641vw;
	--u-fix: 0.1rem;
	--u: var(--u-pc);
	--header-h: calc(90 * var(--u));
	--header-h-sp: calc(60 * var(--u));
	--shadow-soft: 0 0 calc(10 * var(--u)) rgba(0, 0, 0, 0.25);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* rem基準を1rem=10pxにする。フォント下限をremで持ち、ユーザーの文字サイズ設定に追従させる。 */
	font-size: 62.5%;
	/* 全ブリード(100vw)要素がスクロールバー幅ぶん右にはみ出して生む横スクロールを抑える。
	   clipはx方向のみを切り取り縦スクロール(overflow-y:visible)を保ち、fixed子孫の包含ブロックも作らないためfixedヘッダー(.site-header)を切り取らない。
	   ルート→ビューポートのスクロール伝播の仕様上、html・body両方への指定が必要。 */
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--ff-jp);
	font-size: 1.6rem;
	color: var(--c-black);
	background: var(--c-white);
	overflow-x: clip;
}

a {
	color: inherit;
	text-decoration: none;
	/* 参照サイト(addix.co.jp)はtransition:all 0.3s ease-outだが、allは他プロパティまで巻き込むためopacityに限定。 */
	transition: opacity 0.3s ease-out;
}

/**
 * 全リンク共通のホバー(参照: addix.co.jpのa:hover)。
 * 固有のホバーを持つリンクは末尾「グローバルホバーの除外」で個別に打ち消す。
 */
a:hover {
	opacity: 0.6;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

img,
svg {
	display: block;
	max-width: 100%;
}

button {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

/**
 * ヘッダー(共通)。
 * 透過背景・白文字。ヒーローへ重ねるため固定配置。
 */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	height: var(--header-h);
	color: var(--c-white);
	filter: drop-shadow(var(--shadow-soft));
	transition: background-color 0.3s ease, color 0.3s ease;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	padding-left: calc(30 * var(--u));
}

.site-logo {
	display: flex;
	align-items: center;
	gap: calc(20 * var(--u));
	flex-shrink: 0;
}

.site-logo__mark {
	width: auto;
	height: calc(31.54 * var(--u));
}

.site-logo__text {
	font-family: var(--ff-mont);
	font-weight: 500;
	font-size: max(1.2rem, calc(24.87 * var(--u)));
	line-height: 1;
	color: var(--c-white);
}

/**
 * SP用の一体型ロゴ(167x30・白)。
 */
.site-logo__sp {
	display: none;
}

.site-header__right {
	display: flex;
	align-items: center;
	gap: calc(40 * var(--u));
	height: 100%;
	min-width: 0;
}

.global-nav__list {
	display: flex;
	align-items: center;
	gap: calc(22 * var(--u));
}

.global-nav a {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: max(1.2rem, calc(17.41 * var(--u)));
	line-height: 1;
	color: var(--c-white);
	white-space: nowrap;
}

.header-apply {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(204 * var(--u));
	height: var(--header-h);
	padding: calc(20 * var(--u)) calc(15 * var(--u));
	background: var(--c-apply);
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(18 * var(--u)));
	line-height: 1.6;
	color: var(--c-white);
	white-space: nowrap;
	flex-shrink: 0;
}

.header-actions {
	display: none;
	height: 100%;
}

.header-apply-sp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(84 * var(--u));
	height: var(--header-h-sp);
	background: var(--c-apply);
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(11 * var(--u)));
	line-height: 1.45;
	color: var(--c-white);
	white-space: nowrap;
}

.header-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(6 * var(--u));
	width: var(--header-h-sp);
	height: var(--header-h-sp);
	background: var(--c-black);
}

.header-toggle__bar {
	width: calc(27 * var(--u));
	height: 1px;
	background: var(--c-white);
	transition: width 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

/**
 * ヘッダー(ソリッド状態)。
 * 白背景・非ボタン要素は黒。フロントはJSでKVを過ぎたら付与、下層ページはheader.phpで常時付与。
 * 応募ボタン・ハンバーガーは「ボタン」のため色を据え置く。
 */
.site-header--solid {
	color: var(--c-black);
	background: var(--c-white);
	filter: none;
}

.site-header--solid .site-logo__text,
.site-header--solid .global-nav a {
	color: var(--c-black);
}

/**
 * ロゴ画像(SVGマーク/SP一体型PNG)は白のため、黒へ反転して可視化する。
 */
.site-header--solid .site-logo__mark,
.site-header--solid .site-logo__sp {
	filter: brightness(0);
}

/**
 * SPメニュー(ハンバーガー展開)。
 * 全画面の黒オーバーレイ。ヘッダー(ロゴ・×)は上層に固定表示。
 * ナビ+応募+SNSを上、法務情報を下へspace-betweenで配置。Figma SP(390)基準。
 */
.sp-menu {
	position: fixed;
	inset: 0;
	z-index: 990;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* gapはflexの「最小間隔」。space-betweenは余白を足すだけなので、設計高(721)では
	   従来どおり法務ブロックが下端へ張り付く。画面が低く余白が負になる時だけこのgapが
	   下限として残り、SNSと個人情報が接触(潰れ)しない。 */
	gap: calc(40 * var(--u));
	padding: calc(120 * var(--u)) calc(25 * var(--u)) calc(31 * var(--u));
	background: var(--c-black);
	overflow-y: auto;
	/* 背面へのスクロール連鎖を断つ(iOS等でメニュー端まで来た時の裏スクロール防止)。 */
	overscroll-behavior: contain;
	/* 黒い面の表示/非表示は即時にし、フェードは中身(__main/__legal)側だけで行う。
	   面をフェードさせると白文字が透けた背景越しにちらつくため。 */
	visibility: hidden;
}

.sp-menu__main,
.sp-menu__legal {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.sp-menu__main {
	display: flex;
	flex-direction: column;
}

.sp-menu__list {
	display: flex;
	flex-direction: column;
	gap: calc(10 * var(--u));
}

.sp-menu__list a {
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
	color: var(--c-white);
}

.sp-menu__apply {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(45 * var(--u));
	margin-top: calc(50 * var(--u));
	border-radius: calc(22.5 * var(--u));
	background: var(--c-apply);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	color: var(--c-white);
}

.sp-menu__social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(18 * var(--u));
	margin-top: calc(50 * var(--u));
}

.sp-menu__social img {
	width: calc(34 * var(--u));
	height: calc(34 * var(--u));
}

.sp-menu__social li:last-child img {
	width: calc(42 * var(--u));
	height: calc(33 * var(--u));
}

.sp-menu__legal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(22.5 * var(--u));
}

.sp-menu__legal-links {
	display: flex;
	gap: calc(20 * var(--u));
}

.sp-menu__legal-links a {
	font-weight: 500;
	font-size: max(1.2rem, calc(12 * var(--u)));
	line-height: 1;
	color: var(--c-white);
	white-space: nowrap;
}

.sp-menu__copyright {
	margin: 0;
	font-family: var(--ff-mont);
	font-weight: 500;
	font-size: max(1.2rem, calc(11 * var(--u)));
	line-height: 1;
	color: var(--c-white);
}

body.sp-menu-open .sp-menu {
	visibility: visible;
}

body.sp-menu-open .sp-menu__main,
body.sp-menu-open .sp-menu__legal {
	opacity: 1;
}

/**
 * 背面スクロールを止める。iOS Safari等ではoverflow:hiddenだけでは効かないためbodyをposition:fixedで固定する。
 * 黒メニューが不透明で覆うため、背面がトップへ飛んでも見えない。閉じる時にJSが元のスクロール位置へ戻す。
 */
body.sp-menu-open {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

/**
 * メニュー展開中はヘッダーを黒い面(SP:全画面 / 中間幅:ドロワーの幕)へ透過で重ね、ロゴを白に戻し、応募ボタンを隠す。
 * 開いた瞬間に切り替える(遅延フェードだと白背景に白ロゴが残りちらつくため)。
 */
body.sp-menu-open .site-header {
	color: var(--c-white);
	background: transparent;
	transition: none;
}

body.sp-menu-open .site-header--solid .site-logo__sp {
	filter: none;
}

body.sp-menu-open .header-apply,
body.sp-menu-open .header-apply-sp {
	display: none;
}

/**
 * 中間幅ではロゴがPCの2要素(白マーク+白文字)のまま。ソリッド時の黒反転を戻し、幕の上で見えるようにする。
 */
body.sp-menu-open .site-header--solid .site-logo__mark {
	filter: none;
}

body.sp-menu-open .site-header--solid .site-logo__text {
	color: var(--c-white);
}

/**
 * 展開時は3本バーを×へ変形。デザインの×(約14px幅)に合わせバー幅を詰める。
 */
body.sp-menu-open .header-toggle__bar {
	width: calc(20 * var(--u));
}

body.sp-menu-open .header-toggle__bar:nth-child(1) {
	transform: translateY(calc(7 * var(--u))) rotate(45deg);
}

body.sp-menu-open .header-toggle__bar:nth-child(2) {
	opacity: 0;
}

body.sp-menu-open .header-toggle__bar:nth-child(3) {
	transform: translateY(calc(-7 * var(--u))) rotate(-45deg);
}

/**
 * フッター。
 * マークアップは共通1つ。PC/SPで並び順が異なるためgrid-template-areasを切り替え、位置調整はgrid+marginで行う。
 */
.site-footer {
	background: var(--c-black);
	color: var(--c-white);
}

.footer-nav a,
.footer-corp,
.footer-legal a,
.footer-copyright {
	color: var(--c-white);
}

.footer__inner {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding: calc(96 * var(--u)) calc(180 * var(--u)) calc(80 * var(--u));
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	justify-items: center;
	align-items: start;
	row-gap: calc(80 * var(--u));
	grid-template-areas:
		"nav   nav   nav"
		"brand brand brand"
		".     legal social";
}

.footer-nav {
	grid-area: nav;
	justify-self: stretch;
}

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* 設計(6項目)の項目間隔は69だが、7項目では設計幅1440でも1行に収まらない
	   (項目計664＋69×6=1078 > 内側1065)。66なら収まる。
	   925px以下では文字が下限12pxに張り付いて項目計443pxで止まる一方、間隔だけがvwで縮み続けるため
	   1行に収まらなくなる。残り幅の6等分で頭打ちにして1行を保つ(452=実測443＋丸めの余裕9)。
	   折り返しは項目が増減した時の保険として残す。 */
	gap: calc(20 * var(--u)) min(calc(66 * var(--u)), calc((100% - 452px) / 6));
}

.footer-nav a {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(18 * var(--u)));
	line-height: 1.6;
	white-space: nowrap;
}

.footer-brand {
	grid-area: brand;
	/* row-gap(80)に加算してナビ→ブランド間を150pxにする。 */
	margin-top: calc(70 * var(--u));
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer-brand__logo {
	width: calc(612 * var(--u));
	max-width: 100%;
	height: auto;
	aspect-ratio: 1666 / 314;
}

.footer-corp {
	display: inline-flex;
	align-items: center;
	gap: calc(4 * var(--u));
	margin-top: calc(4 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(18 * var(--u)));
	line-height: 1.6;
}

.footer-corp__arrow {
	width: calc(15 * var(--u));
	height: calc(15 * var(--u));
}

.footer-legal {
	grid-area: legal;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(14 * var(--u));
}

.footer-legal__links {
	display: flex;
	gap: calc(38 * var(--u));
}

.footer-legal a {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(14 * var(--u)));
}

.footer-copyright {
	margin: 0;
	font-family: var(--ff-mont);
	font-weight: 500;
	font-size: max(1.2rem, calc(14 * var(--u)));
}

.footer-social {
	grid-area: social;
	justify-self: end;
	align-self: center;
	display: flex;
	align-items: center;
	gap: calc(18 * var(--u));
}

.footer-social img {
	width: calc(34 * var(--u));
	height: calc(34 * var(--u));
}

.footer-social li:last-child img {
	width: calc(42 * var(--u));
	height: calc(33 * var(--u));
}

/**
 * ブレークポイント。768px以下:SP / 769px以上:PC。
 * --uを390基準の純vwへ切り替え、画面幅にフィットさせる。
 * ヘッダーだけは769〜992pxでもハンバーガーへ切り替える(理由は後段の中間幅ブロック)。
 */
@media (max-width: 768px) {
	:root {
		--u: var(--u-sp);
		--header-h: var(--header-h-sp);
	}

	.site-header {
		height: var(--header-h-sp);
		filter: none;
	}

	.site-header__inner {
		padding-left: calc(20 * var(--u));
	}

	/**
	 * ロゴをSP用一体型画像(167x30)へ差し替える。
	 */
	.site-logo__mark,
	.site-logo__text {
		display: none;
	}

	.site-logo__sp {
		display: block;
		width: auto;
		height: calc(30 * var(--u));
	}

	.global-nav,
	.header-apply {
		display: none;
	}

	.header-actions {
		display: flex;
		align-items: center;
	}

	.site-header__right {
		gap: 0;
	}

	/**
	 * フッター(SP)。縦積みへ並べ替え、要素間の間隔はrow-gapではなく各要素のmarginで与える。
	 */
	.footer__inner {
		max-width: none;
		padding: calc(60 * var(--u)) calc(25 * var(--u)) calc(30 * var(--u));
		grid-template-columns: 1fr;
		row-gap: 0;
		justify-items: stretch;
		grid-template-areas:
			"nav"
			"social"
			"brand"
			"legal";
	}

	.footer-nav__list {
		flex-direction: column;
		gap: calc(10 * var(--u));
	}

	.footer-nav a {
		font-size: max(1.2rem, calc(16 * var(--u)));
		line-height: 2;
		letter-spacing: 0.02em;
	}

	.footer-social {
		justify-self: center;
		align-self: start;
		margin-top: calc(50 * var(--u));
	}

	.footer-brand {
		justify-self: center;
		margin-top: calc(30 * var(--u));
	}

	.footer-brand__logo {
		width: calc(340 * var(--u));
	}

	.footer-corp {
		margin-top: 0;
		font-size: max(1.2rem, calc(16 * var(--u)));
	}

	.footer-legal {
		justify-self: center;
		width: calc(176 * var(--u));
		margin-top: calc(100 * var(--u));
		gap: calc(20 * var(--u));
	}

	.footer-legal__links {
		gap: calc(20 * var(--u));
	}

	.footer-legal a {
		font-size: max(1.2rem, calc(12 * var(--u)));
		white-space: nowrap;
	}

	.footer-copyright {
		font-size: max(1.2rem, calc(11 * var(--u)));
		text-align: center;
	}
}

/**
 * 中間幅(769〜992px)のヘッダー。グローバルナビをハンバーガー+右から出るドロワーへ畳む。
 *
 * ナビの文字は下限1.2rem(=12px)を持つため 17.41 × 0.06944 × 幅/100 < 12 となる992px以下では
 * 文字だけが縮まなくなり、設計で126あったロゴ↔ナビの空きが820px以下で0になって
 * ロゴの「Recruiting」とナビが接触する。
 * 12pxのまま7項目を並べると769pxでは余白の総量が53pxしか残らず、間隔を詰めても成立しない。
 */
@media (min-width: 769px) and (max-width: 992px) {
	.global-nav {
		display: none;
	}

	.header-actions {
		display: flex;
		align-items: center;
	}

	.header-apply-sp {
		display: none;
	}

	/* 応募ボタン(PC)とトグルの面を隣接させる(SPと同じ見せ方)。 */
	.site-header__right {
		gap: 0;
	}

	/* SP設計(390基準)の比率で描く。--u-pcの1.5倍にすると60×--u(=SPのヘッダー高)が
	   90×--u-pc(=PCのヘッダー高)と一致し、バー幅・×への変形・メニューの余白と文字まで揃う。 */
	.header-actions,
	.sp-menu {
		--u: calc(1.5 * var(--u-pc));
	}

	/* --header-h-spは:root宣言のためvar(--u)も:root側で解決される=ここの--uは効かない。同値を書き直す。 */
	.header-toggle {
		width: calc(60 * var(--u));
		height: calc(60 * var(--u));
	}

	/* 幅はSP設計の画面幅(390)ぶん=中身が設計どおりの寸法に収まる。
	   背面はJSがinertで不活性化するため、幕を敷いて触れないことを示す。
	   幕は外側box-shadow(要素の外・背景より下に描かれる)で作り、マークアップを増やさない。 */
	.sp-menu {
		inset: 0 0 0 auto;
		width: calc(390 * var(--u));
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
		transform: translateX(100%);
		/* visibilityは閉じる時だけ遅らせ、引っ込むアニメーションを最後まで見せる。 */
		transition: transform 0.3s ease, box-shadow 0.3s ease, visibility 0s 0.3s;
	}

	body.sp-menu-open .sp-menu {
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
		transform: none;
		transition: transform 0.3s ease, box-shadow 0.3s ease, visibility 0s;
	}

	/* 中身はドロワーと一緒に動くため、SPのフェードは行わない。 */
	.sp-menu__main,
	.sp-menu__legal {
		opacity: 1;
		transition: none;
	}
}

@media (min-width: 769px) and (max-width: 992px) and (prefers-reduced-motion: reduce) {
	.sp-menu,
	body.sp-menu-open .sp-menu {
		transition: none;
	}
}

/**
 * スキップリンク/スクリーンリーダー専用テキスト。
 * 通常時は視覚的に隠蔽し、フォーカス時のみ可視化する。
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--c-white);
	color: var(--c-black);
	z-index: 1100;
}

/**
 * ページ見出し(共通)。下層ページ共通のヒーロー見出し。
 * 和文タイトル + About + 英字ラベル + 区切り線。左端にページ別アクセント半円。
 * 配色は--accent-gradでページ別に切り替える。
 */
.page-heading {
	/* PCではvwをやめ固定rem化(伸縮しない)。SPは@media内でvwへ復帰。 */
	--u: var(--u-fix);
	position: relative;
	/* 設計の和文タイトルはy=210。行間を設計どおり120%にすると行boxの上端がy=210に来る
	   (=グリフが設計位置に一致)。人を知る/カルチャー/募集要項の3フレームで同値を確認。 */
	padding-top: calc(210 * var(--u));
}

.page-heading__accent {
	position: absolute;
	/* 1440以下は画面左端までフルブリードし半円の切り口(左の平面)を隠す。50vwを720(=1440/2)で
	   頭打ちにし、1440超では画面端へ流れず中央寄せコンテナ(page-heading幅=1440)の左端に留める。 */
	left: calc(50% - min(50vw, 720px));
	top: calc(190 * var(--u));
	width: calc(60 * var(--u));
	height: calc(119 * var(--u));
	border-radius: 0 calc(60 * var(--u)) calc(60 * var(--u)) 0;
	background-image: var(--accent-grad);
}

.page-heading__inner {
	padding-left: calc(125 * var(--u));
}

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

.page-heading__label {
	display: flex;
	align-items: baseline;
	gap: calc(10 * var(--u));
	/* 設計のAbout/英字はy=263。タイトルの行box(43.2)との差9.8がmargin。 */
	margin: calc(9.8 * var(--u)) 0 0;
	font-family: var(--ff-mont);
	font-weight: 500;
	font-size: max(1.2rem, calc(20 * var(--u)));
	line-height: 1.6;
}

.page-heading__about {
	color: var(--c-sub);
}

.page-heading__en {
	font-weight: 600;
	color: var(--c-black);
}

.page-heading::after {
	content: "";
	display: block;
	height: 1px;
	/* 設計の区切り線はy=353。ラベルの行box(32)の地端295との差58がmargin。 */
	margin: calc(58 * var(--u)) calc(60 * var(--u)) 0;
	background: var(--c-sub);
}

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

.page-heading--requirement {
	--accent-grad: linear-gradient(180deg, #8d77ff 0%, #675af6 100%);
}

/**
 * セクション見出し(共通)。
 * 短い横線 + 英題(Montserrat) + 和文サブ + 右側リード文。PCは左右2カラム、SPは縦積み。
 */
.section-heading {
	/* PCではvwをやめ固定rem化(伸縮しない)。SPは@media内でvwへ復帰。 */
	--u: var(--u-fix);
	display: grid;
	grid-template-columns: calc(405 * var(--u)) 1fr;
	align-items: start;
	padding: 0 calc(60 * var(--u));
}

.section-heading__title {
	margin: 0;
	padding-left: calc(89 * var(--u));
}

.section-heading__en {
	display: block;
	position: relative;
	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;
}

.section-heading__en::before {
	content: "";
	position: absolute;
	left: calc(-89 * var(--u));
	top: 50%;
	width: calc(60 * var(--u));
	height: 1px;
	background: var(--c-black);
}

.section-heading__ja {
	display: block;
	/* 設計の和文サブはy=556(英題y=503)。英題の行box(43.2)との差9.8がmargin。 */
	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;
}

.section-heading__lead {
	margin: 0;
	/* 設計のリード文はy=510.5=英題の7.5下。 */
	padding-top: calc(7.5 * 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;
}

/**
 * 中間幅(769〜1024px)。右のリード文が窮屈になるため、SP同様に見出しの下へ縦積みする。
 * フォント等はPCの固定remのまま。
 */
@media (min-width: 769px) and (max-width: 1024px) {
	.section-heading {
		grid-template-columns: 1fr;
	}

	.section-heading__lead {
		margin-top: calc(40 * var(--u));
		padding-top: 0;
		padding-left: calc(89 * var(--u));
		padding-right: calc(89 * var(--u));
	}
}

@media (max-width: 768px) {
	.page-heading {
		/* SPはvwスケールへ復帰。 */
		--u: var(--u-sp);
		/* 設計SPの和文タイトルはy=108.5。 */
		padding-top: calc(108.5 * var(--u));
	}

	.page-heading__accent {
		top: calc(100 * var(--u));
		width: calc(40 * var(--u));
		height: calc(79 * var(--u));
		border-radius: 0 calc(40 * var(--u)) calc(40 * var(--u)) 0;
	}

	.page-heading__inner {
		padding-left: calc(65 * var(--u));
	}

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

	.page-heading__label {
		gap: calc(8 * var(--u));
		/* 設計SPはAbout/英字y=144.5=タイトルの行box(36.4)の直下。 */
		margin-top: 0;
		font-size: max(1.2rem, calc(17 * var(--u)));
	}

	.page-heading::after {
		/* 設計SPの区切り線はy=199。ラベルの行box(27.2)の地端172.1との差27がmargin。 */
		margin: calc(27 * var(--u)) calc(25 * var(--u)) 0;
	}

	.section-heading {
		/* SPはvwスケールへ復帰。 */
		--u: var(--u-sp);
		grid-template-columns: 1fr;
		padding: 0 calc(25 * var(--u));
	}

	.section-heading__title {
		padding-left: calc(45 * var(--u));
	}

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

	.section-heading__en::before {
		left: calc(-45 * var(--u));
		width: calc(35 * var(--u));
	}

	/**
	 * 設計SPは英題y=279(行box36)→和文サブy=325=差10、リード文y=369=和文サブ地端349の20下。
	 * 見出し全体の高さは設計の186(=36+10+24+20+96)。
	 */
	.section-heading__ja {
		margin-top: calc(10 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
	}

	.section-heading__lead {
		margin-top: calc(20 * var(--u));
		padding-top: 0;
		padding-right: calc(65 * var(--u));
		padding-left: calc(45 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: calc(24 / 15);
		letter-spacing: 0;
	}
}

/**
 * タグ(#ハッシュタグ枠)。
 * 人物・プロジェクト・インタビューの各カードで共有するアトム。スケールは呼び出し側の--uを継承する。
 */
.card-tag {
	display: inline-flex;
	align-items: center;
	/* 枠は設計32(=行box24+上下4)。上下4・左右13は枠線1pxを含むためpaddingは3/12。
	   min-heightはfont-sizeが下限1.2remに張り付く極狭幅でのみ効く保険。 */
	min-height: calc(31 * var(--u));
	padding: calc(3 * var(--u)) calc(12 * var(--u));
	border: 1px solid var(--c-black);
	border-radius: calc(9.5 * var(--u));
	max-width: 100%;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(15 * var(--u)));
	line-height: 1.6;
	overflow-wrap: anywhere;
}

@media (max-width: 768px) {
	/**
	 * SPは人物カードのタグが基準(14px・行間150%)で枠29。
	 * X Talkのタグだけ15px・160%のままなのでperson.css側で戻す(設計が両者で分岐)。
	 */
	.card-tag {
		min-height: calc(28 * var(--u));
		font-size: max(1.2rem, calc(14 * var(--u)));
		line-height: 1.5;
	}
}

/**
 * グローバルホバーの除外。
 * 冒頭のa:hover(opacity 0.6)は全リンクに効く。ここに挙げたリンクは固有のホバーを持ち、
 * 薄化が重なると二重に見えるため打ち消す。除外を増やす時はこの1箇所に足す。
 *
 * button要素(header-toggle/msg-qa__trigger/iv-more__arrow)はaではないためグローバルの対象外。
 * req-tabもlabelのため対象外。
 */
.cmp-more__btn:hover,
.work-cases__more-btn:hover {
	/* 白地→黒地へ反転する枠線ボタン(company.css / work.css)。 */
	opacity: 1;
}

.msg__more:hover {
	/* 黄グラデーションで塗るボタン(front.css)。 */
	opacity: 1;
}

.guide__card:hover {
	/* ホバーでグラデーション+文字色が反転するカード(front.css)。 */
	opacity: 1;
}

/**
 * 応募ボタンのホバー。
 * 参照サイト(addix.co.jp)のヘッダーボタンは背景が親要素にあり、a自身は透明なため
 * 「文字だけが薄くなり背景は残る」。当サイトは背景をa自身に持つため、a全体を薄くすると
 * 背景まで透けて下地が見える。グローバルの薄化を打ち消し、ラベルのspanだけを薄くして同じ見え方にする。
 *
 * sp-menu__applyは厳密にはヘッダーではないが、同じ応募CTAであり、かつ黒いオーバーレイ上にあるため
 * a全体を薄くするとボタンが背景に溶けて消える。
 */
.header-apply:hover,
.header-apply-sp:hover,
.sp-menu__apply:hover {
	opacity: 1;
}

.apply-label {
	transition: opacity 0.3s ease-out;
}

.header-apply:hover .apply-label,
.header-apply-sp:hover .apply-label,
.sp-menu__apply:hover .apply-label {
	opacity: 0.6;
}

/**
 * 汎用ページ / 404。専用テンプレート(page-{slug}.php)を持たないリクエスト向けの最小レイアウト。
 * デザインカンプが無いため、--uスケールには載せず素のrem(1rem=10px)で簡潔に組む。
 */
.error-page {
	max-width: 96rem;
	margin-inline: auto;
	padding: 16rem 6rem 20rem;
	text-align: center;
}

.error-page__code {
	margin: 0;
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: 12rem;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--c-sub);
}

.error-page__title {
	margin: 2.4rem 0 0;
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: 2.8rem;
	line-height: 1.4;
	color: var(--c-black);
}

.error-page__lead {
	margin: 2rem 0 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.8;
	color: var(--c-sub);
}

.error-page__home {
	display: inline-block;
	margin-top: 4.8rem;
	padding: 1.6rem 4.8rem;
	border: 1px solid var(--c-black);
	border-radius: 9999px;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--c-black);
	transition: color 0.2s, background-color 0.2s;
}

.error-page__home:hover,
.error-page__home:focus-visible {
	color: var(--c-white);
	background-color: var(--c-black);
}

.page-generic {
	max-width: 96rem;
	margin-inline: auto;
	padding: 12rem 6rem 16rem;
}

.page-generic__title {
	margin: 0 0 4.8rem;
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: 3.2rem;
	line-height: 1.4;
	color: var(--c-black);
}

.page-generic__body {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.9;
	color: var(--c-black);
}

@media (max-width: 768px) {
	.error-page {
		padding: 10rem 2.5rem 12rem;
	}

	.error-page__code {
		font-size: 8rem;
	}

	.error-page__title {
		font-size: 2.2rem;
	}

	.page-generic {
		padding: 8rem 2.5rem 10rem;
	}

	.page-generic__title {
		font-size: 2.4rem;
	}
}