@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;
}

/* BOXの設定 */
.slider-box {
  width: 90%; /* 全体のサイズ - 変更可 */
  background: #fff; /* 背景色 - 変更可・削除可 */
  border: solid 5px #fff; /* 囲み線 - 変更可・削除可 */
  box-sizing: border-box;
  margin: 0 auto !important; /* Box外の余白 - 変更可 */
  overflow: hidden;
  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: #2e8b57; /* 文字色 - 変更可 */
  font-size: 24px; /* 文字サイズ - 変更可 */
  font-weight: bold; /* 文字サイズ - 変更可 */
  line-height: 2; /* ボタン部分の高さ - 変更可 */
  text-align: center;  
}
.slider-label::before {
  content: "\025a0  STOP"; /* 停止テキスト - 変更可 */
  } 
.slider-check:checked ~ div > .slider-label::before {
  content: "\025b6  MOVE"; /* 再生テキスト - 変更可 */
}

/* 4.スライダー本体とアニメーションの基本設定 ++++++++++++++ */
.loop-box{
  position: relative;
  width: 100%;
  overflow: hidden; 
  margin-top: -1.5rem;
}
.loop-box, .loop-box ul {
  height: 240px; /* スライダーの高さ - 変更注意 */
}
.loop-box ul {
  position: absolute; left: 0; top: 0;
  display: flex; 
  justify-content: space-between;
  background: #fff; /* スライダーの背景色 - 変更可 */
  list-style: none;
  max-width: 1000%; 
  min-width: 100%;
  width: calc(240px * 0.75 * 5); /* 画像の高さ×高さに対する横幅の比率×枚数 - 変更注意・変更可・変更注意 */
  animation: 30s linear infinite; /* アニメーション設定 - 変更可 */
}
.loop-box li {
  display: flex;
  align-items: center; 
  justify-content: center;
  color: #fff;
  width: calc(100% / 5); /* li の幅を均等にする - 削除可・変更注意 */
}
.loop-box img {
  height: auto;
  width: 100%;
}

/* 5.アニメーション個別設定 ++++++++++ */
.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%); }
}
/* ここまでスライダー */