/* ==========================================================================
   Amicus corporate site — base stylesheet
   ========================================================================== */

:root {
	--color-navy: #14294d;
	--color-navy-deep: #0c1c38;
	--color-blue: var(--blue); /* 旧トークン。青は --blue（#3C64B8）に統一 */
	--blue: #3c64b8;
	--color-blue-soft: #eaf1ff;
	--color-ink: #1a1a1a;
	--color-ink-soft: #5a6472;
	--color-bg: #ffffff;
	--color-bg-soft: #f5f7fb;
	--color-bg-gray: #f2f2f2;

	/* デザイントークン（Figma の生値ではなくこちらを使う） */
	--blue-deep: #2e3775;
	--ink: #2b2b2b;
	--gray-bg: #efecec;
	--blue-pale: #d4e6f9; /* 表の見出し列など */
	--line: #808080;      /* 表の罫線 */
	--blue-mid: #6f8fcc;   /* グラフの中間色（--blue と --blue-pale の間） */
	--blue-light: #a9bfe6;
	/* 数字でみる：グラフの配色（Figma の実色。濃い→淡い） */
	--chart-1: #004786;
	--chart-2: #1c64bc;
	--chart-3: #4383c4;
	--chart-4: var(--blue-pale); /* #d4e6f9 */
	--chart-5: #f7fafc;
	--chart-line: #ccc;         /* 引き出し線・カギ線 */
	--chart-word: #5b95ce;      /* ワードクラウドの淡い語 */
	--color-border: #e3e8ef;
	--color-white: #ffffff;

	--font-jp: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
	--font-en: 'Montserrat', var(--font-jp); /* 数字 */
	--font-heading-en: 'Inter', var(--font-jp); /* 英字見出し（ABOUT US・MISSION など。Figma は Inter Bold） */
	/* 段落本文の太さ（見出し・強調の 700 より一段軽く）。本文を一括で変えるときはここ */
	--fw-body: 500;

	--container: 1160px;
	--radius: 8px;
}

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

html {
	scroll-behavior: smooth;
	/* sticky ヘッダーの下に隠れないよう、アンカー移動の止まり位置を下げる（--header-h は main.js が実測値で更新） */
	scroll-padding-top: var(--header-h, max(64px, min(122px, 6.354vw)));
}

body {
	margin: 0;
	font-family: var(--font-jp);
	color: var(--color-ink);
	background: var(--color-bg);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

.u-nowrap { white-space: nowrap; }

/* キーボードフォーカス：全リンク・ボタンで見えるように（青地の上では白） */
:where(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}
:where(.recruit, .site-header__contact) :focus-visible,
.site-header__contact:focus-visible { outline-color: var(--color-white); }
.site-header__contact:focus-visible { box-shadow: 0 0 0 6px var(--blue); }

/* › アイコン（RECRUIT・フッターのリンク） */
.chevron {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
}

.u-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Placeholder blocks (swap for real photography) -------------------------- */
.ph {
	background: linear-gradient(135deg, var(--color-blue-soft), #dbe6fb);
	position: relative;
	overflow: hidden;
}
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* Section heading system --------------------------------------------------- */
.section-label {
	display: block;
	font-family: var(--font-en);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	color: var(--color-blue-soft);
	-webkit-text-stroke: 1px var(--color-blue);
	writing-mode: vertical-rl;
	letter-spacing: 0.05em;
	line-height: 1;
}
.section-label--center {
	writing-mode: horizontal-tb;
	text-align: center;
	margin-bottom: 0.5em;
}
.section-label--solid {
	font-family: var(--font-heading-en);
	font-style: normal;
	font-weight: 700;
	color: #333;
	-webkit-text-stroke: 0;
	letter-spacing: 0;
}
/* 英字見出しを SVG にしたとき（functions.php の amicus_en_label）：文字と同じ大きさ（大文字の高さ）で置く。
   block-size なので縦組み（ABOUT US・CULTURE）では幅、横組みでは高さになる */
.section-label--img img {
	block-size: 0.72em;
	inline-size: auto;
	max-inline-size: 100%;
}
.section-label--right {
	writing-mode: horizontal-tb;
	text-align: right;
}
.section-label--inverse {
	writing-mode: horizontal-tb;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,0.6);
}

.section-heading {
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	font-weight: 700;
	line-height: 1.6;
	margin: 1rem 0 1.2rem;
}
.section-heading--center { text-align: center; }
.section-heading--inverse { color: var(--color-white); }

.section-lead {
	color: var(--color-ink-soft);
	font-size: 0.95rem;
	margin-bottom: 2rem;
}
.section-lead--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 46em; }
.section-lead--inverse { color: rgba(255,255,255,0.85); }

.circle-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	margin-left: 0.6em;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.8em;
}

.text-link {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	color: var(--color-ink);
}

/* Layout helpers ------------------------------------------------------------ */
.top > section { padding: clamp(3rem, 8vw, 6rem) 1.25rem; }

/* Figma のページ幅 1920px 基準の長さ単位。calc(N * var(--px)) で「デザイン上の N px」を
   画面幅に比例させる（1920px 以上は等倍で止める）。.top 直下のセクションで使う */
.top {
	container-type: inline-size;
	--px: min(1px, 100cqi / 1920);
}

/* Header -------------------------------------------------------------------- */
/* Figma ヘッダー：ページ左 44.5px／右 98.5px、高さ 122px（上 47px＋ボタン 75px。上下均等に振り分け）。
   全ページ共通なので、ヘッダー自身を --px（デザイン上の px）の基準コンテナにする */
.site-header {
	container-type: inline-size;
	--px: min(1px, 100cqi / 1920);
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
	transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); }
.site-header__inner {
	display: flex;
	align-items: center;
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(23.5 * var(--px)) calc(98.5 * var(--px)) calc(23.5 * var(--px)) calc(44.5 * var(--px));
}
.site-logo { display: block; width: max(140px, calc(293 * var(--px))); transition: opacity 0.2s; }
.site-logo:hover,
.site-footer__logo:hover { opacity: 0.75; }
.site-logo__img { width: 100%; }

.global-nav { margin-left: auto; }
.global-nav__list {
	display: flex;
	gap: max(0.75rem, calc(38 * var(--px)));
	font-size: max(0.875rem, calc(21 * var(--px)));
	font-weight: 700;
	color: #333;
}
.global-nav__list a { white-space: nowrap; transition: color 0.2s; }
.global-nav__list a:hover,
.global-nav__list a:focus-visible { color: var(--blue); }

/* メガメニュー：親（リンク or ボタン）＋ ∨。開閉は main.js が .is-open と aria-expanded を付け外し
   （PC はホバー／クリック／キーボード、1023px 以下はアコーディオン） */
.global-nav__item { position: relative; }
.global-nav__head { display: flex; align-items: center; }
.global-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-weight: inherit;
	white-space: nowrap;
	transition: color 0.2s;
}
.global-nav__toggle { padding: 0; color: inherit; transition: color 0.2s; }
.global-nav__toggle:hover,
.global-nav__item.is-open > .global-nav__head > * { color: var(--blue); }
.global-nav__chevron {
	flex: none;
	width: 0.6em;
	height: 0.4em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	transition: transform 0.25s ease;
}
.global-nav__item.is-open .global-nav__chevron { transform: rotate(180deg); }
.global-nav__sub-list a { display: block; transition: color 0.2s, background-color 0.2s; }
/* アミクスの人：「イニシャル 入社年 職種」を 1 行で。収まらないとイニシャル（DOM 上 2 つ目）が折り返して
   1 行分の高さで切られ、「入社年 職種」だけが残る */
.global-nav__member {
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: flex-end;
	column-gap: 0.5em;
	height: 1.5em;
	overflow: hidden;
	line-height: 1.5;
}
.global-nav__member > span { white-space: nowrap; }

@media (min-width: 1024px) {
	.global-nav { padding-left: 1rem; } /* ロゴとの最小の間（狭い PC 幅で詰まらないように） */
	.global-nav__list { align-items: center; }
	.global-nav__head > .global-nav__toggle:not(.global-nav__link) {
		display: grid;
		place-items: center;
		width: 1em;
		height: 1.6em;
		margin-left: 0.15em;
	}
	/* ドロップダウン：親の真下・中央。上の padding はヘッダー下端までの「橋」（ホバーが途切れないように） */
	.global-nav__sub {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 10;
		padding-top: max(10px, calc(16 * var(--px))); /* 親の文字のすぐ下に出す（ヘッダーの下端まで離すと遠く見えるため） */
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}
	.global-nav__item.is-open > .global-nav__sub {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}
	.global-nav__sub-list {
		min-width: 12.5em;
		padding: 0.4em 0;
		border-top: 3px solid var(--blue);
		background: var(--color-white);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
		font-size: max(0.875rem, calc(18 * var(--px)));
	}
	.global-nav__sub-list li + li { border-top: 1px solid var(--color-border); }
	.global-nav__sub-list a { padding: 0.75em 1.4em; }
	/* 中身の幅に合わせて広げ、上限を超えたら .global-nav__member がイニシャルを落とす */
	.global-nav__sub-list--members { width: max-content; max-width: min(22em, calc(100vw - 2rem)); }
	/* サブのホバー：青地に白文字へ反転 */
	.global-nav__list .global-nav__sub-list a:hover,
	.global-nav__list .global-nav__sub-list a:focus-visible {
		background: var(--blue);
		color: var(--color-white);
	}
	.global-nav__sub-list a:focus-visible { outline-color: var(--blue-deep); outline-offset: -3px; }
}

/* お問い合わせ：青いピル（Figma 243×75px、アイコン 左 34px） */
.site-header__contact {
	display: flex;
	align-items: center;
	gap: max(0.5rem, calc(27 * var(--px)));
	width: max(150px, calc(243 * var(--px)));
	height: max(44px, calc(75 * var(--px)));
	margin-left: max(1.25rem, calc(66.5 * var(--px)));
	padding-left: max(1rem, calc(34 * var(--px)));
	border-radius: 999px;
	background: var(--blue);
	color: var(--color-white);
	font-size: max(0.8125rem, calc(18 * var(--px)));
	font-weight: 700;
	white-space: nowrap;
	transition: opacity 0.2s;
}
.site-header__contact:hover,
.site-header__contact:focus-visible { opacity: 0.85; }
.site-header__contact-icon { flex: none; width: max(18px, calc(26.7 * var(--px))); }
.site-header__contact-body { fill: var(--color-white); }
.site-header__contact-flap { fill: none; stroke: var(--blue); stroke-width: 1.34; }

/* メニュー内のお問い合わせ（スマホだけ表示。767px 以下の指定で出す） */
.global-nav__contact { display: none; }

/* ハンバーガー（1023px 以下で表示） */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	margin-left: 0.5rem;
}
.nav-toggle span:not(.u-sr-only) {
	width: 24px;
	height: 2px;
	background: #333;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
/* 開いている間は × に変化 */
.site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1023px) {
	.site-header__inner { min-height: 64px; padding: 0.625rem 0.75rem 0.625rem 1.25rem; }
	.site-header__contact {
		width: auto;
		height: 40px;
		margin-left: auto;
		padding: 0 1rem;
		gap: 0.5rem;
		font-size: 0.8125rem;
	}
	.nav-toggle { display: flex; }

	/* メニュー：ヘッダーの下に上からドロップ */
	.global-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		background: var(--color-white);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	}
	.site-header.is-open .global-nav {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
	.global-nav {
		max-height: calc(100dvh - 64px); /* 長いとき（アコーディオンを開いたとき）はメニューの中だけスクロール */
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.global-nav__list {
		flex-direction: column;
		gap: 0;
		padding: 0.25rem 1.25rem 1rem;
		font-size: 1rem;
	}
	.global-nav__item { border-bottom: 1px solid var(--color-border); }
	.global-nav__link {
		flex: 1;
		justify-content: space-between;
		padding: 1rem 0;
		text-align: left;
	}
	/* 親名がリンクのとき：右端の ∨ だけがアコーディオンのボタン（タップしやすい 48px 角） */
	.global-nav__head > .global-nav__toggle:not(.global-nav__link) {
		display: flex;
		align-items: center;
		justify-content: flex-end; /* ∨ の位置を、親名ごとボタンの行（アミクスの人・採用情報）と揃える */
		flex: none;
		width: 48px;
		align-self: stretch;
	}
	.global-nav__chevron { width: 0.75em; height: 0.5em; }
	/* アコーディオン：開いた項目だけ表示 */
	.global-nav__sub { display: none; }
	.global-nav__item.is-open > .global-nav__sub { display: block; }
	.global-nav__sub-list {
		margin: -0.25rem 0 0.75rem;
		padding-left: 1rem;
		border-left: 2px solid var(--blue);
		font-size: 0.9375rem;
		font-weight: 500;
	}
	.global-nav__sub-list a { padding: 0.6rem 0; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.site-header,
	.global-nav,
	.global-nav__sub,
	.global-nav__chevron,
	.nav-toggle span { transition: none !important; }
}

/* Hero ------------------------------------------------------------------ */
/* Figma TOP：ページ左 267.6px／右 329.5px、ヘッダー下から 75px。
   テキストと画像を同じグリッド行に重ね、文字サイズ・余白は cqi でフレーム幅に比例させる
   （1cqi = 13.23px @1323px） */
.top > .hero {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(75 * var(--px)) calc(329.5 * var(--px)) 0 calc(267.6 * var(--px));
}
.hero__inner {
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 609fr) minmax(0, 714fr);
	align-items: center;
}
.hero__body {
	grid-area: 1 / 1 / 2 / 3;
	position: relative;
	z-index: 1;
	padding-left: 0.9cqi;
	color: #333;
}
.hero__media {
	grid-area: 1 / 2;
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	aspect-ratio: 1;
	border-radius: 22px;
	overflow: hidden;
	background: var(--color-blue-soft);
}
.hero__slide {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 80% 50%;
	opacity: 0;
	/* JS の FADE_MS と揃える */
	transition: opacity 0.8s ease;
}
.hero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.hero__slide { transition: none; }
}
.hero__title {
	font-size: max(1.75rem, 5.21cqi);
	font-weight: 700;
	line-height: 1.44;
	margin: 0 0 3.5cqi;
}
.hero__lead {
	font-size: max(0.875rem, 1.81cqi);
	font-weight: 700;
	line-height: 1.58;
	margin-bottom: 4.8cqi;
}
.hero__lead p:first-child { text-indent: -0.5em; } /* 先頭の「を半角ぶん左へ */
.hero__lead p + p { margin-top: 1.58em; }
.hero__cta {
	display: flex;
	align-items: center;
	width: 52.4cqi;
	min-height: 5.3cqi;
	padding: 0.5em 2.6cqi 0.5em 1.81cqi;
	background: var(--blue);
	color: var(--color-white);
	font-size: max(0.875rem, 1.81cqi);
	font-weight: 700;
	line-height: 1.4;
	/* 右下を斜めに落とす（Figma: 幅693中28px） */
	clip-path: polygon(0 0, 100% 0, calc(100% - 2.12cqi) 100%, 0 100%);
	transition: background-color 0.2s;
}
.hero__cta:hover,
.hero__cta:focus-visible { background: var(--color-navy); }

/* ABOUT US ------------------------------------------------------------------ */
/* Figma ABOUT：ページ左 71.8px／右 89.5px、ヒーロー下から 85.5px。幅 1758.7px の中を
   Figma の x 座標どおり 7 列（英字 | 余白 | 本文 | 余白 | カード | 余白 | カード）に割る。
   2 行目はリンク＋カード見出しで、カードは subgrid で行を揃える（1cqi = 17.59px @1759px） */
