@charset "UTF-8";

:root {
	--case-detail-color-bg: #fcfff5;
	--case-detail-color-text: #010432;
	--case-detail-color-text-toc-label: #a0a0a0;
	--case-detail-color-placeholder: #c8c8c8;
	--case-detail-color-issue-bg: #f4f4f4;
	--case-detail-color-issue-label: #858585;
	--case-detail-color-reason-bg: #edf6e0;
	--case-detail-color-effect-bg: #fff0d4;
	--case-detail-color-effect-label: #bf8f00;
	--case-detail-color-border-light: #e0efc9;
	--case-detail-color-marker: #afd266;
}

.case-detail-section {
	padding-top: 1.6rem;
	padding-bottom: 4.8rem;
	background-color: var(--case-detail-color-bg);
}

@media (min-width: 768px) {
	.case-detail-section {
		padding-top: 4rem;
		padding-bottom: 6rem;
	}
}

.case-detail-layout {
	display: block;
}

/*
 * 左右の余白(1400pxのデザイン幅の比率を768pxまで保つ)。
 *
 * `main.css` の `.container` は768px以上で padding が 0 になるため、
 * 768〜1180pxではコンテンツが画面端に接地してしまう。
 * デザイン幅1400px(内容1180 + 左右110)の比率をそのまま下の帯へ伸ばす。
 * 1400pxちょうどで min() の2項が一致するので境界に段差が出ない。
 * LP(fukurikosei_register.css)と同じ式で、パンくずもこの container に載っている。
 * 由来: .claude/rules/css.md「左右の余白は『デザイン幅での比率』を1本の min() で全帯域に効かせる」
 */

@media screen and (min-width: 768px) {
	.container {
		max-width: min(118rem, 84.2857vw);
	}
}

@media (min-width: 768px) {
	.case-detail-layout {
		display: flex;
		gap: 4rem;
		align-items: flex-start;
	}
}

.case-detail-article {
	padding: 2.4rem 1.6rem;
	background-color: #fff;
	border-radius: 1rem;
	box-shadow: 0 4px 6px rgba(51, 51, 51, 0.1);
}

@media (min-width: 768px) {
	.case-detail-article {
		flex: 1 1 0;
		min-width: 0;
		padding: 4rem 3.2rem;
	}
}

.case-detail-sidebar {
	display: none;
}

@media (min-width: 768px) {
	.case-detail-sidebar {
		position: sticky;
		top: 2.4rem;
		display: block;
		flex: 0 0 28rem;
		width: 28rem;
	}
}

/* 記事ヘッダー(タイトル・企業名・メタ情報・メイン画像) */

.case-detail-head {
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
}

@media (min-width: 768px) {
	.case-detail-head {
		gap: 2.4rem;
	}
}

.case-detail-title {
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--case-detail-color-text);
	letter-spacing: 0.128rem;
	word-break: break-word;
}

.case-detail-company {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--case-detail-color-text);
}

@media (min-width: 768px) {
	.case-detail-company {
		font-size: 2.4rem;
		line-height: 1.4;
	}
}

.case-detail-meta {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

@media (min-width: 768px) {
	.case-detail-meta {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 3.2rem;
	}
}

.case-detail-meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

@media (min-width: 768px) {
	.case-detail-meta-item {
		gap: 0.4rem;
	}
}

.case-detail-meta-label {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--case-detail-color-text);
	letter-spacing: 0.048rem;
}

.case-detail-meta-dot {
	display: inline-block;
	flex: none;
	width: 0.4rem;
	height: 0.4rem;
	background-color: var(--case-detail-color-text);
	border-radius: 50%;
}

.case-detail-meta-value {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--case-detail-color-text);
	letter-spacing: 0.064rem;
}

.case-detail-hero {
	width: 100%;
	aspect-ratio: 800 / 533.33;
	background-color: var(--case-detail-color-placeholder);
}

/* 課題・決め手・効果サマリー */

.case-detail-summary {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin-top: 3.2rem;
}

@media (min-width: 768px) {
	.case-detail-summary {
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 6rem;
	}
}

.case-detail-summary-item {
	position: relative;
	box-sizing: border-box;
	flex: none;
	width: 100%;
	padding: 6rem 3.2rem 3.2rem;
	border-radius: 0.4rem;
}

