@charset "utf-8";

/* ==========================================================
   キャリア採用 (page-career.php)
   現時点: 部門・エリア アコーディオン + 追従エントリーボタン
   ========================================================== */

.career .c-breadcrumb {
	padding-top: 26px;
}

/* FV は共通パーツ (.c-fv: common.css / template-parts/fv-recruit.php) */

/* ----------------------------------------------------------
   キャッチコピー部 (ACF)
   ---------------------------------------------------------- */
.career-catch {
	margin-top: 96px;
}
@media (max-width: 767px) {
	.career-catch {
		margin-top: 60px;
	}
}

.career-catch__inner {
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: 30px;
	text-align: center;
}
@media (max-width: 767px) {
	.career-catch__inner {
		padding-inline: 30px;
	}
}

.career-catch__main {
	color: var(--color-primary);
	font-size: 100px;
	font-weight: 700;
	line-height: calc(120 / 100);
	letter-spacing: calc(5 / 100 * 1em);
}
@media (max-width: 767px) {
	.career-catch__main {
		font-size: 44px;              /* PC × 0.44 (SP幅で1行に収める) */
	}
}

.career-catch__sub {
	color: var(--color-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
}
@media (max-width: 767px) {
	.career-catch__sub {
		font-size: 16px;
	}
}

.career-catch__line {
	display: block;
	width: 1px;
	height: 40px;
	margin: 30px auto 0;
	background: var(--color-primary);
}
@media (max-width: 767px) {
	.career-catch__line {
		height: 28px;
		margin-top: 16px;
	}
}

.career-catch__lead {
	margin-top: 30px;
	color: var(--color-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
}
@media (max-width: 767px) {
	.career-catch__lead {
		margin-top: 16px;
		font-size: 15px;
	}
}

/* ----------------------------------------------------------
   スライダー (Slick / ACF画像 最大5枚)
   ---------------------------------------------------------- */
.career-slider {
	margin-top: 136px;
}
@media (max-width: 767px) {
	.career-slider {
		margin-top: 30px;
	}
}

.career-slider__inner {
	position: relative;
	max-width: 1000px; 
	margin-inline: auto;
	padding-inline: 90px;           /* 矢印の逃げ場 */
}
@media (max-width: 767px) {
	.career-slider__inner {
		max-width: none;
		padding-inline: 40px;
	}
}

.career-slider__slide img {
	width: 100%;
	height: auto;
}

/* --- Slick 矢印 (Figma書き出しSVG・右向き。prev は左右反転) --- */
.career-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 10;
	width: 24px;
	height: 58px;
	background: url(../../images/career/career_slider-arrow.svg) no-repeat center / contain;
	transition: opacity 0.3s;
}
@media (hover: hover) {
	.career-slider__arrow:hover {
		opacity: 0.6;
	}
}
.career-slider__arrow--prev {
	left: 20px;
	transform: translateY(-50%) scaleX(-1);
}
.career-slider__arrow--next {
	right: 20px;
	transform: translateY(-50%);
}
@media (max-width: 767px) {
	.career-slider__arrow {
		width: 18px;
		height: 44px;
	}
	.career-slider__arrow--prev {
		left: 8px;
	}
	.career-slider__arrow--next {
		right: 8px;
	}
}

/* --- Slick ドット --- */
.career-slider .slick-dots {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 60px;
}
.career-slider .slick-dots li button {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #D2D2E9;
	font-size: 0;
	transition: background-color 0.3s;
}
.career-slider .slick-dots li.slick-active button {
	background: var(--color-primary);
}

/* ----------------------------------------------------------
   アンカー着地位置の調整
   固定ヘッダーがセクション先頭の見出しに被らないよう、アンカージャンプ時に
   手前で止める。section[id] 指定なので #requirements / #flow にも自動適用。

   ブラウザがアンカー位置まで飛んだ「あと」に、スクロール量が 300px を超えて
   ヘッダーが position: fixed になり (assets/js/main.js)、フローから外れる分だけ
   コンテンツが上へずれる。ずれ量はヘッダー高と実測で一致したので、
   scroll-margin-top = ヘッダー高 × 2 + 余白 で置く。
   (旧値 PC 100 / SP 80 はヘッダー1つ分しか見ておらず、PC 16px・SP 28px
    潜り込んでいた。先輩社員インタビューの #interview-{ID} と同じ直し方)

   フィールド診断の結果画面「キャリア採用の職種を見る」から
   /career/#requirements で飛んでくる導線もここに乗る。
   ---------------------------------------------------------- */
.career section[id] {
	scroll-margin-top: 158px;       /* ずれ58 + ヘッダー58 + 余白42 */
}
@media (max-width: 767px) {
	.career section[id] {
		scroll-margin-top: 134px;   /* ずれ54 + ヘッダー54 + 余白26 */
	}
}

/* ----------------------------------------------------------
   アンカーリンクエリア (4タブ)
   形状: clip-path 六角形 (左上 + 右下を 20px 斜めカット)
   枠線: 親を枠色で塗り、::before を2px内側に同形状で重ねる2枚重ね方式
   ---------------------------------------------------------- */
.career-anchor {
	margin-top: 72px;
}
@media (max-width: 767px) {
	.career-anchor {
		margin-top: 50px;
	}
}

.career-anchor__list {
	display: flex;
	/* コンテナ幅 1160px で 36px (Figma実測)。それ以下の幅では詰めて
	   「エントリーフォーム」がタブ内に収まる余白を確保する */
	gap: clamp(16px, calc(36 / 1160 * 100vw), 36px);
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: 30px;
}
@media (max-width: 767px) {
	.career-anchor__list {
		display: grid;                /* SP: 2×2 グリッド */
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding-inline: 30px;
	}
}

.career-anchor__item {
	flex: 1;                        /* 均等幅 */
}

/* タブ本体: 枠色(紺)で塗って形状を作る */
.career-anchor__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 57px;                   /* Figma実測 */
	background: var(--color-primary);
	color: var(--color-primary);
	/* コンテナ幅 1160px で 16px。狭い幅ではタブ幅に合わせて縮める */
	font-size: clamp(13px, calc(16 / 1160 * 100vw), 16px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.05em;
	clip-path: polygon(
		12px 0, 100% 0,
		100% calc(100% - 15px), calc(100% - 12px) 100%,
		0 100%, 0 15px
	);
	transition: opacity 0.3s;
}
@media (hover: hover) {
	.career-anchor__link:hover {
		opacity: 0.7;
	}
}
@media (max-width: 767px) {
	.career-anchor__link {
		height: 48px;
		/* 375px で 14px。それ以下の幅では vw で縮めて「エントリーフォーム」が収まるように */
		font-size: clamp(11px, calc(14 / 375 * 100vw), 14px);
	}
}

/* 非選択タブの内側 (白面): 2px 内側に同形状
   z-index: -1 で「親の紺背景の上・テキストの下」に挟む
   (.career-anchor__link は position + z-index: 0 でスタッキングコンテキストを作るため
    親背景の裏に隠れない) */
.career-anchor__link::before {
	content: "";
	position: absolute;
	inset: 2px;
	z-index: -1;
	background: var(--color-white);
	clip-path: polygon(
		11px 0, 100% 0,
		100% calc(100% - 14px), calc(100% - 11px) 100%,
		0 100%, 0 14px
	);
}


/* スタッキングコンテキスト形成用 (::before の z-index: -1 を機能させる) */
.career-anchor__link {
	z-index: 0;
}

/* アクティブ (部門紹介・固定): 全面紺 + 白文字 + 左上カットなし */
.career-anchor__item--active .career-anchor__link {
	color: var(--color-white);
	clip-path: polygon(
		12px 0, 100% 0,
		100% calc(100% - 15px), calc(100% - 12px) 100%,
		0 100%, 0 15px
	);
}
.career-anchor__item--active .career-anchor__link::before {
	content: none;                  /* 白面を消して全面紺に */
}


/* ----------------------------------------------------------
   部門・エリア セクション
   ---------------------------------------------------------- */
.career-dept-area {
	margin-top: 167px;         
}
@media (max-width: 767px) {
	.career-dept-area {
		margin-top: 60px;
	}
}

.career-dept-area__inner {
	max-width: 1160px;              
	margin-inline: auto;
	padding-inline: 30px;
}
@media (max-width: 767px) {
	.career-dept-area__inner {
		padding-inline: 30px;
	}
}

/* セクション見出し (jp + 線 + en) */
.career-dept-area__title {
	text-align: center;
}

.career-dept-area__title-jp {
	color: var(--color-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
}
@media (max-width: 767px) {
	.career-dept-area__title-jp {
		font-size: 20px;
	}
}

.career-dept-area__title-line {
	display: block;
	width: 100px;
	height: 1px;
	margin: 60px auto 0;
	background: var(--color-primary);
}

.career-dept-area__title-en {
	margin-top: 40px;
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 94px;
	line-height: 1.2;
}
@media (max-width: 767px) {
	.career-dept-area__title-en {
		margin-top: 10px;
		font-size: 32px;
	}
}

/* ----------------------------------------------------------
   2段階アコーディオン
   ---------------------------------------------------------- */
.branch-acc {
	margin-top: 76px;
}
@media (max-width: 767px) {
	.branch-acc {
		margin-top: 30px;
	}
}

.branch-acc__dept + .branch-acc__dept {
	margin-top: 38px;
}
@media (max-width: 767px) {
	.branch-acc__dept + .branch-acc__dept {
		margin-top: 24px;
	}
}

/* --- 部門の帯 --- */
.branch-acc__dept-head {
	position: relative;
	display: block;
	width: 100%;
	padding: 14px 48px;
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-jp);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 0.1em;
	transition: opacity 0.3s;
}
@media (hover: hover) {
	.branch-acc__dept-head:hover {
		opacity: 0.85;
	}
}
@media (max-width: 767px) {
	.branch-acc__dept-head {
		padding: 8px 40px;
		font-size: 14px;
	}
}

/* 部門アイコン (▶ 白 / 開くと ▼) */
.branch-acc__dept-icon {
	position: absolute;
	right: 20px;
	top: 50%;
	width: 11px;
	aspect-ratio: 11 / 20;
	background: url(../../images/career/career_acc-arrow-white.svg) no-repeat center / contain;
	transform: translateY(-50%);
	transition: transform 0.3s;
}
.branch-acc__dept-head[aria-expanded="true"] .branch-acc__dept-icon {
	transform: translateY(-50%) rotate(90deg);
}
@media (max-width: 767px) {
	.branch-acc__dept-icon {
		right: 14px;
		width: 9px;
	}
}

/* --- 開閉対象 (部門) --- */
.branch-acc__dept-body {
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}

/* エリアなし部門 (技術・施工管理): 帯と支店カードの間に余白。
   閉じた状態でも余白が残らないよう、開閉対象 (dept-body) の内側に padding で持たせる */
.branch-acc__dept--flat .branch-acc__dept-inner {
	padding-top: 40px;
}
@media (max-width: 767px) {
	.branch-acc__dept--flat .branch-acc__dept-inner {
		padding-top: 20px;
	}
}

/* --- エリア見出し --- */
.branch-acc__area-head {
	position: relative;
	display: block;
	width: 100%;
	padding: 40px 40px 40px 0;
	color: var(--color-text);
	font-family: var(--font-jp);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	text-align: left;
	border-bottom: 1px solid #D9D9D9;
	transition: opacity 0.3s;
}
@media (hover: hover) {
	.branch-acc__area-head:hover {
		opacity: 0.7;
	}
}
@media (max-width: 767px) {
	.branch-acc__area-head {
		padding: 18px 36px 18px 0;
		font-size: 14px;
	}
}

/* エリアアイコン (▶ 紺 / 開くと ▼) */
.branch-acc__area-icon {
	position: absolute;
	right: 8px;
	top: 50%;
	width: 11px;
	aspect-ratio: 11 / 20;
	background: url(../../images/career/career_acc-arrow-navy.svg) no-repeat center / contain;
	transform: translateY(-50%);
	transition: transform 0.3s;
}
.branch-acc__area-head[aria-expanded="true"] .branch-acc__area-icon {
	transform: translateY(-50%) rotate(90deg);
}
@media (max-width: 767px) {
	.branch-acc__area-icon {
		width: 9px;
	}
}


/* --- 開閉対象 (エリア) --- */
.branch-acc__area-body {
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}

/* --- 支店カード --- */
.branch-acc__branch {
	display: grid;
	grid-template-columns: 220px 1fr;
	align-items: start;
	padding: 20px 24px;
	background: #EFF4FC;
}

.branch-acc__branch:nth-child(even) {
	background: #fff;
}

@media (max-width: 767px) {
	.branch-acc__branch {
		grid-template-columns: 1fr;   /* 縦積み: 支店名 → 情報 */
		padding: 14px 16px;
	}
}

.branch-acc__branch-name {
	padding-left: 8px;
	color: var(--color-primary);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.8;
}
@media (max-width: 767px) {
	.branch-acc__branch-name {
		padding-left: 0;
		font-size: 12px;
	}
}

.branch-acc__branch-info p {
	color: var(--color-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
}
@media (max-width: 767px) {
	.branch-acc__branch-info {
		margin-top: 4px;
	}
	.branch-acc__branch-info p {
		font-size: 12px;
	}
}

/* その他部門: 部門名リスト (左) + 共通住所 (右) の 1 ブロック。
   カードの grid / 文字体裁は .branch-acc__branch を共用し、上下余白のみデザイン値 (25px) */
.branch-acc__branch--other {
	padding-top: 25px;
	padding-bottom: 25px;
}
/* reset.css が li に font-weight: normal を当てるため、ul 側の 700 が継承されない → li に明示 */
.branch-acc__other-list li {
	font-weight: 700;
}
/* 住所の上に置く拠点名。部門名リストと同じ体裁にして見出しに見せる
   (.branch-acc__branch-info p より詳細度を上げて上書きする) */
.branch-acc__branch-info .branch-acc__branch-office {
	color: var(--color-primary);
	font-weight: 700;
}
@media (max-width: 767px) {
	.branch-acc__branch--other {
		padding-top: 16px;
		padding-bottom: 16px;
	}
	/* SP は縦積み (部門名リスト → 住所)。リストと住所の間を少し空ける */
	.branch-acc__branch--other .branch-acc__branch-info {
		margin-top: 12px;
	}
}

/* ----------------------------------------------------------
   キャリア採用募集要項 (#requirements)
   テーブルは bosyu ページのパターンを踏襲 (dl + grid 2列 + ゼブラ)
   ---------------------------------------------------------- */
.career-req {
	margin-top: 160px;
}
@media (max-width: 767px) {
	.career-req {
		margin-top: 80px;
	}
}

.career-req__inner {
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: 30px;
}
@media (max-width: 767px) {
	.career-req__inner {
		padding-inline: 30px;
	}
}

.career-req__table {
	margin-top: 76px;
}
@media (max-width: 767px) {
	.career-req__table {
		margin-top: 36px;
	}
}

.career-req__row {
	display: grid;
	grid-template-columns: 250px 1fr;
	align-items: start;
	padding: 20px 32px;             /* Figma 実測目安 */
	background-color: #EFF4FC;      /* 奇数行 = 薄青 */
}
.career-req__row:nth-child(even) {
	background-color: #FFFFFF;      /* 偶数行 = 白 */
}
@media (max-width: 767px) {
	.career-req__row {
		grid-template-columns: 1fr;   /* SP: ラベル → 内容の縦積み (bosyu と同じ) */
		gap: 4px;
		padding: 16px 16px;
	}
}

.career-req__label {
	color: var(--color-primary);
	font-weight: 700;
	line-height: 1.9;
}
@media (max-width: 767px) {
	.career-req__label {
		font-size: 13px;
	}
}

.career-req__content {
	color: var(--color-text);
	line-height: 1.9;
	font-weight: 500;
}
@media (max-width: 767px) {
	.career-req__content {
		font-size: 13px;
	}
}

/* --- 備考 (開閉式・10行目) --- */
.career-req__note {
	background-color: #FFFFFF;      /* 10行目 = 白 (ゼブラ継続) */
}

.career-req__note-head {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 22px 32px;
	text-align: left;
	transition: opacity 0.3s;
}
@media (hover: hover) {
	.career-req__note-head:hover {
		opacity: 0.7;
	}
}
@media (max-width: 767px) {
	.career-req__note-head {
		padding: 16px 16px;
	}
}

.career-req__note-label {
	color: var(--color-primary);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.9;
}
@media (max-width: 767px) {
	.career-req__note-label {
		font-size: 13px;
	}
}

/* ＋アイコン (開くと −): 横バーはそのまま、縦バーが90度回転して横バーに重なる */
.career-req__note-icon {
	position: absolute;
	right: 0;
	top: 50%;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
}
.career-req__note-icon::before,
.career-req__note-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--color-primary);
	transition: transform 0.35s ease;
}
.career-req__note-icon::before {
	width: 16px;                    /* 横バー (開閉で不変) */
	height: 2px;
	transform: translate(-50%, -50%);
}
.career-req__note-icon::after {
	width: 2px;                     /* 縦バー */
	height: 16px;
	transform: translate(-50%, -50%);
}
/* 開いたら: 縦バーだけ90度回転して横バーに重なり − に見える */
.career-req__note-head[aria-expanded="true"] .career-req__note-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
@media (max-width: 767px) {
	.career-req__note-icon {
		right: 16px;
		width: 14px;
		height: 14px;
	}
	.career-req__note-icon::before {
		width: 14px;
	}
	.career-req__note-icon::after {
		height: 14px;
	}
}