.top > .about {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(85.5 * var(--px)) calc(89.5 * var(--px)) 0 calc(71.8 * var(--px));
}
.about__inner {
	container-type: inline-size;
	display: grid;
	grid-template-columns:
		minmax(0, 149fr) minmax(0, 77fr) minmax(0, 576fr) minmax(0, 177fr)
		minmax(0, 368fr) minmax(0, 44fr) minmax(0, 368fr);
	/* 3 行目は縦組み英字の余り（英字の方が長いので、その分を 1・2 行目に配らない） */
	grid-template-rows: auto auto 1fr;
	row-gap: 2.76cqi;
	color: #333;
}
.about__label {
	grid-area: 1 / 1 / 4 / 2;
}
.about__label,
.culture__label {
	/* 縦組みでは cqi が縦方向を指すため、横幅基準の cqw で指定（Figma 123.48px） */
	font-size: 7.02cqw;
}
.about__body { grid-area: 1 / 3; }
.about__title,
.culture__title {
	font-size: max(1.375rem, 1.82cqi);
	font-weight: 700;
	line-height: 1.22;
	margin-bottom: 2.39cqi;
}
.about__sub,
.about__text,
.culture__sub,
.culture__text {
	font-size: max(0.875rem, 1.3645cqi); /* 24px＝列幅 576px にちょうど 24 字。1.365 だと 0.15px はみ出して 1 字早く折り返す */
	font-weight: 700;
	line-height: 1.58;
}
.about__text,
.culture__text { font-weight: var(--fw-body); }
.about__sub span,
.culture__sub span { display: inline-block; } /* 折り返すなら読点の後で */
.about__text,
.culture__text { margin-top: 1.58em; }
.about__links {
	grid-area: 2 / 3 / 3 / 5;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 7.03cqi;
	padding-left: 10.35cqi;
}
.about__links li { display: flex; } /* カード見出しと上端を揃える */
.about .text-link,
.culture .text-link {
	color: inherit;
	font-size: max(0.875rem, 1.365cqi);
	transition: color 0.2s;
}
.about .circle-arrow,
.culture .circle-arrow { margin-left: 1.8em; }
.about a.text-link:hover,
.about a.text-link:focus-visible,
.about-card:hover .about-card__label,
.about-card:focus-visible .about-card__label { color: var(--blue); }
/* 画像カード：画像を少し薄く（PEOPLE・CULTURE と同じ） */
.about-card:hover .about-card__media,
.about-card:focus-visible .about-card__media { opacity: 0.8; }

.about-card {
	grid-area: 1 / 5 / 3 / 6;
	display: grid;
	grid-template-rows: subgrid;
}
.about-card ~ .about-card { grid-column: 7; }
.about-card__media {
	transition: opacity 0.25s ease;
	align-self: start;
	margin-top: 6.28cqi;
	aspect-ratio: 1;
	border-radius: 22px;
	overflow: hidden;
	background: var(--color-bg-soft);
}
.about-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about-card__img--message { object-position: 63% 50%; }
/* 数字でみるアミクス：グレー地に左上の青い斜め（Figma：右上 96.7%／左下 80% を結ぶ線）、
   PC はカード左 18px・上 84px に置いて右端ははみ出させる（Figma 368px 角のカード比） */
.about-card__media--numbers {
	display: block;
	background:
		linear-gradient(to bottom right, var(--blue) 50%, transparent 50%) top left / 96.7% 80% no-repeat,
		var(--color-bg-gray);
}
.about-card__img--numbers {
	width: 112.2%;
	max-width: none;
	height: auto;
	margin: 22.7% 0 0 4.9%;
	object-fit: fill;
}
.about-card__label { padding-left: 1cqi; }

/* CULTURE ----------------------------------------------------------------- */
/* Figma CULTURE：ページ左 71.1px／右 89.3px、PEOPLE 下から 227.7px。
   ABOUT と同じ 7 列（英字 | 余白 | 本文 | 余白 | カード | 余白 | カード）に乗せ、
   右側の 2×2 カードは subgrid で列を共有する（1cqi = 17.6px @1759px） */
.top > .culture {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(227.7 * var(--px)) calc(89.3 * var(--px)) 0 calc(71.1 * var(--px));
}
.culture__inner {
	container-type: inline-size;
	display: grid;
	grid-template-columns:
		minmax(0, 149fr) minmax(0, 77fr) minmax(0, 576fr) minmax(0, 177fr)
		minmax(0, 368fr) minmax(0, 44fr) minmax(0, 368fr);
	align-items: start;
	color: #333;
}
.culture__label { grid-column: 1; margin-top: 0.17cqi; }
.culture__body { grid-column: 3; margin-top: 0.37cqi; }
.culture__text-first { display: block; white-space: nowrap; } /* Figma は 1 文目だけ 1 行 */
.culture__cards {
	grid-column: 5 / 8;
	display: grid;
	grid-template-columns: subgrid;
	row-gap: 2.46cqi;
}
.culture__cards > li:nth-child(odd) { grid-column: 1; }
.culture__cards > li:nth-child(even) { grid-column: 3; }
.culture-card { display: block; }
.culture-card__media {
	display: block;
	aspect-ratio: 368 / 264;
	border-radius: 22px;
	overflow: hidden;
	background: var(--color-bg-soft);
	transition: opacity 0.25s ease;
}
.culture-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.culture-card__label {
	margin-top: 1.42cqi;
	padding-left: 1cqi;
	line-height: 1.3; /* 丸矢印の高さ（Figma 31px）に合わせる */
}
/* ホバー：画像を少し薄く＋わずかにズーム＋ラベルを青に */
.culture-card:hover .culture-card__media,
.culture-card:focus-visible .culture-card__media { opacity: 0.8; }
.culture-card:hover .culture-card__img,
.culture-card:focus-visible .culture-card__img { transform: scale(1.04); }
.culture-card:hover .culture-card__label,
.culture-card:focus-visible .culture-card__label { color: var(--blue); }
@media (prefers-reduced-motion: reduce) {
	.culture-card__img { transition: none; }
	.culture-card:hover .culture-card__img,
	.culture-card:focus-visible .culture-card__img { transform: none; }
}

.link-list li + li { border-top: 1px solid var(--color-border); }
.link-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em 0.25em;
	font-weight: 700;
}

/* OUR BUSINESS ------------------------------------------------------------- */
/* Figma BUSINESS：ページ左 292.5px／右 149.4px、ABOUT 下から 106.7px。
   中身は幅 1478px 基準の cqi（1cqi = 14.78px）、カード内はカード幅 310px 基準の cqi */
.top > .business {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(106.7 * var(--px)) calc(149.4 * var(--px)) 0 calc(292.5 * var(--px));
}
.business__inner {
	container-type: inline-size;
	color: #333;
}
.business__label {
	font-size: 8.354cqi;
	line-height: 1.21;
}
.business__title {
	font-size: max(1.375rem, 2.165cqi);
	font-weight: 700;
	line-height: 1.22;
	margin: 1.33cqi 0 2.84cqi 0.34cqi;
}
.business__text {
	max-width: 54em; /* Figma の折り返し幅 1296px */
	margin-left: 0.34cqi;
	font-size: max(0.875rem, 1.624cqi);
	font-weight: var(--fw-body);
	line-height: 1.58;
}
.business__more {
	display: flex;
	justify-content: flex-end;
	width: 92.85cqi; /* カード列の右端に揃える */
	margin-top: 1.81cqi;
	padding-right: 0.7cqi;
}
.business .text-link {
	color: inherit;
	font-size: max(0.875rem, 1.624cqi);
	transition: color 0.2s;
}
.business .text-link:hover,
.business .text-link:focus-visible { color: var(--blue); }
.business .circle-arrow { margin-left: 1.8em; }

.business__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3cqi;
	width: 92.85cqi;
	margin-top: 6cqi;
}
.business-card {
	container-type: inline-size;
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	aspect-ratio: 310 / 385;
	padding: 1.5cqi 0 5.8cqi;
	border: 2px solid var(--blue);
	background: var(--color-white);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.business-card:hover,
.business-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(60, 100, 184, 0.18);
}
@media (prefers-reduced-motion: reduce) {
	.business-card { transition: none; }
}
.business-card__num {
	font-size: clamp(2.5rem, 23.2cqi, 4.5rem);
	font-weight: 700;
	line-height: 1.21;
	color: var(--blue);
}
.business-card__illust {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
/* Figma 上のイラスト幅（カード幅 310px 比） */
.business-card__img { width: 87%; height: auto; }
.business__cards > li:nth-child(2) .business-card__img { width: 95%; }
.business__cards > li:nth-child(3) .business-card__img { width: 100%; }
.business__cards > li:nth-child(4) .business-card__img { width: 84%; }
.business-card__illust .ph { width: 87%; aspect-ratio: 3 / 2; }
.business-card__label {
	display: flex;
	align-items: center;
	min-height: 2.5em; /* 1行のラベルも 2 行分の高さで中央に置く */
	font-size: clamp(0.875rem, 7.74cqi, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

/* PEOPLE&WORKS -------------------------------------------------------------- */
/* Figma PEOPLE：ページ左 91.5px／右 59.3px、BUSINESS 下から 107.3px。
   中身は幅 1769px 基準の cqi（1cqi = 17.69px）、カード内はカード幅 310px 基準の cqi */
.top > .people {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(107.3 * var(--px)) calc(59.3 * var(--px)) 0 calc(91.5 * var(--px));
}
.people__inner {
	container-type: inline-size;
	color: #333;
}
.people__label {
	writing-mode: horizontal-tb;
	font-size: 6.98cqi;
	line-height: 1.21;
}
.people__title {
	font-size: max(1.375rem, 1.81cqi);
	font-weight: 700;
	line-height: 1.22;
	margin: 0.24cqi 0 2.74cqi 0.12cqi;
}

/* カルーセル：scroll-snap ＋ main.js でクローンを使った無限ループ */
.people__track {
	position: relative; /* JS がカード位置（offsetLeft）を測る基準 */
	display: flex;
	gap: 3.007cqi;
	padding-left: 0.17cqi;
	scroll-padding-left: 0.17cqi; /* 吸着位置も左余白ぶんずらす */
	overflow-x: auto;
	overflow-y: hidden; /* x だけ auto にすると y も auto になり、1〜2px の縦スクロールが出るため */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.people__track::-webkit-scrollbar { display: none; }

.person-card {
	container-type: inline-size;
	flex: 0 0 17.516cqi;
	scroll-snap-align: start;
	color: #333;
}
.person-card__link { display: block; }
.person-card__photo {
	display: grid; /* 写真とキャッチを同じセルに重ねる */
	aspect-ratio: 309.89 / 431.49;
	overflow: hidden;
}
.person-card__img,
.person-card__quote { grid-area: 1 / 1; }
.person-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 顔（頭）の高さを横並びで揃える。人ごとの微調整は ACF「カード写真の縦位置」→ --photo-y */
	object-position: center var(--photo-y, 25%);
}
.person-card__quote {
	align-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3.23cqi;
	margin-bottom: 4.36cqi;
	/* カード幅 310px で 20px＝1 行 14 文字まで収まる（Figma は 26px だが長いキャッチがはみ出すため縮小） */
	font-size: max(0.8125rem, 6.45cqi);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-white);
}
.person-card__quote span {
	max-width: 100%;
	background: var(--blue);
	padding: 0.54em 0.53em;
	/* 1 行＝1 吹き出し。カード幅を超える長さのときだけ吹き出しの中で折り返す */
	overflow-wrap: anywhere;
}
.person-card__meta {
	display: flex;
	flex-direction: column;
	margin-top: 6.6cqi;
	font-size: max(0.875rem, 7.745cqi);
	font-weight: 700;
	line-height: 1.25;
}
/* ホバー：写真を少し薄く＋名前を青に */
.person-card__photo,
.person-card__meta { transition: opacity 0.25s ease, color 0.25s ease; }
.person-card__link:hover .person-card__photo,
.person-card__link:focus-visible .person-card__photo { opacity: 0.8; }
.person-card__link:hover .person-card__meta,
.person-card__link:focus-visible .person-card__meta { color: var(--blue); }

/* 罫線 ＋ ◄ | ► ボタン（Figma：罫線 1363px、間 45px、ボタン 174×54px） */
.people__controls {
	display: flex;
	align-items: center;
	gap: 2.54cqi;
	width: 89.53cqi;
	margin-top: 0.96cqi;
	padding-left: 0.11cqi;
}
.people__rule {
	flex: 1;
	border-top: 1px solid #333;
}
.people__buttons {
	display: flex;
	align-items: center;
	width: 9.835cqi;
	min-width: 120px;
	height: 3.05cqi;
	min-height: 40px;
	border-radius: 999px;
	background: var(--blue);
}
.people__prev,
.people__next {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #f2f2f2;
	transition: opacity 0.2s;
}
.people__prev { border-right: 1px solid rgba(242, 242, 242, 0.6); }
.people__prev:hover,
.people__next:hover,
.people__prev:focus-visible,
.people__next:focus-visible { opacity: 0.7; }
.people__prev svg,
.people__next svg { width: 17.5px; height: 14.3px; fill: currentColor; }

/* 一覧ページ（archive-member）でも同じカードを使う */
.people-grid .person-card { flex: none; }

/* RECRUIT -------------------------------------------------------------------- */
/* Figma RECRUIT：全幅の青帯（CULTURE 下から 145px）。帯の中身はページ左 94.5px／右 156px、
   左＝英字・見出し・本文、右＝募集要項・FAQ・エントリー（1cqi = 16.7px @1669.5px） */
.top > .recruit {
	margin-top: calc(145 * var(--px));
	padding: calc(83.9 * var(--px)) 0 calc(173.5 * var(--px));
	background: var(--blue);
	color: var(--color-white);
}
.recruit__inner {
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 900.9fr) minmax(0, 768.6fr);
	align-items: start;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 calc(156 * var(--px)) 0 calc(94.5 * var(--px));
}
.recruit__label {
	writing-mode: horizontal-tb;
	color: var(--color-white);
	font-size: 7.396cqi;
	line-height: 1.21;
}
.recruit__title,
.recruit__heading {
	font-size: max(1.375rem, 1.917cqi);
	font-weight: 700;
	line-height: 1.22;
}
.recruit__title { margin: 0.815cqi 0 0 0.1cqi; }
.recruit__catch,
.recruit__text,
.recruit__faq,
.recruit__job,
.recruit__entry {
	font-size: max(0.875rem, 1.4376cqi);
	font-weight: 700;
}
.recruit__catch,
.recruit__text {
	line-height: 1.58;
	padding-left: 0.2cqi;
}
.recruit__catch { margin-top: 4.35cqi; }
.recruit__text { margin-top: 1.58em; }

.recruit__menu { margin-top: 3cqi; }

/* 募集要項：白フチのボタン 2 つ（Figma 346×114px、枠 3px、間 71.5px） */
.recruit__jobs {
	display: flex;
	gap: 4.28cqi;
	margin: 2.9cqi 0 4.05cqi 0.31cqi;
}
.recruit__job {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 20.73cqi;
	min-height: 6.83cqi;
	padding: 0 4cqi 0 4.3cqi;
	border: 3px solid var(--color-white);
	transition: background-color 0.2s, color 0.2s;
}
.recruit__job:hover,
.recruit__job:focus-visible { background: var(--color-white); color: var(--blue); }

/* よくある質問：› 付きリンク */
.recruit__faq {
	margin-top: 1.36cqi;
	line-height: 1.58;
}
.recruit__faq a {
	display: inline-flex;
	align-items: center;
	gap: 0.79cqi;
	padding-left: 1.32cqi;
	transition: opacity 0.2s;
}
.recruit__faq a:hover,
.recruit__faq a:focus-visible { opacity: 0.8; }
.recruit .chevron { width: 0.55em; height: 0.85em; }

/* エントリー：白地のピル型ボタン（外部リンク） */
.recruit .recruit__heading + .recruit__entry { margin-top: 1.13cqi; }
.recruit__faq + .recruit__heading { margin-top: 6.93cqi; }
.recruit__entry {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3.38cqi;
	width: 42.05cqi;
	min-height: 5.88cqi;
	margin-left: -0.3cqi;
	padding: 0.5em 1.5em;
	border-radius: 999px;
	background: var(--color-white);
	color: var(--blue);
	transition: opacity 0.2s;
}
.recruit__entry:hover,
.recruit__entry:focus-visible { opacity: 0.85; }
.recruit .circle-arrow { width: 1.3em; height: 1.3em; margin-left: 0; font-size: 1em; }
.recruit__entry .circle-arrow { border-width: 2px; }

/* 採用ページ（page-recruit 等）のボタン */
.recruit__buttons { display: flex; flex-direction: column; gap: 0.75rem; }
.btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	background: var(--color-white);
	color: var(--color-navy);
	padding: 0.8em 1.2em;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9rem;
}
.btn-pill:hover { background: var(--color-blue-soft); }