@media (min-width: 768px) {
	.case-detail-summary-item {
		width: 25rem;
	}
}

.case-detail-summary-item.-issue {
	background-color: var(--case-detail-color-issue-bg);
}

.case-detail-summary-item.-reason {
	background-color: var(--case-detail-color-reason-bg);
}

.case-detail-summary-item.-effect {
	background-color: var(--case-detail-color-effect-bg);
}

.case-detail-summary-label {
	position: absolute;
	top: 1.034rem;
	left: -0.7rem;
	display: inline-flex;
	gap: 0.8rem;
	align-items: center;
	height: 3.6rem;
	padding-inline: 0.8rem;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 3.6rem;
	color: #fff;
	white-space: nowrap;
}

.case-detail-summary-icon {
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	object-fit: contain;
}

.case-detail-summary-tail {
	position: absolute;
	top: 4.634rem;
	left: -0.7rem;
	width: 0.75rem;
	height: 0.433rem;
}

.case-detail-summary-item.-issue .case-detail-summary-label {
	background-color: var(--case-detail-color-issue-label);
}

.case-detail-summary-item.-reason .case-detail-summary-label {
	background-color: var(--fk-color-cta-green);
}

.case-detail-summary-item.-effect .case-detail-summary-label {
	background-color: var(--case-detail-color-effect-label);
}

.case-detail-summary-text {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--case-detail-color-text);
	letter-spacing: 0.064rem;
}

/* 本文コンテンツ(見出し + Q&A) */

.case-detail-body {
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
	margin-top: 3.2rem;
}

@media (min-width: 768px) {
	.case-detail-body {
		gap: 6rem;
		margin-top: 6rem;
	}
}

.case-detail-heading {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--case-detail-color-text);
	letter-spacing: 0.08rem;
}

@media (min-width: 768px) {
	.case-detail-heading {
		font-size: 2.4rem;
		letter-spacing: 0.096rem;
	}
}

.case-detail-qa-group {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	margin-top: 2.4rem;
}

@media (min-width: 768px) {
	.case-detail-qa-group {
		margin-top: 3.2rem;
	}
}

.case-detail-qa {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.case-detail-question {
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-cta-green-tag);
	letter-spacing: 0.128rem;
}

.case-detail-question-mark {
	flex: none;
	width: 1.6rem;
	height: 0.2rem;
	margin-top: 1.1rem;
	background-color: var(--fk-color-cta-green-tag);
}

.case-detail-answer {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.8;
	color: var(--case-detail-color-text);
	letter-spacing: 0.128rem;
}

/*
 * 本文中の強調はマーカー(#afd266)を下線として敷く。ブレークポイントによらず出す。
 * background で敷くと inline 要素の背景ボックスが font-size の高さしかなく位置合わせが難しいため、
 * 折り返しに自動で追従する text-decoration を使う。
 * skip-ink: none は「じ」「ら」などの下に出る画で線が途切れないようにするため。
 *
 * CSSの20%は font-size の20%(=3.2px)だが 0% の基準点がFigmaと違い、書き出し画像より1.25px下がる。
 * 4倍解像度での実測: 0→-1.00px / 1px→±0 / 2px→+1.00px / 20%→+2.25px(いずれも文字のink下端基準)。
 * Figmaの書き出しが+1.00pxだったため 0.2rem を採用している。
 */

.case-detail-answer strong {
	text-decoration: underline;
	text-decoration-thickness: 0.3rem;
	text-decoration-color: var(--case-detail-color-marker);
	text-decoration-skip-ink: none;
	text-underline-offset: 0.2rem;
}

/* 企業情報テーブル */

.case-detail-company-info {
	max-width: 59rem;
	padding-block: 2.4rem;
	margin-top: 3.2rem;
	border-top: 1px solid var(--case-detail-color-border-light);
	border-bottom: 1px solid var(--case-detail-color-border-light);
}

@media (min-width: 768px) {
	.case-detail-company-info {
		margin-top: 6rem;
	}
}

.case-detail-company-table {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin-top: 1.6rem;
}

@media (min-width: 768px) {
	.case-detail-company-table {
		gap: 2.4rem;
		margin-top: 3.2rem;
	}
}

.case-detail-company-row {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.8;
	color: var(--case-detail-color-text);
	letter-spacing: 0.128rem;
}

