/* 人的資本開示好事例調査（/service_2）専用スタイル。
   レイアウトの土台は common.css に依存し、ここでは
   (1) 支援アプローチ図 (2) 調査対象企業60社のフィルタ付きテーブル
   (3) 選定基準／情報ソースのボックス (4) 最終成果物リスト を補う。
   rem は common.css の独自設計により PC で約1px相当、SP は vw 基準で自動スケール。
   ブレークポイントは common.css に合わせて max-width: 860px。 */

/* 共通トーン */
:root {
	--hc-navy: #11589d;
	--hc-navy-d: #0d4478;
	--hc-blue-l: #cddceb;
	--hc-blue-bg: #eef4f9;
	--hc-gray: #6b7280;
	--hc-line: #d5dee7;
}

.p-service2-font {
	font-family: "Zen Kaku Gothic New", sans-serif;
}

/* ============================================================
   1. 支援アプローチ図
   ============================================================ */
.c-approach {
	font-family: "Zen Kaku Gothic New", sans-serif;
	color: #333;
}

/* 上段: 「大枠」「進め方および成果物」の見出し帯 */
.c-approach-head {
	display: grid;
	grid-template-columns: 150rem 1fr;
	gap: 16rem;
	margin-bottom: 16rem;
}
.c-approach-head span {
	display: block;
	text-align: center;
	font-size: 16rem;
	font-weight: bold;
	color: var(--hc-navy);
	padding-bottom: 10rem;
	border-bottom: 2rem solid var(--hc-blue-l);
}

/* 本体: 左ラベル列 + 進め方 + 成果物列 */
.c-approach-grid {
	display: grid;
	grid-template-columns: 150rem 1fr 360rem;
	gap: 16rem;
	align-items: stretch;
}

/* 左「大枠」縦ラベル（インタビュー / 公開情報調査） */
.c-approach-frame {
	display: grid;
	grid-template-rows: 2fr 1fr;
	gap: 16rem;
}
.c-approach-frame__label {
	display: flex;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-rl;
	background: #6b7280;
	color: #fff;
	font-size: 18rem;
	font-weight: bold;
	letter-spacing: 4rem;
	border-radius: 4rem;
	padding: 10rem 0;
}

/* 中央「進め方および成果物」 */
.c-approach-flow {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 16rem;
}
.c-approach-track {
	display: grid;
	grid-template-columns: 90rem 1fr;
	gap: 12rem;
	align-items: stretch;
}
.c-approach-track__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--hc-blue-l);
	color: var(--hc-navy);
	font-size: 14rem;
	font-weight: bold;
	line-height: 1.5;
	border-radius: 4rem;
	padding: 8rem 4rem;
}
.c-approach-steps {
	display: flex;
	align-items: stretch;
	gap: 20rem;
}
.c-approach-box {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--hc-blue-bg);
	border: 1rem solid var(--hc-line);
	border-radius: 4rem;
	padding: 14rem 10rem;
	font-size: 14rem;
	line-height: 1.55;
	color: #333;
}
.c-approach-box strong {
	display: block;
	font-size: 16rem;
	font-weight: bold;
	color: var(--hc-navy);
	margin-bottom: 4rem;
}
.c-approach-box small {
	display: block;
	font-size: 11rem;
	color: var(--hc-gray);
	margin-top: 4rem;
}
.c-approach-box ul {
	margin: 6rem 0 0;
	padding-left: 16rem;
}
.c-approach-box ul li {
	list-style: disc;
	font-size: 13rem;
	line-height: 1.7;
}
/* ステップ間の矢印 */
.c-approach-steps .c-approach-box:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -16rem;
	width: 0;
	height: 0;
	transform: translateY(-50%);
	border-top: 8rem solid transparent;
	border-bottom: 8rem solid transparent;
	border-left: 12rem solid var(--hc-navy);
}

/* 右「主な成果物」列（2ボックスを横並び） */
.c-approach-outcome {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16rem;
	align-items: stretch;
}
.c-approach-outcome__box {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--hc-blue-bg);
	border: 1rem solid var(--hc-navy);
	border-radius: 4rem;
	padding: 16rem 14rem;
	font-size: 15rem;
	font-weight: bold;
	line-height: 1.7;
	color: var(--hc-navy);
}