/* Footer ------------------------------------------------------------------- */
/* Figma フッター：RECRUIT 下 31.7px にバナー 3 枚（ページ左 93.5px／右 88px、540×145px、間 59.25px）、
   その 37.3px 下からグレー帯（#F2F2F2）、最下部に白いバー。全ページ共通なので、フッター自身を
   --px（デザイン上の px）の基準コンテナにする */
.site-footer {
	container-type: inline-size;
	--px: min(1px, 100cqi / 1920);
	color: #333;
}

/* バナー（外部リンク）：TOP だけ、フッターの直前に置く（template-parts/top-banners.php）。--px は .top のもの */
.top-banners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: calc(59.25 * var(--px));
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(31.7 * var(--px)) calc(88 * var(--px)) 0 calc(93.5 * var(--px));
}
.footer-banner {
	container-type: inline-size; /* 中身はバナー幅 540px 基準（1cqi = 5.4px） */
	display: flex;
	align-items: center;
	aspect-ratio: 540 / 145;
	overflow: hidden;
	border: 1px solid #000;
	background: var(--color-white);
	transition: opacity 0.2s;
}
.footer-banner:hover,
.footer-banner:focus-visible { opacity: 0.8; }
.footer-banner .ph { height: 100%; }

.footer-banner__logo { width: 59.26cqi; height: 100%; }
.footer-banner__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2cqi;
	width: 33.06cqi;
	height: 7.59cqi;
	margin-left: 2.35cqi;
	background: linear-gradient(90deg, #ea4855, #f0a14f); /* Job Handle のブランド色 */
	color: var(--color-white);
	font-size: max(0.625rem, 2.22cqi);
	white-space: nowrap;
}
.footer-banner__btn svg { width: 1.3cqi; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.footer-banner--remote { background: #f3f6ff; }
.footer-banner--remote .footer-banner__illust {
	align-self: flex-start;
	width: 46.3cqi;
	margin-top: 3.94cqi;
}
.footer-banner__tags {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.48cqi;
	margin-left: 1.06cqi;
}
.footer-banner__tags span {
	display: flex;
	align-items: center;
	height: 9.26cqi;
	padding: 0 2.89cqi;
	background: #07287e; /* サービスのロゴ色 */
	color: var(--color-white);
	font-size: max(0.75rem, 4.26cqi);
	font-weight: 700;
	white-space: nowrap;
}

.footer-banner__brand {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	padding: 8.02cqi 0 0 3.91cqi;
}
.footer-banner__brand-logo { width: 29.61cqi; }
.footer-banner__text {
	margin-top: 3.4cqi;
	color: var(--blue);
	font-size: max(0.75rem, 4.26cqi);
	font-weight: 700;
	white-space: nowrap;
}
.footer-banner--manual .footer-banner__illust {
	align-self: flex-start;
	width: 27.34cqi;
	margin: 4.31cqi 4.42cqi 0 auto;
}

/* グレー帯：キャッチ／会社情報／リンク 3 列（1cqi = 17.39px @1738.5px） */
.site-footer__main {
	margin-top: calc(37.3 * var(--px));
	background: var(--color-bg-gray);
}
.site-footer__inner {
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 700fr) minmax(0, 357.4fr) minmax(0, 369.7fr) minmax(0, 311.4fr);
	row-gap: 2.01cqi;
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(78 * var(--px)) calc(88 * var(--px)) calc(43.5 * var(--px)) calc(93.5 * var(--px));
}
.site-footer__catch {
	grid-column: 1 / -1;
	margin-left: -0.18cqi;
	font-size: max(1.5rem, 3.106cqi);
	font-weight: 700;
	line-height: 1.2;
}
.site-footer__brand { margin-top: 1.96cqi; padding-left: 0.17cqi; }
.site-footer__logo { display: block; width: 16.67cqi; min-width: 160px; transition: opacity 0.2s; }
.site-footer__company {
	margin-top: 1.8cqi;
	font-size: max(1.5rem, 2.301cqi);
	font-weight: 700;
	line-height: 1.2;
}
.site-footer__company small { font-size: 0.7em; margin-right: 0.21em; }
.site-footer__address {
	margin-top: 1.12cqi;
	color: #000;
	font-size: max(0.875rem, 1.3805cqi);
	font-weight: 700;
	line-height: 1.58;
}
.site-footer__social {
	display: block;
	width: 3.066cqi;
	min-width: 32px;
	margin: 1.93cqi 0 0 0.69cqi;
	color: #000;
	transition: opacity 0.2s;
}
.site-footer__social svg { display: block; width: 100%; height: auto; fill: currentColor; }
.site-footer__social:hover { opacity: 0.7; }

.site-footer__nav {
	grid-column: 2 / 5;
	display: grid;
	grid-template-columns: subgrid;
}
.site-footer__col-title {
	display: block;
	width: fit-content;
	padding: 0 1cqi 0.42cqi 0.15cqi;
	border-bottom: 3px solid var(--blue);
	font-size: max(1.125rem, 1.841cqi);
	font-weight: 700;
	line-height: 1.22;
	transition: color 0.2s;
}
.site-footer__col-title + .site-footer__col-title { margin-top: 2.09cqi; }
.site-footer__col ul + .site-footer__col-title { margin-top: 2.45cqi; }
.site-footer__col ul {
	margin-top: 1.61cqi;
	font-size: max(0.875rem, 1.2655cqi);
	line-height: 2;
}
.site-footer__col li a {
	display: inline-flex;
	align-items: center;
	gap: 0.86cqi;
	padding-left: 0.5cqi;
	white-space: nowrap;
	transition: color 0.2s;
}
.site-footer__col .chevron { width: 0.41em; height: 0.82em; color: var(--blue); }
.site-footer__col a:hover,
.site-footer__col a:focus-visible { color: var(--blue); }

/* 最下部の白いバー */
.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	max-width: 1920px;
	min-height: calc(107 * var(--px));
	margin: 0 auto;
	padding: 1rem calc(126.5 * var(--px)) 1rem calc(111.1 * var(--px));
	font-size: max(0.75rem, calc(20 * var(--px)));
	font-weight: 700;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5em; }
.site-footer__legal a { transition: color 0.2s; }
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { color: var(--blue); }

/* Page-hero (下層ページ共通見出し帯) --------------------------------------------- */
.page-hero {
	background: var(--color-bg-soft);
	padding: clamp(2.5rem, 6vw, 4rem) 1.25rem clamp(2rem, 5vw, 3rem);
	text-align: center;
}
.page-hero__inner { max-width: var(--container); margin: 0 auto; }
.page-hero__title {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 900;
	margin-top: 0.5rem;
}
.page-hero__lead {
	color: var(--color-ink-soft);
	margin-top: 1rem;
	font-size: 0.95rem;
}
.breadcrumb {
	display: flex;
	justify-content: center;
	gap: 0.5em;
	margin-top: 1.5rem;
	font-size: 0.75rem;
	color: var(--color-ink-soft);
}
.breadcrumb a:hover { color: var(--color-blue); }

/* 下層ページ共通 -------------------------------------------------------------- */
/* TOP と同じく Figma のページ幅 1920px を基準に、calc(N * var(--px)) で「デザイン上の N px」を比例させる */
.page {
	container-type: inline-size;
	--px: min(1px, 100cqi / 1920);
	color: var(--ink);
}

/* ページ見出し：パンくず＋大きな英字＋和文タイトル（Figma：ヘッダー下 46px、ページ左 85.5px） */
.page-head {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(46 * var(--px)) calc(85.5 * var(--px)) 0;
}
.page-head__breadcrumb ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: max(0.8125rem, calc(24 * var(--px)));
	font-weight: 700;
	line-height: 1.25;
}
.page-head__breadcrumb li + li::before {
	content: "/";
	margin: 0 1em;
}
.page-head__breadcrumb a {
	display: inline-flex;
	align-items: center;
	transition: color 0.2s;
}
.page-head__breadcrumb a:hover,
.page-head__breadcrumb a:focus-visible { color: var(--blue); }
.page-head__home-icon {
	width: max(22px, calc(43 * var(--px)));
	margin-right: calc(7.6 * var(--px));
}
.page-head__label {
	display: block;
	writing-mode: horizontal-tb;
	margin: calc(56 * var(--px)) 0 0 calc(10.8 * var(--px));
	color: var(--ink);
	font-size: max(2.5rem, calc(123.48 * var(--px)));
	line-height: 1.21;
}
.page-head__title {
	margin: calc(7.7 * var(--px)) 0 0 calc(11.4 * var(--px));
	font-size: max(1.375rem, calc(32 * var(--px)));
	font-weight: 700;
	line-height: 1.22;
}

/* 会社概要テーブル（Figma：幅 1350px、ページ左 279.5px、見出し列 366px） */
.company-overview {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(87 * var(--px)) calc(290.5 * var(--px)) calc(120 * var(--px)) calc(279.5 * var(--px));
}
.company-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--line);
	font-size: max(0.875rem, calc(24 * var(--px)));
	font-weight: 700;
	line-height: 1.25;
}
.company-table th,
.company-table td {
	border: 1px solid var(--line);
	vertical-align: middle;
	text-align: left;
}
.company-table th {
	width: calc(366 * var(--px));
	min-width: 8em;
	padding: calc(46 * var(--px)) calc(20 * var(--px)) calc(46 * var(--px)) calc(70.6 * var(--px));
	background: var(--blue-pale);
	font-weight: 700;
}
.company-table td { padding: calc(46 * var(--px)) calc(75 * var(--px)) calc(46 * var(--px)) calc(56 * var(--px)); }
.company-table__office td { padding-top: calc(50 * var(--px)); padding-bottom: calc(50 * var(--px)); }

/* 拠点：住所・地図リンク（左）＋建物写真（右、幅 260px） */
.company-office {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max(140px, calc(260 * var(--px)));
	align-items: center;
	gap: calc(40 * var(--px));
}
.company-office__address { line-height: 2; }
.company-office__map {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-top: calc(32 * var(--px));
	color: var(--blue);
	transition: opacity 0.2s;
}
.company-office__map .chevron { width: 0.41em; height: 0.82em; }
.company-office__map:hover,
.company-office__map:focus-visible { opacity: 0.7; text-decoration: underline; }
.company-office__img { width: 100%; height: auto; }

/* 下層ページの中見出し：青い英字＋短い下線＋和文（Figma：英字 72px、下線 130×2px、和文 32px） */
.sub-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-weight: 700;
	line-height: 1.21;
}
.sub-heading__en {
	font-family: var(--font-heading-en);
	color: var(--blue);
	font-size: max(2.25rem, calc(72 * var(--px)));
}
.sub-heading__en::after {
	content: "";
	display: block;
	width: max(80px, calc(130 * var(--px)));
	height: 2px;
	margin: calc(20 * var(--px)) auto 0;
	background: var(--blue);
}
.sub-heading__ja {
	margin-top: calc(14 * var(--px));
	font-size: max(1.25rem, calc(32 * var(--px)));
}

/* 代表メッセージ -------------------------------------------------------------- */
/* Figma：写真 1060×580（ページ左 765px）にキャッチ（左 406px）を重ね、本文は左 413px・幅 1053px */
.message-hero {
	display: grid;
	grid-template-columns: minmax(0, 359fr) minmax(0, 1060fr);
	align-items: center;
	max-width: 1920px;
	margin: calc(-23 * var(--px)) auto 0;
	padding: 0 calc(95 * var(--px)) 0 calc(406 * var(--px));
}
.message-hero__img {
	grid-area: 1 / 2;
	width: 100%;
	aspect-ratio: 1060 / 580;
	object-fit: cover;
}
.message-hero__catch {
	grid-area: 1 / 1 / 2 / 3;
	position: relative; /* 写真より前面に */
	margin-top: calc(-72 * var(--px));
	font-size: max(1.75rem, calc(72 * var(--px)));
	font-weight: 700;
	line-height: 1.44;
}
.message-body {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(122 * var(--px)) calc(420 * var(--px)) calc(135 * var(--px)) calc(413.6 * var(--px));
	font-size: max(0.9375rem, calc(24 * var(--px)));
	font-weight: var(--fw-body);
	line-height: 1.583;
}
.message-body p + p { margin-top: 1.583em; }
.message-body__sign {
	display: flex;
	font-weight: 700;
	flex-direction: column;
	align-items: flex-end;
	width: calc(1086 * var(--px));
	margin-top: calc(62 * var(--px)) !important;
	line-height: 1.2;
}
.message-body__name {
	margin-top: calc(6 * var(--px));
	font-size: max(1.75rem, calc(51 * var(--px)));
	letter-spacing: 0.05em;
}

/* 企業理念 -------------------------------------------------------------------- */
.philosophy-block {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(71 * var(--px)) 1.25rem 0;
	text-align: center;
}
.philosophy-block + .philosophy-block { padding-top: calc(221 * var(--px)); }
.philosophy-block__lead {
	margin-top: calc(72 * var(--px));
	color: var(--blue);
	font-size: max(1.5rem, calc(72 * var(--px)));
	font-weight: 700;
	line-height: 1.22;
}
.philosophy-block__text {
	margin-top: calc(24 * var(--px));
	font-size: max(0.9375rem, calc(24 * var(--px)));
	font-weight: var(--fw-body);
	line-height: 1.58;
}
/* VALUES：頭文字（AMICUS）＋英語＋和文 */
.philosophy-block--values { padding-bottom: calc(110 * var(--px)); }
.values-list {
	display: inline-grid;
	grid-template-columns: auto auto;
	column-gap: calc(80 * var(--px));
	row-gap: calc(18 * var(--px));
	margin-top: calc(64 * var(--px));
	text-align: left;
	font-size: max(1.125rem, calc(48 * var(--px)));
	font-weight: 700;
	line-height: 1.21;
}
.values-list__row { display: contents; }
.values-list dt { display: flex; align-items: baseline; }
.values-list dd { margin: 0; align-self: center; }
.values-list__initial {
	display: inline-block;
	min-width: 1em;
	color: var(--blue);
	font-size: 1.5em;
	text-align: center;
}

/* 数字でみるアミクス ---------------------------------------------------------- */
/* Figma：カード列はページ左 178px・幅 1561px、カードは青枠 3px・角丸 31px */
.numbers {
	container-type: inline-size; /* カード内の文字はカード列の幅（1561px）基準 */
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 calc(181 * var(--px)) calc(160 * var(--px)) calc(178 * var(--px));
}
.numbers__section { padding-top: calc(56 * var(--px)); }
.numbers__section + .numbers__section { padding-top: calc(179 * var(--px)); }
.numbers__section > .sub-heading { margin-bottom: calc(129 * var(--px)); }
.numbers__intro {
	margin: calc(-66 * var(--px)) 0 calc(100 * var(--px));
	text-align: center;
	font-size: max(0.9375rem, calc(24 * var(--px)));
	font-weight: var(--fw-body);
}
.numbers__group-title {
	margin: calc(96 * var(--px)) 0 calc(105 * var(--px));
	color: var(--blue);
	text-align: center;
	font-size: max(1.25rem, calc(40 * var(--px)));
	font-weight: 700;
}
.numbers__intro + .numbers__group-title { margin-top: 0; }
.numbers__footnote {
	margin-top: calc(118 * var(--px));
	font-size: max(0.8125rem, calc(24 * var(--px)));
	font-weight: 700;
}

