@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
企業求人特集ページ 共通コンポーネント（company-feature）
------------------------------------------------------------
・クラス名は企業固有名を含めない（company-feature を基準に横展開可能）
・色/フォント/余白は既存サイトのCSSカスタムプロパティを最大限再利用する
  （--color_main, --color_sub, --color_gray, --font_main, --font_english,
   --padding-inline, --padding-block, --border-radius, .inner, section の
   既定 padding-block などは css/common.css 側で定義済み）
・スタンドアロン確認用に最低限のフォールバック値のみ用意
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

.company-feature {
	--cf-ink:        var(--color_gray_dark, #3b3b3b);
	--cf-sub:        var(--color_gray, #707070);
	--cf-line:       #e3e6ea;
	--cf-tint:       var(--color_sub_light, #eef5fd);
	--cf-tint-strong:var(--color_sub, #e6f5ff);
	--cf-accent:     var(--color_main, #ff1a8d);
	--cf-blue:       #2d8dd5;
	--cf-radius:     var(--border-radius, 5px);
	--cf-warn:       #c0472e;
	--cf-warn-bg:    #fbeee9;
	--cf-warn-line:  #f1d3c7;
	--cf-info:       #2d6ea8;
	--cf-info-bg:    #eaf3fb;
	--cf-info-line:  #cfe0f2;

	color: var(--cf-ink);
	background: #fff;
	font-size: 14px;
	line-height: 1.8;
}

.company-feature a { transition: var(--transition, .3s ease-in-out); }

/* ===== ボタンコンポーネント（.button--primary / .button--secondary） =====
   既存サイトの .button（base：display/padding/border-radius/font-size等の
   構造）と併用する前提のモディファイアです。
   使い方： <a class="button button--primary">…</a>
           <a class="button button--secondary">…</a>
   .company-feature の外（トップページ導線バナー等）でも単独で使えるよう、
   カスタムプロパティにはフォールバック値を付けています。
   企業名に依存しないため、他の企業特集にもそのまま流用できます。 */
.button--primary {
	background: linear-gradient(45deg, var(--cf-accent, var(--color_main, #ff1a8d)), #d10c77);
	color: #fff;
}

.button--primary:hover,
.button--primary:focus-visible {
	filter: var(--brightness, brightness(1.2));
}

.button--secondary {
	background: #fff;
	border: 1px solid var(--cf-blue, #2d8dd5);
	color: var(--cf-blue, #2d8dd5);
}

.button--secondary:hover,
.button--secondary:focus-visible {
	background: var(--cf-blue, #2d8dd5);
	color: #fff;
	filter: none;
}

/* ===== セクション共通 ===== */
.company-feature__section--tint {
	background: var(--cf-tint);
}

.company-feature__eyebrow {
	display: block;
	margin: 0 0 .5em;
	color: var(--cf-blue);
	font-weight: 400;
	font-size: 12px;
	font-family: var(--font_english, sans-serif);
	letter-spacing: .14em;
	text-align: center;
}

.company-feature__lead {
	max-width: 720px;
	margin: 0 auto 2em;
	color: var(--cf-sub);
	font-size: 13px;
	text-align: center;
}

.company-feature__note {
	margin-top: .8em;
	color: #b1892f;
	background: #fbf6ea;
	border: 1px solid #ecdfb9;
	border-radius: var(--cf-radius);
	padding: .6em .9em;
	font-size: 12px;
	line-height: 1.7;
}

@media (min-width: 768px) {
	.company-feature__lead { font-size: 15px; }
}

/* ===== ファーストビュー ===== */
.company-feature__hero {
	/* common.css の section{padding-block:...} 既定を無効化し、
	   .company-feature__hero-inner 側で余白を管理する */
	padding-block: 0;
	position: relative;
	overflow: hidden;
	color: #fff;
	background: #0f2537;
}

.company-feature__hero-media {
	position: absolute;
	inset: 0;
}

.company-feature__hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.company-feature__hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 37, 55, .75);
}

.company-feature__hero-phnote {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 10px;
	left: 0;
	color: rgba(255, 255, 255, .75);
	font-size: 10px;
	text-align: center;
}

.company-feature__hero-inner {
	display: flex;
	position: relative;
	z-index: 1;
	flex-direction: column;
	align-items: center;
	max-width: 900px;
	margin-inline: auto;
	padding: 48px 16px;
	text-align: center;
}

.company-feature__hero-badge {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 100px;
	padding: 8px 24px;
	font-family: var(--font_main);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .05em;
}

.company-feature__hero-rule {
	display: block;
	height: 1px;
	margin-block: 10px;
	background: #c5a059;
}

.company-feature__hero-rule--badge {
	width: 100px;
}

.company-feature__hero-rule--text {
	width: 40px;
	margin-block: 4px;
}

/* [ロゴ差し替え] 企業ロゴ画像に差し替え予定 */
.company-feature__hero-logo {
	display: block;
	width: 100%;
	max-width: 309px;
	margin-block: 14px;
}

.company-feature__hero-textgroup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.company-feature__hero-title {
	margin: 0;
	font-family: var(--font_main);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
}

.company-feature__hero-desc {
	margin: 0;
	max-width: 480px;
	font-size: 14px;
	line-height: 1.6;
}

.company-feature__hero-count {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: .2em;
	margin-bottom: 20px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 100px;
	background: #fff;
	padding: 12px 16px;
	color: #161616;
	font-weight: 700;
	font-size: 16px;
}

.company-feature__hero-count-num {
	color: var(--cf-accent);
}

.company-feature__hero-count-num strong {
	font-weight: 700;
	font-size: 1.5em;
}

.company-feature__hero-cta {
	display: flex;
	width: 200px;
	max-width: 100%;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	padding: 10px 24px;
	font-family: var(--font_main);
	font-weight: 700;
	font-size: 14px;
}

@media (min-width: 768px) {
	.company-feature__hero-inner { padding-block: 80px; }

	.company-feature__hero-badge { font-size: 20px; }

	.company-feature__hero-rule--badge { width: 356px; margin-block: 14px; }

	.company-feature__hero-rule--text { display: none; }

	.company-feature__hero-logo { max-width: 460px; margin-block: 20px 8px; }

	.company-feature__hero-textgroup { gap: 20px; margin-bottom: 27px; }

	.company-feature__hero-title { font-size: 27px; line-height: 1.3; }

	.company-feature__hero-desc { max-width: 720px; font-size: 16px; }

	.company-feature__hero-count {
		width: auto;
		gap: .3em;
		padding: 10px 24px;
		font-size: 14px;
	}
}

/* ===== 企業紹介 ===== */
.company-feature__intro-divider {
	display: block;
	width: 60px;
	height: 1px;
	margin: -1.4em auto 2em;
	background: #c5a059;
}

.company-feature__intro-body {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}
@media (max-width: 767.9px) {
.company-feature__intro-body {
	text-align: left;
}
}

.company-feature__intro-body p { margin: 0 0 1.2em; }
.company-feature__intro-body p:last-child { margin-bottom: 0; }

.company-feature__intro-table,
.company-feature__history-table {
	margin-bottom: 48px;
}

.company-feature__history-heading,
.company-feature__brand-heading {
	margin-bottom: 1.2em;
}

.company-feature__history-table td p {
	margin: 0 0 .6em;
}

.company-feature__history-table td p:last-child { margin-bottom: 0; }

.company-feature__history-month {
	display: inline-block;
	min-width: 40px;
	margin-right: 16px;
}

@media (max-width: 767.9px) {
	.company-feature__history-month {
		display: block;
		margin-right: 0;
		margin-bottom: 4px;
	}
}

/* .tableの外枠ボーダー（全辺1px）のうち、沿革テーブルは左右のみ無しにする。
   .table tr { border: 1px solid ... } はborder-collapse:collapse適用で有効になり、
   trの左右ボーダーとして見えてしまうためtr側も上書きする */
.company-feature__history-table,
.company-feature__history-table tr {
	border-left: 0;
	border-right: 0;
}

/* 沿革テーブルはFigma（枠線のみのフラットな表組み）に合わせる。会社概要テーブルと同じ.tableの
   カード調デザイン（グラデーション背景・大きい余白）は沿革には適用しない */
@media (min-width: 768px) {
	.company-feature__history-table {
		border-collapse: collapse;
		background: none;
	}

	.company-feature__history-table th {
		width: 208px;
		padding: 14px 10px;
		background: none;
		border-right: 1px solid var(--color_gray_light);
		text-align: center;
		font-size: 14px;
		font-weight: 500;
	}

	.company-feature__history-table td {
		padding: 14px 20px;
		background: #fff;
		text-align: left;
		font-size: 14px;
	}
}

@media (max-width: 767.9px) {
	.company-feature__intro-table,
	.company-feature__history-table {
		display: table;
	}

	.company-feature__intro-table th,
	.company-feature__intro-table th {
		font-size: 14px;
	}
	.company-feature__intro-table td,
	.company-feature__history-table td {
		font-size: 13px;
	}
	.company-feature__history-table th {
		display: table-cell;
		background: none;
		vertical-align: middle;
		text-align: center;
        border-top: 1px solid var(--color_gray_light);
        border-right: 1px solid var(--color_gray_light);
        border-bottom: 1px solid var(--color_gray_light);
        border-collapse: collapse;
	}
	.company-feature__history-table td {
		display: table-cell;
        border-collapse: collapse;
	}
}

/* ===== 主なホテルブランド ===== */
.company-feature__brands {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 0;
	margin-bottom: 48px;
}

/* モバイルは1カラムで縦に並ぶだけなので、隣接要素と接しない＝左右とも線を付けてOK */
.company-feature__brand {
	width: 100%;
	max-width: 287px;
	padding: 16px 20px;
	border-inline: 1px solid #c5a059;
	text-align: center;
}

.company-feature__brand-logo {
	display: block;
	height: 36px;
	width: auto;
	max-width: 100%;
	margin: 0 auto 10px;
	object-fit: contain;
}

.company-feature__brand p {
	margin: 0;
	font-size: 13px;
}
@media (max-width: 767.9px) {
.company-feature__brand {
	display: flex;
    justify-content: center;
	gap: 15px;
}
.company-feature__brand-logo {
	margin: 0;
	max-width: 80px;
}
}

@media (min-width: 768px) {
	.company-feature__intro-divider { width: 100px; }

	/* PCは横並び（1行3列）で隣接要素と接するため、右側の線は行末（3の倍数番目／最後の要素）のみに付ける */
	.company-feature__brand {
		width: 287px;
		border-right: 0;
	}

	.company-feature__brand:nth-child(3n),
	.company-feature__brand:last-child {
		border-right: 1px solid #c5a059;
	}

	.company-feature__brand-logo { height: 44px; }
}

/* ===== つなぎのイメージバナー（企業紹介 → 働くメリット） ===== */
.company-feature__divider {
	padding-block: 0;
	overflow: hidden;
	height: 200px;
}

.company-feature__divider-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.company-feature__divider { height: 320px; }
}

@media (min-width: 1024px) {
	.company-feature__divider { height: 456px; }
}

/* ===== 働くメリット ===== */
.company-feature__merits {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.company-feature__merit {
	display: flex;
	align-items: center;
	gap: 36px;
	width: 100%;
	max-width: 342px;
	padding: 20px 36px;
	border: 1px solid var(--cf-line);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 6px rgba(15, 37, 55, .04);
	text-align: left;
}
@media (min-width: 768px) {
.company-feature__merit {
	gap: 20px;
	padding: 20px 28px;
}
}

.company-feature__merit-icon-group {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.company-feature__merit-icon {
	display: block;
	width: 32px;
	height: 32px;
}

.company-feature__merit-icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.company-feature__merit-no {
	font-family: var(--font_english, var(--font_main));
	color: var(--cf-accent);
	font-size: 24px;
	line-height: 1;
}

.company-feature__merit-title {
	margin: 0;
	font-weight: 700;
	font-size: 20px;
}

.company-feature__merit-desc {
	margin: 0;
	color: var(--cf-sub);
	font-size: 16px;
	line-height: 1.5;
}
@media (min-width: 768px) {
.company-feature__merit-title {
	font-size: 16px;
}

.company-feature__merit-desc {
	font-size: 13px;
}
}

@media (min-width: 1024px) {
	.company-feature__merits {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
		max-width: 1200px;
		margin-inline: auto;
	}

	.company-feature__merit {
		flex-direction: column;
		justify-content: center;
		gap: 8px;
		width: 220px;
		max-width: none;
		height: 220px;
		padding: 20px;
		text-align: center;
	}

	.company-feature__merit-icon-group { gap: 4px; }

	.company-feature__merit-no { font-size: 22px; }

	.company-feature__merit-title { margin-bottom: .3em; font-size: 14px; }

	.company-feature__merit-desc { font-size: 11px; }
}

/* ===== 募集職種 ===== */
.company-feature__jobs-lead {
	max-width: 560px;
	margin: 0 auto 32px;
	font-size: 15px;
	text-align: center;
}

.company-feature__jobs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	max-width: 1000px;
	margin: 0 auto 40px;
}

.company-feature__jobs-tag {
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: 100px;
	padding: 10px 16px;
	font-weight: 600;
	font-size: 14px;
}

.company-feature__jobs-cta {
	display: flex;
	width: 200px;
	max-width: 100%;
	margin-inline: auto;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	padding: 10px 24px;
	font-family: var(--font_main);
	font-weight: 700;
	font-size: 14px;
}

@media (min-width: 768px) {
	.company-feature__jobs-lead { font-size: 18px; }
	.company-feature__jobs-tag { padding: 12px 24px; }
}

/* ===== 地域から探すエリア（AREA MAP） ===== */
.company-feature__areamap-section {
	position: relative;
	overflow: hidden;
}

.company-feature__areamap-bg {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
}

.company-feature__areamap-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.company-feature__areamap-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .55);
}

.company-feature__areamap-section > .inner {
	position: relative;
	z-index: 1;
}

.company-feature__areamap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 1100px;
	margin-inline: auto;
}

.company-feature__areamap-card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 480px;
	padding: 24px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .7);
	box-shadow: 0 6px 20px rgba(15, 37, 55, .06);
}

.company-feature__areamap-img {
	width: 100%;
	height: auto;
}

.company-feature__areamap-side {
	width: 100%;
}

.company-feature__areamap-pills {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}

.company-feature__areamap-pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	padding: .8em 1em;
	color: var(--cf-ink);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
}

.company-feature__areamap-pill::after {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: -2px;
	border-right: 2px solid var(--cf-accent);
	border-bottom: 2px solid var(--cf-accent);
	transform: rotate(45deg);
}

.company-feature__areamap-pill:hover,
.company-feature__areamap-pill:focus-visible {
	border-color: var(--cf-accent);
}

.company-feature__areamap-note {
	color: var(--cf-sub);
	font-size: 12px;
	text-align: center;
}

@media (min-width: 768px) {
	.company-feature__areamap {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.company-feature__areamap-img { flex: 1; max-width: 460px; }

	.company-feature__areamap-side { flex: 1; }

	.company-feature__areamap-note { text-align: left; }
}

/* ===== 全国地図 ===== */
.company-feature__map-frame {
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	padding: 20px;
}

/* [地図差し替え] AQデザインの全国地図SVG/画像に差し替え予定。現在はプレースホルダ */
.company-feature__map-canvas {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	margin-bottom: 20px;
	border: 2px dashed #b9cee2;
	border-radius: var(--cf-radius);
	background:
		repeating-linear-gradient(45deg, #f6fafd 0 10px, #eef5fb 10px 20px);
	color: #6f8ea3;
	font-size: 13px;
	text-align: center;
	line-height: 1.8;
}

.company-feature__map-canvas img {
	width: 34px;
	height: 34px;
	margin: 0 auto 8px;
	opacity: .6;
}

.company-feature__map-areas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.company-feature__map-area {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--cf-tint-strong);
	background: var(--cf-tint);
	border-radius: 100px;
	padding: .7em 1.3em;
	color: var(--cf-ink);
	font-weight: 700;
	font-size: 13px;
}

.company-feature__map-area:hover,
.company-feature__map-area:focus-visible {
	background: var(--cf-accent);
	border-color: var(--cf-accent);
	color: #fff;
}

.company-feature__map-count {
	background: rgba(0,0,0,.08);
	border-radius: 100px;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 700;
}

.company-feature__map-area:hover .company-feature__map-count,
.company-feature__map-area:focus-visible .company-feature__map-count {
	background: rgba(255,255,255,.28);
}

.company-feature__map-hint {
	margin-top: 14px;
	color: var(--cf-sub);
	font-size: 12px;
	text-align: center;
}

/* ===== エリアクイックジャンプ（地図なし版：エリア別ホテル一覧の上部に設置）=====
   全国地図を実装しない構成向けの、ページ内スクロール専用のエリアボタン群。
   検索や絞り込みは行わず、js/company-feature.js の data-cf-area-link 共通処理で
   該当エリアのアコーディオンを開いてスクロールするだけ（.company-feature__map-area
   と同じ配色だが、地図がない構成でも単独で成立する専用クラス名にしている）。 */
.company-feature__area-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 28px;
}

.company-feature__area-nav-item {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--cf-tint-strong);
	background: var(--cf-tint);
	border-radius: 100px;
	padding: .65em 1.3em;
	color: var(--cf-ink);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
}

.company-feature__area-nav-item:hover,
.company-feature__area-nav-item:focus-visible {
	background: var(--cf-accent);
	border-color: var(--cf-accent);
	color: #fff;
}

/* body.is-no-map ここに地図なし版専用の微調整が必要な場合のみ追記する
   （現時点では共通CSSのみで成立しているため未使用） */

/* ===== エリア別ホテル一覧（アコーディオン） ===== */
.company-feature__arealist {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.company-feature__area {
	/* common.css の section{padding-block:...} 既定を無効化（見出し/本文側で管理） */
	padding-block: 0;
	background: #fff;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	overflow: hidden;
}

.company-feature__area-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	border: 0;
	background: var(--color_main_light, #fff7f7);
	padding: 18px 24px;
	color: var(--cf-ink);
	font-family: var(--font_main);
	font-size: 17px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.company-feature__area-head:hover,
.company-feature__area-head:focus-visible {
	background: var(--cf-tint);
}

.company-feature__area-icon {
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--cf-accent);
	border-bottom: 2px solid var(--cf-accent);
	transform: rotate(45deg);
	transition: transform .2s;
	flex: none;
}

.js-cf-accordion.is-open .company-feature__area-icon {
	transform: rotate(-135deg);
}

.company-feature__area-body {
	display: none;
	padding: 10px 24px 20px;
}

.js-cf-accordion.is-open .company-feature__area-body {
	display: block;
}

.company-feature__hotel-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.company-feature__hotel {
	border-top: 1px solid var(--cf-line);
}

.company-feature__hotel:first-child { border-top: 0; }

.company-feature__hotel-link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 0;
	color: inherit;
	text-decoration: none;
}

/* [画像差し替え] ホテル・ブランドロゴ画像に差し替え予定（中身は仮あて） */
.company-feature__hotel-thumb {
	display: block;
	flex: none;
	width: 100%;
	max-width: 285px;
	height: 92px;
	text-align: center;
}

.company-feature__hotel-thumb img {
	display: inline-block;
	width: 60%;
	height: 100%;
	object-fit: contain;
	max-height: 90px;
}

.company-feature__hotel-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.company-feature__hotel-name {
	min-width: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--cf-ink);
}

.company-feature__hotel-address {
	font-size: 13px;
	color: var(--cf-sub);
}

.company-feature__hotel-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.company-feature__hotel-tag {
	display: inline-block;
	background: #e3e6ea;
	border-radius: 4px;
	padding: 6px 12px;
	color: var(--cf-ink);
	font-weight: 700;
	font-size: 11px;
	white-space: nowrap;
	text-decoration: none;
}

.company-feature__hotel-tag:hover {
	text-decoration: underline;
}

@media (min-width: 768px) {
	.company-feature__hotel-link {
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}

	.company-feature__hotel-thumb { width: 121px; max-width: 121px; height: 50px; }

	.company-feature__hotel-info { flex: 0 0 max(40%, 260px); gap: 8px; }

	.company-feature__hotel-tags { flex: 1; justify-content: flex-end; }
}

/* ===== コーディネーターからの推薦メッセージ ===== */
.company-feature__recommend {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 1100px;
	margin-inline: auto;
	padding: 32px 24px;
	border-radius: 8px;
	background: var(--color_main_light, #fff7f7);
	text-align: center;
}

.company-feature__recommend-photo {
	display: block;
	flex: none;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
}

.company-feature__recommend-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.company-feature__recommend-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.company-feature__recommend-quote {
	margin: 0;
	font-family: var(--font_main);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.5;
}

.company-feature__recommend-text {
	margin: 0;
	color: var(--cf-ink);
	font-size: 13px;
	line-height: 1.8;
	text-align: left;
}

@media (min-width: 768px) {
	.company-feature__recommend {
		flex-direction: row;
		align-items: flex-start;
		gap: 40px;
		padding: 48px 56px;
		text-align: left;
	}

	.company-feature__recommend-photo { width: 160px; height: 160px; }

	.company-feature__recommend-quote { font-size: 22px; }

	.company-feature__recommend-text { font-size: 14px; }
}

/* ===== 転職相談CTA（バナー） ===== */
.company-feature__consult {
	position: relative;
	border-radius: 12px;
	padding: 28px 20px;
	background: #dfeaec;
}

.company-feature__consult-media {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: 12px;
}

.company-feature__consult-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.company-feature__consult-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(238, 245, 253, .8);
}

.company-feature__consult-content {
	position: relative;
	z-index: 1;
}

.company-feature__consult-title {
	margin: 0 0 .8em;
	font-family: var(--font_main);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

.company-feature__consult-desc {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}

.company-feature__consult-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.company-feature__consult-actions.company-feature__pc-only { display: none; }
.company-feature__consult-actions.company-feature__sp-only { display: flex; }

.company-feature__consult-btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	margin: 0;
	max-width: none;
	border-radius: 8px;
	padding: 14px 16px;
	font-family: var(--font_main);
	font-size: 14px;
}

.company-feature__consult-btn-outline {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cf-blue);
	border-radius: 8px;
	background: #fff;
	padding: 14px 16px;
	color: var(--cf-blue);
	font-family: var(--font_main);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.company-feature__consult-btn-outline:hover {
	background: var(--cf-blue);
	color: #fff;
}

@media (min-width: 768px) {
	.company-feature__consult {
		max-width: 1100px;
		margin-inline: auto;
		padding: 48px 32px;
	}

	.company-feature__consult-content { max-width: 560px; }

	.company-feature__consult-title { font-size: 24px; text-align: left; }

	.company-feature__consult-desc { text-align: left; }

	.company-feature__consult-actions {
		flex-direction: row;
		justify-content: flex-start;
	}

	.company-feature__consult-actions.company-feature__pc-only { display: flex; }
	.company-feature__consult-actions.company-feature__sp-only { display: none; }

	.company-feature__consult-btn,
	.company-feature__consult-btn-outline { width: auto; min-width: 220px; }

	.company-feature__consult-media img { object-position: right center; }

	.company-feature__consult-media::after {
		background: linear-gradient(to right, #eaf5f7 0%, #eaf5f7 40%, rgba(242, 253, 255, 0) 75%);
	}
}

/* ===== 関連企業特集 ===== */
.company-feature__related {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.company-feature__related-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(15, 37, 55, .04);
}

.company-feature__related-media {
	height: 160px;
	overflow: hidden;
}

.company-feature__related-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.company-feature__related-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
}

.company-feature__related-name {
	margin: 0;
	font-weight: 700;
	font-size: 15px;
}

.company-feature__related-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	border: 1px solid var(--cf-blue);
	border-radius: 6px;
	background: #fff;
	padding: 12px 16px;
	color: var(--cf-blue);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.company-feature__related-btn:hover {
	background: var(--cf-blue);
	color: #fff;
}

@media (min-width: 768px) {
	.company-feature__related { grid-template-columns: repeat(3, 1fr); }
	.company-feature__related-media { height: 200px; }
}

/* ===== 未確定・確認中フラグの凡例 ===== */
.company-feature__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 16px;
	color: var(--cf-sub);
	font-size: 11px;
}

.company-feature__legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.company-feature__legend i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

.company-feature__legend i.is-warn { background: var(--cf-warn-bg); border: 1px solid var(--cf-warn-line); }
.company-feature__legend i.is-info { background: var(--cf-info-bg); border: 1px solid var(--cf-info-line); }
.company-feature__legend i.is-note { background: #fbf6ea; border: 1px solid #ecdfb9; }

:focus-visible { outline: 2px solid var(--cf-blue, #2d8dd5); outline-offset: 2px; }