/* ========================================================================
 * c-slider.css（Cocoiro Slider MirrorFlow+ / UI改良安定版）
 * ------------------------------------------------------------------------
 * ▼ 修正概要
 *   - 矢印ボタン (.c-slider__prev / .c-slider__next) の視認性と操作性を改善
 *   - 背景が白でも見やすい淡青トーンを採用
 *   - hover時にわずかな発光・拡大効果を付与
 *   - 追加機能：スライダー全体に比率クラス（.ratio-1-1 / .ratio-4-3 / .ratio-4-5 / .ratio-16-9）を適用可能
 *   - HTML構造・既存挙動は一切変更なし（完全互換）
 * ======================================================================== */

.c-slider{
	position:relative;
	width:100%;
	overflow:hidden;
}

/* === スライドトラック ================================================ */
.c-slider__track{
	display:flex;
	flex-wrap:nowrap;
	will-change:transform;
	transition:transform 0.05s linear;
}

/* === セル ============================================================= */
.c-slider__cell{
	flex:0 0 auto;
	width:240px;
	margin-right:16px;
	background:#fff;
	border:1px solid #ddd;
	border-radius:6px;
	overflow:hidden;
	box-shadow:0 1px 3px rgba(0,0,0,0.08);
	transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.c-slider__cell:hover{
	transform:translateY(-3px);
	box-shadow:0 3px 8px rgba(0,0,0,0.15);
}

/* === サムネイル（共通ベース） ======================================= */
.c-slider__thumb{
	position:relative;
	width:100%;
	aspect-ratio:4 / 3;
	overflow:hidden;
}
@supports not (aspect-ratio:1 / 1){
	.c-slider__thumb::before{
		content:"";
		display:block;
		padding-top:75%;
	}
	.c-slider__thumb img{
		position:absolute;
		inset:0;
	}
}
.c-slider__thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

/* === 比率指定 ========================================================= */
/* デフォルト（4:3） */
.ratio-4-3 .c-slider__thumb{
	aspect-ratio:4 / 3;
}
@supports not (aspect-ratio:1 / 1){
	.ratio-4-3 .c-slider__thumb::before{
		padding-top:75%;
	}
}

/* 正方形（1:1） */
.ratio-1-1 .c-slider__thumb{
	aspect-ratio:1 / 1;
}
@supports not (aspect-ratio:1 / 1){
	.ratio-1-1 .c-slider__thumb::before{
		padding-top:100%;
	}
}

/* 縦長（4:5） */
.ratio-4-5 .c-slider__thumb{
	aspect-ratio:4 / 5;
}
@supports not (aspect-ratio:1 / 1){
	.ratio-4-5 .c-slider__thumb::before{
		padding-top:125%;
	}
}

/* 横長（16:9） */
.ratio-16-9 .c-slider__thumb{
	aspect-ratio:16 / 9;
}
@supports not (aspect-ratio:1 / 1){
	.ratio-16-9 .c-slider__thumb::before{
		padding-top:56.25%;
	}
}

/* === コンテンツ ======================================================= */
.c-slider__content{
	padding:10px;
}

.c-slider__title{
	font-size:1em;
	font-weight:600;
	margin-bottom:6px;
	color:#222;
	line-height:1.4;
}

/* === 抜粋（2行省略） ================================================== */
.c-slider__excerpt{
	font-size:0.9em;
	line-height:1.6;
	color:#555;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* === ナビ（UI改良） =================================================== */
.c-slider__nav{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	display:flex;
	justify-content:space-between;
	transform:translateY(-50%);
	pointer-events:none;
	z-index:5;
}

.c-slider__prev,
.c-slider__next{
	width:48px;
	height:48px;
	border:none;
	border-radius:50%;
	background:rgba(0,128,255,0.25);
	cursor:pointer;
	pointer-events:auto;
	position:relative;
	transition:background-color 0.25s ease, transform 0.25s ease;
}

.c-slider__prev:hover,
.c-slider__next:hover{
	background:rgba(255,255,255,0.9);
	transform:scale(1.12);
	box-shadow:0 0 8px rgba(0,128,255,0.4);
}

/* 矢印マーク */
.c-slider__prev::before,
.c-slider__next::before{
	content:'';
	display:block;
	width:12px;
	height:12px;
	border-top:3px solid #fff;
	border-right:3px solid #fff;
	position:absolute;
	top:50%;
	left:50%;
	transform-origin:center;
}

/* 左矢印 */
.c-slider__prev::before{
	transform:translate(-50%, -50%) rotate(-135deg);
}

/* 右矢印 */
.c-slider__next::before{
	transform:translate(-50%, -50%) rotate(45deg);
}

/* === メディア調整 ===================================================== */
@media (max-width:768px){
	.c-slider__cell{
		width:180px;
		margin-right:10px;
	}
	.c-slider__prev,
	.c-slider__next{
		width:36px;
		height:36px;
	}
}