/* data-slider を付けた要素で使う、依存ライブラリ不要のスライダー */
.universal-slider { --slider-duration: 500ms; --slider-gap: 16px; position: relative; overflow: hidden; touch-action: pan-y; }
.universal-slider__viewport { overflow: hidden; }
.universal-slider__track { display: flex; transition: transform var(--slider-duration) ease; }
.universal-slider__page { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(var(--slider-per-view), minmax(0, 1fr)); gap: var(--slider-gap); }
.universal-slider__item { min-width: 0; }
.universal-slider--fade .universal-slider__track { display: grid; transition: none; }
.universal-slider--fade .universal-slider__page { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--slider-duration) ease, visibility 0s linear var(--slider-duration); }
.universal-slider--fade .universal-slider__page.is-active { opacity: 1; visibility: visible; transition: opacity var(--slider-duration) ease; }
.universal-slider--fade-slide .universal-slider__page { opacity: 0; transition: opacity var(--slider-duration) ease; }
.universal-slider--fade-slide .universal-slider__page.is-active { opacity: 1; }
.universal-slider--vertical .universal-slider__track { flex-direction: column; }
.universal-slider--ticker-step .universal-slider__page,
.universal-slider--center-focus .universal-slider__page,
.universal-slider--center-uniform .universal-slider__page { flex-basis: calc(100% / var(--slider-per-view)); grid-template-columns: minmax(0, 1fr); }
.universal-slider--ticker-step.universal-slider--vertical .universal-slider__page { flex: 0 0 auto; }
.universal-slider--center-focus,
.universal-slider--center-uniform { --slider-center-item-width: 62%; --slider-center-offset: calc((100% - var(--slider-center-item-width)) / 2); }
.universal-slider--center-focus .universal-slider__page,
.universal-slider--center-uniform .universal-slider__page { flex-basis: var(--slider-center-item-width); padding-inline: calc(var(--slider-gap) / 2); }
.universal-slider--center-focus .universal-slider__page { opacity: .48; transform: scale(.92); transition: opacity var(--slider-duration) ease, transform var(--slider-duration) ease; }
.universal-slider--center-focus .universal-slider__page.is-active { opacity: 1; transform: scale(1); }
.universal-slider--ticker { overflow: hidden; }
.universal-slider--ticker .universal-slider__viewport { overflow: hidden; }
.universal-slider__ticker-track { display: flex; width: max-content; animation: universal-ticker-left var(--ticker-duration) linear infinite; }
.universal-slider__ticker-item { flex: 0 0 min(82vw, 340px); min-width: 0; margin: calc(var(--slider-gap) / 2); }
.universal-slider__ticker-track--right { animation-name: universal-ticker-right; }
.universal-slider--ticker-vertical { max-height: 440px; }
.universal-slider--ticker-vertical .universal-slider__ticker-track { width: 100%; flex-direction: column; animation-name: universal-ticker-up; }
.universal-slider--ticker-vertical .universal-slider__ticker-item { flex: 0 0 auto; width: 100%; }
.universal-slider--ticker-vertical .universal-slider__ticker-track--down { animation-name: universal-ticker-down; }
.universal-slider__ticker-track.is-paused { animation-play-state: paused; }
@keyframes universal-ticker-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes universal-ticker-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes universal-ticker-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes universal-ticker-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .universal-slider__ticker-track { animation-play-state: paused; } }
.universal-slider__button { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 50%; color: #fff; background: rgba(20, 31, 27, .78); cursor: pointer; }
.universal-slider__button--prev { left: 10px; }.universal-slider__button--next { right: 10px; }
.universal-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.universal-slider__dot { width: 10px; height: 10px; padding: 0; border: 1px solid #52625b; border-radius: 50%; background: transparent; cursor: pointer; }
.universal-slider__dot.is-active { background: #164b43; }
.universal-slider__control-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.universal-slider--arrows-outside { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; overflow: visible; }
.universal-slider--arrows-outside .universal-slider__viewport { grid-column: 2; grid-row: 1; min-width: 0; }
.universal-slider--arrows-outside .universal-slider__button { position: static; transform: none; grid-row: 1; }
.universal-slider--arrows-outside .universal-slider__button--prev { grid-column: 1; }
.universal-slider--arrows-outside .universal-slider__button--next { grid-column: 3; }
.universal-slider--arrows-outside .universal-slider__dots { position: static; grid-column: 2; grid-row: 2; transform: none; justify-content: center; margin-top: 2px; }
.universal-slider__button:focus-visible,.universal-slider__dot:focus-visible { outline: 3px solid #4aa88e; outline-offset: 3px; }