@media (min-width: 768px) {
	.case-detail-company-row {
		flex-direction: row;
		align-items: baseline;
	}
}

.case-detail-company-row dt {
	flex: none;
	font-weight: 400;
	white-space: nowrap;
}

.case-detail-company-row dd {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.case-detail-company-row a {
	color: var(--fk-color-link-indigo);
	word-break: break-all;
	text-decoration: underline;
}

/* サイドバー(目次 + CTA) */

.case-detail-sidebar-card {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	padding: 2.4rem 1.6rem;
	background-color: #fff;
	border-radius: 1rem;
	box-shadow: 0 4px 6px rgba(51, 51, 51, 0.1);
}

.case-detail-toc {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 1.6rem 0.8rem;
}

.case-detail-toc-inline {
	margin-top: 3.2rem;
}

@media (min-width: 768px) {
	.case-detail-toc {
		padding: 0 2.4rem;
	}

	.case-detail-toc-inline {
		display: none;
	}
}

.case-detail-toc-label {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--case-detail-color-text-toc-label);
}

.case-detail-toc-list {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin: 0;
	list-style: none;
}

.case-detail-toc-item a {
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--fk-color-link-indigo);
	/*
		サイドバー(280px)からカード・目次のpaddingを引いた行の幅は200px。
		0.08em では「02. ベネサポ導入の決め手」(半角4 + 全角10文字)が203.7px になり2行に折り返すため、
		ページ標準の 0.04em に揃えて 194.8px に収める。
	*/
	letter-spacing: 0.064rem;
	text-decoration: underline;
}

.case-detail-toc-divider {
	align-self: center;
	width: 0;
	height: 0;
	border-top: 0.4rem solid var(--case-detail-color-issue-bg);
	border-right: 0.4rem solid transparent;
	border-left: 0.4rem solid transparent;
}

/*
 * サイドバーCTA。2026-08-24のデザイン変更で塗りつぶしピルへ(_figma-export/pc/btn.svg)。
 * ベースは .btn-pill-outline(幅・余白・字送り)のまま、色と影だけを差し替える。
 * border を外すのは Figma のストロークが塗りと同色(#759231)で見えず、
 * かつ border-box の 2px ぶん内側に寄ると余白がFigmaと合わなくなるため。
 * これで幅248px(サイドバー280 − カードpadding16×2)・高さ82pxのまま
 * テキスト箱168px(padding32 + 箱168 + gap16 + アイコン16 + padding16)がFigmaと一致し、
 * 「新規お申し込みは / こちら」の折り返し位置もそのまま再現される。
 */

.case-detail-sidebar-btn {
	width: 100%;
	height: auto;
	min-height: 8.2rem;
	color: var(--fk-color-cta-btn-text);
	white-space: normal;
	background-color: var(--fk-color-cta-green);
	border: none;

	/* Figma: dy4 / stdDeviation4(= CSSのblur 8px)/ rgba(51,51,51,0.12) */
	box-shadow: 0 4px 8px rgba(51, 51, 51, 0.12);
}

/* その他の導入事例セクション */
.othercase-section {
	padding-top: 4.8rem;
	padding-bottom: 6rem;
}

@media (min-width: 768px) {
	.othercase-section {
		padding-top: 6rem;
		padding-bottom: 12rem;
	}
}

.othercase-title {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--fk-color-text-dark);
	letter-spacing: 0.096rem;
}

@media (min-width: 768px) {
	.othercase-title {
		font-size: 3.2rem;
	}
}

.othercase-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	width: 100%;
	margin-top: 3.2rem;
}

@media (min-width: 768px) {
	.othercase-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 2.4rem;
	}

	/*
	 * 詳細ページの「その他の導入事例」は、記事が2本なので「もう一方」の1枚だけになる。
	 * 3カラムのままだとカードが container 幅いっぱいに伸びるので、
	 * 1カラム分の幅(container1180 − gap48 の3等分)に絞って**左端**へ置く
	 * (見出し「その他の導入事例」と左端を揃える)。
	 * 記事が増えて3枚並べるようになったら `-single` を外す。
	 */

	.othercase-list.-single {
		grid-template-columns: min(37.73rem, 100%);
		justify-content: start;
	}
}

.othercase-more {
	display: flex;
	width: fit-content;
	margin-inline: auto;
	margin-top: 4rem;
}