.num-grid { display: grid; gap: calc(60 * var(--px)); }
.num-grid + .num-grid,
.num-card--wide + .num-card--wide,
.num-card--wide + .num-grid { margin-top: calc(87 * var(--px)); }
.num-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.num-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(77 * var(--px)); }
.num-grid--school { grid-template-columns: minmax(0, 824fr) minmax(0, 659fr); gap: calc(71 * var(--px)); }
.num-grid--holiday { grid-template-columns: minmax(0, 480fr) minmax(0, 1020fr); }

.num-card {
	display: flex;
	flex-direction: column;
	padding: calc(56 * var(--px)) calc(42 * var(--px)) calc(48 * var(--px));
	border: 3px solid var(--blue);
	border-radius: max(16px, calc(31 * var(--px)));
	font-size: max(0.875rem, calc(24 * var(--px)));
	font-weight: 700;
	line-height: 1.58;
}
.num-card--center { align-items: center; text-align: center; }
.num-card--center .num-card__text { text-align: left; }
.num-card__title {
	margin-bottom: calc(32 * var(--px));
	text-align: center;
	font-size: max(1.125rem, calc(40 * var(--px)));
	font-weight: 700;
	line-height: 1.2;
}
.num-card__text { margin-top: auto; padding-top: calc(28 * var(--px)); font-weight: var(--fw-body); }
.num-card__note { display: block; font-size: max(0.75rem, calc(22 * var(--px))); line-height: 1.3; }
.num-card__row { display: flex; align-items: center; gap: calc(40 * var(--px)); }

/* 横長カード：イラスト＋数字・説明 */
.num-card--wide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: calc(60 * var(--px));
	min-height: calc(502 * var(--px));
	padding: calc(40 * var(--px)) calc(150 * var(--px)) calc(40 * var(--px)) calc(160 * var(--px));
}
.num-card--wide .num-card__text { padding-top: calc(20 * var(--px)); }
.num-card__visual { display: flex; justify-content: center; align-items: flex-end; }
.num-card--reverse { padding-left: calc(133 * var(--px)); padding-right: calc(175 * var(--px)); }
.num-icon { display: block; height: auto; }
.num-icon--coins { width: calc(543 * var(--px)); min-width: 160px; }
.num-icon--map { width: calc(493 * var(--px)); min-width: 160px; }
.num-icon--calendar { width: calc(131 * var(--px)); min-width: 64px; }
.num-icon--family { width: calc(188 * var(--px)); min-width: 90px; }
.num-icon--person { width: calc(60 * var(--px)); min-width: 30px; }

/* 大きな数字（Montserrat） */
.num-big {
	display: inline-flex;
	align-items: baseline;
	gap: calc(15 * var(--px));
	color: var(--blue);
	font-family: var(--font-en);
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}
.num-big__num { font-size: max(4rem, calc(186 * var(--px))); letter-spacing: -0.02em; }
.num-big__unit { font-family: var(--font-jp); font-size: max(1.5rem, calc(60 * var(--px))); }
.num-pct,
.num-count {
	color: var(--blue);
	font-family: var(--font-en);
	font-style: normal;
	font-size: max(1.25rem, calc(48 * var(--px)));
	font-weight: 700;
	line-height: 1.1;
}
.num-pct small,
.num-count small { margin-left: 0.1em; font-size: 0.6em; }

/* 新卒採用の推移：人物アイコンを 3 人ずつ積む */
.hiring-chart {
	display: flex;
	align-items: flex-end;
	gap: calc(28 * var(--px));
}
.hiring-chart__col { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--px)); }
.hiring-chart__people {
	display: flex;
	flex-wrap: wrap-reverse;
	justify-content: center;
	width: calc(112 * var(--px));
	min-width: 48px;
	gap: calc(2 * var(--px)) 0;
}
.hiring-chart__person {
	width: 33.33%;
	aspect-ratio: 35.37 / 50;
	background: var(--blue-pale);
	-webkit-mask: url("../img/numbers/person.svg") center / contain no-repeat;
	mask: url("../img/numbers/person.svg") center / contain no-repeat;
}
.hiring-chart__col.is-current .hiring-chart__person { background: var(--blue); }
.hiring-chart__year {
	color: var(--blue);
	font-family: var(--font-en);
	font-size: max(0.875rem, calc(34 * var(--px)));
	font-weight: 700;
	line-height: 1.2;
}

/* ドーナツグラフ（背景は PHP の amicus_donut_gradient() で出力） */
.donut {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: max(140px, calc(260 * var(--px)));
	aspect-ratio: 1;
	border-radius: 50%;
}
.donut::before { /* 中央の穴 */
	content: "";
	position: absolute;
	inset: 22%;
	border-radius: 50%;
	background: var(--color-white);
}
.donut--thin::before { inset: 18%; }
.donut__center {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: max(0.75rem, calc(24 * var(--px)));
	line-height: 1.2;
}

.gender-chart { display: flex; align-items: center; gap: calc(14 * var(--px)); }
.gender-chart__side { display: flex; flex-direction: column; align-items: center; gap: calc(26 * var(--px)); }
/* 引き出し線つきドーナツ（年齢構成・好きだった科目・平均睡眠時間。amicus_callout_chart()）
   位置はすべて Figma 座標からの %（PHP で出力）。文字は --u（Figma の 1px を図の幅基準に換算した cqi）× px 値 */
.callout { container-type: inline-size; position: relative; width: 100%; }
.callout__figure { position: absolute; inset: 0; }
.callout__donut { position: absolute; aspect-ratio: 1; }
.donut-svg { display: block; width: 100%; height: 100%; }
.callout__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.21;
}
.callout__center-label { color: #000; font-size: calc(24 * var(--u)); }
.callout__center .num-count { font-size: calc(48 * var(--u)); line-height: 1.21; }
.callout__center .num-count small { font-size: 0.5625em; } /* 歳 27px */
.callout__icon { position: absolute; height: auto; }
.callout__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke: var(--chart-line);
	stroke-width: 1.5;
	stroke-miterlimit: 10;
}
.callout__lines path { vector-effect: non-scaling-stroke; }
.callout__name,
.callout__pct { position: absolute; white-space: nowrap; line-height: 1.21; }
.callout__name { font-size: calc(var(--name-size) * var(--u)); font-weight: 700; }
.callout__name small { font-size: 0.7576em; } /* 年齢構成の「代」25px（数字 33px） */
.callout__pct .num-pct { font-size: calc(var(--pct-size) * var(--u)); line-height: 1.21; }
.callout__pct .num-pct small { margin-left: 0.05em; font-size: 0.625em; } /* % は数字の 0.625 倍 */

/* 部活：横の積み上げ棒 */
/* Figma（node 39:3）：棒の右側（トラック）幅 576px を基準に、アイコン・カギ線を % で置く */
.club-chart { display: grid; gap: calc(41 * var(--px)); padding: calc(24 * var(--px)) calc(50 * var(--px)) calc(40 * var(--px)) 0; }
.club-chart__row {
	display: grid;
	grid-template-columns: max(64px, calc(78 * var(--px))) minmax(0, 1fr);
	align-items: center;
	gap: calc(14 * var(--px));
}
.club-chart__track { position: relative; }
.club-chart__label { display: flex; flex-direction: column; font-size: max(0.75rem, calc(22 * var(--px))); line-height: 1.2; }
.club-chart__label .num-pct { font-size: max(1.125rem, calc(40 * var(--px))); }
.club-chart__bar {
	display: flex;
	min-height: calc(73 * var(--px));
	background: var(--chart-2);
	color: var(--color-white);
	font-size: max(0.625rem, calc(20 * var(--px)));
	line-height: 1.2;
}
.club-chart__bar span {
	display: grid;
	place-items: center;
	flex-basis: 0;
	padding: 0.4em 0.2em;
	text-align: center;
}
.club-chart__bar span + span { border-left: 1px dashed var(--chart-4); } /* Figma：区切りは淡い青の点線 */
.club-chart__row--other .club-chart__bar { background: var(--chart-3); }
.club-chart__icon { position: absolute; }
.club-chart__icon .num-icon { display: block; width: 100%; height: auto; }
.club-chart__icon--baseball { left: 87.07%; bottom: 149.3%; width: 6.25%; }  /* 棒の右端の左上 */
.club-chart__icon--soccer   { left: 100%;   bottom: 95.9%;  width: 8.68%; }  /* 棒の右端の上 */
.club-chart__icon--note     { left: 38.63%; top: -10%;      width: 5.9%; }
.club-chart__icon--guitar   { left: 47.66%; top: -11%;      width: 11.81%; }
/* 「その他」の 1 つ目の区画の中ほどから下→右へのカギ線＋ラベル */
.club-chart__bracket {
	position: absolute;
	left: 3.82%;
	top: calc(100% - 8 * var(--px));
	width: 7.99%;
	height: calc(32 * var(--px));
	border-left: 2px solid var(--chart-line);
	border-bottom: 2px solid var(--chart-line);
}
.club-chart__sub {
	position: absolute;
	left: 14.32%;
	top: calc(100% + 24 * var(--px) - 0.6em);
	font-size: max(0.6875rem, calc(20 * var(--px)));
	line-height: 1.2;
	white-space: nowrap;
}

/* 通勤時間・好きな季節：文字と高さはグラフ自身の幅（cqi）が基準。
   ページ幅基準（--px）だと、カードが 3 列→2 列→1 列と広がる幅（1000px 前後など）で文字が相対的に小さくなるため。
   値は 1920px での実測比（グラフ幅に対して %の数字 7.47%・区分名 3.93%・季節名 4.71%・季節の% 9.44%、高さは幅の 0.663 倍） */
.bar-chart,
.season-grid { container-type: inline-size; }

/* 通勤時間：縦棒 */
.bar-chart {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: end;
	gap: 1.5cqi;
	aspect-ratio: 1 / 0.663;
}
.bar-chart__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; height: 100%; text-align: center; }
.bar-chart__col .num-pct { font-size: 7.47cqi; }
.bar-chart__bar { width: 100%; height: calc(var(--h) * 100%); max-height: 60%; background: var(--blue-pale); }
.bar-chart__col.is-top .bar-chart__bar { background: var(--blue); }
.bar-chart__label { width: 100%; margin-top: 1.5cqi; font-size: 3.93cqi; line-height: 1.15; }

/* 好きな季節：2×2 のタイル */
.season-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.2cqi;
}
.season-grid li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	aspect-ratio: 1;
	padding-top: 12%;
	min-width: 0;
	border-radius: 6px;
	background: var(--blue-pale);
	font-size: 4.71cqi;
	line-height: 1.1;
}
.season-grid .num-pct { font-size: 9.44cqi; }
.season-grid li.is-top { background: var(--blue); color: var(--color-white); }
.season-grid li.is-top .num-pct { color: var(--color-white); }
.season-grid .num-icon { width: 19.2%; margin-top: auto; margin-bottom: 12%; } /* セル幅に対する比率（1920px で 48px 相当） */
.season-grid li:not(.is-top) .num-icon { filter: brightness(0) saturate(100%) invert(18%) sepia(8%) saturate(0%); } /* 線画（黒）を文字色に揃える */

/* 休日の過ごし方：順位 */
.rank-list { display: grid; gap: calc(18 * var(--px)); counter-reset: rank; font-size: max(0.875rem, calc(24 * var(--px))); }
.rank-list li { display: flex; align-items: center; gap: calc(23 * var(--px)); counter-increment: rank; }
.rank-list li::before {
	content: counter(rank);
	display: grid;
	place-items: center;
	flex: none;
	width: max(36px, calc(59 * var(--px)));
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--blue);
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: max(1.125rem, calc(40 * var(--px)));
	line-height: 1;
}

/* 方言：吹き出し */
.dialect { display: flex; align-items: center; gap: calc(52 * var(--px)); }
.dialect__top {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: none;
	width: max(180px, calc(349 * var(--px)));
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--blue-pale);
	color: var(--blue);
	line-height: 1.1;
}
.dialect__top::after { /* 吹き出しのしっぽ */
	content: "";
	position: absolute;
	right: 4%;
	bottom: 10%;
	border: 14px solid transparent;
	border-left-color: var(--blue-pale);
	transform: rotate(35deg);
}
.dialect__word { font-size: max(2.5rem, calc(86 * var(--px))); }
.dialect__mean { margin-top: 0.4em; color: var(--ink); font-size: max(0.75rem, calc(21 * var(--px))); }
.dialect__no { font-family: var(--font-en); font-size: max(0.625rem, calc(18 * var(--px))); }
.dialect__no b { margin-left: 0.2em; font-size: 1.6em; }
.dialect__list { display: flex; flex-wrap: wrap; gap: calc(22 * var(--px)) calc(24 * var(--px)); }
.dialect__list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.35em 1.1em 0.5em;
	border: 2px solid var(--blue-light);
	border-radius: 999px;
	color: var(--blue);
	font-size: max(0.9375rem, calc(30 * var(--px)));
	line-height: 1.1;
}
.dialect__list .dialect__no { font-size: max(0.5625rem, calc(15 * var(--px))); }
.dialect__notes { margin-top: calc(24 * var(--px)); font-size: max(0.6875rem, calc(18 * var(--px))); line-height: 1.6; }

/* アミクスを一言で表すと：ワードクラウド */
.num-card--words { align-items: center; padding: calc(80 * var(--px)) calc(150 * var(--px)) calc(56 * var(--px)); text-align: center; }
.words__lead { font-size: max(0.9375rem, calc(34 * var(--px))); line-height: 1.6; }
.words__lead strong { color: var(--chart-1); font-size: 1.48em; } /* 49.68px（本文 33.58px） */
/* 語ごとの文字サイズは --fs（Figma の px）。行の区切り（.words__break）で Figma の 4 行に揃える */
.words__cloud {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: calc(4 * var(--px)) calc(36 * var(--px));
	margin: calc(56 * var(--px)) 0;
	line-height: 1.21;
}
.words__item { font-size: max(calc(var(--fs) * 0.45px), calc(var(--fs) * var(--px))); }
.words__break { flex-basis: 100%; height: 0; }
.words__item--deep { color: var(--chart-1); }
.words__item--blue { color: var(--chart-2); }
.words__item--light { color: var(--chart-word); }
.words__voices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(20 * var(--px));
	width: 100%;
	font-size: max(0.8125rem, calc(22 * var(--px)));
}
.words__voices li {
	display: grid;
	place-items: center;
	padding: 1.2em 1em;
	border-radius: 10px;
	background: var(--blue-pale);
	color: var(--blue-deep);
}

/* アミクスの仕事 -------------------------------------------------------------- */
/* Figma：OUR SERVICE（タイトル下 56px）→ キャッチ 50px → 本文（幅 1103px）→ カード 4 枚（ページ左 278px）、
   OUR STYLE → 強み 3 ブロック（テキスト幅 692px とイラストを左右交互） */
.service-section {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(56 * var(--px)) 1.25rem 0;
}
.service-section--style { padding-top: calc(176 * var(--px)); padding-bottom: calc(160 * var(--px)); }
.service-section__catch {
	margin-top: calc(77 * var(--px));
	color: var(--blue);
	text-align: center;
	font-size: max(1.375rem, calc(50 * var(--px)));
	font-weight: 700;
	line-height: 1.22;
}
.service-section__lead {
	max-width: max(20em, calc(1103 * var(--px)));
	margin: calc(46 * var(--px)) auto 0;
	font-size: max(0.9375rem, calc(24 * var(--px)));
	font-weight: var(--fw-body);
	line-height: 1.58;
}
/* TOP の BUSINESS と同じカードを、ページ左 278px・幅 1373px に並べる */
.service-cards {
	container-type: inline-size;
	margin: calc(95 * var(--px)) calc(269 * var(--px)) 0 calc(278 * var(--px));
}
.service-cards .business__cards { width: 100%; margin-top: 0; gap: 3.2cqi; }
.business-card--static:hover,
.business-card--static:focus-visible { transform: none; box-shadow: none; }
/* カード下に資料リンクを置く。各 li を「カード行＋リンク行」の subgrid にして、リンクの有無に関係なくカードの高さをそろえる */
.service-cards .business__cards > li {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
}
/* 高さは行に合わせて伸ばす（aspect-ratio は最低の高さとして効く）。中身が多いカードがあっても全カードがその高さにそろう */
.service-cards .business-card { height: auto; align-self: stretch; }
.business-card__docs {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5em;
	margin-top: 0.8em;
	font-size: max(0.875rem, calc(18 * var(--px)));
}
.business-card__page-link { display: inline-flex; align-items: center; color: var(--blue); font-weight: 700; transition: opacity 0.2s; }
.business-card__page-link:hover,
.business-card__page-link:focus-visible { opacity: 0.7; }