/* 下段ラベル */
.c-approach-foot {
	display: grid;
	grid-template-columns: 150rem 1fr 360rem;
	gap: 16rem;
	margin-top: 16rem;
}
.c-approach-foot span {
	grid-column: 2;
	text-align: center;
	font-size: 14rem;
	font-weight: bold;
	color: var(--hc-gray);
	padding-top: 10rem;
	border-top: 2rem solid var(--hc-blue-l);
}
.c-approach-foot span.--outcome {
	grid-column: 3;
}

@media screen and (max-width: 860px) {
	.c-approach-head,
	.c-approach-grid,
	.c-approach-foot {
		grid-template-columns: 1fr;
	}
	.c-approach-head span {
		font-size: 26rem;
	}
	.c-approach-frame {
		grid-template-rows: auto;
		grid-auto-flow: column;
	}
	.c-approach-frame__label {
		writing-mode: horizontal-tb;
		letter-spacing: 2rem;
		font-size: 26rem;
		padding: 14rem;
	}
	.c-approach-track {
		grid-template-columns: 1fr;
	}
	.c-approach-track__tag {
		font-size: 24rem;
		padding: 12rem;
	}
	.c-approach-steps {
		flex-direction: column;
		gap: 34rem;
	}
	.c-approach-box {
		font-size: 24rem;
		padding: 20rem 18rem;
	}
	.c-approach-box strong {
		font-size: 26rem;
	}
	.c-approach-box small {
		font-size: 20rem;
	}
	.c-approach-box ul li {
		font-size: 22rem;
	}
	/* SPでは矢印を下向きに */
	.c-approach-steps .c-approach-box:not(:last-child)::after {
		top: auto;
		right: 50%;
		bottom: -24rem;
		transform: translateX(50%);
		border-top: 12rem solid var(--hc-navy);
		border-left: 8rem solid transparent;
		border-right: 8rem solid transparent;
		border-bottom: 0;
	}
	.c-approach-outcome__box {
		font-size: 24rem;
		padding: 22rem 18rem;
	}
	.c-approach-foot span,
	.c-approach-foot span.--outcome {
		grid-column: 1;
		font-size: 24rem;
	}
}

/* ============================================================
   2. 調査対象企業60社（日本／海外の2列テーブル）
   ============================================================ */
.c-company {
	font-family: "Zen Kaku Gothic New", sans-serif;
}

/* テーブル */
.c-company-tables {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24rem;
	align-items: start;
}
.c-company-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.c-company-table__title {
	font-size: 15rem;
	font-weight: bold;
	color: var(--hc-navy);
	margin-bottom: 8rem;
}
.c-company-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12rem;
	color: #333;
}
.c-company-table thead th {
	background: var(--hc-navy);
	color: #fff;
	font-weight: bold;
	text-align: left;
	padding: 6rem 10rem;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}
.c-company-table tbody td {
	padding: 3rem 10rem;
	border-bottom: 1rem solid var(--hc-line);
	line-height: 1.4;
}
.c-company-table tbody tr:nth-child(even) {
	background: #f6f9fc;
}
.c-company-table .--name {
	font-weight: bold;
	color: var(--hc-navy);
}
.c-company-badge {
	display: inline-block;
	font-size: 10rem;
	font-weight: bold;
	line-height: 1;
	padding: 3rem 8rem;
	border-radius: 50px;
	white-space: nowrap;
}
.c-company-badge.--listed {
	background: var(--hc-blue-l);
	color: var(--hc-navy);
}
.c-company-badge.--unlisted {
	background: #f0e6d2;
	color: #9a6b1f;
}
@media screen and (max-width: 860px) {
	.c-company-tables {
		grid-template-columns: 1fr;
		gap: 40rem;
	}
	.c-company-table__title {
		font-size: 26rem;
	}
	.c-company-table {
		font-size: 22rem;
		min-width: 640rem;
	}
	.c-company-table thead th,
	.c-company-table tbody td {
		padding: 14rem 16rem;
	}
	.c-company-badge {
		font-size: 18rem;
	}
}

/* ============================================================
   3. 選定基準／情報ソースのボックス
   ============================================================ */
