/* 新しいページ内スライダー専用。従来の .nk-hero / .nk-page-hero とは独立。 */
.nk-carousel {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
}
.nk-carousel:not(.nk-carousel--editor) { overflow: hidden; }
.nk-carousel__slide {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--nk-carousel-height, 600px);
	display: flex;
	align-items: flex-start;
	background: var(--wp--preset--color--surface, #eee);
}
.nk-carousel__slide > .nk-carousel__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	z-index: -2;
	pointer-events: none;
}
.nk-carousel__slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--nk-carousel-overlay, #000);
	opacity: var(--nk-carousel-opacity, .3);
	z-index: -1;
	pointer-events: none;
}
.nk-carousel__content {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	/* 左右は 1rem（1.0.3・2026-09-22。旧 clamp(3.5rem, 6vw, 6rem) はスマホで本文が細くなりすぎた）。
	   案件で変えるときは子テーマで --nk-carousel-padding-x / -top / -bottom を上書きする */
	padding: var(--nk-carousel-padding-top, 4rem) var(--nk-carousel-padding-x, 1rem) var(--nk-carousel-padding-bottom, 6rem);
	overflow-wrap: anywhere;
}
.nk-carousel__content > :first-child { margin-top: 0; }
.nk-carousel__content > :last-child { margin-bottom: 0; }
/* JSがない場合は全スライドを縦に表示し、すべての本文とリンクを残す。 */
.nk-carousel.is-enhanced > .nk-carousel__track {
	display: grid;
	overflow: hidden;
}
.nk-carousel.is-enhanced > .nk-carousel__track > .nk-carousel__slide {
	grid-area: 1 / 1;
	visibility: hidden;
	pointer-events: none;
}
.nk-carousel.is-enhanced > .nk-carousel__track > .is-active,
.nk-carousel.is-enhanced > .nk-carousel__track > .is-leaving {
	visibility: visible;
}
.nk-carousel.is-enhanced > .nk-carousel__track > .is-active { z-index: 1; pointer-events: auto; }
.nk-carousel__controls { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.nk-carousel__controls button {
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid #fff;
	border-radius: 999px;
	background: #1a1a1a;
	color: #fff;
	font: inherit;
	cursor: pointer;
	pointer-events: auto;
}
.nk-carousel__controls button:hover { background: #3a3a3a; }
.nk-carousel__controls button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #111; }
.nk-carousel__controls .nk-carousel__prev, .nk-carousel__controls .nk-carousel__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	line-height: 1;
}
.nk-carousel__prev svg, .nk-carousel__next svg { display: block; width: 24px; height: 24px; }
.nk-carousel__prev { left: .5rem; }
.nk-carousel__next { right: .5rem; }
.nk-carousel__bottom {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	max-width: calc(100% - 1rem);
}
.nk-carousel__dots { display: flex; overflow-x: auto; padding: 0 2px; pointer-events: auto; background: rgb(0 0 0 / 35%); border-radius: 999px; }
.nk-carousel__controls .nk-carousel__dot { flex: 0 0 28px; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border-color: transparent; background: transparent; }
.nk-carousel__controls .nk-carousel__dot:focus-visible { outline-offset: -4px; box-shadow: none; }
.nk-carousel__dot::before { content: ''; display: block; box-sizing: border-box; width: 6px; height: 6px; margin: auto; border: 1px solid #fff; border-radius: 50%; }
.nk-carousel__dot[aria-current="true"]::before { background: #fff; }
.nk-carousel__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
	.nk-carousel__slide { scroll-behavior: auto; }
}

/* Shared foreground stays in one DOM layer while its background slides change. */
.nk-carousel.is-enhanced .has-shared-content > .nk-carousel__content { visibility: hidden; pointer-events: none; }
.nk-carousel__foreground {
	grid-area: 1 / 1;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	min-width: 0;
	min-height: var(--nk-carousel-height, 600px);
	visibility: hidden;
	pointer-events: none;
}
.nk-carousel__foreground.is-active,
.nk-carousel__foreground.is-leaving { visibility: visible; }
.nk-carousel__foreground.is-active > .nk-carousel__content { pointer-events: auto; }

/* 静的表示（矢印・ドットが無く自動送りも使えないとき）: JS 無しと同じ縦並びに戻し、全スライドの本文・リンクへ到達できるようにする。 */
.nk-carousel.is-enhanced.is-static > .nk-carousel__track { display: block; overflow: visible; }
.nk-carousel.is-enhanced.is-static > .nk-carousel__track > .nk-carousel__slide { visibility: visible; pointer-events: auto; }
.nk-carousel.is-enhanced.is-static .has-shared-content > .nk-carousel__content { visibility: visible; pointer-events: auto; }
.nk-carousel.is-enhanced.is-static > .nk-carousel__track > .nk-carousel__foreground { display: none; }
.nk-carousel.is-enhanced.is-static > .nk-carousel__controls { display: none; }

.nk-carousel__content[hidden] { display: none; }

/* The image stays underneath until the active video is actually playing. */
.nk-carousel__video { opacity: 0; }
.nk-carousel__video.is-playing { opacity: 1; }

/* モーション背景（Lottie・1.1.0）: 画像の上に重ね、読み込めてから見せる。中の SVG は枠いっぱい（収め方は preserveAspectRatio で JS が指定） */
.nk-carousel__slide > .nk-carousel__motion { opacity: 0; transition: opacity .3s; }
.nk-carousel__slide > .nk-carousel__motion.is-ready { opacity: 1; }
.nk-carousel__motion > svg { display: block; width: 100%; height: 100%; }
/* SVG アニメ背景（SMIL・1.1.0）: 動きを抑える設定では隠して下の画像を見せる（img の中の SMIL は CSS で止められない） */
@media (prefers-reduced-motion: reduce) {
	.nk-carousel__slide > .nk-carousel__svg { display: none; }
}