.style-blocks {
	display: grid;
	gap: calc(150 * var(--px));
	margin: calc(87 * var(--px)) calc(368 * var(--px)) 0 calc(279.5 * var(--px));
}
.style-block {
	display: grid;
	grid-template-columns: minmax(0, 692fr) minmax(0, 581fr);
	align-items: center;
	gap: calc(60 * var(--px));
}
.style-block--reverse { grid-template-columns: minmax(0, 547fr) minmax(0, 694fr); }
.style-block--reverse .style-block__media { order: -1; justify-content: flex-start; }
.style-block__title { display: flex; flex-direction: column; font-weight: 700; line-height: 1.22; }
.style-block__sub { font-size: max(1.0625rem, calc(32 * var(--px))); }
.style-block__main {
	margin-top: calc(18 * var(--px));
	color: var(--blue);
	font-size: max(2rem, calc(62 * var(--px)));
}
.style-block__main::after { /* 短い下線（Figma 107px） */
	content: "";
	display: block;
	width: max(64px, calc(107 * var(--px)));
	height: 3px;
	margin-top: calc(30 * var(--px));
	background: var(--blue);
}
.style-block__text {
	margin-top: calc(46 * var(--px));
	font-size: max(0.9375rem, calc(24 * var(--px)));
	font-weight: var(--fw-body);
	line-height: 1.58;
}
.style-block__media { display: flex; justify-content: center; }
.style-block__img { width: 100%; max-width: calc(412 * var(--px) * 1.2); height: auto; }
.style-block--reverse .style-block__img { max-width: calc(487 * var(--px)); }
.style-block:last-child .style-block__img { max-width: calc(355 * var(--px)); }

/* はたらく環境 ---------------------------------------------------------------- */
/* Figma：コンテンツ幅 1368px（ページ左 279px）。導入カード 440×863、各セクションはタブ→見出し・本文＋写真→制度の一覧 */
.culture-intro,
.culture-section {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 calc(272 * var(--px)) 0 calc(279 * var(--px));
}
.culture-intro { padding-top: calc(76 * var(--px)); }
.culture-intro__catch { display: flex; flex-direction: column; align-items: center; text-align: center; font-weight: 700; line-height: 1.22; }
.culture-intro__sub {
	position: relative;
	padding: 0 calc(8 * var(--px)) calc(22 * var(--px));
	font-size: max(1.125rem, calc(36 * var(--px)));
}
.culture-intro__tail { /* 吹き出し風の下線（Figma 447×23） */
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: max(12px, calc(23 * var(--px)));
	fill: none;
	stroke: var(--ink);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}
.culture-intro__main {
	margin-top: calc(28 * var(--px));
	color: var(--blue);
	font-size: max(1.5rem, calc(52 * var(--px)));
}
.culture-intro__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(26 * var(--px));
	margin-top: calc(71 * var(--px));
}
.culture-intro-card {
	display: flex;
	flex-direction: column;
	padding: calc(36 * var(--px)) calc(32 * var(--px)) calc(36 * var(--px));
	border: 2px solid var(--blue);
	font-size: max(0.9375rem, calc(24 * var(--px)));
	font-weight: var(--fw-body);
	line-height: 1.58;
}
.culture-intro-card__title {
	color: var(--blue);
	font-weight: 700;
	text-align: center;
	font-size: max(1.125rem, calc(28 * var(--px)));
	line-height: 1.2;
}
.culture-intro-card__img {
	width: auto;
	height: calc(300 * var(--px));
	min-height: 160px;
	margin: calc(40 * var(--px)) auto calc(48 * var(--px));
	object-fit: contain;
}
.culture-intro-card__link { font-weight: 700; margin-top: auto; padding-top: calc(48 * var(--px)); color: var(--ink); transition: color 0.2s; }
.culture-intro-card__link:hover,
.culture-intro-card__link:focus-visible { color: var(--blue); }
.culture-intro-card__link .circle-arrow { margin-left: 1.4em; }

/* タブ（各セクションの先頭。今のセクションを白地で強調） */
.culture-section { padding-top: calc(210 * var(--px)); }
.culture-section + .culture-section { padding-top: calc(150 * var(--px)); }
.culture-section:last-child { padding-bottom: calc(150 * var(--px)); }
/* タブ・TOP の CULTURE カードで移動したときは、上の余白を飛ばしてタブの 24px 上に着地させる（余白そのものは Figma どおり残す） */
.culture-section { scroll-margin-top: calc(24 * var(--px) - 210 * var(--px)); }
.culture-section + .culture-section { scroll-margin-top: calc(24 * var(--px) - 150 * var(--px)); }
.culture-tabs { border-bottom: 2px solid var(--blue); }
.culture-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: calc(8 * var(--px));
	padding-left: calc(66 * var(--px));
}
.culture-tabs__tab {
	display: block;
	margin-bottom: -2px;
	padding: calc(8 * var(--px)) calc(26 * var(--px)) calc(6 * var(--px));
	border: 2px solid var(--blue);
	border-radius: max(10px, calc(18 * var(--px))) max(10px, calc(18 * var(--px))) 0 0;
	background: var(--blue-pale);
	color: var(--blue);
	font-size: max(0.875rem, calc(28 * var(--px)));
	font-weight: 700;
	line-height: 1.2;
	transition: background-color 0.2s, color 0.2s;
}
.culture-tabs__tab[aria-current] { border-bottom-color: var(--color-white); background: var(--color-white); }
.culture-tabs__tab:not([aria-current]):hover,
.culture-tabs__tab:not([aria-current]):focus-visible { background: var(--blue); color: var(--color-white); }

.culture-section__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max(200px, calc(400 * var(--px)));
	align-items: start;
	gap: calc(60 * var(--px));
	margin: calc(80 * var(--px)) calc(46 * var(--px)) 0 calc(62 * var(--px));
}
.culture-section__title {
	margin-top: calc(16 * var(--px));
	color: var(--blue);
	font-size: max(1.75rem, calc(50 * var(--px)));
	font-weight: 700;
	line-height: 1.22;
}
.culture-section__text {
	max-width: 30em;
	margin-top: calc(44 * var(--px));
	font-size: max(0.9375rem, calc(24 * var(--px)));
	font-weight: var(--fw-body);
	line-height: 1.58;
}
.culture-section__img {
	width: 100%;
	aspect-ratio: 400 / 285;
	border-radius: max(10px, calc(16 * var(--px)));
	object-fit: cover;
}

/* 制度の一覧：4 列のタイル */
.culture-items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(17 * var(--px));
	margin: calc(38 * var(--px)) calc(48 * var(--px)) 0 calc(63 * var(--px));
}
.culture-items__item {
	min-height: calc(107 * var(--px));
	padding: calc(14 * var(--px)) calc(14 * var(--px)) calc(16 * var(--px));
	background: var(--blue-pale);
	font-weight: 700;
	line-height: 1.35;
}
.culture-items__title { font-size: max(0.9375rem, calc(22 * var(--px))); }
.culture-items__text { margin-top: calc(6 * var(--px)); color: var(--ink); font-size: max(0.75rem, calc(18 * var(--px))); font-weight: 500; }
.culture-items__doc { margin-top: calc(8 * var(--px)); font-size: max(0.75rem, calc(16 * var(--px))); }

/* キャリアステップイメージ：Figma の階段イラスト（1230×403）の上に、各段の正面（幅 300、左端 33/332/631/930、
   上端 228/155/84/10）に合わせて文字を重ねる。スキルはその下に段ごとの列で並べる */
.career-steps { margin: calc(72 * var(--px)) calc(59 * var(--px)) 0 calc(79 * var(--px)); }
.career-steps__title { font-size: max(1rem, calc(28 * var(--px))); font-weight: 700; }
.career-steps__stage {
	container-type: inline-size;
	position: relative;
	margin-top: calc(110 * var(--px));
	aspect-ratio: 1230 / 403;
}
.career-steps__stairs { display: block; width: 100%; height: 100%; }
.career-steps__person { position: absolute; height: auto; }
.career-steps__person--1 { left: 10.65%; top: 16.9%; width: 6.75%; }
.career-steps__person--2 { left: 59.3%; top: -18.9%; width: 7.25%; }
.career-steps__list { position: absolute; inset: 0; }
.career-steps__block {
	position: absolute;
	bottom: 0;
	width: 24.4%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.65cqi;
	padding: 2.6cqi 2.1cqi 0; /* Figma：各段の正面の上端から 25〜40px 下に役職名 */
	color: var(--color-white);
	text-align: center;
	font-weight: 700;
	line-height: 1.3;
}
.career-steps__block--1 { left: 2.68%;  top: 56.6%; }
.career-steps__block--2 { left: 27%;    top: 38.5%; }
.career-steps__block--3 { left: 51.3%;  top: 20.7%; }
.career-steps__block--4 { left: 75.6%;  top: 2.6%; }
.career-steps__role { font-size: max(1rem, 2.28cqi); }  /* 28px @1230 */
.career-steps__when { font-size: max(0.75rem, 1.63cqi); }  /* 20px */
.career-steps__income {
	width: 16.2cqi; /* 199px */
	margin: 0.3cqi 0;
	padding: 0.25em 0;
	border: 1px solid var(--color-white);
	font-size: max(0.6875rem, 1.3cqi); /* 16px */
}
.career-steps__text { align-self: stretch; margin-top: 0.6cqi; text-align: left; font-size: max(0.6875rem, 1.46cqi); line-height: 1.4; } /* 18px */
.career-steps__block--1 .career-steps__text { text-align: center; }

.career-steps__skills {
	display: grid;
	grid-template-columns: minmax(0, 33fr) repeat(4, minmax(0, 299fr));
	row-gap: calc(23 * var(--px));
	margin-top: calc(26 * var(--px));
}
.career-steps__skills-title {
	grid-column: 1 / -1;
	margin-left: calc(9.5 * var(--px));
	color: var(--blue);
	font-size: max(0.875rem, calc(24 * var(--px)));
	font-weight: 700;
	line-height: 1.2;
}
/* Figma：各列は段の左端から 37〜43px 内側、タグは高さ 40px・間隔 8px */
.career-steps__skill-list {
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	column-gap: calc(9 * var(--px));
	padding: 0 calc(16 * var(--px)) 0 calc(43 * var(--px));
}
.career-steps__skill-list li { margin-bottom: calc(8 * var(--px)); }
.career-steps__skill-list .career-steps__break { flex-basis: 100%; height: 0; min-height: 0; margin: 0; padding: 0; border: 0; }
.career-steps__skill-list:nth-of-type(1) { grid-column: 2; }
.career-steps__skill-list:nth-of-type(2) { grid-column: 3; padding-left: calc(39 * var(--px)); }
.career-steps__skill-list:nth-of-type(3) { grid-column: 4; padding-left: calc(38 * var(--px)); }
.career-steps__skill-list:nth-of-type(4) { grid-column: 5; padding-left: calc(32 * var(--px)); }
.career-steps__sp-info { display: none; }
.career-steps__skill-list li {
	display: flex;
	align-items: center;
	min-height: max(28px, calc(40 * var(--px)));
	padding: 0 0.6em;
	border: 2px solid var(--blue);
	background: var(--color-white);
	color: var(--blue);
	font-size: max(0.6875rem, calc(18 * var(--px)));
	font-weight: 700;
	line-height: 1.2;
}

/* アミクスの人：個別ページ（single-member.php） ------------------------------------- */
/* Figma：People_01（node 20:6）。写真はページ左 412.5px〜右端まで（1507.5×713）、
   キャッチは左 96.5px・写真上端から 109px（72px・青帯 2 本の間 18px）、本文は左 420.5px・幅 1060px */
.member-hero {
	display: grid;
	grid-template-columns: calc(96.5 * var(--px)) calc(316 * var(--px)) minmax(0, 1fr);
	max-width: 1920px;
	margin: calc(51 * var(--px)) auto 0;
}
.member-hero__photo {
	grid-area: 1 / 3;
	position: relative;
	aspect-ratio: 1507.5 / 713;
	overflow: hidden;
}
/* 写真は投稿ごとに構図が違うので、顔が残りやすい「上寄り（25%）」で切り抜く。
   縦長のアイキャッチを使う人も、上下中央だと顔が切れるため */
.member-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right 25%;
}
/* 文字が明るい部分に乗っても読めるよう、写真の左側に薄い暗幕（左 → 右へ消える） */
.member-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 24, 56, 0.32) 0%, rgba(0, 24, 56, 0.12) 30%, rgba(0, 24, 56, 0) 50%);
	pointer-events: none;
}
/* キャッチ・名前は写真の下寄り・左側に重ねる（顔は上〜中央・右寄りに来やすいため）。
   幅はページ左から 820px 相当まで＝写真の左 3 分の 1 ほど（折り返すと帯がこの幅いっぱいに広がるため、顔にかからない幅に）。
   長いキャッチは青帯の中で折り返す。
   同じ行に置くので、長いキャッチでも下の本文とは重ならない */
.member-hero__body {
	grid-area: 1 / 2 / 2 / 4;
	position: relative;
	align-self: end;
	max-width: calc(820 * var(--px));
	margin-bottom: calc(56 * var(--px));
}
.member-hero__catch {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(12 * var(--px));
	/* Figma は 72px だが、2 段（青帯 2 本）になると写真に対して重いので一回り小さく、帯の余白も詰める */
	font-size: max(1.5rem, calc(60 * var(--px)));
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-white);
}
/* 2 段以上は さらに一段小さく・帯の間を詰める（帯の合計の高さを 1 段＋α に抑え、顔にかからないように） */
.member-hero__catch:has(span + span) {
	gap: calc(8 * var(--px));
	font-size: max(1.375rem, calc(52 * var(--px)));
}
.member-hero__catch span {
	max-width: 100%;
	padding: calc(6 * var(--px)) calc(36 * var(--px)) calc(6 * var(--px)) calc(24 * var(--px));
	background: var(--blue);
	overflow-wrap: anywhere;
	text-wrap: balance;      /* 帯の中で折り返すときは行の長さを揃える（「る。」だけが次の行に落ちないように） */
	word-break: auto-phrase; /* 和文は文節の切れ目で折り返す（対応ブラウザのみ。非対応でも従来どおり折り返す） */
}
.member-hero__name {
	font-family: var(--font-heading-en); /* イニシャル（Figma は Inter Bold） */
	margin-top: calc(33 * var(--px));
	padding-left: calc(4 * var(--px));
	font-size: max(1.5rem, calc(48 * var(--px)));
	font-weight: 700;
	line-height: 1.21;
	color: var(--blue);
}
.member-hero__meta {
	display: flex;
	flex-direction: column;
	margin-top: calc(13 * var(--px));
	padding-left: calc(4 * var(--px));
	font-size: max(1.125rem, calc(32 * var(--px)));
	font-weight: 700;
	line-height: 1.27;
}