/* 開閉対象 */
.career-req__note-body {
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}

.career-req__note-inner {
	padding: 0 32px 22px;
	color: var(--color-text);
	font-weight: 500;
	line-height: 1.9;
}
@media (max-width: 767px) {
	.career-req__note-inner {
		padding: 0 16px 16px;
		font-size: 13px;
	}
}

/* ----------------------------------------------------------
   他職種・グループ会社のキャリア採用
   ---------------------------------------------------------- */
.career-group {
	margin-top: 160px;
}
@media (max-width: 767px) {
	.career-group {
		margin-top: 80px;
	}
}

.career-group__inner {
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: 30px;
}
@media (max-width: 767px) {
	.career-group__inner {
		padding-inline: 30px;
	}
}

/* 見出し (両端に横線) */
.career-group__title {
	display: flex;
	align-items: center;
	gap: 20px;
	color: var(--color-primary);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: calc(5.4 / 36 * 1em);
	white-space: nowrap;
}
.career-group__title::before,
.career-group__title::after {
	content: "";
	flex: 1;
	height: 6px;
	border-radius: 2px;
	background: var(--color-primary);
}
@media (max-width: 767px) {
	.career-group__title {
		gap: 14px;
		font-size: 15px;
		letter-spacing: 0.05em;
		white-space: normal;          /* SPは折返し許容 */
	}
	.career-group__title::before,
	.career-group__title::after {
		height: 4px;
	}
}

