/* case_study.html 専用（他ページの work_one 等と競合しない） */

/* --- AOS 用ラッパー（スライド本体の transform と分離） --- */
.works--case-study .work_slider_anim{
	width: 100%;
}

/* --- スライダー外枠（矢印ボタンの基準位置） --- */
.works--case-study .work_slider_outer{
	position: relative;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 50px;
	box-sizing: border-box;
}

/* 横スクロールを隠し、縦方向はカードの高さに追従 */
.works--case-study .work_slider_viewport{
	overflow-x: hidden;
	overflow-y: visible;
	width: 100%;
}

/* スライド一覧（JS で translateX を付与して横移動） */
.works--case-study .cs_work_list{
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

/* 各スライド（幅は JS の applyLayout で px 指定） */
.works--case-study .cs_slide-item{
	flex: 0 0 auto;
	box-sizing: border-box;
	list-style: none;
}

/* 導入事例カード（work_one 相当・青枠内に詳細文も含む） */
.works--case-study .cs_card{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 30px;
	background-color: #E6F1FA;
	border-radius: 10px;
	box-shadow: 5px 5px 10px rgba(27, 154, 215, 0.1);
	color: inherit;
	text-decoration: none;
}

.works--case-study .cs_card:hover{
	opacity: 0.95;
}

/* カード上部: 画像 + 会社名・概要 */
.works--case-study .cs_card_row{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: 100%;
}

.works--case-study .cs_card_img{
	flex: 0 0 200px;
	width: 200px;
	flex-shrink: 0;
}

.works--case-study .cs_card_img img{
	display: block;
	width: 100%;
	height: auto;
}

.works--case-study .cs_card_body{
	flex: 1;
	min-width: 0;
	padding: 10px 0 10px 20px;
}

.works--case-study .cs_card_body h3{
	font-size: 20px;
	line-height: 1.4;
	color: #1B9AD7;
	margin: 0 0 10px;
}

.works--case-study .cs_card_body p{
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* カード中部: 太字リード文（work_txt 相当） */
.works--case-study .cs_card_lead{
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	margin: 10px 0 0;
	width: 100%;
}

/* カード下部: 背景・課題・効果（func_detail_box は style.css 共通） */
.works--case-study .cs_card .func_detail_box{
	margin-top: 20px;
}

/* --- 前後ナビボタン --- */
/*
 * 上下位置の調整（PC）:
 *   top … 基準位置（% または px）。大きいほど下へ、小さいほど上へ
 *   margin-top … ボタン高さ(40px)の半分(-20px)で縦中央合わせ
 *
 * 例）下へ移動: top: 55%; または top: 60%;
 * 例）上へ移動: top: 45%; または top: 40%;
 * 例）px指定:   top: 120px; margin-top: 0;
 *
 * 左右だけ別の高さにする場合:
 *   .work_slider_prev { top: 45%; }
 *   .work_slider_next { top: 55%; }
 */
.works--case-study .work_slider_btn{
	position: absolute;
	top: 25%;
	margin-top: -20px;
	width: 40px;
	height: 40px;
	background-color: #1B9AD7;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	padding: 0;
}

.works--case-study .work_slider_btn:before{
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.works--case-study .work_slider_prev{
	left: 0;
}

.works--case-study .work_slider_prev:before{
	margin-left: 4px;
}

.works--case-study .work_slider_next{
	right: 0;
}

.works--case-study .work_slider_next:before{
	border-left: none;
	border-bottom: none;
	border-right: 2px solid #fff;
	border-top: 2px solid #fff;
	margin-right: 4px;
}

/* --- ページャー（ドット） --- */
.works--case-study .work_slider_pager{
	display: flex;
	justify-content: center;
	gap: 8px;
	padding-top: 20px;
}

.works--case-study .work_slider_pager button{
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #ccc;
	cursor: pointer;
}

.works--case-study .work_slider_pager button.is-active,
.works--case-study .work_slider_pager button:hover{
	background: #1B9AD7;
}

/* --- スマホ（1枚表示） --- */
@media screen and (max-width: 767px){
	.works--case-study .work_slider_outer{
		padding: 0 40px;
	}

	.works--case-study .cs_work_list{
		gap: 10px;
	}

	.works--case-study .cs_card{
		padding: 20px;
	}

	.works--case-study .cs_card_row{
		display: block;
	}

	.works--case-study .cs_card_img{
		flex: none;
		width: 100%;
		max-width: none;
		text-align: center;
		margin-bottom: 10px;
	}

	.works--case-study .cs_card_body{
		padding: 0;
	}

	.works--case-study .cs_card_body h3{
		font-size: 18px;
	}

	.works--case-study .cs_card_lead{
		font-size: 18px;
		margin-top: 0;
	}

	/* スマホ時のナビボタン上下位置（PC とは別に調整可能） */
	.works--case-study .work_slider_btn{
		top: 40%;
	}
}