/* インタビュー：本文エディタの中身（見出し H2＝青帯、段落＝本文、右寄せ画像＝回り込みのサブ写真） */
.member-interview {
	display: flow-root; /* 右寄せ画像の回り込みをこの中で閉じる */
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(160 * var(--px)) calc(440 * var(--px)) 0 calc(420.5 * var(--px));
	font-size: max(0.9375rem, calc(24 * var(--px)));
	font-weight: var(--fw-body);
	line-height: 1.583;
}
.member-interview > * + * { margin-top: 1.583em; } /* 段落の間は 1 行空き */
.member-interview h2 {
	display: flow-root; /* 右寄せ画像の横では、帯が画像の下に潜らず手前で止まる */
	width: fit-content;
	max-width: 100%;
	margin-top: calc(70 * var(--px));
	padding: calc(17 * var(--px)) calc(56 * var(--px)) calc(17 * var(--px)) calc(24 * var(--px));
	background: var(--blue);
	color: var(--color-white);
	font-size: max(1.25rem, calc(42 * var(--px)));
	line-height: 1.21;
}
.member-interview > :first-child { margin-top: 0; }
.member-interview h2 + * { margin-top: calc(26 * var(--px)); }
.member-interview .is-quote { text-indent: -0.5em; } /* 「 を半角ぶん左へ */
.member-interview img { max-width: 100%; height: auto; }
/* サブ写真（画像ブロック「右寄せ」）：Figma 590×590、本文の右端から 358px はみ出し、本文との間 135px */
.member-interview .alignright,
.member-interview .wp-block-image .alignright {
	float: right;
	width: calc(590 * var(--px));
	margin: 0 calc(-358 * var(--px)) 1em calc(135 * var(--px));
}
.member-interview .alignright img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
.member-interview figcaption { margin-top: 0.5em; font-size: 0.75em; font-weight: 500; }

/* 下部の「アミクスの人」カルーセル：TOP の PEOPLE と同じ部品（ページ左 114.5px、カード 310px・間 53px） */
.people--member {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(210 * var(--px)) calc(38.4 * var(--px)) calc(110 * var(--px)) calc(114.5 * var(--px));
}

/* よくある質問（page-recruit-faq.php） ------------------------------------------------------ */
/* Figma：Recruit_03faq（node 13:1883）。Q のバーはページ左 279.5px・幅 1350px・高さ 139px（間 7px）、
   Q／A の丸 81px（左から 49px）、質問 30px・回答 24px（行送り 38px）は左 483.5px から */
.faq {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(103 * var(--px)) calc(290.5 * var(--px)) calc(160 * var(--px)) calc(279.5 * var(--px));
}
.faq-cat + .faq-cat { margin-top: calc(122 * var(--px)); }
/* アンカー着地：ヘッダー分は html の scroll-padding-top で済んでいるので、見出しの上に少しだけ余白を足す */
.faq-cat { scroll-margin-top: max(1.25rem, calc(40 * var(--px))); }
.faq-cat__title {
	padding-left: calc(10 * var(--px));
	font-size: max(1.375rem, calc(48 * var(--px)));
	font-weight: 700;
	line-height: 1.21;
}
.faq-cat__list {
	display: flex;
	flex-direction: column;
	gap: calc(7 * var(--px));
	margin-top: calc(40 * var(--px));
}
.faq-qa__q {
	display: grid;
	grid-template-columns: calc(81 * var(--px)) minmax(0, 1fr) auto;
	align-items: center;
	column-gap: calc(74 * var(--px));
	width: 100%;
	min-height: max(64px, calc(139 * var(--px)));
	padding: calc(14 * var(--px)) calc(40 * var(--px)) calc(14 * var(--px)) calc(49 * var(--px));
	background: var(--blue-pale);
	font-size: max(1rem, calc(30 * var(--px)));
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	transition: background-color 0.2s;
}
.faq-qa__q:hover,
.faq-qa__q:focus-visible { background: var(--blue-light); }
.faq-qa__mark {
	display: grid;
	place-items: center;
	width: calc(81 * var(--px));
	min-width: 36px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--blue);
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: max(1rem, calc(32 * var(--px)));
	font-weight: 700;
	line-height: 1;
}
.faq-qa__mark--a { background: var(--blue-pale); color: var(--blue); }
/* ＋／− は 2 本の線で描く（開いたら縦線を消して − に） */
.faq-qa__icon {
	position: relative;
	width: max(16px, calc(28 * var(--px)));
	aspect-ratio: 1;
}
.faq-qa__icon::before,
.faq-qa__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 2px;
	margin-top: -1px;
	background: var(--ink);
	transition: transform 0.2s;
}
.faq-qa__icon::after { transform: rotate(90deg); }
.faq-qa__q[aria-expanded="true"] .faq-qa__icon::after { transform: rotate(90deg) scaleX(0); }
.faq-qa__a {
	display: grid;
	grid-template-columns: calc(81 * var(--px)) minmax(0, 1fr);
	align-items: start;
	column-gap: calc(74 * var(--px));
	padding: calc(43 * var(--px)) calc(210 * var(--px)) calc(43 * var(--px)) calc(49 * var(--px));
}
.faq-qa__a[hidden] { display: none; }
/* 回答は本文エディタの中身（段落・リスト・リンクなど） */
.faq-qa__a-body {
	font-size: max(0.9375rem, calc(24 * var(--px)));
	font-weight: var(--fw-body);
	line-height: 1.583;
}
.faq-qa__a-body > * + * { margin-top: 1em; }
.faq-qa__a-body ul,
.faq-qa__a-body ol { padding-left: 1.4em; }
.faq-qa__a-body ul { list-style: disc; }
.faq-qa__a-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: reduce) {
	.faq-qa__icon::before,
	.faq-qa__icon::after { transition: none; }
}

/* リモートサポート／サービスマニュアル（page-remotesupport.php・page-manual_guide.php） ----------- */
/* 募集要項（page-new-graduate.php / page-career.php） ------------------------------------ */
/* 横位置・表の見出し列は会社概要と同じ（ページ左 279.5px・幅 1350px・見出し列 366px）。本文は長文なので太字にしない */
.job-detail {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(87 * var(--px)) calc(290.5 * var(--px)) calc(160 * var(--px)) calc(279.5 * var(--px));
}
.job-detail__empty { text-align: center; font-weight: 700; }

/* 職種が 2 つ以上のときの一覧（各職種へのページ内リンク）。見た目はリモートサポートのページ内リンクと同じ */
.job-index { margin-bottom: calc(122 * var(--px)); }
.job-index__title {
	padding: 0 0 calc(20 * var(--px)) calc(10 * var(--px));
	border-bottom: 3px solid var(--blue);
	font-size: max(1.375rem, calc(48 * var(--px)));
	line-height: 1.21;
}
.job-index__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: calc(48 * var(--px)) 0 0;
	padding: 0;
	list-style: none;
}
.job-index__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	height: 100%;
	min-height: max(64px, calc(110 * var(--px)));
	padding: 0.75em 1.5em;
	border: 1px solid var(--blue);
	background: var(--color-white);
	color: var(--blue);
	font-size: max(1rem, calc(26 * var(--px)));
	font-weight: 700;
	line-height: 1.4;
	transition: background-color 0.2s, color 0.2s;
}
.job-index__link:hover,
.job-index__link:focus-visible { background: var(--blue); color: var(--color-white); }
.job-index__arrow { flex: none; }

/* 職種ごとのまとまり。2 つ目以降は間をあけ、ページ内リンクの着地はヘッダーの下（ヘッダー分は html の scroll-padding-top） */
.job { scroll-margin-top: max(1.25rem, calc(40 * var(--px))); }
.job + .job { margin-top: calc(160 * var(--px)); }
.job__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 0.8em;
	padding: 0 0 calc(20 * var(--px)) calc(10 * var(--px));
	border-bottom: 3px solid var(--blue);
	font-size: max(1.25rem, calc(40 * var(--px)));
	font-weight: 700;
	line-height: 1.3;
}
.job__title-label {
	flex: none;
	padding: 0.2em 0.8em;
	border-radius: 999px;
	background: var(--blue);
	color: var(--color-white);
	font-size: 0.5em;
	line-height: 1.5;
}
.job-table {
	width: 100%;
	margin-top: calc(56 * var(--px));
	border-collapse: collapse;
	border: 1px solid var(--line);
	font-size: max(0.9375rem, calc(22 * var(--px)));
	line-height: 1.8;
}
.job-table th,
.job-table td {
	border: 1px solid var(--line);
	vertical-align: top;
	text-align: left;
}
.job-table th {
	width: calc(366 * var(--px));
	min-width: 8em;
	padding: calc(40 * var(--px)) calc(20 * var(--px)) calc(40 * var(--px)) calc(70.6 * var(--px));
	background: var(--blue-pale);
	font-weight: 700;
}
.job-table td { padding: calc(40 * var(--px)) calc(56 * var(--px)); }

/* セルの中身（inc/recruit-jobs.php の amicus_recruit_text()）：◆小見出し・＼POINT／・・/◎ の箇条書き */
.job-text > * + * { margin-top: 0.9em; }
.job-text__head {
	color: var(--blue-deep);
	font-weight: 700;
}
.job-text__head + * { margin-top: 0.4em; }
.job-text__badge span {
	display: inline-block;
	padding: 0.15em 1em;
	border-radius: 999px;
	background: var(--blue-pale);
	color: var(--blue-deep);
	font-weight: 700;
}
.job-text__badge + * { margin-top: 0.5em; }
.job-text__list { margin: 0; padding: 0; list-style: none; }
.job-text__list li { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); }
.job-text__list li + li { margin-top: 0.25em; }
.job-text__mark { color: var(--blue); }

/* エントリーボタン：既存の CTA と同じ青ベタの丸ボタン（ホバーで白地に反転） */
.job-entry {
	margin-top: calc(96 * var(--px));
	text-align: center;
}
.job-entry__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(100%, max(280px, calc(520 * var(--px))));
	min-height: max(56px, calc(96 * var(--px)));
	padding: 0.5em 2em;
	border: 2px solid var(--blue);
	border-radius: 999px;
	background: var(--blue);
	color: var(--color-white);
	font-size: max(1rem, calc(26 * var(--px)));
	font-weight: 700;
	transition: background-color 0.2s, color 0.2s;
}
.job-entry__btn:hover,
.job-entry__btn:focus-visible { background: var(--color-white); color: var(--blue); }

/* 横位置は会社概要などと同じ（ページ左 279.5px・幅 1350px）。見出しは FAQ のカテゴリ見出しと同じ大きさ */
.guide {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(103 * var(--px)) calc(290.5 * var(--px)) calc(160 * var(--px)) calc(279.5 * var(--px));
	font-size: max(0.9375rem, calc(24 * var(--px)));
	font-weight: 700;
	line-height: 1.583;
}
.guide p { font-weight: var(--fw-body); } /* 説明文だけ軽く（リンク・番号・見出しは 700 のまま） */
.guide-section + .guide-section { margin-top: calc(122 * var(--px)); }
.guide-section { scroll-margin-top: max(1.25rem, calc(40 * var(--px))); } /* ページ内リンクの着地：ヘッダー分は html の scroll-padding-top */
.guide-section__title {
	padding: 0 0 calc(20 * var(--px)) calc(10 * var(--px));
	border-bottom: 3px solid var(--blue);
	font-size: max(1.375rem, calc(48 * var(--px)));
	line-height: 1.21;
}

/* リモートサポート：導入（イラスト＋文） */
.remote-intro {
	display: grid;
	grid-template-columns: minmax(0, 560fr) minmax(0, 750fr);
	align-items: center;
	gap: calc(40 * var(--px));
}
.remote-intro__img { width: 100%; height: auto; border-radius: max(10px, calc(16 * var(--px))); }

/* ページ内リンク（Windows 版／Mac 版） */
.remote-jump {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: calc(64 * var(--px)) 0 calc(122 * var(--px));
}
.remote-jump__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	min-height: max(64px, calc(110 * var(--px)));
	padding: 0.75em 1em;
	border: 1px solid var(--blue);
	background: var(--color-white);
	color: var(--blue);
	transition: background-color 0.2s, color 0.2s;
}
.remote-jump__link:hover,
.remote-jump__link:focus-visible { background: var(--blue); color: var(--color-white); }
.remote-jump__arrow { flex: none; width: 0.75em; height: 0.45em; fill: none; stroke: currentColor; stroke-width: 2; }

/* 手順：番号の丸＋説明 → 画像（説明の頭に揃える） */
.remote-steps { margin: calc(56 * var(--px)) 0 0; padding: 0; list-style: none; } /* 番号は丸で出す */
.remote-step + .remote-step,
.remote-steps + .remote-step { margin-top: calc(72 * var(--px)); }
.remote-step__text {
	display: grid;
	grid-template-columns: max(36px, calc(64 * var(--px))) minmax(0, 1fr);
	align-items: center;
	column-gap: calc(24 * var(--px));
}
.remote-step__num {
	display: grid;
	place-items: center;
	width: max(36px, calc(64 * var(--px)));
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--blue);
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: max(1rem, calc(28 * var(--px)));
	line-height: 1;
}
.remote-step__img,
.remote-dl {
	margin: calc(28 * var(--px)) 0 0 calc(88 * var(--px)); /* 丸＋間の分だけ右へ */
}
.remote-step__img {
	display: block;
	width: min(100% - calc(88 * var(--px)), 900px);
	height: auto;
	border: 1px solid var(--line);
}
.remote-step--finish .remote-step__text { display: block; padding-left: calc(88 * var(--px)); }
.remote-step--finish .remote-step__img { width: min(100% - calc(88 * var(--px)), 900px); }

/* 1 番：ダウンロードボタンの枠 */
.remote-dl {
	padding: calc(48 * var(--px)) calc(40 * var(--px));
	background: var(--gray-bg);
	text-align: center;
}
.remote-dl__title { font-size: max(1.125rem, calc(32 * var(--px))); line-height: 1.4; color: var(--blue-deep); }
.remote-dl__text { margin-top: 0.75em; }
.remote-dl__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(100%, max(240px, calc(420 * var(--px))));
	min-height: max(52px, calc(80 * var(--px)));
	margin-top: calc(32 * var(--px));
	padding: 0.5em 2em;
	border: 2px solid var(--blue);
	border-radius: 999px;
	background: var(--blue);
	color: var(--color-white);
	transition: background-color 0.2s, color 0.2s;
}
.remote-dl__btn:hover,
.remote-dl__btn:focus-visible { background: var(--color-white); color: var(--blue); }

