@charset "UTF-8";
.slider-box p, .slider-box div, .loop-box ul, .loop-box li {
 box-sizing: border-box; margin: 0 !important; padding: 0 !important;}

.slider-box {
 box-sizing: border-box;
 overflow: hidden;
 width: 100%;
 background: #333;
 border: solid 5px #ccc;
 margin: 0 auto;
 padding: 10px 0 0;
}

.slider-check {
 display: none;
}

.slider-check:checked ~ .loop-box > .loop {
 animation-play-state: paused;
}

.slider-label {
 display: block;
 cursor: pointer;
 color: #fff;
 font-size: 24px;
 line-height: 2;
 text-align: center;
}

.slider-label::before {
 content: "\025a0  STOP";
}

.slider-check:checked ~ div > .slider-label::before {
 content: "\025b6  MOVE";
}
/* *********************************** */
/* スライド設定 */
/* *********************************** */

.loop-box{
 position: relative;
 width: 100%;
 overflow: hidden;
}

.loop-box, .loop-box ul {
 height: 500px;
}

.loop-box ul {
 position: absolute; left: 0; top: 0;
 display: flex;
 justify-content: space-between;
 background: #eee;
 list-style: none;
 max-width: 10000%;
 min-width: 100%;
 width: calc(860px * 1.5 * 4);
 animation: 400s linear infinite;
}
/* *********************************** */

.loop-box li {
 display: flex;align-items: center;
 justify-content: center;
 color: #fff;
 width: calc(100% / 4);
}

.loop-box img {
 height: auto;
 width: 100%;
}

.loop-box ul.loop1 {
 animation-name: loop1;
}

.loop-box ul.loop2 {
 animation-name: loop2;
}

@keyframes loop1 {
 0% {transform: translateX(0); }
 49.99999% {transform: translateX(-100%); }
 50% {transform: translateX(100%); }
}

@keyframes loop2 {
 0% {transform: translateX(100%); }
 100%{transform: translateX(-100%); }
}