/**
 * 事例カード共通スタイル（トップ／採用／事例アーカイブ／タクソノミー用）
 *
 * 前提：既存 style.css の以下を活かす
 *   - .c-card / .c-card__item / .item-thumb / .item-title / .item-date のベース
 *   - .case-pickup / .case-pickup__items（トップ用の背景・見出し余白）
 *
 * ここでは A3 で追加した業界/規模バッジ・一言サマリ・使用技術タグと、
 * 未定義だった casecat タグ配色を上乗せする。
 * 一覧アーカイブは .case-index__items ラッパーで同じカード意匠を再利用する。
 */

/* --- カード意匠の共通仕上げ（事例カードのみに限定） --- */
/* .c-card__item は service-info や aboutus など他セクションでも使われるため、
   事例文脈（case-pickup / case-index）にスコープする */
.case-pickup__items > .c-card__item,
.case-index__items > .c-card__item {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   生成サムネイル（画像なし、業界カラー + 英字ラベル + アイコン）
   ------------------------------------------------------------------ */
/* .item-thumb の既存スタイルを打ち消す：
   style.css の `.item-thumb{width:265px;height:...}` は img前提なので aspect-ratio に切り替える */
.case-pickup__items .item-thumb,
.case-index__items .item-thumb {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	background: transparent;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}
.case-thumb {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
}
.case-thumb--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.case-thumb--generative {
	background: var(--case-bg, #4a90e2);
	color: #fff;
	background-image:
		linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.12) 100%),
		radial-gradient(circle at 100% 100%, rgba(255,255,255,0.10), transparent 60%);
	transition: transform .3s ease;
}
.case-thumb--generative:hover {
	transform: scale(1.02);
}
/* 業界アイコン（右上寄せ、透過装飾） */
/* 左下の成果テキスト/数字と重ならないよう、右上〜右中央エリアに寄せる */
.case-thumb__glyph {
	position: absolute;
	right: -6%;
	top: 8%;
	width: 52%;
	height: 52%;
	color: rgba(255, 255, 255, 0.15);
	pointer-events: none;
}
.case-thumb__glyph svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	stroke-width: 1.4;
	fill: none;
}
/* SVG内部の path 個別 stroke-width を打ち消して、全業界で線の太さを揃える */
.case-thumb__glyph svg [stroke-width] {
	stroke-width: 1.4;
}
/* 業界英字ラベル（大きく前面） */
.case-thumb__label {
	position: absolute;
	left: 16px;
	top: 14px;
	font-family: 'Sarabun', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.06em;
	line-height: 1.1;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.case-thumb__label-jp {
	position: absolute;
	left: 16px;
	top: 42px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.05em;
}
/* 大きな成果数値 or 成果キーワードは、常に左下に揃える（6枚並んだ時の視線動線を統一） */
.case-thumb__metric,
.case-thumb__outcome {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	color: #fff;
	line-height: 1.15;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
.case-thumb__metric {
	display: flex;
	align-items: baseline;
	gap: 2px;
}
.case-thumb__metric-value {
	font-family: 'Sarabun', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 800;
	font-size: 44px;
	letter-spacing: -0.02em;
	line-height: 1;
}
.case-thumb__outcome {
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.01em;
}
/* 担当ロールバッジ（右上、小さく） */
.case-thumb__role {
	position: absolute;
	right: 12px;
	top: 12px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: rgba(0, 0, 0, 0.25);
	padding: 3px 8px;
	border-radius: 12px;
	letter-spacing: 0.03em;
	backdrop-filter: blur(4px);
}
@media (max-width: 767px) {
	.case-thumb__label { font-size: 18px; top: 12px; left: 14px; }
	.case-thumb__label-jp { top: 38px; left: 14px; font-size: 11px; }
	.case-thumb__metric,
	.case-thumb__outcome { left: 14px; right: 14px; bottom: 12px; }
	.case-thumb__metric-value { font-size: 38px; }
	.case-thumb__outcome { font-size: 17px; }
	.case-thumb__role { font-size: 10px; }
}

/* --- トップページの Case は 3列×最大2行のグリッドで表示（6件対応） --- */
/* 既存の style.css は `.c-card{display:flex}` + `.c-card>*{width:31.66%; margin-right:2.5%}`
   で 3件横並び前提のレイアウト。6件だと1行に潰れて崩れるので、案件一覧と同じくグリッドで上書きする */
.c-card.case-pickup__items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 767px) {
	.c-card.case-pickup__items {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}
.case-pickup__items > .c-card__item {
	width: auto;
	margin: 0;
}
.case-pickup__items > .c-card__item + .c-card__item {
	margin-top: 0;
}

/* --- トップの Case 直下 CTA：お問い合わせ + 「事例をもっと見る」 --- */
.case-pickup__cta {
	margin-top: 40px;
	text-align: center;
}
.case-pickup__cta-lead {
	font-size: 15px;
	color: #333;
	margin-bottom: 16px;
}
.case-pickup__cta .button-box {
	display: flex;
	justify-content: center;
	margin-top: 0;
}
.case-pickup__cta .c-button-primary {
	min-width: 320px;
	background: #164c83;
	color: #fff;
	border-color: #164c83;
}
.case-pickup__cta .c-button-primary span {
	color: #fff;
}
.case-pickup__cta .c-button-primary:hover {
	background: #0f3f7a;
	border-color: #0f3f7a;
}
.case-pickup__more {
	margin-top: 14px;
	font-size: 13px;
}
.case-pickup__more a {
	color: #164c83;
	text-decoration: underline;
}
@media (max-width: 767px) {
	.case-pickup__cta .c-button-primary {
		min-width: 0;
		width: 80vw;
	}
}

/* ---------------------------------------------------------------------
   案件プロフィール（A4）：事例詳細ページ末尾の構造化ブロック
   --------------------------------------------------------------------- */
/* 既存 case.css の `.case-index .l-section__column aside { width: 240px }`
   （元々サイドバー幅指定）が、本文内に置いた <aside class="case-profile"> にも当たり
   240px の細箱に押し込まれる。specificity を高めて打ち消す。 */
.case-index .l-section__column main aside.case-profile,
aside.case-profile {
	display: block;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}
.case-profile {
	margin: 40px 0 0;
	padding: 32px 32px 28px;
	background: #f7f8fa;
	border: 1px solid #e2e6ec;
	border-radius: 8px;
}
.case-profile__title {
	font-size: 18px;
	font-weight: 700;
	color: #164c83;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #164c83;
	letter-spacing: 0.02em;
}
.case-profile__list {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
.case-profile__row {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px dashed #d3d8df;
	align-items: start;
}
.case-profile__row:last-child {
	border-bottom: none;
}
.case-profile__row dt {
	font-weight: 700;
	color: #555;
	font-size: 14px;
	line-height: 1.6;
}
.case-profile__row dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #222;
}
.case-profile__row--summary dd {
	font-weight: 600;
}
.case-profile__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
}

/* ボタン等より下：類似案件のお問い合わせCTA */
.case-profile__cta {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e2e6ec;
	text-align: center;
}
.case-profile__cta-lead {
	font-size: 15px;
	color: #333;
	margin-bottom: 16px;
	line-height: 1.7;
}
.case-profile__cta .button-box {
	display: flex;
	justify-content: center;
	margin-top: 0;
}
.case-profile__cta .c-button-primary {
	min-width: 320px;
	background: #164c83;
	color: #fff;
	border-color: #164c83;
}
.case-profile__cta .c-button-primary span {
	color: #fff;
}
.case-profile__cta .c-button-primary:hover {
	background: #0f3f7a;
	border-color: #0f3f7a;
}

@media (max-width: 767px) {
	.case-profile {
		padding: 22px 18px 18px;
	}
	.case-profile__row {
		grid-template-columns: 100px 1fr;
		gap: 10px;
	}
	.case-profile__cta .c-button-primary {
		min-width: 0;
		width: 80vw;
	}
	.pc-only { display: none; }
}

/* --- アーカイブ用 3列グリッド（.c-article-list の代替） --- */
/* 既存 style.css の `.c-card{display:flex}` `.c-card>*{width:31.66%; margin-right:2.5%}`
   `.item-thumb{width:265px}` が汎用に効いているので、案件一覧では明示的に打ち消す */
.c-card.case-index__items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 767px) {
	.c-card.case-index__items {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}
.case-index__items > .c-card__item {
	/* 汎用 `.c-card>*` の width / margin を無効化してグリッドセルに全部入るようにする */
	width: auto;
	margin: 0;
	background: #fff;
	border: 1px solid #ececec;
	display: flex;
	flex-direction: column;
}
.case-index__items > .c-card__item + .c-card__item {
	/* SP時の `.c-card>*+*{margin-top}` も打ち消し */
	margin-top: 0;
}
.case-index__items .item-thumb {
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f5f5f5;
}
.case-index__items .item-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
.case-index__items .item-content {
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

/* --- 業界・案件規模のバッジ --- */
.item-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}
.c-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	padding: 2px 9px;
	border-radius: 3px;
	white-space: nowrap;
	text-decoration: none;
}
.c-badge--industry {
	background: #0f3f7a;
	color: #fff;
}
.c-badge--industry:hover {
	opacity: 0.85;
	color: #fff;
}
.c-badge--scale {
	background: #eef3fa;
	color: #0f3f7a;
	border: 1px solid #b6cce0;
}

/* --- 一言成果サマリ（3行clamp） --- */
.item-summary {
	font-size: 12.5px;
	color: #555;
	line-height: 1.6;
	margin: 4px 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- カテゴリ/技術タグ --- */
.item-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 8px;
}
.item-categories .c-tag {
	margin: 0;
	padding: 3px 9px;
	font-size: 11px;
	line-height: 1.5;
	min-width: 0;
	text-decoration: none;
}
/* casecat 配色（既存 style.css では未定義だった） */
.c-tag.ai-consulting {
	background: #4ec5e7;
	color: #fff;
}
.c-tag.pm-consulting {
	background: #164c83;
	color: #fff;
}
.c-tag.event {
	background: #ef8a5b;
	color: #fff;
}
/* 使用技術タグ */
.c-tag--tech {
	background: #f3f3f3;
	color: #555;
	border: 1px solid #dcdcdc;
}
.c-tag--tech:hover {
	background: #ececec;
}