/* 会社リスト */
.career-group__list {
	margin-top: 108px;
}
@media (max-width: 767px) {
	.career-group__list {
		margin-top: 36px;
	}
}

.career-group__row {
	display: flex;
	align-items: flex-start;        /* 上揃え: タグが2行でも会社名は上に */
	gap: 40px;                      /* 会社名列 ↔ タグ群 */
	padding-bottom: 16px;
	border-bottom: 2px solid var(--color-primary);
}
.career-group__row + .career-group__row {
	margin-top: 32px;
}
/* 900px 以下: 会社名 (520px 固定) + 折返さないタグ が1行に収まらないため縦積みに切替 */
@media (max-width: 900px) {
	.career-group__row {
		flex-direction: column;
		gap: 16px;
	}
}
@media (max-width: 767px) {
	.career-group__row {
		flex-direction: column;       /* SP: 会社名の下にタグ */
		gap: 10px;
		padding-bottom: 14px;
	}
	.career-group__row + .career-group__row {
		margin-top: 18px;
	}
}

/* 会社名リンク (左列・固定幅) */
.career-group__name {
	flex-shrink: 0;
	width: 520px;                   /* 最長社名「クリヤマホールディングス株式会社」が
	                                   32px/700 で 510px (実測) → 折り返さない幅 */
	color: var(--color-primary);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: underline;
	text-underline-offset: 6px;
}
.career-group__name--nolink {
	text-decoration: none;
}
@media (max-width: 900px) {
	.career-group__name {
		width: auto;                  /* 縦積みに合わせて固定幅を解除 */
	}
}
@media (max-width: 767px) {
	.career-group__name {
		font-size: 16px;
		text-underline-offset: 4px;
	}
}

