/* =========================
		   スライダー全体
		========================= */
		.slider-wrapper {
		  width: 100%;
		  margin-bottom: 4em;
		}

		/* =========================
		   表示領域（ここだけ切る）
		========================= */
		.slider-viewport {
		  overflow: hidden;
		}

		/* =========================
		   トラック
		========================= */
		.slider-track {
		  display: flex;
		  transition: transform 0.3s ease;
		  padding-bottom:0.6em;
		}

		/* 1ページ = 2 × 3 固定 */
		.slide-page {
		  flex: 0 0 100%;
		  display: grid;
		  grid-template-columns: repeat(3, 1fr);
		  grid-template-rows: repeat(2, 1fr);
		  gap: 14px;
		  padding: 0 12px;
		}

		/* =========================
		   フッター（切れない）
		========================= */
		.slider-footer {
		  display: grid;
		  grid-template-columns: 44px 1fr 44px;
		  align-items: center;
		  --arrow-size: clamp(33px, 3vw, 44px);
		  grid-template-columns: var(--arrow-size) 1fr var(--arrow-size);
		  gap: 14px;
		  margin-top: 14px;
		  padding: 0 12px;
		}

		/* 矢印 */
		.arrow-btn {
		  width: var(--arrow-size);
		  height: var(--arrow-size);
		  border-radius: 50%;
		  border: none;
		  background: rgba(0,0,0,0.55);
		  color: #fff;
		  font-size: 22px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  cursor: pointer;
		}

		/* ドット */
		.slider-dots {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  gap: 8px;
		}

		.dot {
		  width: 8px;
		  height: 8px;
		  border-radius: 50%;
		  background: #ccc;
		  border: none;
		}

		.dot.is-active {
		  width: 10px;
		  height: 10px;
		  background: #111;
		}