/* サービスマニュアル：説明文 → PDF リンク */
.manual-list { margin-top: calc(40 * var(--px)); }
.manual-item + .manual-item { margin-top: calc(48 * var(--px)); }
.manual-item__text { position: relative; padding-left: 1.2em; }
.manual-item__text::before { /* ▶ */
	content: "";
	position: absolute;
	top: 0.5em;
	left: 0.1em;
	border-style: solid;
	border-width: 0.32em 0 0.32em 0.55em;
	border-color: transparent transparent transparent var(--blue);
}
.manual-item__pdf {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.6em;
	margin: 0.5em 0 0 1.2em;
	color: var(--blue);
	transition: opacity 0.2s;
}
.manual-item__label { text-decoration: underline; text-underline-offset: 0.2em; }
.manual-item__pdf:hover,
.manual-item__pdf:focus-visible { opacity: 0.7; }
.manual-item__icon { /* 旧サイトの赤い PDF アイコンの代わり */
	padding: 0.15em 0.45em;
	border-radius: 3px;
	background: #d93025;
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: 0.6em;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

/* 資料（PDF）へのテキストリンク（template-parts/doc-link.php）。マニュアル案内ページの PDF リンクと同じ体裁 */
.doc-link {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.6em;
	color: var(--blue);
	font-weight: 700;
	transition: opacity 0.2s;
}
.doc-link__label { text-decoration: underline; text-underline-offset: 0.2em; }
.doc-link:hover,
.doc-link:focus-visible { opacity: 0.7; }
.doc-link__icon {
	padding: 0.15em 0.45em;
	border-radius: 3px;
	background: #d93025;
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: 0.6em;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

/* サービス約款・ご利用規約・公開情報（page-amicushikari.php）。枠はマニュアル案内と同じ .guide、PDF リンクは doc-link */
.terms-list {
	margin-top: calc(48 * var(--px));
	border-top: 1px solid var(--color-border);
}
.terms-list__item {
	padding: calc(24 * var(--px)) 0;
	border-bottom: 1px solid var(--color-border);
}
.terms-back { margin-top: calc(80 * var(--px)); color: var(--color-ink); transition: color 0.2s; }
.terms-back:hover,
.terms-back:focus-visible { color: var(--blue); }

/* アミクスについて：4 ページ共通の回遊ナビ（template-parts/about-nav.php） ------------------- */
/* 横位置は会社概要テーブルと同じ（ページ左 279.5px・幅 1350px）。ボタンは募集要項ボックスの反転ホバーを流用 */
.about-nav {
	background: var(--color-white);
}
.about-nav__inner {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(100 * var(--px)) calc(290.5 * var(--px)) calc(110 * var(--px)) calc(279.5 * var(--px));
}
.about-nav__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(6 * var(--px));
}
.about-nav__en {
	font-family: var(--font-en);
	font-style: italic;
	font-weight: 800;
	font-size: max(1rem, calc(28 * var(--px)));
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: var(--blue);
}
/* フッターの列見出しと同じ青の下線 */
.about-nav__ja {
	padding: 0 calc(16 * var(--px)) calc(8 * var(--px)) 0;
	border-bottom: 3px solid var(--blue);
	font-size: max(1.25rem, calc(32 * var(--px)));
	font-weight: 700;
	line-height: 1.22;
}
.about-nav__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: calc(48 * var(--px));
}
.about-nav__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	height: 100%;
	min-height: max(64px, calc(110 * var(--px)));
	padding: 0.75em calc(28 * var(--px)) 0.75em calc(32 * var(--px));
	border: 1px solid var(--blue);
	background: var(--color-white);
	color: var(--blue);
	font-size: max(1rem, calc(22 * var(--px)));
	font-weight: 700;
	line-height: 1.3;
	transition: background-color 0.2s, color 0.2s;
}
/* 和文は <wbr> の位置でだけ折り返す（入りきらないときだけ任意の位置で） */
.about-nav__label { word-break: keep-all; overflow-wrap: anywhere; }
.about-nav__arrow { flex-shrink: 0; width: 1.3em; height: 1.3em; margin-left: 0; font-size: 1em; }
a.about-nav__card:hover,
a.about-nav__card:focus-visible,
.about-nav__card.is-current {
	background: var(--blue);
	color: var(--color-white);
}
.about-nav__card.is-current { cursor: default; }
/* タブレットは 2 列（スマホの 1 列は下の 767px の中） */
@media (max-width: 1024px) {
	.about-nav__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 個人情報保護方針 ------------------------------------------------------------ */
/* Figma：Privacy（node 13:2731）。本文はページ左 279.5px・幅 1350px、24px／行送り 38px。条見出し 36px＋下線（幅 1350px） */
/* 中身は管理画面の本文（the_content）なので、要素セレクタで組む */
.privacy-body {
	max-width: 1920px;
	margin: 0 auto;
	padding: calc(129 * var(--px)) calc(290.5 * var(--px)) calc(140 * var(--px)) calc(279.5 * var(--px));
	font-size: max(0.9375rem, calc(24 * var(--px)));
	font-weight: var(--fw-body);
	line-height: 1.583;
	letter-spacing: 0.1em;
	overflow-wrap: anywhere;
}
.privacy-body > * + * { margin-top: 1.583em; } /* 段落の間は 1 行空き */
.privacy-body h2 {
	margin-top: calc(41 * var(--px));
	padding-bottom: calc(24 * var(--px));
	border-bottom: 1px solid var(--line);
	font-size: max(1.25rem, calc(36 * var(--px)));
	line-height: 1.21;
	letter-spacing: 0.05em;
}
.privacy-body > :first-child { margin-top: 0; }
.privacy-body h2 + * { margin-top: calc(28 * var(--px)); }
.privacy-body h3 {
	font-size: max(1.0625rem, calc(28 * var(--px)));
	line-height: 1.4;
	letter-spacing: 0.05em;
}
.privacy-body h3 + * { margin-top: 0.5em; }
.privacy-body ol,
.privacy-body ul {
	margin-bottom: 0;
	padding-left: 1.6em;
}
.privacy-body ol { list-style: decimal; }
.privacy-body ul { list-style: disc; }
.privacy-body li > ol,
.privacy-body li > ul { margin-top: 0; }
.privacy-body address { font-style: normal; }
.privacy-body a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: opacity 0.2s;
}
.privacy-body a:hover,
.privacy-body a:focus-visible { opacity: 0.7; }

/* 汎用ページセクション ------------------------------------------------------------ */
.page-section { padding: clamp(2.5rem, 6vw, 4rem) 1.25rem; }
.page-section__inner { max-width: var(--container); margin: 0 auto; }
.page-section__inner--narrow { max-width: 760px; }

.ph--wide { aspect-ratio: 16 / 7; border-radius: var(--radius); }
.ph--portrait { aspect-ratio: 3 / 4; max-width: 320px; border-radius: var(--radius); margin: 0 auto 1.5rem; }

/* 会社概要・募集要項などの情報テーブル ----------------------------------------------- */
.info-table { border-top: 1px solid var(--color-border); margin-top: 1.5rem; }
.info-table__row {
	display: grid;
	grid-template-columns: 10em 1fr;
	gap: 1rem;
	padding: 1em 0;
	border-bottom: 1px solid var(--color-border);
}
.info-table__row dt { font-weight: 700; color: var(--color-ink-soft); }
.info-table__row dd { margin: 0; }

/* ファイル一覧（統合レポート等） -------------------------------------------------- */
.file-list { margin-top: 1.5rem; }
.file-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em 0;
	border-bottom: 1px solid var(--color-border);
}
.file-list__link { display: inline-flex; align-items: center; font-weight: 700; }

/* サービス詳細 / カルチャー詳細（交互レイアウト） -------------------------------------- */
.service-detail__inner,
.culture-detail__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.service-detail--reverse .service-detail__inner,
.culture-detail--reverse .culture-detail__inner {
	direction: rtl;
}
.service-detail--reverse .service-detail__body,
.service-detail--reverse .service-detail__media,
.culture-detail--reverse .culture-detail__body,
.culture-detail--reverse .culture-detail__media {
	direction: ltr;
}

/* アミクスの人 一覧（グリッド） --------------------------------------------------- */
.people-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.5rem;
}

/* 代表メッセージ 署名 ------------------------------------------------------------ */
.signature { text-align: right; font-weight: 700; margin-top: 1.5rem; }


/* お問い合わせフォーム枠 ---------------------------------------------------------- */
.contact-form-frame {
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}
.contact-form-frame__placeholder { color: var(--color-ink-soft); text-align: center; }

/* ボタンのアウトライン版 ---------------------------------------------------------- */
.btn-pill--outline {
	background: transparent;
	border: 1px solid var(--color-navy);
	color: var(--color-navy);
}
.btn-pill--outline:hover { background: var(--color-navy); color: var(--color-white); }
.recruit__buttons--light { flex-direction: row; flex-wrap: wrap; }

/* Responsive ------------------------------------------------------------------- */
/* BUSINESS カード：4列 → 2×2 → 1列 */
@media (max-width: 1100px) {
	.person-card { flex-basis: 30cqi; } /* PEOPLE：タブレットは 3 枚強 */
	.business__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.business-card { aspect-ratio: auto; padding: 1.25rem 1rem 1.5rem; gap: 0.75rem; }
	.business-card__img,
	.business__cards > li:nth-child(n) .business-card__img { width: min(100%, 300px); }
}
@media (max-width: 600px) {
	.business__cards { grid-template-columns: minmax(0, 1fr); }
}
/* フッター：タブレットは会社情報の下にリンク 3 列 */
@media (max-width: 1100px) {
	.site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
	.site-footer__brand { grid-column: 1 / -1; margin-top: 0; }
	.site-footer__nav { grid-column: 1 / -1; }
}

@media (max-width: 880px) {

	/* ヒーロー：テキスト→画像の縦積み */
	.top > .hero { padding: 1.5rem 1.25rem 0; }
	.hero__inner {
		container-type: normal;
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}
	.hero__body,
	.hero__media { grid-area: auto; }
	.hero__body { padding-left: 0; }
	.hero__media { aspect-ratio: 4 / 3; border-radius: 16px; }
	.hero__title { font-size: clamp(1.6rem, 7vw, 2.6rem); margin-bottom: 1.25rem; }
	.hero__lead { font-size: clamp(0.9rem, 3.6vw, 1.1rem); margin-bottom: 1.75rem; }
	.hero__cta {
		width: 100%;
		min-height: 3.5rem;
		padding: 0.75em 2.5rem 0.75em 1rem;
		font-size: clamp(0.85rem, 3.6vw, 1.05rem);
		clip-path: polygon(0 0, 100% 0, calc(100% - 1.25rem) 100%, 0 100%);
	}

	/* ABOUT：本文→リンク→カードの縦積み。縦組み英字は横書きにして見出しの上に置く */
	.top > .about { padding: 3rem 1.25rem 0; }
	.about__inner {
		container-type: normal;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		row-gap: 2rem;
	}
	.about__label,
	.culture__label {
		grid-area: auto;
		writing-mode: horizontal-tb;
		font-size: clamp(2.5rem, 11vw, 4rem);
		line-height: 1.21;
		margin: 0;
	}
	/* 英字ラベルの寄せ：左＝ABOUT US・PEOPLE・RECRUIT／右＝OUR BUSINESS・CULTURE */
	.about__label,
	.people__label,
	.recruit__label { text-align: left; }
	.business__label,
	.culture__label { text-align: right; }
	.about__label,
	.business__label,
	.people__label,
	.culture__label,
	.recruit__label { overflow-wrap: anywhere; }
	.about__body { grid-area: auto; }
	.about__links { grid-area: auto; gap: 1rem 2.5rem; padding-left: 0; }
	.about__title,
	.culture__title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: 1.25rem; }
	.about__sub,
	.about__text,
	.culture__sub,
	.culture__text { font-size: clamp(0.95rem, 3.8vw, 1.1rem); }
	.about .text-link,
	.culture .text-link { font-size: clamp(0.95rem, 3.8vw, 1.1rem); }

	/* CULTURE：本文→カード（2 列）の縦積み */
	.top > .culture { padding: 3rem 1.25rem 0; }
	.culture__inner {
		container-type: normal;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2rem;
	}
	.culture__body { grid-column: auto; margin-top: 0; }
	.culture__text-first { white-space: normal; }
	.culture__cards {
		grid-column: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;
	}
	.culture__cards > li:nth-child(n) { grid-column: auto; }
	.culture-card__media { border-radius: 16px; }
	.culture-card__label { margin-top: 0.6rem; padding-left: 0; }
	.about-card,
	.about-card ~ .about-card {
		grid-area: auto;
		grid-template-rows: auto auto;
		row-gap: 0.75rem;
	}
	.about-card__media { margin-top: 0; aspect-ratio: 16 / 10; border-radius: 16px; }
	.about-card__img--numbers { width: 78%; margin: 9% auto 0; }
	.about-card__label { padding-left: 0; }

	.section-label:not(.section-label--solid) { writing-mode: horizontal-tb; text-align: left; -webkit-text-stroke: 1px var(--color-blue); color: var(--color-blue-soft); }

	/* BUSINESS：rem ベースに切り替え */
	.top > .business { padding: 3rem 1.25rem 0; }
	.business__label { font-size: clamp(2.5rem, 11vw, 4rem); }
	.business__title { font-size: clamp(1.5rem, 6vw, 2rem); margin: 0.75rem 0 1.25rem; }
	.business__text { font-size: clamp(0.95rem, 3.8vw, 1.1rem); }
	.business__text br { display: none; }
	.business .text-link { font-size: clamp(0.95rem, 3.8vw, 1.1rem); }
	.business__more,
	.business__cards { width: auto; }
	.business__more { margin-top: 1.5rem; padding-right: 0; }
	.business__cards { gap: 1.25rem; margin-top: 2rem; }

	/* PEOPLE：カード幅 64%（次のカードが少し見える） */
	.top > .people { padding: 3rem 1.25rem 0; }
	.people__label { font-size: clamp(2.5rem, 11vw, 4rem); }
	.people__title { font-size: clamp(1.5rem, 6vw, 2rem); margin: 0.75rem 0 1.5rem; }
	.people__track { gap: 1rem; padding-left: 0; scroll-padding-left: 0; }
	.person-card { flex-basis: 64cqi; }
	.people__controls { width: auto; gap: 1.25rem; margin-top: 1.25rem; padding-left: 0; }

	/* RECRUIT：左→右の縦積み */
	.top > .recruit { margin-top: 4rem; padding: 3rem 0 3.5rem; }

	.recruit__inner {
		container-type: normal;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.5rem;
		padding: 0 1.25rem;
	}
	.recruit__label { font-size: clamp(2.5rem, 11vw, 4rem); }
	.recruit__title,
	.recruit__heading { font-size: clamp(1.25rem, 5vw, 1.6rem); }
	.recruit__title { margin: 0.5rem 0 0; }
	.recruit__catch,
	.recruit__text,
	.recruit__faq,
	.recruit__job,
	.recruit__entry { font-size: clamp(0.95rem, 3.8vw, 1.1rem); }
	.recruit__catch { margin-top: 1.5rem; padding-left: 0; }
	.recruit__text { padding-left: 0; }
	.recruit__text br { display: none; }
	.recruit__menu { margin-top: 0; }
	.recruit__jobs { gap: 1rem; margin: 1rem 0 2.5rem; }
	.recruit__job { flex: 1; width: auto; min-height: 4.5rem; padding: 0 1rem; }
	.recruit__faq { margin-top: 0.75rem; }
	.recruit__faq a { gap: 0.6rem; padding-left: 0.25rem; }
	.recruit__faq + .recruit__heading { margin-top: 2.5rem; }
	.recruit .recruit__heading + .recruit__entry { margin-top: 1rem; }
	.recruit__entry { width: 100%; min-height: 4.5rem; margin-left: 0; gap: 1rem; }


	/* フッター：すべて縦積み */
	.top-banners { padding: 2rem 1.25rem 0; gap: 1rem; }
	.site-footer__main { margin-top: 2rem; }
	.site-footer__inner { grid-template-columns: minmax(0, 1fr); padding: 2.5rem 1.25rem 2rem; }
	.site-footer__catch { font-size: clamp(1.5rem, 7vw, 2.2rem); margin-left: 0; }
	.site-footer__logo { width: 200px; }
	.site-footer__company { margin-top: 1rem; font-size: 1.6rem; }
	.site-footer__address { margin-top: 0.75rem; font-size: 0.95rem; }
	.site-footer__social { margin: 1.25rem 0 0; }
	.site-footer__nav { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
	.site-footer__col-title { padding: 0 1rem 0.5rem 0; font-size: 1.25rem; }
	.site-footer__col-title + .site-footer__col-title,
	.site-footer__col ul + .site-footer__col-title { margin-top: 1.5rem; }
	.site-footer__col ul { margin-top: 0.75rem; font-size: 0.95rem; }
	.site-footer__col li a { gap: 0.6rem; padding-left: 0; }
	.site-footer__bottom { flex-direction: column; justify-content: center; padding: 1.5rem 1.25rem; }

	.info-table__row { grid-template-columns: 1fr; gap: 0.25rem; }

	.service-detail__inner,
	.culture-detail__inner { grid-template-columns: 1fr; direction: ltr; }
}

/* 数字でみる：タブレットは 3 列カードを 2 列に */
@media (max-width: 1100px) {
	.culture-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.num-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.num-grid--holiday { grid-template-columns: minmax(0, 1fr); }
}

