/* ============================================
   CSS scroll-snap 版スライダー（Slick不使用）
   要件：矢印(‹›)操作 + 指スワイプ / 自動再生なし・無限ループあり
   ============================================ */

/* ---- 共通：矢印ボタン ---- */
.sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}
.swipe-wrap{
	position:relative;
}
.swipe-wrap:focus{
	outline:none; /* キーボード操作を受け付けるためのtabindexなので、枠自体の既定フォーカスリングは消す */
}
.swipe-wrap:focus-visible{
	outline:2px solid #0052b2;
	outline-offset:4px;
}
/* .swipe-track に <ul>/<ol> を使う場合の防御的リセット。
   案件側のCSSリセット(sanitize.css等)に依存せず、このファイル単体で
   常に正しく見える状態を保証するために、ここで明示的にリセットしておく。
   ※marginは意図的に含めない。`.inner`のような中央寄せ用クラス
   （margin:auto）と同じ詳細度で衝突し、後着のこちらが勝って中央寄せを
   壊してしまう事故が実際に起きたため。paddingはブラウザ既定のインデント
   除去のためだけなので安全。 */
.swipe-track{
	list-style:none;
	padding:0;
}
.swipe-arrow{
	position:absolute;
	/* 縦位置は「ラップ全体」ではなく「トラック（カード）部分」の中央に
	   来るようにする。ドットの分だけ下にズレて見える問題があったため、
	   下側にドット領域の高さ分(--swipe-dots-space)を空けて、残りの
	   範囲の中央に配置する（margin:auto方式の縦центリング）。 */
	top:0;
	bottom:var(--swipe-dots-space, 0px);
	margin:auto 0;
	transform:none;
	width:44px;
	height:44px;
	border-radius:50%;
	border:none;
	background:#fff;
	box-shadow:0 2px 10px rgba(0,0,0,0.15);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	z-index:2;
	transition:opacity 0.2s ease, transform 0.15s ease;
	padding:0;
	touch-action:manipulation; /* ダブルタップでのブラウザズームを誘発させない */
}
.swipe-arrow:hover{
	transform:scale(1.06);
}
.swipe-arrow:active{
	transform:scale(0.94);
}
.swipe-arrow:focus-visible{
	outline:2px solid #0052b2;
	outline-offset:2px;
}
.swipe-arrow svg{
	width:9px;
	height:15px;
	fill:none;
	stroke:#0052b2;
	stroke-width:2.4;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.swipe-arrow.is-prev{ left:-4px; }
.swipe-arrow.is-next{ right:-4px; }
/* is-prev側のsvgパスは元から左向き（‹）で描いているので、ここで反転はかけない
   （以前はscaleX(-1)を重ねていたせいで右向き(›)に戻ってしまっていた＝バグの原因） */
/* 無限ループなので通常は無効化されないが、念のため残しておく（保険） */
.swipe-arrow:disabled{
	opacity:0.35;
	cursor:default;
	pointer-events:none;
	box-shadow:none;
}

/* ---- ドットインジケーター ---- */
.swipe-dots{
	display:none; /* SPでのみ表示。下のmedia queryで上書き */
	justify-content:center;
	align-items:center;
	gap:10px;
	margin-top:16px;
}
.swipe-dot{
	width:28px;
	height:28px;
	padding:0;
	border:none;
	background:transparent;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	touch-action:manipulation;
}
.swipe-dot::before{
	content:'';
	width:7px;
	height:7px;
	border-radius:50%;
	background:#c8d4de;
	transition:background 0.2s ease, transform 0.2s ease;
}
.swipe-dot.is-active::before{
	background:#0052b2;
	transform:scale(1.3);
}
.swipe-dot:focus-visible{
	outline:2px solid #0052b2;
	outline-offset:2px;
	border-radius:50%;
}

/* PCでは矢印非表示にしているのと同様、無限ループ用に複製したコピーも非表示にする
   （PCは通常レイアウトなので、複製が並ぶと本物と重複して見えてしまうため） */
@media screen and (min-width:751px){
	.is-clone{ display:none; }
}

/* ---- PC：矢印・ドットは不要（従来通りの並び。ここは一切変更なし） ---- */
@media screen and (min-width:751px){
	.swipe-arrow{ display:none; }
	.swipe-dots{ display:none; }
	/* PCでも横並びグリッドにしたい場合だけ .swipe-track に追加するモディファイア
	   （例：cont3 .hope のような3列並び。cont4 .exprienceのような縦積みなら不要） */
	.swipe-track.is-pc-row{
		display:flex;
		justify-content:space-between;
		width:100%;
	}
}

/* ---- SP：スクロールスナップでスワイプ + 矢印操作 + ドット表示 ---- */
@media screen and (max-width:750px){
	.swipe-wrap{ --swipe-dots-space: 44px; } /* ドット領域の高さ(margin-top 16px + ボタン28px)。矢印の縦中央計算から除外する */
	.swipe-dots{ display:flex; }
	.swipe-track{
		display:flex;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;              /* Firefox */
		-ms-overflow-style:none;           /* 旧Edge */
		touch-action:pan-x manipulation;   /* ダブルタップズームを抑止しつつ横スワイプは許可 */
	}
	.swipe-track::-webkit-scrollbar{
		display:none;                       /* Chrome/Safari */
	}
	.swipe-track > *{
		flex:0 0 100%;
		scroll-snap-align:start;
		scroll-snap-stop:always;
	}
}