@charset "UTF-8";
/* =========================================
   導入事例(/case-studies/)専用CSS — design/cases.html 準拠
   数値・色はモックのインラインstyleをそのまま移植
========================================= */

/* ---------- 一覧 (/case-studies/) ---------- */
.stream-cases {
	background: #f2f8ff;
	/* 上余白は固定ヘッダー(88px)込みのモック値(design/cases.html と同一) */
	padding: clamp(96px, 10vw, 150px) 0 clamp(64px, 8vw, 110px);
	font-family: 'Noto Sans JP', sans-serif;
}
.stream-cases__inner { width: min(1000px, 90vw); margin: 0 auto; }

.stream-cases__eyebrow {
	display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
	font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 500;
	letter-spacing: .32em; text-transform: uppercase; color: #2470cf;
}
.stream-cases__eyebrow-line { width: 30px; height: 1px; background: #2470cf; }
.stream-cases__title {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(25px, 2.8vw, 38px); font-weight: 600; color: #0a1656; margin: 0 0 14px;
}
.stream-cases__lead {
	font-size: 14.5px; line-height: 2; color: #5a6378;
	margin: 0 0 clamp(30px, 3.6vw, 48px); max-width: 620px;
}

/* 絞り込みタブ */
.stream-cases__tabs {
	display: flex; align-items: flex-end; flex-wrap: wrap;
	gap: clamp(20px, 3vw, 40px);
	border-bottom: 1px solid #dbe6f3;
	margin-bottom: clamp(20px, 2.4vw, 30px);
}
.stream-cases__tab {
	cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap;
	padding: 0 2px 14px; margin-bottom: -1px;
	border: 0; border-bottom: 2px solid transparent; background: transparent;
	color: #8a97ad; transition: color .2s ease;
}
.stream-cases__tab.is-on { border-bottom-color: #2470cf; color: #0a1656; }
.stream-cases__tab:focus-visible { outline: 2px solid #2470cf; outline-offset: 2px; }

/* カードグリッド */
.stream-cases__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: clamp(20px, 2vw, 28px);
}
.stream-cases__card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid #e6eef8; border-radius: 14px; overflow: hidden;
	text-decoration: none;
	box-shadow: 0 20px 44px -34px rgba(13, 30, 90, .4);
	transition: transform .28s ease, box-shadow .28s ease;
}
.stream-cases__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 30px 56px -30px rgba(13, 30, 90, .45);
}