.c-company-notes {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 24rem;
	margin-top: 40rem;
}
.c-note-box {
	border: 1rem solid var(--hc-line);
	border-radius: 8rem;
	overflow: hidden;
	background: #fff;
}
.c-note-box__head {
	background: var(--hc-navy);
	color: #fff;
	font-size: 16rem;
	font-weight: bold;
	text-align: center;
	padding: 12rem 16rem;
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.c-note-box ul {
	margin: 0;
	padding: 20rem 24rem 20rem 20rem;
}
.c-note-box ul li {
	list-style: none;
	position: relative;
	padding-left: 20rem;
	margin-bottom: 12rem;
	font-size: 14rem;
	line-height: 1.7;
	color: #333;
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.c-note-box ul li:last-child {
	margin-bottom: 0;
}
.c-note-box ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9rem;
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	background: var(--hc-navy);
}

@media screen and (max-width: 860px) {
	.c-company-notes {
		grid-template-columns: 1fr;
		gap: 28rem;
	}
	.c-note-box__head {
		font-size: 26rem;
		padding: 16rem;
	}
	.c-note-box ul li {
		font-size: 24rem;
		padding-left: 28rem;
		margin-bottom: 16rem;
	}
	.c-note-box ul li::before {
		top: 14rem;
		width: 12rem;
		height: 12rem;
	}
}

/* ============================================================
   4. 最終成果物リスト
   ============================================================ */
.c-deliverable {
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.c-deliverable-head {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 24rem;
	margin-bottom: 20rem;
}
.c-deliverable-head span {
	display: block;
	text-align: center;
	font-size: 16rem;
	font-weight: bold;
	color: var(--hc-navy);
	padding-bottom: 10rem;
	border-bottom: 2rem solid var(--hc-blue-l);
}
.c-deliverable-body {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 24rem;
	align-items: start;
}

/* 左: 成果物の内容 */
.c-deliverable-list {
	display: flex;
	flex-direction: column;
	gap: 20rem;
}
.c-deliverable-item {
	display: flex;
	gap: 16rem;
	background: #fff;
	border: 1rem solid var(--hc-line);
	border-left: 6rem solid var(--hc-navy);
	border-radius: 6rem;
	padding: 20rem;
}
.c-deliverable-item__no {
	flex: 0 0 auto;
	width: 40rem;
	height: 40rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hc-navy);
	color: #fff;
	font-size: 22rem;
	font-weight: bold;
	border-radius: 50%;
}
.c-deliverable-item__body {
	flex: 1;
}
.c-deliverable-item__title {
	font-size: 17rem;
	font-weight: bold;
	line-height: 1.6;
	color: #222;
	margin: 4rem 0 0;
}
.c-deliverable-sub {
	margin: 12rem 0 0;
	padding: 0;
}
.c-deliverable-sub > li {
	list-style: none;
	margin-top: 10rem;
}
.c-deliverable-sub__label {
	display: inline-block;
	font-size: 14rem;
	font-weight: bold;
	color: var(--hc-navy);
	margin-bottom: 4rem;
}
.c-deliverable-sub ul {
	margin: 4rem 0 0;
	padding-left: 20rem;
}
.c-deliverable-sub ul li {
	list-style: disc;
	font-size: 14rem;
	line-height: 1.7;
	color: #444;
}

/* 右: 出力形態 */
.c-deliverable-note {
	align-self: center;
}
.c-deliverable-note dl {
	margin: 0;
}
.c-deliverable-note dt {
	font-size: 15rem;
	font-weight: bold;
	color: var(--hc-navy);
	padding-bottom: 6rem;
	margin-bottom: 12rem;
	border-bottom: 1rem solid var(--hc-blue-l);
}
.c-deliverable-note dd {
	margin: 0 0 20rem;
	font-size: 14rem;
	line-height: 1.8;
	color: #333;
}
.c-deliverable-note dd:last-child {
	margin-bottom: 0;
}
.c-deliverable-note .--memo {
	display: block;
	font-size: 12rem;
	color: var(--hc-gray);
	margin-top: 6rem;
}

@media screen and (max-width: 860px) {
	.c-deliverable-head,
	.c-deliverable-body {
		grid-template-columns: 1fr;
	}
	.c-deliverable-head span {
		font-size: 26rem;
	}
	.c-deliverable-head span.--format {
		display: none;
	}
	.c-deliverable-item {
		padding: 24rem;
	}
	.c-deliverable-item__no {
		width: 56rem;
		height: 56rem;
		font-size: 30rem;
	}
	.c-deliverable-item__title {
		font-size: 26rem;
	}
	.c-deliverable-sub__label {
		font-size: 23rem;
	}
	.c-deliverable-sub ul li {
		font-size: 22rem;
	}
	.c-deliverable-note dt {
		font-size: 24rem;
	}
	.c-deliverable-note dd {
		font-size: 22rem;
	}
	.c-deliverable-note .--memo {
		font-size: 19rem;
	}
}