/* ==========================================================
   NIWAKA特設ページ バナーカルーセル
   サイズ規定(NIWAKA提供資料):
     SP : バナー幅は画面幅の85%以上 → 本実装は92%
     PC : バナー1枚の横幅350px以上 / 縦横比は維持
   ========================================================== */
.niwaka-banner {
	--niwaka-pv: 1;            /* 同時表示枚数 (SP:1 / PC:2) */
	--niwaka-gap: 0px;         /* バナー間の余白(片側) */
	padding: 24px 0 8px;
}
.niwaka-banner__inner {
	position: relative;
	width: 92%;                /* SP: 画面幅の92% (>=85%) */
	max-width: 1000px;
	margin: 0 auto;
}
.niwaka-banner__viewport {
	overflow: hidden;
	touch-action: pan-y;       /* 縦スクロールはブラウザ、横スワイプはJSで処理 */
}
.niwaka-banner__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}
.niwaka-banner__track.is-animating {
	transition: transform .5s ease;
}
.niwaka-banner__slide {
	flex: 0 0 calc(100% / var(--niwaka-pv));
	box-sizing: border-box;
	padding: 0 var(--niwaka-gap);
	margin: 0;
	list-style: none;
}
.niwaka-banner__slide a {
	display: block;
}
.niwaka-banner__slide img {
	display: block;
	width: 100%;               /* 幅に追従して拡縮 */
	height: auto;              /* 縦横比を維持 */
	-webkit-user-drag: none;
	user-select: none;
}

/* 矢印 */
.niwaka-banner__arrow {
	position: absolute;
	top: calc((100% - 32px) / 2); /* 下のドット領域(32px)を除いたバナー中央 */
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;               /* SP: バナーの文字に被りにくいよう小さめ */
	height: 26px;
	margin: -13px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .7);
	color: #333;
	cursor: pointer;
	transition: background-color .2s;
}
.niwaka-banner__arrow svg {
	width: 14px;
	height: 14px;
}
.niwaka-banner__arrow:hover,
.niwaka-banner__arrow:focus-visible {
	background: #fff;
}
.niwaka-banner__arrow--prev { left: 3px; }
.niwaka-banner__arrow--next { right: 3px; }

/* インジケーター(ドット) */
.niwaka-banner__dots {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 8px;
}
.niwaka-banner__dot {
	width: 24px;               /* タップ領域を確保 */
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
}
.niwaka-banner__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: #ccc;
	transition: background-color .2s;
}
.niwaka-banner__dot.is-active::before {
	background: #6B615A;
}

/* PC: 2枚横並び (1枚あたり350px以上を確保できる幅から) */
@media screen and (min-width: 800px) {
	.niwaka-banner {
		--niwaka-pv: 2;
		--niwaka-gap: 6px;
		padding: 30px 0 10px;
	}
	.niwaka-banner__arrow {
		width: 44px;
		height: 44px;
		margin-top: -22px;
	}
	.niwaka-banner__arrow svg {
		width: 20px;
		height: 20px;
	}
	.niwaka-banner__arrow--prev { left: 10px; }
	.niwaka-banner__arrow--next { right: 10px; }
}

/* 十分な幅がある場合: 矢印をバナーの外側(左右の余白)に配置
   ※バナー1枚350px以上を保てる幅(約960px以上)でのみ。それ未満は従来どおりバナー上に重ねる */
@media screen and (min-width: 960px) {
	.niwaka-banner__inner {
		max-width: 1112px;      /* 1000px + 左右の矢印余白56px×2 */
		padding: 0 56px;
		box-sizing: border-box;
	}
	.niwaka-banner__arrow--prev { left: 6px; }
	.niwaka-banner__arrow--next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.niwaka-banner__track.is-animating { transition: none; }
}