/* 上部帯: 社名テキスト or アイキャッチ画像 */
.stream-cases__band {
	height: 118px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(150deg, #eef5fd, #e0ecfa);
	font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 22px;
	letter-spacing: .02em; color: #3a4a86;
}
.stream-cases__band--img img { width: 100%; height: 118px; object-fit: cover; display: block; }

.stream-cases__body { padding: clamp(20px, 1.8vw, 26px); display: flex; flex-direction: column; flex: 1; }
.stream-cases__chip {
	align-self: flex-start;
	font-family: 'Noto Sans JP', sans-serif; font-size: 11.5px; font-weight: 700;
	letter-spacing: .06em; color: #2470cf; background: #eaf3ff;
	border-radius: 6px; padding: 5px 11px; margin-bottom: 16px;
}
.stream-cases__card-title {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16.5px; font-weight: 700; line-height: 1.6; color: #0a1656; margin: 0 0 18px;
}

/* KPIボックス（グラデ数字） */
.stream-cases__kpi {
	display: flex; align-items: baseline; gap: 8px;
	padding: 16px 18px; background: #f4f9ff; border-radius: 10px; margin-bottom: 18px;
}
.stream-cases__kpi-num {
	font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 38px; line-height: 1;
	background: linear-gradient(135deg, #35cfff, #2470cf 60%, #1b2fae);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.stream-cases__kpi-unit { font-size: 20px; }
.stream-cases__kpi-label { font-size: 12.5px; color: #5a6378; line-height: 1.5; }

/* #ハッシュタグ */
.stream-cases__tags {
	display: flex; flex-wrap: wrap; gap: 7px;
	margin-top: auto; padding-top: 16px; border-top: 1px solid #eef4fb;
}
.stream-cases__tags span { font-size: 11.5px; color: #7e8aa6; }

.stream-cases__back {
	margin: clamp(34px, 4vw, 48px) 0 0; display: flex; width: fit-content;
	align-items: center; gap: 10px;
	font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
	font-size: 14.5px; color: #2470cf; text-decoration: none;
}
.stream-cases__empty { color: #5a6378; }

/* ページネーション */
.stream-cases__pagination { margin-top: clamp(28px, 3vw, 40px); }
.stream-cases__pagination .nav-links { display: flex; justify-content: center; gap: 8px; }
.stream-cases__pagination .page-numbers {
	font-family: 'Outfit', sans-serif; font-size: 13.5px; color: #5a6378;
	background: #fff; border: 1px solid #dbe6f3; border-radius: 8px;
	padding: 8px 14px; text-decoration: none;
}
.stream-cases__pagination .page-numbers.current { background: #2470cf; border-color: #2470cf; color: #fff; }
.stream-cases__pagination .page-numbers:hover:not(.current) { border-color: #2470cf; color: #2470cf; }
.stream-cases__pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.stream-cases__pagination h2 { display: none; }

/* ---------- 個別 (/case-studies/xxx/) ---------- */
/* 事例は構成が定型(課題→成果)なのでSWELL自動挿入の目次(.p-toc)は不要 → 非表示 */
.stream-single--cases .p-toc { display: none; }
.stream-single--cases {
	background: #fff; color: #0a1656;
	font-family: 'Noto Sans JP', sans-serif;
	max-width: 840px; margin: 0 auto;
	padding: clamp(110px, 10vw, 150px) 20px clamp(64px, 8vw, 110px); /* 上=固定ヘッダー分 */
}
.stream-single--cases .stream-single__label {
	display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
	font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 500;
	letter-spacing: .32em; text-transform: uppercase; color: #2470cf;
}
.stream-single--cases .stream-single__label::before { content: ""; width: 30px; height: 1px; background: #2470cf; }
.stream-single--cases .stream-single__chip {
	display: inline-block;
	font-family: 'Noto Sans JP', sans-serif; font-size: 11.5px; font-weight: 700;
	letter-spacing: .06em; color: #2470cf; background: #eaf3ff;
	border-radius: 6px; padding: 5px 11px; margin: 0 0 14px;
}
.stream-single--cases .stream-single__title {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; line-height: 1.75;
	letter-spacing: .01em; margin: 0 0 10px; text-wrap: balance;
}
.stream-single--cases .stream-single__client { font-size: 13.5px; color: #7e93b3; margin: 0 0 26px; }
.stream-single--cases .stream-single__kpi {
	display: flex; align-items: baseline; gap: 10px; width: fit-content;
	padding: 16px 22px; background: #f4f9ff; border-radius: 10px; margin: 0 0 30px;
}
.stream-single--cases .stream-single__kpi-num {
	font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 40px; line-height: 1;
	background: linear-gradient(135deg, #35cfff, #2470cf 60%, #1b2fae);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.stream-single--cases .stream-single__kpi-unit { font-size: 21px; }
.stream-single--cases .stream-single__kpi-label { font-size: 13px; color: #5a6378; }
.stream-single--cases .stream-single__hero { margin: 0 0 30px; }
.stream-single--cases .stream-single__hero img { width: 100%; height: auto; border-radius: 12px; display: block; }
.stream-single--cases .stream-single__body { line-height: 1.8; color: #3a4256; font-size: 16px; max-width: 800px; }

/* 記事内の表(成果比較など) */
.stream-single--cases .stream-single__body table {
	width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0 0 1.8em;
}
.stream-single--cases .stream-single__body th,
.stream-single--cases .stream-single__body td {
	border: 1px solid #dbe6f3; padding: 10px 12px; text-align: center; line-height: 1.7;
}
.stream-single--cases .stream-single__body th { background: #eef5fc; color: #0a1656; font-weight: 700; text-align: left; }
.stream-single--cases .stream-single__body td:first-child { text-align: left; }
.stream-single--cases .stream-single__body .table-scroll { overflow-x: auto; margin: 0 0 1.8em; }
.stream-single--cases .stream-single__body .table-scroll table { margin: 0; min-width: 480px; }
/* 見出し(参考サイト準拠・editor.css共通): h2=紺32px装飾なし / h3=紺20px+下線 */
.stream-single--cases .stream-single__body h2 {
	color: #0a1656; font-family: 'Noto Sans JP', sans-serif; font-size: 32px; font-weight: 700;
	line-height: 1.6; margin: 48px 0 35px; padding: 0; background: none; border: 0;
}
.stream-single--cases .stream-single__body h3 {
	color: #0a1656; font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 700;
	line-height: 1.3; margin: 40px 0 30px; padding: 0 0 10px; background: none;
	border: 0; border-bottom: 2px solid #0a1656;
}
.stream-single--cases .stream-single__foot { margin-top: 48px; padding-top: 22px; border-top: 1px solid #eef4fb; }
.stream-single--cases .stream-single__back {
	font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
	font-size: 14.5px; color: #2470cf; text-decoration: none;
}
.stream-single--cases .stream-single__back:hover { text-decoration: underline; }

/* 本文の箇条書き(SWELLリセット対策) */
.stream-single--cases .stream-single__body ul { list-style: disc; padding-left: 1.5em; margin: 0 0 1.6em; }
.stream-single--cases .stream-single__body ol { list-style: decimal; padding-left: 1.5em; margin: 0 0 1.6em; }
.stream-single--cases .stream-single__body li { margin: 6px 0; }