/* ---- ② 注目記事 ---- */
.featured-row {
	background: #fff;
	padding: 40px 0 60px;
}
.featured-row__wrap {
	position: relative;
	overflow: hidden;
	padding: 8px 0 28px;
}
.featured-row__swiper {
	overflow: visible;
}
.featured-row__swiper .swiper-wrapper {
	align-items: stretch;
}
.featured-row__swiper .swiper-slide {
	width: 320px;
	height: auto;
	display: flex;
	flex-direction: column;
}
.featured-row__swiper .card {
	max-width: 320px;
	margin-bottom: 0;
}
.featured-row__swiper .card__thumbnail {
	height: 180px;
}

/* スライドが枠内に収まりきる（スクロール不要）場合はナビ/スクロールバーを隠す */
.featured-row:has(.featured-row__swiper--centered) .featured-row__prev,
.featured-row:has(.featured-row__swiper--centered) .featured-row__next,
.featured-row:has(.featured-row__swiper--centered) .featured-row__scrollbar {
	display: none;
}
/* スライド枚数が少なくSwiperのloop/centeredSlidesを使わない場合でも、
   枠内に収まりきっているときはカード群をコンテナ中央に寄せる。
   Swiperの centeredSlides は「アクティブな1枚」を中央に置く仕組みなので、
   先頭スライドをそのまま使うと群の中央にならず片側だけ空くため、
   ここではflexの中身（.swiper-wrapper）側で群ごと中央寄せする。
   .swiper-wrapper はSwiper側のCSSで幅100%になっており、外側の
   .featured-row__swiper に justify-content を付けても効果が無いため注意
   （isLocked時はtranslateが実質0のままなので、この配置とSwiperのtransformが
   競合しない） */
.featured-row__swiper--centered .swiper-wrapper {
	justify-content: center;
}

/* nav arrows */
.featured-row__prev,
.featured-row__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff;
	border: none;
	box-shadow: 0 6px 8px rgba(0,0,0,0.1);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: box-shadow 0.2s, opacity 0.2s;
}
.featured-row__prev:hover,
.featured-row__next:hover { box-shadow: 0 8px 18px rgba(0,0,0,0.16); }
.featured-row__prev { left: 16px; }
.featured-row__next { right: 16px; }
.featured-row__prev.swiper-button-disabled,
.featured-row__next.swiper-button-disabled { opacity: 0.35; pointer-events: none; }

/* Scrollbar
   Swiperのscrollbarモジュールはloop用に複製されたスライドまでトラック長の
   計算に含めてしまい、実スライドの先頭（realIndex:0）でもバーが左端まで
   到達しない不具合があるため使用しない。js/home.jsがrealIndex基準で
   .featured-row__scrollbar-fill の位置・幅を直接計算する */
.featured-row__scrollbar {
	display: none;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
	.featured-row { padding: 24px 0 32px; }
	.featured-row__prev,
	.featured-row__next { display: none; }
	.featured-row__wrap { padding-bottom: 8px; }
	.featured-row__scrollbar {
		display: block;
		position: relative;
		height: 4px;
		background: var(--border-color);
		border-radius: 999px;
		margin: 8px 20px 0;
		overflow: hidden;
	}
	.featured-row__scrollbar-fill {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background: var(--accent);
		border-radius: 999px;
		transition: left 0.25s ease;
	}
}

/* iPhone SE等の狭い画面向けにカード幅をさらに縮小
   375pxちょうどの端末は、丸め誤差でmax-width:375pxの境界にマッチしないことが
   あるため、少し余裕を持たせて380pxを基準にする */
@media (max-width: 380px) {
	.featured-row__swiper .swiper-slide {
		width: 280px;
	}
	.featured-row__swiper .card {
		max-width: 280px;
	}
}