/* 職種タグ (右列・残り幅で折返し) */
.career-group__tags {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 10px;              /* 会社名 (32px) とタグ (16px) の1行目天面を視覚的に揃える */
}
@media (max-width: 900px) {
	.career-group__tags {
		padding-top: 0;
	}
}
.career-group__tag {
	flex-shrink: 0;                 /* タグ内では折り返さない */
	white-space: nowrap;
	padding: 4px 18px;
	border-radius: 999px;
	background: #E5E4F2;
	color: var(--color-primary);
	font-size: 16px;
	line-height: 1.4;
}
@media (max-width: 767px) {
	.career-group__tags {
		gap: 8px;
	}
	.career-group__tag {
		padding: 3px 14px;
		font-size: 12px;
	}
}

/* ----------------------------------------------------------
   リターン採用 (四隅面取りの額縁パネル)
   - 形状: clip-path 八角形 (四隅を 20px 斜めカット)
   - 枠線: ::before(枠色) + ::after(2px内側・背景色) の2枚重ね
   - 影: 親に filter: drop-shadow (マスクで影が切れない構成 = 求める人財像と同じ)
   - 高さは中身に応じて可変
   ---------------------------------------------------------- */
.career-return {
	margin-top: 150px;
}
@media (max-width: 767px) {
	.career-return {
		margin-top: 80px;
	}
}

