/* ==========================================================================
   動画・スライダー
   ========================================================================== */

/* --- 動画（Vimeo / YouTube） ------------------------------------------- */

/* responsive=yes のとき、幅いっぱい・高さは16:9で自動計算される枠に入れる。
   WordPress標準の埋め込みは640px固定のため、375px幅のスマホでは
   はみ出して横スクロールが出る。これを防ぐための枠。 */
.uk-media-responsive {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;   /* 9 ÷ 16 = 0.5625 */
	height: 0;
	overflow: hidden;
	margin: 0 0 1.5em;
}

.uk-media-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* responsive=no のとき（指定された大きさのまま出す） */
.uk-media:not(.uk-media-responsive) {
	margin: 0 0 1.5em;
	max-width: 100%;
}

.uk-media:not(.uk-media-responsive) iframe {
	max-width: 100%;
	border: 0;
}

/* --- スライダー -------------------------------------------------------- */

.uk-slider {
	position: relative;
	margin: 0 auto 1.5em;
	overflow: hidden;
}

/* 画像を横一列に並べ、1枚ずつピタッと止まるようにする。
   横スワイプはこれだけで動く（JavaScriptを書かなくてよい）。 */
.uk-slider-track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox: スクロールバーを隠す */
	-ms-overflow-style: none;
}

.uk-slider-track::-webkit-scrollbar {
	display: none;                  /* Chrome/Safari: スクロールバーを隠す */
}

.uk-slider-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	position: relative;
	min-width: 0;
}

/* ★ 高さを揃える指定。これを消すと写真ごとに高さがバラバラになる。
     ・aspect-ratio … ショートコードの width / height で決まる比率（既定 720:320）
     ・object-fit:cover … 比率に合わない写真を、中央を残して切り抜く
     元のプラグインは切り抜いた画像ファイルをサーバー上に作っていたが、
     ここでは表示側で切り抜くのでファイルが増えない。
     読み込み前から高さが決まるため、表示時のガタつきも起きない。 */
.uk-slider-slide img {
	display: block;
	width: 100%;
	/* ⚠️ height は書かないこと。
	      height:100% を入れると aspect-ratio が打ち消されて **高さが0** になる
	      （2026-08-15 実際になった）。高さは aspect-ratio に決めさせる。 */
	aspect-ratio: var(--uk-slider-ratio, 720/320);
	object-fit: cover;
	object-position: center;
	margin: 0;
}

.uk-slider-slide a {
	display: block;
	position: relative;
}

/* 画像タイトル（既定では出さない。title="yes" のときだけ） */
.uk-slider-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px 14px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

/* --- 矢印 -------------------------------------------------------------- */

.uk-slider-prev,
.uk-slider-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;                    /* 指で押せる大きさ */
	height: 44px;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	transition: background 0.2s;
	z-index: 2;
}

.uk-slider-prev:hover,
.uk-slider-next:hover {
	background: rgba(0, 0, 0, 0.65);
}

.uk-slider-prev { left: 10px; }
.uk-slider-next { right: 10px; }

/* 矢印の形（画像を使わずCSSだけで描く） */
.uk-slider-prev::before,
.uk-slider-next::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}

.uk-slider-prev::before {
	transform: translate(-40%, -50%) rotate(-135deg);
}

.uk-slider-next::before {
	transform: translate(-60%, -50%) rotate(45deg);
}

/* --- ドット（何枚目かの表示） ------------------------------------------ */

.uk-slider-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	text-align: center;
	z-index: 2;
	line-height: 0;
}

.uk-slider-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	transition: background 0.2s;
}

.uk-slider-dot.is-active {
	background: #fff;
}

/* スマホでは矢印を少し小さく、端に寄せる */
@media screen and (max-width: 640px) {
	.uk-slider-prev,
	.uk-slider-next {
		width: 38px;
		height: 38px;
	}
	.uk-slider-prev { left: 6px; }
	.uk-slider-next { right: 6px; }
	.uk-slider-title { font-size: 13px; padding: 8px 10px; }
}