/* CASE STUDY カード群の共有CSS（index.css から移設）。
   TOP(index.php)と/service/(archive-service.php)の両方で読み込む。カードの見た目はここが単一ソース。
   ※セクション枠(.top_casestudy_section等)は各ページ側に持たせる（ここには置かない） */
.cs_list {
		margin-top: 54px;
		display: flex;
		flex-direction: column;
		gap: 40px;
}
.cs_card {
		display: flex;
		align-items: stretch;
		background: #fff;
		border-radius: 4px;
		overflow: hidden;
		text-decoration: none;
		color: #1a1a1a;
		box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
		transition: box-shadow 0.4s ease;
}
.cs_card:nth-child(even) {
		flex-direction: row-reverse; /* 2本目・4本目…は写真を右に＝交互(zigzag) */
}
.cs_card_img {
		flex: 0 0 46%;
		overflow: hidden;
}
.cs_card_img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs_card_body {
		flex: 1 1 54%;
		padding: 44px 48px;
		display: flex;
		flex-direction: column;
		justify-content: center;
}
.cs_card_meta {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 16px;
}
.cs_card_tag {
		display: inline-block;
		background: #c2153e;
		color: #fff;
		font-size: 11px;
		letter-spacing: 0.08em;
		padding: 4px 11px;
		border-radius: 2px;
}
.cs_card_client {
		font-size: 13px;
		letter-spacing: 0.04em;
		color: #666;
}
.cs_card_ttl {
		font-size: 24px;
		line-height: 1.5;
		font-weight: 700;
		margin-bottom: 16px;
		transition: color 0.4s ease;
}
.cs_card_lead {
		font-size: 14px;
		line-height: 1.9;
		color: #555;
		margin-bottom: 24px;
}
.cs_card_more {
		display: inline-flex;
		align-items: center;
		font-size: 13px;
		letter-spacing: 0.06em;
		color: #1a1a1a;
}
.cs_card_more .arrowBaseS {
		position: relative;
		width: 28px;
		height: 28px;
		background: #c2153e;
		border-radius: 50%;
		margin-left: 10px;
		display: inline-block;
		overflow: hidden;
		flex-shrink: 0;
}
@media (hover: hover) {
		.cs_card:hover {
				box-shadow: 0 8px 36px rgba(0, 0, 0, 0.12);
		}
		.cs_card:hover .cs_card_img img {
				transform: scale(1.06);
		}
		.cs_card:hover .cs_card_ttl {
				color: #c2153e;
		}
		.cs_card:hover .cs_card_more .arrowBaseS::after {
				animation: arrowRight 0.4s linear forwards;
		}
		.cs_more a:hover { color: #c2153e; }
}
.cs_more {
		margin: 56px 0 0;
		text-align: center;
}
.cs_more a {
		display: inline-flex;
		align-items: center;
		color: #1a1a1a;
		font-size: 14px;
		letter-spacing: 0.06em;
		text-decoration: none;
		transition: color 0.3s;
}

/* SP：カードは縦積み（写真上・本文下）。TOPと同一レイアウト＝サムネ16:9＋サブ見出し(リード)非表示でコンパクト */
@media (max-width: 767px) {
	.cs_list { margin-top: 34px; gap: 24px; }
	.cs_card, .cs_card:nth-child(even) { flex-direction: column; }
	.cs_card_img { flex: none; aspect-ratio: 16/9; }
	.cs_card_body { padding: 26px 22px; }
	.cs_card_ttl { font-size: 19px; }
	.cs_card_lead { display: none; } /* SPは縦長回避でリード非表示（TOPと統一） */
	.cs_more { margin-top: 36px; }
}

/* ============================================================
   CASE STUDY 個別記事(single-casestudy.php)＋一覧(archive-casestudy.php)
   ＝NEWSより広め・エディトリアル。SP対応込み（2026-08-02）
   ============================================================ */
/* ---- 個別記事 ---- */
.cs_single { display:block; }
/* ヒーロー＝News等と同じ固定ヘッダーバンド(page_hdr)を使用。背景はNewsのものを流用（.casestudy_hdr） */
.casestudy_hdr { background-image: url("../images/news_hdr_bg_pc.jpg"); }
/* 白いコンテンツカード（Newsの.news_innerに倣う。サイドバー無し＝読みやすい幅） */
.cs_single_wrap { max-width:900px; margin:0 auto; }
.cs_single_inner { background:#fff; padding:clamp(44px,6vw,72px) clamp(24px,5vw,60px) clamp(60px,8vw,100px); }
.cs_single_head { width:100%; margin:0; }
.cs_single_meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.cs_single_tag { display:inline-block; background:#c2153e; color:#fff; font-size:12px; letter-spacing:.08em; padding:5px 13px; border-radius:2px; }
.cs_single_client { font-size:14px; letter-spacing:.04em; color:#666; }
.cs_single_date { font-size:13px; letter-spacing:.06em; color:#999; margin-left:auto; }
.cs_single_ttl { font-size:clamp(26px,3.4vw,42px); font-weight:800; line-height:1.45; letter-spacing:.01em; color:#141013; margin:0; }

/* 本文＝読みやすい幅・エディトリアル */
.cs_single_body { width:100%; margin:clamp(28px,4vw,44px) 0 0; font-size:17px; line-height:2.0; color:#2c2829; }
.cs_single_body > *:first-child { margin-top:0; }
.cs_single_body p { margin:0 0 1.8em; }
.cs_single_body h2 { font-size:clamp(21px,2.4vw,28px); font-weight:800; line-height:1.5; margin:2.4em 0 .9em; padding-bottom:.5em; border-bottom:2px solid #eee; }
.cs_single_body h3 { font-size:clamp(18px,2vw,22px); font-weight:800; line-height:1.5; margin:2em 0 .7em; color:#141013; }
.cs_single_body h3::before { content:""; display:inline-block; width:10px; height:10px; background:#c2153e; margin-right:12px; vertical-align:middle; }
.cs_single_body img { max-width:100%; height:auto; display:block; border-radius:4px; margin:1.6em auto; }
.cs_single_body a { color:#c2153e; text-decoration:underline; }
.cs_single_body ul, .cs_single_body ol { margin:0 0 1.8em; padding-left:1.4em; }
.cs_single_body li { margin-bottom:.5em; }
/* 対談の発言引用＝左に赤ライン */
.cs_single_body blockquote { margin:1.8em 0; padding:8px 0 8px 24px; border-left:3px solid #c2153e; color:#3a3436; font-size:16px; line-height:1.95; }
.cs_single_body strong { font-weight:700; }

/* 記事末：一覧へ／問い合わせ */
.cs_single_foot { width:100%; margin:clamp(44px,6vw,64px) 0 0; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.cs_single_back, .cs_single_contact { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:15px; text-decoration:none; }
.cs_single_back { color:#141013; }
.cs_single_contact { color:#fff; background:#c2153e; padding:14px 26px; border-radius:40px; transition:background .25s; }
.cs_single_contact:hover { background:#a3102f; }
.cs_single_back .arrowBaseS.is-back { transform:scaleX(-1); }

/* ---- 一覧(archive) ---- */
.cs_archive { padding:clamp(40px,6vw,80px) 0 clamp(60px,8vw,110px); }
.cs_archive_inner { width:min(1080px, 90%); margin:0 auto; }
.cs_archive_empty { text-align:center; color:#888; padding:60px 0; }

/* ---- SP ---- */
@media (max-width:767px){
	.cs_single_date { margin-left:0; width:100%; }
	.cs_single_ttl { font-size:24px; line-height:1.5; }
	.cs_single_body { font-size:16px; line-height:1.95; }
	.cs_single_body h2 { font-size:20px; margin:2em 0 .8em; }
	.cs_single_body h3 { font-size:17px; }
	.cs_single_foot { flex-direction:column; align-items:stretch; }
	.cs_single_contact { justify-content:center; }
	.cs_single_back { order:2; justify-content:center; }
}

/* ---- 対談（Q&A）スタイル ---- */
.cs_single_body .cs_speakers { font-size:14px; line-height:1.95; color:#555; background:#f7f6f7; border-radius:6px; padding:18px 22px; margin:0 0 2em; }
.cs_single_body .cs_q { font-weight:800; color:#141013; margin:2.6em 0 1.1em; line-height:1.7; }
.cs_single_body .cs_q::before { content:"Q."; color:#c2153e; font-weight:800; margin-right:.5em; }
/* 話者名：名前だけ独立行にして、続く発言は次の行から（読みやすさ優先）
   .is-guest＝社外ゲスト（SmartNews 丸山様 等）は青。自社側（BABOON Lab）は赤のまま＝発言者が一目で分かる */
.cs_single_body .cs_speaker { display:block; font-weight:800; color:#c2153e; margin:0 0 .2em; }
.cs_single_body .cs_speaker.is-guest { color:#3766a8; }
/* 記事末尾のクレジット（取材先／媒体の情報＋外部リンク）。本文と区切り線で分ける */
.cs_single_body .cs_source { margin:3.2em 0 0; padding-top:1.6em; border-top:1px solid #e5e0e2; font-size:14px; line-height:2; color:#666; }
.cs_single_body .cs_source_org  { display:block; font-size:13px; color:#999; letter-spacing:.02em; margin-bottom:.5em; }
.cs_single_body .cs_source_ttl  { display:block; font-size:16px; font-weight:800; color:#1a1a1a; margin-bottom:.6em; }
.cs_single_body .cs_source_link { display:block; margin-top:1em; }
.cs_single_body .cs_source a { color:#c2153e; text-decoration:none; border-bottom:1px solid rgba(194,21,62,.3); word-break:break-all; }
@media(hover:hover){ .cs_single_body .cs_source a:hover { border-bottom-color:#c2153e; } }
.cs_single_body .cs_figure { font-size:13px; color:#999; text-align:center; padding:28px 16px; border:1px dashed #d5d0d2; border-radius:6px; margin:1.8em 0; background:#fafafa; }
@media(max-width:767px){ .cs_single_body .cs_q{ margin:2.2em 0 .9em; } .cs_single_body .cs_speakers{ font-size:13px; padding:14px 16px; } }

/* ---- 図（キャプション付き） ---- */
.cs_single_body figure.cs_fig { margin:2em 0; }
.cs_single_body figure.cs_fig img { margin:0 auto .7em; border:1px solid #eee; }
.cs_single_body figure.cs_fig figcaption { font-size:12px; color:#999; text-align:center; letter-spacing:.02em; }

/* ---- 対談の写真（キャプションなし・少し大きめ） ---- */
.cs_single_body figure.cs_photo { margin:2.4em 0; }
.cs_single_body figure.cs_photo img { margin:0 auto; }

/* casestudy single：フッター手前でbodyが濃色化する共通演出(body.isBlk)を無効化。
   記事が枠なしでbody背景に直乗りのため、記事途中で背景が濃色になるのを防ぐ（記事の明るい背景を保つ） */
body.csSingle.isBlk { background: #E9E9E9; }

/* ---- 記事末：他の導入事例（回遊） ---- */
.cs_others { margin-top:clamp(48px,7vw,84px); }
.cs_others_inner { max-width:900px; margin:0 auto; padding:0 20px; }
.cs_others_head { margin-bottom:clamp(22px,3.5vw,36px); }
.cs_others_head .section_title_jp { font-size:15px; font-weight:700; color:#141013; margin:0 0 4px; letter-spacing:.04em; }
.cs_others_head .section_title_en { font-family:'Montserrat',sans-serif; font-size:clamp(22px,3vw,30px); font-weight:800; color:#141013; letter-spacing:.02em; margin:0; }
@media (max-width:767px){ .cs_others_inner { padding:0 16px; } }

/* ---- 記事上部ヒーロー画像（キービジュアル・タイトル前） ---- */
.cs_single_kv { margin:0 0 clamp(24px,3.5vw,40px); }
.cs_single_kv img { width:100%; height:auto; display:block; border-radius:6px; }
/* パンくず：長タイトルで折り返して崩れる→SPは1行に収めて末尾省略(…) */
@media (max-width:767px){
	body.csSingle .bread_wrap ol { flex-wrap:nowrap; }
	body.csSingle .bread_wrap ol li { flex-shrink:0; }
	body.csSingle .bread_wrap ol li:last-child { flex-shrink:1; min-width:0; }
	body.csSingle .bread_wrap ol li:last-child span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}