.career-return__inner {
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: 30px;
}
@media (max-width: 767px) {
	.career-return__inner {
		padding-inline: 30px;
	}
}

/* 枠: 求める人財像 (.requirements-ideal__frame) と同一構成
   四隅「内側にえぐれた円弧」= radial-gradient マスク 4隅 + mask-size 51%
   - 親: 影 (drop-shadow) のみ担当。マスクは持たない (影が切れないため)
   - ::before: 枠線色の面 (inset 0)
   - ::after : 内側背景色の面 (inset 2px)  → 差分 2px が枠線に見える
   ※ --r / --bw / --bc / --bg / 影 は requirements.css と同値に揃えること */
.career-return__frame {
	--r: 23px;                        /* 角の切り欠き半径 */
	--bw: 2px;                        /* 枠線太さ */
	--bc: #003894;                    /* 枠線色 */
	--bg: #F2F8FC;                    /* 内側背景 */

	position: relative;
	z-index: 0;                       /* 疑似要素 z-index: -1 用のスタッキングコンテキスト */
	padding: 60px 40px 90px; 
	text-align: center;
	background: none;
	filter: drop-shadow(15px 15px 18px rgba(42, 116, 141, 0.20));
}
@media (max-width: 767px) {
	.career-return__frame {
		padding: 36px 20px 30px;
	}
}

