/* =========================================================
   鑑定事例（/case/）詳細一覧
   「鑑定事例」CPTから生成される項目のスタイル
   ・カテゴリーごと：上部＝概要（左画像・右テキスト）／下＝個別事例（2カラム）
   ・個別事例は男女で色分け（男性＝メインカラー／女性＝ローズ）
   ・SPは1カラム（レスポンシブ）
   ・本文（.articleBody）内に出るためタイトルは is-style-normal で親の帯を無効化
   ========================================================= */

/* 男女カラー（このページ内のローカルトークン） */
.case-detail {
	--color-male: var(--color-main);   /* 男性：ネイビー */
	--color-female: #C0506E;           /* 女性：ローズ */
	display: grid;
	gap: 64px;
}

.case-detail__item {
	scroll-margin-top: 80px; /* トップからのアンカー遷移時に上部が隠れないよう余白 */
}

.case-detail__number {
	margin: 0 0 8px;
	color: var(--color-text-sub);
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.15em;
}

.case-detail__title {
	margin: 0 0 20px;
	color: var(--color-main);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 24px;
}

/* --- 概要：左画像・右テキスト --- */
.case-detail__overview {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 32px;
}

/* 一覧カードのタイトル（h3）は .articleBody 内に出るため、
   親テーマ .articleBody h3 の margin-top:2.5em で「カテゴリ〜タイトル」が
   空きすぎる。詳細度を上げて上下余白を詰める。 */
.articleBody .case__number {
	margin: 0 0 8px;
}
.articleBody .case__title {
	margin: 0 0 16px;
}

.case-detail__thumb {
	margin: 0;
}

.case-detail__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.case-detail__lead {
	color: var(--color-text-main);
	font-family: var(--font-ja-body);
	font-size: 16px;
	line-height: 1.9;
}

.case-detail__lead p {
	margin: 0 0 1em;
}

.case-detail__lead p:last-child {
	margin-bottom: 0;
}

/* --- 個別事例カード（2カラム／男女色分け） --- */
.case-detail__cases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.case-card {
	padding: 20px 24px 24px;
	background-color: var(--color-white);
	border: 1px solid var(--gender-color);
	border-top: 4px solid var(--gender-color); /* 上辺を太くして男女を強調 */
	border-radius: 6px;
}

.case-card--male {
	--gender-color: var(--color-male);
}

.case-card--female {
	--gender-color: var(--color-female);
}

.case-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--gender-color);
	margin-bottom: 8px;
}

.case-card__title {
	margin: 0 0 8px;
	color: var(--color-main);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 20px;
}

.case-card__person {
	margin: 0 0 16px;
	color: var(--color-text-sub);
	font-family: var(--font-ja-body);
	font-size: 14px;
}

.case-card__text {
	margin: 0;
	color: var(--color-text-main);
	font-family: var(--font-ja-body);
	font-size: 15px;
	line-height: 1.9;
}

/* --- カテゴリ一覧に戻るボタン（詳細ページ下部・中央） --- */
.case-back {
	margin-top: 56px;
	text-align: center;
}

.articleBody .case-back__btn {
	display: inline-block;
	min-width: 280px;
	max-width: 100%;
	padding: 16px 32px;
	background-color: var(--color-main);
	border: 1px solid var(--color-main);
	border-radius: 6px;
	color: var(--color-btn-text);
	font-family: var(--font-ja-body);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.2s;
}

@media (hover: hover) {
	.articleBody .case-back__btn:hover {
		opacity: 0.85;
	}
}

/* --- PC（735px以上） --- */
@media (min-width: 735px) {
	.case-detail {
		gap: 80px;
	}

	.case-detail__title {
		font-size: 28px;
	}

	/* 概要：左画像・右テキストの2カラム */
	.case-detail__overview {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		align-items: center;
	}

	/* 画像が無い場合はテキストを全幅に */
	.case-detail__overview--no-image {
		grid-template-columns: 1fr;
	}

	/* 個別事例：2カラム */
	.case-detail__cases {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}