/* 下層ページ：SP（〜767px）は 1 カラム積み上げ */
@media (max-width: 767px) {
	/* TOP の ABOUT：会社概要・企業理念のリンクと、代表メッセージ・数字でみるアミクスのカードの見出しリンクを右寄せ */
	.about__links { justify-content: flex-end; text-align: right; }
	.about-card__label { justify-self: end; }

	/* お問い合わせ：右上のボタンは隠し、メニューの最下部に青いボタンで出す */
	.site-header__contact { display: none; }
	.nav-toggle { margin-left: auto; }
	.global-nav__contact { display: block; padding-top: 1.25rem; }
	.global-nav__list .global-nav__contact a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.625rem;
		padding: 0.875rem 1rem;
		border-bottom: 0;
		border-radius: 999px;
		background: var(--blue);
		color: var(--color-white);
		font-weight: 700;
	}
	.global-nav__list .global-nav__contact a:hover,
	.global-nav__list .global-nav__contact a:focus-visible { color: var(--color-white); opacity: 0.85; }
	.global-nav__contact .site-header__contact-icon { width: 20px; }

	.culture-intro,
	.culture-section { padding: 2rem 1.25rem 0; }
	/* キャッチ 1 行目：下の余白が 4px ほどに縮み、高さ 12px の吹き出し線の横棒が文字に重なるので、線の高さ＋α の余白をとる */
	.culture-intro__sub { padding-bottom: 14px; }
	.culture-section,
	.culture-section + .culture-section { padding-top: 3.5rem; scroll-margin-top: -2.5rem; } /* 着地はタブの 1rem 上 */
	.culture-intro__cards { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2rem; }
	.culture-intro-card { padding: 1.5rem 1.25rem; }
	.culture-tabs__list { padding-left: 0; gap: 4px; }
	.culture-tabs__tab { padding: 0.4em 0.7em; }
	.culture-section__head { grid-template-columns: minmax(0, 1fr); margin: 1.75rem 0 0; gap: 1.25rem; }
	.culture-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 1.25rem 0 0; }
	.culture-items__item { padding: 0.75rem; }
	/* キャリアステップ：スマホは横スクロールさせず、図を画面幅に縮める＋スキルは段ごとに縦積み */
	.career-steps { margin: 2rem 0 0; }
	.career-steps__stage { margin-top: 3rem; }
	/* 段のラベル：ol の既定の上余白（16px）が小さい図では大きなずれになるので消し、
	   4 段とも「正面の上端から図の幅の 2.6% 下・左右中央」（PC と同じ比率）に揃える */
	.career-steps__list { margin: 0; padding: 0; list-style: none; }
	.career-steps__block { padding: 2.6cqi 1cqi 0; }
	.career-steps__role { font-size: 4cqi; line-height: 1.2; }
	.career-steps__when,
	.career-steps__income,
	.career-steps__text { display: none; } /* 小さすぎて読めないため、詳細は下のスキル欄に出す */
	.career-steps__skills { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; margin-top: 1.25rem; }
	.career-steps__skills-title { grid-column: auto; margin: 0; }
	.career-steps__skill-list,
	.career-steps__skill-list:nth-of-type(n) { grid-column: auto; grid-row: auto; margin-top: 0; padding: 0; }
	.career-steps__skill-list .career-steps__break { display: none; }
	.career-steps__sp-info { display: block; margin-bottom: -0.5rem; font-size: 0.85rem; line-height: 1.5; }
	.career-steps__sp-info strong { color: var(--blue); font-size: 1rem; }

	.service-section,
	.service-section--style { padding: 3.5rem 1.25rem 0; }
	.service-section--style { padding-bottom: 3rem; }
	.service-section__catch { margin-top: 1.75rem; }
	.service-section__lead { margin-top: 1.25rem; }
	.service-cards { container-type: normal; margin: 2rem 0 0; }
	.service-cards .business__cards { gap: 1.25rem; }
	.style-blocks { gap: 3rem; margin: 2rem 0 0; }
	.style-block,
	.style-block--reverse { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.style-block--reverse .style-block__media { order: 0; }
	.style-block__img,
	.style-block--reverse .style-block__img,
	.style-block:last-child .style-block__img { max-width: 280px; }

	.message-hero { display: block; margin: 1.5rem 0 0; padding: 0 1.25rem; }
	.message-hero__catch { margin: 1.25rem 0 0; font-size: clamp(1.6rem, 8vw, 2.25rem); }
	.message-body { padding: 2rem 1.25rem 3rem; font-size: 0.95rem; }
	.message-body__sign { width: auto; margin-top: 2rem !important; }

	.philosophy-block,
	.philosophy-block + .philosophy-block { padding-top: 3.5rem; }
	.philosophy-block__lead { margin-top: 1.75rem; font-size: clamp(1.4rem, 6.5vw, 2rem); }
	.philosophy-block__text { font-size: 0.95rem; }
	.philosophy-block__text br { display: none; }
	.philosophy-block--values { padding-bottom: 3rem; }
	.values-list { grid-template-columns: 1fr; row-gap: 0.25rem; font-size: 1.15rem; }
	.values-list dd { margin-bottom: 0.75rem; font-size: 0.95rem; }

	.numbers { padding: 0 1.25rem 3rem; }
	.numbers__section,
	.numbers__section + .numbers__section { padding-top: 3.5rem; }
	.numbers__section > .sub-heading { margin-bottom: 2rem; }
	.numbers__intro { margin: -0.75rem 0 2rem; }
	.numbers__group-title { margin: 2.5rem 0 1.25rem; }
	.num-grid--3,
	.num-grid--2,
	.num-grid--school { grid-template-columns: minmax(0, 1fr); }
	.num-grid,
	.num-grid + .num-grid,
	.num-card--wide + .num-card--wide,
	.num-card--wide + .num-grid { gap: 1.25rem; margin-top: 1.25rem; }
	.num-card,
	.num-card--wide,
	.num-card--reverse,
	.num-card--words { padding: 1.5rem 1.25rem; }
	.num-card--wide { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 1.25rem; }
	.num-card--reverse .num-card__visual { order: -1; }
	.num-icon--coins,
	.num-icon--map { width: 100%; max-width: 320px; }
	.dialect { flex-direction: column; }
	.words__voices { grid-template-columns: minmax(0, 1fr); }
	.words__cloud { gap: 0.25rem 1rem; }
	.words__break { display: none; } /* スマホは行を詰めて流す */
	/* 部活：ラベル列を詰めて棒を広げ、棒の中の文字は 1 行に。カギ線のラベルが本文に重ならないよう下に余白 */
	.club-chart { gap: 1.5rem; padding: 1.25rem 1.5rem 2.25rem 0; }
	.club-chart__row { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.5rem; }
	.club-chart__bar { min-height: 2.25rem; font-size: 0.625rem; }
	.club-chart__bracket { top: calc(100% - 0.75rem); height: 1.5rem; }
	.club-chart__sub { top: calc(100% + 0.75rem - 0.6em); }
	.club-chart__bar span { padding: 0.4em 0; white-space: nowrap; letter-spacing: -0.04em; }
	/* 通勤時間・好きな季節：文字の比率は PC と同じ（上の cqi 指定）。説明文との間をあける */
	.bar-chart,
	.season-grid { margin-bottom: 1rem; }
	/* 通勤時間：棒の高さはいちばん多い 47% を列の 62% として割合どおりに */
	.bar-chart__col .num-pct { margin-bottom: 1cqi; }
	.bar-chart__bar { height: calc(var(--h) * 62%); max-height: none; }
	.bar-chart__label { min-height: 2.3em; }
	.club-chart__sub { font-size: 0.6875rem; }

	.page-head { padding: 1.5rem 1.25rem 0; }
	.page-head__label { margin: 1.5rem 0 0; font-size: clamp(2rem, 10.5vw, 4rem); overflow-wrap: anywhere; } /* PEOPLE&WORKS が 375px で 1 行に収まる大きさに */
	.page-head__title { margin: 0.25rem 0 0; font-size: 1.5rem; }

	.company-overview { padding: 2rem 1.25rem 3rem; }
	.company-table { border: none; font-size: 0.95rem; }
	.company-table tbody,
	.company-table tr,
	.company-table th,
	.company-table td { display: block; width: 100%; }
	.company-table tr { border: 1px solid var(--line); }
	.company-table tr + tr { border-top: none; }
	.company-table th,
	.company-table td { border: none; }
	.company-table th { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
	.company-table td,
	.company-table__office td { padding: 1rem; }
	.company-office { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.company-office__map { margin-top: 0.75rem; }
	.company-office__img { max-width: 260px; }

	/* リモートサポート／サービスマニュアル：1 カラム。画像は全幅、番号の丸の分の字下げをなくす */
	.guide { padding: 2.5rem 1.25rem 3.5rem; line-height: 1.8; }
	.guide-section + .guide-section { margin-top: 3.5rem; }
	.guide-section__title { padding: 0 0 0.6rem; }
	.remote-intro { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.remote-jump { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 2rem 0 3.5rem; }
	.remote-steps { margin-top: 1.5rem; }
	.remote-step + .remote-step,
	.remote-steps + .remote-step { margin-top: 2.25rem; }
	.remote-step__text { column-gap: 0.75rem; align-items: start; }
	.remote-step__img,
	.remote-dl { margin: 0.75rem 0 0; }
	.remote-step__img,
	.remote-step--finish .remote-step__img { width: 100%; }
	.remote-step--finish .remote-step__text { padding-left: 0; }
	.remote-dl { padding: 1.5rem 1rem; }
	.remote-dl__btn { width: 100%; margin-top: 1.25rem; }
	.manual-list { margin-top: 1.25rem; }
	.manual-item + .manual-item { margin-top: 1.5rem; }
	.terms-list { margin-top: 1.5rem; }
	.terms-list__item { padding: 0.9rem 0; }
	.terms-back { margin-top: 2.5rem; }

	/* 募集要項：表は会社概要と同じく項目名 → 内容の縦積み。エントリーボタンは全幅 */
	.job-detail { padding: 2rem 1.25rem 3.5rem; }
	.job-index { margin-bottom: 3rem; }
	.job-index__title,
	.job__title { padding: 0 0 0.6rem; }
	.job-index__list { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 1.25rem; }
	.job-index__link { padding: 0.75em 1.25em; }
	.job + .job { margin-top: 4rem; }
	.job-table { margin-top: 1.5rem; border: none; }
	.job-table tbody,
	.job-table tr,
	.job-table th,
	.job-table td { display: block; width: 100%; }
	.job-table tr { border: 1px solid var(--line); }
	.job-table tr + tr { border-top: none; }
	.job-table th,
	.job-table td { border: none; }
	.job-table th { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
	.job-table td { padding: 1rem; }
	.job-entry { margin-top: 2.5rem; }
	.job-entry__btn { width: 100%; }

	/* よくある質問：Q・A の丸を小さく、余白を rem に */
	.faq { padding: 2.5rem 1.25rem 3.5rem; }
	.faq-cat + .faq-cat { margin-top: 3rem; }
	.faq-cat__title { padding-left: 0; }
	.faq-cat__list { gap: 6px; margin-top: 1.25rem; }
	.faq-qa__q { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 0.75rem; padding: 0.9rem 1rem; }
	.faq-qa__a { grid-template-columns: 36px minmax(0, 1fr); column-gap: 0.75rem; padding: 1.25rem 1rem 1.5rem; }
	.faq-qa__a-body { line-height: 1.8; }

	/* アミクスの人 個別：写真 → キャッチ（写真の下端に少し重ねる）→ 名前 → インタビューの縦積み */
	.member-hero { grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; }
	.member-hero__photo { grid-area: 1 / 1; aspect-ratio: 4 / 3; }
	.member-hero__body { grid-area: 2 / 1; align-self: start; max-width: none; margin: -2rem 0 0; padding: 0 1.25rem; }
	.member-hero__photo::after { display: none; } /* スマホは文字を写真の下に置くので暗幕は不要 */
	.member-hero__catch { gap: 0.4rem; font-size: clamp(1.25rem, 5.8vw, 1.75rem); }
	.member-hero__catch:has(span + span) { gap: 0.3rem; font-size: clamp(1.125rem, 5.2vw, 1.5rem); }
	.member-hero__catch span { padding: 0.15em 0.6em 0.15em 0.45em; }
	.member-hero__name { margin-top: 1.25rem; padding-left: 0; font-size: 1.75rem; }
	.member-hero__meta { margin-top: 0.25rem; padding-left: 0; font-size: 1.125rem; }
	.member-interview { padding: 3rem 1.25rem 0; line-height: 1.85; }
	.member-interview h2 { margin-top: 2.75rem; padding: 0.5em 0.9em 0.5em 0.6em; }
	.member-interview h2 + * { margin-top: 1.25rem; }
	.member-interview .alignright,
	.member-interview .wp-block-image .alignright { float: none; width: auto; margin: 1.5rem 0; }
	.people--member { padding: 4rem 1.25rem 3.5rem; }

	.about-nav__inner { padding: 3rem 1.25rem; }
	.about-nav__list { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 1.5rem; }
	.about-nav__card { padding: 0.75em 1.25em; }

	.privacy-body { padding: 2rem 1.25rem 3.5rem; line-height: 1.85; letter-spacing: 0.05em; }
	.privacy-body h2 { margin-top: 2.5rem; padding-bottom: 0.75rem; }
	.privacy-body h2 + * { margin-top: 1.25rem; }
}

/* CULTURE カード：ごく狭い画面だけ 1 列 */
@media (max-width: 360px) {
	.culture__cards { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Contact Form 7 共通デザイン（.amc-form） ===== */
.amc-form{max-width:720px;margin:0 auto;padding:8px 0;}
.amc-form .amc-field{display:block;margin:0 0 24px;}
.amc-form .amc-field > label{display:block;margin:0 0 8px;font-weight:700;color:var(--ink,#2B2B2B);font-size:15px;line-height:1.5;}
.amc-form .amc-field label + br{display:none;} /* フォーム本文でラベルと入力欄を改行して書くと CF7 が <br> を入れ、間が 1 行分あくので消す */
.amc-form .req,.amc-form .any{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;vertical-align:middle;line-height:1.6;}
.amc-form .req{background:#e23b3b;color:#fff;}
.amc-form .any{background:#e4e4e4;color:#555;}
.amc-form input[type="text"],
.amc-form input[type="email"],
.amc-form input[type="tel"],
.amc-form textarea,
.amc-form select{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #ccc;border-radius:6px;background:#fff;font-size:16px;color:var(--ink,#2B2B2B);font-family:inherit;line-height:1.6;transition:border-color .2s, box-shadow .2s;}
.amc-form textarea{min-height:180px;resize:vertical;}
.amc-form input:focus,
.amc-form textarea:focus,
.amc-form select:focus{outline:none;border-color:var(--blue,#3C64B8);box-shadow:0 0 0 3px rgba(60,100,184,.15);}
.amc-form ::placeholder{color:#aaa;}
.amc-form .wpcf7-radio{display:flex;flex-wrap:wrap;gap:12px;}
.amc-form .wpcf7-list-item{margin:0;}
.amc-form .wpcf7-list-item label{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #ccc;border-radius:6px;cursor:pointer;font-weight:500;}
.amc-form .amc-cond{margin:28px 0 12px;padding-bottom:6px;font-size:15px;font-weight:700;color:var(--blue-deep,#2E3775);border-bottom:2px solid var(--blue,#3C64B8);}
.amc-form input[type="file"]{font-size:14px;}
.amc-form .amc-submit{text-align:center;margin-top:32px;}
.amc-form .wpcf7-submit{min-width:220px;padding:14px 32px;border:2px solid var(--blue,#3C64B8);border-radius:999px;background:var(--blue,#3C64B8);color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:.2s;}
.amc-form .wpcf7-submit:hover{background:#fff;color:var(--blue,#3C64B8);}
.amc-form .wpcf7-spinner{margin:0 auto;}
.wpcf7 .wpcf7-response-output{margin:20px auto 0;max-width:720px;border-radius:6px;font-size:14px;}
.wpcf7-not-valid-tip{color:#e23b3b;font-size:13px;margin-top:4px;}
@media (max-width:767px){
  .amc-form{padding:0 16px;}
  .amc-form .wpcf7-submit{width:100%;min-width:0;}
}