/* ::before = 枠線色の面 (親サイズにマスク) */
.career-return__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bc);
	pointer-events: none;

	-webkit-mask:
		radial-gradient(var(--r) at 0    0,    #0000 98%, #000) 0    0,
		radial-gradient(var(--r) at 100% 0,    #0000 98%, #000) 100% 0,
		radial-gradient(var(--r) at 0    100%, #0000 98%, #000) 0    100%,
		radial-gradient(var(--r) at 100% 100%, #0000 98%, #000) 100% 100%;
	-webkit-mask-size: 51% 51%;
	-webkit-mask-repeat: no-repeat;
	mask:
		radial-gradient(var(--r) at 0    0,    #0000 98%, #000) 0    0,
		radial-gradient(var(--r) at 100% 0,    #0000 98%, #000) 100% 0,
		radial-gradient(var(--r) at 0    100%, #0000 98%, #000) 0    100%,
		radial-gradient(var(--r) at 100% 100%, #0000 98%, #000) 100% 100%;
	mask-size: 51% 51%;
	mask-repeat: no-repeat;
}

/* ::after = 内側背景色 (2px 内側に配置) */
.career-return__frame::after {
	content: "";
	position: absolute;
	inset: var(--bw);
	z-index: -1;
	background: var(--bg);
	pointer-events: none;

	-webkit-mask:
		radial-gradient(var(--r) at 0    0,    #0000 98%, #000) 0    0,
		radial-gradient(var(--r) at 100% 0,    #0000 98%, #000) 100% 0,
		radial-gradient(var(--r) at 0    100%, #0000 98%, #000) 0    100%,
		radial-gradient(var(--r) at 100% 100%, #0000 98%, #000) 100% 100%;
	-webkit-mask-size: 51% 51%;
	-webkit-mask-repeat: no-repeat;
	mask:
		radial-gradient(var(--r) at 0    0,    #0000 98%, #000) 0    0,
		radial-gradient(var(--r) at 100% 0,    #0000 98%, #000) 100% 0,
		radial-gradient(var(--r) at 0    100%, #0000 98%, #000) 0    100%,
		radial-gradient(var(--r) at 100% 100%, #0000 98%, #000) 100% 100%;
	mask-size: 51% 51%;
	mask-repeat: no-repeat;
}

.career-return__label {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 22px;
	line-height: 1.3;
}
@media (max-width: 767px) {
	.career-return__label {
		font-size: 14px;
	}
}

.career-return__title {
	margin-top: 14px;
	color: var(--color-primary);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
}
@media (max-width: 767px) {
	.career-return__title {
		margin-top: 8px;
		font-size: 22px;
	}
}

.career-return__line {
	display: block;
	width: 100px;
	height: 1px;
	margin: 46px auto 0;
	background: var(--color-primary);
}
@media (max-width: 767px) {
	.career-return__line {
		width: 60px;
		margin-top: 20px;
	}
}

.career-return__body {
	margin-top: 56px;
	color: var(--color-primary);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: 0.06em;
}
@media (max-width: 767px) {
	.career-return__body {
		margin-top: 24px;
		font-size: 14px;
		line-height: 2;
	}
}

/* 横断の区切り線 */
.career-return__divider {
	display: block;
	width: calc(100% - 60px);
	height: 3px;
	margin: 56px auto 0;
	background: #97ABD6;
}
@media (max-width: 767px) {
	.career-return__divider {
		width: 100%;
		margin-top: 28px;
	}
}

.career-return__note {
	margin-top: 36px;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.03em;
}
@media (max-width: 767px) {
	.career-return__note {
		margin-top: 16px;
		font-size: 12px;
	}
}

/* ----------------------------------------------------------
   選考フロー (#flow)
   5カード: PC 3列グリッド (上段3・下段2・左寄せ) / SP 縦積み
   カード間矢印: 各カード右外側に ::after で紺の 〉 (行末・最終は非表示)
   ---------------------------------------------------------- */
.career-flow {
	margin-top: 160px; 
}
@media (max-width: 767px) {
	.career-flow {
		margin-top: 80px;
	}
}

.career-flow__inner {
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: 30px;
}
@media (max-width: 767px) {
	.career-flow__inner {
		padding-inline: 30px;
	}
}

.career-flow__list {
	--flow-gap-x: 34px;             /* 列間。矢印の中央配置がこの値に連動する */
	--flow-gap-y: 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--flow-gap-y) var(--flow-gap-x);
	margin-top: 87px;
	list-style: none;
}
@media (max-width: 767px) {
	.career-flow__list {
		--flow-gap-y: 44px;           /* 矢印ぶんの余白込み */
		grid-template-columns: 1fr;   /* SP: 縦積み */
		margin-top: 36px;
	}
}

.career-flow__item {
	position: relative;
}

/* --- カード間の矢印 (career_flow_arrow.svg 12×20) ---
   カード右端から gap の半分だけ外へ出し、translateX(50%) で矢印中心を gap 中央に */
.career-flow__item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--flow-gap-x) / -2);
	width: 12px;
	height: 20px;
	transform: translate(50%, -50%);
	background: url(../../images/career/career_flow_arrow.svg) no-repeat center / contain;
}
/* 行末 (03の右 = 折り返し位置) と 最終カード は矢印なし (Figma準拠) */
.career-flow__item:nth-child(3n)::after,
.career-flow__item:last-child::after {
	content: none;
}
@media (max-width: 767px) {
	/* SP: 下向き矢印をカード下中央 (gap 中央) に。最終のみ非表示 */
	.career-flow__item::after {
		content: "";
		top: auto;
		right: 50%;
		bottom: calc(var(--flow-gap-y) / -2);
		transform: translate(50%, 50%) rotate(90deg);
	}
	.career-flow__item:nth-child(3n)::after {
		content: "";                  /* PCの行末非表示を解除 */
	}
	.career-flow__item:last-child::after {
		content: none;
	}
}

/* --- カード本体 (四隅装飾なしの四角・枠線 1px) --- */
.career-flow__card {
	height: 100%;
	padding: 24px 25px 32px;
	background: #FFFFFF;
	border: 1px solid #003894;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
	.career-flow__card {
		padding: 20px 18px;
	}
}

/* 任意実施の選考 (二次面接など) は点線枠。ACF のトグルで出し分ける。
   影は実線カードと揃える */
.career-flow__card--dashed {
	border-style: dashed;
}

/* --- カード中身 --- */
.career-flow__head {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}

.career-flow__num {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 48px;
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: calc(2.88 / 48 * 1em);
}
@media (max-width: 767px) {
	.career-flow__num {
		font-size: 36px;
	}
}

.career-flow__titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.career-flow__en {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.04em;
}

.career-flow__jp {
	color: var(--color-primary);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
@media (max-width: 767px) {
	.career-flow__jp {
		font-size: 16px;
	}
}

.career-flow__desc {
	margin-top: 20px;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.03em;
}
@media (max-width: 767px) {
	.career-flow__desc {
		font-size: 13px;
	}
}

/* 写真: 固定アスペクト (Figma 実測 約 5:2.9) で高さ揃え */
.career-flow__photo {
	margin-top: 18px;
}
.career-flow__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 285 / 115;
	object-fit: cover;
}

/* ----------------------------------------------------------
   エントリーフォームセクション
   ---------------------------------------------------------- */
.career-entry {
	margin-top: 92px;
}
@media (max-width: 767px) {
	.career-entry {
		margin-top: 80px;
	}
}

.career-entry__inner {
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: 30px;
}
@media (max-width: 767px) {
	.career-entry__inner {
		padding-inline: 30px;
	}
}

/* 必須注記 (見出しとフォームの間) */
.career-entry__note {
	margin-top: 48px;
	color: var(--color-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
@media (max-width: 767px) {
	.career-entry__note {
		margin-top: 24px;
		font-size: 14px;
	}
}
/* 確認画面・完了画面 (SMF が data-screen を切替) では注記を出さない */
.career-entry:has(.snow-monkey-form:not([data-screen="input"])) .career-entry__note {
	display: none;
}

.career-entry__form {
	margin-top: 80px; 
}
@media (max-width: 767px) {
	.career-entry__form {
		margin-top: 30px;
	}
}
/* 注記がある場合は注記 → フォームの間隔 */
.career-entry__note + .career-entry__form {
	margin-top: 32px;
}
@media (max-width: 767px) {
	.career-entry__note + .career-entry__form {
		margin-top: 20px;
	}
}

/* キャリア採用のクリヤマガジンボタンは TOP と違い単色 (#003894) */
.career .c-magazine__btn::before {
	background: var(--color-primary);
}

/* ----------------------------------------------------------
   クリヤマガジン導線 (.c-magazine は common.css / template-parts/magazine.php)
   他セクションと同じ 160px 間隔 (padding-top 20px 込み)。値は仮 (デザイン未確認)
   ---------------------------------------------------------- */
.career .c-magazine {
	margin-top: 140px;
}
@media (max-width: 767px) {
	.career .c-magazine {
		margin-top: 60px;
	}
}

/* ----------------------------------------------------------
   追従: エントリーフォームはこちら
   右下から30px固定。クリックで #career-entry へスムーススクロール
   (html { scroll-behavior: smooth } は reset.css で設定済み)
   ---------------------------------------------------------- */
.career-entry-btn {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 900;                   /* drawer(1100)・header(1000) より下 */
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 18px 52px;
	background: var(--gradient-btn);
	border: 2px solid var(--color-white);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	color: var(--color-white);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.05em;
	transition: opacity 0.3s, visibility 0.3s;
}
@media (hover: hover) {
	.career-entry-btn:hover {
		opacity: 0.85;
	}
}
/* フッターに差し掛かったらフェードアウト (main.js で付与) */
.career-entry-btn.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
@media (max-width: 767px) {
	.career-entry-btn {
		right: 15px;
		left: 15px;                   /* 左右 15px の内側で中央寄せ */
		bottom: 15px;
		max-width: 354px;
		margin-inline: auto;
		justify-content: center;
		gap: 10px;
		padding: 12px 20px;
		font-size: 15px;
	}
}

/* ダブルシェブロン (>>) Figma書き出しSVG */
.career-entry-btn__arrow {
	width: 24px;
	height: 14px;
	background: url(../../images/career/career_entry-arrow.svg) no-repeat center / contain;
	flex-shrink: 0;
}
@media (max-width: 767px) {
	.career-entry-btn__arrow {
		width: 18px;
		height: 11px;
	}
}